Premiers pas avec HTML5 / CSS3: conseils, vitrines et exemples de codage

HTML5 gagne en popularité et commence à faire évoluer l’ensemble de l’interface Web. Même certains développeurs Web ont indiqué que les éléments HTM5 et les effets visuels sont comparables à Flash. Le nouveau style de script est facile à comprendre et les capacités d’amélioration de l’interface Web sont illimitées. Alors, à quel point ce HTML5 est-il intéressant?


Cet article est destiné à donner aux lecteurs un aperçu de ce que vous devez savoir sur le HTML5 et surtout quelques conseils & astuces pour créer des pages HTML5 légères, attrayantes et interactives.

1. Basique en HTML5

HTML5

Avant de poursuivre sur ce sujet en HTML5, il sera bon de vérifier d’abord votre navigateur actuel. Comme de nombreux navigateurs sont encore en mode développement (amélioration pour accueillir le HTML5), certaines fonctionnalités mentionnées ici peuvent ne pas être prises en charge.

Voici quelques conseils pour vérifier votre compatibilité du navigateur.

Pour mieux comprendre la limitation d’un certain navigateur, vous pouvez vous référer à ici.

2. Effets de texte – Ajout d’un effet d’ombre et de texte avancé en HTML5

Effets de texte en HTML5

Effet d’ombre de base sur le texte

Il s’agit du code de chaîne le plus simple qui transforme votre titre ordinaire en un texte cool. Ne sous-estimez jamais l’effet d’ombre. Pour créer cet effet similaire, le concepteur Web doit passer par plusieurs étapes d’édition d’image dans Photoshop. Et maintenant, il suffit d’une seule ligne de code. La distance de l’ombre, la couleur peut être changée selon le contenu de votre cœur.

Échantillon de codage

#shadow h1 {
text-shadow: 0px 1px 1px rgba (0,0,0, .2);
}

Texte sur l’effet de feu avancé

La prochaine astuce consiste à vous montrer comment le codage HTML5 peut être modifié en un texte encore plus cool. Si vous expérimentez suffisamment ou trouvez d’autres exemples, les possibilités de personnalisation des effets sont infinies. Remarque: cet exemple n’est créé par aucun logiciel de retouche d’image. Juste des codes simples en HTML5.

Échantillon de codage

#fire h1 {
alignement du texte: centre;
marge: 200px auto;
famille de polices: "Ligue-Gothique", Courrier;
taille de police: 200px; transformation de texte: majuscule;
couleur: #fff;
text-shadow: 0 0 20px # fefcc9, 10px -10px 30px # feec85, -20px -20px 40px # ffae34, 20px -40px 50px # ec760c, -20px -60px 60px # cd4606, 0 -80px 70px # 973716, 10px-10px 80px # 451b0e;
}

Autre excellent exemple: http://mudcu.be/labs/HTML5Rocks/Text-Effects.html#spaceage

3. Coin arrondi en HTML5

Coin arrondi en HTML5

Styliser la mise en page Web en HTML5 n’a jamais été aussi facile depuis l’introduction de CSS. Et maintenant, vous pouvez même avoir des coins arrondis de vos éléments de mise en page! Imagine ça; plus d’image de fond en tranches, plus de fragments d’image en désordre. Cela encouragera les concepteurs de sites Web.

Échantillon de codage

div {
bordure: 2px solide # 434343;
rembourrage: 10px;
fond: # e3e3e3;
-rayon-frontière-moz: 10px;
-webkit-border-radius: 10 pixels;
largeur: 500 px;
}

Remarque: Moz signifie Mozilla, et webkit est pour Safari et Chrome.

Autre excellent exemple: http://fjd1.com/roundcorner.html

4. Graphique vectoriel évolutif (SVG) en HTML5

Tutoriels HTML 5, guide et exemples

Le graphique vectoriel évolutif ou communément appelé (SVG) est un graphique vectoriel à 2 dimensions défini dans des fichiers texte XML. En d’autres termes, parce que leur ADN est basé sur un fichier texte XML, ils peuvent être créés ou modifiables sur la plate-forme Web. Ce qui signifie également qu’il peut être facilement évolutif et que les moteurs de recherche sont capables de lire et de comprendre l’image.

Exemple de code

Autres bons exemples:

5. Incorporation d’un fichier vidéo dans HTML5

Vidéo en HTML5

Voici une autre partie intéressante pour présenter les capacités de HTML5. La plupart des vidéos en ligne sont généralement présentées à l’utilisateur Web sous forme de Flash. Jusqu’à récemment, l’intégration de vidéos en HTML5 gagnait lentement du terrain (YouTube en est un bon exemple) et Flash perd lentement de son attractivité. Pourquoi est-ce si? Utilisateurs mobiles. Si vous souhaitez que votre vidéo puisse être lue sur les téléphones iPhone et Android, HTML5 est le moyen d’aller de l’avant.

Pour intégrer la vidéo, vous aurez besoin de connaître actuellement 3 formats pris en charge par différents navigateurs; .mp4 (H.264 + AAC), .ogg (Theora + Vorbis), .webm (VP8 + Vorbis)

Exemple de code

Autre excellent exemple: https://www.html5rocks.com/en/tutorials/video/basics/

6. Présentation de diapositives en HTML5

Tutoriels HTML 5, guide et exemples

Powerpoint est un synonyme associé à la présentation de diapositives. Mais pourquoi vous limiter à une présentation hors ligne où vous pouvez créer des diapositives destinées au public Web? HTML5 est venu à la rescousse en créant des diapositives de présentation beaucoup plus puissantes, avec menu de transition et de navigation. La meilleure partie est que vous pouvez même appliquer une transformation 3D à votre présentation.

Exemple de code

pré {
transition: tous les 1 facilitent l’entrée;
}

pre: hover {
couleur de fond: # F2F5FE;
couleur de la bordure: noir;
}

div {
transform: rotation3d (1,1,0, 45deg);
}

Autres bons exemples:

7. Contenu modifiable en HTML5

Tutoriels HTML 5, guide et exemples

Le texte statique est tellement old-school à l’époque où la flexibilité et la dynamique dominent le monde. En HTML5, vous pouvez définir une zone de texte rendue modifiable par l’internaute sans éditeur de texte.

Exemple de code

Ce contenu est modifiable!

Autre excellent exemple: http://html5demos.com/contenteditable

8. Web Canvas interactif en HTML5

Tutoriels HTML 5, guide et exemples

Outre SVG en HTML5, le canvas est la meilleure chose qui soit arrivée sur le Web. Canvas permet le rendu de formes à 2 dimensions qui apportent l’interactivité à un niveau entier sans l’aide de Flash.

Néanmoins, le codage simple en HTML5 qui crée une interaction d’animation incroyable mérite d’être mentionné ici.

Autre excellent exemple: http://www.bestfreewebresources.com/2010/09/10-best-html5-canvas-applications.html

9. Glissez et déposez en HTML5

Tutoriels HTML 5, guide et exemples

Le glisser-déposer (parfois appelé DnD) est une autre fonctionnalité intéressante disponible pour HTML5. Un bon exemple serait la mise en œuvre par Google dans leur Gmail. Si vous utilisez l’un des navigateurs compatibles HTML5, vous pouvez simplement faire glisser un fichier depuis votre ordinateur et le déposer dans la fenêtre de rédaction de message. Il sera automatiquement ajouté en tant que pièce jointe. À quel point cela est cool?

Exemple de code (DnD natif)

document.addEventListener (‘dragstart’, fonction (événement) {
event.dataTransfer.setData (‘texte’, ‘Texte personnalisé’);
event.dataTransfer.effectAllowed = ‘copier’;
}, faux);

Autre excellent exemple: http://www.html5rocks.com/en/tutorials/dnd/basics/

10. Graphique de données CSS pur en HTML5

Tutoriels HTML 5, guide et exemples

Avant HTML5, il est également impossible de créer un graphique présentable en utilisant simplement le codage en HTML. De plus, changer la valeur des données et les refléter dans le graphique n’est pas une tâche simple. Encore une fois, HTML5 à la rescousse. Avec CSS, vous pouvez créer un graphique absolument magnifique qui fait honte à Microsoft Excel. Les codes sont simples, et tout ce que vous avez à faire est de passer du temps à personnaliser la couleur et l’effet parfaits pour votre graphique.

Autre excellent exemple: http://cssglobe.com/pure-css-data-chart/

Impossible d’obtenir suffisamment de HTML 5?

Nous aussi! Voici plus sur le sujet, allez les voir.

* 30 exemples très sympas de sites Web HTML 5
* Premiers pas avec HTML 5
* Doit lire les didacticiels HTML 5 en 2012
* Apprendre HTML 5: 10 leçons à lire absolument

Consultez également  ce cours intensif HTML 5 par Robin Nixon. Robin Nixon est l’auteur de Learning PHP, MySQL et JavaScript; le cours couvre à peu près tout ce qu’un débutant doit savoir en HTML5 – y compris le codage HTML de base, le canevas HTML5 pour le dessin, la géolocalisation, le stockage local, ainsi que l’audio et la vidéo HTML5.

L’article original est d’abord publié sur Blog WHSR; il est désormais géré et mis à jour par le personnel de BuildThis.io.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map