HTML5 | t3n News News, Infos, Tipps und aktuelle Artikel zu HTML5 2014-04-05T10:47:37Z t3n Redaktion http://t3n.de/tag/html5 Tempy.js: Blitzschnelle Client-Templates mit HTML5-LocalStorage http://t3n.de/news/tempyjs-clientseitige-templates-537231/ 2014-04-05T10:47:37Z
Es gibt viele verschiedene Möglichkeiten zur Realisierung von Client-Side-Templates. Tempy.js nutzt den LocalStorage, um die Aufrufe zu minimieren und die Performance zu steigern. Wir stellen es...

Es gibt viele verschiedene Möglichkeiten zur Realisierung von Client-Side-Templates. Tempy.js nutzt den LocalStorage, um die Aufrufe zu minimieren und die Performance zu steigern. Wir stellen es euch vor.

Das modulare Template-System Tempy.js

Bei der Entwicklung von Web-Apps suchen Webworker immer wieder nach einer Stellschraube, die zu einer besseren Performance beitragen könnte. Bei einer Web-App, die ich derzeit in meiner Agentur entwickle, boten vor allem clientseitige Templates eine Herausforderung. Das Ziel ist, ein modulares Template-System, das verschiedene App-Bestandteile asynchron neu rendern kann, zu realisieren. Hierfür bieten sich verschiedene Optionen an.

Option 1: Komplette HTML-Blöcke vom Server vorverarbeitet an den Client schicken. Das ist sicherlich am einfachsten zu realisieren, da clientseitig nur wenig Prozesslogik erfordert wird und die Template-Engine auf der Server-Seite alles unkompliziert erledigen kann. Jedoch kann man bei diesem Ansatz kaum Vorteile aus dem Caching der Templates ziehen, sodass der Client durch unnötig viele Daten und der Server durch unnötige Template-Verarbeitung zusätzlich belastet werden.

Option 2: clientseitige Templates über Script-Tag. Bei clientseitigem Templating ist es gängige Praxis, die jeweiligen Templates innerhalb eines Script-Tags mit dem Hauptdokument zusammen auszuliefern. So erspart man sich zusätzliche Aufrufe separater Templates und kann sehr schnell clientseitig auf die jeweiligen Templates zugreifen. Für ein komplexes System wird diese Lösung bei zunehmender Anzahl von Templates  auf Dauer jedoch unübersichtlich und irgendwann auch nicht mehr performant.

Option 3: clientseitige Templates über AJAX nachladen. Die Übertragung von Templates über AJAX zur Weiterverarbeitung in Template-Systemen wie Moustache oder Handlebars schien hier die beste Lösung zu sein. Die Templates können so kleinteilig wie nötig aufgesplittert werden und werden in der Regel nach dem ersten Aufruf  gecached. Diese Lösung ging jedoch nicht weit genug. Erst vor kurzem berichtete ich von basket.js, einer Bibliothek, die JavaScript in den LocalStorage des Browsers ablegen und so blitzschnell ohne zusätzliche Requests zur Verfügung stellen kann. Besonders auf mobilen Geräten soll so ein zusätzlicher Performance-Schub ermöglicht werden.

Diese Idee haben wir nun in der Bibliothek tempy.js in abgewandelter Form umgesetzt.

Das Konzept von Tempy.js

Tempy.js bietet im Zusammenspiel mit einer Server-Applikation eine schnelle Lösung für das Abrufen und Speichern von clientseitigen Templates. Die Bibliothek ruft Templates via AJAX-Request von einer PHP-Applikation ab und speichert sie im LocalStorage des Browsers. Ab dann stehen die Templates auf Clientseite sofort und ohne Kommunikation mit dem Server zur Verfügung, sodass auch Offline-Applikationen denkbar sind.

Template Ladezeit
Tempy.js: Der Aufruf von Separaten Templates kostet viel Mehr Zeit als die Übertragung in einem „Template Pack“. (Screenshot: t3n)

Ein weiterer Vorteil in der Aufteilung ist die Möglichkeit, Templates auf dem Server vorzuverarbeiten (zum Beispiel zu übersetzen) und zusammengehörige Templates bei einem Aufruf zu übertragen. Dazu aber später mehr.

Tempy.js benutzen

Tempy.js benötigt derzeit jQuery, um die nötigen Requests an den Server zu stellen. Nachdem jQuery und Tempy.js in die Web-App eingebunden sind, können mittels einer einfacher API Template-Dateien abgerufen werden.

Du kannst einzelne Templates oder mehrere Templates in einem Rutsch anfordern, ganz, wie deine Programmlogik es erfordert.

// Ein Template anfordern
var template1 = tempy.get({name:"template1"});
// Mehrere Templates anfordern
var templates = tempy.get(
{name:"template2"},
{name:"template3"},
{name:"template1"},
{name:"template4"}
);

Als Rückgabewert erhältst du den Template-String, den du an eine clientseitige Template Engine weiterreichen oder wie im unterstehenden Beispiel direkt ins Dokument einfügen kannst.

// Template einfügen, wenn ein Template angefordert wurde
$('#content').append(template1);
//Bestimmtes Template einfügen, wenn mehrere Templates angefordert wurden
$('#content').append(templates['template1']);

Um nicht unnötig viele Abhängigkeiten beim Aufruf im JavaScript festhalten zu müssen, bietet die serversetige Komponente von tempy.js die Möglichkeit, Template-Packs zu definieren. Bei jeder Anforderung eines Templates wird geprüft, ob für die Programmlogik weitere Templates benötigt werden und zusammen mit dem angeforderten Template mit nur einem einzigen Aufruf an den Client übertragen. Hierfür müssen nur die Abhängigkeiten in einer separaten Datei (pack.info) im JSON-Format hinterlegt werden.

{
"mainView":[
"template1",
"template2",
"template3",
"template4"
]
}

Fordert man nun also  das Template „mainView“ an, werden die dazugehörigen Templates template1, template2, template3 und template4 mit übertragen.

Tempy.js: API und Konfiguration

Tempy.js lässt sich über eine Reihe von Befehlen steuern.

  • tempy.get() ruft Templates ab
  • tempy.clear() überprüft ob veraltete Templates im LocalStorage hinterlegt sind
  • tempy.flush() löscht sämtliche Templates aus dem LocalStorage des Clients

Standardmäßig behält Tempy.js Templates für zehn Stunden im Cache und fragt Templates von der templateServer.php ab. Diese Werte können – wie auch das Storage-Prefix, das die Unterscheidung der Tempy.js-Daten von anderen Daten im LocalStorage ermöglicht – nach Belieben in der Bibliothek selbst angepasst werden, um es den eigenen Anforderungen anzupassen.

var storagePrefix = 'tempy-';
var defaultExpiration = 10;
var templateServer = "templateServer.php";

Für die Zukunft planen wir weitere Funktionen wie die Integration von JavaScript-Template-Engines und eine Require.js-Implementation von Tempy.js. Solange steht die aktuelle Fassung von Tempy.js zum Download auf GitHub zur Verfügung.

]]>
Ilja Zaglov
Flappy Bird: So baut ihr die Game-Sensation in HTML5 nach http://t3n.de/news/flappy-bird-baut-game-sensation-536021/ 2014-03-24T09:01:36Z
Das Mobile-Game Flappy Bird wurde innerhalb kürzester Zeit zum Megahit. Der Entwickler Thomas Palef zeigt jetzt in einem Tutorial, wie ihr das Spiel in HTML5 nachbauen könnt.

Das Mobile-Game Flappy Bird wurde innerhalb kürzester Zeit zum Megahit. Der Entwickler Thomas Palef zeigt jetzt in einem Tutorial, wie ihr das Spiel in HTML5 nachbauen könnt.

Flappy Bird: Ein Tutorial erklärt euch, wie ihr das Spiel in HTML5 nachbauen könnt. (Screenshot: lessmilk.com)
Flappy Bird: Ein Tutorial erklärt euch, wie ihr das Spiel in HTML5 nachbauen könnt. (Screenshot: lessmilk.com)

Flappy Bird: Vom Erfolg in die Versenkung

Die Geschichte um Flappy Bird ist einigermaßen bizarr. Das kostenlose Spiel für Android und iOS wurde innerhalb kürzester Zeit zum Hit und soll dem Entwickler Dong Nguyen täglich 50.000 US-Dollar an Werbeeinnahmen eingebracht haben. Umso verwunderlicher erschien die Nachricht, dass Nguyen das Spiel aus Apples App-Store und Googles Play-Store entfernt hat. Als Grund nannte er den Umstand, dass sein Spiel süchtig machen würde. Ein Umstand, den die meisten Spieleentwickler vermutlich als Anzeichen für ein gelungenes Game ansehen würden. Nguyen hat seine Meinung dazu allem Anschein nach mittlerweile revidiert, und will das Spiel zu einem späteren Zeitpunkt wieder veröffentlichen.

Bis es so weit ist, könnt ihr euch eine HTML5-Version von dem Game nachbauen. Wie das geht, zeigt euch der Pariser Entwickler Thomas Palef. Der hat auf seinem Blog ein dreiteiliges Tutorial dazu veröffentlicht. Als Grundlage für seine Flappy-Bird-Kopie dient das Phaser-Framework. Statt einen Vogel zu steuern, kontrolliert ihr hier lediglich ein Rechteck. Aber es geht hier ja auch weniger um die Grafik als die zugrundeliegende Spielmechanik. Wie ihr die in HTML5 nachbauen könnt, erklärt euch Palef dafür sehr genau in seinem Tutorial.

Original vs. Fälschung: Flappy Bird als Browser-Game. (Bild: Thomas Palef)
Original vs. Fälschung: Flappy Bird als Browser-Game. (Bild: Thomas Palef)

Flappy Bird: HTML5-Nachbau in drei Teilen

Die drei Tutorials sind in Englisch gehalten. In den Artikeln findet ihr neben dem entsprechenden Quellcode als ZIP-Datei auch einen Link zu einer Demo-Version des Games. So könnt ihr euch anschauen, wie die Flappy-Bird-Kopie am Ende der jeweiligen Anleitung aussehen sollte. Hier sind die Links zu den drei Teilen des Tutorials:

Sofern ihr alle Schritte befolgt und nicht zu sehr von Palefs Anleitung abweicht, solltet ihr am Ende diese Kopie von Flappy Bird zu Gesicht bekommen. Während der eigentliche Flappy-Bird-Entwickler noch mit sich hadert, will Palef zukünftig weitere Game-Tutorials veröffentlichen. Wer sich dafür interessiert, sollte ab und an einen Blick auf seinen Blog werfen. Wer sich für die Geschichte hinter dem Original-Spiel interessiert, dem empfehlen wir den Artikel „Trotz 50.000 Dollar pro Tag: Flappy-Bird-Entwickler nimmt sein Spiel aus den Stores“.

]]>
Kim Rixecker
HTML5-Experten im Interview: „Das Web ist weit mehr als nur Blogs im Browser zu lesen“ [Sponsored Post] http://t3n.de/news/html5-experten-interview-web-533367/ 2014-03-11T09:44:21Z
In Düsseldorf wartet mit der ersten HTML5 MasterClass ein spannendes Intensiv-Training auf Entwickler. Dort erklären die bekannten Frontend-Entwickler Peter Kröner und Jens Grochtdreis, wie sich...

In Düsseldorf wartet mit der ersten HTML5 MasterClass ein spannendes Intensiv-Training auf Entwickler. Dort erklären die bekannten Frontend-Entwickler Peter Kröner und Jens Grochtdreis, wie sich die neuesten HTML5-, CSS3- und JavaScript-Techniken zukunftssicher einsetzen lassen. Einen ersten Vorgeschmack gibt es im Interview.

Hirnfutter für Entwickler: HTML5 MasterClass in Düsseldorf

Vom 28. bis 30. April findet die erste HTML5 MasterClass in Düsseldorf statt. In diesem Intensiv-Training kannst du von den beiden bekannten Frontend-Entwicklern Peter Kröner und Jens Grochtdreis lernen, wie du den Überblick über die sich ständig ändernde Webplattform behältst, die neuesten HTML5- CSS3- und JavaScript-Techniken zukunftssicher einsetzt und mit Open-Source-Tools einen modernen Workflow für Web-Apps einrichtest.

Als Teilnehmer hast du am Ende das Rüstzeug, um moderne Cross-Plattform-Web-Apps mit offenen Standards zu schreiben. Im sprechen Peter Kröner und Jens Grochtdreis über Gefahren und Vorzüge sowie wichtige Trendwege von .

Peter Kröner und Jens Grochtdreis im Interview

Frage: HTML5 ist ein lebender Standard – ohne Unterlass gibt es neue Drafts und Vorschläge, wie beispielsweise die Gamepad-API oder die CSS-Scrolling-Snap-Points, um nur zwei zu nennen. Besteht nicht die Gefahr, dass man jetzt auf etwas setzt, was dann in einem Jahr ganz anders – oder nicht mehr – funktionieren wird?

KONICA MINOLTA DIGITAL CAMERAJens Grochtdreis: Standards vermehrt in kleinen, thematisch abgegrenzten Dokumenten zu diskutieren hat doch den entscheidenden Vorteil, dass man schneller zu einem Ergebnis kommen kann. Ob und inwiefern diese Standards dann nachher genutzt oder implementiert werden, ist eine davon unabhängige Frage. Ich finde es gut, dass große, unhandliche Standards vermieden werden sollen. Bei der technischen Entwicklungsgeschwindigkeit sollte die Standardisierung nicht allzu lange hinterher hinken.

Peter Kröner: Drafts und Standards hin oder her – am Ende zählt, was im landet. Die Gefahr, bei Projekten auf das falsche Pferd zu setzen, ist schon sehr gering, einfach weil Technologien, die noch große Änderungen vor sich haben, meist noch gar nicht in einem benutzbaren Zustand sind.

Frage: HTML5 bringt viele neue JavaScript-APIs und vor allem neue semantische Elemente – damit hebt sich die Plattform „Web“ von vielen anderen ab. Was ist das besondere daran?

Jens: Ich teile diese Analyse nicht. Webbrowser gibt es auf vielen Plattformen und „das Web“ ist weit mehr, als nur Blogs im Browser lesen. Webbrowser werden immer beliebter in Autos, sind Interfaces in Bankautomaten, in Kühlschränken und werden in Intranets unabhängig vom klassischen Web für vielfältige Aufgaben genutzt. Browserbasierte Applikationen können praktisch alle Lebensbereiche erreichen – auch Ärzte und Pfleger auf speziell ausgestatteten Tablets. Ich denke, gerade bei den Formularen gibt es noch Erweiterungsbedarf. Wenn man sich diverse JavaScript-UIs für Formulare anschaut, sieht man Kombinationen, die leider noch nicht mit schlichtem HTML lösbar sind. Sie sollten als nächstes implementiert werden – vor neuen semantischen Elementen.

portrait_peterkroenerPeter: Webbrowser gibt es auf jeder Plattform und auf jedem Gerät, das es schon gibt und es wird sie auf jedem internetfähigem Gerät geben, das jemals in Zukunft erscheinen wird. Wenn man nicht für jede Plattform eine eigene App schreiben will, führt am Web kein Weg vorbei. Ohne Web ist man gezwungen, für jedes Smartphone und Tablet-System, für jedes PC-Betriebssystem, für jeden Smart-TV und jede Spielekonsole, für Smartwatches, Google Glass und in Autos verbaute Entertainmentsysteme eine Extrawurst zu braten. Und jedes Mal, wenn irgendwer da draußen ein neues Gerät erfindet, darf man eine weitere Wurst in die Pfanne werfen.

Frage: Und was passiert mit alten Browsern, die weder die APIs noch die Elemente kennen?

Jens: Neben der leider unrealistischen Hoffnung, dass diese Browser möglichst schnell aussterben mögen, sollten wir generell mit Progressive Enhancement oder Graceful Degredation arbeiten. Wir sollten also dafür sorgen, dass den alten Browsern keine notwendigen Informationen verloren gehen oder ihnen Alternativen mittels Polyfills serviert werden. Chris Heilmann hat mal HTML5 sehr treffend mit „Moving from Hacks to Solution“ beschrieben. Moderne Browser haben schon die Solution, alte bekommen einfach noch die Hacks. Wir werden immer in einer Zeit des technologischen Übergangs leben, deshalb sind Progressive Enhancement und Graceful Degredation zwei Entwicklungsparadigmen, ohne die man im Frontend keine optimalen Ergebnisse abliefern kann.

Peter: Wenn es nicht um Webseiten, sondern um Web-Apps geht, habe ich noch einen weiteren Vorschlag: alte Browser einfach nicht unterstützen! Normale Computerprogramme dürfen seit jeher Anforderungen an Hard- und Software stellen – das neueste Call of Duty läuft schließlich auch nicht auf einem 468er mit Windows 3.11. Bei Web-Apps sieht es manchmal ganz automatisch genau so aus. Wie soll ein mit WebGL gerendertes Browser-Spiel ohne leistungsstarke Grafikkarte funktionieren? Was soll man mit einer Foto-App anfangen, wenn das Gerät keine Kamera hat? Webseiten, die nur Informationen aus Text und Bild bereitstellen, kann man immer auch in alten Browsern zum funktionieren bringen, bei Web-Apps ist das nicht immer möglich.

Frage: Im Blogpost zur MasterClass heißt es unter anderem, dass SASS behandelt wird. Mitte Dezember 2013 hatte Lea Verou sich auf Twitter beschwert, dass mit einer Sprache etwas nicht stimmen könne, wenn sie mittlerweile hauptsächlich mit Präprozessoren und Frameworks verwendet werde. Steht es wirklich so schlecht um CSS3?

Jens: Da missversteht Lea den Sinn von Präprozessoren. Sie sind ein Tool, ein Helferlein, nicht mehr. Ich kann CSS auch ohne schreiben. SASS erleichtert mir persönlich die Arbeit, weil ich einmal gefundene Problemlösungen ablegen und leicht als Mixin wieder nutzbar machen kann. Ich kann mein CSS in viele kleine Schnipsel aufteilen und für mich so einfacher wartbar machen – auch im Team.

Es ist wie bei einem Framework in PHP. Ist PHP kaputt, nur weil kaum jemand ohne Symfony, Zend oder ein anderes Framework seine Arbeit angeht? Der Nutzen liegt doch eher darin, dass sich standardisierte Problemlösungen herausgearbeitet haben, die man sinnvollerweise nutzt. Nicht sehr viel anders ist es bei Präprozessoren.

CSS hat ein ganz anderes Problem: CSS hatte nie ein echtes Layoutmodul, mit dem man etwas anfangen konnte. Zumindest Flexbox bekommt jetzt eine gute Verbreitung. Das liegt aber in mehrere Versionen vor. Die anderen Module sind leider noch nicht so gut verbreitet. Aber es wird sehr lange dauern, bis die letzten Browser ohne Flexbox ausgestorben sind. Da rächt sich die Phantasielosigkeit und Inaktivität der CSS-Arbeitsgruppe beim W3C seit 1999.

FrageJens, du bist ein Verfechter der Arbeit mit SASS und Compass. Welche Vorteile bietet diese Kombination Webentwicklern? Sie ist ja schließlich wieder mit einem (Einarbeitungs)-Aufwand verbunden.

Jens: Ich kann mein CSS in viele kleine Module aufteilen, dadurch auch im Team Arbeit einfacher an einzelne Personen delegieren. Außerdem kann ich Problemlösungen oder wiederholende Codeschnipsel in Mixins und Placeholder auslagern. Ich spare mir Schreibarbeit und Gehirnschmalz. Zudem habe ich als Frontend-Entwickler die komplette Kontrolle über den Output und muss mich nicht darauf verlassen, dass der Backend-Entwickler dafür sorgt, dass das CSS komprimiert wird. Ich kann schön formatiert arbeiten, mit vielen Kommentaren, am Ende aber einfach für eine komprimierte Ausgabe sorgen.

Peter: Darüber hinaus möchte ich anmerken, dass ich das mit den Einarbeitungs-Aufwand normalerweise nicht gelten lasse. SASS ist syntaktisch CSS mit ein paar Erweiterungen, mehr nicht. Der Einstieg könnte also einfacher nicht sein.

Frage: Natürlich bietet CSS3 gerade in Hinblick auf das Thema Responsive Webdesign eine Vielzahl mächtiger Features. Was sind eurer Meinung nach die wichtigsten davon?

Jens: Natürlich stehen an erster Stelle die Mediaqueries, denn ohne die gäbe es kein Responsive Webdesign. Daneben finde ich aber jegliche Technik wichtig, die den Verzicht auf spezielle Grafiken ermöglicht. Das sind dann mehr die „alten“, „traditionellen“ Techniken wie runde Ecken und Schatten. Viel wichtiger ist, was fehlt. Und da steht für mich an erster Stelle eine vernünftige Lösung für responsive Bilder, an zweiter Stelle Mediaqueries von Elementen. Also nicht mehr Styling in Abhängigkeit der Breite des Browserfensters, sondern in Abhängigkeit der Breite, die einem Modul gerade noch vom Layout gegeben wird.

Frage: Bietet die Kombination aus HTML5 und CSS3 genug Möglichkeiten, um in dem Trendbereich schlechthin – Mobile – mit nativen Sprachen mithalten zu können?

Peter: Da kommt es drauf an, von welchem Unterbereich von Mobile wir sprechen. Natürlich fehlt es je nach verwendetem Browser hier und da mal an der Unterstützung für HTML5-APIs, aber das ist ja auf dem Desktop nicht anders. Und sicher kann die Webplattform gerade in Sachen Performance noch einiges aufholen oder anders gesagt: Für eine flüssig laufende Web-App muss man als Entwickler mehr kämpfen, als für eine flüssig laufende native App. Dann aber läuft sie auch auf mehr als einer Plattform.

Jens: Wenn Du mit einer Web-App nicht an alle Informationen und Features des Telefons/Tablets herankommst, dann geht wohl kein Weg an nativer Programmierung vorbei. Ansonsten kann man mit Web-Apps sehr viel machen und die Zahl derer, die damit arbeiten, ist naturgemäß größer, als die Zahl derer, die Apps nativ programmieren können. Mit Web-Apps kann man mit einer Lösung beliebig viele mobile Betriebssysteme erreichen. Das ist doch eigentliche Killerfeature.

Frage: Wenn wir einen Blick auf die Zukunft werfen wollen – wo steckt Potenzial für Verbesserungen in HTML5 und CSS3?

Jens: Wir benötigen ausgereifte Layoutmodelle, am besten mehrere. Wir benötigen schnell eine gute Lösung für responsive Bilder und möglichst auch Mediaqueries für Seitenbereiche beziehungsweise Module. Und bei den Formularen sollte genauer geforscht werden, welche Formularelemente aktuell noch mit JavaScript hingelogen werden. Sie sollten dringend als HTML-Elemente standardisiert werden.

Peter: Neben der schon angesprochenen Performance-Problematik kann die ganze Plattform gerne noch etwas nachreifen. Man kann zwar heute schon einiges machen, aber es ist doch manchmal noch etwas mühsam. Das liegt auch gar nicht mal so sehr an den Webstandards oder alten Browsern, sondern vielmehr an den verfügbaren Tools und Prozessen. Die Webentwickler sind erst noch dabei, die Webplattform so richtig zu verstehen.

Frage: Ihr seid beide Trainer der HTML5 MasterClass in Düsseldorf – und ihr habt euch ein mehr als strammes Programm vorgenommen. Was ist euer erklärtes Ziel? Was wollt ihr den Teilnehmern am Ende der drei Tage vermittelt haben?

Jens: Natürlich will ich in erster Linie Wissen vermitteln. Noch viel wichtiger ist es mir aber, die Neugier zu wecken, die es erst möglich macht, auf dem erworbenen Wissen aufzubauen und noch mehr Wissen zu sammeln. In unserem Job muss man immer neugierig bleiben und Neues lernen wollen.

Peter: Wichtiger ist wirklich, einen Eindruck von den Möglichkeiten zu bekommen und Herangehensweisen kennenzulernen. Ein API kann man immer ergooglen, aber Hands-on-Erfahrung und das Wissen um Vorgehensweisen holt man sich am besten am lebenden Objekt.

Entwickler, jetzt Tickets für die HTML5 MasterClass in Düsseldorf sichern!

]]>
t3n Redaktion
Semantik im Web 3.0: Wir zeigen euch, wie HTML5 dem Web mehr Bedeutung verleiht http://t3n.de/news/semantik-html5-528492/ 2014-02-13T14:09:28Z
Eines der wichtigsten Features von HTML5 ist die Möglichkeit, Inhalte in einen semantischen Kontext zu setzen. Heute zeigen wir dir, wie du auch deine Webprojekte auf das Web 3.0 vorbereitest.

Eines der wichtigsten Features von HTML5 ist die Möglichkeit, Inhalte in einen semantischen Kontext zu setzen. Heute zeigen wir dir, wie du auch deine Webprojekte auf das Web 3.0 vorbereitest.

Web 3.0 oder das „Semantic Web“ – heutzutage dreht sich fast alles um Semantik und so natürlich auch in . Nicht umsonst. Das Semantische Web ist im Rahmen des „Internet der Dinge“ eine Notwendigkeit, um der schieren Datenflut durch die Zuordnung von bloßen Daten zu einem Kontext Herr zu werden. Denn erst, wenn Daten einem Kontext zugeführt werden, können daraus Informationen gewonnen werden. Das Problem: Die wichtigste Markup-Sprache im Web war dazu nicht wirklich geeignet – HTML5 soll das ändern.

Semantik in Auszeichnungssprachen

semantik-html-5
Semantik im Web: HTML5 macht es möglich. (Grafik: W3C.org)

Die Hypertext-Markup-Language ist auf ein fixes Set von möglichen Elementen limitiert. Der Vorteil ist, dass jeder Browser diese Elemente kennt und jeder Entwickler sie somit verwenden kann. Das können andere Auszeichnungssprachen wie zum Beispiel XML zwar auch, allerdings sind Entwickler hier bei der Anzahl der Elemente unlimitiert, da sie gewünschte und semantisch sinnvolle Elemente selbst anlegen können – dieser Vorteil ist gleichzeitig der Nachteil von HTML. Denn die Möglichkeit, Elemente selbst anlegen zu können oder zu müssen, birgt auch einen großen Nachteil, den HTML nicht hat: Bei einem ulimitierten Set von Elementen müssen Entwickler dem Parser beibringen, wie mit selbstdefinierten Elementen umgegangen werden soll – sie müssen also eine eigene Dokumenttyp-Definition schreiben beziehungsweise sie erweitern. Wie also können Entwickler sicherstellen, dass ihr HTML-Code auch semantisch sinnvoll ist? Schon im Jahre 2009 schrieb John Allsopp über die Semantik in HTML5:

We don’t need to add specific terms to the vocabulary of HTML, we need to add a mechanism that allows semantic richness to be added to a document as required. John Allsopp

John Allsopp vertrat aber die Meinung, dass die Sprache für Entwickler erweiterbar sein sollte, was den oben angesprochenen Nachteil bedeuten würde. Um im DOM nicht auf Semantik verzichten zu müssen, gibt es zum einen das class-Attribut, das neben CSS auch von Microformats genutzt werden kann. Microformats sind aber ebenfalls limitiert und beheben nur einen Teil der Probleme – für viele Entwickler ist und war das nicht ausreichend.

Semantik und HTML5

Die wohl wichtigste Auszeichnungssprache in der fünften Version stellt uns neue Inline-Elemente zur Verfügung, die in diesem Kontext aber „text-level semantics“ heißen. Elemente wie: progressmetertime und mark basieren auf einem Konsens zwischen der Community von Entwicklern und den Browser-Herstellern – ein erster Schritt zu besserer Semantik im Web.

Neben dem semantischen Mehrwert wird dadurch auch keine komplizierte HTML-Struktur, etwa mit div-Elementen, benötigt. Um zum Beispiel einen Ladebalken anzeigen zu lassen, kann auf das progress-Element zurückgegriffen werden:

<progress min="0" max="100" value="99"></progress>

Es ist auf den ersten Blick ersichtlich, dass es sich bei diesem Schnippsel um etwas handelt, dass Veränderung anzeigt – Code gespart und dem Codeblock einen Kontext verliehen, HTML5 sei Dank. Dabei handelt es sich aber nur um Peanuts, denn HTML5 bietet noch mehr, und zwar auf struktureller Ebene.

Semantische Strukturen in HTML5

Eines der HTML5 Grundprinzipien, nämlich „paving the cowpaths“ – etwa: „Trampelpfade bepflastern“ – ist, dass schon existierende und weit verbreitete Methoden auch in einen Standard übernommen werden sollen. Auf Basis einer von Google durchgeführten Studie aus dem Jahr 2005, welche die Antwort auf die Frage „Welche Klassen werden in Kombination mit welchen Elementen am häufigsten benutzt?“ finden sollte, konnte die Notwendigkeit von header-, aside-, footer-, article-, nav- und section-Elementen festgestellt werden. Anstatt

<div class="nav"></div>

schreibt man in HTML5 nur noch

<nav></nav>

Soweit, so gut – denn jetzt ist ersichtlich, dass es sich nicht „nur“ um eine Aufzählung von Links handelt, sondern um einen inhaltlichen Block, der Informationen zur Navigation innerhalb eines bestimmten Kontexts zur Verfügung stellt. Dabei ist zu beachten, dass es sich um Elemente handelt, die HTML ergänzen und eine semantische Tiefe verleihen. Es handelt sich hierbei nämlich nicht um einen Ersatz für schon existierende Elemente, sondern um eine Spezifizierung.

Viel zu oft sehe ich Webprojekte, die section-Elemente anstatt von div-Elementen verwenden. Das Problem daran: Der Code verliert das, was er durch HTML5 gewonnen hat: die Semantik. Denn eine Section in einem HTML5-Dokument kann sehr wohl div-Elemente enthalten, muss sie auch. Denn wenn Entwickler ein Gitter benutzen, basiert das auf Divisions und nicht auf Sections – das Gitter ist ja nur dazu da, um den eigentlich Inhalt innerhalb einer Section – oder noch spezifischer eines article-Elements – zurechtzurücken. Es ist also kein Inhalt, sondern Struktur/Layout beziehungsweise Design.

Semantisches HTML5 in a Nutshell

Als Entwickler im Semantischen Web sollte man sich also fragen, welche Elemente wie und wann verwendet werden sollen, um die Vorteile von HTML5 voll nutzen zu können.

section-Element

Wie schon angesprochen, verfügt das div-Element über keinerlei semantischer Bedeutung, ganz im Gegensatz zum section-Element, das zur Gruppierung von zusammengehörenden Inhalten verwendet werden sollte.

<section>
     <h1>Heading</h1>
     <p>Lorem ipsum dolor sit <a href="">amet.</a></p>
     <p>Lorem ipsum.</p>
</section>

header-Element

Dieses Element erzeugt oft Verwirrung, da es sich eben nicht um den „Header“ einer Website handelt, wie der Kopfbereich weitläufig von Entwicklern bezeichnet wird. Im Gegensatz zu diesem kann das header-Element öfter in einer Website vorkommen. In der Spezifikation wird dieses Element wie folgt beschrieben: „A group of introductory or navigational aids.“ Das bedeutet, dass ihr eigentlich ein header-Element pro section-Element verwenden solltet, da die Section als „a thematic grouping of content, typically with a heading“ beschrieben wird. Es wird also aus der Perspektive des Inhalts gedacht und nicht aus der Perspektive des Layouts.

nav-Element

Dieses Element – ihr hab es schon erraten – sollte für Navigationsstrukturen verwendet werden. Allerdings reicht es nicht aus, einfach ein paar Links in ein nav-Element zu werfen. Dieses Element sollte für eine „Hauptnavigation“ verwendet werden beziehungsweise als „navigational aid“ innerhalb eines header-Elements.

aside-Element

Ja, inhaltlich gesprochen entspricht dieses Element einer „Sidebar“. Es sollte aber unabhängig von der Position der eigentlichen Sidebar verwendet werden. Die Entscheidung für das aside-Element ist gefallen, wenn ihr eine Sidebar entfernen könnt, ohne dass sich die Information des Inhalt dazu verändert. Unabhängig davon, ob der Sidebar-Inhalt eine echte Sidebar – am Rand der Website – ist oder nicht. Die Fragestellung dreht sich hier immer um den Zusammenhang von Inhalten – und nicht um das Layout.

footer-Element

Genauso wie der Header der Seite hat auch der Footer eine Bedeutung im Web-Entwickler-Jargon, aber wie schon gesagt: Semantik hat nichts mit Layout oder Design zu tun, sondern mit der Gruppierung zusammenhängender Inhalte. Das bedeutet auch, dass das footer-Element mehrfach auf einer Website vorkommen kann – zum Beispiel innerhalb eines section-Elements. Das führt uns zu folgendem Beispiel:

<section>
     <header>
        <h1>Artikelname</h1>
     </header>
        <p>Lorem ipsum dolor sit <a href="">amet.</a></p>
         <p>Lorem ipsum.</p>
     <footer>
        <p>Mario Janschitz</p>
     </footer>
</section>

article-Element

Abschließend möchte ich noch auf ein besonderes Element eingehen: das article-Element. Dieses HTML5-Element sorgt oft für Verwirrung, vor allem im Zusammenhang mit dem section-Element. Der Grund liegt hierfür in der Ähnlichkeit der beiden Elemente, bedingt durch die Möglichkeit der generischen Verwendung.

Es können mehrere article-Elemente in einer Section vorkommen und vice versa, der Hauptunterschied ist aber, dass das article-Element eine in sich geschlossene inhaltliche Einheit bildet. Die Section jedoch ist ein Container für generische Information, der durch die oben genannten Elemente näher spezifiziert werden kann.

Im Unterschied dazu ist das article-Element eine Art von Spezifikation des section-Elements. Natürlich, hier handelt es sich im Einzelfall um reine Interpretation, aber ihr könnt euch mit diesem Trick behelfen: Wenn der fragliche Inhalt auch als RSS-Feed-Artikel sinnvoll wäre, solltet ihr genau hier das article-Element nutzen, da der Inhalt offensichtlich in sich geschlossen ist.

Setzt ihr HTML5-Elemente schon ein? Oder bevorzugt ihr die „div-itis“?

]]>
Mario Janschitz
t3n-Aktion: „Schrödinger lernt HTML5, CSS3 und JavaScript“ [+Verlosung] http://t3n.de/news/t3n-aktion-schroedinger-lernt-525233/ 2014-01-29T13:00:38Z
Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und...

Du willst in die Webentwicklung einsteigen und HTML5, CSS3 und JavaScript lernen? Das etwas andere Fachbuch „Schrödinger lernt HTML5, CSS3 und JavaScript“ vermittelt mit Witz die Theorie und bietet gezielte Übungen. Für 30 Neuabonnenten gibt es das Buch jetzt gratis zum t3n-Abo – und auch unsere treuen Abonnenten sollen nicht leer ausgehen.

Wenn du noch kein t3n-Abonnent bist, solltest du jetzt die Gelegenheit nutzen und dir eins der Bücher „Schrödinger lernt HTML5, CSS3 und JavaScript“ von Galileo Computing sichern. Zeitlich ist unsere Aktion zwar nicht begrenzt, doch sind die 30 Bücher vergriffen, ist die Aktion beendet.

Nur für t3n-Abonnenten

Außerdem verlosen wir das Fachbuch unter allen treuen Abonnenten. Um am Gewinnspiel teilzunehmen, hinterlass einfach bis zum 6. Februar 2014 um 12 Uhr deine Kundennumer und Anschrift in unserem Spreadsheet.

Kurzinfo zum Buch:

Eine runde Sache: Schrödinger wird Webentwickler! Zum Glück hat er einen Kumpel, der auf jede Frage eine Antwort weiß, wenn er nur genug Kaffee bekommt: Zusammen lernt ihr HTML, CSS und , ohne das Buch zu wechseln – was auch viel zu schade wäre. Mit Witz, der nötigen Theorie, Unmengen an und Tipps, Übungen und den verdienten Pausen. Von „Hallo Webwelt“ bis zu Geo-Location und Touchscreens: alles auf dem neuesten Stand, und wenn du willst, mit deinem eigenen Webserver.

Das alles, und noch viel mehr:

  • Ausführlicher Einstieg in HTML, CSS und JavaScript
  • Designs umsetzen und benutzerfreundliche GUIs erstellen
  • Ereignisse behandeln und Funktionen einsetzen
  • Serverkommunikation, AJAX und Websockets nutzen
  • Mit oder ohne und
  • Responsive Webdesign und Touch Events für Tablets und Handys
  • Video- und Audiomaterial einbinden
  • Zeichnen mit Canvas

20140129_schroedinger_lernt_html_css3_javascript_wp2

]]>
Charlyn Schaper
HTML5-Guru Peter Kröner: „Performance ist alles!“ [Sponsored Post] http://t3n.de/news/html5-guru-peter-kroener-522969/ 2014-01-21T09:00:44Z
Die HTML5 Days in München stehen vor der Tür, schon Anfang März ist es soweit. Auch der HTML5-Guru Peter Kröner wird vor Ort sein. Im Interview spricht er über die Entwicklung, Probleme und...

Die HTML5 Days in München stehen vor der Tür, schon Anfang März ist es soweit. Auch der HTML5-Guru Peter Kröner wird vor Ort sein. Im Interview spricht er über die Entwicklung, Probleme und Vorteile des Web-Standards.

HTML5-Experte Peter Kröner im Interview.
HTML5-Experte Peter Kröner im Interview.

Peter Kröner forscht und schreibt über Web-Zukunftstechnologien. Was er über HTML5, CSS3 und neue JavaScript-Standards herausfindet, schreibt er in Bücher oder Blogs. Zudem ist der frühere Webdesigner und Frontend-Entwickler auch auf Seminaren, Workshops und Konferenzen präsent – so auch in diesem Jahr auf den HTML5 Days in München.

Vom 5. bis 7. März werden auf der Veranstaltung die wichtigsten Themen rund um in kompakter und intensiver Form diskutiert. Die HTML5 Days bieten zusammen mit den parallel stattfindenden JavaScript Days insgesamt 24 Workshops mit 17 der bekanntesten deutschsprachigen HTML5- und JavaScript-Experten. Peter Kröner stand uns schon jetzt Rede und Antwort.

Herr Kröner, Sie haben sich seit geraumer Zeit einen Namen im HTML5-Umfeld gemacht. Wie steht es Ihrer Meinung nach um den Wissensstand auf diesem Gebiet bei den unzähligen Frontend-Entwicklern – ist das Thema endgültig in vollem Umfang angekommen?

Peter Kröner: Der durchschnittliche Web-Entwickler dürfte das Thema mittlerweile auf dem Schirm haben, schließlich baut kaum jemand heute noch neue Websites auf Basis von Flash. Jenseits von Frontend-Entwicklern, die ja seit jeher im Web zuhause sind, sieht es da schon anders aus – manch klassische Software-Schmiede steht dem Thema noch ein wenig reserviert gegenüber.

Als Beobachter der Szene haben Sie sicher eine ganz eigene Vorstellung davon, wie es um den Standard steht. Wo schießt HTML5 über das Ziel hinaus und wo gehen die Spezifikationen einfach nicht weit genug?

Peter Kröner: Den Spezifikationen von HTML5 und Co. an sich ist gar nicht so viel vorzuwerfen, denn zu fast allem gibt es irgendwo ein Dokument, das eine Browser-API spezifiziert. Es hakt da eher an den Browsern selbst. Die größte Ausnahme hiervon stellt aktuell wohl der Problembereich Responsive Assets dar. Dass es eine Möglichkeit geben muss, für Responsive Design auch dynamische Ressourcen bereitzustellen, ist keine neue Erkenntnis, aber der Streit über das Wie hat auch nach Jahren noch keine Lösung in die Browser gebracht.

HTML5 hat natürlich wesentlich mehr zu bieten als semantische Elemente – vor allem sind es zahlreiche JavaScript-APIs, die es Webentwicklern ermöglichen, ihre Websites und Web-Apps mit neuen und besseren Funktionalitäten zu versehen. Wie aufwändig wird dadurch allerdings der Ein- beziehungsweise Umstieg auf HTML5?

Peter Kröner: Performance ist hier einer der zentralen Aspekte. Zwar können die JS innewohnenden Performance-Limitierungen mit Web Workers oder ASM.js punktuell ganz gut überwunden werden, aber man darf nicht vergessen, dass die mobile Internetnutzung weltweit auf dem Vormarsch ist – und mobile Internetgeräte sind in allererster Linie vergleichsweise leistungsschwache Computer. Eine auf wirklich allen internetfähigen Geräten flüssige laufende Web-App mit JavaScript zu schreiben ist und bleibt eine große Herausforderung.

Auf den HTML5 Days halten Sie einen Workshop zu Web Workers. Wieso haben Sie sich genau dieses herausgepickt?

Peter Kröner: Auch hier wieder: Performance ist alles! Web Worker stellen eine API für JavaScript-Multithreading dar und sind für viele Apps, bei denen der Client schwere Rechenarbeit verrichten muss, absolut essenziell. Andere HTML5-APIs wie zum Beispiel Mikrofon- und Kamerazugriff werden erst durch Web Workers richtig interessant. Außerdem gibt es spannende Metaprogrammierungsaspekte, die viele andere Neuheiten aus den Bereichen HTML5 und JavaScript berühren.

Webentwickler, jetzt Tickets für die HTML5-Days sichern!

]]>
t3n Redaktion
Webkit für Raspberry Pi: HTML5-Browser startet in die Beta-Phase http://t3n.de/news/web-raspberry-pi-browser-geht-518832/ 2013-12-24T11:30:39Z
Der Web-Browser „Web“ wurde auf die Raspberry-Pi-Plattform portiert und liegt jetzt in einer Beta-Version vor. Ziel ist es, einen HTML5-Browser mit Unterstützung für viele Tabs und...

Der Web-Browser „Web“ wurde auf die Raspberry-Pi-Plattform portiert und liegt jetzt in einer Beta-Version vor. Ziel ist es, einen HTML5-Browser mit Unterstützung für viele Tabs und ARMv6-optimiertem Rendering zu entwickeln.

Raspberry Pi: Web-Browser befindet sich in der Beta-Phase. (Screenshot: Raspberry Pi)
Raspberry Pi: Web-Browser befindet sich in der Beta-Phase. (Screenshot: Raspberry Pi)

„Web“: Browser ist auf Raspberry Pi abgestimmt

Ob es sinnvoll ist, einen Web-Browser „Web“ zu nennen, sei mal dahingestellt. Zwischen 2003 und 2012 lief der Webkit-basierte jedenfalls unter der Bezeichnung „Epiphany“. Der Open-Source-Browser für die GNOME-Desktop-Oberfläche wurde jetzt auf Raspbian portiert. Eine erste Beta-Version steht ab sofort zum Download bereit.

Ziel des Projekts ist es, einen Browser für die Raspberry-Pi-Plattform zu entwickeln, der auch mit mehreren Tabs ordentlich funktioniert. Was bei dem 512-Megabyte-Gerät eine gewisse Anpassung erfordert. Das Rendering der Seiten soll auf die ARMv6-Architektur optimiert werden. Außerdem streben die Macher eine beschleunigte Darstellung von Bildern und HTML5-Videos an. Allerdings wird man das erst in der nächsten Version im neuen Jahr bewundern können.

Raspberry Pi: Web-Browser für Raspbian unterstützt HTML5 inklusive Canvas. (Screenshot: Raspberry Pi)
Raspberry Pi: Web-Browser für Raspbian unterstützt HTML5 inklusive Canvas. (Screenshot: Raspberry Pi)

„Web“: So installierst du den Raspberry-Pi-Browser

Wer die Beta-Version von „Web“ für Raspian bereits ausprobieren möchte, der muss die folgende Zeile zu /etc/apt/sources.list hinzufügen:

deb http://raspberrypi.collabora.com wheezy web

Anschießend installiert ihr den Browser mit diesen Befehlen:

sudo apt-get update; sudo apt-get upgrade

sudo apt-get install epiphany-browser cgroup-bin libraspberrypi0 libwayland-client0 libwayland-cursor0 libwayland-server0a

Den Browser findet ihr unter Raspbian dann im Applikationsmenü unter „Internet“.

]]>
Kim Rixecker
Skytte: Das beste HTML5-Browsergame aller Zeiten? http://t3n.de/news/html5-browsergame-skytte-516677/ 2013-12-13T13:49:37Z
Hier könnt ihr nicht nur ein cooles HTML5-Browsergame spielen – wir geben euch auch einen kleinen Einblick zur Produktion von Skytte.

Hier könnt ihr nicht nur ein cooles HTML5-Browsergame spielen – wir geben euch auch einen kleinen Einblick zur Produktion von Skytte.

Wer Shoot 'em Ups, Bullet-Hell-Shooter oder Raumschiffe mag, sollte Skytte nicht verpassen. Dabei steuerst du ein Raumschiff und musst in intergalaktischer Umgebung gegnerische UFOs abschießen – mit sechs verschiedenen Waffen. Insgesamt sieht sich der Spieler zehn verschiedenen Gegnertypen gegenüber, die es auszuschalten gilt. Zudem warten zehn unterschiedliche Power-Ups in insgesamt drei verschiedenen Leveln auf dich.

HTML5-Browsergame: Case Study

Die Entwickler des HTML5-Browsergames bieten aber noch mehr. In einer kleinen aber eindrucksvollen Case-Study gewähren die Entwickler Einblicke zum Entstehungsprozess von Skytte. Das Spiel wurde in insgesammt 500 Stunden entwickelt und dabei wurde ein eigener Partikel-Generator eingebaut, der Flammen als auch Rauch darstellen kann.

electro_algorithm
Elektro-Effekt des HTML5-Browsergames. (Screenshot: merixstudio)

Um die Elektrowaffe gut aussehen zu lassen, wurde noch zusätzlich ein Algorithmus entwickelt der eine gerade Linie in kleinere Teilstücke trennt und deren Mittelpunkte zufällig auf und ab bewegt. Aber nicht nur die grafischen Finessen sorgen für ein hohes Spielerlebnis – mit einem bewegbaren User-Interface werden Erschütterungen und Explosionen, eindrucksvoll umgesetzt.

HTML5-Browsergames

Bei Browsergames kann zwischen clientseitigen und serverseitigen Spielen unterschieden werden. Da Skytte ein clientseitiges Spiel ist, dass bei euch im Browser läuft, müsst ihr keine zusätzlichen Plugins herunterladen – was zum Beispiel bei Flash-Spielen der Fall wäre.

Da das Spiel, welches nur auf und JavaScript basiert, wirklich „gezockt“ werden muss, möchte ich euch nicht länger auf die Folter spannen – direkt zu Skytte.

Kennt ihr noch mehr HTML5-Browsergames?

]]>
Mario Janschitz
HTML5, Node.js, Windows Phone und mehr: Jetzt kostenfreien Microsoft-Support nutzen [Sponsored Post] http://t3n.de/news/trainings-frameworks-events-515420/ 2013-12-12T07:19:31Z
Ob Einsteiger, Fortgeschrittener oder Profi – Microsoft bietet Entwicklern umfangreiche und auf unterschiedliche Kenntnisstände zugeschnittene Support-Ressourcen. Die Übersicht der wichtigsten...

Ob Einsteiger, Fortgeschrittener oder Profi – Microsoft bietet Entwicklern umfangreiche und auf unterschiedliche Kenntnisstände zugeschnittene Support-Ressourcen. Die Übersicht der wichtigsten Support-Angebote enthält unter anderem Online-Trainings, Code-Beispiele und Frameworks sowie Tipps zur Vermarktung von Apps.

Mit myApp in wenigen Schritten zur App

Wer Apps entwickelt, freut sich über Unterstützung. stellt allen Entwicklern hierzu das zentrale Support-Portal myApp zur Verfügung, das unterschiedliche Support-Angebote bündelt und sowohl Anfängern als auch Fortgeschrittenen beziehungsweise Profis je nach Kenntnisstand die relevanten Angebote bietet. Eine umfassende Schritt-für-Schritt-Anleitung stellt dabei den gemeinsamen Rahmen dar, in dem die Angebote eingebunden sind. Er führt Anfänger und Profis gleichermaßen in vier Schritten zur erfolgreichen Anwendung für und Windows 8.

Zum leichten Einstieg stehen Entwicklern verschiedene Frameworks für Windows 8 und Windows Phone zur Verfügung, mit denen sich schnell erste Erfolge feiern lassen. Mit Code-Beispielen können auch komplexere App-Projekte leichter gestemmt werden. Mit Entwicklungsarbeit alleine ist der Erfolg einer App jedoch nicht garantiert. App-Marketing gehört inzwischen genauso zu erfolgreichen App-Projekten wie die Programmierung. Aus diesem Grund finden Entwickler auf myApp auch eine Übersicht mit hilfreichen Tipps zur App-Vermarktung sowie eine übersichtliche Checkliste, die die wichtigsten Punkte zusammenfasst.

Events und Support-Hotline: Der direkte Draht zu Microsoft

MVA_t3n_ Einen elementaren Bestandteil bei der Unterstützung von Entwicklern stellen die kostenlosen Veranstaltungen von Microsoft dar. Sie führen Einsteiger auf Plattform-Info-Days an die Thematik heran und bieten Fortgeschrittenen mit Hackathons die Gelegenheit, ihr Know-how unter Gleichgesinnten anzuwenden. Die aktuelle Runde an Hackathons und Plattform-Info-Days ist gerade zu Ende gegangen, für Anfang 2014 sind derzeit neue Termine in Planung.

Direkte Ansprechpartner finden Entwickler aber nicht nur auf den Veranstaltungen, sondern auch über myApp@microsoft.com oder über die kostenlose Support-Hotline 0800 – 60 87 33 8 (12:00–18:00 Uhr, kostenfrei aus dem deutschen Festnetz, Mobilfunknetz gegebenenfalls abweichend). Über beide Kontaktmöglichkeiten erhalten Entwickler bei konkreten Problemen mit App-Projekten kompetente Hilfestellung.

Zum Selbstlernen: Entwicklerkurse in der Microsoft Virtual Academy

Zeitlich unabhängig und mit kontrollierbarem Lernerfolg bieten die kostenlosen Online-Kurse der Microsoft Virtual Academy zusätzlich zu den bestehenden Support-Angeboten eine gute Möglichkeit, sich als Einsteiger selbstständig in neue Produkte und Technologien einzuarbeiten oder als Fortgeschrittener vorhandenes Wissen zu vertiefen. Wie alle übrigen Support-Angebote deckt dabei auch die MVA die komplette Bandbreite an Kursen ab und stellt Entwicklern eine wachsende Zahl deutschsprachiger Kurse zur Verfügung. Technical Evangelist Dariusz Parys beispielsweise zeigt allen Webentwicklern, welche Neuerungen in Sachen Canvas, SVG und Web Sockets mit sich bringt und gibt eine Einführung in Node.JS und die Node.js-Tools für Visual Studio. Daniel Meixner hingegen bietet eine Einführung in die Neuerungen der Visual Studio 2013 IDE. Einen Einführungskurs in Texterkennung, Übersetzungen und Sprachausgabe in Windows 8-1-Apps leitet er ebenfalls.

Ins Deutsche übersetzte Kurse beschäftigen sich zudem mit der App-Entwicklung für Windows 8 mit HTML5, mit dem Erstellen von Web-Apps mit ASP.NET oder einem Schnelleinstieg in die Programmierung mit C#. Entwicklern im Microsoft-Umfeld stehen also unterschiedlichste Support-Angebote zur Verfügung, die fit für die App-Entwicklung für Windows 8 und Windows Phone machen – egal ob es um erste Schritte oder um komplexe App-Projekte geht.

Die wichtigsten Support-Angebote hier als PDF-Dokument herunterladen!

]]>
t3n Redaktion
1.000 Euro Belohnung: t3n.de sucht einen Frontend-Developer (HTML5/CSS/JS) (m/w) http://t3n.de/news/css-js-baumeister-t3nde-sucht-499951/ 2013-12-09T12:45:30Z
Zur Unterstützung unseres Entwicklerteams suchen wir ab sofort einen Frontend-Developer (m/w). Du kennst jemanden, der gut zu der Stelle passen könnte? Dann sicher Dir unsere Belohnung in Höhe...

Zur Unterstützung unseres Entwicklerteams suchen wir ab sofort einen Frontend-Developer (m/w). Du kennst jemanden, der gut zu der Stelle passen könnte? Dann sicher Dir unsere Belohnung in Höhe von 1.000 Euro, die die Person erhält, die uns den Kontakt zum Frontend-Developer (m/w) vermittelt.

t3n-frontend-dev-baumeister-2

Alles was Du tun musst, ist uns den Kontakt zu einem passenden Kandidaten für die Stelle des Frontend-Developer (m/w) herzustellen. Wenn dein Kontakt der neue Mitarbeiter wird, bekommst Du 1.000 Euro als Belohnung. Folgendes Profil sollte dein Kontakt erfüllen:

Dein Profil:

Du bist ein Vollblut-Frontend-Developer mit Fokus auf Design, Usability, sauberes , CSS3 und nicht zuletzt Javascript/jQuery. Du bist ein kommunikativer, offener Typ, hast Spaß daran, verständliche Interfaces zu entwickeln, im Technik-Team für alle Webdesign-Themen der erste Ansprechpartner zu sein und dich immer mit den neuesten Entwicklungen zu beschäftigen. Du bist keine Design-Diva, aber auch kein Feierabend-Designer. Über deine Webentwickler-Tätigkeit hinaus verfügst du über ordentliche Kenntnisse in den gängigen Designer-Tools wie Adobe Photoshop und Adobe Illustrator/InDesign. Grafiken aus deiner Feder tragen deine Handschrift. Du hast schon mehrere Jahre im Frontend-Developer-Business hinter dir. Dein Gespür für gutes Design spiegelt sich in jedem Detail deiner Tätigkeit wieder.

Zu Deinen Aufgaben gehören unter anderem:

  • Frontend-Developement für t3n.de (HTML, CSS, Javascript, jQuery)
  • Interface-Entwicklung für weitere, webbasierte Lösungen (zum Beispiel t3n.de-Shop, Adserver-Interface, Microsites ...)
  • t3n.de auf mobilen Geräten (Relaunch mit Responsive Template)
  • Möglichst elegante Integration von Werbemitteln (Abstimmung mit Onlinevermarkter, testen neuer Bannerformate, responsive Ads ...)
  • Evaluieren von Toolkits/Libraries/neuen Technologien (zum Beispiel NodeJS, SASS, Grid-Layouts, jQuery-Plugins ...)
  • Du hilftst dabei, immer einen Schritt voraus zu sein, in dem du neueste Technologien im Auge behältst und auf Ihre Verwendbarkeit prüfst

Das bieten wird dir:

  • einen Platz in einem jungen Team in einem hochinnovativen und schnell wachsenden Medienunternehmen mitten in Hannover
  • faire Bezahlung und geregelte Arbeitszeiten
  • keine Kundenprojekte, keine DAU-Kommunikation – nur eigene Produkte hinter denen wir stehen
  • Schnelles SSD-MacBook Pro mit Thunderbolt-Display und Zubehör als Arbeitsgerät (wahlweise auch gleichwertiges Gerät von Lenovo oder Ähnlichem möglich)
  • 10 gute Gründe, für t3n zu arbeiten
  • gratis Kaffeespezialitäten, Müsli, Früchte, Frühstück und kühle Getränke

team_bbq

Wenn Du dir vorstellen kannst, eine wichtige Rolle in unserem Entwicklerteam zu übernehmen und Lust hast, aktiv die weitere Entwicklung eines jungen Medienunternehmens mitzugestalten, sende uns bitte deine vollständigen Bewerbungsunterlagen inklusive einer Beschreibung deiner bisherigen Berufspraxis sowie einer Angabe deines frühesten Eintrittstermins per E-Mail an jobs@yeebase.com.

20120709_button_jetzt_bewerben

]]>
Charlyn Schaper