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é Cours et TD

Présentations similaires


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

1 Vincent Peigné Cours et TD Fondamentaux du web, Langages client Web Design, Ergonomie, E-Logistique, E-Boutique LPCEL promotion 2014/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

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

5 1. Comment ça marche LPCEL promotion 2014/2015Vincent 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/2015Vincent 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/2015Vincent 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/2015Vincent 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 LPCEL promotion 2014/2015 Cuivre, Fibre Optique, réseau radio…1Ethernet2Token RingATMFDDIFrame RelayPPPProtocole IP : dénominateur commun3TCP4 UDP 5,6 et 7CourrielWebERPVidéoVoix 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 LPCEL promotion 2014/2015Vincent Peigné - Edelweiss Studio Cuivre, Fibre Optique, réseau radio…1Ethernet2Token RingATMFDDIFrame RelayPPPProtocole IP : dénominateur commun3TCP4 UDP 5,6 et 7CourrielWebERPVidéoVoix

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

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

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

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

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

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

25 1.7. Affichage d’une page web LPCEL promotion 2014/2015 Internaute PC Serveur Web Vérification + Génération HTML 1 – – 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 Vincent Peigné - Edelweiss Studio

26 2. Du statique au collaboratif LPCEL promotion 2014/2015Vincent 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/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

29 2. Du statique au collaboratif 2.1. Généralités 2.2. Le web LPCEL promotion 2014/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

31 2. Du statique au collaboratif 2.1. Généralités 2.2. Le web Le web LPCEL promotion 2014/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

33 2.3. Le web 2.0 LPCEL promotion 2014/2015Vincent 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/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

36 3. Les principales technologies LPCEL promotion 2014/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

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

39 3. Les principales technologies 3.1. Généralités 3.2. Les langages serveurs LPCEL promotion 2014/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

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

42 3.2. Les langages serveurs Mode opératoire pour générer une page LPCEL promotion 2014/2015Vincent 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/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

45 3.3. (X)HTML Grand nombre de balises – Document :, – Information :, – Hiérarchie :  – Structure et texte :,, Balises ouvrantes et fermantes (XHTML) – …, 2 grands types : « bloc » et « en ligne » LPCEL promotion 2014/2015Vincent Peigné - Edelweiss Studio

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

47 3.3. (X)HTML (X)HTML 5 – Nouvelle organisation du document – Nouvelles balises :, 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/2015Vincent Peigné - Edelweiss Studio

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

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

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

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

53 3.4. CSS Deux modes d’intégration – directement dans le code HTML  Au niveau des balises : Avec la balise style :... – Fichiers annexes Dans le Code CSS – Notion d’ID et de classe : attribut HTML – Importance de la cascade LPCEL promotion 2014/2015Vincent Peigné - Edelweiss Studio

54 3.4. CSS Code CSS intégré LPCEL promotion 2014/2015 Code CSS : fichiers annexes 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/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

57 3.5. Javascript Deux modes d’intégration – Directement sur les balises  Attributs => onclick, onblur… – Dans le ... – Dans le : Fichiers annexes Nécessité d’alléger la source HTML LPCEL promotion 2014/2015Vincent Peigné - Edelweiss Studio

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

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

60 3.6. Les autres technologies Exemple de code jQuery LPCEL promotion 2014/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

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

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

68 4. Créer un site web LPCEL promotion 2014/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

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

71 4. Créer un site web 4.1. Généralités 4.2. Le projet LPCEL promotion 2014/2015Vincent 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/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

74 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/2015Vincent Peigné - Edelweiss Studio

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

78 4.4. Le graphisme Comparaison zoning / charte graphique LPCEL promotion 2014/2015Vincent 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/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

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

83 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/2015Vincent 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/2015Vincent 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/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

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

88 5. Les types de sites LPCEL promotion 2014/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

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

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

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

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

101 6. Référencement et communication LPCEL promotion 2014/2015Vincent 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/2015Vincent Peigné - Edelweiss Studio

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

111 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/ Référencement et communication 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/2015Vincent Peigné - Edelweiss Studio

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

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


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

Présentations similaires


Annonces Google