Online Tržište

Google je objavio najnovije ažuriranje za svoj algoritam pretraživanja sa kojim će kažnjavati sajtova koji nisu prilagodjeni za prikazivanje na mobilnim uređajima kao što su pametni telefoni ili tableti.

Google navodi da će već od danas povećati rangiranje sajtova koji su prilagođeni za mobilne uređaje za sve upite pretrage koji dolaze sa mobilnih telefona. Neprikosnoveni lider pretraživanja Interneta ističe da će od sada favorizovati karakteristike kao što su velik čitak tekst koji ne treba da se povećava da bi bio vidljiv, kao i sajtove koji izbegavaju korišćenje horizontalnog pomeranja i sadržaja koji se ne može reprodukovati.

Google je ove promene u svom algoritmu pretrage najavio još u februaru navodeći da će promene uticati na pretraživanje na mobilnim uređajima, na svim jezicima širom sveta te da će takođe imati značajan uticaj na rezultate pretraživanja. To u suštini znači da ako Googlate na telefonu, biće vam prikazani rezultati koji su prilagođeni za mobilne uređaje. Drugim rečima, u rezultatima pretrage na mobilnom telefonu neće biti prikazane stranice koje nisu prilagodjeni za prikazivanje na mobilnim uređajima.

Google naglašava da ova promena u algoritmu za pretragu utiče samo na rangiranje u pretrazi na mobilnim uređajima i odnosi na pojedinačne stranice, a ne na čitave Web sajtove.

Što se tiče konfiguracije, koje obično znači da imate responzivni sajt ili namenski mobilni sajt, stručnjaci za optimizaciju za Internet pretraživače (SEO) preferiraju responzivnom dizajnu sajta.

Preporučujemo vam članak “3 načina da pređete na mobilni sajt sa responzivnim Web dizajnom”.

Da ne bude zabune, Google visoko ceni kvalitetan sadržaj što znači da će Web stranice koje nisu prilagođene korisnicima mobilnih uređaja i dalje biti visoko rangirane na stranicama sa rezultatima pretrage. S druge strane treba uzeti u obzir da oko 60 odsto Web prometa sada dolazi sa mobilnih uređaja pa bi svako ozbiljan morao da uradi nešto po tom pitanju.

Web promet od izuzetnog značaja je za svaki oblik online poslovanja. Bez obzira o kakvom online poslovanju se radi, važi pravilo da je Web promet koji dolazi na sajt proporcionalan sumi novca koju Web sajt može zaraditi. Veća količina Web prometa znači da je i stopa po kojoj Web sajt može zaraditi novac od oglasa, prodaje ili affiliate linkova veća.

O značaju Web prometa možete saznati više iz članka “Povećanjem Web prometa povećat ćete i online zaradu“.

Ako niste sigurni kako su vaše stranice ili kompletan sajt klasifikovani, na raspolaganju vam je Google-ov test za utvrđivanje prilagođenosti korisnicima mobilnih uređaja. Takođe, status svog sajta možete proveriti i u Webmaster Tools, u Mobile Usability izveštaju. Kada napravite sve neophodne korekcije, Google će ponovo početi adekvatno tretirati vaše stranice.

Na kraju, želimo da vam preporučimo dva zanimljiva članka “Napraviti mobilnu aplikaciju ili mobilni sajt?” i “Kako napraviti Drupal blog sa responzivnim Web dizajnom”.

Danas je kompanija Adobe konačno objavila neke stvarno fantastične nove alate namjenjene developerima, uključujući i mobilne developere.

Edge Reflow je kompanijin Photoshop za responzivni dizajn. Edge Reflow omogućuje svima da brzo i jednostavno kreiraju Web sajt i sadržaj koji će prilagođavati svim veličinama i vrstama faktora forme.

S obzirom na sve veću ponudu zaslona različitih veličina, ​​od televizora, tableta, do pametnih telefona, developeri, pa čak i obični Web dizajneri prisiljeni su da razmišljaju o dizajnu koji bi se fluidno mjenjao nego da prave dizajn za svaku određenu veličinu zaslona.

Adobe je danas objavio niz zapaženih promjenama samo za Creative Cloud pretplatnike uključujući i novu Edge Web Fonts podršku  i bolji izgled u Dreamweaver-u te dodavanje CSS funkcionalnosti u Edge Animate, alatu za stvaranje pokretne grafike. Edge Code, uređivač koda, dobiva nekoliko korisnih promjena uključujući i živi pregled promjena koda. Osim toga, Edge Reflow, koji je prvi puta predstavljen prošle jeseni, sada je po prvi put dostupan u besplatnoj javnom preview verziji. Sve ove promjene, osim za Dreamweaver biti će odmah na raspolaganju i besplatnim i plaćenim članovima Adobe Creative Cloud.

Ove promjene su usko povezane sa Creative Cloud, Adobe-ovom uslugom pretplate. Creative Cloud je Adobe-ov Cloud pristup Creative Suite koji uključuje mnogo online učenja i kolaboracije. Creative Cloud za kompaniju Adobe ustvari predstavlja promjenu smjera sa kojim treba da se stabiliziraju prihodi kompanije putem sustava mjesečne pretplate na proizvode.

Sa besplatnom javnom preview verzijom Edge Reflow kompanija Adobe se nada da će privući nekoliko ranih korisnika od kojih će dobiti veliki broj korisnih povratnih informacija u cilju poboljšanja proizvoda.

Za mnoga poslovanja prosto je nepraktično praviti verzije Web sajta za svaku rezoluciju i novi uređaj. Vodeći se idejom responzivnog dizajna imat ćete mogućnost prilagodbe sajta za niz uređaja sa različitim veličinama zaslona. Ideja, da sa jednim Web sajtom, jednom bazom koda, služite Web, mobilne i tablet korisnike zaista je moćna stvar koja će vam zasigurno donijeti mnoge koristi i velike uštede. Responzivni Web dizajn omogućuje svakom sajtu da posluži mobilne Web stranice na osnovu tipa uređaja koji se koristi za pristup sajtu.

U ovom članku govorit ćemo o pravljenju Drupal bloga koji ima responzivni Web dizajn.

Drupal je vrlo snažano okruženje za izgradnju niza Web sajtova ali je posebno dobro prilagođen za kreiranje blogova visoke kvalitete. Sa Drupal sustavom za upravljanje sadržaja (CMS) možete napraviti blog sa fantastičnim responzivnim Web dizajnom i značajkama.

Drupal koristi snagu Zen tema koje dolaze sa ugrađenom podrškom za responzivni Web dizajn, a to je nešto što je od vitalnog značaja za današnje Web sajtove koje posjećuje sve veći broj korisnika putem svojih telefona.

Što je Drupal

Drupal je open-source Web sustav za upravljanje sadržajem (CMS). Treba naglasiti da se rad sa CMS veoma razlikuje od rada sa standardnim HTML Web servisima.

Drupal je PHP aplikacija koja koristi MySQL bazu podataka za spremanje sadržaja i postavki. To znači da se stranice dinamički izgrađuju dok se učitavaju, povlačeći podatke iz baze podataka.

Osnova Drupal-a sastoji se od temeljnih Drupal struktura koje su potrebne za svaki Web sajt: sposobnost stvaranja i upravljanja sadržajem, korisnici i navigacijska struktura. Njegova osnova proširuje se sa modulima koji šire njegovu funkcionalnost i mogućnosti. Zbog toga je Drupal vrlo moćan alat koji vam omogućuje da u potpunosti prilagoditi svoje Web stranice kako bi pružile samo ono što je potrebno za vašu poruku i publiku.

Što vam je sve potrebno da bi napravili blog sa Drupal

Veoma je važno da ste u mogućnosti da radite na razvoju svog novog bloga na testnom serveru tj. na vlastitom računaru. Koristeći lokalnu testnu mašinu ubrzat ćete razvoj i dizajniranje ali i izbjeći sve eventualne probleme koji bi se mogli dogoditi prilikom razvoja bloga na “live serveru”.

Da bi počeli potrebno vam je nekoliko stvari:

• Kvalitetan Web hosting servis i domen
• Dobra Internet konekcija (dosta toga ćete preuzimati sa Interneta)
• Lokalni Web server sa PHP i MySQL (preporuka je XAMPP)
• Najnovija verzija Drupal

Stranica na kojoj možete preuzeti XAMPP dolazi sa uputama za preuzimanje i instalaciju.

Što je sve potrebno i što preporučamo da preuzmete za Drupal

Evo popisa koje module da preuzmete. Treba reći da module i temu možete preuzeti i prilikom preuzimanja Drupal-a:

Views – za kreiranje prilagođenih popisa i prikazivanje sadržaja

Disqus – osigurava dinamičko komentiranje

Chaos tools – potreban za druge module

Pathauto – važan za URL i SEO (optimizaciju za tražilice)

Token – potreban za druge module

Google analytics – prati posjetitelje i poboljšava SEO

Link – obezbjeđuje polje URL

Easy social – zgodan način da ugradite linkove za društveno dijeljenje

Zen – baza teme sa responzivnim Web dizajnom

Global Redirect – Važna SEO značajka

Search 404 – poboljšava korisničko iskustvo i SEO za greške kod nepronalaženja stranice

Treba reći da su ovi moduli neki minimum koji je potrebno imati da bi se kreirao jedan funkcionalan blog. Naravno, vremenom ćete sigurno instalirati nekoliko drugih, koji će vam biti potrebni za poboljšanje korisničkog iskustva i funkcionalnosti bloga.

Kreiranje Drupal bloga

Evo nekoliko koraka potrebnih za izgradnju Drupal bloga.

• Preuzmite i instalirajte XAMPP na računar. Prije instalacije XAMPP-a, ugasite Skype koji vrlo često pravi probleme prilikom procesa instalacije. Nakon što završite instalaciju možete normalno koristiti Skype. Također, najbolje je XAMMP instalirati izravno na “C:\” nego u direktorij “Program Files”.
• Raspakirajte Drupal u htdocs datoteku u XAMPP (C:\xampp\htdocs). Prilikom raspakiranja kreirat će se direktorij pod nazivom “drupal 7.17” ili sl.. Bilo bi dobro da preimenujete ovaj direktorij u “drupal” kako bi jednostavnije mogli pristupati svojoj lokalnoj instalaciji na http://localhost/drupal.
• Otvorite http://localhost/phpmyadmin i kreirajte bazu podataka korisnika za Drupal. Ako ste postavili lozinku, prijavite se sa "root" i lozinkom koje ste odabrali. Kliknite na karticu “Privileges” kako bi kreirali novu bazu podataka korisnika za Drupal. Odaberite ime "Drupal", selektirajte "localhost" za host i unesite svoju lozinku (dva puta). Odaberite opciju za kreiranje nove baze podataka sa istim imenom i datim svim povlasticama.
• Otvorite Drupal početnu stranicu tj. http://localhost/drupal/install.php i pratite postupak instalacije. Za podatke o bazi podataka koristite podatke koje ste postavili u prošlom koraku.
• Raspakirajte module na /sites/all/modules a potom ih instalirajte
• Raspakirajte Zen temu na /sites/all/themes
• Konfigurirajte datotečni sustav (file system) i postavke koje se odnose na informacije o Web sajtu (koristite izbornik “admin” pri vrhu Web sajta kada ste prijavljeni kao primarni korisnik).
• Kreirajte nekoliko blog postova za testiranje.
• Isključite Drupal komentare za blog postove, a konfigurirajte i omogućite Disqus komentare.
• Kreirajte niz stilova slika koji bi se koristili u “views displays”. “Views displays” je dio Display Suite i implementacija je njegovog API-a. To mu omogućuje da renderuje podatke o vizuelnim cjelinama (zaglavlje, podnožje, sadržaj, itd.) u regione.
• Koristite vizuelne cjeline (views) za kreiranje atraktivnih stranica za blog i sličnih odredišnih ​​stranica za svaki primarni stvar iz izbornika, na temelju taksonomije pojmova iz URL-a. Također, koristite ih za kreiranje biografije autora koja prikazuje društvene informacije, sliku, link na početnu stranicu i linkove za društveno dijeljenja na dnu svakog blog posta.
• Sa ovim vizuelnim cijelinama možete kreirati blok povezanih blog postova koji se prikazuju na dnu svakog posta, koristeći uvijete taksonomije. Također, sa njima kreirajte i blok posljednjih postova koji bi se prikazao na desnoj strani svake stranice, recimo, popis pet posljednje objavljenih blog postova sa slikom.
• Dodajte je prilagođeni blok poput “povežite se sa nama”.

Svakako da će vam trebati malo vremene sa se snađete, to ovisi o vašoj razini iskustva. Generalno, najviše vremena ćete morati potrošiti oko “Views”, ali ništa nije previše teško, za relativno kratko vrijeme shvatit ćete što sve možete da uradite sa njima.

Prilagodite dizajn bloga po svojoj želji

Izgled svoga bloga možete prilagoditi i poboljšati ovisno o vašim željama. Možete prilično jednostavno da napravite neke izmjene u dizajnu, na primjer: 

• Pratite upute u Zen folderu za kreiranje pod-teme
• Stilizirajte razne aspekte bloga, uključujući i tijelo, zaglavlje i podnožje
• Koristite CSS3 kako bi prilagodili na primjer izgled navigacije, mjenjajući boju i dodajući sjenjčenja
• Potrebno je da koristi oznake relativnih veličina (%) umjesto fiksnih (px) kako bi se omogućilo prilagođavanje responzivnog Web dizajna vašeg bloga uređajima sa ekranima različitih veličina.

Postavljanje Drupal bloga na Web (live server)

Nakon što ste na lokalnom računaru napravili Drupal blog, instalirali module i uradili ostale prilagodbe, vrijeme je da ga postavite na Web tj. da ga postavite (deploy) na “live server”:

1. Obrišite sav nepotreban sadržaj
2. Ispraznite “Cache”
3. Napravite gzip backup baze podataka
4. Zip-ujte sve Drupal datoteke (nemojte Zip-ovati nadređeni folder, vi ćete raspakirati izravno u Web root)
5. Uradite transfer datoteka na host server
6. Na host serveru kreirajte novu bazu podataka sa korisničkim imenom i lozinkom, i uvezite backup SQL datoteku koju ste napravili na vašem lokalnom računalu
7. Uredite sites/default/settings.php datoteku tako da odražava nove postavke baze podataka
8. Otvorite svoju početnu stranicu bloga u Internet tražilici na svom domenu i provjerite da li sve radi ispravno

Ono što morate uraditi jeste da konfigurirate određene module koji samo rade na live serveru kao što su Google Analytics i Disqus.

Nakon što se uvjerite da sve ispravno radi možete početi sa postavljanjem sadržaja na svoj novi, elegantni HTML5 blog sa responzivnim Web dizajnom.

Za mnoga poslovanja, pravljenje verzija Web sajta za svaku rezoluciju i novi uređaj praktično je nemoguće, ili barem nepraktično i neisplativo. Prilično su neodlučni kada je u pitanju njihova mobilna strategija. Veliki broj njih nije siguran da li treba išta da radi po tom pitanju dok su drugi u nedoumici: mobilna aplikacija ili mobilni sajt? Trenutna situacija je takva da korisnici mobilnih uređaja više preferiraju upotrebu mobilnih aplikacija nego mobilnih sajtova.

Koristeći se idejom responzivnog dizajna imaće te mogućnost prilagođavanja svake od ovih verzija sajta na niz uređaja sa različitim veličinama ekrana i sposobnostima.

Responzivni (odgovarajući) Web dizajn je pristup koji sugeriše da bi projektovanje i razvoj trebali da odgovaraju na ponašanje korisnika i okruženja na osnovu veličine ekrana, platforme i orijentacije. Responzivni Web dizajn omogućava bilo kom sajtu da posluži mobilne Web stranice na osnovu tipa uređaja koji se koristi za pristup sajtu.

U poslednje vreme sve više i više poslovanja okreće se responzivnom dizajnu. Ideja, da se ima jedan sajt, sa jednom bazom koda, koji može da usluži Web, mobilne i tablet klijente je zaista moćna stvar koja može da donese dosta velike uštede.

Responzivni Web dizajn znači da ljudi na vašem sajtu mogu da pronađu informacije koje su im potrebne, bez obzira na to da li mu pristupaju sa računara koji ima veliki ekran, tableta ili pametnog telefona.

U ovom članak pokazaćemo vam 3 najbolja načina sa kojim možete konvertovati postojeći Web sajt u mobilni sajt koji će omogućiti visoko-kvalitetno iskustvo pregledanja za svakoga, bez obzira na vrstu uređaja.

Razumevanje responzivnog dizajna

Da bi dizajn bio responzivan (odgovarajući), obično je potrebno da ima sledeća tri atributa:

Fluid Grid: Sistem tečne mreže (rešetke) koristi procente za definisanje kolona ili div tag za širinu umesto piksela. Na primer, širina od 650px u dizajnu sa fiksnom širinom, bila bi označena sa 100% u CSS-u dizajnu sa tečnom širinom.

Media Queries: Upiti medija omogućavaju prilagođeni CSS na osnovu minimalne i maksimalne širine pretraživača. Na primer, upit koji dolazi sa medija sa maksimalnom širinom od 450px znači da se radi o mobilnim pretraživačima.

Responzivne Slike: Po ponašanju su slične tečnoj mreži, responzivne (odgovarajuće) slike nemaju fiksnu širinu već imaju maksimalnu širinu (tipično označenu sa 100% kada se prikazuje na desktopu). Ovo omogućava da slika bude lako smanjena kako bi se uklopila u širinu ekrana na kom se Web stranica prikazuje.

Izlaz ovih atributa je jednostavno prepoznati. Da bi lakše razumeli o čemu govorimo pogledajte na primer sajt Starbucks i ručno promenite veličinu pretraživača. Primećujete li da se ekran prilagođava i podešava na osnovu širine pretraživača? To je responzivni Web dizajn.

Mobilni sajtovi sa responzivnim Web dizajnom

Do skora, nadogradnja ili konvertovanja postojećeg Web sajta u mobilnu platformu bi bilo dosta skupo i komplikovano. Srećom, danas postoje alati i resursi koji nude bržu, lakšu i povoljniju uslugu mobilnog Web dizajna.

Sa Google GoMo i DudaMobile besplatno konvertujte svoj Web sajt u mobilni sajt

Pre nekoliko meseci kompanija Google u saradnji sa startup-om DudaMobile, koje se bavi optimiziranjem mobilnog Web-a, odlučila je da korisnicima besplatno ponudi veoma brz i jednostavan način za prilagođavanje Web sajta mobilnim uređajima.

Google GoMo i DudaMobile sklopile su partnerstvo kako bi vlasnicima Web sajtova pomogli u prilagođavanju njihovih sajtova mobilnim uređajima.

Usluga radi tako što kreira hostovanu mobilnu verziju sajta koja ima sinhronizovane sposobnosti kako bi se osiguralo da vaš mobilni sajt automatski dobije sva ažuriranja koja se nalaze na vašem Web sajtu. U suštini, imate mogućnost da kreirate kvalitetnu mobilnu verziju sajta koja je potpuno različita od vaše Web verzije, a ipak smisleno integrisana u vaš sajt iz perspektive nekoga ko koristi vaš sajt.

Osnovna prednost ovog sistema je što ne morate da znate ništa o responzivnom Web dizajnu, CSS3, HTML5, i dr.. Ovo je savršeno rešenja za poslovanja i blogere sa malo tehničkog iskustva ili resursa.

Ova usluga je besplatna u prvih 12 mjeseci a nakon toga potrebno je platiti 9 dolara mesečno, odnosno 108 dolara godišnje.

Responzivni Web template

Template Monster pruža širok spektar responzivnih Web dizajn tamplate-a (šablona) za svaki veći CMS (Sistem za Upravljanje Sadržajem), kao što su Drupal, Joomla, WordPress, i mnoge druge Web platforme.

Template Monster je najveći svetski ponuđač tamplate-a i tema za sajtove, koji ima ogromnu bazu visoko kvalifikovanih dizajnera koji žive od online zarade od tema i tamplate-a koji se prodaju na Template Monster. Imajući u vidu ekspanziju mobilnog Interneta, nije iznenađujuće što su teme i tamplate-i sa responzivnim Web dizajnom u velikoj meri zastupljeni na ovom, jednom od najvećih tržište tema i template-a.

Prednosti korišćenja Template Monster je ta da ste u stanju fizički preuzeti i instalirati mobilni template na vaš postojeći Web sajt. Pod uslovom da imate malo iskustva i veština sa Web dizajnom, moći ćete sami uraditi neke izmene ili poboljšanje na template-u kako bi ga napravili da savršeno odgovara vašem sajtu.

Migracija na mobilnu Web platformu

Pre otprilike dva meseca, Joomla, koja je jedan od najpopularnijih sistema za upravljanje sadržajem koji se koriste za izgradnju blogova, Web sajtova, portala i Intraneta, predstavila je verziju 3.0. Ono što je značajno kod Joomla 3.0 jeste to što ona donosi ugrađenu podršku za Twitter-ov BootStrap framework koji omogućava automatsku, responzivnu podršku za mobilne Web sajtove.

Više o funkcionalnostima koje donosi Joomla 3.0 pročitajte u članku “Joomla 3.0 sa Twitter BootStrap donosi fantastični responzivni Web dizajn”.

S obzirom da je Joomla napravila veliki iskorak sa podrškom responzivnom Web dizajnu, ima smisla razmotriti mogućnosti da uradite nadogradnju starije verzije Joomla, ili migrirate svoj trenutni sajt na Joomla 3.0 platformu.

Migracija postojećeg sajt ili CMS na Joomla nije nemoguća. Sve velike CMS platforme nude migracione putanje kako bi olakšale ljudima koji žele da presele svoje postojeće sajtove na drugu platformu. Takođe, jednostavnom pretragom Web-a pronaći ćete veoma mnogo korisnih informacija oko migracije na Joomla 3.0.

Šta mislite o responzivnom Web dizajnu i da li ga koristite kako bi korisnicima pametnih telefona i tableta omogućili najbolje moguće iskustvo na vašem sajtu?

Mobilni uređaju postaju sve važniji. Web promet koji generiraju mobilni uređaji raste velikom brzinom tako da je vrlo vjerojatno da će za nekoliko godina mobilni uređaji postati popularniji od kućnih računala. Kao rezultat toga, sva poslovanja, blogeri, portali i Web stranice trebaju osigurati da njihova web platforma može da ponudi visokokvalitetno iskustvo pregledavanja i mobilnim korisnicima pogotovu onima koji koriste tablet i pametne telefone.

Joomla, jedan od najpopularnijih sustava za upravljanje sadržajem (CMS), koji se koristi za izgradnju blogova, Web sajtova, portala i Intraneta, konačno je predstavila verziju 3.0. Ono što je velika vijest svakako je to što ona donosi ugrađenu podršku za Twitter-ov BootStrap framework koji omogućuje automatsku, responzivnu podršku za mobilne Web sajtove.

Sa sve većim brojem uređaja sa različitim veličinama zaslona Web mora brzo da se prilagođava a Joomla sa ovim najnovijim izdanjem želi ići u korak sa promjenama.

Broj poboljšanja su napravljena od posljednjeg velikog Joomla izdanja (v2.5). Ova najnovija verzija Joomla dolazi sa značajkama kao što su:

• PostgreSQL driver
• Novo sučelje za adminisraciju
• Novi front-end predložak (tamplate)
• Automatska detekcija mobilnih uređaja i prikaz
• Izravna instalacija jezičkog paketa
• Mogućnost kopiranja predloška

Twitter je razvio Bootstrap okruženje kao način za promicanje brzih, čistih i vrlo korisnih aplikacija. Ono što je još važnije, Bootstrap uključuje responzivni CSS koji omogućuje Web stranicama sa integriranim BootStrap da prikazuju sadržaj na temelju uređaja i veličine zaslona.

Iako mnoge druge Web platforme, kao što su WordPress, Drupal i mnoge druge, nude mobilnu podršku u jednom ili drugom obliku koja zahtijeva puno rada i razvoja ili rezultira nezadovoljavajućim rezultatima. Kao što će Web programeri primjetiti, responzivni dizajna je moguće izgraditi sa WordPress-om ali bez izvorne podrške dok Drupal ima nekoliko mobilnih teme i BootStrap modul.

Sada je u Joomla 3.0 i admin panel responzivan. Ovo je vrlo zanimljiva promjena, pogotovo s obzirom da Joomla ima 3% Web tržišta.

Joomla 3.0 možete preuzeti sa zvaničnog sajta.