Introduction: Developing Web Widget With HTML, CSS, JSON and AJAX

This book provides an introduction to developing web widgets. It explains the architecture and technology behind widgets, how to design effective widgets, and how to create basic widgets using HTML, CSS, and JavaScript. The book then demonstrates how to develop more advanced widgets using JSON, AJAX, customization, security practices, and optimization for performance. Later chapters cover creating widgets using RSS feeds, proxy servers, Facebook APIs, and developing a business model for widgets. Special features include code examples and a supporting website for readers.

Uploaded by

rajeshlal

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

40K views

Introduction: Developing Web Widget With HTML, CSS, JSON and AJAX

Uploaded by

rajeshlal

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 9

Introduction

This is an era of Web Widget. The mini-web parts that; you can
easily put in a web page, blog, or social profile to create a rich
online presence. It’s a whole new way to take the advantage of
online data, web services and web APIs. Your page can show the
song you are playing, slideshows from online Flickr account,
and list of favorite videos from YouTube. In the corner, you can
display online buddies, new emails, and the web parts with a
common theme of your choice making your online life so much
easy, interactive and so much fun. All of this is possible due to
multiple customizable Web Widget giving a unified experience.
The best part is you don’t have to be a rocket scientist use
them, just copy and paste a chunk of html code from the widget
provider website to your social profile page, and welcome to
Web 2.0 !

What’s in the Book

This book starts with a brief background on web widget, and
then gives a broad and clear view of the architecture and core
technology behind the Widget development. Design guidelines
and standard practices are important part of this book and
they go side by side with almost all the chapters that deal with
Widget development.Once you’ve read on the concept and scope
of Widget development, the book starts with a simple Hello
World Widget using HTML, CSS and JavaScript. During this
process you know the basic bare bones of the Widget, and which
prepares you for a more advanced widget, Rating Widget which
uses JSON and AJAX to display and update data to a back end
server. On the way we also see the design constraints, and detail
some standard practices applicable to Widget development. The
last section deals with more advanced Widget using RSS feed,
Cross Domain Proxy Server, and Google Ajax Feed APIs, We
also develop widget using Facebook APIs and Facebook UI
Framework.
2 Introduction

Section 1: Introducing Web Widget

The five chapters in this first section give a thorough back-ground of Web Widget. The section
explains the different layers of the widget, the architecture, and the technology behind the widget
development. The Designing an Effective Widget chapter helps you know the difference between
a merely good-looking Widget and a one that is professional, rich, and worth the space it takes up
on the user’s web page. The last chapter in first section walks you through a Hello World Widget
development process.

Section 2: Developing Widget for Prime Time

This section take you to an advanced Widget development. You learn to develop a real live widget.
It details the creation of a Rating Widget (now a popular Rating service http://addrating.com),
which displays data in the form of JSON data coming from an SQL Server and update the data
using AJAX technology. This next chapter than deals with best practices with the user interface,
customization and layout requirements as it is applied to the Rating Widget.

The later chapters details you the security aspect of the Widget development process and provide
tips to ensure security of Widget at both client and server side. The last chapter in section two takes
the Rating Widget and optmize it for performance, you will learn how bootstrap methodology can
be used to develop a Widget which loadsafter the page is loaded and is fully scalable.

Section 3: Advanced Samples

This section deal with advanced samples. You will learn to create a Widget using RSS feed. You
learn to develop this using different technologies. You will develop first Widget using XML as
data source in the same server, and then take a Proxy Server approach for a cross domain access.
You also learn to create a Widget using Google Ajax Feed APIs. All the samples follow standard
patterns, making it easier to switch between the features and functionality you want, when you
want. You will also learn how to use a Facebook APIs to create a Web Widget. The final chapter
shows you how you can create a Widget which can be integrated inside Facebook.

Appendix: Widget Business Model

The last section of the book deals with Web Widget Business Model, what you need to know to sell
your widget and learn how Widgets are changing the trend of internet marketing.
Developing Web Widget with HTML, CSS, JSON and AJAX 3

Special Features and Notations

This book is meant to be a definite, precise, and concrete guide for widget development.By pruning
redundant information and filtering and highlighting the information that is more crucial, we have
tried to make it as comprehensive as possible. This book includes various features and conventions
that help you get the most out of the book. HTML, CSS, and JavaScript code blocks will be shown
as follows:
<HTML>Code in HTML, CSS, and JavaScript</HTML>

Sample single code lines will look like this:

var data = abc;

Comments will also show up in the code with two backslashes.

// comment one //

Supporting Website(s)
The Rating Widget developed through chapter 5 to chapter 8 is now a popular web widget service,
check it live at http://addrating.com.

The book also has a supporting website where you can download all the codes and working widget.
The website has blogs I have written on Widget and Gadget in general and some of my personal
views on Widget development. You will also find errata and most updated information there. You
are invited to check that site and feel free to contact me personally at connectrajesh@hotmail.com.