sommairelexique langages & documents réfs techs...... paul franchi si 4 2013-14 13/01/2014...
TRANSCRIPT
SommaireSommaire
LexiqueLexique
Langages & Documents RéfsRéfs
TechsTechs
..
..
..
..
.
..
Paul FranchiSI 4
2013-14
11/04/23 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/COURS10 chapitres en 2 versions .ppt et .pdfaccès distant mais sans les exemplesouaprès téléchargement du répertoire COURSaccès local avec les exemples
http://www.polytech.unice.fr/~pfz/LANGDOC/COURS10 chapitres en 2 versions .ppt et .pdfaccès distant mais sans les exemplesouaprès téléchargement du répertoire COURSaccès local avec les exemples
Mai 2013•HTLM5 Storage, etc•Modernizr, Less, etc.
SommaireSommaire
RéfsRéfs
TechsTechs
LexiqueLexique
..
..
..
..
.
..
Sommaire du Cours
Transparent 211/04/23
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
Browsercompatibility
RéfsRéfs
TechsTechs
SommaireSommaire
LexiqueLexique
Transparent 311/04/23
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
Browsercompatibility
RéfsRéfs
TechsTechs
SommaireSommaire
LexiqueLexique
Transparent 411/04/23
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
Browsercompatibility
RéfsRéfs
TechsTechs
SommaireSommaire
LexiqueLexique
Transparent 511/04/23
Web Reference Browser
de XML vers HTML5+CSS3
metadata .xml metadata .xml
Browsercompatibility
RéfsRéfs
TechsTechs
SommaireSommaire
LexiqueLexique
Transparent 611/04/23
Doc Example Browser
de XML vers HTML5+CSS3+JS
metadata .xml metadata .xml
Browsercompatibility
RéfsRéfs
TechsTechs
SommaireSommaire
LexiqueLexique
Transparent 711/04/23
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
SommaireSommaire
LexiqueLexique
Langages & Documents RéfsRéfs
TechsTechs
..
..
..
..
.
..
Paul FranchiSI 4
2013-14
11/04/23 Transparent - 8
Chap I
Documents Structurés
Chap I
Documents Structurés
Historique & Standards
Architectures Web
Lexique
Références
Modèle de Documents (SGML)
Historique & Standards
Architectures Web
Lexique
Références
Modèle de Documents (SGML)
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 911/04/23
Powerful, but Hectic !! Powerful, but Hectic !!
1985 1995 2005
Information Processing (R)évolution?
" "
Transparent 1011/04/23
Web based Applications: directly from the Client to Data
Client
DataRessources
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
Application
software
ServerServer
" "
Transparent 1111/04/23
MVC (Model View Controller) Architecture
Smalltalk, Xerox PARC, 19791. 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 1211/04/23
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.
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++C, Java, C++
Transparent 1311/04/23
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 1411/04/23
<html><script type="text/javascript">
function HTTP() {
}</script><body>
HTTP() ;
</body> </html>
Côté "Client"
Côté "Serveur"
AJAX : schéma "HttpRequest / Response"
" "
Transparent 1511/04/23
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++C, Java, C++
Web Server
" "
Transparent 1611/04/23
n-Tier Architecture for Web light Client
Presentation Layer
Client
Data Layer
Application (Business) LayerApplication
(Business) LayerApplication (Business) Layers
Server
HTML
CSS
DHTML, JS
AJAX
XML
XSL
Data Bases
C, Java, C++C, Java, C++
" "
Structure & Contrôle
Transparent 1711/04/23
"en Vrac" Web Server Architecture
Client
Data Base
Application (Business)
Datas
Style (Look)
Server
(X)HTML
" "
Server
Interface
echo "<div ..><script..>"
Transparent 1811/04/23
Overused PHP Architecture (détails)
Application (Business)
Datas
Style (Look)
mysql_connect(..)$req = mysql_query(..)
while(..){… }
echo "<br /><font ..>"(X)HTML
JS
" "
Server
Transparent 1911/04/23
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 2011/04/23
"Light Client" vs "Rich Client" (R.I.A.)
Rich ClientXML
XSL
Data Bases
"import"
of
fonctionalities
"import"
of
fonctionalities
dynamic
interface
transform
dynamic
interface
transform
metadata
multi-formats
metadata
multi-formats
HTML, CSS
DHTML, JS, AJAX
reduce the
back&forth
needs
reduce the
back&forth
needs
" "
Transparent 2111/04/23
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
"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
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
11/04/23
Web Programming: Basic "Know Hows"
Basic Tagging:
HTML & XHTML
Cascading Styling:
HTML, XML & CSS
Dynamic Pages:
DHTML & JS &
DOM
XML
Basic Tagging:
HTML & XHTML
Cascading Styling:
HTML, XML & CSS
Dynamic Pages:
DHTML & JS &
DOM
XML
.xml.xml
.css.css
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
11/04/23
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
XML Dialects: MathML, SVG
Document Definition: DTD,
XSD
Dynamic Pages: DXML & JS
& DOM & SVG
Networking: Http, Ajax
XML Processing: XSLT,
XPath, XLink .xsl.xsl
.dtd.dtd .xsd.xsd.dtd.dtd
XML
rdf
XML
rdf
XML
rdf
XML
rdf
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
11/04/23
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
CSS3: Onglets, transform, etc.
HTML 5: canvas, dragNdrop, etc.
AJAX/PHP/SQL
Dynamic XML using XSL/JS
XML as metadata: RDF, SPRY, XUL
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 2511/04/23
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
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
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 2611/04/23
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 Em
acs
Recherche et remplacement sous Emacs
compléments Emacs
grep sous Unix
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 Em
acs
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/screencast/html-training/css/positioning/
10 steps to better CSS:
http://shapeshed.com/journal/10_steps_to_better_css/
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 2711/04/23
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
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
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 2811/04/23
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
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
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 2911/04/23
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
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
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 3011/04/23
" 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
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 3111/04/23
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
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 3211/04/23
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.
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 3311/04/23
Un modèle de lettre: (exemplaire)
M. Martin
Société S.
06150 SA
Le 4/11/2002
à M. DURAND
Société R. Dpt InformatiqueRef: 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 3411/04/23
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 signaturetexte
intro
sec 1
sec2
sec3
nom
adr
nom
dpt
ref
objsoc
pt1
pt2
" "
Transparent 3511/04/23
Un modèle de lettre: une structure logique générique
Lettre
EN TETE CORPS PIED
auteur date destinataire pretexte politesse signaturetexte
pol
section
nom
adr
nom
dpt
ref
objsoc
sssection
intro
?*
*?
? ?
?
Méta-opérateurs réguliers ? + *
" "
Transparent 3611/04/23
Lettre: structure arborescente de format ("layout")
M. Martin
Société S.
06150 SA
Le 4/11/2002
à M. DURAND
Société R.Dpt InformatiqueRef: 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 3711/04/23
Lettre: une structure générique de format («layout»)
Expéditeur
Société S.
adresse
date
à Destinataire
Société
DptRef:
Objet:
Monsieur,
introduction
a
politesse
signature
?
*
* *
?
?
?
?
SommaireSommaire
LexiqueLexique
Langages & Documents RéfsRéfs
TechsTechs
..
..
..
..
.
..
Paul FranchiSI 4
2013-14
11/04/23 Transparent - 38
Chap II - HTML
"Hyper Text Markup Language"
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
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
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 3911/04/23
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
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
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 4011/04/23
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é
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 4111/04/23
<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)
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 4211/04/23
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 ' '
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 4311/04/23
<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 4411/04/23
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 4511/04/23
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 4611/04/23
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>
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 4711/04/23
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)
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)
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 4811/04/23
(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
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
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 4911/04/23
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:
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
Préférez
les Standards
du Web
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 5011/04/23
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
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
SommaireSommaire
LexiqueLexique
Langages & Documents RéfsRéfs
TechsTechs
..
..
..
..
.
..
Paul FranchiSI 4
2013-14
11/04/23 Transparent - 51
Chap II - HTML 5Chap II - HTML 5
HTML 5
HTML5 Slideshow
"Responsible" Web development
HTML 5
HTML5 Slideshow
"Responsible" Web development
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 5211/04/23
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….
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.[
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.[
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 5311/04/23
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
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
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 5411/04/23
HTML 5 at a glance
CANVAS
VIDEO & AUDIO
DRAG n DROP
sur le Web HTML 5 Slides Presentatio
n HTML 5 demos MDC Canvas Tutorial SVG or Canvas Drag n Drop in FF 3.5
CANVAS
VIDEO & AUDIO
DRAG n DROP
sur le Web HTML 5 Slides Presentatio
n HTML 5 demos MDC Canvas Tutorial SVG or Canvas Drag n Drop in FF 3.5
SommaireSommaire
RéfsRéfs
TechsTechsUsing the standar
ds 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
" " LexiqueLexique
Transparent 5511/04/23
« 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
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).
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).