Balík webdesignér
frontend developer a backend programátor a vyvojár

Ú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

Pokročilé CSS vlastnosti a selektory

• Vyskakujúci podzoznam - finta s :hover a display,
• kombinátor selektorov  - súrodenci (+, ~)

Moderné formátovanie tabuliek

• CSS vlastnosti - border, border-collapse, border-spacing, vertical-align
• Zafarbenie riadkov na preskačku - selektory :first-child, :nth-child(), :last-child

Fonty a ikonky

• HTML entity (napr  ) a iné akože ikonky
• Emoji
• Fonty s ikonami na stránke, Font Awesome, Glyphicons, …
• Pseudo-element selektory ::before a ::after a CSS vlastnosť content

Pozadie stránky - rozšírené

• Farebné prechody v pozadí - linear-gradient(), radial-gradient()
• Viacnásobné pozadia
  • Pozícia: background-position
  • Obrázky, priehľadné textúry, filtre
  • gradienty

Médiá a videá na stránke

• Kedysi Flash, dnes už nie
• Vkladáme video z Youtube/Vimeo
• AUDIO element a jeho SOURCE
• VIDEO element
• Atribúty controls, autoplay, muted, loop
• Podporované formáty - mp3, mp4, ogg
• Video ako pozadie stránky

Formuláre na stránke

• Čo je formulár? (FORM)
• Ako sa posielajú dáta? - atribút METHOD
  • Aké sú možnosti?
  • Aké výhody má GET? - URL ma dostane priamo na n-tú stránku
  • Aké výhody má POST - dáta idú skryto
• Element INPUT
  • Atribúty TYPE, NAME, VALUE
  • Bežné typy inputov -
    • TEXT, PASSWORD a atribút MAXLENGTH
    • Prečo máme HIDDEN?
    • RADIO - pozor na name a value atribúty
    • CHECKBOX - atribút CHECKED
    • SUBMIT, RESET - nepoužijeme radšej BUTTON element?
    • FILE - atribút ACCEPT pre výber typu súboru, atribút MULTIPLE
  • Nové typy inputov - COLOR, DATE, EMAIL, NUMBER, RANGE
  • Nové atribúty - MIN, MAX, PLACEHOLDER
  • Atribút PATTERN - definovanie vlastného inputu
  • Podpora nových inputov
  • Kde si môžem skontrolovať podporu HTML a CSS vlastností? - caniuse.com
  • Náhrada - jQuery UI datepicker,...
• Element SELECT + OPTION - výber rôznych hodnôt
• Element DATALIST - našepkávač hodnôt
• Element TEXTAREA
• Element LABEL a spravenie prístupnejšieho formulára
  • Použitie atribútu TABINDEX
• Element FIELDSET a LEGEND - rámčekovanie nášho formulára
• Validácia formulárov prehliadačom
  • Atribúty REQUIRED, READONLY, DISABLED, ACCEPT

Formátovanie formulárov

• Selektor podľa atribútu [type], [type=xyz]
• Pseudo-class selektory - :required, :disabled, :read-only, :checked, :focus
• Prefixované CSS vlastnosti  -moz-, -webkit-
• Špecificita selektorov - čo určuje, ktorý selektor sa uplatní?
• Upravíme si formulár pomocou nových selektorov a vlastností
  • orámujeme inputy, odsadíme a otieňujeme
  • Uplatníme nové selektory a vlastnosti

Prechody a animácie

• CSS vlastnosť transition
  • aplikujeme na :hover selektor
  • Postupná zmena
    • Čo sa má zmeniť?
    • Trvanie
    • Omeškanie
    • Prechodové funkcie
      • Ease
      • Linear
      • Ease-in
      • Ease-out
      • Ease-in-out
      • steps
      • Cubic-beziere
    • Viaceré prechody
  • Spravíme si animované tlačidlo
• CSS vlastnosť transform - Geometrické transformácie
  • Otáčanie - rotate
  • Škálovanie - scale
  • Skosenie - skew
  • Posun - translate
• CSS vlastnosť animation
  • Čo môžem animovať a čo nie? - animatable
  • @keyframes pravidlo
  • Animujeme ako film - postupnosť zmien
  • Trvanie, omeškanie a prechodové funkcie ako transition
  • počet opakovaní
  • Smerovanie
  • Fill-mode
  • Pozastavenie animácie

Ú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

• Pohľad na modernú webstránku
  • Dnes využívané technológie
  • HTML5 a podpora JavaScriptu
  • Vývoj jazyka JavaScript
  • Podpora prehliadačov
  • Čo všetko dnes vieme spraviť na webe?
• Píš menej, urob viac – jQuery
  • Čo je to knižnica jQuery?
  • Ako sa v jQuery programuje?
  • Čo budeme potrebovať?
  • Nástroje na ladenie skriptov
  • Dostupnosť a verzie
  • Výhody a nevýhody
  • Čo sa robí cez jQuery a čo pomocou CSS a HTML5?
• Pripájame do stránky jQuery
  • Aktuálna verzia
  • Podpora IE
  • Čo je to plná verzia a čo jQuery min?
  • Stiahneme si jQuery lokálne, alebo máme použiť CDN?
  • Prvý príklad
• Predstavme si dôležité možnosti a funkcionality
  •  Funkcie
  •  Prístup k objektom
  •  Animácie
  •  Interaktivita
• Začíname programovať v JavaScripte s pomocou jQuery
  •  Elementy, selektory a atribúty
  •  Objektový model dokumentu – DOM
  •  Vlastné selektory a pozičné selektory
  •  Vyberáme a pristupujeme na objekty cez
    • Názov
    • Atribút
    • Triedu
  •  Prvé príkazy: .html, .text, .css, .hide, .show, .toggle, .addClass
  •  Syntax „jazyka“
  •  Ostatné selektory: všetko, tagy v tagoch, podľa obsahu, podľa potomkov, podľa atribútov, ...
  •  Tagy podľa hodnoty atribútu a iné
  •  Pozičné selektory v praxi – tabuľky a zoznamy
  •  Pracujeme s DOM
    • Zabudnime na onclick = “moja funkcia();“ – máme niečo lepšie!
    • Skrývame a odkrývame na jeden klik
    • CSS ešte efektívnejšie
• Nový selektor - Hľadáme texty :contains
• jQuery a udalosti
  •  Čo sú to udalosti?
  •  Priame nanášanie udalostí – eventuality
  •  Prepojenie eventualít a jQuery
  •  Obsluha udalostí
  •  Obsluhujeme selecty a sledujeme hodnoty
  •  Zväzujeme udalosti .on
    • Zisťujeme pozíciu kurzora
    • Zisťujeme informácie o objektoch
    • .mouseenter vs. .mouseover
    • Ostatné udalosti: mousedown, mouseup, mouseleave
    • Nanášame na objekt viac udalostí
    • pageX a pageY
  • Obsluhujeme klávesnicu
    • Sledujeme stlačené znaky
    • Kontrolujeme vstupy
    • Focusin, focusout
• Efekty za pár sekúnd
  • Neprogramujme – používajme
  • CSS vlastnosti display a opacity
  • Show, hide, toogle, fadein, fadeout a vlastnosť duration
  • Slideup, slidedown, slidetoogle
  • Pokročilé grafické efekty a animácie
• .animate a jej vlastnosti
• jQuery a vstavané AJAX funkcie
  •  Z čoho sa skladá AJAX?
  •  Využívanie $.ajax
  •  Čítame externý obsah bez nutnosti refreshu celého prehliadača
  •  Jednoduchý príklad – hodiny
  •  Tvoríme záložkový AJAX systém
  •  Spracovávame hodnoty z formulára cez AJAX
  •  Rozdiel medzi požiadavkami POST a GET
  • metóda .load
• Programujeme a tvoríme praktické príklady
• Diskusia

Č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

• Tvorba webstránok
  • trendy
  • potreba skriptovacích jazykov
  • kde sa nachádza HTML a kde PHP
  • lokálne a serverové jazyky
  • čo všetko sa na webe dnes dá spraviť
  • prečo web programovať a čo sú to redakčné systémy ako napr. Wordpress
• Fronend a backend development alebo akú pozíciu zohráva PHP pri vývoji
  • kto je to návštevník a čo užívateľ vidí a čo nie
  • kto programuje užívateľskú časť
  • kto programuje serverovú časť
  • frameworky alebo keď sa programátorom nechce robiť
• Serverové skriptovacie jazyky
  • porovnanie
  • PHP, Ruby, Asp, Python a iné
• Webhosting a podpora servera
  • čo je to doména
  • čo je to webhosting
  • registrácia nového webhostingu a pripájanie sa na FTP server
  • podpora PHP jazyka
  • dovolené koncovky súborov pre PHP jazyk
  • podpora databáz
• Inštalácia lokálneho servera
  • ako sa inštaluje lokálny server
  • WAMP, XAMP alebo MAMP
  • nastavenie a praktická inštalácia
  • koreňový adresár
  • kde ukladám svoje stránky
• Vkladanie PHP do HTML jazyka
  • ako vkladám do hotovej stránky PHP skript
  • Short tag alebo skrátený zápis
  • prvá PHP skúška alebo “Ahoj Svet”
  • PHP súbor alebo PHP skript
  • viac blokov v jednom súbore
  • ukončovanie PHP skriptu
  • rozdiel medzi skriptom a PHP stránkou
• Základné funkcie a kódová syntax či konštrukcie PHP jazyka
  • funkcia echo
  • funkcia print
  • ukončovanie riadkov
  • bloky a zátvorky
  • poznámky v kóde
  • výpis textu
  • vkladanie HTML značiek do PHP kódu
  •  jednoduchý príklad s výpisom dátumu a času
  • prvá aplikácia, prvý skript
• Premenné a konštanty
  • premenné
  • definícia premenných
  • typy premenných
  • matematické funkcie nad premennými
  • algoritmizácia s premennými
  • konštanty
  • polia
  • ukazovatele
  • objekty
  • práca s premennými
• Podmienky
  • čo je to podmienka
  • rozhodovanie – základ programovania
  • podmienka if
  • časť else
  •  else IF
  • switch
  • príklady na prácu s podmienkami
• Cykly
  • čo sú to cykly
  • použitie
  • využitie
  • cyklus FOR, While a Foreach
• Funkcie
  • používanie funkcií
  • vracanie hodnôt
  • parametre funkcií
  • práca s funkciami
• Direktívy
  • premenné zo servera
  • superpolia alebo direktíva GET, POST a SERVER
  • GET – vracanie hodnôt s URL adresy alebo parametre nad spusteným skriptom
• Skladba URL adresy
  • parametre
  • Rewrite mód
• Vkladanie obsahu alebo na čo slúži include
  • ako sa vkladá obsah z iného súboru
  • Include a require a ich rozdiel
• Tvorba komplexnej web stránky za použitia PHP
  • tvorba HTML šablóny
  • 3 spôsoby písania webstránky alebo komplexnej aplikácie
    • includovanie obsahu
    • rozdelenie na hlavičku a pätu
    • rewrite mód
  • tvorba webstránky s menu
  • vkladanie obsahu
  • úprava obsahu a titulkov
  • tvoríme aplikáciu
• HTML formuláre
  • ako sa tvoria formuláre
  • typy formulárových polí: text, číslo, oblasť textu,  farba, dátum, výberové pole, radio button a checkbox
  • hotové možnosti: predpísaný text a overovanie hodnoty
  • atribúty akcia a metóda
  • tvorba jednoduchých formulárov
• Spracúvanie formuláre v PHP
  • spolupráca HTML a PHP cez značku name
  • spracovanie formuláru
  • spôsoby odoslania formulára:
    • na tú istú stránku
    • odoslanie formuláru na stránku skriptu a rozhodovanie
    • odoslanie na web stránku
    • presmerovanie cez funkciu header
  • ochrana dát alebo overovanie na strane skriptu
• Práca so súbormi
  • čo sú to súbory
  • textové súbory a binárne súbory
  • práca so súbormi na odkladanie a čítanie dát
  • otváranie súborov a módy
  • vkladanie riadkov do súborov
  • čítanie po riadkoch
  • tvorba praktických príkladov spolu so súbormi
• Databáza nad súbormi
  • pojem záznam a riadky a stĺpec
  • tvorba dátových súborov
  • vkladanie dát cez formulár
  • čítanie dát cez while cyklus
  • databázová aplikácia obchod a produkty a užívatelia
• Praktická tvorba alebo príklady, ktoré spravíme na kurze
  • galéria obrázkov
  • webstránka s menu a podstránkami
  • kniha návštev alebo jednoduchá databáza na súbore
  • anketa
  • počítadlo návštevníkov
• Prenos súborov na webhosting a sfunkčnenie webstránky
• Diskusia

• Úvodná diskusia
• Nastavenie Apache servera a PHP jazyka
  • najčastejšie problémy v praxi
  • na čom “bežia” moje web stránky
  • čo môžem nastaviť a čo je pevné
  • nastavenia Apache prakticky: stránky typu 404 a errordocument, port, vykonávané dokumenty a procesy server, listovanie adresára, prístup do adresára a zakázanie prístupu, httpd.conf alebo .htaccess
  • základné Nastavenie PHP
  • ako môžem meniť nastavanie servera – PHP.ini alebo ini_set
• Tvorba nových funkcií a bezpečnosť cez require
  • tvorba nových funkcií
  • parametre funkcií
  • výroba nových funkcií
  • Return alebo vracanie hodnôt
  • Include vs. require
• Superglobálne premenné SESSION a COOKIE
  • čo je to SESSION
  • kde je uložené
  • ako sa prehliadač kontaktuje so serverom
  • registrácia SESSION premenných
  • vkladanie a čítanie dát do SESSION
  • registrácia PHP SESSION ID a kradnutie hodnoty
  • Cookie premenné
  • bezpečnosť COOKIE premennej
  • registrácia cez set_cookie
  • platnosť SESSION a COOKIE premennej
  • tvorba praktického príkladu
• Práca s Emailom
  • posielanie emailu cez funkciu mail
  • posielanie emailu s hlavičkou
  • nastavanie emailu
  • posielanie prílohy
• Serverové premenné
  • SERVER a jeho premenné
  • čo vieme o návštevníkovi
• Tvorba praktickej aplikácie – programujeme štatistiku návštevnosti
• Pokročilá práca so súbormi
  • tvorba adresárov
  • čítanie celého súboru
  • mazanie súborov
  • bezpečnosť súborov
• HTTP hlavička
  • funkcia HEADER aj jej možnosti
  • názov skriptu
  • ako funguje HTTP hlavička a prehliadač
• Dynamické generovanie dokumentov Obrázky, Word, Excel
  • ako fungujú dynamické dokumenty
  • princíp Word dokumentov
  • princíp Excel dokumentu
  • generovanie obsahu a tvorba dokumentov s dynamickými dátami
  • tvorba obrázkov alebo GD2 knižnica
  • jednoduchý príklad na obrázky alebo ako vytvoriť capcha obrázok
• Bezpečnosť PHP skriptov
  • čitateľnosť
  • prípony
  • chybové hlášky
  • postupy hackerov
  • ako sa brániť
  • logovanie a sledovanie udalostí
  • Inlcudovanie za podmienky
  • vykonávanie za podmienok
  • adresáre pre skripty, pre súbory, obrázky a pre obsah
• Zabezpečenie formulárov alebo XSS útok v praxi
  • základné zabezpečenie
  • čo je to XSS útok
  • ako sa brániť
• Hashovanie a heslovanie – MD5
• Úvod objektového programovania
  • čo je to objekt
  • rozdiel medzi objektom a funkciou
  • tvorba nového objektu
  • použitie objektu
  • rozdiel medzi funkciou a objektom
  • používanie a praktické cvičenia
• Objekty v praxi – tvoríme PDF dokument
  • zakladáme objekt PDF
  • používame objekt PDF
  • vkladáme dáta
  • referenčná príručka a príkazy pre PDF knižnicu
  • exportujeme PDF
• Úvod do problematiky SQL databáz
  • čo je to SQL databáza
  • MySQL a pripojenie pomocou objektu
  • objektové pripojenie cez MySQL
  • čítame dáta na obrazovku
• Diskusia

• Keď sa povie databáza
  •  súbory vs. databáza
  •  architektúra databázy
  •  rozdiel medzi MySQL a Mária DB
  •  dotazovanie
  •  porty
  •  dáta
• SQL jazyk
  • čo je to SQL
  • skúška SQL dotazu
  • základné dotazy nad databázou
  • odpovede servera
  • rozdelenie príkazov
• Návrh databázy
  • čo je to databáza
  • čo je to tabuľka
  • čo sú to dáta
  • návrh jednoduchého databázového riešenia
  • kľúče a identifikátory a tvorba ID stĺpcov
  • relačná VS. Plošná schéma
• Dátové typy alebo tvorba novej tabuľky
  •  stĺpce alebo riadky
  •  čísla, texty, dátumy a ostatné dáta
• Tvorba databázy a úvod do programu PHP My Admin
  •  spustenie programu
  •  prihlásenie sa do programu
  •  používatelia a účty
  •  tvorba novej databázy
  •  tvorba tabuliek a štruktúry
  •  výroba novej tabuľky na základe zadania
• SQL dotazy, ktoré budeme potrebovať
  •  select
  •  insert
  •  update
  •  delete
  •  klauzuly WHERE a ORDER
• PHP a konektivita
  •  pripojenie sa na SQL server
  •  starý systém funkcia MySQL connect a nové objektové riešenia
  •  MySQL
  •  spúšťanie dotazov
  •  vyberanie výsledkov
  •  zobrazovanie na obrazovke
• Vkladanie dát
  •  vkladáme dáta cez PHP My Admin
  •  tvorba PHP formulárov
  •  príkaz insert z PHP
• Výpis dát na obrazovku
  •  výber dát cez fetch_array
  •  cyklus while
  •  balík údajov
  •  výpis na obrazovku
  •  odkazy a akcie
•  Ako na akcie
  •  mazanie dát z obrazovky
  •  úprava dát alebo editácia
• Prvé databázové riešenie – kniha návštev
  •  vyrobíme tabuľky
  •  vyrobíme formulár
  •  pridáme logiku a kód pre formulár
  •  vypíšeme výsledky
  •  kontrolujeme kód
• Zoraďovanie a triedenie dát
  •  limity a stránkovanie
  •  radenie cez order
  •  filtrácia cez where alebo keď chceme iba niektoré záznamy
• Tvorba druhej komplexnej databázovej aplikácie – knižnica krok po kroku
  •  návrh tabuliek
  •  tvorba tabuliek
  •  tvorba stránok
  •  tvorba formulárov
  • programovanie logiky
  • výpis dát do skriptov
  • manipulačné skripty na úpravu a mazanie dát
  • kontrola
• 1. Samostatná úloha – jednoduchý internetový obchod
• 2. Samostatná úloha – správa používateľov
• jSON dáta alebo keď PHP s Echom nevládzu
  •  čo sú to jSON dáta
  •  vstavané funkcie PHP
  •  konvertovanie dát z MySQL do jSON
  •  výpis jSON dát cez JavaScript vs. dáta cez PHP
  •  ukážka v praxi
• SQL inekcie a bezpečnosť dotazov
  •  bezpečnosť v praxi
  •  čo je to inekcia
  •  ako sa brániť
  •  kontrola dotazov
  •  PDO objekt a funkcie execute a prepace alebo budúcnosť bezpečného dotazovania
• Diskusia

• Úvod do databáz a SQL
  •  čo je to databáza
  •  čo je to databázový server
  •  čo je to SQL
  •  rozdiely medzi platformami alebo ako sa vo svete SQL a databázových riešení vyznať
• Základné pojmy v prostredí databáz a SQL servera
  • databáza
  • relačná databáza
  • databázový server
  • tabuľka
  • pole
  • záznam
  • relácia
  • funkcia
  • dotaz
• Úvod do databáz MySQL
  • možnosti inštalácie
  • inštalácia
  • základné nastavenie
  • spustenie MySQL servera
  • prihlásenie na MySQL server lokálne
  •  prihlasovanie sa na sieťový server
• Databázové schémy
  •  ako sa tvorí návrh
  •  spôsob kreslenia návrhov
  •  ako sa vo svete databáz premýšľa
  •  odkladanie dát a správne triedenie
  •  databázové štruktúry a schémy
  •  plošná schéma
  •  relačná schéma
• Úvod do jazyka SQL
  • čo je to SQL
  • databázové platformy SQL a ich rozdiely
  • základná syntax jazyka SQL
  • všeobecné príkazy pre prácu s MySQL serverom
  •  rozdelenie SQL príkazov
• Dátové typy
  •  Čo sú to dátové typy
  •  rozdelenie dátových typov
  •  preberanie a prehľad dátových typov
• SQL konzola
  •  Práca s konzolou
  •  logovanie záznamov
  •  práca s oknom
  •  opakovanie príkazu
  •  vkladanie príkazov
  • delimiter
• Vytváranie dátovej štruktúry
  • vytváranie databáz, príkaz CREATE DATABASE a USE
  • vytváranie tabuliek, príkaz CREATE TABLE
• Modifikácia dátovej štruktúry
  • úprava databáz, príkaz ALTER DATABASE
  • mazanie databáz, príkaz DROP DATABASE
  • úprava tabuliek, príkaz ALTER TABLE
  • mazanie tabuliek, príkaz DROP TABLE
• Modifikácia dát v tabuľkách
  • vkladanie dát do tabuliek - príkaz INSERT
  • úprava dát v tabuľkách - príkaz UPDATE
  • mazanie dát z tabuliek - príkazy DELETE, TRUNCATE
• Výber dát z tabuliek
  • úvod do práce s príkazom SELECT
  • horizontálne a vertikálne filtrovanie záznamov
  • zoraďovanie výberu - ORDER
  • výber unikátnych záznamov
  • výber určitého počtu záznamov LIMIT
• Import dát
• SQL transakcia
• Zálohovanie dát
• Webový prístup cez PhpMyAdmin
  • spustenie programu
  • práca s programom
    • prehľad obrazovky
    • výber tabuliek
    • výber databáz
    • práca s dátami
  • pracovné prostredie
  •  tvorba nových databáz
  •  tvorba nových tabuliek
  • práca s dátami
  • import
  •  export
  •  SQL príkazy
• Heidi SQL – inštalácia a používanie
• Tvorba praktických príkladov
• Diskusia

• Opakovanie a diskusia
• Čo sú to dátové relácie
• Dôvody používania relačných vzťahov
• Vytváranie relačnej dátovej štruktúry
  • typy relácií
  • 1:1, 1:N, M:N
  • vytváranie relačných tabuliek
  • spôsob prepájania a logika tvorby tabuliek
  • práca s indexami
  • kľuče
  • práca s unikátnymi indexami
• praktické príklady a cvičenia relácií
• Nové tabuľky na základe dát
  •  Pohľadové tabuľky – VIEW
  •  čo sú to pohľady
  •  správa pohľadov
  •  zobrazenie dotazu nad pohľadom
  •  mazanie pohľadov
  •  Nové tabuľky na základe SELECTov
• Výber z viacerých tabuliek naraz
  • príkaz JOIN
  • spôsoby vnorených dotazov
  • SELECT z viacerých tabuliek za použitia WHERE filtrovania
  • INNER
  • LEFT
  • RIGHT
  • optimalizácia dotazu
  • úvod do technológií ladenia dátovej štruktúry
  • práca s indexami
• Praktické príklady
  •  knižnica
  •  e-shop
• MySQL WorkBench
  •  Inštalácia
  •  spustenie
  •  tvorba sedenia a pripájanie sa k databázovým serverom
  • úvod do práce s programom
  • základné funkcie, pravidlá a prostriedky
  • práca s tabuľkami a dátami
  • administrácia servera
  • úvod do modelovania dát
  • tvorba diagramov a dátovej štruktúry podľa návrhu
  • reverzné inžinierstvo
  • ako dostať nákres do SQL jazyka
  • návrh databáz
  • tvorba tabuliek bez nutnosti programovania
  • práca s programom
• Pokročilý výber dát z tabuliek
  • agregačné funkcie a výpočty v tabuľkách
  • základné matematické operácie, SUM, AVG, COUNT, MIN, MAX
  • dátumové funkcie
  • textové funkcie
  • šifrovacie a hashovacie funkcie
• Mysql Dump  - záloha a obnova cez príkazový riadok
  • zálohovanie databáz
    • export dát
    • import dát
• Praktické príklady
  • banka
  • predajňa
  • iné – podľa požiadaviek účastníkov