Reference no: EM132167188

Seminar - Creating Dynamic Websites and Web-based Applications - an overview

Tasks

1. Read the Seminar 1 material and attend class.

2. Post your first responses to the Discussion Forum after you have completed the readings and seminars, and as directed by your trainer.

3. Discuss your classmates' answers with them, in class or in the Forum, as directed by your trainer. If online, remember to make sure your post is adding value to the discussion, rather than just saying "I agree with you".

4. Review the assignment 1 brief and begin thinking about your website.

Learning Resources

Seminar - Create Dynamic Websites

Your seminar notes includes a number of activities. Your facilitator may ask you to upload these, or they may simply 'sight' them. You should check with your facilitator what the requirement is.

Web Design Project 1

Build a basic website.

The Assignment will assess competencies for ICTWEB501 Build a dynamic website.

Instructions
In this project you are to build a website. You can build any type of website you choose. For example a portfolio site, brochure site, information site, etc. Try to choose a project that you will be motivated by. For example: a portfolio site to showcase your skills; or a web site for an existing or proposed business. The website must include:

- A minimum of four pages (e.g. home, gallery, contact, about)
- Use of a "container" div to hold all web page elements and to centre the web page in the browser
- Use of html5 semantic elements (such as header, nav, section, footer) for the layout. These will be inside the container div described above
- A CSS menu for the main website navigation
- A form and mailto link on the contact page

The project is broken down into stages as shown below. It is left to the facilitator to decide whether to have a partial submission at each stage or whether to leave the submission until the end of each unit or subject. This will be dependent partly on the client cohort. The advantage of the "staged" submissions is that it focuses students on the skills learnt at each stage.

- Stage 1: Project proposal (requirements analysis)
The submission for this phase of the project is a project proposal. This represents the analysis phase where you document the constraints or parameters of your website. The project proposal should specify the following:
o The type of website (e.g. a portfolio, brochure site, ecommerce site, information site)
o The target audience
o The hardware and software requirements
o Specifies data storage requirements
The proposal should be submitted and reviewed by the facilitator for feedback (marked) before continuing to the design phase.
Possible timing of this submission: end of seminar 1.

- Stage 2: Design documentation
This is the design phase where you test your design ideas. The submission includes:
o A wireframe diagram. Your wireframe diagram should show the approximate positioning and size of the structural elements such as navigation menu, headers, logo, etc.

o A mock-up. The mock-up shows a more precise positioning and size of the structural elements, as well as styles such as font-family, background and font colour. You should produce at least two mock-up's of your web pages for consideration.
o A site map

All submissions to be reviewed by the facilitator for feedback before continuing to the prototype stage
Possible timing of this submission: end of seminar 2.

- Stage 3: Creating a CSS style sheet.

Creating templates and prototypes begins the implementation phase. The submission for this stage includes:
o An external style sheet suitable for your website. At this stage you are only required to add the basic CSS rules for the body elements. Use your judgement (based on your research) on whether a particular style is associated with the body element or a lower level element. Possible style rules for the body element could include styles for links, background colour, font-family, font colour.

Possible timing of this submission: end of seminar 4.

- Stage 4: Create a template for your web page layout.

The submission for this stage includes:
o A template for your web pages. This involves creating an html page with attached style sheet which establishes the page layout. You should use the html5 semantic elements (e.g. header, footer, section, nav) and a div to contain these elements. The div should have an id of "container" and be centred. As this is a template (not the actual pages) you should use "lorum ipsum" text and image placeholders rather than actual content. When you have created the html elements you should add to the style sheet (created in stage 3) to set the positioning rules, widths, margins, padding, etc. of your semantic elements.
Possible timing of this submission: end of seminar 4.

- Stage 5: Create the form and email link.

The submission for this stage includes:
o Creating another html page to contain a form. Please yourself what the form is about but it should use all the form elements discussed in seminar 5 and should validate all the fields using the html5 "required" attribute. Be sure to use the html5 email element for automatic validation. When the form is submitted it should trigger the client email to send the form data to your email address.
Possible timing of this submission: end of seminar 5.

- Stage 6: Creating a CSS menu.

The submission for this stage includes:
o A CSS menu. Edit your template (created in stage 4) by adding a CSS menu. It should be placed in the <nav> element. Use placeholder links as this is still the prototyping phase. Include at least one submenu (e.g. your contact page could have a link to the form created above). Be sure to style the menu to match your design documentation.
Possible timing of this submission: end of seminar 6.

- Stage 7: Final implementation.

When all the prototypes and templates are complete, you should incorporate all components into a functional website. The final website will:

o Use the template to create your main pages (e.g. home, about, contact, gallery). Add appropriate headings, titles etc.

- Stage 8: Testing. Test all elements of your website, make any functional or stylistic (aesthetic) changes that are suggested by your testing and submit.

SEMINAR 2 - CREATE WEB PAGES: HTML BASICS

This seminar discusses the techniques required to build basic web pages using HTML5

Topics:
- Introduction
- Website folder structure and file referencing
- Creating web pages
- HTML elements
- Element attributes
- The table element
- The list element
- The div element
- New HTML5 elements

Introduction

After you have specified the requirements of your website and you and your client have agreed on a design, you are ready to implement or build your website. A website consists of all the folders and files required to produce the web pages that you see on the web when you visit a particular URL.

To summarize, in order to create and publish a website so it is visible to the rest of the world, you need to:

1. Create your website (authoring). This involves:
a. Creating your folder structure
b. Creating or gathering all media and other components
c. Creating your web pages using authoring software such as Adobe Dreamweaver or a simple text editor such as Notepad++
2. Publish your website by:
a. Registering a domain name
b. Locating a web hosting service (the hosting company is likely to provide the domain registration and hosting)

c. Uploading your website to a web server (most likely using FTP)Website folder structure and file referencing
Before you begin creating your web pages you should create your website folder structure to hold your html and other documents. There are a number of rules that all good web developers use when creating the folder structure. They are:

- Create a "root" (or top level) folder with a name that represents the purpose of your website (e.g. peppercorn cafe). This folder is never copied to the web server and therefore doesn't need to follow the naming conventions. However all folders below this (subfolders) will be copied to the web server and therefore must follow the naming conventions. Make sure you only use lowercase and no spaces for these folder names. Commonly used folder names are:
o html
o css
o images
o javascript
o documents
o media
o templates

Once your folder structure is set up you can begin creating your files and saving them to the correct folder. Here are some rules to follow when creating and saving the web pages and related files:

- Only the index.html file should reside in the root folder. All other files should reside in the appropriate folder. For example html files should be saved in the html folder, css files belong in the css folder, and so on
- Do not use spaces, uppercase or special characters when naming your files. While these rules are stricter than necessary, it will help to prevent problems

Finally, when referring to your files within your web pages you should be sure to only use relative pathnames NOT absolute pathnames. An absolute pathname would include a drive letter (e.g. c:/html/contact.html). Using an absolute pathname like this is likely to result in your website not working when you copy the files on to a web server because your files may no longer be on the C: drive let alone at the same level of the folder structure.

A relative pathname will describe the path from the file containing the reference, to the target file. For example if you want to link to a file called contact.html from a web page called gallery.html which is in the same folder, the code would be <a href="gallery.html">. However if you wanted to load an image called penguin.jpg which was located in the images folder, you would use the following code <img src="../images/penguin.jpg" /> . In this example the "../" means you must go up one level to the root folder before going down to the images folder where penguin.jpg is located. If you want to reference a file at a lower level you do not use the double dot structure (..), instead you give the folder name followed by the file name. For example <a href="html/gallery.html">.

Attachment:- Assignment.rar