opis web stranice - hongkiat

UNIVERZITET U TRANIKU FAKULTET ZA TEHNIČKE STUDIJE U KISELJAKU

Vježba 1. Izbor i opis web stranice (portala) vezane uz

sadržaj kolegija MOP

Kiseljak, decembar 2011.

Profesor: dr. sc. Nikola Mrvac Kolegij: MOP Student: Haris Rahmanović

- 2 -

Zašto sam odabrao hongkiat.com?

U svijetu multimedije i dizajna bilo šta da radite potrebno se prije toga dobro pripremiti. Osim prikupljanja podataka o tome u kojem smjeru bi projekat trebao ići, poželjno je i poslušati ili pogledati savjete drugih osoba koje se bave istim poslom. Kako multimedija napreduje i postaje pristupačna širem spektru korisnika, tako se i sve više javljaju web stranice sa tutorijalima i savjetima koji bi početnicima ali i naprednim korisnicima trebali pomoči pri radu na određenim projektima. Stranica sa takvim sadržajem je mnogo, ali jedna od najboljih po mome mišljenju je hongikat.com i upravo zato sam i odabrao nju za ovaj zadatak.

Slika 1. Naslovnica


- 3 -

Opis stranice

Stranica hongkiat.com se odlikuje jednostavnim dizajnom ugodnim za oko koji ponajviše liči na dizajn bloga, a i osnivači stranicu nazivaju weblogom. Okuplja veliki broj poznavalaca photoshopa, illustratora i web 2.0, te uvijek su spremni primiti nove autore. Neke od stvari koje se mogu pronaći na hongkiat-u su: tutorijali, savjeti, prijedlozi, radovi za inspiraciju... Stranica se sastoji od zaglavlja, lijeve kolone, desne kolone i podnožja. Zaglavlje: Zaglavlje se sastoji od banera i horizontalnog menija. Baner na sebi ima naziv stranice i vezu ka početnoj stranici. Horizontalni meni se sastoji od linkova: Home, Photoshop, Icons, Design, Wordpress, Tools, Inspiration, Graphics, Wallpapers, How-to, Web 2.0, Freebies te polja za pretraživanje stranice. Klikom na svaki od linkova otvara se stranica sa sadržajem koji je vezan na datu temu.

- Home – početna stranica - Photoshop – tutorijali, trikovi, dodatci i sve ostalo vezano za

photoshop - Icons – besplatne ikone - Design – sve vezano za web dizajn - Wordpress – savjeti za korisnike wordpress platforme - Tools – korisni alati za dizajnere - Inspiration – radovi za inspiraciju - Graphics – besplatne vektorske i rasterske slike - Wallpapers – visokokvalitetne pozadine za računar - How-to – upustva za samostalno bavljenje dizajnom - Web 2.0 – sve vezano za web 2.0 - Freebies – konkursi i upoređvanje radova

Slika 2. Izgled zaglavlja


- 4 -

Lijeva kolona: U lijevoj koloni se nalaze najnoviji članci s naslovom, slikom i jednim dijelom teksta članka, dok klikom na naslov ili dugme „Continue reading“ se otvara čitav članak. Uz svaki članak se nalazi i dugme „Like“, a klikom na njega označavamo da nam se članak sviđa i dijelimo ga na društvenoj mreži Facebook.

Slika 3. Izgled članka

Desna kolona: Desna kolona se sastoji od polja za pretplatu, glavnog menija, linkova ka profilima stranice na društvenim mrežama, najpopularnijih članaka, facebook dodatka i linkovi ka davatelju hostinga stranici.

- Polje za pretplatu (subscribe now) – nalazi se na vrhu desne kolone i ako unesemo svoju e-mail adresu u njega hongkiat će nam slati najnovije članke na tu adresu

- Glavni meni (main menu) – sastoji se od linkova „Contact us“ (konktakt s administratorima stranice), „Be an author“ (slanje svojih članaka administratorima), „Submit tips“ (slanje savjeta administratorima za koje mislimo da bi mogli pomoči poboljšanju stranice)

- Linkovi – nalaze se linkovi ka profilima stranice na društvenim mrežama: Google+, Facebook i Twitter te dugme za RSS


- 5 -

- Most popular (Month) – ovdje se nalaze linkovi ka četiri

najpopularnija članka u mjesecu, sa slikom i naslovom članka. - Facebook social plugin – je dodatak koji u jednom kvadratiću nudi

link ka facebook stranici, dugme „Like“, broj obožavatelja na facebooku i linkova ka osam profila nasumično odabranih obožavatelja.

- Hosted with – prikaz loga koji vodi na stranicu davatelja hosting usluga (http://www.wpwebhost.com/)

Slika 4. Dio desne kolone

Podnožje: Podnožje stranice se sastoji od članaka Hongkiat.com, More..., Write For Us, Feedback i linkova Contact, Advertise, Sitemap, Privacy i Back to top te linka na stranicu „sitemeter.com“ koja prikazuje statistiku prikaza stranice. Članci:

- Hongkiat.com – kratak opis stranice - More... – linkovi koji se nalaze i u horizontalnom meniju u zaglavlju - Write for us – poziv za sve koji misle da bi mogli napisati zanimljiv

članak da se jave - Feedback – poziv za sve koji žele da pošalju svoje utiske o stranici

kao i da prijave eventualni kvar


- 6 -

Linkovi:

- Contact – link ka kontakt formi - Advertise – link ka ponudi za reklamiranje na stranici - Sitemap – link ka mapi sajta - Privacy – link ka stranici sa pravilima korištenja - Back to top – link koji vodi na vrh stranice

Slika 5. Izgled podnožja

NAJVAŽNIJE: U ovom dijelu osvrnut ću se na sadržaj sajta „hongkiat.com“ koji je najviše povezan sa kolegijem. PHOTOSHOP

Dio sajta koji je vezan za photoshop smatram važnim iz razloga što za pravljenje bilo kakve multimedijalne prezentacije potrebno je barem osnovno poznavanje rada u photoshopu. Na ovoj podstranici se za sada nalazi oko 70 članaka ali napomenuo bih da mnogi od njih u sebi sadrže i do 80 tutorijala ili savjeta, od kojih mnogi se mogu primjeniti u izradi web ili video prezentacije. Članak koji bih izdvojio je „40 (Really) Beautiful Web Page Templates in Photoshop PSD“ koji nudi 40 predložaka za web stranice u PSD formatu. Iako nije preporučljivo koristiti ove predloške neizmjenjene, svakako se sa nekoliko korekcija mogu dobiti poprilično unikatne stranice koje odlično izgledaju, a oni koji pak hoće da su još unikatniji mogu barem pogledati neke od predloženih stranica kako bi došli do inspiracije.


- 7 -

Slika 6. Jedan od besplatnih predložaka

DESIGN:

Ova podstranica je usredotočena na sve vezano za web, od dizajna pa do korištenja html-a i css-a, a najbolja stvar je što je dosta približena početnicima i ima dosta savjeta upravo za one koji se prvi put susreću sa tim stvarima. Ima oko 70 članaka a većina je vezana za dizajn web stranica. Članak koji bih izdvojio je „Beginner’s Guide To: Building HTML5/CSS3 Webpages“, u ovom članku autor je početnicima približio kreiranje web stranice koristeći HTML5 i CSS3.

Slika 7. Dio koda iz pomenutog tutorijala


- 8 -

WORDPRESS: Ovaj dio sajta korisniku kroz razne savjete i tutorijale pomaže u korištenju Wordpress platforme. Većina članaka nudi pregled raznih dodataka za Wordpress i najzanimljivijih tema koje korisnik može koristiti na svojoj stranici. Ova podstranica je odvojena od „Design“ kako bi se autori članaka mogli što više usredotočiti na Wordpress. WEB 2.0:

Vjerovatno najzanimljivij dio stranice za ovaj kolegij je onaj koji se odnosti na web 2.0 tehnologiju. Ukratko web 2.0 tehnologija je nova generacija weba koja jednostavnim rječnikom zahtjeva veću interakciju između korisnika i računara ili između dva korisnika, a on ustvari korisnicima omogućava sudjelovanje u kreiranju sadržaja weba. Iako je ovo relativno nova tehnologija na hongkiat-u ima najviše članaka upravo na tu temu (preko 140 članaka). Iako je svaki članak na svoj način zanimljiv ja bih posebno istakao „Beautiful Google Doodles (1998 – 2010)“ , naime Google redovno na svojoj početnoj stranici mjenja ilustraciju svog loga a sa time je počeo još 1998. godine. Od jednostavnih ilustracija koje je na samom početku koristio Google je zahvaljujuči web 2.0 tehnologiji te ilustracije čak pretvorio i u interaktivne sa kojima korisnik može upravljati.

Slika 8. Jedna od google-ovih ilustracija koja je ustvari igrica a zasnovana je na web 2.0 tehnologiji


- 9 -

Prednosti i mane

Prednosti: Prednosti stranice hongkiat.com u odnosu na druge slične stranice:

- Sav sadržaj je besplatan - Nema potrebe za registracijom - Obuhvata članke od onih za početnike do veoma komplikovanih - Mogućnost slanja svojih članaka - Preglednost - Osim tutorijala prisutni su i članci o tome kako razmišljati o projektu - Galerija sa slikama za inspiraciju - Mogućnost komentarisanja i ocjenjivanja članka

Nedostaci: Loše strane koje bi se trebale popraviti:

- Nedostatak video tutoriala - Ograničenost na 2D dizajn (nema stranica za audio, video, 3D…) - Nedostatak logotipa


- 10 -

Linkovi

Korisni linkovi http://www.hongkiat.com/blog/breadcrumb-menu-css3/ - kreiranje navigacijskog menija u kodu http://www.hongkiat.com/blog/building-html5-css-webpages/ - kreiranje jednostavne web stranice http://www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/ - kreiranje kontakt forme http://www.hongkiat.com/blog/how-to-make-an-interesting-user-guide-hint-comic/ - kako napraviti interesantnog korisničkog vodiča http://www.hongkiat.com/blog/google-chrome-extensions-designers/ - Google Chrome dodatci za web dizajnere http://www.hongkiat.com/blog/creating-professional-portfolio-site/ - kako napraviti profesionalan portofolio http://www.hongkiat.com/blog/15-html5-experiments/ - interesantni primjeri koji pokazuju šta se sve može sa HTML5 Literatura:

- http://hr.wikipedia.org/wiki/Adobe_Photoshop - http://en.wikipedia.org/wiki/Web_design - http://hr.wikipedia.org/wiki/Web_2.0 - http://en.wikipedia.org/wiki/HTML5 - http://hr.wikipedia.org/wiki/CSS - http://www.bug.hr/mreza/tekst/web-20-hrvatskoj/80124.aspx - http://www.bug.hr/vijesti/swiffy-html5/109608.aspx - http://www.bug.hr/vijesti/uzlet-html5-videa/107224.aspx


- 11 -

Reference:

- http://www.smashingmagazine.com/author/sm-network-hongkiat/ - http://buysellads.com/buy/detail/150 - http://www.photoshop-plus.co.uk/2011/01/13/interview-with-

hongkiat-lim/ - http://kapost.com/kapost-featured-in-hongkiat-com-top-10-project-

management-software-for-remote-teams/ - http://whois.domaintools.com/hongkiat.com - http://websites.hcirn.com/hongkiat.com/ - http://www.aboutus.org/Hongkiat.com - http://gabrielcatalano.com/tag/hongkiat-com/ - http://www.wengkhin.com/2010/02/hongkiat-com-interview/ - http://www.pslover.com/author/hongkiat.com/1.html

Slične stranice:

- http://www.graphicdesignblog.org/ - http://naldzgraphics.net/ - http://tutsplus.com/ - http://www.tutorijali.net/ - http://www.hyperarts.com/ - http://www.tutorialized.com/ - http://www.creativecow.net/ - http://www.videocopilot.net/

opis web stranice - hongkiat

Documents