Basic html5 and javascript

Click here to load reader

  • date post

  • Category


  • view

  • download


Embed Size (px)



Transcript of Basic html5 and javascript

  • 1. Web & Mobile DeveloperTowers Watson Inc.

2. 2 3. What is HTML5 Features Adoption Is HTML5 ready Now? Changes from previous HTMLs Whats added Whats deprecated Exercise3 4. HTML5 is is a language for structuring and presentingcontent for the World Wide Web, a core technology ofthe Internet. It is the fifth revision of the HTML standard(originally created in 1990 and most recentlystandardized as HTML4 in 1997[1]) and as of August2011[update] is still under development. Its core aimshave been to improve the language with support for thelatest multimedia while keeping it easily readable byhumans and consistently understood by computers anddevices (web browsers, parsers etc.). HTML5 isintended to subsume not only HTML4, but XHTML1 andDOM2HTML (particularly JavaScript) as well.4 5. The biggest names in the Industry Disney Research In Motion Google Apple Microsoft5 6. Yes and No.HTML5 is now ready for use by developersprovided they use fallbacks since thespecification for HTML5 is not yet finalized.According to the W3C, HTML5 is still inDraft. So expect changes to happenanytime. The expected completion is 2022or later. Although many parts of thespecifications are already stable and maybe implemented.6 7. Markup Forms Multimedia Graphics New APIs Graphics Media Playback GeoLocation Web Sockets Web Workers Error Handling7 8. Like any other evolving technologies. HTML5 alsodeprecates some outdated tags such as:basefontbigcenterAttributes:font aligns link, vlink, alink, and text attributes on the body tagstrike bgcolortt height and widthU scrolling on the iframe elementframe valignframeset hspace and vspace cellpadding, cellspacing, and border on tablenoframes8 9. - Defines a header region of a page orsection. - Defines a footer region of a page orsection. - Defines a navigation region of a page orsection. - Defines a logical region of a page ora grouping of content. - Defines an article or complete piece ofcontent. - Defines secondary or related content.9 10. New Input Tags10 11. 11 12. 12 13. 13 14. 14 15. 15 16. 16 17. 17 18. 18 19. Multimedia has become an integral part ofour internet usage thus, HTML5 addedsupport for both Video and Audio 19 20. Support for MP3, AAC, OGGDownloaddrums.mp320 21. Support for MP4, OGV, WebM format

Your browser does not support the videotag.

21 22. Supports creation of vector based graphicsthrough the use of javascriptyour browser does not support the canvas tag 22 23. 23 24. New DOM Selectors Audio and Video Using the Canvas Knowing your Location Web Sockets 25. No minimum system requirements Easier to code Faster execution/response Extends the ability The completeness of HTML5 26. getElementById() getElementsByTagName() getElementsByClassName() querySelector() querySelectorAll() 27. Wait, theres no light andtheres no flash! Hows ourparty? 28. Media Functions Play() Pause() Load() 29. Media Properties Volume Duration Muted Paused Loop 30. Events Play Pause Abort Ended Progress 31. Drawing in the canvas Preparing your workspace Creating a simple path beginPath(); lineTo(); moveTo(); Stroke(); 32. Drawing simples shapes Circle Arc(); Square fillRect(); 33. Web workers separate JS processes() running in separatethreads, executes concurrently, doesnt block the UI, allow you to extract up to the last drop ofjuice from a multicore CPU, can be dedicated (single tab) or sharedamong tabs/windows, 34. Workers1.jsMainProc.js Workers2.jsWorkers3.js 35. Put it to work new Worker(); onmessage(); postmessage(); 36. Using Geolocation Remember: Always ask for permission! I have no GPS! IPAddress WiFi Cellphone 37. Hey! Mr. Navigator coords.latitude coords.longitude getCurrentPosition() 38. Communicate in a whole new way TCP over the Web 2-way communication for the Internet Use a client browser that implements theWebSocket protocol. Write code in a webpage that creates a clientwebsocket. Write code on a web server that responds to aclient request through a websocket 39. Tuning in URL websocket() open(), onopen close(), onclose onmessage() postmessage() 40. Consider older browsers Detect Browser Detect Feature availability