New Horizons Computer Learning Centers Website Software Created by Ravinder Basra

Aims and Objectives Aims Objectives This is the ability to use a software application designed for planning, designing and building websites. Objectives Create structures and styles and use them to produce websites Select and use website software tools and features to develop multiple page websites with multimedia and interactive features Publish and test multiple page websites with multimedia and interactive features

Website Development Cycle Determine what website content and layout will be needed for each page and for the site Start with Planning to Maintenance – Students to write down what they think the stages of this cycle are

Website Storyboard https://www.draw.io/ Determine what website content and layout will be needed for each page and for the site https://www.draw.io/ - tool to create a basic storyboard https://www.draw.io/

Website Site Map https://www.draw.io/ Determine what website content and layout will be needed for each page and for the site https://www.draw.io/

Task Create Storyboard & Site Map Scenario You work for a local website design company. You have been contracted to create a website for a local fruit shop. Show sample storyboard – sampleAssessment/sitemap.xml & template.xml Create a sample storyboard & site map using: https://www.draw.io/

Website Templates Plan and create web page templates to layout content Demo freetemplates – freetemplates folder - ideas

Website Templates http://www.lipsum.com/ Plan and create web page templates to layout content http://www.lipsum.com/ http://mashable.com/2013/07/11/lorem-ipsum/ Images & text content http://www.freeimages.co.uk/ https://pixabay.com/

Task Introduction to Adobe Dreamweaver Introduce Dreamweaver, interface, split view files panel Dreamweaver folder/dreamweavercs6/lessons/lesson 1,2,3

Task Create a website template Create induction Template from scratch – inductioncolumns3_nav.htm

Website Features & Structures Select and use website features and structures to enhance website navigation and functionality Free images http://www.freeimages.co.uk/ https://pixabay.com/ - selected ones Images types

Website Features & Structures Select and use website features and structures to enhance website navigation and functionality Free images http://www.freeimages.co.uk/ https://pixabay.com/ - selected ones Images types – compare - http://www.verticalresponse.com/blog/image-file-cheat-sheet-use-jpeg-gif-png/ http://www.verticalresponse.com/blog/image-file-cheat-sheet-use-jpeg-gif-png/

Task Explore website features & structures inductioncolumns3_nav.htm – save as template Add images – from https://pixabay.com/ - selected ones – resize etc Add video – from video folder Add video – from youTube – embedded code e.g. <iframe width="560" height="315" src="https://www.youtube.com/embed/aBLYSO0DSVI" frameborder="0" allowfullscreen></iframe>

Website Stylesheets Create, select and use styles to enhance website consistency and readability

Task Create Website Stylesheets Explore style sheets and selectors Move embedded stylesheet to external style sheet – code view – highlight styles – move to icon

Website Laws, Guidance & Constraints Provide guidance on laws, guidelines and constraints that affect the content and use of websites. Explain what access issues may need to be taken into account

Task Accessibility/Validation Tools Cynthiasays http://www.cynthiasays.com/ HTML https://validator.w3.org/ Demo these tools e.g. validator CSS https://jigsaw.w3.org/css-validator/ Nibbler http://nibbler.silktide.com/

File types Explain when and why to use different file types for saving content

File types Explain when and why to use different file types for saving content Client side V Server side diagram/technologies

Task File types Server Side – asp, aspx, cfm, jsp, php Explain when and why to use different file types for saving content Server Side – asp, aspx, cfm, jsp, php Client Side – html, htm, css, js, vbs, Client side V Server side diagram/technologies Data– pdf, xml, txt, accdb, Can you think of any more?

File guidelines & conventions Store and retrieve files effectively, in line with local guidelines and conventions where available.

Task File guidelines & conventions Store and retrieve files effectively, in line with local guidelines and conventions where available. What is camelCase notation? Provide examples.

Web Page Content Prepare content for web pages so that it is ready for editing and formatting.

Task Create Web Page Content Prepare content for web pages so that it is ready for editing and formatting. Images Meta Tags Navigation Techniques - links Media e.g. video inductioncolumns3_nav.htm meta tags & viewport, templates & regions CSS transitions – give drinks cabinet an image id; create id in css file, use css transition window to create a hover effect on the image Form – rate us with radio buttons Widgets Text Social Media Blogs Newsfeeds & Forms

Copyright Organise and combine information needed for web pages in line with any copyright constraints, including across different software

Task Copyright http://www.copyrightservice.co.uk/copyright/copyright ImagesCopyright.pdf Explore several guidelines regarding copyright

Meaning Select and use appropriate editing and formatting techniques to aid meaning Comments, white space, indentation

Task Meaning Apply comments to your CSS & HTML code Select and use appropriate editing and formatting techniques to aid meaning Apply comments to your CSS & HTML code Developer version V live version http://www.willpeavy.com/minifier/

Enhanced Web Features Can you think of any? Select and use appropriate programming and development techniques to add features and enhance websites Can you think of any?

Enhanced Web Features Select and use appropriate programming and development techniques to add features and enhance websites Dreamweaver Featured Add-ons https://creative.adobe.com/addons?pp=DRWV – demo a free one e.g. paper printout patterns – background paper images – show for header or footer Create an image gallery – see imagegallery.html – images same size and use behaviours to swap images, add behaviour to open larger image in new browser window. Show JavaScript code produced. Dreamweaver lessons - Lesson10 – Adding interactivity

Download Information .zip .rar .pdf .odt .docx Select and use file formats that make information easier to download .zip .rar .pdf .odt .docx

Webpage Needs Check web pages meet needs, using IT tools and making corrections as necessary Website Performance http://internetsupervision.com/scripts/urlcheck/check.aspx Site Analyser https://www.site-analyzer.com/

Task Webpage Needs Validation Tools in Dreamweaver Link checker, validator, site reports, spell checker

Publish & Test Publish and test multiple page websites with multimedia and interactive features

Task Publish & Test Cross-browser testing tools/services Publish and test multiple page websites with multimedia and interactive features Cross-browser testing tools/services IETester (http://www.my-debugbar.com/wiki/IETester/HomePage) - Free browser compatibility checker from Core Services for Internet Explorer Versions from 5.5 IE Netrenderer (http://netrenderer.com/) - Free site allows you to check how a website is rendered by Internet Explorer from current versions back to 5.5 Use FTP client to upload to a folder on desktop – e.g. server

Quality Problems Identify any quality problems with websites and explain how to respond to them Respond appropriately to quality problems with websites to ensure outcomes are fit for purpose PowerMapper (http://try.powermapper.com/Demo/SortSite) Checkpoints include : accessibility, broken links, browser compatibility, SEO

Quality Problems 1) Functionality Testing 2) Usability testing Identify any quality problems with websites and explain how to respond to them 1) Functionality Testing 2) Usability testing 3) Interface testing 4) Compatibility testing 5) Performance testing 6) Security testing What do these mean?

Task L Quality Problems Identify any quality problems with websites and explain how to respond to them 1) Functionality Testing e.g. all links, forms, validation 2) Usability testing e.g. navigation, content 3) Interface testing e.g. apps, servers 4) Compatibility testing e.g. browsers, mobile devices 5) Performance testing e.g. web stress testing 6) Security testing e.g. break a login screen Show demo – testPlan.docx Create a test plan based on the above e.g. browser support

Upload & Publish Select and use an appropriate program to upload and publish the website and make sure that it will download efficiently FTP clients

Task Upload & Publish Dreamweaver’s FTP client

Sample Scenario Scenario You are tasked with creating a website about the module you are studying(website software), to help other apprentices. You need to advise on what content is permissible and how best to create their site to enable a quick download on the internet and maintain as small a storage requirement as possible. The site must have a minimum of five pages including both internal and external links and a variety of other advanced features, such as mouse roll-over and links to audio/video features (whether these are stored within the website or externally).

Task Sample Tasks & Questions Download sample, copyright free, images Create a simple storyboard with 5 distinct features Create a template in Dreamweaver based on your storyboard. Use cascading style sheets for styling. The template should include features such as: navigation structures, media content, and suitable text. Create an image gallery in Dreamweaver Embed a suitable video from Google YouTube into a webpage Create a suitable test plan for your website Test your website using automated tools Upload & Publish your website

Q&A