Archives par mot-clé : HTML5

Outils CSS3 – HTML5 – JavaScript : Episode 9

CSS, Developpement Web, JavaScript, , ,

Au menu, des liens, des outils, des présentations … sur HTML, CSS et JavaScript.

Talks

Voici quelques présentations que j’ai beaucoup appréciées :

HTML

CSS

  • Pure : Un framework CSS (gère le responsive)
  • Responsive Web Design
  • PlentyofFrameworks : trouver le framework CSS qui vous convient
  • Enjoycss : éditeur de composant CSS
  • CSSShake : Une feuille de style pour secouez vos éléments
  • Style Guide guide : site regroupant des générateurs de style guide (guide d’utilisation de vos style (un exemple))
  • CSS Values : permet de rechercher une propriété CSS pour facilement connaître son utilisation et les valeurs possibles
  • Bounce.js : un générateur d’animation CSS 3
  • CSS Stats : Statistique concernant CSS (nb de sélecteurs, couleurs, …) d’un site
  • Critical Path CSS Generator : Générateur de Critical Path. Critical Path est une technique qui consiste à injecter, directement dans votre code HTML(inline, dans le header) le code CSS minimal afin d’accélérer la vitesse de rendu de votre page. Le reste du code CSS est à charger via des fichiers CSS classique en fin de page. Cet outils permet d’extraire le code CSS à injecter en fonction d’une page.
  • Flexplorer : un générateur et outils de test de flexbox
  • une cheatsheet sur la propriété flexbox en css3

JavaScript

Divers

Outils CSS3 – HTML5 – JavaScript : Episode 8

CSS, Developpement Web, JavaScript, Web, , , ,

Html

  • Une liste d’articles sur l’utilisation d’Emmet(part 1, 2, 3 et 4) (mon article de présentation d’Emmet qui s’appelait à l’époque Zen coding) Toujours sur le même sujet, une cheat sheet de emmet assez complète.
  • Un article qui présente l’api de vibration
  • Responsinator : Permet de visualiser le rendu d’un site en mode responsive sur différents terminaux (iPhone 3/4, iPhone 5, iPad, Android, …) en portrait et paysage. Un exemple avec mon site.

CSS

  • Spinkit : Animations d’attente en CSS3
  • Myth : Myth is a preprocessor that lets you write pure CSS without having to worry about slow browser support, or even slow spec approval. It’s like a CSS polyfill.
  • CSS Zen Garden : La nouvelle version HTML5 Zen Garden.
  • lesshat.com : collection de mixins less
  • extractCSS : permet d’extraire les styles inlines d’un code HTML
  • Stitches : un générateur de Sprites
  • CSS Animate : Outil de génération d’animations CSS

JavaScript

Divers

Outils CSS3 – HTML5 – JavaScript : Episode 7

CSS, Developpement Web, JavaScript, Web, , ,

L’épisode 7 des outils liés aux technologies du web …

JavaScript

  • Une liste de plugins essentiels JQuery
  • jsdb.io : Un site qui répertorie les librairies JavaScript regroupés par thèmes avec recherche.
  • SnapSvg : une librairie pour gérer du SVG. Créée par Adobe (qui s’y connaît en vectoriel) en open-source, un des principaux développeurs est le concepteur de la librairie Raphael.js, une autre librairie qui permet de gérer du SVG.
  • Un article concernant la détection et l’avertissement lors d’une déconnexion d’un utilisateur
  • Normes de codage JS de airbnb (le site de réservation d’appartement entre particuliers)

CSS

  • Topcoat : une librairie CSS par adobe
  • Create CSS3 : Un générateur de règles CSS (assez complet, support des préfixes)
  • Koala : Une interface pour générer du CSS à partir de  LESS/SASS/Compass et du JavaScript à partir de CoffeeScript. Compatible Windows, Linux et Mac

HTML

  • Un très bon article sur sitepoint.com concernant la géolocalisation.
  • Real favicon generator : générateur de favicon (image représentant un site. Permet de générer également des icons pour Win 8, tablettes (iOS, Android, Windows Phone).
  • Ionicons : la police d’icône du framework ionic, pour créer des applications mobile en HTML5.
  • Runnable.com : permet de rechercher du code et de le tester (compatible avec pas mal de technos web (PHP, .NET, Ruby, NodeJs, …)
  • Une très bonne présentation (en anglais) sur l’automatisation de la partie front d’un projet
  • Un très bon article sur le Responsible Web design avec une boite à outils

HTML 5 : LocalStorage et SessionStorage

Developpement Web, JavaScript, , , ,

HTML5 apporte plusieurs solutions concernant la sauvegarde de données coté client :

  • Web SQL database (qui n’est plus maintenue par le W3C)
  • IndexedDB
  • Local storage et session storage
  • HTML5 File API

Nous allons parler dans cet article de Local storage et session storage qui permettent de sauvegarder coté client des données sous forme clé/valeurs au format texte. La différence entre les 2 est la durée de conservation des données stockées :

  • LocalStorage : pas de limite de temps. Conservé à la fermeture de la page/navigateur.
  • SessionStorage : données conservée seulement le temps d’une session. Cela peut être utile pour partager des infos entre 2 onglets sur le même site, formulaire multi-page.

Ces 2 stores permettent de s’affranchir des limitations des cookies puisqu’on peut sauvegarder 5 Mo au lieu de 4Ko.

Les 2 stores partagent la même interface (api) avec les méthodes suivantes :

  • getItem : Permet de récupérer une valeur via sa clé
  • setItem : Permet de mettre a jour une valeur via sa clé
  • removeItem : Permet de supprimer un item via sa clé
  • clear : Supprime toutes les items du store
  • length : Nombre d’items du store
  • key(n) : retourne la clé à l’index n (null si pas de résultats)

LocalStorage et SessionStorage étant des tableaux, vous pouvez également utiliser les syntaxes suivantes : 

window.localStorage.maCle //--> renvoie la valeur associée à la clé maCle
window.sessionStorage["maCle"] //--> renvoie la valeur associée à la clé maCle

Afin d’illustrer cet article, j’ai utilisé le localStorage sur ma page de gestion d’un match de volley que j’avais déjà évoquer dans des articles précédents :

Le LocalStorage va nous permettre de sauvegarder et visualiser les résultats des matchs précédents et sauvegarder les noms des dernières équipes utilisées.

Voici les fonctions qui vont permettre de récuperer et sauvegarder le nom des équipes dans le localStorage :

var getTeamName = function(nb) {
    var storage = window.localStorage;
    //Verifie si navigateur compatible localStorage et si il y a une valeur
    if (storage && storage.getItem('Team' + nb)) {
            return storage.getItem('Team' + nb);
    }
    //On retourne une valeur par défaut
    return "Equipe " + nb;
};

var saveTeamName = function(nb, value) {
    var storage = window.localStorage;
    //Verifie si navigateur compatible localStorage
    if (storage) {
        storage.setItem('Team' + nb, value);
    }
};

On ne peut sauvegarder que du texte. Mais il possible de sauvegarder des objet au format JSON. Nous allons ainsi sauvegardés la liste des matchs sous la forme d’un tableau qui sera sérialisé en JSON. 

var storage = window.localStorage;
var saveGame = function (game) {
    var savedGames;
    if (storage) {
        savedGames = JSON.parse(storage.getItem('games')) || [];
        savedGames.push(game);
        storage.setItem('games', JSON.stringify(savedGames));
    }
},
getSavedGames = function () {
    if (storage) {
        return JSON.parse(storage.getItem('games')) || [];
    }
};

Et voila. Vous pouvez voir le résultat ici.

Outils

Les barres de développeurs permettent de consulter les données enregistrées. Voyons comment visualiser ces données sous Chrome et Firebug (voir les références pour un les autres navigateurs).

Sous Chrome, il faut aller dans l’onglet Resources / LocalStorage (ou SessionStorage).

LocalStorage dans Chrome

Sous Firebug, il faut aller dans l’onglet DOM, et regarder dans l’objet LocalStorage.
LocalStorage dans Firebug

Références

Quelques liens utiles :

Conclusion

Le localStorage/SessionStorage est très facile à mettre en œuvre et peut s’avérer très pratique afin d’améliorer les possibilités d’un site/application web. Pour ne rien gâcher, ils sont très bien supportés (même IE8 le supporte !!!) donc utilisable en production.

HTML 5 : Debogage du mode offline

Developpement Web, , , ,

J’ai abordé dans un article précédent la gestion du mode offline en HTML 5.

Voyons comment débugger un site avec une gestion du mode offline.

Chrome

Comment souvent, c’est la barre d’outils de Chrome qui s’avère la plus efficace pour déboguer. Sous Chrome, les événements liés à la mise à jour du cache sont affichés dans la console. On peut ainsi voir la liste des fichiers qui sont téléchargés pour être mis en cache.

Mise à jour du cache applicatif dans Chrome

2 petite précisions qui ont leur importance :

  • Ne mettez pas le manifest lui-même en cache où il sera impossible au navigateur de savoir qu’une nouvelle version est disponible.
  • Comme le document a déjà été chargé dans le navigateur à partir du cache, la nouvelle version ne sera affichée qu’après rechargement (manuel ou via programmation). (cf abonnement à l’événement updateready ci-dessous)

 

//Méthode appelée apres mise à jour du cache
function onUpdateReady() {
  alert('Nouvelle version chargée!');
}
//on s'abonne à l'événement de mise à jour du cache
window.applicationCache.addEventListener('updateready', onUpdateReady);
if(window.applicationCache.status === window.applicationCache.UPDATEREADY) {
  onUpdateReady();
}

La console affiche les fichiers en erreurs. Il faut savoir que si il y a une erreur, le cache n’est pas mis à jour.

Erreur lors de la mise à jour du cache applicatif

La liste des ressources en cache peut être visualiser dans la barre d’outils > Ressources > Application Cache.

Visualisation du cache applicatif dans l'onglet Ressources

Il est également possible de vider le cache en se rendant à l’URL chrome://appcache-internals/. Cette page permet de visualiser la liste des sites ayant des données dans l’application cache. Pour chaque site, il est possible de visualiser la liste des fichiers (View Entries) et de supprimer le cache (Remove).

Gestion du cache applicatif de tous les sites dans Chrome

Autres Navigateurs

Afin de débugger plus facilement, voici un script à placer sur votre site qui va logger dans la console les événements liés au cache et simule une mise à jour toutes les 10s.

Dans Firebug, il est possible de consulter, dans l’onglet DOM, l’objet ApplicationCache mais il est toujours vide !!!

Ressources

HTML 5 : Quelques nouvelles balises

Developpement Web

La plupart d’entre vous doivent connaître les balises les plus connues rajoutés dans HTML 5 comme header, footer, article, section, aside, nav, video, audio, …

Je vais vous présenter dans cet article des balises/attributs moins connus mais tout aussi utiles.

Nouveaux type d’input

Commençons avec les nouveaux types d’input disponible :

  • tel,
  • email,
  • search,
  • number : max min, …
  • date, time, datetime, month et week
  • range
  • color
  • url

Ces nouveaux input permettent d’avoir des contrôles spécialisés pour les types de données les plus standards. Il faut savoir que si ces nouveaux champs ne sont pas supporté, ils seront affiché comme de simple champs texte.
N’hésitez pas à utiliser l’attribut required qui permet de facilement définir un champs requis, l’attribut placeholder pour indiquez un texte de description de votre champs, et les règles de validations. Le navigateur bloquera automatiquement l’envoi du formulaire si une règle n’est pas respectée. Les navigateurs mobiles supportent très bien ces nouvelles balises et affichent ainsi des modes de saisie adapté à chaque type de contrôle.

Liens

Vous devez sûrement connaître les liens mailto qui permettent de lancer votre client mail avec des informations prédéfinies (destinataires, sujet, …).
Sachez qu’il en existe des nouveaux :

  • tel:0612345678 : effectuer un appel
  • sms:0612345678 : envoyer un sms
  • skype:echo123?call : lancer un chat skype avec echo123
  • skype:echo123?chat : lancer un appel avec echo123

Progress & Meter

A première vue identique, les éléments progress et meter ont 2 sémantique différentes :

  • progress : permet d’indiquer une progression (exemple : upload de fichier / avancement dans des étapes d’un formulaires, …)
  • meter : permet de représenter une valeur dans un intervalle défini (ex : espace utilisé sur un disque, température, …). A la différence de progress, il est possible de définir une valeur min qui peut être négative, ainsi que des valeurs de limite (low, high et optimum)

Vous pouvez bien entendue interagir avec ces balises via JavaScript comme modifier leur valeur.

Avancement : <progress value="70" max="100">70 %</progress>
Température : <meter low="35" optimum="37.2" high="39" value="37.1">37.1 °C</meter>

Une présentation de ces 2 balises sur alsacréations avec des exemples permettant de styler ces éléments.

Output

Vous connaissez tous les éléments input qui permettent de créer entrées de formulaires. Sachez qu’une balise output a été rajouté en HTML 5. Cette balise a pour but d’afficher un résultat ou d’une sortie (via JavaScript ou serveur).  On peut s’en servir pour afficher le résultat d’un calcul de prix par exemple. Il faut savoir que la valeur du champs sera envoyé au serveur dans le cas ou l’élément se trouve dans un formulaire.

<output name="totalPrice"></output>

Details

La balise details permet de générer des blocs rétractables. Cette balise contient une sous balise summary qui est le texte qui sera toujours affiché et qui permet d’afficher / masquer le contenu.

<details> <summary>Show/Hide me</summary>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</details>

Le support de cette balise est encore faible (non suporté par IE et Firefox notamment).

Présentation sur HTML5 Doctor et support sur CanIUse

DataList

La balise datalist est une nouvelle balise qui permet de définir une liste de valeurs qui seront disponible en auto complétion sur une balise input (l’association à la liste se fait via l’attribut list sur l’élément input).
Attention, l’utilisateur peut renseigner une valeur non présente dans la liste mais il est possible de le contrôler via JavaScript.

<input type="text" list="browsers" />

<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Internet Explorer"></option>
  <option value="Opera"></option>
  <option value="Safari"></option>
</datalist>

Une Présentation des datalists et quand les utiliser sur le magasine MSDN

Liens

Outils CSS3 – HTML5 – JavaScript : Episode 5

Developpement Web, , ,

Divers

  • overapi.com : une liste de cheatsheet pour pratiquement chaque technos/librairies …enfin presque
  • The Code Player est un site qui permet d’apprendre des techniques HTML5/CSS/JavaScript en vidéo interactives. Le code apparaît en live à gauche et la partie droite affiche le résultat de ce code.
  • Ressource Modern UI : Une liste de ressources concernant l’interface Modern UI de Windows 8.

JavaScript

  • FooTable : un plugin JQuery qui permet des tableaux responsives pour gérer l’affichage sur des téléphones, tablettes et desktop.
  • JQuery Enable Disable Plugin : Un plugin qui permet d’activer / désactiver des éléments de formulaire en fonction d’un autre élément (case à cocher, radio bouton ou listbox)
  • cdnjs.com : Un CDN avec une liste impressionnante de librairies disponibles
  • multiselect : Une librairie qui permet de transformer un select multiple en 2 listes
  • JSLint errors ou JSHintErrors pour avoir les explications concernant une erreur JSLint ou JSHint (validateur de code JavaScript).

CSS

Outils CSS3 – HTML5 – JavaScript : Episode 4

CSS, Developpement Web, JavaScript, Web, ,

HTML

Savez-vous qu’il est possible d’utiliser des caractères Unicode en tant qu’icône. Voici un tableau des différentes Icones web Unicode.

CSS

Les sélecteurs CSS

On retient souvent dans les nouveautés CSS3 ce qui concerne l’affichage (transformation, gradients, …) mais de nouveaux sélecteurs puissants ont également été introduits (:nth-child(expression), :contains(value), :checked, …). Voici un article qui explique les différents sélecteurs en CSS3 et une librairie selectivizr qui permet de supporter ces sélecteurs dans IE de la version 6 à 8.

Framework CSS

  • KNACSS : développé par Alsacréations
  • Ratchet : Un framework dédié au mobile. Idéal pour du prototypage.

Outils CSS

Divers

2 articles sur Smashing Magazine concernant des techniques JS/CSS qui peuvent s’avérer utiles (le premier et le deuxième). Voici 2 techniques/outils qui ont retenus mon attention :

JavaScript

Fuites Mémoires

Google a sorti Leak Finder un outil JavaScript open source pour trouver les fuites de mémoire dans vos applications

Framework MVC

TodoMVC : comparateur de framework JS MV*(M ou VM). Une application de gestion de tache (todo list) est implémentée avec différents framework (angular, ember, blackbone, knockout, …). A vous de choisir en fonction du type de la philosophie à adopter pour votre projet; Cela permet de comparer le code et d’avoir des bonnes pratiques pour débuter.

LINQ Pour JavaScript

Ceux qui travaillent dans le monde .NET doivent probablement connaitre LINQ qui est une technologie qui permet de requéter des sources de données hétérogène (base de donnée, objet, fichier XML, …). Il existe plusieurs librairies JavaScript qui permette d’effectuer des requêtes LINQ sur des objets JSON :

Librairies

Quelques librairies qui peuvent s’avérer pratique :

Jster : Catalogue de librairie JavaScript (plus de 750 à l’heure actuelle)

Mobilité

10 outils pour le Web mobile sur Alsacreations

HTML5 : Gestion du Offline

Developpement Web,

Une des nouveautés apportées par HTML5 est le support du mode Offline. Ainsi, vous allez pouvoir utiliser un site sans être connecté à Internet, en ayant préalablement visité ce site bien entendu.

Manifest

La gestion du offline se fait via l’utilisation d’un fichier Manifest. Ce fichier va décrire les fichiers à garder en mémoire pour une utilisation ultérieure en mode offline.

Ce fichier est composé de 3 parties :

  • CACHE : la liste des fichiers à mettre en cache
  • OFFLINE : la liste des fichiers à mettre en cache pour une utilisation en mode déconnecté
  • NETWORK : les fichiers à ne charger qu’en mode connecté.

Déclaration du manifest

La déclaration du fichier se fait dans la balise html de votre page. Dans le cas de mon article sur l’utilisation de Knockout, j’avais développé une page permettant le support du mode offline. Voici la déclaration du fichier manifest de la page (volley.manifest)

<html manifest="volley.manifest">

Voici le fichier manifest (j’ai mis des fichiers pour les parties OFFLINE et NETWORK pour exemple). (l’utilisation du # permet de mettre une ligne en commentaire)

CACHE MANIFEST

# v0.1.0.3

CACHE:
volley.html
include/style.css
include/ics.css
include/volley.svg
include/knockout-2.0.0.js
include/jquery-1.7.1.min.js

FALLBACK:
#liste des fichiers à ne charger qu'en mode offline
include/offline.js

NETWORK:
#liste des fichiers à ne charger qu'en mode connecté
include/network.js

On peut noter la présence d’un numéro de version du fichier manifest. En effet, lors de la modification d’un des fichiers du cache, seulement une modification du fichier manifest permettra la mise à jour du fichier modifié. Une des pratiques consiste à mettre un numéro de version que l’on incrémentera à chaque mise à jour afin que les fichiers soit remis à jour dans le cache navigateur.

Détection via JavaScript

Il est également possible de détecter l’état de la connexion en JavaScript. Ainsi on pourra détecter une déconnexion/perte de réseau et adapter le comportement. Cela peut se révéler pratique notamment en contexte mobile.

La détection se fait via une propriété onLine sur l’objet navigator. Des événements online et offline (la documentation sur le MDN) sont également émis à chaque connexion/déconnexion. Attention toutefois, sur un ordinateur, cet événement n’est émis que si on passe on mode « Travailler hors connexion ». Il existe des techniques permettant la détection dans ce cas précis. Pour en savoir plus, je vous invite à lire l’article Application hors-ligne HTML5 – le JavaScript

Ressources

Zen Coding devient Emmet

CSS, Developpement Web, Web, ,

Quelques jours après la publication de mon article concernant Zen Coding, j’apprends que le projet change de nom et devient Emmet. Ce changement de nom est également synonyme de nouvelle version qui apporte quelques nouveautés (la liste complète des nouveautés) dont :