logo

Webdesign

Accueil Webdesign

Webdesign

2 Générateurs de favicons

Pour avoir fait à la « main » les favicons et les Icones Apple Touch, nous pouvons vous dire que c’est long … très long mais voici que ces deux générateurs arrivent pour vous faire gagner beaucoup de temps. En deux clics et quelques secondes et c’est fait … Faire plus simple aurait été difficile !

Le premier ne nécessite qu’un clic, un simple glisser/coller et un clic, celui du téléchargement de votre fichier zippé : Imogen. Il vous suffit de copier coller le code à insérer dans votre header (en vérifiant bien l’adresse des images, une fois que vous les aurez dézippé dans votre dossier).

Le deuxième : Iconifier, est aussi facile (un clic de plus cependant, pour importer votre image !).

générateur de favicon imogen

Kraken.io image lighter

S’il y a un point indispensable, pour l’instant, sur le web c’est bien d’alléger le poids de son site. Vous pouvez déjà commencer (ou continuer) par les images. Souvent trop lourdes et mal dimensionnées, elles ralentissent le temps d’affichage de votre site et ça ce n’est pas très bon ! Les moteurs de recherche peuvent vous pénaliser pour cela. Sans compter que vos visiteurs n’ont pas toujours la patience d’attendre que le site s’affiche.

Kraken est l’outil online idéal, même dans sa version gratuite qui ne permet que l’optimisation du poids de vos images. Et il aussi efficace que rapide ! Un simple glisser/coller d’un groupe d’images sur le site suffit. A savoir qu’en plus il agit sur le poids des SVG.

kraken

Un test de qualité a été fait autour de notre logo et il s’avère très concluant : 92.89 Kb sauver soit 82.42 % de gain et nous ne percevons pas de perte.comparer deux images

kraken1

La version pro de Kraken offre aussi la possibilité de redimensionner les images.

 

 

 

Tester l’accessibilité de votre site

test Accessibilité

test Accessibilité

L’accessibilité c’est rendre visible et audible un site internet à ceux qui n’ont pas les mêmes moyens physiques (mal-voyants, daltoniens, mal-entendants…) ou même à ceux qui n’ont pas les mêmes moyens matériels (vieil ordinateur, vieux navigateur, connexion très lente …). Chaque visiteur est un prospect ; rendre accessible son site favorise un meilleur taux de transformation.

En y regardant bien, de nombreux sites ne sont pas fait pour ce type de visiteurs. En effet, bien souvent, lorsqu’un site est mis en ligne, il est conçu selon ce que voit leurs concepteurs ; avec leur écran, leurs navigateurs, leur connexion… Un site n’est pas perçu de la même façons d’un individu à un autre.

Aussi, il existe des « normes » d’accessibilité. Tanaguru, met à votre disposition un outil de test pour mieux mettre en évidence les points faibles d’accessibilité. Gratuit pour 5 tests par jour.

Alternative à Google font

font adobe

font adobe

Pas toujours facile de chercher et de trouver une police sur Google font, il faut le reconnaitre. Adobe font pourrait être une alternative intéressante, d’abord parce qu’il y a du choix (A ce jour il y a déjà plus de 500 polices gratuites et disponibles sur le site) et aussi parce que l’interface facilite de beaucoup la recherche.

Il ne nous reste qu’à vérifier le temps de chargement de la police sur un site et voir si cela ne le ralenti pas trop, le problème est exactement le même avec les polices proposées par Google.

Générateurs en séries


C’est toujours pratique les générateurs de code CSS, nous en avons déjà maintes fois parlé. Nous ne nous lassons pas !

Css Matic, propose plus qu’un simple générateur de dégradé (comme ici) . Des dégradés verticaux ou horizontaux, radients ou linéaire, ou en diagonales et cela avec autant de couleurs que votre navigateur et votre bon goût pourront supporter. Ajoutez à ça (sur le même site) un générateur de radius, de box shadow et … également un générateur de texture. Sans compter qu’il génère aussi pas mal de gain de temps.

Generateur de rubans CSS

Pour beaucoup, nous pourrions nous demander l’intérêt d’un tel outil… C’est vrai. Pourtant, il nous arrive parfois d’avoir besoin de créer ce type de forme pour la création d’un thème. Ribon Builder de Live Tool propose de vous aider dans la conception d’un ruban en pure CSS (Pas d’image, juste du code), plus léger et surtout bien plus rapide à faire.

Un problème cependant, l’intégration dans une feuille de style CSS responsive. C’est un peu plus difficile !

Le même site propose d’autres outils, tout aussi efficaces.

Optimiser ses images

Smush it : un utilitaire onlinel indispensable pour l’été… La perte de poids étant d’actualité ! Dans ce cas, il s’agit surtout d’alléger vos images avant de le poster sur le web. Cela sans perte de qualité.

Smush it, est un outil Yahoo developper network.

Beautifier Css et html

Pour les amoureux de l’ordre et de la clarté : quelques outils qui devraient vous faire gagner du temps. Des outils capable de mettre de l’ordre dans les arborescences de vos fichiers html, php ou CSS.

Pour les fichier Css : PROCSSOR (propose plusieurs paramétrage)

 

ou FreeFormatter pour le HTML (chosissez l’option Tab Delimited, qui allège votre fichier)

Merci à Maxime pour les liens.

Dummies images pour wordpress

Un outil bien pratique pour tout concepteur de page web. Certes ce n’est pas nouveau, mais c’est toujours bien de l’avoir sous la main ou de se souvenir que cela existe.

Lorem Pixel est de loin le meilleur. De plus il est d’une facilité d’utilisation désarmante et il offre plusieurs choix de thème et « évidemment » toutes les possibilités de tailles.

Utilisation :

http://lorempixel.com/400/200/business/Dummy-Text/
Adresse/largeur/hauteur/thème/avec du texte sur l’image/

Vous pouvez faire varier les thèmes, la largeur et la hauteur. A vous de choisir ce que vous voulez.

Javascript minify

minify javascript

minify javascriptNous savons tous, maintenant, qu’une page légère est un avantage pour un bon positionnement sur google. Commençons par alléger un peu les javascripts, suivront les images et les css. Peu de chose à dire en réalité sur cet outil, si ce n’est, et c’est déjà pas mal, qu’il fait très bien et très intelligemment ce qu’on lui demande. C’est-à-dire, réécrire les fichiers javascript en les réduisant considérablement. Pour en avoir essayé plus d’un, je suis cette fois ravi du résultat puisqu’une fois réduit les animations jquery s’affichent toujours aussi correctement mais aussi plus vite.

Testeurs de formats mobiles

C’est la fin de l’ordinateur de bureau dans la chambre ou dans un coin du salon… L’internaute a déjà muté en mobinaute. Nouveaux outils, nouveaux formats et nouvelles manières. Ces nouvelles pratiques offrent une multitude de possibilités marketing pour les entreprises. Encore faut-il adapter sa communication digitale aux nouveaux formats.

Le concepteur de site internet doit pouvoir tester sa production sur tous les formats proposé pour permettre à tous les formats d’écran de lire correctement les sites internet… mais il y en a beaucoup ! trop ! heureusement il existe sur le net quelques outils qui permettent de faire des tests sans se ruiner à acheter 20 tablettes et 50 smartphones.


QuirkTools : très complet et très ergonomique

 


Cowemo : sussi complet que le précédent, il semble toute même plus efficace mais cependant moins facile d’utilisation.

Générateurs de boutons

genarateur de boutonsExcusez cette mauvaise blague (voir image) : en écrivant le titre je n’ai pu m’empêcher de penser à Biactol … Cela dit ce qui suit n’a rien à voir avec des problèmes de peau.

Il s’agit de trois outils très pratiques qui permettent de gagner du temps et de faire des beaux boutons CSS sans images … rien que du code ! dégradés, arrondis, effet de profondeur, ombres … et plus encore.

CSS button generator, Button Maker et CSS3buttongenerator … J’aime bien les trois !

Skeleton

Pour les webdesigners perfectionnistes il y avait Grid960, qui permet de tracer droit son site. L’arrivée en masse des smartphones nous oblige maintenant à proposer à nos clients des thèmes « mobile friendly » … et cela sans oublier les tablettes.  Alors que nous avions commencé à nous y habituer Grid960 était devenu obsolète. Il fallait rapidement le remplacer.

Après un tour d’horizon sur ce que nous pouvions trouver en terme de « grid responsive » avec des medias queries donc. Nous avons choisi de travailler avec Skeleton qui pour plusieurs raisons nous a séduit.

Les webdesigners comprendrons et l’adopterons, si ce n’est pas déjà fait.

Generateur de Gradient CSS

CSS3 Gradient Generator

Encore un petit outil bien pratique pour les designer web. Un générateur de code CSS pour réaliser des effets radiants sur les boutons ou sur n’importe quel objet de votre CSS.

Ultimate CSS Gradient Generator : Très efficace et complet. Il nous vient de Colorzilla et permet l’ajout de plusieurs couleurs. Il fonctionne sur tout les navigateurs. Produit de grosses lignes de code cependant.

 

 

CSS3 Gradient GeneratorCSS3 Gradient Generator : Très efficace également et quand même plus simple (moins complet quand même) que le précédent.

 

(suite…)

Convert HTML to PDF

Convert HTML to PDF vous permet, comme son nom l’indique de convertir une page html au format pdf. C’est vrai que le besoin n’est pas quotidien… Mais il suffit souvent d’une fois pour que ce genre d’outil vous facilite un peu la vie ! Autre outil utile présent sur le site : un éditeur wisywig.

Pdf converter est un autre outil dans le même genre, la qualité de l’image pdf est un peu plus mauvaise que le précédent, mais il permets d’autres possibilités de conversion, word (dans les deux sens), excel, image, url …

3 Générateurs de nuage de tags

Nous ne reviendrons pas sur l’intérêt ou non d’un nuage de tag sur votre site. Cependant nous nous attarderons un peu sur son esthétique. Car, avouons le, la plupart du temps le nuage de tag est moche ! S’il est acceptable sur un blog, il l’est moins sur un site d’entreprise, parce qu’il prend de la place est n’est pas forcément cohérent en terme marketing. Personnelement, je m’en passe très bien ! d’autant qu’il ne garanti absolument rien en terme de référencement ! Cela dit, il y est des fois, où il est peut être utile de le mettre… quand on vous le demande ! Dans ce cas :

(suite…)

Générateur de « loader »

loaderUn outil pour faire des « loader », vous savez ces petit gif qui tourne pour vous indiquer que votre page est en train de se charger. Si vous avez eu un jour l’occasion de le faire vous même, vous devez savoir combien c’est fastidieux. Heureusement il existe des générateurs très efficaces et complètement paramétrables.

loadinfo.net

5 outils pour construire son site

grid 960 Grid 960, c’est l’outil indispensable pour se simplifier la vie et avoir une feuille de style irréprochable de clarté et d’alignement. Un peu difficile à prendre en main (quoique !) mais une fois que c’est fait vous ne pourrez plus vous en passer.

templatrEn quelque clic, faites votre thème WordPress. A la sortie, il ne vous reste qu’à placer celui-ci dans votre FTP et l’activer sur WordPress. Le résultat est un peu basique, mais très efficace.

sandboxComplémentaire avec les précédents,  Sandbox est un outil simple qui vous permettra de construire rapidement les éléments de votre feuille de style en wysiwyg.

izzymenu IzzyMenu, pour des menus simples et esthétiques.

phpformPhpForm, pour construire la base de vos formulaires. L’outil ne fournit que la partie visuelle du formulaire et en aucun cas la partie php.

WordPress Hacking

wprecipesWordPress est un outil stupéfiant. Au départ c’était un support de blog et puis petit à petit, à l’instar de Drupal, il est sur le point de devenir un CMS à part entière tout aussi crédible que sûr. L’outil en plus d’être facile à utiliser permet de nombreux paramétrages.

Si vous aimez les codes, mettre la main dans le moteur alors vous aimerez WPrecipes (en anglais).

Plugins Firefox – 1

Firefox propose une pléiade d’outils pour les développeurs.  Ces deux Outils vont vous faciliter les tâches de paramétrages et d’observations.

  • Colorzilla

colorzilla

Magnifique petit outil, pratique et tellement complet. Il vous donne la possibilité de visionner rapidement la palette de couleurs d’un site et de les importer dans votre dossier favori de Colorzilla (palette de couleurs…). Indispensable.

  • MeasureIt

MeasureIt

A peine un peu plus compliqué d’utilisation, mais tout aussi pratique pour mesurer un espace ou une image. Plus précis que je ne l’aurais imaginé.

Menu pur Css

Pure css menuIl y a plusieurs raisons de préférer un menu en pure CSS plutôt qu’un menu CSS et javascript : incompatibilité probable, lourdeur possible …

PureCSSmenu.com, un nom de domaine qui en dit long, vous propose de faire facilement des menu horizontaux avec sous-menus. Facile, rapide et efficace.

Big Huge Labs

big huge labsUn outil pratique et efficace. Comme je les aime !

Besoin de sortir les couleurs dominantes d’un logo ou d’une image pour construire le thème de votre site ? BugHugeLabs vous fournis les codes couleurs directement à inclure dans votre feuille de style.

les couleurs de vos photos

Générateur de radius

Générateur d'ombrage via box-shadow en CSS3

Un outil pratique qui manquait à tous les générateurs que l’on trouve sur ce site. Le générateur de radius compatible sur « presque » tous les navigateurs.

border radius generator Pratique, rapide et simple

Générateur d'ombrage via box-shadow en CSS3Tout aussi pratique, il permet en plus d’ajouter un effet ombré. 

Testez vos newsletters

emailonacidPour le peu que vous ayez construit votre site vous même, vous savez déjà que le rendu risque d’être sensiblement différent d’un navigateur à l’autre. Quel choc parfois de voir son site tout de guingois sur l’écran d’une connaissance qui n’est équipée que de IE6 (navigateur que vous aviez pourtant mis à jouril y a très longtemps sur votre ordinateur ! et oui c’est dur d’imaginer que les autres n’ont pas fait la même chose, et pourtant !). Pour s’éviter quelques explications pitoyables sur l’aspect étrange de votre site, il existe des outils qui vous permettent de le tester sur les différents browsers (voir ici) avant de le mettre en ligne.

Mais ces petits problèmes ne s’arrêtent pas à votre site,  ils existent également lors de l’affichage de vos emails. Et cette fois cela n’a rien à voir avec le navigateur mais avec votre logiciel de messagerie.  Pour des raisons de professionnalisme, il vous faudra donc prendre en compte ce fait lorsque vous lancerez votre newletter colorée  ou votre campagne emailing en css. Email on Acid, vous propose de tester en quelques clics votre email avant qu’il soit réceptionné sur thunderbird, outlook, yahoo, gmail et autres. Pratique !

Source : webstorming

Désir de débuts difficiles

desirdavenirPas de chance pour l’initiative « désirs d’avenir » de Ségolène Royal qui vire à la parodie avec un site internet digne des années « Gif » dans le plus pur style  new-age des années 90.  On aurait pu passer sur la forme si le prix d’achat de ce site n’avait pas été de 41 860 €, soit à peu près 10 fois plus cher que ce qu’il aurait dû coûter s’il avait été conçu par un vrai professionnel du web.

De fil en aiguille, ce site tourne à la farce sur le net : lire l’article sur rue89.com pour en savoir plus sur la facturation de ce site et ICI pour comprendre le site à travers ses mises à jour.

Parmi les réalisations les plus créatives et les plus délirantes je vous recommande de regarder ces deux vidéos : Tiré du film « la chute » : Ici et Désir d’avenir Raëlien :

favicon en deux clicks

faviconUn favicon c’est l’image qui représente votre site dans la barre d’adresse, mais que l’on retrouve sur les onglets de votre navigateur ou dans vos favoris.  Il est aussi petit que nécessaire en terme de présentation. 16*16 pixels qui ne permettent pas beaucoup de détails. Voici 3 outils qui vous permettront de faire rapidement votre icône. (suite…)

Navigateurs et standards

navigateurTout bon webdesigner possède un panel complet d’outils sur son ordinateur  pour vérifier la mise en page de ses réalisations sur les différents navigateurs (d’IE 1 à IE 8, Opéra, Firefox … et j’en passe).Tâche nécessaire pour avoir une idée précise de ce que verront les utilisateurs en fonction de leur installation (format de l’écran et prise en charge des standards de la part des différents navigateurs). Il est vrai que la tache est fastidieuse… mais quasi obligatoire pour rendre un travail fini et propre.

Voici un outil qui vous aidera rapidement à voir en un coup d’œil sur ce que verront les internautes en fonction de leur installation (format d’écran et navigateur) grâce à des images de votre site en fonction de nombreux navigateurs. BrowserSHot photographie votre site en fonction de tous les navigateurs. Il prend en charge la taille d’écran, la profondeur des couleurs,  javascript, java et flash. Pratique !

Un seul son vous manque

universal… et tout n’est que bruit. Ce n’est pas facile, de trouver le son qu’il vous faut, lorsque vous avez une idée bien précise en tête. Un petit « clic », un « plouf » voire un gros « splash ». Bref, à moin d’essayer de le faire vous même, il vous faut trouver cela sur une banque de sons riche et de qualité acceptable.

Pour des besoins occasionnels, je vous conseille Universal-Soundbank, qui est complètement gratuit et contient une game de sons très variés. Le moteur de recherche (google) est très efficace, de plus  il accepte les recherches en français… Un luxe, quand on sait qu’ il est déjà parfois difficile de mettre un nom sur un bruit en français, on peut imaginer combien il est difficile de le faire en langue étrangère.

Jotform

jotformToujours utile…  surtout lorsqu’on a besoin !

Jotform, voici un outil web2 qui vous permet de construire rapidement et efficacement :

  • des formulaires vierges,
  • des formulaires de contact,
  • des enquête de satisfaction,
  • des candidatures,
  • des proposition de sites Web,
  • des inscriptions à des fêtes, à des mariages,
  • des reservations,
  • des emploi du temps,
  • des traceur de bug…

(suite…)

Idée labs

orange.jpgLe concept est impressionnant d’efficacité et de pratique.

Si vous recherchez des images qui pourraient correspondre à la palette graphique que vous vous êtes fixé pour illustrer un site, un billet ou un exposé powerpoint (qui sait ?). Vous le trouverez certainement avec l’aide de ces outils.

  • Multicolor : fait une recherche à partir d’une ou de plusieurs couleurs.
  • BYO fait des recherches à partir d’une images que vous allez uploader. Il recherche des images aux couleurs similaires. (image du bas, recherche à partir d’une mes photos).

Les recherches se font sur la base de données du site Flickr ou sur la base payante d’Alami. Une « idée » qui complete celle de « Retrievr » dont nous avons parlé sur ce site.

rouge.jpg

source : Online Foad

Générateur de Sprites

website_performance.gifNon, cela n’a rien à voir avec la boisson gazeuse. Le générateur de Sprites (Petit objet graphique) CSS permet de gagner du poids sur votre feuille de style.  Grâce à cet outil vous n’aurez qu’une image à télécharger pour votre site. Le générateur de Sprites s’occupe de vos images pour n’en faire qu’une seule  au format PNG. Une au lieux de plusieurs, ce qui rend plus rapide la lecture de votre page et cela sur n’importe quel navigateur. L’autre avantage : les images de vos boutons, par exemple, n’attendent pas que vous passiez votre curseur dessus pour se télécharger.

Bien que l’outil soit capable de vous donner tous les éléments nécessaires pour l’intégration des informations sur votre feuille de style, cela peut paraitre un peu complexe. Sur votre CSS cela donne quelque chose comme ça



Cette technologie est utilisée par Yahoo.

Ligne de code

pastie.jpgPour ceux qui aimeraient partager occasionnellement quelques lignes de code, sans pour autant faire des retouches dans leur feuille de style : je vous conseille « Pastie« . Outre la simplicité de l’opération, l’outil permet de générer un fichier « .txt » que vos lecteurs pourront télécharger avec la touche RAW.

L’outil est très pratique mais il se peut que le résultat sur votre site déborde sur la droite : des lignes de code trop grandes dépassent du cadre de Pastie et s’étalent sur tout le reste de votre page. Il y a un moyen bidouillage pour palier ça : rajouter une valeur « overflow-x:scroll » juste avant de coller le script que vous aurez généré.

L’exemple, le résultat et le code :

Design resources

designresources.jpgVoici un moteur de recherche basé sur google, spécialement destiné au designer en tout genre.

Le bougre m’a surpris ; je ne m’attendais pas à de tels résultats ! Bon il est vrai que je n’avais rien de particulier à chercher, mais alors que je faisais, sans trop y croire, une recherche sur le mot « ajax », je me suis retrouvé avec une flopée de liens plus magnifiques les uns que les autres : tutoriels, scripts et j’en passe. Le genre de recherches qu’il vaut mieux lancer les dimanches pluvieux, aux risques de ne pas décoller de votre ordinateur.

Mondrian et la CSS

mondrian_1.jpgRécemment j’ai eu à expliquer comment faire une feuille de style (CSS) à quelqu’un. Je lui expliquais qu’il n’était question au début que de mettre des petits rectangles dans des grands. Un peu comme replacer des sucres dans une boites, ou mieux des aimants dans une boite en fer.

Pour mettre cela en application, il m’est venu l’idée de recréer une œuvre de Mondrian sans aucune image, juste avec un peu de code. Cela m’a semblé plus visuel et cela s’avère être un bon exercice d’apprentissage de la CSS, (suivront d’ailleurs des tutoriels à partir de ce thème).

La première image que j’ai trouvé sur le net m’a parut idéale. Si ce n’est que les bordures ne vont pas jusqu’au bout. Qu’importe, j’avais commencé, je l’ai donc fini en respectant ces « contraintes ».

Les évolution de la CSS nous permettrons peut être un jour de faire autre chose que des blocks carrés ou rectangulaires. Lorsque cela arrivera je m’attaquerais peut être à Guernica.

Créer facilement son favicon

favikon.jpgLe « favicon » est cette petite image qui se trouve sur les onglets de votre navigateur et qui, en plus du titre, désigne votre page. Il est en quelque sorte la touche finale de la création de votre site. Le détail ultime qui fait de votre site un site fini.

Mais voilà, ce n’est pas si facile à faire, il mesure 16×16 pixels : c’est dire à quel point il est carré et petit ! C’est d’ailleurs cette petitesse qui le rend difficile à concevoir. Lorsque l’on part d’une grande image on a du mal a se rendre compte à quel point cela sera laid et méconnaissable au résultat. Attendez vous donc à plusieurs essais.

C’est là qu’entre en jeu Favikon, qui facilite on ne peut plus la création et l’intégration du favicon. L’interface est ergonomique et les résultats sont rapides. Favikon ne permet pas les favicons animés, mais bon ce n’est vraiment pas grave !

Packaging écolo

emandarine.jpg

Sur 3D-box maker vous pourrez faire en quelques clicks un packaging  non polluant pour afficher et promouvoir vos productions.

L’image est un outil marketing très important et il est vrai que la 3D rend presque palpable ce qui ne l’est pas, une sensation que nous n’achetons pas du « vent » mais bel et bien quelque chose de concret.

Ces formes de packaging virtuelles sont d’ailleurs largement utilisées sur internet pour des offres de services.

Patterns

bgpatterns_1.jpgC’est vrai que j’aime ce genre de petits outils pratiques que l’on trouve régulièrement sur le web. D’autant que ce n’est pas toujours aisé de réaliser un fond bariolé qui colle vraiment. Bgpatterns vous propose de créer vous même le fond de votre site et de le tester. L’outil est paramétrable et propose plusieurs possibilités.

ava7patterns.jpgPuisque j’y suis, il y a aussi Ava7patterns, Backgroundlabs et DinsPattern, pour ceux qui préfèrent chercher que créer (question de temps ou d’envie !). Sur ces trois sites vous trouverez de très jolis fonds bariolés, un peu plus complexes que sur bgpatterns.

dinpattern.jpgAva7paterns propose un outil de recherche par couleur ou par formes, Backgroundlabs par mots clés et couleurs, Dinspattern vous permet de les essayer sur son site. Sur ces quatre sites vous trouverez surement ce que vous cherchez.

Générateur de balises meta

meta generator_1.jpg Les balises <meta>, vous le savez certainement, sont très importantes en matière de référencement naturel. Certains CMS proposent des outils pour les remplir à partir du back office. D’autres non ! alors j’ai construit un petit outil PHP et javascript pour faciliter cette « fastidieuse tâche » qui consiste à écrire entre les guillemets, sans se tromper tout en faisant attention aux accents.

Je le mets à disposition de ceux qui en auront besoin. Ce n’est pour le moment qu’une version Beta qui fonctionne très bien sur tous les navigateurs récents, mais qui pourrait être complétée, ne serait-ce que pour les infos-bulles explicatives.

L’outil Meta Generator a été fait pour faciliter ce petit travail : Les accents sont HTMLisés et il ne reste qu’à écrire les mots clés dans les champs, pour que l’outil génère des <meta> prêtes à être mises entre les balises <head>.

Stipemania

stripe_mania.jpgLe principal avantage de StripeMania sur les autres outils de ce genre, est qu’il permet de créer autant de bandes qu’on le souhaite,  de faire des dégradés et cela en un temps record.

J’aime ce genre d’outils web2, parce qu’ils sont sérieusement pratiques, lorsqu’on a besoin d’un background rapide, bien fait et quis’accorde, surtout,  parfaitement avec l’image qui suit.

Optimiser sa CSS

cssoptimizerimg.jpgVoici quelques sites sur lesquels vous allez pouvoir offrir un régime amaigrissant et un lifting clarifiant à votre feuille de style (CSS) et cela, dans le but altruiste et esthétique visant à afficher plus rapidement le style de votre site.

Ces outils utiles pour les webdesigners facilitent la lisibilité de votre page, par vous même et par les navigateurs. Cependant même si vous n’obtiendrez aucune validation W3C pour votre CSS sur ces pages, ces outils devraient vous aider à mieux comprendre les résultats du test CSS validator W3C.

  • En Français :

cleancss.jpg CleanCss :

paramétrable et efficace (basée sur CSStidy)

  • En Anglais


flumpcakes.jpg flumpcakes
:

(au logo plus qu’étrange !) efficace


cssoptimizer.jpgcssoptimiser:

très simple d’utilisation mais peu paramétrable

  • Pour ceux qui voudraient leur « optimizer »

csstidy.jpgCSStidy à télécharger sur le site de sourceforge.net et à placer sur votre site :exemples : deux autres sites français : floele et codebeautifier

Domain Name Generator

namegenearator.jpgPour ceux qui ont vraiment du mal à commencer sur internet, voici un petit outil qui leur permettra de les aider a choisir leur nom de domaine parmi l’existant disponible. Bien sûr on pourrait penser qu’il faille être franchement peu inspiré, mais pourquoi pas !

L’outil a l’avantage de proposer des noms de domaine courts (moins de 6 lettres en moyenne). L’inconvénient, c’est que ces noms de domaine n’évoquent rien !

Quelques petits exemples : efcel, gibmyn, metll, nutrop …

Bon courage !

Typetester

typetester.pngTypetester est un outil qui permet de comparer 3 types de polices simultanément afin de choisir celle qui correspond le mieux au graphisme d’un site et de générer le code CSS correspondant.

Vu sur Libellules.ch

Effect générator

Pour diverses raisons vous n’avez pas Flash chez vous et pourtant vous aimeriez bien pouvoir placer sur votre site un petit slide show de vos photos favorites ou une petite animation sympathique pour égayer votre blog.

fx.jpgEffect generator et un outil gratuit de type Web2. En quelques clics vous aurez vite compris : l’outil est ergonomique et intuitif. Les constructeurs du site ont ajouté deux petits tutoriels vidéo (en anglais) qui vous aideront dans vos premiers pas.

Voici un petit exemple de ce que j’ai fait, en quelques minutes, à partir de mes photos.



Un très joli site

zoo.jpgJuste pour faire durer un peu les vacances, je vous propose d’aller visiter Ecodazoo : un zoo écologique, fait de papier recyclé virtuel.Un très joli site japonais plein de couleurs et de poésie.

Conçu avec flash par l’agence McCANN ERICKSON.

Lorem Ipsum

lorem ipsum_1.gifUn générateur de texte bien sympathique et pratique, en français et en « simili-latin ». Ce site vous permettra de générer du texte « lorem Ipsum » pour la construction de vos maquettes de site web, adapter vos polices à votre style. Ce générateur vous permet de choisir le nombre de chapitres, de choisir le nombre de mots et de mettre tout cela en majuscules ou non.

Pour la petite histoire, le texte latin « Lorem Ipsum », utilisé depuis le XVIème siecle par les rédacteurs pour présenter un aspect final de leur travail, n’a pas de valeur sémantique. Il s’inspire de l’œuvre de Cicéron.  Ce texte et les mots qui le composent ont été tant manipulés qu’un latiniste aurait du mal à en comprendre le sens : « Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit… » soit  « Il n’existe personne qui aime la souffrance pour elle-même, ni qui la recherche ni qui la veuille pour ce qu’elle est… « 

Source : Wikipedia

Easylistener

easylistener.gif Easylistener est un lecteur audio en flash. Complètement paramétrable, il s’adapte très facilement à vos exigences et s’intègre tout aussi aisément sur vos pages ou votre blog. Mais ce n’est pas sa seule particularité : il est capable de suivre le fil RSS de n’importe quel audiblog, ce qui en fait un outil pratique.

Je me suis amusé à faire un petit « pop up musical« , juste pour me faire plaisir et aussi parce que cela m’a rappelé l’époque où je faisais de la radio. Les 14 titres (très calmes) que vous trouverez ici sont plutôt à écouter en soirée… ou au travail !