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ývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...Martin Pešout
Pokud začínáte nový projekt, je vždy důležitou volbou správné struktování dat. Dlouhou dobu mě trápilo, že frontend vývojáři dělají řadu chyb hned na začátcích, pokud tvoří projekt nasazený radakčních systémech jako Wordpress nebo Drupal. Chtěl bych vám ukázat svůj způsob jak strukturovat frontend pro šablony, jak pracovat s gitem a hlavně jak vytvořit projekt, který s vámi bude růst a nebude se zanášet “balastem”.
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
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
Prezentace ze 7. WP konference o ladění výkonu webových aplikací. Optimalizace obrázků, CSS, JS. Vliv PHP a HTTP serveru, cachování. Profilování výkonu s Blackfire.io a debugování s Xdebug.
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ývoj frontendu na redakčním systému? ... aneb jak udržet pořádek v š...Martin Pešout
Pokud začínáte nový projekt, je vždy důležitou volbou správné struktování dat. Dlouhou dobu mě trápilo, že frontend vývojáři dělají řadu chyb hned na začátcích, pokud tvoří projekt nasazený radakčních systémech jako Wordpress nebo Drupal. Chtěl bych vám ukázat svůj způsob jak strukturovat frontend pro šablony, jak pracovat s gitem a hlavně jak vytvořit projekt, který s vámi bude růst a nebude se zanášet “balastem”.
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
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
Prezentace ze 7. WP konference o ladění výkonu webových aplikací. Optimalizace obrázků, CSS, JS. Vliv PHP a HTTP serveru, cachování. Profilování výkonu s Blackfire.io a debugování s Xdebug.
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
Prezentace z přednášky na meetupu wppivo.cz. Základy webové analytiky, jak dostat GTM do WordPress a jak měřit odesílání formulářů a další základní měření.
Hledání příčin pomalého webu a jak to řešitDesingdev
Rychlost webu je jeden z faktorů, který rozhoduje o tom, jak se bude uživatel při jeho procházení cítit. Kde všude hledat příčiny pomalosti, jak rychlost testovat a jak to rešit s vývojáři.
2. Jak dnes ponejvíce fungují weby
Weby se dnes řeší hlavně pomocí CMS systémů založených na nějakém
skriptovacím jazyce (PHP, ASPNet, Python) - a to do té míry, že už si mnoho lidí
nedovede představit nic jiného.
● Wordpress
● Drupal
● ...
CMS funguje tak, že stránky generuje dynamicky:
Požadavek uživatele -> CMS převezme -> CMS sáhne do databáze -> CMS
sestaví stránku -> CMS za pomoci serveru vrátí stránku uživateli
3. CMS systém - no má své výhody, o tom žádná...
● Snadná administrace
● Všichni to známe
● Dobře se v tom dělají weby
● Instalace je v pohodě (Wordpress)
● Velké množství funkcí - galerie, diskuse, formuláře atd..
4. Ale:
● Máme tady trend jednostránkových webů, kde chceme hlavně prezentovat
nějaké informace. Typicky ten web pro SIP, nebo web NM.
● Funkce CMS ani tak moc nepotřebujeme – web se tak často neaktualizuje
● Google upřednostňuje rychlé weby
● Nechceme proto moc skriptů
● Právě proto se pro takové web Wordpress moc nehodí - je to těžkopádné řešení
5. A proto máme generátory statických webů - WOW!
Generátor pracuje tak, že vezme nějaká vstupní data – obvykle něco takového:
● Textové soubory - obsah
● Šablonu - vzhled
● Soubor s nastavením (textový v nějakém serializovaném formátu)
A z nich vytvoří kompletní statický web v HTML, který se pak uploadne na server
Pokud chceme web aktualizovat, aktualizujeme vstupní data a web
přegenerujeme a uploadneme na server.
6. Zní to složitě, ale je to jednoduché
Generátorů je spousta - Jekyll (v Ruby), Hugo (v Go) a další...
Většinou to všechno funguje dost automaticky za pomoci různých nástrojů:
● git a GitHub, CDN (Netlify, Cloudcanon)
Co dělají v takovém případě lidi:
● Content manager - stará se o texty, které přidává na určené místo
● Webdesignér/kodér - pracuji stejně
● Webmaster - má nainstalovaný generátor a git, zadává pár příkazů v
terminálu nebo nástrojích, aby se to všechno uploadlo...
7. Jak funguje workflow s generátorem:
● Příprava samotného webu – design, tvorba šablony, vytvoření repozitáře,
testování za pomoci testovacího serveru (Jekyll)
● Připojení repozitáře k projektu v Netlify
● Deploy (to se pak děje automaticky, po každém commitu pushi)
● Příprava/aktualizace obsahu – texty (markdown) a obrázky do složek
● Test na lokálním počítači
● Commit a push na GitHub
8. Výhody generátoru:
Rychlé a nehacknutelné stránky!!
Uživatel: “Chci stránku” -> Server: “Tady ji máš”
Není třeba řešit databázi, aktualizace, kompatibilitu pluginů atd.
Generátory mají také různé pluginy (SEO, stránkování, sitemapy atd.)
Práce pro designéra a kodera šablony se moc nemění
Nízké nároky na hosting - nepotřebujeme PHP, Databázi atd., menší projekt klidně může běžet na některé CDN (Netlify) zdarma. Ale je to škálovatelné, kdyby se to moc rozjelo, přikoupí se výkon...
Návštěvník webu kromě rychlosti nic nepozná, tomu je to jedno
Rychlejší vývoj malých webů – stejně ale potřebujete designéra a kodéra šablony, copywritera atd.
9. Nevýhody a omezení
● Není to asi dobré pro velké projekty.
● Ale pro jednostránkové weby a malé blogísky jo.
● Diskuse, formuláře, galerie (lightbox) atd. je nutné pořešit navíc. Ale jde to
● Větší nároky na technické znalosti redakce (ideálně markdown)
● Vývoj statického generovaného webu nemusí být nutně levnější. Výhody jsou
spíš v tehcnologii...
10. Autor:
Michal Doležel – Narrativemedia.cz
Narrativemedia.cz
michaldolezel.cz
Email: dolezel@narrativemedia.cz
Prezentace vznikla pro interní potřebu agentury Narrativemedia. Ale třeba někomu pomůže.
Informace bez záruky, je to zjednodušené...