DOCSLIB.ORG

Marakana HTML5 Training I

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Marakana HTML5 Training I Marakana HTML5 Training i Marakana HTML5 Training Marakana HTML5 Training ii Copyright © 2011 Marakana, Inc. All rights reserved. No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form, or by any means, electronic, mechanical, photocopying, recording, or otherwise, without the prior consent of Marakana Inc. We took every precaution in preparation of this material. However, the we assumes no responsibility for errors or omis- sions, or for damages that may result from the use of information, including software code, contained herein. Firefox® is a registered trademark of the Mozilla Foundation. Opera® is a registered trademark of Opera Software. Google Chrome™ is a trademark of Google Inc. Safari® is a registered trademark of Apple Inc., registered in the U.S. and other countries. Internet Explorer® is a registered trademark of Microsoft Corporation in the United States and/or other countries. All other names are used for identification purposes only and are trademarks of their respective owners. Marakana offers a whole range of training courses, both on public and private. For list of upcoming courses, visit http://marakana.com Marakana HTML5 Training iii Contents 1 History, Vision And Future Of HTML51 1.1 What Is HTML5?...............................................1 1.2 History And Major Actors..........................................1 1.2.1 A Little Retrospective........................................2 1.2.2 What Is The W3C?..........................................2 1.2.3 What Is The WHATWG?.......................................3 1.3 Vision And Philosophy Behind HTML5...................................3 1.3.1 Compatibility.............................................3 1.3.2 Utility.................................................4 1.3.3 Interoperability............................................4 1.3.4 Universal Access...........................................5 1.4 Future Of HTML5..............................................5 1.4.1 Timeline...............................................5 2 Getting Started With HTML5 6 2.1 The State Of Browser Support........................................6 2.1.1 Browsers In Mobile Devices.....................................6 2.1.2 Feature Detection...........................................7 2.2 Support For Legacy Browsers........................................8 2.2.1 Graceful Degradation.........................................9 2.2.2 Emulation...............................................9 2.3 Developer Tools................................................9 2.4 Quiz...................................................... 10 Marakana HTML5 Training iv 3 Structure Of A Web Page 11 3.1 HTML5 DOCTYPE.............................................. 11 3.2 Page Encoding................................................ 12 3.3 HTML5 Markup............................................... 12 3.3.1 New And Updated Elements..................................... 13 3.3.2 Structural Elements.......................................... 13 3.3.3 New Attributes............................................ 15 3.3.4 Deprecated Elements And Attributes................................. 16 3.4 HTML5 And CSS3.............................................. 16 3.5 Browser Support............................................... 17 3.6 Quiz...................................................... 17 3.7 Lab: Converting a blog to HTML5...................................... 19 4 Forms 23 4.1 What Are The Needs For Web Applications?................................ 23 4.2 Current Solutions............................................... 24 4.3 New Input Types............................................... 24 4.4 New Attributes................................................ 25 4.5 Form Validation................................................ 26 4.6 Browser Support............................................... 28 4.7 Quiz...................................................... 28 4.8 Lab: Creating the form for our site...................................... 28 5 Audio And Video 32 5.1 The State of Web Audio And Video Based On Plugins........................... 32 5.2 The State Of Audio And Video Codecs (e.g. H.264, WebM, etc.)...................... 32 5.2.1 Video/Audio Codecs And Browser Support............................. 33 5.3 New Audio/Video Markup.......................................... 34 5.4 Attributes And Methods........................................... 35 5.5 Understanding Audio/Video Events..................................... 35 5.6 Customizing Audio/Video Controls..................................... 35 5.7 Quiz...................................................... 36 5.8 Lab: Create a custom video player...................................... 36 Marakana HTML5 Training v 6 HTML5 Canvas 39 6.1 Overview Of Graphics In The Browser.................................... 39 6.1.1 Canvas Vs. SVG........................................... 39 6.1.2 Accessibility............................................. 40 6.2 Using A Canvas................................................ 40 6.3 Context And Coordinates........................................... 41 6.4 Drawing Shapes................................................ 41 6.5 Working With Paths.............................................. 42 6.5.1 Drawing Straight Lines........................................ 42 6.5.2 Drawing Circles Or Arcs....................................... 43 6.6 Drawing Text................................................. 44 6.7 Drawing Images................................................ 45 6.8 Working With Pixels............................................. 46 6.9 Understanding Transforms.......................................... 48 6.9.1 Translation.............................................. 49 6.9.2 Rotation................................................ 50 6.9.3 Scaling................................................ 51 6.10 Browser Support............................................... 52 6.11 Quiz...................................................... 52 6.12 Lab: Create a drawing application...................................... 52 7 Data Storage 55 7.1 Problems With The Existing Cookie-based Model.............................. 55 7.2 Hacks Prior To HTML5............................................ 55 7.3 New Storage Options............................................. 56 7.3.1 Web Storage............................................. 56 7.3.2 Browser Support........................................... 57 7.3.3 Web SQL Storage.......................................... 57 7.3.4 Browser Support........................................... 59 7.4 Quiz...................................................... 59 7.5 Lab: Playing with the localStorage ................................... 59 8 HTML5 Offline Applications 60 8.1 The Need For Offline Mode.......................................... 60 8.2 The Manifest File............................................... 60 8.3 The applicationCache Events......................................... 61 8.4 Deployments And Updates.......................................... 63 8.5 Browser Support............................................... 63 8.6 Quiz...................................................... 63 8.7 Lab: Putting an application offline...................................... 63 Marakana HTML5 Training vi 9 HTML5 Geolocation 68 9.1 Introduction To Geolocation......................................... 68 9.2 Privacy Considerations............................................ 68 9.3 Many Ways To Get User Location...................................... 69 9.4 Two Main Methods.............................................. 69 9.5 The Position Object.............................................. 70 9.6 Handling Errors................................................ 71 9.7 The PositionOptions Object.......................................... 72 9.8 Browser Support............................................... 72 9.9 Quiz...................................................... 72 9.10 Lab: Getting our location to display it on a map............................... 73 10 HTML5 Web Workers 74 10.1 The Current JavaScript Execution Model................................... 74 10.2 Introduction To Web Workers......................................... 74 10.3 Usage Of Web Workers............................................ 75 10.4 Communication APIs............................................. 75 10.5 Handling Errors................................................ 76 10.6 Browser Support............................................... 76 10.7 Quiz...................................................... 76 10.8 Lab: Create and see a worker in action.................................... 76 11 HTML5 Messaging APIs 78 11.1 Understanding the same origin policy.................................... 78 11.2 Workaround to the same origin policy.................................... 79 11.3 Cross-document messaging.......................................... 79 11.3.1 Sending a message.......................................... 79 11.3.2 Receiving a message......................................... 80 11.3.3 Browser support........................................... 80 11.4 XMLHttpRequest Level 2.......................................... 80 11.4.1 Making a request........................................... 80 11.4.2 Progress Event............................................ 81 11.4.3 Browser Support........................................... 82 Marakana HTML5 Training vii 12 Web Sockets 83
Load more

Recommended publications
  • Using Emergent Team Structure to Focus Collaboration
    Using Emergent Team Structure to Focus Collaboration by Shawn Minto B.Sc, The University of British Columbia, 2005 A THESIS SUBMITTED IN PARTIAL FULFILMENT OF THE REQUIREMENTS FOR THE DEGREE OF Master of Science The Faculty of Graduate Studies (Computer Science) The University Of British Columbia January 30, 2007 © Shawn Minto 2007 ii Abstract To build successful complex software systems, developers must collaborate with each other to solve issues. To facilitate this collaboration specialized tools are being integrated into development environments. Although these tools facilitate collaboration, they do not foster it. The problem is that the tools require the developers to maintain a list of other developers with whom they may wish to communicate. In any given situation, it is the developer who must determine who within this list has expertise for the specific situation. Unless the team is small and static, maintaining the knowledge about who is expert in particular parts of the system is difficult. As many organizations are beginning to use agile development and distributed software practices, which result in teams with dynamic membership, maintaining this knowledge is impossible. This thesis investigates whether emergent team structure can be used to support collaboration amongst software developers. The membership of an emergent team is determined from analysis of software artifacts. We first show that emergent teams exist within a particular open-source software project, the Eclipse integrated development environment. We then present a tool called Emergent Expertise Locator (EEL) that uses emergent team information to propose experts to a developer within their development environment as the developer works. We validated this approach to support collaboration by applying our ap• proach to historical data gathered from the Eclipse project, Firefox and Bugzilla and comparing the results to an existing heuristic for recommending experts that produces a list of experts based on the revision history of individual files.
    [Show full text]
  • Changing the Game: Monthly Technology Briefs
    the way we see it Changing the Game: Monthly Technology Briefs April 2011 Tablets and Smartphones: Levers of Disruptive Change Read the Capgemini Chief Technology Officers’ Blog at www.capgemini.com/ctoblog Public the way we see it Tablets and Smartphones: Levers of Disruptive Change All 2010 shipment reports tell the same story - of an incredible increase in the shipments of both Smartphones and Tablets, and of a corresponding slowdown in the conventional PC business. Smartphone sales exceeded even the most optimis- tic forecasts of experts, with a 74 percent increase from the previous year – around a battle between Apple and Google Android for supremacy at the expense of traditional leaders Nokia and RIM BlackBerry. It was the same story for Tablets with 17.4 million units sold in 2010 led by Apple, but once again with Google Android in hot pursuit. Analyst predictions for shipments suggest that the tablet market will continue its exponential growth curve to the extent that even the usually cautious Gartner think that by 2013 there will be as many Tablets in use in an enterprise as PCs with a profound impact on the IT environment. On February 7, as part of the Gartner ‘First Thing Monday’ series under the title ‘The Digital Natives are Restless, The impending Revolt against the IT Nanny State’ Gartner analyst Jim Shepherd stated; “I am regularly hearing middle managers and even senior executives complaining bit- terly about IT departments that are so focussed on the global rollout of some monolith- ic solution that they have no time for new and innovative technologies that could have an immediate impact on the business.
    [Show full text]
  • Effects and Opportunities of Native Code Extensions For
    Effects and Opportunities of Native Code Extensions for Computationally Demanding Web Applications DISSERTATION zur Erlangung des akademischen Grades Dr. Phil. im Fach Bibliotheks- und Informationswissenschaft eingereicht an der Philosophischen Fakultät I Humboldt-Universität zu Berlin von Dipl. Inform. Dennis Jarosch Präsident der Humboldt-Universität zu Berlin: Prof. Dr. Jan-Hendrik Olbertz Dekan der Philosophischen Fakultät I: Prof. Michael Seadle, Ph.D. Gutachter: 1. Prof. Dr. Robert Funk 2. Prof. Michael Seadle, Ph.D. eingereicht am: 28.10.2011 Tag der mündlichen Prüfung: 16.12.2011 Abstract The World Wide Web is amidst a transition from interactive websites to web applications. An increasing number of users perform their daily computing tasks entirely within the web browser — turning the Web into an important platform for application development. The Web as a platform, however, lacks the computational performance of native applications. This problem has motivated the inception of Microsoft Xax and Google Native Client (NaCl), two independent projects that fa- cilitate the development of native web applications. Native web applications allow the extension of conventional web applications with compiled native code, while maintaining operating system portability. This dissertation determines the bene- fits and drawbacks of native web applications. It also addresses the question how the performance of JavaScript web applications compares to that of native appli- cations and native web applications. Four application benchmarks are introduced that focus on different performance aspects: number crunching (serial and parallel), 3D graphics performance, and data processing. A performance analysis is under- taken in order to determine and compare the performance characteristics of native C applications, JavaScript web applications, and NaCl native web applications.
    [Show full text]
  • Pragmatic Guide to Javascript
    www.allitebooks.com What Readers Are Saying About Pragmatic Guide to J a v a S c r i p t I wish I had o w n e d this book when I first started out doing JavaScript! Prag- matic Guide to J a v a S c r i p t will take you a big step ahead in programming real-world JavaScript by showing you what is going on behind the scenes in popular JavaScript libraries and giving you no-nonsense advice and back- ground information on how to do the right thing. W i t h the condensed years of e x p e r i e n c e of one of the best JavaScript developers around, it’s a must- read with great reference to e v e r y d a y JavaScript tasks. Thomas Fuchs Creator of the script.aculo.us framework An impressive collection of v e r y practical tips and tricks for getting the most out of JavaScript in today’s browsers, with topics ranging from fundamen- tals such as form v a l i d a t i o n and JSON handling to application e x a m p l e s such as mashups and geolocation. I highly recommend this book for anyone wanting to be more productive with JavaScript in their web applications. Dylan Schiemann CEO at SitePen, cofounder of the Dojo T o o l k i t There are a number of JavaScript books on the market today, b u t most of them tend to focus on the new or inexperienced JavaScript programmer.
    [Show full text]
  • Consonant Characters and Inherent Vowels
    Global Design: Characters, Language, and More Richard Ishida W3C Internationalization Activity Lead Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 1 Getting more information W3C Internationalization Activity http://www.w3.org/International/ Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 2 Outline Character encoding: What's that all about? Characters: What do I need to do? Characters: Using escapes Language: Two types of declaration Language: The new language tag values Text size Navigating to localized pages Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 3 Character encoding Character encoding: What's that all about? Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 4 Character encoding The Enigma Photo by David Blaikie Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 5 Character encoding Berber 4,000 BC Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 6 Character encoding Tifinagh http://www.dailymotion.com/video/x1rh6m_tifinagh_creation Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 7 Character encoding Character set Character set ⴰ ⴱ ⴲ ⴳ ⴴ ⴵ ⴶ ⴷ ⴸ ⴹ ⴺ ⴻ ⴼ ⴽ ⴾ ⴿ ⵀ ⵁ ⵂ ⵃ ⵄ ⵅ ⵆ ⵇ ⵈ ⵉ ⵊ ⵋ ⵌ ⵍ ⵎ ⵏ ⵐ ⵑ ⵒ ⵓ ⵔ ⵕ ⵖ ⵗ ⵘ ⵙ ⵚ ⵛ ⵜ ⵝ ⵞ ⵟ ⵠ ⵢ ⵣ ⵤ ⵥ ⵯ Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 8 Character encoding Coded character set 0 1 2 3 0 1 Coded character set 2 3 4 5 6 7 8 9 33 (hexadecimal) A B 52 (decimal) C D E F Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 9 Character encoding Code pages ASCII Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 10 Character encoding Code pages ISO 8859-1 (Latin 1) Western Europe ç (E7) Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 11 Character encoding Code pages ISO 8859-7 Greek η (E7) Copyright © 2005 W3C (MIT, ERCIM, Keio) slide 12 Character encoding Double-byte characters Standard Country No.
    [Show full text]
  • Building Native Apps for BB10/Playbook for Ios Developers
    Building native apps for BB10/PlayBook for iOS developers Ranbijay Kumar & Prakash Sainani Developer Relations – Research In Motion BlackBerry 10 SDKs Java ActionScript C/C++ C++/Qt HTML5 BlackBerry ® Android ™ ™ Adobe ® AIR ® Native SDK Cascades WebWorks Runtime Architecture Native & HTML5 Apps Android Apps Adobe AIR Apps HTML/CSS Open GL Java Action Script Cascades QML JavaScript Open AL .apk .swf WebKit JavaScript C++ C/C++ Android Runtime AIR Runtime Platform APIs Qt C++ C/C++ Network Storage Audio/Video Graphics Push i18n … QNX Kernel BlackBerry 10 Foundations Platform APIs & Core PackagesApplications Android Native Web AIR Player Runtime Runtime Runtime Application BBM™ Application Payment Advertising Push Data Notification Phone Calendar Infrastructure Service Platform Invocation Share Analytics Contacts Messages Tasks … Configuration Cascades Search Config Balance Backup / Lifecycle Utilities i18n Instrument n … Restore System Service Authenticatio Navigator Installer Launcher Multimedia SQLite NFC n Window WebKit Protocols Network DRM Crypto … Manager OSOS Memory Process Power Device IPC File System … Management Management Management Drivers The Platforms iOS BB10 UIKit Cascades / QML Application Frameworks Webkit Application Frameworks [Maps, Message …] [Qt, Maps, PIM, Share …] Graphics and Audio Graphics and Audio Core Services Core Services (/BPS) iOS (Kernel) & Drivers Posix BB10 (QNX micro-kernel) & Drivers Types of Apps iOS BB10 Native Native (Objective C and Cocoa Touch (C/C++, QML, Cascades, UIKit , OpenGL) OpenGL) Web Apps Web Apps Native with Webview Native with Webview PhoneGap… WebWorks, PhoneGap… Native and Web Apps in BB10 C/C++ is used widely due to it’s portability. It’s a true cross-platform language (combined with POSIX) Enables Lots of BB10 Open Source Frameworks iOS can also run C/C++ apps (Objective-C++).
    [Show full text]
  • Introducing 2D Game Engine Development with Javascript
    CHAPTER 1 Introducing 2D Game Engine Development with JavaScript Video games are complex, interactive, multimedia software systems. These systems must, in real time, process player input, simulate the interactions of semi-autonomous objects, and generate high-fidelity graphics and audio outputs, all while trying to engage the players. Attempts at building video games can quickly be overwhelmed by the need to be well versed in software development as well as in how to create appealing player experiences. The first challenge can be alleviated with a software library, or game engine, that contains a coherent collection of utilities and objects designed specifically for developing video games. The player engagement goal is typically achieved through careful gameplay design and fine-tuning throughout the video game development process. This book is about the design and development of a game engine; it will focus on implementing and hiding the mundane operations and supporting complex simulations. Through the projects in this book, you will build a practical game engine for developing video games that are accessible across the Internet. A game engine relieves the game developers from simple routine tasks such as decoding specific key presses on the keyboard, designing complex algorithms for common operations such as mimicking shadows in a 2D world, and understanding nuances in implementations such as enforcing accuracy tolerance of a physics simulation. Commercial and well-established game engines such as Unity, Unreal Engine, and Panda3D present their systems through a graphical user interface (GUI). Not only does the friendly GUI simplify some of the tedious processes of game design such as creating and placing objects in a level, but more importantly, it ensures that these game engines are accessible to creative designers with diverse backgrounds who may find software development specifics distracting.
    [Show full text]
  • Bibliography of Erik Wilde
    dretbiblio dretbiblio Erik Wilde's Bibliography References [1] AFIPS Fall Joint Computer Conference, San Francisco, California, December 1968. [2] Seventeenth IEEE Conference on Computer Communication Networks, Washington, D.C., 1978. [3] ACM SIGACT-SIGMOD Symposium on Principles of Database Systems, Los Angeles, Cal- ifornia, March 1982. ACM Press. [4] First Conference on Computer-Supported Cooperative Work, 1986. [5] 1987 ACM Conference on Hypertext, Chapel Hill, North Carolina, November 1987. ACM Press. [6] 18th IEEE International Symposium on Fault-Tolerant Computing, Tokyo, Japan, 1988. IEEE Computer Society Press. [7] Conference on Computer-Supported Cooperative Work, Portland, Oregon, 1988. ACM Press. [8] Conference on Office Information Systems, Palo Alto, California, March 1988. [9] 1989 ACM Conference on Hypertext, Pittsburgh, Pennsylvania, November 1989. ACM Press. [10] UNIX | The Legend Evolves. Summer 1990 UKUUG Conference, Buntingford, UK, 1990. UKUUG. [11] Fourth ACM Symposium on User Interface Software and Technology, Hilton Head, South Carolina, November 1991. [12] GLOBECOM'91 Conference, Phoenix, Arizona, 1991. IEEE Computer Society Press. [13] IEEE INFOCOM '91 Conference on Computer Communications, Bal Harbour, Florida, 1991. IEEE Computer Society Press. [14] IEEE International Conference on Communications, Denver, Colorado, June 1991. [15] International Workshop on CSCW, Berlin, Germany, April 1991. [16] Third ACM Conference on Hypertext, San Antonio, Texas, December 1991. ACM Press. [17] 11th Symposium on Reliable Distributed Systems, Houston, Texas, 1992. IEEE Computer Society Press. [18] 3rd Joint European Networking Conference, Innsbruck, Austria, May 1992. [19] Fourth ACM Conference on Hypertext, Milano, Italy, November 1992. ACM Press. [20] GLOBECOM'92 Conference, Orlando, Florida, December 1992. IEEE Computer Society Press. http://github.com/dret/biblio (August 29, 2018) 1 dretbiblio [21] IEEE INFOCOM '92 Conference on Computer Communications, Florence, Italy, 1992.
    [Show full text]
  • CSS 2.1) Specification
    Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Editors Draft 26 February 2014 This version: http://www.w3.org/TR/2014/ED-CSS2-20140226 Latest version: http://www.w3.org/TR/CSS2 Previous versions: http://www.w3.org/TR/2011/REC-CSS2-20110607 http://www.w3.org/TR/2008/REC-CSS2-20080411/ Editors: Bert Bos <bert @w3.org> Tantek Çelik <tantek @cs.stanford.edu> Ian Hickson <ian @hixie.ch> Håkon Wium Lie <howcome @opera.com> Please refer to the errata for this document. This document is also available in these non-normative formats: plain text, gzip'ed tar file, zip file, gzip'ed PostScript, PDF. See also translations. Copyright © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability, trademark and document use rules apply. Abstract This specification defines Cascading Style Sheets, level 2 revision 1 (CSS 2.1). CSS 2.1 is a style sheet language that allows authors and users to attach style (e.g., fonts and spacing) to structured documents (e.g., HTML documents and XML applications). By separating the presentation style of documents from the content of documents, CSS 2.1 simplifies Web authoring and site maintenance. CSS 2.1 builds on CSS2 [CSS2] which builds on CSS1 [CSS1]. It supports media- specific style sheets so that authors may tailor the presentation of their documents to visual browsers, aural devices, printers, braille devices, handheld devices, etc. It also supports content positioning, table layout, features for internationalization and some properties related to user interface. CSS 2.1 corrects a few errors in CSS2 (the most important being a new definition of the height/width of absolutely positioned elements, more influence for HTML's "style" attribute and a new calculation of the 'clip' property), and adds a few highly requested features which have already been widely implemented.
    [Show full text]
  • SMIL) Boston Specification W3C Working Draft 3-August-1999
    next contents Synchronized Multimedia Integration Language (SMIL) Boston Specification W3C Working Draft 3-August-1999 This version: http://www.w3.org/1999/08/WD-smil-boston-19990803 Latest version: http://www.w3.org/TR/smil-boston Previous version: http://www.w3.org/AudioVideo/Group/smil-boston-19990723 (W3C members only) Editors: Jeff Ayars (RealNetworks), Aaron Cohen (Intel), Ken Day (Macromedia), Erik Hodge (RealNetworks), Philipp Hoschka (W3C), Rob Lanphier (RealNetworks), Nabil Layaïda (INRIA), Jacco van Ossenbruggen (CWI), Lloyd Rutledge (CWI), Bridie Saccocio (RealNetworks), Patrick Schmitz (Microsoft), Warner ten Kate (Philips), Ted Wugofski (Gateway), Jin Yu (Compaq) Copyright © 1999 W3C ® ( MIT, INRIA, Keio), All Rights Reserved. W3C liability, trademark, document use and software licensing rules apply. Abstract This document specifies the "Boston" version of the Synchronized Multimedia Integration Language (SMIL, pronounced "smile"). SMIL Boston has the following two design goals: ● Define a simple XML-based language that allows authors to write interactive multimedia presentations. Using SMIL Boston, an author can describe the temporal behavior of a multimedia presentation, associate hyperlinks with media objects and describe the layout of the presentation on a screen. ● Allow reusing of SMIL syntax and semantics in other XML-based languages, in particular those who need to represent timing and synchronization. For example, SMIL Boston components should be used for integrating timing into XHTML. Status of this document This section describes the status of this document at the time of its publication. Other documents may supersede this document. The latest status of this document series is maintained at the W3C. This document is the first working draft of the specification for the next version of SMIL code-named "Boston".
    [Show full text]
  • Next Media Deliverable Template
    WP 1 AND EREADING AND D 1.1.4.1 STATE-OF-THE-ART-STANDARDS Deliverable number 1.1.4.1 State-of-the art, html5-standard Author(s): Olli Nurmi Confidentiality: Public Date and status: 7.9.2011 - Status: Version 1.0 This work was supported by TEKES as part of the next Media programme of TIVIT (Finnish Strategic Centre for Science, Technology and Innovation in the field of ICT) Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011) Version history: Version Date State Author(s) OR Remarks (draft/ /update/ final) Editor/Contributors 0.9 30.6.2011 draft Olli Nurmi 1.0 1.9.2011 update Olli Nurmi 1.1 28.9.2011 final Olli Nurmi 1.2 4.10.2011 final Olli Nurmi Issues about Onix is removed to separate deliverable next Media www.nextmedia.fi www.tivit.fi WP 1 AND EREADING AND D 1.1.4.1 1 (12) STATE-OF-THE-ART-STANDARDS Next Media - a Tivit Programme Phase 2 (1.1-31.12.2011) Table of Contents 1 Introduction ............................................................................................................. 3 1.1 Web browsers ................................................................................................. 3 1.2 HTML5 – an open standard ............................................................................ 4 1.3 CSS - Cascading Style Sheets ....................................................................... 6 1.4 HTML5 vs native applications ......................................................................... 6 2 HTML5/CSS3 standards ........................................................................................
    [Show full text]
  • Document Object Model
    Document Object Model CITS3403: Agile Web Development Semester 1, 2021 Introduction • We’ve seen JavaScript core – provides a general scripting language – but why is it so useful for the web? • Client-side JavaScript adds collection of objects, methods and properties that allow scripts to interact with HTML documents dynamic documents client-side programming • This is done by bindings to the Document Object Model (DOM) – “The Document Object Model is a platform- and language-neutral interface that will allow programs and scripts to dynamically access and update the content, structure and style of documents.” – “The document can be further processed and the results of that processing can be incorporated back into the presented page.” • DOM specifications describe an abstract model of a document – API between HTML document and program – Interfaces describe methods and properties – Different languages will bind the interfaces to specific implementations – Data are represented as properties and operations as methods • https://www.w3schools.com/js/js_htmldom.asp The DOM Tree • DOM API describes a tree structure – reflects the hierarchy in the XTML document – example... <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <title> A simple document </title> </head> <body> <table> <tr> <th>Breakfast</th> <td>0</td> <td>1</td> </tr> <tr> <th>Lunch</th> <td>1</td> <td>0</td> </tr> </table> </body> </html> Execution Environment • The DOM tree also includes nodes for the execution environment in a browser • Window object represents the window displaying a document – All properties are visible to all scripts – Global variables are properties of the Window object • Document object represents the HTML document displayed – Accessed through document property of Window – Property arrays for forms, links, images, anchors, … • The Browser Object Model is sometimes used to refer to bindings to the browser, not specific to the current page (document) being rendered.
    [Show full text]