HTML5

dr. Urban Sedlar

Splet je hitro se razvijajoče področje

Število spletnih strani skozi čas

Vir: 100 Million Websites,

http://www.useit.com/alertbox/web-growth.html

2 / 66

…. 2012

650.000.000

Evolucija spleta

Sprva namenjeno izmenjavi informacij v znanstvenih krogih

CERN

Kasneje, sladno z vedno večjimi pasovnimi širinami

Multimedijske vsebine

Vedno večje število spletnih strani…

…in uporabnikov

Vedno zmogljivejša strojna oprema

(dekodiranje videa, avdia, 3D rendering)

Danes

Spletna aplikacija v brskalniku lahko

že povsem zamenja nativno aplikacijo

Tako na mobilnih napravah kot na namizju

Jutri

Google Chrome OS namesto Windows?

Spletni operacijski sistemi?

3 / 66

Tehnologije

Nekatere izmed spletnih tehnologij

se niso bistveno spremenile že 20 let

Najbolj očitna: HTTP

Šele danes: SPDY draft

Nekatere so se razvijale počasi, v koraku s številom spletnih

strani in uporabnikov

HTML 1.0 [1991] … prva spletna stran

HTML 2.0 [1995] … splet ima 10.000 spletnih strani

HTML 3.2 [1997] … splet ima 500.000 spletnih strani

HTML 4.0 [1997] … splet ima 1M spletnih strani

… 10-letna pavza, kjer se je razvoj pluginov, zlasti Flasha

kompenziral pomanjkanje nove standardizacije…

HTML 5 [2008] … splet ima 200M spletnih strani

4 / 66

Odprtost

Svetovni splet je vedno bil odprt

Zgled mnogim drugim sistemom

Kdorkoli lahko doda svojo strojno opremo

In s tem fizično "razširi" Internet

Kdorkoli lahko doda svoje vsebine

In s tem "razširi" svetovni splet z novimi spletnimi stranmi

Odprtost je popolna

Znani so vsi protokoli in standardi

(objavljeni v ASCII txt obliki na spletu)

Brez kršenja patentov lahko kdorkoli implementira svoj strežnik

Ali postavi svojo spletno stran

Določene dodane komponente kvarijo odprtost

Zaprte (proprietary) tehnologije, npr. Adobe Flash

Spletni velikani se borijo za standardizacijo odprtih nadomestkov

5 / 66

Osnove spleta

7

HTTP protokol

HTTP protokol

Text based

Stateless (za ohranjanje stanja mora poskrbeti razvijalec)

Odjemalec in strežnik

zahteva/odgovor

Potek posamezne zahteve

Vzpostavitev povezave

Avtentikacija

Obdelava zahteve

Vračilo odgovora

Prekinitev povezave

8

HTML

HyperText Markup language

(jezik za označevanje hiperteksta)

je podzvrst jezika XML

Extensible Markup Language (razširljiv označevalni jezik)

Označbe in atributi

Označbe so inkapsulirane med znaka < in >

Začetne in končne označbe ter prazne označbe

HTML

Je XML s fiksno določenimi označbami in atributi

HTML določa strukturo in izgled dokumenta

Kontejnerji (div, span), slike, tabele, hiperpovezave

Poudarjanje besedila, spreminjanje pisave, spreminjanje ozadja

Omogoča prenos bogatih besedil (rich text)

v osnovnem ASCII naboru (plain text)

9

Primeri HTML označb

to je <b>moje</b> besedilo to je moje besedilo

to je <font color='red'>moje</font>

besedilo to je moje besedilo

to je <font color='red'><b>moje</b></font>

besedilo to je moje besedilo

<br /> prelom vrstice

<hr> horizontalna črta

<p> </p> odstavek

<img src='…' /> slika

<a href='http://www.google.com'>Link</a> Link

<div>, <span> okvirji in razdelki

<table><tr><td></td></tr></table> tabela

<script language='javascript'> Javascript

programska koda

10

CSS stili

Cascading style sheets

Poseben jezik za opis oblike HTML dokumenta

Za vsak HTML element lahko povemo:

barvo (polnilo, obrobo)

položaj (absolutni, relativni)

pisavo

ozadje, posebne učinke

Stile lahko določimo

V ločeni datoteki

Znotraj HTML datoteke

Veljavnost stilov

Prednastavljene vrednosti (glede na izbran brskalnik).

Določene vrednosti se lahko dedujejo.

11

Javascript

Skriptni jezik

Interpreter implementiran v vseh spletnih brskalnikih.

Enostaven.

Pogojno objekten.

Uporaba:

v ločeni datoteki

Znotraj HTML datoteke

Omogoča dinamično spreminjanje spletnih strani.

Je osnova za WEB 2.0.

Številne optimizacije

(lahko tudi več MB javascripta v spletni aplikaciji)

Delno compilanje

12

Spletni brskalniki

Desktop

Internet Explorer, Mozilla Firefox, Google Chrome, Apple Safari, Opera

Mobile

Safari, Opera Mobile, Opera Mini s proxijem

Embedded

IPTV: Opera, Ant Fresco

So “operacijski sistem” za

spletne aplikacije

“Platform independent applications”

Problemi

Do 8 hkratnih povezav – velik problem

Obstajajo obhodne rešitve

Rezanje slik s CSS

Spletni brskalniki niso vsi enaki

Različna interpretacija HTML, CSS, javascript

Uporaba user-agent polja v glavi

13

Spletni brskalniki (2)

Srce brskalnika je rendering engine

Apple Webkit (odprta koda) Google Chrome, Safari, Mobile Safari,

Nokia mobile browser, Blackberry Mobile Browser

Mozilla Gecko Firefox, Camino, Netscape

Opera Presto Opera, Adobe CS2

MSIE (zaprt)

Tekma med različnimi proizvajalci

Razvoj novih in hitrejših JavaScript interpreterjev

Rhino, Spidermonkey, Tracemonkey (Mozilla)

V8 (Google)

Squirrelfish (Apple Webkit)

Carakan (Opera)

ACID3 test podpore spletnim standardom

http://acid3.acidtests.org/

14

AJAX

Asynchronous Javascript and XML

Skupek tehnologij

XHTML in CSS

(oblikovanje strani)

DOM (dostop do

modela strani)

XMLHttpRequest

(asinhrona izmenjava

podatkov s strežnikom)

XML, JSON (podatki)

Vir: www.adaptivepath.com

15

AJAX

AJAX omogoča:

da spletne strani delujejo kot programi

ter komunicirajo s strežnikom v ozadju (brez reloada)

16

Demo: preprosta aplikacija

AJAX ura

Spletna aplikacija pove, koliko je ura na strežniku

http://tweb.ltfe.org/urban/ajaxdemo/index.html

17

Dogajanje v ozadju

Spletna stran vsako sekundo vpraša strežnik

HTML5

19

Uvod v HTML5

Naslednja različica formata HTML

Podpora videu <video src=… />

Shranjevanje podatkov v brskalniku (local storage)

Web workers

Web sockets

nadgradi HTTP povezavo v full duplex

strežnik lahko pošlje podatke brskalniku po že vzpostavljeni povezavi

Geolokacija

JS API za lociranje

Canvas

risanje z JS;

2D in 3D (WebGL)

CSS3

Font face: podpora poljubnim fontom

Prosojnost, rotiranje elementov

Zaobljeni robovi, gradienti, sence

20 / 66

Primer: zmogljivost HTML5

Port Quake II v JavaScript

uporaba WebGL, HTML5 canvas, HTML5 audio in Web Sockets,

HTML5 local storage

online multiplayer, 60fps, teče v Chrome in Safariju (Webkit)

Canvas

Canvas

Površina za risanje znotraj brskalnika

risanje z uporabo javascripta

Omogoča to kar je bilo prej potrebno rešiti z vtičniki

animacije

igre

vizualizacija podatkov

grafične aplikacije

…

Canvas ni vektorski!

spremembe velikosti slik so vidne

vse je narisano kot ena, flat slika

vsaka sprememba zahteva ponovno risanje celotne slike

22

Canvas in trenutna podpora

2D podpora v vseh modernih brskalnikih

3d podpora (Web GL) – Chrome, Firefox, Safari

Podpora tudi na mobilnih terminalih

IE8 in nižje ne podpira canvas elementa

ExplorerCanvas (http://excanvas.sourceforge.net)

simulacija canvas API-ja s pomočjo VML – Microsoft vector markup

language

Google Chrome Frame (http://www.google.com/chromeframe)

uporaba chromovega render engina kot IE plugin

Flash CS5 -> export to HTML5 canvas

23

Uporaba canvas elementa

<canvas id=„myCanvas“ height=„200px“ width=„200px“ />

določiti je potrebno širino in višino elemeta

Določimo kontekst uporabe canvas elementa

2d oz. 3d => webgl

24

Oblikovanje canvas elementa preko CSS

pozicija, robovi, ozadje,…

Pozicioniranje likov

25

0,0

y = 150

x = 200

200,150

canvas

Risanje enostavnih likov

Črta

26

Pravokotnik

Risanje enostavnih likov

Krog

27

Lok

Risanje kompleksnih poti

Path

28

Uporaba slik in videa

V canvas polje lahko izrišemo vsebino slike ali frame videa

sliko lahko nato poljubno obdelamo in prepišemo originalno sliko

29

Pisanje teksta

Omogočen je vnos teksta v canvas polje (fillText)

določimo lahko standardne atribute (pisava, velikost, poravnava,…)

z uporabo več slojev dosežemo učinkovite efekte (3d tekst,...)

30

Transformacije

Transformacije se izvajajo nad contextom

premik contexta

rotacija contexta

sprememba velikosti contexta

poljubna transformacija contexta z uporabo matrike

31

WebGL (= OpenGL ES)

Kaj je OpenGL

Open graphics library

definira standardne vmesnike za izdelavo 2D

in 3D aplikacij

čez 250 različnih metod, ki so podprte tudi v GPU-jih

primeren za visokoperformančne aplikacije (igre, vizualizacije)

OpenGL ES 2.0 (embedded systems)

podprt podmnožica polne OpenGL specifikacije

Sodobni brskalniki (Chrome, Firefox, Safari)

iOS in Android

Prednosti

standardiziran GPU podpora visoke performance

napiši enkrat, poganjaj povsod (brskalnik, iPhone, Android, exe)

Ideja OpenGL

Lastni podatkovni tipi

neodvisni od platforme (16/32/64bit)

GLint, GLfloat, ipd. namesto int, float

Predpostavlja 3D koordinaten sistem

v njem definiramo točke (x,y,z)

Iz točk sestavimo poligone

Definiramo, kamere, luči

Podobno kot v programih

za 3d modeliranje

Primer WebGL: Google WebGL Globe

http://data-arts.appspot.com/globe-search

Primer: Angry Birds

http://chrome.angrybirds.com/

Prvotno razvito za iPhone / Android

35 / 66

Multimedija

Multimedia

Podpora multimedijskim vsebinam je vgrajena v brskalnik

Bitka med kodeki

Audio: AAC, MP3, Wav, Vorbis (.ogg)

Video: VP8 (WEBM), H.264 (MP4), Theora (.ogg)

Nova medijska elementa

<audio>

<video>

Kontrola preko Audio/Video API-ja

prilagojene kontrole

Česa (zaenkrat?) ne omogoča

avtorska zaščita vsebin (DRM)

adaptive streaming

37

Kontrola predvajanja

Privzete kontrole prikažemo z uporabo atributa controls

38

Medijski elementi imajo

posebej definirane

dogodke:

play

timeupdate

seeking

progress

…

API-metode za upravljanje posnetka in pridobitev podatkov

o posnetku

play(), pause(), currentTime, volume, muted, readyState

API-ji do strojne opreme

40

Geolokacija

Ugotavljanje lokacija naprave

Različne metode (odvisno od naprave):

GPS: 1m (mobilni terminali)

Wifi: 20-50m (skyhook, loki.com)

Cell tower: ~2km (mobilni terminali)

IP geolokacija (država/mesto) dobro deluje samo za IPv4

Geolokacija

JS vpraša brskalnik

brskalnik vpraša OS

OS odgovori brskalniku

brskalnik odgovori JS s klicom callback procedure

http://tweb.ltfe.org/urban/geo.html

Primer: mobilna naprava

Primer: Firefox

43 / 66

Druga strojna oprema / periferija

Mozilla WebAPI

Velik nabor podprtih API-jev https://wiki.mozilla.org/WebAPI

Večina še standardizirana

Targetirajo tako mobilne kot namizne brskalnike

Primeri

WebTelephony upravljanje s klici na telefonu

Vibration proženje vibracije

WebSMS pošiljanje/branje SMS

Camera API fotografiranje

Mouse Lock API zaklepanje miške

Web Bluetooth nizkonivojski dostop do BT

Web USB nizkonivojski dostop do USB

Network information API informacije o omrežju

Battery status API info o bateriji

Calendar API branje/dodajanje dogodkov

Contacts API branje/dodajanje kontaktov

Wifi information API info o Wifi 44 / 66

WebRTC

Real-time communications

Iniciativa

Definiranje vmesnikov za realno-časovne komunikacije v brskalniku

Podpora s strani Microsofta, Googla, Mozille, Opere

V postopku standardizacije (W3C, IETF)

Definira številne vmesnike do strojne opreme in storitev

Zajem mikrofona

Zajem kamere

Avdio in video kodeke z zmožnostjo kodiranja

API za uporabo STUN/TURN/ICE (NAT traversal)

Peer-to-peer API

Podpora RTP (Real-time transport protocol) za A/V streaming

Temelji na številnih danes že predstavljenih elementih

Canvas za prikaz, Web Sockets za sporočanje, ipd.

Stanje

Podpora v sodobnih brskalnikih (Webkit)

46 / 66

WebRTC sklad

47 / 66

Zajem avdia in videa

Nova funkcija getUserMedia()

Trenutno stanje: highly experimental

Podpora samo v najnovejših razvijalskih različicah večine brskalnikov

Pomanjkanje knjižnic za abstrakcijo

Varnostni vidiki

Dovoljevanje dostopa za vsako spletno mesto posebej

Detekcija zmožnosti brskalnika

Razlike med brskalniki; vsak implementira drugačen objekt

48 / 66

Demo

http://neave.com/webcam/html5/ 49 / 66

Web Sockets

Web Sockets prinašajo dvosmerno komunikacijo v

brskalnik

Brskalnik in strežnik lahko pošljeta podatke kadarkoli

Pošiljajo se le podatki, brez overheada

Nižja potrebna pasovna širina

Podpora tudi z TLS/SSL

Nadgradnja povezave

Connection: Upgrade

50 / 66

CSS3

CSS3

52

Zadnja različica standarda CSS

Podpora različnim pisavam

prej na voljo le 6 standardnih pisav,

hkrati podprtih na Windows/Mac/Linux

Podpora številnim učinkom

senčenje

zaobljeni robovi

zrcalni odsevi

prosojnost, gradienti

rotacija

Nekatere lastnosti še niso standardizirane - uporaba

predpon glede na uporabljen brskalnik

Trenutna podpora v Chromu in Safariju, deloma Firefox in

Opera