We live in a digital world. Everywhere we look we are surrounded by technologies that allow us to communicate and interact with people, places and things all around the world.
Here you will learn about how to manage these digital technologies so that you can understand them better. Just like learning a new language, you'll even be able to use this knowledge to help you create, communicate and control new digital technologies within new environments. |
Website: (60%)
Requirements: You will learn about digital technologies used to produce and publish an interactive website. Must: Produce and publish a working website featuring content produced by you. Should: Design your website so it can be easily navigated by visitors. It should feature examples of all of the digital learning activities you will complete during this unit. Could: You could increase the aesthetic appeal of your website to appeal to a wide audience and provide a rewarding user experience. |
Design: (20%)
Hierarchy, Web-flow & Functionality: Your website should look professional and inviting so as to draw people in. This mark represents the design of your website and how well it functions. It should be easy to navigate and the buttons should allow the user to get to the page content in the easiest possible way. |
Research Task: (20%)
Research assignment: Students are to research the unit topic and submit evidence on their findings by answering the questions on the attached research task worksheet. Click here:
|
Project Marking:
Click here:
Past Project Gallery:
If you are unsure of what to write or publish on your website, just follow the sample website below...
Click here:
PROJECT WORK:
1. WEB DESIGN
TASK 1(A): WEBSITE DESIGN DIAGRAM
Study the Web Design diagrams below and discuss these essential elements that are required for a successful website design. |
Do you think they are all of equal importance?
DURATION: 3 lessons |
TASK 1(B): NAVIGATIONAL HIERARCHY
Study the Navigational Hierarchy diagram here and discuss these essential elements that are required for a successful page flow. A well designed hierarchy should look like a flow chart or a family tree. TASK: Recreate your own pictorial diagram of the Navigational Hierarchy shown here. Use any software you like but you'll need to save it as an image file to upload to your own WEEBLY website when finished. DURATION: 3 lessons |
2. WEB BUILDING
TASK 2: BUILDING YOUR WEBSITE LAYOUT
Weebly is a CMS (Content Management System) that allows you to create, publish and manage your own website. It uses a Computer Programming Language called HTML5 which stands for Hypertext Markup Language. It's actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS), which take care of presentation; and JavaScript, which makes things happen. TASK: Go to Weebly and sign up so you can create your own PERSONAL website where you will post all of the Digital Technologies skills and activities you'll be learning about in this unit of work. DURATION: 3-4 lessons TIP: Choose any theme you like and use the NAVIGATIONAL HIERARCHY DIAGRAM to help you create ALL OF your site pages. |
3. ANIMATIONS
TASK 3: ANIMATIONS
Animations are series images displayed at a fast rate to create the illusion that they are moving. One example of an animation is a GIF file. GIF stands for Graphics Interchange Format. GIFs are image files that are compressed to reduce transfer time. It can also use multiple images for animated effects (animated GIFs), but has no sound. You can create a GIF using your own pictures (photos, drawings, screenshots etc) or you can pull frames from existing video. You can create a something as simple as a slide show (example shown) or as an animation. TASK: Create 4-6 seperate GIF's using the third-party provider called "Giphy". Remember that a good Gif should always be quick, punchy, and funny. THEMES: Create one GIF based on the theme of "SCHOOL" and another on "HOMEWORK". The others can be based on a theme of your choice. You will need to publish each Gif to your WEEBLY page by embedding is as code. From your Weebly toolbox, simply drag the Embed Code asset to your page and copy paste your Giphy code. DURATION: 4 lessons Here you can learn how to use Giphy to create, post and share your GIFs: |
|
8 minute detailed tutorial
|
1 minute refresher tutorial (no audio)
|
4. MANIPULATING CODE
TASK 4 (A): LEARNING CODE
HTML5 is the latest version of Hypertext Markup Language, the code that describes web pages. It's actually three kinds of code: HTML, which provides the structure; Cascading Style Sheets (CSS), which take care of presentation; and JavaScript, which makes things happen.
Understanding it is not essential, but it is very helpful if you want total editing control of your online content and the way it is presented. TASK: Spend the lesson watching the videos linked here. Carry on with some of your own research into cracking open HTML code... DURATION: 1 lesson FUN FACT: When you published your GIF by embedding the Giphy link, you were actually copy/pasting a link to Giphy's HTML5 code. |
|
Although this video is getting old, it does a good job of explaining more.
|
If you want to learn the basics, heres a whirlwind intro with a teenager...
|
TASK 4 (B): MANIPULATING CODE (IN WEEBLY)
When you drag and drop an Image asset you are inserting bundled code provided by Weebly , otherwise known as your CMS (Content Management System)
|
When you drag and drop an Embed Code asset you are inserting YOUR OWN code that can be manipulated independently of your CMS (Content Management System)
|
Now it's your turn to learn how to source and manipulate HTML5 code...
TASK: Use the links below to upload ONE of your own images and generate the code to then copy/paste into an 'Embed Code' asset on your Weebly page. Modify the colour and thickness of the border to show that you can manipulate the code correctly. CHALLENGE: See what other bundled code you can source, manipulate and publish using the HTML.am link.. DURATION: 2 lessons |
LINKS HERE:
Image Code Generator here: http://www.html.am/html-generators/image-code-generator.cfm HTML Colour Code Picker here: https://htmlcolorcodes.com |
5. SCAN CODES
|
TASK 5: SCAN CODES
TASK: Watch the video "How to make a QR Code" to create your own code. Then use the link below to create and publish you own QR code on your Weebly page. NB: Make the QR code link link through to one of your Weebly pages. CHALLENGE: You must make 2 QR Codes- One must link to a new Weebly page that can only be accessed by the QR Code (known as a "Hidden Page"). The second can link to a secret surprise URL of your choice. You will need to publish a screen shot of your completed QR CODES to your WEEBLY page and upload as an image asset. DURATION: 1 lesson |
6. COMPUTATIONAL THINKING
|
TASK 6(A): COMPUTATIONAL THINKING: "ROBOZZLE"
Learning to think like a computer helps you to then speak like a computer. Learning the principles of block coding will introduce you to a world of coding opportunities Robozzle is an interactive Javascript editor and tutorial for students to learn basic coding concepts. TASK: Complete all the Java Script challenges the set by Robozzle. You will need to publish a screen shot of your completed challenge to your WEEBLY page and upload as an image asset. DURATION: 2-3 lessons |
NB: TASK 6(B): COMPUTATIONAL THINKING: "BLOCKLY" CODE
Blocks of pre-written code can make it easier to learn to use code by simply dragging and dropping the code elements into their correct position to perform a particular function. TASK: Complete the 8 levels of the Blockly Games challenge. You will need to publish a screen shot of your completed challenge to your WEEBLY page and upload as an image asset. NB: LIST THREE THINGS ON YOUR SITE THAT YOU HAVE LEARNT DURING THIS CHALLENGE DURATION: 3-5 lessons |
TASK 6(C): COMPUTATIONAL THINKING: "CODE MONSTER"
Moving on from pre-written code, it can be fun to learn to use more advanced code: Code Monster is an interactive Javascript editor and tutorial for students to learn basic coding concepts. The code monster character provides example code snippets with dynamic output and students are prompted to experiment with parts of the code to see how it affects the output. Code monster guides students through coding concepts like variables, conditional statements, iteration and nesting, functions and arrays. TASK: Complete all the Java Script challenges the set by the code monster. You will need to publish a screen shot of your completed challenge to your WEEBLY page and upload as an image asset. DURATION: 3-5 lessons |