Webdesign II
Služby počítačových sítí
Seventeen Moons, Wiltshire, England
obsivac@fi.muni.cz | 2010
Dnes prakticky… a na steroidech
 HTML5 + CSS3
 Struktura, multimedia, grafika, formuláře, JS API
 JavaScriptové rámce
 Google Analytics + Website Optimizer
 SEO
 Vývojářské pomůcky
 Firebug + Page Speed
 Ukázka z testování použitelnosti :-)
 Reality show
 PV219 Seminář webdesignu + něco úplně jiného
HTML 5 1/2
 Po desetiletí s HTML 4 konečně změna?
 400+ nezávislých a 70+ „firemních“ expertů
 Nové značky/atributy + nové JS API + CSS3
 Struktura (sémantika částí stránky)
 <header>, <nav>, <aside>, <section>, …
 Multimédia
 <video> a <audio> s ovládáním play(), currentTime, …
 uživatelské rozhraní v rámci prohlížeče vs. vlastní
 dev mozilla Using Audio and Video in Firefox
 2D a 3D grafika
 <canvas> – dynamic scriptable rendering of bitmap images
HTML5 | JS rámce | Analytics | Pomůcky | Test, realita, PV219
HTML 5 2/2
 Formuláře
 (Web Forms 2)
 <input type=" date | month | ... | time | number | range | email | url
min=… max=… step=… pattern=… autocomplete="off" ... >
 placeholder="…"
 JS API
 Přístup k tlačítku zpět, drag-and-drop, localStorage,
WebWorker, dokonce SQL, …
 HTML 5 = mnoho oříšků pro webové vývojáře
 a bezpečnostní experty
 např. <link rel=" pingback | prefetch | …
HTML5 | JS rámce | Analytics | Pomůcky | Test, realita, PV219
HTML 5 3/2 :-)
 slides.html5rocks.com
 Připoutejte se, bude to svištět.
 diveintohtml5.org
 A Web Developer’s Guide to HTML 5
 http://dev.w3.org/html5/html-author/
 Draft specifikace
 http://dev.w3.org/html5/spec/
 html456 (Martin Hassman), Zdroják.cz (Jan Sládek, Martin Malý)
HTML5 | JS rámce | Analytics | Pomůcky | Test, realita, PV219
CSS3
 Selektory, fonty, zalomení textu, sloupce, kulaté rohy, gradienty,
stíny, přechody, transformace, animace, …
 Oh my!
 Zdroják.cz (Jan Sládek)
HTML5 | JS rámce | Analytics | Pomůcky | Test, realita, PV219
JavaScript frameworks
 JavaScript framework matrix
HTML5 | JS rámce | Analytics | Pomůcky | Test, realita, PV219
Google Analytics
 Ukázka, otázky?
 Clik heat maps
HTML5 | JS rámce | Analytics | Pomůcky | Test, realita, PV219
Google Website Optimizer
 TODO :-)
HTML5 | JS rámce | Analytics | Pomůcky | Test, realita, PV219
Search Engine Optimization 1/2
 Přístupný a kvalitní obsah
 Není to o první pozici. Není? :-)
 Pozor na to, co se vyplatí – Return On Investment =
 Co je dobré pro lidi, je dobré pro vyhledávače.
 Neduplikovat (url, title, …), rel=canonical, 301 redirekty
 Klíčová slova, fráze, výrazy, …
 How many SEO experts does it take to change a light bulb, lightbulb, light, bulb,
lamp, lighting, switch, sex? – @bilb02
 Konkurečnost – long tail
 statistiky vyhledávačů, PPC, nástroje
 Google Trends a Search Insights
 Co dělá konkurence?
 Prvně hledaná & výnosná & snadná
 Vstupní stránky
HTML5 | JS rámce | Analytics | Pomůcky | Test, realita, PV219
zisk−náklady
náklady
Search Engine Optimization 2/2
 Důležité tagy
 Pro SERP: Title. Title. Title. (<65) + Meta description (<150)
 Link building – buďte kreativní a nakažliví
 Vyměňovat, být tam kde konkurence (link:)
 Služby zdarma jako kalkulačky, slovníky, …
 Local & Social Media & Web's Influencers & name your own buzz
 Návštěvník se nemusí stát zákazníkem a přesto se může vyplatit.
 Podporujte snadné sdílení
 Google/Bing Webmaster Tools
HTML5 | JS rámce | Analytics | Pomůcky | Test, realita, PV219
Vývojářské pomůcky
 Firebug
 Page Speed
 Web Devoleper
HTML5 | JS rámce | Analytics | Pomůcky | Test, realita, PV219
Ukázka z testování použitelnosti
 Testování Navrcholu.cz (2006)
 pár minut od 8:28
HTML5 | JS rámce | Analytics | Pomůcky | Test, realita, PV219