Monday, November 25, 2013

Problem Based Learning : Web Prototyping



First situation


Question 1: What is prototyping?

Web prototyping or called rapid is the process by which a web-based model of the end product is constructed for the purpose of outlining how a website or web application will look and behave. In the world of web prototypes the process of developing a prototype might be more important than the end product. The web prototype, whether it’s on a whiteboard, paper and online is a test site that will include some content, all primary navigation and possibly images and key functional elements.

***************************************************************************
Question  2:Why do wee need to prototype?

wee need to prototype because it is a sketch or first step before develop web design. This can be difficult if the web developer not sketch prototype and may be some function will miss to put inside the web. Although it can be useful to start testing your sketched designs with real users at this point we don’t recommend it. In the 200+ projects we have done using prototyping we have found it’s faster to get a more coherent design together before starting the testing.


****************************************************************************

Question 3:What are the advantages and disadvantages of using low-fidelity prototype and high fidelity prototype?



Low -Fidelity
Advantages

Lower Development cost.
Evaluate multiple design concepts.
Useful communication device.
Proof –of-concept

Disadvantages:

Limited error checking.
Poor detailed specification to code to.
Facilitator-driven.
Navigational and flow limitation


High fidelity

Advantage

Complete functionalit
Fully Interactive
Cleary defines navigational scheme
Look and feel of final product.

Disadvantages:

More expensive to develop
Time –consuming to create
Inefficient for proof concept design
***********************************************************************
Question 4:Explains different type of prototyping?


Basic Prototyping – This is generally a home built effort. It isn’t pretty and it’s often made from things lying around the house, but it will prove the theory and it is the first step in making the distinction between Innovation and Inventing. For most of us this involves breaking the problem down to its basic functions and assembling parts that replicate those many functions into a new form.
I often walk the aisles of a retail store with a mental list of the functions I am trying to replicate and purchase items that have those parts. Then I retreat to my shop where I dismantle the items from the store and re-purpose those parts from my list. Remember, it doesn’t have to be pretty, it has to work.


Advanced Prototyping – Normally a little better looking than a basic prototyping effort, an advanced prototype is generally done with the help of a professional trade. That is, you have taken your basic prototype to a machine shop, or a plastics shop and had parts of it made professionally to assemble back in the garage. You sometimes hear this referred to as a “Looks Like – Works Like” model.


Manufacturing Prototype – This is where it gets a little more complicated. A manufacturing prototype is one that is exactly like the final manufactured product. That is, it’s the exact shape, size and function of the final product. What sets this apart from other prototyping is that it can be used to create the machine tooling actually used in the manufacturing process.
In the old days this was it – you created a manufacturing prototype and you sent it out to a company who then took it apart and made

all the tooling from it. That still happens today, but as technology advances the process has changed a bit and it’s not done that way as often as it used to be.


Virtual Prototyping – Created in a computer, this relatively new form of prototyping represents both good and bad to the inventor. At its most primitive, this form of prototyping is a 3D file that can be used to output data to a tool making machine.
Great for a simple part, but as your invention gets more complicated you will need to work in more complicated programs. These programs will allow you to do things like motion studies, flow dynamics, and in essence digitally create a manufacturing prototype.
**************************************************************************
Question 5:What are differences between prototyping and wireframe?

Wireframe is a low fidelity representation of a design.

Characteristics of wireframes:

wireframe should cleary show:
1)The main group of content
2)The structure of information
3)A description and basic visualisation of the user interface interaction.

A prototype is middle of high fidelity representation of the high  fidelity representation
of the final product,which simulates user interface of interaction.

Characteristics of prototype:

Prototype should allow the user to:
-experience content and interactions with the interface
-test the main interactions in away similar to the final product

Second situation:

The step one that should be start with make wire frame.A wire frame  is a low fidelity representation of a design  before implementation are made.The wireframe  contains some elements to insert the web page and the user need to think about the platform which want to use in programming in html or J2EE.

Design the website are important before we make some website.After that, we should create a prototype to show the flow of web site.Many prototype we can use such as application software ,paper and other method to create a prototype.




























Lab 3

<html>
<head><h1><b>Pasific Trais Resort</b></h1></head>

<a href="google.com"> Home </a> <a href="google.com"> Yurts </a> <a href="google.com"> Activities </a>
<a href="google.com">Reservation </a>

<h1>Enjoy Nature in Luxury</h1>

<p>Pasific Trails Resort offers a special lodging experience on the California<b>
North Coast. Relax in serenity with panoramic views of the Pasific Ocean.
<br><br>
<ul>
<li>Private yurts with decks overlooking the ocean</li><br>
<li>Activities lodge with fireplace and gift shop</li><br>
<li>Nightly fine dining at the Overlook Cafe</li><br>
<li>Heated outdoor pool and whirlpool</li><br>
<li>Guided hiking tours of the redwoods</li><br><br>
Pasific Trails Resort<br>
12010 Pasific Trails Road<br>
Zephyr, CA 95555<br>
<br>
888-555-5555<br><br>
<i>Copyright c 2014 Pasific Trails Resort<br>
Caelotta eaton <a href="google.com">ceaton@nr.edu </a></p>

</html>

Monday, October 7, 2013

Lab 2

1.
Source code html
<html>
<head>
<title>Name</title>
</head>
<body>
<h1>AMIRUL HAKMAL BIN JALIL</h1>
<h1>MOHAMAD REDZUAN BIN MD NAYAN</h1>
</body>
</html>

Output:



Q2
Source code html

<html>
<head>
<title>Week</title>
</head>
<body>
<ul>
<li>Monday</li>
<li>Tuesday</li>
<li>Wednesday</li>
<li>Thursday</li>
<li>Friday</li>
<li>Saturday</li>
<li>Sunday</li>
</ul>
</body>
</html>

Output:


Q3

Source code html

<html>
<head>
<title>Week</title>
</head>
<body>
<ol>
<li>SPRING</li>
<li>SUMMER</li>
<li>FALL</li>
<Li>WINTER</li>

</ol>
</body>
</html>

Output:


Q4

Source code html

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Quotes </title>
</head>
<body>
<h1>Andre Maurois</h1>

<br /><br />
<p>
Without a family, man, alone in the world, trembles with the cold.
</p>
</body>
</html>

Output:



lab2 (b)

web are appealing





This  website is appealing because following 3 reason below as:
1)The content are interesting information 
2)The information of website are to-date
3)The arrangement of content good and best.




Web are not appealing 





This website are not appealing because of the following below:
1)The content of website are not arrangement very well.
2)The information are update montlhly
3)Content of website information are not fully of articles.

The website must arrangement very well and also background of that very website are not compatible .
The content of website must be update information.Beside that,graphic such as video also good using for that website.

The website of amanz.my  are good to reading anything of related information abaout IT.Beside that.majalah pc .org will be vising but less information it publish of website.

Based research from 10 usability heuristics we are making conclusion as following:
From amanz.org,we will see the website are following a variety 10 usability heuristics for user interface design.This website is also always inform about what is going on through appropriate feedback within reasonable time.Besides that,this website are following help and documentation than another website such as 
majalahpc.karangkraf.com/.The "majalah pc" is not to date and the information are not fully information,prevent user from to reading and user must be pay a book to explore all information in the website.






Tuesday, September 24, 2013



Question

a.  What is the purpose of the site?

b.  Who is the intended audience?
c .Do you think that the site reac hes its intended audience? Why or why not?
d.  Is the site useful to you ? Why or why not ?
e.  List one interesting fact or issue that this site addresses.
f.  Would you encourage others to visit the site ?
g.  How could this site be improved ?

Jawapan:

  http://www.kelabitc.blogspot.com merupakan website kelab didalam Fakulti Sains Komputer & Teknologi Maklumat (FSKTM) yang mana bertujuan untuk mempromosikan aktiviti-aktiviti yang membolehkan meningkatkan kemahiran insaniah, pakaian fakulti dan sebarang informasi fakulti disamping menjadi medium rujukan untuk mahasiswa-mahasiswa FSKTM dalam mengetahui info-info terbaru.Kelab ini adalah khususnya pelajar  yang belajar di Universiti Tun Hussein Onn  Malaysia  sendiri yang berminat dan mengikuti segala aktiviti yang dianjurkan kelab ITC.Laman web ini  berguna kerana pelajar dapat melihat segala perkembangan program yang dijalankan dan melibatkan program yang dirancang mahupun diadakan di Universiti ini. Laman Web ini sangat berguna kepada pelajar  kerana mengetahui yang dianjurkan oleh kelab tersebut.Program yang berjaya setakat yang diadakan adalah Kursus pembangunan Web(PHP dan MYSQl) dan Majlis Makan Malam  Pelajar tahun Akhir serta "CODE HUNT".Marilah melawat laman web ini kerana terdapat info yang perlu diketahui  seluruh pelajar di UTHM .Laman Web ini perlulah ditambahbaikan dengan memaparkan info -info yang berkaitan dengan kerjaya komputer dan industri yang berhubung kait dengan khusus yang di adakan di Fakulti.