Vefsíðan mín

Lýsing

Tilgangur verkefnis

Tilgangur verkefnisins er að hanna og búa til vefsíðu sem heldur utan um verkefni áfangans og ferilskrá nemanda. Vefsíðunni er síðan hlaðið upp á Github

Lýsing frá kennara

Veldu og smíðaðu html sniðmát fyrir vefsíðuna þína, skipulegðu hana með upplýsingum um þig og þína ferilskrá.

1. Skrásettu ítarlega hvernig þú framkvæmdir fyrsta verkefnið í máli og myndum þar sem eftirtaldið kemur fram:

   • Hvaðan þú sóttir sniðmátið og/eða innblástur, útskýrðu ákvarðanatöku.
   • Hverjar eru hönnunarforsendur í upphafi, t.d. hvernig hægt er að finna undirsíður, litaval eða annað sem hugsað var út í.
   • Hvernig var staðið að myndvinnslu fyrir síðu, t.d. hvernig myndir og skjáskot voru smækkaðar og unnar fyrir verkefnið.
   • Notaðir þú önnur forrit eða fannstu aðrar upplýsingar til að vinna verkefnið? Segðu frá.
2. Segðu frá hvað þú vilt fá út úr áfanganum og veltu fyrir þér hvað þú myndir vilja gera sem lokaverkefni.
3. Útskýrðu hvernig þú hlóðst upp síðunni á Github, hvort þú notaðir git bash eða aðra aðferð. Segðu frá þeim áskorunum sem þurfti að takast á við og hvernig var leyst úr þeim. Settu hlekk inná github repositoryið inná vefsíðuna sjálfa.

Mín úrlausn

Hönnunarforsendur

Það fyrsta sem ég gerði var að ákveða hvernig ég vildi hafa vefsíðuna mína.
Mér þótti mikivægt að heimasíðan mín yrði notendavæn og snyrtileg þannig að auðvelt væri að nálgast allar upplýsingar innan heimasíðunnar. Til þess að ná því fram langaði mig að hafa valrönd (e. menu-bar) efst á síðunni þar sem hægt væri að flakka auðveldlega á milli síðna. Valröndin er hönnuð með það í huga að hægt sé að bæta við öðrum áföngum eða verkefnum eftir á. Inn í þessari valrönd langaði mig að hafa fellivalmynd (e. drop-down menu) fyrir hvern áfanga til þess að halda vefsíðunni snyrtilegri og auðvelda það að nálgast verkefnin í framtíðinni. Þetta auðveldar það einnig að bæta við áföngum eða verkefnum eftir á. Í valröndinni er sér flipi fyrir höfund síðunnar. Þar er hægt að nálgast ferilskrá hans og upplýsingar um skóla hans.
Þar að auki var ákveðið að hafa valglugga á forsíðunni svo fljótlegt væri að nálgast verkefnin af henni.
Hér að neðan má sjá hvernig ég sá fyrir mér valrödnina áður en ég byrjaði að hanna hana með html

Sniðmát

Ég sótti innblásturinn fyrir vefsíðuna mína aðallega í allar þær vefsíður sem ég hef heimsótt í gegnum tíðina. Þetta olli því að ég hafði grófa hugmynd um það hvernig ég myndi vilja hafa vefsíðuna mína þegar verkefninu var lýst fyrir okkur.
Það helsta sem mig langaði að hafa, eins og kom fram í hönnunarforsendunum, var að hafa fellivalmynd. Ég skoðaði því verkefni hjá fyrrum nemendum (Sæmundur, Björg og Atli) í þessum áfanga og fyrirfram tilbúnu sniðmát. Ég notaði vefsíðuna HTML5UP.net sem kennarinn lagi upp með. Eftir að hafa skoðað allnokkur mismunandi sniðmát í dágóðann tíma fann ég ekki neitt sniðmát sem mér fannst henta minni síðu. Því greip ég í það ráð að skoða leiðbeiningarmyndbönd sem kennarinn gerði árið 2020. Þau notaði ég einnig til hliðsjónar þess að vinna vefsíðuna mína seinna meir. Í einu af þessu myndbandi sá ég sniðmát sem mér leyst vel á svo ég fann það á HTML5UP.net og ákvað að nota það. Sniðmátið heitir Strongly Typed. Til úrvinnslu á vefsíðunni notaði ég forritið Brackets vegna eiginleika þess sem býður upp á að sjá breytingarnar sem gerðar eru á kóðanum jafnóðum í vafra.

HTML-vinnsla

• Mér til aðstoðar notaði ég w3schools.com til þess að læra á skipanir og hjálpa mér að byrja að hanna mína eigin vefsíðu.
• Til þess að finna skemmtilegar CSS myndir notaði ég aðra síðu á w3school.com.

Aðlögun

Það fyrst sem ég gerði var að laga forsíðuna þannig að hún myndi líta rétt út. Ég byrjaði á því að laga forsíðuna til þess að geta kippt og límt (e. copy-paste) sama útlit fyrir undirsíðurnar á vefsíðunni.
Ég ákvað að hafa hliðarglugga á forsíðunni til þess að auðvelda mér (og öðrum) að nálgast verkefnin hratt og örygglega. Hér má sjá valröndina eins og hún lýtur út Því næst lagaði ég neðsta hluta forsíðunnar, þar eru tenglar og annað til þess að hafa samband við mig. Hér má sjá þann glugga Annað sem breytt var:

Myndvinnsla

<span class="image featured"><img src="images/valrond.jpg" alt="" /></span>

GitHub

Áður en ég byrjaði á þessu verkefni hafði ég ekki mikla reynslu á því að nota GitHub. Ég vissi að ég þyrfti að búa til repository og birta síðuna.
Það sem ég gerði var að fara á foríðuna og skrá mig á GitHub.com. síðan bjó ég til repository (passa að velja „public“ ef það er markmiðið) Því næst fylgdi ég þessu myndbandi, sem samnemandi minn mældi með, til þess að birta vefsíðuna.
Ég opnaði repository-ið mitt og setti inn skrárnar mínar inn.
Því næst fór ég inn í settings fór þaðan inn í pages þar passaði ég að:

Annað

Helstu vandamál

Helsta vandamálið sem kom upp við gerð þessarar síðu var það að byrja vegna þess að ég hafði mjög takmarkaða, nánast bara enga, reynslu af því að vinna með html-kóða. Þess vegna tók það smávegis tíma að aðlagst tungumálinnu til að byrja með en þegar ég var búinn að vinna aðeins í vefsíðunni og fikta eins mikið og ég nennti varð ekkert mál að vinna með html.

Marmið mín fyrir þennan áfanga:

• Vera nógu góður í HTML-kóðavinnslu að ég gæti gert heimasíðu fyrir hvaða verkefni sem mig langar til
• Verða sjálfbjarga í að vinna með
1. þvívíddarprentara
2. leiserskera
3. leisermerkingu
4. fræsingu með mismunandi efnum
5. skurð í vínylplötur
6. steypa úr móti

Hugmyndir að lokaverkefni

• Gaman væri að geta samnýtt lokaverkefnið í þessum áfanga (VÉL608G) og lokaverkfnið í tölvustýrður vélbúnaður (VÉL205M), hvernig sem það yrði gert
• Einnig væri skemmtilegt að reyna nota eins margar framleiðsluaðferðir og þessi áfangi býður upp á
• Hugmyndir eru t.d. eftirfaranid
1. Stóll með samanbrjótanlegt bak
2. Sjálfvirkur blaðsíðuflettari
3. Lestrar taska - Taska (/box) sem inniheldur loftkælingu, ljósa statíf (hægt að stilla lit) hleðslustöð fyrir síma (þráðlaus) og pláss fyrir bókina

Verkefni 1 lokið