Grio Blog: Web/Tech

BLOG//

Our thoughts in real time

Web/Tech

February 09, 2012

A Quick Reference on Box-Shadows

Every few months I come across the need to add shadows to frontends, and it seems each time I have to go back and look up how these things work. I always take to the internet for a brush up on box shadows, but I seem to find more information than I'm looking for - I just want a quick cheat sheet, not the War and Peace of box-shadowing. So here's the cheat sheet I'll be using from now on to create the shadows I need.

The first thing to note is that for backwards and cross-browser support you'll need to write your box shadow css three times. Annoying! But its just a matter of writing the same css with different prefixes. Here's what it will look like:

-moz-box-shadow: 10px 5px 5px #888;
-webkit-box-shadow: 10px 5px 5px #888;
 box-shadow: 10px 5px 5px #888;

OK, what do those numbers mean again?

Here's the CSS3 specification for box-shadow:

box-shadow: none |  [,  ]

 = inset? && [(2,4)] && color

What? Lets break this down a bit.

First of all, the box-shadow specification tells us that we can have no shadow, one shadow, or a series of comma separated shadows.

Next we come to the shadow specification. First we have 'inset'. Inset is optional, so unless you specify inset, your shadows will always be offset from the element.

The next part (and this is where you'll do the bulk of your work) is the length. I always have trouble remembering this part of this definition - I know its a combination of 2-4 numbers, but what do the numbers refer to? Writing it out like this will help me remember it better:

length = horizontal offset, vertical offset, blur radius(optional), spread distance(optional)

or maybe:

length = HVBS

Someone more clever than me could come up with a little mnemonic device for this. Like, "Happy Valentine's, Big Sister" or "How Very Brilliant, Sartre"... I'll keep working on that bit.

The first two numbers are the required parameters, horizontal offset and vertical offset. Like it says in the names, these parameters define how far your shadow is offset from the original element. For horizontal offset, a positive number moves the shadow to the right, a negative number moves it to the left. For vertical offset, a positive number offsets the shadow below your element, and a positive number offsets it above.

Here's how you would create a shadow that is more horizontal than vertical:

   #horizontal { 
        -moz-box-shadow: 10px 5px 5px 5px #888;
        -webkit-box-shadow: 10px 5px 5px 5px #888;
        box-shadow: 10px 5px 5px 5px #888;
    }

And here's a shadow thats more vertical than horizontal:

  
    #vertical { 
        -moz-box-shadow: 5px 10px 5px 5px #888;
        -webkit-box-shadow: 5px 10px 5px 5px #888;
        box-shadow: 5px 10px 5px 5px #888;
    }

The blur radius is optional but to me this is the most important part of the shadow - its what makes your shadow look 'shadowy' and not just like an offset box. The higher the blur radius, the more blurred your shadow will be.

Here's an example of a shadow with and without a blur radius:

 #blur { 
        -moz-box-shadow: 10px 5px 5px 0px #888;
        -webkit-box-shadow: 10px 5px 0px 5px #888;
        box-shadow: 10px 5px 5px 0px #888;
    }
    
    
    #no-blur { 
        -moz-box-shadow: 10px 5px 0px 0px #888;
        -webkit-box-shadow: 10px 5px 0px 0px #888;
        box-shadow: 10px 5px 0px 0px #888;
    }

The spread distance is another optional parameter. Spread distance refers to the size of the shadow itself. A shadow with no spread distance will be the same size as the original element, a shadow with a positive spread distance will be larger, and a shadow with a negative spread will be smaller than the original element. To demonstrate this, here's a shadow without offset, but with spread distance:

     #spread { 
        -moz-box-shadow: 0px 0px 5px 10px #888;
        -webkit-box-shadow: 0px 0px 5px 10px #888;
        box-shadow: 0px 0px 5px 10px #888;
    }
    
    
    #no-spread { 
        -moz-box-shadow: 0px 0px 5px 0px #888;
        -webkit-box-shadow: 0px 0px 5px 0px #888;
        box-shadow: 0px 0px 5px 0px #888;
    }

The final part of the shadow specification is for the color. Since this is a cheat sheet about shadows, I'm going to presume you already know how to specify a color.

Multiple shadows and the shadow on three sides of an element:

The specification allows you to combine shadows to create different effects. One of the things that it took me a while to figure out is how to add a shadow on only three sides of a element. Here's where adding multiple shadows to an element comes into play - in order to add shadow to three sides, we actually add three separate shadows, one for each side.

Below I've broken down exactly how each side is constructed, as well as the final product. Here you can also see I've added a negative spread distance to the shadow, so that its a little bit smaller than the element its shadowing.

    #shadow-bottom { 
        -moz-box-shadow: 0px 7px 5px -5px blue;
        -webkit-box-shadow: 0px 7px 5px -5px blue;
        box-shadow: 0px 7px 5px -5px blue;
    }
             
    #shadow-right { 
        -moz-box-shadow: 7px 0px 5px -5px red;
        -webkit-box-shadow: 7px 0px 5px -5px red;
        box-shadow: 7px 0px 5px -5px red;
    }
    
    #shadow-left { 
       -moz-box-shadow: -7px 0px 5px -5px green;
       -webkit-box-shadow: -7px 0px 5px -5px green;
       box-shadow: -7px 0px 5px -5px green;
   }

    #shadow-three-sides {
         -moz-box-shadow: 0px 7px 5px -2px blue, 7px 0px 5px -2px red, -7px 0px 5px -2px green; 
         -webkit-box-shadow: 0px 7px 5px -2px blue, 7px 0px 5px -2px red, -7px 0px 5px -2px green;
         box-shadow: 0px 7px 5px -2px blue, 7px 0px 5px -2px red, -7px 0px 5px -2px green;
    }

I hope other developers find this guide useful - give me a few months to forget and I'm sure I'll be referring back to it myself!

Further reading:

For more information about box-shadows I recommend:

http://www.css3.info/preview/box-shadow/

http://css-tricks.com/snippets/css/css-box-shadow/

Posted at 01:32 PM in Web/Tech | Permalink | Comments (0) | TrackBack (0)

January 18, 2012

HTML 5: Now With More Method to the Madness

Up to now, many people have regarded HTML coding as simply a matter of making the content fit together and look pretty on your browser the way you want, via CSS formatting of various <div> regions. Not true anymore with HTML5, which not only introduces new content element tags but also a new algorithm that renders the contents of a web document in outline form.

The <div> tag does not have any semantic meaning and is simply a generic container to be styled and formatted as the coder wished, and that still remains the case. However, new HTML5 tags such as <header>, <footer>, <article>, <aside>, <nav> and <section> have specific meanings relating to their content.

At first glance, the <section> tag appears to be the most generic of all the new content elements introduced in HTML5. However, it is not simply a substitute for <div>, as many developers make the mistake of assuming. In fact, it is one of the most significant elements in determining the outline structure of your document.

Here's a basic example of how the <section> tag works in the context of outlining content:

<body>
<h1>This is the main body</h1>
<section>
        <h1>This is top-level section #1</h1>
        <section>
            <h1>This is a second-level section</h1>
        </section>
    </section>
    <section>
        <h1>This is top-level section #2</h1>
    </section>
</body>

This content will result in the following outline:

This is the main body

This is top-level section #1
1. This is a second-level section
This is top-level section #2

Likewise, just as <section> is not a newfangled, hip, with-it HTML5 update of <div>, the <nav> tag is not just to be used for any region with lots of links. It is a navigation region, and it's to be used only for links that are relevant to moving around the site. One notable example of a group of links that need not go in a <nav> section is what you might find in the footer. In that case, the <footer> tag is more than enough.

So don't be tempted to use lots of new HTML5 tags just because you can. And when in doubt, you can still use <div>: it's not going away just yet.

Posted at 05:32 PM in Design, Web/Tech | Permalink | Comments (0) | TrackBack (0)

December 21, 2011

Drawing On Maps -- Not Just For Surveyors and Destructive Children

There's really no excuse for not incorporating the Google Maps API into your applications these days. It's free, easy to use, and with version 3 you don't even need an api key anymore (although you can still use one). What's that I hear? You don't need interactive maps on your site? Not good enough.
We'll be using the Javascript V3 API.

The Map

Basic usage is so simple it's almost frightening. You include the api library, create a DOM container to house your map, and create a map object which gets inserted into your container.

<script type="text/javascript"
   src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script> 
 
 <div id="map-container" style="width:400px; height:400px;"></div> 

 <script type="text/javascript"> 
 var latlng = new google.maps.LatLng(-34.397, 150.644);
 var mapOptions = { 
     zoom: 8,  
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: latlng
 };
 var myMap = new google.maps.Map(document.getElementById("map-container"), mapOptions);
 </script>

That's it. There's your basic map. The latitude and longitude settings have put you in Sydney, Australia. I can't find this confirmed anywhere, but it looks like the zoom value goes from 0 (viewing the whole world) to 22 (pressing your face against the ground)

A few points that I may have glossed over:

The mapOptions object is required, as are the three elements it contains (zoom, center, and mapTypeId) here. There are a number of other optional values that you can add to mapOptions to configure your map, but these three are essential.
You'll probably want to defer creation of the map object until the dom is loaded with your favorite document.onReady() -type of construct, as well as checking to make sure the API is available if(google).

Now we've got a map. Let's put it through its paces.

Geolocation

The easiest way to get the user's location is with a browser that enables HTML5 geolocation. The Maps Api documentation describes a few other possibilities, but since all major current browsers support HTML5 geolocation, we won't bother with anything else at the moment.

navigator.geolocation.getCurrentPosition(function(position) {
  initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    myMap.setCenter(initialLocation);
   }, 
  function() {
    alert("couldn't get your location");
});

This should send your map to Moosejaw, Saskatchewan, or wherever you happen to be sitting at the moment. navigator.geolocation.getCurrentPosition is of course provided by the browser, not the maps API.

Overlays

You can add a wide variety of graphical elements to your map: markers (most often seen as a pin in the map, but they can be any graphic you choose), polylines, polygons, circles and "ground overlays" (we won't look at these last here, but here's an example).

Placing a marker on the map

 var latLng = new google.maps.LatLng(-34.397, 150.644);
 var marker = new google.maps.Marker({
   icon: 'http://url.of.image',
   position: latlng,
   map: myMap,
   title: "If you lived on this marker, you'd be home right now."
 });

position and map are required if you want your marker to display. Other parameters are optional. You can set create the marker first and add position and map later however, with marker.setPosition() and marker.setMap().

Removing a marker (or other overlay) from the map

marker.setMap(null);

if you want to actually delete the marker, set the marker variable itself to null.

Circles and polygons are nearly as simple.

Drawing a circle

var latLng = new google.maps.LatLng(-34.397, 150.644);
 var circle = new google.maps.Circle({
   strokeColor: "#FF0000",
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: "#FF0000",
   fillOpacity: 0.35,
   map: myMap,
   center: latLng,
   radius: 200
 });

One thing to note is that all measurements (in this case, radius) are in meters.

Drawing a polygon (this example from the documentation draws the Bermuda Triangle)

var pathsArray = [
   new google.maps.LatLng(25.774252, -80.190262),
   new google.maps.LatLng(18.466465, -66.118292),
   new google.maps.LatLng(32.321384, -64.75737),
   new google.maps.LatLng(25.774252, -80.190262)
 ];
 var polygon = new google.maps.Polygon({
   paths: pathsArray,
   strokeColor: "#FF0000",
   strokeOpacity: 0.8,
   strokeWeight: 2,
   fillColor: "#FF0000",
   fillOpacity: 0.35,
   map: myMap
 });

Note that it's not necessary to close the polygon (the end point does not have to be the same as the initial point).

Pixels to Map Coordinates and Vice-Versa

One particular problem I encountered was converting between screen pixels and the latitude/longitude measurements that are the units the api generally works with. Either this is a rare example of the documentation being insufficient, or I was just obtuse, because it took me a while to figure out.

The application I was working on called for a user to be able to draw a polygon by clicking several times on the map. Finally I wanted to close the polygon when the user clicked on or near the original point. But what's "close?" If the map is zoomed way in, close on screen may be a distance of a few meters, but if the map window is viewing all of Asia, a difference of a few pixels may mean 100 miles. Here's what I did to see whether the user has clicked within 6 pixels of the initial polygon point.

In order to get this to work, I needed to get an OverlayView object from the map and from that get a Projection object to manipulate the Latitute/Longitude data. Incidentally, in order to use an OverlayView, you have to override its draw method.

function pointsAreClose(latLng1, latLng2, map) {
   var pointThreshold = 6;
   var overlay = new google.maps.OverlayView();
   overlay.draw = function(){};
   overlay.setMap(map);
   var projection = overlay.getProjection();
   var areClose = false;
   if (projection != undefined) {
     var coords1 = overlay.getProjection().fromLatLngToContainerPixel(latLng1);
     var coords2 = overlay.getProjection().fromLatLngToContainerPixel(latLng2);
     if ( Math.sqrt( Math.pow(coords1.x - coords2.x,2) + Math.pow(coords1.y - coords2.y,2)) < pointThreshold) {
       areClose = true;
     } else {
       areClose = false;
     }
   }
   overlay.setMap(null);
   return areClose;
 }

Loading Libraries

Currently there are five additional libraries, some of which are related to drawing. Google, being Google, can be expected to add more in short order:

AdSense (I'm not really sure what this is. It requires a Google AdSense account)
Drawing (provides tools for user-initiated drawing without having to create your own interface)
Geometry (contains advanced methods for calculating spherical projections and the like)
Panoramio (allows the adding of photos from Panoramio)
Places (provides access to a database of specific places e.g. The Empire State Building, provides an autocomplete feature)

You include libraries by adding this query string parameter to your javascript src attribute: libraries=library1,library2,library3 e.g. https://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing,places

Wrap-Up

I've barely scratched the surface of the Maps API's drawing capabilites here, much less the power of the API overall. It's powerful, versatile, and I really enjoy using it. Check it out for yourself. This is one area at least where Google's all-seeing eye seems to be working in the service of the public.

Posted at 09:24 AM in Web/Tech | Permalink | Comments (0) | TrackBack (0)

December 04, 2011

Is Software a Science or an Art?

As we approach software today, often through web or mobile applications, people generally appreciate the elegance of the interaction or lack thereof. But as software engineers know, there is a lot going on behind the scenes. Of course, with user interfaces for the masses becoming a necessity for modern applications, designers and more artistic–oriented folks have been contributing to the practice of software development. That leads to the question: Is software more of a science or an art?

Of course, science is based on logic, with a hypothesis, experimentation, results and conclusions based on the outcome. To some degree software fits this role with predetermined algorithms for processing and analyzing information.

However, a strong argument can be made for the artistry in software. Take for instance the wide variety of expression allowed via websites such as Facebook, YouTube and Twitter. These services have empowered user creativity and fostered new forms of communication. If I told you someone was ‘tweeting’ five years ago you’d think they were doing their best bird imitation.

User interfaces in general have more recently adopted a more visceral approach to presentation. Websites are instruments of personal expression. Most popular applications today have a game-like interface or are in fact games themselves. This drives my bias (generally) towards the interpretation that software today is leaning closer to art than science. I wouldn’t have felt that way ten years ago.

What do you think? I’m interested in hearing and responding to your comments.

Posted at 08:34 PM in Current Affairs, Science, Web/Tech | Permalink | Comments (1) | TrackBack (0)

November 29, 2011

How to set up and exploit an Apache Solr environment on Amazon EC2

What’s Solr?

Solr is an open source enterprise search platform from the Apache Lucene project. Its major features include powerful full-text search, hit highlighting, faceted search, dynamic clustering, database integration, rich document (e.g., Word, PDF) handling, and geospatial search. Solr is highly scalable, providing distributed search and index replication, and it powers the search and navigation features of many of the world's largest internet sites.

What’s EC2?

Amazon Elastic Compute Cloud (Amazon EC2) is a web service that provides resizable compute capacity in the cloud. It is designed to make web-scale computing easier for developers. An Amazon Machine Image (AMI) is a special type of pre-configured operating system and virtual application software which is used to create a virtual machine within the Amazon Elastic Compute Cloud (EC2). It serves as the basic unit of deployment for services delivered using EC2.

Requirements

This tutorial uses:

An AMI consisting of a 32bit base Fedora 8 install (most of the Linux based AMI will work fine)

Java version: 1.6.0_29

Solr version: 3.4.0

Let’s now look at the actual installation steps:

0) Open 8983 port

Before starting it’s necessary to open port 8983, which is the port that Solr listens on by default.

This can be done by adding a rule to the security group which the chosen AMI belongs to.

1) Install java

To check if java is already installed in the machine, enter the command:

java -version

if the response is:

-bash: java: command not found

java is not installed in the machine.

To download and install java, enter the following commands

wget http://download.oracle.com/otn-pub/java/jdk/6u29-b11/jdk-6u29-linux-i586-rpm.bin

chmod +x jdk-6u29-linux-i586-rpm.bin

./jdk-6u29-linux-i586-rpm.bin

2) Install Solr

To get Solr, enter:

wget http://mirror.nyi.net/apache//lucene/solr/3.4.0/apache-solr-3.4.0.tgz

unzip the downloaded file:

tar xzf apache-solr-3.4.0.tgz

3) Start Solr

Solr comes with its own servlet container, Jetty, bundled withe package above.

To start Solr, go to the example directory:

cd apache-solr-3.4.0/example/

and enter:

java -jar start.jar

To verify that the server is running correctly, open the web browser and enter the following URL:

http://ec2-xxx-xxx-xxx-xxx.compute-1.amazonaws.com:8983/solr/admin/

(where xxx-xxx-xxx-xxx stands for the public DNS address)

4) Start Indexing

Now that the Solr server is running, it is possible to start building a simple index.

To create a new index go to the exampledocs folder and enter:

java -jar post.jar *.xml

This command will index all the .xml documents contained in the exampledocs folder.

Solr allows you to import data in many different ways and formats. It is possible to index CSV files, JSON documents, .pdf and .doc documents through Solr Cell (http://wiki.apache.org/solr/ExtractingRequestHandler) and it is possible to get records directly from the database through the Data Import Handler (http://wiki.apache.org/solr/DataImportHandler).

One way to search over the just indexed files is to go to the admin page (http://ec2-xxx-xxx-xxx-xxx.compute-1.amazonaws.com:8983/solr/admin/) and query the index through with the Solr query language (http://wiki.apache.org/solr/SolrQuerySyntax).

This language is an extension of the Lucene query language and allows you to exploit the powerful searching features of Solr by simply adding some parameters to the query.

A more interactive way to search over the created index is to open the browser and go to the following URL:

http://ec2-xxx-xxx-xxx-xxx.compute-1.amazonaws.com:8983/solr/browse

An example of search interface will let you search over the documents and show some of the most relevant features of Solr (autocomplete, faceting, highlighting…)

Several clients can be used to distribute Solr client software depending on the developer preferences. A list of some popular clients follows:

Java : SolrJ;
php: SolPHP;
JavaScript: AJAX-Solr.

These simple steps are all you need to run a Solr instance on Amazon EC2.

Now that the project is set up you can take advantage of your Solr-AMI to perform all kinds of smart searches for your own projects and websites.

Don’t forget to visit and explore the Solr Wiki Page for more advanced uses and customizations of Solr.

Alberto Montagnese

Posted at 10:39 PM in Amazon EC2, Java, Web/Tech | Permalink | Comments (0) | TrackBack (0)

November 28, 2011

JQuery DataTable Plugin Pagination

One of the most common tasks when displaying data through an HTML table is to allow the user to manipulate data within the table. Displaying data on a grid can involve many different operations (retrieving, sorting, live editing, search). Using AJAX to dynamically fill the table requires even more work since the application (in this case, javascript code) has to convert JSON/XML/TEXT data to an HTML element. Each of these tasks can involve more or less time in order to be completed, and of course, tested.

Rather than starting the implementation from scratch I decided to look around for a jQuery plugin able to perform all the necessary operations on a grid (retrieving, sorting, searching, exporting).
After trying out different plugins I ended up choosing the DataTable plugin.

From the first look at the examples on the official website (http://datatables.net/) the plugin looked extremely easy to use and flexible to customize (data sources, data type detection). Some of the key features are listed below:

Variable length pagination
On-the-fly filtering
Display data from almost any data source: DOM, Javascript array, Ajax file and server-side processing (PHP, C#, Perl, Ruby, AIR, Gears etc)
Dynamic creation of tables
Ajax auto loading of data
Custom DOM positioning
Single column filtering
Sorting column(s) highlighting
Extensive plug-in support
Sorting, type detection, API functions, pagination and filtering.

Most of the features of the plugin are enabled by default so the developer can focus on the real problems (business logic). Here is a “zero configuration” example:

HTML Code:
(create your own table within your html page something like this):


<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr class="odd gradeX">
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td class="center"> 4</td>
<td class="center">X</td>
</tr>
<tr class="even gradeC">
<td>Trident</td>
<td>Internet Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
…
</tbody>
</table>

Remember to include the javascript plugin file:


<script type="text/javascript" language="javascript" src="js/jquery.dataTable.mins.js"></script>

and finally call the datatable function:


<script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
    $('#example').dataTable();
 });
</script>

You can download this example from github (git://github.com/GrioSF/datatablepaginationplugin.git).

Now that you have an idea (of course you can take a look at the documentation), we can now move on to the real topic of this post, implementing custom pagination controls for the DataTable plugin.
Of course, the plug-in lets the developer to build his/her own style and logic for pagination. Customizing the pagination was the hardest part among all the possible plug-in’s operations I had to perform.

I created the following pagination style (the code on github will provide css code to reproduce the structure but not the exact style):

The component contains 3 different parts: a previous button, an information field and a next button.
I decided to modify one of the examples provided on the website in order to create my own plug-in.
The code is divided into three parts:

Pagination plug-in: html structure and behavior
Page information plug-in: to obtain information about the current page index
Code to initialize the pagination html components

Pagination plug-in: This is the core of the new pagination controls. This code will create HTML elements and logic to handle the previous and next buttons:


/**
 * Datatable plugin pagination style
 */
$.fn.dataTableExt.oPagination.extStyleLF = {
	/*
	* Function: oPagination.extStyle.fnInit
	* Purpose:  Initalise dom elements required for pagination with a list of the pages
	* Returns:  -
	* Inputs:   object:oSettings - dataTables settings object
	*           node:nPaging - the DIV which contains this pagination control
	*           function:fnCallbackDraw - draw function which must be called on update
	*/
	"fnInit": function (oSettings, nPaging, fnCallbackDraw) {
	    
	    /*
	    *	code to create pagination buttons
	    */
	    
	    nPrevious = $('<span />', { 'class': 'paginate_button previous' });
	    nNext = $('<span />', { 'class': 'paginate_button next' });
	    
	    /*
	    *	code to create pagination information field
	    */
	    
	    var navigationLabel = 'Page <span class="pageIndex">#</span> of <span class="totalPages">TOTAL</span>';

	    navLabel = $('<div />', { html: navigationLabel, 'class': 'navigationLabel'});
	    
	    $(nPaging)
	        .append(nPrevious)
	        .append(navLabel)
	        .append(nNext);
	
	    nPrevious.click(function () {
	        oSettings.oApi._fnPageChange(oSettings, "previous");
	        fnCallbackDraw(oSettings);
	    }).bind('selectstart', function () { return false; });
	
	    nNext.click(function () {
	        oSettings.oApi._fnPageChange(oSettings, "next");
	        fnCallbackDraw(oSettings);
	    }).bind('selectstart', function () { return false; });
	
	},
	
	/*
	* Function: oPagination.extStyle.fnUpdate
	* Purpose:  Update the list of page buttons shows
	* Returns:  -
	* Inputs:   object:oSettings - dataTables settings object
	*           function:fnCallbackDraw - draw function which must be called on update
	*/
	"fnUpdate": function (oSettings, fnCallbackDraw) {
	    if (!oSettings.aanFeatures.p) {
	        return;
	    }
	
	    /* Loop over each instance of the pager */
	    var an = oSettings.aanFeatures.p;
	    for (var i = 0, iLen = an.length; i < iLen; i++) {
	        //var buttons = an[i].getElementsByTagName('span');
	        var buttons = $(an[i]).find('span.paginate_button');
	        if (oSettings._iDisplayStart === 0) {
	            buttons.eq(0).attr("class", "paginate_disabled_previous paginate_button");
	        }
	        else {
	            buttons.eq(0).attr("class", "paginate_enabled_previous paginate_button");
	        }
	
	        if (oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay()) {
	            buttons.eq(1).attr("class", "paginate_disabled_next paginate_button");
	        }
	        else {
	            buttons.eq(1).attr("class", "paginate_enabled_next paginate_button");
	            }
	        }
	  }
};

Page information plugin (provided by the official website): this code is an helper for the plugin so the application can easily retrieve information about pagination (current page, total number of pages):


/**
 * Datatable plugin page information
 */
$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
{
  return {
    "iStart":         oSettings._iDisplayStart,
    "iEnd":           oSettings.fnDisplayEnd(),
    "iLength":        oSettings._iDisplayLength,
    "iTotal":         oSettings.fnRecordsTotal(),
    "iFilteredTotal": oSettings.fnRecordsDisplay(),
    "iPage":          Math.ceil( (oSettings._iDisplayStart + oSettings._iDisplayLength) / oSettings._iDisplayLength ),
    "iTotalPages":    Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
  };
}

Code to initialize html components:


$(document).ready(function() {
	var oTable = $('#example').dataTable({
		"sPaginationType": "extStyleLF",
		"bAutoWidth": false,
		"fnDrawCallback": function () {
			var length =  this.fnGetData().length;
			if (length <= this.fnPagingInfo().iLength) {
				$(this).parent().children(".dataTables_paginate").hide();
			}
			$(this).parent().find(".dataTables_paginate .navigationLabel .pageIndex")
				.text(" " + this.fnPagingInfo().iPage + " ");  
			$(this).parent().find(".dataTables_paginate .navigationLabel .totalPages")
				.text(this.fnPagingInfo().iTotalPages);
		},
		"sDom" : '<"clear">ilprtp'
	});
});

As you can see, a lot of code is needed to customize the pagination controls (compared to other customizations) but the official website and the forum contains a lot of useful information. In addition, the documentation offers good examples to use as a starting point. I highly recommend the JQuery DataTable plug-in for your tabulation needs.

Giuseppe

Posted at 11:49 AM in Web/Tech | Permalink | Comments (0) | TrackBack (0)

November 09, 2011

Twitter Stock Ticker

Last night I was rummaging through some of my past projects doing a little winter cleaning, and I stumbled upon this jQuery plugin that I wrote a while back. I ran the code to see if it still functions (it was using jQuery 1.3). And to my pleasant surprise, the code still runs like a charm. So, I just want to take the time to share it with you all.

This jQuery plugin is a Twitter stock ticker; the stock ticker one sees on Wall Street. And this is an example HTML page that uses the plugin:

<html>

<head>

$(document).ready(function() {

$('#tweet-container').tweetstocktick('san francisco', 5, 15);

});

</script>

<style>

#tweet-container {

overflow: hidden;

position: relative;

width: 100%;

height: 100px;

}

#rotating-ticker-item {

font-size: 36px;

position: absolute;

text-transform: uppercase;

white-space:nowrap;

width: auto;

}

</style>

</head>

<body>

</body>

</html>

It’s a pretty simple implementation using the Twitter Search API

.tweetstocktick(q, rpp, speed)

q = search term (ie. “San Francisco”)

rpp = number of the most recent tweets

speed = used to calculate duration (speed * width).

Feel free to share any thoughts, and I hope it helps.

Download

Posted at 10:06 AM in Web/Tech | Permalink | Comments (1) | TrackBack (0)

November 07, 2011

Android Pattern Lock on iPhone

I'm a loyal user of iPhone. I've been using it since its first version and now I'm on 4S. Though I'm staying in iOS camp and don't have any intention of moving, I occasionally get the urge to test out and see what's out there. That's the reason why I convinced myself to own and play with Dell Streak 5" phone and Google Nexus S. They are both smart smart-phones. But it's hard to pick their pros and cons by simply "playing" with it. You've got to use it. Daily. For everything including surfing, speed dialing, social-networking and games. Everything. And that's something that I didn't get a chance to do until last summer when I was traveling and in need of an unlocked phone. I could make my iPhone work (don't ask me how) but thought I'd give an Android phone a real kick.

So, I spent 3 weeks using my Dell Streak full-time. I'm not going to tell you about how bad or good Android phone is compared to its counterparts, or discuss my constant efforts to find for an outlet to charge the phone. But I do want to talk about one feature that I used a lot but can't find on iPhone: It's the well-known pattern lock feature. If you've never seen it, here is a screenshot.

The idea is simple. Rather than entering 4 digit PIN, you connect the 9-dots (3 by 3) presented on the screen to form a secret pattern. The number of dots connected to form a pattern can be as many as the available dots on screen. In the case of Android lock, the max is 9 dots and the min is 4 dots. In my 3 weeks of usage, I think I can unlock faster using pattern lock versus using PIN lock. And that's when I started to wonder why in all the apps that I've ever used on iPhone, none of them provides this type of lock. Mint is one of my most frequently used apps. I'd love to see it using pattern lock instead of pin lock. It will save me about 0.5 second every time I use the app. Yeah, that's a very valuable 0.5 second.

So, I set aside 2 hours of my time and created a component that provides the pattern lock feature. If you're an iOS developer, feel free to use it in your app. Mention Grio if you feel indebted to us. Lock your user's data more securely. If security is less of your concern, do it for the sake of giving users more options.

The code is pretty self-explanatory. The main class is DrawPatternLockViewController. You can set the matrix size by changing the following constant:

#define MATRIX_SIZE 3

In the sample app, there's a Lock button, which will bring up the pattern lock screen.

It's very easy to use the component. Create an instance, register callback and you're all set. Here's the sample code:

DrawPatternLockViewController *lockVC = [[DrawPatternLockViewController alloc] init];

[lockVC setTarget:self withAction:@selector(lockEntered:)];

[self presentModalViewController:lockVC animated:YES];

When the user is finished drawing, lockEntered will be called. You can take a look at that function in PatternLockAppViewController. It will compare what user entered with a hardcoded pattern. In this implementation, I store the pattern in an NSString. If you replace the dots with series of numbers (1, 2, 3, ...) from top left moving in the right direction downward, you'll see the dots to be similar to the keypad on a phone. And a pattern string stores those numbers by concatenating them in proper order. So, if you draw a pattern by connecting the dots along the edge clockwise starting from top left toward bottom right corner, you'd end up with an NSString with value @"0102030609". You can easily change the way you store and interpret a pattern by changing getKey function in DrawPatternLockViewController.

Note: The dot was designed by Grio's talented designer, #Yui. This project was written using iOS 5 with ARC on. You can download it here.

Posted at 04:50 PM in Android, iOS, iPad, iPhone, Web/Tech | Permalink | Comments (1) | TrackBack (0)

Technorati Tags: Android, iOS, iPad, iPhone, Lock, Pattern, PIN

November 02, 2011

Dieter Rams’s Ten Commandments

You might not be aware of it yet, however SFMOMA (the San Francisco Museum Of Modern Art) is currently hosting Dieter Rams’s “Less but Better” product exhibit.

You might also not be aware of who Dieter Rams is, since he is not directly related to the software industry.

Indeed, for almost 40 years Dieter Rams was Chief of Design at Braun’s: he designed record players, razors, radio sets, etc.

He didn’t have much to do with computers.

So why talk about him?

Well, he is one of the most prominent design engineers of our era. His designs have affected many fields, as well as influenced and inspired many designers. This includes Apple’s Vice-President of Industrial Design: Briton Jonathan Ive.

A few seconds looking at the designs and the similitudes are striking:

@wired.com
iPhone Calculator App.	ET 66 calculator, 1987, by Dietrich Lubs for Braun

Dieter Rams work is remarkable in that he was not just an innovator; he was also an aggregator and a simplifier, putting words to ideas. He strived to do better with less.

“Surfaces that were without apology, bold, pure, perfectly proportioned, coherent and effortless” – Jonathan Ive.

Over the years, Rams was able to refine, and then define his design ideals. They are summed up in his Ten Principles for good design (also referred to as his Ten Commandments):

Good design is Innovative.
Good design makes a product useful.
Good design is aesthetic.
Good design makes a product understandable.
Good design is unobtrusive.
Good design is honest.
Good design is long lasting.
Good design is thorough, down to the last detail.
Good design is environmental friendly.
Good design is as little design as possible.

Ten principles that follow themselves.

I could dig in to each principle, however that is not the object of this blog article… Those principles are quite self-explanatory, since most of those ideas are the writ form of notions we all have. Some can also be correlated to familiar terminologies (ie. KISS).

In short, Dieter Rams started realizing in the 80’s that design engineering was a mess – “an impenetrable confusion of forms, colors and noises”. Being an important contributor to that mess, he asked himself a question we should ask ourselves daily when we create: “Is my design good design?”

This realization is common to many fields, including the software industry. The spreading of the Web changed our society. More companies, more engineers, more clients, more products, etc. Boom! Within a short decade we have a world of new industries.

To be able to keep as much of an understanding as possible, we devise paradigms, design patterns and frameworks, all so that we can find some common understanding; an understanding not just among programmers (see for example Brad’s article about naming conventions: http://blog.grio.com/2011/09/name-recognition.html) but also for the public. Users do not want to feel lost.

Website designs evolve just as much as product designs do, with a notable difference: Users zap through pages. They read this, tweet that. And thus the design has slowly evolved towards more simple layouts, where at a glance, they know what is where:

Google: Text field with a “Search” button.
Tweeter: 140 characters.
Amazon: 1-Click.

One function, sharp edges, rounded corners.

Apple’s designs have been following those ideas for more than a decade now, however those principles were really only pushed to their first extreme with the iPod in 2001.

IPodShuffle

It’s simple, to the point, does it’s job, looks nice, and looks solid (even in pink).

Just as the users started realizing that they were looking for familiar landmarks on websites, Apple designs got accessible, keeping only those landmarks. And obviously it works.

So what am I getting at?

We are aware of these ideas: Functionality, simplicity and reliability. We have to contend with these issues daily. We are aware, but not all the time and not with such a precise understanding.

Dieter Rams’s Ten Principles (as mentioned earlier) are an aggregation of those ideas that he put into writing; ideas we can all understand.

So don’t hesitate to refer to that list once in a while, it might help you figure out a flaw, or some enhancement you could make to your websites, apps and/or architectures.

From a visual perspective, designs inspired by Braun or Apple products, products that are seen and understood by a majority of people, will only be made more understandable by their familiarity.

Don’t hesitate to take the time to check out the Dieter Rams expo. Observe his and his team’s work, with the ten principles in mind. Look at how the products are functional, aesthetic, detailed; how it is not fashionable and therefore never out of style.

Running until the 20^th of February 2012.

Ten Principles for good design: http://www.vitsoe.com/en/gb/about/dieterrams/gooddesign

Posted at 05:19 PM in iPhone, Java, Web/Tech | Permalink | Comments (1) | TrackBack (0)

September 01, 2011

Solving the Firefox Ellipsis Problem

On a recent project for a client, I was asked to make the CSS style "text-overflow: ellipsis" work on FireFox browsers, which has never supported this style. This style basically truncates text and adds an ellipsis (...) when the length of the text overflows the container. Supposedly FireFox 7.0 will correctly this issue, but I'll believe it when I see it.

While there are several good blog posts out there to help out, none of them handle the resizing of the window/text container. That gets tricky because you need to persist the original text so you can make the text longer or shorter as needed during resizing.

Anyway, I thought I'd share my code here to help out any other poor souls stuck with this problem. Here it is (I am assuming you use jQuery; who doesn't? :-)):

var ellipsisPages = (function() {

return {
    init: function() {
      ellipsisPages.drawEllipses();
    },

    drawEllipses: function() {
      /**
       * Trigger FF ellipsis if text overflow isn't supported
         and it's a Gecko based browser
       */
      var textOverflowSupported =
        typeof document.createElement("span").style.textOverflow === "string";

      if (navigator.product === "Gecko" && !textOverflowSupported) {

        if($('.ffEllipsis').length > 0){

          $('.ffEllipsis').each(function(idx, item) {

            if ($(item).attr('data') == undefined) {
                            $(item).attr('data', item.innerHTML)
                        }

            // Determine the text width
              function getTextWidth(text) {

                 var lDiv = document.createElement('lDiv');
                 document.body.appendChild(lDiv);
                 lDiv.style.fontSize = item.style.fontSize;
                 lDiv.style.fontFamily = item.style.fontFamily;
                 lDiv.style.position = "absolute";
                 lDiv.style.left = -1000;
                 lDiv.style.top = -1000;

                 lDiv.innerHTML = text;

                 var textWidth = lDiv.clientWidth;
                 document.body.removeChild(lDiv);
                 lDiv = null;
                 return textWidth;
               }

               var text = $(item).attr('data');
               var origTextLength = text.length;
               var tw = getTextWidth(text);
               var parentWidth = item.clientWidth;

// TODO: perhaps recurse up to a width?
if (parentWidth == 0) {

                 parentWidth = item.parentNode.clientWidth;
               }

               // Shrink text to fit; TODO: optimize this algorithm
               while (parentWidth > 20 && tw > parentWidth - 20) {

                 text = text.substring(0, text.length - 1);
                 tw = getTextWidth(text);
               }

               if (origTextLength > text.length) {

                 var lDiv = null;
                 // See if we already added our custom element
                 for (var node in item.childNodes) {

                   if (node.localName == 'ldiv') {
                     lDiv = node;
                       break;
                   }
                 }

                 // Create an inner element if we haven't already
                 if (lDiv == null) {

                   while(item.childNodes[0])
                     item.removeChild(item.childNodes[0]);

                   lDiv = document.createElement('ldiv');
                   lDiv.style.fontSize = item.style.fontSize;
                   lDiv.style.fontFamily = item.style.fontFamily;
                   item.appendChild(lDiv);
                 }

                 lDiv.innerHTML = text + "…";
              }
           });
         }
       }
   }
}
})();

$(document).ready(function(){
// Call on a window resize
$(window).resize(ellipsisPages.drawEllipses());
});

Note the area you want 'ellipsified' needs to have the CSS class 'ffEllipsis' assigned (and the JavaScript included, of course) and you are off and running! One note: this can be a performance drag on the page if there are a lot of elements needing ellipses. Use with caution.

Enjoy!

Posted at 02:34 PM in Web/Tech | Permalink | Comments (1) | TrackBack (0)

Grio