An image free status indicator – using CSS3 and HTML5 alone.

When dealing with creating web applications, especially dashboards, there are many scenarios when one would like to visually represent the status of something. A nice “light bulb” or glass dot is great for this; a red or green status can easily be communicated this way.

When creating a web app, this can easily be done using an image of a colored dot. However, when dealing with mobile or modern web applications it can sometimes be desirable, or even necessary, to do this without the use of images. Luckily there is a way to accomplish this, and make it look great, without using any images at all; using HTML5 and CSS3 alone:


You can see a demo of this, and download the code, here:

To do this, first place this small amount of HTML on your page or in your app where you would like the status indicator to appear:

   <span class="dot"><span class="dot-inner"></span></span>

Second, copy and paste this CSS into your system’s style sheets:

.dot {
overflow: hidden;
border-style:solid;
border-width: 2px;
border-color: #666;
padding-top: 6px;
padding-left: 6px;
width: 32px;
height: 32px;
display: inline-block;
border-radius: 50%;
margin: 0.2em 0.4em 0.2em 0;
vertical-align:middle;
line-height: 32px;
background: #cccccc;
-webkit-box-shadow: inset 0 -6px 6px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 -6px 6px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
box-shadow: inset -6px -6px 6px rgba(0, 0, 0, 0.3), inset 3px 3px 6px rgba(255, 255, 255, 0.3);
}
.dot-inner {
background: white;
opacity:0.35;
filter:alpha(opacity=35);
-webkit-box-shadow: 0px 0px 6px 3px rgba(255, 255, 255, 1);
-moz-box-shadow: 0px 0px 6px 3px rgba(255, 255, 255, 1);
box-shadow: 0px 0px 6px 3px rgba(255, 255, 255, 1);
border-radius: 50%;
overflow: hidden;
width: 6px;
height: 6px;
display: block;
line-height: 0;
}
.dot-red {
background: #990000;
}
.dot-green {
background: #009900;
}
.dot-yellow {
background: #999900;
}
/** add more colors here if you need **/

That’s it, you are done. Refresh the page and you should see the glass dot. It will be gray (or “off”) by default. To change its color, simple add an extra class to the outer span as such:

Red - <span class="dot dot-red"><span class="dot-inner"></span></span>
Yellow - <span class="dot dot-yellow"><span class="dot-inner"></span></span>
Green - <span class="dot dot-green"><span class="dot-inner"></span></span>

One reason this may be preferred over images is in the case when a user may be zooming in or out of a page/application. Because this is not an image it will always look crisp and smooth, no image degradation. Also, you have the flexibility of changing the dot’s color simply by adjusting the style sheet, no need to create a new image to represent each new color. You can even do this programmatically using something like jQuery. This can be especially handy if you need to represent a wide range of colors.

I hope you find this helpful. Feel free to let us know if you use this technique in your own application.

Google chairman notes the arrival of big data and machine intelligence everywhere

In a rare interview, Google Chairman Eric Schmidt gives Bloomberg his outlook for 2014 trends (http://www.bloomberg.com/video/ask-a-billionaire-eric-schmidt-s-2014-predictions-pmV~qd7qTeipbjKx6_wW1Q.html). In this 2 minutes video, Schmidt talks about several obvious trends, like “everyone will have a smart phone… essentially connected to a super computer”. Another important remark Schmidt made is about the “arrival of big data and machine intelligence everywhere”.

It is not about the invention of big data and machine intelligence. It is about the arrival. I find that to be the essence of the big data revolution. The idea that we can leverage computers and technology to process data and derive information and intelligence from thatdata is certainly not new. However, it has been hampered by slow processors, lack of storage capabilities, and inability to amass sufficiently significant amounts of data to deliver this intelligence. Past attempts to overcome the technology shortfalls have been painful and could only deliver meaningful results when applying large investments. Well, all that is changing now. It is now affordable and relatively simple to perform analytical tasks that were considered extremely challenging only a few years ago. My news analytics experiment is one example of that (http://bihappyblog.com/2013/12/05/predicting-the-news-with-sap-hana/). IT departments and organizations are finding that barriers that prevented them from delivering google like level of services are quickly disappearing, and the bar set by consumer web sites for level of service, sophistication and relevance can now be met with of enterprise applications. This is the challenge we in the BI industry will have to face and meet over the next few years. I believe that leveraging the knowledge and understanding developed during decades of data warehousing development to overcome technological impossibilities positions us, the BI industry veterans in a unique position to help drive the big data revolution in the corporate world. Modeling, abstraction skills, problem solving and technical know-how are the building blocks needed for any big data related project, and these are the traits of the trade for us in the BI industry.