HTML 5

darkfryingpanΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 11 μήνες)

134 εμφανίσεις

HTML 5

Emlékeztető


A
november

24.
-
ei
előadás

és

gyakorlat

elmarad


December 1.
-
én
pótoljuk

az

elmaradt

előadást

az

A/1 228
-
as
teremben

16
-
18
-
ig


December 1.
-
én
kell

leadni

a
féléves

feladatokat

a
gyakorlati

óra

keretében

12
-
14
-
ig


December 8.
-
án
tartjuk

a
pótZH
-
t a
sikertelen

ZH
-
t
írók

számára

az

előadás

ezért

fél

órával

később

kezdődik
.

HTML5

~= HTML + CSS3 + JavaScript APIs


HTML


Draft Specification of the next iteration of HTML


HTML 4 (1997) and XHTML 1 (2000)


Clearer separation of data and layout/style


Makes what you would already do in HTML easier


New Content Tags


<nav>, <section>, <header>, <article>, <aside>, <summary>


New Media Tags


<video>, <audio>, <figure>


New Dynamic drawing
<canvas>
graphic tag


A tag that allows programmatic drawing via JavaScript


Inline metadata to help search engines identify content


<span itemprop=

agency

>Moxie Interactive</span>

CSS3


Specification currently under active development since 2005


Improved selectors for determining which content to effect


(good support across modern browsers)


Embeddable font support (TTF, OTF)


Improved text layout with column support


Rounded corners, Reflections (WebKit)


Multiple backgrounds, transforms (rotation, scale, etc), animations
(WebKit)

JavaScript APIs


Local data storage


Application Cache (offline access)


Multitasking (Worker processes)


Sockets (real
-
time server communication: chat, games, etc.)


Native Drag and Drop events


GeoLocation


Lots of active 3
rd

party libraries (Prototype, jQuery, etc)

The Good News!


Good support on modern mobile devices (iOS, Android)


Simpler, more intuitive syntax


Video and Audio without requiring a plugin


Incremental improvements to previous HTML challenges


Much needed next step in HTML evolution


Creative enhancements: Rounded corners, gradients, text layout


Emergence of more advanced technologies such as O3D (WebGL)


Easier SEO than plugin technologies


Promising Mobile JS Frameworks (Sencha, jQTouch)

The Bad News


The HTML5 spec is DRAFT and is in ongoing development
(change)


Video support is not standardized


Not currently a single codec that all browsers will support


Google WebM (VP 8) (open sourced by Google)


Ogg Theora (open source)


h.264/MP4 (potential licensing issues)


No supported DRM for video or audio


Currently no support for cue points or alpha (transparent) video

The Bad News…Continued


Limited desktop browser support


Only the newest and best have reasonable support


Internet Explorer will not have decent support until IE9


Challenges getting consistent page display across browsers


Graceful page degradation is potentially complex


Currently no designer tools for creating HTML5 animation or
interactivity (all must be implemented by a developer)


Limited developer debugging tools

Introduction



The web is constantly evolving. New and innovative websites are being created
every day, pushing the boundaries of HTML in every direction.




HTML 4 has been around for nearly a decade now, and publishers seeking new
techniques to provide enhanced functionality are being held back by the
constraints of the language and browsers.




To give authors more flexibility and interoperability, and enable more
interactive and exciting websites and applications, HTML 5 introduces and
enhances a wide range of features including form controls, APIs, multimedia,
structure, and semantics


Introduction



Work on HTML 5, which commenced in 2004, is currently being
carried out in a joint effort between the W3C HTML WG and the
WHATWG.




Many key players are participating in the W3C effort including
representatives from the four major browser vendors: Apple, Mozilla,
Opera, and Microsoft; and a range of other organisations and
individuals with many diverse interests and expertise.




Note that the specification is still a
work in progress

and quite a long
way from completion.




As such, it is possible that any feature discussed in this lecture may
change in the future.

HTML5 Demos

http://html5demos.com/

Structure


HTML 5 introduces a whole set of new elements that make it much
easier to structure pages. Most HTML 4 pages include a variety of
common structures, such as headers, footers and columns and today, it
is fairly common to mark them up using div elements, giving each a
descriptive id or class.

Diagram illustrates a typical
two
-
column layout marked
up using divs with id and
class attributes. It contains a
header, footer, and
horizontal navigation bar
below the header. The main
content contains an article
and sidebar on the right.

Structure

The use of div elements is largely because current versions of HTML 4 lack
the necessary semantics for describing these parts more specifically. HTML 5
addresses this issue by introducing new elements for representing each of
these different sections.

The div elements can be replaced with the new elements: header, nav, section, article, aside, &
footer.

Markup

The markup for that document could look like the following:


<body>


<header>...</header>


<nav>...</nav>


<article>


<section>


...


</section>


</article>


<aside>...</aside>


<footer>...</footer>

</body>

Markup


There are several advantages to using these elements. When used in
conjunction with the heading elements (h1 to h6), all of these provide a
way to mark up nested sections with heading levels, beyond the six
levels possible with previous versions of HTML.


The specification includes a detailed algorithm for generating an outline
that takes the structure of these elements into account and remains
backwards compatible with previous versions.



This can be used by both authoring tools and browsers to generate
tables of contents to assist users with navigating the document.

Markup


For example, the following markup structure marked up with nested
section and h1 elements:


<section>


<h1>Level 1</h1>


<section>


<h1>Level 2</h1>


<section>


<h1>Level 3</h1>


</section>


</section>

</section>



Note that for better compatibility with current browsers, it is also possible to make use
of the other heading elements (h2 to h6) appropriately in place of the h1 elements

Sections


By identifying the purpose of sections in the page using specific
sectioning elements, assistive technology can help the user to more
easily navigate the page.



For example, they can easily skip over the navigation section or quickly
jump from one article to the next without the need for authors to provide
skip links.


Authors also benefit because replacing many of the divs in the
document with one of several distinct elements can help make the
source code clearer and easier to author.

Header Section


The header element represents the header of a section. Headers may
contain more than just the section’s heading

for example it would be
reasonable for the header to include sub headings, version history
information or bylines.


<header>


<h1>A Preview of HTML 5</h1>


<p class="byline">By Lachlan Hunt</p>

</header>


<header>


<h1>Example Blog</h1>


<h2>Insert tag line here.</h2>

</header>

Footer Section

The footer element represents the footer for the section it applies to.


A footer typically contains information about its section such as who
wrote it, links to related documents, copyright data, and the like.


<footer>© 2007 Example Inc.</footer>

Nav Element


The nav element represents a section of navigation links. It is suitable
for either site navigation or a table of contents.


<nav>


<ul>


<li><a href="/">Home</a></li>


<li><a href="/products">Products</a></li>


<li><a href="/services">Services</a></li>


<li><a href="/about">About</a></li>


</ul>

</nav>

Aside Element


The aside element is for content that is tangentially related to the
content around it, and is typically useful for marking up sidebars.


<aside>


<h1>Archives</h1>


<ul>


<li><a href="/2007/09/">September 2007</a></li>


<li><a href="/2007/08/">August 2007</a></li>


<li><a href="/2007/07/">July 2007</a></li>


</ul>


</aside>

Section Element


The section element represents a generic section of a document or
application, such as a chapter, for example.


<section>


<h1>Chapter 1: The Period</h1>


<p>It was the best of times, it was the worst of times,


it was the age of wisdom, it was the age of foolishness,


it was the epoch of belief, it was the epoch of incredulity,


it was the season of Light, it was the season of Darkness,


...</p>


</section>

Article Element


The article element represents an independent section of a document,
page or site. It is suitable for content like news or blog articles, forum
posts or individual comments.


<article id="comment
-
2">


<header>


<h4><a href="#comment
-
2" rel="bookmark">Comment #2</a>


by <a href="http://example.com/">Jack O'Niell</a></h4>


<p><time datetime="2007
-
08
-
29T13:58Z">August 29th, 2007 at
13:58</time>


</header>


<p>That's another great article!</p>

</article>

Video and Audio


In recent years, video and audio on the web has become increasingly
viable and sites like
YouTube
,
Viddler
,
Revver
,
MySpace
, and dozens of
others are making it easy for anyone to publish video and audio.


However, since HTML currently lacks the necessary means to
successfully embed and control multimedia itself, many sites are relying
on Flash to provide that functionality.


Although it is possible to embed multimedia using various plug
-
ins (such
as QuickTime, Windows Media, etc.), Flash is currently the only widely
deployed plugin that provides a cross
-
browser compatible solution with
the desired APIs for developers.

Video and Audio

As evidenced by the various Flash
-
based media players, authors are interested in
providing their own custom
-
designed user interfaces, which generally allow
users to play, pause, stop, seek, and adjust volume.


The plan is to provide this functionality in browsers by adding native support for
embedding video and audio and providing DOM APIs for scripts to control the
playback.


The new video and audio elements make this really easy.


Most of the APIs are shared between the two elements, with the only
differences being related to the inherent differences between visual and non
-
visual media.


Video and Audio

Both Opera and WebKit have released builds with partial support for the
video element.


You may download the experimental build of Opera or a recent nightly
build of WebKit to try out these examples. Opera includes support for Ogg
Theora and WebKit supports all the formats that are supported by
QuickTime, including third party codecs.


The simplest way to embed a video is to use a video element and allow
the browser to provide a default user interface. The controls attribute is a
boolean attribute that indicates whether or not the author wants this UI on
or off by default.


<video src="video.ogv" controls poster="poster.jpg" width="320" height="240"> <a
href="video.ogv">Download movie</a> </video>

Video and Audio

The optional poster attribute can be used to specify an image which will
be displayed in place of the video before the video has begun playing.


Although there are some video formats that support their own poster
frame feature, such as MPEG
-
4, this provides an alternative solution that
can work independently of the video format.


It is just as simple to embed audio into a page using the audio element.
Most of the attributes are common between the video and audio
elements, although for obvious reasons, the audio element lacks the
width, height, and poster attributes.


<audio src="music.oga" controls> <a href="music.oga">Download song</a> </audio>

Source Element


HTML 5 provides the source element for specifying alternative video and
audio files which the browser may choose from based on its media type
or codec support.


The media attribute can be used to specify a media query for selection
based on the device limitations and the type attribute for specifying the
media type and codecs.


Note that when using the source elements, the src attribute needs to be
omitted from their parent video or audio element or the alternatives
given by the source elements will be ignored.

Video and Audio

<video poster="poster.jpg">


<source src="video.3gp" type="video/3gpp"


media="handheld">


<source src="video.ogv" type="video/ogg;


codecs=theora, vorbis">


<source src="video.mp4" type="video/mp4">

</video>

<audio>


<source src="music.oga" type="audio/ogg">


<source src="music.mp3" type="audio/mpeg">

</audio>

Video and Audio


For authors who want a little more control over the user interface so that
they can make it fit the overall design of the web page, the extensive
API provides several methods and events to let scripts control the
playback of the media. The simplest methods to use are the play(),
pause(), and setting currentTime to rewind to the beginning. The
following example illustrates the use of these.


<video src="video.ogg" id="video"></video>

<script>


var video = document.getElementById("video");

</script>

<p><button type="button" onclick="video.play();">Play</button>


<button type="button" onclick="video.pause();">Pause</button>


<button type="button" onclick="video.currentTime = 0;">

Canvas

<canvas id=

canvas


width=

150


height=

150

>

</canvas>


function draw() {


var canvas = document.getElementById(

canvas

);


if (canvas.getContext) {



var ctx = canvas.getContext(

2d

);



ctx.fillStyle =

rgb(200,0,0)

;



ctx.fillRect (10,10,55,50);




ctx.fillStyle =

rgb(0,0,200)

;



ctx.fillRect (30,30,55,50);


}

}

Form Enhancements


Placeholder text


Specific text input: email, URL, number, search


Slider


Date picker


User Agent validation

CSS Effects


Rounded corners


Gradients


Box and text shadows


Fonts


Transparencies


Multiple background images and border images


Multiple columns and grid layout


Box sizing


Stroke and outlines


Animation, movement and rotation


Improved selectors

CSS Effect Example

.amazing {

border: 1px solid blue;

color: red;

background
-
color: gold;


-
webkit
-
border
-
radius: 40px;

-
moz
-
border
-
radius: 40px;

border
-
radius: 40px;


-
webkit
-
box
-
shadow: 8px 8px 6px
#474747;

-
moz
-
box
-
shadow: 8px 8px 6px
#474747;

box
-
shadow: 8px 8px 6px #474747;


text
-
shadow: 8px 8px 2px #595959;

filter: dropshadow(color=#595959,
offx=8, offy=8);

}

Amazing CSS
Effects

http://css3generator.com/

CSS Timelines

http://mattbango.com/notebook/web
-
development/pure
-
css
-
timeline/

Offline Applications

<html mainfest=

http://m.health.unm.edu/someapp.manifest

>



</html>



someapp.manifest

CACHE MANIFEST

#v1.01


#Explicitly cached files

CACHE:

index.html

Stylesheet.css

Images/logo.png


NETWORK:

Search.cfm

Login.cfm

/
dynamicpages


FALLBACK:

/dynamicpage.cfm /static.html

http://www.whatwg.org/specs/web
-
apps/current
-
work/multipage/offline.html

Why Local Storage?


D
ata accessed over the internet can never be as
fast

as
accessing data locally


Data accessed over internet not secure


HTML5 storage is
on client


Local Storage


Beyond cookies
-

local storage


Manipulated by JavaScript


Persistent


5MB storage per

origin



Secure (no communication out of the browser)


Session storage


Lasts as long as the browser is open


Each page and tab is a new session


Browser based SQLite or IndexedDB

Cookies


Invented early in Web’s history as a way to store persistent
data (“magic cookies”)


Small pieces of information about a user stored by Web server
as text files on user’s computer


Can be temporary or persistent

Cookies


Included with every HTTP request


slows down application
by transmitting same information repeatedly


Sends unencrypted data over internet with every HTTP
request


Limited to 4KB data


Example: filling out a text form field

Cookies not enough


More storage space


On the client


Beyond page refresh


Not transmitted to server

HTML5 Storage


Provides standardized API


Implemented natively


Consistent across browsers


HTML5 storage is a specification named “Web Storage”


Previously part of HTML5 specifications


Split into its own specification


Different browsers may call it “Local Storage” or “DOM Storage”

Local Storage


Web storage

window.localStorage[

value

] =

Save this!

;


Session storage

sessionStorage.useLater(

fullname

,

Garth Colasurdo

);

alert(

Hello


+ sessionStorage.fullname);


Database storage

var database = openDatabase(

Database Name

,

Database Version

);

database.executeSql(

SELECT * FROM test

, function(result1) {




});


http://dev.w3.org/html5/webstorage/

User Agent Storage

Using HTML5 Storage


Tracking changes to the HTML5 storage area


if (window.addEventListener) {


window.addEventListener("storage", handle_storage, false);

} else {


window.attachEvent("onstorage", handle_storage);

};


Using HTML5 Storage


Tracking changes to the HTML5 storage area

The handle_storage callback function will be called with a
StorageEvent object, except in Internet Explorer where the event
object is stored in
window.event.

function handle_storage(e) {


if (!e) { e = window.event; }

}

Using HTML5 Storage


PROPERTY

TYPE

DESCRIPTION

key

string

the named key that was added, removed, or modified

oldValue

any

the previous value (now overwritten), or

null

if a new item was
added

newValue

any

the new value, or

null

if an item was removed

url
*

string

the page which called a method that triggered this change

StorageEvent Object

Using HTML5 Storage




Limitations in current browsers:



5 MB of storage from each
origin
.



Can not ask user for more storage (except for Opera,

sort of)

Beyond Key/Value
Pairs: Competing
Visions


Web
SQL Database


The
Web SQL Database
specification has been implemented
by four browsers and platforms.




Safari
4.0+


Chrome
4.0+


Opera
10.5+


Mobile
Safari
3.0+


Android
2.0+


HTML & XML


The advantage of defining HTML 5 in terms of the DOM is that the
language itself can be defined independently of the syntax.



There are primarily two syntaxes that can be used to represent HTML
documents: the HTML serialisation (known as HTML 5) and the XML
serialisation (known as XHTML 5).



The HTML serialisation refers to the syntax that is inspired by the SGML
syntax from earlier versions of HTML, but defined to be more compatible
with the way browsers actually handle HTML in practice.


Benefits of Using HTML



Backwards compatible with existing browsers




Authors are already familiar with the syntax




The lenient and forgiving syntax means there will be no user
-
hostile
“Yellow Screen of Death” if a mistake accidentally slips through




Convenient shorthand syntax, e.g. authors can omit some tags and
attribute values




(NOTE:
The
Yellow Screen of Death

occurs when an ASP.NET web
application encounters a problem and crashes.

It is also used to refer to
an error in the parsing of an XML document in a web browser.
)

Benefits of Using XHTML



Strict XML syntax encourages authors to write well
-
formed
markup
, which
some authors may find easier to maintain





Integrates directly with other XML vocabularies, such as SVG and
MathML




Allows the use of XML Processing, which some authors use as part of their
editing and/or publishing processes


What HTML5 is
NOT


A magic bullet for all your mobile and desktop
-
to
-
mobile woes


A replacement for technologies such as Flash or Silverlight


Immersive RLP

s would be much more time consuming


Certain functionality would not be possible or cost
-
prohibitive


While HTML5 quickly fixes some small
-
scale HTML issues (video,
audio, layout and fonts), it does not instantly solve architectural
needs for large
-
scale immersive cross
-
platform applications

Summary

Good

HTML5 has new standards and features that are long overdue

Allows display of multimedia content without need of a plugin

Good and rapidly progressing mobile support


Bad

Spotty desktop browser support

Complexity creating consistent experiences across platforms

Technical limitations on what can creatively be done

Recommendations


Still consider separate desktop and mobile experiences


For HTML
-
based desktop experiences, consider simplified modular
layout for streamlined restyling on mobile platforms


Don

t expect what has been traditionally executed in Flash or
Silverlight to be cost
-
effective or even possible in HTML


Clearly understand the target
USER

and their needs before
recommending a technology


Design for the chosen technology

Related Links


http://www.pcworld.com/article/196670/google_announces_webm_video_format_the_future_of_html5_video.ht
ml


http://en.wikipedia.org/wiki/HTML5


http://www.deepbluesky.com/blog/
-
/browser
-
support
-
for
-
css3
-
and
-
html5_72/


http://www.html5test.com/


http://newteevee.com/2010/05/13/hulu
-
html5
-
isnt
-
ready
-
for
-
prime
-
time/


http://www.htmlgoodies.com/daily_news/article.php/386914/Is
-
HTML
-
5
-
the
-
Flash
-
Killer
-
Its
-
sure
-
got
-
the
-
potential.htm


http://slides.html5rocks.com/


http://www.deepbluesky.com/blog/
-
/browser
-
support
-
for
-
css3
-
and
-
html5_72/


http://www.sencha.com/products/touch
/


http://html5watch.tumblr.com


http://www.css3.info


http://www.chromeexperiments.com


http
://www.apple.com/html5
/


http://www.canvasdemos.com


http://html5demos.com


http://w3.org/TR/css3
-
roadmap/


http://www.w3schools.com/html5/

Cautions


Browser implementation is fragmented


Standards are in development


HTML Candidate Recommendation is
scheduled for 2012


CSS3 is in multiple drafts and proposals


ECMA
-
262 (edition 3) (or JavaScript 1.5)


New markup and architecture design