Internet : Réseau mondial d’ordinateurs connectés. Internet compte plusieurs applications dont le WWW -Le courrier électronique -La messagerie instantanée.

Présentation au sujet: "Internet : Réseau mondial d’ordinateurs connectés. Internet compte plusieurs applications dont le WWW -Le courrier électronique -La messagerie instantanée."— Transcription de la présentation:

1

2

3 Internet : Réseau mondial d’ordinateurs connectés. Internet compte plusieurs applications dont le WWW -Le courrier électronique -La messagerie instantanée -Réseau de partage Peer 2 Peer -Le World Wide Web Intranet : Réseau informatique clos en entreprise - Mêmes applications qu’internet : site web, messagerie, courrier électronique, partage de fichiers Extranet : Partage des ressources du réseau d’entreprise sur internet - Accès sécurisé via internet LES TYPES DE RESEAUX NB : L’accès à Internet se fait par un FAI, un fournisseur d’accès à Internet

4 World Wide Web : documents hypertextes reliés par des hyperliens. Hypertexte : - Hypertexte : page web / système des hyperliens « L'hypertexte est un média textuel contenant des liens entre divers points dans des documents» Hyperlien : - Hyperlien (lien hypertexte) : système de lien « système qui permet de passer de la consultation d’un contenu web à un autre, en reliant une référence du document hypertexte à un document tiers, ou à une autre partie de ce même document. » NB : Le système des hyperliens est à l’origine de la métaphore du « surf » sur internet et de la création du World Wide Web. DEFINITION DU WORLD WIDE WEB : WWW

5 3 inventions à l’origine du WWW : - Les adresses web qui sont la base du système des hyperliens sur internet. - Le protocole de communication HTTP (hypertext transfer protocol) - le langage html Composition d’une adresse web: http://www.exemple.fr/dossier/page.html Il existe d’autres protocoles de communications Internet parmi: FTP, HTTPS, MAILTO, FILE… NB : Lorsqu’on parle d’adresse web, on parle généralement d’URL, « Unified Ressource Locator », c'est-à-dire l’emplacement d’une ressource. ProtocoleNom de domaineDossier / fichier LES ORIGINES DU WWW

6

7 25 ans d’internet Web 1.0 ou web passif 1990-1993/2000 - WWW dans le domaine public - Fonctionnement linéaire : production / consommation - Développement azimut des technologies de programmations et des navigateurs => problèmes de compatibilités - 1996 démocratisation du WWW. Développement des services de messageries / courriers électroniques et des moteurs de recherches Le web 2.0, le Web productif 2000/… - 10M de sites en 2000 - Plateformes de productions de contenus interactifs C’est l’utilisateur qui produit le contenu des sites Création de Myspace / Facebook / Youtube entre 2003 et 2006 LE WEB 1.0 et 2.0

8 2 Nouvelles technologies apparues en 2007 AJAX : Ajax permet d’interroger et de récupérer des contenus sans changer de page. La transition et le changement de page est un facteur prépondérant dans la qualité d’un site. HTML 5 : - Un web sémantique, c'est-à-dire accès sur la compréhension du sens des mots - La portabilité du langage et des applications mobile et tablette | Web App et web mobile - Applications plus fournies qu’HTML4 : géolocalisation / animations / vidéos /sons API Le web 3.0, le Web syntaxique - Projection du web 2.0 - Système de mot clé remplacé par la compréhension de la syntaxe par les machines - Ecosystème informatique AJAX et HTML 5 vers un WEB 3.0 ?

9

10 - Le flux : Organisation des balises / structure sémantique du doc. - Métadonnées : Synthèse des informations d’un document (web ou autre). (pour le web : balises meta (description, keywords…) & contenus produits dans la page. - Hiérarchie d’infos : Les sections définissent les zones du document : article, menu, header, pied de page. Pour un web sémantique. - Les contenus (rich media): ensemble des médias intégrés dans la mise en page => Niveau de titres / textes => image/vidéo/son => on parle de Rich Media Ces contenus peuvent être : produits par le navigateur/ des fichiers locaux / (des fichiers externes / embarqués) - Interaction (JavaScript): programmation qui permet de rendre la page interactive en liant des évènements utilisateurs à des opérations effectuées sur la page COMPOSITION DE LA PAGE WEB (rich media)

11 3 modalités d’intégrations de contenus au sein d’une page web - Contenu produit dans le document HTML codé dans la page. Ex: Le texte. - Ressources locales (fichiers hébergé sur le même serveur, intégrés par le navigateur) Ex: les fichiers images, vidéos les qui constituent le design de notre site. - Ressources embarquées, provenant d’un site tiers (autre serveur). Ex: Vidéo embarquées de Youtube, documents XML etc.... INTEGRATION DE CONTENUS ET FLUX DE DONNEES NB : Lorsque nous embarquons du contenu, cela ne signifie pas que nous l’avons volé, mais que nous affichons un contenu provenant d’un autre site.

12

13 Un des 3 principes fondateurs du 3W Hypertexte : document avec des hyperliens Hyperlien : système de lien = > accéder à des pages ou des contenus : - internes (même page => ancre / même site) - externes (autre site) Possibilités: - Navigation entre les documents HTML, entre les contenus - Accéder à un endroit précis du document HTML : (ancre) Pour définir la cible d’un hyperlien ou intégrer une ressource dans notre document, nous utiliserons une URL DEFINITION DES HYPERLIENS

14 Balise Il est possible de créer des liens sur tout type de contenu (texte / boite …), en encadrant les balises en questions par … Ex: création d’un lien sur une image Attribut d’ouverture du contenu dans une nouvelle fenêtre : target=" _blank" Lien vers mail dans href: mailto: nom@domaine.ext Rappel : Unified Ressource Locator SYNTAXE DES HYPERLIENS contenu cliquable contenu cliquable

15 DEFINITION ET TYPES D’URL URL : Unified Ressource Locator : chemin à parcourir pour atteindre une ressource. - Permet la transition d’une page à une autre (visible dans la barre d’adresse) texte - Permet d’intégrer les ressources dans notre document, embarquer des contenus internes et externes Les URL peuvent être de 2 types : - Relatives : Le chemin à parcourir depuis la document en cours de lecture Navigation et ressources locales (même site / même dossier) - Absolues : L’adresse complète à parcourir pour atteindre le fichier. -> Navigation et ressources externe (provenant d’un autre site). NB : Il existe un 3 ème type « symbolique », nous ne l’utilisons pas dans nos applications. Il s’agit d’un raccourci qui pointe vers un autre dossier

16 Relatives : Permet d’accéder à un contenu disponible sur notre machine -> Navigation locale Composition : - Imbrication des dossiers et nom de fichier : Ex : dossier/dossier2/fichier.ext - «.. » permet descendre la hiérarchie des dossiers d’un nivea : Ex :../dossier3/fichier.ext Conserver la symétrie d’accès aux ressources en local et sur le serveur lien LES URL RELATIVES

17 Absolues : L’adresse complète à parcourir pour atteindre le fichier depuis n’importe quel emplacement. Un lien absolu aura vocation d’afficher une page ou une ressource d’un autre site -> accès à un contenu extérieur Ex : http://www.monsite.com/contacts.php Les liens absolus sont souvent utilisés pour récupérer du contenu provenant d’ un autre site. LES URL ABSOLUES

18 Il est possible d’interpréter directement certains types de fichiers dans le navigateur Image : Mon Image Musique : Ma musique Vidéo : Ma vidéo (dépend du navigateur) Lorsque un navigateur ne peut pas interpréter le contenu d’un fichier, il le propose en téléchargement. Il est également possible d’appeler les contenus qui vont être embarqués dans la mise en page web avec des balises : pour les images, & … avec un player : son / video… NAVIGATEURS ET INTERPRETATION DES FICHIERS

19 Déplacement de la fenêtre du navigateur à un endroit précis de la page. Ex: Wikipédia. A chaque fois que l’on clique sur une ancre, le navigateur considère cela comme une étape de navigation (bouton précédent). Ajout d’un # dans la barre d’adresse Dans le référencement les ancres sont considérées comme des liens Il est possible de combiner un lien avec une ancre (attention perte de repères) Mon lien NB : On utilise également ce système pour retourner en haut de la page. LES ANCRES

20 Permet de rendre certaines zones de l’image cliquables. Chaque zone peut être un rond un carré ou un polygone et fait le lien avec un document ‘html’. NB : Il est conseillé d’utiliser un logiciel d’aide à la production de code pour réaliser ces zones (Dreamweaver) MAPPING

21 Les informations stockées par votre navigateur: - Historique des URL déjà visitées - Cache - Formulaires - Cookies - Connexion actuels (login) Apparence des liens - Différencier les liens du texte courant (en CSS ) a{color:blue;} - Connaître les liens qui ont déjà été visités (en CSS ) a:visited{color:purple;} - Changer la couleur du lien lorsque l’on passe dessus avec la souris a:hover En CSS a:hover{color:purple;} NB : Pour réinitialiser l’état des liens il faut supprimer l’historique de la machine. CACHE / HISTORIQUE / APPARENCE DES LIENS

22 SEO ou Search Engine Optimisation = Optimisation du référencement Activité de référencement = sciences de suggestions Grande importance des liens dans le référencement Backlink = lien provenant d’un autre site Google - 90% des recherches - Fonctionne avec un algorithme que personne ne connait - Adword : outil de référencement, analyse des liens Plusieurs types de référencement : - Référencement naturel : sémantique / hiérarchie de l’information / persistance des mots clés / meta Outils : google Analytics / Google Webmaster / Site Map / annuaire -Référencement payant : Outils : Adword / campagne payante / référenceur et réseaux d’annonces -Référencement artificiel Outils : Bots / sites satellites LE REFERENCEMENT PAR LES LIENS