Creamama, developpeur web, Spip, JQuery à Grenoble

Afficher le titre/lien d'un article dans la langue courante du site Spip

Créamama — Wed, 20 Jun 2012 01:29:11 PDT

Vous avez un site multilingue, et vous souhaitez afficher un lien vers les mentions légales. Avec le plugin page, on peut facilement créer des pages indépendantes ainsi que leurs traductions. Nous avons donc notre article "Mentions Légales" avec l'id 15. Et nous avons 2 traductions, des articles de types pages avec les IDs 16 et 17.

On aurait pu se contenter de faire comme ça :


 #TITRE |

Ce code est parfait si vous avez un nombre définit de traduction et que vous connaissez les IDs de toutes les traductions au moment où vous écrivez votre squelette.

En revanche, si au moment où vous faites vos squelettes, il n'y a qu'une partie des traductions qui est publiée, vous serez obligé de retourner modifier votre squelettes à chaque nouvelle traduction.

Ci-dessous, une solution pour chercher toutes les traductions d'un article et afficher le bon en fonction du contexte de langue :

#SET{article, #ARRAY}
 
 
 #SET{article, #GET{article}|push{#ID_ARTICLE}}
 
 
 
 
 #TITRE |

La première boucle (BOUCLE_m) fournit un contexte d'article pour la seconde boucle (BOUCLE_a) qui va lister toutes les traductions de l'article 15, lui compris. On génère dans cette dernière un tableau contenant les IDs de l'article 15, et de ses traductions (donc 16 et 17 si vous avez suivit).

Enfin, la dernière boucle (BOUCLE_d) va parcourir le tableau généré précédemment, et retourner l'article dans la bonne langue grâce au critère lang.

tutoriel html5 History

Créamama — Wed, 26 Oct 2011 05:28:13 PDT

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);
}
}

Télécharger

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
}

Télécharger

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 :

Démo html5 History

Télécharger la démo :

: démo html5 History

Formulaire html5

Créamama — Tue, 30 Aug 2011 05:29:51 PDT

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 :

email
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 :

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 !

LightSlider : html5 JQuery Slider

Créamama — Wed, 24 Aug 2011 06:32:28 PDT

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

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 :


 
 Couché de soleil

La balise figure est un conteneur, regroupant l'image() et sa légende(

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();
});

Télécharger

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

html5 History : Introduction

Créamama — Mon, 22 Aug 2011 02:30:00 PDT

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 :

JQuery captcha : Drag and Drop

Créamama — Fri, 19 Aug 2011 04:30:00 PDT

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

html5media Player audio et vidéo crossBrowser

Créamama — Thu, 18 Aug 2011 02:30:00 PDT

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 et , proposées par html5.

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 et

html5media, player vidéo

Rien de plus simple pour intégrer une vidéo :

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 :

html5media, player audio

L'utilisation du player audio, est aussi simple que celui de la vidéo. Intrégrez le code suivant :

Certains navigateurs ne savent pas lire les mp3, on peut donc leur proposer un format opensource de la manière suivante :

source : http://html5media.info/

Carte de france SVG

Créamama — Tue, 16 Aug 2011 02:30:00 PDT

Restons dans le domaine de la cartographie, avec aujourd'hui une carte des départements de France. Dans le dernier article, je vous présentais une carte du monde en JQuery / svg.

Cette fois-ci, pas de JQuery, du pur Javascript, cette carte utilise la librairie raphaël. Je ne connaissais pas du tout avant de voir cette démo. Pour en faire une brève présentation, elle facilite le travaille sur des données vectorielles. Elle est compatible avec la plupart des navigateurs, même les plus vieux (Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+).

J'ai l'impression que cette démo, reste une démo, et pas un plugin avec tout plein d'options.

On trouve le code suivant dans le fichier script.js :

Télécharger

Il semble donc relativement facile de modifier le comportement au survol, au clic.

Source : http://lab.proov.fr/carte_france_svg/demo.html

JVectorMap : Plugin JQuery carte vectorielle

Créamama — Fri, 12 Aug 2011 02:30:00 PDT

Un plugin JQuery pour afficher une carte du monde au format vectorielle.

Pas mal d'options sont disponibles, pour gérer par exemple, le survol ou le clic d'un pays.

Avec des données supplémentaires, il est facile d'enrichir la carte. Dans la démo du site, on voit l'intégratin des données du FMI.

Le résultat pour une carte du monde est plutôt honnête, mais il peut manquer dans certains cas, des données plus précises concernant par exemple les départements, régions, villes, etc. Heureusement, deux cartes plus précises sont fournies, pour les US, et pour l'Allemagne.

Coté technique, on a un script pour les données de la carte, un autre script pour générer la carte, et un fichier de style pour rendre le tout un peu plus agréable. Ce plugin utilise SVG pour les navigateurs "modernes" (Firefox 3 or 4, Safari, Chrome, Opera, IE9). On appréciera quand même le support des versions 6 à 8 d'Internet Explorer grâce à VML

source : http://jvectormap.owl-hollow.net/#data_visualization_with_jvectormap

JQuery ChopSlider

Créamama — Thu, 11 Aug 2011 00:24:15 PDT

Des sliders JQuery, il en existe un paquet. Y en des jolis, y en des moches, bref, pour tous les goûts.

Et ce matin, je tombe sur ÇA :

Franchement, le développeur qui a développé ce slider, c'est sorti les doigts (J'espère juste qu'il s'est lavé les mains :). Il y a une trentaine d'effets de transition différents, certains sont plus gourmand en ressources que d'autres. C'est à la limite ce qu'on pourrait reprocher au plugin, mais on en prend plein la vue.

Ce slider utilise les transitions css3, on a un joli paquet d'options. Il est par exemple possible de déterminer des transitions particulières pour les navigateurs ne supportant pas css3, ou pour les supports mobiles.

source : http://www.idangero.us/cs/