Dokumentacija projekta - R2 mobile 2012.

Tehniko Veleuilite u Zagrebu

Struni studij Informatike

Dokumentacija
projekta
R2 mobile

Uvod u elektroniko poslovanje

Laboratorijske vjebe
Projekt studenta UEP1 grupe
Hrvoje Kovaiek - 0246041531
http://www.r2mobile.site90.com/
U Zagrebu, 03.06.2012.

TVZ Informatika, Uvod u elektroniko poslovanje, Laboratorijske vjebe, 2012.

Stranica | 1

Dokumentacija projekta - R2 mobile 2012.

1. Sardaj
Dokumentacija projekta........................................................................................................................ 1
1. Sadraj ..................................................................................................................................... 2
2. O projektu................................................................................................................................ 3
3. Linkovi na vanjske stranice.................................................................................................... 3
4. Glava stranice ........................................................................................................................ 4
5. Datoteke i mape .................................................................................................................... 5
6. Mapa weba (sitemap) .......................................................................................................... 7
7. Dizajn.............................................................................................................................. 8
7.1

Boje koje su koritene na web stranici ................................................................ 8

7.2

Layout stranice ........................................................................................................... 8

7.3

Slika poetne stranice ............................................................................................... 9

7.4

Slika Web shop stranice ............................................................................................. 9

8. Koriteni alati, web standardi i tehnologije.......................................................................10

8.1 Alati................................................................................................................................ 10
8.2 Reference ....................................................................................................................10
8.3 Notepad++ ...................................................................................................................10
8.4 Photoshop ...................................................................................................................10
8.5 XHTML 1.1 strict ............................................................................................................10
8.6 CSS 2.1 ........................................................................................................................... 10
8.7 Mozzila Firefox ..............................................................................................................10
9. Sudionik projekta .................................................................................................................10

TVZ Informatika, Uvod u elektroniko poslovanje, Laboratorijske vjebe, 2012.

Stranica | 2

Dokumentacija projekta - R2 mobile 2012.

2. O projektu
Projekt je izraditi Web shop stranicu nekog imaginarnog poduzea. U
ovom sluaju to je ponua mobilnih telefona pod imenom R2 mobile
(http://www.r2mobile.site90.com/).

Naglasak web stranice je na dizajnu i svim dijelovima koje bi neki

Web shop morao sadravati, ako eli ostaviti dojam kvalitetnog ponuaa
nekog proizvoda i/ili usluge. Glavni cilj je ponuditi proizvode/usluge,
istaknuti glavne pogodnosti, omoguiti razliite naine plaanja po
primamljivim, ali i realnim cijenama.

Stranica je kompletna, a uz R2 mobile Web shop koji sadri i filter

mobitela prema cijenama, te proizvoaima, ona sadri i naslovnu
stranicu, stranicu s ponudom, akcijama, te stranicu o poduzeu u kojoj se
nalaze kontakt podaci tvrtke. Klikom na link registriraj se dolazi se do
cjelovitog obrasca za ispunjavanje korisnikih podataka, koji ima svrhu
registracije novog dosada neregistriranog kupca.

3. Linkovi na vanjske stranice

Pretraiva:
- http://www.google.com

Prati nas:
- http://www.facebook.com
- http://www.twitter.com
- https://plus.google.com
- https://accounts.google.com/
- http://www.youtube.com/

TVZ Informatika, Uvod u elektroniko poslovanje, Laboratorijske vjebe, 2012.

Stranica | 3

Dokumentacija projekta - R2 mobile 2012.

4. Glava stranice
Meta tagovi s deklaracijom stranice i pozivima na ostale datoteke za
poetnu stranicu.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" href="slike/r2b.ico" />

<meta name="description" content="R2 mobile je poduzede koje prodaje mobitele po izuzetno

povoljnim cijenama u prodavaonici u Zagrebu, ali i u cijeloj Hrvatskoj putem Web shopa. />

<meta name="keywords" content="R2, mobile, mobiteli, telefoni, internet, akcije, web, shop,
prodaja />
<meta name="author" content="Hrvoje Kovaidek, R2 mobile, TVZ" />

<link rel="contents" href="index.html" />

<style type="text/css">

..
</style>
<title>R2 mobile</title>
</head>

TVZ Informatika, Uvod u elektroniko poslovanje, Laboratorijske vjebe, 2012.

Stranica | 4

Dokumentacija projekta - R2 mobile 2012.

5. Datoteke i mape
Projekt sadri 54 datoteke u 3 mape
Direktorij

Datoteka

Veliina

\UEP\www\web_stranica

iframe0.html

6 KB

\UEP\www\web_stranica

iframe1.html

6 KB

\UEP\www\web_stranica

iframe2.html

6 KB

\UEP\www\web_stranica

iframe3.html

3 KB

\UEP\www\web_stranica

iframe4.html

3 KB

\UEP\www\web_stranica

iframe5.html

4 KB

\UEP\www\web_stranica

iframe6.html

3 KB

\UEP\www\web_stranica

index.html

14 KB

\UEP\www\web_stranica

index2-ponuda.html

21 KB

\UEP\www\web_stranica

index3-akcija.html

12 KB

\UEP\www\web_stranica

index4-web_shop.html

12 KB

\UEP\www\web_stranica

index5-o_nama.html

13 KB

\UEP\www\web_stranica

registracija.html

13 KB

\UEP\www\web_stranica\slike

add.jpg

1 KB

\UEP\www\web_stranica\slike

AmericanExpress.jpg

9 KB

\UEP\www\web_stranica\slike

button_minus.jpg

1 KB

\UEP\www\web_stranica\slike

button_plus.jpg

1 KB

\UEP\www\web_stranica\slike

cart.png

3 KB

\UEP\www\web_stranica\slike

diners.png

5 KB

\UEP\www\web_stranica\slike

dostava.jpg

16 KB

\UEP\www\web_stranica\slike

dostupan1.gif

1 KB

\UEP\www\web_stranica\slike

dostupan2.gif

1 KB

\UEP\www\web_stranica\slike

e2600.png

47 KB

\UEP\www\web_stranica\slike

facebook.png

37 KB

\UEP\www\web_stranica\slike

galaxy_ace.png

80 KB

\UEP\www\web_stranica\slike

google.png

12 KB

TVZ Informatika, Uvod u elektroniko poslovanje, Laboratorijske vjebe, 2012.

Stranica | 5

Dokumentacija projekta - R2 mobile 2012.

\UEP\www\web_stranica\slike

i3gs.png

60 KB

\UEP\www\web_stranica\slike

ip4.png

55 KB

\UEP\www\web_stranica\slike

iphone.png

195 KB

\UEP\www\web_stranica\slike

kosarica.png

67 KB

\UEP\www\web_stranica\slike

l32.jpg

33 KB

\UEP\www\web_stranica\slike

lga200.png

37 KB

\UEP\www\web_stranica\slike

LGMe.png

142 KB

\UEP\www\web_stranica\slike

login.jpg

3 KB

\UEP\www\web_stranica\slike

Maestro.gif

1 KB

\UEP\www\web_stranica\slike

MasterCard.gif

1 KB

\UEP\www\web_stranica\slike

nedostupan.gif

1 KB

\UEP\www\web_stranica\slike

neo_v.jpg

14 KB

\UEP\www\web_stranica\slike

neo_v.png

53 KB

\UEP\www\web_stranica\slike

nex2.png

53 KB

\UEP\www\web_stranica\slike

Optimus.jpg

295 KB

\UEP\www\web_stranica\slike

pozadina.jpg

2 KB

\UEP\www\web_stranica\slike

pozadina.png

3 KB

\UEP\www\web_stranica\slike

r2.jpg

49 KB

\UEP\www\web_stranica\slike

r2b.ico

22 KB

\UEP\www\web_stranica\slike

rss.png

38 KB

\UEP\www\web_stranica\slike

sgalaxy.png

79 KB

\UEP\www\web_stranica\slike

sony1.png

110 KB

\UEP\www\web_stranica\slike

trazi.png

1 KB

\UEP\www\web_stranica\slike

twitter.png

38 KB

\UEP\www\web_stranica\slike

visa.gif

2 KB

\UEP\www\web_stranica\slike

whiteiphone.png

187 KB

\UEP\www\web_stranica\slike

xperia.jpg

53 KB

\UEP\www\web_stranica\slike

youtube.png

33 KB

TVZ Informatika, Uvod u elektroniko poslovanje, Laboratorijske vjebe, 2012.

Stranica | 6

Dokumentacija projekta - R2 mobile 2012.

6. Mapa weba (sitemap)

R2 mobile
Naslovnica
novo u ponudi:
LG Optimus L3
Sony Xperia S
Iphone 4S
Ponuda
ponuda:
LG Optimus L3
Sony Xperia S
Iphone 4S 32GB (white)
Sony Xperia Arc S Pure white
Samsung S7500 Galaxy Ace Plus
Apple iPhone 4 8GB (white)
Apple iPhone 4 8GB (black)
LG Optimus Me P350
Samsung Galaxy S II
LG A200
Samsung E2600
Apple iPhone 3GS 8GB (black)
Samsung Galaxy Nexus
Akcija
akcija:
LG Optimus L3
LG A200
samo u webshop-u:
Iphone 4S 32GB (white)
Samsung E2600
svi iPhone modeli
Web shop:
proizvodi:
LG Optimus L3
Sony Xperia S
Iphone 4S 32GB (white)
Samsung S7500 Galaxy Ace Plus
LG Optimus Me P350
Samsung Galaxy S II
Samsung E2600
O nama:
o nama
kontakt
kako do nas
uvijeti kupnje putem Webshopa
dostava robe
povrat/reklamacija robe

TVZ Informatika, Uvod u elektroniko poslovanje, Laboratorijske vjebe, 2012.

Stranica | 7

Dokumentacija projekta - R2 mobile 2012.

7. Dizajn
Dizajn se bazira na CSS-u unutar HTML datoteke, a osim CSS-a kao
pomoni alat koriten je Adobe Photoshop za obradu slika, ali i izradu
logotipa poduzea.

7.1. Boje koje su koritene na web stranici

rgb(240,240,240)
rgb(232,232,232)
rgb(212,0,35)
rgb(250,250,250)

green
purple
blue
red
grey
orange
white

#CCCCCC
#DDD
#9EB0C8
#239023
#878787

7.2. Layout stranice

Layout stranice veinom napravljen u CSS-u, a kako se pozicionirani
glavni divovi (stupci) ne bi premjetali ili sputali jedni ispod drugog
postavljeni su u elije tablice koje ih dre povezane. Gornji div sadri logo
tvrtke i navigaciju, drugi gornji sliku mobitela, lijevi sadraj, a desni prijavu
korisnika, osnovne informacije o tvrtci, anketu. Donji div sadri navigaciju
i vanjske linkove za praenje (follow us).

TVZ Informatika, Uvod u elektroniko poslovanje, Laboratorijske vjebe, 2012.

Stranica | 8

Dokumentacija projekta - R2 mobile 2012.

7.3. Slika poetne stranice

7.4. Slika Web shop stranice

TVZ Informatika, Uvod u elektroniko poslovanje, Laboratorijske vjebe, 2012.

Stranica | 9

Dokumentacija projekta - R2 mobile 2012.

8. Koriteni alati, web standardi i tehnologije

8.1 Alati
- W3 validator: http://validator.w3.org
-W3 CSS validator: http://jigsaw.w3.org/css-validator/

8.2. Reference
- W3 schools http://www.w3schools.com

8.3. Notepad++
Ovaj program sluio je za pisanje kodova i dizajniranje stranice. CSS i HTML
kodovi pisani su u istoj html datoteci.

8.4. Photoshop
Ovaj program sluio je za ureivanje slika, a prvenstveno je bio namijenjen za
koritenje opcije brisanja pozadine slika (blend), kako bi omoguio bolji dizajn
stranice. U njemu je izraen i logotip R2 mobile-a.

8.5. XHTML 1.1 strict

Prolazi validaciju s 5 greaka na poetnoj stranici, s time da su dvije greke
vezane uz javascript koji nije kodiran, ve je nastao prilikom stavljanja stranice
na domenu, a ostale 3 uz neureene liste koje su u odlomku, a ne bi smjele biti u
bloknom elementu

8.6. CSS 2.1

Prolazi validaciju s 0 pogreaka, U CSS-u u index-u je 480 linija koda.

8.7 Mozzila Firefox

9. Sudionik projekta
U izradi projekta sudjelovao je student Hrvoje Kovaiek grupe UEP1.
Hrvoje Kovaiek - JMBAG (0246041531) - zaduen za izradu svakog
dijela web stranice koritenjem Notepad++-a, te Photoshop-a.
Web shop se nalazi na: http://www.r2mobile.site90.com/

TVZ Informatika, Uvod u elektroniko poslovanje, Laboratorijske vjebe, 2012.

Stranica | 10