christophe rigal conseiller tice du bassin de nanterre créer un site web en équipe collège...

Christophe Rigal

Conseiller Tice du bassin de Nanterre

Créer un site web en équipe

Collège Pagnol, RueilJanvier 2009

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre Notions de réseau

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.

Le réseau local (LAN) : intranet

Plusieurs ordinateurs connectés ensembles dans la même pièce ou le même immeuble.

Christophe Rigal


En étoile :

HUB Serveur

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre Notions de client et de serveur

Deux parties distinctes Client Serveur

Analogie Consommateur Fournisseur

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre Communication client/serveur

Client ServeurDialogue

AttendRéalise/ Exécute

Demande

EnvoieReçoit

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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…

Christophe Rigal


Christophe Rigal


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

Christophe Rigal


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

Christophe Rigal



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

Christophe Rigal



La charte académiquehttp://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

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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 ?

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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.

Christophe Rigal

Conseiller Tice du bassin de Nanterre Construire le site sur le papier (2)

Cas 1

Christophe Rigal

Conseiller Tice du bassin de Nanterre Construire le site sur le papier (2)

Cas 2

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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.

Christophe Rigal

Conseiller Tice du bassin de Nanterre Mise en écran et maquette

Les principes simples de mise en écran ne Les principes simples de mise en écran ne font que reproduire, pour l’essentiel, ceux font que reproduire, pour l’essentiel, ceux qui prévalent pour la mise en page sur qui prévalent pour la mise en page sur papier : lisibilité, clarté, respiration, …papier : lisibilité, clarté, respiration, …

Toutefois il faut prendre en compte la Toutefois il faut prendre en compte la spécificité d’une lecture sur écran et non spécificité d’une lecture sur écran et non plus sur papier : largeur d’écran, taille des plus sur papier : largeur d’écran, taille des caractères.caractères.

Christophe Rigal


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.

Christophe Rigal

Conseiller Tice du bassin de Nanterre Quelques différences

A4(21 x 29,7 cm)

Écran(1024 x 768 pixels)

Christophe Rigal

Conseiller Tice du bassin de Nanterre Une lecture qui a un sens...

•Entrée•Entrée

•Sortie

•Sortie

Christophe Rigal

Conseiller Tice du bassin de Nanterre Le texte

Typographie (choix des caractères) Attributs des caractères et des

paragraphes Justification du texte et alignements Colonnage, cadres, etc.

Christophe Rigal

Conseiller Tice du bassin de Nanterre Typographie et attributs

Utilisez Arial (Helvetica), verdana ouTimes 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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.

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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 youdistribute 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 youdistribute 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 youdistribute 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.

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

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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.

Christophe Rigal


N’utilisez les animations que rarementet à bon escient,

Évitez les images en fonds de page.

Légender les images : commentaire, auteur, droits, etc.

Christophe Rigal


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)

Christophe Rigal


•Som

maire

•Pied de page

•Logo •En-tête

•Corps

La maquette

Christophe Rigal


4. La page d ’accueil : à soigner …

Première impressionChargement rapideDonne votre « grammaire » de navigationFaviconDes infos indispensables :

Nom du service, logo, lien vers le service parentIdentité du ou des responsables (directeur de

publication, secrétaire de rédaction)Coordonnées emailMentions légales

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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.

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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).

Christophe Rigal

Conseiller Tice du bassin de Nanterre 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

Christophe Rigal

Conseiller Tice du bassin de Nanterre Sources

Michel GuillouFabrice LemoineMarc FévrierJean Sébastien BarboteuFrançois LermigeauChristophe Rigal(Académie/Crdp de Versailles)

christophe rigal conseiller tice du bassin de nanterre créer un site web en équipe collège...

Documents