vincent peigné [email protected] cours et td [email protected]

Vincent Peigné[email protected]

Cours et TD http://lpcel.edelweiss-studio.net

Fondamentaux du web, Langages clientWeb Design, Ergonomie, E-Logistique, E-Boutique

LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

mailto:[email protected]

http://lpcel.edelweiss-studio.net/

Les fondamentaux du web

LPCEL – promotion 2014/2015Vincent Peigné

Introduction

• Remise à niveau

• Comprendre le fonctionnement général

• Connaitre les implications

• Appréhender le contenu de la formation

• Introduction à la techniqueLPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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 communicationLPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

1. Comment ça marche


1. Comment ca marche

1.1. Généralités1.2. Réseaux et le modèle TCP/IP1.3. Les principaux acteurs1.4. Noms de domaine1.5. Le protocole HTTP1.6. Les serveurs (DNS, Web)1.7. Affichage d’une page web


1.1. 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 : 192.168.1.1)



1.1. Généralités1.2. Réseaux et le modèle TCP/IP1.3. 1.4. 1.5. 1.6. 1.7.


1.2. 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

LPCEL promotion 2014/2015

Cuivre, Fibre Optique, réseau radio…1

Ethernet2 Token Ring ATM FDDI Frame Relay PPP

Protocole IP : dénominateur commun3

TCP4 UDP

5,6 et 7 Courriel Web ERP Vidéo Voix

Vincent Peigné - Edelweiss Studio

1.2. Réseaux et modèle TCP/IP• Comparaison avec une expédition• Maison en kit

– Application => Entreprise qui envoie– Transport => Segmentation des expéditions– Réseau => Camions sur la route– Liaison => Organisation du réseau routier– Physique => La route, le bitume


Cuivre, Fibre Optique, réseau radio…1

Ethernet2 Token Ring ATM FDDI Frame Relay PPP

Protocole IP : dénominateur commun3

TCP4 UDP

5,6 et 7 Courriel Web ERP Vidéo Voix


1.1. Généralités1.2. Réseaux et le modèle TCP/IP1.3. Les principaux acteurs1.4. 1.5. 1.6. 1.7.


1.3. 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 !



1.1. Généralités1.2. Réseaux et le modèle TCP/IP1.3. Les principaux acteurs1.4. Noms de domaine1.5.1.6. 1.7.


1.4. 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


1.4. 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



1.1. Généralités1.2. Réseaux et le modèle TCP/IP1.3. Les principaux acteurs1.4. Noms de domaine1.5. Le protocole HTTP1.6.1.7.


1.5. Le protocole HTTP

• HyperText Transfert Protocol (version 1.1)• Protocole de communication sur Internet• Uniform Resource Locator (URL)– Préfixe http://

• HTTP permet : – L’échange entre client (navigateur) et serveur (web)– Différentes types de requêtes (GET, POST…)– Notion de statut (200, 404, 500…)



1.1. Généralités1.2. Réseaux et le modèle TCP/IP1.3. Les principaux acteurs1.4. Noms de domaine 1.5. Le protocole HTTP1.6. Les serveurs (DNS, Web)1.7.


1.6. Les serveurs (DNS, Web)

• Serveurs Machines ET Logiciels• Machine– Ordinateur (puissant)– Fonctions précises– Rarement coupée

• Logiciels– Tourne en permanence (démon)– Reçoit des requêtes, retourne des réponses



• 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




• Gestion hiérarchique des NDD– Racine– TLD : Top Level Domain– Notion de sous-domaines



• Résolution par itération– Communication entre les serveurs DNS



• 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



1.1. Généralités1.2. Réseaux et le modèle TCP/IP1.3. Les principaux acteurs1.4. Noms de domaine1.5. Le protocole HTTP1.6. Les serveurs (DNS, Web)1.7. Affichage d’une page web


1.7. Affichage d’une page web


Internaute PC

Serveur Web

Vérification+

Génération HTML

1 – http://www.monsite.com

2

3

4

5

6

7

8

2 – Résolution DNS

3 – Réponse DNS (IP)

4 – Requête HTTP

5 – Traitement

6 – Gestion réponse

8 – Affichage

1

7 – Réponse HTTP

DNS



2.1. Généralités

2.2. Le web 1.0

2.3. Le web 2.0

2.4. L’avenir et le web 3.0


2.1. 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)



2.1. Généralités

2.2. Le web 1.0

2.3.

2.4.


2.2. Le web 1.0

• Nom purement journalistique• Premières années du web - 1994• 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



2.1. Généralités

2.2. Le web 1.0

2.3. Le web 2.0

2.4.


2.3. 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


2.3. Le web 2.0



2.1. Généralités

2.2. Le web 1.0

2.3. Le web 2.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



3.1. Généralités3.2. Les langages serveurs3.3. (X)HTML3.4. CSS3.5. Javascript3.6. Autres technologies3.7. Les normes et le W3C3.8. L’accessibilité


3.1. 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



3.1. Généralités3.2. Les langages serveurs3.3. 3.4. 3.5. 3.6. 3.7. 3.8.


3.2. 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



• Fichiers nommés .php• Balisage : <?php … ?>• Exemple d’un script



• Mode opératoire pour générer une page



3.1. Généralités3.2. Les langages serveurs3.3. (X)HTML3.4. 3.5. 3.6. 3.7. 3.8.


3.3. (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


3.3. (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 »LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

3.3. (X)HTML

• Structure et code XHTML


3.3. (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


3.3. (X)HTML

• Exemple de structure HTML 5


3.3. (X)HTML

• Code XHTML 5



3.1. Généralités3.2. Les langages serveurs3.3. (X)HTML3.4. CSS3.5. 3.6. 3.7. 3.8.


3.4. 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


3.4. CSS

• Bataille de navigateurs– Google Chrome, Firefox, Opéra – Internet Explorer

• 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.


3.4. 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


3.4. CSS

• Code CSS intégré


• Code CSS : fichiers annexes



3.1. Généralités3.2. Les langages serveurs3.3. (X)HTML3.4. CSS3.5. Javascript3.6. 3.7. 3.8.


3.5. 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


3.5. 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


3.5. 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


3.5. Javascript

• jQuery– Version 1.11.1 – Existe en version mobile– Syntaxe simple et efficace– Cross-browser

• Communauté importante– Grande richesse de sites– Nombreux plugins existants


3.6. Les autres technologies

• Exemple de code jQuery



3.1. Généralités3.2. Les langages serveurs3.3. (X)HTML3.4. CSS3.5. Javascript3.6. Autres technologies3.7. 3.8.


3.8. 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



3.1. Généralités3.2. Les langages serveurs3.3. (X)HTML3.4. CSS3.5. Javascript3.6. Autres technologies3.7. Les normes et le W3C3.8.


3.7. 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



3.1. Généralités3.2. Les langages serveurs3.3. (X)HTML3.4. CSS3.5. Javascript3.6. Autres technologies3.7. Les normes et le W3C3.8. L’accessibilité


3.8. 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


3.8. L’accessibilité

• WCAG 1.0– 14 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 2.0– 12 directives– Réparties en 3 niveaux

• A : niveau d’accessibilité minimal• AA : améliorer le niveau d’accessibilité• AAA : niveau supérieur d’accessibilité



4.1. Généralités4.2. Le projet4.3. Le zoning4.4. Le graphisme4.5. L’intégration4.6. Le développement4.7. Le suivi4.8. Vision générale


4.1. Généralités

• Sites web– Ensemble de briques– Relations humaines– Communication– Développement techniques

• Différents projets– Projet personnel– Projet professionnel



4.1. Généralités4.2. Le projet4.3. 4.4. 4.5. 4.6. 4.7. 4.8.


4.2. 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



4.1. Généralités4.2. Le projet4.3. Le zoning4.4. 4.5. 4.6. 4.7. 4.8.


4.3. 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 !LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

4.3. 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



4.1. Généralités4.2. Le projet4.3. Le zoning4.4. Le graphisme4.5. 4.6. 4.7. 4.8.


4.4. 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 !LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio / Beewishop.com

4.4. Le graphisme

• Comparaison zoning / charte graphique



4.1. Généralités4.2. Le projet4.3. Le zoning4.4. Le graphisme4.5. L’intégration4.6. 4.7. 4.8.


4.5. 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


4.5. 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…)



4.1. Généralités4.2. Le projet4.3. Le zoning4.4. Le graphisme4.5. L’intégration4.6. Le développement4.7. 4.8.


4.6. 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 !LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio


4.1. Généralités4.2. Le projet4.3. Le zoning4.4. Le graphisme4.5. L’intégration4.6. Le développement4.7. Le suivi4.8.


4.7. 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



4.1. Généralités4.2. Le projet4.3. Le zoning4.4. Le graphisme4.5. L’intégration4.6. Le développement4.7. Le suivi4.8. Vision générale


4.8. Vision globale


Cahier des charges

Zoning

Charte

IntégrationDéveloppement

ValidationSuivi

Chef de projet Client

Rédaction

Création

Supervision

Gestion

Validation/Consultation

Validation

Validation

Validation

Supervision



5.1. Site Corporate

5.2. Site E-Commerce

5.3. Réseau social

5.4. Le blog

5.5. Site mobileLPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

5.1. 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



5.1. Site Corporate


5.3.

5.4.

5.5. LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio


• 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


5.2. 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



5.1. Site Corporate


5.3. Site communautaire

5.4.


5.3. 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


5.3. 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



5.1. Site Corporate


5.3. Site communautaire

5.4. Le blog


5.4. 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



5.1. Site Corporate


5.3. Réseau social

5.4. Le blog

5.5. Site mobileLPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

5.4. 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


6. 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 newsletterLPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

6.1. 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



6.1. Généralités


6.3.

6.4. 6.5.


6.2. 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)



6.1. Généralités



6.4. 6.5.



• 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



• Au démarrage et action ponctuelle• Le référencement naturel prend le relai



6.1. Généralités




6.5.LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio


• 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


6.1. Généralités




6.5. Communication et newsletterLPCEL promotion 2014/2015



6.4. 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


Conclusion


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


vincent peigné [email protected] cours et td [email protected]

Documents