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
Úvod do responzívneho webdizajnu:
- Responzívny web dizajn
- Čo to je?
- Prečo to robíme?
- Dnes už nutnosť - rozšírenie mobilných zariadení
- Fluidný design - používame percentá
- Adaptívny design - cielime zariadenia
- Responzívny design - cielime obrazovky
- mobil
- tablet na výšku
- tablet na šírku
- počítač
- FHD/4k monitory
- Iné varianty - m.doména - slabé SEO
- Prakticky robíme responzívnu stránku
- Mobile first prístup
- Metaznačka viewport
- CSS pixel
- Nastavenie bodov zalomenia - koľko ich treba?
- Dôležitá je pohodlnosť pre užívateľov
- float vs. display vs. tabuľky
- pozície v CSS jazyku a spoľahlivosť rozmerov
Media:
- @media knižnice pravidláalebo keď "@" zmení celý web
- čo sú to @media knižnice pravidlá
- keď ide JavaScript bokom
- príkazy podmienky @media - max-width, min-width, orientation, ...
- podpora prehliadačov
- Responzívne obrázky
- Veľká obrazovka - veľký obrázok, malá obrazovka - malý obrázok
- Problém s rôznymi veľkosťami
- Problém s umeleckým dojmom obrázku - art direction
- Rôzne veľkosti obrázkov, ako na to?
- Atribúty SRCSET a SIZES
- Čo je jednotka “w”?
- Media podmienky
- Úprava obrázkov
Rozloženie stránky pomocou Flexbox:
- Čo je flex layout?
- Podpora prehliadačov
- Elementy už nie sú len block a inline
- Flex-rodič a flex-deti
- Flex smerovanie a zalamovanie
- Vieme zarovnávať horizontálne ale aj vertikálne
- Vycentrovanie elementu v kontajneri na 3 riadky
- Order - premiestňujem elementy v CSS
- Aká je veľkosť mojich elementov?
- Width nefunguje - flex-basis
- Funguje max-width a min-width
- Zväčšovanie a zmenšovanie - flex-grow a flex-shrink
- Spravíme si galériu obrázkov
Rozloženie stránky pomocou Grid:
- Čo je grid layout?
- Podpora prehliadačov
- Grid rodič - kontajner, grid dieťa
- Čiary a trate v grid rozložení - stĺpce a riadky
- Grid-template - delíme našu mriežku
- Používame veľkosti alebo názvy čiar
- CSS funkcie REPEAT, MINMAX, FIT-CONTENT
- CSS jednotka FR
- Grid-area - definovanie plôch mriežky
- Grid-gap - medzery v našej mriežke
- Align a justify - zarovnávanie
- Implicitná a explicitná mriežka - grid-auto
- CSS hodnota dense
- Elementy mriežky - CSS hodnota SPAN
- Spravíme si stránku novín
Praktické cvičenia na kurze:
- 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ň grafické návrhy, ktoré budú vopred pripravené
- kontrola a vyhodnocovanie
- Prekresľovanie šablóny za pomoci FLEX a GRID rozloženia
Cieľová skupina
mierne pokročilýHodnotenie
Organizátor
Ďalšie termíny kurzu
Podobné kurzy
podľa názvu a lokality
