Project reflection

In the my February's post of "My Group and our Project Topic (M.I.D)", i explained about the topic which is introduction to DSLR camera. I was assign to take over 'accessories' subtopic. Each group needed to do 2 times presentation.. well as for the 1st presentation, which we do pretty well, thats what we thought so, we received feedback from our classmate. As for my topic here are the feedback;

* to many page to click in order to find the solution (i thought many page will shows how hard i work?lol)
* how can user know where they are?
* the answer in forum views is very limit 2 answer per page only(i thought this will avoid user to scroll to much), user might have slow connection, would burden the user to find out the answer
* add some media would be good


Thanks for very useful feedback, i upgrade my subtopic to following;

* I reduce some pages by rearrange and combine the data in as less page as possible
* I add topic path or bread crumbs navigation in every page so that the user can know where they are. (to know more about bread crumbs or topic path http://www.motive.co.nz/glossary/breadcrumb.php)
* I edit the coding PHP to allow to view 10 answer in one page (learn to make simple PHP forum http://www.phpeasystep.com/phptu/12.html)
* i add drag and drop behavior as reflection or activity of learning

Dear my group mates, a special thanks for giving the best cooperation as a teamwork, solve obstacles together, sharing the joy after last presentation, i really appreciate that. Not to forget our humor yet charismatic Prof. Dr. Jamalludin B. Harun in teaching and learning session as well as guiding all of us throughout the class period.Thank you Prof.! Jasamu dikenang. Last but not least, Happy Learning ppl!;-)

Web Publishing

(click on the image for large view ;-))

suggested reading of web publishing;

http://www.thesitewizard.com/archive/findhost.shtml

Web Testing & Evaluation

I summarized the class note to following (click on image to view large size);

Interface Design/ Visual Design

Its human nature judging a books by its cover, judging a person by their looks, judging the site by its looks or visual appeal of the design. If looks or design is not important, there will be no MNG, Guess, Prada, or this site(http://www.webpagefx.com/best-web-design-company.html) won't even exist! See. How great the looks influence the people! That is why we need consider several general issues in visual design which is(there are many and many more but i only discuss 2 kinds only hehehe.. );

typography:
The design and use of typefaces as a means of visual communication from calligraphy to the ever-developing use of digital type is the broad use of the term typography. In general usage typography is the practical and artistic arrangement of type and printing with type.
Terms Related to Typography;
Text Composition:It involves manipulating text placement and altering the visual appearance of the text.Also know as text layout. Example of tricky text composition;


Typesetter: It is the job of the typesetter to make sure all the correct typefaces and specific fonts are used throughout the document with all the text properly arranged. Also known as text setter.

Typographer: Traditionally, the typographer was someone with specialized knowledge about typefaces - whether or not they were actual type designers - and about the entire field of typography and printing. The typographer chose the typefaces for books and other printed matter then the typesetter would use those type specifications to set the type.

prototype:
Web prototyping or rapid web prototyping, as it’s sometimes called, 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.

site that offer technique for button design;
http://www.webpros.tv/respect/common-elements-used-in-interface-button-design/


Suggested Reading of Interface Design;
http://www.edtech.vt.edu/edtech/id/interface/index.html
http://www.smashingmagazine.com/2009/01/19/12-useful-techniques-for-good-user-interface-design-in-web-applications/
http://photoinf.com/General/Robert_Berdan/Composition_and_the_Elements_of_Visual_Design.htm

Interaction Design

In previous post i discussed about information design,i would like to highlight the learning strategies, in which i choose Problem Based Learning (PBL). Each type of strategy have their own characteristic. Those characteristic should be as logical organizing principle. Same as previous example, to get a shape like body-builder, we need strategy , which is exercise, healthy diet and so on. That will be the strategy. But how make it work? In term of healthy diet, less sugar, no fat, no cholestrol and so on(the principles). In term of exercise (PBL), jogging, cycling, swimming and so on(the principle).But we need to choose a right activity for a right purpose. jogging would not work effectively, go to gym and work with the sport equipment that will enforce muscle enlargement at certain part of body will effectively work.In fews month, pop! You got the shape! Same goes to in web context, we have the PBL principle but how to make it work? The process of question and answer to make it work is called interaction design. We turn the information into an experience, there are three element of interaction design which is;

1) organization (How info will be organized);


(Interaction design-organization: Dr. Jamalludin)

2) Navigation (How people find the way around);

Things that you should consider in web navigation;
a)Accessible
The navigation of your site is possibly the most important part of any given page. So it should be as accessible as you can make it. This means avoiding special effects like Flash, Java, or JavaScript as your only navigation method.
b)Meaningful
Keep your navigation meaningful. Make the links clear - don't try to get cute or use terms that are internal to your organization. Someone who has never been to your site before should know immediately where the link will take them.
c)Understandable
If you want to use images for your navigation, make sure that there is some text associated with them. " Mystery Meat Navigation" is the use of non-descriptive images as navigation, and it's much more common than you might think.
d)Prevalent
Your navigation should appear on every page of your site. While you don't need to have identical navigation, the basic structure should be the same throughout the site, with changes used only to indicate location within the hierarchy.


3) Interactivity (What control users can work with)

Web Interactivity Examples
Interactive Webbing: forms interfaced to CGI programs
Web Interactive Talk: threaded discussion stored on a server
Web World: a cooperatively-constructed hypertext
WebChat: real-time interaction via web pages
http://www.hongkiat.com/blog/importance-of-web-interactivity-tips-and-examples/

In summarized, we give users well-marked roads and landmarks, then let them shift into four-wheel drive. Organization will be the well-marked roads, when we on journey to go from one place to other place we have the marked-roads to get the right way and the best way to reach the place. Navigation will be the signboard, we know where we are, where we can go, and what road to take back. While Interactivity will be the accommodation and facilities available all along the road, we keep on riding because gas station,seven eleven shop, road light is available.


Suggest Reading of Interaction Design;
http://webdesign.about.com/cs/webnavigation/a/aaeffectivenav.htm
http://www.jimthatcher.com/webcourse4.htm

Information Design

"DON'T MAKE THEM THINK, ENGAGE THEM" (from 'Don't Make Me Think' book cover remixed by Robin Good )is quotes for this post. I would like to share the implicit meaning of this quotes which is, firstly, 'them' refer to 'online user', don't make the user to think so much, dig out their brain out, but engage with them in very simple, yet attractive and adventurous way. The level of information received by online user is decided by the information design, how you deliver the content at the same time involved of user interaction in very effective way. that the vital goals of every site, to deliver contents to user. If u fail to deliver, its consider useless site then. Robin Good state that :-
"It is in this direction that information designers could look next: moving beyond the basic visual organization of content elements and into the realm of social simplicity where the elements information reading, contributing and exchanging are coreographed in ways to make them mutually supprtive and synergistic"

To get a shape like a body-builder, a man need to go to gym consistently, need some extra supplement, such us protein, raw eggs, in order to get desire shape. Go to gym, exercise, extra support is a strategy, doing nothing gives nothing back. To the deliver the information, we need strategy. A strategy will help you define where you are going and the most efficient, effective and economical way to get there. This is when instructional learning theories being adapt into web-based learning to deliver the information of site in very effective way. Following is example of site using learning strategy into web based learning from http://webquest.org/index-create.php (given in Dr Jamalludin slide);
http://questgarden.com/51/22/4/070608090111/index.htm
http://questgarden.com/52/36/4/070612201403/index.htm
http://questgarden.com/52/41/5/070613164641/index.htm
http://questgarden.com/52/16/0/070606152240/index.htm

There are many type of learning theories with certain category, for example;
Behaviorisme:
�� Drill Practice
�� Tutorial
�� Simulation
�� Games
�� Problem solving
Cognitive & Constructivisme
�� Problem based learning
�� Project based learning
�� Cooperative learning
�� Situated/Scenario based learning
�� Case based learning
�� Inquiry based learning
Simplify all will comes up as shown in the map, to see more map you can refer to this site http://www.ed.uiuc.edu/courses/edpsy317/sp03/learning-maps/index.html;


As for our group, we choose problem based learning, therefore, i will share more about problem based learning aka PBL. First of all, before applied the theory, knowing the characteristic is essential to avoid from you out the way. How to make a call from public phone? first, pick up the phone, puts the coins, enter the number then push call button! if u miss of the step, you are not making a call. Same goes in applying the theories, but its not compulsory to do the step in order, at least one of the step is being apply, or else, it wont be PBL strategy! So the characteristic of PBL are;
1. Use of real world problems - problems are relevant and contextual. It is in the process of struggling with actual problems that students learn content and critical thinking skills.
2. Reliance on problems to drive the curriculum - the problems do not test skills; they assist in development of the skills themselves.
3. The problems are truly ill-structured - there is not meant to be one solution, and as new information is gathered in a reiterative process, perception of the problem, and thus the solution, changes.
4. PBL is learner-centered - learners are progressively given more responsibility for their education and become increasingly independent of the teacher for their education.
5. PBL produces independent, life-long learners - students continue to learn on their own in life and in their careers.
By referring the characteristic and other factor of PBL theory, we construct the web based learning using this strategy to deliver the content in supreme way!



Suggested Reading of learning theories;
http://www.infed.org/biblio/b-learn.htm
http://www.usask.ca/education/coursework/802papers/mergel/brenda.htm
http://ldt.stanford.edu/~jeepark/jeepark+portfolio/PBL/whatis1.htm

Basic Web Design

First and foremost, lets consider this situation;
When i want to shop a dress for Christmas dinner, first come to my mind is the design. Do i want long dress, or short dress, with or without sleeve. If its so short won't be suitable for family gathering(i need to consider the audience&value). What fashion, girly, vouge, vintage or lady-like? Then i will choose the color. Any theme color for the night? I will never never choose bright orange, why? because we hate each other. All this, only from my opinion. How about you? How you choose your outfits for any event you attend? Everyone have varies interest, yet in the last everyone will wear suitable outfits for the event. This is very closed to web design context. the design which include the color, the navigation, the presentation, the contents, the usability and so on, will decide how long you spend to surf on the site. We need to present the site that meets the goals and meaning of the site. One quick question, Which you prefer Facebook or Friendster? I will say Facebook! who agree with me raise you hand up to the air! i believe you do. Why? we have our own reason. Both have same function, but both have own strength and weakness. According to Dr. Jamalludin(2011), four primary aspects influence web design is
1)Content
2)Technology
3)Visuals
4)Economics
more info? read here --> http://www.webdesignref.com/chapters/01/ch1-02.htm
And there are three parts of web design (details will discuss in further post):
􀂃 Information Design
􀂃 Interaction Design
􀂃 Interface Design (Visual or Presentation Design)
In other words, we make a fascinating first impression. Good Web design is the same as good design. If you understand the elements that make up good design, you'll have a Web page that works well!

Some interesting website Design!








Suggested Reading on basic web design
http://www.cqwen.com/most-important-five-basic-elements-of-web-design/