La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Publication Web Introduction à XHTML, à CSS, aux blogs et aux wikis Thierry Lemeunier 1.

Présentations similaires


Présentation au sujet: "Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Publication Web Introduction à XHTML, à CSS, aux blogs et aux wikis Thierry Lemeunier 1."— Transcription de la présentation:

1 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Publication Web Introduction à XHTML, à CSS, aux blogs et aux wikis Thierry Lemeunier 1

2 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Sommaire Diffusion par le web : le client-serveur Créer des pages web en XHTML Agrémenter ses pages web avec CSS Créer son wiki avec DokuWiki Créer son blog avec WordPress 2

3 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Le client-serveur (1/3) Toute diffusion de données sur le réseau Internet suit le principe du client-serveur : Client : la machine qui demande laccès à une information Serveur : la machine qui diffuse linformation demandée Pour lire une page dun site web, le navigateur web de la machine cliente « dialogue » avec la machine serveur hébergeant le site web 3 Internet Machine cliente Machine serveur hébergeant le site

4 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Le client-serveur (2/3) La diffusion utilise différents protocoles : Protocole pour naviguer sur le Web : HTTP Protocole pour diffuser des fichiers : FTP Protocole pour exécuter des commandes à distance : SSH Etc. Le protocole HTTP transmet : les requêtes du client au serveur et la réponse (les données) transitant du serveur vers le client Les données sont codées au format HTML et sont affichées par le navigateur de la machine cliente 4 HTTP + HTML... Déclaration d'un colocataire Déclaration d'un colocataire......

5 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Le client-serveur (3/3) Comment créer son site web ? Le cas le plus général consiste à suivre les étapes suivantes : 1.Créer localement son site Concevoir la structure du site Rassembler les contenus (textes, images, audios, vidéos) Editer des documents HTML (éditeur de texte pure comme Notepad++ ou éditeur spécialisé comme KompoZer) 2.Transférer les documents et les contenus sur le serveur ; il y a plusieurs possibilités selon lhébergeur : Transférer avec un logiciel client FTP (FileZilla...) Transférer au serveur grâce à un partage réseau Transférer par des outils web par exemple votre ENT de lUniversité (onglet Espace Fichiers répertoire public_html) 3.Vérifier que le site fonctionne correctement sur le serveur en consultant la version hébergée sur le serveur 5

6 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Sommaire Diffusion par le web : le client-serveur Créer des pages web en XHTML Agrémenter ses pages web avec CSS Créer son wiki avec DokuWiki Créer son blog avec WordPress 6

7 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations XHTML (1/11) HTML est un langage de présentation de contenu multimédia (texte, image, audio, vidéo) Un document au format HTML est un fichier éditable et « compréhensible » par un humain Chaque document HTML peut faire référence à dautres documents HTML par leurs adresses HTTP : le lien hypertexte Le lien hypertexte est le principe de base du web : lier les informations entre elles, dailleurs HTML signifie "HyperText Markup Language" XHTML est une version plus stricte et plus récente Remarque n°1 : tous les standards du web sont normalisés et diffusés par le W3C (World Wide Web Consortium) à ladresse Remarque n°2 : le W3C propose un validateur de conformité à XHTML à ladresse 7

8 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations XHTML (2/11) 8 Chaque document HTML hébergé sur une machine serveur peut faire référence à dautres documents hébergés sur la même machine serveur ou bien sur dautres machines serveurs

9 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations XHTML (3/11) XHTML repose sur le principe de la séparation entre la forme (lapparence et lagencement) et le fond (le contenu diffusé) Lagencement suit une structure logique de répartition du contenu en différents paragraphes, titres, listes, tableaux, etc. Chacun de ces éléments est balisé : le début et la fin de lélément sont marqués par une balise de début et une balise de fin Un élément balisé peut contenir dautres éléments balisés Une balise peut contenir des attributs servant à spécifier certaines valeurs de propriétés. Par exemple la balise nécessite lattribut src pour indiquer ladresse du fichier de limage Remarque n°1 : les balises, les attributs et les valeurs des attributs doivent être en minuscule ; les valeurs doivent être entre guillemet Remarque n°2 : Syntaxe complète des balises HTML Syntaxe complète de XHTML 9

10 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations XHTML (4/11) Tout document HTML suit la structure suivante : Lentête du fichier : indique les propriétés dencodage (encoding) et de format du fichier (xhtml1-strict.dtd) Le document lui-même (balises... ) composé de deux éléments : Lentête du document (balises... ) : indique le titre (balises... ) et les propriétés du document (balises... ) Le corps du document (balises... ) : il contiendra les balises des éléments de contenu et de forme 10 Ceci est le titre en haut de votre navigateur bonjour vous devez compléter votre page ici Corps Entête du document Entête du fichier Document

11 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations XHTML (5/11) Balises des titres : Balises... avec 1 i 6 h1 est le plus grand titre et h6 le plus petit titre Titre de rang 1 Titre de rang 2 Titre de rang 3 Titre de rang 4 Titre de rang 5 Titre de rang 6...

12 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations XHTML (6/11) Balises des paragraphes Définir un paragraphe :... Tout ce qui suit un paragraphe va à la ligne Passage à la ligne : Trait horizontal : Je vais faire un saut de ligne Et maintenant, je trace un trait horizontal...

13 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations XHTML (7/11) Balises de style :... : mettre en gras... : mettre en italique... : mettre en exposant... : mettre en indice Ces balises ne sont plus utilisées avec CSS (cf. ci-après) Voici les styles les plus utilisés en XHTML. On peut aussi mettre des mots en exposant ou en indice....

14 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations XHTML (8/11) Balises pour les tableaux : Balises englobantes :... On définit le tableau ligne par ligne avec les balises... et pour chaque ligne cellule par cellule avec les balises Titre Année Nom réalisateur Prénom réalisateur Alien 1979 Scott Ridley Vertigo 1958 Hitchcock Alfred

15 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations XHTML (9/11) Balises de listes : Liste normale :... Liste numérotés :... Chaque élément de la liste : Voici deux listes : Tout d'abord... En outre... Qui plus est... En conclusion... Tout d'abord... En outre... Qui plus est... En conclusion......

16 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations XHTML (10/11) Balise dimage : Balise : Lattribut src : adresse HTTP de limage Si limage est au même endroit que le fichier HTML : src="Labrador.jpg" Si limage est dans un autre répertoire : src="../images/Labrador.jpg" Si limage est sur un autre serveur : src="http://www.images.net/images/chiens/Labrador.jpg" Lattribut alt : texte alternatif si l'image ne peut être chargée Voici l'image d'un Labrador : mon chien...

17 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations XHTML (11/11) Balise de lien hypertexte : Balise :... Le lien peut être nimporte quel élément : un texte, une image, une vidéo Voici comment on fait un lien vers une autre page dans du texte...

18 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Sommaire Diffusion par le web : le client-serveur Créer des pages web en XHTML Agrémenter ses pages web avec CSS Créer son wiki avec DokuWiki Créer son blog avec WordPress 18

19 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations CSS (1/11) Le défaut de XHTML est de ne pas séparer clairement le fond de la forme : il est difficile de changer daspect même sans changer le contenu CSS (Cascading Style Sheets = Feuilles de Styles en Cascade) permet de séparer la forme du fond : le fond (le contenu et la structure logique) est défini avec XHTML et la forme (laspect) est défini dans un fichier séparé au standard CSS Une même feuille de style peut servir pour toutes les pages dun site afin dassurer une bonne cohérence ergonomique La norme CSS 2.1 est accessible à la page : Un validateur de conformité est accessible à la page : 19

20 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations CSS (2/11) Exemple dun même contenu mais avec deux fichiers CSS : 20 Fichier XHTML Fichier CSS n°1 Fichier CSS n°2 = = + +

21 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations CSS (3/11) Comment définir et utiliser une feuille de style ? 1.Editer un fichier CSS externe au document XHTML 1.Inclure la feuille de style CSS dans lentête du document XHTML 1.Après téléchargement sur le serveur, vérifier lapparence obtenue 21 h1 { font-family : Arial, Helvetica,sans-serif ; /* changer le style de la police */ font-size : 14px ; /* changer la taille de la police */ color : #00ff00 ; /* changer la couleur de la police */ background-color : # ; /* changer la couleur de fond */ } Gabarit XHTLM avec CSS

22 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations CSS (4/11) Codage de la couleur en CSS: En informatique, la couleur est obtenue en mélangeant 3 composantes : une composante rouge, une composante verte et une composante bleue Ainsi chaque couleur est codée sur 3 entiers compris entre 0 et 255 (0 et FF en hexadécimal) Exemples : Le noir : # ou black Le blanc : #FFFFFF ou white Le rouge : #FF0000 ou red Le vert : #00FF00 ou green Le bleu : #0000FF ou blue Une couleur quelconque par exmple : #120AA1 Pour obtenir le code hexadécimal dune couleur allez par exemple sur le site : 22

23 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations CSS (5/11) Syntaxe de la feuille de style : Ensemble de règles de la forme : sélecteurs { propriétés pour le sélecteur } Le sélecteur correspond aux balises de XHTML (hi, ul, li, ol, p, br, hr, table, td, tr,...). Par exemple h1, h2 {...} définit les propriétés communes à h1et h2 Chaque propriété est de la forme attribut : valeurs ; Par exemples : font-size : 16pt ; font-family : Arial, Helvetica,sans-serif ; Les propriétés modifiables sont : les propriétés de couleur et de fond les propriétés associées aux polices et au texte (caractères et formatage d'un texte) les propriétés associées aux listes (présence ou non de puces,...) les propriétés associées aux tables (styles des bordures d'un tableau,...) 23

24 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations CSS (6/11) Propriétés de couleur et de fond : Elles sappliquent à des sélecteurs comme body ou hi color : couleur du texte background-color : couleur de fond background-image : image de fond 24 body { /* l'ensemble du document */ color: #434a6a ; background-color: white ; background-image:url(../fleur1.jpg) ; } h1 { color: #e8eaff ; background-color :#babcec ; }

25 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations CSS (7/11) Propriétés associés aux textes : font-family : police de caractères; valeur : une police, par exemple Verdana, Arial, Helvetica, Geneva,... font-size : taille de la police par exemple 12px font-style : style de la police; valeur : normal, italic font-weight : épaisseur de la police ; valeur : normal, bold, bolder, lighter text-decoration : soulignement du texte ; valeur : none, underline, overline, line-through text-align : alignement du texte ; valeur : left, right, center, justify letter-spacing : distance entre les lettres par exemple 5px 25 h1 { font-family: Geneva; font-size: 40px; font-style: italic; font-weight: bolder; text-decoration: line-through; text-align: left; color: #10ff10 ; letter-spacing: 5px; background-image : url(fleur1.jpg) ; }

26 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations CSS (8/11) Propriétés des listes : list-style-type : type de puces à appliquer dans la liste; valeur : disc, circle, square, decimal, none list-style-image : spécifier une image à utiliser comme puce ; valeur : url(image.gif) 26 ul { font-family: Geneva; font-size: 14px; font-style: italic; text-align: left; list-style-type: square; } ol { font-family: Arial; font-size: 16px; font-style: normal; text-align: center; }

27 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations CSS (9/11) Propriétés des bordures : Concerne les bordures de tableau, de texte, etc. Propriétés communes aux 4 côtés : border-color : couleur de la bordure ; valeur : unecouleur border-style : forme de la bordure ; valeur : none, hidden, dotted, dashed, solid, double groove, ridge, inset, outset border-width : épaisseur de la bordure ; valeur: épaisseur ou thin, medium, thick Propriétés spécifique pour un seul côté : Pour le haut : border-top-color, border-top-style et border-top-width Idem pour bottom, left et right 27 p { font-family: Arial; border-color: red; border-style: dashed; border-width: 2px; border-right-style: solid; border-left-style: solid; border-left-color: green; border-right-color: green; border-left-width: 20px; border-top-width: thin; }

28 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations CSS (10/11) Propriétés spécifiques aux tableaux : padding : espace entre la bordure et le contenu des cellules par exemple 2px border-collapse : fusionner ou séparer la bordure du tableau et la bordure des cases ; valeur : collapse ou separate 28 table, td { border-color : #6495ed ; border-top-style : solid ; border-bottom-style : solid ; border-width : thin; text-align : center; padding: 4px; } td { border-left-style : dashed ; border-right-style : dashed ; }

29 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations CSS (11/11) Définir des classes : Possibilité de « spécialiser » une balise Syntaxe de la règle : balise.NomClasse { propriétés } Dans XHTML : td.grise { background-color: grey; } td.verte { background-color: green; } une cellule grise une cellule verte

30 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Sommaire Diffusion par le web : le client-serveur Créer des pages web en XHTML Agrémenter ses pages web avec CSS Créer son wiki avec DokuWiki Créer son blog avec WordPress 30

31 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son wiki (1/6) wiki = site web collaboratif : pages éditables par tout ou partie des visiteurs du site Modification directe sur le site avec un éditeur intégré Le premier wiki a été créé en 1995 par Ward Cunningham Le wiki le plus connu est lencyclopédie collaborative Wikipédia 31

32 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son wiki (2/6) Utilité du wiki : Site web ouvert à la modification Site web de partage de connaissance Exemple : WikiF1 Site dun groupe de travail collaboratif (souvent à accès restreint ou non public) Exemple : wiki de la licence SPI 32 Problèmes du wiki : Liés à son ouverture Possibilité décrire des contre-vérités, de falsifier les faits, etc. Exemples avec Wikipédia : Modifier une biographie Modifier lhistoire dune entreprise

33 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son wiki (3/6) Principes dun wiki : Une partie éditoriale : le contenu lisible et modifiable (souvent organisé de façon hiérarchique pas obligatoirement) Une partie fonctionnelle : le moteur de wiki (un programme installé sur le serveur web) qui gère lédition sur place et les droits déditions Quelques moteurs de wiki : MediaWiki (créé pour Wikipédia) DokuWiki (moteur standard) PmWiki (conforme XHTML et CSS) Xwiki (orienté wiki dentreprise) Etc. Pour un comparatif de plus de 124 moteurs de wiki voir WikiMatrix 33

34 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son wiki (4/6) La partie éditoriale : Accès avec un navigateur web classique Accès en lecture (par défaut) et en écriture après identification Selon le moteur de wiki, lédition est soit : Purement textuelle en wikitexte : syntaxe particulière au moteur de wiki pour la mise en forme du texte, créer des liens, disposer des images, etc. WYSIWYG (What You See Is What You Get) Suivi des modifications avec certains wiki : Un contributeur enregistré peut suivre l'évolution d'une page, ou les contributions d'une personne en particulier Ces suivis permettent de réagir à des actes de vandalismes, ou de spam. Historique des modifications de chaque page : Il permet de retourner à une version précédente (notemment en cas de vandalisme) Il indique la date de la modification, et le nom ou l'adresse IP de son auteur Il permet le respect du droit d'auteur en gardant une trace de tous les auteurs d'un article. 34

35 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son wiki (5/6) La partie fonctionnelle : Identification : Un wiki entièrement public (auteur anonyme) identifie un auteur par son adresse internet (numéro IP) Un wiki à accès restreint identifie un auteur par un login et un mot de passe préalablement enregistré Les droits : Chaque auteur à un niveau de droit selon quil est anonyme (si le wiki le permet) ou enregistré Un administrateur affecte les droits : Droit en lecture : ne requiert pas denregistrement (sauf pour les wikis privés dentreprise par exemple) Droits en écriture, création, suppression, téléchargement de médias : Nécessite une inscription préalable (sauf pour les wikis entièrement public) Permet de gérer laccès en écriture par page ou groupe de pages par auteur ou par groupe dauteurs ou même par fonction (auteur, administrateur, etc.) 35

36 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son wiki (6/6) Comment créer son wiki ? Deux possibilités : Soit utiliser un serveur de wiki existant gratuit ou payant. Par exemples : EditThis.info, PBWiki, Wikia Wikidot, Wiki-Site, etc. Soit installer son propre moteur de wiki sur son site web (ce sera notre démarche) : 1.Télécharger localement un moteur de wiki Notre choix : DokuWiki 2.Décompressé le moteur de wiki 3.(Editer localement les fichiers de configuration) 4.(Préparer une base de données sur le serveur si nécessaire) 5.Télécharger le répertoire wiki avec FTP sur votre site web 6.Commencer à travailler sur le wiki de votre site 36

37 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Sommaire Diffusion par le web : le client-serveur Créer des pages web en XHTML Agrémenter ses pages web avec CSS Créer son wiki avec DokuWiki Créer son blog avec WordPress 37

38 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son blog (1/7) blog (ou blogue) = site web à billets généralement commentés Lédition se fait sur place uniquement par lauteur du blog : le blogueur ou la blogueuse Les commentaires (si autorisés) sont publics mais peuvent être modérés Les premiers blogs sont apparus fin des années 1990 au Canada Les blogs sont souvent éphémères : des milliers de blog sont crées par jour et autant sont détruits ou abandonnés 38

39 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son blog (2/7) Un exemple de type de blog : le blog journalistique Tenu par des journalistes dune rédaction ou des indépendants mais nengageant pas la responsabilité éditoriale du journal Un exemple : les blogs de Libération.fr 39

40 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son blog (3/7) Utilité du blog : Blog dentreprise : diffusion plus directe, moins officielle et plus interactive vers leurs clients ; le blog interne sert de bulletin dinformations et améliore les échanges entre collaborateurs Blog pédagogique : développer des pratiques collaboratives et de co-construction dans et hors la classe entre enseignants et apprenants Blog communautaire : publier des connaissances structurées dans le cadre d'un processus de synthèse Blog personnel : publier un journal intime ou des avis personnels sur nimporte quel sujet... Problèmes du blog : Comme pour les réseaux sociaux (FaceBook...), diffuser ses opinions et sa vie privée peut nuire au blogueur Comme toute parole public, il faut respecter le droit en vigueur Exemples : Affaires judiciaires mettant en cause des élèves insultant des professeurs Des blogs relatant la vie en entreprise auraient conduit à des licenciements 40

41 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son blog (4/7) Principes dun blog : Une partie éditoriale : le contenu lisible et modifiable Une partie fonctionnelle : le moteur de blog (un programme installé sur le serveur web) qui gère lédition sur place et les commentaires Quelques moteurs de blog : Ce sont des systèmes de gestion de contenu ou CMS (Content Management System) Drupal (très complet et abouti)http://drupal.org/ Joomla! (très riche et abouti)http://www.joomla.fr/ SPIP (simple et connu pour son respect des règles typographiques)http://www.spip.net/ Dotclear (respectueux des standards du Web et très utilisé en France)http://fr.dotclear.org/ Pour un comparatif de plus de 29 moteurs de blog voir WeblogMatrix 41

42 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son blog (5/7) Format dun blog : Billets souvent classés par ordre par ordre antéchronologique (le plus récent billet est le premier à apparaître) Chaque billet est étiqueté avec des tags (mots-clés) qui le catégorise On peut filtrer des billets par date et/ou par tags Un billet contient bien sûr des médias Les commentaires : Il peuvent être autorisé ou censuré partiellement ou totalement Remarque : en France, le blogueur est légalement responsable de ce qui est affiché sur son site Les permaliens : Chaque billet est accessible par une adresse unique et statique Il ny a pas de format standard (jusquà présent) Si un billet est changé, renommé, ou déplacé, son permalien n'est jamais modifié Si un billet est effacé, son permalien ne peut pas être utilisé à nouveau Exemple du format du moteur de blog WordPress : 42

43 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son blog (6/7) Les rétroliens (trackback en anglais) : Il permet de relier des billets de blogs différents (si les moteurs de blog le permettent) Chaque billet dun blog à une URL de rétrolien spécifique L'auteur d'un blog B établit un rétrolien vers un billet d'un blog A en indiquant, dans son propre billet sur son blog B, lURL de rétrolien du billet du blog A Le moteur du blog A indiquera dans son billet que le blog B y fait référence 43 URL de rétrolien dun billet dun blog AExemple de création dun billet dun blog B en indiquant le rétrolien du billet du blog A

44 Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Créer son blog (7/7) Comment créer son blog ? Deux possibilités : Soit utiliser un serveur de blog existant gratuit ou payant. Par exemples : OverBlog, Blogger, Skyrockblog, CanalBlog, etc. Soit installer son propre moteur de blog sur son site web (cela sera notre démarche) : 1.Télécharger localement un moteur de blog Notre choix : WordPress 2.Décompressé le moteur de blog 3.(Editer localement les fichiers de configuration) 4.(Préparer une base de données sur le serveur si nécessaire) 5.Télécharger le répertoire blog avec FTP sur votre site web 6.Commencer à travailler sur le blog de votre site 44


Télécharger ppt "Thierry Lemeunier – Licence SPI1 – Systèmes dexploitations Publication Web Introduction à XHTML, à CSS, aux blogs et aux wikis Thierry Lemeunier 1."

Présentations similaires


Annonces Google