SlideShare una empresa de Scribd logo
1 de 44
Descargar para leer sin conexión
Créer son 1er site Web
Philippe Brandao
2012
philippe@forma2l.fr

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


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
•

Profil
http://fr.linkedin.com/pub/philippe-brandao/4/658/9a1/fr

Introduction
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés


L‘internet

30 mn

◦ Fonctionnement, organisation, protocoles,
langages, identifiants.


Les sites Web

2h

◦ Hébergement, noms de domaines, types de
sites, outils de création, référencement


Créer son site en ligne sur Wordpress.com

1h30

◦ Présentation, inscription, exercice


Créer son site localement avec ToWeb

1h30

◦ Présentation, inscription, exercice


Pour aller plus loin

1h

◦ E-commerce, sauvegardes, sécurité

Sommaire
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
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 : L’internet
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
1 : Définition et architecture
Définition : réseau informatique mondial, utilisant un
ensemble standardisé de protocoles de transfert de données

Intranet

Intranet

Chaque élément
technique du réseau est
identifié par une
adresse IP unique (ex :
192.34.213.13).

Fournisseur
d’accès à internet
(Orange, Free…)

Internet
Chaque ressource publiée
sur internet est accessible
par son URL
(ex: http://fr.wikipedia.org)

Point d’accès
(DSLAM)

Réseau domestique

H
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Les principaux protocoles
La 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 identifiants
Plusieurs 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 :
◦
◦

192.34.213.13

◦



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

Lequel de ces standards n‘est pas un protocole de communication de
l‘Internet :
◦
◦

SSH

◦

CSS

◦



FTP

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


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

Synthèse
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
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

2 : Les sites 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



Les Blogs



Les Forums



Les Wiki



Les sites dynamiques



Les applications Web



Les sites marchands (ou e-commerce)

◦ Présentations d‘entreprises, associations, particuliers. Pas ou peu
d‘interaction (site vitrine).
◦ Série d‘articles ou photos listée par ordre chronologique (actualités).
◦ Echange d‘informations autour d‘un thème commun

◦ Base de connaissance (Wikipedia), Intranet collaboratif
◦ Sites complexes, interactifs. Contenu hétérogène.
◦ Applications avec identification de l‘utilisateur, fortement interactive.
Souvent en Intranet ou pour l‘administration de sites.
◦ 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 DNS
Dé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 Web
Critè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
Comparatif
Logiciel

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 site


Le contenu dynamique
◦ Articles régulièrement mis à jour, diaporamas, nouvelles
défilantes
◦ Les commentaires des visiteurs



Le rôle du Webmaster
Le 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 :
◦
◦
◦
◦



Le référencement d‘un site Web sur Google est toujours
payant :
◦
◦



.fr
.com
.tv
www.free.fr

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


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

Synthèse
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Contenu :
◦
◦
◦
◦

Présentation de Wordpress
Où trouver la documentation
Inscription
Création du site

Objectifs:
◦ Créer son site en ligne avec Wordpress.com

3 : Exercice – 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-votreblog-wordpress-tutoriel-video

Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Inscription



Dans 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 contenu


Un 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
Wordpress permet de créer facilement un
site Web en ligne, gratuit et hébergé
 Requiert un accès à internet pour
l‘administration


Synthèse
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
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

4- Exercice – 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 contenu


Remplir 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 site


Une 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 modifications
Ajouter 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
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


Synthèse
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Pour aller plus loin…




Le e-commerce
Sauvegarde / restauration
Sécurité

Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
Le e-commerce


Les 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
Questions / réponses
Feuille de présence
Attestation de formation
Merci !

Fin
Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés

Más contenido relacionado

Destacado

alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)Alphorm
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Stephane PERES
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsRémy Savard
 
Installation et configuration wordpress
Installation et configuration wordpressInstallation et configuration wordpress
Installation et configuration wordpressChi Nacim
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteRaphaël Goetter
 

Destacado (6)

Les base du Html5
Les base du Html5Les base du Html5
Les base du Html5
 
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
alphorm.com - Formation HTML5, CSS 3 et JavaScript (70-480)
 
Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3Intégration Web HTML 5 & CSS 3
Intégration Web HTML 5 & CSS 3
 
HTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux élémentsHTML5 - Sémantique, structure et nouveaux éléments
HTML5 - Sémantique, structure et nouveaux éléments
 
Installation et configuration wordpress
Installation et configuration wordpressInstallation et configuration wordpress
Installation et configuration wordpress
 
HTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realiteHTML5 / CSS3 : Mythes et realite
HTML5 / CSS3 : Mythes et realite
 

Similar a Créer son 1er site web

Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphipprem
 
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxFootballLovers9
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Vlad Posea
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSABNSA - Aquitaine
 
Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Ippon
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutantKorteby Farouk
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalLINAGORA
 
1 pourquoi le big data aujourdhui
1 pourquoi le big data aujourdhui1 pourquoi le big data aujourdhui
1 pourquoi le big data aujourdhuiRomain Jouin
 
Qu’Est Ce Que SharePoint
Qu’Est Ce Que SharePointQu’Est Ce Que SharePoint
Qu’Est Ce Que SharePointSIMOES AUGUSTO
 
Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013gdgyaounde
 
alphorm.com - Formation Configuration de SharePoint 2010 (70-667)
alphorm.com - Formation Configuration de SharePoint 2010 (70-667)alphorm.com - Formation Configuration de SharePoint 2010 (70-667)
alphorm.com - Formation Configuration de SharePoint 2010 (70-667)Alphorm
 
Introduction à Drupal. Pourquoi Drupal est, en toute objectivité, le meilleur...
Introduction à Drupal. Pourquoi Drupal est, en toute objectivité, le meilleur...Introduction à Drupal. Pourquoi Drupal est, en toute objectivité, le meilleur...
Introduction à Drupal. Pourquoi Drupal est, en toute objectivité, le meilleur...drupagora
 
Intervention lors du salon des entrepreneurs en partenariat avec Amen fevrie...
Intervention lors du salon des entrepreneurs  en partenariat avec Amen fevrie...Intervention lors du salon des entrepreneurs  en partenariat avec Amen fevrie...
Intervention lors du salon des entrepreneurs en partenariat avec Amen fevrie...Afnic
 
Drupagora 2013 : introduction drupal
Drupagora 2013 :  introduction drupalDrupagora 2013 :  introduction drupal
Drupagora 2013 : introduction drupalCyril Reinhard
 
Barcamp tunisie edition 2010 langage de programmation php
Barcamp tunisie edition 2010 langage de programmation php Barcamp tunisie edition 2010 langage de programmation php
Barcamp tunisie edition 2010 langage de programmation php Barcamp Tunisie
 
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...Xavier Lacot
 

Similar a Créer son 1er site web (20)

Faire des applications web avec Delphi
Faire des applications web avec DelphiFaire des applications web avec Delphi
Faire des applications web avec Delphi
 
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1
 
Djang formation-django
Djang formation-djangoDjang formation-django
Djang formation-django
 
Cv duquenne thomas
Cv duquenne thomasCv duquenne thomas
Cv duquenne thomas
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014Formation html5 CSS3 offerte par ippon 2014
Formation html5 CSS3 offerte par ippon 2014
 
Création des sites web pour débutant
Création des sites web pour débutantCréation des sites web pour débutant
Création des sites web pour débutant
 
Industrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec DrupalIndustrialisez le développement et la maintenance de vos sites avec Drupal
Industrialisez le développement et la maintenance de vos sites avec Drupal
 
1 pourquoi le big data aujourdhui
1 pourquoi le big data aujourdhui1 pourquoi le big data aujourdhui
1 pourquoi le big data aujourdhui
 
Qu’Est Ce Que SharePoint
Qu’Est Ce Que SharePointQu’Est Ce Que SharePoint
Qu’Est Ce Que SharePoint
 
Do you speak technique ?
Do you speak technique ?Do you speak technique ?
Do you speak technique ?
 
Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013Html5-Devfest Yaoundé 2013
Html5-Devfest Yaoundé 2013
 
alphorm.com - Formation Configuration de SharePoint 2010 (70-667)
alphorm.com - Formation Configuration de SharePoint 2010 (70-667)alphorm.com - Formation Configuration de SharePoint 2010 (70-667)
alphorm.com - Formation Configuration de SharePoint 2010 (70-667)
 
Introduction à Drupal. Pourquoi Drupal est, en toute objectivité, le meilleur...
Introduction à Drupal. Pourquoi Drupal est, en toute objectivité, le meilleur...Introduction à Drupal. Pourquoi Drupal est, en toute objectivité, le meilleur...
Introduction à Drupal. Pourquoi Drupal est, en toute objectivité, le meilleur...
 
Intervention lors du salon des entrepreneurs en partenariat avec Amen fevrie...
Intervention lors du salon des entrepreneurs  en partenariat avec Amen fevrie...Intervention lors du salon des entrepreneurs  en partenariat avec Amen fevrie...
Intervention lors du salon des entrepreneurs en partenariat avec Amen fevrie...
 
Drupagora 2013 : introduction drupal
Drupagora 2013 :  introduction drupalDrupagora 2013 :  introduction drupal
Drupagora 2013 : introduction drupal
 
Barcamp tunisie edition 2010 langage de programmation php
Barcamp tunisie edition 2010 langage de programmation php Barcamp tunisie edition 2010 langage de programmation php
Barcamp tunisie edition 2010 langage de programmation php
 
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
Forum PHP 2010 - Les frameworks, essentiels dans-l-ecosysteme-php-xavier-laco...
 
Activité web
Activité webActivité web
Activité web
 

Último

Mes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensMes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensErol GIRAUDY
 
KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311Erol GIRAUDY
 
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Infopole1
 
Les Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleLes Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleErol GIRAUDY
 
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapInstallation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapMaxime Huran 🌈
 
The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)IES VE
 

Último (6)

Mes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examensMes succès sur Microsoft LEARN et examens
Mes succès sur Microsoft LEARN et examens
 
KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311KIT-COPILOT and more Article du 20240311
KIT-COPILOT and more Article du 20240311
 
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
Workshop l'IA au service de l'industrie - Présentation générale - Extra 14...
 
Les Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence ArtificielleLes Metiers de l'Intelligence Artificielle
Les Metiers de l'Intelligence Artificielle
 
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en BootstrapInstallation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
Installation de Sylius 2.0 et découverte du nouveau backoffice en Bootstrap
 
The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)The Importance of Indoor Air Quality (French)
The Importance of Indoor Air Quality (French)
 

Créer son 1er site web

  • 1. Créer son 1er site Web Philippe Brandao 2012 philippe@forma2l.fr 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
  • 2.  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 • Profil http://fr.linkedin.com/pub/philippe-brandao/4/658/9a1/fr Introduction Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 3.  L‘internet 30 mn ◦ Fonctionnement, organisation, protocoles, langages, identifiants.  Les sites Web 2h ◦ Hébergement, noms de domaines, types de sites, outils de création, référencement  Créer son site en ligne sur Wordpress.com 1h30 ◦ Présentation, inscription, exercice  Créer son site localement avec ToWeb 1h30 ◦ Présentation, inscription, exercice  Pour aller plus loin 1h ◦ E-commerce, sauvegardes, sécurité Sommaire Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 4. 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 : L’internet Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 5. 1 : Définition et architecture Définition : réseau informatique mondial, utilisant un ensemble standardisé de protocoles de transfert de données Intranet Intranet Chaque élément technique du réseau est identifié par une adresse IP unique (ex : 192.34.213.13). Fournisseur d’accès à internet (Orange, Free…) Internet Chaque ressource publiée sur internet est accessible par son URL (ex: http://fr.wikipedia.org) Point d’accès (DSLAM) Réseau domestique H Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 6. Les principaux protocoles La 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
  • 7. 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
  • 8. 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
  • 9. Les identifiants Plusieurs 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
  • 10. Quiz  Lequel de ces éléments est une URL : ◦ ◦ 192.34.213.13 ◦  http://www.lauyan.com/fr/tw-home www Lequel de ces standards n‘est pas un protocole de communication de l‘Internet : ◦ ◦ SSH ◦ CSS ◦  FTP 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
  • 11.  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 Synthèse Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 12. 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 2 : Les sites Web Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 13. 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
  • 14. Les types de sites Web  Les sites statiques  Les Blogs  Les Forums  Les Wiki  Les sites dynamiques  Les applications Web  Les sites marchands (ou e-commerce) ◦ Présentations d‘entreprises, associations, particuliers. Pas ou peu d‘interaction (site vitrine). ◦ Série d‘articles ou photos listée par ordre chronologique (actualités). ◦ Echange d‘informations autour d‘un thème commun ◦ Base de connaissance (Wikipedia), Intranet collaboratif ◦ Sites complexes, interactifs. Contenu hétérogène. ◦ Applications avec identification de l‘utilisateur, fortement interactive. Souvent en Intranet ou pour l‘administration de sites. ◦ 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
  • 15. 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
  • 16. Les noms de domaines et DNS Dé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
  • 17. Outils de création de sites Web Critè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
  • 18. Comparatif Logiciel 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
  • 19. L’animation du site  Le contenu dynamique ◦ Articles régulièrement mis à jour, diaporamas, nouvelles défilantes ◦ Les commentaires des visiteurs  Le rôle du Webmaster Le 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
  • 20. 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
  • 21. 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
  • 22. Quiz  Lequel de ces domaines est un gTLD : ◦ ◦ ◦ ◦  Le référencement d‘un site Web sur Google est toujours payant : ◦ ◦  .fr .com .tv www.free.fr 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
  • 23.  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 Synthèse Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 24. Contenu : ◦ ◦ ◦ ◦ Présentation de Wordpress Où trouver la documentation Inscription Création du site Objectifs: ◦ Créer son site en ligne avec Wordpress.com 3 : Exercice – Wordpress.com Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 25. 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
  • 26. 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-votreblog-wordpress-tutoriel-video Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 27. Inscription   Dans 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
  • 28. 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
  • 29. Création du contenu  Un 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
  • 30. Wordpress permet de créer facilement un site Web en ligne, gratuit et hébergé  Requiert un accès à internet pour l‘administration  Synthèse Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 31. 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 4- Exercice – ToWeb Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 32. 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
  • 33. 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
  • 34. 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
  • 35. 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
  • 36. Création du contenu  Remplir 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
  • 37. Publier le site  Une 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
  • 38. Exercice guidé   Modifier le texte de la page d‘introduction et publier les modifications Ajouter 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
  • 39. 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  Synthèse Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 40. Pour aller plus loin…    Le e-commerce Sauvegarde / restauration Sécurité Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés
  • 41. Le e-commerce  Les 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
  • 42. 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
  • 43. 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
  • 44. Questions / réponses Feuille de présence Attestation de formation Merci ! Fin Formation « Créer son 1er site Web », Philippe Brandao pour Forma²L – 2012 – Tous droits réservés