BTEC NCF Dip in Comp - Unit 15 Website Development Lesson 12 – Publish and Test Mr C Johnston.

Slides:



Advertisements
Similar presentations
© 2011 Delmar, Cengage Learning Chapter 1 Getting Started with Dreamweaver.
Advertisements

WEB DESIGN TABLES, PAGE LAYOUT AND FORMS. Page Layout Page Layout is an important part of web design Why do you think your page layout is important?
Page Design Scroll zone Data Tables Screen Readers
LO4 - Be able to create websites
UNIT 12 LO4 BE ABLE TO CREATE WEBSITES Cambridge Technicals.
Keywords: BTEC IT, Subsidiary Diploma, Storyboard, House Style, Web Production, Peer Assessment Lesson Objectives: You will be able to DESIGN a Website.
XP Information Technology Center - KFUPM1 Microsoft Office FrontPage 2003 Creating a Web Site.
Explore the Dreamweaver Workspace View a Web page and use Help Plan and Define a Web site Add a Folder and Pages, and set the Home page Create and View.
1 Computing for Todays Lecture 22 Yumei Huo Fall 2006.
New School Websites Teacher Pages. Visit the SCUSD Website for videos tutorials: For more information.
Creating a Web Page HTML, FrontPage, Word, Composer.
A detailed guide on how to set-up your printing storefront. Please Note: Storefronts are compatible with all browsers, however for optimal use of the admin.
CMS Wiki Pages CMS Pages, the only approved and supported website service for CMS employees, has been failing and an alternative needed to be implemented.
Name Teacher: Group: 1 Unit 2 – Webpage Creation.
Web Technologies Website Development Trade & Industrial Education
G053 - Lecture 20 Testing Websites
Tutorial 1: Browser Basics.
CIS 205—Web Design & Development Dreamweaver Chapter 1.
G053 Lecture 12 Introduction To HTML Mr C Johnston ICT Teacher
Wimba Presenters Guide North Dakota University System 2009.
Presented by Graduate Design Group 2 Meredith, Jennifer, Cammay and Diane.
1 After completing this lesson, you will be able to: Transfer your files to the Internet. Choose a method for posting your Web pages. Use Microsoft’s My.
Evaluating & Maintaining a Site Domain 6. Conduct Technical Tests Dreamweaver provides many tools to assist in finalizing and testing your website for.
Saving PowerPoint Presentations as Web Pages Your Logo Here Open the PowerPoint Presentation. To convert to a format compatible with web browsers, launch.
Chapter 1 Getting Started With Dreamweaver. Exploring the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Unit 1 Welcome to the Internet: the Tools of the Trade.
Internal and External Links Web Design – Section 3-6 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
Photoshop Image Slicing. Reasons to Image Slide To create links out of sliced images To optimise different areas. (flat areas of colour, such as logos,
Double –Click on the Netscape Icon on your desktop The following are a series of steps to help you get started with Netscape Composer.
G053 - Lecture 18 Uploading Your Site Mr C Johnston ICT Teacher
Learning Aim C.  In this section we will look at some simple client-side scripts, browser compatibility, exporting and compressing and suitable file.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
XP Creating Web Pages with Microsoft Office
G046 – Lecture 2A Recognising Web-Technologies Mr C Johnston ICT Teacher
Getting Started with Dreamweaver
MicrosoftTM SharePoint Content Management SystemTutorial
Getting an account with WordPress.com
Tonga Institute of Higher Education IT 141: Information Systems
3.02H Publishing a Website 3.02 Develop webpages..
Validation.
Project Objectives Publish to a remote server
Learning the Basics – Lesson 1
CNIT131 Internet Basics & Beginning HTML
Evolution of Internet.
USING DREAMWEAVER Contents: Assigning a Root Folder
BTEC NCF Dip in Comp - Unit 15 Website Development Lesson 05 – Website Performance Mr C Johnston.
GCE Applied ICT G053: Lesson 07 Design Tools and Techniques
Publishing and Maintaining a Website
Getting Started with Dreamweaver
Microsoft FrontPage 2003 Illustrated Complete
Validation.
An Introduction to Using
CoreFTP.
Module 6: Creating Web Pages and Working with Channels
Exploring Microsoft® Access® 2016 Series Editor Mary Anne Poatsy
Tonga Institute of Higher Education IT 141: Information Systems
Unit 2 – Webpage Creation
Tutorial 6 Creating Dynamic Pages
Objective Understand web-based digital media production methods, software, and hardware. Course Weight : 10%
CoreFTP.
USING DREAMWEAVER MX 2004 Contents: Assigning a Root Folder
Getting Started with Dreamweaver
LO4 - Be Able to Update Websites to Meet Business Needs
4.02 Develop web pages using various layouts and technologies.
Tonga Institute of Higher Education IT 141: Information Systems
Unemployment Insurance Agency Michigan Web Account Manager
How to add a page… You will need to add new pages to your website depending on the brief. You do this by: Click on the Add new page button Write the new.
ENDANGERED ANIMALS A RESEARCH PROJECT
Tutorial 7 – Integrating Access With the Web and With Other Programs
Designing a Web Site.
Presentation transcript:

BTEC NCF Dip in Comp - Unit 15 Website Development Lesson 12 – Publish and Test Mr C Johnston

Learning Outcome Understand how to publish a website on a website Understand the principals of testing and tools which can be used to carry this out Understand the process of review

Overview To upload your website to a server you need to use the application layer protocol FTP (file transfer protocol) to move the files An FTP client will allow you to FTP to copy files from your computer to your folder on the web server Most use drag and drop so its just look copying files from a fixed disk to a flash drive You will need to log into the server before transfer can begin Your teacher will provide you with a username and password for the computech server

Using FTP Windows Explorer Windows has a built in FTP client – to access type the FTP address of the web server within WINDOWS EXPLORER and add your username when prompted enter your username and password into the box and your folders should appear. Treat the area like a pen drive dropping in files and folders

Common Issues Homepage doesn’t display? Images missing? Delete the home.html from the area before you start and replace with your own Images missing? You have not transferred your images folder Form doesn’t work? Database not uploaded to the dbase folder, coding error in asp file Its slow? server may not be able to cope with the demand of 20 students uploading at once – be patient

Activity Finish your site and use an FTP client to upload the site ready for testing REMEMBER to enter your username after the FTP address

Overview It is important to test a website to ensure that potential visitors can fully experience your site and are encouraged to visit again, To make site sure your site works you need to write a test plan which examines all aspects of your site, You also need to consider: Visitors may use different browsers to view your site, Visitors computers may be set to different resolutions, Visitors accessing the site using different devices, All issues need to be addressed in your testing.

Testing Categories Each page needs to be tested for: Correct layout, Page loads quickly, All images and other media displayed, All images and other are of a reasonable quality and don’t appear pixelated, Can hear any sound on the site Text has no spelling errors, Hyperlinks work (page based, internal, external and email), Scripting works correctly (rollovers, form validation, ASP), Other browser compatibility, Other resolution compatibility.

Test Plan Outline Your test plan needs to be a formal document written prior to your site being uploaded to a server, You should write an entire plan and make copies of it for each browser you intend to test you site with, A suitable way of presenting your test plan is to create tables with a series of tests for each of your pages, Remember to relate each test back to the initial requirements brief.

Test Plan Table Example: IE User Requirement Addressed Expected Result Actual Result Pass / Fail Date Corrective Action Logo Displayed The website uses the companies house style CompuTech logo is displayed As expected Pass 01/12/09 None Navigation Bar Appears Website is easy to navigate Navigation bar appears Navigation Bar Drop Downs Work When mouse goes over labels - menus drop down Navigation Bar Hyperlinks Work When mouse goes over turns to red and can click on it to take you to correct page

Test Plan Table Example: Firefox User Requirement Addressed Expected Result Actual Result Pass / Fail Date Corrective Action Logo Displayed The website uses the companies house style CompuTech logo is displayed As expected Pass 01/12/09 None Navigation Bar Appears Website is easy to navigate Navigation bar appears Navigation Bar Drop Downs Work When mouse goes over labels - menus drop down Bar is static and drops do not work Fail Recode the JavaScript as it only works with IE Navigation Bar Hyperlinks Work When mouse goes over turns to red and can click on it to take you to correct page Now I have fixed the previous error all hyperlinks work properly

Test Plan Table 2 Evidence You need to include evidence within your testing, These could be as additional referenced figures or included within the table, Don’t include screen shots for everything but need to be certain testing has been carried out - include shots showing errors and that they have been fixed Test#3 – navigation bars now work in Firefox

On The Phone!!!

User Testing Need to make a questionnaire to gauge user opinion The more people who answer the better Make adjustments to you site based upon what people say… Make sure you have evidence of the changes…

Testing Tips Make sure all opened tags are closed Ensure that your images are as small in size as possible – reduce the number of colours used, Use formatted text rather than graphics, Implement your pages to suit a display 1200 pixels wide Tests and comments that show your website meets the initial user requirements

Activity Example testing Based on your designs for your website, develop a test plan which will fully test your work. Ensure you design it so it tests you site using at least two browsers, and different platforms You may wish to include the WAI standards already learnt about previously, Remember to evidence all improvements