HSC Preliminary IPT Web Design Project

Ross Parker16661077

HSC Preliminary IPT Web Design Project

Contents

Introduction

Teacher’s Role

Syllabus Links

Syllabus Outcomes

Lesson Outcomes

Project Sequence

Lesson 1

Lesson 2

Lesson 3

Lesson 4

Lesson 5

Lesson 6

Lesson 7

Lesson 8

Lesson 9

Lesson 10

Lesson 11

Lesson 12

Lesson 13

Lesson 14

Lesson 15

Lesson 16

Assessment Sheet

Appendix A - Understanding The Problem

Appendix B –Model Internet Diagram

Appendix C –Sample Site Template

Appendix D – Project Comparison Chart

Appendix E – Photo Game No 01

Appendix F – Team Primer

Appendix G – Project Management Primer

Appendix H – Client Minimum Requirements

Appendix I - Team Report Framework

Appendix J – PortableApps for Web Development

Introduction

The project is designed to be run over 4 weeks of the Preliminary part of the HSC Information Processes and Technology course, and aims to give students hands-on experience with website development. Students will work in teams (not groups) of 4, each of which will produce a site and a report which will be compiled throughout the project. As students progress, they will also accumulate individual marks.

The aim of this project is to provide a significant challenge, which students will need to work hard to overcome. The skills to be learned (web development process, team work and using Drupal CMS) are extremely valuable real-world skills.

In order to try and engage the students, the project will be real-world based, and will expose the students to technologies they most likely will not have encountered before. The table below shows some of the differences between a normal project, a real world ICT project and this project (which aims to strike a middle ground):

Normal School Project / Our Project / Real World Project
Teacher / Teacher + Client / Client
Didactic / Dialectic / Dialectic (Socratic)
Imposed outcomes / Negotiable imposed outcomes / Negotiated outcomes
Clear guidelines / Framework / No guidelines
Group / Team / Team
Simulation / Real / Real
Grades / Grades + Altruism / Payment
Fixed life / Fixed life + continuation / Open-ended
Convergent / Convergent & Divergent / Convergent & Divergent

The aim of the project will be to redesign the school’s brochure website (this is the site that advertises the school to visitors), but other design briefs can be substituted. The client will be the school’s IT Committee. The requirements will not necessarily be for a complete site, but for the beginnings of a site whose completion can be tackled as an ongoing work.

Teacher’s Role

The teacher will assume the following roles:

Mentor - the students will be given instructions, outcomes and hints in starting the project but will then work relatively independently. The teacher will monitor progress and provide input either due to requests from the student, or as needed.
Client intermediary – the teacher will gather requirements and resources (images, etc) from the client, and prepare and present these to the students.
Technical advisor – the teacher will provide scaffolding within a new set of technologies so that students will be able to get the work done and learn new skills.
Technical infrastructure – the teacher will provide a development server that students can use for the project.

Syllabus Links

The project will constitute the Planning, Design and Implementation section of the preliminary course, which is described as follows:

New information systems are created when old systems do not adequately meet the need of users of the information system, or when a need exists that could be met by an information system. The success of a new system depends upon how well the problem is understood, how the system is designed, how it is tested, evaluated and maintained over time. This topic introduces students to the traditional method for developing systems. Alternatives to this model are presented in the HSC course.

Syllabus Outcomes

It is intended that the project will at least touch on all of outcomes for the Preliminary course (listed below), and will more fully consider those highlighted in blue:

knowledge and understanding of the nature and function of information systems
describes the nature of information processes and information technology
classifies the functions and operations of information processes and information technology
knowledge and understanding of interrelationships among information processes
identifies the information processes within an information system
recognises the interdependence between each of the information processes
an understanding and appreciation of social and ethical issues pertaining to information systems, technologies and processes
identifies social and ethical issues
an understanding and appreciation of the emerging nature of information systems, technologies and processes within a historical context
describes the historical development of information systems and relates these to current and emerging technologies
skills in the discriminatory selection and ethical use of appropriate resources and tools to support information systems
selects and ethically uses computer based and non-computer based resources and tools to process information
skills and techniques to creatively and methodically plan, design and implement information systems to address needs
analyses and describes an identified need
generates ideas, considers alternatives and develops solutions for a defined need
skills in management, communication and teamwork in relation to individual and group activities
recognises and applies management and communication techniques to project work
uses technology to support group work

Lesson Outcomes

The key skills areas in Planning, Design and Implementation outlined below:

•Understanding the problem to be solved

•Making decisions

•Designing solutions

•Implementing

•Testing, Evaluating and Maintaining

•Social and ethical issues

These relate to the following lesson outcomes:

Understanding the problem to be solved

Students learn about: / Students learn to:
•understanding the purpose
•approaches to identify problems with existing systems, including:
–interview/survey users of the information system
–interview/survey participants
–analysing the existing system by determining:
- how it works
- what it does
- who uses it
•user requirement reports
•project plans incorporating project management tools including:
–Gantt charts
–scheduling of tasks
–journal and diaries
–funding management plan
–communication management plan / •select and apply surveys and interviews, with the support of information technology, in order to understand the problem to be solved
•diagrammatically represent existing systems using context diagrams, data flow diagrams and systems flow charts
•define the requirements for a new system in terms of:
–the needs of the users of the information system
–who the participants are
–the data/information to be used
–required information technology
–information processes
•produce a report stating the need, and how an information system will meet it

Making Decisions

Students learn about: / Students learn to:
•estimating the cost of proposed solutions
•determining if the required technology exists
•determining the time frame by which the new system must be operational
•selecting the most appropriate option
•identifying concerns of participants, users of the information system and people in the environment / •create Gantt charts to show the implementation time frame
•investigate/research new information technologies that could form part of the system
•consider and justify the feasibility of a solution based on
–cost
–technical feasibility
–available time for implementation
–its alignment with the current goals of those the system is for

Designing Solutions

Students learn about: / Students learn to:
•identify participants, data/information to be used, information technology and how the information processes will operate
•ways to ensure participants’ concerns are addressed and the system design is human centred
•clarifying with users the benefits of the new information system
•designing the information technology so that it is easy to maintain in the future / •represent the new system diagramatically
•document the relationship between the new system, user of the information system and their need(s)
•analyse and customise user interfaces and other tasks in applications software forming part of the solution

Implementing

Students learn about: / Students learn to:
•methods of implementing new solutions, including:
–parallel conversion
–direct conversion
–phased conversion
–pilot conversion
•implementing training for the participants in the system / •compare and contrast conversion methods
•justify the selected conversion method for a given situation
•convert from the old system to the new
•implement the appropriate information technology
•demonstrate participant training of the new system
•identify the training needs of users of the information system

Testing, evaluating and maintaining

Students learn about: / Students learn to:
•testing the new system to see that it meets initial requirements
•reviewing the effect on users of the information system, participants and people within the environment
•modifying parts of the system where problems are identified / •evaluate information processes in relation to adequate performance and design and implement modifications
•compare the new system to the requirement report

Social and Ethical Issues

Students learn about: / Students learn to:
•machine-centred systems simplify what computers do at the expense of participants
•human-centred systems as those that make participants’ work as effective and satisfying as possible
•how the relationships between participants change as a result of the new system
•ensuring the new system provides participants with a safe work environment
•awareness of the impact the system may have on the participants:
–opportunities to use their skills
–meaningful work
–need for change
–opportunities for involvement and commitment / •design human-centred information systems
•identify human-centred and machine-centred information systems and describe the impact each has on its participants
•develop systems that pay as much attention to the needs of participants as they do to information technology

Project Sequence

Week 1 - Foundation

Lesson 1 – quick introduction to the project, the structure of the web, html and 3 approaches to developing websites: hand coding, WYSIWYG, Content Management Systems (CMS).
Lesson 2 – students to work out meaning of HTML and CSS in provided site template, and consider problems involved in coding this and how WYSWIYG may be easier. How does this relate to the information process?
Lesson 3 – how is this project different? Introduction to team work, team member roles, project management, announcement of teams, and the expected team report structure/content.
Lesson 4 – Introduction to Drupal and the development environment (including how to access it via FTP).

Week 2 –PlanningDesign

Lesson 5 – teams introduced to the project requirements and teacher scaffolds students in beginning work in Drupal (selecting a theme, creating user roles, installing modules and creating structure). Students to consider cost and time aspects of the project.
Lessons 6 – teams to work towards coming to grips with the Drupal environment, as well as beginning to build the site. Introduce project sequence from syllabus.
Lesson 7 – planning and Gantt chart. Students continue to work on Drupal environment.
Lesson 8 – produce site map diagram.Students continue to work on Drupal environment.

Week 3 – Review & Implementation

Lesson 9 – teams to demonstrate work to teacher in order to review progress and plan further work.

Lessons 10 – teams to work towards completing their sites and to consider conversion method.
Lessons 11 – teams to work towards completing their sites and to consider user concerns with a new system.
Lessons 12 – teams to work towards completing their sites and to consider ethical issues with a new computer system.

Week 4 – Presentation & Individual Review

Lesson 13 – final preparation to present sites to the client, as well as to the rest of the class. Teams also need to focus on their team report, which will be due in after the end of the project.
Lesson 14 – client presentation and initial feedback of client to students.
Lesson 15 – announcement of final product selection by client, and students to begin working on their individual review of the project.
Lesson 16 – overflow/debrief.

Lesson 1

Lesson overview:

Introduction: to the project
Analysis: of current solution
Technical knowledge: the structure of the Web: what is a website?
Solution approaches: 3 approaches to developing websites (hand coding, WYSIWYG, content management systems).
Closing: next lesson will look at first 2 approaches in more detail.

Preparation

Convert Appendix A into standalone document.
Download Model Internet Diagram (Appendix B).

Syllabus Outcomes:

6.1 analyses and describes an identified need

Lesson Outcomes:

Students learn about: / Students learn to:
•understanding the purpose
•approaches to identify problems with existing systems, including:
–interview/survey users of the information system
–interview/survey participants
–analysing the existing system by determining:
- how it works
- what it does
- who uses it

designing the information technology so that it is easy to maintain in the future

Lesson Sequence

Section / Sequence / Assessment
Intro
(5 min) /

Get students seated, but not logged in.
Tell students that we are starting a new project that aims to meet the “Planning, Design and Implementation” part of the syllabus through to redesign of the school website. Ask students to volunteer ideas on what is good and bad about school projects and write these on the board. Let students know that participation in such discussions will count to their final grade, which will be composed of three elements:
Website produced as team
Report produced as team
Individual marks from participation and ongoing assessments.
Explain to students that this project will be different, and that more details will come in the third lesson, but first there is some field-building to go through.

Main
(50 min) /

Analysis:Ask the students to spend a few minutes looking at the current website. Using Appendix A to create a record (projected on a screen), ask students to contribute ideas on the following issues and link this into the idea of requirements gathering.(15 min)
Who is the website aimed at?
What is good and bad about the current website (in terms of how it works, what it contains and who it is aimed at)?
How might we find out what the website should be (surveys, interview, analysis, comparison to other sites)?
Technical Knowledge: show students the Model Internet Diagram (Appendix B) and ask them if they can describe how the Web functions. If they cannot, provide them with the following:(25 min)
User requests a website in their browser using aURL, which most likely contains adomain name.
The browser uses a DNS server to convert the domain name into an IP address.
Using HTTP, the browser sends requests to the web server at the specified IP address to obtain all of the parts the item specified in the URL.
The web serverresponds by sending the requested files or, if they there is a problem, an error message.
The user’s browser displays the files or the error message.
The files can be of many different types, but most commonly are HTML, CSS and media files.
In theory:
an HTML file will describe the content to be displayed, including all text to be displayed, and the location of other media to be used.
a CSS file will describe how the content defined in an HTML file is to be arranged and styled.
media files (images, flash, audio, video) will either be displayed on their own, or shown in a way described in an HTML file.
These files are generally created by website developers and graphic designers, and placed on the web server using FTP.
Solution approaches: ask students to share any web development experience they have. Can they identify and describe the following three approaches? (10 min)
Hand-coding
WYSIWYG
Content management system (CMS)

/ Student participation (record a mark out of 10 for each student in the assessment sheet)
Closing
(5 min) /

Tell students that next lesson there will be more detail regarding hand-coding and WYSIWYG. Ask them if they have any questions

Follow-up

Make completed review notes and Appendix A documentation available for students on VLE.

Lesson 2

Lesson overview:

Students to work out meaning of HTML and CSS in provided site template, and consider problems involved in coding this and how WYSWIYG may be easier. How does this relate to the information process?

Introduction: to HTML and CSS
Analysis: of sample site template
Consider: issues in producing HTML and CSS and how WYSIWYG may help.
Identify: the information processes involved in the school website
Closing: next lesson will look at project in more detail.

Preparation

Download Sample Site Template (Appendix C) and place on VLE.

Syllabus Outcomes:

2.1 identifies the information processes within an information system

Lesson Outcomes:

Students learn about: / Students learn to:

selecting the most appropriate option

investigate/research new information technologies that could form part of the system

Lesson Sequence

Section / Sequence / Assessment
Intro
(5 min) /

Tell students that today’s lesson:
Is very difficult
Requires curiosity, persistence and imagination: some of the most valuable skills in ICT.
Has extension material if anyone wants a very serious challenge.

Main
(50 min) /

Analysis:(40 min)
Teacher to question students if they remember what HTML, CSS and media files are (from Lesson 1).
Teacher to explain difference between HTML and XHTML.
Students to download and extract a copy of the Sample Site Template from the VLE.
Teacher asks students to use their prior knowledge and the Internet to try and discover how the website shown in the template is organised in terms of HTML, CSS and media files.
Students are to present their work in a word processed document titled “HTML/CSS Example Analysis”, with two parts:
Description of how the 3 elements (HTML, CSS, media) work together to produce a site.
Code examples showing elements of the code with explanations of what they are.
The teacher may wish to prompt students with some of the following: style guide shows how the page is laid out, use of comments in HTML and CSS, Use of indentation, use of transitional XHTML, modern approach: separation of content (HTML) and style (CSS).
Students to complete for homework.
Consider: whilst students are working the teacher should elicit opinion from them as to whether they think it is sensible to create websites by hand-coding in this method. Do the students think WYSIWYG might be better? Why? Can they think of any alternate solutions (e.g. CMS).(5 min)
Identify: ask students to identify, in discussion,how the seven information processes (collecting, organising, analysing, storing and retrieving, processing, transmitting/receiving, displaying) relate to a fully functioning school website.(5 min)

/ HTML/CSS Example Analysis document which students are to complete as homework (record a mark out of 10 for each student in the assessment sheet)
Closing
(5 min) /

Tell students that next lesson there will be more detail regarding the project, and how it is to be approached.

Follow-up