WEB Dizajn Tutorijali

• 3Ovo se svidja korisnicima: ilovephp, LoXo, mcrule
  
  Registruj se da bi pohvalio/la poruku!

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!

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

• 6Ovo se svidja korisnicima: CyberSrbin032, mcrule, TwinHeadedEagle, Jimmy4, ivance95, ThePhilosopher
  
  Registruj se da bi pohvalio/la poruku!

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>

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

Prikaz playera na različitim brauzerima:

Chrome



Firefox



Internet Explorer 9



Do sledećeg posta!

• 6Ovo se svidja korisnicima: Jimmy4, TwinHeadedEagle, ivance95, ThePhilosopher, TheDelliRus, mcrule
  
  Registruj se da bi pohvalio/la poruku!

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>

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.

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

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!

• 4Ovo se svidja korisnicima: Jimmy4, ilovephp, mcrule, ThePhilosopher
  
  Registruj se da bi pohvalio/la poruku!

Uloguj se preko Facebooka da bi skinuo fajl:

E neverovatan si, majke mi

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

• 5Ovo se svidja korisnicima: mcrule, ThePhilosopher, ilovephp, Jimmy4, E.L.I.T.E.
  
  Registruj se da bi pohvalio/la poruku!

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.

• 2Ovo se svidja korisnicima: mcrule, Jimmy4
  
  Registruj se da bi pohvalio/la poruku!

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

• 6Ovo se svidja korisnicima: TwinHeadedEagle, CyberSrbin032, mcrule, ThePhilosopher, Jimmy4, E.L.I.T.E.
  
  Registruj se da bi pohvalio/la poruku!

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.

• 4Ovo se svidja korisnicima: ThePhilosopher, TwinHeadedEagle, Jimmy4, E.L.I.T.E.
  
  Registruj se da bi pohvalio/la poruku!

Uloguj se preko Facebooka da bi skinuo fajl:

:Hover klasa u CSS

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

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?

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.

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>


Prikaz u brauzeru:



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

• 2Ovo se svidja korisnicima: ThePhilosopher, Jimmy4
  
  Registruj se da bi pohvalio/la poruku!

Nastavljam sa novim tutorijalima u ovom temi, stay tuned!

Pozdrav! I Love PHP - Svet WEB Dizajna

• 1Ovo se svidja korisniku: E.L.I.T.E.
  
  Registruj se da bi pohvalio/la poruku!

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): […]


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 […]


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

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