création des sites web pour débutant
DESCRIPTION
TRANSCRIPT
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
CRÉATION DES SITES WEB POUR DÉBUTANT
UNIVERSITE DE DR. YAHYA FARESCLUB SCIENTIFIQUE EMBEDDED
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
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 ?
SOMMAIRE1. Avant de commencer2. Etapes de réalisation3. Apres de terminer
CRÉATION DES SITES WEB POUR DÉBUTANT
UNIVERSITE DE DR. YAHYA FARESCLUB SCIENTIFIQUE EMBEDDED
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
2 - Design graphique
3 - Développement / Intégration
4 - Déploiement (mise en ligne)
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
2 - Design graphique
3 - Développement / Intégration
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 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
LES ETAPES : LOGICIEL DE GÉNÉRATION
Logiciel de génération de site en ligne : Wix : www.wix.com
LES ETAPES : LOGICIEL DE GÉNÉRATION
Logiciel de génération de site en ligne : Webs : www.webs.com
LES ETAPES : LOGICIEL DE GÉNÉRATION
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
LES ETAPES : LOGICIEL DE GÉNÉRATION
Logiciel de génération de site installable : Amaya : http://www.w3.org/Amaya/
LES ETAPES : LOGICIEL DE GÉNÉRATION
Logiciel de génération de site installable : BlueGriffon : http://bluegriffon.org/
LES ETAPES : LOGICIEL DE GÉNÉRATION
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>
LES ETAPES : FROM SCRATCH
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 …
LES ETAPES : FROM SCRATCH
body{background-color:black;}h1{color:orange;text-align:center;}p{font-family:"Times New
Roman";font-size:20px;color:orange;}
LES ETAPES : FROM SCRATCH
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
LES ETAPES : FROM SCRATCH
<SCRIPT type="text/javascript"> alert("Voici un message d\'alerte!");</SCRIPT>
LES ETAPES : FROM SCRATCH
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 …
LES ETAPES : FROM SCRATCH
From scratch : PHP : Comment ca fonctionne ?
Serveur Web
Code PHP
Internet
Code HTML
Navigateur Client
Site Web
LES ETAPES : FROM SCRATCH
<!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
2 - Design graphique
3 - Développement / Intégration
4 - Déploiement (mise en ligne)
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
2 - Design graphique
3 - Développement / Intégration
4 - Déploiement (mise en ligne)
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 ?
SOMMAIRE1. Avant de commencer2. Etapes de réalisation3. Apres de terminer
CRÉATION DES SITES WEB POUR DÉBUTANT
UNIVERSITE DE DR. YAHYA FARESCLUB SCIENTIFIQUE EMBEDDED
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 ?