2016InfB24

From rtgkomArkiv
Jump to: navigation, search

Kommer ca 09:35

Contents

Donald Knuth og The Art of Computer Programming, Client-Server webapplikation - Gkb 12:59, 9 May 2017 (CEST)[edit]

Donald Knuth og The Art of Computer Programming[edit]

Efter lidt baggrundssnak om Tex og LaTex og bøgerne i serien The Art of Computer Programming, så så vi en kort ca. 5 min lang video hvor Donald Knuth forklarer hvor svært det kan være at vurder størrelsen på en bog ud fra størrelsen på manuskriptet, som i hans tilfælde var på ca. 3000 håndskrevne sider. Her er et link til videoen: https://www.youtube.com/watch?v=DLkwRbDwJuM

Client-Server webapplikation[edit]

I den sidst halvdel af modulet fortsætter vi at arbejde med at lave en Client-Server webapp med PHP og SQL, vha Apache og MySQL.

En lille Hello World Applikation[edit]

Vi skal lave en lille Hello World applikation som har et par inputfelter i en HTML form og en Submit knap som vi kan bruge til at sende indholdet i inputfelterne til en tabel som vi laver vha. MySQL. Der skal også være en anden knap i websiden som vi kan trykke på til at hente alt indhold fra tabellen og vise det i websiden.

Her kommer en nærmere definition af hvordan applikationen skal laves.

  1. Lav en ny database med MySQL. Giv den navnet udstyr.
  2. Lav en ny tabel i den. Giv den navnet maskiner.
  3. Lav følgende felter i denne tabel:
    1. id som skal være primary key og automatisk inkrementeres når der laves nye rækker i tabellen
    2. MaskinNr af typen INTEGER???
    3. Model af typen VARCHAR
    4. Type af typen VARCHAR
    5. Beskrivelse af type VARCHAR
    6. MACnr af typen VARCHAR
    7. IPnr af typen VARCHAR
  4. Lav en HTML fil med navnet udstyr.html.
  5. Lav et FORM element i den med navnet maskiner og sæt action attributen lig med gem_maskine.php.
  6. Lav INPUT elementer i dette FORM element for alle felterne i SQL tabellen maskiner, som beskrives ovenfor.
  7. Lav en SUBMIT button for formet med value attributen sat til Gem maskine i databasen.

Du kan måske lade dig inspirere af følgende to eksempler som er lånt fra https://developer.mozilla.org/en/docs/Web/HTML/Element/form

<!-- Simple form which will send a POST request -->
<form action="" method="post">
  <label for="POST-name">Name:</label>
  <input id="POST-name" type="text" name="name">
  <input type="submit" value="Save">
</form>

<!-- Form with fieldset, legend, and label -->
<form action="" method="post">
  <fieldset>
    <legend>Title</legend>
    <input type="radio" name="radio" id="radio">
    <label for="radio">Click me</label>
  </fieldset>
</form>

Intro tutorialen på php.net, Gkb 09:32, 24 April 2017 (CEST)[edit]

Her følger som inspiration en lidt udvidet version af Hello World eksemplet i tutorialen på php.net som vi bruger som den første introduktion til PHP. Den starter her: http://php.net/manual/en/tutorial.php. Selve Hello World eksemplet er her: http://php.net/manual/en/tutorial.firstpage.php.

Vi laver en fil med navnet hello_world_test.php som indeholder følgende kode.

<!DOCTYPE html>
<!-- Dette eksempel er baseret på koden fra "Example #1 Our first PHP script: hello.php" fra http://php.net/manual/en/tutorial.firstpage.php -->

<html>
    <head>
        <meta charset='utf-8'>
        <title>PHP Test</title>
    </head>
    <body>
        
        <?php echo '<p>Hello World</p>'; ?> 

        <!-- Example #1 Printing a variable (Array element) -->
        <!-- fra http://php.net/manual/en/tutorial.useful.php med små modifikationer. -->        
        <?php
            echo '<p>'.$_SERVER['HTTP_USER_AGENT'].'</p>';
        ?>
        
        
        <!-- Example #2 Example using control structures and functions -->
        <!-- fra http://php.net/manual/en/tutorial.useful.php med små modifikationer. -->        
        <?php
            if (strpos($_SERVER['HTTP_USER_AGENT'], 'MSIE') !== FALSE) {
                echo '<p>You are using Internet Explorer.</p>';
            }
            else {
                echo "<p>Du bruger ikke IE!</p>";
            }        
        ?>

    </body>
</html>

Webserver programmet Apache som er en del af XAMP sender de tre PHP script til PHP som eksekverer dem og sender resultatet til Apache som inkluderer dem i HTML koden som sendes til webbrowseren på brugerens maskine (user agent). Denne PHP fil, som består af blandning af HTML og PHP kode, resulterer i følgende HTML kode som sendes til webbrowseren.

<!DOCTYPE html>
<!-- Dette eksempel er baseret på koden fra "Example #1 Our first PHP script: hello.php" fra http://php.net/manual/en/tutorial.firstpage.php -->

<html>
    <head>
        <meta charset='utf-8'>
        <title>PHP Test</title>
    </head>
    <body>
        
        <p>Hello World</p> 

        <!-- Example #1 Printing a variable (Array element) -->
        <!-- fra http://php.net/manual/en/tutorial.useful.php med små modifikationer. -->        
        <p>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36</p>        
        
        <!-- Example #2 Example using control structures and functions -->
        <!-- fra http://php.net/manual/en/tutorial.useful.php med små modifikationer. -->        
        <p>Du bruger ikke IE!</p>
    </body>
</html>

Kildekoden for hele PHP filen, den resulterende HTML som browseren får fra Apache og den renderede webside kan ses her.

http://rtgkom.dk/~gkb/billeder/hello_world_med_php_800x500.png

PHP og SQL fortsat, Gkb 14:24, 31 March 2017 (CEST)[edit]

Vi fortsætter at øve os i PHP med PHP tutorialen fra Zetcode.com. Den er her http://zetcode.com/lang/php/. Gå i gennem alle afsnit til og med afsnittet om funktioner. Afprøv eksemplerne på din egen webserver som du før har installeret på din egen computer (XAMP) i det omfang som det giver mening for dig.

Efter det skal du have lidt overblik over hvad PHP er og hvem har lavet det, hvad det kan bruges til og så skal du forstå på et grundlæggende niveau hvoran følgende aspekter ved PHP virker og kan bruges i PHP scripts:

  • Variabler
  • Datatyper
  • Operatorer
  • Betinget udførelse
  • Løkker
  • Strenge
  • Funktioner

Regular expressions og objektorienteret programmering som introduceres i de tre sidste afsnit er selvfølgelig vigtige emner, men de behøves ikke i dette øvelsesforløb.

Her er et godt website hvor man kan lege med regular expressions: https://regex101.com. Tak Christian!

Arduino, 2017-02-13, mandag, modul 1, ˝˝˝˝[edit]

I dette modul skal vi se lidt nærmere på Arduino. Vi skal se en video om dens oprindelse og så skal vi øve os lidt i at koble den til en computer og lave lidt dataopsamling og visualisering på computerskærmen af disse data.

PHP og SQL, Gkb 08:38, 6 February 2017 (CET)[edit]

Vi begynder nu på et forløb hvor vi skal arbejde med PHP og SQL. Formålet er at lære mere om hvordan dynamiske websider kan laves med disse værktøjer/teknologier.

Som platform for vores arbejde bruger vi først XAMP på vores egen computere. Vi lærer lidt grundlæggende PHP og så lidt grundlæggende SQL og laver en meget simpel HelloWorld applikation som giver brugeren mulighed for at indtaste data i et form (HTML FORM, se her XXX) og lagre disse data på webserveren, samt hente tidligere lagrede data og få dem vist i webbrowseren.

Dernæst laver vi samme øvelse, men nu vha MediaLab's webserver. Det meste vil kunne genbruges, men der kan være detaljer som skal rettes til fordi de fleste har nok brugt Windows på sine egen maskiner, men vi har Ubuntu på vores webserver.

Instruktion:

  1. Installer XAMP, se https://www.apachefriends.org/index.html
  2. Brug først http://php.net/manual/en/tutorial.php til at få overblik over hvad PHP er og hvordan det kan bruges.
  3. Dernæst for mere systematisk gennemgang af funktionaliteten i PHP brug http://zetcode.com/lang/php/
  4. mere følger snart ...

Tabel til registrering af selvvalgt aktivitet,Lukaskg15 11:04, 18 January 2017 (CET)[edit]

Hold: IT B 2.4 - "Selvvalgt aktivitet" - registrering af elevernes valg af aktivitet.
Udfyld nedenstående skema...
Gruppenr. Gruppemedlemmernes navne Valgt platform (Web, iOS, Win, ...) Link til afleveringsmappen på StudieWebbet (selvvalgt_aktivitet) Beskrivelse af aktiviteten Titel Undertitel Tools Licens
0 Karl Bjarnason Python, på Ubuntu og MacOS http://www.rtgkom.dk/~gkb/selvvalgt_aktivitet/ Det jeg vil arbejde med er at lære mig at bruge regular expressions. Lidt Regular Expressions Et forsøg på at lære mig lidt hvordan regular expressions virker Python og re modulet  ?? GPL??
1 Tommy Kofoed, Jonas Gross og Benjamin Stephansen Python Vi vil tage skridtet en tand højere op hensyn til spil Spider spillet Lidt mere kompliceret end hvad vi har lavet. Python og blender.
2 Marcus Laursen. Python Jeg vil lave et program som vil generere en tilfældig Dungeon. Random Dungeon Generater Et Python program som skaber vægge og rum, som en Dungeon Python
3
4
5
6
7
8
9
10
11
12
13

2016-11-25, fredag, 4. modul i C3101, Gkb 10:07, 28 November 2016 (CET)[edit]

Arbjedet med dokumentation af udviklingsarbejdet fortsatte. I oplægget henvises der til forskellige måder at dokumentere udviklingen af et program på. Her er en liste med nogle muligheder.

Dokumentation af programmer[edit]

Når vi skal dokumenter udvikling af programmer, så kan vi bruge følgende liste over krav til dokumentationen som inspiration. For nogle programmer vil det være mindre meningsfuldt at bruge alle punkterne i listen, og for andre programmer vil der måske behøves tiltag som ikke nævnes i listen. Brug den som inspiration, vælg selv de punkter som du synes relevante for dit program:

  1. User stories, en eller flere, som beskriver brugernes forventninger til programmet. Her er nogle eksempler.
  2. Kerneproblemet (evt. flere problemer). Beskrivelse i prosa, på dansk!, af kerneproblemet, altså det eller de problemer som du skal løse for at komme i gang med programmeringen af den første prototype. (Dette krav er inspireret af "Bottom Up" tilgangen til programmering.)
  3. Beskrivelse af brugerfladen for programmet (tekst UI, eller GUI). Tegn en eller flere skitser!
  4. Use Case diagram, som visualiserer hvem skal bruge programmet og til hvad det skal bruges. Her kan f.eks. ArgoUML eller Dia bruges. Sparxsystems har en beskrivelse af opbygningen i de forskellige UML-diagrammer.
  5. Klassediagram, som viser de vigtigste klasser i programmet. Her kan f.eks. ArgoUML eller Dia bruges.
  6. Input. En beskrivelse af input (inddata) til programmet. Hvilke data, deres datatype og mening for brugeren.
  7. Operationer på inddata, altså en beskrivelse af de operationer som programmet skal udføre på inddata.
  8. Output. Beskrivelse af output (uddata) fra programmet. Hvilke data, deres datatype og mening for brugeren.
  9. Flowchart (rutediagram) som viser programmets logiske opbygning/struktur. (Flowcharting, flowchart, brug gerne programmet Dia og for Dia til Windows se her.
  10. Kildekoden for det færdige program, formateret med en non-proportional font, altså med et skriftsnit hvor alle bogstaver er lige brede. Det bevirker at indrykninger i kildekoden ikke forvanskes. Prøv også at bruge ikke større bogstaver end 12 punkter, evt. kun 10 punkter hvis der er mange lange linier i kildekoden som ellers ville deles på to linier (wrap to the next line).
  11. Skærmbilleder som viser/dokumenterer hvordan det færdige program bruges/virker. Husk at i Windows så kan det det valgte, eller aktive vindue, kopieres til klippebordet (clipboard) med tastkombinationen Alt+PrtScr. Det kan være praktisk for at undgå at skulle paste skærmbilledet ind i et billedredigeringsprogram alene for manuelt at klippe vinduet ud fra hele skærmbilledet.
  12. Et skærmbilled, eller flere, som viser udviklingsmiljøet, kildekoden, Python shell'en og evt. debuggeren i funktion med en kort kommentar/forklaring.
  13. Diskussion/beskrivelse af de sætninge (statements) og evt. funktioner i Python som du har brugt i dit program.
  14. Diskussion/beskrivelse af de eksterne funktionsbiblioteker (Python moduler) du evt. har brugt i dit program.

2016-10-14, mandag, 1. modul i C3111, Gkb 09:55, 14 November 2016 (CET)[edit]

Fortsat projektarbejde, mest med fokus på delafleveringen i matematik i morgen.

Gruppernes afleveringer på Fronter blev gennemgået. Flere grupper har uploadet dokumenter, godt!

Vi brugte de ca 10 sidste minutter af modulet til se på de IT-mæssige krav i projektoplægget og hvordan de kan opfyldes. Her kommer kravene:

  • analyse af målgruppe og design af brugergrænseflade til IT-produktet,
  • giv brugeren mulighed for at ændre på noget af det visuelle, f.eks. farve, tekster på akserne, intervaller, punkter og/eller grafen
  • implementering af to eller flere prototyper, samt dokumentation og test af IT-produktet.
  • publicering af IT-produktet på StudieWeb, beskrivelse af forløbet,
  • arbejdet planlægges, gennemføres, dokumenteres og eventuelt præsenteres ved hjælp af en systemudviklingsmetode (som f.eks. MedieLabs metode).

Som hjælp til at opfylde disse krav kan vi bruge følgende kilder i vores wiki:

2016-10-31, mandag, 3. modul i C3101, Gkb 12:51, 31 October 2016 (CET)[edit]

Vi startede modulet med en præsentation af hvordan vi kan bruge modulet Visual (kaldes ofte for Visual Python eller vPython) til at lave grafer.

Det viser sig nemlig at Visual har et submodul som hedder Graph. Her følger to eksempler. Det første er fra dokumentationen ...

Graf med Visual modulet[edit]

Her kommer et eksempel kopieret direkte fra dokumentationen for visual.graph på http://vpython.org/contents/docs/graph.html.

# Dette eksempel er kopieret fra http://vpython.org/contents/docs/graph.html
# Karl Bjarnason, 2016-10-31
from visual import * # must import visual or vis first
from visual.graph import *	# import graphing features 
f1 = gcurve(color=color.cyan)	# a graphics curve
for x in arange(0, 8.05, 0.1):	# x goes from 0 to 8
    f1.plot(pos=(x,5*cos(2*x)*exp(-0.2*x)))	# plot

Her kommer et eksempel (lidt forbedret af Christian) som viser hvordan man kan bruge visual.graph til at lave en graf på baggrund af data i to lister, xdata og ydata.

# Dette eksempel viser hvordan en graf kan laves med
# x-data og y-data i lister.
from visual import * # must import visual or vis first
from visual.graph import *	# import graphing features 
f1 = gcurve(color=color.cyan)	# a graphics curve
xdata = [1,2,3,4,5,6,7,8,9,10]
ydata = [1,3,3,2,5,6,7,8,9,10]
for i in range(len(xdata)):	
    f1.plot(pos=(xdata[i], ydata[i]))	# plot

Det tredje eksempel med vPython er lavet med http://www.glowscript.org/. Jeg har kopieret koden fra eksemplet ovenfor og kommenteret ud de to import sætninger fordi de ikke behøves her. Resultatet kan evt. ses ved at klikke på følgende link:

http://www.glowscript.org/#/user/gkarlbjarnason/folder/Private/program/graphtestkarlv01.py

[edit]

Jeg vil næste gang vise hvordan NetLogo kan bruges til at lave både GUI og en graf for x-y data. Indtil da kan I evt. selv lege med NetLogo, det ligger her http://ccl.northwestern.edu/netlogo/index.shtml.

NetLogo er lavet af Uri Wilensky, http://ccl.northwestern.edu/Uri.shtml, som arbejder på Northwestern University, http://www.northwestern.edu/, og udviklet på Center for Connected Learning and Computer-Based Modeling, https://ccl.northwestern.edu/.

Visualisering af x-y data, en øvelse[edit]

Du skal bruge et programmeringssprog til at lave en graf for x-y data. Du kan f.eks. bruge listerne xdata og ydata som jeg har brugt i eksemplet ovenfor. Du kan selv vælge hvilket programmeringssprog, moduler (funktionsbibliotek for Python kaldes for moduler) eller bibliotek (libraries) og IDE du bruger. Lav mindst et skærmbillede og en kort beskrivelse på ca. 10 linjer (100 ord) på dit StudieWeb.

2016-09-30, fredag, 3. modul i C3101, Gkb 03:47, 3 October 2016 (CEST)[edit]

I modulet arbejdede vi med website i relation til studieturen. En opgave med navnet Studieturswebsite er registreret i Lection med afleveringsdato 14. okt.

Vi diskuterede lidt at manuel kodning af websitet var sådan lidt at foretrække, men hvis nogen har lyst til at bruge et CMS system eller templates eller CSS filer som andre har lavet, -ja så er det i orden hvis man forstår og forklarer i relative detaljer hvordan disse meta-tools virker i jeres tilfælde.

Det ikke vigtigt at websitet er færdigt! Det skal bare være en første prototype.

2016-09-26, mandag, 3. modul i C3104, Gkb[edit]

Detta var vores første modul efter studieturen. Lige inden turen, altså i modulet onsdag d. 14. september, begyndte vi på en ny opgave som handler om forbedringer på vores StudieWebbs. Der er et oplæg med flere delopgaver og flere underpunkter til hver af dem. Opgaven kaldes Eftersyn på Studieweb og den beskrives i posten for modulet den 14. september. Her er et link direkte til rubriken hvor opgaven starter: http://rtgkom.dk/wiki/2016InfB24#Eftersyn_p.C3.A5_StudieWeb

2016-09-14, onsdag, 1. modul i C3101, Gkb 17:35, 13 September 2016 (CEST)[edit]

Ændrede planer! Jeg kan ikke komme i dag. Jeg har fået Jens Andersen og Jacob Hennecke til at vejlede jer i modulet. Det var meningen i dette modul at have nogle fremlæggelser vha. multimiepræsentationerne som I har lavet. Jeg vil gerne se disse fremlæggelser, så vi tager dem senere.

Vi bruger modulet i dag til generel eftersyn på jeres StudieWebs. Det handler både om indhold og udseende og måden jeres HTML er skrevet på.

Vi har siden skolestart arbejdet med en opgave som er fleksibel og åben for individuel tolkning. Nu har jeg lavet en opgave som er mere lukket. Den indeholder flere delopgaver for at imødegå at eleverne befinder sig forskellige steder i forhold til webdesign og programmering i almindelighed og selvfølgelig også i forhold til HTML og CSS, samt anvendelsen af vores webserver og de programmer som behøves til udviklingsarbejdet.

Det er således både naturligt og helt i orden at du kun laver en del, evt. mindre del af opgaven færdig i dette modul. Du kan senere fortsætte og gøre den færdig.

Arbejdet skal dokumenteres med korte notater i en HTML fil med navnet udviklingsarbejdet.html, som skal uploades og linkes til i jeres html mappe.

Eftersyn på StudieWeb[edit]

Først bruger vi en valideringsfunktion fra World Wide Web Consortium, altså fra dem som har lavet og kontrollerer udviklingen af HTML, CSS og mange andre web-teknologier, til at kontrollere om vores HTML kode er skrevet således at den lever op til rekomendationerne fra denne vigtige organisation. På grund af de tre W-er i navnet, så anvendes ofte forkortelserne W3 eller W3C når der tales om organisationen. Tim Berners-Lee opfandt HTML, dvs. han opfandt det World Wide Web som vi alle bruger hver dag, - og han er direktør for W3C. Derfor fortjener alt som han og hans organisation siger om HTML og CSS vores opmærksomhed!!! Her er et link til indholdsfortegnelsen for deres rekomendation for HTML5, http://www.w3.org/TR/html5/. Og her er et link til hele rekomendationen i et enkelt stort HTML dokument, http://www.w3.org/TR/html5/single-page.html. Download det gerne til din computer så du har det altid ved hånden!!!

Baggrundsinformation om W3C og Tim Berners-Lee samt validering af din HTML[edit]

Gør nu følgende:

  1. Se følgende TED Talk video (ca. 16 minutter lang) hvor Tim Berners-Lee forklarer blandt andet de omstændigheder som gjorde at han opfandt WWW. https://www.ted.com/talks/tim_berners_lee_on_the_next_web?language=en
  2. Test din index.html med World Wide Web konsortiets (W3C) validiteringsfunktion på http://validator.w3.org. Bemærk at der er tre måder du kan bruge deres webside på. Den måde du skal bruge er i den første tab som har teksten Validate by URI, men URI står for Uniform Resource Identifier som er en streng af tegn som bruges til at identificere en resource. Dette er et ret så generelt begreb som omfatter URL, Uniform Resource Locator, som kort sagt er en webadresse som f.eks. http://rtgkom.dk/~gkb/. Grunden til at du ikke skal bruge de to andre muligheder er at når din webside serveres af en webserver, så sender den lidt ekstra meta (over) information til clienten som altså i dette tilfælde er W3's valideringsprogram. Denne information bruges af valideringsprogrammet for at give dig bedre feedback på kodningen af din webside.
  3. Hvis der er fejl (errors) eller advarsler (warnings), så læs kommentarerne fra W3C og ret din HTML således at der ikke er nogen fejl eller advarsler.
  4. Udfør (gerne) samme procedure på alle de andre HTML filer på dit StudieWeb som du selv har kodet til at præsentere dine afleveringer og reflektioner om arbejdets gang. Du behøver f.eks. ikke rette fejl i de HTML filer som fremkom ved at eksportere din multimediepræsentation til HTML format. Men index.html filen i mappen it_komponent skal selvfølgelig være fejlfri.
  5. Skriv et kort notat på dit StudieWeb om dit arbejde med at rette din HTML ved hjælp af W3's validator funktion. Lav en webside som kun handler om hvordan du rent teknisk har lavet dit StudieWeb. Denne webside skal hedde udviklingsarbejdet.html og den skal ligge i din html mappe og du skal linke til den fra din oversigt over indholdet på dit StudieWeb.

Du må selvfølgelig også gerne ud over HTML 5 rekomendationen bruge nogen af de andre udmærkede kilder til information om HTML som findes på WWW. Der er mange! En af de bedre er nok https://developer.mozilla.org/en-US/docs/Web/HTML.

Lær dig lidt CSS[edit]

Hvis du endnu ikke har brugt CSS til at style dine websider, så kan du begynde at lære om CSS nu. Hvis du allerede har brugt CSS, så kan du hoppe over denne delopgave.

  1. Følg følgende tutorial, http://www.w3.org/Style/Examples/011/firstcss, som Bert Bos hos W3C har lavet, men han leder arbejdet med CSS hos W3C. På websiden http://www.w3.org/Style/CSS/, hvor W3C presenterer CSS, så henviser de til denne tutorial som den første kilde til os som vil lære CSS. Den kommer altså med gode anbefalinger fra dem som har lavet og fortsat videreudvikler CSS. Med at følge tutorialen mens at gøre det som beskrives i den. Altså skrive den HTML og CSS som omtales i eksemplerne i teksten og afprøve løbende i en browser.
  2. Skriv et kort notat på dit StudieWeb om dit arbejde med tutorialen. Gør det i filen udviklingsarbejdet.html.

Anvendelse og validering af CSS[edit]

Nu skal du anvende CSS til at style dit StudieWeb lidt og/eller afprøve om den CSS du eventuelt allerede har indført lever op til W3's rekomendationer.

  1. Start med din index.html fil. Tilføj lidt CSS, altså et lille style sheet og husk at uploade filen til webserveren. Hvis du allerede har brugt CSS til at style din index.html, så skal du ikke nødvendigvis ændre noget her, men du må selvfølgelig godt eksperimentere lidt.
  2. Test nu din CSS hos W3C. Brug deres CSS validator: https://jigsaw.w3.org/css-validator/. Husk at bruge URL'en til dit StudieWeb, og ikke kun indsætte selve HTML og CSS koden!!!
  3. Hvis der er fejl, så læs kommentarerne og prøv at bruge den vejledning som ligger i dem til at rette din CSS.
  4. Skriv et kort notat på dit StudieWeb om dit arbejde med at begynde at anvende CSS på dit StudieWeb. Gør det i filen udviklingsarbejdet.html.

Du må selvfølgelig også gerne bruge nogen af de andre udmærkede kilder til information om CSS som findes på WWW. Der er mange! F.eks. https://developer.mozilla.org/en-US/docs/Web/CSS og http://codeacademy.com (se her https://www.codecademy.com/learn/web) og http://w3schools.com. Bemærk at dette site, altså w3schools.com, ejes af et norskt privat firma og ikke samarbejder med W3C, trods at navnet ligner deres. De har mange gode eksempler men de er blevet kritiseret for at kvaliten svinger og så er der masser af reklamer som vi udsættes for.

Kontrol af at alle påkrævede typer (kategorier) af indholdselementer er med[edit]

Læs i gennem oplægget (fra sidste skoleår, http://www.rtgkom.dk/wiki/2015KomitC_StudieWeb_Alpha,_Beta,_Delta,_Gamma,_Lambda) til øvelsen om at lave StudieWebbet.

  1. Analyser om du har fået alle indholdeselementerne med i dit StudieWeb.
  2. Hvis der er indhold du mangler, så tilføj det til dit StudieWeb.
  3. Hvis du har indhold som ikke er forenligt med formålet med dit StudieWeb, så fjern det eller lav det om således at det er i orden.
  4. Lav et kort notat i filen udviklingsarbejdet.html når du har checket indhodet af.

Ekstraopgave[edit]

Du kan vælge ikke at arbejde med denne opgave.

  1. Hvor mange A4 sider, sådan cirka, fylder CSS level 3 specifikationerne i PDF format? Evt. kan følgende webside hjælpe med analysearbejdet (hvilke dokumenter indgår?) og estimationen af sideantallet: http://www.w3.org/TR/CSS/
  2. Hvis du vælger at forsøge at løse denne opgave, så skriv også her et kort notat i filen udviklingsarbejdet.html hvor du forklarer din fremgangsmåde og hvilket resultat, antal sider, du kom frem til.

2016-09-12, mandag, 2. modul i C3104, Gkb 01:05, 13 September 2016 (CEST)[edit]

Vi startede modulet med et kort, ca. 20 min, plenummøde om begreberne Peer Review og Open Publishing. Som eksempler på kilder i relation til Open Publishing (evt. snarere open access) diskuterede vi kort følgende to kilder som allerede var online i 2005 når jeg blev opmærksom på dem:

I fortsættelse af det lavede vi i tilfældigt valgte par en evaluering af hinandens aflevering, sådan lidt i peer review stil. Her var dog feedbak´en begrænset til kun to ting:

  1. Et aspekt som er godt lavet og
  2. et aspekt som kunne forbedres.

Vi lagde vægt på at det er vigtigt at formulere dette på en positiv måde.

Jeg havde forberedt peer review par-listen vha. websitet https://www.randomlists.com/team-generator. Den så sådan ud:

  • Group 1 Mads Hillebrand og Jonas
  • Group 2 Benjamin Bech og Erik
  • Group 3 Morten og Emil
  • Group 4 Joachim og Lucas
  • Group 5 Peter og Lukas
  • Group 6 Frederik og Anders
  • Group 7 Benjamin Severin og Mathias
  • Group 8 Nicholas og Christian
  • Group 9 Tobias og Andreas
  • Group 10 Martin og Mads Funch
  • Group 11 Thor og Tommy
  • Group 12 Michael og Marcus
  • Group 13 Mikkel og Alexander

Der krævedes ingen dokumentation for denne process, men det forventedes selvfølgelig at hver enkelt elev bliver opmærksom på mindst et aspekt ved afleveringen som kan forbedres og at eleven udførte denne forbedring.

I resten af modulet arbejdede først peer review grupperne og efter det udviklede det sig til et dynamisk samarbejde på tværs af grupperne med gode råd og vejledning.

Christian fattede interesse for det problem at dele et hold op i arbejdsgrupper, lidt inspireret af muligheden at lave det bedre end websitet som jeg brugte. Han lavede en god prototype til et Python program som løser problemet. I forbindelse med dette overvejede vi at tilføje en funktion af denne type til vores system på rtgkom.dk.

Ellers var der nogle som skulle få sendt et nyt password til vores webserver og andre arbejdede f.eks. med at placere en index.html fil i mappen it_komponent og med at præsentere arbejdet i forløbet i denne fil.

I næste modul har vi så nogle korte fremlæggelser (max ca. 5 minutter) hvor vi bruger den multimediepræsentation som er lavet i forløbet.

2016-09-05, mandag, 3. modul i C3104, Gkb 12:06, 5 September 2016 (CEST)[edit]

I dag skal vi have nogle præsentationer af arbejdet med øvelsen IT-komponent efter eget valg.

Her laver vi en liste over præsentationerne.

2016-08-29, mandag, 2. modul i C3104[edit]

Vi startede modulet med kort diskussion af hvem det var som laved World Wide Web og hvem det var som lavede den første wiki. Dernæst blev fokus sat på hvordan vi laver tabeller og links i MediaWiki, men det er netop denne software som vi bruger på vores webserver. Vi skal bruge denne viden for at registrere vores valg af IT-komponenter i wikien.

Registrer din IT-komponent i tabellen nederst i denne post.

Gå først til din egen artikel i vores wiki og øv dig i at lave links og tabeller. Du finder den via artiklen Special Pages, http://rtgkom.dk/wiki/Special:SpecialPages, eller så kan du gå direkte til den med http://rtgkom.dk/wiki/User:Gkb, hvor du selvfølgelig erstatter mit brugernavn med dit.

Gå til https://www.mediawiki.org/wiki/MediaWiki og søg på information om syntaxen for at lave hyperlinks og tabeller. Du kan også klikke her: https://www.mediawiki.org/wiki/Help:Links og her https://www.mediawiki.org/wiki/Help:Tables.

Brug denne information til at lave en tabel med kun en række for data og med de samme kolonner som i tabellen nedenfor. Udfyld felterne nu i ro og mag. Grunden til at vi gør dette på denne måde er både at vi skal teste og øve anvendelsen af din personlige webside i vores wiki og også at det kan give lidt forvirring hvis vi er mange som samtidig redigerer i samme artikel i wikien.

Her er de overskrifter som vi skal bruge for kolonerne i tabellen.

  • Dit navn
  • IT-komponentens navn
  • Screendump
  • Funktion
  • Ophavsmand/mænd
  • Årstal når IT-komponenten fremkom
  • Organisation
  • Licens
  • Pris
  • Primære kilder

Kommentarer til hvordan du skal skrive i felterne[edit]

  • IT-komponentens navn Angiv IT-komponentens fulde navn og eventuelt kortere navn, samt forkortelse hvis denne ofte anvendes nor IT-komponenten omtales.
  • Screendump Lav en/et screendump som viser en typisk situation hvor IT-komponenten er i brug, f.eks. din HelloWorld applikation. Giv filen navnet itkomponent_screendump.png. Lav en skaleret version af billedet således at det bliver 160 pixel bredt og 120 pixel højt. Giv dette billed navnet itkomponent_screendump_160x120.png. Gem begge billeder i mappen for opgaven på dit StudieWeb, altså i mappen it_komponent som vi har oprettet i din html mappe.

Lav nu et link i Screendump-feltet i tabellen, således at man kan klikke på det lille billed til at se det store.

  • Funktion Beskriv hvad denne IT-komponent normalt bruges til.
  • Ophavsmand/mænd Angiv, om muligt hvem eller hvilke personer har bidraget til frembringelsen af IT-komponenten.

Eksperimenter med syntax for tabeller og links[edit]

Her er et eksempel på en tabel med links. Koden er kopieret direkte fra et af eksemplerne i Mediawiki dokumentationen for tabeller. https://www.mediawiki.org/wiki/Help:Tables. Det er det første eksempel hvor de viser brugen af en klasse til at formatere tabellen. Ved at bruge class="wikitabel" i begyndelsen af tabellen, så renderes tabellen med borders.

Koden ser sådan ud.

{| class="wikitable"
|+Food complements
|-
|Orange
|Apple
|-
|Bread
|Pie
|-
|Butter
|Ice cream 
|}
Food complements
Orange Apple
Bread Pie
Butter Ice cream

Tabel til registrering af valg af IT-komponent[edit]

Her er et eksempel på hvordan du kan registrere din IT-komponent i tabellen.

Navn: IT-komponentens navn: Screendump: Funktion: Ophavsmand/mænd: Årstal når IT-komponenten fremkom: Organisation: Licens: Pris: Primære kilder:
Jakob Andkjær Poulsgærd Python http://rtgkom.dk/~jakobap15/styled/links/opgaver/itopgave/helloworld_kopi.png Funktionen med Python er at kode programmer og lave scripts. Python Software Foundation, men designet af Guido van Rossum 20 feb. 1991 Python Software Foundation GPL (General Public License) Open source https://www.python.org/about/ og https://en.wikipedia.org/wiki/Python_(programming_language)

Her kommer så tabellen for InfB24:

Navn: IT-komponentens navn: Screendump: Funktion: Ophavsmand/mænd: Årstal når IT-komponenten fremkom: Organisation: Licens: Pris: Primære kilder:
Alexander
Anders
Andreas
Benjamin Bech
Benjamin Severin
Christian
Emil
Erik
Frederik
Joachim
Jonas
Lucas
Lukas
Mads Funch
Mads Hillebrand
Marcus
Martin
Mathias
Michael
Mikkel
Morten
Nicholas
Peter
Thor
Tobias
Tommy

2016-08-26, fredag, 3. modul i C3101[edit]

Vi nærmer os nu afslutning af øvelsen om IT-komponent efter eget valg. Her er en vejledning om hvordan arbejdet skal afsluttes. Hver enkelt elev arbejder selvstændigt med afprøvning af IT-komponenten og dokumentation, men to eller flere må gerne vælge den samme IT-komponent og samarbejde og inspirere hinanden undervejs. Hello World applikationen skal være din egen, altså unik på en måde, og du skal selv lave de skærmdumps som du bruger i dokumentationen som består af to dele, nemlig en multimediepræsentation og din præsentation af arbejdet med øvelsen på dit StudieWeb.

Her kommer en nærmere vejledning, punkt for punkt, om hvad du skal lave:

  1. En multimediepræsentation hvor arbejdets forløb præsenteres. Omfanget af den skal nok være ca. 3 til max 10 normalskærme (hvad er det nu for en enhed?). Præsentationen kan laves med hvilket som helst værktøj, men den skal til sidst eksporteres til plain HTML for at kunne nydes af alle gæster på jeres StudieWebs. Bemærk at LaTeX, TexMaker, Apache OpenOffice Impress eller Libre Office Impress og også MS PowerPoint alle understøtter generering (export) af præsentationer i HTML format. Her er et link direkte til download af den variant af Libre Office som de kalder Fresh, men det er den som de opdaterer oftest med nye funktioner. Pass på at vælge den engelske version, fordi vi skal helst have brugerfladen på engelsk i alle programmer som vi bruger, -så bliver det lettere at få hjælp og hjælpe andre. PowerPoint fra Microsoft har før haft denne funktion, altså export til HTML, men den virker være forsvundet i de nyere versioner. Her er nogle indholdselementer som gerne skal være med i denne præsentation:
    1. Identifikationsinformation for præsentationen, altså titel, undertitel, dit og eventuelle medforfatteres navne, opgavens navn og evt. link til denne definition af opgaven, holdets og klassens navn, skolens navn, dato og andet relevant som I finder på.
    2. IT-komponentens baggrund. Skriv noget op hvordan den blev til. Var der særlige omstændigheder?
    3. Ophavsmænd og licens. Find hvilke personer og/eller organisation har lavet IT-komponenten og undersøg aktivt hvilken licens, eller evt. hvilke forskellige licenser, de har valgt at skal gælde for andres anvendelse af deres værk. Se gerne definitionen af begreberne værk og frembringelse i den danske lovgivning om ophavsret her https://www.retsinformation.dk/forms/r0710.aspx?id=164796 og http://www.it-retten.dk/bog/06/. Her kan du se lidt mere generel information om licenser for software: https://en.wikipedia.org/wiki/Software_license. Og her er mere information free software og licenser for free software: https://www.gnu.org/philosophy/free-sw.en.html
    4. Typisk anvendelse og evt. også betydning for udviklingen af IT generelt.
    5. Kilder som du har brugt, specielt hvor du har hentet IT-komponenten fra, og hvor du evt. har fundet information/manual/dokumentation/tutorials.
    6. Skærmbilleder med forklarende tekst som viser hvordan du lavede din Hello World applikation. Husk at vi målet med Hello World applikationer er kun at demonstrere for os selv og andre at værktøjet er installeret og konfigureret således at vi kan bruge det til at lave noget meget enkelt, som f.eks. at skrive teksten "Hello World!" til skærmen, hvis det altså er relevant for det pågældende værktøj. For nogle værktøjer vil det være noget andet som giver mening, f.eks. kunne en Hello World app med Sonic Pi være et program som genererer skalaen (?) C, D, E, F, G, A, H som lyd i computerens højtalere.
  2. Upload præsentationen til mappen mmpraes som jeg vil/har oprettet i mappen it_komponent som er lavet i jeres html mappe på jeres StudieWeb. Det er en god idé at sætte alle filerne som hører til præsentationen i et subdirectory.
  3. Laver en index.html fil til mappen hvor du præsenterer arbejdet med øvelsen og linker til HTML-præsentationens index fil.
  4. Uploader koden for Hello World applikationen. Og præsenterer den i index filen for øvelsen både direkte læselig, f.eks. vha. et PRE elementet, og også med et link til filen med kildekoden, således at vi let kan downloade den.
  5. Upload også gerne alle andre varianter af HelloWorld applikationer som du eventuelt har lavet og præsenter dem i index filen for opgaven i det omfang som du har lyst til og synes det vil gavne læserens forståelse af IT komponenten.

2016-08-22, mandag, 3. modul[edit]

Vi startede med et kort plenummøde hvor vi mindedes Seymour Papert som døde den 31. juli. Hans arbejde har i mange år været kilde til inspiration for os her i RTG MediaLab. Specielt hans idéer om anvendelse af programmering som værktøj til i en kreativ skabende process at fremme læring i almindelighed. Dette har vi aktivt brugt i fagene Informationsteknologi B, Kommunikation/It C og Programmering C, men det er selvfølgelig også muligt at bruge hans metoder og teori til at understøtte læring i andre faglige sammenhænge som f.eks. matematik og fysik. Han kaldte sine idéer om læring for konstruktionisme (constructionism).

Hans teori er også den konkrete baggrund for at vi startede med portfoliobaseret læring allerede i 1998 hvor vores elever begyndte at lave sine StudieWeb's hvor de præsenterer sine faglige reflektioner for hele verden og hvor de afleverer mange af sine opgaver.

Papert var professor i matematik på MIT i ca. 50 år. Han var tidligt tilknyttet MIT Computer Science and Artificial Intelligence Laboratory som Marvin Minsky og John McCarthy startede i 1959. Vi har i vores undervisning brugt flere værktøjer som er udviklet af Papert eller af hans elever og medarbejder på MIT. For eksempel programmeringssproget Logo og MIT App Inventor som er et udviklingsmiljø for Android applikationer.

Fra et danskt perspektiv er det særligt interessant vide at Papert var konsulent for Lego i forbindelse med udviklingen af Lego Mindstorms systemet og at det er navngivet efter hans bog Mindstorms hvor han argumenterer for at børn kan blive dygtige til at programmere og at det kan gøre det lettere for dem at lære alt muligt andet.

Jeg fortalte kort om programmeringssproget Logo som Papert lavede i ca. 1967 sammen med Cynthia Solomon, Daniel G. Bobrow, og Wally Feurzeig. Projektet var vistnok et af mange projekter som blev startet som en slags reaktion på Sovietunionens success med at sende en mand, Yuri Gagarin (1961), i kredsløb omkring Jorden. Idéen var at lave et programmeringssprog som mennesker, helst også børn, kunne bruge til at give instruktioner til computere på en let måde og således få bedre forståelse for matematiske og fysiske begreber.

Kort efter at de publicerade Logo (hvor kort, hvornår?) tilføjede de det som senere er blevet kaldt for Turtle Graphics. Det er kommandoer til at styre en robot som ligner en skildpadde. Skildpadden har en pen som den kan bruge til at tegne på papir som ligger på golvet. I begyndelsen var det altså en robot som kørte på golvet og blev kontrolleret via ledninger med kommandoer fra en computer, ofte af unge børn som Papert involverede i afprøvning af denne nye måde at lære på. Men hurtigt blev det muligt at styre en virtuel skildpadde på en computerskærm.

I RTG MediaLab er vores brug af både fysiske skildpadde-roboter (Thymio) og virtuelle skildpadder (Python Turtle modulet og NetLogo) i undervisningen et konkret eksempel på hvordan Paperts arbejde har haft betydning for os.

Vi sluttede plenummødet med at se en ca. 8 minutter lang video hvor Paperts idéer om læring forklares. Videoen viser også både de første fysiske skildpadder, samt den virtuelle variant i aktiv brug af unge børn som tydeligt viser med sit sprog at de har lært vigtige matematiske begreber af at lege med Logo og skildpadderne. Her er et link til videoen på Youtoub: https://www.youtube.com/watch?v=xMzojQFyMo0

Billeder fra videoen og af Turtle modulet og af NetLogo i aktion... indsæt her...

2016-08-12, fredag, 3. modul[edit]

Detta var vores første modul i faget. Vi startede med et plenummøde hvor vi diskuterede faget og undervisningen. Vi læste fagbilaget og diskuterede fagets indhold.

Vi aftalte at den første opgave skal handel om individuel opdagelse af udviklingsværktøjer eller IT komponenter som kan indgå som dele af IT systemer for enkelte personer, virksomheder, organisationer eller myndigheder. Med denne opgave opfylder vi delvis flere af målene i fagbilaget, specielt mål nr. seks, som lyder:

– vælge og bruge it-komponenter som værktøj til løsning af et problem med relation til elevens, uddannelsens, virksomheders og samfundets brug

Se nærmere beskrivelse af opgave nedenfor.

Fagbilaget fra HTX bekendtgørelssen[edit]

Vi læste lidt i bilaget og fokuserede på mål, kærnestof, tilrettelæggelse af undervisningen, supplerende stof og bedømmelseskriterier til eksamen.

Individuel afprøvning af en IT komponent[edit]

Vi aftalte at starte med en opgave hvor vi

  • søger efter, installerer og afprøver, f.eks. vha. en Hello World applikation, en IT-komponent som kan bruges som værktøj til løsning af et problem med relation til elevens, uddannelsens, virksomheders og samfundets brug af denne IT-komponent
  • dokumenterer forløbet på vores StudieWeb med et par skærmbilleder og lidt forklarende tekst og
  • registrere forløbet i holdets wikiartikel og forbereder en
  • præsentation eller en demonstration for klassen i plenum.

Nærmere forklaringer:

  1. Hvad mener vi med begrebet "IT-komponent"? Dette er et meget bredt begreb og her mener vi, lige som i fagbilaget, et hvilket som helst IT system som kan bruges til at løse problemer for individer, grupper, virksomheder, organisationer og samfundet mm.
  2. Hvad mener vi med udviklingsværktøj? Udviklingsværktøjet kan være et Integreret udviklingsmiljø (IDE, Integrated Development Environment) som f.eks. CodeBlocks, Eclipse, NetBeans, Eric IDE, NetLogo, Gambas, Visual Basic, Visual C# eller Visual C, eller Mono. Men gcc eller g++ i en terminal er også et godt eksempel på den type udviklingsværktøjer som vi tænker på.
  3. Udviklingsmiløet og IT komponenten skal være noget som vi ikke har arbejdet (ret meget) med før. Og så skal det være muligt for os at lave en demonstration af hvordan det virker på relativt kort tid.
  4. En Hello World application kan være en hvilken som helst for udvikleren (dig) enkel måde at anvende et system på, således at denne anvendelse demonstrerer for dig selv og andre at det faktisk er lykkedes dig at installere, konfigurere og anvende systemet til noget. For programmeringssprog kan det være nok at lave et program som skriver teksten "Hello World!" ud til skærmen. For andre systemer kan helt andre ting være mere naturlige, f.eks. for Blender kan Hello World applikationen evt. være at lave en morfing af en boks over i en kugle? Eller bare at farvelægge en boks.

Opgaven afleveres primært på dit StudieWeb, men der skal skrives lidt i holdets wikiartikel på rtgkom.dk og en link (i en tekstfil) skal afleveres på Lectio.

Yderligere inspirationsmateriale[edit]

Der er mange IT værktøjer som kan kvalificere sig som IT-komponenter. Her kommer et tavlebillede fra InfB26 i mandags (d. 15. august) hvor vi diskuterede flere forskellige systemer og jeg noterede deres navne eller forkortelserne for deres navne på tavlen. Du kan måske bruge denne "liste" som inspiration til egen opdagelsesrejser på nettet.

http://rtgkom.dk/~gkb/billeder/Tavlefoto_fra_uv_i_Infb26_med_mange_IT-kompnenter500x133.png

Tilføj selv gerne noget her, som du synes kan være af generel interesse for klassen i forbindelse med denne øvelse.