Rabu, 12 Juni 2013

Modern HTML 5 Book Application




Description

Documentation Update

  • Addiitonal FB App Id entry
    • The documentation fails to mention that you also need to add your FacebookApplication ID to the fbinitialization.js file. This info will be added in the next update. Thanks!

Do you want to know what the future of affiliate web apps look like? Well here you go. This HTML 5 book app is the app-in-a-box you need to please your users and make some money in the process.

About the Application

This application is mobile, slick, purely ajax-driven, and optimized for search engine indexing.

The application is a list-driven community book app. User’s can create book lists, comment on lists, view community lists, and more.

Revenue Opportunity

The application is tightly integrated with the Amazon products API (this is where book data comes from) as well as Amazon Associates. Users of the app have the ability to add books to their Amazon wishlist or follow a buy link to Amazon. Of course, you will get paid from Amazon whenever they buy any product after following a link from your application.

Dynamic Community Content

Not only is the entire application ajax-driven, it is also data-driven. Furthermore, everytime a user searches for books to add to their lists, the application captures the search term. In addition, any book that a user adds to her list automatically gets added to a global book list with a permanent, indexable url [see Indexing and SEO below]. Future updates will include a site map generator to automatically create xml sitemaps based off your user-created data.

Architecture and Maintenance

The application is pure HTML 5, CSS3 for styling, and javascript. The backend of the app is built on .net Web Pages 3 framework. .net Web Pages 3 framework is extremely lightweight and powerful, AND best of all you can manage your application with Webmatrix 3. Webmatrix is a cross platform web application tool for PHP, nodeJS, and of course .net. This application was professionally built, but I made sure that a novice can manage it using Webmatrix 3. Learn more about Webmatrix here:http://www.microsoft.com/web/webmatrix/

You can use any html editor to edit the application, but I highly recommend Webmatrix for the ease of use and powerful features.

The app uses jQuery on the front end and communicates purely via ajax to an app-hosted api (.net Web API)

Data Structure As mentioned earlier, all book data is grabbed from Amazon. However, the app also has an internal data structure. The app includes a file-based SQL Compact Edition 4.0 database for superb membership system. In addition, the app has a custom XML database that stores all of the necessary common data from the app.

Features

  • Modern, clean design
  • Completely AJAX driven
  • responsive
  • multiple themes [see demo]
  • Easy to customize themes
  • Facebook integration
  • Social logins[FB and Twitter] plus standard login
  • Ability to easily associate FB and Twitter logins
  • Built to make income
  • Thorough documentation

Indexing and SEO

The architecture of the application follows Google’s Recommendations for making modern ajax applications crawlable and indexable. You can learn more about Google’s recommendations here:https://developers.google.com/webmasters/ajax-crawling/docs/getting-started

In short, when a web crawler hits an important page in the app (such as a book description page, public list, etc.), the application will return a static html snapshot of the dynamic page.

Here’s an example url from the application:http://bookapp.azurewebsites.net/#!/itemDetail?product=B005620I2M

Note that this is a dynamic url, and is essentially the home page of the app with some querystring data applied.

To prove that this works with any web crawler, you can quickly go over to Facebook’s developer tool and plug that url in. You can see the snapshot exactly as the crawlers see it:

http://developers.facebook.com/tools/debug

I wanted to go into detail on the SEO and indexing point because without the proper configuration, pure ajax apps can’t be indexed. So, you can rest assured that you’ll be good to go.

Social Login on Mobile

screencast

Updates

Of course there are many updates planned and a lot more functionality to be added. Purchasing gives you access to lifetime updates. Make sure you follow my space to stay updated on this and other cool apps.


Category : Scripts, html5, miscellaneous | Rating: 5.0 out of 5.