Category Archives: General

Creating Responsive Websites – The Easy Way

Hi All,

Hope you are doing good!

Needless to say HTML5, CSS3 & Javascript (JQuery) have opened so many doors for us, there was a time when HTML was facing tough competition from Flash, Silverlight etc but with the latest features in CSS3 & Javascript we can do almost everything that we earlier used to do using Flash

HTML5 & CSS3 (using Media Queries) have given us a whole new arena – creating Responsive website, that fits the screens of devices with different width & height and yet give best view of the website to a visitor. Responsive websites are now giving tough competition to native mobile applications.

With competition growing up in the market for smartphones, every company is launching something new with their latest gadgets and general sellers/service provider have to keep their native application updated to meet up requirement of these latest devices which in turn raises their cost – in most cases Responsive websites are the best solution for it.

The most important part for developing a responsive website is CSS3 (Media Queries) – don’t worry you need not have to take the pain of learning this from scratch as their are already so many frameworks available that you can use to create you responsive website.

Some on them are Amazium, Skeleton, Less but the one I like the most is Bootstrap fromTwitter, its so easy to use and give fast results. I have now developed few websites using the Bootstrap framework and I love it 🙂

Do take out some time to check it and share your view

Thanks for reading 🙂

Cheers,

Ankit

Create PDF using PHP – mPDF

Hi All,

I have worked on few projects in ASP.Net, PHP & Coldfusion that require generating PDF on the runtime for invoices, receipts or letters. Coldfusion has its own in-built library for generating PDF’s but for ASP.Net & PHP we need to use third party libraries. I have used ABCPdf with Asp.Net & FPdf with PHP websites, and they both are good.

Recently I was working on a project that required to generate receipt & invoices in PDF, the catch was that I had to use Images, Custom Fonts & Background Images in the PDF output. Many PDF generator allow you to use images or background image in the PDF output but embedding custom font is tricky.

mPDF is a great solution for this, it allows you to use your custom fonts in the PDF with ease. mPDF is simple & easy to use and generates fast output.

Checkout this sample pdf that i generated using mPDF

Cheers,

Ankit

Parse – backend utility for mobile apps (Android, iOS & Web)

Hi Reader,

A month back someone told me about Parse – a very good tool to manage backend functionality for mobile apps. I am not very old with developing mobile app and did not want to get stuck with problems that arises when handling back-end activities in a native way for my android apps as this is just the beginning for me, so I thought to give #Parse a try and I liked it. Though I faced a few problems, sharing my thought below

Positives about Parse:
a) Available for both iOS & Android
b) Simple and Easy to use
c) Covers most of what you may need for back-end functionality in you app
d) Supports data handling in background threads, so better performance for your app
e) Has REST API so you can Sync/share data between web & mobile version of your app
f) Allows Facebook & Twitter integration

Negative about Parse
a) New product & Support not satisfactory
b) No proper libraries available for web integration
c) Limitations with Geopoint queries

But my overall experience was good and I like the product, so I would recommend it for new mobile app developers.

I have done some advance work using #Parse on my android and web apps so in case you face any issues feel free to contact me, I would surely try to help you

Cheers,
Ankit 🙂

Icecream Sandwich for Google Nexus S in India

Hurray! finally Icecream Sandwich, the latest version of Android is officially available in India for Google Nexus S.
I was hearing rumors about it for a week now and I was super excited, finally this morning an alert popped up on my phone screen saying “Icecream Sandwich 4.0.4 in now available for update” 🙂

Initially I was a bit scared as I heard Icecream Sandwich has issue on Nexus S and I was looking for review on Internet from people who have already updated their phone but did not find any latest reviews.

Finally this evening I decided to go for it and update my device and as a result I am in LOVE [much more then before] with my Nexus S.

Super looks, smooth, new features (Panaromic Camera is the best feature) etc etc

Go for it guys and tell me what you think about it.

Drag & Drop Pin on Map for Your Android Application

Hi all, I am very excited as I am very close to finish my first Android Application project.

From the past few days I have been working on it and truly this project has helped me learn a variety of stuffs including using various controls, external libraries, animations & my favorite Maps in android application. Personally I feel Map makes any application much smarter.

This application I have been developing uses Map to point users current location and it also allows to drag and drop the pin to any other location on the map and get address details for the position.

I love the way Drag & Drop Pin feature works on apple products (IPhone, IPod & IPad), specially the bouncy feeling it has and I wanted my application to have the same feel, but my bad, after searching for sometime on google I found that Google has not provided similar inbuilt feature for Android [I wonder why?], see the article here.

But as said in IT industry if client want it, it has to happen 😉 so after some more search I found another article that mentioned about a sample project which shows similar feature, see the article here. So I used the sample project and achieved the desired result. Though it does not have the same bouncy feel but it look good and satisfies the requirement.

I have created a sample Android project for everyone who may have similar requirement after now and also attached the source code for Android project here below.

Download Source : Drag & Drop Pin for Android App

Please feel free to contact me in case you face any problem, thanks for reading 😉

Custom Shopping Cart for existing WordPress website

Hi all, apologies for the long delay for the next article, I have been staying very busy these days 🙁

Today I am going to share my experience about creating/editing my first wordpress plugin. I have been working & customizing wordpress websites for like 2 years now but unfortunately never had a chance to develop a custom plugin for wordpress as everything thing you require is readily available, thanks to the huge wordpress user community 🙂

But recently a requirement came up for integrating shopping cart plugin to an existing WordPress 3.0 website and payment gateway to be used was EWay. As always I started looking for an existing plugin that meet my requirements, unfortunately this time found nothing.

There are some paid plugins available for WordPress that allows payment through EWay but most of them were compatible with WordPress 3.1 or above. So finally we thought to create our own plugin this time 🙂

As I was virgin in wordpress plugin development i decided to find a plugin that I can modify and use as per my requirement, after some search and with the help of Google Baba [I say Baba because Google knows it all :P] I found EShop, a very well planned/coded and useful plugin.

eShop is an accessible shopping cart plugin for WordPress, packed with various features. It utilises WordPress pages or posts as products , and is compatible with custom post types. Read more about it here

In case you have a requirement of a Custom Shopping cart for your existing WordPress website, I would 100% percent recommend eShop. You can easily customize as per your requirement, like selling multiple types of products, gift coupons, downloadable products etc

Check the Aquabumps website to see how my plugin looks like.

Feel free to ask me in case you have any queries after reading or if you want to know more about eShop and how to customize 🙂

Thanks for visiting & happy reading 😉

Google Maps Javascript API V3 Example

Google Maps – one of the best resource available on the web that brings the world on your computer screen. With google maps distant places are just a few clicks away from you.

Google maps javascript api is amongst the most widely used api on the web as it easily lets you embed Google Maps in your own web pages. Version 3 or V3 as its called of this API is especially designed to be faster and more applicable to mobile devices, as well as traditional desktop browser applications.

New Features

1. You can now specify the inclusion of optional libraries for specialized functionality in the Maps API!

2. Add animations to your markers! Make your markers drop or bounce when placed on the map.

3. The Google Maps API no longer requires a Maps API key!

4. The Google Static Maps service now supports custom styled maps!

Google Geocoding/Reverse Geocoding Service

Geocoding is the process of converting addresses (like “Taj mahal Agra, Tajganj, Agra, Uttar Pradesh 282001, India“) into geographic coordinates (like latitude 27.173006 and longitude 78.042086), which you can use to place markers or position the map.

The Google Geocoding API provides a direct way to access a geocoder via an HTTP request. Additionally, the service allows you to perform the converse operation (turning coordinates into addresses); this process is known as “reverse geocoding.”

I have created a sample application “Map My Address” for those those who want to start using Google Maps on the web pages.

Sample URL: http://ankitkedia.com/sample/GoogleMaps/index.html

Download Source: http://ankitkedia.com/sample/GoogleMaps/source.zip

Please feel free to download and use the source code or contact me if you have any queries.

The Stock Market

The Pig Story

Once upon a time in a village, a man appeared and announced to the villagers that he would buy PIGS for Rs. 10.

The villagers seeing that there were many PIGS around, went out,to the forest and started catching them. The man bought thousands at Rs. 10 and as supply started to diminish, the villagers stopped their effort. He further announced that he would now buy at Rs. 20. This renewed the efforts of the villagers and they started catching PIGS again.

Soon the supply diminished even further and people started going back to their farms. The offer rate increased to Rs. 25 and the supply of PIGS became so little that it was an effort to even see a PIGS, let alone catch it!

The man now announced that he would buy PIGS at Rs. 50! However, since he had to go to the city on some business, his assistant would now buy on behalf of him.

In the absence of the man, the assistant told the villagers.Look at all these PIGS in the big cage that the man has collected. I will sell them to you at Rs.35 and when the man returns from the city, you can sell it to him for Rs.50.”

The villagers squeezed up with all their savings and bought all the PIGS. Then they never saw the man nor his assistant, only PIGS everywhere!!!

Welcome to the “Stock” Market!

Gantt Chart with Google Charts

Hi Friends

Graphs & Charts are used to illustrate many types of data and are not limited to the simpler types such as line, bar, and circle. They help to make facts clearer and more understandable. Beautiful Graphs and Charts always adds to any report or analysis.

One such chart is Gantt Chart, Gantt chart is a specialized bar chart used to provide a graphical overview and schedule of tasks. It helps in analysis of planed goals and actuals results. This is a chart with rectangular bars.

In one of my project I was required to create a graphical report to compare forecasted and actual Milestone data. So I felt Gantt Chart is the best way to display the comparison. After some research on google I found an easy way of creating Gantt Chart using Google Charts API.

Here is a sample code for it

<img src=”http://chart.apis.google.com/chart?
cht=bhs
&chs=400×200
&chd=t:0,0,0,0|10,20,30,40|10,20,40,20
&chxt=x,y
&chxl=1:sad|Testing
&chxr=0,0,100|1,0,100
&chds=0,100
&chco=008080|00CCFF,ffffff00
&chg=20,50
&chbh=20,10
&chtt=My Gnatt Chart
&chts=000000,25
&chdl=Forcast|Actual
&chdlp=b” />

My Gantt Chart

For any queries, confusion or R&D you can consult Google Chart API Documentation or you can also post your queries here.

Hope this post helps you, thanks for reading 🙂

Animated Banner With JQuery

Hi All

Today I would like to share some of my experience with JQuery. JQuery is a fantastic lightweight javascript library that makes it possible to do complex things very fast and easily. Animation is one such thing. Animations using JQuery adds up to the looks of your webpage without actually increasing much load on it and also you do not really have to put a lot of efforts for it. It is simple to understand and implement JQuery plugins. It offers a lot of plugins for AJAX, Animations and Effects, UI, Timers and many more. All of them are easily available and free to download here.

In this post I am sharing my source code for creating a simple, useful yet beautiful animated banner with JQuery.

Here is the source:

HTML:

<div id=”container”>
<div id=”imageDiv1″ class=”bottom”><img id=”image1″ src=”images/image1.gif” alt=”” /></div>
<div id=”imageDiv2″ class=”right”><img id=”image2″ src=”images/image5.gif” alt=”” /></div>
</div>

CSS:

#container{
margin-top:150px;
height:135px;
width:215px;
border: 1px solid #000;
text-align:center;
overflow:hidden;
position:relative;
}

.right{
top:-140px;
right:-220px;
position:relative;
}

.bottom{
top:140px;
right:0px;
position:relative;
}

JQuery:

I am adding the query script .js file here with the post. Download the javascript file banner-script.js here.

Please replace the images in this file with yours.

This is really easy and very useful. If you have any queries or you face any problem feel free to contact me.

Hope this is useful for you, thanks for reading 🙂

Updated on 15th January, 2011

Now you can also see the demo here.