La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Vincent Peigné net Cours et TD

Présentations similaires


Présentation au sujet: "Vincent Peigné net Cours et TD"— Transcription de la présentation:

1 Vincent Peigné vincent@edelweiss-studio. net Cours et TD http://lpcel
Fondamentaux du web, Langages client Web Design, Ergonomie, E-Logistique, E-Boutique LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

2 Les fondamentaux du web
LPCEL – promotion 2014/2015 Vincent Peigné

3 Introduction Remise à niveau Comprendre le fonctionnement général
Connaitre les implications Appréhender le contenu de la formation Introduction à la technique LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

4 Sommaire Comment ça marche Du statique au collaboratif
Les principales technologies Créer un site web Les types de sites Référencement et communication LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

5 1. Comment ça marche LPCEL promotion 2014/2015
Vincent Peigné - Edelweiss Studio

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

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

8 1. Comment ca marche 1.1. Généralités 1.2. Réseaux et le modèle TCP/IP LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

9 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 5,6 et 7 Courriel Web ERP Vidéo Voix TCP 4 UDP Protocole IP : dénominateur commun 3 Ethernet 2 Token Ring ATM FDDI Frame Relay PPP Cuivre, Fibre Optique, réseau radio… 1 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

10 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 5,6 et 7 Courriel Web ERP Vidéo Voix TCP 4 UDP Protocole IP : dénominateur commun 3 Ethernet 2 Token Ring ATM FDDI Frame Relay PPP Cuivre, Fibre Optique, réseau radio… 1 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

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

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

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

15 1.4. Noms de domaines Restriction selon l’extension C’est aussi :
.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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

17 1.5. 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…) LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

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

20 1.6. Les serveurs (DNS, Web) Domain Name System Pour un nom de domaine
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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

21 1.6. Les serveurs (DNS, Web) Gestion hiérarchique des NDD Racine
TLD : Top Level Domain Notion de sous-domaines LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

22 1.6. Les serveurs (DNS, Web) Résolution par itération
Communication entre les serveurs DNS LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

23 1.6. Les serveurs (DNS, Web) Serveur Web Gestion des sites
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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

25 1.7. Affichage d’une page web
2 Internaute 1 PC DNS 3 8 1 – 7 4 2 – Résolution DNS 3 – Réponse DNS (IP) Serveur Web Vérification + Génération HTML 4 – Requête HTTP 5 5 – Traitement 6 – Gestion réponse 7 – Réponse HTTP 6 8 – Affichage LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

26 2. Du statique au collaboratif
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

27 2. Du statique au collaboratif
2.1. Généralités 2.2. Le web Le web L’avenir et le web 3.0 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

29 2. Du statique au collaboratif
2.1. Généralités 2.2. Le web LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

31 2. Du statique au collaboratif
2.1. Généralités 2.2. Le web Le web LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

33 2.3. Le web 2.0 LPCEL promotion 2014/2015
Vincent Peigné - Edelweiss Studio

34 2. Du statique au collaboratif
2.1. Généralités 2.2. Le web Le web L’avenir et le web 3.0 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

36 3. Les principales technologies
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

38 3.1. Généralités Deux grandes parties Le coté serveur Le coté client
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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

39 3. Les principales technologies
3.1. Généralités 3.2. Les langages serveurs LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

41 3.2. Les langages serveurs Fichiers nommés .php
Balisage : <?php … ?> Exemple d’un script LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

42 3.2. Les langages serveurs Mode opératoire pour générer une page
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

43 3. Les principales technologies
3.1. Généralités 3.2. Les langages serveurs 3.3. (X)HTML LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

45 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

46 3.3. (X)HTML Structure et code XHTML LPCEL promotion 2014/2015
Vincent Peigné - Edelweiss Studio

47 3.3. (X)HTML (X)HTML 5 Objectifs 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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

48 3.3. (X)HTML Exemple de structure HTML 5 LPCEL promotion 2014/2015
Vincent Peigné - Edelweiss Studio

49 3.3. (X)HTML Code XHTML 5 LPCEL promotion 2014/2015
Vincent Peigné - Edelweiss Studio

50 3. Les principales technologies
3.1. Généralités 3.2. Les langages serveurs 3.3. (X)HTML 3.4. CSS LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

51 3.4. CSS Cascading Style Sheets Objectifs et intérêts 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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

52 3.4. CSS Bataille de navigateurs Grand nombre de propriétés
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. LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

53 3.4. CSS Deux modes d’intégration Code CSS
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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

54 3.4. CSS Code CSS intégré Code CSS : fichiers annexes
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

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

57 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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio Dans le : Fichiers annexes  Nécessité d’alléger la source HTML. LPCEL promotion 2014/2015. Vincent Peigné - Edelweiss Studio.", "width": "800" }

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

59 3.5. Javascript jQuery Communauté importante Version 1.11.1
Existe en version mobile Syntaxe simple et efficace Cross-browser Communauté importante Grande richesse de sites Nombreux plugins existants LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

60 3.6. Les autres technologies
Exemple de code jQuery LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

62 3.8. Autres technologies Flash / Flash Player Silverlight
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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

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

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

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

67 3.8. L’accessibilité WCAG 1.0 WCAG 2.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é LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

68 4. Créer un site web LPCEL promotion 2014/2015
Vincent Peigné - Edelweiss Studio

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

70 4.1. Généralités Sites web Différents projets Ensemble de briques
Relations humaines Communication Développement techniques Différents projets Projet personnel Projet professionnel LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

71 4. Créer un site web 4.1. Généralités 4.2. Le projet LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

73 4. Créer un site web 4.1. Généralités 4.2. Le projet 4.3. Le zoning LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

74 4.3. Le zoning Schéma organisationnel d’un site Aller/Retour client
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

75 4.3. Le zoning Exemple de zoning Pas de règles Plus de détails
Pas d’échelle Cadres simples Disposition des blocs Pas de règles Plus de détails Question de temps Personnalité du client LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

76 4. Créer un site web 4.1. Généralités 4.2. Le projet 4.3. Le zoning 4.4. Le graphisme LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

77 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

78 4.4. Le graphisme Comparaison zoning / charte graphique
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

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

81 4.5. L’intégration Outils nécessaires Bien organiser ses fichiers
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…) LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

83 4.6. Le développement Phase technique Structure employée
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

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

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

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

87 Intégration Développement
4.8. Vision globale Rédaction Cahier des charges Validation Zoning Création Validation Chef de projet Client Supervision Charte Validation Supervision Intégration Développement Gestion Validation Suivi Validation/Consultation LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

88 5. Les types de sites LPCEL promotion 2014/2015
Vincent Peigné - Edelweiss Studio

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

90 5.1. Site Corporate Site vitrine ou institutionnel Intérêts Cibles
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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

91 5. Les types de sites 5.1. Site Corporate 5.2. Site E-Commerce LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

92 5.2. Site E-Commerce Site de commerce en ligne Intérêts Cibles
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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

94 5. Les types de sites 5.1. Site Corporate 5.2. Site E-Commerce 5.3. Site communautaire LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

96 5.3. Réseau social Réseau personnel ou professionnel Réseautage social
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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

97 5. Les types de sites 5.1. Site Corporate 5.2. Site E-Commerce 5.3. Site communautaire 5.4. Le blog 5.5. LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

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

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

101 6. Référencement et communication
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

103 6.1. Généralités L’un des piliers du web actuel Enjeux commerciaux
Obligation de se référencer Volonté d’être visible Enjeux commerciaux Plusieurs formats Référencement naturel et payant Web social LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

104 6. Référencement et communication
6.1. Généralités 6.2. Référencement naturel LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

106 6. Référencement et communication
6.1. Généralités 6.2. Référencement naturel 6.3. Référencement payant LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

108 6.3. Référencement payant Au démarrage et action ponctuelle
Le référencement naturel prend le relai LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

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

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

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

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

113 Conclusion LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio

114 Conclusion Notions techniques Etapes d’un site
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 LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio


Télécharger ppt "Vincent Peigné net Cours et TD"

Présentations similaires


Annonces Google