Web frontendStartup akademija, prva tech radionica

Vuk Nikolić@vuknikolic

Android, Java, iOS engineerwww.vuknikolic.rs

Š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!