View
118
Download
0
Category
Preview:
Citation preview
Vincent Peignévincent@edelweiss-studio.net
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
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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)
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
1. Comment ca marche
1.1. Généralités1.2. Réseaux et le modèle TCP/IP1.3. 1.4. 1.5. 1.6. 1.7.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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. Comment ca marche
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.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
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.1.6. 1.7.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
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/2015 Vincent Peigné - Edelweiss Studio
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.1.7.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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…)
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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 domaine 1.5. Le protocole HTTP1.6. Les serveurs (DNS, Web)1.7.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
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/2015 Vincent Peigné - Edelweiss Studio
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
1.6. Les serveurs (DNS, Web)
• Résolution par itération– Communication entre les serveurs DNS
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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/2015 Vincent Peigné - Edelweiss Studio
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
1.7. Affichage d’une page web
LPCEL promotion 2014/2015
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
Vincent Peigné - Edelweiss Studio
2. Du statique au collaboratif
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
2. Du statique au collaboratif
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
2. Du statique au collaboratif
2.1. Généralités
2.2. Le web 1.0
2.3.
2.4.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
2. Du statique au collaboratif
2.1. Généralités
2.2. Le web 1.0
2.3. Le web 2.0
2.4.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
2.3. Le web 2.0
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
2. Du statique au collaboratif
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
3. Les principales technologies
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
3. Les principales technologies
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é
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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/2015 Vincent Peigné - Edelweiss Studio
3. Les principales technologies
3.1. Généralités3.2. Les langages serveurs3.3. 3.4. 3.5. 3.6. 3.7. 3.8.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
3.2. Les langages serveurs
• Fichiers nommés .php• Balisage : <?php … ?>• Exemple d’un script
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
3.2. Les langages serveurs
• Mode opératoire pour générer une page
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
3. Les principales technologies
3.1. Généralités3.2. Les langages serveurs3.3. (X)HTML3.4. 3.5. 3.6. 3.7. 3.8.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
3.3. (X)HTML
• Exemple de structure HTML 5
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
3.3. (X)HTML
• Code XHTML 5
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
3. Les principales technologies
3.1. Généralités3.2. Les langages serveurs3.3. (X)HTML3.4. CSS3.5. 3.6. 3.7. 3.8.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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/2015 Vincent Peigné - Edelweiss Studio
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/2015 Vincent Peigné - Edelweiss Studio
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
3.4. CSS
• Code CSS intégré
LPCEL promotion 2014/2015
• Code CSS : fichiers annexes
Vincent Peigné - Edelweiss Studio
3. Les principales technologies
3.1. Généralités3.2. Les langages serveurs3.3. (X)HTML3.4. CSS3.5. Javascript3.6. 3.7. 3.8.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
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
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
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
3.6. Les autres technologies
• Exemple de code jQuery
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
3. Les principales technologies
3.1. Généralités3.2. Les langages serveurs3.3. (X)HTML3.4. CSS3.5. Javascript3.6. Autres technologies3.7. 3.8.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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/2015 Vincent Peigné - Edelweiss Studio
3. Les principales technologies
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.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
3. Les principales technologies
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é
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
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/2015 Vincent Peigné - Edelweiss Studio
4. Créer un site web
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
4. Créer un site web
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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/2015 Vincent Peigné - Edelweiss Studio
4. Créer un site web
4.1. Généralités4.2. Le projet4.3. 4.4. 4.5. 4.6. 4.7. 4.8.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
4. Créer un site web
4.1. Généralités4.2. Le projet4.3. Le zoning4.4. 4.5. 4.6. 4.7. 4.8.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
4. Créer un site web
4.1. Généralités4.2. Le projet4.3. Le zoning4.4. Le graphisme4.5. 4.6. 4.7. 4.8.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
4. Créer un site web
4.1. Généralités4.2. Le projet4.3. Le zoning4.4. Le graphisme4.5. L’intégration4.6. 4.7. 4.8.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
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/2015 Vincent Peigné - Edelweiss Studio
4. Créer un site web
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.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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. Créer un site web
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.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
4. Créer un site web
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
4.8. Vision globale
LPCEL promotion 2014/2015
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
Vincent Peigné - Edelweiss Studio
5. Les types de sites
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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 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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
5. Les types de sites
5.1. Site Corporate
5.2. Site E-Commerce
5.3.
5.4.
5.5. LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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/2015 Vincent Peigné - Edelweiss Studio
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
5. Les types de sites
5.1. Site Corporate
5.2. Site E-Commerce
5.3. Site communautaire
5.4.
5.5. LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
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/2015 Vincent Peigné - Edelweiss Studio
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
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
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 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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
6. Référencement et communication
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
6. Référencement et communication
6.1. Généralités
6.2. Référencement naturel
6.3.
6.4. 6.5.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
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. 6.5.
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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
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
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
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
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
6. Référencement et communication
Vincent Peigné - Edelweiss Studio
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
Conclusion
LPCEL promotion 2014/2015 Vincent Peigné - Edelweiss Studio
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/2015 Vincent Peigné - Edelweiss Studio
Recommended