Création web Bases & outils de production et de création Année 2010 – Eric Giraudin

Plan Le CMS : outil de gestion de site Webdesign 3. Production du site 1.1 Principes du CMS 1.2 Choix du CMS Webdesign 2.1 Charte graphique, design, maquette 2.2 Schéma 2.3 Le template graphique 2.4 Principes de webdesign 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

1. Production et gestion web 1.1 Principes des CMS 1.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.

Espace public : espace de consultation 1.1 Production et gestion de site avec les CMS, principes… Différents accès Espace public : espace de consultation Front Partie privée : espace membre, espace de publication Front Partie très privée : espace d’administration Back

1.1 Production et gestion de site avec les CMS, principes… Principe modulaire extensions communauté extensions communication extensions e-formation extensions e-commerce L’application noyau gestion de contenu, extensions de base, SEO … extensions génériques extensions divertissement et jeux extensions gestion de fichiers extensions de contenu, CCK extensions SEO Etc.

gestion et structuration du contenu 1.1 Production et gestion de site avec les CMS, principes… Principe des sites web dynamiques Stockage du Contenu gestion et structuration du contenu Bases de données CMS ou SGC

Le CMS purement orienté utilisateur 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

Choisir son CMS : Usage(r) 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 : Impresspage. 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. Webdesign 2.1 Charte graphique, design, maquette 2.2 Schéma 2.3 Le template graphique 2.4 Principes de webdesign

2.1.1 Les fondamentaux Charte 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 fondamentaux Schéma gestion et structuration du contenu CMS ou SGC Bases de données stockage du Contenu Template graphique (XHTML / CSS, ..) apparence graphique de l’interface web et du contenu

2.1.3 Les fondamentaux Le 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 fondamentaux Le 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 Main Header Footer Content Menu1 Bloc 1 Bloc 2 Menu2 Side 1 Side 2 <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{ 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 fondamentaux Quelques principes de Webdesign : page d’accueil 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. 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

2.1.3 Les fondamentaux Quelques 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. Lisibilité du contenu : titre de page, sous-titre, titre de paragraphe, termes importants en gras. Conseil : ne pas utiliser d’image sous un texte

Simuler la lecture des visiteurs sur votre site web : 2.1.3 Les fondamentaux Quelques principes de Webdesign : lecture d’écran Simuler la lecture des visiteurs sur votre site web : http://www.feng-gui.com/

2.1.3 Les fondamentaux Quelques 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 couleur et ses nuances, sur des couleurs complé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 site Logiciels et ressources indispensables Logiciels graphiques Adobe Photoshop : création de la maquette, retouche d’image Adobe Illustrator : dessin vectoriel (création de forme, logo, etc.) Editeur de page web Adobe Dreamweaver ou un éditeur de page comme phpEdit Client FTP Filezilla ou autre Extension firefox Webdeveloper (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 site Installation du CMS et création des contenus Télécharger et installer votre CMS Attention vous devez avoir un hébergement compatible avec votre CMS Ex : hébergement mutualisé avec un CMS : hebeh.com, etc. Créez vos contenus Le 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 site Production et installation du template 2 méthodes Création complète du template Personnalisation d’un template Créer une maquette de design Photoshop avec repères pour le découpage des images Télécharger et installer un template (gratuit ou payant) pour votre CMS Créer une maquette PSD à partir d’une capture d’écran de votre template installé 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 Créez les fichiers selon les contraintes de votre CMS (fichier XML, php, html, css) Modifiez les feuilles de style CSS Installer votre template dans votre CMS et activez-le

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

3. Production du site Exemple : Fichiers découpés