SlideShare une entreprise Scribd logo
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
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 ?
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
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

1- Analyse / Idée


   2 - Design graphique


      3 - Développement


         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


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

         Code                Code            Site
         PHP                 HTML            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


         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


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

Contenu connexe

Tendances

Reseau
ReseauReseau
Reseau
gijo000
 
Cours services web_fabrice_mourlin
Cours services web_fabrice_mourlinCours services web_fabrice_mourlin
Cours services web_fabrice_mourlinangeeLee
 
Rapport application chat
Rapport application chatRapport application chat
Rapport application chat
Tbatou sanae
 
Système répartis avec RMI
Système répartis avec RMISystème répartis avec RMI
Système répartis avec RMI
Korteby Farouk
 
Les socket ing1_issat
Les socket ing1_issatLes socket ing1_issat
Les socket ing1_issat
sloumaallagui
 
Sockets
SocketsSockets
Sockets
Heithem Abbes
 
Présentation de RMI Java
Présentation de RMI JavaPrésentation de RMI Java
Présentation de RMI JavaZakaria Bouazza
 
Installation et configuration d'apache tomcat
Installation et configuration d'apache tomcatInstallation et configuration d'apache tomcat
Installation et configuration d'apache tomcat
Manassé Achim kpaya
 
Examen
Examen Examen
Examen
TECOS
 
Maintenance du système Linux
Maintenance du système LinuxMaintenance du système Linux
Maintenance du système LinuxEL AMRI El Hassan
 
Appels de procédures distants (RPC)
Appels de procédures distants (RPC)Appels de procédures distants (RPC)
Appels de procédures distants (RPC)
Heithem Abbes
 
Messages queues - Socloz@PHPForum 2013
Messages queues - Socloz@PHPForum 2013Messages queues - Socloz@PHPForum 2013
Messages queues - Socloz@PHPForum 2013
Jean-Francois Bustarret
 
Apache server configuration & sécurisation -
Apache server configuration & sécurisation  -Apache server configuration & sécurisation  -
Apache server configuration & sécurisation -
achraf_ing
 
Administration ubuntu-serveur-installation-ftp-serveur-bernier-francois
Administration ubuntu-serveur-installation-ftp-serveur-bernier-francoisAdministration ubuntu-serveur-installation-ftp-serveur-bernier-francois
Administration ubuntu-serveur-installation-ftp-serveur-bernier-francoisspeegel
 
08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur web08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur web
Noël
 
Serveur ftp
Serveur ftpServeur ftp
Serveur ftp
Sam Rich
 

Tendances (18)

Reseau
ReseauReseau
Reseau
 
Cours services web_fabrice_mourlin
Cours services web_fabrice_mourlinCours services web_fabrice_mourlin
Cours services web_fabrice_mourlin
 
Introduction aux-sockets
Introduction aux-socketsIntroduction aux-sockets
Introduction aux-sockets
 
Rapport application chat
Rapport application chatRapport application chat
Rapport application chat
 
Système répartis avec RMI
Système répartis avec RMISystème répartis avec RMI
Système répartis avec RMI
 
Les socket ing1_issat
Les socket ing1_issatLes socket ing1_issat
Les socket ing1_issat
 
Sockets
SocketsSockets
Sockets
 
Présentation de RMI Java
Présentation de RMI JavaPrésentation de RMI Java
Présentation de RMI Java
 
Installation et configuration d'apache tomcat
Installation et configuration d'apache tomcatInstallation et configuration d'apache tomcat
Installation et configuration d'apache tomcat
 
Examen
Examen Examen
Examen
 
Maintenance du système Linux
Maintenance du système LinuxMaintenance du système Linux
Maintenance du système Linux
 
Appels de procédures distants (RPC)
Appels de procédures distants (RPC)Appels de procédures distants (RPC)
Appels de procédures distants (RPC)
 
Messages queues - Socloz@PHPForum 2013
Messages queues - Socloz@PHPForum 2013Messages queues - Socloz@PHPForum 2013
Messages queues - Socloz@PHPForum 2013
 
Apache server configuration & sécurisation -
Apache server configuration & sécurisation  -Apache server configuration & sécurisation  -
Apache server configuration & sécurisation -
 
Administration ubuntu-serveur-installation-ftp-serveur-bernier-francois
Administration ubuntu-serveur-installation-ftp-serveur-bernier-francoisAdministration ubuntu-serveur-installation-ftp-serveur-bernier-francois
Administration ubuntu-serveur-installation-ftp-serveur-bernier-francois
 
Atelier 3
Atelier 3Atelier 3
Atelier 3
 
08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur web08 01 mise en place d'un serveur web
08 01 mise en place d'un serveur web
 
Serveur ftp
Serveur ftpServeur ftp
Serveur ftp
 

En vedette

Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
Claude Coulombe
 
Collaboration and Governance of Open Source Projects
Collaboration and Governance of Open Source ProjectsCollaboration and Governance of Open Source Projects
Collaboration and Governance of Open Source Projects
Jordi Cabot
 
OCCIware, an extensible, standard-based XaaS consumer platform to manage ever...
OCCIware, an extensible, standard-based XaaS consumer platform to manage ever...OCCIware, an extensible, standard-based XaaS consumer platform to manage ever...
OCCIware, an extensible, standard-based XaaS consumer platform to manage ever...
OCCIware
 
01072013 e governance
01072013 e governance01072013 e governance
01072013 e governance
bharati k
 
Embedded OCL Integration and Debugging
Embedded OCL Integration and DebuggingEmbedded OCL Integration and Debugging
Embedded OCL Integration and Debugging
Edward Willink
 
mis
mismis
misISIG
 
Aligning OCL and UML
Aligning OCL and UMLAligning OCL and UML
Aligning OCL and UML
Edward Willink
 
SysML adoption in France
SysML adoption in FranceSysML adoption in France
SysML adoption in FrancePascal Roques
 
Timing verification of automotive communication architecture using quantile ...
Timing verification of automotive communication  architecture using quantile ...Timing verification of automotive communication  architecture using quantile ...
Timing verification of automotive communication architecture using quantile ...
RealTime-at-Work (RTaW)
 
The Importance of Opposites
The Importance of OppositesThe Importance of Opposites
The Importance of Opposites
Edward Willink
 
Optimized declarative transformation First Eclipse QVTc results
Optimized declarative transformation First Eclipse QVTc resultsOptimized declarative transformation First Eclipse QVTc results
Optimized declarative transformation First Eclipse QVTc results
Edward Willink
 
The OCLforUML Profile
The OCLforUML ProfileThe OCLforUML Profile
The OCLforUML Profile
Edward Willink
 
Modeling the OCL Standard Library
Modeling the OCL Standard LibraryModeling the OCL Standard Library
Modeling the OCL Standard Library
Edward Willink
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de donnéesISIG
 
OCL Integration and Code Generation
OCL Integration and Code GenerationOCL Integration and Code Generation
OCL Integration and Code Generation
Edward Willink
 
UMLX and QVT and ATL
UMLX and QVT and ATLUMLX and QVT and ATL
UMLX and QVT and ATL
Edward Willink
 
Frame latency evaluation: when simulation and analysis alone are not enough
Frame latency evaluation: when simulation and analysis alone are not enoughFrame latency evaluation: when simulation and analysis alone are not enough
Frame latency evaluation: when simulation and analysis alone are not enough
RealTime-at-Work (RTaW)
 
Ressource numérique Circuit électrique au primaire
Ressource numérique Circuit électrique au primaire Ressource numérique Circuit électrique au primaire
Ressource numérique Circuit électrique au primaire
Erradi Mohamed
 
Fast, Faster and Super-Fast Queries
Fast, Faster and Super-Fast QueriesFast, Faster and Super-Fast Queries
Fast, Faster and Super-Fast Queries
Edward Willink
 

En vedette (20)

Normes de base du Web GTI780 & MTI780 ETS A09
Normes de base du Web  GTI780 & MTI780  ETS   A09Normes de base du Web  GTI780 & MTI780  ETS   A09
Normes de base du Web GTI780 & MTI780 ETS A09
 
Collaboration and Governance of Open Source Projects
Collaboration and Governance of Open Source ProjectsCollaboration and Governance of Open Source Projects
Collaboration and Governance of Open Source Projects
 
OCCIware, an extensible, standard-based XaaS consumer platform to manage ever...
OCCIware, an extensible, standard-based XaaS consumer platform to manage ever...OCCIware, an extensible, standard-based XaaS consumer platform to manage ever...
OCCIware, an extensible, standard-based XaaS consumer platform to manage ever...
 
01072013 e governance
01072013 e governance01072013 e governance
01072013 e governance
 
Embedded OCL Integration and Debugging
Embedded OCL Integration and DebuggingEmbedded OCL Integration and Debugging
Embedded OCL Integration and Debugging
 
Java vs .Net
Java vs .NetJava vs .Net
Java vs .Net
 
mis
mismis
mis
 
Aligning OCL and UML
Aligning OCL and UMLAligning OCL and UML
Aligning OCL and UML
 
SysML adoption in France
SysML adoption in FranceSysML adoption in France
SysML adoption in France
 
Timing verification of automotive communication architecture using quantile ...
Timing verification of automotive communication  architecture using quantile ...Timing verification of automotive communication  architecture using quantile ...
Timing verification of automotive communication architecture using quantile ...
 
The Importance of Opposites
The Importance of OppositesThe Importance of Opposites
The Importance of Opposites
 
Optimized declarative transformation First Eclipse QVTc results
Optimized declarative transformation First Eclipse QVTc resultsOptimized declarative transformation First Eclipse QVTc results
Optimized declarative transformation First Eclipse QVTc results
 
The OCLforUML Profile
The OCLforUML ProfileThe OCLforUML Profile
The OCLforUML Profile
 
Modeling the OCL Standard Library
Modeling the OCL Standard LibraryModeling the OCL Standard Library
Modeling the OCL Standard Library
 
Environnement de développement de bases de données
Environnement de développement de bases de donnéesEnvironnement de développement de bases de données
Environnement de développement de bases de données
 
OCL Integration and Code Generation
OCL Integration and Code GenerationOCL Integration and Code Generation
OCL Integration and Code Generation
 
UMLX and QVT and ATL
UMLX and QVT and ATLUMLX and QVT and ATL
UMLX and QVT and ATL
 
Frame latency evaluation: when simulation and analysis alone are not enough
Frame latency evaluation: when simulation and analysis alone are not enoughFrame latency evaluation: when simulation and analysis alone are not enough
Frame latency evaluation: when simulation and analysis alone are not enough
 
Ressource numérique Circuit électrique au primaire
Ressource numérique Circuit électrique au primaire Ressource numérique Circuit électrique au primaire
Ressource numérique Circuit électrique au primaire
 
Fast, Faster and Super-Fast Queries
Fast, Faster and Super-Fast QueriesFast, Faster and Super-Fast Queries
Fast, Faster and Super-Fast Queries
 

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

Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Marouan OMEZZINE
 
Digital race evolution programmation web 1.0
Digital race   evolution programmation web 1.0Digital race   evolution programmation web 1.0
Digital race evolution programmation web 1.0
Sequoia-ID
 
Comment creer un site internet
Comment creer un site internetComment creer un site internet
Comment creer un site internet
estreetz
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Vlad Posea
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
yassinesouli2
 
WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?
mirabelleformation
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
davrous
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
CARA_Lyon
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Laurent Moccozet
 
Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010
Guillaume Sautereau
 
Cours programmation web, introduction à HTML et CSS.pptx
Cours programmation web, introduction à HTML et CSS.pptxCours programmation web, introduction à HTML et CSS.pptx
Cours programmation web, introduction à HTML et CSS.pptx
tienne6
 
Introduction aux outils_pour_le_web_-_chapitre_0_-_introduction.key
Introduction aux outils_pour_le_web_-_chapitre_0_-_introduction.keyIntroduction aux outils_pour_le_web_-_chapitre_0_-_introduction.key
Introduction aux outils_pour_le_web_-_chapitre_0_-_introduction.key
Alpha Oumar Barry
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
BNSA - Aquitaine
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Frédéric Harper
 
C2i Web
C2i WebC2i Web
C2i Webc2i
 
Intellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server InternalsIntellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server Internals
Neil Armstrong
 
Joomla Days 2011 Lyon
Joomla Days 2011 LyonJoomla Days 2011 Lyon
Joomla Days 2011 LyonLeTesteur
 
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
FootballLovers9
 

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

SAPIENS2009 - Module 4B
SAPIENS2009 - Module 4BSAPIENS2009 - Module 4B
SAPIENS2009 - Module 4B
 
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINEIntroduction aux Technologies Web élaborée par Marouan OMEZZINE
Introduction aux Technologies Web élaborée par Marouan OMEZZINE
 
Digital race evolution programmation web 1.0
Digital race   evolution programmation web 1.0Digital race   evolution programmation web 1.0
Digital race evolution programmation web 1.0
 
Comment creer un site internet
Comment creer un site internetComment creer un site internet
Comment creer un site internet
 
Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1Introduction dans la Programmation Web Course 1
Introduction dans la Programmation Web Course 1
 
Yass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptxYass-RSI-Bootstrap.pptx
Yass-RSI-Bootstrap.pptx
 
WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?WORDPRESS Qu'est ce que c'est ?
WORDPRESS Qu'est ce que c'est ?
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
HTML5... La révolution maintenant!
HTML5... La révolution maintenant!HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
 
Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)Systèmes de Gestion de Contenu (SGC)
Systèmes de Gestion de Contenu (SGC)
 
Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010Présentation de CakePHP, 22/04/2010
Présentation de CakePHP, 22/04/2010
 
Cours programmation web, introduction à HTML et CSS.pptx
Cours programmation web, introduction à HTML et CSS.pptxCours programmation web, introduction à HTML et CSS.pptx
Cours programmation web, introduction à HTML et CSS.pptx
 
Introduction aux outils_pour_le_web_-_chapitre_0_-_introduction.key
Introduction aux outils_pour_le_web_-_chapitre_0_-_introduction.keyIntroduction aux outils_pour_le_web_-_chapitre_0_-_introduction.key
Introduction aux outils_pour_le_web_-_chapitre_0_-_introduction.key
 
HTML5, le web de demain - BNSA
HTML5, le web de demain - BNSAHTML5, le web de demain - BNSA
HTML5, le web de demain - BNSA
 
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs WebUne visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
Une visite guidée d’Internet Explorer 9 et HTML5 pour les développeurs Web
 
C2i Web
C2i WebC2i Web
C2i Web
 
Intellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server InternalsIntellicore Tech Talk 10 - Apache Web Server Internals
Intellicore Tech Talk 10 - Apache Web Server Internals
 
Joomla Days 2011 Lyon
Joomla Days 2011 LyonJoomla Days 2011 Lyon
Joomla Days 2011 Lyon
 
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptxresume-theorique-m104-0401-61d5b38b21f67 (1).pptx
resume-theorique-m104-0401-61d5b38b21f67 (1).pptx
 

Plus de Korteby Farouk

XWiki : Framework de développement pour les plateformes collaboratives
XWiki : Framework de développement pour les plateformes collaborativesXWiki : Framework de développement pour les plateformes collaboratives
XWiki : Framework de développement pour les plateformes collaborativesKorteby Farouk
 
Atelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWikiAtelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWiki
Korteby Farouk
 
Ateliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceAteliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceKorteby Farouk
 
Developpement mobile vs open source
Developpement mobile vs open sourceDeveloppement mobile vs open source
Developpement mobile vs open sourceKorteby Farouk
 
Le système d&rsquo;E/S en Java
Le système d&rsquo;E/S en JavaLe système d&rsquo;E/S en Java
Le système d&rsquo;E/S en Java
Korteby Farouk
 
Les Servlets et JSP
Les Servlets et JSPLes Servlets et JSP
Les Servlets et JSP
Korteby Farouk
 
Applets
AppletsApplets

Plus de Korteby Farouk (7)

XWiki : Framework de développement pour les plateformes collaboratives
XWiki : Framework de développement pour les plateformes collaborativesXWiki : Framework de développement pour les plateformes collaboratives
XWiki : Framework de développement pour les plateformes collaboratives
 
Atelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWikiAtelier : Développement rapide d&rsquo;une application basée surXWiki
Atelier : Développement rapide d&rsquo;une application basée surXWiki
 
Ateliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open sourceAteliers : Developpement mobile vs open source
Ateliers : Developpement mobile vs open source
 
Developpement mobile vs open source
Developpement mobile vs open sourceDeveloppement mobile vs open source
Developpement mobile vs open source
 
Le système d&rsquo;E/S en Java
Le système d&rsquo;E/S en JavaLe système d&rsquo;E/S en Java
Le système d&rsquo;E/S en Java
 
Les Servlets et JSP
Les Servlets et JSPLes Servlets et JSP
Les Servlets et JSP
 
Applets
AppletsApplets
Applets
 

Création des sites web pour débutant

  • 1. UNIVERSITE DE DR. YAHYA FARES CLUB SCIENTIFIQUE EMBEDDED MEDEA CRÉATION DES SITES WEB POUR DÉBUTANT Par Farouk Korteby
  • 2. 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
  • 3. 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.
  • 5. 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
  • 6. 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
  • 7. 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
  • 8. AVANT DE COMMENCER  DNS : Mécanisme www.google.com Serveur DNS 173.194.44.38 Serveur Google
  • 9. 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.
  • 10. 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/
  • 11. 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
  • 12. 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
  • 13. 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 ?
  • 14. 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
  • 15. LES ETAPES 1- Analyse / Idée 2 - Design graphique 3 - Développement 4 - Déploiement (mise en ligne) 5 - Référencement
  • 16. 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.
  • 17. LES ETAPES 1- Analyse / Idée 2 - Design graphique 3 - Développement 4 - Déploiement (mise en ligne) 5 - Référencement
  • 18. 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.
  • 19. LES ETAPES 1- Analyse / Idée 2 - Design graphique 3 – Développement 4 - Déploiement (mise en ligne) 5 - Référencement
  • 20. 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
  • 21. 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
  • 22. LES ETAPES : LOGICIEL DE GÉNÉRATION  Logiciel de génération de site en ligne :  Wix : www.wix.com
  • 23. LES ETAPES : LOGICIEL DE GÉNÉRATION  Logiciel de génération de site en ligne :  Webs : www.webs.com
  • 24. 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
  • 25. LES ETAPES : LOGICIEL DE GÉNÉRATION  Logiciel de génération de site installable :  Amaya : http://www.w3.org/Amaya/
  • 26. LES ETAPES : LOGICIEL DE GÉNÉRATION  Logiciel de génération de site installable :  BlueGriffon : http://bluegriffon.org/
  • 27. LES ETAPES : LOGICIEL DE GÉNÉRATION  Logiciel de génération de site installable :  Komodo Edit : http://www.activestate.com/komodo-edit
  • 28. 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,  …
  • 29. LES ETAPES : FROM SCRATCH <!DOCTYPE html> <html> <body> <h1>Mon premier titre</h1> <p>Mon premier paragraph.</p> </body> </html>
  • 30. 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 …
  • 31. 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; }
  • 32. 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
  • 33. LES ETAPES : FROM SCRATCH <SCRIPT type="text/javascript"> alert("Voici un message d'alerte!"); </SCRIPT>
  • 34. 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 …
  • 35. LES ETAPES : FROM SCRATCH  From scratch :  PHP : Comment ca fonctionne ? Serveur Web Internet Navigateur Client Code Code Site PHP HTML Web
  • 36. LES ETAPES : FROM SCRATCH <!DOCTYPE html> <html> <body> <h1>Mon premier titre</h1> <?php echo '<p>Mon premier paragraph.</p>'; ?> </body> </html>
  • 37. 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 …
  • 38. 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/
  • 39. LES ETAPES : CMS  CMS : Joomla
  • 40. LES ETAPES : CMS  CMS : Joomla
  • 41. 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/
  • 42. LES ETAPES : CMS  CMS : WordPress
  • 43. LES ETAPES : CMS  CMS : WordPress
  • 44. 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.
  • 45. LES ETAPES 1- Analyse / Idée 2 - Design graphique 3 - Développement 4 - Déploiement (mise en ligne) 5 - Référencement
  • 46. 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)
  • 47. LES ETAPES 1- Analyse / Idée 2 - Design graphique 3 - Développement 4 - Déploiement (mise en ligne) 5 - Référencement
  • 48. 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.
  • 49. LES ETAPES  Phase 5 : Référencement  Sitemap
  • 50. 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.
  • 51. AVANT DE COMMENCER CHECK-LIST Questions ?
  • 52. 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
  • 53. 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
  • 54. 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.
  • 55. QUESTIONS ? A venir : Comment créer un site web avec Joomla ?