Jednoduchý firemní web na WordPressu - WordCamp Praha 2014Radek Kucera
Prezentace z WordCamp Praha 2014 se zabývá tvorbou jednoduchých firemních stránek na WordPressu. Cílem prezentace je stručně rekapitulovat celý proces tvorby webu na WordPressu.
Slidy k přednášce Martina Hlaváče o programátorských frameworcích pro vlastní šablony ve světě WordPressu. PS: zdrojové kódy ukázek jsou veřejně dostupné na: https://github.com/hlavacm/wordcamp-praha-2018
Jednoduchý firemní web na WordPressu - WordCamp Praha 2014Radek Kucera
Prezentace z WordCamp Praha 2014 se zabývá tvorbou jednoduchých firemních stránek na WordPressu. Cílem prezentace je stručně rekapitulovat celý proces tvorby webu na WordPressu.
Slidy k přednášce Martina Hlaváče o programátorských frameworcích pro vlastní šablony ve světě WordPressu. PS: zdrojové kódy ukázek jsou veřejně dostupné na: https://github.com/hlavacm/wordcamp-praha-2018
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”.
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.
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”.
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.
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
Novinky v Mango a Tango, propojení Silverlight a XNA na Windows Phone Tomáš Slavíček
Přehledová přednáška, která proběhla ve čtvrtek 1. března 2012, od 17:20 na MFF UK.
Novinky ve Windows Phone 7.5 Mango a Tango (případně nové informace z MWC v Barceloně), především z pohledu vývoje her pro Windows Phone. Bude ukázáno, jak lze v jednom projektu kombinovat XNA a Silverlight dohromady. Přednáška bude probíhat praktickou formou, bude prostor pro diskuzi.
1. Jak pracovat s fonty na
front-endu
Petr Grochál
petr.grochal@superkoderi.cz
www.superkoderi.cz
#frontendisti, 9. 4. 2015
2. Trocha historie
1. Web-safe fonts
○ Arial, Verdana, Helvetica, Times New Roman, ...
2. Nahrazování fontů
○ Cufon - Canvas/VML
○ Sifr - Flash
○ Flir - embedované obrázky
3. Současnost
Web fonts (EOT, TTF, WOFF, SVG)
● EOT - IE8 a nižší
● TTF - Safari, Android, iOS
● WOFF - všechny moderní prohlížeče
● SVG - Safari na iOS 4.1 a nižším
9. Ke najít webfonty?
Cloud-hosted
● nemůžete nebo nechcete nahrávat soubory na server
● jednoduchá správa
● nemusíte se zatěžovat se zápisem @font-face
● Google Fonts, Fonts.com, Typekit, Cloud.typography, ...
Custom fonty
● zákazník občas dodá svůj vlastní font
10. Jak správně zapsat v CSS?
● různé řezy - kombinace font-style a font-weight
● co znamenají hashtagy v url?
zdroj: https://css-tricks.com/snippets/css/using-font-face/
11. Jak správně zapsat v CSS?
Jen WOFF a WOFF 2.0
zdroj: https://css-tricks.com/snippets/css/using-font-face/
16. Ikonkové fonty
● vektor
● jednoduchá změna barvy
● již hotové ikonkové sety na Icomoon, Fontastic, …
● možnost vygenerování vlastního fontu z SVG
http://www.sitepoint.com/create-an-icon-font-illustrator-icomoon/
17. Licence
● dát si pozor na to, pod jakou je font licencí
● za vygenerovaný font ručí developer
● možnost využít cloudových řešení jako
Typekit nebo Fonts.com
18. Tipy a triky
● font z Google fonts špatně vykresluje některé znaky -
stáhnout a vygenerovat
● české znaky - přidat language subset s českými
znaky, na Google fonts checkbox “Latin Extended”
● Příliš mnoho fontů - větší datová náročnost, déle se
stahují
● Pro mobilní zařízení vyzkoušejte condensed verzi
fontu
19. Tipy a triky
● Pokud se fonty v Chrome vykreslují špatně, zkuste
použít -webkit-font-smoothing: antialiased;
● Ve Firebugu se vám vysvítí, který font se aktuálně
používá
● zamezení zvětšování fontu na některých mobilních
zařízeních
body { -webkit-text-size-adjust: 100%; }
● velikost mřížky u ikonkového fontu nastavte podle
největší ikony a jednotlivé ikony vkládejte v té
velikosti jako jsou v designu