• Wednesday May 16th 2012
• Do you want fries with that project?

Skip to Content

skinyourweb

The skin your web project

Today customizing the way you see things have become popular,
we see more and more items that comes with an option to change there appearance.
In the other hand, the internet which is the world biggest information platform doesn’t allow the simply user,
who doesn't have any knowledge in web programming to change the way the information is viewed.
The project goal is to allow the end-user to change the way he sees web pages,
without any knowledge in internet programming.

There are a lot of web browsers being used,
and there is no standard programming language to address them all.
We will focus on the firefox1 browser, which is an open source browser built by the mozilla foundation.
Browser toolbar is an extra toolbar placed in the browser upper area,
and can hold buttons and other elements that can add functionality to the browser,
we will build a toolbar that will allow the user to build and apply different patterns on a web page elements.

Each web page is built from a lot of small items, called elements.
For example a link in a web page will be an "A" element (a href="http://sample.com")
Each element have a list of properties that stores different behaviors values,
which effect the way the element shows on the screen.
We will focus on the "style"3 element which have inner properties.

We will define a basic pattern to be a collection of "style" properties like background and foreground colors,
font size and font family.

Behind the toolbar buttons there is scriptable code in the JavaScript language,
which can interact with the web page elements.

The project was inspired by the "web2" technolagies that allows a-synchronic communications between web components.
We design the toolbar to be a part of a social networking that allows its users to create and share patterns with each others,
and by that create skinnable versions to all the major web pages.

We will user an SQL Database (MySql).
This Database is actually a file, with the platform that allows us to insert or delete data from it easily.
The data stored in the database are divided in subsections called tables,
we will divide our data into 3 tables: users table, patterns table, and user-data table.

At browser startup our extension connects to the database,
retrieves available patterns and stores the patterns in the computer memory.

When the user connects our database, all his user-data is being sent from the database,
and stored in the memory,
now we try to match between the current page address to one of the lines in the user-data table,
if we find a match we will automatically apply the pattern into the desired element.

Later, we will describe the ways to find an element in a webpage ,
and the way we apply the style to the matching element.