_e nám sem vlastně představili tak přejdu rovnou k věci
asi to co to co vidíte teďka tak to je oficiální s orgánu to bylo pět T odklon co třeba
ve tři a jestli do příšovice megavzor
a jiná easy že opravdu pravděpodobně ta budoucno
toho webového vývoje leží potom ale pět a ona tam leží pravděpodobně i budoucnost nejen vývoj webových aplikací až na
víte že
velmi pokud nebo budete možná zázemí populární frýbort rysem nefunguje kde můžete vytvářet do tom opět aplikace které potom můžete
instalovat na různá mobilní zařízení
tak aby se tvářil jako aplikace na ty ono to s tím o tom opět není ale tak jednoduché tak
si uděláme jaký menší výlet do historie
roce devadesát osum E chlapci s konsorcia ve tři které historicky toho dva je konsorciu bylo takle trošku o to
že neutrality byla to taková řekněme akademické instituce kde moc nevěděli co se děje nebo ten jejich svět
a v roce devadesát osum dostalo konsorcium léčíte geniální nápad že zruší hotovil že o tom se dále bude pokračovat
že poslední verze do to mohlo bude čtyři nula jedna a že ta jediná záznam budoucnost je i se to
bylo dva nula
leč zapomněli na jednu zásadní věc
_e co se stane
když pustíte nekvalitního to bylo dokument dovedou prohlížeče prosím já ten webový projekt
zobrazení vod informace za prezentace
zobrazí se to norma
za za blbý v otázky budu dávat děravý
normálně se to zobrazí ale lišily by to měl bejt validní ve chtěli by tam byl další vyžadovaná prostě malinovku
na úrovni XML tak prostě v tu chvíli
já to někdo zničilo prostě ten parsed zamčela víc
a takovýdle problém tam v podstatě nulový takže se vytvořila taková
jiná pracovní skupina úplně mimo vorvaně konsorcium resetovat right vertex op když uteklo divokým důvodu D
_e tam byli lidi s průmyslu to založili jednotlivci firem typu opera apple budu a tam se snažili vlastně pokračovat
tomuto mohl
tak aby to začlo odpovídat a specifikace
požadavků nebo
toho I citrusová začne pracovat na web má nových ve forme
formulářový prvky znáte takže nějaká rozšíření a to co tady je pojmenována jako ve application jedna nula tak to tak
nějaká si můžete představit že sou dva skriptová api která umožnila nebo mají umožnit abyste mohli vtom webovém prohlížeči psát
výrazně víc věcí třeba přistoupit na fans systém
o počítače dělám vyživují prohlížeč tak aby se mu třeba stromu zpracovávat bude prohlížeči soubory což u toho operačního systém
v roce dva tisíce šest
vod Y Z konsorcium samozřejmě nic nedodělal o co se týká ludvík zotavilo dva nula a podstatě zjistili že to
před kápli ta věta video v optimisté k je úvod nějakého jich prohlášení
kde se vlasy přiznávají to může to přehnali a co se stalo
oni v podstatě to vodvádět konsorciu podstatě převzalo práci
té skupiny vod vod byl
a to je to co my teď známe jako to bylo pět
takže došlo k tomu že ty že vlastně to vorvaně konsensem krysám historicky staralo o tom opět
jako by navázalo na práci jiné pracovní skupiny jak se dali dohromady a to co neznáme jako potom hloupě teďka
je vpodstatě pochází trošku zvenčí vodvádět konsorcia
snahou tohoto bylo pět nebo asi po prapůvodní snahou bylo tohoto mohl dostat do stavu že mu bylo vždy budu
mluvit jenom u značkovacím jazyce
a hlavně aby to vyhovovalo potřebám průmyslu aby to prostě nedove nějak nebyly tam nesmysly typu
že se jistě
starší dva si budu pamatovat elementům
a jiné kousky jo tak aby prostě o pro u tohoto modulu k tomu k čemu bylo původně určeno
popisu dokumentu aby to nové Z omlouvám nerozhodilo ty stávající věci hlava panáka zpětná kompatibilita taky by to a tak
aby tohoto bylo pět bylo zobrazitelné ve starých prohlížečích
se kterými se můžete potkat typicky velkých institucích jako jsou banky doteďka najdete ladičko pětku
funguje jim to funguje nebudou to měnit na interní systémy nemají jedinej důvod tak ale
i to novýho tam zase musí o o zobrazitelný takovejdle starých prohlíží
asi nejzásadnější věc která se objevila vo tom opět
je popis jak se má chovat párs
toto malo ten pásek nedělám vytváří dokumentům těch model
a jak se má chovat invalidním dokument
tohle se strašně důležitá věc co se vám stane box
když máte má toho tomu dokument
proto byl dokument je program pásem a výsledkem je dokument object model
s čím pracuje java skrývat kaskádový styl i zrakem nemusím dokumentům řeknu
další proto
process dokulil všech modelem a vychýlí vy máte dva různé pásy máte nemalý dokument máte dva různé pásli tam mám
sto můžu vlez dva různé dokument od těch modely protože nikde nebo historicky řečeno
jak se má ten pásem chovat ke mně validní mu dokument
a to je to co nás teďka o tom lokte popisu
to co vidíte tady na slajdu tak máme vlevo máme validní dokument zjevně
a správu máte výsledky dvou pásu
vidíte že jsou rozdílný
protože ten jeden eště neaplikovalo všechna pravidla
pro
toto bylo pět
a že ten dolní si je samozřmě vadný _e todlencto vyprodukovalo nějaká stará verze je teďka a to nahoře děličku
desítkách družstvo odpovídá tým pravdu které jsou popsáno toho spojek ste specifikaci o tom opět někde sem četl že to
chování toho parsuje přibližně šedesát procent procesy
tak aby o pro všechny pásy se na kouli stejně antipatros toho to stejné protože to je to co nám
dělá ve finále problémy ten špatný dokumentu řeknu dat a na to na na to pak závisí míšova skripty a
kaskádový styl
dalším požadavkem
na toto bylo pět
byl nějaký návrat ke kořenu tak aby nám opravdu tohoto bylo pět značkovací jazyk popisoval pouze strukturu toho dokumentu
aby ne popisoval blbosti jako je von
otto máme kaskádové styly
my samozřejmě už máme ve stávajícím potom ale vo tomhle čtyři nebo toho i jedna už byly elementy typu Á
jedna H dva strom které vám říkali toto je nadpis toto je důležité toto je tabulka toto je obrá
ale je to nedostatečné protože nejpoužívanější element kdy
kterým typicky
děláme to rozvržení té stránky
C D
když je pravoúhlá oblast settopbox ale pravoúhlá oba absolutně nic nám neříká o tom co je uvnitř toho element
ono se ale zjistilo zašili uvidíte malou statistiku op chlapcích opery
že ona ta sémantika vaše ta informace o tom obsahu cest objemu
když webových stránkách často je
když se tady povídá se zase na ten obrázek tak to je typická struktura stránky něco nouze něco dole nějaký
obsah nějaká navigace
a v podstatě ta sémantika jako by tam je ale no tak jediný místě
jako hodnota nějakých atributy typicky atribut I D typicky atribut k vás pokud se na to podíváme v reálu
s tím S buď pro níže
znáte
wikipedii
neznáte ta z liberci také neznají
s plzní znali
tak udělám sou to rusy bylo protnul který jsou vestavěných chlívečku alice se tady nemám kontent vede mám super
co takhle facebooku
taky neznáte
to je dobře
tak dvanáct
tady je trošku složitější tento protože to chvilku trvá
rostlý
_e _m tadyhle google kontejner
to zní dobře ale zase pro nějaký třeba speech funkce
takže ona tam ta sémantika
někde vpodstatě schována je
tady více malou statistiku nejpoužívanějších názvu a jiný
podle statistik udělali opeře stále milého osum set tisíc stránek nejpoužívanější název pro aničku je futro následuje kontent a pak
nebyl
_e co myslíte že ale jírova
že jo to je
že máte dost
_e martina typu prosím došlo prostoru
nejsou vám
jak je nejlepší editor to mohl
for
modři
jo toto jaký defaultní házejte sledovali je typicky import prostě _e nějaký průsek způsob
takže na základě vlasy těchto informací byly vytvořeny nové sémantické elementy jsou postupně si můžete představit že to je elementy
ale tomu elementu diffie dána po sémantika
takže
vlevo vidíte to staré
pro uvidíte to nové takže máme element cedr máme ale artikl nás je pro navigaci center pro pak tyč
že se matických elementů je víc takže tady nějaký víta těch sémantických elementů o to samozřejmě ví velmi zajímavý je
třeba s kombinace signum a ke všem to slouží k tomu abyste mohli dát typicky popis jako obrázku C your
obrázek si ke všem R prostě asi že ten
že mu ten popisek patří takže se to dá použít pro tabulky nebo pro nějakej nemůžeme objekt jako třeba zbydou
nebo audio
to ale nemusí mít dostačující
samozřejmě vím od můžete mít potřebu popsat
něco jako něco složitějšího vy si představte že byste chtěli
mít možnost jakoby popsat opravdu velmi dobře třebas kníž
se musí mít stovky tisíce element
_e proč něco takového udělat o tom že víte že webový stránky se zpracovali nějakými automaty typicky vyhledávačů učitelky zná
tak let různé agregátu třebas nakupí služeb takle heuréka vložit lze
to potřete tam ten opravdu stavbami musí dat import
nebo export dat pro vás systém takovýdle agregační anebo tam musí být napsal robotky před a aby poznal že todlencto
je méno produktu todlencto je třeba částka pojďte pro účtují todlencto je nějaký rate i
ono když se vrátíme zamyslíte vám to může připadat jednoduché ale pro ten počítač který nemá
to prostě stupeň stroj
tak některé věci pro ní můžou být extrémně problematické
má oblíbená ukázka
co je podle si myslíte
adres výborně to na tom zase slonem že by todle mohlo by to press
zkuste to vysvětlit počítači majitele
_e trošku složitější třeba osmička
tak zase že to číslo popisné
do si myslím že to je číslo orientační
a teď si to zdůvodněte proč si to miss
že bejt voboje
se romistice
záleží hrozně na tom kdo jako zkusme se třeba staročeské obchodního rejstříku jo
nemůžete říct
co to je bez nějakých dalších informací
ve chvíli tam napíšu něco takovýdleho
tak je to nás devadesát devět procent todlencto bude číslo orientační
praha velký město je velmi nepravděpodobný že by to todlencto byl osmý barák v praze
jo je to velmi nepravděpodobné
pokuď to bude ale něco takového
tak selhání
to klidně může bejt osmej barák zkrátka autě
todlencto nejste schopni tom počítači v podstatě předat tak aby to nebylo stoprocentně rozpoznatelný pak tam kdybyste se museli koukat
nějaký tu adresu z Í prohnat nějakou databází tam to zkusit porovnat co by to asi tak mohlo být a
tak dál
tady s tohodlenc z toho důvodu
abyste byli schopni popsat
jakoukoliv informaci kterou potřebujete tak
aby tomu rozuměl i počítač
pak vznikli institut mikro dat možná budete závěs mikroformáty
historická to věc tuto chvíli takže pomocí mikro dát můžete k libovolnému elementu
třída jeden z těch pěti atributů nebo jejich kombinaci
a na základě nějakého buď obecně uznávaného slovníku
nebo si můžete vytvořit slovník vlastní
ste schopni popsat co potřebuje
tady prosím aortu udržuje seznam obecně záleží slovníku využívá je by využívaj využívá jamu právě pro své vyhledávače a pro
nějaké automatické zpracování dat tak jak to vypadá praxi
tady se podíváme na schéma or
uděláme se do schéma
já sem třeba sme o té knížce tak vidíte že knížka je kreativní dílo a je to věc
a tady máte vlastně
nějaké vlastnosti pomocí kterých může se
popsat knížky
najdete třeba tady to velmi důležité je zde čím ste schopni trošku jednoznačně identifikovat
možná mohu vypnout post
v praxi to vypadá následujícím způsobem
norka marka mikro data
pokoje schováno
vtom to element tudy
patří k sobě
a má to odpovídá toho
todlencto mu slovníku událost
tady mám potom jednotlivé vlastnosti a zde má třeba vlastnost teda jsme location to za deset a událost kuna a
opět a jsem scope
je to zase nějaká podskupina
která odpovídá nějakému typu
play místo
a tak dále takže pomocí tohodlenctoho těchto mikro dáte schopni popsat cokoli buď pomůžu existující slovní nebo si může vytvořit
slovník vlastní a pokud se třeba stane nějak obecně uznávaným že se zase zařadit nějaké té velké databáze jako je
C má or
nedávno na jedné konference se řešily popis ta pando scan logického spolku říkal jsem to líbí leží fyzice nějaký slovních
pro pro popsání psa
říkám neví musíte se podívat nebo si vytvořit pro
takže vidíte že ta sémantika je opravdu velmi důležitá
todleto málo pět samozřejmě primární učení jaké automatické zpracování poví stránek vyhledávače až samozřejmě tohlencto je extrémně důležité
pokuď k tomu
webu přistupuje někdo do typicky nepoužívá displej
ale používá nějaká jiná výstupní zařízení jako jsou hlasové čtečky nebo bejva zátka prostě slepci pro je to může být
taky velmi důležité se jsou schopný romo skočit čas a obsah té stránky protože vědí že nebo ta čtečka ví
že element artikl popisuje ten hlavní obsah na stránce nebo že element na tam najde navigaci a tak dále
že S I i said to sokety postranní panel že třeba se může úplně ignorovat veličina krát reklama nic jiné
další novinka která je taková trošku kontroverzní tak je podpora multimédií zhotovil opět
_e myšlenka byla taková aby jste mohli přehrávat multimediální obsah audiovideo ani byste potřebovali doinstalovat nějaký flagy
tohlencto je extrémně důležité nebo todlencto na bylo na veliké důležitosti ve chvíli kdy se objevila pruhu jedno zařízení které
podporovalo flash
a jsou I P
tu chvíli tam vy chcete přehrát stránku weby do ve stránce taky dělá možnosti v podstatě o tom opět nebo
nějaká externí api k
leč na úrovni konsorcia ve tři dali ruce pryč o formátu
to
vy do nebo audio obsahu a vznikly nám tady takové drobné formátové války
začalo to tím že na byli takový dvě skupiny
microsoft a
google překvapivě
a my sme podporovali společně s problém se poprali forma návěsti šedesát čtyři de facto průmyslový standard
ano je zatížen patenty ty patenty vlastně jaké nějaká společnost rasou postará pro uživatele je to zadarmo je to prostě
ty patent _e poplatky podvádí producent popsal typicky výrobci bude kdy skupina bude jste používat
ale je to průmyslový defakto standa
druhá skupina svoje vox opera
ne ne ne všecko musí mít svobodné musí být formát bude používat ok by
je takovej ten formát jaké s
prostě ta kvalita protivína dvěstěšedesátku stupně zoufala ale to svobodný pro všecky musím
i tu google koupil formát web osum
nebo frekvence osum udělal formát ve M přestal podpora návěsy šedesát čtyřku
tady momentálně se situaci kdy microsoft dělá plodin do chromu kvůli návěsti šedesát čtyřce a budu dělat proplatím do ježka
univers M
na rovinu
pokuď
jaký formát použít
takže pokud se ten stoprocentní slepota všechny tři
takže vy budete mít dobře formátech
alebo musíte velmi dobře vlasy klientelu pokuď toto uživatele mobilní zařízení a dvě stě šedesát čtyřka
pokuď víte že jsou to lidi který používají já nevím krom primárně tepem prosím musíte znát ve finále toho svého
klienta
_e co se týče _e toho formátu nebo toho videa tak momentálně poslední věc _e na kterou jsem narazil jedna
díky knížce která vyšla teďka v češtině _e potom opět vy do u nějaký kompletní průvodce se to menu docela
dobře napsala knížka pro dobrým příkladem ale dobře jakoby obsahuje výborná
a díky tý tu martina astman a tak momentálně se začínají začíná experimentovat se specifikací pro titulky tak aby se
kromě zdroje vydá mohli dál zdroj titulků automaticky tom přehrávač a prostě jeli titulky což zase velmi důležité situaci pokuď
se teďka přístupný V třeba pro neslyšící tam si to video je potřeba mít otitulkovali
a jak to vypadá praxi
no zjistíte že to je všecko vcelku
asi jednoduché a jasné
tak audio
audio zdroj automatické přehrávání ovládací prvky
slída
video
nemlich to same
o prostě přehrá metody do nic vás
roste
a teď
vydal je audio
může být z jiné domény nižší vaše aplikace že můžete cross doménu je tam jedna jediná výjimka kterou vidíte za
malou klíč
pokuď
webový prohlížeč my sme popadli element video tak se vlastně pomůžete obsah který jedním sonetu kdo je tam zase může
pracovat nebo flash nebo něco jiného pro přehrání toho obsahu
aby jo
je box element
takže jo můžete stylová
jo otočit kulatý roli je to normální box element
jo určitě se todle uživatelům líbit přímý a ovládání
_e samozřejmě
jak elementu audio tak elementu video máte java skriptové api takže se schopni si třeba zapsat vlastní přehráváčem
dá se s tím kde prostě to co potřebujete pomocí _e a týče
takže vás asi nepřekvapí
že tady mám něco typu
play mám tady nějaké události přehrávání skončilo tahleta událost je velmi důležitá situaci i potřebujete aby a na sebe nějaké
zvukové vstupy navazovaly
vektoru se událost E o které která vlastně říká že to všecko nahráno do paměti toho počítat do toho do
paměti klienta tak aby to šlo přehrát aniž by se někde bufferovaná nebo něco takového tomatem se celé paměti todleto
se používá při nějakých různých synchronizačních
ten _e řízení prostě do na jedno stopám se pouštět další sazba na pozadí nějaké hry nebo něco takového že
máte k dispozici kompletního skryto elpíčko abyste byli schopni jak by do tak audio bezproblémů vláda
další zajímavá věc kterou
promiňte
další zajímavá věc kterou najdete vod minule pět tak je tady vás
_e ta nová si je
nějaké plácnul a které můžete kreslit
_e kreslí se tam systémem javaskriptu takže scrum nasune můžete udělat co statický obrázek vždycky se mikro se na straně
klienta dělat který
je to relativně jednoduché získám se kontext kam vlastní pak mám celou řadu metod jako _e
vypl nějakou vlastnost o barvu udělej rámeček a tak dále a tak dále můžete za chvilku
roce velmi důležité a je to věc která relativně nova tak vzniká specielní skupina pracovní na úrovni konsorcia o ve
tři která se zabývá výkonem
no a skriptových aplikací
proč
co jako by proč todlencto se tam řeší respektuje abyste měli jako by
o tom sedí kolem a optimalizací láskyplný chlapíka
důvod je jednoduchý jsou to zase mobilní zařízení tak abyste měli k dispozici nějaká up íčka práh když se budu
optimalizování chovat vůči tomu zařízení tak abyste třeba šetřili baterku
klasicky příklady že máte nějakou animaci ta derivace svícnu dělá takže máte nějakou smyčku kterou voláte pořád dokola a tam
překreslete ten tu scénu
jak tak jak uděláte periodicky sepisovat pořád dokola
metoda jo skriptu
set interval se tady mám
pro s
neposloucháš martine prezervativ někam
děkuji
jo že klasika většinou checked aby to facto super vychladlou topit jak se a ta se té set intervalu nula
nevoláte třeba v deset milisekund
ale to je nesmysl
proč si proč třeba si jaká jaký nejmenší interval který dává smysl
je to za dva prezervativ
no protože
čtyrycet milisekund je pětadvacet snímků za vteřinu to není to co mám na mne
to je vono
jaká je oseva jaká obnovovací typicky
šedesát jsou to zná nejmenší interval který dává smysl technicky je šestnáct celých šest milisekundy
šedesát herců
jo
nic jiného smysl nedává
vzácnost pořádku nejsou prošlý jo nebojte se
ta
ale ta metoda rychle shrneme ženu prej vlastně zajišťuje aby se ta aby se to volalo
nějak optimalizování vůči tomu hardvéru a třeba situaci kdy uživatel to okno s tím nebojí prohlížeče minimalizuje nebo tři které
oknem jiným no tak se to vypne protože proč by tam já se měla běžet když se na ní do
nekouk a a opět šetří něco baterku a těch mobilní zařízení tak poďme se podívat na
tam zas praxi
_e znáte
užásný textový _e pardon _e grafický editor malování ve windows
super jestli ho znáte takovýto jabkama se v podstatě
zkuste si zavolá to tak vypadáme umělecké dílo kvality stíny jak tam mám
získám kontext na to kreslící plátno tadydle se vlastně testu že vůbec kam vlastně podporována
získám kontext toho kreslicího pátera
a je to jak malování ve windows nejdříve si nastavím štětec který si malovat
pak řeknu něco udělej něco namaluju tady vyplň pravoúhlou bla
nastavím další štětec
a teďka nedělám právě vyplň úpravu booleovu oblast ale dělám jenom rámeček nějaké tloušťce
zase změním štětec nějaký gradient a tak dál
vzpomeňte si že všechny
ty útvary které sem tam měl
pardon
měli kolem sebe s tím je to kvůli tomu že vesnice nasel na začátku a pokusem nezmění že pořád sem
jako by držel toho štětce
to je ten systém malování je tady něco nastavím něco udělej něco nastavím něco udělej a tak dál
velmi důležitá věc
vy nemůžete udělat to kdybyste si třeba tady tenhlencten obdélníček
vložili do nějaké proměnné jako objekt a později se řekli ale kde slova jiné pozici
to nejde cokoli tak nesmíte tam zůstává
a je to prostě bitmapa
takže když chcete změnit tu scénu taky musíte celou překreslit
_e se může pro pro nějakou jednoduchou animaci
tady se používá set timeout
na čtyryceti milisekundách
a tady se už používá ten
takle vymejšlím frank až víte že tady na
protože se to vyvolává jinak rychle
a ve chvíli si udělat animaci
spočítám si tady vlastně počítám polohu toho míčku
a tuhlenctu metody
zdroj s který prostě volám pořád dokola a vlastně začnu tím že si nejdříve všecko smažu a pak ten míček
vykreslíme nové pozná nové pozici takle se tady dělají anima
tím že ten ta nová si bitmapový tak tam že můžete pracovat bitmapovými obrázky na můžete tam vložit nějaký obrázek
bitmapový
takže todle obrázek vloženy přes kam vás
to bylo _m
doprava obrázek vložený bitmapový obrázek vložený do kansasu
a tím že se bitmapa tak vy můžete udělat jednu věc
vy můžete
udělat skrýš o
toho talasu
a vzít každýho pixou kdyby se dostanete k těm jednotlivým pixlům na tom karlos
tady ten kam vás udělám si skrýš o máte tam pole
jeden pixel je reprezentován čtyřmi bajty rgb a průhlednost
to pole můžete změnit a pak ho zpátky na teďka rozvrátit že to co vidíte tady ten samej obrázek jako
před chvílí akorát jsem pixelů manipulací udělal inverzní barvy
ano
zajímavá otázka moci
_e
já sem si já sem _e podle já se na todlencto narazil
a je lepší je výkonnosti lepší smazat pelikánova
a vykreslilo znovu
dneš překreslit jenom jeho část
je to trvá dýl
a zase a záleží na tom jaký používáte webový prohlížeč
teď by se to zase proč někam posunulo ale v době kdy vyšla devínská taktika byly init boj proti čtyři
všecko vykreslování obsahu webový stránky včetně textu hnal přes hardwerovou akcelerace
teď sem kala se hardwerové akcelerovaných sem sinus laveček webových prohlížečích
tam zas určitě ze géčko si myslím že by mohlo být taky takže jako by tam ty výkonnostní problémy zas
až tak nejsou ale ve chvíli budete mít nějaký výkonnostní problémy třeba se algoritmus pro to překreslení byl dlouhý tak
můžete využít
to je geniálně se mi nahrál
můžete využít o _e web workers koše vlastně vícevláknový programování javaskriptu udidla malou klíč
zatím _e si udělám screen čeho
a pokud si otevřeme
tady pomocí soubor
takže tady mám asi skrýš o
té proměnné frame
vlastnost data toho screen času obsahuje pole pixlů
dotaz
děkuju za otázku
pošli tam nahoru prosím vás ano toto je možné
já jsem to s toho vyhodil C T protože my lidi říkají jsem příliš pro microsoftí ale to moje práce
zas teda ten problém mají prohlížeče
které implementují tři dekan vás
s technologií ve G L
což je technologie o společnosti korun ostrá nic nemá co dělat konsorcium a ve tři typicky je to implementovaný F
prohlížečích které
mají krátký vývojový cyklus takovéch no a tam šli dělat kousky
a v podstatě ten tři dekan vás to bude vřídel přišlá přímo na ovladač grafiky a trošku vodchází sem nebo
_e webového prohlížeče takže tam šli dělat kousky typu tišnovský lynčovat celá vobrazovka a posílat mimo váš počítač
já si myslím že to je technologie kterou každý nutně potřebujeme úžasnou to
jo
dvě nechalas tydlety problémy popudíme nema
je to problém přijde kansasu aby vřídel
možná už se to někam posunulo todlencto byl stav tedy věděl bylo takto předmluva třeba měsícem vážím se to možná
kampusu ale ano byl tam tento bezpečností problém do zásadního charakteru
je čokl někdy nepodporovalo protože to není součást ve tři
ostatní výrobci prohlížečů to tam prostě podporou si menším rizikem kašlou na to nebo to máte třeba s jednou defaultně
zapnutý paketu defaultně vypnutý můžete si to za průmětnou
záleží na
o autorech budou prohlížeč
_e tady potom nic jako pixlu manipulaci
mám si je to pole a vlastně překreslí _m ty vykreslí mohlo zpátky
a tady sme přišli napojte jaká je tyto z výkonností
tak já tady přeskočím
jeden fly
bod dva slajdy přeskočím
a podíváme se rovnou na web workers proto je to s tím souvisí
ve chvíli kdy potřebujete nebo máte problémy z výkonem který se vám typicky projeví tímž _e měst nějaký skript běží
dlouho a za tu nemám ta stránka něco slideru o tom stránku
jo takhle typicky problém že v tom hlavním vlastně aplikace které se stará o vykreslování o ten D Y které
po tady z interfejs které že běží něco dlouho a není jako by čas na překreslí třeba se obrazovky
takže todlento se teďka nově dá řešit pomocí bez workers
ve worker není nic jiného než vícevláknové programování javascript
mám hlavní vás to aplikace které se mi stará uživatelské rozhraní oplývají stred
já si vytvořím worker
ten word vytváří na základě javaskriptu príma v samostatném souboru tomu sítový samostatném souboru ten kdo skryt
to může v samostatném souboru vyvolám nějakou metodu to uvidíte za chviličku ja
tam i běží ve vedlejším vlastně a když doběhne takto pohlavnímu láku může nás výsledek že hlavní vláknu které sám
stará vždycky o vykresování té obrazovky
pořád funguje jak má protože se všechno dětem vedlejší vlastně
ten systém je takový že vlastně to hlavní vlákno vytvoří worker a
zavoláme zavolá metodu post _m S H
kterou pošle zprávu
do toho vedlejšího vlákna tam třeba předá nějaké parametry
to vedlejší vlákně
je ta zpráva odchycen a dojde ke zpracování a to vedlejší vlákno opět udělá po sme switch do hlavního vlákna
a tím vlastně dojde k synchronizaci těch nula
samozřejmě to vedlejší vlákno nemůže šahat a nemůže měnit to uživatelské rozhraní této uživatelské rozhraní patří tomu hlavnímu vláknu to
můžu Y threadu
ale chvíli by se tam vo toho hrál prostě mu nějaký ten zdroj pravou více vláken takto skončí špatně
takže to vedlejší vlákno
nemá k dispozici třeba v dokumentu object model
vědy nemá to šahat protože ten patří i u ať terén
_e jsem maličký církve s dětma
_e tam je k dispozici _e vy tam máte k dispozici ono se tomu říká mini do a ten mini
do nemine dokumentu vděku data kansas máte zase objekt window tam máte a můžete vnější s ale už tam nemáte
jako co v dokument
jo to můžete problém
no a tímlectím pak můžete dělat zase takovéhle věci
nahoře normální video elementu video
a to dole chánova který si screen co to je to video
a překresluje ho do černobílá
ten fyzicky výpočet ta konverze z barvy do černobílí ho je udělána ve rework hlubokém ve vedlejším vlastně tak aby
mi to všecko nebo plynu a
protože by to třeba se muselo mezi těma jednotlivá frimlova stíhat počítat
jo to by relativně veliký
ulich pixelů eště vynásobíte čtyř má protože každý pixel čtyři bajty že se tam zpracovávat nimi sprostá velký objem dat
závislosti zamořena police toho videa
takže typicky úkol proved worker je jestli ty data zpracuju bokem když vám zpracovaný to vedlejší vlastně tak je to
prostrčím dobou hlavního vlákna
samozřejmě
to je sežene rozdávám čočku ty
takže samozřejmě ne každý frame se vykreslí logicky ale to rozpočet plynulé na to aby to černobílí kdo bylo hezky
plynulý
takže ten networker
je to normální dělat skriptových soubor já tady akorát mám vlastnost on S H a to je
zase tadlencta to podle switch je spuštěná ta funkce ve chvíli kdy z hlavního vlákna
je zavoláno post v S H
takže já tady tvořen worker
tomu pošlu zprávu
k té zprávě mu předám screen čas toho videa
ve vedlejším vlákně se to zpracuje
a zpátky tomu hlavními vláknu vrací
už ten zpracovaný frame pro zobrazení a to hlavně vlákno si to zase odchytí
že události
takže networker S
vícevláknové programování javaskriptu je to tady vopravdu ty rework jsou hodně jednoduchý když byste kdybyste pracovali s klasickýma teda má
tak to zdaleka to jednoduchý být nemusí a tady ten systém udělali opravdu tím posílání zpráv velmi velmi jednu
zkrátíte omezte část takže přejdeme k části která se mi media queries _e necháme dotazy nakonec jo
budeme teďka zčásti media queries koše jediná ukázka kterou tady mám s kaskádových stylů tři aspect jehož to bylo
ve dvojkové jím respektive dva jedna
a ty méně jak ve lývá podstatě slouží k tomu abysme mohli
měnit
kaskádové styly v závislosti na tom jaké je zobrazovací zařízení
tak mám konto máme všichni předpokla tablet
někdo net book
normální notebook válečkovej notebook
pět zařízení s různým rozlišení
telefon tablet můžete otočit o devadesát stupňů máme tady sedum zařízení
mám ještě čtyři minuty
tak jenom po zjednodušit pomocí které je modul _e _e počí media který ste schopni udělat dotaz na tyto zobrazovacího
zařízení
a na základě toho měnit
kaskádové styly
tady není žádnej java script nic
čistě udělám dotaz
jak je velká obrazovka
a to se použije
velmi důležitý promo pro mobilní zařízení můžete udělat dotaz třebas a orientaci
na výšku vašíčku
a poslední věc kterou si neodpustím nás nebo barcamp brno tohle bylo použitý se podíváte na nic mobilu takový ty
krásný
a tady bych krát nakonec představil projekt martina zaslána toto velké cz jan vinutím
díky
a ten otec _e ze T shromažďuje české zdroje o tom opět a probíhá tam komunitní překlad knihy marka to
byly má zatím turečtinu Y
takže doporučován se zapojit to jsou přeloženy tři kapitoly je to ta
víš katod krátkých common takže to je můžeme udělat _e martin hledá překladatele
u sou přislíbil asi pět dalších výborně
tak jo
takže vaše dotazy tam byly nějaký
data ve nebo takovýto prosím sme mít
řekne no _e název workers jediný možnost tak se předávat mezi sebou data taky tím po sme switch
jo není tam nějaká sdílená paměť nebude za prostě po sme si vždycky
další otázka poslední už
o tyhlety prohlížeče se označí jako moderní prohlížeče takže otázka byla a jaké prohlížeče tohlencto podporují v podstatě když vezmete
poslední verze prohlížečů T velký čtyřky tak tam to najdete
a obecně musíte zná když použijete jakou technologii do toho pět
musíte zná svůj klientelu
prostě co používají
jo takže velký portály to nepoužívají vůbec sebou minimální míře třeba seznamu to bylo typu s používá nějaký svých projektech
ale tam že když mají verzi pro ty starý prohlížeče pokud budete pracovat pro nějakou firmu taky firmě by mělo
být sjednocené I T tak tam mám řeknu leťte se máme tady ten vektor R šest a přesto matné de
prostě ve firmách vlastně pořád funguje a nebo když to dáte pro ten veřejný internet tak musíte jakoby vědě
a třeba tedy skladě ztratíte nějaké klienty tento nebude vidět
co vás todlencto může pomoct tak je projekt bude maiser bude najít věděla skriptová knihovna která některé věci se to
mohlo pět je schopna simulovat pomocí javaskriptu a dostanete to i do starších polí
pokud budete mít dotazy tak já se budu používat tady venku dobudu určitě nástroj párty tak do tý doby dokud
schopen mluvit artikulovat tak se mně tam můžete ptát
při upřímný zbytek ne