Character Entities Cheat Sheet for HTML, CSS and Javascript

I always had to fiddle and look around multiple sources to get the correct Character Entity with their named or numeric entity for HTML, the unicode entity for CSS, or the Octal-encoded character for Javascript.

For instance, in CSS, to add → in the content of :before, you can write –

.more:before {
	content: "\2192";
	margin-right: 1em;
}

So, I decided to go ahead, spend some time and made a nice, clean, easy-to-navigate one page site to display, literally, all Character Entity for HTML, CSS and Javascript.

Bookmark the page → Character Entities (HTML, CSS & Javascript).
Let me know of bugs, issues – the source is on Github.

Dynamic CSS and DataURI to the rescue

Paisa

Paisa Consumer Finance Redefined.

Source Files available at Github – DataURI and Dynamic CSS (Download)

How it all started?

We at Paisa are developing a financial Web Application, trying to make it easier for users to invest their money. We, in fact, have a rather nifty way of allowing users to browse through Stocks without the overhead complexity of trying to calculate the figures and stats.

The Situation

We wanted to have an identifying logo for each and every company. Well, that is about 3000+ companies. The logos themselves are small – 24 × 24 pixels each.

The Problem

The size of each logo is rather negligible. So, that’s not the problem. The problem is the number of HTTP calls we’ll have to do fetch these logos. Atop that, we’ve no clue what the user will pull and push the filter criteria to view her results. So, we have a problem of displaying 3000+ images and we’ve no clue when and where they’ll appear.

The Solution (Not)

Initially, I was thinking of doing a rather complex matrix of Image Sprites by combining them in pre-defined groups based on — BSE-100, BSE-200, Alphabetical, etc. However, this introduces useless image downloads (bigger size now due to the combined sprite) and not really that re-usable at multiple places. So, CSS-Image-Sprite was NOT the solution.

The Better Solution

One fine evening, an article popped up on HackerNewsData URIs make CSS sprites obsolete. Then, I knew this is something I can pursue to accomplish what we wanted.

In our situation, as each and every company is accompanied by their BSE Code, we inserted that in a class “bse_xxxxxx” (via Python in our case). We do have a default class, “stock_logo” that keeps a default logo ready just in case we don’t have the logo of the company or is being changed or it simply does not exist. This default class also defines how the logo will be displayed, what will be the padding style etc. The class “bse_xxxxxx” is used only to insert the actual logo as a background-image.

Next, Javascript picks up the IDs of the actual logos to be displayed (in our example, from the special attribute `imgID`) and then constructs a link to a handler which generates a CSS file with Data-URIs embedded in it so that we can download all the required images with a single HTTP call and insert them seamlessly into an HTML file.

Example:

Say the markup is like this –

<li class="img img_500" imgID="500">Foo</li>
<li class="img img_600" imgID="600">Bar</li>

The JS code extracts the “imgID” from the li and constructs a query like the one below and inserts it into the DOM inside a link tag –

stylesheets/logos.css?i=500|600

Then, the special handler generates a CSS file by reading the actual images and base64 encoding them. The CSS file is loaded into the DOM and the new images show up instantly.

Use Cases

The use cases look rather rare and might not be something you can use out of the box. However, we hope this will help someone who needs something similar and hope that this will inspire them in solving their own problem. We’ve use Python for our codes but this can be done in any Server Side Programming Language. We used Closure JS Framework with our Javascript but jQuery, a more common framework, was used in this example.

Thanks

Special thanks to @BGhose who stitched all the solutions together in a deployable and usable form. I had to write only a few Stylesheet sample codes for just few companies to show them how it can be done and @Prajwalit easily threw in some Javascript magic and Sidhant completed the Server Side code. Now, we’re just throwing in the logos in our bucket without caring for anything else except to name them against the BSE Codes for the companies. It will just continue to work like a charm.

Browser Support and the obvious Internet Explorer

The article by Nicholas refers to his CSSEmbed solution which uses MHTML mode to make IE6 and IE7 compatible stylesheets that use internal images similar to data URIs. So, you can use a conditional HTML comment to import IE specific styles.

This is our first cut to the solution, we’ll always be on the look-out to improve the solution (think Caching). If you’ve questions, or just want to say something, feel free to comment.

Source Files available at Github – DataURI and Dynamic CSS (Download)

Cappuccino

CappuccinoThe guys from 280 North did it again. Earlier, it was the awesome Keynote on the Web — 280 Slides. Now, its — Cappuccino — an open source framework that makes it easy to build desktop-caliber applications that run in a web browser.

280 Slides

280 Slides enables anyone with a web browser to quickly and easily create beautiful presentations. 280 Slides takes advantage of the web by making it trivial to find and include great media in your presentation. There are also built in advanced features like importing and exporting PowerPoint documents, so your data is always portable.

Cappuccino

Along with Objective-J, Cappuccino provides a complete toolkit to develop rich web applications. Its open sourced under LGPL. Continue reading

Adobe AIR for JavaScript Developers

Adobe AIR for JavaScript Developers PocketguideReading Mike Chambers latest post let me to Ajaxian’s article on the release of the free eBook — Adobe AIR for JavaScript Developers Pocketguide.

Licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License, the book provides an introduction to Adobe AIR for developers interested in building AIR applications using JavaScript, HTML and CSS.

Download the book (pdf) from Ajaxian or order one from Amazon.

The book is written by the members of the AIR Team itself and besides the — Introduction to Adobe AIR, Getting Started with Adobe AIR Development and Working with JavaScript and HTML Within Adobe AIR — there is even a mini cookbook on Adobe AIR for JavaScript Developers.

References;

SCORM, what is, what isn’t, Flash and scorm and SCORM FAQ

As a follow-up to my previous post, I was lucky the other day on Flash Lounge on a questions which was not really related but somehow landed on the topic of SCORM. And so, here are more details about the same. Thanks a lot to Aaron E. Silvers., Senior Multimedia Integrator of ADL, Advanced Distributed Learning.

What is SCORM?

SCORM stands for Sharable Content Object Reference Model – SCORM is a set of specifications created by the Advanced Distributed Learning initiative (ADL). SCORM specifies how content can be built and reused across any Learning Management System (LMS), and how LMSs can be constructed to use any Sharable Content Object (SCO).

SCORM speaks to the following “ilities” :

Accessibility : From multiple remote locations through the use of metadata and packaging standardization, and using (but not restricted to) web standards.
Adaptability : By tailoring instruction to individual and/or organizational needs.
Affordability : Developing and aggregating learning content in modular ways to promote learning efficiency, productivity and reuse while reducing development time and costs.
Durability : Across revisions of operating systems and software.
Interoperability : Across multiple tools and platforms.
Reusability : Through the design, management and distribution of tools and learning content across multiple applications.

What isn’t SCORM?

SCORM is NOT,
A programming language,
A standard that must be adhered to or complied with,
A design pattern (though through conformance to SCORM, some patterns become clear – like abstraction.

What’s the impact of SCORM conformance on a front-end developer in HTML

You need JavaScript to be able to handle communication between the SCO and SCORM’s API (the communication between learner and LMS via interaction with the SCO). Otherwise, there’s only seven different requests that a SCO can make of an LMS. The only two commands that each piece of content MUST make in order to be a SCO are an Initialize (let the LMS know that the SCO is launched) and a Terminate (let the LMS know that the SCO is no longer in use). Everything else is gravy. So from a front-end developer’s perspective; if you can call the API with JavaScript, you’re set to go.

What’s the impact of SCORM conformance on a Flash / ActionScript developer

Actually, working with Flash and SCORM is pretty easy, because Flash is so flexible. There’s only about 200 ways to skin a cat in Flash, and so it is with SCORM. Many developers rely on FSCommand to communicate with JavaScript, but this method is believe to besloppy, hackneyed, lazy, old practice. Sure, it works but it doesn’t work on everything. GetURL will be your friend. That and Object.watch() and setInterval(), clearInterval(). Using those will enable you to communicate back and forth with JavaScript as it speaks to the LMS.

Perspective of a Personalized SCORM-related FAQ

Q. What specific guidelines and/or best practices do I need to follow as a content developer in order to make sure the Flash & Dreamweaver content is comformant?
A. There are two main practices you’ll follow to make sure your content is conformant. You’ll run it in the 1.3 Run-Time Environment (due to be released as Beta very soon), and if your package loads and runs, well, it works!

In February or March 2004, there the likelyhood of the release of the “SCORM 1.3 test suite”. The diagnostics it returns when you test your content will let you know specifically where each piece of content may fail.

If you can get your content to pass the Test Suite, you’ll be right as rain. Those are the only two benchmarks available to us since there’s no LMS available that handles 1.3, and it will probably be a while until they come around.

Q. Which tools do you use?
A. Use Flash MX 2004 and Dreamweaver MX 2004. You can use other tools available in the market for the same.

Now as far as the technologies that are employable,
XHTML 1.0 strict, CSS2, ActionScript, JavaScript, PHP, MySQL, XML and a little bit of ColdFusion if needed (including CFC’s if you are doing remoting with Flash).

As well, there’s an extension for Dreamweaver MX by DigitalThink (available on Macromedia Exchange) that does a really good job of making 1.2 conformant content, or editing your content to automagically convert to 1.2. A good guess would be that they will support 1.3, even if the sequencing is very simple.

Q. As a developer, what pieces do I really need to know about SCORM?
A. Here are some unsorted tips to follow when creating content:

  1. Avoid using FSCommand() to communicate with JavaScript (in Flash) : Most of the tools already available to Flash for SCORM development rely heavily on FSCommand(). FSCommand() only will work effectively in a Windows environment. So, in the future, if your content is viewed on anything other than Windows, the communication will probably fail. Instead, move your reliance to getURL() to call on your JavaScript functions. Well, this are still personal preferences, you are free to experiment on your own. It is preferable to develop once, and at the same time develop for everything. Switching to getURL() means that your content will interact appropriately in Windows, Linux, Mac – on Internet Explorer, Netscape, Mozilla, Opera – whatever browser is being utilized by the LMS.
  2. Abstract your API wrapper to course-specific functions : If you call on the functions in the API wrapper specifically in all your development, you’re setting yourself up for disaster. The naming conventions have changed in every version of SCORM and it’s likely that it’s going to continue to evolve. Create a separate javascript file that has function names that simply call on the functions in the API wrapper. Call on THOSE functions instead of directly calling on the functions in the API wrapper. That way, even if the function names change in later versions of SCORM, you’re changing only one file instead of digging into every single HTML page and Flash file, copying and pasting all the way through. Save myself the hassle of doing that by abstracting as much as possible.
  3. Utilize XHTML and CSS2 to maximize accessibility and skin-ability : If you’re using XHTML in combination with CSS2, you’re going to make it easy to deploy your content to multiple platforms. Not just different OS’s, either – cell phones, PDA’s – just about any web-enabled device will benefit from the organization you adhere to if you’re conforming to W3C standards. If you use CSS2 style sheets, you can set multiple layout files with the same class names to “skin” your content. In this manner, you can meta-data the CSS style sheet. By abstracting style from the content, you’ll also be able to apply different styles for different deployments. When you author XHTML with <div> tags, you’re dividing up your content in a logical manner. In the absence of the CSS (like on a web-enabled device or a phone), the content still lays out logically. You can’t do that if you’re using <table> tags. The obvious advantage to using these technologies is that your 95% of the way to being 508-compliant in doing so (the other 5% being testing – because a good developer wants to be “sure” that a screen reader can actually read/interact with content appropriately).
  4. Get in on the planning stages for content development early : You have to be really proactive at the
    planning stages of Instructional Development. Don’t wait until the ID’s have a curriculum in-place that they want to develop, telling you what technologies they want available. Determine their real priorities – is it
    the user experience they want or the curriculum plan? Is the SCORM conformance a priority for content object re-use, or is it so it will be compatible with any LMS? These decisions all have impact on how your SCO’s
    will be defined, which will have a huge impact on how you’re going to develop a project.
    For example, if you’re building one large Flash piece that’s going to set objectives and display tons of content – sort of acting as its own LMS, then re-use of individual pieces of content can’t be a priority. You can still tag all those pieces of content as assets, but not SCOs (a SCO can’t launch a SCO). In this example, the large Flash “player” would be the one SCO in this package, with each piece of “content” that it would display being simply an asset. You can launch assets as part of an aggregation – even on their own, and thus re-use assets, but they’re not SCOs.
  5. The ease of SCORM development is in the front-end : Remember that all you need to make a SCO a SCO is an Initialize() and a Terminate(). Everything else is gravy. In total, there are only 7 calls (there is a getValue() and a setValue() and then about 3 diagnostic calls) to the LMS. That’s it. So developing for SCORM is pretty easy when you think about it, because each SCO is dumb. By that it simply means that each SCO is independent of any other SCO, so you don’t have to know what’s going on with other SCOs in order to build one. The LMS handles all that information.
  6. The pain of SCORM development is in the organization of the entire course, and by definition, the manifest : The manifest controls the sequencing, the interactions, the listing of assets – all the magic happens in the manifest.
    A reiteration of what we doubtlessly know : it’s all XML. Which means if you can outline or map your course, even at a high level that just outlines the page titles, you can design your course how you want and assume that you’ll be able to find help by the way of direct help (through some means of support) or indirect help (by assuming tools will come to assist you in sequencing).
  7. METADATA – but be smart about it : Developing MetaData is important. Really important. Forget that SCORM doesn’t require it. The fact of the matter is that you’ll want to reuse the stuff you build, eventually. It’s a heck of a lot easier to build MetaData as you’re developing than it is to go back in years from now to try and tag a SCO.

But, it is also suggested to keep in mind that you’re not going to re-use every single little thing you list as an asset. So restrict your metadata work to those things you’ll likely re-use.

Your SCOs. It makes sense to author MetaData for each SCO, because it increases the likelihood of their re-use. And as each SCO is (supposedly) the smallest chunk of content you have on any specific topic, it’s just common sense that any chunk of content may apply to something else later on, in another aggregation.

Your assets. Does every single JPEG, GIF and SWF need to be MetaData’d? Probably not. Use your time wisely. If you find that you’re using the same graphic more than once in a package, you should probably include MetaData for it. The thumb rule logic would be that if “YOU” are using it more than once, chances are a few years from now, someone else would, too, if they can find it.