mandag 22. august 2016

Kodeverksted del 1: HTML

Ingenting er viktigere når man skriver ei nettside – det være seg ei fullverdig hjemmeside eller en artikkel på en blogg – enn at man har en god dokumentstruktur. Dette er det samme som når man skriver en lengre tekst til en hjemmeeksamen, en bachelor- eller mastergradsoppgave, eller en artikkel i en avis.

For å illustrere dette, skal jeg driste meg til å være så frekk at jeg bruker min egen masteroppgave som eksempel; for å lese den, er det bare å gå til Munin. Åpner man innholdsfortegnelsen, ser man at man har ei rekke hovedoverskrifter, som fra kapittel Ⅰ av har diverse underoverskrifter. Under hver av disse overskriftene er det en tilhørende tekst. Begynnelsen av dokumenttreet ser slik ut:

    Eksempel på dokumenttre i HTML basert på de første sidene av masteroppgaven «Cinaedus: Seksualmoral i førkristen romersk keisertid» av Tor-Ivar Krogsæter
    Eksempel på dokumentstruktur med HTML-overskriftsnivåene vist på siden. Av plasshensyn er ikke alle overskriftene er tatt med. For å se stor versjon, klikk på bildet.
  1. Dedikasjon
  2. Forord
  3. Forkortelser, konvensjoner og om latinen
  4. Introduksjon
    1. Problemstilling og avgrensning
      1. Struktur og metode
      2. Tidsperiode
      3. Kilder

Under hver av disse overskriftene hører det en tekst til. Teksten som står under «Dedikasjon» er ikke koblet til teksten som står under «Forord»; teksten under «Problemstilling og avgrensning» er underlagt «Ⅰ Introduksjon»; teksten under «Struktur og metode», «Tidsperiode», «Kilder» osv., er alle underlagt «Problemstilling og avgrensning», men er ikke underlagt hverandre i et kryssforhold.

Struktur i HTML

De to viktigste strukturelle elementene man må lære seg, er kodene for overskrift og avsnitt. Overskriftene setter man med <h1><h6>, og avsnitt med <p>. Eksempelet over hadde i HTML sett slik ut (oppgavetittelen er tatt med her for å vise den fullstendige strukturen; «[…]» indikerer utelatt tekst):

<h1>Cinaedus<br /> Seksualmoral i førkristen romersk keisertid</h1> <p>Masteroppgave i historie […]</p> <h2>Dedikasjon</> <p>Hadde jeg […]</p> <h2>Forord</h2> <p>Da professor Synnøve des Bouvries […]</p> <h2>Forkortelser, konvensjoner og om latinen</h2> <p>For verk fra det klassiske korpuset[,] forholder jeg meg til standardforkortelsene som vist i […]</p> <h2>&#8544;<!--romertall I-->&nbsp;Introduksjon</h2> <p>Seksualiteten står for ethvert samfunn forankret som én av grunnpillarene. Bruken, tolkninga og forståelsen av den er noe av det første som med nødvendighet blir underlagt menneskers regulering og kontroll, og avvik fra den vedtatte sannheta har derfor med letthet blitt tolket som […]</p> <h3>&#8544;.1&nbsp;Problemstilling og avgrensning</h3> <p>Interessen for temaet ble tent da jeg ved en tilfeldighet […]</p> <h4>&#8544;.1.1&nbsp;Struktur og metode</h4> <p>Oppgaven er delt i tre deler. I første del, […]</p> <h4>&#8544;.1.2&nbsp;Tidsperiode</h4> <p>Etter årevis med borgerkrig innledet keiser Augustus en […]</p> <h4>&#8544;.1.3&nbsp;Kilder</h4> <p>Noe av problemet dette studiet står overfor, […</p>

Som man ser av koden, er teksten tydelig strukturert, og det er kun det tekstlige innholdet og hvordan det skal struktureres som er skrevet inn i HTML-fila. Legg dessuten merke til at alle kommandoene man gir nettleseren, rammes inn av tegnene mindre enn (<) og større enn (>). Når nettleseren ser disse tegnene, forventer den at det skal komme en kommando, som f.eks. h1. Dersom man skriver bare h1, derimot, vet ikke nettleseren at det er en kommando. Man må altså ramme den inn, slik at det står slik: <h1>. Kommandoen avsluttes ved at man setter inn en skråstrek (/) foran selve kommandoen, inni ramma, for eksempel </h1>. Alt som står mellom kommandoene <h1> og </h1> blir formatert som overskriftsnivå 1 (h for heading), og forteller nettleseren at teksten som følger under skal regnes som barn av h1-overskrifta i dokumenttreet.

Andre grunnleggende HTML-elementer

Men når man skriver en tekst, trenger man mer enn bare struktur – det greier man jo like enkelt på en skrivemaskin – man trenger også form. Hvilken form som ønskes, erklæres i HTML-fila, og formes i stilarket. Stilarket skal vi ikke gå inn på her – det kommer i neste klasse – men vi skal se på en del andre elementer som kan være nødvendig for å skrive en vanlig tekst på ei nettside.

Sitering

En gefirt er lik kegelhøyda til skrifta; med andre ord er 2 gefirt i 10 punkt skrift lik 20 punkt. For mer, se Typografisk leksikon: «Gefirt»

I vanlige vitenskapelig tekster er det to sitattyper: «linjesitat» og blokksitat. Med «linjesitat» mener jeg sitater som står som del av teksten, utskilt kun med anførselstegn foran og bak. Blokksitater, derimot, er skilt ut fra den øvrige teksten, og har i ordinære, vitenskapelige tekster innrykk og mindre skrift (det vanlige er 2 gefirt innrykk og skriftstørrelse redusert til 10 pt).

For å sitere i HTML, bruker man kommandoene <q> og <blockquote>. Dersom kilden til den siterte teksten er ei nettkilde, tilføyer man cite="http://kildentilteksten.com" i sitatet; dersom kilden ikke er fra nettet, er det god skikk å legge til kildereferansen i title="Referanse", og dette sistnevnte kan man egentlig gjøre uansett. Språket sitatet er skrevet i, definerer man ved å tilføye lang="xx", der xx er bokstavkoden for språket, f.eks. en, en-uk, la eller no. Et eksempel:

Hvorfor er pietās av betydning for å forstå seksuelt avvik? Cicero er syrlig sarkastisk når han omtaler M. Antonius’ evne til å vise pietās: Etenim est pietātis plēna dēfēnsiō.⁵⁰ Skammen han påførte seg og familien ved å ha blitt bankerott før han var myndig var ille, men livet han førte var enda mer skjemmende, og det er her den velkjente passasjen kommer inn:

Sūmpsistī virīlem, quam statim muliebrem tŏgam reddidistī. Prīmō vulgāre scortum; certa flāgitī mercēs nec ea parva; sed citō Cūriō intervēnit quī tē ā meretrīciō quaestū abdūxit et, tamquam stŏlam dedisset, in mātrimōniō stăbĭlī et certō collocāvit.⁵¹

Et viktig rituale for enhver romer, var dagen man skiftet ut barnets tŏga praetexta (den purpurkantede togaen båret av fribårne romerske gutter samt embetsmenn⁵²) med tŏga virīlis. […]

Krogsæter, Tor-Ivar: Cinaedus : Seksualmoral i seinrepublikken og tidlig keisertid, masteroppgave i historie, UiT Norges arktiske universitet, høsten 2016, s. 68.

Sitatet over viser begge typene sitat – linjesitat og blokksitat – og koden for å skrive disse inkluderer altså både q og blockquote. Det kan være greit, for oversiktens skyld, å vise en komprimert versjon av koden; i det følgende eksempelet har jeg fjernet alt unødig (vist med […], slik at selve strukturformateringa kommer tydelig frem:

<blockquote cite="http://munin.uit.no/handle/10037/8432" title="Fra masteroppgaven _Cinaedus_ av Tor-Ivar Krogsæter, s. 68"> <p>Hvorfor […] evne til å vise […]: <q lang="la" […] title="Cic. Phil. 2.44 […]">Etenim est […].</q>[…] Skammen han påførte seg […] det er her den velkjente passasjen kommer inn:</p> <blockquote [cite og title som over] lang="la"> <p>S&#363;mpsist&#299; […]</p> </blockquote> <p>Et viktig rituale for enhver romer, var dagen man skiftet ut barnets <i lang="la">t&#335;ga praetexta</i> (den purpurkantede togaen båret av fribårne romerske gutter samt embetsmenn […]) med <i lang="la">t&#335;ga vir&#299;lis</i>. […]</p> <p class="ref">Krogsæter, […]</p> </blockquote>

Legg merke til at språket er klart definert hver gang det avviker fra det som er definert for nettsida (i dette tilfellet norsk). Dette er gjort hver gang noe som ikke er på sidas «morsmål» forekommer, slik at enhver nettleser skal kunne vite når et nytt språk opptrer. Dette er viktig ikke bare for orale nettlesere, men også når utenlandske brukere er innom sida og bruker automatisk oversetting av den.

Å sette kursiv og fet tekst

Koden for å definere kursiv og fet tekst er henholdsvis <i> (italic) og <b> (bold). Merk at dette ikke nødvendigvis betyr at teksten leses fremhevet eller sterkt; som alle studenter lærer rimelig raskt, brukes kursivert tekst både til å markere trykksterk tekst og til å markere bøker, leksika eller andre større verk.

Å markere trykk

Skal man markere trykk, brukes em (for emphasis) eller strong. Vanligvis ser disse ut som i og b, men som med alt annet, kan dette omkodes. Husk at fet tekst brukes når man ønsker at noe skal peke seg ut på sida og leses med trykk, mens kursivert tekst bare markerer trykk, og leder i utgangspunktet ikke leserens øyne til tekststedet.

Lister

Lister finnes i to varianter: Sorterte og usorterte. Disse får man tilgang til ved å bruke kommandoene <ol> og <ul>, som står for henholdsvis ordered list og unordered list. Selve listepunktene angis med <li>, list item. Eksempel:

<ul> <li>Punktlisteledd 1</li> <li>Punktlisteledd 2</li> <li>Punktlisteledd 3</li> </ul> <ol> <li>Nummerert liste, ledd 1</li> <li>Nummerert liste, ledd 1</li> <li>Nummerert liste, ledd 1</li> </ol>

På skjermen ser disse listene slik ut:

  • Punktlisteledd 1
  • Punktlisteledd 2
  • Punktlisteledd 3
  1. Nummerert liste, ledd 1
  2. Nummerert liste, ledd 2
  3. Nummerert liste, ledd 3

søndag 21. august 2016

Det grunnleggende prinsippet for nettsideskriving

Gratulerer med vel overstått første bloggverksted! Jeg vet det gikk veldig fort – vi hadde veldig mye vi skulle gjennom på veldig kort tid – men mange har allerede fått ut den første lille bloggposten sin, som betyr at dere allerede er i gang. Etterhvert som dere lærer mer, kommer dere til å finslipe verktøyene deres, stadig vite bedre hvilke verktøy som brukes til hvilke oppgaver, og få et jevnt over mer profesjonelt uttrykk. Målet er at dere skal forstå de mest grunnleggende prinsippene for skriving av nettsider (for dere, ɔ: bloggposter), så dere – når dere skal i gang med virket deres etter endt utdannelse – føler dere komfortable med å ta ei ledende rolle i tilstedeværelsen på nett.

Innledningsvis snakket jeg om et grunnleggende prinsipp for skriving av nettsider, og det er viktig at alle forstår dette skillet, og hvor viktig det er for god praksis. Ei nettside består av to grunnleggende byggesteiner: form og innhold. Form er hvordan sida ser ut; innhold er den faktiske teksten og bildene som er på sida. Det er viktig at man, akkurat som når man skriver et dokument i en tekstbehandler, ikke gjør manuelle formateringer av innholdet, men at man heller redigerer stilen som tilhører elementet man ønsker å endre. Det er kanskje best å forklare dette med et eksempel.

Stileksempel fra MS Word:

Dersom jeg ønsker at alle fremmedord i et Word-dokument skal være ikke bare kursive, men vises med lilla, fet tekst, lager jeg en tegnstil i Word som har egenskapene kursiv, fet og lilla; la oss si at stilen gis navnet «Fremmedord». Siden det er snakk om fremmedord, kan man regne med at flere språk kan være involvert, så jeg lager jeg deretter ekstra stiler for eksempelvis gresk, latin, engelsk, fransk og tysk; disse stilene får navnene «Fremmedord: gresk», «Fremmedord: latin» og så videre. Forhåpentligvis finner jeg ut at å ha både kursiv og fet tekst på en gang er litt mye av det gode, så jeg bestemmer meg for å fjerne fet type. Når jeg gjør dette i stilen «Fremmedord» blir også alle de andre stilene («Fremmedord: gresk», «Fremmedord: latin» osv.), siden disse er satt til å være grunnlagt på den første hovedstilen jeg laget. I CSS er det dette som kalles barn og avkom.

Når man har lært seg å alltid skille mellom form og innhold i tekstdokumenter, oppdager man fort hvor enkelt og raskt det er å oppdatere et helt dokument dersom man skulle ha behov for det. Finner man for eksempel ut at man kan slippe å måtte bruke den forferdelig kjedelige, intetsigende Times New Roman, og heller bruke flotte skrifter som EB Garamond, trenger man bare å endre stilen alle stilene er basert på (vanligvis «Standard» (OpenOffice Writer) eller «Normal» (MS Word), og dermed er hele dokumentet oppdatert.

Skillet mellom form og innhold i nettsidearbeid

Det samme prinsippet ligger altså til grunn for utforming av nettsider, om det er en blogg man har, ei hjemmeside for et bibliotek, eller hva det måtte være. Stilen er beskrevet i stilarket ved hjelp av kodespråket CSS, mens innholdet på sida defineres i HTML-fila. I det kommende kodeverkstedet skal vi se nærmere på grunnleggende HTML og CSS. I forkant av det anbefaler jeg alle å følge med her på MDV-bloggen, for i den neste posten skal jeg gi ei kort oppsummering av HTML-kodinga vi gjennomgikk i det første kodeverkstedet.

torsdag 18. august 2016

Velkommen til medie- og dokumentasjonsvitenskap i Tromsø!

Endelig er høstsemesteret i gang igjen, og alle vordende dokument- og medievitere ønskes hjertelig velkommen til UiT. Denne høsten er det satt av seks timer fordelt på tre økter der vi skal diskutere sosiale medier generelt og blogging spesielt, og dere skal få anledning til å starte opp deres egen blogg som del av studiet!

En god blogg har gjerne en viss tematikk; en blogg som den dere skal drifte, kan med fordel fokusere på nettopp det dere skal studere. Hvis dere bruker bloggen aktivt, får dere et glimrende verktøy til eksamensforberedelse – ikke bare har dere et sammendrag tilgjengelig om hva undervisninga gikk ut på, men dere har også bearbeidet materialet, som er en så ofte oversett prosess i innlæringa av ny kunnskap og forståelse.

I arbeidet dere gjør denne høsten, la dere gjerne inspirere av gammel visdom. Dagens latinske fyndord er fra Horats:

Saepe stilum vertās, iterum quae dīgna lēgī sint scripturus.

Du bør vende griffelen ofte, om du skal skrive noe som er verdt å lese om igjen.

Quīntus Horātius Flaccus, Sermōnēs (Satirene) I.10.72.

Lykke til, alle sammen og velkommen til Universitetet i Tromsø – Norges arktiske universitet!