Jquery Mobile is HTML5 based user interface system which is built on rock-solid jQuery and jQuery UI foundation. Its emphasis on semantic markup and progressive enhancement makes it super easy to use.
alert(‘You touched the element’);
Creating a webpage for mobile in jQuery is incredibly easy, just include the jQuery Mobile files, CSS files in your header and add a few data attributes to the markup and you are done.
Including the jQuery Mobile Files
<link rel=”stylesheet” href=”http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css” />
Adding Data attributes to the markup
<div data-role=”page” id=”first” data-theme=”a”>
</div><!– /header –>
<p>Page content goes here.</p>
<a href=”#second”>Go to second page</a>
</div><!– /content –>
</div><!– /footer –>
</div><!– /page –>
<div data-role=”page” id=”second” data-add-back-btn=”true” data-theme=”b”>
</div><!– /header –>
<p>Page content goes here.</p>
</div><!– /content –>
<div data-role=”footer” data-position=”fixed”>
</div><!– /footer –>
</div><!– /page –>
Lets have a brief look at Data Attributes used in this example:
data-role – Specifies the role of the element, like header, content, footer etc.
data-position – specifies whether the element should be fixed, in which case it will render at the top (for header) or bottom (for footer)
data-transition – specifies which transition to use when loading new pages, can be set to: slide, slideup, slidedown, pop, flip or fade
data-theme – specifies which design theme to use for elements within container, can be set to: a, b, c, d, e
Your first jQuery Mobile based webpage is ready.
Along with this simplicity jqm (jQuery Mobile) provide very rich-set of themes, apps & frameworks like phonegap (tool to wrap jQuery Mobile code for native app deployment), Codiqa (rapid jQuery Mobile app prototyping), Proto.io (drag and drop tool for building jQuery Mobile apps) etc. and third party extentions or plugins.]]>
Unless the online store is only a small component of your website you should go with an open-source e-commerce platform. We have worked with osCommerce, x-cart, zencart, ubercart and Magento. Overall Magento as a package is the arguably the best open-source free-to-use ecommerce platform available in the “market”. Why it is the best, will leave it for another article. Key advantages I see:
i. Out-of-the-box mobile website and mobile applications are available
ii. Beautiful (& fully customizable) themes available for all kind of verticals (electronics/books/flowers) are available.
iii. You get a feature rich back-end and admin dashboard. You name it and you will find it in Magento.
iv. You get number of options for custom functionality in terms of third party extensions and plug-ins.
v. It is built over a robust MVC based PHP framework – Zend
Some of the advantages mentioned above are applicable for osCommerce, zencart and x-cart as well. Having said this, Magento is not the fastest when it comes to performance and others platforms are also fairly capable, but overall Magento is a very nice package to start with.
When should I build an e-commerce application from scratch and not use a platform?
Almost never. Because it is a myth that one has to compromise on the quality or speed or customizability if he/she uses an existing platform to build the online store. Building a full-fledged online store from scratch is not a trivial task. An online store is not just a shopping cart module. These days, there are so many backend modules and front-end features in any “respectable” online store that it can take you months and maybe a year to build something that will come close to what a fully tested, feature rich and widely used e-commerce platform such as Magento can provide. Moreover, you will have to put in all the effort to make your store render perfectly on tablets and smart-phones. Why do that when somebody has already done that for you. An online store built over a popular platform requires much lesser maintenance as regular code updates are available in the form of new releases. To summarize the key advantages of using an e-commerce platform are:
• Much lesser go-to-market time
• Tried and tested
• Regular updates and addition of new features
• Mobile friendly sites get created without too much of additional work
• Much lesser investment. The cost saving can be used on marketing the site.
When you are getting into the online retail business you should focus more on core business tasks like building a strong base of suppliers, logistics, variety of items available in your store, explore cross selling opportunities, marketing and most importantly, delivery & customer support. While it is important to choose a scalable and flexible platform for future needs, planning too much into the future is not the best idea at the starting-up stage. If your online store is able to attract good numbers of customers who are doing actual transactions then it is more likely that you shall also be able to raise investment. At that point of time you can even go for a custom-built e-commerce site if you feel that it would not be possible to scale the existing site built on a platform such as Magento for the huge amount of traffic your site is expecting. Till the time you have validated your idea and business model you should stick to an out-of-the-box solution with some customizations as the case maybe.
Lets not solve for problems that don’t exist just yet.]]>
WordPress has had support for multiple websites for a long time in the form of WordPress MU. Starting WordPress 3.0, launched in June 2010. WP MU was integrated with WordPress. This means, that a single installation of WordPress can be used to manage multiple websites. It can allow users to start their own blogs within the site, each with its own theme, plugins and set of permissions.
While earlier only Post and Page were the supported content types, the newly launched Custom Content Type Manager plugin gives you all the freedom relating to content types, and is a serious answer to Drupal’s all powerful CCK. With an option to create custom content types, WordPress can finally shed of the tag of being a primarily blogging platform.
Another feature that it has recently borrowed from rivals Drupal and Joomla is custom taxonomies. Taxonomies allow better arrangement of content and better interlinking of various posts. They are similar to the pre-existing tags and categories, only more powerful as they are totally custom and give the user much more control over what he wants to see and how. For example, in a car listing, you may have a field for Seating Capacity. Using taxonomies, you can connect different cars on the basis of their seating capacities.
What makes it a complete CMS are its e-commerce plugins. Although they are not as mature and feature rich as the popular ones in Drupal and Joomla, they do their job pretty well. Plugins like WooCommerce, Cart66 and Shopp are worth mentioning. All of them have multi-site support provide all kinds of features like product configuration, shipping details and tax options.
Although most of the features provided by WP are available in other CMSs too, there are quite a few things that set it apart. Compared to other popular options like Drupal and Joomla, WP has a relatively smaller disk footprint. Setting up WordPress is very easy and takes less than 5 minutes. Its administrative panel is very intuitive and anybody can start using it easily, even if it’s their first time. In newer versions, the admin panel comes with help tips, which further ease out the usage. Among all the CMSs, WordPress has the largest developer community which is constantly working toward delivering a better solution. These things make WordPress the CMS of the future.]]>
The key to build good rich internet applications (RIAs) is zero lag connectivity to the server and the ability to get realtime data from server as and when needed. The request and response architecture of the HTTP protocol prevents the web applications running on browsers to achieve that same degree of user experience that native desktop applications enjoy. In an ideal condition the server should be able to push data to client through a persistent connection. To address the connectivity issue of web apps a good number of techniques were employed like the Comet model which involves using long polling (asynchronous polling) and quite a few browser plugins like java applets, flash and silverlight.
What is a Websocket ?
Websocket is an exciting new feature in HTML5 which allows bi-directional (duplex) communication over a single TCP socket connection. In simple words the web application client can maintain an always open connection with the server and data can be sent and received at the same time. Exciting isn’t it !
It runs via port 80/443 (will work even if the user is behind a firewall or using a proxy), the tcp handshakes are HTTP compatible and it also integrates with cookie based authentication. The message headers have been kept small (only 2 bytes overhead per frame) and latency from establishing new connection every time as in HTTP have been dealt with by using a single persistent connection. All these result in impressive network throughput. Apart from that Websockets API is much simpler to code than the XmlHttpRequest(). Bottomline, you can make the process of web application development more responsive and interactive with lesser effort.
Sounds cool! How to make this work?
You have to get the Websocket server working first. There are a various websocket server implementation available:
mod_pywebsocket (Apache extension)
Socket IO-node (node.js)
They will work alongside the http web server. Grab any of these and fire them up. You might have to set the listening port in the configuration and you will have your server ready.
Currently all browsers do not support the Websockets API. List of browsers that support them are:
For other browsers it’s not so clear but support will come as major browsers are already in line.
Overall things appear exciting as web applications will become realtime and allow better resource utilization allowing developers to build interactive and responsive applications.
The new storage api is designed for two basic purposes – session storage and local storage.
Session Storage enables carrying out multiple transactions in different windows at the same time, in effect giving each window its own data store for current session.
While it sure is very helpful, the one that we find more interesting is local storage api.
Storing data on the client has been a challenge for Web developers for ages and HTTP Cookies have been the only way to accomplish that. Cookies do not handle this case well, because they are transmitted with every request – which is a performance hit if there is more and more data. Web Storage brings us the freedom to do this with local storage api.
Apart from uses like personalization or tracking user behavior, a much more significant one is caching data from your servers, on the client’s local machine. This allows you to avoid waiting for potentially slow calls back to your servers and minimizes the amount of data needed from your servers. It is often inefficient, insecure, or inappropriate to store that data on a server and this may amount to megabytes of user data, such as entire user-authored documents or a user’s mailbox.
The recommended storage space for each site is 5MB. This is way more than the 4KB space available via cookies. Stored data is accessible from multiple windows and lasts beyond current session and each site has its own separate storage area.
Another important aspect is the ease of use of the API. The Storage API is a classic name/value pair data structure. It has simple methods like getItem(name), setItem(name, value) and remove(name). For iterating over all of the name/value pairs, one can use the length property which gives you the total number of name/values pairs being stored, or go along with a key(index) method which returns a name from an array of all names used in storage.
It is already supported in the latest versions of all major browsers: Microsoft®, Internet Explorer®, Mozilla Firefox, Opera, Apple Safari, and Google Chrome. Even more importantly for mobile developers, it is supported in WebKit-based browsers like those found in the iPhone and phones using Android (version 2.0 or later) phones as well as other mobile browsers like Mozilla’s Fennec.
We, as developers, suddenly have a huge amount of storage space on the client. For mobile developers, it’s even more exciting as it really opens up the local caching of data. In addition to dramatic improvement of the performance of your application, local caching is key to enabling another new exciting capability of mobile Web applications – going offline.]]>
1. Google Secure Data Connector – The SDC enables the deployment of Google Apps applications that user resources deployed inside an IT departments firewall. The idea is simple, even when a company is using Google Apps to host their email, documents, calendars etc., there might still be digital resources within the corporate firewall that users might need. A very simple example might be a telephone directory of clients, stored on a computer within the corporate firewall. Using the SDC, a Google Gadget can be created that can allow users access to this telephone directory from inside their email or google docs interfaces. Not only that, permissions regarding which user can access which resources can be defined using SDC, so an IT department can strictly control access privileges.
SDC is only available for Premier Edition or Education Edition Google Apps accounts.
2. Provisioning API – The provisioning API provides functions for creating, retrieving, updating and deleting user accounts, nicknames, and groups. Essentially, it can enable creation of custom admin panels for administrating Google Apps accounts for their admins.
Provisioning API is also available only for Premier Edition or Education Edition Google Apps accounts.
3. SML Single Sign On service – Security Assertion Markup Language (SAML) is an XML standard that allows secure web domains to exchange user authentication and authorization data. Using SAML, an online service provider can contact a separate online identity provider to authenticate users who are trying to access secure content. Essentially, this allows Google to ‘off-load’ the job of authenticating the user on another provider, whose primary responsibility might be to be a single window authentication service for all digital resources and facilities of a company. Very intelligent, and very useful.
From Google’s documentation on this service: ” Using the SAML model, Google acts as the service providerand provides services such as Gmail and Start Pages. Google partners act as identity providers and control usernames, passwords and other information used to identify, authenticate and authorize users for web applications that Google hosts. There are a number of existing open source and commercial identity provider solutions that can help you implement SSO with Google Apps.”
4. Email Migration API – Targeted at users who had earlier been using some other email service or provider, and would now like migrate to Gmail for their company. How it works is simple, a domain admin or user can send POST web requests to Google to enter data into their email accounts. There are also a wide variety of applications now available from Google to migrate email to Gmail from popular email software like Microsoft Outlook.
Again, Email Migration API is only available for Premier Edition and Education Edition Google Apps accounts, and can not be used to migrate Standard Edition email or gmail accounts.
We at Mobicules, being long time Google Apps users, have been playing around these API for some time build some internal tools. Get in touch if you think we can do something for you to make Google Apps work better and do more for you]]>
How does one convert an existing website to a Social Container? Thats an important question to ask, and as it turns out, its not really too difficult. But before we get into that, it is important to understand a few things about the Google development platform in general.
Google has had, since long before OpenSocial, a widget platform that supports widgets called Google Gadgets. Google Gadgets API enables hosting of widgets on the iGoogle page, and provides APIs to access data from various Google Services like Google Maps. What OpenSocial does is, it extends the list of APIs to introduce APIs that make social data from a social container available to a social application.
Due to the reasons above, Implementing an OpenSocial Container broadly requires implementing the following two components:
2. SocialData Server providing the RESTful APIs for servicing the requests from OpenSocial Gadgets (Social Applications) – The SocialData server would connect with the website’s server at the back-end, and provide implementations of the RESful APIs to be used by the Social Applications.
As it turns out, doing the above is not excruciatingly complicated really. Shindig comes to your rescue here. Shindig is an open-source implementation of the Gadgets Server and the OpenSocial API. Once you have Shindig running on your server and plug with your website, your website will be able to host Google Gadgets, and service OpenSocial API calls. You’ll have to plug in the implementation of the APIs with your websites’s back-end database to enable the APIs to access the data.
So there! Make your website an OpenSocial applications host, and engage your users with new and interesting functionality.]]>