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.
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.
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.
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.
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.
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 !
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.
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.
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 ?
Un problème, une suggestion ou une remarque : Poser votre question ou venez en discuter sur notre forum.
Pingback: HTML5 & CSS3 | Pearltrees