Monday, December 30, 2013

Publishing your Website

Hello and Hai,
In this class, I learn about How to publish the website. It is important to publish the website so that all people can visit the site. There are several elements that need to be considered when choosing a free web host which include

1. advertising
2. amount of web space
3. file access
4. file type and size limitations
5. reliability and speed of access
6. supporting PHP, ASP or Perl?
7. Bandwidth

There are several web host provider that provide free web hosting. 

www.tripod.com
www.geocities.com
www.freeservers.com
members.freewebs.com

However, free web hosting have limitations. 

1. User get free site but the hosts will put advertisement in your site. 
2. Limitations in storage and download amount. 
3. Sites that exceed their bandwidth allotments during the month may get shut down until the next month when the bandwidth counter restart. 

Another type of web hosting is commercial web hosting. There are several elements that need to be considered in choosing commercial web hosting. 

1. Reliability
2. Data transfer
3. Disk space
4. Technical support
5. Platform/OS
6. Control panel 
7. Domain name
8. Server
9. Price

That all. Thank You. 


Week 13: Web Testing

Hello and Hai,

In week 13, I am learn about web testing. Web testing is a phase where web developer test his or her own site which can the developer to spot problems and make appropriate changes. A test plan provides a checklist of all the functionality in the program. Checklist can ensure that the testing can be performed in a consistent, detailed and through manner by one or  many testers. There are three types of error which include design flaws, content errors and software or system defects. Explanation of the errors are as following:

1. Design Flaws

User interface problems or suggestions such as proposed new features, relabeling buttons and screen layouts.

2. Content Errors

Inaccuracies data with formatting problems or data of poor quality in some other respect.

3. Software or system Defects

Commonly called 'bugs' and bugs were technical problems encountered when trying to run and operate the site.

Besides that, I am also learn about type of testing and there are five types of testing which include

1. Functionality Testing

Refers to the testing of programmatic features and is most appropriate for sites of higher complexity that contain features such as database access, dynamic page generation, and Java applets namely features that required actual programming.

2. Layout Testing

Refers to the ability of the website page layout to accommodate various user browser and hardware display configurations.

3. Load Testing

Load testing is about testing the server and web connection to know the capability of handling load. This testing is important if developer expecting heavy usage of the website. Load testing simulates the anticipated stress of the actual site usage to see if the system has any weak links.

4. Link Testing

The testing of links from own site to other web pages.

5. Usability Testing

Usability is a quality attribute that assesses how easy the user interfaces are to use.There are five quality components in usability testing which are learnability, efficiency, memorability, errors and satisfaction.

Apart from that I learn about acceptance test. There are two types of acceptance which are Alpha testing and Beta Testing.

1. Alpha Testing

A test among the teams (group developer) or friends to confirm that the website is works. Term alpha test meant the first phase of testing in a software development process. The first phase includes unit testing, component testing, and system testing.

2. Beta Testing

Second phase of software testing in which a sampling of the audience tries the product out. Also known as pre-release testing.

That all. Thank you.




Thursday, December 5, 2013

Discussion: Web Site and Design Document

Hello and Hai,

Last week, we had our discussion on website and design document. We had shown our website to Dr Dayana since she was not in class when we presented our website on 21.11.2013. She had added some comment for improvement. Later, we discuss among our group. The discussion when well and we had come with new idea. The idea was we will only provide one problem instead of two. We had created the path of the problem. Below is the "prove" of our discussion. 


Left: Shows the sketch of flow for the student to solve the problem

Right: Shows the problem that created by Kak Diana.

That all. Thank You

Wednesday, December 4, 2013

50% Presentation

Hello and Hai,

On 21/11/2013, we had our 50% progress presentation on our group website. I am the first group together with kak Diana, Nadwa and one and only male student in our class, Asrul. First of all sorry to teammates, classmates and lecturer for the problem that occur during our group presentation. After the presentation, lecturer had commented for each group.  Our group website is about learning Geometry and only focused on Cuboid. For group 1 comments are as following:

 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


(Recorded by Kak Diana)

Apart from that, we were asked to give comment or opinion for website of the other group. We were asked to comment whether on interaction design, information design or visual design. I am choosing interaction design. Below is the sketch that I proposed to group 2. 

Group 2 website is about learning Networking. In my opinion, their design is ok. However, I am lost when I see their website for the first time. I cannot locate the button. I only know the button is located at the top when only they pointed the cursor to the button. Apart from that, the arrangement of the picture at Home page look like it presented that the picture is the button. Heee.. I think that all. 

Thank You.

Week 8: Visual Design

Hello and Hai,

In general, visual design is about planning how the web site will look. In this class, I learn several important elements that need to be considered in visual design. The elements include:

1. Colours for the website.
2. Font or styles that will be used for the written part of the web pages.
3. Graphics and multimedia needed.
4. How to combine all the element into attractive layout.

Apart from that, in developing website, user interface is also an important element. Elements of user interface are as following:

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.

This lecture also provide some general issues in visual design. The issues are as following:

1. Choose a visual theme - Should be connected to the content

2. Use template concepts - Should be consistent

3. Use table or division (div) or frame for layout or arranging the visual elements.

4. Typography
-Keep it simple by limit the number or fonts per page and per site. Apart from that, use the same fonts consistently throughout the site. 

- Make a good choice for fonts. (Sans serif or serif, used commonly installed fonts so that when loaded into web browser the font can be loaded, considered mood and readability)

* Readability is the ease in which text can be read and understood. (source: wikipedia)

For class activity, we were asked to sketch visual design for our group website. 


Sketch for index page (Home Page)

Sketch for content page. 

Notes for Visual Design (Click for clear view)

Thank you





Tuesday, October 29, 2013

Week 7: Information Design

Hello and Hai,

In information design, I learn how to manage the information in the website. Information design is about clarifying the communication goals and arranging the ideas into a design that serves those goal.

Information design focus on:

1. Message: What information do you wish to share?

2. Audience: Whom do you wish to share the message with?

3. Purpose: How and why do you want to share the message with the audience?

4. Background: What does your intended audience already know about the subject you are discussing.

5. Structure: How can your message be organized most effectively?

That all for now. Thank you.

Week 6: Interaction Design

Hello and Hai, 

This week we do not have class as our lecturer is not in a good of health. However, she had not leave us just like that. She still manage to give us some task to be done. The task is to create mind map about topic for today which is Interaction Design. 

The critical tasks of interaction design are to create guidance system to orient users, to design the navigation system, to define what happens on each screen, design the controls for interaction and determine how much interaction is to be included in website. 

There are several questions can be used as a guideline to create effective navigation. The questions include:

1. Where am I? - Let the user know their current page.
- Precise location on the web: URLs
- Page and Site Labels
- Page and site style and location

2. Where have I been? - Let the user know where they have been.
- History: Link coloration can help identify links that have already been visited.
- Landmarks
- Cookies

3. Where can I go? - Let users know where they are in relation to the rest of the website.
- Provide links to other pages that the user can visit.

4. How do I get there? - Provide consistent, easy and understandable link

5. How do I get back to where I started? Provide alternatives to the browser's back button to let users return to the starting point.

There are 3 important elements in interaction design which are organization, navigation and interactivity.

1. Organization is about how the graphic, text and other elements will be arrange in the web page. 
- Draw storyboard
- In index page or homepage must included
a) banner
b) title of the website
c) interface of content
d) graphics
e) menu

2. Navigation is about link, button  or icon in the website. Must consider whether the elements used for navigation is easily navigate the user. 

3. Interactivity is about whether the website give opportunity for the users to involved actively. There are several types of interactivity which are
 - place finding
- bread crump
- page number
- different colour for the existing menu.

Below is the mind map that I create for this topic. Please click the picture for a clear view. 








That all for now. Thank you.

Wednesday, October 23, 2013

Week 5: Basic Web Design

Hello and Hai,

In week 5, i had learnt about basic web design. During this lecture, we had examined variety  of websites. This step is important so that web designer able to learn and focus on user's need and study the contents that required to design the websites. There are 4 primary aspects taht influence web design which include content, technology, visuals and economic. Apart from that, i had learnt about basic concept in design which include balance, contrast, focus and related.

For class activity we were asked to provide websites that had the best and worst design. At first, I was chosen Apple website as my best design but it was taken by the first presenter :). I really admire Apple website design. It is simple but yet still can provide many useful information for the visitor. So, at last I come up with Hasbro website (http://www.hasbro.com/playdoh/en_AU/). It is a website for toys. Remember Playdoh? Playdoh is the one of Hasbro products. But, I never have any toys from Hasbro because it is quite expensive. The worst website design that I had found was http://www.dpgraph.com/. This website talk about 3D elements and they are trying to put all 3D elements in the website. They make the background moving and it distracted the reader. This design make the website look crowded and make me dizzy.

Sila klik gambar untuk tumbesaran sihat.





Thank You. 





Friday, October 4, 2013

Week 4: Project Management in Web Design and Production

Hello and Hai..

We meet again.

Before proceed with the lecture, our lecturer conducted class activity. The class activity was about learning strategy. We had been divided into three groups and my partner for this class activity was Miss Afi. Our group presented about Game Based Learning. It sound easy but when I am trying to search on the internet, read and write on the paper I  am getting blur. I like to play game but between playing game and planning a game for learning it is two different things.  But, thank God, Afi manage to come out with some flowchart how to implement Game Based Learning in classroom. The task was to choose any topic that we want to teach and then apply Game Based Learning to deliver the topic.  Below is the flowchart. In our flowchart, there are five phase which are:



1. Identify the objectives of the topic.
2. Decide the rewards for the victors.
3. Create game pieces.
4. Apply the game to students
5. Evaluation

These steps were adapted from http://serc.carleton.edu/introgeo/games/index.html. Feel free to visit the site to get more information and to enhance understanding. :)

Then, we proceed with the class. I had learned about processes that consist in project management. Basically, these processes include planning, constructing and testing.  These processes also can be divided into pre-production, production and Post production.

Pre-production involve analysis, planning and design. It is about creating blueprint for the website. In Production or Construction phase involve content research, interface design, graphic development, audio recording, video production and web authoring. Testing and evaluation are conducted in Post-production. Testing can be done on content, functional testing and usability testing. 

Sila klik pada gambar untuk tumbesaran sihat.





Thank you.

Thursday, October 3, 2013

Week 3: Web Development Process

Hello and Hai..

What had I learned this week?

In topic of web development process I had learned about ID Model or Instructional Design Model. There are many ID model but for this class we had focused on ADDIE Model, Hannafin and Peck model, Dick and Carey Model and Waterfall Model. During group presentation one ID model was added which ASSURE Model.

ADDIE Model.



ADDIE is stand for Analysis, Design, Develop, Implement and Evaluate.

In Analysis phase, designer identifies the learning problem, the goals and objectives, the audience's needs, existing knowledge and any other relevant characteristics. Analysis also considers the learning environment, any constrains, the delivery options and the timeline for the project.

Design phase is a systematic process of specifying learning objectives Detailed storyboards and prototypes are often made ant the look and feel, graphic design, user-interface and content is determined here.

Development phase is the actual creation of the content and learning materials base on the Design Phase

In implementation, the plan is put into action and a procedure for training the learner and teacher is developed. Materials are delivered or distributed to the student group. After delivery, the effectiveness of the training materials is evaluated.

Evaluation phase consist of formative and summative evaluation. Formative evaluation is present in each stage of the ADDIE process. Summative evaluation consists of tests designed for criterion-related referenced
items and providing opportunities for feedback from the users.

Hannafin and Peck Model




Phase 1: Requirements Analysis Phase

Designer or developer make an assessment, particularly on the characteristics of the target group which include:

1. Who will use the software?
2. The user's prior knowledge.
3. What the desired behavior change.
4. The objective to be achieved.
5. What hardware and software required.

Phase 2: Design Phase

This phase begins with determining the objectives to be achieved by the user after using the application.  Then, this phase involve determining the activities, training and testing of the user when using the software to be developed. Designer also need to ensure that the method of delivery of the information presented is understandable and appropriate to the user.

Phase 3: Development and Implementation

This phase refers to the process of software production. In this phase, all the elements that were designed in the previous phase is translated into a more practical either with help of programming language or authoring. This phase will require more highly skilled experts in various fields such as programming, audio and video.

Dick And Carey Model



Waterfall Model

Waterfall Model (update)

Waterfall Model (Traditional)

Requirement Gathering and analysis: All possible requirements of the system to be developed are captured in this phase and documented in a requirement specification doc.

System Design: The requirement specifications from first phase are studied in this phase and system design is prepared. System Design helps in specifying hardware and system requirements and also helps in defining overall system architecture.


Implementation: With inputs from system design, the system is first developed in small programs called units, which are integrated in the next phase. Each unit is developed and tested for its functionality which is referred to as Unit Testing.


Integration and Testing: All the units developed in the implementation phase are integrated into a system after testing of each unit. Post integration the entire system is tested for any faults and failures.


Deployment of system: Once the functional and non functional testing is done, the product is deployed in the customer environment or released into the market.


Maintenance: There are some issues which come up in the client environment. To fix those issues patches are released. Also to enhance the product some better versions are released. Maintenance is done to deliver these changes in the customer environment. 


Advantages:
Simple and easy to understand and use.
Easy to manage due to the rigidity of the model – each phase has specific deliverable and a review process.
Phases are processed and completed one at a time.

Works well for smaller projects where requirements are very well understood

Disadvantages
Once an application is in the testing stage, it is very difficult to go back and change something that was not
well-thought out in the concept stage.
No working software is produced until late during the life cycle.
High amounts of risk and uncertainty.
Not a good model for complex and object-oriented projects.
Poor model for long and ongoing projects.
Not suitable for the projects where requirements are at a moderate to high risk of changing.

ASSURE Model

A-Analyze Learners
Analyze who your learners, what sort of knowledge, skills and abilities will they bring to the classroom, learner's learning styles. Can conduct pre-test to administer your learners.

S-State Objective
After you develop a clearer view of who your students are, state your learning objectives for your class or workshop. Learning objectives or learning outcomes provide insight for your students and what you hope they will get out of the activities in the classroom. The ABCD's of writing good learning objectives are audience who are your teaching?; behaviours that will be demonstrated; conditions under which desirable behaviours will be observed and the degree to which new skills will be mastered.

S-Select Media and Materials
Select available materials, modify existing materials or design new materials to help accomplish this task
Select different media to use. Any of the media or technologies that have been deemed appropriate should enhance classroom.

U-Utilize Materials
Instructor will preview all teaching materials before use them with students, including any media or equipment. Be sure the room works for what you have planned. If you are using video or sound, computers or projects, ensure that everything is working well and make sure you have a backup.

R-Require learner's performance
At some point in your classroom activities, your learners will need to practice what they have learned from you. As an instructor, you will need to describe how they will use the materials you have provided. Any responses that are correct should be positively reinforced. Classroom activities should allow learners to receive feedback before any evaluation or test is administered.

E-Evaluate and Revise
Teachers should reflect on their workshop, its objectives, instructional strategy, learning materials and the assessment to determine whether these elements were effective or not. Obtain feedback from peers, people who were in the classroom or from the learners themselves. When teaching students, some things may simply not work. Use group discussion, exit interviews, assessments, and other types of student feedback to evaluate your work.

Sila klik pada gambar untuk tumbesaran sihat.




Thank You.





Tuesday, September 24, 2013

Week 2: Basic Concepts of Website

Hello and Hai,

As told last week, Dr Noor Dayana will conduct the class. Before we proceed with the lecture, Dr Dayana had brief more on assignment. Our website should apply learning theory and learning strategy. Apart from that, the website should be for learning purpose. So, the website should be friendly user towards students who are our target user. Dr Dayana had explained more on evaluation which consist of Formative Evaluation and Summative Evaluation.  Formative Evaluation or Alpha testing is a continuous testing which conducted before the website launching. This test involve expert such as content expert and multimedia expert. Summative Evaluation or Beta testing is conducted at the end of the development. This evaluation involve the real user.

Reminder: Assignment Format (Hardcopy)

Tape Binding and the cover must be in Blue colour.

In week 2, I have learn Basic Concept of Webpage. Webpage is a one piece document that consist in website. To differentiate between these two elements I always think "webpage live in the website". Without webpage there is no website. Website is a collection of webpages which hosted on one or more servers. Next, I learn about Portal. Portals are pages that intended to serve as main page or gateway. In this lecture I learn two types of portal which are general portal (Yahoo, CNET) and Niche (tutor.com.my which is for education).

Next, I learn what is Blog. Blog is a website that usually maintained by individual with regular entries of commentary, descriptions of events or other material such as video or graphics.

Then I learn about CMS and LMS. CMS or Content Management System is a computer software system that use to organize and facilated collaborative creation of documents and other content. CMS also can be apply for website in order to manage the website's contents. Example of CMS include Joomla, Mambo and Xoops.

LMS or Learning Management System is a set of software tools that designed to manage learning intervations. Example of LMS includ Moodle, Sakaim WebCT and Blackboard. Then, we spend about 5 minutes for discussion session. There were two questions:

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

For personal web purpose my group had chose blog as our medium. Blog is easier tools compare to authoring software and CMS. One of the famous blog site is www.blogger.com. User do not have to learn programming in order to use blog. User just need to create an account and a site will be setup for the user. Tools in blogger.com is easy to use. Just take some time to be familiar with the tools that provide.

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

For Educational Web purpose my group had chose LMS. Like blog, LMS also provide tools that can be used to manage the learning site.

Sila klik gambar untuk tumbesaran sihat.






After done with the presentation, we continue the lecture with Types of Website.There are several types of website that I had learned.

1. Informational Sites - Provide information about a particular subject or organization.
2. Transactional Sites - Use to conduct some transaction. Example: E-commerce site.
3. Community Sites - Focus on particular topic or type of person and encourage interaction between like minded individuals.
4. Entertainment Sites - For game playing, music or movie.
5. Commercial - Built and run by an organization or individual commercial gain, either directly through e-commerce or indirectly through promotion for some off-line purchase of goods or services.
6.Government - Purpose of this site is to satisfy some social or legal need.
7. Charitable - To promote the goals of non-profit organization or the charitable activities of individual or organization.
8. Personal - Site exists at the sole discretion of some person or group for any number of reasons usually as a creative outlet or form of personal expression.
9. Visual Groupings which consist of:

  • Text oriented - Focus on textual content. Example: Wikipedia.
  • GUI Style - Follow certain graphical user interface (GUI) conventions from software design such as top-oriented menu bars, icons and pop up windows. 
  • Metaphorical - Borrow ideas from "real life". Example: Test drive for car, museum website.
  • Experimental - Attempt to do things a little differently then norm. This site employed unpredictability, innovation and even randomness.
Sila klik gambar untuk tumbesaran sihat.






That all. Thank you.

Wednesday, September 18, 2013

Week 1: Briefing(12092013)

Hello and Hai, 

As usual, first class in first week was for Course Outline Briefing. This semester, this course will be teach and guided by Dr.Noraffandy Yahaya and Dr.Noor Dayana Abd Halim. But, for this first class it was conducted by Dr Noraffandy. Next class will be by Dr.Noor Dayana. 

According to synopsis of this course, I the student will be exposed to some state-of-the-art communication technology tools which is the Internet and how can use the Internet efficiently in teaching and learning. In the same time, I will have a chance to develop interactive teaching and learning webpage. (I am able to develop webpage but I am not sure whether I am able to develop interactive teaching and learning webpage as I am not so creative to make the webpage become interactive.. ) A big BUT here, in order to take this course which is MPT1393: Web Based Multimedia Development, student must take MPT1193: Authoring System which the pre-requisite subject to MPT1393.

For this semester, it consist 18 weeks which include Mid-semester Break and Exam weeks. I will update from time to time on what had I learned in this class. For evaluation, there are seven(7) assignments and one(1) final exam which carry 30% out of 100%. So, that mean assignment will carry 70%. Actually, now we can come up with proposal. The proposal must be presented and getting approval  before we can proceed with the development. In Assignment 4 we need to present half which is 50% complete and the other half is in Assignment 5

Please click on those pictures so that you make them "grow" and clear. :)






Assignment



Web Project will be done in group. It is expected that the website should be contain the following aspects:
Application of active learning strategies, Interactive application involving storage of user input data into database, Integrating all elements of multimedia (video, audio, etc), dynamic, educational and have commercial quality

Then, the marking will be based on technique in presenting the learning contents, interactive element, artistic values (I am afraid of this), creativity and originality and last but not least technical aspect.

Move to Design Documents, which documents that are needed before and during the development. This document should include learning problems which problem that consist in learning.. teehee... solutions to learning problems, learning objectives, content of the website, target group (primary or secondary students and university students or maybe teachers?? ), instructional design model used, theory/learning approach that will be used, flowchart and references or resources. DO NOT FORGET ABOUT FINAL REPORT. :)

There is also individual assignment which the evaluation form for website development. It will consist suitability of learning strategy, suitability of interface design, suitability of interaction design, motivational development, website features or strength and the weakness of the website. 

Apart from that, I the student need to do reflection and I choose blog to deliver my reflection. It will be focused on personal blog development and this blog is my 3rd blog actually. In blog, it must contain a page of my personal details, revision notes that had been used throughout this course, work or activities such as presentation, assignment which conducted during class and self reflection section about skills and knowledge that have been obtained from this course. During this class we have been told that this course will be repealed if the new course is being approved. The new course will be focused more on apps development and it will begin in 2014. 

I think that all for now. Thank you.