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

Christophe Rigal Conseiller Tice du bassin de Nanterre Créer un site web en équipe Collège Pagnol, Rueil Janvier 2009.

Présentations similaires


Présentation au sujet: "Christophe Rigal Conseiller Tice du bassin de Nanterre Créer un site web en équipe Collège Pagnol, Rueil Janvier 2009."— Transcription de la présentation:

1

2 Christophe Rigal Conseiller Tice du bassin de Nanterre Créer un site web en équipe Collège Pagnol, Rueil Janvier 2009

3 Christophe Rigal Conseiller Tice du bassin de Nanterre Sommaire Réseaux (intranet, Internet), serveurs (web, Slis) Droits, chartes dusage de létablissement, charte académique Charte graphique, structure dune page web, aspect éditoriale, fréquence de publication Maquette du site

4 Christophe Rigal Conseiller Tice du bassin de Nanterre Notions de réseau Dun poste, on peut consulter de linformation sur les autres (partage des disques durs), partager des périphériques (imprimantes, scanners, etc…) et partager dune connexion internet. Le réseau local (LAN) : intranet Plusieurs ordinateurs connectés ensembles dans la même pièce ou le même immeuble.

5 Christophe Rigal Conseiller Tice du bassin de Nanterre En étoile : HUB Serveur

6 Christophe Rigal Conseiller Tice du bassin de Nanterre En réseau distant (WAN) : Internet Un ou plusieurs ordinateurs connectés à dautres à longue distance grâce à un modem et une ligne téléphonique. Modem Prise tel FAI : Fournisseur d'accès à Internet FAI

7 Christophe Rigal Conseiller Tice du bassin de Nanterre Notions de client et de serveur Deux parties distinctes Client Serveur Analogie Consommateur Fournisseur

8 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

9 Christophe Rigal Conseiller Tice du bassin de Nanterre Communication client/serveur Client Serveur Dialogue Attend Réalise/ Exécute Demande Envoie Reçoit

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

11 Christophe Rigal Conseiller Tice du bassin de Nanterre

12 Christophe Rigal Conseiller Tice du bassin de Nanterre

13 Christophe Rigal Conseiller Tice du bassin de Nanterre 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 : ladresse ip, un assemblage de 4 nombres de 3 chiffres maximum. Ex :

14 Christophe Rigal Conseiller Tice du bassin de Nanterre Le droit, les aspects juridiques, les chartes Lédition et la publication sur le web (site légamédia deducnet) : juridique/differentes/edition juridique/differentes/edition -Le respect de lhonneur, de la réputation, de la vie privée -Le respect du droit dauteur -Les liens hypertextes -Les mentions légales (http://www.ac- versailles.fr/infos/mention_legale.htm)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 laccord de la personne photographiée ou de son représentant légal sil est mineurhttp://www.ac-rouen.fr/tice/Publier-des-photos- d-eleves-sur-l

15 Christophe Rigal Conseiller Tice du bassin de Nanterre 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 linitiale de leur nom

16 Christophe Rigal Conseiller Tice du bassin de Nanterre Le droit, les aspects juridiques, les chartes La charte académique 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

17 Christophe Rigal Conseiller Tice du bassin de Nanterre Quel site ? Quel projet ? Types et fonctions dun site web site « vitrine » : une présentation de létablissement site dinformation 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

18 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 sadressent les rubriques ? ce quil faut ou ne pas publier : critère de lutilité qui souhaite se charger dune rubrique ? fréquence de mise à jour type(s) de contenus destinés à être publiés dans la rubrique

19 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 ladministration, 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 ?

20 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 sadapter au support

21 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

22 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

23 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 nest pas encore disponible, Construire un organigramme du site.

24 Christophe Rigal Conseiller Tice du bassin de Nanterre Construire le site sur le papier (2) Cas 1

25 Christophe Rigal Conseiller Tice du bassin de Nanterre Construire le site sur le papier (2) Cas 2

26 Christophe Rigal Conseiller Tice du bassin de Nanterre Règles techniques Noms de répertoires, de fichiers, dimages Pas despaces (à remplacer par – ou _) Pas de caractères diacritiques ou spéciaux : ç, &, #, %, !, $, … (donc pas daccents) 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.

27 Christophe Rigal Conseiller Tice du bassin de Nanterre Mise en écran et maquette Les principes simples de mise en écran ne font que reproduire, pour lessentiel, ceux qui prévalent pour la mise en page sur papier : lisibilité, clarté, respiration, … Toutefois il faut prendre en compte la spécificité dune lecture sur écran et non plus sur papier : largeur décran, taille des caractères.

28 Christophe Rigal Conseiller Tice du bassin de Nanterre Règles incontournables 4 « clics » maximum depuis la page daccueil pour arriver à linformation Retour à la page daccueil 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.

29 Christophe Rigal Conseiller Tice du bassin de Nanterre Quelques différences A4 (21 x 29,7 cm) Écran (1024 x 768 pixels)

30 Christophe Rigal Conseiller Tice du bassin de Nanterre Une lecture qui a un sens... Entrée Sortie

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

32 Christophe Rigal Conseiller Tice du bassin de Nanterre 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 quen CAPITALES (voir document) Accentuez les capitales É À Ë Ù Î Ö Ç Certaines polices (Times) sont difficiles à lire en très petites tailles

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

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

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

36 Christophe Rigal Conseiller Tice du bassin de Nanterre Les éléments graphiques (2) Nutilisez les animations que rarement et à bon escient, Évitez les images en fonds de page. Légender les images : commentaire, auteur, droits, etc.

37 Christophe Rigal Conseiller Tice du bassin de Nanterre 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 linverse !) Organisez votre texte de manière graphique et hiérarchique (éléments de titraille, intertitres, légendes, pieds de page)

38 Christophe Rigal Conseiller Tice du bassin de Nanterre Sommaire Pied de page LogoEn-tête Corps La maquette

39 Christophe Rigal Conseiller Tice du bassin de Nanterre 4. La page d accueil : à soigner … tPremière impression tChargement rapide tDonne votre « grammaire » de navigation tFavicon tDes infos indispensables : tNom du service, logo, lien vers le service parent tIdentité du ou des responsables (directeur de publication, secrétaire de rédaction) tCoordonnées tMentions légales

40 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 dun coup dœil. Barre de navigation Agenda Diaporama Vidéo

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

42 Christophe Rigal Conseiller Tice du bassin de Nanterre Réalisation Cest laffaire du webmestre … Plus le cahier des charges est précis, plus vite le site verra le jour et plus il sera conforme au projet

43 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 lensemble à une base de donnée. Il permet ainsi dobtenir des sites dynamiques à gestion de contenu ( content management system en anglais).

44 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 daccueil et autres pages

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


Télécharger ppt "Christophe Rigal Conseiller Tice du bassin de Nanterre Créer un site web en équipe Collège Pagnol, Rueil Janvier 2009."

Présentations similaires


Annonces Google