Valuepack: AJAX + Prototype/script.aculo.us + Dojo Toolkit

Applikationen für das Web 2.0 gestalten

Sie möchten Rich Internet Applications für das Web 2.0 entwickeln, optimieren und gestalten? Dann sind Sie mit diesem Valuepack genau richtig! Ein AJAX-Grundlagenkurs und umfassende Video-Trainings zu Prototype, script.aculo.us und dem Dojo Toolkit hilft dabei, nicht nur zeitgemäße RIAs zu entwickeln sondern auch viel Zeit und Arbeit zu sparen!

Ihr(e) Trainer: Ralph Steyer

Erscheinungsdatum: 25.06.2009

EUR 49,80

Es handelt sich bei diesem Video-Training um ein Online-Training.

Sie können die Trainingsinhalte jederzeit online ansehen oder herunterladen.

Was bekomme ich nach dem Kauf?

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!

In den Warenkorb Downloads

Auf die Merkliste Tell-A-Friend Feedback verfassen

Ähnliche Video-Trainings

AJAX hat das WWW in den letzten Jahren regelrecht revolutioniert. Die Techniken, die unter AJAX zusammengefasst werden, bilden die Basis für das so genannte Web 2.0 und der meisten modernen Rich Internet Applikation und damit die Grundvoraussetzung zeitgemäßer interaktiver Webseiten. Ralph Steyer zeigt Ihnen in diesem Video-Training, wie Sie AJAX zur Verbesserung und Optimierung Ihrer Web-Applikationen nutzen können – von den Grundlagen dieser faszinierenden Technologie bis hin zur professionellen Anwendung.

AJAX Grundlagen-Crashkurs
- Dieser Abschnitt verschafft Ihnen eine Übersicht über AJAX: Bekommen Sie einen Einblick in die aufregende Welt von AJAX, Web 2.0 und Co.
  
  Einleitung
  - Zu Beginn dieses Video-Trainings stellt sich der Trainer vor und erklärt das Akronym AJAX und wichtige AJAX-Referenzapplikationen. AJAX als Kern moderner RIAs (Rich Internet Applications) - überzeugen Sie sich selbst.
    
    Vorstellung und erster Kontakt mit AJAX
    
    07:41
  - AJAX steht für Asynchronous JavaScript and XML und bezeichnet die Verbindung von HTML (Hypertext Markup Language) oder XHTML (Extensible Hypertext Markup Language), DOM (Document Object Model), JavaScript, dem XMLHttpRequest-Objekt, einem spezifischen Klartextdatenformat und CSS.
    
    Für was steht AJAX und wann setzt man es ein?
    
    06:13
  - Der Trainer erklärt Ihnen Hintergrund und Geschichte von AJAX bzw. Web 2.0. Seien Sie gespannt auf seine Ausführungen.
    
    Woher kommen die Begriffe AJAX, Web 2.0 & Co?
    
    02:07
  - Beobachten Sie mit dem Trainer die Webkommunikation zwischen einem Browser und einem Webserver auf Basis von TCP/IP und HTTP mit einem Sniffer.
    
    TCP/IP und HTTP als Basis paketorientierter Webkommunikation
    
    05:27
- Um erfolgreich mit AJAX arbeiten zu können, benötigen Sie einen funktionierenden Webserver. Dieses Kapitel zeigt Ihnen, wie Sie den recht bequem installieren können.
  
  Voraussetzungen
  - Welche Vorkenntnisse sind für das Video-Training sinnvoll bzw. notwendig? Erfahren Sie vom Trainer, was Sie im Vorfeld bereits wissen sollten.
    
    Vorkenntnisse
    
    01:13
  - Dieses Video zeigt Ihnen, welche Anforderungen AJAX-Applikationen an Hardware und Betriebssystem stellen, sowie die notwendigen bzw. sinnvollen Browser und Testumgebungen.
    
    Hardware, Betriebssystem und Browser
    
    05:04
  - Die Webserverumgebung zur Entgegennahme einer AJAX-Anfrage - am Beispiel von XAMPP. Der Trainer zeigt Ihnen in den folgenden Videos, wie das Paket XAMPP herunterzuladen und zu installieren ist.
    
    Der Webserver
    - Um mit serverseitigen Skripten arbeiten zu können, installiert der Trainer XAMPP. Verfolgen Sie den Download und die Installation von Apache im Rahmen der Komplettlösung XAMPP auf dem lokalen Rechner.
      
      Download und Installation
      
      02:34
    - Dieser Film zeigt, wie Sie das Control Panel von XAMPP zum Start und Betrieb des Apache-Webservers sowie den Zugriff auf den lokalen Webserver über localhost einsetzen bzw. erreichen.
      
      Start und Betrieb von XAMPP
      
      01:57
    - Dateien werden von einem Webserver über ein Wurzelverzeichnis zur Verfügung gestellt. Bei Apache heißt das in der Grundkonfiguration "htdocs". Erfahren Sie mehr zu diesem Thema in diesem Video.
      
      Daten über Apache bereitstellen
      
      02:35
  - In diesem Abschnitt erfahren Sie einiges über die Verwendung des richtigen Editors und wie Sie Firefox um Plug-ins zur Webentwicklung erweitern.
    
    Die Entwicklungstools
    - Zur Erstellung einer AJAX-Applikation benötigen Sie einen geeigneten Editor. Das beginnt bei ganz einfachen Texteditoren und reicht bis zu vollständigen IDEs für die Webentwicklung wie Aptana Studio. Weiterführende Tipps gibt der Trainer in diesem Video.
      
      Editoren
      
      03:34
    - Firefox kann mit geeigneten Add-ons (z.B. Firebug, Web Developer, DOM Inspector, HTTP Live Headers) zur Zentrale der Webentwicklung aufgebaut werden, die kaum einen Wunsch offen lässt. Wie das funktioniert, sehen Sie in diesem Film.
      
      Pimp my Firefox
      
      04:22
- Der Trainer erklärt Ihnen eine erste praktische AJAX-Applikation, die trotz ihrer Einfachheit bereits alle zentralen Techniken von AJAX aufweist.
  
  Die erste AJAX-Applikation
  - Das Grundgerüst der AJAX-Applikation bildet in jedem Fall eine HTML- oder XHTML-Seite, in der die AJAX-Funktionalität verankert ist. Sehen Sie dem Trainer über die Schulter, wenn er Ihnen das erste Grundgerüst vorstellt.
    
    Die Webseite
    
    06:22
  - Die gesamte clientseitige Funktionalität einer AJAX-Applikation wird in JavaScript realisiert. Sie sehen hier den typischen Aufbau der JavaScript-Datei für eine einfache AJAX-Anfrage.
    
    Die JavaScript-Datei
    
    04:50
  - Das Testen und Überwachen der ersten eigenen AJAX-Applikation ist Thema dieses Films. Sind Sie schon gespannt? Dann starten Sie einfach das Video!
    
    First run
    
    03:36
- Die zentralen Techniken von AJAX werden in jeder AJAX-Applikation zusammenspielen. Dieser Abschnitt beschäftigt sich mit den drei elementaren Kerntechniken einer AJAX-Anwendung: HTML/XHTML - CSS - JavaScript.
  
  AJAX-Kerntechniken
  - Der Trainer gibt Ihnen in diesem Film eine kurze Übersicht, welche Inhalte in dem Kapitel vertieft werden. Lauschen Sie seinen Ausführungen!
    
    Überblick
    
    01:04
  - Dieser Abschnitt erläutert den Unterschied zwischen HTML und XHTML. Seien Sie auch gespannt auf die Validierungsmöglichkeiten, die Ihnen das W3C anbietet.
    
    HTML und XHTML
    - Wie wird aus einer konventionellen Textdatei eine Webseite? Um diese Frage zu beantworten, erläutert Ihnen der Trainer die Begriffe: HTML, MIME-Typ, die Interpretation durch den Browser und das Prinzip der Fehlertoleranz.
      
      Was ist eine Webseite?
      
      07:21
    - Anhand einer bekannten Seite demonstriert Ihnen der Trainer das W3C-Markup-Validation-Service. Außerdem bekommen Sie weiterführende Informationen zum Thema Fehlertoleranz.
      
      W3C Markup Validation Service
      
      03:28
    - Was unterscheidet HTML von XHTML und was sollte man als Basis von einer AJAX-Applikation nehmen? Diese Fragen beantwortet der Trainer in diesem Film.
      
      HTML oder XHTML?
      
      07:23
    - Wichtige Details zu Steueranweisungen, Parametern, Eventhandler und der tatsächlichen Funktion von HTML/XHTML in modernen Webseiten verrät Ihnen der Trainer hier.
      
      (X)HTML in AJAX-Applikationen
      
      05:58
  - Dieser Teil des Video-Trainings befasst sich mit dem unerlässlichen Einsatz von Style Sheets in modernen Websites. Des weiteren erfahren Sie vom Trainer, was der Acid-Test für Sie bedeuten wird.
    
    CSS
    - In diesem Video bekommen Sie eine kurze Übersicht über die wichtigsten Details von CSS und deren Verwendung in einer AJAX-Applikation.
      
      Was sind Style Sheets?
      
      05:25
    - Sie können die CSS-Kompatibilität von Browsern mit Testseiten im Web überprüfen. Der Trainer verrät Ihnen die dazu nötigen Details.
      
      Der Acid-Test für CSS
      
      01:21
    - Das W3C bietet einen Validierungsservice, mit dem Sie die Korrektheit der CSS in einer Webseite überprüfen können.
      
      Der Validierungsservice des W3C für CSS
      
      01:15
  - Ebenfalls nicht ganz neu sind JavaScript und DOM. Der Trainer erklärt in diesem Abschnitt die wichtigsten JavaScript-Kommandos, die einen erfolgreichen Internetauftritt gewährleisten.
    
    JavaScript & DOM
    - Wie wird JavaScript in einer Webseite verwendet? Die Art der Einbindung und potentielle Probleme, insbesondere beim Zugriff auf das DOM und bei AJAX-Applikationen, erklärt Ihnen der Trainer in diesem Video.
      
      JavaScript in der Webseite
      
      09:23
    - JavaScript dient dem Erzeugen, Verändern und Abfragen von Objekten. Insbesondere der Zugriff auf das DOM einer Webseite ist von elementarer Bedeutung. Lernen Sie darüber mehr in diesem Film.
      
      JavaScript und Objekte (DOM)
      
      04:34
    - Der Zugriff auf Elemente einer Webseite erfolgt über das DOM der Webseite. Für ausgewählte Elemente stehen Objektfelder und Namen zur Verfügung, üblicherweise verwendet man ein node-Objekt mit den Methoden getElementsByTagName(), getElementsByName() und getElementById().
      
      Zugriff auf DOM
      
      08:02
    - Der Trainer befasst sich in diesem Video mit dem Unterschied von normalen Funktionsaufrufen und Funktionsreferenzen, die in der Regel an Eventhandler gekoppelt sind.
      
      Funktionsreferenz vs. Funktionsaufruf
      
      01:04
    - In diesem Film erfahren Sie, wie der Einsatz von JavaScript-Eventhandlern in Verbindung mit Funktionsreferenzen funktioniert.
      
      Der JavaScript-Eventhandler
      
      04:39
  - Die Qual der Wahl haben Sie auch beim richtigen Übertragungsformat. Der Trainer zeigt Ihnen in den folgenden Filmen, wo Unterschiede und Einsatzgebiete liegen.
    
    Das Übertragungsformat
    - Bei AJAX wird in der Regel entweder reiner Text, ein HTML-Fragment, JSON oder XML als Datenformat für die Übertragung verwendet. Der Trainer verschafft Ihnen in diesem Video einen Überblick.
      
      Datenübertragung bei AJAX
      
      04:42
    - Warum macht XML Probleme bei der Datenübertragung in AJAX und wie bietet sich JSON als einfachere und bedeutend zuverlässigere Alternative an? Der Trainer demonstriert Ihnen den Einsatz von JSON anhand eines vollständigen AJAX-Beispiels.
      
      Text oder JSON statt XML
      
      09:28
- Dieser Abschnitt fasst die bisher erlernten Kerntechniken zusammen und zeigt Ihnen einen ersten vollständigen AJAX-Request zu Ihrem Server.
  
  Come together right now - AJAX
  - In diesem Film gibt Ihnen der Trainer eine kurze Übersicht über die typischen AJAX-Anwendungsbeispiele dieses Kapitels.
    
    Überblick
    
    00:59
  - Der Hintergrund jeder Datenanfrage per AJAX sind die Meldungen des Webservers und die Methoden und Eigenschaften des XMLHttpRequest-Objekts. Wie Sie damit arbeiten, erfahren Sie in diesem Abschnitt.
    
    Webserver-Meldungen und das XMLHttpRequest-Objekt
    - Der Webserver sendet auf Grund jeder Anfrage des Clients spezifische Statuscodes, die melden, ob eine Anfrage erfolgreich bearbeitet wurde. Wie Sie darauf in Ihrem Skript reagieren können, zeigt dieses Video.
      
      Webserver-Statuscodes
      
      03:43
    - Sehen Sie in diesem Film ein praktisches Beispiel der Auswertung der HTTP-Header, die ein Webserver beim Beantworten einer AJAX-Anfrage sendet.
      
      Statuscodes bei einer AJAX-Anfrage verwerten
      
      04:02
    - Jede AJAX-Anfrage läuftt in der Regel nach dem gleichen Schema ab: Es wird ein Objekt erzeugt, über das die Kommunikation mit dem Server am Browser vorbei erfolgt. Eine Callback-Funktion wird bei diesem Kommunikationsobjekt als Funktionsreferenz registriert. Dann wird die Verbindung geöffnet und die Anfrage abgeschickt. Letztendlich wird die Antwort des Webservers im Browser verwertet. Die Details zeigt dieses Video.
      
      Ablauf einer AJAX-Anfrage
      
      02:28
    - Die verschiedenen Methoden und Eigenschaften des XMLHttpRequest-Objekts stellt Ihnen dieser Film in einer Übersicht dar.
      
      Das XMLHttpRequest-Objekt
      
      07:03
    - Mit Hilfe der Ausnahmebehandlung können Sie eine universell einsetzbare Funktion erstellen, die XMLHttpRequest-Objekte erzeugt.
      
      Funktion: XMLHttpRequest-Objekte erzeugen
      
      06:50
  - Bei einer AJAX-Anfrage des Browsers an den Webserver können auch Daten (etwa Mauskoordinaten oder Formulareingaben des Anwenders) übermittelt werden. Erfahren Sie mehr dazu in diesem Film.
    
    Daten zum Server schicken
    
    03:50
  - Wenn der Server XML-Daten zum Client schickt, steht dank der responseXML-Eigenschaft eines XMLHttpRequest-Objekts ein DOM zur Verfügung. Auf diesem können Sie mit DOM-Methoden navigieren, um gezielt die Antwort zu verwerten.
    
    XML-Daten im Client verwerten
    
    03:44
  - Zu guter Letzt gibt Ihnen der Trainer in diesem Video noch eine kurze Übersicht über AJAX- bzw. JavaScript-Frameworks und deren Einsatzzwecke.
    
    AJAX-Frameworks
    
    06:22
Sie möchten Rich Internet Applications für das Web 2.0 programmieren und gestalten? Prototype ist die Basis für viele Web-Frameworks und das Referenz-Framework des Web 2.0 schlechthin! Das darauf aufbauende script.aculo.us bietet eindrucksvolle visuelle Effekte und Techniken, um einfach und komfortabel Web-Oberflächen zu erstellen, die in allen relevanten Browsern funktionieren. Dieses Video-Training führt Sie grundlegend in Prototype und scipt.aculo.us ein und zeigt, wie Sie bei der Programmierung viel Zeit und Mühe sparen und dennoch robustere und besser wartbare, dabei ansprechend gestaltete Applikationen schreiben.

Prototype und script.aculo.us
- Prototype ist ein freies Framework für Ihre Websites. Bekommen Sie in diesem ersten Kapitel einen Überblick über dieses Framework und erfahren Sie, woher Sie den Code dazu bekommen.
  
  Einleitung
  - In diesem ersten Video stellt Ihnen der Trainer Protoype und Scriptaculous sowie die Zielgruppen dieser Frameworks vor.
    
    Vorstellung
    
    03:53
  - Die jeweils letzte stabile Version können Sie über die Adresse http://www.prototypejs.org/download auf Ihren Rechner laden. Sie erhalten eine JavaScript-Datei mit Namen prototype.js. Diese enthält die gesamte Funktionalität des Frameworks. Wenn Sie Prototype verwenden wollen, müssen Sie bloß die geladene JavaScript-Datei in Ihre Webseite einbinden. Dieser Film zeigt Ihnen, wie das geht.
    
    Download und Verwendung
    
    02:18
  - Die Kompatibilität des Frameworks hängt zum Teil von der Version von Prototype ab, aber allgemein sind die Anforderungen für ein Web-Framework relativ niedrig. Der Trainer zeigt Ihnen in diesem Video, welche Abhängigkeiten zu den Browsern bestehen.
    
    Die unterstützten Browser
    
    01:06
  - Die sehr gute und vollständige API-Dokumentation von Prototype steht Ihnen unter http://www.prototypejs.org/api zur Verfügung. Bekommen Sie einen Einblick in diese Dokumentation.
    
    Die API-Dokumentation
    
    01:06
  - Ein paar Vorschläge für geeignete Editoren und IDEs zur Programmierung mit Prototype und Scriptaculous bekommen Sie in diesem Video vom Trainer.
    
    Editoren und IDEs
    
    03:27
- Ein Großteil der Beliebtheit von Prototype basiert darauf, dass einige mächtige, verkürzte Shortcuts bzw. Hilfsmethoden (Utility methods) für oft notwendige JavaScript-Anweisungen zur Verfügung gestellt werden. Im Wesentlichen handelt es sich um Helfermethoden für häufig benötigte Aktionen auf dem DOM.
  
  Utility Methods
  - Shortcuts erleichtern die kompakte Erstellung von JavaScript-Quellcodes erheblich. Dieses Unterkapitel beschäftigt sich mit diesem Thema und gibt Ihnen Aufschluss darüber.
    
    Shortcuts
    - Der Shortcut $() bildet das Rückgrat des gesamten Frameworks. Darüber können Sie ein Element in der Webseite über die ID oder eine DOM-Knotenreferenz als Parameter ansprechen. Die Funktionalität von $() reicht aber über eine reine Kurzschreibweise für document.getElementById() hinaus. Der $()-Methode können Sie beliebig viele Elementreferenzen als Parameter übergeben, um dann die Aktion auf alle Elemente anzuwenden.
      
      $()
      
      05:27
    - Die Funktion $$() nimmt eine beliebige Anzahl von CSS-Selektoren im Stringformat als Parameter und liefert ein Array mit DOM-Elementen als Rückgabewert, die der Selektion entsprechen. Seien Sie auf die Ausführungen des Trainers gespannt.
      
      $$()
      
      01:53
    - Bei $F() handelt es sich im Wesentlichen um einen Shortcut, um über die ID auf den Wert eines Formularfelds zuzugreifen. $F() ist ein Alias für Form.Element.getValue(). Der Trainer erklärt Ihnen die Verwendung in diesem Video.
      
      $F()
      
      00:49
    - Der Trainer demonstriert Ihnen, wie die Methode $A([obj]) eine datenfeldartige Sammlung akzeptiert und das Äquivalent als tatsächliches Array-Objekt zurückgibt. Diese Methode ist ein Alias für die Prototype-Erweiterung Array.from(). Primär kommt $A() zum Einsatz, wenn Sie ein wirkliches Array-Objekt brauchen, aber nur etwas Ähnliches wie eine NodeList oder HTMLCollection zur Verfügung haben. Solche Strukturen werden von verschiedenen DOM-Methoden als Rückgabetyp geliefert.
      
      $A()
      
      02:15
    - Die Methode $H() erstellt ein Hash bzw. Map oder assoziatives Array. Dieser Film gibt Aufschluss über deren Verwendung.
      
      $H()
      
      01:25
    - Mit $R() können Sie ein Objekt erzeugen, das einem Wertebereich entspricht. Dies ist Thema dieses Videos.
      
      $R()
      
      00:50
    - Mit der Funktion $w() wird ein String an den Leerzeichen in ein Array aufgesplittet. Wie Sie am geeignetsten damit umgehen, erfahren Sie in diesem Film.
      
      $w()
      
      00:27
  - Try.these() ist eine verkürzte Prototype-Schreibweise für die Ausnahmebehandlung in JavaScript. Mit Try.these() nehmen Sie eine beliebige Anzahl von Funktionen entgegen. Als Ergebnis erhalten Sie den Rückgabewert der ersten Funktion, die keine Ausnahme erzeugt hat. Der Trainer demonstriert Ihnen in diesem Film, wie das funktioniert.
    
    Ausnahmebehandlung mit Prototype
    
    05:46
  - Die Prototype-Erweiterung document.getElementsByClassName() erlaubt den Zugriff auf alle Elemente in einem Dokument, denen eine bestimmte CSS-Klasse zugewiesen wurde. Bekommen Sie Einblick in dieses Werkzeug.
    
    Die Methode getElementsByClassName()
    
    02:10
- Eine Stärke von Prototype ist sicher die Unterstützung für AJAX. Zu diesem Zweck bietet Prototype einige interessante Objekte an. Sehen Sie mehr dazu in den folgenden Videos.
  
  AJAX mit Prototype
  - Erlernen Sie anhand dieses Films, wie Sie mit Ajax.Request eine AJAX-Anfrage durchführen. Über Ajax.Updater können Sie zudem direkt in einem HTML-Element die Antwort des Servers anzeigen. Seien Sie auf die Ausführungen des Trainers gespannt.
    
    Die AJAX-Objekte von Prototype
    
    02:28
  - Ein praktisches Beispiel zum Nachfordern von Textdateien mit dem Ajax.Updater sehen Sie in diesem Video.
    
    Ajax.Updater
    
    02:41
  - Ein Beispiel für eine periodische AJAX-Anfrage mit Ajax.PeriodicalUpdater erwartet Sie in diesem Film.
    
    Ajax.PeriodicalUpdater
    
    01:32
  - Mit den Methoden toJSON() und evalJSON() unterstützt Prototype die Verarbeitung von JSON, was insbesondere bei AJAX eines der wichtigsten Datenübertragungsformate ist. Dieser Film gibt Ihnen Aufschluss über deren Verwendung.
    
    JSON-Verarbeitung mit Prototype
    
    02:38
- Dieses Kapitel zeigt, dass Ihnen mit Class in Prototype ein Objekt zur Verfügung steht, das mehr oder weniger die Nachbildung der klassenbasierenden OOP in JavaScript darstellt. Sie erstellen damit also JavaScript-Klassen.
  
  Klassen des Frameworks verwenden und neue erzeugen
  - Einige Hintergrundinformationen zum Umgang mit Class beim Erstellen von Klassen stellt Ihnen der Trainer in diesem Video vor.
    
    Einleitung
    
    01:35
  - Die Methode create() dient zum Erstellen einer JavaScript-Klasse und mit addMethods() fügen Sie Methoden einer existierenden Klasse hinzu, die Sie mit Class.create() definiert haben. Dieser Film gibt Aufschluss über die richtige Verwendung.
    
    Die Methoden create() und addMethods()
    
    03:30
  - In der Vererbung greift man gelegentlich aus einer Subklasse auf die Superklasse zu. In Prototype steht Ihnen mit $super() die Möglichkeit zur Verfügung, einen solchen Zugriff zu notieren. Sehen Sie mehr dazu in diesem Video.
    
    Die Vererbungskette im Prototyping und $super()
    
    02:52
  - Eine kurze Übersicht zu wichtigen Klassen des Frameworks und Hinweise, wie Sie die API-Referenz bei der Anwendung verwenden können, erhalten Sie in diesem Film.
    
    Die Klassen des Frameworks
    
    02:13
  - Vorsicht - Prototype entwickelt sich immer weiter und oftmals werden auch alte Codestrukturen nicht mehr funktionieren oder als deprecated erklärt. Der Blick in die Online-Dokumentation ist oftmals zwingend. Der Trainer gibt Ihnen Aufschluss in diesem Video.
    
    Deprecation und Entwicklung
    
    01:42
- Element und Element.Methods stellen in Prototype die elementaren Methoden zum Umgang mit dem DOM zur Verfügung. Das ist einer der zentralen Bestandteile des gesamten Frameworks. Mehr dazu in diesem Kapitel.
  
  Element und Element.Methods
  - Viele der Methoden, die Ihnen über Element zur Verfügung stehen, lassen sich auch mit den Shortcuts von Prototype kompakter schreiben. In diesem Film erhalten Sie eine kurze Einführung in die Methoden von Element.
    
    Einleitung
    
    02:41
  - Die meisten Methoden von Element (und auch die äquivalenten Shortcuts) geben das Element des DOM zurück, auf das sie angewendet werden. Die Methoden können daher meist verkettet werden. Dies eröffnet viele Möglichkeiten für eine sehr kompakte Schreibweise bei DOM-Manipulationen. Der Trainer zeigt Ihnen, wie dies funktioniert.
    
    DOM-Methoden verketten
    
    01:44
  - Die Manipulation des DOM ist ein Schwerpunkt von Prototype. Bei der Erweiterung des DOM ist insbesondere Element.extend() von Bedeutung. Erfahren Sie in diesem Video, wie Sie diese Methode einsetzen können.
    
    Wie Prototype den DOM erweitert
    
    03:28
  - Das Objekt Element können Sie auch zur bequemen Erstellung von neuen Elementen verwenden. Der Trainer führt Ihnen diese Möglichkeit vor.
    
    Element als Konstruktor
    
    02:57
  - Ein Element kann in Prototype Attribute über Element.writeAttribute() erhalten. Sehen Sie selbst, wie das funktioniert.
    
    Element.writeAttribute()
    
    00:58
  - In diesem Abschnitt sehen Sie einige Beispiele, in denen die Prototype-Methoden zur Manipulation der Elemente einer Webseite in der Praxis zur Anwendung kommen.
    
    DOM-Methoden in der Praxis
    - Dieses Beispiel zeigt Ihnen ein ganz einfaches Spiel, bei dem ein Element in der Webseite an der einen Stelle mit remove() weggenommen und an einer anderen Stelle mit insert() wieder eingefügt wird.
      
      Löschen und Einfügen von Elementen im DOM
      
      03:14
    - Dieses Video beinhaltet ein Beispiel, in welchem Sie die Sichtbarkeit eines Elements mit der Methode toggle() verändern können. Dabei wird das Element nicht aus dem DOM entfernt, sondern es wird nur implizit dessen CSS-Eigenschaft für die Sichtbarkeit umgeschaltet, wobei der Aufbau der gesamten Webseite erhalten bleibt.
      
      Elemente ausblenden
      
      02:14
    - Das in diesem Video vorgeführte Beispiel zeigt Ihnen verschiedene Methoden, die im Zusammenhang mit Verwandtschaftsbeziehungen zwischen Elementen eine Rolle spielen und vor allen Dingen die potenziellen Probleme in verschiedenen Browsern aufzeigen.
      
      Ein Beispiel zu Verwandtschaftsbeziehungen
      
      05:41
- Scriptaculous ist eine JavaScript-Bibliothek, die im Wesentlichen visuelle Effekte und interaktive Funktionen zur erweiterten AJAX-Unterstützung bietet und unmittelbar auf Prototype basiert. Folgen Sie aufmerksam den Ausführungen des Trainers.
  
  Scriptaculous
  - Scriptaculous besteht derzeit im Detail aus einem Animations-Framework, Unterstützung für Drag & Drop, ergänzenden Steuerelementen für AJAX, Utilities für den Umgang mit dem DOM sowie Unterstützung für das Unit-Testing. Der Trainer stellt Ihnen dieses Framework vor.
    
    Vorstellung
    
    01:25
  - Dieser Film zeigt Ihnen, dass Sie die jeweils aktuelle Version über die Adresse http://script.aculo.us/ auf Ihren Rechner laden können. Sie erhalten eine komprimierte JavaScript-Bibliothek, die Sie am besten im Webverzeichnis Ihres Webservers extrahieren.
    
    Download und Verwendung
    
    01:40
  - Wo Sie die Dokumentation, Wiki und Demos bekommen und wie Sie diese richtig lesen, erfahren Sie in diesem Video.
    
    Dokumentation
    
    00:54
  - Die Features von Scriptaculous stehen Ihnen zur Verfügung, wenn Sie diese in einem <script>-Tag einbinden und anwenden. Sie können die Effekte aber auch direkt in Eventhandlern einsetzen. Seien Sie auf die Ausführungen des Trainers gespannt.
    
    Grundlegende Anwendung
    
    01:06
  - Eine Demonstration wichtiger und interessanter Animationseffekte wie Faden, Morphen, Ein- und Ausblenden über das Objekt Effect erhalten Sie vom Trainer in diesem Film.
    
    Animationseffekte mit Effect
    
    06:40
  - Scriptaculous stellt als Ergänzung zu Prototype einige visuelle Eingabeelemente zur Verfügung, die speziell für die Ergänzung oder sogar den vollständigen Ersatz von Formularen geeignet sind. Diese können insbesondere (aber nicht nur) im Zusammenhang mit AJAX hilfreich sein. Der Trainer führt Ihnen diese Möglichkeit vor.
    
    Unterstützung für Formulare und AJAX
    
    06:49
  - Das Scriptaculous-Add-on zu Prototype unterstützt recht umfangreich Drag & Drop. Ein ziehbares Objekt erstellen Sie zum Beispiel mit Draggable. Sehen Sie mehr dazu in diesem Video.
    
    Drag & Drop
    
    03:35
  - Eine ganz interessante Technik erwartet Sie in diesem Film. Die von Scriptaculous über Sortable zur Verfügung gestellten Methoden und Anwendungsbeispiele sehen Sie in diesem Film.
    
    Sortieren per Drag & Drop
    
    02:18
  - Über Sound stehen die Methoden disable(), enable() und play() zur Wiedergabe von Tondateien zur Verfügung. Dieses Video gibt Aufschluss über den richtigen Einsatz dieser Funktionen.
    
    Soundunterstützung
    
    01:14
AJAX hat das WWW in den letzten Jahren revolutioniert! AJAX- und Web-Entwickler gieren förmlich nach leistungsfähigen und robusten Frameworks und Toolkits für Rich Internet Applications. Mit dem freien Dojo Toolkit steht ein solches mächtiges, zuverlässiges, erprobtes und dennoch einfach anzuwendendes Werkzeug bereit. Dieses Video-Training versetzt Sie in die Lage, das Dojo Toolkit zur Verbesserung und Optimierung Ihre Web-Applikationen zu nutzen und dabei viel Arbeit und Zeit zu sparen!

Das Dojo-Toolkit
- In diesem ersten Kapitel bekommen Sie einen Überblick über das Dojo-Toolkit und die möglichen Verwendungszwecke. Der Trainer zeigt Ihnen auch, wie Sie das Toolkit auf Ihrem Webserver einrichten.
  
  Einleitung
  - Der Trainer stellt Ihnen in diesem Video das Dojo-Toolkit vor und gibt Ihnen einen ersten Überblick über dessen Aufbau.
    
    Vorstellung
    
    06:38
  - An wen wendet sich das Toolkit und was sind die Voraussetzungen für die erfolgreiche Arbeit mit dem Dojo-Toolkit und diesem Training? Diese Fragen klärt der Trainer in diesem Video.
    
    Voraussetzungen
    
    01:01
  - Einen kurzen Blick auf einige eindrucksvolle, offizielle Highend-Beispiele, die mit dem Dojo-Toolkit erstellt wurden, ermöglicht Ihnen der Trainer in diesem Film.
    
    See it in action
    
    01:44
  - Um das Dojo-Toolkit zu verwenden, müssen Sie es zuerst downloaden und installieren. Dieser Abschnitt zeigt Ihnen, wie das geht.
    
    Download und Installation
    - Woher Sie das Dojo-Toolkit bekommen, erfahren Sie vom Trainer in diesem Video.
      
      How do I get this?
      
      01:01
    - Um mit dem Dojo-Toolkit arbeiten zu können, müssen Sie die eben heruntergeladene Datei in das öffentliche Verzeichnis Ihres Webservers extrahieren. Sehen Sie dem Trainer hierbei über die Schulter.
      
      Das Dojo-Toolkit installieren
      
      02:06
  - Damit Sie vollständig ausgerüstet sind, zeigt Ihnen der Trainer in diesem Unterkapitel, welche Werkzeuge und Add-ons für Sie interessant sein können.
    
    Tools & Programme
    - Erfahren Sie in diesem Video, welche Programme für die Arbeit mit dem Dojo-Toolkit hilfreich sind. Der Trainer stellt Ihnen Firebug, den DOM-Inspector und das Add-on "Webdeveloper" vor.
      
      Die Entwicklungswerkzeuge
      
      04:49
    - Welche Browser werden vom Dojo-Toolkit als Minimalvoraussetzung gefordert? Die Antwort bekommen Sie in diesem Film.
      
      Die Browser-Kompatibilität
      
      02:48
  - In diesem Unterkapitel erfahren Sie, welche Einstellmöglichkeiten Ihnen das Dojo-Toolkit bietet und in welchen Dateien sie sich verstecken.
    
    Konfiguration und Bereitstellung
    - In diesem Film erklärt Ihnen der Trainer die Dateien dojo.xd.js und dojo.js. Des Weiteren erfahren Sie, wie Sie Konfigurationen über den Script-Parameter djConfig vornehmen.
      
      Die Verwaltungszentrale
      
      06:13
    - Nach der Installation auf Ihrem Server können Sie einige Testskripte aufrufen, um zu sehen, ob das Dojo-Toolkit korrekt installiert ist. Dieses Video gibt Aufschluss über die Testmöglichkeiten.
      
      Tests durchführen
      
      01:31
    - Wie sollen Sie das Dojo-Toolkit in Ihre eigenen Webapplikationen einbinden? Über die offiziellen CDN oder eigene Ressourcen? Sie erhalten die Antworten auf diese Fragen in diesem Film.
      
      CDN oder eigene Ressourcen?
      
      01:54
- Sie bekommen in diesem Kapitel die ersten praktischen Anwendungen des Toolkits präsentiert und erhalten nützliche Tipps vom Trainers zur Verwendung von Dojo.
  
  Der Einstieg ins Geschäft
  - Der Trainer zeigt Ihnen in diesem Film das Grundgerüst jeder Dojo-Applikation und den Einstieg über die offizielle Dojo-Dokumentation - insbesondere das "Book of Dojo".
    
    Das Grundgerüst und die Dokumentation
    
    04:11
  - Das Paketsystem des Dojo-Toolkits beinhaltet die Methode require(). Damit können Sie benötigte Ressourcen über eine intelligentere Funktionalität mithilfe eines Modulnamens laden. Sehen Sie auch, was es mit dojoType auf sich hat.
    
    Das Paketsystem, der dojoType und die dojo.require()-Methode
    
    06:53
  - Sie werfen in diesem Video einen genaueren Blick auf die tatsächlich vom Browser verarbeitete Struktur des Quelltextes (mithilfe von Firebug), die ganz extrem von dem tatsächlich geschriebenen Quellcode abweicht, wenn Sie Dojo und vor allen Dingen einen dojoType verwenden.
    
    Der dojoType und das gerenderte Widget
    
    03:38
  - Mit der Methode dojo.addOnLoad() können Sie gewährleisten, dass der darin notierte Code erst dann ausgeführt wird, wenn das DOM einer Webseite korrekt aufgebaut wurde. Insbesondere werden Ihre dort notierten dojo.require()-Anweisungen vollständig ausgeführt und die notwendigen Ressourcen geladen und verarbeitet.
    
    Schutz des DOM - die Methode dojo.addOnLoad()
    
    04:57
  - Mit dojo.byId() gibt es in Dojo eine alternative Schreibweise zu document.getElementById(). Der Aufruf von dojo.byId() gibt den domNode von einem Element zurück. Die Methode dijit.byId() liefert hingegen ein Widget. Sehen Sie mehr dazu in diesem Film.
    
    Die Methoden dojo.byId() und dijit.byId()
    
    01:27
  - Wenn Sie Firebug verwenden, können Sie in der Konsole Testausgaben ausgeben, die das Parsen der Webseite und den Aufbau des DOM in Zusammenhang mit addOnLoad() verdeutlichen. Seien Sie gespannt.
    
    console.log() und die Überwachung des Ladevorgangs
    
    02:38
  - Mit dojo.query() können Sie auf einfache Weise das DOM oder Teile davon parsen und auf eine Auswahl an Knoten daraus zugreifen. Folgen Sie aufmerksam den Ausführungen des Trainers.
    
    DOM-Abfragen mit dojo.query()
    
    02:24
- Selbst das Eventhandling wird mit dem Dojo-Toolkit revolutioniert und vereinfacht. Dieses Kapitel zeigt Ihnen gängige Methoden, um mit Dojo Events zu verwalten.
  
  Das Eventsystem
  - Die konventionelle Ereignisbehandlung bei Webapplikationen ist durch die extrem unterschiedlichen Verhaltensweisen verschiedener Browser äußerst aufwändig. Das Dojo-Toolkit vereinfacht die Ereignisbehandlung immens. Mehr dazu in diesem Film.
    
    Das Problem der konventionellen Ereignisbehandlung
    
    02:52
  - Mittels des Dojo-Eventsystems können Sie ein Ereignis an ein Widget über den <script>-Tag anhängen. Dieser hat in Dojo zur Umsetzung der Ereignisbehandlung den spezifischen MIME-Type dojo/method und er wird in den Tag für das Widget eingeschlossen. Der Trainer erklärt in diesem Film, welche Möglichkeiten Ihnen hierbei zur Verfügung stehen.
    
    Innere Ereignisbehandlung und der MIME-Type dojo/method
    
    01:41
  - In Dojo wird ein Ereignis als beliebiger Funktions- oder Methodenaufruf in JavaScript verstanden. Das hat zur Folge, dass Sie auf jedes Ereignis und solch einen Aufruf reagieren können. Dazu verwendet man in der Regel die Methode dojo.connect().
    
    Ereignisse verbinden
    - In der Methode dojo.addOnLoad() definieren Sie im Allgemeinen eine innere Funktion, in der mit dojo.connect() die Reaktion auf ein Ereignis verknüpft wird. Sehen Sie in diesem Video, wie das funktioniert.
      
      Die Methode dojo.connect()
      
      02:37
    - Im Ereigniskonzept von Dojo können Sie mit connect() auch mehrere Ereignisse miteinander verknüpfen. Der Trainer demonstriert Ihnen diese Vorgehensweise in diesem Video.
      
      Verknüpfen von Ereignissen
      
      01:15
    - Die Abfrage von DOM-Knoten mit dojo.query() lässt sich in Verbindung mit Ereignissen bringen. Sie selektieren über dojo.query() eine gewisse Anzahl von Elementen in einer Webseite und definieren eine einheitliche Reaktion auf ein Ereignis bei all diesen Elementen. Dieser Film gibt Aufschluss darüber.
      
      Ereignisse in Verbindung mit dojo.query()
      
      00:58
- Hinter dem Begriff Dijit versteckt sich ein Widget-System, das unmittelbar auf dem puren Dojo aufsetzt. Die Hauptanwendung liegt darin, dass Sie mit nur ganz wenig (oder sogar ohne) JavaScript und CSS komplexe und leistungsfähige grafische Oberflächen für das Web 2.0 erstellen können. Sehen Sie mehr dazu in den folgenden Filmen.
  
  Das Dijit
  - Wie können Sie Widgets aus dem Dijit erstellen und in eigene Webapplikationen einsetzen? Dieses Unterkapitel gibt Aufschluss darüber.
    
    Widgets erstellen
    - Das Dijit ist sehr einfach für eigene Applikationen zu nutzen. Eine hervorragende Dokumentation (Book of Dojo) mit vielen direkt zu übernehmenden Beispielen samt Live-Vorführung ermöglicht diese leichte Verwendung des Dijit.
      
      Verwenden der Widgets
      
      05:05
    - Sie können mit dem Dijit deklarativ Widgets einer grafischen Oberfläche für das Web 2.0 unter Verwendung spezieller Attribute innerhalb von regulären HTML-Tags erzeugen oder aber auch programmiertechnisch mittels JavaScript. Auf beide Arten haben Sie dieselben Optionen zur Verfügung.
      
      Deklarativ vs programmiertechnisch
      
      02:16
    - Jede Dijit-Komponente verfügt über gewisse Interaktionspunkte, über die Sie diese für Ihre Applikation anpassen können. Es gibt eine Reihe von Attributen und Methoden im Dijit, die nahezu in jedem Widget vorkommen. Der Trainer zeigt Ihnen diese im folgenden Video.
      
      Die API-Referenz
      
      05:46
  - Dijit ist als Bundle mit seinen eigenen CSS-Themen, wie z.B. Tundra, zu verstehen, das eine Reihe von üblichen Designs und Farbschemata für alle Widgets mitbringt und für ein konsistentes Look and Feel sorgt. Daneben sind im Dijit eine Reihe von Layout-Widgets zur Gestaltung einer modernen Web-GUI enthalten.
    
    Das Dijit-Layout
    - Dijit stellt mit seinen verbundenen Themen sicher, dass für die gesamte Weboberfläche ein konsistentes Look and Feel zur Verfügung steht, das sowohl global zugänglich, lokalisierbar als auch barrierefrei ist.
      
      Die CSS-Themen
      
      02:31
    - Der Schlüssel zur Gestaltung einer modernen Web-GUI ist im Dojo-Toolkit das Dijit und dort konkret der Bereich der Layout-Widgets. Erfahren Sie mehr dazu in diesem Video.
      
      Layout mit dem Dijit
      
      05:58
- Das Lesen von Daten von einem Server aus der Applikation heraus unterstützt das Dojo-Toolkit über verschiedene Standardverfahren natürlich auch. Das kann auf unterschiedlichen Abstraktionsebenen erfolgen, die die eigentliche AJAX-Kommunikation weitgehend verbergen und damit viele Probleme der AJAX-Kommunikation im Hintergrund lösen.
  
  AJAX mit dem Dojo-Toolkit
  - Der wohl wichtigste Fall zur Kommunikation mit dem Server erfolgt in Dojo über XMLHttpRequest oder kurz XHR. Dojo stellt verschiedene XHR-Methoden zur Verfügung, um die üblichen HTTP-Übertragungsarten zu unterstützen. Die XHR-Methoden teilen sich eine Reihe von gemeinsamen Parametern. In der Praxis nutzt man fast immer die Methoden dojo.xhrGet() für GET und dojo.xhrPost() für POST.
    
    XHR
    
    03:53
  - Mit Dojo können Sie Daten per GET und POST zum Server senden. Das XHR-System von Dojo abstrahiert den gesamten Vorgang und kompensiert damit eine ganze Reihe von Problemen, die beim manuellen Versenden von Daten per AJAX auftreten können.
    
    Daten per XHR zum Server senden
    
    04:09
  - Mit dem Parameter "sync" können Sie XHR-Anfragen synchronisieren. Erfahren Sie mehr dazu in diesem Video.
    
    AJAX-Anfragen synchronisieren
    
    00:53
- Einer der Hauptgründe für die Beliebtheit von Dojo ist das extrem mächtige Animationssystem mit diversen vorgefertigten Animationen für eine große Anzahl an üblichen Anwendungsfällen. Damit ist es extrem einfach, Ihren eigenen Webprojekten eindrucksvolle, visuelle Effekte hinzuzufügen und damit Ihre Webseite erheblich interessanter zu machen.
  
  Animationen mit dem Dojo-Toolkit
  - Animationen in Dojo verwenden in der Regel ein "magisches Objekt" als einzigen Parameter. Das wichtigste Attribut ist "node". Damit wird der domNode spezifiziert, auf den Ihre Animationen ausgeführt werden sollen.
    
    Ein Grundgerüst
    
    01:45
  - Eine Animation wird mit der Methode play() gestartet. Als Basisanimationen der Basisbibliothek dojo.js gibt es fadeIn() zum Einblenden von Elementen, fadeOut() zum Ausblenden und animateProperty() zum Animieren von Eigenschaften.
    
    Die Basismethoden
    
    02:33
  - Die erweiterten Animationstechniken und Tools von Dojo wurden in ein eigenes Modul ausgelagert: dojo.fx. Damit stehen Ihnen zusätzliche Möglichkeiten zur Verfügung, die Ihnen der Trainer in diesem Video demonstriert.
    
    dojo.fx zur Ergänzung
    
    03:19
  - Ein Animationsobjekt verfügt auch über eine Serie von Ereignissen, über die Sie eine Animation erheblich anspruchsvoller gestalten können. Diese Ereignisse können Sie in Verbindung mit dojo.connect() einsetzen. Sehen Sie mehr dazu in diesem Film.
    
    Animationsereignisse
    
    01:11
  - Das Modul dojo.NodeList-fx ergänzt dojo.query() um einige zusätzliche Methoden, die vor allen Dingen im Rahmen von dojo.fx-Animationen sehr nützlich sein können. Das kann dann sinnvoll sein, wenn Sie eine Gruppe von Knoten haben, die Sie auf einfache Art und Weise manipulieren wollen.
    
    Animationen in Verbindung mit dojo.query()
    
    01:07

Die Techniken, die unter AJAX zusammengefasst werden, bilden die Basis für das so genannte Web 2.0 und der meisten modernen Rich Internet Applikation und damit die Grundvoraussetzung zeitgemäßer interaktiver Webseiten. Prototype ist die Basis für viele Web-Frameworks und das Referenz-Framework des Web 2.0 schlechthin! Das darauf aufbauende script.aculo.us bietet eindrucksvolle visuelle Effekte und Techniken, um einfach und komfortabel Web-Oberflächen zu erstellen, die in allen relevanten Browsern funktionieren. Gerade AJAX- und Web-Entwickler gieren förmlich nach leistungsfähigen und robusten Frameworks und Toolkits für Rich Internet Applications. Mit dem freien Dojo Toolkit steht ein solches mächtiges, zuverlässiges, erprobtes und dennoch einfach anzuwendendes Werkzeug bereit.

Dieses Valuepack bietet das komplette Wissen für alle AJAX- und Webentwickler, die im Web 2.0 zuhause sind: