Pakzilla » Web 2.0 http://www.pakzilla.com A developer's blog! Tue, 30 Apr 2013 09:37:16 +0000 en-US hourly 1 http://wordpress.org/?v=3.5.1 Evaluating Leaflet JS as alternative of Google Maps http://www.pakzilla.com/2012/03/20/evaluating-leaflet-js-as-alternative-of-google-maps/ http://www.pakzilla.com/2012/03/20/evaluating-leaflet-js-as-alternative-of-google-maps/#comments Mon, 19 Mar 2012 23:41:15 +0000 Tahir Akram http://www.pakzilla.com/?p=1920 Related posts:
  1. Google Code Jam is back for year 2009
]]> I am using Google Maps at work. Their map API is robust. To play with maps and to do interesting thing. But there are some issues that one can have with Google Maps. Majority of people might be not facing them. Why I am thinking alternatives to Google Map is because they are not free on HTTPs. You have to purchase their licence. And I also have a concern on the load time of Google Map JS file.

foursquare (a location sharing social networking app) was also using Google Maps and recently they shifted to OpenStreetMaps and Leaflet JS API. It attracted me to see what this JS API is providing. It is easy use and has basic things that everyone needs for their web maps. They provide tile base maps for web and mobile devices. What thing that I am missing is, they do not provide Geocoding service. For that you need to use some other source. As they claim, they are only a JavaScript library.

Example

Following is the basic map by Leaflet JS API


<html>
    <head>
        <title>Leaflet test</title>
        <script src="http://code.leafletjs.com/leaflet-0.3.1/leaflet.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <link rel="stylesheet" href="http://code.leafletjs.com/leaflet-0.3.1/leaflet.css" />
		<script>
		jQuery(document).ready(function() {
			var map = new L.Map('map');
			var cloudmade = new L.TileLayer('http://{s}.tile.cloudmade.com/65122fc35d994da0b652aef47430d27c/997/256/{z}/{x}/{y}.png', {
			    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>',
			    maxZoom: 18
			});
			
			var lahore = new L.LatLng(31.5925, 74.309444); // geographical point (longitude and latitude)
			map.setView(lahore, 13).addLayer(cloudmade);
			
			var markerLocation = new L.LatLng(31.5925, 74.309444);
			
			var marker = new L.Marker(markerLocation);
			map.addLayer(marker);			

		});		
		
		</script>	
    </head>
    <body>
   		
       		<div id="map" style="height: 600px;"></div>
		
    </body>
</html>

There is no feature comparison available on Leaflet site. They only provided their reference and some examples. They should have a community support and discussion forum.

Geocoding service

For gecoding service the makers of Leaflet JS, CloudMade also has a HTTP service.

Related posts:

  1. Google Code Jam is back for year 2009

]]> http://www.pakzilla.com/2012/03/20/evaluating-leaflet-js-as-alternative-of-google-maps/feed/ 0 A reference to HTML5 tags http://www.pakzilla.com/2012/01/01/a-reference-to-html-5-tags/ http://www.pakzilla.com/2012/01/01/a-reference-to-html-5-tags/#comments Sun, 01 Jan 2012 17:24:21 +0000 Tahir Akram http://www.pakzilla.com/?p=1813 Related posts:
  1. An ultimate HTML5 cheatsheet you must have
  2. How to copy to clipboard in Chrome extension
  3. Fetch Twitter friends or followers through REST API in Java
]]> New tags added in HTML 5

Layout tags

<article> Defines an article
<aside> Defines contents aside from the page content
<embed> Defines external interactive content or plugin
<figcaption> Defines the caption of a figure element
<figure> Defines a group of media content, and their caption
<footer> Defines a footer for a section or page
<header> Defines a header for a section or page
<nav> Defines navigation links
<section> Defines a section
<wbr> Defines a possible line-break

Web Apps tags

<canvas> Defines graphics
<command> Defines a command button
<datagrid> References dynamic data in a tree or a tabular data form
<datalist> Defines a dropdown list
<details> Defines details of an element

Media tags

<audio> Defines sound content
<source> Defines media resources
<video> Defines a video

Ruby tags

<rp> Defines browser substitute for unsupported ruby elements
<rt> Defines explanation to ruby annotations
<ruby> Defines ruby annotations

Other tags

<dialog> Defines a conversion or people talking
<hgroup> Defines information about a section in a document
<keygen> Defines a generated key in a form
<mark> Defines marked text
<meter> Defines measurement within a predefined range
<summary> Defines the header of a “detail” element
<time> Defines a date/time

Existing tags in HTML 4 & 5

<!–..–> Defines a comment
<!DOCTYPE> Defines the document type
<a> Defines a hyperlink
<abbr> Defines an abbreviation
<address> Defines an address element
<area> Defines an area inside an image map
<b> Defines bold text
<base> Defines a base URL for all the links in a page
<bdo> Defines the direction of text display
<blockquote> Defines a long quotation
<body> Defines the body element
<br> Inserts a single line break
<button> Defines a push button
<caption> Defines a table caption
<cite> Defines a citaion
<code> Defines computer code text
<col> Defines attributes table columns
<colgroup> Defines groups of table columns
<dd> Defines a definition description
<del> Defines Defines deleted text
<dfn> Defines a definition term
<div> Defines a section in a document
<dl> Defines a definition list
<dt> Defines a definition term
<em> Defines emphasized text
<fieldset> Defines a fieldset
<form> Defines a form
<h1> to <h6> Defines header 1 to header 6
<head> Defines information about the document
<hr> Defines a horizontal rule
<html> Defines an html document
<i> Defines italic text
<iframe> Defines an inline sub window (frame)
<img> Defines an image
<input> Defines an input field
<ins> Defines inserted text
<kbd> Defines keyboard text
<label> Defines a label for a form control
<legend> Defines a title in a fieldset
<li> Defines a list item
<link> Defines a resource reference
<map> Defines an image map
<menu> Defines a menu list
<meta> Defines meta information
<noscript> Defines a noscript section
<object> Defines an embedded object
<ol> Defines an ordered list
<optgroup> Defines an option group
<option> Defines an option in a drop-down list
<p> Defines a paragraph
<param> Defines a parameter for an object
<pre> Defines preformatted text
<q> Defines a short quotation
<s> Defines text that is no longer correct
<samp> Defines sample computer code
<script> Defines a script
<select> Defines a selectable list
<small> Defines small text
<span> Defines a section in a document
<strong> Defines strong text
<style> Defines a style definition
<sub> Defines subscripted text
<table> Defines a table
<tbody> Defines a table body
<td> Defines a table cell
<th> Defines a table header
<thead> Defines a table header
<title> Defines the document title
<tr> Defines a table row
<ul> Defines a unordered list
<var> Defines a variable

Old tags

<acronym> Defined acronyms in HTML 4.01
<applet> Defined an embedded applet
<basefont> Defined default font properties for all text in a document
<big> Used to make text bigger
<center> set to center align text and content
<dir> Defined a directory list
<font> Specified font face, font size, and font color of text
<frame> Defined on particular window without a frameset
<frameset> Defined a frameset, which organized multiple windows
<noframes> Displayed text for browser that do not handle frames
<strike> Defined strikthrough text
<tt> Defined teletype text
<u> Defined underliend text
<xmp> Defined preformatted text

Global attributes

New attributes

contenteditable Specifies if the user is allowed to edit the content or not
value: true | false
contetxtmenu Specifies the context menu for an element
value: menu id
draggable Specifies whether a user is allowed to drag an element
value: true | false | auto
dropzone Specifies what happens when dragged data is dropped
value: copy | move | link
hidden Specifies that the element is not relevant
value: hidden
spellcheck Specifies if the element must have its spelling checked
value: true | false

Existing attributes

accesskey Specifies a keyboard shortcut to access an element
value: character
class Specifies a classname for an element (for stylesheets)
value: class name
dir Specifies the text direction for the cotent in an element
value: ltr | rtl
id Specifies a unique id for an element
value: id
lang Specifies a language code for the content in an element
value: language code
style Specifies the tab order of an element
value: number
title Specifies extra information about an element
value: text

Event attributes

New attributes on Window

onafterprint Run after the document is printed
onbeforeprint Run before the document is printed
onbeforeonload Run before the document loads
onerror Rn when an error occur
onhaschange Run when the document has change
onmessage Run when the message is triggered
onoffline Run when the document goes offline
ononline Run when the document comes online
onpagehide Run when the window is hidden
onpageshow Run when the window becomes visible
onpopstate Run when the window’s history change
onredo Run when the document performs a redo
onresize Run when the window resized
onstorage Run when a document loads
onundo Run when a document perform an undo
onunload Run when the user leaves the document

Existing attributes on Window

onblur Run when the window loses focus
onfocus Run when the window get focus
onload Run when the document loads

New attributes on Form

oncontextmenu Run when a context menu is triggered
onformchange Run when a form changes
onforminput Run when a form gets user input
oninput Run when an element gets user input
oninvalid Run when an element is invalid

Existing attributes in Form

onblur Run when an element loses focus
onchange Run when an element changes
onfocus Run when an element gets focus
onselect Run when an element is selected
onsubmit Run when a form is submitted

Unsupported attributes in Form

onreset Run when a form is reset (Not supported in HTML 5)

Existing attributes for keyboard

onkeydown Run when a key is pressed
onkeypress Run when a keys pressed and reloaded
onkeyup Run when a key is released

New attributes for mouse

ondrag Run when an element is dragged
ondragend Run at the end of a drag operation
ondragenter Run when an element is dragged on a drop target
ondragleave Run when an element leaves a valid drop target
ondragover Run when an element is dragged over a drop target
ondragstart Run at the star of drag operation
ondrop Run when dragged element is being dropped
onmousewheel Run when the mouse wheel is being rotated
onscroll Run when an element’s scrollbar is being scrolled

Existing attributes for mouse

onclick Run on a mouse click
ondbclick Run on a mouse double-click
onmousedown Run when a mouse button is pressed
onmousemove Run when the mouse pointer moves
onmouseout Run when the mouse pointer moves out of an element
onmouseover Run when the mouse pointer moves over an element
onmouseup Run when mouse button is released

New attributes for media

oncanplay Run when media can start play
oncanplaythrough Run when media can be played to the end
ondurationchange Run when the length of the media is changed
onemtied Run when a media resource element becomes empty
onended Run when media has reach end
onerror Run when an error occurs loading an element
onloadeddata Run when media data is loaded
onloadedmetadata Run when the duration of a media element is loaded
onloadstart Run when the browser starts to load the media data
onpause Run when media data is paused
onplaying Run when media data has start playing
onprogress Run when the browser is fetching the media data
onratechange Run when the media data’s playing rate has changed
onreadystatechange Run when the ready-state changes
onseeked Run when a element’s seeking attribute is not true
onseeking Run when an element’s seeking attribute is true
onstalled Run when there is an error in fetching media data
onsuspend Run when browser has stopped fetching media data
ontimeupdate Run when media changes its playing position
onvolumechange Run when media changes the volume, also when mute
onwaiting Run when media has stopped playing

Existing attributes for media

onabort Run on an abort event

Note: I compiled these tags list from this cheat sheet. Correction and suggestion are welcomed. Thanks.

Related posts:

  1. An ultimate HTML5 cheatsheet you must have
  2. How to copy to clipboard in Chrome extension
  3. Fetch Twitter friends or followers through REST API in Java

]]> http://www.pakzilla.com/2012/01/01/a-reference-to-html-5-tags/feed/ 8 jQuery datepicker for date of birth http://www.pakzilla.com/2011/03/01/jquery-datepicker-for-date-of-birth/ http://www.pakzilla.com/2011/03/01/jquery-datepicker-for-date-of-birth/#comments Mon, 28 Feb 2011 21:08:03 +0000 Tahir Akram http://www.pakzilla.com/?p=1375 No related posts. ]]> Just configured a JQuery datepicker for taking date of birth input. It will show you 100 years to current date. You can’t select date beyond the yesterday date (present date is excluded). You can configure it more according to your needs. But if you just want a simple datepicker, it will work for you.

$(function() {
        $( "#datepicker" ).datepicker({
            dateFormat : 'mm/dd/yy',
            changeMonth : true,
            changeYear : true,
            yearRange: '-100y:c+nn',
            maxDate: '-1d'
        });
    });

See demo.

You can apply stylesheet of JQuery, on demo you will see calendar with no styles.

No related posts.

]]> http://www.pakzilla.com/2011/03/01/jquery-datepicker-for-date-of-birth/feed/ 4 An ultimate HTML5 cheatsheet you must have http://www.pakzilla.com/2011/02/27/an-ultimate-html5-cheatsheet-you-must-have/ http://www.pakzilla.com/2011/02/27/an-ultimate-html5-cheatsheet-you-must-have/#comments Sun, 27 Feb 2011 16:30:27 +0000 Tahir Akram http://www.pakzilla.com/?p=1359 No related posts. ]]> Like a lot of other web developers, I am also going to start learning HTML5. It’s time to get maximum benefit of HTML5 based browsers for our websites. Here I want to share a very useful cheatsheet on HTML5. It must be in your archive. If you are learning it.

Update

I have converted this cheat sheet into text form. You can read here.

via

No related posts.

]]> http://www.pakzilla.com/2011/02/27/an-ultimate-html5-cheatsheet-you-must-have/feed/ 17 Div based UIs. Heaven or Hell for a developer? http://www.pakzilla.com/2010/08/03/div-based-uis-heaven-or-hell-for-a-developer/ http://www.pakzilla.com/2010/08/03/div-based-uis-heaven-or-hell-for-a-developer/#comments Mon, 02 Aug 2010 22:06:23 +0000 Tahir Akram http://www.pakzilla.com/?p=1096 Related posts:
  1. Programmer vs Developer vs Architect
  2. How the mind of a web developer works?
  3. Ten things every Java developer should know about UNIX
]]> At my work I have a large application that has all web pages in table based layout. The use of Div is just limited to hide and show some content area on web page. Same is the case with CSS. Using them for styling fonts and some formatting for tables. Like every developer (not designer) I am very comfortable in developing UIs by using tables. But quite impressed with Div based layouts, as its a fashion thing for web pages. I see how gracefully div is helping to manage contents instead of tr and tds. Whenever I visit some site that has some good layout. I hit the view source of that page to see whether the designer/developer has used tables. And almost all of time I find myself alone loving tables. And I know the cost to manage a big web page all developed in table. What happen if some td missed. And I need to do the debugging by enabling the border of tables. Ehh.

Its been several years people started developing UIs in Divs. Now no one is working on tables. But if you want to shift on developing UI in Div, you need a learning curve on CSS. So what happen here? It has increased the cost of your time to develop a web page. Unless you master yourself in CSS. Huh?

So being a Java developer, should I master myself in CSS things too. If I am an independent (solo performer) developer that want to develop some app. First thing that came in my mind is, what happen when people will hit view source button. And will it not increase my time to deliver a thing. What should I consider, the features in my application? or the fear of developing the web pages in divs?

Related posts:

  1. Programmer vs Developer vs Architect
  2. How the mind of a web developer works?
  3. Ten things every Java developer should know about UNIX

]]> http://www.pakzilla.com/2010/08/03/div-based-uis-heaven-or-hell-for-a-developer/feed/ 8 How the mind of a web developer works? http://www.pakzilla.com/2010/08/02/how-the-mind-of-a-web-developer-works/ http://www.pakzilla.com/2010/08/02/how-the-mind-of-a-web-developer-works/#comments Mon, 02 Aug 2010 18:20:38 +0000 Tahir Akram http://www.pakzilla.com/?p=1090 Related posts:
  1. Div based UIs. Heaven or Hell for a developer?
  2. Programmer vs Developer vs Architect
]]> Do you think your mind has similar type of characteristics. :)

Ref: Mingle2

Related posts:

  1. Div based UIs. Heaven or Hell for a developer?
  2. Programmer vs Developer vs Architect

]]> http://www.pakzilla.com/2010/08/02/how-the-mind-of-a-web-developer-works/feed/ 1