Premiers pas avec HTML5

Premiers pas avec HTML5
Ce guide est disponible en téléchargement gratuit au format PDF. Téléchargez ce fichier maintenant . N'hésitez pas à le copier et à le partager avec vos amis et votre famille.

Table des matières

§1. Introduction





§2–Marquage sémantique



§3–Formulaires





§4 – Moyen

§5–Transformations et animations CSS3



§6–Juste assez de Javascript

§7–Canevas créatif



§8–Où ensuite ?

1. Introduction

Vous en avez entendu parler : HTML5. Tout le monde l'utilise. Il est présenté comme le sauveur d'Internet, permettant aux gens de créer des pages Web riches et attrayantes sans avoir recours à Flash et Shockwave.



Mais qu'est-ce que c'est en fait ?

Eh bien, ce n'est pas une question facile à répondre. Dans ce tutoriel HTML5, nous allons essayer d'apporter quelques réponses. HTML5 est utilisé pour décrire un groupe de choses très diversifié. C'est une norme d'écriture de pages Web. C'est un ensemble d'API. C'est une nouvelle façon d'ajouter de l'interactivité aux pages Web.

HTML5 est tout cela et plus encore. Alors de quoi parle ce livre ?

Dans ce didacticiel HTML5, je vais supposer que vous avez à un moment donné abordé HTML et CSS. Peut-être avez-vous créé votre propre thème Wordpress ou modifié une mise en page MySpace à l'époque. Vous avez peut-être lu le guide XHTML de MakeUseOf. Le fait est que je suppose que vous connaissez une page Web et que ce dont nous discutons dans ce guide ne vous sera pas trop étranger.

Le but de ce guide n'est pas de vous enseigner l'intégralité du HTML5. Ce serait complètement hors de la portée de ce livre. L'objectif est de fournir une introduction en douceur à ces nouvelles technologies Web étonnantes et de vous montrer quelques façons intéressantes de les incorporer dans vos sites Web.

Pourquoi voudriez-vous apprendre HTML5 ?

C'est une bonne question. Dans un monde de smartphones et d'applications, est-il vraiment important d'apprendre à programmer des pages Web ?

Eh bien, croyez-le ou non, il est très courant d'écrire des applications pour smartphone en utilisant les technologies HTML5. Jusqu'à récemment, l'application Facebook pour Android était écrite en HTML5, CSS et Javascript.

Blackberry est une autre grande entreprise qui aime énormément HTML5. Cela est évident dans la dernière itération de leur système d'exploitation mobile, Blackberry OS 10, où ils encouragent activement les développeurs à développer des applications pour leurs téléphones en utilisant les technologies Web.

Les nouveaux smartphones Firefox OS fonctionnent également entièrement sur des applications HTML5. Une connaissance pratique de HTML5 est essentielle dans le climat actuel des smartphones.

De plus, apprendre HTML5 est bon pour votre carrière. Ne me croyez pas ? Selon Indeed.com , le salaire annuel moyen d'un développeur HTML5 est de 89 000 $. Avec de plus en plus d'entreprises qui modifient leurs sites Web pour utiliser les technologies HTML5, les développeurs qui connaissent la pile HTML5 sont plus que jamais recherchés.

1.1 Prérequis

Ce didacticiel HTML5 suppose plusieurs choses. Tout d'abord, cela suppose que vous connaissiez le fonctionnement du web, et que vous sachiez créer une page web basique. Vous devriez être capable de bricoler certains éléments HTML et de pouvoir présenter certaines informations dans un navigateur Web. Voir et

tags n'est pas trop intimidant, et vous n'avez pas peur de vous salir les mains dans du code source.

Deuxièmement, ce guide suppose que vous savez ce qu'est CSS et comment il fonctionne. Nous ne nous attendons pas à ce que vous soyez des génies du design, ni à connaître l'intégralité des spécifications CSS sur le dos de votre main. Vous devez cependant être capable d'appliquer un style à un élément d'une page Web, être capable de créer un lien vers un fichier CSS et 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 pour ce qui précède, ne vous inquiétez pas. L'une des meilleures choses à propos de HTML et CSS est que c'est vraiment, vraiment facile. En fait, MakeUseOf a un incroyable guide XHTML qui vous mettra à jour très rapidement.

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

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 versions antérieures de Safari, Chrome et Firefox auront des difficultés avec de nombreuses fonctionnalités faisant partie de HTML5 et peuvent vous empêcher de suivre ce guide.

Par conséquent, nous vous encourageons à télécharger un navigateur moderne. Je recommande Google Chrome et je l'utiliserai 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. En effet, ils attachent des informations supplémentaires à vos fichiers HTML, CSS et Javascript, ce qui rend la lecture difficile pour votre navigateur Web.

Un éditeur de texte tire 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 pouvant être enregistrés avec n'importe quelle extension de votre choix.

Votre ordinateur en est déjà équipé. 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 est livré avec quatre éditeurs de texte différents. Ceux-ci sont appelés Vim, Emacs, Pico et Nano. Cependant, contrairement au Bloc-notes, tous fonctionnent dans le terminal.

C'est un peu intimidant pour les personnes qui débutent dans le développement Web et ne devrait pas être utilisé par des personnes qui débutent dans le développement de logiciels. Nous ne les utiliserons pas dans ce guide. Cependant, lorsque vous êtes un peu plus à l'aise avec le développement de logiciels et de sites Web, cela vaut vraiment la peine de jeter un coup d'œil à Vim et Emacs. Ce sont tous deux de puissants éditeurs de texte et, une fois maîtrisés, ils peuvent vous faire gagner énormément de temps.

Sous Linux, l'éditeur de texte par défaut varie selon les distributions. Sur Ubuntu, il s'agit vraisemblablement de Gedit , 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 . Honnêtement, je ne saurais trop le recommander. Il est livré avec toutes les choses qui facilitent la vie d'un développeur débutant. Premièrement, cela rendra votre code plus facile à lire 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 morceaux de code à la volée.

La troisième est la console Javascript intégrée à Google Chrome. Cela nous permet d'écrire du Javascript et de le voir s'exécuter immédiatement et sera utilisé pour expliquer les concepts de base de la programmation.

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 vos modifications instantanément.

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 des balises. Ceux-ci vous ont permis de créer un groupe d'éléments, puis d'appliquer un style à ces éléments.

Cela a fonctionné, mais il y avait place à amélioration. Le problème avec les balises était qu'elles n'étaient pas sémantiques. Div ne veut rien dire, vraiment.

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

Alors, comment fonctionnent-ils ? 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 très différent de la plupart des sites Web sur lesquels vous allez probablement un jour, quand vous y pensez.

choses à faire avec un nouvel ordinateur portable

Regardons un article sur MakeUseOf. Vous remarquerez qu'il y a une partie de la page qui est entièrement réservée à la navigation vers d'autres articles. Vous remarquerez également qu'il y a une autre partie de la page qui contient les mots qui constituent un article. Vers le 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, tu te souviens de ce code que nous avions avant ? Regardons-le avec du 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é. C'est important, car cela facilite l'écriture d'un bon code propre. Si jamais vous décidez de devenir un concepteur de sites Web professionnel, cela devient primordial - vous ne savez jamais qui lira le travail que vous produisez.

Alors, regardons quelques balises de balisage plus sémantiques.

2.1 Rubrique

La section est une balise vraiment utile. Il est utilisé pour saisir d'énormes pans d'informations et de contenu marqués d'un en-tête ou d'un titre. Considérez cela comme un chapitre dans 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 cela ressemble ; Contenant du contenu tel qu'un article de blog ou une actualité. Ce contenu doit pouvoir être détaché du reste du blog et avoir toujours un sens cohérent.

2.3 À part

Cette balise est réservée au contenu lié à la page Web, mais ne faisant pas partie intégrante de celle-ci. 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

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

2.5 Navigation

Cet élément est réservé à la partie navigation de votre site internet. Cela 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.

Cette balise est réservée à 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 crée une page Web et je souhaite utiliser une balise sémantique pour contenir une biographie à mon sujet. Lequel j'utilise ?

3. Formulaires

Si vous avez déjà fait un peu de conception de sites Web, vous savez probablement comment créer un formulaire simple 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 nettement mieux. Dans ce chapitre, nous allons examiner certaines des choses intéressantes que vous pouvez maintenant faire, juste avec un vieux balisage simple.

Alors, qu'y a-t-il de si cool dans la nouvelle façon dont nous pouvons écrire des formulaires en HTML5 ? Tout d'abord, vous pouvez vous assurer que certains champs doivent être remplis afin de soumettre, simplement 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 le faire. C'est trivialement facile.

Deuxièmement, vous pouvez vous assurer que vos utilisateurs ne peuvent soumettre que certains types d'informations à votre formulaire. Donc, supposons que vous ayez un site Web pour votre liste de diffusion et que vous souhaitiez uniquement que les gens puissent soumettre 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 un espace réservé à certains champs. Cela les rendra considérablement plus intuitifs, car vous pourrez montrer à vos utilisateurs un exemple de ce que vous attendez d'un formulaire.

3.1 Améliorer 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 allons vouloir faire est de s'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 codes Regex mystérieux. Eh bien, plus maintenant. Vous n'avez qu'à changer le type de l'entrée de « texte » à « e-mail ». Lorsque vous essayez de soumettre ce formulaire avec du charabia, il se plaindra et insistera pour que vous envoyiez un e-mail.

3.2 Types et modèles d'entrée

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

De plus, pour des éléments tels que les numéros de téléphone qui varient en fonction de la localité, vous pouvez spécifier des modèles pour les entrées. Celles-ci sont créées à l'aide de 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 de 'placeholder' avec un exemple d'adresse e-mail.

Nous allons nous assurer que notre champ « Couleur préférée » est requis. Dans le dernier crochet angulaire (>) de la balise d'entrée de courrier électronique, écrivez simplement « requis ». C'est ça. Désormais, lorsque vous essayez de soumettre votre formulaire sans valeur, un message d'erreur s'affiche.

La chose vraiment incroyable à propos de ces messages d'erreur est que l'utilisateur n'a pas à les écrire ou à écrire du 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 le balisage sémantique
  • Docteur HTML5 - Parlons sémantique

3.3 Testez-vous

C'est votre anniversaire la semaine prochaine et vous souhaitez créer un formulaire d'inscription pour 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 e-mail
  • Numéro de téléphone
  • 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 de saisie 'email' et 'tel'. Créez un espace réservé pour le champ d'allergie avec la valeur « pollen, œufs, quiche ».

Jouez avec la forme. 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. Moyenne

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

Ce n'était pas idéal. Premièrement, aucun de ces frameworks ne fonctionnait très bien sur les appareils mobiles. Ils n'étaient tout simplement pas équipés pour le monde moderne des smartphones et des tablettes.

comment faire vos propres serveurs

De plus, il s'agissait de formats propriétaires. En conséquence, les utilisateurs de Linux et d'OS X pouvaient bénéficier d'une expérience assez médiocre ou même ne pouvaient pas utiliser les services multimédias, car ils n'étaient pas disponibles pour leur plate-forme.

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

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

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 à merveille sur les appareils mobiles et fonctionne sur tous les navigateurs Web modernes.

Du coup, de grandes entreprises comme YouTube, Vimeo et Netflix profitent de la révolution HTML5. Pourquoi ne les rejoins-tu pas ?

4.2 Tout sur les codecs

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

Tout d'abord, 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é à l'utilisation de la vidéo MP4. Chrome est un peu plus généreux et 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 balises d'ouverture et de fermeture. C'est ici que vous ferez un lien vers vos fichiers vidéo. Mais d'abord, vous allez vouloir mettre une affiche. Qu'est-ce que ça veut dire?

Eh bien, lorsque vous attendez le chargement de votre vidéo, la personne qui visite votre site peut voir une image en rapport avec la vidéo. Pour ce faire, attribuez simplement à vos balises vidéo un attribut « poster » avec une valeur de l'image vers laquelle vous souhaitez créer un lien. Ça devrait ressembler à ça.

La prochaine chose que nous allons vouloir faire est de créer une solution de secours. Qu'est-ce que ça veut dire? Donc, supposons que vous utilisez l'un des navigateurs les plus anciens et les moins géniaux. 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 jusqu'à ce qu'ils le fassent, 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 ça sur Google Chrome, donc je vais faire un lien vers un film MP4. Pour ce faire, je crée une balise Source et lui donne un attribut src qui a la valeur de la vidéo que je veux inclure.

Ma page est maintenant prête à être ouverte dans mon navigateur Web. J'ai fait un lien avec 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 de son

L'audio peut être inséré dans votre page Web d'une manière qui rappelle beaucoup 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 vers lequel vous souhaitez créer un lien. Vous n'avez pas vraiment à vous soucier de la compatibilité des codecs. La plupart des navigateurs Web récents ont la capacité de lire des fichiers audio MP3, bien qu'il soit recommandé d'inclure également un fichier '.ogg' et un fichier '.wav' - juste au cas où.

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

Le résultat final ressemble un peu à ça.

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 tags vidéo ?
  • Quels codecs ne pouvez-vous pas utiliser dans Internet Explorer ?
  • Si je voulais avoir la possibilité de mettre en pause une partie de l'audio, quel attribut ajouteriez-vous à votre balise « audio » ?

Lectures complémentaires :

5. Transformations et animations CSS3

CSS était traditionnellement utilisé pour gérer la mise en page et la conception d'une page Web. C'est toujours vrai, mais dans sa dernière itération, il a acquis la capacité de gérer des animations et des 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 de Pong complet. Quelqu'un l'a même utilisé pour recréer les crédits d'introduction à Mad Men. C'est une technologie vraiment puissante et lorsqu'elle est maîtrisée, elle peut être utilisée pour ajouter un niveau incroyable de fonctionnalités à votre page Web.

Dans ce chapitre, je vais vous donner une brève introduction à CSS3 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 donné un ID de « muo ».

5.1 Effets de survol CSS

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

Vous devrez ensuite écrire quelques 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 attachez ':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 gouverne l'élément. Plutôt cool, non ?

Dans la règle '#muo:hover', nous avons une ligne qui dit '-webkit-transform: rotate(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 devrez modifier votre fichier CSS pour inclure les lignes suivantes.

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

5.2 Utiliser CSS3 pour redimensionner les images

Alors, pourquoi s'arrêter là ? Saviez-vous que vous pouvez également utiliser la méthode « transformer » 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, nous lui disons de faire quelque chose appelé « scale ». C'est une très belle façon d'augmenter la taille d'une image. Il faut 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 la taille du logo MakeUseOf div de 50%. Vous pouvez tester ce fonctionnement en passant la souris dessus. Vous verrez que maintenant le logo 'MakeUseOf' est maintenant beaucoup plus étiré.

C'était une introduction très douce aux transformations CSS3. Bien que CSS3 soit en effet très nouveau, vous pouvez maintenant voir que vous pouvez faire beaucoup de manipulations très intéressantes avec.

5.3 Testez-vous

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

Lectures complémentaires :

Roches HTML5 - Présentation

6. Juste assez de Javascript

Si vous souhaitez utiliser un script dans votre navigateur Web, vous devez utiliser Javascript . Il n'y a pas deux manières à ce sujet, malheureusement. C'est une langue qui a de nombreux fans, et de nombreux détracteurs aussi. Au fil des langues, 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 en un seul chapitre. Ce n'est pas le but ici. L'objectif est de vous apprendre suffisamment de Javascript pour que vous puissiez comprendre le prochain chapitre, qui concerne l'utilisation d'une technologie appelée Canvas pour faire des dessins et des animations.

6.1 Accéder à 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 qu'un développeur en herbe écrive soit le programme 'Hello World'. Il s'agit d'un programme simple qui affiche la phrase 'Hello World', 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'. Il s'agit d'un bout de code intégré à l'ordinateur qui imprime simplement ce que vous lui dites. Nous y avons ensuite attaché quelques parenthèses et inclus les guillemets 'Hello World'. C'est ce qu'on appelle 'passer des arguments', et le type d'argument que nous avons passé s'appelle 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 nombres, 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. Je vais donc créer une variable appelée « hello », puis lui donner la valeur « Hello World ! » Je vais ensuite passer cela à console.log.

Notez que je n'ai pas passé 'hello' à console.log en utilisant des guillemets. C'est parce que je voulais imprimer sur la console le contenu de 'hello' et non 'hello' lui-même.

6.4 À quoi servent les fonctions

Il peut être un peu fastidieux de réécrire le même morceau de code encore et encore, c'est donc pour cette raison que 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 à nouveau le même code. Ci-dessous, nous avons créé une fonction appelée « sup » et lui transmettons un argument à l'aide de parenthèses qui est ensuite enregistré à l'écran. Nous appelons 'sup' en envoyant à la console 'sup('Hello world!');'.

6.5 Répéter une action avec une boucle 'For'

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

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

On veut alors vérifier que i n'a pas rempli une condition. Donc, dans ce cas, nous voulons voir qu'il est inférieur à 10. Donc, après le point-virgule, nous écrivons 'i<10'. Our loop now looks like this: 'for(var i = 0; i < 10;).

Si i est inférieur à 10, nous voulons l'ajouter par un, puis faire quelque chose. Donc, on met 'i = i + 1'. Notre boucle est presque terminée : 'for(var i = 0; i<10; i = i + 1)'. Note how the last part does not have a semicolon.

Après cela, nous allons vouloir faire une action. Donc, après les dernières parenthèses, nous écrivons des 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 Énoncés Si

Une instruction 'if' effectue une action si un certain critère est rempli. Elles sont similaires aux boucles « for » en construction et fonctionnent comme suit. Supposons que vous ayez une variable appelée « cheeseburgers » et que vous vouliez voir si elle a la valeur « savoureux ». Si c'est le cas, vous souhaitez enregistrer « miam, cheeseburgers » à l'écran. Pour ce faire, vous écririez quelque chose comme ceci.

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

6.7 Boucles While

Enfin, une boucle « while » exécute une action tant qu'un critère est rempli. Alors, imaginez que vous vouliez enregistrer « miam, cheeseburgers » alors que les cheeseburgers sont aussi savoureux. Pour ce faire, vous écririez ce qui suit.

Il convient de noter que cela entrerait dans une boucle infinie et que vous devriez éviter d'effectuer une action sur une valeur qui n'est pas susceptible de changer. Cela peut entraîner le blocage de votre navigateur ou le dysfonctionnement de votre code.

Comme je l'ai mentionné précédemment, il s'agissait d'une très brève introduction à la programmation de constructions en Javascript. Nous vous encourageons à en savoir plus sur ce sujet fascinant, quoique énorme.

6.8 Testez-vous

  • Je veux compter à rebours à partir de 30. Écrivez une boucle 'for' qui ferait cela.
  • Je veux créer une variable appelée 'makeuseof' et lui donner la valeur 'awesome'. Comment ça se fait ?
  • Je souhaite créer une fonction qui affiche 'MakeUseOf Is Awesome' lorsqu'elle est appelée. Écrivez cette fonction.

Lectures complémentaires :

7. Toile créative

Canvas est une technologie intéressante qui vous permet de dessiner des images et de créer des animations sans avoir recours à Flash ou Silverlight. Les gens l'ont utilisé pour créer des choses étranges et merveilleuses, y compris un simulateur de sèche-cheveux et divers jeux vidéo. C'est une technologie merveilleuse et d'une taille 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. Il s'agit de la largeur et de la hauteur de l'élément Canvas, ainsi que de l'ID que vous lui donnez. Comme avant lorsque vous insérez une vidéo, vous devez inclure un message de secours.

Maintenant, nous allons vouloir écrire du code Javascript qui dessinera quelque chose à l'écran. Nous allons commencer de manière basique 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 'context', puis appelle 'demo.getContext('2d')' dessus. Cela a indiqué au navigateur que nous travaillerions sur une image 2D, puis a transmis les fonctions nécessaires dont nous aurions besoin pour dessiner à l'écran.

Les troisième et quatrième lignes sont celles qui dessinent réellement à 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 pourtant pas impressionnant. 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 la longueur de notre toile.

Les deux premiers arguments définissent où nous souhaitons positionner les axes x et y de la forme. Mettons ces deux à '0' pour l'instant. Le troisième argument fait référence à la largeur de la forme. Fixons-le à « 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 qu'il recouvre notre carré rouge. Donc, comme avant, nous allons vouloir lui donner un fillStyle de 'blue'. Maintenant, nous allons sélectionner les caractéristiques de notre texte. Nous voulons qu'il fasse 20px de large, qu'il soit au format gras et qu'il utilise une police Arial. Nous appelons font sur 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 la toile

Bien qu'il s'agisse d'une introduction incroyablement basique à Canvas, vous devez comprendre qu'il s'agit également d'une technologie incroyablement importante et incroyablement puissante pour démarrer. Ce guide a simplement servi d'introduction à la réalisation de graphiques à l'aide de cette nouvelle technologie.

qu'est-il arrivé à mon icône de batterie windows 10

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 'for' qui s'exécute pendant dix itérations. Voyez si vous pouvez déplacer votre dessin vers le bas de 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 :

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 des choses incroyables avec tout le temps, et je n'ai aucun doute qu'à l'avenir, vous serez l'une de ces personnes. Je suis honoré d'avoir fait partie de votre voyage dans le monde sauvage et merveilleux du 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 présentées dans ce petit guide pour créer de merveilleux produits.

Partager Partager Tweeter E-mail Cela vaut-il la peine de passer à Windows 11 ?

Windows a été repensé. Mais est-ce suffisant pour vous convaincre de passer de Windows 10 à Windows 11 ?

Lire la suite Rubriques connexes
  • Wordpress & Développement Web
  • HTML5
  • Forme longue
  • Guide détaillé
A propos de l'auteur Matthieu Hugues(386 articles publiés)

Matthew Hughes est un développeur et écrivain de logiciels de Liverpool, en Angleterre. Il est rarement trouvé sans une tasse de café noir fort à la main et adore absolument son Macbook Pro et son appareil photo. Vous pouvez lire son blog sur http://www.matthewhughes.co.uk et le suivre sur Twitter à @matthewhughes.

Plus de Matthew Hughes

Abonnez-vous à notre newsletter

Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !

Cliquez ici pour vous abonner