Créer des images avec zones HTML cliquables facilement

Si vous êtes pas fort en html et que vous voulez un moyen de créer des images avec une zone cliquable très facilement, alors vous pouvez vous diriger sur le site HTML map creator qui va vous faciliter grandement la tâche.

En faite il va même tout faire.

Le principe est simple, vous donnez l'adresse Web de l'image en question. Pour éviter les mauvaises surprises, donnez bien l'adresse d'une image sur votre hébergement, ou un serveur ou vous êtes sur que l'image ne sera pas retirée. Puis vous sélectionnez la zone que vous aimeriez transformer en zone cliquable. Une fois cela fait vous entrez l'adresse vers laquelle vous voulez que votre lien pointe et vous avez plus qu'à copier / coller le code HTML / CSS que le site va vous fournir.

Simple et pratique !

FontPicker: Trouver la police d'écriture adaptée à votre projet

Lorsqu'on se lance dans un projet, que ce soit pour le design de son site internet ou pour créer une infographie, il y a une étape importante pendant laquelle c'est souvent: Arrachage de cheveux !!... le choix de la police d'écriture.



C'est justement pour vous aider dans cette étape que le site Font Picker a été créé.

Quand vous vous rendez sur le site, il va vous lister toutes les fonts que vous avez dans votre ordinateur. Ensuite vous aurez plus qu'à choisir laquelle vous semble la meilleure.

Ce qui est pratique c'est que vous voyez tout sur la même page, et vous pouvez vous faire une idée beaucoup plus facilement qu'en essayant chaque police une par une.

L'outil est aussi disponible sur Mac App Store et sur le Windows store.

Placeit: présenter vos captures d'écran dans un certain contexte

placeit est un formidable outil en ligne qui ma posé une petite colle pour trouver un titre d'article et vous le présenter.

En effet c'est un outil qui va vous permettre de glisser / déposer une capture d'écran ou photo afin qu'elle soit présentée dans un certain contexte. Ce sera par exemple très utile pour un Web designer.

Sur la photo du haut j'ai pris une capture d'écran de Geekologie.me puis je l'ai mis sur l'écran d'un MAC, mais il y en a plein d'autres. Ecran d'iPhone, iPad, etc ...

Comme vous le voyez, sur l'écran c'est écrit qu'il est préférable d'utiliser une image de 1200x675px. Veillez à bien respecter cette taille sinon ça peut vite faire horrible.

Le site est ici.

Pictures to color: Extraire toutes les couleurs d'une image

Pictures to color est un utilitaire gratuit pour Windows, qui va vous permettre d'extraire toutes les couleurs d'une image. Vous choisissez une image, vous faites un glisser / déposer dans la fenêtre du logiciel et il va vous afficher la palette de couleur. Vous avez ensuite la possiblité de l'exporter au format HTML.

Il y a 2 choses importantes à savoir, la première est que ce logiciel ne nécessite pas d'installation, et la seconde est qu'il est clean, c'est à dire pas de pub, et il ne vous installe pas de toolbar et autres saloperies. Vous avez par contre la possibilité de payer un café au développeur en faisant un don, je trouve cette démarche assez géniale, et ça mérite d'être souligné.

LoremPixel: Générer des images dynamiquement

Voila un outil en ligne sympa et extrêmement utile qui va servir aux développeurs et aux designer web.

Si vous faites un peu de développement web vous devez surement connaitre le Lorem Ipsum. C'est un faux-texte de différentes tailles qui permet de remplir des pages à des fins de test.

Et bien LoremPixel c'est la même chose mais avec des images. Ce site vous permet de générer une image de n'importe quelle taille très simplement.



Le top c'est que vous avez même pas à visiter le site, regardez si par exemple je veux générer une image de 540 X 200.

Je place place une balise img dans mon code et je met l'URL du site avec mes dimensions:

http://lorempixel.com/540/200

Si vous voulez une image en noir et blanc ajoutez un g pour grey devant les dimensions:

http://lorempixel.com/g/540/200

Maitenant si vous voulez être plus précis et choisir une catégorie pour l'image mettez le nom de la catégorie à la fin de l'url:

http://lorempixel.com/540/200/food

Vous avez le choix entre 11 catégories:

• abstract


• animals


• city


• fashion


• food


• nightlife


• people


• nature


• sports


• technics


• transport

Regardez l'image d'entête de l'article, le code c'est:

<img src="http://lorempixel.com/g/520/200" />

Si vous rechargez la page, vous verrez que l'image n'est plus la même. Pas mal non ?! c'est un gain de temps précieux pour les développeurs.



Le site est ici.

Loader generator: générer des images de chargement animées (progressbar)

Loader generator est un outil en ligne qui permet de générer une image animée au format .gif dans le but de faire patienter les utilisateurs d'un site ou d'une application, vous avez le choix entre une ligne, cercle, flèche, un icône wifi animé etc ...

Le site est ici.

Image2Icon: Créer un icone / favicon à partir d'une image

Si vous êtes un peu dans le développement web, ou même Blogueur, alors vous allez surement à un moment ou un autre avoir envie de personnaliser votre Favicon, vous savez la petite image qui s'affiche dans la barre d'adresse à gauche.

Vous pouvez même avoir envie de créer des icônes pour vos menus ! ou pour personnaliser un icône de votre système d'exploitation, bref les possibilités sont multiples.

Et bien une extension pour Firefox permet de faire ça assez simplement, elle propose de créer un icône à partir d'une image, il y a le choix entre plusieurs tailles, les tailles sont les tailles d'icônes les plus courantes: 16x16, 24x24, 32x32, 48x48, 64x64 etc ...

Le principe est extrêmement simple, un clic droit sur l'image, vous choisissez la taille et vous avez plus qu'à enregistrer !

L'extension est disponible ici.

Learn CSS layout: apprendre le css

Pour ceux qui voudraient apprendre le CSS et qui savent lire l'anglais alors voici un très bon site qui vous permettra de vous familiariser avec ce langage , ce site est bien dans le sens ou il est pas comme les autres, il se présente un peu comme un livre, j'ai beaucoup aimé la façon de présenter les choses, des exemples concret et très bien expliqué. Si vous suivez les chapitres dans l'ordre alors vous aurez des bases solides.

Les boites, les marges, le placement des éléments, le responsive design bref toutes les bases du CSS y sont abordées.

Le site est ici.

Filtre CSS 3: Comment flouter une photo

Avec l'arrivée de CSS 3 les possibilités sont de plus en plus grandes, et en voila une qui va certainement en ravir plus d'un, en effet CSS 3 introduit la propriété filter qui permet d'appliquer des filtres sur une image.

Voila une petite image de Venise sans le filtre:

Et voila la même image avec un filtre:

Pour arriver à ce résultat il faut utiliser la propriété filter avec la valeur blur, attention car le flou est défini en pixels.

-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);

Si ce code ne marche pas chez vous, c'est soit que votre navigateur est pas à jour, soit il ne supporte pas la propriété filter.

Créer une enveloppe postale en CSS3

Aller, j'ai pas l'habitude de poster mes petits testes en développement web mais aujourd'hui je vais expliquer la façon de procéder pour créer une enveloppe en CSS3.

Si vous avez aucune notion de CSS3 et HTML alors je pense que cet article va vite vous gonfler ..

Pour commencer on va créer deux div en HTML, un avec une class "box" et l'autre avec une class "tri".

<div class="box">
          <div class="tri"></div>
     </div>

La technique que j'utilise est basée sur la propriété transform de CSS3 et plus particulièrement la valeur rotate c'est à dire que je superpose deux boîtes l'une sur l'autre et je tourne celle du milieu à 45 degrés.

La première boîte est un simple rectangle de 215px sur 150px, en "overflow: hidden", c'est important car sinon ça donnera une enveloppe ouverte, la bordure noir de 1px formera le cadre de l'enveloppe.

J'ai rajouté un effet d'ombre mais c'est juste pour le fun.

.box{
    border: 1px solid black;
    width: 215px;
    height: 150px;  
    overflow: hidden;
    box-shadow: 0px 0px 10px #888;
 }

La deuxième est un carré de 150px par 150px, avec un coin arrondi et tourné à -45degrés avec "transform: rotate(-45deg)" ce qui fait qu'une moitiée passe en "hidden" pour former ainsi la fermeture de l'enveloppe.

.tri{  
    width: 150px;
    height: 150px;
    border: 1px solid black;
    
    -webkit-border-radius: 0px 0px 0px 8px;
    border-radius: 0px 0px 0px 8px;
    
   -webkit-transform-origin: 0px 0px;
   -o-transform-origin: 0px 0px;
   -ms-transform-origin: 0px 0px;
   transform-origin: 0px 0px;
   
   -webkit-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);
 }

Ce code marche sur les dernières versions des navigateurs: Opéra, Safari, Chrome, Firefox, et IE 9 car j'ai pas le 10 sous la main, mais il devrait fonctionner aussi.

Tester son site web sur différents navigateurs

Pour un développeur web, je crois bien que le problème le plus embêtant est la compatibilité avec les différents navigateurs, enfaite le problème concerne en grande partie Internet Explorer bien que depuis la version 9 il se soit considérablement amélioré.

Mais il y a pas qu'IE dans la vie, il y a aussi, Chrome, Firefox, Safari, Opéra pour ne citer que les plus connus.

Et pour ne rien arranger, en plus des nombreux navigateurs, il y a plusieurs versions différentes pour chacun.

Il faut savoir qu'il est impossible ou très compliqué d'installer 2 versions différentes d'un même navigateur sur un même système.

La solution

Pour palier à ce problème des développeurs on créés des outils comme browsershots, qui prend l'URL de votre site, le teste sur les navigateurs et systèmes de votre choix, prend des captures d'écran et vous les affichent, attention c'est un peu lent mais vous pouvez mettre le lien dans les favoris et revenir quelques minutes plus tard pour voir le résultat browsershots.org c'est simple gratuit et super pratique.

blog / site web : les bases pour réussir

Dans cet article je ne vais pas vous donner les clés de la réussite financière, je ne vais pas vous donner d'astuce pour gagner de l'argent, je ne vais même pas vous donner d'astuce pour attirer plus de visiteurs, mais je vais vous donner les astuces qui retiendront et feront revenir les visiteurs sur votre blog / site web, les astuces qui feront que les visiteurs se sentent bien sur votre blog / site web.

Le Web Design

Le création du design est une étape très importante dans la vie d'un site web, le problème c'est que les services d'un professionnel peuvent coûter très chers, et cela peut prendre du temps.

Je vois des sociétés proposer des sites web "clef en main" à moins de 100€ ..

Certes c'est pas cher, mais c'est souvent des designs tout prêts, on vous fait choisir parmi ceux qui sont déjà réalisés et qui ont déjà été éprouvés.

En aucun vous obtiendrez un site à votre image, tel que vous l'avez imaginé, et question S.A.V la aussi vous pouvez oublier, à moins d'y mettre le prix mais est-ce que ça en vaut la peine ?



C'est justement pour cette raison que beaucoup de webmasters préfères se lancer dans la conception du design eux même, un peu comme pour les automobiles, c'est moins cher d'acheter une pièce à la casse et de la monter soit même plutôt que d'aller chez le garagiste du coin.

Choisir les bonnes couleurs

En web design il est conseillé de partir sur 2 ou 3 couleurs maximum, pour le choix des couleurs il existe d'excellent outils gratuits, vous pouvez vous servir par exemple de Color Scheme Designer pour votre palette de couleur.

Si le site a pour thème l’informatique il est évident qu'on ne va pas prendre le rose pour couleur dominante et qu'on ne va pas mettre des petits coeurs de partout, un minimum de logique devrait vous orienter sur le choix de votre thème.

Couleurs des zones de texte

Pour les zones de texte le mieux est soit de partir sur un fond blanc ou très clair, avec la couleur du texte très foncé, soit de faire l'inverse c'est à dire du texte blanc sur un fond noir mais c'est déjà plus difficile à lire pour certaine personne.

La chose à ne pas faire c'est de mettre des images ou des petites fantaisies en fond, à moins qu'elles soient vraiment très discrète et bien placées.

Le texte

Pour ce qui est du texte en lui même il faut veiller à ne pas faire des lignes trop longues, c'est extrêmement fatiguant de lire un bloc de texte qui en fini plus avec des lignes qui en finissent plus, la plupart des gens n'iront pas jusqu'au bout.

Pour cela CSS et HTML nous offres plusieurs possibilités:

• Définir une largeur fixe en CSS pour votre zone de texte ce qui évitera des lignes trop longues.


• La balise <br /> qui vous permettra de revenir à la ligne quand vous le voulez.

Penser aussi à la marge entre les lignes, (line-height en CSS), il est préférable de l’augmenter un peu car par défaut les navigateurs les affichent légèrement trop près l'une de l'autre.

Le texte doit être aéré, et plus il le sera plus il sera agréable de le lire même si c'est un texte très long et ennuyeux.

La police d'écriture

La police d'écriture joue un rôle majeur aussi, elle ne doit pas être trop grande ni trop petite, la tendance est entre 12 et 16 pixels.

Les polices trop exotiques sont aussi à bannir, sauf bien sur à certains endroit comme les titres, le pied de page etc ...

Arial, Georgia, Verdana, Trebuchet MS, Times New Roman sont des valeurs sures.

Les images

Attention à la taille des images, il y a des formats d'image adaptés pour le web, et d'autre pas du tout, convertissez vos image en jpg, jpeg, ou gif. Les autres formats sont beaucoup trop lourds et ça peut se ressentir fortement sur le temps d'affichage d'une page.

Le .png peut être utile surtout pour le design, mais comme il est très lourd il est donc à utiliser seulement si il n'y a pas d'autre alternative.

Les visiteurs n'aiment pas attendre pour voir une page, la aussi ça pardonne pas ils s'en vont rapidement.

La publicité

Les publicités sont aussi extrêmement désagréables si elles sont mal placées ou si elles gênent la navigation.Il faut vraiment qu'elles soient intégrées dans le design, et pas qu'elles sautent à l'écran en obligeant le visiteur à cliquer sur une croix pour la faire disparaître, perso j'appel ces sites des machines à fric, c'est un manque de respect envers les visiteurs.



Les hébergeurs gratuit c'est génial mais la plupart en contrepartie, vous oblige à afficher de la publicité, donc pour un site perso tout simple c'est pas gênant mais pour un site sérieux c'est pas envisageable, il faut se tourner vers un nom de domaine et un hébergeurs payant, il y a le choix en la matière.

L'accessibilité

L'accessibilité c'est ce qui concerne la navigation pour les handicapés, les mal voyants etc ... Pendant longtemps le web leur est resté hors de porté. Mais désormais c'est de l'histoire ancienne, il y a des outils adaptés et il y a eu d'énormes progrès en la matière et donc si vous le pouvez pensez-y.