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:

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.

Reflection on developing a website using PHP (1) ---Insert Database

In order to finish the project for web-based multimedia development, I reviewed what I had learned about Dreamweaver. Now I will make a summary about the process for develop this website with the purpose that it could be beneficial for both consolidating the knowledge and future study need. Because it is a really tedious job, so I will focus on different part each time.

1. Create a new site:

Step 1: Create a new site (siteànew site)

Step2: Name you site name: URL: localhost/project/

Step3: Use a server technology: PHP.MyAQL

Step4: Save the site: C: /xammp/htdocs/project (PHP)

Annotation: C: /inetpub/wwwroot/project (ASP)

2. Set up a batabase:

Step1: Open http://localhost/xammp/splash/php

Step2: Choose PHP.Myadmin and set the username and password.

Step3: Press the button to create a database: name should be related to the website theme.

Step4: Create the table (the number of name, field…).

Step5: Choose the suitable properties for each item. (type, null, extraàauto-increment for ID).

Annotation: (For ASP)

Step1: Open Microsoft accessà click at Black Database.

Step2: Save it at C: /inetput/wwwroot/data

Step3: “Create” buttonànew table.

Step4: Create the fields in the table. (Memo date type can hold characters more than text)

Step5: View databaseàDesign viewàdatabase.

3. Set up a connection:

Go to database and press “+” and choose “MySQL connection”. And then fill the following table. Input the connection name that you want and input the localhost in "MySQL server " table. Input your admin username and password. At last, choose the database you created in MySQL. Then first test, if it is successful, click ok.

Annotation: Create a website with ASP, you should choose “Database”àplus”+”àCustom Connection string.

Following you can see a tutorial about PHP basics. I hope it will be useful for you.

Assessment Tool---Rubrics

After last post, some friends want to know more about the evaluation tools. today i will introduce one of the tools---Rubrics. It is a tool that i am not familiar with before, so i searched for the information and now share with you.

What is rubric?

• A printed set of scoring guidelines for evaluating a performance or a product and for giving feedback.
• An authentic assessment tool used to measure students' work.
• A way to let a student know --
• How his/her work will be judged.
• The difference between good work and weaker work.
• A working guide for both students and teachers.

Of course, it also can be used for assessing or evaluating the website.

What are the critical components of a rubric?

• A title which describes the purpose of the rubric.
• Performance Element: the major objectives, critical task or attributes to be completed.
• Scale: the possible range points to be assigned (high to low)
• Criteria: the condition of a performance that must be met for it to be considerede successful
• Standard: a description of how well the criteria must be met for the performance to be considered "good."
• Descriptors: statements that describe each level of the performance.
• Indicators: specific, concrete examples of tell-tale signs of what to look for at each level of the performance.

What should a good rubric do?

• Address all relevant content and performance objectives.
• Define standards and help students achieve them by providing criteria with which they can evaluate their own work.
• Be easy to understand and use.
• Be applicable to a variety of tasks.
• Provide all students with an opportunity to succeed at some level.
• Yield consistent results, even when administered by difference scorers.
• Be useful for student feedback (formative assessment).

The steps of website evaluation:

1. Decide What to Evaluate ?

It depends on the stage of a project and the goals. Such as: ideas and concepts, designs, prototypes, implementations, and products in use.

2. why do we need to evaluate the website?

To ensure functionality (effectiveness) and performance (efficiency), to see the Customer / User acceptance, to Identify problems and improve development life-cycle. In a word,evaluating websites means determining whether

or not they are “good”.

3. Levels of Web Evaluation:

􀂃 Formative Evaluation

􀂃 Summative Evaluation

4.Evaluation Techniques:

􀂃 Formal & Informal

5. Web Evaluation Tools:

􀂙Observation, interviews (Structured/NonStructured)

􀂙Surveys/Questionnaires Focus Groups Analysis Reports, and Dialogue with Users

􀂙Form, Checklist or Rubric

6 Evaluation Procedures:

1. One-to-One:

2. Small-Group Evaluation:

3. Field Testing:

Reflection on Website Testing.

It is very important and necessary to test your website or application before you publish it to the web or internet. Why? The answer is very simple. Just think if you find some mistakes after publishing it, what’s the effect and impression it will be on users? It is not hard to predict. More important, as a professional website developer, such simple mistakes surely should be avoided.

There are many different kinds of testing according to the levels and stages your website is considered.

Self-testing and Group-testing:

The first phase of testing is the self-test to ensure the functionality of the following features and elements:

􀂃 Page display

􀂃 Image display

􀂃 Navigation elements

􀂃 Interactive & dynamic elements

􀂃 Internal links

􀂃 External links

Group-testing involves recruiting a small group of people representative of your audience to test your website. They could give you better ideas of how your audience will respond to your website. You can ask the individuals to express their candid opinions about their experience: Ask questions such as:

􀂃 Did they find the website interesting and easy to use.

􀂃 What helped or hampered navigation

􀂃 What kind of problems and obstacles do they face

􀂃 What could improve the website

􀂃 What should be added or deleted

Alpha vs Beta Testing

when it is done by the development team it is called alpha testing and when by the client side people it is called beta testing.

Alpha Testing: Testing a software/website product which is not the final version. This website does not have to necessarily contain the full functionality required for a website however core functionality to accept input an generate output is required.

Beta Testing: Beta Testing is last stage of testing where a product is sent outside the company or offer the product for free trial download/use.

Types of Errors

When we test our website, we should have a clear purpose and goal. What should we test? What parts should we focus on? There are usually three kinds of errors which need us to pay attention to. They are:

1 design flaws

2. content errors

3. Software/system defects

Types of Testing

Several kinds of testing are appropriate for websites, including the following:

􀂃 functionality

􀂃 layout testing

􀂃 load testing

􀂃 link testing

􀂃 usability testing

At last, no matter what kinds of testing you choose to use for your website, a test plan is usually needed, especially for a complicated website.

Reflection on the 40% Presentation

In the presentation process, the lecturer handed out some paper to write down the suggestions for other groups. i found it is a very good way to learn from different perspectives. when you try to give suggestion to other groups, you will think about yourself at the same time. for example, when you find a weak point of other group, you will review your own website, whether you have the same mistake. when the lecturer gave his opinion, you would also think whether you can apply it in your website or not.

At the same time, i learned something new about how to apply what you have learned into your own project. such as the use of multimedia design. how to use video or graphics to make your website more attractive. this is the things you can't learn just by reading.

The problems of our group are as follows:

First, we should add more graphic, animation or video to make the website more attractive.

Second, we should fill the content of the website as soon as possible.

Third, we should improve our visual design.

But for the login usage, we will think about it. Generally speaking, for the educational website, it is not suitable to set login page in order to serve the learner in a large degree, but for this project, for my own opinion, it is not a big question.

Information Related to Group Work:Technology-based learning environment

Students may choose to research, design and produce an educational multimedia environment, website, video program, or combinations/integrations of these. Students work through the instructional design process, which must be fully documented. IDPhase I, is the analysis/needs assessment, on the basis of which a theoretical framework is established and a review of relevant literature is conduced. In ID Phase II, students develop the design document. In Phase III, students produce a significant portion of their project as a prototype that clearly demonstrates key design principles. Students are encouraged to pace their work to allow for an informal formative evaluation of early design considerations. ID documentation of Phases I and II is approximately 25 pages in length, typically with attachments such as scripts, flowcharts, wireframes, etc.

In a summary: the process will be:

Step1: analysis / need assessment

Step2: establish theoretical framework and review literature

Step3: develop the design document

Step4: produce a significant portion of their project as a prototype

But, my question is how to conduct analysis /need assessment?