Dareboost

AppId is over the quota
AppId is over the quota

Dareboost se présente comme un site d'analyse et conseil en performance et qualité web.

C'est un outil d'audit en ligne comme il en existe d'autres, mis à part que celui-ci dispose de nombreux atouts qui le différencient de ses confrères, notamment en regard de son périmètre très large :

Performances d'affichageValidation / Compatibilité navigateursAccessibilitéBonnes pratiques SEOBonnes pratiques jQuery / JavaScriptConseils côté serveur et durée de cacheetc.

Et surtout : l'outil est gratuit (et le restera) et il est français !

Certains conseils et certaines évaluations méritent encore toutefois d'être un peu plus explicites pour le commun des mortels, mais dans l'ensemble il s'agit d'un très bon point de départ pour dégrossir les principaux points de progrès de votre site web.

Attention, Dareboost est encore en version beta et n'est pas complètement exempt de bugs ou d'anomalies, cependant leurs auteurs sont plutôt ouverts au dialogue et prompts à corriger les défaillances de l'outil.
Si le coeur vous en dit, un Forum / FAQ est d'ailleurs à votre disposition pour faire évoluer ce produit. Notez, par exemple, qu'une version d'audit pour sites mobiles est prévue dans les tuyaux :)

Soutenons La Quadrature du Net

AppId is over the quota
AppId is over the quota

Comme vous le savez peut-être déjà, un nouvel appel à soutenir La Quadrature du Net vient d'être lancé, afin de permettre de financer les 5 permanents pour suivre au quotidien un nombre croissant de dossiers.

Avec les révélations sur l'espionnage massif et généralisé des citoyens, l'article 13 du Projet de loi relatif à la programmation militaire, les négociations de l'accord commercial US-UE, et de nombreuses autres menaces, nous sommes aujourd'hui face à des choix cruciaux pour l'avenir de nos sociétés : surveillance ou vie privée ? Neutralité du Net ou discrimination de nos communications ? "Copywrong" malade attaquant le public, ou réforme du droit d'auteur consacrant nos pratiques culturelles ? Ces choix auront un impact radical sur notre rapport aux technologies, au pouvoir, et sur la société dans son ensemble. Nous le savons tous. Nous savons aussi que, sans une action résolue des citoyens, les pouvoirs politiques et économiques en place vont suivre leur ligne de plus forte pente, celle qui conduit vers le pire.

La défense et la reconstruction d'un Internet libre et ouvert à tous ne se fera que si des organisations indépendantes de tout intérêt privé ou gouvernemental comme La Quadrature du Net peuvent y apporter leur contribution. L'action en toute indépendance de La Quadrature ne peut continuer que grâce au soutien de citoyens, et ce message a besoin d'être relayé.

Pauline Briand.

Prepros

AppId is over the quota
AppId is over the quota

Prepros est un "environnement de travail" (workflow) graphique destiné aux projets d'intégrations HTML et CSS basés sur des préprocesseurs tels que LESS, Sass/Compass et Stylus.

Ce logiciel est OpenSource (licence MIT), disponible sur Windows et Mac, gratuit dans sa version de base (largement suffisante), et offre de nombreuses fonctionnalités d'optimisations et d'automatisations.

Prepros compile automatiquement les langages LESS, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, LiveScript, Haml et Markdown. Rien que ça.

Vous pouvez choisir le format de sortie du fichier CSS, à savoir : normal, compact ou minifié.

De plus, l'outil dispose de gestions de logs et d'erreurs assez pratiques.

Prepros offre la possibilité de compresser les images de votre projet (JPG, PNG, GIF). À noter toutefois que l'outil d'optimisation d'images est manuel (image par image) et ne vaut pas les ténors dans le domaine même s'il est déjà très bon.

Prepros minifie et concatène (réunit) les divers fichiers JavaScript pour n'en obtenir qu'un en production.

Inutile de vous soucier des préfixes constructeurs (-moz-, -webkit-, etc.) car l'outil peut s'en charger automatiquement pour vous. 

Et il le fait très intelligemment puisqu'il reconnaît même les anciennes syntaxes de propriétés afin de les rendre compatibles multi-navigateurs (par exemple pour les dégradés CSS3 ou les différentes versions du module flexbox).

Associé à une extension Chrome, Prepros offre la possibilité d'afficher en ligne son projet et surtout de voir rafraîchir la page automatiquement.

Il est également possible de tester sur mobiles et tablettes grâce au serveur intégré et à l'adresse IP qui est communiquée par l'outi.

Cette dernière fonctionnalité (réservée à l'offre payante - 19USD) permet de transférer tous les fichiers, ou uniquement ceux modifiés, vers un serveur FTP.

Au final, Prepros est un environnement de travail particulièrement pratique : il suffit d'enregistrer votre fichier pur qu'il soit automatiquement compilé, préfixé, minifié, mis en ligne et rafraîchi dans le navigateur !

D'autres outils de ce type existent : CodeKit (Mac uniquement) et Mixture.io.

Si vous connaissez déjà l'un de ces outils, n'hésitez pas à partager votre expérience ici.

Bower pour les nuls (comme moi)

AppId is over the quota
AppId is over the quota

Vous êtes intégrateur ou développeur front-end ? Vous avez envie de vous faciliter la vie tout en étant quelque peu allergique à la ligne de commande (un peu comme moi en fait) ?

Vous adorez votre job mais vous croulez sous le nombre de tâches répétitives qui vous empêchent de vous concentrer sur votre coeur de métier ?

Alors sachez que Bower fait partie d'une panoplie de services de nouvelle génération destinés à automatiser un maximum de tâches à votre place. Le but de cet outil développé par l'équipe de Twitter est de gérer les dépendances de votre projet.

Laissez-moi deviner : lorsque vous débutez un nouveau projet, votre première tâche est de créer (ou de copier-coller) l'arborescence de vos fichiers et dossiers.

Votre mission suivante est d'aller visiter un par un les outils incontournables pour votre projet : jQuery, Modernizr, Bootstrap, etc. et d'installer les nouvelles versions de ces outils… ou alors de mettre à jour vos propres modules les uns après les autres.

Avouez que vous gagneriez du temps à ne plus vous soucier de ce genre de tâches répétitives quotidiennes.

Eh bien figurez-vous que ça tombe bien : tous les outils tels que jQuery, Modernizr ou Bootstrap sont des dépendances que Bower va vous aider à installer en une ligne de code !

La liste des dépendances inscrites dans le registre de Bower est pour le moins impressionnante, et parmi lesquelles vous trouverez un bon nombre de célébrités :

Twitter BootstrapjQueryhtml5boilerplatefont-awesomemodernizrhtml5shivnormalizejQuery mobilegruntpurecssrespondraphaelzeptophonegapyepnope… knacss

Deux pré-requis sont nécessaires au bon fonctionnement de Bower :

Node.js (et son manager NPM, Node Packaged Modules)Git

Si vous avez déjà compris ce que cela implique, ne prenez pas cet air apeuré : je suis passé par là moi aussi et je m'en suis sorti presque indemne. Il est vrai que vous allez devoir ouvrir votre console et taper quelques lignes de commande.

Sans trop de surprise, vous trouverez les liens d'installation de Node.js sur… le site officiel Node.js.

L'installation de Git pour tous les systèmes, quant à elle, se passe via http://git-scm.com/downloads. Il y a d'autres liens d'installation de Git possibles sur Windows mais celle-là est recommandée et surtout c'est celle que j'ai choisi d'utiliser :)

Note pour Windows : lors de l'installation de Git, vous aurez trois alternatives. Choisissez la deuxième afin d'inscrire Git dans les variables d'environnement du système (voir plus loin).

Ces deux modules essentiels étant installés, on va pouvoir passer aux choses sérieuses.

À ce stade, il est primordial de vérifier que les modules NPM et Git sont bien répertoriées dans les Variables d'Environnement (PATH) de votre système d'exploitation.

À titre d'exemple, sur Windows, ces données se trouvent dans Système > Paramètres système avancés > Variables d'Environnement.

Vérifiez que la variable PATH contient les chemins vers NPM et Git, par exemple ainsi :

C:\Users\***\AppData\Roaming\npm; C:\Program Files (x86)\Git\bin

Si tel n'est pas le cas, il faut ajouter ces chemins au sein de la variable en la modifiant.

Il est temps à présent d'ouvrir la console, qui se révèle indispensable pour installer et exécuter Bower. Cela va bien se passer, promis.

Si vous êtes sur Windows, il vous suffit de passer par le menu Démarrer > Exécuter et d'y taper simplement cmd, et valider.
Vous pouvez également, directement au sein d'un dossier, effectuer un Shift + clic droit > ouvrir une fenêtre de commandes ici (voir illustration) :

Votre console ouverte, l'installation de Bower s'exécute en une simple instruction :

npm install -g bower

C'est tout.

À présent prêt à l'emploi, Bower va vous permettre d'installer, de mettre à jour ou de désinstaller toutes les dépendances qui vous semblent nécessaires à vos projets.

Ouvrez la console et positionnez le chemin sur votre dossier de projet. Le plus simple est de commencer à écrire "cd " puis de glisser votre dossier directement dans la console (voir illustration animée).

Nous allons à présent installer notre première dépendance. Il s'agira - au hasard - de KNACSS, le mini framework CSS.

Dans la console, positionnez-vous sur votre dossier de travail et exécutez simplement :

bower install knacss

L'ensemble du projet Github KNACSS, à sa dernière version, se verra automatiquement téléchargé et installé dans un dossier "bower_components" de votre projet ! (Dans l'illustration animée suivante, le dossier KNACSS est généré dans un répertoire "/inc")

Pour savoir quelles autres dépendances peuvent être ainsi automatiquement récupérées, il suffit de vérifier leur existence dans le répertoire de Bower.

Pour installer une dépendance dans une version précise, ce n'est guère plus compliqué. Il suffit de préciser la version souhaitée à la suite d'un dièse (#) :

bower install knacss#2.9.1

Pour mettre à jour une ou plusieurs dépendances de votre projet, l'ordre à donner est update :

bower update knacss

Il est également possible de gérer plusieurs dépendances à la fois.

Pour cela, la création d'un fichier bower.json contenant toutes les informations requises est nécessaire.

Voici un exemple-type de fichier JSON :

{"name": "projet","dependencies": {"knacss": "latest","html5shiv": "latest","box-sizing-polyfill": "latest","modernizr": "latest","jquery": "1.10.2"}}

Pour en savoir plus sur la configuration du fichier bower.json, n'hésitez pas à consulter le fichier Google Drive "Bower Specs".

Voici en image comment installer toute une liste de dépendances en quelques secondes :

Le chemin par défaut d'installation des dépendances est bower_components.

Vous pouvez modifier cette destination en créant un fichier dédié que vous devrez nommer .bowerrc et qui se trouvera dans le voisinage de bower.json.

Voici un exemple de contenu de .bowerrc indiquant à Bower que les fichiers à gérer se trouvent dans le répertoire "inc" :

{ "directory": "inc/"}

Chacun est libre d'ajouter son propre outil au sein du registre de Bower, sous deux conditions :

il doit être à libre disposition sur Githubun fichier bower.json doit être présent à la racine du projet

Voici à titre d'exemple le fichier bower.json décrivant la dépendance KNACSS :

{ "name": "KNACSS", "version": "2.9.1", "homepage": "http://www.knacss.com/", "authors": [ "Raphaël GOETTER, Alsacreations" ], "description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.", "main": "css/knacss.css", "keywords": [ "css", "framework", "reset", "responsive", "rwd", "boilerplate", "workflow" ], "license": "WTFPL", "ignore": [ "**/.*", "node_modules", "bower_components", "test", "less/knackLESS.zip", "tests", "README.md" ]}

L'enregistrement à proprement parler passe par l'instruction bower register, suivi du nom de l'application et du chemin vers le fichier Git. Par exemple :

bower register knacss git@github.com:raphaelgoetter/KNACSS.git

Bower vous demande alors une validation, que vous acceptez et c'est fini : votre dépendance devrait à présent apparaître dans le répertoire de Bower.

(Merci à Thierry Lau pour son aide précieuse sur cette partie)

Bien que pratique et rapide, Bower n'en demeure pas moins un "simple" gestionnaire de dépendances : il n'est pas prévu pour construire des dossiers de projets complets, ni pour concaténer ou minifier des ressources. Pour ce genre d'aspirations, et pour aller plus loin, il vous faudra lorgner du côté d'autres outils tels que Yeoman ou Grunt.

Mais ceci est une autre histoire…

Réduire le poids d'une image SVG : d'Illustrator à l'export final

AppId is over the quota
AppId is over the quota

Beaucoup d’articles prônent l'usage du format d'image SVG pour les illustrations et icônes sur les sites web. Le SVG étant un format vectoriel, il a le très gros avantage de permettre le redimensionnement des images à l’infini sans dégradation. Cette propriété est particulièrement utile si l’on veut s’abstraire de la notion de pixel absolu et que l’on veut des graphismes qui ne deviennent pas flous sur des écrans dits retina ou à grande densité de pixels, sans avoir à créer et charger deux jeux d’images différents.

Un des inconvénients du format SVG peut parfois être son poids. Dans ce tutoriel nous allons utiliser comme exemple le logo de KNACSS pour voir ce qu’il est possible de faire en amont dans Adobe Illustator au moment de la création du SVG pour l'optimiser. Je précise à ce stade que ces optimisations sont faites dans une optique d’utiliser le logo sur le web, si vous souhaitez l’utiliser pour de l'impression vous n’aurez forcément pas les mêmes contraintes. Nous verrons ensuite plusieurs techniques et outils d’export d’Illustrator vers le format SVG et deux outils pour une optimisation du code du fichier final.

Nous ne verrons pas comment embarquer un fichier SVG dans un projet et je vous renvoie à l’article Un logo cliquable SVG avec alternatives pour y retrouver plusieurs techniques. Pour le support de SVG, consultez le tableau disponible sur caniuse.

Ce qui nous intéresse ici c’est de voir comment on peut “préparer” son fichier vectoriel dans Illustrator pour gagner pas mal de poids : le SVG au régime c’est parti !

Avant même de vous parler de la jolie boîte de dialogue de l’export SVG, voici quelques conseils de conception en amont qui peuvent réduire considérablement le poids du fichier et vous éviter au passage quelques incompatibilités.

Sachez tout d’abord que même si le SVG reconnaît certains filtres, tous les filtres et effets disponibles de base dans le logiciel Illustrator sont loin d’être supportés officiellement en SVG. Je vous conseille également d’éviter les dégradés de filet. Si vos couleurs résultent d’un effets de transparence avec un mode de fusion, sachez que le mode de fusion ne sera pas reproductible en SVG, il faudra donc récupérer une couleur proche pour vos zones de fusion.

(à gauche le rendu navigateur, à droite le rendu Illustrator avec un mode de fusion “superposition” sur le premier et “éclaircir” sur le second)

Consultez Creating SVG vector graphics for maximum browser compatibility si vous souhaitez plus de détails sur ce qui est faisable dans Illustrator et compatible en SVG.

Dans le cas du logo KNACSS, j’utilisais un effet de grain sur le côté droit de la saucisse. La première étape a donc été de convertir cette texture en vecteur.

Au niveau des règles de bases, une fois votre logo finalisé :

pensez à convertir et décomposer les lignes en tracés fermés pour une meilleure apparence,pensez à convertir votre texte également en tracés,simplifiez les tracés pour voir le moins de points possibles : moins vous aurez de points, plus votre SVG sera léger,évitez autant que possible les images liées dans vos fichiers,utilisez les options du path finder pour fusionner les formes.

Attention, ces actions rendent votre fichier moins facilement modifiable, je vous conseille donc de faire une sauvegarde du fichier de travail avec les tracés en ligne et le texte en police d’écriture.

Au niveau de la simplification des points vous pouvez manuellement utiliser l’outil Warp tool (SHIFT + R) pour retirer des points (voir tutoriel vidéo SVG for the Web: Using the Warp Tool in Illustrator CC sur Adobe TV). Une autre solution consiste à utiliser la boite de dialogue de simplification de tracés disponible sous Objet > Tracé > Simplifier. À vous de trouver le bon réglage au niveau des curseurs.

Dans le cas de mon logo, j’ai optimisé à la main mon effet de grain en supprimant certains points. Combiné à l’outil de simplification des tracés et une fusion des tracés, je suis passée d’un logo de 66.1 Ko à 26.50 Ko.

A ce stade là, jeter un coup d’oeil au couleurs du fichier peut être une bonne idée. Vous avez dans Illustrator un outil totalement génial qui s’appelle Recolor Artwork (correction de l’équilibre des couleurs en français il me semble) qui permet de changer les couleurs en un clic, mais vous donne aussi un aperçu rapide du nombre de couleurs utilisées dans votre illustration.

En jetant un oeil aux couleurs du logo KNACSS je me suis rendu compte que j’avais beaucoup de micro-nuances du même rouge. L’outil permet très facilement de réassigner à différentes plages la même couleur.

Attention je ne dis pas qu’il faut supprimer les couleurs de votre logo au détriment de la direction artistique et richesse de l’illustration, mais dans mon cas, j’avais vraiment des couleurs très proches. Voici le rendu avant / après, je suis passée de 26.5 Ko à 21.1 Ko.

Un fichier SVG reste un fichier de code, avoir moins de couleurs permet de plus facilement les factoriser (dans un style CSS par exemple à l’intérieur du fichier) et donc d’avoir moins de caractères pour l’écriture du fichier final.

En allant plus loin, cela permet également potentiellement de changer des couleurs directement en les injectant dans le fichier (via JavaScript par exemple), mais ce n’est pas l’objet de l’article ;)

(Les captures suivantes ont été réalisées sous Illustrator CC en 2013. Certaines de ces options n’existent peut-être pas sur d’anciennes versions)

Pour exporter du SVG depuis Illustrator, il vous suffit d’utiliser fichier > enregistrer sous et choisir le format .SVG. C’est là que ça se complexifie puisque l’on vous présente une boite de dialogue avec pleins d’options. Je n’entrerai pas dans tous les détails des options mais si vous êtes curieux je vous encourage à lire l’article de Michael Chaize Export SVG for the web with Illustrator CC.

Pour les alergiques à l’anglais, voici un résumé des options qui nous intéressent :

utilisez le profil SVG 1.1,pour les polices SVG (format défini par le W3C) et Only Glyphes used (la 2e option) mais attention à ce que votre police soit une webfont. Vous pouvez aussi utilisez l’option Convert to outline au lieu de SVG pour ne pas avoir à convertir vous même la police en tracés,option d’image : lier l’image, en faisant attention au chemin et en la compressant en plus pour éviter un surpoids. Évitez également de cocher la case “Conserver les fonctions d’édition d’Illustrator” si vous ne voulez pas exploser le poids du fichier,Positions décimales : 1 qui permet d’arrondir au dixième les décimaux des points,Cocher la case “Produire moins d’éléments ”,Cocher la case “Utiliser l’élément pour le texte curviligne.

Et sinon pour ceux qui n’ont pas envie de s’embêter avec les configurations, ou veulent aller plus vite je vous propose deux plugins :

Les deux en plus de l’export SVG vous permettent d’accéder à d’autres formats (PNG, JPG) et d’exporter plusieurs calques à la fois (pratique pour des icônes).

J’ai une préférence pour le second plugin puisqu'il a dans les paramètres les options d’export décrites au dessus, mais vous ne pourrez pas l’utiliser si vous avez une version plus ancienne que la Creative Cloud.

Une dernière solution pour ceux qui ont la Creative Cloud consiste à copier votre illustration/logo icone, et coller directement dans un éditeur de texte. Oui, vous avez bien lu, copiez vos tracés, collez dans l’éditeur, vous obtiendrez du SVG (plus ou moins optimisé par contre).

Une fois le fichier généré, une dernière optimisation est possible avec plusieurs outils.

SVGO-GUI est une application disponible sur Mac OS X, Windows et Linux (et en package Node.js) qui vous permet d’encore gagner un peu de poids sur votre logo SVG. Il vous suffit d’un petit drag & drop de votre fichier dans l’outil. Attention, cela va remplacer le fichier, je vous conseille donc encore une fois de faire une copie au cas où. Avec ce petit outil, le poids de mon SVG final est passé à 14.7 Ko.

Il existe également un outil en ligne qui s’appelle SVG Optimiser qui vous permet d’appliquer différentes optimisations, et de comparer les deux images avant d’enregistrer.

Pour aller plus loin, on peut encore enfin configurer le serveur pour faire en sorte d'appliquer une compression Gzip sur les fichiers. Je vous renvoie à l’article Utiliser, optimiser et servir des fichiers SVG pour plus de détails.

Dans le cas de mon logo KNACSS, le fichier de base de travail .AI faisait plus de 200 Ko. Je suis passée ensuite d’un SVG de 66 Ko à un peu de plus de 14 Ko. Les plus gros gains ont été effectués en retravaillant directement le fichier d’origine dans le logiciel.

Rappelons que le but ici n’est pas de dégrader la direction artistique parfois très riche d’un logo, mais d’optimiser certains points qui seront “invisibles” à l’oeil une fois que le logo sera utilisé sur un site.

Les Journées du Patrimoine Des Startups 2013

AppId is over the quota
AppId is over the quota

Actualité par arnolem (Développeur chez wixiweb, Rouen)
Créé le 09 Septembre 2013 (7341 lectures)
Tags : JPDS, 2013, startup

Les Journées du Patrimoine Des Startups est un moment unique pour découvrir le fonctionnement d’une startup et de partager, d’échanger avec leurs créateurs.
La 2e édition se tiendra cette année les 12, 13 et 14 septembre 2013 partout en France.

Pour cette seconde édition des JPDS, plus de 200 startups (40 lors de la première édition) ouvriront gratuitement leurs portes au public. L’organisateur de l’événement, Marc-Arthur Gauthey, explique que « le patrimoine de la France, c’est avant tout sa jeunesse, son dynamisme, ses talents, ses entrepreneurs ».

Les JPDS ont pour objectif de transmettre l’envie d’entreprendre, de découvrir l’univers des startups, de valoriser les entrepreneurs, de susciter des vocations mais aussi et surtout de faire des rencontres.

Près de 6 000 visiteurs sont attendus sur tout le territoire pour cette seconde édition des JPDS.

Trouvez les événements dans votre région :

Parmi les ateliers proposés à travers la France, découvrez le crowdfunding avec MyMajorCompany, Ulule et leetchi.com, dégustez du vin avec mabouteille.fr, découvrez et comprenez les étapes d'un projet web avec Wixiweb, apprenez à faire une présentation efficace chez Bunkr, visitez les locaux de Blablacar, vivez les coulisses de la création d'un jeu social avec l'équipe de Digiworks et d'autres comme Mailjet, Airbnb, Lengow, Sushee, etc.

Tanaguru Contrast-Finder

AppId is over the quota
AppId is over the quota

Un outil de plus pour vérifier si les couleurs sont accessibles ? Pas vraiment. Tanaguru Contrast-Finder fait ce que de nombreux autres outils ne font pas : trouver et proposer des jeux de couleurs accessibles proches de celles que vous venez de tester. Fini les tâtonnements à la pipette pour trouver LA bonne couleur !

Après avoir renseigné les couleurs de texte et d’arrière plan, si le jeu de couleur n’est pas valide alors l’outil proposera plusieurs couleurs plus ou moins proches et accessibles. Vous n’aurez plus qu’à choisir.

L’outil propose quelques options vraiment intéressantes comme la possibilité de sélectionner la couleur à modifier (couleur du texte ou couleur de fond), le ratio minimum ou encore si les résultats doivent proposer des couleurs valides très proches de la couleur initiale.

C’est un logiciel libre sous licence AGPL développé par Open-S et disponible sur GitHub.

Abréviations sur le web, balisage sémantique et exemples de code

AppId is over the quota
AppId is over the quota

Les règles typographiques de la langue française sont merveilleuses, riches et alambiquées à la fois. Surtout appliquées au Web.

Par exemple, la règle générale pour les abréviations  – même s’il existe maintes exceptions – est l’emploi de la lettre initiale suivie par les lettres significatives de la fin de mot. Ces lettres significatives sont affichées en bas-de-casse et mises en supérieur.

L’ignorance de cette règle conduit à des "variations" plus ou moins problématiques, telles que :

Mme [absence de lettres en supérieur] pour Madame ;M° [capitale M suivi de ° et non pas la lettre ‘o’] pour le Métro ;1è [le chiffre ‘un’ suivi de ^è] en tant qu’abréviation pour première (d’autres variations constatées sont 1èr ou 1ère) au lieu de 1^re.

Par ailleurs, l'emploi (fréquent) de l'élément  ^{engendre deux inconvénients :}

premièrement, cet élément correspond bien à la présentation voulue, mais n’apporte pas de sens ;deuxièmement, nous n’avons pas accès au mot ainsi raccourci sous sa forme non-abrégée, ce qui pourrait utile pour les moteurs de recherche et les dispositifs d’accessibilité.

Or, il existe un élément spécifique pour traiter le cas des abréviations : .

Note : a remplacé l'élément obsolète dans les spécifications HTML5

Utilisons donc l'élément , accompagné de tout autre élément ou classe qui nous facilite la création de sens. Par exemple :

Madame

En l’absence des feuilles de style, ceci affichera la forme non-abrégée : "Madame".

En présence d’une feuille de style adéquate, le contenu peut être stylé pour un écran comme suit :

.superior {display: inline-block;font-size: 80%;vertical-align: 60%;line-height: 0.5em;}.superior:first-letter {font-size: 125%;vertical-align: -60%;}abbr span {position: absolute;left: -7000px;overflow: hidden;}Aparté : les valeurs pour font-size et vertical-align ont été choisies pour leur harmonie ainsi que leur correspondance avec les pratiques habituelles de la typographie, tout en respectant un souci de lisibilité à des tailles réduites. Bien sûr, ici on explore une technique, et je ne cherche pas à être normatif en ce qui concerne tous les aspects des styles présentés ici. Vous êtes libre d’adapter ces valeurs à vos besoins spécifiques. Le nom de classe .superior a été choisi en rappel de la balise .

La classe .superior contient le mot abrégé, et est nécessaire pour constituer une ligne de base commune au texte de l’abréviation. Ensuite nous réduisons la force du corps du texte dans ce bloc à 80% de la hauteur courante, une valeur qui, sur écran, convient pour les valeurs supérieures.La propriété vertical-align déplace le texte vers une position supérieure, en tenant compte non seulement du changement de force du texte en question, mais aussi de la distance nécessaire.La propriété line-height est nécessaire afin d’empêcher des changements à l’interligne causé par les lettres mises en supérieures. La valeur de 0.5em réduit l’interligne de notre bloc de manière à ne pas influencer l’interligne ailleurs dans le bloc parent.Suivant l’application de la règle .superior, le texte de notre bloc est maintenant mise en supérieur et il flotte au-dessus de la ligne de base. Il convient donc de ramener la première lettre vers le bas.Le sélecteur :first-letter est supporté par l’ensemble des navigateurs actuels, et même des versions antérieures.L’augmentation à 125% pour la propriété font-size restaure la taille originale suivant la réduction à 80%.La valeur négative pour vertical-align tire la première lettre vers le bas, la recollant sur la ligne de base.Enfin, la règle  abbr span {} cache le texte ne faisant pas partie de l’abréviation, empêchant son affichage à l’écran.J’ai bien cherché une balise plus approprié que pour ce cas — parmi eux et , désormais dévolus aux changements purement stylistiques — mais j’ai décidé en fin de compte qu’il n’y avait pas un meilleur élément.

Les abréviations pour boulevard ou faubourg suivent la même règle, sauf il n’y a pas l’utilisation du texte mise en supérieure. Dans ce cas, la même règle CSS peut toujours s’appliquer.

21 boulevard des Champs-Élysées105 faubourg Saint-Antoine

En n’utilisant pas la classe .superior sur la balise , seule la règle pour abbr span { } s’applique, et ainsi le texte est caché à l’écran.

Pour enrichir sémantiquement le contenu j’ai voulu tester comment intégrer cette proposition avec le microformat hCard dans le but d’apporter le plus de sens possible. Prenons une hCard ‘basique’...

Mme Jeanne Antoinette Poisson

Aparté : le format hCard ne semble pas avoir de champ/attributs pour des titres de noblesse – dans ce cas, Marquise de Pompadour. L’attribut honorific-suffix ne semble pas approprié... Plus de recherche à faire, je pense...

En tout cas, utilisant la technique développée précédemment donne ceci :

Madame Jeanne Antoinette Poisson

Les règles CSS doivent être adaptées pour devenir :

.honorific-prefix { display: inline-block; font-size: 80%; vertical-align: 60%; line-height: 0.5em;}.honorific-prefix:first-letter { font-size: 125%; vertical-align: -60%;}.honorific-prefix span { position: absolute; left: -7000px; overflow: hidden;}

Tout fonctionne correctement. Rajoutons l’adresse...

Madame Jeanne Antoinette Poisson

Château d’Évreux

55 rue du Faubourg-Saint-Honoré

75008 Paris

France

Ainsi, si je veux utiliser une abréviation pour Faubourg je peux faire comme suit :

Madame Jeanne Antoinette Poisson

Château d’Évreux

55 rue du Faubourg-Saint-Honoré

75008 Paris

France

Comme la règle pour Faubourg n’emploie pas de texte mise en supérieure, je n’ai besoin que de cibler la balise , seulement les autres, en ajoutant la règle .street-address abbr span.

La version révisée :

.honorific-prefix { display: inline-block; font-size: 80%; vertical-align: 60%; line-height: 0.5em;}.honorific-prefix:first-letter { font-size: 125%; vertical-align: -60%;}.street-address abbr span, .honorific-prefix span { position: absolute; left: -7000px; overflow: hidden;}

Si on veut la totale, on peut aussi ajouter les attributs de titre. Ce qui donne une carte complétée comme suit :

Madame Jeanne Antoinette Poisson

Château d’Évreux

55 rue duFaubourg-Saint-Honoré

75008 Paris

France

L’emploi de l’anglais pour les noms de classes

Même si le texte affiché est français, et attribué en tant que tel, par convention les noms des balises, classes, propriétés, règles et valeurs en HTML, CSS, et pour les microformats, proviennent de l’anglais. En suivant cette manière de faire, il y a une meilleure chance à ce que les moteurs de recherche et autres robots ‘comprennent’ mieux nos classes et attributs.

Limitations

Cette technique ne convient pas pour les abréviations qui débutent par plus d’une lettre au départ.Une propriété line-height explicite est nécessaire sur le bloc parent, et donc le texte qu’il contient, afin d’assurer l’alignement sur la ligne de base.La dépendance sur quelques chiffres ou valeurs ‘magiques’, c’est-à-dire, qu’ils fonctionne ici mais n’ont pas une mode de calcul qui assure leur fiabilité avec d’autres polices...

Résultats du concours 'Toujours avec un S'

AppId is over the quota
AppId is over the quota

Actualité par Raphael (Intégrateur du Dimanche, Strasbourg)
Créé le 03 Septembre 2013 (10032 lectures)
Tags : concours, alsacreation

Notre concours Alsacréations de l'été, "Toujours avec un S", vient de se clore il y a quelques jours.

Le but de ce concours était d’imaginer un nouveau concept pour la page http://www.alsacreation.com (oui sans "S" à la fin), dont l'objectif est d’informer (gentiment et avec humour) les internautes qu’ils se sont trompés, mais aussi de les rediriger vers alsacreations.com ou alsacreations.fr, selon le but de leur recherche.

Peu de participants se sont pris au jeu, mais certaines propositions ont été de toute beauté, je vous laisse en juger par vous-même.

Voici les quatre premiers du concours :

Ces quatre participants méritants recevront prochainement les lots suivants :

1er lot :
1 livre HTML5, 1 livre CSS avancées, 2 mémentos Eyrolles, une carte de crédit Tuto.com (valeur 15€) et 20 kiwiz2ème lot :
2 mémentos Eyrolles, une carte de crédit Tuto.com (valeur 15€) et 10 kiwiz3ème lot :
1 mémento Eyrolles, une carte de crédit Tuto.com (valeur 15€) et 5 kiwiz4ème lot :
une carte de crédit Tuto.com (valeur 15€)

Voici un aperçu de leur oeuvres :

N'oubliez pas le "S" :

La quête de la lettre S :

Le mur des conspués :

Bienvenue dans l'arrière boutique :

Pour finir, sachez que nous mettrons prochainement en ligne l'une des pages victorieuses.

Encore un grand merci à tous ceux qui ont joué le jeu !

Real Favicon Generator

AppId is over the quota
AppId is over the quota

Real Favicon Generator est un outil gratuit en ligne permettant de vérifier et de générer des fichiers "favicon" pour son site web.

Bien plus complet que d'autres outils du même acabit, RFG ne se contente pas de la version favicon de bureau mais également des versions pour smartphones et tablettes iOS, Android et Windows Phone.

Ainsi, s'il manque certaines version ou tailles d'icones, ou que leur taille n'est pas correctement spécifiée, l'outil ne manquera pas de vous en faire part.

Une fois l'audit réalisé, Real Favicon Generator vous propose de concevoir l'ensemble des fichiers (ZIP) et vous livre le code HTML à copier dans vos pages.

Canvas 3D (WebGL) plus facile avec Three.js

AppId is over the quota
AppId is over the quota

Nous avons tous déjà vu des sites de grandes marques nous en mettant plein la vue avec des animations 3D interactives, ou des démonstrations technologiques qui font rêver. On pense ici à quelques berlines allemandes parfaitement modélisées qu’il est possible d’inspecter sous tous ses angles avec un simple mouvement de la souris... Bien souvent développées en Flash avec la librairie Papervision3D ces animations en jettent un max, mais restent dépendantes du plug-in d'Adobe qui est de moins en moins populaire et "incompatible" tablette et smartphone.

Aujourd’hui la tendance est au HTML5 et CSS3, parsemé d’un peu de JavaScript. Ô chance, le W3C et ses contributeurs ont justement prévu de passer par Canvas (qui permet déjà de dessiner dans une page web en 2D) pour exploiter une scène 3D avec les standards du web.

Pour ceux qui ne le savent pas, il existe deux composants HTML5 pour dessiner :

Canvas, qui permet de faire du dessin bitmap (en pixel)SVG pour le dessin vectoriel, souvent utilisé en cartographie (à l'exception de Google Maps ou OpenStreetMap qui utilisent des mosaïques d'images)

Je ne m’attarderai pas sur ces composants, le web regorge de sujets qui en parlent déjà très bien.

Il existe en réalité un troisième composant qui est lui dédié à la 3D, il s’agit de WebGL qui se base sur le standard 3D OpenGL. Il permet d’exploiter les pilotes de la carte graphique et de tirer ainsi profit de l’accélération matérielle, un atout majeur pour des rendus performants de formes et/ou de textures complexes. En gros WebGL permet de générer un rendu 3D calculé par la carte graphique dans votre navigateur. Sous entendu : cette feignasse de carte graphique qui ne sert pas à grand chose pour le rendu d’une page Web va enfin se rendre utile.

Seulement ce qu’il faut savoir, c’est que comme avec beaucoup des nouveautés apportées par HTML5, il y a encore des restrictions liées à l’implémentation de ces standards par les navigateurs.

Ainsi je vais peut-être refroidir les ardeurs de certains; WebGL est supporté par :

Firefox à partir de la version 4 ;Chrome à partir de la version 9 ;Safari seulement si activé depuis le menu développement ;Internet Explorer à partir de la version 11 seulement

Les mobiles, souvent soumis à plus de contraintes d'économie d'énergie reconnaissent pour la plupart déjà ces instructions via les moteurs embarqués mais elles sont désactivées par défaut. Et comme ce n’est pas pas très encourageant, mais qu'il y a du mieux depuis que Microsoft s'y est mis, il faut ajouter à cela que certaines cartes graphiques ne supportent pas WebGL. C’est notamment le cas sur certains modèles de Mac. Voir BlacklistsAndWhitelists WebGL (informations de support plus détaillées).

Bon bon bon... alors pourquoi je vous parle de ça si visiblement on ne peux pas encore l’utiliser en production à l’heure actuelle ? Et bien déjà parce que comme beaucoup de choses apportées par HTML5 c’est fun et dans un avenir proche ça deviendra viable en production. Et parce que ça ne fait pas de mal de se faire un peu plaisir avec les nouvelles techno sur des projets innovants. Parce que l’innovation c’est le progrès et que c’est bon pour l’économie !

Et la petite surprise du chef c’est qu’on peut quand même faire un peu de 3D sans WebGL ! Et oui, car la 3D finalement ça reste du dessin 2D auquel on ajoute une perspective (comment ça je simplifie un peu trop ?). De fait, on peut utiliser Canvas et SVG pour dessiner en 3D.

Alors je vous rassure, il n’est pas question de s’amuser à faire des calculs savants à bases de matrices ou autres calculs trigonométriques, il y a des gens très calés en la matières qui nous ont mâché le travail en amont et c’est là que je vais vous parler de la librairie Three.js.

Three.js c’est donc une bibliothèque JavaScript qui va nous permettre de faire de la 3D à la même manière que Papervision3D le permettait en ActionScript dans Flash, mais cette fois-ci en ayant recours à la technologie de notre choix pour le rendu. Le même code écrit avec Three.js pourra donc être utilisé avec Canvas (2D) ou WebGL.

Attention cependant, WebGL utilise l’accélération matérielle de la carte graphique, bien plus habile avec les calculs matriciels, ce dont Canvas est incapable. Il y a donc de grosses différences de performances entre l’utilisation des deux technologies. Canvas ne pourra donc être utilisé que pour des rendus relativement simples si l’on ne veut pas voir le navigateur flancher sous la masse de calculs.

Commençons par télécharger la librairie à l’adresse suivante sur le dépôt Github : https://github.com/mrdoob/three.js/ (cliquez sur Download ZIP).

Puis initialisons une page HTML comme vous en avez l’habitude. Dans cette page nous allons inclure la librairie Three.js et ajouter un conteneur dans le body. Et juste avant de fermer le body on ajoute un balise script dans laquelle nous insérerons le code JavaScript pour initialiser notre scène en 3D.

Nous allons donc initialiser notre scène avec le code suivant :

var renderer, scene, camera, mesh;init();function init(){ // on initialise le moteur de rendu renderer = new THREE.WebGLRenderer(); // si WebGL ne fonctionne pas sur votre navigateur vous pouvez utiliser le moteur de rendu Canvas à la place // renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.getElementById('container').appendChild(renderer.domElement); // on initialise la scène scene = new THREE.Scene(); // on initialise la camera que l’on place ensuite sur la scène camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.set(0, 0, 1000); scene.add(camera); // on créé un cube au quel on définie un matériau puis on l’ajoute à la scène var geometry = new THREE.CubeGeometry( 200, 200, 200 ); var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh ); // on effectue le rendu de la scène renderer.render( scene, camera );}

Ces fonctions ne viennent pas du néant, vous pouvez les retrouver dans la documentation Three.js.

Et là, oh magie, vous devriez voir... un cube rouge s’afficher.

Démonstration

“Tout ça pour ça” me direz-vous ? Oui, mais ce carré est en 3D. Si, si je vous l’assure, et je vais même vous le prouver ! Pour s'en rendre compte, rien de mieux que de le faire tourner sur lui même. On commence par ajouter une fonction animate() qui sera appelée récursivement pour mettre à jours les attributs de l'objet à animer.

function animate(){ requestAnimationFrame( animate ); mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; renderer.render( scene, camera );}

On ajoute un appel à cette fonction juste après l’appel à la fonction init() précédente, puis nous pouvons maintenant retirer la fonction de rendu dans la fonction init() puisque l’appel se fait maintenant via la fonction animate(). Voilà le code final :

var renderer, scene, camera, mesh;init();animate();function init(){ // on initialise le moteur de rendu renderer = new THREE.WebGLRenderer(); // si WebGL ne fonctionne pas sur votre navigateur vous pouvez utiliser le moteur de rendu Canvas à la place // renderer = new THREE.CanvasRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.getElementById('container').appendChild(renderer.domElement); // on initialise la scène scene = new THREE.Scene(); // on initialise la camera que l’on place ensuite sur la scène camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000 ); camera.position.set(0, 0, 1000); scene.add(camera); // on créé un cube au quel on définie un matériau puis on l’ajoute à la scène var geometry = new THREE.CubeGeometry( 200, 200, 200 ); var material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } ); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh );}function animate(){ // on appel la fonction animate() récursivement à chaque frame requestAnimationFrame( animate ); // on fait tourner le cube sur ses axes x et y mesh.rotation.x += 0.01; mesh.rotation.y += 0.02; // on effectue le rendu de la scène renderer.render( scene, camera );}

Actualisez la page et vous devriez maintenant voir le cube tourner sur lui même. Félicitations, vous savez maintenant faire une animation en véritable 3D dans votre navigateur !

Démonstration

Une dernière petite étape va consister remplacer notre cube par une sphère et à lui appliquer une texture (image JPEG) que nous allons éclairer avec une lumière directionnelle pour donner un peu de cachet à tout ça.

On va donc remplacer la partie concernant la création du cube par le code suivant :

// on créé la sphère et on lui applique une texture sous forme d’imagevar geometry = new THREE.SphereGeometry( 200, 32, 32 );var material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture('metal.jpg', new THREE.SphericalReflectionMapping()), overdraw: true } );mesh = new THREE.Mesh( geometry, material );scene.add( mesh );// on ajoute une lumière blanchevar lumiere = new THREE.DirectionalLight( 0xffffff, 1.0 );lumiere.position.set( 0, 0, 400 );scene.add( lumiere );

Et voilà ! Vous avez une sphère métallique qui tourne sur elle même avec un beau reflet lumineux. Consultez le code source de la démonstration pour bien visualiser les différentes parties entrant en jeu.

Démonstration

Attention, désormais pour des contraintes de sécurité, certaines opérations 3D et notamment le chargement d'images de textures imposent de consulter les pages en mode http:// et non pas en local sur votre disque (file://). Consultez la console JavaScript pour vérifier s'il y a des bugs.

On va s’arrêter là pour le moment. Sachez simplement que la librairie permet beaucoup de libertés. Vous pouvez par exemple :

charger des objets 3D modélisés avec votre logiciel de modélisation 3D préféré (3DS Max, Maya, Blender...) et exportés au format Collada pour les importer dans votre scène et les animer ensuite.brancher des événements JavaScript clavier/souris (onclick, onkeypress...) pour piloter la vue 3Dexploiter l'API Gamepad pour contrôler vos jeux avec une manette de jeu, ou bien encore Pointer Lock pour la souris.

Techniquement il est tout à fait possible de faire un jeux vidéo 3D complet comme Doom ou Quake 2.

On peut d'ailleurs citer l'excellent travail de Thibaut Despoulain qui a réalisé un superbe jeu de course du nom de HexGL avec Three.js et HTML5.

Soyons fous, il serait envisageable de texturiser un objet 3D avec un vidéo via l’API Video de HTML5 qui pourrait elle même se baser sur l’API WebRTC et la méthode getUserMedia() pour capturer la webcam de l’utilisateur (Quelle est l'utilité de faire ça ? Je n'en sais rien mais c'est un bon exemple de la complémentarité des nouveaux composants de HTML5).

SMACSS, architecture évolutive et modulable des CSS

AppId is over the quota
AppId is over the quota

Livre suggéré par Nico3333fr (Développeur/Intégrateur web, France voisine de Genève)
Créé le 12 Septembre 2013 (10599 lectures)
Tags : css, framework, OOCSS, SMACSS

Si vous n'êtes pas fan de lecture dans la langue de Shakespeare, vous êtes peut-être passés à côté de cette pépite. Toutefois, vous n'avez plus d'excuse, il est désormais disponible en français au format numérique.

De quel livre au fait ? SMACSS, pour « Scalable and Modular Architecture for CSS » qui se voit adapté en « architecture évolutive et modulable des CSS » dans la langue de Molière.

Autant ne pas tourner autour du pot, c'est une lecture que tout intégrateur doit lire : très pratique et très pragmatique sans jamais être intégriste, l'approche SMACSS est pleine de bon sens et vous permettra d'envisager la maintenabilité de vos CSS de manière plus sereine.

L'auteur - Jonathan Snook - explique avec force exemples comment - entre autres :

diminuer la dépendance de la CSS à une structure donnée,la performance des sélecteurs,l'utilisation des pré-processeurs, etc. 

Et ce, toujours dans une optique pratique et réutilisable.

Assurément, une mine très dense de bons conseils !

Note : l'initiative de la traduction française vient de Jonathan Path, et a été faite grâce au travail d'Estelle Bonhomme et aux relecteurs Geoffrey Crofte et Laurent Sutterlity.

Colour Accessibility (ebook)

AppId is over the quota
AppId is over the quota

Livre suggéré par Stéphanie W. (Graphiste - Designer Web et mobilité, Strasbourg)
Créé le 28 Novembre 2013, mis à jour le 17 Décembre 2013 (4173 lectures)
Tags : couleurs, accessibility

Colour Accessibility est un petit livre qui fait partie de la collection d'ebooks “Five Simple Steps”. Cette collection propose des ebooks avec des thématiques orientées webdesign / intégrateur pour £2.0 (environ 2,5 €)

Ce petit livre de 89 pages illustrées vous propose une excellente introduction aux concepts d’accessibilité des couleurs ainsi que des “techniques” et outils pour un designer qu’il soit dans le domaine du web, du mobile, de l’applicatif et même du jeu vidéo. Ce sujet n'est pas à négliger par les designers puisque le daltonisme touche une part non négligeable de la population (voir l'épidémiologie sur wikipedia).

Le livre commence par une introduction et excellente description des différents types de daltonismes, leur origine “scientifique” et leurs effets au niveau de la perception des couleurs pour les différents individus.

Le livre propose ensuite des conseils pratiques pour bien choisir des couleurs en fonction de leur niveau de contraste ainsi que des palettes de “couleur universelles”.

La troisième partie du livre est consacrée à l’utilisation des couleurs sur de vrais sites : là encore, le livre propose une analyse de plusieurs sites et des conseils applicables au quotidien sur de l’e-commerce, de la cartographie, des infographies, des formulaires et différents éléments de design où la non perception des couleurs peut devenir problématique.

Le quatrième chapitre est consacré à différents outils de test et d’analyse de contraste et couleurs : applications Windows, Mac et Linux à télécharger, extensions sous Photoshop et en ligne, une vraie boite à outils du parfait petit testeur.

Le dernier chapitre s'intéresse enfin aux solutions alternatives aux couleurs pour de l’applicatif, du site web et des jeux vidéos.

En résumé : c’est un excellent ebook à mettre absolument dans les mains de tous les designers pour les sensibiliser à l’accessibilité, très facile et pas très long à lire. A 2,5 € ça serait dommage de s’en priver non ?  

Eco-conception web - Les 100 bonnes pratiques

AppId is over the quota
AppId is over the quota

Livre suggéré par Nico3333fr (Développeur/Intégrateur web, France voisine de Genève)
Créé le 26 Août 2013 (7905 lectures)

Afin de changer des approches traditionnelles (responsive, réutilisable, etc.), cette fois, vous pouvez vous poser la question de comment faire un site… en éco-conception !

Ce petit guide présente et explique brièvement les enjeux de l'éco-conception web avec des chiffres impressionnants à l'appui :

les infrastructures de l'Internet (data-centers, réseaux, etc.) et le Web mobile représentent 3% de la consommation électrique mondiale,et les émissions de gaz à effet de serre associées dépassent 2% du total émis par l'humanité, soit autant que celles de l'aviation civile (!).

Toutefois, ce n'est qu'une courte introduction, l'essentiel du livre consiste en des bonnes pratiques très concrètes à appliquer pour réduire l'empreinte écologique des sites et au passage améliorer les performances de ces derniers. Tous les domaines sont concernés : l'architecture, l'intégration (une part conséquente), le code client (JavaScript, DOM, etc.), le back-end, l'hébergement et les contenus.

Les points forts de ce livre sont là : c'est très concret, cela touche à tous les domaines du Web, et c'est très agréable et rapide à lire. J'y ai retrouvé de nombreux points de qualité et de performance Web, et j'ai même retrouvé des points que j'explique depuis des années à certains clients, qui trouvent en plus une justification écologique là où je les justifiais juste par la qualité Web.

Pour ma part, je l'ai dévoré en une soirée avec grand plaisir.