Category Archives: HTML 5

JavaScript – Thunderforest Maps API .

The Thunderforest Maps let you to use map styles in your apps and on your websites.
You can have a free account see: Hobby Project
You can also buy it:

  • Solo Developer
  • Small Business
  • Large Business

The maps come with this map layers:

  • OpenCycleMap
  • Transport
  • Landscape
  • Outdoors
  • Transport Dark
  • Spinal Map
  • Pioneer
  • Mobile Atlas
  • Neighbourhood

This is one example using the Pioneer layer map into old style , see the next image:

This is the source code to test it with your API key:

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

HTML5 – the tags contenteditable .

The The contenteditable tag attribute specifies whether the content of an element is editable or not.
The contenteditable attribute is new in HTML5 and when the contenteditable attribute is not set on an element, the element will inherit it from its parent.
The basic example is this (let you to change the text):

Now you can use style to make it more wonderful. See my example from account :

Just create one html5 file and add this source of code:

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

JavaScript – browser user agent.

This is a simple tutorial with java script to see the browser user agent.
About user agent:
– user agents are unique to every visitor on the web;
– everyone that is browsing the web right now has a user agent;
– browsers are a example of a user agent;
– other tools can act as agents;
– user agent has identified itself to the web server with a process called content negotiation;
– it’s possible to send a fake user agent, a process known as “spoofing.”
Now about how to see the user agent with browser.
Let’s start with create your folder and add a index.html file.
Add also into this folder another folder named js.
Into js folder add a file named index.js file.
Into index.html file add this source code:

Into index.js file add this source code:

When you open the index.html file with your browser the you can see your browser user agent.
For example the result of this script into my browser is:

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

JavaScript – deck – online slides.

Here’s another tutorial on javascript that I think should be remembered.
This javascript tool named deck.js help you to:

  • Create a deck with slides.
  • Slide has content into simple HTML.
  • You can choose themes, like: slide styles and one for deck transitions.
  • Also, you can include extensions to add extra functionality to your deck, or leave it stripped down.

This javascript tool can be found here and come with this structure:

  • deck.core
  • deck.goto
  • deck.navigation
  • deck.scale
  • deck.status

How this working ?
Let’s see a simple example.
First download the deck.js from here.
Open the folder and you will find a html file named boilerplate.html.
This file show a basic example of slideshow.
You just need to change this part of source code with your content:

A good presentation of the functionality of this tool is here.
A list of themes, extensions and tools available for deck.js can be found here.

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

JavaScript – Booklet – part 001.

Today I tested the Booklet jQuery tool, because I did not find too much data on this tool on the internet.
This help me to display the content on the web in a flipbook layout.
In this tutorial, I will only present a book of web page sizes, changing the color of the cover and adding text.
This tool also allows other features, but I will return to the right time.
It was built using the jQuery library and is licensed under the MIT license.
You can read documentation and download it from here.
I download and unarchive this tool to default folder booklet-master.
Because this tool come with a index.html file, I create a index2.html file and I add my source code.
To change the default brown cover I change this line of code from this file jquery.booklet.latest.css ( from src folder ).
.booklet .b-page-cover {padding:0; width:100%; height:100%; background:#dddddd;}
This is my index2.html file and result is a book with some text.

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