Week 1

Activity: Content Management Systems

Assessed Activity 1.1 (2016) Content Management Systems [3 marks]

In EITOnline join the ITWD5.320 course page and familiarize yourself with the layout and how the subjects are laid out.

Navigate to the 2016 Class Participant introductions/ mihimihi forum in the Welcome/Whakatu Center in EITOnline
- Add a New Topic with Your Name as the heading
- Add academic background (Qualification), something about you and your interests
- See if you can add a photo (or avatar) please keep the images small
Open the Theory Workbook, and answer the following questions:
- What file format is the Theory Workbook in?
- List 2 improper uses of EIT's Internet.
- What has superseded SSL ?

Google ecosystem

Assessed Activity 1.2 (2016) Google ecosystem [2 marks]

If you haven't already got a Google account, create one.
In Google drive create a folder called 2016ITWD_YourName (obviously replace your name!!)
- Share the drive with "anyone who has a link" ( you need to click on the "Advanced" link)
- Add the link to the Google Drive link in EITOnline
In your shared drive create a google document called itwdActivity1, and put into it the answers to activity 1.1

Student mail

Assessed Activity 1.3 (2016) email [4 marks]

Student mail
- Login to your student mail account; there is a shortcut on your desktop or mail.eit.ac.nz in your browser.
- In your Google document itwdActivity1 write the instructions on how to send an email from your student account to your gmail account with an attachment (This is something that a Help-desk operator may need to do).
- Set up the email so that you will receive emails from EITOnline in your normal email account ( Administration > My Profile settings )
Temporary 10 Minute Email ( https://10minutemail.net/ )
- Have you ever needed a temporary email address? Maybe for a coupon code for a one-time purchase when they require your email address. (Then they fill your inbox with unwanted offers and other advertising). Or, maybe just to test your own email setup is working ok. With 10 Minute Mail you get a temporary email address that lasts for 10 minutes or you can keep adding another 10 minutes if the email you are expecting is late.
- When you arrive at the site you’ll be automatically loaded into your mailbox - there’s no registration. Copy the e-mail address they’ve provided for you and use it. If you need to check an e-mail for whatever you signed up for it will come directly to the page you’re on, in the message section near the bottom of the page.
- Activity: Create a 10 minute email. From your normal email account send an email to the 10 minute one. Then reply in the 10 minute email!

Social Media

Assessed Activity 1.4 (2016) Social Media [1 mark]

Join the BCS Facebook page (for EIT students this is EIT School of Computing )
Optional activity
- Create a twitter account (if you don't already have one) and send a tweet to hashtag #itwd5320 (Normally if you have something to contribute to the class could you use the hash tag #vmvwiki )

Week 2/3: HTML

HTML Basics

Assessed Activity 2 (2016) HTML Basics [5 marks]

In this task you are to create a simple linked web site that you will use to manage your answers to future activities in this course. The web site is to be hosted on your home drive and not on the Internet.

For this activity the Web site must contain :

File names
- index.html (home page - will link to the following pages)
  - me.html
  - webtech.html
  - links.html (Will contain links to sites related to your topic)

For the;

home page (index.html)
- demonstrate use of <head><title><body>
- A comment containing your name
- Main heading <h1> with "<Your Name> 's ITWD5.320 Amazing Web site"
- A paragraph explaining what this web site is about (bold something in the text).
- A horizontal line
- three hyperlinks to other pages
me
- Put in a heading 2 ( <h2> as the main heading )
- Write something about you
- Include a list that has your interests with a little about them.
Webtech
- Put in a heading 2 ( <h2> as the main heading )
- Include a table with a header row and borders. The first colum contains what technology you use on the internet ( can be hardware or software) and the second column a description. E.g. Chrome: to browse the Internet; iPhone: email, surf web, iCloud, ...
Links page
- Put in a heading 2 ( <h2> as the main heading )
- Demonstrate use of a link to either me or webtech
- Include a link to a site that related to the Internet and/or Web development
- Include a link to a blog site

Marking

Marks will be awarded based on the completeness of your submission

HTML Techniques

Assessed Activity 3 (2016) HTML Techniques [5 marks]

Modify your web site Add a new page called mmedia.html

and include the following
- An image (must have alt and width attributes)
- An embedded YouTube video

Using one of your pages

Demonstrate the use of two inline styles and two embedded styles

Link all pages to an external style sheet ( main.css ) and demonstrate the use of at least two styles

Marking

Marks will be awarded based on the completeness of your submission

Week 4: Web Searching

Web Searching Basic

Assessed Activity 4.1 (2016) Web Searching [3 marks]

In your web site, create a new page called search_basic.html (and link this from the first page - index.html)
Create an ordered list in the following format (Note the answers are an indented unordered list).

E.g.

What do triskaidekaphobes have a fear of?
- Fear of ....
The phrase “In a Jiffy” is used often, how long is a Jiffy?
- A jiffy is ....

1. Answer 6 of the following questions

What do triskaidekaphobes have a fear of?
The phrase “In a Jiffy” is used often, how long is a Jiffy?
The highest temperature ever recorded in the world
Although identified with Scotland, bagpipes are a very ancient instrument, where did they come from
What is Donald Duck’s middle name and where does he live
What colour is the blood of lobsters
Which country was the first to use paper money
What was the first man-made invention to break the sound barrier
What European capital used to be called Lutetia?
What animal’s milk is used to make authentic Italian mozzarella cheese?
Which former All Black forward was the only one to feature in the top 10 of all time drop goal scorers in NZ rugby?
What is the only man made structure that can be seen from outer space
What is the largest animal made structure in the world
The Zloty is a unit of currency in which country
If you had tinnitus, from what would you be suffering?
Which planet is known as the Red Planet?
The first Bond movie was released in 1964. What was the title?
Which computer device has a "bezel?"
'WYSIWYG' is a computer word. But what does it stand for?
Most people have heard of an IBM PC, what do the letters IBM stand for

2. Add four more questions and answers of your own. The question/answers should be a little unusual and on things that are not well known.

Marking

Marks will be awarded based on the completeness of your submission

Web Searching Advanced

Assessed Activity 4.2 (2016) Web Searching - Advanced [2 marks]

In your web site, Create another page called search.html. Create a three column table that shows the "Search Performed", "Number of Matches" and "Advanced Searching".
Go to http://www.google.com and then click on the Advanced Search link located at the right. For the following always use the advanced search. In the "Number of Matches" column, write the number of results you get. Your goal is to get less than 500 results!
Complete the searches and for the results of the final two searches (under "Record Results"), cut the URL link from your web browser and paste this as a link under the heading "Advanced Searching". Hyperlink the searches.

Queries

Practice
1. WITH ALL: Internet Security
  - This search is bad because it will search for every web page that contains Internet OR Security
  - You will get different results if you capitalize Internet Security
2. EXACT PHRASE: Internet Security
  - The exact phrase is the best way to search because it only finds web pages with the phrase “Internet Security” . Use quotes around a phrase in a normal search to achieve the same result.
  - WITH ALL: Internet Security
3. WITHOUT: books or movies
  - This gets rid of all the web pages that are selling books or movies
  - EXACT PHRASE: Internet Security; WITHOUT: books or movies; OCCURENCES: Choose in the Title
  - This only finds web pages with Internet Security in the title of the page.
4. EXACT PHRASE: Internet Security
  - WITHOUT: books or movies; OCCURENCES: Choose in the URL; Notice that all the results have Internet Security in the web page!
5. EXACT PHRASE: Internet Risks
  - WITHOUT: books or movies; OCCURENCES: Choose in the Title
  - Use words that best describe what you are trying to find! If you get less than 500 results, you have done an excellent search!
Record Results
1. EXACT PHRASE: Internet Risks
  - WITHOUT: books or movies; OCCURENCES: Choose in the Title
  - Use words that best describe what you are trying to find! If you get less than 500 results, you have done an excellent search!
2. EXACT PHRASE: Internet Risks; WITHOUT: books or movies
  - OCCURENCES: Choose in the URL
  - This only finds webpages that have Internet Risks in the address name

Marking

Marks will be awarded based on the completeness of your submission

Web Searching Google search

Assessed Activity 4.3 (2016) Web Searching - Google search [3 marks]

Go to wiki notes on adding a Google search to your web page (http://wikieducator.org/VirtualMV/HTML/Basic/Forms/Add_Google)
At the top of the page search.html, add a google search form. (Note it is best to put the form tag just after the body tag (at the top) and close it just before the /body tag as you are only allowed one form element per page.

Marking

Marks will be awarded based on the completeness of your submission

Week 5: Multimedia

Multimedia

Assessed Activity 5.1 (2016) Multimedia [4 marks]

Activity

Go to www.google.com and click on images. Click on the Advanced Search link.
Search for the images, sounds, and movies listed below
In your web site, create a page called multimedia.html, put a title and heading "Multimedia".

Additional information as to how to add multimedia elements to your page can be found in the relevant pages at http://wikieducator.org/VirtualMV/HTML/Basic

Instructions
- Select an object you would like to search on (I will use a butterfly as an example). Once you have found the media element add to the multimedia.html page (Note: The element should be displayed on the page not as a link).

Images

Use Advanced Google Search, EXACT PHRASE: butterfly.jpg, (or butterfly.png) This will find pictures of a butterfly
Use Advanced Google Search, EXACT PHRASE: butterfly.gif, to find animated pictures of a butterfly
Note: images need to be saved in the same folder as your html file.

Video

Use Advanced Google Search, EXACT PHRASE: butterfly.avi or butterfly.mov, This will find movies of a butterfly.
Notes:
1. As YouTube is becoming the main source of videos on the Internet it may be difficult to find relevant ones. You can use ".mov samples" to get you started.
2. HTML5 introduces the video tag, however only some video types are acceptable (mp4, WebM, and ogg). As an alternative to mov or avi you can use mp4, webm or ogg.

Audio

Use Advanced Google Search, EXACT PHRASE: butterfly.wav, This will find sounds of a butterfly
Note:
1. HTML5 introduces the audio tag, however only some audio types are acceptable (mp4, wav, and ogg).

Interactivity/Animation

Add an swf file to your web page
Research the Canvas tag, and add an example to your web page (this may be a link to a page with the canvas tag used). This needs to be more than a coloured in canvas box!

Marking

Marks will be awarded based on the completeness of your submission

Some sample media

Click here for Sample media

Week 6: Internet tools 2

Internet tools 2

Assessed Activity 6.1 (2016) Tools 2 [8 marks]

For activities 1 and 2 work in groups of between 2 and 4.
Put the link for each into a web page on your web site called webtools.html

Activities

1. Google Doc

One person should create a Google document named 2016ITWD Tools Doc.
- Set up sharing to all members of your group (Specific people), or if you want to make it easier you can share with Anyone with a link (> Access: Can edit) . You should all be able to edit this document now at the same time.
All members need to write their names at the top of the document.
Work collaboratively and answer the following:

A. Choose 4 of the following and write about its functionality (What it does, what you would use it for?).

B. Write about 4 items from each of these lists (what it does, what technology/protocols does it use what you would use it for?)

Adobe Connect or WizIQ
Skype
mIRC
Remote Desktop Connection (RDP)
Telnet
Filezilla
Logmein
iCloud.com and the Find My iPhone app

C. Write about 4 of the following terms. For each term briefly state: What it is, when it came into being and how it has influenced today’s internet.

TCP/IP
HTTP
HTTPS
Ethernet
FTP
WWW

When you are done share the document public with link can view (Anyone with a link > Access: Can view)
Put the link into the webtools.html page

2. Google Drawing

One person should create a Google Draw document named 2016ITWD Tools Draw.
- Set up sharing to all members of your group (Specific people), or if you want to make it easier you can share with Anyone with a link (> Access: Can edit) . You should all be able to edit this document now at the same time.
All members need to write their names at the top of the document.
Work collaboratively and create a diagram on "A brief History of the Internet"
When you are done share the document public with link can view (Anyone with a link > Access: Can view)
Put the link into the webtools.html page

3. Cloud tools

On your own choose one of the following web tools and develop small demonstration that shows the features (more may be added in future). Add this to your web site.
- Prezi
  - For a free account (your prezi will be open to the public) use https://prezi.com/signup/public/
- Google Slides (a cloud based tool similar to PowerPoint)
  - Create in your Google Drive
Put the link into the webtools.html page

Marking

Marks will be awarded based on the completeness of your submission

Week 7: JavaScript

JavaScript

Assessed Activity 7.1 (2016) JavaScript [3 marks]

Read JavaScript Overview http://wikieducator.org/VirtualMV/JavaScript/Home
Read JS and HTML
Create a web page in your web site called jsNumberGuess.html
- Add HTML code following.
Create a text (txt) document and call it jsNumberGuess.js
- Add JavaScript code following.
Modify the JavaScript Code to add additional functionality
- Eg. Change the logic so the message says "too high" or "too low"

Marking

Marks will be awarded based on the completeness of your submission (2 marks for having a working JS program, 1 mark for the additional functionality)

jsNumberGuess.html

<html>
<head>
<!--
Demonstration JavaScript file
*By: M Verhaart 2014 (virtualMV)
*Features
* <Script> included in head and contains
** A global variable (actually a random integer number)
** A function that gets called when the input button is pressed
* <Script> inline (Computer guess)   
*An object declaration (objMsg) allows for more readable code
*An alert box to show how a popup can be used to show whats happening
*document.write - writes directly onto the page
//-->
<script src="jsNumberGuess.js" type="text/javascript"></script>
</head>
<body>
<form name="myForm">
  Enter Your guess:&nbsp;
    <p><input name="txtVal1" /></p>
  <p><input type="button" value="Check Guess" onClick= "fnChkGuess()" /></p>
  <p id="idMessage">?</p>
  <p>Computer guess=
     <script type="text/javascript">document.write (intGuess); </script>
  </p>
</form>
</body>
</html>

jsNumberGuess.js

//A global integer variable 
var intGuess = parseInt((Math.random() * 10) + 1);
//function to check the guess against the computers number
function fnChkGuess() {
    intNum1=parseInt(document.myForm.txtVal1.value);
	alert ("You entered " +intNum1);
	objMsg = document.getElementById("idMessage")
	if (intNum1==intGuess) {
      objMsg.innerHTML ="Correct";}
	else {
      objMsg.innerHTML ="Try again";}
}

JavaScript - Canvas

Assessed Activity 7.2 (2016) JavaScript Canvas [2 marks]

Create a web page in your web site called jsCanvas.html
- Add HTML code following (put your name in where it says "YourName").
- Test the code
Modify the JavaScript Code to add more features (you may like to refer to http://www.w3schools.com/html/html5_canvas.asp )
Create a web page in your web site called jsCanvasScrollText.html
- Add HTML code following (put your name in where it says "YourName").
- Test the code
Modify the JavaScript Code to add more features (you may like to refer to https://www.udemy.com/blog/html5-canvas-animation/ )

Marking

Marks will be awarded based on the completeness of your submission (1 mark for having a working JS programs, 1 mark for the additional functionality)

jsCanvas.html

<!DOCTYPE html>
<html>
<head>
<!--
Demonstration JavaScript file
*By: M Verhaart 2014 (virtualMV)
*Source reference: http://www.w3schools.com/html/html5_canvas.asp
<script src="jsCanvas.js" type="text/javascript"></script>
//-->
</head>
<body>
<div>
  <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
  </canvas>
</div>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,300,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle = grd;
ctx.fillRect(10,10,480,380);
//Draw a line
ctx.moveTo(10,10); ctx.lineTo(480,380); 
ctx.stroke();
//Draw a Circle
ctx.beginPath(); ctx.arc(250,200,100,0,2*Math.PI);
ctx.stroke();
//Add some text
ctx.fillStyle = "#0000FF"; ctx.font = "50px Arial";
ctx.fillText("Hello World",100,200);
ctx.fillText("YourName here",100,250);
</script>
</body>
</html>

jsCanvasScrollText.html

<!DOCTYPE html>
<html>
<head>
<!--
Demonstration JavaScript file
*By: M Verhaart 2014 (virtualMV)
*Source reference: https://www.udemy.com/blog/html5-canvas-animation/
*For an explanation of how it works
<script src="jsCanvasScrollText.js" type="text/javascript"></script>
//-->
    <title>Text Animation</title>
       <style>
        canvas{border: 3px solid #bbb;}
        .subdiv{width: 320px;}
        .text{margin: auto; width: 290px;}
       </style>
	   <script type="text/javascript">
  var idCan, ctx, step, steps = 0, intDelay = 20;
  function fnInit() {
    idCan = document.getElementById("MyCanvas");
    ctx = idCan.getContext("2d");
    ctx.fillStyle = "blue"; ctx.font = "20pt Verdana";
    ctx.textAlign = "center"; ctx.textBaseline = "middle";
    step = 0; steps = idCan.width + 50;
    fnScrollText();
  }
  function fnScrollText() {
    step++;
    //Clear the previous screen
    ctx.clearRect(0, 0, idCan.width, idCan.height);
    ctx.save();
    ctx.translate(step, idCan.height / 2);
    // Write Welcome on the screen at the new position
    ctx.fillText("Hello World YourName here", 0, 0);
    ctx.restore();
    if (step == steps) { step = 0;}
    if (step < steps) {
       var t = setTimeout('fnScrollText()', intDelay);}
  }
  </script>
  </head>
  <body onload="fnInit();">
    <div>
       <canvas id="MyCanvas" width="300" height="200">
       This browser or document mode doesn’t support canvas object
       </canvas>
    </div>
</body>
</html>

References

virtualMV | Superquick wiki guide | Please give me some feedback

VirtualMV/Internet and Web (1)/Home/Assessments. (2024). In WikiEducator/VirtualMV wiki. Retrieved April 26, 2024, from http:https://wikieducator.org/VirtualMV/Internet_and_Web_(1)/Home/Assessments (zotero)

Assessments

Week 1

Activity: Content Management Systems

Assessed Activity 1.1 (2016) Content Management Systems [3 marks]

Google ecosystem

Assessed Activity 1.2 (2016) Google ecosystem [2 marks]

Student mail

Assessed Activity 1.3 (2016) email [4 marks]

Social Media

Assessed Activity 1.4 (2016) Social Media [1 mark]

Week 2/3: HTML

HTML Basics

Assessed Activity 2 (2016) HTML Basics [5 marks]

HTML Techniques

Assessed Activity 3 (2016) HTML Techniques [5 marks]

Week 4: Web Searching

Web Searching Basic

Assessed Activity 4.1 (2016) Web Searching [3 marks]

Web Searching Advanced

Assessed Activity 4.2 (2016) Web Searching - Advanced [2 marks]

Web Searching Google search

Assessed Activity 4.3 (2016) Web Searching - Google search [3 marks]

Week 5: Multimedia

Multimedia

Assessed Activity 5.1 (2016) Multimedia [4 marks]

Activity

Images

Video

Audio

Interactivity/Animation

Some sample media

Week 6: Internet tools 2

Internet tools 2

Assessed Activity 6.1 (2016) Tools 2 [8 marks]

Activities

1. Google Doc

2. Google Drawing

3. Cloud tools

Week 7: JavaScript

JavaScript

Assessed Activity 7.1 (2016) JavaScript [3 marks]

jsNumberGuess.html

jsNumberGuess.js

JavaScript - Canvas

Assessed Activity 7.2 (2016) JavaScript Canvas [2 marks]

jsCanvas.html

jsCanvasScrollText.html

References

Navigation menu

Search