HTML5 Datenbank mit persistence.js Tutorial

Mit persistence.js lässt sich eine lokale Datenbank mit Javascript erstellen ohne einen Datenbank-Server und eine Internet Verbindung.

Unterstütze mobile OS von persistence.js:

  • Android Browser (getestet auf 1.6 und 2.x)
  • iPhone Browser (iPhone OS 3+)
  • Moderne Webkit Browser (Google Chrome und Safari)
  • Firefox (über Google Gears oder In-Memory Database und LocalStorage Fallback)
  • Opera
  • Palm WebOS (getestet auf 1.4.0) weiterlesen…

Flash vs HTML5 Trendanalyse

Es gibt unzählige Diskussionen über die Vorteile von HTML5 und dem Ende von Adobe Flash, aber der Hauptindikator ist immer noch, wieviele Leute sich mit dem jeweiligen Thema beschäftigen und z.B. Artikel schrieben oder Programme entwickeln.

Mit Hilfe von Google Trends lässt sich ein interessanter Überblick über das Interesse an den beiden Thema gewinnen, der klar zugunsten von HTML5 ausgeht.

HTML5 Trend

 Flash Trend

Mein persönliche Meinung ist, dass Flash ein sehr fortschrittliches Werkzeug für die Erstellung von Webanwendungen und Animationen war, es aber durch verschiedenste Nachteile ins hintertreffen gekommen ist, weil zu wenig Innovationen in den letzten Jahren hinzugekommen sind:

Nachteile von Flash

  • SEO sehr aufwendig, von hause aus nicht von Google lesbar
  • feste Webseitenbreite
  • viele Sicherheitslücken
  • es ist nur ein Plugin und muss installiert  werden
  • Performance Probleme

Was nicht heißen soll, dass Flash nicht viele Sachen noch besser beherrscht als HTML5, aber auch aufgrund der Trendanlyse lohnt es sich nicht mehr auf Flash zu setzen, bei Neutentwicklungen.

Das Apple Flash nicht unterstützt auf iPad und iPhone ist natürlich auch ein nicht zu unterschätzender Nachteil.

Three.js Tween Übersicht Animationen Möglichkeiten

Hier gibt es eine sehr gut Abbildung der möglichen Animation (Tweens) in Three.js:

http://www.grasshopper3d.com/profiles/blogs/port-of-robert-penner-s-easing-equations?xg_source=activity (siehe sehr gute Abbildung in den Kommentaren)

Zum Einbinden ist das sehr hilfreich: Tutorial Tween three.js

 

Ein kleines Beispiel für einen Tween:

new TWEEN.Tween( cube.rotation )
        .to( { y: (cube.rotation.y + Math.PI/2)}, 1500 )
        .easing( TWEEN.Easing.Back.EaseInOut).start();

HTML5 Canvas Text auf Canvas schreiben richtiger Zeilenumbruch

Wenn man einen bestimmten Text auf einen Canvas schreiben will und dafür bestimmen will, wann ein Text umgebrochen werden muss, kann man die folgende Funktion benutzen, die aus einem Text in Array macht in Abhängigkeit des Canvas.

Bsp:

var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
//vorher muss Schriftgröße des Canvas gesetzt werden
context.font = "30px arial";
textArr  = textToArray ("Wordpress eigene Farben und CSS Klassen in den Editor einbauen", 300, context);
//textArr enhält ["Wordpress Plugin"] und ["selber erstellen Tutorial"]
textToArray = function(text, maxWidth, context){
    var textArr = new Array();
    var fragment = "";
    var lastCutPostion = 0;
    var lastPossibleCutPosition = 0;
    var charCounter = 0;
    var position = 0;
    $j.each(text, function(index, char) {
        if(char == " " && charCounter != 0)
        {
            fragment  = text.substring (lastCutPostion, position);
            //console.log(fragment);
            textWidth = context.measureText(fragment).width;
            //console.log(textWidth);
            if(textWidth > maxWidth)
            {
                //console.log("max width reched");
                fragment  = text.substring (lastCutPostion, lastPossibleCutPosition);
                //console.log(fragment);
                textArr.push(fragment);
                charCounter = -1 + (position - lastPossibleCutPosition);
                lastCutPostion = lastPossibleCutPosition + 1;
            }
            lastPossibleCutPosition = position;
        }
        position++;
        charCounter++;
    });
    //do not forget the last Word
    if(charCounter > 0)
    {
        fragment  = text.substring(lastCutPostion, text.length);
        textWidth = context.measureText(fragment).width;
        //console.log(textWidth);
        if(textWidth > maxWidth)
        {
            fragment  = text.substring (lastCutPostion, lastPossibleCutPosition);
            lastCutPostion = lastPossibleCutPosition + 1;
            textArr.push(fragment);
            fragment  = text.substring(lastCutPostion, text.length);
        }
        textArr.push(fragment);
    }
    return textArr;
}

Canvas rotieren um 180 Grad

Zum rotieren eines Canvas um den Mittelpunkt um 180 oder 90 Grad, kann man folgende Funktion benutzen.

90 Grad = nach rechts drehen

180 Grad = auf den Kopf stellen

270 Grad/ -90 Grad = nach Links drehen

 

var x = document.createElement("canvas");
 var context = x.getContext("2d");
 rotateCanvas(180, context)

 

rotateCanvas= function(degree, context)
{
    context.translate( canvasWidth, canvasHeight);
    context.rotate(degree* Math.PI / 180);
    context.translate(0, 0);
    return context;
}

Anordnen von WebGl 3D Objekten mit three.js

var pageRotation = 0.9; 
var pageHeight = 300; 
var pageWidth = 200; 
var pageLength = 20; 

bookPageContainer = new THREE.Object3D(); 
bookPageContainer.rotation.x = pageRotation;

//linkes Buchhälfte
 leftPageContainer = new THREE.Object3D();
 leftPageContainer.position.set( -pageLength/2, 0, 0 );
 leftPageContainer.rotation.z = -Math.PI * 0.5;
 leftPageCon = new THREE.CubeGeometry( pageWidth, pageLength, pageHeight, 1,1,1, loadLeftPageTextures());
 leftPage = new THREE.Mesh(leftPageCon, new THREE.MeshFaceMaterial());
 leftPage.position.set( -100, 0, 0 );
 leftPageContainer.add( leftPage );
 bookPageContainer.add( leftPageContainer );

//Buchrücken
 bookSideCon = new THREE.CubeGeometry( pageHeight, 1, 2* pageLength, 1,1,1, getBookSideTextureWithText("Buchrücken"));
 bookSide = new THREE.Mesh(bookSideCon, new THREE.MeshFaceMaterial());
 bookSide.position.set( 0, -pageLength/2 , 0 );
 bookSide.rotation.y = -Math.PI/2;
 bookPageContainer.add( bookSide );

//rechte Buchhälfte
 rightPageContainer = new THREE.Object3D();
 rightPageContainer.position.set( pageLength/2, 0, 0 );
 rightPageContainer.rotation.z = Math.PI * 0.5;
 rightPageCon = new THREE.CubeGeometry( pageWidth, pageLength, pageHeight, 1, 1, 1 , new THREE.MeshLambertMaterial( { color: 0x00ff00, wireframe: false, needsUpdate: true } )) ;
 rightPage = new THREE.Mesh(rightPageCon, new THREE.MeshFaceMaterial());
 rightPage.position.set( 100, 0, 0 );
 rightPageContainer.add( rightPage );
 bookPageContainer.add( rightPageContainer );

scene.add(bookPageContainer);

Ergebnis (Perspektive ist geändert worden):

WebGL Tutorial mit three.js

Mit Hilfe von WebGL lassen sich 3D Animation, Spiele und Webseiten komplett in 3D ohne Plugin (wie bei Flash) realisieren. WebGL wird erst von wenigen Browser unterstützt, was der Hauptnachteil ist:

  • Firefox ab 4.0
  • Chrome ab 9.0
  • Safari (OS X) ab 5.1 (ist aber standardmäßig deaktiviert)
  • Opera, nur Beta-Builds
  • Internet Explorer, aus “Sicherheitsgründen” wahrscheinlich nie
  • Android Standard Browser, sehr viele
  • iOS, theoretisch ja ab iOS5.0, aber praktisch nur für iAds für schicke Werbung (typisch Apple, Hauptsache Geld verdienen)

Als Testbrowser zur Entwicklung empfiehlt sich Chrome aufgrund der Geschwindigkeit und der sehr guten Unterstützung. Google ist sehr bemüht WebGL voranzutreiben und bietet auf einer eignen Webseite eine sehr gute Übersicht über interessante Projekte.

Vom Standard her basiert WebGL auf OpenGL ES2.0, optimiert für mobil Anwendungen und deren niedrige Leistungsfähigkeit.

WebGL mit three.js

Zur 3D Programmierung im Browser mit WebGL sollten man auf jeden Fall ein leistungsstarkes Framework benutzen. Ich habe mich für three.js entschieden, da es das z.Z. populärste mit den meisten Tutorials und Erweiterungen ist. Laut Aussage der Entwickler ist es auch das einfachste Framework:

“The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies.”

Alle Feature gibt es hier.

Ein paar sehr intreressante Demos: Skin, Terrain, Text, Sammlung alles Demos.

Lizenz: MIT License

Dokumentation (Version 49): Doku, allgemein ist die Doku noch ausbaufähig und enthält nur Todos und keine richtige Hilfe. Ein dicker Nachteil. Es wird oft empfohlen sich anhand der mitgelieferten Samples in die benötigten Methoden und Objekte einzuarbeiten, was auch gut funktioniert.

Eine Übersicht über alle WebGL Frameworks findet man hier (z.Z. ca. 30 Stück). Der Hoster dieser Seite Khronos ist übrigends der Entwickler des WebGL Standards. weiterlesen…

HTML5 Tutorial

Die neuen Funktionen und Anwendungen von HTML5 im Überblick

Die neuen Formulare

Auch bei Formularen hat HTML5 interessante Neuerungen implementiert. Die Benutzerfreundlichkeit wird durch die neuen Funktionen verbessert, die zwar schon vorher durch Javascript-Bibliotheken vorhanden waren, jedoch jetzt endlich auch ohne aktiviertes Javascript benutzt werden können. Dies gilt im Übrigen für fast alle neuen Funktionen.

number

Mit einem einem input-Formular des Typs number, ist es möglich Zahlenwerte vom User einfacher abzufragen, sowie einen Wertebereich sowie einen Mindestabstand zwischen den möglichen Wahlwerten vorzugeben ohne den User mit komplizierten Regeln zu überfordern.
Aktuell kann nur Opera diesen Typ darstellen. <input type="number" min="18" max="65" step="1">

 

Darstellung in Opera 11.01:html5 number opera
Ihr aktueller Browser:

weiterlesen…