Presentation held by Vuk Nikolić on topic "Web frontend - startap akademija, prva tech radionica" at Startup Academy course in Belgrade. More details at startapakademija.com.

1. Web frontend
Startup akademija, prva tech radionica

2. Vuk Nikolić
@vuknikolic
Android, Java, iOS engineer
www.vuknikolic.rs

3. Šta je web frontend?

4. AJAX CSS
Modernizr
DOM Dojo
JSON
Prototype
HTML5 API
Firebug HTML
CSS Grids
CSS Pre-Processors
Javascript jQuery
Responsive Web

5. HTML

6. HTML - ubrzano
Opisivanje strukture stranice
Prikazuje se u browseru (desktop i mobilni)
Skup tagova (header, tabela, liste...)
Skup komponenti (textfield, button...)

7. Šta je taj HTML5?
Dodatni tagovi (article, header, footer, audio,
video...)
Dodatne komponente (kalendar, datum,
email...)
Dodatne funkcionalnosti (canvas crtanje,
drag‟n‟drop, web storage, geolocation...)
Prikaz idalje u browseru!

8. HTML = Šema stranice
Poenta priče

9. CSS

10. CSS - Ubrzano
Kako da izgledaju HTML elementi
Definisanje izgleda stranice
(pozicija, veličina, boja, fontovi, margine, lejeri)
Razdvajanje izgleda od šeme

11. CSS Primer

12. CSS3?
Novi propertiji: Box radius, Drop shadow,
Opacity, animacije
Media queries, font-face, RGBA
SELECTORS (Begins with, nth-child, only-
child, empty, not, checked)
Animacije (2D i 3D), transformacije
Pomagač: http://css3generator.com/

13. CSS3 Primeri
Svi elementi sa atributom „href‟ koji počinju sa „„startapakademija.com"
•[href^="startapakademija.com"]
Transformacije :)
• transform: scale(1.1,1.1) rotate(40deg) translate(10px, 20px)
Zakrivi ivice
• border-radius: 2px;
Samo za odreĎene veličine ekrana
• @media screen and (max-width: 600px) { ... }

14. JavaScript
Jezik za definisanje funkcionalnosti stranica
Izvršava se u browseru
AJAX - učitavanje i menjanje dela stranice
Revolucija sa gmaps i gmailom kao primerima
šta može da se uradi

15. <script type="text/javascript">
function notEmpty() {
var myTextField = document.getElementById('myText');
if (myTextField.value != "") {
alert("You entered: " + myTextField.value)
} else {
alert("Would you please enter some text?")
}
}
</script>
JavaScript Primer

16. Hvala na pažnji!

17. Problemi?
Različit prikaz u browserima, ako uopšte i
prikažu :)
Teško i naporno “debugovanje”
Sa svakom aplikacijom/sajtom sve iznova,
standardni problemi
Kombinovanje HTML, CSS i JSa u jednom
fajlu

18. Rešenja?

19. Zašto jQuery?
CSS Selektori
Lako manipulisanje DOMom i efekti
Ogroman community i brdo pluginova
Jednostavan
U svim browserima je OK

20. jQuery - primeri
Dodaj novu klasu za postojeći element
•$(„#secion‟).addClass(„newClass‟)
Promeni atribut
•$(„#myImage‟).attr(„src‟, „img.png‟)
Šta da se desi kada kliknem
•$(„#myLink‟).click(function (e){})
Sakri sve koji su klase “myFancyClass”
•$(„.myFancyClass‟).hide(„slow‟)

21. jQuery plugins
jQuery UI - Gotove komponente i efekti
Fotogalerije, Navigacija, Tooltipovi, razne
Komponente (Accordion), Endless scroll,
Validacije, Modalni prozori...

22. CSS Framework?

23. CSS Frameworks!
Reset “biblioteke” - isti početak
Gridovi i brzo sklapanje interfejsa
Responsive design!
Primeri: Twitter
Bootstrap, Blueprint, Foundation Zurb, 960
grid system

24. Responsive design

26. Twitter Bootstrap
Podrška za gridove
Responsive design
Tipografija, tabele, forme, dugmići
Dropdown, navigacija, alerts, progress bars
Ali i JavaScript: Tooltip, modal, popoveri

28. Bootstrap teme!

29. less.js
CSS Pre-Processor?
Često ponavljanje istih vrednosti
Mini template za CSS

30. less.js primer

31. Modernizr
Testira preko 40 next-gen funkcionalnosti
browsera
Olakšava život :)

32. Firebug
Neophodan alat
Inspekcija HTMLa, CSSa, JavaScripta,
internet saobraćaja
Menjanje postojeće strane i fajlova
Odlična konzola za testiranje JavaScripta
Pluginovi za dodatne potrebe

33. Firebug

34. Firebug

35. Napredniji JavaScript
Ozbiljnije biblioteke
Backbone.js, ember.js, angular.js
MVC pristup
Rad sa localstorage-om
RESTful support

36. YAFS?

37. Workshop!