Conception de Site Web - Retour au Menu
Transcription
Conception de Site Web - Retour au Menu
Conception de Site Web MEDIAFORM 11 Rue du Quai 59700 Marcq en Baroeul Plan et contenu Présentation des stagiaires et de l’intervenant Organisation de l’Internet et du Web Les étapes de la création du site Les aspects juridiques Etude des cas Synthèse Quelques chiffres 1. Navigateurs, système d’exploitation, écran 2. Les statistiques du gouvernement Tour de table Présentation Intervenant Monsieur Dominique REVERTEGAT Gérant Société MEDIAFORM Plus de 12000 stagiaires formés depuis 1984 – 79 Logiciels crées 2 Formateurs permanents – 6 Formateurs vacataires Professeur à l’université de lille3 (IUTGEII – DEUSTIG – etc.) Présentation des stagiaires Qui Fonction Connaissances en info Connaissances en Site Web Objectifs et attentes 1) Organisation de l’Internet et du Web L’historique d’Internet Arpanet – IGN – NFSNET – Les liens hypertexte – Internet de 91 à 98 A qui appartient internet Les services proposés par Internet www – Email – Ftp – Telnet – liste de diffusion – Le chat – les news – la téléphonie - wap Les protocoles utilisés sur Internet http – Ftp – Smtp – pop3 – Imap – NNTP La recherche sur Internet Annuaires – moteurs de recherche – portails – communauté – méga moteur – page jaune Les logiciels de recherche – les méthodes de recherche Le matériel utilisé pour une connection A) L’historique ARPAnet ING (International Networking Group) NFSNET (National Science Fondation) Les liens hypertexte A qui appartient Internet Principaux organismes régissant Internet Plus d’informations (historique d’internet de 1945 jusqu’en 1998) ARPANET 1 Dans les années 60, le gouvernement américain a lancé le projet de créer un réseau informatique décentralisé, désirant se doter d’un moyen de communication capable de résister à une attaque nucléaire russe. Un projet qui a abouti en 1969 avec la création d’ARPAnet : il consiste à relier entre eux les ordinateurs par un réseau de lignes téléphoniques, dont les intersections forment des nœuds. Les informations émises sur ce réseau sont divisées en petits paquets appelés Datagrammes, qui peuvent utiliser de nombreuses routes différentes pour transiter entre deux ordinateurs. Ce réseau est donc toujours capable de continuer à faire transiter des informations, malgré la destruction d’un ou de plusieurs centres nerveux (les nœuds). ARPANET 2 A sa création ARPAnet (Advanced Research Projets Agency) est constitué de 4 nœuds, correspondant à des centres de recherches et des universités financés par l’armée américaine. IGN En 1972, afin de coordonner le développement de ce type de réseau, l’International Networking Group (ING) est créé. Ce groupe de travail a pour mission de créer un protocole permettant d’interconnecter tous types d’ordinateurs et de réseaux. En 1974, mise au point du protocole TCP (Transmission Control Protocol) et l’ancêtre du protocole IP (Internet Protocol). Ces deux protocoles deviendront les fondations d’Internet (TCP / IP). NFSNET Au début des années 80 la majorité des universités expriment leur volonté d’être connectés à ARPAnet. Mais ARPAnet n’a pas les capacités de supporter un tel nombre de connections. En 1986, ARPANet étant surchargé, la National Science Fondation (NSF) décide alors de créer NSFNet, qui utilisera TCP/IP comme protocole de communication. Les liens hypertexte 1987 Hypercard logiciel d'Apple utilisant les Hypertextes est lancé. 1988 Naissance d'Internet en Europe, le centre de mathématique d'Amsterdam fait un pont entre le trafic Américain et la partie Européenne USENET. La croissance va devenir exponentielle avec 28 000 ordinateurs en 1987 130 000 ordinateurs en 1991 2 000 500 ordinateurs en 1994 1989 Naissance du Web. Tim Berners-Lee du CERN publie l'article « Hypertexte et le CERN » Internet de 1991 à 1998 1995 4 millions d'utilisateurs de Netscape. 75% des browsers sont des Netscape. Microsoft lance sa version Internet Explorer 2.0 1996 Microsoft annonce que la version d'Internet Explorer 3.0 supportera Java, JavaScript, les liens OLE2, les Frames. La guerre Microsoft-Netscape est déclarée. 1997 Le Web est stabilisé dans sa technologie du moins provisoirement. La loi antitrust américaine demande à Microsoft de retirer son navigateur des versions Windows 98. 1998 Netscape annonce que les versions de son Navigateur sont toutes libres d'utilisation À qui appartient Internet? Internet n'appartient pas à Netscape et Microsoft ne pourra jamais acheter Internet! Corporation... Internet est le fruit d'une coopération entre institutions publiques, parapubliques et privées Les fournisseurs d'accès, des grandes compagnies de télécommunication aux fournisseurs d'accès locaux, se financent par les profits sur la revente de la bande passante du gros au détail Les organismes internationaux qui pourvoient au bon fonctionnement du réseau sont financés par subventions publiques ou privées B) Les services World Wide Web (www) Pour surfer à l’aide d’un navigateur Le courrier électronique (E-mail) Courier électronique avec un gestionnaire de messagerie Le Transfert des fichiers (FTP) Pour télécharger ou mettre à jour son site LE CHAT (Internet Relay Chat –IRC-) Le dialogue en direct Les groupes de discussion (NEWS) Les forums de discussions La téléphonie sur Internet Comment utiliser Internet pour téléphoner Le Wap Utiliser son téléphone portable pour faire de l’Internet World Wide Web (www) Est un service Internet qui repose sur le téléchargement des documents multimédia à l’aide dun Browser (navigateur, butineur) et la navigation se fait grâce à des liens Hypertextes. Adresse (URL) sous forme : www.tf1.fr tf1 = nom de domaine fr = pays Principaux navigateurs (les résultats d’affichage est différents pour un même site, il faudra en tenir compte lors du développement du site) Les liens hypertexte Un lien hypertexte est un mot bleu souligné qui permet de surfer de page en page De plus en plus on utilise les images ou des boutons comme lien hypertexte Le courrier électronique (E-mail) – La messagerie électronique est la forme la plus populaire et la plus usitée de l'Internet. Extrêmement bon marché, elle permet d'envoyer des courriers, des fichiers composés de textes, de photos voire de sons à n'importe quel internaute – Adresse sous la forme : [email protected] – On peut mettre dans une URL : mailto:[email protected] – ON peut ajouter également un sujet, un cc,bcc, sujet, et corps – mailto:[email protected][email protected]&[email protected] r&subject=Retour de test&body=Bonjour à tous"> – Exemple : maito:[email protected]?subject=Demande de renseignement – Cela nous permettra de savoir à partir de quelle page, l’internaute s’est décidé à nous contacter. Le Transfert des fichiers (FTP) – Le FTP est un services qui permet l’échange des fichiers entre deux ordinateurs sur internet, il ne permet pas seulement de télécharger (Download) des fichiers mais il permet aussi de les envoyer (Upload) sur une machine distante. – Par extension, on désigne aussi par FTP le logiciel qui implémente ce protocole et permet de transférer des fichiers. – Un site FTP est une serveur proposant une bibliothèque de logiciels, d'images, de sons ou autres et acceptant des connexions par FTP. – Un site FTP anonymous est un site FTP sur lequel n'importe qui est autorisé à se connecter par FTP en utilisant le login anonymous et son adresse e-mail pour mot de passe. – Carte graphique de l’ozone – Page FTP d’une Entreprise Le langage FTP Commande Description help Affiche l'ensemble des commandes supportées par le serveur FTP status Permet de connaître certains paramètres de la machine cliente binary Cette commande vous fait basculer du mode ASCII (envoi de documents textes) au mode binary (envoi de fichiers en mode binaire, c'est-à-dire pour les fichiers non texte, comme des images ou des programmes) ascii Bascule du mode binary au mode ascii. Ce mode est le mode par défaut type Permet d'afficher le mode courant de transfert (binary ou ascii) user Vous permet de réouvrir une session sur le site FTP en cours avec un nom d'utilisateur différent. Un nouveau mot de passe vous sera alors demandé ls Permet de lister les fichiers présents dans le répertoire courant. La commande "ls -l" donne des informations supplémentaires sur les fichiers pwd Affiche le nom complet du répertoire courant cd Cette commande signifie change directory, elle permet de changer le répertoire courant. La commande "cd .." permet d'accéder au répertoire de niveau supérieur Le langage FTP suite Commande Description mkdir Le commande mkdir (sous UNIX, ou md sous système Microsoft) permet de créer un répertoire dans le répertoire courant. L'utilisation de cette commande est réservée aux utilisateurs ayant un accès le permettant rmdir Le commande rmdir (sous UNIX, ou rd sous système Microsoft) permet de supprimer un répertoire dans le répertoire courant. L'utilisation de cette commande est réservée aux utilisateurs ayant un accès le permettant get Cette commande permet de récupérer un fichier présent sur le serveur •Si la commande est suivie d'un nom de fichier, le fichier distant est transféré sur la machine locale dans le répertoire local en cours •Si la commande est suivie de deux noms de fichiers, le fichier distant (le premier nom) est transféré sur la machine locale dans le répertoire local en cours, avec le nom de fichier précisé (le deuxième nom) Si jamais le nom de fichier contient des espaces il faut veiller à le saisir entre guillemets put Cette commande permet d'envoyer un fichier local sur le serveur •Si la commande est suivie d'un nom de fichier, le fichier local est transféré sur le serveur dans le répertoire distant en cours •Si la commande est suivie de deux noms de fichiers, le fichier local (le premier nom) est transféré sur le serveur dans le répertoire distant en cours, avec le nom de fichier précisé (le deuxième nom) Si jamais le nom de fichier contient des espaces il faut veiller à le saisir entre guillemet open Ferme la session en cours et ouvre une nouvelle session sur un autre serveur FTP close Ferme la session en cours, en laissant le logiciel FTP client actif bye Déconnecte le logiciel client du serveur FTP et le met en état inactif quit Déconnecte le logiciel client du serveur FTP et le met en état inactif Le FTP FileZilla FileZilla en français et gratuit Les accélérateurs de FTP Adresse de téléchargement Les listes de diffusion (Listserv) Ce service permet à un groupe de personnes de communiquer sur un thème par l’intermédiaire du courrier électronique Chaque membre écrit à l’adresse de la liste et un automate se charge de distribuer les messages à tout les membres Il est nécessaire de s’abonner à une liste pour pouvoir participer aux discussions Sites à voir : www.cru.fr/listes www.tile.net/lists Le Chat – Le chat permet la conversation en temps réel (Synchrone) entre deux ou plusieurs internautes. – Peut être réalisée avec des logiciels spécifiques comme Messenger ou NetMeeting ou directement sur un site (Voila). Les groupes de discussion (News) Dans un groupe de discussion (Forum), les internautes traitent un sujet bien précis par le dépôt des messages asynchrones sur un serveur dédié (contribution). Exemple d’adresse de news : News.nordnet.fr Moteur de recherche pour les groupes de discussion – Entrer des mots clés (.fr. pour avoir les groupes français ou cuisine) – Donne la liste des groupes cuisine. – Double cliquer sur le groupe pour avoir les noms des serveurs Adresse du site fédérateur : Usenet-fr Exemple de configuration dans Outlook express. La téléphonie sur Internet Skype Skype est le plus connu Jusqu’au 31 décembre 2006, vos appels vers les fixes en France sont gratuits et illimités. Appelez plus facilement les téléphones ordinaires Envoyez des SMS Affichez et appelez directement les contacts Outlook Achetez plus facilement votre Skype Credit Faites des recherches sur le Web grâce à la barre d’outils Google (Installation facultative). Fonctionnalités de Skype Appelez gratuitement n’importe quel utilisateur Skype, partout dans le monde Voyez à qui vous parlez grâce aux appels vidéo gratuits Discutez avec 100 personnes maximum avec les discussions de groupe Créez des conférences téléphoniques gratuites avec quatre personnes maximum Appelez des téléphones ordinaires avec SkypeOut Lien de téléchargement Le wap ? Et +++ Le WAP = le WEB sur téléphone mobile ( Wireless Application Protocol ) ou ( protocole de communication sans fil ) qui est né en 1997 Le nombre d’abonnés au téléphone portable en France était de 49 millions (Août 2006) contre 10 millions de foyer équipé en Internet. le HTTP devient WTP (Wireless Marking Language ou Langage balisé pour sans-fil) HTML quant à lui devient WML (Wireless Markup Language ou Langage balise pour sans-fil) Vous avez encore javascript qui devient wmlscript, ssl devient wtls et tcp/ip devient wdp Il existe maintenant des portails wap, des sites wap, des hébergeur wap, etc Simulateur d’un téléphone Wap sur Internet C) Les protocoles Le HTTP (pour surfer) Le FTP (pour télécharger) Le SMTP – POP3 – IMAP (les email) Le NNTP(les news) Le HTTP HTTP (HyperText Transfert Protocol) 1990 – Le but du protocole HTTP est de permettre un transfert de fichiers html (Hypertext markup langage) localisé grâce à une chaîne de caractères appelée URL entre un navigateur et un serveur Web (HTTPD) HTML est un langage à base de tag (marqueur) ce langage sera interprété par le navigateur <html> <head> <title>PREMIERE PAGE WEB</title> </head> <body> <I>Hello Word</I> </body> </html> Enregistrer le fichier sous Page.html Le FTP FTP (File Transfer Protocol) – Le but du protocole FTP est de permettre le • Partage des fichiers entre machines distantes • L’indépendance aux systèmes de fichiers des machines clientes et serveur (FTPD) • Le transfert des données de manière efficace Le SMTP – POP3 - IMAP SMTP (Simple Mail Transfert Protocol) – LE SMTP est le protocole standard permettant de transférer le courrier d’un serveur à un autre en connexion point à point (Mode connecté). POP3 (Post Office Protocol) – Permet de récupérer son courrier sur un serveur distant. IMAP (Internet Mail Access Protocol) – Est un protocole alternatif au POP3 mais offrant beaucoup plus de possibilités • Permet de gérer plusieurs accès simultanés • Permet de gérer plusieurs boîtes aux lettres • Permet de trier le courrier selon plus de critères. Le NNTP NNTP – Protocole utilisé par les serveurs de news Internet pour les forums de discussion. D) La recherche Les annuaires Les moteurs de recherche Les Portails Les méga moteurs Les pages jaunes Les autres moteurs de recherche Les logiciels de recherche Les méthodes de recherche Les annuaires Voila Orange Yahoo Francité Share look Nomade (alice) Web crawler Einet (ex Galaxy) Les annuaires ( index ou encore répertoires) sont des bases de données où chaque adresse est décrite sur quelques lignes et organisées hiérarchiquement, par sujet. Ces sujets forment ainsi une arborescence (par exemple cinéma/musique de film/film de science fiction). Ces index sont enregistrés et modifiés manuellement par une équipe de web master professionnels. Ils offrent l'avantage de disposer d'un ensemble de liens préalablement sélectionnées par des humains, en fonction de leur qualité, de leur pertinence et de leur fiabilité. En outre, c'est un bon moyen pour trouver des références lorsqu'on ne sait pas vraiment ce que l'on cherche. Il suffit de se laisser guider par l'arborescence des thèmes. Le top : l’annuaire des annuaires Exite ahalia Mettre un exemple Hardcopy annuaire Les moteurs de recherche Yahoo Alta Vista Hotbot Lycos Google MSN Webdepart Voila Excite Tous Les moteurs de recherche, sont basés sur des index construits automatiquement par des " robots " net surfeurs ( en anglais des crawlers) dont la seule raison d'être constitue à suivre tous les liens de toutes les pages de l'Internet qu'ils connaissent déjà pour essayer de trouver de nouvelles pages. Ces robots parcourent ainsi le World Wide Web en permanence et en font le tour en quelques semaines ou quelques mois, indexant au passage quelques 30 millions de pages réparties sur quelques 300 000 serveurs pour les plus performants. Ces moteurs permettent de retrouver très rapidement toutes les pages indexées comprenant un motclé donné. Si vous spécifiez plusieurs mots-clés, le moteur de recherche va classer les réponses en donnant en premier les pages qui contiennent tous vos mots-clés. L'inconvénient de ce système est la relative anarchie des réponses fournies. En effet, personne n'aura contrôlé au préalable si les pages indexées présentent un quelconque intérêt. Hardcopy moteur de recherche Les Portails Voila MSN Wanadoo Francité Mettre un exemple Site Web dont la page d'accueil propose, en plus d'un moteur de recherche, des hyper liens avec une foule d'informations et de services attractifs, qui est conçu pour guider les internautes et faciliter leur accès au réseau, mais surtout pour les attirer et fidéliser le plus grand nombre d'entre eux, au point de devenir leur porte d'entrée dans Internet. Hardcopy portail Les méga moteurs Metacrawler Search Metasearch Webplaces Mettre un exemple Les méta-outils sont des combinaisons de plusieurs index ou moteurs de recherche indépendants. Vous pouvez taper un certain nombre de mots-clés et laisser ces méta chercheurs les soumettre à plusieurs services simultanément. La synthèse des résultats vous sera ensuite présentée avec les adresses classées par ordre de pertinence et sans doublon. Néanmoins, à l'heure actuelle, les performances de ces systèmes, aussi bien en temps de réponse qu'en capacité de synthèse, ne sont pas vraiment suffisantes pour en faire des outils de recherche privilégiés. Hardcopy meta Les pages jaunes Mettre un exemple Four 11 whowhere iaf addresses bigbook Pages zoom Les logiciels de recherche Copernic, trouve exactement ce que vous cherchez en consultant simultanément les meilleurs moteurs de recherche du Web. Avec Copernic , vos recherches seront plus faciles, plus rapides et plus efficaces que jamais. Il vous offre plusieurs options très intéressantes telles un assistant pour la création de recherches, le sur lignage des mots clés dans les résultats et les pages Web, un historique détaillé de vos recherches, la mise à jour automatique du logiciel, ainsi que des fonctions avancées de gestion des recherches. La version gratuite, Copernic Basic, comporte 8 domaines d'intérêt permettant d'accéder à quelque 90 sources majeures d'information dont AltaVista, Excite, Hot Bot, Infoseek, Lycos, WebCrawler et Yahoo!. Quant aux versions commerciales Copernic 2001 Plus et Copernic 2001 Pro, elles comportent quelque 90 domaines de recherche, offrant ainsi la possibilité d'accéder à plus de 1 000 moteurs de recherche et répertoires Hardcopy copernic Les méthodes de recherche Libellé tous les mots suivants Opérateurs Et ou + au moins un des mots suivants ou aucun des mots suivants Sauf ou - cette expression exacte "" Dans le titre allintitle: mediaform Dans l’URL allinurl: mediaform Dans les liens qui pointent vers Dans le corps du texte allinanchor: mediaform allintext: mediaform Voir sur les différents moteurs, les recherches avançées E) Le matériel utilisé ADSL Asymetric Digital Subcriber line Ligne client numérique asymétrique Sur le même fil téléphonique on fait passer deux fréquences. Haute fréquence pour Internet Basse fréquence pour la voix (le téléphone). Les hautes fréquences se propagent à la périphérie du câble Les Basses fréquences dans l’âme du câble. On peut donc surfer et téléphoner en même temps. Problèmes la longueur du câble 2) Les étapes de la création du site L’étude préalable (analyse des besoins) La conception (sur papier) La production (au clavier) Le lancement Le référencement Les statistiques La maintenance Vérification du référencement A) L’étude préalable Marketing Déterminer les objectifs généraux du site Etudes des sites similaires Réserver le nom de domaine - liste des registars – test d’existence Signification des extensions - conseils Fonctionnelle Décrire les spécifications techniques: (écran utilisateurs) Décrire ce que doit contenir aujourd’hui et à l ’avenir Equipe (qui fait quoi) Choisir l’hébergeur Budget Rédiger l’appel d’offre (ou cahier des charges) Marketing Déterminer les objectifs généraux du site Etude des sites similaires. Réserver le nom de domaine Déterminer les objectifs généraux du site Donner des informations sur le fonctionnement de la ville. Conseil municipal – liste des élus Le site devra permettre présenter la ville, l’équipe municipale, les services, la vie associative, festive, sportive de la mairie, etc. Donner des informations administratives relatives aux services communaux et aux procédures administratives. Déterminer les objectifs généraux du site Le site doit permettre à chaque service de fournir directement les informations qui le concerne. Les actualités, calendrier doivent être actualisées régulièrement et facilement Le site de la ville doit se démarquer des autres mairies. Le site sera consultable en langue française, en option une partie du site sera traduite et consultable en anglais et en flamand. Prévoir un parcours pour les mals voyants (obligatoire) Peut être résolu par des feuilles de style différentes. Vos objectifs de site 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. Etude des sites similaires Profiter pour regarder le source. Faire une grille de comparaison avec pondération éventuellement, faire unhitparade. Noter de 1 à 4 Ville Charte graphique Vitesse d’accès aux pages Facilité de navigation Richesse du contenu Présence d’un plan de site Présence d’un outil de recherche Facilité de recherche dans les moteurs Possibilité de contacter le web master Liens morts Animations (flash) journal défilant Impression générale ……………. Total X Y Z Vos critères de comparaison Ville Total X Y Z Questionnaire Arpanet était un réseau militaire OUI NON Les liens hypertexte ont été inventés par Microsoft OUI NON Mail:[email protected] Permet d’ouvrir outlook OUI NON OUI NON L’inverse d’un download est un Comment entrez dans un FTP anonyme SMTP permet de recevoir du courrier Qu’est ce qu’une contribution (forum) Définir le HTML Quelle balise meta est utilisée pour définir ses mots clés Quelle balise meta est utilisée pour la description du site Questionnaire Définition du spamming Définition du typospamming Copernic est un site de recherche sur plusieurs moteurs en même temps OUI NON OUI NON Les annuaires sont des robots qui indexent par catégories Donner 3 noms de navigateurs Google : Quelle syntaxe permet de recherche un mot clés dans le titre d’une page Qu’est ce qu’un datagramme A quoi sert le peer to peer Comment affiche t’on le code source d’une page Peut on écrire du HTML avec word Nom de domaine Le nom de domaine permet de donner un nom familier à n’importe quel ordinateur sur Internet, alors que les ordinateurs ne travaillent qu’avec des nombres (ce qu’on nomme les adresses IP, par exemple 192.168.17.19). Démo : Prendre une session Msdos (démarrer – exécuter – cmd) et taper (en étant connecté) nslookup www.tf1.fr On peut utiliser Ping (plus long) Un nom de domaine doit être unique sur tout Internet, il y a des organismes qui gèrent cela, au niveau mondial et au niveau national. Il faut donc enregistrer un nom de domaine avant de pouvoir l’utiliser. Nom de domaine L'organisme de régulation international des Noms de Domaine (ICANN) L’association chargée de l'attribution des Noms de Domaine en .fr (AFNIC). Un registrar est un organisme accrédité à donner des noms de domaine Liste des registrars : http://www.internic.net/alpha.html par ordre alphabétique http://www.internic.net/origin.html par localisation géographique http://www.internic.net/language.html par langues http://www.icann.org/registrars/accredited-list.html incluant les Registrars accrédités mais non encore opérationnels Liste des registrars Français ELB Group Inc France Telecom French-Connexion, SARL. dba www.Domaine.fr Gandi SARL Indomco dba Indom Initials Online Limited Mister Name Nameshield, Inc. Nom d'un Net ! Sarl Nordnet OVH Online SAS Test sur le nom de domaine Site netissime permettant de connaître si le nom de domaine existe Signification des extensions grandes classes Signification pays com Les entreprises commerciales ca Canada, edu L'éducation fr France gov Les organismes gouvernementaux, uk pour United Kingdom mil Les organisations militaires, au Australie, net Les organismes fournisseurs d'Internet, org Les autres organismes non référencés. aero L’aéronautique biz Le commerce coop Les coopératives info Les Informations museum Les Musées name Les Particuliers pro Les professions libérales Conseils Attention tout interruption de règlement à la date anniversaire libère aussitôt votre nom qui retombe dans le domaine public et peut être repris par n'importe qui. le typosquatting, consiste à détourner l'orthographe d'une marque ou d'un terme connu pour l'enregistrer en tant que nom de domaine. Exemple www.gogle.fr ou www.télécharger.com (avec accents) Pour la plupart des mairies : www.mairie-avignon.fr www.mairie-albi.fr www.mairie-st-etienne.fr www.marcq-en-baroeul.org www.ville-reims.com www.cabourg.net Voter nom de domaine est : Fonctionnelle Décrire les spécifications techniques: Possibilité dont disposent les utilisateurs (vitesse de modem, nombre de couleurs que leurs ordinateurs peut afficher….) Décrire les spécifications fonctionnelles: Ce que le site doit contenir aujourd’hui et à l ’avenir Choisir l’hébergeur Les différents type d’hébergeur – Les prix – Les critères de choix Spécifications techniques Les pages du site devront être optimisées pour l'utilisation des navigateurs Internet (version 6.x la 7 existe en anglais) ou Netscape (version 7.x) ou Mozilla (voir statistiques sur les navigateurs) Par des script java on peut déterminer le type de navigateur qu’utilise l’internaute (exemple page suivante) sur un écran paramétré en 1024 x 768 pixels. (voir statistiques sur les écrans) Un écran = 1 page (pas d’ascenseurs H et V) sauf pour les pages de texte pur La rapidité d'accès aux informations, la facilité de navigation et la lisibilité doivent être l'objectif principal du créateur de page. L'usage d'images trop lourdes est à proscrire, le poids de la page doit être calculé en fonction de son temps de chargement moyen. Script de test du navigateur <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>premier Script</TITLE> <META content="text/html; charset=windows-1252" http-equiv=Content-Type> <SCRIPT language=JavaScript> <!-- Cacher le script pour les navigateurs n'acceptant pas javascript { if (navigator.appName =='Netscape') document.write('Vous avez Netscape !'); else document.write('Vous avez Internet Explorer !') } --> </SCRIPT> </HEAD> <BODY> </BODY> </HTML> Test Décrire les objectifs par page La vie associative – – – – Le service association Le listing des associations Un moteur de recherche en ligne Possibilité d’interroger par thème (sport, club, culture, etc) La vie culturelle – – – – – – Art plastique Bibliothèque Cinéma Théâtre Musée Expositions. Décrire les objectifs par page Services mairie Enseignement Direction Nom responsable mairie de l’enseignement Téléchargement du dossier d’inscription Restauration scolaire Garderies Contacts Ecoles Téléchargement Formulaire d’inscription à la cantine (pdf) Téléchargement les règlements des restaurants scolaires (pdf) Les tarifs (tableau excel) Les différentes écoles de la ville (avec photo) Vacances Calendrier des vacances scolaires Restauration Tarif Soutien scolaire Lieu des soutiens scolaires Liste des associations assurant un soutien scolaire Classes découvertes Exemple de rubricage Marcq en Baroeul Lille Exemple de rubricage Villeneuve d’ascq Paris Créer le rubricage de votre site Rubricage et éventuellement sous rubricage Equipe Phase de l’étude traitée Membres de l’équipe Phase 1 : Etude analyse des besoins Maire – Elus - Service communication - web master Déterminer les objectifs généraux du site Etude des sites similaires. Réserver le nom de domaine Phase 2 : Conception Service communication – Infographiste – Web master - SSCI Charte Graphique Conception et création des bases de données Organigramme et système de navigation Instructions de création Contenu Choix techniques Calendrier Phase 3 : Production Web master – Informaticien - SSCI Réalisation de programmes Réalisation multimédia Programmation HTML Développement de la partie statique Développement de la partie dynamique Rédaction et remise de la documentation Equipe Phase de l’étude traitée Membres de l’équipe Service communication – Elus - Web master Phase 4 : Lancement -définition du contenu -définition des fonctionnalités -définition de la charte graphique -Ouverture du site de gestion protégé par mot de passe -Remise d'un rapport "Conception du site" pour validation par le Comité de pilotage Spécialiste du référencement - Web master Phase 5: Référencement Service communication – Maire - Web master Phase 6 : Statistiques Web master - Informaticien Phase 7 Maintenance Spécialiste du référencement - Web master Phase 8 Vérification du référencement Votre Equipe Membres de l’équipe Phase de l’étude traitée Choix de l’Hébergeur Le choix de l’hébergeur et le type d’hébergement n ’est pas une chose facile, il y en a beaucoup. Exemple : http://hebergement.netissime.com/ Choix de l’Hébergeur Choix de l’hébergeur Choix de l’hébergeur Le serveur doit être du type linux ou Unix. Ces serveurs sont en général rapide, fiable, et peuvent être mis à jour par différents système d’exploitation. Le serveur de page (HTTP) le plus répandu est APACHE. Il est distribué en Open Source (gratuit) et tourne sur à peu près tous les systèmes d’exploitation. Il est très fiabilité et il possède de vastes outils de configuration. Cela permet de simuler facilement le comportement du site en local (test des pages php par exemple). Il faut considérer l’espace disque alloué par l’hébergeur. Surtout si le site contient beaucoup d’images, d’animations et des sons. Faire le cumul des tailles des fichiers du site (ne pas oublier les bases de données). La bande passante, c’est à dire la quantité de données sortant du site (en fonction du nombre de visiteurs simultanés). La bande passante est généralement allouée sur une base mensuelle ; 100 Mo de bande passante représente 10 000 visites mensuelles d’en moyenne 10 k chacune. Choix de l’hébergeur La méthode de transfert des fichiers est très importante (upload). Il existe 2 méthodes. La première méthode, c’est le transfert des fichiers par FTP. Méthode rapide, pratique pour le transfert d’une quantité importante de données L’autre, c’est l’envoi de fichiers à l’aide d’un gestionnaire de fichiers installé du côté serveur. On y accède généralement par son logiciel de navigation depuis n’importe quel ordinateur connecté à Internet sans avoir à installer et/ou paramétrer un logiciel FTP. Cette dernière méthode peut parfois être pratique pour la mise à jour ou la modification rapide d’un fichier, mais elle manque nettement de souplesse. Préférez donc au minimum la méthode par FTP. D’autant plus, que de nombreux éditeurs HTML permettent d’éditer directement un fichier sur le serveur par FTP (frontpage, dreamweaver). Choix de l’hébergeur Nombre de nom de domaine (pendant un an renouvelable) et d’adresse Email Pour l’hébergement de sites web dynamiques, il faut choisir un serveur autorisant les scripts côté serveur. Les langages de scripts les plus répandus et utilisés pour des sites dynamiques sont : PHP (source ouverte et multi-plateforme) PERL - CGI (source ouverte et multiplateforme) ASP (Microsoft, sous serveurs Windows seulement). Il existe aussi d’autres langages moins répandus, utilisés pour des applications particulières, tels Python, Zopes, etc... Pour l’hébergement de sites dynamiques, il faut aussi disposer de la possibilité de créer sur le serveur des bases de données. Il faut donc que l’hébergeur offre cette possibilité. On recherchera donc un hébergeur offrant un système de type (Linux, Apache, MySql, PHP). Choix de l’hébergeur En fait il y a 2 sortes d'hébergement payant. L'hébergement sur serveur dit "mutualisé" L’hébergement sur serveur dit "(semi-)dédié". Sur un serveur mutualisé, tous les sites tournent en même temps. Si vous avez beaucoup de visiteurs (plusieurs milliers) et que vous offrez des services à vos visiteurs, votre site prendra alors trop de ressources sur le serveur par rapport aux autres sites qui tournent sur le même serveur que vous. Il vous faudra alors passer sur un serveur dédié ou semi-dédié ou là vous serez seulement à un ou deux sites sur un seul serveur. Le prix est également important (généralement au mois). Liste des hébergeurs Comparaison de vos hébergeurs NOM Hébergeur Bande Prix Nom de domaine Espace disque Compte Mail Trafic Sauvegarde BDD type Administratio n via internet Tracert www.herlies.fr permet de retrouver le nom de son hébergeur Référence ment L’évaluation des coûts Les coûts de la création d’un site Internet n’auront pas le même poids dans le budget d’une petite commune que dans celui d’une grande ville. Ils dépendent également du fait que le site soit développé en interne ou externe. Le projet impliquera d’engager des dépenses à court terme pour la création du site à long terme, pour sa gestion (mise à jour, maintenance, ajout de fonctionnalités). Il y aura par conséquent des coûts fixes, qui ne seront engagés qu’une seule fois (conception du site, achat du matériel, enregistrement du nom de domaine, etc.) coûts variables liés à la gestion du site (mise à jour, frais d’utilisation du réseau téléphonique, hébergement, abonnement auprès d’un fournisseur de services Internet, frais de personnel). Inclure également les coûts de formation des différents agents Coûts initiaux d'investissement Il est possible d'identifier les coûts dans les postes suivants : Equipement informatique avec connexion internet du responsable du site, Développement de la charte graphique, Achat d'une licence pour le site ou développement spécifique, Intégration et recette de la solution, Formation initiale des utilisateurs à l'administration du site, Saisie initiale des données ou conversion de données, si sous-traitée. Si l'hébergement est assuré par la ville : Matériel informatique et de télécommunication des plateformes de test et d'exploitation Coûts directs de fonctionnement Ces coûts représentent les frais engagés pendant la durée de vie du site : Rémunération du personnel pour la gestion du contenu, Rémunération du personnel informatique, si les développements sont faits en interne ou s'il faut paramétrer, adapter et assembler des logiciels libres, Maintenance corrective (défauts et bugs), adaptative (optimisation des performances) et évolutive (améliorations fonctionnels, changement de version) de la solution, Frais d'hébergement et d'assistance Coûts indirects et cachés Outre les coûts directs, la plupart des investissements induisent des coûts indirects ou cachés, qui peuvent même parfois dépasser les coûts directs. L’analyse des coûts doit s’étendre aux frais généraux, associés notamment aux activités d’administration générale et à la gestion des ressources humaines, à la gestion financière et à la gestion des ressources. Ces coûts sont souvent oubliés. Une baisse de productivité peut survenir au départ, durant la période où les agents apprennent à exploiter les nouveaux outils technologiques. Cette forme de coût, classique en informatique de gestion, peut se rencontrer pour des services en ligne intégrant un back-office en interne. Les coûts prévus pour votre site Coûts initiaux d'investissement Coûts directs de fonctionnement Coûts indirects et cachés Exemple appel offre Objet de la consultation La présente consultation porte sur les lots suivants : Lot 1 : Charte graphique Lot 2 : Socle technique Lot 3 : Hébergement, réception et maintenance Lot 4 : Accompagnement pour le contenu du site Lot 1 Charte graphique La charte graphique proposée doit être indépendante du contenu et être composée de différentes maquettes de présentation des rubriques et des informations. Elle doit pouvoir évoluer sans remise en cause des informations déjà contenues dans le site. Lors de l'élaboration d'une rubrique, sous rubrique ou information, le responsable du site doit pouvoir, parmi les maquettes disponibles, associer la maquette qui mettra le plus en valeur son information. Le format d'affichage sera de 1024 x 768 et il est recommandé, pour chaque page, de maintenir le contenu dans ce format sans distorsion. L'accès au site ne devra pas nécessiter de plugins additionnels hormis les players multimédias standards et celui d'Acrobat Reader dans sa version gratuite. Présence d'une barre de navigation (chemin), respect de la règle des trois clics, accès facilité pour les malvoyants, impression des pages. Lot 1 Charte graphique Le site devra être développé pour les versions 5 et 6 des navigateurs Internet Explorer et Netscape et pour les systèmes d'exploitation Windows, Mac et Linux. Le temps d'affichage devra être correct pour des liaisons à bas débit. Ces différents éléments seront fournis sous la forme de dossier "Photoshop" avec un découpage HTML pour intégration dans la solution technique et deviendront la propriété de la ville. Ce lot peut être confié à l'agence de communication qui travaille habituellement avec la ville. Après réception de la solution et paiement de la totalité de ce lot, la ville acquiert la propriété de l'ensemble des images, graphismes, icônes et autres contenus graphique créés pour le site. Lot 2 Socle technique Le socle technique est constitué des différents modules permettant de générer dynamiquement le contenu du site et de répondre à l'ensemble des fonctionnalités demandées. L'accès à ces modules doit se faire à partir d'une interface d'administration simple et ergonomique, accessible à partir d'un navigateur standard du marché via le réseau Internet. Le site permet d'informer les citoyens sur les activités qui se déroulent près de chez eux, de développer une interactivité avec eux. La solution proposée doit présenter un plan de la ville, solliciter les réactions des habitants via des formulaires, sondage et consultation. Elle doit afficher la liste des structures municipales, des services d'urgences, des associations, des commerçants et des artisans de la commune. Lot 2 Socle technique Les structures locales : centres culturels, associations, commerçants, artisans, … doivent pouvoir mettre à jour leurs propres informations et fournir une actualité locale à partir d'une interface d'administration simplifiée. Ces informations seront mises en ligne après validation par le responsable du portail. Les citoyens doivent avoir accès aux informations municipales. La solution proposée doit permettre l'élaboration automatique d'une lettre par sélection d'informations du site et l'envoi périodique vers les abonnés pour les tenir au courant de l'actualité locale et des principales initiatives de la mairie Pour une meilleure gestion des e-mails envoyés par les citoyens et afin de mieux cerner leurs attentes, il est demandé de ne pas mettre directement les adresses e-mail des élus, responsables ou services, mais de proposer un cadre de saisie. Chaque demande sera adressée par mail au destinataire, mais une copie sera enregistrée dans un fichier accessible par le responsable du site. Ce fichier devra pouvoir être transféré vers une application interne de suivi et de traitement des demandes des citoyens. Lot 2 Socle technique Le site doit proposer une carte de la ville interactive en permettant de visualiser sur cette carte les types de structures municipales : service de la mairie, cinémas, restaurants, piscines… et d'afficher les informations associées. L'affectation des structures sur la carte doit pouvoir être réalisée par le responsable du site. La solution doit donner la possibilité au responsable du portail, de créer simplement des formulaires permettant aux citoyens de fournir des informations, de se pré inscrire à un service, d’effectuer des demandes ou des réservations d'actes, de commander des publications. Les demandes, inscriptions ou réservations doivent pouvoir être envoyées par email à l'agent concerné et enregistrées dans un fichier pour éviter toute resaisie par le service, en cas de traitement automatique par une application. Le moteur de recherche devra être présent en permanence sur le site quel que soit le niveau de navigation. Il permettra d'effectuer une recherche full texte sur toutes les informations de la base. Lors de la visualisation, les résultats de la recherche sont regroupés par type d'information. Lot 3 Hébergement Les statistiques du site devront également être accessible de l'administration afin d'identifier les pages les plus visitées, suivre l'évolution du nombre de visites, répertorier les expressions recherchées. En résumé suivre l'activité du portail pour pouvoir le faire vivre et évoluer. Les informations relatives aux statistiques sont archivées et doivent pouvoir être visualisées mensuellement avec une activité journalière. L'hébergeur doit être capable de garantir un fonctionnement 24 heures sur 24, un service de surveillance des serveurs et des applications, des dispositifs de gestion de réseau et de sauvegarde automatique. Le prestataire indiquera les coordonnées et les références de l'hébergeur. Le taux de disponibilité du site internet ne saurait être inférieur à 99% sur une plage d'ouverture de 24h/24 et 7j/7. La montée en charge du contenu du site et de sa consultation doit être prise en compte. Dans le cas où les performances d'accès au site seraient inférieures à la norme habituellement retenue (délai de réponse inférieur à 5 secondes), le prestataire devra mettre en œuvre les moyens nécessaires afin de résoudre le problème dans un délai maximum de deux semaines. En cas de non satisfaction, le prestataire s'engage à changer d'hébergeur. Cette prestation fera l'objet d'un contrat d'hébergement non inclus dans le marché initial. Lot 3 Hébergement Le prestataire mettra à disposition une version du site sur la plateforme de test pour effectuer la recette fonctionnelle globale du site : vérifier la bonne intégration de la charte graphique sur la page d'accueil et sur les différentes pages et valider l'ensemble des fonctionnalités proposées. Pour effectuer ces tests fonctionnels le prestataire fournira un minimum de contenu pour pouvoir visualiser les différentes maquettes de présentation. Une fois la recette globale du site prononcée, le prestataire prend en charge le transfert de cette version sur la plateforme d'exploitation pour permettre la mise en ligne du contenu. Avant la mise en ligne d'une première version du site, le prestataire devra effectuer en présence du titulaire des tests de performance de la solution. Les résultats de ces tests devront vérifier que les temps de réponse moyens, à la sortie du serveur, sont inférieurs à 5 secondes pour 90% des fonctions prévues dans les scénarios du jeu de test pour 10 utilisateurs simultanés. Dans le cas où ces résultats ne seraient pas atteints, le prestataire devra prendre à sa charge l'ensemble des dispositions nécessaires jusqu'à obtention des objectifs attendus. Lot 3 Hébergement Le titulaire assure le support technique et l'interface avec l'hébergeur et la maintenance corrective des logiciels qui composent le socle technique. Cette prestation comprend le support téléphonique et la correction des incidents et dysfonctionnements pour lesquels une reproduction peut être réalisée. Les incidents ayant pour effet de rendre le résultat inutilisable sont considérés comme une indisponibilité et doivent être corrigés dans les 48 H à compter de la notification. Les incidents non bloquants et sans conséquence sur le résultat obtenu devront être corrigés dans les deux semaines à compter de la notification. Lot 3 Hébergement Dans le cadre de cette maintenance, le prestataire fera bénéficier le client des améliorations apportées au produit ou au service, pour les fonctionnalités objet de la commande. Ces mises à jour feront l'objet d'une information préalable du client avec description des modifications apportées. Cette nouvelle version sera mise à disposition avec la charte et le contenu du client sur la plateforme de test du titulaire pour validation. Après validation, elle sera transférée sur la plateforme de production. Il ne devra pas avoir plus de deux nouvelles versions par an. Lot 4 Accompagnement formation La commune doit pouvoir maîtriser elle-même la mise à jour de son site, et ne pas être tributaire du prestataire qui réalise le site. La solution technique qui sera retenue permettra d’assurer la gestion du contenu (modification des informations, création ou suppression de rubriques, etc.) sans intervention externe. Ces tâches doivent pouvoir être réalisées en interne par des personnes non spécialisées. En revanche, le prestataire proposera une assistance d'accompagnement de la collectivité locale pour l'aider à structurer et mettre en ligne la première version du site . Le prestataire assurera la formation de l'équipe en charge du site (5 personnes maximum) afin qu’elle soit en mesure de mettre en ligne l'ensemble du contenu et d'utiliser toutes des fonctions retenues dans le cadre du socle technique. Les personnes à former ont une bonne connaissance des outils bureautiques et ont l'habitude d'utiliser internet, mais n'ont pas de compétence particulière en informatique. Le prestataire précisera le temps nécessaire pour cette formation qui se déroulera dans les locaux de la mairie. A l'issue de cette formation, le prestataire apportera une assistance téléphonique à cette équipe, durant les heures ouvrables, pendant une période de trois mois. Lot 4 Accompagnement conseil à la structuration Le prestataire proposera une assistance de conseil pour aider la collectivité à identifier les informations à mettre sur le site et à élaborer l'arborescence des rubriques et sous rubriques. Cette réflexion permettra également de préciser l'organisation des informations à présenter sur les différentes pages du site et l'enchaînement de ces pages. Cette prestation de conseil est estimée à quatre demi-journées dans les locaux de la mairie. Modalité particulière planning La mise à disposition du produit pour les opérations de réception, hors contenu devra se faire dans un délai inférieur à deux mois : Recueil des attentes, analyse de l’arborescence souhaitée pour le site, élaboration des grandes lignes de la charte graphique et présentation détaillée du produit à l'équipe : 1 à 2 semaines, Présentation de trois maquettes pour l'approche graphique, qui peut être réalisée soit par le prestataire, soit par l’agence de communication de la ville et choix d'une solution. Compte tenu de l'importance de cette étape, il est souvent nécessaire de prévoir plusieurs validations et les risques de décalage du planning sont importants. Une première réunion de cadrage avec toutes les parties prenantes impliquées dans la validation est indispensable : 2 à 3 semaines, Elaboration de la charte graphique qui comprend la page d'accueil, les différentes maquettes de présentation des rubriques et différentes informations, mais également les principes de lien entre les différentes parties du site. Dans tous les cas cette étape est importante car elle constitue la partie visible du site et doit respecter tous les aspects d'ergonomie et d'accessibilité : 1 à 2 semaines, Modalité particulière planning Transformation des maquettes graphiques en maquettes HTML et intégration dans le socle technique : 1 à 2 semaines, En parallèle, organisation de la formation du responsable du site, qui assurera les fonctions d'administrateur principal, et des personnes susceptibles de prendre en charge une partie du contenu pour la première version du site. Après cette formation, l'administrateur principal pourra créer l'arborescence du site, et les différents producteurs de contenu pourront commencer à renseigner les rubriques, l'actualité, les fiches acteurs et structures. Quelques jours, Mise à disposition de la solution globale sur la plateforme de test pour les opérations de réception fonctionnelle : 1 semaine, A partir de cette étape, l'équipe en charge du site peut organiser le contenu et mettre sur le site les informations pour la mise en ligne d'une première version du site : 1 à 2 mois. Conditions et échéancier de paiement L'offre du prestataire restera valable trois mois à compter de sa date d'envoi et les prix seront établis Toutes Taxes Comprises. La facturation sera effectuée à la réception de chaque lot, le délai de règlement est de 45 jours à compter de la réception de la facture. Cadre de réponse Toutes les sociétés souhaitant répondre à cette consultation peuvent adresser leur proposition en respectant le cadre de réponse défini ci-après. Proposition de base Dans sa réponse le prestataire devra préciser les points suivants : Présentation Présentation globale de la solution et de ses avantages Caractéristique de la solution Présentation détaillée de la solution et de ses grands principes pour réaliser le Portail Internet Citoyen de la ville conformément aux spécifications techniques du besoin. Dans le cas où le prestataire ne répond pas à une fonctionnalité demandé, il doit l'indiquer clairement et indiquer les solutions de remplacement qu'il préconise. Les points suivants doivent être détaillés : Charte graphique Socle technique avec description détaillée de l'interface d'administration Hébergement, réception et maintenance Accompagnement pour le contenu du site Choix technologique de la solution Proposition financière Le prestataire doit remplir le tableau financier présenté en annexe. Délai et planning de réalisation Présentation de la société et références Rédiger l’appel d’offre Contenu de la consultation Organisme qui lance la consultation Ville de Adresse de retrait des dossiers et d'obtention des renseignements administratifs Hôtel de Ville Direction de la Commande Publique et des Affaires Juridiques Adresse Complément d’adresse Code postal – Ville 03 20 65 83 08 (contact : D.Revertegat) 03. 20. 65 83 08 [email protected] Les dossiers sont envoyés sur demande formulée par fax ou par mail, ou remis sur place, le cas échéant. Objet de la consultation La présente consultation porte sur la réalisation de xxxxxxxxxxxxxx . Lot n° 1 : xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx. Lot n° 2 : xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx Lot n° 3 : xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx …… Lot n °X Rédiger l’appel d’offre Chaque candidat a la possibilité de présenter des offres pour une partie ou la totalité des lots. Documents à fournir - le présent règlement - les CCTP - une attestation sur l’honneur que le candidat ne fait pas l’objet d’une interdiction de concourir - une attestation sur l’honneur précisant que le candidat est à jour de ses obligations fiscales et sociales - l’attestation d’assurance RC et décennale du candidat précisant les dates de validité - une attestation sur l’honneur que le candidat n’a pas fait l’objet, au cours des 5 dernières années, d’une condamnation inscrite au bulletin n°2 du casier judiciaire pour toutes les infractions visées aux articles L 324-9, L 324-10, L 341-6, L 125-1 et L 125-3 du Code du Travail - une note détaillant les modalités de déroulement des chantiers, ainsi que les moyens humains et techniques mis en oeuvre, et permettant d’apprécier la valeur technique de l’offre - les détails quantitatifs et estimatifs dûment complétés (prix HT et TTC) Date limite de remise des offres Mardi 26 Septembre 2006 à 17 heures. Adresse où les offres doivent être transmises Hôtel de Ville Direction de la Commande Publique et des Affaires Juridiques Adresse Complément d’adresse Code postal – Ville Critères de jugement des offres Ce jugement sera effectué sur les critères de choix suivants : - valeur technique de l’offre en adéquation avec les CCTP : 30 % - prix des prestations : 30 % - capacité à mener le chantier au regard des moyens humains et techniques utilisés : 20 % - délai d’exécution si inférieur à celui indiqué par le maître d’ouvrage : 20 % B) La conception Charte Graphique Conception et création des bases de données Organigramme et système de navigation Contenu Choix techniques Calendrier Charte graphique On appelle "charte graphique" l'ensemble des codes graphiques, colorés et formels créés pour la communication visuelle d'un site web. C'est la mission du designer graphique, plus connu sous le nom de Webdesigner dans le monde du Web, d'élaborer un certain nombre de règles donnant une unité et une cohérence aux activités du site web. Ces règles sont appliquées aux déclinaisons du logo, aux mises en page des plaquettes, aux affiches... Dans le cadre d'une entreprise ces règles peuvent s'étendrent aux emballages, signalétique, voitures d'entreprises, vêtements professionnels et aussi à l'architecture. Ces recommandations contribuent à renforcer le système de communication et à véhiculer la cohérence de l'image que veut donner tout site Web. Des couleurs harmonieuses et judicieuses sont donc indispensables pour mettre en valeur l'information véhiculée. Charte graphique Le vocabulaire doit être accessible au grand public, les sigles et icônes doivent être explicités et leur usage limité. La lisibilité est dépendante du soin apporté à la hiérarchisation des titres, sous-titres, inter-titres, chapeaux et textes courants.(faire une recherche pour trouver les mots utilisés pour la mise en page). Les pages trop longues sont à éviter. Il vaut mieux privilégier une présentation synthétique et faire un lien vers une page développant plus largement un thème. L'internaute doit pouvoir juger de la fiabilité et de la fraîcheur de l'information. Pour cela, chaque article devra être signé par son auteur, la signature sera apposée en fin d'article à droite et la date de la dernière mise à jour et il offre la possibilité d'écrire directement au service concerné. Etapes pour la réalisation de la charte graphique Réflexion La charte graphique du site web de la mairie devra se baser sur le patrimoine existant de la mairie. Définition des objectifs et du positionnement du site et élaboration d'un cahier des charges spécifique à la charte graphique. Conception Recherches de solutions et mise au point Réalisation Charte graphique, maquettes, développement, mise en œuvre sur un serveur. Tests sur les navigateurs utilisés. Feuille de style Les feuilles de style ont l’extension .Css Faire sur l’ordinateur une recherche de tous les .css (il doit y en avoir beaucoup, car la plupart des sites utilisent les feuilles de style). Visualiser le contenu d’une feuille de style avec le bloc note de Windows. Chaque balise de Html classique peut être redéfinie (h1, H2, etc.) Exemple de contenu : html,body { background-color : white; } h1 { font-size : 200%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : blue; text-align: center; } h2 { font-size : 150%; font-family : Verdana, Arial, Helvetica, Geneva, sans-serif; color : red; padding-left:15px; } Page utilisant une feuille de style <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>premier Script</TITLE> <META content="text/html; charset=windows-1252" http-equiv=Content-Type> <link href="style.css" rel="stylesheet" type="text/css"> </HEAD> <BODY> <h1>titre en H1</h1> <h2>titre en H2</h2> <h3>titre en H3</h3> </BODY> </HTML> Avantages Les feuilles de style permettent de changer rapidement la présentation d’un site. Toutes les pages, peuvent faire appel à la même feuille de style. Ou chaque page peut être associée à sa feuille de style. Nom de la page : style.html Nom de la feuille de style : style.css Typographie et feuille de style Les polices et les tailles de caractères sont gérées dans une feuille de style .. Pour ne pas se perdre dans les style, il faut créer une page regroupant les noms des styles et leurs caractéristiques Usage Style typographique Normal Titre de la page Titre blanc Sous-titre de page AABBCCDDEÉ AaBbCcDdEé AABBCCDDEÉ Caractéristiques Police arial Casse majuscule arial arial petite majuscule Taille Titre HTML Couleur 13 pts #000099 (navy) titre1 12 pts #FFFFFF (blanc) titreblanc 12 pts #000099 (navy) titre2 Accroche AaBbCcDdEé arial 10 pts #000000 (noir) sstitre Titre de chapître AaBbCcDdEé arial 12 pts #000099 (navy) titre3 Sous chapître AaBbCcDdEé arial 11 pts #000099 (navy) titre4 Texte normal AaBbCcDdEé arial 9 pts #000099 (navy) normal Notes AaBbCcDdEé arial 08 pts #000099 (navy) note lien noir AaBbCcDdEé arial 10 pts #000000 (noir) liennoir lien blanc AaBbCcDdEé arial 10 pts #FFFFFF (blanc) groslien Exemple Icônes Le fond de page est unie de couleur #F9F9F9 Utilisation Illustration Nom du bouton Haut de page haut.jpg Retour au sommaire home.jpg Contact mail.gif Télécharger disk.jpg Puces puce.jpg Votre charte graphique Décrivez votre charte graphique Conception et création des bases de données Les bases de données nous seront utiles pour mémoriser Le calendrier des activités. Les coordonnées des Visiteurs. La liste des élus. Le menu des cantines. Ces données vont se trouver sur les disques durs de l’hébergeur. Les étapes pour créer des BDD Analyse – La meilleure méthode pour les petites bases de données, c’est de faire une approche papier. Quels sont les champs que je dois utiliser dans mon système d’information. Ces champs constituent la structure des fichiers. – Ils faut ensuite établir les relations qui existent entre les différents fichiers (on dit aussi des tables). – Exemple sur une feuille de paie. – Fichier : • Activité • Salarié • Paramètres – Pour chaque fichier on décrit les champs • Nom • Type • Longueur Clé Index Phpmyadmin sur free Création d’une table sous mysql Donner le nom et le nombre de champ de la BDD puis exécuter Pour chaque champ, donner un nom, type et taille, puis sauvegarder CREATE TABLE `Braderies` ( `Libellé` TEXT NOT NULL , `Date` DATE NOT NULL , `Heure_deb` TIME NOT NULL , `Heure_fin` TIME NOT NULL , `Lieu` TEXT NOT NULL , `adresse` TEXT NOT NULL , `contact` TEXT NOT NULL , `telephone` TEXT NOT NULL ) TYPE = MYISAM ; Test des bases de données en local Questionnaire 2 Quelle est l’extension d’une feuille de style ? Avantages des feuilles de style Quelle instruction fait le rapprochement entre une adresse IP et le nom d’une URL ? Qu’est ce qu’un registrar ? Donner le nom de 2 registrars du Nord Citez 5 extension de noms de domaine Quel organisme s’occupe des noms de domaine français Qu’est ce que le Rubricage ? Qui doit s’occuper de la charte graphique ? Quels sont les navigateurs les plus utilisés par les internautes ? Quel est la taille écran la plus utilisée sur le Web ? Questionnaire 3 Quelle est la balise qui permet de faire le lien entre une page Html et une feuille de style ? A quoi sert MYSQL ? Qu’est ce que le PHP Qu’est ce que le JavaScript Quelle est la balise qui prévient le code html qu’il y a du javascrip dans le code A quoi sert Dreamweaver et FrontPage ? Qu’est ce qu’une base de données ? Qu’est ce qu’une table Qu’est ce qu’un Champ A quoi sert un index A quoi sert une clé unique Qu’est ce qu’un lien entre 2 tables ? Organigramme et système de navigation La navigation doit être simple et rapide. La page d'entrée déroulant le plan du site, il est important que l'internaute puisse y retourner rapidement (2 ou 3 clics maximum) à partir de n'importe quelle page du site. En première page (la page Index), il est conseillé de faire une page descriptive du site sans animation. Cette page redirige automatiquement vers une autre page dite de menu, d’aiguillage ou de sommaire. Toutes les pages de documents comportent un bouton retour vers le sommaire ainsi qu'un bouton retour en haut de page en cas de longueur. Dans le cas de document très long, il est conseillé d'utiliser un cadre vertical déclinant les titres de chapitres, sans bordure ni ascenseur, de la même couleur que le document principal. Tout lien vers un site interne ou externe s'ouvre dans une fenêtre indépendante (popup). Il est également important de ne pas oublier de mettre un titre clair et explicite aux pages HTML dans la balise <Title>., et de bien renseigner les balises méta. Ce titre apparaît dans le bandeau supérieur du navigateur. Il est également utilisé par les moteurs de recherche. Exemple de navigation Gestion centralisée Une personne le Web master, peut prendre en charge le contenu du site. Elle se charge de récupérer les informations auprès des services et des acteurs externes et de les mettre en ligne. Convient pour les petits sites ou les mises à jours seront peu fréquente. En cas de montée en puissance, il faudra passer à une gestion décentralisée. Gestion décentralisée Le rôle du responsable du site évolue et il ne peut plus travailler seul. Il doit identifier des correspondants dans les différents services et en assurer la coordination. Il faut mettre en place des circuits de production du contenu et des circuits de validation. Des espaces du site seront ouverts aux autres acteurs de la ville : les bibliothèques, centres culturels, associations, … pourquoi ne pas leur donner la possibilité de mettre directement leurs informations sur le site ? Là se pose le problème de la responsabilité éditoriale. Les informations mises en ligne restent sous la responsabilité de la collectivité locale. Il faut donc valider toute information. A ce stade, la gestion du contenu du site est assurée par une équipe composée de permanents et de correspondants. Cette équipe doit également assurer un rôle de promotion et faire en sorte que l'ensemble des autres outils de communication de la ville fassent référence au site. Choix techniques charte graphique Méthode de travail Charte graphique Outils de travail Retouche des images, des photos,… Outils informatiques Photoshop Création des effets Réglage des niveaux et des contrastes calibrage Choix de police Studio graphique Vectorisation des objets Adobe illustrator Création des animations Flash Interactivité et intégration du son Scanner les photos et textes Omnipage Choix technique Gestion de projet Gestion des taches - Microsoft office Project Développement itératif Gestion des ressources humaines Gestion base de données Développement mysql Phpmysql Publication sur le Net Filezilla Authentification pour accès au site Securisite Gestion de base de données des utilisateurs et des mots de passe Scripts de contrôle JScripts & VBScripts Balisage et génération des fichiers HTML FrontPage & Dreamweaver Sauvegarde, documentation,… Fichiers Word et/ou PDF Mise à jour des contenus Filezilla – SPIP Serveur d’évaluation Test du site en local Apache Bureautique Rédaction des textes OpenOffice - Word Programmes Création des pages Mise en ligne Calendrier Peut être créer avec Msproject : Il faut répertorier toutes les taches à faire leurs donner un timming et une ou plusieurs ressources Le résultat peut se faire sous forme de diagramme de Gant Si on associe un coût à chaque ressource, on peut avoir une idée du budget Calendrier Calendrier diagramme de Gant Diagramme par tâche C) La production Réalisation de programmes Réalisation multimédia Programmation HTML Tutoriaux sur Java, Php, XLM Tutoriaux sur Html, Dhtml, Xhtml Développement de la partie statique Développement de la partie dynamique Rédaction et remise de la documentation Réalisation des programmes Le réalisation sera elle faite en interne ou par un ou des prestataires externes ? Cela dépend beaucoup de la taille de la mairie et des objectifs à atteindre. Il existe sur le marché des sociétés spécialisées dans le développement de solutions Internet pour les collectivités locales. Elles connaissent parfaitement ce marché et ont investi pour développer des produits ou des services qui peuvent être mis en place rapidement De plus, les communes disposent rarement en interne des compétences nécessaires à la création d’un site internet. Il est donc préférable de confier la création du site à une ou plusieurs société(s) spécialisée(s) dans ce domaine. De toute façon la commune doit maîtriser elle-même la mise à jour de son site, et ne pas être tributaire des exigences, notamment financières ou techniques, de la personne ou de la société qui a réalisé le site. Ces tâches doivent en outre pouvoir être réalisées au sein de la collectivité par des personnes non spécialisées. Solutions de mise à jour automatique Les solutions proposées par les sociétés de service, ressemblent à la conception d’un blog. En quelques clics, il est possible de monter son site Web La présentation est relativement figée, mais les mises à jour du contenu sont très rapides. Voir également SPIP Site officiel de SPIP qui peut être utiliser librement pour votre propre site, qu’il soit personnel, associatif, institutionnel ou marchand. Exemple modèle de blog On choisit parmi plusieurs présentations possibles Exemple choix des colonnes C) Ou réception du produit L’application fournie par MEDIAFORM est soumise à une garantie s’étalant jusqu’à 12 mois à partir de la date de réception. MEDIAFORM s’engage pendant cette période à remédier à toutes les anomalies Constatées MEDIAFORM s’engage à intervenir dans un délai de 48 heures ouvré pour corriger les éventuels dysfonctionnement Sont exclus de la Garantie les cas suivants : Utilisation non conforme de l’application Poursuite de l’exploitation suite à un dysfonctionnement sans l’accord de MEDIAFORM Modifications apportées par l’utilisateur au site sans l’accord de MEDIAFORM . D) Le lancement Agissez comme les professionnels du cinéma, ne lancez jamais un site au moment où votre public est censé être en vacances, notamment l'été. Vous risquez en effet de vous priver d’une partie du public drainé par les listes de nouveautés. Généralement, un site reste une nouveauté pendant une semaine. Organiser une information au niveau de la ville et pour les agents. Journal municipal Profiter peut être des vœux du maire ou d’une autre commémoration. Faire apparaître dans chaque document, l’URL du site officiel E) Le référencement Qu’est ce que le référencement Inscription automatique dans les annuaires Inscription manuelle dans les annuaires Référencement sur annuaire Annuaires et moteurs secondaires. Référencement sur moteur de recherche Mots clés Méthodologie de référencement Balise méta Fichier robot.txt Les balise de remplacement Le spamindexing Exemple de balise meta Qu’est ce que le référencement Le référencement permet à un site d’être retrouvé facilement par un internaute. Pour se faire référencer, il faut s’inscrire auprès des annuaires de recherche et utiliser certaines techniques pour que les robots des moteur de recherche, indexent correctement le site. Etre bien référencé, c’est être bien placé lors d’une recherche par mots clés dans un moteur de recherche (au bout de 5 ou 6 pages de réponses, l’internaute a trouvé ce qu’il cherchait ou reformule une nouvelle requête). Le référencement n'est jamais acquis. Un site peut très bien se positionner en première place, puis passer à la douzième position. Il est donc nécessaire de s'assurer périodiquement du positionnement d'un site. Inscription automatique dans les annuaires Elle peut se faire par des sites ou des logiciels spécialisés Logiciels Certains sites vous proposent de le faire automatiquement (en gratuit ou en payant). Site payant - Site gratuit En contre partie, il faut afficher une petit logo Indexation sous 10 à 12 semaine Annuaires et moteurs rarement intéressant Inscription manuelle dans les annuaires IL faut se placer sur la page d’accueil des différents annuaires et chercher les mentions comme VOILA Ajouter votre site YAHOO InfoYahoo puis proposer un site Référencement sur annuaire Vérifier si votre site n’est pas déjà référencé Trouver la rubrique appropriée dans Yahoo – – – – – – – – – – – – – – Actualités et médias Art et culture Commerce et économie Divertissement Enseignement et formation Classement géographique Informatique et Internet Institutions et politique Références et annuaires Santé Sciences et technologies Sciences humaines Société Sports et loisirs Proposer le site à partir de la rubrique appropriée Référencement sur annuaire Vous vous êtes assuré que votre site remplit bien les critères d'acceptation suivants : Titre – URL – Situation géographique – Description (25 mots) Personne à contacter et Email Informations complémentaires (autres rubriques) Réponse : Merci d'avoir pris le temps de nous proposer votre site. C'est en effet grâce aux sites suggérés par nos utilisateurs que le guide Web de Yahoo! France s'enrichit de jour en jour. Nous accordons beaucoup d'attention à chaque site que nous visitons afin de décider s'il sera ajouté à notre guide Web ou non. C'est une procédure qui demande du temps, et nous faisons de notre mieux pour examiner le plus grand nombre possible de sites parmi les centaines qui nous sont proposés quotidiennement. Annuaires et moteurs secondaires. Une fois votre site référencé manuellement sur les annuaires et moteurs majeurs, effectuez un référencement automatique sur les outils de recherche "secondaires". Identifiez les annuaires et moteurs spécifiques de votre activité (commerce électronique, nautisme, santé, agro-alimentaire...) et soumettez-leur également votre site. Pour retrouver ces outils de recherche thématiques, utilisez des sites qui les recensent. Si votre site présente un caractère régional important, soumettez-le également aux outils de recherche régionaux français. Mots clés Une étude des mots clés (que l'internaute va entrer dans les moteurs de recherche) est à faire. Pensez aux fautes d’orthographe qu’il peut faire En cas de mots composés prévoir tous les cas marcq-en-baroeul – marcq en baroeul Dans les balises Meta on peut entrer jusqu'à 1000 caractères (une lettre accentuée étant le plus souvent équivalente à 8 caractères) Ne pas utiliser le nom de mon concurrent dans mes mots clés Certains pour améliorer leur scorring utilise des mots comme sexe, etc. Générateur de mots clés Site en Français Résultats pour le mot Formation Liste des mots clés les plus utilisés sur Lycos Créer votre liste de mots clés Théoriquement chaque page devrait avoir des mots clés différents Ne pas oublier de visualiser le code source de vos concurrents pour voir leurs mots clés Méthodologie de référencement Comprendre la différences entre annuaire et moteurs de recherche. Tout d'abord, avant de mettre en place une stratégie de référencement, il faut bien comprendre comment fonctionnent les outils de recherche, ainsi que les différences fondamentales entre les différents outils disponibles, notamment les annuaires et les moteurs de recherche Comprendre le fonctionnement de chaque outils de recherche. Puisque vous connaissez maintenant le fonctionnement général de ces outils, allez faire un tour sur les fiches descriptives des principaux annuaires et moteurs de recherche francophones pour tout savoir sur leurs fonctionnalités. Google Optimisation des pages en fonction Une fois les bases acquises, il vous faut optimiser les pages web de votre site, en fonction des critères de pertinence des moteurs, et surtout faire en sorte qu'aucun facteur bloquant n'entrave le futur référencement de votre site. Balise meta Balise Méta Soignez tout particulièrement les titres de vos pages (balise <TITLE>) ainsi que leur texte visible. Mettez en place des balises Meta soignées et optimisées. Si vous ne désirez pas créer vous-même ces balises Meta, un générateur automatique peut le faire à votre place. Information Pour obtenir un bon référencement sur les moteurs de recherche, il est encore parfois nécessaire de renseigner au mieux ce que l'on appelle les balises <META> de vos pages Web. Dans le langage HTML qui permet de bâtir les pages Web, les balises <META> permettent d'indiquer aux moteurs de recherche un certain nombre d'informations sur le contenu d'une page. Le terme Meta signifie Metadata. Ces balises signalent donc de l'information sur l'information. Signalons, pour commencer et pour être très clair, que les balises <META> n'ont un effet que sur les moteurs de recherche (Googlle, Altavista, Lycos, Hotbot, Voila...). Les annuaires (Yahoo!, Nomade, Snap, Looksmart, Open Directory...) ne les prennent aucunement en compte puisqu'ils sont construits par des êtres humains qui ne vont jamais regarder le code HTML de vos pages, au contraire des "spiders" (ou araignées ou robots ou crawlers) des moteurs qui viennent "aspirer" ce code pour le copier sur leurs disques et en faire un index de recherche par la suite. Exemple de balise meta <HTML><Head> <title>MEDIAFORM Centre de formation bureautique et Informatique (Windows, Word, Excel, Access, Works, Frontpage). Location de salle et d'ordinateurs</title> <meta Name="description« Content="(Lille, Nord) Agence de formation informatique et bureautique créé en 1984. Nous avons formé plus de 12128 stagiaires en Windows, Word, Excel, Access, Internet, Intranet. Pour les entreprises, particuliers et enfants. Programmation et développement de logiciels. Spécialiste de l'audit, cahier des charges. Organisation de séminaires informatiques au Maroc pour les décideurs. Location et vente de matériel."> <meta Name="keywords" Content="Formation, bureautique, Windows, Window, Word, Excel, Access, Internet, PowerPoint, Power Point, Outlook, Express, Dreamweaver, Flash, Golive, Indesign, Ms Project, Msproject, Illustrator, Photoshop, Gimp, Linux, Initiation, OpenOffice, Location, ordinateur, Maintenance, Depannage, Dépannage, Lille, Nord, Formateur, Iprogress, ENI, Tutorat, MP3, office, microsoft, adulte, salle, traitement, texte, Retraite, Retraité"> <meta NAME="Author" CONTENT="MEDIAFORM Dominique REVERTEGAT"> <meta NAME="Identifier-URL"="http://www.mediaform.fr.st"> <meta NAME="Date-Creation-ddmmyyyy" CONTENT="01011996"> <meta NAME="Reply-to" CONTENT="[email protected]"> <meta NAME="revisit-after" CONTENT="3 days"> <meta NAME="Copyright" CONTENT="Mediaform (c) 1996-2006"> <meta NAME="robots" CONTENT="All"> </Head> Création de vos balises meta keywords Ne pas oublier de visualiser le code source de vos concurrents pour voir leurs balises méta. Création de votre balise title et description Ne pas oublier de visualiser le code source de vos concurrents pour voir leurs balises méta. Le fichier robot.txt Le fichier robot.txt contient les pages qui ne doivent pas être indexées par le robot. Toutes les pages du site sont "indexables" par les moteurs de recherche. Les pages avec des FRAMES, les pages DYNAMIQUES, les pages avec animation FLASH, ne sont pas intéressante à indexer. En cas de moteur interdisant le spam, ne pas présenter la page spammer Il se présente sous la forme d'un fichier texte (d'où l'extension txt), et doit pèser moins de 1 Ko. Il se positionne à la racine du site, sur le serveur. Exemple : http://home.nordnet.fr/~drevertegat/robots.txt. Il n'en faut qu'un, inutile d'en mettre dans chaque répertoire. Contenu : Il faut indiquer ici les pages qui ne doivent pas être visitées par les robots des moteurs.: User-agent: * Disallow: /site2/ Disallow: /cv/ La ligne "User-agent : *" indique que tous les moteurs sont concernés. La ligne "Disallow : /images/" interdit l'accès des moteurs à tout le répertoire images, toutes les pages sous celui-ci ne seront pas indexées. Les balises de remplacement Cette technique n'est pas obligatoire, vous pouvez aussi utiliser la balise méta suivante : <metaname="robots" content="noindex, follow"> n'indexe pas la page, suit les liens <metaname="robots" content="noindex, nofollow"> n'indexe pas la page, ne suit pas les liens <metaname="robots" content="index, follow"> indexe la page, suit les liens <metaname="robots" content="index, nofollow"> indexe la page, ne suit pas les liens. Utiliser cette balise pour rediriger une page vers une autre page <meta http-Equiv="refresh" content ="2;url=http://Url de votre page"> Le spamindexing Certains vont privilégier le titre de la page, la plupart le texte, d'autres les mots-clefs, de plus en plus la totalité. Une parfaite connaissance de ces méthodes peut entraîner des abus. Exploiter les moteurs en réalisant des pages "suradaptées" à leur méthode s'appelle le "spamindexing". • Exemple : je sais qu'un moteur de recherche porte beaucoup d'importance au nombre de fois où le mot est cité dans le titre : le titre de ma page va être : Formation – Formation entreprise – Formation adulte. Au début il suffisait d'écrire le texte en très petit et de la même couleur que le fond. Cela permettait de placer des mots-clefs sur toute la page sans gêner le visiteur. Méthode théoriquement inutile maintenant car les moteurs analysent de plus en plus le code HTML (mais ce ne sont que des robots ) Exemple <font color="#FFFFFF">blanc</font> et le fond de page donne <body bgcolor="#FFFFFF"> les 2 valeurs sont identiques. Vérification du référencement Vérification du référencement Soumettre un site n'est pas, hélas, synonyme d'inscription dans les bases de données des outils de recherche. Toutes les 3 à 4 semaines, il vous faut sur les annuaires et moteurs majeurs uniquement - vérifier la présence de votre site grâce à l'interface manuelle. Lors de vos phases d'optimisation et de référencement, suivez toujours la charte de qualité et de déontologie édictée par l'IPEA et validée par les annuaires et moteurs francophones majeurs. Les moteurs de recherche sont également de plus en plus sensibles à l'indice de popularité des sites (le nombre de liens depuis le Web vers vos pages (pagerank)). Calculez le vôtre et augmentez-le en faisant une large campagne d'échange de liens avec des sites "cousins" (complémentaires mais non concurrents). Révision du référencement Une fois que votre site est inscrit partout , faites, tous les trimestres ou tous les semestres, une "révision" du référencement : vérifiez que votre site est présent partout et, dans le cas contraire, refaites une phase de soumission grâce à l'interface manuelle. Votre site est maintenant bien référencé. Tenez-vous au courant de l'actualité des outils de recherche, lisez leurs communiqués de presse, et tout se passera bien. Mais surtout, rappelez-vous bien que le meilleur facteur de création de trafic reste le contenu de votre site web. Un bon référencement peut certes drainer des milliers de visiteurs sur vos pages, mais le meilleur moyen de les faire rester et, mieux, revenir, est de répondre à leurs attentes. Même un bon référencement ne peux rien contre un site creux... Et fidéliser un internaute déjà venu est plus rentable que de tenter d'en capturer un nouveau. F) Les statistiques Fidéliser les visiteurs de votre site. Pour que votre site devienne une référence, vous devez inciter les visiteurs à revenir par l’annonce de futurs événements ou prestations, en préciser les dates et vous y tenir. Rendez votre site attractif Journal défilant, jeux en ligne, trucs et astuces Mentionnez votre site web sur toutes vos correspondances. Votre site Web est devenu un des élément de votre stratégie marketing et de la communication de votre structure en général. Vous devez donc mentionner son existence sur vos cartes de visites, votre papier à en-tête, vos brochures et dépliants, etc. Utilité des compteurs Nécessité d'un compteur pour connaître le nombre de visiteurs de votre site, les pages consultées, et le temps passé. A partir de ces chiffres, vous pouvez créer une base de données personnelle sur les visiteurs de votre site. Notez que votre hébergeur est censé vous donner des statistiques de fréquentations ; elles peuvent cependant être truquées afin de vous obliger à laisser votre web chez lui. De plus, les chiffres retournées sont souvent des hits (requêtes) et non des visites. 2000 hits peuvent très bien signifier 20 visites ! Compteur public Ils proviennent d'autres sites Web qui se consacrent à ce service.Ils se limitent à donner le nombre de visiteurs de votre site Web sur une ou deux pages. Contre ces informations gratuites, vous devez faire paraître un lien de retour avec ces sites. Leur installation est très simple, vous avez besoin de très peu de connaissances en HTML et d'aucun matériel ou logiciel précis. Il vous suffit de copier et coller quelques lignes HTML pour le mettre en marche. Le grand avantage de ces compteurs est qu'ils vous donnent en général une liste des pages les plus populaires et leurs liens. Cela donne aux visiteurs une idée du succès de votre site, tout en faisant sa publicité gratuitement. Ces compteurs publics restent quand même intéressants car gratuits et faciles d'utilisation. Création d’un compteur public Un des plus connu HITPARADE On s’incrit (tout en bas de la page – proposer un site / Inscription) Répondre aux questions et faire un copier coller d’un morçeau de code dans votre page index <A HREF="http://www.hit-parade.com/hp.asp?site=19563" TARGET="_top"> <IMG SRC="http://logp.hit-parade.com/logohp1.gif?site=p19563" Title="Hit-Parade des sites francophones" WIDTH="77" HEIGHT="15" BORDER="0"></A> Résultat des statistiques Classement sites Pros Statistiques sur le mois Compteur privé Vous les installez vous-même ou votre provider le fait en utilisant votre propre logiciel. Certains providers vous fournissent ce service et parfois même les instructions pour les logiciels et l'installation de ces compteurs. Ces compteurs peuvent se révéler d'utilisation aussi simple que celle des compteurs publics ou alors très sophistiquée avec des techniques d'analyse très profondes. Les visites de votre site sont en général toutes comptabilisées. Souvent gratuits, ils vous donnent les informations concernant les pages visitées : qui l'a fait, à quelle heure et quel jour, le browser utilisé, quel site Web les a amené vers le vôtre.. Vous pouvez facilement conserver ces données pour les analyser plus tard. Un compteur de visites chez NordNet Pour utiliser un compteur dans vos pages, voici la marche à suivre : La page qui contiendra le compteur devra porter l'extension ".shtml" (exemple : index.shtml). Insérez la ligne suivante dans votre page HTML entre les balises <body> et </body> (respectez bien l'orthographe, les espaces, etc) : <!--#exec cgi="/cgi-bin/compteur/compteur.pl" --> Cette instruction aura pour effet d'incrémenter votre compteur à chaque passage sur cette page. Pour afficher le compteur, insérez la ligne suivante dans votre page HTML entre les balises <body> et </body> (respectez bien l'orthographe, les espaces, etc) : <!--#exec cgi="/cgi-bin/compteur/affiche_compteur.pl" --> Le compteur utilise ses propres images de chiffres par défaut. Cependant, vous pouvez utiliser les vôtres. Pour cela, créez à la racine de votre site un dossier nommé compteur. Placez alors vos images dans ce dernier. Notez que celles-ci doivent être au format GIF et qu'elles doivent s'appeler : 0.gif, 1.gif, 2.gif, ..., 9.gif Les outils d’analyse des fichiers log Des logiciels tels que Webtrends vous permettent d'analyser les fichier "log" généré par votre site sur le serveur qui l'héberge. De tels logiciels pourront vous donner des détails précis sur : – – – – le nombre de visiteurs le nombre de pages vues les pages les plus/les moins populaires l'origine géographique (par le biais du nom de domaine) l'origine web des visiteurs (ex: yahoo par la catégorie commerce/économie ) .... C'est donc le moyen le plus puissant de qualifier qualitativement et quantitativement l'audience d'un site. Ce service est payant G) La maintenance La maintenance doit être faite en ligne. IL est conseillé de noter (dans une base de données) les problèmes rencontrés – – – – Liens morts ou mauvais aiguillage Mauvais affichages Mauvais fonctionnement d’un script etc Faire les corrections une fois par mois, et non pas à chaque fois qu’un problème survient. 3) Les aspects juridiques Site de la CNIL pour la déclaration d’existante d’un site Internet Propriété intellectuelle Aspects juridiques de l’hébergement Je monte un site Internet Ce qu’il faut respecter sur Internet, c’est les droit relatifs à la protection des données à caractère personnel à l'égard des traitements informatiques. On entend par donnée à caractère personnel toute information relative à une personne physique identifiée ou susceptible de l’être numéro d’identification (ex : n° de sécurité sociale) initiales du nom et du prénom avec recoupement d’informations de type : date de naissance commune de résidence éléments biométriques…) Diffusion des informations relatives à des personnes Diffuser une information sur internet, c’est la rendre accessible à quiconque, sans pouvoir réellement maîtriser son utilisation. Une telle diffusion doit donc respecter la vie privée des personnes concernées. Dans le cas de sites professionnels, associatifs, blogs, etc, pour diffuser des données relatives à des personnes qui appartiennent ou sont en relation avec votre entreprise, votre université, votre collectivité territoriale, votre administration, votre association, vos activités, votre entourage, etc, il faut : – Faire part de votre projet aux personnes concernées et les informer qu'elles peuvent s'opposer, partiellement ou totalement, à cette diffusion sur internet. – La CNIL recommande que l'accord des personnes soit recueilli préalablement à toute diffusion sur Internet de données les concernant mais vous pouvez aussi, avant cette diffusion, les informer que leur accord sera réputé tacitement acquis en l'absence de réponse de leur part au delà d'un certain délai (1 mois, par exemple). Vous devez également informer les personnes concernées qu'elles pourront vous demander ultérieurement, à tout moment, de cesser la diffusion sur votre site des informations qui les concernent. Diffusion des informations relatives à des personnes Si vous envisagez de diffuser l’image d’une personne, vous devez au préalable recueillir l’accord exprès de la personne concernée. Notez bien que la diffusion d’informations relatives à des mineurs, et notamment leur photographie, ne peut s’effectuer qu’avec l’autorisation expresse des parents. Du fait de leur sensibilité, les données qui font apparaître les origines raciales ou ethniques, les opinions politiques, philosophiques, religieuses ou celles qui sont relatives à la santé ou à la vie sexuelle n’ont pas vocation à être diffusées sur Internet. Vous devez, par ailleurs, informer les personnes concernées de l'existence et des modalités d'exercice du droit d'accès aux informations qui les concernent et du droit de les faire modifier (changement de nom, d'adresse, de fonctions, etc.), rectifier (en cas d'erreur) ou supprimer. Courrier pour diffusion d’informations personnelles Monsieur, Nous envisageons de diffuser prochainement sur notre site Internet www.mediaform.fr.st des informations vous concernant dans le cadre de votre présentation dans la liste de nos formateurs. Ces informations sont les suivantes : Toutes les informations que vous nous avez transmise sur votre CV d’embauche Compte tenu des caractéristiques du réseau Internet que sont la libre captation des informations diffusées et la difficulté, voire l'impossibilité, de contrôler l'utilisation qui pourrait en être faite par des tiers, nous vous informons que vous pouvez vous opposer à une telle diffusion. Pour que nous puissions prendre en compte votre refus, contactez-nous. Attention! En l'absence de réponse de votre part dans un délai d'un mois à compter de la réception de cette lettre d'information préalable, votre accord sera réputé acquis. Vous pourrez toutefois nous faire part ultérieurement, à tout moment, de votre souhait que la diffusion de vos données sur Internet cesse. Nous vous rappelons que vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données qui vous concernent. Pour exercer ce droit, adressez-vous à : Monsieur Dominique Revertegat 20 Rue Faidherbe 59700 Marcq en Baroeul Mon site collectera des informations relatives à des personnes Il se peut que votre site ne diffuse pas d'informations personnelles. En revanche, il est assez rare qu'un site Internet ne collecte aucune information relative à ses utilisateurs. Le plus souvent, en effet, le sites Internet sont destinés à être interactifs et permettent aux utilisateurs, par exemple, d'écrire au responsable du site, de se faire connaître de lui, de discuter autour de thèmes qu'il aura déterminés, etc. Toutes ces opérations permettent la collecte de données relatives aux visiteurs du site (adresse électronique, nom, adresse, etc.). Si votre site est appelé à collecter de telles informations, vous devez informer les personnes du caractère facultatif ou obligatoire des réponses qu'elles sont invitées à fournir, ainsi que de l'existence et des modalités d'exercice du droit dont elles disposent d'accéder aux informations qui les concernent, de les faire modifier, rectifier ou supprimer. Les personnes doivent également savoir à qui sont destinées les informations fournies. La durée de conservation des données collectées doit être déterminée et être en relation avec l’utilisation qui en sera faite. En tout état de cause, les personnes peuvent vous demander à tout moment de supprimer les données qu’elles auront fournies. Si vous envisagez de transmettre à des tiers à des fins de prospection commerciale les adresses électroniques collectées, il convient d’en informer les personnes et d’obtenir leur accord. Exemples pouvoir se dés inscrire Inscription a la newsletter de la CNIL Inscription par Email Le courrier suivant est reçu quelques minutes après : Vous avez demandé à être destinataire de la lettre Info CNIL. Pour que votre abonnement soit pris en compte, cliquez sur le lien ci-dessous : http://www.cnil.fr/index.php?id=14&type=0&uid=22364&auth=b72f3c38&appr=1 Vous pourrez, à tout moment, supprimer votre abonnement en cliquant sur le lien ci-dessous : http://www.cnil.fr/index.php?id=14&type=0&cmd=edit&aC=563feeed&rU=22364 Exemples formulaire de saisie Les champs obligatoires sont suivis d’un astérisque Exemple 2 suite J'exploiterai les données de connexion au site Les données relatives aux consultations effectuées par les visiteurs de votre site (date, heure, adresse Internet, protocole de l'ordinateur d’un visiteur, page consultée) permettent à la fois la détection d’éventuelles intrusions informatiques et l’estimation de la fréquentation de votre site. Les mesures sont, le plus souvent, effectuées quotidiennement, notamment par l’hébergeur de votre site. La durée de conservation de ces données doit être proportionnée à la finalité de leur traitement. Il vous incombe donc, y compris lorsque votre site est hébergé par un prestataire, de déterminer la durée de conservation des données de connexion au site. Ainsi, vous pouvez supprimer les données relatives aux connexions effectuées au cours d’une semaine lorsque le nombre de visiteurs a été déterminé. Mon site comportera des espaces de discussion Il est de votre intérêt de maîtriser les sujets de discussion et les contributions figurant sur votre site, afin d'éviter toute mise en cause de votre responsabilité fondée sur les propos tenus par certains utilisateurs ou les sujets de discussion qu'ils abordent (ex : pédophilie, incitation à la violence, à la haine raciale, négationnisme, etc). Ce contrôle peut se comparer au choix qu'un rédacteur en chef de journal est fondé à faire, au titre de sa responsabilité éditoriale, dans la rubrique du "courrier des lecteurs" de son journal. Ainsi, vous pouvez mettre en place un modérateur qui supprimera, avant sa diffusion sur Internet, toute contribution susceptible d'engager votre responsabilité civile ou pénale ou portant atteinte à la considération ou à l'intimité de la vie privée d'un tiers. Vous devez informer les visiteurs de ces espaces de discussion de leur finalité, de l’interdiction qui leur est faite de collecter et d’utiliser à des fins commerciales les données personnelles figurant dans ces espaces, de leurs règles de fonctionnement et, lorsque tel est le cas, de l'existence d'un modérateur intervenant préalablement à la diffusion des contributions sur le site. En outre, vous devez informer les personnes concernées de l'existence et des modalités d'exercice du droit d'accès et de rectification ainsi que de leur droit de demander à tout moment la suppression des contributions nominativement diffusées dans le cadre des espaces de discussion du site. Espace de discussion. Exemple de mention d’information en cas d’existence d’un modérateur : « Un modérateur est susceptible de supprimer, préalablement à sa diffusion, toute contribution qui ne serait pas en relation avec le thème de discussion abordé, la ligne éditoriale du site, ou qui serait contraire à la loi. » Exemple de mention d’information relative au droit d’accès : « Vous disposez d'un droit d'accès, de modification, de rectification et de suppression des données qui vous concernent. Vous pouvez, à tout moment, demander que vos contributions à cet espace de discussion soient supprimées. » CONTACT : [indiquez ici l'adresse où les contributeurs peuvent exercer leur droit d'accès et de rectification] Exemple Charte des opérateurs de Voila Modérateur humain Modérateur robot Mon site permettra de faire des achats en ligne La collecte en ligne de coordonnées bancaires destinée à réaliser une transaction commerciale portant sur un produit physique ou numérique ou sur un service, doit comporter des procédés efficaces et licites de sécurisation des paiements, destinés à empêcher un tiers non autorisé d'intercepter ces données, d'y accéder, de les déformer ou de les détourner, notamment à son profit. Il faut que la transaction soit sécurisée : Mon site comportera d’autres procédés de collecte de données Certains procédés, tels que les “cookies” (permettant à un site d’enregistrer des informations dans l’ordinateur d’un utilisateur) ou les applets Java (programme exécuté à la demande d’un site par le navigateur d’un utilisateur) permettent de collecter des données. De tels procédés ne peuvent pas être mis en oeuvre à l’insu des personnes. La plupart des logiciels de navigation permettent désormais aux personnes de refuser la mise en oeuvre de ces techniques dans leur machine. Ainsi, il convient, en cas de recours à ces procédés, d’informer les personnes de leur objet et de la faculté dont elles disposent de s’y opposer. Les Cookies Programme qui permet sur le site MEDIAFORM d’incrémenter un compteur de visite sur la page de l’internaute. Contenu du cookies MEDIAFORM8home.nordnet.fr/~drevertegat/16002008983042995890144499320029812050* Programmes gérant les cookies Espionnez vos cookies Télécharger et Installez le logiciel, Ouvrez une page Web, faite un clic droit, prendre voir les cookies Exemple de visualisation Gérer vos cookies Cookies manager Un sous-traitant réalisera, hébergera ou gérera mon site Si vous créez un site personnel, par exemple sous forme de blog, vous pouvez recourir aux services d’une plate-forme d’hébergement qui dispose d’un règlement ou d’un contrat précisant les conditions d’utilisation du service. Dans le cas où vous auriez recours à une société d’hébergement spécialisée, vous devez veiller à ce que le contrat que vous signez avec cette société couvre entièrement et exclusivement les missions que vous lui assignez. – Vous pouvez simplement charger votre sous-traitant d'héberger votre site sur ses matériels. Vous pouvez également lui demander de concevoir votre site pour votre compte. Vous pouvez, enfin, le charger de gérer le quotidien de votre site et notamment les relations du site avec les utilisateurs ou les problèmes de sécurité dont votre site pourrait faire l'objet (intrusions, piratages, violation de droits d'auteur, etc.). Votre sous-traitant, en tant que professionnel, a un devoir d'information et de conseil à votre égard. Même si les aspects techniques de la réalisation de votre site vous échappent, il vous appartient de veiller à ce que le contrat conclu avec votre sous-traitant l'engage à prendre toutes les mesures nécessaires pour assurer la sécurité informatique des données traitées sur le site. Ce contrat doit également prévoir que votre sous-traitant sera soumis à une obligation de confidentialité à l'égard des données qu'ils est amené à connaître dans l'exercice de ses missions. Ces précisions visent toutes les catégories de données personnelles. Si votre sous-traitant est chargé d'assurer au quotidien les relations entre votre site et les utilisateurs, vous pourrez convenir qu'il répondra aux demandes d'accès des utilisateurs aux informations qui les concernent. Le contrat doit prévoir le sort qui sera réservé aux données personnelles traitées dans le cadre de votre site. Il est de votre intérêt de prévoir dans le contrat d’hébergement l’interdiction faite à votre hébergeur d’utiliser pour son propre compte ou de communiquer à des tiers les données à caractère personnel traitées dans le cadre de votre site. En effet, une telle utilisation par votre hébergeur de telles données à l’insu des personnes concernées vous exposerait aux sanctions prévues par l’article 226-22 du code pénal (permettre l’accès à des données par un tiers non autorisé). Les formalités a accomplir auprès de la cnil Lorsqu’un site web diffuse ou collecte des données à caractère personnel, il doit être déclaré à la CNIL. Toutefois, les sites web mis en oeuvre par des particuliers dans le cadre d’une activité exclusivement personnelle sont dispensés de déclaration. A l’inverse, la diffusion et la collecte de données à caractère personnel à partir d’un site web dans le cadre d’activités professionnelles, politiques ou associatives restent soumises à l’accomplissement des formalités prévues par la loi. Dans le souci de vous faciliter les formalités à accomplir, la CNIL met à votre disposition une télédéclaration adaptée aux sites web et disponible en ligne sur le site http://www.cnil.fr. Voir le site : http://www.cnil.fr/index.php?id=1545 4) Etude de cas 6) Quelques chiffres 1 30 % .des Français ont payé leurs impôts par internet. Selon une enquête TNS, 30 % des Français ont opté pour le paiement des impôts en ligne, contre 15 % il y a deux ans. 28-09-2006 87,3 % d’internautes connectés à domicile en haut débit. C’est le pourcentage d’internautes connectés à domicile en haut débit en juillet 2006, soit 18 647 000 personnes. Cela représente une augmentation de 5 432 000 par rapport à juillet 2005 (+ 41 %) 19-09-2006 45 ans de consommation des ménages en TIC. Selon l’INSEE, entre 1960 et 2005, la part des TIC (Technologies de l’information et de la communication) dans le budget des ménages est passée de 1,3 % à 4,2 %. 12-09-2006 27 millions d’internautes de plus de 14 ans en France. C’est le nombre d’internautes de plus de 14 ans en France selon Ipsos, soit plus d’un Français sur deux. Les connexions à internet se font à 84 % depuis la maison et 38 % depuis le lieu de travail. 5-09-2006 Quelques chiffres 2 611 061 noms de domaine en .fr. C’est le nombre de noms de domaine en .fr enregistrés par l’AFNIC en août 2006. 25-08-2006 51,5 % des foyers sont équipés d’un micro-ordinateur. Au deuxième trimestre 2006, 51,5 % des foyers français sont équipés d’un micro-ordinateur. 8-08-2006 10 millions de foyers français sont équipés d’une connexion internet à domicile. En juin 2006, plus de 10 millions de foyers français sont équipés d’une connexion internet à domicile. 1er-08-2006 5e place de la France concernant le pourcentage des services entièrement disponibles en ligne. Le développement de l’administration électronique a permis à la France d’apparaître en 2006 comme une véritable “puissance électronique” dans l’Union européenne, passant de la 10e à la 5e place concernant le pourcentage de services entièrement disponibles en ligne. 25-07-2006 Quelques chiffres 3 13,4 millions d’internautes ont déjà effectué des achats en ligne. C’est le nombre d’internautes ayant déjà effectué des achats en ligne s’élève au quatrième trimestre 2005, soit 40 % de plus qu’en 2004. A la mi-2005, la France se trouvait au troisième rang européen en la matière, derrière l’Allemagne (25 millions) et le Royaume-Uni (21 millions). 18-07-2006 51 % des 15-19 ans ont crée un blog. C’est le nombre de jeune de 15 à 19 ans qui ont crée un blog, contre seulement 9 % chez les internautes de plus de 25 ans. 11-07-2006 Système d'exploitation des postes de travail du grand public français Système d'exploitation août 2006 juin 2006 Evolutio n Windows XP 85,6% 84,6% +1,0% Windows 2000 5,5% 6,1% -0,6% Windows 98 2,3% 2,7% -0,4% Windows Me 0,8% 0,9% -0,1% Windows NT 0,3% 0,4% - MacOS 3,5% 3,6% -0,1% Linux 0,4% 0,3% +0,1% Autres 1,6% 1,5% +0,1% Système d'exploitation des postes de travail des professionnels français Système d'exploitation août 2006 juin 2006 Evolution Windows XP 79,7% 76,1% +3,6% Windows 2000 5,9% 6,7% -0,8% Windows NT 4,7% 4,7% - Windows 98 1,7% 1,9% -0,2% Windows Me 0,6% 0,5% +0,1% MacOS 2,8% 3,2% -0,4% Linux 1,1% 1,2% -0,1% Autres 3,5% 5,7% -2,2% Navigateurs utilisés par le grand public français Produit août 2006 juin 2006 Evolution Internet Explorer 81,2% 81,5% -0,3% Mozilla/Firefox 14,8% 14,6% +0,2% Safari 2,5% 2,5% - Netscape 0,2% 0,3% -0,1% Opera 0,2% 0,2% - Autres 1,1% 0,9% +0,2% Navigateurs utilisés par les professionnels français Produit août 2006 juin 2006 Evolution Internet Explorer 74,2% 70,4% +3,8% Mozilla / Firefox 20,1% 21,4% -1,3% Safari 1,8% 2,0% -0,2% Netscape 0,7% 1,0% -0,3% Opera 0,4% 0,4% - Autres 2,8% 4,8% -2,0% Les (plug-in) installées sur les postes des internautes en 2005 Rang Produit Part 1 Flash 98,3 % 2 Java 87,6 % 3 Acrobat Reader 87,1 % 4 QuickTime 62,1 % 5 RealOne 60,8 % 6 Shockwave 54,1 % 7 ViewPoint MediaPlayer 50,9 % 8 SVG 13,5 % Résolution des écrans des postes de travail dans le monde Rang Taille 2006 2005 1 1024 x 768 56,15 % 57,38 % 2 1280 x 1024 15,79 % 14,18 % 3 800 x 600 12,04 % 18,23 % 4 1280 x 800 4,09 % 1,56 % 5 1152 x 864 3,90 % 4,95 % Internautes dans le monde Nombre d'internautes en millions Progression 2004 934 -- 2005 1.070 + 14,6 % 2006 1.210 + 13,1 % 2007 1.350 + 11,6 % Année Classement des outils de recherche Annuaire seul Outils mixtes Moteur de recherche Utilisateur débutant 1 Yahoo France Yahoo France Google 2 Nomade.fr Nomade.fr Voila et Alltheweb 3 Guide de Voila Guide de Voila -- Utilisateur avancé 1 Nomade.fr Nomade.fr Alltheweb 2 Yahoo France Yahoo France Hotbot France 3 Guide de Voila Guide de Voila Google Autres chiffres Lieu de connection Les abonnés Les profils Les usages Les jeunes internautes