La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

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.

Présentations similaires


Présentation au sujet: "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."— Transcription de la présentation:

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

2 Plan 1.Le CMS : outil de gestion de site 1.1 Principes du CMS 1.2 Choix du CMS 2.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

3 1. Production et gestion web 1.1 Principes des CMS 1.2 Choix du CMS

4 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.

5 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

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

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

8 1.2 Production et gestion de site avec les CMS, Choix… Les principaux CMS Le principaux CMS Joomla, Drupal, WorpressJoomlaDrupalWorpress Le CMS purement orienté utilisateur Impress page Tester les CMS : php.opensourcecms.com php.opensourcecms.com Open source CMS market share report 2009

9 1.2 Production et gestion de site avec les CMS, choix… Usage(r)s, coût, communauté Choisir son CMS : Usage(r) Impresspage.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.

10 2. Webdesign 2.1 Charte graphique, design, maquette 2.2 Schéma 2.3 Le template graphique 2.4 Principes de webdesign

11 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

12 2.1.2 Les fondamentaux Schéma stockage du Contenu gestion et structuration du contenu apparence graphique de l’interface web et du contenu

13 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. » Séparation forme et contenu « On peut changer l’apparence d’un portail sans changer le contenu, en changeant le template. »

14 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 #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%; } …

15 2.1.3 Les fondamentaux Quelques 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 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 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. Différents parcours de navigation proposés : navigation classique, navigation par profils, etc.

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

17 2.1.3 Les fondamentaux Quelques principes de Webdesign : lecture d’écran Simuler la lecture des visiteurs sur votre site web :

18 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 :

19 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

20 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 WebdeveloperWebdeveloper (repérage rapide des CSS de chaque élément) Dans le cas d’un hébergement mutualisé pas besoin d’autres outils

21 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 hebeh.com hebeh.com Ex : hébergement mutualisé avec un CMS : hebeh.com, etc.hebeh.com 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 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

22 3. Production du site Production et installation du template Création complète du template Personnalisation d’un template 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é Créer une maquette PSD à partir d’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é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 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 Modifiez les feuilles de style CSS

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

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


Télécharger ppt "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."

Présentations similaires


Annonces Google