2015KomItCkappa

From rtgkomArkiv
Jump to: navigation, search


Webdesign[edit]

Oplæg: 2015KomItC_StudieWeb_Kappa

<html>

<a href='http://rtgkom.dk/students.php?gid=2187'>StudieWebs</a>

</html>

  • 2015-12-10: Når du via linket her: http://rtgkom.dk/students.php?gid=2187 klikker på dit navn skal du komme direkte ind på startsiden af dit StudieWeb. Gør man ikke det, er der en eller flere fejl, der skal rettes (måske mangler du at oploade?). Brug tiden i modulet her på at:
  1. rette fejl
  2. foretage tekniske forbedringer - f. eks. nedsætte load-tiden med lettere billedgrafik, validere koden på https://validator.w3.org og http://www.css-validator.org
  3. foretage grafiske forbedringer - f. eks. ved at bruge noget af det du har lært om grafisk design...
  4. foretage indholdsmæssige forbedringer - med refleksioner og supplementer til de opgaver, du har arbejdet med
  5. oprette en "sandkasse"-sektion, hvor du kan eksperimentere med webteknolgierne
  • 2015-11-26: Der ligger nu et password til dig på din email. Du kan derfor nu logge på vores webserver og oploade dine websider (se videoen nedenfor hvordan. Alle skal idag have logget på og tjekket, at de kan finde ud af det.
  • 2015-11-24: Alle er nu oprtettet som bruger på vores webserver og vil principielt kunne oploade filer til rtgkom.dk og dermed publicere sit webindhold (når man er blevet udstyret med et password). For at flytte filer op på vores server skal du benyttet en såkaldt ftp-klient. Her kan du bruge Filezilla (client), WinSCP (kun Windows) , Cyberduck e.l. der kan bruge "sftp" (en særlig protokol d.v.s. måde at sende filer på). Nedenfor ser du en kort intro til hvordan det foregår:

<html>

<iframe width="540" height="405" src="https://www.youtube.com/embed/ApRo8PzylAg" frameborder="0" allowfullscreen></iframe>

</html>

Der er desuden en (lidt mere detaljeret) guide her: Guide: Upload af fil med et program med grafisk brugerflade

  • 2015-11-03: Udover den tekniske dimension ved webudvikling (HTML, CSS o.s.v.) er der også - og ikke mindst - den designmæssige side. Her taler vi om 3 aspekter:
  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?)


<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>


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 (hvad hører sammen og hvad fører til hvad?). 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"

  • 2015-10-27: Sidste gang fik de fleste styr på, hvad HTML er for noget og hvordan man arbejder med det samt ikke mindst hvordan man gør, når man skal lære mere (for det skal I jo).

Idag kigger vi så på det, der hedder CSS, som skal supplere HTML-koden og som definerer den grafiske del af websiderne. Inden fyrafen har desuden taget hul på selve den opgave, projektet handler om: at designe en personlig online portfolio for faget.


  • 2015-10-20: Velkommen tilbage fra en forhåbentlig god ferie. Før ferien afsluttede vi "grafisk design"-forløbet. Du finder en feedback-note på lectio ud for din aflevering.

Nu - og de næste 6 moduler - skal så handle om webdesign. Målet er at du bliver fortrolig med webkodning og -publicering. Det skal ende med, at du har oprettet en online portfolio, hvor man har adgang til dine arbejder i faget. Oplægget har du her: 2015KomItC_StudieWeb_Kappa.

Det første, vi gør, er dog at gennemføre en lille øvelse: Øvelse-KomIT-C-html/css

Her er et udvalg af de værktøjer (editorer), du kan vælge at bruge: Notepad++ (kun Windows), Komodo Edit , Brackets, Sublime Text, jEdit, Aptana Studio og Bluefish

Thymio, programmering af robotten, - SO uge 46 Gkb 12:32, 9 November 2015 (CET)[edit]

Her er tre links til vigtig information om hvordan I kan bruge roboten:

Grafisk design[edit]

Oplæg: 2015KomItC Grafisk design


  • 2015-10-05: Der er i dag deadline på øvelsesforløbet i grafisk design. Du afleverer således:

På lectio lægger du

  1. produktet - d.v.s. den side, du har designet - i pdf-format
  2. dokumentationen - ligesom ved foregående øvelse (digitale billeder) en word- eller pdf-fil med dine noter, skitser og screenshots fra dit arbejde - http://rtgkom.dk/wiki/2015KomItC_Grafisk_design#Dokumentation_og_aflevering

Det er relativt nemt at gemme et scribus-dokument som .pdf. Der er simpelthen en knap i værktøjslinjen:

<html> <img src="http://rtgkom.dk/~jan/billeder/scribus-pdf.jpg" width="200" style="border: 1px solid #000;"> </html>

Du får godt nok en masse valgmuligheder i den dialog, der åbner, men du behøver kun (øverst oppe) at give filen et navn og en plads på din computer og klikke save/gem.

<html> <img src="http://rtgkom.dk/~jan/billeder/scribus-pdf-save.jpg" width="400" style="border: 1px solid #000;"> </html>


  • 2015-10-01: Efter et længere afbræk bl. a. p.g.a. studietur og SO-uge er vi på den igen og fortsætter øvelsen ud fra vejledningen ovenfor.

Tekstfilen i øvelsen udfordrede nogle ved ikke at vise specialtegnene (som f. eks. æ, ø og å) rigtigt, når man hentede den. Der er forskellige løsninger til det:

  1. brug "search+replace"-funktionen i scribus til at udskifte de problematiske tegn
  2. åben .txt-filen med din webbrowser (sker normalt blot ved at klikke på linken) og ændr browserens "text encoding/tegnkodning" under view/vis til utf-8


  • 2015-09-10: Vi afrunder forløbet, "digitale billeder" med en gennemgang. Herefter starter vi det nye forløb op, der skal køre over de næste 4 moduler. Oplægget gås igennem og kan ses ovenfor

Introduktion - Digitale billeder[edit]

Oplæg: 2015KomItC Digitale billeder

  • 2015-09-03: Så er vi fremme ved den første aflevering. Det foregår ved, at hver enkelt sørger for at lægge sin dokumentation (det vil sige den word-(eller lignende) fil med screenshots og noter til arbejdet med øvelserne) op på lectio som aflevering til "Digitale billeder". . Har man arbejdet sammen om dokumentationen er det helt ok, at det afleverede er ens, Kravene til dokumentationens indhold fremgår af oplægget.
  • 2015-08-27: Der er kommet mere til øvelsen siden sidst - det kigger vi lige på. Ellers arbejder I videre på øvelserne hvor I sørger for at dokumentere godt og grundigt undervejs - jeg kommer rundt og tjekker!
  • 2015-08-20: Vi er godt igang og fortsætter med øvelsesrækken med digitale billeder. Der er til det udarbejdet et oplæg, som du skal følge. Det finder du her: 2015KomItC Digitale billeder

Bemærk, at du bliver bedt op løbende at udarbejde en dokumentation. Senere på året skal du have lavet en online portfolio, hvor du præsenterer dit arbejde i faget. Derfor er det vigtigt, at du allerede nu sørger for gemme noter m.m. fra det du har lavet. En nem og smart måde at dokumentere denne type arbejde på er ved at bruge et tekstbehandlingsværktøj (word, openoffice e.l.) hvor du skriver noter og sætter screenshots ind undervejs i øvelsen. Nedenfor ser du hvordan det kan gøres (mac):


<html> <iframe width="560" height="315" src="https://www.youtube.com/embed/-arYt490Skc?rel=0" frameborder="0" allowfullscreen></iframe> </html>

Der findes flere snedige tastaturgenveje i Windows, macOS m.m. til at tage screenshots: de er samlet her: http://www.take-a-screenshot.org/


  • 2015-08-13: Velkommen i MediaLab, Kappa!

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, "Digitale billeder". 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.
  3. Husregler! …dem skal man kunne (i hvert fald de vigtigste). Kig på Hvad er MediaLab? og særligt på MediaLab: Introduktion

Herefter går vi i krig med "digitale billeder" og det første, der skal ske, er at du får downloadet og installeret GIMP. Det sker fra gimp.org. Bemærk, at Macbrugere har brug for også at have XQuartz kørende - hvis ikke du har den, finder du her: http://xquartz.macosforge.org/


Nedenfor er der to introduktionsvideoer dels til vektor- og pixelbaseret grafik og dels til GIMP. Dem kigger du igennem.

Hvis der er tid, kan du begynde at forsøge dig med at lave de ting, Christian viser i GIMP-videoen (den nederste).

Vi får på et senere tidspunkt brug for inkscape (det bliver brugt i den første video). Det kan du hente her: inkscape.org


<html>

<iframe width="560" height="315" src="https://www.youtube.com/embed/x1QMV6VrlGI" frameborder="0" allowfullscreen></iframe>

<iframe width="560" height="315" src="https://www.youtube.com/embed/yFQ1LHspBCo" frameborder="0" allowfullscreen></iframe>

</html>