HTML5 - GTUG | studyslide.com

HTML5 - GTUG

Transcript HTML5 - GTUG

HTML5
Abinet Zelalem
HTML5
5 things you need to know
1
It’s not one big thing
2
You don’t need to throw anything away
3
It’s easy to get started
4
It’s here to stay
5
It already works
MIME TYPES
The web runs on MIME
• Every time your web browser requests a page, the web server
sends “headers” before it sends the actual page markup.
• The most important header is called Content-Type, and it looks like
this:
Content-Type: text/html
• “text/html” is called the “content type” or “ MIME type” of the page.
• If you don’t have header with your page the browsers do content
sniffing and determine the MIME type
Little bit of history
How HTML5 came about
•
•
•
•
•
•
•
Backwards compatibility, clear migration path
Well-defined error handling
Users should not be exposed to authoring errors
Practical use
Scripting is here to stay
Device-specific profiling should be avoided
Open process
Detect support for features
• When your browser renders a web page, it constructs a
Document Object Model ( DOM), a collection of objects
that represent the HTML elements on the page.
• In browsers that support HTML5 features, certain objects
will have unique properties.
Four basic techniques for detecting
HTML5 Features
1
2
Check if a certain property exists on a globalobject (such as window or navigator).
Create an element, then check if a certain property exists on that element.
3
Create an element, check if a certain method exists on that element, then call the method
and check the value it returns.
4
Create an element, set a property to a certain value, then check if the property has retained
its value.
5
Use Modernizr. Modernizr adds classes to the <html> element which allow you to target specific browser
functionality in your stylesheet. You don't actually need to write any Javascript to use it. (1.7)
HTML5 Elements
CANVAS
1
A
resolution-dependent
bitmap canvas that can be
used for rendering graphs,
game graphics, or other visual
images on the fly , uses the
(“the canvas API”)
Test - create a dummy canvas
and check the presence of
getContext() method, or use
modernizr
Even if your browser supports
the canvas API, it might not
support the canvas text API.
after creating the canvas
element test for fillText()
function existance by doing a
.getcontext('2d') on the canvas
element.
VIDEO
2
For embedding video in
your web pages, without
additional plugins
Browsers that don’t support
HTML5 video will ignore the
<video>
element
completely, but you can use
this to your advantage and
tell them to play video
through a third-party plugin
instead.
The unfortunate reality of
HTML5 video is that
browsers can’t agree on a
single codec.
So two types exist, one the
costs money, and open
source
LOCAL STORAGE
3
tThe concept is similar to
cookies, but it’s designed
for larger quantities of
information can access it
with JavaScript after the
page is loaded
Yes there are security holes
visible, but there is a sameorigion restriction
HTML5 Elements (Contd…)
WEB WORKERS
4
provide a standard way for
browsers to run JavaScript in
the background.
With web workers, you can
spawn multiple “threads” that
all run at the same time, more
or less.
These “background threads”
can do complex mathematical
calculations, make network
requests, or access local
storage while the main web
page responds to the user
scrolling, clicking, or typing.
OFFLINE WEB APPLICATIONS
5
an offline web application is
a list of URLs
HTML5 offline applications
will read the list of URLs
from the manifest file,
download the resources,
cache them locally, and
automatically keep the local
copies up to date as they
change.
There’s a flag in the DOM
that will tell you whether
you’re online or offline.
There are events that fire
when your offline status
changes
most of the work is up to
you, the web developer
GEOLOCATION
6
art of figuring out where you
are in the world and
(optionally) sharing that
information with people you
trust
Gears is an open source
browser plugin from Google
that works on Windows,
Mac,
Linux,
Windows
Mobile, and Android. It
provides features for older
browsers that do not
support all the fancy new
stuff
HTML5 Elements (Contd…)
INPUT TYPES
PLACEHOLDER TEXT
8
7
<input type=“?">
Search - for search boxes
Number - for spinboxes
Range - for sliders
Color - for color pickers
Tel - for telephone numbers
Url - for web addresses
Email - for email addresses
Date - for calendar date pickers
Month - for months
Week - for weeks
Time - for timestamps
Datetime - for precise, absolute
date+time stamps, datetimelocal for local dates and times
Placeholder
text
is
displayed inside the input
field as long as the field is
empty and not focused. As
soon you click on (or tab to)
the
input
field,
the
placeholder text disappears.
FORM AUTOFOCUS
9
The autofocus attribute
does exactly what it says on
the tin: it moves the focus to
a particular input field. But
because it’s just markup
instead of a script, the
behavior will be consistent
across all web sites. Also,
browser
vendors
(or
extension authors) can offer
users a way to disable the
autofocusing behavior.
HTML5 Elements (Contd…)
MICRODATA
10
a standardized way to
provide
additional
semantics in your web
pages.
Anyone can define a
microdata vocabulary and
start embedding custom
properties in their own
web pages.
Person with name and
photo property
Microdata is about
applying additional
semantics to data that’s
already visible on your
web page
Doctype
Triggers standards-based rendering in all browsers
Quirks Mode
Almost
Standards
Mode/limited
quirks mode.
Standards
Mode/no quirks
mode
In the irks mode, browsers violate contemporary Web format
specifications in order to avoid “breaking” pages authored
according to practices that were prevalent in the late 1990s.
Firefox, Safari, Chrome, Opera (since 7.5) and IE8 also have a mode known
as “Almost Standards mode,” that implements the vertical sizing of table cells
traditionally and not rigorously according to the CSS2 specification. HTML5
calls this mode the “limited quirks mode.”
In the Standards mode, browsers try to give conforming documents the
specification-wise correct treatment to the extent implemented in a particular
browser. HTML5 calls this mode the “no quirks mode.”
Doctype
Standard Mode
HTML4 or less
1
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Strict//EN”
"http://www.w3.org/TR/xhtml1/DTD/xhtml1
-strict.dtd">
HTML5
2
t<!DOCTYPE html>
Root node
<HTML>
HTML4
1
HTML5
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en“ xml:lang="en">
2
<html lang="en">
First child
<HEAD>
information about the page
links are two types in html5
Links to external resources
hyperlink links
Templates
Templates
1
<link rel="stylesheet"
type="text/css" />
2
href="style-original.css"
<link rel="stylesheet" href="style-original.css" />
new rel types have been introduced
rel="first" - first page in a series
rel="last"
rel="up" is to look at your breadcrumb
navigation
rel="prefetch"
rel="nofollow“ – introduced by google
New semantic elements
<section>
<nav>
generic document or application section
a section with navigation links.
<article>
a component of a page that consists of a self-contained composition in a document, page, application, or
site and that is intended to be independently distributable or reusable
<aside>
a section of a page that consists of content that is tangentially related to the content around
the aside element, and which could be considered separate from that content.
<hgroup>
to group a set of h1–h6 elements when the heading has multiple levels
<header>
a group of introductory or navigational aids.
<footer>
<time>
<mark>
represents a footer for its nearest ancestor sectioning content or sectioning root element.
either a time on a 24 hour clock, or a precise date in the proleptic Gregorian calendar
a run of text in one document marked or highlighted for reference purposes.
Your Logo
Issues
Unknown elements in browsers
Every browser has a master list of HTML elements that it supports. Mozilla - nsElementTable.cpp
Two fundamental problems
1
2
How should the element be styled?
What should the element’s DOM
look like?
Yet another issue
3
Prior to version 9, Internet Explorer
did not apply any styling on
unknown elements.
If IE 8 doesn’t explicitly recognize
the element name, it will insert the
element into the DOM as an empty
node with no children.
All browsers render unknown elements inline,
i.e. as if they had a display:inline CSS rule.!!!!!
There are several new elements defined in
HTML5 which are block-level elements.
If you want to use these elements in older
browsers, you will need to define the display
style manually:
article,aside,details,figcaption,figure,footer,hea
der,hgroup,menu,nav,section {
display:block;
}
Root node
<HTML>
DOM that Internet Explorer actually creates:
article
|
+--h1 (child of article)
| |
| +--text node "Welcome”
|
+--p (child of article, sibling of h1)
|
+--text node "This is your "
|
+--span
| |
| +--text node "first day"
|
+--text node "."
article (no children)
h1 (sibling of article)
|
+--text node "Welcome to Initech"
p (sibling of h1)
|
+--text node "This is your "
|
+--span
| |
| +--text node "first day"
|
+--text node "."
Solution
If you create a dummy <article> element with JavaScript before you use it in your page,
Internet Explorer will magically recognize the <article> element and let you style it with CSS.

This script needs to be at the top of your page, before IE parses your tags and attributes hosted it on
Google Project Hosting, MIT License so u can just even link to it

The HTML5 algorithm says that an <article> element creates a new section, that is, a new node
in the document outline. And in HTML5, each section can have its own <h1> element.
Where as there is no no generic heading in html4, so numbered heading elements, <h1>–<h6>,
must be nested in exactly that order.
We tend to assemble pages rather than author them , so copy paste causes problems but no
more
<article>
<header>
<p class="post-date">October 22, 2009</p>
<h1>
<a href="#"
rel="bookmark"
title="link to this post">
Travel day
</a>
</h1>
</header>
…
</article>
Time
<time datetime="2009-10-22T13:59:47-04:00" pubdate>
October 22, 2009 1:59pm EDT
</time>
datetime, machine readable
b/n the closing tags, optional
pubdate
If the <time> element is in an <article> element, it means that this timestamp is the publication date of the article.
If the <time> element is not in an <article> element, it means that this timestamp is the publication date of the
entire document.
Navigation
Semantically, there is nothing to distinguish this list of links from any other
why is it needed
one example - people with disabilities
jump to (or jump past) major navigation
text-to-speech to speak and summarize web pages
no need to provide skip links for third-party software
THANK YOU!
Your Logo

HTML5 - GTUG

Transcript HTML5 - GTUG

Directory