Créer un site web en équipe

Présentation au sujet: "Créer un site web en équipe"— Transcription de la présentation:

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

2 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

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

4 En étoile : HUB Serveur

5 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

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

7 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

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

9 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…

10

11

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

13 Le droit, les aspects juridiques, les chartes
L’édition et la publication sur le web (site légamédia d’educnet) : 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 ( Photos délèves (  leur publication nécessite l’accord de la personne photographiée ou de son représentant légal s’il est mineur

14 Le droit, les aspects juridiques, les chartes
Un exemple : le site du collège Jean Macé de Suresnes, 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

15 Le droit, les aspects juridiques, les chartes
La charte académique La charte de l’établissement - Négociée et votée au CA, ajoutée au règlement intérieur

16 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

17 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

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

19 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

20 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

21 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

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

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

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

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

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

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

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

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

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

31 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

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

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

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

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

36 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)

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

38 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 Mentions légales

39 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

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

41 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

42 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).

43 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

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