MyCity :: Web dizajn / HTML

Gra�enje sajta za po�etnike

nobody@mycity.rs (E.L.I.T.E.) — Tue, 12 Feb 2013 18:45:10 +0100

Gra�enje sajta za po�etnike

Sadr�aj:

Kako zapo�eti?
Brzi WEB kreatori
Registrovanje hosting naloga
Flash i HTML5
Microsoft Web Matrix - Dobar po�etak
Otvaranje naloga na nekom hostingu
Skidanje FTP klijenta - FilleZilla
Instalacija FileZilla

Napomena! ::ZymicHost je nakon du�e pauze ponovo proradio.

Predgovor

Sve �e��e sre�emo sajtove na �ije se pravljenje tro�i dosta novca, ali i pored toga se na njima ne vidi neki poseban smisao za dobar ukus, sve je nabacano, pretrpano, a ima i dosta widgets-a i linkova ka drugim sajtovima da �ovek tu vi�e ne mo�e da se sna�e. Ovaj �lanak namenjujem svim po�etnicima koji ne znaju kako da po�nu ili su po�eli, ali uprskali stvar.

Kako zapo�eti?

Sve �to vam treba na po�etku jeste ideja. Dakle, �elite napraviti sajt koji se bavi jednom tematikom. Odlu�ite koja �e to tematika biti. Evo nekog kra�eg pregleda (iako postoji jo� dosta tema kojima se sajt mo�e baviti):

Nau�no-istra�iva�ki sajt - edukacioni sajt na kome �lanovi mogu nau�iti ne�to novo.
Obave�tajni sajt - naj�e��e su to sajtovi velikih novinarskih redakcija, sportski sajtovi, sajtovi kladionica, sportske prognoze itd. Obave�tajni sajt se tako�e mo�e baviti op�tom tematikom - doma�e i vesti iz sveta.
Socijalna mre�a - sajt koji spaja ljude iz jednog regiona ili celog sveta. U ove spadaju: socijalne mre�e, raznorazni forumi, sajtovi sa uvedenim sistemom registracije i vo�enja diskusija itd. Tu korisnici mogu opu�teno �askati i razmenjivati iskustva.
Blog - vrsta sajta koji se obi�no bavi samo jednom tematikom i na kom administrator pi�e �lanke, a gosti ili �lanovi ih mogu komentarisati. Naj�e��e su blogovi autobiografski.
Najave - sajtovi �iji je rok ograni�en, ta�nije, slu�e kao najava nekog velikog doga�aja. Nakon �to doga�aj pro�e, sajt vi�e nije tako aktivan ili ne slu�i ni�emu.
WikiMedia - ovakvi sajtovi su sli�ne strukture kao Wikipedia, a imaju istu namenu; �lanovi mogu ure�ivati i pisati �lanke bez obzira na to da li su se registrovali ili su gosti.

To je neki kra�i pregled. Dakle, kada ste odlu�ili kojom �e se tematikom sajt baviti i kakva �e biti njegova struktura, mo�ete po�eti sa odabirom alata.

Brzi WEB kreatori

Zaboravite na brze kreatore sajtova tipa:

Wix
Webs
Yola

Za�to?

Sajtovi koji su stvoreni na ovakav na�in su vrlo slabo rangirani u pretra�iva�ima - pretra�iva�i ih te�e pronalaze. Kada budete odlu�ili da registrujete domen, mora�ete da pla�ate ve�e sume novca, a ako biste mo�da �eleli da prebacite sajt na neki hosting mo�ete samo "da sanjate", jer ovi brzi kreatori web sajtova su namenjeni po�etnicima, tako da je najbolje da u njima ve�bate kako �ete uklopiti elemente u svoj pravi sajt.

Registrovanje Hosting naloga

Hosting sajtovi su oni koji vam daju prostor na Internetu gde mo�ete izgraditi svoj sopstveni sajt. Postoje dve vrste hosting sajtova:

Besplatan hosting - nudi vam besplatan prostor na Internetu koriste�i subdomen.
Tarifni hosting - imaju svoju tarifu, pla�ate odre�enu cenu, ali zato dobijate mogu�nost odabira adrese sa domenom.

Kada birate hosting, obavezno gledajte da isti podr�avaju MySQL i PHP. Kasnije �u objasniti i za�to.

Predznanje ili gotovi �abloni

Imate dve mogu�nosti. Ako �elite da izgradite sajt koriste�i sopstveno znanje, va�no je da znate slede�e skriptne/programske jezike:

Dizajn stranica

HTML
CSS
JavaScript

Programiranje foruma ili baze podataka

PHP
SQL

Mo�e, a ne mora...

XML
ASP.NET
jQuery

Sve ove skriptne i programske jezike (njihove osnove) mo�ete nau�iti ovde: [Link mogu videti samo ulogovani korisnici]

Ako ne �elite da u�ite programske jezike, izaberite neki od najpoznatijih templejtova (�ablona) za va� web sajt:

WordPress
PHP forum

A za bolji izgled va�ih sajtova i funkcionalnost:

MonsterTemplates
Templatemo

Lep�i efekat i bolji dizajn samog sajta mo�ete posti�i kontrolisanjem va�eg CSS fajla. Pravilnim kori��enjem CSS mo�ete na�initi velik napredak na va� sajt.

Flash i HTML5

Sve popularnije tehnike ure�ivanja web sajtova jesu dodavanje Flash ili HTML5 elemenata.

Ovde mo�ete videti primere HTML5 sajtova: [Link mogu videti samo ulogovani korisnici]
Sajt koji je izabran za najbolji sajt po�etkom 2013. godine , a koji sadr�i Flash elemente: [Link mogu videti samo ulogovani korisnici]

Microsoft Web Matrix - dobar po�etak

Microsoft nudi program za Windows u kome mo�ete u�iti HTML, CSS, JS, PHP, SQL, ASP i jQuery i koristiti znanje ovih programskih jezika direktno. �ta to zna�i, ustvari? Pa, samo me pratite i sazna�ete u �emu je stvar.

Link za preuzimanje Microsoft Web Matrix 2:
[Link mogu videti samo ulogovani korisnici]

Microsoft Web Matrix �e pri instalaciji automatski instalirati i komponente va�ne za rad, tako da nije potrebno preuzimati ih sa Interneta naknadno. �ak i kada po�injete sa radom u novom jeziku, automatski �e se preuzeti priklju�ci i ostali va�ni kontrolni fajlovi (naprimer, prvi put radite u SQL ili PHP).

Izgled po�etnog prozora u MS Web Matrix

Kliknite na Templates da izaberete tip sajta koji �ete raditi.

Po�etni dostupni templejtovi

Na po�etku imate 12 templejtova, me�utim, ako vam ovo nije dovoljno, mo�ete uvek dodati neki novi. Po�etnicima preporu�ujem HTML5 �emu.

Ja sam u ovom primeru izabrao �emu HTML5 - Boilerplate. Sledi obja�njenje svih delova programa.

Osnovne informacije o sajtu i deo za pode�avanja

Alatke za pokretanje sajta, startovanje, stopiranje, restartovanje i deljenje na Web

Meni - u donjem delu menija biramo sekciju za pode�avanja; osnovna konfiguracija sajta, fajlovi, baze podataka i prijave. Nama u sada treba deo sa fajlovima. Kliknite na Files.

Sada se meni izmenio, kao �to vidite. Tu se nalaze svi fajlovi koje sadr�i sajt.

Probajmo sada takav, ve� gotov sajt da pokrenemo. Pokre�emo ga tako �to kliknemo na ikonicu .

Sajt je kao �to vidimo prazan. Za�to? Zato �to se trenutno u fajlovima poput .css, .html i ostalim konfiguracionim fajlovima nalaze samo osnovne funkcije za jedan sajt. Vi morate dodati sadr�aj. Tu mo�ete primeniti HTML, CSS, JS i ostale jezike koje sam vam pominjao. Sajt je pokrenut u LIVE re�imu, tj., jo� nije na Internetu. Kako objaviti sajt kada sa njim zavr�ite?

Otvaranje naloga na nekom hostingu

Ovde dolazimo do dela kada treba objaviti sajt na Internet. Imate mogu�nost da izaberete izme�u hiljade i hiljade hosting provajdera, ali naravno, gledajte da budu zadovoljeni slede�i uslovi:

Besplatan hosting (za po�etak)
MySQL i PHP podr�ka

Jo� jedna stvar koja nam treba na po�etku jeste FTP klijent, odnosno program koji �e ubacivati fajlove na sajt. U slede�im primerima ja �u koristiti Zymic hosting i FileZilla.

Zymic hosting: [Link mogu videti samo ulogovani korisnici]
FileZilla: [Link mogu videti samo ulogovani korisnici]

Preuzimanje FTP klijenta - FileZilla

Dakle, ono �to na po�etku treba da uradimo jeste da instaliramo FTP klijent. Idite na oficijelni sajt FileZilla produkta i kliknite na dugme obele�eno na slici.

Nakon toga �e vam se prikazati stranica gde �ete izabrati koju verziju �elite da instalirate (dobro gledajte da bude prilago�ena va�em operativnom sistemu).

Sa�uvajte fajl.
Pokrenite ga dvoklikom.
Potvrdite bezbednost klikom na dugme Run.

Instalacija FileZilla

Kliknite na I Agree.

�tiklirajte prvu opciju ako �elite da instalirate program za sve korisnike ra�unara, a drugu opciju ako �elite da je instalirate samo za vas kao korisnika. Potom kliknite na Next.

Pogledajte dobro da li su vam �tiklirane ove opcije kao na slici. Poslednju ne morate (ako �tiklirate nju kreira�e se pre�ica na Desktop-u). Potom kliknite na Next.

Kliknite na Browse... da precizirate ta�nu lokaciju gde �e program biti instaliran sa svim prate�im fajlovima. Kada to zavr�ite kliknite na Next.

�tiklirajte opciju pri dnu (Do not create shortcuts) ako ne �elite pre�ice do programa (Start Meni, Desktop...). Kliknite na Install da zapo�nete instalaciju.

Kompjuter mora biti restartovan kako bi se instalacija zavr�ila. Klikom na Reboot now pa na Finish, ra�unar �e automatski zatvoriti sve trenutne programe i ra�unar �e se restartovati. Klikom na Manually reboot later, ra�unar �e se restartovati malo kasnije, ali �ete rizikovati da se to mo�da desi pri nekom va�em radu, tako da je najbolje da odmah restartujete ra�unar i zavr�ite proces instalacije.

Kori��enje Zymic hostinga i koordiniranje sa FileZilla

Pre nego �to po�nete da koristite Zymic hosting, logi�no, morate se registrovati. Nakon �to se registrujete idite na kontrolni panel.

Link za registraciju: [Link mogu videti samo ulogovani korisnici]
Link za kontrolni panel: [Link mogu videti samo ulogovani korisnici]

Kada ste na glavnoj strani kontrolnog panela, malo ni�e prona�ite ovo dugme i kliknite na njega:

//piii izgleda da ne mogu sad da registrujem akaunt

+ Klikni da pro�ita�!

Koristi�u svoj nalog kao primer. Neke stvake su sakrivene (zbog li�nih bezbednosnih razloga), ali shvati�ete ve� �ta i kako treba. Obratite pa�nju na levi deo oivi�en jarkom crvenom. Tu se nalaze glavni podaci koje �ete iskoristiti pri aploudovanju fajlova na server.

Sledi kratak opis FileZilla elemenata.

Aploudovanje fajlova na server

Hajde da sada, kada znamo osnovu, aploudujemo neki fajl na server. Neka to bude glavna strana. Verujem da ste do sada ovladali ve�tinama HTML-a, me�utim, vi mo�ete aploudovati gotove fajlove (kao naprimer za forum ili WikiMedia prilju�ak).

Otvorite Notepad i upi�ite ovaj kod:

<!DOCTYPE html>


<html>


  <head>


    <title>Naslov stranice</title>


  </head>


  <body>


     <h1>Naslov</h1>


    <p>Dobrodo�li na sajt!</p>


  </body>


</html>

Sa�uvajte ga na Desktop kao index.html.

Sada se vratite na onaj deo koji sam vam pominjao da obratite pa�nju. Tu �e pisati:

Host: imesajta.zxq.net
User: imekorisnika_zxq
Port: 21

Sada to koristimo da aploudujemo fajl na server. Zan�i tamo gde u FileZilla pi�e Host:, ukucajte ono �to vam pi�e pod Host: na kontrolnom panelu i tako za sve ostalo. Za Password upisujete �ifru koju ste odredili na tom host nalogu. Kada ste sve to uradili kliknite na Quickconnect.

Konzola �e odraditi svoje. Idite na direktorijum Desktop kao na slici dole i kliknite desnim klikom na onaj fajl koji ste napravili u Notepad (index.html), pa potom Upload. Ja sam sve to ve� uradio pa je fajl tu.

Proverite jo� jednom da li je fajl tu gde treba da bude.

Sada idite na adresu koju ste izabrali pri kreiranju host naloga. Evo kako to izgleda.

I to bi bilo to za sada Kako biste pobolj�ali svoju po�etnu stranicu nastavite sa u�enjem HTML-a i CSS-a, a ja �u slede�i put objasniti kako da dodajete direktorijume, tj., kako da bolje organizujete fajlove na va�em sajtu. Pozdrav

Kreiranje direktorijuma

Da bismo lak�e organizovali sajt, kreiramo direktorijume. �ta to zna�i? Pa zamislite da nam se sve stranice, prezentacije, projekti, slike i konfiguracioni fajlovi nalaze u jednom folderu. Stvarno zeznuto, zar ne? Pa zato je va�no da ih grupi�emo.

Ovde �e se nalaziti spisak direktorijuma (foldera) na va�em sajtu. Kako kreirati novi direktorijum/folder?

Idete desnim klikom na ikonicu foldera pa na Create Directory, izaberite ime foldera i kliknite OK. Ja sam ve� napravio primer direktorijuma gde �e se nalaziti ostale stranice.

I tako�e napravio sam stranicu2 koja �e biti stranica nakon Index-a. Kako da dobijemo pristup takvoj jednoj stranici?

imesajta.zxq.net/imedirektorijuma/imefajla

Pa da probamo:

Dizajn i uskla�ivanje elemenata

Prvo na �ta korisnik obrati pa�nju kada dolazi na neki sajt jeste raspored elemenata ili dizajn, a ja to jo� naziva mi web estetika. �ta to zna�i? Hajde da uzmemo za primer neke �eme.

Uze�emo sajt YoyoGames. Evo kako izgleda gornji deo:

Sajt je kao �to i sami vidite, dizajniran prema ovoj �emi:




Gornji deo: Logo , Meni


Telo: Slajd

Hajde da obratimo pa�nju na drugi deo (donji deo sajta):

Donji deo je dizajniran ovako:




Donji deo: Slajd, Slajd, Novosti


Dno: Pretplata, Informativni linkovi, Copyright

�ta sam ovim hteo da ka�em?
Ovo je pravi primer sajta koji nema puno elemenata, ali bez obzira na to 'prija oku', nema ki�a, ni�ta ne �tre�i, nema napadnih boja. Ovo su najve�e mane dana�njih sajtova - vi�e se gleda na to da bude �to vi�e elemenata, dok se malo pridaje va�nost samom ritmu.

Sa druge strane, postoje natrpani sajtovi za koje ne mo�emo re�i da lo�e izgledaju, a pravi primer za to je Wikipedia:

Reference

Internet i njegovo funkcionisanje : [Link mogu videti samo ulogovani korisnici]
HTML i CSS: [Link mogu videti samo ulogovani korisnici] , [Link mogu videti samo ulogovani korisnici] , [Link mogu videti samo ulogovani korisnici]
JavaScript : [Link mogu videti samo ulogovani korisnici]
PHP : [Link mogu videti samo ulogovani korisnici] , [Link mogu videti samo ulogovani korisnici]
XML : [Link mogu videti samo ulogovani korisnici] , [Link mogu videti samo ulogovani korisnici]
ASP.NET : [Link mogu videti samo ulogovani korisnici]
SQL : [Link mogu videti samo ulogovani korisnici] , [Link mogu videti samo ulogovani korisnici]
jQuery : [Link mogu videti samo ulogovani korisnici]

Lista �lanaka sa MyCity-a koji vam mogu dodatno pomo�i

[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]

Za kraj...

Potrudio sam se da vas ovim �lankom uvedem u samu materiju web sajtova, �ta je sve potrebno i kako sve to izgleda u praksi kroz slike. Nadam se da vam je sada mnogo lak�e da neke stvari i sami shvatite. Naravno, ovo je samo deli� onoga �to sam hteo re�i, jer kada bih sve to napisao ovde, trebalo bi mi jako puno vremena. Vama ostavljam da bolje izu�ite neke pojmove, a pre svega HTML i CSS jer bez njih ne mo�ete skoro ni�ta posti�i na polju Web dizajna.

----------- Dopuna: 14 Maj 2013 21:19 ---------

000webhost - registracija i upravljanje sajtom

Po�to ZymicHost ve� du�e vreme nije u funkciji i nije mogu�e registrovati novi nalog na ovom hostingu, 000webhost bi�e savr�ena alternativa, �ak i bolja.

000WebHost
000WebHost - Registracija

Registracija

Da biste registrovali morate da popunite formu u kojoj �ete dati slede�e podatke:

Ime sajta - poddomen se automatski generi�e. Ako ne �elite da koristite besplatnu varijantu, popunite prvo polje u koje �ete upisati ne�to od slede�eg:

imesajta.com


imesajta.org


imesajta.net

U zavisnosti od toga koji domen �elite.
Va�e ime - nije potrebno navesti puno ime i prezime.
Va� mejl - mejl mora biti validan i postoje�i jer �e nakon registracije biti potrebna verifikacija naloga (potvrda da je mejl postoje�i).
Lozinka - budite pa�ljivi pri odabiru lozinke! Izaberite lozinku koja sadr�i i slova i brojeve!
Potvrda lozinke - potrebno je potvrditi lozinku. Vodite ra�una o tome da vam je isklju�en Caps Lock.

CAPTCHA - uobi�ajena sigurnosna provera u kojoj morate upisati simbole sa slike.

Napomena :: Nakon reigstracije potrebno je potvrditi nalog (kliknuti na link za verifikaciju koji vam je stigao na mejl). Najbolje je ovo uraditi u roku od 24 �asa od registracije.

Ako ste uradili sve �to je potrebno, va� prostor je sada aktivan i mo�ete oti�i u Kontrolnu tablu.

Kontrolna tabla

Najva�nije stavke

Main Menu - Glavni meni
Domains - Rad sa domenima, parkiranje domena, promocija
Email - Rad sa mejlovima
Usefull staff - Korisne stvari (download kopije sajta, baze, postavljanje HTML elementa za pra�enje pregleda, �abloni za sajt).
Files - Fajlovi, FTP
Software, services - Vizuelni web kreator, MySQL, PHP Admin, konfiguracija PHP-a.

Po�to sam vam pokazao kako da aploudujete fajlove na server, bi�e vam lako da to u�inite i ovde. FTP detalje mo�ete pogledati u stavci Files >> View FTP details.

Napomena :: Pri aploudovanju fajlova na server preporu�iljivo je koristiti SmartFTP i FileZilla klijente. Kada aploudujete index.html fajl na va� sajt ako koristite 000webhosting obavezno obri�ite default.php! Taj fajl je neva�an jer vas samo obave�tava da je nalog uspe�no kreiran.

Osnove HTML5

nobody@mycity.rs (E.L.I.T.E.) — Wed, 09 Jan 2013 20:18:58 +0100

Osnove HTML5

Sadr�aj

Uvod
Uvod u sintaksu
Elementi
Tipovi uno�enja teksta
Elementi forme
Medijski elementi
Atributi forme
Elementi forme unutar HTML5
2D Crtanje (Canvas)
Canvas crtanje
Canvas putanje
Canvas Gradient Fill
Canvas Kreiranje Slike
Audio i Video prikaz
Video prikaz
Audio prikaz
Drag & Drop funkcija
Geolokacija
Kratak vodi�
Web Storage
App Cache
WebGL

Napomena :: Kako biste mogli sa razumevanjem da ispratite sve delove ovog �lanka po�eljno je da poznajete solidno HTML. Ako ga ne poznajete, ili �elite da unapredite svoje znanje posetite ovaj link.

[Link mogu videti samo ulogovani korisnici]

Uvod

�ta je HTML?

HTML (HyperText Markup Language) je skriptni opisni jezik namenjen uredjivanju web stranica. Nastao je 1990. godine upro��avanjem SGML (Standard Generalized Markup Language). U po�etku je bio dosta ograni�en i definisao je samo tekstove, citate i paragrafe medjutim kako se razvijao web svet postojala je potreba za novinama, te danas defini�e slike, tablice, forme i ostalo... HTML koristi posebno definisane tagove kako bi odradio neku funkciju unutar .html stranice. HTML je temelj ve�ine dana�njih web jezika i koristi se zajedno sa njima, kao naprimer

CSS
JavaScript
PHP
...

�ta je HTML5?

HTML5 stvoren je 2012. kao revizija HTML4 i sa sobom je doneo dosta novih pobolj�anja i mogu�nosti kao �to je 3D i 2D prikaz pomo�u CSS, audio i video elemente, drag & drop sistem i jo� dosta toga novog.

Treba znati jo� i to da ga ne podr�avaju neki brauzeri jer je relativno noviji (jo� uvek je u fazi razvoja), te je ovo jo� jedan razlog zbog koga bi trebalo da apdejtujete svoj brauzer pre kori��enja. HTML5 se ne mo�e koristiti u WAP formi �to nije bio slu�aj sa HTML4.

Uvod u sintaksu

<!DOCTYPE HTML>


<html>


<body>


<p>Hello World!</p>


</body>


</html>

Mo�e se re�i da je sintaksa sli�na HTML4, medjutim nije potrebno dodavati vi�e toliko elemenata u header kao u prethodnoj verziji pri izgradnji jednog HTML dokumenta (naravno ne ra�unaju�i dodatne CSS fajlove za stilizovanje stranice).

U HTML5 deklaraciji potrebno je dakle samo upisati:

<!DOCTYPE html>

Elementi

�to se ti�e elemenata, zadivljuju�e je koliki sada izbor imaju oni koji �ele da zapo�nu svoj sajt u HTML5 i vi�e ne�e morati da se mu�e sa astronomskim skriptama za neki novi element jer je skoro sve ono �to im je potrebno definisano u novom izdanju HTML-a.

Neki od novih elemenata ::

<article> Defini�e �lanak
<aside> Defini�e sadr�aj sa strane dokumenta.
<bdi> Izoluje odredjeni deo teksta od ostalog kako bi se mogao formatirati i ure�ivati.
<command> Defini�e komandno dugme koje korisnik mo�e pozvati (komanda).
<details> Defini�e ostale detalje koje korisnik mo�e videti (komentari).
<summary> Defini�e vidljivi heading element za <details> (vidljivi komentari).
<figure> Navodi samostalan sadr�aj, kao naprimer ilustracije, tekstove, slike itd.
<figcaption> Defini�e naslov za <figure> element (figure caption).
<footer> Defini�e donji deo nekog dokumenta (footer).
<header> Defini�e gornji deo dokumenta ili odrednjenu sekciju (header).
<hgroup> Grupe se postavljaju od <h1> do <h6> kada tesktovi imaju vi�e od jednog heading elementa.
<mark> Posebno nagla�ava (markikra) tekst.
<meter> Defini�e merenju u okviru poznatog opsega (manometar).
<nav> Defini�e navigacione linkove.
<progress> Prikazuje tok procesa.
<ruby> Prikazuje posebne karaktere (Isto�no Azijsku tipografiju).
<rt> Posebno defini�e gore navedene karaktere.
<rp> Defini�e �ta prikazati u brauzeru koji ne podr�ava date karaktere.
<section> Defini�e neku sekciju u dokumentu.
<time> Defini�e datum/vreme.
<wbr> Defini�e mogu�i prelaz u drugi rad (breeak line).

Tipovi uno�enja teksta

I pred kraj ove sekcije ne�to o tipovima uno�enja teksta. Svi ste se sigurno poku�ali registrovati na Facebook ili na neku dru�tvenu mre�u (forum, sajt...). Pred vama se tada nalazila osnovna forma:

Username
E-mail
Password
Re-Password

Medjutim, ovoga puta �u vam objasniti kodove za klasi�ne input elemente (polja) i dodatne koji su uba�eni u HTML5:

Novi input elementi ::

color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week

Izaberi svoju omiljenu boju: <input type="color" name="favcolor">

Datum rodjenja: <input type="date" name="bday">

Datum rodjenja (datum i vreme): <input type="datetime" name="bdaytime">

E-mail: <input type="email" name="usremail">

Koli�ina (od 1 do 5): <input type="number" name="quantity" min="1" max="5">

Daljina: <input type="range" name="points" min="1" max="10">

Pretra�i Google: <input type="search" name="googlesearch">

Telefon: <input type="tel" name="usrtel">

Izaberi vreme: <input type="time" name="usr_time">

Dodaj url: <input type="url" name="urladress">

Izaberi nedelju: <input type="week" name="week_year">

Iz primera vidite da input type defini�e tip input polja (vrsta upisa podataka), a name je ime elementa koje nije obavezno da se pi�e.

Da se podsetimo starih tipova input polja:




Ime: <input type="text"></input>


Prezime: <input type="text"></input>


E-mail: <input type="email"></input>


Lozinka: <input type="password"></input>


<input type="submit" value="Po�alji">

Novi medijski elementi

Ovde na scenu stupa audio i video prikaz o kome sam vam govorio u uvodu.

Tagovi za audio i video prikaz ::
<audio> Defini�e audio sadr�aj
<video> Defini�e video sadr�aj
<source> Defini�e vi�e medijskih resursa <video> i <audio>
<embed> Defini�e interaktivni sadr�aj odnosno prikaz koda (plug-in)
<track> Defini�e tekst trake za <video> i <audio>

Elementi forme

HTML5 je u svoj sadr�aj uvrstio nove taqgove za prikazivanje elemenata formi:

<datalist>
<keygen>
<output>

Kori��enje <datalist> taga za listu

Dati tag defini�e podatke unutar liste ,a proces dodavanja teksta je isti: <option value="tekst">.

<input list="programski jezici">


<datalist id="programski jezici">


  <option value="HTML">


  <option value="PHP">


  <option value="JavaScript">


  <option value="xHTML">


  <option value="WML">


</datalist>

Kori��enje <keygen> taga za identifikaciju

Dati tag se koristi kako bi se indetifikovao korisnik (input tagovi).

Input tagovi su oni u koje upisujete ime, prezime, lozinke, e-mailove, medjutim tu spadaju i radio polja, polja za �ekiranje, dugmadi za potvrdu... sve to spada u elemente forme.

<form action="[b]demo_keygen.asp[/b]" method="get">


Username: <input type="text" name="usr_name">


Encryption: <keygen name="security">


<input type="submit">


</form>

Kao �to mo�da ve� prime�ujete u pitanju je .asp stranica, medjutim mogu�e je dodati tag i na ostale web ekstenzije.

Kori��enje <output> taga za prikazivanje rezultata

Dati tag je mogu�e koristiti u svrhe odredjivanja rezultata kroz 4 matemati�ke operacije. Ovoga puta �u vam pokazati primer za plus:

<form oninput="[b]x.value=parseInt(a.value)+parseInt(b.value)">0[/b]


<input type="range" name="a" value="50">100  +


<input type="number" name="b" value="50">=


<output name="x" for="a b"></output>


</form>

Atributi forme

Novi elementi forme unutar HTML5

Novi tagovi za formu:

autocomplete
novalidate

Novi tagovi za input formu:

autocomplete
autofocus
form
formaction
formenctype
formmethod
formnovalidate
formtarget
height and width
list
min and max
multiple
pattern (regexp)
placeholder
required
step

Kori��enje <autocomplete> taga

Dati tag omogu�uje da se forma automatski kompletira ili ugasi kori��enje funkcije.

<form action="demo_form.asp" [b]autocomplete="on"[/b]>


  First name:<input type="text" name="fname"><br>


  Last name: <input type="text" name="lname"><br>


  E-mail: <input type="email" name="email" [b]autocomplete="off"[/b]><br>


  <input type="submit">


</form>

2D Crtanje

Jo� jedan novi element koji je dodat u HTML5 jeste 2D Crtanje (canvas) i slu�i za crtanje 2D elemenata unutar taga kao �to su oblici, slike i dodatni sadr�aji.

<canvas id="mojCanvas" width="200" height="100"></canvas>

Mo�ete dodati i ram oko crte�a:

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

Crtanje Canvas putem JavaScript

Ve�ina operacija unutar kanvasa mora biti izvr�eno pomo�u JavaScript jezika:

<script>


var c=document.getElementById("mojCanvas");


var ctx=c.getContext("2d");


ctx.fillStyle="#FF0000";


ctx.fillRect(0,0,150,75);


</script>

Jedna bitna stvar; ctx.fillStyle slu�i za bojenje unutar Canvas-a, a ctx.fillRect(koordinate), slu�i za kreiranje �etvorougla (naj�e��e pravougaonika, rectangle).

Na slici iznad mo�ete videti kako to izgleda. Crvena strelica pokazuje otprilike mesto gde je moj kursor tada bio. Zna�i, canvas mo�e slu�iti i za odredjivanje koordinata. Ako vam nije jasno u �emu je fora idite u Paint i na Status Bar (skroz dole na dnu) �e vam se prikazati koordinate pri pomeranju kursora.

Canvas putanje

Ovoga puta �u se jo� malo zadr�ati kod koordinatnog sistema HTML5, kako bi vam prikazao na�in postavljanja putanje. Ovoga puta �emo prelaziti na JavaScript ali ne verujem da �e vam to biti neki veliki problem jer je JavaScript vrlo lak za u�enje ako ga jo� niste nau�ili.

var c=document.getElementById("mojCanvas");


var ctx=c.getContext("2d");


ctx.moveTo(0,0);


ctx.lineTo(300,150);


ctx.stroke();

Da defini�emo malo ovo. var c=document.getElementById("mojCanvas"); naziv dokumenta, po�etni tag. Da bismo precizirali da �elimo 2D prikaz, ubacujemo var ctx=c.getContext("2d");, a nakon toga koordinate ctx.moveTo(0,0). Prvi broj predstavlja x koordinatu, a drugi y koordinatu. Tagom ctx.lineTo(300,150); defini�emo da �elimo da kreiramo liniju prema datim koordinatama, i sa ctx.stroke(); zavr�avamo kod.

Evo kako bi to trebalo da izgleda ako smo stvar pravilno uradili:

Sada na red dolazi krug. Ovde je stvar ve� malo te�a, jer krug u JS ima vi�e elemenata.

var c=document.getElementById("mojCanvas");


var ctx=c.getContext("2d");


ctx.beginPath();


ctx.arc(95,50,40,0,2*Math.PI);


ctx.stroke();

Prve dve linije koda smo objasnili u pro�lom primeru. Sada na red dolazi ctx.beginPath(); koji defini�e po�etak putanje. ctx.arc(95,50,40,0,2*Math.PI); predstavlja koordinate, odnosno pravila po kojima �e se krug generisati. To je: arc(x,y,r,start,stop). Zna�i prva dva broja su x i y koordinate, a ostali predstavljaju gde krenuti, a gde stati.

Rad sa tekstom putem <canvas> taga

Rad sa tekstom je dosta lak�i i sve �to treba da uradite jeste da defini�ete oblik teksta i sam tekst.

var c=document.getElementById("mojCanvas");


var ctx=c.getContext("2d");


ctx.font="30px Arial";


ctx.fillText("Hello World",10,50);

ctx.font="30px Arial"; predstavlja tag za font i veli�inu, a ctx.fillText("Hello World",10,50); popunjen tekst i koordinate (x,y). Da ne bih stalno pisao x i y , od sada �u koristiti izraz osnovne koordinate.

A sa kori��enjem Stroke taga:

var c=document.getElementById("mojCanvas");


var ctx=c.getContext("2d");


ctx.font="30px Arial";


ctx.strokeText("Hello World",10,50);

ctx.strokeText("Hello World",10,50); ima za cilj da objasni da �elimo da kreiramo tekst koji iznutra nije popunjen.

Gradient Fill

Gradient Fill (boja sa presijavanjem) je predposlednji canvas element koji defini�e 2D crtanje i koji vam dosta mo�e pomo�i u dodavanju specijalnih efekata slici.




var c=document.getElementById("mojCanvas");


var ctx=c.getContext("2d");





// Create gradient


var grd=ctx.createLinearGradient(0,0,200,0);


grd.addColorStop(0,"red");


grd.addColorStop(1,"white");





// Fill with gradient


ctx.fillStyle=grd;


ctx.fillRect(10,10,150,80);

// - Ova linija ozna�ava komentar ili naredbu. var grd=ctx.createLinearGradient(0,0,200,0); ovo defini�e da �elimo da kreiramo linerano polje (postoji i kru�no polje), opsega sa presijavanjem. Tu su sve osnovne koordinate u zagradi, medjutim po�to se radi o �etvorouglu ima ih 4 logi�no.

grd.addColorStop(0,"red");


grd.addColorStop(1,"white");

Ovi tagovi iznad defini�u koju �emo boju izabrati za presijavanje.

ctx.fillStyle=[u]grd[/u];


ctx.fillRect(10,10,150,80);

Ovo ozna�ava da �elimo kreirati sliku sa presijavanjem (nagla�en tag grd - gradient), a drugi tag ctx.fillRect(10,10,150,80); ozna�ava da �elimo da popunimo �etvorougao sa bojom prema datim koordinatama.

A koriste�i createRadialGradient():

var c=document.getElementById("myCanvas");


var ctx=c.getContext("2d");





// Create gradient


var grd=ctx.[b]createRadialGradient[/b](75,50,5,90,60,100);


grd.addColorStop(0,"red");


grd.addColorStop(1,"white");





// Fill with gradient


ctx.fillStyle=grd;


ctx.fillRect(10,10,150,80);

createRadialGradient() ozna�ava da �elimo da kreiramo kru�no presijavanje (radius = pre�nik). Evo kako to izgleda:

Canvas Kreiranje Slike

Ovoga puta �u vam objasniti kako da koristite canvas tag za kreiranje slike.

Slika koju �u koristiti u ovom primeru je:

Pa da po�nemo:

var c=document.getElementById("mojCanvas");


var ctx=c.getContext("2d");


var img=document.getElementById("scream");


ctx.drawImage(img,10,10);

Obja�njenje za prvu i drugu liniju �u presko�iti jer sam to ve� odradio u pro�lim primerima. Tre�a linija defini�e koju sliku �elimo da postavimo. Kao �to vidite, radi se o dokumentu sa ID-om "scream". ID predstavlja ime dokumenta. �etvrta linija defini�e koordinate slike, i defini�e da �elimo da sliku nacrtamo pomo�u kanvasa. Evo kako to na kraju izgleda:

>Testiraj ovde<

Audio i video prikaz unutar HTML5

Video prikaz

Ve�ina video fajlova na netu pre uspostavljanja HTML5 su imali svoje pluginove (imaju i sad, ne pori�em), i radili su u okviru Flash-a. Medjutim, sve se promenilo odkada je uveden HTML5.

<video width="320" height="240" controls>


  <source src="movie.mp4" type="video/mp4">


  <source src="movie.ogg" type="video/ogg">


</video>

Dakle, tagom video width i height defini�emo �irinu i visinu elementa. Controls slu�i za prikazivanje kontroli plejera. Source src je izvorni tag, i defini�e izvor datog video fajla. Prikazana su dva tipa: kada je format .mp4 i kada je format .ogg.

>Testiraj ovde<

Audio prikaz

Sa audio fajlovima je, pre uvodjenja HTML5, bila ista stvar kao i sa Video prikazom.

<audio controls>


  <source src="horse.ogg" type="audio/ogg">


  <source src="horse.mp3" type="audio/mpeg">


</audio>

Tag je potpuno sli�an, tako da mislim da nema �ta posebno da se obja�njava, a �to nije pomenuto u prethodnom primeru.

>Testiraj ovde<

Drag & Drop funkcija

Drag & Drop funkcija je pomeni najzadivljuju�a funkcija, jer �e se po mom mi�ljenju i najvi�e koristiti na interaktivnim sajtovima. Ova funkcija omogu�ava da kursorom 'uzmete neki lement' i da ga pomerite na ta�no predvidjeno mesto. Ako ga ne pomerite tamo gde treba i pustite klik, element �e se vratiti u svoj prvobitni polo�aj.




<!DOCTYPE HTML>


<html>


<head>


<script>


function allowDrop(ev)


{


ev.preventDefault();


}





function drag(ev)


{


ev.dataTransfer.setData("Text",ev.target.id);


}





function drop(ev)


{


ev.preventDefault();


var data=ev.dataTransfer.getData("Text");


ev.target.appendChild(document.getElementById(data));


}


</script>


</head>


<body>





<div id="div1" ondrop="drop(event)"


ondragover="allowDrop(event)"></div>





<img id="drag1" src="img_logo.gif" draggable="true"


ondragstart="drag(event)" width="336" height="69">





</body>


</html>

Pa da po�nemo. function AllowDrop omogu�ava funkciju. prevent tag omogu�ava da element, ako se nalazi blizu mesta gde treba biti izba�en bude spreman. To je kao kada trka� treba da krene kada za to sudija da znak. Ovo omogu�ava da ne moramo da postavimo element ba� u sam krug delovanja ve� i malo dalje od njegovog centra.




[b]function drop(ev)


{


ev.preventDefault();


var data=ev.dataTransfer.getData("Text");


ev.target.appendChild(document.getElementById(data));


}[/b]

Ova funkcija se odradjuje kada element 'pada' na datu ta�ku ili krug delovanja. De�ava se transfer (u ovom slu�aju teksta) i kreira se radijusov pre�nik pri kome lement ulazi na centar. On dobija centrirani polo�aj unutar kruga delovanja.

>Testiraj ovde<

HTML5 Geolokacija

HTML5 funkcija Geolokacije , omogu�ava da na brz na�in vidite odakle je va� posetilac. Preko API se u�itava IP adresa i tako se odredjuje lokacija korisnika.

<script>


var x=document.getElementById("demo");


function getLocation()


  {


  if (navigator.geolocation)


    {


    navigator.geolocation.getCurrentPosition(showPosition);


    }


  else{x.innerHTML="Geolocation is not supported by this browser.";}


  }


function showPosition(position)


  {


  x.innerHTML="Latitude: " + position.coords.latitude +


  "<br>Longitude: " + position.coords.longitude;


  }


</script>

Vodi� za Mozilla 12.0

Ako imate Mozilla brauzer, (ovo radi i na ostalim brauzerima ali je durga�iji prikaz) morate odobriti da element prika�e va�u lokaciju. Bez va�e dozvole ovo je nemogu�e.

1. Korak

Kada je u toku rada ovaj element, na stranici na kojoj se nalazite u tom trenutku kada je ukklju�ena ova funkcija pored URL upisnika na�i �e se ikonica mete.

Ova meta se zove target, a ovaj tag se nalazi i unutar koda, a odredjuje poziciju (IP broj).
Medjutim, to je tek po�etak, jer aplikacija tra�i dozvolu od vas.

2. Korak

Kada se ovaj simbol pojavi kliknite na njega i otvori�e se jezi�ak dat na slici:

Ako ste sigurni da �elite da podelite svoju lokaciju sa tim sajtom (stranicom), kliknite na Share Location.

Rezultat

Ako ste odobrili stranici da vidi va�u lokaciju, trebalo bi da se pojavi Google mapa sa va�om lokacijom.

>Testiraj ovde<

Web Storage

HTML5 pored svih gore navedenih funkcija, omogu�ava korisniku da �uva podatke unutar baze. Do pre HTML5, taj posao su obavljali cookies.

�ta je Cookie?

Cookies (kola�i�i) na Internetu predstavljaju mali deo podataka poslat sa veb sajta i uba�en u brauzer korisnika. Naprimer, ako �elimo da nam sajt zapamti lozinku kada se slede�i put logujemo, moramo omogu�iti kola�i�e.

Kola�i�i mogu biti i vrlo opasni jer predstavljaju jedno od oru�ja hakera u prikupljanju informacija.

Da nastavimo o Web Storage. Postoji Local Storage i Session Storage. Local Storage slu�i da ubaci podatke koji nemaju svoj rok trajanja , a Session Storage se koristi za kratkotrajne podatke (za jednu sesiju).

Pre nego �to iskoristimo ovu funkciju, moramo videti da li na� brauzer podr�ava Web Storage:

if(typeof(Storage)!=="undefined")


  {


  // Da! localStorage i sessionStorage su podr�ani!


  }


else


  {


  // Gre�ka! Brauzer ne podr�ava Web Storage!


  }

// re�enice iza ovih znakova predstavljaju komentare.

Zna�i kod ispituje da li brauzer podr�ava Web Storage.

Local Storage

Local Storage �uva podatke koji nemaju svoj rok trajanja. Oni ne mogu biti obrisani i bi�e tu slede�eg dana, nedelje, meseca, godine ...

localStorage.lastname="Smith";


document.getElementById("result").innerHTML="Last name: "


+ localStorage.lastname;

Zna�i, klju�na re� tj. varijabla je Smith. Kada browser u�ita text Last Name: (prezime), automatski �e mu izbaciti localStorga.lastname koji je definisan re�ju Smith, i brauzer �e od prvog kori��enja pa nadalje uvek zapamtiti ovo (naravno ako podr�ava Web Storage).

U ovom primeru Local Storage ispituje broj klikova mi�a i format Number prebacuje u broj.

if (localStorage.clickcount)


  {


 [b] localStorage.clickcount[/b]=Number(localStorage.clickcount)+1;


  }


else


  {


  localStorage.clickcount=1;


  }


document.getElementById("result").innerHTML="Kliknuo si na dugme " [b]+ localStorage.clickcount[/b] + " put(a).";

Zna�i sve se u kodu vrti oko Local Storage.

Session Storage

Session Storage je sli�an Local Storage, a razlikuje se samo po tome �to podaci iz Session Storage nestaju �im zatvorimo brauzer.

if (sessionStorage.clickcount)


  {


  sessionStorage.clickcount=Number(sessionStorage.clickcount)+1;


  }


else


  {


  sessionStorage.clickcount=1;


  }


document.getElementById("result").innerHTML="Kliknuo si na mi�a" + sessionStorage.clickcount + " put(a) u ovoj sesiji.";

Sesija - odredjeni rok, interval

App Cache

�ta je App Cache? HTML5 omogu�ava da se aplikacija ke�ira, te da se mo�e koristiti i izvan Internet konekcije.

�ta je ke�iranje u ra�unarstvu?

Kada ke�iramo neki podatak, ra�unar taj podatak �uva i omogu�ava da se svaki slede�i put on br�e prikazuje.

Slede�i put �u objasniti primer koda.

WebGL

WebGL (Web Graphics Library) je JavaScript aplikacijski programski interfejs za prikazivanje 3D i 2D grafike unutar bilo kog kompatibilnog brauzera bez koriscenja raznoraznih plugin-a.

WebGL je baziran na OpenGL ES 2.0 i obezbedjuje API za 3D grafiku. WebGL je prona�ao svoje mesto pod zvezdama kada je ,Vladimir Vuki�evi�, demonstrirao protoip 3D Kanvasa 2006. godine. 2007. godine Mozilla i Opera su stvorile svoje sopstvene implementacije.

Implementacije za WebGL

Desktop brauzeri

Mozilla Firefox
Google Chrome
Safari
Snow Leopard
Opera
IE

Mobilni brauzeri

Nokia N900
Mobile Firefox
Opera Mobile
Tizen 1.0

Tagovi koji nisu uba�eni u HTML5

Za sve one koji su se navikli na stare HTML4 elemente - oprostite se od <big>, <center> i nekolicine drugih tagova koje ste sigurno �e��e koristili jer su svi ti elementi koji su se nalazili u HTML4 uklonjeni i ne nalaze se u HTML5!

    <acronym>


    <applet>


    <basefont>


    <big>


    <center>


    <dir>


    <font>


    <frame>


    <frameset>


    <noframes>


    <strike>


    <tt>

Linkovi

Sistematika preuzeta sa w3schools.com.
Sve kodove iz ovog �lanka mo�ete testirati na w3schools.com/html/tryit.asp?filename=tryhtml_intro. U levom polju pi�ete skripte, a u desnom se skripte prikazuju. Ako dodje do problema pri prikazivanju kliknite na dugme Submit Code.

Ostali linkovi
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]

Sve ove kodove (ve�inu), podr�avaju slede�i brauzeri:

Internet Explorer 9, Firefox, Opera 12, Google Chrome i Safari 5.

WEB Dizajn Tutorijali

nobody@mycity.rs (ilovephp) — Fri, 02 Nov 2012 18:16:34 +0100

�ta je to HTML?
----------------------------------
HTML je opisni jezik za opisivanje veb stranica. Sastoji se od oznaka (jo� mogu da se zovu i tagovi). Neki od osnovnih su: Head, Body ....
Postoji vi�e verzija a trenutno aktuelna je 4 dok se radi na 5 (sve vi�e se koristi).

�ta je to CSS?
----------------------------------
CSS u kombinaciji sa HTML-om �ine veb stranu. Koristi se za definisanje izgleda stranica, boje teksta, pozadine i sli�no.

SADR�AJ
-----------------------------------------------------------------------------------------------------------

Osnove HTML i CSS

1. Osnove HTML
2. Dodavanje teksta
3. Dodavanje slika
4. Kako promeniti pozadinu?
5. Linkovi
6. Forme i dugmad
7. Title, heading I div
8. Pozicija elemenata, float, marigine i padding
9. Tabele
10.SEO optimizacija HTML elemenata
11.Responsive dizajn-Slike
12.Slike kao linkovi
13.HTML 5 Audio Player

14.HTML 5 Video Player

-----------------------------------------------------------------------------------------------------------
Kako napraviti i dizajnirati sajt?
1. Kako napraviti jednostavan sajt?
2.
-----------------------------------------------------------------------------------------------------------

Jo� tutorijala na: [Link mogu videti samo ulogovani korisnici]

Vasa misljenja i predlozi o dizajnu!!!

nobody@mycity.rs (_ivKe) — Fri, 26 Oct 2012 18:33:16 +0100

Po�tovani,

U potpunosti sam redizajnirao sajt, pa bih vas molio da ostavite komentar onoga �to mislite da je dobro osmi�ljeno/ura�eno, ali me prvenstveno zanimaju va�e kritike. �ta bih to trebalo promeniti? (Da li je to brzina ucitavanja sajta/pojedine stranice, dizajn nekog dela, preglednost, pravopisne gre�ke, ne�to �to nedostaje, a po Vama bi trebalo tu da stoji itd.). Sve ideje o tome kako re�iti neke probleme su vi�e nego dobrodo�le!

Hvala!

[Link mogu videti samo ulogovani korisnici]

Film u fullscreen modusu- recept

nobody@mycity.rs (Tamtitam) — Wed, 04 Mar 2009 11:57:46 +0100

Nivo:Pocetnicki
Vreme prpreme: 5 minuta. Ukoliko je film duzi racunajte jos koji minut vise na prebacivanje u flv.

Za ovu poslasticu vam treba:
-Flash CS3 ili vise
-film u flv formatu

Da biste dobili film u flv formatu za danas preporucujem Flash CS3/4 Video Encoder koji dobijate u Adobe paketu. Naci cete ga pod Start->Programs->Adobe (tamo gde lezi i flash).
Koriscenje je jednostavno, izaberite parametre, kvalitet filma i destinaciju gde cete flv da sacuvate. Za nas slucaj, neka to bude folder gde vam lezi i swf fajl koji cemo tek da napravimo.

Otvorite Flash, kliknie na novi fajl, a za velicinu scene izaberite velicinu filma koji cete da prikazujete. Za pozadinu izaberite crnu boju.

Sada idemo na File->Import->Import Video.
Klik na browse, pa izaberite taj flv fajl tamo gde ste ga sacuvali. Next.
Ako niste bas cvrsto odlucili da strimujete i obezbedili sve za takav nacin prikazivanja filma, onda preporucujem progressive download from server. Next.
Izaberite skin.
Ako ne zelite nista da kodirate, preporucujem SkinOverPlaySeekFullscreen varijantu. Ili neku drugu koja ima to "fullscreen" na kraju imena. Tako automatski dobijate dugme koje ce vas prebaciti u zeljeni modus (i iz njega)
Next. Finish.

Sada kliknite na tu svoju FLVPlayback komponentu koja vam je na sceni i zatim na "parameters". Ovde mozete naknadno da menjate parametre za svoj player.
Pre nego sto prebacite sve na server uradite sledece: izmenite lokaciju za film koji importujete: izbrisite path tako da vam ostane samo ime filma. Flash ce se zaliti i bice problema sa lokalnim testiranjem, ali ce na serveru raditi bez greske.

Ne zaboravite da dodate tag na HTML stranici: allowFullScreen value da bude true.

To je sve. Dodacu nesto kasnije i AS kod, za one koji bi poluautomatsku varijantu i da se igraju malo sa komponentom i izgledom.

25 impresivnih linija actionScript koda- rezultati konkursa

nobody@mycity.rs (Tamtitam) — Wed, 10 Dec 2008 09:36:17 +0100

Zaista fantasticno:
25lines.com/?page_id=139

Ne znam sta me je vise fasciniralo, rezultat ili sam kod

----------- Dopuna: 10 Dec 2008 10:42 ---------

Ovo je delo genija.... 25 linija... obozestvarnoooo.
25lines.com/finalists/0812/043.swf
(moj favorit)

Tutorijal: Flash+PHP, slanje forme

nobody@mycity.rs (Tamtitam) — Wed, 22 Oct 2008 19:06:22 +0100

AS2.0

Ovo pitanje je toliko puta bilo postavljano a ja sam sve vreme otezala sa ovim tutorijalom jer, moram da priznam, ne koristim ovaj nacin kombinovanja Flasha i PHPa (o amfPHP-u neki drugi put...). Fala lnenadu sto me je podsetio da i server postoji

No, za sve one koji bi na jednostavan nacin da ugrade u svoj flash i formular koji posetilac na sajtu popuni a vi dobijete taj feedback putem e-maila, evo kako to uraditi u nekoliko jednostavnih poteza.

Dakle, sta pravimo?
Formular u Flashu koji posetilac sajta moze da popuni, zatim klikom na "Posalji" tu poruku saljemo na server, odnosno PHPu, PHP salje nama e-mail sa tekstom poruke i zatim vraca odgovor Flashu i posetiocu da je poruka poslata kako treba (ili da nije).

Otvorite Flash

-Na scenu 'izvucite' komponentu TextArea i u properties joj dajte ime poruka. Ovo ime ce se ponavljati i kasnije pa nemojte biti jako mastoviti i menjati ga

Ispod tekstualnog polja izvucite komponentu Button i nazovite je u properties posalji. U parameters pod "label" upisite "Posalji".

-Frame broj 2 neka sadrzi samo poruku (tekst polje) "Poruka poslata". Ovaj frame u properties nazovite uspeh. Frame broj 3 neka sadrzi poruku "Poruka nije poslata". Ovaj frame nazovite u properties neuspeh. U oba frejma, naravno, upisite stop();

Ok, to je sve sto nam treba za pocetak od interfejsa (kasnije eksperimentisite sami ako hocete jos polja- ime, e-mail, adresa, telefon...)

Sad kod:

Napravite novi layer na timeline. Taj ce nam ugostiti kod.
Za pocetak nam trebaju dva objekta koji ce da 'nose' podatke ka serveru. Oba ce biti LoadVars tipa.




stop();


var saljem:LoadVars= new LoadVars();


var primam:LoadVars= new LoadVars();

Sada vezujemo kod za dugme "Posalji". I ovo pisemo odmah ispod prethodnog koda, dakle u prvi frame na glavnoj vremenskoj liniji.




  posalji.onRelease = function(){


   saljem.poruka = poruka.text;   //dodeljujemo objektu ono sto saljemo ka serveru


   saljem.sendAndLoad("http://neki-moj-sajt/forma.php", primam);


}

PHP po imenom forma.php jos ne postoji, ali i to pravimo uskoro.
primam je objekat koji ce da nosi povratnu informaciju sa sajta o uspehu slanja poruke.

Sta ce se desiti u Flashu kad stigne povratna poruka sa servera?
U nastavku sledi kod:




primam.onLoad = function(){


   if(this.poslatoOK){ 


      _root.gotoAndStop("uspeh");


   }else{


      _root.gotoAndStop("neuspeh");


   }


}

Kompajliramo flash i uploadujemo na server na [Link mogu videti samo ulogovani korisnici]

poslatoOK je promenljiva koja dolazi iz PHPa. Vrlo je zgodno da Flash prepoznaje promenljivu iz PHPa samo po imenu.

PHP:

Ceo PHP izgleda ovako:







<?php





$to = "k**@gmail.com";


$subject = "Komentar";


$message= "Poruka: " .$poruka;  //ovo je ta nasa "poruka" iz txt polja u Flashu


$from="Sa sajta";





$poslatoOK = mail($to,$subject,$message,$from); //poslatoOK ce biti true ili false


echo "poslatoOK=" . $poslatoOK;  //ovo Flash 'vidi'





?>

Snimiti kao "forma.php".

Naravno da je dozvoljeno da ubacite vise polja, da poruka ne ode na e-mail nego u recimo bazu podataka, knjigu gostiju... sta bilo. Sta god PHP moze da radi sa nekom promenljivom, to mozete i vi sa $poruka. Ali vi sigurno bolje znate PHP od mene pa kombinujte do mile volje ovde biramo najjednostavniju varijantu.

Upload oba fajla, .swf i .php na server, pod isti direktorijum i javite da li radi!
Prijatno

mali slide show plugin za jQuery

nobody@mycity.rs (Blood) — Sun, 12 Oct 2008 01:01:10 +0100

Evo jednog jQuery plugina koji sam napravio pa resio da podelim sa vama. Siguran sam da moze nekome koristiti.

serie3.info/s3slider/

Komentari su dobro dosli.

p0zdrav.

Video na sajtu

nobody@mycity.rs (Rastafarii) — Tue, 27 May 2008 02:47:02 +0100

Bilo je par pitanja o tome kako postaviti video na sajt, te mislim da ne bi bilo lose napisati jedan mali tutorial o tome.

Korak prvi: Izbor formata

Prvo sto morate uraditi je da odaberete format video fajla - DivX, QuickTime, Windows Media Video ili Flash Video. Ja cu ovde objasniti kako dodati video u formatu Flash Video (u daljem tekstu FLV), jer je to najprakticniji nacin: sve sto je potrebno za prikaz ovakvog video fajla je Flash player (koji imaju skoro svi - za razliku od razlicitih kodeka), a i velicina samog fajla je sasvim dovoljno mala za skidanje preko neta. Idemo redom:

Korak drugi: Konvertovanje video fajla

Najjednostavnije, a i najjeftinije (citaj: besplatno) resenje koje sam ja nasao je Riva FLV Encoder. Instalacija je velika 4.73 MB i moze se skinuti sa download.com.

Samo konvertovanje je veoma jednostavno: izaberete ulazni fajl, direktorijum gde zelite da smestite konvertovani fajl, ime fajla, jos par sitnica (sve je na vidnom mestu, i mogucnost greske je smanjena na minimum) i kliknite na -> FLV Encode.

Nakon konvertovanja (koje moze da potraje u zavisnosti od duzine ulaznog fajla), u polju Result bice napisan rezultat konvertovanja. Ukoliko je sve u redu, pola posla je zavrseno. Nakon toga, dobijeni fajl uploadujte na vas server koristeci FTP ili bilo koji drugi nacin uploada - i naravno zapamtite gde ste postavili FLV fajl.

Korak treci: FLV Player

Sad vam treba i nacin da konvertovani FLV prikazete na sajtu. U moru komercijalnih i polukomercijalnih resenja, nasao sam i freeware resenje - JW FLV MEDIA PLAYER 3.16. Mozete ga skinuti sa jeroenwijering.com, arhiva je teska oko 854 KB.

Uploadujte mediaplayer.swf i swfobject.js iz arhive koju ste upravo skinuli (i eventualno video.flv - mada je on tu samo da prikaze kako player izgleda i radi u slucaju da nemate nijedan FLV fajl), i krenite sa podesavanjima.

JW FLV MEDIA PLAYER 3.16 sa default podesavanjima izgleda ovako:

HTML kod za prikazivanje playera je sledeci:

<div id="container">Da biste videli ovaj video, neophodan je <a href="http://www.macromedia.com/go/getflashplayer">Flash Player</a> .</div>


<script type="text/javascript" src="swfobject.js"></script>


<script type="text/javascript">


var s1 = new SWFObject("mediaplayer.swf","mediaplayer","300","185","8"); //samo izmenite sirinu i visinu


s1.addParam("allowfullscreen","true");


s1.addVariable("width","300"); //opet, promenite sirinu


s1.addVariable("height","185"); //kao i visinu


s1.addVariable("file","video.flv"); //i ovde upisite putanju do fajla


s1.write("container");


</script>

njega ubacite (klasican copy/paste, uz male izmene) na stranicu na kojoj zelite da prikazete video, i to bi bilo to

Flash igrice paznja * zarazno*

nobody@mycity.rs (Tamtitam) — Fri, 28 Mar 2008 14:39:06 +0100

Da ne bude da samo tupimo ovde sa teorijom, evo naleteh na neke Flash igrice koje ce vam sigurno povecati faktor izgubljenog vremena. Muahahahahaha.

Massive Attack, jednostavna i efektna:
mass.attack.fizzlebot.com/

******
Takodje vrlo jednostavno i vrlo zarazno! Boomshine!
k2xl.com/games/boomshine/

******
Hehe. Nemam reci, odlicna je!
The Fancy Pants Adventure:
armorgames.com/play/553/the-fancy-pants-adventure-world-2

******
Avantura, Escape Vision, ja licno volim ovakve igrice, pa mi je i Flash verzija mila:
neutralx0.net/home/esc_vision.html

******
Ovo nije za one koji su osetljivi na krv i male mace u istom kadru
samuraikittens.com/

******
Incredible machine! Jel se jos neko seca te igrice? Evo jednostavnije ali ipak zabavne verzije, Ramps. Za sve koji su se pitali sta ce im fizika u zivotu:
tylersticka.com/2007/08/03/ramps/

Kako napraviti web sajt

nobody@mycity.rs (m4rk0) — Wed, 12 Dec 2007 15:44:17 +0100

[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]
[Link mogu videti samo ulogovani korisnici]

Tutorial: Kako da konvertujem svoj DVD u FLV?

nobody@mycity.rs (Tamtitam) — Fri, 09 Nov 2007 16:55:01 +0100

... a flv nam treba da bismo mogli da taj isti DVD snimak pustimo i preko browsera, servera, da ne ka�em Interneta, pa da ceo svet vidi kroz jedan lep flash player, kako nam deca brzo rastu, begonije na maminoj terasi cvetaju ili kako tata peca . Ovo ka�em samo da vam obratim pa�nju na to da pri�amo o filmovima koji su u va�em li�nom vlasni�tvu i imate autorska prava da s njima radite �ta vam je volja (naravno ako dobijete dozvolu i od mame, tate i dece ;-) ). Tek da se zna.

Redosled je slede�i: DVD->.avi-.flv

Ja li�no koristim free program Auto Gordian Knot da bih konvertovala (ripovala) DVD, ta�nije .VOB u .avi.
Gordian knot se nalazi na sourceforge.net/projects/gordianknot
Kao input fajl izaberite .VOB fajl, output �e biti taj va� novi fajl a ako ne�to zapne kod parametara, pitajte.
Kad izaberete sve opcije->add job->start i �ekati...

Posle konvertiranja koje traje koliko i pe�enje kora u rerni (zavisi od ma�ine i naravno du�ine filma... ali ne ra�unajte da �e biti brzo gotovo) dobili ste recimo letovanje.avi koje je spremno za Flash.

E sad, iz .avi u .flv:

Otvorite novi fla fajl u Flashu i izaberite "import->import video". Otvori�e vam se prozor sa dijalogom.
-On your computer-> odavde browse do na�eg .avi fajla (next)
-Ovde radimo samo sa progresivnim DL. Dakle, prva opcija. (next)
-Medium kvalitet je sasvim ok. Ili? (next)
-Skinning presko�ite, sad ne pravimo player, nego samo konvertujemo.
-I finish

Ova faza traje, da ka�em na primeru, 15 minuta za desetominutni film.

U folderu biste sada trebali da nadjete taj .flv fajl koji mo�ete da pu�tate iz nekog (svog - custom playera ili ve� gotovog playera)

�to se ti�e samog Flash playera, koji �e da vam se vrti na web-strani, tu imate razne mogu�nosti o kojima je ve� bilo re�i na forumu, ali ako vam se ne pravi ni�ta novo, onda skinite gotovi flowplayer koji se lako ugradjuje u browser.
downloads.sourceforge.net/flowplayer/flowpl.....g_mirror=0
Sa�uvajte svoj .flv u istom folderu gde stoji i player, i promenite default URL u fajlu koji se zove flowplayer.html, u kako ono be�e, letovanje.flv.

Flash inspiracija...

nobody@mycity.rs (Tamtitam) — Fri, 26 Oct 2007 08:31:06 +0100

...iliti flinspiracija

Bilo je vec slicnih tema, npr najbolji flash sajtovi, najbolje uradjeni, party party, bljesti i sljasti ... naj naj naj... kao recimo sto je 2advanced.com i slicni. I jesu naj, ali ako su naj ne znaci da su inspirativni. Mnogi od njih (bar mene) demoralisu u startu jer izgledaju kao da ih je u najmanju ruku, napravio tim gurua, geekova koji sljakaju 24/7... ma 35/10... team od 1300 ljudi koji sve zna, ma svi doktori medijskih nauka.
Suvise je to meni perfektno sto bi rekao Rodzer u 101 dalmatincu

Evo zato nekoliko linkova koji su, kako bih rekla, "napravljivi" i kada ih posetim.... zasvrbe me prsti!

Ovo je sajt koji ove nedelje preporucuju na Flashkit-ovom sajtu

printmediany.com/

Nesto sto se meni dopalo, onako "na dodir"
abc-land.co.jp/

Flash i w3c validacija

nobody@mycity.rs (Rastafarii) — Sun, 30 Sep 2007 10:56:55 +0100

Svako ko postuje w3c web standardne, a u dizajniranju sajtova koristi flash (*.swf) animacije, dolazi do problema: kako "ubaciti" *.swf a da pri tom kod ostane validan.

Idemo redom:

Korak 1: Eksportovani html kod za *.swf

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"


codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="468" height="60" title="title">


<param name="movie" value="flash.swf" />


<param name="quality" value="high" />


<param name="allowScriptAccess" value="sameDomain" />


<embed src="flash.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" width="468" height="60"></embed>


</object>

i rezultat validacije je:
Citat:Validation Output: 8 Errors

Svih 8 gresaka je posledica toga sto embed tag nije definisan po w3c standardu.

Korak 2: Izbacivanje nevalidnog koda

Sta dalje? Prvo, izbaciti kompletan embed tag:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"


codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="468" height="60" title="title">


<param name="movie" value="flash.swf" />


<param name="quality" value="high" />


<param name="allowScriptAccess" value="sameDomain" />


</object>

Ovaj kod je vec validan, ali postoji jedan problemcic: radi samo u Internet Exploreru. Zasto? classid koji je ovde naveden je specifican za IE, dovodeci do toga da nonIE browseri jednostavno ignorisu object tag.

Korak 3: Sredjivanje koda za nonIE browsere

<object type="application/x-shockwave-flash"


codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="468" height="60" title="title">


<param name="movie" value="flash.swf" />


<param name="quality" value="high" />


<param name="allowScriptAccess" value="sameDomain" />


</object>

Ni ovo nece pokrenuti *.swf u nonIE browserima, ali resenje ja sve blize. U cemu je sad problem? Problem je u codebase atributu, koji sadrzi link do Macromedijinog sajta, sto je nepravilna upotreba ovog atributa. Linkovi bi trebalo da budu na istom domenu, preko cega IE prelazi, ali FF drzi do sigurnosti i jednostavno nece pustiti *.swf.

Korak 4: codebase i sigurnost u FF

<object type="application/x-shockwave-flash" width="468" height="60" title="title">


<param name="movie" value="flash.swf" />


<param name="quality" value="high" />


<param name="allowScriptAccess" value="sameDomain" />


</object>

Kod je sve manji i manji, jos uvek je validan, ali nece da radi u FF. U cemu je problem?

Korak 5: DATA atribut

U data atributu, koji nije definisan u okviru object taga. U slucaju da se definise, to izgleda ovako:

<object type="application/x-shockwave-flash" width="468" height="60" title="title" data="flash.swf">


<param name="movie" value="flash.swf" />


<param name="quality" value="high" />


<param name="allowScriptAccess" value="sameDomain" />


</object>

I dobijamo resenje: validan HTML kod za *.swf koji radi svuda. Ukoliko je vas flash fajl relativno mali, i ne koristi preloader, ovo je sve sto vam treba, u suprotnom...

Korak 6: Preloader za velike fajlove

ALI ovo resenje radi SAMO za fajlove reda velicine 1-100 kb, pod uslovom da nemaju preloader. Svi fajlovi koji imaju preloader, izgubice njegovu funkciju, jer, ukoliko se kod ispise na ovaj nacin, flash mora biti ucitan skroz da bi "krenuo". Sta sad?

Predpostavimo da imate flash fajl velicine 500KB, i da on ima preloader. Kako ga pustiti, bez cekanja da se ucita? Jednostavno. Napravite malecni (par KB) flash player, i odatle pozovete veliki flash fajl. Deluje malcice glupo ali radi: preloader se vidi, kod je validan, radi u svim browserima.

Mane validnog html koda

OSIM sto IE i slicni browseri nece update-ovati flash plugin u slucaju da je to potrebno. FF hoce, ali codebase atribut je jedini nacin da IE shvati gde se nalazi novi flash plugin. Sta sad? Dva resenja su moguca:

1) napraviti mali flash fajl, recimo 1px*1px koji osim sto sadrzi codebase atribut nema drugu svrhu. FF ga nece pustiti, ali to i nije toliko bitno. Vazno je da korisnici IE browsera mogu da update-uju flash plugin. Bitno je da kod tog fajla bude sredjen kao u koraku 2.

2) definisati alternativni sadrzaj: object tag dozvoljava "child" elemente, i ucitava ih redom, po potrebi. Ako browser ne moze da ucita prvi element, ucitava drugi, ako ne moze ni drugi, onda treci i tako redom...

<object type="application/x-shockwave-flash" width="468" height="60" title="title" data="flash.swf">


<param name="movie" value="flash.swf" />


<param name="quality" value="high" />


<param name="allowScriptAccess" value="sameDomain" />


<img src="noflash.gif" 


width="468" height="60" alt="">


</object>

i to je to vas flash fajl sada ima validan kod, radi svuda, bez obzira na browser i velicinu, a cak i u slucaju da ga je nemoguce prikazati, ne ostavlja prazan prostor vec prikazuje alternativnu sliku.

Flashforward2007 festival, Boston... Finalisti + pobednici!

nobody@mycity.rs (Tamtitam) — Tue, 07 Aug 2007 11:31:14 +0100

Flashforward je prestizni flash festival i ove godine se odrzava po 7. put u Bostonu od 19. do 21. septembra. To je mozda jedno od najvecih okupljalista flashera i flash gurua iz celog sveta.
Program, imena i ostalo bla bla bla preskacemo a evo i finalista ovog festivala u videcete, najrazlicitijim kategorijama.

Dakle, Flash crème de la crème:
flashforwardconference.com/finalists

Ukoliko ste u mogucnosti, SVE pogledajte... radovi su fantasticni i ako i ne naucite nista, bicete ...
inspirisani.