I posted below the video about our final browser. Enjoy!
We would like to show you some screens of our project. So far we have a basic implementation of the main page of the web application which contains the sidebars menu, the top bar with “go back”, “go forward” and “refresh” buttons, the search engine with advanced search on the web (Google search api) and the “Sign Up”, “Sign in” and “About” links. We’ve also implemented a tab menu in which we would like the pages as “About”, search results, categories, saved link and widgets to appear.
For now, the main page looks like this:
Activating the “+” button to add new tab in the tab bar, a new empty tab will appear. Tabs have the sortable property, they can be switched between them and they look like this:
In the “About” tab is opened the page “About” by clicking the link from the top bar and looks like this:
The sidebars are opening on mouse over them action and disappear if the cursor lives the area.
The left side bar looks like this:
and the right sidebar looks like this:
On each them there will be icons of categories, links and widgets which are going to be opened in tabs.
Introducing words in the search bar, the results relative to the information searched are going to appear in the “Results” tab. The advanced search provides the options for searching pieces of information, images, videos and news relative to the introduced words.
A web search looks like this and the results are displayed similar with google results, with links relative to the search input. On the bottom of the results, there is a “more” button for displaying 8 more found results:
Searching for images looks like this:
Searching for videos looks like this:
And news search looks like this:
New steps in developing and designing the project are going to be fallowed by our team to deliver the best final solution.
Yesterday we had another meeting. We all presented what we’ve found out from our research. Also we choose what each of us will implement. For our newt meeting, which will happen next week, we should implement a part of the application. Anda will take care of the search bar and tabs, Roxana will use AJAX for all pop-ups, Doru will make the slidebar and I will make the register/login/settings pages.
Yesterday we had another meeting. We’ve disscused what programing language to use, what we know and what should we search for. We agreed to search for tabs and web search implementation, AJAX pop-ups, sliders and document on how the database should look like. On the next meeting we will start the actual implementation.
1. Q: How user will access the quick links?
O:button, pop-up-menu, list-box, combo box,accordion menu, sidebar
C: faster access and process, efficiency, mouse-interaction.
2. Q: How user will pick a certain page from his history?
O: from a ordered list of links or from a calendar
C: easy access
3. Q: Where categories and quick links will be located?
O: categories on the left and quick links on the right or vice versa
C: easy access
I post the solution wich we agreed with. We ilustrated it in a video presentation.
This storyboard can be heared on the video presentation.
Because there are different types of people with different interests, we choose to customize the application according to user profile.
The application requires sign up and sign in.
When the application first opens, you will see the page “about”. Here the application is described and we can also see a video presentation.
At the top,we have the logo of the application. Following, the forward and backwards buttons,and a search bar. In the top right we have links to register, sign in, and about page.When you sign in, the link will change the logout link and the register link will disappear.The oposite happens when user click sign up.
There is a tab with the possibility of adding new tabs, and the program description.
To begin with, we assume that you do not have an account, so we go on the link to register. There are some fields that must be completed and the submit button requires email confirmation. Once you clicked on the link received on email, you are redirected to your account information page.As you can see, you are automatically logged.
In the upper left of page, the register and sign in links dissapears and the username followed by logout link appears.
You are being asked your full name, gender, birth date, city, country, social status and domain activity. The save changes button appears and also a exit button if you don’t want to complete that fields for the moment. Domain activity is an important factor to decide wich category are selected by default. Gender is also important, because the theme-default changes according to the user choice.
Next comes the pop-up preferences where you can configure categories you want to be available. You can also select the desired language for interface. The default selected categories are favorites links and mail. Depending on the domain activity, another category will be selected by default.
Further options appear for quick links. By default are marked wheater and calendar. Next the options for theme appear. If the user has chosen the female gender, it will be selected the pink theme, and if chosen the male gender it will be selected the blue theme.
Any of these default options can be changed, if user wants other categories to be added in the menu.
Pressing the save button, the changes are saved and the user is redirected to the main page .
Quick links appear in the right side on a sidebar when you take your mouse over it. On the bottom is a button bar with the sign plus, allowing this button to add a new quick link.
Right Clicking on a quick link, a menu appears with options “edit and delete.
Categories appear in the left side on a sidebar when you take your mouse over it. On the bottom is a button bar with the sign plus, allowing this button to add a new category.
Right Clicking on a category, a menu appears with options “edit, delete, add links, add widgets. ” Pressing edit you can modify the category name or change icon, pressing delete you can erase category and pressing add link or widget you can intodruce a new link or a widget in the category you previously selected.
By clicking on a category, the widgets and links for that category appear in the main tab. For a more structured view they are divided by type.
move your mouse cursor over a link, and you will see a picture for the link, if the link was already visited once. Clicking on a link or widget, it will be opened in the same page.
Clicking the logout button you will be sent backs to the about page.