Vendredi 19 juin, c’\u00e9tait la Kiwiparty !<\/p>\n
La Kiwiparty, c’est une journ\u00e9e de conf\u00e9rences organis\u00e9e par l’agence strasbourgeoise Alsacr\u00e9ations, et c’est bien cool : accessibilit\u00e9, UX, performances, petits g\u00e2teaux et muffins du tonnerre, bref que du beau. Et on a m\u00eame eu une licorne. Vous regrettez de pas \u00eatre venu\u22c5e\u22c5s, hein ?<\/p>\n
Cet article est \u00e9volutif : j’ajouterai progressivement les liens vers les slides des conf\u00e9rences.<\/em><\/p>\n D\u00e9couverte et comparaison de 2 m\u00e9thodes d’utilisation d’icones vectorielles (et donc retina\/HD ready), les polices d\u2019ic\u00f4nes (icon-font) et les sprites SVG. Quels sont les avantages et inconv\u00e9nients de l’une ou l’autre technique (r\u00e9utilisation, modification, animation, etc.) ?<\/p>\n<\/blockquote>\n Spoiler : le SVG c’est mieux. Et \u00e7a me donne encore plus envie de m’y plonger.<\/p>\n Lors de cette conf\u00e9rence, Gwennola expliquera ce que sont les personas, comment r\u00e9colter les \u00e9l\u00e9ments qui serviront \u00e0 les cr\u00e9er, puis comment les concevoir et comment les utiliser.<\/p>\n<\/blockquote>\n Debugger une application web, c\u2019est une exp\u00e9rience qui peut \u00eatre parfois complexe. Quand on est sur son PC avec un navigateur : F12 nous rend toujours un tr\u00e8s bon service. Cependant comment avoir la m\u00eame exp\u00e9rience quand veut d\u00e9bugger le site sur un t\u00e9l\u00e9phone ? Des solutions existent mais rien de tr\u00e8s simple d\u2019utilisation ou qui fonctionne dans tous les cas.<\/p>\n Dans ce talk, nous vous pr\u00e9senterons un nouvel outil cr\u00e9\u00e9 par les fondateurs de Babylon.JS et qui permet d\u2019obtenir l\u2019exp\u00e9rience F12, en remote et pour tous les navigateurs.<\/p>\n<\/blockquote>\n Conf\u00e9rence et outil tr\u00e8s int\u00e9ressants ! Les auteurs ont fait une d\u00e9mo collaborative en demandant aux spectateurs de se connecter \u00e0 une url de debug : plus de 100 t\u00e9l\u00e9phones en m\u00eame temps ! et l’un d’eux a vu le code html\/css de sa version se modifier en direct, impressionnant. Pour l’instant, on ne peut pas d\u00e9bugger de JavaScript, mais c’est pr\u00e9vu \ud83d\ude42<\/p>\n Outil open-source – \u00e7a surprend toujours quand \u00e7a vient de Microsoft, mais ils s’y mettent, ils s’y mettent… – je le testerai d\u00e8s que possible !<\/p>\n La cognition spatiale d\u00e9signe la facult\u00e9 cognitive permettant de traiter et manipuler les informations spatiales sous toutes leurs formes. Cette facult\u00e9 joue un r\u00f4le essentiel lors de l\u2019interaction avec des syst\u00e8mes d\u2019information bas\u00e9s sur des m\u00e9taphores graphiques.<\/p>\n J\u2019essaierai de montrer en m\u2019appuyant sur quelques \u00e9tudes de cas comment elle est exploit\u00e9e lors de l\u2019utilisation d\u2019un site web et en quoi certaines tendances actuelles vont \u00e0 l\u2019encontre de bonnes pratiques ergonomiques.<\/p>\n<\/blockquote>\n Passionnant. On sentait que le pr\u00e9sentateur est enseignant-chercheur, \u00e0 sa mani\u00e8re de parler, je me suis vraiment retrouv\u00e9e \u00e0 la fac pendant un petit temps, trop petit h\u00e9las. La conf\u00e9rence aurait m\u00e9rit\u00e9 deux heures, pas 20 minutes.<\/p>\n Les pseudo-\u00e9l\u00e9ments, \u00e7a n’a l’air de pas grand chose, mais ces petits trucs de CSS ont un potentiel incroyable. L’id\u00e9e ici sera de faire une piq\u00fbre de rappel, et de montrer \u00e0 quel point, combin\u00e9s \u00e0 d’autres techniques CSS, les pseudo-\u00e9l\u00e9ments peuvent-\u00eatre une r\u00e9elle opportunit\u00e9 \u00e0 la cr\u00e9ativit\u00e9 et \u00e0 l’optimisation du code.<\/p>\n<\/blockquote>\n La conf\u00e9rence se focalisait sur les classiques Alors que le choix typographique occupe une place de plus en plus importante dans la conception web, tous les projets finissent par h\u00e9riter des m\u00eames caract\u00e8res.<\/p>\n Ensemble, donnons une plus forte personnalit\u00e9 \u00e0 vos projets web en sortant des sentiers battus et en donnant une chance \u00e0 de jeunes plombs prometteurs.<\/p>\n<\/blockquote>\n Dans cette conf\u00e9rence, j’ai appris que je pouvais – que je devrais – remettre L’utilisateur est encore moins patient sur mobile que sur son bureau et pourtant il semblerait que le jeu soit de lui afficher un maximum de contenu \u00e0 travers une bande passante ch\u00e9tive, sur un mat\u00e9riel poussif.<\/p>\n Quels sont les enjeux de la vitesse sur mobile, les techniques pour se rire des contraintes et la strat\u00e9gie pour s’en sortir dans presque toutes les situations ?<\/p>\n<\/blockquote>\n Dans un contexte professionnel, on a souvent le temps, les moyens et les ressources pour faire de l\u2019UX dans des conditions optimales: analyse, documentation, maquettage, tests, grooming sessions, QA\u2026<\/p>\n Oubliez tout \u00e7a, vous avez 48h, les gens de votre \u00e9quipe n\u2019ont jamais travaill\u00e9 ensemble et ce sera Armageddon. Laissez-moi vous expliquer comment \u00e7a se passe, vous donner quelques conseils pour survivre \u00e0 tout \u00e7a et en tirer des le\u00e7ons pour am\u00e9liorer vos pratiques professionnelles.<\/p>\n<\/blockquote>\n Personnellement, participer \u00e0 un hackathon ne m’int\u00e9resse pas vraiment. Je crois que \u00ab\u00a0sortir de ma zone de confort\u00a0\u00bb n’est pas pour moi, pour l’instant – et je crois aussi que je ne me trouve pas suffisamment cal\u00e9e pour cr\u00e9er quelque chose d’envergure en 48h.<\/p>\n Tr\u00e8s critiqu\u00e9 et d\u00e9cri\u00e9 a cause des nombreuses erreurs du pass\u00e9, les profils et adaptations c\u00f4t\u00e9 serveur permettent pourtant d’optimiser et d’am\u00e9liorer les performances de chargement tout en simplifiant grandement code et workflow de vos sites et applications web. Ils sont aussi tr\u00e8s utile l\u00e0 o\u00f9 Javascript n’est pas une option (email, webservice, \u2026)<\/p>\n<\/blockquote>\n Retours sur 5 mythes qui vous pourrissent la vie au quotidien, et quelques m\u00e9thodes simples pour vous en sortir !<\/p>\n<\/blockquote>\n Est-que l’on peut faire de l’UX, de l’ergonomie, sans utilisateurs\u202f? Quels sont les r\u00e9sultats ou les cons\u00e9quences\u202f?<\/p>\n \u00c0 l\u2019aide de trois retours d\u2019exp\u00e9riences sur des projets, j\u2019illustrerais comment l\u2019absence plus ou moins prononc\u00e9e des utilisateurs va influencer la conception et comment, si possible, limiter les d\u00e9g\u00e2ts.<\/p>\n<\/blockquote>\n Whoa. Je crois que \u00e7a d\u00e9crit bien. J’ai appris plein de trucs – m\u00eame l\u00e0 o\u00f9 je pensais d\u00e9j\u00e0 bien ma\u00eetriser, comme les pseudo-\u00e9l\u00e9ments, o\u00f9 j’ai d\u00e9couvert l’existence de Donc, oui, whoa.<\/p>\n Strasbourg, c’est un peu loin, et 12 heures de trajets en trois jours, c’est rude, mais je rempile pour l’an prochain, promis.<\/p>\n","protected":false},"excerpt":{"rendered":" Vendredi 19 juin, c’\u00e9tait la Kiwiparty ! La Kiwiparty, c’est une journ\u00e9e de conf\u00e9rences organis\u00e9e par l’agence strasbourgeoise Alsacr\u00e9ations, et c’est bien cool : accessibilit\u00e9, UX, performances, petits g\u00e2teaux et […]<\/p>\n","protected":false},"author":1,"featured_media":795,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[35],"tags":[98,103,106,104,105,29],"_links":{"self":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/posts\/791"}],"collection":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/comments?post=791"}],"version-history":[{"count":0,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/posts\/791\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/media\/795"}],"wp:attachment":[{"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/media?parent=791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/categories?post=791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/informatique.lamecarlate.net\/wp-json\/wp\/v2\/tags?post=791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Les conf\u00e9rences<\/h2>\n
Icon-fonts vs SVG sprites (Vincent de Oliveira)<\/h3>\n
\n
\n
Les personas : comment les concevoir et les utiliser (Gwennola Pierre)<\/h3>\n
\n
Le debug d\u2019applications web simplifi\u00e9 (Etienne Margraff et David Rousset)<\/h3>\n
\n
Le chasseur-cueilleur, Hannibal Lecter, et autres consid\u00e9rations ergonomiques (Antonio Capobianco)<\/h3>\n
\n
\n
Les pseudo-\u00e9l\u00e9ments, c’est bon ! (Matthieu Bu\u00e9)<\/h3>\n
\n
::before<\/code> et ::after<\/code> en nous montrant des exemples tr\u00e8s \u00e9volu\u00e9s et tr\u00e8s cools.<\/p>\n\n
Le web et ses sales caract\u00e8res (Damien Senger)<\/h3>\n
\n
local()<\/code> dans mes d\u00e9clarations de font-face<\/code>, car la seule raison pour laquelle il a fallu l’\u00e9viter pendant un temps c’est parce que \u00e7a merdouillait sur Android 2.2 et 3.<\/p>\n\n
Faire passer un mammouth dans un tuyau d’arrosage (aka la performance sur mobile) (Jean-Pierre Vincent)<\/h3>\n
\n
UX design & hackathon : un guide de survie (Laurence Vagner)<\/h3>\n
\n
\n
Le responsive c\u00f4t\u00e9 serveur (R\u00e9mi Grumeau)<\/h3>\n
\n
\n
Et si on parlait productivit\u00e9 ? (Nicolas Birckel)<\/h3>\n
\n
\n
L’UX sans Utilisateur n’est que pornographie (Rapha\u00ebl Yharrassarry)<\/h3>\n
\n
Mon ressenti sur cette journ\u00e9e<\/h2>\n
::marker<\/code> dont j’attends d\u00e9sormais l’impl\u00e9mentation avec impatience. J’ai crois\u00e9 des gens chouettes. Des gens super sympas. Et une licorne, si si. Qui m’a offert une lithographie maison d’artichaut (merciiiiii @hellgy<\/a>). Lors du quiz final \u00e0 l’:after, mon \u00e9quipe a gagn\u00e9 in extremis et je suis repartie avec \u00ab\u00a0CSS 3 Pratique du Design Web\u00a0\u00bb d’Hugo Giraudel et Rapha\u00ebl Goetter, que j’ai pu faire d\u00e9dicacer par ce dernier (si tu me lis, Rapha\u00ebl, d\u00e9sol\u00e9e pour ma blague pas dr\u00f4le, je ne voulais vraiment pas t’emb\u00eater).<\/p>\n