Vuk Nikolić - Web frontend - startap akademija, prva tech radionica
-
Upload
startap-akademija -
Category
Technology
-
view
543 -
download
0
description
Transcript of Vuk Nikolić - Web frontend - startap akademija, prva tech radionica
Web frontendStartup akademija, prva tech radionica
Šta je web frontend?
HTML
CSS
Javascript
AJAX
jQuery
Prototype
Dojo
Modernizr
CSS GridsFirebug
Responsive Web
DOM
CSS Pre-Processors
JSON
HTML5 API
HTML
HTML - ubrzano
Opisivanje strukture stranice
Prikazuje se u browseru (desktop i mobilni)
Skup tagova (header, tabela, liste...)
Skup komponenti (textfield, button...)
Š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!
HTML = Šema stranice
Poenta priče
CSS
CSS - Ubrzano
Kako da izgledaju HTML elementi
Definisanje izgleda stranice (pozicija, veličina, boja, fontovi, margine, lejeri)
Razdvajanje izgleda od šeme
CSS Primer
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/
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) { ... }
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
JavaScript Primer
<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>
Hvala na pažnji!
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
Rešenja?
Zašto jQuery?
CSS Selektori
Lako manipulisanje DOMom i efekti
Ogroman community i brdo pluginova
Jednostavan
U svim browserima je OK
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’)
jQuery plugins
jQuery UI - Gotove komponente i efekti
Fotogalerije, Navigacija, Tooltipovi, razne Komponente (Accordion), Endless scroll, Validacije, Modalni prozori...
CSS Framework?
CSS Frameworks!
Reset “biblioteke” - isti početak
Gridovi i brzo sklapanje interfejsa
Responsive design!
Primeri: Twitter Bootstrap, Blueprint, Foundation Zurb, 960 grid system
Responsive design
Twitter Bootstrap
Podrška za gridove
Responsive design
Tipografija, tabele, forme, dugmići
Dropdown, navigacija, alerts, progress bars
Ali i JavaScript: Tooltip, modal, popoveri
Bootstrap teme!
less.js
CSS Pre-Processor?
Često ponavljanje istih vrednosti
Mini template za CSS
less.js primer
Modernizr
Testira preko 40 next-gen funkcionalnosti browsera
Olakšava život :)
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
Firebug
Firebug
Napredniji JavaScript
Ozbiljnije biblioteke
Backbone.js, ember.js, angular.js
MVC pristup
Rad sa localstorage-om
RESTful support
YAFS?
Workshop!