Home Sample Blog Description 2015-10-15T16:28:00+02:00 Laurent G. https://devlint.fr/ Paris Web 2015 https://devlint.fr/fr/paris-web-2015 2015-10-15T16:28:00+02:00 2015-10-15T16:28:00+02:00

Paris Web, la conférence francophone des gens qui font le web

En ce début de mois d’Octobre 2015 a eu lieu la conférence Paris Web. C’était la 10è édition cette année.

J’y étais !

]]>
Le styleguide selon Susan Robertson https://devlint.fr/fr/styleguide-selon-robertson 2015-10-06T15:56:18+02:00 2015-10-06T15:56:18+02:00

To me, a style guide is a living document of code, which details all the various elements and coded modules of your site or application. Beyond its use in consolidating the front-end code, it also documents the visual language, such as header styles and color palettes, used to create the site. This way, it’s a one-stop place for the entire team—from product owners and producers to designers and developers—to reference when discussing site changes and iterations. Several companies have even put their guides online; Starbucks is the most well known of the bunch, but others exist.

Lire l’article Creating Style Guides de Susan Robertson

]]>
Off Canvas, quoi, où et comment ! https://devlint.fr/fr/off-canvas 2013-11-15T00:00:00+01:00 2013-11-15T00:00:00+01:00

Une petite liste de liens sur le thème de la navigation mobile et du pattern dit “off-canvas”

Quelques références :

Allez, deux derniers pour la route :

Bon dev !

]]>
Sémantique : microformats ou html5 microdonnées https://devlint.fr/fr/html5-microformat-microdata 2011-06-27T00:00:00+02:00 2011-06-27T00:00:00+02:00

Les référenceurs nous demandent parfois d’utiliser des données balisées en microformats… tout cela n’est pas forcément très clair, alors après avoir potassé pour vous quelques documentations issues de Microformats - Google - W3C, voici de quoi répondre à cette demande de façon un peu plus précise.

Un peu de théories avant tout

Avant de donner un exemple concret, il faut juste rappeler qu’il existe plusieurs façons de présenter ce qu’on nomme les Rich-Snippets – données signifiantes permettant de faciliter l’accès au contenu informationnel

  • RDFa (W3C – structure XML complexe dans la structure HTML
  • microformat (wiki ouvert ≠ standards)
  • html5 microdata (W3C)

Les microdonnées html5 vont devenir la norme ; elles peuvent être vues comme une extension des microformats qui visent à combler leurs lacunes en évitant la complexité des formats comme RDFa.

Et un peu de pratique aussi

Voici un exemple parce que tous nos sites ne sont pas html5 : (issus d’un site immobilier, pour l’adresse d’une agence)

Format microformat (tout html/xhtml+)

<div class="vcard">
   <img class="photo" alt="Agence immo Crémieu" src="agence-cremieu.jpg">
   <span class="fn org">Agence immo Crémieu</span>
   Adresse :
     <div class="adr">
        <span class="street-address">2 Rue Quelquechose</span>,
        <span class="locality">Crémieu</span>, <span class="region">Rhône-Alpes</span>
        <span class="postal-code">38460</span>, <span class="country">France</span>
     </div>
     <span class="geo">
        <span class="latitude">
           <span class="value-title" title="45,7259"></span>
        </span>
        <span class="longitude">
           <span class="value-title" title="5,2506"></span>
        </span>
   </span>
   Téléphone : <span class="tel">01 23 45 67 89</span>
   <a href="http://www.reseau.com/agencecremieu/" class="url">http://www.reseau.com/agencecremieu/</a>
</div>

Format microdata (à partir d’html5)

<div itemscope itemtype="http://data-vocabulary.org/Organization">
    <img itemprop="photo" alt="Agence immo Crémieu" src="agence-cremieu.jpg">
    <span itemprop="name">Agence immo Crémieu</span>
    Adresse :
     <span itemprop="address" itemscope
      itemtype="http://data-vocabulary.org/Address">
    <span itemprop="street-address">2 Rue Quelquechose</span>,
      <span itemprop="locality">Crémieu</span>, <span itemprop="region">Rhône-Alpes</span>.
       <span itemprop="postal-code">38460</span>, <span itemprop="country">France</span>
    </span>
     <span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo/">
  <span itemprop="latitude" title="45,7259"></span>
  <span itemprop="longitude" title="5,2506"></span>
   </span>
   Téléphone : <span itemprop="tel">01 23 45 67 89</span>.
    <a href="http://www.reseau.com/agencecremieu/" itemprop="url">http://www.reseau.com/agencecremieu/</a>.
</div>

Vous retrouverez des petits recap d’infos par types (Event, Organization, Person, Product, Review, etc.) à cette adresse : http://www.data-vocabulary.org et chez Google : http://www.google.com/support/webmasters/bin/topic.py?topic=21997

Du côté de chez Sw… Schema.org

De plus je vous invite à jeter un œil sur cette ressource, qui va prendre le pas sur les autres : http://schema.org/docs/schemas.html

Qu’est-ce que c’est ? Pourquoi ? C’est la même chose que Data-vocabulary.org !

Oui, mais :

schema.org is a collaboration by Google, Microsoft, and Yahoo! to improve the web by creating a structured data markup schema supported by major search engines.

En fait, cela ne change pas grand chose, on va juste s’appuyer sur ces schémas de représentation de donnée, car Data-vocabulary & Schema ont des schémas de données en communs.

Voilou… tout simplement !

]]>
Html5, jQuery et les Data Attributes [maj] https://devlint.fr/fr/html5-jquery-et-les-data-attributes 2011-06-21T00:00:00+02:00 2011-06-21T00:00:00+02:00 Lorsque vous faites un petite application html/js (avec jQuery par exemple), dans laquelle vous avez besoin d’interaction entre des éléments du DOM comme des boutons et un autre élément, on souhaite souvent associer des attributs. Introduction au data-attributes.

Data Attributes ?

Dans l’exemple d’une playlist, vous voulez qu’un clic de l’internaute, l’application lance la lecture du titre ou sur un autre bouton mettre en favoris le titre, etc. Dans plusieurs cas, nous avons besoin de passer un certain nombre de valeur à notre fonction : l’ID de la playlist, l’ID de l’artiste, l’ID du titre, l’ID de… et cetera, et cetera. De plus, vous vous dites que vous ne souhaitez pas utiliser un onclick sur le bouton dans lequel vous auriez pu passer toutes ces valeurs associées à l’appel de la fonction, non

vous voulez externaliser dans votre fichier javascript l’appel de la fonction grâce à un listener. Ce qui est une bonne chose pour plusieurs raisons, mais je ne vais pas rentrer dans un argumentaire ici.

Comment faire ?

Et là, vous vous dites que vous avez entendu parlé des custom data attributes quelque part, sur un site qui parlait d’HTML5… Tiens là par exemple : http://devlint.fr/blog/html5-microformat-microdata. Vous faîtes une recherche également du côté du W3C pour être sûr de vous, n’est-ce pas ?

Bien. Vous savez donc que vous pouvez partager des données (data) de façon complètement invisible pour l’internaute, mais tout à fait utile pour votre javascript.

Ainsi, cela vous parait maintenant très logique (pourquoi pas plus tôt ???) d’écrire une ligne html comme celle-ci :

<button class="addToFavorite" data-playlist="12" data-artiste="60" data-titre="04">
Ajouter à mes favoris
</button>

Vous avez maintenant directement dans le DOM les éléments dont vous avez besoin, et de façon claire et lisible, sans passer par du JSON et ses parser, sans passer dans du XML, parce que vous voulez garder tout cela aussi simple que possible.

Ok, mais comment utiliser tout cela ?

Autrement dit, vous vous posez la question du support des navigateurs (ben oui, c’est de l’HTML5 tout de même !).

Réponse : La plupart des navigateurs ne supportent pas les custom data attributes. Mais on s’en fiche. Notre objectif ici, n’est pas d’utiliser le potentiel des navigateurs, du moment que l’on retrouve nos données insérées dans le DOM (et c’est le cas, logique, c’est de l’HTMl…), mais de nous servir du super pouvoir de notre librairie préférée : jQuery

En effet, les dernières versions de jQuery (depuis la v.1.4.3) ont la capacité de lire automatiquement tous les data attributes de notre balisage et les rendre accessibles via la fonction jQuery.data () comme vous pouvez le voir dans la [doc de jQuery](http://api.jquery.com/jQuery.data/).

C’est génial parce que maintenant nos données et le balisage sont complètement séparés de notre code Javascript.

Vous pouvez aller plus loin, avec cet autre exemple :

<ul id="locations">
  <li><a title="Lyon" href="#" data-role="localisation" data-options='{"id":"1", "lat":"45.766242", "lon":"4.835844", "title":"Lyon"}'>Lyon, France </a></li>
  <li><a title="Paris" href="#" data-role="localisation" data-options='{"id":"2", "lat":"48.861395", "lon":"2.35136", "title":Paris"}'>Paris, France</a></li>
</ul>

et dans notre fonction JS, tada :

alert( $('#locations li:first-child...
]]>
Ajax, historique et navigation https://devlint.fr/fr/ajax-historique-et-navigation 2011-06-14T00:00:00+02:00 2011-06-14T00:00:00+02:00

L’un des soucis avec les sites full ajax provient de la navigation entre les différentes pages : charger du contenu dans une page en asynchrone est de plus en plus employé mais suppose que l’on perde l’historique du navigateur. Si vous cliquez sur un lien chargeant du contenu à la place de l’existant, vous perdez celui-ci, logique. Comment revenir en arrière et retrouver le contenu d’origine ? Pas possible. Mais on peut y remédier.

The sequence of Documents in a browsing context is its session history

Du coup, certains développeurs ont trouver la parade : utiliser le système d’ancre d’HTML pour simuler le changement d’url monsite.com/#monAjax avec la fonction javascript hashChange. D’autres sont allés plus loin en utilisant une réécriture côté navigateur avec un interpréteur côté serveur : c’est le cas de Twitter par exemple avec https://twitter.com/#!/webdevlint correspondant à https://twitter.com/webdevlint

Le seul soucis dans les deux cas, vous l’aurez deviné c’est l’absence de dégradation (ou fallback) en l’absence de Javascript.

Chose réglée dans le cas où vous travaillez avec Ajax comme dans mon article précédent : AJAX: comment bien inclure une page en ajax ? et l’utilisation de l’Api history d’HTML5.

Dans mon post précédent, je vous parlais d’inclusion de contenu asynchrone grâce à jQuery qui envoie l’entête X_REQUESTED au serveur (Apache ici) ; dans notre code PHP nous indiquons à Apache qu’il ne doit nous retourner que ce que nous avons déclaré comme étant du contenu asynchrone grâce à :

if($_SERVER['HTTP_X_REQUESTED_WITH']=='')

Nous construisons notre menu tout à fait normalement en pointant vers notre page complète, mais nous utilisons notre fonction JS pour insérer le contenu en Ajax.

Avec l’Api History, nous pouvons aller plus loin :

if (history &amp;&amp; history.pushState) {
 history.pushState({ path: this.path }, '', this.href);
}

Au moment où nous faisons notre requête ajax dans notre script, sur le callback complete ou success de la fonction $.ajax de jQuery, nous faisons un changement d’url dans la barre URL du navigateur (et donc dans son historique) si l’appel.

Si notre lien est http://devlint.fr/maPage.html, alors nous envoyons au navigateur :

history.pushState({ path: this.path }, '', 'http://devlint.fr/maPage.html');

ainsi tout en ayant une navigation animée en asynchrone, nous conservons en apparence une navigation dite classique dans laquelle l’utilisation des boutons du navigateur (précédent / suivant).

Ca c’est le schéma simpliste : il faut prévoir l’action JS sur l’événement history.popstate – par exemple, l’action du bouton précédent history.back() ; prévoir un fallback pour les navigateurs qui ne supporte pas HMTL5 et cette Api ; par contre rien n’est à prévoir lorsque javascript n’est pas activé puisque notre application utilise de vrais liens… chaque lien étant une requête complète au serveur.

A suivre donc dans un lab dès que j’ai un peu de temps.

Quelques liens pour compléter mes propos :

]]>
Comment bien inclure une page en ajax ? https://devlint.fr/fr/inclure-une-page-ajax 2010-12-28T00:00:00+01:00 2010-12-28T00:00:00+01:00

Après le chargement principal de la page HTML, on peut charger du contenu à partir du serveur en remplaçant certain contenu, au lieu de recharger toute la page. C’est aussi simple que cela. AJAX signifie “Asynchronous JavaScript and XML”, et visait à ne charger que les documents XML. Mais nous avons rapidement utilisé cette technique pour charger à peu près tout, et la partie XML a été vite oubliée. La partie asynchrone est donc devenue la killer feature, mais c’est quoi ?

“AJAX ne doit pas rompre le Web”

Lorsque les graphistes proposent une interface sous forme d’onglet, cela signifie qu’il y aura certainement beaucoup de contenus : si nous chargeons tout d’un coup, la page deviendra très lente à l’affichage. Donc nous pouvons, techniquement, dire au navigateur de ne charger que le premier onglet par exemple, puis qu’au clic sur un onglet par l’internaute de charger le contenu associé à ce moment là.

Cette technique utilise comme son nom l’indique le langage Javascript qui sera interprété par le navigateur… si l’internaute a désactivé le moteur JS de son navigateur, le contenu ne pourra pas être affiché.

Le serveur à notre rescousse pour rendre notre page “unobtrusive”

“Unobtrusive” est l’adjectif anglophone que nous traduisons par “non-intrusif” : ce terme signifie que nous proposons à l’internaute d’accéder à notre contenu sans le bloquer à cause de la technologie. Dans notre cas, un utilisateur qui aura désactivé Javascript (lui-même, par le biais de sa DSI ou encore par son proxy), n’aura jamais accès à un contenu qui sera affiché par l’exécution d’une requête PHP/MySQL par exemple via une fonction Javascript. Grosso-modo, si le clic sur un onglet correspond à une fonction type “onclick” (javascript), alors il ne se passera rien.

Par contre il existe une solution toute logique, et surtout qui est “une bonne pratique”.

La bonne pratique AJAX

La bonne pratique voudrait en réalité que dans un premier temps nous proposions au navigateur un lien vers une page correspondant au clic sur l’onglet.

<ul>
   <li class="onglet"><a href="hebergement-description.php">Description</a></li>
   <li class="onglet"><a href="hebergement-photos.php">Photos</a></li>
</ul>
<div id="contenu"><!-- Insère le contenu ici --></div>

Puis dans un second temps, la fonction JS (externe évidement, et ici en jQuery) :

$(document).ready(function(){
   $('.onglet a').click(function(){
      var url = $(this).attr('href');
      $('#contenu').load(url);
      return false;
   });
});

Cette fonction prend le pas sur les liens qui se trouvent dans les <li> qui ont la classe “onglet” : le return false; stoppe l’exécution du “href” ; cela signifie que lorsque l’internaute clique sur un onglet, le javascript récupère l’url du lien, charge le contenu de la page visée dans la div “contenu” sans recharger toute la page. Le lien ne sera pas suivi, nous avons déjà récupérer et insérer le nouveau contenu.

C’est la fameuse “killer feature”.

Mais on ne s’arrête pas là !

En effet, si on fait cela on insère tout le contenu de la page en question. Hors nous ne pouvons pas insérer les contenus html comme les métadonnées (ainsi que toutes les balises qui caractérisent une page html) dans la...

]]>