HTML 5 - The Future is Now

HTML5
The Future is Now
Robert “Bob” Reyes
22 Sep 2016
#MozillaPH

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.

History of Mozilla
On 23 Feb 1998,
Netscape Communications Corp.
created a project called
Mozilla (Mosaic + Godzilla).
Mozilla was launched 31 Mar 1998.

Mozilla’s Mission
To ensure the Internet
is a global public
resource, open &
accessible to all.

Firefox Student
Ambassadors (FSA)
http://fsa.mozillaphilippines.org

Internship
at Mozilla
https://careers.mozilla.org/university/

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

Join MozillaPH now!
http://join.mozillaph.org

Co-work from
MozSpaceMNL
http://mozspacemnl.org

Brief Background:
World Wide Web

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

What is the name of
the very first
webpage
editor/browser
written by Sir TBL?

What is the name of
the very first web
server created
by Sir TBL?

Top 10 Reasons
to Use HTML5
Right Now

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.

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/>

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.

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>

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”>

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.

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.

Better Interactions
• Support for
• Drag & Drop (DnD)
• Offline Storage Database
• Browser History Management
• Document Editing
• Timed Media Playback

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>

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.

Some stuff that we
are working on …
mozilla

3. Legacy/Cross
Browser Support

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.

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.

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.

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.

References
• http://www.randomhtmltags.tech
• https://developer.mozilla.org
• http://www.html5rocks.com

Thank you!
Maraming salamat po!
http://www.mozillaphilippines.org
bob@mozillaph.org

HTML 5 - The Future is Now

More Related Content

Viewers also liked

Similar to HTML 5 - The Future is Now

More from Robert 'Bob' Reyes

Recently uploaded

HTML 5 - The Future is Now