Hoppa yfir í efnið

Heimasíðugerð

Föstudagurinn 2. október 2024 kl. 14:10

Internetið umvefur allt í dag og það er gott að kynnast hvernig það virkar. Í Fab Academy skrásetur nemandinn allt sem hann gerir á heimasíðu.

Í fyrstu viku Pre-Fab setur þú upp heimasíðu og birtir á netinu. Við förum í gegnum ferlið á fjarfundi.

HTML

Allar heimasíður byggja á þremur stoðum:

  1. HTML kynning, sýnidæmi
  2. CSS kynning, kennsla
  3. JavaScript kynning, kennsla

Hér er HTML + JavaScript sýnidæmið sem við prófuðum á fundinum:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>

<body>

<h1>My First Heading</h1>
<p id="demo">My first paragraph.</p>

<a href="https://fabacademy.org/2023/labs/isafjordur/students/svavar-konradsson/" rel="nofollow">Fab Academy síða Svavar</a>

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript";
</script>

</body>
</html>

Markdown

Material for MkDocs

Í stað þess að skrifa síðuna með HTML kóða þá skrifum við í Markdown, sem er einfaldara og læsilegra, og látum Material for MkDocs um að breyta Markdown skránni okkar í vel uppsett HTML skjal með innihaldinu okkar, CSS stílforskrift sem segir til um leturgerðir, liti og fleira, og JavaScript sem framkallar virkni síðunnar, eins og t.d. leitarmöguleikann. Allt sjálfvirkt og án þess að við þurfum að líta undir húddið. En það er gott að vita að það má setja HTML, CSS og JavaScript kóða inn í Markdown skjölin ef maður vill sérsníða eitthvað. Til dæmis kafaði Doddi ofan í CSS kóðann á fabisa.is til að sérsníða forsíðuna.

Farið eftir þessu myndbandi til að setja upp Material for MkDocs heimasíðu og birta á netinu með GitHub Pages:

Hér eru helstu skrefin í ferlinu:

  1. Setjið fyrst upp Python.
  2. Næst er það Git uppsetning, tenging við heimasíðuna þína.
  3. Og að lokum Material for MkDocs uppsetning, stillingar, fídusar.
  4. Material er ekki eina þemað fyrir MkDocs heimasíðukerfið: MkDocs Themes
  5. Nú getið þið skrifað heimasíðuna ykkar í Markdown. Það er auðvelt og gagnlegt að læra Markdown framsetningu (t.d. eru readme skrár á GitHub skrifaðar í Markdown).

Doddi útbjó góða kynningu á Git fyrir ykkur:

Myndir og myndbönd

Það er afar mikilvægt að þjappa öllum myndum og myndböndum áður en efnið er sett á heimasíðu, því að annars tekur það allt of mikið pláss og veldur tómum vandræðum.

Greenshot uppsetning

ImageMagick uppsetning, skipanir

FFMPEG uppsetning, skipanir

Ég nota FFMPEG til að þjappa myndböndum fyrir netið, eins og ég sýni í myndbandinu. Ef það gengur brösuglega að setja upp eða nota FFMPEG hjá ykkur, þá gætu þessar uppsetningarleiðbeiningar hjálpað.

Á Fab Academy síðunni minni útskýri ég hvernig ég nota ImageMagick til að þjappa myndum og FFMPEG til að þjappa myndböndum í terminal:

Image compression for the web

Video compression for the web

Heimaverkefni

Þegar prufusíðan ykkar er komin í loftið skuluð þið nota hana til að skrásetja hvernig þið settuð hana upp. Nú er tíminn til að læra að skrifa texta sem er framsettur með Markdown, og prófa einhverja af fídusunum í Material for MkDocs. Hér getið þið skoðað það sem ég prófaði:

MkDocs setup from scratch

Athugið að þið getið skoðað Markdown skrána á bak við síðuna mína með því að smella á augað við hliðina á titlinum efst á síðunni:

View Page Source

Hér er Markdown skráin á bak við síðuna sem þú ert að skoða núna:

Pre-Fab heimasíðugerð, commit history

Næsta vika

Vika 2: Rafrásasmíði