Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Unit 14 Website Design

No description

Kath Lampard

on 6 October 2015

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Unit 14 Website Design

The Future
Is Now
What is it?
(HyperText Markup Language)
Why use
Interactuar con las cosas
Accessibility: New semantic headings make it easier for screen readers to access the content of the elements e.g. <nav>, <header>, <footer>

Simple data storage in the form of a local client side database feature. Makes web apps possible without third party plugins. allows the storage of user information, cache data and users previous application state.

Better interactions, dynamic website that responds to the user and allows the user to enjoy/interact your content. The <canvas>, the drawing HTML5 tag that allows you to do most (if not more) interactive and animated possibilities than previous internet application platforms like Flash.

HTML5 also comes with a great APIs that allow you to build a better user experience, here’s a quick list of native APIs:
Drag and Drop (DnD)
Offline storage database
Browser history management
document editing
Timed media playback

Funcionamiento con Calidad
Corre mejor con:
Funciona desde
la Ver. 11.0
No Plug-ins
Animaciones sin Flash
Acceso a Información
¿Para qué Sirve?
*Demandas de Información
Y en
¿Como se aplica?
Semántica = HTML5
mejorar resultados
Describe su significado...
Nuevas Etiquetas:
+Mejor Web
8 Pilares de HTML5
Conectividad en Tiempo Real
Notificaciones Web
Eficiencia en la Transmisión de Datos
Crear Elementos en 3D
NO MÁS JavaScript
Guardar en Disco
Interactuar con el Usuario
Drag and Drop
Eventos Touch
MEJOR Aplicación en Celulares
Tener archivos sin Conexión (Guarda en Cliente)
Crear Base de Datos
NO MÁS Cookies
Web Workers
Multi-Tarea (sin JavaScript)
Aplicación Nativa para Dispositivos
Nuevas Etiquetas
Texto <> Estilos
Diseño en General
Sitios Atractivos
Fuentes Web
Audio - Video
Forma Nativa
Nueva Característica
Mejor Rendimiento
¿Cómo Crear un Sitio Web con
1) Nuevas características de las imágenes en HTML 5
2) Facilidad de acceso a los videos
3) Se puede Trabajar off-line
4) HTML5 hace que la descarga de páginas web es más rápida
5) HTML5 mejora la búsqueda semántica en Internet
6) HTML 5 puede acercar al Internet a su futuro
1) preocupación de seguridad
2) No hay demasiadas aplicaciones todavía
3) No hay alternativas HTML5 en muchos sitios todavía
4) No es compatible con todos los navegadores
The Future
Unit 14: Website Design
This module is designed to enable you to understand the concepts of website design and apply their own creativity in designing and developing interactive websites.
What are the main learning outcomes?
On successful completion of the unit learners will:

1 Understand website design concepts

2 Be able to design interactive websites

3 Be able to implement interactive websites

4 Be able to test interactive websites.

Assessment Criteria
LO1: Understand website design concepts
1.1 discuss the design concepts that have to be considered when designing a website

LO2: Be able to design interactive websites
2.1 design an interactive website to meet given requirements
2.2 evaluate website design with other users.

LO3: Be able to implement interactive websites
3.1 implement a fully-functional interactive website using a design specification.

LO4: Be able to test interactive websites
4.1 critically review and test the website
4.2 analyse actual test results against expected results to identify discrepancies
4.3 evaluate independent feedback and make recommendations for improvements
4.4 create onscreen help to assist the users
4.5 create documentation for the support and maintenance of the website.

Reading List
McFarland D – CSS: The Missing Manual, second edition (Pogue Press, 2009) ISBN 9780596802448

McFarland D – Dreamweaver CS4: The Missing Manual (Pogue Press, 2009) ISBN 9780596522926

McFarland D – JavaScript: The Missing Manual, first edition (Pogue Press, 2008) ISBN 9780596515898

Veer E – Flash CS3: The Missing Manual (Pogue Press, 2007) ISBN 9780596510442


Unit Content
1. Understand website design concepts
Users: types, special needs; requirements eg psychological, cultural, social and environmental, health and safety, education and work
Site analysis: purpose, fit for purpose eg meets organisational and site objectives; planning, search engine key words, graphical design, user interface, maintenance eg plans, logs, disaster recovery, testing
Accessibility: features, current standards and legislation, W3C validation, copyright and intellectual property rights
Design: rules and heuristics; accessibility; functionality, ease of use, evaluation tools eg W3C Mark-up Validation Service
Environment: features (URL), (HTML), (DHTML), (XML), JavaScript, client and server-side scripting languages; multimedia; hardware and software requirements, display (CSS)

2 Be able to design interactive websites
Identification of need: nature of interactivity, client and user needs, maintenance contracts, costs, search engine visibility
Design tools: concept designs eg mood boards, story boards; layout techniques ; colour schemes; screen designs

3 Be able to implement interactive websites
Structure: layout of pages; navigation; format of content; (CSS); page elements, interactive features eg product catalogue, shopping cart; images and animation
Content: correct and appropriate; reliability of information source; structured for purpose
Development: mark-up languages eg (HTML), (XHTML), (DHTML); client side scripting languages, features and advantages of software languages; web authoring software tools
Tools and techniques: navigation diagram; building interactivity tools; adding animation and audio/visual; ensuring compliance with W3C; meta-tagging; css

4 Be able to test interactive websites
Review: functionality testing (user environments, links and navigation); content; check user requirements; user acceptance; audit trail of changes
Mechanisms: types eg browser compatibility testing, platform testing, script-language testing; valid (HTML) code; checking functionality against requirements, check internal and external hyperlinks (web files, web documents, images), error detection, error messages, dry running
Supportive documentation: test plan; test results; programmer guidance; user guidance: on-screen help

How will you be assessed?
There will be 2 assignments
Design an interactive E-Commerce Website
Website documentation and review

both will be based on a supplied scenario
First Task
Basic Tags (Useful websites www.html5doctor.com and www.w3schools.com)

- Validating your webpage http://validator.w3.org/check
- First Template Page example

TASK: Download file "template_xhtml4.01_strict.html"

TASK: Document the different special needs users and the website issues that would need to be addressed.

Task: Research term HTML
In small groups research the term HTML

Find out:
What it is?
How it works?
How it has developed?
Video and Audio support: No more need for third party media players, makes media more accessible, no need for messy lengthy code. Issues with older browsers but there is simple code that can cope with this
Game Development, you can develop games using HTML5’s <canvas> tag. HTML5 provides a great, mobile friendly way to develop fun, interactive games. If you’ve built Flash games before, you’ll love building HTML5 games.

Script-Tutorials has recently offered a four part series of lessons focused on HTML5 game development, head on over and check out some of the sick stuff they have created:


modern, popular browsers all support HTML5 (Chrome, Firefox, Safari IE9 and Opera), the HTML5 doctype allows all browsers, even the older browsers and IE6 can use it.

But just because old browsers recognize the doctype they cant use all the new HTML5 tags and features. Fortunately, HTML5 is being built to make things easier and more cross browser friendly so in those older IE browsers that don’t like the new tags we can just simply add Javascript code that will allow them to use the new elements:

Mobile browsers have fully adopted HTML5 so creating mobile ready projects is as easy for their smaller touch screen displays.

There are some great meta tags that also allow you to optimize for mobile:
Viewport: allows you to define viewport widths and zoom settings
Full screen browsing: IOS specific values that allow Apple devices to display in full screen mode
Home Screen Icons: like favicons on desktop, these icons are used to add favorites to the home screen of an IOS and Android mobile device

Full transcript