Archives mensuelles : octobre 2012

HTML5 : Les nouveautés méconnues

Developpement Web, Web

HTML 5, CSS3 et les APIs JavaScript apportent beaucoup de nouveautés qui vont permettre de faire des applications de plus en plus complexes et connectées. Certaines nouveautés sont assez mise en avant et connues comme :

  • la géolocalisation
  • le support des fichiers vidéos et audios
  • la gestion du mode déconnecté
  • le stockage sur le navigateur
  • Canvas et SVG
  • les transformations, animations CSS3
  • les médias queries CSS3
  • le drag’n drop natif
  • File API
  • les polices webs

Voici un petit aperçu de quelques nouveautés méconnues mais très intéressantes apportées par HTML5 (Attention, certaines sont encore à l’état de brouillon).

Web workers : Multi threading Javascript

Une des problématiques de JavaScript est qu’il n’était pas possible d’effectuer des traitements sur plusieurs threads, qui plus est avec les processeurs multicœurs disponibles maintenant. Ainsi, lors d’un traitement JavaScript long, l’interface utilisateur peut se figer quelque secondes et il est même possible d’avoir un pop-up indiquant qu’un script met trop de temps à s’exécuter.
HTML5 introduit les Web Workers. Ce sont des scripts qui peuvent s’exécuter en taches de fond, sur des threads séparés ne bloquant pas votre site. Le principe consiste à des échanges de messages entre votre script principal et un (ou des) workers.
Cependant ces workers ont quelques limitations comme l’accès au DOM. Il ne vous sera donc pas possible de modifier le contenu de vos pages dans un worker.

Ressources :

Fullscreen

L’API Fullscreen permet la gestion du plein écran. Il est ainsi possible de mettre en plein écran n’importe quel élément d’une page (une div par exemple) et non plus l’ensemble de la page comme on peut le faire via la touche F11.

Attention il pourrait être utilisé à des fins de phising !!!

Ressources :

Web sockets

Les web sockets sont des sockets (tunnels de communication) entre un serveur et un client web. Cette API permet d’ouvrir un canal de communication entre le navigateur et le serveur web et d’échanger des messages bidirectionnel (dans les 2 sens : client vers serveur mais également serveur vers client). Cela permet de mettre en place du Push. Il n’est donc plus nécessaire de faire du polling (technique d’appel régulier du serveur coté client) afin de récupérer des éventuelles mise à jour. Cela permet de facilement implémenter un chat par exemple.

Ressources :

Server-sent events

Les Server-sent events ressemblent aux web sockets sauf que ceux-ci sont unidirectionnel, du serveur vers le client. On s’abonne à une source de mise à jour générées par un serveur. Lors d »une mise à jour, une notification est envoyée au client.

Ressources :

WebRTC

WebRTC est un protocole de communication audio, vidéo en temps réel sans plugin proposé par Google. Il sera ainsi possible d’effectuer des appels téléphoniques, du partage de vidéo ou du P2P par exemple.

Ressources :

Edition en ligne

Inline editing permet de définir du contenu éditable par l’utilisateur. Il suffit d’ajouter l’attribut contenteditable=true afin de rendre l’édition possible.

Page Visibilty

L’API Page Visibility permet de savoir si votre page est en cours de visualisation et effectuer des traitements en fonction de cet état. On pourra ainsi mettre en pause une vidéo, un jeu ou un diaporama, arrêter les appels serveurs qui impactent votre serveur, … Cette API est encore jeune et les navigateurs l’implémentent avec des préfixes (-moz, -o, -webkit, -ms).

Ressources :

Zen Coding : Améliorez votre productivité

Developpement Web, ,

Je me suis récemment intéressé à AngularJS, un framework JavaScript créé par Google. J’ai suivi des vidéos d’introduction/présentation de ce framework qui a l’air très prometteur. Dans ces vidéos, j’ai pu découvrir une technique permettant de coder très rapidement en HTML. Après quelques recherches, j’ai découvert qu’il s’agit de ce qu’on appelle le Zen Coding.

Présentation

Il s’agit de décrire les éléments HTML avec une syntaxe proche du CSS qui permet de générer le code HTML.

Ainsi

div#page>div.logo+ul#navigation>li*5>a

…sera transformé en :

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
        </ul>
</div>

Il s’intègre dans la plupart des IDE sous la forme d’un plugin ou est intégré directement. Une extension pour Visual Studio est disponible dans la galerie des extensions par exemple.

Syntaxe

Attribut id et classe

div#page.section.main

devient

<div id="page" class="section main"> </div>

A noter que si le type d’élément n’est pas précisé avec un « # » ou « . », l’élément généré sera de type div. On aurait obtenu le même résultat avec

#page.section.main

Autres attributs

Il est possible de générer les autres attributs en les spécifiant entre crochets.

td[colspan=2]

devient

<td colspan="2"></td>

Multiplication d’éléments

Il est possible de multiplier la génération d’éléments via * 

li*5

devient

<li></li>
<li></li>
<li></li>
<li></li>
<li></li>

Numérotation avec $

li.item$*3 générera 3 tags <li>, remplaçant $ par le l’index du tag.

<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>

Nœuds Enfants et Frères

Il est possible de générer une arborescence complète via les opérateurs suivants :

  • > permet d’indiquer que l’élément suivant est un enfant
  • + permet d’indiquer que l’élément suivant est un frère
  • ( ) permet d’indiquer un groupe

Ainsi

div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer

devient 

<div id="page">
	<div id="header">
		<ul id="nav">
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
			<li><a href=""></a></li>
		</ul>
	</div>
	<div id="page">
		<h1><span></span></h1>
		<p></p>
		<p></p>
	</div>
	<div id="footer"></div>
</div>

Support du texte (depuis la version 0.7)

Il est maintenant possible de renseigner du texte entre { } 

p>{Click }+a{here}+{ to continue}.

devient 

<p>Click 
	<a href="">here</a> to continue
</p>

Ressource

Pour en savoir plus, je vous invite à consulter les ressources suivantes :

Conclusion

Cette technique permet de gagner en rapidité lors de l’écriture de code HTML (compatible également XML et XSL). L’essayer c’est l’adopter. De plus il existe des extensions pour la plupart des éditeurs. Pourquoi s’en priver !!

CSS3 – Medias Queries : Adapter son site à différentes résolutions

CSS, Developpement Web, ,

Avec l’avènement des smartphones et des tablettes, il est possible d’accéder à un site avec des « devices » de résolution très différentes. Voyons comment via CSS modifier l’affichage de votre site en fonction de la résolution du terminal utilisé, sans pour autant modifier le code HTML.

C’est ce que l’on appelle le responsive design. Il existe 2 approches :

  • Mobile First ou amélioration progressive : cela consiste à concevoir votre site pour les petits terminaux et ajouter des améliorations pour les résolutions plus grande.
  • Desktop First ou dégradation élégante : dans cette approche, il s’agit de concevoir pour de grands écrans et supprimer les effets et éléments superflus pour les petits écrans.

La notion de responsive design ne se limite pas seulement aux media queries. L’adaptation pouvant se faire par d’autres moyens, par JavaScript notamment.

En terme de performance, les petits écrans sont souvent associés à des smartphones, moins performant que les ordinateurs de bureau par exemple. L’approche Mobile First sera moins gourmande. En effet, dans le cas du Desktop First, l’affichage par défaut sera adapté pour les grands écrans. La feuille de style sera appliquée puis ensuite les couches pour l’adaptation pour les petits écrans. Ainsi, plusieurs règles pour les mêmes éléments seront interprétées.

En HTML4/CSS2, il est possible de définir des styles en fonction du média (écran, imprimante, projecteur, …).

Les Media Queries CSS3 vont plus loin et permettent d’adapter votre site en fonction de paramètres comme :

  • l’orientation du terminal (portrait ou paysage) : orientation
  • la hauteur : height
  • la largeur : width
  • la hauteur du terminal : device-height
  • la largeur du terminal : device-width
  • le ratio : aspect-ratio
  • …

Syntaxe

Les media queries désignent l’expression qui permet de définir dans quel cas le code CSS doit être utilisé. Ce sont des expressions logiques qui peuvent contenir plusieurs conditions. Les opérateurs logiques disponibles sont :

  • and : et
  • only : seulement
  • not : non

A noter que le ou se fait via la virgule. En effet, on pourra définir plusieurs cas pour lesquels le style est applicable en séparant plusieurs media queries par une virgule.

@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
    /* Code CSS */
}

Utilisation

L’utilisation des media queries dans votre page peut se faire via plusieurs techniques.

Fichier CSS unique

Le code CSS pour vos différentes adaptations peut être inclus dans un seul fichier. Le code spécifique pour une « adaptation » (résolution, orientation, …) étant inclus dans un sous bloc définissant les règles d’application. Dans l’exemple ci-dessous, la couleur de fond change pour les terminaux de type écran dont la largeur est inférieure à 480px.

/* fond gris par défaut */
body {
    background : #CCC;
}

@media only screen and (max-device-width: 480px) {
    /* fond blanc pour les terminaux de type écran dont la largeur est inférieure à 480px */
    body {
        background : #FFF;
    }
}

Fichiers séparés

Il est également possible de mettre le code spécifique dans des fichiers séparés. La règle d’application étant définie dans l’attribut média de la balise link.

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" />

Configuration du viewport pour les terminaux mobiles

Dans le cas des terminaux mobiles comme des smartphones, il est nécessaire de configurer ce qu’on appelle le viewport afin de s’assurer que la résolution cible soit la résolution du terminal. En effet, afin d’assurer une compatibilité des sites pour les smartphones, le navigateur est configuré avec une résolution plus grande que celle de l’écran. Ainsi le site s’affiche pour une résolution plus grande ce qui oblige l’utilisateur a zoomer. La configuration se fait via la balise meta viewport.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Pour en savoir plus, je vous conseille l’article Comprendre le Viewport dans le Web mobile d’Alsacreations.

Maj du 1er Novembre 2012 :
Il est maintenant possible de déclarer le viewport directement en CSS via la directive @viewport.

@viewport{ 
    width: device-width; 
    zoom: 1; 
}

Pour en savoir plus, je vous invite à lire l’article Utilisez @viewport pour le Responsive!

Exemples

Voici une petite liste d’exemples qui montre la puissance des media queries :

  • L’exemple typique : Un gabarit de site qui s’adapte à la résolution du navigateur (exemple issus du site Alsacreations)
  • Des exemples plus originaux :
    • Santa’s Media Queries : le nombre des membres de la famille Simpson diminue avec la résolution
    • Too many fish is the sea : Le nombre de poisson diminue avec la résolution avec une animation (fonctionne seulement sous Firefox)
    • CSS3 Cherry Blossom : Animation de floraison d’un arbre lors de l’agrandissement de la résolution.

Liens

Voici quelques liens/ressources qui m’ont servi pour cet article :

Conclusion

L’utilisation des media queries permet d’adapter facilement un site à différents médias. Il est ainsi possible d’adapter votre site en fonction de la résolution, l’orientation, l’aspect ratio, … afin que ce dernier soit utilisable quelque soit le terminal (ordinateur, smartphone, tablette, TV, ..) sans pour autant modifier le code HTML. Il faut bien prendre en compte ce dernier point. En effet, si les fonctionnalités de la version mobile sont beaucoup plus réduites, il sera plus performant d’avoir une version dédiée à ces supports afin de ne pas charger un trop grand nombre d’éléments inutiles.
Le support des Media Queries est bon pour les navigateurs modernes mais peut poser problème sur les anciennes versions (IE 6/7/8, Firefox < 3.5, Safari 2 notamment). Il existe des solutions (polyfills) afin d’utiliser cette technologie sur les navigateurs non compatibles comme les librairies JavaScript Respond.js ou Enquire.js.

JavaScript : les nouvelles méthodes sur l’objet Array apportées par EcmaScript 5

JavaScript,

JavaScript est souvent critiqué concernant la pauvreté de son langage. Mais le langage évolue et rajoute de nouvelles fonctionnalités à chaque version d’EcmaScript. La version 5 apporte pas mal de nouveautés concernant les tableaux (Array). Faisons un peu le tour des nouvelles méthodes disponibles.

indexOf

Cette méthode permet de retourner l’index du premier élément du tableau correspondant à l’objet passé en paramètre. Il retourne -1 si l’objet n’existe pas.

var fruits = ["pomme", "banane", "poire", "pomme"];

fruits.indexOf("pomme"); // 0
fruits.indexOf("kiwi"); // -1

La référence de indexOf sur le MDN

lastIndexOf

Cette méthode permet de retourner l’index du dernier élément du tableau correspondant à l’objet passé en paramètre. Il retourne -1 si l’objet n’existe pas.

var fruits = ["pomme", "banane", "poire", "pomme"];

fruits.lastIndexOf("pomme"); // 3

La référence de lastIndexOf sur le MDN

forEach

La méthode forEach permet d’appeler une fonction pour chaque élément d’un tableau. Cette fonction a 3 paramètres :

  • element : la valeur de l’élément courant
  • index : l’index de l’élément courant
  • array : le tableau lui-même.
function logArrayElements(element, index, array) {
    console.log("a[" + index + "] = " + element);
}
[2, 5, 9].forEach(logArrayElements);
// a[0] = 2
// a[1] = 5
// a[2] = 9

La référence de forEach sur le MDN

every

La méthode every permet de vérifier si une condition est vérifiée par tous les éléments du tableau. Cette condition est exprimée par une fonction qui retourne true ou false.

var arr = [2, 4, 6, 8];
 
arr.every(function (value, index, array) { return value % 2 === 0; }); // true
arr.every(function (value, index, array) { return value % 3 === 0; }); // false

La référence de every sur le MDN

some

La méthode some permet de vérifier si au moins un élément d’un tableau satisfait une condition.

var arr = [2, 4, 6, 8];
 
arr.some(function (value, index, array) { return value % 2 === 1; }); // false
arr.some(function (value, index, array) { return value % 3 === 0; }); // true

La référence de some sur le MDN

map

La méthode map permet de créer un nouveau tableau dont les éléments sont retournés par une fonction appelée sur chaque élément du tableau source.

var numbers = [1, 2, 4];

numbers.map(function (value, index, array) {
  return value + 1;
});
// [2, 3, 5]

La référence de map sur le MDN

filter

La méthode filter permet comme map de créer un nouveau tableau dont les éléments sont filtrés suivant une fonction conditionnelle. Seulement les éléments satisfaisant la condition seront présents dans le tableau résultat.

var numbers = [1, 2, 4];

numbers.filter(function (value, index, array) {
  return value % 2 === 0;
});
// [2, 4]

La référence de filter sur le MDN

reduce

La méthode reduce permet de calculer une valeur à partir des éléments du tableau. La fonction de calcul est appelée pour chaque élément et prend en entrée les paramètres suivants :

  • accum : la valeur courante de la valeur à retourner
  • value : l’élément courant
  • index : l’index de l’élément courant
  • array : le tableau lui même
[1, 2, 3, 4, 5].reduce(function (accum, value, index, array) {
  return accum + value;
});
// 15

Lors de la première itération, accum vaut le premier élément du tableau et value vaut le 2ème élément. Dans notre exemple ci dessus, lors de la première itération, accum vaudra 1 et value 2.

Il est également possible de passer en 2eme paramètre à reduce une valeur initiale. De cette façon, lors de la la première itération, value vaudra 1 et accum la valeur initiale.

["ribery", "valbuena", "lloris", "benzema"].reduce(function (accum, value, index, array) {
  return accum + value.length;
}, 0);
//27

La référence de reduce sur le MDN

reduceRight

La méthode reduceRight fonctionne de la même façon que reduce à l’exception que l’ordre d’appel des éléments du tableau est inversé.

La référence de reduceRight sur le MDN

Polyfill

Bien entendu, ces méthodes étant récentes, celles-ci ne sont pas disponibles dans les navigateurs plus anciens. Si vous devez assurer la compatibilité avec les anciennes versions, il existe des polyfill, qui permettent d’ajouter ces nouvelles méthodes :

Références

JavaScript : Coder en mode strict

JavaScript

JavaScript est un langage permissif. En effet, certaines pratiques qui entraîneraient des erreurs dans d’autres langages sont permises en JavaScript comme :

  • ne pas mettre de ; en fin de ligne
  • la non déclaration d’une variable avant une affectation
  • la fonction eval qui permet d’interpréter du code générer à la volée (avec le célèbre « eval is evil »)
  • …

Ces fonctionnalités peuvent être pratique mais sont souvent source d’erreur.

La norme EcmaScript (langage dont JavaScript est une implémentation) 5 a introduit ce qu’on appelle le mode strict qui permet de générer une erreur dans un certains nombre de cas afin d’avoir un code plus propre, maintenable tout en étant compatible avec les versions précédentes d’EcmaScript (il est toujours possible de ne pas mettre de ; en fin de ligne).

Activation du mode Strict

"use strict";
//Mon code en mode strict

Avec un closure pour être plus propre :

(function() {
  "use strict";
  //Mon code en mode strict
  var x = 0;
  var maFunction() { ... }
})();

La portée du mode strict dépend du contexte. S’il est déclaré dans un contexte global (hors de la portée d’une fonction), tout le code du programme est en mode strict. S’il est déclaré dans une fonction, tout le code de la fonction est en mode strict.

Exemple

Voici un exemple de 2 div dont le contenu est modifié par du code JavaScript, un en mode strict et l’autre non. Dans les 2 codes, il manque le mot clé var devant la déclaration de la div (div1 ou div2).

<div id="div1">Ce contenu n'est pas modifié car le code n'est pas valide "strict mode"</div>
<div id="div2">Ce contenu est modifié car le code n'est pas en "strict mode"</div>

<script>
//Avec Mode Strict
(function() {
	"use strict";
	div1 = document.getElementById('div1');
	div1.innerHTML = 'Test mode stict';	
})();
</script>

<script>
//Sans Mode Strict
(function() {
	div2 = document.getElementById('div2');
	div2.innerHTML = 'Test mode stict';	
})();
</script>

On peut ainsi voir que le code en mode strict génère une erreur « Uncaught ReferenceError: div1 is not defined »(ci-dessous dans la console de Chrome). Sous firefox, l’erreur est « ReferenceError: assignment to undeclared variable div1 ». Le code sans mode strict s’est lui bien exécuté.

Affichage d'une erreur dans le débuggeur Chrome

Restriction du mode strict

Je vous renvoie vers la page MSDN sur le mode strict qui référence les principales restrictions de ce mode.

Liens

Les outils de validation comme JSLint (dont j’ai parlé précédemment) ou JSHint (fork de JSLint) contiennent une règle permettant de vérifier l’activation de ce mode (cette règle est désactivable) ainsi que les règles associées à ce mode strict.

Conclusion

L’utilisation du mode strict est un moyen de d’améliorer la qualité de son code afin de le rendre plus maintenable et évolutif. Il est à noter que IE ne gère ce mode que depuis la version 10.

Sélection et utilisation d’une police de Google Web Font

CSS, Developpement Web, Web,

Pour faire suite à l’article précédent concernant les font web, je vais revenir un peu plus en détail sur l’utilisation d’une police web en utilisant le service Google Web Fonts.

La première chose à faire est de se rendre sur le site de Google Web Fonts afin de sélectionner la ou les polices que vous souhaitez utiliser.

La page est composée de plusieurs parties :

  • Une partie centrale qui permet la comparaison des polices disponibles avec 4 modes :
    • Word : Comparaison par mot
    • Sentence : comparaison par phrase
    • Paragraph : comparaison par paragraphe
    • Poster : Affichage sous forme de « poster »

    Pour chaque mode, il est possible de configurer la taille, le texte (sauf en mode poster où le nom de la police est affichée) et le tri (popularité, date d’ajout, …).

  • Une zone de filtre sur la gauche
  • Une zone de gestion de votre collection de police. En effet, Une fois que vous avez trouvé la police qui vous plaît, il suffit d’ajouter la police à votre collection.

Page d'accueil de Google Web FontPour chaque police, plusieurs actions sous forme de liens/boutons :

  • Un lien qui ouvre la page d’explication permettant d’utiliser la police. Cette page est décrite dans la partie Use/Utilisation ci-dessous.
  • un lien permet d’accéder à la page concernant la police affichant les informations (description, auteur, licence), des exemples de texte utilisant la police et la liste des caractères de la police.
  • Le bouton d’ajout/suppression de la collection

Affichage d'un police dans Google Web FontVoyons comment gérer votre collection et les actions possibles.

Review / Comparaison

Une fois votre sélection effectuée, vous pouvez comparer les polices sélectionnées. Plusieurs modes de comparaisons sont disponible :

  • Specimen: 2 modes
    • Headline : Affiche les différents niveaux de titre avec la police
    • Paragraph : Affiche un paragraphe avec différentes tailles pour la police
  • Styles : Comparaison, pour une phrase donnée des différentes variantes d’une police (italique, gras, …)
  • Test Drive : Utilisation des polices dans le cadre d’une page d’exemple
  • Character Set : Comparaison cote à cote des caractères disponibles
  • Compare : Comparaison de 2 police l’une sur l’autre
  • Description : Affichage des informations (description, licence, auteur) de chaque police
Google Web Font : Comparaison en mode Specimen
Comparaison en mode Specimen
Google Web Font : Comparaison en mode Styles
Comparaison en mode Styles
Mode Test Drive de Google Web Font
Utilisation des polices dans une page test
Google Web Font : Comparaison en mode Character Set
Comparaison en mode Character Set
Google Web Font : Comparaison en mode Compare
Comparaison en mode Compare
Google Web Font : Comparaison en mode Description
Comparaison en mode Description

Use / Utilisation

La page est composée de plusieurs blocs :

  • une partie qui permet de sélectionner les polices de la collection à utiliser.
  • Sélection des jeux de caractères à inclure (latin, latin étendu, cyrillique, …)
  • Le code à utiliser pour inclure les police dans votre page. Il y a 3 façons d’inclure les polices : Link, @import et JavaScript.
  • Un exemple de code CSS pour l’utilisation de chaque police.

Google Web Font : Page d'explication de l'utilisation de polices

Divers

Il est à noter qu’il est possible de télécharger les polices de votre collection et d’enregistrer une collection sous la forme d’un marque page, ce qui peut être utile afin de sauvegarder/partager une collection.

Conclusion

Google met à disposition avec Google Web Fonts un outil complet et simple afin d’utiliser les polices web. Cela permet de facilement personnaliser un site web.
Adobe vient de sortir Adobe Edge Web Fonts, une alternative gratuite à Google Web Fonts, se basant sur typekit, la solution de web fonts payante d’Adobe.