HTML5

HTML áttekintés

HTML - HyperText Markup Language
W3C - World Wide Web Consortium

HTML5 kialakulása

WHATWG -Web Hypertext Application Technology Working Group
Új ajánlások - Web Forms 2.0, Web Apps 1.0, Web Controls 1.0
WHATWG és W3C együttműködése - 2007

HTML5

Új markup - nem SGML és nem XML alapú
Új és egyszerűbb Doctype - <!DOCTYPE html>
Kompatibilitás korábbi verziókkal - HTML4, XHTML 1

Újdonságok
- új elemek
- új szemantikus stuktúra-elemek
- átdolgozott és kiegészített űrlapok
- - új input típusok
  - és attribútumok

Új szemantikus struktúra-elemek

Űrlapok - új input attribútumok

Autofocus

<input name="form_text" type="text" value="" autofocus/>

Placeholder

<input name="form_text" type="text" placeholder="Ide pötyögj" />

Required

<input name="form_text" type="text" value="" required />

Pattern

<input name="form_text" type="text" value="" pattern="[0-9][A-Z]" />

Űrlapok - új input típusok

Email - type="email"
```
<input name="email" type="email" />
```
Url - type="url"
```
<input name="url" type="url" />
```
Search - type="search"
```
<input name="search" type="search" />
```
Number

Spinbox - type="number"

<input name="spinbox" type="number" min="0" max="10" step="2" value="0"/>

Slider - type="range"

<input name="number" type="range" min="0" max="10" value="0"/>

Űrlapok - új input típusok

Date picker

Date - type="date"
```
<input name="date" type="date" />
```
Month - type="month"
```
<input name="month" type="month" />
```
Week - type="week"
```
<input name="week" type="week" />
```
Time - type="time"
```
<input name="time" type="time" />
```
Datetime - type="datetime"

<input name="datetime" type="datetime" />

Multimédia

Audio - <audio>

                                
                                    <audio controls="controls">
                                        <source src="file/music.mp3" />
                                        <a href="file/music.mp3">Letöltés</a>
                                    </audio>

Video - <video>

                                
                                    <video width="300" height="200" controls preload>
                                        <source src="file/video.ogv" type="video/ogg; codecs='vorbis, theora'" />
                                        <p> A böngész&#337;d elavult. <a href="file/video.ogv">Töltsd le a videót.</a> </p>
                                    </video>

Web Storage

Kliensoldali perzisztens adattárolás
Külön specifikáció - korábban HTML5 része
Cookie-hoz hasonló - nagyobb tárhely, kliens oldal
Adatmodell - kulcs-érték párok: string-ek
SessionStorage - böngészési session alatt
LocalStorage - böngésző bezárása után is

Web Storage

Storage interfész

                                        
                                            //új kulcs-érték pár hozzáadása
                                            setItem(key, value);
                                            
                                            //kulcshoz tartozó érték elkérése
                                            getItem(key);
                                            
                                            //kulcs-érték pár tölése
                                            removeItem(key);
                                            
                                            //tároló ürítése
                                            clear();

LocalStorage

Geolocation API

Szabványosított interfész - földrajzi pozíció lekérése
Földrajzi pozíció meghatározása - kliens oldalon
- GPS, GSM/CDMA cella azonosító, Wi-Fi, IP cím
Geolocation

navigator.geolocation.getCurrentPosition(handle_position, handle_error, { enableHighAccuracy: true });

Hibakezelés - err objektum

                                
                                    if (err.code == 0) {
                                        // unknown error
                                    }
                                    else if (err.code == 1) {
                                        // user said no!
                                    }
                                    else if (err.code == 2) {
                                        // no position
                                    }
                                    else if (err.code == 3) {
                                        // timeout
                                    }

Geolocation API

Position

                                
                                    //hosszúsági földrajzi koordináta
                                    position.coords.latitude;
                                    
                                    //szélességi földrajzi koordináta
                                    position.coords.longitude
                                    
                                    //város
                                    position.address.city;
                                    
                                    //ország
                                    position.address.country
                                    
                                    //országkód
                                    position.address.countryCode
                                    
                                    //irányítószám
                                    position.address.postalCode
                                    
                                    //régió (megye)
                                    position.address.region
                                    
                                    //utca
                                    position.address.street
                                    
                                    //házszám
                                    position.address.streetNumber