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
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
Jak si nejprodávanější WordPress šablony stojí s rychlostí frontendu? Zjistil jsem, že to moc testovat nejde a tak kupujete zajíce v pytli. V přednášce tedy dostanete seznam nejčastějších problémů a stručný návod k jejich odstranění.
Procházím svůj proces návrhu a realizace rozhraní bez složitých nástrojů. Jeho základem je HTML prototypování. Ukazuji, proč by jej měli chtít používat designéři a proč frontendisti a své dobré i špatné zkušenosti s ním.
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůMartin Michálek
Proč vlastně řešit rychlost načtení? Proč v souvislostí s rychlostí nemluvit jen o rychlosti načtení stránky? Jak zjistit nedostatky webu související s rychlostí? A co chtít po kodérech, když je objevíte?
http://www.vzhurudolu.cz/prednaska/seologer-178
Zrychlování mobilního webu aneb LTE máme jenom v Praze | Jarda Hanslík - Slev...skrzczdev
Prezentace z Skrz DEV Cirkus vol. 2 na téma Zrychlování mobilního webu aneb LTE máme jenom v Praze. Video k dispozici na https://www.youtube.com/watch?v=Jz7htHPjsu4
Kde jsou hranice užití JavaScriptu, aby vyhledávačům nevadil? Jak udělat průchozí stránky pro vyhledávače? Co vyhledávače a Ajax? Jaký je rozdíl mezi Googlem a Seznamem v procházení a spouštění JavaScriptu? Je infinite scroll zlo? Prezentace z dubnového setkání SEO Logger.
WordPress šablony a rychlost načítání (WordCamp Praha 2017)Martin Michálek
Jak si nejprodávanější WordPress šablony stojí s rychlostí frontendu? Zjistil jsem, že to moc testovat nejde a tak kupujete zajíce v pytli. V přednášce tedy dostanete seznam nejčastějších problémů a stručný návod k jejich odstranění.
Procházím svůj proces návrhu a realizace rozhraní bez složitých nástrojů. Jeho základem je HTML prototypování. Ukazuji, proč by jej měli chtít používat designéři a proč frontendisti a své dobré i špatné zkušenosti s ním.
Vše co potřebuje markeťák vědět o rychlostní optimalizaci webůMartin Michálek
Proč vlastně řešit rychlost načtení? Proč v souvislostí s rychlostí nemluvit jen o rychlosti načtení stránky? Jak zjistit nedostatky webu související s rychlostí? A co chtít po kodérech, když je objevíte?
http://www.vzhurudolu.cz/prednaska/seologer-178
Zrychlování mobilního webu aneb LTE máme jenom v Praze | Jarda Hanslík - Slev...skrzczdev
Prezentace z Skrz DEV Cirkus vol. 2 na téma Zrychlování mobilního webu aneb LTE máme jenom v Praze. Video k dispozici na https://www.youtube.com/watch?v=Jz7htHPjsu4
Kde jsou hranice užití JavaScriptu, aby vyhledávačům nevadil? Jak udělat průchozí stránky pro vyhledávače? Co vyhledávače a Ajax? Jaký je rozdíl mezi Googlem a Seznamem v procházení a spouštění JavaScriptu? Je infinite scroll zlo? Prezentace z dubnového setkání SEO Logger.
Jak zlepšit zabezpečení čtvrtiny celého webuMichal Špaček
WordPress prý používá 27 % webu. Na následujících slajdech bych chtěl naznačit, co bychom ve WordPressu mohli zlepšit z pohledu bezpečnosti,protože když to uděláme, tak se zvýší zabezpečení poměrně hodně webů. Já vím, ne všichni aktualizují, ale o tom někdy jindy.
Nebojte se Penguina a nebojujte proti němu. Využívejte jeho silných stránek a nechte se vykatapultovat vzhůru. Nezneužívejte vyhledávače, využívejte jejich silných stránek. Na přednášce o nové aktualizaci Google pod názvem Penguin 2.0 na konferenci SEO Restart jsem prozradil jak na to.
http://www.vzhurudolu.cz/prednaska/design-webu-v-prohlizeci-149 ***** Přednáška pr WebExpo 2015. Pojďme si ukázat proces návrhu rozhraní webu při responzivním redesignu eshopu VašeČočky.cz. V posledních letech jsem opustil standardní postupy s wireframy a Photoshopem. Vystačím si s papírem, tužkou a prohlížečem.
Copywriter s přesahem do SEO a UX? Nutnost! | Copycamp 2016 | 8.6.2016Jan Kvasnička
Přednáška "Copywriter s přesahem do SEO a UX? Nutnost!" zazněla na šestém ročníku konference Copycamp.cz a o své praktické příklady se zde podělila dvojice #SEOUX Jan Kvasnička a Pavel Ungr. Více v článku http://blog.kvasnickajan.cz/copywriter-s-presahem-do-seo-a-ux-nutnost/.
SEOloger: Optimalizace crawl budgetu (host: Vladimír Saur)Pavel Ungr
Co to je crawl budget a proč byste se měli o něj zajímat? U jakých webů jej má smysl řešit, u jakých naopak ne? Jakým způsobem můžete ovlivnit, jak robot vyhledávače stahuje vaše stránky – a má vůbec smysl robota nějak limitovat? Přijďte si popovídat o tom, jak neházet robotům klacky pod nohy.
Úspěšná knihovna pro validaci síly hesla zxcvbn, má již mnoho forků. Dokonce je i přepsaná do jiných jazyků, včetně PHP. Existuje i varianta s lokalizací do češtiny v JS. My jsme se rozhodli to spojit a dát dohromady již existující PHP verzi a JS verzi s českou lokalizací. Rádi bychom se s vámi podělili o to, co se nám povedlo a jak byste knihovnu mohli použít.
Digisemestr - Broken linkbuilding, strukturovaná data a další možnosti pokroč...Sun Marketing
Workshop Broken linkbuilding, strukturovaná data a další možnosti pokročilého SEO byl určen pro studenty Digisemestru. Workshop byl složen z teoretické a praktické části. Úlohy v praktické části byly zaměřeny na OpenRefine, broken linkbuilding a strukturovaná data. Účastníci byli rozděleni do skupin ve kterých spolupracovali od začátku workshopu.
M. Čevelíček Zlepší svůj web! - Jak optimalizujeme webyPražský Barcamp
Hlavně ten web nedělej znovu! Leda že by ses chtěl zbavit peněz. 100% praktická přednáška, ze které odejdete s webem na steroidech. A ani vás to nebude moc bolet.
Pro lidi, kteří mají weby nebo plánují nový web.
Marek Prokop na konferenci SEO Restart 2019.
Když narazíte na opravdu velký web, intuice zkušeného SEO konzultanta je vám rázem k ničemu. Na velkém webu musíte zvládnout práci s velkými daty. Ukážu vám, jaké metody a nástroje se na to hodí.
Jan Barbořík - Tvoříme fotografický web ve wordpressu aneb jak na funkční web? Jan Barbořík
Chcete si vytvořit webové stránky k vlastní fotografické prezentaci? Na workshopu vám Honza Barbořík vysvětlí pravidla tvorby stránek počínaje výběrem a koupí domény, zřízením webhostingu, instalací wordpressu a jeho nastavením. Ukáže vám práci se šablonami a pluginy a především s vlastním obsahem stránek.
SEO a UX: Rivalové, nebo parťáci? Rozsekneme to! | SEORestart | 16. 6. 2017Jan Kvasnička
Při tvorbě nebo optimalizaci webu spolu tyto dvě role velice často soupeří. Kdo má pravdu? A kdy? Jsou to opravdu rivalové, nebo parťáci? V praktických příkladech se podíváme na nejproblémovější místa a ukážeme si, jak je pro UXáka nutný přesah do SEO a naopak.
SEO Restart 2023: Lukáš Kostka - AI a R studio – optimalizace meta tagů na ,,...Taste
Chcete se naučit, jak navrhnout vlastní AI prostředí například pro optimalizaci meta titles a descriptions? Vytvořte si vlastní laboratoř v R Studio a objevte OpenAI API v kombinaci s nepřeberným množstvím balíčků a možnostmi, které jazyk R nabízí.
Jak zlepšit zabezpečení čtvrtiny celého webuMichal Špaček
WordPress prý používá 27 % webu. Na následujících slajdech bych chtěl naznačit, co bychom ve WordPressu mohli zlepšit z pohledu bezpečnosti,protože když to uděláme, tak se zvýší zabezpečení poměrně hodně webů. Já vím, ne všichni aktualizují, ale o tom někdy jindy.
Nebojte se Penguina a nebojujte proti němu. Využívejte jeho silných stránek a nechte se vykatapultovat vzhůru. Nezneužívejte vyhledávače, využívejte jejich silných stránek. Na přednášce o nové aktualizaci Google pod názvem Penguin 2.0 na konferenci SEO Restart jsem prozradil jak na to.
http://www.vzhurudolu.cz/prednaska/design-webu-v-prohlizeci-149 ***** Přednáška pr WebExpo 2015. Pojďme si ukázat proces návrhu rozhraní webu při responzivním redesignu eshopu VašeČočky.cz. V posledních letech jsem opustil standardní postupy s wireframy a Photoshopem. Vystačím si s papírem, tužkou a prohlížečem.
Copywriter s přesahem do SEO a UX? Nutnost! | Copycamp 2016 | 8.6.2016Jan Kvasnička
Přednáška "Copywriter s přesahem do SEO a UX? Nutnost!" zazněla na šestém ročníku konference Copycamp.cz a o své praktické příklady se zde podělila dvojice #SEOUX Jan Kvasnička a Pavel Ungr. Více v článku http://blog.kvasnickajan.cz/copywriter-s-presahem-do-seo-a-ux-nutnost/.
SEOloger: Optimalizace crawl budgetu (host: Vladimír Saur)Pavel Ungr
Co to je crawl budget a proč byste se měli o něj zajímat? U jakých webů jej má smysl řešit, u jakých naopak ne? Jakým způsobem můžete ovlivnit, jak robot vyhledávače stahuje vaše stránky – a má vůbec smysl robota nějak limitovat? Přijďte si popovídat o tom, jak neházet robotům klacky pod nohy.
Úspěšná knihovna pro validaci síly hesla zxcvbn, má již mnoho forků. Dokonce je i přepsaná do jiných jazyků, včetně PHP. Existuje i varianta s lokalizací do češtiny v JS. My jsme se rozhodli to spojit a dát dohromady již existující PHP verzi a JS verzi s českou lokalizací. Rádi bychom se s vámi podělili o to, co se nám povedlo a jak byste knihovnu mohli použít.
Digisemestr - Broken linkbuilding, strukturovaná data a další možnosti pokroč...Sun Marketing
Workshop Broken linkbuilding, strukturovaná data a další možnosti pokročilého SEO byl určen pro studenty Digisemestru. Workshop byl složen z teoretické a praktické části. Úlohy v praktické části byly zaměřeny na OpenRefine, broken linkbuilding a strukturovaná data. Účastníci byli rozděleni do skupin ve kterých spolupracovali od začátku workshopu.
M. Čevelíček Zlepší svůj web! - Jak optimalizujeme webyPražský Barcamp
Hlavně ten web nedělej znovu! Leda že by ses chtěl zbavit peněz. 100% praktická přednáška, ze které odejdete s webem na steroidech. A ani vás to nebude moc bolet.
Pro lidi, kteří mají weby nebo plánují nový web.
Marek Prokop na konferenci SEO Restart 2019.
Když narazíte na opravdu velký web, intuice zkušeného SEO konzultanta je vám rázem k ničemu. Na velkém webu musíte zvládnout práci s velkými daty. Ukážu vám, jaké metody a nástroje se na to hodí.
Jan Barbořík - Tvoříme fotografický web ve wordpressu aneb jak na funkční web? Jan Barbořík
Chcete si vytvořit webové stránky k vlastní fotografické prezentaci? Na workshopu vám Honza Barbořík vysvětlí pravidla tvorby stránek počínaje výběrem a koupí domény, zřízením webhostingu, instalací wordpressu a jeho nastavením. Ukáže vám práci se šablonami a pluginy a především s vlastním obsahem stránek.
SEO a UX: Rivalové, nebo parťáci? Rozsekneme to! | SEORestart | 16. 6. 2017Jan Kvasnička
Při tvorbě nebo optimalizaci webu spolu tyto dvě role velice často soupeří. Kdo má pravdu? A kdy? Jsou to opravdu rivalové, nebo parťáci? V praktických příkladech se podíváme na nejproblémovější místa a ukážeme si, jak je pro UXáka nutný přesah do SEO a naopak.
SEO Restart 2023: Lukáš Kostka - AI a R studio – optimalizace meta tagů na ,,...Taste
Chcete se naučit, jak navrhnout vlastní AI prostředí například pro optimalizaci meta titles a descriptions? Vytvořte si vlastní laboratoř v R Studio a objevte OpenAI API v kombinaci s nepřeberným množstvím balíčků a možnostmi, které jazyk R nabízí.
Největší změny v SEO v roce 2013 a jak postupovat při SEO v roce 2014RobertNemec.com
Zajímáte se o optimalizaci pro vyhledávače či si nevíte rady s tím, jak dělat SEO? Chcete se dozvědět více o entitním SEO, o autorshipu, mikrodatech či o in-depth článcích? Tak to jste na správném místě, protože s tím vším vás seznámí náš SEO konzultant Martin Šimko v jeho přednášce ze semináře Chytřejší digitální marketing v roce 2014.
Kromě výše uvedeného se zde dozvíte vše podstatné, co se stalo na Googlu a Seznamu v roce 2013 - a hlavně jak toho využít a čemu se naopak vyvarovat, abyste nedostali penalizaci.
Martin Šimko vede jediný přehled všech změn ve vyhledávání na Seznamu od roku 2007 - http://www.robertnemec.com/seznam-zmeny-algoritmu/. Každým rokem publikuje i přehled změn na Googlu.
Lidé se často zaměřují na chybné ukazatele. Na co se dívat a na co naopak ne? Co o reálné rychlosti načítání říkají Google Analytics, co datová velikost stránky a co nástroj Lighthouse?
Jak může PPCéčkař zastoupit programátoraMichal Blažek
Ne vždy máte k dispozici programátora nebo by bylo časově/finančně výhodné s ním analytiku řešit. Jde to i bez něj. Zde najdete několik triků. Určitě nás můžete i kontaktovat v případě dotazů: https://marketingmakers.net/webova-analytika/
Poslední dva roky přinesly mnoho změn v algoritmech vyhledávačů, které výrazně ovlivňují SEO. Již dávno není SEO o využívání slabin vyhledávačů, ale o obsahu a nalezitelnosti vašich stránek na místech, kde se vaši potencionální zákazníci pohybují.
Everything about usability testing on one place. What is usability testing. Why are we testing usability. How to test usability. Basic steps of usability testing. Test evaluation
Do you plan to host an usability testing session? Would you like to convice your coworkers to attend this session? This presentation answers frequently asked questions about usability testing.
An comprehensive introduction to Flat Design. Comparision of Flat Design with other digital design styles. Flat Design attributes, origins, adopters and issues. Also a mention about Flat 2.0.
A short presentation on the theme of Subliminal Advertising. Whatever one thinks about the relatively small amount of evidence suggesting that subliminal communications play any real role in most advertising messages, there is no denying that the idea is perhaps more significant than the reality. It seems to be an idea that many members of the public want to believe in.
Accessibility of Common Web ApplicationsTomáš Muchka
An internal educational presentation on the theme of Accessibility of Web Applications, This presentation was created on the basis of an accessibility study for the HP Service Virtualization. See the slide notes for additional information.
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
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.
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.
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.
16.
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.
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")
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
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.