Teoretický základ tvorby webu Martin Krčál • •Brno, KISK FF MU, 28.2.2017 Kurz pro studenty oboru Informační studia a knihovnictví Obsah kurzu qÚvod do problematiky qWebdesign, základní principy grafického návrhu stránek qInformační architektura, uspořádání a navigace qWebové technologie a standardy qRedakční systémy + Wordpress q Cíle kurzu qpřemýšlet o návrhu stránek qstandardy a doporučení a jejich praktická aplikace qzásady tvorby webu qzřízení hostingu qpraktická realizace webu ve Wordpressu a v systému UMBRACO Co byste měli znát? qzáklady HTML qorientace na internetu q Důležité informace q3x bloková výuka qaktivní účast qukončení kurzu vrealizace webu v systému UMBRACO vpřevod webů z Knihovna.cz Požadavky k zápočtu - projekt qpraktická realizace webu v UMBRACO vweb dle výběru nebo Knihovna.cz vlze týmově i jednotlivě (náročnost) vdo 20. 5. 2017 qprezentace vybraných projektů vna společném setkání vtermíny budou v ISu •Doporučená literatura Zahraniční weby qalistapart.com - webdesign qSmashingMagazine.com - webdesign qSensible.com (S. Krug) - použitelnost qhappycog.com - webdesign, přístupnost Zahraniční weby qhttp://blog.searchenginewatch.com - SEO qhttp://www.mattcutts.com/blog - SEO qhttp://www.webcredible.com/blog-reports/ - webdesign q České weby qBlindfriendly.cz - přístupnost qhttp://pristupnost.nawebu.cz - přístupnost qDobryweb.cz - webdesign, SEO qInterval.cz - tvorba webu qJakpsatweb.cz – základy tvorby HTML Knihy qSteve Krug - Nenuťte uživatele přemýšlet qDan Cederholm - Flexibilní webdesign qRobert Mindžák - Dokonalý webdesign qOndřej Neumajer - Budujeme školní web qJeffrey Zeldman - Tvorba webů podle standardů qLynda Weinmanová - Velká kniha webdesignu qMichale G. Paciello - Web Accessibility for People with Disabilities qMichal Kubíšek - Velký průvodce SEO qBrian Clifton - Advanced Web Metrix with Google Analytics qBrian Clifton - Google analytics : podrobný průvodce webovými statistikami qAvinash Kaushik - Web Analytics an Hour a Day qAlexander Beck - Google AdWords Co je na webech špatně qKISK.cz qÚK FF MU qKnihovny VUT qNárodní knihovna ČR qKnihovna Vyškov qjiný web??? Proces tvorby webových stránek Proces tvorby webových stránek Návrh Plánování Realizace Údržba Zveřejnění Plánování Tvůrčí tým qwebdesignér vgrafik, kodér qspecialista na obsah vvizualizace obsahu, SEO,… qzástupce zadavatele quživatel Co byste si měli zjistit qurčení cílové skupiny qcíle stránek qobsah webu (existují podklady?) qspeciální požadavky klienta qmá klient nějaké vzorové stránky qzmapování konkurence q Určení cílové skupiny qrůzní uživatelé vvěk, znalosti, zkušenosti qrůzné chování uživatelů (návyky) vstarší lidé více čtou, mladí prohlížejí qrůzné přístupy (aneb proč přicházejí) vfiremní stránky, portály, e-shopy, e-banky přístupy – jinak se uživatelé chovají na portálech, něco jiného očekávají od firemních stránek a e-shopů Určení cílové skupiny qKDO je cílová skupina uživatelů qCO cílová skupina chce qJAK (jakou formou) to cílová skupina chce qMířit na všechny q= qnetrefit nikoho Praktický úkol qpojišťovna specializující se na povinné ručení qdůraz na nízkou cenu pojištění qdefinujte cílovou skupinu Jak poznat cílovou skupinu? qkvantita vdotazníky, průzkumy qkvalita vrozhovory, focus groups, pozorování, persony, storybordy,… Koho testovat? qbudoucí uživatelé qzástupci oboru, kterému se web věnuje qoddělení péče o uživatele qlidé komunikující s uživateli qlidé z okolí vrodina, známí,… Kde zkoumat? qonline prostředí qneformální prostředí vkavárna vs. kancelář Odměny za testování qfinanční odměna qposkytnutí SW nebo služby qcertifikát qdrobný dárek qdobrý pocit J Ptejte se na to,… qjaký mají problém a jak ho teď řeší vnástroje, weby, postupy qco ji na řešení vadí vjak by to šlo vylepšit qco dělají vjak pracují s Vaším produktem, chtějí ho využívat, pomáhá jim q Rozhovory qPOSLOUCHEJTE qRESPONDENTY!!!! Proč vytváříme webové stránky? Cíle stránek qprezentovat firmu, projekt, služby… qzpřístupňování informací qposkytování služeb qkomunikace qzábava prezentace firmy, projektu – oslovení sponzorů, u každého uvést příklady Cíle stránek prakticky qinformovat vudálosti, produkty, služby qpropagace značky vzvýšit povědomí o značce, věrnost značce qzvýšit obrat z prodeje ve-shopy, podpora prodeje qvytvoření komunity qvyrovnat se a překonat konkurenci q prezentace firmy, projektu – oslovení sponzorů, u každého uvést příklady Obsah webu qjaké informace umístit na web? qpodklady od zadavatele qstrukturování informací qcizojazyčná verze q strukturování informací – přemýšlet, jak seskupovat podobné informace Ostatní qspeciální požadavky klienta vgrafika vychází z image firmy qvzorové stránky klienta vco se mu líbí, jak si představuje web qzmapování konkurence vstandard v oboru, inspirace q Krutá realita q L mnoho klientů neví, co chce q L mnoho klientů není schopno poskytnout podklady q L cizojazyčná verze = práce pro webmastera q L chybí reálná představa o ceně Návrh Návrh webu qnápad = polovina práce qskica, drátěný model qprototyp qgrafický návrh vvolba rozlišení vpozadí, písmo, další prvky na stránce vpoužití barev v... Skica http://www.itnetwork.cz/images/2068/moderni_portfolio/06/01.jpg •Zdroj: Inetwork.cz Wireframe = drátěný model webu q •Zdroj: Shopsys.cz, SEO-Web-Design.cz a Symbio.cz •Další ukázky Druhy Wireframe qTextový vseznam položek a funkcí, nejjednodušší qBlokový vrozmístění do bloků, jejich přibližná velikost na stránce vtext s popisem obsahu nebo funkčnosti qPodrobný vpodrobný popis všech elementů webu vpřesné proporce, obsah i funkčnost podrobně popsány qProklikávací vnadstavba podrobného wireframu vjednotlivé stránky jsou propojeny (jsou klikatelné) vvyužití pro uživatelské testování Nástroje qAxure vkomerční, demoverze qBalsamiq vkomerční 7 denní trial, webová verze qJustinmind vkomerční, i měsíční předplatné, freeforever edition qdalší nástroje Informační architektura qrozdělení obsahu do sekcí qnávrh menu vhorizontální vvertikální vostatní (víceúrovňová, drobečková,…) qstálá navigace = na jednom místě Prototyp a grafický návrh http://www.artweby.cz/uploaded/dokumenty/prototyp-a-web-design-big.jpg •Zdroj: Artweby.cz Kde vzít inspiraci qasociace ke klíčovým slovům webu qwebové stránky, templates qdenní tisk, časopisy qokolí (příroda, město, život) qptát se kamarádů, členů rodiny,… Templates qhttp://www.templatesbox.com qhttp://www.freewebsitetemplates.com qhttp://www.flashtemplatestore.com qhttp://freesitetemplates.com qFree HTML+CSS Web Templates (Smashing Magazine) Fotobanky qsxc.hu - databanka fotografií zdarma qfreephotosbank.com - zdarma qeverystockphoto.com - zdarma qistockphoto.com – komerční qpixmac.cz – komerční qProfimédia – komerční qDollarphotoclub – komerční, foto za $1 Rozcestník qBlue Vertigo - odkazy na fotogalerie, šablony, textury, kliparty,… Druhy licencí qfree - zdarma qnon-commercial - pro nekomerční účely qroyalty free - bez omezení počtu užití (jednorázový nákup, paušální cena) qrights-managed - dle užití qcreative commons – piktogramy (druhy, wiki) Chcete si přivydělat? qprodej vlastních fotografií Předkládání návrh klientovi qprůběžné qvíce návrhů qdůležitá komunikace qnávrh x realizace v HTML - rozdíly qrealizace teprve po schválení!!! q Realizace Statické prezentace qvýhody vrychlé vjednoduchý návrh vstačí základní znalosti HTML qnevýhody vnutný zásah do zdrojového kódu při každé aktualizaci Dynamické prezentace qvýhody vdata lze ukládat do databáze vspráva přes administraci vwebové služby (např. formuláře) qnevýhody vnutná znalost programovacího jazyka vadresa s proměnnými (řeší mod_rewrite) Redakční systémy qumožňují správu webu bez znalosti webových technologií qněkdo je musí zprovoznit (admin) qspravují se přes webové rozhraní qnevýhoda - mohou být snadno napadnutelné (zejména free systémy) Příklady redakčních systémů qWordpress, qJoomla!, Drupal, PHP Nuke qSunLight - český systém qWiki projekty (info) qWebnode - český online CMS, v základu zdarma qeshopy QuickCart a PrestaShop - zdarma •http://www.opensourcecms.com • Nástroje na tvorbu webu qWYSIWYG vMS Expression Web (Frontpage), DreamWeaver, Contribute, včlánek The 10 Best Windows WYSIWYG Editors na About.com qnon-WYSIWYG vNotepad, PSPad, jEdit, EasyPad,... Zveřejnění Hosting a adresa qfreehosting x komerční hosting qdomény druhého a třetího řádu vhttp://www.web.cz x http://www.web.cz/neco qvolba vhodné adresy vSEO, krátké, logické,… qcom, info, org, biz, net, cz, sk,…??? q Vyhledání vhodného hostingu qHostingy.cz - přehled hostingů qMěření dostupnosti hostingů – zdarma Hostingy zdarma qEndora qWebzdarma.cz qZikum.cz vhosting zdarma, doména .tk zdarma qzahraniční hostingy Další možnosti pro náročné qvirtuální hosting vrozdělení serveru mezi menší počet zákazníků, garantovaný výkon qmanaged a dedikované servery vpronájem serveru qserver housing vvlastní server u poskytovatele Komerční hosting qWedos qOnebit qForpsi qActive24 qCesky-hosting qSavana Zásady zveřejnění webu qproveďte test na uživatelích qdůkladně si pročtěte texty qvyzkoušejte platnost odkazů qotestujte fungování služeb qzveřejňujte pouze hotový web!!!! vunder construction = velká chyba Údržba Údržba qpravidelné aktualizace a optimalizace qudržujte krok s konkurencí qsledujte aktuální trendy qsledujte statistiky Æ chování uživatelů q„donuťte“ uživatele vracet se q Proces tvorby webových stránek Návrh Plánování Realizace Údržba Zveřejnění q Základní principy webdesignu Domovská stránka Homepage qsplash screen (vstupní stránka) vpre-homepage vvolba jazyka, animace,… qhomepage (domovská stránka) vobsahuje info vjako titulní strana novin q Cíle domovské stránky qidentifikace webu qobsah a poslání webu qzaujmout uživatele vjako obálka u časopisu vupoutávky a odkazy na obsah vnejžádanější info vměla by se líbit všem!!! q q q Domovská stránka qukázat cestu k tomu, co hledám… q…i k tomu, co nehledám qukázat, kde mám začít qmusí být pravidelně obměňována q q Domovská stránka q4 základní otázky vKde to jsem? vCo mi tu nabídnou? vCo tady můžu dělat? vProč tu zůstat a nejít jinam? qhttp://www.nwt.cz qhttp://www.opel.cz Co na homepage qlogo qslogan qnovinky qvyhledávání qnavigace qslužby (registrace, e-shop, …) q Co na homepage qdobře zvažte, co na úvodní stránku dát qne moc x ne málo qpracujte s místem efektivně q Layouty Druhy stránek qjednoduché stránky qsloupcový layout Layouty qrámcový layout qtabulkový layout qHTML5 + CSS Grafika a obrázky Správný obrázek q obrazekza1000slov Grafika na stránce qvelikost grafiky na stránkách vmax. 100kB na stránce??? vkomprimovaná grafika vmalé rozlišení (72dpi) vobsah pro různá zařízení (PC, mobil,...) qměla by doplňovat obsah qzjednodušit orientaci na stránkách Obrázky - rastrová grafika qrastrová (bitmapová) grafika qzvětšování = snižování kvality, ostrosti qgrafické formáty vJPG, GIF, PNG - kdy je využít? qzpracování rastrové grafiky vPhotoshop - a jeho nástroje pro web q Photoshop – uložit pro web Obrázky - vektorová grafika qvektorová grafika qzvětšování = udržování kvality, ostrosti qgrafické formáty vSVG qnevýhody vimplementace v prohlížečích Fotobanky qfreeimages.com - zdarma qfreephotosbank.com - zdarma qeverystockphoto.com - zdarma qistockphoto.com – komerční qpixmac.cz – komerční qProfimédia – komerční Rozcestník qBlue Vertigo - odkazy na fotogalerie, šablony, textury, kliparty,… Barvy qmax. 5 barev v jen 1 hlavní (RGB) qsprávné sladění barev qdostatečný kontrast pozadí a písma qvětší plochy = méně výrazné barvy qméně výrazné barvy textu qbarevné zdůraznění důležitých výrazů Funkce barev qnavození nálady qposílení identity stránek a firmy qzvýraznění struktury a navigace vzvyšování použitelnosti qnavedení na důležité info Barevné spekrum Čitelnost textu - ukázka ukazka-kontrast Skupiny barev - přehledy qhttp://www.webtvorba.cz/css/barvy.html qhttp://www.jakpsatweb.cz/archiv/barvy-zakladni.html qhttp://www.jakpsatweb.cz/archiv/barvy-bezpecne.html Nástroje na míchání barev qGenerátor barevných schémat qColour Selector qColorMatch 5K qColortools.net – sada nástrojů pro práci s barvami Nástroje na míchání barev qColorblind Web Page Filter qColourLovers.com Některá zraková postižení qdichromacy = neschopnost vidět jednu barvu z RGB qprotanopia = neschopnost vidět červenou qtritanopia = neschopnost vidět modrou qdeuteranopia = neschopnost vidět zelenou qcolor blindness (monochromacy) = barvoslepost •http://en.wikipedia.org/wiki/Color_blindness Templates qhttp://www.templatesbox.com qhttp://www.freewebsitetemplates.com qhttp://www.flashtemplatestore.com qhttp://freesitetemplates.com qFree HTML+CSS Web Templates (Smashing Magazine) qhttp://www.fwpthemes.com/ Písmo Písmo qvýrazně zasahuje do grafického návrhu qdefinice pomocí CSS qvolba vhodného druhu písma vneproporcionální písmo vArial, Verdana, Helvetica (UNIX) qnepoužívat nestandardní fonty Písmo qvelikost písma vabsolutní jednotky (px, pt, in, pc, cm,…) vrelativní jednotky (procenta, em, ex, xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger) qřádkování (pomáhá čitelnosti textu) vline-height Písmo qzvýraznění textu vnepoužívat v, vstyl lze měnit přes CSS vtext nepodtrháváme (odkazy) qzarovnávání textu vsouvislý text - justify, jinak left Nadpisy qdefinujeme tagy

-

qnadpisy výstižné q

vpouze jednou na stránce vhlavní nadpis vdůležitý pro vyhledávače, SEO qsprávná hierarchie nadpisů!!! Obrázky místo textu qpoužití obrázků v textech vprospěje samotné stránce??? qkdy jej použít? vgrafická potřeba (stínování, průhlednost, specifický font apod.) vlogo, slogan, název stránky, menu qatribut alt, neviditelný text v Nevýhody qzvyšuje velikost stránky a přenášených dat ð problém u pomalého připojení qpísmo nepůjde zvětšit q Kódování qkódovací sady pro české stránky vUTF-8, Win-1250, ISO-8859-2 qpreferujte UTF-8 qdůležitá správná deklarace v hlavičce Kódování v PSPadu q http://download.chip.eu/ii/204309786_5565476cff.jpg Správná deklarace kódování qdeklarace v (X)HTML - tag v qdeklarace v XML v q Odkazy Odkazy qnejdůležitější prvek stránek qprovázání stránek qodkazy vždy podtržené ð snadnější orientace v textu qnepodtržené odkazy jinak zvýraznit Texty v odkazech qvždy volíme výstižný text mezi a qnepoužívat klikněte sem, zde apod. ð jasně nevystihují, kam odkaz směřuje (SEO) qodkazy krátké qvýraz by měl zapadat do kontextu Texty v odkazech prakticky qkterá varianta je správnější: •Œ Pro zjištění nabídky klikněte sem. •� Seznamte se s nabídkou našich služeb. •Ž Seznamte se s nabídkou našich služeb. > Odkazy qatribut title qtlačítko zpět (s výstižným textem) qnavštívené odkazy qdynamické odkazy vpomocí stylů - a:hover vdobrá čitelnost odkazu q Otvírání stránek v novém okně qudržení uživatele na stránkách qtarget=“_blank” – zákaz v XHTML 1.1!!! qproblém pro postižené (a co ostatní???) qpři použití uvést v atributu title Odkazy na soubory qv textech odkazů uvádět: vformát, velikost, datum zveřejnění, příp. datum aktualizace vusnadní uživateli rozhodování, zda soubor stahovat qstejné údaje i do atributu title Příklad qstatistika výpůjček (PDF, 120kB, 12.2.2014) Tabulky Tabulky qpro prezentaci statistických dat qne pro layout!!!!!!!!! qproblém pro postižené qlineární tabulky (po řádcích) qčtečka předčítá hodnoty buněk zleva doprava Tabulky Nástup Příjezd Odjezd Brno Jihlava Praha - 8:00 9:30 7:00 8:05 - •Nástup | Příjezd | Odjezd •Brno Jihlava Praha | - 8:00 9:30 | 7:00 8:05 - Tabulky Město Příjezd Odjezd Brno - 7:00 Jihlava 8:00 8:05 Praha 9:30 - •Město Příjezd Odjezd | Brno - 7:00 | Jihlava 8:00 8:05 | Praha 9:30 - Tabulky Jméno Jan Tomáš Mikuláš Váha 100 87 69 Věk 30 25 23 Dětí 3 0 1 •Jméno Jan Tomáš Mikuláš | Váha 100 87 69 | Věk 30 25 23 | Dětí 3 0 1 Tabulky Jméno Váha Věk Děti Jan 100 30 3 Tomáš 87 25 0 Mikuláš 69 23 1 •Jméno Váha Věk Děti | Jan 100 30 3 | Tomáš 87 25 0 | Mikuláš 69 23 1 Zásady tvorby tabulek qdefinujte pro popis tabulky v… qdefinujte hlavičky ( qrelativní výška a šířka sloupců qsilné rámování tabulky a buněk??? Formuláře Formuláře qumožňují interaktivitu qdefinujte
pro rozdělení formuláře do logických bloků q zobrazuje popisek bloku q
popis
) v
sloup1sloup2