Hobby Developer 3.0Tipy a triky pro web development

Developer 2.0 (Microsoft, 2009)

Ahoj, já jsem Tomáš

UX

Každý už dělal nějaký ten

hobby projektKaždý už někdy dělal

webové stránky

Co dnes proberemeDnes 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

Nápad

Co mě napadloChtě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.

Co mě napadloChtě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.

Plán

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?

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.

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.

Implementace

Obvyklý stack webového vývojáře

HTML 5 CSS 3 Current Cool JS Framework

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.

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.

Dnes budou i dema.

Hledejte ikonu

Rychlá ukázka stránek

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.

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")

Meta #prohlížečemeta(name="viewport", content="width=device-width, initial-scale=1.0")

meta(http-equiv="X-UA-Compatible", content="IE=Edge")

meta(name="description", content="")

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

Optimalizace

2,5 MBPrůměrná velikost webové stránky

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í?

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

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”

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’);

Optimalizace webového serveruV 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"

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

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

Meta #twittermeta(property="twitter:card", content="summary_large_image")

meta(property="twitter:title", content="")

meta(property="twitter:description", content="")

meta(property="twitter:image", content="")

Meta #facebookmeta(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="")

Analýza a zpětná vazba

Teď teprve začíná legrace

Heatmapy● Jaké části stránek fungují,

jaké ne.● Na jaké elementy uživatelé

klikají.● Kam až uživatel scrolluje.

Heatmap Scrolling

Dodavatelné heatmapHeatmap.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.

Google Search ConsolePomocí 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.

Google AnalyticsPlnohodnotná 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ů

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.

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