Topic D : The World Wide Web (7)

https://docs.google.com/presentation/d/108jXz3lqPfhK37971CEJnZt1AYcEjk_sM85nKE8urjQ/preview
Most of us with digital devices use the World Wide Web every day - it's become the 'go to' place for finding the answers to all the questions under the sun (and in the sky). In this topic, we will learn what the World Wide Web actually is, how it differs from the Internet and how to create simple (and not so simple) web pages.

We are learning ...
  • About the World Wide Web
  • About the structure of web pages
  • How to construct simple web pages using HTML, CSS and Javascript
  • About 'attribution' and 'referencing'
  • How to store data using simple databases
So that we can ...
  • Describe how the World Wide Web was created and how it is structured
  • Demonstrate how webpages are ranked by search engines
  • Describe the role of the web browser
  • Describe the relationship between HTML, CSS and JavaScript and how they are used to construct webpages
  • Construct webpages using Mozilla Thimble
  • Describe copyright / fair dealing and why it is important
  • Explain how Creative Commons operates
  • Retrieve data from a simple paper database



Digital literacy focus : Advanced word processing skills

Controlling print options
Using the ruler / creating tab stops
Page orientation
Bulleted and numbered lists
Adjusting list indents
Advanced table operations - inserting and deleting rows and columns, borders and shading, cell styles.
Margins
Line spacing
Paragraph alignment and indentation (using the ruler)

http://www.20thingsilearned.com/en-GB
Spend 30 minutes reading this beautiful book
Hold down CTRL whilst you click any external links

https://docs.google.com/drawings/d/1CMUu_zjbfaTjH7LUKk31ZrB-_GOtzzgJpX23q0VIaSE/preview
5 things I learned


ACTIVITY 1
What is the 'World Wide Web'?


The World Wide Web (or 'the web' for short) was invented by British software engineer Tim Berners-Lee in 1989, whereas the first practical packet switched network (ARPANET, the early Internet) was invented in 1969.


Dom Joly - Sir Tim Berners-Lee (5:10)
Read about Tim Berners-Lee the history of the web at Web Foundation.

https://www.google.com/doodles/30th-anniversary-of-the-world-wide-web
Google celebrates the 30th Anniversary of the World Wide Web - well done Tim!

https://docs.google.com/drawings/d/1RelheHDBrjINA5SSJZYz7uGjPrMiYsNYtriP6eakgZc/preview
Web inventor



Task 1.1 What is the web is like?
Where we learn how web pages link to each other and how page ranking works


Look carefully at the algorithm, but don't do anything yet ...

The actual 'PageRank' algorithm used by Google is quite complex. Try to use this simplified algorithm to rank the web pages in the order that they might appear in search results. Assume each page contains the actual search term that you were looking for (i.e. they should actually be in the search results!)

Massively oversimplified but perfectly workable PageRank algorithm.

1. Draw a diagram of the network of webpages and connect together each page with an arrow to show the link.

2. Draw a table with the following headings and write a list of the Pages in the first column.


3. The sum of the page ranks for all the pages in our web is ONE (1). Divide one by the number of pages and record this as the Initial Page Rank of each page in the table.

4. Now look carefully at each page and count the Number of outbound links from the page and record this value in the third column in the table. 

5. Divide the Initial Page Rank by the Number of outbound links each page has. This tells you how each pages Initial Page Rank is shared amongst the pages it links to, so, call this the pages Share and write this in the table.

6. Now, look at each page again and write down a List of inbound pages which link to it in the table. These are called Backlinks - the more backlinks a page has (and the higher the share provided by each backlink), the higher the page will rank in the final search results.

7. Finally, add up the 'share' from each backlink and write down this value in the final column as the Final Page Rank. Now, label the pages in order starting with the page with the highest rank and ending with the page with the lowest rank.



Watch the teacher demonstration

Your teacher will show you an example of how to follow this algorithm before you try this example.

Work out your own page ranking for this tiny World Wide Web

If your teacher has not already given you a copy, download the worksheet What the Web is like ... and use it to present your work for assessment.

There are 5 pages in our little World Wide Web ...
  • Page A has outbound links to pages B and C
  • Page B has outbound links to page A
  • Page C has outbound links to page A, B, D and E
  • Page D has outbound links to page B and C
  • Page E has outbound links to page B and D 
What order would the pages appear in on the search results? 


Poor old Sergey Brin doesn't get a look in :(

Hand in your worksheet for assessment

As the title say's, hand in the worksheet to your teacher for assessment.



Task 1.2 Web browsers
Where we learn about how web pages are retrieved from remote servers and about the features of web browsers.


The first web browser was invented by Tim Berners-Lee (obviously) in 1990 and released onto the world in 1991 which is when the World Wide Web really took off!

Yeah, pretty much.

Read the following passage

Read the following information carefully - there are lots of keywords and initialisms to learn.

When you type in a website address or URL (Uniform Resource Locator) into a web browser view a website, you are usually requesting an HTML (Hyper Text Markup Language) document stored on a server somewhere else in the world via your ISP (Internet Service Provider) using a set of rules called HTTP (Hyper Text Transfer Protocol) and the Internet which is then returned to you as a response.


Complete the worksheet (and hand it in!)

If your teacher has not given you a copy already, download the worksheet Web browsers, complete the worksheet by hand and give it to your teacher for assessment.



ACTIVITY 2
How do I build a webpage?




The following activities use Mozilla Thimble - you are only allowed to sign up for an account if you are 18 years old (which I doubt many of you are) or if you are 13 or over and have the express permission of your parent or guardian. I will not expect you to sign up for an account but, if you do, make sure you have got permission.

However, if you do not have an account, you will have to download your website after the end of each session or you will lose all the work you have done - be aware of this!

Because you will probably have small screen resolutions, you will find it hard to arrange the resources you need to be on the screen at the same time. In this section, you will be expected to master switching windows using the ALT + TAB key combination to help you switch between the instructions and the work you are completing.



Task 2.1 Common HTML elements
Where we learn how to construct a simple page using just simple HTML elements.


https://www.w3schools.com/tags/default.asp
Click to view official reference

Make sure you have a copy of the worksheet for the task

If your teacher has not already given you a copy, download the worksheet Simple HTML elements which you will use during the task. You are expected to work independently through this task. Follow the steps below carefully.

Look carefully at each part of the webpage

Look carefully at each part of the index.html file and the webpage that it generates. Make sure you can spot ...
  • comments,
  • paragraphs,
  • hyperlinks,
  • headings,
  • ordered lists,
  • unordered lists,
  • line breaks,
  • images and
  • horizontal rules.

 Match and label them on your copy of the handout and hand it to your teacher! 

Remix my Thimble project

Click here to open a copy of my Thimble project in a new tab. It's a little webpage about me! Make sure you click the 'REMIX' button at the top right hand side of the page to get your own copy. You will probably not be making an account on the Thimble website so you will have to download your website as a .zip file after you have completed the task.

Change the heading

Change the heading on Line 12 to something else like 'A webpage about me'. Remember to leave the tags alone - only replace the text between them.

Change the images

Look in the 'images' folder in the FILES panel. You will see 20 images of animals. Change the animals which display in the webpage by changing the filenames in the <img> tags on Line 18 to Line 22. Again, by careful to change just the filenames and nothing else from the element.

Change your hobbies

I'm sure that your hobbies are much cooler than mine. Change the hobbies on Lines 28 to 30. Don't add any more hobbies at this stage or you will change the line numbers for the rest of the task.

Change your top three video games

You can either change the video game titles or you can make your own top three on a different subject by changing the title on Line 34 and the list items on Lines 37 to 39.

Change the hyperlinks

Finally, change the hyperlinks to three of your favourite websites. Make sure you only replace the web addresses / URLs and that you keep the target="_blank" part - this ensures that the link opens in a new tab.

Submit your new website for assessment

Either ask your teacher to assess live or download a compressed 'zip' archive from the menu in the FILES section and submit this to your teacher using email.



Add some of your own images

Try to add some of your own images to the page. You will have to download a copy of the image from the web, upload it to the 'images' folder in the FILES section and then change the image src filename. The images will stay 48px wide on the page even if they are bigger in reality, but bigger images will take longer to load, so be careful.

Add new hobbies and make a top 10

Try to add some new hobbies to the unordered list and create a top 10 rather than a top 3.


https://docs.google.com/drawings/d/1GSd7jnb5yV0VRlboNXMGD64y2NNI67wu8EKJXm6rUvs/preview
HTML cheatsheet

https://docs.google.com/drawings/d/1NuiSa5wsqufmSkVGhbsvEo-cePjSu_MAQPjtLmx8W_U/preview
Simple webpage (13+)



Task 2.2 Common CSS properties
Where we learn how to change the appearance of HTML elements using CSS properties.


Remember that HTML is only used to markup the content of a webpage, not the appearance - that's the job of CSS!


https://www.w3schools.com/cssref/default.asp
Click to view official reference

Make sure you have a copy of the worksheet for the task

If your teacher has not already given you a copy, download the worksheet Recipe to use during the task. You are expected to work independently on this task. Read each step carefully and follow the instructions.

Remix my Thimble project

Click here to open a copy of my Thimble project in a new tab. It's a recipe for a wholesome breakfast! Make sure you click the 'REMIX' button at the top right hand side of the page to get your own copy. You will probably not be making an account on the Thimble website so you will have to download your website as a .zip file.

Inspect the HTML file

Look carefully at the index.html file - it is composed of various elements plus a lot of div elements and some span elements. The div elements are used to structure the page into blocks. The span elements are used to apply styles inline.

Link the HTML document to an external stylesheet

Add this markup to Line 8 in the index.html document.

<link rel="stylesheet" href="style.css" />

Without this line, the index.html file will not know where the style sheet is located and can't use any of the styles!

Look carefully at the stylesheet

Click on style.css in the files panel and inspect its contents. 
  • The element selectors are shown in green - these are designed to apply style to particular HTML tags. 
  • The ID selectors are in yellow, start with a hash (#) and are used to identify a single element in the markup.
  • Finally, the class selectors are in yellow, start with a full stop (.) and are used to identify a group of tags which are to be styled in the same way.
All the styles required for the document are present but the properties have no values. Make sure you enter the values for the properties carefully and look at the effect they have on the HTML markup.




Style the body element

Let's set up the body of the document. The body element determines the default style for the whole page. Complete the body selector properties with the following values ...
  • Set the background-color property to #ffd49b
  • Set the color property to #000000
  • Set the font-family property to "Open Sans"
  • Set the font-size property to 14pt
  • Set the margin property to 10px
  • Set the text-align property to center (take care with the spelling!)
Your body section should look like this after you have finished. Notice that the values are between the colon and the semicolon - each line must end with a semi-colon.

body {
  background-color: #ffd49b;
  color: #000000;
  font-family: "Open Sans";
  font-size: 14pt;
  margin: 10px;
  text-align: center;
}

 Now complete Part 1 of the handout  

Style the container block

There is a single div in index.html with the id 'container'. This is designed to hold all the other elements of the page and provide a border to the contents. Complete the #container selector properties with the following values ...
  • Set the background-color property to #f5e7d5
  • Set the border-radius property to 10px
  • Set the display property to inline-block
  • Set the padding property to 10px
  • Set the width property to 740px
 Now complete Part 2 of the handout 

Style the left panel block

The left panel is a single div element with the id 'leftpanel' which is designed to sit on the left inside the container and holds the ingredients and the recipe. Complete the #leftpanel selector properties with the following values ...
  • Set the display property to inline-block
  • Set the float property to left
  • Set the padding property to 10px
  • Set the text-align property to left
  • Set the width property to 450px
 Now complete Part 3 of the handout 

Style the right panel block

Like the left panel, the right panel is a single div element with the id 'rightpanel' and is designed to sit on the right inside the container and holds the image and the comments. Complete the #rightpanel selector properties with the following values ...
  • Set the display property to inline-block
  • Set the float property to right
  • Set the padding property to 10px
  • Set the width property to 250px
 Now complete Part 4 of the handout 

Style the footer block

The footer block is a single div element with the id 'footer' which is designed to sit at the bottom of the container and contains the 'Find out more' hyperlinks. Complete the #footer selector properties with the following values ...
  • Set the background-color property to #ffb031
  • Set the border-radius property to 10px
  • Set the clear property to both
  • Set the padding property to 10px
  • Set the text-align property to center
 Now complete Part 5 of the handout 

Style the h1 element

The h1 element forms the main title of the page. Complete the h1 selector properties with the following values ...
  • Set the background-color property to #ffb031
  • Set the border property to 5px #ffb031 solid
  • Set the border-radius property to 10px
  • Set the font-family property to "Gloria Hallelujah"
  • Set the margin property to auto
  • Set the padding property to 5px
  • Set the text-align property to center
 Now complete Part 6 of the handout 

Style the h2 element

The h2 elements are used as titles for the ingredients and the recipe sections of the left panel. Complete the h2 selector properties with the following values ...
  • Set the color property to #ffb031
  • Set the font-size property to 1.2em
  • Set the margin property to 0px
 Now complete Part 7 of the handout 

Style the h3 element

Finally, the h3 element is used as the title for the footer section. Complete the h3 selector properties with the following values ...
  • Set the background-color property to #ffd49b
  • Set the border-radius property to 10px
  • Set the font-family property to "Gloria Hallelujah"
  • Set the margin property to 0px 0px 10px 0px
 Now complete Part 8 of the handout 

Style the img element

The raw image is a little big for the page and also needs to look a little prettier. Complete the img selector properties with the following values ...
  • Set the border-radius property to 20px
  • Set the box-shadow property to 3px 3px 5px #555555
  • Set the width property to 200px
 Now complete Part 9 of the handout 

Style the comments (this is cool!)

It would be nice for the comments to look like they are in speech bubbles. The CSS rules for this are quite complex so I'm not going to ask you to enter them. However, this is a good opportunity to show you how to specify a class attribute in the HTML file. Look at the index.html file and find Lines 38, 41 and 44
  • Set the class of these blocks to comment

 Now complete Part 10 of the handout 

Style the spans in class bold

All the styles so far have been applied to block level elements. This style is applied to the inline, span, elements in the comments. Complete the .bold selector property with the following value ...
  • Set the font-weight property to bold
 Now complete Part 11 of the handout 

Style the anchor elements in the footer

The hyperlinks at the bottom of the page can be styles in a number of ways. 

The anchor (a) element

The #footer a selector determines how the hyperlinks in the footer will appear. Complete the #footer a selector properties with the following values ...
  • Set the font-weight property to bold
  • Set the padding property to 5px
  • Set the text-decoration property to none
  • Set the transition property to 0.3s

The 'after' pseudoelement of the anchor (a)

This determines what is displayed immediately after the hyperlinks in the footer. Complete the #footer a::after selector with the following values ...
  • Set the color property to red
  • Set the content property to " ↗" (you might have to copy (CTRL+C) and paste (CTRL+V) the arrow!)

The unvisited anchor (a)

The #footer a:link selector determines how the unvisited hyperlink is displayed in the footer. Complete the #footer a:link selector properties with the following values ... 
  • Set the color property to black

The visited anchor (a)

The #footer a:visited selector determines how the visited hyperlink is displayed in the footer. Complete the #footer a:visited selector properties with the following values ...
  • Set the color property to #808080

The hover anchor (a)

The #footer a:hover selector determines how the hyperlink in the footer will appear when you hover your mouse over it. Complete the #footer a:hover selector properties with the following values ...
  • Set the color property to red

The active anchor (a)

Finally, the #footer a:active selector determines how the hyperlink in the footer will appear when you hold down your mouse button on it. Complete the #footer a:active selector properties with the following values ...
  • Set the color property to green

 Now complete Part 12 of the handout 

Submit your handout for assessment

Phew! Hand in your completed handout to your teacher. There is no need to submit the website for assessment but you might want to compare your version to the completed one :)







Task 2.3 Build-A-Burger
Where we play with HTML and CSS to create a lovely burger!


The following project combines some of the skills you have learnt in the previous two tasks.

Remix my Thimble project

Click here to open a copy of my Thimble project. Click the REMIX button on the top right hand corner to create your own copy of the project that you can play with.

Inspect the HTML file

Look carefully at the structure of index.html - you'll see a <head> ... </head> section which contains information about the webpage and links to two stylesheets, style.css which contains general style information and ingredients.css which contains the ingredients for your burger!

Change the title of the webpage

Change the title at the top of the page on Line 11 in index.html. Try changing the appearance of the title in style.css - look for the h1 type selector and try changing the font-size, background and color.

Change the price of the burger

Try changing the price of the burger on Line 12 in index.html. There isn't much you can change about the appearance of the price apart from the font colour. Look for the h2 type selector in the style.css file.

Build your burger!

The burger itself is built in Line 18 to Line 27 in the index.html file. Use the pattern of the patty layer on Line 22 to make your own burger! Try to create the following burgers ...


... using the ingredients from ingredients.css!

Alter and add ingredients of your own

Try changing the appearance of the ingredients to make your own unique burger by altering the properties / values in the ingredients.css file. You could even try creating a new ingredient for your burger - maybe a bun-middle like you get in a Big Mac!

Download your burger

Download your 'Brilliant burger' website using the 'Download files (.zip)' option from the files menu. If you want to view your website, you'll have to decompress the zip file first. Make sure you show your teacher what you have done!



https://docs.google.com/drawings/d/18Ew3b4bWh5vHZThugucpCG3Kud-T4lDkY0VT6C_Cxeg/preview
CSS cheatsheet

https://docs.google.com/drawings/d/1OPCbJAMkpSLxgO39UBPpBktphKAYeoN8KPtQsU2_34c/preview
Lovely webpage (13+)



ACTIVITY 3
Building interactive webpages






Task 3.1 Homework excuse generator
Where you learn how to remix a simple web project with HTML, CSS and Javascript


Before you start, your teacher will guide you through the structure of the HTML, CSS and Javascript files and explain how each part of them works.

Remix my Mozilla Thimble Project

Click here to open a copy of my Thimble project in a new tab. Make sure you click the 'REMIX' button at the top right hand side of the page to get your own copy. You will probably not be making an account on the Thimble website so you will have to download your website as a .zip file.

Change the title of the page

Choose the index.html file from the FILES panel on the left hand side of the screen. Find Line 23 which contains the title for the page. Change the page title between the <h1> and </h1> tags to 'My Homework Excuses' or 'Best Excuses Ever' being sure to leave the tags themselves alone.

Change your excuses

Choose the excuses.js file from the FILES panel on the left hand side of the screen. Look carefully at Line 4 through Line 6 which contain arrays (lists) of strings (words) used to construct the excuses. Go ahead and change a few of the strings. Delete the words you see and then remix your own words into the arrays. Try to add another 5-10 words to each array. Be very careful about punctuation - your browser will not execute the code if it's wrong.

For example, a remixed array might look like this

var who = ['mouse', 'robot', 'bff', 'bus driver', 'rival'];

To test your remix works, you will have to click the REFRESH button on the page preview panel a couple of times.

Give yourself credit

If you aren't already, go back to the index.html file. Go to Line 35 and add 'Remixed by [you].' Use your first name or initial but don't use your last name or give out any other personal information here.

Get your remix assessed

You can download your own copy of the remix yourself if you want (as a 'zip' file) or save it to your Thimble account but your teacher will assess your remix live - make sure you show off!



Mess around with the code

If you are feeling confident, you can try editing ...
  • parts of the style.css file to change the way the webpage displays on the screen.
  • the background image by sourcing a new image from the web (make sure it's big enough), uploading it to the images folder and changing the accreditation information at the bottom of the index.html file.
Be sure to save, reload, and test your page often so you can undo any changes that completely break it.



Task 3.2 Manual Traffic Lights
Where you learn how to remix a web project with HTML, CSS and more complex Javascript


Before you start, your teacher should have talked you through the structure of the HTML and CSS files in this project!

Remix my Mozilla Thimble Project

Click here to open a copy of my Thimble project in a new tab. Make sure you click the 'REMIX' button at the top right hand side of the page to get your own copy. You will probably not be making an account on the Thimble website so you will have to download your website as a .zip file.

Create a list of the traffic light images

Starting on Line 2 in the script.js file, type the following command ...

var images = ["images/red.png",
              "images/redamber.png",
              "images/green.png",
              "images/amber.png"];

This creates a JavaScript list called lights containing the file path to the four images we are using for the traffic lights. The images are located in the images folder - take a look if you want!

Create a variable to hold the image number

On Line 9 in the script.js file, type the following command ...

var index = 1;

This line creates a JavaScript variable called index which contains the value 1. Each item in the list has an index which starts at zero (0) for the first item. Since the red traffic light image (red.png) is already loaded when we load the webpage, we start at the second image with index 1 - redamber.png.

Complete the JavaScript function, changeLights()

Complete the JavaScript function by typing the lines in bold - be careful with the indentation (spaces before the text) - it's not vital in JavaScript but it makes the code easier to read.

function changeImage(){
  // Get the element with id 'lights' from index.html
  var image = document.getElementById("image");
  // Change the image source in index.html
  image.src = images[index];
  // Increment (add one) to value of index
  index++;
  // If index is longer than the list ...
  if (index == images.length)
    // Reset it to zero
    index = 0;
}

Read the comments carefully - can you see how the function works?

Test your traffic lights

Refresh the page (by clicking the 'refresh button' in Thimble or pressing F5 on your keyboard) to reload the JavaScript file and then try clicking the 'Change Lights' button. If it doesn't work, check you have typed in all the code correctly - this is called debugging.

Get your remix assessed

You can download your own copy of the remix yourself if you want or save it to your Thimble account but your teacher will assess your remix live - make sure you show it off!



Mess with the CSS file!

Try changing the CSS property values in style.css to change the way the traffic lights look ...
  • Try altering the background-color of the page;
  • Change the font-family for the title (h1) - there are 5 fonts to choose from;
  • Change the font-size for the title;
  • Change the appearance of the border of the #container, maybe introduce curved corners;
  • Change the width of the image in the #image container.
Change the images!

This might take you a little more time and you should only attempt this if you are confident with your ICT and CS skills!
  • Replace the images in the images folder with 4 (or more) images of your own. Make sure that the filenames are simple and reflect the content of the image.
  • Replace the filenames in the variable images in script.js with the filenames of your new images. If you have more than 4 images, you will have to add more elements to the list - ask your teacher for help if you are struggling!
  • Change the page title on Line 7 in index.html.
  • Change the heading on Line 14 in index.html.
  • Change the button text on Line 18 in index.html.
  • Change the image filename on Line 22 in index.html to the filename of the first image in the images folder.
  • Finally, you might need to change some of the CSS property values in style.css to make your new images display correctly.
Refresh the page and test out your new creation!



Task 3.3 Automatic Traffic Lights
Where you learn how to remix a web project with HTML, CSS and even more complex Javascript


Before you start, your teacher should have talked you through the structure of the HTML and CSS files in this project!

Remix my Mozilla Thimble Project

Click here to open a copy of my Thimble project in a new tab. Make sure you click the 'REMIX' button at the top right hand side of the page to get your own copy. You will probably not be making an account on the Thimble website so you will have to download your website as a .zip file.

Add a JavaScript function to start the sequence

Complete the JavaScript function by typing the line in bold - be careful with the indentation (spaces before the text) - it's not vital in JavaScript but it makes the code easier to read.

function startSequence(){
  // Create a sequence object which calls 'changeImage' every second
  sequence = setInterval(changeImage,1000);
}

Read the comment carefully - can you see how the function works?

Add a JavaScript function to stop the sequence

Complete the JavaScript function by typing the line in bold - be careful with the indentation (spaces before the text) - it's not vital in JavaScript but it makes the code easier to read.

function stopSequence(){
  // Clear the interval on the sequence object
  clearInterval(sequence);
}

Read the comment carefully - can you see how the function works?

Test your traffic lights

Refresh the page (by clicking the 'refresh button' in Thimble or pressing F5 on your keyboard) to reload the JavaScript file and then try clicking the 'Start sequence' and 'Stop sequence' buttons. If it doesn't work, check you have typed in all the code correctly - this is called debugging.

Get your remix assessed

You can download your own copy of the remix yourself if you want or save it to your Thimble account but your teacher will assess your remix live - make sure you show it off!



What's the difference?

https://docs.google.com/drawings/d/1aAIhr9NcxFPW26XiJ7QplulQgADxjHCF3KGUUnBqV0g/preview
Interactive webpage (13+)

https://docs.google.com/drawings/d/1IMOCwx4YIaLa5Epvm-aEhVD2PMKuSgAXE-Ll11sQFtk/preview
Sololearn (13+)



ACTIVITY 4
Attribution and referencing


Copying images, text, video and sound from the World Wide Web is easier than ever, but it's not a 'free for all' - we must respect the original creators rights.


Task 4.1 Research, the right way!
Where we learn what we are allowed to do with resources from the web and how to give credit authors for things we use


All your own work!

Grab yourself a piece of plain paper and create your own 'original work' and credit yourself by adding ...
  • The title of the work
  • The name of the author
  • The date of completion 
Now, ask for permission to use the work of someone else in the room, remix it and make something new, but make sure that you credit the original author in your work!

Video comprehension

Get your headphones on and watch this video. Pay careful attention - there are questions to answer!

Copyright and Fair Use Animation (2:33)
https://www.commonsense.org/education/

Grab yourself a piece of lined paper, add your name and class to the top and try to answer the following questions on your own. You might need to re-watch parts of the video to help you - that's fine.

  1. What is copyright and why is it needed?

  2. If something you find online is copyrighted but you still want to use it, what do you need to do?

  3. There are four points of fair use / fair dealing ...

    - Only use a small amount of work
    - Add new meaning to make it original
    - Rework it and use it in a totally different way
    - Use it for 'non-profit' purposes


    Which of these four points do you think would be hardest to always make sure you do and why?

  4. There are both legal and ethical issues with copyright - what do you think this means?

  5. What is a mash-up?




https://docs.google.com/drawings/d/1INwunxYsGHhQTcsVxj7-kkGpZczZVqCJxwsfW3KqXNo/preview
Fair use collage



Task 4.2 Creative Commons
Where we learn how we can allow people to use our original work with 'some rights reserved'


Read the comic!

Click the 'Full Screen' button to make it easier to read. You might consider reading it to your shoulder partner.

Sharing Creative Works



The Computing Cafe is Creative Commons Licensed
so teachers can use it if they want to!

Collect your own images for a purpose

During this task, you will be expected to demonstrate the following word processing skills ...
  • Controlling print options
  • Using the ruler / creating tab stops
  • Page orientation
  • Bulleted and numbered lists
  • Adjusting list indents
  • Advanced table operations
    - inserting and deleting rows and columns,
    - border styles and shading,
    - cell styles
  • Margins
  • Line spacing
  • Paragraph alignment and indentation (using the ruler)
Consider the following scenario ...

Ethical Clothing LTD

You work for an advertising company who have been asked to create a set of promotional material to advertise a new ethical clothing brand which does not use any fabrics sourced from animals or from cheap labour markets. You have been asked to find 5 suitable images for use in the advertising campaign but your boss wants you to justify to him that the images are suitable for use and that they have come from a suitable source.



Restrictions - you can only get your images from the following websites (beware adverts!) ...
  • Pixabay - usage rights are shown alongside each image
  • IconArchive - usage rights are shown underneath each icon
  • Flickr - you can choose the licence type from the above the search results
  • PngImg - all images are CC BY-NC so require attribution and are for non-commercial use
  • Openphoto - all images are free to use but author should be credited
  • Openclipart - all clipart is in the public domain and is completely free to use
  • Stockvault - free stock images with simple licencing shown alongside the image
... or by using Google Advanced Image Search to search for images labelled for reuse ...

https://images.google.com/?gws_rd=ssl
Click image to visit Google Image Search but you have to select usage rights after you have searched.

... or the Creative Commons Search ...

https://search.creativecommons.org/
Click to visit Creative Commons search

Create a word processed document to record what you have found. Make sure that your document ...
  • is in landscape orientation
  • has custom margins
  • has custom tab stops on the ruler
  • has bulleted lists with custom bullets and indents
  • has left, centre, right and justified paragraphs
  • uses standard heading styles and body text
  • has custom line spacing
  • uses styled tables to record details of each image and the answers to the following questions ...

    1. What message does the image present?
    2. Why did you choose the image?
    3. Who owns the image?
    4. Where did it come from?
    5. When did you get it?
    6. How would the original owner feel about you using the image?



https://docs.google.com/drawings/d/13e2-inkUFT-BblxFwkBX7cv9Og5X3mSAD_L4c4MaKZw/preview
Copyright



ACTIVITY 5
Introduction to databases


One of the most important things that computers do these days is to collect and analyse data from the billions of devices in use every day, all round the world.

This is a big job, but it's all handled by very specialised Database Management System (DBMS).


Task 5.1 Paper database
Where we learn how to perform simple data collection


Collecting data the old fashioned way

Make a table with suitable headings

Make a table on a piece of A4 paper with the same headings as the example above. Make sure you have enough room for data on at least 20 different songs.

Collect data on at least 20 songs

Now, from memory or through research, collect data about your top 20 songs of all time. You might need to decide at this stage what musical genres you are going to use. Make sure that ...
  • You give each song a unique 'Song ID' starting at '1';
  • The song length is always written in the same format;
  • The genre is one from the list of musical genres;



Task 5.2 Filtering data
Where we learn how to search for data using Structured Query Language (SQL)


Worksheet

Download and complete the worksheet. Hand this into your teacher for assessment

Create your own SQL queries

Write some simple SQL queries based on the data you collected about your favourite songs. Write them down and then ask your shoulder partner to tell you which songs are in the results. This is how the search function on your streaming music service works!



Simple paper database



Hungry for more?

Here are some more things for you to try ...
  • Embed a video from YouTube in a webpage - copy the 'embed' tag from the 'share' option underneath the video and paste in the HTML where you want the video to appear in your webpage!
  • Read about the history of web browsers.

Still hungry!