HTML5 AND CSS3 FOR MOBILE APPLICATIONS - 2020/1

Module Overview

This module will demonstrate the latest web standards based techniques for developing the client side of web applications. Responsive design techniques will be introduced to enable the client view to be rendered appropriately across all devices from smartphones, through tablets, to desktops and TVs. Techniques for interacting between client and server will also be covered.

Module provider

Computer Science

Module Leader

KRAUSE Paul (Computer Sci)

Number of Credits: 15

ECTS Credits: 7.5

Framework: FHEQ Level 7

Module cap (Maximum number of students): N/A

Module Availability

Semester 1

Prerequisites / Co-requisites

Basic familiarity with HTML and CSS will be assumed.

Module content

• The changing landscape for mobile application development (1h)


• Setting up a Node.js static server (1h)


• How to use HTML 5 to describe your content (1h)


• Responsive web design with HTML 5 media queries (3h)


• Scalable Vector Graphics (SVG) workshop – accessible and scalable drawing with XML and declarative animations (3h)


• HTML5 Canvas workshop – 2D and (introduction to) 3D drawing with JavaScript (3h)


• Introduction to AngularJS – anatomy of an AngularJS application (3h)


• Deeper into AngularJS – structuring a single page web application (3h)


• HTML 5 support for Audio and Video. (3h)


• Communicating with servers – over http; using RESTful resources; asynchronous requests and Promises (3h)


• Advanced CSS3 – design workshop: transforms, transitions and animations (3h)


• Data visualisation with (and without!) D3 (3h)


• Overview of what has been achieved with an interactive real-time web application as exemplar (3h)

Assessment pattern

Alternative Assessment

N/A

Assessment Strategy

The assessment strategy is designed to provide students with the opportunity to demonstrate

• 
  Ability to design and develop the client component of an interactive web application. This is to address LO1.
  


• 
  Ability to use HTML 5 for the semantic markup of web application content. This is to address LO2.
  


• 
  Ability to use, and in depth technical understanding of JavaScript and the AngularJS library. This is to address LO3.
  


• 
  Ability to use, and in depth technical understanding, of HTML 5’s multi-media support. This to address LO2 and LO3.
  


• 
  Understanding of the best practice designing and developing standards based state, of the art, responsive web clients. This is to address LO4 to LO6.
  

 

Thus, the summative assessment for this module consists of:

• 
  An individual project in which the students will need to demonstrate both technical understanding and good engineering practice.
  


• 
  A formal examination in which students will be required to demonstrate strong technical understanding of all the technical elements of the course.
  

 

Formative assessment and feedback

Self assessment exercses will be provided in SurreyLearn.

In addition, students will be asked to submit their lab class exercises into SurreyLearn, and feedback on these will be provided before the next lab class.

 

Module aims

• provide an overview of the technologies that support the development of the client-side component of interactive web applications.
• bring students up to a sufficient level of development skill to be able to develop a state of the art interactive web client using responsive design techniques.
• familiarise students with standards-based design of web clients.

Learning outcomes

Methods of Teaching / Learning

The learning and teaching strategy is designed to:

Develop a critical understanding of best practice in developing state of the art web clients through directed learning and facilitated self-directed learning. The skills learned in this module will be transferable to other software-engineering modules in the programme and the wider software engineering profession.

The learning and teaching methods include:

• 36 hours of interactive lectures with practical sessions and class discussion


• Use of an online forum for facilitated discussion

 

Indicated Lecture Hours (which may also include seminars, tutorials, workshops and other contact time) are approximate and may include in-class tests where one or more of these are an assessment on the module. In-class tests are scheduled/organised separately to taught content and will be published on to student personal timetables, where they apply to taken modules, as soon as they are finalised by central administration. This will usually be after the initial publication of the teaching timetable for the relevant semester.

Reading list

https://readinglists.surrey.ac.uk
Upon accessing the reading list, please search for the module using the module code: COMM049

Please note that the information detailed within this record is accurate at the time of publishing and may be subject to change. This record contains information for the most up to date version of the programme / module for the 2020/1 academic year.