SAPIENS2009 - Module 4B
Upcoming SlideShare
Loading in...5
×
 

SAPIENS2009 - Module 4B

on

  • 1,390 views

 

Statistics

Views

Total Views
1,390
Views on SlideShare
1,387
Embed Views
3

Actions

Likes
0
Downloads
9
Comments
0

3 Embeds 3

http://www.slideshare.net 1
http://spip1.formation-consultic.net 1
http://1299561556.nvmodules.netvibes.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

SAPIENS2009 - Module 4B SAPIENS2009 - Module 4B Presentation Transcript

  • SAPIENS - Programme 2009 de développement de compétences Module 4 – Créer un site web
  • Présentons-nous...
    • Moi,
    • Vous, vos attentes ?
    Christophe RUDELLE Consultant Tel : 05 61 69 06 00 [email_address]
  • Programme de la formation – Jour 1
    • Tour de table (15 mn)
    • Les briques techniques de base de la création d’un site web (1h30)
      • XHTML, CSS, JavaScript, AJAX, PHP, MySQL
      • Les outils de création de site web
      • Nom de domaine et hébergement
      • Pause (15 mn)
    • Un site web, pour quoi faire? (1h00)
      • Les questions à se poser avant de se lancer (30 mn)
      • Déjeuner (1h30)
      • Mon premier outil de conception : une feuille de papier et un crayon (30 mn)
    • Travaux pratiques
      • Choisir un CMS (1h15)
      • Bilan de la journée (15 mn)
  • Les briques techniques de base / 1
    • Qu’est-ce qu’un site web?
      • C’est une succession de pages web!
    • Qu’est-ce qu’une page web?
      • C’est un ensemble de contenus textuels et multimédias ordonnés (mis en page) selon une apparence définie
        • Deux notion fondamentales: contenu et apparence
        • Deux langages informatiques (ou codes) : XHTML et CSS
        • XHTML ?
          • eXtensible HyperText Markup Language : c’est le langage de base du web, héritier du HTML. Il permet de marquer le contenu de la page (on parle de balise), de le qualifier. Par exemple « ceci est un titre » ou encore « ceci est une image »
        • CSS ?
          • Cascading Style Sheets (en français, feuille de style en cascade): c’est un langage qui permet de décrire la mise en page du contenu dans la page (on parle de propriétés). Par exemple « le titre est centré » ou encore « le fond de ma page est bleu »
      • L’ensemble est appelé « code source » de la page web
  • Les briques techniques de base / 2
    • Illustration
      • http://www.csszengarden.com/?cssfile=/188/188.css&page=0
  • Les briques techniques de base / 3
    • Trois autres langages utilisés dans un site web
      • Javascript
        • C’est un langage dit client car il est exécuté par la machine locale au sein du navigateur
        • C’est un langage de programmation
        • Il permet d’exécuter des opérations sur le code XHTML d’une page web sans avoir à recharger cette page
      • AJAX
        • Asynchronous JavaScript and XML
        • C’est également un langage de programmation
        • Il combine XML et JavaScript pour communiquer avec le serveur web et recharger dynamiquement certains éléments d’une page web
      • PHP
        • C’est un langage dit serveur car il est exécuté sur le serveur web.
        • C’est un langage de programmation proche du C++
        • Il va permettre d’automatiser certaines actions de mise à jour des pages web. Il permet de rendre dynamique des pages web statiques lorsqu’elles ne sont écrites qu’en XHTML
  • Les briques techniques de base / 4
    • Les outils pour créer un site web : du plus simple ou plus sophistiqué
      • Un éditeur de texte!
        • Si on souhaite programmer le code source d’un page directement en langage XHTML et CSS, le Bloc Notes de Windows suffit!
        • Quelques outils un tout petit peu plus pratiques
          • Notepad++ sous Windows
          • Smultron ou Coda sous Mac
          • emacs sous Linux
      • Un éditeur de page web ou éditeur WYSIWYG
        • WYSIWYG kezako?
        • « What You See Is What You Get »
        • Logiciel qui permet de rédiger le contenu et de faire de la mise en page pour le web sans avoir à coder
          • Nvu en libre
          • Macromedia Dreamweaver ,FrontPage ou iWeb en propriétaires
      • Un CMS pour Content Management System
  • Les briques techniques de base / 5
    • Le principe du CMS
      • Logiciel de gestion de contenus destiné à la conception et à la mise à jour dynamique de site web
      • Quelques caractéristiques :
        • Utilisation d’une interface web pour l’administration du site et la production du contenu
          • Installation sur le serveur web
          • Accès depuis un navigateur, quelque soit le système d’exploitation
        • Séparation entre contenu et présentation
          • Stockage du contenu en base de données
          • Utilisation de gabarits qui définissent la mise en page (css) et la structuration des données (XML)
        • Edition de page simplifiée
        • Gestion des droits des utilisateurs
        • Gestion du processus de publication (workflow)
        • Ajouts de modules fonctionnels
  • Les briques techniques de base / 6
    • Bref rappel sur l’architecture du web
      • Un site web, c’est à dire un ensemble organisé de pages web, est stocké sur un serveur web
      • Un serveur web est un service logiciel installé sur une machine informatique reliée en permanence au réseau Internet
      • Elle peut-être localisé chez vous, dans une entreprise ou chez une société spécialisée que l’on appelle un hébergeur, et qui opère des datacenters
  • Les briques techniques de base / 7
    • Bref rappel sur l’architecture du web
      • Toute machine connectée à Internet dispose d’une adresse IP
      • La notion de nom de domaine
        • Définition : : Correspondance en langage courant de l’adresse IP d’une machine connectée à Internet. Par exemple, à l’adresse IP xxx.xxx.xxx.xxx correspond le nom de domaine www.nomdedomaine.fr . La correspondance entre adresse IP et nom de domaine est effectuée sur le réseau par des Domain Name Servers (ou serveur de nom de domaine)
        • http://www.afnic.fr/guide/genic
      • Composition du nom de domaine : nom + extension
        • Vous avez le libre choix du nom à condition qu’il n’ait pas été préalablement déposé
          • Le nom peut contenir les caractères suivants : A à Z, 0 à 9 et le tiret (pas de distinction majuscule, minuscule)
        • L’extension :
          • géographique : .fr, .uk, .us ...
          • générique : .com, .net, .org, .biz ...
  • Les briques techniques de base / 8
  • Les briques techniques de base / 9
    • Une alternative temporaire : installer un site web en local
      • Sur Windows avec EasyPhp ou WAMP
        • http://www.wampserver.com/
        • http://www.itanea.com/blog/2008/08/11/tutoriel-bien-configurer-wamp-pour-developper-en-local
        • Voir par exemple : http://www.generationcyb.net/Installer-SPIP-en-local-avec,1566
      • Sous Linux avec LAMP ou Xampp
        • http://www.commentcamarche.net/faq/sujet-7971-installation-rapide-de-lamp-apache-mysql-php-sous-linux
        • http://www.commentcamarche.net/contents/php/phpinst.php3
      • Sur Mac OS avec MAMP
        • http://www.mamp.info/en/index.html
        • Voir par exemple :
          • http://www.spip-contrib.net/Installer-SPIP-sous-Mac-OS-X
  • Un site web pour quoi faire ?
    • Les questions à se poser:
      • Pourquoi avez-vous besoin d’un site web?
      • Quels sont les moyens de communication déjà utilisés?
      • Quelles complémentarités éventuelles?
      • Quels publics souhaitez-vous toucher?
      • Quelles sont les attentes de vos publics?
      • Quels sont vos objectifs de communication vers ces publics?
      • Que viennent chercher vos visiteurs? Que souhaitez vous leur apporter?
      • Quelle est la valeur ajoutée de votre site?
      • Comment allez vous évaluer l’impact de votre site?
      • Quelles perspectives d’évolution?
      •  Définir votre stratégie éditoriale
  • Un site web comment faire ?
    • Moyens et contenus
      • Se poser, dès la phase de conception, la question de la mise à jour des contenus
        • Un projet de site commence et non pas finit à la mise en ligne!
        • Quels ressources pour mettre à jour le contenu?
        • Quelle fréquence?
      • Faire un état des lieux des contenus disponibles
        • Textes
        • Images
        • Audio, vidéos
  • Un site web comment faire ?
    • Définir la charte graphique et la cinématique générale du site
      • Le rubriquage et l’arborescence
      • Le zoning
      • Les menus
      • La navigation dans le site
        • Maximum de 3 clics pour accéder à l’information
        • Pas plus de 7 rubriques d’informations par page
      • Les principaux critères d’ergonomie
        • Sobriété, Lisibilité, Utilisabilité, Rapidité, Interactivité, Adaptabilité, Accessibilité
      • Quelques ressources
        • http://www.rankspirit.com/design-site-web.php
        • http://www.commentcamarche.net/contents/web/navigation.php3
        • http://blog.kinoa.com/2008/12/05/reussir-sa-page-web-les-bons-ingredients/
  • A vous de jouer...
  • Choisir un CMS
    • Les principaux CMS
      • Il y en a des dizaines : http://cmsmatrix.org/ et http://guidecms.com/
      • Mais on peut restreindre le choix à cinq ou six
        • Spip : http://www.spip.net/
        • Joomla : http://www.joomla.fr/
        • Typo3 : http://www.typo3.fr/
        • eZPublish : http://ez.no/fr/
        • Drupal : http://drupalfr.org/
        • Et dans une moindre mesure WordPress : http://fr.wordpress.org/
      • Il existe également des sites de génération et d’administration de sites web en ligne
        • Jimdo, WIX...
  • Programme de la formation – Jour 2
    • Retour sur la séance précédente (15 mn)
    • CMS mode d’emploi
      • Installer et configurer un CMS (1h15)
      • Pause (15 mn)
      • Les fonctionnalités de base d’un CMS (1h15)
      • Déjeuner (1h30)
    • Donner du style à son site (2h00)
      • Et revoilà le CSS
      • Templates et autres gabarits
    • Questions diverses (30mn)
  • Installer un CMS
    • Trois propositions:
      • SPIP
        • http://www.spip.net/rubrique151.html
      • Joomla
        • http://www.joomla.fr/
      • Drupal
        • http://drupalfr.org/node/4678
    • Les principales étapes
      • Télécharger la dernière version du CMS sur le site de référence
      • Créer la base de données sur le serveur d’hébergement
      • Télécharger via ftp les fichiers décompressés dans le dossier www de votre espace d’hébergement
      • Lancer la procédure d’installation à partir de votre navigateur
  • Installer un CMS Etude de cas SPIP
  • Installer un CMS Etude de cas Joomla
  • Installer un CMS Etude de cas Drupal
  • Principales fonctions d’un CMS
    • Configuration générale du site
    • Gestion des utilisateurs
    • Gestion du contenu
    • Gestion des médias
    • Gestion des templates
    • Gestion des modules externes
  • Donner du style à son site
    • Savoir déchiffrer une feuille de style css
      • La composition d’une feuille de style
        • Balise 1 {
        • propriété : valeur;
        • propriété : valeur; }
        • Balise 1 : nom de la balise HTML dont on veux spécifier le style
        • Propriété : effets de style à appliquer à la balise
        • Valeur : valeur de la propriété !
        • # style : style unique appelé par le paramètre id=« style »
        • .style : style global appelé par le paramètre class=« style »
        • Notion d’héritage
  • Donner du style à son site
    • Les principales propriétés
      • http://www.siteduzero.com/tutoriel-3-13639-liste-des-proprietes-css.html
  • Donner du style à son site
    • S’inspirer de templates existants
      • Où trouver des templates?
      • Sous SPIP
        • http://www.spip-contrib.net/Jeu-de-squelettes
      • Sous Joomla
        • http://www.joomlafrance.org/telecharger/select/Templates_et_Graphisme/par_titre/1.html
      • Sous Drupal
        • http://drupal.org/project/Themes
  • Programme de la formation – Jour 3
    • Retour sur la séance précédente (15 mn)
    • Rédiger pour le web (1h00)
      • Définir un projet éditorial collaboratif (30 mn)
      • Les spécificités de l’écriture pour le web (30mn)
    • Des exemples de sites participatifs autour de la lecture et du livre (30 mn)
      • Pause (15 mn)
    • Les questions d’accessibilité (30 mn)
      • Déjeuner (1h30)
    • Enrichir son site avec des contenus et des services externes (1h15)
      • Flux RSS
      • L’ajout de contenus multimédias / Widgets et autres mash-up
      • Pause (15 mn)
    • Référencer son site web (1h00)
      • Bilan de la formation (15 mn)
  • Définir un projet éditorial collaboratif / 1
    • Quels objectifs de communication?
      • Institutionnel versus Informel? Choisir le bon ton
      • Informatif versus Participatif? Susciter l’interactivité
      • Transactionnel?
    • Quels contenus?
      • Auto-produits versus agrégés
      • Textes, photos, audios, vidéos...
    • Quels moyens?
      • Une ou plusieurs mains?
        • La notion de comité éditorial
        • Intégrer des adhérents, des lecteurs, des habitants, des libraires, des élus?
      • Quels rôles pour chaque contributeur?
        • L’importance d’un rédacteur en chef / animateur
    • Quelle fréquence?
      • Se fixer des obligations de mise à jour « raisonnables »
    • Quels liens, quel réseau?
      • S’inscrire dans un réseau de sites sur la même thématique, sur le même territoire
  • Définir un projet éditorial collaboratif / 2
    • Un site de bibliothèque, pour quoi faire?
      • Donner de la visibilité à la bibliothèque
      • Informer sur ses actions
      • Prolonger et enrichir la relation avec l’usager, les partenaires
        • Générer des communautés de lecteurs
        • En faire des contributeurs
        • Générer des visites physiques
      • Partager son expérience, son savoir, ses découvertes, ses coups de cœur
      • S’inscrire dans un réseau
  • Rédiger pour le web / 1
    • Le titre
      • Ajouter une majuscule au titre... Ou ne pas en ajouter mais être cohérent
      • Le titre sera :
        • Court (entre 4 et 10 mots)
        • Visible
        • Explicite
        • Accrocheur
        • Contenant des mots-clés
        • Ayant une signification autonome
        • Dont les premiers mots sont les plus signifiants
        • Si une date est associé au titre, la placer après le titre
    Source : http://www.redaction.be/exemples/44conseils_nov_04.htm
  • Rédiger pour le web / 2
    • L’introduction
      • Limitez l’accroche à un seul paragraphe court
      • Utilisez la mise en gras
      • Résumez l’essentiel de l’information
        • Règle des 5W : Who, what, when, where, why
      • Allez droit au but : principe de la pyramide inversée ou commencez par l’essentiel
  • Rédiger pour le web / 3
    • Le contenu
      • Découpez l’information en plusieurs paragraphes
        • Une seule idée par paragraphe
      • Utilisez des intertitres
        • Surtout dans les textes longs (plus de 2000 signes)
      • Limitez la longueur de la page (entre 500 et 4000 signes)
      • Mettez les mots-clés en gras
      • Utilisez des listes à puces
      • Utilisez des phrases courtes (15-20 mots)
      • Utilisez des dates « absolues »
      • Evitez les repères spatiaux
  • Rédiger pour le web / 4
    • Insérer le contenu d’un document directement dans le corps de l’article plutôt que d’avoir un article vide avec un fichier word attaché
    • Utiliser judicieusement Titre / Chapeau / Texte
      • Pour un référencement optimum, répéter les mots-clés de l’article plusieurs fois dans ces différentes zones (entre 3 et 7% d’occurence pour l’ensemble de l’article)
  • Quelques exemples de sites
    • Un exemple de portail de bibliothèques en réseau
      • http://www.risom.fr/
    • Deux exemples de sites de médiathèque
      • Toulouse : http://www.bibliotheque.toulouse.fr/
      • Mérignac : http://www.mediatheque.merignac.com
    • Un portail Netvibes sur la bibliosphère
      • http://www.netvibes.com/bibliobsession
    • Une librairie sur Internet
      • http://www.bibliosurf.com/
    • La plus grande librairie web 2.0
      • http://www.librarything.fr/
  • Qu’est-ce que l’accessibilité?
    • Accessibilité humaine et accessibilité logicielle
      • Prendre en compte les handicaps
        • Visuel, auditif, moteur
      • Prendre en compte les multiples configurations matérielles et logicielles
        • Terminaux et navigateurs
      • Afin de d’assurer un accès optimal à tout internaute
    • L’accessibilité des sites web s’appuient sur des standards
      • Le rôle du W3C au travers du projet WAI (Web Accessibility Initiative)
        • HTML, CSS, XML, SVG...
      • 3 axes de travail
        • Outils de production de contenus : ATAG (Authoring Tools Accessibility Guidelines)
        • Contenus : WCAG (Web Content Accessibility Guidelines)
        • Outils de consultation : UAAG (User Agent Accessibility Guidelines
  • Qu’est-ce que l’accessibilité?
    • Les Guidelines définissent des niveaux d’accessibilité
      • WCAG 1.0 niveaux 1, 2, 3 : http://www.w3.org/TR/WCAG10/
      • WCAG 2.0 niveaux A, AA, AAA : http://www.w3.org/TR/WCAG20/
    • En France
      • Labellisation Accessiweb
        • Trois niveaux : Bronze, Argent et Or
      • DGME : Le référentiel général d’accessibilité des sites publics (RGAA) : http://www.references.modernisation.gouv.fr/rgaa-accessibilite
        • La loi n°2005-102 sur l’égalité des chances promulguée le 11 février 2005 stipule que les informations diffusées sur les services de communication publique en ligne doivent être accessibles aux personnes handicapées.
  • Mon site est-il accessible?
    • Utiliser les standards du web permet déjà, dans une utilisation « normale », de s’assurer d’un niveau minimal d’accessibilité
    • Comment vérifier l’accessibilité d’un site
      • Le visiter avec plusieurs navigateurs
      • Le visiter en retirant l’ensemble des images
      • Le visiter en désactivant les feuilles de style
    • Des outils permettent de tester l’accessibilité d’un site
      • Markup Validation Service du W3C : http://validator.w3.org/
      • OCAWA : http://www.ocawa.com/fr/Accueil.htm
      • Le site d’accessiweb : http://www.accessiweb.org/fr/portail_accessibilite_du_web/outils_et_technologies/default.asp?sub_id=33
      • 10 outils pour tester l’accessibilité de votre site web : http://leblog.vendeesign.com/web20/10-services-web-pour-tester-laccessibilite-de-votre-site/
  • Enrichir son site avec des contenus et des services externes
    • Les flux RSS
    • Les images
      • Flickr
    • Les vidéos
      • YouTube
      • Dailymotion
    • Les fichiers audios
      • Deezer
      • Podemus, Dewplayer
    • Les documents externes
      • Slideshare, docstoc ,issuu...
    • Des widgets applicatifs
      • Cartographie avec googlemaps
      • Autres
  • La notion de widget
    • « Widgets » ?
    • Une définition : «  Un « widget », contraction anglaise de window et gadget, est une mini-application qui peut être intégrée sur une page web (un site Internet, un blog...) ou directement sur le bureau d’un ordinateur selon le système d’exploitation utilisé. Certains services web sont en fait des moteurs d’affichage de widgets, tels netvibes, iGoogle ou encore MyYahoo !, c’est à dire qu’ils assemblent en un même lieu, une page web personnelle, de multiples widgets issus de sources très variées.   »
    • Quelques exemples :
      • www.netvibes.com
      • http://eco.netvibes.com/widgets
      • http://www.netvibes.com/grandgrenoble#Service
      • http://www.google.fr/ig/directory?hl=fr&root=/ig&dpos=top
      • http://www.widgetbox.com/
  • Les flux RSS
    • « RSS » ?
    • Une définition : «  RSS signifie Really Simple Syndication ou également Rich Site Summary. C’est un format de syndication de contenus web, c’ est à dire qu’il permet de « récupérer » de manière automatique, par un protocole dont l’acronyme est RSS (on parle ainsi de flux RSS), des flux d’informations produits par d’autres sites web.  »
    • Sur un site web, on repère la disponibilité d’un flux RSS par l’icône suivante :
    • Il existe des lecteurs de flux RSS, en ligne, sous forme de logiciel ou intégré à des navigateurs ou des logiciels de courrier électronique
    • Quelques exemples :
  • Les images
    • L’exemple de Flickr
      • Rapide découverte de Flickr
      • Intégration de photos Flickr dans un site web : l’exemple de SPIP
  • Les vidéos
    • Youtube et Dailymotion
      • Rapide découverte de Youtube
      • Intégration d’une vidéo dans un article d’un site web en utilisant le lecteur embarqué
  • L’audio
    • Podcast et webradios
      • Deezer
      • Podemus
      • DewPlayer
        • http://www.alsacreations.fr/dewplayer
  • Les documents externes
    • Insérer des fichiers pdf, des présentations ppt et d’autres types de documents en utilisant:
      • Slideshare
      • Docstoc
      • Scribd
      • Issuu
  • Les widgets applicatifs
    • La cartographie avec googlemaps
    • Une infinité de widgets applicatifs
      • http://www.widgetbox.com/
  • Référencer son site / 1 15.000.000.000 Nombre approximatif de pages web indexées Comment trouver une aiguille dans une botte de foin, ou une planète avec de la vie dans l’univers?
  • Référencer son site / 2
    • Première étape : Au commencement était l’indexation :
      • Dans les annuaires
      • Dans les moteurs de recherche
      • L’exemple de Yahoo , DMOZ et de Google
        • http://siteexplorer.search.yahoo.com/fr/free/submit
        • http://www.dmoz.org/add.html
        • http://www.google.fr/intl/fr/submityourcontent/tools.html#web
  • Référencer son site / 3
    • Pour info, part de marché des principaux moteurs de recherche au niveau mondial
    Source : Market Share – Décembre 2008
  • Référencer votre site / 4
    • Seconde étape : travailler son positionnement sur le long terme
      • Quelques astuces
        • Une URL de site signifiante
        • Un format d’adressage des pages signifiant
        • Soignez le contenu
        • Rédigez vos articles en intégrant les mots clés par lesquels vous souhaitez être accessible
        • Mettez à jour régulièrement le contenu du site
        • Soignez votre PageRank en tissant des liens
          • Insérer des liens dans vos articles
          • Ajouter une page Plan du site
          • Echanger des liens avec d’autres sites connexes
            • Pour vérifier les liens pointant vers votre site, dans le requêteur google, entrez link:www.monsite.fr
  • Retrouvez toutes les ressources de cette formation sur :
      • www.netvibes.com/sapiens2009
    Merci !
  • MERCI !