Vincent Peigné / Cours et TD

Transcription

1

2 Vincent Peigné / Cours et TD Fondamentaux du web, Langages client Web Design, Ergonomie, E-Logistique, E-Boutique

3 Les fondamentaux du web LPCEL promotion 2015/2016 Vincent Peigné

4 4 Introduction Remise à niveau Comprendre le fonctionnement général Connaitre les implications Appréhender le contenu de la formation Introduction à la technique

5 5 Sommaire 1. Comment ça marche 2. Du statique au collaboratif 3. Les principales technologies 4. Créer un site web 5. Les types de sites 6. Référencement et communication

6 6 1. Comment ça marche

7 7 1. Comment ca marche 1.1. Généralités 1.2. Réseaux et le modèle TCP/IP 1.3. Les principaux acteurs 1.4. Noms de domaine 1.5. Le protocole HTTP 1.6. Les serveurs (DNS, Web) 1.7. Affichage d une page web

8 Généralités Internet : le réseau des réseaux Interconnexion de machines et de réseaux 1 ère utilisation du terme en 1983 Applications connues World Wide Web (créé par le CERN) Mails Usenet Identification par adresse IP (ex : )

9 9 1. Comment ca marche 1.1. Généralités 1.2. Réseaux et le modèle TCP/IP

10 Réseaux et modèle TCP/IP Structure en couche ou en pile Modèle OSI (Open Systems Interconnexion) simplifié : modèle Internet Entre 5 et 7 couches OSI : Physique, liaison, réseau, transport, session, présentation et application TCP/IP : Physique, liaison, réseau, transport, application 5,6 et 7 Courriel Web ERP Vidéo Voix 4 TCP UDP 3 Protocole IP : dénominateur commun 2 Ethernet Token Ring ATM FDDI Frame Relay PPP 1 Cuivre, Fibre Optique, réseau radio

11 Réseaux et modèle TCP/IP Comparaison avec une expédition Envoi d un ou plusieurs colis par une entreprise Application => Entreprise qui envoie (Gestion du stock) Transport => Segmentation des expéditions Réseau => Camions sur la route Liaison => Organisation du réseau routier Physique => La route, le bitume 5,6 et 7 Courriel Web ERP Vidéo Voix 4 TCP UDP 3 Protocole IP : dénominateur commun 2 Ethernet Token Ring ATM FDDI Frame Relay PPP 1 Cuivre, Fibre Optique, réseau radio

12 12 1. Comment ca marche 1.1. Généralités 1.2. Réseaux et le modèle TCP/IP 1.3. Les principaux acteurs

13 Les principaux acteurs Web géré par de grands organismes ICANN, VeriSign, AFNIC IETF, Internet Society, IANA A notre échelle FAI, Registrar, Hébergeur Grandes entreprises : Google, Microsoft Nous tous!

14 14 1. Comment ca marche 1.1. Généralités 1.2. Réseaux et le modèle TCP/IP 1.3. Les principaux acteurs 1.4. Noms de domaine

15 Noms de domaines Identifiant de domaine Internet (NDD) Masque d adresse IP plus simple pour échanger Géré par les «Registrar» OVH, Gandi Réglementé par l ICANN et ses composantes Réservation du NDD pour une durée limitée

16 Noms de domaines Restriction selon l extension.com pas de restriction.net pas de restriction.fr obligation de résider en France C est aussi : La notion de Domain Parking Grand intérêt commercial Peut couter très cher

17 17 1. Comment ca marche 1.1. Généralités 1.2. Réseaux et le modèle TCP/IP 1.3. Les principaux acteurs 1.4. Noms de domaine 1.5. Le protocole HTTP

18 Le protocole HTTP HyperText Transfert Protocol (version 1.1) Protocole de communication sur Internet Uniform Resource Locator (URL) Préfixe HTTP permet : L échange entre client (navigateur) et serveur (web) Différentes types de requêtes (GET, POST ) Notion de statut (200, 404, 500 )

19 19 1. Comment ca marche 1.1. Généralités 1.2. Réseaux et le modèle TCP/IP 1.3. Les principaux acteurs 1.4. Noms de domaine 1.5. Le protocole HTTP 1.6. Les serveurs (DNS, Web) 1.7.

20 Les serveurs (DNS, Web) Serveurs Machines ET Logiciels Machine Ordinateur (puissant) Fonctions précises Rarement coupée Logiciel Tourne en permanence (démon) Reçoit des requêtes, retourne des réponses

21 Les serveurs (DNS, Web) Domain Name System Résolution des NDD en adresse IP Fondation du World Wide Web Pour un nom de domaine 1 serveur DNS primaire X serveurs DNS secondaire Des milliers à travers le monde Chaque serveur peut avoir un serveur DNS 13 serveurs racines

22 Les serveurs (DNS, Web) Gestion hiérarchique des NDD Racine TLD : Top Level Domain Nommé «extension» Le domaine Notion de sous-domaines

23 Les serveurs (DNS, Web) Résolution par itération Communications successives Résoudre étape / étape

24 Les serveurs (DNS, Web) Serveur Web Traitement des appels HTTP Exemple : Apache Gestion des sites Déclaration des sites hébergés Serveurs virtuels associés aux NDD Reçoit une requête Retourne la réponse appropriée

25 25 1. Comment ca marche 1.1. Généralités 1.2. Réseaux et le modèle TCP/IP 1.3. Les principaux acteurs 1.4. Noms de domaine 1.5. Le protocole HTTP 1.6. Les serveurs (DNS, Web) 1.7. Affichage d une page web

26 Affichage d une page web 2 1 Internaute 8 PC 3 DNS Résolution DNS Réponse DNS (IP) 4 Requête HTTP 5 Traitement 6 Gestion réponse Serveur Web 5 Vérification + Génération HTML 7 Réponse HTTP 6 8 Affichage

27 27 2. Du statique au collaboratif

28 28 2. Du statique au collaboratif 2.1. Généralités 2.2. Le web Le web L avenir et le web 3.0

29 Généralités Naissance du World Wide Web Créé au CERN Tim Berners-Lee URL, HTML et HTTP Echanger de l information simplement Texte mis en forme (HTML) Image Word Wide Web Consortium (W3C)

30 30 2. Du statique au collaboratif 2.1. Généralités 2.2. Le web

31 Le web 1.0 Nom purement journalistique Premières années du web Web statique, peu/pas d interaction Sites informatifs ou professionnels Similaire au format papier Pages HTML simples Peu de graphisme Navigation de page en page uniquement

32 32 2. Du statique au collaboratif 2.1. Généralités 2.2. Le web Le web

33 Le web 2.0 Web participatif 2003/2004 Syndication des contenus Elargissement des fonctionnalités Technologies plus poussées CSS, XHTML, Javascript, RSS, ATOM Communauté et web social Forums, Facebook, Twitter Web mobile

34 Le web 2.0

35 35 2. Du statique au collaboratif 2.1. Généralités 2.2. Le web Le web L avenir et le web 3.0

36 L avenir et le web 3.0 Personne ne sait exactement où nous allons Technologies plus poussées HTML 5, CSS 3 Web ultra mobile Web 3D Web sémantique Interaction entre les données Plus grande organisation des informations Micro-formats

37 37 3. Les principales technologies

38 38 3. Les principales technologies 3.1. Généralités 3.2. Les langages serveurs 3.3. (X)HTML 3.4. CSS 3.5. Javascript 3.6. Autres technologies 3.7. Les normes et le W3C 3.8. L accessibilité

39 Généralités Deux grandes parties Le coté serveur Création de pages dynamiques Connexion à des bases de données Traitements complexes Le coté client Affichage des pages Graphisme et mise en forme Animation et dynamisme

40 40 3. Les principales technologies 3.1. Généralités 3.2. Les langages serveurs

41 Les langages serveurs Langages pour générer des pages dynamiques PHP,.NET, Java, Python Génération de code HTML Serveur web : Apache, IIS, Tomcat PHP : Hypertext Preprocessor Acronyme récursif Langage interprété sous forme de scripts Très souple, simple à apprendre

42 Les langages serveurs Fichiers nommés.php Balisage : <?php?> Exemple d un script

43 Les langages serveurs Mode opératoire pour générer une page

44 44 3. Les principales technologies 3.1. Généralités 3.2. Les langages serveurs 3.3. (X)HTML

45 (X)HTML Hyper Text Markup Language Langage client Langage à balisage Possibilité de mise en forme basique Version 4.01 répandue, v5 en cours HTML 5, l avenir du web XHTML 1.0 : version plus stricte d HTML Notion d XML

46 (X)HTML Grand nombre de balises Document : <html>, <body> Information : <title>, <meta> Hiérarchie : <h1> <h6> Structure et texte : <div>, <span>, <p> Balises ouvrantes et fermantes (XHTML) <p> </p>, <br /> 2 grands types : «bloc» et «en ligne»

47 (X)HTML Structure et code XHTML

48 (X)HTML (X)HTML 5 Nouvelle organisation du document Nouvelles balises : <header>, <section> etc. Respect des règles XML Objectifs Améliorer les structures Structures orientées «contenu» (référencement) Clients riches : audio, vidéo

49 (X)HTML Exemple de structure HTML 5

50 (X)HTML Code XHTML 5

51 51 3. Les principales technologies 3.1. Généralités 3.2. Les langages serveurs 3.3. (X)HTML 3.4. CSS

52 CSS Cascading Style Sheets Langage client Mise en forme visuelle Objectifs et intérêts Séparer le fond de la forme Conception modulaire Uniformisation des pages d un site Réduction du code HTML

53 CSS Bataille de navigateurs Google Chrome, Firefox, Opéra Internet Explorer Quand même mieux ave Edge (Windows 10) Grand nombre de propriétés Positionnement : fixe, flottant, absolu.. Mise en forme : couleur, police Adaptation du style en fonction du média Ecran, imprimante etc.

54 CSS Deux modes d intégration directement dans le code HTML Au niveau des balises : <div style="..."> Avec la balise style : <style type="text/css">...</style> Fichiers annexes Dans le <head> <link href="fichier.css" rel="stylesheet" type="text/css" /> Code CSS Notion d ID et de classe : attribut HTML Importance de la cascade

55 CSS Code CSS intégré Code CSS avec fichiers annexes

56 56 3. Les principales technologies 3.1. Généralités 3.2. Les langages serveurs 3.3. (X)HTML 3.4. CSS 3.5. Javascript

57 Javascript Langage historique du web Langage client 1995 avec Netscape Navigator Version 1.8 : figé depuis longtemps Langage pour contrôler les éléments HTML Les formulaires Dynamisation du contenu

58 Javascript Deux modes d intégration Directement sur les balises Attributs => onclick, onblur Dans le <body> <script type="text/javascript">...</script> Dans le <head> : Fichiers annexes <script type="text/javascript" src="fichier.js"></script> Nécessité d alléger la source HTML

59 Javascript Pas évident à appréhender Vision développeur Bonne notion de programmation L arrivée des bibliothèques : jquery, Mootools Simplification du code Gestion poussée d évènements Manipulation CSS, HTML Notion de plugins

60 Javascript jquery Version Existe en version mobile Syntaxe simple et efficace Cross-browser Communauté importante Grande richesse de sites Nombreux plugins existants

61 Les autres technologies Exemple de code jquery

62 62 3. Les principales technologies 3.1. Généralités 3.2. Les langages serveurs 3.3. (X)HTML 3.4. CSS 3.5. Javascript 3.6. Autres technologies

63 Autres technologies Flash / Flash Player Nécessité d un plugin sur le navigateur Souvent lourd Rendu visuel très propre (vectoriel) Problématique pour le référencement Silverlight Equivalent Microsoft de Flash Part de marché grappillées par HTML 5 Limité à des bannières publicitaires Jeux en ligne

64 64 3. Les principales technologies 3.1. Généralités 3.2. Les langages serveurs 3.3. (X)HTML 3.4. CSS 3.5. Javascript 3.6. Autres technologies 3.7. Les normes et le W3C 3.8.

65 Les normes et le W3C World Wide Web Consortium Organisme de normalisation Edicte des règles à suivre ( ou pas) Recommandations du W3C HTML, XHTML, CSS Important de suivre les recommandations Sites de qualité Sites à jour Evite les problèmes présents et futurs

66 66 3. Les principales technologies 3.1. Généralités 3.2. Les langages serveurs 3.3. (X)HTML 3.4. CSS 3.5. Javascript 3.6. Autres technologies 3.7. Les normes et le W3C 3.8. L accessibilité

67 L accessibilité Important d avoir un web pour tous Loin d être le cas Problème pour les malvoyants et les personnes âgées Notion souvent mise de coté Raisons techniques Raisons économiques Web Accessibility Initiative Fait des recommandations WCAG 1.0 vise le contenu web (HTML/CSS) WCAG 2.0 vise les technologies de conception web

68 L accessibilité WCAG directives 65 points de contrôle Réparties en 3 priorités Niveau 1 : ce qui doit être fait Niveau 2 : ce qui devrait être fait Niveau 3 : ce qui peut être fait WCAG directives Réparties en 3 niveaux A : niveau d accessibilité minimal AA : améliorer le niveau d accessibilité AAA : niveau supérieur d accessibilité

69 69 4. Créer un site web

70 70 4. Créer un site web 4.1. Généralités 4.2. Le projet 4.3. Le zoning 4.4. Le graphisme 4.5. L intégration 4.6. Le développement 4.7. Le suivi 4.8. Vision générale

71 Généralités Sites web Ensemble de briques Relations humaines Communication Développement techniques Différents projets Projet personnel Projet professionnel

72 72 4. Créer un site web 4.1. Généralités 4.2. Le projet

73 Le projet Important de bien définir les contours Spécifications clients et techniques Cahier des charges Cadrer et orienter le client Apporter de la valeur ajoutée 3 notions essentielles valables en permanence Communication Faculté d analyse Esprit critique

74 74 4. Créer un site web 4.1. Généralités 4.2. Le projet 4.3. Le zoning

75 Le zoning Schéma organisationnel d un site Importance de l ergonomie Simple à comprendre Utile à tous client, chef de projet, graphiste, développeur, référenceur Aller/Retour client Prendre en compte les avis Critiquer les idées proposées Validation du client obligatoire!

76 Le zoning Exemple de zoning Pas d échelle Cadres simples Disposition des blocs Pas de règles Plus de détails Question de temps Personnalité du client

77 77 4. Créer un site web 4.1. Généralités 4.2. Le projet 4.3. Le zoning 4.4. Le graphisme

78 Le graphisme Réalisation d une charte graphique Plus ou moins complexe Respecter les envies du client Respecter le zoning Laisser faire les graphistes Critiques et suggestions Plusieurs créations possibles (fonction du devis) Validation du client obligatoire! / Beewishop.com

79 Le graphisme Comparaison zoning / charte graphique

80 80 4. Créer un site web 4.1. Généralités 4.2. Le projet 4.3. Le zoning 4.4. Le graphisme 4.5. L intégration

81 L intégration Passage d une charte à du code HTML/CSS Travail essentiel Bien réfléchir avant de se lancer Faire les choses proprement Grandes étapes Créer la structure HTML Découper la charte en images plus petites Créer les feuilles CSS

82 L intégration Outils nécessaires Selon le format de la charte Adobe Photoshop Adobe Illustrator Editeur de code Notepad++, Eclipse Bien organiser ses fichiers Facilite les modifications Aide les développeurs (gens parfois susceptibles )

83 83 4. Créer un site web 4.1. Généralités 4.2. Le projet 4.3. Le zoning 4.4. Le graphisme 4.5. L intégration 4.6. Le développement

84 Le développement Phase technique Création des pages dynamiques Travail des développeurs Echange avec toute l équipe Développeur intégrateur Structure employée Utilisation de logiciels libres Utilisation de solutions internes Phase de tests obligatoire!

85 85 4. Créer un site web 4.1. Généralités 4.2. Le projet 4.3. Le zoning 4.4. Le graphisme 4.5. L intégration 4.6. Le développement 4.7. Le suivi 4.8.

86 Le suivi Site terminé, testé et validé par le client Mise en ligne Bon de recettage Ce n est pas fini! Maintenance : corrections, améliorations Référencement et positionnement Gestion sur plusieurs mois Echanges client constants Référenceur doit intervenir sur toutes les étapes

87 87 4. Créer un site web 4.1. Généralités 4.2. Le projet 4.3. Le zoning 4.4. Le graphisme 4.5. L intégration 4.6. Le développement 4.7. Le suivi 4.8. Vision générale

88 Vision globale Rédaction Cahier des charges Validation Création Zoning Validation Chef de projet Supervision Charte Validation Client Supervision Intégration Développement Gestion Validation Suivi Validation/Consultation

89 89 5. Les types de sites

90 90 5. Les types de sites 5.1. Site Corporate 5.2. Site E-Commerce 5.3. Réseau social 5.4. Le blog 5.5. Site mobile

91 Site Corporate Site vitrine ou institutionnel Intérêts Faire parler de l entreprise Mettre en avant sa politique Parler de ses clients Cibles Les partenaires, les investisseurs les futures clients, personne en recherche d information La presse, les demandeurs d emploi

92 92 5. Les types de sites 5.1. Site Corporate 5.2. Site E-Commerce

93 Site E-Commerce Site de commerce en ligne Secteur florissant Idée préconçue : facile de gérer une boutique Intérêts Vendre les produits Communiquer auprès d une communauté Grand intérêt marketing Cibles Tout le monde Le particulier et/ou le professionnel

94 Site E-Commerce Site technique et très vaste Gestion client Gestion du catalogue et des ventes Paiement bancaire Gestion des livraisons Importance de l ergonomie Encore plus vrai sur le E-commerce Simplifier la navigation et l utilisation Format apprécié par les spécialistes du : Web marketing Référencement Community management

95 95 5. Les types de sites 5.1. Site Corporate 5.2. Site E-Commerce 5.3. Site communautaire

96 Réseau social Du forum à Facebook, Twitter, Pinterest Objectifs Création d interactions sociales Partager / échanger Regroupement d amis virtuels et/ou réels Emergence grâce au web 2.0 Plus d interaction Facilité d utilisation

97 Réseau social Réseau personnel ou professionnel Importance sociologique Les 6 degrés de séparation (Frigyes Karenthy) Reprise par Stanley Milgram 1967 Facebook => 4,74 Réseautage social Facebook, Twitter, Google+, Pinterest Viadéo, LinkedIn

98 98 5. Les types de sites 5.1. Site Corporate 5.2. Site E-Commerce 5.3. Site communautaire 5.4. Le blog 5.5.

99 Le blog Format personnel du site internet Tout le monde peut en avoir un Plateforme en ligne Overblog, Blogger Logiciels libres Dotclear, WordPress L un des symboles du web 2.0 Communication pour les entreprises Nouveau format d actualités Communication moins officielle

100 Les types de sites 5.1. Site Corporate 5.2. Site E-Commerce 5.3. Réseau social 5.4. Le blog 5.5. Site mobile

101 Site mobile Tout le monde a un Smartphone Augmentation des connexions via mobile Enjeux économiques et commerciaux Secteur en développement Mêmes technologies : HTML/CSS Ergonomie point majeur! Coût supplémentaire pour les entreprises : rentable? Futur combat Web mobile vs Application mobile

102 Référencement et communication

103 Référencement et communication 6.1. Généralités 6.2. Référencement naturel 6.3. Référencement payant 6.4. Réseaux sociaux 6.5. Communication et newsletter

104 Généralités L un des piliers du web actuel Obligation de se référencer Volonté d être visible Enjeux commerciaux Plusieurs formats Référencement naturel et payant Web social

105 Référencement et communication 6.1. Généralités 6.2. Référencement naturel

106 Référencement naturel Augmenter la visibilité Travail sur le moyen/long terme Travail régulier Analyser les statistiques : Google Analytics Améliorer sa position sur les moteurs de recherche Optimisation des contenus Balises Metas, code HTML, textes, réécriture d Urls Optimisation du maillage Liens internes Liens externes (netlinking)

107 Référencement et communication 6.1. Généralités 6.2. Référencement naturel 6.3. Référencement payant

108 Référencement payant Acheter son positionnement Assurer une visibilité Coût variable Enchères Change d un secteur à l autre Achat de liens sponsorisés Google Adwords / Google Adsense

109 Référencement payant Au démarrage Action ponctuelle Référencement naturel prend le relai

110 Référencement et communication 6.1. Généralités 6.2. Référencement naturel 6.3. Référencement payant 6.4. Réseaux sociaux 6.5.

111 Réseaux sociaux Secteur de plus en plus important Un élément du E-Marketing Facebook, Google +, Twitter E-Reputation Format à prendre en compte Pour les particuliers Partage, échange, avis Pour les entreprises Leviers économiques, animations commerciales Fidélisation, communication

112 Référencement et communication 6.1. Généralités 6.2. Référencement naturel 6.3. Référencement payant 6.4. Réseaux sociaux 6.5. Communication et newsletter

113 Communication et newsletter Importance de la communication Garder contact avec ses clients La fidélisation E-Marketing La newsletter Envoi de mail à des clients (opt-in) Ciblage augmentation de la conversion Ouverture du mail Transformation en visite ou vente potentielle

114 114 Conclusion

115 115 Conclusion Notions techniques Noms de domaines, les serveurs web Langages serveurs (PHP), HTML 5, CSS 3, Javascript (jquery) Ergonomie Etapes d un site Le projet, zoning, graphisme, Intégration, développement, suivi Référencement, communication et marketing Naturel, payant, web social, E-Reputation, E-Marketing, newsletter De manière générale Communication, faculté d analyse, esprit critique Documentez-vous, intéressez-vous à tout