Fundamentals of Website Development CSC 2320, Fall 2015 The Department of Computer Science In this chapter History of HTML HTML 5-2- 1
The birth of HTML HTML Blows and standardization -3- -4-2
HTML 4.0 and 4.01and XHTML HTML in 1998 HTML in 1999 separation of structure and presentation and improving accessibility XML Why is needed? XHTML 1.0 Strict HTML 4.01 More works on XHTML XHTML 2.0 Not Backward-compatible Hard for Browser Implementation XHTML 2.0 -> stuck for 10 years XHTML -> HTML 5-5- -6-3
Hello HTML 5.0 In, 2004 WHATWG: Web Hypertext Application Technology Working Group real-world authoring practices and browser behavior W3C HTML5 Working Group Based on WHATWG Merge XHTML 2.0 to HTML5 HTML 4.01 legacy -7- -8-4
Meet the DTD DTD: Document Type Definition DTDs in HTML 4.01 Transitional DTD Strict DTD Frameset DTD E.g. www.w3.org/tr/html4/strict.dtd DTDs in XHTML 1.0 DOCTYPE declaration -9- -10-5
What do the pros do before HTML 5.0 Follow the XHTML 1.0 strict DTD No deprecated and presentational elements Use style sheets Validate the pages https://validator.w3.org What s new in HTML 5 A new DOCTYPE New elements and attributes Obsolete 4.01 elements APIs -11- -12-6
New DOCTYPE Read fun facts on page 185. HTML 4.01 -> HTML 5 No DTD needed Easy declaration Compared with the one in HTML 4.01 What should we use for now? HTML 4.01 DTD, XHTML 1.0 DTD and HTML 5 New Elements and Attributes New Elements On Page 197. W3Schools.com Semantic/ Structural, why not presentational? Semantic elements -13- -14-7
Semantic Elements When a layout becomes popular New Attributes New Form Input Attributes Meet the new attributes W3Schools New Global Attributes W3Schools What is the trend? More logical More functional High encapsulation -15- -16-8
Obsolete 4.01 elements From textbook page 189 APIs Multimedia API Session History API Drag and Drop API Web workers API Web socket API Others -17- -18-9
Add video and audio Add video: <video src= poster= controls> Controls: Autoplay Loop Muted Preload: auto, none, metadata What is the future browser The trend High isolation (Semantic, presentational, logical) High encapsulation Common use combinations like input date What is the future browser? A platform? An operation system? All-in-One software? -19- -20-10
HTML5 and Designing a Rich Internet Experience HTML5 HTML 5 + CSS 3 + JavaScript Rich Internet Applications (RIA) HTML5 x 5 Caution and Progress Example and Reference Sites -21- -22-11
HTML5 HTML 5 + CSS 3 + JavaScript HTML5 is a suite of tools for: Markup (HTML 5) Presentation (CSS 3) Interaction (DOM, Ajax, APIs) Brought on by the evolving use of the web A Rough History of Web Standards -24-91- 92 93-94 95-96 97-98 99-00 01-02 HTML 1 HTML 2 HTML 4 XHTML 1 CSS 1 CSS 2 T-less D JS ECMA, DOM 03-04 Web 2.0 05-06 07-08 09-10 HTML 5 CSS3 DOM 2 Ajax DOM, APIs 11-12 13-14 HTML 5 2004 WHATWG started 2008 W3C Working Draft 2012 (2010) W3C Candidate Rec 2022 W3C Rec CSS 1996 CSS 1 W3C Rec 1998 CSS 2 W3C Rec 1999 CSS 3 Proposed 2005 CSS 2.1 W3C Candidate Rec 2001 CSS 3 W3C Working Draft -23-12
Rich Internet Applications (RIA) Space between the internet and the desktop Apps that look good and behave well Adobe Air/Flash, Java, Silverlight, Gears Availability Anywhere a web browser is available As a desktop widget or application Part of a mobile application store RIA Examples -25- -26-13
5 HTML Enhancements HTML Forms CSS Offline applications Local storage HTML Extended Document Flow: div, section, article, nav, aside, header, footer Audio, Video and Embed Canvas: paths, gradients, image manipulation, events Microdata for semantics and enhanced search engine results (Google Rich Snippets) -27- -28-14
HTML Header Figure Asid e Navigation Section Article Footer Article Footer Article Footer Image, Video, Quote, Table, etc Footer Legend Canvas <canvas id= canvas width= 150 height= 150 > </canvas> function draw() { var canvas = document.getelementbyid( canvas ); if (canvas.getcontext) { var ctx = canvas.getcontext( 2d ); ctx.fillstyle = rgb(200,0,0) ; ctx.fillrect (10,10,55,50); } } ctx.fillstyle = rgb(0,0,200) ; ctx.fillrect (30,30,55,50); -29- -30-15
Form Enhancements Placeholder text Specific text input: email, URL, number, search Slider Date picker User Agent validation CSS Effects Rounded corners Gradients Box and text shadows Fonts Transparencies Multiple background images and border images Multiple columns and grid layout Box sizing Stroke and outlines Animation, movement and rotation Improved selectors -31- -32-16
CSS Effect Example.amazing { border: 1px solid blue; color: red; background-color: gold; Amazing CSS Effects -webkit-border-radius: 40px; -moz-border-radius: 40px; border-radius: 40px; -webkit-box-shadow: 8px 8px 6px #474747; -moz-box-shadow: 8px 8px 6px #474747; box-shadow: 8px 8px 6px #474747; text-shadow: 8px 8px 2px #595959; filter: dropshadow(color=#595959, offx=8, offy=8); } http://css3generator.com/ CSS Timelines http://mattbango.com/notebook/web-development/pure-css-timeline/ -33- -34-17
Programmer Tools Offline Applications Storage Communication Web Workers Web Sockets Desktop experience Drag and Drop Notifications Geolocation Offline Applications <html mainfest= http://m.health.unm.edu/someapp.manifest > </html> someapp.manifest CACHE MANIFEST #v1.01 #Explicitly cached files CACHE: index.html Stylesheet.css Images/logo.png NETWORK: Search.cfm Login.cfm /dynamicpages FALLBACK: /dynamicpage.cfm /static.html http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html -35- -36-18
Local Storage Beyond cookies- local storage Manipulated by JavaScript Persistent 5MB storage per origin Secure (no communication out of the browser) Session storage Lasts as long as the browser is open Each page and tab is a new session Browser based SQLite or IndexedDB Local Storage Web storage window.localstorage[ value ] = Save this! ; Session storage sessionstorage.uselater( fullname, Garth Colasurdo ); alert( Hello + sessionstorage.fullname); Database storage var database = opendatabase( Database Name, Database Version ); database.executesql( SELECT * FROM test, function(result1) { }); -37- -38- http://dev.w3.org/html5/webstorage/ 19
User Agent Storage Cautions Browser implementation is fragmented Standards are in development HTML Candidate Recommendation is scheduled for 2012 CSS3 is in multiple drafts and proposals ECMA-262 (edition 3) (or JavaScript 1.5) New markup and architecture design -39- -40-20
Progress Multiple support levels HTML editors CSS editors and frameworks JavaScript libraries and frameworks Astounding user agent development JavaScript engines Rendering engines Device awareness Widget adoption Robust vendor competition and cooperation Continue with progressive enhancement/graceful failure methods Homework Read Chapter 10 Try new input types in chapter 9-41- -42-21
Questions Thank You! Email: mhan@cs.gsu.edu -43-22