Durch einfaches einbinden eines kleinen Buttons von whos.amung.us kann man sehen wer gerade den eigenen Blog durchstöbert und wo die Leute so herkommen. Zur auswahl gibts schicke Karten, z.b.
Die Aktuellen Karten für code-inside.de kann man hier finden, der Button auf code-inside ist rechts oben unter “Counter”.
Nachdem Robert schon mal diesen Link gebloggt hat habe ich noch diese coolen Scripts gefunden:
60 More AJAX- and Javascript Solutions For Professional Coding
80+ AJAX-Solutions For Professional Coding
und noch eine Liste vieler nützliche Javascriptbibliotheken:
Ich als Web 2.0 Mensch habe jetzt ein neues Experiment laufen: Miniblogging mit Twitter. Auf dem Blog ist rechts jetzt mein Twitter Feed eingebunden.
Für alle interessierten: Ich habe dieses Wordpress Plugin genommen & dazu natürlich noch diese Firefox Extension.
Schauen wir mal ob das irgendwas bringt – und wenn es der puren Unterhaltung dient 
Silverlight 1.0 wurde vor wenigen Monaten veröffentlicht und zeitgleich wurde eine Alphaversion von Silverlight 1.1 ausgeliefert. Im nächsten Release von Silverlight wird die Version 2.0 angestrebt. Um die Möglichkeiten mit Silverlight 1.1 auszutesten hat die T-Systems Multimedia Solutions GmbH einen kleinen Showcase mit der aktuellen Silverlight Version 1.1 entwickelt:
Die Anwendung erlaubt es in zwei verschiedenen Ansichten (eine „Karusell-Ansicht“ und eine „Grid-Ansicht“) auf die einzelnen Videos zuzugreifen:
Mit einem Klick auf ein Filmcover erscheint der Videoplayer sowie einige Filminformationen:
Es wurde auch eine aktive Suche implementiert, welche die Filmtitel sowie Schauspielernamen durchsucht und das jeweilige Video in der Grid-Ansicht hervorhebt:
Ein Easteregg ist pünktlich zu Weihnachten auch mit von der Partie. Wie man das Gimik freischaltet wird aber an dieser Stelle nicht verraten.
Smiley-Easteregg
Durch den Showcase sieht man, dass Microsofts Flash Konkurrent sehr großes Potenzial mitbringt. Als Entwickler begeistert mich besonders, dass man solche Projekt ohne einen „Flasher“ realisieren kann und in seiner vertrauen Umgebung (Visual Studio + .NET) entwickeln kann.
Ich gratuliere meinen Kollegen (leider war ich nicht 100% bei der Entwicklung beteiligt, sondern half nur am Rande) von der T-Systems Multimedia Solutions GmbH  über diesen gelungenen Showcase und fand die Zusammenarbeit mit ihnen sehr bereichernd.
[ Hier gehts direkt zur Anwendung (Silverlight 1.1 Voraussetzung) ]
JSON (oder Javascript Objekt Notation) ist besonders für Webanwendung eine sehr gute Alternative zu XML. Auf Javascript mit Xml zugreifen geht (siehe HowTo), ist aber nicht unbedingt schön.
In Zeiten von (XML) Webservices und AJAX steht man dabei aber vor einem Problem: Wie bekomm ich etwas in einem Json Format? Gibts ein Serialisierer?
Ja, gibts – sogar direkt von Microsoft – die ASP.NET 2.0 AJAX Extensions oder ASP.NET 3.5.
Was wollen wir eigentlich erreichen?
Wie man einen ASP.NET Webservice dazu bringt Json zu generieren, wurde hier bereits beschrieben (einfach über die Webmethod das ResponseFormat angeben), was wir aber wollen ist ein direkter “Json Service” welchen man direkt als Javascript Datei mit ins Projekt einbinden über den üblichen Syntax: <script src=”…” …>…</script>
Ein anderer Punkt ist folgender: AJAX ist schön und gut – aber mal ehrlich: Jedes mal einen Request losschicken nur weil man ein paar Daten mehr haben möchte? Warum das nicht direkt in einem Rutsch laden? Mit Json ist eine wesentlich schnellere Datenübertragung möglich als mit AJAX:
In einem Projekt mit einer Datenbank wo über 1000 Produkte samt Beschreibungstexte drin stehen, sowie Preise, Bewertungen etc. wurden alle Daten direkt auf den Client übertragen und diese Datei war nur 300kb groß (mit Kompression sogar nur 150kb!)- jedes Bild ist heutzutage größer.
Was bringt das nun?
Web 2.0 ohne AJAX – warum kleine Datenmengen immer über einen umständlichen XmlHttpRequest nachladen, wenn es reichen würde die Daten einmal komplett als Json zu ziehen – das ist wesentlich trafficsparender und ermöglicht es alle Daten ohne nervige AJAX Ladebalken oder ähnliches anzuzeigen.
Da Json nur Javascript ist…
Zur eigentlichen Frage: Wie kann ich Javascript dynamisch erstellen?
Schritt 1: ASP.NET AJAX Projekt anlegen
Wir legen uns ein einfaches ASP.NET AJAX Projekt an und haben dann diese Struktur:
In unserer Default.aspx wollen wir unsere generierte Json Datei später einbinden.
Schritt 2: Demodaten vorbereiten
Zur Demonstration wollen wir einfach ein paar Kontaktdaten (”Contacts” & “Address”) nehmen. Da wir keine Datenbank haben, simulieren wir einfach 500 Kontakte über den “ContactManager”, welcher 500 Contacts erstellt und als “List<Contact>” zurück gibt.
Klassenstruktur (Verschachtelte Struktur beachten) :
Schritt 3: Generischer Handler implementieren – dyamischer Javascript Generator
Oft übersehen aber in diesem Fall äußerst praktisch:
Da wir eine Javascript Datei dynamisch erstellen wollen, brauchen wir kein Markup (aspx/html) oder ein Webdienst (asmx). Die Lösung: Eine ASHX.
Source Code “ContactJsonService”
public class ContactJsonService : IHttpHandler { public void ProcessRequest(HttpContext context) { ContactListManager manager = new ContactListManager(); JavaScriptSerializer serializer = new JavaScriptSerializer(); string output = "var ContactList = " + serializer.Serialize(manager.GetAllContacts()); context.Response.ContentType = "application/json"; context.Response.Write(output); } public bool IsReusable { get { return false; } } }
Die HTTP Anfrage kommt rein und alles was wir machen ist den Content uns selber zusammenstellen – daher wird auch nur das ausgegeben was wir wollen und kein unnötiges Markup. Als ContentType geben wir hier nun noch “application/json” an – aber eigentlich ist das egal.
Wichtig: “var ContactList = ” muss angegeben werden, damit man später auf das Json zugreifen kann. Ein verschateltes Json, so wie wir es wollen findet man auch auf json.org gut erklärt.
Der JavaScriptSerializer ist im Namespace “System.Web.Script.Serialization” welche sich in der Assembly “System.Web.Extensions” (also ASP.NET AJAX / ASP.NET 3.5) befindet.
Schritt 4: Unsere dynamische JS Datei einbinden
Auf unserer Default.aspx können wir nun einfach die ASHX einbinden:
<script src="ContactJsonService.ashx" type="text/javascript" language="javascript"></script>
Und schon haben wir Zugriff auf das JS Objekt:
Und erstellen daraus unsere dynamische Liste welche direkt im onload aufgerufen wird:
function create()
{
for(i=0; i<ContactList.length; i++)
{
var newLi = document.createElement("li");
newLi.innerHTML = ContactList[i].Name;
$get("list").appendChild(newLi);
}
}
Was sagt die Ladezeit?
Mit 54kb und 1 Sekunde Ladezeit auf einem Development Server (ein richtiger IIS ist schneller und mit Kompression kann man es nochmal verbessern) hat man 500 Datensätze da und kann die über Javascript anschauen wie man möchte – ohne weitere Ladezeiten!
Fazit:
Das Implementieren eines Json Services ist nicht schwer – man muss aber beachten, dass es nur dort Sinn macht, wo der Datenbestand sich nicht jede Sekunde / Minute verändert, weil man den Browser nicht dazu veranlassen kann die Daten neu zu ziehen,jedenfalls nicht direkt über diese Einbindung.
Bei den meisten Sachen ist dies aber auch gar nicht nötig. Bei einem Shop zum Beispiel könnte man den Produktkatalog einmal direkt auf den Client über dieses Technik schieben und könnte diese dann anschauen und in der Darstellung verändern ohne weitere Ladezeit, was bei AJAX so nicht möglich ist.
Der Produktkatalog wird sich immerhin nicht ständig ändern und sobald der Nutzer wieder auf die Seite geht, wird eine aktuelle Datei gezogen.
Wenn man nur “readonly” die Daten anders Darstellen will (Eine Listenansicht, eine Detailansicht etc.) kann man dies ohne AJAX machen und dadurch, dass man keine Requests los schickt, auch wesentlich performanter dies realisieren.
Das sowas auch in der Praxis geht, zeigt dotnetkicks.com mit seinem JsonService.
Songza ist ein neuer Web2.0 Dienst mit dem man Musik suchen, anhören und Playlisten erstellen kann. Die Oberfläche beruht dabei komplett auf Ajax und präsentiert sich in einem sehr schlichten Design was die Bedienung zu Gute kommt. Die verwendeten Techonlogien und auch die Idee ist nicht gänzlich neu ,aber das Ergebnis ist ein schönes Beispiel wie eine Web 2.0 Anwendung sein sollte.
Wer songza live sehen will sollte sich beeilen, abgespielt werden nämlich YouTube Videos – nur ohne Bild und das wird YouTube wahrscheinlich nicht lange mitmachen.
Mehr Infos unter:
http://golem.de/0711/56136.html
Songza.com
Amazon Web Service:
HowTo: Produktsuche mit den Amazon Web Services
eBay API:
HowTo: eBay API (Grundvoraussetzungen)
HowTo: eBay API (Suchen mit eBay…)
HowTo: eBay API (Aktuelle Suchbegriffe…)
Google Maps API:
HowTo: Google Maps API (Grundvoraussetzungen)
HTML / Javascript:
HowTo: Webanwendung debuggen (Javascript & HTML debuggen mit den entsprechenden Tools)
HowTo: Mauseingaben & Javascript (Wie bastelt man ein Paint mit Javascript?)
HowTo: Xml mit Javascript Parsen (Zugriff auf Nodes & Attribute)
HowTo: Objektorientierte Programmierung / OOP in Javascript (Eine einfache Klasse erstellen)
HowTo: Javascript Event “onscroll” nutzen
HowTo: Javascript Mouse Over – Mousepositionen für Details
Microsoft ASP.NET:
HowTo: Microsoft ASP.NET AJAX (Grundlagen)
HowTo: Microsoft ASP.NET AJAX (Praktischer Anfang)
HowTo: Microsoft ASP.NET AJAX (Clientseitiger Aufruf von Webmethoden)
HowTo: Microsoft ASP.NET AJAX (PageMethods – Webmethoden aufrufen ohne ASMX Datein)
HowTo: Json-Services erstellen (…oder wie erstell ich dynamisch Javascript?…oder Web 2.0 ohne AJAX?)
HowTo: Dynamische vCards als Link zum Importieren anbieten
HowTo: Microsoft AJAX Client API nutzen
Microsoft .NET:
HowTo: Datein per FTP über mit .NET runterladen und speichern
HowTo: Interfaces/Schnittstellen verstehen – mal auf simple Art und Weise
HowTo: XML erstellen mit XmlAttributes
HowTo: PDF’s erstellen unter .NET mit NFop
Microsoft Silverlight:
HowTo: Microsoft Silverlight 1.0 (Grundlagen)
HowTo: Microsoft Silverlight 1.0 (Praktischer Anfang)
HowTo: Microsoft Silverlight 1.0 (Spiegeleffekte erzeugen)
HowTo: Microsoft Silverlight 1.0 (dynamische Spiegeleffekte)
HowTo: Microsoft Silverlight 1.0 (Bilder “kippen” samt Spiegeleffekt)
HowTo: Microsoft Silverlight 1.0 (Webanwendungen mit dynamischen SilverlightHosts verschönern)
HowTo: Erstellen eines Silverlight 1.0 Videoplayers mal auf einfache Weise
HowTo: Silverlight mit dem “object” Tag als embedded HTML anbieten
Microsoft Patterns&Practices Software Factories:
HowTo: Microsoft Patterns&Practices Software Factories verstehen
HowTo: Microsoft Patterns&Practices – Web Service Factory / Service Factory (Teil 1: Grundlagen & ASMX Variante)
HowTo: Microsoft Patterns&Practices – Web Service Factory / Service Factory (Teil 2: WCF Variante)
HowTo: Microsoft Patterns&Parctices – Web Service Factory / Service Factory (Teil 3: Praktisches “Hello World”)
Microsoft Office SharePoint 2007:
HowTo: Automatisierte Backups mit dem Microsoft Office SharePoint 2007
Microsoft Visual Studio:
HowTo: Visual Studio 2005 für .NET 3.0 (WPF, WCF, WF) rüsten
AJAX:
HowTo: AJAX
HowTo: AJAX und ASP.NET Webservices (und die Sache mit dem GET)
Windows Live ID:
HowTo: Windows Live ID Web Authenticaton (Grundlage & Installation)
Microsoft Virtual Earth:
HowTo: Microsoft Virtual Earth (Praktischer Einstieg)
XML:
Guide: XML (Einführung)
Guide: XML (Basiswissen)
Guide: XML (DocumentType Definitions DTDs)
Guide: XML (XML Schema – Teil 1)
Guide: XML (XML Schema – Teil 2)
Guide: XML (XML Schema – Teil 3)
.NET & Datenbankverbindungen:
HowTo: Datenbankverbindungen – .NET & MS SQL 2005
HowTo: Datenbankverbindungen – .NET & MySQL
Oracle:
HowTo: Oracle 10g und die Oracle Developer Tools unter Vista
Web 2.0 ist in aller Munde. Leider ist es wohl gängige Praxis länger über das Web 2.0 zu reden, als selber dazu beizutragen.
Flickr, YouTube und co. sind nicht von großen Unternehmen erstellt wurden, sondern waren am Anfang kleine Studentenprojekte für den “eigenbedarf”.
Mein Ziel ist es, “Web 2.0″ – Entwicklungen und Themen hier auf praktische weise zu zeigen.
Selber betreibt das Projektteam von Code Inside www.shoppingmap.de.
ShoppingMap – Was ist das?
Bei der ShoppingMap geht es darum, dass Einkaufen im Internet einfacher zu gestalten. Es gibt sehr viele Onlinehändler, welche meistens ähnliche Produkte haben. ShoppingMap versucht keine simple “Preisvergleichseite” zu sein, sondern unser Ziel ist es, Daten von diesen Seiten besser oder anderes darzustellen.
Man bedenke, dass die momentane Version von ShoppingMap Beta ist, aber es zeigt auf eine sehr einfache Weise, was man zum Teil auch unter Web 2.0 versteht.
Web 2.0 Begrifflichkeiten
Im Internet kursieren diverse “wichtige” Begriffe rund um das ganze Thema Web 2.0, aber ich versuche hier ein kleine Auswahl von wichtigen Begriffen zu nennen und ganz grob zu umreißen - Wikipedia bietet natürlich auch nochmal eine ausführlichere Information.
-Â Web 2.0: Alles worum es hier geht
- Webservice: Ein Dienst im Internet
-Â API: Schnittstelle zum Anprogrammieren dieses Service
-Â Mashup: Das verbinden von 2 oder mehr Webservicen
- AJAX: Javascript und XML nutzen für Webrequests
ShoppingMap – Die Anwendung von unserem Dienst
Nachdem wir erstmal ein paar Begrifflichkeiten geklärt haben, will ich nur nochmal kurz auf ShoppingMap eingehen:
Der Nutzer sucht angenommen ein “Schrank” oder ein “Poker Tisch” auf eBay.de. Natürlich wäre es toll wenn man dies auch auf einer Karte darstellen könnte. Genau an dieser Stelle setzt ShoppingMap ein.
Kurze Stichworte, welche Techniken wir dabei verwendet haben:
Als Basis kommt ASP.NET 2.0 zum Einsatz. Die eBay API wird für das Abfragen von eBay verantwortlich und die Google Maps API wird genutzt, um dies auf einer Karte darzustellen. Wie man auch auf der Seite sieht, kommt auch eine TagCloud zum Einsatz – alles recht WebZwoNullig.
Auf all diese Themen, werde ich in Zukunft noch näher drauf angehen.
Viel Spass auf www.shoppingmap.de
Deutsch
Englisch
