Création des sites web pour débutant

CRÉATION DES SITES WEB POUR DÉBUTANT

Par Farouk Korteby

UNIVERSITE DE DR. YAHYA FARESCLUB SCIENTIFIQUE EMBEDDED

SOMMAIRE1. Avant de commencer2. Etapes de réalisation3. Apres de terminer

AVANT DE COMMENCER INTERNET :

Un réseau informatique mondial. EMail, FTP, P2P, VoIP, Web …

FAI : Fournisseur d'accès à Internet . ADSL, Fibre, 3G – 4G+, Satellite.

AVANT DE COMMENCER

Adresse IP (Internet Protocol) : Un numéro d'identification qui est attribué de

façon permanente ou provisoire à chaque appareil connecté à un réseau informatique (Internet).

Exemple : IPv4 (4 octets) : 173.194.44.38 IPv6 (16 octets) :

2A01:E35:2421:4BE0:CDBC:C04E:A7AB:ECF3

AVANT DE COMMENCER

WEB : World Wide Web Système fonctionnant sur internet Qui permet de consulter des sites A l’aide des navigateurs web

Web 2.0 Plus de simplicité et plus d'interactivité

Web 3.0 Internet des objets Web sémantique

AVANT DE COMMENCER

DNS : Domain Name System Un service permettant de traduire un nom de

domaine en adresses IP.

Exemple de nom de domaine : www.google.com www.wikipedia.fr www.univ-medea.dz

AVANT DE COMMENCER

DNS : Mécanisme

Serveur DNS

www.google.com

173.194.44.38Serveur Google

AVANT DE COMMENCER

HTTP : Hypertext Transfer Protocol Il permet le transfert de fichiers essentiellement

HTML via le Web. Localisés grâce à des URL entre un navigateur et

un serveur Web. HTTPS : Hypertext Transfer Protocol Secured

Est la variante du HTTP sécurisée par l'usage des protocoles SSL ou TLS.

AVANT DE COMMENCER

URL : Uniform Resource Locator C’est une adresse web désigne une chaîne de

caractères utilisée pour adresser les ressources Web (Page HTML, image, son …).

Exemple : http://www.google.com/http://www.wikipedia.fr/http://www.univ-medea.dz/

AVANT DE COMMENCER

SERVEUR WEB/HTTP : Est un logiciel servant des requêtes respectant

le protocole HTTP, pour servir des pages Web. Exemples :

Apache HTTP Server Apache Tomcat IIS : Internet Information Services Google Web Server

AVANT DE COMMENCER

SGBD : Système de gestion de base de données Est un logiciel dédié à la manipulation

d’importante quantité de données. Ses données sont généralement organisées sous

forme de bases de données.

Exemples : MySQL Oracle SQL Server

AVANT DE COMMENCER

INTERNET Réseaux des

réseaux Adresse IP

173.194.44.38 WEB

Système d’échange. DNS

www.google.com

HTTP / HTTPS Protocole échange

web URL

http://www.google.com/

SERVEUR WEB Générateur des sites

SGBD Gestions des données.

CHECK-LIST

Questions ?

LES ETAPES

1- Analyse / Idée

2 - Design graphique

3 - Développement / Intégration

4 - Déploiement (mise en ligne)

5 - Référencement

LES ETAPES

Phase 1 : Analyse / Idée : Type / Catégorie :

Site vitrine, Blog, Forum, e-commerce, mobile, application web.

Énumérer les services à proposer. Établir l’arborescence et la structure du site. Déterminer, évaluer et produire les contenus. Réfléchir aux stratégies de référencement.

LES ETAPES

1- Analyse / Idée

5 - Référencement

LES ETAPES

Phase 2 : Design graphique : Le graphisme de votre site reflète la nature de

votre activité. Comment faire ?

Télécharger un Template (Gratuit/Payant) http://www.freecsstemplates.org/ http://www.templatemonster.com/

Concevoir votre propre design The Gimp, Photoshop ,Painter, Flash, Fireworks.

LES ETAPES

1- Analyse / Idée

5 - Référencement

LES ETAPES Phase 3 : Développement / Intégration :

Réalisation du site. Comment faire ?

1. Logiciel de génération :a) En ligneb) Install able

2. From Scratch (HTML, CSS, JavaScript, PHP…)3. CMS

LES ETAPES : LOGICIEL DE GÉNÉRATION

Logiciel de génération de site en ligne : Google Sites : sites.google.com Wix : www.wix.com Webs : www.webs.com

Blog : Wordpress : www.wordpress.com Blogger : http://www.blogger.com

Logiciel de génération de site en ligne : Wix : www.wix.com

Logiciel de génération de site en ligne : Webs : www.webs.com

Logiciel de génération de site installable : Amaya : http://www.w3.org/Amaya/ BlueGriffon : http://bluegriffon.org/ Komodo Edit :

http://www.activestate.com/komodo-edit

Adobe Dreamweaver Microsoft Expression Web

Logiciel de génération de site installable : Amaya : http://www.w3.org/Amaya/

Logiciel de génération de site installable : BlueGriffon : http://bluegriffon.org/

Logiciel de génération de site installable : Komodo Edit :

http://www.activestate.com/komodo-edit

LES ETAPES : FROM SCRATCH

From scratch : HTML : Hypertext Markup Language

Est le format de données conçu pour représenter les pages web.

C’est un langage de balisage permettant d’écrire le contenu des pages , d’inclure des ressources multimédias , des formulaires de saisie, …

LES ETAPES : FROM SCRATCH <!DOCTYPE html><html><body>

<h1>Mon premier titre</h1>

<p>Mon premier paragraph.</p>

</body></html>

From scratch : CSS: Cascading Style Sheets

Est un langage qui sert à décrire la présentation des documents HTML .

Il permet de définir le style de votre site : Les couleurs Type de polices La disposition …

body{background-color:black;}h1{color:orange;text-align:center;}p{font-family:"Times New

Roman";font-size:20px;color:orange;}

From scratch : JS : JavaScript

C’est un langage de programmation qui permet à travers des pages HTML d'exécuter des commandes du côté client(navigateur web).

AJAX : Asynchronous JavaScript and XML Permet de construire des applications Web et des

sites web dynamiques interactifs sur le poste client. Bibliothèques de JavaScript

jQuery , Porototypejs, Dojo

<SCRIPT type="text/javascript"> alert("Voici un message d\'alerte!");</SCRIPT>

From scratch : PHP : Hypertext Preprocessor

Est un langage de scripts principalement utilisé pour produire des pages Web dynamiques via un serveur HTTP.

Le code PHP peut facilement être mélangé avec du code HTML.

Bibliothèques ou Frameworks : Zend Framework, Symfony , CakePHP …

From scratch : PHP : Comment ca fonctionne ?

Serveur Web

Code PHP

Internet

Code HTML

Navigateur Client

Site Web

<!DOCTYPE html><html><body>

<h1>Mon premier titre</h1>

<?php echo '<p>Mon premier

paragraph.</p>'; ?>

</body></html>

LES ETAPES : CMS

CMS : Content Management System Des logiciels destinés à la conception et à la

mise à jour dynamique de sites Web. Gestion du contenu / pages web Gestion des utilisateurs et droits Fonctionnalités :

FAQ, Forum, Blog, Catalogue de produits …

LES ETAPES : CMS

CMS : Joomla Open source écrit en PHP et utilise MySQL.

Gestion des Template (Design) http://www.joomla24.com/

Gestion des menus Gestion des articles et catégories d’articles Gestion des utilisateurs et droits Plusieurs langues disponibles (Arabe, Français …) Extensions (Plus de 10.000)

http://extensions.joomla.org/

LES ETAPES : CMS

CMS : Joomla

LES ETAPES : CMS

CMS : Joomla

LES ETAPES : CMS

CMS : WordPress Open source écrit en PHP et utilise MySQL.

Initialement c’est moteur de blog Gestion des themes (Design) Gestion des menus Gestion du contenu Gestion des utilisateurs et droits Plugins (Plus de 23,000)

http://wordpress.org/extend/plugins/

LES ETAPES : CMS

CMS : WordPress

LES ETAPES : CMS

CMS : WordPress

LES ETAPES : CMS

CMS : Drupal

Rapid website assembler. OSCommerce

Boutique en ligne. TikiWiki

forums, articles, wiki, calendrier, galerie photo, etc. Xoops

Sites communautaires, portails Intranet, portails corporatifs, journaux en ligne.

LES ETAPES

1- Analyse / Idée

5 - Référencement

LES ETAPES

Phase 4 : Déploiement Hébergement

Free : Biz.nf, AwardSpace.net, Free Hosting EU. Payant : ayrade.com, kdhosting.net, hostbled.com

Prix entre 2000/5000 DA par ans FTP : File Transfer Protocol

Il permet, le transfère des fichiers sur un réseau (Internet).

FileZilla, FireFTP (extension pour Firefox)

LES ETAPES

1- Analyse / Idée

5 - Référencement

LES ETAPES

Phase 5 : Référencement L'indexation du site par les moteurs de

recherche. Google pour les webmasters Bing - Webmaster Tools Yahoo Site Explorer

Sitemap Une page web qui permet l'accès à l'ensemble des

pages proposés sur le site. Un fichier XML ou texte qui répertorie tout les URLs.

LES ETAPES

Phase 5 : Référencement Sitemap

LES ETAPES

Phase 5 : Référencement Publicité

Annuaires des sites. Forum ou réseaux sociaux. Régie publicitaire Internet:

Google AdSense. Pubdirecte. Facebook.

Publicité traditionnel.

AVANT DE COMMENCER

CHECK-LIST

Questions ?

APRES DE TERMINER

Un site Internet est une matière vivante qui demande qu’on s’occupe d’elle.

Mise a jours du contenu Référencement Intégrer des fonctionnalités collaboratif

Commentaires Facebook, Twiter

APRES DE TERMINER

Mesure d’audience Nombre de visiteurs par date. Origine géographique (Pays, Ville … ) Sites référents Mots clés dans les moteurs de recherche.

Google analytics. XITI.

QUESTIONS ?A venir :Comment créer un site web avec Joomla ?

Création des sites web pour débutant

Documents

MANUEL POUR L'ADMINISTRATEUR DÉBUTANT

1º débutant fini

Retouches Niveau : Débutant

Guide du débutant - wiki.documentfoundation.org©buter... · Base crée des bases de données relationnelles. Cela rend assez facile la création de bases de

Présentation jQuery pour débutant

M12 Création de sites webTIC-TSDI

Dictionnaire français Débutant - Auzou.ca

Tutoriel pour la création d'un site web - Google Sites · PDF fileTutoriel pour la création d'un Google Sites TechnoConseil 3 Tutoriel pour la création d'un Google Sites Pré-requis

EPICES Création d’une école de cuisine multi-sites

débutant Guide de l’astronome débutant - eyrolles.com · débutant Guide de l’astronome débutant ... donne des pistes pour choisir un instrument en fonction de ce que l’on

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

Fiche Débutant

Rubedo commerce, tutoriel de création de sites ecommerce

2º débutant fini

Le Guide Du Débutant

PAO DÉBUTANT

Programmation Débutant Python

L'Harmonica Blues Pour Débutant

moyse le débutant flûtiste

Mission d’étude pour la création d’un parc naturel marin ... · Méthode du questionnaire accompagnée de ... « Débutants » < « Intermédiaires ... "intermédiaire" et "débutant"