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