Webmaker

Mozilla er en organisasjon som opprinnelig ble opprettet av nettleserselskapet Netscape. Netscape var den mest brukte nettleseren på begynnelsen av 1990-tallet, men selskapet gikk etter hvert dukken i konkurranse med Microsofts Internet Explorer. Mot slutten ble kildekoden til Netscape frigitt og  videreført av Mozilla. Etter hevrt som Netscape forsvant ble Mozialla en selvstendig organisasjon med flere større prosjekter, basert på åpen kildekode. Mest kjent er nettleseren Firefox.

Mozilla har de senere årene fokusert mye på utdanningssektoren, og laget flere verktøy med sikte på å lære hvordan man lager websider og bruke webmediene på bedre måter. En del av dette initiativet er webmaker.org med verktøyene Popcorn og Thimble.

https://webmaker.org/en-US/teach 

Thimble handler om å lage websider, og lære seg HTML og CSS, mens Popcorn er laget for å lage interaktiv video på web.

På nettsiden finner du en lang rekke eksempler, som kan remikses fritt. Via søkefeltet kan du velge hva slags type prosjekter du vil kikke nærmere på.

Popcorn

Popcorn er et nettbasert verktøy for å lage interaktiv video. Verktøyet gir ganske mange muligheter, men tar utgangspunkt i en enkelt video- eller lydfil. Siden disse mediene har sin egen tidsakse (de spilles av med en gitt hastighet) kan disse være styrende for presentasjonen, så lenge brukeren ikke foretar seg noe.

Ved hjelp av PopcornMaker, sm er en fritt tilgjengelige editor på nettet, kan vi på en enkel måte legge til bilder, tekster, linker mm, og på den måten annnotere videoen eller lydfilen, og gjøre den mer informativ for aktuelle målgrupper. Vi kan i prinsippet også legge vår engen informasjon på toppen av videoer som er publisert av andre, men her bør vi være litt varsomme med tanke på opphaverens ideelle rettigheter.

Videoen definerer her tidslinjen som de øvrige elementene organiseres etter. Editoren er åpent tilgjengelig på nett http://popcorn.webmaker.org og kan tas i bruk umiddelbart.

Eksemplet ovenfor kan sees via denne linken http://popcorn.webmadecontent.org/d01 eller det kan embeddes på en nettside.

Når vi åpner editoren er denne helt tom for innhold. Det er imidlertid også mulig å remikse produksjoner som er lagt ut av andre brukere, og slik sett lære av hvordan de har løst dette.

<iframe src="http://popcorn.webmadecontent.org/12t_" width="640" height="403" frameborder="0" mozallowfullscreen webkitallowfullscreen allowfullscreen></iframe>

Thimble

Thimble er et verktøy for å lage websider, bygget opp på en måte som gjør prosessen svært lærerik. Dette fordi du kan jobbe videre på allerede eksisterende sider, og lære gjennom å modifisere disse. Du kan også begyne med en side uten innhold, og du kan bruke denne funksjonen for å teste ut de enkleste funksjonene. Læringskurven blir kanskje brattere, men potensialet er også størrre, dersom du begynner med en eksisterende side. Ikke minst fordi koden ofte er kommentert, slik at du blir forklart hva du kan gjøre.

Det første du bør legge merke til er “Remix”-knappen oppe til høyre. Denne signaliserer at hvem som helst kan åpne websiden i en editor, og gjøre endringer som de så kan lagre som en ny versjon. Den opprinnelige versjonen blir uendret. I prinsippet kan vi gjøre dette med en hvilken som helt webside, men her er det altså lagt spesielt til rette for dette. Hensikten er at vi på enklest mulig måte skal kunne kikke på og lære av hva andre har gjort.

Websiden ovenfor finner du på denne URLen: https://jonhoem.makes.org/thimble/lamborghini Klikker du på “Remix” vil siden komme opp sammen med en editor, hvor du kan gjøre endringer i koden. Det kjekke er at dette er skrudd sammen slik at de endringene du gjør i editoren til venstre, umiddelbart blir vist i vinduet til høyre. Dermed blir det enkelt å prøve seg fram og se konsekvensen av de endringene du gjør i koden.

http://thimble.webmaker.org/project/6040/edit

Her har vi markert noen av koblingene mellom kode og publisert webside. Skrevet tekst er ganske lett å kjenne igjen. Det er også ganske enkelt å finne adresser til bildene i koden. Bytt en adresse med adressen til et annet bilde på weben (se hvordan du finner bildeadressene), og du ser umiddelbart endringene.

Disse nettsidene er ganske avanserte. Det er mye kode som styrer visningen, som du kan kikke på etter hvert som du blir tryggere på hvordan dette fungerer.

Prinsippet er at HTML styrer strukturen på websiden, men s CSS styrer utseende og layout.

Vi kikker på dette med utgangspunkt i en liten del av siden og den tilhørende HTML-koden:

Tenk på <div>-taggene som bokser som kan ha innhold og som vi kan knytte noen egenskaper til. Dette kan vi gjøre ved å knytte en klasse til taggen, slik som dette. Klassen knytter div-elementet til CSS, som styrer utseende mm – vi kikker litt på det nedenfor:

<div class="column intro-block">

<p>

Automobili Lamborghini holder til utenfor Bologna i Italia. Firmaet ble grunnlagt i 1963 av Ferruccio Lamborghini (1916–1993), som et sideprojekt til traktorfabrikken Lamborghini Trattori.

</p>

</div>

Inne i div-taggen ligger det en <p>-tag. Denne definerer et avsnitt. Størrelse på teksten, dkrifttype mm defineres i CSS

Så kommer en kommentar i koden. Alt som står mellom “<!-- “ og  “-->" blir ikke tatt hensyn til når koden skal gjøres om til en nettside.

<!-- Try changing the 'src' in the <img> tag to point to a different photo. -->

Så kommer flere div-elementer som ligger inni hvernadre. Det betyr at de også kan arve egenskaper fra hverandre i CSS. Klassen “column” kan da brukes til å definere noen egenskaper, mens klassen “image” kan kan få noen selvstendige egenskaper, og noen som er avhengige av at den er plassert inne i “column”. <img>-taggen definerer et bilde og inneholder adressen (URLen) til et bilde. Bildet kan også gis egenskaper i CSS. Til slutt brukes klassen “caption” for å gi noen egenskaper til bildeteksten

<div class="column">

<div class="image">

<img src="http://cdn.lamborghini.com/content/company/history_1963-1964_1800x810.jpg">

<div class="caption">350 GT, fra 1964</div>

</div>

</div>

Så langt alt vel. Vi har et avsnitt med tekst, et bilde og en kort bildetekst. alt plassert i sine respektive “bokser, dvs. <div>-tagger med tilhørende klasser.  Så gjenstår det å gi disse et utseende. CSS-koden finner vi bunnen av det koden i det venstre vinduet:

Det første div-elementet i HTML-koden refererer til to klasser:

<div class="column intro-block">

Disse klassene finner vi igjen på denne måten:

Denne CSS-koden bestemmer at et avsnitt, definert av <p>-taggen, som er plassert inn i et div-element med klassen “intro-block” skal ha noen bestemte egenskaper

.column {

width:96%;

margin:2%;

float:none;

clear:both;

}

 

Bredde 96%

Marg 2%
Ikke tekstflyt rundt elementet

Teksten brytes under elementet

Denne CSS-koden bestemmer at et avsnitt, definert av <p>-taggen, som er plassert inn i et div-element med klassen “intro-block” skal ha noen bestemte egenskaper

intro-block p {

font-size:15px;

font-style:italic;

color:#595959;

margin:20px 0;

}

 
fontstørrelse 15 piksler
teksten i kursiv

farge mørk grå
marg 20 piksler under

Vi ser jo at dette ikke er helt enkelt,  men samtidig er det et  klart system og ved hjelp av Thimle kan vi lett prøve oss fram. Her er det absolutt ingen grunn til å være redd for å ødelegge noe.

https://jonhoem.makes.org/thimble/lamborghini