WEB Dizajn Tutorijali

4

WEB Dizajn Tutorijali

offline
  • Pridružio: 17 Jun 2012
  • Poruke: 31
  • Gde živiš: Beograd

ilovephp ::Pozdrav!
Sajt je još uvek u izradi pa tako nije na internetu-još uvek. Za sada sve o web dizajnu možeš pratiti u ovoj temi! Ziveli


Ja trenutno ucim HTML5 i CSS3 (Lynda) Very Happy tako da sam raspolozen da pomognem u skorije vreme.



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

HTML 5 Audio Player

Verovatno sve bar jednom poželeli da postavite neki zvuk ili muziku na svoj sajt. U ovom tutorijalu naučićemo kako da postavimo muzika na web sajt pomoću korišćenja običnog html bez dodatnih elemenata (skripta i slično). Koristićemo najnoviju verziju html, HTML5!

Za dodavanje audio player-a na web sajt, koristićemo sledeći kod:
Citat:
<audio controls>
<source src="zvuk.ogg" type="audio/ogg">
<source src="zvuk.mp3" type="audio/mpeg">
Vaš brauzer ne podržava ovaj audio player.
</audio>


Arrow Pojašnjenje koda:

Koristićemo oznaku <audio> , </audio>

Kao što vidite u kodu se nalaze dva audio fajla, zašto? Odgvor je jednostavan, pošto je HTML5 novija verzija HTML koja se još uvek razvija, ne mogu svi brauzeri da je prikažu kako treba. Više vrsta fajlova (.ogg, .mp3) radi kompatibilnosti sa brauzerima. Internet explorer 8 i ranije verzije ovog brauzera, ne podržavaju html 5 audio player.

U suprotnom, ako brauzer ne podržava HTML5 audio player, biće prikazana poruka koja je definisan prek kraj samo koda (pred kraj audio elementa).

Formati koje podržava ovaj HTML5 audio player su .ogg , .mp3 i .wav

Arrow Prikaz playera na različitim brauzerima:

Chrome



Firefox



Internet Explorer 9



Do sledećeg posta! Ziveli



offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

HTML 5 Video Player

Video plejer radi na sličnom principu kao i audio player. Da bi smo prikazali video na stranici, koristićemo najnoviju verziju HTML5 bez dodatnih skripta, biblioteka, flash-a i slično.
Video player nam u HTML5 donosi i novu oznaku <video> , </video>

Za dodavanje plejera na stranicu, koristićemo sledeći kod:

Citat:
<video width="1280" height="720" controls>
<source src="film.mp4" type="video/mp4">
<source src="film.ogg" type="video/ogg">
Vaš brauzer ne podržava ovaj video plejer!
</video>


Arrow Pojašnjenje koda

U prvom delu koda možete podesiti width i hegiht, odnosno dužinu i širinu slike koja se prikazuje u plejeru. Nakon toga biće potrebno da uneste putanju do video fajla koji želite da prikažete u plejeru. I ovde imamo sličnu situaciju kao i sa audio plejerom, potrebno je da unesete dve ili više vrsta formata video fajla kako bi bila što bolja kompatibilnost sa svim brauzerima.

Arrow Formati koje ovaj HTML5 video plejer podržava, su sledeći: .mp4, .webm i .ogg

Arrow Brauzeri koji podržavaju ovaj video plejer su: Internet Explorer 9+, Google Chrome 6+, Mozilla Firefox 3.6+, Safari 5+ i Opera 10.6+

Izgled plejera je sličan kao i na audio plejeru, stim što se iznad plejera prikazuje slika video falja.



Ovaj plejer ima opcije podešavanje jačine zvuka kao i fullscreen prikaz video fajla.

Do sledećeg posta! Ziveli

offline
  • Research Engineer @MalwareBytes
  • Pridružio: 09 Avg 2011
  • Poruke: 15877
  • Gde živiš: Beograd

E neverovatan si, majke mi Ziveli

Sad se setih da ja imam neka dve prezentacije o HTML-u, iz kojih sam ucio, pa prilazem...

Nije nista slozeno, osnove...


https://www.mycity.rs/must-login.png
https://www.mycity.rs/must-login.png

offline
  • PHP developer
  • Pridružio: 22 Mar 2006
  • Poruke: 3666
  • Gde živiš: 127.0.0.1

Mnogo bitna stvar u vezi HTML 5 videa: iOS uredjaji ne dozvoljavaju klik ni na jedan element koji se nalazi iznad (z-index) video taga, iako se vide. Jedino resenje je uklanjanje kontrola (controls="0") na samom video, i implementiranje sopstvenih uz pomoc JS-a.

offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

Arrow Promenjena adresa sajta, sada tutorijale možete pratiti na adresi dizajntutorijali.wordpress.com

Ziveli

offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

HTML, PHP I CSS | Osnove dizajna i programiranja

Citat:
HTML je opisni jezik koji služi za izradu WEB stranica. Obično se pomoću njega dodaje sadržaj koji treba prikazati posetiocu sajta. U HTML postoje takozvane, oznake koje služe da podele sajt u više celina (tekst, paragraf, tabela, slika i slično). Ovaj opisni jezik nastao je tako što je pojednostavnjen SGML jezik. Kako se HTML i dalje razvija i unapređuje, u svom početku nije imao toliko mogućnosti koliko danas ima.

Aktutelna verzija je 4.01. Pojavila se i nova verzija HTML 5 na kojoj se i dalje radi, ne podržavaju je svi brauzeri, pa zbog toga nije standardizovana. Naravno, neki WEB sajtovi koriste ovu, najnoviju verziju HTML-a.

Šta je to CSS?

Pomoću CSS se definiše sam izgled stranice (boja, veličina teksta, izgled i slično) i u kombinacijom sa HTML-om čini WEB sajt. Kao i HTML, CSS se takođe razvijao i unapređivao tokom godina, pa je tako danas aktuelna verzija CSS2, dok se radi na verziji CSS3 koja sa HTML 5 čini nove WEB standarde koji još uvek nisi standardizovani, ali se koriste na pojedinim stranicama, jer ih sada sve više brauzer podržava i omogućava njihovu upotrebu. Naravno, novije verzije donose i neka bitnija unapređenja od prethodnih.


Izrada i dizajn sajtova | Kako napraviti sajt?

Citat:
Šta je programiranje sajta?

Mnogi mešaju dizajn i programiranje sajtova, treba znati da te dve oblasti nistu potpuno iste. Razlika je u tome što se programiranje sajtova svodi na samu funkcionalnost sajta, odnosno programiranje sajta u nekom programskom jeziku (tipa PHP ili ASP, zavisi od onog jezika za koji se programer odluči prilkom početka izrade sajta).

Kratka informacija: Programski jezici (PHP i ASP) se izvršavaju na strani servera, dok se opisni jezici HTML i CSS, izvršavaju na strani računara sa kojeg posetioc pristupa sajtu.

Šta je dizajn sajta?

Dizajn sajta je ono što mi vidimo na sajtu, to su tekst, slike, sam izgled sajta, boje. Ovo radi dizajner za razliku od programera (web devolper-a) koji se bavi programiranje sajta. Ovde se ne koriste programski jezici već opisni jezici kao što su HTML i CSS. Pomoću HTML se dodaje sadržaj (tekst, slike, tabele) a pomoću CSS se definiše sam izgled sajta, boje i slično.

offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

:Hover klasa u CSS

Šta je :hover i čemu služi?

Arrow Hover klasa služi da primeni ono što je definsano u njoj na neki element kada se na njega postavi kursor (stralica) miša. Hover klasa se takođe može koristiti na svim elementima. Ovu klasu podržavaju svi brauzeri: Internet Explorer, Mozilla Firefox, Opera, Google Chrome kao i Safari.

Kako se koristi?

Arrow Primer korišćenja :hover klase

U ovom primeru primenićemo hover klasu na jedan element. To će biti obična promena pozadine iz jedne u drugu. Dodaćemo u CSS novi div i definisati njegovu širinu i visinu, kao i boju:

Citat:
#sadrzaj
{
background-color:#00FF00;
position:relative;
left:14.6%;
width:70%;
height:20%;
border-radius:3px;
-moz-box-shadow: 0 0 3px #888;
-webkit-box-shadow: 0 0 3px#888;
box-shadow: 0 0 3px #888;
}


Nakon toga ćemo u CSS dodati hover klasu i definisati da se za div sadržaj promeni boja prelaskom kursora na njega.

Citat:
#sadrzaj:hover
{
background-color:#00FFFF;
}


Na kraju napravićemo novi HTML dokument, povezati HTML sa CSS dokumetnom, i u HTML dokumenti definisati div koji smo prethodno formirali u CSS-u:

Citat:
<html>
<head>
<link rel="stylesheet" type="text/css" href="izgled.css">
</head>
<body>
<div id="sadrzaj">
</div>
</body>
</html>


Kada ovaj kod otvorimo u brauzeru dobićemo sledeće:



Prelaskom kursor na ovaj div element, promeniće se boja koja je definisana u :hover klasi:




Isto tako :hover element možete koristiti i sa novom verzijom CSS3, za promenu količine senke elementa ili oblika (radius-a) stranica elemenata.

Arrow Primer promene oblika (radius-a) stranica:

CSS

Citat:
#sadrzaj
{
background-color:#00FF00;
position:relative;
left:14.6%;
width:70%;
height:20%;
border-radius:3px;
-moz-box-shadow: 0 0 3px #888;
-webkit-box-shadow: 0 0 3px#888;
box-shadow: 0 0 3px #888;
}
#sadrzaj:hover
{
border-radius:10px;
}


HTML

Citat:
<html>
<head>
<link rel="stylesheet" type="text/css" href="izgled.css">
</head>
<body>
<div id="sadrzaj">
</div>
</body>
</html>


Arrow Prikaz u brauzeru:



Arrow Primer koda možete preuzeti ovde: [url=https://www.mycity.rs/must-login.png Klasa[/url]

Ziveli

offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

Arrow Nastavljam sa novim tutorijalima u ovom temi, stay tuned! Smile

Pozdrav! I Love PHP - Svet WEB Dizajna

offline
  • Pridružio: 13 Sep 2012
  • Poruke: 2138

CSS3 Hover | Promena dužine i širine elementa
Citat:
U prethodnom postu bilo je reči o tome šta su to hover efekti kao i primer jednog jednostavnog efekta, kao što je fade efekat. Sada ćemo preći na nešto drugačiji efekat koji prilikom prelaska strelice preko elemnta menja dužinu ili širinu samog elementa. U HTML ćemo dodati jedan div (prazan, bez sadržaja, sa element klasom): […]


Arrow http://dizajntutorijali.wordpress.com/2013/06/01/c.....-elementa/

CSS3 Hover efekti na slikama | Fade efekat
Citat:
Šta su to hover efekti? U nekim od prethodnih postova, govorili smo o hover efektu na samom elementu. Hover efekat je neka promena koja se dešava kada se pređe kursorom strelice preko nekog elementa na stranici. CSS3 nam donosi mnoštvo mogućnosti pa tako hover efekat možemo primeniti i na slike. U daljem tekst sledi par […]


Arrow http://dizajntutorijali.wordpress.com/2013/05/31/c.....de-efekat/

Još CSS3 tutorijala na: http://dizajntutorijali.wordpress.com/category/css3-2/

Ziveli

Ko je trenutno na forumu
 

Ukupno su 513 korisnika na forumu :: 5 registrovanih, 1 sakriven i 507 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 3466 - dana 01 Jun 2021 17:07

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: bojank, Kruger, Motocar, Ognjen D., vrlenija