Nove trendy v html a css
Download as PPTX, PDF0 likes2,260 views
Prednaska na MONOGRAM Tech Monday 29.4.2013 o novych trendoch vo vyvoji html a css
Nove trendy v html a css
- 1. NOVÉ TRENDY V HTML A CSS Tomáš Majer
- 4. Šankiho veta o 3 browsroch Časy, keď niekto používal aj Operu a považovala sa za browser… • Žiadna vec nefunguje naraz vo viac ako 2 prehliadačoch. “shanki”
- 5. Prečo je ťažké robiť HTML a CSS
- 6. Prečo je ťažké robiť HTML a CSS Bordel de merde… • Rôznosť implementácie v prehliadačoch • Veľa možností, ako spraviť to isté • Je treba myslieť na veľmi veľa veci • Narezať grafiku je “easy”, ale…
- 9. LESS The dynamic stylesheet language • CSS wrapper • Premenné • Mixiny • Vnorené pravidlá • Funkcie • “Matematika” • “Prekladač” v JS - nodejs
- 10. LESS ukážka @nice-blue: #5B83AD; @light-blue: (@nice-blue + #111); #header { color: @light-blue; } #header { color: #6c94be; } .bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } .post a { color: red; .bordered; } #menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } .post a { color: red; border-top: dotted 1px black; border-bottom: solid 2px black; }
- 11. SASS Style with attitude • Podporuje všetko čo LESS • Kompaktnejšia syntax (zrušené zbytočné zátvorky a znaky :-) • Viac pre “programátorov” • http://sass-lang.com
- 12. SASS ukážka $blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 9%) .border padding: $margin / 2 margin: $margin / 2 border-color: $blue /* CSS */ .content-navigation { border-color: #3bbfce; color: #2b9eab; } .border { padding: 8px; margin: 8px; border-color: #3bbfce; }
- 13. • CSS Authoring Framework • Reusable patterns • Dokumentácia • Sprites • CSS3 • Typography http://compass-style.org
- 16. Chces robiť nejakú web app? Stiahni si bootstrap.
- 17. Twitter Bootstrap http://twitter.github.io/bootstrap/ • Grid layout (+ responzívny) • Naštýlované všetky HTML prvky (LESS) • Self explanatory dokumentácia • Všetka háveď, ktorú treba (aj Javascript) – Pejdžre, Dropdowny, Menu, Buttony, Hlášky, Modaly, Breadcrumbs, Taby, Carousel… – Bonus – Ikonky :-)
- 18. Ukážka
- 19. ZURB Foundation http://foundation.zurb.com/ http://cl.ly/image/0d2S08190U2O Ak máš grafiku a chceš robiť nejakú web app, stiahni si Foundation.
- 20. ZURB Foundation http://foundation.zurb.com/ • Platia tie isté veci ako pri Bootstrap-e • Postavné na SASS • Určené viac pre csskárov – pripravené veci pre customizáciu • Viacero hotových layoutov • Všetká háveď included…
- 22. Dalšie ako huby po daždi… • Gumby / http://gumbyframework.com/ • Kube / http://imperavi.com/kube/ • Yaml4 / http://www.yaml.de/docs/index.html • Skeleton / http://www.getskeleton.com/ • …
- 23. Nástroje moderného web developera • Javascript, javascript, javacsript… • Balíčkovacie systémy – npm, composer / Sématické verzionovania • Git • Livereload – ak to s CSS niekto myslí vážne
- 24. Sématicke verzionovanie http://semver.org/ • Verzia X.Y.Z – X = major, zmena public API – Y = New feature – Z = Patches • 0.Y.Z – development, hocikedy sa môže zmeniť API • Pre-release versions X.Y.Z-aplha, X.Y.Z-rc.1 • Ruby gems, npm, php composer, PyPI • .... Viac na webe – odporúčam
- 25. Ikonky One more thing… • Webfonty s ikonkami – Nekonečné zväčšovanie – Len jedna farba • Font Awesome - http://fortawesome.github.io/Font-Awesome/ • Glyphicons - http://glyphicons.com/
- 26. Záver • Peknú webovú appku vie spraviť aj sám developer • Veci sa už nerobia v staromódnom HTML a CSS • Balíčkovanie knižníc a závislosti