Web Development Portfolio: Interactive Robo Expo Site

Desklib offers solved assignments and past papers to help students succeed.

PORTFOLIO_2

Table of Contents
Portfolio 2.1.....................................................................................................................................2
Portfolio 2.2.....................................................................................................................................2
Colour theme...............................................................................................................................5
Portfolio 2.3.....................................................................................................................................6
Flowchart.....................................................................................................................................6
Portfolio 2.5.....................................................................................................................................7
Portfolio 2.6.....................................................................................................................................8
Testing in Google Chrome...........................................................................................................8
Testing with Microsoft edge........................................................................................................9
User recommendations..............................................................................................................10
User 1:....................................................................................................................................10
User 2:....................................................................................................................................10
User 3:....................................................................................................................................10
User recommendations analysis................................................................................................10

List of Figures
Figure 1: Navigation Bar.................................................................................................................5
Figure 2: Exhibition hall..................................................................................................................5
Figure 3: Footer image.....................................................................................................................6
Figure 4: Content image..................................................................................................................6
Figure 5: Header image...................................................................................................................7
Figure 6: Content image..................................................................................................................7
Figure 7: Flow chart.........................................................................................................................8
Figure 8: Home page.......................................................................................................................9
Figure 9: Domestic robot page........................................................................................................9
Figure 10: Education page...............................................................................................................9
Figure 11: Military Robots..............................................................................................................9
Figure 12: Home page...................................................................................................................12
Figure 13: Contact Us....................................................................................................................12

Portfolio 2.1
This is a mockup for our home page named as
index.html. This wireframe shows positions of all
the buttons, banners, images and text on this
page.
This is a mockup for our contactus page named
as contactus.html. This wireframe shows
positions of all the buttons, banners, images, text
and text fields on this page.
This is a mockup for our aboutus named as
aboutus.html. This wireframe shows positions of
all the buttons, banners, images, footer image and
text on this page.
The rest os the pages will be of same pattern
because inroder to create a good and efficient
website we must have a consistent theme.

Portfolio 2.2
Figure 1: Navigation Bar
Figure 1 will be our websites navigation bar in which we will see all options for each page in out
website. All these buttons will give access to the said page. On the left-hand side of the page we
will have our logo which will be shown on each page and so is the navigation bar.
Figure 2: Exhibition hall
This is the image of our Exhibition hall in which we can all the locations and information
regarding the Robo Expo exhibition.

Figure 3: Footer image
This is the footer image of our website. To keep the theme of robotics throughout the website,
we have used this image at footer of every page.
Figure 4: Content image
This image is presented as a content image with respect to some text. We have used various
images throughout the website in order to connect the information with the theme.

Figure 5: Header image
This image is the header image, all the titles and navigation bar will be shown with this image in
the background.
Figure 6: Content image
This image is presented as a content image with respect to some text. We have used various
images throughout the website in order to connect the information with the theme.
Colour theme
Throughout the website we have a common theme and colour combination. We have maintained
grey colour with some white and blue hint so that we can connect the robotic theme with the
information provided.

Portfolio 2.3
The above-mentioned picture is the navigation bar, we can access all the pages from any page of
the website.
Flowchart
Figure 7: Flow chart
As we can through flowchart, every page is connected to every page, which means no matter on
which page are you on, you can go to any page you want.

Portfolio 2.4
Figure 8: Home page
Figure 9: Domestic robot page
Q Figure 10: Education page
Figure 11: Military Robots

Portfolio 2.5

Portfolio 2.6
Testing in Google Chrome
Figure 12: Home page
Figure 13: Contact Us

The above are examples of running the websites in the google chrome browser. As we can see all
the pages are running perfectly and we can navigate through each page very smoothly.
Testing with Microsoft edge
We can see that all the pages are running smoothly and completely in Microsoft Edge web
browser. All the navigations and button are working perfectly fine.