Tutorijali

How to Create an Image Slider using jQuery and CSS3 [Tutorial]

U ovom tutorijalu naučićete kako da napravite slajder sa“Nivo Slider jQuery Script” i CSS3.

Making an Impressive Product Showcase with CSS3

Još jedan dobar tutorijal koji objašnjava kako da obogatite svoju stranicu sa CSS3 magijom i jQuery.

How to Create a Stylish Image Content Slider in Pure CSS3 [Tutorial]

Ovaj tutorijal objašnjava kako da napravite čist I prelep CSS3 slajder za slike.

CSS3 Pricing Table

Ovaj tutorijal sadrži čitav niz novih CSS3 mogućnosti uključujući: transforme, gradient, senčenje, nth-child.

CSS3 breadcrumbs

Napravite svoj sopstveni CSS3 niz kako bi poboljšali upotrebljivost svog websajta.

Animated Content Tabs with CSS3

Ovaj tutorijal pojašnjava implementaciju nekih prostih CSS3 elemenata uz pomoć radio dugmića I pseudo elemenata.

Responsive Horizontal Layout

U ovom tutorijalu otkrićete kako se kreiraju horizontalno okruženje sa nekoliko segmenata u samom sadržaju.

Login and Registration Form with HTML5 and CSS3

U ovom tutorijalu kreiraćemo dve HTML5 forme koje će biti promenljive iymeđu prijavne I registracione forme uz pomoć CSS3 pseudo klase :target.

Responsive Content Navigator with CSS3

Ovaj tutorijal pokazuje kako napraviti navigator uz pomoć CSS.

How to Create Calendar using jQuery and CSS3 [Tutorial]

Ovaj tutorijal pokazuje kako se pravi kalendar uz pomoć CSS3 I jQuery.

Industrija dizajna je verovatno jedna od onih sa najvećom ekspanzijom I najbržim razvojem. Dizajneri moraju pratiti sve, uključujući tu I nove trenedove u vizuelnom dizajnu, tehnologije poput jQuery, HTML5 I CSS3. Ove tehnologije omogućavaju dizajnerima da razvijaju svoju kreativnost kroz produkciju dizajna I prave bogatije radove. U današnjem postu želim sa Vama da podelim neke veoma zanimljive I korisne CSS3 tutorijale za pravljenje raznih web dizajn elemenata I instrukcija. Iskoristite ovu kolekciju kako bi naučili nešto novo I pripremili se za web koji dolazi u bliskoj budućnosti.

U ovom tutorijalu naučićete kako da napravite dinamičku stranicu samo uz pomoć CSS, bez upotrebe slika ili dizajniranja u fotošopu. Ovu tehniku možete upotrebiti za bilo koju aplikaciju ili websajt koje spremate za krajnju upotrebu.

U ovom kratkom tutorijalu naučićete da kodirate navigacioni meni u čistom CSS3. Jednostavan, čist I profesionalan pristup.

Prateći ovaj tutorijal naučićete da re-kreirate Orman Klarkov vertikalni navigacioni meni uz pomoć CSS3 I jQuery, koristeći minimalnu moguću količinu slika.

U ovom tutorijalu videćete kako kreirati niz koji će animirati delove sadržaja po otvaranju ili zatvaranju stranice uz pomoć skrivenih inputa I komandi.

U ovom tutorijalu naučićete da kreirate dugmiće uz pomoć 100% CSS i Entypo. Dugmići bez slika su fleksibilniji, zahtevaju manje podataka za download I lako se menjaju.

U ovom tutorijalu Tom Keni će pokazati kreiranje iluzije zakačenih elemenata uz pomoć CSS3 pseudo-elemenata.

Još jedan odličan tutorijal za kreiranje jQuery efekta. Naučite kako se kreira LavaLamp efekat uz pomoć CSS3 promene.

U ovom artiklu upoznaćete kako dizajnirati čistu I atraktivnu prijavnu formu.

U ovom tutorijalu videćete kako kreirati prelep I impresivan portfolio uz pomoc Timeline jQuery dodatka I CSS3.

U ovom tutorijalu videćete kako upotrebiti CSS3 transformaciju da bi kreirali interesantan flipping efekat u Apple-inspirisanoj formi.

U sledećem postu pokazaćemo Vam kako da na jednostavan način napravite svoj brush.

Otvorite novi dokument file/new, stavite format dokumenta po sopstvenoj želji. Mi smo kreirali dokument 500 x 500 pixela, a pozadina neka bude transparentna.

Po transparentnoj pozadini možete crtati četkicom, a možete i koristiti neku fotografiju i sačuvati kao brush što ćemo Vam pokazati u poslednjem koraku.

Izabrali smo fotografiju koja ima belu pozadinu, a savetujemo i Vama kako bi je lakše selektovali i odstarnili pozadinu. Što se tiče selekcije pozadine koju treba da obrišete možete koristiti Magic Wand Tool, Magnetic Lasso Tool, ukoliko Vam je boja pozadine jednobojna.

Izaberite neku alatku za selekciju. Mi smo odabrali Rectangular Marquee Tool.

Selektujte jedan deo pozadine, kao što je prikazano na primeru, zatim u meniju izaberete Select/Similar i selektovaće se svi delovi slike koji su u boji pozadine. U našem primeru je pozadina bela, a delove koji su na objektu koje treba da izdvojimo moramo oduzeti od selekcije.

Oduzimanje selekcije izvršite tako što izaberete neku alatku za selekciju, držite Alt i krenete da selektujete ono što treba da oduzmete.

Kada ostane samo selektovana pozadina, dvoklikom na layer i OK otključajte ga i na delete brišete pozadinu. Na slici dole Vam je pokazano kako oključavate layer.

Isečeni objekat možete prebaciti na dokument koji ste kreirali na početku.

To sada izgleda ovako.

Upišite vrednosti sa primera i izaberite opciju colorize i dobićete ovakvu sliku.

Dalje možete pratiti slike i dobićete ovakav krajnji rezultat. Nazvali smo brush motor, Vi stavite proizvoljno ime.

Na kraju otvorite novi dokument, u brushevima izaberite poslednji brush i dobićete ovakav rezultat.

Ako do sada niste imali razlog da naučite HTML5 video implementaciju sad ćemo Vam reći zašto treba to da znate... Flash za mobilne uređaje praktično ne postoji. Mobilni uređaji su sve zastupljeniji i imaju sve više mogućnosti i predviđanje je da će do 2014 godine više ljudi surfovati internetom preko mobilnih uređaja nego preko desktop računara. Implementacija video materijala je izuzetno jednostavna uz pomoć HTML5 i u nastavku članka ćemo vam predstaviti nekoliko načina za implementaciju kao i par stvari na koje treba pripaziti.

Kako <video> tag funkcioniše

Pre HTML5 koristili smo <embed> ili <object> tagove za ovakve stvari. Ne znamo da li ste probali da namestite video na ovakav način ali reći ćemo da može da izazove glavobolju. Kao što se može primetiti korišćeni su eksterni izvori za procesiranje video materijala. Eksterni izvori znači da su korišćeni plug in-ovi koji nisu 100% kompatibilni sa sadržajem. Sa druge strane video tag je veoma jednostavan on pokazuje koje izvore može da koristi a u slučaju da ne može da koristi to što želite ispisaće vam poruku za alternativu.

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
<source src="movie.webm" type="video/webm" />
Bad news, you can't see the amazing stuff that is here.
</video>

Ovde će vam trebati izvori kao što su .mp4, .mp3, .ogg, .webm. a ako nemate neki od ovih formata tu je dosta html5 video konvertera. Trebaće vam različiti tipovi fajlova iz razloga što Firefox (3.5+), Opera(10.5+) i Chrome(5.0+) podržavaju .ogg dok Internet explorer(9.0+) i Safari(3.0+) podržavaju .mp4. Postoji nekoliko alternativa da se pobrinete kako bi vaši korisnici videli vaš video.

Atraktivni video player

Niste ograničeni na korišćenje samo ugrađenog plejera za video tag. Zapravo možete uraditi mnoge zanimljive stvari kao što su dodavanje CSS efekata, canvas reprdukcija itd. Ovde možete pogledati kako je poseban video player napravljen.

Kako ove posebne kontrole funkcionišu?

Kada se učita video koristićemo jQuery da uklonimo standardne kontrole i da dodamo naše HTML kontrole. Zatim jQuery kontroliše sve atribute koji nam trebaju kao readyState (ako se video pušta), vreme trajanja (da može slajder da se koristi), currentTime (da se vidi koliko je video-a pušteno) i kontrole za zvuk.

Posle podešavanja JS videćete da se video kontrole mogu lako stilizovati preko CSS-a kao što je trebalo da bude u početku.

Source: Opera Tutorial

Ima dosta plug in-ova koji mogu pomoći u celom procesu. Da pogledamo nekoliko:

WordPress Plugin – HTML5 i Flash Video Player

Sa ovim dodatkom sa lakoćom možete dodati video na stari način ili novi HTML5 sa flash fallback-om, uz pomoć shortcode-ova: [videoplayer file="video/video.flv" /] ili [videoplayer file="video/video.mp4, ogg, webm" /]

Napravite HTML5 video kao pozadinu sa jQuery.VideoBG plugin

Odlična stvar! Možete implementirati video u pozadinu i dobiti zaista snažan efekat.

Odličan video player ttwVideoPlayer jQuery Plugin

Jedan od najboljih video playera koji postoje i osim izgleda ima i sve potrebne opcije.

All in one rešenje jPlayer

Pogledajte prvi demo i shvatićete da nije u pitanju samo još jedan jQuery video plugin. Omogućava neke opcije koje su bile moguće samo u Flash-u.

Još jedna opcija – Html5video.org

Ovde možete pronaći objašnjenja i vesti vezane za HTML5 video tag.

Vaš RSS Feed je ponekad jedini način da posetioci saznaju šta nudite na svakodnevnoj bazi. Služi kako za informisanje tako i za zabavu ali je i bitan alat za povećavanje saobraćaja na vašem web sajtu kao i poboljšanju ukupnog SERP-a. Ako vaš feed samo pokazuje siromašne excerpte vaših članaka onda stotine posetilaca koji ne dolaze na vaš glavni sajt neće ni imati razlog da dođu ili podele sa drugima vaš sadržaj. Kada optimizujete RSS feed morate uzeti u razmatranje sadržaj koji stvarate. Postoji nekoliko razloga zašto želite da vaš feed generiše klikove. Možda imate proizvod ili uslugu prema vašem web sajtu kojem treba reklame odnosno posete. U nastavku članka ćemo vam dati nekoliko saveta kako da poboljšate vaš RSS kako biste imali veću posetu.

1. Koristite Feedburner

Feedburner nije samo moderna aplikacija koju treba da koristite jel je deo Google ponude aplikacija. Aplikacija ima ozbiljne moći i pruža opširni analizu saobraćaja kao i opcioni mehanizam za oglase koji nećete pronaći nigde a da je besplatno. Feedburner ima integrisano nekoliko bitnih funkcija koje su vam potrebne kako bi vaš RSS bio uspešan. Aktivirajte SmartFeed i Title/Description Burner za početak.

2. Dodelite vašem feed-u jak naziv

U većini slučajeva vaš feed će naslediti ime od vašeg web sajta. Ako je ime dvosmisleno ili počinje sa Z vaš feed može u tom slučaju biti nezapažen. Dodelite svom feed-u ime koje počinje sa nekim ranijim slovom iz alfabete pošto je većina čitalaca upoznata i prati alfabet. Pobrinite se isto tako da sadrži ključne reči koje su vezane za sadržaj koji imate odnosno da čitaoci imaju ideju o čemu se radi na vašem sajtu.

3. Poboljšajte vaš blog sa Feed-boosting dodacima

Ako ste prihvatili naš prvi savet i imate podešen feed u Feedburner, onda je moguće da postoji dodatak za vaš CMS ili bloging platformu koji će direktno uticati na saobraćaj preko Feedburner-a za najveći uticaj. U nastavku imate nekoliko linkova za najzastupljenije blogove:

Blogger

• Redirect
• RSS Widget
• Email Subscriptions

TypePad

• Redirect
• RSS Widget
• Email Subscriptions

WordPress

• FeedBurner plugin
• Yoast SEO

4. Pišite sadržaj visoke SEO vrednosti

Korišćenjem deskriptivnih ključnih reči u naslovima članaka, dodavanjem “ALT” opisa linkovima i slikama, tagovanjem sadržaja pravilno pomoći će da vas pretraživač brže indeksira.

Ako koristite WordPress, Yoast SEO dodatak je kompletno rešenje za vaš blog koje sadrži feed optimizaciju, kao i mali dodatak editoru članaka za kreiranje naslova i ključnih reči namenjenih za vaš feed i rezultate pretrage.

5. Uvek koristite kompletan kvalifikovan URL kada linkujete na druge sajtove ili sadržaj sa vašeg sajta

Kompletan kvalifikovan URL sadrži “http://” i vaš domen, za razliku od internog linka kao “../blog/?=234” ili slično. Neki web sajtovi nisu u stanju da obrade vaš feed ako vam linkovi nisu pravilno podešeni. Ovo uključuje i postavljanje linkova tako da se uvek otvaraju u novom prozoru korišćenjem target=”_blank” u vašim link tagovima.

6. Ubacite ALT tekst u vaše slike

Ovo ne samo da povećava standarde vašeg feed-a već omogućava da vam slike budu pravilno obeležene. Ovo je krucijalno ako imate fotoblog ili neki drugi tip web sajta sa slikama.

7. Odvojite slike od sadržaja

Ako imate umetnički orijentisan blog ili se vaš sadržaj vezuje za slike želećete da se vaši posetioci vrate na glavnu stranu da vide sadržaj u punom svetlu. Razmislite o uklanjanju slika sa vašeg feed-a ili postavite samo thumbnail i postavite poseban feed samo za slike. Ovom metodom optimizujete vaš feed sadržaja za mobilne uređaje.

8. Postavite footer na vaš RSS Feed

Koristite RSS footer za dodavanje social bookmark linkova, copyright informacija, povezanih post linkova, informacije o autoru, ili dodajte grafiku u podnožju svakog posta. Ova taktika dramatično povećava broj klikova ka drugim člancima na vašem blogu i omogućava cirkulaciju kroz vaš blog. Većina social bookmark dodataka za WordPress nudi opciju za dodavanje na vaš feed. FeedBurner isto tako omogućava opcije za footer za dodavanje pretplate na email i social linkova sa FeedfFlare optimizacijom.

9. Pingujte redovno

Pingovanje obaveštava različite pretraživače da je vaš feed osvežen i poziva ih da indeksiraju vaš sadržaj zbog bolje preglednosti. Yoast SEO WordPress dodatak, pored drugih kvalitetnih SEO dodataka, sadrži i opciju za pingovanje nekih servisa automatski kada se pojavi novi sadržaj na vašem blogu. Ako koristite drugu platformu ili želite veću kontrolu pingovanja možete probati besplatne servise Ping-O-Matic ili Feedshark. Dodajte ime vašeg bloga, URL web sajta i URL feed-a izaberete pretraživače za pingovanje i gotovo. Ako se odlučite da koristite FeedBurner, PingShot je dostupan pod Publisize tabom i pruža sličnu uslugu.

10. Obezbedite backlink-ove

Nema smisla imati odličan feed koji niko ne čita. Povećajte popularnost vašeg feed-a tako što ćete ga podneti preko velikog broja mreža. Pre nego što ovo uradite proverite da li ste uradili sve o čemu smo pisali u ovom članku pogotovo copyright informacije u footer-u vašeg feed-a. Dodatno možete ubaciti link ka vašem sajtu-blogu iako vaš feed ima individualne linkove ka postovima na vašem blogu.