View
3.150
Download
2
Category
Preview:
DESCRIPTION
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).
Citation preview
LE KIT DU PARFAIT PETIT INTÉGRATEUR
Bien monter et tester ses sites web
Marie AlhommeThierry Régagnon
2009
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
Consultant pour le cabinet de conseil
Membre du WaSP International Liaison Group
PRÉSENTATION
THIERRY RÉGAGNON
3
DÉCOUPE DES PSD
Etape 1
4
Varie beaucoup selon les projets, on saute cette étape pour cette fois.
MONTAGE XHTML / CSS ET JAVASCRIPT
Etape 2
5
NE PAS REPARTIR DE ZÉRO
6
Etape 2 : Montage XHTML / CSS et Javascript
UN SITE « PAR DÉFAUT »
9
QUEL LOGICIEL UTILISER ?
10
Etape 2 : Montage XHTML / CSS et Javascript
TEXTMATE
12
13
• Windows• NotePad++• Programmer's Notepad• e Text Editor
• Mac• Smultron• Coda• Text Wrangler• BBedit• CSSEdit• Espresso• GoLive
Les logiciels des participants...
• Linux• gEdit• Screem• Kate
• Toute plateforme• Komodo• Eclipse / Aptana
FAIRE PREUVE DE MÉTHODE
14
Etape 2 : Montage XHTML / CSS et Javascript
VALIDE, SÉMANTIQUE & STANDARD
15
RECETTAGE GÉNÉRALPAGE PAR PAGE
Etape 3
16
SUIVI
17
Etape 3 : Recettage général page par page
OUTILS EN LIGNE
18
OUTILS « FAITS MAISON »
19
20
• JIRA
• Trac
• Redmine
• LightHouse
• Sifter
Les outils de suivi des participants...
S’AIDER DE RÉFÉRENCES
21
Etape 3 : Recettage général page par page
CODEBURNERextension Firefox
22
CHEAT SHEETS
23
25
• Widget : Mac / Opera / etc.
• MSDN
• selfHTML
Les références des participants...
DÉBUGGAGE RENDU, FONCTIONNEL ET
ACCESSIBILITÉ
26
Etape 3 : Recettage général page par page
CONNAÎTRE LE TERRAIN :LES DIFFÉRENTS MOTEURS
DE RENDU
27
TRIDENT
Internet Explorer
28
GECKO
Firefox
29
WEBKIT
Safari
30
PRESTO
Opera
31
DIFFÉRENTES VERSIONS D’INTERNET EXPLORER
32
Etape 3 : Recettage général page par page
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
<!--[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
DIFFÉRENTES VERSIONSDE FIREFOX
36
Etape 3 : Recettage général page par page
PLUSIEURS PROFILS FIREFOXsous Windows
37
PLUSIEURS PROFILS FIREFOXsous Mac
38
DIFFÉRENTES VERSIONS DE SAFARI
39
Etape 3 : Recettage général page par page
MULTI-SAFARI
40
SPOON BROWSER SANDBOXOnline
41
DIFFÉRENTES PLATEFORMES
42
Etape 3 : Recettage général page par page
BROWSERCAMOnline
43
MACHINES VIRTUELLES
44
45
• Parallels
• VMware
• VirtualBox
• Virtual PC
• Boot Camp
• CrossOver / Wine
Travailler sous différents systèmes d’exploitation...
OUTILS INTÉGRÉS AUX NAVIGATEURS
46
Etape 3 : Recettage général page par page
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
53
• Capture Color
• Firebug Lite
• XRAY, MODIv2 (Favlets/Bookmarklets)
• Fiddler
• Accessibility Extension
Les outils de debug des participants...
TESTER LES CONDITIONS «DÉGRADÉES»
54
Etape 3 : Recettage général page par page
DÉSACTIVER LES IMAGES
55
DÉSACTIVER JAVASCRIPT
56
OPTIMISATION
Etape 4
57
OBJECTIF : ALLÉGER LE POIDS DES PAGES
58
Etape 4 : Optimisation
YSLOWextension Firefox
59
PAGE SPEEDextension Firefox
60
DUST-ME SELECTORSextension 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
OPTIMISATION RAPIDE ET EFFICACE :
ALLÉGER LE POIDS DES IMAGES
63
Etape 4 : Optimisation
SMUSH.ITservice web
64
PUNYPNGservice web
65
LOGICIELS
• PNG :
• OptiPNG, PNGOptimizer (Win)
• PNGCrusher (Mac)
• JPEG :
• Image Sizer (Adobe Air)
• PNG, GIF, JPEG :
• Shrink O’Matic (Adobe Air)66
67
• PNGOUT
• Fireworks
• Gadwin PrintScreen
Les outils d’optimisation des participants...
ET ENSUITE ?
Etape 5
68
69
70
71
72
73
74
75
76
77
78
ET SUR TWITTER AUSSI !
79
Standards@WaSP_ILG@csswg@w3c@nitot@waspinteract
Accessibilité@dboudreau@webatou
Ressources diverses@WebDeveloperr@alsacreations@smashingmag@BrettSinclair
Freelance@FreelanceSw@GlamFree
Photos@petapixel
Webdesign@theprodesigner@toxiclab@naldzgraphics@DesignerDepot@artbox7@bittbox@RussAdams@typekit
Code@ajaxdude@Weblenium@jquery@jQueryHowto@usejquery
Galerie jQuery@jquerysites
Galeries CSS@cssmotion@cssgallerylist@cssremix
80
MERCI !
Marie Alhomme http://pouipouidesign.net – Twitter : @PouipouiDesign
Thierry Régagnonhttp://regagnon.com – Twitter : @Thierry
Recommended