Kategorien
(Kostenlose) Services Essentials Fortbildung Inspiration Programmierung Showcases Tutorials

Du lernst nie aus: 20+ internationale Online-Schulungsangebote

Glücklicherweise sind die Zeiten vorbei, in denen sich Wissen hinter den Mauern altehrwürdiger Schulen oder in den Tiefen riesiger Bibliotheken verschanzte. Weite Teile der Weltbevölkerung waren auf diese Weise völlig von sämtlichen Bildungsmöglichkeiten abgeschnitten. Das Internet ist angetreten, all das zu verändern. Heutzutage ist die Chance auf Bildung nur die Frage einer funktionierenden Netzverbindung.

Kategorien
Design Dr. Web-Ratgeber Essentials Exklusiv bei drweb.de Fortbildung Programmierung Responsive Design UI/UX Webdesign

Brandneu: Webdesign der Zukunft (E-Book)

In welche Richtung muss ich mich als Webdesigner und Webentwickler bewegen, wenn ich auch in einigen Jahren noch mein Stück vom Kuchen abhaben will? Diese Orientierung bietet dir unser neuestes E-Book mit dem sprechenden Titel Webdesign der Zukunft.

Kategorien
(Kostenlose) Services Essentials Fortbildung Programmierung

Hackr.io sammelt Hunderte von Lernmaterialien für gängige Programmiersprachen

113 Themenbereiche vereint Hackr.io auf seiner Startseite. Darunter findest du jede gängige und weniger gängige Programmiersprache, sowie Datenbank-Technologien und Cloud-Services. Zu jedem der Themenbereiche sammelt die Hackr.io-Community die besten Lernmaterialien, die das weltweite Netz zu bieten hat.

Kategorien
Fortbildung JavaScript & jQuery Programmierung

HTML5 und die Selection-API: Textauswahl und -bearbeitung mit JavaScript

Per JavaScript die Textauswahl abzufragen, ist mit der Methode „getSelection()“ schon länger möglich. Die neue Selection-API erweitert diese Möglichkeit jedoch um einige neue Methoden und Eigenschaften, mit denen die Textauswahl bearbeitet und manipuliert werden kann. Es ist sogar machbar, mehr als einen Bereich eines Dokumentes auszuwählen – was ohne JavaScript nicht funktionieren würde.

selection-api

Auswahl erweitern und Cursor verschieben

Eine Funktion der Selection-API ist, eine Textauswahl zu erweitern oder die Position des Cursors zu verschieben. So ist es mit der Methode „modify()“ möglich, die Auswahl des Nutzers auf das nächste Zeichen, das nächste Wort, den nächsten Satz oder den gesamten Absatz zu erweitern. Die Methode erwartet drei Werte. Der erste gibt die Art der Veränderung an: „extend“ zum Erweitern der Auswahl und „move“ zum Verschieben des Textcursors.

Der zweite Wert gibt die Richtung an. Der Wert „forward“ verändert die Auswahl in Leserichtung, „backward“ verändert sie gegen die Leserichtung. Bei zB deutschen Texten wird bei „forward“ die Auswahl also nach rechts verändert. Bei zB arabischen Texten wird die Auswahl hingegen nach links verändert. Alternativ können auch die Werte „right“ und „left“ genutzt werden. Hier wird die Auswahl unabhängig der Leserichtung in die angegebene Richtung verändert.

Der letzte Wert gibt an, wohin die Auswahl erweitert beziehungsweise der Cursor verschoben werden soll. Möglich sind die Werte „character“, „word“, „line“, „sentence“ und „paragraph“, wobei Firefox die Werte „sentence“ und „paragraph“ nicht unterstützt.

document.addEventListener("click", function() {
  document.getSelection().modify("extend", "forward", "line");
}, false);

Im Beispiel wird eine Auswahl auf eine Zeile erweitert. Dabei erwartet die Methode nicht zwingend, dass ein Text ausgewählt wird, um ihn erweitern zu können. Es genügt, den Cursor an einer Stelle zu platzieren. Wird der Cursor am Zeilenanfang platziert, wird die gesamte Zeile ausgewählt. Wird der Cursor innerhalb der Zeile platziert, wird die Auswahl bis in die nächste Zeile erweitert, so dass die Auswahl immer eine Zeilenlänge lang ist. Damit JavaScript auf eine Cursorplatzierung reagieren kann, wird die Methode innerhalb eines „click“-Events ausgeführt.

selection-api_modify
Auf eine Zeile erweiterte Auswahl

Wird statt „extend“ der Wert „move“ gesetzt, so wird eine vorhandene Auswahl aufgehoben und der Cursor an die entsprechende Stelle verschoben.

document.addEventListener("click", function() {
  document.getSelection().modify("move", "forward", "sentence");
}, false);

Im Beispiel wird der Cursor beim Klick auf einen Text ans Satzende verschoben. Für die Angabe der Cursorposition gelten dieselben Schlüsselwörter wie bei „extend“. Die Cursorplatzierung funktioniert natürlich nur, wenn das Element bearbeitbar ist. Das trifft bei Eingabefeldern zu sowie bei Elementen, welche die Eigenschaft „contenteditable“ besitzen.

Mit der Methode „extend()“ ist es zudem möglich, eine Auswahl auf ein beliebiges Element zu erweitern. Die Methode erwartet zwei Parameter. Der erste gibt das Element an, auf welches die Auswahl erweitert werden soll. Der zweite Parameter gibt an, ob zum Anfang oder Ende des Elementes erweitert werden soll. Der Wert „1“ sorgt dafür, dass die Erweiterung zum Ende erfolgt.

document.addEventListener("click", function() {
  window.getSelection().extend(document.getElementsByTagName("p")[1], 1);
}, false);

Im Beispiel wird eine Auswahl immer zum Ende des zweiten „<p>“-Elements im Dokument erweitert. Wenn also im ersten „<p>“-Element ein Text ausgewählt oder der Cursor dort platziert wird, wird die Auswahl automatisch bis zum Ende des zweiten „<p>“-Elements erweitert. Soll die Erweiterung zum Anfang erfolgen, muss der zweite Parameter der Methode auf „0“ gesetzt werden.

selection-api_extend
Auswahl bis zum Ende des zweiten Absatzes erweitert

Mehrere Bereiche für eine Auswahl erstellen

Dass man zwei verschiedene Textstellen in einem Dokument auswählt, ist eigentlich nicht möglich. Das ist kein spezifisches Problem des Browsers, sondern grundsätzlich nicht vorgesehen. Dennoch gibt es mit der Selection-API genau diese Option, nämlich mehrere unterschiedliche Bereiche einer Auswahl hinzuzufügen – mit der „addRange()“-Methode.

Um einer Auswahl einen neuen Bereich hinzufügen zu können, muss mit „createRange()“ zunächst ein Bereich definiert werden. Diesem wird per „selectNode()“ ein vorhandener Elementknoten aus dem Dokument zugewiesen.

var auswahl = window.getSelection();
var bereich;

for (var i = 0; i < document.getElementsByTagName("strong").length; i++) {
  bereich = document.createRange();
  bereich.selectNode(document.getElementsByTagName("strong")[i]);
  auswahl.addRange(bereich);
}

Im Beispiel werden per „for“-Schleife  alle „<strong>“-Elemente der Auswahl hinzugefügt. Wird die Textauswahl kopiert und beispielsweise in einem Editor eingefügt, werden alle ausgewählten Textstellen eingefügt. Da Leerzeichen in der Regel nicht zur Auswahl gehören, werden die ausgewählten Bereiche ohne Leerzeichen aneinander gereiht eingefügt. Die „addRange()“-Methode läuft derzeit nur im Firefox. Andere Browser markieren lediglich den ersten definierten Bereich.

selection-api_range
Ausgewählte „<strong>“-Elemente

Mit der Methode „getRangeAt()“ ist es möglich, die Inhalte der einzelnen Auswahlbereiche anzusprechen. Die Eigenschaft „rangeCount“ gibt zudem Auskunft über die Anzahl der Bereiche im Dokument.

var ausgabe;

for (var i = 0; i < auswahl.rangeCount; i++) {
  if (i > 0) ausgabe += ", ";
  ausgabe += auswahl.getRangeAt(i);
}

alert(ausgabe);

Im Beispiel werden alle Bereiche einer Variablen hinzugefügt und per Komma voneinander getrennt. Anschließend erfolgt die Ausgabe aller ausgewählten Inhalte in einem Dialogfenster.

Die Methode „removeRange()“ ermöglicht es, einen bestimmten Bereich wieder zu löschen. Ihr wird der zu entfernende Bereich übergeben.

auswahl.removeRange(auswahl.getRangeAt(1));

Im Beispiel wird nur der zweite Bereich der Auswahl entfernt. Mit der Methode „removeAllRanges()“ würden hingegen alle Bereiche des Dokumentes entfernt.

Kindelemente auswählen

Mit der Methode „selectAllChildren()“ lassen sich alle Kindelemente eines Elementes auswählen.

window.getSelection().selectAllChildren(document.getElementsByTagName("body")[0]);

Im Beispiel werden alle Kindelemente des „<body>“-Elements ausgewählt, somit also alle Inhaltselemente des Dokuments.

selection-api_selectallchildren
Ausgewählte Kindelemente

Alternativ können natürlich auch einzelne Absätze ausgewählt werden.

window.getSelection().selectAllChildren(document.getElementsByTagName("p")[0]);

Auswahl entfernen und ausgewählte Inhalte löschen

Um eine Auswahl komplett zu entfernen, verwenden wir die Methode „collapse()“. Sie erwartet zwei Angaben, die dazu dienen, den Textcursor nach der Auswahlentfernung zu platzieren. So muss zunächst das Element angegeben werden, in welches der Cursor platziert werden soll. Zusätzlich wird angegeben, ob der Cursor am Anfang des Elements („0“) oder am Ende („1“) platziert werden soll.

document.addEventListener("click", function() {
  window.getSelection().collapse(document.getElementsByTagName("p")[0], 1);
}, false);

Im Beispiel wird die Auswahl entfernt und der Cursor am Ende des ersten „<p>“-Elementes platziert. Die Cursorplatzierung funktioniert natürlich auch hier nur bei Elementen, die bearbeitbar sind.

Statt nur die Auswahl zu löschen, ist es mit „deleteFromDocument()“ möglich, den ausgewählten Inhalt aus der DOM-Struktur des Dokumentes zu löschen.

document.addEventListener("click", function() {
  window.getSelection().deleteFromDocument();
}, false);

Die Methode „deleteFromDocument()“ läuft in allen gängigen Browsern, auch im Internet Explorer. Während Chrome und Internet Explorer das Löschen ganzer Elemente erlauben, ist es im Firefox nur möglich, Texte innerhalb eines Elementes zu löschen.

Browserunterstützung

Grundsätzlich unterstützen alle großen Browser die Selection-API – allerdings nicht im selben Umfang. Leider ist das Verhalten der einzelnen Browser, wie im Beispiel von „deleteFromDocument()“, teils recht unterschiedlich.

(dpe)

Kategorien
Fortbildung Inspiration Programmierung Tutorials

HTML5 und die Web-Audio-API, Teil 2: Wir erstellen ein visuelles Audiospektrum per Canvas

Die neue Web-Audio-API mit ihren verschiedenen Möglichkeiten der Audiowiedergabe und -manipulation wurde hier bereits vorgestellt. Dabei haben wir einige der interessantesten Funktionen bereits vorgestellt. Ein recht komplexes Feld haben wir aber einem eigenem Artikel, nämlich diesem hier, vorbehalten. Denn, zusammen mit den Canvas-Zeichenfunktionen von JavaScript lässt sich damit auch ein visuelles Audiospektrum einer Wiedergabe realisieren.

audiocontext_spektrum

HTML-Elemente und „AudioContext“ bereitstellen

Zunächst einmal werden ein Audioelement sowie eine Leinwand für die JavaScript-Zeichenfunktion ausgezeichnet.

<audio src="musik.mp3" controls="controls"></audio>
<canvas width="300" height="250"></canvas>

Die Steuerung der Wiedergabe wird im Beispiel dem Audioelement überlassen, indem die Steuerleiste („controls“) eingeblendet wird. Per JavaScript wird die Wiedergabe der MP3-Datei abgegriffen, um die nötigen Informationen zur Darstellung eines Audiospektrums zu erhalten.

var musik = new AudioContext();
var quelle = musik.createMediaElementSource(document.getElementsByTagName("audio")[0]);
var analyse = musik.createAnalyser();

quelle.connect(analyse);
analyse.connect(musik.destination);

Nachdem im Beispiel das „AudioContext“-Objekt erstellt („musik“) und die Quelle („quelle“) definiert wurden, erzeugen wir mit „createAnalyser()“ eine sogenannte Frequenzanalyse, die das Zeitsignal der Wiedergabe analysiert und interpretiert. Die Werte dieser Analyse werden zur visuellen Darstellung des Audiospektrums genutzt.

Per „connect()“ verknüpfen wir die Quelle und die Analyse mit dem „AudioContext“-Objekt. Im nächsten Schritt legen wir fest, wie detailliert die Werte der Frequenzanalyse sein sollen. Dazu wird die Größe der „Fast Fourier Transformation“ (FFT) definiert. Per FFT schlüsseln wir das Zeitsignal der Wiedergabe in seine Frequenzen auf. Mit der Eigenschaft „fftSize“ wird angegeben, wie detailliert die Aufschlüsselung sein soll. Die Eigenschaft erwartet einen Wert zwischen 32 und 2048, wobei dieser immer eine Potenz von 2 sein muss.

analyse.fftSize = 64;
var frequenzdaten = new Uint8Array(analyse.frequencyBinCount);

Anschließend erstellen wir ein Array („frequenzdaten“), dem die Werte der Frequenzanalyse in ganzzahligen 8-Bit-Werten zugewiesen werden. Die Länge des Arrays wird per „frequencyBinCount“ abgerufen und festgelegt. Der Wert entspricht immer der Hälfte von „fftSize“ und somit der Anzahl der Balken, die für das Audiospektrum gezeichnet werden sollen. Da „fftSize“ im Beispiel auf 64 gesetzt wurde, stellt das Audiospektrum 32 Balken dar.

Optional gibt es noch die Eigenschaft „smoothingTimeConstant“. Sie gibt an, wie weich die Frequenzsprünge sein sollen. Die Eigenschaft erwartet einen Wert zwischen 0 und 1, wobei der Wert 0 für eine harte und somit sehr ruckelige Darstellung des Audiospektrums steht. Je mehr sich der Wert 1 nähert, je weicher und fließender ist die Bewegung im Audiospektrum. Der Standardwert liegt bei 0,8.

analyse.smoothingTimeConstant = 0.85;

Außerdem gibt es noch die optionalen Eigenschaften „minDecibels“ und „maxDecibels“, mit denen ein Mindest- und Höchstwert für die darzustellenden Dezibelwerte angegeben werden kann.

Audiospektrum programmieren

Im nächsten Schritt programmieren wir die eigentliche Visualisierung der Frequenzdaten als animiertes Audiospektrum. Dazu werden dem „<cancas>“-Element der 2D-Zeichenkontext zugewiesen und die Breite und Höhe der Leinwand ermittelt.

var leinwand = document.getElementsByTagName("canvas")[0].getContext("2d");
var leinwand_breite = document.getElementsByTagName("canvas")[0].offsetWidth;
var leinwand_hoehe = document.getElementsByTagName("canvas")[0].offsetHeight;

Die Leinwandgröße benötigen wir, um die Größe des Audiospektrums der Leinwand anzupassen. Über die Funktion „audiospektrum()“ zeichnen wir das Audiospektrum auf die Leinwand. Aufgerufen wird die Funktion per „requestAnimationFrame()“, sodass der Browser die Darstellung bei jeder Aktualisierung der Seitenanzeige neu zeichnet.

function audiospektrum() {

  analyse.getByteFrequencyData(frequenzdaten);
  leinwand.clearRect(0, 0, leinwand_breite, leinwand_hoehe);

  for (var i = 0; i < frequenzdaten.length; i++) {
    var balken_x = Math.round(leinwand_breite / frequenzdaten.length) * i;
    var balken_breite = Math.round(leinwand_breite / frequenzdaten.length) - 1;
    var balken_hoehe = leinwand_hoehe / 100 * Math.round(-frequenzdaten[i] / 255 * 100);
    var farbe_rot = frequenzdaten[i];
    var farbe_gruen = 255 - frequenzdaten[i];
    leinwand.fillStyle = "rgb(" + farbe_rot + ", " + farbe_gruen + ", 0)";
    leinwand.fillRect(balken_x, leinwand_hoehe, balken_breite, balken_hoehe);
  }

  window.requestAnimationFrame(audiospektrum);

}

window.requestAnimationFrame(audiospektrum);

Zunächst werden im Beispiel die jeweils aktuellen Frequenzdaten per „getByteFrequencyData()“ abgerufen. Per „clearRect()“ leeren wir die Leinwand bei jedem Funktionsaufruf.

Über eine „for“-Schleife berechnen wit für jeden Balken des Audiospektrums die X-Position des Balkens („balken_x“), die Breite („balken_breite“) sowie die Höhe („balken_hoehe“). Die Werte für die Höhe sind negativ, da die Balken vom unteren Leinwandrand nach oben wachsen. Die Y-Position entspricht immer der Höhe der Leinwand. Die jeweiligen Frequenzwerte, die per „frequenzdaten[i]“ verfügbar sind, können zwischen 0 und 255 liegen. Im Beispiel wird der Wert für die Höhe der Leinwand umgerechnet.

Die Balkenfarbe soll abhängig sein von der Balkengröße und zwischen Grün („farbe_gruen“) und Rot („farbe_rot“) variieren. Kleine Balken sind dabei grün und große Balken rot dargestellt. Da die Farbwerte ebenso wie die Frequenzwerte zwischen 0 und 255 liegen, lassen sich die Frequenzwerte einfach für die Farbdefinition einsetzen.

Per „fillStyle()“ definieren wir die Farbe des zu zeichnenden Balkens. Anschließend wird per „fillRect()“ der Balken mit den vorher berechneten Werten gezeichnet.

audiocontext_spektrum_beispiel
Audiospektrum in Aktion während der Wiedergabe

Sobald die Audiowiedergabe startet, wird das dazugehörige Audiospektrum auf die Leinwand des „<canvas>“-Elementes gezeichnet. Sobald die Wiedergabe endet, verschwinden die Balken wieder. Das Audiospektrum reagiert auch bei Veränderung durch den Lautstärkeregler in der Steuerleiste des Audioelements.

Alternative Darstellungsformen

Mit relativ wenig Aufwand lässt sich die Darstellungsform des Audiospektrums verändern. Da innerhalb der „for“-Schleife die Zeichenmethoden untergebracht sind, genügt es, dort ein paar Änderungen vorzunehmen für ein anderes Aussehen.

for (var i = 0; i < frequenzdaten.length; i++) { 
  var kreis_radius = leinwand_hoehe / 100 / 2 * (i / frequenzdaten.length * 100);
  var farbe_rot = frequenzdaten[i];
  var farbe_gruen = 255-frequenzdaten[i];
  var farbe_alpha = 1 * (frequenzdaten[i] / 255);
  leinwand.beginPath();
  leinwand.strokeStyle = "rgba(" + farbe_rot + ", " + farbe_gruen + ", 0, " + farbe_alpha + ")";
  leinwand.lineWidth = 5 * (frequenzdaten[i] / 255);
  leinwand.arc(leinwand_breite / 2, leinwand_hoehe / 2, kreis_radius, 0, 2 * Math.PI, false);
  leinwand.stroke();
 }

Im Beispiel stellen wir statt Balken Kreise zur Visualisierung dar. Dazu wird der Radius der Kreise („kreis_radius“) berechnet. Der Ausschlag definiert sich, wie auch beim Balkenspektrum über die Farbe, wobei hier noch ein zusätzlicher Alphakanal („farbe_alpha“) hinzukommt. Per „strokeStyle()“ bringen wir hier eine Rahmen-, aber keine Füllfarbe ein.  Außerdem wird die Linienstärke der Kreise („lineWidth“) ebenfalls dem jeweiligen Pegelausschlag angepasst. Per „arc()“ zeichnen wir den Kreis, mit „stroke()“ erhält er seine Farbe.

audiocontext_spektrum_beispiel_alternativ
Alternative Darstellungsform mit Kreisen statt Balken

Das hier dargestellte Audiospektrum ist nur ein relativ simples Beispiel. Es können natürlich auch wesentlich komplexere Visualisierungen entwickelt werden. Dennoch denke ich, Sie konnten hier einen soliden Einstieg in das Thema mitnehmen. Habe ich etwas Wichtiges übersehen?

(dpe)

Kategorien
Fortbildung Programmierung

HTML5 und die Web-Audio-API: Audiodateien abspielen, manipulieren und Klänge erzeugen

Mit HTML5 und dem „<audio>“-Element ist es möglich, Audiodateien ganz ohne Plug-in im Browser abzuspielen. Mit der neuen Web-Audio-API kann man nun Audiodateien direkt per JavaScript laden oder eigene Klänge erzeugen. Außerdem kann die API die Wiedergabe von Audiodateien manipulieren, indem zum Beispiel Frequenzbereiche verändert werden. Wir werfen einen genaueren Blick auf die musikalische Schnittstelle.

audiocontext

Anwendungsfall 1: Wiedergabe einer Audiodatei

Zunächst einmal muss festgelegt werden, welche Quelle für die Audiowiedergabe genutzt werden soll. Wir könnten eine Audiodatei direkt per JavaScript laden oder eine per „<audio>“-Element bereits definierte Quelle nutzen. In jedem Fall muss ein „AudioContext“ bereitgestellt werden. Anschließend wird die Quelle definiert.

var musik = new AudioContext();
var quelle = musik.createBufferSource();

Im Beispiel soll eine Audiodatei direkt per JavaScript geladen werden. Dazu weisen wir dem „AudioContext“-Objekt („musik“) die Methode „createBufferSource()“ zu. Im nächsten Schritt wird die Audiodatei mittels „XMLHttpRequest()“ geladen.

var xhr = new XMLHttpRequest();

xhr.open("GET", "musik.mp3", true);
xhr.responseType = "arraybuffer";

xhr.addEventListener("load", function() {
  quelle.buffer = musik.createBuffer(xhr.response, false);
  quelle.connect(musik.destination);
  quelle.start(0);
}, false);

xhr.send();

Der Aufruf per „XMLHttpRequest()“ ist notwendig, um Zugriff auf die Audiodatei zu erlangen. Wichtig ist, dass der „responseType“ den Wert „arraybuffer“ besitzt. Nur so kann die Antwort des Requests – also der Inhalt der Audiodatei – korrekt behandelt werden. Im Beispiel wird damit die Datei „musik.mp3“ geladen. Innerhalb des Event-Listeners wird der Inhalt der Audiodatei über die Methode „createBuffer()“ der Audioquelle („quelle“) als Buffer zugewiesen.

Die Quelle verbinden wir nun noch per „connect()“ mit dem „AudioContext“-Objekt. Im letzten Schritt wird mit der Wiedergabe per „start()“ begonnen. Die Zahl innerhalb der „start()“-Methode gibt die Zeit in Sekunden an, nach der die Wiedergabe beginnen soll. Bei einem Wert größer Null wird die Wiedergabe erst nach Ablauf der angegebenen Sekunden gestartet; ansonsten beginnt sie sofort.

Anwendungsfall 2: Eigene Klänge erzeugen

Statt eine Audiodatei wiederzugeben, ist es mit der Web-Audio-API auch möglich, einen eigenen Klang zu erzeugen. Hierzu wird die Methode „createOscillator()“ genutzt.

var musik = new AudioContext();
var quelle = musik.createOscillator();

quelle.frequency.value = 440;
quelle.type = "sine";
quelle.connect(musik.destination);
quelle.start(0);

Auch in diesem Beispiel erstellen wir zunächst ein „AudioContext“-Objekt und definieren eine Quelle. Die Quelle ist in diesem Fall jedoch keine Bufferquelle, sondern ein Oszillator. Über die Eigenschaft „frequency“ geben wir eine Frequenz in Hertz an, wobei „type“ die Art der Frequenzschwingung bezeichnet. Neben einer Sinusschwingung („sine“) sind Rechteckschwingung („square“), Dreieckschwingung („triangle“) und Kipp- beziehungsweise Sägezahnschwingung („sawtooth“) möglich.

Per „connect()“ wird die Quelle wieder dem „AudioContext“-Objekt zugewiesen. Da in diesem Beispiel keine Datei geladen werden muss, ist der Einsatz von „XMLHttpRequest()“ nicht nötig. Per „createOscillator()“ generierte Klänge spielen solange, bis sie per „stop()“ angehalten werden. Während des Abspielens ist es jedoch möglich, die Frequenz zu verändern.

Statt eine feste Frequenz anzugeben, können Sie also per „setTimeout()“ die Frequenz während der Wiedergabe verändern.

var quelle_frequenz = 100;
var quelle_frequenz_richtung = 1;

window.setTimeout("frequenzen()", 10);

function frequenzen() {
  if (quelle_frequenz_richtung == 1) {
    quelle_frequenz += 1;
    if (quelle_frequenz > 200) quelle_frequenz_richtung = -1;
  } else {
    quelle_frequenz -= 1;
    if (quelle_frequenz < 100) quelle_frequenz_richtung = 1;
   }
   quelle.frequency.value = quelle_frequenz;
   window.setTimeout("frequenzen()", 10);
}

Im Beispiel wird eine Frequenz bei 100 Hertz beginnend jede Hundertstelsekunde um ein Hertz noch oben verändert, bis sie 200 Hertz erreicht hat. Anschließend wird die Frequenz auf gleichem Wege reduziert. Diese Frequenzveränderung wird im Beispiel als Dauerschleife abgespielt.

Natürlich können auch mehrere Quellen gleichzeitig spielen. Für jedes „AudioContext“-Objekt lassen sich beliebig viele Quellen definieren und wiedergeben. Wichtig ist, dass jede einzelne Quelle per „start()“ startet.

quelle1.musik.createOscillator();
quelle2.musik.createOscillator();

quelle1.frequency.value = 250;
quelle2.frequency.value = 500;

quelle1.connect(musik.destination);
quelle2.connect(musik.destination);

quelle1.start(0);
quelle2.start(1);

Im Beispiel werden zwei Quellen, die unterschiedlich definiert sein können – zum Beispiel per „createOscillator()“ und „createBufferSource()“ –, dem  „AudioContext“-Objekt zugewiesen. Anschließend startet die Wiedergabe, wobei die zweite Quelle eine Sekunde später beginnt.

Wiedergabe manipulieren

Statt eine Audiodatei oder einen Klang nur wiederzugeben, bietet die Web-Audio-API mehrere Methoden, um die Wiedergabe zu manipulieren. So können biquadratische Filter („createBiquadFilter()“) auf die Wiedergabe angewendet werden. Diese Filter erlauben die Dämpfung bestimmter Frequenzbereiche.

Tiefpassfilter („lowpass“) dämpfen Frequenzen oberhalb einer gesetzten Grenze, Hochpassfilter („highpass“) dämpfen Frequenzen unterhalb einer Grenze. Bei Bandbreitenfilter („bandpass“) werden Frequenzen außerhalb einer Frequenzbandbreite abgeschwächt. Darüber hinaus gibt es Filter zur Anhebung und Absenkung von Tiefen beziehungsweise Höhen („lowshelf“ und „highshelf“) für bestimmte Frequenzen und einen Filter, der Tiefen und Höhen innerhalb eines Frequenzbereich anhebt und absenkt („peaking“).

Die Methode „createBiquadFilter()“ ähnelt sehr der „createOscillator()“-Methode. Neben der Eigenschaft „frequency“ gibt es für einige Filter noch die zusätzliche optionale Eigenschaft „Q“, welche die Qualität des Filters angibt. Beim Tiefpassfilter wird über die Eigenschaft definiert, wie stark die umliegenden Frequenzen berücksichtigt werden sollen. Erlaubt sind Werte zwischen 0,1 und 1000, wobei 1 der Standardwert ist.

var musik = new AudioContext();
var quelle = musik.createOscillator();
var filter = musik.createBiquadFilter();
quelle.frequency.value = 500;
quelle.type = "sine";

filter.frequency.value = 250;
filter.Q.value = 2;
filter.type = "lowpass";

quelle.connect(filter)
filter.connect(musik.destination);
quelle.start();

Im Beispiel wird ein Tiefpassfilter auf Frequenzen oberhalb von 250 Hertz angewendet. Damit der Filter auch zum Einsatz kommt, muss er per „connect()“ dem „AudioContect“-Objekt zugewiesen werden. Natürlich können auch mehrere Filter angewendet werden. Die „connect()“-Methode sieht vor, dass alle Audioknoten, die erzeugt werden, quasi in Reihe miteinander verbunden werden.

quelle.connect(filter1);
filter1.connect(filter2);
filter2.connect(filter3)
filter3.connect(musik.destination);

Im Beispiel wird die Quelle zunächst mit „filter1“ verbunden. Dieser wird mit „filter2“ und dieser wiederum mit „filter3“ verbunden. Der dritte Filter wird schließlich mit dem „AudioContect“-Objekt verbunden.

Es gibt eine Reihe weiterer Möglichkeiten, um die Wiedergabe zu manipulieren. Mit „createConvolver()“ fügt man der Wiedergabe einen Nachhall hinzu. Mit „createChannelSplitter()“ und „createChannelMerge()“ werden Audiokanäle separiert beziehungsweise zusammengefügt. Außerdem lässt sich mit „createDynamicsCompressor()“ ein Kompressor einrichten, welcher die Lautstärkespitzen abschwächt.

Wiedergabe eines „<audio>“-Elementes

Statt eine Audiodatei direkt per JavaScript zu laden, erlaubt die Web-Audio-API auch, auf ein „<audio>“-Element zuzugreifen.

var musik = new AudioContext();
var quelle = musik.createMediaElementSource(document.getElementsByTagName("audio")[0]);

Statt „createBufferSource()“ wird in diesem Fall die Methode „createMediaElementSource()“ verwendet. Der Methode wird das jeweilige „<audio>“-Element per „getElementsByTagName()“ oder anderen ähnlichen Methoden zugewiesen.

Anschließend kann die Quelle mit den vorgestellten Möglichkeiten manipuliert werden. Eine Wiedergabe per „quelle.start()“ ist hierbei jedoch nicht möglich. Die Wiedergabe wird entweder über die Steuerleiste des „<audio>“-Elementes gestartet oder über die JavaScript-Methode „play()“ für die Steuerung des „<audio>“-Elementes.

document.getElementsByTagName("audio")[0].play();

Browserunterstützung

Die Web-Audio-API wird bereits seit Chrome in der Version 11 unterstützt. Der in älteren Versionen verwendete Vendor-Präfix ist mittlerweile nicht mehr nötig. Außerdem unterstützen Firefox ab Version 25 und Opera ab Version 15 die API. Der Internet Explorer unterstützt die API derzeit noch nicht.

Links zum Beitrag

(dpe)

Kategorien
Fortbildung Programmierung

HTML5: So blenden Sie mit der Pointer-Lock-API den Mauszeiger bei Bedarf einfach aus

Der Browser wird mehr und mehr zum Ort für Spiele. Dank HTML5 und den neuen JavaScript-APIs lassen sich komplexe und anspruchsvolle Anwendungen realisieren. Dabei ist der Mauszeiger nicht immer der richtige Begleiter. Vor allem, wenn die Steuerung per Tastatur erfolgt, stört der Mauszeiger in der Regel. Daher sorgt die neue Pointer-Lock-API dafür, dass er bei Bedarf einfach ausgeblendet werden kann.

pointer-lock-api

Pointer-Lock-API: Einfaches Aus- und Einblenden per Klick-Event

Mit der Methode „requestPointerLock()“, die einem beliebigen Element zugewiesen werden kann, wird der Browser aufgefordert, den Mauszeiger auszublenden. Der Browser kommt dieser Aufforderung jedoch nur dann nach, wenn sie durch eine Aktion des Nutzers erfolgt. Das bedeutet, es ist nicht möglich, den Mauszeiger bereits beim Laden einer Seite auszublenden. Daher bietet es sich an, per „click“-Event die Methode auszuführen.

document.getElementsByTagName("canvas")[0].addEventListener("click", function() {
  this.requestPointerLock();
}, false);

Im Beispiel wird per Klick auf ein „<canvas>“-Element der Mauszeiger ausgeblendet. Ähnlich wie bei der Fullscreen-API, die den Vollbildmodus des Browsers einschaltet, wird auch bei der Pointer-Lock-API automatisch ein Hinweis eingeblendet, welcher darauf aufmerksam macht, dass der Mauszeiger deaktiviert wurde. Das Fenster weist ebenfalls darauf hin, dass per Drücken der Escape-Taste der Mauszeiger wieder eingeblendet werden kann.

pointer-lock-api_hinweisfenster
Hinweis im Chrome

Während der Mauszeiger deaktiviert ist, bleibt er dort stehen, wo er zuletzt sichtbar war. Bewegungen mit der Maus bleiben also unberücksichtigt. Das heißt auch, dass es nicht möglich ist, den deaktivierten Mauszeiger aus dem Browserfenster zu bewegen. Mausklicks hingegen werden weiterhin berücksichtigt.

Um den Mauszeiger wieder einzublenden, wird die Methode „exitPointerLock()“ aufgerufen. Zusammen mit der Eigenschaft „pointerLockElement“ kann per Klick auf ein Element der Mauszeiger aus- und wieder eingeblendet werden. Ist der Mauszeiger ausgeblendet, besitzt „pointerLockElement“ als Wert das DOM-Element, auf welches die Pointer-Lock-API angewendet wurde. Andernfalls ist der Wert „null“. Per „pointerLockElement.nodeName“ ist es beispielsweise möglich, den Elementnamen des Pointer-Lock-Elements abzufragen – in diesem Fall würde „CANVAS“ als Wert wiedergegeben.

document.getElementsByTagName("canvas")[0].addEventListener("click", function() {
  if (document.pointerLockElement == null) {
    this.requestPointerLock();
  } else {
    document.exitPointerLock();
  }
}, false);

Im Beispiel wird abgefragt, ob „pointerLockElement“ den Wert „null“ hat. Dadurch wird festgestellt, ob der Mauszeiger aktiviert oder deaktiviert ist. Entsprechend werden „requestPointerLock()“ oder „exitPointerLock()“ ausgeführt. Anders als „requestPointerLock()“ ist für das Ausführen von „exitPointerLock()“ keine Aktion des Nutzers nötig. Die Methode muss also nicht zwingend per „click“-Event starten.

Während die Methode „requestPointerLock()“ einem beliebigen Element zugewiesen werden kann, muss „exitPointerLock()“ immer „document“ zugewiesen sein. Da die Pointer-Lock-API noch recht neu ist, sollte der jeweilige Browser-Präfix vorangestellt werden – also etwa „webkitRequestPointerLock()“ und „webkitExitPointerLock()“.

Pointer-Lock-API Advanced: Bewegung des Mauszeigers abfragen

Die Pointer-Lock-API bringt zwei neue Eigenschaften mit, welche die Bewegung der Maus abfragen. Bisher ließen sich bereits mit den Event-Eigenschaften  „clientX“ und „clientY“ die Koordinaten des Mauszeigers innerhalb des Browserfensters ermitteln. Die neuen Eigenschaften „movementX“ und „movementY“ ermitteln die Bewegung des Mauszeigers.

document.addEventListener("mousemove", function(e) {
  document.title = e.clientX + " " + e.movementX;
}

Im Beispiel wird per „mousemove“-Event eine Funktion ausgeführt, welche die jeweiligen Werte für „clientX“ und „movementX“ in den Dokumententitel schreibt. Während „clientX“ die jeweilige Mausposition ausgibt, gibt „movementX“ die Bewegung der Maus auf der X-Achse in Relation zum letzten Ausführen der Funktion aus. Je schneller die Maus auf der X-Achse bewegt wird, desto größer ist der Wert für „movementX“. Während Bewegungen nach rechts (für „movementX“) und unten (für „movementY“) jeweils eine positive Zahl ergeben, wird bei Bewegungen nach links und oben jeweils eine negative Zahl ausgegeben. Wird die Maus gar nicht bewegt, wird 0 wiedergegeben.

Da sich die Position des ausgeblendeten Mauszeigers nicht ändert, bleiben auch die Werte für „clientX“ und „clientY“ unverändert. Sie behalten die Werte, die sie zu dem Zeitpunkt hatten, als der Mauszeiger deaktiviert wurde. Die Eigenschaften „movementX“ und „movementY“ können losgelöst von der Pointer-Lock-API eingesetzt werden – also bei sichtbarem Mauszeiger.

Auch bei den neuen Eigenschaften sollten die ensprechenden Vendor-Präfixe vorangestellt werden – etwa „webkitMovementX“ und „webkitMovementY“.

Pointer-Lock-API for Runaways: auf Statusänderungen und Fehler reagieren

Für die Pointer-Lock-API gibt es zwei Event-Listener. Der Listener „pointerlockchange“ führt immer dann eine Funktion aus, wenn der Mauszeiger aus- oder eingeblendet wird.

document.addEventListener("pointerlockchange", function() {
  if (document.pointerLockElement == null) {
    alert("Der Mauszeiger wurde eingeblendet.");
  } else {
    alert("Der Mauszeiger wurde ausgeblendet.");
  }
}, false);

Im Beispiel wird bei jedem Aus- beziehungsweise Einblenden ein Dialogfenster ausgegeben. Mit der Eigenschaft „pointerLockElement“ stellen wir fest, welcher Status gerade eingetreten ist. Je nach Status erfolgt eine entsprechende Meldung.

Mit dem zweiten Event-Listener „pointerlockerror“ können wir auf einen Fehler beim Aus- oder Einblenden des Mauszeigers reagieren. Wie anfangs bereits erwähnt, blendet der Browser den Mauszeiger nur dann aus, wenn die Methode „requestPointerLock()“ per „click“-Event ausgeführt wird. Rufen wir „requestPointerLock()“ hingegen per „load“-Event auf, verweigert der Browser das Ausblenden. In eben diesem Fall wird das Event „pointerlockerror“ aufgerufen.

document.addEventListener("pointerlockerror", function() {
  alert("Der Mauszeiger konnte nicht ausgeblendet werden.");
}, false);

Auch für „pointerlockchange“ und „pointerlockerror“ gibt es entsprechende Vendor-Varianten – so etwa „webkitpointerlockchange“ und „webkitpointerlockerror“.

Browserunterstützung

Die Pointer-Lock-API wird derzeit von den Desktop-Versionen des Chrome und Firefox unterstützt. Mobile Browser unterstützen die API bislang überhaupt nicht, auch nicht die mobilen Versionen des Chrome und des Firefox. Da die API hauptsächlich im HTML5 Gaming zum Einsatz kommen dürfte, wiegen diese Einschränkungen nicht allzu schwer. Die Bereitschaft, einen bestimmten Browser für das gewünschte Spiel verwenden, darf wohl als recht hoch eingeschätzt werden.

(dpe)

Kategorien
Fortbildung Programmierung

GA Dash: Newcomer im Online-Learning bringt Newcomern kostenlos HTML5 bei

Online-Schulungsangebote erlauben den Kenntnisgewinn zu den eigenen Bedingungen. Interaktive Kurse sind nie zu schnell oder zu langsam. Und sie sind auch nie uninteressant, wie so manches, was man noch von früher aus der Schule in Erinnerung hat. Auf dem Markt der Onlinekurse tummeln sich eine ganz beachtliche Zahl von Anbietern. Gerade dieser tage erweitert sich der illustre Kreis um ein Angebot aus New York, das sich gezielt an Einsteiger im Webdesign richtet. Es hört auf den Namen Dash, stammt vom konventionellen Schulungsanbieter General Assembly und steht komplett kostenlos zur Verfügung.

dash-landing-page

General Assemby: Bringt Menschen das Coden und vieles andere bei (in New York)

General Assembly offeriert ein breites Angebot an Kursen, Workshops und Veranstaltungen. Die Bandbreite reicht von Fragen geschäftlicher Grundlagen über Marketing bis hin zu Design- und Entwicklungsthemen. Der Haken an diesem durchaus beachtlichen Portfolio ist, dass die Kurse alle in New York stattfinden. Und das ist bekanntlich für die allermeisten Menschen nicht eben so zu erreichen. Zur Ergänzung, aber auch zur Alleinnutzung, stellt General Assembly eine Produktreihe namens Front Row zur Verfügung.

general-assembly

Homepage des Zuhauses von Dash – General Assembly

Front Row ist eine Bibliothek von On-Demand Videos und interaktiven Live-Streams, zusammengestellt zu vollwertigen Onlinekursen, die klar umgrenzte Themen abarbeiten. Diese Onlinekurse können einzeln für relativ schmales Geld oder im Rahmen einer Flatrate mit Zugriff auf alle bestehenden Kurse und alle, die noch kommen werden ;-), gebucht werden. Die Bibliothek wächst nach Aussage von General Assembly im wöchentlichen Rhythmus.

Dash: Ursprünglich als Hilfsinstrument für die Kursteilnehmer in NYC gedacht

GA Dash war ursprünglich nur als Lernhilfe für die Studenten der NYC-Kurse gedacht und entwickelt worden. Diese fanden aber die Lernumgebung offenbar so gut, dass sie sie rege mit anderen teilten und so die Nachfrage von außen immer stärker wurde. So jedenfalls erzählt es General Assembly. Jetzt jedenfalls steht das Tool öffentlich zur Verfügung.

Dash arbeitet projektbasiert. Die derzeit vier Projekte arbeiten sich von den absoluten Grundlagen in HTML rauf zu Problemstellungen, die bei der Entwicklung einer Website für kleine Unternehmen gang und gäbe sind. Sehr tiefgehend sind die einzelnen Kurse nicht. In wenigen Tagen kann man die Themen bearbeitet haben. Das vierte, etwas weniger schmalspurige Projekt, in welchem man einen Roboter aus purem CSS erstellt, ist nur rudimentär verfügbar. Angesichts des ansonsten großen Portfolios an Kursen und Know-How dürfte indes kein Zweifel daran bestehen, dass die Zahl der Projekte zukünftig durchaus schnell wachsen wird.

Dash kann komplett kostenfrei genutzt werden, erfordert aber eine Registrierung, die via Twitter-OAuth oder per E-Mail erfolgen kann. Ich verwendete problemfrei Twitter und fand mich in der Übersicht der Projekte wieder.

dash-available-projects

Hier entschied ich mich für den Start ganz unten, mit dem Projekt 1. Hier soll man lernen, wie man eine persönliche Website baut.

Die Lernumgebung ist dreigeteilt. Oben links erscheint eine Art Instruktor, der als Slideshow konzipiert ist, dabei Wissen vermittelt und Aufgaben erteilt und bewertet. Die jeweiligen Tasks werden dann mit Hilfe des Editors unterhalb des Instruktor-Bereichs erledigt. Das Ergebnis der Eingabe erscheint auf der rechten Bildschirmseite als WYSIWYG-Preview, die wiederum für Desktop-, wie für mobile Browser schaltbar ist. Der Erfolg der Aufgabenerledigung wird automatisch bewertet. Da hat man ja woanders auch schon die dollsten Sachen erlebt. Bevor man den beauftragten Teilschritt nicht erfolgreich absolviert hat, geht es schlicht nicht weiter. Mogeln ist nicht…

dash-lesson-running
dash-checks-automatically

Mit dem Interface hatte ich nicht das geringste Problem, im Gegenteil erschien mir das dreigeteilte Konzept sofort eingängig. Ich würde es intuitiv nennen, aber gehen Sie rüber und probieren es selbst aus. Nichts ist so individuell wie das Lernen. Wäre ich jedenfalls auf der Suche nach einem Grundlagenkurs in HTML, ich würde Dash eine Chance geben und die HTML-Struktur mit ihren Tags ebenso erlernen, wie das Einbauen von Bildern oder Webfonts, Ansätze des responsiven Designs und einiges andere.

Sind Sie allerdings schon etwas fortgeschritten, was Ihre HTML-Kenntnisse betrifft, so werden Sie mit dem derzeitigen Dash-Angebot nur wenig Freude haben. Je mehr Sie bereits wissen, desto weniger kann ich Ihnen Dash empfehlen. In diesen Fällen wenden Sie sich lieber an das ebenfalls kostenfreie Codecademy oder das sehr gute, aber nicht kostenlose Angebot von Code School.

Während ich diesen Beitrag recherchierte stieß ich auf einige Kritik an Dash. Einige Nutzer bemängeln, dass das Angebot Probleme in dem einen oder anderen Browser oder einer speziellen Konfigurationslage bereitet. Andere bemängeln die fehlende Tiefe der bereitgestellten Kursinhalte. Danach seien die Kurse zuuu grundlagen-orientiert. Was soll man dazu sagen? Aus eigener Erfahrung kann ich eher bestätigen, dass ein Grundlagenkurs für den, der ihn wirklich braucht, nie zu flach sein kann. Das größere Problem entsteht im Grunde erst dann, wenn der Grundlagenkurs sich nicht hinreichend auf Grundlagen beschränkt. Dann ist es nicht weit zur Frustration. Und was die Browser betrifft: meines Wissens sind die alle kostenfrei erhältlich…

Links zum Beitrag:

Kategorien
Fortbildung Inspiration Programmierung Tutorials

Pflichtprogramm für Web-Developer: Kostenloser Online-Lehrgang zu Chromes DevTools von Code School

Welcher Web-Developer kennt die Chrome DevTools nicht? Fest in den Browser integriert, liefern sie Werkzeuge, die bei der Entwicklung von Web-Apps, vor allem deren Debugging, helfen. Dabei ist der Einstieg nicht unbedingt kompliziert. Aber, wie stets, eine fundierte Einleitung hat noch niemandem geschadet und senkt die Hemmschwelle für den Nachwuchs. Genau einen solchen Einstieg liefert Code School mit dem kostenlosen Video-Tutorial “Explore and Master Chrome DevTools”.

codeschool-devtools-01
Explore and Master DevTools: Code School, sponsored by Google

Code School: Immer für einen professionellen Online-Lehrgang gut

Aufmerksame Dr. Web Leserinnen und Leser haben bereits im Januar Bekanntschaft mit Code School gemacht. Gemeinsam mit dem Anbieter konnten wir einen kompletten Sass-Kurs kostenlos anbieten. Nach Aussage der Betreiber der Code School wurde davon reichlich Gebrauch gemacht.

Sie haben den Beitrag damals nicht gelesen? Nicht schlimm, hier die wichtigsten Infos: Code School ist eine Online-Schulungseinrichtung. In der vertrauten Umgebung des eigenen Lieblingsbrowsers lernt man grundlegende, aber auch fortgeschrittene Web-Technologien in seiner individuellen Geschwindigkeit. Jeder Kursus besteht aus einer unterschiedlichen Zahl von Einheiten in der Form von Schulungsvideos. Nach jeder Einheit kann man das erworbene Wissen im Rahmen sogenannter Challenges interaktiv überprüfen und gleichzeitig vertiefen. Im Erfolgsfalle werden einem sogenannte Badges verliehen, die den erfolgreichen Abschluss dokumentieren.

codeschool-welcome

Die Onlinekurse bei Code School sind grundsätzlich kostenpflichtig. Dabei können einzelne Schulungen gebucht werden, Code School setzt allerdings stärker auf das Prinzip des “Einschreibens”. Bei dieser Variante schreibt man sich bei Code School als Student ein, wie man das von der Uni kennt, zahlt einen Obolus von monatlich 25 USD als Flatrate und kann dann alle verfügbaren und später verfügbar werdenden Kurse konsumieren. Bindungsfristen gibt es nicht, man kann monatlich aussteigen.

Was an den Video-Tutorials und den diese begleitenden Challenges, also den Vertiefungsübungen, auffällt, ist der hohe Grad der Professionalität nicht nur der “Professoren”, sondern der Produktion insgesamt. Diesem Standard wird auch “Explore and Master Chrome DevTools” absolut gerecht.

“Explore and Master Chrome DevTools” von Code School, gesponsort durch Google

“Explore and Master Chrome DevTools” ist komplett kostenlos, dabei jedoch auf dem gleichen hohen Niveau, wie die übrigen Produkte des Hauses. Kostenlos ist der Lehrgang durch die Übernahme der Sponsorschaft durch Google. An dieser Stelle darf man als Web-Developer ruhig mal kurz “Danke, Google” sagen, denn der Kurs ist tatsächlich schon fast als Pflichtprogramm für jeden Entwickler zu bezeichnen.

codeschool-devtools-04

17 Videos mit Laufzeiten zwischen etwas mehr als einer Minute und knapp fünf Minuten kumulieren sich zu einer Gesamtdauer von knapp 51 Minuten. Im Schnitt ist jedes Video-Tutorial demnach drei Minuten lang und eignet sich daher auch für den schnellen Konsum zwischendurch. 75 der sogenannten Challenges begleiten die Tutorials. Diese sind durchweg praxisnah und orientieren sich tatsächlich sehr nah an den Inhalten der vorangegangenen Videos, was ich nicht bei allen Code School-Produkten, deren Videos übrigens zumeist zwischen fünf und 15 Minuten lang sind, in dieser Klarheit feststellen konnte.

codeschool-devtools-06

Um auf “Explore and Master Chrome DevTools” zugreifen zu können, bedarf es keiner Registrierung. Diese ist natürlich nützlich, wenn man den Kurs nicht am Stück durchlaufen will, denn mit einem Account ausgestattet, lassen sich Bearbeitungsstände auch zu späteren Zeitpunkten wieder abrufen. Anders als in den sonstigen Kursen des Anbieters, können Sie sich in “Explore and Master Chrome DevTools” frei bewegen. Eine Reihenfolge im didaktischen Sinne ist zwar gegeben, aber nicht zwingend zu durchlaufen. Auf diese Weise greifen Sie direkt auf die Bereiche zu, die sie interessieren oder bei denen Sie noch Schwächen sehen und lassen die bekannten Grundlagen links liegen.

Sämtliche Videos stehen als MP4 in SD, wie auch HD zum Download zur Verfügung, so dass Sie sie nach dem Herunterladen schauen können, wo, wie und so oft Sie das wollen. Eine Straßenbahnfahrt zur Arbeit kann so zu einem produktiven Ereignis werden. Auch der Toilettengang erfährt neben dem Offensichtlichen zusätzlichen Nutzwert.

codeschool-devtools-05

“Explore and Master Chrome DevTools” besteht aus sieben Lektionen, die sich mit den verschiedenen Aspekten des Web-Development auseinandersetzen. Im Einzelnen wird geboten:

  • Level 1: Getting Started & Basic DOM and Styles
  • Level 2: Advanced DOM and Styles
  • Level 3: Working With the Console
  • Level 4: Debugging JavaScript
  • Level 5: Improving Network Performance
  • Level 6: Improving Performance
  • Level 7: Memory Profiling

Mir persönlich haben die Level 5 und 6 am meisten gegeben. Insbesondere die Tipps zur Reduzierung der Netzwerklast durch weniger Requests haben sich im Hinterstübchen verankert. “Explore and Master Chrome DevTools” ist ein Angebot, das man nicht nicht empfehlen kann. Und das nicht nur, wie zuweilen gern getan, weil es kostenlos ist, sondern weil es so gut ist, dass man sogar damit zufrieden würde, wenn man dafür bezahlte.

Web-Developer, die zwei bis drei Stunden (inkl. Challenges) ihrer Zeit für den Lehrgang erübrigen, werden sicherlich nicht enttäuscht und vor allem hinterher nicht weniger schlau als zuvor sein. Wer rein auf Bewegtbild steht, kommt sogar mit unter einer Stunde Aufwand weg. Los geht’s!

Links zum Beitrag:

  • Explore and Master Chrome DevTools – Code School
  • Code School + Dr. Web bieten eine komplette Sass-Schulung kostenlos – Dr. Web Magazin

Kategorien
Fortbildung Inspiration JavaScript & jQuery Programmierung Tutorials

JavaScript und jQuery: Mit diesen Tutorials gelingt der Einstieg auf jeden Fall

Wenn man etwas Neues lernen will, ist es wichtig, von Anfang an gute Quellen zu verwenden. Schlechte Lernquellen vermitteln unqualitatives, häufig auch fehlerhaftes Wissen. So ist es überall – natürlich auch beim Erlernen von JavaScript. Ich habe daher im folgenden Beitrag einige zuverlässige Websites mit Anleitungscharakter zusammengestellt. Die Tutorials zu jQuery sind dabei nicht nur für Einsteiger interessant. Da kann sicherlich der ein oder andere Profi sein Wissen mindestens aufpolieren.


(Bildquelle: shutterhacks auf Flickr | CC-BY-SA)

JS The Right Way: ein Leitfaden für JavaScript-Anfänger

Um Missverständnisse rund um JavaScript zu vermeiden und zu verhindern, dass Anfängern fehlerhaftes Wissen vermittelt wird, kreierte William Oliveira unter JS the right way einen sehr nützlichen Leitfaden, der uneingeschränkt empfehlenswert ist.

Was ist „JS The Right Way“?

Hinter der Entstehung von „JS The Right Way“ steckt die Motivation, Anfängern in JavaScript qualitativ hochwertiges Wissen zu vermitteln. Die Webseite stellt einen Leitfaden dar, welcher Quellen mit nützlicher Lehrinformation aufzeigt. Er beginnt mit einer kleinen Einleitung, die das Ziel des Tutorial erklärt. Der Guide befindet sich noch in der Aufbauphase, wobei einige gute Sachen schon eingefügt sind. Jeder kann zum Aufbau beitragen, Vorschläge werden vor einer eventuellen Integration sorgfältig überprüft.

Bisheriger Umfang des Leitfadens

Nach der Einleitung und einigen Erläuterungen zum entstehenden Guide startet man mit dem Leitfaden. Darin finden Sie Quellen zum Thema JavaScript, die der Betreiber für seriös und gut befunden hat. Als erstes wird kurz erklärt, was JavaScript eigentlich ist und wie sich die Verwendung entwickelt hat. Längst ist JavaScript zu einem der Motoren des Web geworden, was Beispiele wie das serverseitige Framework node.js eindrücklich belegen.


node.js: Server-side JavaScript

Als weitere gute Quelle, welche zahlreiche Referenzen, Neuigkeiten rund um JavaScript sowie verschiedene Versionen davon enthält, wird das Mozilla Developer Network vorgestellt.


Referenzen und Neuigkeiten rund um JavaScript finden Sie auf Mozilla Developer Network

Weiter geht es mit Stil. Hier wird ein Styleguide mit einem interessanten Namen empfohlen: Idiomatic. Um den Code sauber zu bekommen, sollten Sie das Tool JSHint benutzen.


Ein Guide für JS-Anfänger: Idiomatic.js


Zahlreiche Patterns werden vorgestellt

Ein Beispiel hierfür kommt aus der Rubrik „Creational Design Patterns“ und stammt von Addy Osmani.


Factory Patterns: ein Ausschnitt aus dem Code

Wo gehobelt wird, da fallen Späne. Dennoch sollte man versuchen, durch gezielten Einsatz des Hobels so wenig Späne wie möglich zu erzeugen. Hierzu bieten sich Testing Tools an. Auch zu diesem Thema finden Sie einige gute Quellen. Zum Beispiel Mocha, ein Framework zum Testen von JavaScript.


Mocha: ein Code-Beispiel

Zur Weiterbildung sind Bücher sowie auch Kontakte zu wichtigen Leuten in diesem Bereich nützlich. Eine Liste kostenloser JS-eBooks wird vorgestellt. Ebenfalls in Listenform findet sich eine Übersicht interessanter JS-Profis, denen zu folgen sich nicht nur für Anfänger lohnt.


Kostenlose JS-Bücher

Listen finden sich noch etliche, so etwa solche mit JavaScript PaaS Providern, JavaScript Package Managern und Frameworks. Es kann als sicher gelten, dass Sie etwas Nützliches für sich finden werden.

jQuery-Tutorials nicht nur für Anfänger

Vielleicht beschäftigen Sie sich schon eine Weile mit Webdesign und kennen sich in HTML5, CSS und anderen Sprachen gut aus. Vielleicht sind Sie ein Anfänger im Webdesign und beginnen erst, diese wunderbare Welt zu erforschen. Auf jeden Fall ist Ihnen der Begriff „jQuery“ schon viele male begegnet. Ob Sie ein Profi darin sind oder – wie ich – noch keine Ahnung davon haben, werden Ihnen die folgenden Tutorials der Website jQuery Fundamentals sicherlich behilflich sein.


(Bildquelle: methodshop auf Flickr | CC-BY-SA)

jQuery Fundamentals

Wir beginnen mit einem englischsprachigen Tutorial von Bocoup, einer Open Web Technology Firma. Der Name des Tutorial lautet erklärend: jQuery Fundamentals. Das Tutorial verspricht Ihnen, dass Sie nach dem Durcharbeiten in der Lage sind, jQuery Probleme selbstständig zu lösen. Dafür müssen Sie natürlich die Lektionen im Tutorial samt der Übungen gewissenhaft durchkauen.

JavaScript Basics

Sie beginnen mit Grundlagen von JavaScript, da jQuery eine Bibliothek von JavaScript ist. In dieser Rubrik werden Ihnen diese Grundlagen in ziemlich knapper und übersichtlicher Form mit Beispielen erklärt. Oben rechts finden Sie einen Editor. In jedem Beispiel gibt es oben ein Augenzeichen. Klicken Sie darauf, erscheint das Beispiel im obigen Editor und Sie können das Ergebnis des Code sehen.


Ein Code-Ausschnitt

Traversal and Manipulation Methods

In diesem Abschnitt werden Ihnen Funktionen vorgestellt, mit deren Hilfe Sie verschiedene Elemente in einer DOM-Struktur effektiv suchen und verändern können. Die Funktionen, welche dies gewährleisten nennt man traversale und manipulierende Funktionen.


Ein Code-Ausschnitt

Event Handler

Hier geht es mit Event Handlers weiter. Dabei handelt es sich um Mechanismen, die verschiedene Ereignisse, z.B. Mausklicks, erkennen. Nach der Erkennung ruft das Skript bestimmte Funktionen auf und führt diverse Aktionen als Antworten auf diese Ereignisse aus.


Event Handler: ein Code-Ausschnitt

Effects

In diesem Kapitel erfahren Sie einiges über Effekte, welche mit jQuery realisiert werden können.


Einführung in die Effekte: ein Code-Ausschnitt

Zudem finden Sie einige Workshop-Angebote rund um jQuery.

jQuery-Tutorial: Einführung und Grundlagen von Matthias Schütz

Ein weiteres jQuery-Tutorial für Anfänger kommt von Matthias Schütz. Das Tutorial ist deutschsprachig. Schütz gibt eine Einführung in die Welt von jQuery in Form eines Artikels. Weiter unten finden Sie zahlreiche hilfreiche Links zum Thema, sodass Ihr jQuery-Studium keinesfalls nur auf diesen Beitrag beschränkt ist.


Matthias Schütz gibt Ihnen eine kompakte jQuery-Einführung in deutscher Sprache

Links zu weiteren jQuery-Tutorials

Wer nun immer noch nicht genug hat, findet hier eine große Liste mit Tutorials und zahlreichen Tipps und Tricks zum Thema.


Eine grosse Sammlung von jQuery-Tutorials

(dpe)

Kategorien
Fortbildung Programmierung

Nützliche Weiterbildungsangebote für Web-Worker

Web-Worker – egal ob Seitenbetreiber, Designer oder Entwickler – können sich keinen Stillstand leisten. Möchte man wettbewerbsfähig sein, sollte man sich regelmäßig weiterbilden. Wir präsentieren nun eine kleine Auswahl interessanter Weiterbildungsmöglichkeiten. Außerdem wird verraten, welche staatlichen Förderungen zur Verfügung stehen.

Wer sich für den Beruf des Webdesigners interessiert, hat die Wahl zwischen den unterschiedlichsten Ausbildungswegen. Möglich wäre eine Berufsausbildung zum Mediengestalter Digital und Print, ein Webdesigner-Lehrgang bei einem Fernunterrichtsinstitut oder ein Hochschulstudium. Selbst der Quereinstieg kann zum Erfolg führen.

Der Grund für diese Vielfalt ist simpel: Eine typische Webdesigner-Ausbildung gibt es nicht und wird es wohl auch zukünftig nicht geben. Eine staatliche geprüfte Qualifikation ist nicht erforderlich, so dass sich praktisch jeder als Webdesigner bezeichnen darf. Das heißt jedoch nicht, dass tatsächlich jeder diesen Beruf ausüben kann. Die Arbeitgeber und Auftraggeber picken sich eben die Besten heraus. Es liegt somit im Interesse eines jeden Webdesigners, sich weiterzubilden und zusätzliche Qualifikationen zu erlangen. Wir möchten Ihnen nun bei der Suche nach einem Weiterbildungsangebot behilflich sein.

Selbstverständlich ist es nicht möglich, alle Angebote im deutschen Raum aufzulisten. Wir präsentieren ihnen daher lediglich eine kleine Auswahl an Weiterbildungsmöglichkeiten. Dabei stellen wir je Themengebiet einen Kurs detaillierter vor. Auf Workshops mit ähnlichem Inhalt verweisen wir per Verlinkung. Sollte es dabei gravierende Unterschiede gegenüber dem detailliert vorgestellten Workshop geben, wird darauf hingewiesen.

Webdesigner-Einführung
Anbieter: Macromedia
Ort: München, Stuttgart
Dauer: 16 Wochen (45 Wochenstunden)
Kosten: 5.213 Euro
Voraussetzung: Die Zielgruppe sind Fachleute aus den Bereichen Grafik, Design, Layout, Fotografie, Reprografie und Journalismus.
Inhalte: Die Weiterbildung ist eine Einführung in die effiziente Webseitengestaltung mit Flash und Dreamweaver. Die Inhalte sind Vektorgrafik, Bildbearbeitung, XHTML und CSS, Flash und Actionscript. Es endet mit einer Projektarbeit, wobei im Team ein eigenes Projekt geplant und umgesetzt wird.
Weitere Infos

Workshops mit ähnlichem Inhalt werden unter anderem hier angeboten:

  • IHK Bildungsinstitut Hellweg Sauerlang GmbH (Soest/Nordrhein Westfalen)
  • WBS Training AG (Standorte sind in der gesamten Bundesrepublik verteilt)
  • L4 – Institut für digitale Kommunikation (Berlin)
  • Akademie Deutsche POP (Berlin, Hamburg, Köln, München) Dieser Kurs zieht sich über 18 Monate mit jeweils vier Wochenstunden.
  • Computer Schule Lübeck GmbH (Lübeck) Die Schulung wird nicht nur in Voll-, sondern auch in Teilzeit angeboten.

Eine Weiterbildung gefällig? Macromedia (siehe Screenshot) bietet eine breite Auswahl

Flash und PHP-Entwickler
Anbieter: Macromedia
Ort: München
Dauer: 12 Wochen (45 Wochenstunden)
Kosten: 3.910 Euro
Voraussetzung: HTML-Grundkenntnisse
Inhalte: Behandelt werden viele Aspekte der Programmierung mit Flash und PHP, wobei der Schwerpunkt auf dem Datenzugriff für Internetanwendungen liegt. Die Inhalte sind Flash/Actionscript, Server/Datenbanken, Grundlagen PHP/ TYPO 3 und PHP mit MySQL. Es endet mit einer Projektarbeit, wobei im Team ein eigenes Projekt geplant und umgesetzt wird.
Weitere Infos

Workshops mit Themenschwerpunkt “PHP” werden unter anderem auch hier angeboten:

  • Wildner AG (München)
  • WBS Training AG (Standorte sind in der gesamten Bundesrepublik verteilt)
  • PC College (Standorte sind in der gesamten Bundesrepublik verteilt) Es handelt sich um Wochenendseminare

Workshops mit Themenschwerpunkt “Flash” werden unter anderem auch hier angeboten:

Java Programmierung
Anbieter: Fernakademie Klett
Ort: Es handelt sich um ein standortunabhängiges Fernstudium
Dauer: Individuell (bei 9 Wochenstunden rund 15 Monate)
Kosten: 1.980 Euro / 132 Euro monatlich (vier Wochen kostenlos testen)
Voraussetzung: Gute Computerkenntnisse und PC-Kenntnisse
Inhalte: Der Fernunterricht beginnt mit der Einführung in Java und in die objektorientierte Programmierung. Zu den weiteren Themenschwerpunkten zählt Java-Packages, Java-Applikationen und Java-Datenbanken. Eine Besonderheit an diesem Fernunterricht ist, dass die Schüler bei Interesse an zwei dreitägigen Seminaren vor Ort teilnehmen dürfen, die sich mit den Java-Grundlagen und dem Java-Aufbau beschäftigen. Die Teilnahme ist jedoch keine Pflicht und die Seminargebühren sind nicht in den Studiengebühren enthalten.
Weitere Infos

Workshops mit ähnlichem Inhalt werden unter anderem hier angeboten:

  • ILS (Standortunabhängiges Fernstudium)
  • Firebrand Training GmbH (Rotenburg an der Fulda) Bereits nach sechs Tagen Vollzeitunterricht (insgesamt 60 Unterrichtsstunden) ist man ein zertifizierter Java-Programmierer.
  • PC College (Standorte sind in der gesamten Bundesrepublik verteilt) Es handelt sich um Wochenendseminare

Ajax Programmierung
Anbieter: Institut für Wissenstransfer
Standort: Bremen
Dauer: 3-Tagesseminar
Kosten: 820 Euro
Voraussetzungen: Grundkenntnisse im Bereich der Programmierung und/oder Anwendungsentwicklung
Inhalte: Der freiberufliche Softwareentwickler Frank Bahn beginnt mit einem Ajax- und Web 2.0 Überblick. Die weiteren Themenscherpunkte sind das XMLHttpRequest-Objekt, AJAX Frameworks, Prototype JS (die Basisbibliothek für AJAX-Entwickler), Scriptaculous (das Framework für visuelle Effekte), Dojo Toolkit (Objektorientiertes AJAX für den Client ), DWR (Easy AJAX for Java) der Einsatz verschiedener Frameworks in einem Projekt und das Debuggen mit Firefox und Firebug.
Weitere Infos

Workshops mit ähnlichem Inhalt werden unter anderem hier angeboten:

  • PC College (Standorte sind in der gesamten Bundesrepublik verteilt)
  • Eden Market GmbH (Stuttgart) Der Workshop besteht aus einem eintägigen Unterricht.
  • GFU Cyrus AG (Köln)
  • Akademie Lingott (Standorte sind in der gesamten Bundesrepublik verteilt; außerdem in Salzburg, Wien und Zürich)

Eden Market Screenshot

SQL Server 2005/2008 Grundseminar
Anbieter: Bayrische Verwaltungsschule (BVS)
Standort: Lauingen (Bayern)
Dauer: 3 Tage
Kosten: 420 Euro (zzgl. 80 Euro Unterkunft und 69 Euro Verpflegung)
Voraussetzung: Grundkenntnisse relationaler Datenbanken werden erwartet.
Inhalt: Die Themenschwerpunkte sind Installation und Konfiguration einer MS-SQL Datenbank,
Verwaltung von Datenbanken und Dateien, SQL Server-Sicherheit, Sicherung und Wiederherstellung von Datenbanken, Automatisierung von Verwaltungsaufgaben und Unterschiede von SQL Server 2005 und 2008 und Neuerungen von SQL Server 2008. Nach Abschluss des Wochenendseminars soll man dazu in der Lage sein, das Client/Server- Datenbankmanagement- system SQL Server 2005/2008 zu installieren, zu konfigurieren und zu verwalten.
Neben dem Grundseminar werden viele weitere Seminare zum Thema SQL Server und Datenbanken angeboten.
Weitere Infos

Workshops mit ähnlichem Inhalt werden unter anderem hier angeboten:

  • PC College (Standorte sind in der gesamten Bundesrepublik verteilt)
  • GFN AG (Standorte sind in der gesamten Bundesrepublik verteilt)
  • Industrie und Handelskammer (Standorte sind in der gesamten Bundesrepublik verteilt)

Web-Projekt-Management
Anbieter: SAWI
Standort: Dübendorf (Schweiz)
Dauer: 50 Kurstage
Kosten: 17.900 CHF (rund 12.500 Euro)
Voraussetzung: Eine solide Grundausbildung (Mittlere Reife, Berufsmatura oder Berufsausbildung) sowie Informatikkenntnisse und Berufserfahrung.
Inhalt: Die Weiterbildung beinhaltet sechs Schwerpunktmodule. Es beginnt mit den Grundlagen der Kommunikation und Führung und der Vermittlung von betriebswirtschaftlichen Kenntnissen. Der nächste Themenschwerpunkt ist die visuelle Kommunikation mit der Web-Gestaltung sowie die Grundlagen der visuellen Kommunikation und interaktiven Kommunikationskonzepte. Bei der Managementmethodik geht es wiederum um die Grundlagen, die Problemlösungsmethodik und die Erfassung von Benutzerbedürfnissen. Die letzten beiden Module behandeln die Themen Informations- und Kommunikationsinstrumente sowie Internet-Engineering und E-Business.
Weitere Infos

Weitere Workshops mit dem Themenschwerpunkt “Projekt Management beziehungsweise Web-Projekt Management” werden unter anderem hier angeboten:

Nicht die richtige Weiterbildung gefunden?
Kein Problem. Dank des Internets ist die optimale Weiterbildung schnell ausfindig gemacht. Das Suchsystem auf IT-Fortbildung.com und Kursnet ist besonders hilfreich.

Bildungsgutschein & Bildungsprämie: Lassen Sie den Staat bezahlen!
Die Teilnahme an einer Weiterbildung ist meist auch eine Kostenfrage. Glücklicherweise gibt es die Möglichkeit, sich vom Staat finanziell unter die Arme greifen zu lassen. Dank des Bildungsgutscheines werden die Lehrgangskosten und gegebenenfalls auch die Kosten für Anreise, Unterbringung und Pflege der Kinder übernommen. Ein weit verbreiteter Irrglaube ist, dass diese Förderung lediglich Arbeitslosen bewilligt wird. Auch Arbeitnehmer und Selbstständige können die Förderung beantragen, wenn es der Sicherung des Arbeitsplatzes bzw. der Selbstständigkeit dient. Voraussetzung ist, dass die Weiterbildungsmaßnahme von der Agentur für Arbeit als Maßnahme für die Weiterbildungsförderung nach § 85 SGB III („Bildungsgutschein“) zugelassen ist.

Der Antrag muss vor dem Beginn und vor der Anmeldung zur Weiterbildungsmaßnahme eingereicht werden. Jedoch kann sich niemand sicher sein, ob er die Förderung tatsächlich bekommen wird. Es besteht kein Rechtsanspruch, denn es handelt sich um eine sogenannte Kann-Leistung. Das heißt: Ob eine Förderung bewilligt wird, entscheidet die Bundesagentur für Arbeit von Fall zu Fall ganz individuell. Und manchmal ist es kaum nachvollziehbar, warum der eine Antrag bewilligt wird und der andere nicht.

Die Alternative zum Bildungsgutschein ist die neu eingeführte Bildungsprämie, die ausschließlich für Angestellte und Selbstständige (nicht für Arbeitslose) angedacht ist. Der Unterschied gegenüber dem Bildungsgutschein ist, dass nicht die gesamten Weiterbildungskosten, sondern höchstens 500 Euro, maximal aber 50 Prozent der Gesamtkosten, übernommen werden.

Ein kleiner Trost für alle, denen keine Förderung zusteht: Die Weiterbildungskosten können grundsätzlich als Weiterbildungskosten in voller Höhe steuerlich geltend gemacht werden.

(tm), (mm)

Kategorien
Fortbildung Programmierung

In vier Schritten die richtige Fortbildung finden

Selbstständige müssen oft wahre Alleskönner sein, so viel wird ihnen abverlangt. Aber die wenigsten bringen von Haus aus all diese Fähigkeiten mit. Sich fortzubilden gehört deshalb zum Alltag vieler Selbstständiger. Erfahren Sie, wie Sie gezielt die für Sie jeweils beste Fortbildung finden, um damit nicht unnötig Zeit und Geld zu verlieren.

Wie lautet der schöne Spruch? Selbstständige sind selbst und ständig. Und das bedeutet nicht nur, dass sie ständig ran müssen. Das bedeutet auch, dass sie vieles selbst machen müssen. Von Marketing und Vertrieb über Buchhaltung und Büro bis zur Mitarbeiterführung und Ähnliches mehr. Von der eigentlichen Fachtätigkeit ganz zu schweigen.

Die wenigsten Selbstständigen können aber in allen Bereichen auf solide Vorkenntnisse zurückblicken, und gerade am Anfang fehlt oft noch das Geld, solche Dinge an Dienstleister auszulagern. Und selbst, wenn das Geld da ist, macht es doch Sinn, sich zumindest in groben Zügen selbst auszukennen. Schon allein, um sich kein X für ein U vormachen lassen zu müssen.

Deshalb sind Selbstständige nicht nur selbst und ständig. Sie müssen sich auch ständig fortbilden, um solche Wissenslücken zu schließen oder auf ihrem eigenen Gebiet immer besser zu werden.

Das Problem ist, dass das Angebot an Fortbildungsmöglichkeiten in die Zigtausende geht. Vom Buch, das man nach Feierabend studiert, bis zu teuren Ausbildungsgängen ist alles drin.

Wer hier nicht kostbare Zeit und Geld verlieren will, sollte sich sehr genau überlegen, welche Fortbildung er wirklich braucht, welche ihm voraussichtlich am meisten nützt und wie er diese in seinen Alltag als Selbstständiger oder Unternehmer einbauen kann.

Der folgende Leitfaden will Ihnen bei dieser Entscheidung helfen. Beantworten Sie die Fragen und gehen Sie gezielt an Ihre Fortbildung.

Schritt 1: Wo sehen Sie Bedarf?

Nur die wenigsten von uns wollen sich aus heiterem Himmel fortbilden. Schon gar nicht, wenn die Fortbildung beruflich veranlasst ist und uns bei unserem Geschäft helfen soll.

Überlegen Sie deshalb als Erstes, warum Sie sich fortbilden wollen. Fehlen Ihnen bestimmte Fähigkeiten? Brauchen Sie noch zusätzliches Wissen? Stehen Sie vor einem akuten Problem?

  • Ausgleichen: Wollen Sie zum Beispiel Mängel in der Kundengewinnung ausgleichen?
  • Schritt halten: Oder wollen Sie sich in Ihrem Fachgebiet auf dem Laufenden halten?
  • Weitergehen: Wollen Sie sich vielleicht verbessern, Ihr Geschäft ausbauen, neue Märkte anstreben?

Sie sehen das Prinzip? Machen Sie sich zunächst klar, worum es eigentlich gehen soll. Machen Sie auch ruhig gleich Bestandsaufnahme. Fragen Sie sich, welche Vorkenntnisse Sie mitbringen, worauf Sie aufbauen können und wo Sie noch Lücken haben oder Bedarf sehen.

Beispiel:

Sie beabsichtigen, Ihr Geschäft zu vergrößern und Mitarbeiter einzustellen. Um nicht unnötig Lehrgeld zu bezahlen, wollen Sie vorbeugen und sich grundlegendes Wissen in der Mitarbeiterführung aneignen.

Schritt 2: Was wollen Sie ganz konkret lernen?

Gut, Sie haben also Ihren Bedarf. Sie wollen beispielsweise etwas in Sachen Kundengewinnung tun. Das kann aber alles Mögliche sein, von der Telefonakquise bis zum Messestand, vom Erstkontakt bis zur Umwandlung von Interessenten in Kunden. Versuchen Sie deshalb, Ihren Bedarf in einem zweiten Schritt konkreter zu fassen zu bekommen.

  • Ziel festlegen: Was genau wollen Sie lernen? Was wollen Sie besser können?Wo wir bei dem Messe-Thema waren: Wollen Sie zum Beispiel wissen, welche Möglichkeiten Ihnen die lokale Wirtschaftsmesse bietet? (Dann könnten Sie sich die Sache einfach mal in einem unverbindlichen Besuch ansehen.) Oder wollen Sie lernen, wie Sie mitreißende Vorträge auf Messen halten? (Dann könnte ein auf Vorträge spezialisiertes Rhetoriktraining oder -coaching Sinn machen.)
  • Ziel konkretisieren: Planen Sie auch ruhig in die Zukunft beziehungsweise gehen Sie in die Einzelheiten.Reicht es Ihnen beispielsweise, sich fachlich auf dem Laufenden zu halten? Oder soll es ein offizieller Abschluss sein, der Ihre Kenntnisse und Fähigkeiten dokumentiert? (Und wenn ja, welcher?) Möchten Sie lediglich Basiswissen in der Mitarbeiterführung erwerben, oder soll es Spezialwissen zum Thema „Einstellungsgespräche führen“ sein? Und so weiter, und so fort.

Schritt 3: Welche Voraussetzungen bringen Sie mit?

Niemand lernt im luftleeren Raum. Wir haben nicht nur jeder einen anderen Bedarf oder unterschiedliche Vorkenntnisse. Wir werden auch durch unsere persönlichen Lernvorlieben, finanziellen Möglichkeiten, unsere Arbeits- und Lebenssituation und Ähnliches geprägt.

Jemand, der autodidaktisch am besten lernt, ist vielleicht damit gestraft, dem festen Ablauf eines Gruppenseminars folgen zu müssen. Und jemand, der seinen Betriebswirt nachholen will, sollte dringend klären, wie er das zeitlich und finanziell in seinem Leben unterbringen kann.

Wie sieht es also aus bei Ihnen? Machen Sie Bestandsaufnahme.

  • Meine verfügbare Zeit: Wie viel Zeit können Sie für Ihre Fortbildung täglich, wöchentlich, monatlich aufwenden? Gibt es bestimmte Zeiträume, die sich bei Ihnen eher fürs Lernen eignen? (Zum Beispiel bei einem Saisongeschäft.)
  • Mein Lerntyp: Wann, wo und wie lernen Sie am besten? Also etwa: Allein zuhause oder gemeinsam in einer Gruppe? Nach Feierabend oder lieber am Wochenende? Regelmäßig ein bisschen oder lieber geballt längere Phasen am Stück?
  • Meine Lernform: Wie lernen Sie am besten? Durch Versuch und Irrtum, angeleitet in einem Seminar, autodidaktisch über ein Lernprogramm, gemeinsam in einer Gruppe?
  • Meine Geldmittel: Was können und wollen Sie in Ihre Fortbildung investieren? Wie viel können Sie monatlich abzweigen? Gibt es einen festen Posten für Fortbildungen in Ihrem Budget? Können Sie an Stipendien kommen? Oder ist Ihr Arbeit- oder Auftraggeber bereit, sich zu beteiligen?

Achtung, dieser Punkt ist ebenfalls nicht zu unterschätzen: Können Sie absehen, welche Belastungen durch Ihre Fortbildung auf Sie zukommen können? (Beruflich, privat, finanziell pp.) Ergeben sich daraus Ausschlusskriterien? (Zum Beispiel, dass längere Ausbildungen nicht in Frage kommen.) Fallen Ihnen Möglichkeiten ein, diese Belastungen abzufedern? (Beispielsweise eine Aushilfskraft einzustellen, um den Rücken für den Betriebswirt freizuhaben.)

Schritt 4: Welche Fortbildungen kommen für Sie in Frage?

Jetzt ist Fleißarbeit angesagt. Recherchieren Sie, welche Fortbildungen für Sie in Frage kommen, und führen Sie einen Abgleich nach den oben gesammelten Kriterien durch.

Also: Wenn Sie zum Beispiel lernen wollen, wie Sie mittels Telefonakquise neue Kunden gewinnen können, brauchen Sie keine Einführung in diverse Marketingmöglichkeiten. Oder: Wenn Sie lieber regelmäßig nach Feierabend lernen, können Sie sämtliche Wochenend-Seminare streichen. Und so weiter.

  • Termin: Nehmen Sie sich Ihre Terminplanung vor – wann kann es mit Ihrer Fortbildung losgehen? Und wie lang darf sie dauern? Wenn Sie beispielsweise ein Saisongeschäft betreiben, streichen Sie alles, was die Kernzeiten Ihres Geschäfts berührt und Sie hier nur unnötig unter Druck setzt.
  • Form: Welche Fortbildungsform spricht Sie besondes an? Versprechen Sie sich eher einen guten Lernerfolg von einem Präsenzseminar oder von einem berufsbegleitenden Online-Kurs? Können Sie sich vorstellen, einen Monat in einem Betrieb zu hospitieren oder lernen Sie eher über Selbstlernprogramme?
  • Angebot: Und zuletzt natürlich das eigentliche Angebot. Nachdem Sie Termin, Form, Vorlieben, Budget, Inhalte und so weiter eingegrenzt haben, können Sie jetzt gezielt nach den verbleibenden, für Sie in Frage kommenden Fortbildungsangeboten suchen. Picken Sie sich raus, was die erste grobe Vorauswahl überlebt, und führen Sie einen Abgleich mit Ihren Kriterien durch.

Je sorgfältiger Sie arbeiten und je konkreter Ihre Kriterien sind, desto besser stehen Ihre Karten, die „richtige“ Fortbildung zu finden und nicht unnötig Zeit und Geld zu verlieren. Schließlich: Auch eine Fortbildung ist ein Geschäft. Machen Sie das Beste daraus. ™

Kategorien
Fortbildung Programmierung

Buchtipps für Freiberufler und Selbständige

Online ist nicht genug. Für die unverzichtbare Fortbildung bieten sich gedruckte Bücher an. Der Markt allerdings ist fast unüberschaubar. Oliver Jensen hat sich umgesehen und für uns einige Perlen herausgesucht. Welche Titel lohnen fürs Geschäft? Fachbücher siehe auch im Dr. Web Shop.

Der erfolgreiche Webdesigner: Kundenkommunikation, Projektmanagement, Web-Techniken, Marketing
Galileo Press Verlag
Autor: Nils Pooker
Preis: 39,90 Euro

Dieses 559-seitige Werk widmet sich voll und ganz den geschäftlichen Aspekten eines Webdesigners. Wie überzeugt man die Kunden von der eigenen Qualität? Wie sieht eine erfolgreiche Kundenkommunikation aus? Worauf ist bei einem Kundengespräch zu achten? Wie erstellt man ein reizvolles Angebot, eine erfolgversprechende Präsentation oder einen Businessplan? Selbst über mögliche Werbemaßnahmen (inklusive der eigenen Webseite), über das Projektmanagement und über die Suchmaschinenoptimierung wird man umfassend informiert. Der Autor wählte dafür einen einfachen und teilweise sogar humorvollen Schreibstil, sodass das Lesen sehr kurzweilig wird. Für den weiteren Informationsbedarf liegt eine DVD mit vielen Lektionen bei.

Lediglich die Web-Techniken kommen in diesem Fachbuch zu kurz. Dies ist aber keinesfalls als ein Defizit zu verstehen, weil das Buch den Webdesigner als Geschäftsmann zum Thema hat. Möchte man sich über PHP-Skripte, XHTML-Elemente oder Ähnliches informieren, gibt es schließlich genügend andere Fachbücher.

Recht für Grafiker und Webdesigner: Ausgabe 2009
Galileo Press Verlag
Autoren: Uwe Koch, Dirk Otto, Mark Rüdlin
Preis: 39,90 Euro

Fachbücher für spezielle Berufsgruppen sind immer etwas kostspieliger. Doch gerade für Webdesigner lohnt sich diese Anschaffung. Inhaltlich wird nicht nur auf das Steuerrecht eingegangen, sondern auch auf das Urheberrecht, auf Vertrags- und Honorarvereinbarungen und auf Versicherungsthemen. Einsteiger werden somit ausführlich informiert und Erfahrene können ihr Wissen erweitern. Speziell die vielen Beispielfälle vermitteln auf eine einfache Art und Weise das erforderliche Wissen.

Praxisbuch für Freiberufler: Alles, was Sie wissen müssen, um erfolgreich zu sein
Eichborn Verlag
Autor: Svenja Hofert
Preis: 24,95 Euro

Dieses 308-seitige Buch ist ein ideales Nachschlagewerk für jeden Freiberufler. Alle relevanten Themen (von Gründungszuschüsse, Steuern und Gesellschaftsformen bis hin zu Versicherungen und Marketing-Maßnahmen) werden gut leserlich erklärt. Zwar könnten manche Themen etwas mehr in die Tiefe gehen, denn gerade bei den Steuern bleiben einige Fragen unbeantwortet, es vermittelt aber dennoch in allen Bereichen ein gutes Grundwissen.

Freiberufler Atlas: Schnell und erfolgreich selbstständig werden
Ullstein Verlag
Autor: Martin Massow
Preis: 12,95 Euro

Auf 463 Seiten wird der Leser über so ziemlich jeden relevanten Aspekt der Freiberuflichkeit informiert. Gerade angesichts des günstigen Preises ist es fast schon überraschend, wie umfangreich auf jedes einzelne Thema eingegangen wird. Daher gehört das Buch in das Regal eines jeden Freiberuflers. Wenn es überhaupt etwas zu kritisieren gibt, dann höchstens die Tatsache, dass es aufgrund der vielen bürokratischen Paragraphen teilweise nicht ganz einfach zu lesen ist. Schuld daran ist aber weniger der Autor sondern eher die komplizierte Gesetzgebung im deutschen Lande.

Erfolgreich ohne Chef: Handbuch für Freiberufler, Selbstständige und freie Mitarbeiter
Cornelsen Verlag Scriptor
Autor: Gerhard Gieschen
Preis: 29,95 Euro

Der Titel mag den Eindruck erwecken, es handelt sich vorrangig um ein Buch für Existenzgründer. Doch es geht inhaltlich weit über die Standard-Themen wie Steuern, Versicherungen und Gründungszuschüsse hinaus. Der Autor möchte mit seinem Buch neue Ideen vermitteln und dem Leser dabei helfen, Denkblockaden zu überwinden. So werden hilfreiche Tipps zum Thema Mitarbeiterführung, Marketingmaßnahmen, Kundengewinnung, Öffentlichkeitsarbeit, Preisbildung und vielen weiteren Themen geliefert.

Die 100 häufigsten Fallen nach der Existenzgründung
Haufe Verlag
Autoren: Cordula Nußbaum, Gerhard Grubbe
Preis: 16,80 Euro

Bücher über Existenzgründungen gibt es genügend. Doch die entscheidende Phase, dies dürfte jeder Selbstständige wissen, beginnt erst nach der Gründung. Für die Wirtschaftsjournalistin Cordula Nussbaum und Verlagsleiter Gerhard Grubbe war dies Grund genug, 100 mögliche Problemfälle zu schildern und konkrete Lösungsvorschläge zu unterbreiten. Behandelt werden dabei sämtliche Aspekte aus den Bereichen Finanzen, strategische Planung, Angebotserstellung, Preisbildung, Kundenumgang, Mitarbeiterbetreuung und Organisation. Wegen der vielen Praxisbeispiele und des sympathischen Schreibstils ist das 244-seitige Buch unterhaltsam zu lesen. Zusätzlich liegt eine CD-Rom mit Rechnertools, Kalkulationstools, Checklisten und Businessplaner bei.

Auch, wenn dieses Buch vorrangig für Neugründer gedacht ist, können Erfahrene ebenso viel Wissen daraus ziehen und Optimierungspotential entdecken.

Nebenbei selbstständig: Der Ratgeber für Selbstständige in Teilzeit
Humboldt Verlag
Autoren: Karin Leppin, Konar Mutafoglu
Preis: 12,90 Euro

Nicht jeder Selbstständige übt seine Tätigkeit hauptberuflich aus. Für manche Leute geht es mehr darum, sich neben dem monatlichen Gehalt ein zusätzliches Einkommen zu sichern und nur bei einem sehr erfolgreichen Verlauf voll auf die Selbstständigkeit zu setzen. Das 160-seitige Buch spricht genau diese Personengruppe an und erklärt, wie man den Balanceakt zwischen dem Leben als Angestellter und dem Leben als Selbstständiger meistert. Im ersten Teil wird der Leser darüber informiert, worauf es bei einer erfolgreichen Eigenständigkeit ankommt. Im weiteren Verlauf wird die Gründungsphase erläutert, bis dann im letzten Kapitel erklärt wird, wann der Übergang in die Voll-Selbstständigkeit anzugehen ist und was sich dadurch bezüglich der Sozialversicherungen ändert. Sicherlich hätten manche Aspekte ausführlicher behandelt werden können, doch dafür war anscheinend kein Platz mehr. Die Autoren geben in ihrem Buch daher Literaturtipps, sodass sich der Leser über bestimmte Aspekte noch genauer informieren kann.

Mitarbeiter ohne Festanstellung: Freie Mitarbeit, Zeitarbeit, Werkvertrag, Praktikum
Haufe Verlag
Autor: Stephan Wilcken
Preis: 29,90 Euro

Die Anstellung einer Vollzeitkraft ist für Selbstständige meist nicht finanzierbar. Die logische Alternative wären freie Mitarbeiter oder auch Praktikanten, die einfache Tätigkeiten übernehmen könnten. Doch bei Mitarbeitern ohne Festanstellung ist einiges zu beachten. Alleine schon aus einer möglichen Scheinselbstständigkeit ergibt sich eine große Gefahr. Stephan Wilcken, ein Fachanwalt für Arbeitsrecht, ist sich darüber im Klaren und gibt in seinem 195-seitigen Buch darüber Auskunft, wie sich rechtliche und finanzielle Risiken minimieren lassen. Doch nicht nur die unterschiedlichen Vertragstypen werden vorgestellt, auch auf die Anforderungen bei der Mitarbeiterführung wird eingegangen. Abgerundet wird das Fachbuch mit einer CD-Rom, auf der unter Anderem Vorlagen für Projektkalkulationen, Kostenplanungen und Honorarabrechnungen zu finden sind.
Durch die Fülle an Informationen könnte man zwar teilweise die Übersicht verlieren, dafür aber bleibt wirklich keine Frage unbeantwortet.

Geringfügige Beschäftigungsverhältnisse / Mini Jobs / 400-Euro-Jobs: Lohnsteuer, Sozialversicherung, Arbeitsrecht
Rehm Verlag
Autor: Wolfgang Schönfeld, Peter Reimers, Michael A. Hofmann
Preis: 19,80 Euro

Im Januar 2008 erschien die Neuauflage dieses Fachbuches, in der die Gesetzesänderungen vom 1.1.2008 bereits eingearbeitet wurden. Inhaltlich richtet es sich an alle Selbstständige, die geringfügige Beschäftigungsverhältnisse mit Mitarbeitern eingehen möchten. Wo liegen die Unterschiede zwischen 400-Euro-Jobber und Aushilfskräften? Welche Besonderheiten ergeben sich bei Schülern, Rentnern, Studenten oder Praktikanten? Welche vertraglichen Gestaltungsmöglichkeiten gibt es? Auf 256 Seiten werden diese und viele weiteren Fragen beantwortet. Ein kurzweiliges Lesevergnügen darf man jedoch nicht erwarten, weil das Buch sehr trocken geschrieben ist. Es handelt sich daher um eine umfangreiche Informationsquelle, wo sich der Leser “durchkämpfen” muss, um über alle Aspekte informiert zu sein. Ist dies geschehen, kann man für den Vertragsabschluss mit einem geringfügig Beschäftigen die Musterverträge von der beiliegenden CD-Rom nutzen.

Steuern 2009 für Unternehmer
Haufe Verlag
Autoren: Willi Dittmann, Gerhard Geckle, Dieter Harderer, Rüdiger Happe, Reinhard Schnell
Preis: 16,95 Euro (mit CD-Rom 24,95 Euro)

Das 640-seitige Fachbuch wurde von einem Steuerberater, einem Steueranwalt, einem Betriebsprüfer und einem Dozenten geschrieben und deckt den kompletten Wissensbedarf von Unternehmern ab. Im ersten Teil werden alle relevanten Formulare vorgestellt und erklärt, der zweite Teil besteht aus einem Steuerlexikon und der Auflistung verschiedener Beispielfälle und der dritte Teil beschäftigt sich mit den neuen Regelungen im Steuerrecht. Aufgrund der einfachen Erläuterungen ist es gerade für Einsteiger ein gelungenes Werk. Die beiliegende CD-Rom enthält die Steuer-Software “TAXMAN spezial” und führt den Anwender per Interview durch seine Steuererklärung.

111 Steuertipps für Freiberufler und Kleinbetriebe
Bund-Verlag
Autor: Peter Eller
Preis: 14,90 Euro

Der Titel des Buches weckt leider falsche Erwartungen. Es handelt sich nicht unbedingt um eine Ansammlung einfacher Tipps, sondern mehr um eine Einführung für Existenzgründer. Die Vor- und Nachteile der verschiedenen Rechtsformen (der Fokus liegt auf der GmbH) werden ebenso erläutert wie die verschiedenen Möglichkeiten bei den Betriebsausgaben. Einsteiger können zugreifen, für alle anderen gibt es jedoch tiefgründigere Werke.

Einnahmen-Überschussrechnung: Einfache Buchführung für Freiberufler und Selbstständige
Haufe Verlag
Autor: Peter A. Klocke, Ilonka Kunow
Preis: 6,95 Euro

Das preisgünstige und 124seitige Taschenbuch bietet eine gute Einstiegshilfe in die steuerlichen Themen. Gerade wer mit der Umsatzsteuer-Voranmeldung und der Einnahme-Überschussrechnung keine Erfahrung hat, dürfte an den einfachen Erläuterungen Gefallen finden; somit ist es auch als Nachschlagewerk geeignet.
Für Fortgeschrittene ist dieses Buch hingegen weniger zu empfehlen, weil viele komplexe Themen (wie zum Beispiel Firmenwagen oder Privatentnahme) nur sehr kurz angerissen werden.

Praxisleitfaden Einnahmen-Überschuss-Rechnung
Merkur Verlag
Autor: Christian Jaschinski
Preis: 15,20 Euro

Das 200-seitige Fachbuch bietet eine gute Hilfe beim Erstellen der Einnahmen-Überschussrechnung. Alle relevanten Themen (wie Betriebsausgaben, Firmenwagen, Abschreibungen, Löhne, Gewerbesteuer, Umsatzsteuer und vieles mehr) werden umfangreich erläutert. Nach allen fünf Kapiteln folgen einige Übungsaufgaben, sodass man das Erlernte noch einmal überprüfen kann. Wer also keinen Steuerberater beauftragen möchte und daher selber fit auf diesem Gebiet sein muss, dürfte mit diesem Buch sehr zufrieden sein.

Fahrtenbuch: Fahrten- und Kostenerfassung, Bußgeldkatalog. Kostenrechner, KFZ-Angaben
Haufe Verlag
Preis: 4,90 Euro

Bei dem Führen eines Fahrtenbuches zeigt sich das Finanzamt von ihrer strengsten Seite. Jede einzelne Fahrt muss mit Angabe der gefahrenen Kilometer, dem Abfahrts- sowie dem Ankunftsort und dem Fahrtzweck handschriftlich in einem gebundenen Fahrtenbuch notiert werden. Erlaubt man sich dabei auch nur den kleinsten Fehler, könnten die gesamten Aufzeichnungen nicht anerkannt werden. Mit dem 64-seitigen Fahrtenbuch aus dem Haufe-Verlag soll dies verhindert werden. Neben den vorgefertigten Formularen, die den Richtlinien des Bundesfinanzministerium entsprechen und nach jeder Fahrt ausgefüllt werden sollen, liefert das Buch zahlreiche Hinweise über die (nicht ganz unkomplizierte) 1%-Methode, die Ermittlung abzugsfähiger Kosten und eine Auflistung der Bußgelder. Somit erweist sich das preisgünstige Büchlein als ein nützlicher Begleiter.

Altersvorsorge für Selbstständige
Stiftung Warentest Verlag
Autorin: Isabell Pohlmann
Preis: 16,90 Euro

Eine Studie des Wissenschaftszentrum Berlin für Sozialforschung bewies, dass neue Solo-Unternehmer bei der Altersvorsorge gravierende Defizite aufzuweisen haben. Grund für diese negative Situation ist vermutlich, dass man sich als Selbstständiger selber um die Rentenversicherung kümmern muss und keinen Arbeitgeberanteil erhält. Isabell Pohlmann von der Stiftung Warentest machte sich dies zum Anlass, die Unternehmer auf 224 Seiten über alle Aspekte der Altersvorsorge zu informieren. Dabei werden alle Möglichkeiten der Altersvorsorge (gesetzliche Rentenversicherung, berufsständische Versorgungswerke, private Altersvorsorge sowie die Riester- und Rürup Rente) vorgestellt. Die Autorin möchte dabei helfen, individuell angepasste Vorsorgestrategien zu entwickeln. Dank der guten Gliederung und vieler Beispielfälle wird der Leser gut informiert. Wer sich mit den kurzen Kapiteln zur Altersvorsorge in Freiberufler-Lektüren also nicht zufrieden geben möchte, findet hier eine umfangreiche Informationsquelle.

Der Termin: Ein Roman über Projektmanagement
Hanser Verlag
Autor: Tom DeMarco
Preis: 19,90 Euro

Trockene Fachbücher sind manchen Leuten ein Grauen. Einerseits möchte man sie lesen, weil man sich weiterbilden möchte, andererseits wird es teilweise aber auch als langweilig empfunden, sodass man das Buch gar nicht zu Ende liest. Wem das bekannt vorkommt, der dürfte über das Werk von Tom DeMarco sehr erfreut sein. Es handelt sich um eine unterhaltsam zu lesende Geschichte, die den Leser in die Welt des Projektmanagements einführt. Weil in der Geschichte mehrere Arbeitsgruppen mit unterschiedlichen Herangehensweisen vorkommen, kann man sich ein Bild von den verschiedenen Methoden machen. Ebenfalls positiv ist, dass es in der Geschichte immer wieder zur Problemen kommt, wo Experten hinzugezogen werden und dem Protagonisten hilfreiche Tipps geben. Und genau diese Tipps wird der Leser auch selber in der Praxis anwenden können.

Projektmanagement für kleinere und mittlere Unternehmen: Schnelle Resultate mit knappen Ressourcen
Hanser Verlag
Autor: Uwe Braehmer
Preis: 29,90 Euro

Bücher zum Thema Projektmanagement gibt es viele. Doch nur wenige sind speziell auf die Situation eines kleinen Unternehmen zugeschnitten. Das 252-seitige Werk füllt diese Lücke. Während viele Projektmanagement-Bücher also eher für BWL-Studenten geeignet sind, vermittelt das Buch von Uwe Braehmer direkt anwendbares Wissen. Speziell wegen der einfachen Sprache, den hilfreichen Checklisten, den vielen Unternehmensbeispielen und den guten Tipps erlebt der Leser eine richtige Fortbildung. Auch die Struktur des Buches -es beginnt mit Definitionen und umfasst dann alle Schritte, von der Projektplanung bis zum Projektabschluss- ist gut gelungen, sodass es auch als Nachschlagewerk gut geeignet ist.  ™

Kategorien
Fortbildung Programmierung

ASP, C, C++ und C# Tutorials

Eine Quellensammlung zu den Themen ASP und C & C++ & C# Tutorials. Artikel, Anleitungen und Tutorials.

ASP

  • ASP.NET 2.0: A Getting Started Guide
    „Are you ready to take off into the wide blue yonder of ASP.NET 2.0? Join Cristian and Zak on this eventful ride: you’ll tame the installation process, sink your teeth into two ASP.NET languages, and conquer .NET programming basics with your bare hands. Finally, you’ll pull server controls, user controls, master pages, and CSS into the beginnings of an application that will see you land safely – and without casualties – at the start of a brilliant career in ASP.NET programming.“
  • ASP.NET 2.0 QuickStart Tutorial
    The ASP.NET QuickStart is a series of ASP.NET samples and supporting commentary designed to quickly acquaint developers with the syntax, architecture, and power of the ASP.NET Web programming framework…
  • ASP.NET 2.0 Tutorial
    The tutorial is designed for college-level classes in Web Development; however, it is available to anyone with an interest in learning ASP.NET 2.0 from the ground up. It is not designed as comprehensive coverage of ASP.NET 2.0. It presents features and techniques to apply this Web development framework to produce applications of a generally useful nature. It is a learning resource moreso than a reference source.
  • ASP Introduction
    Learn how to program Active Server Pages (ASP)
  • ASP Tutorial
    In our ASP tutorial you will learn about ASP, and how to execute scripts on your server.
  • ASP Tutorial
    Active Server Pages tutorial for beginners

C & C++ & C#

  • C++-Tutorials
    C++ Tutorialsammlung
  • C Tutorials
    C Tutorialsammlung
  • C Tutorial
    Blog on C and C++ – Learn C in 19 Lessons „This website will provide you with lessons and quality material to learn basics of C language programming in just a few days.
  • Sams Teach Yourself C in 24 Hours
    Written in a plain and clear format, this book is designed to help you learn the C programming language as quickly as possible.
  • C++ Language Tutorial
    These tutorials explain the C++ language from its basics up to the newest features of ANSI-C++, including basic concepts such as arrays or classes and advanced concepts such as polymorphism or templates. The tutorial is oriented in a practical way, with working example programs in all sections to start practicing each lesson right away.
  • Teach Yourself C++ in 21 Days
    This book is designed to help you teach yourself how to program with C++. In just 21 days, you’ll learn about such fundamentals as managing I/O, loops and arrays, object-oriented programming, templates, and creating C++ applications–all in well-structured and easy-to-follow lessons.
  • C++ Programming Language Tutorials
    These tutorials were developed as part of a series of courses on C++ I taught at the University of California, Irvine, Washington University, St. Louis, and Vanderbilt University. I’m making these tutorials available on the Web for anyone who is interested in teaching or learning about C++.
  • C++ Programming Tutorials
    Understandable C++ tutorials (covers most of basic C, except i/o). Includes basics, pointers, arrays, classes and structs, recursion, linked lists, encryption, OpenGL graphics, and more.
  • C++ Programming Tutorials – Learn C++
    C++ Tutorials, Pointers and Dynamic Memory Allocation, Debugging, Standard Template Library (STL), Free C++ Compilers, C++ Tips and Tricks
  • C# Practical Learning
    This site offers Lessons, examples, and links on the C# programming language
  • C# Tutorial
    This is a set of lessons suited for beginning to intermediate programmers or anyone who would like to gain familiarity with the C# programming language. These lessons will help you get a quick head-start with C# programming.
  • C# Tutorial
    This tutorial covers Microsoft’s programming language C#. It is aimed at people with some programming experience, although it tries not to assume too much knowledge.