Přednáška pro SEOloger naživo.
Google svou technologii AMP letos přímo amplifikuje, silně ji tlačí do světa. AMP Stories se jako konkurence Instagram Stories možná daly očekávat. Posilování pozice AMPu v e-commerce taky. Málokdo ale čekal, že tahle technologie poslouží jako podklad pro revoluci v tvorbě e-mailů. Jaké novinky Google v oblasti AMP tlačí a jak budou užitečné pro různé typy vašich klientů?
Vývoj nového Bootstrapu trval skoro tři a půl roku, ale jednou to přijít muselo. V přednášce se zaměřím na novinky a taky se podívám, v čem mu dochází dech.
Martin Michálek: Bootstrap 4 - Jednou to muselo přijítDevelcz
Technologické novinky čtvrté verze vás neohromí: flexbox, SASS, nebo utility třídy… Nuda. V jedné věci se ale starý dobrý Bootstrap změnil dost zásadně a právě na tu se zaměřím.
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.
State of the art responzivních technikálií (Devel.cz)Martin Michálek
— Responzivní webdesign jak jej definoval Marcotte je přežitý
— První problém je v rychlosti načítání: naštěstí tu máme Picturefill, lazy loading, compressive images a back-end
— Dalším problémem je pracovní postupy: Mobile Up namísto Desktop Down, hodně breakpointů, hodně verzí kódu a kód orientovaný na stránky namísto UI komponent
— Třetí problém: uživateli dáváme daleko víc než potřebuje: téma je AjaxInclude a podmíněné načítání assetů pomocí Modernizru
12. Affiliate konference / Daniel Nytra_Jak může AMP pomoci vašemu webu?Colpirio.com s.r.o.
AMP: Accelerated Mobile Pages Project - stále podceňovaná a přesto důležitá funkce pro načtení stránek rychlostí blesku. O co se přesně jedná a jak to může vašemu webu pomoci?
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeMartin Michálek
V přednášce se podíváme na zajímavé novinky, které vám usnadní dělat rychlejší weby. Je zde spousta nových technologií, které můžeme v prohlížečích používat už nyní, ale mezi vývojáři nemají takovou popularitu. A to nemluvíme o nových nástrojích pro ladění rychlosti, které jsou po ruce a šetří nám čas.
Vývoj nového Bootstrapu trval skoro tři a půl roku, ale jednou to přijít muselo. V přednášce se zaměřím na novinky a taky se podívám, v čem mu dochází dech.
Martin Michálek: Bootstrap 4 - Jednou to muselo přijítDevelcz
Technologické novinky čtvrté verze vás neohromí: flexbox, SASS, nebo utility třídy… Nuda. V jedné věci se ale starý dobrý Bootstrap změnil dost zásadně a právě na tu se zaměřím.
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.
State of the art responzivních technikálií (Devel.cz)Martin Michálek
— Responzivní webdesign jak jej definoval Marcotte je přežitý
— První problém je v rychlosti načítání: naštěstí tu máme Picturefill, lazy loading, compressive images a back-end
— Dalším problémem je pracovní postupy: Mobile Up namísto Desktop Down, hodně breakpointů, hodně verzí kódu a kód orientovaný na stránky namísto UI komponent
— Třetí problém: uživateli dáváme daleko víc než potřebuje: téma je AjaxInclude a podmíněné načítání assetů pomocí Modernizru
12. Affiliate konference / Daniel Nytra_Jak může AMP pomoci vašemu webu?Colpirio.com s.r.o.
AMP: Accelerated Mobile Pages Project - stále podceňovaná a přesto důležitá funkce pro načtení stránek rychlostí blesku. O co se přesně jedná a jak to může vašemu webu pomoci?
Rychlejší web snadno a rychle: Nové technologie a nástroje pro vývojářeMartin Michálek
V přednášce se podíváme na zajímavé novinky, které vám usnadní dělat rychlejší weby. Je zde spousta nových technologií, které můžeme v prohlížečích používat už nyní, ale mezi vývojáři nemají takovou popularitu. A to nemluvíme o nových nástrojích pro ladění rychlosti, které jsou po ruce a šetří nám čas.
AMP (Accelerated Mobile Pages) - SEO restart 2016Desingdev
Přednáška Michala Vojáka na SEO restart 2016 o AMP. Accelerated Mobile Pages rozhodně řeší velký problém. Revoluce v mobilním vyhledávání nebo jen pokus a slepá ulička?
Projdeme si agrumenty, proč je důležité lpět na rychlosti načítání webu. Ukážeme si několik častých chyb a jak je možné webařské týmy kontrolovat. No a samozřejmě – jakou roli v tom celém hraje nová technologie AMP od Google. Máte ji nasadit?
Přednáška a workshop pro "SEO jako Brno".
jaký je význam rychlosti webu
na které metriky se dívat a jak je chápat
jaké nástroje pro posuzování rychlosti webů používat
jaké jsou základní technické (obsahové) prostředky ke zvýšení rychlosti webů
jaké jsou pokročilejší možnosti pro zrychlení
Hobby Developer 3.0: Tipy a triky pro webTomáš Muchka
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
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Martin Michálek
Přednáška z Czech Online Summit 2019. Praktická rychlost webu pro eshopaře, marketéry a UXáky. Jak ji měřit a jak raději ne. Co můžete vylepšit sami a jak? Jak zaúkolovat vývojáře a ohlídat alespoň základní věci bez znalostí technických detailů?
Cíl optimalizace pro hledající uživatele zůstává stejný – kvalitní a relevantní obsah. Přesto se mění způsoby, jak ho předat uživatelům. V přednášce probereme ty nejdůležitější technikálie pro tento rok – rychlost načítání stránek, optimalizaci pro mobilní zařízení, bezpečnost a strukturovaná data. Vše doplněno konkrétními ukázkami a tipy z praxe.
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
APEK - Facebook reklama pro pokročilé - duben 2022.pdfHonza Bartoš
Webinář nabitý základy i pokročilejšími strategiemi. Zaměřil jsem se na Facebook Pixel, CAPI a katalog produktů z XML feedu. Dynamické slevy v obrázcích a oblíbené strategie, které používám a věřím, že se budou hodit i vám.
Říjnový SEOloger 2019 - Screaming Frog a crawlování webůMartin Žatkovič
V říjnu 2019 jsem mluvil na SEOlogeru na téma ohledně crawlování webů pomocí nástroje Screaming Frog. Konkrétně jsme si ukázali šikovné nastavení, verzi 11 a tradiční i netradiční využití.
2015 Webexpo: Co jsem se naučila při správě PPC kampaní s 5M budgetemMarkéta Kabátová
Na reálném příkladu jedné mezinárodní firmy jsem ukázala celý proces nastavení PPC kampaní od zacílení až po optimalizaci. Hlavně jsem se zaměřila na postup při přípravě kampaní, jaké nástroje používám a jak si práci zjednodušuji.
Nové »bezhlavé« CMS — přechod od monolitů ke službámJaroslav Vrána
Přednáška zaměřená na důvody k opuštění monolitu podložené výzvami a očekáváním jednotlivých rolí, které pracují s CMS.
Instance Strapi CMS na jedno kliknutí https://fastandcomfy.io/strapi?for=frontendisti-brno
Plná animace včetně skrytých snímků https://youtu.be/QuBJf_tLbBo
CSS je skoro všude. Pomocí CSS tvořím weby, připravuji jejich tiskové verze, sázím e-booky a menší PDF… Můj odvěký sen ale byl dostat se s CSS také do tiskárny při sazbě pořádné knihy. Jak to dopadlo? To se dozvíte v téhle přednášce.
My slides from WebExpo 2022 keynote for Frontendisti.cz stage.
The world is changing, the frontend is changing, and we have to change with it. What makes 2022 special? Take a look at it through the eyes of a representative of the Frontendisti.cz community.
https://www.webexpo.net/prague2022/talk/frontend-keynote
AMP (Accelerated Mobile Pages) - SEO restart 2016Desingdev
Přednáška Michala Vojáka na SEO restart 2016 o AMP. Accelerated Mobile Pages rozhodně řeší velký problém. Revoluce v mobilním vyhledávání nebo jen pokus a slepá ulička?
Projdeme si agrumenty, proč je důležité lpět na rychlosti načítání webu. Ukážeme si několik častých chyb a jak je možné webařské týmy kontrolovat. No a samozřejmě – jakou roli v tom celém hraje nová technologie AMP od Google. Máte ji nasadit?
Přednáška a workshop pro "SEO jako Brno".
jaký je význam rychlosti webu
na které metriky se dívat a jak je chápat
jaké nástroje pro posuzování rychlosti webů používat
jaké jsou základní technické (obsahové) prostředky ke zvýšení rychlosti webů
jaké jsou pokročilejší možnosti pro zrychlení
Hobby Developer 3.0: Tipy a triky pro webTomáš Muchka
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
Rychlost webu: Co pro ni mohou udělat UXáci, marketéři a majitelé webů?Martin Michálek
Přednáška z Czech Online Summit 2019. Praktická rychlost webu pro eshopaře, marketéry a UXáky. Jak ji měřit a jak raději ne. Co můžete vylepšit sami a jak? Jak zaúkolovat vývojáře a ohlídat alespoň základní věci bez znalostí technických detailů?
Cíl optimalizace pro hledající uživatele zůstává stejný – kvalitní a relevantní obsah. Přesto se mění způsoby, jak ho předat uživatelům. V přednášce probereme ty nejdůležitější technikálie pro tento rok – rychlost načítání stránek, optimalizaci pro mobilní zařízení, bezpečnost a strukturovaná data. Vše doplněno konkrétními ukázkami a tipy z praxe.
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
APEK - Facebook reklama pro pokročilé - duben 2022.pdfHonza Bartoš
Webinář nabitý základy i pokročilejšími strategiemi. Zaměřil jsem se na Facebook Pixel, CAPI a katalog produktů z XML feedu. Dynamické slevy v obrázcích a oblíbené strategie, které používám a věřím, že se budou hodit i vám.
Říjnový SEOloger 2019 - Screaming Frog a crawlování webůMartin Žatkovič
V říjnu 2019 jsem mluvil na SEOlogeru na téma ohledně crawlování webů pomocí nástroje Screaming Frog. Konkrétně jsme si ukázali šikovné nastavení, verzi 11 a tradiční i netradiční využití.
2015 Webexpo: Co jsem se naučila při správě PPC kampaní s 5M budgetemMarkéta Kabátová
Na reálném příkladu jedné mezinárodní firmy jsem ukázala celý proces nastavení PPC kampaní od zacílení až po optimalizaci. Hlavně jsem se zaměřila na postup při přípravě kampaní, jaké nástroje používám a jak si práci zjednodušuji.
Nové »bezhlavé« CMS — přechod od monolitů ke službámJaroslav Vrána
Přednáška zaměřená na důvody k opuštění monolitu podložené výzvami a očekáváním jednotlivých rolí, které pracují s CMS.
Instance Strapi CMS na jedno kliknutí https://fastandcomfy.io/strapi?for=frontendisti-brno
Plná animace včetně skrytých snímků https://youtu.be/QuBJf_tLbBo
CSS je skoro všude. Pomocí CSS tvořím weby, připravuji jejich tiskové verze, sázím e-booky a menší PDF… Můj odvěký sen ale byl dostat se s CSS také do tiskárny při sazbě pořádné knihy. Jak to dopadlo? To se dozvíte v téhle přednášce.
My slides from WebExpo 2022 keynote for Frontendisti.cz stage.
The world is changing, the frontend is changing, and we have to change with it. What makes 2022 special? Take a look at it through the eyes of a representative of the Frontendisti.cz community.
https://www.webexpo.net/prague2022/talk/frontend-keynote
„To my ne, to oni!“ – komponenty třetích stran a rychlost webuMartin Michálek
Third-parties nám zpomalují weby. To víme. Ale skutečně jsme jako vývojáři proti nim tak bezbranní, jak si občas myslíme? V přednášce si ukážeme jak identifikovat problematické komponenty třetích stran a jak minimalizovat jejich dopady na rychlost webu.
V posledním roce jsem spolupracoval na optimalizaci zhruba dvacítky webů, většinou e-shopů. Před přednáškou jsem se zamyslel, které technické úpravy obvykle pomohou rychlost nějak popostrčit k lepšímu. Vznikl tak seznam o 17 bodech. V Ostravě si je všechny jeden po druhém projdeme.
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?
WebExpo 2017 - Přístupnost v kódu: ukázky a návrhové vzoryMartin Michálek
Přístupnost nemusí bolet. Podíváme se na časté chyby, které kodéři a designéři sekají jako slepý Baťa cvičky. Pak si ukážeme pár jednoduchých tipů, jak bez velké námahy pomoci nevidomým uživatelům vašich webů. A hlavně se podíváme na několik správně nakódovaných návrhových vzorů. Víte jak navrhout například přístupný našeptávač?
Martin Michálek je frontend designér na volné noze s takřka dvacetiletou praxí. Píše blog Vzhůru dolů, spoluzaložil a vede spolek Frontendisti.cz. Hlavně ale pomáhá s návrhem a implementací webových uživatelských rozhraní. V poslední době pracuje pro klienty jako jsou VašeČočky.cz, Svobodná Evropa nebo Česká televize.
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.
SVG bude pro tvorbu uživatelských rozhraní hotová revoluce. To si pište. Flexbox spolu s novými CSS3 vlastnostmi zase zjednodušuje postupy, které dřív z kodérů lezly jako z chlupaté deky. Designéři, vezměte svého kodéra a přijďte se ruku v ruce inspirovat novými technologickými možnostmi frontendu.
Přednáška pro konferenci Common 2016. Co je a proč používat Mobile First? Ukázky kódu z praxe a problémy tohoto postupu.
✎ http://www.vzhurudolu.cz/prirucka/mobile-first
Aktuální stav českého trhu co se mobilních prohlížečů týká. Pseudobrowser. Podpora HTML5. Čas strávený v prohlížečích klesá, ale třeba Facebook app je taky browser.
7. Problémy CSSGrafik
Děsně moc řezů písma
Video přes celou stránku
Vše se animuje
Vývojář
Spousta knihoven
Blokující skripty
Neoptimalizuje
8. Problémy CSSGrafik
Děsně moc řezů písma
Video přes celou stránku
Vše se animuje
Vývojář
Spousta knihoven
Blokující skripty
Neoptimalizuje
Marketér
Pořád testuje
Neoptimalizuje
9. AMP webařům nastavuje tvrdá omezení
1. Žádné vlastní UI komponenty
2. Žádný vlastní Javascript
3. Žádné vlastní měřící skripty
4. Žádné vlastní reklamy
5. CSS maximálně 50 kB
6. Optimalizace všeho by design
10. …a taky přidává nové vychytávky
1. Hostování u Google
2. Přednačtení od Google
16. Srovnání Speed Indexů pro různé verze článků
Bella Rose Cuketka
Web 22 885 12 971
AMP 9 467 15 722
AMP na Google 6 951 11 660
AMP na Google preload 274 163
22. AMP Stories
★ Něco jako Instagram Stories v Google Search.
★ Krátké příběhy. Možná interaktivita.
★ Nové komponenty: video, zvuky, animace…
★ Stav: už se používá a někde i zobrazuje.
★ g.co/ampstories
★ ampproject.org/stories
25. AMP for Email
★ Revoluce pro e-mail.
★ Skvělé pro e-commerce.
★ Komponenty: dotazníky, živé aktualizace, přihlášení…
★ Stav: Zatím jako developer preview. Bude v Gmailu.
★ blog.google/products/g-suite/bringing-power-amp-gmail
29. AMP pro e-shopy
★ Stav: Už víceméně jde.
★ Košík zatím na webu, ale přidání zboží v AMP.
★ Letos nové komponenty jako <amp-date-picker>.
★ Podobné produkty a dynamický obsah: <amp-list>
★ Personalizace: <amp-access>
★ Placení pomocí Payments Requests API.
33. AMP jako základ pro PWA
★ Offline běh a notifikace se Service Worker.
★ Zajímavé prakticky pro každý web.
★ Stav: Podpora je už všude, čekalo se na Apple.
34. Moudra na závěr
★ AMP je rychlý díky omezením a přednačtení.
★ Máte hodně návštěvníků z Google? Dělejte AMP.
★ Přizpůsobujte web AMPu.
★ Máte články, příběhy? Zkuste AMP Stories.
★ Sledujte AMP for E-mail.
★ Nový web? AMP for E-commerce a PWA.