Scribd
Upload
50 views

v2 Portfolio

This document describes an e-learning website portfolio created by Deeran Kumar. The portfolio includes designs for a login page, homepage, photo album, topics pages on ICT subjects, and forms for feedback and contact. Each topic page provides a summary and links to related videos and PDF notes. Navigation is via dropdown menus. The photo album includes embedded photos from another site. Feedback and contact pages allow users to evaluate the site and learn more about its developer. The site aims to provide an effective online learning experience for students.

Uploaded by

api-297002593
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
50 views

v2 Portfolio

This document describes an e-learning website portfolio created by Deeran Kumar. The portfolio includes designs for a login page, homepage, photo album, topics pages on ICT subjects, and forms for feedback and contact. Each topic page provides a summary and links to related videos and PDF notes. Navigation is via dropdown menus. The photo album includes embedded photos from another site. Feedback and contact pages allow users to evaluate the site and learn more about its developer. The site aims to provide an effective online learning experience for students.

Uploaded by

api-297002593
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

My

Portfolio
Contents:
Login Page design
JavaScript Message (with
verification)
Homepage design
Photo Album Design
ICT Topics Design
Feedback Form Design
Contact Us Design

By: Deeran Kumar

View of An E-learning website

Figure 1 Interface of the login page


This is the index page, meaning that this is the first page of what student will see.
Students are required to login with a given username and password, after logging in, This
is what they will see if a login is successful, they will see a JavaScript message. (see
figure 1)

Figure 2 Successful login JavaScript message


If a login is not successful, they will see another type of JavaScript message (see figure 2)

Figure 3 Unsuccessful login JavaScript message


When the login is successful, it will redirect into this homepage. Once they are into the
homepage, they can start browsing it. (see figure 3)

Figure 4 Homepage after login


After logging in, a JavaScript message shown on the homepage will remind users that
before logging out, they have to fill-out a Feedback form.
Once, the user clicks Ok on the message, they will see this homepage (see below)

Figure 5 Homepage

PHOTO ALBUM

Figure 6 Photo Album page


In the photo album, there is an embedded object created by Bravenet website.

In the embedded object, students can see the photos of the competitions which was held
in 2013 and 2014 respectively (see figure 7)

Figure 7 Selection of Photo Album

ICT TOPICS

Figure 8 Drop-down menu

When the user moves his or her cursor to navigation menu, to ICT Topic, a drop-down
menu will appear. He or she is requested to select which topic they want to browse. If the
user selects Topic 1, this will appear (see figure 9)

Figure 9 Selection of Topic 1

In Topic 1, the topic is about Information Processing, so this is what it will talk about. At
the end of summary, there are 2 hyperlinks, one is the video and one is the notes (see
figure below) if they want to understand more.

Figure 10 Selection of hyperlinks


If they click VIDEO, they will be redirected into this page (see figure 11)

Figure 11 Selection of VIDEO

If they click NOTES, they will be redirected into this page (see figure 12)

In the Notes section, user can choose any of the PDF notes above, and then after
choosing, they will be redirected into this page (see figure 13)

Figure 13 Selection of NOTES

Figure 14 Selection of Topic 2


In Topic 2, the topic is about Microsoft Office, so this is what it will talk about. At the
end of summary, there are 2 hyperlinks, one is the video and one is the notes (see figure
14) if they want to understand more.

Figure 49 Selection of hyperlinks

If they click VIDEO, they will be redirected into this page (see figure 15)

Figure 15 Selection of Video


If they click NOTES, they will be redirected into this page (see figure 16)

Figure 16 Selection of Notes

In the Notes section, user can choose any of the PDF notes above, and then after
choosing, they will be redirected into this page (see figure 17)

Figure 17 Redirect into PDF Notes

Figure 18 Selection of Topic3

In Topic 3, the topic is about Hardware and Software, so this is what it will talk about. At
the end of summary, there are 2 hyperlinks, one is the video and one is the notes (see
figure below) if they want to understand more.

Figure 19 Selection of hyperlink


If they click VIDEO, they will be redirected into this page (see figure below)

Figure 20 Selection of Video

If they click NOTES, they will be redirected into this page (see figure below)

Figure 21 Selection of Notes

In the Notes section, user can choose any of the PDF notes above, and then after
choosing, they will be redirected into this page (see figure below)

Figure 22 Redirect into PDF Notes

Figure 23 Selection of Topic 4


In Topic 4, the topic is about HTML concepts, so this is what it will talk about. At the
end of summary, there are 3 hyperlinks, one is the video, advice and one is the notes (see
figure below) if they want to understand more.

Figure 24 Selection of hyperlink

If they click VIDEO, they will be redirected into this page (see figure below)

Figure 25 Selection of Video


If they click NOTES, they will be redirected into this page (see figure below)

Figure 26 Selection of Notes

In the Notes section, user can choose any of the PDF notes above, and then after
choosing, they will be redirected into this page (see figure below)

Figure 27 Redirect into PDF Notes

Figure 28 Selection of Topic 5

In Topic 5, the topic is about Networking, so this is what it will talk about. At the end of
summary, there are 2 hyperlinks, one is the video and one is the notes (see figure below)
if they want to understand more.

Figure 29 Selection of hyperlinks


they click VIDEO, they will be redirected into this page (see figure below)

Figure 30 Selection of VIDEO

If they click NOTES, they will be redirected into this page (see figure below)

Figure 31 Selection of NOTES


In the Notes section, user can choose any of the PDF notes above, and then after
choosing, they will be redirected into this page (see figure below)

Figure 32 Redirect into PDF Notes

Figure 33 Selection of Topic 6

In Topic 6, the topic is about Practical Computing Concepts, which will mainly talk about
Flash Animation. In the summary, there will be 3 samples of vector animations. Which
will give user the concept of flash animation. At the end of the summary, there is one
hyperlink called Notes. If they want to know about this topic

Figure 34 Selection of hyperlinks


If they click NOTES, they will be redirected into this page (see figure
below)

Figure 35 Selection of NOTES

In the Notes section, user can choose any of the PDF notes above, and then after
choosing, they will be redirected into this page (see figure below)

Figure 36 Redirect into PDF Notes

FEEDBACK FORM

Figure 37 Feedback Form Page


The form is for user to fill out and submit once, they have browse and understood all the
topics and give their opinion on this website whether it is an effective website for them or
not.
After filling the form, user are required to click the SUBMIT button
form will be sent to my e-mail address

which the

CONTACT US

Figure 38 Contact Us page


This page is for students, if they are curious on who is the web and curriculum developer
by seeing the information on the poster.
At the end of the Contact Us page, there will be a scrolling text to give our thankful
message (see figure below)

Figure 39 Scrolling Text Message

You might also like