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

RÉUTILISER DU CODE

7

8

UN SITE « PAR DÉFAUT »

9

QUEL LOGICIEL UTILISER ?

10

Etape 2 : Montage XHTML / CSS et Javascript

HTMLPAD PRO

11

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

MON OPQUAST

24

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