Tanaguru Contrast-Finder

 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.

Colour Accessibility (ebook)

  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 (3550 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 ?  

Dareboost

 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 :)

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

 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.

Soutenons La Quadrature du Net

 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.

SMACSS, scalable and modular architecture of CSS

Book suggested by Nico3333fr (neighbouring France to Geneva, web developer/Integrator)Created on September 12, 2013 (7518 reads)Tags: css, framework, OOCSS, SMACSSIf you're not a fan of reading in the language of Shakespeare, perhaps moved by this nugget. However, you have no excuse, it is now available in French to the digital format.Book about the fact. SMACSS, for "scalable and Modular Architecture for CSS' which has been adapted from" scalable architecture and modular CSS "in the language of Molière.Do not beat around the Bush, is that any Integrator reading should be read: very practical and very pragmatic without being fundamentalist, SMACSS approach is full of common sense and will you consider the maintenance of your CSS in one way more Serena.Author how strongly - Jonathan Snook - examples - among others:reduce the dependence of the CSS to a certain structure, operation selectors, the use of the pre-processeurs, etc..And this, in a practical and reusable optical.Without a doubt, a very dense of good advice!Note: the initiative of the French translation comes from Jonathan Path and was made thanks to the work of Estelle Bonhomme and reviewers Geoffrey Crofte and Laurent Sutterlity.

The heritage of the days of Startups 2013

News of arnolem (developer at wixiweb, Rouen)Created September 09, 2013 (5722 reads)Tags: JPDS, 2013, homeThe days of the heritage of Startups is a unique moment to discover the functioning of a startup and to share, to exchange with their creators.The Second Edition will be held this year on 12, 13 and 14 September 2013 everywhere in France.For this second edition of JPDS, more than 200 companies (40 in the first edition) free open their doors to the public. The organizer of the event, Marc - Arthur Gauthey, explains that "the heritage of the France, is mainly its youth, dynamism, talent and its contractors.The JPDS are designed to convey the desire to undertake, to discover the world of startups, entrepreneurship development, generate vocations but also and above all to make meetings.Almost 6,000 visitors are waiting in the entire territory of this second edition of the JPDS.Find events in your area:The workshops offered through the France, discover the crowdfunding with MyMajorCompany, Ulule and leetchi.com, enjoy wine with mabouteille.fr, to discover and to understand the stages of a web project with Wixiweb, learn how to make an effective presentation in Bunkr, visit the facilities of Blablacar, they live behind the scenes of the creation of a social game with team Digiworks and others as MailjetAirbnbLengow, Sushee, etc..

Compte-rendu de la KiwiParty 2013

La KiwiParty a eu lieu au début de l'été. La présence de plus de 155 personnes, dont 13 orateurs talentueux a créé une réelle dynamique tout au long de cette journée.Dès neuf heures, les premiers participants arrivèrent dans les locaux d'Epitech. La journée débuta par un mot d'accueil, après quoi le premier orateur, Bert Bos, commença sa présentation sur CSS pour les livres numériques.Les conférences se sont alors enchaînées tout au long de la matinée. Cette année encore, les thèmes ont été variés et plus intéressants les uns que les autres : des sujets de développement aux notions de d'ergonomie en passant par les concepts d'accessibilité, il y en avait pour tout le monde. Dans l'après-midi, les participants ont pu se ressourcer lors d'un goûter bien approprié.Enfin, suite à la conférence de Tristan Nitot sur Firefox OS, un quiz clôtura la journée. Les participants purent gagner plusieurs lots bonus, dont un iPad mini offert par Kiubi.Avec les plus motivés, nous nous sommes réunis durant l':after pour terminer cet événement dans une ambiance conviviale.Voici la liste des sujets et les slides ou articles relatifs aux thèmes abordés.CSS pour des livres (numériques), Bert BosDes CSS kick-ass avec Sass, Hugo GiraudelL'accessibilité, mon ingrédient secret, Jennifer NoesserAccélérer ses pages Web, Jean-Pierre VincentCe que vous avez toujours voulu savoir sur CSS, Vincent De OliveiraL'intégration d'e-mails responsive, Rémi ParmentierDu zoning au mockup, itinéraire d'une maquette web, Romy Duhem-VerdièreGoogle Analytics vu de l'intégrateur/développeur, Nicolas HoffmannY'a pas de pépins, y'a que des solutions !, Chloé Temesvari & Philippe RoserAngularJS et le futur du développement web, Sébastien LetéliéComprendre les pointer events en décortiquant le polyfill hand.js, David RoussetFirefox OS, Tristan NitotTout d'abord, un grand merci à l'Epitech de Strasbourg qui nous a une fois de plus accueilli au sein de ses locaux et nous a prêté les équipements nécessaires au bon déroulement de cet événement.La KiwiParty étant une manifestation entièrement gratuite, Alsacréations tient à remercier tout particulièrement les différents sponsors qui ont permis de réaliser cet événement, et qui ont participé à sa réussite tout au long de la journée jusqu'au quiz avec des lots.Enfin, nous tenons à remercier l'équipe d'InfoQ qui a effectué les captures vidéo (les vidéos des conférences vont apparaître au fur et à mesure sur la page "KiwiParty" d'InfoQ), Christine Viale pour les photos de la journée et Mozilla pour les différents lots/goodies offerts aux participants.Quelques comptes-rendus et avis sur la journéeVous pourrez retrouver des photos prises durant l'événement sur Flickr avec le tag kiwiparty.

Concours de l'été 2013 : à vos votes !

  Actualité par Raphael (Intégrateur du Dimanche, Strasbourg)Créé le 11 Août 2013, mis à jour le 12 Août 2013 (2633 lectures) Tags : concours, voter Les inscriptions pour le concours "Toujours avec un S" ayant pris fin, le concours passe désormais en phase de votes. Tous les inscrits sur Alsacréations (participants au concours ou non) peuvent voter, en donnant une note entre 1/10 et 10/10, et surtout commenter les créations.Nous avons peu de participations pour ce concours (11 au total), mais certaines productions en valent vraiment la peine !Vous pouvez dès à présent retrouver toutes les participations en ligne et voter jusqu'au 26 août à 13h37.Pensez à bien consulter la page proposée sur le site de destination, éventuellement à explorer le code source, et à ne pas vous limiter à la consultation de la capture d'écran finale, qui n'est là que pour vérification.Attention : nous avons développé un petit outil maison pour détecter les potentielles fraudes lors des votes. Soyez donc équitables dans les notes et n'utilisez pas de comptes multiples. Les tricheurs verront leur participation retirée sans avertissement.

Adaptive Web Design

"Adaptive Web Design" est un petit livre de poche de 130 pages édité initialement chez Easyreaders en 2011 et traduit en français chez Pearson en 2013.L'auteur, Aaron Gustafson est un expert mondial front-end reconnu, et son préfacier Jeffrey Zeldman n'est pas moins une célébrité.Pour être très honnête, je pensais que l'"Adaptive Web Design" était un univers dans lequel s'inscrivait le Responsive Webdesign. Ce n'est pas faux, mais j'avoue que je m'attendais à un bouquin qui traiterait en grande partie de RWD… or ce n'est pas du tout le cas, loin de là.Bref, j'ai donc été un peu frustré lors de mon premier survol du livre.Mais pas longtemps.Je connaissais très peu Aaron Gustafson avant de lire ce bouquin. J'en suis persuadé maintenant, il est compétent et brillant : en un peu plus de 100 pages, il réussit à vulgariser l'amélioration progressive, à me convaincre qu'elle doit être incontournable, et à m'apprendre plein de petites choses sur HTML, CSS, JavaScript et ARIA.En clair, le public ciblé par ce livre est plutôt large : quelles que soient vos compétences, vous y apprendrez quelque chose.L'auteur traite l'amélioration progressive partie par partie (HTML, CSS, JavaScript, puis Accessibilité) avec moults exemples de codes concrets (un site web fil rouge sert d'illustration tout au long de l'ouvrage).Chapitre 1 : pensez à l'utilisateur, pas au navigateurChapitre 2 : amélioration progressive avec le HTMLChapitre 3 : amélioration progressive avec le CSSChapitre 4 : amélioration progressive avec JavaScriptChapitre 5 : amélioration progressive et Accessibilité

Menu de navigation avec amélioration progressive

 L'ouvrage "Adaptive Web Design" d'Aaron Gustafson, dont nous avons fait le retour de lecture récemment est un excellent condensé du principe de développement par "Amélioration Progressive" (progressive enhancement) dans le Web.Nous allons tenter de comprendre cette approche et en quoi elle est primordiale à travers un cas concret : la conception d'un menu de navigation responsive.L'amélioration progressive, ou "web design adaptatif", n'est pas une question de compatibilité. Il n'est pas question de savoir "dois-je supporter IE6 ou non ?", cela va au-delà de ces basses considérations :)L'enjeu est plutôt de comprendre :de quoi est composé le parc des agents utilisateurs et périphériques susceptibles de tirer information de votre site (navigateurs, moteurs de recherche, synthèses vocales, imprimantes, smartphones)le plus petit dénominateur commun à tous les agents utilisateurs afin que le contenu soit toujours restituéd'enrichir progressivement l'expérience utilisateur pour les agents utilisateurs qui supportent ces améliorationsPlus schématiquement, et selon Aaron Gustafson, l'amélioration progressive c'est passer d'une expérience minimale vers l'expérience exceptionnelle :Le contenu textuelLa sémantique HTMLL'enrichissement visuelL'interaction avec le visiteurL'accessibilitéNote : l'amélioration progressive possède son alter ego, la dégradation gracieuse. Cette dernière part du principe inverse : tous les navigateurs récents doivent être privilégiés, et l'on autorise des alternatives, bidouilles, scripts pour pallier les déficiences des anciens.Cette façon de percevoir les choses modifie sensiblement l'approche "compatibilité navigateurs". En effet, à partir du moment où le 1er niveau est atteint, le site est forcément "compatible" sur tous les agents utilisateurs. Tout les autres paliers contribuent à enrichir progressivement l'expérience de l'utilisateur.Bien que semblant basique à mettre en pratique, cette philosophie de conception a l'avantage de bien remettre les choses au point et à leur place.Et surtout, ça nous rappelle une priorité qui doit surclasser toutes les autres : n'entravez jamais l'accès au contenu.Et malheureusement, les entraves à l'accès au contenu sont plus nombreuses qu'on ne le croit :des liens, ou des navigations, ne fonctionnant qu'avec JavaScript ou Flashdes contenus masqués par défaut en CSSdes contenus en display: none alors qu'ils devraient être perceptibles aux lecteurs d'écrandes contenus "faussés" (des alt ou title ne servant que de conteneurs de mots-clés)des images, vidéos sans alternative textuelle ou sous-titragedes tailles de contenus minuscules et non agrandissablesetc.Passons aux choses sérieuses : mettons tout cela en pratique en prenant comme exemple un menu de navigation responsive.Voir la démonstrationRien de particulier à ce stade, il s'agit de conférer aux liens des contenus explicites :Accueil,À propos,Blog web,Alsacréations,Contact.Même hors de son contexte, ce contenu demeure explicite… à condition que tous les visiteurs connaissent ce qu'est un "blog" et savent ce qu'est "Alsacréations".Profitons-en pour les dépanner un peu et enrichissons l'information lorsqu'il le faut. Un attribut title sera parfait pour une infobulle :title="Alsacréations, communauté d'apprentissage web">N'abusez pas, comme on le voit souvent, de l'attribut title, en le casant sur tous vos liens. Il n'est utile que s'il véhicule une information supplémentaire. Si vous l'appliquez partout, vous ne ferez que parasiter la lecture des synthèses vocales.La sémantique commence par le choix judicieux et approprié des éléments HTML (balises) afin que les agents utilisateurs puissent exploiter leurs fonctions.Il m'a semblé naturel d'opter pour l'élément HTML5 , contenant une liste de liens (

,

• , ). La présence des éléments de liste n'est pas obligatoire, c'est plus par habitude que par réelle nécessité.AccueilÀ proposBlog webAlsacréationsContactPour rappel, l'élément HTML5 n'est pas supporté par les anciennes versions d'Internet Explorer. Par exemple, pour IE8 et inférieur, vous devrez créer cet élément dans le DOM ou employer le célèbre polyfill HTML5Shim.Les liens d'évitement sont bénéfiques à la navigation clavier et pour les déficients visuels. Dans cette optique, ajoutons un identifiant (id) à la navigation afin de servir d'ancre aux liens d'évitement; Il nous servira également de marqueur plus tard pour JavaScript :id="navigation">Nous pourrions en profiter pour enrichir la sémantique via HTML5 microdata car la documentation Schema.org nous fournit des microdonnées spécifiques à la navigation d'un site web : il s'agit de SiteNavigationElement.Cependant, à l'heure actuelle, il faut bien avouer que nous ne savons pas très bien si cette microdonnée de navigation est déjà exploitée par les agents utilisateurs ou les moteurs de recherche. Libre à vous d'attendre un peu qu'elle se démocratise (ou pas) avant de l'employer en production.Allez hop ! On passe à l'étape graphique, l'enrichissement le plus perceptible. Mais cela demeure un enrichissement comme un autre, rien de plus.Nous allons appliquer les styles CSS en gardant à l'esprit que tous les navigateurs ne supportent pas les dernières fioritures de CSS3.Cette navigation prendra forme en tenant compte des considérations d'ergonomie et d'accessibilité (taille de police, contrastes de couleurs, taille du lien cliquable). Quel que soit l'agent utilisateur, l'information doit être exploitable.Nous disposons de plusieurs moyens pour cibler le bloc de navigation en CSS :nous pouvons cibler directement l'élément (mais attention, il peut y avoir plusieurs dans une page),il est possible de se servir du sélecteur d'id (en ce qui me concerne, je ne suis pas très fan car il a trop de poids dans le calcul des sélecteurs),nous pourrions ajouter un attribut de type class="nav-main" (mais c'est peut-être un peu dommage de surcharger le code HTML pour cela),nous servir du sélecteur d'attribut via [id=navigation] ou encore [role=navigation] (que l'on aborde dans la dernière étape)Personnellement, j'ai fait le choix de cibler à l'aide de [id=navigation].Les styles de base demeureront très basiques :[id=navigation] ul {margin: 0; padding: 0;list-style: none;}[id=navigation] a {display: block;padding: 0.8em;background: #4A7377;color: #fff;text-decoration: none;}On passe à présent aux styles dédiés aux petits écrans. Pour cela, rien de mieux que des CSS3 media queries pour appliquer des styles aux fenêtres de moins de 768 pixels de large :@media (max-width: 767px) {...}Les media queries ne sont pas reconnus par IE8 et versions inférieures. Dans notre démarche d'amélioration progressive, cela n'est pas du tout un obstacle : les vieux IE disposeront de l'affichage de base. De plus, nous avons limité ces styles aux périphériques de fenêtre inférieure à 768px, donc généralement les smartphones… où ces antiques navigateurs n'existent pas !Pour les smartphones, l'opération principale consiste à générer en CSS un bouton d'action "burger" en caractère unicode qui symbolisera le menu quand il sera rétracté :[id=navigation]:after {content: "\2261"; /* symbole unicode du "burger" */position: absolute;top: -5.5rem; right: 4px;z-index: 42;width: 4rem;text-align: center;color: #000;font-size: 5rem;font-weight: bold;line-height: 1;}Tant qu'on y est, il pourrait être de bon ton de produire des améliorations visuelles (CSS) selon les périphériques. Par exemple :adapter la taille cliquable des liens selon la résolution (taille et DPI) des mobiles,modifier les contrastes ou passer la couleur de texte en noir sur imprimante,ajouter des fioritures graphiques pour navigateurs récents (coins arrondis, dégradés),etc.Lors du clic ou du touch sur le bouton "burger", le menu de navigation doit se rétracter ou se déployer.Pour ce faire, plusieurs techniques sont envisageables. Parmi celles-ci, nous avons choisi JavaScript notamment parce que ce langage se prête parfaitement à cette fonctionnalité. Mais sachez que d'autres langages (CSS) auraient pu faire l'affaire également.L'un des soucis de JavaScript est qu'il n'y a pas de tolérance à la panne : si JavaScript n'est pas activé ou est bloqué, le menu - qui est un contenu essentiel de la page - risque de ne pas être restitué car masqué.Pour nous assurer que le contenu de la navigation soit toujours accessible (1er palier), nous ajoutons la classe .nav-opened par défaut dans la balise  :class="nav-opened">Le menu doit être affiché et ouvert par défaut au chargement de la page. Ainsi, si JavaScript n'est pas activé, le menu demeurera déployé et fonctionnel.[id=navigation].nav-opened ul {max-height: 25em;}Au contraire, si JavaScript est fonctionnel, sa première mission sera de rétracter le menu en supprimant la classe .nav-opened.if (window.innerWidth<768) {t = document.getElementById('navigation'); if(t) {t.classList.toggle('nav-opened');t.onclick=function(){ t.classList.toggle('nav-opened');} }}Les styles suivants s'appliqueront alors :[id=navigation] ul {max-height: 0;overflow: hidden;}Pour information, on rétracte le menu en jouant sur une combinaison max-height + overflow, ce qui permettra de l'ouvrir progressivement via une transition CSS3 par la suite :-webkit-transition: max-height .4s;transition: max-height .4s;L'usage de JavaScript nécessite souvent d’implémenter des fonctionnalités et détections complémentaires qui complexifient le code initial mais en faciliteront l'emploi dans toutes les circonstances (onresize, timeout, zoom utilisateur, etc.). À vous de voir jusqu'où vous souhaitez parfaire le code minimal actuel.Parvenu à ce dernier palier, profitez-en pour refaire une dernière vérification de routine :Le contenu est-il toujours compréhensible hors contexte ?Le contraste entre la couleur de texte et la couleur de fond est-il suffisant ? Le menu est-il fonctionnel si CSS est indisponible ou non reconnu par les navigateurs ?Le menu est-il fonctionnel si JavaScript est indisponible ou non reconnu par les navigateurs ?Avez-vous testé l'accessibilité de la page via une synthèse vocale (VoiceOver, Nvda) ?Autre excellente pratique pour l'accessibilité : permettez la navigation au clavier en attribuant des styles CSS également lors de l'état :focus des liens de navigation (vous pouvez tester la navigation clavier à l'aide des touches tab ou maj + tab).Pour nos amis IE6 et IE7, qui ne reconnaissent pas la pseudo-classe :focus, nous emploierons :active qui, en raison d'un bug, déclenchera également les styles lors de la navigation au clavier sur ces anciens navigateurs.La navigation au clavier sera sans doute inutile sur mobile, mais redoutablement efficace sur écran de bureau :[id=navigation] a:hover, [id=navigation] a:focus, [id=navigation] a:active {background: #295155;}Les spécifications W3C d'accessibilité, WAI-ARIA, prévoient des régions nommées (landmarks) que les agents utilisateurs doivent savoir exploiter. Par exemple, la région "navigation", valeur de l'attribut HTML ARIA role, désigne la navigation prinicipale du document.Tous les agents utilisateurs récents reconnaissent ce landmark et traitent l'élément comme tel, cela vient en complément du sens apporté par l'élément HTML :role="navigation" id="navigation" class="nav-opened">L'exemple de ce menu de navigation vous l'a peut-être fait comprendre : l'amélioration progressive est un travail du quotidien et chaque détail peut avoir son importance.Ne cherchez pas absolument la perfection, car elle n'existe pas. Cet exemple est d'ailleurs forcément perfectible. Par contre, pensez avant tout à vos utilisateurs en priorité, et non à la technologie qui vous ferait plaisir : l'essentiel est que le contenu et les informations puissent toujours être véhiculées.revoir la démonstrationEt maintenant c'est à vous de jouer, qu'avez-vous prévu de faire pour faciliter la vie à vos visiteurs ?

Convertir du Flash (SWF) en HTML5 avec Swiffy

 Astuce par Simon-K (Art Director & Creative Designer, Strasbourg)Créé le 05 Août 2013 (14362 lectures) Tags : flash, swiffy Qu'on l'aime ou non, la technologie Flash existe encore et aucune date d'enterrement n'est prévue par Adobe. Utilisé à bon escient, il est toujours possible d'en avoir plein les mirettes avec des animations sexy. Pourtant, une difficulté voit le jour : plusieurs plate-formes ne supportent pas l'installation du plug-in Flash. Alors, pourrait-on rendre ces animations HTML5 friendly ? C'est ce que nous propose Google avec Swiffy !Cet outil est destiné à convertir le contenu Flash (SWF) en code HTML5, ce qui permet de le faire fonctionner sur des supports qui, à la base, ne supportent pas Flash comme les mobiles et tablettes (Android, iOS...). Théoriquement, cela devrait fonctionner sur toutes les plates-formes grâce aux standards.Faisons un essai avec un fichier relativement classique.L'animation boucleAu survol, l'animation réagitAu clic égalementIl y a différents effets (opacité, flou de mouvement..)Poids : 33.3 KoNon libre de droitsUne animation Flash des plus simples, vous en conviendrezSwiffy propose une extension à télécharger.Direction la page de téléchargement : Swiffy Extension for Flash ProfessionalInstallez l'extension en utilisant Adobe Extension ManagerL'extension est directement utilisable dans FlashAllez sur le site de l'extension : Google SwiffyUploadez votre fichier SWF (1 Mo maximum) si vous possédez les autorisations nécessairesUn aperçu avant / après vous est directement proposéAprès avoir utilisé la seconde méthode voici ce que nous obtenons :D'un côté nous avons l'animation originale au format Flash de l'autre le résultat de la conversion. Il faut dire que cela fonctionne plutôt bien. Il suffit alors simplement de récupérer la page HTML générée en faisant un clic droit "enregistrer la cible du lien sous...".DemoLa qualité est sensiblement la mêmeLes effets sont respectésLes évènements souris sont préservésCela fonctionne partout, même sur mobile(ici sur un iPhone 3GS doté d'IOS6 et un Samsung Wave sous BADA 2.0)C'est un peu moins fluide... Et surtout le poids ! Il faut au préalable charger un fichier JavaScript (runtime.js) qui contient des instructions de base au framework Swiffy et qui à lui seul pèse 250 Ko. Le code de l'animation elle-même (hors framework) monte à 50 Ko (consultez le code source de la démonstration), ce qui nous fait un total de 300 Ko."Google Swiffy" fonctionne bien ! Même très bien pour notre animation. Hélas les 250 Ko du script de base plus les 50 Ko de l'animation sont dissuasifs face aux 33 Ko du fichier SWF (Flash). Utiliser cet outil pour simplement remplacer une petite animation Flash n'est donc pas la bonne solution, surtout sur mobile lorsque la bande passante est limitée. Peut être qu'avec des animations plus conséquentes, et sans autre alternative réelle, le jeu en vaut-il plus la chandelle ?Nous manquons toujours d'outils performants et agréables à utiliser pour générer des animations à la manière de l'environnement Flash qui est très pratique, sans devoir écrire de ligne de code complexe pour définir des paramètres d'animation et importer de multiples ressources. Adobe a bien lancé Edge Animate qui ressemble de près à l'IDE Flash mais les fichiers produits restent tout autant lourds à exploiter. Les techniques Canvas et SVG ont encore quelques progrès à faire au niveau de la génération du code nécessaire et du support par les navigateurs notamment pour ce qui concerne SVG animé.

Canvas 3D (WebGL) easier with Three.js

Translate Request has too much data Parameter name: request Translate Request has too much data Parameter name: request 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 seulementLes 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émonstrationUne 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émonstrationAttention, 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).

Prepros

Prepros is a "working environment" (workflow) table for preprocessors like Sass/compass, LESS and integration, Stylus-based HTML and CSS projects.This software is open source (MIT license), available in Windows and Mac, free in its basic version (wide) and offers many features optimizations and automation.Prepros automatically compiles less, Sass, SCSS, Stylus, Jade, Slim, Coffeescript, syntactic, Haml and Markdownlanguage. Nothing much.You can choose the output format for the CSS file, namely: normal, compact, or they are.In addition, the tool provides records management and enough practical errors.Prepros provides the ability to compress images in your project (JPG, PNG, GIF). Note, however, that the image optimization tool is manual (picture by picture) and not worth worth the tenors in the field, even if it is already very good.Prepros minifie and concatenates (combines) JavaScript files not to have one in production.No worry about the prefixes of manufacturers (- moz-, - webkit-, etc.) because the tool can do automatically for you.And it does so very elegant since it recognizes even the old syntax of properties to make them compatible browser (e.g. for CSS3 gradients or different versions of flexbox module).Associated with an extension for Chrome, Prepros offers the possibility of viewing your project online and especially to see the page automatically update.It is also possible to test mobile and tablets through the built-in Server and the IP address that is provided by the tool.This last feature (for the offer of payment - 19USD) you can transfer all files, or only those modified to an FTP server.In the end, Prepros is a particularly suitable framework: store only your pure file that is automatically compiled, prefix, minifie, put on line and updated in the browser.There are other tools of this type: CodeKit (Mac only) and Mixture.io.If you know one of these tools, feel free to share your experience here.

Real Favicon Generator

Real Favicon Generator is a free online tool to verify and generate files "favicon" for your web site.Much more complete than other tools of the same ilk, MERs no favicon office version not only but also versions for smartphones and tablets iOS, Android, and Windows Phone.It therefore lacks certain sizes of icon or version or that its size is not correctly specified, the tool does not stop sharing.Once done the audit, Favicon Real Generator offers to design all the files (ZIP) and give you the HTML code to copy on your pages.

Eco-web design - 100 best practices

Book suggested by Nico3333fr (neighbouring France to Geneva, web developer/Integrator)Created on August 26, 2013 (6433 reads)To change traditional approaches (sensitive, reusable, etc.), this time, you can ask the question of how make a site... in eco-design!This small guide presents and explains briefly the issues of design eco-web with impressive numbers to support:Internet (centers of data, networks, etc.) infrastructure and mobile Web represent 3% of the world of electricity consumption, and greenhouse gas emissions exceed 2% of the total emitted by mankind, as well as the aviation civil (!).However, it is that a brief introduction, most of the book consists of very specific practices to be applied to reduce the ecological footprint of the sites and the performance of the death of the latter. Refer to all areas: architecture, integration (substantial part), the code of the client (JavaScript, DOM, etc.), the back-end, lodging and content.The strengths of this book are there: it is very concrete, this refers to all areas of the Web, and is very nice and quick to read. I have found many quality points and Web performance and even found points that I explain for many years to certain customers, who are increasingly an ecological justification where justifiais only by the quality of the Web.For my part, I devoured it in one night with great pleasure.

Results of the competition ' always with a will

Our summer, "Always with a S", Alsacréations contest comes to close a few days ago.The purpose of this competition was to imagine a new concept for the website http://www.alsacreation.com (not "s if" at the end), deceived whose objective is to inform Internet users that are gently and humorously, but also redirection to quackit.com or alsacreations.fr, depending on the purpose of your research.Few participants took to the game, but some of the proposals were beautiful, I leave you to judge for yourself.Here are the first four of the contest:These four participants deserve soon will receive the following lots:Lot 1:HTML5 of 1 pound, 1 pound advanced CSS, 2 reminders Eyrolles, Tuto.com (worth €15) credit card and 20 martha2lot 2:2 reminders Eyrolles, a credit card Tuto.com (value € 15) and 10 martha2lot 3:1 memento Eyrolles, card credit Tuto.com (worth €15) and 5 martha2lot 4:a map of credit Tuto.com (worth €15)Here are some of his works:Don't forget the "S":The search for the letter S:Bill wall:Welcome to the back room:Finally, please note that we will soon put on line one of the victorious pages.Thanks to all those who have played the game again!

Découverte du framework CSS KNACSS

KNACSS est une feuille de styles CSS de base pour débuter ses projets d'intégration web, conçue par Raphaël Goetter et Alsacréations. Concentré de bonnes pratiques, de conventions de nommage, d'astuces et de bouts de code réutilisables, KNACSS peut être considéré comme un véritable mini "framework CSS".Attention, la plupart des techniques présentes dans KNACSS nécessitent un niveau de compétence minimal en CSS pour être exploitées au meilleur de leurs possibilités. Il est par exemple conseillé d'être à l'aise avec les bases générales et connaître les différents positionnements classiques (float, clear, position, inline-block, etc.). En clair, ce n'est pas un outil adapté aux débutants complets.Voici une liste non exhaustive des fonctionnalités que l'on trouvera dans KNACSS :un reset CSSdes classes réutilisablesdes snippets CSSdes aides au positionnementdu positionnement avancé (FlexBox)un support navigateur allant jusqu'à IE6des grilles simples et des gouttièresdu Responsive webdesigndes classes pour les tableauxdes classes pour les formulairesune version LESSune version SassPour se distinguer des gros frameworks multitâches tels que Twitter Bootstrap, 960gs ou Blueprint, KNACSS (qui pèse moins de 5 Ko minifié) ne vous propose pas de plugins JavaScript, ni de designs et d'enrobages prédéfinis… cela vous évite de devoir vous compliquer la vie à les écraser au début de chaque projet :)Pour vous faire une première idée du code utilisé, n'hésitez pas à consulter dès à présent le code commenté de KNACSS.Il suffit de placer un appel vers la feuille de style unique KNACSS au sein de votre section  avec une balise .Le moyen le plus simple de récupérer KNACSS est de passer par le Builder (constructeur), où vous pouvez paramétrer votre produit selon vos besoins.Passons à présent à la première étape de notre découverte...

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

 Erreur lors de la désérialisation du corps du message de réponse pour l’opération « Translate ».  maximal pour la longueur du contenu de chaîne (8192) lors de la lecture de données XML. Ce quota peut être augmenté en modifiant la propriété MaxStringContentLength sur l’objet XmlDictionaryReaderQuotas utilisé pendant la création du lecteur XML. Ligne 1, position 9617. 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 1re.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 HTML5Utilisons donc l'élément , accompagné de tout autre élément ou classe qui nous facilite la création de sens. Par exemple :MadameEn 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-AntoineEn 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’Évreux55 rue du Faubourg-Saint-Honoré75008 Paris FranceAinsi, si je veux utiliser une abréviation pour Faubourg je peux faire comme suit :Madame Jeanne Antoinette Poisson Château d’Évreux55 rue du Faubourg-Saint-Honoré75008 Paris FranceComme 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’Évreux55 rue duFaubourg-Saint-Honoré75008 Paris FranceL’emploi de l’anglais pour les noms de classesMê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.LimitationsCette 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...}