• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
XHTML / CSS - Janvier 2009
 

XHTML / CSS - Janvier 2009

on

  • 4,414 views

 

Statistics

Views

Total Views
4,414
Views on SlideShare
4,375
Embed Views
39

Actions

Likes
3
Downloads
0
Comments
0

4 Embeds 39

http://ressources-numeriques-ldv.blogspot.fr 16
http://ressources-numeriques-ldv.blogspot.com 12
http://www.linkedin.com 7
http://www.slideshare.net 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    XHTML / CSS - Janvier 2009 XHTML / CSS - Janvier 2009 Presentation Transcript

    • XHTML / CSS
    • Qu’est ce que c’est ?
      • Séparation du contenu et de la présentation
      • XHTML pour le contenu
      • CSS pour la présentation (visuel)
      • Exemples:
        • http://csszengarden.com
    • Pourquoi ça ?
      • Standardiser la structure d’une page web
      • Accessibilité
        • Le site devrait être bien présenté malgré l’absence de CSS
        • Facilite la lecture par les fureteurs spéciaux
      • Performance
        • Fichier plus petit
          • Pas de code pour le style
        • Caching des fichiers externes (.css, .js)
      • Facilite la maintenance
        • Le visuel demande une modification du CSS seulement
        • Le contenu demande une modification du XHTML et potentiellement du CSS
    • XHTML
      • XML – HTML
      • Décrit le contenu et non le visuel. Donc, les tags <font>, <i>, <b>, … ne sont pas des tags XHTML valides
      • Il a plusieurs niveaux de « sévérité » du XHTML. Le DOCTYPE identifie lequel décrit le document.
    • DOCTYPE
      • XHTML 1.0 Strict
        • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
      • XHTML 1.1
        • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot; &quot;http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd&quot;>
      • XHTML 1.0 Transitional
        • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;>
      • XHTML 1.0 Frameset
        • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Frameset//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd&quot;>
      • Note : Tous les fureteurs ont besoin d’avoir le DOCTYPE pour bien interpréter le contenu
    • Structure minimale d’un document XHTML
      • <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot;
      • &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;>
      • <html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;en&quot;>
      • <head>
      • <title></title>
      • </head>
      • <body>
      • </body>
      • </html>
    • Document XHTML valide (résumé)
      • Tous les tags doivent être fermés
      • Tous les tags doivent être en minuscules
      • Doit contenir <html>, <head>, <title> et <body>
      • Doit commencer avec p, h1, h2, h3, h4, h5, h6, div, pre, address, ins ou del
      • Les attributs des tags doivent être entre &quot;…&quot;
    • Validateur XHTML
      • Il existe des moyens de valider le XHTML de son site
        • http://validator.w3.org/check/referer
        • http://validator.w3.org/
      • On peut afficher une « badge » qui confirme la validité
        • http://www.w3.org/QA/Tools/Icons
    • Choisir les tags selon le contenu à décrire
      • Tableless design.
        • Utiliser plutôt les tags XHTML qui représente le mieux le contenu
        • Ne pas utiliser une table pour construire le layout d’une page
        • <div> ayant un id « header », « sidebar », « footer »
        • <table> devrait être utiliser quand on veut vraiment représenter une table
        • On veut éviter d’avoir une table, dans une table, dans une table pour des questions de lisibilité, maintenance et performance
      • Utiliser <ul> ou <ol> pour une liste
        • menu horizontal ou vertical
        • Exemple: voir digg.com
      • On gagne à bien connaître les tags XHTML disponible pour mieux représenter notre document
      • Évidemment, ces points n’ont rien à voir avec la validité du document XHTML
    • CSS
      • Cascade Style Sheet
      • Utiliser pour « styliser » la page
      • Les styles sont appliquer sur les éléments en identifiant ces éléments à l’aide de sélecteurs
        • Tags : h1, div, span, …
          • h1
        • Id : <div id=&quot;def&quot;>
          • div#def
        • Classes : <div class=&quot;abc&quot; />
          • div.abc
        • Enchainements
          • div#container div#def
          • div#container, div#def
          • div#container *
          • div#container > div.abc
    • Pratiques / Trucs
      • Les Ids devraient être unique à l’intérieur du document
      • Les ids et classes devraient décrire la sémantique d’un élément au lieu de son style
        • <div id=&quot;left-column&quot;> : Mauvais
        • <h1 class=&quot;blue-title&quot;> : Mauvais
        • <div id=&quot;menu&quot;> : Bon
      • Choisir des sélecteurs qui décrivent précisément l’élément à configurer pour éviter de mauvaises surprises ailleurs dans la page
        • div#content div#menu h2
        • Au lieu de : h2
    • Les contre du standard
      • Besoin d’une bonne connaissance de XHTML pour représenter la sémantique de façon adéquate
      • Demande d’excellentes connaissances en CSS
      • Difficulté à obtenir une page identique sur tous les fureteurs
        • Dû à IE5 et IE6 et IE7 et surement IE8 qui répondent différemment aux instructions CSS comparativement aux fureteurs Firefox, Safari, Opera
    • Outils pour les problèmes d’uniformité CSS
      • Des outils pour nous aider
        • Reset.css
          • (voir http://meyerweb.com/eric/tools/css/reset/)
        • Frameworks CSS
        • Outils javascript
          • jQuery
          • Dojo
    • Reset.css
      • Assigne des styles par défaut pour que tous les fureteurs commencent avec les mêmes styles
      • Le premier reset.css a été fait construit par Eric Meyer
        • http://meyerweb.com/eric/tools/css/reset/
      • Tous les frameworks CSS contiennent leurs propres reset.css
    • Frameworks CSS
      • Blueprintcss
        • http://blueprintcss.org
      • Yahoo User Interface (YUI)
        • http://developer.yahoo.com/yui/
    • Blueprintcss http://blueprintcss.org
      • Fonctionnalités offertes
        • « Reset » des styles par défaut des fureteurs
        • Initialise des styles par défaut pour les familles de polices, grandeurs des entêtes (h1, h2, …), styles des paragraphes, styles de liste, etc …
        • Méthodologie pour créer des layouts en tableau sans tag <table>
        • Fourni un style par défaut pour l’impression
        • Compatible pour la plupart des fureteurs incluant IE6 et IE7
      • La fonctionnalité « tableau » ne peut pas être considérée 100% pur XHTML / CSS dû à l’utilisation de « class » qui ne représente pas la sémantique
      • Blueprintcss et une librairie plutôt minimale, simple et « light »
      • Référence intéressante
        • http://blueflavor.com/blog/2007/oct/24/blueprint-css-101/
    • Yahoo! User Interface http://developer.yahoo.com/yui/
      • Surement le framework gratuit le plus complet
      • On choisit les fonctionnalités que l’on désire
      • Tout comme Blueprintcss, on peut avoir les fonctionnalités de « reset », polices et de tableau
      • Offre une panoplie de widgets
        • Button, calendar, charts, color picker, slider, tab view, layout manager, …
      • Inclus des fonctionnalités qui peuvent remplacer l’utilisation d’un framework javascript tel jQuery
      • Offre une série d’utilitaires
        • Animation, browser history, ajax, drag and drop, …
    • jQuery http://jquery.com
      • Outils javascript pour
        • Manipulation du DOM
          • Les sélecteurs d’éléments sont puissants
          • Modification des attributs des éléments
          • Manipulation du CSS des éléments du DOM
        • Ajax
        • Gestion des évènements
          • Click, mouse over, key up, change, resize, …
        • Gestion d’effets
          • Slide, fade, show, hide, …
      • Il existe beaucoup de plugins pour jQuery dont
        • Gestion de cookie, drag and drop, formulaire, etc …
    • Bref, structure d’une page à la mode …
      • XHTML, 1.0 Strict ou 1.1, pour le contenu
      • CSS pour le visuel, aucun visuel dans le HTML
      • Badges de validité pour XHTML et CSS
      • Un framework javascript tel jQuery ou Dojo pour la manipulation du DOM, gestion d’évènements, AJAX
      • Un framework CSS tel Blueprintcss
      • Ou, utiliser Yahoo! User Interface au lieu des 2 derniers points