Cilj predmeta jeste dizajn dinamičkih veb strana koje uključuju interakciju korisnika. Cilj predmeta jeste dizajn dinamičkih veb strana koje uključuju interakciju korisnika

transitional.dtd">

href="text.css" />

article za izdvojene celine koje se mogu nezavisno koristiti na drugim stranicama i sajtovima. Npr. za vesti, blogove i slično.

• article za izdvojene celine koje se mogu nezavisno koristiti na drugim stranicama i sajtovima. Npr. za vesti, blogove i slično.

• footer je element na dnu stranice

• figure element koji sadrži sliku i njen naslov

• figcaption naslov slike

• nav element sa navigacijom

• ...

Definiše detalje koje korisnik može da otvori ili zatvori.

• Definiše detalje koje korisnik može da otvori ili zatvori.

• Copyright 1999-2017

• 
  Sva prava pripadaju Politikinom Zabavniku.
  

• 
  Sav sadržaj na ovom sajtu su zaštićena i ne mogu se preuzimati.
  

Copyright 1999-2017

• Copyright 1999-2017

• Copyright 1999-2017

• Sva prava pripadaju Politikinom Zabavniku.

• Sav sadržaj na ovom sajtu su zaštićena i ne mogu se preuzimati.

datalist za biranje ponuđene opcije ili unosa proizvoljne opcije

• datalist za biranje ponuđene opcije ili unosa proizvoljne opcije

• output je element u kome se izračunava rezultat neke operacije, atribut for specificira operande, a atribut forms formulare koji koriste ovaj element

• keygen element koji generiše privatni i javni ključ korisnika. Javni ključ se šalje serveru, a privatni ostaje u brauzeru. Ali ovaj element se razmatra...

Umesto elementa select, opcije su samo sugestije, korisnik može da unese bilo šta u polje

• Umesto elementa select, opcije su samo sugestije, korisnik može da unese bilo šta u polje

video sadrži video aplikaciju, atributi su:

• video sadrži video aplikaciju, atributi su:

• autoplay, controls, height, loop, muted, poster, preload, src, width

• audio sadrži audio aplikaciju, atributi su:

• autoplay, controls, loop, muted, preload, src

• source navodi lokaciju i fajl multimedijalnog sadržaja, osobine su:

• src, media (ispituje uređaj), sizes (različite veličine za različite uređaje), type (MIME format)

• Vaš brauzer ne podržava HTML video.

• 
  

• Video možete naći na strani

• Veliki zec.

• 
  

x">

• x">

• date - daje kalendar za biranje datuma. Nije svuda podržan.

• datetime-local – daje kalendar, i polje za upis vremena

• month – daje kalendar, ali se upisuje samo mesec

• email – javlja grešku ako nije dobar format e-maila

• number – nudi brojeve kao opciju za unos

• URL – javlja grešku ako nije URL

atribut=“x">

• atribut=“x">

• atribut>

• autocomplete – ako je “on” popunjavaće se prethodne vrednosti

• novalidate – isključuje validaciju formulara

atribut=“x">

• atribut=“x">

• autocomplete – ako je “on” popunjavaće se prethodne vrednosti

• form – formulari kojima pripada polje

• formaction – fajl koji procesira partikularno polje, može biti različit nego za formular

• formenctype – tip podataka za polje

• formmethod – metoda za dato polje

• formnovalidate – isključuje validaciju

• formtarget - _blank otvara novi prozor

atribut=“x">

• atribut=“x">

• height, width

• min, max – kod unose brojeva, datuma

• list – lista opcija koja se preporučuje u dataset elementu

• multiple – unos više fajlova

• pattern – provera da li unos odgovara datom uzorku

• placeholder – početni tekst koji ukazuje na unos – sam se obriše kad počnemo da kucamo

• required

• step – korak brojeva koji su na raspolaganju

Dodate su JavaScript osobine i metode HTML objekata koje implementiraju razne funkcije:

• Dodate su JavaScript osobine i metode HTML objekata koje implementiraju razne funkcije:

• Određivanje geolokacije
• Pomeranje elemenata na stranici (drag/drop)
• Keširanje
• Asinhrona obrada podataka
• Grafički dizajn
• Google mape

CSS3 osobine unapređuju izgled stranice

• CSS3 osobine unapređuju izgled stranice

• Uobljavanje ćoškova
• Okviri od slika
• Prelivanje boja
• Senke koje daju dimenziju
• Tranzicije i animacije
• Više kolona
• Dimenzije blokova
• Medija upiti
• ...

se vrši preko osobine border-radius

• se vrši preko osobine border-radius

• .zcoshkovi {

• border-radius: 25px;

• background: red;

• text-align:center;

• padding-top:25px;

• width: 200px;

• height: 50px;

• }

Se vrši pomoću osobina linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient. Prvi argument je opcioni i označava smer gradijenta, može biti navedeno više boja.

• Se vrši pomoću osobina linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient. Prvi argument je opcioni i označava smer gradijenta, može biti navedeno više boja.

• #grad {

• height: 200px;

• background: red; /* For browsers that do not support gradients */

• background: -webkit-linear-gradient(left, red , yellow); /* For Safari 5.1 to 6.0 */

• background: -o-linear-gradient(right, red, yellow); /* For Opera 11.1 to 12.0 */

• background: -moz-linear-gradient(right, red, yellow); /* For Firefox 3.6 to 15 */

• background: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */

• }

• 
  

Se implementiraju pomoću osobine box-shadow

• Se implementiraju pomoću osobine box-shadow

• div {

• width: 300px;

• height: 100px;

• padding: 15px;

• background-color: yellow;

• box-shadow: 10px 10px 5px grey;}

• Ovo je div elemenat sa box-shadow

• Ili osobine text-box

• h1 {     text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;}

• Text-shadow efekat!

Mogu se odrediti različite osobine za isti element u nekom periodu, usled nekog događaja

• Mogu se odrediti različite osobine za isti element u nekom periodu, usled nekog događaja

• Tranzicija nastaje kada se promeni neka osobina

• div {     width: 100px;     height: 100px;     background: red;     -webkit-transition: width 2s; /* Safari */     transition: width 2s; }

• div:hover {     width: 300px; }

Animacija

• Animacija

• div {width: 100px;

• height: 100px;

• background-color: red;

• position: relative;

• -webkit-animation-name: primer; /* Safari 4.0 - 8.0 */

• -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */

• -webkit-animation-iteration-count: 3; /* Safari 4.0 - 8.0 */

• animation-name: primer;

• animation-duration: 4s;

• animation-iteration-count: 3;}

• /* Safari 4.0 - 8.0 */

• @-webkit-keyframes primer{

• 0% {background-color:red; left:0px; top:0px;}

• 25% {background-color:yellow; left:200px; top:0px;}

• 50% {background-color:blue; left:200px; top:200px;}

• 75% {background-color:green; left:0px; top:200px;}

• 100% {background-color:red; left:0px; top:0px;}}

• /* Standard syntax */

• @keyframes primer {

• 0% {background-color:red; left:0px; top:0px;}

• 25% {background-color:yellow; left:200px; top:0px;}

• 50% {background-color:blue; left:200px; top:200px;}

• 75% {background-color:green; left:0px; top:200px;}

• 100% {background-color:red; left:0px; top:0px;}}

Tekst u više kolona se može implementirati pomoću osobina column-count, column-gap, column-span, column-rule-color,...

• Tekst u više kolona se može implementirati pomoću osobina column-count, column-gap, column-span, column-rule-color,...

• Preletačević u svom maniru smelo objavljuje da je "za samo tri sata, skupio rekordnih 46.000 potpisa". Malo neverovatno, zar ne?

• 
  

• - Danas u 9. sati smo u Mladenovcu počeli sa sakupljanjem potpisa. Odziv građana je sjajan. Za tri sata skupili smo 46.000 potpisa, a ići ćemo danas do 100.000! Od ponedeljka krećemo dalje po Srbiji. Organizovaćemo sakupljanje potpisa u Beogradu, Novom Sadu, Kragujevcu... - kaže Beli.

• 
  

• 
  

• Beli, koji je u politiku ušao prošle godine kada je napravio izborni bum u Mladenovcu, kaže da će verifikacija potpisa ići teško.

• 
  

• 
  

• - Notara je malo i svi su naprasno zauzeti, ali mi ne odustajemo - kaže Beli.

• 
  
  
  
  

  Uobičajeno se veličine margin, border-width, i padding sabiraju na širinu elementa.

  • Uobičajeno se veličine margin, border-width, i padding sabiraju na širinu elementa.

  • Kada se koristi box-sizing CSS3 osobina, širina uključuje padding, mаrgin i border-width

  
  
  

  .div1 {

  • .div1 {

  • width: 300px;

  • height: 100px;

  • border: 5px solid blue;}

  • .div2 {

  • width: 300px;

  • height: 100px;

  • padding: 50px;

  • border: 1px solid red;}

  • …

  • Divovi nemaju iste veličine!

  • 
    

  • Jer se padding i border dodaju!

  
  
  

  .div1 {

  • .div1 {

  • width: 300px;

  • height: 100px;

  • border: 5px solid blue;

  • box-sizing: border-box;}

  • .div2 {

  • width: 300px;

  • height: 100px;

  • padding: 50px;

  • border: 1px solid red;

  • box-sizing: border-box;}

  • …

  • Oba diva imaju istu veličinu!

  • 
    

  • Zbog box-sizing osobine!

  
  
  

  CSS3 osobine se mogu definisati samo za određene uređaje, i/ili određene osobine uređaja koristeći medija upite (media query) pomoću komande @media

  • CSS3 osobine se mogu definisati samo za određene uređaje, i/ili određene osobine uređaja koristeći medija upite (media query) pomoću komande @media

  • Medija upiti sadrže logičke izraze koji uključuju specifikaciju uređaja i njihovih osobina

  • Specifikacija, i puna sintaksa se može naći na linku

  • https://www.w3.org/TR/css3-mediaqueries/

  
  
  

  media_query_list: [, ]*

  • media_query_list: [, ]*

  • media_query: [[only | not]? [ and ]*] | [ and ]*

  • expression: ( [: ]? )

  • media_type: all | print | screen | speech

  • media_feature: width | min-width | max-width | height | max-device-width | min-device-width | min-height | max-height | max-device-height | min-device-height | aspect-ratio | min-aspect-ratio | max-aspect-ratio | max-device-aspect-ratio | color | min-color | max-color | color-index | min-color-index | max-color-index | monochrome | min-monochrome | max-monochrome | resolution | min-resolution | max-resolution | scan | grid

  • ? – 0 ili 1 put, * - 0 ili više puta

  
  
  

  width je širina sadržaja, a device-width ukupna širina ekrana uređaja

  • width je širina sadržaja, a device-width ukupna širina ekrana uređaja

  • color broj bita za boju, a color-index ukupan broj različitih boja

  • aspect-ratio je odnos širine i visine sadržaja

  • grid označava tip uređaja da li je grid (ograničenih mogućnosti) ili bitmap

  • scan označava različite formate video signala

  
  
  

  @media screen and (max-width: 699px) and (min-width: 520px) {

  • @media screen and (max-width: 699px) and (min-width: 520px) {

  • ul li a.email {

  • padding-left: 30px;

  • background: url(email-icon.png) left center no-repeat;

  • }

  • }

  • @media screen and (min-width: 700px) {

  • ul li a.email:before {

  • content: "Email: ";

  • font-style: italic;

  • color: #777777;

  • }

  • }