Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web frontendStartup akademija, prva tech radionica
Vuk Nikolić       @vuknikolicAndroid, Java, iOS engineer    www.vuknikolic.rs
Šta je web frontend?
AJAX                               CSS                Modernizr         DOM                  Dojo                 JSONProt...
HTML
HTML - ubrzanoOpisivanje strukture stranicePrikazuje se u browseru (desktop i mobilni)Skup tagova (header, tabela, liste.....
Šta je taj HTML5?Dodatni tagovi (article, header, footer, audio,video...)Dodatne komponente (kalendar, datum,email...)Doda...
HTML = Šema stranice       Poenta priče
CSS
CSS - UbrzanoKako da izgledaju HTML elementiDefinisanje izgleda stranice(pozicija, veličina, boja, fontovi, margine, lejer...
CSS Primer
CSS3?Novi propertiji: Box radius, Drop shadow,Opacity, animacijeMedia queries, font-face, RGBASELECTORS (Begins with, nth-...
CSS3 Primeri Svi elementi sa atributom „href‟ koji počinju sa „„startapakademija.com"•[href^="startapakademija.com"] Trans...
JavaScriptJezik za definisanje funkcionalnosti stranicaIzvršava se u browseruAJAX - učitavanje i menjanje dela straniceRev...
<script type="text/javascript">function notEmpty() {    var myTextField = document.getElementById(myText);    if (myTextFi...
Hvala na pažnji!
Problemi?Različit prikaz u browserima, ako uopšte iprikažu :)Teško i naporno “debugovanje”Sa svakom aplikacijom/sajtom sve...
Rešenja?
Zašto jQuery?CSS SelektoriLako manipulisanje DOMom i efektiOgroman community i brdo pluginovaJednostavanU svim browserima ...
jQuery - primeriDodaj novu klasu za postojeći element•$(„#secion‟).addClass(„newClass‟)Promeni atribut•$(„#myImage‟).attr(...
jQuery pluginsjQuery UI - Gotove komponente i efektiFotogalerije, Navigacija, Tooltipovi, razneKomponente (Accordion), End...
CSS Framework?
CSS Frameworks!Reset “biblioteke” - isti početakGridovi i brzo sklapanje interfejsaResponsive design!Primeri: TwitterBoots...
Responsive design
Twitter BootstrapPodrška za gridoveResponsive designTipografija, tabele, forme, dugmićiDropdown, navigacija, alerts, progr...
Bootstrap teme!
less.jsCSS Pre-Processor?Često ponavljanje istih vrednostiMini template za CSS
less.js primer
ModernizrTestira preko 40 next-gen funkcionalnostibrowseraOlakšava život :)
FirebugNeophodan alatInspekcija HTMLa, CSSa, JavaScripta,internet saobraćajaMenjanje postojeće strane i fajlovaOdlična kon...
Firebug
Firebug
Napredniji JavaScriptOzbiljnije bibliotekeBackbone.js, ember.js, angular.jsMVC pristupRad sa localstorage-omRESTful support
YAFS?
Workshop!
Vuk Nikolić - Web frontend - startap akademija, prva tech radionica
Vuk Nikolić - Web frontend - startap akademija, prva tech radionica
Upcoming SlideShare
Loading in …5
×

Vuk Nikolić - Web frontend - startap akademija, prva tech radionica

586 views

Published on

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.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Vuk Nikolić - Web frontend - startap akademija, prva tech radionica

  1. 1. Web frontendStartup akademija, prva tech radionica
  2. 2. Vuk Nikolić @vuknikolicAndroid, Java, iOS engineer www.vuknikolic.rs
  3. 3. Šta je web frontend?
  4. 4. AJAX CSS Modernizr DOM Dojo JSONPrototype HTML5 API Firebug HTML CSS Grids CSS Pre-ProcessorsJavascript jQuery Responsive Web
  5. 5. HTML
  6. 6. HTML - ubrzanoOpisivanje strukture stranicePrikazuje se u browseru (desktop i mobilni)Skup tagova (header, tabela, liste...)Skup komponenti (textfield, button...)
  7. 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. 8. HTML = Šema stranice Poenta priče
  9. 9. CSS
  10. 10. CSS - UbrzanoKako da izgledaju HTML elementiDefinisanje izgleda stranice(pozicija, veličina, boja, fontovi, margine, lejeri)Razdvajanje izgleda od šeme
  11. 11. CSS Primer
  12. 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. 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. 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. 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. 16. Hvala na pažnji!
  17. 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. 18. Rešenja?
  19. 19. Zašto jQuery?CSS SelektoriLako manipulisanje DOMom i efektiOgroman community i brdo pluginovaJednostavanU svim browserima je OK
  20. 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. 21. jQuery pluginsjQuery UI - Gotove komponente i efektiFotogalerije, Navigacija, Tooltipovi, razneKomponente (Accordion), Endless scroll,Validacije, Modalni prozori...
  22. 22. CSS Framework?
  23. 23. CSS Frameworks!Reset “biblioteke” - isti početakGridovi i brzo sklapanje interfejsaResponsive design!Primeri: TwitterBootstrap, Blueprint, Foundation Zurb, 960grid system
  24. 24. Responsive design
  25. 25. Twitter BootstrapPodrška za gridoveResponsive designTipografija, tabele, forme, dugmićiDropdown, navigacija, alerts, progress barsAli i JavaScript: Tooltip, modal, popoveri
  26. 26. Bootstrap teme!
  27. 27. less.jsCSS Pre-Processor?Često ponavljanje istih vrednostiMini template za CSS
  28. 28. less.js primer
  29. 29. ModernizrTestira preko 40 next-gen funkcionalnostibrowseraOlakšava život :)
  30. 30. FirebugNeophodan alatInspekcija HTMLa, CSSa, JavaScripta,internet saobraćajaMenjanje postojeće strane i fajlovaOdlična konzola za testiranje JavaScriptaPluginovi za dodatne potrebe
  31. 31. Firebug
  32. 32. Firebug
  33. 33. Napredniji JavaScriptOzbiljnije bibliotekeBackbone.js, ember.js, angular.jsMVC pristupRad sa localstorage-omRESTful support
  34. 34. YAFS?
  35. 35. Workshop!

×