An Overview of HTML5 and Deciding When to Use It. Robby Robson, Ph.D. & Heather L. Jones, MCT Eduworks

Transcription

1 An Overview of HTML5 and Deciding When to Use It Robby Robson, Ph.D. & Heather L. Jones, MCT Eduworks

2 Learning Objectives At the end of this tutorial, you should be able to Describe the problems that HTML5 solves for multimedia web content developers. Demonstrate an understanding of how HTML5 is being developed and adopted by industry. Describe the function and benefits of Canvas, SVG, WebGL, Local Storage and Cascading Style Sheets (CSS) 3 Compare and contrast the use of HTML5 and Flash for web development projects. List the platforms that support HTML5. List tools that support HTML5 development. Formulate a strategy for deciding when to use HTML5. 2

3 Outline 1. What is HTML5? 2. What Problems does HTML5 Address? 3. HTML5 as an Open Standard 4. DEMOS 5. Technical Overview of HTML5 6. Making the HTML5 Decision 7. HTML5 Tools and Resources 3

4 1. What is HTML5? HTML Hypertext Markup Language (not programming language) HTML5 is not official yet... But it is being used a lot in education, training and gaming <b>html</b> <strong>html</strong> This says make me bold. This says make me strong. This is the logo. Look for it on products 4

5 Why 5? HTML has evolved to meet new requirements and to exploit the increased capabilities of user devices Multimedia without plug-ins (such as Flash) Standardized graphics and 3D animation Consumer technologies such as mobile devices Rich internet content such as games, simulations and elearning Evolution of HTML Static text and images Forms Frames and CSS Usergenerated content Rich media 5

6 HTML5 Rollout 6

7 2. What Problems Does HTML5 Address? 7

8 Cross-Platform Compatibility Flash does not work on Apple devices But even if it did, it is proprietary! Too many options for 3D, Audio, and Video Those options are technology dependent The browser is becoming the operating system Browsers should be responsible for how video is played and graphics are rendered CAVEAT: NOT SUPPORTED BY IE7, LIMITED SUPPORT IN IE8 HTML5 is still a DRAFT 8

9 Better 3D Support and Scripting Full 3D support in an HTML environment 3D currently done with ActiveX objects or Flash HTML5 uses WebGL A derivative of OpenGL, which is widely accepted Like OpenGL in the browser AND NOT EVERYONE LOVES FLASH Getting data in and out of Flash is burdensome JavaScript and ActionScript are different Flash is power hungry (according to Steve Jobs) 9

10 Local Storage HTML5 enables mobile and web applications to securely store data on local machines in a database format Reduces network overhead Improves response time (data can be cached) Lowers server overhead (computation is local) GOOD FOR LEARNING CONTENT! Can store answers securely on local machine Can improve responsiveness 10

11 More Design Choices CSS3 and new tags add to design choices and improve consistency Using disparate technologies is a headache CSS3 provides one style for: Page content Interactive content Accessibility Navigation 11

12 3. HTML5 as an Open Standard 12

13 Why Standards? Almost Universal Competing Adoption Little Adoption Controlled by an organization Flash, MS Office SCORM, HD-DVD Controlled by an industry consortium AICC, Blu-ray Controlled through standards process HTML, WiFi, PDF (now) 4G standards Open Document Format Developed using open process Major stakeholders involved and committed Transparent maintenance and evolution Potential to become legal requirement The nice thing about standards is that there are so many from which to choose. 13

14 Who is developing HTML5 World Wide Web Consortium (W3C) Standards for Web Design, Web Architecture, Semantic Web, XML, Web Services, Web of Devices, Browsers The W3C mission is to lead the World Wide Web to its full potential by developing protocols and guidelines that ensure the long-term growth of the Web. Working Group Members include: Adobe, Apple, AT&T, Baidu, BBC, Boeing, Cisco, Comcast, DISA, Disney, Google, HP, Huawei, IBM, Intel, Microsoft, Motorola, Mozilla Foundation, Netflix, Nokia, Samsung, Zynga 14

15 Traction in the Marketplace 15

16 4. Demos Let s see what this HTML5 looks like! Note: Internet access may not be available for demos; please refer to CD for demo sites. d=263 nks.aspx /crystalgalaxy/ wjuei&feature=player_embedded 16

17 5. Technical Overview 17

18 CSS3 CSS3 is an extension of CSS2 Backwards compatible Improvements that make life easier (for developers) Border styling Columns Opacity New toys for cool effects Text Effects [Drop shadows] Media-Dependent CSS [Going Mobile? Then Use This!] Paged Media [Printing on transparencies? This is for you!] Accessibility [Speech module] User Interface (UI) modules [Text validation, Cursors] Cascading Style Sheets separate presentation from content and make it easy to control the behavior, look and feel of a page without changing what is on it! 18

19 Semantic Markup <h1>heather Jones</h1> tells a computer how to display Heather Jones <div typeof=" </div> <span property='name'> Heather Jones </span> tells a computer that Heather Jones is a person HTML5 includes semantic markup. 19

20 Graphics Canvas supports 2D image effects Draw lines, arcs, circles, custom shapes, text Fill with color, gradients, patterns Crop, rotate, add images, create animation Think of it as Photoshop-Extra-Lite in HTML Scalable Vector Graphics (SVG) for high quality 2D graphics Totally scalable images, defined by vectors, not pixels Used in printing industry and games WebGL for 3D graphics Heavy CPU/Graphics requirements What you need for games and simulations Renders models, textures, light sources, particles WebGL Population Globe 20

21 Audio and Video Audio has new tags Playback controls, volume Video has new tags Playback controls, autoplay, loop, muted Relief for Compatibility Wars! Firefox and Opera do not support MP3 IE9 does not support WAV IE9 and Safari do not support OGG Solved through multiple formats, from W3C: <audio controls="controls"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element. </audio> 21

22 Local Storage Key Value: Key Value Basic CRUD, that is, Create, Read, Update and Delete Great for simple data, settings, themes Persists between sessions (data does not disappear) SQL More complex queries (SELECT * FROM settings) More powerful search capabilities Used as the back-end of many applications Allows entirely client-based complex web applications 22

23 Other Features MathML 3.0 Web Servers in your browser Drag & Drop compatibility for files, other objects Touch Events Geolocation Media Capture (recording video, audio) Many more... 23

24 Browser Compatibility Not supported by IE6 or IE7 Partial support by IE8 No SQL Storage Cross Document Messaging Can use technologies such as Modernizr to bridge the gap ( 24

25 6. Making the HTML5 Decision 25

26 HTML5 Decision Rubric Do your required browsers support HTML5? Show Stopper? (no) (yes) Must your content run on Apple devices, like ipads? (no) (yes) Is HTML5 output produced by your current development environment? (no) (yes) Can you accept risks associated with evolving tool sets? (no) (yes) Does HTML5 support your interactivity requirements? (no) (yes) Must your content be future proof? (no) (yes) Higher Score = More biased towards HTML5 26

27 Technical Compatibility What are your target browsers (lowest versions)? The more common and trending versions are in bold. Internet Explorer other: Firefox other: Chrome other: Safari other: Opera other: ios Safari other: Android Browser other: Feature Must Want Browser Support Audio No plug-ins required Video No plug-ins required CSS3 Fancy styles made easy Web Fonts Desktop: IE9, FF3.6, Ch17, Sa5, Op11.6 Mobile: ios4, An2.3 Desktop: IE9, FF3.6, Ch17, Sa5, Op11.6 Mobile: ios3.2, Op11, An2.3 Desktop: IE9, FF8, Ch17, Op11.6 Mobile: ios4, Op11, An2.2 Desktop: IE9,FF3.6,Ch17,Sa5, Op11.6 Mobile: ios4.2, Op10, An4 Details in Handout available from I/ITSEC Site 27

28 Development Environments Support for HTML5 Adobe Captivate NO Adobe provides a beta tool to convert Captivate 5.5 to HTML, but not all features are supported. Adobe Dreamweaver YES Supports HTML5 but requires code editing Adobe Edge Adobe Flash Articulate Presenter Articulate Storyline Trivantis Lectora Zebra Zapps YES Adobe s HTML5 replacement for Flash, but still in development. NO Flash output can be embedded in HTML5 but this will defeat much of the purpose NO Outputs Flash. Can import into Storyline. ( =st1&id=catmp4tjk9r8) YES Storyline outputs HTML5. YES Lectora is early supporter of HTML5 NO Planned (according to product development team) Details in Handout available from I/ITSEC Site 28

29 6. Tools & Resources 29

30 Authoring Tools The Usual Suspects Dreamweaver Text Editors Desktop Applications Adobe Edge Articulate Storyline Trivantis Lectora Luminosity Web Applications IBM Maqetta Mercury Editor elearning Web Apps Dominknow Claro Udutu LCMS KeneXa (formerly OutStart) Xyleme ROCCE Learn exact 30

31 Adobe Edge Best for Animation & Design Games Highlights Free (for now) Produces clean, editable code Flash replacement Difficulty Level Similar to Flash Cautions Product is still in development 31

32 Comparison of Dreamweaver & Edge Product Sample use cases Supported technologies Adobe Edge Adobe Dreamweaver Motion and interaction design for new compositions or using existing CSS-based page layouts, content rotators, simple games, advertising Websites and web applications for desktops, smartphones, and other devices HTML/HTML5, JavaScript, CSS/CSS3, JSON, web graphics including SVG, jquerybased animation framework HTML/HTML5, CSS, JavaScript, jquery, PHP, PhoneGap, site management, FTP, CMS frameworks, SVN (Subversion) 32

33 Trivantis Lectora Best for Training Courses Rapid Development Highlights Many templates Contextual help Flexible; can create complex interactions Difficulty Level Medium-High Cautions Price Windows-only 33

34 Dominknow Claro Best for Mobile Development Web- and Cloudbased Development Highlights Online collaboration Monitor content development Rich feature set Difficulty Level Medium Cautions Online-only 34

35 8. Summary HTML5 adds new functionality to HTML New styles and graphics Solves multimedia compatibility issues Semantic markup Local storage HTML5 is a draft standard Widely supported, but not on IE7 and IE8 Still evolving (caveat emptor!) Lots of traction in elearning community There are many HTML5 tools Raw HTML5 editors Web and cloud authoring tools elearning authoring tools Evaluate requirements before using HTML5 Flash is still a viable option for many applications 35

36 Bibliography

37 Contact Information Heather Jones: Robby Robson: 37