HTML Class 6

Link to Class 5     Class 4     …     Class 1

You have by now gained a basic understanding of HTML and CSS.

Screenshot of a Sample Design Gallery - Source: www.addesignlink.com

Screenshot of a Sample Design Gallery – Source: http://www.addesignlink.com

Today you will look at how to:

  • Look at the CSS reference on W3Schools
  • Create a vertical navigation bar
  • Create a horizontal navigation bar
  • Create an image gallery using the div element
  • Your Task: Create a Web page with a horizontal navigation bar and a 6 image gallery

CSS Reference

It is easy to get overwhelmed when applying CSS to HTML.

Take 5 mins to look through this excellent reference: W3Schools CSS Reference

Create a Vertical Navigation Bar

Learn how to create a vertical navigation bar in a button format. Specify a colour for your buttons, and a font for your text. Use internal CSS (in the head segment).

Instructions for how to create a navigation bar in CSS on W3Schools

TryIt example for a vertical navigation bar on W3Schools

Instructions for changing font styles on W3Schools

Example for Vertical Navigation from www.graphicblog.net

Example for Vertical Navigation from www.graphicblog.net

Create a Horizontal Navigation Bar

Learn how to create a horizontal navigation bar in a button format. Specify a colour for your buttons, and a font for your text. Use internal CSS (in the head segment).

Instructions for how to create a navigation bar in CSS on W3Schools

TryIt example for a horizontal navigation bar on W3Schools

Instructions for changing font styles on W3Schools

Various Designs for a Horizontal Navigation Bar from PSD Graphics

Various Designs for a Horizontal Navigation Bar from PSD Graphics

Create an Image Gallery

Learn how to create an image gallery, but this time use the div element when creating it. Base your images on existing images found on morgueFile.

Instructions on how to create an image gallery with images and image descriptions

TryIt Editor example of a image gallery

Example of a Web Gallery:blogs.adobe.com

Example of a Web Gallery: blogs.adobe.com

Your Task – Assessment

Due: 18/4/2013

Create a Web page with a title, horizontal navigation bar and an image gallery with 6 – 9 images.

Make the buttons active hyperlinks, link them to different posts on this blog. Make the image gallery linked to actual images (use morgueFile) and insert thumbnail images for it as well.

Include a radio button feature. (See last week’s class).

Theme for the web page: Urban Environment (Cityscape)

Create a title for your page (that needs to be used in the head section).

Test your HTML file on the TryIt Editor as well as a pure HTML file on a minimum of 2 browsers.

Submit the HTML file on MyKangan.

Example of morgueFile Image Sourcing

Sourcing an image on morgueFile.com

Sourcing an image on morgueFile.com

Adjust the size of your image manually and click 'Finish'.

Adjust the size of your image manually and click ‘Finish’.

Screen shot 2013-03-21 at 9.39.52 AM

Insert the HTML into the TryIt Editor

Insert the HTML into the TryIt Editor

The cropped image is displayed.

The cropped image is displayed.

E-Learning Class 7

Link to Class 6        Class 5     …      Class 1

E-Learning found on: www.emedicus.co.uk

E-Learning found on: http://www.emedicus.co.uk

I have broken the Assessment brief from last week down into 2 Assessments.

Assessment 1 will focus on step 1 – your research and establishing your target audience.

Assessment 2 will focus on step 2 – designing an e-learning concept (game) and documenting the idea in a  paper-based format. Paper-based means that you will create the design and planning of the e-learning resource without the actual final product. You may do this as a PDF.

Assessment 1

Brief

In groups of three develop an E-learning resource that allows local prep children to improve their understanding of the English Alphabet (primary aim of project). The tool should allow the children to have as much exposure to the letters as possible. You will need to develop concepts that explore letter recognition and recreation.

The secondary scope of the project is for the children to learn to type the letters in a QWERTY keyboard.

Team Work

You are required to team up in a team of up to 3 students. There is the option to work alone, but you need to inform me and get confirmation. If your name is not in the list below you need to inform me about the people in your team. Send a message to this blog with names of all the team members.

Teams so far:

Lucine Y, Fatma Y & Benan Ü

Justin A & Joe W

Berna K, Emel & Naşide S

Vlad K

Michael T & Tim B

1 – Establish Your Project

Read the assessment task fully and write in one or two sentences: When do you know that the E-Learning resource is complete? When do you know that this project is finished?

This will help you establish clear boundaries for your project – for any project and you will know when you have finished.

2 – Establish Your Target Audience

Write a extensive description of your Primary Target Audience as well as your Secondary Target Audience.

If your Primary Target Audience is the user group of your product (students), then your Secondary Target Audience would be a related group of people (friends of the school children), who could be a user group or maybe a provider of the service (eg teachers) or a group that is interested in the well-being of the school children (eg parents). I would focus on the teachers and other staff at a school, they would be involved in the purchase of the product.

3 – Learner Needs Analysis

Write down the needs of your target audience? Start this point of with the desired outcome: what does the learner need to learn? After establishing this you can look at what the target user will need to be able to learn.

This is a good point to brainstorm. What is it that you need to expose your learner to?

4 – User Experience

In a paragraph describe what user experience you are designing. What will the child playing the game experience? What emotions will the user go through? What emotions will your user not have?

You could aim for a user experience that is fun or interesting, you could say that the experience may be challenging and the learner will always feel like he or she needs to think and try things out before achieving success. This could result in the learner feeling more engaged and claiming the acquired knowledge.

5 – Platform

Specify the delivery platform, eg using web-based delivery, using computer based delivery, using tablets  or mobile phones, a console, etc. The operating system would be another aspect here: use of IBM-based  Windows 7, 8, Mac-based OS, Android, Linux, Open Source…

Add a minimum 1 sentence describing benefits and short comings of a specific system, software, delivery platform (eg using Flash has the disadvantage that it is rejected by Mac operating systems and more and more by Android.

6 – Research of existing E-games

Collect research on existing e-learning games for your target audience. List a number of websites and available games on the platform of your choice. Take screenshots or find images on Google or other search engine.

Describe your favourite 3 sites / favourite 3 e-games. Describe what you like about each (graphics, game play, actions)

Format

This project needs to be submitted in digital paperformat, either as a PDF, PowerPoint presentation  or a Word document.

Due Date:

16/April 2013       Upload your completed Assessment on MyKangan!

Example of interface interaction - Source: http://developer.android.com/design/media/swipe_views3.png

Example of interface interaction – Source: http://developer.android.com/design/media/swipe_views3.png