-
1
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 -
1
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 -
0
Voilà un petit slider construit avec html5 et JQuery. Très sobre et très simple, ce slider se veut léger. Le plugin en version compressé pèse un poil plus d’1ko.
Pour ce plugin j’ai utilisé les balises <figure> et <figcaption> proposés par html5. Les images de votre slider devront être dans une div conteneur, et chacune devra être ajouter de la manière suivante :
<figure>
<img src="img/1.jpg" alt=""/>
<figcaption>Couché de soleil</figcaption>
</figure>La balise figure est un conteneur, regroupant l’image()<img> et sa légende(<figcaption>).
Coté javascript/JQuery, c’est très simple. On positionne les images les unes au dessus des autres avec JQuery. De cette manière, si javascript est désactivé, on aura un affichage correct (enfin, un affichage qui me convient, en tant que développeur... :) )
Si la div contenu à l’id #slideMe, on appelle le plugin de la manière suivante :
$(document).ready(function(){
$('#slideMe').lightSlider();
});On a juste deux options sur ce plugin :
- texteBoutonPrec : Le texte du lien pour passer à l’image précédente
- texteBoutonSuiv : Le texte du lien pour passer à l’image suivante
Pour les impatients, voilà la démo : http://www.demo.creamama.fr/lightSlider/
Pour les plus intéressés, il reste encore quelques lignes ci-dessous :
Je me suis intéressé au début de cette semaine à html5 history. Après avoir lu pas mal d’articles, de docs et en avoir compris une partie, je voulais essayer de le mettre en pratique. Ce slider est là pour ça. Il servira de base pour une démo à venir. Mais tant qu’à faire d’avoir développé ce petit slider, autant le partager :)
Ces derniers temps, on a vu passait pas mal de slider avec des effets assez impressionnants (par exemple : chopSlider), mais du coup, beaucoup plus gourmand en ressource. L’idée de se slider, c’est de re rester sobre, simple et ultra léger.
N’hésitez pas à le télécharger, le modifier, vous l’approprier, ou donner votre avis !
-
- Démo lightSlider
-
- script lightslider compressé
-
- script light slider
24
Aout -
0
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 -
1
Un captcha en JQuery où il faut glisser / déposer une image pour valider le formulaire. Vous connaissez tous le principe du captcha. Ce petit test présent à la fin de nombreux formulaires, qui empêchera les robots de spammer vos formulaires.
Ils prennent souvent la forme de quelques mots ou suite de chiffres, plus ou moins lisible. Dans les différents exemples ci-dessous même pour un humain, il n’est pas toujours facile de le déchiffrer.
AJAX FANCY CAPTCHA propose une alternative intéressante. Pour valider le formulaire, vous devrez glisser / déposer l’objet demandé dans l’encart prévu à cet effet. Simple d’installation et d’utilisation, il nécessite ui.core.js, ui.draggable.js et ui.droppable.js.
Ce n’est certainement pas la solution la plus accessible, la moins lourde à mettre en place ou encore la plus sécurisée, mais elle a le mérite de proposer une alternative. Avec un peu plus d’imagination et de recherche, on doit pouvoir arriver à une solution convenable.
Je vous laisse découvrir ça par vous même : AJAX FANCY CAPTCHA
19
Aout
A Propos
Creamama, développeur web, Spip, JQuery à Grenoble
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.
