We get task about Prototype. This we state about prototype. Read and enjoy...

First situation

What is web prototyping?

o   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.

o   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.

      Why do we need to prototype?

o   You can include photos of your prototype in your inventor's logbook.

o   A prototype helps you figure out any design flaws your invention has and if it really works.

o   It can help you make sure your invention is the right size, shape, and form.

o   A prototype helps you sell or license an invention. You can use it during demonstrations.

o   Making one can prepare you to write your patent application and make your patent drawings.

            What are the advantages and disadvantages of using low fidelity prototype and high fidelity prototype?

	Advantages	Disadvantages
Low fidelity prototype	Get better and more honest feedback It’s great for A/B testing Make the cost of mistakes cheap, not expensive Refine the page flow, not the pages Figure out the interaction design rather than the visual design	o         limited error checking - navigational and flow limitations
High fidelity prototype	o   Permit test and exploration   o   Aid with customer / user buy-in   o   Produces useful user evaluation results   o   Look and feel of final product    o   Can be used as marketing / sales tool   o   Can be easily converted to a real system	o   User frustration as product appears to be finished when really it was only a prototype   o   Expensive and time consuming to develop   o   Inefficient for proof of concept designs   o   Not effective for requirements gathering   o   Very difficult to actually discard and start again   o   Users can be reluctant to change design

h   Explain different types of prototyping

Type of Prototype	Typical Purpose	General Characteristics	When to Use
Concept Prototype	Analyze system approaches	High-level, overall vision	Concept Definition Stage
Feasibility Prototype	Determine feasibility of various solutions	Proof of concept for specific issues	Concept Definition Stage
Horizontal Prototype	Clarify scope and requirements	Demonstrates outer layer of human interface only, such as windows, menus, and screens	Function Definition Stage
Vertical Prototype	Refine database design, test key components early	Demonstrates a working, though incomplete, system for key functions	Later portion of Function Definition Stage
Functional Storyboarding	Determine useable sequences for presenting information	Demonstrates the typical order in which information is presented	Function Definition Stage

1.      What are the differences between prototyping and wireframe?

Prototyping	Wireframe
·         A built, high fidelity set of functional pages or components	·         A low-fidelity, conceptual drawing
·         Contains detailed page components for the task flow	·         Used to explore layout and task flow options
·         Is a targeted, usability testable specific user task scenario	·         A fast, iterative visual communication to explore options using general data
·         Contains the actual navigation and interactions for eventual coding	·         A buy-in tool for stakeholders (designers, clients, developer all agree before coding)
Interactivity Create different states of a design in which the user can actively engage with the design and change the states of the prototype.	·         An annotated set of paths and flows with entry, exit and interruption points
Animation Set up transitions between various states of an application.	·         Can be functional or a general storyboard (Day in the Life)
	Creation Create original artwork in a flexible and robust environment, where any shape or style of object imaginable can be created easily.
	Modularity Design once, and have the changes cascade throughout the whole document.

HTML Code

Page Home

Result from the code

Page Yurts

Result from the code

Assalamualaikum semua.

Topik yang akan saya bincangkan pada hari ini ialah mengenai laman sesawang. Terdapat 2 jenis laman sesawang, iaitu laman sesawang yang menarik dan tidak menarik. Kecantikan sesebuah laman sesawang itu dipengaruhi oleh reka bentuknya. 

Laman sesawang yang telah menarik minat saya dengan reka bentuknya ialah laman sesawang http://simplysiti.com.my/

Menarik tentang laman sesawang SimplySiti ini ialah warna latar belakang,tulisan dan gambarnya yang amat terang dan sesuai. Laman sesawang ini bukan sahaja menarik minat pembaca untuk mengunjungi malah ia juga mudah dan senang untuk dibaca. Tambahan lagi, laman ini menarik apabila dibuka kerana terdapat tiga warna latar belakang, tulisan dan gambarnya yang berbeza apabila bertukar iklan sebagai contoh gambar rajah di atas. Setiap isi-isi dan iklan telah dibahagikan kepada bahagian-bahagian sepatutnya..Bagi kami walaupun laman sesawang ini tidak lah penting tapi bagi yang suka pada kecantikan mungkin akan melihat laman sesawang ini. Ia senang untuk mencari produk yang kita nak hanya pergi ke page "shop" semua jenis produk akan dipaparkan.senang dan mudah untuk mencari.

Dalam website ini kami menggunakan 8 peraturan keemasan laman web ini telah memenuhi beberapa syarat. Berikut adalah penerangan setiap peraturan ialah:

1. Strive for consistency

• identical terminology in prompts, menus, help screens.
• consistent color, layout, capitalization, etc

2. Offer informative feedback

• every user action should have system feedback

3. Design dialogs to yield closure

• e.g Confirmation page on eCommerce websites

Laman sesawang yang tidak menarik saya ialah mama's cheesies. ni url nya http://mamascheesies.com/index.html

adakah anda rasa laman web ini menarik untuk anda lihat?bagi kami ia agak tidak menarik lagi-lagi dibahagian ltar belakang,warna,tulisan,corak. Ia agak tidak sesuai untuk digabungkan. Sepatutnya rekabentuk sesuai dengan konsep yang di buat. dari segi pembesaran dan kefahaman tulisan amat penting.mungkin bagi remaja dapat fahami tapi bagi orang tua agak susah untuk fahami n terang. mesra pengguna tu pnting untuk menarik pelanggan untuk melihat laman web kita. macam ni design memang pelanggan tidak akan buka apa lagi membelinya. 

HTML CODE

1.  Write the markup language code to display your name in the largest-size heading element.

<html>

<head>

<title></title>

</head>

<body>

<h1>NURUL IZNI BT RAHMAT</h1>

<h1>NOROHAZANA BT CHE ADIK</h1>

<h1>NOR HAZLIN BT HUSNI</h1>

</body>

</html>

2.  Write the markup language code for unordered list to display the days of the week.

<html>

<head>

<title></title>

</head>

<body>

<ul>

<li>IZNI</li>

<li>YOE</li>

<li>ALIN</li>

</ul>

</body>

</html>

3.  Write the markup language code for an ordered list that uses uppercase letters to order the items.  This ordered list will display the following : Spring, Summer, Fall and Winter.

<html>

<head>

<title></title>

</head>

<body>

<ol>

<li>Spring</li>

<li>Summer</li>

<li>Fall</li>

<li>Winter</li>

</ol>

</body>

</html>

4.  Think of a favourite quote by someone you admire.  Write the XHTML code to display the person's name in a heading and the quote in a blockquote.

<html>

<head>

<title></title>

</head>

<body>

<h1>WILLIAM SHAKESPEARE</h1>

<blockquote cite="http://www.brainyquote.com/quotes/quotes/w/williamsha101484.html">Some are born great, some achieve greatness, and some have greatness thrust upon them. </blockquote>

</body>

</html>

Jom Kenal Facebook

This is our first blog..Is it interesting??Bagi kami boleh laaa..heee. Ini adalah karya pertama kami..hihi,macam retis pulak rasa..haha. Disini kami pilih salah satu rangkaian yang agak glamour bagi semua golongan ni. FACEBOOK. Ade ke orang yang masih tak kenal apa itu facebook??atau nama glemer dia FB?? rasanya semua kenal kot. Bagi yang tak kenal,mari kami kenalkan.

Apakah tujuan laman web ini?

Lawan web ni dicipta oleh mark zuckerberg yang sekarang ni dah dah kaya raya disebabkan oleh FACEBOOK ni. Facebook ni di wujudkan bertujuan untuk menghubungkan sesama manusia menerusi rangkaian internet merentasi dunia yang tanpa sempadan.

Siapa pengguna yang dimaksudkan?

Kebanyakan pengguna fb ni adalah dari golongan remaja sampai ke tua. Pendek kata semua golongan tahu menggunakan fb ni.

Adakah anda berfikir bahawa laman web ini mencapai pengguna yang dimaksudkan? Mengapa atau mengapa tidak?

Pengguna bagi laman sosial facebook ini boleh dikatan melebihi had muatan, Ini kerana pemilikan akaun facebook ni percuma dan tidak terhad kepada satu akaun sahaja bagi setiap orang.

Adakah laman web yang berguna kepada anda? Mengapa atau mengapa tidak?

Facebook boleh dikategorikan salah satu rangkaian yang berguna kepada kami kerana dengan fb ini kami dapat mengenali kawan baru dari serata dunia dan kami dapat mencari kawan lama yang terputus hubungan.
fb juga dapat memberi maklumat serta menjadi medium pengantara antara kami dan pensyarah untuk berkongsi maklumat.

Senaraikan satu fakta yang menarik atau isu yang mengenai laman web ini.

Rangkin pengguna facebook antara fakta menarik. Lets see

Adakah anda akan menggalakkan orang lain untuk melawat laman web ini?

Ya. Kerana ia sangat menarik untuk dicuba.

Bagaimana laman web ini boleh diperbaiki?

Buat colourful sikit..Warna biru je tak comel kot..heee