Post on 04-Apr-2015
Création webCréation web Bases & outils de production et de création Bases & outils de production et de création
Année 2010 – 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(r) • 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