Créer son 1er site Web
Philippe Brandao2012
www.forma2l.fr
Forma²L - SARL au capital de 8000 € - RCS Créteil 534 553 870 - Siège social : 16 rue du Séminaire - 94516 RUNGIS cedex - Téléphone 01 71 36 28 09 / Fax 09 74 44 21 09
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Introduction
Objectifs de la formation :◦ Informations pratiques sur l’internet et les sites Web◦ Exercices de création de sites simples, sans compétences
requises en informatique Profits : autonomie, gain de temps Le formateur :
◦ Ingénieur en informatique avec 15 ans d’expérience dans la gestion de projets, formation, développement d’applications et sites Web.
◦ Principales réalisations de site Web :http://www.forma2l.fr,http://phbdocs.wordpress.com
• Profilhttp://fr.linkedin.com/pub/philippe-brandao/4/658/9a1/fr
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Sommaire
L’internet◦ Fonctionnement, organisation, protocoles,
langages, identifiants.Les sites Web
◦ Hébergement, noms de domaines, types de sites, outils de création, référencement
Créer son site en ligne sur Wordpress.com◦ Présentation, inscription, exercice
Créer son site localement avec ToWeb◦ Présentation, inscription, exercice
Pour aller plus loin◦ E-commerce, sauvegardes, sécurité
30 mn
2 h
1h30
1h30
1h
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
1 : L’internet
Contenu :◦L’architecture de l’internet◦Les principaux protocoles◦Les organismes qui régissent l’internet◦Les langages
Objectifs :◦Comprendre le fonctionnement d’internet et son
organisation◦Connaître les principaux protocoles et langages du
Web
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
1 : Définition et architectureDéfinition : réseau informatique mondial, utilisant un ensemble
standardisé de protocoles de transfert de données
Intranet
Intranet
Point d’accès(DSLAM)
Fournisseur d’accès à internet(Orange, Free…)
Internet
Réseau domestique
Chaque élément technique du réseau est identifié par une adresse IP unique (ex : 192.34.213.13).
Chaque ressource publiée sur internet est accessible par son URL(ex: http://fr.wikipedia.org)
H
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Les principaux protocolesLa suite TCP/IP est l'ensemble des protocoles utilisés pour le transfert des données sur
Internet.Le nom TCP/IP est tiré de deux de ses principaux protocoles : TCP (Transmission Control Protocol) et IP (Internet Protocol), qui ont été les premiers à être définis.
Parmi ces protocoles : FTP : File Transfer Protocol (protocole de transfert de fichiers), ou FTP, est un
protocole de communication destiné à l'échange informatique de fichiers sur un réseau TCP/IP. HTTP : L'HyperText Transfer Protocol, plus connu sous l'abréviation HTTP — littéralement
« protocole de transfert hypertexte » — est un protocole de communication client-serveur développé pour le World Wide Web.
SSH (connexion sécurisée à un serveur), SFTP, HTTPS, Telnet,…
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Les langages Pour décrire les pages Web :
◦ HTML (Hypertext Markup Langage). Langage de balisage conçu pour représenter les pages Web◦ CSS (Cascading Style Sheets) : langage de présentation des documents HTML (police de caractères, tailles,
couleurs…).
Pour les applications exécutées sur le navigateur Web : Javascript, Flash
Pour les application côté serveur : PHP, Java, C# et .net, …
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Les organismes qui régissent l’Internet Les équipementiers réseaux construisent le matériel réseau (routeurs, serveurs…)
et parfois définissent les protocoles réseau : Cisco, IBM, Sun microsystems
Les opérateurs qui construisent les réseaux physiques : sociétés d’autoroutes, SNCF/Telecom Développement, Orange Business Services, …
L’ICANN gère les adresses IP et les noms de domaine
Le Consortium W3C définit les langages standards : HTML, CSS◦ Mais aussi d’autres standards comme le format d’images PNG.
Les groupes de travail définissent les normes internationales utilisées sur internet :◦ MPEG (Moving Picture Experts Group) pour l’audio et la video (MP3, MP4)◦ JPEG (Join Photographics Expert Group) Les travaux de ces groupes sont normalisés par l’Organisation internationale de normalisation (ISO)
Les entreprises privées qui développent et proposent des langages et normes pour l’internet : Adobe (Flash), Netscape (Javascript), Microsoft (AVI), etc…
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Les identifiantsPlusieurs identifiants sont utilisés pour définir de manière unique les
personnes, équipements et ressources sur internet◦ L’adresse MAC identifie tout équipement physique relié à un réseau
informatique (ordinateur personnel, serveur, Smartphone,…), Ex : 5E:FF:56:A2:AF:15
◦ L’adresse IP identifie chaque équipement, physique ou virtuel, connecté à internet à un instant donnée. Elle peut être fixe ou variable. Elle est en générale attribuée par un serveur DHCP. Ex : 192.168.0.15
◦ L’URL identifie une ressource accessible sur internet, en général un site Web. Ex : http://www.forma2l.fr
◦ Le compte utilisateur identifie une personne physique connectée à internet. Ex : Windows live ID, compte Google, compte e-mail Yahoo, …
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Quiz Lequel de ces éléments est une URL :
◦ http://www.lauyan.com/fr/tw-home◦ 192.34.213.13◦ www
Lequel de ces standards n’est pas un protocole de communication de l’Internet :
◦ FTP◦ SSH◦ CSS◦ HTTP
Qu’identifie une adresse IP :◦ Un site Web◦ Un fournisseur d’accès à internet◦ Une personne physique connectée à l’internet◦ Un équipement connecté à internet à un instant donné
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Synthèse
L’Internet est un réseau Informatique mondial basé sur un ensemble de protocoles et langages standardisés
L’internet n’est pas fédéré centralement, mais par une multitude d’organismes interconnectés
Les principaux langages de description des pages Web sont HTML et CSS
Protocole de communication du Web : HTTP
Protocole de transfert de fichiers : FTP
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
2 : Les sites Web
Contenu :◦Définition, types de site◦L’hébergement◦Les noms de domaines◦Les outils de création de sites Web◦L’animation du site◦Le référencement◦Les outils d’analyse statistique
Objectif:◦Préparer son site Web
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Qu’est ce qu’un sites Web ?Une série de documents écrits dans les langages
et formats de l’internet : HTML, CSS, Javascript, jpeg, avi, mp3, etc…
Est hébergé sur un serveur Web, généralement accessible sur internet
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Les types de sites Web Les sites statiques
◦ Présentations d’entreprises, associations, particuliers. Pas ou peu d’interaction (site vitrine).
Les Blogs◦ Série d’articles ou photos listée par ordre chronologique (actualités).
Les Forums◦ Echange d’informations autour d’un thème commun
Les Wiki◦ Base de connaissance (Wikipedia), Intranet collaboratif
Les sites dynamiques◦ Sites complexes, interactifs. Contenu hétérogène.
Les applications Web◦ Applications avec identification de l’utilisateur, fortement interactive. Souvent
en Intranet ou pour l’administration de sites. Les sites marchands (ou e-commerce)
◦ Sites dynamiques adaptés à la vente en ligne : gestion de produits, clients, commandes, paiement, facturation.
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
L’hébergement Les type de contenus hébergés
◦ Un site Web statique, dynamique ou e-commerce◦ Mais aussi :
Un espace de stockage en ligne Un serveur virtuel (Windows ou Linux)
Où faire héberger son site Web ?◦ En local : déconseillé. Peu fiable et compliqué à mettre en place et à maintenir.◦ Chez son fournisseur d’accès (Free, SFR…) : oui, mais comporte des limitations (espace de
stockage, nom de domaine, conditions d’utilisation).◦ Chez un hébergeur internet (OVH, 1and1, Wordpress…) : souvent la solution la plus adaptée
aux PME.◦ Dans l’intranet : réservé aux grandes entreprises. Requiert une infrastructure et une expertise
importante.
Les principaux hébergeurs…◦ …pour l’hébergement de sites Web et e-commerce : OVH, 1and1◦ …pour le stockage de données : Amazon S3, Google storage, Azure Blob Storage (Microsoft),
Dropbox, Rackspace Cloud files.◦ …pour la location de serveurs virtuels : Amazon EC2, Windows Azure, Google, 1and1, OVH
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Les noms de domaines et DNSDéfinition Un nom de domaine est un identifiant d’un ensemble d’ordinateurs reliés à Internet et possédant une caractéristique
commune. Il cache une adresse IP, le but étant de retenir et communiquer facilement l’adresse d’un ensemble de serveurs (site web, courrier électronique, FTP…). Par exemple, wikipedia.org est plus simple à mémoriser que 91.198.174.2.
L’attribution des noms de domaines Les TLD (top-level domain) sont les domaines de premier niveau (.fr, .com, .org, .eu, .tv, etc…), aussi appelés
‘extensions’. Il en existe près de 300, génériques (gTLD) et nationaux (ccTLD), tous gérés par la société ICANN. L’ICANN délègue la gestion de chaque TLD à une agence nationale. Le domaine .fr est géré par l’Afnic : “Association
française pour le nommage Internet en coopération”. Chaque agence nationale délègue la location ou vente des noms de domaines dérivés de son TLD à des bureaux
d’enregistrement des noms de domaines (OVH, 1and1…). Coût moyen pour le dépôt d’un .fr : 12 € HT/an
Le DNS Le DNS (Domain Name System) est un service permettant de traduire un nom de domaine en informations de plusieurs
types qui y sont associées, notamment en adresses IP de la machine portant ce nom. Chaque traduction d’un nom de domaine est un « enregistrement DNS ».
Redirection de domaine Pour rediriger un nom de domaine vers un autre en gardant affiché le nom destination, il faut diriger le domaine source
vers un répertoire Web qui ne contient qu’un fichier index.html
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Outils de création de sites WebCritères de choix :Le site est-il créé en interne ou confié à un
prestataire ?Si interne, compétences requises.Administré en local ou en ligne ?Hébergé chez l’éditeur ou chez un hébergeur
(libre) ? Gratuit ou Payant ? Coût…
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
ComparatifLogiciel Création Admin.
Locale / distante
Type Hébergement Prix indicatif Complexité
Blogger (9) Interne Distante Blog Editeur Gratuit *
Microsoft Publisher 2010
Interne Locale Statique Libre 189€ TTC *
ToWeb (5) Interne Locale Statique Libre De 0 à 89€ TTC *
Website x5 (8) Interne Locale Statique Libre De 0 à 70€ TTC *
Editeur de texte Interne Locale Statique Libre Gratuit **
Adobe Dreamweaver Interne Locale Statique Libre 379€ HT ***
Heberg-Forum (6) Interne Distante Forum Editeur Gratuit *
Wordpress.com Interne Distante Dynamique, Blog Editeur Gratuit *
CMS Wordpress.org / Drupal / Joomla
Interne Distante Dynamique, Blog, Forum Libre Gratuit ***
Xwiki (7) Interne Distante Wiki Libre Gratuit ***
123siteweb.fr Interne Distante Statique Editeur 20€ TTC/trim *
1and1 My Website (3) Interne Distante Dynamique Editeur 5€ HT/mois *
1&1 e-commerce(4) Interne Distante E-commerce Editeur 20€ HT/mois **
Creations Web (1) Externe Distante E-commerce Editeur 890€ HT *
Clicboutic (2) Interne Distante E-commerce Editeur 20€ HT/mois **
Ibox Studio Interne Distante E-commerce Editeur 19€ HT/mois **
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
L’animation du siteLe contenu dynamique
◦ Articles régulièrement mis à jour, diaporamas, nouvelles défilantes
◦ Les commentaires des visiteurs
Le rôle du WebmasterLe Webmaster est le gestionnaire d’un site Web. Il n’est pas
nécessairement informaticien ou graphiste. Ses principales missions sont :
◦ L’animation du site, l’aide à la saisie et mise en page de nouveaux articles,
◦ La médiation des commentaires postés par les visiteurs,◦ Le suivi des visites, performances et disponibilité du site,◦ L’optimisation du référencement,◦ Le design,◦ L’évolution du site : ajout de modules, mises à jour techniques
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Le référencement Le référencement naturel (SEO – Search Engine Optimization)
◦ Placer efficacement les mots clé dans le site : les balises HTML title et les Meta-tag,
◦ Les noms de fichiers et de répertoires du site,◦ Le fichier « Sitemap »,◦ Les liens entrants
Les liens commerciaux Google◦ Les liens commerciaux apparaissent en tête des résultats des
recherches Google, dans une autre couleur, ou sur le côté de la page des résultats de recherche.
◦ Exemple : tapez les mots clé « auto-entrepreneur » sur Google. Des liens commerciaux orientent le visiteur vers des services payants, alors que l’inscription est gratuite sur le portail officiel de l’URSSAF
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Les outils statistiques Permet de visualiser les statistiques concernant les visites du site :
◦ Nombre de visites et pages visitées par jour, par semaine, …◦ Répartition géographique des visiteurs,◦ Pages les plus visitées,◦ Domaines des visiteurs
Fonctionnement : un code source inséré dans chaque page envoie les données statistiques à l’analyseur.
Google analytics, Wordpress, 1&1 Webstat, piwik (1)
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Quiz
Lequel de ces domaines est un gTLD :◦ .fr◦ .com◦ .tv◦ www.free.fr
Le référencement d’un site Web sur Google est toujours payant :◦ Vrai◦ Faux
Ordonnez ces types de sites par complexité :◦ Les sites marchands◦ Les sites statiques◦ Les blogs
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Synthèse
Comment bien préparer son site Web :◦Choisir l’outil adapté au type de site, aux
compétences requises, et à l’hébergement souhaité
◦Réserver un ou plusieurs noms de domaine◦Bien référencer le site
Une fois le site lancé :◦Animer le site◦Analyser la fréquentation
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
3 : Exercice – Wordpress.com
Contenu :◦Présentation de Wordpress◦Où trouver la documentation◦Inscription◦Création du site
Objectifs:◦Créer son site en ligne avec Wordpress.com
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Présentation de Wordpress.com Page d’accueil : http://fr.wordpress.com Site d’hébergement de Blog Tarifs :
◦ Gratuit avec de la publicité, un sous-domaine en « xxx.wordpress.com » et quelques limitations.◦ A partir de 18$ / an avec un nom de domaine, pas de publicité et sans les limitations de la version gratuite.
Ne pas confondre avec Wordpress.org, le CMS (content Management System)
Points forts : Création de sites facile et
gratuite, Maintenance en ligne
Points faibles : Pas de nom de domaine en .fr Traduction partielle en
français
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Où trouver la documentation
…
Documentation officielle (en anglais) : http://fr.wordpress.com
Documentation et tutoriels en français : Tutoriel video de 4mn :
http://commentcreerunblog.wordpress.com/2010/09/18/comment-creer-votre-blog-wordpress-tutoriel-video
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
InscriptionDans cet exercice, nous utiliserons un compte
déjà créé.Pour information, voici comment ouvrir un
compte gratuit :◦ Se connecter sur http://fr.wordpress.com◦ Cliquer sur le lien « inscrivez-vous » à gauche◦ Remplir le formulaire et cliquer sur « Créer le Blog ». Un
premier blog est créé lors de l’inscription
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Création du site
Ouvrir l’URL http://fr.wordpress.com Saisir en haut à gauche :
◦ l’identifiant « phbsphere »,◦ le mot de passe « xxxxxxx »
Depuis le menu utilisateur en haut à droite, cliquer sur « Gérer mes blogs », puis « Create a new blog ».
Remplir le formulaire et cliquer sur « Create a blog ». Choisir un thème puis cliquer sur « Choose this theme » Depuis la page d’accueil de l’utilisateur, cliquer le sur nom
du site nouvellement créé.
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Création du contenuUn site Wordpress contient un ensemble
d’articles et pages accessibles par un menu.◦ Article : page contenant une succession d’articles
ordonnés par ordre chronologique décroissant. Créer un article et deux pages accessibles par un
menu
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Synthèse
Wordpress permet de créer facilement un site Web en ligne, gratuit et hébergé
Requiert un accès à internet pour l’administration
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
4- Exercice – ToWeb
Contenu :◦Présentation de ToWeb◦Où trouver la documentation◦Téléchargement et installation◦Création du site
Objectifs:◦Créer un site simple de recettes de cuisine
avec ToWeb
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Présentation de ToWeb Page d’accueil : http://www.lauyan.com/fr Logiciel de création de sites Web, principalement utilisé pour des sites statiques Tarifs :
◦ Gratuit avec de la publicité. Editions payantes de 29,90 à 89,90 €
Points forts : Création de sites facile et gratuite, Création et administration en local
Points faibles : Pas d’hébergement, ni de nom de
domaine Mono-utilisateur
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Où trouver la documentation La documentation est accessible en ligne depuis le site ToWeb
L’aide en ligne , depuis le menu Support
Le Forum de discussion, accessible depuis le menu Forum
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Téléchargement et installation Cliquer sur le lien Télécharger depuis la page principale du
site ToWeb, puis cliquer sur le bouton Télécharger
Une fois dirigé sur le site « 01net », cliquer sur le lien « Télécharger », puis enregistrer le fichier localement.
Suivre la procédure d’installation par défaut, puis lancer ToWeb.
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Création du site Tapez le titre « Mes recettes de
cuisine » Cochez les rubriques « Page d’accueil » et
« Recettes de cuisines », et cliquer sur « Créer votre site Web »
Choisir un thème dans la liste et cliquer sur « Continuer avec les rubriques ».
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Création du contenuRemplir les rubriques et images du site de
recettes de cuisine, avec une page d’introduction et deux recettes.
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Publier le siteUne fois créé localement, le site doit être publié
sur internet avec ces paramètres :◦ Serveur FTP : testphil.forma2l.fr◦ Utilisateur : wwwftp◦ Répertoire distant : « site1 », « site2 »
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Exercice guidéModifier le texte de la page d’introduction et
publier les modificationsAjouter une page contenant une recette de
gâteau au chocolat. Publier les modifications.
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Synthèse
ToWeb permet de créer facilement un site Web localement, gratuit, à héberger chez votre fournisseur d’accès ou hébergeur Web.
Ne requiert pas d’accès à internet pour l’administration
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Pour aller plus loin…
Le e-commerceSauvegarde / restaurationSécurité
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Le e-commerceLes méthodes de création de sites marchands
◦ Développé par un prestataire◦ Solution e-commerce clé-en-main : os-commerce◦ Extensions de CMS pour l’e-commerce : Drupal
commerce◦ Solution complète hébergée (1and1 e-boutique)
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Sauvegardes La fonction de sauvegarde peut être prévue dans l’outil de
création du site, ou doit être gérée séparément Planifier des sauvegardes régulières du site Garder plusieurs sauvegardes pour pouvoir remonter à une date
ancienne Sauvegardes incrémentales si le site est trop volumineux
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Sécurité Changer les mots de passe d’administration régulièrement (tous
les 3 mois) Encrypter les sauvegardes sur disque, ou sécuriser l’accès aux
disques de sauvegarde Le site et les sauvegardes peuvent contenir des données
personnelles de client. Faire une déclaraction à la CNIL
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Fin
Questions / réponsesFeuille de présence
Attestation de formation
Merci !