Ecrire et publier sur le Web

1. Ecrire et publiersur le Web Création de site web - Club Informatique Saintongeais www.infoweb17.fr

2. Année 2006 : des internautes français de plus en plus nombreux et très actifs … Création de site web - Club Informatique Saintongeais

3. Le nombre de créateurs de blogs à doublé en 2006 : un succès sans précédent ! Création de site web - Club Informatique Saintongeais

4. Plan général • L’internet et Le web • Une page web - Un site web • Quelques définitions • Les architectures générales • Les pages web créées « en local » (statiques) • Le pages web générées dynamiquement • Les Blogs • Les sites perso «en mode local» • Les sites perso «en mode dymamique» Création de site web - Club Informatique Saintongeais

5. Internet : c’est Quoi ? • Internet (InterNetwork) est le réseau informatique mondial reposant sur un système d’adresses TCP/IP (Transmission Contrôle Protocole/Internet Protocol), chaque ordinateur ayant une adresse IP unique (origine : Cf. ARPANET / USENET des années 70) • Un réseau des réseaux pour gérer des Services de transports d’information selon différents protocoles de communication : • FTP pour le transfert de fichiers, (démarrage en 1971) • SMTP pour envoyer des e-mails, (courrier électronique en 1972) • HTTP pour les sites web Exemple : http://www.google.fr(1989) • HTTPS pour le web en mode sécurisé, • ICQ pour dialoguer en ligne, • NNTP pour accéder aux forums de discussion, • P2P pour partager des fichiers, • SSH pour la sécurité, • Et bien d’autres : IRC, NTP etc… Création de site web - Club Informatique Saintongeais

6. Le Web : c’est Quoi ? info • Le Web est l’un des services sur internet, un système hypertexte qui permet de consulter avec un navigateur Web, tous les contenus de pages Web mises en ligne dans les sites Web au niveau mondial, • Le Web est une abréviation de World Wide Web WWW (la toile mondiale) créé en 1989 par Tim Berners-Lee, informaticien au CERN en Suisse, • L'idée de base du WWW était de combiner les technologies des ordinateurs personnels, des réseaux informatiques et de l'hypertexte en un système d'information mondial, puissant et facile à utiliser. Création de site web - Club Informatique Saintongeais

7. Une Page Web : c’est Quoi ? info • C’est l’unité de consultation du Web, un document informatique composé de texte exclusivement (100% en mode « Caractères ») contenant : • Le texte vu par les internautes, • Le texte des marques de format (Balises) servant à formater le contenu de la page vue par les internautes, et le texte des hyperliens pour intégrer les ressources (son, images, vidéo) respectant les Langages connus des navigateurs (Nescape, IE, Firefox,…) : HTML, XHTML, XML, CSS, JAVA, PHP, SCRIPTS, etc… HTML = Hypertext Markup Language Création de site web - Club Informatique Saintongeais

8. Un site Web : c’est Quoi ? info • Un ensemble de ressources stockées chez un Hébergeur : • des pages web, • des fichiers multimédia : images, son, vidéo,… • des logiciels sur serveur et des bases de données • On distingue les sites avec des pages web créées en modes : • statiques : les pages web sont créées par des éditeurs HTML en local, • dynamiques : les pages web sont générées chez l’hébergeur (Blog, CMS) CMS = Content Management System = système de gestion de contenu en ligne Création de site web - Club Informatique Saintongeais

9. L’adresse d’un site Web : c’est Quoi ? • L'adresse d'un site web, souvent désignée par le sigle URL (Uniform Resource Locator) indique généralement : le protocole d'accès (http, ftp), le nom du serveur, le nom du domaine et sous-domaine, et parfois, le nom du fichier et l’extension du document. • Exemple : http://www.infowbeb17.fr • http : protocole du Web • www : serveur web • infoweb17 : nom enregistré chez un « registar » • fr : domaine – abréviation du pays (France) Création de site web - Club Informatique Saintongeais

10. L’adresse d’une Page Web : c’est Quoi ? • L’URL identifie de manière unique l'emplacement d'un ordinateur, d'un répertoire, d'un fichier, d’un paragraphe d’une page web sur Internet. • Exemple : http://infoweb17.free.fr/Meteo.htm#Les_prévisions_météo_dans_quelques_villes • http : le protocole du Web • infoweb17 : le nom du site • free.fr : l’hébergeur de la page • Meteo.htm : le nom de la page web • #Les prévisions météo… : l’ancre du paragraphe Création de site web - Club Informatique Saintongeais

11. Les principaux acteurs du web L’Hébergeur du site stocke ou génère les Pages web Le Webmaster créateur du site web L’internaute consulte, achète, réagit aux forums… Création de site web - Club Informatique Saintongeais

12. Un site Web avec Pages créées en local Hébergeur du site Publie les pages web chez l’hébergeur avec un logiciel FTP Télécharge et visualise les pages web avec son navigateur Fabrique les pages web avec son Editeur Le créateur du site L’internaute Création de site web - Club Informatique Saintongeais

13. Un site Web avec Pages générées en dynamique Les serveurs de l’hébergeur génèrent en dynamique les pages web demandées par l’internaute Alimente une base de données en ligne chez l’hébergeur avec un outil d’administration du site (CMS) Télécharge et visualise les pages web avec son navigateur Le créateur du site L’internaute Création de site web - Club Informatique Saintongeais

14. La création d’un « Blog » Création de site web - Club Informatique Saintongeais

15. Le « Blog » : site perso facile Apparus fin 1997 aux USA, journal intime, coup de gueule ou sélection de l'actualité, les weblogs ou blogs sont un type de site perso. Ils se sont vraiment développés après le 11 septembre 2001, grâce à la facilité de création et de publication en ligne. • On distingue différents usages : • Le blog introspectif : journal perso… • Le blog d’opinion : militantisme… • Le blog pro/techno : thèmes divers • Le blog à part : ovni du web Création de site web - Club Informatique Saintongeais

16. Les principaux outils en ligne Comparatif des outils disponibles sur le web : Création de site web - Club Informatique Saintongeais

17. Créer un Blog en quelques clicsinfo Exemple : en ligne sur le site www.oldiblog.com/ 1 – Saisir le nom du site 2 – S’inscrire 3 – Paramétrer les services 4 – Remplir le site Résultat : un nouveau site : INFODUWEB Création de site web - Club Informatique Saintongeais

18. Créer un Blog avec Oldibloginfo S’inscrire Création de site web - Club Informatique Saintongeais

19. Créer un Blog en quelques clicsinfo S’inscrire Création de site web - Club Informatique Saintongeais

20. Créer un Blog avec Oldibloginfo Remplir le site Création de site web - Club Informatique Saintongeais

21. Créer un Blog en quelques clicsinfo Remplir le site Création de site web - Club Informatique Saintongeais

22. Créer un Blog en quelques clicsinfo Aperçu avant envoi Création de site web - Club Informatique Saintongeais

23. Créer un Blog en quelques clicsinfo Design 1 Création de site web - Club Informatique Saintongeais

24. Créer un Blog en quelques clicsinfo Choix du design Par l’internaute Création de site web - Club Informatique Saintongeais

25. Créer un Blog en quelques clicsinfo Choix du design Par l’internaute Création de site web - Club Informatique Saintongeais

26. Créer un Blog en quelques clicsinfo Choix du design Par l’internaute Création de site web - Club Informatique Saintongeais

27. Créer un Blog en quelques clicsinfo Choix du design Par l’internaute Création de site web - Club Informatique Saintongeais

28. Créer un Blog en quelques clicsinfo Choix du design Par l’internaute Création de site web - Club Informatique Saintongeais

29. Créer un Blog en quelques clicsinfo Choix d’une radio Par l’internaute Création de site web - Club Informatique Saintongeais

30. Créer un Blogue quelques clicsinfo Choix d’une radio Par l’internaute Création de site web - Club Informatique Saintongeais

31. La création d’un site perso classique(Pages HTML en mode local) Création de site web - Club Informatique Saintongeais

32. Les étapes pour créer un site webinfo • Les objectifs : se vendre (cv), informer, vendre… • Le choix du public : jeunes, seniors, hobby,… • Le choix du contenu : selon centre d’intérêt • Le choix de la forme : navigation, charte graphique,… • L’ergonomie : selon les attentes du public choisi • La Conception pour bien définir : • La réalisation du site : • L’architecture : pages statiques ou dynamiques • Les outils : éditeurs (texte ou wysiwing) ou CMS • La publication du site (mise en ligne) • La promotion du site : référencement, maj Création de site web - Club Informatique Saintongeais

33. Choix d’un logiciel Editeur de pages HTML info • Editeurs fournis avec windows : notepad, wordpad… • Editeurs freewares sharewares : HtmlEdit,… Linternaute • Editeurs gratuits Non WYSIWYG : • Editeurs gratuits et WYSIWYG : • FrontPage Express 2.0, Dreamweaver (démo) • Editeurs freewares sharewares : Nvu, Web Construction Kit,… • Editeurs commerciaux spécialisés : • Macromédia Dreamweaver MX, • Microsoft FrontPage, • Et autres outils Microsoft :(non recommandés) • Word, Publisher, PowerPoint etc… (WYSIWYG = What You See Is What You Get = Ce que vous voyez est ce que vous obtenez) Création de site web - Club Informatique Saintongeais

34. Une page en HTMLinfoinfoinfo • Voici comment sont imbriqués les conteneurs : • <HTML> C’est la 1ère ligne du fichier HTML • <HEAD> C'est le conteneur de l'entête. • ici seront les « métatags » titre, mots clés,… • </HEAD> • <BODY> C'est le conteneur du corps. • XXXX ici sera le texte vu par les internautes • </BODY> • </HTML> C’est la dernière ligne Le HTML (HyperText Markup Language) est un langage de balisage pour la publication en hypertexte sur le Web. Création de site web - Club Informatique Saintongeais

35. Choix d’un logiciel FTP pour publier info Il existe des centaines de logiciels FTP, gratuits le plus souvent, pour transférer un site web et ses mises à jours, sur le site de l’hébergeur. Le shareware TOTAL COMMANDER intègre cette fonction FTP. Téléchargement sur le site : www.ghisler.com Création de site web - Club Informatique Saintongeais

36. Total Commander info Création de site web - Club Informatique Saintongeais

37. Total Commander info Création de site web - Club Informatique Saintongeais

38. Publication du site : vers l’Hébergeur (Free) de chez le Webmaster (Chaniers) Création de site web - Club Informatique Saintongeais

39. Promotion du site : le référencement info Le but premier du référencement est de générer du trafic ciblé sur un site afin d'augmenter sa visibilité auprès des internautes francophones et internationaux Le référencement sur les annuaires et moteurs de recherche est devenu un métier, nécessitant une méthodologie. L’indice de popularité (Pagerank chez Google) nécessite quelques règles : • Optimiser chaque page pour le référencement, • Contenu de qualité pour être très référencé • Echanges de liens ou de bannières, • Site très actualisé sans liens brisés, Création de site web - Club Informatique Saintongeais

40. La création d’un site en PHP(Pages HTML générées en mode dynamique) Création de site web - Club Informatique Saintongeais

41. Qu’est ce que le PHP ? info Le PHP (Hypertext Preprocessor) est un langage de programmation côté serveur web chez l’hébergeur couplé à une base de données. Le serveur va interpréter le code PHP et générer du code HTML afin d'être lu par les navigateurs mais il peut être utilisé pour d'autres langages ou formats tels que WML, GIF, PDF, etc. Il a été conçu pour permettre la création d'applications dynamiques. PHP peut être installé sur les principaux serveursweb du marché, les plus répandus étant IIS et Apache. Ce couplage permet de récupérer des informations issues d'une base de données, ou des données envoyées par le navigateur afin d'être interprétées ou stockées pour une utilisation ultérieure. Création de site web - Club Informatique Saintongeais

42. Trois Plateformes « Open Source » gratuites • Wordpress • Dotclear • SPIP Ces trois Kits Logiciels,systèmes de gestion de contenulibre reposent sur une base de données MySQL permettent de créer et d’administrer en ligne un site personnel. On peut télécharger l’un ou l’autre de ces trois Kits Logiciels en « Open Source » et le transférer chez un hébergeur « compatible » avec les versions proposées : Exemple : Free (gratuit), OVH (gratuit ou payant). Création de site web - Club Informatique Saintongeais

43. Wordpress info Pour installer une plateforme telle que Wordpress, il est nécessaire de disposer : • D’un serveur web chez un hébergeur, • Une Base de données au format MySQL, • Un Editeur de texte (paramètres fichier configuration), • Un logiciel de transfert FTP, Les sites francophones pour en savoir plus : • Le site de Clubic • La Faq de Wordpress • Des sites réalisés avec Wordpress • Présentation de Wordpress par Wikipédia Création de site web - Club Informatique Saintongeais

44. Dotclearinfo Pour installer une plateforme telle que Dotclear, il est nécessaire de disposer : • D’un serveur web chez un hébergeur, • Une Base de données au format MySQL, • Un Editeur de texte (paramètres fichier configuration), • Un logiciel de transfert FTP, Les sites francophones pour en savoir plus : • Le site de Clubic • La Faq de Dotclear • Des sites réalisés avec Dotclear • Présentation de Dotclear Wikipédia Création de site web - Club Informatique Saintongeais

45. SPIP Pour installer une plateforme telle que SPIP, il est nécessaire de disposer : • D’un serveur web chez un hébergeur, • Une Base de données au format MySQL, • Un Editeur de texte (paramètres fichier configuration), • Un logiciel de transfert FTP, Les sites francophones pour en savoir plus : • Le site de SPIP • La Faq de SPIP • Des sites réalisés avec SPIP • Présentation de SPIP Wikipédia Création de site web - Club Informatique Saintongeais

46. Exemple avec SPIP : Le site de l’Amicale des retraités du Crédit Agricole Charente-Maritime Deux-Sèvres Création de site web - Club Informatique Saintongeais

47. Création de site web - Club Informatique Saintongeais

48. SPIP L’Outil d’administration et de gestion de contenu en ligne Création de site web - Club Informatique Saintongeais

49. Perpsectives d’aveniravec l’arrivée du web 2 Création de site web - Club Informatique Saintongeais

50. Web 2 : des internautes « actifs »info Conçu comme un grand livre à l’échelle mondiale, le web 1.0 s'est contenté de reproduire les modèles connus de l'édition papier. Le web 2.0 transforme le web en une gigantesque base de données. L'arrivée à maturité des technologies XML et une meilleure compréhension du web transforment  la Toile en un gigantesque réseau de sources d'information structurées et de services, jetant les bases d'une plate-forme de développement planétaire. Les progrès technologiques de ces dernières années ne sont pas les seules ferments de cette évolution. Les internautes ont changé. Plus nombreux, connectés en haut débit, ils s'impliquent de plus en plus dans la création de «leur» réseau : ils ne se contentent plus de lire, mais publient aussi des données. Création de site web - Club Informatique Saintongeais