Créer un site web en équipe Collège Pagnol, Rueil Janvier 2009

Sommaire Réseaux (intranet, Internet), serveurs (web, Slis) Droits, chartes d’usage de l’établissement, charte académique Charte graphique, structure d’une page web, aspect éditoriale, fréquence de publication Maquette du site

Notions de réseau Le réseau local (LAN) : intranet Plusieurs ordinateurs connectés ensembles dans la même pièce ou le même immeuble. D’un poste, on peut consulter de l’information sur les autres (partage des disques durs), partager des périphériques (imprimantes, scanners, etc…) et partager d’une connexion internet.

En étoile : HUB Serveur

En réseau distant (WAN) : Internet Un ou plusieurs ordinateurs connectés à d’autres à longue distance grâce à un modem et une ligne téléphonique. Modem Prise tel FAI : Fournisseur d'accès à Internet FAI

Notions de client et de serveur Deux parties distinctes Client Serveur Analogie Consommateur Fournisseur

Communication client/serveur Dialogue entre processus 2 à 2 Résultat : échange de données Client initie l’échange Serveur écoute en permanence une requête éventuelle

Communication client/serveur Dialogue Serveur Demande Attend Réalise/ Exécute Reçoit Envoie

Quelques modèles client/serveur Authentifier les utilisateurs (SE3 / Win Serv) Partager des fichiers (SE3 / Win Serv) Serveur Web (SLIS / Win Serv + IIS / Easyphp) Etc…

Communication entre les machines La communication sur le réseau entre les machines est possible grâce : Au langage commun : tcp/ip Aux adresses uniques de chaque machine : l’adresse ip, un assemblage de 4 nombres de 3 chiffres maximum. Ex : 192.168.1.1

Le droit, les aspects juridiques, les chartes L’édition et la publication sur le web (site légamédia d’educnet) : http://www2.educnet.education.fr/sections/legamedia/guide-juridique/differentes/edition Le respect de l’honneur, de la réputation, de la vie privée Le respect du droit d’auteur Les liens hypertextes Les mentions légales (http://www.ac-versailles.fr/infos/mention_legale.htm) Photos délèves (http://www.ac-rouen.fr/tice/Publier-des-photos-d-eleves-sur-l)  leur publication nécessite l’accord de la personne photographiée ou de son représentant légal s’il est mineur

Le droit, les aspects juridiques, les chartes Un exemple : le site du collège Jean Macé de Suresnes, www.clg-mace-suresnes.ac-versailles.fr Le fait de rédiger un article sur un site, est pour son auteur une acceptation implicite de la publication de son article sur le Web. Modération à priori par les administrateurs Signature des mineurs avec leur prénom et l’initiale de leur nom

Le droit, les aspects juridiques, les chartes La charte académique http://www.tice.ac-versailles.fr/article.php3?id_article=9 La charte de l’établissement - Négociée et votée au CA, ajoutée au règlement intérieur

Quel site ? Quel projet ? Types et fonctions d’un site web site « vitrine » : une présentation de l’établissement site d’information site de travail collaboratif et de publication Quels sont les mots-clés du projet ? Chacun peut lister sa vision du site Synthèse ensuite à faire

Quelles rubriques ? Choisir un rubriquage qui corresponde aux fonctions du site (contenus, services) Préciser les contenus : à qui s’adressent les rubriques ? ce qu’il faut ou ne pas publier : critère de l’utilité qui souhaite se charger d’une rubrique ? fréquence de mise à jour type(s) de contenus destinés à être publiés dans la rubrique

Quelle équipe ? Un responsable côté édition Une équipe de rédacteurs Un responsable pour chaque rubrique Des interlocuteurs précis : avec l’administration, avec les collègues, les élèves, les parents Un responsable côté code (personne ressource ?) pour faire évoluer le projet (graphiquement, sécurité, …), le webmestre ?

Quels formats de publication ? Il existe des contraintes techniques en fonction des documents. Les textes : Lecture à l’écran : html Impression (textes longs, formulaires) : pdf On ne peut pas conserver toutes les informations de mises en page Il faudra s’adapter au support

Les images, les fichiers Les images sont publiées avec des formats classiques : jpg png et gif Les fichiers trop lourds Zip, compresser pour télécharger

Des documents accessibles Pourquoi faut-il respecter certains formats ? Tout le monde doit pouvoir consulter les documents : Ordinateurs différents Logiciels différents Conditions de consultation Des formats ouverts et universels : html, pdf jpeg, png zip A proscrire : doc, xls, ppt, etc. psd

Construire le site sur le papier Simuler le site sur papier Organiser les rubriques en fonction des contenus, Prévoir les rubriques à venir, même si le contenu n’est pas encore disponible, Construire un organigramme du site.

Construire le site sur le papier (2) Cas 1 

Construire le site sur le papier (2) Cas 2 

Règles techniques Noms de répertoires, de fichiers, d’images Pas d’espaces (à remplacer par – ou _) Pas de caractères diacritiques ou spéciaux : ç, &, #, %, !, $, … (donc pas d’accents) Noms courts et explicites Toujours se soucier du « poids » des pages : les images devront être réduites ou proposées en miniatures et en haute résolution.

Mise en écran et maquette Les principes simples de mise en écran ne font que reproduire, pour l’essentiel, ceux qui prévalent pour la mise en page sur papier : lisibilité, clarté, respiration, … Toutefois il faut prendre en compte la spécificité d’une lecture sur écran et non plus sur papier : largeur d’écran, taille des caractères.

Règles incontournables 4 « clics » maximum depuis la page d’accueil pour arriver à l’information Retour à la page d’accueil depuis toute page du site Pas de « page en construction » Une « grammaire » de navigation identique pour toutes les pages (aspect des liens, items de menu…) Informations répétées : titraille, date de publication des documents, auteurs, responsables, sources, etc.

Quelques différences A4 (21 x 29,7 cm) Écran (1024 x 768 pixels)

Une lecture qui a un sens... Entrée Entrée Sortie Sortie

Le texte Typographie (choix des caractères) Attributs des caractères et des paragraphes Justification du texte et alignements Colonnage, cadres, etc.

Typographie et attributs Utilisez Arial (Helvetica), verdana ou Times New Roman (Times) En roman, en gras ou en italique, mais jamais en souligné En minuscules plutôt qu’en CAPITALES (voir document) Accentuez les capitales É À Ë Ù Î Ö Ç Certaines polices (Times) sont difficiles à lire en très petites tailles

Justification et colonage Évitez une trop grande disproportion entre le corps de texte et la justification Préférez les alignements à gauche, Évitez les titres centrés, conventionnels, Pour les titres « enrichis », passez par des images (logos), Utilisez les puces ou lettrines avec parcimonie.

Justification et colonnage TMES 8 pts CeciThese requirements apply to the modified work as a whole. If identifiable sections of that work are not derived from the Program, and can be reasonably considered independent and separate works in themselves, then this License, and its terms, do not apply to those sections when you distribute them as separate works. But when you distribute the same sections as part of a whole which is a work based on the Program, the distribution of the whole must be on the terms of this License, whose permissions for other licensees extend to the entire whole, and thus to each and every part regardless of who wrote it. Thus, it is not the intent of this section to claim rights or contest your rights to work written entirely by you; rather, the intent is to exercise the right to control the distribution of derivative or collective works based on the Program. VERDANA 8 pts CeciThese requirements apply to the modified work as a whole. If identifiable sections of that work are not derived from the Program, and can be reasonably considered independent and separate works in themselves, then this License, and its terms, do not apply to those sections when you distribute them as separate works. But when you distribute the same sections as part of a whole which is a work based on the Program, the distribution of the whole must be on the terms of this License, whose permissions for other licensees extend to the entire whole, and thus to each and every part regardless of who wrote it. ARIAL 8 pts Thus, it is not the intent of this section to claim rights or contest your rights to work written entirely by you; rather, the intent is to exercise the right to control the distribution of derivative or collective works based on the Program. CeciThese requirements apply to the modified work as a whole. If identifiable sections of that work are not derived from the Program, and can be reasonably considered independent and separate works in themselves, then this License, and its terms, do not apply to those sections when you distribute them as separate works. But when you CeciThese requirements apply to the modified work as a whole. If identifiable sections of that work are not derived from the Program, and can be reasonably considered independent and separate works in themselves, then this License, and its terms, do not apply to those sections when you distribute them as separate works. But when you distribute the same sections as part of a whole which is a work based on the Program, the distribution of the whole must be on the terms of this License, whose permissions for other licensees extend to the entire whole, and thus to each and every part regardless of who wrote it. Thus, it is not the intent of this section to claim rights or contest your rights to work written entirely by you; rather, the intent is to exercise the right to control the distribution of derivative or collective works based on the Program. CeciThese requirements apply to the modified work as a whole. If identifiable sections of that work are not derived from the Program, and can be reasonably considered independent and separate works in themselves, then this License, and its terms, do not apply to those sections when you distribute them as separate works. But when you distribute the same sections as part of a whole which is a work based on the Program, the distribution of the whole must be on the terms of this License, whose permissions for other licensees extend to the entire whole, and thus to each and every part regardless of who wrote it.

Les éléments graphiques (1) Utilisez des images de petit poids, en faible nombre, aux formats GIF, JPEG ou PNG Utilisez des éléments graphiques pour favoriser le rubriquage, des accroches, permettre au lecteur de se situer dans le site.

Les éléments graphiques (2) N’utilisez les animations que rarement et à bon escient, Évitez les images en fonds de page. Légender les images : commentaire, auteur, droits, etc.

Les éléments graphiques (3) Prévoyez des espaces pour le repos de l’œil du lecteur (le blanc typo) Ne privilégiez jamais la forme au détriment du contenu (ni l’inverse !) Organisez votre texte de manière graphique et hiérarchique (éléments de titraille, intertitres, légendes, pieds de page)

La maquette Logo En-tête Sommaire Corps Pied de page

4. La page d ’accueil : à soigner … Première impression Chargement rapide Donne votre « grammaire » de navigation Favicon Des infos indispensables : Nom du service, logo, lien vers le service parent Identité du ou des responsables (directeur de publication, secrétaire de rédaction) Coordonnées email Mentions légales

La page d ’accueil : à soigner … Des infos recherchées : Nouveautés du site (derniers articles, dernières brèves) et dates de mise à jour, Tout le contenu du site d’un coup d’œil. Barre de navigation Agenda Diaporama Vidéo

La navigation Pas de pages cul-de-sac. Pas de « pages en construction ». Navigation difficile (où suis-je ?) Barre de navigation identique pour toutes les pages.

Réalisation C’est l’affaire du webmestre … Plus le cahier des charges est précis, plus vite le site verra le jour et plus il sera conforme au projet

Le langage de programmation Les techniques modernes de publication Web reposent désormais sur la séparation du fond de la forme. Le fond est pris en charge par le langage HTML , et la forme par le langage CSS. Le langage php permet de générer les pages web lisibles par le navigateur (Internet explorer, Firefox) en couplant l’ensemble à une base de donnée. Il permet ainsi d’obtenir des sites dynamiques à gestion de contenu (content management system en anglais).

Travail à réaliser Au tableau et sur papier avec tout le groupe : Organigramme du site : arborescence et rubriques Maquette page d’accueil et autres pages

Sources Michel Guillou Fabrice Lemoine Marc Février Jean Sébastien Barboteu François Lermigeau Christophe Rigal (Académie/Crdp de Versailles)