Tag Archives: HTML 5

HTML5 – Example calendar – ruler.

This is a simple calendar ruler example make just with HTML5 and one CSS file.
The example can be see here.
Create one folder and put two file named: index.html and style.css.
The style.css file come with this source code:

The index.html file can have this source code:

Posted in All, HTML 5, Programming. Tagged with , , , , .

HTML5 – Example of 360 online video player.

In this tutorial, I will show you a source code for a video file player in HTML5.
The main reason I created this source code was: testing 360 degree and / or 3D ( red and blue ) video files created with the 3D Blender rendering program.
The source code is very simple. We have a part to create HTML5 elements: text messages, file upload button, message display, and video part.
These elements are stylized with CSS colors with the style tag.
The last part is the javascript script that actually handles uploading, testing and then playing the file.
You can create a HTML5 file , paste this code and test it with your video file.

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , , , .

Create a starfield with Three.js .

You need to create two files into your folder and use this filenames : index.html and starfield.js .
First file index.html come this source code:

The next file is a java script and come with this source code:

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , , .

JavaScript – Processing.js 2D library – part 003.

In this tutorial I will show you how to use images with processing.js.
You can use image from your computer or from url.
Let’s see one simple code example:

You can see same example on openprocessing web tool.
The openprocessing web tool allow you to use Processing.js and P5.js .

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , , , .

JavaScript – FlipClock .

Another tutorial about javascript and HTML5 .
The FlipClock is a javascript source code and tool to let you to make a flip clock .
As you know :
A flip clock is an electromechanical, digital time keeping device with the time indicated by numbers that are sequentially revealed by a split-flap display.
This javascript come with many options and feature to set your flip clock:

  • Hourly Counter
  • Minute Counter
  • Daily Counter
  • 12hr Clock
  • 24hr Clock
  • General Counter

You need to download it and then you can try the examples from examples folder.
The next example come with the base of the css file and the flipclock.js .
I just set the clockFace setting to TwentyFourHourClock.
You can used this javascript to show: counter, countdown or interval.

Posted in All, HTML 5, javascript, Programming. Tagged with , , , , , , .