Webový vývojár JUNIOR
HTML, základy PHP, JavaScript a Bootstrap

Úvod do problematiky tvorby www stránok

• Čo je webová stránka? Ako sa dostane na môj počítač?
• HTTP, HTTPS, FTP - protokoly v praxi protokol na prenos HTML
• Čo je web a webserver?
• Princíp tvorby webových stránok
  • Chcem si napísať obyčajný textový dokument, ale aby bol pekný
  • Potrebuje obsah - HTML
  • Vizuál - CSS
  • A interaktivitu - JavaScript, PHP
• História HTML 4.01, XHTML, HTML5, www a web server
• Trendy vo výrobe webových stránok
• Editory na tvorbu webových stránok - porovnanie
• Práca s programom na tvorbu a editovanie stránok: Notepad2, Brackets, Sublime Text, Atom a VS Code

Práca so súbormi

• Základné prípony web stránok
• Uloženie stránky
• Otvorenie stránky
• Otvorenie a uloženie súboru, otvorenie v prehliadači, znovu načítanie stránky
• Optimalizácia klávesovými skratkami
• utf-8 alebo ako na jazykovú sadu a jazyk web stránky

Základné princípy značkovacieho jazyka HTML

• Základné príkazy a vkladanie HTML kódu do stránky
• Ako sa vytvára webová stránka
  • !DOCTYPE
  • priznáme sa s verziou
  • hlavička stránky - meta údaje pre znakovú sadu, jazyk a titulok
  • telo stránky
  • štábna kultúra - správne odsadzujme náš kód
• ako písať HTML príkazy
  • čo je to príkaz - element
  • čo je to atribút
• Párové, nepárové značky a správne uzatváranie značiek
• Formátovanie textu, B I U STRONG EM a BR
• Nadpisy H1 - H6
• Čiara HR
• Práca s odstavcami - P
• Vnáranie značiek do seba - ako spravím tučný a šikmý text?
• Práca s oddielmi - DIV
• Obrázky - IMG
  • vkladanie obrázkov
  • typy používaných obrázkov
  • používanie obrázkov ako pozadia
  • popisovanie obrázkov - ALT atribút
• Zadávanie ciest k súborom
  • Relatívna cesta - na našej doméne
  • Absolútna cesta, URL - mimo našej domény
• Hypertextové odkazy - A
  • textové odkazy
  • obrázkové odkazy
  • odkaz na e-mail
  • odkaz na stránku mimo našej domény
  • absolútna cesta odkazu
  • relatívna cesta
  • odkazy na iné súbory - na stiahnutie
  • odkaz na inú časť tej istej stránky
    • PDF
    • dokumenty Microsoft Word a Microsoft Excel
    • obrázky
    • iné
• Zoznam UL OL LI
  • číslovaný
  • odrážkový
  • využívame zoznam na tvorbu navigačného menu
• Tabuľky TABLE TR TH TD
  • zápis
  • používanie
  • tvorba záhlavia, riadkov, buniek
• Rámce a iframe - IFRAME
• Iné HTML tagy
• HTML parametre, ktoré sa nepoužívajú
• HTML tagy, ktoré sa nepoužívajú

Moderné princípy web stránok a príkazy jazyka HTML5

• rozdiely medzi verziami HTML
• prístupnosť
• sémantické elementy a správna štruktúra web stránky

Základy a princípy jazyka CSS

• história CSS jazyka a verzie CSS 1, 2 a CSS 3
• Tvorba moderných webových stránok, využívanie CSS na zadávanie štýlu
  • oddelenie grafiky od textu
• Ako CSS vkladáme do stránky?
  • priamy štýlopis - Nie je to veľmi dobré, ale keď musíš, tak musíš
  • STYLE v hlavičke súboru - Lepšie, ale predsa len ...
  • externý súbor - ideálne
  • merné jednotky - percentá, PX, EM a REM
  • vkladanie CSS štýlu
    • selektory v CSS jazyku
    • priamy štýlopis
    • CSS zápis priamo v HTML súbore
    • CSS zošit
    • nanášanie cez identifikátor
    • nanášanie štýlu cez triedu - class
• preberanie referenčnej CSS príručky
• CSS selektory
  • Na čo slúžia?
  • Ako sa píšu?
    • Selektor podľa HTML značky
    • Selektor podľa triedy - class
    • Selektor podľa identifikátora - ID
• textové efekty
  • farba písma
  • typ písma
  • tučné, šikmé, zarovnané vpravo, na stred, do bloku, riadkovanie
  • práca s fontom
  • štýly písma
  • ostatné CSS príkazy
• Bližšie vysvetlenie jednotiek v CSS - px a %
• Farby v CSS - pomenovaná farba, RGB model, hexakód
• Zápis fontov v CSS , možnosti, ake nemám daný font
• práca s pozadím - farba alebo obrázok
  • Obrázok na pozadí ako kachličky
  • Obrázok na pozadí ako veľká fotka
• práca obrázkami na pozadí
• práca so zarovnávaním
• Vrátenie sa k HTML - delíme našu stránku na oddiely/škatule - DIV
• Všetko je škatuľa - box model a vlastnosti veľkosti, odsadenia a obrysy objektov
  • šírka a výška HTML elementov
  • Pretekanie obsahu
  • Odsadenie z vnútra - padding - niekedy nafukuje (box-sizing)
  • Odsadenie z vonku - margin
  • Rámček/bordúra dookola
• Zarovnáme škatule vpravo a na stred?
• nanášanie CSS jazyka priamo na elementy a atribút STYLE
• Praktický príklad: Tvoríme svoju prvú hotovú webovú stránku
  • Tvoríme rozloženie: stredový stĺpec s 3 oddielmi - hlavička, menu a obsah
  • Prepájame stránky odkazmi
  • nastavujeme menu
  • tvoríme štruktúru
  • vytvárame obsah
  • nastavujeme vzhľad cez CSS štýl
  • vytvárame a vkladáme grafiku
  • kopírujeme stránku a linkujeme menu
  • editujeme obsah podstránok
• FTP a domény, publikujeme webovú stránku
  • aký webhosting budeme potrebovať, aké sú možnosti na trhu
  • akú doménu si zvolíme
  • aké programy používame na kopírovanie cez FTP
  • registrujeme si bezplatný webhosting a stránku kopírujeme na webový server

CSS štýly a grafika na web stránkach:

• CSS selektory - optimalizujeme náš CSS kód
  • Kombinujeme selektory - selektor dietaťa (>), selektor potomka (medzera)
  • Viac selektorov pre jednu definíciu (,)
  • nanášanie CSS jazyka NIE priamo
  • selektor - názov HTML tagu
  • selektor - názov triedy
  • selektor - identifikátora
  • selektor - rodič a potomok
• Tvoríme ďalší príklad a novú hotovú webovú stránku
• Upravujeme webstránku s novými CSS efektami
  • nastavujeme menu, tentokrát vyžívame zoznam
  • tvoríme novú grafiku
  • nanášanie vlastností cez identifikátor
  • nanášanie štýlu cez triedu - class
  • tvoríme viacstĺpcový design stránky alebo aj navigácia v riadku
  • ukladáme 2 odstavce vedľa seba - vlastnosť float
  • pracujeme s relatívnymi pozíciami
  • upravujeme obsah

Tvorba dynamických webov a JavaScript a PHP začiatočník:

• Čo je dynamický web?
• Dynamickosť na strane servera a klienta - jazyky PHP a JavaScript
• JavaScript
  • Beží lokálne - môj počítač mení stránku
  • Čo JavaScript môže a čo už nie
  • Ako a kde JavaScript zapisujeme?
  • Základný princíp: akcia - reakcia: kliknem a niečo sa zmení
  • Pravidlá syntaxe a zápis - ukážka
• PHP
  • Beží na serveri - iný počítač mi mení a tvorí HTML kód
  • Stránky sa skladajú dynamicky - po kúskoch ako lego
  • Čo je to Apache?
  • Čo môže robiť PHP?
  • Ako a kde zapisujeme PHP?
  • Pravidlá syntaxe a zápis - ukážka
  • Ukážka príkazov echo a include

Odborná diskusia s lektorom

• Trendy vo vývoji HTML a CSS jazyka
• responzívny webdesign a mobilné aplikácie, CSS grid
• Aké webové stránky sa ľuďom páčia
• Aký typ grafiky si zvoliť
• Webhosting, ceny, služby, prieskum trhu
• Domény, registrácia, možnosti
• Diskusia s účastníkmi

Zopakovanie HTML tagov, ktoré budeme potrebovať

• práca s textom
• práca s odstavcami
• Obrázky a odkazy
• Zoznamy a tabuľky
• oddiely a časti webstránky
• obrázky a pozadia
• odkazy
• nástroje pre vývojára alebo DEVELOPERS TOOLS v prehliadači

Nové HTML Elementy

• Čo sú sémantické elementy? W3 štandard
• Aký majú význam značky STRONG, EM, INS, DEL, ADDRESS, ABBR, BLOCKQUOTE, CITE?
• Blokové sémantické elementy - HEADER, FOOTER, NAV, ASIDE, ARTICLE, SECTION, MAIN
• Prerobíme DIVká na stránke na sémantické elementy

Grafika na webstránkach

• na čo sa používajú obrázky
• kedy sa používajú obrázky pozadia
• rozdelenie grafických formátov
  • rastrové
    • JPG
    • png8 a png24
    • PNG
    • GIF
    • Animácie
  • Vektorové - SVG
• použite grafických formátov - na čo je ktorý formát vhodný
• kde nájdem vhodnú grafiku? - fotobanky, platené/zadarmo, ikony
• obrázky a legislatíva
• Úprava rastrových obrázkov
  • Šetríme prenosové pásmo, zrýchľujeme stránku pomocou obrázkov vhodnej veľkosti a kvality
  • Vhodná veľkosť - orezanie obrázku online služby/Photoshop
  • Optimalizácia kvality - online služby/Photoshop
• Prečo je vektorová grafika budúcnosť webu?
  • SVG je bratranec HTML
  • SVG formát

Zopakovanie CSS jazyka

• CSS I., CSS II. a CSS III.
• Syntax
• zápis CSS štýlu
• • priamo
  • Štýl v HTML súbore
  • externý súbor
  • výhody / nevýhody
• Selektory
  • Podľa HTML značky
  • Podľa triedy - class
  • Podľa identifikátora - ID
  • Kombinácie selektorov (child selector a descendant selector)

CSS pokročilý

• Nové jednotky na veľkosť - em, rem
  • Aká je základná veľkosť fontu? Čo je 1em?
  • Rozdiely em a rem a ich využitie - prístupnosť
• Využitie nových fontov na stránke
  • Google fonts
  • Prečo je font-weight udaná v číslach?
  • @font-face direktíva na vkladanie vlastných fontov - čo obsahuje?
  • Vložíme si manuálne do stránky nový font (z 1001fonts/dafont)
• Definície a volanie farieb
  • Nové definovanie farieb s priehľadnosťou - rgba(), hsl(), hsla()
  • hexakód a priehľadnosť - podpora nových vecí prehliadačmi: caniuse.com
• Margin, padding - komplexnejší príklad
  • Dvoj, troj a štvorhodnotový zápis margin a padding

• Problémy pri box modeli - margin collapse,  box-sizing
• Niekedy je lepšie použiť padding ako margin a naopak
• Pre kontorlu použijeme DEVELOPER TOOLS v prehliadači
• CSS reset - keď prehliadač robí napriek
• Spravíme si jednoduchý reset pre box-sizing, využijeme selektor všetkého (*)

Pozíciovanie - CSS vlastnosť position

• Static - to, čo doteraz
• Relative - relatívne voči originálnemu miestu
• Posúvame veci left, right, top a bottom
• Fixed - fixne na obrazovku
• Absolute - najkomplikovanejšie ale najpoužívanejšie

Vlastnosť display a viditeľnosť v CSS

• Keď chcem elementy skrývať
• Meníme blokovitosť a riadkovitosť
• Spravíme si riadkové menu
• Prekresľujeme z príkladov
• • základom je aby po kurze účastníci vedeli kopírovať vizuálne vzhľad z predlohy a vedeli to vytvoriť a zapísať do HTML a CSS kódu, preto je súčasťou kurzu aj nácvik prekresľovania obrázku stránky do HTML a CSS aj nasledujúce cvičenia:
    • prekresľovanie rôznej grafiky do HTML a CSS
    • kontrola a vyhodnocovanie
    • zapracovanie šablóny do webstránky
• Záverečná diskusia a priestor na otázky

Čistý JavaScript

• Úvod do jazyka
• História
• Podpora prehliadačov
• Čo vlastne JavaScript vie
• Čo s JavaScriptom neurobíme

Začíname programovať

• Ukážka skriptu
  • Kde JavaScript píšem?
  • Do HTML, externý súbor
  • Ako JavaScript využijem? - Reagujem na udalosti
  • Čo sú udalosti - eventuality?
  • HTML atribúty on***
  • Nájdenie elementu - funkcia getElementById
  • Zmeníme text - vlastnosť innerHTML

Syntax jazyka

• Spôsob zápisu a syntax
• Premenné a spôsob zápisu
• Rozdelenie premenných na privátne, lokálne
• Poznámky a komentáre
• Typy premenných
  • Číslo
  • Text
• Čo s nimi môžem robiť?
  • Matematika +, -, *, /
  • Spájanie textov +
• Konštanty
• Objekty
• Zápis premenných do textu, resp. do stránky

Výpis na obrazovku

• Alert
• Document.write
• InnerHTML
• console.log
• Rozdiely

Funkcie

• Čo je funkcia?
• Funkcia - kamarát, ktorý pracuje za nás
• Tvorba funkcií
• Zápis funkcie
• Parametre funkcie - žiadny alebo niekoľko
• Výstup funkcií - return
• Spravíme si konvertor jednotiek

Podmienky

• Podmienka IF
• Operátory - porovnávanie hodnôt
  • Pravdivostné hodnoty
  • >, >=, <, <=, ==, ===, !=
• Praktické príklady
• AND a OR alebo keď jedna podmienka nestačí
• Negatívna časť podmienky - časť ELSE
• ELSE IF
• Podmienka SWITCH
• Praktické príklady

Cykly

• Problematika cyklov
• Využívanie cyklov
• Cyklus for
  • syntax
  • Využitie
  • Operátor ++
  • praktický príklad
• Cyklus While
  • syntax
  • využitie
  • praktický príklad
• metód poľa Foreach
  • syntax
  • vyžitie
  • praktický príklad
• Zastavenie cyklov - break
• Riadiaca premenná

Polia

• Rôzne hodnoty v jednom balíku
• Index začína od nuly
• Vlastnosť “length”
• “Poľoidné” hodnoty z funkcií getElementsByClassName, getElementsByTagName a querySelectorAll

Nástroje prehliadača

• Konzola
• Chyby v JS a ich ladenie
• Sledovanie programu krok za krokom

• Opakovanie

  • hľadanie v DOM

  • eventy - na čo môžme reagovať

  • čo môžme meniť

  • ukazka zmeny na viacerých elementoch

  • Dátové typy a operácie s nimi

  • funkcie

  • Podmienka If

  • Cykly For a While

• Objekt

  • Čo je objekt?

  • Iný druh poľa - pomenované prvky

  • Bodková notácia vlastností

  • Objekt window, document

  • Vlastnosti môžu byť aj funkcie

• Funkcie v objekte

  • Zápis funkcie ako vlastnosti objektu - function expression

  • Vlastnosť “this”

• vstavané objekty a čo s nimi môžeme robiť

  • Math

    • Zaokrúhľovanie

    • generovanie náhodného čísla

  • Number

    • Konverzia z textu na číslo - parseInt, parseFloat

  • String

    • Hľadanie v texte - includes, indexOf, replace

    • Orezávanie textov - split, slice, trim

  • Date

    • Získanie dátumu

    • Manipulácia - počítanie s dňami, mesiacmi, rokmi

  • Spravíme si formulár s úrokovou kalkulačkou

• Funkcie, ktoré voláme spätne - callback funkcie

  • Zbavíme sa on*** atribútov

  • Použijeme “počúvadlo na udalosti” s callback funkciou - addEventListener()

  • Anonymné callback funkcie - píšeme ako obyčajné parametre

  • Udalosť nahratia celej stránky - DOMContentLoaded

  • Parameter event pre callback funkciu

  • Reagujeme na stlačenie kláves - event.which

  • Reagujeme na pozíciu myší - event.clientX, event.clientY

  • Vybublávanie udalostí - preventDefault(), stopPropagation()

  • Spravíme si jednoduchú hru

• Polia s callback funkciami

  • Array.forEach

  • Array.map

  • Array.filter

• JSON

  • Spôsob zápisu JS objektov

  • porovnanie s XML

  • využitie

  • Objekt JSON a metódy parse() a stringify()

• AJAX

  • Čo to je? - zmením stránku bez refreshu

  • Aké typy requestov môžeme robiť? - GET, POST

  • Objekt XMLHttpRequest

  • Na čo musíme počkať? - state

  • HTTP Status kódy

    • Dobré - 20x

    • Presmerovania - 30x

    • Zlé - 40x, 50x

  • Reagujeme, keď prídu údaje

  • Reagujeme, keď nastane chyba

  • Úloha - spravíme si menovú kalkulačku, údaje stiahneme AJAXom z NBS

• DOM manipulácia

  • Vytváranie elementov - createElement()

  • Vkladanie do stránky - appendChild()

  • Vyberanie a náhrada - removeChild(), replaceChild()

  • Úloha - spravme si vlastný datePicker

• Knižnice na uľahčenie programovania

  • Nevymyslame znova koleso

  • jQuery, lodash

• Čo je Bootstrap
  • Čo je responzivita a prečo mať stránky responzívne.
  • Prečo Bootstrap - ako mi pomôže s responzivitou.
  • Bootstrap a podpora prehliadačov.

• Ako Bootstrap použiť
  • Stiahnutie a "inštalácia"
  • Minimálna šablóna.
  • Ošetrenie kompatibility.

•  Ako je Bootstrap delený
  • CSS - na vylepšenie a skrášlenie obsahu - písma, farby, zarovnanie a pod
  • Komponenty -Na logické združenie obsah a pridelenie významu - skupiny tlačítok, upozornenia a pod
  • JavaScript - Na oživenie obsahu - "kolotoče", "harmoniky", "vyskakovacie okná" a pod. 

•   Tvoríme Bootstrap (responzívnu) stránku
  • Návrh -Čo je "mobile first".
  • Prečo a ako deliť obsah do blokov už pri návrhu.
  • Tvorba štruktúry
  • Povinná štruktúra stránky
  • Kontajnery
  • Riadky
  • Bloky

• Práca s blokmi
  • Čo je responzívna sieť - responsive grid
  • Vnáranie blokov 

• Pomocné triedy
  • Odsadzujeme / posúvame bloky - offset
  • Meníme poradie blokov - pull, push
  • Skrývame/zobrazujeme bloky - hide, show
  • Riešime problémy s nerovnakou výškou blokov - clearfix

• Vkladáme menu
  • Vyberáme typ menu
  • Práca s navigačnými záložkami - nav tabs
  • Práca s navigačnými tlačítkami - nav pills
  • Práca s navigačným panelom - nav bars

• Vkladáme obsah
  • Text    
  • Nadpisy
  • odseky
  • Skratky
  • Citácie
  • Zoznamy
  • Tabuľky
  • Formuláre
  • Obrázky
  • Videá

•   Formátujeme obsah bez vlastného CSS
  • Vylepšujeme textové prvky
  • Vylepšujeme tabuľky
  • Vylepšujeme obrázky
  • Vylepšujeme videá
• Vkladáme komponenty
  • Ikony - glyphicons
  • Tlačítka - buttons
  • Panely - panel, well, jumbotron
  • Stránkovanie - pager
  • Upozornenia - alert
  • Ukazatele priebehu - progress bar
• Oživujeme obsah
  • Rozbaľovacie tlačítka - dropdowns
  • Vyskakovacie okná - modals
  • Potvrdzovateľné upozornenia
  • Záložkový systém pre obsah - tabs
  • Kolabovateľný obsah - accordion
  • Kolotoč obrázkov - carousel
  • Riadková a bloková pomoc pre obsah - tooltip, popover 

• Testujeme stránku
• Ako ďalej - beyond bootstrap
• Úprava Bootstrap
• Vylepšenia Bootstrap
• Material design
• Podpora tém
• Hotové komponenty
  • Hotové príklady
  • Zdroje informácií
  • Iné frameworky