E-Learning for Toddlers and Pre-Schoolers: HTML5 Alphabet Learning/Hand-Writing
Achieving higher learning through the use of computers. (Photo credit: Wikipedia)
Next up in my little “E-Learning for Toddlers” series is this example which was extended/based (i.e. blatantly lifted) from the excellent “Stay-in-the-Letter” initial concept by Chris Heilmann which I saw on the Mozilla Hacks blog:
https://hacks.mozilla.org/2013/06/building-a-simple-paint-game-with-html5-canvas-and-vanilla-javascript/
My pilfering of this little app concept was for solely and completely personal reasons for teaching my own son, as I simply wanted to see if I could extend it to support the main Japanese characters (hiragana/katakana, maybe even kanji at a later date) as well as extending the English alphabet which it was already designed for to also provide phonetical readings of each character (should work whether using in English or Japanese mode).
E-Learning for Toddlers and Pre-Schoolers: HTML5 Memory Game
These days, digital distractions are far too proficient at taking our attention away from important responsibilities. You know, like giving your children the care and attention they need and deserve. Especially when it comes to teaching and learning, I even find myself guilty of becoming quickly bored to tears of the typical paper flash word cards and basic, repetitive picture books for toddlers and pre-school aged children.
To fight this boredom, yet still fulfil my fatherly duties, I decided to put my “day job” skills to use and at the same time develop yet another requisite “me-too” HTML5 web app, but this time with a good purpose; namely, teaching my son more interactively.
This is a simple word/alphabet memory game I developed for teaching my child. He has trouble remembering certain colors, words and letters so this game basically mixes up a set of images and uses their filename to display an image. If the folder is prefixed with “alphabet_” it will also create a large letter “stencil” containing the first letter in the top left corner of each card.
It can easily be used for just about any subject by dropping a new folder in the images directory, full of the images you want to appear in the game.
For example’s sake, I’ve added “Animals”, “Numbers” and “Colors” as separate categories just so others can see how this is possible, and the possibilities are really endless.
Read the rest of this entry »
HTML5 Radio Tuner (powered by ShoutCast API)
Pioneer radio tuner 70s (Photo credit: Barrie Sutcliffe)
Since I wrote about Skeumorphs last month, I thought I’d include this piece I had worked on. This is an older idea I had that I’d done the initial design for but forgot (ahem… procrastinated) to do the coding for back when I had the idea. The general concept was to replicate the look of an old-school needles and knobs analog radio.
I’ve always sought to bring more humanity to the online content experience. If we have to be forced to sit in an office or stare into a screen for most of our waking lives, just to be considered “modern and relevant” and have a chance to compete in this global marketplace, then the experience might as well feel natural and familiar to our interactions with the real world. It might as well be a pleasant co-existence with technology, rather than a mechanical, robotic, in-human and uncomfortable one.
So enough of that esoteric philosophy nonsense and on to the interesting stuff. The concept is that I missed the radio dial on my grandfather’s old analog radio. As a child, I used to play with the knobs and enjoy tuning into many different stations. It was a long-range radio so on a good day in my teenage years, I could even tune into the Howard Stern show broadcast from New York and some of the more edgy french stations from Quebec. Even my grandfather’s gone digital now though, so I figured the fond memory of this technology from the past might as well too.
There were 5 main components to this project:
Read the rest of this entry »
HTML5 features template and HTML5 skeleton
Image via Wikipedia
With all the buzz about HTML5 its high time to release an official post on the subject and cement our intention to support the standard fully. It is impossible to ignore the possibilities of a single thin-client based development environment and common sets of tools for working with them. Add to that the fact that modern mobile web browsers are being designed with HTML5 and CSS3 rich features in mind, and you have a developer’s dream platform for reaching as many devices and operating systems as possible.
HTML5 could deliver on the promises that other languages and platforms such as:
- Java
(Applets in the browser, Swing GUIs on the desktop, MIDlets on Mobile) - Flash
(Flex RIAs on the web, AIR apps on desktop, FlashLite on Mobile)
and even - .NET
(ASP/Silverlight on the web, VB/C#.NET Windows programs on the desktop, .NET Compact Framework on Mobile)
all failed to truly deliver on!
To that end, here are two useful templates for developers to get started quickly with HTML5 and its new features:
First (and not very exciting), is a barebones HTML5 Skeleton
[snippet id=49961]
Remotely exchange data between iFrame and parent (jQuery .vs. HTML5)
One of the many nagging web development problems that the HTML5 working group is addressing with the new HTML specification, is the difficulty in working with content or exchanging data in between an iFrame and the main (origin) page which embeds it, as well as across separate windows (tabs) and domains.
Image courtesy of jquery project
jQuery
In order to accomplish the exchange of data between iFrames, while we wait for more browsers to support the new Communications section of the HTML5 spec (more specifically the postMessage function), the following is a quick way to make the communication magic happen with the convenience of jQuery:
Read the rest of this entry »
BC$ = Behavior, Content, Money
The goal of the BC$ project is to raise awareness and make changes with respect to the three pillars of information freedom - Behavior (pursuit of interests and passions), Content (sharing/exchanging ideas in various formats), Money (fairness and accessibility) - bringing to light the fact that:
1. We regularly hand over our browser histories, search histories and daily online activities to companies that want our money, or, to benefit from our use of their services with lucrative ad deals or sales of personal information.
2. We create and/or consume interesting content on their services, but we aren't adequately rewarded for our creative efforts or loyalty.
3. We pay money to be connected online (and possibly also over mobile), yet we lose both time and money by allowing companies to market to us with unsolicited advertisements, irrelevant product offers and unfairly structured service pricing plans.