Author: Per Thykjaer Jensen

  • Det Flippede Klasseværelse

    Det Flippede Klasseværelse

    "The Flipped Classroom" og Deweys klassiker "How We Think".
    “The Flipped Classroom” og Deweys klassiker “How We Think”.

    Jonathan Bergmann og Aaron Sams har udviklet modellen the flipped classroom, der præsenteres i bogen af samme navn: “Flip Your Classroom – Reach Every Student in Every Class Every Day” (FYC).

    Kort fortalt går modellen ud på at underviseren optager screencasts af sin undervisning. Eleverne skal lære at se videoer uden distraktorer, som Facebook og andre overspringsmuligheder.

    “In the flipped classroom, students aquire content on their own time, watching recorded lectures as homework. Then, in stead of listening to lectures, students spend class time completing assignments …” (FYC bagsidetekst).

    Bergmann & Sams præsenterer hele forløb. En typisk flip lektion ser sådan ud:

    Atomic 10
    Objective: Be able to compare the sizes atoms and ions.
    Reference: Video 10; Text: 13.3; Worksheet: Atomic Theory 10. (FYC: 58)

    Her ser vi ind i Bermann og Sams pædagogiske maskinrum. Undervisningen opbygges af en treenighed, som består af: video, tekst og selvstændig refleksion. Videoen er studentens lektie.

    Bergmann & Sams forudsætter et hjemmearbejde inden undervisningen. Denne forudsætning kan diskuteres.

    Video på nettet
    I et typisk klasseværelse foregår undervisningen ved at en lærer introducerer et emne. Studenten arbejder videre med stoffet og tilegner sig materien ved at afprøve principperne.

    Den bærende ide i det flippede klasseværelse er at der optages en video, som lægges på nettet. Studenten kan herefter se videoen hvor hun vil. Og hun kan se den flere gange om nødvendigt.

    Bergmann & Sams taler ikke for en video, hvor man ser hele klasseværelset. De foretrækker screencasts, hvor studenten hører underviserens stemme og ser dét som foregår på skærmen eller projektoren.

    Det er uklart om disse screencasts foreberedes før undervisningen, eller om undervisningen optages, som den nu engang er.  Måske er der tale om en kombination.
    Screencast med Linux
    Bergmann & Sams forholder sig ikke til software. Den professionelle underviser anvender naturligvis med open source og Linux.

    I de fleste linux-distributioners repositories kan man finde programmer, som:

    • Desktop recorder – optager et såkaldt screencast, dvs. det som sker på computerens skærm sammen med underviserens stemme.
    • OpenShot – videoredigering.

    Tekst
    Så længe skriftsproget har eksisteret har man sikkert anvendt skrevne materialer i undervisningssammenhæng. I antikken læste man bøger ved at læse dem højt. Stoffet blev memoret ved hjælp af mnemoteknik.

    Når man læser Platons tekster højt, så hører man i virkeligheden Platons tale. Antikkens brug af teksterne ligner på denne måde det flippede klasseværelse.

    Opgavearket
    Ideen med opgavearket er, at man kan udprøve forløbets faser efter hver undervisningsgang.

    Opgavearket kunne også ligge online, og studenternes svar kunne gemmes i en database; men det er min tilføjelse. Bergmann & Sams’ fokus liggger på videoen.

    Bergmann og Sams anvender opgavearket som en kontrolinstans. Hvis studenterne kan besvare spørgsmålene korrekt, så har de lært deres stof. Og så er de klar til den nationale test, hvor man gerne vil score højt.

    Sådan underviser man måske i skolerne; men på videregående uddannelser virker denne pædagogik en anelse mekanisk. Det betyder ikke, at vi helt skal forkaste opgavearket.

    Undervisning på videregående niveau
    På videregående niveauer skal opgavearket lede til personlig refleksion over emnet. Bergmann & Sams kan med fordel kombineres med John Deweys klassiker “How We Think” (1909):

    “Genuine freedom, in short, is intellectual; it rests in the trained power of thought, in ability to ‘turn things over,’ to judge whether the amount and kind of evidence requisite for decision is at hand, and if not, to tell where and how to seek such evidence” (Dewey 1909: 66 pp.)

    Dewey hævder, at den som lever uden at reflektere, er en slave af de ydre omstændigheder. Formålet med videregående undervisning er at udvikle evnen til at tænke selvstændigt.

    Formålet med opgaver bør ikke være kontrol af tilegnelsen af et emne; men derimod at give studenten mulighed for at reflektere over et emne.

    Det er tydeligt, at Bergmann & Sams’ pædagogik har rødder i en systematisk naturvidenskabelig tradition. Det flippede klasseværelse skriver sig ind i amerikanske pædagogiske traditioner.

    Elementer fra det flippede klasseværelse kan anvendes på videregående niveau. At gøre screencasts tilgængelige online er en god ide; men hvorfor ikke tage skridtet fuldt ud?

    Internettet som platform for undervisning
    Bergmann & Sams fokuserer på treheden videoinstruks, tekst og opgaveark. På world wide web er blogs en oplagt platform for det flippede klasseværelse. I den sammenhæng er WordPress ikke helt tosset. Bloggen åbner for:

    • Tekst
    • Video
    • Opgaver
    • Hyperlinks

    Multimusen.dk
    I en eller anden forstand har Multimusen været et flippet klasseværelse siden begyndelsen i 2003. Mit fokus ligger ikke på screencasts; men derimod på tekster, andres video og hyperlinks. Måske skulle jeg overveje screencasts i undervisningen …

  • Images in Child Themes / Themes

    How to display images in a theme or childtheme in WordPress.

    On Linux and perhaps some Mac systems you may have to change the owner of the folder to daemon:daemon and set chmod to 777 during development.

    When you launch the site online the file permissions must be more strict. Make sure that:

    • All directories should be 755 or 750.
    • All files should be 644 or 640. Exception: wp-config.php should be 440 or 400 to prevent other users on the server from reading it.

    Sometimes the images will not display because of user rights. On Linux and perhaps Mac you may have to set the owner to daemon and the usergroup to daemon:

    • # sudo chown -R daemon:daemon yourWordPressFolder/
  • Know WordPress

    1. Create some posts. Just some text that comes to your mind.
    2. Add an image to the post.
    3. Why not share a video from YouTube.
      Tip: just paste the share link into your post. Save and see …
    4. Create a page. Adorn with videos and images you fancy.
    5. Add your page to the menu.
    6. Go to the frontend. Try out your menu.
    7. Write a post where you explain the difference between a PAGE and a POST. The intended target group is a teenager who sees WordPress for the first time.
    8. How can you add a POST to your menu?
    9. Try out the themes.
      1. Find alternative themes online.
      2. Install them.
      3. Choose one that you fancy.
    10. Upload a screendump (or screendumps) of your work to fronter. That’s the mandatory assignment for today.
  • How to write about code

    In most projects at the Multimedia Communication and Design programme you will be asked to write an academic report following the academic standards from Harward.

    Since interaction and code has a weight of some 25% at the first and second semester and around 30% at the third semester it is natural to expect a similar weight in a report. So if you’re supposed to write say 15 pages then roughly a quarter of the pages would be ok.

    Strategy I: The Silo
    Now there are certain strategies you can follow. Old school reports tended to have divisions for each subject. So the students would write something for the business, communication, design and interaction teachers.

    Doing so is not bad at all. But the report will look a bit like four silos. And if you divide the stuff there is a tendency to focus only on the subject at hand.

    Then you may forget, at one subject is closely linked to another subject. Ideas from design will affect the code – and vice versa.

    Strategy II: The Cross-subject Report
    Another strategy is to see how the subjects are connected. Perhaps your communication leads to a persona.  She’s 25 years old and just loves webpages with pink animations of running horses.

    In that case you have ideas for the design. There will be horses. And the color pink will play an important role in your design. One way or another you will have to animate the horses.

    This again leads to the code that you have to write. Perhaps you’ll use the Jquery plug-in Spritely.

    So you draw a spritesheet in Photoshop. Yep, that’s design. And then you implement some animation code on the website. That’s interaction. Perhaps you made a sketch too. And so you have something, that could turn into interesting pages in the report. Here’s the code:

    $('#pinkHorses').sprite({fps: 12, no_of_frames: 7});

    You may imagine the pink horses and so in your mind …

    In one illustration you could have your sketch, the code needed and the result in a browser. And here you cover more than one subject in an interesting way.

    Don’t tell it – show it!
    A sound creative writing principle is “don’t tell – show”. Let your report demonstrate how you developed your idea. And how you implemented the code in the end.

    Perhaps the censor does not know anything about code. So you have to explain what your code does. It’s a bit like expaining the rules of a game to a younger sister or brother.

    In the codesample above you could explain, that:

    • The sprint was made on a sunny tuesday in march.
    • Tell that you have importet the script pinkHorses.js.
    • $(‘#pinkHorses’) is Jquery. It will select the tag with the id pinkHorses.
    • In the CSS you have styled the tag, so that you only see one of the horses in the stylesheet.
    • Basicly the plugin will move the background with 12 frames per second. The result is the illusion of moving pink horses.
    • You could discuss whether 12 fps is satisfying or not.
    • You could countinue to animation principles from the Disney studios from “Steam Boat Willie” and on.
    • And how about the sounds of the running horses … and the cute Jquery controlling the sounds.
    • By thine own ingenium invent more …

    Now you have a cross-subject line from business, communication and design to an interaction code sample.

     Third party code
    Jquery and a Jquery plug-in is third party code. Since you did not invent either Jquery or the Spritely plug-in you have to give the sources in your report.

    In the bread text of your report you may give the url to Spritely in a footnote. Do it like this:

    http://spritely.net/documentation/ (visited 16.3. 2015)

    At the end of the report you’ll have a list of sources. Here you must write all thirdparty code used. If possible sorted by author – or at least by the name of the code library.

    Harward Academic Standards
    Here is the link to the academic standards that we use at the Aarhus Business Academy. Use them because we expect you to do so.

    You link to a website like this:

    NHS Evidence, 2003. National Library of Guidelines. [online] Available at: <http://www.library.nhs.uk/guidelinesFinder> [Accessed 10 October 2009].

    So how would you write, that Jquery and Spritely was used in your academic report?

    Remember that a PDF file can handle hyperlinks. So use links in your report – and link to your product on the frontpage too.

    Conclusion
    When you write about code you have to demonstrate your powers as a coder. Don’t explain what HTML and CSS is. It’s far better to explain why your markup looks as it does.

    Perhaps you wrote some cool class in PHP, that can generate the HTML for the user. Or functions you can reuse for other animations. How are these classes and functions connected to your overall design ideas, why do the look the way they do … and could you have acheived the same thing in a better way?

    To be honest your teacher and censor love discussions and usertests. Well, this may be off topic. But even the coolest code is worth nothing if your user cannot use your product.

    To sum up:

    • Show how your code works.
    • Try to demonstrate the path from the rough sketch to the finished code.
    • Give credits to the authors of ANY third party plugins.
    • Use the Harward System.
  • Adjunktplanens dokumentationskrav

    Adjunktplanen er et omfattende dokument. Et sted listes krav til dokumentation. Udgangspunktet er at adjunkten skal udstyres med:

    • Pædagogiske kompetencer
      • Viden
      • Færdigheder
      • Kompetencer
    • Faglige kompetencer
      • Viden
      • Færdigheder
      • Kompetencer
    • Relationskompetencer
      • Viden
      • Færdigheder
      • Kompetencer

    Det ser umiddelbart fornuftigt ud; men hvis alle underpinde til underpindene skal skrives bliver billedet ekstremt kompliceret.

    Her er en lille oversigt:

    Viden, færdigheder og kompetencer.
    Viden, færdigheder og kompetencer.

    Hele moletjavsen skal naturligvis dokumenteres. Og det er her problemerne opstår.

    Billedet bliver hurtigt uklart, fordi kravene til dokumentation følges af en lang række underpinde til underpinde. Man fornemmer, at forfatterne ville ha hver deres fingeraftryk med – uden at tænke over, at nogen faktisk skal skrive det her.

    Jeg tør ikke tænke på, hvordan en database ville se ud, hvis det her var et normaliseringsdiagram.

    Men heldigvis er det da sådan, at vi kommer rundt om langt de fleste pinde hver eneste dag på erhvervsakademierne. Og det bliver nok den skrivestrategi jeg vælger.

    Som fast tracker skal jeg ikke udarbejde en egentlig adjunktplan; men derimod dokumentere en tilsvarende viden.

    – Hvordan gør man så det?

    Den bedste metode er nok et bilag med overskrifter fra diagrammerne. Efterhånden som bilaget udfyldes opstår dokumentationen af sig selv, og strukturen kommer til automatisk til at ligne en adjunktplan. Noget i den dur vil jeg gøre.

  • API – what’s out there?

    The http://www.programmableweb.com/ is s vast collection of APIs for web developers. It is a fine place to start if you need some API service for your website or app.

  • The image registration point

    On at JavaScript canvas the registration point is the top left corner.

    So in hit detection you have to calculate the x-position, the image width and height. In layout you should be able to figure out where to plage the images, and illustrations.

    • Y = “up / down”
    • X = “left / right”

    ( I tend to forget this … )

    The image registration point.
    The image registration point.
  • The X and the Y axis

    The x and y axis.
    The x and the y axis.

     

    • On the HTML canvas the top left corner is x = 0 and y = 0.
    • The y-axis is “up & down”.
    • The x-axis is “left & right”.
  • Canvas Animation

    With a canvas you can animate your page. You can use images or draw geometric figures on the canvas. Here are some tutorials for canvas animation.

    Parallax Effect ( Multilayer animation )

    The following presentation is not strictly JavaScript but a sum up of a bunch of animation methods for the web:

  • APIs – more or less open data

    APIgee - adgang til mange APIer
    APIgee – adgang til mange APIer

    The Instagram API is just one among many APIs. Here is a list of interesting sites:

    These are just a few examples ….

    Developers can access the APIs for e.g. Instagram, Twitter, Facebook, Flickr etc. ( often a developer key, token or client_id is requiered ).

    A great portal to many APIs is APIgee – the interface is used by Instagram and many other providers of third part data.

    • Get Instagram image feeds – see my example on Instagram.
    • Method: find out how to format the URL, that will give you the wanted data.
    • As soon as your API sends a satisfying response, you can use the json parser.
    • The analysis of the json object will give you an idea of how to format strings for the AJAX script, such as:
      • data.data.link.url ( etc. )

    APIgee

    Via Instagram you can open APIgee. In the top left corner there is a drop down menu with access to many APIs. Choose one. Next to the name you’ll find a drop down menu for authentiation. Choose it. If you can work without authentiation so much the better. If not … well try to authentiate with your personal or professional user profile.

    The authentiation will give you a token. Add the token to the search string. Then you’re ready to format your jsonp searchstring urls, like this one:

    https://api.instagram.com/v1/users/261168726/followed-by?access_token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

    Workshop

    In groups choose an API from a json data provider. Experiment with the API, try to get interesting results – and when you have the data you want – style it with all the arts and tricks you know from CSS and jQuery.

    After lunch present your work in plenum.

    Upload your work as a group.

     

     

     

  • HTML Kickstart og PHP

    HTML Kickstart wireframe
    HTML Kickstart wireframe

    HTML Kickstart (http://99lime.com) giver et framework til hurtig udvikling af html. Siderne kan konverteres til .php sådan:

    • Gem din fil som minfil.php
    • Herefter kan kode genbruges ved includes.

    Det kan være en god ide at lave en skitse over din side, således at du får en ide om, hvad du vil udvikle.

    Husk at en række = 12 kolonner.

  • PHP: Cookie, Array, Loop

    A cookie is saved locally. Therefore different browsers will display whatever the user has saved. At least as long as the cookie is alive.
    A cookie is saved locally. Therefore different browsers will display whatever the user has saved. At least as long as the cookie is “alive”.

    The complete code to this article is available here.

    We use cookies in order to save information about or from the user input. If you compare my Firefox and Chrome browsers they will format the Microlite roleplaying web page according to random values, dates and saved input. Computergames use random values in stead of dice. First the character is saved in an associative array.

    // ASSOCIATIVE ARRAY
    // Define the character array.
    // “key” => value
    $character = array(
    “strength” => rand(3,18),
    “dexterity” => rand(3,18),
    “mind” => rand(3,18),
    “charisma” => rand(3,18),
    “class” => $class[rand(0, $classes)],
    “race” => $race[rand(0, $races)],
    “address” => “Shire”,
    “hitpoints” => rand(3,18),
    “level” => 1,
    );

    Above you see the method in action. rand(3,18) is an imitation of the role playing “3d6” (throw 3 sixsided dices). The random generator will give a value between 3 and 18. If you read the rules of Microlite 84 it’s easy to add more character properties.

    The cookie

    In this case we’ll save the character data in a cookie in the client browser. However a cookie can only store a string. PHP can convert an array to a string:

    $toCookie = serialize($character);

    Now we can save the data in a cookie via setcookie:

    setcookie(“character”, $toCookie, time()+ (60 * 60 * 60 * 24));

    After the cookie has been set PHP can use the data. That is next time the page is read. PHP can check whether the cookie exists by isset($var):

    if(isset( $_COOKIE[“character”] ) ) {

    $charUnSer = unserialize($_COOKIE[“character”]); 

    }

    This will convert the cookie string to an array.

    The Loop

    In order to echo or print the values of the array to a table:

    foreach ($charUnSer as $key => $value)
    {
    print ”
    <tr>
    <td> $key </td> <td> $value </td>
    </tr>
    “;
    }

    And this loop will then create the character table in the wbbage.

Enable Notifications OK No thanks

We use cookies - more information

Multimusen.dk will set a few cookies from Doubleclick, Google and the Social Media plugins they ay set some cookies. Some of my pages use APIs - such as YouTube, LinkedIn, Google Fonts, Google Maps, Mapbox, Spotify, Jetpack, Twitter, Facebook &c.. Such plugins may set the odd cookie.

Close