E-Learning for Toddlers and Pre-Schoolers: HTML5 Alphabet Learning/Hand-Writing

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 »
Skeumorphs – Good, Bad or Ugly?
What are Skeumorphs?
In designing and developing new software systems and applications, a common strategy is to attempt to approximate device user interfaces to mimic or look like real-world physical objects. This is called a Skeumorph, or a skeumorphic design.
Some of the biggest problems with Skeumorphs are that they are time-sensitive and may not actually do a great job at approximating a particular item or interface from the real-world. For example, we still use the floppy disk to represent “Save” activities, when an entire generation of computer and internet users have grown up without the use of Floppy Disks.
This approach to implementing software solutions has been propagated by Apple in particular, as well as a number of other companies such as Adobe and Microsoft of late. On the other side of the fence is Google and Microsoft who have traditionally had very non-Skeumorphic designs that feel more like using a software interface than approximating any particular object in the real-world.
Where do Skeumorphs work?
Here are a few examples of types of interfaces for which I think Skeumorphs tend to work well (for the most part):
- Calendars
- E-Reader Bookshelf
- Icons
- Text Editors
- Media Players
- Buttons
- Text fields
- Edit-in-place Text
- Tabs (as markers in a book, folder or binder)
- Pages and paging (flipping through pages)
- Voice controls
- Toggle Buttons
- Fullscreen applications
- 3D Models
- CAD (engineering design)
What are some non-Skeumorph design elements?
Some examples of non-Skeumorphic designs and Flat Design features would also be useful for comparison:
- Lists
- Search Results
- Scrolling
- Infinite Scrolling
- Flexible Grid
- Hyperlinks
- 3D navigation components (i.e. Spherical/Cubic)
- Carousels/Sliders
- Accordion
- Dashboards
- File Uploads
- Progress Bars
- Most Animations
- Dropdowns
- Multi-selects
- Tiles (i.e. Windows 8 Metro app tiles, Google iCalendar, widgets, etc)
- Word Clouds
- Zoom in/out
- Virtual Tours
- Drawing (graphic design)
Side-by-Side Comparison
So let’s see some side-by-side examples of Skeumorphs .vs. Flat Designs that are each relevant in their own rights: Read the rest of this entry »
Push-Messaging with JMS

Hiram Chirino, Logo for Apache ActiveMQ, http://activemq.apache.org/ Released under the Apache Software License 2.0 (Photo credit: Wikipedia)
While the finer details of new web standards like ActivityStrea.ms Realtime, PubSubHubbub and HTML5 Web Sockets are still being ironed out, the often-used, tried & true method of push messaging and real-time data integration in the Java community (not to mention larger developer community as a whole) has been Java Message Service (JMS).
JMS is a mainstay of the Java core and has been used for Web Service interoperability, as well as more innovative uses such as real-time and/or event-driven architecture (EDA) Web Applications.
In this article, I’d like to summarize some of my developments (i.e. joys and pains) with JMS in my current project, as well as summarize some best practices and lessons learned.
Read the rest of this entry »
SCORM, LMS’s and the E-Learning standards mess
The field of E-Learning is desperately in need of a new standard; one which unifies rather than further divides the existing options for course and class content Packaging, Run-Time, Metadata and Sequencing.
I don’t mean to disregard or unfairly diminish the value of the work that has gone into the current ot past editions of the SCORM standard, however the fact remains that after almost 5 years it has still not yet replaced SCORM 1.2 as the de facto E-Learning format. Many say that is alot of vendor preference after already being tied to a SCORM 1.2 format for so long, while others say it is a political stance on the part of most SCORM developers, while others and that people are busy so it takes time to upgrade a standard, and this all makes sense. But look how the developer and open source communities are embracing the new HTML5 spec as an example in positive developments and updates to an old spec (old in terms of web years) being actively embraced rather than delayed and procrastinated. Although the (almost sarcastic sounding) announced 2022 release date of the W3C HTML5 Recommendation spec speaks hands to the problems of releasing a successive version of a software standard that is more rather than less complex, and thus, more difficult to implement and switch to across the industry.
Learning Management Systems (LMS) are perhaps equally as confusing for users and developers alike. They vary widely in functionality and implementations.
I’m no expert in the field of E-Learning, this much is certain, but I can’t help but see some patterns there’s also the following links on various technical aspects: 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.