Le Kit du Parfait Petit Intégrateur (PW2009)

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    5 Favorites & 1 Event

    Le Kit du Parfait Petit Intégrateur (PW2009) - Presentation Transcript

    1. 2009 LE KIT DU PARFAIT PETIT INTÉGRATEUR Bien monter et tester ses sites web Marie Alhomme Thierry Régagnon
    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. PRÉSENTATION THIERRY RÉGAGNON Consultant pour le cabinet de conseil Membre du WaSP International Liaison Group 3
    4. Etape 1 DÉCOUPE DES PSD Varie beaucoup selon les projets, on saute cette étape pour cette fois. 4
    5. Etape 2 MONTAGE XHTML / CSS ET JAVASCRIPT 5
    6. Etape 2 : Montage XHTML / CSS et Javascript NE PAS REPARTIR DE ZÉRO 6
    7. RÉUTILISER DU CODE 7
    8. 8
    9. UN SITE « PAR DÉFAUT » 9
    10. Etape 2 : Montage XHTML / CSS et Javascript QUEL LOGICIEL UTILISER ? 10
    11. HTMLPAD PRO 11
    12. TEXTMATE 12
    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. Etape 2 : Montage XHTML / CSS et Javascript FAIRE PREUVE DE MÉTHODE 14
    15. VALIDE, SÉMANTIQUE & STANDARD 15
    16. Etape 3 RECETTAGE GÉNÉRAL PAGE PAR PAGE 16
    17. Etape 3 : Recettage général page par page SUIVI 17
    18. OUTILS EN LIGNE 18
    19. OUTILS « FAITS MAISON » 19
    20. Les outils de suivi des participants... • JIRA • Trac • Redmine • LightHouse • Sifter 20
    21. Etape 3 : Recettage général page par page S’AIDER DE RÉFÉRENCES 21
    22. CODEBURNER extension Firefox 22
    23. CHEAT SHEETS 23
    24. MON OPQUAST 24
    25. Les références des participants... • Widget : Mac / Opera / etc. • MSDN • selfHTML 25
    26. Etape 3 : Recettage général page par page DÉBUGGAGE RENDU, FONCTIONNEL ET ACCESSIBILITÉ 26
    27. CONNAÎTRE LE TERRAIN : LES DIFFÉRENTS MOTEURS DE RENDU 27
    28. TRIDENT Internet Explorer 28
    29. GECKO Firefox 29
    30. WEBKIT Safari 30
    31. PRESTO Opera 31
    32. Etape 3 : Recettage général page par page DIFFÉRENTES VERSIONS D’INTERNET EXPLORER 32
    33. EXPRESSION WEB SUPER PREVIEW 33
    34. IE COLLECTION 34
    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. Etape 3 : Recettage général page par page DIFFÉRENTES VERSIONS DE FIREFOX 36
    37. PLUSIEURS PROFILS FIREFOX sous Windows 37
    38. PLUSIEURS PROFILS FIREFOX sous Mac 38
    39. Etape 3 : Recettage général page par page DIFFÉRENTES VERSIONS DE SAFARI 39
    40. MULTI-SAFARI 40
    41. Online SPOON BROWSER SANDBOX 41
    42. Etape 3 : Recettage général page par page DIFFÉRENTES PLATEFORMES 42
    43. Online BROWSERCAM 43
    44. MACHINES VIRTUELLES 44
    45. Travailler sous différents systèmes d’exploitation... • Parallels • VMware • VirtualBox • Virtual PC • Boot Camp • CrossOver / Wine 45
    46. Etape 3 : Recettage général page par page OUTILS INTÉGRÉS AUX NAVIGATEURS 46
    47. MONTAGE • Colorzilla (Firefox) • Web Developer Toolbar (Firefox) • Pixel Perfect (Firefox/Firebug) 47
    48. FIREBUG 48
    49. SAFARI WEB INSPECTOR 49
    50. OPERA DRAGONFLY 50
    51. IE WEBDEV TOOLS 51
    52. ACCESSIBILITÉ • Juicy Studio (Firefox) • Web Developer Toolbar (Firefox) • Accessibility Toolbar (Internet Explorer) • Wave (Web Accessibility Evaluation Tool) 52
    53. Les outils de debug des participants... • Capture Color • Firebug Lite • XRAY, MODIv2 (Favlets/Bookmarklets) • Fiddler • Accessibility Extension 53
    54. Etape 3 : Recettage général page par page TESTER LES CONDITIONS «DÉGRADÉES» 54
    55. DÉSACTIVER LES IMAGES 55
    56. DÉSACTIVER JAVASCRIPT 56
    57. Etape 4 OPTIMISATION 57
    58. Etape 4 : Optimisation OBJECTIF : ALLÉGER LE POIDS DES PAGES 58
    59. YSLOW extension Firefox 59
    60. PAGE SPEED extension Firefox 60
    61. DUST-ME SELECTORS extension Firefox 61
    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. Etape 4 : Optimisation OPTIMISATION RAPIDE ET EFFICACE : ALLÉGER LE POIDS DES IMAGES 63
    64. SMUSH.IT service web 64
    65. PUNYPNG service web 65
    66. LOGICIELS • PNG : • OptiPNG, PNGOptimizer (Win) • PNGCrusher (Mac) • JPEG : • Image Sizer (Adobe Air) • PNG, GIF, JPEG : • Shrink O’Matic (Adobe Air) 66
    67. Les outils d’optimisation des participants... • PNGOUT • Fireworks • Gadwin PrintScreen 67
    68. Etape 5 ET ENSUITE ? 68
    69. 69
    70. 70
    71. 71
    72. 72
    73. 73
    74. 74
    75. 75
    76. 76
    77. 77
    78. 78
    79. ET SUR TWITTER AUSSI ! 79
    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. MERCI ! Marie Alhomme http://pouipouidesign.net – Twitter : @PouipouiDesign Thierry Régagnon http://regagnon.com – Twitter : @Thierry

    + Thierry RégagnonThierry Régagnon, 1 month ago

    custom

    1008 views, 5 favs, 1 embeds more stats

    Préparée et présentée avec Marie Alhomme (http: more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 1008
      • 1003 on SlideShare
      • 5 from embeds
    • Comments 0
    • Favorites 5
    • Downloads 14
    Most viewed embeds
    • 5 views on https://groupereflect.bluekiwi.net

    more

    All embeds
    • 5 views on https://groupereflect.bluekiwi.net

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Groups / Events