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

<article> <aside> <bdi> <details> <dialog> <figcaption> <figure> <footer> <header> <main> <mark> <menuitem> <meter> <nav> <progress> <rp> <rt> <ruby> <section> <summary> <time> <wbr>

Example New Semantic/Structural 


                                

    Summary
    Content
Summary Content

Example New Semantic/Structural

Example New Semantic/Structural 


                                60%
60% 

                                2 out of 10
2 out of 10

Forms

New Input Types

New Form Elements

<datalist> <keygen> <output>

Example Datalist

Example Datalist

HTML5 Graphics

<canvas>
<svg>

New Media Elements

<audio>
<embed>
<source>
<track>
<video>

Example New Media Elements

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

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 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: abcde
Output: 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 < element
element : 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



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: 123456789
Output: 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