» web design

Exporting to HTML5 from InDesign pt5 – meta tags

May 132013

Running on from my last post on using the in5 plugin to export to HTML5, I noticed that when you chose as an output the iPad web app option, testing this in your browser on your iPad produced an interesting result. The pages were all in fullscreen mode, and they were locked that way. You could not see the normal browser buttons etc, you were fully immersed in the set of pages that you exported. This was interesting, and I guessed that it must be due some meta tags that were telling the browser what to do. Looking at the source code, here are the meta tags created when you export… Read more...

Exporting to HTML5 from InDesign pt3

HTML5, InDesign No Responses »

May 072013

Running on from my last post, where I was using the excellent in5 plugin for exporting to html5, I wanted to mention a couple of the options within the export panels. The first is the text rendering setting.This is in the Basic area of the export panel, and previously I had set this to Images (preserves exact appearance). This means that the titles that I used looked right, but were images…

text render 1

But look what happens when I set this to HTML with local font embedding (where possible)…

text render 2 Read more...

Exporting to HTML5 from InDesign pt2

HTML5, InDesign No Responses »

May 072013

In a previous post I talked about a lovely new InDesign extension called in5. It exported to html5 beautifully. But I had only tried it with simple layout and colours. Now I am going to follow on from that example but I am going to export 5 pages instead, and I am going to add some content. First off here is my original sample from previously…

Simple InDesign layout Read more...

HTML5 game development – a new course

HTML5 No Responses »

May 072013

I am currently in the process of creating a new course (which is always great fun). This time round it will be on HTML5 game development. HTML5 has come a long way since we started training it 3 years ago, so now I feel is the time to create a game development course using html5, css3, and JavaScript. In order to develop games, though, I will uses a few JavaScript libraries to make training easier. There are more and more JavaScript libraries out there, specifically for game development, that it makes sense to use a couple of them. Here I am going to introduce some of the libraries that I have come across. I have not finally decided on which ones to use yet, but I plan to make three types of games in the html5 5 Games Development course. Read more...

Exporting to HTML5 from InDesign

HTML5, InDesign No Responses »

May 072013

Having done a lot of HTML5 work in recent years, I was looking for a quick way to export my information from various applications that I use all the time. Today I am going to show you how to export from InDesign to HTML5. Exporting to html is easy, unfortunately the current export command is very poor. In order for me to export to HTML5 from InDesign properly I am going to use a lovely extensions called in5. This is not free, but if you need to get your content out to a web-based format quickly, especially into html5, then this is a very useful tool. Read more...

JavaScript animation – using EaselJS pt 2

HTML5 No Responses »

Jan 062012

In this post I am continuing my foray into Easel.js. Here I am now actually displaying and animating pictures. So this post is about JavaScript animation – using EaselJS pt 2. We will be making this…

EaselJS animation v1

…and it will be the car that is moving across the screen.

Again you need to make up a simple html5 page and link to the easljs library…

First you need to create a stage and link it to your canvas element…

var page = document.getElementById(“canvas”);
var stage = new Stage(page); Read more...

Which web technologies?

Flash, HTML5 No Responses »

Oct 032011

In a flash class recently I was asked which technologies some one needs to be aware of and competent with when dealing with web design. In answer I quickly knocked a simple ideas chart to showcase which web technologies you need to know, and also some notes about where things are/were and where they are going…

Which web technologies

The big thing of course is html5 and Flash. As you can see from the diagram, everything Flash can do (broadly speaking) can be done in HTML5, with the caveat that HTML5 covers CSS3/JavaScript/HTML5 and things like WebGL. Read more...

Learning three.js

HTML5 No Responses »

Sep 232011

In my foray into the world of WebGL, I came across three.js, a JavaScript library for doing 3D in a web browser, with no plug-ins needed. It can render in three types – WebGL, SVG, or directly into the canvas. So I thought I would go through Three.js and see how easy it is to create a 3D scene. So, in this my first post into learning Three.js I will just create a simple shape – a sphere. Read more...

More JavaScript libraries

HTML5 No Responses »

Sep 162011

Just a quick update to my JavaScript libraries collection. Here are some more JavaScript libraries – things just seem to be getting better and better as far as JavaScript and HTML5 and the web are concerned!

three.js – A brilliant lightweight 3D engine (works with WebGL, amongst other things)

https://github.com/mrdoob/three.js/

newton.js – box2d plus raphael (does not seem to be released yet, but looks fantastic)

[tubepress video="bJ_ONON90fo"]

paper.js - The Swiss Army Knife of Vector Graphics Scripting (looks like great fun)

http://paperjs.org/about/

processingjs - Processing.js is the sister project of the popular processing visual programming language, designed for the web – superb for data visualisations Read more...

What is WebGL?

HTML5 No Responses »

Sep 092011

I have recently been taking an interest in WebGL, so I thought I would post some information about WebGL here, and also add some links to some of the examples that I have found.

What is WebGL? WebGL is a graphics library that extends JavaScript to allow it to generate some truly spectacular 3D graphics, within the browser, with no plug-ins needed. It uses the computer’s GPU (Graphics Processing Unit), and as such is a fairly low-level language (read: complicated).

WebGL interactive water example / (http://madebyevan.com/webgl-water/)

[tubepress video="R0O_9bp3EKQ"] Read more...

Older Entries