SlideShare une entreprise Scribd logo
1  sur  34
Télécharger pour lire hors ligne
Qu’est-ce qu’un site web ?
Formation Strasweb du 23 octobre 2013
Par Anne-Laure Faessel
L’association Strasweb
Formations
Prestations web
Hébergement
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
Internet
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
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
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
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
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
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
Les navigateurs
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
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
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
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
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
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
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
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
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
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
Les langages du web
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
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
Exemple de code HTML
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
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
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
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
Site statique vs Site dynamique
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
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
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
Les systèmes de gestion de
contenus (CMS)
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
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
Référencement et réseaux sociaux
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
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 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 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
Questions ?
Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel

Contenu connexe

Similaire à comment ça fonctionne un site web

Expertise Alterway Au Service Des Projets Drupal 0.6
Expertise Alterway Au Service Des Projets Drupal   0.6Expertise Alterway Au Service Des Projets Drupal   0.6
Expertise Alterway Au Service Des Projets Drupal 0.6Hervé Leclerc
 
AquaBrowser - fonctionnalités, mise en place, apports aux usagers
AquaBrowser - fonctionnalités, mise en place, apports aux usagersAquaBrowser - fonctionnalités, mise en place, apports aux usagers
AquaBrowser - fonctionnalités, mise en place, apports aux usagersAurélie Duclos
 
Atelier école : recherche d'information, ressources et outils collaboratifs
Atelier école : recherche d'information, ressources et outils collaboratifsAtelier école : recherche d'information, ressources et outils collaboratifs
Atelier école : recherche d'information, ressources et outils collaboratifschauvinclo
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Vlad Posea
 
Le blogue comme espace de publication et d'interaction
Le blogue comme espace de publication et d'interactionLe blogue comme espace de publication et d'interaction
Le blogue comme espace de publication et d'interactionGeoffroi Garon-Épaule
 
Conférence Accessibilité web
Conférence Accessibilité webConférence Accessibilité web
Conférence Accessibilité webVanessaSantAndr
 
Le Word Wide Web : Histoire et usages
Le Word Wide Web : Histoire et usagesLe Word Wide Web : Histoire et usages
Le Word Wide Web : Histoire et usagesNETPRESTA
 
Methodologie Recherche Je 15 Dec
Methodologie Recherche Je 15 DecMethodologie Recherche Je 15 Dec
Methodologie Recherche Je 15 DecBibliolab
 
Claroline - Semaine du libre
Claroline - Semaine du libreClaroline - Semaine du libre
Claroline - Semaine du libreClaroline
 
Introduction à la veille sur le web
Introduction à la veille sur le webIntroduction à la veille sur le web
Introduction à la veille sur le webQuentin Adam
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information SystemsSerge Garlatti
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information SystemsSerge Garlatti
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information SystemsSerge Garlatti
 
Gestion et conduite de projet
Gestion et conduite de projetGestion et conduite de projet
Gestion et conduite de projetTaha LAGHZALI
 
Book des services webassoc
Book des services webassocBook des services webassoc
Book des services webassocwebassoc .fr
 
Accessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuAccessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuEric LAMIDIEU
 
Descriptif du poste conseillers cellule d'appui
Descriptif du poste conseillers cellule d'appuiDescriptif du poste conseillers cellule d'appui
Descriptif du poste conseillers cellule d'appuiMatthieu Cisel
 
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...Olivier Nourry
 
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013echangeurba
 

Similaire à comment ça fonctionne un site web (20)

Expertise Alterway Au Service Des Projets Drupal 0.6
Expertise Alterway Au Service Des Projets Drupal   0.6Expertise Alterway Au Service Des Projets Drupal   0.6
Expertise Alterway Au Service Des Projets Drupal 0.6
 
AquaBrowser - fonctionnalités, mise en place, apports aux usagers
AquaBrowser - fonctionnalités, mise en place, apports aux usagersAquaBrowser - fonctionnalités, mise en place, apports aux usagers
AquaBrowser - fonctionnalités, mise en place, apports aux usagers
 
Atelier école : recherche d'information, ressources et outils collaboratifs
Atelier école : recherche d'information, ressources et outils collaboratifsAtelier école : recherche d'information, ressources et outils collaboratifs
Atelier école : recherche d'information, ressources et outils collaboratifs
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1
 
Le blogue comme espace de publication et d'interaction
Le blogue comme espace de publication et d'interactionLe blogue comme espace de publication et d'interaction
Le blogue comme espace de publication et d'interaction
 
Conférence Accessibilité web
Conférence Accessibilité webConférence Accessibilité web
Conférence Accessibilité web
 
Le Word Wide Web : Histoire et usages
Le Word Wide Web : Histoire et usagesLe Word Wide Web : Histoire et usages
Le Word Wide Web : Histoire et usages
 
Methodologie Recherche Je 15 Dec
Methodologie Recherche Je 15 DecMethodologie Recherche Je 15 Dec
Methodologie Recherche Je 15 Dec
 
Claroline - Semaine du libre
Claroline - Semaine du libreClaroline - Semaine du libre
Claroline - Semaine du libre
 
Introduction à la veille sur le web
Introduction à la veille sur le webIntroduction à la veille sur le web
Introduction à la veille sur le web
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information Systems
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information Systems
 
Semantic Information Systems
Semantic Information SystemsSemantic Information Systems
Semantic Information Systems
 
Formation Accessibilite Web
Formation Accessibilite WebFormation Accessibilite Web
Formation Accessibilite Web
 
Gestion et conduite de projet
Gestion et conduite de projetGestion et conduite de projet
Gestion et conduite de projet
 
Book des services webassoc
Book des services webassocBook des services webassoc
Book des services webassoc
 
Accessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuAccessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric Lamidieu
 
Descriptif du poste conseillers cellule d'appui
Descriptif du poste conseillers cellule d'appuiDescriptif du poste conseillers cellule d'appui
Descriptif du poste conseillers cellule d'appui
 
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
L'accessibilité à grande échelle - Comment WordPress intègre l’accessibilité ...
 
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
Atelier Qualité web / OPQUAST - Cession agences - CCI Bordeaux 26 novembre 2013
 

Plus de StrasWeb

Audit de site web
Audit de site webAudit de site web
Audit de site webStrasWeb
 
Initiation au référencement
 Initiation au référencement Initiation au référencement
Initiation au référencementStrasWeb
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobileStrasWeb
 
Les MOOC, apprendre autrement grâce à Internet
 Les MOOC, apprendre autrement grâce à Internet Les MOOC, apprendre autrement grâce à Internet
Les MOOC, apprendre autrement grâce à InternetStrasWeb
 
Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?StrasWeb
 
Wikipédia pour les étudiants
Wikipédia pour les étudiantsWikipédia pour les étudiants
Wikipédia pour les étudiantsStrasWeb
 
E-marketing pour les débutants
E-marketing pour les débutantsE-marketing pour les débutants
E-marketing pour les débutantsStrasWeb
 
JavaScript
JavaScriptJavaScript
JavaScriptStrasWeb
 
Utiliser les réseaux sociaux pour communiquer
 Utiliser les réseaux sociaux pour communiquer Utiliser les réseaux sociaux pour communiquer
Utiliser les réseaux sociaux pour communiquerStrasWeb
 
Licences libres : utopie ou modèle économique ?
 Licences libres : utopie ou modèle économique ? Licences libres : utopie ou modèle économique ?
Licences libres : utopie ou modèle économique ?StrasWeb
 
Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.StrasWeb
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langageStrasWeb
 
L'auto hébergement
L'auto hébergementL'auto hébergement
L'auto hébergementStrasWeb
 
Initiation au php
Initiation au phpInitiation au php
Initiation au phpStrasWeb
 
Naviguer en sécurité
Naviguer en sécuritéNaviguer en sécurité
Naviguer en sécuritéStrasWeb
 
Introduction aux principes du Responsive Web Design
 Introduction aux principes du Responsive Web Design Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web DesignStrasWeb
 
Héberger son site web
Héberger son site webHéberger son site web
Héberger son site webStrasWeb
 
Les tendances du webdesign
Les tendances du webdesignLes tendances du webdesign
Les tendances du webdesignStrasWeb
 
Initiation au CSS
Initiation au CSSInitiation au CSS
Initiation au CSSStrasWeb
 
Typographie pour le Web
Typographie pour le WebTypographie pour le Web
Typographie pour le WebStrasWeb
 

Plus de StrasWeb (20)

Audit de site web
Audit de site webAudit de site web
Audit de site web
 
Initiation au référencement
 Initiation au référencement Initiation au référencement
Initiation au référencement
 
Construire et prototyper rapidement un concept d’application mobile
 Construire et prototyper rapidement un concept d’application mobile Construire et prototyper rapidement un concept d’application mobile
Construire et prototyper rapidement un concept d’application mobile
 
Les MOOC, apprendre autrement grâce à Internet
 Les MOOC, apprendre autrement grâce à Internet Les MOOC, apprendre autrement grâce à Internet
Les MOOC, apprendre autrement grâce à Internet
 
Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?Écriture collaborative : est-on plus intelligents à plusieurs ?
Écriture collaborative : est-on plus intelligents à plusieurs ?
 
Wikipédia pour les étudiants
Wikipédia pour les étudiantsWikipédia pour les étudiants
Wikipédia pour les étudiants
 
E-marketing pour les débutants
E-marketing pour les débutantsE-marketing pour les débutants
E-marketing pour les débutants
 
JavaScript
JavaScriptJavaScript
JavaScript
 
Utiliser les réseaux sociaux pour communiquer
 Utiliser les réseaux sociaux pour communiquer Utiliser les réseaux sociaux pour communiquer
Utiliser les réseaux sociaux pour communiquer
 
Licences libres : utopie ou modèle économique ?
 Licences libres : utopie ou modèle économique ? Licences libres : utopie ou modèle économique ?
Licences libres : utopie ou modèle économique ?
 
Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.Le web, c’est 99 % de typographie.
Le web, c’est 99 % de typographie.
 
Jquery - introduction au langage
Jquery - introduction au langageJquery - introduction au langage
Jquery - introduction au langage
 
L'auto hébergement
L'auto hébergementL'auto hébergement
L'auto hébergement
 
Initiation au php
Initiation au phpInitiation au php
Initiation au php
 
Naviguer en sécurité
Naviguer en sécuritéNaviguer en sécurité
Naviguer en sécurité
 
Introduction aux principes du Responsive Web Design
 Introduction aux principes du Responsive Web Design Introduction aux principes du Responsive Web Design
Introduction aux principes du Responsive Web Design
 
Héberger son site web
Héberger son site webHéberger son site web
Héberger son site web
 
Les tendances du webdesign
Les tendances du webdesignLes tendances du webdesign
Les tendances du webdesign
 
Initiation au CSS
Initiation au CSSInitiation au CSS
Initiation au CSS
 
Typographie pour le Web
Typographie pour le WebTypographie pour le Web
Typographie pour le Web
 

Dernier

Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2JeanLucHusson
 
Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFEAhmam Abderrahmane
 
Exercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionsExercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionslaetitiachassagne
 
La Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniqueLa Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniquessuser4dbdf2
 
Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxMartin M Flynn
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024frizzole
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementM2i Formation
 

Dernier (7)

Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2Présentation de lancement de la SAE203 - MMI S2
Présentation de lancement de la SAE203 - MMI S2
 
Rapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFERapport projet de fin d'études licence PFE
Rapport projet de fin d'études licence PFE
 
Exercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositionsExercice de FLE pour enfants sur les transports et les prépositions
Exercice de FLE pour enfants sur les transports et les prépositions
 
La Projection orthogonale en dessin technique
La Projection orthogonale en dessin techniqueLa Projection orthogonale en dessin technique
La Projection orthogonale en dessin technique
 
Semaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptxSemaine de la Passion de Jésus-Christ.pptx
Semaine de la Passion de Jésus-Christ.pptx
 
Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024Planning de la semaine du 25 mars au 2 avril 2024
Planning de la semaine du 25 mars au 2 avril 2024
 
Formation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changementFormation M2i - Femmes entrepreneures : soyez actrices du changement
Formation M2i - Femmes entrepreneures : soyez actrices du changement
 

comment ça fonctionne un site web

  • 1. Qu’est-ce qu’un site web ? Formation Strasweb du 23 octobre 2013 Par Anne-Laure Faessel
  • 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. Internet Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  • 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. 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. 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. 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. 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. Les navigateurs Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Les langages du web Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  • 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. Exemple de code HTML Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  • 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. 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. 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. Site statique vs Site dynamique Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  • 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. 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. 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. 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. Référencement et réseaux sociaux Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel
  • 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. 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. 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. Questions ? Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel