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 &nbsp;, 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).