Tölvustudd
Framleiðsla
VEL608G

Tilgangur

Tilgangur fyrsta verkefnsins er að hanna portfolio vefsíðu sem sýnir öll verkefnin sem verður unnið í önn í VÉL608G.

Undirbúningur

Ég byrjaði fyrst á því að skoða HTML5 template vefsíðunna, ég valdi einhvern fjólubláann template, en eftir 20 sek fannst mér þetta einhvað svo leiðinlegt. Þannig ég ákvað að sjálfur læra á að búa til mína eigin vefsíðu. Auðvitað notaði ég hjálp chatGPT, youtube og annað til aðstoðar.
Ég var skráður í áfanga í 2 daga í vefforritun 1 þannig ég er með einhvern þekkingu, og var greinilega búinn að kaupa domainið superrmanh.com.
Þannig allt þetta sniðmát blabla forsendur litaval eða hvað sem er sem maður átti greinilega gera fylgdi ég ekki.

Hvað vil ég fá úr áfangann?

Ég ætla að vera hreinskilinn, ég hef enga hugmynd hver stefnan á áfangann er. Ég veit ekki einusinni hvað hann snýst um, kennsluáætlun þannig séð hjálpar ekki miklu. En verkefnin frá nemendum á undan og verkefnin framundan virðist að vera áhugavert þannig ég hlakka til að tækla þau verkefni

Vefsíðugerð

Ég reyndi ehv fyrst að gera 3D animated interactive vefsiðu, eins og ég sá á tiktok. Ég reyndi í heilann dag áður en ég gafst upp.

En þemann á vefsíðunni fylgdi SuperMan þemunni víst að ég heiti Manh og átti domainið superrmanh þá fannst mér það viðeigandi.

Ég notaði Vscode fyrir allan kóðann HTML CSS js. Ég reyndar notaði appið Skrifblokk/notepad í byrjun bara til að fá tilfinnuginni áður en ég færði mig yfir í VSCODE.

Miðað við samnemendur sem notuðu Template online þá held ég að vefsíðann mín er mun ljótari. En ég held að læra á að kóða (Með GPT) verkefnið sjálfur gaf mér, góða reynslu á forritunar tungumálin og vefsíðu gerð.


Framhald af
Vefsíðgerði
2

Eins og ég nefndi áður gerði ég verkefnið sjálfur og gerði þða á VSCODE með jss HTML CSS. Superman þema.

Í html skránna ákvað ég að hafa þetta seamless website design þ.s. mér finnst það nett, með fixed .gif bakgrunn. Það þyðir að þetta hunda gif sem sést bakvið heldur stöðunna sína þrátt fyrir að við séum að skruna á vefsíðunna.

Ég skipti fyrsta vefsíðunna í 4 misumandi sections innan við eina html hlekk, þ.a. þegar notendi ýtir á "nav-bar" efst í hornið getur ferðast milli kafla. En týnir sig samt ekki á einhverjum mismunandi href.

Í fyrsta html skránna chattaði ég alla textann því ég nennti ekki skrifa "rétta" ensku. En hægt er að lesa um mig, upplýsingar um mig, og síðann hlekk að verkefnin.

Framhald af
Vefsíðugerð
3

Hér er smá lýsing yfir hvernig kóðinn virkar (DeepSeek lýsir því sem) og hvaða skipunir ég er að nota:

<!DOCTYPE html>: Tells the browser this is an HTML5 document.
<html lang="en">: The root element, with language set to English.
<head>: Contains metadata (title, stylesheets, etc.) not visible on the page.
<body>: Contains all visible content.

<header>: Top section with navigation.
<nav>: Navigation bar with logo and menu links (Home, About, Information, Projects).
<section>: Divides content into parts.
<img>: Displays images (e.g., logo, profile picture, project thumbnails).
<script>: Adds interactivity.
<h1>, <h2>, <p>: Headings and paragraphs for text content.
<footer>: Bottom section with copyright info.
<a > : action function

Ég notaði líka button skipanir fyrir CV, verkefnið, og "contact info" sem var bara hlekkur til samfélagsmiðillinn IG hjá mér.

Takkarnir hafa allaveganna interactive feature þar sem t.d hjá CV þá downloadast mynd, hjá verkefni og samfélagsmiðla takkin fer á annan vafra.

Á myndina hér vinstra meginn er hægt að sjá svona snip af hvernig ég skrifa kóðann og hef þetta download function fyrir cv-ið

Framhald af
Vefsíðugerð
4

Fyrir vefsíðu nr 2, þar sem maður getur fengið aðgengi af allt sem stendur hér, copy og paste alla kóðann frá index html hlutann. Breytti textanna
Fyrir css og js hlutann, til að stíla vefsíðunna fór ég aðalega inná LLM (ChatGPT og DeepSeek), til að stíla hana út frá það sem ég vildi. En ég g.r.f að hún hafi bara tekið verkefni frá einhverjum á netinu sem var með svipaða pælingu og ég.
Í mínu tilviki er nóg að skrifa superrmanh.com til að fá aðgengi á verkefnið mitt

GitHUB

Ég opnaði GitHUB repository fyrir áfangann, og ýtti á eftirfarandi takkan.

GitHUB 2

Hér dreg ég inn skjölinn svo öll filein ég nota uploadast inná github.

GitHUB 3

Hérna eru öll filein mín sem ég notaði fyrir verkefnið.

Hér er aðgangur til þau file.


Depyloyment
Vefsíðu

Ég notaði ekki aðferðinna sem ég átti að nota gegn GITHub, þar sem ég pusha einhver gögn þar í gegn.

Ég notaði Netifly, þar sem ég á domainið superrmanh og vildi nota það fyrir einhvað og notaði Netifly í stað Github . En það er hægt að tengjast við Github á netifly og pusha síðann verkefnið þar í gegn líka. En inná Netifly þarf maður að manually senda inn gögnin og síðan hlaða það upp. Eftir það þá er hægt að deploya vefsíðunna þannig að aðrir geta notað hana.

Ekki bara það er þægilegari að skrifa superrmanh.com heldur einhvern langur linkur sem enginn nennir að skrifa.