-
1Lire la suite de tutoriel html5 History
Théorie
La méthode pushState() :
La méthode pushState ajoute une entrée dans l’historique de votre navigateur.
pushState prend trois paramètres : stateObj, title et url
- stateObj : Un objet javascript qui sera associé à la nouvelle entrée dans l’historique. Il peut contenir n’importe quelle donnée qui peut être sérialisée.
- title : Un paramètre pour l’instant ignoré par firefox. Il est pour l’instant préférable de mettre une chaine vide, pour éviter tous conflits futur. Vous pouvez cependant y stocker un titre court de l’état vers lequel vous allez.
- url : Stocke l’url vers laquelle vous allez. Elle ne sera appelée que lorsque l’internaute fera appel à cette entrée. L’url peut être en relative.
L’évenement onpopstate()
Un évènement popstate est envoyé chaque fois qu’il y a un changement dans l’historique actif.
La méthode replaceState()
Cette méthode fonctionne exactement comme la méthode pushState. Simplement, au lieu de créer une nouvelle entrée dans la pile de l’historique, elle modifie l’entrée actuelle.
Pratique
Imaginons un exemple simple. Une page d’accueil, et trois pages satellite.
Nous avons donc :
- index.php
- page1.html
- page2.html
- page3.html
On veux charger le contenu des pages en ajax. On veut que lorsqu’un nouveau contenu est chargé, il soit ajouté au dessus de la pile de l’historique. On veut pouvoir consulter les différentes pages depuis n’importe quelle « referer ».
Coté javascript, on arrive à ça :
$(document).ready(function(){
$('#principal a').click(function() {
//On met l'élément courant dans une variable, pour améliorer les performances
var $t = $(this);
//On appelle la fonction qui fera la requete en ajax, et gérera la pile de l'historique
load_content($t.attr('title'),$t.attr('href'));
//On ne suit pas le lien
return false;
});
});
function load_content(title,url,skipHistory) {
$.get(url,function (data) {
//On met à jour le itre de la page
document.title = title;
//On défini l'objet d'état
var stateObj = {
title: title,
url: url
};
//Si la variable skipHistory est à false, on lance la méthode pushstate
if (!skipHistory) {
//On vérifie que la fonction pushState est bien définie
if (typeof window.history.pushState == 'function') {
window.history.pushState(stateObj,title,url);
}
}
//On charge le contenu
$('#contenu').html(data);
});
}
//On détecte les événement sur la pile de l'historique
window.onpopstate = function(event) {
//Si event.state est définie (c'est à dire que la page précédente fait partie de l'historique courant), on charge le contenu
if (event.state) {
load_content(event.state.title, window.location.pathname, true);
} else {
//Si event.state n'est pas définie, on créer un nouvel objet d'état
var stateObj = {
title: document.title,
url: window.location.pathname
};
//On modifie l'entrée actuelle
window.history.replaceState(stateObj,document.title,window.location.pathname);
}
}J’ai essayé de documenter au mieux le code. Vous devriez pouvoir comprendre sans trop de difficulté.
Ensuite, avec un peu de php, on peut facilement savoir si on charge la page en ajax ou non, graçe à la variable $_SERVER[’HTTP_X_REQUESTED_WITH’]
if (isset($_SERVER['HTTP_X_REQUESTED_WITH']) && $_SERVER['HTTP_X_REQUESTED_WITH']=="XMLHttpRequest") {
//Si on est en Ajax
}else{
//Si on n'est pas en Ajax
}Ce qui nous permet de charger l’entête et le pied de page, uniquement quand on n’est pas en ajax.
Bien sur, cette api ne fonctionne que pour les navigateurs interprétant le html5. Donc à priori, exit IE et compagnie. Il existe cependant une solution. Un plugin JQuery a été développé dans le but de rendre cette api compatible avec tous (ou presque) les navigateurs. Vous le trouverez là : http://plugins.jquery.com/project/history-js.
Démo :
Télécharger la démo :
-
- démo html5 History
26
Oct -
1Lire la suite de Formulaire html5
Ahhh, les formulaires... ... Entre la mise en forme et le contrôle des données saisies, ça n’a jamais été l’élément (x)html le plus simple à mettre en place. Il en faut des lignes de script pour contrôler les données saisies par l’internaute. Du simple numéro de téléphone, à l’email on arrive à de jolies expressions régulières ! Que du bonheur ! Et c’est toujours amusant de bien intégrer un message pour avertir l’internaute qu’il a saisit la ville dans le champ code postal.
Rassurez-vous, html5 va permettre de se simplifier un peu la vie. Avec les versions actuelles d’(x)html, le nombre de balise différentes est (très) limité. Un input peut être de type texte, file ou password. Avec la balise textarea, on a la famille au complet(ou presque, mais ce n’est pas ce qui nous intéresse ici).
Les formulaires html5 permettent d’être un peu plus précis. Ci-dessous, les différents types de balise input disponibles :
- tel
- url
- date
- number
- range
- color
- search
Formulaire html5 : email, tel et url
Pour les types email, tel et url html5 propose des expressions régulières natives, vous évitant ainsi de surcharger vos pages de script de contrôle. Pour les développeurs qui ne veulent pas se contenter de cette solution, il est possible d’insérer sa propre exression régulière avec l’attribut pattern. Exemple :
<input type="text" pattern="votre expression régulière" />Et comme ils sont généreux, ils proposent également pour les mobiles, des claviers virtuels adaptés. Par exemple un clavier numérique pour les numéros de téléphone, un clavier avec l’@ pour les email, etc.
Formulaire html5 : date
Le type date est là pour simplifier la saisie de date. Pour l’instant le navigateur Opéra est le plus en avance sur le sujet, et propose un calendrier complet. Il existe plusieurs déclinaisons possible pour ce type :
- month : pour le mois
- week : pour la semaine
- time : pour l’heure uniquement
- date pour la date uniquement
- datetime-local : pour le jour et j’heure, sans décalage horaire
- datetime : pour le jour et l’heure avec le décalage horaire
Formulaire html5 : number et range
Il est à présent possible d’utiliser un slider, ou les deux petits boutons intégrer au champ pour modifier sa valeur. On peut spécifier pour ces deux champs, un valeur minimale, une maximale, un pas et une valeur de départ.
Formulaire html5 : Color
On peut avoir différents nuancier. Par défaut la valeur est #000000. Pour l’instant, le nuancier apparait seulement sur Opéra.
Formulaire html5 : search
Les inputs de type search auront un style bien à eux. En fonction des différents navigateurs et système d’exploitation, ils n’auront pas la même allure. Une petite croix permettant d’effacer la recherche. Les logiciels d’assistance proposent des raccourcis pour accéder directement au champ de recherche.
Formulaire html5 : Suggestion
Vous allez pouvoir maintenant suggérer à vos utilisateur une liste de mot. A chemin entre la liste déroulante et le champ texte classique, le nouvel élément datalist permet d’augmenter le confort utilisateur. On bénéficie également de l’autocomplétion.
Formulaire html5 - Validation des données
Deux attributs invalid et required vous permettrons d’informer l’utilisateur de l’invalidité ou d’indiquer que le champ est requis. Chaque navigation affichera différemment ces messages. Vous pouvez cependant créer vos propres styles avec les pseudos class :invalid et :required
On peut toutefois désactiver cette validation native, en ajoutant l’attribut novalidate à la balise form.
Formulaire html5 : Nouveaux attributs
pattern : Cet attribut permet d’appliquer une expression régulière à un champ donner. La validation se fait automatiquement quand l’utilisateur modifie le contenu du champ.
autofocus : Permet de donner le focus à un élément de formulaire au chargement de la page. Un bon exemple d’utilisation serait de mettre l’autofocus sur le champ login d’une page d’identification.
placeholder : La valeur de placeholder est le texte qui s’affiche dans le champ quand celui ci n’est pas sélectionné.
Si l’internaute utilise un "vieux" navigateur, les différents types de champ s’afficheront comme des champs texte standard. Si vous voulez offrir à ces internautes une expérience utilisateur, il est possible, grâce à javascript de détecter le support (ou le non-support) de certain attribut, et le cas échéant, de charger des fonctions de remplacement.
Vous trouverez une "Démo" de la mise en place d’un formulaire avec html5. C’est du html5 brut, sans aucun css. C’est donc pas très joli, mais cela permet d’observer le comportement/affichage naturel de chaque élément.
Cet article n’est pas exhaustif, alors si vous avez une remarque à faire, une correction ou un avis à proposer, n’hésitez pas à laisser un commentaire !
30
Aout -
0Lire la suite de html5 History : Introduction
Qu’est ce que « html5 History api »
html5 History api est une api javascript permettant de contrôler l’historique de navigation. Pour prendre un exemple simple, prenons un diaporama photo, avec des boutons suivants et précédents. Si l’internaute clique sur le bouton suivant, le diaporama va changer d’image. S’il clique ensuite sur le bouton précédent de son navigateur, c’est la page précédente qui va être chargée, et non l’image précédente du diaporama. Ceci s’explique facilement, puisque les boutons de navigation du diaporama, ne modifient pas l’historique de navigation.
Grâce à l’api history, on peut modifier l’historique de navigation. Et pour reprendre l’exemple ci-dessus, on peut maintenant ajouter au dessus de la pile de l’historique, la dernière image vue dans notre diaporama. On retrouvera donc bien l’image précédente en cliquant sur le bouton précédent du navigateur.L’api history permet aussi de modifier l’url, sans avoir à recharger la page. L’internaute possède un moyen supplémentaire de savoir à quel endroit il se trouve. On peut maintenant générer des urls uniques et cohérentes avec des contenus chargés en AJAX. Mais attention cependant, au rafraichissement de la page. Il faut prévoir dans la conception de vos sites/applications que les urls générées renvoient bien la page voulue, et non une erreur 404 ou autre.
Dans beaucoup de sites/applications utilisant l’AJAX, on note une incohérence quasi systématique entre les urls et le contenu chargé en asynchrone. Un des objectifs de cette api est d’essayer de rétablir cette cohérence.
Comme le montre le tableau ci-dessous, cette api est loin d’être supportée par beaucoup de navigateurs.
Un script javascript a été développé pour rendre html5 history compatible avec un maximum de navigateur : history.js
Voilà pour la théorie, j’essaie de vous faire un autre article sur la mise en pratique d’html5 hsitory dans 2/3 jours.
Pour patienter, voici un peu de lecture sur le sujet :
22
Aout -
Lire la suite de html5media Player audio et vidéo crossBrowser
html5media est une librairie javascript permettant de lire de l’audio et de la vidéo dans n’importe quel navigateur, grâce aux balises
Intégrer de un player audio ou vidéo n’aura jamais été aussi simple. Cette librairie est compatible avec tous les navigateurs (Je fais confiance aux infos trouvé sur le site, j’ai pas testé tous les navigateurs). Pour les vieux navigateurs, le script appel un player en flash FlowPlayer.
Un simple appel au fichier contenant le script, et vous pourrez vous servir librement des balises
html5media, player vidéo
Rien de plus simple pour intégrer une vidéo :
<video src="video.mp4" width="320" height="200" controls preload></video>Dans les options proposés, on retrouve la possibilité d’afficher une image pendant le chargement de la vidéo, histoire que l’internaute est quand même quelque chose à regarder en attendant le chargement.
On peut aussi adapter facilement le player pour une utilisation sur mobile, grâce au code ci-dessous :
<video width="618" height="347" controls preload>
<source src="video.mp4" media="only screen and (min-device-width: 960px)"></source>
<source src="video.iphone.mp4" media="only screen and (max-device-width: 960px)"></source>
</video>html5media, player audio
L’utilisation du player audio, est aussi simple que celui de la vidéo. Intrégrez le code suivant :
<audio src="audio.mp3" controls preload></audio>Certains navigateurs ne savent pas lire les mp3, on peut donc leur proposer un format opensource de la manière suivante :
<audio controls preload>
<source src="audio.mp3"></source>
<source src="audio.ogg"></source>
</audio>source : http://html5media.info/
18
Aout -
4Lire la suite de Captcha avec HTML5 Canvas et JQuery
Un magnifique captcha en html5 où il faut reproduire à la souris, l’ombre déssinée :
Avec un système d’amélioration progressive, ce script appelle un captcha basique en php si le navigateur ne supporte pas javascipt et html5. A noter quand même, que pour l’instant ce plugin n’est pas vraiment adpaté pour IE. Mais l’auteur assure que ce sera le cas dans les prochaines versions. Wait & See
Niveau installation/configuration, Il vous faudra modifier un peu votre formulaire. Virer le contenu de la balise "action" pour le mettre dans un input caché, en veillant bien à lui mettre le bon ID. Vous devrez également désactivé le bouton submit de votre formulaire.
Ce plugin JQuery fonctionne très bien avec les versions 1.4 et 1.6 de JQuery.
En tout cas, beau boulot, c’est un captcha qu’on a presque envie de rater pour avoir à dessiner une nouvelle forme :)
Source : www.josscrowcroft.com
8
Juin
A Propos
Je suis un concepteur et développeur web à Grenoble. Je développe essentiellement avec le CMS Spip. Actuellement en contrat chez Territorial, je continue ma veille technologique, et vous fais partager ce que je trouve utile et pratique.
