Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Créatifs : Boostez votre productivité

0d67d4ac82fb031ff815245ae00e1a97?s=47 Antoine RICHARD
November 26, 2013

Créatifs : Boostez votre productivité

Présentation d'outils de productivité destinés à un public d'intégrateurs web.

Talk co-animé avec Julien Bodet (https://plus.google.com/+JulienBodet_FR) au Stéréolux à Nantes, le 26/11/2013.
Sources du workshop : https://github.com/jbodet/webdesign-productivity-workshop

0d67d4ac82fb031ff815245ae00e1a97?s=128

Antoine RICHARD

November 26, 2013
Tweet

Transcript

  1. CRÉATIFS : BOOSTEZ VOTRE PRODUCTIVITÉ ANTOINE RICHARD JULIEN BODET

  2. TIRER PARTIE DE SON ÉDITEUR UTILISER UN PRÉPROCESSEUR CSS AUTOMATISER

    SON WORKFLOW
  3. ÉDITEUR

  4. OMG! http://www.flickr.com/photos/rchua/

  5. BRACKETS

  6. BRACKETS Intégration en flux continu brackets.io

  7. BRACKETS • WYSIWYG • Propriétés CSS • Intégration accélérée •

    Plugins contributifs (RWD, PSD, livereload) • Solution « jeune » • Code produit • Edition CSS via le DOM • Plugins dans l’ère du temps ? (AI, Compass)
  8. FINI DE RÊVASSER http://www.flickr.com/photos/skorecky/

  9. SUBLIME TEXT

  10. INSTALLATION • Installer Sublime Text sublimetext.com

  11. AU CLAVIER UNIQUEMENT ! http://www.flickr.com/photos/formerglory/

  12. RACCOURCIS • Ctrl+Shift+P : console • Ctrl+P : goto anything

    • Ctrl+D : multi selection • Ctrl+Shift+D : duplication • Ctrl+J : join lines • Ctrl+Shift+Up/Down : move line • Ctrl+/ : comment • Alt+Shift+1 / Alt+Shift+2 : split view • Ctrl+Shift+[1-9] / Ctrl+[1-9] : switch / select view http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_win.html http://docs.sublimetext.info/en/latest/reference/keyboard_shortcuts_osx.html
  13. SNIPPETS • Automatiser les éléments redondants • Contextualisation en fonction

    du langage (HTML, CSS, JS, etc.) • Possibilité de créer des éléments complexes (tabulations, éléments pré-renseignés, etc.)
  14. CREATION D’UN SNIPPET <snippet> <content><![CDATA[ <!doctype html> <!--[if lte IE

    6]> <html class="no-js ie6 ie67 ie678" lang="fr"> <![endif]--> <!--[if IE 7]> <html class="no-js ie7 ie67 ie678" lang="fr"> <![endif]--> <!--[if IE 8]> <html class="no-js ie8 ie678" lang="fr"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="fr"> <!--<![endif]--> <head> <meta charset="UTF-8"> <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]--> <title>${1}</title> <meta name="viewport" content="initial-scale=1.0"> <!-- Download HTMLshiv for IE : https://code.google.com/p/html5shiv/ --> <!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <link rel="stylesheet" href="${2:styles/}styles.css" media="all"> </head> <body> ${3} </body> </html> ]]></content> <!-- Optional: Set a tabTrigger to define how to trigger the snippet --> <tabTrigger>doctype</tabTrigger> <!-- Optional: Set a scope to limit where the snippet will trigger --> <!-- <scope>source.python</scope> --> </snippet> HTML DOCTYPE
  15. PACKAGE CONTROL • Installer Package Control sublime.wbond.net Installation « Install

    package » Désinstallation « Remove package »
  16. CULTIVER SA FAINÉANTISE http://www.flickr.com/photos/micheeky/

  17. 2009 : Zen Coding 2012 : Emmet • Installer Emmet

    emmet.io • Via Package Control – Ctrl+Shift+P – Install package – Emmet PLUGIN : EMMET
  18. PLUGIN : EMMET ul>li*5>a[href=#]>span{Item $} EMMET <ul> <li><a href="#"><span>Item 1</span></a></li>

    <li><a href="#"><span>Item 2</span></a></li> <li><a href="#"><span>Item 3</span></a></li> <li><a href="#"><span>Item 4</span></a></li> <li><a href="#"><span>Item 5</span></a></li> </ul> HTML
  19. PLUGIN : EMMET header>div>a[href=#]>h1.logo>span{Interface name}^^span.separator+a[href=#]>div.user>span.name>span{Jim Jameson}+span{Lorem ipsum dolor es...}^figure.online>img[src=images/me.png] EMMET

    <header> <div> <a href="#"> <h1 class="logo"><span>Interface name</span></h1></a> <span class="serparator"></span> <a href="#"> <div class="user"> <span class="name"><span>Jim Jameson</span><span>Lorem ipsum dolor es...</span></span> <figure class="online"><img src="images/me.png" alt=""></figure> </div> </a> </div> </header> HTML
  20. PLUGIN : EMMET header { m0-auto w100%! mw1024 tac }

    EMMET header { margin: 0 auto; width: 100% !important; max-width: 1024px; text-align: center; } CSS Une multitude de raccourcis : tdn, vam, dn, db, dib, oh, c, fs, fw, etc.
  21. PREPROCESSEUR CSS

  22. Pourrait-on remplacer le #f60 du background des boutons par un

    #9c0 ? Par contre on conserve le #f60 des h2 et des liens, hein ? -- un client
  23. En fait, c’est pas top le #9c0. On peut mettre

    un #f30 plutôt ? -- le même client
  24. KEEP CALM! http://www.flickr.com/photos/97038533@N05/

  25. D R Y

  26. DON’T REPEAT YOURSELF

  27. PRÉPROCESSEUR CSS

  28. PRIX DE LA RÉUTILISABILITÉ, FLEXIBILITÉ, MAINTENABILITÉ, PRODUCTIVITÉ LESS / SASS

    CSS COMPILATION
  29. 2007 *.less *.sass (syntaxe indentée) 2009 2010 Demande du travail

    pour convertir les CSS existants CSS classique = LESS valide *.scss CSS classique = SCSS valide
  30. VARIABLES @primary: #f9c; h1 { color: @primary; } .footer {

    background: @primary; } $primary: #f9c; h1 { color: $primary; } .footer { background: $primary; } LESS SCSS h1 { color: #f9c; } .footer { background: #f9c; } CSS
  31. COULEURS $primary: #f9c; $increment: #333; h2 { color: $primary +

    $increment; } h3 { color: $primary - $increment; } aside { background: lighten($primary, 25%); } SCSS
  32. IMBRICATION #header { h1 { font-size: 26px; } p {

    font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } SCSS
  33. MIXINS @mixin border { border-top: 1px dotted #333; } article.post

    { background: #eee; @include border; } ul.menu { background: #ccc; @include border; } SCSS
  34. MIXINS PARAMÉTRÉS @mixin sexy-border($color, $width: 1px) { border-color: $color; border-width:

    $width; } p { @include sexy-border(blue); } h1 { @include sexy-border(blue, 3px); } SCSS
  35. HÉRITAGE .message { border: 1px solid #ccc; padding: 10px; }

    .success { @extend .message; color: green; } .error { @extend .message; color: red; } SCSS
  36. STRUCTURES DE CONTRÔLE @if lightness($color) > 30% { background-color: #000;

    } @else { background-color: #fff; } SCSS http://sass-lang.com/documentation/file.SASS_REFERENCE.html And more...
  37. COMPASS

  38. CSS SASS COMPASS

  39. INSTALLATION DE COMPASS • Installer Ruby • Windows : rubyinstaller.org

    • Mac : Vous l’avez déjà  Mettre à jour gem via gem update --system • Installer Compass (et Sass) gem install compass • Installer le plugin via Sublime Text
  40. CONFIGURATION # Chemin de base http_path = “/” # Chemin

    vers les fichiers sources sass_dir = “app/scss” # Chemin vers les fichiers générés css_dir = “app/css” # Répertoire des images (image-url, etc.) images_dir = “app/images” # Répertoire pour les sprites http_generated_images_path = “../images” Config.rb
  41. MIXINS CSS3 • Box-shadow • Opacity • Transform • Transition

    @include border-radius(5px); -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; COMPASS CSS Vendor prefixes (caniuse.com)
  42. EST-IL INDISPENSABLE DE CONNAÎTRE LES DIMENSIONS D’UN ELEMENT ? http://www.flickr.com/photos/tokyo_lama/

  43. GESTION DES IMAGES • Mixins : – image-url : plus

    besoin de spécifier le chemin – image-width / image-height SASS COMPASS CSS width: image-width(visual.png); height: image-height(visual.png); width:100px; height:150px; images_dir
  44. LE CASSE-TÊTE DES SPRITES http://www.flickr.com/photos/chiotsrun/

  45. GESTION DES SPRITES • Génération du fichier « sprite »

    • Plus besoin de gérer background-position SASS COMPASS CSS + sprite @import "icons/*.png"; .picto_like { @include icons-sprite(like); } images_dir Homogénéité des dimensions
  46. GESTION DES IMAGES Bug ? • Problème d’importation des sprites

    lié au générateur compass https://github.com/chriseppstein/compass/commit/58babac sprite_importer.rb
  47. AUTOMATISATION

  48. GRUNT

  49. None
  50. INSTALLATION DE GRUNT • Installer Node.js nodejs.org • Installer Grunt

    npm install –g grunt-cli
  51. BUILD SCSS HTML IMAGES SPRITE HTML CSS

  52. WATCH SCSS CSS EXÉCUTION DE TÂCHES LORS DE MODIFICATION DE

    FICHIERS
  53. LIVE RELOAD

  54. LIVE RELOAD HTML, CSS... RAFRAICHISSEMENT AUTOMATIQUE DU NAVIGATEUR

  55. BONUS

  56. COMMENT TESTEZ-VOUS VOS SITES SUR DE MULTIPLES DEVICES ? Merci

    à Luke Wroblewski – lukew.com
  57. http://viljamis.com/blog/2012/remote-preview

  58. RAFRAÎCHIR TOUS SES APPAREILS LORSQU’UN FICHIER EST MODIFIÉ Configurez le

    hostname de votre serveur LiveReload sur 0.0.0.0 Voir aussi Adobe Edge Inspect, remote preview...
  59. MERCI DE VOTRE ATTENTION http://www.flickr.com/photos/52544814@N00/ github.com/jbodet/webdesign-productivity-workshop