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.

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

663 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
  • If you need your papers to be written and if you are not that kind of person who likes to do researches and analyze something - you should definitely contact these guys! They are awesome ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • These are one of the best companies for review articles. High quality with cheap rates. ⇒⇒⇒WRITE-MY-PAPER.net ⇐⇐⇐ I highly recommend it :)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • 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!

×