1 / 55

30/08/2014

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.

giza
Download Presentation

30/08/2014

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mai 2013 • HTLM5 Storage, etc • Modernizr, Less, etc. Chap IDocuments 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" Chap II - HTML 5 30/08/2014 Transparent - 1

  2. 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: BasicAdvanced State of the Art Etat de l'Art: HTML5CSS3SPRYJQuerySVGMathMLRDFAJAX Sommaire du Cours 30/08/2014 Transparent 2

  3. 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 Bookmarkshttp://antriksh.com/resources/ XML Wiki Book http://en.wikibooks.org/wiki/XML_-_Managing_Data_Exchange Biblio: many issues at EPU's lib Some References 30/08/2014 Transparent 3

  4. 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 30/08/2014 Transparent 4

  5. Web Reference Browser metadata .xml de XML vers HTML5+CSS3 30/08/2014 Transparent 5

  6. Doc Example Browser metadata .xml de XML vers HTML5+CSS3+JS 30/08/2014 Transparent 6

  7. 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 – DynamicHTML 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 30/08/2014 Transparent 7

  8. Chap IDocuments Structurés Historique & Standards Architectures Web LexiqueRéférencesModèle de Documents (SGML) 30/08/2014 Transparent - 8

  9. Information Processing (R)évolution? Powerful, but Hectic !! HTML MathML SVG RDF RSS AJax RIA SPRY XUL CSS JavaScript 1985 1995 2005 PHP DOM ASP DHTML XML XHTML XPath- XPointer XLink XSD XSLT 30/08/2014 Transparent 9

  10. 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 30/08/2014 Transparent 10

  11. 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. 30/08/2014 Transparent 11

  12. 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. 30/08/2014 Transparent 12

  13. Using the standards for Web light Client Browser HTML CSS DHTML, JS AJAX 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 30/08/2014 Transparent 13

  14. AJAX : schéma "HttpRequest / Response" <html> <script type="text/javascript"> function HTTP() { } </script> <body> HTTP() ; </body> </html> Côté "Serveur" Synchrone=bloquant ou Asynchrone= non bloquant Côté "Client" 30/08/2014 Transparent 14

  15. 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 Data Bases Server 30/08/2014 Transparent 15

  16. n-Tier Architecture for Web light Client ApI HTML CSS DHTML, JS AJAX Client CGI Presentation Layer Servlet, JSP PHP, ASP XML XSL C, Java, C++ Application (Business) Layer Application (Business) Layer Application (Business) Layers ApI Hypertrophy Data Layer SQL Data Bases Apache Server 30/08/2014 Transparent 16

  17. "en Vrac" Web Server Architecture Structure & Contrôle Application (Business) Style (Look) Datas Client (X)HTML PHP, ASP the mess! SQL Apache Data Base Server 30/08/2014 Transparent 17

  18. Overused PHP Architecture (détails) Interface Style (Look) Application (Business) Datas Server echo "<div ..><script..>" (X)HTML JS echo "<br /><font ..>" while(..){ … } PHP, ASP mysql_connect(..) $req = mysql_query(..) SQL 30/08/2014 Transparent 18

  19. RIA Architecture Structure Style Application Application Application Datas Data Base Server Rich Client XML, RDF PHP, ASP Networking http, AJAX CSS, XSL Contrôle & Web Services ApI JS, DOM SOAP, WSDL ApI ApI ApI SQL ApI 30/08/2014 Transparent 19

  20. "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 30/08/2014 Transparent 20

  21. 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 30/08/2014 Transparent 21

  22. Web Programming: Basic "Know Hows" Basic Tagging: HTML & XHTML Cascading Styling: HTML, XML & CSS Dynamic Pages: DHTML & JS & DOM XML .css .xml 30/08/2014

  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 .dtd .dtd .xsd XML rdf .xsl XML rdf 30/08/2014

  24. 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 30/08/2014

  25. 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 30/08/2014 Transparent 25

  26. 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/ 30/08/2014 Transparent 26

  27. 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 – DynamicHTML 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 30/08/2014 Transparent 27

  28. 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 30/08/2014 Transparent 28

  29. 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 30/08/2014 Transparent 29

  30. " 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 30/08/2014 Transparent 30

  31. 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 30/08/2014 Transparent 31

  32. 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. 30/08/2014 Transparent 32

  33. 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 30/08/2014 Transparent 33

  34. 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 30/08/2014 Transparent 34

  35. Un modèle de lettre: une structure logique générique ? ? ? ? * ? * ==> DTD & XSD & XPATH Méta-opérateurs réguliers ? + * 30/08/2014 Transparent 35

  36. 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 30/08/2014 Transparent 36

  37. 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 30/08/2014 Transparent 37

  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 30/08/2014 Transparent - 38

  39. 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 30/08/2014 Transparent 39

  40. 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 30/08/2014 Transparent 40

  41. 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 > 30/08/2014 Transparent 41

  42. 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 ' ' 30/08/2014 Transparent 42

  43. HTML - source type (version simpliste) <html> <!-- commentaires bienvenus --> <head> <title> Titre de la page dans le navigateur </title> </head> <body > <!-- mettre ici le contenu balisé à afficher --> </body> </html> 30/08/2014 Transparent 43

  44. 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 30/08/2014 Transparent 44

  45. 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> ( ( ( ) ) ( ( ( ... ) ( ( ( ) ) ) ) ) ) 30/08/2014 Transparent 45

  46. 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> => DOM 30/08/2014 Transparent 46

  47. 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 30/08/2014 Transparent 47

  48. (X)HTML: savoir-faire basique 30/08/2014 Transparent 48 • 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

  49. 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:  source HTML évolutif et utilisable avec différents "rendus" (styles CSS) => XHTML Préférez les Standards du Web 30/08/2014 Transparent 49

  50. 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 30/08/2014 Transparent 50

More Related