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 »
iScroll with HTML5 Video and Pause/Resume
Image via Wikipedia
iScroll 4 is the latest version and release of an excellent content slider-type JavaScript component by Matteo Spinelli. While one may argue that content sliders are a dime a dozen, iScroll differs in the fact that it has full support for all the main WebKit for iOS gestures including pinch/zoom, pull-up/pull-down, smooth scrolling and screen orientation resizing; while also allowing customizable scrollbars, automatic carousels, and much more.
Out of the box though, the automatic scrolling takes some hacking to get working right with an interactive component (such as an HTML5 or Flash video player), as if you activate the scrolling on an interval, it will continue to scroll even when a user is trying to interact with some component inside the active list item. To get around this, you’ll have to temporarily deactivate the scrolling and then reactivate it when the user has finished interacting.
Here is an example, starting with the basic HTML structure:
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>
Is Google Making It Harder To Run A Successful Business Online?
Google refrigerator (Photo credit: Aray Chen)
Ok, despite similar accusations of monopoly attempts and/or info theft from the likes of Washington Post, NY Times, Reuters, TechCrunch, ZDnet and others; Google-bashing seems like the thing to do. I’m certainly guilty of writing yet another sensationalist and wildly accusing title pitting Google’s ever-encroaching yet seemingly undefined business model, against their supposedly well-defined “don’t be evil” motto.
Seriously though, we’re feeling this one at BCmoney all the way to the bank. Take a look at some of our latest monthly traffic logs from Google’s Index web crawler:
The growth in the size and frequency of visits by the Googlebot spider is starting to possibly interfere with regular traffic, and certainly seems excessive, when technically speaking they shouldn’t have to go much further than visiting the first few kb of any page on the BCmoney site, which has a page-rank of 4.
Read the rest of this entry »
JS Transformer
- Image via Wikipedia
The official release of one of the most useful (yet hackish, and randomly pieced together from the interweb) code snippets I’ve ever made. I’m calling this useful little piece of code “JS Transformer”, since Transformers are cool again thanks to Shia LaBeouf.
NOTE:
KEEP IN MIND THE SAME-ORIGIN POLICY OF MOST BROWSERS… you’ll probably have to use a server-side proxy to make this more useful (i.e. proxy.php, proxy.jsp, proxy.asp, etc… a topic I’ve covered before)
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.