Prednaska na MONOGRAM Tech Monday 29.4.2013 o novych trendoch vo vyvoji html a css

1. NOVÉ TRENDY V
HTML A CSS
Tomáš Majer

2. Čo poznáte
História

3. PRIESTOR
NA VAŠE OTÁZKY

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…

7. Ako teda ďalej
?

8. Nové
Technológie
CSS

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

15. Nové
Technológie
HTML

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…

21. ZURB Foundation
http://foundation.zurb.com/
http://cl.ly/image/0d2S08190U2O
Ukážka

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

27. Ďakujem za pozornosť
Otázky