Le Kit du Parfait Petit Intégrateur (PW2009)

3 733 vues

Publié le

Préparée et présentée avec Marie Alhomme (http://www.pouipouidesign.net) pour Paris Web 2009. http://www.paris-web.fr/2009/

Téléchargez le PDF pour profiter de tous les liens inclus dans la présentation (sur les captures d'écran ou le nom des outils).

Publié dans : Technologie
0 commentaire
8 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
3 733
Sur SlideShare
0
Issues des intégrations
0
Intégrations
150
Actions
Partages
0
Téléchargements
72
Commentaires
0
J’aime
8
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le Kit du Parfait Petit Intégrateur (PW2009)

  1. 1. 2009 LE KIT DU PARFAIT PETIT INTÉGRATEUR Bien monter et tester ses sites web Marie Alhomme Thierry Régagnon
  2. 2. PRÉSENTATION MARIE ALHOMME WebDesigner/Intégratrice xHTML/CSS/JS en tant que PouipouiDesign Membre de Pompage.net Membre du WaSP International Liaison Group 2
  3. 3. PRÉSENTATION THIERRY RÉGAGNON Consultant pour le cabinet de conseil Membre du WaSP International Liaison Group 3
  4. 4. Etape 1 DÉCOUPE DES PSD Varie beaucoup selon les projets, on saute cette étape pour cette fois. 4
  5. 5. Etape 2 MONTAGE XHTML / CSS ET JAVASCRIPT 5
  6. 6. Etape 2 : Montage XHTML / CSS et Javascript NE PAS REPARTIR DE ZÉRO 6
  7. 7. RÉUTILISER DU CODE 7
  8. 8. 8
  9. 9. UN SITE « PAR DÉFAUT » 9
  10. 10. Etape 2 : Montage XHTML / CSS et Javascript QUEL LOGICIEL UTILISER ? 10
  11. 11. HTMLPAD PRO 11
  12. 12. TEXTMATE 12
  13. 13. Les logiciels des participants... • Windows • Linux • NotePad++ • gEdit • Programmer's Notepad • Screem • e Text Editor • Kate • Mac • Toute plateforme • Smultron • Komodo • Coda • Eclipse / Aptana • Text Wrangler • BBedit • CSSEdit • Espresso • GoLive 13
  14. 14. Etape 2 : Montage XHTML / CSS et Javascript FAIRE PREUVE DE MÉTHODE 14
  15. 15. VALIDE, SÉMANTIQUE & STANDARD 15
  16. 16. Etape 3 RECETTAGE GÉNÉRAL PAGE PAR PAGE 16
  17. 17. Etape 3 : Recettage général page par page SUIVI 17
  18. 18. OUTILS EN LIGNE 18
  19. 19. OUTILS « FAITS MAISON » 19
  20. 20. Les outils de suivi des participants... • JIRA • Trac • Redmine • LightHouse • Sifter 20
  21. 21. Etape 3 : Recettage général page par page S’AIDER DE RÉFÉRENCES 21
  22. 22. CODEBURNER extension Firefox 22
  23. 23. CHEAT SHEETS 23
  24. 24. MON OPQUAST 24
  25. 25. Les références des participants... • Widget : Mac / Opera / etc. • MSDN • selfHTML 25
  26. 26. Etape 3 : Recettage général page par page DÉBUGGAGE RENDU, FONCTIONNEL ET ACCESSIBILITÉ 26
  27. 27. CONNAÎTRE LE TERRAIN : LES DIFFÉRENTS MOTEURS DE RENDU 27
  28. 28. TRIDENT Internet Explorer 28
  29. 29. GECKO Firefox 29
  30. 30. WEBKIT Safari 30
  31. 31. PRESTO Opera 31
  32. 32. Etape 3 : Recettage général page par page DIFFÉRENTES VERSIONS D’INTERNET EXPLORER 32
  33. 33. EXPRESSION WEB SUPER PREVIEW 33
  34. 34. IE COLLECTION 34
  35. 35. RÉGLER LE CAS IE À PART • Des commentaires conditionnels pour tout code supplémentaire dédié à IE <!--[if IE]> ..ici, code HTML réservé à IE... <![endif]--> • Cibler au besoin une version précise ‣ http://www.blog-and-blues.org/articles/ Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows 35
  36. 36. Etape 3 : Recettage général page par page DIFFÉRENTES VERSIONS DE FIREFOX 36
  37. 37. PLUSIEURS PROFILS FIREFOX sous Windows 37
  38. 38. PLUSIEURS PROFILS FIREFOX sous Mac 38
  39. 39. Etape 3 : Recettage général page par page DIFFÉRENTES VERSIONS DE SAFARI 39
  40. 40. MULTI-SAFARI 40
  41. 41. Online SPOON BROWSER SANDBOX 41
  42. 42. Etape 3 : Recettage général page par page DIFFÉRENTES PLATEFORMES 42
  43. 43. Online BROWSERCAM 43
  44. 44. MACHINES VIRTUELLES 44
  45. 45. Travailler sous différents systèmes d’exploitation... • Parallels • VMware • VirtualBox • Virtual PC • Boot Camp • CrossOver / Wine 45
  46. 46. Etape 3 : Recettage général page par page OUTILS INTÉGRÉS AUX NAVIGATEURS 46
  47. 47. MONTAGE • Colorzilla (Firefox) • Web Developer Toolbar (Firefox) • Pixel Perfect (Firefox/Firebug) 47
  48. 48. FIREBUG 48
  49. 49. SAFARI WEB INSPECTOR 49
  50. 50. OPERA DRAGONFLY 50
  51. 51. IE WEBDEV TOOLS 51
  52. 52. ACCESSIBILITÉ • Juicy Studio (Firefox) • Web Developer Toolbar (Firefox) • Accessibility Toolbar (Internet Explorer) • Wave (Web Accessibility Evaluation Tool) 52
  53. 53. Les outils de debug des participants... • Capture Color • Firebug Lite • XRAY, MODIv2 (Favlets/Bookmarklets) • Fiddler • Accessibility Extension 53
  54. 54. Etape 3 : Recettage général page par page TESTER LES CONDITIONS «DÉGRADÉES» 54
  55. 55. DÉSACTIVER LES IMAGES 55
  56. 56. DÉSACTIVER JAVASCRIPT 56
  57. 57. Etape 4 OPTIMISATION 57
  58. 58. Etape 4 : Optimisation OBJECTIF : ALLÉGER LE POIDS DES PAGES 58
  59. 59. YSLOW extension Firefox 59
  60. 60. PAGE SPEED extension Firefox 60
  61. 61. DUST-ME SELECTORS extension Firefox 61
  62. 62. RÈGLES SIMPLES ET EFFICACES • CSS en haut de page et JavaScript en bas de page • Limiter le nombre de requêtes HTTP • Minifier les fichiers CSS et JavaScript • Activer la compression GZIP sur le serveur pour tout fichier texte ‣ http://developer.yahoo.com/performance/ ‣ http://code.google.com/intl/fr-FR/speed/page-speed/docs/rules_intro.html 62
  63. 63. Etape 4 : Optimisation OPTIMISATION RAPIDE ET EFFICACE : ALLÉGER LE POIDS DES IMAGES 63
  64. 64. SMUSH.IT service web 64
  65. 65. PUNYPNG service web 65
  66. 66. LOGICIELS • PNG : • OptiPNG, PNGOptimizer (Win) • PNGCrusher (Mac) • JPEG : • Image Sizer (Adobe Air) • PNG, GIF, JPEG : • Shrink O’Matic (Adobe Air) 66
  67. 67. Les outils d’optimisation des participants... • PNGOUT • Fireworks • Gadwin PrintScreen 67
  68. 68. Etape 5 ET ENSUITE ? 68
  69. 69. 69
  70. 70. 70
  71. 71. 71
  72. 72. 72
  73. 73. 73
  74. 74. 74
  75. 75. 75
  76. 76. 76
  77. 77. 77
  78. 78. 78
  79. 79. ET SUR TWITTER AUSSI ! 79
  80. 80. Standards Webdesign @WaSP_ILG @theprodesigner @csswg @toxiclab @w3c @naldzgraphics @nitot @DesignerDepot @waspinteract @artbox7 @bittbox Accessibilité @RussAdams @dboudreau @typekit @webatou Code Ressources diverses @ajaxdude @WebDeveloperr @Weblenium @alsacreations @jquery @smashingmag @jQueryHowto @BrettSinclair @usejquery Freelance Galerie jQuery @FreelanceSw @jquerysites @GlamFree Galeries CSS Photos @cssmotion @petapixel @cssgallerylist @cssremix 80
  81. 81. MERCI ! Marie Alhomme http://pouipouidesign.net – Twitter : @PouipouiDesign Thierry Régagnon http://regagnon.com – Twitter : @Thierry

×