Css html skripta koja se radi tako, Beleške od Informacioni sistemi

Preuzmite Css html skripta koja se radi tako i više Beleške u PDF od Informacioni sistemi samo na Docsity!

UNIVERZITET U BEOGRADU

FAKULTET ORGANIZACIONIH NAUKA

KATEDRA ZA ELEKTRONSKO POSLOVANJE

HTML5 i napredne CSS

funkcionalnosti

Beograd, 2014.

Sadržaj

• Uvod............................................................................................................................................
• Novi semantički/strukturni elementi..............................................................................................
• Novi media elementi..................................................................................................................
  • Video......................................................................................................................................
  • Audio......................................................................................................................................
  • Input type – color....................................................................................................................
  • Input type – date.....................................................................................................................
  • Input type - email....................................................................................................................
  • Input type – number...............................................................................................................
  • Input type – range..................................................................................................................
  • Input type – url.......................................................................................................................
  • Atributi za fome i input polja...................................................................................................
  • Autocomplete atribut..............................................................................................................
  • Novalidate atribut...................................................................................................................
  • Autofocus atribut....................................................................................................................
  • Form atribut............................................................................................................................
  • Formaction atribut..................................................................................................................
  • Formenctype atribut...............................................................................................................
  • Formmethod atribut................................................................................................................
  • Formnovalidate atribut............................................................................................................
  • Formtarget atribut...................................................................................................................
  • Height i width atributi..............................................................................................................
  • List atribut...............................................................................................................................
  • Min i max atributi....................................................................................................................
  • Multiple atribut........................................................................................................................
  • Pattern atribut.........................................................................................................................
  • Placeholder atribut.................................................................................................................
  • Required atribut......................................................................................................................
  • Step atribut.............................................................................................................................
    • Drag and Drop.......................................................................................................................
• Grafika.......................................................................................................................................
  • Inline SVG..............................................................................................................................
• Web Storage..............................................................................................................................
  • Local and session storage......................................................................................................
  • Local storage objekat.............................................................................................................
  • Session storage objekat.........................................................................................................
  • Application Cache..................................................................................................................
• Web Worker...............................................................................................................................
  • Server-Sent events.................................................................................................................
• CSS3.........................................................................................................................................
  • Borders...................................................................................................................................
    • Zaobljenje ivice...................................................................................................................
  • Box Shadow...........................................................................................................................
  • Border images........................................................................................................................
  • Backgrounds..........................................................................................................................
    • Background-size svojstvo...................................................................................................
    • Background-origin svojstvo.................................................................................................
    • Multiple background images...............................................................................................
    • Linear gradient....................................................................................................................
  • Text Effects............................................................................................................................
  • Text-shadow svojstvo.............................................................................................................
  • Word-wrap svojstvo................................................................................................................
  • Web fontovi............................................................................................................................
  • 2D Transformacije..................................................................................................................
    • Metoda translate()...............................................................................................................
    • Metoda rotate()...................................................................................................................
    • Metoda scale()....................................................................................................................
    • Metoda skew()....................................................................................................................
    • Metoda matrix()...................................................................................................................
    • 2D metode..........................................................................................................................
  • 3D Transformacije..................................................................................................................
    • Metoda rotateX().................................................................................................................
    • Metoda rotateY().................................................................................................................
  • 3D metode..............................................................................................................................
  • Tranzicije................................................................................................................................
  • Animacije................................................................................................................................
  • Multiple columns.....................................................................................................................
  • CSS3 Selektori.......................................................................................................................
• Primena u praksi – sajt “Fashion”..............................................................................................
  • Image slider............................................................................................................................
  • Local storage..........................................................................................................................
    • HTML kod i Javascript........................................................................................................
  • Drag and drop........................................................................................................................
  • Canvas i border-image svojstvo.............................................................................................
  • Multiple columns i element1~element2 selektor.....................................................................
  • Video element........................................................................................................................
  • Image accordion.....................................................................................................................
  • Metoda scale()........................................................................................................................
  • Selektor first-of-type i @font-face...........................................................................................
  • Novi input element i atributi....................................................................................................
• Zaključak....................................................................................................................................
• Literatura....................................................................................................................................

Uvod U ovoj skripti biće objašnjene nove tehnologije, koje su još uvek pod razvojem, HTML5 i CSS3. Skripta je podeljena na dva dela: prvi deo koji se odnosi na HTML5-icu i drugi deo koji se odnosi na CSS3-ojku. Oba dela sastoje se iz više poglavlja u kojima su detaljnije objašnjene nove funkcionalnosti dodate prethodnim verzijama html-a i css-a (HTML4 i CSS2). Prvi deo sadrži kratak uvod u standard HTML5, izbačene elemente iz prethodne verzije, nove semantičke elemente i podržanost standarda u internet pretraživačima. Detaljnije su objašnjeni novi elementi kao što su canvas, SVG, drag and drop, video i audio tag, novi input elementi, novi atributi za input elemente i element forme. Takođe su objašnjene nove funkcionalnosti kao što su web storage, application cashe, web worker i server-sent events. Drugi deo takođe sadrži kratak uvod u novi standard CSS3 i nova border i background svojstva. Objašnjeni su novi tekstualni efekti i korišćenje web fontova. Takođe su objašnjene nove 2D i 3D transformacije, tranzicije i animacije koje omogućavaju dinamiku nad html elementima. Objašnjeno je i novo multiple-column svojstvo koji deli tekst na više kolona. Na kraju su pojedinačno objašnjeni novi css selektori. HTML5 je jezik koji se koristi za strukturiranje i prezentovanje sadržaja za World Wide Web i predstavlja osnovnu tehnologiju Interneta. HTML5 je peta revizija HTML standarda koja se i dalje dopunjuje i razvija. Osnovni ciljevi razvijanja ove poslednje verzije HTML-a su poboljšanje jezika sa podrškom za multimedije koji će biti razumljiv za ljude, ali isto tako i za kompjutere i uređaje (web pretraživače, parsere...). HTML5 je potencijalni kandidat za „cross-platform“ mobilne aplikacije pošto su mnoge osobine HTML5 pravljene tako da budu u mogućnosti da se pokrenu na uređajima male snage kao što su smart telefoni i tableti.

Iako je W3C počeo sam da razvija HTML5-icu, može se reći da je HTML5 proizvod

saradnje W3 Konzorciuma i WHATWG. HTML5 je još uvek u fazi razvoja, tako da njegovu

standardizaciju možemo očekivati 2014 godine, po procenama W3 Konzorciuma. Kao peta

verzija HTML-a osnovni cilj je bio unapređenje ovog jezika, kao i podrška za najnovije

multimedijalne sadrţaje, a pri tome je cross-platform, tako da nije bitno da li koristite tablet,

smartphone, netbook ili Smart TV, bitno je da vaš pretraţivač podrţava HTML5.

HTML5 je namenjen da prevaziđe ne samo HTML4, nego XHTML1 i HTML DOM.

WHATWG je radio na web formama i aplikacijama, dok je W3C radio na XHTML 2.0. 2006.

godine su počeli zajedničku saradnju. Tako da se HTML5 može smatrati mešavinom

karakteristika i specifikacija HTML-a i XHTML-a. Ovome je doprinela zajednička praksa, kao

i mnoge greške u postojećim web dokumentima, ovo je takođe i pokušaj da se definiše

jedinstveni markup jezik, koji se moţe pisati i u HTML-u i u XHTML-u. Ovo uključuje detaljne

procesne modele da bi ohrabrilo još interoperabilnih implementacija. To proširuje,

unapređuje i racionalizuje označavanje dokumenata, kao što je omogućen i API (application

programming interfaces), za kompleksne web aplikacije. Trenutno postoje dve paralelne

verzije HTML 5, jedna sluţbena na kojoj radi W3C i nesluţbenu na kojoj rade stručnjaci iz

Applea, Mozille, Opere i Googlea, koji imaju velik uticaj na razvoj Interneta, iako iza sebe

nemaju formalnu organizaciju kao što je W3C. Ipak, urednici HTML 5 specifikacije za oba

tima su isti ljudi, što znači da grupe meĎusobno saraĎuju i da ćemo na kraju ipak imati

Ali većina većih browser-a (Safari, Chrome, Firefox, Opera, Internet Explorer) nastavljaju da dodaju nove karakteristike svojim poslednjim verzijama. HTML5 , meta i html tag Svi HTML dokumenti moraju početi sa deklaracijom i HTML5 nije izuzetak osim u jednoj stvari – jednostavnosti. Ranija html deklaracija izledala je na sledeći način:

HTML5 deklaracija je veoma jednostavna i glasi:

---

Dalje, umesto meta taga koji je izledao:

sa HTML-icom, meta tag izgleda na sledeći način:

---

I na kraju, html tag sa atributima ranije je izgledao:

a sada izgleda na sledeći način: ** Novi semantički/strukturni elementi**

Za početak priče je najbolje pogledati strukturu nove HTML 5 stranice. Bez dodatnih klasa i

objekata (Slika 1).

Slika 1. Struktura stranice HTML5 uvodi nove elemente radi boljeg strukturiranja koji su prikazani u sledećoj tabeli i ukratko opisani: Tag Opis Definiše članak Definiše sadržaj koji se nalazi sa strane u odnosu na sadržaj stranice Izdvaja deo teksta koji može biti formatiran na drugačiji način od drugog teksta izvan njega Definiše komandno dugme koje korisnik može da pozove Definiše dodatne detalje koje korisnik može da vidi ili sakrije Definiše vidljiv naslov za element Određuje prostor za sadržaje kao što su ilustracije, dijagrami, slike itd. Definiše naslov za element Definiše futer za dokument ili sekciju. Najčešće sadrži informacije o autoru, pravima, kontaktu itd. Definiše heder za dokument ili sekciju Definiše skup od do elemenata kada se naslov sastoji iz više nivoa Definiše označen (markiran) teks Definiše skalarno merenje unutar poznatog opsega Definiše linkove za navigaciju Prikazuje napredak zadatka Definiše “ruby” anotaciju (za Istočnoazijsku tipografiju) Definiše objašnjenje karaktera (za Istočnoazijsku tipografiju) Definiše šta da se prikaže u pretraživačima koji ne podržavaju ruby anotaciju Definiše sekciju u dokumentu

Novi media elementi HTML5 nudi nove elemente za multimedijalni sadržaj: Tag Opis Definiše zvučni sadržaj Definiše video ili film Definiše resurse za i Definiše kontejner za eksterne aplikacije ili interaktivni sadržaj (plug-in) Definiše tekst (prevod, naslov,opis…) za ili Video Većina video snimaka na web stranama se prikazuje korišćenjem plugin-ova (kao što je na

primer flash). Do sada su vam bili potrebni razni dodaci (plug-ins), Apple QuickTime,

RealPlayer ili Adobe Flash, koji su ugrađeni u pretraživače. Međutim, HTML5 uvodi novi

tag preko kojeg se može veoma jednostavno uključiti video snimak bez korišćenja

plugin-ova. Internet Explorer 8 i ranije verzije ne podržavaju video tag. Podrška za ovaj

element je u razvoju, tako da ga ne podržavaju svi pretraživači još uvek, ali se radi na tome.

Najveći problem je u usaglašavanju formata. HTML 5 podržava .ogg, .mpeg4 i .webM, dok

je ostale formate potrebno konvertovati.

Za prikazivanje videa na web strani, u html kod potrebno je ubaciti:

Your browser does not support the video tag.

Atribut controls dodaje dugmiće za kontrolu videa kao što su play, pause i volume. Dobra praksa je da se uvek uključe width i height atributi jer se onda rezerviše prostor predviđen za video kada se stranica učita. Bez ovih atributa, internet pretraživač ne zna veličinu videa i ne može da zauzme odgovarujići prostor za njega. Posledica toga bi bila promena layout-a stranice tokom učitavanja videa. Takođe je poželjno postaviti tekst između i tagova koji će se prikazati umesto video u onim pretraživačima koji ne podržavaju tag. Video tag zahteva unutar sebe više tagova koji će linkovati na različite video fajlove, a onda će browser iskoristiti prvi format koji prepoznaje. Trenutno, postoje 3 podržana video formata za element: : MP4, WebM i Ogg. DOM metode, svojstva i događaji

HTML5 sadrži DOM metode, svojstva i događaje za i elemente koji omogućavaju njihovu manipulaciju preko Javascript-a. Na primer, postoje metode za puštanje, pauziranje i učitavanje videa i svojstva kao što su trajanje i jačina zvuka. Takođe postoje i događaji koji se okidaju kada video element počne da se pušta, pauzira se, kad se završi itd. Sledeći primer (Primer 11) ilustruje način korišćenja video taga, čitanje i postavljanje svojstava i poziv metoda. Primer 11: Potrebno je kreirati jednostavne play/pause + resize kontrole za video.

Play/Pause Big Small Normal

Your browser does not support HTML5 video.

Atributi video taga Atribut Vrednost Opis autoplay autoplay Navodi da će video početi da se pušta čim bude spreman controls controls Određuje koje kontrole za video će biti prikazane (kao što su play/pause dugme itd). height pixels Postavlja visinu video plejera

Atribut Vrednost Opis media media_query Navodi tip resursa src URL Određuje URL adresu fajla type MIME_type Navodi MIME type resursa Forme – elementi, atributi i input types Tokom izrade web stranica samo pravljenje forme nikada nije bio problem koliko validacija unešenih podataka. Na raspolaganju smo imali nekoliko tipova elemenata formi (text, checkbox, radio button, popup list...), koji su najverovatnije u trenutku u kome su definisani bili dovoljni, međutim, sa brzom ekspanizijom broja korisnika interneta i tolikom količinom online servisa, forme su postajale sve korišćenije. Danas, na primer, po registraciji na neku od drštvenih mreža očekuje vas par dodatnih koraka i popunjavanje na desetine podataka. Ti podaci uglavnom su različitog tipa, počev od imena i prezimena, potom mail adrese, web sajta, pa sve do datuma rođenja, omiljene boje itd. Najčešće korišćena komponenta web formi bila je textbox koja je mogla imati jedno jedino ograničenje, maksimalni uneti broj karaktera. A bilo ih je potrebno mnogo više. Samo oni koji su pisali skripte za pomenutu validaciju podataka u formama znaju koliko je to zamoran posao. HTML5 uvodi nekoloko novih “input” tipova koji omogućavaju bolju kontrolu unosa podataka i validaciju. Novi input elementi su:  color  date  datetime  datetime-local  email  month  number  range  search  tel  time  url  week Input type – color Color type se koristi za polja koja treba da sadrže boju u sebi. Primer 12: Izaberi svoju omiljenu boju:

Rezultat ove linije koda je: Klikom na ovo polje, otvara se paleta boja odakle se može izvršiti izbor boje. Input type – date Date polje omogućava korisniku da izabere željeni datum. Pimer 13: Datum rođenja: Input type - email Email polje koristi se za unos e-mail adrese od strane korisnika. Ukoliko korisnik ne unese e- mail adresu u ispravnom formatu, pojavljuje se upozorenje korisniku, kao što je prikazano na slici ispod. Primer 14: E-mail:

Input type – number Number type se koristi za ona polja koja treba da sadrže numeričku vrednost. Ukoliko je potrebno mogu se postaviti ograničenja kao što su min, max, step, value.  max – postavlja najveću dozvoljenu vrednost  min - postavlja najmanju dozvoljenu vrednost

Novi atributi za :  autocomplete  autofocus  form  formaction  formenctype  formmethod  formnovalidate  formtarget  height i width  list  min i max  multiple  pattern (regexp)  placeholder  required  step Autocomplete atribut Autocomplete atribut odnosi se i na form i na input elemente (text, search, url, tel, email, password, datepickers, range, color) i može imati dve vrednosti: on ili off. Kada je vrednost postavljena na “on”, browser automatski nudi vrednosti koje je korisnik ranije unosio. Moguće je uključiti autocomplete za formu, a isključiti ga za određena input polja, i obrnuto. Primer 18:

First name:
Last name:
E-mail:

Novalidate atribut Novalidate je boolean atribut koji se odnosi na formu i kada je uključen, određuje da podaci u formi ne bi trebalo da se validiraju kada se forma submit-uje. Primer 19:

E-mail:

Autofocus atribut

Autofocus atribut je Boolean vrednost koji omogućuje fokus kursora na ono input polje u kojem je ovaj atribut uključen. U primeru ispod, kada se stranica učita, fokus će biti na polju “First name”. Primer 20: First name: Form atribut Form atribut koristi se za povezivanje input polja sa formom, kada se to input polje nalazi izvan HTML koda forme. Ukoliko input polje treba povezati sa više formi, za vrednost form atributa navode se “id“ vrednosti formi odvojene space-om. Primer 21:

First name:

Last name: Formaction atribut Formaction atribut definiše url fajla koji će se izvršiti kada se forma submit-uje. Ovaj atribut zamenjuje action atribut koji je definisan u form elementu. Može se koristiti uz input type “submit” i “image”. Primer ispod prikazuje kako dva submit dugmeta pozivaju različite akcije. Primer 22:

First name:
Last name:

Formenctype atribut Formenctype atribut određuje način na koji podaci iz forme treba da se kodiraju kada se dostavljaju serveru (važi samo za “post” metod). Ovaj atribut zamenjuje enctype atribut elementa forme. može se koristiti u kombinaciji sa input poljima tipa “submit” i “image”. U sledećem primeru prvo submit dugme se kodira na podrazumevan način, dok se drugo dugme kodira kao multipart/form-data. Primer 23:

Height i width atributi Height i width atributi definišu širinu i visinu input elementa. Mogu se koristiti samo uz . Uvek treba uključiti width i height attribute jer se onda rezerviše prostor predviđen za sliku kada se stranica učita. Bez ovih atributa, internet pretraživač ne zna veličinu slike i ne može da zauzme odgovarujići prostor za njega. Posledica toga bi bila promena layout- a stranice tokom učitavanja slike. Primer 27:

List atribut List element odnosi se na element koji postavlja predefinisane opcije za element. Koristi se da omogući “autocomplete” svojstvo za input elemente, tako da će korisnik prilikom unošenja podataka u input polje dobiti padajuću listu predefinisanih opcija iz koje će moći da odabere željenu vrednost. Povezivanje input polja sa datalist elementom vrši se uz pomoć “list” atributa elementa input. Primer 28:

Min i max atributi Min i max atributi definišu minimalnu i maksimalnu vrednost za input element. Koriste se uz sledeće input tipove: number, range, date, datetime, datetime-local, month, time i week. Primer 29:

Enter a date before 1980-01-01:

Enter a date after 2000-01-01:

Quantity (between 1 and 5):

Multiple atribut Multiple atribut je Boolean vrednost. Kada je uključen, definiše mogućnost unosa više od jedne vrednosti od strane korisnika u input element. Ovaj atribut može se koristiti uz email i file tipove. Primer 30: Select images: Pattern atribut Pattern atribut definiše format unosa podataka u input polje (text, search, url, tel, email i password) koje mora biti ispunjeno. Primer 31: Input polje može da sadrži samo tri slova (ne sme brojeve ili specijalne karaktere). Country code: Placeholder atribut Placeholder atribut definiše kratki nagoveštaj korisniku kakva je očekivana vrednost input polja koji se prikazuje u input polju kada je ono prazno i nestaje kada je polje u fokusu. Može se koristiti uz sledeće input tipove: text, search, url, tel, email i password. Primer 32:

Required atribut Required atribut je Boolean atribut koji kada je uključen označava da u input polje mora biti uneta neka vrednost pre submit-ovanja forme. Koristi se uz sledeće input tipove: text, search, url, tel, email, password, date pickers, number, checkbox, radio i file. Primer 33: