Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
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
Próxima SlideShare
Cargando en…5
×

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

661 visualizaciones

Publicado el

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.

Publicado en: Tecnología
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

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!

×