Verkefni 1

Vefsíða

Verkefni 1 í Tölvustuddri framleiðslu - Vefsíðugerð

Undirbúningsvinna

Ég var ekki skráður í námskeiðið þegar misserið hófst og komst því ekki inn á Canvas síðu námskeiðsins við vinnslu þess. Mér til bjargar komu Huldar Hlynsson og Friðrik Valur Elíasson sem létu mig vita af bæði námskeiðinu og verkefninu auk þess sem þeir sendu mér nauðsynleg gögn af Canvas síðunni til að geta unnið verkefnið.

Ég byrjaði á því að horfa á fyrsta kennslumyndbandið. Ég hafði nú þegar fiktað aðeins við HTML í VS Code og nota það forrit (compiler) nú þegar við annars konar forritun. Kennarinn nefndi í myndbandinu að kostir við Brackets væru meðal annars "Live" eiginleiki og "Git integration". Ég er nú þegar með Live extension í VS Code og tel mig vita að Git integration sé vel geranlegt í VS Code. Því ákvað ég að notast við VS Code í staðinn fyrir Brackets en það kann að breytast seinna meir ef sú ákvörðun verður til vandræða.

Næst hlóð ég niður vefsíðusniðmátinu Spectral frá Html5Up og byrjaði að setja síðuna upp svo hún henti til vinnubókarskrifa.

Uppsetning á Github

Ég setti upp nýtt "Repository" á Github síðunni minni undir nafninu TolvustuddFramleidsla. Ég reyndi að nota eftirfarandi skipanir í Git Bash:

echo "TolvustuddFramleidsla" >> README.md
git init
git add README.md 
git commit -m "first commit"
git branch -N main
git remote add origin https://github.com/saemi10/TolvustuddFramleidsla.git
git push -u origin main

Það gekk þó ekki, og alltaf fékk ég villukóðann:

error: src refspec master does not match any
error: failed to push some refs to 'https://github.com/saemi10/TolvustuddFramleidsla.git'

Eftir ágætis leit á Stack Overflow fann ég lausn frá Jin Kwon. Hún er eftirfarandi tvær skipanir:

git commit -m 'fixes' --allow-empty
git push

Þá fór ég í stillingarnar á GitHub Repository-inu, undir flipann "Pages" og breytti "source" úr "none" í "main" og vistaði. Þar með var vefsíðan mín komin í loftið.

Aðlögun vefsíðu að mínum þörfum

Ég hófst handa við að breyta vefsíðunni. Ég opnaði index.html skrána og breytti titlinum og gerði tilraun til að setja inn favicon merki. Ég geri ráð fyrir að koma aftur að favicon uppsetningunni síðar.

Næst endurnefndi ég generic.html skrána sem V1.html, afritaði hana og nefndi afritið V2.html. Svo íslenskaði ég síðuhausinn og "hamborgaravalmyndina" í index undirsíðunni. Það afritaði ég svo á allar undirsíður vefsíðunnar:

Ég endurskrfaði Banner texta forsíðunnar og tengdi takkann sem þar var við undirsíðu verkefnis 1. Ég stefni svo á að uppfæra þann takka svo hann vísi alltaf á nýjasta verkefni þess tíma.

Þegar skrollað er niður síðuna koma þrír hlutar (e. section). Ég hyggst nota fyrsta hlutann sem stutta kynningu á mér en læt það bíða í bili. Annan hlutann ætla ég að nota sem smá kynningar á viðfangsefni hvers verkefnis. Ég skipti því um mynd og breytti textanum í fyrsta undirhlutanum.

Ég veit ekki alveg hvað ég ætla mér að gera við þriðja hlutann og hvort ég ætla að nýta mér CTA hlutann svo ég læt þá hluta síðunnar liggja eins og þeir eru í bili sem komment svo hlutarnir birtist ekki á síðunni.

Til að klára forsíðunna breytti ég Footer síðunnar, setti inn viðeigandi hlekki og fann tákn fyrir þá. Táknin tók ég af Font Awesome. Það er gert með því að leita að því tákni sem mann vantar, segjum til dæmis tákn fyrir háskóla, smella á það tákn sem maður hefur áhuga á og lesa svo klasaheiti táknsins:

Klasaheitið færir maður svo inn í hlekk eins og sjá má á næstu mynd. Þetta færði ég svo yfir á allar aðrar undirsíður vefsíðunnar. Þá fannst mér forsíðan orðin ágæt þrátt fyrir að skilja eftir smá Lorem ipsum á nokkrum stöðum.

Til að ganga fallega frá hlutunum áður en ég setti nýja útgáfu inn á GitHub tók ég elements valmöguleikann út úr hamborgaravalmyndinni á öllum undirsíðum vefsínnar með því að breyta viðeigandi skipun í athugasemd. Þannig get ég auðveldlega sett elements síðuna aftur inn til að nota við frekari breytingar á síðunni seinna meir.

Loks uppfærði ég síðuna inn á GitHub repository-ið með Git Bash eins og áður hefur verið lýst.

Breyttar áherslur vefsíðunnar

Skráning mín í námskeiðið fór loks í gegn og þar gat ég séð allar upplýsingar um verkefni. Ég komst þá að því að tilgangur síðunnar er ekki alveg sá sem ég hélt að hann væri, hreinlega bara vinnudagbók, heldur meira síða til að sýna hvað ég hef gert tengt mínu námi. Því þarf ég að bæta ferilskrá við síðuna og breyta nokkrum útfærsluatriðum á borð við virkni takka lítillega.

Ferilskrá

Ég tók afrit af V1.html skránni og vistaði undir heitinu Ferilskra.html. Ég bætti svo flipa við valmyndina fyrir síðuna á öllum undirsíðum vefsíðunnar, eins og áður hefur verið sýnt. Því næst breytti ég titlum og textanum efst á síðunni til að gera hann við hæfi fyrir ferilskrá.

Þá hóf ég að skrifa fyrsta hluta ferilskráarinnar: kynningu á mér. Ég vildi hafa mynd af mér hægra megin við textann. Ég fór þá í undirsíðuna "elements.html" og fann þar uppsetningu á slíkum texta:

Til þess að fá myndina inn þarf maður að setja hana inn í span skipun og nota klasann "image left". Næst setti ég inn upplýsingar um menntun. Þá nýtti ég mer span skipunina sem ég var nýbúinn að kynnast. Með smá leit á netinu fann ég lausn á Stack Overflow frá notandanum Giona sem byggir á því að bæta style="float: right;" inn í span skipunina.

Eftir það fyllti ég inn ferilskrána mína á hefðbundinn hátt. Ég lenti hins vegar í vandræðum þegar mig vantaði aukið bil (e. tab) inn í textann minn. Ég fann góða útskýringu á því að tab skipun er ekki til í HTML og lausn við því vandamáli er að setja inn fjögur ósamþjappanleg bil (e. non-breakable space).

Endurbætur og breytt skipulag

Þegar ferilskráin var komin inn fannst mér við hæfi að láta takkann á forsíðunni vísa frekar á ferilskrá heldur en nýjasta verkefnið. Svo skrifaði ég inn smá texta í hluta 1 á forsíðunni og breytti um tákn með Font Awesome eins og áður hefur verið lýst. Svo commentaði ég þann part af hluta 2 á forsíðunni sem ekki er kominn í notkun og geymi hann þar til ég hef eitthvað að birta. Ég skildi þó eftir smá teaser fyrir verkefni 2.

Svo ákvað ég að gera síðuna þægilegri til notkunar án músar. Því bætti ég við huldum "skip-navigation" takka efst. Leiðbeiningar um uppsetningu hans fann ég á YouTube en þær samanstanda af eftirfarandi kóða neðst í main.css skránni:

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}
								
/* Skip to main content */
.skip-nav-link {
	background: #ed4933;
	padding: 0.5rem 1.5rem;
	border-radius: 0 0 0.25rem 0.25rem;
	position: absolute;
	left: 0.5rem;
	transform: translateY(-120%);
	transition: transform 325ms ease-in;
}
								
.skip-nav-link:focus {
	transform: translateY(0);
}

og eftirfarandi kóða í index.html skránni á milli "header"-sins og "nav"-sins:

Að lokum skipti ég um heiti á síðunni V2.html í valmyndinni og fór svo í gegnum allar undirsíðurnar og tók elements.html valmöguleikann út úr valmyndinni. Breytingunum push-aði ég svo á GitHub eins og áður hefur verið lýst.

Stay tuned þrívídd

Þá mætti ég loksins í fyrsta tímann í áfanganum. Og þar talaði kennarinn um að það síðan þyrfti að vera metnaðarfull til að geta fengið 10 í einkunn fyrir hana. Ég mundi þá eftir myndbandi sem ég hafði einhvern tímann séð sem sýndi mjög flott 3D-animation með bara css og html kóða. Undir myndbandinu var hlekkur að kóðanum bak við meistaraverkið eftir Noah Blon.

Ég tók því kóðann sem þar var að finna og setti inn í main.css skrána mína. Tók svo blokkina af html kóðanum og setti neðst á síðuna um verkefni 2. Ég þurfti þó að gera töluverðar breytingar á kóðanum sem fór í css skrána. Ég byrjaði á því að færa import skipanirnar, sem hlaða niður leturgerðum, efst í skrána. Þá fór texinn að birtast í því letri sem hann átti að vera í. Textinn var þó ennþá yfir öðru efni sem var ekki alveg það sem ég var að leita að. Þá fann ég kóðabútinn position: absolute; undir .stage fallinu. Þegar ég tók þá skipun út lagaðist staðsetningarvandamálið.

Hér hafði ég hugsað mér að setja inn css kóðann sem gerir þetta meistaraverk að raun en þar sem kóðinn eru 150 línur legg ég það á þig lesandi góður að skoða annað hvort upphaflega kóðann eða fletta þessu upp á GitHub repository-inu mínu

Svo vildi ég skipta um texta og skrifa "Stay Tuned!" en lenti í töluverðum vandræðum þar sem mismunandi leturgerði voru fyrir mismunandi orð. Eftir töluvert af fikti og alls konar útstrokunum og innsetningum sem skiluðu engum árangri fann ég efst í css kóðanum að leturgerðirnar voru bara importaðar fyrir einstaka orð eða stafi. Því þurfti ég að breyta textanum í import skipununum, sem hlaða niður leturgerðinni, í þann texta sem ég ætlaði að skrifa og svo breytti ég sömuleiðis textanum í content skipuninni í .layer fallinu í sama texta.

Að lokum breytti ég öllum pixla- og litagildum þar til textinn fór að líta fallega út. Ég prófaði að hækka og lækka tölurnar og færa til litagildin á alls konar vegu í töluverðan tíma þar til ég var orðinn sáttur með útlitið. Mæli með að fikta.😊

Að venju henti ég svo breytingunum inn á GitHub.