Cration et gestion des sites Web avances

1
Création et gestion des sites Web avancées
2
Objectifs

• connaissance des notions de base concernant les
  feuilles de style
• maîtrise des formulaires et des méthodes de
  traitement de données
• maîtrise des concepts de base concernant les
  plateformes de gestion de contenu (CMS)

3
Détails administratifs

• Enseignant Amalia Todirascu (todiras_at_umb.u-strasb
  g.fr)
• Lundi 8-10h, tous les 15 jours, à partir du
  26.01.2009
• séances 26.01.09 9.02.09 23.02.09 16.03.09
  30.03.09, 6.04.09 (examen 9-10h)
• support du cours http//todirasamalia.neufblog.co
  m

4
Plan

• Feuilles de style
• fonctionnement d'un serveur Web
• conception d'un site web
• motivation
• philosophie
• exemples de propriétés utiles
• Formulaires
• Plateformes de gestion de contenu

5
Fonctionnement d'un serveur Web
attente de demandes
Navigateur
URL
www
index.html
Visualisation ou message d'erreur
Serveur Web
6
Site Web

• site Web un ensemble de pages Web, de scripts
  et d'images, groupés en plusieurs dossiers
• reliés par des liens (chemins relatifs ou
  absolus)
• dossier réservé par le serveur (www pour le
  serveur Apache)
• serveur utilisé pour héberger des sites créés
  pendant le cours http//umb-www-02.u-strasbg.fr

7
Comment créer un site Web?

• définir les objectifs
• définir l'hiérarchie des pages Web
• définir un modèle à appliquer sur toutes les
  pages (bannière, menus, etc. )
• définir la charte graphique (palette de couleurs)
• écrire le contenu du site
• créer les pages et les liens
• trouver un nom du domaine
• publier le site

8
A vous!

• créez une page Web, dont le modèle est donné dans
  le transparent suivant. L'image fond.jpg se
  trouve sur "Favoris réseau", "\\domat\salle3211\\
  MINF24D"

9
Exemple de page
10
Problèmes

• Pages Web mélange de balises pour structurer
  l'information et pour la mise en forme
• structure complexe d'un site
• évolution rapide du site
• modifier la structure du document
• modifier la présentation (charte graphique
  couleurs, polices )
• nouvelles fonctions proposées (par ex. imprimer
  la page dans un format adapté)
• Solution séparer les éléments de mise en forme
  (feuilles de style) et les éléments de structure
  (document HTML)

11
Feuilles de style

• 1996 W3C publie une nouvelle spécification
  Cascading StyleSheets (CSS)
• feuille de style un ou plusieurs styles qui
  s'appliquent à une ou plusieurs éléments de
  structure d'un document HTML
• style un ensemble de paramètres de mise en
  forme (police, taille, couleur, position, marge
  etc.)

12
Feuille de style - Avantages

• possibilité de définir une présentation uniforme
  de toutes les pages d'un site
• séparation de l'activité de conception de la page
  et de la présentation des éléments
• simplification du code HTML
• modification facile d'une feuille qui s'applique
  à l'ensemble du site
• différents feuilles de styles utilisées selon le
  besoin (impression, visualisation dans le
  navigateur)

13
Comment définir un style ?

• un style associe un sélecteur (un ensemble de
  balises ou de classes) à un ensemble de
  propriétés (éléments de mise en forme)
• sélecteur liste_propriétés
• le sélecteur est une liste de balises séparées
  par ,
• la liste de propriétés est une suite de
  propriétés avec leurs valeurs
• sélecteur propriété_1valeur_1
  propriété_2valeur_2 ... propriété_nvaleur_n

14
Quelques exemples de styles

• h1 color FF0000 font-size 24pt
  background-color000000
• redéfinition de l'apparence du h1
• les propriétés color et background-color pour
  définir les couleurs du texte et de l'arrière
  plan
• la propriété font-size pour changer la taille de
  la police
• h2,h3,li colorblue
• plusieurs balises partagent la même propriété
• p font-family Arial font-size 12pt
• changement de la police et de la taille de la
  police

15
Syntaxe de base

• CSS n'est pas sensible à la casse
• Chaque propriété est séparée de sa valeur par un
  caractère deux points ( )
• La ou les propriétés rattachées à un même
  sélecteur sont entre accolades
• Si plusieurs propriétés sont rattachées à un même
  sélecteur, elles sont séparées par un
  point-virgule
• Lorsqu'une valeur est un texte avec des espaces,
  il faut l'entourer de guillemets ou d'apostrophes
  
•       P font-family "Times New Roman"
•       P font-family 'Times New Roman'

16
Syntaxe de base (II)

• Lorsqu'une valeur comporte une unité (pouces, cm,
  etc) celle-ci doit être accolée à la valeur sans
  laisser d'espace
• Des retours à la ligne peuvent être insérés dans
  une règle afin d'améliorer la lisibilité. Cela ne
  dispense pas de mettre les points-virgules entre
  les propriétés
•       P font-size 10pt text-align center
• est tout à fait équivalente à      P      
  font-size 10pt      text-align center      

17
Comment appliquer un style?

• 3 possibilités
• définir une feuille de style externe et
  l'associer à la page Web
• définir une feuille de style interne
• appliquer un style directement sur une balise
• pour séparer bien les éléments de structure et la
  présentation, il est préférable d'utiliser des
  feuilles de style externes

18
Styles spécifiques à une balise

• on utilise l'attribut "style" défini pour toutes
  les balises HTML
• ltnom_balise style"propriete_1valeur_1
  propriete_2valeur_2
• ...
• propriete_nvaleur_n"gt
• Exemple
• ltfont style"colorblue font-faceArial
  font-size24pt"gt

19
A vous!

• Modifiez l'exemple 1 pour inclure des styles dans
  les balises concernés (H1, H2, LI)

20
Les feuilles de style interne

• Si certains pages doivent avoir une présentation
  différente, on peut les définir dans la section
  ltheadgt, à l'aide de la balise ltstylegt
• ltstyle type"text/css"gt        P
  Background-Color Blue         H1 Color
  Blue Font-Size 12pt lt/stylegt
• Attention, certaines versions des navigateurs ne
  reconnaissent pas la balise ltstylegt!

21
Exemple feuille de style interne (II)

• ltHTMLgt
• ltHEADgtltTITLEgtFeuille de style internelt/TITLEgt
• ltstyle type"text/css"gt
• body background-imageurl("fond.jpg")
• h1 colorgreen font-size36pt
• h2, h3, li colorblue font-size24pt
• p colorred, font-size12pt
• lt/HEADgt
• ltBODYgt lt!-- corps du document --!gt
• lt/BODYgt
• lt/HTMLgt

22
A vous!

• Modifiez l'exemple 1 pour regrouper les styles
  dans une seule feuille de style interne

23
Feuille de style externe

• Les feuilles de style externe
• Les styles sont définis dans un autre fichier, et
  sont associées à l'aide d'une balise ltlinkgt
  positionnée à l'intérieur du ltheadgt
• ltlink rel"stylesheet" href"styles.css"
  type"text/css"gt
• l'attribut href indique le nom du fichier ou se
  trouvent les définition de styles
• pas d'autres modifications de la page HTML

24
Feuille de style externe (II)

• le contenu du fichier exemple.css
• body
• background-imageurl("fond.jpg")
• h1 colorgreen font-size36pt
• h2, h3, li colorblue font-size24pt
• p colorred, font-size12pt

25
A vous!

• définissez une feuille de style externe qui
  s'applique sur le fichier exemple.html

26
Les sélecteurs

• Plusieurs catégories
• les sélecteurs de type le nom d'une balise
• le sélecteur universel applique partout les
  mêmes propriétés
• les sélecteurs descendants (balise imbriquée)
• les sélecteurs d'enfants
• les sélecteurs de classe et d'id
• les sélecteurs d'attributs

27
Sélecteurs (II)

• éléments imbriqués les changements de style
  s'appliquent uniquement sur les éléments Y qui
  sont imbriqués dans les éléments X
• X Y propriete_1val_1 propriete_2val_2...pro
  priete_nval_n
• - ltBgt un exemple ltIgt concret lt/Igtlt/Bgt
• B I font-colorblue font-size18pt

28
Sélecteurs (III)?

• éléments père fils les changements s'appliquent
  aux éléments X qui sont les fils de Y
• X gt Y prop_1val_1 prop_2val_2
  ...prop_nval_n
• exemple
• ul gt li colorgreen
• html
• ltulgtltligt couleur verte lt/ligtltligt deuxième item
  lt/ligtlt/ulgt
• ltolgtltligt seconde liste lt/ligtltligt item 2
  lt/ligtlt/olgt

29
Propriétés

• plusieurs catégories de propriétés
• mise en forme du texte (couleur, couleur de
  l'arrière-plan, mise en forme, majuscules/minuscul
  es, liens)
• positionnement (marges, boîtes, padding)
• superposition des divers éléments
• la liste complète de propriétés, avec leurs
  valeurs possibles http//www.yoyodesign.org/doc/w
  3c/css2/propidx.html

30
Exemple de propriétés

• Mise en forme du texte
• font-family indique les familles de polices,
  par ordre de priorité
• font-family nomfamille_1, nomfamille_2,
  ...nomfamille_n
• font-familyArial, Verdana, Times
• font-style sélectionne, parmi les familles de
  polices, celles avec une apparence normale,
  italique ou oblique

31
Exemple de propriétés (II)

• font-size permet de changer la taille de la
  police
• exprimée en pt (points), px (pixels) ou em (unité
  typographique)
• em utile quand on veut agrandir la taille de la
  fenêtre pour garder les proportions
• px pas très utile
• valeurs possibles xx-smallx-smallsmallmediuml
  argex-largexx-largewmallerlarger
• font-variant small-capsnormal
• Raccourci
• font12pt small-caps Arial italic

32
Les sélecteurs

• Plusieurs catégories
• les sélecteurs de type le nom d'une balise
• le sélecteur universel applique partout les
  mêmes propriétés
• les sélecteurs descendants (balise imbriquée)
• les sélecteurs d'enfants
• les sélecteurs de classe et d'id
• les sélecteurs d'attributs

33
Les sélecteurs de classe

• parfois, on veut appliquer un changement de style
  seulement sur quelques éléments de type X
• utilisation d'attribut universel "class"
• dans le fichier .html, dans la balise X, on
  définit une classe
• ltX class"valeur_classe"gt
• dans le fichier .css, on fait appel à un
  sélecteur de classe
• X.valeur_classe liste_de_propriétés

34
Les sélecteurs de classe (II)

• Exemple
• dans le fichier .html
• ltp class"c1"gtUn premier exemple de classelt/pgt
• ltp class"c2"gtUne autre classelt/pgt
• dans le fichier .css
• p.c1 font-familyVerdana font-weightbold
• p.c2 font-styleitalic

35
Les sélecteurs de classe (III)

• classes multiples on peut combiner plusieurs
  styles
• dans le fichier .html
• ltX class"val_classe1 val_classe2"gt
• dans le fichier css
• X.val_classe1.val_classe2 liste_propriétés

36
Les sélecteurs de classe (IV)

• exemple
• dans le fichier .html
• ltP class"c1 c2"gtun troisième exemplelt/Pgt
• dans le fichier .css
• p.c1.c2 colorblack

37
Le sélecteur d'id

• le sélecteur d'id si on doit modifier un seul
  élément, on utilise l'attribut "id" (valeur
  unique)
• dans le fichier HTML
• ltX id"valeur"gt
• dans le fichier .css
• valeur liste_propriétés

38
Le sélecteur d'attributs

• on peut sélectionner tous les éléments qui ont un
  ou plusieurs attributs
• nom_baliseattribut1attribut2...attributn
• nom_baliseattribut1"val1"attribut2"val2"....
  attributn"valn"
• exemple (dans le fichier .css)
• imgalt border2pt
• h1style font-familyArial

39
Priorités des styles

• si plusieurs feuilles de styles ont défini la
  même propriété pour le même sélecteur, celle qui
  a la plus faible portée est prioritaire
• priorité la plus faible feuilles de style
  externes
• priorité moyenne feuilles de style internes
  (ltstylegt)
• priorité la plus forte le style associé à la
  balise

40
Héritage des propriétés

• pour calculer la valeur on applique les règles
  suivants
• si la valeur est explicitement définie pour un
  élément, c'est la valeur associée
• si une propriété n'est explicitement définie, on
  hérite la valeur de l'élément parent
• sinon, c'est la valeur définie par défaut par le
  navigateur

41
Les balises ltdivgt et ltspangt (I)

• dans le fichier HTML, on a la possibilité de
  regrouper des éléments en blocs, pour appliquer
  de manière uniforme les propriétés (à l'aide des
  attributs "class" ou "id")
• ltdiv class"c1"gt
• ltH1gtUn nouveau bloclt/H1gt
• ltpgt un premier paragraphelt/pgt
• ltpgt un deuxième paragraphelt/pgt
• ltpgt un troisième paragraphelt/pgt
• lt/divgt
• intéressant surtout pour pouvoir positionner les
  divers éléments de la page

42
Les balises ltdivgt et ltspangt (II)

• les balises ltspangt sont utilisées pour modifier
  le style d'un mot ou d'un morceau de texte, qui
  se trouve déjà à intérieur d'un bloc ltdivgt, à
  l'aide des attributs "class" ou "id"
• dans le fichier HTML
• ltpgt annonce ltspan class"c3"gt très
  importantlt/spangtlt/pgt
• dans le fichier .css
• .c3 font-weightbold colorgreen

43
Le modèle des boîtes
44
Le modèle des boîtes (II)

• propriété s
• pour les marges
• margin-left, margin-top, margin-right,
  margin-bottom
• margin un raccourci, on peut avoir jusq'à 4
  valeurs
• pour l'espacement
• padding
• pour la bordure
• border-width, border-style, border-color

45
Autres propriétés

• weight, height dimensions du bloc conteneur
• display block, inline, none
• position static, fixed, relative, absolute

46
URLs utiles

• http//www.commentcamarche.net/contents/css/cssint
  ro.php3
• http//www.yoyodesign.org/doc/w3c/css2/cover.html
  
• traduction en français de la recommandation W3C
• http//www.w3.org/TR/CSS21/
• original de la recommandation W3C
• http//joomla.addison-wesley.de/fr/Exemples-de-sit
  es-geres-par-Joomla

47
Les CMS (Content Management System)

• Système de gestion de contenu
• Principe dissocier totalement le contenu et la
  mise en forme
• Objectif proposer un moyen facile et convivial
  pour créer un site web
• possibilités de sites web dynamiques (blogs...)
• possibilités de gestion multiple plusieurs
  auteurs
• possibilités dinteraction avec les internautes
  (commentaires, publication dune partie du
  site...)

48
Fonctionnement général dun CMS

• Progiciel site prêt à lemploi, paramétrage
  personnel
• Dissociation du contenu et de la mise en forme
• contenu généralement stocké dans une base de
  données
• mise en forme assurée par une série de
  templates (patrons) sous la forme de fichiers
  css
• Intervention soit sur le contenu, soit sur la
  mise en forme

49
Fonctionnement du CMS

• Deux niveaux
• partie publique ce que voit linternaute
• partie administration gestion par le
  responsable du site (administrateur)
• Système de droits
• administrateur a le droit de modifier le site
• contributeurs plusieurs types possibles gt
  plusieurs niveaux de droits possibles (par ex.
  autorisation de créer du contenu mais pas de
  modifier les templates, autorisation de créer du
  contenu dans certaines rubriques, autorisation
  d'ajouter des commentaires, etc.)

50
Schéma général
http//www.higherweb.fr/le_blog/2008/11/le-fonctio
nnement-dun-cms-en-image/
51
Schéma général explication

• Deux profils dutilisateurs ont accès à la
  console dadministration ladministrateur et
  les contributeurs
• Le contenu du site est stocké dans une base de
  données les templates, scripts, plugins, etc.,
  consistent en fichiers répartis dans les divers
  dossiers du site. Le site est hébergé par un
  fournisseur daccès, les dossiers sont
  accessibles par FTP.
• Côté internautes, on a aussi deux profils les
  visiteurs et les utilisateurs identifiés. Seuls
  ces derniers peuvent modifier certains contenus
  (par exemple commentaires). Généralement, ils
  doivent au préalable sinscrire sur le site.

52
Exemple
Le site  LILPA  côté Internaute
53
Exemple (2)

• Connexion de lAdministrateur

54
Exemple (3)

• Le site LILPA côté Administrateur

55
Formulaires

• Construire une page dynamiquement à partir des
  données fournies par l'utilisateur
• -gt formulaire
• permet de récupérer des informations fournies par
  les utilisateurs
• comporte toujours un bouton de type 'Envoi' qui
  transmet les informations saisies
• Deux éléments nécessaires
• 1. un formulaire dans la page html
• 2. un programme (perl, php, ...) capable de
  traiter les données du formulaire

56
Exemple
57
Balises ltformgt

• Début et fin du formulaire marqués par ltformgt et
  lt/formgt
• -gt entre les deux s'insèrent les éléments du
  formulaire
• case à cocher
• bouton à cliquer
• zone de texte à remplir
• zone de texte pour message
• etc.
• Attributs OBLIGATOIRES de cette balise
• action"URL" -gt adresse du programme qui traite
  les données du formulaire
• method"GETPOST" -gt méthode de transmission des
  données du formulaire au programme (préférer
  POST)?

58
Balise ltformgt

• Syntaxe (exemples)
• ltform action"programme.php" method"POST"gt
• lt/formgt
• ltform action"script.cgi" method"GET"gt
• lt/formgt

59
Eléments

• Balise ltinputgt
• permet de créer les différents éléments du
  formulaire
• case à cocher
•  bouton radio 
• champ à remplir, etc.
• doit avoir un nom pour l'identifier
• doit avoir un type qui indique ce que c'est
• peut être associée à une valeur (que le programme
  de traitement récupère)?
• Syntaxe
• ltinput type"type de champ" name"nom de
  lélément" value"valeur" gt

60
ltinputgt types (I)

• radio bouton permettant un choix parmi plusieurs
  proposés, lensemble des boutons radios devant
  porter le même attribut name. Un attribut checked
  pour un des boutons permet de préciser le bouton
  sélectionné par défaut (facultatif).
• text champ permettant la saisie dune ligne de
  texte. Lattribut size définit la taille du
  champ et lattribut maxlength définit la taille
  maximale du texte saisi.
• reset bouton de remise à zéro qui rétablit
  lensemble des éléments du formulaire à leur
  valeur par défaut
• submit bouton de soumission permettant lenvoi
  du formulaire. Le texte du bouton peut être
  précisé grâce à lattribut value.

61
ltinputgt types (II)?

• password champ de saisie dans lequel les
  caractères saisis apparaissent sous forme
  dastérisques afin de camoufler la saisie de
  lutilisateur
• checkbox case à cocher pouvant admettre deux
  états checked (coché) et unchecked (non coché)?

62
lttextareagt

• Balise lttextareagt
• Permet de définir une zone de saisie plus vaste
  que la simple ligne de saisie que propose la
  balise ltinput type"text"gt
• Attributs
• rows le nombre de lignes de la zone de texte
• cols le nombre de caractères que peut contenir
  une ligne
• name le nom associé au champ, qui permettra
  didentifier le champ dans la paire nom/valeur
• readonly permet dempêcher lutilisateur de
  modifier le texte entré par défaut dans le champ
• value la valeur qui sera envoyée par défaut au
  script si le champ de saisie nest pas modifié
  par une frappe de lutilisateur

63
ltselectgt

• Balise ltselectgt
• Permet de créer une liste déroulante déléments
• Attributs
• name représente le nom associé au champ, cest
  le nom qui permettra didentifier le champ dans
  la paire nom/valeur
• disabled permet de créer une liste désactivée,
  cest-à-dire affichée en grisée
• size représente le nombre de lignes affichées
  dans la liste (cette valeur peut être plus grande
  que le nombre déléments effectifs dans la
  liste)?
• multiple marque la possibilité pour
  lutilisateur de choisir plusieurs champs dans la
  liste

64
Exemple de formulaire
lthtml lang"fr-FR"gt ltheadgt lttitlegtFormulaire de
testlt/titlegt lt/headgt ltbodygt lth1gtFormulairelt/h1gt ltf
orm action"test.php" method"POST"gt ltpgtVotre nom
ltinput type"text" size"40" maxlength"40"
name"nom"gtlt/pgt ltpgtVotre prénom ltinput
type"text" size"40" maxlength"40"
name"prenom"gtlt/pgt ltpgt ltinput type"radio"
name"titre" value"Monsieur"gt Monsieur ltinput
type"radio" name"titre" value"Madame"gt Madame
ltinput type"radio" name"titre"
value"Mademoiselle"gt Mademoiselle lt/pgt ltpgtVotre
statut ltselect size"1" name"statut"gt ltoption
selectedgtlt/optiongt ltoptiongtEtudiantlt/optiongt ltopti
ongtChercheurlt/optiongt ltoptiongtEnseignantlt/optiongt
ltoptiongtAdministratiflt/optiongt lt/selectgt lt/pgt lttab
le width"60"gt lttrgtlttdgtltinput type"submit"
value"envoyer"gtlt/tdgt lttdgtltinput type"reset"
value"effacer les champs"gtlt/tdgtlt/trgt lt/tablegt lt/f
ormgt lt/bodygt lt/htmlgt
65
Application

• Créer le formulaire en recopiant le code
• Placer le formulaire sur
• http//umb-www-02.u-strasbg.fr/votrecompte
• Copier le script php sur votre compte
• le script se trouve sur "Favoris réseau",
  "\\domat\salle3211\MINF24D"
• Remplir les champs du formulaire
• Envoyer le formulaire