techcrank.com

Creating Offline Html5 Web Applications

Shubham — Thu, 27 Oct 2011 08:46:16 +0000

One of the most amazing features of HTML5 is the support for offline applications using the cache manifest. Well browser caching is not a new technique; it’s supported by majority of the browsers. The browser caching technique is unreliable and doesn’t work every time. Creating offline web applications is pretty easy and reliable with cache manifest.

With cache manifest there are three advantages-

Offline Browsing- users can browse your website even when they are not connected to the Internet.
Less Server Load- server load is reduced as only modified or new resources will be fetched.
Speed- the Application will be fast as the files will be cached in the local memory.

What’s the Cache Manifest File?

Cache Manifest file is a simple text file encoded using UTF-8. This file contains the list of the files that are needed to be cached in the local memory for offline usage by the Application. The files listed in cache manifest are downloaded and gets stored in the “Application Cache”.

The “Application Cache” (or AppCache) is like the browser cache but more robust and reliable. Your application will run smoothly even when the user is offline.

Getting Started With Cache Manifest-

Make sure your Doctype is a valid Html5 Doctype. i.e.

Configuring .htaccess-

Before creating cache manifest file we need to add support for it in .htaccess file i.e. you may need to add the custom mime- type to your web server. Assuming that you have Apache server, you need to add the following code to your .htaccess file-

AddType text/cache-manifest .manifest

Defining the mime-type makes the server understand the .manifest file and serve them for caching applications.

Creating the Cache Manifest File-

As we have already have a valid html5 Doctype, we need to create a text file and save it as offline.manifest. The content of the text file is-

CACHE MANIFEST
#Here goes the comment

index.html
stylesheet.css
images/logo.png
scripts/main.js

This is an example of a working cache manifest file. This file will cache the four files on the page and make them available for offline usage. This is just a general example of the cache manifest file; you can change these files with the names of your files you want to cache. That’s a basic example of cache manifest file simple enough for basic web applications.

Let’s take a look at complex cache manifest file-

CACHE MANIFEST
#Here goes the Master Comment

# Cache Files
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js

# Resources that require the user to be online.
NETWORK:
login.php
/myapi

http://api.twitter.com

# static.html will be served if main.py is inaccessible
# offline.jpg will be served in place of all images in images/large/
# offline.html will be served in place of all other .html files
FALLBACK:
/main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html

Let’s understand the above cache manifest code.

CACHE: It defines the list of files that will be cached in the local storage as soon as they are downloaded first time.
NETWORK: It defines the files that require server connection. These files are not cached in the local storage and will require internet connectivity.
FALLBACK: It is an optional decleration specifying fallback page whenever the resource is unavailable. It redirects a user to a specific page whenever there are no resources (example fallback offline.html).

Linking the Cache Manifest File-

Now that we have successfully made a cache file the next important part is to link the file to the HTML5 document. Linking the cache manifest file to html5 is pretty simple just add the single line code to your html5 document and you are ready to go.

Notes to Remember-

The first string of the cache manifest file should be CACHE MANIFEST and it’s mandatory to use it.

The second thing is that the cache manifest file has limited storage i.e. maximum 5MB. If you’re developing for chrome web store you can use unlimitedstorage directive to remove any storage restrictions.

Native Applications versus Web Applications

Shubham — Sun, 16 Oct 2011 05:19:12 +0000

There are two types of mobile applications; the native applications and the Web Applications. Choosing the right platform for your applications can be tricky. Developing HTML5 technologies for example Canvas are tremendously responsive and boast of quite a few enhancements and features.

Opting between a native app and a web app isn’t a new technical decision; it’s a good strategic one. Based on various factors, you have to analyse both options and evaluate which approach produces greater value for your business. A rich user interface or a platform independent application with much greater user access?

This article supplies a comprehensive list of advantages/disadvantages from the two approaches, which you’ll be able to weigh against requirements of your respective applications to meet your online business objective/goal.

A native cross-platform app- Twitter

Performance: Native apps use more of your device resources and capabilities and therefore are faster than web apps.

User experience: User interface of any native app has extensive control on device hardware and produce a credit application, which is quite an eye fixed candy. On the other hand, user interface for your web app is restricted to the browser capabilities and experience can vary greatly. But a common misinterpretation is without a doubt that only native apps will deliver users an offline practical experience. Not true. With HTML5, Online apps can store details, store static resources such as images, CSS and JavaScript, and can share content via supported systems and work offline almost like native apps. You may well have an icon of this web page, just like of a native app.

Cross-platform Applications: When you develop native apps you will need to develop a version for each mobile operating system i.e. different version for Ipad / iPhone, Android, Blackberry, Windows Mobile etc. If you build a Web app, the fundamental code remains identical across all devices, also it’s much easier and faster to deliver exactly the required version to each device using device detection and content adaptation. Web apps are the simplest way to reach broadest audience with a lot less effort.

A Popular Web App- Basecamp

Time to Market: Your Web app can be accessed by many users on additional platforms, quickly and quite simply, than a native application. Single codebase is in progress across all platforms (quicker development) and there’s no need to go through any specific approval process.

Type of practical application / service: There are differences between kinds of content or service which fits best on web or perhaps native apps. For example, a racing car game work best as native app mainly because it will often use heavy graphics and really need to access the device APIs including accelerometer, location detection, and various advanced features which only a native app can do. On the other side, shopping (mCommerce) and products like inventory tracking, client relationship management, financial exposure, and business process automation are best supported via the web apps. For a lot of these services, web applications will be more versatile, portable and cost-effective when compared with their native counterparts.

Apple’s Intermediate Step: iPhone 4S

Aditya — Tue, 11 Oct 2011 01:12:54 +0000

So the word is finally out, and it’s not what many had expected. It is again an intermediate step between the iPhone 4 and iPhone 5. Honestly, I always had this intuition that it’ll not be iPhone 5 but something in between what we happen to call now ‘iPhone 4S’. But who am I to say now that it’s out. Anyways, moving along; for those who are disappointed- don’t be, because in the same iPhone 4 body, it’s a remarkable combination of software + hardware. And that’s what I’m going to tell you.

Among the 200 new features as Apple says, here’s a list of 4 noteworthy elements of software and hardware combined that makes this device more powerful.

The Apple A5 Chipset

It has the same dual core chipset that comes in the iPad 2. Additionally, it has been improved even more. So all you folks out there who have already used the iPad 2 now know what performance to expect from iPhone 4S. And those of you, who haven’t used an iPad 2, believe me- it’s sweet. Even after running many applications in the background, the dual core chipset handles processes exceptionally well.

8 MP Camera with improved Optics

iPhone 4S comes equipped with a 8 Mega Pixel camera. But that isn’t anything new given the fact that many other smartphones have 8MP’s or more! Or is it?Again, it’s not just about the MP’s; it’s about the technology behind those MP’s which builds the image. And Apple has lived up to its reputation.

As you can see in the image, the camera has an added on 5^th lens which makes the image crispier. Plus the aperture size has been increased to let more light in. In effect, the image is neat, sharper and more detailed.

Apple Siri

This is a new technology introduced in the iOS 5* which is one of the key factors in pushing the benchmark of mobile operating systems even more. It acts like an assistant and responds and reacts to the commands given by the user. The smart AI behind it makes it even better. It learns how the user interacts with the device and performs constant evaluations to its functioning.

Seeing the videos, it sure looks intelligent and very effective in voice recognition.

*The only downside is- that this service requires a significant amount of computing memory which unfortunately isn’t available on the previous iPhones. So people with iPhone 4 and 3GS will have to take it with a grain of salt or will have get an iPhone 4S.

The iCloud

It’s a service introduced in the iOS 5 which stores all your data from contacts, calendars, music, notes, apps etc. and synchronizes it to all your iOS devices over the air. So next time you won’t have to find your USB cable to dock you iDevice into your PC or MAC, it’ll automatically sync every item seamlessly as long as you are on the internet.

History repeats itself; we have seen this happening before. iPhone 4 was a breakthrough over iPhone 3GS which was trailed by iPhone 3G. Now putting iPhone 4 in the place of iPhone 3G and iPhone 4S in place of iPhone 3GS, the link extends to iPhone 5. At least that’s what I like to think. Going by this viewpoint, iPhone 5 (whenever it comes out), is going to be one beast.

Quick Facts:

iPhone 4S touched 1Million pre-orders within 24 hours
Although having a powerful processor, the RAM on iPhone 4S is 512MB only (Source: MacRumors)
The camera on iPhone 4S can capture and save full 8MP image in 1.1 seconds and the next images within 0.5 seconds in rapid succession
With the new processor, game and graphic performance increases by 7x on iPhone 4S

The iPhone 4S will start shipping this Friday onwards and iOS 5 upgrade to iPhone 4 and iPhone 3GS rolls out tomorrow.

If you have any questions & suggestions regarding the article above, please leave a comment below.

Customizing Website for IPhone/IPad Web Application

Shubham — Sun, 25 Sep 2011 20:28:07 +0000

Creating a native IOS application for your website will be a challenging task if you’re not familiar with Objective C. These are the few tweaks which will make your web application look-alike the native IOS application with existing HTML and CSS knowledge.

Adding a Custom Web Page Icon for IPhone/IPad Home Screen

Adding a website icon is easy, you can use any graphic to create icon of your website. The beauty with iOS is that you don’t have to think for the glossy finish and the rounded corners; it’s automatically added by the device.

However if you want to customize your icon your way, you can use a precomposed image.

This is the image of techcrank.com.

or for a precomposed image

Adding a Splash Screen-

Like native iOS applications web applications can also have a start-up image. By default, the splash screen shows the screenshot of the web application the user visited last time. For adding a splash screen you can add this to your code.

Hide Safari Components-

If you want to hide the safari interface elements from your web application, just add the code-

Preventing scaling-

If you want to disable pinch to zoom in your web application and prevent scaling use the viewport Meta tag:

Caching application files-

If you want to make your web application to work offline, or you want to improve its load time create a cache manifest file and link it to the main page of web. When a cache manifest is in use the web application launches with the last version.

With these techniques you can make your web application look alike the native iOS app. These tips would work for the home screen saved applications. Remember to use ajax in your web applications as without ajax oriented applications it would open any links in safari and you will lose any settings.

Game Development 101: The Beginning

Aditya — Mon, 19 Sep 2011 18:04:59 +0000

Apart from web designing, I’ve always had an inclination towards game development. And I’m sure many of you out there must have thought of this in the same way that I have. And from what I can tell, the most difficult part of any development is to find resources and guides to get started. So I’ll be posting my experiences and what tools/resources I found to break the ice. I hope you’ll find them helpful.

A BIG Game?… NO!

For starting game development, you always have to start small. You just can’t go and start making a AAA game (a big-budget game) with lots things which you probably wouldn’t have heard of if I mention them here. You need to go through the basics. Work your way with those and then make a move towards new things.

In any development, control over the language is one of the most basic things you need. It can be any language you are comfortable with. You just have to choose wisely because whatever you pick, you’ll have to stick to it for a fair amount of time. But once you get used to it, there will be nothing stopping you. And as your knowledge progresses, you’ll find new tools and languages comparatively easy and fast to get a grip over.

What does it take?

If you know a language, it does not necessarily mean you can do anything. You need to have an overview of how things are supposed to work. It’s all logical. It’s something that cannot be taught but needs to be inherited from the mind. But given proper seeding, can be accomplished.

A game deals with logics. And logics deal with mathematics. So at some point of time, you’ll wish you’d have paid a little more attention in your math class.

Finally, and this one’s most important, you need to be passionate towards game development. You need to put sincere efforts and dedication towards learning. It’s possible that you may not achieve a certain benchmark of quality you thought beforehand, but that’s just a learning step towards it.

On an ending note, I’ll share some of the resources/tools which I found very helpful for a lift off. There are a loads of tools available, below are just a few by my preference.

For resources, tutorials and guides:

Tools:

Well, that wraps it up. I’ll be posting more articles which will uncover a few more layers of game development in the next few weeks. They’ll contain more details of terms and core logics of game development and how to start using the tools and the art assets.

If you have any questions & suggestions regarding the article above, please leave a comment below.

Carbyn HTML5 based OS for Tablet, PC and MAC

Shubham — Sat, 17 Sep 2011 08:06:37 +0000

Carbyn is an HTML5 based OS that can be accessed with any modern web browser. Since it is built on HTML5 there is nothing to install at all, you just have to login into Carbyn and you’re ready to go! Carbyn runs on any browser except the older versions of IE.

The Carbyn OS lets you enjoy all your favorite HTML5 Applications from any device whether it is PC, MAC or tablet. The Carbyn Team is working to make it run on the various smartphones. “The smartphone version will be available soon” the team says.

Once you login into Carbyn and load up the OS, you can pin your favourite applications in the Carbyn dashboard (in the browser). Any HTML5 applications can be personalised from the ground up (using HTML5) or existing apps can use the wrapper in the Carbyn SDK. The team says that they can get any HTML5 application working on Carbyn OS in less than half an hour.

So in what way is this different from Chrome Web Store? Well, that’s just a store for HTML5 applications while Carbyn is an OS to run these applications. What’s cool with Carbyn is that it supports multi-tasking, thanks to their SDK which allows different apps to communicate in a way that traditional apps can’t. “One app can tell, if it’s a phone app, let’s say Skype can tell the music app, ‘hey, stop playing I’m getting a call.’ So, it’s a true, OS one hundred percent in the browser.” explains the team.

In the dock menu you can see your running apps, favourite apps, and the other personalized applications categorized. Customizing the background wallpaper, sharing options, user account settings can be done easily with system preference option on dashboard.

The Carbyn OS is pretty much similar to the Chrome browser. Or even close to Chrome OS.

But the Chrome Web Store works on Chrome browser only. Carbyn is meant to run on any device supporting HTML5 delivering cross platform experience for Apps.

Carbyn is under development and beta code can be requested at Carbyn.

Back in Business

Aditya — Wed, 14 Sep 2011 20:18:37 +0000

It’s been a while since we haven’t made any updates and tweaks to our blog. Neither had we much time incessant enough to do those. But finally, after a period of about 1.5 years, we sat down in harmony to reinstate what we had given up. And after a long-lasting analysis and research of more than a thousand blogs, we came up with this design.

More to that, we learned and fixed the slip-ups we made earlier, making the site more simple, faster and intriguing. We made a move to a new hosting and the elemental changes running along with it made the site 60% faster. And we’ll keep on making changes to speed it up even more.

That’s just not it; the site will now be running in versions. When we complete the benchmark of our assessment of the current version of the site, that is, from cross browsing compatibility to validations and everything in between, we’ll move to the next idea we have in our mind.

We’ll conduct occasional give-aways, and this time not just software’s but something more, umm, physical may be. So heads up! You have a lot of cool stuff heading your way.

Though we cannot assure that you’ll get articles everyday as it’s still a hectic job to deliver quality content when a network is slender, but what we can assure is that we will give a descent amount of quality updates and articles in a week. However, with time, we’ll work on to increase the frequency of updates.

We hope you’ll find the blog more helpful, if not, then entertaining.

Last but not the least, your feedback, is ultimately the key to our triumph. Be it good or bad, your response will always be appreciated.

Getting Started with HTML5 (things you need to know)

Shubham — Mon, 12 Sep 2011 19:25:32 +0000

It’s been a while since we switched from the table elements to the div semantics and standards. Now we are using div to group block elements to format them with CSS. You may ask: “Now what’s innovative with HTML5? Should it be early for me to start coding with HTML5 if the older browsers don’t support it?” But the question itself is ambiguous. HTML5 is a collection of individual features. So detecting the overall HTML5 compatibility over browsers would not make any sense. However, you can detect support for individual features like canvas, geolocation API, or cache manifest.

HTML5 has some exciting new additions: though it’s not in final stages, but pieces of it can be used to develop web applications.

We can’t deny the fact that HTML4 is the most successful markup language in the history of Internet ever. HTML5 builds on that revolutionary success. To start coding with HTML5, you don’t need to change the way you used to code in HTML4. With HTML5 you have new semantic elements, direct support for audio, video and a cool new canvas feature.

Understanding the Doctype-

HTML5 comes with two serializations- XML and HTML. The XML serialization is served as application/xhtml+xml, while the HTML is served as text/html. Starting with HTML5 is as simple as changing the Doctype. In previous versions there where variety of Doctypes, but in HTML5 there is only one Doctype:

Changing the Doctype won’t break any of your existing markup, as all the HTML4 syntax are supported in HTML5. Now, you can start using the new HTML5 tags such as