comment ça fonctionne un site web

34
Qu’est-ce qu’un site web ? Formation Strasweb du 23 octobre 2013 Par Anne-Laure Faessel

Upload: strasweb

Post on 26-Dec-2014

549 views

Category:

Education


3 download

DESCRIPTION

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

TRANSCRIPT

Page 1: comment ça fonctionne un site web

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Questions ?

Qu’est-ce qu’un site internet ? – Formation Strasweb du 23/10/2013 – Anne-Laure Faessel