Avalane.net - RSS clanci

Flash player i AIR za android platformu

Ne tako davno, Adobe je objavio novu i za većinu korisnika jako zanimljivu mogućnost u nadolazećem Flash-u CS5. Nova mogućnost biti će jednostavno kreiranje aplikacija za iPhone, čime će puno korisnika vjerojatno biti oduševljeno.

No Adobe nije bio lijen kako kaže Steve. Službeno je objavljen Flash Player 10.1 i Adobe AIR za Android platformu, a aplikacije će naravno biti moguće kreirati u Flash-u CS5.

Pogledajte video na ovu temu, koji je pripremio Kevin Hoyt .

Kako prilagoditi css Internet Exploreru sa samo dva znaka

Umjesto korištenja conditional comments-a i pisanja nove css datoteke za klase koje se tiču samo određene verzije Internet Explorera, to možete jednostavno definirati sa samo dva znaka. Evo i kako:

#nekiElement {
   background: red; /* modern browsers */
   *background: green; /* IE 7 and below */
   _background: yellow; /* IE6 exclusively */
}

Easy front-end framework

Postoji već velik broj css framework-a. Neki od popularnijih su Blueprint, 960, Yaml, YUI, SenCSs. Svi oni imaju nešto zajedničko, a to je da omoguće što brže front-end sastavljanje.

U ovom članku predstavljamo Easy front-end framework, koji nudi dodatne mogućnosti koje oni standardni nemaju. Autor ovog framework-a je Alen Grakalić, osnivač Css Globe web stranica.

Što je Easy front-end framework i zašto ga koristiti

Easy ima glavni cilj ponuditi dobru osnovu za izgradnju front-end sučelja. Ne morate brinuti o tome kako će se pojedine stvari prikazivati na drugim web preglednicima, a posebna zanimljivost Easy-ja je što nudi neke već ugrađene interaktivne javascript mogućnosti (jQuery), koje se mogu vrlo jednostavno koristiti i bez znanja javascripta.

Nudi i veliku paletu unaprijed formatiranih blokova sadržaja koje možete copy-paste metodom koristiti u svom projektu, a ukoliko vam ni jedan ne odgovara, jednostavno napravite vlastiti.

Ako želite dati šansu Easy-ju, više možete saznati na službenim web stranicama. Dostupan je screencast, jasna dokumentacija, a tu je i dobar demo prikaz.

301 preusmjeravanje: Apache, htaccess i SEO

Htaccess je alatka koja može biti od velike pomoći prilikom optimizacije za tražilice. Htaccess datoteka smještena je u root web stranica i može sadržavati određene naredbe koje govore serveru što da radi.

Sa ili bez www prefiksa

Postoji dosta diskusija o tome koja je za SEO bolja varijanta. Sa www ili bez www prefiksa. Nema bolje ili lošije. Jednostavno treba odabrati jednu varijantu i držati se nje. To će spriječiti tražilice da indeksiraju iste stranice na različitim adresama.

Evo primjera kako pomoću htaccess-a napraviti preusmjeravanje sa domena.com na www.domena.com

RewriteCond %{HTTP_HOST} ^domena.com [NC]
RewriteRule ^(.*)$ http://www.domena.com/$1 [L,R=301]

Google Webmaster Tools nudi mogućnost odabira domene koju preferirate. Sa ili bez www prefiksa.

Duplo indeksirana početna stranica

Web stranice često imaju linkove na unutarnjim stranicama koje vode nazad na početnu u ovakvom obliku: http://www.domena.com/index.html. U isto vrijeme, početna stranica dostupna je i upisivanjem samo domene (http://www.domena.com).

U tom slučaju tražilice će indeksirati početnu stranicu (koja je ujedno i najvažnija) pod dvije različite adrese što naravno nije dobro. Ovo se može jednostavno riješiti tako što se u htaccess upiše sljedeće:

RewriteRule ^index.html http://www.domena.com/$1 [R=301,L]

Web stranice u novom ili preimenovanom direktoriju

Što napraviti ako su web stranice preseljene u novi direktorij ili je postojeći direktorij ili datoteka preimenovana? Prije nego napravite nešto takvo, dobro promislite dali je to stvarno potrebno. Bolje je držati putanje jednake i ne mijenjati ih. A u slučaju da to morate napraviti, potrebno je podesiti trajno preusmjeravanje (301 redirect) koje će preusmjeriti promet sa stare lokacije na novu.

Redirect 301 /stara-datoteka.html http://www.domena.com/nova-datoteka.html

I za kraj primjer kompletne .htaccess datoteke sa svim primjerima iz gornjeg teksta.

RewriteEngine on
RewriteCond %{HTTP_HOST} ^domena.com [NC]
RewriteRule ^(.*)$ http://www.domena.com/$1 [L,R=301]
RewriteRule ^index.html http://www.domena.com/$1 [R=301,L]
Redirect 301 /stara-datoteka.html http://www.domena.com/nova-datoteka.html
Redirect 301 /stari-direktorij/stara-datoteka.html http://www.domena.com/novi-direktorij/nova-datoteka.html

Kreiranje sluga javascriptom

Što je slug?

Slug je URL koji najčešće imate prilike vidjeti kod cms sustava. To je url koji se kreira iz naslova stranice, novosti i slično. Npr. ukoliko je naslov "Što je slug?", slug će biti "sto-je-slug". Običan ne optimiziran url izgledao bi npr. ovako: "?id=56".

Osim što su linkovi napravljeni na taj način čitljiviji i lakše pamtljivi korisnicima, vrlo su korisni i u optimizaciji za tražilice pošto mogu sadržavati više ključnih riječi.

Kako kreirati slug

Slug se može kreirati javascriptom, ili konverzijom na serveru prilikom unosa stranice, novosti, članka... Ja sam se ovdje odlučio za javascript metodu koja je najčešće brža i ne opterećuje nepotrebno server. Naravno, idealno bi bilo imati i konverziju na serveru, ukoliko korisnik ima isključen javascript u svom web pregledniku.

Koji jQuery plugin

Pogledao sam koji jQuery plugin za kreiranje slug-a bi bio najbolji, i na žalost, oni koje sam uspio pogledati, uvijek su imali neki manji ili veći nedostatak. Na kraju sam se odlučio za syncTranslit, uz manju doradu.

Ova plugin radi savršeno ono čemu je namijenjen, uz jedan nedostatak. Nedostatak je što ne ignorira početak i kraj stringa ukoliko su to razmaci odnosno prazna mjesta. Drugim riječima, ukoliko ostavite razmak na tim mjestima, skripta će taj razmak zamjeniti povlakom ili podvlakom (ovisno o tome što odaberete). Ostalo sve radi savršeno.

Ovaj mali problemčić ispravio sam u verziji skripte koju možete preuzeti na dnu članka, a isto tako i dodao konverziju hrvatskih i njemačkih znakova.

Kako se koristi syncTranslit

$(document).ready(function(){
  $('#articleTitle').syncTranslit({
    destination: 'slug',
    caseStyle: 'lower',
    urlSeparator: '-'
  });
})

destination
ID polja u kojem će se prikazivati slug

caseStyle (lower, upper)
lower će prikazivati sve znakove male, a upper velike

urlSeparator (- _)
Može biti povlaka ili podvlaka

Orginalnu syncTranslit skriptu možete preuzeti ovdje, dok dorađenu verziju iz ovog članka preuzmite ovdje.

Novi CMS sustav

Na web stranice instaliran je novi i kvalitetniji CMS sustav. Osim samo onih nevidljivih promjena, od sada je omogućeno ocjenjivanje članaka, a za registrirane korisnike i komentiranje, kao i unos vlastitih članaka i oglasa.

Kao nova rubrika uvedeni su oglasi. Ukoliko su vam potrebni suradnici za rad na web projektu, prodajte web stranice, tražite zaposlenike ili nešto treće što je povezano sa IT industrijom, ovdje možete postaviti oglas i povećati šanse da nađete ono što tražite ili prodate ono što nudite.

Na sustavu se konstantno radi, što bi u budućnosti trebalo rezultirati dodatnim korisnim mogućnostima za korisnike. U planu je i nagrađivanje najvjernijih i najaktivnijih korisnika, pa se nadamo da će takvih biti sve više.

Za sve prijelodge, kritike i pohvale, kontaktirajte nas.

Želimo vam ugodan boravak na Avalane.net.

Pomozite iskorijeniti Internet Explorer 6

Svi web developeri vjerojatno su se imali prilike uhvatiti u koštac sa Internet explorer 6 web preglednikom. Već svi znamo da on može biti prava noćna mora. Srećom, pomalo je na zalasku. Ali se ipak još uvijek ne da.

Evo jednog načina kako barem malo pridonjeti odlasku tog zla. IE6 Update je javascript koji IE6 korisnicima prikazuje poruku da fale neke nadogradnje koje je potrebno instalirati u preglednik. Klikom na obavijest, korisnik je preusmjeren na stranicu gdje mogu preuzeti noviji IE8 preglednik.

Poruku i linkove naravno možete mijenjati po želji. Sigurno je da neće svi odmah otići, preuzeti i instalirati novi preglednik, ali dio onih koji to napravi je već pomak na bolje.

IE6 update i dodatne informacije možete pronaći ovdje.

Internet Explorer submit padding

Već je poznata stvar da Internet Explorer često jako voli HTML i CSS interpretirati na neki svoj smiješan način i zanemarivati W3C standarde, te zadavati muke web developerima.

Jedna takva smiješna stvar je ignoriranje definiranog horizontalnog css padding-a kod submit elemenata. Internet Explorer iz nekog razloga, uredno dodaje još nekoliko dodatnih pixela.

Sreća u nesreći je što postoji jednostavno rješenje za ovaj problem. U css klasu dodajte overflow:visible i stvar bi se trebala ispraviti.

Pogledajte primjer u Internet Exploreru

LavaLamp jQuery izbornik

Za sve jQuery ljubitelje kojima se svidio LavaLamp izbornik za mootols framevork, stižu dobre vijesti.

Sada je isti dostupan i za jQuery framework, a upute za instalaciju i kompletan kod možete pronaći ovdje.

Pretvorite PSD predložak u funkcionalan html i css kod

Ovaj vodič primjeren je početnicima u korištenju divova i css-a. U devet jednostavnih koraka

objasniti ćemo kako iz vrlo jednostavnog dizajna koji je napravljen pomoću photoshopa ili nekog drugog vama omiljenog grafičkog alata napraviti funkcionalan html i css kod.

Kao html editor koristiti ćemo Adobe Dreamweaver. Naravno sve ovo možete raditi i u običnom notepadu ili bilo kojem drugom tekst ili code editoru.

Ovo je jednostavan dizajn koji ćemo iskoristiti za "rezanje" (slice) u HTML:

Korak 1: Postavljanje potrebnih mapa i dokumenata

Organizacija datoteka i mapa bitna je stavka. Dobra organizacija znači veliku uštedu vremena. Umjesto da sve slike, html, css, flash i ostali dokumenti budu smješteni u root, bolje ih je organizirati u odgovarajuće podmape.

Tako je sve .css datoteke dobro staviti u css mapu. Slike koje se koriste za dizajn u images mapu, flash datoteke u flash mapu, itd. U root-u bi trebali imati samo potrebne .html, .php, .asp i slične datoteke.

Za ovaj projekt napraviti ćemo organizaciju kao na slici:

Korak 2: Izrada početne index.html te style.css datoteke

Otvorite novi dokument te ga spremite u root sa index.html nazivom. Ukoliko radite sa Dreamweaverom, automatski će biti postavljeni svi osnovni html tagovi kao doctype, head, body i slično. Dio vezan uz osnove html-a nisu pokrivene ovim člankom pa ćemo ih ovdje preskočiti.

Napravite još jedan novi dokument te ga spremite u css mapu pod nazivom style.css. U njega ćemo spremati sve potrebne css klase.

U head index.html dokumenta "linkajte" css dokument.

Kako su izrezane slike koje su dio dizajna možete pogledati u mapi images.

Korak 3: Poništavanje zadanih vrijednosti web preglednika

Svaki web preglednik ima svoje zadane (default) vrijednost. Npr h1 tag ili margina paragrafa na Internet Exploreru nije jednaka kao i na Firefoxu. Da bi takve stvari poništili i osigurali jednak prikaz na svim preglednicima otvorite style.css datoteku te upišite:

* {
 margin: 0px;
 padding: 0px;
}

Korak 4: Podešavanje boje pozadine te zadanog fonta

U istoj style.css datoteci također ćemo definirati i izgled body selectora. Definirati ćemo boju pozadine, veličinu i vrstu fonta, razmak između redova teksta te odmak dizajna od gornjeg i donjeg ruba prozora. Ukoliko za neki dio sajta nije definirano drugačije koristit će se ove postavke.

body {
 background: #2b2b2b;
 font: 12px/18px Arial, Helvetica, sans-serif;
 color: #000;
 padding: 20px 0px;
}

Korak 5: Glavni kontejner

Otvorite index.html te unutar body taga definirajte div koji će imati id wrapper. Nazive možete davati kako god želite. Osnovno pravilo je da ID smijete koristiti samo jednom unutar cijelog html-a dok class koliko puta želite. Unutar tog diva smjestit ćemo sve ostale elemente stranice. On će biti kao jedan glavni kontejner.

Nakon toga ponovo otvorite style.css. Podesiti ćemo izgled glavnog wrapper kontejnera. Ukoliko definirate stil za element koji imaju definiran ID, ispred naziva stavljate znak #. Ukoliko je riječ u elementu koji umjesto ID ima class (...div class="clear"...) ispred naziva css klase dolazi točka.

#wrapper {
 background: #FFF;
 width: 620px;
 padding: 5px;
 margin: auto;
}

Za početak smo definirali bijelu pozadinu. Širina dizajna sveukupno je 630px. Pošto unutar wrappera imamo i padding 5px sa svake strane, smanjit ćemo širinu za 10px jer se padding uračunava u širinu. I za kraj stavljamo margin:auto kako bi se wrapper automatski horizontalno uvijek nalazio na sredini prozora.

Korak 6: Zaglavlje

Unutar wrapper diva otvorite još jedan div te mu dajte ID head. Unutar head diva napravite jedan običan href tag koji će imati ID logo. On će kasnije sadržavati sliku logotipa te biti link na početnu stranicu.

#head
Prvo dajemo izgled head divu. Postavljamo visinu od 149px koliko je visoka i slika u dizajnu, te dodajemo istu sliku u pozadinu kako bi iznad jednostavno stavili logo.

#head {
 height: 149px;
 background: url(../images/head.jpg) no-repeat;
}

#logo
Za logotip postavljamo sliku u pozadinu href taga. Prikaz elementa postavljamo na block. U protivnom se ništa ne bi prikazalo u pregledniku. Podešavano visinu i širinu prema dimenzijama grafike. Pozicioniranje postavljamo na absolute, te logo pomoću margina pozicioniramo na mjesto gdje želimo. 40px od gornjeg te 20px od lijevog ruba.

Apsolutno pozicioniranje računa se od gornjeg lijevog ruba elementa u kojem se taj elemente nalazi. Dobro ga je koristit jer se element može fino pozicionirati gdje želite bez da se poremete ostali elementi ukoliko ih ima. Naravno i oni moraju biti apsolutno pozicionirani.

#logo {
 background: url(../images/logo.jpg);
 display: block;
 height: 54px;
 width: 171px;
 position: absolute;
 margin: 40px 0px 0px 20px;
}

Korak 7: Navigacija

Navigacija bi se po standardu trebala raditi sa

listama. Ispod head diva dodajte sljedeći HTML kod:
```
 Početna

 O nama

 Galerija

 Kontakt
```
#nav
Kao prvo, sredimo izgled samog