HTML5 database with persistence.js tutorial

With persistence.js you can create a local database using JavaScript without a database server and an Internet connection.

Support mobile OS by persistence.js:

  • Android browser (tested on 1.6 and 2.x)
  • iPhone browser (iPhone OS 3+)
  • Modern WebKit browser (Google chrome and Safari)
  • Firefox (LocalStorage or in-memory database with Google Gears fallback)
  • Opera
  • Palm WebOS (tested on 1.4.0) more…

Flash vs HTML5 Trend Analysis

There are countless discussions about the benefits of HTML5 and the end of Adobe Flash, but the main indicator is still, how many people are concerned with the particular subject and as. Articles written or develop programs.

Using Google Trends can be gained an interesting overview of the interest in the two topic, emanating clearly in favor of HTML5.

HTML5 Trend

 Flash Trend

My personal opinion is, that Flash was a very advanced tool for creating web applications and animations, however, it is passed through a variety of disadvantages to meet behind, because too few innovations have been added in recent years:

Disadvantages of Flash

  • SEO is extremely complex, of home made unreadable by Google
  • fixed width website
  • many vulnerabilities
  • it's just a plug-in and must be installed
  • Performance Problem

What not to say, that Flash is not many things better than HTML5 dominates, but also because of the Trendanlyse it is no longer worthwhile to rely on Flash, at Neutentwicklungen.

The Apple does not support Flash on iPad and iPhone is of course a disadvantage not to be underestimated.

Three.js Tween Overview animation options

There is a very good illustration of the kinds of animation (Tweens) in Three.js:

http://www.grasshopper3d.com/profiles/blogs/port-of-robert-penner-s-easing-equations?xg_source=activity (see very good image in the comments)

To incorporate the very helpful: Tutorial Tween three.js

 

A small example of a tween:

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

HTML5 Canvas Canvas write text on real line break

If you want to write some text on a canvas and it will determine, when a text has to be wrapped, You can use the following function, the making of a text array in a function of the 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;
}

Um rotieren Canvas 180 Degree

To rotate a canvas at about the midpoint 180 or 90 Degree, can use the following function.

90 = Degree turn to the right

180 Degree = upside

270 Degree / -90 = Degree turn to the left

 

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;
}

Arranging WebGL 3D objects with 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);

Result (Perspective has been changed):

WebGL Tutorial mit three.js

Using WebGL 3D animation can be, Games and websites in full 3D without Plugin (As with Flash) realize. WebGL is only supported by a few browsers, which is the main disadvantage is:

  • Firefox ab 4.0
  • Chrome ab 9.0
  • Safari (OS X) from 5.1 (is disabled by default)
  • Opera, nur Beta-Builds
  • Internet Explorer, from “Safety” probably never
  • Android Standard Browser, a great many
  • iOS, Theoretically yes from iOS5.0, but in practice only for iAds for sending advertising (typisch Apple, The main thing money)

As for development, test browser Chrome is recommended due to the speed and the excellent support. Google's push very hard on WebGL and provides a suitable site very good Overview of interesting projects.

From standard ago based on OpenGL ES2.0 WebGL, optimized for mobile applications and their low efficiency.

WebGL mit three.js

To 3D programming in the browser using WebGL you should definitely be using a powerful framework. I chose three.js decided, because the z.Z. popular with most tutorials and extensions. According to the developers, it is also the simplest 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.”

All feature it here.

A few very intreressante demos: Skin, Field, Text, Collection of all demos.

License: MIT License

Documentation (Version 49): Doku, generally, the document is still scalable and contains only Todos and no real help. A thick disadvantage. It is often recommended to familiarize yourself using the included samples in the required methods and properties, what works well.

A Overview of all WebGL Frameworks you can find here (z.Z. as. 30 Piece). The hosting of this site BTW is the developer of the Khronos WebGL standards. more…

HTML5 Tutorial

The new features and applications of HTML5 Overview

The new forms

Even with HTML5 forms has interesting features implemented. Ease of use is enhanced by the new functions, although they were available through JavaScript libraries already, But now finally can be used without javascript enabled. These privileges are required for almost all the new features.

number

With a one-form input of type number, is it possible to retrieve numbers from users easier, as well as a range of values, and a minimum distance between the possible choice values ​​without reference to the user with complicated rules to overtax.
Currently, only Opera represent this type. <input type="number" min="18" max="65" step="1">

 

Display in Opera 11.01:html5 number opera
Your current browser:

more…