To be successful the project must function in the following ways;
To be aesthetically successful, this project must;
The first of these criteria is to some extent out of my control. The level of computer implementation varies markedly in schools throughout the state, and undoubtedly some students will have better access than others. Having said that, this project is mainly about creating a resource that I can use in my teaching practice, so it will be up to me to make sure my students can access this material. It is also possible to set the WebSchool site up on a School's intranet, so it will run within the school network only.
Ease of navigation and usability are paramount in any web-based application. Most web applications are self explanatory, user can work out from on-screen prompts and instructions what to do. A good goal is to make any piece of information no more than two, or at most three clicks away from the home page. The home page has links to the three main sections (Getting Started, Looking Good, Code Warrior) as well as the contact page and the Teacher Zone. The main page for each section has a list of links to each tutorial or exercise down the left hand side, and a list of theory topic links down the right hand side. This is a change from the tunnel architecture shown in the preliminary map diagram, where one had to proceed sequentially through each exercise in turn; all the exercises are now available straight from the main section page.
The site does indeed provide a graduated series of learning experiences; the only drawback is that there is quite a gap between the standard of section 1 (Getting Started) and section 2 (Looking Good). This was unintentional, and will be addressed by adding more pages to section one filling in the gaps in required knowledge for section 2.
The hands-on component of the site is pretty substantial. I have focused on the essential tools needed to complete the task. Often there are multiple ways of achieving the same goal, each with their own advantages and disadvantages. As the site evolved, I found I needed to choose and describe the best or most appropriate method and not add in superfluous discussion about unused options, even though any full study of the topic should be comprehensive. The idea of building something, even something intangible like a web page appeals to most students, whereas conceptual models of data structures and protocols can be intimidating and counterproductive.
I have provided a suggested site for further learning for each section. Again, rather than present too many choices, I chose one or two good resources to provide extension material for each section.
This site is designed using the same techniques presented in the lessons. In particular it makes use of CSS2 to layout the pages. This separation of the design and layout (called the presentation layer and stored in a CSS file) from the content and structure in the HTML page is a cornerstone of good web-design practice. In section three there is a third layer, (the logic layer stored in a PHP file). It is because the site is designed with these forward-looking methods that an up-to-date browser is required.
The first impression a visitor gets to the site is created by the splash screen, so I spent some time designing the main graphic. It is made up of 12 separate images, some of which are repeated and transformed. The impression I want to give is of simple, clean lines, and an abstract appearance where you can see patterns among the various shapes that comprise the design, but no discernable or recognizable images. I think this helps reflect the nature of the lessons inside the site.
Elements from this main graphic are reused as design elements throughout the site, to create a consistent appearance; tiny WebSchool logo appears in the header of each page to brand the site.