CNN-style Interactive News Ticker (HTML5/CSS3)
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
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
<html>
<head>
<meta charset="utf-8" />
<title>HTML5 basic skeleton</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!–[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]–>
<style type="text/css">
header, section, footer, aside, nav, article, figure, audio, video, canvas { display:block; }
</style>
</head>
<body>
<div id="wrapper">
<header>
Header
</header>
<nav>
Nav
</nav>
<section id="content">
<article>
Article
</article>
</section>
<aside>
Sidebar
</aside>
<footer>
Footer
</footer>
</div>
</body>
</html>
CSS3 Rounded Thumbnail Gallery
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:
- Typography (via @font-face)
- Animations (via @keyframes and transform)
- Transitions (via transition and transition-delay)
- REAL Rounded Corners (via border-radius)
- Shadows for everything! (via text-shadow and box-shadow)
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!
5 Steps to Creating Slick Transparent Overlays
One of the best Web Design guides out there is still CSS Zen Garden. Not only does it provide a beautiful looking layout and offer up a base template, but its presentation code also validates to the latest CSS and xHTML standards. However, if you’ve ever tried to work with the main template, you’ll notice that a lot of the nice look and feel are actually achieved via some simple image effects, and, that the steps required for creating your own images with the same “floating corner of the page” effects are not made available. Furthermore, due to the licensing on the templates, you are not allowed to use or re-purpose any of the images in the example layouts.
Enter this tutorial by Jenny (aka misski)…
Simply follow these 5 steps in Photoshop to create a transparent box over an image like those seen on CSS Zen Garden.
Dynamically Resizing an iFrame
Example of an iFrame - Loading Google.com search bar
iFrames, love them or hate them they are all over the web.
When used properly, they can actually enhance a user’s experience for example by embedding multimedia or related content from a separate site, however when used improperly, and they often are, they can be an unsightly nuisance.
Mostly, I try to advocate proper uses of such technology for example embedding videos as per YouTube’s experimental HTML5 player and its new iFrame embed format (which others seem to be picking up on quickly). By the same token, from time to time I like to mess around and see what’s possible.
Here’s a border-line improper – if not entirely improper – usage of an <iframe> that I’ve thrown together just while toying around with the idea of displaying data from multiple sources at the same time.
First, you provide two separate class definitions, which state rules for when the iFrame is in focus (onmouseover, or after a hover event landed in an X/Y co-ordinate position over top the iFrame), and another which is the default state of “off” for when the iFrame is not in focus (onmouseout, or before any hover event occurs):
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.