Project: Web Designer

Phase 1: The World Wide Web

Phase 1: The World Wide Web Outcomes I can explain what HTML is and how it works. I can explain what JavaScript is and how it works. I can explain what a Web Browser is and how it works. I can describe and explain some of the issues around web pages.

Marketplace Questions What does HTML stand for? What is web hosting? What is JavaScript? Name 5 factors that can affect the speed a web page loads. Who invented HTML? Name 4 examples of web browser. Who invented JavaScript? Why did people not try to add images to the first web pages? When was HTML invented? What is the point in security settings? When was JavaScript invented? What are web browser plugins?

Marketplace – How it Works! Round 1: The Test (1 minute) Round 2: The Research (20 minutes) Round 3: The Marketplace (15 minutes) Round 4: The Sharing (10 minutes) Round 5: The Test (15 minutes)

Phase 2: Programming

Phase 2: Programming Outcomes I can program in a block-based language. I can program using basic JavaScript.

Hour of Code: Flappy Bird

Hour of Code: JavaScript

Phase 3: Web Development Languages

Phase 3: Web Development Languages Outcomes I can create a basic webpage using HTML. I can describe what the basic elements of HTML do. I can use more complex elements of HTML. I can use JavaScript to enhance webpages. I can use Web Authoring Software to create more complex webpages.

HTML HyperText Markup Language (HTML) is one of the languages used to build web pages. It is written as HTML elements which are tags enclosed in angle brackets (like ). Web browsers can read HTML files and render them into visible or audible web pages.

Writing HTML To start you have to tell the web browser that you are going to be writing code in HTML so you would write To finish you have to tell the web browser that you have stopped writing code in HTML so you would write In HTML / means ‘end that tag’.

Writing HTML HTML is usually written in a ‘Text Editor’, for example Microsoft Notepad. The HTML would look like this:

Writing HTML When the HTML is opened up in a Web Browser it would look like this:

Start Writing HTML! HTML Coding #1 Firstly… Finally… Secondly… HTML Coding #2

Ordering HTML With the person next to you… Put the cards provided in the correct order to make a basic web page.

This is the order…

And this is what it looks like…

HTML Challenges How many points can you earn? HTML Gradient Background = 10 Points HTML Adding Games = 5 Points HTML Scrolling Text = 10 Points HTML Table = 10 Points HTML Calculator = 15 Points HTML Log-in Code = 15 Points HTML Scrolling Image = 5 Points

Test Your Knowledge!

JavaScript JavaScript is an add-on script for HTML which can add a greater range of features such as validation and interactivity.

Writing JavaScript JavaScript, like HTML, can be written in a ‘Text Editor’, for example Microsoft Notepad. The JavaScript would look like this:

Writing JavaScript When the JavaScript is opened up in a Web Browser it would look like this:

JavaScript Challenges How many points can you earn? JavaScript Display Date, Time and Moving Clock = 5 Points JavaScript Pop-up Box = 10 Points JavaScript Prompt Box = 10 Points JavaScript Pong = 30 Points Body Fat Calculator = 10 Points Falling Snow= 10 Points Image Match Game = 10 Points Paint Mixer= 10 Points

Website Development Software Website Development Software lets you create Web pages visually. It generates the HTML code for the pages. You can see the code by switching between the page layout and the HTML.

Create an Advertising Banner Follow the instructions to create an using Serif DrawPlus.

Create an Animated Banner Follow the instructions to create an animated banner using Vectorian Giotto.

Create Forms Follow the instructions to create forms using WebPlus.

Create Hotspots and Image Maps Follow the instructions to create hotspots and image maps using WebPlus.

Create Drop-Down Menus Follow the instructions to create drop-down menus using WebPlus.

Setting up a Cascading Style Sheet Follow the instructions to set up a Cascading Style Sheet (CSS) using Expression Web 4.

Phase 4: Website Design and Creation

Phase 4: Web Design Outcomes I can produce a site map. I can produce page plans. I can create a functioning website including all the elements listed in the ‘World Wide Web Portal’.

The Brief

Design: Success Criteria I can produce a site map. I can produce detailed plans for at least 5 webpages. My plans show the use of a house style. My plans show the position of text, images, animations, custom graphics, any interactive elements and clear details of navigation.

Design

Create Your Website! Remember to follow your site map and page designs. Remember to refer to the ‘World Wide Web Portal’ assessment to make sure you include all the right elements.

Mid-Production Evaluation #1 Self-assess your website using the Web Designer Self Assessment worksheet.

Mid-Production Evaluation #2 Ask a partner to assess your website using the Web Designer Peer Assessment worksheet.

Phase 5: Website Testing and Evaluation

Phase 5: Web Testing Outcomes I have tested my website to ensure full functionality. I have evaluated my website including: – Suitability for audience and purpose; – Readability; – Usability; – Accessibility.

Testing: Success Criteria I can provide evidence that I have tested my website and that my navigation system works effectively. I have fixed any faulty or broken links. I can provide evidence that I have I have tested other features of my website. I can provide evidence that I have conducted user testing.

Test Your Website Create a test plan for your website. Provide screen evidence to show that your website is working. If you have to fix it what did you have to do? Tests may have to be done twice if major fixes have to be implemented.

Peer Review Ask a partner to assess your website using the Web Designer Peer Review worksheet.

Evaluation: Success Criteria I have evaluated my website. My evaluation includes: – Suitability for audience and purpose; – Readability; – Usability; – Accessibility.