0:00:19 | takže dobrý den já busta převážně tady protože tu mikrofon doufám že se slyšíme i |
---|
0:00:24 | vzadu |
---|
0:00:26 | takže na úvod |
---|
0:00:28 | ne že by měl něco proti programování |
---|
0:00:30 | to určitě ne ale |
---|
0:00:32 | v podstatě sou tady novinky s oblasti o tom opět a c z tři |
---|
0:00:38 | které jak kdyby nejsou používány dostatečně nejde ta ani tak o to že b nefungovaly |
---|
0:00:45 | ve starších prohlížečích |
---|
0:00:47 | a prostě si na to zatím programátoři nějak nezvykli |
---|
0:00:52 | ono de o to |
---|
0:00:55 | podle mě teď jde o to |
---|
0:00:57 | takže toto může standardní rozdělení týmu |
---|
0:01:00 | většinou na týmu spolupracují určité osoby |
---|
0:01:04 | samozřejmě menší firma to často dělá jeden a |
---|
0:01:09 | byla to grafy kodér programátorka někdo se stará obsah |
---|
0:01:12 | případně tam může být ještě někdo můj psát |
---|
0:01:16 | který by se měla starat o rozložení a vůbec uživatelské pohody |
---|
0:01:21 | většinou to dělá ten bitově programátor případně kodér |
---|
0:01:26 | ale |
---|
0:01:27 | jde o to že tady tyto novinky jakoby nepatří žádnému s těchto povolání je to |
---|
0:01:34 | něco mezi kořeny programátorem |
---|
0:01:37 | stejně tak graphic enkodérem |
---|
0:01:40 | a je ten kdo se stará obsah často může požadovat |
---|
0:01:44 | s m řekněme článků určité změny |
---|
0:01:48 | které |
---|
0:01:49 | vlastně nejdou dosáhnout standardním cena systém |
---|
0:01:53 | proto se dnes ta často objevují požadavky na různé úpravy a další takovéto věci |
---|
0:02:03 | rozhodl se už by si hodně dávno a jistě je to dobré rozhodnutí že ose |
---|
0:02:07 | let webu se bude starat c z s tedy oddělení obsahu to celé |
---|
0:02:13 | už dávno |
---|
0:02:14 | můžeme scéně ze skamarádila mobilní verze webů pomocí média který s |
---|
0:02:20 | základní animace transformace kulaté rovině kterých kontejnerových objektů |
---|
0:02:25 | stíny našeptává ní a podobně |
---|
0:02:28 | tady tyto věci většinou nejsou jako by nezbytné provést |
---|
0:02:32 | pro samotný obsah že |
---|
0:02:35 | prohlížečích řekněme když |
---|
0:02:39 | když nějaký objekt nebude mít kovatelný které měl být nic se neděje |
---|
0:02:43 | vlastně není to žádná závada starých prohlížeče není tolik a ten dojem se s tím |
---|
0:02:49 | prostě musí smířit |
---|
0:02:52 | čili tyto věci ho používat a i když nefungujou nic se nestane |
---|
0:02:57 | nově |
---|
0:02:58 | co se stejným způsobem na používat například modální okna |
---|
0:03:02 | takové ty modálního na popad okna se většinou stará java skryt aktuálně a se tady |
---|
0:03:08 | jo vy ve z něho |
---|
0:03:09 | stránkování pokud na například nějaký dokument který mají nadpis |
---|
0:03:14 | tak čísla stránek a podobné věci |
---|
0:03:17 | neska může spočítat css to není potřeba zapojovat shell script nebo nějaké server ve skriptu |
---|
0:03:23 | pro starovičky většinou potřebujeme zobrazit různé stavy tegu |
---|
0:03:29 | a toho |
---|
0:03:30 | ne a jde o nějaké že akce byla úspěšná chybí ve při vyplňování formulářů a |
---|
0:03:35 | podobně |
---|
0:03:37 | je to známe s hodně platforem můžeme tomu říkat taky to zprávičky jak to nazývá |
---|
0:03:41 | android a je to často potřeba jako by na jednom místě upozorňovat na to neměl |
---|
0:03:51 | c ze snahy to mohl se dá použít splňování |
---|
0:03:55 | a na šeptání obsahu při psaní stack stále |
---|
0:04:01 | samozřejmě tady tyto možnosti |
---|
0:04:04 | na jisté výhody a nevýhody |
---|
0:04:08 | vy ho může být rychlost protože načteme c celý obsah všeho co potřebuje |
---|
0:04:13 | zatím není možné s ten css načítat jako by data |
---|
0:04:19 | načítat jako by data postupně všechno musí být push při tom prvním kontaktu sveden |
---|
0:04:25 | a všechno musí načteme teď jenom o to že je to skryté a můžeme sto |
---|
0:04:29 | postupně zobrazit |
---|
0:04:31 | zvýší se tím bezpečnost je tam mít datových přenosů není tam část i |
---|
0:04:36 | tedy případně mohlo dělat nějaké problémy pokud s externího zdroje a určitě je to bezpečnější |
---|
0:04:42 | pro |
---|
0:04:43 | navštěvníky stránek kteří můžou mít části úplně |
---|
0:04:47 | a výhodou a neviděl může být podpora starších prohlížečů tady jde o to jak se |
---|
0:04:51 | to vezme |
---|
0:04:52 | všechno se musí nastat dobře tak aby to v těch starších prohlížeči fungovalo |
---|
0:04:57 | pokud se to neudělá tak je to spíš nevýhoda |
---|
0:05:02 | datové přenosy můžou být výhoda můžou být nevýhoda |
---|
0:05:06 | tam de o to pokud nám uživatel na stránce zůstávat |
---|
0:05:10 | protože pro načtení dat je větší obvykle |
---|
0:05:14 | a později když s tou stránku pracuje tak se vlastně nemusí přenášet žádná další data |
---|
0:05:19 | navíc |
---|
0:05:20 | což je výhoda |
---|
0:05:22 | projeví se to tak že mu to funguje rychlej tenhle nepozná tam vůbec žádné rozdíly |
---|
0:05:27 | oproti tomu že last jedna mnohem více možností a přesněji dosáhneme toho o co nám |
---|
0:05:32 | vlastně té |
---|
0:05:34 | tady se musíme spokojit s tím co nám zatím možnosti hat emanace se s umožňují |
---|
0:05:41 | tady mám |
---|
0:05:42 | state čas wikipedie to teda česká wikipedie a vidíme že tam dostane vystupuje hrozně moc |
---|
0:05:47 | kterou konkrétních no osumdesát idle různé obrázky |
---|
0:05:52 | samotné stránky c a ze styly je tam hodně takových těch malých vlaječek a tak |
---|
0:05:58 | prohlížeče toto většinou grupo šesti toto nastavení se dá změnit ale standardně to berou po |
---|
0:06:03 | šesti a |
---|
0:06:05 | na ostatní se čeká to znamená řecky začít načítají šest zároveň hlavně u mobilních přenosů |
---|
0:06:11 | s vyčerpaným fuk to může být problém prostě ztráta se bude načítat pomalu |
---|
0:06:17 | tak taková úplně základní věc |
---|
0:06:21 | která tomu pomůže je podmínka css |
---|
0:06:29 | podmínku můžeme realizovat pomocí u do adresy |
---|
0:06:33 | a nebo formulářových prvků jako je check box rádio |
---|
0:06:37 | tady ukážu dialogové okno toto je ten základě to stejný čas bootstrap u |
---|
0:06:42 | dole vidíte adresu pokud se chcete na to podívat máte možnost |
---|
0:06:46 | případně kdykoliv později takže přednáška bude k dispozici slajdy |
---|
0:06:52 | jak jsem udělal tady pomocí podobné okna b s pomocí javaskriptu |
---|
0:06:58 | pomáhá na tomu selektor takže který přišel s c ze stroj to |
---|
0:07:04 | v době c zezdola jedničky takové možnosti nebyly ale i tak by to tam fungovalo |
---|
0:07:09 | protože |
---|
0:07:11 | při zadání této adresy |
---|
0:07:14 | s tím |
---|
0:07:16 | hash pro se na určitou části adresy |
---|
0:07:19 | můžeme tomu říkat například záložka jsem viděl že někteří používají toto slovo |
---|
0:07:25 | takže ve starší prohlížečích by to pouze skočil na to dané místo |
---|
0:07:30 | ale z možností c ze strojky my si to můžeme skrýt skate kontejner pro přihlášení |
---|
0:07:44 | state kontejner pro přihlášení a později si ho zobrazit |
---|
0:07:48 | právě pomocí toho pseudo selektoru ta letět |
---|
0:07:51 | ten funguje takže pokud je adrese to slovo které před tímto aničko |
---|
0:07:57 | tak se tento blok se s ním může něco stát tohle případy se může zobrazit |
---|
0:08:04 | prostě |
---|
0:08:09 | když tam bude adresa cokoliv jiného než je to aničko tak kontejner zůstane skryty |
---|
0:08:15 | tím pádem s zase skrýt jakoby může tam být kříže který bude odkazovat na nějaký |
---|
0:08:19 | na nějakou jo záložku čím se zase skryje |
---|
0:08:22 | upravme okna může být nevýhoda vtom |
---|
0:08:26 | takže když se klikne mimo toto okno |
---|
0:08:28 | tak se vlastně samo neschoval může to být výhoda nevýhoda záleží jak jsou uživatele naučení |
---|
0:08:33 | jak jsou zvyklí jaké očekávané chování |
---|
0:08:36 | tato na zobrazení f zprávy check |
---|
0:08:39 | tak vidím že není vidět adresách za pomlčkou dvojka |
---|
0:08:45 | a de o to že chceme uživatele jak informovat o tom co se na webu |
---|
0:08:49 | stalo |
---|
0:08:51 | tyto zprávičky abych očekáváme že jakoby můžou přijít kdykoliv můžou se zobrazit po načtení stránky |
---|
0:08:56 | nebo můžou být kdykoliv později řekněme ajaxem do stránky dodány |
---|
0:09:01 | a de o to aby se z nějakým efektem zobrazili a řekněme po kliknutí aby |
---|
0:09:05 | se schovali |
---|
0:09:06 | protože v tomto případě je sou float čili oni tam visí na tom aby je |
---|
0:09:11 | uživatelé přehlídl |
---|
0:09:12 | a na kliknutí si může skrýt |
---|
0:09:16 | tady mám nějakou praskly bych padl h ten |
---|
0:09:20 | jde o to že jsou tam využity input i alibi |
---|
0:09:24 | jako by celý ten objekt který ste viděli na předchozím snímku jeden bílej to |
---|
0:09:28 | a tím se zajistí to že když se na ně vytne |
---|
0:09:31 | příslušný |
---|
0:09:33 | input tak třeba se zaškrtne |
---|
0:09:36 | a na tuto událost jeho můžu například skryt |
---|
0:09:40 | tohle příkon případě jestli se na to někdy potom podíváte jsou zapojeny css transformace i |
---|
0:09:46 | animace |
---|
0:09:47 | rozdíl je v tom že animace se jako b spouštějí okamžitě po načtení stránky čili |
---|
0:09:52 | tím dosáhnu toho že ty zprávičky se zobrazí při je to zcela |
---|
0:09:56 | a transformace čekají na nějakou událost jako je například to zaškrtnutí tady toho check boxu |
---|
0:10:02 | takže kliknutím zaškrtnut checkbox vyvolán transformaci a ta se postará o to aby zase pro |
---|
0:10:08 | zprávička zmizel |
---|
0:10:10 | tady jsou nějaké c ze skla k tomu |
---|
0:10:14 | základ je ten objekt na ty flash zprávičky |
---|
0:10:18 | tam není jestli nic moc co komentovat a ke konci ztráty už vidíte ten plot |
---|
0:10:25 | e s tím že je tam ten pseudo selektor čekat taky novinka c d z |
---|
0:10:29 | s tři |
---|
0:10:30 | čili když je zaškrtnuto |
---|
0:10:33 | je tam plus to znamená následující label a něco se s ním stane |
---|
0:10:42 | tady druhá část těch c z protože sem je to nevešlo na jeden slajd jako |
---|
0:10:46 | by |
---|
0:10:51 | tady je zapojena animace |
---|
0:10:53 | jak vidíte sem podtrhnou to slovo a animace se definuje jako by zvlášť |
---|
0:11:00 | něco jak se definovaný styly pro různé zařízení jako by tiskové sty a podobně tak |
---|
0:11:05 | se definuje animace |
---|
0:11:07 | klíčovým slovem jakej frames |
---|
0:11:09 | napíšu si název té animace a musí rozepsat různé stavy jak se chová nula procentech |
---|
0:11:15 | gesto procentech čili nula je začátek stoprocentně konec |
---|
0:11:19 | a nemůžu například udělat jinou cestu a padesáti procentech můžete nově dělat odbočky a podobné |
---|
0:11:24 | věci |
---|
0:11:26 | potom teda to jak využít |
---|
0:11:29 | tím podstatě tehdy jo |
---|
0:11:32 | které má jako by nejvíc možností protože |
---|
0:11:35 | input time region může být zaškrtnuto jedno z několika |
---|
0:11:40 | a v tomto případě si mám něco jako by jmenné prostory může mít spoustu |
---|
0:11:46 | spoustu těchto input tak rejdil ze kterých dycky jedno může být za škrtlé podle toho |
---|
0:11:51 | se to může na chovat |
---|
0:11:53 | tady k tomu se váže taková zajímavá historka |
---|
0:11:56 | jak to tak ve škole piva když bývá nějaký úkol jmenujte nějaké programovací jazyky |
---|
0:12:02 | někdo tam samozřejmě napíše alternace přestože samozřejmě myl |
---|
0:12:07 | je takový příklad cesta u nás ve škole a učitel říká nic ty může člověk |
---|
0:12:12 | třeba chce zase číst je čísla |
---|
0:12:14 | což už dneska t |
---|
0:12:17 | tady jsem jako ukázku udělat kalkulačku |
---|
0:12:21 | jednoduchou samozřejmě jenom sčítá a sčítá čísla od jedné do šesti |
---|
0:12:26 | a zajímavé na tom je to |
---|
0:12:30 | funguje to jako by tím způsobem |
---|
0:12:32 | že sem si definoval podle toho nevím jmenné prostory |
---|
0:12:37 | a všechno musí být označené v déčka |
---|
0:12:40 | právě díky tomu dědečku ja po si můžu zaškrtnout |
---|
0:12:44 | cokoliv na kliknutí |
---|
0:12:46 | zase je to ten klasickej lego který asi můžu formátovat například do podoby tlačítka které |
---|
0:12:51 | potřebuju kalkulačce |
---|
0:12:55 | a kliknutím na libo se tedy zaškrtne rádio |
---|
0:12:59 | a může si tedy měnit můžu si zvolit jedno číslo |
---|
0:13:04 | potom si to změnit na jiné |
---|
0:13:07 | a stiskem trusu |
---|
0:13:09 | zobrazím ten druhý jmenný prostor čili ten schová ten zobrazím jako by mám další čísla |
---|
0:13:15 | ze kterých může vybrat druhé číslo které bych chtěl sčítat |
---|
0:13:18 | nakonec samozřejmě rovná se |
---|
0:13:22 | to případě check box jeho zaškrtnutím se pro výpočet |
---|
0:13:26 | na výpočtu není nic složitého protože css taky není moc možností jde o to |
---|
0:13:32 | tady je začátek zase klasicky label |
---|
0:13:37 | zobrazí inputs chová protože to není potřeba vědět jsou vidět jenom ty lekli nastavím nějaký |
---|
0:13:43 | blok nějaký |
---|
0:13:45 | rámeček a další věci tady to samozřejmě není veškerý c ze skot |
---|
0:13:49 | je to zjednodušené jenom abych mohl něco tady zobrazit |
---|
0:13:53 | a |
---|
0:13:55 | t m kasou standardně skryté a ta se zobrazí po stisknutí plusu |
---|
0:14:03 | tady toto |
---|
0:14:04 | já jsem tomu celý slajd |
---|
0:14:06 | je to jako tilda to můžeme nazývat často nebo vlnovka se taky používá |
---|
0:14:12 | a je to tak nový selektor |
---|
0:14:14 | c ze strojky |
---|
0:14:17 | není příliš známý ale je podobný jako prusko že tedy bere cokoliv zatím objektem čili |
---|
0:14:22 | například zatím zaškrtnut in check otce |
---|
0:14:25 | bohužel se můžu dostat dopředu a nemůže se dostat do nějakého zanořeného pět musí být |
---|
0:14:30 | na stejné úrovni |
---|
0:14:32 | na stejné věci pokud pracuji z element |
---|
0:14:36 | a tady může druhá část jak probíhá ten výpočet |
---|
0:14:40 | čili znovu není to žádná t jedna je to v podstatě všechno vypsané |
---|
0:14:44 | že pokud je zaškrtnutá n jedna a n jedna tak čili je jedna a jedna |
---|
0:14:48 | součet v a |
---|
0:14:50 | n jedna n dva součet tři stejně tak jen dva a n jedna |
---|
0:14:55 | a takhle jsem vypsal všechny čísla |
---|
0:14:57 | čili žádná složitá kalkulačka jsou vypsané všechny možné stavy které můžou nastat a tím způsobem |
---|
0:15:03 | to počítat ale máme k apod |
---|
0:15:07 | tady našeptává na šeptání další příklad kde se často dělají nějaké části ty |
---|
0:15:13 | a tady není ani potřeba žádné css stačí mezis obyčejný máte na to |
---|
0:15:19 | protože objevila se na to novinka která se nazývá ta míst |
---|
0:15:24 | data listuj asi vypíšu možnosti a jednak se můžu zobrazit po kliknutí s posuvník n |
---|
0:15:30 | nebo jak známe našeptává když uživatel začne psát |
---|
0:15:34 | tak se mu napovídají možností právě s toho ovšem |
---|
0:15:39 | tyto věci se vždy realizovali pomocí javaskriptu a je tady trochu problém ve starších prohlížečích |
---|
0:15:45 | protože tohle tam nebude fungovat nezobrazí se to vůbec |
---|
0:15:48 | takže de o to jestli si můžu dovolit uživateli tento našeptává odebrat protože pokud na |
---|
0:15:54 | starší prohlížeč nebude mu fungovat |
---|
0:15:56 | takže jestli je na šeptáš klíčový prvek tak se vezme láskyplné obejdu pokud je to |
---|
0:16:00 | pouze nějaký doplněk kterýmu má usnadnit práci |
---|
0:16:03 | můžu využít tohle |
---|
0:16:05 | není potřeba javaskriptu a samozřejmě v budoucnu |
---|
0:16:08 | až vymizí stane prohlížeče nebude javaskriptu samozřejmě vůbec potřeba |
---|
0:16:15 | no nebude potřeba ke všem samozřejmě |
---|
0:16:19 | ta ještě taková zajímavost a ten pětka |
---|
0:16:24 | udělal hodně změn například formulářích nemusím to formulářové prvky už vobalovat |
---|
0:16:31 | opalovat nějakým form nebo podobným tak jen |
---|
0:16:35 | v době x ten se tam ještě dál |
---|
0:16:41 | chvilce |
---|
0:16:42 | toto všechno tam jsou ty aby to bylo kvalitní dnes už není potřeba formulářové prvky |
---|
0:16:46 | si murat kamkoliv na stránku |
---|
0:16:49 | pravidly že chci použít na nějaké takovéto věci |
---|
0:16:52 | čili tento kód by byla paritní stránka |
---|
0:16:56 | tady toto u ste možná viděli |
---|
0:16:58 | de o to jak využít |
---|
0:17:01 | jak chce zisku využít |
---|
0:17:03 | možností jak skloňovat |
---|
0:17:06 | a taky jak dělat možné čísla |
---|
0:17:09 | je to v případě že výpisu například kolik uživatelů je zrovna na webu ona je |
---|
0:17:15 | toto těžko najde nějaké reálné využití ale |
---|
0:17:19 | stát by se to mohlo například případě nějakého redakčního systému |
---|
0:17:24 | pokud já budu mít například z it hubů zobrazení si pouze statické stránky čili ne |
---|
0:17:30 | mužů spustit jakékoliv service skripty a tento vidět nějaké proměnné například dvacet počet uživatelů |
---|
0:17:37 | tak jak skloňovat i slova aby to dávalo smysl |
---|
0:17:41 | k tomu ve by nám taky mohl stačí pouze h témata c d s |
---|
0:17:46 | tady je ukázka h ten kódu využíván tam datové atributy |
---|
0:17:51 | to jako data pomůcka něco |
---|
0:17:53 | při se pro ukládání takovýchto informací stavům používali například a je to nebo klás |
---|
0:18:00 | které samozřejmě mají jiný účel tak je to často ordinovalo |
---|
0:18:04 | tak vznikl nový atribut a ta za který asi může napsat kterékoli s jakékoliv mě |
---|
0:18:09 | napadne a |
---|
0:18:12 | vlastně toto můžu využít ukládání jakýkoliv stavu takže je tady je nebo jsou |
---|
0:18:18 | a to které jsou potom se použije už i rozhodnuto tady chce z esku |
---|
0:18:23 | mám tady ty pseudo selektory after a before |
---|
0:18:29 | na nich je zajímavé že oni se umísťují to v nic objektu |
---|
0:18:33 | cože častý omyl |
---|
0:18:34 | lidé si často my si že sepnou umístí za něj nebo před něj ale oni |
---|
0:18:39 | se umístit rovnic a teď jenom motoristy se umístí před text který už tam je |
---|
0:18:43 | a nebo a za ten text |
---|
0:18:45 | pokud to není žádný text tak samozřejmě není problém |
---|
0:18:48 | naplní jako by |
---|
0:18:50 | tento objekt naplní tím co je potřeba |
---|
0:18:53 | v tomto případě kontent tam já můžu vložit nějaký řetězec |
---|
0:18:57 | a nebo použít atribut jak jsem použil v tomto případě |
---|
0:19:01 | čili ten dat ty |
---|
0:19:03 | plural |
---|
0:19:04 | run a |
---|
0:19:06 | pro možné čísla |
---|
0:19:09 | a nebo tady pronoun který rozhoduje jezdíte hojně nebo jsou |
---|
0:19:14 | s tím že standardně to skryté a podle toho jaké je použita číslo s toho |
---|
0:19:19 | data count |
---|
0:19:20 | tak podle toho já si to zobrazíme bosky |
---|
0:19:24 | potom taková zajímavost se z s přepínače |
---|
0:19:28 | chová se to standard jako check box čili může být zaškrtnutých nebo nemusí být zaškrtnutých |
---|
0:19:33 | ale často se například pomocí javaskriptu |
---|
0:19:37 | zobrazovali takto aby byly vidět jakoby přepínače s tím že po kliknutí můžou přejetý znaku |
---|
0:19:42 | animaci |
---|
0:19:44 | o ty animace jak jsem říkal se nám může postarat se zas transformace |
---|
0:19:49 | takže podobnou věc taky můžeme sestavit snadno |
---|
0:19:53 | s tím že |
---|
0:19:55 | potřebujeme k tomu tých jako obalový účet a |
---|
0:19:59 | klasický input v tomto případě check box toho by se použít rádio |
---|
0:20:05 | záleží jak dyby potřeba ty jmenné prostory ale bylo |
---|
0:20:09 | s tím že playboye v tomto případě íčko |
---|
0:20:12 | best olympu se neobejdeme protože ty pseudo selektory before a after nejdou použít na samotný |
---|
0:20:18 | input |
---|
0:20:20 | je buď je řádkový element a nelze ho přetypovat nebo |
---|
0:20:24 | toto některých prohlížečích například chorobu jo a fungovalo ale v žádném jiném či fajn foxu |
---|
0:20:30 | opeře a další s těchto velkých prohlížečů sto fungovat nebude |
---|
0:20:34 | takže se neobejdeme bez ledu který právě slouží pro to sdělování |
---|
0:20:39 | tady ukážu |
---|
0:20:41 | label zobrazím si ho jako bylo a dále můžu |
---|
0:20:45 | dávat různé barvičky a podobné věci |
---|
0:20:51 | input jak je vidět se skrývá tomto případě pomocí opacity cože průhlednost nula znamená skryty |
---|
0:20:58 | není vůbec viditelný |
---|
0:21:02 | ty stejný a tak to mají na právě podle toho příkladu kdybyste se potom ani |
---|
0:21:06 | podívali |
---|
0:21:08 | a tady vidíte že |
---|
0:21:11 | tolik udáván kontent a prázdné uvozovky |
---|
0:21:14 | já to nepotřebuju psát jako by žádný obsah ale stačí mně si tam vytvořit kontejnery |
---|
0:21:19 | objekt |
---|
0:21:20 | který já budu různě opakovat |
---|
0:21:23 | můžu na ty kulatého vy a další věc jak bylo vidět na obrázku |
---|
0:21:28 | a ty konci stránky je kontent kde je napsán nějaký řetězec to sou ty on |
---|
0:21:33 | o stavy |
---|
0:21:34 | které slouží právě proto zobrazení aby to bylo viditelné nekazme |
---|
0:21:40 | nekazme právě stavu jestli je zapnuto nebo vypnuto ale ve výsledku jde pouze o ten |
---|
0:21:44 | check box |
---|
0:21:46 | teď tady jako by na co si dát pozor |
---|
0:21:50 | protože zjistíme se ráno dělat hrozně moc školy pokud se to udělá špatně |
---|
0:21:56 | tady jde o to že na webu může být použito nějaké slovo které například skryto |
---|
0:22:01 | pomocí c zase další věci když tam uživatel přines vyhledavače například googlu |
---|
0:22:06 | zajímá ho ta konkrétní věc |
---|
0:22:08 | stiskne kontrola f napíše dohledání to slovo kterého zajímá |
---|
0:22:13 | a máte stránce výsledku být nemusí |
---|
0:22:16 | jestli t takže vyhledáváním sice najde ale uživatel nevíte nevidí o nemám zvýrazněné je skryjte |
---|
0:22:23 | a teď jedna jakým způsobem ale prostě uvidí takže sto bude z na ten |
---|
0:22:28 | a potom |
---|
0:22:30 | další věc |
---|
0:22:31 | pokud používáte float často sto používal takových hlaviček které bývají na samotným obsahem stránky |
---|
0:22:40 | tak u nich může být takový problém že |
---|
0:22:43 | na tato hlavička může skrývat text nějaké nadpisy na které se uživatel pro klika pomocí |
---|
0:22:53 | pomocí těchto záložek jsem tam ukazoval to je tam cache pro stanic of adrese |
---|
0:22:58 | takže pokud je tady ta záložka |
---|
0:23:01 | uživatel zanikne a je tam pavouci hlavička tak tato skryje ten nadpis |
---|
0:23:06 | napišme nikdy to na tom případě znovu uživatel klikl nápis a nevidí o počet zase |
---|
0:23:13 | se může stát že je zmatek |
---|
0:23:19 | a to je tak asi vše |
---|
0:23:21 | pět pokud určitě máte nějaké otázky |
---|
0:23:24 | případně později tyto slajdy najdete ste a můžu také ukázat |
---|
0:23:29 | nějaké příklady které sem |
---|
0:23:32 | dělá tady pro případ této prezentace může okamžitě před stack |
---|
0:23:36 | by vypadal if prohlížeči |
---|
0:23:39 | a jestli to máte nějaké otázky tak určitě se můžete ptát případně ještě |
---|
0:23:57 | no |
---|
0:24:02 | no v tomto případě jak je |
---|
0:24:07 | a v tomto případě ty čísla tam v napsané napevno protože |
---|
0:24:12 | jako pro případ tady té ukázky no ale deltou kdyby ty čísla by uložené nějaké |
---|
0:24:16 | pro mě dybych nějakou proměnnou která mě vypíše právě ten počet návštěvníků na stránce |
---|
0:24:22 | tak tady tuto proměnnou bych tam dosadil já jestli se můžu vrátit ukážu přesně kam |
---|
0:24:28 | tady do toho data kam tam je to číslo podle toho čísla se rozhoduje jaký |
---|
0:24:33 | sta se má zobrazit |
---|
0:24:35 | takže tam kde je teď nula na druhém řádku jednička tak přesně na to místo |
---|
0:24:39 | vyšla ta proměnná |
---|
0:24:41 | a tato proměnná vy řekněme nastavovala na to jestli se má zobrazit |
---|
0:24:47 | je nebo jsou jak se má splňovat to sou uživatel |
---|
0:24:55 | je to tak tam no tak tam |
---|
0:25:03 | naší dotaz |
---|
0:25:08 | několik let a |
---|
0:25:09 | no |
---|
0:25:19 | no |
---|
0:25:21 | já jsem se tím zabýval už delší dobu |
---|
0:25:24 | jde o to že tady tak otevři na něco co de prostě vidět |
---|
0:25:28 | to postaví nový f a já se nemůžu podívat na zdroje |
---|
0:25:31 | neříkám že by to nebylo možné |
---|
0:25:33 | dneska sou některé nebývají ztratí na výtahu ale je to výmečně |
---|
0:25:37 | a na to bude římse dá podívat |
---|
0:25:40 | takže často se tam čili může nakouknout a teď lidí |
---|
0:25:43 | jestli to udělali dobře jestli to neudělali dobře |
---|
0:25:47 | co tam použili jestli mají ty tady sémantické a podobně |
---|
0:25:50 | takže |
---|
0:25:51 | já se na to dívám a |
---|
0:25:54 | raz s tím pracuje a takže |
---|
0:25:55 | jsem to |
---|
0:26:21 | jak se to nevadí |
---|
0:26:22 | no |
---|
0:26:24 | ono |
---|
0:26:25 | nejsnáze asi samotný vyzkoušeni |
---|
0:26:28 | ale de o to že tady tyto věci sou spolehlivé to bylo proti chtělas tyto |
---|
0:26:32 | se můžu spolehnout na to že to v těchto větší bude skutečně fungovat |
---|
0:26:36 | je to jednodušší a |
---|
0:26:40 | na mobilních asi jedině vyzkoušet taky to tam funguje na těch mobilních prohlížečích není problém |
---|
0:26:47 | problém je vtom že podobně jako javaskriptu je to časování zrychlen |
---|
0:26:53 | když je nějaká |
---|
0:26:54 | animace která se zobrazuje na můžu prohlížeči tak je zrychlena a nebo ne všechny kroky |
---|
0:26:59 | takový vypadá to potom takové skákal a to se stává jako animaci dělených pomocí javaskriptu |
---|
0:27:04 | tak u animací dělaný s tady takto pomocí c z |
---|
0:27:08 | to je neville těch mobilních prohlížečů protože oni nemaj takový výkon takže oni takle šetří |
---|
0:27:27 | rozumím některé ty věci sem skutečně obtížně využitelné kalkulačku c zaznívá nebude dělat protože to |
---|
0:27:32 | není potřeba |
---|
0:27:34 | když tohoto abych zobrazil |
---|
0:27:36 | jakým způsobem se dá využít to input gridy jo |
---|
0:28:00 | a |
---|
0:28:09 | rozumím určitě pochopení kovu vždycky je to problém no pokud na nějakém projektu spolupracuje více |
---|
0:28:15 | lidí jako někdo tam používá různé složité konstrukci kterým ostatní nebudou rozumět tak přesto je |
---|
0:28:20 | donucen používat něco jako v jednoduššího právě díky tomu aby se tam kolegové významným ta |
---|
0:28:25 | případně noví členové týmu co čtvrt |
---|
0:28:31 | děkuju |
---|
0:28:34 | a |
---|
0:28:37 | zase |
---|
0:29:00 | musí prosím zopakovat |
---|
0:29:02 | nerozuměl jsem |
---|
0:29:04 | ste hlasitě |
---|
0:29:05 | a |
---|
0:29:18 | a |
---|
0:29:21 | a |
---|
0:29:39 | rozumím |
---|
0:29:41 | takže otázka na to že jakoby logika je skrytá c ze souborech a je tam |
---|
0:29:47 | to hodin opakování |
---|
0:29:49 | což určitě pravda |
---|
0:29:51 | ten proces tam opakuje mnohokrát protože říkám jediné costa můžu udělat je jednoduchá podmínka |
---|
0:29:58 | nemůžu tam například používat číselné soustavy a sečíst čísla |
---|
0:30:03 | z něčím takovým se počítá v budoucnu je na to se s atribut krát který |
---|
0:30:09 | tady by se měl starat o to sčítání |
---|
0:30:12 | ale zatím není podporován vpodstatě v žádném prohlížeči takže jsem to sem nadával tady tyto |
---|
0:30:16 | věci už mají podporu velice dobrou |
---|
0:30:19 | a |
---|
0:30:20 | u kalkulačky se ten call hodně opakoval |
---|
0:30:22 | bylo by ideálního renderovat někde na sem pravé straně pokud něco bylo takového potřeba |
---|
0:30:28 | ale říkám nějaké využití reálné pro takovou tu kalkulačku to měl nápad |
---|
0:30:33 | to by pouze případ ale jakým potají bejt jo ukládání těch stavu |
---|
0:30:39 | jako je určitě použitelné |
---|
0:30:42 | je pátá že lidé zatím nejsou zvyklí hledat logiku c lze soubor |
---|
0:30:48 | že |
---|
0:30:49 | že když někdo pracuje na nějakém projektu který dělá například někdo jiný vidí že s |
---|
0:30:54 | tam něco víte |
---|
0:30:56 | že se něco zobrazuje něco skrývá tak se podívat do kódu a tam hledá případně |
---|
0:31:01 | nějaké části tyto jevy s tím o výklad |
---|
0:31:04 | pokud oloví to bude chce ze zkuje to samozřejmě to z nezvyklé a |
---|
0:31:08 | je to taková novinka no na kterou si musí z zvyknout |
---|
0:31:12 | děkuji za dotaz |
---|
0:31:16 | ještě dotaz |
---|
0:31:36 | jistě tady |
---|
0:31:41 | dotaz na přístupnost |
---|
0:31:43 | takže t jakoby o to |
---|
0:31:46 | že ten leví po |
---|
0:31:48 | velikost tomto případě skutečně není moc přístupný |
---|
0:31:51 | zobrazovat něco pomocí libuje tady problém ale s přístupností todle mnohem víc když se využije |
---|
0:31:56 | ten pseudo selektor otáčet |
---|
0:31:58 | a ten skočí na danou část kódu a čtečky můžu rovnou přečíst čtečka pro nevidomé |
---|
0:32:04 | prohlížet |
---|
0:32:06 | takže jako pokud čili my si na přístupnost tak |
---|
0:32:10 | ten |
---|
0:32:12 | zobrazování pomocí těch formulářových prvků určitě nebude nejlepší ale |
---|
0:32:17 | na se využitém takže |
---|
0:32:18 | jo takže jde o to že mám jenom jednu |
---|
0:32:21 | adresu jedno políčko pro adresu |
---|
0:32:23 | a ste já mám veškeré stavy čili |
---|
0:32:26 | může mít jeden stav řekněme najednou protože |
---|
0:32:30 | je tam pouze jedna adresách ní může být pouze jedna záložka |
---|
0:32:34 | takže tím sem trochu omezen |
---|
0:32:41 | dotaz prosím |
---|
0:32:49 | preprocesor |
---|
0:32:53 | určitě se k tomu p procesory hodí velice užitečně |
---|
0:32:58 | rozšířené takové ty jako l s |
---|
0:33:01 | co sem se dívat nedávné době bootstrap from port o frontend přešel nasaz |
---|
0:33:09 | ten takovéto věci nepoužívá tento má hlavně částky ale |
---|
0:33:12 | využijou se na to takové ty věci |
---|
0:33:16 | jako ukládání do různých souboru |
---|
0:33:18 | pokud si to check rozepíše do více souborů tyto si gymplu je to mnohem přehlednější |
---|
0:33:23 | a |
---|
0:33:24 | když se takové věci spravují |
---|
0:33:27 | nějaká podpora která by propojoval ten na css těchto pro procesory není protože ty pracují |
---|
0:33:33 | čistě s tím c ze sklonem takže |
---|
0:33:36 | jako částečně pomůžou ale |
---|
0:33:38 | všechno neudělal |
---|
0:33:42 | děkuji za dotaz |
---|
0:33:45 | nějaké další dotazy |
---|
0:33:51 | ještě se můžete rozmyslet pokud nejsou dotazy abych teda ukázala některé tyto příklady |
---|
0:34:03 | když to vezmu od začátku |
---|
0:34:32 | tady takže mám stránku |
---|
0:34:35 | na které je nějaký textový obsah |
---|
0:34:37 | a v tomto případě jde o přihlášení |
---|
0:34:40 | že váš přihlašovací formulář je na stran tak často vložen jakoby přímo kódu a jeho |
---|
0:34:46 | zobrazení probíhá javascriptem |
---|
0:34:48 | což není potřeba |
---|
0:34:51 | v tomto případě is efektem může zobrazit tento formulář takto |
---|
0:34:56 | a adrese která sice není vidět ale tady |
---|
0:35:01 | záložka přihlášení přihlášeni jde toho kontejneru který se právě zobrazuje |
---|
0:35:06 | když kliknu na zavřít |
---|
0:35:09 | zase mě kontejner zmizí a záložce jakýkoliv jiný text v tomto případě úloh nebo tam |
---|
0:35:14 | nemusí být vůbec žádný text |
---|
0:35:17 | a p o to že když tam není to co je označené tím videa takže |
---|
0:35:21 | tak se tento c s selektor jakobín naše a neprovádí se to co je v |
---|
0:35:27 | něm zapsán v tomto případě zobrazení |
---|
0:35:32 | další příklad |
---|
0:35:40 | tady jsou ty flash zprávičky |
---|
0:35:43 | ještě omluvím stránku |
---|
0:35:45 | kde vidět že se zobrazí hned po načtení stránky |
---|
0:35:49 | tady toto je zase výhoda v tom že je to psáno pouze chcete ze s |
---|
0:35:54 | často můžete na internetu narazit na problém kde se zobrazuje taky něco takto na to |
---|
0:35:58 | obsahem |
---|
0:35:59 | a zobrazení zapsáno přímo ve stránce tudíž uživatel který má nemá zapnutý částky to uvidí |
---|
0:36:06 | tento obsah se mu načte ale můžeme může skrýt protože sklidí se provádí pomocí javaskriptu |
---|
0:36:11 | takže to je potom chyba ono pokud se tato něco zobrazuje na stránkou |
---|
0:36:16 | kdy se to mělo zobrazit právě na základě javaskriptu a i na základě že lásky |
---|
0:36:20 | tužky protože lepší když to uživatel nevidí |
---|
0:36:23 | pokud to není nic klíčového co by mu bránilo používání stránky samotné |
---|
0:36:29 | kterékoliv tyto věci potom můžu odplivnout tím flash zprávičku scarie |
---|
0:36:36 | to je tady druhý příklad tady adrese se nic nevyužívá využívá se těch formulářových prvků |
---|
0:36:41 | v tomto případě šlo o inputted check box |
---|
0:36:44 | každá f zprávička měla jeden check box |
---|
0:36:56 | třetí příklady tady ta kalkulačka |
---|
0:36:58 | tady sou ty rádia které mě umožňují si zaškrtnout dáte číslo například ve čtyřku |
---|
0:37:04 | ruském |
---|
0:37:06 | se skryje jako by původní sada čísel a zobrazí se nová |
---|
0:37:12 | vyberu si další číslo například čtyři plus tři |
---|
0:37:15 | a stiskem rovná se to spočítat |
---|
0:37:18 | tak na to vypadá jako skutečná kalkulačka výsledku je to jenom |
---|
0:37:22 | za podmínek zapsaných a všechny možnosti jsou vypsána |
---|
0:37:26 | bylo by se tam napsat cokoliv dalšího mohla vyslovit skutečná kalkulačka ale poctou stránkou by |
---|
0:37:33 | byl obrovské množství kódu |
---|
0:37:35 | které by určitě nemělo smysl zapisovat takže ho by musela generovaná kaiserová strana |
---|
0:37:41 | a stran tady měla několik megabajtů což jako na kalkulačku jistě není vhodné |
---|
0:37:56 | čtvrtý příklad tady není použito žádné c z širý textové pole jestli můžu šipkou |
---|
0:38:03 | zobrazit našeptává |
---|
0:38:06 | a nebo pokud nevyužiju šipku přímo při psaní |
---|
0:38:10 | se mně tam zobrazuje naše tavený text |
---|
0:38:13 | pokud mám |
---|
0:38:15 | určité texty kterých je omezené množství může si je všechny napsat do stránky |
---|
0:38:20 | pokud je to množství textu příliš veliké je třeba ho načítat nějakým řekněme javascriptem ze |
---|
0:38:25 | serveru |
---|
0:38:27 | dá se to využití je tam pak zapojeny java skryt ale nemusí programovatelný tu logiku |
---|
0:38:32 | to naše ta protože takže napsaná |
---|
0:38:35 | ve tři celé nám vytvořili |
---|
0:38:38 | není zase potřeba program |
---|
0:38:49 | a |
---|
0:39:00 | ano tyto věci se určitě tady stěhovat |
---|
0:39:03 | bývá to takové obtížnější bych se to používá že tok řeky obrázek že si uživatel |
---|
0:39:09 | nakreslí obrázek a ten překryje to původní pole |
---|
0:39:12 | a nebo tady ty novinky jako sou ty různé barevné přechody rámečky a tak taky |
---|
0:39:17 | se dá přestěhovat s tím že původní věci vždycky skryje a jako by se to |
---|
0:39:21 | nastaví na to |
---|
0:39:23 | samotné stěhování je obtížné protože zase to nefunguje ve všech prohlížečích ale to překrytí to |
---|
0:39:28 | je zaručena pokutu překryjí obrázkem nebo tok řeky nějakými těmito rámečkem barevným přechody fajfkou nějakým |
---|
0:39:36 | takovýmto obsahem tak není problém a ve všech rodičích to bude fungovat |
---|
0:39:40 | tady je příklad to splňování |
---|
0:39:44 | de o to že těchto větách jediné co se liší právě to číslo |
---|
0:39:48 | a to je jestli se vypíše je nebo jsou jak se skloňuje slova uživatel potom |
---|
0:39:54 | se právě starat se zas |
---|
0:39:56 | tady toto říkám to je obtížně použitelné |
---|
0:39:59 | praxi těžko |
---|
0:40:02 | zároveň je problém že když si chci tento texty kopírovat |
---|
0:40:07 | tady tyto novinky se mně nevezmou |
---|
0:40:10 | byli to taky problém tři |
---|
0:40:14 | problém pro internetové boty |
---|
0:40:17 | které jakoby vyhledávají |
---|
0:40:19 | na internetu texty tak ty b neviděli rozčleňování samozřejmě scéně ze z nepočítat |
---|
0:40:24 | u byl se mnou vyučí java script a aby využívat tady tyto novinky zcela zas |
---|
0:40:30 | tak daleko ještě nejsou |
---|
0:40:39 | tady je šestý případ |
---|
0:40:42 | to sou tady tyto přepínače |
---|
0:40:46 | znovu není zase potřeba žádný java skryt |
---|
0:40:50 | všechno funguje jako by jenom nastěhování je toto vpodstatě to nastěhování těch jim budu |
---|
0:40:57 | toto jeden způsob nejsou tady využity obrázky tady jde o to že sou tam ty |
---|
0:41:01 | kontejnery |
---|
0:41:02 | se různě přebarví |
---|
0:41:05 | tím se zobrazí |
---|
0:41:07 | tady toto je to víčko tak dělej byl a tohlencto je ten obalový element to |
---|
0:41:11 | byl ty vtom případě |
---|
0:41:13 | a tímto způsobem já si můžou jakoby přestěhovat check box ta video přestěhovaný checkpoint se |
---|
0:41:18 | říct |
---|
0:41:21 | takže to sou asi tak veškeré příklady |
---|
0:41:25 | které by tomu měl |
---|
0:41:28 | zdrojové kódy všeho tohoto sou prezentaci tady |
---|
0:41:36 | na konci |
---|
0:41:37 | samotné side jsou na této adrese |
---|
0:41:39 | zde super zdrojové kódy |
---|
0:41:41 | na bída ve jsem upravovat |
---|
0:41:44 | udělat si for pokud máte nějaké nápady |
---|
0:41:47 | tady toto se sou takové věci které napálím mě |
---|
0:41:50 | ale s pomocí této podmínky se toho na udělat mnohem víc |
---|
0:41:54 | tady je to spíš fantazii to kdo to používá a jak to zapojí do svého |
---|
0:41:59 | projektu |
---|
0:42:01 | jakým způsobem prosíka je tady to zobrazování těch pochlap nemodálních oken s tím se to |
---|
0:42:06 | dá udělat opravdu hodně |
---|
0:42:08 | jako biasy můžu takto zobrazovat obsah takže jakákoliv stránka se na začátku načte |
---|
0:42:15 | a všechny odkazy a všechno problikávání nemusí sestává ze se může to být už přímo |
---|
0:42:20 | načten jste stránce právě pomocí různých takovýchto check boxu nebo podle toho slipped u full |
---|
0:42:26 | adrese |
---|
0:42:28 | se tyhle věci můžou zobrazovat |
---|
0:42:30 | měla by to taková zajímavost |
---|
0:42:32 | jako by stránka která se při prvním obsahu načte všechno takové ty různé firemní profily |
---|
0:42:38 | a takový takhle mohli fungovat |
---|
0:42:40 | několik málo stránek a není potřeba žádných že lásky |
---|
0:42:44 | mezi by nebylo problém toto by fungoval na všech prohlížečích |
---|
0:42:51 | a ještě někdo nějaký dotaz teda |
---|
0:42:57 | jestli ne tak už bych skončil |
---|