Since I was stuck on two jQuery modules, I have read the jQuery documentation and tried to search solution on the Internet. But it is still stuck on this problem.

Put this problem aside, so far, I developed three widgets which are Facebook, Twitter and Calendar.

This week, I will finish all developments of widgets. Then I will solve the conflict of jQuery, maybe I will use a different method to achieve the sortable and draggable functionality.


This week, I had been developing the main interface of the website. The HTML and CSS parts progressed well, but today, I met a problem about jQuery.

In my plan, I would use two jQuery APIs from jQuery core library to implement the draggable  functionality and add widgets  functionality, which are “draggable” and “sortable” modules. I thought this will make is quite simple to add the drag-and-drop functionality which I want. But now, I found these two modules conflict with each other. When I finished the settings of  these two jQuery APIs with JavaScript, only the add widgets  functionality was effective. The draggable functionality didn’t have the designed desired effect. It means, the widgets can not be sorted into three columns.

I am going to solve this problem in the rest days of this week. Maybe  set or change some module options,such as position or z-index, can figure this conflict out.

Develop Widgets

When finished the development of the website layout, I will develop the widgets.

As I expect, six widgets will be developed at least. They are Facebook, Twitter, Calendar, News, Picture and Map.

Firstly, I will develop the widgets of Facebook and Twitter. Because they are easier to be developed. The Facebook  and Twitter development pages supply APIs to users. It’s easy  to  integrate the APIs into the webpage.

Secondly, I will develop the widgets of calendar and map. These APIs can be obtained from Google. Specifically the Google map API, because I develop this website with HTML5 and there is a new element of HTML5 – Geolocation API which is can get user’s current position. In my plan, I will use the new HTML5 element with Google map API to develop the map widget. I will introduce the  new element of HTML5 – Geolocation API when I develop the map widget.

At last, I will develop the picture widget.

Further Activities

In the following three weeks, I am going to develop my project further. There are two main The Layout will be done: integrating the banner and footer in the main interface, developing widgets. In my plan, when I finish these two project activities, the layout of the website would be like below figure:

 the layout of MyPortal

This layout contains three column, each column includes widgets. Each widget has a “handle” which the user can use to move the widget around.

In the aspect of developing the widgets, except some of widgets will be developed with API of Facebook, Twitter or Google to achieve the website’s functions, the new features of HTML 5 also will emerge from some widgets.

So, it would be the key period of the project.

Banner and Footer

Next week, I am going to design the main menu and the footer of the website.

The menu contains three functions: brief introduction, themes and widgets panel. Theme function controls the colour scheme of the website. When users click different button, the website would apply the corresponding theme. the widgets panel controls the widgets, by clicking each button, users can add, remove, lock and unlock website contents. These functions achieved by HTML 5 and CSS 3.

The footer contains these labels: MyPortal beta Version, About, Send us your feedback, Contact, Privacy Policy, Terms of service and Blog.

Brife summary up to now

So far, I achieved the main feature of the website, which is a customizable interface with widgets. In order to achieve this feature, I use UI APIs of JQuery library which are “sortable” and “draggable” modules. This will make it simple to add the drag-and-drop functionality.

In the part of the interface, I should further develop these following features:

  • Each widget can be collapsed, removed and edited.
  • The user will be able to edit the color and title of each widget.
  • Each widget can contain any amount of regular HTML content, text, images, etc.

By developing this whole website, I would like to demonstrate some of the new features of HTML5 and CSS3.

The Development Tools

To design a customizable startpage website, there are 3 main tools that I have to use. They are web design software like Aptana Studio or Classic FTP and Firebug which is an addon of Firefox.

Firstly, to design the website, I have to use some web design tools. Currently, Dreamweaver and Aptana Studio are commonly used by most web designers. Although Dreamweaver is easy to design a web page by using template and dragging elements of layout, it alway produces so much redundance and unnecessary code that effect the readability and semanteme of the program. If I want to reduce the redundance, I should type the code by hand. So I choose Aptana Studio 3 to develop the webpages. Aptana Studio 3 is an open source integrated development environment (IDE) for building web applications. It includes support for JavaScript, HTML and CSS with code-completion, outlining, JavaScript debugging, error and warning notification and integrated documentation. Additional plugins allow Aptana Studio to be extended to support JQuery library. When I design the website, I have to develop user interaction system, like login and logout system, upload data and store data, which require active page technique. In this aspect, I prefer JavaScript. Bucause it makes web application lite and clear.

Secondly, after the web page completed. I deploy FTP client to transfer the web application files to the domain server space which I set up before. The advantage of this is that I can check the result of the appearance synchronously and easy to manage the files of the web application. I will talk how to use FTP client to connect to my web server and transfer files later.

At last, Firebug is used to debug the website. Firebug is a type of addons of Firefox browser. It facilitates the debugging, editing and monitoring of any website’s CSS, HTML, JavaScript and so on. It easy to inspect HTML, nest elements and preview CSS image of website by using it. Here is a document introduces how to use Firebug detailedly which published by IBM.