SlideShare une entreprise Scribd logo
1  sur  34
1
Techniques du web
LST Informatique
@FST: 2016 - 2021
Mohamed OUZARF
2
Techniques du web
3
Plan
Internet
WEB 1
WEB 2
Que faut-il pour « publier sur le web »?
Autre recommandations
Aspect juridiques
Protocole HTTP
Configuration des sites web
4
Internet
L’Internet est un système de communication reliant les
ordinateurs à travers le monde et leur permettant de
communiquer et d’échanger les informations entre eux.
Réseau des réseaux
5
Internet
1- Usage du protocole TCP/IP
2- Architecture Client/Serveur
3- Nécessite d'un protocole de communication :Http
La base du Web
6
Définition
Le web ou le World Wide Web «La toile d’araignée
mondiale », (WWW, W3) est un système hypermédia
« hypertexte » sur Internet.
En quoi consiste une présentation web?
Une présentation web, c’est un ensemble d’unités
d’information (texte, images, son video,…) pour
représenter un sujet ou à fournir un service.
Web : WWW
7
Développé au CERN ( Centre Européen de Recherche
Nucléaire) à Genève, Suisse, par Tim Berners-Lee en 1989.
Ted Nelson (1965) est un sociologue-philosophe américain, Il
est considéré comme l'inventeur du terme hypertexte .
Actuellement le web est supervisé par un Consortium
indépendantW3C. http://www.w3.org
Web : Historique
@timberners_lee: Director of W3C (www.w3.org)
Prix Turing 2016.
8
Une page web est un fichier texte qui contient
des liens vers d’autres fichiers ou vers des
emplacements dans le même fichier.
Un site web est un ensemble de pages web
liés entre elles et qui tournent autour d’un
thème donné.
Page/site web
9
Un Utilisateur peut héberger son site web de trois manières :
Directement dans son propre serveur
Dans le serveur de son fournisseur d’accès à Internet
Chez les hébergeurs dédiés ( peuvent être gratuits :
yahoo, …)
Hébergement d’un site web
10
Navigation dans le Web
HTTP (HyperText Transfer Protocol)
HTML (HyperText Markup Languge)
11
Ressources de navigation
12
HTTP est un protocole de niveau applicatif qui permet la
transmission de documents distribués et multimédia à travers le
web.
HTTP a été inventé par Tim Berners-Lee avec les adresses web
et le langage HTML pour créer le World Wide Web. À cette
époque, le File Transfer Protocol (FTP) était déjà disponible
pour transférer des fichiers.
HTTP
L’HyperText Transfer Protocol, plus connu sous
l’abréviation HTTP est un protocole de communication
client-serveur développé pour le Web.
13
Mode de fonctionnement : Client/Serveur
Utilise en général le protocole TCP
Port par défaut 80
Une seule Connexion TCP pour chaque requête (http1.0)
Fermeture de la connexion après la réponse du
serveur.
Possibilité d’exécuter plusieurs requêtes sur la même
connexion (HTTP1.1)
HTTP
14
Adresse universelle d’un document
Composée de trois parties : service, serveur et chemin
Syntaxe :
Service://serveur/chemin_de_ressource
Exemples
http://fst-usmba.ac.ma/scolarite.html
mailto:admin@fst-usmba.ac.ma
telnet://login:mot_de_passe@fst-usmba.ac.ma
News:actualites-fst
URL : Uniform Resource Locator
L’adresse de destination
Mohamed.Ouzarf @ LST INFO
15
Mohamed.Ouzarf @ LST INFO
16
Mohamed.Ouzarf @ LST INFO
17
18
Propriétés du web
Lien Hypertexte
Les informations sont réparties
dans plusieurs (pages web) reliés
par des liens dites liens hypertexte.
Evite un parcours séquentiel des
documents.
Très pratique
Références bibliographiques
Dictionnaire
Cours
19
Web 2.0
Le Web 2.0 est un renouveau du World Wide Web.
L'évolution concerne :les technologies employées
et les usages.
les interfaces Web 2.0 permettent aux internautes
d'interagir à la fois avec le contenu des pages mais
aussi entre eux, faisant du Web 2.0 le web
communautaire et interactif. (facebook…)
20
L'infrastructure du web 2.0 est complexe et changeante, mais elle
inclut les logiciels de serveur, la syndication de contenu, les
protocoles de messagerie, des standards de navigation, et des
applications clientes diverses.
Un site web est qualifié d’une approche web2.0 dès lors qu’il
emploie des techniques comme CSS, Ajax et XLM.
Évolution vers le web3.0
Technologies de web 2.0
21
Publication sur le web
Outils de publication: il faut distinguer les moyens matériels et les
moyens logiciels pour une publication sur le web.
Le matériel
Le web est fondé sur une architecture client/serveur. Le client
c’est vous, et le serveur est une machine dotée d’une capacité
disque suffisante et dont l’unité centrale aura la puissance
nécessaire.
Elle devra disposer d’une connexion haut débit sur l’internet.
Le client, ce sera le plus souvent un ordinateur personnel.
22
Que faut-il pour «publier sur le web»?
Le logiciel
Du côté serveur, il faut un logiciel spécialisé qui répond aux
demandes reçues des clients en leur envoyant les pages
correspondantes.
Du côté client, le problème est plus simple, car il suffit d’interpréter
les codes de balisage qui émaillent les informations reçues de
serveurs afin de restituer une mise en page qui se rapproche le plus
possible de celle envisagée par le créateur de la page.
Ce sont les logiciels que vous utilisez pour afficher les présentations
offertes par le serveurs on les désigne sous le non de « browsers »
23
Les regèles à respecter
 Pour la page d’accueil:
• la page d’accueil doit commencer par expliquer l’obejectif du site.
• Donner une introduction suffisante pour accrocher le public visé (vous avez
moins de 30 secondes pour convaincre le visiteur, parfois, moins de 5
seconde)
• Si vous travaillez pour une entreprise ou une organisation, la page d’accueil
doit contenir le nom de cette organisation et un élément visuel (par exemple
un logo ).
• Il est indispensable de mettre sur la page d’accueil votre adresse, un numéro
de téléphone, un mail. Comme ça, vous permettez aux internautes de vous
contacter en cas de besoin.
• Il est indispensable aussi d’indiquer la date de la derniere mise à jour du site
24
Les regèles à respecter
 Pour chaque page individuelle :
• Contenu de texte : entre 100 et 500 mots par page.
• Séparateurs : mettez un titre, une barre de séparation ou une image tous les 40 à 100
mots.
• Longueur de page : entre 2 et 4 écrans par page (avec un écran de 640x480)
• Largeur de page : elle doit absolument tenir sur un seul écran (pas de défilement
horizontal).
• Taille de fichier : entre 15Ko et 30Ko (il ne faut pas dépasser 50Ko, image inclus).
• Couleurs: 2 à 4 couleurs dominantes.
• Fonts : Pas plus de 3 fonts.
• Espace blanc : l’arrière-plan doit occuper plus de 50% de la page. C’est à dire,
l’ensemble du texte et graphiques ne doit pas dépasser 50% de la page. Comme ça,
la page apparait légère et agréable.
• Aucune couleur de l’arrière-plan ne doit être proche de la couleur du texte. Sinon
le texte devient illisible.
• Style : tous les textes et images doivent être homogènes.
25
Les regèles à respecter
 Pour le site dans sa totalité :
• Il faut que le site dans sa totalité soit homogène. En créant une
identité visuelle, le visiteur de votre site remarquera que toutes
les pages de votre site se ressemblent. Ainsi, il sait qu’il est
toujours sur le même site.
• Utilisez le même style dans toutes les pages. Les feuilles de styles
vous aideront énormément dans ce stade.
• Si vous utilisez des images, des icônes ou boutons de navigation,
utilisez les mêmes dans toutes les pages. Comme ça, et en plus de
l’homogénéité visuelle, vous réduisez le temps de chargement
des pages (car une image se charge une seule fois même si elle est
utilisée plusieurs fois dans un site).
26
Les regèles à respecter
• En ce qui concerne les liens : une étude a montré que les
internautes se trouvent confus et mal à l’aise si on leur offre plus
de sept choix. Ils préfèrent moins de cinq choix. Pour cette raison,
évitez d’offrir plus de cinq liens hypertextes dans une page web.
Dans le cas de besoin, regroupez ces liens dans des catégories
chacune contenant moins de cinq liens.
• Respecter la règle de 3 clicks : ne vous éloignez pas plus de trois
niveaux depuis la page d’accueil. Testez aussi tous les liens
périodiquement pour vous assurer qu’ils fonctionnent bien
27
Les regèles à respecter
 A éviter dans un site web :
• Évitez de publier sur internent des pages qui ne sont pas
complètes.
• Supprimez aussi tous les liens qui mènent vers ces pages.
• Évitez de situer des liens vers des sites externes dans la page
d’accueil. Si vous jugez un site intéressant pour les visiteurs de
votre site, vous pouvez mettre un lien vers ce site dans une page
interne.
• Évitez la publicité mensongère
28
Autre recommandations
L’actualisation
Un livre comporte toujours une date de publication. De même,
une présentation web doit être datée.
Les sujet techniques ou ceux qui touchent à l’actualité ou à
l’économie doivent faire l’objet de fréquentes mises à jour.
L’auteur
Une publication doit avoir un auteur. Même lorsqu’il s’agit
d’une présentation réalisée pour le compte d’une entreprise
industrielle ou commerciale ou d’un établissement public.
Il doit toujours y avoir un nom d’auteur ou tout au moins une
adresse E-mail à laquelle les lecteurs puissent faire parvenir des
observations, des critiques, des commentaires ou des questions.
29
Autre recommandations
Le respect du copyright
Il est tentant de recopier des images, de sons ou des animations
qui vous plaisent pour les réutiliser dans vos propres pages.
Mais attention à respecter la propreté des autres.
En générale lorsqu’il s’agit de sites web à but non commercial,
les possesseurs d’images ne refusent jamais, si on le leur
demande bien poliment, de donner leur autorisation. Et bien sur
de les remerciant dans votre page d’accueil.
30
Aspect juridiques
L’usage généralisé de l’internet est trop récent pour qu’il y ait
déjà suffisamment de cas soumis aux tribunaux.
Sur l’internet, les responsabilités sont mal définis et
l’internationalisation du réseaux ne facilite pas l’application de
lois nationales.
Au cours de la publication d’un site web, Il faut respecter
certaines choses:
1- le droit de citation
2- le respect des règles d’usage
3- le respect de la vie privée des autres.
Mohamed.Ouzarf @ LST INFO
31
Mohamed.Ouzarf @ LST INFO
32
Stratégie dans le Web : google leader
Mohamed.Ouzarf @ LST INFO
33
Technique calcul % autorité grâce à <a> : balise d'ancre
Mohamed.Ouzarf @ LST INFO
34

Contenu connexe

Similaire à seance1 Internet-WEB 21.ppt

Digital race evolution programmation web 1.0
Digital race   evolution programmation web 1.0Digital race   evolution programmation web 1.0
Digital race evolution programmation web 1.0Sequoia-ID
 
W3C et les publications numériques
W3C et les publications numériquesW3C et les publications numériques
W3C et les publications numériquesIvan Herman
 
Glossaire TIC | 1ère Journée Innov'Asso
Glossaire TIC | 1ère Journée Innov'AssoGlossaire TIC | 1ère Journée Innov'Asso
Glossaire TIC | 1ère Journée Innov'AssoInnov'Asso
 
Presentation webschool pour centraider
Presentation webschool pour centraiderPresentation webschool pour centraider
Presentation webschool pour centraiderwebschooltours
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutantKorteby Farouk
 
Internet, e-business et commerce équitable
Internet, e-business et commerce équitableInternet, e-business et commerce équitable
Internet, e-business et commerce équitablePhenyx43
 
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxFootballLovers9
 
Accessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuAccessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuEric LAMIDIEU
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxyassinesouli2
 
Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013gdgyaounde
 
Création de blog et sites internet
Création de blog et sites internetCréation de blog et sites internet
Création de blog et sites internetpiera5
 
WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?mirabelleformation
 
Drupal et les Systèmes de gestion de contenu
Drupal et les Systèmes de gestion de contenuDrupal et les Systèmes de gestion de contenu
Drupal et les Systèmes de gestion de contenuMario Marcello Verona
 
Livres Numériques / Web : Construire la Convergence
Livres Numériques / Web : Construire la ConvergenceLivres Numériques / Web : Construire la Convergence
Livres Numériques / Web : Construire la ConvergenceIvan Herman
 
0055-cours-internet-web.pdf
0055-cours-internet-web.pdf0055-cours-internet-web.pdf
0055-cours-internet-web.pdfAssiaYdroudj1
 

Similaire à seance1 Internet-WEB 21.ppt (20)

SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
Do you speak technique ?
Do you speak technique ?Do you speak technique ?
Do you speak technique ?
 
Formation webmaster
Formation webmasterFormation webmaster
Formation webmaster
 
Digital race evolution programmation web 1.0
Digital race   evolution programmation web 1.0Digital race   evolution programmation web 1.0
Digital race evolution programmation web 1.0
 
W3C et les publications numériques
W3C et les publications numériquesW3C et les publications numériques
W3C et les publications numériques
 
Glossaire TIC | 1ère Journée Innov'Asso
Glossaire TIC | 1ère Journée Innov'AssoGlossaire TIC | 1ère Journée Innov'Asso
Glossaire TIC | 1ère Journée Innov'Asso
 
Presentation webschool pour centraider
Presentation webschool pour centraiderPresentation webschool pour centraider
Presentation webschool pour centraider
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutant
 
Internet, e-business et commerce équitable
Internet, e-business et commerce équitableInternet, e-business et commerce équitable
Internet, e-business et commerce équitable
 
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
 
INTRODUCTION8PDF.pdf
INTRODUCTION8PDF.pdfINTRODUCTION8PDF.pdf
INTRODUCTION8PDF.pdf
 
Accessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric LamidieuAccessibilité & Utilisabilité Web par Eric Lamidieu
Accessibilité & Utilisabilité Web par Eric Lamidieu
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
 
Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013
 
CMS et Wordpress
CMS et WordpressCMS et Wordpress
CMS et Wordpress
 
Création de blog et sites internet
Création de blog et sites internetCréation de blog et sites internet
Création de blog et sites internet
 
WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?
 
Drupal et les Systèmes de gestion de contenu
Drupal et les Systèmes de gestion de contenuDrupal et les Systèmes de gestion de contenu
Drupal et les Systèmes de gestion de contenu
 
Livres Numériques / Web : Construire la Convergence
Livres Numériques / Web : Construire la ConvergenceLivres Numériques / Web : Construire la Convergence
Livres Numériques / Web : Construire la Convergence
 
0055-cours-internet-web.pdf
0055-cours-internet-web.pdf0055-cours-internet-web.pdf
0055-cours-internet-web.pdf
 

Dernier

Approche-des-risques-par-l’analyse-des-accidents-1.pptx
Approche-des-risques-par-l’analyse-des-accidents-1.pptxApproche-des-risques-par-l’analyse-des-accidents-1.pptx
Approche-des-risques-par-l’analyse-des-accidents-1.pptxssusercbaa22
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...Faga1939
 
Grammaire pour les élèves de la 6ème.doc
Grammaire pour les élèves de la  6ème.docGrammaire pour les élèves de la  6ème.doc
Grammaire pour les élèves de la 6ème.docKarimKhrifech
 
Fondation Louis Vuitton. pptx
Fondation      Louis      Vuitton.   pptxFondation      Louis      Vuitton.   pptx
Fondation Louis Vuitton. pptxTxaruka
 
Cours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptxCours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptxlamourfrantz
 
Bolero. pptx . Film de A nnne Fontaine
Bolero. pptx . Film   de  A nnne FontaineBolero. pptx . Film   de  A nnne Fontaine
Bolero. pptx . Film de A nnne FontaineTxaruka
 
presentation l'interactionnisme symbolique finale.pptx
presentation l'interactionnisme symbolique  finale.pptxpresentation l'interactionnisme symbolique  finale.pptx
presentation l'interactionnisme symbolique finale.pptxMalikaIdseaid1
 
gestion des conflits dans les entreprises
gestion des  conflits dans les entreprisesgestion des  conflits dans les entreprises
gestion des conflits dans les entreprisesMajdaKtiri2
 
Sidonie au Japon . pptx Un film français
Sidonie    au   Japon  .  pptx  Un film françaisSidonie    au   Japon  .  pptx  Un film français
Sidonie au Japon . pptx Un film françaisTxaruka
 
La nouvelle femme . pptx Film français
La   nouvelle   femme  . pptx  Film françaisLa   nouvelle   femme  . pptx  Film français
La nouvelle femme . pptx Film françaisTxaruka
 
Mécanique Automobile LE TURBOCOMPRESSEUR.ppt
Mécanique Automobile LE TURBOCOMPRESSEUR.pptMécanique Automobile LE TURBOCOMPRESSEUR.ppt
Mécanique Automobile LE TURBOCOMPRESSEUR.pptssusercbaa22
 
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdfCOURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdfabatanebureau
 
MaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.pptMaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.pptssusercbaa22
 
systeme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertsysteme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertChristianMbip
 
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdf
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdfMICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdf
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdfssuser40e112
 
A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.Franck Apolis
 
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptxSAID MASHATE
 
Présentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptxPrésentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptxpopzair
 

Dernier (20)

Approche-des-risques-par-l’analyse-des-accidents-1.pptx
Approche-des-risques-par-l’analyse-des-accidents-1.pptxApproche-des-risques-par-l’analyse-des-accidents-1.pptx
Approche-des-risques-par-l’analyse-des-accidents-1.pptx
 
Pâques de Sainte Marie-Euphrasie Pelletier
Pâques de Sainte Marie-Euphrasie PelletierPâques de Sainte Marie-Euphrasie Pelletier
Pâques de Sainte Marie-Euphrasie Pelletier
 
Evaluación Alumnos de Ecole Victor Hugo
Evaluación Alumnos de Ecole  Victor HugoEvaluación Alumnos de Ecole  Victor Hugo
Evaluación Alumnos de Ecole Victor Hugo
 
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
LA MONTÉE DE L'ÉDUCATION DANS LE MONDE DE LA PRÉHISTOIRE À L'ÈRE CONTEMPORAIN...
 
Grammaire pour les élèves de la 6ème.doc
Grammaire pour les élèves de la  6ème.docGrammaire pour les élèves de la  6ème.doc
Grammaire pour les élèves de la 6ème.doc
 
Fondation Louis Vuitton. pptx
Fondation      Louis      Vuitton.   pptxFondation      Louis      Vuitton.   pptx
Fondation Louis Vuitton. pptx
 
Cours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptxCours-irrigation_et_drainage_cours1.pptx
Cours-irrigation_et_drainage_cours1.pptx
 
Bolero. pptx . Film de A nnne Fontaine
Bolero. pptx . Film   de  A nnne FontaineBolero. pptx . Film   de  A nnne Fontaine
Bolero. pptx . Film de A nnne Fontaine
 
presentation l'interactionnisme symbolique finale.pptx
presentation l'interactionnisme symbolique  finale.pptxpresentation l'interactionnisme symbolique  finale.pptx
presentation l'interactionnisme symbolique finale.pptx
 
gestion des conflits dans les entreprises
gestion des  conflits dans les entreprisesgestion des  conflits dans les entreprises
gestion des conflits dans les entreprises
 
Sidonie au Japon . pptx Un film français
Sidonie    au   Japon  .  pptx  Un film françaisSidonie    au   Japon  .  pptx  Un film français
Sidonie au Japon . pptx Un film français
 
La nouvelle femme . pptx Film français
La   nouvelle   femme  . pptx  Film françaisLa   nouvelle   femme  . pptx  Film français
La nouvelle femme . pptx Film français
 
Mécanique Automobile LE TURBOCOMPRESSEUR.ppt
Mécanique Automobile LE TURBOCOMPRESSEUR.pptMécanique Automobile LE TURBOCOMPRESSEUR.ppt
Mécanique Automobile LE TURBOCOMPRESSEUR.ppt
 
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdfCOURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
COURS SVT 3 EME ANNEE COLLEGE 2EME SEM.pdf
 
MaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.pptMaintenanceLa Maintenance Corrective.ppt
MaintenanceLa Maintenance Corrective.ppt
 
systeme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expertsysteme expert_systeme expert_systeme expert
systeme expert_systeme expert_systeme expert
 
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdf
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdfMICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdf
MICROBIOLOGIE ENDODONTIQUE english and frensh 25 nov 2020.pdf
 
A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.A3iFormations, organisme de formations certifié qualiopi.
A3iFormations, organisme de formations certifié qualiopi.
 
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
666148532-Formation-Habilitation-ELECTRIQUE-ENTREPRISE-MARS-2017.pptx
 
Présentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptxPrésentation de cartes d'extension zhr..pptx
Présentation de cartes d'extension zhr..pptx
 

seance1 Internet-WEB 21.ppt

  • 1. 1 Techniques du web LST Informatique @FST: 2016 - 2021 Mohamed OUZARF
  • 3. 3 Plan Internet WEB 1 WEB 2 Que faut-il pour « publier sur le web »? Autre recommandations Aspect juridiques Protocole HTTP Configuration des sites web
  • 4. 4 Internet L’Internet est un système de communication reliant les ordinateurs à travers le monde et leur permettant de communiquer et d’échanger les informations entre eux. Réseau des réseaux
  • 5. 5 Internet 1- Usage du protocole TCP/IP 2- Architecture Client/Serveur 3- Nécessite d'un protocole de communication :Http La base du Web
  • 6. 6 Définition Le web ou le World Wide Web «La toile d’araignée mondiale », (WWW, W3) est un système hypermédia « hypertexte » sur Internet. En quoi consiste une présentation web? Une présentation web, c’est un ensemble d’unités d’information (texte, images, son video,…) pour représenter un sujet ou à fournir un service. Web : WWW
  • 7. 7 Développé au CERN ( Centre Européen de Recherche Nucléaire) à Genève, Suisse, par Tim Berners-Lee en 1989. Ted Nelson (1965) est un sociologue-philosophe américain, Il est considéré comme l'inventeur du terme hypertexte . Actuellement le web est supervisé par un Consortium indépendantW3C. http://www.w3.org Web : Historique @timberners_lee: Director of W3C (www.w3.org) Prix Turing 2016.
  • 8. 8 Une page web est un fichier texte qui contient des liens vers d’autres fichiers ou vers des emplacements dans le même fichier. Un site web est un ensemble de pages web liés entre elles et qui tournent autour d’un thème donné. Page/site web
  • 9. 9 Un Utilisateur peut héberger son site web de trois manières : Directement dans son propre serveur Dans le serveur de son fournisseur d’accès à Internet Chez les hébergeurs dédiés ( peuvent être gratuits : yahoo, …) Hébergement d’un site web
  • 10. 10 Navigation dans le Web HTTP (HyperText Transfer Protocol) HTML (HyperText Markup Languge)
  • 12. 12 HTTP est un protocole de niveau applicatif qui permet la transmission de documents distribués et multimédia à travers le web. HTTP a été inventé par Tim Berners-Lee avec les adresses web et le langage HTML pour créer le World Wide Web. À cette époque, le File Transfer Protocol (FTP) était déjà disponible pour transférer des fichiers. HTTP L’HyperText Transfer Protocol, plus connu sous l’abréviation HTTP est un protocole de communication client-serveur développé pour le Web.
  • 13. 13 Mode de fonctionnement : Client/Serveur Utilise en général le protocole TCP Port par défaut 80 Une seule Connexion TCP pour chaque requête (http1.0) Fermeture de la connexion après la réponse du serveur. Possibilité d’exécuter plusieurs requêtes sur la même connexion (HTTP1.1) HTTP
  • 14. 14 Adresse universelle d’un document Composée de trois parties : service, serveur et chemin Syntaxe : Service://serveur/chemin_de_ressource Exemples http://fst-usmba.ac.ma/scolarite.html mailto:admin@fst-usmba.ac.ma telnet://login:mot_de_passe@fst-usmba.ac.ma News:actualites-fst URL : Uniform Resource Locator L’adresse de destination
  • 18. 18 Propriétés du web Lien Hypertexte Les informations sont réparties dans plusieurs (pages web) reliés par des liens dites liens hypertexte. Evite un parcours séquentiel des documents. Très pratique Références bibliographiques Dictionnaire Cours
  • 19. 19 Web 2.0 Le Web 2.0 est un renouveau du World Wide Web. L'évolution concerne :les technologies employées et les usages. les interfaces Web 2.0 permettent aux internautes d'interagir à la fois avec le contenu des pages mais aussi entre eux, faisant du Web 2.0 le web communautaire et interactif. (facebook…)
  • 20. 20 L'infrastructure du web 2.0 est complexe et changeante, mais elle inclut les logiciels de serveur, la syndication de contenu, les protocoles de messagerie, des standards de navigation, et des applications clientes diverses. Un site web est qualifié d’une approche web2.0 dès lors qu’il emploie des techniques comme CSS, Ajax et XLM. Évolution vers le web3.0 Technologies de web 2.0
  • 21. 21 Publication sur le web Outils de publication: il faut distinguer les moyens matériels et les moyens logiciels pour une publication sur le web. Le matériel Le web est fondé sur une architecture client/serveur. Le client c’est vous, et le serveur est une machine dotée d’une capacité disque suffisante et dont l’unité centrale aura la puissance nécessaire. Elle devra disposer d’une connexion haut débit sur l’internet. Le client, ce sera le plus souvent un ordinateur personnel.
  • 22. 22 Que faut-il pour «publier sur le web»? Le logiciel Du côté serveur, il faut un logiciel spécialisé qui répond aux demandes reçues des clients en leur envoyant les pages correspondantes. Du côté client, le problème est plus simple, car il suffit d’interpréter les codes de balisage qui émaillent les informations reçues de serveurs afin de restituer une mise en page qui se rapproche le plus possible de celle envisagée par le créateur de la page. Ce sont les logiciels que vous utilisez pour afficher les présentations offertes par le serveurs on les désigne sous le non de « browsers »
  • 23. 23 Les regèles à respecter  Pour la page d’accueil: • la page d’accueil doit commencer par expliquer l’obejectif du site. • Donner une introduction suffisante pour accrocher le public visé (vous avez moins de 30 secondes pour convaincre le visiteur, parfois, moins de 5 seconde) • Si vous travaillez pour une entreprise ou une organisation, la page d’accueil doit contenir le nom de cette organisation et un élément visuel (par exemple un logo ). • Il est indispensable de mettre sur la page d’accueil votre adresse, un numéro de téléphone, un mail. Comme ça, vous permettez aux internautes de vous contacter en cas de besoin. • Il est indispensable aussi d’indiquer la date de la derniere mise à jour du site
  • 24. 24 Les regèles à respecter  Pour chaque page individuelle : • Contenu de texte : entre 100 et 500 mots par page. • Séparateurs : mettez un titre, une barre de séparation ou une image tous les 40 à 100 mots. • Longueur de page : entre 2 et 4 écrans par page (avec un écran de 640x480) • Largeur de page : elle doit absolument tenir sur un seul écran (pas de défilement horizontal). • Taille de fichier : entre 15Ko et 30Ko (il ne faut pas dépasser 50Ko, image inclus). • Couleurs: 2 à 4 couleurs dominantes. • Fonts : Pas plus de 3 fonts. • Espace blanc : l’arrière-plan doit occuper plus de 50% de la page. C’est à dire, l’ensemble du texte et graphiques ne doit pas dépasser 50% de la page. Comme ça, la page apparait légère et agréable. • Aucune couleur de l’arrière-plan ne doit être proche de la couleur du texte. Sinon le texte devient illisible. • Style : tous les textes et images doivent être homogènes.
  • 25. 25 Les regèles à respecter  Pour le site dans sa totalité : • Il faut que le site dans sa totalité soit homogène. En créant une identité visuelle, le visiteur de votre site remarquera que toutes les pages de votre site se ressemblent. Ainsi, il sait qu’il est toujours sur le même site. • Utilisez le même style dans toutes les pages. Les feuilles de styles vous aideront énormément dans ce stade. • Si vous utilisez des images, des icônes ou boutons de navigation, utilisez les mêmes dans toutes les pages. Comme ça, et en plus de l’homogénéité visuelle, vous réduisez le temps de chargement des pages (car une image se charge une seule fois même si elle est utilisée plusieurs fois dans un site).
  • 26. 26 Les regèles à respecter • En ce qui concerne les liens : une étude a montré que les internautes se trouvent confus et mal à l’aise si on leur offre plus de sept choix. Ils préfèrent moins de cinq choix. Pour cette raison, évitez d’offrir plus de cinq liens hypertextes dans une page web. Dans le cas de besoin, regroupez ces liens dans des catégories chacune contenant moins de cinq liens. • Respecter la règle de 3 clicks : ne vous éloignez pas plus de trois niveaux depuis la page d’accueil. Testez aussi tous les liens périodiquement pour vous assurer qu’ils fonctionnent bien
  • 27. 27 Les regèles à respecter  A éviter dans un site web : • Évitez de publier sur internent des pages qui ne sont pas complètes. • Supprimez aussi tous les liens qui mènent vers ces pages. • Évitez de situer des liens vers des sites externes dans la page d’accueil. Si vous jugez un site intéressant pour les visiteurs de votre site, vous pouvez mettre un lien vers ce site dans une page interne. • Évitez la publicité mensongère
  • 28. 28 Autre recommandations L’actualisation Un livre comporte toujours une date de publication. De même, une présentation web doit être datée. Les sujet techniques ou ceux qui touchent à l’actualité ou à l’économie doivent faire l’objet de fréquentes mises à jour. L’auteur Une publication doit avoir un auteur. Même lorsqu’il s’agit d’une présentation réalisée pour le compte d’une entreprise industrielle ou commerciale ou d’un établissement public. Il doit toujours y avoir un nom d’auteur ou tout au moins une adresse E-mail à laquelle les lecteurs puissent faire parvenir des observations, des critiques, des commentaires ou des questions.
  • 29. 29 Autre recommandations Le respect du copyright Il est tentant de recopier des images, de sons ou des animations qui vous plaisent pour les réutiliser dans vos propres pages. Mais attention à respecter la propreté des autres. En générale lorsqu’il s’agit de sites web à but non commercial, les possesseurs d’images ne refusent jamais, si on le leur demande bien poliment, de donner leur autorisation. Et bien sur de les remerciant dans votre page d’accueil.
  • 30. 30 Aspect juridiques L’usage généralisé de l’internet est trop récent pour qu’il y ait déjà suffisamment de cas soumis aux tribunaux. Sur l’internet, les responsabilités sont mal définis et l’internationalisation du réseaux ne facilite pas l’application de lois nationales. Au cours de la publication d’un site web, Il faut respecter certaines choses: 1- le droit de citation 2- le respect des règles d’usage 3- le respect de la vie privée des autres.
  • 33. Stratégie dans le Web : google leader Mohamed.Ouzarf @ LST INFO 33
  • 34. Technique calcul % autorité grâce à <a> : balise d'ancre Mohamed.Ouzarf @ LST INFO 34