SlideShare une entreprise Scribd logo
WEB DESIGN
                             Master 2 MMI | Université Panthéon Sorbonne




Octobre 2009 : Partie 2/4                                             David Raichman Senior UX Designer @ OgilvyInteractive
1. HTML ET XHTML




                   Web Design Master 2 MMI Université Panthéon Sorbonne
1. HTML ET XHTML
A. Versions et DTD
  La déclaration <!DOCTYPE> située avant la balise d’ouverture <HTML>, permet
  de spécifier la version de la norme utilisée dans le document (HTML 3.2,
  XHTML1.1…)

  Découpage d’une entrée DOCTYPE :




                                                        Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
A. Versions et DTD
  Encodage du document et la balise <head>

  <meta http-equiv="ContentType" content="text/html;
  charset=iso88591" />

               iso88591 = langues d’Europe occidentale


               iso885915 = complémentaire du précédent avec des
               caractères supplémentaires type «!œ!» ou «!"!»

               utf8 = permet d’utiliser la plupart des caractère de la
               majorité des langues du monde : c’est un code de
               l’Unicode




                                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
B. Eléments contenus et balises




   <balise ouvrante>contenu</balise fermante>
              {        élément




                                  Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
B. Eléments contenus et balises

  Les balises acceptent parfois des caractéristiques supplémentaires pour les
  distinguer ou les personnaliser.




            <balise attribut="un attribut">contenu</
            balise>


  Les éléments peuvent s’imbriquer :

        <h1 id="monTitre">Le titre <em>du document</em></h1>




                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
C. Eléments contenus et balises

              Balises de type bloc                                          Balises de type en ligne

   Un élément de type bloc peut contenir un ou                    Un élément de type ligne ne peut renfermer que
   plusieurs éléments bloc et/ou en ligne, sauf                   d’autres éléments de type ligne.
   paragraphe <p> et titres <h1>, <h2>,…
   Une mise en page se fera donc de préférence à                  Il existe en fait 2 sortes d’éléments de type ligne :
   l’aide de balise de type bloc. La plus indiquée pour           «!remplacés!» et «!non remplacés!».
   cet usage est <div> : c’est une balise générique               -Seuls les éléments remplacés acceptent des
   servant de conteneur neutre.                                   attributs de dimensions (height, width). Il s’agit des
                                                                  éléments <img>, <input>, <textarea>,<select> et
                                                                  <object>.
                                                                  - Les autres n’ont pas de dimension à proprement
                                                                  parler, et n’occupent que la place nécessaire à leur
                                                                  contenu. C’est le cas de <strong>,<em> et <a>.

                                                    (%)&*&$'+,$-.$/0



                       !"!#$%&'!"#$


                                                       :2/;<'+=2.>0
                    !"!#$%&'%&'"()&%




                                                   12.3"$'.245#$%&'67819               Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Balises bloc
    Balise                             Description                                                       Exemple
                 Introduit des citations longues.
                 Par défaut, certains navigateurs prévoient une marge        <p>Kant disait :<p/><blockquote><p>l'espace et le temps
 <blockquote>
                 gauche aux blocs de citation, qu'on pourra bien sûr         sont les formes de notre sensibilité</p></blockquote>
                 modifier en CSS.

                 Conteneur générique de type bloc.
                 Cette balise n'apporte pas de sens spécifique,               <div><p>Voici un texte <em>important</em></p><p>Et un
     <div>
                 comme la balise <span>. Elle sert à regrouper               autre texte <strong>imortant</strong></p></div>
                 d'autres balises de type bloc ou ligne.


                                                                            <dl>
                 Liste de définitions, utile pour structurer les éléments
                                                                            <dt>Titre de l'élément</dt>
                 associant des définitions ou contenus à des termes ou
     <dl>                                                                   <dd>description de l'élément</dd>
                 à des titres. Ces listes distinguent les titres (<dt>) des
                                                                            <dd>Suite de la description</dd>
                 éléments de définition (<dd>)
                                                                            </dl>




                 Balise délimitant un formulaire interactif. Elle contient   <form action="pagesuivante.php"
                 généralement des éléments d'interface (champs de            method="get"><p><input type="text" name="recherche" />
    <form>       texte, boutons de validation, cases à cocher,…) Cet         <input type="submit" value="ok" />
                 élément doit renfermer immédiatement d'autres               </p>
                 élément de type bloc.                                       </form>



                 HTML prévoit six niveaux de titres, hiérarchiquement
 <h1>, <h2>, …   placé sous le titre principal (<h1>). Ces éléments
                                                                             <h1>Titre principal</h1>
     <h6>        constituent une exception à la règle des blocs ; ils ne
                 peuvent contenir d'autres blocs.

                                                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Balises bloc
   Balise                          Description                                                  Exemple
                                                                   <ul>
               Ces deux balises désignent des listes ordonnées     <li>premier objet de la liste</li>
  <ol>, <ul>
               (<ol>) ou à puces simples (<li>)                    <li>second objet de la liste</li>
                                                                   </ul>


               Balise désignant un paragraphe de texte. Cet élément
     <p>       constitue une exception à la règle des blocs car il ne <p>Un paragraphe de texte</p>
               peut en contenir d'autres.


                                                                   <table>
                                                                   <tr>
               Tableau contenant des données. Les cellules du      <td>cellule 1</td>
   <table>     tableau sont d'abord rassemblés sous forme de rangé <td>cellule 2</td>
               ou lignes (<tr>).                                   </tr>
                                                                   </table>




                                                                                  Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
Balises en ligne
    Balise                      Description                                                  Exemple

              Désigne un lien hypertexte. Elle s’accompagne
              de l’attribut href, qui renferme la cible du lien
     <a>                                                          <a href= "page5.htm">allez en page 5</a>
              (son contenu représentant le texte à cliquer
              pour activer le lien)

              Met en emphase une portion de texte. Quand la
              police utilisée est droite, la plupart des    <p>Voici un texte <em>important</em></p><p>Et un autre
    <em>
              navigateurs graphiques la traduisent comme    texte <strong>imortant</strong></p>
              une mise en italique.


              Inclut une image dans le document Cette balise
              es accompagné des attributs alt (texte
    <img>     alternatif) et src (qui indique le chemin de     <img title=‘titre’ alt=’poisson’ src=‘poisson.jpg’ />
              l’image). Les navigateurs supportent les formats
              gif, png et jpg


              Balise utilisée pour les citations courtes. On
     <q>      utilisera <blockquote> pour les citations           <p>comme le dit Kant <q>la pensée…</q></p>
              longues.

              Conteneur générique de type bloc. Cette balise
              n'apporte pas de sens spécifique, comme la
   <span>                                                         <span id=”fluo”>le texte</span>
              balise <span>. Elle sert à regrouper d'autre
              balises de type bloc ou ligne.

              Indique un renforcement général représenté en
   <strong>                                                       <p>ceci est<strong>important ! </strong></p>
              gras dans les navigateurs graphiques



                                                                                 Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
D. Différencier HTML et XHTML dans la pratique

  La syntaxe obsolète :

  ‣ Balises écrites en majuscules, ex :<P>

  ‣Balise ouvrante sans balise fermante ex :
  <br>, <img src=!"xyz.jpg">,<p> ou <li>.

  ‣En XHTML, les balises vides ont la syntaxe suivante :
  <balise vide />




                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
D. Différencier HTML et XHTML dans la pratique

  Les balises obsolètes :

  Ce sont les balises qui donnent des indications
  de mise en forme :

  <font>, <center>, <u>, <s>, <i>, <b>




                                                    Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
E. Pratique : l’ami ultime de DW...




                    Firebug



                                      Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
1. HTML ET XHTML
F. Pratique : Utilisation de Dreamweaver

  1. créer un titre de page et un titre général

  2. créer une page avec deux paragraphes et deux soustitres.

  3. ajouter une image dans le flux entre les deux paragraphes

  4. introduire des citations et des liens dans le texte, mettre en emphase certaines
  parties.

  5. vérifier la validité XHTML 1.0 stricte du document




                                                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING




                         Web Design Master 2 MMI Université Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
A. Définition des wireframes


  Les wireframes sont des représentations visuelles qui
  capturent à elles seules l’ensemble des décisions stratégiques,
  fonctionnelles, d’architecture d’information et d’ergonomie.»
  Ils servent de référence pour le design graphique et pour le
  développement du projet digital.
  Ils contiennent différents niveaux de précision selon le contexte.




                                               Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
                        Interactif




Low résolution                                             Hi résolution




                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
A. Degré de précision
                        Interactif
      Prototype                                           Prototype
         papier                                           digital




Low résolution                                             Hi résolution




     Sketching                                           Ecrans (psd, jpg...)

                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
A. Degré de précision
                        Interactif
      Prototype                                           Prototype
         papier                                           digital




Low résolution                                             Hi résolution




     Sketching                                           Ecrans (psd, jpg...)

                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
                        Interactif
      Prototype                                           Prototype
         papier                                           digital




Low résolution                                             Hi résolution




     Sketching                                           Ecrans (psd, jpg...)

                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
                        Interactif
      Prototype                                           Prototype
         papier                                           digital




Low résolution                                             Hi résolution




     Sketching                                           Ecrans (psd, jpg...)

                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
                        Interactif
      Prototype                                           Prototype
         papier                                           digital




Low résolution                                             Hi résolution




     Sketching                                           Ecrans (psd, jpg...)

                        Statique
                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
B. Degré de précision
                          Interactif
      Prototype                                             Prototype
         papier                                             digital




Low résolution          Wireframes                           Hi résolution




     Sketching                                             Ecrans (psd, jpg...)

                          Statique
                                       Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
C. Hiérarchie visuelle
                                 accès autre sites


   logo                       branded header

                navigation principale + recherche +panier




   navigation                   produits                    accès
   secondaire                                               utilisateurs




                                 footer



                                                                       Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
D. Zone visible d’écran

                                                                                                                                        FR     EN          Les sites Renault




           Logo            RENAULT-MERCHANDISING.COM
                         ACCUEIL   NOTRE ACTIVITE    NOS PRODUITS          NOS POINTS DE VENTE   OFFRES WEB EXCLUSIVES
                                                                                                                                                                       ma liste            mon panier
                           RECHERCHER UN PRODUIT                                                    toutes catégories                    go
                                                                                                                                                                        5 articles            2 articles

         Renault F1 team                Renault F1 Team                                                                                                            DEJA INSCRIT ?
         Team
         Sportswear                                                   Team                                                Sportswear                               Identifiant
         Bagagerie
                                          Lunettes Homme Quicksilver                                Montre Bike Casio                                              Mot de passe
         Objets d’images
         Jouets                                                         100% nylon, disponible                                    100% nylon, disponible                             Mémoriser mes
         Miniature                                                      en S, M, L, XL, XXL                                       en S, M, L, XL, XXL                                informations
                                                                        Doublure : 100%                                           Doublure : 100%
                                                                        polyester                                                 polyester
         Renault Sport                                                                                                                                                                OK
         Renault                                                                                                                                                   >Mot de passe oublié ?
         Dacia
                                                                                                                                                                   >Inscrivez-vous
                                          +    voir la fiche produit                                +    voir la fiche produit

                                                                Bagagerie                                               Objets d’images
                                                                                                                                                                   Personnel du groupe
                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43                               Renault
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester


                                                                                                                                                                   Professionnel
                                         +    voir la fiche produit                                 +    voir la fiche produit

                                                                 Jouets                                                     Miniature

                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester




                                         +    voir la fiche produit                                +    voir la fiche produit

        © RENAULT MERCHANDISING                                                                                                 NEWSLETTER     CONTACT        PLAN DU SITE       MENTIONS LEGALES    CGU


                                                                                                                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
D. Zone visible d’écran                                                                !"#$%&'


                                              !"#$%&'($)*"+!,)                                                                          FR     EN          Les sites Renault




           Logo            RENAULT-MERCHANDISING.COM
                         ACCUEIL   NOTRE ACTIVITE    NOS PRODUITS          NOS POINTS DE VENTE   OFFRES WEB EXCLUSIVES
                                                                                                                                                                       ma liste            mon panier
                           RECHERCHER UN PRODUIT                                                    toutes catégories                    go
                                                                                                                                                                        5 articles            2 articles

         Renault F1 team                Renault F1 Team                                                                                                            DEJA INSCRIT ?
         Team




                                                                                                                                                                                                           ()*%&'
         Sportswear                                                   Team                                                Sportswear                               Identifiant
         Bagagerie
                                          Lunettes Homme Quicksilver                                Montre Bike Casio                                              Mot de passe
         Objets d’images
         Jouets                                                         100% nylon, disponible                                    100% nylon, disponible                             Mémoriser mes
         Miniature                                                      en S, M, L, XL, XXL                                       en S, M, L, XL, XXL                                informations
                                                                        Doublure : 100%                                           Doublure : 100%
                                                                        polyester                                                 polyester
         Renault Sport                                                                                                                                                                OK
         Renault                                                                                                                                                   >Mot de passe oublié ?
         Dacia
                                                                                                                                                                   >Inscrivez-vous
                                          +    voir la fiche produit                                +    voir la fiche produit

                                                                Bagagerie                                               Objets d’images
                                                                                                                                                                   Personnel du groupe
                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43                               Renault
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester


                                                                                                                                                                   Professionnel
                                         +    voir la fiche produit                                 +    voir la fiche produit

                                                                 Jouets                                                     Miniature

                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester




                                         +    voir la fiche produit                                +    voir la fiche produit

        © RENAULT MERCHANDISING                                                                                                 NEWSLETTER     CONTACT        PLAN DU SITE       MENTIONS LEGALES    CGU


                                                                                                                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
2. RUDIMENTS DE WIREFRAMING
D. Zone visible d’écran                                                                !"#$%&'


                                              !"#$%&'($)*"+!,)                                                                          FR     EN          Les sites Renault




           Logo                           !"""#$%
                           RENAULT-MERCHANDISING.COM


                                                                960 ou 950 px
                         ACCUEIL   NOTRE ACTIVITE    NOS PRODUITS          NOS POINTS DE VENTE   OFFRES WEB EXCLUSIVES
                                                                                                                                                                       ma liste                    mon panier
                           RECHERCHER UN PRODUIT                                                    toutes catégories                    go
                                                                                                                                                                        5 articles                    2 articles

         Renault F1 team                Renault F1 Team                                                                                                            DEJA INSCRIT ?
         Team




                                                                                                                                                                                                                   ()*%&'
         Sportswear                                                   Team                                                Sportswear                               Identifiant




                                                                                                                                                                                 $()*+)(#,-(.//
         Bagagerie
                                          Lunettes Homme Quicksilver                                Montre Bike Casio                                              Mot de passe
         Objets d’images
         Jouets




                                                                                                                                                                                                  &'"#$%
                                                                        100% nylon, disponible                                    100% nylon, disponible                              Mémoriser mes




                                                                      !"#$%&'()$
         Miniature                                                      en S, M, L, XL, XXL                                       en S, M, L, XL, XXL                                 informations
                                                                        Doublure : 100%                                           Doublure : 100%
                                                                        polyester                                                 polyester
         Renault Sport                                                                                                                                                                   OK
         Renault                                                                                                                                                   >Mot de passe oublié ?
         Dacia
                                                                                                                                                                   >Inscrivez-vous
                                          +    voir la fiche produit                                +    voir la fiche produit

                                                                Bagagerie                                               Objets d’images
                                                                                                                                                                   Personnel du groupe
                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43                               Renault
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester


                                                                                                                                                                   Professionnel
                                         +    voir la fiche produit                                 +    voir la fiche produit

                                                                 Jouets                                                     Miniature

                                          Polaire Histoire & collection                                Logan Berline DACIA 2005 1/43
                                                                        100% nylon, disponible                                   100% nylon, disponible
                                                                        en S, M, L, XL, XXL                                      en S, M, L, XL, XXL
                                                                        Doublure : 100%                                          Doublure : 100%
                                                                        polyester                                                polyester




                                         +    voir la fiche produit                                +    voir la fiche produit

        © RENAULT MERCHANDISING                                                                                                 NEWSLETTER     CONTACT        PLAN DU SITE       MENTIONS LEGALES            CGU


                                                                                                                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS




         Web Design Master 2 MMI Université Panthéon Sorbonne
3. CSS
A. Présentation, méthode de liaison, syntaxe
  Il existe deux méthodes de liaisons des fichiers *.css externes
  #Une méthode classique utilisant les attributs de la balise <link>
  (balise autofermante)

  <link href=“monstyle.css" rel="stylesheet" type="text/css" />

  #Une méthode qui utilise une propriété CSS 2, nommée @import. Ce n’est pas une
  balise HTML !



                          <style type="text/css">
                          @import url(impression.css) print;
                          @import url(portable.css) handheld;
                          @import url(normal.css) screen
                           </style>




                                                                       Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
A. Présentation, méthode de liaison, syntaxe
  Le CSS est fondé sur l’héritage et la cascade


  La syntaxe du CSS utilise les accolades :


  sélecteur {
  propriété 1: valeur ;
  propriété 2: valeur ;
  propriété 3: valeur ;
  /*un commentaire*/
  }




                                                  Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
B. Sélecteurs
  Voir également document ci-joint


   Un sélecteur permet d’identifier les lieux d’application d’un style défini.

   Il existe 3 types de sélecteurs :
  ‣Les sélecteurs de balise (déjà vu)
  ‣Les sélecteurs de classes permettant d’appliquer un style à un ensemble
  d’éléments indépendamment du type de balise.
                                     .classe {
                                     propriété n: valeur;
                                     }


   ‣Les sélecteurs d’identifiants (id est le nom attribué à un élément unique dans le
   doc HTML).
                                     #identifiant{
                                     propriété n: valeur;
                                     }

                                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
B. Sélecteurs
  Voir également document ci-joint


  Un sélecteur permet de trouver le chemin arborescent d’une balise à laquelle on
  veut appliquer un style (voir doc)
  Ex : <div id=‘intro’><p>du texte</p></div>
  Pour donner un style à <p>, on utilise la syntaxe :
  #intro p {…} ou div p{...}


  Dans le contexte de la cascade, deux règles de styles peuvent êtres
  contradictoires dans ce cas c’est la dernière règle lue qui l’emporte.


  La mention !important permet de surclasser une règle donnée même si elle n’est
  pas lue à la fin.
  Ex : p{fontsize:10px !important;}




                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
B. Sélecteurs
  Voir également document ci-joint



  Syntaxe de regroupements :

  On peur regrouper des sélecteurs pour une même famillepropriété
  ex :
  .texte, p, h1, h2 {
  Marginleft : 0;
  }

  On peut regrouper des propriétés autour d’une famille quelque soient ses propriétés
  ex :
  p {
  font: italic bold 120% Arial, sansserif;
  }




                                                          Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
C. Gestion des couleur et de la transparence

   En CSS, le système de couleur est noté soit en hexadécimal
   (blanc = #000000),
   soit par nom des couleurs principales ex : ‘yellow’ pour jaune.



   La gestion de la transparence est un hack. A utiliser avec précaution.
   Son utilisera sera standardisé dans CSS3.


   Firefox {opacity: de 0 à 1;}
   IE78 {filter:alpha(opacity=0 à 100);}




                                                             Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
D. Typographie et mise en forme de caractères

   Les polices standards :




                                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
D. Typographie et mise en forme de caractères

  Déclaration des polices en CSS (en fonction des polices système disponibles) :


            body {
            fontfamily : ‘Georgia’, times, serif;
            }




                                                       Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
D. Typographie et mise en forme de caractères
  Unité de taille des polices en CSS

               Unité de taille fixe : en points (pt) (1pt = 0.35mm)

               Unité de taille relative : px, % et cadratin
               en «!M!» (em) pour la largeur
               En «!X!» (ex) pour la hauteur
               Définit relativement à la taille déférence du texte contenu dans le
               conteneur.

  Le dimensionnement relatif permet d’afficher, via le navigateur, la police en
  plus grand ou plus petit avec une mise en page fluide.




                                                              Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
D. Typographie et mise en forme de caractères

   Les motsclés de tailles :
   xxsmall, xsmall, small, medium, large, xlarge et xxlarge
   Ces tailles dépendent du navigateur utilisé !




                                                              Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
E. Bordure, arrièreplan et images

  ‣Style de bordure

  ‣Épaisseur des bordures

  ‣Couleur des bordures

  ‣Arrières-plans et images de fond

  ‣Positionnement et répétition de l’image

  ‣Fixation de l’image/contenu




                                             Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
F. Positionnement
  Le modèle des boîtes :




  Pb fondamental : le modèle de boîte Microsoft est différent du modèle standard à
  différence d’affichage
  Modèle standard : Largeur à l’écran = width+padding+border
  Modèle Microsoft : Largeur à l’écran = width
  Solution possible : le hack universel *{Margin:0; Padding:0;}
                                                              Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
F. Positionnement
  Il y a trois types de positionnement en CSS :


  A. Positionnement dans le flux courant (flow)


  B. Positionnement relatif


  C. Positionnement absolu et notion de z-index (calque)


  Applications : centrage, float, menu…




                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Le Grid Design a pour objectif de :


  ‣Créer un environnement structurant pour organiser spatialement une interface

  ‣Mettre en place un framework CSS facilitant l’organisation des éléments par
  rapport à une grille

  ‣Optimiser le workflow conception/réalisation




                      http://www.thegridsystem.org




                                                          Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Principe d’une grille de mise en page :




                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Principe d’une grille de mise en page :




                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Principe d’une grille de mise en page :




                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Exemple simple




                   Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Exemple simple




                   Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Exemple simple




                   Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
G. Grid Design

  Exemple simple




                   Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
3. CSS
H. Initiation au framework Blueprint




                     http://www.blueprintcss.org




                                               Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
4. JAVASCRIPT




                Web Design Master 2 MMI Université Panthéon Sorbonne
4. JAVASCRIPT
A. Présentation et principe de fonctionnement
  Javascript est un langage qui gère le comportement des navigateurs. Il
  est dérivé de la norme ECMA, comme ActionScript.

  Javascript est sensible au navigateur utilisé : certains objets n’existe pas
  ou sont mal interprétés pour un navigateur donné !

  Javascript est un langage interprété par les navigateurs, cela suppose
  que leur interpréteurs doit être actif pour que les scripts fonctionnent.




                                                              Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
4. JAVASCRIPT
B. Méthode d’inclusion
  Afin de séparer forme, structure et comportement, on externalise les scripts javascript.



  <script    type="text/javascript“ src=“url_du_script.js”></script>




                                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
4. JAVASCRIPT
C. Types
  ‣Nombres entiers et nombres décimaux (float)
  ‣(opérateurs <,>, ==,…)
  ‣Booléen
  ‣(Nommage, valeurs, opérateurs)
  ‣Chaîne de caractères (String)
  ‣(Concaténation, méthodes indexOf, length, substring,…)
  ‣Les convertisseurs de type
  ‣parseInt() permet de convertir une variable en nombre
  ‣parseFloat() permet de convertir une variable en nombre décimal




                                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
4. JAVASCRIPT
D. Variables et fonctions
    Les variables sont typées mais en Javascript le type est implicite.

    Une fonction se caractérise par les arguments qu’elles reçoit
    (il peut y en avoir aucun) et le type qu’elle renvoie.
                        Ex :
                        function donneUnNombre(nombre){
                        return ‘’!le nombre entré est ‘’+nombre
                        }

#       Les arguments sont des nombres mais la fonction retourne une chaîne de caractère.


    #     Une fonction qui ne retourne rien est dite «!vide!»




                                                                Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
4. JAVASCRIPT
D. Variables et fonctions
    Les variables sont typées mais en Javascript le type est implicite.

    Une fonction se caractérise par les arguments qu’elles reçoit
    (il peut y en avoir aucun) et le type qu’elle renvoie.
                        Ex :
                        function donneUnNombre(nombre){
                        return ‘’!le nombre entré est ‘’+nombre
                        }

"       Les arguments sont des nombres mais la fonction retourne une chaîne de caractère.


    "     Une fonction qui ne retourne rien est dite «!vide!»

                         Ex :
                         function helloWorld(){
                         alert(‘hello World ! ! !’)}




                                                                Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
4. JAVASCRIPT
E. Boucles conditionnelles




                 Boucle if, if …else et case




                                               Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
4. JAVASCRIPT
F. Objets et méthode essentiels
  Objet window

  Méthodes : open, onload
  Propriétés : location


  Objet Screen

  Propriétés : width, height


  Objet Navigator
  Propriétés : userAgent, platform, appVersion …
  Méthode : javascriptEnabled()



  Objet Document
  ...

                                                   Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
5. DOCUMENT OBJECT MODELING




                        Web Design Master 2 MMI Université Panthéon Sorbonne
DOCUMENT OBJECT MODELING
A. Les arbres
  Exercice introductif
  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>
  <title>essai DOM</title>
  </head>

  <body>
  <p>voici un paragraphe</p>
  <div>
  le ciel est <em>bleu</em> comme la mer.
  </div>
  <p>un dernier paracgraphe avec un <a
  href="lien.html">lien</a>.</p>
  </body>
  </html>




                                              Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
A. Les arbres
  Compléter l’arbre suivant

                              <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
                              1.0 Strict//EN" "http://www.w3.org/TR/
                              xhtml1/DTD/xhtml1-strict.dtd">
                              <html xmlns="http://www.w3.org/1999/xhtml">

                              <head>
                              <title>essai DOM</title>
                              </head>

                              <body>
                              <p>voici un paragraphe</p>
                              <div>
                              le ciel est <em>bleu</em> comme la mer.
                              </div>
                              <p>un dernier paracgraphe avec un <a
                              href="lien.html">lien</a>.</p>
                              </body>
                              </html>




                                          Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
A. Les arbres
  Réponse




                     Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
A. Les arbres


  Les navigateurs organisent les balises en structure arborescente.
  Cette structure s’appelle un arbre DOM. Il représente la façon
  avec laquelle un navigateur charge une page HTML.
  Le navigateur commence par la racine <html>, puis détermine
  quels sont les éléments en dessous comme <head> et <body> qui
  formes des branches partant de l’élément <html> et ainsi de suite.




                                             Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
  A. Les arbres


                                     body
                        noeudDiv.parentNode

                                              div
                                            noeudDiv


                                     noeudDiv.childNodes



noeudDiv.firstChild   «le ciel est bleu»       em       «comme le ciel.»     noeudDiv.lastChild




                                             «bleu»




                                                                  Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
A. Les arbres


  Un arbre DOM est formé de différents types de noeuds :
  ‣noeuds d’éléments
  ‣noeuds d’attribut
  ‣noeuds de texte




                                           Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
B. Méthodes
  getElementById( ‘’identifiant’’) est une méthode de l’objet document.
  Il permet de cibler une balise associée à un identifiant
  Il s’écrit au singulier car il désigne un élément unique.


  getElementsByTagName( ‘‘balise’’) est une méthode de l’objet document.
  Il permet de cibler toutes les balises identiques d’un document
  Il s’écrit au pluriel car il désigne une liste d’élements.


  Exemple :
  Les style css peuvent être changé à la volé
  mais il faut changer la syntaxe de la façon suivante :

  document.getElementsByTagName(“div“) [0].style.backgroundColor=“#000000“




                                                               Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
C. Applications
  ‣   Changement d’un élément CSS à la volé
  ‣   Changement d’un css global à la volé
  ‣   Jeux avec la visibilité
  ‣   Création d’un «visionneur non rafraichissant»




                                                      Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery




                        http://jquery.com/



  ‣Ecriture condensée et plus intuitive que DOM
  ‣Compatibilité IE 6+, FF 2+, Safari3.0+, Chrome, Opera9.0+
  ‣Adopté par les leader du web : Google, Mozilla.org, Wordpress...
  ‣Communauté très active



                                             Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
  Principes

  Toutes les méthodes de l’objet document : getElement(s)By....( )
  sont remplacées par une seule méthode.


                               $( )




                                            Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
  Installation


  <head>
  ...
  <script type="text/javascript" src="jquery.js"></script>

        <script type="text/javascript">
         $(document).ready(function(){
        $(document).ready(function(){
           $("a").click(function(event){
           $("a").click(function(event){
           $("a").click(function(event){
             //mon action ici
                          ici
             //mon action action ici
                    //mon
              event.preventDefault();
              event.preventDefault();
                     event.preventDefault();
           });
           });     });
         });
         });

        </script>

  ...

  </head>



                                               Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
  Sélecteurs

  ‣Identifiant : $(“#id“)
  ‣Classe : $(“.classe“)
  ‣Balise : $(“balise“)
  ‣...
  Pour accéder à une balise en particulier : $("balise:eq(numero dans la liste)“)




                                                        Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
  Sélecteurs

  ‣firstChild d’un noeud : $(“leNoeud:first“)
  ‣lastChild d’un noeud : $(“leNoeud:last“)

  Pour créer un enfant, on utilise la méthode
  $(“leNoeud“).append(“<balise>blabla</balise>...“)


  Pour retirer un enfant : $(“l’enfant“).remove()




                                                    Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
  Attributs

  ‣Setter un attribut :
  $(sélecteur).attr(“attribut“,“valeur“)


  $(sélecteur).attr({attribut1:“valeur“,
  attribut2:“valeur“,...})




                                    Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
  CSS

  ‣changer un style :
  $(sélecteur).css(“propriété“,“valeur“)




                                    Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
D. Initiation au framework jQuery
  Effets

  ‣fadeIn, fadeOut
  $(sélecteur).fadeIn(vitesse)
  $(sélecteur).fadeOut(vitesse)


  ‣show, hide
  $(sélecteur).show(vitesse)
  $(sélecteur).hide(vitesse)
  ...




                                    Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
D. Initiation au framework JQuery
  Vue d’ensemble




                                    Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
DOCUMENT OBJECT MODELING
D. Initiation au framework JQuery
  Vue d’ensemble




                                    Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
6. RÉFÉRENCES




                Web Design Master 2 MMI Université Panthéon Sorbonne
RÉFÉRENCES
A. Bibliographie
  Web Design et design d’interfaces
  Brown D., Communicating Design, 2007, New Riders

  Hoekman, Designing the moment : web interface design concept in action, 2008, New Riders

  Hoekman, Designing the Obvious: A Common Sense Approach to Web Application Design, 2007, New Riders

  Tidwell, Designing Interfaces, 2005, O’Reilly

  Elam K., Grid Systems, 2004, Princeton Architectural Press



  Design d’interaction
  Cooper, About Face 3 (The Essentials of Interaction Design), 2007, Wiley

  Sharp, Interaction Design: Beyond Human-Computer Interaction, Wiley

  Saffer, Designing for interaction, 2007, New Riders

  Moggridge, Designing Interactions, MIT Press, 2006




                                                                             Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
RÉFÉRENCES
A. Bibliographie
  Utilisabilité et prototypage
  Krug, Don't Make Me Think: A Common Sense Approach to Web Usability, New Riders

  Boucher, Ergonomie web : pour des sites web efficaces, 2007, Eyrolles

  Baccino, Mesure de l'Utilisabilité des Interfaces, 2005, Hermès

  Snyder, Paper Prototyping, 2003, Morgan Kaufmann


  Web Authoring
  Erik T.Ray , Introduction à XML, O’Reilly

  Chuck Musciano and Bill Kennedy, HTML & XHTML: The Definitive Guide (6th Edition), O’Reilly

  Christopher Schmitt, CSS Cookbook, O’Reilly

  Dom Scripting, 2005, Apress

  Ajax, Tête la premiere, 2006, O’Reilly




                                                                         Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
RÉFÉRENCES
B. Webographie

Design d’interface, Design d’interaction, UX   Ressources et tutoriaux

http://wireframes.linowski.ca/                 http://www.simplebits.com

http://www.uie.com/                            http://www.pompage.net
http://deeplinking.net/                        http://www.thegridsystem.org

http://www.interaction-design.org/             http://developer.yahoo.com/ypatterns/

http://www.iconwerk.de/                        http://www.iconfinder.net/

http://www.uxmag.com/                          http://www.thegridsystem.org/

http://www.archive.org                         http://fr.selfhtml.org
http://www.pixelsumo.com/                      http://jquery.com
                                               http://www.blueprint.com
                                               http://bluecalc.groupion.com/




                                                              Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne

Contenu connexe

Tendances

HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
Hamid Tasra
 
XML Avancé : DTD, XSD, XPATH, XSLT, XQuery
XML Avancé : DTD, XSD, XPATH, XSLT, XQueryXML Avancé : DTD, XSD, XPATH, XSLT, XQuery
XML Avancé : DTD, XSD, XPATH, XSLT, XQuery
Rachid NID SAID
 
cours Php
cours Phpcours Php
cours Php
mohamednacim
 
Le Langage CSS
Le Langage CSSLe Langage CSS
Le Langage CSS
Mohammed Amine Mostefai
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
Emmanuelle Morlock
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
Erwan Tanguy
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Claude Coulombe
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015Emmanuelle Morlock
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
Erwan Tanguy
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
Patrick Vincent
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
Abdoulaye Dieng
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
Benoît Simard
 
Formation - P1 - Spip Utilisation
Formation - P1 - Spip UtilisationFormation - P1 - Spip Utilisation
Formation - P1 - Spip Utilisation
Patrick Vincent
 
Intégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to BasicsIntégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to Basics
Jean Michel
 
xml dtd schema
xml dtd schemaxml dtd schema
xml dtd schema
Dame Sy
 

Tendances (20)

Html
HtmlHtml
Html
 
HTML & CSS
HTML & CSSHTML & CSS
HTML & CSS
 
XML Avancé : DTD, XSD, XPATH, XSLT, XQuery
XML Avancé : DTD, XSD, XPATH, XSLT, XQueryXML Avancé : DTD, XSD, XPATH, XSLT, XQuery
XML Avancé : DTD, XSD, XPATH, XSLT, XQuery
 
cours Php
cours Phpcours Php
cours Php
 
Le Langage CSS
Le Langage CSSLe Langage CSS
Le Langage CSS
 
XML
XMLXML
XML
 
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
2014 09 12_atelier-humanites-numerique-hisoma-seance-1-oxygen
 
Les bases du CSS3
Les bases du CSS3Les bases du CSS3
Les bases du CSS3
 
Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08Normes de base du Web - GTI780 & MTI780 - ETS - A08
Normes de base du Web - GTI780 & MTI780 - ETS - A08
 
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-201518 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
18 02-2015 atelier-pratique-xml-tei-stage-d-ecdotique-2015
 
Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
Formation - P2 - Standards du Web
Formation - P2 - Standards du WebFormation - P2 - Standards du Web
Formation - P2 - Standards du Web
 
Initiation au html
Initiation au htmlInitiation au html
Initiation au html
 
Memento HTML CSS
Memento HTML CSSMemento HTML CSS
Memento HTML CSS
 
technologie web - part2
technologie web - part2technologie web - part2
technologie web - part2
 
Formation - P1 - Spip Utilisation
Formation - P1 - Spip UtilisationFormation - P1 - Spip Utilisation
Formation - P1 - Spip Utilisation
 
Intégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to BasicsIntégration #2 : HTML 101 : Back to Basics
Intégration #2 : HTML 101 : Back to Basics
 
xml dtd schema
xml dtd schemaxml dtd schema
xml dtd schema
 
Cours3 gdm sql
Cours3 gdm sqlCours3 gdm sql
Cours3 gdm sql
 
C5 Javascript
C5 JavascriptC5 Javascript
C5 Javascript
 

En vedette

Pâques
PâquesPâques
Pâques
mingxu
 
Référencer son blog
Référencer son blogRéférencer son blog
Référencer son blog
Ernesto Hane
 
Famille Raquel Juanmi
Famille Raquel JuanmiFamille Raquel Juanmi
Quel est le_prix_de_la_beaute
Quel est le_prix_de_la_beauteQuel est le_prix_de_la_beaute
Quel est le_prix_de_la_beautecatavrio
 
Investigamos
InvestigamosInvestigamos
Investigamos
tutoresaa
 
Melissa lombana portaflio de presentación.
Melissa lombana portaflio de presentación.Melissa lombana portaflio de presentación.
Melissa lombana portaflio de presentación.
Secretaría De Educación de Bogotá
 
Comunicación humana por medios masivos, Itzamar González Vargas, g5, periodo ...
Comunicación humana por medios masivos, Itzamar González Vargas, g5, periodo ...Comunicación humana por medios masivos, Itzamar González Vargas, g5, periodo ...
Comunicación humana por medios masivos, Itzamar González Vargas, g5, periodo ...
Itza González Vargas
 
Noël en france
Noël en france Noël en france
Noël en france
blancadn
 
Les mondes virtuels et la communication
Les mondes virtuels et la communicationLes mondes virtuels et la communication
Les mondes virtuels et la communication
Marjorie Soutric
 
14607 Bulletin Pleuven
14607 Bulletin Pleuven14607 Bulletin Pleuven
14607 Bulletin Pleuven
guest07253f
 
Appellation d origine2
Appellation d origine2Appellation d origine2
Appellation d origine2catavrio
 
Présentation Zotero Journée du Personnel DBIST - Janvier 2012
Présentation Zotero Journée du Personnel DBIST - Janvier 2012Présentation Zotero Journée du Personnel DBIST - Janvier 2012
Présentation Zotero Journée du Personnel DBIST - Janvier 2012
Magalie Le Gall
 
Portafolio de trabajo Melissa Lombana
Portafolio de trabajo Melissa LombanaPortafolio de trabajo Melissa Lombana
Portafolio de trabajo Melissa Lombana
Secretaría De Educación de Bogotá
 
Tice Med09 Projet Sti
Tice Med09 Projet StiTice Med09 Projet Sti
Tice Med09 Projet Sti
Pierre Bénech
 
Slide melissa lombana
Slide melissa lombanaSlide melissa lombana
MAISON A VENDRE ST TROPEZ RAMATUELLE
MAISON A VENDRE ST TROPEZ RAMATUELLEMAISON A VENDRE ST TROPEZ RAMATUELLE
MAISON A VENDRE ST TROPEZ RAMATUELLE
Marc Foujols
 
La vie apres_la_mort
La vie apres_la_mortLa vie apres_la_mort
La vie apres_la_mortcatavrio
 
Revitalisation des jeux traditionnels (CIOFF)
Revitalisation des jeux traditionnels (CIOFF)Revitalisation des jeux traditionnels (CIOFF)
Revitalisation des jeux traditionnels (CIOFF)heritageorganisations.eu
 

En vedette (20)

Pâques
PâquesPâques
Pâques
 
Référencer son blog
Référencer son blogRéférencer son blog
Référencer son blog
 
Famille Raquel Juanmi
Famille Raquel JuanmiFamille Raquel Juanmi
Famille Raquel Juanmi
 
Quel est le_prix_de_la_beaute
Quel est le_prix_de_la_beauteQuel est le_prix_de_la_beaute
Quel est le_prix_de_la_beaute
 
Investigamos
InvestigamosInvestigamos
Investigamos
 
Melissa lombana portaflio de presentación.
Melissa lombana portaflio de presentación.Melissa lombana portaflio de presentación.
Melissa lombana portaflio de presentación.
 
Crisetextille
CrisetextilleCrisetextille
Crisetextille
 
Comunicación humana por medios masivos, Itzamar González Vargas, g5, periodo ...
Comunicación humana por medios masivos, Itzamar González Vargas, g5, periodo ...Comunicación humana por medios masivos, Itzamar González Vargas, g5, periodo ...
Comunicación humana por medios masivos, Itzamar González Vargas, g5, periodo ...
 
Noël en france
Noël en france Noël en france
Noël en france
 
Les mondes virtuels et la communication
Les mondes virtuels et la communicationLes mondes virtuels et la communication
Les mondes virtuels et la communication
 
14607 Bulletin Pleuven
14607 Bulletin Pleuven14607 Bulletin Pleuven
14607 Bulletin Pleuven
 
Appellation d origine2
Appellation d origine2Appellation d origine2
Appellation d origine2
 
Présentation Zotero Journée du Personnel DBIST - Janvier 2012
Présentation Zotero Journée du Personnel DBIST - Janvier 2012Présentation Zotero Journée du Personnel DBIST - Janvier 2012
Présentation Zotero Journée du Personnel DBIST - Janvier 2012
 
Portafolio de trabajo Melissa Lombana
Portafolio de trabajo Melissa LombanaPortafolio de trabajo Melissa Lombana
Portafolio de trabajo Melissa Lombana
 
Tice Med09 Projet Sti
Tice Med09 Projet StiTice Med09 Projet Sti
Tice Med09 Projet Sti
 
MoïSe
MoïSeMoïSe
MoïSe
 
Slide melissa lombana
Slide melissa lombanaSlide melissa lombana
Slide melissa lombana
 
MAISON A VENDRE ST TROPEZ RAMATUELLE
MAISON A VENDRE ST TROPEZ RAMATUELLEMAISON A VENDRE ST TROPEZ RAMATUELLE
MAISON A VENDRE ST TROPEZ RAMATUELLE
 
La vie apres_la_mort
La vie apres_la_mortLa vie apres_la_mort
La vie apres_la_mort
 
Revitalisation des jeux traditionnels (CIOFF)
Revitalisation des jeux traditionnels (CIOFF)Revitalisation des jeux traditionnels (CIOFF)
Revitalisation des jeux traditionnels (CIOFF)
 

Similaire à MMI Web Design P2

HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francaisVlad Posea
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
Frédéric Simonet
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
4gnzggpfdw
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
YounesOuladSayad1
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
ABDENNACEURGHANDRI1
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
RihabBENLAMINE
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
BrahimKarimi
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
kitsformation
 
Cours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxCours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptx
Mounir Gouiouez
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
Yaya Im
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
RihabBENLAMINE
 
Programmation web1partie3
Programmation web1partie3Programmation web1partie3
Programmation web1partie3Annabi Gihed
 
Cours html5
Cours html5Cours html5
Cours html5
Abdelmonem NAAMANE
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
tanokouakouludovic
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
mdallamohamed
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
kadarabdillahi125
 
Les dessous de html+ccs+js
Les dessous de html+ccs+jsLes dessous de html+ccs+js
Les dessous de html+ccs+js
pixees Scienceparticipative
 
Atelier template
Atelier templateAtelier template
Atelier template
Pierre Sempé
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wp
Chi Nacim
 

Similaire à MMI Web Design P2 (20)

HTML 5 - intro - en francais
HTML 5 - intro - en francaisHTML 5 - intro - en francais
HTML 5 - intro - en francais
 
Langage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliersLangage HTML - Fondamentaux et ateliers
Langage HTML - Fondamentaux et ateliers
 
Cours Html.pdf
Cours Html.pdfCours Html.pdf
Cours Html.pdf
 
developpement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantiquedeveloppement web HTML & CSS web Sémantique
developpement web HTML & CSS web Sémantique
 
hassclic284.ppt
hassclic284.ppthassclic284.ppt
hassclic284.ppt
 
BDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdfBDW-ProgWEB_P1.pdf
BDW-ProgWEB_P1.pdf
 
presentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptxpresentation de html partie par partie et detaillee.pptx
presentation de html partie par partie et detaillee.pptx
 
Kits formation html-les_bases
Kits formation html-les_basesKits formation html-les_bases
Kits formation html-les_bases
 
Cours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptxCours de développement web de HTML5 .pptx
Cours de développement web de HTML5 .pptx
 
exposé en HTML
exposé en HTMLexposé en HTML
exposé en HTML
 
Html css-xhtml
Html css-xhtmlHtml css-xhtml
Html css-xhtml
 
Cours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.pptCours_1 - HTML5 et JS.ppt
Cours_1 - HTML5 et JS.ppt
 
Programmation web1partie3
Programmation web1partie3Programmation web1partie3
Programmation web1partie3
 
Cours html5
Cours html5Cours html5
Cours html5
 
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptxFormation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
Formation developpement web KADODJOMON EMMANUEL COULIBALY.pptx
 
iune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdfiune initiation au développement web avec des exemples pratiques .pdf
iune initiation au développement web avec des exemples pratiques .pdf
 
Langage HTML
Langage HTMLLangage HTML
Langage HTML
 
Les dessous de html+ccs+js
Les dessous de html+ccs+jsLes dessous de html+ccs+js
Les dessous de html+ccs+js
 
Atelier template
Atelier templateAtelier template
Atelier template
 
Creation de-themes-wp
Creation de-themes-wpCreation de-themes-wp
Creation de-themes-wp
 

Plus de David Raichman

Design Game Brainstorm
Design Game BrainstormDesign Game Brainstorm
Design Game Brainstorm
David Raichman
 
Cours (F) Gobelins Master 2 MICNI
Cours (F) Gobelins Master 2 MICNICours (F) Gobelins Master 2 MICNI
Cours (F) Gobelins Master 2 MICNI
David Raichman
 
UX Paris 10/02/10 - Designer l'invisible
UX Paris 10/02/10 - Designer l'invisibleUX Paris 10/02/10 - Designer l'invisible
UX Paris 10/02/10 - Designer l'invisible
David Raichman
 
Cours (E) Gobelins Master 2 MICNI
Cours (E) Gobelins Master 2 MICNICours (E) Gobelins Master 2 MICNI
Cours (E) Gobelins Master 2 MICNI
David Raichman
 
Cours (C) Gobelins Master 2 MICNI
Cours (C) Gobelins Master 2 MICNICours (C) Gobelins Master 2 MICNI
Cours (C) Gobelins Master 2 MICNI
David Raichman
 
Cours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNICours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNI
David Raichman
 
Aux frontières du digital (B) (SciencesPo 2009)
Aux frontières du digital (B) (SciencesPo 2009)Aux frontières du digital (B) (SciencesPo 2009)
Aux frontières du digital (B) (SciencesPo 2009)
David Raichman
 
Aux frontières du digital (A) (SciencesPo 2009)
Aux frontières du digital (A) (SciencesPo 2009)Aux frontières du digital (A) (SciencesPo 2009)
Aux frontières du digital (A) (SciencesPo 2009)
David Raichman
 
Interface Design Crma 2009
Interface Design Crma 2009Interface Design Crma 2009
Interface Design Crma 2009
David Raichman
 
MMI Web Design P1
MMI Web Design P1MMI Web Design P1
MMI Web Design P1
David Raichman
 

Plus de David Raichman (10)

Design Game Brainstorm
Design Game BrainstormDesign Game Brainstorm
Design Game Brainstorm
 
Cours (F) Gobelins Master 2 MICNI
Cours (F) Gobelins Master 2 MICNICours (F) Gobelins Master 2 MICNI
Cours (F) Gobelins Master 2 MICNI
 
UX Paris 10/02/10 - Designer l'invisible
UX Paris 10/02/10 - Designer l'invisibleUX Paris 10/02/10 - Designer l'invisible
UX Paris 10/02/10 - Designer l'invisible
 
Cours (E) Gobelins Master 2 MICNI
Cours (E) Gobelins Master 2 MICNICours (E) Gobelins Master 2 MICNI
Cours (E) Gobelins Master 2 MICNI
 
Cours (C) Gobelins Master 2 MICNI
Cours (C) Gobelins Master 2 MICNICours (C) Gobelins Master 2 MICNI
Cours (C) Gobelins Master 2 MICNI
 
Cours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNICours (A) Gobelins Master 2 MICNI
Cours (A) Gobelins Master 2 MICNI
 
Aux frontières du digital (B) (SciencesPo 2009)
Aux frontières du digital (B) (SciencesPo 2009)Aux frontières du digital (B) (SciencesPo 2009)
Aux frontières du digital (B) (SciencesPo 2009)
 
Aux frontières du digital (A) (SciencesPo 2009)
Aux frontières du digital (A) (SciencesPo 2009)Aux frontières du digital (A) (SciencesPo 2009)
Aux frontières du digital (A) (SciencesPo 2009)
 
Interface Design Crma 2009
Interface Design Crma 2009Interface Design Crma 2009
Interface Design Crma 2009
 
MMI Web Design P1
MMI Web Design P1MMI Web Design P1
MMI Web Design P1
 

MMI Web Design P2

  • 1. WEB DESIGN Master 2 MMI | Université Panthéon Sorbonne Octobre 2009 : Partie 2/4 David Raichman Senior UX Designer @ OgilvyInteractive
  • 2. 1. HTML ET XHTML Web Design Master 2 MMI Université Panthéon Sorbonne
  • 3. 1. HTML ET XHTML A. Versions et DTD La déclaration <!DOCTYPE> située avant la balise d’ouverture <HTML>, permet de spécifier la version de la norme utilisée dans le document (HTML 3.2, XHTML1.1…) Découpage d’une entrée DOCTYPE : Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 4. 1. HTML ET XHTML A. Versions et DTD Encodage du document et la balise <head> <meta http-equiv="ContentType" content="text/html; charset=iso88591" /> iso88591 = langues d’Europe occidentale iso885915 = complémentaire du précédent avec des caractères supplémentaires type «!œ!» ou «!"!» utf8 = permet d’utiliser la plupart des caractère de la majorité des langues du monde : c’est un code de l’Unicode Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 5. 1. HTML ET XHTML B. Eléments contenus et balises <balise ouvrante>contenu</balise fermante> { élément Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 6. 1. HTML ET XHTML B. Eléments contenus et balises Les balises acceptent parfois des caractéristiques supplémentaires pour les distinguer ou les personnaliser. <balise attribut="un attribut">contenu</ balise> Les éléments peuvent s’imbriquer : <h1 id="monTitre">Le titre <em>du document</em></h1> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 7. 1. HTML ET XHTML C. Eléments contenus et balises Balises de type bloc Balises de type en ligne Un élément de type bloc peut contenir un ou Un élément de type ligne ne peut renfermer que plusieurs éléments bloc et/ou en ligne, sauf d’autres éléments de type ligne. paragraphe <p> et titres <h1>, <h2>,… Une mise en page se fera donc de préférence à Il existe en fait 2 sortes d’éléments de type ligne : l’aide de balise de type bloc. La plus indiquée pour «!remplacés!» et «!non remplacés!». cet usage est <div> : c’est une balise générique -Seuls les éléments remplacés acceptent des servant de conteneur neutre. attributs de dimensions (height, width). Il s’agit des éléments <img>, <input>, <textarea>,<select> et <object>. - Les autres n’ont pas de dimension à proprement parler, et n’occupent que la place nécessaire à leur contenu. C’est le cas de <strong>,<em> et <a>. (%)&*&$'+,$-.$/0 !"!#$%&'!"#$ :2/;<'+=2.>0 !"!#$%&'%&'"()&% 12.3"$'.245#$%&'67819 Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 8. Balises bloc Balise Description Exemple Introduit des citations longues. Par défaut, certains navigateurs prévoient une marge <p>Kant disait :<p/><blockquote><p>l'espace et le temps <blockquote> gauche aux blocs de citation, qu'on pourra bien sûr sont les formes de notre sensibilité</p></blockquote> modifier en CSS. Conteneur générique de type bloc. Cette balise n'apporte pas de sens spécifique, <div><p>Voici un texte <em>important</em></p><p>Et un <div> comme la balise <span>. Elle sert à regrouper autre texte <strong>imortant</strong></p></div> d'autres balises de type bloc ou ligne. <dl> Liste de définitions, utile pour structurer les éléments <dt>Titre de l'élément</dt> associant des définitions ou contenus à des termes ou <dl> <dd>description de l'élément</dd> à des titres. Ces listes distinguent les titres (<dt>) des <dd>Suite de la description</dd> éléments de définition (<dd>) </dl> Balise délimitant un formulaire interactif. Elle contient <form action="pagesuivante.php" généralement des éléments d'interface (champs de method="get"><p><input type="text" name="recherche" /> <form> texte, boutons de validation, cases à cocher,…) Cet <input type="submit" value="ok" /> élément doit renfermer immédiatement d'autres </p> élément de type bloc. </form> HTML prévoit six niveaux de titres, hiérarchiquement <h1>, <h2>, … placé sous le titre principal (<h1>). Ces éléments <h1>Titre principal</h1> <h6> constituent une exception à la règle des blocs ; ils ne peuvent contenir d'autres blocs. Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 9. Balises bloc Balise Description Exemple <ul> Ces deux balises désignent des listes ordonnées <li>premier objet de la liste</li> <ol>, <ul> (<ol>) ou à puces simples (<li>) <li>second objet de la liste</li> </ul> Balise désignant un paragraphe de texte. Cet élément <p> constitue une exception à la règle des blocs car il ne <p>Un paragraphe de texte</p> peut en contenir d'autres. <table> <tr> Tableau contenant des données. Les cellules du <td>cellule 1</td> <table> tableau sont d'abord rassemblés sous forme de rangé <td>cellule 2</td> ou lignes (<tr>). </tr> </table> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 10. Balises en ligne Balise Description Exemple Désigne un lien hypertexte. Elle s’accompagne de l’attribut href, qui renferme la cible du lien <a> <a href= "page5.htm">allez en page 5</a> (son contenu représentant le texte à cliquer pour activer le lien) Met en emphase une portion de texte. Quand la police utilisée est droite, la plupart des <p>Voici un texte <em>important</em></p><p>Et un autre <em> navigateurs graphiques la traduisent comme texte <strong>imortant</strong></p> une mise en italique. Inclut une image dans le document Cette balise es accompagné des attributs alt (texte <img> alternatif) et src (qui indique le chemin de <img title=‘titre’ alt=’poisson’ src=‘poisson.jpg’ /> l’image). Les navigateurs supportent les formats gif, png et jpg Balise utilisée pour les citations courtes. On <q> utilisera <blockquote> pour les citations <p>comme le dit Kant <q>la pensée…</q></p> longues. Conteneur générique de type bloc. Cette balise n'apporte pas de sens spécifique, comme la <span> <span id=”fluo”>le texte</span> balise <span>. Elle sert à regrouper d'autre balises de type bloc ou ligne. Indique un renforcement général représenté en <strong> <p>ceci est<strong>important ! </strong></p> gras dans les navigateurs graphiques Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 11. 1. HTML ET XHTML D. Différencier HTML et XHTML dans la pratique La syntaxe obsolète : ‣ Balises écrites en majuscules, ex :<P> ‣Balise ouvrante sans balise fermante ex : <br>, <img src=!"xyz.jpg">,<p> ou <li>. ‣En XHTML, les balises vides ont la syntaxe suivante : <balise vide /> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 12. 1. HTML ET XHTML D. Différencier HTML et XHTML dans la pratique Les balises obsolètes : Ce sont les balises qui donnent des indications de mise en forme : <font>, <center>, <u>, <s>, <i>, <b> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 13. 1. HTML ET XHTML E. Pratique : l’ami ultime de DW... Firebug Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 14. 1. HTML ET XHTML F. Pratique : Utilisation de Dreamweaver 1. créer un titre de page et un titre général 2. créer une page avec deux paragraphes et deux soustitres. 3. ajouter une image dans le flux entre les deux paragraphes 4. introduire des citations et des liens dans le texte, mettre en emphase certaines parties. 5. vérifier la validité XHTML 1.0 stricte du document Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 15. 2. RUDIMENTS DE WIREFRAMING Web Design Master 2 MMI Université Panthéon Sorbonne
  • 16. 2. RUDIMENTS DE WIREFRAMING A. Définition des wireframes Les wireframes sont des représentations visuelles qui capturent à elles seules l’ensemble des décisions stratégiques, fonctionnelles, d’architecture d’information et d’ergonomie.» Ils servent de référence pour le design graphique et pour le développement du projet digital. Ils contiennent différents niveaux de précision selon le contexte. Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 17. 2. RUDIMENTS DE WIREFRAMING B. Degré de précision Interactif Low résolution Hi résolution Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 18. 2. RUDIMENTS DE WIREFRAMING A. Degré de précision Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 19. 2. RUDIMENTS DE WIREFRAMING A. Degré de précision Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 20. 2. RUDIMENTS DE WIREFRAMING B. Degré de précision Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 21. 2. RUDIMENTS DE WIREFRAMING B. Degré de précision Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 22. 2. RUDIMENTS DE WIREFRAMING B. Degré de précision Interactif Prototype Prototype papier digital Low résolution Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 23. 2. RUDIMENTS DE WIREFRAMING B. Degré de précision Interactif Prototype Prototype papier digital Low résolution Wireframes Hi résolution Sketching Ecrans (psd, jpg...) Statique Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 24. 2. RUDIMENTS DE WIREFRAMING C. Hiérarchie visuelle accès autre sites logo branded header navigation principale + recherche +panier navigation produits accès secondaire utilisateurs footer Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 25. 2. RUDIMENTS DE WIREFRAMING D. Zone visible d’écran FR EN Les sites Renault Logo RENAULT-MERCHANDISING.COM ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Renault F1 team Renault F1 Team DEJA INSCRIT ? Team Sportswear Team Sportswear Identifiant Bagagerie Lunettes Homme Quicksilver Montre Bike Casio Mot de passe Objets d’images Jouets 100% nylon, disponible 100% nylon, disponible Mémoriser mes Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations Doublure : 100% Doublure : 100% polyester polyester Renault Sport OK Renault >Mot de passe oublié ? Dacia >Inscrivez-vous + voir la fiche produit + voir la fiche produit Bagagerie Objets d’images Personnel du groupe Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester Professionnel + voir la fiche produit + voir la fiche produit Jouets Miniature Polaire Histoire & collection Logan Berline DACIA 2005 1/43 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester + voir la fiche produit + voir la fiche produit © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 26. 2. RUDIMENTS DE WIREFRAMING D. Zone visible d’écran !"#$%&' !"#$%&'($)*"+!,) FR EN Les sites Renault Logo RENAULT-MERCHANDISING.COM ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Renault F1 team Renault F1 Team DEJA INSCRIT ? Team ()*%&' Sportswear Team Sportswear Identifiant Bagagerie Lunettes Homme Quicksilver Montre Bike Casio Mot de passe Objets d’images Jouets 100% nylon, disponible 100% nylon, disponible Mémoriser mes Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations Doublure : 100% Doublure : 100% polyester polyester Renault Sport OK Renault >Mot de passe oublié ? Dacia >Inscrivez-vous + voir la fiche produit + voir la fiche produit Bagagerie Objets d’images Personnel du groupe Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester Professionnel + voir la fiche produit + voir la fiche produit Jouets Miniature Polaire Histoire & collection Logan Berline DACIA 2005 1/43 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester + voir la fiche produit + voir la fiche produit © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 27. 2. RUDIMENTS DE WIREFRAMING D. Zone visible d’écran !"#$%&' !"#$%&'($)*"+!,) FR EN Les sites Renault Logo !"""#$% RENAULT-MERCHANDISING.COM 960 ou 950 px ACCUEIL NOTRE ACTIVITE NOS PRODUITS NOS POINTS DE VENTE OFFRES WEB EXCLUSIVES ma liste mon panier RECHERCHER UN PRODUIT toutes catégories go 5 articles 2 articles Renault F1 team Renault F1 Team DEJA INSCRIT ? Team ()*%&' Sportswear Team Sportswear Identifiant $()*+)(#,-(.// Bagagerie Lunettes Homme Quicksilver Montre Bike Casio Mot de passe Objets d’images Jouets &'"#$% 100% nylon, disponible 100% nylon, disponible Mémoriser mes !"#$%&'()$ Miniature en S, M, L, XL, XXL en S, M, L, XL, XXL informations Doublure : 100% Doublure : 100% polyester polyester Renault Sport OK Renault >Mot de passe oublié ? Dacia >Inscrivez-vous + voir la fiche produit + voir la fiche produit Bagagerie Objets d’images Personnel du groupe Polaire Histoire & collection Logan Berline DACIA 2005 1/43 Renault 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester Professionnel + voir la fiche produit + voir la fiche produit Jouets Miniature Polaire Histoire & collection Logan Berline DACIA 2005 1/43 100% nylon, disponible 100% nylon, disponible en S, M, L, XL, XXL en S, M, L, XL, XXL Doublure : 100% Doublure : 100% polyester polyester + voir la fiche produit + voir la fiche produit © RENAULT MERCHANDISING NEWSLETTER CONTACT PLAN DU SITE MENTIONS LEGALES CGU Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 28. 3. CSS Web Design Master 2 MMI Université Panthéon Sorbonne
  • 29. 3. CSS A. Présentation, méthode de liaison, syntaxe Il existe deux méthodes de liaisons des fichiers *.css externes #Une méthode classique utilisant les attributs de la balise <link> (balise autofermante) <link href=“monstyle.css" rel="stylesheet" type="text/css" /> #Une méthode qui utilise une propriété CSS 2, nommée @import. Ce n’est pas une balise HTML ! <style type="text/css"> @import url(impression.css) print; @import url(portable.css) handheld; @import url(normal.css) screen </style> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 30. 3. CSS A. Présentation, méthode de liaison, syntaxe Le CSS est fondé sur l’héritage et la cascade La syntaxe du CSS utilise les accolades : sélecteur { propriété 1: valeur ; propriété 2: valeur ; propriété 3: valeur ; /*un commentaire*/ } Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 31. 3. CSS B. Sélecteurs Voir également document ci-joint Un sélecteur permet d’identifier les lieux d’application d’un style défini. Il existe 3 types de sélecteurs : ‣Les sélecteurs de balise (déjà vu) ‣Les sélecteurs de classes permettant d’appliquer un style à un ensemble d’éléments indépendamment du type de balise. .classe { propriété n: valeur; } ‣Les sélecteurs d’identifiants (id est le nom attribué à un élément unique dans le doc HTML). #identifiant{ propriété n: valeur; } Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 32. 3. CSS B. Sélecteurs Voir également document ci-joint Un sélecteur permet de trouver le chemin arborescent d’une balise à laquelle on veut appliquer un style (voir doc) Ex : <div id=‘intro’><p>du texte</p></div> Pour donner un style à <p>, on utilise la syntaxe : #intro p {…} ou div p{...} Dans le contexte de la cascade, deux règles de styles peuvent êtres contradictoires dans ce cas c’est la dernière règle lue qui l’emporte. La mention !important permet de surclasser une règle donnée même si elle n’est pas lue à la fin. Ex : p{fontsize:10px !important;} Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 33. 3. CSS B. Sélecteurs Voir également document ci-joint Syntaxe de regroupements : On peur regrouper des sélecteurs pour une même famillepropriété ex : .texte, p, h1, h2 { Marginleft : 0; } On peut regrouper des propriétés autour d’une famille quelque soient ses propriétés ex : p { font: italic bold 120% Arial, sansserif; } Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 34. 3. CSS C. Gestion des couleur et de la transparence En CSS, le système de couleur est noté soit en hexadécimal (blanc = #000000), soit par nom des couleurs principales ex : ‘yellow’ pour jaune. La gestion de la transparence est un hack. A utiliser avec précaution. Son utilisera sera standardisé dans CSS3. Firefox {opacity: de 0 à 1;} IE78 {filter:alpha(opacity=0 à 100);} Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 35. 3. CSS D. Typographie et mise en forme de caractères Les polices standards : Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 36. 3. CSS D. Typographie et mise en forme de caractères Déclaration des polices en CSS (en fonction des polices système disponibles) : body { fontfamily : ‘Georgia’, times, serif; } Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 37. 3. CSS D. Typographie et mise en forme de caractères Unité de taille des polices en CSS Unité de taille fixe : en points (pt) (1pt = 0.35mm) Unité de taille relative : px, % et cadratin en «!M!» (em) pour la largeur En «!X!» (ex) pour la hauteur Définit relativement à la taille déférence du texte contenu dans le conteneur. Le dimensionnement relatif permet d’afficher, via le navigateur, la police en plus grand ou plus petit avec une mise en page fluide. Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 38. 3. CSS D. Typographie et mise en forme de caractères Les motsclés de tailles : xxsmall, xsmall, small, medium, large, xlarge et xxlarge Ces tailles dépendent du navigateur utilisé ! Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 39. 3. CSS E. Bordure, arrièreplan et images ‣Style de bordure ‣Épaisseur des bordures ‣Couleur des bordures ‣Arrières-plans et images de fond ‣Positionnement et répétition de l’image ‣Fixation de l’image/contenu Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 40. 3. CSS F. Positionnement Le modèle des boîtes : Pb fondamental : le modèle de boîte Microsoft est différent du modèle standard à différence d’affichage Modèle standard : Largeur à l’écran = width+padding+border Modèle Microsoft : Largeur à l’écran = width Solution possible : le hack universel *{Margin:0; Padding:0;} Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 41. 3. CSS F. Positionnement Il y a trois types de positionnement en CSS : A. Positionnement dans le flux courant (flow) B. Positionnement relatif C. Positionnement absolu et notion de z-index (calque) Applications : centrage, float, menu… Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 42. 3. CSS G. Grid Design Le Grid Design a pour objectif de : ‣Créer un environnement structurant pour organiser spatialement une interface ‣Mettre en place un framework CSS facilitant l’organisation des éléments par rapport à une grille ‣Optimiser le workflow conception/réalisation http://www.thegridsystem.org Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 43. 3. CSS G. Grid Design Principe d’une grille de mise en page : Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 44. 3. CSS G. Grid Design Principe d’une grille de mise en page : Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 45. 3. CSS G. Grid Design Principe d’une grille de mise en page : Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 46. 3. CSS G. Grid Design Exemple simple Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 47. 3. CSS G. Grid Design Exemple simple Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 48. 3. CSS G. Grid Design Exemple simple Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 49. 3. CSS G. Grid Design Exemple simple Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 50. 3. CSS H. Initiation au framework Blueprint http://www.blueprintcss.org Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 51. 4. JAVASCRIPT Web Design Master 2 MMI Université Panthéon Sorbonne
  • 52. 4. JAVASCRIPT A. Présentation et principe de fonctionnement Javascript est un langage qui gère le comportement des navigateurs. Il est dérivé de la norme ECMA, comme ActionScript. Javascript est sensible au navigateur utilisé : certains objets n’existe pas ou sont mal interprétés pour un navigateur donné ! Javascript est un langage interprété par les navigateurs, cela suppose que leur interpréteurs doit être actif pour que les scripts fonctionnent. Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 53. 4. JAVASCRIPT B. Méthode d’inclusion Afin de séparer forme, structure et comportement, on externalise les scripts javascript. <script type="text/javascript“ src=“url_du_script.js”></script> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 54. 4. JAVASCRIPT C. Types ‣Nombres entiers et nombres décimaux (float) ‣(opérateurs <,>, ==,…) ‣Booléen ‣(Nommage, valeurs, opérateurs) ‣Chaîne de caractères (String) ‣(Concaténation, méthodes indexOf, length, substring,…) ‣Les convertisseurs de type ‣parseInt() permet de convertir une variable en nombre ‣parseFloat() permet de convertir une variable en nombre décimal Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 55. 4. JAVASCRIPT D. Variables et fonctions Les variables sont typées mais en Javascript le type est implicite. Une fonction se caractérise par les arguments qu’elles reçoit (il peut y en avoir aucun) et le type qu’elle renvoie. Ex : function donneUnNombre(nombre){ return ‘’!le nombre entré est ‘’+nombre } # Les arguments sont des nombres mais la fonction retourne une chaîne de caractère. # Une fonction qui ne retourne rien est dite «!vide!» Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 56. 4. JAVASCRIPT D. Variables et fonctions Les variables sont typées mais en Javascript le type est implicite. Une fonction se caractérise par les arguments qu’elles reçoit (il peut y en avoir aucun) et le type qu’elle renvoie. Ex : function donneUnNombre(nombre){ return ‘’!le nombre entré est ‘’+nombre } " Les arguments sont des nombres mais la fonction retourne une chaîne de caractère. " Une fonction qui ne retourne rien est dite «!vide!» Ex : function helloWorld(){ alert(‘hello World ! ! !’)} Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 57. 4. JAVASCRIPT E. Boucles conditionnelles Boucle if, if …else et case Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 58. 4. JAVASCRIPT F. Objets et méthode essentiels Objet window Méthodes : open, onload Propriétés : location Objet Screen Propriétés : width, height Objet Navigator Propriétés : userAgent, platform, appVersion … Méthode : javascriptEnabled() Objet Document ... Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 59. 5. DOCUMENT OBJECT MODELING Web Design Master 2 MMI Université Panthéon Sorbonne
  • 60. DOCUMENT OBJECT MODELING A. Les arbres Exercice introductif <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>essai DOM</title> </head> <body> <p>voici un paragraphe</p> <div> le ciel est <em>bleu</em> comme la mer. </div> <p>un dernier paracgraphe avec un <a href="lien.html">lien</a>.</p> </body> </html> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 61. DOCUMENT OBJECT MODELING A. Les arbres Compléter l’arbre suivant <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>essai DOM</title> </head> <body> <p>voici un paragraphe</p> <div> le ciel est <em>bleu</em> comme la mer. </div> <p>un dernier paracgraphe avec un <a href="lien.html">lien</a>.</p> </body> </html> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 62. DOCUMENT OBJECT MODELING A. Les arbres Réponse Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 63. DOCUMENT OBJECT MODELING A. Les arbres Les navigateurs organisent les balises en structure arborescente. Cette structure s’appelle un arbre DOM. Il représente la façon avec laquelle un navigateur charge une page HTML. Le navigateur commence par la racine <html>, puis détermine quels sont les éléments en dessous comme <head> et <body> qui formes des branches partant de l’élément <html> et ainsi de suite. Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 64. DOCUMENT OBJECT MODELING A. Les arbres body noeudDiv.parentNode div noeudDiv noeudDiv.childNodes noeudDiv.firstChild «le ciel est bleu» em «comme le ciel.» noeudDiv.lastChild «bleu» Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 65. DOCUMENT OBJECT MODELING A. Les arbres Un arbre DOM est formé de différents types de noeuds : ‣noeuds d’éléments ‣noeuds d’attribut ‣noeuds de texte Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 66. DOCUMENT OBJECT MODELING B. Méthodes getElementById( ‘’identifiant’’) est une méthode de l’objet document. Il permet de cibler une balise associée à un identifiant Il s’écrit au singulier car il désigne un élément unique. getElementsByTagName( ‘‘balise’’) est une méthode de l’objet document. Il permet de cibler toutes les balises identiques d’un document Il s’écrit au pluriel car il désigne une liste d’élements. Exemple : Les style css peuvent être changé à la volé mais il faut changer la syntaxe de la façon suivante : document.getElementsByTagName(“div“) [0].style.backgroundColor=“#000000“ Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 67. DOCUMENT OBJECT MODELING C. Applications ‣ Changement d’un élément CSS à la volé ‣ Changement d’un css global à la volé ‣ Jeux avec la visibilité ‣ Création d’un «visionneur non rafraichissant» Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 68. DOCUMENT OBJECT MODELING D. Initiation au framework jQuery http://jquery.com/ ‣Ecriture condensée et plus intuitive que DOM ‣Compatibilité IE 6+, FF 2+, Safari3.0+, Chrome, Opera9.0+ ‣Adopté par les leader du web : Google, Mozilla.org, Wordpress... ‣Communauté très active Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 69. DOCUMENT OBJECT MODELING D. Initiation au framework jQuery Principes Toutes les méthodes de l’objet document : getElement(s)By....( ) sont remplacées par une seule méthode. $( ) Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 70. DOCUMENT OBJECT MODELING D. Initiation au framework jQuery Installation <head> ... <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(document).ready(function(){ $("a").click(function(event){ $("a").click(function(event){ $("a").click(function(event){ //mon action ici ici //mon action action ici //mon event.preventDefault(); event.preventDefault(); event.preventDefault(); }); }); }); }); }); </script> ... </head> Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 71. DOCUMENT OBJECT MODELING D. Initiation au framework jQuery Sélecteurs ‣Identifiant : $(“#id“) ‣Classe : $(“.classe“) ‣Balise : $(“balise“) ‣... Pour accéder à une balise en particulier : $("balise:eq(numero dans la liste)“) Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 72. DOCUMENT OBJECT MODELING D. Initiation au framework jQuery Sélecteurs ‣firstChild d’un noeud : $(“leNoeud:first“) ‣lastChild d’un noeud : $(“leNoeud:last“) Pour créer un enfant, on utilise la méthode $(“leNoeud“).append(“<balise>blabla</balise>...“) Pour retirer un enfant : $(“l’enfant“).remove() Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 73. DOCUMENT OBJECT MODELING D. Initiation au framework jQuery Attributs ‣Setter un attribut : $(sélecteur).attr(“attribut“,“valeur“) $(sélecteur).attr({attribut1:“valeur“, attribut2:“valeur“,...}) Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 74. DOCUMENT OBJECT MODELING D. Initiation au framework jQuery CSS ‣changer un style : $(sélecteur).css(“propriété“,“valeur“) Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 75. DOCUMENT OBJECT MODELING D. Initiation au framework jQuery Effets ‣fadeIn, fadeOut $(sélecteur).fadeIn(vitesse) $(sélecteur).fadeOut(vitesse) ‣show, hide $(sélecteur).show(vitesse) $(sélecteur).hide(vitesse) ... Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 76. DOCUMENT OBJECT MODELING D. Initiation au framework JQuery Vue d’ensemble Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 77. DOCUMENT OBJECT MODELING D. Initiation au framework JQuery Vue d’ensemble Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 78. 6. RÉFÉRENCES Web Design Master 2 MMI Université Panthéon Sorbonne
  • 79. RÉFÉRENCES A. Bibliographie Web Design et design d’interfaces Brown D., Communicating Design, 2007, New Riders Hoekman, Designing the moment : web interface design concept in action, 2008, New Riders Hoekman, Designing the Obvious: A Common Sense Approach to Web Application Design, 2007, New Riders Tidwell, Designing Interfaces, 2005, O’Reilly Elam K., Grid Systems, 2004, Princeton Architectural Press Design d’interaction Cooper, About Face 3 (The Essentials of Interaction Design), 2007, Wiley Sharp, Interaction Design: Beyond Human-Computer Interaction, Wiley Saffer, Designing for interaction, 2007, New Riders Moggridge, Designing Interactions, MIT Press, 2006 Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 80. RÉFÉRENCES A. Bibliographie Utilisabilité et prototypage Krug, Don't Make Me Think: A Common Sense Approach to Web Usability, New Riders Boucher, Ergonomie web : pour des sites web efficaces, 2007, Eyrolles Baccino, Mesure de l'Utilisabilité des Interfaces, 2005, Hermès Snyder, Paper Prototyping, 2003, Morgan Kaufmann Web Authoring Erik T.Ray , Introduction à XML, O’Reilly Chuck Musciano and Bill Kennedy, HTML & XHTML: The Definitive Guide (6th Edition), O’Reilly Christopher Schmitt, CSS Cookbook, O’Reilly Dom Scripting, 2005, Apress Ajax, Tête la premiere, 2006, O’Reilly Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne
  • 81. RÉFÉRENCES B. Webographie Design d’interface, Design d’interaction, UX Ressources et tutoriaux http://wireframes.linowski.ca/ http://www.simplebits.com http://www.uie.com/ http://www.pompage.net http://deeplinking.net/ http://www.thegridsystem.org http://www.interaction-design.org/ http://developer.yahoo.com/ypatterns/ http://www.iconwerk.de/ http://www.iconfinder.net/ http://www.uxmag.com/ http://www.thegridsystem.org/ http://www.archive.org http://fr.selfhtml.org http://www.pixelsumo.com/ http://jquery.com http://www.blueprint.com http://bluecalc.groupion.com/ Web Design Master 2 MMI Université Paris 1 Panthéon Sorbonne