Commencez avec HTML5

Ce guide peut être téléchargé en format PDF gratuit. Téléchargez maintenant Commencez avec HTML5. N'hésitez pas à copier et à partager cela avec vos amis et votre famille.

instagram viewer

et

les balises ne sont pas trop intimidantes, et vous n'avez pas peur de vous salir les mains avec du code source.

Deuxièmement, ce guide suppose que vous savez ce qu'est le CSS et comment il fonctionne. Nous ne nous attendons pas à ce que vous soyez des génies de la conception, et vous ne devez pas non plus connaître la spécification CSS dans son intégralité. Vous devez cependant être en mesure d'appliquer un style à un élément d'une page Web, de pouvoir créer un lien vers un fichier CSS et de connaître la différence entre un ID et une classe et comment appliquer un style à chacun d'eux.

Si vous vous grattez la tête à ce qui précède, ne vous inquiétez pas. L'une des meilleures choses à propos du HTML et du CSS est que c'est vraiment, vraiment facile. En fait, MakeUseOf a un incroyable guide XHTML Apprenez à parler "Internet": votre guide du xHTMLBienvenue dans le monde de XHTML - Extensible Hypertext Markup Language - un langage de balisage qui permet à quiconque de créer des pages Web avec de nombreuses fonctions différentes. C'est la langue principale d'Internet. Lire la suite qui vous mettra à niveau très rapidement.

Après avoir lu ce guide, vous pouvez également consulter les articles suivants:

• 8 sites Web avec des exemples de codage de qualité 8 meilleurs sites Web pour des exemples de codage HTML de qualitéIl existe des sites Web impressionnants qui offrent des exemples et des didacticiels de codage HTML bien conçus et utiles. Voici huit de nos favoris. Lire la suite
• 6 blogs pour suivre les grands concepteurs de sites Web 6 meilleurs blogs de conception Web à suivre Lire la suite

Vous aurez également besoin d'un éditeur de texte et d'un navigateur modernes. Toute version d'Internet Explorer antérieure à IE 9 et certaines anciennes versions de Safari, Chrome et Firefox aura du mal avec de nombreuses fonctionnalités qui font partie de HTML5 et peuvent vous empêcher de suivre cette guider.

Par conséquent, nous vous encourageons à télécharger un navigateur moderne. Je recommande Google Chrome et je vais l'utiliser dans chaque exemple.

Au-delà de cela, tout ce dont vous aurez besoin est une volonté d'apprendre. Oh, et un éditeur de texte.

1.2 Éditeurs de texte pour le développement Web

Votre éditeur de texte est ce que vous allez utiliser pour écrire votre code. Vous vous demandez peut-être ce qu'est un éditeur de texte.

Eh bien, tout d'abord ce n'est pas un traitement de texte. Des programmes tels que Microsoft Word et Apple’s Pages sont totalement inadaptés au développement Web. C'est parce qu'ils attachent des informations supplémentaires à vos fichiers HTML, CSS et Javascript, ce qui rend la lecture de votre navigateur Web difficile.

Un éditeur de texte extrait des caractères dans un fichier texte, et pas grand-chose d'autre. Cela vous permet de créer des fichiers sans formatage supplémentaire et peut être enregistré avec n'importe quelle extension de votre choix.

Votre ordinateur en contient déjà un. Si vous utilisez un PC Windows, le Bloc-notes est l'éditeur de texte que vous avez probablement installé.

Sur un Mac, la situation est légèrement différente. OS X arrive avec quatre éditeurs de texte différents. Ceux-ci sont appelés Vim, Emacs, Pico et Nano. Cependant, contrairement au Bloc-notes, ils fonctionnent tous dans le terminal.

Ceci est un peu intimidant pour les personnes débutantes en développement Web et ne doit pas être utilisé par des personnes débutantes en développement logiciel. Nous ne les utiliserons pas dans ce guide. Cependant, lorsque vous êtes un peu plus confiant avec le développement de logiciels et de sites Web, cela vaut vraiment la peine Vigueur Les 7 meilleures raisons de donner une chance à l'éditeur de texte VimPendant des années, j'ai essayé un éditeur de texte après l'autre. Vous l'appelez, je l'ai essayé. J'ai utilisé chacun de ces éditeurs pendant plus de deux mois comme mon principal éditeur au jour le jour. D'une certaine manière, je ... Lire la suite et Emacs. Ils sont tous deux de puissants éditeurs de texte et, une fois maîtrisés, ils peuvent vous faire gagner beaucoup de temps.

Sous Linux, l'éditeur de texte par défaut varie selon les distributions. Sur Ubuntu, il est probable Gedit gedit: l'un des éditeurs de texte brut les plus riches en fonctionnalités [Linux et Windows]Lorsque vous pensez aux éditeurs de texte brut, la première chose qui peut vous venir à l'esprit est l'application Bloc-notes de Windows. Il fait exactement ce que sa description de travail indique - des fonctionnalités simples pour un texte brut ... Lire la suite , qui est un éditeur de texte plutôt agréable qui n'est pas trop différent du Bloc-notes.

Cependant, dans ce cours, nous allons écrire notre code en utilisant trois outils différents.

Le premier est Sublime Text 2 Essayez Sublime Text 2 pour vos besoins d'édition de code multiplateformeSublime Text 2 est un éditeur de code multiplateforme dont je n'ai entendu parler que récemment, et je dois dire que je suis vraiment impressionné malgré l'étiquette bêta. Vous pouvez télécharger l'application complète sans payer un sou ... Lire la suite . Honnêtement, je ne peux pas recommander cela assez fortement. Il est livré avec tout ce qui facilite la vie d'un développeur débutant. Premièrement, cela facilitera la lecture de votre code en coloriant certaines parties. Deuxièmement, il vous permet de basculer facilement entre les fichiers et de gérer des projets entiers de fichiers. C'est idéal pour basculer entre les fichiers et éditer plusieurs bits de code à la volée.

Le troisième est le Console Javascript Résoudre les problèmes de site Web avec les outils de développement Chrome ou FirebugSi vous avez suivi mes tutoriels jQuery jusqu'à présent, vous avez peut-être déjà rencontré des problèmes de code et vous ne savez pas comment les résoudre. Face à un bout de code non fonctionnel, c'est très ... Lire la suite intégré à Google Chrome. Cela nous permet d'écrire Javascript et de le voir s'exécuter immédiatement et sera utilisé pour expliquer les concepts de programmation de base.

Le second est un site Web appelé Codepen.io. Ce site remarquable vous permettra de coder HTML, CSS et Javascript dans le navigateur et est libre d'utilisation. Il vous permettra également de voir instantanément vos modifications.

2. Balisage sémantique

Dans ce chapitre, vous découvrirez le balisage sémantique et comment organiser votre code en fonction de son contenu.

Jusqu'à récemment, le code HTML était généralement organisé avec

Cela a fonctionné, mais il y avait place à amélioration. Le problème avec

Le balisage sémantique est une nouvelle fonctionnalité en HTML5. Il apporte de nouvelles balises, qui fonctionnent de la même manière qu'une balise «div», mais servent à baliser des parties communes d'une page.

Alors, comment ça marche? Considérez le code suivant.

Dans ce morceau de code, nous avons une barre de navigation, un titre et une liste. Ce n'est pas trop différent de la plupart des sites Web que vous allez probablement visiter, quand vous y pensez.

Jetons un coup d’œil à un article sur MakeUseOf. Vous remarquerez qu'une partie de la page est entièrement réservée à la navigation vers d'autres articles. Vous remarquerez également qu'une autre partie de la page contient les mots constituant un article. En haut de la page, vous verrez un en-tête contenant le logo MakeUseOf et quelques autres liens.

Quand on y pense, beaucoup de sites Web suivent ces conventions. La plupart des sites Web ont une partie réservée à la navigation. Ils ont généralement un corps de contenu. Ils ont plus que probablement un en-tête.

Les balises sémantiques sont des balises qui vous permettent de définir des parties d'un site Web que l'on trouve couramment sur la plupart des sites Web. Ils n'ajoutent rien à la page, mais vous permettent de regrouper les balises en fonction de leur contenu et d'appliquer des styles à ces groupes.

Alors, rappelez-vous ce code que nous avions avant? Voyons cela avec un balisage sémantique ajouté.

Comme vous pouvez le voir, le code est beaucoup plus facile à lire. Vous savez quelles parties sont lesquelles et il n'y a aucune ambiguïté. Ceci est important, car il facilite l'écriture d'un bon code propre. Si vous décidez de devenir un concepteur Web professionnel, cela devient primordial - vous ne savez jamais qui lira le travail que vous produisez.

Voyons donc quelques balises de balisage plus sémantiques.

2.1 Section

La section est une balise vraiment utile. Il est utilisé pour saisir d'énormes quantités d'informations et de contenu marqués d'un titre ou d'un titre. Considérez cela comme un chapitre d'un livre. Un chapitre a un titre et peut également contenir des images, des diagrammes, des graphiques et des mots. Une balise de section serait utilisée pour contenir tout cela.

2.2 Article

La balise article est utilisée pour ce à quoi elle ressemble; Contenant du contenu tel qu'un article de blog ou une nouvelle. Ce contenu doit pouvoir être détaché du reste du blog tout en restant cohérent.

2.3 À part

Cette balise est réservée au contenu lié à, mais ne faisant pas partie intégrante de la page Web. Il peut s'agir d'un ensemble de faits liés à une actualité ou à la biographie d'un utilisateur sur un blog.

2.4 En-tête

Beaucoup de pages Web ont une barre en haut de la page qui contient un logo, quelques informations relatives au site et peut-être quelques liens. Dans le balisage sémantique, vous utiliseriez une balise Header pour contenir tout cela.

2.5 Nav

Cet élément est réservé à la partie navigation de votre site Internet. Celui-ci contiendrait des liens vers d'autres sites Web ou vers d'autres pages du site Web. Dans le contexte de MakeUseOf, cela pourrait être la partie de la page qui se trouve sous l'en-tête.

2.6 Pied de page

Cette balise est réservée pour la partie inférieure de la page. Ici, vous pouvez mettre des coordonnées, des informations sur les droits d'auteur, une carte ou des liens vers votre page "à propos de moi".

2.7 Testez-vous

• Qu'est-ce que le balisage sémantique et à quoi sert-il?
• Je fais une page Web et je veux utiliser une balise sémantique pour contenir une biographie sur moi. Lequel dois-je utiliser?

3. Formes

Si vous avez déjà fait un peu de conception Web, vous savez probablement comment créer un simple formulaire en HTML. Si vous êtes vraiment intelligent, vous savez probablement comment prendre les informations que vous obtenez de votre formulaire et comment en faire quelque chose, par exemple les mettre dans une base de données.

Les formulaires sont extrêmement importants. Ils sont à la base de la plupart des choses que nous faisons sur Internet. Chaque fois que vous créez une mise à jour de statut sur votre réseau social préféré, achetez quelque chose sur Amazon ou envoyez un e-mail, vous avez probablement utilisé un formulaire HTML.

Ce que vous ne saviez probablement pas, c'est que la façon dont nous créons des formulaires a radicalement changé en HTML5. C'est aussi beaucoup mieux. Dans ce chapitre, nous allons examiner certaines des choses sympas que vous pouvez maintenant faire, juste avec un vieux balisage ordinaire.

Alors, qu'est-ce qui est si cool avec la nouvelle façon d'écrire des formulaires en HTML5? Tout d'abord, vous pouvez vous assurer que certains champs doivent être remplis pour soumettre, juste en changeant le balisage du formulaire lui-même. De plus, vous n'avez plus besoin d'écrire des montagnes de JavaScript ou de PHP pour ce faire. C'est trivialement facile.

Deuxièmement, vous pouvez vous assurer que vos utilisateurs ne peuvent soumettre que certains types d'informations à votre formulaire. Supposons donc que vous ayez un site Web pour votre liste de diffusion et que vous souhaitiez uniquement que les utilisateurs puissent envoyer des adresses e-mail réelles? Vous pouvez le faire, simplement en utilisant HTML5. C'est vraiment incroyablement puissant.

Troisièmement, vous pouvez améliorer l'apparence de vos formulaires en donnant à certains champs un espace réservé. Cela les rendra beaucoup plus intuitifs, car vous pouvez montrer à vos utilisateurs un exemple de ce que vous attendez d'un formulaire.

3.1 Amélioration d'un formulaire

Examinons donc un formulaire et voyons comment nous pouvons l'améliorer.

Ce formulaire est assez basique. Il prend un nom, un e-mail et une couleur préférée, puis permet à l'utilisateur de le soumettre. Il ne contient aucune validation des informations qui y sont placées, et rien n'empêche les utilisateurs de soumettre ce formulaire avec des champs vides. Changeons tout ça.

Donc, la première chose que nous voulons faire est de nous assurer que le champ e-mail ne prend qu'un e-mail. Auparavant, c'était une tâche assez difficile, car vous deviez créer toutes sortes de code Regex obscur. Enfin, plus. Il vous suffit de changer le type d’entrée de «texte» en «e-mail». Lorsque vous essayez de soumettre ce formulaire avec du charabia, il se plaindra et insistera pour que vous soumettiez un e-mail.

3.2 Types et modèles d'entrée

Il existe d'autres types d'entrée dont vous pouvez avoir besoin. Il s'agit notamment des numéros de téléphone, des adresses Web, des formulaires de recherche et même des sélecteurs de couleurs! Étant donné que HTML5 est en constante évolution, il va de soi que nous serons bientôt en mesure de spécifier davantage de types d'entrée dans un avenir proche.

De plus, pour des choses comme les numéros de téléphone qui varient selon la localité, vous pouvez spécifier des modèles pour les entrées. Celles-ci sont créées en utilisant quelque chose appelé «Expressions régulières» et sont plutôt compliquées, mais incroyablement puissantes.

Nous allons également vouloir fournir un exemple d'e-mail dans notre domaine, afin que l'utilisateur n'ait aucune ambiguïté sur ce qu'il doit soumettre. C’est vraiment facile à faire. Créez simplement un nouvel attribut "espace réservé" avec un exemple d'adresse e-mail.

Nous allons nous assurer que notre champ «Couleur préférée» est obligatoire. Dans la dernière équerre (>) de la balise de saisie E-mail, écrivez simplement «requis». C'est ça. Désormais, lorsque vous essayez de soumettre votre formulaire sans valeur, il génère un message d'erreur.

La chose vraiment incroyable à propos de ces messages d'erreur est que l'utilisateur n'a pas à les écrire ni à écrire de code pour les créer. Vous modifiez simplement un champ pour le rendre obligatoire, et cela fonctionne. Cela dit, il est possible de les personnaliser si vous le souhaitez.

C'était une introduction incroyablement brève à la puissance des formulaires en HTML5. Si vous souhaitez en savoir plus, je vous recommande de visiter ces liens.

Lectures complémentaires:

• Astuces CSS - Écrivons un balisage sémantique
• HTML5 Doctor - Parlons de sémantique

3.3 Testez-vous

C'est votre anniversaire la semaine prochaine, et vous souhaitez créer un formulaire d'inscription afin de savoir combien de gâteau vous devez créer. Ouvrez votre éditeur de texte et créez un formulaire avec les champs suivants.

• Nom
• Adresse électronique
• Numéro de téléphone
• Les allergies

Assurez-vous que les champs nom, e-mail et numéro de téléphone sont obligatoires et que les champs E-mail et Numéro de téléphone sont définis avec les types d'entrée "e-mail" et "tel". Créez un espace réservé pour le domaine des allergies avec la valeur «pollen, œufs, quiche».

Jouez avec le formulaire. Essayez de soumettre les champs obligatoires comme vides et essayez d'insérer des caractères non numériques dans le champ du numéro de téléphone. Dans le champ e-mail, insérez quelque chose qui n'est pas une adresse e-mail. Ce qui se produit?

4. Médias

Il fut un temps où la seule façon d'insérer de la vidéo ou du son dans une page Web était d'utiliser quelque chose comme Flash, Shockwave ou SilverLight.

Ce n'était pas idéal. Tout d'abord, aucun de ces cadres ne fonctionnait si bien sur les appareils mobiles. Ils n'étaient tout simplement pas équipés pour le monde moderne des smartphones et tablettes.

De plus, il s'agissait de formats propriétaires. En conséquence, les utilisateurs de Linux et OS X pouvaient obtenir une expérience assez médiocre ou étaient même empêchés de consommer des services multimédias, car il n'était pas disponible pour leur plate-forme.

Enfin, ils avaient tendance à être lents. Si vous étiez sur un ordinateur sous-alimenté ou plus ancien, vous n'auriez pas une bonne expérience en visionnant des vidéos en utilisant ces cadres. Flash était particulièrement connu pour cela.

4.1 Comment HTML5 rend la vidéo et l'audio impressionnants

HTML5 a changé cela en permettant aux développeurs Web d'inclure de la vidéo et de l'audio dans leurs pages Web avec seulement quelques lignes de code. Il fonctionne un régal sur les appareils mobiles et fonctionne sur tous les navigateurs Web modernes.

En conséquence, de grandes sociétés telles que YouTube, Vimeo et Netflix profitent de la révolution HTML5. Pourquoi ne les rejoignez-vous pas?

4.2 Tout sur les codecs

Dans ce chapitre, vous allez apprendre à utiliser la puissance de HTML5 pour inclure l'audio et la vidéo dans vos pages Web.

Premièrement, je vais devoir commencer par une mise en garde. Bien que vous puissiez utiliser la vidéo HTML5 dans tous les navigateurs Web modernes, cela ne fonctionne pas de la même manière dans chaque navigateur Web. Les codecs utilisés par chaque navigateur varient. Dans Internet Explorer, vous êtes limité à utiliser la vidéo MP4. Chrome est un peu plus généreux et vous permet d'utiliser la vidéo WebM, MP4 et Ogg Theora. Opera est un peu plus restrictif et vous permet uniquement d'utiliser la vidéo Theora et WebM.

En conséquence, vous devez être un peu intelligent avec la façon dont vous insérez la vidéo dans votre page Web. Voyons donc comment cela fonctionne.

4.3 Commencer par la vidéo

Pour commencer, vous devrez créer des ouvertures et des fermetures

Eh bien, lorsque vous attendez le chargement de votre vidéo, la personne visitant votre site peut voir une image liée à la vidéo. Pour ce faire, attribuez simplement à vos balises vidéo un attribut "affiche" avec une valeur de l'image à laquelle vous souhaitez créer un lien. Ça devrait ressembler à ça.

La prochaine chose que nous voulons faire est de créer un repli. Qu'est-ce que ça veut dire? Supposons donc que vous utilisiez l'un des navigateurs les plus anciens et les moins impressionnants du marché. Beaucoup de ces anciens navigateurs ne prennent pas en charge la vidéo HTML5 et ne peuvent donc pas lire la vidéo HTML5. Vous allez vouloir leur laisser un message les informant qu'ils vont vouloir mettre à jour leur navigateur et que tant qu'ils ne le feront pas, ils ne pourront pas regarder votre vidéo.

Pour ce faire, il vous suffit d'écrire votre message à l'intérieur de vos balises vidéo. Rien d'autre n'est requis. Une fois que vous avez fait cela, vous allez vous retrouver avec un code qui ressemble à ceci.

Maintenant, ajoutons une vidéo. Je vais tester cela sur Google Chrome, donc je vais créer un lien vers un film MP4. Pour ce faire, je crée une balise source et lui donne un attribut de src qui a une valeur de la vidéo que je veux inclure.

Ma page est maintenant prête à être ouverte dans mon navigateur Web. Je suis lié à un film qui est vraiment très grand et par conséquent, une fois ouvert, on ne peut voir que l'affiche.

4.4 Ajout d'audio

L'audio peut être inséré dans votre page Web d'une manière qui rappelle très bien la façon dont nous avons inséré la vidéo dans notre page.

Tout d'abord, on crée des balises audio. Ces balises audio contiennent un attribut de «contrôles». Cela donne à l'utilisateur qui visite la page la possibilité de mettre en pause, de rembobiner et d'avancer rapidement l'audio en cours de lecture.

Ensuite, vous incluez une balise source dans le fichier MP3 que vous souhaitez lier. Vous n'avez pas vraiment à vous inquiéter autant en ce qui concerne la compatibilité des codecs. La plupart des navigateurs Web récents ont la possibilité de lire des fichiers audio MP3, bien qu'il soit recommandé d'inclure également un fichier «.ogg» et «.wav» - au cas où.

Enfin, vous pouvez créer un remplacement pour les navigateurs plus anciens. Cela se fait de la même manière que vous avez créé le remplacement pour votre vidéo.

Le résultat final ressemble un peu à ceci.

Lorsque vous l'ouvrez dans votre navigateur Web, cela devrait ressembler un peu à ceci.

4.5 Testez-vous

• Quel est le but d'avoir une affiche dans vos balises vidéo?
• Quels codecs ne pouvez-vous pas utiliser dans Internet Explorer?
• Si je voulais pouvoir suspendre une partie de l'audio, quel attribut ajouteriez-vous à votre balise "audio"?

Lectures complémentaires:

• HTML5 Rocks Video

5. Transformations et animations CSS3

CSS était traditionnellement utilisé pour gérer le mise en page et design d'une page web 5 étapes pour apprendre le CSS et devenir un sorcier Kick-Ass CSSLe CSS est le changement le plus important des pages Web au cours de la dernière décennie, et il a ouvert la voie à la séparation du style et du contenu. De façon moderne, XHTML définit la structure sémantique ... Lire la suite . Cela est toujours vrai, mais dans sa dernière itération, il a acquis la capacité de gérer les animations et les transformations d'éléments et d'images.

Les gens ont fait des choses incroyables avec CSS3, de la création d'une horloge numérique à l'écriture d'un jeu Pong complet. Quelqu'un l'a même utilisé pour recréer le générique d'introduction de Mad Men. Il s'agit d'une technologie vraiment puissante et lorsqu'elle est maîtrisée, elle peut être utilisée pour ajouter un niveau de fonctionnalité incroyable à votre page Web.

Dans ce chapitre, je vais vous donner un bref introduction à CSS3 Les 5 meilleurs sites pour apprendre le CSS en ligne Lire la suite et vous montrer comment ajouter des effets étonnants à votre page.

Tout d'abord, accédez à codepen.io et créez un nouveau stylo. Nous allons l'utiliser comme espace de travail pour la durée de ce chapitre.

Nous allons commencer simplement et créer une transformation d'image simple qui fait pivoter une image de 3 degrés lorsqu'elle est survolée. Tout d'abord, créez une balise div et attribuez-lui un ID. Dans l'exemple ci-dessous, je lui ai attribué un identifiant «muo».

5.1 Effets de survol CSS

Dans cette div, incluez une image de votre choix. J'ai inclus une copie du logo de MakeUseOf.

Vous devrez ensuite écrire certaines règles de feuille de style. Dans l'exemple ci-dessous, j'ai créé une marge supérieure et gauche pour donner de la place à l'image. J'ai également inclus une règle de feuille de style curieuse qui commence par «#muo: hover». Qu'est-ce que c'est?

Lorsque vous associez ‘: hover’ à une règle de feuille de style, que ce soit à un élément, à un ID ou à une classe, vous dites effectivement au navigateur d'appliquer ce style lorsque votre souris régit l'élément. Assez cool, non?

Dans la règle "#muo: hover", nous avons une ligne qui dit "-webkit-transform: rotation (3deg)". Comme je suis sûr que vous l'avez deviné, cela indique au navigateur de faire pivoter cet élément div de trois degrés.

Cependant, il convient de noter que cette balise ne fonctionne que dans Chrome et Safari. Si vous souhaitez que votre code fonctionne dans Firefox ou Internet Explorer 9 et versions ultérieures, vous souhaiterez modifier votre fichier CSS pour inclure les lignes suivantes.

Maintenant, lorsque vous survolez l'image, cela ressemble à ceci:

5.2 Utilisation de CSS3 pour redimensionner les images

Alors pourquoi s'arrêter là? Saviez-vous que vous pouvez également utiliser la méthode de «transformation» pour agrandir ou réduire une image. Modifions notre fichier CSS pour inclure les lignes suivantes.

Comme vous pouvez le voir, nous avons maintenant inclus une nouvelle règle de transformation, mais cette fois-ci, nous lui disons de faire quelque chose appelé "échelle". C'est une très belle façon d'augmenter la taille d'une image. Il prend deux paramètres (ces nombres que vous voyez entre ces parenthèses), et ils représentent la quantité par laquelle vous augmentez la hauteur et la largeur de l'élément.

Comme vous pouvez le voir dans le code, je vais augmenter de 50% la taille du logo MakeUseOf div. Vous pouvez tester cela fonctionne en le survolant. Vous verrez que le logo «MakeUseOf» est désormais beaucoup plus étiré.

Ce fut une introduction très douce aux transformations CSS3. Bien que CSS3 soit très nouveau, vous pouvez maintenant voir que vous pouvez faire beaucoup de manipulations très intéressantes avec lui.

5.3 Testez-vous

• Comment appliquer un style à un élément en survol?
• Comment faire pivoter une image en utilisant CSS3?
• Comment mettre à l'échelle une image à l'aide de CSS3?
• Que se passe-t-il si vous passez votre méthode de transformation ‘translate (50px, 50px)’?

Lectures complémentaires:

HTML5 Rocks - Présentation

6. Juste assez de Javascript

Si vous souhaitez utiliser un script dans votre navigateur Web, vous devez utiliser Javascript Qu'est-ce que JavaScript et comment ça marche? [La technologie expliquée] Lire la suite . Malheureusement, il n'y a pas deux façons. C'est un langue qui a de nombreux fans 5 options étendues de bibliothèque de code JavaScript pour les développeurs Lire la suite , et de nombreux détracteurs aussi. Au fur et à mesure que les langues disparaissent, il a de nombreuses verrues. Il y a une raison pour laquelle le livre le plus remarquable sur la langue s'appelle "Javascript: The Good Parts".

Il sera impossible de vous apprendre à utiliser Javascript dans un seul chapitre. Ce n'est pas le but ici. L'objectif est de vous enseigner suffisamment de Javascript pour que vous puissiez comprendre le chapitre suivant, qui concerne l'utilisation d'une technologie appelée Canvas pour créer des dessins et des animations.

6.1 Accès à la console

Pour ce faire, nous allons utiliser la console Javascript intégrée à chaque copie de Google Chrome. Pour y accéder, vous pouvez cliquer avec le bouton droit sur n’importe quelle page Web, puis appuyer sur «Inspecter l’élément». Cliquez ensuite sur ‘Console’. Vous devriez voir ça.

Il est de tradition que le premier programme écrit par un développeur en herbe soit le programme "Hello World". Il s'agit d'un programme simple qui imprime la phrase «Bonjour tout le monde», et pas grand chose d'autre. Dans votre console, tapez ‘console.log (“ Hello world! ”) ;.

6.2 Votre premier programme

Alors, qu'avons-nous fait exactement? Tout d'abord, nous avons appelé quelque chose appelé «console.log». C'est un peu de code intégré à l'ordinateur qui imprime simplement tout ce que vous lui dites. Nous y avons ensuite attaché quelques parenthèses et inclus les guillemets doubles «Bonjour tout le monde». C'est ce qu'on appelle «passer des arguments», et le type d'argument que nous avons passé est appelé une chaîne. Chaque fois que vous voulez faire quelque chose impliquant des lettres et des caractères spéciaux, vous devez simplement utiliser des guillemets simples. Cependant, si vous voulez faire quoi que ce soit en utilisant des chiffres, vous n'avez généralement pas besoin d'utiliser des guillemets, comme indiqué ci-dessous.

6.3 Variables en JavaScript

Vous pouvez également transmettre des variables à ‘console.log’. Les variables semblent compliquées, mais tout ce qu'elles sont vraiment, c'est un espace pour mettre des morceaux d'informations. Ce sont souvent des chiffres ou des lettres. Pour ce faire, vous déclarez une variable à l’aide du mot clé ‘var’, lui donnez un nom puis avec un signe égal, vous lui donnez une valeur. Donc, je vais créer une variable appelée «bonjour» et lui donner ensuite la valeur «Bonjour tout le monde!». Je vais ensuite passer cela à console.log.

Notez que je n'ai pas transmis "bonjour" à console.log à l'aide de guillemets. C'est parce que je voulais imprimer sur la console le contenu de "bonjour" et non de "bonjour" lui-même.

6.4 Quelles sont les fonctions

Cela peut être un peu fastidieux de réécrire le même morceau de code encore et encore, c'est pourquoi nous écrivons des fonctions. Les fonctions sont plus faciles que vous ne le pensez. Tout ce qu'ils sont, ce sont des morceaux de code que nous pouvons réutiliser sans réécrire le même code. Ci-dessous, nous avons créé une fonction appelée «sup» et lui transmettons un argument en utilisant des parenthèses qui est ensuite enregistré à l'écran. Nous appelons «sup» en envoyant à la console «sup (« Bonjour tout le monde! »);».

6.5 Répéter une action avec une boucle «pour»

Supposons que vous vouliez effectuer la même action un certain nombre de fois. C’est pour cette raison que nous utiliserions une boucle «pour». Ils ont l'air effrayants au début, mais sont si faciles à faire une fois que vous les comprenez. Vous commencez par écrire «pour ()».

Dans ces parenthèses, nous allons vouloir créer une variable qui compte combien de fois nous avons effectué une action. Donc, nous obtenons quelque chose qui ressemble à ceci «pour (var i = 0;)».

Nous voulons ensuite vérifier que je n'ai pas rempli une condition. Donc, dans ce cas, nous voulons voir que c'est moins de 10. Donc, après le point-virgule, nous écrivons ‘i <10’. Notre boucle ressemble maintenant à ceci: ‘for (var i = 0; i <10;).

Si i est inférieur à 10, nous voulons l'ajouter par un, puis faire quelque chose. Donc, nous mettons «i = i + 1». Notre boucle est presque terminée: ‘for (var i = 0; i <10; i = i + 1) ». Notez que la dernière partie n'a pas de point-virgule.

Après cela, nous allons vouloir faire une action. Donc, après les dernières parenthèses, nous écrivons quelques accolades et entre elles, nous allons console.log la valeur de i. Cela créera un compteur qui compte jusqu'à neuf.

Les deux dernières constructions de programmation que nous allons examiner sont les instructions «if» et les boucles «while».

6.6 Si des déclarations

Une instruction «if» exécute une action si certains critères sont remplis. Ils sont similaires aux boucles «for» dans la construction et fonctionnent comme suit. Supposons que vous ayez une variable appelée «cheeseburgers» et que vous vouliez voir si elle a une valeur «savoureuse». Si c'est le cas, vous voulez vous connecter "miam, cheeseburgers" à l'écran. Pour ce faire, vous écririez quelque chose comme ça.

Notez comment j'ai écrit «si (cheeseburgers ==« savoureux »)». Vous utilisez des égaux doubles ou triples pour vérifier l'égalité et des égaux simples pour attribuer une valeur.

6.7 Boucles While

Enfin, une boucle «while» exécute une action alors qu'un critère est satisfait. Donc, imaginez que vous voulez vous connecter «miam, cheeseburgers» tandis que les cheeseburgers sont savoureux. Pour ce faire, vous devez écrire ce qui suit.

Il convient de noter que cela entrerait dans une boucle infinie, et vous devriez éviter de faire une action sur une valeur qui ne changera probablement pas. Cela peut entraîner le verrouillage de votre navigateur ou le non-fonctionnement de votre code.

Comme je l'ai mentionné précédemment, ce fut une très brève introduction à la programmation des constructions en Javascript. Vous êtes encouragés à en savoir plus sur ce sujet fascinant, bien qu'énorme.

6.8 Testez-vous

• Je veux compter à partir de 30. Écrivez une boucle «pour» qui ferait cela.
• Je veux créer une variable appelée «makeuseof» et lui donner la valeur «awesome». Comment cela se fait-il?
• Je veux créer une fonction qui imprime ‘MakeUseOf Is Awesome’ lors de son appel. Écrivez cette fonction.

Lectures complémentaires:

• "Javascript: les bonnes parties" par Douglas Crockford
• Guide Javascript MDN

7. Toile créative

Canvas est une technologie géniale qui vous permet de dessiner des images et de créer des animations sans avoir à recourir à Flash ou Silverlight. Les gens l'ont utilisé pour créer des choses bizarres et merveilleuses, y compris un simulateur de sèche-cheveux et divers jeux vidéo. C'est une technologie merveilleuse et insondable, dans ce tutoriel, je vais vous en donner une brève introduction.

Il convient de noter que Canvas ne fonctionne que sur les navigateurs Web modernes. Si vous utilisez une ancienne version d'IE, Chrome ou Firefox, vous ne pourrez peut-être pas suivre ce chapitre. Si tel est le cas, vous devriez envisager de télécharger la dernière version de Google Chrome, qui était le navigateur Web dans lequel j'ai créé ce didacticiel.

7.1 Premiers pas avec Canvas

Tout d'abord, vous devrez ouvrir votre navigateur Web et accéder à codepen.io. Créez un nouveau stylo.

Maintenant, nous allons devoir déclarer un élément canvas. Créez deux balises Canvas d'ouverture et de fermeture. En eux, vous devez lui passer trois attributs. Ce sont la largeur et la hauteur de l'élément Canvas, ainsi que l'ID que vous lui donnez. Comme avant lorsque vous avez inséré une vidéo, vous devez inclure un message de secours.

Maintenant, nous allons vouloir écrire du code Javascript qui attirera quelque chose à l'écran. Nous allons commencer de base et créer un simple carré rouge.

Nous allons créer une variable (je l'ai appelée "démo"), puis sélectionner l'élément canvas et l'affecter à cette variable. Pour ce faire, vous utilisez document.getElementByID () et transmettez l'ID de l'élément que vous souhaitez sélectionner.

La deuxième ligne de notre script crée une autre variable appelée «contexte» et appelle ensuite «demo.getContext (« 2d »)» sur celle-ci. Cela a indiqué au navigateur que nous travaillerons sur une image 2D, puis nous avons passé les fonctions nécessaires dont nous aurions besoin pour dessiner à l'écran.

Les troisième et quatrième lignes sont celles qui font réellement le dessin à l'écran. La troisième ligne remplit un rectangle avec la couleur rouge, tandis que la quatrième ligne appelle fillRect, qui le positionne et définit sa longueur et sa largeur.

Ce n'est pas impressionnant cependant. Faisons quelque chose d'un peu plus avancé et utilisons la magie de Javascript et Canvas pour créer MakeUseOf un tout nouveau logo.

7.2 Formes et texte

Supprimons notre quatrième ligne et remplaçons-la par une qui place notre rectangle dans le coin supérieur gauche et l'étire sur toute la longueur de notre toile.

Les deux premiers arguments définissent où nous souhaitons positionner les axes x et y de la forme. Définissons ces deux à "0" pour l'instant. Le troisième argument fait référence à la largeur de la forme. Fixons cela à «200», puis laissons le quatrième argument à «50». Vous devriez maintenant avoir quelque chose qui ressemble un peu à ceci.

C'est un bon début, mais il ne mentionne pas du tout MakeUseOf. Nous allons donc ajouter du texte. Créons une variable contenant "makeuseof", et nous appellerons cette variable "MakeUseOf".

Nous allons ensuite vouloir créer une autre variable de contexte. Appelez celui-ci ‘context2’ et assurez-vous qu’il s’agit de 2D. C'est ce que nous utiliserons pour écrire notre texte.

Nous allons vouloir que notre texte soit coloré en bleu et superposer notre carré rouge. Donc, comme avant, nous allons vouloir lui donner un fillStyle de «bleu». Maintenant, nous allons sélectionner les caractéristiques de notre texte. Nous voulons qu'il soit de 20 pixels, formaté en gras et en utilisant une police Arial. Nous appelons font on context2 et lui attribuons la valeur «bold 20px arial».

Parce que nous voulons que ce texte recouvre notre boîte rouge précédente, nous devons appeler ‘textBaseLine’ sur context2 et lui donner la valeur top. Une fois cela terminé, nous appelons ‘fillText’ sur context2 et lui passons la variable contenant notre texte et les coordonnées x et y dans lesquelles nous avons l’intention de placer notre texte. Le résultat final de notre code est quelque chose comme ça.

L'image produite par le code ressemble à ceci.

7.3 Un mot sur toile

Bien que ce soit une introduction incroyablement basique à Canvas, vous devez comprendre qu'il s'agit également d'une technologie incroyablement grande et incroyablement puissante pour démarrer. Ce guide a simplement servi d'introduction à la création de graphiques à l'aide de cette nouvelle technologie.

7.4 Testez-vous

• Ajoutez le slogan suivant à l'image que vous avez créée: «Le meilleur site technologique de tous les temps!»
• Créez une boucle «pour» qui s'exécute pendant dix itérations. Voyez si vous pouvez déplacer votre dessin sur la toile, un pixel à la fois.
• Enveloppez votre dessin dans une fonction. Que se passe-t-il si vous ne l'appelez pas?

Lectures complémentaires:

• HTML5 Rocks - Intégration du canevas dans vos applications Web.
• Treehouse - Comment dessiner avec de la toile

8. Où ensuite?

Merci d'avoir lu mon guide incroyablement bref sur les nouvelles technologies trouvées dans HTML5. Il est indéniable que HTML5 est la technologie du futur. Il est adopté par la plupart des technologies, car il est facile à écrire et puissant au-delà de toute mesure. Les gens font tout le temps des choses incroyables avec ça, et je ne doute pas qu'à l'avenir, vous ferez partie de ces gens. Je suis honoré d'avoir fait partie de votre voyage dans le monde sauvage et merveilleux de HTML5.

Je vous implore de continuer à apprendre. Continuez à coder. Continuez à monter de niveau et à vous améliorer, et en un rien de temps vous utiliserez les technologies qui ont été introduites dans ce petit guide pour créer de merveilleux produits.