Couto:

== JSON Introduction ==

JSON (acronym for [[JavaScript]] Object Notation) is a data interchange format, designed for human-readability. It's lightweight, text-based, open standard and usually serves as an alternative to [[XML]] to transmit data over a network or between a server and a web application.
JSON was a subset of the [[JavaScript]] programming language, but despite its relationship, it's considered to be language-independent, with [http://www.json.org parsers available for almost every language].

== JSON Data Types, Syntax and Structure ==

===JSON Data Types:===
<dl>
<dt>Number
<dd>Either as Integer: (…,-1,0,1,…) or as Real: (3,141592…)
<dt>String
<dd>double-quoted Unicode: "Jonh Doe"
<dt>Boolean
<dd>true or false
<dt>Array
<dd>an ordered sequence of values, comma-separated and enclosed in square brackets [ ]: <source lang="javascript">["Value1","Value2","Value2"]</source>
<dt>Object
<dd>a collection of key:value pairs, comma-separated and enclosed in curly braces { }: <source lang="javascript">{"Key1":"Value1" , "Key2":"Value2" , "Key3":"Value3"}</source>
<dt>Null Value
<dd>null
</dl>

----

===JSON Syntax and Structure===
A typical JSON file could be presented like this:
<source lang="javascript" >
{
"firstName": "John", //String
"lastName": "Doe",
"age": 39, //Number
"has_kids": false, //Boolean
"Hobbies":["Reading","Skating","Music"] //Array
"address": { //Object
"streetAddress": "Somewhere over the rainbow 2-1",
"city": "New York",
"postalCode": 10021
},
"phoneNumber": [ //Array and Object
{ "type": "home",
"number": 2125551234 },
{ "type": "fax",
"number": null //null value
}],
}
</source>
However, like Javascript, JSON can be formatted to be single-line.

<h2>Pratical Examples with [[JavaScript]]</h2>
<h3>Fetch and Include JSON File</h3>
I will show now, how to use [[JavaScript]] to print JSON files on a [[HTML]] page. I will use the [[#Twitter API]] to get a JSON file.

[http://twitter.com/statuses/public_timeline.json http://twitter.com/statuses/public_timeline.json] this link allow us to download a JSON file with the last 20 public tweets on [http://www.twitter.com Twitter]. Due security reasons [http://en.wikipedia.org/wiki/Cross-site_scripting (XSS)], we can not fetch the file with using XmlHttpRequest ([[AJAX]]) directly as so, we include it directly in the HTML page:

<source lang="html4strict" highlight="9,10">
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>
<body>

<script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?
callback=public_timeline"></script>
</body>
</html>
</source>

----

<h3>Print the JSON values</h3>
Notice the ?callback=public_timeline? We're using it, because if we download the file directly, we won't be able to use it sincee it's not assigned to any variable, or object or any other kind of javascript resource, so the [http://dev.twitter.com/ Twitter API] allow us to call the file with a [http://dev.twitter.com/pages/every_developer callback function] and so making the file usable for manipulation.
We now have the JSON file with a callback function to make it usable. We print its values by adding the following script: 
<source lang="javascript" highlight="11-20">
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Your Website</title>
</head>
<body>

<script type="text/javascript" src="http://twitter.com/statuses/public_timeline.json?
callback=public_timeline"></script>
<script type="text/javascript">
var tweet;
function public_timeline(data){
tweet = data;
for(var i in tweet){
document.write(tweet[i].user.name);
document.write(tweet[i].text);
document.write(tweet[i].created_at);
}
}
</script>
</body>
</html>
</source>
Because JSON is natively Javascript we don't need to parse it, in this particular example, and we can itinerate it's values directly using the dot syntax.
===Create a JSON Object===
So far we saw how to fetch and include an external JSON File and how to iterate and print a JSON object, but how do we create a JSON of our own? Since JSON was originally made from Javascript, to create an JSON all we need to do, it's to declare it:
<source lang="javascript">
var jsonObject = {
name: 'Luís',
age: 23,
student: true,
hobbies: ['Reading', 'Sleeping', 'Procrastinating'],
family_members: [
{name: "Manuel", age: 50, relation: "father"},
{name: "Maria", age: 47, relation "mother"}
]
};

alert(jsonObject.family_members[0].relation); //returns "father"
</source>
==Pratical Examples with PHP==
===Create and Decode a JSON Object===
[[PHP]] natively supports JSON which makes this process a no-effort task! So to create a JSON Object, we first define an array and populate it, then we encode the array to JSON:
<source lang="PHP">
<?php

$myTweet = array(
"user" =>array(
"id" => 123456,
"name" => Username),
"text" => "I'm going to be inside a JSON",
"created_at" => "Wed Jul 07 18:12:12 +0000 2010"
);

$myJSONTweet = json_encode($myTweet);

$myTweets = json_decode($myJSONTweet, true); //if true it will decode to an associative array

?>
</source>
The json_encode() function actually takes care of the JSON syntax, and even makes the object "user" inside the JSON. To decode it, we just use the json_decode() and the PHP will transform the JSON into an associative array, pretty much the opposite of the json_encode().

==Twitter API Introduction==

<blockquote cite="http://twitter.com/about">"Twitter is a real-time information network powered by people all around the world that lets you share and discover what’s happening now.
Twitter asks “what’s happening” and makes the answer spread across the globe to millions, immediately." in [http://twitter.com/about Twitter About Us page]</blockquote>

<blockquote cite="http://www.slideshare.net/padday/the-real-life-social-network-v2">The social web is not a fad, and itʼs not going away. Itʼs not an add-on to the web as we know it today. Itʼs a fundamental change, a re-architecture, and in hindsight its evolution is obvious.
Make no mistake about this. Everyone in this room will need to learn how to design social features on websites. Whether you like it or not in [http://www.slideshare.net/padday/the-real-life-social-network-v2 Paul Adams in The Real Social Network]</blockquote>

An API (Application Programming Interface) it's a interface implemented by a service that allows programmers to interact with other software
When used in the context of web development, an API is typically a defined set of Hypertext Transfer Protocol (HTTP) request messages, along with a response message, usually in a Markup Language (like [[XML]]) or JSON, other formats that are also quite common are RSS and ATOM
The use of API, allowed web services to share content and create an open sharing arquitecture. A common example it's the video embedding through [http://www.youtube.com YouTube] or [http://www.vimeo.com Vimeo]
My choice of using the Twitter API, is due to two reasons:
<ul>
<li>It's relatively easy, and pretty straightforward to use</li>
<li>It's well documented</li>
</ul>

----
===What you need to know===
Among several things, i believe that these three are essential to use the Twitter's API:
<ul>
<li>The API is entirely HTTP-based
<ul><li>Where methods to retrieve data use the GET request.</li>
<li>publishing, modifying or destroying data on Twitter requires the POST request.</li></ul>
<li>A command-line is all you need to interact with the Twitter API</li>
<li>There are [http://dev.twitter.com/pages/libraries Twitter API libraries] for almost any language</li>

JSON

2010-07-07T15:59:14Z

Couto:

JSON

2010-07-07T15:31:02Z

Couto: Created page with '== JSON Introduction == JSON (acronym for JavaScript Object Notation) is a data interchange format, designed for human-readability. It's lightweight, te…'

IFD:Netz

2010-07-07T12:43:55Z

Couto:

[[Image:Netzwerk_zentral.jpg|right|300px]]
Bachelor-Werkmodul 
''Lehrperson:'' [[Michael Markert]] 
''Bewertung:'' 6 [[ECTS]], 2 [[SWS]] 
''Termin:'' Mittwochs, 11-12.30 Uhr''' 
''Ort:'' [[Marienstraße 7b]], Projektraum 104 
''Erster Termin:'' 14.04.2010, 11 Uhr 
Der genaue Termin/Ort wird mit der Bestätigung der Anmeldung per E-Mail mitgeteilt!

Das Werkmodul richtet sich an Studierende aller Fachrichtungen mit Vorkenntnissen im Bereich Webdesign (HTML, CSS), die an experimenteller Netzkunst oder der Entwicklung von interaktiven Web-Anwendungen und User-Interfaces interessiert sind.

Der Fokus liegt auf fortgeschrittenen Webtechnologien wie z.B. PHP und JavaScript, Processing Applets bzw. der Kombination verschiedener Techniken. Auch auf die Einbindung von Hardware wie z.B. Sensoren und Aktuatoren von Mobiltelefonen oder Mikrocontrollern (z.B. Arduinos mit LAN-Schnittstelle) kann eingegangen werden.

Die endgültigen Themen des Kurses orientieren sich an den Erfordernissen der einzelnen Projekte. Das Werkmodul ist nicht als Frontalunterricht konzipiert, sondern versteht sich als Arbeitsgruppe, in der Ideen, Technologien und Techniken vorgestellt und diskutiert werden.

Dieser Kurs kann auch in Kombination mit (oder alternativ zu) dem Werkmodul [[IFD:iPhone-Dev|iPhone Development]] belegt werden, um Webapplikationen für mobile Endgeräte zu erstellen. Eine Kombination mit Projektaufgaben (wie z.B. dem Bachelor Projekt der Professur Inteface-Design [[IFD:PodPhonePad_and_Me|Interface Design 2 / Interaktion mit mobilen Medien]] oder dem [[GMU:Netze|Netzwelten-Ausstellungsprojekt der Professur Gestaltung medialer Umgebungen]]) ist ausdrücklich erwünscht.

== Themen ==
* Auffrischung [[HTML]] und [[CSS]]
* Neue [http://www.w3schools.com/html5/html5_reference.asp HTML5]-Features: What's hot, what not
* [[Netzstrukturen]] (Zentrale, dezentrale, verteilte Netzwerke…)
* [[OSC]], [[TCP/IP UDP|TCP/IP und UDP]], Local Horst und Co., Inter-Application Communication
* [[JavaScript]] und einschlägige JS-Libraries (JQuery, Scriptaculous)
* [[AJAX]]
* [[PHP]], GD-Library, PHPThumb
* [[Processing]] und [[JAVA]]
* [[Arduino]] und [[Mobile Processing]]
* [[OOP]], [[MVC]]
* [[Informationsethik]]
* Einführung in [[Systemtheorie|kybernetische Systemtheorie]]

== Voraussetzungen ==
* Vorkenntnisse in einer Programmiersprache
* oder sehr gute Kenntnisse in HTML/CSS

Bei Fragen zum Kurs kontaktieren Sie mich bitte per eMail!

{{Template:Anmeldung_MM}}

== Leistungsnachweis ==
* 33% regelmäßige und aktive Teilnahme
* 33% Kurzreferat (als Diskussionsstarter, max. 45 min.)
* 33% Einreichung einer teilweise oder ganz umgesetzen Projektidee (idealerweise mit begleitender und abschließender Dokumentation im Wiki). Die Abgabe erfolgt mit einem kurzen individuellen Gespräch, in dem mir jeder Teilnehmer eine Note vorschlägt und begründet
* 15% Wiki-Bonus: für neue Artikel bzw. Ergänzungen im Wiki

== Zielgruppe ==
Das Werkmodul richtet sich an Studierende aller Fachrichtungen mit Vorkenntnissen im Bereich Webdesign (HTML, CSS), die an experimenteller Netzkunst oder der Entwicklung von interaktiven Web-Anwendungen und User-Interfaces interessiert sind.

== Projekte ==
Laufende Dokumentation der Kursprojekte:
* [[IFD:Netzprojekte]]

== Terminplan ==
Vorläufiger Terminplan
# 14.04. Einführung
# 21.04. Recap [[HTML]], [[CSS]], [http://code.google.com/p/zen-coding/ Zen-Coding] (Michael)
# 28.04. [[Netzstrukturen]], [[TCP/IP UDP|TCP/IP, UDP]], [[OSC]], inter-application communication: lokal und global (Michael)
# 05.05. PHP, [[Regular Expressions]] (Moritz)
# 12.05. [[JSON]]: JavaScript Object Notation, APIs: Twitter (Luís)
# 19.05. XML (Daniel)
# 26.05. OOP-JavaScript/Python (Christian), AJAX (Moritz)
# 02.06. jQuery, Canvas (Gabriel)
# 09.06. [[HTML#HTML5|HTML5]] (Jan)
# 16.06. Entwicklerverantwortung (Moritz)
# 23.06. * (Pauline), * (Alexander)
# 30.06. Hardware: Arduino (Sebastian), (Michael)
# 07.07. Letzte Stunde: Recap, Questions, What's really important 
# 14.07. Ausstellungsvorbereitung gelungener Arbeiten für Summary am 15.07.
# 29.09. Abgabe

Abgabe der Ergebnisse als Dokumentation im Wiki mit Screenshots und Erläuterungen, evtl. kompilierbare quelloffene Projektdatei, bis zum 29.09.2010.

== Literatur ==
t.b.a.

== Links ==
* Linksammlung [[Netzkunst]]
* Lecture Notes des Moduls [http://www.uni-weimar.de/cms/medien/webis/teaching/lecture-notes.html Web Technology & Information Systems] bei Prof. Benno Stein (Uni Weimar)

{{Template:Netzkurs}}

[[Category:Arduino]]
[[Category:Processing]]
[[Category:Interaktion]]
[[Category:SS10]]