Crer son 1 er site Web Philippe Brandao

Créer son 1 er site Web Philippe Brandao 2012 philippe@forma 2 l. fr www. forma 2 l. 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. forma 2 l. fr, http: //phbdocs. wordpress. com • Profil http: //fr. linkedin. com/pub/philippe-brandao/4/658/9 a 1/fr Introduction Formation « Créer son 1 er site Web » , Philippe Brandao pour Forma²L – 2012 – Tous droits réservés

� 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 30 mn 2 h � Créer son site en ligne sur Wordpress. com ◦ Présentation, inscription, exercice 1 h 30 � Créer son site localement avec To. Web ◦ Présentation, inscription, exercice 1 h 30 � Pour aller plus loin ◦ E-commerce, sauvegardes, sécurité 1 h Sommaire Formation « Créer son 1 er 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 1 er 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 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 1 er 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'Hyper. Text 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 1 er 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 1 er 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 W 3 C 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 (MP 3, MP 4) ◦ 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 1 er 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 : 5 E: FF: 56: A 2: 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. forma 2 l. 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 1 er site Web » , Philippe Brandao pour Forma²L – 2012 – Tous droits réservés

Quiz � Lequel de ces éléments est une URL : ◦ ◦ ◦ � Lequel de ces standards n’est pas un protocole de communication de l’Internet : ◦ ◦ � http: //www. lauyan. com/fr/tw-home 192. 34. 213. 13 www 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 1 er 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 1 er 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 1 er 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, mp 3, etc… � Est hébergé sur un serveur Web, généralement accessible sur internet Formation « Créer son 1 er 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 1 er 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, 1 and 1, 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, 1 and 1 ◦ …pour le stockage de données : Amazon S 3, Google storage, Azure Blob Storage (Microsoft), Dropbox, Rackspace Cloud files. ◦ …pour la location de serveurs virtuels : Amazon EC 2, Windows Azure, Google, 1 and 1, OVH Formation « Créer son 1 er 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 (g. TLD) et nationaux (cc. TLD), 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, 1 and 1…). � 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 1 er 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 1 er 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 * To. Web (5) Interne Locale Statique Libre De 0 à 89€ TTC * Website x 5 (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 *** 123 siteweb. fr Interne Distante Statique Editeur 20€ TTC/trim * 1 and 1 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 1 er 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 1 er 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 1 er 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 1 er site Web » , Philippe Brandao pour Forma²L – 2012 – Tous droits réservés

Quiz � Lequel de ces domaines est un g. TLD : ◦ ◦ . 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 1 er 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 1 er 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 1 er 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 1 er 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 4 mn : http: //commentcreerunblog. wordpress. com/2010/09/18/comment-creer-votreblog-wordpress-tutoriel-video Formation « Créer son 1 er 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 1 er 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 1 er 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 1 er 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 1 er site Web » , Philippe Brandao pour Forma²L – 2012 – Tous droits réservés

Contenu : ◦ Présentation de To. Web ◦ Où trouver la documentation ◦ Téléchargement et installation ◦ Création du site Objectifs: ◦ Créer un site simple de recettes de cuisine avec To. Web 4 - Exercice – To. Web Formation « Créer son 1 er site Web » , Philippe Brandao pour Forma²L – 2012 – Tous droits réservés

Présentation de To. Web � 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 1 er 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 To. Web � L’aide en ligne , depuis le menu Support � Le Forum de discussion, accessible depuis le menu Forum Formation « Créer son 1 er 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 To. Web, puis cliquer sur le bouton Télécharger � Une fois dirigé sur le site « 01 net » , cliquer sur le lien « Télécharger » , puis enregistrer le fichier localement. � Suivre la procédure d’installation par défaut, puis lancer To. Web. Formation « Créer son 1 er 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 1 er 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 1 er 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. forma 2 l. fr ◦ Utilisateur : wwwftp ◦ Répertoire distant : « site 1 » , « site 2 » Formation « Créer son 1 er 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 1 er site Web » , Philippe Brandao pour Forma²L – 2012 – Tous droits réservés

�To. Web 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 1 er site Web » , Philippe Brandao pour Forma²L – 2012 – Tous droits réservés

Pour aller plus loin… � Le e-commerce � Sauvegarde / restauration Formation « Créer

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