Behavior, Content, Money – 3 Things you should never give away for free!!!

BCmoney MobileTV

E-Learning for Toddlers and Pre-Schoolers: HTML5 Memory Game

Posted by bryan on July 20, 2013 in CSS, E-Learning, Gaming, HTML, JavaScript with No Comments


No Gravatar

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?

Posted by bryan on May 31, 2013 in CSS, E-Learning, Flash, HTML with No Comments


No Gravatar
Nifty elevator interface. #skeumorph #nasig13

Nifty elevator interface. #skeumorph #nasig13 (Photo credit: BryanAlexander)

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):

 

What are some non-Skeumorph design elements?
Some examples of non-Skeumorphic designs and Flat Design features would also be useful for comparison:

 

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 »

CNN-style Interactive News Ticker (HTML5/CSS3)

Posted by bcmoney on June 22, 2012 in CSS, E-Business, HTML, Semantic Web with 1 Comment


No Gravatar
CNN breaking the news of a plane crash at the ...

CNN breaking the news of a plane crash at the World Trade Center (Photo credit: Wikipedia)

With the real, true and unbiased news inevitably moving online towards the so-called “Alternative Media” (which really is almost reaching the point where it is not alternative so much as the first go-to source), its a good idea to start replicating some of the most useful elements from Television, Print and Radio (aka. the rest of the dinosaur media).

The CNN News Ticker Tape is a somewhat controversial item, as it is considered annoying by many. However, in terms of being able to quickly get information across the screen without interrupting another presentation, it is arguably somewhat effective. Proponents of its use claim it is the best way to get instant updates while maintaining a coherent programming schedule, while critics point to its potential for misuse and indoctrination of the weak-minded with subliminal messages flashing across the screen or fear-mongering sensationalism so common in the “Mainstream Media” today.

Taking the bad and the good into consideration, I’ve thrown together a mock-up that could function somewhat similarly to the Semantically Enhanced Video Pop-ups I’ve implemented using Popcorn.js and to replicate the VH1 Pop-up Video effect. You could imagine having the usefulness of having contextual content being inferred based on the content being viewed, or, simply populating a basic news ticker with the entries from an existing RSS or Atom news feed to link to the day’s top stories.
Read the rest of this entry »

HTML5 features template and HTML5 skeleton

Posted by bcmoney on March 2, 2011 in CSS, HTML with 3 Comments


No Gravatar
Deutsch: HTML5 Logo English: HTML5 oval logo, ...

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]

 

Read the rest of this entry »

CSS3 Rounded Thumbnail Gallery

Posted by bcmoney on October 16, 2010 in CSS with No Comments


No Gravatar
English: CSS3 Styling

CSS3 Logo - Image via Wikipedia

CSS3 is shaping up to be quite promising.

Some of the features and shiny new toys that have me excited most are:

 

In this spirit, the following is an interactive rounded thumbnail gallery which was not previously possibly without some serious back-end coding to re-render each individual image as a separate “rounded thumbnail” file (using something like C++/GD or PHP/ImageMagick, etc); and now it’s become just a few lines of CSS using some of the aforementioned CSS3 goodies!

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.

  • Archives