Création webCréation web Bases & outils de production et de création Bases & outils de production et de création

Année 2012 – Eric Giraudin

Plan

1. Le CMS : outil de gestion de site1.1 Principes du CMS1.2 Choix du CMS

2. Webdesign2.1 Charte graphique, design, maquette2.2 Schéma 2.3 Le template graphique2.4 Principes de webdesign

3. Production du site3.1 Les logiciels et ressources indispensables3.2 Installation du CMS et création des contenus3.3 Production et installation du template

1.

Production et

gestion

web

1.1 Principes des CMS1.2 Choix du CMS

1. 1 Production et gestion de site avec les CMS, principes…

Le CMS

Aujourd’hui la plupart des sites web de taille importante sont développés et gérés par des CMS

Le CMS (ou SGC : Système de Gestion de Contenu)

• Logiciel de conception et de mise à jour dynamique de site Web• Travail de plusieurs individus sur un même document• Chaîne de publication (workflow)• Structuration de contenu• Gestion de versions.• Etc.

1.1 Production et gestion de site avec les CMS, principes…

Différents accès

Partie privée :espace membre,

espace de publication

Front

Partie très privée :

espace d’administration

Back

Espace public :espace de

consultation

Front

1.1 Production et gestion de site avec les CMS, principes…

Principe modulaire

L’application noyau

gestion de contenu, extensions de base,

SEO…

extensionscommunauté

extensionse-formation

extensions e-commerce

extensionsgestion

de fichiers

extensions génériques

extensionsdivertissement

et jeux

extensions de contenu,

CCKEtc.

extensionscommunication

extensionsSEO

CMS ou SGC

1.1 Production et gestion de site avec les CMS, principes…

Principe des sites web dynamiques

Basesde

données

Stockage du Contenugestion et

structuration du contenu

1.2 Production et gestion de site avec les CMS, Choix…

Les principaux CMS

Le principaux CMS

• Joomla , Drupal, Worpress

Le CMS purement orienté utilisateur

• Impress page

Tester les CMS : php.opensourcecms.com

Open source CMS market share report 2009

1.2 Production et gestion de site avec les CMS, choix…

Usage(r)s, coût, communauté

Choisir son CMS :

Usage• Blog CMS : Wordpress, • Polyvalence et facilité d’utilisation : Joomla• Sécurité et polyvalence : Drupal• Le plus simple pour l’utilisateur : ImpresspageImpresspage..

Coût• Licence d’utilisation, mises à jour du logiciel et extensions.

Importance de la communauté• Entraide, réponses aux questions, collaboration, fréquence

de développement d’extensions.

2.

Webdesign2.1 Charte graphique, design, maquette

2.2 Schéma 2.3 Le template graphique2.4 Principes de webdesign

2.1.1 Les fondamentauxCharte graphique, design et template

La charte graphique• Définition : document reprenant l'ensemble des éléments visuels à utiliser afin

d'identifier un organisme • Respecter la charte graphique si elle existe

Le design du site• Définition : choix et arrangement de formes visant à satisfaire des critères esthétiques

et fonctionnels du site • Produire ou faire produire le design du site en respectant la charte graphique.

Le template• Définition : découpage de la maquette visuelle du design du site en fichiers (XHTML,

CSS, XML, images) permettant son intégration de manière cohérente.• Créer le template en respectant les contraintes liées au CMS choisi et en respectant

les directives d’accessibilité web

2.1.2 Les fondamentauxSchéma

stockage du Contenu

gestion etstructuration

du contenu

apparence graphique de l’interface web et du contenu

2.1.3 Les fondamentauxLe rôle du template

Le template graphique d’un portail est un ensemble de fichiers

• qui structure et imbrique les éléments des pages (php, html, …)

• qui décrit la forme graphique de ces éléments (feuille de style css)

• qui enrichie et personnalisent le design (les images)

et qui permet un affichage de l’interface et une cohérence visuelle du site

Séparation forme et contenu

« On peut changer l’apparence d’un portail sans changer le contenu,

en changeant le template. »

2.1.3 Les fondamentauxLe template – imbrication de zones

Structure visuelle de la page et des zones

Extrait du code XHTML de la page web

Extrait de la feuille de style

<div id="Main"><div id="Header"></div><div id="Side 1"><div id="Menu 1"></div><div id="Menu 2"></div></div><div id="Content"></div><div id="Side 2"><div id="Bloc 1"></div><div id="Bloc 2"></div></div><div id="Footer"></div></div>

Main

Header

Footer

ContentMenu1 Bloc 1

Bloc 2Menu2

Side 1 Side 2

#Main{width:970px;text-align:left;margin-left:auto;margin-right:auto;background: transparent url(../images/bg.gif) repeat-y ;margin-bottom: 20px;}

#header {height: 116px; width: 100%; }

…

2.1.3 Les fondamentauxQuelques principes de Webdesign : page d’accueil

Rester cohérent avec la charte graphique

de la marque(ici charte graphique basée sur 2 couleurs principales :

rouge et bleu)

Accrocher avec une page d’accueil assez visuelle

Eléments de reconnaissance de la

marque :logo, nom du site,

visuels

Différents parcours de navigation proposés :navigation classique, navigation par profils,

etc.

2.1.3 Les fondamentauxQuelques principes de Webdesign : repérage et

lisibilité

Eléments de repérage :sélection de la

rubrique en cours du menu,

fil d’Ariane,titre de page.

Conseil :ne pas utiliser

d’image sous un texte

Lisibilité du contenu :titre de page,

sous-titre,titre de paragraphe,termes importants

en gras.

2.1.3 Les fondamentauxQuelques principes de Webdesign : lecture d’écran

Simuler la lecture des visiteurs sur votre site web :http://www.feng-gui.com/

2.1.3 Les fondamentauxQuelques principes de Webdesign : contrastes &

couleurs

L’importance des contrastes:

L’œil du lecteur est attiré par les contrastes les plus forts. Utilisez des images, ou des encadrés à fort contraste pour attirer

l’attention sur les éléments importants de votre site.

Choisir ses couleurs:

Choisir les couleurs de son webdesign en fonction de la charte graphique

Le design peut-être basé sur une couleuret ses nuances, sur des couleurscomplémentaires, etc.

Essayez : http://colorschemedesigner.com/

3 Production du site

3.1 Les logiciels et ressources indispensables

3.2 Installation du CMS et création des contenus

3.3 Production et installation du template

3. Production du siteLogiciels et ressources indispensables

Logiciels graphiquesAdobe Photoshop : création de la maquette, retouche d’imageAdobe Illustrator : dessin vectoriel (création de forme, logo, etc.)

Editeur de page webAdobe Dreamweaver ou un éditeur de page comme phpEdit

Client FTPFilezilla ou autre

Extension firefoxWebdeveloper (repérage rapide

des CSS de chaque élément)

Dans le cas d’un hébergement mutualisé pas

besoin d’autres outils

3. Production du siteInstallation du CMS et création des contenus

Télécharger et installer votre CMSAttention vous devez avoir un hébergement compatible avec votre CMSEx : hébergement mutualisé avec un CMS : hebeh.comhebeh.com, etc.

Créez vos contenusLe contenu étant séparé de la forme vous pouvez déjà créer vos

contenus : sections, catégories et pages dans la base de contenu de votre CMS.

Pensez à optimiser vos contenus pour le référencement :• Titre de page, sous-titre, titre de paragraphe avec balises <hn>• Mots clés dans les titres ou sous-titre• Mots clés insérés dans le contenu et mis en gras• Liens hypertextes explicites avec mot-clés• Champs META

3. Production du siteProduction et installation du template

Création complète du templateCréation complète du template Personnalisation d’un templatePersonnalisation d’un template

Télécharger et installer un template (gratuit ou payant) pour votre CMSTélécharger et installer un template (gratuit ou payant) pour votre CMS

Créer une maquette PSD à partird’une capture d’écran de votre

template installé

Créer une maquette PSD à partird’une capture d’écran de votre

template installé

Créer une maquette de design Photoshop avec repères pour le

découpage des images

Créer une maquette de design Photoshop avec repères pour le

découpage des images

Créez les fichiers selon les contraintes de votre CMS

(fichier XML, php, html, css)

Créez les fichiers selon les contraintes de votre CMS

(fichier XML, php, html, css)

Découpez les images (fonds, puces, logo, flèches, autres images)

Découpez les images (fonds, puces, logo, flèches, autres images)

Découpez vos images et intégrez-le dans le dossier en ligne de votre

template par FTP

Découpez vos images et intégrez-le dans le dossier en ligne de votre

template par FTP

Installer votre template dans votre CMS et activez-le

Installer votre template dans votre CMS et activez-le

Modifiez les feuilles de style CSSModifiez les feuilles de style CSS

3. Production du siteExemple : Maquette PSD de design avec repères de découpage

3. Production du siteExemple : Fichiers découpés