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

MEDEA

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



MEDEA

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

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

http://www.google.com/

http://www.yahoo.fr/

http://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/


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


SERVEUR WEB Générateur des sites

SGBD Gestions des données.

CHECK-LIST

Questions ?




MEDEA

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.

http://www.freecsstemplates.org/

http://www.templatemonster.com/

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

https://sites.google.com/

http://www.wix.com/

http://www.webs.com/

http://www.wordpress.com/

http://www.blogger.com/


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

http://www.wix.com/


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

http://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

http://www.w3.org/Amaya/

http://bluegriffon.org/



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

http://www.w3.org/Amaya/


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

http://bluegriffon.org/


Logiciel de génération de site installable : 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

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

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


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

http://www.joomla24.com/

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/

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 ?




MEDEA

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 ?

Documents

Création des sites web pour débutant