{"id":3961,"date":"2014-05-04T23:16:47","date_gmt":"2014-05-04T21:16:47","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=3961"},"modified":"2014-05-04T23:16:47","modified_gmt":"2014-05-04T21:16:47","slug":"les-ressources-du-web-6","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/ressources-telechargements\/les-ressources-du-web-6","title":{"rendered":"Les ressources du Web #6"},"content":{"rendered":"<p>Sixi\u00e8me \u00e9dition des Ressources du Web avec au programme pas mal de ressources en design, \u00e9lements d&rsquo;UI ou ergonomie ; de quoi am\u00e9liorer les animations et interactions de vos sites gr\u00e2ce \u00e0 JS ou revoir votre <em lang=\"en\">workflow<\/em> gr\u00e2ce \u00e0 quelques astuces et outils plus ou moins adapt\u00e9s \u00e0 vos m\u00e9thodes de travail. \u00ab\u00a0Allons-y&nbsp;!\u00a0\u00bb<!--more--><\/p>\n<h2>Inspiration<\/h2>\n<ul>\n<li><a href=\"http:\/\/moto360.motorola.com\/\" lang=\"en\">Moto360<\/a> &#8211; une montre Android \u00e9l\u00e9gante<\/li>\n<li><a href=\"http:\/\/usepanda.com\/\" lang=\"en\" hreflang=\"en\">UsePanda<\/a> &#8211; inspiration et news quotidiennes pour les webdesigners<\/li>\n<li><a href=\"https:\/\/medium.com\/p\/3d1b0a9b810e\" lang=\"en\" hreflang=\"en\">Animations de formulaires<\/a> &#8211; inspiration ergonomique, les animations au service des formulaires.<\/li>\n<li><a href=\"http:\/\/blog.assaflavie.com\/wikipedia\/\" lang=\"en\" hreflang=\"en\">Wikipedia redesign<\/a> &#8211; suggestion ergonomique pour optimiser la navigation dans wikipedia<\/li>\n<li><a href=\"http:\/\/pixelbuddha.net\/freebie\/flat-preloaders\" lang=\"en\" hreflang=\"en\">Flat Preloaders<\/a> &#8211; des preloader\/loader flat pour inspiration (ou \u00e0 t\u00e9l\u00e9charger)<\/li>\n<li><a href=\"http:\/\/tabpatterns.com\/\" lang=\"en\" hreflang=\"en\">TabPatterns<\/a> &#8211; inspiration UI\/UX pour design tablette<\/li>\n<\/ul>\n<h2>JavaScript<\/h2>\n<ul>\n<li><a href=\"http:\/\/scrolldepth.parsnip.io\/\" lang=\"en\" hreflang=\"en\">ScrollDepth<\/a> &#8211; plugin jQuery qui permet de relever des statistiques Google Analytics de la profondeur de navigation dans une page.<\/li>\n<li><a href=\"https:\/\/github.com\/uberVU\/grid\" lang=\"en\" hreflang=\"en\">Grid<\/a> &#8211; une biblioth\u00e8que pour glisser\/d\u00e9poser des \u00e9l\u00e9ments, g\u00e9rer leur taille, et responsive.<\/li>\n<li><a href=\"http:\/\/qrohlf.com\/trianglify\/\" lang=\"en\" hreflang=\"en\">Trianglify<\/a> &#8211; biblioth\u00e8que JS pour cr\u00e9er des images SVG ou background compos\u00e9s de triangles<\/li>\n<li><a href=\"http:\/\/bigspaceship.github.io\/shine.js\/\" lang=\"en\" hreflang=\"en\">ShineJS<\/a> &#8211; une biblioth\u00e8que pour g\u00e9n\u00e9rer de belles ombres port\u00e9es<\/li>\n<li><a href=\"http:\/\/julian.com\/research\/velocity\/\" lang=\"en\" hreflang=\"en\">VelocityJS<\/a> &#8211; des animations jQuery plus performantes que jamais.<\/li>\n<\/ul>\n<h2>Ressources code<\/h2>\n<ul>\n<li><a href=\"http:\/\/flexboxgrid.com\/\" lang=\"en\" hreflang=\"en\">flexBox Grid<\/a> &#8211; un grille avec Flexbox<\/li>\n<li><a href=\"http:\/\/embedresponsively.com\/\" lang=\"en\" hreflang=\"en\">Embed Responsively<\/a> &#8211; des services tierces (API, frame) responsive<\/li>\n<\/ul>\n<h2>Workflow et tutoriels<\/h2>\n<ul>\n<li><a href=\"http:\/\/vimeo.com\/78326642\" lang=\"en\" hreflang=\"en\">Web mobile workflow<\/a> &#8211; repenser le d\u00e9veloppement mobile<\/li>\n<li><a href=\"https:\/\/github.com\/tooling\/book-of-modern-frontend-tooling\" lang=\"en\" hreflang=\"en\">Book of modern frontend Tooling<\/a> &#8211; un bouquin collaboratif sur les outils modernes du d\u00e9veloppeur front-end<\/li>\n<li><a href=\"http:\/\/designmodo.com\/steps-css-animations\/\">Utiliser Steps()<\/a> &#8211; utiliser <code>steps()<\/code> pour cr\u00e9er des \u00e9tapes dans vos animations CSS (<code>@keyframes<\/code>)<\/li>\n<li><a href=\"http:\/\/pumpula.net\/p\/apps\/css-vocabulary\/\" lang=\"en\" hreflang=\"en\">CSS vocabulary<\/a> &#8211; le vocabulaire CSS r\u00e9sum\u00e9 de mani\u00e8re pratique<\/li>\n<\/ul>\n<h2>Outils<\/h2>\n<ul>\n<li><a href=\"http:\/\/iconion.com\/\">Iconion<\/a> &#8211; faites vos ic\u00f4nes vous-m\u00eame gr\u00e2ce \u00e0 cet outil<\/li>\n<li><a href=\"http:\/\/dribbbox.com\/\">Dribbbox<\/a> &#8211; cr\u00e9ez votre portfolio Dribbble auto-h\u00e9bergez (vous pouvez pr\u00e9visualiser le rendu avant t\u00e9l\u00e9chargement)<\/li>\n<li><a href=\"http:\/\/schnappsformac.com\/\">SchnappsForMac<\/a> &#8211; cr\u00e9ez vos clips vid\u00e9o \u00ab\u00a0time-laps\u00a0\u00bb avec cette application Mac<\/li>\n<li><a href=\"http:\/\/dandkagency.com\/velositey\/\">Velositey<\/a> &#8211; construisez vos wireframe rapidement (compatible CS6+)<\/li>\n<li><a href=\"http:\/\/responsiveemailpatterns.com\/\">Reponsive Mail Patterns<\/a> &#8211; des gabarits d&rsquo;e-mail responsive<\/li>\n<li><a href=\"https:\/\/redpen.io\/\">RedPen.io<\/a> &#8211; annotez et \u00e9changez avec votre client ou votre \u00e9quipe directement sur les visuels de votre projet (payant)<\/li>\n<li><a href=\"http:\/\/www.invisionapp.com\/\">Invision App<\/a> &#8211; pareil que RedPen mais en plus complet encore<\/li>\n<li><a href=\"http:\/\/projectnaptha.com\">Project Naptha<\/a> &#8211; de l&rsquo;<abbr title=\"Reconnaissance Optique des Caract\u00e8res\">OCR<\/abbr> sur les images du web, mais en mieux (copiez\/collez, traduisez, etc.)<\/li>\n<li><a href=\"http:\/\/avocode.com\/\">Avocode<\/a> &#8211; pr\u00e9visualiser et inspecter un PSD sans Photoshop<\/li>\n<li><a href=\"https:\/\/projectparfait.adobe.com\/\">Project Parfait<\/a> &#8211; extrayez tout ce dont vous avez besoin de vos PSDs sans Photoshop.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Sixi\u00e8me \u00e9dition des Ressources du Web avec au programme pas mal de ressources en design, \u00e9lements d&rsquo;UI ou ergonomie ; de quoi am\u00e9liorer les animations et interactions de vos sites gr\u00e2ce \u00e0 JS ou revoir votre workflow gr\u00e2ce \u00e0 quelques astuces et outils plus ou moins adapt\u00e9s \u00e0 vos m\u00e9thodes de travail. \u00ab\u00a0Allons-y&nbsp;!\u00a0\u00bb<\/p>\n","protected":false},"author":4,"featured_media":3679,"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":[222,33,472,581],"coauthors":[],"class_list":["post-3961","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ressources-telechargements","tag-android","tag-design","tag-ressources-2","tag-technologie"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3961","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=3961"}],"version-history":[{"count":0,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/posts\/3961\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media\/3679"}],"wp:attachment":[{"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/media?parent=3961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/categories?post=3961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/tags?post=3961"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.creativejuiz.fr\/blog\/wp-json\/wp\/v2\/coauthors?post=3961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}