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).

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