Création des sites web pour débutant

2,778 views
2,660 views

Published on

3 Comments
0 Likes
Statistics
Notes
  • Quand on se lance dans une création, il faut absolument se poser la question au préalable de la mise à jour du site internet. Car l'animation régulière de vos rubriques est la condition sine qua none pour permettre la popularité et le référencement de votre site web : en d'autres termes, pour que votre site vive et soit visible.
    Est-ce que vous voulez vous former au HTML (quelques heures d'apprentissage) ? Dans ce cas, libre à vous d'opter pour un site web 'fait main' que vous pourrez mettre à jour en modifiant vos pages html et en les mettant en ligne par voie ftp.
    Ou alors, vous souhaitez mettre à jour votre site à l'aide d'une plateforme d'édition aussi simple que Word : alors, vous devrez installer votre site web sur un CMS (Wordpress, Joomla...) et la structure de l'interface sera suffisamment réfléchi à l'avance pour prévoir toutes les éventualités de mise à jour du site web et de contenus à intégrer.
    Si vous vous posez toutes ces questions plus tard, il sera trop tard...
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • mrc
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • thnx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
2,778
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
98
Comments
3
Likes
0
Embeds 0
No embeds

No notes for slide

Création des sites web pour débutant

  1. 1. UNIVERSITE DE DR. YAHYA FARES CLUB SCIENTIFIQUE EMBEDDED MEDEA CRÉATION DES SITES WEB POUR DÉBUTANTPar Farouk Korteby
  2. 2. UNIVERSITE DE DR. YAHYA FARES CLUB SCIENTIFIQUE EMBEDDED MEDEACRÉATION DES SITES WEB POUR DÉBUTANTSOMMAIRE1. Avant de commencer2. Etapes de réalisation3. Apres de terminer
  3. 3. AVANT DE COMMENCER INTERNET :  Un réseau informatique mondial.  EMail, FTP, P2P, VoIP, Web …  FAI : Fournisseur daccès à Internet .  ADSL, Fibre, 3G – 4G+, Satellite.
  4. 4. AVANT DE COMMENCER
  5. 5. AVANT DE COMMENCER Adresse IP (Internet Protocol) :  Un numéro didentification 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. 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 dinteractivité Web 3.0  Internet des objets  Web sémantique
  7. 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. 8. AVANT DE COMMENCER DNS : Mécanisme www.google.com Serveur DNS 173.194.44.38 Serveur Google
  9. 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 lusage des protocoles SSL ou TLS.
  10. 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. 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. 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. 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. 14. UNIVERSITE DE DR. YAHYA FARES CLUB SCIENTIFIQUE EMBEDDED MEDEACRÉATION DES SITES WEB POUR DÉBUTANTSOMMAIRE1. Avant de commencer2. Etapes de réalisation3. Apres de terminer
  15. 15. LES ETAPES1- Analyse / Idée 2 - Design graphique 3 - Développement 4 - Déploiement (mise en ligne) 5 - Référencement
  16. 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. 17. LES ETAPES1- Analyse / Idée 2 - Design graphique 3 - Développement 4 - Déploiement (mise en ligne) 5 - Référencement
  18. 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. 19. LES ETAPES1- Analyse / Idée 2 - Design graphique 3 – Développement 4 - Déploiement (mise en ligne) 5 - Référencement
  20. 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. 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. 22. LES ETAPES : LOGICIEL DE GÉNÉRATION Logiciel de génération de site en ligne :  Wix : www.wix.com
  23. 23. LES ETAPES : LOGICIEL DE GÉNÉRATION Logiciel de génération de site en ligne :  Webs : www.webs.com
  24. 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. 25. LES ETAPES : LOGICIEL DE GÉNÉRATION Logiciel de génération de site installable :  Amaya : http://www.w3.org/Amaya/
  26. 26. LES ETAPES : LOGICIEL DE GÉNÉRATION Logiciel de génération de site installable :  BlueGriffon : http://bluegriffon.org/
  27. 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. 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. 29. LES ETAPES : FROM SCRATCH<!DOCTYPE html><html><body><h1>Mon premier titre</h1><p>Mon premier paragraph.</p></body></html>
  30. 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. 31. LES ETAPES : FROM SCRATCHbody{background-color:black;}h1{color:orange;text-align:center;}p{font-family:"Times New Roman";font-size:20px;color:orange;}
  32. 32. LES ETAPES : FROM SCRATCH From scratch :  JS : JavaScript  C’est un langage de programmation qui permet à travers des pages HTML dexé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. 33. LES ETAPES : FROM SCRATCH<SCRIPT type="text/javascript">alert("Voici un message dalerte!");</SCRIPT>
  34. 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. 35. LES ETAPES : FROM SCRATCH From scratch :  PHP : Comment ca fonctionne ? Serveur Web Internet Navigateur Client Code Code Site PHP HTML Web
  36. 36. LES ETAPES : FROM SCRATCH<!DOCTYPE html><html><body><h1>Mon premier titre</h1><?phpecho <p>Mon premier paragraph.</p>;?></body></html>
  37. 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. 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. 39. LES ETAPES : CMS CMS : Joomla
  40. 40. LES ETAPES : CMS CMS : Joomla
  41. 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. 42. LES ETAPES : CMS CMS : WordPress
  43. 43. LES ETAPES : CMS CMS : WordPress
  44. 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. 45. LES ETAPES1- Analyse / Idée 2 - Design graphique 3 - Développement 4 - Déploiement (mise en ligne) 5 - Référencement
  46. 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. 47. LES ETAPES1- Analyse / Idée 2 - Design graphique 3 - Développement 4 - Déploiement (mise en ligne) 5 - Référencement
  48. 48. LES ETAPES Phase 5 : Référencement  Lindexation du site par les moteurs de recherche.  Google pour les webmasters  Bing - Webmaster Tools  Yahoo Site Explorer  Sitemap  Une page web qui permet laccès à lensemble des pages proposés sur le site.  Un fichier XML ou texte qui répertorie tout les URLs.
  49. 49. LES ETAPES Phase 5 : Référencement  Sitemap
  50. 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. 51. AVANT DE COMMENCER CHECK-LIST Questions ?
  52. 52. UNIVERSITE DE DR. YAHYA FARES CLUB SCIENTIFIQUE EMBEDDED MEDEACRÉATION DES SITES WEB POUR DÉBUTANTSOMMAIRE1. Avant de commencer2. Etapes de réalisation3. Apres de terminer
  53. 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. 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. 55. QUESTIONS ?A venir :Comment créer un site web avecJoomla ?

×