Advanced HTML, CSS and JS Assessment

noiseboliviaSecurity

Nov 5, 2013 (3 years and 1 month ago)

95 views



Wentworth Falls Tafe

Teacher: Andy Stibbard

12

Advanced H
T
ML, CSS
and JS Assessment

ICAWEB505A
-

Develop complex web page layouts
;
ICAWEB506A
-

Develop complex
cascading style sheets
;
ICAWEB516A
-

Research and apply emerging
web technology
trends

Paul Young


Table of Contents

Advanced HTML, CSS and JS Assessment

................................
................................
................................
..........................

2

Evidence required to complete the units

................................
................................
................................
.....................

2

First Step

................................
................................
................................
................................
................................
....................

4



Advanced HTML, CSS and JS Assessment


ICAWEB50
5A

-

Develop complex web page layouts

ICAWEB506A

-

Develop complex cascading style sheets

These units are
ungraded
, meaning that you can achieve a
Pa
ss

or

be assessed as

Not Yet
Competent
.


ICAWEB516A

-

Research and apply emerging web technology trends

This unit is
graded
, meaning that you can achieve a
Pa
ss
, Credit
,
Distinction,
or

Not Yet
Competent.

Evidence required to complete the units


Evidence is collected via a website project distributed early in the first term. During the
semester's

workshops,
you will build a variety of examples of advanced HTML, CSS, and
JavaScript, along with hand
-
coded and generated SVG, converted video/audio, and regular
expression techniques.


PASS:
complete the following:


1.

Convert
each HTML file in the
provided
web projec
t
to utilise the new structure, tags, and
attributes available in the HTML5 (or "living standard")
spec

to the best extent possible
.
This means that you must consider

each new tag's relevance and benefit, and only apply it
to your structure if appropriate.
Note that
using

the
new
Doctype alone is not considered
adequate
.

2.

Redevelop the layout and visual styles used in the provided web project into a design of
your own.
Your new design
must use at least two

of the new CSS or layout techniques
we've explored in class, eg. advanced positioning, 2D or 3D transforms, column layouts,
transitions, animation, or float replacements such as
display:inline
-
block
.

3.

Introduce new page
s into your site for the following topics:
CSS

Effects, CSS Layouts
,
JavaScript, Canvas, AJAX, SVG, Responsive design, Regular Expressions
.

You may fold some of these topics into a single page under specific headings (eg.
JavaScript
and
Canvas
), but it's
r
ecommended
to keep them separate for code readability and clarity.

4.

Integrate each of your workshop examples into the project site. At a minimum, you must
include:



Forms:
A complete HTML5 Form
that uses the most appropriate controls to collect
data. These
m
ust

use a shim or polyfill to guarantee support on older browsers.



Video/Audio:
At least five
HTML5 <video> or <audio> elements
that work
cross
-
browser. These
must

use a shim or polyfill to guarantee support on older
browsers, eg. VideoJS. You may use your

own videos or those supplied in the
Video/Audio Workshop in week five.



Transforms, transitions, animations:
One example
of each of the following: 2D
Transforms,
3D Transforms
, transitions, animations. You may like to extend the
examples we build in class
(eg. the photo corkboard, the muffin cards, the transitions
page, the animated Google logo).



Advanced positioning:
One example
of using advanced CSS positioning techniques
to display elements in a different order than they appear in the HTML.



Responsive de
sign:
One example
of responsive design that uses CSS Media Queries
to reformat the page content or layout in response to at least three difference
resolutions.



JS Animation/game loop:
One example
of an animation or game loop in JS that
allows keyboard
interaction. This must use Canvas and demonstrate use of shapes
and images.



SVG:

Three examples of Scalable Vector Graphics. These may be created inside a
graphics application such as Adobe Illustrator or Inkscape. At least one of your
examples must
include the SVG as a background image that will resize to fit the
window or div.



Geolocation:
One example
of a Geolocation lookup to fetch the user's approximate
location



not required
.



jQuery & AJAX:

One example of
using jQuery

to change the styling, lay
out or content
of a page as a result of an AJAX call.



Regular expressions:

Six examples of regular expressions to validate input from a
user. You must demonstrate these being used in HTML5's new pattern attribute and
in JavaScript

-

not required
.


5.

Validate

your project site using
http://validator.nu

and ensure that it matches the spec. If
a particular feature breaks validation, explain
why

to your facilitator.



CREDIT

for unit
ICAWEB516A
:
complete the Pass criteria as well as:


1.

Implement responsive design
into your project site using CSS Media Queries so that it
reformats page content or layout in response to at least three different resolutions.

2.

Insert an interactive animation (eg. CSS transitions or JavaScript Canvas) into a major area
of your design. For

example, you might like to make the header of your site interactive
with the mouse (eg.
processingjs.org
), or place your Canvas animation/game into the
background of the site while allowing keyboard interaction (eg.
blog.nihilogic.dk
).


DISTINCTION for unit
ICAWEB516A
: complete the Credit criteria as well as:



1.

Explore jQuery's animation features as an alternative to using CSS animations. jQuery

animations will reliably work in browsers that don't yet support CSS animations. Replicate
an existing CSS animation (such as your animated Google logo) using jQuery instead.

2.

Locate a simple animated advert created using Adobe Flash. Replicate the animati
on using
either CSS animations or jQuery's
animate()

function.

3.

Integrate both animations into a page on your project site.



First Step

Convert
each HTML file in the
provided
web project
to utilise the new structure, tags, and attributes
available in the H
TML5 (or "living standard")
spec

to the best extent possible
. This means that you
must consider

each new tag's relevance and benefit, and only apply it to your structure if
appropriate.
Note that
using

the
new
Doctype alone is not considered adequate
.

See
folder entitled “
web_project


in xampp/htdocs.