Module 5: Web Evolution

Size: px

Start display at page:

Download "Module 5: Web Evolution"

Ada Stafford
5 years ago
Views:

1 Module 5: Web Evolution Carlos Delgado Kloos Dep. Ing. Telemática Universidad Carlos III de Madrid Web Technology Carlos Delgado Kloos Dep. Ing. Telemática Universidad Carlos III de Madrid Carlos Delgado Kloos, UC3M

2 Summary Web technology today AJAX Web technology tomorrow HTML5 MIIT 2009/10: GIMI 5: Web Evolution 3 AJAX Carlos Delgado Kloos Dep. Ing. Telemática Universidad Carlos III de Madrid Carlos Delgado Kloos, UC3M

What is AJAX? A hero from Greek mythology? A soccer club?

Asynchronous Javascript and XML MIIT 2009/10: GIMI 5: Web

JavaScript and DOM for interaction XMLHttpRequest for

3 What is AJAX? A hero from Greek mythology? A soccer club? A cleaning product? A web technology? Asynchronous Javascript and XML MIIT 2009/10: GIMI 5: Web Evolution 5 AJAX HTML and CSS for mark-up and style JavaScript and DOM for interaction XMLHttpRequest for asynchronicity XML or JSON for data MIIT 2009/10: GIMI 5: Web Evolution 6 Carlos Delgado Kloos, UC3M

Sites using AJAX maps.google.com (and many google apps) maps.live.com (and many MS apps) maps.yahoo.com (and many Yahoo! apps) www.flickr.

4 Sites using AJAX maps.google.com (and many google apps) maps.live.com (and many MS apps) maps.yahoo.com (and many Yahoo! apps) and many more MIIT 2009/10: GIMI 5: Web Evolution 7 Example MIIT 2009/10: GIMI 5: Web Evolution 8 Carlos Delgado Kloos, UC3M

5 Example MIIT 2009/10: GIMI 5: Web Evolution 9 Technologies in AJAX Source: MIIT 2009/10: GIMI 5: Web Evolution 10 Carlos Delgado Kloos, UC3M

1 (X)HTML HTML 2.0 Nov 1995 (IETF RFC 1866) HTML 3.2 HTML 4.0 HTML 4.01 14 Jan 1997 (W3C Rec) 24 Apr 1998 (W3C Rec) 24 Dec 1999 (W3C Rec) XHTML 1.

6 1 (X)HTML HTML 2.0 Nov 1995 (IETF RFC 1866) HTML 3.2 HTML 4.0 HTML Jan 1997 (W3C Rec) 24 Apr 1998 (W3C Rec) 24 Dec 1999 (W3C Rec) XHTML Jan 2000 (W3C Rec) XHTML 5 23 Apr 2009 (W3C WDraft) MIIT 2009/10: GIMI 5: Web Evolution 11 HTML for Mobiles MIIT 2009/10: GIMI 5: Web Evolution 12 Carlos Delgado Kloos, UC3M

7 SGML GML (Generalized Markup Language) propietary, IBM, 1960 s developed by Goldfarb, Mosher, and Lorie Standard Generalized Markup Language standard ISO 8879:1986 formed a trio with DSSSL (ISO 10179) ( XSLT and XSL/FO) and HyTime (ISO 10744) ( XLink) MIIT 2009/10: GIMI 5: Web Evolution 13 SGML Metalanguage for defining markup languages Editorial sector Rich, complex language Long manuals Slow parsers Was the basis to define HTML MIIT 2009/10: GIMI 5: Web Evolution 14 Carlos Delgado Kloos, UC3M

8 SGML vs XML MIIT 2009/10: GIMI 5: Web Evolution 15 What is XML? Language for the definition of markup languages Meta-language Simpler than SGML 80% of functionality, 20% of complexity XML defines a transfer syntax for tree-structured documents DTD (Document Type Definition): to define concrete markup languages 10 Feb 1998 (W3C Rec) XML Schema: newer version in XML notation 2 May 2001 (W3C Rec) MIIT 2009/10: GIMI 5: Web Evolution 16 Carlos Delgado Kloos, UC3M

promises to make the Web a whole lot smarter. -- Dan Connolly, W3C Architecture Domain "XML is ASCII for the 21st century. -- Henry S.

since ancient times has been a basic structure for all western knowledge.

9 2 What is XML? "XML by itself is just a simple text format; but together with all the ways it's being used to share structured information, it's a revolution that promises to make the Web a whole lot smarter. -- Dan Connolly, W3C Architecture Domain "XML is ASCII for the 21st century. -- Henry S. Thompson, U Edinburgh & W3C MIIT 2009/10: GIMI 5: Web Evolution 17 Structure: Hierarchy "The structure of concepts is formally called a hierarchy and since ancient times has been a basic structure for all western knowledge. Kingdoms, empires, churches, armies have all been structured into hierarchies. Tables of contents of reference material are so structured, mechanical assemblies, computer software, all scientific and technical knowledge is so structured..." -- Robert M. Pirsig: Zen and the Art of Motorcycle Maintenance MIIT 2009/10: GIMI 5: Web Evolution 18 Carlos Delgado Kloos, UC3M

10 XML for representing structure XML allows to represent hierarchical information The elements of the hierarchy are not predefined XML allows to define bracket languages (with brackets of multiple forms) { []() } MIIT 2009/10: GIMI 5: Web Evolution 19 Bad joke in HTML <html> <h1>good night</h1> <dl> <dt>basil <dd>say "Good night", Anton. <dt>anton <dd>"good night, Anton" </dl> <embed src="applause.mid"> </html> MIIT 2009/10: GIMI 5: Web Evolution 20 Carlos Delgado Kloos, UC3M

</anton> <applause/> <applause></applause> </joke> MIIT 2009/10: GIMI 5: Web Evolution 21 Boxes <?xml version="1.0"?

11 Bad joke in XML <?xml version="1.0"?> <joke name="goodnight"> <basil> Say <quote>good night</quote>, Anton </basil> <anton> <quote>good night, Anton</quote> </anton> <applause/> <applause></applause> </joke> MIIT 2009/10: GIMI 5: Web Evolution 21 Boxes <?xml version="1.0"?> <joke name="goodnight"> <basil> Say <quote>good night</quote>, Anton </basil> <anton> <quote>good night, Anton</quote> </anton> <applause/> </joke> MIIT 2009/10: GIMI 5: Web Evolution 22 Carlos Delgado Kloos, UC3M

12 Tree joke basil anton applause S a y quote, A n t o n quote g o h t G o o n MIIT 2009/10: GIMI 5: Web Evolution 23 Possible Uses XML: Data exchange XML+XSL: Publication XML+XSL+XLL: Browsing XML+XSL+XLL+script: Application MIIT 2009/10: GIMI 5: Web Evolution 24 Carlos Delgado Kloos, UC3M

13 Application Areas News Mathematics Banking Accounting Health Turism Human Workflow resources Commerce ERP Publicity Education Communication Insurances Law Chemistry Software Automotive MIIT 2009/10: GIMI 5: Web Evolution 25 Example: Prescription Fuente: R. Sokolowski MIIT 2009/10: GIMI 5: Web Evolution 26 Carlos Delgado Kloos, UC3M

14 Example: Prescription <?xml version="1.0"?> <!DOCTYPE RX SYSTEM "rx.dtd"> <rx> <patient.info><name>jane Doe</name></patient.info> <date>october 2, 1997</date> <prescription> <medname>amoxil</medname> <form>capsule</form> <dosage>25 mg</dosage> <frequency>daily</frequency> </prescription> <doctor.info> <name>dr. Henrietta Levelseven</name> <deanumber>bp </deanumber> </doctor.info> </rx> MIIT 2009/10: GIMI 5: Web Evolution 27 The Big Picture MIIT 2009/10: GIMI 5: Web Evolution 28 Carlos Delgado Kloos, UC3M

3 CSS Cascading Style Sheet Adds style information to HTML documents in a structured way www.w3.org/style/css www.csszengarden.

15 3 CSS Cascading Style Sheet Adds style information to HTML documents in a structured way MIIT 2009/10: GIMI 5: Web Evolution 29 CSS <html> <body> <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <p>text</p> </body> </html> body {background-color: white; color: black} h1, h2, h3, h4, h5 {color: red} h1, h2, h3 {background-color: yellow} MIIT 2009/10: GIMI 5: Web Evolution 30 Carlos Delgado Kloos, UC3M

16 CSS Levels Desktop browsers implement level 1, 2, or 3 CSS 1: fonts, margins, colors,... CSS 2: CSS1 + absolute position, automatic numbering, page breaks, right to left text, CSS 3: CSS2 + new selectors, fancy borders and backgrounds, vertical text, user interaction, speech, MIIT 2009/10: GIMI 5: Web Evolution 31 Status of CSS Levels CSS 1 17 Dec 1996 (W3C Rec) revised 11 Jan 1999 CSS Nov 2009 (W3C Cand Rec) replaces CSS 2: 12 May 1998, rev. 11 Apr 2008 CSS 3 under development MIIT 2009/10: GIMI 5: Web Evolution 32 Carlos Delgado Kloos, UC3M

17 CSS Profiles Other programs implement the appropriate profile CSS Mobile Profile 1.0: cell phones, PDAs CSS TV Profile 1.0: TV sets CSS Print Profile: low-cost printers (Draft) MIIT 2009/10: GIMI 5: Web Evolution 33 4 DOM DOM Document Object Model API to manipulate HTML or XML documents W3C Recommendation BOM Browser Object Model MIIT 2009/10: GIMI 5: Web Evolution 34 Carlos Delgado Kloos, UC3M

18 DOM DOM Level 2 Core Specification 13 Nov 2000 (W3C Rec) MIIT 2009/10: GIMI 5: Web Evolution 35 DOM: Example <table> <tbody> <tr> <td>shady Grove</td> <td>aeolian</td> </tr> <tr> <td>over the River, Charlie</td> <td>dorian</td> </tr> </tbody> </table> MIIT 2009/10: GIMI 5: Web Evolution 36 Carlos Delgado Kloos, UC3M

19 DOM Methods getnodetype getnodename getnodevalue and setnodevalue (value) getparentnode and setparentnode (parentnode) getchildnodes getfirstchild getlastchild getprevioussibling getnextsibling getattributes getownerdocument insertbefore (newchild, refchild) replacechild (newchild, oldchild) removechild (oldchild) appendchild (newchild) haschildnodes clonenode (deep) normalize getelementsbytagname (name [, recurse]) MIIT 2009/10: GIMI 5: Web Evolution 37 5 JavaScript Could be understood as an extension on HTML Allows to generate HTML pages on the fly depending on user input Interpreted language, object-based, event-driven Interpreted by the client (not the server) Initially developed by Netscape (original name: LiveScript) Later on standardised as ECMAScript MIIT 2009/10: GIMI 5: Web Evolution 38 Carlos Delgado Kloos, UC3M

20 Example <SCRIPT LANGUAGE="JavaScript >  </SCRIPT> Hora local: WedNov :16:18 GMT+0100 URL: file:///c:/documents%20and%20settings/cdk/ Mis%20documentos/curs /master/coru%c3%b1a/ 97coru%C3%B1a/mt19-3/javascript-ej.html Última modificación: 05/27/ :04:58 MIIT 2009/10: GIMI 5: Web Evolution 39 Versions Client-side JavaScript (Navigator JavaScript) LiveScript=JavaScript 1.0(Netscape Navigator 2.0) JavaScript 1.1 (Netscape Navigator 3.0) JavaScript 1.2 (Netscape Navigator 4.0) Server-side JavaScript (LiveWire JavaScript) Jscript (Microsoft Internet Explorer 3.0) MIIT 2009/10: GIMI 5: Web Evolution 40 Carlos Delgado Kloos, UC3M

21 Performance MIIT 2009/10: GIMI 5: Web Evolution 41 6 JSON JavaScript Object Notation A concise notation for defining objects and array in JavaScript but considered language independent Easier to evaluate with JavaScript than XML tools.ietf.org/html/rfc4627 MIIT 2009/10: GIMI 5: Web Evolution 42 Carlos Delgado Kloos, UC3M

22 JSON {"addressbook": { "name": "Mary Lebow, "address": { "street": "5 Main Street, "city": "San Diego, CA", "zip": }, "phonenumbers": [ " ", " " ] } } Object (collection of key/value pairs) Array (ordered list) MIIT 2009/10: GIMI 5: Web Evolution 43 XML <addressbook> <name>mary Lebow</name> <address> <street>5 Main Street</street> <city zip="91912">san Diego, CA</city> <phonenumbers> <phone> </phone> <phone> </phone> </phonenumbers> </address> </addressbook> MIIT 2009/10: GIMI 5: Web Evolution 44 Carlos Delgado Kloos, UC3M

23 YAML addressbook: name: Mary Lebow address: street: 5 Main Street city: San Diego, CA zip: phonenumbers: MIIT 2009/10: GIMI 5: Web Evolution 45 YAML YAML: YAML Ain't Markup Language Design goals: YAML is easily readable by humans YAML is portable between programming languages YAML matches the native data structures of agile languages YAML has a consistent model to support generic tools YAML supports one-pass processing YAML is expressive and extensible YAML is easy to implement and use MIIT 2009/10: GIMI 5: Web Evolution 46 Carlos Delgado Kloos, UC3M

24 7 XMLHttpRequest MIIT 2009/10: GIMI 5: Web Evolution 47 XMLHttpRequest MIIT 2009/10: GIMI 5: Web Evolution 48 Carlos Delgado Kloos, UC3M

XMLHttpRequest allows Partial update of page Periodic polling for new/changed data "Event"-driven interaction (instead

Bring resources form multiple servers/sites Your functionality + Someone else's data Someone else's functionality +

com/yui/ Set of utilities and controls, written with JavaScript and CSS, for building richly interactive web

25 XMLHttpRequest allows Partial update of page Periodic polling for new/changed data "Event"-driven interaction (instead of 'form submit'-driven) onclick, onmouseover, onsubmit, etc. Bring resources form multiple servers/sites Your functionality + Someone else's data Someone else's functionality + your data MIIT 2009/10: GIMI 5: Web Evolution 49 YUI Library Yahoo! User Interface Library developer.yahoo.com/yui/ Set of utilities and controls, written with JavaScript and CSS, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX Available under a BSD license and is free for all uses MIIT 2009/10: GIMI 5: Web Evolution 50 Carlos Delgado Kloos, UC3M

References www.librosweb.es/ajax ajaxian.com www.

org MIIT 2009/10: GIMI 5: Web Evolution 51 HTML5

26 References ajaxian.com MIIT 2009/10: GIMI 5: Web Evolution 51 HTML5 Carlos Delgado Kloos Dep. Ing. Telemática Universidad Carlos III de Madrid Carlos Delgado Kloos, UC3M

27 HTML 5 HTML 5 is the proposed next standard for HTML 4.01, XHTML 1.0 and DOM Level 2 HTML It aims to reduce the use of proprietary plug-in-based rich Internet application (RIA) technologies and include more semantic markup MIIT 2009/10: GIMI 5: Web Evolution 53 HTML 5 W3C Working Draft 23 April 2009 W3C Editor s Draft dev.w3.org/html5/spec/overview.html 26 July 2009 MIIT 2009/10: GIMI 5: Web Evolution 54 Carlos Delgado Kloos, UC3M

28 HTML and XHTML Both SGML-based HTML and XML-based XHTML provided MIIT 2009/10: GIMI 5: Web Evolution 55 HTML and XHTML MIIT 2009/10: GIMI 5: Web Evolution 56 Carlos Delgado Kloos, UC3M

29 New Features New inline text SVG and MathML New elements section, article, footer, audio, video, progress, nav, meter, time, aside, canvas New types of form controls dates and times, , url, search New attributes ping (on a and area), charset (on meta), async (on script) Global attributes (applicable for every element) id, tabindex, hidden, data-* (custom data attributes) MIIT 2009/10: GIMI 5: Web Evolution 57 New APIs 2D drawing API for canvas element API for video and audio elements Editing API for global contenteditable attribute Drag & drop API for draggable attribute API that enables offline Web applications API that allows a Web application to register itself for certain protocols or media types API that exposes the history Cross-document messaging MIIT 2009/10: GIMI 5: Web Evolution 58 Carlos Delgado Kloos, UC3M

30 Summary 1. Drawing: SVG and canvas 2. Multimedia: video and audio 3. Other new semantic elements Structural: section, article, header, footer, nav Block-level: aside, figure, dialog Inline: progress, mark, meter, time MIIT 2009/10: GIMI 5: Web Evolution Drawing Now several propietary formats Adobe Flash, Sun JavaFX, Microsoft Silverlight, VML Require plug-ins The new way SVG (predates HTML5) canvas MIIT 2009/10: GIMI 5: Web Evolution 60 Carlos Delgado Kloos, UC3M

Inline SVG <html xmlns="http://www.w3.org/1999/xhtml"> <!

31 Inline SVG <html xmlns=" <!DOCTYPE html> <title>svg in text/html</title> <p> A red circle: <svg> <circle r="50" cx="50" cy="50" fill="red"/> </svg> </p> MIIT 2009/10: GIMI 5: Web Evolution 61 Canvas <canvas width="50" height="50"> MIIT 2009/10: GIMI 5: Web Evolution 62 Carlos Delgado Kloos, UC3M

html MIIT 2009/10: GIMI 5: Web Evolution 63 Opera Widgets widgets.opera.

32 SVG and Canvas Demos downloadstats.mozilla.com htmlfive.appspot.com/static/draw.html htmlfive.appspot.com/static/gifter.html MIIT 2009/10: GIMI 5: Web Evolution 63 Opera Widgets widgets.opera.com widgets.opera.com/ author/benjamin%20joffe/ MIIT 2009/10: GIMI Carlos Delgado Kloos, UC3M : Web Evolution 64 32

SVG Web JavaScript library to support SVG code.google.com/p/ svgweb www.youtube.com/ watch?

DOCTYPE HTML> <html> <body> <video src="movie.

33 SVG Web JavaScript library to support SVG code.google.com/p/ svgweb watch?v=xck22aarxie MIIT 2009/10: GIMI 5: Web Evolution Multimedia: Video and Audio <!DOCTYPE HTML> <html> <body> <video src="movie.ogg" controls="controls"> Your browser does not support the video tag </video> <audio src="sound.ogg" controls="controls"> Your browser does not support the audio tag </audio> </body> </html> MIIT 2009/10: GIMI 5: Web Evolution 66 Carlos Delgado Kloos, UC3M

34 Video <!DOCTYPE HTML> <html> <body> <video controls> <source src="movie.ogg" type="video/ogg"> <source src="movie.mp4"> Your browser does not support the video tag </video> </body> </html> var v = document.getelementsbytagname("video")[0]; v.play() MIIT 2009/10: GIMI 5: Web Evolution 67 Video Demos htmlfive.appspot.com/static/video.html (Safari) MIIT 2009/10: GIMI 5: Web Evolution 68 Carlos Delgado Kloos, UC3M

35 3. Other Semantic Elements Structural elements section, header, footer, nav, article Block-level elements aside, figure, dialog Inline elements mark, time, meter, progress MIIT 2009/10: GIMI 5: Web Evolution 69 Structural Elements section: Anything that has its own heading in HTML 4 header: The page header shown on the page; not the same as the head element footer: The page footer where the fine print goes nav: A collection of links to other pages article: An independent entry in a blog, magazine, compendium MIIT 2009/10: GIMI 5: Web Evolution 70 Carlos Delgado Kloos, UC3M

36 Structural Elements MIIT 2009/10: GIMI 5: Web Evolution 71 Comparison HTML4 HTML5 <section> MIIT 2009/10: GIMI 5: Web Evolution 72 Carlos Delgado Kloos, UC3M

37 Block-Level Semantic Elements aside: text outside the main flow of the narrative (such as a note, tip, or sidebar) figure: block-level image with a caption dialog: conversation between people MIIT 2009/10: GIMI 5: Web Evolution 73 dialog <dialog> <dt>basil</dt> <dd>say "Good night", Anton</dd> <dt>anton</dt> <dd>"good night, Anton"</dd> </dialog> MIIT 2009/10: GIMI 5: Web Evolution 74 Carlos Delgado Kloos, UC3M

38 Inline Semantic Elements time: a moment in history meter: a numeric value in a specified range progress: state of an ongoing process mark: text marked for reference purposes MIIT 2009/10: GIMI 5: Web Evolution 75 time <p>i am writing this at <time>5:20pm on 6th December</time>. </p> <p>i am writing this at <time datetime=" t17:20:00"> 5:20pm on 6th December </time>. </p> MIIT 2009/10: GIMI 5: Web Evolution 76 Carlos Delgado Kloos, UC3M

39 meter <p>your score was <meter value="88.7" min="0" max="100" low="65" high="96" optimum="100"> B+ </meter> </p> MIIT 2009/10: GIMI 5: Web Evolution 77 Interactivity details: information not shown by default datagrid: menu, command: a menu contains commands for immediate action MIIT 2009/10: GIMI 5: Web Evolution 78 Carlos Delgado Kloos, UC3M

label="copy"/> <command onclick="paste()" label="paste"/> <command onclick="delete()" label="clear"/>

40 Menu, Command <menu type="popup" label="edit"> <command onclick="undo()" label="undo"/> <command onclick="redo()" <command onclick="cut()" <command onclick="copy()" label="redo"/> label="cut"/> label="copy"/> <command onclick="paste()" label="paste"/> <command onclick="delete()" label="clear"/> </menu> MIIT 2009/10: GIMI 5: Web Evolution 79 HTML5 Support MIIT 2009/10: GIMI 5: Web Evolution 80 Carlos Delgado Kloos, UC3M

41 References wiki.whatwg.org/wiki/faq html5gallery.com htmlfive.appspot.com diveintohtml5.org html5_reference.asp cashrevelations.com/magazine/ 2009/07/html-5-a-quick-overview/ MIIT 2009/10: GIMI 5: Web Evolution 81 References library/x-html5/?ca=dgr-lnxw01newhtml MIIT 2009/10: GIMI 5: Web Evolution 82 Carlos Delgado Kloos, UC3M

16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과

16. HTML5, HTML Graphics, & HTML Media 웹프로그래밍 2016 년 1 학기 충남대학교컴퓨터공학과 목차 HTML5 Introduction HTML5 Browser Support HTML5 Semantic Elements HTML5 Canvas HTML5 SVG HTML5 Multimedia 2 HTML5 Introduction What