A209 Dreamweaver

OneNote jgibbs@eastleigh.ac.uk totton.org/e13 css cheatsheet BTEC Level 2 IT pdf (?domain 172.16.0.30)

Unit 13: Web Production

Assignment 1: Word Document

You work for Total Control, a large corporation that specialises in targeting Websites to acquire and exploit.

Identify two Websites of interest to Total Control.
Write a report for your manager explaining why Total Control should takeover these sites.

What can be improved to increase the sites’ values - commercially and for their users?

Choose 2 Websites: 1 mostly static; 1 at least partially dynamic (data-base driven for e-commerce, personalised content etc.)
Explain their intended uses and features
Review how the features improve presentation, usability, accessibility, and performance.
Discuss the strengths and weaknesses of each site.

Word document submitted to your OneNote portfolio by midnight on 8th November 2016.

Why are websites used? The purpose of a website is to present information to an audience by using a collection of related web pages, traditionally hosted on a web server. This information may include text, graphics, video or other digital assets.

Typical uses of websites, including:

● presenting information e.g. advertising, news BBC | Sky News | DramaAlert on YouTube | Scarce

● browsing and searching for information e.g. real-time information Google | Yahoo| Bing | Wikipedia

● improving productivity e.g. email, collaborative working Office 365 | GoogleDocs

● making decisions e.g. financial GoCompare | Which, managerial

● communicating with people e.g. social networking Facebook | Google+ | Discord | Teamspeak | MySpace, video conferencing Skype

● e-commerce e.g. shopping, banking Amazon | PayPal | banks...

● downloading information e.g. data, media Audible.com | BBC iPlayer | Amazon | Filesharing sites such as PirateBay

Features of websites:

Hyperlinks; action buttons; hot spots; templates; email links; registration and logins; forms (user input and feedback); accessibility (e.g. text to speech); e-commerce facilities; online forums discourse.org; aesthetics (e.g. colours, layout, graphics/video/animation, audio, text Webfonts, use of style sheets).

Assignment 2

Design, create and evaluate a Website for the sinister corporation known as Total Control.

It will include:

home page (as index.html)
one page for the first Website that you discussed in assignment 1
one page for the second Website that you discussed in assignment 1
a similar page for your own site as a possible takeover target
plus contact details

Hand in 29th November 2016 as a link from your OneNote portfolios.

Sites will have an address such as www.totton.org/tc/jed

download a pdf of the site map template from http://www.totton.org/tc

links to student redesigns for Total Control

Rollovers

Accessibility

Referencing

Harvard, Modern Languages Association (MLA), Modern Humanities Research Association; IEEE

citethisforme.com | neilstoolbox.com

13th September 2016

Introduction to the unit resources.

Setting up your first live Websites at www.totton.org/e13/yourfoldername

20th September 2016

Animating in Adobe Photoshop. Export > Legacy Save for Web and save as .gif to show the animation on your Web page.

Some influential animators of the past :
Great traditional 2D animator Chuck Jones.
3D monster animator Ray Harryhausen.
State of the art in 2016:
Kubo by Laika uses CGI and 3D printed heads combined with stop-motion
Traditional Disney animator Glen Keane explores VR

If you enjoy animating stick figures, try the free Stykz (Windows, Mac, Linux) and Pivot (Windows only). Export as gif to add to your site.

27th September 2016

Recap of Dreamweaver; Liquify tool in Photoshop.

Image Maps allow you to set more than one link from an image.

Introduction to the unit requirements.

4th October 2016

Fonts in Dreamweaver and Webfonts from Google and Fontsquirrel

Creating Favicons - the little icon on your browser tab or next to a bookmarked favourite.

Wacom graphics tablets

11th October 2016

Introducing Assignment 1.

Static .html and Dynamic .asp; .jsp, .net websites

Jed's introduction to example adrianboswell.com

Working on your personal sites.

18th October 2016

Working on Assignment 1. Press function key F12 to get access to a page's sourcecode in Chrome.

Example interactive dynamic Web site, with all the 3D items drawn from a database: heroforge.com | FAQ | heroforge blog | 3D printers Shapeways blog and about heroforge 1, 2, 3 | kickstarter (blocked in college?) | Shapeways full colour sandstone

Heroforge uses WebGL, a JavaScript technology that is available in recent versions of Google Chrome and Firefox (you need to enable it in Apple Safari). 3dtin online builder | 30 examples from 2014 | 30 more from 2015 | sketchfab | Learn WebGL

History of the internet and WWW

Technology+behind+YouTube

good tech reviews on YouTube

25th October 2016

HALF TERM

1st Nov 2016

Working on Assignment 1.

Still unsure what sites to compare?

Maybe the Japanese version of SquareEnix? (of Final Fantasy/DragonQuest renown. Probably blocked by college though).
How about CSSZenGarden then - a static site that demonstrates how you can dramatically change the look of an html page by swapping the Cascading Style Sheet file that controls its style and the images loaded.

8th Nov 2016

Warner Bros Studio - Harry Potter visit
Hand in for Assignment 1 - by midnight as a Word document on your OneNote portfolio.

Three 'layers' of a Web page:

HTML (Hyper Text Mark-up Language) provides the structural layer - containing headings and text plus a way to insert images, videos and sounds.
CSS (Cascading Style Sheets) provide a presentational layer - positioning, enhancing and keeping the consistency of the pages across your Web site.
JavaScript (padlet) (padlet formatting) provides a behavioural layer - adding interactivity with forms, animations, image swaps, mouse pointer effects, scrolling banners and much more.

RESOURCES

Tutorials
HTML	CSS	JavaScript	JQuery
codecademy.com - sign up for free			freecodecamp interactive training
Microsoft Virtual Academy		Khan Academy \| character	lynda.com 10 days free

Gallery of CSS Web design ideas at csszengarden.com

http://www.mezzoblue.com/zengarden/resources/

Web fonts from Google and FontSquirrel

net2ftp.com online ftp Filezilla ftp free software

discourse.org/ open source free forum option

cssloggia.com and

WordPress plug-in for CSS animation

opentracker.net/article/hits-or-pageviews

http://www.quirksmode.org/css/cascading/

Webfonts

Creating and using Favicons , the 16x16 pixel images used in the address bar and bookmarked favourites list.
Design a logotype or photographic image that will work as a tiny square, then upload a jpeg version and receive a zipped version in favicon.ico format, perhaps with an animated .gif variant for Firefox users (they will see the static .ico version otherwise). You can also create a larger icon that iPad and iPhone users can add to their home screen as a short cut to your Web site (it looks like an App).

using FavIcon from Pics

favicon.co.uk for more information. If you want to make bigger, scaleable icons for Mac or Windows desktops, consider the iconbuilder plug-in for Photoshop from iconfactory.com (but it is overkill for just creating little favicons).

http://www.corelangs.com/css/box/hover.html

Range of Development Tools and resources

notepad Notepad++ \| cheatsheet	Microsoft's Visual Studio Code
BlueGriffon open source	Adobe Dreamweaver *Set up your site on totton.org
jsfiddle.net \| jsfiddle docs \| tutorial	Phaser HTML5 + CSS + JavaScript game development
Intro to JavaScript programming	JSbin \| Getting started
javascriptkit.com	stackoverflow coders resource
Learn from 12 JavaScript Experts
washington.edu lessons	washington ID and Class intro

iFrames are now established as the standard way to include a movie clip from YouTube or a map from Google.

alternative iframe-generator

Framesets seem to help navigation - why and how they are best avoided

useful snippets of CSS:

Responsive images can resize to different screen sizes. Here is an example page. Simply paste this code into the <head> of your html document, or add it to your linked external CSS file to instantly make all the pictures on your page(s) scale down as needed for smaller screen sizes:
<style>
img {
max-width: 100%;
height: auto;
}
</style>
To centre a box you need to set margin to auto first: http://www.w3schools.com/css/css_align.asp
add a CSS background colour to your page:
background-color:<style type="text/css">
body {
background-color: #33eeff;
}
</style>

Web colo(u)rs - RGB Hexadecimal colorpicker and named colors - try changing colors at W3Schools (also Websafe Colors 216/256).
There are 16,777,216 colours using #RRGGBB notation.

(Each colour channel is described using 1 byte of information. Byte can contain 256 different values. So for 3 channels, it's: 256^3 = 16,777,216 = 16M
However, modern browsers support transparency - #AARRGGBB, by similar logic you get: 256^4 = 4,294,967,296 = 4G)

http://www.tmaskall.com/timetable

https://eastleighac-my.sharepoint.com

Good stock photo sites include: istockphoto.com; www.shutterstock.com; www.corbisimages.com and Adobe has relaunched its own offering, integrated with its CreativeCloud.

Free options include Google advanced image search (hidden under the gear wheel)

Set the licensing options at the bottom of the list set to free to use.

Flickr Commons