24/03/2006 Création de site web - Club Informatique Saintongeais 1 La création de sites web perso sur internet

24/03/2006Création de site web - Club Informatique Saintongeais1

La création deLa création de sites web perso sites web perso

sur internetsur internet

www.infoweb17.com


Plan généralPlan généralRappel de quelques définitions :

L’internet et Le web Une page web - Un site web

Les architectures générales : Les pages web créées « en dur » (statiques) Le pages web générées dynamiquement

Les Blogues Présentation générale La création d’un Blogue

Les sites perso « classiques » Les étapes pour créer un site, Le Choix d’un logiciel Editeur HTML La publication du site chez l’hébergeur


Internet : c’est Quoi ?Internet : c’est Quoi ? Un réseau informatique mondial reposant sur un système d’adresses

TCP/IP (Transmission Contrôle Protocole/Internet Protocol), chaque ordinateur ayant une adresse IP unique (origine : année 72)

Un réseau des réseaux chargé de transporter des données selon différents protocoles de communication :

HTTP pour le web, HTTPS pour le web en mode sécurisé, FTP pour le transfert de fichiers, SMTP pour envoyer des e-mails, ICQ pour dialoguer en ligne, NNTP pour accéder aux forums de discussion, P2P pour partager des fichiers, SSH pour la sécurité, Et bien d’autres…


Le Web : c’est Quoi ? Le Web : c’est Quoi ? info

Le Web est une abréviation de World Wide Web ou WWW (la toile mondiale) créé dans les années 89/90 (CERN Suisse),

Le Web est un système hypertexte réparti sur Internet qui permet de consulter, avec un navigateur Web, les pages Web mises en ligne dans les sites Web,

L'image de la toile vient des hyperliens qui lient les pages Web entre elles, ils peuvent être suivis pour passer automatiquement d'une page à une autre.


Une Page Web : c’est Quoi ? Une Page Web : c’est Quoi ? info La Page Web est l’unité de consultation du Web, un

document informatique accompagné de texte, images, son, vidéo…

Un document présenté dans des langages reconnus par les navigateurs, exemple : HTML (Hypertext Markup Language), XML, PHP, etc…

La Page Web contient des liens hypertextes, elle s’accompagne donc d’autres ressources : texte, multimédia, etc…


Un site Web : c’est Quoi ? Un site Web : c’est Quoi ? info

On distingue les sites ayant des pages web :

statiques : les pages web sont créées par des éditeurs HTML

dynamiques : les pages web sont générées chez l’hébergeur (Blog, CMS)

Un site web est un ensemble de pages web constituées de fichiers créés ou générés en HTML et des ressources multimédia,

CMS = Content Management System = système de gestion de contenu en ligne


Un créateur du site

(Webmaster)

Un Hébergeur du site

stocke ou génère

les pages web

L’internaute consulte

les pages web

Le FAI

de l’internaute

Architecture générale des sites webArchitecture générale des sites web


Le créateur du site

Hébergeur du site

Fabrique les pages HTML à l’aide d’un Editeur

Publie les pages HTML chez l’hébergeur à l’aide

d’un logiciel FTP

L’internaute

Télécharge et visualise les pages web avec son

navigateur

FAI

Un site Web avec pages statiquesUn site Web avec pages statiques


Le créateur du site

Hébergeur du site

Alimente une base de données en ligne chez

l’hébergeur avec un outil d’administration du site

(CMS)

Le robot de l’hébergeur génère les pages web

demandées par l’internaute

L’internaute

Télécharge et visualise les pages web avec son

navigateur

FAI

Un site Web avec pages dynamiquesUn site Web avec pages dynamiques


La création d’un La création d’un « Blogue »« Blogue »


Le « Blogue » : site perso facile Le « Blogue » : site perso facile info

On distingue différents usages :

Le blogue introspectif : journal perso… Le blogue d’opinion : militantisme… Le blogue pro/techno : thèmes divers Le blogue à part : ovni du web

Apparus fin 1997 aux USA, journal intime, coup de gueule ou sélection de l'actualité, les weblogs ou blogues sont un type de site perso. Ils se sont vraiment développés après le 11 septembre 2001, grace à la facilité de création et de publication en ligne.


Les principaux outils en ligneLes principaux outils en ligne infoinfo Comparatif des outils disponibles sur le web :


Créer un Blogue en quelques clicsCréer un Blogue en quelques clics info

1 – Saisir le nom du site

2 – S’inscrire

3 – Paramétrer les services

4 – Remplir le site

Exemple : en ligne sur le site www.oldiblog.com/

Résultat : un nouveau site :

INFODUWEB


Créer un Blogue avec OldiblogCréer un Blogue avec Oldiblog infoinfo

S’inscrire



S’inscrire


Créer un Blogue avec OldiblogCréer un Blogue avec Oldiblog info

Remplir le site



Remplir le site



Aperçu avant envoi



Design 1



Choix du design

Par l’internaute



Choix du design

Par l’internaute



Choix du design

Par l’internaute



Choix du design

Par l’internaute



Choix du design

Par l’internaute


Créer un Blogue en quelques clicsCréer un Blogue en quelques clics infoinfo

Choix d’une radio

Par l’internaute


Créer un Blogue en quelques clicsCréer un Blogue en quelques clics infoinfo

Choix d’une radio

Par l’internaute


La création d’un La création d’un site perso classiquesite perso classique


Les étapes pour créer un site webLes étapes pour créer un site web info

La réalisation du site :

Les objectifs : se vendre (cv), informer, vendre… Le choix du public : jeunes, seniors, hobby,… Le choix du contenu : selon centre d’intérêt Le choix de la forme : navigation, charte graphique,… L’ergonomie : selon les attentes du public choisi

La Conception pour bien définir :

L’architecture : pages statiques ou dynamiques Les outils : éditeurs (texte ou wysiwing) ou CMS

La publication du site (mise en ligne)

La promotion du site : référencement, maj


Choix d’un logiciel Editeur de pages HTML Choix d’un logiciel Editeur de pages HTML info

Editeurs fournis avec windows : notepad, wordpad… Editeurs freewares sharewares : HtmlEdit,… Linternaute

Editeurs gratuits Non WYSIWYG :

Editeurs gratuits et WYSIWYG : FrontPage Express 2.0, Dreamweaver (démo) Editeurs freewares sharewares : Nvu, Web Construction Kit,…

Editeurs commerciaux spécialisés : Macromédia Dreamweaver MX, Microsoft FrontPage,

Et autres outils Microsoft : (non recommandés) Word, Publisher, PowerPoint etc…

(WYSIWYG = What You See Is What You Get = Ce que vous voyez est ce que vous obtenez)


Une page en HTMLUne page en HTML info info infoinfo info info

Voici comment sont imbriqués les conteneurs :

<HTML> C’est la 1ère ligne du fichier HTML <HEAD> C'est le conteneur de l'entête. ici seront les « métatags » titre, mots clés,… </HEAD>

<BODY> C'est le conteneur du corps.

XXXX ici sera le texte vu par les internautes </BODY>

</HTML> C’est la dernière ligne

Le HTML (HyperText Markup Language) est un langage de balisage pour la publication en hypertexte sur le Web.


Choix d’un logiciel FTP pour publier Choix d’un logiciel FTP pour publier info

Il existe des centaines de logiciels FTP, gratuits le plus souvent, pour transférer un site web et ses mises à jours, sur le site de l’hébergeur.

Le shareware TOTAL COMMANDER intègre cette fonction FTP.

Téléchargement sur le site :

www.ghisler.com


Total Commander Total Commander info


Total Commander Total Commander info


vers l’Hébergeur (Free) de chez le Webmaster (Chaniers)

Publication du site :Publication du site :


Promotion du site : le référencement Promotion du site : le référencement infoinfo

Le but premier du référencement est de générer du trafic ciblé sur un site afin d'augmenter sa visibilité auprès des internautes francophones et internationaux

Le référencement sur les annuaires et moteurs de recherche est devenu un métier, nécessitant une méthodologie.

L’indice de popularité (Pagerank chez Google) nécessite quelques règles :

Optimiser chaque page pour le référencement, Contenu de qualité pour être très référencé Echanges de liens ou de bannières, Site très actualisé sans liens brisés,


Perpsectives d’avenirPerpsectives d’aveniravec l’arrivée du web 2avec l’arrivée du web 2


Web 2 : des internautes « actifs »Web 2 : des internautes « actifs » info

Conçu comme un grand livre à l’échelle mondiale, le web 1.0 s'est contenté de reproduire les modèles connus de l'édition papier. Le web 2.0 transforme le web en une gigantesque base de données.L'arrivée à maturité des technologies XML et une meilleure compréhension du web transforment la Toile en un gigantesque réseau de sources d'information structurées et de services, jetant les bases d'une plate-forme de développement planétaire.Les progrès technologiques de ces dernières années ne sont pas les seules ferments de cette évolution. Les internautes ont changé. Plus nombreux, connectés en haut débit, ils s'impliquent de plus en plus dans la création de «leur» réseau : ils ne se contentent plus de lire, mais publient aussi des données. Web 1.0 Web 2.0

Leaders du web : Entreprises, marchands Internautes

Profil de l'internaute : Passif Actif

Interactivité perçue :Sélection et lecture

d'informationSélection, lecture et publication

de données

Unité de recherche : Mot-clé Tag


Bonne Publication sur le webBonne Publication sur le web

et et

Au plaisir de vous lire bientôt !Au plaisir de vous lire bientôt !


Merci de votre attentionMerci de votre attention

www.infoweb17.com

Documents

24/03/2006 Création de site web - Club Informatique Saintongeais 1 La création de sites web perso sur internet