Tuesday, March 30, 2010

Reflection on developing a website using PHP (5)—Instructional Design

Developing instructional multimedia website is seldom an individual effort. Typically, several people work together to create projects that involve more than just text and graphics but instead involve a pedagogically sound design with interactive exercises and activities as well as assessments and communication approaches that facilitate teaching and learning.

So usually there will be a development team, in this team, different people are in charge of different aspects of the website. That is necessary that we have: Producer/Project Manager, Art Director/Visual Designer, Script Writer, Instructional Designer/Training Specialist, HTML Coder… but for a small project, maybe one person could be responsible for many parts.

Instructional Design is the systematic process of translating general principles of learning and instruction into plans for instructional materials and learning. It includes development of instructional materials and activities; and tryout and evaluation of all instruction and learner activities.



Examples of ID model:

􀂙 ADDIE Model

􀂙 ASSURE Model

􀂙 Dick & Carey Model

􀂙 Hannafin & Peck Model

􀂙 Waterfall Model

􀂙 Rapid Prototyping Model

􀂙 etc…..

For our website, we choose ADDIE model for Instructional Design.

Phase 1: Planning/Analysis

􀂙 needs/requirements ?

􀂙 “brainstorming”: b a s o g : who, what, why, where, when & how?

􀂙 Audience analysis: Who is it for?

􀂙 Needs analysis: Why develop it?

􀂙 Content analysis: What will it cover?

􀂙 Resource analysis: How and how much?

􀂙 Estimate: When will it get done?

􀂙 Where: platform, marketing and distribution?

We discussed these questions before we started to create this website and summarized it in the proposal report (the objectives, target users…).

Phase 2: Design

􀂙 What’s the difference between analysis and design?

􀂙 Storyboards: design content as sequence of scenes or screens.

􀂙 Scripts: design content in textual form.

􀂙 Flowcharts: show navigational structure.

􀂙 Design in detail before programming/authoring!!

For design part, we first choose a temple, but after the first 40% presentation, our “target users” and the “experts” in this field suggest us to consider our visual design. Considering the suggestions from them, we changed our design. Actually, it is a process of creatàchangeàrecreatàchange…

Phase 3: Development

􀂙 Who will be involved in this project and what responsibilities will each person have?

􀂙 Authoring or programming of the project.

For our own website, we choose Dreamweaver PHP to develop our website. Even though most parts of the job could be finished by using the edit panel, but sometimes we really need to know some basic coding to solve some of problems, especially when you choose a temple instead of creating your own layout.

Phase 4: Implementation

􀂙 How is multimedia development different from systems programming?

􀂙 Why is prototyping a good idea?

􀂙 Programming uses authoring tools

􀂙 Media development involves special tools for graphics, sound, video, etc.

􀂙 User testing, user observations and focus groups

For this part, we use self-check and group check about the content, navigation, interface .

Phase 5: Testing & Evaluation

􀂙 How will you know if the instructional objectives have been achieved?

􀂙 What method will you use for collecting feedback from the users of the software regarding the interface, sequencing of information, and its content?

􀂙 Formative & Summative

For the Formative Evaluation, during the developing process, we got some kindly opinions from students from other departments and our friends. And after finish this big project, we create a questionnaire to do the Summative Evaluation from field experts and peers.


For more information, you can follow the following link to see a useful website about instructional design.

http://www.instructionaldesign.org/

or watch the following video:



Monday, March 29, 2010

Reflection on developing a website using PHP (4)--Some basic but useful techniques for designing.

This time, I will reflect some basic and useful techniques. If you want your website to be professional, maybe you can try these in your website.

1. Refresh the page:

When the user fails to register or login, you can show the fail page then refresh the page to let user the login or register again. You also use this technique in other suitable places.

Steps: Go to InsertàHTMLàHead TagsàRefreshà Browse the destination page.

2. Restrict to the page:

If you want users to login before they can access to the information provided in your website, you should restrict users to the page.

Step1: First you should create the page, finish the form, table or text field.

Step2: Go to server behavioràuser Authentitationàchoose “Restrict Access to page”àin the pumping window choose restrict based on “username and password”.

3. Go to the detail page(hyperlink):

If you have a list of items, and you want users to go to another page to get more information, then you can use “go to the detail page”.

Step1: Highlight the part you want to change into a hyperlink.

Step2: Go to server behavior and choose go to the detail page. In the bumping window, choose the page you want users to go and set the URL parameter as “ID”.

4. Update page and Delete page:

We create the update page in order to update users’ data and at the same time, as a admin, we also can delete the information that is not appropriate.

Step1: First you create an update page. Insert the table, form and text field as the registration page.

Step2: Create recordset. (Filter: ID)

Step3: Binding. (Drag the recordset to the proper text field.)

Step4: Insert the update button (or delete button).

Step5: Insert àFormàHidden field (value: id) (Annotation: for ASP.)

Step6: Server BehavioràUpdate record (or delete record).

These are the techniques I found during the review process, I hope I can review it when next time I look through my blog. Next time, I will discuss the problems that I came across during the developing process.

Reflection on developing a website using PHP (3) --How to create a questionnaire.


Create a questionnaire online is convenient for users to evaluate you website constantly after they browse your website. From the questionnaire, you can get the feedback from the user and modify your website to be more user-friendly and demand-oriented.

The following are steps we create a questionnaire online:

Step1: Create a questionnaire page. Insert the form, table and questions in the layout you like.

Step2: Go to insertàFormàRadio Group. In the radio group window, name the first question for example: Q1. And change the label and value to 1, 2, 3… if you want to add more value, just press the button “+”.

Step3: For genderàInsert àFormàList/Menu.

Step4: Create another table in database for the questionnaire.

Step5: Insert Record to questionnaire table in database.

For the online questionnaire, as an admin, you can see the data from the database or you can create a review page for admin. For next topic, I will discuss how to block a page, refresh a page or update a page.






Reflection on developing a website using PHP (2) --Create the login, registration and view page.

1. Create and connect the login and registration page:

For the login and register page, they are usually created considering the security.

Step1: Create a new page.

Step2: Insert form, table, and text field. (Place the tables as you like)

Step3: Edit every text field through property panel. (the name, length, type…)

2. Write a data into the database using the Insert Record:

Insert Record is a server behavior that will be used to store data into the database file.

Step1: Server Behavioràpress plus “+”buttonà Insert Record.

Step2: Select the connection you have created before.

Step3: Make sure each text field get a value or each value will be inserted into the correct field in the database.

3. Create the view page:

View page means reading or viewing a data from a database using the Recordset. The recordset is a server behavior that will be used to read back from a database file.

Step1: Create a new view page.

Step2: Create a layout using the form, table, and text field.

Step3: Go to server behavioràpress plus “+”àRecordset.

Step4: Choose the right name, connection and table.

In columns: choose “all”

In sort: choose “Ascending”

Step5: After testing, click ok.

4. Binding:

Go to Binding, press plus “+”button, and choose Recordset. You can see the existing Recordset created before. Click “+”sign which is in front of the Recordset, you can see all the fields in the database. Drag them into the proper place in the view page. Draw a line under the table and highlight the table and the lineà Server Behavior à “+”àrepeat region. In the window table, choose Recordset and show the all records.

For a website, login page and registration page are not a necessity. Usually, it will depend on the goal of the website. Educational websites usually don’t set the login page because the main purpose of this kind of website is to educate people and to give knowledge.