Kategorie: HTML5

Kategorien
CSS HTML5

Arial kostenlos als Webfont einbinden auf einer Webseite

Wenn man gern Arial als Schriftart auf seiner Webseite einbinden will und möchte, dass auch alle Besucher diese Schriftart verwenden sollen, auch die, die es nicht installiert haben, muss man den Font als Webfont einbinden.

Das Problem ist, dass Arial nicht frei verfügbar ist, sondern eine Lizenz dafür erworben werden muss: kostenpflichtiger Download.

Wenn man gern ohne Bezahlung Arial verwenden will, dann kann man einfach die Liberation Sans als Ersatz nehmen, welche fast genauso aussieht und kostenlos ist: Download Liberation Sans.

Diese lässt sich dann als Webfont einbinden:

@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}


@font-face {
  font-family: liberation_sans;
  src: url('/assets/fonts/liberation_sans/LiberationSans-BoldItalic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

body{
    font-family: liberation_sans;
}
Kategorien
HTML5 JavaScript

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:

Kategorien
HTML5

Vortrag über HTML5

Hier ein Präsentation über HTML5 und die Möglichkeiten/Grenzen der Technologie in englischer Sprache.

Gliederung:

  1. HTML & HTML5 Basics Facts
  2. Flash vs. HTML5
  3. HTML5 – the new features

Download Link: html5_presentation.ppt

Kategorien
HTML5 SEO

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

<script type="text/javascript" src="//www.google.com/trends/embed.js?hl=de&q=html5&cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=600&h=350"></script>

 Flash Trend

<script type="text/javascript" src="//www.google.com/trends/embed.js?hl=de&q=flash&cmpt=q&content=1&cid=TIMESERIES_GRAPH_0&export=5&w=600&h=350"></script>

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.

Kategorien
WebGL

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();
Kategorien
HTML5 JavaScript Web Frontend WebGL

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;
}
Kategorien
HTML5 Web Frontend WebGL

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;
}
Kategorien
HTML5 JavaScript WebGL

Three.js Camerasteuerung mit der Tastatur

Um mit der Tastatur (a,w,s,d und q,e und t,g,f,h) in einem three.js 3D-Projekt die Kamera zu bewegen, sind ein paar einfach Schritte nötig.

in der init-Methode

document.addEventListener( 'keypress', onDocumentKeyPress, false );

und eine einfache Methode

Weiterlesen „Three.js Camerasteuerung mit der Tastatur“
Kategorien
WebGL

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):

Kategorien
HTML5 Web Frontend WebGL

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 „WebGL Tutorial mit three.js“