Detail kurzu
Tvorba, programovanie webstránok IV. - responzívny dizajn, media pravidlá, flex a grid rozloženie
IT LEARNING SLOVAKIA, s.r.o.
Popis kurzu
Kurz responzívneho web dizajnu je učený pre všetkých, ktorí sa chcú naučiť tvoriť moderné web stránky, ktoré vyzerajú dobre aj na mobile či tablete podľa najnovších trendov. Responzívny, iným slovom „prispôsobivý“ web dizajn však nie len akýmsi módnym trendom. Vďaka Google, ktorý na mobilných zariadeniach vo vyhľadávaní začal uprednostňovať responzívne web stránky, sa stal prakticky povinným štandardom. Responzivitou je myslená schopnosť web stránky prispôsobiť sa zobrazeniu na malej obrazovke, napríklad na mobile, alebo na tablete. Takýto prístup na web stránky má v dnešnej dobe prevahu. Na mobilných zariadeniach si prezeráme web stránky častejšie, ako na stolných počítačoch, či notebookoch. A tomuto trendu je nutné sa prispôsobiť, takže je najvyšší čas aby ste či už ako začínajúci web dizajnér, alebo web dizajnér so skúsenosťami, od dnes začali tvoriť iba responzívne web stránky.
Na tomto kurze sa naučíte v prvom rade pochopiť princíp responzívneho webdizajnu a ako ho dosiahnuť. Povieme si o @media pravidle, ktoré to má všetko na svedomí a spravíme si mobilnú stránku, ktorú neskôr prispôsobíme na tablet a aj stolový počítač. Ukážeme si aj ako prispôsobiť obrázky rôznym šírkam obrazovky, aby sme ušetrili čo najviac prenesených dát. Ďalší deň nás čaká flex layout, ktorý nám umožní zopár kúskov, ktoré by sme bez neho zvládli len ťažko. A nakoniec si povieme o najnovšom systéme na rozloženie elementov na stránke - grid. To všetko za dodržania podmienky, že naša stránka zostane responzívna.
Na kurze sa očakáva, že viete porozumieť a vytvoriť HTML kód jednoduchej stránky so základným štýlovaním textu, obrázkov a rozloženia v CSS zhruba na úrovni našich kurzov Tvorba webstránok I. a II. Ideálne je rozumieť aj pokročilejšiemu CSS, ale nie je to nutnosťou.
Obsah kurzu
- Ako na responzívny web design, čo musím vedieť - zopakovanie úvodu do tvorby web stránok - čo je web stránka a čo je web aplikácia - HTML 4.01 - aké príkazy nám dnes ostali - HTML5 - CSS 1 a 2 - zopakovanie základných selektorov - selektory jazyka CSS3 - jazyk CSS dnes - rýchle prebehnutie referenčnej príručky a prebehnutie CSS vlastnosti, ktoré sa bežne využívajú - BOX model v roku 2015 - správanie sa prehliadačov pri počítaní box modelu - veľkosť písma a prístupnosť - Skrolovacie web stránky, microsites a parallax efekty - CSS3 vlastnosti ktoré sú dnes bežné, alebo ide to aj bez Photoshopu - spracovanie grafického návrhu - tiene - orámovania - farebné prechody - práca s pozadiami - symbolika - písma - animácie a transformácie - ostatné - Mobile first - alebo zalamovanie web stránok dnes - float vs. display vs. tabuľky - pozície v CSS jazyku a spoľahlivosť rozmerov - počítanie pozícií - percentá a pixely - Praktický príklad a tvorba bežnej šablóny - prekresľovanie z grafického návrhu - premýšľanie systémom Mobile first - stĺpce, dáta, obrázky - začíname premýšľať v troch dimenziách: mobil, tablet a počítač - kontrola a vyhodnocovanie - Responzívny web dizajn - penetrácia mobilných zariadení - obrazovky mobilov dnes - základne princípy - návrh obsahu - spôsoby zobrazenia a rozlíšenia pre: - počítač - notebook - mobil - malý tablet - veľký tablet - rozdiely pri zobrazení - meta značka viewport - CSS pixel - Mobilné vezie web stránok alebo neresponzívne riešenie - výhody a nevýhody - operačné systémy a podpora - využívanie funkcií telefónu - fotoaparát, akcelerom eter, GPS a ostatné - MEDIA knižnice alebo keď "@" zmení celý web - čo sú to media knižnice - keď ide JavaScript bokom - príkazy @media - podpora prehliadačov - tvorba HTML5 šablón so zameraním sa na prispôsobivosť - kontajner a jeho veľkosť dnes - HTML5 príkazy a prvky nav, header, section, article a footer - stĺpce a rámce - dovolené HTML značky pri responzívnom dizajne - princíp obrázkov a ich štýl zobrazenia na stránke - tvoríme prvú jednoduchú šablónu spolu s lektorom - skrývame menu - píšeme jednoduchý JavaScript na otváranie a zatváranie menu - skúšame stránku ukladať na pripravené web hostingy a testujeme web - zopakovanie na základe otázok účastníkov - praktické cvičenia a zadanie pre účastníkov - Responzívny web hotový, ako ďalej? - úprava CSS na 3 krát ??? - CSS frameworky - diskusia === Ďalšie praktické cvičenia na kurze: - vyhodnocovanie responzivity a krátky test - dodanie obrázkov, kde budú účastníci vyhodnocovať či sa dá a do akej miery bude návrh web stránky - - responzívny - prerábanie jednoduchej šablóny na responzívnu - lektor dodá grafické zadanie - obrázok s popisom veľkosti - prekresľovanie šablóny - kontrola lektora počas vypracúvania - účastníci budú prekresľovať aspoň 2-4 grafické návrhy, ktoré budú vopred pripravené - kontrola a vyhodnocovanieCieľová skupina
mierne pokročilýHodnotenie
Organizátor
Ďalšie termíny kurzu
Podobné kurzy
podľa názvu a lokality
