Création des sites web pour débutant

UNIVERSITE DE DR. YAHYA FARES
CLUB SCIENTIFIQUE EMBEDDED
MEDEA

CRÉATION DES SITES WEB
POUR DÉBUTANT
Par Farouk Korteby

UNIVERSITE DE DR. YAHYA FARES
CLUB SCIENTIFIQUE EMBEDDED
MEDEA

CRÉATION DES SITES WEB
POUR DÉBUTANT

SOMMAIRE
1. Avant de commencer
2. Etapes de réalisation
3. 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

www.google.com

Serveur DNS 173.194.44.38
Serveur 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

CHECK-LIST
 INTERNET  HTTP / HTTPS
 Réseaux des réseaux  Protocole échange web
 Adresse IP  URL
 173.194.44.38  http://www.google.com/
 WEB  SERVEUR WEB
 Système d’échange.  Générateur des sites
 DNS  SGBD
 www.google.com  Gestions des données.

Questions ?

LES ETAPES

1- Analyse / Idée

2 - Design graphique

3 - Développement

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

2 - Design graphique

3 – Développement

4 - Déploiement (mise en ligne)

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 ligne
b) 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

 Wix : www.wix.com

 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

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

 BlueGriffon : http://bluegriffon.org/

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

 …

<!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 Internet Navigateur Client

Code Code Site
PHP HTML 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 : 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 :
 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
 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
 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
 Sitemap

LES ETAPES
 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

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

En vedette

En vedette (20)

Similaire à Création des sites web pour débutant

Similaire à Création des sites web pour débutant (20)

Plus de Korteby Farouk

Plus de Korteby Farouk (7)

Création des sites web pour débutant