Cours de Création de Sites Internet PDF
Document Details
Sofiane Ramdani
Tags
Summary
This document provides an overview of website creation, discussing topics such as the differences between static and dynamic websites, the role of HTML and CSS, and the concept of client-server interaction. It details the use of languages like HTML, CSS, and PHP in conjunction with databases like MySQL to build dynamic websites.
Full Transcript
UE 151.A : Sofiane Ramdani Créa6on de sites internet Au cours du 20ème siècle --> Grande Révolu7ons Technologiques - Electronique = science de physique quan7que ( le très pe7t ) o Transistor : pe7t composant électronique qui laisse passer ou non le co...
UE 151.A : Sofiane Ramdani Créa6on de sites internet Au cours du 20ème siècle --> Grande Révolu7ons Technologiques - Electronique = science de physique quan7que ( le très pe7t ) o Transistor : pe7t composant électronique qui laisse passer ou non le courant § Exemple du codage binaire o Arrivé de toutes sortes de capteurs ( « sensors » ) = disposi7f qui s’appuie sur l’électronique et la physique, qui permets de transmeLre une informa7on physique en signal électrique § Capteur température, audio... Signal analogique ( tension en volt ) = signal qui est con7nue dans le temps, à chaque instant. On a une infinité de valeurs vu que c’est con7nu. Nous sommes passés du signal analogique au signal numérique sous forme de conversion - Informa8que = Stocker l’informa7on donc on peut l’enregistrer et la revisualiser plus tard, ce qui n’était pas possible avec les oscilloscopes Signal numérique ( « digital » ) = ne peut pas être con7nu dans le temps, voca7on à être transformer dans une séries de valeurs. Il est discré8sé dans le temps. - Echan8llonné = discrédité dans le temps - Quan8fié = discré7sé en valeurs sur les ordonnées - Période d’échan8llonnage = Temps sur lequel on va demander les valeurs o PE = 0,1s o Fréquence d’échan5llonnage = FE = 1/PE = 10 Hz La vidéo numérique c’est quoi ? Ce qui va être capter par un capteur d’intensité lumineuse - Ce capteur va transformer l’intensité lumineuse en signal électrique. L’image numérique c’est quoi ? Un tableau en 2D composés de pixels - Pour le noir et blanc on a 256 niveaux de grilles, codées de 0 à 255. 0 noir absolu 255 = blanc - En couleurs on est sur un codage RGB ( rouge / vert / bleu ). o Pour chaque pixel on a donc 3 informa7ons Différents formats d’image --> PNG, JPG ou JPEG, GIF ( peut être animé ), TIFF ( format non compressé + pour grande affiches ) Les principales caractéris8ques d’un fichier vidéo sont donc : La taille mémoire ( en octet, méga octet, etc..) Le format ( MP4, MKV, AVI, ASF, MOV ) Le codec ( permets de compresser / décompresser un fichier vidéo ) ( XviD, x264 ) La résolu8on en pixels ( qualité d’image ) La vitesse ou fréquence d’images (frame rate) en image/seconde. Introduc6on à WordPress 1. Le World Wide Web : L’origine d’internet --> États-Unis d’origine militaire Internet cela inclus plusieurs chose : - Naviga5on sur le www - Messagerie électronique ( une des applica5ons d’internet ) - Partage de fichiers Le www fonc7onne sur le principe client / serveur - Le client étant un ou8l permeSant d’accéder aux ressources du serveur o Logiciel qui permets d’accéder aux pages web ( navigateur ) § Mozilla Firefox / Yahoo / Chrome / Safari / Edge - Le serveur étant un ordinateur qui héberge des ressources telles que des sites web è Le protocole de communica8on hSp ( HyperText Transfer Protocol ) permets d’établir la rela7on entre le client et le serveur Exemple hOp = serveur Apache 2. Site Web sta8que vs dynamique : Un site sta8que est un ensemble de pages développées en HTLM/CSS stockées sur un serveur et directement accessibles HTML ( HyperText Markup Language ) est un langage informa8que, dit à balises ( < > ), crée pour éditer des pages web - Permets de structurer et d’organiser le contenu des pages web - Couramment associé au langage de programma7on Javascript CSS ( Cascading Style Sheets ) est un autre langage informa8que des7né à décrire la présenta8on et le style d’un document HTML - Fonc7onne sur le principe des classes qui sont des aLributs affectés à des groupes d’éléments HTML - Les aLributs peuvent par exemple être la couleur ou l’image d’arrière-plan, type de police ou caractère... Pour un site dynamique les pages Web sont produites lorsqu’elles sont demandées - Contenu des pages différents selon le client ( impossible pour un site sta7que ) - Ces pages sont générés grâce à l’associa7on d’un langage de programma8on par8culier ( PHP ) et d’une base de données ( BDD MySQL ) - Contenu ainsi dissocié de la présenta7on Dans le cas d’un site dynamique, lorsque le serveur Web reçoit une requête HTTP, il interroge la BDD et construit une page Web affichée par le navigateur. Parmi les avantages de ce type de site : - Une mise à jour moins fas7dieuse - Plus de flexibilité pour les sites importants - Possibilités de contribu7on avec des droits variables 3. PHP / MySQL : Une base de données MySQL est un ensemble de tables qui stockent de l’informa8on Le PHP est un langage de programma8on qui permet d’interroger, de modifier le contenu d’une BDD. - Il génère du code HTML. Le PHP se présente sous la forme de scripts intégrés à des pages Web (requêtes SQL). - Ces scripts opèrent uniquement au niveau du serveur hébergeant le site. 4. Les CMS : Un CMS (content management system) est un système de ges8on de contenu Web (ou système de publica7on Web). C’est un logiciel prêt à l’emploi. Il propose une zone d’administra8on pour une ges8on dynamique en ligne d’un site (depuis le Web). Parmi les possibilités offertes par un CMS, on peut citer : - Modifica7on de la forme sans toucher au contenu - Site paramétrable simplement - Administra7on accessible depuis le Web - U7lisa7on de modèles de sites préfabriqués 5. WordPress : WordPress est un CMS gratuit et open source ( comme Joomla, SPIP, Drupal ) En 2022, WordPress est u7lisé par près de 43% des sites web sur l’ensemble de la planète - Se caractérise par une flexibilité, une facilité d’u7lisa7on et une évolu7vité - Propose un très grand nombre de thèmes et d’extensions ( plugins ) - Communauté d’u7lisateurs est très importante 6. Quelques no8ons de base de WordPress : - Back-end - Front-end - Publier - Pages - Catégories - Plugins - Thèmes - Widgets - Médias - Ar8cles 7. Prérequis avant d’installer WordPress : WordPress peut fonc7onner sur différents systèmes d’exploita7on ( Windows, Mac OS ) Il peut être installé localement, directement sur un serveur ou automa7quement via les modules hébergeurs. Pour faire fonc7onner WordPress en local sur un ordinateur, il faut disposer des ou8ls suivants : - PHP - Serveur Web Apache - Système de ges8on de base de données MySQL - Ou8l d’administra8on ( PHP MyAdmin ) pour gérer la base de données - Navigateur ( Mozilla Firefox ) Il est conseillé aussi d’installer sur sa machine l’éditeur Notepad++ afin de modifier plus aisément certains scripts