Sækja þarf þá pakka sem fram koma í package.json
áður en verkefnið er keyrt. Þegar því er lokið skal keyra verkefnið með skipuninni npm run dev
í skipanaglugga.
Markmið verkefnisins var að hanna og útfæra vefsíðu frá grunni eftir gefinni fyrirmynd. Gefnin var index.html
með vísun í styles.css
og grid.css
ásamt tómum skrám fyrir products.html
, staff.html
og cart.html
sem finna má í möppunni pages/
.
Öllu útlit er stjórnað í gegnum styles.scss
, sem síðan er þýdd yfir í styles.css
. Úliti síðurnar er skipt upp í nokkra hluta og hefur hver hlut .scss
skrá út af fyrir sig. Allar .scss
skrár má finna í möppunni scss/
og eru tengdar inn í syles.scss
.
Í skránni config.scss
eru allar breytur og fastar verkefnisins skilgreindar á einum stað, en þær eru svo notaðar í öðrum skjölum.
Eftirfarandi skrár eru notaðar til þess að búa til útlit vefsíðunnar:
cart.scss
config.scss
footer.scss
grid.scss
header.scss
products.scss
staff.scss
Allar myndir sem notaðar eru á vefsíðunni má finna undir ìmg/
. Vísað er í þær úr .html
skránum.
Skráin package.json
heldur utan um þau tæki og tól sem nauðsynleg eru til þess að síðan keyri. Þar má finna upplýsingar um þá pakka sem notaðir eru í verkefninu, og útgáfu þeirra. Einnig má finna upplýsingar um GitHub síðu verkefnisins.
Mappan node_modules/
heldur utan um alla pakka sem byggt er á.
Að lokum voru gefnar nokkrar skrár með verkefninu, en þær eru:
efni/
: Upplýsingar um texta sem koma á fram á vefsíðunni.utlit/
: Myndir og myndband sem sýna útlit fyrirmyndar í mismunandi stærðum..editorconfig
.gitattributes
.gitignore
: Yfirlit yfir allar þær skrár sem git á að líta framhjá.stylelintrc
Hópmeðlimir og höfundar þessa verkefnis eru:
- Friðrik Árni Halldórsson ([email protected])
- Kristjana Björk Barðdal ([email protected])
- Lea Jerman Plesec ([email protected])
Verkefnið felst í því að smíða vef eftir forskrift.
Gefnar eru fyrirmyndir í 500px
, 800px
og 1500px
með grind ásamt 1500px
án grindar og yfirliti yfir virkni vefs í utlit/video.mp4
.
Gögn fyrir síður eru í viðeigandi textaskrám (t.d. forsida.txt) undir efni/
. Myndir fyrir síður eru gefnar undir img/
. Afrita þarf öll gögn á milli síðna, ekki er krafa um að setja upp sameiginlegan haus/fót á síðum með einhverju kerfi eða forritun.
Efni síðu skal ekki vera breiðara en 1200px
. Litir í haus og fæti skulu fylla út í allt lárétt pláss.
Síður hafa allar sama haus og sama fót. Vöruflokkar í fæti skulu allir vísa á pages/products.html
.
Grunn leturstærð er 16px og fylgja allar aðrar leturgerðir eftirfarandi skala: 12 14 16 18 21 24 36 48 60
.
Litapalletta fyrir vef er #000000
, #ffffff
, #afb281
, #cee8ff
, #fcffd2
og #cc9694
.
Letur fyrir meginmál er Open Sans eða helvetica, arial eða sans-serif letur. Letur fyrir fyrirsagnir er Oswald, Verdana eða serif letur.
Flest allt er sett upp í 12 dálka grind með 20px
gutter.
Öll bil eru hálft, heilt, tvöfalt eða þrefalt margfeldi af gutter. Hægt er að nota reglustiku tól (t.d. http://www.arulerforwindows.com/ eða http://www.pascal.com/software/freeruler/) til að finna nákvæmar stærðir en mestu skiptir að lausn svipi til en sé ekki nákvæmlega eins og fyrirmynd.
Allar hreyfingar gerast á 300ms
með ease-in-out
hröðunarfalli.
Ekki þarf að útfæra neina virkni fyrir takka eða form.
Verkefnið skal unnið í hóp með þremur einstaklingum. Hafið samband við kennara ef ekki er mögulegt að vinna í hóp.
Notast skal við Git og GitHub. Engar zip skrár með kóða ættu að ganga á milli í hópavinnu, heldur á að „committa“ allan kóða og vinna gegnum Git.
README.md
skrá skal vera í rót verkefnis og innihalda:
- Upplýsingar um hvernig keyra skuli verkefnið
- Lýsingu á uppsetningu verkefnis, hvernig því er skipt í möppur, hvernig CSS er skipulagt og fleira sem á við
- Upplýsingar um alla sem unnu verkefni
- Leyfilegt er að halda eftir þessari verkefnalýsingu en hún skal þá koma á eftir ykkar lýsingu
Setja skal upp Sass og stylelint fyrir verkefnið. Gefin er styles.scss
skrá með grunn upplýsingum.
Gefin er .stylelintrc
skrá sem segir til um hvernig lint fyrir scss
skrár skuli háttað.
Í .gitignore
er styles.css
hunsað sem þýðir að það verður ekki checkað inn. Það er gert vegna þess að það er búið til af sass út frá styles.scss
Eftirfarandi er sett upp í verkefni:
.stylelintrc
með upplýsingum um hvernig stylelint eigi að haga sér. Setja þarf uppstylelint-config-primer
pakkann.gitignore
sem hunsar algengar skrár, sjá nánar.gitattributes
sem kemur í veg fyrir ósamræmi sem geta komið upp þegar unnið er á milli stýrikerfa.editorconfig
sem samræmir notkun á tabs og spaces, bilum og fleiraindex.html
með vísun ístyles.css
oggrid.css
ásamt tómum skrám fyrirproducts.html
,about.html
ogcart.html
undirpages/
, halda skal þessu skipulagigrid.css
til að sjá grid sem fyrirmynd er unnin eftir
Setja þarf upp package.json
og sækja viðeigandi pakka til að tæki og tól sem verkefnið á að nýta virki.
- 10% -
README
eftir forskrift, tæki og tól uppsett - 20% – Snyrtilegt, gilt (skv. stylelint) CSS/Sass, gilt og aðgengilegt HTML
- 30% – Almennt útlit
- 10% – Forsíða
- 10% – Vörulista síða
- 10% – Um síða
- 10% – Kaupa síða
Verkefni sett fyrir í fyrirlestri mánudaginn 8. október 2018.
Einn aðili úr hóp skal skila fyrir hönd allra og skila skal undir „Verkefni og hlutaprófa“ á Uglu í seinasta lagi fyrir lok dags föstudaginn 26. október 2018.
Skil skulu innihalda:
- Nöfn allra í hóp ásamt notendanafni
- Slóð á GitHub repo fyrir verkefni, og dæmatímakennurum skal hafa verið boðið í repo (sjá leiðbeiningar). Notendanöfn þeirra eru
arnar44
,gorri4
,mimiqkz
,hinriksnaer
,gunkol
,freyrdanielsson
ogosk
- Slóð á verkefnið keyrandi á vefnum
Sett verða fyrir tíu minni verkefni þar sem átta bestu gilda 3,5% hvert, samtals 28% af lokaeinkunn.
Sett verða fyrir tvö stærri verkefni þar sem hvort um sig gildir 11%, samtals 22% af lokaeinkunn.
Myndir frá:
- Innkaupakörfu íkon eftir Stephen Hutchings á www.flaticon.com
- Unsplash
- https://unsplash.com/photos/MohB4LCIPyM
- https://unsplash.com/photos/tpLz5aKdQmM
- https://unsplash.com/photos/_T4w3JDm6ug
- https://unsplash.com/photos/cOJgO4Zzs-w
- https://unsplash.com/photos/PDX_a_82obo
- https://unsplash.com/photos/ArGvQkA7iOw
- https://unsplash.com/photos/5ExRBlHu1DA
- https://unsplash.com/photos/b9dS7hpi67w
- https://unsplash.com/photos/asBwpysXVB4
- https://unsplash.com/photos/-s6XYBp1WTc
- https://unsplash.com/photos/wKOKidNT14w
Útgáfa 0.2