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!

Advertisements

C3 – CSS and Testing Procedures – Week 06

Today’s Class – Web Security Workshop

  • Ensure Basic Website Security
  • Research These Terms
    • Upload the Complete File on MyKangan
  • Internet Security
    • Protect Fixed Internet Connection and IP Address
    • Use and Maintain Antivirus Software
    • Protect Shared Network Resources From Intrusion
    • Following Security Protocols
    • Disable Control Protocol
    • NETBIOS and TCP/IP
  • Assessment Task
  • Feedback

Ensure Basic Website Security

Today we will have to insert a workshop on basic Website security.

This is the unit of competency that we will cover:

Read the units’ elements:

  • Determine Business Security Requirements
  • Ensure Web Server Security
  • Ensure Protocol Security

Research These Terms

Use this link TechTerms.com, Webopedia.com and find your own web dictionary to research the terms below:

  • What is a (Web) Host/(Web) Hosting?
  • What does ISP stand for?
  • Example of 2 free hosting services (provide links)
  • What is FTP?
  • What is a Domain name?
  • Explain IP Address and give an example!
  • What is the difference between a static and a dynamic IP address?
  • Find and list prices for a domain name made up of your name on http://who.is/
  • What is the difference between a server and a PC?
  • What is a Web Server?
  • What is a Gateway?
  • Give an example for a Gateway.
  • What is the purpose of a Firewall and where is it located?
  • What is meant by Malware?
  • Give 3 examples for Malware!
  • How can you protect your computer against Malware?
    Give three examples of software designed to protect your computer!
  • Define HTTP.
  • Define HTTPS. How does it differ from HTTP?
  • What is a URL?
  • Define SSL.
  • Explain the acronym TCP! How does it relate to IP?

Upload the Complete File on MyKangan

Create a new Word Document and insert all your definitions in there with the source of your information. Next upload this as a Day 1 Task on MyKangan in ICAWEB408A-Ensure Basic Website Security.

Visual Example of a Network

Visual Example of a Network connected to the Internet: Example of the Internet displayed as networks.

Example of a Network with Routers , Servers, Host PCs - Courtesy of: The TPC/IP Guide

Example of a Network with Routers , Servers, Host PCs – Courtesy of: The TPC/IP Guide (click on image for link)

You can view the different routers that your host PC will visit when accessing a Web page:

Launch the command prompt from a Windows-based computer click: Start > All Programs > Accessories
> Command Prompt. Type tracert and hit enter. This process is called tracing route to a website.

tracert command

tracert command

Internet Security

I would like to thank Anonymous alias JB for the most of the documentation below.

Read all the information below to be able to complete your assessment task for this unit.

Protect Fixed Internet Connection and IP Address

The IP address is always visible to the outside world. Internally, you can reduce its visibility for non-technical persons but not eliminate knowledge of the address.

  • Security updates on server/gateway.

Security exploitation is commonplace today and so it is essential that security patches for gateway machines are kept current.

  • Only gateway devices should have public IP addresses, not internal network computers, which should be on a private network address scheme.

Use and Maintain Antivirus Software

It is paramount to not just have Antivirus software installed, but to maintain currency .

Read: Internet Security GCF Learn Free

Protect Shared Network Resources From Intrusion

Sharing is the primary productivity benefit of networking. We have to share resources on the network such as printers and file folders in order to be productive. Some of those resources might be shared outside the local network (eg the incoming mail server) but most local network files and hardware are not meant for use outside the organisation and need to be protected. This may also include computerised machine tools used in manufacture and the building air-conditioning and lighting which may be computer controlled.

TCP/IP is the modern network topology. A key feature of the protocol is that different types of traffic (eg Email, web, telephone) are sent to different ‘ports’. There are 65535 Ports available of which the first 1024 are reserved. Of these 1024 reserved ports, only the first 256 are in common use. That means there are tens of thousands of potential gateways into your network that are not in active use. From a security point of view, these open ports are like open doors to a building, with one important difference. Although they are open, there may not be anything on the other side of the door (an empty room). However, Trojans exploit these ports for communication and open ports are a leading cause of the spread of DDOS and other security threats. The primary function provided by all Firewall services is to control the range of open ports. Only those ports intended to be available for use should be open on the firewall. (Note: KANGAN does not seem to apply this restriction.)

  • Firewall

It is necessary to protect the interface between the local network and the internet by the use of a Firewall.  A Firewall will allow management of what links (protocols/ports) are available between the local network and the internet. For example, it would be possible to only allow Email traffic.

A Firewall may either be software running on the gateway or most likely today an Appliance that sits between the Gateway and the Internet. The advantage of an Appliance is that it is purpose built for managing security risks.

  • Password Strength

Weak passwords are the single most common cause of security failure.

Read: Passwords: The First Step to Safety GCF Learn Free

Following Security Protocols

Ensure that personal computer protocols and preferences follow security protocols. (Too many uses of the word protocol here and with different nuances of meaning).

  • As the risk of an unexpected new threat is always there, it is essential that there are rules for how information about the internal network is managed. These include, establishing minimum password lengths and types, where business files are saved and how or if visitors are allowed any computer access.
  • Ensure that all staff understand security issues and in particular the role of HTTPS in creating secure data links; how to handle suspicious email and what to do if they suspect their computer is infected by a virus or otherwise compromised.
  • Ensure that processes exist to install and maintain Antivirus on all workstations.
  • Induction program for new staff on computer security and use procedures.

Disable Control Protocol

Disable control protocol or internet protocol bindings for file and printer sharing. (This is not relevant to modern Windows releases which implement security over file and printer access on the TCP/IP network.)

  • When a computer is directly connected to the internet, (e.g. at Home) shared printers and shared files are exposed to the internet and this can be exploited, particularly if passwords on the files/printers do not exist or are weak. At home, disabling file and printer sharing would prevent sharing of things such as iTunes on the local network. The better strategy is to make sure you have very strong passwords on the printer and file shares.
  • Do not disable or uninstall File and Printer sharing on a Business network. Disabling this will mean that the network cannot operate effectively in sharing data and services, which is its main purpose. In commercial environments (e.g. Kangan), TCP/IP is usually the only network protocol in use and the gateway server/appliance is the first level of defence against outside access. Most modern networks store shared files only on the server with robust security measures controlled by the server software.

NETBIOS and TCP/IP

Ensure that network basic input/output system (NETBIOS) over TCP/IP is disabled.

NETBIOS is a network Applications Programming Interface (API) that was used prior to Windows 2000 / XP to identify the individual computers on the network. Essentially it was the means by which data was directed across the network, by applications, to the computer that required it. It is not really a network protocol as such, more like a utility that software can implement to communicate between machines. It is not secure as it was developed in the context that the network was ‘trusted’ and only local (not internet exposed). NETBIOS is easily exploited to gain unauthorised access.

  • NETBIOS exists by default in all Windows releases using TCP/IP, including Windows 8.  NETBIOS should not be implemented on any current systems and must be disabled.
  • You can disable NETBIOS using Group Policy on the Server or by individually disabling under Control Panel/ Local Network Connections / TCP/IP Advanced Settings / WINS

When Windows 2000 / XP first came out, NETBIOS was required to allow for some applications to work across networks that also had Windows98 machines. Those applications and services that depend on NetBIOS over TCP/IP no longer function once NetBIOS over TCP/IP is disabled.

Assessment Task

Please download the assessment task here (on Wednesday) and upload to MyKangan.

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!

Workshop 1 – Create Storyboards

Today’s Class

  • Introduction
  • Storyboarding for Multimedia
  • Day 1 Task
  • Storyboarding for Webdesigners
  • Storyboard Templates
  • Assessment Task
  • Feedback

Introduction

This workshop is about creating storyboards. A storyboard is a number of drawings, descriptions and annotations that help organising a story visually.

A storyboard is helpful in establishing a number of steps within a story. It will support you in organising the elements and give your story a clear focus.

Storyboards are used in a number of fields and industries:

  • film and TV
  • animation
  • choreography
  • theatre
  • dance
  • opera
  • web design
  • game design
  • writing
  • other multimedia fields

Storyboarding a film is quite different from storyboarding a website.

Storyboards can be created using software or it can be created with pen and paper.

Pen and Paper

When you create a storyboard on paper I recommend to use colours and plenty of annotations.

Example of a storyboard with annotations. Courtesy of Sarah Pritchard.

Example of a storyboard with annotations. Courtesy of Sarah Pritchard.

Software

Most software packages will allow you to create storyboards:

  • Adobe Photoshop
  • Adobe Illustrator
  • Corel Draw
  • MS Word
  • MS PowerPoint

There are also some specialised software packages for creating storyboards:

  • StoryBoard Artist Studio
  • StoryBoard Pro
  • Inspiration

There are also numerous websites that allow you to create storyboards:

Storyboarding for Multimedia

Please follow the link below and read How to Do a Rough Storyboard by Jane Stevens.

After reading the post please complete the task below.

Day 1 Task

Please open the file and complete in class: Day 1 Task – Create Storyboard

Storyboarding for Webdesigners

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 Templates

Below are a number of links for storyboard templates:

Search Google Docs for Templates

Storyboard Template

Storyboard template (Courtesy of http://www.cwrl.utexas.edu )

Assessment Task

The assessment task will be included in (clustered with)  C1 – Design Simple Website Layouts.

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!

C3 – CSS and Testing Procedures – Week 05

Today’s Class

  • Assessment Task 1
  • CSS Tutorial on W3Schools.com
  • Feedback

Assessment Task 1

Continue on Assessment Task 1. Use your copy or the file below (if you have not started yet.) Assessment 1 CSS Tracking

CSS Tutorial on W3Schools.com

Today I will ask you to work through these chapters alone and fill your findings in the Assessment 1 CSS Tracking!

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!

 

C2 – Social Web – Week 05

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

Today’s Class

  • Units of Competency
  • Assessment 1
  • Feedback

Units of Competency

This class is a cluster of:

There will be one assessment delivered from:

  • ICAWEB413A Optimise Search Engines
  • ICAWEB424A Evaluate and Select a Web Hosting Service

Assessment 1

Students can work on this assessment until completion.

C2 – Assessment 1 SNS

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!

C2 – Social Web – Week 04

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

Icons-Social-Media

Today’s Class

  • Units of Competency
  • Assessment 1
  • Feedback

Units of Competency

This class is a cluster of:

There will be one assessment delivered from:

  • ICAWEB413A Optimise Search Engines
  • ICAWEB424A Evaluate and Select a Web Hosting Service

Assessment 1

Please complete the attached assessment task and upload on MyKangan by the due date.

C2 – Assessment 1 SNS

You can work on the assessment in 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 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!