L1 IDEA – Conception de sites Web

UFR de Sciences Économiques et de Gestion, Université Lumière Lyon 2
Année 2015-2016

Prérequis

Utilisation d’un navigateur Web.

Objectif du cours

• Première approche de la structuration rigoureuse d’informations
• Présentation d’informations en ligne
• Respect des standards du Web

Plan du cours

1. Introduction
2. Le langage HTML
   • Généralités
   • Section d’entête
   • Structure du document
   • Mise en forme de texte
   • Objets multimédias
   • Listes et tableaux
3. Éléments de design Web, standards, accessibilité
   • Design Web 2.0
   • Responsive design
   • Standards du W3C
4. Feuilles de style en cascade (CSS)
   • Généralités
   • Sélecteurs et classes de style
   • Propriétés
   • Mise en page
   • Responsive design en pratique

Organisation pédagogique / planning

• Cours (4 séances – 7h) : jeudi 14h00-15h45 (Jérôme Darmont) à partir du 17/09 – 17/09 et 24/09 : Amphi Aubrac ; 1/10 : salle D107 ; 8/10 : salle CR09
• TD sur machine (8 séances – 14h) : jeudi à partir du 14/10
  • Groupe 1 : 10h00-11h45, salle DER17 (Rado Ratsimbazafy)
  • Groupe 2 : 14h00-15h45, salle DER17 (Jérôme Darmont)

Examen écrit le jeudi 14/01/2016, 16h-17h, salle F019 (campus Porte des Alpes)

Modalités d’évaluation

• Dossier en binôme (réalisation de site) : coefficient 2/3
• Épreuve écrite individuelle (1 h – documents autorisés) : coefficient 1/3

Matériel en ligne

• Support de cours (582 Ko)
• Exemples :
  • HTML (6 Ko)
  • HTML + CSS (6 Ko)
  • Mise en page HTML5 (2 Ko)
• Annales : Épreuve écrite 2014-2015 (1ère session) corrigée (804 Ko)
• Squelette valide de page Web (1 Ko)
• Sujet TD 1 (34 Ko) (structuration de page et de texte) + correction (5 Ko)
• Sujet TD 2 (57 Ko) (listes) + correction (6 Ko)
• Sujet TD 3 (24 Ko) (objets multimédias et liens) + correction (4 Ko)
• Sujet TD 4 (37 Ko) (tableaux) + correction (5 Ko)
• Sujet TD 5 (27 Ko) (cascade et classes de styles) + correction HTML (6 Ko) + correction CSS (1 Ko)
• Sujet TD 6 (25 Ko) (styles des listes, hyperliens et images) + correction HTML exercice 1 (6 Ko) + correction HTML exercice 2 (4 Ko) + correction CSS exercices 1 et 2 (1 Ko) + correction HTML exercice 3 (6 Ko) + correction CSS exercice 3 (1 Ko)
• Sujet TD 7 (20 Ko) (styles des tableaux) + correction HTML (7 Ko) + correction CSS (1 Ko)
• Sujet TD 8 (31 Ko) (boites, positionnement, mise en page) + correction HTML (4 Ko) + correction CSS (1 Ko) + correction HTML ex. 4 (4 Ko) + correction CSS ex. 4 (1 Ko)
• Sujet de dossier (11 Ko)
• Épreuve écrite 2015-2016 (1ère session) corrigée (154 Ko)

Rappel : Clic droit puis Affichage source/Code source pour voir le code HTML des corrections

Bibliographie / Webographie

• HTML 5 et CSS 3 : cours et exercices corrigés, Jean Engels, Eyrolles, 2012 (disponible à la BU)
• Apprenez à créer votre site web avec HTML5 et CSS3, OpenClassrooms
• HTML5 se dévoile, AlsaCréations
• Tutoriel CSS, HTML.net
• Petites leçons de typographie, Jacques André, IRISA, 2013

Autres ressources en ligne

• Notepad++, éditeur de code gratuit et très puissant
• TextWrangler, logiciel pour Mac similaire à Notepad++
• Service de validation XHTML, W3C
• Service de validation CSS, W3C
• Palette de couleurs interactive
• Icônes libres de droit : Free Icons Web, Icon Archive
• normalize.css, pour uniformiser les rendus entre navigateurs