{"id":6423,"date":"2017-11-08T09:09:54","date_gmt":"2017-11-08T08:09:54","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6423"},"modified":"2018-03-06T16:57:58","modified_gmt":"2018-03-06T15:57:58","slug":"les-ressources-du-web-35","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/les-ressources-du-web-35","title":{"rendered":"Les Ressources du Web #35"},"content":{"rendered":"<p>S\u00e9lection un peu plus riche que la derni\u00e8re, une bonne synth\u00e8se du dernier mois, avec des outils en design et typographie, ainsi que quelques ressources en HTML\/CSS\/JS pour optimiser le chargement de vos fontes et d&rsquo;autres \u00e9l\u00e9ments de votre interface. Pas mal d&rsquo;outils en UX\/Design ainsi que quelques liens funs et inspirants.<\/p>\n<p><!--more--><\/p>\n<h2>S&rsquo;il fallait n&rsquo;en retenir qu&rsquo;un<\/h2>\n<p><a href=\"https:\/\/freehand.invisionapp.com\/freehand\/new\"><img decoding=\"async\" class=\"alignnone wp-image-6445 size-full\" src=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/11\/freehand.jpg\" alt=\"\" width=\"1800\" height=\"1180\" srcset=\"https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/11\/freehand.jpg 1800w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/11\/freehand-300x197.jpg 300w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/11\/freehand-768x503.jpg 768w, https:\/\/www.creativejuiz.fr\/blog\/wp-content\/uploads\/2017\/11\/freehand-600x393.jpg 600w\" sizes=\"(max-width: 1800px) 100vw, 1800px\" \/><\/a><\/p>\n<p><a href=\"https:\/\/freehand.invisionapp.com\/freehand\/new\">Freehand<\/a> est un outil collaboratif pour \u00ab\u00a0discuter\u00a0\u00bb graphiquement autour d&rsquo;un sujet, soit pour cr\u00e9er un wireframe, soit pour commenter graphiquement un \u00e9l\u00e9ment. Les utilisateurs se voient les uns les autres et le fichier compos\u00e9 \u00e0 plusieurs peut \u00eatre enregistr\u00e9 sur un board.<\/p>\n<h2>HTML \/ CSS \/ JS<\/h2>\n<ul>\n<li><a href=\"https:\/\/codepen.io\/CreativeJuiz\/full\/OxeKrZ\">CSS Smooth Corner<\/a> &#8211; Un effet smooth corner avec CSS.<\/li>\n<li><a href=\"https:\/\/codepen.io\/chrisgannon\/details\/zEVjKg\/\">Sushi Switcher<\/a> &#8211; Un switcher rigolo avec des sushis, juste pour le fun.<\/li>\n<li><a href=\"http:\/\/lab.iamvdo.me\/houdini\/\">CSS Houdini Demo<\/a> &#8211; Des d\u00e9monstrations bien fun de CSS Houdini.<\/li>\n<li><a href=\"https:\/\/gethead.info\/\">GetHead<\/a> \u2013 Tout ce que vous pouvez mettre dans le <code>&lt;head&gt;<\/code> de votre document.<\/li>\n<li><a href=\"https:\/\/www.zachleat.com\/web\/font-loading-classes\/\">Font Loading in CSS made simple<\/a> \u2013 La technique simple pour charger vos fontes exotiques sans perdre en performance.<\/li>\n<li><a href=\"https:\/\/jonathan-harrell.com\/advanced-css-form-styling\/\">Pseudo-classes in forms<\/a> \u2013 Quelques pseudos classes utiles pour styler vos formulaires.<\/li>\n<li><a href=\"https:\/\/codepen.io\/sdras\/full\/dVwaZG\/\">Debug transform-origin<\/a> \u2013 Un petit CodePen pour bidouiller transform-origin.<\/li>\n<li><a href=\"https:\/\/fontfaceobserver.com\/\">Font Face Observer<\/a> \u2013 Comment charger efficacement vos webfonts.<\/li>\n<\/ul>\n<h2>Design \/ UX<\/h2>\n<ul>\n<li><a href=\"https:\/\/www.invisionapp.com\/blog\/announcing-invision-design-system-manager\/\">Invision Design System Manager<\/a> &#8211; Un manager pour votre Design System.<\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2017\/10\/nailing-accessibility-design\/?utm_content=buffer794ba&amp;utm_medium=social&amp;utm_source=twitter.com&amp;utm_campaign=buffer\">Nailing Accessibility in Design<\/a> &#8211; Arr\u00eatez de designer pour uniquement 85% des utilisateurs.<\/li>\n<li><a href=\"https:\/\/uxdesign.cc\/questions-ux-designers-should-be-asking-bc9a6ba87a34\">Questions UX Designers Should be asking<\/a> \u2013 Les questions \u00e0 poser aux personnes autour d&rsquo;un produit afin d&rsquo;aider dans le design de celui-ci.<\/li>\n<li><a href=\"https:\/\/blog.stephaniewalter.fr\/ameliorer-experience-utilisateur-perception-performance\/\">Am\u00e9liorer l&rsquo;exp\u00e9rience utilisateur[\u2026]<\/a>\u00a0\u2013 R\u00e9sum\u00e9 et slides de l&rsquo;excellente conf\u00e9rence de St\u00e9phanie Walter sur la perception de la performance.<\/li>\n<li><a href=\"https:\/\/medium.com\/sketch-app-sources\/fontbuddy-for-sketch-never-deal-with-missing-fonts-again-da627cfc93ee\">FontBuddy<\/a> \u2013 Un outil Sketch pour ne plus avoir de fontes manquantes.<\/li>\n<li><a href=\"https:\/\/freehand.invisionapp.com\/\">FreeHand<\/a> \u2013 Un outil de sketching en live collaboratif par InVision.<\/li>\n<li><a href=\"https:\/\/wpostats.com\/\">WPO Stats<\/a> \u2013 Des \u00e9tudes de cas de l&rsquo;impact de la performance sur l&rsquo;UX et d&rsquo;autres m\u00e9triques.<\/li>\n<\/ul>\n<h2>WordPress<\/h2>\n<ul>\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wordpress-mobile-pack\/\">WordPress Mobile Pack<\/a> &#8211; De la Progressive Web App dans votre WordPress.<\/li>\n<li><a href=\"https:\/\/athemes.com\/performance\/imagify-vs-ewww-vs-kraken-vs-wp-smush-vs-shortpixel\/\">Image Optimization Compared<\/a> \u2013 Un comparatif des outils de compression d&rsquo;image pour WordPress.<\/li>\n<\/ul>\n<h2>Fun et inspiration<\/h2>\n<ul>\n<li><a href=\"https:\/\/weblog.redisdead.net\/main\/post\/2017\/11\/01\/Inktober-2017\">Inktober 2017 sur RedisDead<\/a> \u2013 Des illustrations par <a href=\"http:\/\/twitter.com\/hellgy\">Hellgy<\/a>.<\/li>\n<li><a href=\"https:\/\/about.udemy.com\/newbrand\/\">Udemy new brand<\/a> \u2013 La nouvelle identit\u00e9 de Udemy expliqu\u00e9e.<\/li>\n<li><a href=\"https:\/\/purrli.com\/\">Purrli<\/a> \u2013 Un son de chat qui ronronne pour vous reposer\u2026 (r\u00e9glable)<\/li>\n<li><a href=\"https:\/\/www.newyorker.com\/humor\/daily-shouts\/freelance-achievement-stickers\">Freelance Achievement Stickers<\/a> \u2013 Des stickers rigolos pour freelance.<\/li>\n<\/ul>\n<h2>Outils<\/h2>\n<ul>\n<li><a href=\"https:\/\/sonarwhal.com\/\">Sonar<\/a> \u2013 Un outil d&rsquo;analyse de qualit\u00e9 pour votre site web.<\/li>\n<li><a href=\"http:\/\/fontastic.me\/\">Fontastic<\/a> \u2013 Cr\u00e9ez votre propre fonte-icon (fonte).<\/li>\n<li><a href=\"https:\/\/meowni.ca\/font-style-matcher\/\">Font Style Matcher<\/a> \u2013 Pour cr\u00e9er des empilements de fontes coh\u00e9rents.<\/li>\n<li><a href=\"https:\/\/www.flinto.com\/\">Flinto<\/a> \u2013 L&rsquo;outil parfait pour cr\u00e9er des interactions anim\u00e9es.<\/li>\n<li><a href=\"https:\/\/rogervoice.com\/fr\/home\">RogerVoice<\/a> \u2013 Un outil pour sous-titrer instantan\u00e9ment vos conversations t\u00e9l\u00e9phoniques.<\/li>\n<\/ul>\n<p>Have fun et bonne lecture !<\/p>\n","protected":false},"excerpt":{"rendered":"<p>S\u00e9lection un peu plus riche que la derni\u00e8re, une bonne synth\u00e8se du dernier mois, avec des outils en design et typographie, ainsi que quelques ressources en HTML\/CSS\/JS pour optimiser le chargement de vos fontes et d&rsquo;autres \u00e9l\u00e9ments de votre interface. Pas mal d&rsquo;outils en UX\/Design ainsi que quelques liens funs et inspirants.<\/p>\n","protected":false},"author":4,"featured_media":5931,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bluesky_dont_syndicate":"","_bluesky_syndication_accounts":"","_bluesky_syndication_text":"","footnotes":""},"categories":[50],"tags":[],"coauthors":[597],"class_list":["post-6423","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources-telechargements"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/comments?post=6423"}],"version-history":[{"count":1,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6423\/revisions"}],"predecessor-version":[{"id":6489,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/6423\/revisions\/6489"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/5931"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=6423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=6423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=6423"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=6423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}