le kit du parfait petit intégrateur (pw2009)
Post on 13-Dec-2014
3.150 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related