C1 – Design Simple Webpage Layouts – Week 08

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 3     Week 4      Week 5     Week 6      Week 7    Link to this Unit on MyKangan

Today’s Class

  • Assessment – Website
    • Step 4 – Create the Website
  • Dreamweaver
  • Feedback

Assessment Website

Step 4 – Create the Website

Create the website in Dreamweaver (or any other Code editor) using HTML, CSS and if necessary JavaScript or JQuery.

  • Your website needs to have a well-designed layout.
  • 4 Web Pages:
    1. Home Page
    2. About us and Contact
    3. Gallery or Portfolio of Work
    4. Bookings or Purchase Requests

Dreamweaver

We will continue using divs (Read up on Divs on W3School) and complete a website in class.

Attend class to learn about how to set up your website in Dreamweaver. You will learn how to create divs, place images, create an interactive menu and more.

How to create an interactive menu:

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C1 – Design Simple Webpage Layouts – Week 07

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Assessment – Website
    • Four Web Pages
    • Step 1 Brainstorm Ideas
    • Step 2 Research Content
    • Step 3 Storyboard
    • Step 4 – Create the Website
  • Design and Layout
    • Guide to Good Web Design
  • Dreamweaver
  • Feedback

Assessment Website

Today we will commence on your assessment for this class. You will need to design a website for a client to promote his work or services. See examples below as a result of an in-class brain storm:

  • Portfolio of a designer, web-designer, graphic designer, fashion designer, …
  • Portfolio of an artist or illustrator
  • Portfolio of a photographer
  • Website for a horse trainer
  • Website for a singer
  • Website for a humanitarian organisation, eg Doctors Without Borders
  • Website for a restaurant

Four Web Pages

You will need to create 4 web pages using Dreamweaver or a WYSIWYG (What you see is what you get) code editor. These are the pages for you to create:

  1. Home Page
  2. About us and Contact
  3. Gallery or Portfolio of Work
  4. Bookings or Purchase Requests

Step 1 – Brainstorm Ideas

Brainstorm ideas for a website (if portfolio for a photographer, what type of photographer, wedding, portrait, famous photographer, …)

Step 2 – Research Content

Go online and research what content you can find for your website. Use Creative Commons sites whenever possible:

Otherwise use Google and add Creative Commons to your search criteria.

Step 3 – Storyboard

Create a storyboard for the website. Before you can create the storyboard you will need to organise all the different elements. Please refer to the Storyboard Workshop from Tuesday:

Storyboarding for Web Designers

Webdesigners benefit from storyboarding. It helps organising content and ensures that every element is included in a logical place according to topic and site.

Read the post on Storyboarding Your Website (Source: nmasse.com).

Storyboard Template

You can use the template below (a modified version of one found on Google Docs Public Templates) :

Storyboard Template

Step 4 – Create the Website

Create the website in Dreamweaver (or any other Code editor) using HTML, CSS and if necessary JavaScript or JQuery.

Your website needs to have a well-designed layout

Attend class to learn about how to set up your website in Dreamweaver. You will learn how to create divs, place images, create an interactive menu and more.

Design and Layout

Here are some important standards to consider for a convincing, well-communicated web page:

  • Clarity is vital (Link to post on IWantClarity.com)
  • Less items on page – make sure to use white space excessively
  • Design should guide the user to information

Please view the PowerPoint show by Sara Ryan on Vic Costello’s ‘Multimedia Foundations –
Core Concepts for Digital Design’: Multimedia Foundations

White Space in Web Design - Courtesy of: unmatchedstyle.com

White Space in Web Design – Courtesy of: unmatchedstyle.com

White Space in Web Design - Courtesy of: OXP - onextrapixel.com

White Space in Web Design – Courtesy of: OXP – onextrapixel.com

Guide to Good Web Design

  • Use Design to guide user’s eye to the information.
  • Keep the layout simple and uncluttered.
  • Use consistent navigation bar throughout the site.
  • Organize text material in clearly defined groups.
  • Be consistent, clear and concise.
  • Stick to standards used on web (Accessibility)
  • Do not include essential information on roll-over images.
  • Include a contact option for the user, this could be:
    • A Help Desk Number to a live person.
    • A context sensitive ‘HELP’ button.
    • An e-mail ‘Ask a Photographer’ or ‘Ask an Accountant’ or ‘Ask an Expert’  option.

Dreamweaver

Today you will learn how to create divs and add colour to them.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C1 – Design Simple Webpage Layouts – Week 06

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Dreamweaver – Session 4
  • Feedback
Part of a table created in Dreamweaver. The colour is Olive.

Part of a table created in Dreamweaver. The colour is Olive.

Dreamweaver – Session 4

We will commence today’s Dreamweaver session by looking at the same content from Tuesday’s class.

Please open Dreamweaver and then transfer the content from the links below (Tables):

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C1 – Design Simple Webpage Layouts – Week 05

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Dreamweaver – Session 3
  • Feedback

Dreamweaver – Session 3

We will continue the Dreamweaver training on Adobe TV’s Webdesign Channel.

Adobe TV – Learn Dreamweaver CS5 & CS5.5

After entering the Adobe TV site (link above) you should see an icon with resources at the top of the window. Download these and install on your D-drive.

Note: You will not see resources unless you have sign up with Adobe TV (for free).

Placing Images on the Page (7:44)

Creating Links in Dreamweaver (11:10)

Understanding Style Sheets (2:23)

Controlling CSS from the Property Inspector (5:21)

Using Live View and CSS Inspect (7:58)

Simplified Site Setup in Dreamweaver CS5 (5:43)

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C1 – Design Simple Webpage Layouts – Week 04

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Follow up
  • Dreamweaver – Session 2
  • Feedback

Follow up on Previous Assessment and Work

How has everybody faired with the Assessment on Accessibility? It is due today, so please upload in class.

Please upload in ICA40311-ICTITW4N-ITGEN-2013-ICAWEB414A-DESIGN SIMPLE WEB PAGE LAYOUTS (sorry about the lengthy code).

Dreamweaver – Session 2

We will continue the Dreamweaver training on Adobe TV’s Webdesign Channel.

Adobe TV – Learn Dreamweaver CS5 & CS5.5

Creating new documents (5:23)

Adding structure to text (8:36)

Managing Assets in Dreamweaver (13:13)

Placing Images on the Page (7:44)

We worked to Managing Assets in Dreamweaver. Please watch the last video before next class.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C1 – Design Simple Webpage Layouts – Week 03

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Assessment 1 – Accessibility
  • Dreamweaver – Session 1
  • Feedback

Assessment 1 – Accessibility

We will read through this task together please click on the link to download the file. Follow the in-class discussion and make sure that you understand each question or ask the teacher in the presentation!

Assessment 1 – Accessibility

The assessment is due next week!

Dreamweaver – Session 1

We will commence Dreamweaver training. We will use the video tutorials provided on Adobe TV’s Webdesign Channel, but I would like you to open this online PDF to get you started: A Beginner’s Cookbook to Dreamweaver.

Adobe TV – Learn Dreamweaver CS5 & CS5.5

All numbers are the duration of the videos in minutes.

I do not expect that we will work past the 4th video, but students who are more advanced are welcome to work ahead.

Getting Started: What is Dreamweaver CS5? (3:23)

Note: Before you view ‘Defining a new Site’ create a folder with the name dw website and subfolder by the names: assets, CSS, images, notes, scripts and video.

Defining a new Site (4:42)

In class we worked up to here! We will continue with Dreamweaver next week.

Creating new documents (5:23)

Adding structure to text (8:36)

Managing assets in Dreamweaver (13:13)

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C1 – Design Simple Webpage Layouts – Week 02

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Accessibility
    • Web Standards
    • Browser Compatibility
    • Contrast and Colour Blindness
    • Alt text for Images
    • Drop-down Menus
    • HTML Code
    • Self-closing HTML Tags
    • Site  Maps
    • Text Size – Resizeable Text
    • Text Resizing Link
    • Accessibility Validation
    • Accessibility Levels
    • Alternative Content for Flash
    • Semantic Markup
    • Accessibility Checklist
  • Feedback

Accessibility

Web accessibility is the requirement to create websites that can be accessed and understood by as many people as possible. You can relate it to the accessibility of a room in a university. Every student has to be able to access the room regardless of injury, disability or other hindering circumstances. A lot of schools had to build ramps to allow students in wheelchairs easier access to the facilities.

Web Standards

Accessibility has been integrated into the web standards. The web standards are decided on by the W3C (World Wide Web Consortium). Please click on this link now to visit the W3C: www.w3.org. Can you find the definition of accessibility? (>http://www.w3.org/WAI/intro/accessibility.php)

Please look up what impairments and disabilities are the focus of accessibility!

Browser Compatibility

Make sure to code your websites to W3C web standards to allow for the widest range of web browsers.

Contrast and Colour Blindness

Colour blindness is a common problem today with sources claiming that most people have levels of colour blindness. It affects mostly males, and it is excepted that about 10% of males have some form of colour blindness.

Web designers need to ensure that text and other interface elements can be read and understood by everyone. Here is some advice on the use of contrast:

  • Any time you use colour to convey information in an interface also use clear, secondary cues to support the information.
  • Use grey scale differentiation
  • Use graphics to support the information
  • Use text label associated with each colour

Spend 10 minutes to find websites that help with contrast and colour blindness. List 5 sites that help with contrast and 5 sites that help when designing for accessibility and colour blindness. Add your links to this post in form of a comment!

A great validator for colour has been recommended by Paul Murphy (see comment): Snook’s Color Contrast Check

See also below: Accessibility Validation!

Alt Text for Images

You add an image to your web page with this code in HTML: <img src=”smile.jpg” alt=”girl smiling”> or <img src=”\images\smile.jpg” alt=”girl smiling”>

If a visually impaired user is trying to access your web page they rely on screen reader software. Using the alt attribute allows all users to get an idea of the image regardless if they can view it or not.

What could be other reasons for users not to be able to view images?

Click on this W3Schools Link and access the TryIt-Editor. Read the code for inserting an image and try to rewrite it from memory adding a descriptive alt attribute.

I will walk around and look at your results.

Drop-down Menus

Drop-down menus are a smart way to navigate. Drop-down menus tend to look very attractive. Many successful websites avoid their use in total: eBay, Yahoo!, Amazon.

Drop-down menus are bad for accessibility.

HTML Code

Using the example of bold text and strong text, the code for bold <b>I love Football!</b> boldens that section. Using the code for strong has the same visual impact, but the difference is quite important. If you write <strong>I love Football!</strong> it will look bold, but a speech reader will interprete the text as important.

So, use strong rather than bold.

Self-closing HTML Tags

The old style of a tag is not self-closing: <br>. This is the tag for a line break and most browsers will have no trouble to read it. The web standard-compliant version is self-closing: <br />. Start to use self-closing tags to ensure that your websites will show on the widest range of web browsers in the future as well.

Site Maps

Site maps are a good way to support accessibility. Anyone with trouble navigating your site will benefit from a clear, text-based site map.

What is a site map? It is an index or guide to the different pages and hyperlinks on your website.

Example of a Site Map found at MelbourneIT

Example of a Site Map found at MelbourneIT

Read here for Tips on Sitemaps  Example of WAI Sitemap – is it too complex?

Homework

Read the updates below on the weekend!

Text Size – Resizeable Text

Make sure to use text size that is suitable for a variety of users. Smaller text looks neet and modern, but not everyone will be able to read small text (think of older users).

Recommendations regarding the ideal text size vary significantly: various sources recommend sizes for body text (main text) from 12px-14px as well 16px. W3Schools recommends a default size for paragraphs of 16px.

With a change towards responsive web design, a design approach that aims at flexible website dimensions to provide an optimal viewing experience on any platform, there has also been a shift towards maesuring text size in em, rem or in percentages.

Text set in em or rem (they are different)  can be resized by all browsers, which allows for ideal viewing on a screen as much as on a tablet or mobile phone.

Read more on text size at: W3Schools CSS Font  Sitepoint: Relative Font Size Rem  Sitepoint: CSS Font Sizing  W3C: The Amazing Em Unit

Text Resizing Link

It is recommended to add a link that allows the user to change the font size within the website. To achieve this you need to include a link that uses JavaScript to swap between two CSS style sheets.

Accessibility Validation

It is important to check your website for accessibility! Make use of one of several  online accessibility validators.  Bobby used to be the most successful free online validator, which has been disabled recently by IBM.

A great validator for colour has been recommended by Paul Murphy (see comment): Snook’s Color Contrast Check

Find a list of numerous accessibility validators below at: W3C: Complete List of Accessibility Evaluation Tools

Accessibility Levels

Automated validators give only an indication of the accessibility of your website. Accessibility is measured at three levels from basic accessibility to advanced: A, AA, AAA. Each level relates to a priority checklist that can be found at: W3C website.

The W3C website is rather cumbersome and that is being friendly. It is fine to use an accessibility validator and you can refer to the checklist below (see Accessibility Checklist)

What level do you need to reach as a web developer? W3C states:

  • A Web content developer must satisfy all priority 1 points. This will give the site a Level A-Accessibility rating, which can be labeled on the website.
  • A Web content developer should satisfy all priority 2 points. This will give the site a Level AA-Accessibility rating, which can be labeled on the website.
  • A Web content developer may satisfy all priority 3 points. This will give the site a Level AAA-Accessibility rating, which can be labeled on the website.

Alternative Content for Flash

There has been a problem with Flash content online. Flash content has not been accessible until later versions of Adobe Flash. If you use Flash make sure to provide the content in alternative format.

It is recommended to describe your Flash file (SWF) in words by offering users a link to a text version.

Semantic Markup

The W3C has declared its intention to create a Semantic Web, meaning a World Wide Web of structured data, that is transparent. Using ‘Semantic Markup’ means that you will write HTML that is self-descriptive and written for other humans rather than just for machines (software, parsers, Google etc).

Semantic Markup means that HTML code is used appropriately. This is achieved by using the HTML standard classes accordingly: <h1> will be used for the main heading followed by <h2> and these tags will be used for headings and not to emphasise or enlargen text. <p> will be used for a paragraph (rather than <br /> for line break).

Above I mentioned the examples of using <strong> rather than <b> to emphasise text. The same applies to the <em> tag (which actually stands for emphasis, while strong represents prominent text) to be used rather than the <i> tag which stands for italic or sloped text.

The point is that <b> and <i> are purely representational or visual, while <strong> and <em> offer semantic meaning that will be interpreted differently by screen reader software. The other point is that the visual representation for <strong> and <em> may change over time from bold and italic to something else (eg high-lighted).

You can also add comments to important sections of your code. Comments will only display in your HTML code and not on your website. The use of comments is to help understand long passages of code. Other team members will benefit. But it also helps understanding code that you wrote a while ago.

Example of a comment in HTML: <!–This is a comment. Comments are not displayed in the browser–>

HTML5 offers new semantic elements to clearly define different parts of a web page:

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <figcaption>
  • <figure>
  • <footer>
Example of Semantic HTML5 Tags, Source: W3Schools.com

Example of Semantic HTML5 Tags, Source: W3Schools.com

Accessibility Checklist

Finally, here is a checklist that you may want to use.

  • Add valid DOCTYPE declaration
  • Keep the content simple, avoiding jargon and complex words
  • Avoid justified text, as users with dyslexia find it harder to read than left-aligned text
  • Use sans-serif (eg Verdana, Calibri, Arial)
  • Avoid images of text
  • Allow that font size can be adjusted
  • Allow for large clickable area of links
  • Use descriptive links (avoid ‘click here’) This is important for users with visual impairment who rely on screen reader software.
  • Provide a sitemap
  • Provide ‘Back to Top’ and ‘Skip’ links
  • Ensure functionality of keyboard and mouse (eg tab)
  • Use images and icons
  • Provide meaningful alternative text for images: <alt>
  • Provide enough contrast in your colours of text and background
  • Avoid distracting animations and sounds or allow for them to be paused, skipped or switched off
  • Make use of white space (empty space around filled space with either text or images)
  • Provide a consistent design and navigation throughout the website

(The checklist is an altered version based on the original that can be found in ‘How to Design Websites’ by Alan Pipes, Laurence King Publishing, 2011, p.73.)

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

C1 – Design Simple Webpage Layouts – Week 01

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Introduction to Delivery Format
  • Introduction to the Content
  • In-class Task

Introduction to Delivery Format

The classes will be delivered in 3 hour schedules. The content will be posted on this blog as well as on MyKangan. Tasks, discussions and research will be conducted inside the 3 hour slot and at home.

You are expected to work towards goals independently and to be able to operate as part of a team. In a work place you will sometimes be lucky to work with people that you easily get along with, but unfortunately you might often have to work with people that you might not easily get along with. A professional looks beyond this and finds ways to function in a professional environment with a range of personalities.

Assessments:

Important: You need to submit all your assessments on MyKangan. It is your responsibility to follow up due dates and access to MyKangan.

  1. Day 1 Task – this task is a simple comprehension task to establish student participation. (due: after the first class)
  2. Assessment 1
  3. Assessment 2

RAE – Research and Exploration or Class of Federico

This blog will be or main form of contact. It will be accessible from anywhere as long as you have internet access.

The web address is www.classoffederico.wordpress.com, and the name is RAE – Research and Exploration – Never Stop Learning. You might also call it Class of Federico or COF.

Make sure to leave comments on a regular basis. Any questions that you have can be posted as a comment. The posts for each class will be released prior to the class and in some cases the evening before.

MyKangan

To access MyKangan please open Kangan’s student portal and click on MyKangan. Next find the class by unit title. This can be a bit hard to see, so make sure to know the unit titles.

The unit title for this class will be combined in (the catchy name):

ICA40311-ICTITW4N-ITGEN-2013-ICAWEB414A-DESIGN SIMPLE WEB PAGE LAYOUTS

As you can see, the titles are long and hard to remember. The easiest is to look at the last segment with the unit code and title.

The unit itself will be structured in the same way, that you have classes listed as Week 1, Week 2, etc and assessments will be listed by title inside an assessment folder.

This is also where you will submit your assessments. You will find hyperlinks with names such as Submit Assessment  1 here.

You can send messages to your teacher and you can leave comments as well. I am always open to suggestions, so please feel free to forward ideas about content or software that you would like to cover.

Any questions?

Introduction to Content

These units will be covered:

Please click on the links and follow the in-class discussion.

In-class Task

Please upload the attached Word document and answer the questions. Afterwards upload the file onto MyKangan.

In-Class Assessment

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!