Le Kit du Parfait Petit Intégrateur (PW2009)

2009 LE KIT DU PARFAIT PETIT INTÉGRATEUR Bien monter et tester ses sites web Marie Alhomme Thierry Régagnon

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

PRÉSENTATION THIERRY RÉGAGNON Consultant pour le cabinet de conseil Membre du WaSP International Liaison Group 3

Etape 1 DÉCOUPE DES PSD Varie beaucoup selon les projets, on saute cette étape pour cette fois. 4

Etape 2 MONTAGE XHTML / CSS ET JAVASCRIPT 5

Etape 2 : Montage XHTML / CSS et Javascript NE PAS REPARTIR DE ZÉRO 6

RÉUTILISER DU CODE 7

8

UN SITE « PAR DÉFAUT » 9

Etape 2 : Montage XHTML / CSS et Javascript QUEL LOGICIEL UTILISER ? 10

HTMLPAD PRO 11

TEXTMATE 12

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

Etape 2 : Montage XHTML / CSS et Javascript FAIRE PREUVE DE MÉTHODE 14

VALIDE, SÉMANTIQUE & STANDARD 15

Etape 3 RECETTAGE GÉNÉRAL PAGE PAR PAGE 16

Etape 3 : Recettage général page par page SUIVI 17

OUTILS EN LIGNE 18

OUTILS « FAITS MAISON » 19

Les outils de suivi des participants... • JIRA • Trac • Redmine • LightHouse • Sifter 20

Etape 3 : Recettage général page par page S’AIDER DE RÉFÉRENCES 21

CODEBURNER extension Firefox 22

CHEAT SHEETS 23

MON OPQUAST 24

Les références des participants... • Widget : Mac / Opera / etc. • MSDN • selfHTML 25

Etape 3 : Recettage général page par page DÉBUGGAGE RENDU, FONCTIONNEL ET ACCESSIBILITÉ 26

CONNAÎTRE LE TERRAIN : LES DIFFÉRENTS MOTEURS DE RENDU 27

TRIDENT Internet Explorer 28

GECKO Firefox 29

WEBKIT Safari 30

PRESTO Opera 31

Etape 3 : Recettage général page par page DIFFÉRENTES VERSIONS D’INTERNET EXPLORER 32

EXPRESSION WEB SUPER PREVIEW 33

IE COLLECTION 34

RÉGLER LE CAS IE À PART • Des commentaires conditionnels pour tout code supplémentaire dédié à IE  • Cibler au besoin une version précise ‣ http://www.blog-and-blues.org/articles/ Les_syntaxes_de_commentaires_conditionnels_pour_IE_Windows 35

Etape 3 : Recettage général page par page DIFFÉRENTES VERSIONS DE FIREFOX 36

PLUSIEURS PROFILS FIREFOX sous Windows 37

PLUSIEURS PROFILS FIREFOX sous Mac 38

Etape 3 : Recettage général page par page DIFFÉRENTES VERSIONS DE SAFARI 39

MULTI-SAFARI 40

Online SPOON BROWSER SANDBOX 41

Etape 3 : Recettage général page par page DIFFÉRENTES PLATEFORMES 42

Online BROWSERCAM 43

MACHINES VIRTUELLES 44

Travailler sous différents systèmes d’exploitation... • Parallels • VMware • VirtualBox • Virtual PC • Boot Camp • CrossOver / Wine 45

Etape 3 : Recettage général page par page OUTILS INTÉGRÉS AUX NAVIGATEURS 46

MONTAGE • Colorzilla (Firefox) • Web Developer Toolbar (Firefox) • Pixel Perfect (Firefox/Firebug) 47

FIREBUG 48

SAFARI WEB INSPECTOR 49

OPERA DRAGONFLY 50

IE WEBDEV TOOLS 51

ACCESSIBILITÉ • Juicy Studio (Firefox) • Web Developer Toolbar (Firefox) • Accessibility Toolbar (Internet Explorer) • Wave (Web Accessibility Evaluation Tool) 52

Les outils de debug des participants... • Capture Color • Firebug Lite • XRAY, MODIv2 (Favlets/Bookmarklets) • Fiddler • Accessibility Extension 53

Etape 3 : Recettage général page par page TESTER LES CONDITIONS «DÉGRADÉES» 54

DÉSACTIVER LES IMAGES 55

DÉSACTIVER JAVASCRIPT 56

Etape 4 OPTIMISATION 57

Etape 4 : Optimisation OBJECTIF : ALLÉGER LE POIDS DES PAGES 58

YSLOW extension Firefox 59

PAGE SPEED extension Firefox 60

DUST-ME SELECTORS extension Firefox 61

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

Etape 4 : Optimisation OPTIMISATION RAPIDE ET EFFICACE : ALLÉGER LE POIDS DES IMAGES 63

SMUSH.IT service web 64

PUNYPNG service web 65

LOGICIELS • PNG : • OptiPNG, PNGOptimizer (Win) • PNGCrusher (Mac) • JPEG : • Image Sizer (Adobe Air) • PNG, GIF, JPEG : • Shrink O’Matic (Adobe Air) 66

Les outils d’optimisation des participants... • PNGOUT • Fireworks • Gadwin PrintScreen 67

Etape 5 ET ENSUITE ? 68

69

70

71

72

73

74

75

76

77

78

ET SUR TWITTER AUSSI ! 79

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

MERCI ! Marie Alhomme http://pouipouidesign.net – Twitter : @PouipouiDesign Thierry Régagnon http://regagnon.com – Twitter : @Thierry

Le Kit du Parfait Petit Intégrateur (PW2009)

0 comments

Notes on slide 1

5 Favorites & 1 Event