{"id":3194,"date":"2021-10-12T16:18:33","date_gmt":"2021-10-12T14:18:33","guid":{"rendered":"https:\/\/visionslabs.io\/ako-tvorime-webove-stranky-v-brne\/"},"modified":"2021-11-08T14:04:59","modified_gmt":"2021-11-08T13:04:59","slug":"ako-tvorime-webove-stranky-v-brne","status":"publish","type":"post","link":"https:\/\/visionslabs.io\/sk\/ako-tvorime-webove-stranky-v-brne\/","title":{"rendered":"Ako tvor\u00edme webov\u00e9 str\u00e1nky v Brne?"},"content":{"rendered":"\n

V dne\u0161nom \u010dl\u00e1nku sa trochu rozp\u00ed\u0161eme o tom, ako tvor\u00edme webov\u00e9 str\u00e1nky<\/strong> pre na\u0161ich klientov v Brne<\/strong>. Jedn\u00fdm z d\u00f4vodov je skuto\u010dnos\u0165, \u017ee \u010dasto mus\u00edme z\u00e1ujemcom o webov\u00e9 str\u00e1nky hovori\u0165, o \u010dom vlastne tvorba webov\u00fdch str\u00e1nok je, a \u010fal\u0161\u00edm d\u00f4vodom je to, \u017ee je dobr\u00e9 si pripomen\u00fa\u0165 na\u0161e aktu\u00e1lne postupy.<\/p>\n\n\n\n

Nie je to len o webe<\/h2>\n\n\n\n

Mo\u017eno je to trochu prekvapuj\u00face, ale na\u0161e vn\u00edmanie tvorby webov\u00fdch str\u00e1nok m\u00e1 trochu \u0161ir\u0161\u00ed kontext. V\u017edy sa sna\u017e\u00edme pochopi\u0165 klienta business tak, aby sme mohli navrhn\u00fa\u0165 ide\u00e1lne rie\u0161enie na mieru pre dan\u00e9ho klienta. Mo\u017eno to znie ako kli\u0161\u00e9, ale naozaj n\u00e1m nejde o nejak\u00fa s\u00e9riov\u00fa v\u00fdrobu webov\u00fdch str\u00e1nok na redak\u010dnom syst\u00e9me WordPress<\/strong> len s t\u00fdm, \u017ee by sme vykonali nejak\u00e9 mal\u00e9 zmeny v „\u0161abl\u00f3ne“. Mo\u017eno to bude lep\u0161ie pochopite\u013en\u00e9 na pr\u00edklade procesu „Ako tvor\u00edme webov\u00e9 str\u00e1nyk v Brne<\/em>“ ni\u017e\u0161ie.<\/p>\n\n\n\n

N\u00e1\u0161 postup pri tvorbe webu<\/h3>\n\n\n\n
  1. ANAL\u00ddZA<\/strong> – Pochopi\u0165 business model, zmapova\u0165 konkurenciu a definova\u0165 po\u017eiadavky klienta. Ak je u\u017e web funk\u010dn\u00fd, tak vykon\u00e1me anal\u00fdzu d\u00e1t zo star\u00e9ho webu, aby sa odhalilo, kde bolo probl\u00e9mov\u00e9 miesto a pre\u010do sa n\u00e1v\u0161tevn\u00edci nespr\u00e1vali tak, ako o\u010dak\u00e1val majite\u013e webu alebo \u010do fungovalo a alebo \u010do by \u0161lo vylep\u0161i\u0165. V r\u00e1mci tejto f\u00e1zy tie\u017e vykon\u00e1vame „anal\u00fdzu k\u013e\u00fa\u010dov\u00fdch fr\u00e1z“, aby sme lep\u0161ie pochopili klienta biznis v r\u00e1mci vyh\u013ead\u00e1vania a mohli mu tak n\u00e1vrh efekt\u00edvnu \u0161trukt\u00faru webu.<\/li>
  2. N\u00c1VRH WEBU<\/strong> – Vytvori\u0165 „klikate\u013en\u00fd<\/em>“ wireframe (mockup) webu pre \u010do najlep\u0161iu interpret\u00e1ciu predch\u00e1dzaj\u00facej anal\u00fdzy, ktor\u00e1 je schv\u00e1len\u00e1 z\u00e1kazn\u00edkom. V r\u00e1mci tejto f\u00e1zy m\u00f4\u017eeme pre zjednodu\u0161enie predstavy nov\u00e9ho webu spoji\u0165 aj s tvorbou grafick\u00e9ho n\u00e1vrhu hlavn\u00fdch obrazoviek.<\/li>
  3. GRAFICK\u00dd N\u00c1VRH WEBU<\/strong> – Ak je projekt zlo\u017eitej\u0161ie, potom je tu „\u0161peci\u00e1lny“ f\u00e1za pre odladenie grafick\u00e9ho n\u00e1vrhu. Vytvori\u0165 grafick\u00fd n\u00e1vrh hlavn\u00fdch obrazoviek webu alebo grafick\u00fdch prvkov.<\/li>
  4. TVORBA WEBU<\/strong> – samotn\u00e1 tvorba webu, ktor\u00e1 je spojen\u00e1 aj s nasleduj\u00facimi krokmi: kontrola a nastavenie SEO, zaregistrovanie do Google Search Console<\/em> a nastavenie Google Analytics<\/em>. Prenos star\u00fdch d\u00e1t do nov\u00e9ho webu at\u010f.<\/li>
  5. NA\u0160TARTOVAN\u00cd SOCI\u00c1LNE SIET\u00cd A \u010eAL\u0160\u00cdCH KAN\u00c1LOV<\/strong> – Ak si klient praje, potom v r\u00e1mci tvorby webu m\u00f4\u017eeme nastavi\u0165 \/ vytvori\u0165 v\u0161etky z\u00e1kladn\u00e9 soci\u00e1lne siete a prepojenie na web. Nastavenie \/ vytvorenie emailov\u00e9ho kan\u00e1lu – typicky za pomoci MailChimp<\/strong>.<\/li>
  6. ZA\u0160KOLENIE<\/strong> – Preto\u017ee „odovzdan\u00edm“ webov\u00fdch str\u00e1nok by nemala kon\u010di\u0165 pr\u00e1ce na webov\u00fdch str\u00e1nkach, ale naopak za\u010da\u0165 kontinu\u00e1lne pr\u00e1ce. Tak\u017ee je nutn\u00e9 vykona\u0165 za\u0161kolenie zodpovedn\u00e9ho person\u00e1lu, ktor\u00fd sa bude stara\u0165 o be\u017en\u00fd chod webov\u00fdch str\u00e1nok vr\u00e1tane vysvetlenie z\u00e1kladn\u00fdch princ\u00edpov SEO.<\/li><\/ol>\n\n\n\n

    Sna\u017eili sme sa \u010do najviac „nahusti\u0165“ tento proces, tak\u017ee sme ve\u013ea detailov vypustili, ale d\u00fafame, \u017ee takto mo\u017eno pochopi\u0165, \u017ee proces „tvorby webov\u00fdch str\u00e1nok<\/a> „naozaj pre n\u00e1s nie je len vytvorenie webu, ale je potrebn\u00e9 vykona\u0165 aj nieko\u013eko krokov dopredu – tj. anal\u00fdza, n\u00e1vrhy, … tak aby sme \u0161etrili n\u00e1\u0161 i klientov \u010das a navrhli nie\u010do zmyslupln\u00e9 a nie len“ digit\u00e1lne vizitku „, \u010do u\u017e je pod\u013ea n\u00e1s v dne\u0161nej dobe pre\u017eitok.<\/p>\n\n\n\n

    \u010co je to „klikate\u013en\u00fd“ wireframe?<\/h2>\n\n\n\n
    \"sketch<\/a><\/figure><\/div>\n\n\n\n

    Tento pojem „wireframe<\/strong>“ nie je ve\u013emi \u010dasto zn\u00e1my, tak\u017ee by sme mohli objasni\u0165, ako ho teraz vn\u00edmame my. V doslovnom preklade by sa dalo poveda\u0165, \u017ee sa jedn\u00e1 o „dr\u00f4ten\u00fd model<\/em>„, tie\u017e sa niekedy pou\u017e\u00edva ozna\u010denie mockup<\/strong>, tak\u017ee pomenovanie je ve\u013ea a interpret\u00e1ciou tie\u017e. My sami sme toto po\u0148ali u\u017e r\u00f4zne, ale po\u010fme si poveda\u0165, ako ho vn\u00edmame teraz. <\/p>\n\n\n\n

    Jedn\u00e1 sa o digit\u00e1lnu formu „dr\u00f4ten\u00e9ho“ modelu, ktor\u00fd sa predt\u00fdm ma\u013eoval na papier, ale dnes je mo\u017en\u00e9 tento postup prenies\u0165 do digit\u00e1lnej podoby. Pou\u017e\u00edvame k tomu modern\u00fd n\u00e1stroj Sketch<\/a>. Uk\u00e1\u017ekov\u00fd wireframe<\/strong> je na tomto odkaze<\/a> a uk\u00e1\u017ekov\u00fd grafick\u00fd n\u00e1vrh hlavnej obrazovky<\/strong> je tu<\/a>.<\/p>\n\n\n\n