Week 12: Publishing the Website

In this week, we learned about publishing the website. We can publish the website using various of web host. You choose, you want to pay or free. Of course free web host will provide you a little space compared to  when you pay. The uploading time of free web host also takes longer and this will make you feel 'leceh'. So, this is a strategy of paid web host, you can upload your file fast and easy. 

One thing that i learned is why are you publishing your own website and have your own URL and not 'menumpang' other website such as blogs and that is because branding. Branding is important as this will us people will remember their name and product. For example like one of prestige university like Cambridge and MIT. Their name are well known for the whole world. 

Week 11: Web Testing

In this week, we learned about web testing. In this class, Asrul and me have been asked to do the dialog about web testing of the website for the introduction of the lesson.

In this class, I've learned that there are two types of web testing.

(1)Formal and
(2) Informal.

Informal testing can be done by asking your own friend to test the website. While formal testing can be done by content expert , design expert and target audience of the website

In class, we've been discussed in group on questions that can be posed to content expert and design expert. Our group have to discussed about content expert. These are what our group discusses:

(1) the author of the content in the website
(2)purpose of the content in the website
(3)arranging of the content in the website (whether it go with the flow of the topic)

Week 10 : Discussion Website and Design Document

In this week, we discussed our 50% website and design document with Dr. Dayana. Dr. Dayana give suggestion and comments to our website. Dr. Dayana contribute idea about Problem Based Learning (PBL) of our website. Instead of we focus on two problems, she suggested we focus only one problem and deliver the problem using PBL approach. Here, the proof of discussion of our group and new problem is posed by kak Diana for the learning content page.

Week 9 : 50% Presentation week

In this week, Dr. Noraffandy evaluated and critique our 50% development of our website. There are 4 people in my group including me which are Vicki, Kak Diana and Asrul. Our group develop Learning Cuboid website for form 3 student. We are using Problem Based Learning for delivering our content of learning in our website. Here, what Dr. commented on our website presentation; recorded by our group member, Kak Diana.

 Idea ok
- Tak nampak identity
- Identity boleh terdiri daripada
1) Warna (2 warna)
2) Approach
- Improve Visual Design
- Is Cartoon acceptable for Form 3 students, visit Disney website
- Problem Based Learning - research how PBL boleh dizahirkan dalam bentuk web (strong untuk Information Design)
- kukuhkan PBL
- ada database solution, response guru, response rakan, tips, dan beberapa langkah lain untuk sampai kepada jawapan
- focus on one problem - kembangkan (soalan meminta pelajar memilih sesuatu?)
- mula dengan masalah - scaffolding
- activity based
- very good approach that needs to enforced
- constructivism, learners construct knowledge - > PBL
- stress on learning path

Besides that, We also have been asked to sketch a website on a piece of paper for other group website. Giving comment, suggestion or critique for improvement of their website. We can comment based on information design, visual design or interaction design. Later i will upload my sketch and comment for other group.

In this class, I'm so inspired by Dr. Fandy's lecture on how's the visual design can give a very big impact on the history of technology. 

Week 8: Visual Design

In this week , we learned visual design. Visual design is about planning how the web site will look. There are several vital elements that need to be considered in visual design.  The elements include 

(1) Colours of the website, 
(2) Font or styles of the website
(3) Graphics and multimedia 
(4) Combining all the element above into attractive layout.

Besides that, we also learned that user interface is very important element in website. The element that are must have in user interface are:

(1) A background that reflect the theme -colours or images

(2) Foreground elements that reflect the theme - context and links (title, headings, sub-headings, body text, illustrations and captions.)

(3)Other elements that support the theme - such as text, images, buttons, navigation bars, animation, video.

There are also issues been discussed in the class such as;

(1)using fonts that are easy to read ( sans serif,  eg: verdana, arial) , 
(2)consistency in website (arranging neatly, using table so that your content 'xlari'.)
(3)contrast ( using suitable colour matching)
(4)white space (provide enough white space so that user can relax their eye )
(5)loading (split the big image, so that the time loading the image will fast)

Week 7 : Information Design

In this week we learned about information design in a website. Information design is to clarifying your communication goals and arranging your ideas into a design that serves those goals. In other words is flowchart of your website. When designing information for website, we must considered 5 things that are (1)message (2)audience (3)purpose (4)background and (5)structure.

For example in developing our website, we have been discussed in group to use Problem Based Learning Strategy for our website. So, we have to deliver content of our website based on strategy we choose. We also created flowchart for our website so that we know that the website we develop is in a right path and align with our goals.

In the end of the class, Dr. Dayana given time for us to discuss our group project : Website Development and asked us to sketch our website and upload in e-learning. Since right now, i dont have copy of the sketches, later i will upload the image of the sketches in this blog.

Here , the image of our group sketches.

Content Page

Homepage

Week 6 : Interaction Design

In this week, we need to independent study since Dr. Dayana having a fever. Hope Dr. Dayana get well soon :) .Dr. Dayana had uploaded Interaction Design notes in e-learning and she's given a task to us which is we need to do a mind map from it on a piece of A4 paper and then scan and upload it in e-learning. I've go through the notes and do the mind map. Here is the image of my mind map:

What i've learned about interaction design is it has 3 essential elements for an effective interaction. The 3 elements are (1)organization (2) navigation and (3) interactivity.

(1)Organization – How the information will be organized on the pages ?
(2)Navigation – How people will find their way around your web site ?
(3)Interactivity – What controls you give your users to work with ?

These 3 elements are important when designing interactivity in the website. This will make the user not feeling lost in the website and knows what are they looking for.

Week 5 : Basic Web Design

In week 5, we learned about basic web design and the do and the don't like about website. In this class, Dr. Dayana discussed the difference of website in couple years ago and today's website. There are many difference as we compared the couple years ago of website would have such a big banner while today's website mostly using slide banner. Design in today's website more modern and mostly using at least three colors as it will look neat and nice. However, there are also many websites today still not following the basic guide in web design. There are website which is too messy and not proper organize the content of their website.

Designing an effective web site needs more than just collecting information and simply post it on the web . There are guides and rules must be followed when designing a website. I searched on Google and i found this article about 10 principles of effectice web design (http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/). The 10 principles are:

(1)Don't make users think
(2)Don’t squander users’ patience
(3)Manage to focus users’ attention
(4)Strive for feature exposure
(5)Make use of effective writing
(6) Strive for simplicity
(7)Don’t be afraid of the white space
(8)Communicate effectively with a “visible language”
(9)Conventions are our friends
(10)Test early, test often

For, further elaboration about the principles, you can go to link above.

Today's class, we have to compared the best website and the worst website that we like. I choose 'Apple' website for the best website while 'Math is Fun' for the worst website.

I like the Apple website because the main page of the website have such a big ad which promoting their latest product. The big advertising board in Apple website makes the consumer update the latest product and can make their heart desire for it. They are using good marketing in promotion their new product. Other than that, this website using 3 main colors which are white, black and grey. The navigation of this website is good and you will not lost in this website. The website also have enough white space so that the consumer will not feel heavy as in this website contains large image of their products. Overall, it is a best website in my opinion.

On contrast with Math is Fun Website. It is an educational website which specifically in Mathematics for K-12. The website is a bit messy as in the content of the website is too many in one page and you have to scroll down more than 3 pages. The content of the website also not been arrange neatly. As the image sometimes in the left side or center of the page and there is no consistency in arranging the content neatly. However, the design of this website still can be improved since the content of the websites are useful for educational purposes.

Week 4 : Project Management in Web Design and Production

In this week, we learned about project management in web design and production. Project management in web design takes three process (1) planning, (2) constructing and (3) testing. The three process can be called pre-production, production and post production.

In pre production, there are involve analysis, planning and design such as creating blueprint for the website. While in production (construction process), there are involve content research, interface design, graphic development, audio recording, video production and web authoring. For

post production, testing and evaluation are conducted. The testing can be done on content, functional testing and usability testing.

So, when you're developing a website, all of the process above will be involved. This will makes your work run smoothly and organize.

For group discussion this week, we've been given a task to find out about problem solving strategy when conduct in teaching and learning in school. Problem solving strategy is one of learning strategy. There are many types of learning strategy such as game based learning, inquiry based learning, problem based learning, collaborative learning and many more.

In a group of three which is Junaidah, Cikgu Fid. and me. We've been discussed about problem solving strategy and we write it on a piece of paper. We googled and find out that the problem solving strategy is consists of four main things (1) Plan (2) Do (3) Check and (4) Act.  Below is what we have done.

Week 3 : Web Development Process

Salam and Hi..

In this week, i learned about web development process. In developing a website, there are many ID model (Instructional Model) that u can choose as a guide thru the whole process. To name a few of ID Models like ADDIE Model, Waterfall Model, Hannafin & Peck Model, Dick & Carey Model and Assure Model. The most famous model that often been used is Addie Model. It requires 5 steps in developing a website such as (1) Analysis (2) Design (3) Development (4)Implementation (5) Evaluation. Below you can see an image of ADDIE Model.

During the class, we had presentation about one of ID Model. I've been a group with Asrul and our ID Model is Hannafin and Peck Model. This model requires only 3 phases which are (1) Assess , (2) Design and (3) Develop/Implement. You can see the image below.

The Hannafin Peck’s design model is  very simple yet elegant in the way in which all three phases are connected to "evaluate and revise". From what i read, this model may not be designed for a novice, but its focus on constraints in relation to quality and complexity is appealing.

Week 2: Basic Concept of Webpage

In this week, we learned about Basic Concept of Webpage. This class was conducted by Dr. Dayana. Before the class start, Dr. Dayana explained more and detail about assignment and evaluation. 

Here, I concluded what I must do in our group assignment.

1) Website should have learning theories & learning strategies.

2)Appropriate website suitable with target audience.

3)Must do the proposal first before developing website and must be approved

4) Do the evaluation (Formative & Summative). 

   (i) Formative Evaluation (Alpha Testing) is a continuous testing which conducted before the website   published. This test will involve expertise such as content and multimedia expert.

   (ii)Summative Evaluation (Beta Testing) is conducted at the end of the development. This test will involve real user.
5) Format Hardcopy of assignment

   i)Black tape binding

   ii)Blue Coverpage

So enough with the assignment, lets start with what i have learned in basic concept of webpage. I learned what is webpage, website, CMS, LMS, portal and blog.

1)Webpage- a one piece document that consist in website

2)Website- a collection of webpages which hosted on one or more servers

3)CMS-CMS or Content Management System is a computer software system that use to organize and facilated collaborative creation of documents and other content

4)LMS-LMS or Learning Management System is a set of software tools that designed to manage learning intervations. 

Example: Moodle, SAKAI etc.

5)Portal- pages that intended to serve as main page or gateway 

   Example: Yahoo, CNET and Niche (tutor.com.my which is for education)

6)Blog- a website that usually maintained by individual with regular entries of commentary, descriptions of events or other material such as video or graphics.

At the end of this class, we also had a discussion about this:

1. Personal web development using web authoring software vs CMS vs blog?

2.Educational web development using web authoring software vs LMS vs blog?

I had this discussion with Vicki and we conclude that we choose blog in personal web development. This is because it is easy, an open source and at the same time can earn money. Example of blog is blogger.com . I have experience using it and now i use it for writing my reflection in certain subject courses. For Educational web development, we choose LMS such as MOODLE. This is because it is free and open source coding and no need to develop a website from a scratch.. hee..

Week 1: Intro

Salam and hi, 

In this blog, i would like to share on how to develop a website but not just an ordinary website, but an educational website. Since I've learned some programming skills in Authoring Class last semester, I hope i can develop an interactive teaching and learning webpage or portal.

In this Web-Based Multimedia Development (MPT 1393) class, I will learn on how to develop website based on suitable learning theories and instructional designs.  This class will be conducted by Assoc. Prof. Dr. Noraffandy Yahaya and Dr. Noor Dayana Abd Halim. 

Here, i give the synopsis about this courses.

"In this course, students will be exposed with some state-of-the-art communication technology tools, which is Internet and how it can be used efficiently in teaching and learning. Students will have their chance to develop an interactive teaching and learning webpage or portal using programming skills that have been learned in MPT 1193 (Authoring System). Students also will have an opportunity to evaluate the effectiveness of the webpage; that has been developed; using several testing and evaluation techniques that will be introduced in this course"

This week is a 1st class and  was conducted by Dr. Noraffandy. The next class will be conducted by Dr. Noor Dayana. In 1st class, just a short briefing from Dr. about assignment, presentation and evaluation for a website development. In this course, we will have 7 assignments in total and 1 final exam which carry about 30% marks. So, I must do the assignment 'secemerlang yang boleh' cause it carry about 70% marks.

Wee... we just had our first assignment which is design document for our website. For presentation of our proposal, we have been asked to do it using PREZI. I searched about PREZI and I found that the PREZI is a cloud based presentation software that opens up a new world between whiteboards and slides.  The fun is about PREZI is the zoomzble canvas to explore ideas. I found it really interesting and can makes a beautiful, creative and fun presentation.

So, this week is just a short briefing from Dr. and we're finished class early.