Create/Manage Accessible Websi
Run by School of Computer Science and Electronic Engineering
20 Credits or 10 ECTS Credits
Semester 1 & 2
Overall aims and purpose
This module will enable learners to use a suitable mark-up language (e.g. HTML5) and style sheets (e.g. CSS3) to create a standards-compliant, accessible website which complies with a given brief. Learners who have completed the “Designing Accessible Websites” module will use the design that they completed for that module (first correcting any shortfalls of that design). A tutor-written brief can be supplied to learners who have not completed the design module.
The development process is carried out using a simple code editor in order to maximize learners’ understanding of the underlying code and reduce their future dependence on specific software tools. An overview of alternative web development software (WYSIWYG, enhanced text-editors, content management systems) will be given towards the end of the module to inform the learners’ approach to future developments.
The website will be tested for correct function and validated against relevant standards. The learners will upload the website to a server to ensure they understand the full development and deployment process.
Technical documentation will be produced to facilitate future maintenance of and changes to the website.
● HTML basics. File formats, document types, language and character encoding, document structure tags (e.g. <html>, <head>, <body>, <p>, <br>, <a>, <img>, comments), file naming, case-sensitivity, absolute / relative references
● CSS basics. Inline styles v. internal style sheets v. external style sheets. CSS code syntax, comments
● HTML semantics. Meaning of tags e.g. <h1>, <h2>, <p>. Normal document flow.
● CSS positioning. CSS box model. Floats. Static / fixed/ absolute / relative positioning. Z-index.
● Code testing and validation. Iterative development.Typical errors and how to find / eliminate them.
● Using third-party code. Copyright. Adapting to target website. Validation issues.
● Overview of webservers. Local development servers. Windows v. Linux hosting.Domain and site hosting. Uploading site content using FTP.
● Alternative web development software (WYSIWYG, enhanced text-editors, content management systems)
Website is uploaded and in most respects functions as planned. There may be some minor errors. The site uses HTML & CSS at a basic level. The site contains at least one rich media element. The development commentary is adequate but may lack detail. All HTML and CSS code has been successfully validated.
There is evidence of an iterative development approach. The technical manual is basic and may lack some expected elements. The site evaluation is largely descriptive with no third party involvement.
Website is uploaded and functions as planned. Changes to the design are explained. The site uses HTML & CSS including some more advanced features. The site includes rich media content that required alterations / manipulations to fit the site. The development commentary is more detailed with appropriate use of screenshots and/or other graphics.
There is evidence of substantial testing including third-party involvement and multiple web browsers. The technical manual has expected content but its structure / presentation may be sub-optimal. The site evaluation is more detailed. There may be some third-party involvement but this may not have been used effectively.
The website functions as intended and has a professional (or near-professional) appearance. The site uses HTML & CSS to a high level. Advanced features are used appropriately throughout the site. The HTML & CSS code is neatly presented and includes appropriate comments. The site includes the appropriate use of multiple types of rich media. The development commentary is well-structured and presented. It provides evidence of independent learning.
Testing is comprehensive and well-documented. The technical manual has expected content with a clear structure and a professional or near-professional standard of presentation. The site evaluation is comprehensive and incorporates third-party input in a meaningful way.
- Develop a website to a given brief using a standards based mark-up language and control its appearance / layout using style sheets.
- Plan and implement testing and validation to demonstrate correct function and standards compliance.
- Deploy the website to a web server.
- Create documentation to facilitate ongoing maintenance and future changes to the website.
- Evaluate the website against the design brief
Teaching and Learning Strategy
The classroom-based element will include student-centred learning methods such as interactive lectures, case studies, group discussions and practical workshops.
The tutor directed student learning will be supported by online learning materials hosted or signposted on the Grŵp VLE.
- Literacy - Proficiency in reading and writing through a variety of media
- Numeracy - Proficiency in using numbers at appropriate levels of accuracy
- Computer Literacy - Proficiency in using a varied range of computer software
- Self-Management - Able to work unsupervised in an efficient, punctual and structured manner. To examine the outcomes of tasks and events, and judge levels of quality and importance
- Critical analysis & Problem Solving - Able to deconstruct and analyse problems or complex situations. To find solutions to problems through analyses and exploration of all possibilities using appropriate methods, rescources and creativity.
Castro, E. and Hyslop, B., 2011. HTML5 + CSS3: Visual Quickstart Guide. 7th ed.
W3schools, 2015. HTML(5) tutorial [online], Available at http://www.w3schools.com/html/default.asp
W3schools, 2015. CSS tutorial [online], Available at http://www.w3schools.com/css/default.asp
Courses including this module
Compulsory in courses:
- H300: BSc Applied Software Engineering (Degree Apprenticeship) year 1 (BSC/ASE)