Predmet Webové technológie je určený pre študentov Košickej akadémie softvérového vývoja, prvý ročník. Predmet poskytuje vedomosti a skúsenosti v práci s HTML5, CSS3 a Typescript-om.
Vytvoríme si tlačidlá, čo sa zdanlivo dvíhajú a stláčajú. Ukážeme si, ako cez Javascript meniť triedy elementom v DOM modeli. Spravíme si projekt s rotačnou stránkou a projekt s prekrývajúcim tlačidlom nad obrázkom.
Porozprávame sa o transformácii elementov - posun, rotácia a zošikmenie. Následne si povieme o základnom kameni animácií, o vlastnosti transtition.
weby-css-08-flexbox.pdf
13. zadanie - na hodinu - Flexbox
14. zadanie - Licencia 2
Zdrojáky z výučby
Dokončíme tému Flexbox. 14-te zadanie je potrebné zaslať do utorka 22. apríla 18:00.
Dopovieme si o poziciovaní cez sticky. Prejdeme si spolu riešenie zadaní Dúha a Licencia. Možno začneme aj tému Flexbox.
Povieme si o všetkých možnostiach poziciovania - static, relative, absolute, fixed a sticky.
Vysvetlíme si kedysi široko využívanú schopnosť obtekania, porozprávame sa o pozadiach ako obrázkových tak aj grandientných. Obrázky na hranie.
Vysvetlíme si ako funguje špecifickosť selektorov, teda, ktoré sa uplatňujú v prípade konfliktu, povieme si o základných jednotkách vzdialenosti.
Porozprávame si o súdoreneckých spojkách v selektoroch, atribútových selektoroch, pseudotriedach a pseudoelementoch a spolu začneme projekt Špagety 2, kde si nastavíme centrované menu.
Dnes dáme novým veciam na chvíľu pokoj. Budeme spoločne vytvárať trochu komplexnejšiu webstránku pre tvorcu keramiky.
Prejdeme si náš projekt vizitka a porozprávame o ďalších vlastnostiach súvisiacich s box modelom - tieňovaní, rámčekoch outline, flexibilných veľkostiach a ako sa vysporiadať s obsahom, ktorý do bloku nevojde.
Porozprávame asi najdôležitejšiu súčasť CSS a to je box model. Predstavíme si jeho hlavné súčasti content, padding, border a margin. Pri ich nastavovaní nemôžeme vynechať okrem absolútnych aj relatívne veľkosti týchto vlastností a ich kombináciu. Povieme si o tom, ako tieto vlastnosti fungujú pre inline, inline-block a block elementy aj ako medzi nimi prepínať cez vlastnosť display. Na záver si povieme o zaobľovaní rámčekov.
Povieme si ako importovať externé fonty do lokálnych súborov. Porozprávame si spôsoboch dekorovania textu a liniek - tiene, čiary; transofrmácie textu napr. na veľké písmená. Predstavíme si spôsoby úpravy odrážok v číslovaných aj nečíslovaných zoznamoch.
Povieme si o využití atribútov id a class pri určení cieľov štýlovania. Budeme sa venovať nastavovaniu vlastností fontov - family, size, weight, style, align. Nastavíme si medzery v písme, výšku písma. Povieme si ako použiť externé fonty z Google fonts.
Predstavíme si 3 základné spôsoby, ako vkladať CSS do HTML, potom si porozprávame o rôznych možnostiach nastavovania farieb.
Dokončíme sémantické elementy a porozprávame si o pokročilých metódach pridávania sémantiky cez Mikroformáty a Mikrodáta. Dnes domáca nebude.
weby-html-04.pdf
weby-html-05.pdf
4. zadanie - Tabuľky
5. zadanie - Sémantické HTML elementy
Zdrojáky z výučby
Porozprávane si o tabuľkách v HTML - domáce zadanie bude z nich. Začneme rozprávanie o sémantických elemetoch. Piate zadanie slúži iba ako štartovací projektík.
Na začiatok si spolu spravíme úlohu formulár. Potom si povieme o tom, ako sa vkladajú do HTML špeciálne znaky cez HTML Entity. Z rýchlika si predstavíme niekoľko nesémantických elementov ako <meter>, <progress>, <details>, <dialog>, <pre>, <template>, <iframe>, <video> a podobne. Ak stihneme, pozrieme sa na tabuľky v HTML.
Prejdeme si hlavné formulárové elementy input, textarea, select, form a typy text, password, number, email, color, radio, checkbox, range
Porozprávame si o linkách a obrázkoch.
Rozbeháme si prostredie, ukážeme si základnú kostru HTML5 a ošaháme si niekoľko základných HTML elementov.