![Page 1: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/1.jpg)
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
![Page 2: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/2.jpg)
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
![Page 3: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/3.jpg)
1.
Production et
gestion
web
1.1 Principes des CMS1.2 Choix du CMS
![Page 4: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/4.jpg)
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.
![Page 5: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/5.jpg)
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
![Page 6: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/6.jpg)
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
![Page 7: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/7.jpg)
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
![Page 8: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/8.jpg)
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
![Page 9: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/9.jpg)
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.
![Page 10: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/10.jpg)
2.
Webdesign2.1 Charte graphique, design, maquette
2.2 Schéma 2.3 Le template graphique2.4 Principes de webdesign
![Page 11: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/11.jpg)
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
![Page 12: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/12.jpg)
2.1.2 Les fondamentauxSchéma
stockage du Contenu
gestion etstructuration
du contenu
apparence graphique de l’interface web et du contenu
![Page 13: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/13.jpg)
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. »
![Page 14: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/14.jpg)
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%; }
…
![Page 15: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/15.jpg)
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.
![Page 16: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/16.jpg)
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.
![Page 17: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/17.jpg)
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/
![Page 18: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/18.jpg)
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/
![Page 19: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/19.jpg)
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
![Page 20: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/20.jpg)
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
![Page 21: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/21.jpg)
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
![Page 22: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/22.jpg)
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
![Page 23: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/23.jpg)
3. Production du siteExemple : Maquette PSD de design avec repères de découpage
![Page 24: Création web Bases & outils de production et de création Création web Bases & outils de production et de création Année 2010 – Eric Giraudin](https://reader035.vdocuments.pub/reader035/viewer/2022062512/551d9dcd497959293b8e50cd/html5/thumbnails/24.jpg)
3. Production du siteExemple : Fichiers découpés