Créer un site Web sur internet

1. Créer unsite Websur internet Créer son site web - Club Informatique Saintongeais Guy Neauleau

2. Plan général • Pourquoi créer des sites web ? • Les 2 grands types de sites web • Les sites perso «en mode statique» • Les Blogs • Les «CMS» Conclusion Créer son site web - Club Informatique Saintongeais

3. Pourquoi créer des sites Web ? • Diffuser de l’information très rapidement • Toucher un très large public • Mettre à la disposition des internautes ses informations • Publier de façon plus économique qu’avec les supports papier • Partager d’une façon attractive : texte, image, musique, vidéo… • Vendre ses idées, ses produits et services… • Communiquer échanger entre internautes : commentaires,… • Tout simplement : se faire plaisir à soi et son entourage … Créer son site web - Club Informatique Saintongeais

4. Les deux types de sites Web • Les sites Web gérés en mode statique : Les pages sont créées en local avec un logiciel, puis, transférées sur un site hébergeur gratuit (FAI) ou payant (OVH, etc…) • Les sites Web gérés en mode dynamique : Les pages sont créées sur un serveur en ligne, et hébergées sur le site de la plate-forme (Blog) ou autres hébergeurs (CMS) CMS = Content Management Systems ou Système de Gestion de contenu : SPIP,… Créer son site web - Club Informatique Saintongeais

5. 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éer son site web - Club Informatique Saintongeais

6. Créer un site en mode statique Quels sont les outils nécessaires ? • Un logiciel pour écrire les pages Web • Un logiciel de gestion d’images • Un logiciel pour publier le site en ligne (ftp) • Une connexion internet pour transférer les pages Créer son site web - Club Informatique Saintongeais

7. Créer un site en mode statique • Un logiciel pour écrire les pages Web - Un simple éditeur de texte comme le bloc-note peut suffire à pour écrire les pages en langage HTML • Un éditeur générateur de pages web, avec aperçu WYSIWYG, génère les pages en langage HTML • Par exemple : Dreamweaver , FrontPage, etc… WYSIWYG = acronyme de la locution anglaise What you see is what you get en français, ce que vous voyez est ce que vous obtenez Créer son site web - Club Informatique Saintongeais

8. Créer un site en mode statique • Un logiciel de gestion d’images • Les images d’une page web sont de taille petite (<400 pixels), allégées (quelques Ko), et très nombreuses (navigation, …) • Un logiciel de gestion d’image est nécessaire • Par exemple : Photofiltre, Photoshop, etc… Créer son site web - Club Informatique Saintongeais

9. Créer un site en mode statique • Un logiciel de publication chez l’hébergeur • Les pages web créées sur l’ordinateur en local doivent être transférée chez un hébergeur par exemple votre FAI : Free, Orange etc… • Avec logiciel FTP (File Transfert Protocol) • Ex : Cute-ftp, Leechftp, Totalcommander Créer son site web - Club Informatique Saintongeais

10. 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 ») Chaque page Web contient : • Le texte d’entête invisible par les internautes • Le texte vu par les internautes, • Des liens vers des images, de la musique, d’autres pages etc… Ex : Consulter le source d’une page Web en langage HTML Créer son site web - Club Informatique Saintongeais

11. HTML : un langage de balisage • Le Hypertext Markup Language, est un langage informatique de balisage conçu pour écrire, mettre en page les pages web, et créer de l’hypertexte, d’où son nom. • HTML permet donc de structurer le contenu des pages, d’inclure des ressources multimédias dont des images, des formulaires de saisie, et des applets. • HTML permet de créer des documents interopérables avec des équipements très variés et de soutenir l’accessibilité du web. • HTML est utilisé conjointement avec des langages de programmation comme JavaScript, les feuilles de style en cascade (CSS) et bien d’autres langages. Créer son site web - Club Informatique Saintongeais

12. 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éer son site web - Club Informatique Saintongeais

13. Une page en HTML : Créer son site web - Club Informatique Saintongeais

14. Publier votre site web : Créer son site web - Club Informatique Saintongeais

15. Et voilà votre Page Web est visible par Internet Explorer et autres navigateurs Créer son site web - Club Informatique Saintongeais

16. 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éer son site web - Club Informatique Saintongeais

17. La création d’un « Blog » Créer son site web - Club Informatique Saintongeais

18. 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 personnel. 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éer son site web - Club Informatique Saintongeais

19. Pourquoi créer un blog ? Un blog est un réel espace de communication créé pour donner la parole à tous les internautes (particuliers, entreprises, artistes, hommes politiques, associations…). De nombreux blogueurs parlent de leurs passions, de l’actualité, de ce qui les touchent ou les intéressent. Créer son site web - Club Informatique Saintongeais

20. Comment ça fonctionne ? Les articles (ou billets) sont publiés de façon chronologique (le dernier posté en avant sur l’accueil) et permettent à tous les visiteurs de réagir sur le sujet évoqué, en postant leurs commentaires sur l’article, créant ainsi une relation privilégiée entre l'auteur et ses lecteurs.Tout le monde peut créer un blog ! Créer son site web - Club Informatique Saintongeais

21. De quoi a-t-on besoin ? • de choisir un site hébergeur, • d’une adresse e-mail valide, • d’un mot de passe, • - de définir le nom du Blog Créer son site web - Club Informatique Saintongeais

22. Bien choisir l’hébergeur du Blog Un comparatif des plates-formes de Blogs : Créer son site web - Club Informatique Saintongeais

23. 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éer son site web - Club Informatique Saintongeais

24. Créer un Blog avec Oldibloginfo S’inscrire Créer son site web - Club Informatique Saintongeais

25. Créer un Blog en quelques clicsinfo S’inscrire Créer son site web - Club Informatique Saintongeais

26. Créer un Blog avec Oldibloginfo Remplir le site Créer son site web - Club Informatique Saintongeais

27. Créer un Blog en quelques clicsinfo Remplir le site Créer son site web - Club Informatique Saintongeais

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

29. Et voilà : le Blog est en ligneinfo Design 1 Créer son site web - Club Informatique Saintongeais

30. Et voilà : le Blog est en ligne Choix du design Par l’internaute Créer son site web - Club Informatique Saintongeais

31. http://cisaintongeais.oldiblog.com/ Créer son site web - Club Informatique Saintongeais

32. http://cisaintongeais.blogspot.com/ Créer son site web - Club Informatique Saintongeais

33. http://assomaraishauteseudre.blog4ever.com Créer son site web - Club Informatique Saintongeais

34. Choisssez votre hébergeur de Blog … En savoir plus : • Les Plateformes de création de Blog • Créer son Blog dans les règles de l’art • Une liste d’hébergeurs francophones • Les Blogs classés selon leur audience • Et l’espace webmaster sur infoweb17 Créer son site web - Club Informatique Saintongeais Guy Neauleau

35. Facile de créer son Blog ? A vous de jouer … A bientôt sur le web ! Créer son site web - Club Informatique Saintongeais

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

37. 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éer son site web - Club Informatique Saintongeais

38. 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éer son site web - Club Informatique Saintongeais

39. 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éer son site web - Club Informatique Saintongeais

40. 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éer son site web - Club Informatique Saintongeais

41. 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éer son site web - Club Informatique Saintongeais

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

43. Créer son site web - Club Informatique Saintongeais

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

45. Perpsectives d’aveniravec l’arrivée du web 2 Créer son site web - Club Informatique Saintongeais

46. 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éer son site web - Club Informatique Saintongeais

47. En savoir davantage : • Les tutoriels en tous genres sur le web, • Les pages « webmasteur » sur www.infoweb17.fr Créer son site web - Club Informatique Saintongeais

48. Bonne Publication sur le webet Au plaisir de vous lire bientôt ! Créer son site web - Club Informatique Saintongeais

49. Merci de votre attention Créer son site web - Club Informatique Saintongeais www.infoweb17.com