comment ça fonctionne un site web

1,050 views
933 views

Published on

Rien de mieux qu'un petit retour aux notions de base !

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,050
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

comment ça fonctionne un site web

  1. 1. Qu’est-ce qu’un site web ? Formation Strasweb du 23 octobre 2013 Par Anne-Laure Faessel
  2. 2. L’association Strasweb Formations Prestations web Hébergement Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  3. 3. Internet Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  4. 4. Pourquoi un site internet ? 2002 : 16,4 millions d’internautes en France 2012 : 40,2 millions d’internautes en France Population française actuelle : 65,7 millions Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  5. 5. Qu’est-ce qu’internet ? Réseau de télécommunication Par câble ou par Wifi Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  6. 6. La relation client/serveur Le serveur transmet des données au client Le serveur doit être adapté au trafic du site Plus le trafic est important, plus il doit être puissant Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  7. 7. L’hébergeur Met à disposition d’utilisateur des serveurs Gratuit ou payant Différents services inclus ou non dans l’offre Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  8. 8. Le nom de domaine L’« adresse » du site internet Différentes extensions possibles Ex : .fr, .com, .org, etc Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  9. 9. Les navigateurs Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  10. 10. Le navigateur Interprète le code transmis par le serveur Les navigateurs n’interprètent pas tous le code de la même manière Différences d’affichage entre les navigateurs Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  11. 11. Les différents navigateurs du marché Firefox Chrome Internet Explorer Safari Opera Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  12. 12. Parts de marché Part de marché en Europe* (09/2013) Firefox Chrome IE Safari Opera * Source : http://gs.statcounter.com/ Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  13. 13. Firefox Indépendant Puissant Ne récolte pas les données de navigation Supporte les derniers standards Grand choix de plugins Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  14. 14. Chrome Le navigateur de Google Très pratique pour les utilisateurs de produits Google Barre d’adresse hybride Supporte les derniers standards Collecte les données de navigation Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  15. 15. Internet explorer Navigateur par défaut sur Windows Ne supporte pas toujours les derniers standard des langages web Détesté des intégrateurs web ! Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  16. 16. Démonstrations Mettre une page en favori dans la barre de favoris Voir l’historique de navigation Lancer une navigation privée Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  17. 17. Moteurs de recherches Parts de marché en France (12/2012)* Google : 94% Bing : 2% Yahoo : 2% *source : http://www.journaldunet.com Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  18. 18. Démonstrations Recherche sur Google Analyse de la page de résultat Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  19. 19. Les langages du web Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  20. 20. HTML : balisage de la page Langage de balises Deux balises entourent un élément Ex : <h1>Titre de niveau 1</h1> Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  21. 21. Exemple de code HTML Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  22. 22. CSS : mise en forme Se combine au HTML pour donner un aspect particulier aux éléments Peut affecter tous les éléments semblables (titre, paragraphe) Peut affecter des éléments spécifiques (ajout de « class » ou « id ») Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  23. 23. HTML / CSS Ces langages vous intéressent ? Un très bon cours pas à pas : http://fr.openclassrooms.com/mooc/h tml5-css3 Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  24. 24. Langages de programmation PHP : traité côté serveur JavaScript : traité côté client Permettent d’effectuer des traitements sur les page Ex: récupération des données d’un formulaire, identification d’un utilisateur, etc. Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  25. 25. Site statique vs Site dynamique Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  26. 26. Site statique Utilise quasi exclusivement HTML et CSS Toute modification nécessite de toucher au code Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  27. 27. Site dynamique Utilise un langage de programmation Conçu pour être mis à jour régulièrement Interface pour mise à jour des contenus par un utilisateur sans connaissance des langages du web Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  28. 28. Les systèmes de gestion de contenus (CMS) Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  29. 29. CMS Content Management System Permet la mise en place de sites dynamiques Code « prêt à l’emploi » Interface pour mises à jour aisées Ex : Wordpress, Joomla, Drupal, Spip, etc Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  30. 30. Référencement et réseaux sociaux Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  31. 31. Référencement Visibilité d’un site sur les moteurs de recherches Fonctionne par « mots-clés » Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  32. 32. Page sur un réseau social Renseigner des informations basiques (Horaires, adresse, téléphone, etc) Contact direct avec ses clients (dates de congés, questions/réponses) Peut convenir pour un petit commerce Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  33. 33. Page sur un réseau social ou site web ? Une bonne page bien alimentée sur un réseau social peut faire office de vitrine pour un commerce Les réseaux sociaux sont des lieux d’échange. Il faut prendre le temps de communiquer, et répondre aux commentaires Risque de donner une mauvaise image si page « morte » Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  34. 34. Questions ? Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel

×