Chap I Documents Structurés 26/03/2017 Mai 2013 HTLM5 Storage, etc Modernizr, Less, etc. Chap I Documents Structurés 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 Chap II - HTML "Hyper Text Markup Language" Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition Chap II - HTML 5 26/03/2017 Transparent - 1 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

26/03/2017 Sommaire du Cours 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 26/03/2017 Transparent 2 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Some References Web EPU courses (in French) 26/03/2017 Some References 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 26/03/2017 Transparent 3 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi 3

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 26/03/2017 Transparent 4 ESSI - 2 – 2004-05 - Paul Franchi 4

Web Reference Browser de XML vers HTML5+CSS3 metadata .xml de XML vers HTML5+CSS3 26/03/2017 Transparent 5 ESSI - 2 – 2004-05 - Paul Franchi 5

de XML vers HTML5+CSS3+JS Doc Example Browser metadata .xml de XML vers HTML5+CSS3+JS 26/03/2017 Transparent 6 ESSI - 2 – 2004-05 - Paul Franchi 6

Lexique API – Application Programming Interface 26/03/2017 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 26/03/2017 Transparent 7 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi 7

Chap I Documents Structurés 26/03/2017 Chap I Documents Structurés Historique & Standards Architectures Web Lexique Références Modèle de Documents (SGML) Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 8 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Information Processing (R)évolution? HTML MathML SVG RDF RSS 26/03/2017 AJax RIA SPRY XUL CSS Powerful, but Hectic !! Information Processing (R)évolution? JavaScript 1985 1995 2005 PHP DOM ASP DHTML XML XHTML XPath- XPointer XLink XSD XSLT 26/03/2017 Transparent 9 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Web based Applications: directly from the Client to Data 26/03/2017 Web based Applications: directly from the Client to Data 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. Client Application software suited only for performance or security purpose no generality no flexibility evolution made uneasy Server Data Ressources 26/03/2017 Transparent 10 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

MVC (Model View Controller) Architecture 26/03/2017 MVC (Model View Controller) Architecture Smalltalk, Xerox PARC, 1979 The user interacts with the user interface (View, (X)HTML). 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. 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.) 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. The user interface waits for further user interactions, which restarts the cycle. 26/03/2017 Transparent 11 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

3-Tier Web Client Server Architecture 26/03/2017 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. 26/03/2017 Transparent 12 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Using the standards for Web light Client 26/03/2017 Using the standards for Web light Client HTML CSS DHTML, JS AJAX Browser CGI Servlet, JSP Server side scripting PHP, ASP XML XSL C, Java, C++ Client side Application (Business) Layer SQL Apache Server side Data Layer Data Bases 26/03/2017 Transparent 13 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

AJAX : schéma "HttpRequest / Response" 26/03/2017 AJAX : schéma "HttpRequest / Response" <html> <script type="text/javascript"> function HTTP() { } </script> <body> HTTP() ; </body> </html> send() open(GET, ...) new XMLHttpRequest status responseText responseXML Côté "Serveur" Synchrone=bloquant ou Asynchrone= non bloquant Côté "Client" 26/03/2017 Transparent 14 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

3 -Tier Architecture for Web light Client 26/03/2017 3 -Tier Architecture for Web light Client Web Server HTML CSS DHTML, JS AJAX CGI Client Servlet, JSP ApI Presentation Layer XML XSL C, Java, C++ Application (Business) Layer ApI Apache SQL Data Layer Server Data Bases 26/03/2017 Transparent 15 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

n-Tier Architecture for Web light Client 26/03/2017 n-Tier Architecture for Web light Client ApI HTML CSS DHTML, JS AJAX Client CGI Presentation Layer Servlet, JSP PHP, ASP C, Java, C++ XML XSL Application (Business) Layer Application (Business) Layer Application (Business) Layers ApI Hypertrophy Data Layer SQL Apache Data Bases Server 26/03/2017 Transparent 16 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

"en Vrac" Web Server Architecture 26/03/2017 "en Vrac" Web Server Architecture (X)HTML Client Structure & Contrôle Style (Look) Application (Business) PHP, ASP the mess! Datas SQL Apache Server Data Base 26/03/2017 Transparent 17 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Overused PHP Architecture (détails) 26/03/2017 Overused PHP Architecture (détails) Server Interface echo "<div ..><script..>" Style (Look) (X)HTML JS Application (Business) echo "<br /><font ..>" while(..){ … } PHP, ASP Datas mysql_connect(..) $req = mysql_query(..) SQL 26/03/2017 Transparent 18 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

PHP, ASP ApI ApI ApI ApI SQL ApI 26/03/2017 RIA Architecture Rich Client Server XML, RDF Structure PHP, ASP Networking http, AJAX Style CSS, XSL Application Contrôle & Web Services ApI Application ApI Application JS, DOM SOAP, WSDL ApI ApI SQL Data Base Datas ApI 26/03/2017 Transparent 19 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

"Light Client" vs "Rich Client" (R.I.A.) 26/03/2017 "Light Client" vs "Rich Client" (R.I.A.) Rich Client XML XSL "import" of fonctionalities dynamic interface transform HTML, CSS DHTML, JS, AJAX reduce the back&forth needs metadata multi-formats SQL Data Bases 26/03/2017 Transparent 20 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Web Techniques: "Grand Tour" 26/03/2017 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 26/03/2017 Transparent 21 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Web Programming: Basic "Know Hows" 26/03/2017 Web Programming: Basic "Know Hows" Basic Tagging: HTML & XHTML Cascading Styling: HTML, XML & CSS Dynamic Pages: DHTML & JS & DOM XML .css .xml 26/03/2017 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Web Programming: Advanced "Know Hows" 26/03/2017 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 .dtd .dtd .xsd XML rdf .xsl XML rdf 26/03/2017 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Web Programming: "State of the Art" 26/03/2017 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 26/03/2017 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Some Références Web EPU courses (in French) 26/03/2017 Some Références 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 26/03/2017 Transparent 25 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

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/screencast/html-training/css/positioning/ 10 steps to better CSS: http://shapeshed.com/journal/10_steps_to_better_css/ 26/03/2017 Transparent 26 ESSI - 2 – 2004-05 - Paul Franchi

Lexique API – Application Programming Interface 26/03/2017 Lexique 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 26/03/2017 Transparent 27 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Historique et Standards 26/03/2017 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 26/03/2017 Transparent 28 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Terminologie de l’information 26/03/2017 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 26/03/2017 Transparent 29 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

" Document Processing": analyse des besoins 26/03/2017 " 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 26/03/2017 Transparent 30 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Traitement de Document (modèle SGML) 26/03/2017 Traitement de Document (modèle SGML) Structure Logique Générique DTD Interface H/M EDITION S. LOGIQUE Structure Générique Format FORMATAGE S. LAYOUT PRESENTATION 26/03/2017 Transparent 31 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Traitement d’un document: l’approche arborescente 26/03/2017 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. 26/03/2017 Transparent 32 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Un modèle de lettre: (exemplaire) 26/03/2017 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 le premier point aaaaaaaaaaaaaa bbbbbbb le deuxième etc. Sincères salutations, M. X 26/03/2017 Transparent 33 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Un modèle de lettre: structure logique arborescente 26/03/2017 Un modèle de lettre: structure logique arborescente Le 4/11/2002 Monsieur, M. Martin Société S. 06150 SA à M. DURAND Société R. Dpt Informatique Ref: MM25 Objet: à voir J’ai l’honneur de porter à votre attention le premier point aaaaaaaaaaaaaa bbbbbbb le deuxième etc. Sincères salutations, M. X 26/03/2017 Transparent 34 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Un modèle de lettre: une structure logique générique 26/03/2017 Un modèle de lettre: une structure logique générique ? ? ? ? * ? * ==> DTD & XSD & XPATH Méta-opérateurs réguliers ? + * 26/03/2017 Transparent 35 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Lettre: structure arborescente de format ("layout") 26/03/2017 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 le premier point aaaaaaaaaaaaaa bbbbbbb le deuxième etc. Sincères salutations, M. X 26/03/2017 Transparent 36 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Lettre: une structure générique de format («layout») 26/03/2017 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 ? 26/03/2017 Transparent 37 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Chap II - HTML "Hyper Text Markup Language" 26/03/2017 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 Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 38 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

HTML - La Génèse 1989 - 1992 : CERN 1993 : MOSAIC 1994 : NETCAPE 26/03/2017 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 26/03/2017 Transparent 39 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

HTML - Hyper Text Markup Language 26/03/2017 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é utile ou néfaste? avec superposition 26/03/2017 Transparent 40 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Une lettre en HTML (version simpliste) <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> comme il ne faut PLUS l'écrire ! Sincères salutations, <br> M. X <br> <img src= signature.gif> </p > 26/03/2017 Transparent 41 ESSI - 2 – 2004-05 - Paul Franchi

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 ' ' 26/03/2017 Transparent 42 ESSI - 2 – 2004-05 - Paul Franchi

HTML - source type (version simpliste) <!-- commentaires bienvenus --> <head> <title> Titre de la page dans le navigateur </title> </head> <body > <!-- mettre ici le contenu balisé à afficher --> </body> </html> 26/03/2017 Transparent 43 ESSI - 2 – 2004-05 - Paul Franchi

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> DTD obligatoire pour IE  XML, XHTML 26/03/2017 Transparent 44 ESSI - 2 – 2004-05 - Paul Franchi

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> ( ( ) ) ( ... ) ( ( ( ) ) 26/03/2017 Transparent 45 ESSI - 2 – 2004-05 - Paul Franchi

Balisage & Arborescence html <!--com--> head title body p a ul li img <html> <!-- commentaire --> <head> <title> Titre de la page </title> </head> <body > <p > <a href=... > ... </a> <ul> <li> <img src=... /> </li> </ul> </p> </body> </html> => DOM 26/03/2017 Transparent 46 ESSI - 2 – 2004-05 - Paul Franchi

Les défauts d’ HTML => XHTML => CSS => XML => DOM 26/03/2017 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) => XHTML => CSS => XML => DOM 26/03/2017 Transparent 47 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

(X)HTML: savoir-faire basique 26/03/2017 (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 26/03/2017 Transparent 48 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

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:  source HTML évolutif et utilisable avec différents "rendus" (styles CSS) => XHTML Préférez les Standards du Web 26/03/2017 Transparent 49 ESSI - 2 – 2004-05 - Paul Franchi

HTML - Commentaires Conditionnels IE 26/03/2017 HTML - Commentaires Conditionnels 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 26/03/2017 Transparent 50 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

Chap II - HTML 5 HTML 5 HTML5 Slideshow "Responsible" Web development 26/03/2017 Chap II - HTML 5 HTML 5 HTML5 Slideshow "Responsible" Web development Objectif pédagogique Introduction aux documents hypertextes: langages de définition, manipulation et édition 26/03/2017 Transparent - 51 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

26/03/2017 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.[ 26/03/2017 Transparent 52 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

HTML 5 new features New content elements, like New form controls, like 26/03/2017 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  26/03/2017 Transparent 53 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

HTML 5 at a glance CANVAS VIDEO & AUDIO DRAG n DROP sur le Web 26/03/2017 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 26/03/2017 Transparent 54 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi

« Responsible » Web development 26/03/2017 « 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). 26/03/2017 Transparent 55 Langages & Documents ESSI - 2 – 2004-05 - Paul Franchi