Návrh a tvorba WWW Přednáška 9 Web design
Základy webové typografie Ascender (horní dotah): Je to výška nejvyššího znaku v písmu. Obvykle je to písmeno f, h nebo ozdobný prvek, pokud ho dané písmo obsahuje. Baseline (účaří): Pomyslná čára, na které by měly ležet všechny znaky. Cap Height (výška velkého písmene): Jedná se o výšku velkého písmene v písmu. Není stejná jako výška znaku. A ani to nemusí být nutně výška všech znaků. Descender (spodní dotah): Jedná se o nejnižší část znaku. Obvykle g nebo y, s výjimkou toho, když má písmo ozdobné prvky. Kerning (kerningové páry): Definování minimální mezery mezi znaky. Leading (řádkový proklad): Velikost mezery mezi dvěma řádky v sekci. Optimálně se volí velikost polovina velikosti fontu. Letter Spacing (prostrkání písmen ): Zvětšování mezery mezi písmeny (ve zlomcích em nebo v procentech). X-Height (střední výška písma): Výška malého písmene obvykle měřená podle písmene x v příslušném písmu.
Velikost fontu Velikost fontu je nezbytně nutná k vytvoření správné hierarchie textu. Je vhodné volit relativní velikosti fontu ve vztahu k základní velikosti fontu stránky. Níže je uveden příklad, kdy základní velikost fontu stránky je 12px, velikost fontu paragrafu bude ve výsledku 15px. body {font-size: 12px;} p {font-size: 1.25em;}
Vertikální rytmus Vertikální rytmus zlepšuje čitelnost obsahu a pozitivně působí na estetiku stránky. K dosažení vertikálního rytmu postačuje každému paragrafu definovat margin nebo padding rovnu základní velikosti řádku. body {font-size: 12px; line-height: 15px;} p {margin-bottom: 15px;}
Délka řádky Dlouhé řádky se stávají pro čtenáře špatně nečitelné, protože čtenář stráví dlouhou dobu při navazování textu (delší doba při lokaci začátku toho správného řádku).Optimální délka řádku je mezi 40 až 80 znaky včetně mezer. Vhodnou délku řádku lze jednoduše dopočítat prostřednictvím pravidla x30. Když máme velikost písma 10px a vynásobením 30ti, dostaneme velikost řádku obsahující přibližně 65 znaků. p { font-size: 10px; max-width: 300px;}
Typografická mřížka Typografická mřížka pomocný rastr skládající se z řady stejných obdélníků nebo čtverců, vzniklých rozdělením stránky na několik stejných vodorovných pruhů. Do této mřížky umisťujeme veškeré texty i obrázky. Typografická mřížka podporují konzistenci všech stránek webu.
Font Font je definován jako kompletní sada znaků abecedy jedné velikosti a jednotného stylu. Font Definice Arial font-family: sans-serif; Courier font-family: monospace; Georgia font-family: Georgia, "New York CE", utopia, sans-serif; Lucida Console font-family: "Lucida Console", "Monaco CE", fixed, monospace; Palatino Linotype font-family: "Palatino Linotype", "New York CE", utopia, serif; Tahoma font-family: Tahoma, "Lucida Grande CE", lucida, sans-serif; Times font-family: serif; Trebuchet MS font-family: "Trebuchet MS", "Geneva CE", lucida, sans-serif; Verdana font-family: Verdana, "Geneva CE", lucida, sans-serif; p { font-family: "Trebuchet MS", Tahoma, "Geneva CE", lucida, sans-serif; } Používání různých fontů v jednom dokumentu unavuje oči, kazí estetický dojem, narušuje orientační soustavu na stránce. Optimálně je možné použít max. 2 až 3 fonty.
Repozitáře fontů a font API http://www.fontcomparer.com/ http://www.fontpark.net/ http://code.google.com/webfonts http://openfontlibrary.org/ http://fonts500.com/ http://www.urbanfonts.com/ …
Google font API <html> <head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> <style> body { font-family: 'Tangerine', serif; font-size: 48px; } </style> </head> <body> <h1>Making the Web Beautiful!</h1> </body> </html> Více viz http://code.google.com/intl/cs/apis/webfonts/docs/getting_started.html
Odpovědný design Odpovědný design je termín, kterým je nazýván postup tvorby webových stránek, které respektují specifika různých výstupních zařízení. Při tvorbě se nejčastěji aplikují následující návrhové vzory: Mostly Column Drop Layout Shifter Tiny Tweaks Off CanvasSketchFlow
Mostly Fluid Nejpoužívanější vzor, který je založen na vícesloupcovém rozložení stránky. Sloupce jsou vytvořeny už s ohledem na různá výstupní zařízení a při zobrazovaní na menších displejích se řadí pod sebe.
Column Drop Vzor vychází taktéž s vícesloupcového rozložení stránky. Sloupečky se řadí na menších displejích také pod sebe, ale na rozdíl od předchozího příkladu se šířka sloupce přizpůsobuje velikosti okna.
Layout Shifter Layout Shifter – Vzor, ve kterém vytváříme pro každou velikost výstupního zařízení různé rozložení stránky. Tento vzor je z pohledu času nejnáročnější, a proto je také nejméně populární.
Tiny Tweaks Vzor používaný u velice jednoduchých stránek, kde je možné zachovat stejné rozložení stránky na všech zařízení výstupních zařízení. Úprava se většinou týká pouze velikosti písma, velikosti obrázku a jejich umístění.
Off CanvasSketchFlow Poslední vzor na rozdíl od předchozích vychází z předpokladu, že vše co se nevejde na obrazovku, bude zachována ve výchozím rozložení a bude dostupné pomocí vertikálního posunu.
Příklad
Prototypování Prototypování je proces, při kterém se konstruuje model webové stránky či webové aplikace, z důvodu simulace výsledku. Umožňuje nám to v počáteční fázi experimentovat s rozložením prvků a simulovat chování výsledného systému. Prototypování typicky simuluje pouze některé aspekty budoucího systému a ve výsledku může být zcela odlišný od budoucí implementace. Přínosy Zpětná vazba od uživatelů na začátku projektu (usability test) Porovnání, zda web splňuje předem definované specifikace. Včasné zachycení špatného chování systému. Příklady softwaru Pencil project, Axure, SketchFlow, Mockupbuilder, …
Nástroje pro prototypování Pencil project Plugin do Firefoxu. Nelze generovat specifikace a navrhovat interaktivní plány. Cena: zdarma http://pencil.evolus.vn/en-US/Home.aspx Balsamiq Široká nabídka widgetů, možnost propojení stránek odkazy, export do PNG. Cena: cca $80 http://balsamiq.com/ Axure Vysoká interaktivita, generování specifikací, export do HTML i PNG Cena: cca $600 http://www.axure.com/
Příklad drátěného modelu
Prototypování
Prototypování
CSS frameworks CSS frameworky si lze představit jako předpřipravené knihovny, které obsahují kolekce definic CSS stylů, které výrazným způsobem urychlují práci při tvorbě layoutu stránky. Hojně jsou například využívány styly pro reset předdefinovaných stylů ve webových prohlížečích, případně styly definující grid systém, nastavující typografii stránky, či upravující vzhled některých prvků. Mezi nejvýznamnější CSS frameworky se řadí: 960 CSS Framework, Blueprint CSS Framework, The jQuery UI CSS Framework, Twitter Bootstrap, Wirety, Elasticss ...
CSS frameworks A další a daší a další a … Elements CSS Framework (http://elements.projectdesigns.org/) YAML: Yet Another Multicolumn Layout (http://www.yaml.de/en/) YUI Grids CSS (http://developer.yahoo.com/yui/grids/) Blueprint (http://www.blueprintcss.org/) Boilerplate (http://code.google.com/p/css-boilerplate/) Tripoli (http://devkick.com/lab/tripoli/) Content with Style (http://www.contentwithstyle.co.uk/content/a-css-framework) BlueTrip CSS Framework (http://bluetrip.org/) Elastic CSS (http://elasticss.com/) Typogridphy (http://csswizardry.com/typogridphy/) The Golden Grid (http://code.google.com/p/the-golden-grid/) Fluid 960 Grid System (http://www.designinfluences.com/fluid960gs/) …
960 Grid system 960 Grid system je css framework, který pracuje s oblastí 960pixelu, kterou dělí na 12, 16 nebo 24 sloupců. Je používán jak při návrh jak návrhu layoutu webu, tak pro následné rozřezání a kódování grafiky webu. Výhodou je existence mřížky, kterou si lze naimportovat do Photoshopu jako podporu při tvorbě designu stránek.
12ti sloupcový layout
16ti sloupcový layout
Příklad: 960 Grid system Příklad použití 960 grid system: <div class="container_12"> <div class="grid_7 prefix_1"> <div class="grid_2 alpha"> ... </div> <div class="grid_3"> <div class="grid_2 omega"> <div class="grid_3 suffix_1">
Twitter Bootstrap Twitter Bootstrap je framework, který ve svém základu disponuj pokročilým grid systémem a dále styly pro typografii, tabulky, formuláře, tlačítka a obrázky. Rozšíření obsahuje rozbalovací menu, skupiny tlačítek, navigační prvky, stránkování, titulky, náhledy, upozornění, indikátor průběhu. Twitter Bootstrap se neomezuje pouze na ccs, ale s přidání JavaScriptové knihovny lze pohodlně doplnit naformátované prvky o přechody, vytvářet modální okna, záložky, nápovědy či obsluhovat tlačítka. Příklad použití tlačítka: <div class="btn-group"> <a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> <span class="caret"></span> </a> <ul class="dropdown-menu"> <li><a href="#"><i class="icon-pencil"></i> Edit</a></li> <li><a href="#"><i class="icon-trash"></i> Delete</a></li> <li><a href="#"><i class="icon-ban-circle"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> </div>
Twitter Bootstrap