Test4

Overvagning Kodeeksempel 1 Cookies - Bendtsen - http://iftek.dk/overvagning-kodeeksempel-1-cookies
JavaScript kan få browseren til at gemme en lille tekstfil på brugerens computer. - Udover indholdet/data, så skal der sættes en udløbstid, hvis den ikke skal slettes med det samme brugeren forlader sitet!

[[html]]

<p id="cookiefelt">Her skrives besøgsnummer</p>

<script>
function skrivCookie(navn,indhold,antalDage) {
var dato = new Date();
dato.setTime(dato.getTime() + (antalDage*24*60*60*1000));
document.cookie = navn + "=" + indhold + ";expires=" + dato.toGMTString();
}

function laesCookie(navn) {
var dele = document.cookie.split(';'); //Del cookie op
for(var i=0; i<dele.length; i++) { //Gå igennem hver del
while (dele[i].charAt(0)==' ') dele[i] = dele[i].substring(1);
if (dele[i].indexOf(navn) == 0) {
return dele[i].substring(navn.length+1, dele[i].length);
}
}
return "";
}

var cookieData = laesCookie("minCookie1");

if (cookieData == "") {
cookieData = 1;
} else {
cookieData = Number(cookieData) + 1;
}

skrivCookie("minCookie1", cookieData, 30);

cookiefelt.innerHTML = "DitBesøg nr. " + cookieData + " ";

</script>

[[/html]]

<p id="cookiefelt">Her skrives besøgsnummer</p>
 
<script>
function skrivCookie(navn,indhold,antalDage) {
    var dato = new Date();
    dato.setTime(dato.getTime() + (antalDage*24*60*60*1000));
    document.cookie = navn + "=" + indhold + ";expires=" + dato.toGMTString();
}
 
function laesCookie(navn) {
  var dele = document.cookie.split(';'); //Del cookie op  
  for(var i=0; i<dele.length; i++) {     //Gå igennem hver del
     while (dele[i].charAt(0)==' ') dele[i] = dele[i].substring(1);
     if (dele[i].indexOf(navn) == 0) {
        return dele[i].substring(navn.length+1, dele[i].length);
     }
  }
  return "";
}
 
var cookieData = laesCookie("minCookie1");
 
if (cookieData == "") {
    cookieData = 1;
} else {
    cookieData = Number(cookieData) + 1;
}
 
skrivCookie("minCookie1", cookieData, 30);
 
cookiefelt.innerHTML = "DitBesøg nr. " + cookieData + " "; 
 
</script>

Overvagning Kodeeksempel 5 Browser Fingerprint - Bendtsen - http://iftek.dk/overvagning-kodeeksempel-5-browser-fingerprint
Find og udvælg yderligere BRowser Informationer der kan bruges til at identificere Browser.
- Obs! husk at krydstjekke om det virker i alle browser. - Ingen information er også information, men det kan få script til at gå ned!

API
http://www.w3schools.com/jsref/obj_window.asp
http://www.w3schools.com/jsref/obj_navigator.asp
http://www.w3schools.com/jsref/obj_screen.asp


[[html]]

<div id="brugerdata"></div>

<script type="text/javascript">
brugerdata.innerHTML = "Skærmbredde: " + screen.width + "<br/>" +
"Skærmhøjdde: " + screen.height + "<br/>" +
"Vinduebredde: " + screen.availWidth + "<br/>" +
"Vinduehøjde: " + screen.availHeight + "<br/>" +
"Cookies tilladt? " + navigator.cookieEnabled + "<br/>" +
"Java tilladt? " + navigator.javaEnabled() + "<br/>" +
"Sprog: " + navigator.language + "<br/>" +
"Ekstra sprog: " + navigator.languages + "<br/>" +
"Platform: " + navigator.platform + "<br/>" +
"App name: " + navigator.appCodeName + "<br/>" +
"App codename: " + navigator.appCodeName + "<br/>" +
"Browser user agent: " + navigator.userAgent + "<br/>" +
"Browser version: " + navigator.appVersion + "<br/>" +
"CPU: " + navigator.oscpu + "<br/>" +
"Hardware - max antal tråde: " + navigator.hardwareConcurrency + "<br/>" +
"Antal plugins: " + navigator.plugins.length + "<br/>"

"Plugin nr 1: " + navigator.plugins[1].name + "<br/>" / crasher script i nogle broweser
Obs history go() smider bruger x baglæns men kan ikke hente/vise url

var dato = new Date();
var tidszone = dato.getTimezoneOffset();
tidszone = tidszone/60;
brugerdata.innerHTML = brugerdata.innerHTML + "Tidszone: " + tidszone + "<br/>"

var ipadresse;

$.get("http://ipinfo.io", function(response){
ipadresse = response.ip;
brugerdata.innerHTML = brugerdata.innerHTML + "IP: " + ipadresse + "<br/>";
}, "jsonp");

</script>

[[/html]]
Overvagning Kodeeksempel 4 Browser Fingerprint - Bendtsen - http://iftek.dk/overvagning-kodeeksempel-4-browser-fingerprint
Medsend informationer fra cookies
Send det aktuelle dokument med, så scriptet kan ligge på flere sider!
Udvid med besøgstid, scrolll… -> hvor læst/vigtigt er dokumentet

http://www.w3schools.com/jsref/obj_location.asp


[[html]]

<div id="brugerdata"></div>

<script type="text/javascript">

brugerdata.innerHTML = "URL: " + location.href + "<br/>";

</script>

[[/html]]
Overvagning Kodeeksempel 3 Browser Fingerprint - Bendtsen - http://iftek.dk/overvagning-kodeeksempel-3-browser-fingerprint
Siden her indsender flg. browserinformationer automatisk - læs teksten her for at acceptere det!

[[html]]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<div id="brugerdata"></div>

<script type="text/javascript">

var ipadresse;

function postData(){
$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSdr1za6MchdH_cwcEObQrjrBsA24l4mgNjqkr38Anl3Kc6YKg/formResponse",
data: {"entry.1443288421": ipadresse, "entry.1787327679": screen.width, "entry.320419790": screen.height, "entry.372496107": screen.availHeight, "entry.1049323912": screen.availWidth, "entry.733759483": navigator.cookieEnabled, "entry.1668233419": navigator.javaEnabled(), "entry.1727905884": navigator.language},
type: "POST",
dataType: "xml",
statusCode: {
0: function() {
Success message
},
200: function() {
Success Message
}
}
});
brugerdata.innerHTML = brugerdata.innerHTML + "postet";
}

brugerdata.innerHTML = brugerdata.innerHTML +
"Skærmbredde: " + screen.width + "<br/>" +
"Skærmhøjdde: " + screen.height + "<br/>" +
"Vinduebredde: " + screen.availWidth + "<br/>" +
"Vinduehøjde: " + screen.availHeight + "<br/>" +
"Cookies tilladt? " + navigator.cookieEnabled + "<br/>" +
"Java tilladt? " + navigator.javaEnabled() + "<br/>" +
"Sprog: " + navigator.language + "<br/>";

$.get("http://ipinfo.io", function(response) {
ipadresse = response.ip;
brugerdata.innerHTML = "IP: " + ipadresse + "<br/>" + brugerdata.innerHTML;
postData();
}, "jsonp");

</script>

[[/html]]

Du kan se de indsendte data her - dine informationer, vil stå nederst:
https://docs.google.com/spreadsheets/d/1s6KrRnTTn6itIwEJtjiP5NWq3wJ3HuOfz3UbmgQXEKY/edit?usp=sharing

Nedenfor kan du se, den del af koden, der henter dine browser oplysninger:

<div id="brugerdata"></div>

<script type="text/javascript">

brugerdata.innerHTML = "Skærmbredde: " + screen.width + "<br/>" +
"Skærmhøjdde: " + screen.height + "<br/>" +
"Vinduebredde: " + screen.availWidth + "<br/>" +
"Vinduehøjde: " + screen.availHeight + "<br/>" +
"Cookies tilladt? " + navigator.cookieEnabled + "<br/>" +
"Java tilladt? " + navigator.javaEnabled() + "<br/>" +
"Sprog: " + navigator.language + "<br/>"; 

$.get("http://ipinfo.io", function(response) {
   ipadresse = response.ip;
   brugerdata.innerHTML = "IP: " + ipadresse + "<br/>" + brugerdata.innerHTML;
   postData();
}, "jsonp");

Overvagning Kodeeksempel 2 Browser Fingerprint - Bendtsen - http://iftek.dk/overvagning-kodeeksempel-2-browser-fingerprint
1: Se eksempel på form og prøv at indsende svar på:
https://docs.google.com/forms/d/e/1FAIpQLSdr1za6MchdH_cwcEObQrjrBsA24l4mgNjqkr38Anl3Kc6YKg/viewform

2: Se indsendte svar via den eller nedenstående for på
https://docs.google.com/spreadsheets/d/1s6KrRnTTn6itIwEJtjiP5NWq3wJ3HuOfz3UbmgQXEKY/edit?usp=sharing

3: Lav egen Google form med til de oplysninger du vil gemme.

[[html]]
<div id="brugerdata"></div>

<script type="text/javascript">

brugerdata.innerHTML = "Skærmbredde: " + screen.width + "<br/>" +
"Skærmhøjdde: " + screen.height + "<br/>" +
"Vinduebredde: " + screen.availWidth + "<br/>" +
"Vinduehøjde: " + screen.availHeight + "<br/>" +
"Cookies tilladt? " + navigator.cookieEnabled + "<br/>" +
"Java tilladt? " + navigator.javaEnabled() + "<br/>" +
"Sprog: " + navigator.language + "<br/>";

</script>
[[/html]]
Overvagning Kodeeksempel 1 Browser Fingerprint - Bendtsen - http://iftek.dk/overvagning-kodeeksempel-1-browser-fingerprint
Vis Browserinformationer der kan hentes via Javascript.

[[html]]
<div id="brugerdata"></div>

<script type="text/javascript">

brugerdata.innerHTML = "Skærmbredde: " + screen.width + "<br/>" +
"Skærmhøjdde: " + screen.height + "<br/>" +
"Vinduebredde: " + screen.availWidth + "<br/>" +
"Vinduehøjde: " + screen.availHeight + "<br/>" +
"Cookies tilladt? " + navigator.cookieEnabled + "<br/>" +
"Java tilladt? " + navigator.javaEnabled() + "<br/>" +
"Sprog: " + navigator.language + "<br/>";

</script>
[[/html]]
Overvaagning Kodeeksempler - Bendtsen - http://iftek.dk/overvaagning-kodeeksempler
Overvågning - kodeeksempel 1 - Cookies - Simpel tæl besøg
Overvågning - kodeeksempel 2 - Cookies - Crosssite
Overvågning - kodeeksempel 1 - Browser Fingerprint - Vis Browserinformationer via JavaScript
Overvågning - kodeeksempel 2 - Browser Fingerprint - Indsend Browserinformationer manuelt
Overvågning - kodeeksempel 3 - Browser Fingerprint - Indsend Browserinformationer automatisk
Overvågning - kodeeksempel 4 - Browser Fingerprint - Medsend aktuelt URL + antal besøg
Overvågning - kodeeksempel 5 - Browser Fingerprint - Ekstra browser informationer
Test5 - Bendtsen - http://iftek.dk/test5
[[html]]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Nøgle - Embed: e/1FAIpQLSdr1za6MchdH_cwcEObQrjrBsA24l4mgNjqkr38Anl3Kc6YKg
Nøgle - Spread: 1s6KrRnTTn6itIwEJtjiP5NWq3wJ3HuOfz3UbmgQXEKY
Nøgle - Form: 1YDsI__Josr6EiPdNFCdZr9Z4ab84g7tdQwqm-sfkzBw

<div id="form" class="contact-us-form">
<form id="callus" target="_self" onsubmit="" action="javascript:postContactToGoogle()">
<fieldset>
<label for="ipadresse">What's your ip?</label>
<input id="ipadresse" type="text" name="ipadresse">
</fieldset>
<fieldset>
<label for="screenwidth">What's your screen width? *</label>
<input id="screenwidth" type="text" name="screenwidth">
</fieldset>
<fieldset>
<label for="screenheight">What's your screen height? *</label>
<input id="screenheight" type="text" name="screenheight">
</fieldset>
<div style="width: 100%; display: block; float: right;">
<button id="send" type="submit">
Contact Us
</button>
</div>
</form>
</div>

<div id="brugerdata"></div>

<script type="text/javascript">

brugerdata.innerHTML = "Skærmbredde: " + screen.width + "<br/>" +
"Skærmhøjdde: " + screen.height + "<br/>" +
"Vinduebredde: " + screen.availWidth + "<br/>" +
"Vinduehøjde: " + screen.availHeight + "<br/>" +
"Farvedybde: " + screen.colorDepth + "<br/>" +
"Pixels: " + screen.pixelDepth + "<br/>" +
"Cookies tilladt? " + navigator.cookieEnabled + "<br/>" +
"Java tilladt? " + navigator.javaEnabled() + "<br/>" +
"Sprog: " + navigator.language + "<br/>" +
"Ekstra sprog: " + navigator.languages + "<br/>" +
"Platform: " + navigator.platform + "<br/>" +
"Produkt: " + navigator.product + "<br/>" +
"App name: " + navigator.appCodeName + "<br/>" +
"App codename: " + navigator.appCodeName + "<br/>" +
"Browser user agent: " + navigator.userAgent + "<br/>" +
"Browser version: " + navigator.appVersion + "<br/>" +
"Antal plugins: " + navigator.plugins.length + "<br/>";

"Plugin nr 1: " + navigator.plugins[1].name + "<br/>"
Obs history go() smider bruger x baglæns men kan ikke hente/vise url

var ipadresse;
$.get("http://ipinfo.io", function(response) {
ipadresse = response.ip;
brugerdata.innerHTML = brugerdata.innerHTML + "IP: " + ipadresse + "<br/>";
}, "jsonp");

function postContactToGoogle(){
var screenwidth = $("#screenwidth").val();
var screenheight = $("#screenheight").val();

$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSdr1za6MchdH_cwcEObQrjrBsA24l4mgNjqkr38Anl3Kc6YKg/formResponse",
data: {"entry.1443288421": ipadresse, "entry.1787327679": screen.width, "entry.320419790": screen.height},
type: "POST",
dataType: "xml",
statusCode: {
0: function() {
Success message
},
200: function() {
Success Message
}
}
});

}
</script>

[[/html]]
Test4 - Bendtsen - http://iftek.dk/test4

The ListPages module does not work recursively.

Test3 - Bendtsen - http://iftek.dk/test3

The ListPages module does not work recursively.
The ListPages module does not work recursively.

Test2 - Bendtsen - http://iftek.dk/test2
[[html]]
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Nøgle - Embed: e/1FAIpQLSdr1za6MchdH_cwcEObQrjrBsA24l4mgNjqkr38Anl3Kc6YKg
Nøgle - Spread: 1s6KrRnTTn6itIwEJtjiP5NWq3wJ3HuOfz3UbmgQXEKY
Nøgle - Form: 1YDsI__Josr6EiPdNFCdZr9Z4ab84g7tdQwqm-sfkzBw

<div id="form" class="contact-us-form">
<form id="callus" target="_self" onsubmit="" action="javascript:postContactToGoogle()">
<fieldset>
<label for="ipadresse">What's your ip?</label>
<input id="ipadresse" type="text" name="ipadresse">
</fieldset>
<fieldset>
<label for="screenwidth">What's your screen width? *</label>
<input id="screenwidth" type="text" name="screenwidth">
</fieldset>
<fieldset>
<label for="screenheight">What's your screen height? *</label>
<input id="screenheight" type="text" name="screenheight">
</fieldset>
<div style="width: 100%; display: block; float: right;">
<button id="send" type="submit">
Contact Us
</button>
</div>
</form>
</div>

<div id="brugerdata"></div>

<script type="text/javascript">

brugerdata.innerHTML = "Skærmbredde: " + screen.width + "<br/>" +
"Skærmhøjdde: " + screen.height + "<br/>" +
"Vinduebredde: " + screen.availWidth + "<br/>" +
"Vinduehøjde: " + screen.availHeight + "<br/>" +
"Farvedybde: " + screen.colorDepth + "<br/>" +
"Pixels: " + screen.pixelDepth + "<br/>" +
"Cookies tilladt? " + navigator.cookieEnabled + "<br/>" +
"Java tilladt? " + navigator.javaEnabled() + "<br/>" +
"Sprog: " + navigator.language + "<br/>" +
"Ekstra sprog: " + navigator.languages + "<br/>" +
"Platform: " + navigator.platform + "<br/>" +
"Produkt: " + navigator.product + "<br/>" +
"Browser: " + navigator.appCodeName + "<br/>" +
"Browser version: " + navigator.appVersion + "<br/>" +
"Historik - længde: " + history.length + "<br/>" +
"Forrige URL: " + history.go(-1) + "<br/>";

var ipadresse;
$.get("http://ipinfo.io", function(response) {
ipadresse = response.ip;
brugerdata.innerHTML = brugerdata.innerHTML + "IP: " + ipadresse + "<br/>";
}, "jsonp");

function postContactToGoogle(){
var screenwidth = $("#screenwidth").val();
var screenheight = $("#screenheight").val();

$.ajax({
url: "https://docs.google.com/forms/d/e/1FAIpQLSdr1za6MchdH_cwcEObQrjrBsA24l4mgNjqkr38Anl3Kc6YKg/formResponse",
data: {"entry.1443288421": ipadresse, "entry.1787327679": screen.width, "entry.320419790": screen.height},
type: "POST",
dataType: "xml",
statusCode: {
0: function() {
//Success message
},
200: function() {
//Success Message
}
}
});

}
</script>

[[/html]]
Test - Bendtsen - http://iftek.dk/test
[[html]]
<div id="brugerdata"></div>
<form id="foo">
<input id="IP" name="IP" type="text" value="1.2.3.4" />
<input type="submit" value="Send" />
</form>

</p>

<script>
brugerdata.innerHTML = "Tid: " + Date() + "<br/>" +
"Skærmbredde: " + screen.width + "<br/>" +
"Skærmhøjdde: " + screen.height + "<br/>" +
"Vinduebredde: " + screen.availWidth + "<br/>" +
"Vinduehøjde: " + screen.availHeight + "<br/>" +
"Cookies tilladt? " + navigator.cookieEnabled + "<br/>" +
"Java tilladt? " + navigator.javaEnabled() + "<br/>" +
"Sprog: " + navigator.language + "<br/>" +
"Ekstra sprog: " + navigator.languages + "<br/>" +
"Platform: " + navigator.platform + "<br/>" +
"Browser: " + navigator.vendor + "<br/>" +
"Browser version: " + navigator.appVersion + "<br/>";

//SEND DATA VIA FORM

// Variable to hold request
var request;

// Bind to the submit event of our form
$("#foo").submit(function(event){

// Prevent default posting of form - put here to work in case of errors
event.preventDefault();

// Abort any pending request
if (request) {
request.abort();
}

// setup some local variables
var $form = $(this);

// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();

// Let's disable the inputs for the duration of the Ajax request.
// Note: we disable elements AFTER the form data has been serialized.
// Disabled form elements will not be serialized.
$inputs.prop("disabled", true);

// Fire off the request to /form.php
request = $.ajax({
url:"https://script.google.com/macros/s/AKfycbzJrFuLkgQyiHE2opbaIDKUYvkm_genbrP1L-WBA3Zkn_ZTZ-0/exec",
type: "post",
data: serializedData
});

// Callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
// Log a message to the console
console.log("Hooray, it worked!");
});

// Callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
// Log the error to the console
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
});

// Callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});

});

</script>
[[/html]]
App Udvikling Med Wytepad Iteration - Elisabeth Husum - http://iftek.dk/app-udvikling-med-wytepad-iteration
Som I så her: ” App-udvikling med WytePad - arbejdsmetode”, er der mulighed for på baggrund af testen at gå tilbage og videreudvikle appen.

Opgave 1

Med udgangspunkt i jeres nuværende prototype, skal I igen gennemgå de forgående faser og lave en iteration for at gøre prototypen endnu bedre.

App Udvikling Med Wytepad Low Fidelity Prototyping - Elisabeth Husum - http://iftek.dk/app-udvikling-med-wytepad-low-fidelity-prototyping
Vi skal nu arbejde på designet af interaktionsdesignet til vores app. Til dette vil vi bruge ”low fidelity prototyping”.
Læs: http://www.wytepad.com/learn/prototyping-fidelity/.
Bemærk at hvor ”low fiedelity prototyping” er en arbejdsmetode med fokus på hurtigt og nemt at vise dele af designet af en app, er ”high fidelity prototyping” en arbejdsmetode, hvor man går mere i dybden og konstruerer dele af funktionaliteten af en app.

Opgave 1

Hent kassen med Wytepad. Lav en skitse af jeres interaktionsdesign. I denne arbejdsopgave skal I tænke over

  • Hvor skal menuer være?
  • Hvad skal man kunne klikke på?
  • Skal der være andre måder man kan interagere med appen på?
  • Hvilke farver skal der bruges?
  • Hvilke billeder skal bruges?

Nu har I lavet den første beskrivelse af jeres design. Næste skridt er at lave designet interaktivt og hertil bruger vi appen Marvel.

Opgave 2

Installer appen Marvel vha. Følgende guide: http://www.wytepad.com/learn/marvel-guide/
Lav arbejdet med at gøre designet interaktivt - følg ovenstående guide. I behøver ikke ”Bonus step”.

Nu skal jeres design testes.

Opgave 3

Læs: http://www.wytepad.com/learn/user-involvement/
Planlæg båden en ”content testing” og ”interactive testing”.
I skal også overveje Usability. I kan enten selv gøre jeres observationer på brugeren under testen, eller diskutere usability af jeres design direkte med brugeren.
Skriv det I ønsker at observere ved testen ned.

Opgave 4

Find en testperson og udfør testen. Tag noter undervejs.

Opgave 5

Implementér de idéer I synes er relevante og gode i jeres egen interaktive prototype.

Opgave 6

Lav de tilrettelser I synes er relevante i forhold til brugertesten og det I fandt på internettet i forhold til lignende apps.

Nu har I den første prototype til jeres app, der beskriver interfacet, funktionaliteten og interaktionen.
App Udvikling Med Wytepad Brainstorm - Elisabeth Husum - http://iftek.dk/app-udvikling-med-wytepad-brainstorm
Vi skal starte med at finde en rigtig god og spændende ide til en app. Derfor skal vi have genereret nogle idéer. Bemærk at det ikke er sikkert du selv kommer til at arbejde videre med de idéer du kommer med. Enten fordi der er for få andre der har lyst til at arbejde med din idé eller fordi din idé ikke kommer med i den endelige gruppe af idéer klassen skal arbejde videre med. Det kan også være at du ender med hellere at ville arbejde med en af de andres idéer.

Opgave 1

Jeres idé til en app skal løse et problem. Sæt jer i grupper og formulér en sætning: Hvordan … . . ?
Skriv den op på et A3-ark.

Opgave 2

Nu skal der brainstormes. Der er følgende regler:

  • Døm ikke egne eller andres idéer
  • Gå efter kvantitet
  • En samtale ad gangen
  • Opfordr til vilde idéer
  • Byg videre på andres idéer
  • Bevar fokus på emnet
  • Vær visuel (og dokumenter)

Hver gruppedeltager skal producere 10 post-its med ideer til besvarelse af ”Hvordan … . .?”-spørgsmålet. Disse placeres på A3-arket.

Opgave 3

Hver gruppe får en af de andre gruppers A3-ark.
Gruppen samler 10-15 post-its fra arket som til sammen beskrive den ide gruppen synes ser bedst ud. Disse placeres sammen med ” Hvordan … . .?”-spørgsmålet på et A4- ark.

Opgave 4

Hver gruppe får en af de andres A4-ark.
Med udgangspunkt i indholdet formuleres en enkelt sætning: ”Denne app skal … . . ”. Sætningen skrives på tavlen.

Opgave 5

Hver enkelt elev går til tavlen og skriver sig på den ide han eller hun gerne vil arbejde videre med.

Opgave 6

Definér målgruppen ud fra Minerva-modellen og beskriv den kontekst appen skal bruges i.

App Udvikling Med Wytepad Arbejdsmetode - Elisabeth Husum - http://iftek.dk/app-udvikling-med-wytepad-arbejdsmetode
I udviklingen af en app vil vi bruge en professionel arbejdsmetode som ser ud som på nedenstående figur:

metode.png

Det er en iterativ metode som ved hvert gennemløb arbejder sig hen mod et bedre resultat.
App Udvikling Med Wytepad Materialer - Elisabeth Husum - http://iftek.dk/app-udvikling-med-wytepad-materialer
Firmaets eget materiale til app-udvikling: http://www.wytepad.com/learn/
Køb af materialer: http://www.wytepad.com/buy/
Se i øvrigt under ” App-udvikling med WytePad - til underviseren”

https://innovation.sites.ku.dk/metode/klassisk-brainstormi/
App Udvikling Med Wytepad Faglige Mal - Elisabeth Husum - http://iftek.dk/app-udvikling-med-wytepad-faglige-mal
Det er hovedsageligt følgende faglige mål der behandles i forløbet:

  • give eksempler på, hvordan it-systemer har betydning for og påvirker menneskelige aktiviteter samt identificere, hvordan konkrete it-systemer påvirker brugeres adfærd
  • beskrive og analysere udvalgte elementer i et interaktionsdesign, udarbejde it-produkter i form af simple interaktionsdesign og tilpasse eksisterende design
  • redegøre for innovative it-systemer sammenholdt med egne it-løsninger.
  • redegøre for innovative udviklingsprocesser og skitsere idéer til innovative it-produkter

App Udvikling Med Wytepad Til Underviseren - Elisabeth Husum - http://iftek.dk/app-udvikling-med-wytepad-til-underviseren
Det praktiske:
Dette materiale er udviklet i et samarbejde mellem firmaet TeamAppdictive ( http://appdictive.dk/ ) og underviser Elisabeth Husum.
Forløbet kan afvikles både på C-niveau og på B-niveau. Forløbet forudsætter at man køber et antal tablets/smartphones/tuscher/viskelædere på følgende adresse: http://www.wytepad.com/buy/.
Et bud på indkøb til en fuld klasse kan være:

  • 7 Android tlf
  • 7 Android tablet
  • 7 iOS tlf
  • 7 iOS tablet

hertil 15 sæt markers i 4 farver og 28 erasers.

Det indholdsmæssige:
Forløbet har fokus på designdelen af app-udvikling og arbejdsprocessen hermed.

Det planlægningsmæssige:
For at skabe kontekstuelle rammer for brainstorm kan det være en fordel at fastsætte et tema eller lignende rammer fra start, som man kan tage udgangspunkt i. Det kan være temaer som klassen har arbejdet med før, eller der kan være en opgave i at identificere et behov fra sin egen, eller andres hverdag.
Ved gruppedannelse kan man vælge læsegrupper. Alternativt kan man - efter brainstorm session hvor man på klassen præsenterer sine konceptidéer - vælge de bedste bliver ved afstemning og man fordeler sig så i grupper på den idé man ønsker at arbejde videre på.
App Udvikling Med Wytepad - Elisabeth Husum - http://iftek.dk/app-udvikling-med-wytepad
I dette forløb skal vi udvikle en app.

Her kan du læse hvad en app er:
http://ordnet.dk/ddo/ordbog?query=app http://denstoredanske.dk/It%2c_teknik_og_naturvidenskab/Informatik/Software%2c_programmering%2c_internet_og_webkommunikation/applikation

For at resultatet bliver bedst muligt, vil vi benytte en række arbejdsgange og redskaber som også benyttes professionelt til app-udvikling.
Her er en lille introduktionsvideo: http://www.wytepad.com/ .

App Udvikling Med Wytepad- til underviseren, App Udvikling Med Wytepad- faglige mål, App Udvikling Med Wytepad- materialer

side 1 af 212næste »
Medmindre andet er angivet, er indholdet af denne side licenseret under Creative Commons Attribution-NonCommercial 3.0 License