chatpro: Ce qu’il faut savoir pour débuter en HTML5

HTML5, aujourd’hui tout le monde en parle, tout d’abord pour ceux qui ne savent pas, l’HTML pour HyperText Markup Language, n’est pas un langage de programmation, mais un langage de balisage.

Steve Jobs a dit pour Apple:

« Apple ne supporte pas Flash parce qu’il est trop bogué. Chaque fois qu’un Mac plante, le plus souvent c’est à cause de Flash. Personne n’utilisera plus Flash. Le Monde est en train de se tourner vers HTML 5. »
(Apple Town Hall Meeting, fin Janvier 2010).

HTML5 c’est quoi ?

HTML5 est Une évolution de l’HTML 4.01 (et de l’XHTML 1.0).C’est à dire que tout ce que vous savez faire en HTML reste valide.
HTML5 intègre des formats auparavant séparés: Web Forms, DOM, XHTML et ajoute des balises multimedia: canvas, audio, video..
HTML5 est implémenté progressivement par tous les navigateurs.
HTML5 est le fruit des travaux du W3C et du WHATWG

Le W3C et le WHATWG ?

Le World Wide Web Consortium, abrégé par le sigle W3C, est un organisme qui s’occupe de standardiser le web à but non-lucratif, fondé en octobre 1994. Elle est constituée d’un ensemble de membres actifs qui réfléchissent à l’évolution des standards tels que l’HTML et le CSS.

Le Web Hypertext Application Technology Working Group (ou WHATWG) est une collaboration non officielle des différents développeurs de navigateurs web ayant pour but le développement de nouvelles technologies destinées à faciliter l’écriture et le déploiement d’applications à travers le Web.

Les nouveautés dans HTML5

Un code plus légers

Grâce a html5 , certaines balises ont été modifié et simplifiées afin d’alléger le code d’une application web.

Exemple : Un nouveau Doctype

Doctype, la première ligne d’une page web qui indique la méthode de rendu standard au navigateur en de la balise <html>, de la balise <meta> de l’encodage des caractères, et des balises de feuilles de style et de script.

Alors qu’auparavant on avait ce genre de code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<link rel="stylesheet" type="text/css" href="design.css" />

<script type=”text/javascript” src=script.js"></script>

</head>

<body>

</body>

</html>

En HTML5, On a

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="utf-8" />

<link rel="stylesheet" href="design.css" />

<script src="script.js"></script>

</head>

C’est plus sympa n’est ce pas

icon smile Ce quil faut savoir pour débuter en HTML5

, De manière générale, on peut dire que l’HTML5 est beaucoup plus léger e sur l’écriture du code HTML.

Il est à noter que Doctype peut être en majuscules ou minuscule ou une combinaison des deux c’est-à-dire que la déclaration du Doctype n’est pas sensible à la casse.

Les nouvelles balises sémantiques

L’HTML5 introduit également un ensemble de nouvelles balises afin de donner plus de sens à nos pages web.
Je ne vais pas détailler toutes les nouvelles balises, mais uniquement celles qui présentent un grand intérêt et qui sont à peu près facilement compréhensible.Par exemple, avant on utilisait une <div> avec un id=”header” pour représenté l’entête d’une page web mais avec html5 nous pouvons utiliser tout simplement la balise <header>. Parmi d’autres balises sémantiques on trouve :

<article> représente un texte provenant d’une source externe, comme par exemple un article de journal, de blog ou de forum.

<header >: spécifie une introduction, ou un groupe d’éléments de navigation pour le document.

<footer> : définit le pied de page d’un article ou un document. Contient généralement le nom de l’auteur, la date du document a été écrit et / ou ses coordonnées.

<nav> Typiquement, dans cette balise on va trouver des liens(menu) qui permettent d’accéder soit à d’autres pages du site, soit à différents contenus de la page.

<nav>

<h1>Navigation</h1>

<ul>

<li><a href="/Accuei/">Accueil</a></li>

<li><a href="/actualites/">Actualités</a></li>

</ul>

</nav>

Ces noms n’ont pas été choisis au hasard. Google a fourni au W3C les chiffres de la fréquence d’utilisation de tous les id utilisés sur les sites indexés par le moteur de recherche, et ceux-ci font partie de ceux qui sont les plus employés.
Voyons maintenant quelles sont les 3 nouvelles balises super-stars.

Les balises multimédia

<video>

Cette balise permet d’insérer du contenu multimédia facilement dans la page, avec des boutons Lecture, Pause, une barre de progression, du volume… c’est une grande avancée. Ça évite d’avoir à utiliser un plugin (Flash, Java, Quicktime, etc.)

html5 video lecteur copie Ce quil faut savoir pour débuter en HTML5

<audio>

Pour insérer un fichier audio dans une page HTML5, il suffit d’insérer les lignes suivantes dans une page HTML5

<audio src="nomdufichier.mp3">
</audio>

Simple non ?

Il existe encore un ensemble de d’options permettant d’ajouter quelques fonctionnalités .

Nous pouvons voir sur l’image ci-dessous que chaque navigateur utilise un design qui lui est propre pour styliser son lecteur. Dans tous les cas il vous est possible de créer votre propre design si vous préférez un rendu uniforme quel que soit le navigateur utilisé.

audio Ce quil faut savoir pour débuter en HTML5

<canvas>

Il permet de dessiner du bitmap en Javascript. C’est en quelque sorte la super-star du HTML5. Grâce à son API 2D couplé avec le standard WebGL de rendu graphique 3D, on obtient des résultats impressionnants au sein même du navigateur. C’est dans cette zone que sont réalisées des animations ou des jeux.

UNSET Ce quil faut savoir pour débuter en HTML5

Des formulaires encore plus beaux

HTML5 définit plus d’une douzaine de nouveaux types d’entrée que vous pouvez utiliser dans vos formulaires.

<ol style="text-align: justify;">
	<li> <input type="search"> pour les boîtes de recherche</li>
	<li><input type="number"> pour les spinbox</li>
	<li><input type="range"> pour les curseurs</li>
	<li> <input type="color"> des nuanciers</li>
	<li><input type="tel"> des numéros de téléphone</li>
	<li><input type="url"> pour les adresses Web</li>
	<li><input type="email"> pour les adresses e-mail</li>
	<li><input type="month"> pendant des mois</li>
	<li> <input type="week"> pendant des semaines</li>
	<li><input type="time"> pour les horodateurs</li>
</ol>

Ces nouvelles valeurs permettent notamment, pour des navigateurs web de vérifier les données entrées avant leur envoi au serveur, mais également c’est très important pour la navigation depuis un smartphone, qui affichera un clavier adapté selon le type de contenu.
Par exemple, pour le champ input suivant :

<input type="tel"/>

On aura le clavier suivant sur un iPhone
iphone Ce quil faut savoir pour débuter en HTML5

Pour le champ suivant :

<input type="url"/>

Un iPhone affichera ce clavier adapté aux URLs :
clavier Ce quil faut savoir pour débuter en HTML5

Application web hors connexion

Utiliser les applications Web hors ligne est la tendance majeure dans ce domaine depuis 2008.
La partie la plus intéressante d’HTML5 réside définitivement dans ses possibilités de stockage hors ligne . Il est possible d’utiliser un site web en mode hors connexion si celui-ci à accepté de stocker des donnés sur son ordinateur via le bandeau s’affichant en haut de page :

La géolocalisation

La g%C3%A9olocalisation Ce quil faut savoir pour débuter en HTML5

La géolocalisation est l’art de déterminer où vous êtes dans le monde et (éventuellement) partager cette information avec des personnes de confiance.
Il est possible grâce à l’API de géolocalisation d’accéder aux coordonnées de l’utilisateur si celui-ci a accepté de partager sa position .
Voici un code minimaliste pour utiliser cette API

<!DOCTYPE html>
<html>
<head>
<title>api geolocalisation "Ma Position"</title>
<script type="text/javascript">
function getPosition(position)
{
var infoposition = "Latitude: "+position.coords.latitude+"<br />";
infoposition += "Longitude: "+position.coords.longitude+"<br />";
infoposition += "Altitude: "+position.coords.altitude+"<br />";

document.getElementById("myposition").innerHTML = infoposition;
}

function myPosition()
{
navigator.geolocation.getCurrentPosition(getPosition);
}
</script>
</head>
<body>
<a href="#" onClick="myPosition()">Afficher ma position</a>
<div id="myposition"></div>
</body>
</html>

Résultat:
Latitude: 37.41857
Longitude: -122.08769
Altitude: 42

Problèmes de sécurité avec HTML 5

SeguridadWeb Ce quil faut savoir pour débuter en HTML5

Les nouvelles capacités offertes par HTML 5 sont malheureusement autant d’opportunités offertes aux logiciels malveillants pour s’infiltrer dans la vie des internautes.
Les éditeurs de navigateurs en sont conscient et font le maximum pour en tenir compte dans le développement. Parmi les vulnérabilités du HTML5 il y a :

Le mode hors connexion

Un pirate peut accéder au contenu des variables de stockage local, a non seulement accès aux données personnelles, mais il peut y injecter ses propres données. La mise en cache d’une application sur le poste utilisateur fait qu’il est plus facile de l’infecter, elle devient un cheval de Troie derrière la firewall de l’ordinateur.

Géolocalisation

L’espion peut savoir où vous vous trouvez à n’importe quel moment. Pour un cambrioleur, cela permet de savoir si vous êtes loin de chez vous.

JavaScript

Il devient de plus en plus présent grâce aux capacités d’application Web que fournit HTML 5. Les utilisateurs ne pourront plus le désactiver, aussi devrait-il sécuriser.

En conclusion…

ms ressources humaines Ce quil faut savoir pour débuter en HTML5

Alors pour conclure j’aimerais vous dire que vous pouvez utiliser l’HTML5 dès maintenant ! Et j’en rajoute une couche : on peut vraiment l’utiliser aujourd’hui ! (Une gallery des sites HTML5)

l’HTML5 ce n’est pas le futur, c’est le présent, alors utilisez HTML5 allez-y, qu’est-ce que vous attendez ? Sans vous HTML5 n’existerait pas ou n’existera pas.

Déjà des sites comme Youtube, Google, Apple, ou Gmail l’utilise sur leurs projet, vous pouvez regardez simplement le code source de ces sites ! L’HTML5 arrive doucement mais sûrement. Donc il faut commencer à se former le plus tôt possible, pour avoir une longueur d’avance.

Et pour vous aidez voici un document très pratique à télécharger , qui répertorie toutes les balises HTML5, leur description et leurs attributs. Publié dans Smashing Magazine.

A bientôt mes amis(e) !

chatpro

dimanche 13 janvier 2013

Ce qu’il faut savoir pour débuter en HTML5