La présentation est en train de télécharger. S'il vous plaît, attendez

La présentation est en train de télécharger. S'il vous plaît, attendez

SommaireLexique Langages & Documents Réfs Techs...... Paul Franchi SI 4 2013-14 13/01/2014 Transparent - 1 Chap I Documents Structurés Chap II - HTML "Hyper.

Présentations similaires


Présentation au sujet: "SommaireLexique Langages & Documents Réfs Techs...... Paul Franchi SI 4 2013-14 13/01/2014 Transparent - 1 Chap I Documents Structurés Chap II - HTML "Hyper."— Transcription de la présentation:

1 SommaireLexique Langages & Documents Réfs Techs Paul Franchi SI /01/2014 Transparent - 1 Chap I Documents Structurés Chap II - HTML "Hyper Text Markup Language" Chap II - HTML 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.

2 Sommaire Réfs Techs Lexique Sommaire du Cours Transparent 2 13/01/2014 n Chap I - Documents: Historique, Modèles, Standards et Références Chap I n Chap II - HTML: voir le cours CIP1-CMD & HTML5 Chap IIvoir le cours CIP1-CMD n Chap III - XML: "eXtensible Markup Language", les Bases Chap III n Chap IV - DTD: "Document Type Definition" Chap IV n Chap V - CSS: Feuilles de Styles en Cascades& CSS3 Chap V n Chap VI - DOM, DHTML: "Domain Object Model "& Programmation Dynamique en HTML & SPRY & JQuery Chap VI n Chap VII - XSD: Schémas XML Chap VII n Chap VIII - XML "Advanced" Processeurs et Dialectes: XPath, Xlink Chap VIII n Chap IX - XSLT: Transformations XML Chap IX n Chap X - RDF: "Resource Description Framework" Chap X n Chap IX - AJAX: "Asynchronous JavaScript And XML" Chap IX Savoir-Faire: Basic Advanced State of the ArtBasicAdvanced State of the Art Etat de l'Art: HTML5 CSS3 SPRY JQuery SVG MathML RDF AJAX HTML5CSS3 SPRYJQuerySVGMathML RDFAJAX

3 Browser compatibility Réfs Techs SommaireLexique Transparent 3 13/01/2014 n Web EPU courses (in French) Création & Manipulltion de Document Introduction to Internet Langages & Documents W3C tutorial : Mozilla Development Center W3C, Web Developer's Bookmarks XML Wiki Book _Managing_Data_Exchangehttp://en.wikibooks.org/wiki/XML_- _Managing_Data_Exchange n Biblio: many issues at EPU's lib Some References

4 Browser compatibility Réfs Techs SommaireLexique Transparent 4 13/01/2014 Documentation et Manuels n Documents du web liste de balises HTML code des couleurs RVB code HTML des caractères ISO liste des extensions de fichiers (formats) liste des extensions de fichiers (formats) Expressions Rationnelles n Manuels. Expressions régulières sous Emacs Recherche et remplacement sous Emacs compléments Emacs grep sous Unix

5 Browser compatibility Réfs Techs SommaireLexique Transparent 5 13/01/2014 Web Reference Browser de XML vers HTML5+CSS3 metadata.xml

6 Browser compatibility Réfs Techs SommaireLexique Transparent 6 13/01/2014 Doc Example Browser de XML vers HTML5+CSS3+JS metadata.xml

7 Browser compatibility Réfs Techs SommaireLexique Transparent 7 13/01/2014 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

8 SommaireLexique Langages & Documents Réfs Techs Paul Franchi SI /01/2014 Transparent - 8 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)

9 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 9 13/01/2014 n Powerful, but Hectic !! Information Processing (R)évolution?

10 " " Transparent 10 13/01/2014 Web based Applications: directly from the Client to Data Client Data Ressources n the Client and the Server can run on separate hardwares n the Client is the Master n the Client Application emits requests for Ressources directly to the Server n both Client and Server agree on a network communication protocol (http, ftp, url, uri, tcp/ip) n the Server software resolves the requests and send replies back to the Client n the request/reply process can be synchronous or asynchronous. n suited only for performance or security purpose n no generality n no flexibility n evolution made uneasy Application software Server

11 " " Transparent 11 13/01/2014 MVC (Model View Controller) Architecture Smalltalk, Xerox PARC, 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.handlercallback 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.

12 " " Transparent 12 13/01/ 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 applications 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.

13 " " C, Java, C++ Transparent 13 13/01/2014 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

14 " " Transparent 14 13/01/2014 function HTTP() { } HTTP() ; Côté "Client" Côté "Serveur" AJAX : schéma "HttpRequest / Response"

15 " " Transparent 15 13/01/ 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

16 " " Transparent 16 13/01/2014 n-Tier Architecture for Web light Client Presentation Layer Client Data Layer Application (Business) Layer Application (Business) Layers Server HTML CSS DHTML, JS AJAX XML XSL Data Bases C, Java, C++

17 " " Structure & Contrôle Transparent 17 13/01/2014 "en Vrac" Web Server Architecture Client Data Base Application (Business) Datas Style (Look) Server (X)HTML

18 " " Server Interface echo " " Transparent 18 13/01/2014 Overused PHP Architecture (détails) Application (Business) Datas Style (Look) mysql_connect(..) $req = mysql_query(..) while(..){ … } echo " " (X)HTML JS

19 " " Server Transparent 19 13/01/2014 RIA Architecture Rich Client Data Base Datas Style Structure XML, RDF CSS, XSL Networking Contrôle & Web Services JS, DOM SOAP, WSDL http, AJAX Applicatio n

20 " " Transparent 20 13/01/2014 "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

21 " " Transparent 21 13/01/2014 Web Techniques: "Grand Tour" n "Electronic" vs "Digital" vs "Structured" Documents n Document Models & Standards: SGML, ODA, DSSL, W3C n Languages & Tags: TeX, LaTeX, HTML, XML, XHTML n Layout (Style): CSS, XSL n Document Type & Tree Structure: DTD, XSD, DOM, SAX n Client side Scripting: JavaScript, JScript, VBScript n Server side Scripting: ASP, PHP n Dynamic Document: DHTML n Document Processing & Exchange: XSLT, XPath, XLink n XML Dialects: MathML, SVG, MusicML, MXML, GPX, GeoSciML, KML, n Metadata: RDF, Adobe XMP, Dublin Core, EXIF, TIFF, FGDC- Iso n Rich Interface Applications: Mozilla XUL, Adobe SPRY & FLEX, JavaFX n Networking: HttpRequest, Ajax, RPC, SOAP, RSS, XPConnect n IDE: FrontPage, DreamWeaver, Kompozer, Nvu, Office n Browser (Navigator): I.E, Firefox, Mozilla, Safari, Opéra, Google Chrome n Server Side Processors: EasyPhP, W(M)amp, Apache, Xalan, Saxon

22 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique 13/01/2014 Web Programming: Basic "Know Hows" n Basic Tagging: HTML & XHTML n Cascading Styling: HTML, XML & CSS n Dynamic Pages: DHTML & JS & DOM n XML.xml.css

23 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique 13/01/2014 Web Programming: Advanced "Know Hows" n XML Dialects: MathML, SVG n Document Definition: DTD, XSD n Dynamic Pages: DXML & JS & DOM & SVG n Networking: Http, AjaxHttp, Ajax n XML Processing: XSLT, XPath, XLink.xsl.dtd.xsd.dtd XML rdf XML rdf

24 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique 13/01/2014 Web Programming: "State of the Art" n CSS3: Onglets, transform, etc. CSS3: n HTML 5: canvas, dragNdrop, etc. HTML 5: n AJAX/PHP/SQL n Dynamic XML using XSL/JS n XML as metadata: RDF, SPRY, XULRDFSPRYXUL

25 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 25 13/01/2014 n Web EPU courses (in French) Création & Manipulltion de Document Introduction to Internet Langages & Documents W3C tutorial : Mozilla Development Center W3C, Web Developer's Bookmarks n Biblio: many issues at EPU's lib Some Références

26 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 26 13/01/2014 Documentation et Manuels n Documents du web liste de balises HTML code des couleurs RVB code HTML des caractères ISO liste des extensions de fichiers (formats) liste des extensions de fichiers (formats) Expressions Rationnelles n Manuels. Expressions régulières sous Emacs Expressions régulières sous Emacs Recherche et remplacement sous Emacs Recherche et remplacement sous Emacs compléments Emacs grep sous Unix Tutoriaux du Web W3C : CSS Play : Zen Garden : francais/ francais/ CSS in10 steps : cast/html- training/css/positioning/ cast/html- training/css/positioning/ 10 steps to better CSS: ps_to_better_css/ ps_to_better_css/

27 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 27 13/01/2014 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

28 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 28 13/01/2014 Historique et Standards n GML – Generalized Markup Language IBM, 1960s 3 initiales des inventeurs n SGML - Standard Generalized Markup Language norme ANSI, 1983 norme ISO, 1986 n HTML – HyperText Markup Language CERN, début 1990s n 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

29 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 29 13/01/2014 Terminologie de linformation n Ressource Un service dinformation: serveur Normes ISO, numéros ISBN, URL, etc n Entité Un exemplaire physique Un livre imprimé, un fichier, etc. n Référence Accès à une entité Lien hypertexte n Document Oeuvre logique Réalisable sous plusieurs formes physiques Version « source » lisible par lhomme: Version « source » formatées: HTML, XML, TeX Version pour impression:.ps,.pdf,.dvi

30 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 30 13/01/2014 " Document Processing": analyse des besoins n Impression n Visualisation n Conception & Edition n Echange & Conversion n Analyse Lexicale, Syntaxique et Sémantique n Transformation & Traduction n Collaboration et Partage n Navigation & Recherche n Base Documentaire n Interprétation & Evaluation

31 " " Transparent 31 13/01/2014 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

32 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 32 13/01/2014 Traitement dun document: lapproche arborescente n Structure logique ("inductive") Une arborescence enracinée des composants DTD, DOM, XML-schémas n 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) n Un format de Présentation (sortie, "rendu").ps,.dvi, etc Visualisation.pdf etc.

33 " " Transparent 33 13/01/2014 Un modèle de lettre: (exemplaire) M. Martin Société S SA Le 4/11/2002 à M. DURAND Société R. Dpt Informatique Ref: MM25 Objet: à voir Monsieur, Jai lhonneur de porter à votre attention 1.le premier point aaaaaaaaaaaaaa bbbbbbb 2.le deuxième 3.etc. Sincères salutations, M. X

34 " " Transparent 34 13/01/2014 Un modèle de lettre: structure logique arborescente M. Martin Société S SA Le 4/11/2002 à M. DURAND Société R. Dpt Informatique Ref: MM25 Objet: à voir Monsieur, Jai lhonneur de porter à votre attention 1.le premier point aaaaaaaaaaaaaa bbbbbbb 2.le deuxième 3.etc. Sincères salutations, M. X

35 " " Transparent 35 13/01/2014 Un modèle de lettre: une structure logique générique ? * * ? ? ? ? Méta-opérateurs réguliers ? + *

36 " " Transparent 36 13/01/2014 Lettre: structure arborescente de format ("layout") M. Martin Société S SA Le 4/11/2002 à M. DURAND Société R.Dpt Informatique Ref: MM25 Objet: à voir Monsieur, Jai lhonneur de porter à votre attention 1.le premier point aaaaaaaaaaaaaa bbbbbbb 2.le deuxième 3.etc. Sincères salutations, M. X

37 " " Transparent 37 13/01/2014 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 ? * * * ? ? ? ?

38 SommaireLexique Langages & Documents Réfs Techs Paul Franchi SI /01/2014 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 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

39 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 39 13/01/2014 HTML - La Génèse n : CERN SGML et Hyperliens - HTML 1.0 Tim Berners-Lee et Dan Connally n 1993 : MOSAIC img et form - HTML 1.0 n 1994 : NETCAPE CSS et DOM n : Web : HTML :HTML 3.2. et 4.0 n : XHTML abandon de XHTML 2.0 n 2011: HTML 5.0

40 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 40 13/01/2014 HTML - Hyper Text Markup Language n On le texte «source» avec un ensemble fini de balises « markup tags » n le formatage initial du texte source donne un ordre logique entre les éléments de texte, mais aucune indication despacement (lignes, espaces ou tabulations) n Les balises HTML jouent un double rôle: structuration logique du document format de présentation (« layout ») n Le principe de formatage est celui des boites rectangulaires arborescentes mais le parenthesage nest pas vérifié

41 " " Transparent 41 13/01/2014 M. Martin Société S. Avenue A SA Le 4/11/2002 à M. DURAND Société R. Dpt Informatique Ref: MM25 Objet: à voir Monsieur, Jai lhonneur de porter à votre attention le premier point aaaaaaaaaaaaaa bbbbbbb le deuxième etc. Sincères salutations, M. X Une lettre en HTML (version simpliste)

42 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 42 13/01/2014 Survol dHTML (version 4.01) n Balisage une balise sécrit avec 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) n Attributs de balises une balise peut comporter 0 ou plusieurs paires attribut = "valeur" sans ou avec (préférer) quotes doubles " " ou simples ' '

43 " " Transparent 43 13/01/2014 Titre de la page dans le navigateur HTML - source type (version simpliste)

44 " " Transparent 44 13/01/2014 XHTML - source type (version simpliste) Titre de la page dans le navigateur

45 " " Transparent 45 13/01/2014 Balisage, Indentation, & Parenthèses Titre de la page... ( ( ) ) ( (... ) ( ( ( ) ) )

46 " " Transparent 46 13/01/2014 Balisage & Arborescence Titre de la page...

47 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 47 13/01/2014 Les défauts d HTML n Beaucoup de versions pas toujours compatibles avec des interprétations dépendantes des navigateurs n La structure logique nest pas prise en compte n Pas de structure logique générique n Le balisage nest pas strictement arborescent n Pas de formatage générique n Lévaluation du formatage est strictement lié au texte n Pas de séparation style-formatage n Le balisage mélange le formatage et le style au contenu du texte n Lensemble des balises est clos (aucune extension)

48 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 48 13/01/2014 (X)HTML: savoir-faire basique n Styles n Textes n Images avec mapping n Liens et Ancres n Listes n Tables n Layers n Frames n Iframes n Forms & Input n "débaliser" un source HTML n 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 n sur le Web W3Schools - HTML Tutorial Learn on HTML.net Dave's Interactive HTML Tutorial Utexas Html Tutorial

49 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 49 13/01/2014 Quelques règles d'écriture pour un "meilleur" (X)HTML n respecter la validation syntaxique XHTML : balisage fermé, bien parenthésé usage des "" nom de balise en minuscule n associer le balisage à la structure logique utiliser et utiliser les attributs "id" et "class" n éviter les styles "internes": avec des balises: avec des attributs : align width n préférer les styles CSS, notamment en feuilles externes n formater avec CSS saut de ligne: pas de, éviter, utiliser display: espace, tabulations: éviter, utiliser padding: et margin: placement: pas de, utiliser display: float: position: Préférez les Standards du Web

50 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 50 13/01/2014 n Syntaxe d'un commentaire conditionnel positif: HTML ou XHTML ou CSS ou Script n Syntaxe d'un commentaire conditionnel négatif: HTML version non valide pour XHTML et XML n 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. n Très utile pour adapter les styles CSS aux versions IE HTML - Commentaires Conditionnels IE

51 SommaireLexique Langages & Documents Réfs Techs Paul Franchi SI /01/2014 Transparent - 51 Chap II - HTML 5 HTML 5 HTML5 Slideshow "Responsible" Web development HTML 5 HTML5 Slideshow "Responsible" Web development

52 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 52 13/01/2014 What is HTML 5 ? n HTML 5 The new standard for HTML, XHTML, and the HTML DOM.. HTML 5 still a work in progress..HTML 5 n 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 WHATWGs HTML5 as the starting point of its work and name its future deliverable "HTML5".[5]HTML5 On 9 May 2007, the new HTML working group resolved to do that.[[

53 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 53 13/01/2014 HTML 5 new features n New content elements, like article, footer, header, nav, section n New form controls, like calendar, date, time, , url, search n New elements for video and audio media n The canvas element for drawing n Web Applications: persistent Storage (localStorage vs sessionStorage) Web Workers (asynchronous computations in JS) WHATWG client-side session File & DOM drag n drop API

54 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 54 13/01/2014 HTML 5 at a glance n CANVAS n VIDEO & AUDIO n DRAG n DROP n sur le Web HTML 5 Slides Presentation HTML 5 Slides Presentation HTML 5 demos MDC Canvas Tutorial SVG or Canvas Drag n Drop in FF 3.5

55 Sommaire Réfs Techs Using the standards for Web light Client Using the standards for Web light Client What is HTML 5 ? Web Programming: Advanced "Know Hows" Web Programming: Advanced "Know Hows" XHTML - source type (version simpliste) XHTML - source type (version simpliste) " Document Processing": analyse des besoins " Document Processing": analyse des besoins HTML - Génèse HTML 5 new features Web Techniques: "Grand Tour" Web Techniques: "Grand Tour" Quelques règles d'écriture pour un "meilleur" (X)HTML Quelques règles d'écriture pour un "meilleur" (X)HTML (X)HTML: savoir-faire HTML 5 at a glance " " Lexique Transparent 55 13/01/2014 « Responsible » Web development n jquery.js jquery.js n modernizr.js modernizr.js detects browser features n normalize.css normalize.css CSS resets for modern standards (HTML5) n LESS LESS extends CSS with dynamic behavior. n selectivizr.js selectivizr.js CSS adaptation for IE n Yeoman, ANGULARJS, Bootstrap/ Yeoman ANGULARJSBootstrap/ n responsibleSlider.js responsibleSlider.js n Joomla, Wordpress JoomlaWordpress 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).


Télécharger ppt "SommaireLexique Langages & Documents Réfs Techs...... Paul Franchi SI 4 2013-14 13/01/2014 Transparent - 1 Chap I Documents Structurés Chap II - HTML "Hyper."

Présentations similaires


Annonces Google