Outils pour utilisateurs

Outils du site


cours2012:concepts_et_outils_pour_internet:demarche_de_creation_de_site

Démarche de création de sites

Le but est de réaliser le graphisme d'un site par étapes.

L'objectif (cliquez pour agrandir) :

Les fichiers de départ à télécharger !!!

Page de contenu (standard)

Vous allez dans un premier temps suivre les indications pour réaliser la page “Émerveillement”. Les autres (Accueil et Glossaire) seront à réaliser par vos soins plus tard.

Code HTML (sémantique)

Le code HTML de la page “Émerveillement” est fourni.

Des remarques sur sa structure :

  • Dans le HEADER :
    • Le titre est fait d'un HGROUP (titre et sous-titre)
    • Un lien entoure le titre (HGROUP) c'est un lien sur un bloc (“Block-level” links in HTML5)
    • La navigation comporte plus de liens que les captures : un menu en CSS les montera au survol.
    • Les liens mail et Facebook ne sont pas dans NAV (qui ne contient que la navigation principale).
    • NAV à un titre qui sera effacé par les CSS. Il sert à la table des matières HTML5.
  • Le contenu est fait de deux ARTICLE.
    • Les colonnes seront faites en CSS.
  • Dans le FOOTER, une balise ADDRESS marque les informations de contact du document.
  • Les seules images (IMG) du document sont celles qui font partie du contenu. Les autres (graphisme) seront ajoutés par les CSS.
    • Le dossier images-contenu reçoit les images du … contenu ! (qui font partie)
    • Le dossier images-interface reçoit les images d'habillage graphique.
      • Il est dans le dossier CSS car les liens sont relatifs depuis ce dossier (évite de remonter au dossier parent ”..”).
  • Certains textes seront remplacés par des images. Dans le code HTML il faut penser à ce qui doit être “entendu” et non pas à ce qui doit être “vu”.

Code CSS

Le code CSS va être écrit en 3 étapes :

  • La typographie et les couleurs :

  • les styles graphiques (pensé à la page conçue pour un téléphone portable, tout en vertical) :

  • La mise en page (page finie) :

Les fichiers fournis comportent 4 feuilles de styles :

C'est une organisation/démarche que je vous conseille de reprendre pour vos projets.

Typographie

Le code est à placer dans le fichier CSS : styles-typographie-couleurs.css

Ajouter des polices au navigateur

Pour les projets vous avez pour consigne de n'utiliser que des polices issues de Fonts squirrel

La police utilisée pour les titres (notamment) est : Bebas Neue.

Vous pouvez télécharger sur ce site des fichiers de police prête à l'emploi (pour le WEB) : @font-face

Une étape importante est le choix des caractères intégré au fichier :

  • S’ils manquent, l'affichage sera incorrect.
  • Trop, le fichier est volumineux

Font squirrel propose de choir une langue pour n'avoir que les caractères nécessaires.

Vous obtenez une archive avec les fichiers suivants :

bebas-neue-fontfacekit/
	BebasNeue-webfont.eot        /* pour Internet Explorer */
	BebasNeue-webfont.svg        /* pour les portables */
	BebasNeue-webfont.ttf        /* les fichiers TrueType (standard) */
	BebasNeue-webfont.woff       /* une version comprimé des fichiers TrueType (plus rapide à charger) */
	demo.html                    /* un exemple d'usage */
	Dharma Type Font License.txt /* sous quelles conditions on peut l'utiliser */
	stylesheet.css               /* le code CSS pour utiliser les fichiers de police */

Travail :

  • Copiez les fichiers eot, svg, ttf et woff dans le sous-dossier fonts du dossier css (/css/fonts).
  • Copiez le code de stylesheet.css dans votre fichier css/styles-typographie-couleurs.css
    • Il associe le nom BebasNeueRegular aux fichiers de police (pour les différents navigateurs).
  • Corriger les liens vers les fichiers ; ils sont maintenant dans un sous-dossier fonts).
    • Juste ajouter le dossier fonts/ devant :
 'BebasNeue-webfont.eot' -> 'fonts/BebasNeue-webfont.eot'

La raison de mettre les polices dans un sous-dossier est simplement de garder une organisation claire.

Fixer les polices

La police du document

Dans le fichier CSS ajouter :

  • Pour le sélecteur body
  • La propriété font-family ; 3 polices séparées par des virgules : Tahoma, Geneva, sans-serif
    • Détermine la police par défaut du document.
    • On en écrit plusieurs pour tenir compte des polices disponibles sur l'ordinateur de l'utilisateur (par ordre de préférence).
  • La propriété font-size ; la taille de base du texte (ici 12px).
    • Les tailles des autres éléments seront calculées par rapport à cette taille de base.
  • La police pour les titres (H1,H2,H3,…) et autres éléments :
    • BebasNeueRegular avec comme substitut sans-serif (si un problème pour charger les fichiers, l'on utilise une police sans empattement).
    • Deux tailles
      • 2em : pour le H2 et H3, et les liens de la navigation et ceux lire-la-suite
        • Les H2 et H3 seront différenciés par une couleur (et autres habillages graphiques).
      • 4em : pour le H11) )
    • Les titres sont en graisse normale : font-weight:normal;

Écrire des sélecteurs qui appliquent les polices et leurs tailles en les groupant par rendu (exemple: h2,h3, nav a, a.lire-la-suite)

  • Dans un graphisme, il est préférable de limiter le nombre de polices et leurs variantes en tailles/effets.
  • Utiliser les mêmes les propriétés CSS pour plusieurs éléments (sélecteurs séparés par des virgules) permet d'éviter la duplication et facilite les modifications.

Vous pouvez déjà tester les modifications demandées. Le but est d'obtenir un rendu identique à la capture visible plus loin.

Palette de couleurs

Le document n'utilise deux couleurs (en plus du blanc et noir) :

  • #422859
    • Pour les H2, le P dans la partie contact du FOOTER
  • #e65629
    • Pour les H1, H3

Pour les liens, il est préférable de procéder de la façon suivante :

selecteur {
    color: #couleur_normale;
}
selecteur:hover {
    color: #couleur_survole;
}

Avec :

  • pour les lien ordinaire (A) :
    • normale : #e65629
    • survole : #422859
  • les liens de la partie autres-projets :
    • normale : black
    • survole : #e65629

Pour les liens du menu et lire-la-suite (voir exemple plus loin)

  • La couleur ne change pas.
    • white
  • La couleur de fond change (background-color)
    • normale : #e65629
    • survole : #422859

Si possible, toujours spécifiez la couleur du texte et celle du fond ensemble. Cela permet de vérifier que des couleurs contrastées sont affichées (pour éviter blanc sur blanc).

Le but est d'obtenir le résultat suivant (cliquer pour agrandir) :

Pour les liens qui “ressemblent à des boutons” (principalement le menu) :

  • On utilise display: inline-block pour pouvoir ajouter des padding.
    • De toute façon, il faut toujours afficher comme des block les liens qui sont des éléments interactifs.
  • inline-block est utilisé, car contrairement à block l'élément ne fera que la largeur de son contenu (et non celle du parent)
nav a, a.lire-la-suite  {
	color: white;
	background-color: #e65629;
	text-decoration: none;
	display: inline-block;
	padding-top: 0.2em;
	padding-right: 0.3em;
	padding-left: 0.3em;
}

Styles graphiques

On va ajouter différents enrichissements graphiques pour obtenir le résultat suivant :

Le code est à placer dans le fichier CSS : styles-graphiques.css

Le titre (HGROUP)

Il est remplacé par une image (qui se trouve dans le dossier images-interface.

La technique est standard :

sélecteur pour hgroup de header {
	display: block; /* toujours, car on va afficher un 'fond' */
	width: ???px; /* taille de l'image */
	height: ???px;
	background-image: url(chemin/vers/image); /* indiquer l'image */
	                      /* lien relatif à partir du fichier CSS */
	text-indent: -9999px; /* efface le texte */
}
Les UL "purement sémantiques"

On utilise souvent des éléments UL pour leurs sens et non leurs rendus (puce).

Je vous conseille de les retirer dès le début :

body>header>nav ul, ul.contact, et autre {
	list-style-type: none;
	margin: 0;
	padding: 0;
}
Le menu (NAV dans HEADER)

Simple :

  • Une image de fond : images-interface/timessquare-fond.jpg
  • Un bord en bas en pointillé (dashed)
  • Un pudding de 15px tout au tour.
Les liens de contact

Simple substitution du texte par une image. OUI il faut qu'il soit en texte dans vos documents HTML. Vous imaginer tous les documents du monde rempli d'icônes Facebook et Gmail ? Cela n'a aucun sens !

La seule difficulté est d'écrire les sélecteurs. Comme les liens n'ont pas de Classe CSS, on les écrit sur le début de l'URL :

.contact a {
	/* toujours pareil, technique standard */
}
 
.contact a[href^="mailto:"] {
	background-image: url(images-interface/icone-gmail.png);
}
 
.contact a[href^="https://www.facebook.com"] {
	background-image: url(images-interface/icone-facebook.png);
}

Pour les placer sur une même ligne, on ajoute display: inline-block au LI de contact.

L'étoile devant les H2

C'est une technique semblable au remplacement du texte par une image. Sauf que l'on n'efface pas le texte, on le décale juste pour qu'il ne recouvre pas l'image. Pour ce faire on ajoute un padding-left.

h2 {
	background-image: url(images-interface/etoile.png); /* l'étoile en fond */
	background-repeat: no-repeat; /* image de fond une seule fois */
	background-position: left center; /* ou on place l'image */
	/* d'autre, le filet ? */
}

Vous devriez y arriver tout seul ?

Mise en page (grille de composition)

Maintenant reste à traduire le placement des blocs en CSS.

La démarche est de partir de BODY. Puis de descendre élément par élément.

Le résultat à obtenir :

Le code est à placer dans css/styles-mise-en-page.css

Le fond

comme on désire avoir une colonne “blanche” sur un fond rayé :

  • On met l'image de fond sur HTML. (images-interface/rayures.png)
  • La couleur blanche à BODY.

Au passage, on donne une taille minimum à l'espace d'affichage de la page (élément HTML).

html {
       /* image de fond */
	min-width: 980px; /* taille mini de la fenêtre (sinon barre de défilement) */
}
La taille de BODY

Comme on réalise un site centré de largeur fixe :

  • On fixe une largeur de 930px (sera modifié après).
  • Des marges :
    • haut/bas de 15px, pour voir le motif.
    • gauche/droite auto, pour être centrés.
  • Un pudding de 15px pour avoir un bord blanc tout autour.
  • Et une bonne habitude :
    • Ajouter un position: relative pour que les éléments en positions en absolu ne bougent pas quand on redimensionne la fenêtre de navigateur.
Placer le titre du site

On va utiliser la technique qui consiste à placer un élément en absolu sur un espace (padding) prévu à cet effet.

body>header>a>hgroup {
	position: absolute;
	left: 15px;
	top: 15px;
}

Vous constatez que le titre du site passe sur le contenu.

Pas de problème, on ajoute un padding-left à BODY (265px pour 15 au départ plus 250 pour laisser la place au titre).

Le menu en CSS

On l'affiche sur une ligne ace un simple display: inline-block

L'effet de menu déroulant est “classique” :

  • On cache les sous-menus par défaut (display: none)
  • Les sous-menus sont sur le contenu normal (position: absolute), pas besoin de coordonnées (c'est une exception).
  • Au survol (:hover) on les rend visibles (display:block)
body>header>nav>ul>li {
	display: inline-block; /* sur une ligne */
}
 
body>header>nav>ul>li>ul {
	position: absolute;
	/* normal de ne pas mettre de position : effet au survole */
	display: none; /* pas affiché par défaut */
}
 
body>header>nav>ul>li:hover>ul {
	display:block; /* l'affiche au survole */
}
Les liens de contact

Simplement placé en absolu, il y a normalement assez de place.

BODY à un position:relative c'est par rapport à lui que l'on sera placé.

Utiliser top et right, plus simple pour trouver les coordonnées.

Le ''contenu'' et ASIDE

Vous vous souvenez de truc avec table-cell du TP précédent ?

Les colonnes (en CSS)

Cela se fait avec :

body>div.contenu>article {
	column-count: 2;
	column-gap: 15px;
	-webkit-column-count: 2;
	-webkit-column-gap: 15px;
	-moz-column-count: 2;
	-moz-column-gap: 15px;
	margin-bottom: 20px;
}

Les préfixes -webkit- et -moz- servent à ce que cela fonctionne avec Safari/Chrome et Firefox.

On ne veut pas que les H2 soit dans les colonnes : il existe une propriété CSS pour cela (column-span: all) :

body>div.contenu>article>h2 {
  column-span: all;
  -webkit-column-span: all;
  -moz-column-span: all;
}

Mais cela ne fonctionne pas avec Fireox !

On va contourner le problème en éditant le code HTML.

Ajouter une div.contenu-article autour du contenu après le H2 des ARTICLE. C'est seulement elle qui sera en colonne (modifier le sélecteur).

Le reste :

  • Pas de coupure des paragraphes entre deux colonnes : on utilise display: inline-block, car la propriété CSS n'est pas gérée par Firefox.
  • Justifier le texte (et mettre la césure de mots)
body>div.contenu>article p {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
	text-align: justify;
	/*-webkit-column-break-inside: avoid;*/
	display: inline-block;
	margin: 0;
}
Le FOOTER

Du fait du padding-left de BODY, il est décaler de exactement 250px sur la droite.

C'est un cas justifié de marge négative : on sait pourquoi et combien.

body>footer {
	margin-left: -250px; /* annule le padding de body */ 
}

Les autres pages

Faire la page Glossaire puis Accueil (index) à partir de la maquette Axure.

Le texte des pages : index.html :

Times Square est l'un des quartiers de New York, situé dans l'arrondissement de Manhattan. 
C'est un lieu mythique, éblouissant. Il est connu notamment pour ses lumières et ses 
écrans géants. On peut s'y sentir émerveillé, minuscule ou en insécurité.


Carrefour du monde

Times Square, quartier de New York, est l’une des places les plus célèbres et animées au monde.


The place to be

La Saint Sylvestre sur Times Square est un événement émerveillant.


La démesure du lieu

Times Square est tellement immense qu’il y a de quoi se sentir tout petit et intimidé.


Des magasins mythiques

Ce carrefour est l’un des endroits les plus impressionnants au monde. 
Certains de ses magasins sont extravagants.


L'envers du décor

Comme dans le monde entier, la criminalité est présente. 
Voici l’envers du décor du carrefour du monde où tout n’est pas rose.

La face cachée de New York

Entre émerveillement et intimidation, Times Square peut également nous faire ressentir
une émotion de désillusion.

glossaire.html :

Borough
Arrondissement de la ville de New York. Ces arrondissements sont une forme de découpage 
administratif propre à la ville de New York et sont comparables, à bien des niveaux, 
aux arrondissements municipaux qui divisent les trois principales villes françaises.

Boule de temps
Une « boule de temps » symbolise le passage du temps. Cette expression remonte 
bien avant la Saint-Sylvestre de Times Square. La première boule de temps a été 
installée au sommet de l’Observatoire Royal de Greenwich en Angleterre, en 1833. 
Cette boule tombait à une heure précise, chaque après-midi, permettant aux 
capitaines des navires aux alentours de régler leurs chronomètres.

One Times Square
Il s’agit du bâtiment central de Times Square, celui qui rejoint la 42eme rue et 
Broadway. C’est le deuxième bâtiment le plus haut de Manhattan. 
À l’origine, il a été construit pour le journal « The New York Times ».

Empire State Building
Un gratte-ciel très célèbre situé sur l’île de Manhattan, à New York.

Central Park
Un espace vert d'une superficie de 341 hectares (3,41 km², environ 4 km sur 800 mètres),
situé dans le borough de Manhattan à New York.
1) qui sera de toute façon remplacé par une image
cours2012/concepts_et_outils_pour_internet/demarche_de_creation_de_site.txt · Dernière modification: 2012/10/07 22:00 (modification externe)