 Ech sa pači. Díky, čiavte. A ja nás začal tak vysvetlím, že prečo som si vybral práve túto tému. Ja som chcel správiť prednašku a určenú pre ľudí, pre poučívateľov a pre niekoho, kdo blízkej doby bude vytvárať web, tak niečo, čo by som ho vedel pripraviť. A toto je diskusia o tom vizuále. To je niečo, čo u nás vo firme rieším je poverne intensívne, ktorý je stord, kde nastava tá najväčšia miskomunikácia mezi námý developermi a mezi klientom. Takže som sa rozhodol práve toto nejakým spôsobom vysvetliť, pretože je veľká šanca, že sa v tom môžete zacykliť aj vy. A pretím ako začnem, tak jeden disklamer, ja strašne rád a veľa používám anglické slovička. Pretože ja si veľak rád neviem, spomenu, nači slovenské equivalenty, že ako to niekomu prekáža, tak asi. Ja bude povedalo, že myšel, že nebude bol beckas fondota o prvou slide. To daa disklamer, že anglické slovičko ktú som si oillä realne výgoogliť, že vlastne ako to hovori a ako to to vola poslovenski, oddlom si do Google Translate a odlomí to, že dementi. Tak som si nečo povedal, že dobrnechám to tak, bojem po anglické rozpravať. A toto je nejaký šest vécti, o ktorých bugem dneská. a čo byme chcete vysvetliť zašteme terminógujou procesom jednej a druhej a jedno a druheho prístupu. Pojeme si ako rýchlo môžete očakávať a dodanie webu jednova druhou metodou, koliko vás to bude stať a ako úlohu v tom hrá sprava obsahu vo výzuále, to je také kontraproduktívne možno, a pojeme si, že o kvalité. Keď zašteme toho terminógujou, tak teraz dnes vlastne vysvetliť, že čo je to šablona, čo je to design námieru a ešte ako sa dělja šablony. Design námieru to si právdepodobne všetci viete nejakým spôsobom predstaviť. To je niečo, čo kresli designer úplne že na zelené lúke, čiže má bielý screen a proste vy mu rozprávate, aké mate predstavi a on z toho správi na konci dnia nejaký design nejakú stránku. Je to presne podľa gusta, alebo predstav klienta a výsledkom je to naozaj unikátný design, čo nikdo nemá, jak to sa neníšpíroval nejakou ino stránku. A je to vlastne urobené iba rásť, čiže tá firma alebo freelancer, designer jednoducho vytvorí na pre klienta nejaký design. Kdež to šablona, tam je trošku iná filzofia, to je design, ktorý sa prepoužívá. Čiže na rozdel od toho prvého momentu, kde firma sa živí tým, že urobiť design klientový tak toto ten biznis modeli taký, že sa najprv správi nejaký design, nejaká šablona, ideálne taká čo sa bude báči strašne veľa ľuďom, aby si u potom oni kupovali sa nejaký slomok ceny. Čiže to je úplne opačne, že najprv pri design námieru je nejaká požedaokastovnikne design. Tu je to naopak, že najprv sa správi design a poľom sa toho dina nejaký marketplace a dúfa sa, že sa ten design bude kupovať. Čiže šablony sa dnešne dobe robia takznan, že multipurpose, čiže opet neviem, aby bolo na viac použitia, pretože oni chcú, aby tu 19 dolarovú šablonu si stiaľo pochopiteľne čo najovat ľudí, tisícky, tisícky, čiže oni potrebú správi taký generický a taký univerzálny design, aby sa to proste páčilo strašne veľkujemú publiku. Ja to rád prído návan klientom, pokiaľ to nechápu, a vstávbe rodiného domu. Keď si chcete postaviť nejaký dom, tak tiež máte navívor, môžete zbudť do nejakého štúdy alebo do architektóvy, ktorí vám nákresli a pripraví projekt úplne, že presne podľa vašej augusta, alebo môžete zvoliť lacnejšiu verziu, že si vyberieť nejaký katalogový rodiny dom, čiže otvoriť nejaký katalog a je to úplne rovnaká situácia, že tiež takéto projekty stoja o mnohomenie, ako keby, že vám to kresli je úplne, že od núli a tak tiež tiež katalogové rodiny domy sa snažia robite štúdy a tak aby sa zapačili, čo najávac ľuďom, čiže úplne rovnaká ideá. Neská už tie témy sú naozaj, že pekne. Pará roko dozadu, keď ste videli nejakú šablonu, nejakú tému, tak už to ste videli od pohľadu, že to je nečo šablonové, neská tomu tak neje, a tu je napríklad pekne prínci toho multi purpose. To je v postatie jedna témá, naše z rôznych spôsobou. Je to enfoldt témá, ktorá najprv je urobená ako nejaký travel blog, potom nejaká ambulancija, potom kaviareň, tam máme dole nejaké právnikova, tak ďalej. Čiže naozaj oni už teraz robia tak tie démá, že to našiu na nejaké odvetvie, aby to potom vy, keď ste nejaký právnik, chcete vejba, aby ste môtoho to tej právnické firmy a neď ste vedeli predstaviť na ten vaš use case, čiže takto vyzera v praxi ten multi purpose. Ďaká, ten multi purpose je robený vďaka tomu, že neská sa tie šablony robia, cest tak zváne elementy, čiže elementy sú normálne, že časti stránky, časti webu, jednoducho, ktoré vidíme, čiže sú patria nejaký, že icon list nejaké tábulky, batanie a tak dále potom máme na ukážku, že testimonials to sú desekcia kde máte vy nejakých klientov a oni o vás povedali nečo pekne a toto napriad v tejto téme sú hneď 3 na výber čiže máme nejaký grid 2x2 testimonial potom máme nejaký slider potom nejaký zasejne usporiadanie alebo to máme, že naš tým toto je element naš tým tiež to máme v rôznych vizuálnych variácii, že tu máme buď v krúžku, voštvorci alebo nejakom riadku, jednoducho, to je to, čo tým myslím, že tá téma, aby čo najviac bájerov závelatek musí, akože, mať veľa týchto variácii a elementy nie sú iba, akože špeciálna doména šablon, ono v posťatej elementy to je veľkú, ktorý sa robil námieru, a tiež tu vidíme v posťatej elementy prvý rámček tam máme nejaký, že heroým, že nejaký claim potom tam máme naše služby, potom opäť naši klientí, potom naš tým a tak ďalej, aby ste si nemysleli, že elementy, že to je čistojba pre šabloni, niejako, že ten element celkou, akož nejaká časť stránky. Dobr, teraz si povedzme, že keď už vieme, čo je šablona tak ešte tu šablónu vieme rozdzely do dvoch takých hlavných kategórých. Prvá je, že HTML šablona a druhá WordPress šablona. HTML šablona to je ako čisty, vizuál bez akékolvek logiky a funkcionality. Je to prosti náozaj týba to HTML, ktoré sa potom nápája niekde na nejaký cms, sýstem, na príklad WordPress. A som ovedol, nie je tam řadna logika a večí na ote to témy sa pohybujú na úrovni 15 dolarov. Ješto tá WordPress šablona je trochu drahšia tak už nejaký premere je 59 dolarov to koľi tomu, že to už je napojenena konkrétne cms ko WordPressu a už je to je funkciálne samá osebe či vy keď si stiaňete WordPress tému tak už tamlastne ten zber e-mailov a neviem aké funkcionality slidere už to funguje jednoducho už tu aj je napojenena data bázu a z HTML šablony sa veľmi ľahko vie urobiť WordPress šablonu, no to posťať je proces, my si to ukážeme neskôr, ako keby HTML šablona je podnožina WordPress šablonu, tak by som to povedal teraz toto je taký, že Team Forest to možno posnáť to je vlastne stránka, tak ako si vydelíte na katalog rodinných domov, tak to je quasi katalog šablon a tu som vypichol, že WordPress je momentálne okolo 12.000 rôznych a HTML ešte trochu je 6,5 či naozaj je z čoho vyberať čiže toto je ako všetké terminólogy a teraz si pojezme, že proces je ako prebieha a keď si chcete dať urobiť stránku výzval námieru ako to vyzerá v prípade šablonu také zášneme tým zložitejším ten design námieru tak to začína zadefinovaním si informačne architektúry potom sa robi vajfrém s tojou vajfrému potom nakresli tým design nezkôr programovanie toho designu a na koniec výzvalu to designu na cemie skôr našom prípade na WordPress a teraz každému u tomu kroku budem trochu viac venovať aby si vedeli, že čo to je čo je to vajfrém a tak ďalej čiže keď zašneme pekne poporadie, tak začneme architektúra je ten úpešie najväčší level abstrakcie, ktorú si viete predstaviť a ono to v postate vy keď máte nejakých klientov alebo keď vy ste sam klient tak to je to čo s čím vy dojdete za nejakou agenturo alebo za nejakým programátorom že ja potrebujem takúto stránku potrebujem aby tam mala kontaktné údaje mapa, aby sa tam zbierali e-maily a tak ďalej čiže som toto je dal nejaký nejakú ukáčku, ono v postate informačná architektura klientí si to veľmi radí milia z technickou specifikáciou, oni si myslí, že keď takto slovne opíšiu, že čo potrebujú, tak oni si to myslí, že to je specifikácia, to samozrejmenie je pravda, ale je to ten najväčší level abstrakcie a je potrebného mať napriek tomu, že to neznie žiadno technicky, ale potrebujeme mať informačnou architektú a dobrým dobrými podkladmi, ako si informačnú architektu vytvoriť je poznáť celovu skupino, čiže vy keď chcete web, tak mali by ste vedieť, že čo je vaša celova skupina, že kdo je ten idealny navčeník vaše web stránky, čiže nejak si to zádefinovať, potrebujete vedieť, že čo ta stránka vlastne má robiť, čo je ta konverzia stránky, že má to být stiahnutie si nejakého e-booku, má to být zber nejakých lidov, nejakých e-mailových adres, má to být odkazí na sociálne sieť, čiže potrebujete káždá stránka musí mať nejaký ciel a vôbec sa nebať zanalizovací konkurenciu ako na Slovensku, ja mám také skusinosti, že sa to strašne demonizuje, že nemôžeme povedlať, že my sa inspirovali niečím, neviem prečo, akože v záhraničie je to úplne biež na vesci, že chludne, keď si základáte, ja neviem 10. hosting, tak si pozrieť, chludne si pozrieť tých 9 hostingov, že čo oni komunikujú na webe a to teraz neviem, že to máte nasurovo okopčiť, ale akože inspirovate, hey, lebo tak už tam prebehli nejaké analizí, čiže vedieť, že čo vlastne chceme komunikovať tomu, našemu ideálnemu návštiemnikový. Keď to prírovnam k tej analogii stávby rodiného domu, tak ta informášna architektura je to, keď priete výzať architektom a povedte, že ja chcem bungalov, pedizboví s vomakú pelňami, s neviem podľahovým kurením a skrbom. Žiadne technické, ale potrebujeme viedieť, čo ideme vytvárať. Keď to máme nejakým spôsobom zádefinované prechádzame na krok číslo 2, to je wireframe, čiže s toho, čo sme mi slovene opísali, čo vlastne potrebujeme, sa vytvárajú a takéto pro se wireframe, poslovenský to je, že druhotený model to je, ktoré 2 od 5, neviem rád slovenšinu v takýchto názvoch, ja to názvem wireframe, mňa je druhotený model a ten wireframe hovorí o tom, že to, čo sme si povedali, že ako to vlastne chceme rozverhnúť do tej stránky, či to ma byť nejaký one pager, či to ma byť všetko na jednej stránke, alebo to ma nejakých viacero podstránok, akom poradí, zruba ako to ma vyzerať a stále to není nejaké detailné, to stále bez farie, obrázkov, fontov čisto, aby sme si vedeli ba predstaviť. Či toto nám ma aj definovať, veča to je, že on-page, potomže kontakt na stránka, o nás, blog, detail šlánku a tak ďalej. Ideálne je, keď si vy ako klient alebo keď vyrobíte klientový stránku, keď v tomto momente už má klienta aj texty, a to z toho dôvodu, že ako už máme texty, tak si ich vieme pekne do toho wireframeu nápasovať, a potom vieme, že aký rozsah vlastne texto máme je, že keď tie texty niesu, tak designer si tam náhodí nejaký objem, pre klas tejto časti, nejaké dva plné paragrafy textu, vyzerá to všetko dobre, a potom sa zistí, že vlastne klient nemá čo povedať a vie tam dať jednú vetu. Potom celý ten blog nevyzerá dobre, lebo už to nemá zruba takú výšku ako ten obrázok napravu. Čiže reba na toto myslieť, není to úplne katastrofa, keď tie texty niesu, a keď sme začinali s toho informáčnou architekturou, tak slovne povedlane, že web má zbierať emailové adresy, tak keď pokračujeme z toho funkcionálnita do wireframeu, tak by sme to mohli názvať, že že teraz už ten tá tuto dole, je to vidno? Dobre, a tuto dole už vlastne vidíme, že ten zbier emailových adres, že ako zroba výzera, že vidíme tam jedno poličko, kde input emailový, a napravuje nejaké submit, tláčiťko zatiaľ bez farby, bez ničova, vidíme, že je to vo futri, že to bude na každé jednej stránke, a že vlastne ďahá sa čisto eba emailové adresa. Keď máme wireframe, tak už teraz možeme farbičkovať to, čo sme si vytvoriť v tom wireframeu. Čiže doplniam sa fonti, farby, rozostupy, paddingy, obrázky, celkový ten feeling tej stránky, a výsledok je vlastne ten hotový vizuál, a je to zase Že, keď sa bavíme o tom zbere emailový adres, tak teraz to, čož sme videli predchádzaj od sľajde, ten černo-bieli newsletter, tak teraz už ten gombig má a pojď sme tvávom odru farbu, a náhover na prejde nemysíš sa to zo svetlí, že toto už vidíme presne detály, ale tríš sa to do úhodného wireframeu, že je tam inline nejaký formular. Zároveň tento 3. krok design je posledným rozumným krokom na feedback z časti klienta, pretože veľa sa da už o feedbackovať v fáze wireframeu, keď to je takto rozložené, keď ja vidím, že ja nechcem vo futri formular, tak už to vidím, už to viem uvedomiť v tom wireframee. Keď si to uvedomím, až keď sa to nakreslí, ok, stať dobre, nejdný to proste, že dobre príšel neskôr trošku ten feedback, ale stále príšel v tom designe. Úplne sle je, keď ten feedback príde, už keď sa to naprogramuje, pretože už keď sa to naprogramuje a niekto povede, že ja to chcem do tejto sekcie, už to trvá čas, už to stojí peniaze. Není hepí ani programátor, ani hepí ani klient, pretože to musí konečno dosť kúzaplatiť. Kdešto keby to dál, ako feedback vo wireframee, alebo dizájne, tak je to drag and drop, kdešto tu to už reálne, to musí nejak zapracovať programátorú pravice, zjeska vybudovať, to už nesu sekundy boužiaľ, čiže tu si dreba strašne dobre uvedomiť, že vy, ako klient, táte si záležiať už v tej fáze wireframeu, že zamyslite sa na tým, ak máte feedback a firma, alebo v realnesser bude strašne hepí, vám ten feedback zapracovať, lebo vo wireframe je to skoro nesto je vôbec želny čas. Dobre, teraz máme design. Pokračujeme na programovaním vizuálu, sa to volá, že frontend, ten vizuál, čiže ideme utvoriť, vytvoriť to háté melko za tým. To háté melko, tá 19 dolarová vec, či státé melko šablona, čo je vlastne samou sebe nefunkčne, ale už to výzerá nejakov prehľadá, či je to nejaký prototyp, ktorý tiež firma vie poslať klientový na preklikánie si na web, čiže v PDF-ku alebo nejaký obrazka, už to reálne má brouserí, zaťa to nižne ťá žiadné data, ale už si pojďme vie preklikávať jednotlivé postranky, že už má nejaký ten feeling, že vlastne ten web bude vyzeré, ako sa bude správať. Slidery sa tam môžu prepínať a tak ďalej. A keď už posledný krog je v posťade, že napojenie to vyzvalo na Wordpress, čiže tam sa už pridávať a funkcionálna logika, čiže to admin rozrandne za tým, aký ten testimonial, že sa mi to reálne na zobrazí na web a že keď ja zadám do toho formularu nejakú imelovú adresu, dam sabmiť, že mi to zvaliduje a že mi to hodí do nejaké data vlasti, že to už s tým to končíme. A ký je postup pri tvorbe atémel šablonin, keby že nie ideme si kresliť vizuál na mieru, ale rozhodneme sa, že si kúpeme 19 dolarovu šablonu a chcemme z nej a chcem mu napojeni na Wordpress. Tam ten postup vyzera ruba takýto. Informášná architektura, že to je úplne rovnaké ako vizuál na mieru. Rovnaké je formavajfremu. Tu to je trošku rozdial, že teraz mi nič nekreslíme, pretože design už bol raz nakreslený. Tu už si iba vyberáme spomeň tej tabulky elementov, čiže tých 50 elementov, čo bolo na predošlom slide a tie 4 typy testimonialo tak teraz si vyberáme, čiže vyberáme si ako také nejaké nejakú skladačku, že ako ten web z tej obrovské ponúky šablony máme zostavať. A tu poviem takú vedť, že pri HTML šablony máme taký ten, že luxus si tie to elementy meniť. No aj v tej zátvorke, že môžná editácia, pretože tým, že to je HTML, tak ono sa to dá pomerne jednoducho customizová. A to by bolo ten element nážov týmu, a bolo tam...