Bevezetés a HTML 5 világába

Bevezetés a HTML5 világába

Turóczy AttilaLivesoft Kft.

Desktop & Web – Hol vannak a határok

A felhasználók a számítógépükön töltött idő 57%-ban a böngészőjét használja.

SoC – System on the Chip

Web Történelem

1991 HTML1994 HTML21996 CSS1 + JavaScript1997 HTML 41998 CSS22000 XHTML12005 AJAX2009 HTML 5

De kié a jövő?

HTML4?„Már akkor elavult volt, amikor megjelent.”

Plug-in?Silverlight, Flash, JavaFX, stb…Bővítmény… telepítés, jogosultságok, macera…Cross-Platform

HTML5 + JavaScriptSzabvány kibővítéseRIA

JavaScript középkor

<P ID="boldpara1"onmouseover="javascript:document.all.boldpara1.style.fontWeight= 'bold'"onmouseout="javascript:document.all.boldpara1.style.fontWeight='normal'">Ez a sor kövér lesz ha az egér fölötte áll.</P>

Így volt ez hajdanán…

Mi a közös a spenótban és a JavaScriptben?Mindkettőt megutálod, ha kiskorodban erőltetik rád!

JavaScript var Fruit = function (type, weight) { this.type = type; this.weight = weight; this.biteSize = 100;};

Fruit.prototype.eat = function () { this.weight = this.weight - this.biteSize; return this.weight;};

var orange = new Fruit('orange', 250);

A második leggyorsabb imperatív nyelv!

JavaScript

A nyelv, amelybe a legtöbbet invesztálják!

Chakra SquirrelFish Carakan TraceMonkey V8

Fejlődés

HTML 5 Alkalmazások

PacManBonJoviVideo PanoramaGalactic

Demo

WebSockets

Kommunikáció 2 böngésző között

Demo

Mi az HTML5?

A HTML5 (Hypertext Markup Language) legújabb webes prezentációs platform, amely gazdag internet tartalmak (RIA) megjelenítésére jött/jön létre.Plug-in és egyéb komponensek használata nélkül!

Nincs Adobe Flash, Silverlight, JavaFx, stb…Igazi Cross-Platform megoldás!

W3C felügyeli a szabványosítást

HTML5 szabványosítás

Specifikáció és ImplementációSenki sem akar a specifikáció elkészülte előtt implementálniDe kell a visszajelzés

Így alakul ki a végleges specifikáció

A böngésző gyártók különbözően állnak hozzáVan, aki rögtön megvalósítja a specifikáció újdonságait (Opera)Van, aki csak közel végeleges funkciókat valósít meg (IE 9)

Szabványosítás„Site Ready” Specifikációk!

FAQ HTML5

Csak „Új” HTML5 kompatibilis böngészők képesek HTML5 tartalmakat megjeleníteni?

Igen! És ezért figyelnünk kell arra, hogy támogatja-e a böngésző! (Funkciókat figyelünk! – Erről később)

HTML4 honlapunk működni fog továbbra is?Igen! A HTML5 az összes Form kontrolt támogatja amit a HTML4. De ezeken kívül további kontroljai is vannak. (Email, Date stb)

Ha a böngésző nem támogatja az adott funkciót, mit látunk?

Leginkább semmit. De ellenőrizzük és értesítsük a felhasználót, hogy az adott böngészővel az adott funkció nem érhető el!

Új Funkciók

CanvasAudioVideóLayoutÚj elementekCss3

FontFaceWeb WorkerInput kontrolokPlaceholder TextForm AutofocusMicrodata

History APIOffline WebAppGeolocationLocal StorageSVGStb, Stb, Stb

Eltávolított elemek

Ezek használatát ha lehet kerüljük.

<acronim><applet> <basefont><big><center><dir>

<font><frame><frameset><isindex><noframes><s>

<strike><tt> <u> <xmp>

Fejlesztés

Notepad! Mindenre jó és sose avul el!

Visual Studio 2010HTML 5 TemplateRey Bango

Visual Studio okosítás

A Visual Studio 2010 SP1 nem támogatja a HTML5 és a CSS3 újdonságait

Vakon haladunk, mint egy notepadben

Visual Studio 2010 Add-inhttp://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83Nem teljes!

A teljes funkcionalitáshoz a Visual Studio kódjába is bele kellene nyúlni (Visual Studio vNext)

http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83



http://balassygyorgy.files.wordpress.com/2011/06/vs_html5_toolbar.png

http://balassygyorgy.files.wordpress.com/2011/06/vs_css_toolbar.png

HTML5 fejlesztés

Template feltelepítéseIntelliSense kiegészítése

Demo

Kezdődik…

Ahhoz, hogy a meglévő honlapunkat fel HTML5 „Upgrade”-eljük, csak a Doctype-ot kell módosítanunk! (Első sor)

Ettől több funkcióval bírhat az oldalunk. A HTML4-es elemeink továbbra is rendesen fognak megjelenni. Nem bontja meg az oldalunk egységét! És csak 15 karakter!

<!DOCTYPE html>

<Head> element

A legelső element a <html> tagon belülTartalmazhat:

Meta adatokatScripteketStílusokat Stb.

Mi a nagy változás benne?Igazából semmi érdemleges

<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5 Tanfolyam</title> <link rel="stylesheet" type="text/css" href="style-original.css" /> <link rel="alternate" type="application/atom+xml" title="My Weblog feed" href="/feed/" /> <link rel="search" type="application/opensearchdescription+xml" title="My Weblog search" href="opensearch.xml" /> <link rel="shortcut icon" href="/favicon.ico" /></head>

Karakter kódolás

EgyszerűsödöttEddig

Mostantól

Használható mind a két jelölési módszerKevesebb karakter!

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta charset="utf-8" />

CSS betöltése

HTML4

HTML5

Ki lett dobva a Type attribútum. Alapból CSS-ről beszélünk.

<link rel="stylesheet" href="style-original.css" type="text/css" />

<link rel="stylesheet" href="style-original.css" />

Favicon

HTML5 Favicon használata<link rel="shortcut icon" href="/favicon.ico">

Új elementek

Egy oldalnak általában vanFejléce (Header)Oldalsávja (Sidebar)Tartalom része (Content)Lábléce (Footer)

Ezt eddig külön Div-ekkel kellet jelölnünk

Új Elementek

Új elementeket kapunk<header><footer><nav><menu><article><section><time><mark>

Gyakran használatos elemek jelölésére. Egyszerűbb.

Új elementek kipróbálása

Egyszerű Site BuildKorábbi oldal, HTML5 elemeivel helyettesítése

Demo

Internet Explorer 8?

Mit kezdnek a régi böngészők az új elementekkel?Semmit. Az oldal eltorzul.

Megoldás?

HTML5 elmentek régi böngészőn

ScriptSuperPreview

Demo

Funkciók ellenőrzése

Ne azt figyeljük, hogy a böngésző HTML5-öt támogat-e.

Agent

Mindig csak funkciókat ellenőrzünk!Saját JavaScript kódot írunkModernizr könyvtárat használjuk http://www.modernizr.com/

http://www.modernizr.com/

Videók megjelenítése

HTML5 előtt csak külső plug-in telepítésével volt lehetséges

FlashQuick-TimeReal TimeSilverlightStb.

<video> element segítségével már lehetséges (Nem minden böngésző támogatja megfelelően)

Video element támogatottsága

Internet Explorer 9.0+Firefox 3.5+Safari 3.0+Chrome 3.0+Opera 10.5+iPhone 1.0+Android 2.0+

Videó funkció ellenőrzése

Saját JavaScript kódból

Modernizer használata

function supports_video() { return !!document.createElement('video').canPlayType;}

if (Modernizr.video) { // let's play some video!} else { // no native video support available :( // maybe check for Silverlight or Flash instead}

Video element

Egy egyszerű videó fájl megjelenítése

Beállítható a szélessége és a magassága is.

Ha kisebb a videó mérete akkor középre helyezi az elementben.

Alapvető vezérlő kontroljai is vannak

Írhatunk saját vezérlőket is hozzá. (Play, Pause, CurrentTime)

<video src="demo.mp4"> </video>

<video src="demo.mp4" width="320" height="240"></video>

<video src="demo.mp4" width="320" height="240" controls></video>

Video Preload

Megmondhatjuk, a video elementnek, hogy amikor a felhasználó az oldalunkra téved kezdje el letölteni a videót (de még nem indítja el)

Abban az esetben, ha a hálózati forgalmat szűkíteni szeretnénk állítsuk át none-ra!

<video src="demo.mp4" width="320" height="240" controls preload></video>

<video src="demo.mp4" width="320" height="240" controls preload="none"></video>

Video Autoplay

Lehetőség van arra, hogy az oldal betöltődése után rögtön elinduljon a video

<video src="demo.mp4" width="320" height="240" autoplay></video>

Video element egyéb tulajdonságai

loopFolyamatos lejátszást tesz lehetővé

posterA video betöltődése előtt megjelenő kép

autobufferAutomatikus buffer töltődés

Videó formátumok – Böngésző háborúja

H.264 (AAC LC Audio) - MPEG 5 Container

Theora video (Vorbis Audio) – Ogg Container

WebM (Vp8 vorbis) - Matroshka

Videó formátum ellenőrzése



function supports_h264_baseline_video() { if (!supports_video()) { return false; } var v = document.createElement("video"); return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); //return v.canPlayType('video/ogg; codecs="theora, vorbis"'); //return v.canPlayType('video/webm; codecs="vp8, vorbis"');}

if (Modernizr.video) {if (Modernizr.video.webm) { // try WebM } else if (Modernizr.video.ogg) { // try Ogg Theora + Vorbis in an Ogg container } else if (Modernizr.video.h264) { // try H.264 video + AAC audio in an MP4 container } }

Video + Codeck – Ki mit támogat?

Az elsőt, amit képes lejátszani, lejátssza a böngésző

De melyiket játssza le?Legrosszabb esetben letölti sorban és megpróbálja megjeleníteni

Célszerű megadni a Type –ot, hogy rögtön kiválassza a számára megfelelő formátumot

<video width="320" height="240" controls> <source src="demo.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="demo.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="demo.ogv" type='video/ogg; codecs="theora, vorbis"'></video>

Internet Explorer 9 és a Video element

Támogatja a H.264 videót és az AAC audiót (MPEG-4)

Ahogy a Safari és az iPhone is

Mi van a korábbi Internet Explorerekkel?Video For Everybody projecthttp://camendesign.com/code/video_for_everybody

http://camendesign.com/code/video_for_everybody

http://camendesign.com/code/video_for_everybody

Video element

Video element bemutatásaEgyedi vezérlők készítése

Demo

További HTML5 videó megoldások – Video JS

VideoJSIngyenes és nyílt forráskódúHáttérvilágítás100% skinezhetőKönnyű használatTeljes képernyős üzemmódEgyedi hangerő vezérlőFlash használat, amennyiben a böngésző nem támogatja a HTML5 videót

http://videojs.com/

http://videojs.com/

MediaElement.js

SkinezhetőFlash és Silverlight alternatívaFeliratok támogatása Teljes képernyő támogatása

http://mediaelementjs.com/



Audio element

Ugyanazok az alapvető elemei, mint a videó elementnekNincs

WidthHeight

<audio src="demo.mp3" autoplay controls>

Audio element

Válasz zenét és játszd le

Demo

Canvas element

RajzfelületAmire JavaScriptből rajzolhatunkMéret függő!

Hogy néz ki egy Canvas?Egy téglalapNincs kereteNincs tartalma

Alapvető Canvas támogatottsága

Internet Explorer 7.0+http://code.google.com/p/explorercanvas/Internet Explorer 9 natívan támogatja

Firefox 3.0+Safari 3.0+Chrome 3.0+Opera 10.0+iPhone 1.0+Android 1.0+

http://code.google.com/p/explorercanvas/

http://code.google.com/p/explorercanvas/

Canvas a gyakorlatban

Felületen

Ha nem adjuk meg a Width és a Height tulajdonságát, akkor alapvetően egy 300x150 – es Canvas-t kapunk

JavaScriptből történő elérése

<canvas id="demo" width="300" height="225"></canvas>

var a_canvas = document.getElementById("demo");

Rajzoljunk

A canvasra JavaScriptből rajzolhatunk

Van 3D-s Canvas?Nincs még. Külső gyártóknak vanNincs szabványosítva.A következő verzióban

function draw() { var canvas = document.getElementById("demo"); var context = canvas.getContext("2d"); context.fillRect(50, 25, 150, 100);}

Egyszerű alakzatok rajzolása

Canvas rajzolás

Demo

Rajzolási metódusok

fillStyle Kitöltés színe, stílusa. CSS –t is elfogad. (Alapból fekete)

fillRect(x, y, width, height)Téglalap rajzolása

strokeStyle Keret színe és stílusa. (Ugyanaz vonatkozik rá mint a fillStyle-ra)

strokeRect(x, y, width, height)Téglalap rajzolása. Kitöltés nélkül

clearRect(x, y, width, height)Adott méretű téglalap területet tisztít meg a Canvas-on

Rajzoljunk tovább

Téglalapokfunction draw() { var canvas = document.getElementById("demo"); var ctx = canvas.getContext("2d"); ctx.fillRect(50, 20, 145, 145);

ctx.fillStyle = "rgb(0, 162, 232)"; ctx.fillRect(135, 85, 125, 125);

ctx.lineWidth = 5;

ctx.strokeStyle = "rgb(0, 0, 0)"; ctx.strokeRect(50, 335, 145, 145);

ctx.strokeStyle = "rgb(0, 162, 232)"; ctx.strokeRect(135, 275, 125, 125);

ctx.fillStyle = "rgba(255, 255, 0, 0.75)"; ctx.fillRect(210, 180, 125, 125);}

Canvas koordináta rendszer

2D koordináta rendszerBal felső sarok a (0, 0)X - HorizontálisY - Vertikális

Rajzolás

Pozícionálás context.moveTo(x, y); -> A kurzor (ecset) start pozíciója

Vonal rajzolásacontext.lineTo(x,y); -> vonal rajzolása

Egyszerű rajzolás

Rácsos füzet

Demo

Canvas Text

Tulajdonságokfont – font style, font variant, font weight, font size, font familytextAlign – start, end, left, right, centertextBaseline – top, hanging, middle, alphabetic, bottom.

Szöveg rajzolás

Rácsos füzet

Demo

Transzformációk

Alapvető transzformációk támogatásaEltolásForgatásNyújtás

function draw() { var canvas = document.getElementById("demo"); var context = canvas.getContext("2d");

context.translate(200, 250); for (i = 0; i < 10; i++) { context.rotate(0.2 * Math.PI); context.fillStyle = "rgba(0, 128, 255, 0.5)"; context.fillRect(10, 0, 150, 50); }}

Grádiensek

Linear és Radial Gradiens<canvas id="demo" width="300" height="225"></canvas><script>function draw() { var canvas = document.getElementById("demo"); var context = canvas.getContext("2d");

var my_gradient = context.createLinearGradient(0, 0, 300, 0); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white");

context.fillStyle = my_gradient; context.fillRect(0, 0, 300, 225);}</script>

Gradiensek

Egyszerű gradiens rajzolásÖsszetett gradiensek - Dinamikusan

Demo

Képek kezelése

A Canvasra képet és videót is rajzolhatunk!Képet a drawImage segítségével

function draw() { var canvas = document.getElementById("demo"); var context = canvas.getContext("2d");

var motivation = new Image(); motivation.src = "images/Motivation.jpg"; motivation.onload = function () { context.drawImage(motivation, 0, 0); }}

Kép rajzolása canvasra

Több kép rajzolásaCanvas galléria

Demo

Video a Canvason

A Canvasre bármit rajzolhatunk Speciális videó alakzatokat is kialakíthatunk

Minden képnek tekinthető

Canvas + Video

Tükröződéses video

Demo

Geolocation

Bekerült a HTML5 szabványbaAzokban az oldalakban, amikben megbízunk megadhatjuk, hogy jelenleg hol tartózkodunkA lokációs információk jöhetnek:

IP címWireless kapcsolat információkbólGPS Hardware információiból

Első sorban a mobil felhasználásra gondoltak.

Ijesztő?!

Kérdés: A geolokáció, mint képesség félelmetesnek tűnik biztonsági szempontból? Kikapcsolhatom?

Csak akkor küldi el ezeket az információkat a felhasználó, ha ezt külön engedélyezi!

Geolocation API támogatottsága


Geolocation API ellenőrzése



function supports_geolocation() { return !!navigator.geolocation;}

if (Modernizr.geolocation) { // let's find out where you are!} else { // no native geolocation support available :( // maybe try Gears or another third-party solution}

Geolokáció használata

A legegyszerűbb példa

function get_location() { navigator.geolocation.getCurrentPosition(show_map);}

function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // jelenítsük meg a térképen!}

WatchPosition() is jó!

Golokációs metódusok

clearWatchPozíció figyelésének leállítása.

getCurrentPositionJelenlegi pozíció lekérdezése

watchPositionJelenlegi pozíció lekérdezése. Folyamatos figyelés.

Position Objektum

Tulajdonság Típus Megjegyzés

Coords.latitude Double Fok (Decimalis)

Coords.longitude Double Fok (Decimalis)

Coords.altitude Double vagy null Méter

Coords.accurancy Double Méter

Coords.altitueAccurancy Double vagy null Méter

Coords.heading Double vagy null Fok (Irány)

Coords.speed Double vagy null Méter / szekundum

timestamp DOMTimeStamp Ahogy a Date() objektum

Hibakezelés

A Geolokáció elég komplikált tud lenni.Hibák bármikor előfordulhatnak.Ezeket le kell kezelnünk!

function get_location() { navigator.geolocation.getCurrentPosition(show_map, handle_error)}

function handle_error(err) { if (err.code == 1) { // user said no! }}

PositionError Obejktum

Code tulajdonságPERMISSION_DENIED (1) – A felhasználó nem engedélyezte a hozzáféréstPOSITION_UNAVAILABLE (2) – Kapcsolat megszakadt / Pozíció nem meghatározhatóTIMEOUT (3) –Ha a pozíció meghatározás túl sok időt vett igénybeUNKNOW_ERROR (0) – Minden más esetben

Tulajdonság Típus Megjegyzés

code short Enum érték

message DOMString Ne ezt jelenítsük meg a felhasználóknak!

Pontosság

Egy webes alkalmazásnál általában nem fontos a nagy pontosság

Gondoljunk olyan alkalmazásra, amely megmondja a legközelebbi mozi helyét. Egy mobil webes alkalmazásnál elég, ha csak a cella információk alapján meghatározza.

A getCurrentPosition –nak van egy harmadik opcionális argumentuma a PositionOptions objektum.Tulajdonság Típus Alap. érték Megjegyzés

enableHighAccurancy Boolen false True (lassabb)

timeout Long Nincs Milliszekundum

maximumAge Long 0 Milliszekundum (History)

Geolocation

Keressük meg honnan netezünkGoogle MapsBing Maps

Demo

Formok készítése

Eddig a formok kb egy <form> tag-ből és alapvető input type-ból álltak<input type=„text”><input type=„password”><input type=„submit”>

De ma már ez kevés! Gazdag felhasználói felületet igényelek a felhasználók és a fejlesztők is.

Megoldás jQuery UIHTML5

Eddigi mezők

Mező típusa HTML Code Megjegyzés

Checkbox <input type=„checkbox”> Ki/be kapcsolható

Radio Button <input type=„radio”> Csoportosítható

Password <input type=„password”>

Drop-down list <select><option>…

File Picker <input type=„file”> Open File Dialog feldobása

Submit <input type=„submit”>

Plain Text <input type=„text”>

Ha az oldalunkat „upgradeljük” HTML5-re 13 új vezérlőt és megannyi új funkciót / attribútumot kapunk

Form funkciók támogatottsága (átlag)

Internet Explorer -Firefox 4.0+Safari 4.0+Chrome 3.0+Opera 10.0 +iPhone 4.0+Android –Mi van akkor, ha az adott böngésző nem támogatja az adott form elementet?

Egy egyszerű <input type=„text”> lesz

Placeholder Text

Amikor a textboxba, még nem írtunk semmit, és nincs rajta a fókusz, akkor egy alapértelmezett szöveg jelenik meg.

Tehetek a placeholderbe képet?Nem. Csak szöveg kerülhet bele.

Formázhatom a placeholdert CSS-el?Néhány böngésző támogatja

<form> <input type="text" placeholder="Search" /></form>

Autofocus field

Ha azt szeretnénk, hogy a fókusz rögtön az adott vezérlőre kerüljön.

Lásd Google.com

<form> <input type="text" autofocus/></form>

Megoldás Internet Explorer-re

Egyéni JavaScript kód

<form name="f"> <input id="q" autofocus> <script> if (!("autofocus" in document.createElement("input"))) { document.getElementById("q").focus(); } </script> <input type="submit" value="Go"></form>

Elemek szerkesztése

Bizonyos esetekben szeretnénk az oldalon megjelenő tartalmat szerkeszteni. (IE8 is támogatta)

HTML5 –től minden elem ellátható egy contenteditable jellemzővel.

Ha elláttuk az adott elem (pl. Div) szerkeszthető

Email mező

Sima text mezőként lesz megjelenítve!

Validációnál fogjuk igazán hasznát venni.

Mobil böngészőknél speciális virtuális billentyűzet kiosztás

Kipróbálás validációnál

<form> <input type="email"></form>

Web cím mező

Sima text mezőként lesz megjelenítve!

Validációnál fogjuk igazán hasznát venni.

Mobil böngészőknél speciális virtuális billentyűzet kiosztás

Kipróbálás validációnál

<form> <input type="url"></form>

Numeric Up-Down

Számok megadásaEddig textbox segítségével / külön Ajax / jQuery / stb vezérlők

TulajdonságokMin – minimum értékMax – maximum értékStep – Lépésköz (Alapból egy a lépésköz)

<form> <input type="number" min="0" max="10" step="2" value="6"></form>

Number mező ellenőrzése


Azok a böngészők, amik nem támogatják egy egyszerű textbox-ként jelenítik meg. A további tulajdonságokat figyelmen kívül hagyja.

if (!Modernizr.inputtypes.number) { // no native support for type=number fields // maybe try Dojo or some other JavaScript framework}

Numeric Up-Down (mobil)

Mobil böngészőknél a Virtuális billentyűzetet határozza megSpeciális számbeviteli mező

Range - Slider

A Slider is numerikus érték meghatározására jó, csak a reprezentációja más. (Telefonra nem optimalizált)

TulajdonságokMin – minimum értékMax – maximum értékStep – Lépésköz (Alapból egy a lépésköz)

<form> <input type="range" min="0" max="10" step="2" value="6"></form>

Speech Input

Beszéddel történő szövegbevitelCsak angolul tud Kizárólag a Google Chrome ismeri

--enable-speech-input <input type="text" x-webkit-speech />

Auto Complete mező

Gyorsított és helyes szövegbevitelt segíti elő

<input list="cars" placeholder="Auto complete" /><datalist id="cars"> <option value="BMW" /> <option value="Mazda" /> <option value="Volvo" /></datalist>

ProgressBar

Folyamat jelölése (Érték jelölés)

Folyamatos munka jelölése (nincs érték)

Amennyiben nem támogatja a böngésző, akkor a szöveges érték fog megjelenni. (Fallback)

<progress value="75" max="100">3/4 complete</progress>

<progress>working...</progress>

Date Pickers

HTML4-ben nem volt Date Time Picker. JavaScript FW-el lehetett megoldani

jQuery UI,DojoYUIStb

A HTML5 végre támogatja natívan a Date Picker vezérlőt, mindenféle script nélkül.

Date Pickers - Támogatás

Jelenleg csak az Opera támogatja!9.0 felett

Chrome támogatás. (Nem teljes)

Date Pickers - Típusok

<input type=„date”>

<input type=„datetime”>

<input type=„month”>

<input type=„week”>

<input type=„time”>

Search box

Safari és Google Chrome támogatja

A legtöbb böngésző egy egyszerű textboxként jeleníti meg.

<form> <input type="search"></form>

Color Picker

Jelenleg csak az Opera 11 támogatja!

Visszaadja a kiválasztott színthexaban!

<form> <input type="color"></form>

Mobil függelék

type=„text” type=„number”type=„emial” type=„tel”

Validálás

„Minden input az ördögtől származik.”

Hol végezhető el a validálás?Kliens oldalon (JavaScript)Szerver oldalon (ASP.NET, PHP, JSP)

HTML5 validálás

Nincs szükség kliens oldali scriptekre a validáláshozSpeciális kontrolokhoz a validálás automatikus

Email mezőzWeb address (URL) mezőNumbersStb

A figyelmeztetés böngészőkben különböző lehet

Email URLFirefox 4

Chrome 10

Opera 11

Validálás támogatottsága

Internet Explorer -Firefox 4.0+Safari 5.0+Chrome 10.0+Opera 10.0 +iPhone -Android –

Required Fields

Nem csak automatikus validációink vannak A leggyakoribb eset az, amikor a kitöltést akarjuk erőltetniRequired attribútummal lehetséges

<form> <input name="demo" required> <input type="submit" value="Search"></form>

Opera esetén a name attribútumot mindenképp adjuk meg!

Testre szabható validálás

Néhány böngésző támogatja a validációs elemek testre szabásátAkár CSS-ből is

<style> [required] { border-color: #88a; -webkit-box-shadow: 0 0 3px rgba(0, 0, 255, .5); } :invalid { border-color: #e88; -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8); }</style>

Validáció - Regex

RegEx validáció is lehetségesPattern attribútumhoz meg kell adnunk a RegEx kifejezést

<form> <input name="demo"placeholder="(555) 555-5555" pattern="^$?\d{3}$?[-\s]\d{3}[-\s]\d{4}.*?$"/> <input type="submit" value="Search"></form>

Validálás mellőzése

Bizonyos esetekben nem szeretnénk validálni a tartalmat.

Ilyenkor a novalidate attribútummal tudjuk mellőzni a validációt

<form novalidate> <input type="email" id="addr"> <input type="submit" value="Subscribe"></form>

Összetett Form készítése

Form elemek kipróbálásaOpera, FireFox, Chrome

Demo

Local Storage

Egy kliens alkalmazás natívan támogatja az adatok tárolását

Ini fájlXML fájlRegistryStb

Egy webes alkalmazásnál a kliens oldalon eddig szinte csak a Cookiek voltak.

Kicsi a méretük (4 kb)Minden kérésnél elküldésre kerül a tartalmukNem titkosított (alapból)

Amire viszont szükségünk lehet

Magas tárhely igény kliens oldalonPerzisztálás az oldal újratöltésénél történjenNem szükséges az adatokat a szerver felé küldése

HTML5 előtti megoldások

Internet Explorer – userData64 kb mindenre elég

Flash 6 – Flash Cookies100 KB – Ma már 1 MB – 10 Mb

Google GearsSQLite – beágyazott SQL adatbázis

HTML5 Storage

Iparban elterjedt nevek:Web StorageLocal StorageDOM Storage

Kulcs / Érték páros tárolásAz adat perzisztálódik akkor is ha elnavigálunk az oldalrólBezárjuk az oldaltBezárjuk a böngészőtNem küldi vissza a web szervernek (csak manuálisan)

FAQ Storage

Mekkora a web storage ?5 MB / DomainBizonyos böngészőknél ha meghaladjuk engedélyezhetünk további területeket (10 Mb) De gondoljunk bele, hogy csak egyszerű adatokat tárolunk szöveges formában

Mi van akkor, ha túllépjük az 5 Mb-ot?Kivételt dob - QUATA_EXCEEDED_ERR

Kérhetek több területet?Nem!Az Operánál beállítható.

Storage támogatottsága


Storage funkció ellenőrzése



function supports_html5_storage() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch (e) { return false; }}

if (Modernizr.localstorage) { // window.localStorage is available!} else { // no native support for HTML5 storage :( // maybe try dojox.storage or a third-party solution}

Tárolás

A kulcs csak string lehetAz érték bármi, amit a JavaScript támogat

StringBoolanIntegerFloat

Az adat sztringként lesz letárolva!

Funkciók

TárolássetItem();

LekérdezésgetItem();

Vagy

var foo = localStorage.getItem("bar");// ...localStorage.setItem("bar", foo);

var foo = localStorage["bar"];// ...localStorage["bar"] = foo;

Adatok eltávolítása

Egy adat eltávolításaremoveItem();

Többi adat eltávolításaClear();

Tárolás figyelése - Események

Ha elemet helyezünk vagy veszünk ki belőle eseményekre is feliratkozhatunk

Internet Explorer 8 alatt nem működik!

if (window.addEventListener) { window.addEventListener("storage", handle_storage, false);} else { window.attachEvent("onstorage", handle_storage);};

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

Local Storage

Egyszerű tárolási mechanizmusok kipróbálása

Demo

De hol van fizikailag eltárolva?

Windows Vista / 7 – Internet Explorer 9 C:\Users\{UserName}\AppData\LocalLow\Microsoft\Internet Explorer\DOMStore\

XML fájlban!

Web SQL Database - WebDb

Relációs adatbázis kezelésSELECTINSERTDELETE UPDATE

SQL-92 szabvány?openDatabase('documents', '1.0', 'Local document storage', 5 * 1024 * 1024, function (db) { db.changeVersion('', '1.0', function (t) { t.executeSql('CREATE TABLE docids (id, name)'); }, error);});

WebDB támogatottsága

Internet Explorer -Firefox -Safari 4.0+Chrome 4.0+Opera 10.5+iPhone 2.0+Android 2.0+

HTML5 History API

Szabványos kezelés a böngésző History funkciójához.

Back gomb Scripttel történő kezelése

Miért szükséges?Olyakor az oldalnak csak egy része frissül (Partial Rendering)

Ilyenkor a cím ugyanaz marad. (Kívülről nem hivatkozható, kereső robotok által nehezen kereshető)

window.history objektumon keresztül kezelhetjük.

History API ellenőrzése



function supports_history_api() { return !!(window.history && history.pushState);}

if (Modernizr.history) { // history management works!} else { // no history support :( // fall back to a scripted solution like History.js}

History API támogatottsága

Internet Explorer -Firefox 4.0+Safari 5.0+Chrome 8.0+Opera -iPhone 4.2.1Android –

CSS3

Cascading Style SheetsEgy stílusleíró nyelv, amellyel HTML vagy XHTML típusú dokumentumok megjelenését tudjuk leírni. A CSS-t a W3C felügyeli 1997 óta. A CSS 2-t 1998-ban implementálták, de csak jóval később kezdték el a böngészők használni, ráadásul a CSS összetettsége miatt a böngészők máshogy értelmezték és ez a web fejlesztés mai állapotára is hatással volt. A CSS 2.1 ennek a problémának kiküszöbölésére született, de még ezzel is több probléma volt.

W3C felügyeliModularizált fejlesztés (Nehezebb elrontani)

Sarkok lekerekítése

A Web 2.0 szent GráljaCSS3-ban adott a Border-Radius

Minél nagyobb az érték, annál kerekebb a sarok

Border Radius elemei:border-radius border-bottom-left-radiusborder-bottom-right-radiusborder-top-left-radiusborder-top-right-radius

border-radius: 10px;

Szín modellek

RGBA, HSL, HSLA szín képzés támogatása

RGBA

HSL

HSLA

background-color:rgba(255,0,0,0.5);background-color: rgba(100%,0%,0%,0.5);

background-color: hsl(0,100%,50%);

background-color: hsla(0,100%,50%,0.5);

Opacity

Elemek átlátszóságát határozhatjuk megBármilyen elem átlátszóságát tudjuk befolyásolniEddig is volt csak…

opacity: 0.8;

<div class="opacity_sample"> <div style="background: navy; opacity: 0;"></div> <div style="background: navy; opacity: 0.2;"></div> <div style="background: navy; opacity: 40%;"></div> <div style="background: navy; opacity: 0.6;"></div> <div style="background: navy; opacity: 80%;"></div> <div style="background: navy; opacity: 1;"></div></div>

Multi-background

Egyszerre több kép is lehet egy adott elem (pl div) háttere

A háttért (vagy mást) mozgásra és interaktívitásra bírhatjuk

JavaScript segítéségével

background-image: url(grass1.png), url(clouds1.png), url(bluesky.png);

Multi-background

Animáljunk egy div-et

Demo

WOFF – Web Open Font Format

Egyedi fontok kezeléseMostantól bármilyen fontokat megjeleníthetünk az oldalon

@font-face szabály@font-face{ font-family: MyFont; src: url(http://mysite/fonts/MyFont.ttf) format("embedded-opentype");}p{ font-family: MyFont, serif;}

Font Face

Babylon5 Font Készlet használata

Demo

CSS3 Apróságok

Meghatározott attribútumok

Szöveg árnyék (Doboz árnyék is létezik)

input[type="text"] { background: #eee}

text-shadow: 2px 2px 2px #000;

CSS3 újdonságok

Képnézegető és jQuery

Demo

SVG – Scalable Vector Graphics

Vektor grafikus képek inline módú készítéseInternet Explorer 9 – SVG 1.1 et támogatXML alapú nyelvvel tudunk grafikákat készíteni

(Akik WPF / Silverlightban jártasak néhány dolog hasonló lesz)

<svg> tagek közé tudunk rajzolni!

JavaScriptből „programozható”

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">

</svg>

SVG a hétköznapokban

Hol lehet ezt felhasználni?

Demo

Téglalap

<rect fill="orange"stroke="black"width="150"height="75"x="50"y="25" />

<rect fill="orange"stroke="black"width="150"height="75"x="50"y="25" rx="10"ry="50"/>

Egyszerű inline rajzolás

Zászló rajzolása

Demo

Kör és ellipszis

Circle

Ellipse

<circle fill="orange" stroke="black" stroke-width="3" cx="40" cy="25" r="20"/>

<ellipse stroke="Green" cx="100" cy="60" rx="75" ry="50"/>

Vonalak<line x1="0.7cm" y1="1cm" x2="0.7cm" y2="2.0cm" style="stroke: blue;"/>

<line x1="30" y1="30" x2="150" y2="85" stroke="red" stroke-width="4"/>

<line x1="50pt" y1="25pt" x2="150pt" y2="25pt" stroke="yellow" stroke-width="3"/>

Polyline és Polygon

<polyline points="15, 5, 100 8,3 150" fill="green" stroke="black" stroke-width="4"/>

<polygon points="15, 5, 100 8,6 150" fill="green" stroke="red" stroke-width="5"/>

Gradiensek

Linear és Radial Gradiens

<defs> <linearGradient id="MyGradient"> <stop offset="10%" stop-color="yellow" /> <stop offset="90%" stop-color="red" /> </linearGradient></defs><rect fill="url(#MyGradient)" stroke="black" stroke-width="5" x="20" y="20" width="300" height="100"/>

SVG Linkek

Egy-egy elem akár hiper-hivatkozáskén is viselkedhet<a xlink:href=„URL”> … < /a>

<a xlink:href="http://www.bing.com" target="_blank"> <rect x="20" y="20" width="250" height="250"/> </a>

Dinamikus rajzolás

JavaScript felhasználásávalA Script tag az <svg> -n belül szerepeljen

<svg> <script> var redcircle; var r; window.onload = function () { redcircle = document.getElementById('redcircle'); r = parseInt(redcircle.getAttribute("r")); } function grow() { r = 2 * r; redcircle.setAttribute("r", r); }</script> <circle id="redcircle" cx="100" cy="100" r="50" fill="red" onmousedown="grow();"/></svg>

Rajzoljunk SVG segítségével

Rajzolás és JavaScript

Demo

Minimál dizájn

Smart Bar és Add-onok

Gyors, egyszerűLassú Add-onok kezelése

Internet Explorer 9

LetisztultA figyelem az oldalra összpontosúl

MegbízhatóBiztonságos és megbízható

InteroperabilisHTML5 & same markup

GPU gyorsítás

Új JavaScript motor

Tiszta web centrikus UI

Windows 7-hez kapcsolódó

Új Tab fül elemek

SmartScreen védelem a letöltéseknél

Add-on Sebesség védelem

HTML5 és további szabványok támogatása

W3C egyűt működés

Szabvány tesztek betartása

GyorsKihasználja a PC-nk képességeit

Dowload Manager

Rendes letöltés vezérlő

WebKit SunSpider v0.9.1

Series10

500

1000

1500

2000

2500

3000

3500

4000

IE8Firefox 3.6.13Safari 5.0.3Firefox 4.0 Beta 10Chrome 10 DeveloperOpera 11Chrome 9IE9 RC

Böngészők harca a GPU-ért

GalacticCanvas Zoom

Demo

window.msPerformance

Új, teljesítmény mérő mechanizmus (DOM API)Böngésző független ajánláskén felterjesztve a W3C-hez.

window.msPerformance -> windows.performance

<script> var w = window; var navStart = w.msPerformance.timing.navigationStart + "ms"; var navStartTime = Date(w.msPerformance.timing.navigationStart);</script>

F12 „élmény” – Developer Tools

Console TabCSS SzerkesztéseScriptek DebugolásaEsemények

Network TabHTTP / HTTPS forgalom figyeléseKérés / Válasz megjelenítéseCookie, Chache Információk

Internet Explorer 9 Dev. Tools

Developer Tools

Demo

HTML5 szabvány megfelelése

Azonos megjelenés

9

http://ie.microsoft.com/testdrive/HTML5/BorderRadius/Default.html



Site Pinning

A weboldal egy alkalmazásnak látszikGombnyomásra le tudjuk telepíteni magunkatKiértesítéseket küldhetünk a Taskbar-ra!Egyedi, nagyfelbontású favicon, színséma átvételeOldal specifikus, dinamikus kontextus menüEgyedi előnézeti kép, nyomógombokkal

Kezdjük el

További kiegészítéseket tehetünk• Egyedi információk közlés

• Pinnelés programozott módon

• Ikon testre szabása

• Jump List Taskok készítése

• Thumbbar gombok létrehozása

• Felhasználók azonnali értesítése

• Navigációs gombok színének testre szabása

Ahhoz, hogy az oldalunkat a tálcához fűzzük nincs szükség

változtatásokra

Meta információk elhelyezése

Nem kell a tartalomba belenyúlniAlkalmazás neveTooltip (Tálcán megjelenve)StartUrl (Akár más oldalra is mutathatunk)Ablak méreteNavigációs gombok színe

<meta name="application-name" content="Devportal" /><meta name="msapplication-name" content="Devportal - Magyar fejlesztői közösség" /><meta name="msapplication-starturl" content="http://devportal.hu" /><meta name="msapplication-window" content="width=1024;height=768" /><meta name="msapplication-navbutton-color" content="#FF3300" />

Fájl alapú megjelenítésnél nem támogatott a pinnelés. Hosztolva képes.

Ikonok

HTML5 Favicon használata

Best Practise - Az ikon fájlnak célszerű tartalmazniaAjánlott: 16x16, 32x32, 48x48Optimális: 16x16, 24x24, 32x32, 48x48, 64x64

<link rel="shortcut icon" href="/favicon.ico">

JumpList menük hozzáadása

Meta információkkal

JavaScript

<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.htm; icon-uri=http://host/icon1.ico" />

<meta name="msapplication-task" content="name=Task 2; action-uri=http://host2/Page2.htm; icon-uri=http://host2/icon2.ico" />

window.external.msSiteModeCreateJumplist('New Music Notifications');window.external.msSiteModeAddJumpListItem('New Music', 'http://localhost/reminders.html', '/alert.ico'); window.external.msSiteModeShowJumpList();

Honlap a Start menüben

Honlapunk indít ikonját akár a Start Menüben is eltudjuk helyezni.if (window.external.msIsSiteMode) { if (window.external.msIsSiteMode()) { // Site modeban vagyunk } else { window.external.msAddSiteMode() }}

Értesítés küldése

JavaScriptbőlIkon megjelenítése

Ikon eltávolítása

window.external.msSiteModeSetIconOverlay('http://host/overlay1.ico', 'Overlay 1');

window.external.msSiteModeClearIconOverlay();

Thumbbar gombok

(Táv)irányítható Web oldalBetekintő nézetben

Maximum 7 darab

var but1 = window.external.msSiteModeAddThumbBarButton(http://host/speaker.ico', 'Mute');document.addEventListener('msthumbnailclick', handler, false);window.external.msSiteModeShowThumbBar();

Windows 7 kényelmi lehetőségei

TaskbarJumo ListÉrtesítésekStart MenuThumbbar buttons

Demo

Turóczy AttilaLivesoft Kft.http://[email protected]

http://www.livesoftkft.com/

Bevezetés a HTML 5 világába

Documents

Transcript of Bevezetés a HTML 5 világába