41Mag - Les ressources et logiciels nécessaires pour développer en HTML5 – et/ou en CSS3

Les ressources et logiciels nécessaires pour développer en HTML5 – et/ou en CSS3

Ceci est le deuxième chapitre du Tutoriel complet pour apprendre le HTML5. Découvrons quels sont les outils et ressources dont vous aurez besoin pour développer vos futurs sites web en HTML5. Et première bonne nouvelle, vous ne serez pas obligé de débourser un seul centimes pour coder en HTML5 ou en CSS3.

Pour commencer à écrire vos premières lignes de codes HTML5, vous n’aurez besoin que de deux choses : Un éditeur de texte et un navigateur. Le premier servira à écrire votre code, un simple bloc-note peut suffire mais nous verrons d’autres alternatives un peu plus loin dans ce chapitre. Quand au(x) navigateurs(s) il servira à afficher le résultat de votre travail.

Tutoriel : Apprendre le HTML5

Cet article est un chapitre du Tutoriel complet sur le HTML5
Découvrez toute la puissance du HTML5, des exemples concrets, des démonstrations. L'ensemble du cours est composé de chapitres concis et compréhensibles par tous, quelque soit votre niveau.

html5

Du simple éditeur de texte au gestionnaire de projet

Si un simple bloc-note peut suffire pour coder en HTML5 ou CSS3, d’autres alternatives existent et apportent bien souvent un meilleur confort. En ce qui me concerne, j’ai toujours utilisé Notepad++ sous windows et Kod sous mac OSx.

Certain logiciel gratuit sont bien plus pratique, par exemple, il vous propose d’enregistrer votre document sous de nombreuses extension (html, css, php, javascript …). Mais, le gros point fort se situe dans la coloration syntaxique. Ainsi, vous gagnerez en lisibilité. Les balises HTML5 seront coloré d’une couleur unique afin de mieux les repérer, idem pour votre texte …

Notepad++ : un éditeur de code GRATUIT à coloration syntaxique pour windows

Si votre machine tourne sous windows, vous pourrez utiliser le célèbre notepad++. Il est très pratique est très populaire ce qui vous permettra de trouver sur Google de nombreux tutoriel sur son utilisation. Vous pourrez également trouver des extension suivant l’utilisation que vous souhaitez en faire.

notepad++

La meilleur alternative GRATUITE à NotePad++ sous Mac OSx avec l’application TextWrangler

TextWrangler est un puissant éditeur de texte destiné principalement pour le développement et la programmation avec coloration syntaxique. TextWrangler  est sans équivoque le meilleur éditeur de texte libre et gratuit pour Mac OS X et la meilleur alternative à NotePad++ pour ceux  qui viennent de windows. Voici donc la tant attendue  sortie de TextWrangler 4.0.

Télécharger TextWrangler depuis iTunes.

TextWrangler 4

Kod.app : un éditeur de code GRATUIT à coloration syntaxique sous mac OSx

Je préfère être franc, si vous avez l’habitude d’utiliser Notepad++, vous serez décu de Kod. Mais c’est un des rares éditeurs de code à coloration syntaxique GRATUIT qui existe pour Mac OSx. Vous pourrez trouvez mieux, mais il faudra payer. Cependant, il ne sera largement suffisant pour l’instant.

kod

Des gestionnaires de projet professionnel : Dreamveawer, coda …

Même si à votre stade cela vous serais inutile, sachez qu’il existe d’autre type de logiciel pour coder ses pages web. Par exemple, sous Max OSx vous pouvez utilisez Coda. C’est un formidable éditeur de code à coloration syntaxique. Comptez malgré tout investir environ 79 Euros.

Le sous titre de Coda est « One Window Web Development » et résume très bien ce qu’est le logiciel : l’intégration en une interface cohérente d’un éditeur de texte, d’un outil de création de feuilles de style CSS, d’un client FTP et d’un navigateur. Bref, une solution alternative à Dreamweaver (sans édition WYSIWYG) en plus léger et plus simple à prendre en main.

coda

Dreamweaver est néanmoins incontournable dès que l’on parle de création de sites web. Ce logiciel a réussi à se forger une réputation crédible loin de l’image un peu péjorative de « Word pour pages HTML » et devenir une vraie solution d’édition et de développement. De nouvelles fonctionnalités font leur apparition comme le mode Affichage en Direct qui permet de visualiser sans ouvrir un navigateur externe, l’aperçu de la page en cours d’édition et même de geler le code Javascript pour le modifier en quelques clics.

C’est un excellent éditeur de sites web, en mode WYSIWYG comme en mode code source. Son prix, assez élevé, se justifie par sa puissance. Compté environ 450 Euros quand même !

dreamveawer

Le navigateur : Afficher le résultat

Tester la compatibilité en installant plusieurs navigateurs sur votre machine

Si un seul navigateur suffit pour afficher le résultat de votre code HTML5 et/ou CSS3, il vous en faudra plusieurs sous la main pour tester la compatibilité de votre site web. Parmi les plus connus, on retrouve les navigateurs suivants :

Les autres navigateurs représentant une quantité négligeable de votre trafic ont été volontairement oublié. Malgré toutes ses précautions, il reste un problème : la version du navigateur. Prenons par exemple deux utilisateurs d’internet explorer. Si ils n’ont pas la même version, l’affichage peut être différent entre les deux.

Etant donné qu’il est quasi impossible, et très embêtant, de posséder chaque version de chacun des principaux navigateurs, vous comprenez déjà que la compatibilité sera un problème récurrent dans la création de vos futurs sites web.

Les solutions de test en ligne

Différents services en ligne gratuit vous permettent de tester l’affichage de votre site web sur plusieurs versions des principaux navigateurs. Super pratique !

Par exemple, vous pouvez utiliser BrowserShots. Son utilisation est très simple. Commencez par entrez l’url – l’adresse – de votre site web puis cochez ou décochez les versions des différents navigateurs dont vous souhaitez un aperçu.

Votre site web devra donc être en ligne, c’est à dire être héberger sur un serveur avec un nom de domaine. Jusqu’à présent nous avons vu comment développer un site ou des lignes de code que nous avons sauvegarder sur notre ordinateur et afficher dans notre navigateur. On appelle cette méthode : Developpement en Local.

Pour tester notre site avec BrowserShots, il devra donc être en ligne et non en local.

 

BrowserShots

BrowserShots

Attention : BrowserShots va prendre des photos de votre site tel qu’il sera affiché dans le navigateur sélectionné suivant sa version. Plus vous sélectionnez de navigateurs, plus le temps d’attente sera long.

Les plug in ou extension des navigateurs

Des plugins ou extension existent pour les différents navigateurs. Certaines sont très pratique pour les créateurs de site web et représentent une solution GRATUITE.  Faites une recherche sur Google pour votre navigateur préféré.

Vous trouverez plusieurs types d’extension vous permettant par exemple d’afficher le code source d’une page web, d’afficher la feuille de style, d’activer ou désactiver le javascript …

Conclusion

En conclusion, il est très facile de développer en HTML5 et surtout GRATUITEMENT. Nopedad++ ou TextWrangler, les cinq principaux navigateurs installé sur sa machine et c’est partis ! Vous avez désormais tous les outils à portés de main, il ne vous reste plus qu’à franchir le cap suivant et apprendre vos premières lignes de codes.

Retour au sommaire

Chapitre 03 : Bien comprendre le principe de balise imbriquées en HTML5

Chapitre précédent : A quoi set le HTML5 ? Que peut-on faire avec ? Quels sont ses limites ?

Article du même thême : ...

  • Pingback: HTML5 & CSS3 | Pearltrees

  • corto505

    bravo, pour votre site. on y trouve beaucoup d’informations intéressantes.
    Juste un petit complément sur les éditeurs Mac gratuits, il y a Komodo , Netbean, Apatana studio…. et le fameux textMate (payant celui-ci).

Copyright © 2013 | 41Mag. All rights reserved. Contact.
Integrated by Créa-troyes. Powered by WordPress.