Upload
lamdung
View
233
Download
0
Embed Size (px)
Citation preview
Sommaire Lexique
Langages & Documents Réfs
Techs
.
.
.
.
.
.
Paul Franchi
SI 4
2013-14
31/10/2013 Transparent - 1
Chap I
Documents Structurés
Chap II - HTML
"Hyper Text Markup Language"
Chap II - HTML 5
http://www.polytech.unice.fr/~pfz/LANGDOC/COURS
10 chapitres en 2 versions .ppt et .pdf
accès distant mais sans les exemples
ou
après téléchargement du répertoire COURS
accès local avec les exemples
Mai 2013
• HTLM5 Storage, etc
• Modernizr, Less, etc.
Sommaire
Réfs
Techs
Lexique
.
.
.
.
.
.
Sommaire du Cours
Transparent 2 31/10/2013
Chap I - Documents: Historique, Modèles, Standards et Références
Chap II - HTML: voir le cours CIP1-CMD & HTML5
Chap III - XML: "eXtensible Markup Language", les Bases
Chap IV - DTD: "Document Type Definition"
Chap V - CSS: Feuilles de Styles en Cascades& CSS3
Chap VI - DOM, DHTML: "Domain Object Model "& Programmation
Dynamique en HTML & SPRY & JQuery
Chap VII - XSD: Schémas XML
Chap VIII - XML "Advanced" Processeurs et Dialectes: XPath, Xlink
Chap IX - XSLT: Transformations XML
Chap X - RDF: "Resource Description Framework"
Chap IX - AJAX: "Asynchronous JavaScript And XML"
Savoir-Faire: Basic Advanced State of the Art
Etat de l'Art: HTML5 CSS3 SPRY JQuery SVG MathML
RDF AJAX
Browser
compatibility
Réfs
Techs
Sommaire Lexique
Transparent 3 31/10/2013
Web
EPU courses (in French)
Création & Manipulltion de Document http://www.polytech.unice.fr/~pfz/cmd.html
Introduction to Internet http://rainbow.i3s.unice.fr/iai/
Langages & Documents http:www.polytech.unice;fr/~pfz/document.html
W3C tutorial : http://www.w3schools.com/
Mozilla Development Center http://developer.mozilla.org/en/docs/Main_Page
W3C, http://www.w3.org/
Web Developer's Bookmarks http://antriksh.com/resources/
XML Wiki Book http://en.wikibooks.org/wiki/XML_-_Managing_Data_Exchange
Biblio:
many issues at EPU's lib
Some References
Browser
compatibility
Réfs
Techs
Sommaire Lexique
Transparent 4 31/10/2013
Documentation et Manuels
Documents du web
liste de balises HTML
code des couleurs RVB
code HTML des caractères ISO
liste des extensions de fichiers (formats)
Expressions Rationnelles
Manuels.
Expressions régulières sous Emacs
Recherche et remplacement sous Emacs
compléments Emacs
grep sous Unix
Browser
compatibility
Réfs
Techs
Sommaire Lexique
Transparent 5 31/10/2013
Web Reference Browser
de XML vers HTML5+CSS3
metadata .xml
Browser
compatibility
Réfs
Techs
Sommaire Lexique
Transparent 6 31/10/2013
Doc Example Browser
de XML vers HTML5+CSS3+JS
metadata .xml
Browser
compatibility
Réfs
Techs
Sommaire Lexique
Transparent 7 31/10/2013
API – Application Programming Interface ANSI – American National Standards Institute ASCII – American Standard Code for Information Interchange (128 car.) AJAX – Asynchronous JavaScript & XML CSS – Cascading Style Sheets DHTML – Dynamic HTML DOM – Document Object Model DTD – Document Type Definition HTML – HyperText Markup Language HTTP – HyperText Transfer Protocol ISO - International Standards Organization Mozilla - Fondation (global community for free and open Internet software)) MVC - Model View Controler RDF - Resource Description Framework REST - Representational State Transfer RIA - Rich Internet Application RSS - Really Simple Syndication SGML - Standard Generalized Markup Language SOAP - Simple Access Object Protocol SPRY - Extensions JS pour HTML - Adobe Lab. SVG - Scalable Vector Graphics UNICODE – World wide Code (16 bits) UTF-8 – Unicode version 8 bits URL / URI – Uniform Resource Locator / Identifier XML – eXtensible Markup Language XBL – XML Binding Language (Mozilla) XForms – XML Forms XHTML – HTML 4 en XML XLink – XML Linking Language XPath – XML Path Language XPointer – XML Pointer Language XSL - eXtensible Stylesheet Language XSLT – XSL Transformations XSL-FO – XSL Formatting Objects XSD – XML Schémas Définition Language XUL – XML User Language (Mozilla) W3C – World Wide Web Consortium Web2.0 – Web dit "sémantique" WHATWG - Web Hypertext Application Technology Working Group WSDL - Web Service Description Language
Lexique
Sommaire Lexique
Langages & Documents Réfs
Techs
.
.
.
.
.
.
Paul Franchi
SI 4
2013-14
31/10/2013 Transparent - 8
Chap I
Documents Structurés
Historique & Standards Architectures Web Lexique Références Modèle de Documents (SGML)
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 9 31/10/2013
Powerful, but Hectic !!
1985 1995 2005
Information Processing (R)évolution?
" "
Transparent 10 31/10/2013
Web based Applications: directly from the Client to Data
Client
Data
Ressources
the Client and the Server can run on separate hardwares
the Client is the Master
the Client Application emits requests for Ressources directly to the Server
both Client and Server agree on a network communication protocol (http, ftp, url, uri, tcp/ip)
the Server software resolves the requests and send replies back to the Client
the request/reply process can be synchronous or asynchronous.
suited only for performance or security purpose
no generality
no flexibility
evolution made uneasy
Application
software
Server
" "
Transparent 11 31/10/2013
MVC (Model View Controller) Architecture
Smalltalk, Xerox PARC, 1979
1. The user interacts with the user interface (View, (X)HTML).
2. The controller handles the input event from the user interface, often via a registered handler or callback and converts the event into appropriate action for the model.
3. The controller notifies the model of the user action, possibly resulting in a change in the model's state. (For example, the controller updates the user's shopping cart.)
4. A view queries the model in order to generate an appropriate user interface (for example, the view lists the shopping cart's contents). The view gets its own data from the model. The controller may (in some implementations) issue a general instruction to the view to render itself. In others, the view is automatically notified by the model of changes in state (Observer) which require a screen update.
5. The user interface waits for further user interactions, which restarts the cycle.
" "
Transparent 12 31/10/2013
3-Tier Web Client Server Architecture
John J. Donovan (OEC),
Cambridge, MA, 1990
Presentation tier
This is the topmost level of the application. The presentation tier displays information related to such services as browsing merchandise, purchasing, and shopping cart contents. It communicates with other tiers by outputting results to the browser/client tier and all other tiers in the network.
Application tier (business logic, logic tier, data access tier, or middle tier)
The logic tier is pulled out from the presentation tier and, as its own layer, it controls an application’s functionality by performing detailed processing.
Data tier
This tier consists of database servers. Here information is stored and retrieved. This tier keeps data neutral and independent from application servers or business logic. Giving data its own tier also improves scalability and performance.
" "
C, Java, C++
Transparent 13 31/10/2013
Using the standards for Web light Client
Client side
Data Layer
Application
(Business)
Layer
Server side
HTML
CSS
DHTML, JS
AJAX
XML
XSL
Data Bases
Browser
Server side
scripting
" "
Transparent 14 31/10/2013
<html>
<script type="text/javascript">
function HTTP() {
}
</script>
<body>
HTTP() ;
</body>
</html>
Côté "Client"
send() open(GET, ...)
new XMLHttpRequest
status responseText
responseXML
Côté "Serveur"
AJAX : schéma "HttpRequest / Response"
" "
Transparent 15 31/10/2013
3 -Tier Architecture for Web light Client
Presentation Layer
Client
Data Layer
Application (Business) Layer
Server
HTML
CSS
DHTML, JS
AJAX
XML
XSL
Data Bases
C, Java, C++
Web Server
" "
Transparent 16 31/10/2013
n-Tier Architecture for Web light Client
Presentation Layer
Client
Data Layer
Application (Business) Layer Application
(Business) Layer Application (Business) Layers
Server
HTML
CSS
DHTML, JS
AJAX
XML
XSL
Data Bases
C, Java, C++
" "
Structure & Contrôle
Transparent 17 31/10/2013
"en Vrac" Web Server Architecture
Client
Data Base
Application (Business)
Datas
Style (Look)
Server
(X)HTML
" "
Server
Interface
echo "<div ..><script..>"
Transparent 18 31/10/2013
Overused PHP Architecture (détails)
Application (Business)
Datas
Style (Look)
mysql_connect(..)
$req = mysql_query(..)
while(..){
… }
echo "<br /><font ..>" (X)HTML
JS
" "
Server
Transparent 19 31/10/2013
RIA Architecture
Rich Client
Data Base
Datas
Style
Structure XML, RDF
CSS, XSL
Networking
Contrôle &
Web Services
JS, DOM
SOAP, WSDL
http, AJAX
Application
Application
Application
" "
Transparent 20 31/10/2013
"Light Client" vs "Rich Client" (R.I.A.)
Rich Client XML
XSL
Data Bases
"import"
of
fonctionalities
dynamic
interface
transform
metadata
multi-formats
HTML, CSS
DHTML, JS, AJAX
reduce the
back&forth
needs
" "
Transparent 21 31/10/2013
Web Techniques: "Grand Tour"
"Electronic" vs "Digital" vs "Structured" Documents
Document Models & Standards: SGML, ODA, DSSL, W3C
Languages & Tags: TeX, LaTeX, HTML, XML, XHTML
Layout (Style): CSS, XSL
Document Type & Tree Structure: DTD , XSD, DOM, SAX
Client side Scripting: JavaScript, JScript, VBScript
Server side Scripting: ASP, PHP
Dynamic Document: DHTML
Document Processing & Exchange: XSLT, XPath, XLink
XML Dialects: MathML, SVG, MusicML, MXML, GPX, GeoSciML, KML,
Metadata: RDF, Adobe XMP, Dublin Core, EXIF, TIFF, FGDC- Iso 19115
Rich Interface Applications: Mozilla XUL, Adobe SPRY & FLEX, JavaFX
Networking: HttpRequest, Ajax, RPC, SOAP, RSS, XPConnect
IDE: FrontPage, DreamWeaver, Kompozer, Nvu, Office
Browser (Navigator): I.E, Firefox, Mozilla, Safari, Opéra, Google Chrome
Server Side Processors: EasyPhP, W(M)amp, Apache, Xalan, Saxon
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
31/10/2013
Web Programming: Basic "Know Hows"
Basic Tagging:
HTML & XHTML
Cascading Styling:
HTML, XML & CSS
Dynamic Pages:
DHTML & JS &
DOM
XML
.xml
.css
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
31/10/2013
Web Programming: Advanced "Know Hows"
XML Dialects: MathML, SVG
Document Definition: DTD,
XSD
Dynamic Pages: DXML & JS
& DOM & SVG
Networking: Http, Ajax
XML Processing: XSLT,
XPath, XLink .xsl
.dtd .xsd .dtd
XML
rdf
XML
rdf
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
31/10/2013
Web Programming: "State of the Art"
CSS3: Onglets, transform, etc.
HTML 5: canvas, dragNdrop, etc.
AJAX/PHP/SQL
Dynamic XML using XSL/JS
XML as metadata: RDF, SPRY, XUL
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 25 31/10/2013
Web
EPU courses (in French)
Création & Manipulltion de Document http://www.polytech.unice.fr/~pfz/cmd.html
Introduction to Internet http://rainbow.i3s.unice.fr/iai/
Langages & Documents http:www.polytech.unice;fr/~pfz/document.html
W3C tutorial : http://www.w3schools.com/
Mozilla Development Center http://developer.mozilla.org/en/docs/Main_Page
W3C, http://www.w3.org/
Web Developer's Bookmarks http://antriksh.com/resources/
Biblio:
many issues at EPU's lib
Some Références
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 26 31/10/2013
Documentation et Manuels
Documents du web
liste de balises HTML
code des couleurs RVB
code HTML des caractères ISO
liste des extensions de fichiers
(formats)
Expressions Rationnelles
Manuels.
Expressions régulières sous
Emacs
Recherche et remplacement
sous Emacs
compléments Emacs
grep sous Unix
Tutoriaux du Web
W3C :
http://www.w3schools.com/
CSS Play :
http://www.cssplay.co.uk/index
Zen Garden :
http://www.csszengarden.com/tr/
francais/
CSS in10 steps :
http://www.barelyfitz.com/screen
cast/html-
training/css/positioning/
10 steps to better CSS:
http://shapeshed.com/journal/10_ste
ps_to_better_css/
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 27 31/10/2013
API – Application Programming Interface ANSI – American National Standards Institute ASCII – American Standard Code for Information Interchange (128 car.) AJAX – Asynchronous JavaScript & XML CSS – Cascading Style Sheets DHTML – Dynamic HTML DOM – Document Object Model DTD – Document Type Definition HTML – HyperText Markup Language HTTP – HyperText Transfer Protocol ISO - International Standards Organization Mozilla - Fondation (global community for free and open Internet software)) MVC - Model View Controler RDF - Resource Description Framework REST - Representational State Transfer RIA - Rich Internet Application RSS - Really Simple Syndication SGML - Standard Generalized Markup Language SOAP - Simple Access Object Protocol SPRY - Extensions JS pour HTML - Adobe Lab. SVG - Scalable Vector Graphics UNICODE – World wide Code (16 bits) UTF-8 – Unicode version 8 bits URL / URI – Uniform Resource Locator / Identifier XML – eXtensible Markup Language XBL – XML Binding Language (Mozilla) XForms – XML Forms XHTML – HTML 4 en XML XLink – XML Linking Language XPath – XML Path Language XPointer – XML Pointer Language XSL - eXtensible Stylesheet Language XSLT – XSL Transformations XSL-FO – XSL Formatting Objects XSD – XML Schémas Définition Language XUL – XML User Language (Mozilla) W3C – World Wide Web Consortium Web2.0 – Web dit "sémantique" WHATWG - Web Hypertext Application Technology Working Group WSDL - Web Service Description Language
Lexique
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 28 31/10/2013
Historique et Standards
GML – Generalized Markup Language IBM, 1960’s
3 initiales des inventeurs
SGML - Standard Generalized Markup Language norme ANSI, 1983
norme ISO, 1986
HTML – HyperText Markup Language CERN, début 1990’s
Standards du W3C (MIT, Mass, 1994) XML – eXtensible Markup Language, 1998
HTML (CERN, Genève), 1992, HTML 4, 5 (W3C)
CSS1 & 2 & CSS3 - Cascading Style Sheets
DOM – Document Object Model
XSL – eXtensible Stylesheet Langage
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 29 31/10/2013
Terminologie de l’information
Ressource
Un service d’information: serveur
Normes ISO, numéros ISBN, URL, etc
Entité
Un exemplaire physique
Un livre imprimé, un fichier, etc.
Référence
Accès à une entité
Lien hypertexte
Document
Oeuvre logique
Réalisable sous plusieurs formes physiques
Version « source » lisible par l’homme:
Version « source » formatées: HTML, XML, TeX
Version pour impression: .ps, .pdf, .dvi
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 30 31/10/2013
" Document Processing": analyse des besoins
Impression
Visualisation
Conception & Edition
Echange & Conversion
Analyse Lexicale, Syntaxique et Sémantique
Transformation & Traduction
Collaboration et Partage
Navigation & Recherche
Base Documentaire
Interprétation & Evaluation
" "
Transparent 31 31/10/2013
Traitement de Document (modèle SGML)
Structure
Logique
Générique
DTD
EDITION
Interface H/M
Structure
Générique
Format
FORMATAGE
S. LOGIQUE
S. LAYOUT
PRESENTATION
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 32 31/10/2013
Traitement d’un document: l’approche arborescente
Structure logique ("inductive")
Une arborescence enracinée des composants
DTD, DOM, XML-schémas
Structure de format ("layout")
Une attribution de formatage (ODA, DSL)
Un balisage libre (TeX, HTML)
Un balisage (LaTeX, XHTML, XML) bien parenthèsé
(emboîtements)
Un format de Présentation (sortie, "rendu")
.ps, .dvi, etc
Visualisation .pdf etc.
" "
Transparent 33 31/10/2013
Un modèle de lettre: (exemplaire)
M. Martin
Société S.
06150 SA
Le 4/11/2002
à M. DURAND
Société R. Dpt Informatique Ref: MM25
Objet: à voir Monsieur,
J’ai l’honneur de porter à votre attention
1. le premier point
aaaaaaaaaaaaaa
bbbbbbb
2. le deuxième
3. etc. Sincères salutations,
M. X
" "
Transparent 34 31/10/2013
Un modèle de lettre: structure logique arborescente
M. Martin
Société S.
06150 SA
Le 4/11/2002
à M. DURAND
Société R. Dpt
Informatique Ref: MM25
Objet: à voir
Monsieur,
J’ai l’honneur de porter à votre attention
1. le premier point
aaaaaaaaaaaaaa
bbbbbbb
2. le deuxième
3. etc.
Sincères salutations,
M. X
Lettre
EN TETE CORPS PIED
auteur date destinataire pretexte politesse signature texte
intro
sec 1
sec2
sec3
nom
adr
nom
dpt
ref
obj soc
pt1
pt2
" "
Transparent 35 31/10/2013
Un modèle de lettre: une structure logique générique
Lettre
EN TETE CORPS PIED
auteur date destinataire pretexte politesse signature texte
pol
section
nom
adr
nom
dpt
ref
obj soc
sssection
intro
? *
* ?
? ?
?
Méta-opérateurs réguliers ? + *
" "
Transparent 36 31/10/2013
Lettre: structure arborescente de format ("layout")
M. Martin
Société S.
06150 SA
Le 4/11/2002
à M. DURAND
Société R.Dpt Informatique Ref: MM25
Objet: à voir Monsieur,
J’ai l’honneur de porter à votre attention
1. le premier point
aaaaaaaaaaaaaa
bbbbbbb
2. le deuxième
3. etc.
Sincères salutations,
M. X
" "
Transparent 37 31/10/2013
Lettre: une structure générique de format («layout»)
Expéditeur
Société S.
adresse
date
à Destinataire
Société
Dpt Ref:
Objet:
Monsieur,
introduction
a
politesse
signature
?
*
* *
?
?
?
?
Sommaire Lexique
Langages & Documents Réfs
Techs
.
.
.
.
.
.
Paul Franchi
SI 4
2013-14
31/10/2013 Transparent - 38
Chap II - HTML
"Hyper Text Markup Language"
Note au lecteur: ceci n'est pas un cours HTML, mais un rapide survol voir le cours "Création et manipulation de Documents" (CIP1) HTML 5
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 39 31/10/2013
HTML - La Génèse
1989 - 1992 : CERN SGML et Hyperliens - HTML 1.0
Tim Berners-Lee et Dan Connally
1993 : MOSAIC img et form - HTML 1.0
1994 : NETCAPE CSS et DOM
1995-96 : Web 1995-96: HTML 2.0
1997: HTML 3.2. et 4.0
2000-2006: XHTML abandon de XHTML 2.0
2011: HTML 5.0
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 40 31/10/2013
HTML - Hyper Text Markup Language
On <balise> le texte «source» avec un ensemble fini de
balises « markup tags »
le formatage initial du texte source donne un ordre logique
entre les éléments de texte, mais aucune indication
d’espacement (lignes, espaces ou tabulations)
Les balises HTML jouent un double rôle:
structuration logique du document
format de présentation (« layout »)
Le principe de formatage est celui des boites
rectangulaires arborescentes mais le parenthesage n’est
pas vérifié
" "
Transparent 41 31/10/2013
<html><body bgcolor=#CCCCFF>
<table> <tr>
<td> <p align=left> M. Martin <br> Société S. <br> Avenue A. 06150 SA </p> </td>
<td> <p align=right> <i> </i> </td >
</table>
<p align=right> </p>
<p align=left> </p>
<p align=center> </p >
Le 4/11/2002
à M. DURAND <br> Société R. <br> Dpt Informatique
Ref: MM25 <br> Objet: à voir
Monsieur,
<ol> J’ai l’honneur de porter à votre attention
<li> le premier point
<ul> < li > aaaaaaaaaaaaaa <li> bbbbbbb </ul>
<li> le deuxième <li> etc. </ol>
<p align=center>
</body>
</html>
Sincères salutations, <br> M. X <br> <img src= signature.gif> </p >
Une lettre en HTML (version simpliste)
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 42 31/10/2013
Survol d’HTML (version 4.01)
Balisage
une balise s’écrit avec < et > deux caractères spéciaux de début et fin de balise et un identificateur(nom) prédéfini
le balisage structure le source en éléments
le balisage associe une balise ouvrante < > et une fermante </ > par paire (non obligatoire).
le texte entre une balise ouvrante et une fermante est le contenu de l’élément
le balisage est insensible à la casse (préférer les minuscules, obligatoires en XHTML)
Attributs de balises une balise peut comporter 0 ou plusieurs paires
attribut = "valeur"
<table border="1" align="center">
sans ou avec (préférer) quotes doubles " " ou simples ' '
" "
Transparent 43 31/10/2013
<html>
<!-- commentaires bienvenus -->
<head>
<title> Titre de la page dans le navigateur </title>
</head>
<body >
<!-- mettre ici le contenu balisé à afficher -->
</body>
</html>
HTML - source type (version simpliste)
" "
Transparent 44 31/10/2013
XHTML - source type (version simpliste)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<!-- pour les accents -->
<title> Titre de la page dans le navigateur </title>
</head>
<body >
<!-- mettre ici le contenu balisé bien parenthésé à afficher -->
</body>
</html>
" "
Transparent 45 31/10/2013
Balisage, Indentation, & Parenthèses
<html> <!-- commentaire -->
<head>
<title> Titre de la page </title>
</head>
<body >
<p >
<a href=... > ... </a>
<ul> <li> <img src=... /> </li>
</ul>
</p>
</body>
</html>
( ( ( ) ) ( ( ( ... ) ( ( ( ) ) ) ) ) )
" "
Transparent 46 31/10/2013
Balisage & Arborescence
<html> <!-- commentaire -->
<head>
<title> Titre de la page </title>
</head>
<body >
<p >
<a href=... > ... </a>
<ul> <li> <img src=... /> </li>
</ul>
</p>
</body>
</html>
html
<!--com-->
head title
body p
a
ul li img
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 47 31/10/2013
Les défauts d’ HTML
Beaucoup de versions pas toujours compatibles avec des interprétations dépendantes des navigateurs
La structure logique n’est pas prise en compte
Pas de structure logique générique
Le balisage n’est pas strictement arborescent
Pas de formatage générique
L’évaluation du formatage est strictement lié au texte
Pas de séparation style-formatage
Le balisage mélange le formatage et le style au contenu du texte
L’ensemble des balises est clos (aucune extension)
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 48 31/10/2013
(X)HTML: savoir-faire basique
Styles
Textes
Images avec mapping
Liens et Ancres
Listes
Tables
Layers
Frames
Iframes
Forms & Input
"débaliser" un source HTML
Page Web dédiées (multi-panneaux):
Explorateur: accès par index, listes, aperçus, et visualisation
Atelier de Développement: code source, visualisation,
documentation
sur le Web
W3Schools - HTML Tutorial
Learn on HTML.net
Dave's Interactive HTML Tutorial
Utexas Html Tutorial
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 49 31/10/2013
Quelques règles d'écriture pour un "meilleur" (X)HTML
respecter la validation syntaxique XHTML :
balisage fermé, bien parenthésé
usage des ""
nom de balise en minuscule
associer le balisage à la structure logique
utiliser <div> et <span>
utiliser les attributs "id" et "class"
éviter les styles "internes":
avec des balises: <b> <em> <u> <i> <font>
avec des attributs : align width
préférer les styles CSS, notamment en feuilles externes
formater avec CSS
saut de ligne: pas de <br />, éviter <p>, utiliser display:
espace, tabulations: éviter , utiliser padding: et margin:
placement: pas de <table >, utiliser display: float: position:
Préférez
les Standards
du Web
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 50 31/10/2013
Syntaxe d'un commentaire conditionnel positif:
<!--[if condition]> HTML ou XHTML ou CSS ou Script <![endif]-->
Syntaxe d'un commentaire conditionnel négatif:
<!--[if condition]><![IGNORE[--><![IGNORE[]]> HTML <![endif]-->
version non valide pour XHTML et XML
Conditions:
IE : Toutes versions d'IE
lt IE version: Versions d'IE inférieures à version
lte IE version: Versions d'IE inférieures ou égales à version
IE version: La version version d'IE
gte IE version: Versions d'IE supérieures ou égales à version
gt IE version: Versions d'IE supérieures à version
version: IE 5, 5.5, 6 ou 7.
Très utile pour adapter les styles CSS aux versions IE
HTML - Commentaires Conditionnels IE
Sommaire Lexique
Langages & Documents Réfs
Techs
.
.
.
.
.
.
Paul Franchi
SI 4
2013-14
31/10/2013 Transparent - 51
Chap II - HTML 5
HTML 5 HTML5 Slideshow "Responsible" Web development
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 52 31/10/2013
What is HTML 5 ?
HTML 5
The new standard for HTML, XHTML, and the
HTML DOM..
HTML 5 still a work in progress..
Browser Support
Safari, Chrome, Firefox, and Opera do some ...
Internet Explorer 9 will do….
On 10 April 2007, the Mozilla Foundation, Apple and Opera
Software proposed[5] that the new HTML working group of the
W3C adopt the WHATWG’s HTML5 as the starting point of its
work and name its future deliverable "HTML5".
On 9 May 2007, the new HTML working group resolved to do
that.[
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 53 31/10/2013
HTML 5 new features
New content elements, like
article, footer, header, nav, section
New form controls, like
calendar, date, time, email, url, search
New elements for video and audio media
The canvas element for drawing
Web Applications:
persistent Storage (localStorage vs sessionStorage)
Web Workers (asynchronous computations in JS)
WHATWG client-side session
File & DOM drag n drop API
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 54 31/10/2013
HTML 5 at a glance
CANVAS
VIDEO & AUDIO
DRAG n DROP
sur le Web
HTML 5 Slides
Presentation
HTML 5 demos
MDC Canvas Tutorial
SVG or Canvas
Drag n Drop in FF 3.5
Sommaire
Réfs
Techs
Using the
standards for Web
light Client
What is HTML 5 ?
Web Programming:
Advanced "Know
Hows"
XHTML - source
type (version simpliste)
" Document
Processing": analyse
des besoins
HTML - Génèse
HTML 5 new
features
Web Techniques:
"Grand Tour"
Quelques règles
d'écriture pour un
"meilleur" (X)HTML
(X)HTML: savoir-
faire
HTML 5 at a glance
" " Lexique
Transparent 55 31/10/2013
« Responsible » Web development
jquery.js
modernizr.js
detects browser features
normalize.css
CSS resets for modern standards (HTML5)
LESS
extends CSS with dynamic behavior.
selectivizr.js
CSS adaptation for IE
Yeoman, ANGULARJS, Bootstrap/
responsibleSlider.js
Joomla, Wordpress
Responsive web design (RWD) is a web design approach aimed at crafting
sites to provide an optimal viewing experience - easy reading and navigation
with a minimum of resizing, panning, and scrolling - across a wide range of
devices (from desktop computer monitors to mobile phones).