Unit 09: Web Development A/601/3245 PDF from OCR IT Homepage Live sites
21st September 2016
We start in Hu209 which is the Mac suite IN MEDIA next to theatre (NOT the Macs we have used before!)
7th September 2016
Introduction to the Cambridge Technicals OCR Level 2 IT Course. A look at the resources listed on this page.
Image optimisation: target image output; image bit depth; image resolution; image dimensions; image compression
http://www.shapeways.com and www.heroforge.com
8th September 2016
*Set up your site on the iMacs for totton.org/IT Live sites
A little of Kubo with its innovative blend of CGI, 3D-printed heads and stop-motion.
-
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.
9th September 2016
Adding links to your pages to make a site. Using Photoshop to create the graphics for buttons and rollovers.
14th September 2016
More on animating your graphics and buttons in Photoshop. Setting up your sites (again) this time on Windows PCs.
Tutorial: introduction to Safeguarding and Prevent.
15th September
Working on your Web Development sites. Introduction to Unit 10 Computer Graphics
16th September 
Embedding a movie clip from YouTube or a map from Google using iFrames:
alternative iframe-generator more control over YouTube clips
To edit YouTube clips try clipconverter.cc or keepvid then download as mp4
Selecting a Class Rep (random)
21st September 2016
We start in Hu209 which is the Mac suite IN MEDIA next to theatre (NOT the Macs we have used before!)
RESOURCES
 Tutorials |
|||
| HTML | CSS | JavaScript | JQuery |
 codecademy.com - sign up for free |
 freecodecampinteractive training |
||
| Microsoft Virtual Academy | Khan Academy | character | lynda.com 10 days free | |
- thesitewizard.com/css/ Allow user to switch CSS using buttons
- HTML Source Introduction to CSS | W3 intro to style sheets
- understanding-css-positioning-part-1; part 2; part 3
Gallery of CSS Web design ideas at csszengarden.com
- Web fonts from Google and FontSquirrel
cssloggia.com and
WordPress plug-in for CSS animation
opentracker.net/article/hits-or-pageviews
http://www.quirksmode.org/css/cascading/
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).favicon.co.uk for more information.
http://www.corelangs.com/css/box/hover.html
Range of Development Tools and resources
Microsoft's Visual Studio Code
BlueGriffon open source
Adobe Dreamweaver
jsfiddle.net
Phaser HTML5 + CSS + JavaScript game development
JSbin
javascriptkit.com- 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)
Legal and ethical considerations: legal (copyright, libel, defamation, British Board of Film Classification, Race Relations Act 1976 and later amendments, Obscene Publications Act 1959 (Internet Watch Foundation link) Wikipedia entry for Internet_Watch_Foundation and later amendments); ethical (decency, representation of social groups)
referencing
eg Harvard, Modern Languages Association (MLA), Modern Humanities Research Association; acknowledgements