Enjoy CSS: créer des composants CSS sans aucune connaissance du langage

Si vous souhaitez intégrer des composants CSS qui en jettent dans vos projets web comme des boutons, des blocs ou encore des input pour vos formulaires mais que vous n'y connaissez rien en CSS, alors l'outil en ligne Enjoy CSS va certainement vous rendre de grands services. Je m'y connais assez bien dans ce langage et je peux vous certifier qu'il offre d'innombrables possibilités. En plus de ça, et contrairement à beaucoup d'outils de ce genre, le code généré est très propre. Avec Enjoy CSS, vous allez gagner du temps et peut-être créer des choses que vous n'auriez jamais pu faire par vous même. Pour se rendre compte la puissance de l'outil, il suffit d'aller faire dans la galerie.

Au niveau de l'éditeur, tout est bien pensé et facile à utiliser, les menus sont clairs et il n'y a pas besoin de lire la notice pour arriver à s'en sortir. Bien entendu, celui qui connait déjà un peu le CSS (au moins les bases) se sentira tout suite beaucoup plus à l'aise que celui qui n'a jamais entendu parler du langage.

Avant de vous lancer dans un nouveau projet, n'oubliez pas d'aller faire un tour dans la galerie pour voir si quelqu'un n'a pas déjà créé quelque chose de similaire, car tous les composants de la galerie sont réutilisables et modifiables. Voilà, autrement je ne peux pas résister, je vais quand même vous montrer un peu le code produit pour un logo style néon (visible en haut à droite de la première capture d'écran de l'article):

Comme je vous le disais, c'est loin d'être du code dégueulasse ! Bref, allez-y c'est que du bonheur !

Ubuntu 13.10: comment installer XAMPP 1.8.3 avec l'interface graphique

XAMPP est certainement ce qu'il y a de plus pratique pour commencer à développer pour le web, il contient tout ce qu'il faut pour tester et concevoir des sites web. On y trouve en autre: Apache2, PHP 5.5 , Mysql 5.6, PhpMyAdmin, OpenSSL etc. Beaucoup de gens ne le savent pas, mais il est possible d'installer et gérer XAMPP très facilement via une interface graphique, c'est quand même plus sympa et plus simple qu'en console pour les débutants sur Linux. Voici donc comment installer XAMPP 1.8.3 sur Ubuntu et ses dérivés.



Pour les architecture 32 bit (i386):

cd /tmp

wget http://goo.gl/CAXLhV -O xampp-installer-i386.run

chmod +x xampp-installer-i386.run

sudo ./xampp-installer-i386.run

Pour les architectures 64 bit (amd64):

cd /tmp 

wget http://goo.gl/v9ZL8o -O xampp-installer-amd64.run

chmod +x xampp-installer-amd64.run

sudo ./xampp-installer-amd64.run

Voilà, une fois lancé, vous allez tomber sur l'installateur graphique, c'est aussi simple que sur Windows:

Une fois l'installation terminée, vous pouvez démarrer les services en ligne de commande ou via l'interface graphique. En ligne de commande, il vous faudra taper:

sudo /opt/lampp/lampp start

pour démarrer, et:

sudo /opt/lampp/lampp stop

pour arrêter. Normalement, pour faire plus simple et raccourcir la commande, il faut créer un lien symbolique dans /usr/bin de cette façon:

sudo ln -s /opt/lampp/lampp /usr/bin/lampp

Comme ça, vous pouvez lancer / arrêter XAMPP plus simplement:

sudo lampp start

Je vous donne la commande, mais ce n'est pas le but. Ce qui nous intéresse ici, c'est de pouvoir gérer XAMPP via l'interface graphique, qui est pas mal du tout. La fenêtre dispose de 3 onglets, un pour accéder à localhost, et d'autres pour accéder rapidement aux dossiers importants de XAMPP:

Vous avez aussi un onglet pour gérer les services sans passer par la ligne de commande.

Et le troisième est pour visionner les logs.



Le problème ... Vous allez voir qu'une fois cette fenêtre fermée, elle devient introuvable dans les applications, car le raccourci n'est pas créé. Je vous propose donc deux solutions pour pouvoir gérer XAMPP graphiquement, dont une qui va nous permettre de retrouver cette même interface.

Première solution

Avant tout, il faut installer un petit paquet, donc tapez:

sudo apt-get install python-glade2

Voilà, maintenant, pour lancer une petite fenêtre simple qui gère juste les service Apache / Mysql / ProFTPD comme celle-ci:

Il vous faudra taper:

sudo /opt/lampp/share/xampp-control-panel/xampp-control-panel

Le mieux est maintenant de créer un raccoruci sur le bureau avec Alacarte par exemple.

Deuxième solution

Celle-ci va vous permettre de retrouver la fenêtre de gestion que vous aviez à la fin de l'installation, elle permet de faire plus de choses. Donc pour la retrouver, ouvrez un terminal et tapez: (si vous êtes en 32 bit, adaptez la commande)

sudo chmod +x /opt/lampp/manager-linux-x64.run

La commande précédente est à faire qu'une seule fois pour rendre le fichier exécutable. Maintenant, à chaque fois que vous voulez lancer XAMPP graphiquement, vous tapez:

sudo /opt/lampp/manager-linux-x64.run

Là aussi, il est préférable de créer un raccourci sur le bureau.

Désinstaller Xampp et ses modules

Pour le désinstaller, c'est assi facile que pour l'installer, il vous suffit de taper:

sudo chmod +x /opt/lampp/uninstall

pour rendre le fichier exécutable, puis:

sudo /opt/lampp/uninstall

Voilà, il y a plus qu'à !

TypeWonder: Prévisualiser des polices d'écriture (font) en direct sur le site de votre choix

TypeWonder est un outil en ligne et gratuit en version bêta qui va vous permettre de prévisualiser de nouvelles polices d'écriture sur votre site, ou n'importe lequel. Pour cela, il vous suffit de rentrer l'URL du site web sur lequel vous souhaitez faire des essais. Par exemple, je rentre l'adresse du blog:

Ensuite, je choisis la police d'écriture que je veux tester dans la liste, et je clique sur Use!.

Quand vous avez cliqué sur le bouton Use!, alors vous allez voir apparaître le site web avec la font que vous avez sélectionné dans la liste.

Comme vous le voyez sur la capture d'écran, le site est bien là avec la font que j'ai sélectionné. En haut, il y a une petite barre d'outils avec 4 boutons. Le premier (enabled/disabled) permet d'activer / désactiver le changement de la police. Le bouton Change Font sert quant à lui à sélectionner une autre police dans la liste. Ce qui est bien, c'est que c'est instantané, une fois que vous êtes sur cette page, vous avez plus besoin de retourner en arrière, sauf si vous voulez changer de site web.

Quand vous cliquez sur le troisième bouton GET CODE, vous obtenez le code à intégrer dans votre code source. Le premier est un lien vers la Google Font à mettre entre les balises "head" du code HTML, et le second est le code CSS à intégrer dans votre fichier CSS. Avant de copier le code, vous avez la possibilité de modifier le style de la police via les petites cases à cocher en dessous. Par exemple, vous pouvez mettre le police en gras, en italique, ou encore jouer sur le poids de la police. Le bouton Share vous permet d'obtenir l'URL pour pouvoir le partager et montrer le résultat à vos amis.



Une extension est aussi disponible pour Google Chrome, mais pas encore pour Firefox et Safari. Rassurez-vous, ça devrait arriver prochainement. Pour télécharger les extensions, c'est sur cette page.

Fabriquer des objets 3D en CSS 3 avec Trivid

Si vous avez déjà mis les mains dans le CSS 3, vous avez dû constater à quel point il devient fastidieux de coder pour avoir un rendu en 3D, c'est long et chiant, et je sais de quoi je parle ... Heureusement, il y a maintenant l'éditeur Trivid. Trivid va vous permettre de générer un objet 3D en CSS3 pour en obtenir le code. Je vous laisse imaginer le gain de temps ! Pour vous montrer un peu la puissance de cet outil, voici un petit exemple avec cette Nintendo (NES) déjà modélisée:

Vous pouvez aussi jeter un coup d’œil à ce superbe X-wing de Star Wars.



Voilà, quelques connaissances de base en 3D vont quand même vous aider à la réalisation d'un objet.

Tiff: comparer 2 polices d'écriture (web fonts) très facilement

Voici un excellent outil en ligne qui va vous permettre de comparer 2 polices d'écriture très facilement. Je ne sais pas si vous avez un jour essayé de trouver la différence entre de l'Helvetica et de l'Arial par exemple, mais il faut avoir un œil de lynx pour pouvoir le faire (il y en a pas).



Tiff rend ce travail facile et agréable, car il vous suffit de rentrer le nom des polices d'écriture que vous souhaitez comparer, et cliquer sur display. Difficile de se tromper dans le nom de la font, car Tiff est doté d'un système d'autocomplétion très efficace. Il va ensuite les superposer de façon à mettre en évidence les différences entre les deux. Voici un exemple de comparaison entre de l'Arial et du Droid Sans Mono:

En dessous, vous pouvez aussi changer les lettres pour vous faire une idée plus précise des différences sur une lettre en particulier.

Malheureusement, Tiff ne supporte actuellement que les polices de la bibliothèque de polices Web de Google (Google Web Fonts), mais c'est quand même un superbe outil pour les développeurs.

Firefox: Connaitre la version de Wordpress utilisée par un blog en un clic

Voici une petite extension toute simple qui va vous permettre de connaitre d'un simple clic la version de Wordpress utilisée par un blog. Il est très important de tenir votre blog sous Wordpress à jour, car c'est certainement la plateforme de blogging la plus piratée et la plus ciblée par les pirates. La raison est simple, c'est que c'est la plateforme la plus utilisée dans le monde. Il est donc plus intéressant de se pencher sur le code pour un hacker, et il suffit de faire une recherche sur un site spécialisé pour s'en rendre compte.



WordPress Version Check pour Firefox est une extension qui va vous permettre d'afficher simplement la version de Wordpress que le blog utilise. Si elle n'est pas à jour alors l'extension vous le signalera.

Voici par exemple un blog avec une version de Wordpress à jour:

Et un blog avec une version pas à jour:

En bref, une extension simple mais qui peut vous sauver la vie.

Réorganiser et identer automatiquement un code CSS avec CSS Beautifier

Lorsque vous voulez lire un code CSS correctement, il est très important que ce code soit présenté de manière correct, sinon ça devient très chiant de le lire et parfois ça ne donne même pas envie. Souvent sur les forums quand je veux aider une personne qui présente mal son code, et c'est très courant chez le débutants, je le réorganise et l'idente à ma façon avant, et c'est une perte de temps.

CSS Beautifier est un outil en ligne qui a justement été conçu pour ça. Avec cet outil, fini l'étape fastidieuse ou il faut réorganiser et identer le code à la main, c'est automatique, c'est clair et chose bien, il vous permet de choisir quelques options.

Pour l'utiliser, il vous suffit de coller votre code dans la fenêtre du haut, de régler les options au milieu, puis de récupérer le code dans la fenêtre du bas.

Dans les optiions, vous pouvez mettre des espaces ou des tabulations, mais la fonction que je vois pas souvent dans ce genre d'outil, c'est separate line qui permet de mettre l'accolade ouvrante à la ligne et non juste après le sélecteur. C'est une question de goût mais moi je préfère.



Voilà, un très bon outil à mettre dans les favoris.



[ source ]

Supprimer le message: "AVERTISSEMENT DE SÉCURITÉ: traitez l'URL ci dessous comme un mot de passe et ne la partagez avec personne" sur votre site / blog

Hier, j'ai été confronté à un gros problème sur mon blog. Sur un de mes articles, j'ai vu apparaître d'un seul coup un affreux message écrit en rouge disant:

AVERTISSEMENT DE SÉCURITÉ: traitez l'URL ci dessous comme un mot de passe et ne la partagez avec personne

Voici une capture d'écran du message original:

Ok, là quand vous voyez ça, c'est un peu la panique, il faut en trouver la cause et rapidement, car plus le message va rester, et plus les visiteurs vont fuir. Eux ne sont pas censé savoir que la cause est le code du SDK de Facebook, et que ça à aucun rapport avec votre blog.

Explication

Le coupable est donc le SDK de Facebook, car une fois le code viré, le message n’apparaît plus, voici le code qu'il faut enlever:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/fr_FR/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

C'est le code que Facebook vous donne, lorsque vous voulez inclure un bouton j'aime sur votre blog ou site.

Bref, si ce message apparaît sur votre site ou blog vous savez ce qu'il faut virer !

La solution

Après avoir cherché un peu, je me suis aperçu que le code du SDK de Facebook avait changé. J'ai donc simplement remplacé l'ancien SDK par le nouveau et le message n’apparaît plus !

Livre en ligne: Comment fonctionnent les navigateurs

Il y a quelques mois je vous avais présenté un document qui expliquait comment les navigateurs modernes marchent de A à Z, seul problème ce document était en Anglais. C'est pour ça que je voulais vous tenir au courant.

En effet le document vient d'être entièrement traduit en français grâce au formidable travail de ram-0000, djibril, zoom61, Thibaut Cuvelier et Sébastien Germez du site Développez.com.

Voici le document original et le document traduit en français.

Street Fighter: Animer ken en CSS3 et Javacript

Aujourd'hui je suis tombé sur un site assez extraordinaire, et je dois vous avouer que j'ai pris énormément de plaisir à enchaîner la lecture de plusieurs articles. Ce site c'est celui de David Walsh, mais ne vous y trompez pas, c'est pas le frère de brandon Walsh dans Beverly Hills mais un développeur web.

Julien Knebel y a publié un super article qui expose comment il est possible d'animer Ken du jeu Street Fighter en CSS 3 et Javascript. Le site regorge de techniques en CSS3 et c'est en plus très bien expliqué, seul petit bémol, c'est en anglais !

Regardez comment il a réussit à animer Ken de Street Fighter, c'est carrément bluffant.



[ La démo | Article avec les explications ]

Blokk: Une font web pour remplacer le Lorem Ipsum

Si vous en avez marre du latin des Lorem Ipsum lorsque vous développez un site web alors vous allez surement aimer blokk.

Blokk est une font qui va en faite remplacer vos paragraphes par une police sous forme de bloques dans vos maquettes, voici un exemple:

La font web est disponible sur le site en .ttf et web fonts.

Design: Code couleur HTML des sites les plus connus

Le site internet sammcqueen.com à eu la bonne idée de rassembler sur une même page le code hexa des couleurs des sites web les connus. La page est divisée en 3 catégories, elle commence par les réseaux sociaux comme Facebook, Twitter, Google+ ou Linkedin.

Pour ensuite passer par les services web comme Dropbox, Github, Spotify ou encore Evernote.

Et enfin un assortiment avec la couleur de la BBC, HTML5, Wordpress, Android etc ..

Une page à garder sous la main si vous taquinez le web design !



[ Page Web complète ]

Blogger: Comment centrer, mettre à droite ou à gauche une image avec la nouvelle interface

Depuis quelques jours je ne sais pas si vous vous êtes rendus compte, mais Blogger a changé la méthode pour insérer des images sur votre blog, et comme dans tout changement, il y a du bon et du mauvais ... Et dans le mauvais vous avez pu voir qu'il y a plus aucun moyen de centrer, mettre à droite ou à gauche une image automatiquement. Mais comme Blogger permet l'insertion de code HTML, il reste possible de le faire en rajoutant du code nous-même. Donc voici la solution en HTML pour le faire. (vérifiez bien que l'éditeur est en mode HTML):

Centrer une image

Le code orange c'est le code de l'image que vous insérez, le code vert est celui que vous devez rajouter, regardez bien car il faut en rajouter avant et après l'image.

<div style="text-align: center; clear: both;">
[ code l'image ]
</div>

Mettre l'image à gauche

<div style="float: left;">
[ code l'image ]
</div>

Mettre l'image à droite

<div style="float: right;">
[ code l'image ]
</div>

Un générateur de nuages en CSS3 et Javascript

Voilà un petit outil sympathique qui ne sert pas à grand chose mais qui est de toute beauté, en effet CSS3D clouds est un générateur de nuages en ligne.

Il y a des nuages prêt à l'emploi, mais aussi plein de petites fonctions pour en créer des plus persos, à essayer c'est marrant (2 minutes) ...

Google Drive: Créer un mini site Web

Je vous en avais déjà parlé au mois de novembre 2012. En effet il était possible de créer un site web sur Google Drive, mais récemment Google Drive a publié une page qui montre comment il est possible de créer un mini site web beaucoup plus simplement qu'auparavant. Voici un exemple que j'ai créé rapidement.



Pour cela, il vous suffit de créer un nouveau dossier et de lui donner les permissions Public. Donc créez un nouveau dossier puis faites un clic droit sur le dossier créé, ensuite cliquez sur Share et encore Share. La il ne vous restera plus qu'à cliquer sur Change pour mettre le dossier en mode public.

Maintenant il ne vous reste plus qu'à envoyer vos fichiers html dans ce dossier. Ensuite, si vous cliquez dessus vous allez obtenir le code de votre fichier, et juste au dessus un bouton preview qui permet de prévisualiser le fichier comme ceci:

L'astuce c'est de cliquer sur preview et de récupérer l'URL. Ce sera cette URL qu'il vous faudra partager avec vos amis pour accéder au site.

C'est beaucoup plus simple qu'avant, mais bien sur si vous avez pas de connaissance en HTML / CSS ça va vous demander un petit temps d'apprentissage.

Blogger: Comment créer de belles infobulles 100% CSS

Il y a quelques jours je vous parlais d'une librairie 100% CSS qui permet d'obtenir des infobulles sympathiques sur votre site ou blog, bien sur il faut savoir l'intégrer. C'est pour cela que j'ai préparé un petit code pour l'intégrer facilement sur la plateforme Blogger.

Le fonctionnement est simple:

<span class="hint  hint--DIRECTION" data-hint="TEXTE DE L'INFOBULLE">
TEXTE QUI VA FAIRE APPARAÎTRE L'INFOBULLE AU SURVOL DE LA SOURIS
</span>

Voici quelques exemples (passer la souris sur le mot exemple pour avoir un aperçu, le code de chaque exemple est juste dessous:

---

EXEMPLE

<span class="hint  hint--bottom" data-hint="flèche en bas">EXEMPLE</span>

---

EXEMPLE

<span class="hint  hint--right" data-hint="flèche à droite">EXEMPLE</span>

---

EXEMPLE

<span class="hint  hint--top" data-hint="flèche en haut">EXEMPLE</span>

---

EXEMPLE

<span class="hint  hint--left" data-hint="flèche à gauche">EXEMPLE</span>

---

EXEMPLE

<span class="hint  hint--error" data-hint="bulle erreur">EXEMPLE</span>

---

EXEMPLE

<span class="hint  hint--warning" data-hint="bulle Attention">EXEMPLE</span></p>

---

EXEMPLE

<span class="hint  hint--right hint--always" data-hint="bulle toujours visible">EXEMPLE</span></p>

---

EXEMPLE

le premier <span class="hint  hint--info" data-hint="bulle information">EXEMPLE</span> d'infobulle</p>

---

Comment intégrer le code sur Blogger ?

Pour cela vous vous rendrez sur:

Mise en page -> Ajouter un gadget -> Gadget Html / JavaScript

Et vous copier coller le code ci dessous:

<style>/*! Hint.css - v0.1.0 - 2013-02-03 * https://github.com/chinchang/hint.css* Copyright (c) 2013 Kushagra Gour; Licensed MIT */.hint{position:relative;display:inline-block}.hint:before,.hint:after{position:absolute;opacity:0;z-index:1000000;pointer-events:none;-webkit-transition:.3s ease;-moz-transition:.3s ease}.hint:hover:before,.hint:hover:after{opacity:1}.hint:before{content:'';position:absolute;background:transparent;border:6px solid transparent;z-index:1000001}.hint:after{content:attr(data-hint);background:#383838;color:white;text-shadow:0 -1px 0 black;padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap;box-shadow:4px 4px 8px rgba(0,0,0,0.3)}.hint--top:before{border-top-color:#383838}.hint--bottom:before{border-bottom-color:#383838}.hint--left:before{border-left-color:#383838}.hint--right:before{border-right-color:#383838}.hint--top:before{margin-bottom:-12px}.hint--top:after{margin-left:-18px}.hint--top:before,.hint--top:after{bottom:100%;left:50%}.hint--top:hover:before,.hint--top:hover:after{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--bottom:before{margin-top:-12px}.hint--bottom:after{margin-left:-18px}.hint--bottom:before,.hint--bottom:after{top:100%;left:50%}.hint--bottom:hover:before,.hint--bottom:hover:after{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--right:before{margin-left:-12px;margin-bottom:-6px}.hint--right:after{margin-bottom:-14px}.hint--right:before,.hint--right:after{left:100%;bottom:50%}.hint--right:hover:before,.hint--right:hover:after{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}.hint--left:before{margin-right:-12px;margin-bottom:-6px}.hint--left:after{margin-bottom:-14px}.hint--left:before,.hint--left:after{right:100%;bottom:50%}.hint--left:hover:before,.hint--left:hover:after{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--error:after{background-color:#b34e4d;text-shadow:0 -1px 0 #5a2626}.hint--error.hint--top:before{border-top-color:#b34e4d}.hint--error.hint--bottom:before{border-bottom-color:#b34e4d}.hint--error.hint--left:before{border-left-color:#b34e4d}.hint--error.hint--right:before{border-right-color:#b34e4d}.hint--warning:after{background-color:#c09854;text-shadow:0 -1px 0 #6d5228}.hint--warning.hint--top:before{border-top-color:#c09854}.hint--warning.hint--bottom:before{border-bottom-color:#c09854}.hint--warning.hint--left:before{border-left-color:#c09854}.hint--warning.hint--right:before{border-right-color:#c09854}.hint--info:after{background-color:#3986ac;text-shadow:0 -1px 0 #193c4c}.hint--info.hint--top:before{border-top-color:#3986ac}.hint--info.hint--bottom:before{border-bottom-color:#3986ac}.hint--info.hint--left:before{border-left-color:#3986ac}.hint--info.hint--right:before{border-right-color:#3986ac}.hint--success:after{background-color:#458746;text-shadow:0 -1px 0 #1a331a}.hint--success.hint--top:before{border-top-color:#458746}.hint--success.hint--bottom:before{border-bottom-color:#458746}.hint--success.hint--left:before{border-left-color:#458746}.hint--success.hint--right:before{border-right-color:#458746}.hint--always:after,.hint--always:before{opacity:1}.hint--always.hint--top:after,.hint--always.hint--top:before{-webkit-transform:translateY(-8px);-moz-transform:translateY(-8px);transform:translateY(-8px)}.hint--always.hint--bottom:after,.hint--always.hint--bottom:before{-webkit-transform:translateY(8px);-moz-transform:translateY(8px);transform:translateY(8px)}.hint--always.hint--left:after,.hint--always.hint--left:before{-webkit-transform:translateX(-8px);-moz-transform:translateX(-8px);transform:translateX(-8px)}.hint--always.hint--right:after,.hint--always.hint--right:before{-webkit-transform:translateX(8px);-moz-transform:translateX(8px);transform:translateX(8px)}</style>

J'ai compressé le code originale, si vous voulez le modifier téléchargez plutôt le fichier sur la page du développeur.

Librairie Hint.css: Des infobulles 100% CSS

Si vous êtes pas trop doué en javascript ou que vous trouvez la solution jQuery trop lourde pour votre site, alors je vous conseil fortement la librairie hint.css, qui est une librairie 100% CSS qui va vous permettre d'afficher facilement des belles infobulles sur votre site, avec plusieurs options, comme le choix de la direction , la couleur ou encore de l'afficher en permanence.

Vous trouverez plus d'info sur le site qui est très bien fait, il y a pas besoin d'être un pro en CSS pour le mettre en oeuvre, quelques notions suffisent.

Modern.IE: Tester son site sous les différentes versions d'Internet explorer

Microsoft à récemment mis en ligne un nouveau site internet nommé modern.IE , qui vous offre plusieurs outils pour vous aider dans le développement de sites web compatibles avec les différentes versions du navigateur Internet explorer.

L'outil que vous vous servirez surement le plus est le scanner de code, qui permet de scanner votre site internet rapidement et facilement afin d'en trouver et vous aider à corriger les principaux défauts de votre code.

Sinon il y a tout un tas d'informations très utiles un peu partout sur le site. Pour une fois je dirais, pas mal Microsoft !

Windows 8: Créer une tuile personnalisée pour votre site / blog

Sur Windows 8, quand vous ajoutez un site à l'écran d’accueil, vous avez du vous apercevoir que c'était franchement moche si celui-ci ne dispose pas du code pour vous offrir une belle tuile.

C'est donc pour cette raison que build my pinned site a été créé. Il va vous permettre de créer facilement une tuile perso. De cette façon, quand votre site ou blog sera ajouté à l'écran d’accueil de Windows 8, c'est votre vignette perso qui sera affichée.

Le fonctionnement est tout ce qu'il y a de plus simple, vous uploadez une image, puis vous définissez un titre et une couleur de fond. Ensuite vous cliquez sur Je veux voir le code. Et il ne vous restera plus qu'à coller le code entre les balises <head> et </head> dans le code de votre site.

UI.Livetools: Un générateur de boutons, rubans et formulaires en HTML 5 et CSS 3

Voilà un petit outil en ligne super bien foutu, qui va encore faire économiser du temps aux développeurs de site web.

UI.Livetools est un superbe outil qui regroupe 4 générateurs. Le premier va vous permettre de générer des magnifiques boutons. Bien sur tout est réglable, le padding, le label, la taille de la police, ou en encore l'épaisseur de la bordure.

UI.Livetools dispose aussi d'un générateur de formulaire HTML assez complet et qui donne des résultats plus que corrects.

Un petit générateur d’icônes, qui lui n'est pas en HTML 5 et CSS 3 bien sur mais c'est très pratique:

Et le dernier, c'est une chose qu'on trouve pas souvent dans les générateurs,et qui m'aurait bien aidé il y a quelques années. C'est un générateur de rubans, c'est très à la mode dans le monde du design web en ce moment:

Encore un outil à mettre dans les favoris !