comment ça fonctionne un site web
DESCRIPTION
Rien de mieux qu'un petit retour aux notions de base !TRANSCRIPT
![Page 1: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/1.jpg)
Qu’est-ce qu’un site web ?Formation Strasweb du 23 octobre 2013
Par Anne-Laure Faessel
![Page 2: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/2.jpg)
L’association Strasweb
Formations
Prestations web
Hébergement
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
![Page 3: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/3.jpg)
Internet
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
![Page 4: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/4.jpg)
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
![Page 5: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/5.jpg)
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
![Page 6: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/6.jpg)
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
![Page 7: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/7.jpg)
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
![Page 8: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/8.jpg)
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
![Page 9: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/9.jpg)
Les navigateurs
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
![Page 10: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/10.jpg)
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
![Page 11: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/11.jpg)
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
![Page 12: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/12.jpg)
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
![Page 13: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/13.jpg)
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
![Page 14: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/14.jpg)
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
![Page 15: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/15.jpg)
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
![Page 16: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/16.jpg)
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
![Page 17: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/17.jpg)
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
![Page 18: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/18.jpg)
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
![Page 19: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/19.jpg)
Les langages du web
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
![Page 20: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/20.jpg)
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
![Page 21: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/21.jpg)
Exemple de code HTML
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
![Page 22: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/22.jpg)
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
![Page 23: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/23.jpg)
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
![Page 24: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/24.jpg)
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
![Page 25: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/25.jpg)
Site statique vs Site dynamique
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
![Page 26: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/26.jpg)
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
![Page 27: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/27.jpg)
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
![Page 28: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/28.jpg)
Les systèmes de gestion de
contenus (CMS)
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
![Page 29: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/29.jpg)
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
![Page 30: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/30.jpg)
Référencement et réseaux sociaux
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
![Page 31: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/31.jpg)
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
![Page 32: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/32.jpg)
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
![Page 33: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/33.jpg)
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
![Page 34: comment ça fonctionne un site web](https://reader033.vdocuments.site/reader033/viewer/2022042613/549f3383ac79590b768b4902/html5/thumbnails/34.jpg)
Questions ?
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel