Introduction to HTML5

unevenfitterInternet και Εφαρμογές Web

20 Ιουν 2012 (πριν από 5 χρόνια και 4 μέρες)

370 εμφανίσεις

@Samsung Electronics Copyright All Rights Reserved

1








Introduction to HTML5





Version 1.
1
1





















Samsung Smart TV



Introduction to HTML5

@Samsung Electronics Copyright All Rights Reserved

2

PREFACE

................................
................................
................................
................................
................................
..........

3

PURPOSE OF DOCUMENT

................................
................................
................................
................................
...........

3

TARGET READERS

................................
................................
................................
................................
........................

3

1.

INTRODUCTION TO HTML
5

................................
................................
................................
...............................

4

1.1.

HTML5

................................
................................
................................
................................
...............................

4

1.2.

B
ACKWARD
C
OMPATIBILITY WITH
HTML4

................................
................................
................................
.........

4

1.3.

S
UPPORT FOR
HTML5

................................
................................
................................
................................
.........

4

1.4.

M
ARKUP

................................
................................
................................
................................
..............................

5

1.5.

HTML5

API
S

................................
................................
................................
................................
......................

5

2.

HTML5 AND SAMSUNG SM
ART TV SDK

................................
................................
................................
.........

5

2.1.

C
ANVAS
T
AG

................................
................................
................................
................................
........................

5

2.2.

A
UDIO
T
AG

................................
................................
................................
................................
..........................

6

2.3.

V
IDEO
T
AG

................................
................................
................................
................................
..........................

6

3.

CONCLUSION

................................
................................
................................
................................
.........................

7






















Introduction to HTML5

@Samsung Electronics Copyright All Rights Reserved

3

Preface


Purpose of D
ocument


The purpose of this document is to introduce HTML5 and some tags associated with it. The
Samsung Smart TV SDK

provides support for HTML5. Hence this document attempts to
explain HTML5 alon
g with some tags. The document also contains some sample applications
which the user can refer to.


Target Readers


This document targets the first time users of
Samsung Smart TV SDK
. However, the reader is
expected to have basic knowledge about Java Scrip
ting, CSS and HTML. The document
explains only the use of
Samsung Smart TV SDK

and its features. There are no explanations
provided about the programming syntax and conventions of the scripting language and the
programming language used.




















Introduction to HTML5

@Samsung Electronics Copyright All Rights Reserved

4

1.

I
ntroduction to HTML5

1.1.

HTML5

HTML5

is the next major revision of the

HTML

standard, currently under
development. Like
its immediate
predecessors, HTML 4.01 and

XHTML

1.1, HTML5 is a standard for structuring
and presenting content on the

World Wide Web.

HTML5

is a response to the observation that
the HTML and XHTML in common use on the

World Wide Web

is a mixture of features
introduced by various specifications, along with those introduced by software products such
as

web browsers, those established by common
practice, together with many

syntax errors

in
existing

web documents. It is also an attempt to define a single

markup language

that can be
written in either HTML or XHTML syntax. It includes detailed processing models to encourage
more interoperable implem
entations; it extends, improves and rationalises the markup available
for documents, and introduces markup and APIs for complex

web applications.


1.2.

Backward Com
patibility with HTML4

There is no need to throw away your existing markup. All application workin
g on HTML4 will
work on HTML5.

HTML5

supports all the form controls from

HTML

4, but it also includes
new input controls. Some of these are long
-
overdue additions like sliders and date pickers;
others are more subtle. For example, the

email

input type look
s just like a text box, but mobile
browsers will customize their onscreen keyboard to make it easier to type email addresses.
Older browsers that don’t support the

email

input type will treat it as a regular text field, and the
form still works with no mar
kup changes or scripting hacks.


1.3.

Support for HTML5

Most of the new features of HTML5 are well supported by comman browsers like Mozilla
Firefox, Google Chrome, Internet Explorer, Opera, Mobile Browsers etc.











Introduction to HTML5

@Samsung Electronics Copyright All Rights Reserved

5

1.4.

Markup

HTML5 introduces a number of new

elements

and attributes. Some of them
are

semantic

replacements for common uses of generic block (<div>) and inline (<span>)
elements, for example

<nav>

(website navigation block),

<footer>

(usually referring to bottom
of web page or to last lines of HTML
code), or

<audio>

and

<video>

instead of

<object>.


1.5.

HTML5 APIs

In addition to specifying markup, HTML5 specifies scripting

application programming
interfaces

(APIs).

Existing

documen
t object model

(DOM) interfaces are extended
and

defacto

features documented
.

2.

HTML5 and
Samsung Smart TV SDK

As
Samsung Smart TV SDK

supports HTML5 we will be discussing a few tags like


canvas,
video and audio tags.


2.1.

Canvas Tag

The

canvas

element

is part

of

HTML5

and allows for dynamic,

scriptable

rendering

of 2D
shapes and

bitmap

images. It is a low level, procedural model that updates a bit map and does
not have a built in

scene graph.


Example

The following code creates a Canvas element in an HTML page
:

<canvas id="example" width="200" height="200">

This text is displayed if your browser does not support HTML5 Canvas.

</canvas>



You can write text

inside the start and end
canvas
tags, to show older browser that they do not
support this tag.

Using Java
Script, you can draw on the canvas:

var

example
=

document.
getElementById
(
'example'
)
;

var

context
=

example.
getContext
(
'2d'
)
;

context.
fillStyle

=

"rgb(255,0,0)"
;

context.
fillRect
(
30
,

30
,

50
,

50
)
;



Introduction to HTML5

@Samsung Electronics Copyright All Rights Reserved

6

2.2.

Audio Tag

The <audio> tag deines sound, such as music or ot
her audio streams.

Example

<audio src="horse.mp4
"
>

Your browser does not support the audio element.

</audio>

You can write text inside the start and end audio tags, to show older browser that they do not
support this tag.

New Attributes of <audio> tag in
HTML5


Attribute

Value

Description

A
utoplay

autoplay

If present, the audio will start playing as soon as it is
ready.

L
oop

loop

If present, the audio will start over again, every time it
is finished.

P
reload

auto

metadata

none

Specifies if the audi
o should be loaded when the page
loads. Ignored if autoplay is present.

S
rc

url

Defines the URL of the audio to play


2.3.

Video Tag


Until now, there has never been a standard for showing video on a web page/
App
.

Today, most
videos are shown through a plugin

(like flash). However, not all browsers have the same
plugins.HTML5 specifies a standard way to include video, with the video element.

Video Formats

Currently, there are 2 supported video formats for the video element:

Format

IE 8

Firefox
3.5

Opera
10.5

C
hrome
3.0

Safari 3.0

Ogg

No

Yes

Yes

Yes

No

MPEG 4

No

No

No

Yes

Yes



Ogg = Ogg files with Thedora video codec and Vorbis audio codec



MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec

Example

The control attribute is for adding play, pause, a
nd volume controls.It is also always a good idea


Introduction to HTML5

@Samsung Electronics Copyright All Rights Reserved

7

to include the width and height attributes.Insert content between the <video> and </video> tags
for browsers that do not support the video element:

<video src="movi
e.mp4" width="320" height="240"
>

Your brows
er does not support the video tag.

</video>


All <video> Attributes

Attribute

Value

Description

autoplay

autoplay

Specifies that the video will start playing as soon
as it is ready

controls

controls

Specifies that controls will be displayed, such as a
p
lay button.

H
eight

pixels

Specifies the height of the video player

L
oop

loop

Specifies that the media file will start over again,
every time it is finished.

P
reload

preload

Specifies that the video will be loaded at page
load, and ready to run. Ignored
if "autoplay" is
present.

S
rc

url

Specifies that the URL of the video to play

W
idth

pixels

Specifies the width of the video player






3.

Conclusion

We have seen how we can easily use HTML5 tags during
App

creation.Also provided with the
document are some

sample
App
s which can be used as reference to create more
App
s utilizing
the benefits of HTML5.