mon titre de page

Alsacreations.com - Actualités

Motion Path : introduction aux animations CSS modernes ()
N'avez-vous jamais rêvé de réaliser une superbe page d'intro animée pour votre site web ? Mettre en exergue votre produit phare grâce à une animation très élaborée ? Faire suivre à vos liens de navigation une trajectoire alambiquée ? Pour répondre à ces besoins modernes, le module CSS "Motion Path Module Level 1" introduit la possibilité à des éléments HTML de suivre un parcours défini et ouvre la voie à de nouveaux types d'animations CSS totalement inédits. Compatibilité Commençons d'emblée par les sujets qui fâchent et ôtons tout optimisme aux fans de Safari (OS X et iOS) et d'Internet Explorer (s'il en reste) : les propriétés du module "Motion Path" ne sont pas encore supportées par tous les navigateurs. Ceci dit, à l'heure où ce tutoriel est rédigé, près de 75% de vos visiteurs sont en mesure de bénéficier de cette technologie récente. Prenez bien garde à ce que ce type d'animation n'apporte que du bonus et ne soit pas indispensable à la compréhension et l'utilisation de vos pages web. Les propriétés de Motion Path Pour rendre opérationelles ces animations, trois mécanismes entrent en jeu : Un chemin que l'élément doit suivre (propriété offset-path) La position de l'élément sur le chemin (propriété offset-distance) la rotation de l'élément lors de son parcours (propriété offset-rotate) offset-path La propriété principale de tout ce dispositif est offset-path et autorise de multiples valeurs : path();, ray();, url();, circle();, polygon();, inset();, none;. À ce jour la seule valeur reconnue par la majorité des navigateurs est path(), nous allons donc nous concentrer sur cette valeur uniquement dans ce tutoriel. Les valeurs contenues dans offset-path sont directement héritées du langage SVG. Des notions basiques en SVG, ou des logiciels de dessins vectoriels sont donc un pré-requis nécessaire pour maîtriser les animations décrites dans cet article. Vous le savez sans doute, SVG est un format de dessin vectoriel permettant de dessiner les formes basiques telles que les lignes, courbes, cercles, arcs et autres. Les chemins sont créés en combinant plusieurs de ces formes. Voici par exemple comment tracer un trajet carré que pourrait suivre un élément div : div { offset-path: path('M10 10 H 180 V 180 H 10 Z'); /* ceci est un chemin carré, si si */ } L'objectif de ce tutoriel n'est pas d'explorer le langage SVG. Pour plus d'infos sur les syntaxes employées ici, je vous réfère à cette excellente traduction de la Cascade ou encore aux explications détaillées de MDN. offset-distance La propriété offset-distance, quant à elle, définit la position de l'élément sur le chemin. Elle peut être exprimée dans toutes les unités classiques (pixel, rem, %, etc.) et devient particulièrement intéressante dès lors qu'on souhaite animer l'objet le long du trajet : div { animation: move 1s; /* je vais suivre l'animation "move" durant 1s */ } @keyframes move { 0% { offset-distance: 0%; /* je commence au début du trajet */ } 100% { offset-distance: 100%; /* je finis à la fin du trajet */ } } Voir la démo offset-rotate Enfin, la troisième propriété du dispositif, offset-rotate, permet de définir l'orientation de l'objet lorsqu'il suit les courbes du parcours : auto (valeur par défaut) : indique que l'objet va suivre l'orientation du chemin. C'est généralement la valeur souhaitée. reverse : l'object va également respecter l'orientation du parcours mais en étant tourné de 180 degré, il sera donc toujours dos au parcours. Xdeg (ex. 30deg) : l'élément ne suivra plus la rotation de la courbe mais conservera un angle figé durant tout son trajet. auto Xdeg (ou reverse Xdeg) : l'élément suivra l'orientation de la courbe avec un décalage de X degrés. Voir la démo Rendre le parcours visible Vous avez sans doute remarqué que la trajectoire parcourue par votre objet n'est pas tracée à l'écran. C'est bien dommage, et surtout, cela se semble pas prévu dans les spécifications CSS. Pour pallier ce manque, il va être nécessaire de nous trouver un autre allié. Ce sera au tour de SVG de "dessiner" le chemin (puis de le superposer avec celui suivi par l'objet). Des path(), des <path>, oui mais des Panzani ! Rappelez-vous de la forme carrée parcourue par notre objet <div> : div { offset-path: path('M10 10 H 180 V 180 H 10 Z'); /* ceci est un chemin carré */ } Notre mission est de reproduire exactement le même tracé en langage SVG. Car lui seul pourra être visible. Dans le langage SVG, un tracé est dessiné via l'élément <svg>, parent de <path> lui-même assisté de son attribut d. Ainsi, notre carré s'écrit tout simplement de la sorte en SVG : <svg ...> <path d="M10 10 H 180 V 180 H 10 Z" fill="none" stroke="gray" /> </svg> Notez que la plupart des attributs graphiques SVG peuvent être modifiés via CSS, nous pourrions donc écrire dans la partie HTML : <svg class="svg-path" width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <path d="M10 10 H 180 V 180 H 10 Z"> </svg> Et dans la feuille de styles : .svg-path { stroke: gray; stroke-width: 4; fill: none; } Superposer (et voir) les chemins La seconde étape est à présent de superposer les différents éléments en jeu et concrètement il nous faudra : Un bout de code SVG contenant le chemin dessiné avec l'élement <path> (ça c'est fait) Un objet qui suivra ce chemin via la propriété CSS offset-path (ça c'est fait aussi) Un conteneur qui contiendra ces deux éléments superposés grâce à des position: absolute Voici plus concrètement ce dont nous aurons besoin : <div class="motion-container"> <svg class="svg-path"> <path> </svg> <div class="motion-object"></div> </div> Et le CSS adapté : /* overlay object on svg path */ .motion-container { position: relative; } .svg-path { position: absolute; left: 0; top: 0; } Voir la démo Aller plus loin Il est bien entendu possible d'étendre les possibilités de cette petite introduction aux animations avancées en CSS. Vos seules limites risquent d'être votre imagination… et votre aptitude à dessiner en SVG. Pour vous aider, de nombreux outils tels que Sketch ou Inscape vous faciliteront grandement la tâche. Cet outil en ligne est également très performant : https://editor.method.ac/ Voici une vidéo mettant en pratique l'ensemble des notions abordées dans ce tutoriel : Voir la démo finale Un point sur l'accessibilité Vous vous en doutez : des contenus qui se déplacent sans qu'on leur demande ou alors même qu'on leur a demandé de ne pas bouger, c'est potentiellement une source de problèmes d'accessibilité pour vos visiteurs. Pour répondre à ces deux cas de figures, envisagez les pistes suivantes : L'un des critères du RGAA 4 demande à ce que le mouvement dure moins de 5s ou puisse être lancé et mis en pause ou que le contenu puisse être masqué et réaffiché ou que l'information puisse être affichée sans le mouvement. La Media Query prefers-reduce-motion permet de prendre en compte le choix de l'utilisateur•trice pour ce qui concerne les animations sur son système d'exploitation. Démos variées et conclusion Pour vous donner envie de tester ces technologies, voici quelques-unes des meilleures trouvailles que j'ai pu faire sur Codepen : Le menu animé ayant servi d'introduction : https://codepen.io/alsacreations/pen/LYVMwYy Le chemin Hotdog : https://codepen.io/kloo012/pen/LpdJzz Les Frites : https://codepen.io/cobra_winfrey/pen/dZvNxg Un Preloader : https://codepen.io/rachelmcgrane/pen/aJPbae Un Bouton amoureux : https://codepen.io/kdzwinel/pen/vgjPZx Un Avion en papier : https://codepen.io/AliKlein/pen/qbJyGE Un Parcours automobile : https://codepen.io/Kseso/pen/jbaxJG J'espère que cette approche des animations modernes en CSS vous a donné envie de tester chez vous, voire en production et d'en apprendre plus. N'hésitez pas à commenter en nous partageant vos propres oeuvres ou celles que vous avez dénichées sur le Web ! Retrouvez l'intégralité de ce tutoriel en ligne sur Alsacreations.com
>> Lire la suite

Interview des gens du web : Rémi Parmentier ()
Dans le but d'étoffer nos propositions de contenus originaux et de ne pas être les seuls à donner notre avis via nos articles, Alsacréations a décidé de donner la parole à des professionnel·le·s du Web au travers de courtes interviews permettant de découvrir des profils aussi différents qu'intéressants. L'idée derrière cette initiative est de parler d'actualité, découvrir de nouveaux horizons, mais également de donner de la visibilité à certaines pratiques, parfois trop peu mises en avant. Qu'on le connaisse sous son nom de ville ou son pseudo, il a été difficile de passer à côté de la sortie de son dernier outil : Can I email tant il a fait grand bruit dans la communauté web mondiale. Nous vous proposons donc de discuter intégration de mail (mais pas que) avec son créateur aux multiples facettes : Rémi Parmentier, alias HTeuMeuLeu. (Alsacréations) Peux-tu te présenter en quelques mots ? Je m'appelle Rémi Parmentier, j'ai 34 ans et je suis intégrateur depuis 2006. En ligne, je suis surtout connu sous le pseudonyme de HTeuMeuLeu. Et aussi pour régulièrement partager mon amour pour l'intégration d'e-mails. (Alsacréations) Peux-tu nous parler de Caniemail ? D’où est venue l’idée ? Quel est l’historique ? Quelle a été la réponse des utilisateurs face à cet outil ? Caniemail est un site proposant des tableaux de compatibilité de propriétés HTML et CSS dans les clients mail. L'idée est clairement venue de caniuse.com qui, en l'espace de quelques années, est devenu une référence incontournable dans le développement Web. Historiquement, c'est le développeur Mark Robbins qui a révélé en 2015 lors d'une conférence que sa boîte travaillait sur le projet sous le nom de caniemail.com. Deux ans après, je me suis rendu compte que le nom de domaine avait été abandonné. Mon premier réflexe a été de le racheter pour éviter qu'il ne tombe entre de mauvaises mains. J'ai proposé à Mark de reprendre le domaine pour qu'il puisse continuer le projet, mais ça n'a jamais abouti. J'ai conservé le domaine, sans trop savoir quoi en faire. Et c'est en 2019 où je me suis posé un ultimatum : si caniemail ne sort pas dans l'année, alors c'est que le projet n'était pas voué à exister. En mars, j'ai ouvert un dépôt sur GitHub où j'y ai noté quelques idées et envies pour le site. En septembre, j'ai annoncé officiellement l'ouverture du site. La réponse a été globalement très positive et le site a été partagé un peu partout à sa sortie. En fait, le site a tellement dépassé les frontières habituelles du développement Web que les premiers jours, de nombreuses personnes se plaignaient de l'inutilité du site. En lisant des commentaires, j'ai compris que plein de gens cherchaient des noms de célébrités (comme Barack Obama ou le Pape), pensant que le site leur donnerait une adresse e-mail de contact. En rajoutant un placeholder précisant "HTML, CSS" et un message de recherche infructueuse plus explicite, ces recherches sont rapidement tombées à zéro. La page d'accueil de Can I email (Alsacréations) Pourquoi t’es-tu spécialisé dans l’intégration de mail ? J'ai fait toute ma carrière en agence, et l'intégration d'e-mails fait partie du boulot récurrent. Quand j'ai commencé à travailler dans le Web, on faisait encore des sites en tableaux (et donc les e-mails aussi). C'est à partir de 2007 où les choses ont changé. D'un côté, on a Apple qui a sorti l'iPhone et bouleversé le Web et les emails en les rendant mobiles. Et de l'autre, on a Microsoft qui a adopté Word comme moteur de rendu pour Outlook sur Windows, figeant pour toujours l'intégration d'e-mails à des tableaux. Et je crois qu'en fait c'est ce grand écart que j'aime bien. Comment arriver à faire des choses propres et modernes en profitant de toutes les possibilités offertes par un client mail comme Apple Mail tout en supportant à côté un dinosaure comme Outlook 2019 ? J'aime aussi vraiment le côté « explorateur » du métier. Pour comprendre le fonctionnement de certains clients mails et arriver à trouver des solutions, j'ai parfois l'impression d'être le premier être vivant à explorer ces contrées. (Alsacréations) Dans une autre vie, quel métier tu aurais aimé exercer ? Moine copiste ou scribe, pour le côté « intégrateur du moyen-âge ». Mais je ne sais pas si c'est une bonne situation, ça. (Alsacréations) Quelles sont les spécificités des clients mails qui t’ont le plus étonné ou désespéré ? L'an dernier, je me suis rendu compte d'un comportement particulier de l'application Mail d'Orange sur Android. J'ai toujours pensé que cette application ne supportait pas les balises <style>. Mais en testant certains e-mails, je voyais bien que parfois oui, parfois non. En fait, l'application ne supporte pas les règles CSS précédées par une tabulation. Donc si on indente son code avec des tabulations, c'est ignoré. Mais si on utilise des espaces, tout va bien. Plus généralement, je désespère de voir des clients mails sortir des nouvelles fonctionnalités semblant n'avoir jamais été testées sur des vraies newsletters. Par exemple, depuis quelques mois, Gmail teste un mode sombre qui altère le rendu des e-mails sur mobile. Sauf que leur algorithme est complètement foireux et donne des textes en gris sur gris la plupart du temps. Alors qu'à côté, il y a une vraie communauté d'intégrateurs et d'intégratrices spécialisé(e)s dans les e-mails (sous le mot-dièse #emailgeeks sur Twitter ou sur Slack) qui ne demande qu'à aider et à améliorer les choses. Mais les clients mails continuent d'opérer comme des boîtes noires, sans jamais chercher à contacter le monde extérieur. (Alsacréations) Que penses-tu de l’intégration de microdonnées schema.org dans les mails ? C'est cool. Gmail fait ça depuis 2013 et Microsoft a suivi le pas un peu plus récemment avec les Adaptive Cards. Mais encore une fois, ils n'ont pas été capables de s'entendre et de s'accorder sur un format standard, et on se retrouve avec différentes syntaxes pour faire la même chose. Ah tiens, je crois qu'on peut rajouter ça aussi à la liste des choses qui me désespèrent. (Alsacréations) Qu’attends-tu/qu’espères-tu de l’avenir dans le monde des clients mail ? J'espère plus d'ouverture de la part des clients mails pour enfin s'intéresser à l'élaboration d'un standard commun. Mais en bon pessimiste, je ne m'attends à pas grand chose. (Alsacréations) Penses-tu que les webmails vont totalement remplacer les clients mail “lourds” tels que Thunderbird ou Outlook ? Je pense surtout qu'il y a une vraie différence entre mobile et desktop. Sur desktop, les webmails prennent clairement le dessus. Même Microsoft est en train de pousser Outlook.com en tant que Progressive Web App. Mais à l'inverse, sur mobile, les webmails sont quasiment tous délaissés par leurs constructeurs au profit d'applications natives. (Le webmail mobile de Gmail par exemple est une véritable antiquité.) Le compte Twitter de HTeuMeuLeu (Alsacréations) Quelle serait ta destination de rêve pour des vacances ? Bonus : sais-tu où partent les geeks en vacances ? J'ai une préférence pour les destinations citadines. (J'habite à la campagne, donc si je pars en vacances à la campagne, je ne suis pas trop dépaysé.) Et les geeks partent aux Maldives ou dans les îles Java, bien entendu. (NDLR : La réponse attendue était "aux C-shell", mais, dans notre grande bonté, nous acceptons également celles-ci.) Publié par Alsacreations.com
>> Lire la suite