2014KomItCbeta

From rtgkomArkiv
Jump to: navigation, search

Grafisk (jule-)design[edit]

2014-12-18: ...hvem kan skabe det sprødeste disney-juleagtige julekort? …i løbet af en time?

<html>

<img src="http://rtgkom.dk/~jan/billeder/rtg8.jpg" height="180px"><img src="http://rtgkom.dk/~jan/billeder/rtgjulekort.png" height="180px">

</html>

Sidste omgang før jul og der er dømt battle i billedmanipulation. Her er reglerne:

  • Man arbejder i par eller enkeltvis
  • Vælg ét af disse 8 originalfotos af skolen og download det til den maskine, du arbejder ved:

<html>

<a href="http://rtgkom.dk/~jan/billeder/rtg1.jpg"><img src="http://rtgkom.dk/~jan/billeder/rtg1.jpg" height="80px"></a><a href="http://rtgkom.dk/~jan/billeder/rtg2.jpg"><img src="http://rtgkom.dk/~jan/billeder/rtg2.jpg" height="80px"></a><a href="http://rtgkom.dk/~jan/billeder/rtg3.jpg"><img src="http://rtgkom.dk/~jan/billeder/rtg3.jpg" height="80px"></a><a href="http://rtgkom.dk/~jan/billeder/rtg4.jpg"><img src="http://rtgkom.dk/~jan/billeder/rtg4.jpg" height="80px"></a><a href="http://rtgkom.dk/~jan/billeder/rtg5.jpg"><img src="http://rtgkom.dk/~jan/billeder/rtg5.jpg" height="80px"></a><a href="http://rtgkom.dk/~jan/billeder/rtg6.jpg"><img src="http://rtgkom.dk/~jan/billeder/rtg6.jpg" height="80px"></a><a href="http://rtgkom.dk/~jan/billeder/rtg7.jpg"><img src="http://rtgkom.dk/~jan/billeder/rtg7.jpg" height="80px"></a><a href="http://rtgkom.dk/~jan/billeder/rtg8.jpg"><img src="http://rtgkom.dk/~jan/billeder/rtg8.jpg" height="80px"></a>

</html>

  • Åbn billedet i et billedbehandlingsprogram som fx. GIMP eller Photoshop
  • Giv den gas (prøv dig frem) med filtre, farveindstillinger, retoucheringer, tilføjelser o.s.v. så den vistnok lidt triste stemning på billedet forvandles til den romantiske, patetiske, tuttenuttede, sødladne, alt-for-lækre stil vi forventer at møde hos Disney's juleklassikere.
  • Gem resultatet som .jpg eller .png med bredden 400px i din html-mappe på rtgkom.dk.
  • Opgiv adressen på billedet til Jens (din lærer) som så vil lægge det op nedenfor:


<html> <img src="http://rtgkom.dk/~jan/billeder/rtgjulekort.png" width="400px"> </html> http://rtgkom.dk/~mathiass14/rtg-jul.jpg http://rtgkom.dk/~cathrinel14/julekort.jpg http://rtgkom.dk/~sarahkr14/gimpogjulbeta2.jpg http://www.rtgkom.dk/~jeppesb14/rtg4%20jul.png http://www.rtgkom.dk/~ceciliehn14/julekort.png

Digitale billeder[edit]

Workshop-Billeder-2014KomItCbeta

  • 2014-11-20: Der er deadline idag. Her en lille opsummering af, hvad der skal gøres:
  1. øvelsen dokumenteres på en side på dit StudieWeb d.v.s. noter, forklaringer og ikke mindst fotos lægges ind på en side (du er jo nu officielt en haj til HTML) der er oprettet til formålet (under "arbejder" eller "opgaver" eller hvad man nu har valgt at kalde menu-punktet=
  2. På lectio lægger du som aflevering en txt-fil, hvor du har indskrevet link til den pågældende side.


Slides fra dagens introduktion til semiotik

Webdesign[edit]

Projekt-Webdesign-2014KomItCbeta

W3C, validering, <FORM> og grafik med Python og Visual, Gkb 08:52, 23 October 2014 (CEST)[edit]

Vi startede med et plenummøde hvor vi diskuterede de forskellige versioner af HTML og World Wide Web konsortiets funktion i forbindelse med udvikling og "standardisering" af HTML og CSS.

Dernæst testede vi nogle eksisterende websider med validator.w3c.org. Resultatet er her.

--indsæt en tabel her---

På baggrund af disse nedslående resultater perspektiverede vi lidt og ...

Vi diskuterede hvad vi skulle lege med i resten af modulet. Vi valgte at de skulle være interaktionselementer med FORM elementet i HTML eller grafik med Python og modulet Visual.

<FORM>[edit]

Grafik med Python og modulet Visual[edit]

visual.sphere(pos=(2, 0, 0), color=(255,0,0))

  • 2014-09-29: Så er det tid til en aflevering!

Du har fremstillet en prototype. Du har set, hvordan man oploader. Nu skal du gøre din prototype klar og derefter oploade den til vores server. På lectio lægger du en .txt-fil med navn og link til startsiden. - Husk at der skal oprettes en mappe, der hedder "html", hvor dine sider ligger og at startsiden skal hedde "index.html"

Der var en del af jer, der følte sig lidt bagud. For jer laver vi en lille opsamlingsseance, hvor vi sikrer, at alle lykkes med det.

For dem, der har brug for det er her en skabelon, som kan inspirere: StudieWeb Skabelon

  • 2014-09-26: Opload!

I dag skal du prøve at oploade en html-fil til vores server:

  1. Du får brug for en "klient", der kan flytte filer over internettet. det kan fx. være WinSCP (kun windows) eller FileZilla (både Windows og MacOS). Se Guide: Upload af fil
  2. Når du er logget på, opretter du en mappe på serveren, der hedder "html" (små bogstaver)
  3. I den mappe lægger du en html-fil (dit forslag til en startside for dit StudieWeb), der hedder "index.html" (små bogstaver hele vejen)
  4. Gå ind på forsiden af rtgkom.dk og naviger ind til dit StudieWeb (klik på "Beta" under "2014"-kolonnen under "StudieWebs" og klik derefter på dit navn på listen)
  5. Er siden oppe?


  • 2014-09-22: Tilbage til webdesign!
  1. Vi skal i dag finde tilbage til arbejdet med at få StudieWeb i luften:
  2. I sætter jer i de nye NetWerksgrupper og repeterer i fællesskab kravene til StudieWeb.
  3. Find skitserne frem (nogle har måske allerede en prototype på skærmen) og evaluer dem
  4. I hjælpes ad i grupperne om at fremstille en prototype ved hjælp af html - evt. også css


  • 2014-09-12: Layoutworkshop!

Dagens modul er et mindre afbræk fra arbejdet med webdesignet. I skal med henblik på den kommende uges Studieområde-forløb øve præsentationsteknik på planche/poster. Vi gør således:

  1. Oplæg om det mest basale grafiske principper - slides
  2. Intro til InkScape
  3. Hands on: med materialet nedenfor skal du sammen med din makker forsøge at skabe et layout, der egner sig til en poster, der præsenterer RTGs innovationscamp 2014
  4. Kort gennemgang

Til øvelsen bruges dette tekstmateriale sammen med billedmateriale man vælger fra http://rtgkom.dk/~innovationcamp14/


  • 2014-09-08: Der skal idag udarbejdes skitser til StudieWeb. Der skal gives bud på et informationsdesign og et visuelt design.


<html>
<img src="http://rtgkom.dk/~jan/billeder/designmodel.png" width="360px">

De tre designaspekter i en simpel model
<img src="http://rtgkom.dk/~jan/billeder/sitemap.png" width="300px">

Eksempel på et informationsdesign skitseret i et sitemap
</html>

Når du arbejder med webdesign - og i det hele taget design til computerbaseret kommunikation - er der som udgangspunkt 3 grundlæggende aspekter, du skal forholde dig til:

  1. informationsdesign (Hvilke informationer skal på og hvordan skal de formateres og fordeles på sitet?)
  2. visuelt design (hvordan skal det løses grafisk - billeder, layout, typografi, farve?)
  3. interaktionsdesign (hvad sker der på skærmen, når brugeren gør hvad?)

Du bliver i oplægget bedt om som det første at lave et informationsdesign. Du skal med andre ord finde frem til, hvilke informationer, der skal være hvor på sitet samt hvordan de er associeret. Til det formål skal du på papir skitsere et eller flere forslag i form af sitemaps (se illustration). Tag udgangspunkt i de krav til indhold, der er stillet til dit StudieWeb - de tjener som det indledende brief til dit design.

Det visuelle design arbejder du dig frem til ved hjælp af "roughs"


  • 2014-09-05: I er efterhånden ved at være fortrolige med det helt grundlæggende HTML og skal til at anvende den nye kunnen/viden til at designe, kode og publicere jeres eget lille websted. Det er jeres "StudieWeb", der kommer til at fungere som jeres online portfolio her i faget (Kommunikation/IT). Ovenfor finder man link til oplægget. For nogen vil det være en god idé at fortsætte lidt i "sandkassen" og få nogle flere tags med og så evt. få suppleret med CSS

Et godt sted at lære online (udover dem, I allerede er blevet præsenteret for) er http://www.codecademy.com/ - prøv det lige (via links nederst kan man komme ind uden at oprette profil)

  • 2014-09-04: Vi har i dag været en tur i "sandkassen" og eksperimenteret med HTML, og de fleste kan nu finde ud af at rode med farve og typografi, lave links og sætte bllleder ind. Der er dog stadig en del begynderudfordringer rundt omkring.

Et par af jer sloges noget med at få installeret [brackets.io Brackets] (en editor) på windows. Problemet var nok, at man forsøgte sig med .deb og ikke .msi filen.

  • 2014-09-01: Når vi har fået evalueret GirafVideo færdigt (se øverste note i "GirafVideo"), Starter vi det nye forløb op. Her skal vi igang med at kode til websider.
  1. Det første, du skal finde ud af, er at finde dig en editor at kode i. Vælg mellem jEdit (Mac/Win/Lin), Komodo Edit (Mac(Win/Lin) eller Sublime Text (Mac/Win/Lin). De er alle frie/gratis at downloade, installere og benytte. Det kan også være notepad++ (Win), Bluefish (Linux) e.l. skriveværktøj, der egner sig til kodning (det gør wordpad, notesblok, textedit og lignende standardeditorer ikke)
  2. Når du har en editor oppe at køre skriver du:


<source lang="html4strict"> <!doctype html> <html lang="da"> <head> <meta charset="utf-8"> <title>Hvad hedder din side?</title> </head> <body>

Hvad skal der være på siden?

</body> </html>

</source>

  1. Gem filen som "index.html" i en mappe, du opretter til formålet
  2. Åbn filen fra en browser (brug ctr+O) og se hvad der sker.
  3. Gå tilbage til din editor og foretag en redigering af filen, gem den (fx. ctr+S) og gå tilbage til browseren, som du opdaterer (ctr+R eller F5) for at se ændringerne.
  4. Herfra kan du udforske- og eksperimentere med HTML. Besøg tutorials på http://w3schools.com og/eller hos Dave Ragett på http://www.w3.org/MarkUp/Guide/

GirafVideo[edit]

Oplæg: Workshop-GirafVideo-2014KomItCbeta

  • 2014-09-01: Så fik I afleveret jeres første opgave -tillykke. Vi er dog ikke helt igennem, før vi har evalueret, og det foregår således:
    • Sæt jer i de nye makkerskabsgrupper og vælg en referent
    • Vis videoerne (kun hvis man vil) på skift og forklar - med udgangspunkt i dokumentationen - hvordan man har løst opgaven - herunder teknik under optagelse og redigering samt anvendte virkemidler (lyd, lys, perspektiv, beskæring, komposition o.s.v.) -begrund!
    • Tjek oplægget og vurdér hvorvidt man har levet op til kravene til produkt og dokumentation.
    • Giv en feedback med fokus på det, der lykkedes, men find også - i fællesskab - frem til mindst 2 gode råd til, hvordan arbejdet kan bliver endnu bedre næste gang.
    • giv et kortfattet referat i plenum (=hvor klassen er samlet)


  • 2014-08-29: Så er der DEADLINE!!! I skal aflevere jeres første ting i Kom/IT i dag.
    • Der skal afleveres gruppevis på lectio
    • Opgaven hedder der "GirafVideo"!! (og ikke "intro-video" - den har en fejl og skal fjernes - undskyld)
    • Videoerne skal være oploadet på Youtube (hver især indstiller selv om den skal være privat eller offentlig)
    • Jeres (fælles) dokumentation skal overholde kravene i oplægget og har en forside der der indeholder:
      • Titel på projekt
      • Navn/klasse for dem der afleverer
      • Links til videoerne på YouTube
    • .pdf foretrækkes


  • 2014-08-25: I dag vil være en god dag at få optagelser i kassen (hvis de da ikke allerede er der). Det gøres bedst, hvis man på forhånd har lavet et godt storyboard at arbejde ud fra. Du kan få nogle gode tips til, hvordan et storyboard kan laves ved f. eks. at kigge her

Når I optager (og efterfølgende redigerer) skal I huske at bruge nogle af de metoder, I har været præsenteret for undervejs i arbejdet - primært ved at besøge de links, der har ligget til jer, men også gerne kilder, I selv har fundet og opsøgt.

Dokumentér undervejs d.v.s. notér løbende hvad I gør og hvorfor, gem screenshots, storyboards o.s.v. og sørg for at få det samlet og delt i gruppen (i oplægget står der mere præcist, hvad dokumentationen skal indeholde).

På fredag er der deadline for denne øvelse og her skal I aflevere jeres produkter samt dokumentation

Der er regler for hvad man må og ikke må offentliggøre af "personlige data" på nettet (og andre steder). Et portræt betragtes normalt som "personlige data". Det har betydning for os, der skal lægge portrætvideoer på nettet se mere på: http://www.datatilsynet.dk/borger/internettet/billeder-paa-internettet/

Desuden skal I som bekendt overholde "lov om ophavsret". Den forklares i grove træk her: http://www.ophavsret.dk/baggrundsviden.php?rapport=8


  • 2014-08-18: I er nu kommet igang med det første forløb og har de første idéer på bordet. Fokus idag vil blive:
  1. "Dokumentation" ...hvad er det lige, det er? …og hvordan gør man?
  2. Virkemidler på film …hvad hedder det? …hvordan gøres det? ….og hvor skal jeg bruge det?
  3. Teknik lov og etik ved optagelse og publicering …Youtube, ophavsret m.m.
  • 2014-08-15: Første forløb handler om at kommunikere med video. Oplægget ser du via link øverst

Introduktion[edit]

  • 2014-08-15: Velkommen i MediaLab, 1. beta!

I vores første modul skal vi tale om faget og hvordan vi arbejder i MediaLab. Målet er, at du bliver klar på, hvad faget indebærer og hvilke rammer, vi arbejder under her.Vi skal også igang med det første forløb ("GirafVideo", som du finder oplæg til nedenfor). Men først:

  1. Kommunikation/IT …hvad er det lige, det er? Undervisningsministeriets krav finder man i fagbilaget
  2. Hvad kommer vi til at lave. Du finder studieplanen på lectio her
  3. Husregler! …dem skal man kunne (i hvert fald de vigtigste). Kig på Hvad er MediaLab? og særligt på MediaLab: Introduktion