Develop functional useful webpages, not monsters with the size of classic games. This presentation will guide you through all stages of modern web page development with tons of examples from his a real hobby project: http://lan.strazov.cz

1. Hobby Developer 3.0
Tipy a triky pro web development

2. Developer 2.0 (Microsoft, 2009)

3. Ahoj, já jsem Tomáš
UX

4. Každý už dělal nějaký ten
hobby projekt
Každý už někdy dělal
webové stránky

5. Co dnes probereme
Dnes vás provedu všemi fázemi vývoje webové aplikace a ukážu vám širokou
škálu nástrojů, které by se vám mohly hodit.
To vše na konkrétních příkladech mého posledního hobby projektu.
http://lan.strazov.cz

6. Nápad

7. Co mě napadlo
Chtěl bych udělat jednoduché webové stránky se základními informacemi o
Strážov LAN.
Na stránkách bych chtěl ukázat herní statistiky a výkony z minulých let.
Proč? Abych nalákal nové hráče a vyzkoušel si zase něco nového.

8. Co mě napadlo
Chtěl bych udělat jednoduché webové stránky se základními informacemi o
Strážov LAN.
Na stránkách bych chtěl ukázat herní statistiky a výkony z minulých let.
Proč? Abych nalákal nové hráče a vyzkoušel si zase něco nového.

9. Plán

10. Jaký je tedy plán?
1. Pro koho služba bude?
2. Jaké prostředky chcete do projektu vložit?
3. Jak moc se budete stránkám věnovat?
4. Jaké použijete technologie?

11. Jaký je tedy plán?
1. Pro koho služba bude?
Pro mladé hráče.
2. Jaké prostředky chcete do projektu vložit?
Stránky nebudou přinášet žádný peněžitý zisk, takže chci vložit minimální
prostředky.

12. Jaký je tedy plán?
3. Jak moc se budete stránkám věnovat?
Je to hobby projekt, takže pouze občas. Nechci každý měsíc složitě bootovat do
kódu.
4. Jaké použijete technologie?
Facebook je málo flexibilní, redakční systémy zase vyžadují údržbu a jsou to
molochy. Já chci něco jednoduchého. Chci zobrazit statistiky a kontakty.

13. Implementace

14. Obvyklý stack webového vývojáře
HTML 5 CSS 3 Current Cool JS
Framework

15. Jak jsem začal já
1. npm install harp -g
2. harp init myproject
3. harp server myproject
Harp projekt v podstatě vyžaduje pouze složku
public, do které patří všechny public assety a
soubor harp.json.

17. Vizuální styl
● Jednoduché webové stránky.
● Slouží k zobrazení statistik.
● Stránky pro mladé, mobily…
Vybíral jsem mezi material a flat designem. Material design jsem v poslední době
používal často, tak jsem si řekl, že zkusím udělat použitelný flat design.

18. Dnes budou i dema.
Hledejte ikonu

19. Rychlá ukázka stránek

20. Praktičtí pomocníci
● Can I Use? - ověřte si rozšíření technologie, kterou se chystáte použít.
● Google Fonts - když chcete mít jistotu, že se všichni dívají na +- stejné
stránky.
● Window Resizer - rychlá změna velikosti okna prohlížeče.
● Chrome DevTools - vývojářská konzole přímo v prohlížeči Google Chrome.
● Link Checker - najde všechny odkazy na stránce a vyzkouší, jestli fungují.
Případně rovnou Screaming Frog.

21. Meta #mobilní zařízení
Mobilní aplikace umí obarvit header, dokáže to i
webová stránka?
meta(name="theme-color", content="#1976d2")
meta(name="msapplication-navbutton-color",
content="#1976d2")
meta(name="apple-mobile-web-app-status-bar-style",
content="#1976d2")

22. Meta #prohlížeče
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible", content="IE=Edge")
meta(name="description", content="")

23. Strasti deploymentu
● Máte přístup k webovému serveru? Můžete upravit jeho nastavení?
● Automatizace deploymentu
Gulp.js
● npm install gulp-cli -g
● npm install gulp -D
● touch gulpfile.js

24. Optimalizace

25. 2,5 MB
Průměrná velikost webové stránky

26. Jak je to s tou velikostí
● Velkou část tvoří obrázky (1,6
MB). Potřebuje váš vizuální styl
velké obrázky?
● JS má velikost cca 0,5 MB.
Většinu z toho natáhnete ve
formě různých knihoven.
● U klasického PC nás velikost
webu moc netrápí, ale co mobilní
zařízení?

27. Velikost
různých JS
frameworků
Podrobné srovnání k dispozici
např. na githubu a wikipedii.
Name Size Optimized
Ember 2.2.0 435K 111K
Angular 2 566K 111K
Angular 1.4.5 143K 51K
React 133K 40K
jQuery 247K 30K

28. Velikost obrázků
Ideální velikost obrázku závisí na DPI a rozměrech obrazovky. Nemá smysl
posílat velmi kvalitní obrázky na malá zařízení, ale zároveň vypadají nekvalitní
obrázky na velkých obrazovkách ošklivě.
<img src=”example.png” />
srcset=”example-480.png 480w, example-960.png 960w”

29. Minifikace zdrojů
Harp.js provádí minifikaci HTML, CSS a JS automaticky.
harp compile src build
O minifikaci obrázků se postará doplněk pro Gulp.js.
var image = require(‘gulp-image’);

30. Optimalizace webového serveru
V mém případě pomocí .htaccess. K samotnému serveru nemám přístup.
# komprese médií
AddOutputFilterByType DEFLATE text/html
# cache control
Header set Cache-Control "max-age=604800, public"

31. SEO (Search Engine Optimization)
Na Internetu je spousta více či méně relevantních SEO doporučení. Google
hodnotí hlavně:
● Počet relevantních backlinků. // řeším pomocí herních webů
● Jestli je web mobile friendly. // snažím se o responsive design
● Strukturu stránek. // kde to jde, používám sémanticky správné HTML tagy

32. Vyhledávače a soc. sítě
Důležitý je správný výběr slov a také jejich celková délka. Optimalizace pro soc.
sítě spočívá v přidání několika meta tagů a obrázku.
● Facebook Webmasters
● Twitter Card
● Screaming Fog

33. Meta #twitter
meta(property="twitter:card",
content="summary_large_image")
meta(property="twitter:title", content="")
meta(property="twitter:description",
content="")
meta(property="twitter:image",
content="")

34. Meta #facebook
meta(property="og:title", content="")
meta(property="og:site_name", content="")
meta(property="og:description", content="")
meta(property="og:type", content="")
meta(property="og:locale", content="")
meta(property="og:image", content="")

35. Analýza a zpětná vazba

36. Teď teprve začíná
legrace

37. Heatmapy
● Jaké části stránek fungují,
jaké ne.
● Na jaké elementy uživatelé
klikají.
● Kam až uživatel scrolluje.
Heatmap Scrolling

38. Dodavatelné heatmap
Heatmap.me - moje první volba, ale nevyhovovalo mi ovládání. Ve free verzi
omezeno počtem html stránek.
Hotjar - heatmapy, analytika, dotazníky, feedback. Super služba, ale brzy mě
začala limitovat omezení free verze. Ve free verzi omezeno počtem html stránek.
Zeerat - podobné hotjaru, i když subjektivně ne tak promyšlené. Jako jediný lze
dlouhodobě používat i ve free verzi.

39. Google Search Console
Pomocí Search Console zjistíte, co si o vás Google myslí. Pro mě jsou zajímavé
hlavně:
● Analýza vyhledávání - na jaké dotazy vás Google zobrazil ve vyhledávání.
● Odkazy na vaše stránky - kdo na mě odkazuje
● Chyby procházení - seznam nedostupných stránek webu, které Google v
minulosti zaindexoval.

40. Google Analytics
Plnohodnotná analytika, v podstatě nutnost pro e-shopy a velké weby. Pro mě
spíš na hraní. Pro správné nastavení doporučuji článek od Ondřeje Ilinčeva.
● Pozor na bordel na vstupu (spam, vlastní návštěvy…)
● Pozor na špatné interpretace výstupů

41. Další užitečné nástroje
● Keyword Rank Checker - podívejte se, jak si vedete ve vyhledávání pro
různá klíčová slova.
● Varvy.com - zkontrolujte, jak si vaše stránka vede v různých aspektech, které
ovlivňují vaše uživatele i pozici ve vyhledávači. Berte výsledky s rezervou,
jedná se o doporučení.
● Mobile Usability Check - je váš web optimalizovaný pro mobily?
● PageSpeed Insights - doporučení pro zrychlení mobilní stránky na desktopu i
mobilu.
● Pingdom Speed Test - kompletní test načtení webové stránky.

42. To je vše.
Děkuji za pozornost.