Créer des catégories avec jQuery

Comment créer à l'aide de jQuery des catégories et utiliser leurs scopes pour trier des éléments présents dans le DOM ?

jquery

Problème:

Mon code m'affiche une liste de boutiques d'une même enseigne sur l'ensemble des villes françaises. Cette liste ne fait l'objet d'aucun tri. J'ai besoin de créer 3 groupes bien distincts de boutiques:

  • Les boutiques sur Paris
  • Les boutiques en région parisienne
  • Les boutiques en province

Dépendances Front-end Bower avec Symfony

bower

L’intégration et le suivi  du cycle d’évolution des versions des librairies JavaScripts et Css  dans un projet est bien souvent chose difficile. Aujourd’hui nous vous présenterons un outil qui vous permettra de ne plus vous en  soucier : Bower.

Dans cet article nous vous présenterons Bower et comment  l’utiliser dans un environnement Symfony  sous Ubuntu.

Customisez vos pages web grâce à Greasemonkey et JQuery sur FireFox

greasemonkey

GreaseMonkey est une extension de Firefox qui vous permet de personnaliser la façon dont une page Web s’affiche ou se comporte, en utilisant du JavaScript.

En d’autres termes, GreaseMonkey vous permet d’écrire vos propres scripts, afin de modifier n'importe quelle page internet selon vos désirs: modifier/ajouter/supprimer du code HTML ou JavaScript, changer les couleurs/styles/dispositions, ajouter de nouvelles fonctionnalités, etc.

Premiers pas avec JQuery Mobile

Cet article présente mon approche personnelle de JQuery Mobile, et des différents éléments que j'ai utilisés dans un cas pratique. Il n'a pas pour but de présenter le langage de façon exhaustive, mais de montrer qu'il est possible d'avoir une interface mobile très rapidement avec quelques lignes de code.

Qu'est-ce que jQuery Mobile?

JQuery Mobile est un framework javascript Web-Mobile léger, open source, basé sur jQuery, HTML et CSS mettant à disposition un grand nombre de tags et markups et de convertir les éléments HTML en composants graphiques pour interfaces tactiles. Simple d'utilisation, il fournit une interface native-like qui s'adapte à la majorité des navigateurs et compatible avec la plupart des smartphones tactiles et tablettes (mais également ordinateurs).

Les bases

Pour produire une première page en jQuery mobile, nous allons créer un fichier HTML qui sera interprété par le navigateur mobile. Nos navigateurs comprennent le HTML5, alors utilisons-le !
Il est ensuite nécessaire d'importer le framework jQuery Mobile (ou de donner à notre page une référence vers les fichiers en ligne - ce que nous choisirons dans l'exemple ci-dessous).

<!doctype html>
<html>
  <head>
    <title>Mes premiers pas avec jQuery Mobile</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <meta charset='utf-8'>
    <link rel='stylesheet' href='http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css' />
    <script src='http://code.jquery.com/jquery-1.7.1.min.js'></script>
  </head>
  <body>
    ...contenu de la page...
  </body>
</html>

Dans la première balise meta, "viewport" est l'endroit où sont affichées les pages dans le contexte du mobile. 'width=device-width, initial-scale=1' provoque l'ajustement de la largeur de la page à celle de l'écran du mobile.

Styles et rôles des éléments :

En HTML5, chaque élément a un rôle. C'est ce qui va permettre d'uniformiser nos pages en appliquant des styles bien définis selon le rôle attribué aux éléments dans une page.

L'attribut data-role permet d'attribuer ces rôles aux éléments (page, header, footer...), mais il est possible d'assigner d'autres paramètres afin de les customiser. Ainsi, data-position va imposer une position aux éléments, data-theme va leur attribuer un thème css, data-transition définir des animations pour passer d'une page à une autre (il en existe d'autres comme data-icondata-mini, etc.).

Par exemple,

<body>
  <div data-role='page' id='homePage' data-title='Page homePage'>
    <div data-role='header'>
      <h1>My First Phone App with jQuery Mobile</h1>
    </div>
    <div data-role='content'>
      <p>Ceci est le contenu de la page.</p>
    </div>
    <div data-role='footer' data-position='fixed'>
      <h4>©Ideo2012</h4>
    </div>
  </div>
</body>

data-position indique si l'élément est flottant ou fixe, donc s'ajuster au reste du contenu de la page, ou non.

A savoir : il est possible d'insérer des boutons dans les en-têtes et pieds de page comme sur une application mobile classique (cf. plus bas).

Boutons :

Il existe plusieurs méthodes pour afficher des boutons dans notre page.

Une première consiste à créer un lien, et à lui appliquer un rôle de bouton, comme dans l'exemple suivant :

<a href='#favoris' data-role='button' data-icon='star'>Favoris</a>

href est l'adresse du contenu à afficher lorsqu'on appuie sur le bouton.
data-icon - optionnel - permet d'assigner un pictogramme de base à afficher dans le bouton.

Inséré dans un élément de type div avec les data-role='navbar' et data-id='navBar', le bouton déclaré ci-dessus n'a plus besoin de l'argument data-role, JQuery Mobile l'interprètera bien comme un bouton.

<div data-role='navbar' data-id='navBar'>
  <a href='#favoris' data-icon='star'>Favoris</a>
</div>

Il en est de même pour les boutons dans l'en-tête ou pied de page au détail près que ceux-ci doivent étendre la classe CSS ui-btn-left ou ui-btn-right pour s'afficher correctement, respectivement à gauche ou à droite (les 4 classes .ui-header .ui-btn-left.ui-header .ui-btn-right.ui-footer .ui-btn-left et .ui-footer .ui-btn-right étant définies par défaut dans la CSS de jQuery Mobile).

<div data-role='header'>
  <h1>My First Phone App</h1>
  <a href='#favoris' data-icon='star'>Favoris</a>
</div>
Navigation :

Dans cet exemple, je n'aborde pas comment séparer le code d'un site en plusieurs fichiers afin de conserver et réutiliser certains éléments (header, footer...). Ceci dit, il est tout à fait possible de coder plusieurs pages et fenêtres dans un seul fichier et de naviguer parmi celles-ci. C'est encore une fois le but de l'attribut data-role. Vous allez donc pouvoir avoir autant de blocs div que vous voulez dans le body de votre fichier HTML en leur indiquant bien leur data-role='page' et en leur donnant un id. Cet id servira ensuite à naviguer sur cette page (div).

<!-- Page d'accueil --> <div data-role='page' id='homePage' data-title='homePage'>
  <div data-role='header'>
    <h1>My First Phone App</h1>
  </div>
<div data-role='content'>
<p>My Content</p>
<a href='#favoris' data-role='button' data-icon='star' data-theme='b' data-transition='slidedown'>Favoris</a>
</div>
<div data-role='footer' data-position='fixed'>
<h4><a href='#copyright' data-rel='dialog'>©Ideo2012</a></h4>
</div>
</div> <!-- Page de favoris --> <div data-role='page' id='favoris' data-title='Page Bar'> <div data-role='header' data-position='fixed'> <a href='#homePage' data-icon='delete' class='ui-btn-left'>Retour</a> <h1>Favoris</h1> </div> <div data-role='content'> <p>Mes Favoris</p> <p>... Contenu ...</p> <p><a href='#homePage'>Retour à l'accueil</a></p> </div> <div data-role='footer' data-position='fixed'> <h4><a href='#copyright' data-rel='dialog'>©Ideo2012</a></h4> </div> </div> <!-- Page Copyright --> <div data-role='page' id='copyright' data-title='©Ideo 2012'> <div data-role='header' data-position='fixed' data-theme='c'> <h1>Ideo Technologies 2012</h1> </div> <div data-role='content'> ...Tous droits réservés... </div> </div>
Transitions :

Afin d'améliorer l'expérience utilisateur sur notre page, nous voulons ajouter des effets visuels de transition entre les pages. Vous remarquerez dans l'exemple précédent 2 types d'appel à des pages.
De la page d'accueil à la page Favoris :

<a href='#favoris' data-role='button' data-icon='star' data-theme='b' data-transition='slidedown'>Favoris</a>

L'affichage de la page de favoris se fera avec un effet d'apparition de haut en bas. Il en existe bien évidemment d'autres : slide, slideup, pop, fade, flip.

Le deuxième appel est illustré lors de l'affichage de la page copyright, depuis les footers, avec :

<h4><a href="#copyright" data-rel="dialog">©Ideo2012</a></h4>

data-rel va ici indiquer que le bloc div id='copyright' va s'afficher sous forme de fenêtre dialogue (popup).

Pour composer un numéro de téléphone depuis le mobile, sur un simple tap, il suffit d'utiliser la balise de lien : a.
Exemple :

<a href='tel://01 46 25 09 60'>Appelez-nous!</a>

Thèmes :

JQuery Mobile définit par défaut 5 swatches (de "a" à "e"). Les swatches sont des thèmes de couleurs cohérents, permettant de changer l'apparence d'éléments graphiques. Il se modifie en utilisant l'attribut data-theme. Il est également possible d'en créer des nouveaux afin de les utiliser de la même manière.

Constations

A l'exécution dans un navigateur mobile, on a bien un site formaté au petit écran, les boutons sont jolis et l'interface assez soignée. Il apparait cependant vite nécessaire de construire son propre thème. Cependant, même si le framework se dit proche du look and feel natif, on en est tout de même assez loin. Les animations sous Safari IOS6 sont poussives et ne semblent pas se déclencher en même temps que le chargement de la page.

Conclusion

Pour conclure, on peut dire que JQuery Mobile est un framework compatible avec un grand nombre de terminaux mobiles (contrairement à son principal pendant Sencha Touch), facile et très rapide à prendre en main. L'affichage se fait correctement quelle que soit la résolution de l'écran mobile. La documentation est assez complète et suffisante pour des exemples simples mais le framework déçoit sur les animations qui ont des comportements améliorables. Il reste encore quelques finitions à apporter pour avoir une totale compatibilité entre les différents systèmes mobiles et se rapprocher davantage des visuels d'applications natives.

Introduction à ASP.NET WebAPI (partie 1)

Dans ce billet, mon but est de vous initier à ASP.NET WebAPI de Microsoft, permettant facilement d'ouvrir vos données vers l'extérieur.
Bien que WebAPI fasse partie intégrante d'ASP.NET MVC 4, lors de la réalisation de cet article je n'avais accès qu'à une machine sous Vista SP1. Etant donné les problèmes de compatibilité de cette ancêtre avec les dernières versions des outils Microsoft (Visual Studio ou ASP.NET MVC), j'ai été contraint de travailler avec ASP.NET MVC 3 et d'ajouter (via NuGet) les références à WebAPI.
Je vous propose donc de découvrir comment fonctionne WebAPI sous Visual Studio 2010, via la création d'un projet "serveur" qui va héberger mon API. Dans un futur billet, je vous montrerai comment créer simplement un client utilisant jQuery pour consommer cette API.

Introduction à jQuery

Logo

Dans ce post je vais vous présenter les différentes fonctionnalités proposées par la librairie JavaScript jQuery.

Tout au long de cet article pour je vous renverrai vers des documentations en ligne que j’ai pu consulter lorsque j’ai utilisé jQuery sur différents projets. De cette manière vous pourrez vous imprégner avec une granularité plus fine de l’ensemble des fonctions mises à disposition par jQuery.

Introduction

jQuery est une framework Javascript, au même titre que Mootools ou  encore Script.acculo.us.
Il s'agit en fait d’une librairie de fonctions JavaScripts qu'il suffit de combiner pour obtenir le résultat voulu.
Par bibliothèque on entend donc un ensemble cohérent de fonctions permettant de s’affranchir des tâches rébarbatives et répétitives de façon uniforme sur les navigateurs les plus courants.
Elle est sous licence GPL et MIT, et donc complètement réutilisable sur des travaux professionnels. Son poids compressé est de 92 Ko, ce qui est tout à fait raisonnable sur la plupart de nos projets.

Les navigateurs supportés sont :
  • Firefox 1.5+
  • Internet Explorer 6+
  • Safari 2.0.2+
  • Opera 9+

jQuery et Ajax

Ajax

ajax_logo.png

Apparu en 2005, Ajax (Asynchronous JavaScript and XML) regroupe un ensemble de technologies déjà existantes, notamment HTML, JavaScript et XML. Avec Ajax, les applications web peuvent mettre à jour partiellement la page affichée par le navigateur sans avoir à recharger la page entière. L'interface graphique peut ainsi évoluer par petits bouts, devenant ainsi plus interactive et reproduisant la sensation d'utiliser une application type client lourd. Nous parlons alors d'applications RIA (Rich Internet Applications). Le terme "Asynchronous" signifie que l'exécution du JavaScript continue sans attendre la réponse du serveur qui sera traitée quand elle arrivera. En mode synchrone, le navigateur est "gelé" en attendant la réponse du serveur.