Timani I

As the big year in web development continues HTML5 is getting even closer to becoming more standard. This has been helped by Google’s Chrome browser has scoring high marks on an the HTML 5 compatibility test according to geektechnica.com.

It is an interesting site where you can read about some of new developments in HTML 5 and try the browser compatibility test page where you can see how your browser stacks up out of a total score of 160 points.

It was interesting to note that Chrome finished first with 137/160, Safari second with 113/160, Opera third with 102/160, Firefox a sluggish 100/160, and the usual suspect Internet Explorer 8 (IE 8), Internet Explorer 9 (IE 9 )scoring a blazing 19/160 points.

The finals results were:

You can also read up abou stuff that is going on a Youtube in terms of new browser based features and Apple moving more towards HTML 5 video than flash.

I really think that the flash era is coming to an end very fast, unfortunately for Adobe. This is mainly because the advent of advanced javascript libraries like jQuery, and HTML 5 video there may be no need for the extra layer any more.

Related articles by Zemanta

• The Gradual Disappearance Of Flash Websites (smashingmagazine.com)
• The New IE9: More HTML5, CSS3, and No Windows XP (mashable.com)
• Opera: Downloads Have Tripled Since Intro of Browser Choice Screen (mashable.com)

So i have to admit that one of my favorite new applications is Screener. What screenr allows you to do is to easily, quickly and painlessly record a desktop session, whether you are on a Mac, PC, or linux computer using a java applet (which is pretty fast).

Once you record your screencast, you can then manage and administer your own channel similar to a Youtube or Vimeo channel. You get the benefit of a sleek player that clearly distinguishes itself from the rest, simple and has basic sharing capabilities.

Here is a demo by Netuts of an editable list that takes advantage of HTML 5 and the localStorage attribute and works with compatible browsers.

This allows you to create, edit, update and delete elements, and keep the state of the browser even after you refresh the page. This used to be done using either a database or cookies but the nifty use the new localStorage:

More Info

Webstorage documentation – w3.org

localStorage demo -  people.w3.org

Basic information on localStorage – developer.mozilla.org

It seems one of the highest keyword searches in Google is “jQuery Google Maps” so i figured i may as well continue and make a series of plugins that make Google Maps and jQuery play together.

This time is the jMapping Google Maps plugin. So here is the usual skinny on the features and background:

Who?

What?

So what does this plugin do? i think the best thing is to give the description given by the author:

jQuery plugin for creating Google Maps from semantic markup

This plugin is designed for quick development of a page that implements a Google Map with a list of the locations that are specified within the HTML.

jQuery jMapping plugin

The plugin is fairly easy to get a handle on and allows you easily add info bubbles and embed HTML inside of the info-bubbles in an easy clean manner. The point is always to minimize number of interfaces to deal with and this adequately allows you to not even think of the Google Map API syntax and more on the business of coding your application.

Features

How?

1. Include the Google Maps API javascript

2. Add in the dependencies: MarkerManager 1.1,jQuery Metadata plugin 2.1 and MapIconMaker 1.1

3. Add in the HTML markup for the plugin

<div id="map"></div>

<div id="map-side-bar">
  <div class="map-location" data="{id: 1, point: {lng: -122.2678847, lat: 37.8574888}, category: 'market'}">
    <a href="#" class="map-link">Berkeley Bowl</a>
    <div class="info-box">
      <p>A great place to get all your groceries, especially fresh fruits and vegetables.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 2, point: {lng: -122.4391131, lat: 37.7729943}, category: 'restaurant'}">
    <a href="#" class="map-link">Nopalito</a>
    <div class="info-box">
      <p>The best authentic Mexican restaurant in San Francisco.</p>
    </div>
  </div>
  <div class="map-location" data="{id: 3, point: {lng: -122.4481651, lat: 37.8042096}, category: 'museum'}">
    <a href="#" class="map-link">Exploratorium</a>
    <div class="info-box">
      <p>A hands-on museum of science, art, and human perception in San Francisco.</p>
    </div>
  </div>
</div>

4. Add the jQuery to get the plugin to work

$(document).ready(function(){
  $('#map').jMapping();
});

I guess seeing is believing so i have embedded a demonstration below:

I think another great mapping plugin to get more control over your Google Maps applications using jQuery and the jMapping plugin.

There are plenty of examples to get started with and setup is a breeze, but it is important to remember that there are a lot of others out there so be sure to give them a whirl too.

Related articles by Zemanta

• Google Maps #2 Map Provider in US- #1 Mapping Site in US? Google Maps API (blumenthals.com)
• Maps in boxes, show your users where to go without making them leave (dtelepathy.com)

So as i was working on getting the site updated and ready, i was going through some links and just checking out some resources. Finally i stumbled upon, what may be for me the most exciting Jquery plugin in recent memory!!!

What could be so great? well it is this jQuery plugin called the jParallax. I think to really understand its best to answer the age old questions: Who, What, Why, Where, How, When.

Who?

What?

So what does this plugin do? i think the best thing is to give the description given by the author:

What does jParallax do?

jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.

I guess seeing is believing so i have embedded a demonstration below: [jParallax][jParallax]

If you have ever had to work with PHP the luxury of becoming used to simple things like request parameter processing can be lost. Sometimes you have no alternative if you are working with a simple HTML file.

Hence comes in this nifty little jquery plugin, it allows you to grab parameters from the url and then process them accordingly. One way that this could be useful is if you wanted to detect a page state or to display or hide an element depending on the state.

You can download the plugin here and its also fairly light too which is good.

Here is an example of the source, its relatively short so i am posting it here and you can give it a try:

Javascript

/* Copyright (c) 2006 Mathias Bank (http://www.mathias-bank.de)
* Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
* and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
*
* Thanks to Hinnerk Ruemenapf - http://hinnerk.ruemenapf.de/ for bug reporting and fixing.
*/
jQuery.extend({
/**
* Returns get parameters.
*
* If the desired param does not exist, null will be returned
*
* @example value = $.getURLParam("paramName");
*/
getURLParam: function(strParamName){
var strReturn = "";
var strHref = window.location.href;
var bFound=false;

var cmpstring = strParamName + "=";
var cmplen = cmpstring.length;

if ( strHref.indexOf("?") > -1 ){
var strQueryString = strHref.substr(strHref.indexOf("?")+1);
var aQueryString = strQueryString.split("&");
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){
if (aQueryString[iParam].substr(0,cmplen)==cmpstring){
var aParam = aQueryString[iParam].split("=");
strReturn = aParam[1];
bFound=true;
break;
}

}
}
if (bFound==false) return null;
return strReturn;
}
});

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Get the URL prameter with jQuery</title>
</head>
<body>
<script src="http://www.google.com/jsapi"></script>
<script>
// Load jQuery
google.load("jquery", "1");
</script>
<script src="http://www.koders.com/javascript/fid589B53905C9C92AFB7D81C3FBAB9911BE65C24C8.aspx?s=%22Justin+Palmer%22" type="text/javascript"></script>
<style>

/** Get URL Params **/

#hidden_message, #hide_message{
display:none;
}
</style>

<body>

<h1> Welcome to the test Page</h1>

<h3> <a id="show_message" href="?=1"> Show Hidden Message </a>  <a id="hide_message" href="?=0"> Hide this Message </a></h3>

<h3 id="hidden_message"><em> This is the hidden message </em> and the Parameter</h3>
</body>
</html>

Related articles by Zemanta

• 10 Really Fresh and Cool jQuery Plugins to Spice Up Your Website or Blog (tripwiremagazine.com)
• Truly Useful Form Validation Scripts for Front End Development (tripwiremagazine.com)
• How To Load the Latest Version of jQuery in WordPress (binarybonsai.com)
• 45 Fresh Useful JavaScript and jQuery Techniques and Tools (smashingmagazine.com)
• 35 Fresh JavaScript/jQuery Tools and Resources (noupe.com)