Post on 14-Apr-2017
transcript
Hobby Developer 3.0Tipy a triky pro web development
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
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.