Miroslav Juhos

TopMonks

History

HTML 5 Basics

Doctype

HTML 4.01 Transitional

                            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.1

                            <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 5

                            <!DOCTYPE html>

Encoding

HTML 4.01 Transitional

XHTML 1.1

HTML 5

Script

HTML 5-

                                <script type='text/javascript'>

HTML 5

                            <script>

Attributes

Type Example Empty

<input type="text" disabled>

Unquoted

<input type="text" value=John>

Double-quoted

<input type="text" value="John Doe">

Single-quoted

<input type="text" value='John Doe'>

Coding standard advice

' single qoute- Javascript
" double qoute- HTML

element.innerHTML = '

test

HTML 5

Markup
JavaScript API
CSS 3

Markup

Deprecated

acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
strike
tt

New Semantic/Structural

Example New Semantic/Structural

                                Summary
    Content

Summary Content

Example New Semantic/Structural

60%

60%

                                2 out of 10

2 out of 10

Forms

New Input Types

color date datetime datetime-local email month number range search tel time url week

New Form Elements

Example Datalist

HTML5 Graphics

<svg>

New Media Elements

Example New Media Elements

Your browser does not support the audio element. Your browser does not support the video tag.

Valid or not valid

that is the question

Not valid

pain
lot of work
some rules are stupid

Valid

the easist way to find issues in markup
web crawlers like it
better understanding of specs

JavaScript API

String reverser

Input: character, count ("a", 10)Output: edcba

Local data storage JS API

name/value pairs

Storage

localStorage

+ getItem( String key) + setItem( String key, String value) + removeItem( String key) + clear()

                        localStorage[key] = value;

Web SQL DatabaseJS API

Web SQL Database

Relation Database
no longer in active maintenance
support can be dropped.

IndexedDBJS API

IndexedDB

Object oriented DB

Local file access JS API

##Local file access JS API * FileList * Blob * File * FileReader

#FileReader |FileReader| |----------| | + readAsText(*File* file, *String* encoding)| | + readAsDataURL(*File* file)| | + readAsBinaryString(*File* file)| | + readAsArrayBuffer(*File* file)| | + abort()|

##Events (ProgressEvent) * loadstart * progress * abort * error * load * loadend

Application cache JS API

Application cache

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

NETWORK:
login.asp

FALLBACK:
/html/ /offline.html

Application cache

                        <html manifest="demo.appcache">

#Application cache * Offline browsing * Speed * Reduced server load

Javascript workers JS API

Example Javascript workers

Create worker Terminate worker

Delay

worker = new Worker("worker.js");

worker.js:

postMessage(eq());

function eq() {
    var date = new Date(),
        arr = [];

    for (var i = 0; i < 100000; i++) {
        for (var j = 0; j < 100000; j++) {}
    }
    return (new Date()) - date;
}

XHTMLHttpRequest 2 JS API

fetching data
responseType
CORS

GeoLocation JS API

Geolocation

navigator.geolocation

+ getCurrentPosition( Function handler) + watchPosition( Function handler) + clearWatch()

GeoLocation JS API

Geoposition + timestamp

+ coords

accuracy
altitude
altitudeAccuracy
heading
latitude
longitude
speed

SSE JS API

Server-Sent Events

SSE

                    var source = new EventSource("demo_sse.php");
source.onmessage = function(event) {
    document.getElementById("result").innerHTML += event.data + "";
};

Related APIs

Shadow DOM
Layouts
- Flexbox (Flexible Box Layout Module)
- Grid Layout
WebSocket API
Multimedia
- Web MIDI API
- Web Audio API
- HTML Media Capture
Fullscreen API

Related APIs

Gamepad API (Chrome, Firefox)
High Resolution Time
Vibration API (Firefox, Chrome)
Battery Status API (Firefox)
WebGL (All)

String reverse

Input: abcdeOutput: edcba

# CSS 3

Selectors CSS 3

Selectors

element
.class
#id
*

element, element
element element
element>element
element+element
element1~element2

Attribute Selectors

[attribute]
[attribute=value]
[attribute~=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]

Pseudo-classes

:hover
:active
:visited

:focus
:lang()
:target

Tree-Structural pseudo-classes

:root
:empty
:blank
:matches()
:not()

:first-child
:last-child
:only-child

:first-of-type
:last-of-type
:only-of-type

Pseudo-elements

::after
::before

:first-line
:first-letter

Input Value States

:read-only
:read-write

:disabled
:enabled

:valid
:invalid

:required
:optional

:out-of-range
:in-range

:read-only
:read-write

:checked

Parent selector

element < elementelement : parent

a img:parent { background: none; }

Properties CSS3

border-radius
box-shadow
text-shadow
text-stroke
box-sizing
background-origin
background-clip
background-size

Backgrounds and Borders CSS 3

Multiple backgrounds

                background: url(monk.png) no-repeat 20px 20px,
            -webkit-linear-gradient(white,transparent 50%) 
            gray;

Borders

border-image: url(border.png) 20 20 round;
border-image: url(border.png) 20 20 stretch;

2D Transforms CSS 3

Example 2D Transforms

translate

Original

Transformed

rotate

Original

Transformed

Example 2D Transforms

scale

Original

Transformed

skew

Original

Transformed

2D Transforms

transform: translate(60px,60px);
transform: rotate(30deg);
transform: scale(0.5,0.5);
transform: skew(30deg, 10deg);
transform: matrix(rotate, scale, move, skew);

Example

http://www.rezatyrakety.cz/fillharmony/

3D Transforms CSS 3

Example 3D Transforms

translate

Original

Transformed

Original

Transformed

Original

Transformed

Example 3D Transforms

rotate

Original

Transformed

Original

Transformed

Original

Transformed

Example 3D Transforms

scale

Original

Transformed

Original

Transformed

Original

Transformed

Transitions and Animations CSS 3

Example Transitions

Opacity 0 Opacity 1Color Blue Color RedRotation 45 Rotation 270

Transitions

delay
duration
property
timing-function

Transitions

transition: property|all duration timing-function delay|initial|inherit;

timing-function

cubic-bezier.com

Animations

.rotate {
    -webkit-animation: spin3d 20s linear infinite;
}

@-webkit-keyframes spin3d {
    100% {
        -webkit-transform: rotateY(360deg);
    }
}

Animations

@-webkit-keyframes hlt {
    0% { background-color: orange; }
    10% { background-color: orange; }
    11% { background-color: lightgray; }
    100% { background-color: lightgray; }
}

Money formating

Input: 123456789Output: 123 456 789

Back compatibility

Support in IE8

<script>
  document.createElement('header');
  document.createElement('section');
  document.createElement('article');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('footer');
</script>

Polyfills (shims)

Modernizr

Resources

w3schools.com
w3.org
css-tricks.com
https://developer.mozilla.org
http://juhyxx.github.io/html5-presetation/

HTML 5.5

main
picture

– HTML 5 Basics – New Semantic/Structural

juhyxx

– HTML 5 Basics – New Semantic/Structural

0 0 (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/platform.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();

html5-presetation

Miroslav Juhos

TopMonks

History

HTML 5 Basics

Doctype

HTML 4.01 Transitional

XHTML 1.1

HTML 5

Encoding

HTML 4.01 Transitional

XHTML 1.1

HTML 5

Script

HTML 5-

HTML 5

Attributes

Coding standard advice

HTML 5

Markup

Deprecated

New Semantic/Structural

Example New Semantic/Structural

Example New Semantic/Structural

Example New Semantic/Structural

Forms

New Input Types

New Form Elements

Example Datalist

Example Datalist

HTML5 Graphics

New Media Elements

Example New Media Elements

Valid or not valid

that is the question

Not valid

Valid

JavaScript API

String reverser

Local data storage JS API

name/value pairs

Web SQL DatabaseJS API

Web SQL Database

IndexedDBJS API

IndexedDB

Local file access JS API

Application cache JS API

Application cache

Application cache

Javascript workers JS API

Example Javascript workers

XHTMLHttpRequest 2 JS API

GeoLocation JS API

GeoLocation JS API

GeoLocation JS API

SSE JS API

Server-Sent Events

SSE

Related APIs

Related APIs

String reverse

Selectors CSS 3

Selectors

Attribute Selectors

Pseudo-classes

Tree-Structural pseudo-classes

Pseudo-elements

Input Value States

Parent selector

Properties CSS3

Backgrounds and Borders CSS 3

Multiple backgrounds

Borders

2D Transforms CSS 3

Example 2D Transforms

translate

0 0