HTML 5 - The Future is Now
•
1 like•235 views
A talk on HTML 5 by Robert "Bob" Reyes of Mozilla Philippines at the University of the East (UE) Manila on 22 Sep 2016 as part of the school's Foundation Week celebration.
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to HTML 5 - The Future is Now
Similar to HTML 5 - The Future is Now (20)
More from Robert 'Bob' Reyes
More from Robert 'Bob' Reyes (20)
Recently uploaded
Recently uploaded (20)
HTML 5 - The Future is Now
- 1. HTML5 The Future is Now Robert “Bob” Reyes 22 Sep 2016 #MozillaPH
- 2. About Me • Mozilla Representative to the PHL. • GM & CTO of TurfSite Web Services. • Tech News Columnist at the Manila Bulletin. • Hobby Blogger & Photographer. • Dad of Xeon & Haswell.
- 4. #MozillaPH
- 5. History of Mozilla On 23 Feb 1998, Netscape Communications Corp. created a project called Mozilla (Mosaic + Godzilla). Mozilla was launched 31 Mar 1998.
- 7. Mozilla’s Mission To ensure the Internet is a global public resource, open & accessible to all.
- 11. How to be part of MozillaPH?
- 12. Areas of Contribution ü Helping Users (Support) ü Testing & QA ü Coding ü Marketing ü Translation & Localization ü Web Development ü Firefox Marketplace ü Add-ons ü Visual Design ü Documentation & Writing ü Education http://join.mozillaph.org
- 16. #MozillaPH
- 17. Brief Background: World Wide Web
- 18. World Wide Web • Invented by Sir Tim Berners-Lee in 1989. • Born in London. • Both his parents were early computer scientists. • Foundation of today’s Web: • HTML • URI (or URL) • HTTP
- 19. What is the name of the very first webpage editor/browser written by Sir TBL?
- 21. What is the name of the very first web server created by Sir TBL?
- 22. Answer: httpd
- 29. Top 10 Reasons to Use HTML5 Right Now
- 31. Accessibility • Before, screen readers had no way to determine what a given <div> was even if you assigned it an ID or Class. • The new (some currently available) HTML headings like <header>, <footer>, <nav>, <section>, <aside>, etc. allow screen readers to easily access content. • With new semantic tags screen readers can better examine the HTML document & create a better experience for those who use them.
- 32. 9. Video & Audio Support
- 33. Video & Audio Support • Forget about Flash Player & third party media players. • Forget about <embed> & <object> tags & the huge list of parameters. • HTML5 has <video> & <audio> tags, which treat media as images. <video src=”url” width=”640px” height=”380px” autoplay/>
- 34. 8. Doctype
- 35. Doctype • No more cutting & pasting some long unreadable line of code • No more dirty head tags filled with doctype attributes. • You can simply & easily type it out & be happy. • Works in every browser clear back to the dreaded IE6.
- 36. Doctype In HTML4… <!DOCTYPE HTML PUBLIC "- //W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/str ict.dtd"> In HTML5… <!DOCTYPE html>
- 37. 7. Cleaner Code
- 38. Cleaner Code • HTML5 allows you to write clear & descriptive code, semantic code that allows you to easily separate meaning from style & content. • You may now use <header> <section> <article> <header> <footer> <aside> <nav> instead of <div id=“header”>
- 40. Smarter Storage • One of the coolest things about HTML5 is the new local storage feature. • A little bit of a cross between regular old cookies & a client-side database. • It’s better than cookies because it allows for storage across multiple windows, it has better security & performance & data will persist even after the browser is closed.
- 42. Better Interactions • We all want a more dynamic website that responds to the user & allows the user to enjoy/interact your content instead of just look at it. • The drawing HTML5 tag <canvas> allows you to do most (if not more) interactive & animated possibilities than the previous rich internet application platforms like Flash.
- 43. Better Interactions • Support for • Drag & Drop (DnD) • Offline Storage Database • Browser History Management • Document Editing • Timed Media Playback
- 44. HTML5 <canvas> Demo <!DOCTYPE HTML> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.rect(0, 0, canvas.width, canvas.height); // create radial gradient var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300); // light blue grd.addColorStop(0, '#8ED6FF'); // dark blue grd.addColorStop(1, '#004CB3'); context.fillStyle = grd; context.fill(); </script> </body> </html>
- 47. Game Development • You can develop games using HTML5’s <canvas> tag. • HTML5 provides a great, mobile friendly way to develop fun, interactive games. • If you’ve built Flash games before, you’ll love building HTML5 games.
- 48. Some stuff that we are working on … mozilla
- 50. #MozillaPH
- 52. Cross Browser Support • Popular modern browsers (Chrome, Firefox, Safari IE9 & Opera) all support HTML5. • The HTML5 doctype was created so that all browsers, even the really old (like IE6) can use it. • But even if old browsers recognize the doctype, it doesn’t mean they can use all the new HTML5 tags & goodies.
- 54. Mobile+ Technology • Mobile devices are taking over the world. • The adoption of mobile devices continues to grow very rapidly & this means that more & more users will be using their mobile browsers to view your web site or application. • HTML5 is the most mobile ready tool for developing mobile sites & apps.
- 56. 1. HTML5 is the Future
- 57. HTML5 is the Future • The number one reason why you should start using HTML5 today is this: it’s the future • Start using it now so you don’t get left behind. • HTML5 is not going anywhere & as more & more elements get adopted more & more companies will start to develop in HTML5.
- 59. MozVR • Bring high-performance Virtual Reality to the Open Web. • We have A-Frame! • A-Frame is an open-source WebVR framework for building virtual reality experiences with HTML. • Under the hood, it is a three.js framework that brings the entity- component-system pattern to the DOM.
- 60. References • http://www.randomhtmltags.tech • https://developer.mozilla.org • http://www.html5rocks.com
- 61. Thank you! Maraming salamat po! http://www.mozillaphilippines.org bob@mozillaph.org