1.
Web frontendStartup akademija, prva tech radionica

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

3.
Šta je web frontend?

4.
AJAX CSS Modernizr DOM Dojo JSONPrototype HTML5 API Firebug HTML CSS Grids CSS Pre-ProcessorsJavascript jQuery Responsive Web

5.
HTML

6.
HTML - ubrzanoOpisivanje strukture stranicePrikazuje 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 - UbrzanoKako da izgledaju HTML elementiDefinisanje 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, animacijeMedia queries, font-face, RGBASELECTORS (Begins with, nth-child, only-child, empty, not, checked)Animacije (2D i 3D), transformacijePomagač: 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.
JavaScriptJezik za definisanje funkcionalnosti stranicaIzvršava se u browseruAJAX - učitavanje i menjanje dela straniceRevolucija 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 iprikažu :)Teško i naporno “debugovanje”Sa svakom aplikacijom/sajtom sve iznova,standardni problemiKombinovanje HTML, CSS i JSa u jednomfajlu

18.
Rešenja?

19.
Zašto jQuery?CSS SelektoriLako manipulisanje DOMom i efektiOgroman community i brdo pluginovaJednostavanU svim browserima je OK

20.
jQuery - primeriDodaj 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 pluginsjQuery UI - Gotove komponente i efektiFotogalerije, Navigacija, Tooltipovi, razneKomponente (Accordion), Endless scroll,Validacije, Modalni prozori...

22.
CSS Framework?

23.
CSS Frameworks!Reset “biblioteke” - isti početakGridovi i brzo sklapanje interfejsaResponsive design!Primeri: TwitterBootstrap, Blueprint, Foundation Zurb, 960grid system

24.
Responsive design

25.
Twitter BootstrapPodrška za gridoveResponsive designTipografija, tabele, forme, dugmićiDropdown, navigacija, alerts, progress barsAli i JavaScript: Tooltip, modal, popoveri

26.
Bootstrap teme!

27.
less.jsCSS Pre-Processor?Često ponavljanje istih vrednostiMini template za CSS

28.
less.js primer

29.
ModernizrTestira preko 40 next-gen funkcionalnostibrowseraOlakšava život :)

30.
FirebugNeophodan alatInspekcija HTMLa, CSSa, JavaScripta,internet saobraćajaMenjanje postojeće strane i fajlovaOdlična konzola za testiranje JavaScriptaPluginovi za dodatne potrebe

31.
Firebug

32.
Firebug

33.
Napredniji JavaScriptOzbiljnije bibliotekeBackbone.js, ember.js, angular.jsMVC pristupRad sa localstorage-omRESTful support

34.
YAFS?

35.
Workshop!