Créer son 1er site web

Créer son 1er site Web

Philippe Brandao2012

[email protected]

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

http://www.forma2l.fr/



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


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


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


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,…

http://fr.wikipedia.org/wiki/Protocoles_de_communication

http://fr.wikipedia.org/wiki/Transmission_Control_Protocol

http://fr.wikipedia.org/wiki/Internet_Protocol

http://fr.wikipedia.org/wiki/Protocole_de_communication

http://fr.wikipedia.org/wiki/Informatique

http://fr.wikipedia.org/wiki/R%C3%A9seau_informatique

http://fr.wikipedia.org/wiki/Suite_des_protocoles_Internet

http://fr.wikipedia.org/wiki/Abr%C3%A9viation

http://fr.wikipedia.org/wiki/Hypertexte

http://fr.wikipedia.org/wiki/Protocole_de_communication

http://fr.wikipedia.org/wiki/Client-serveur

http://fr.wikipedia.org/wiki/World_Wide_Web




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, …


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…


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, …



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é

http://www.lauyan.com/fr/tw-home


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


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


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


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.

http://formationweb20120529.wordpress.com/

http://www.developpez.net/forums/f725/java/edi-outils-java/leonardi/

http://fr.wikipedia.org/wiki/Wikip%C3%A9dia:Accueil_principal



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


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


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…


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 **


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


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


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)


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

http://www.free.fr/


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


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


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


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


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

http://fr.wordpress.com/


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

http://fr.wordpress.com/


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


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


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


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


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


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.


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


Création du contenuRemplir les rubriques et images du site de

recettes de cuisine, avec une page d’introduction et deux recettes.


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 »


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.


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


Pour aller plus loin…

Le e-commerceSauvegarde / restaurationSécurité


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)


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


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


Fin

Questions / réponsesFeuille de présence

Attestation de formation

Merci !

Technology

Créer son 1er site web