Giant toys

Woman hiding from giant doll - Tim Walker photoThese photos are by Tim Walker and show a giant doll.

How do you think Tim made these photos?

Did he really have a giant doll toy??

Has the woman or the doll been ‘photoshopped’ into the image?

Woman running from giant doll in a forest - Tim Walker photo

Challenge: Create an image with a giant toy.  First think about what toys you have available to you.  Then pick a toy and a location that you think will have a good ‘story’ and make the people looking at your image stop and think about what is happening.

You will need to take photos carefully.  Think about lighting and shadows.  It’s best to take photos of your small toy in the same location (with the same light) as your ‘big’ photos

Curvy trees

Today we tried out a different ‘tween’ – the motion tweet.  This lets your object fly along a straight or curved line. motion curve ball   First create a circle.  Then insert a keyframe further along the timeline (maybe around frame 30).  Right-click on the grey part of the timeline and select Create Motion Tween.  Select the first frame and drag the ball to where you want it to start.  Select the last frame and drag the circle to where you want it to end.  A dotted green straight line should appear.

You can bend the dotted line using the black selection arrow

Bending the motion line using the selection tool

You can also bend the line in more interesting ways using the white sub-selection arrow.  If you play about with dragging the handles on the green lines that are shown at the ends of the curve then you can alter the direction and angle of the curve.

Bending the motion line using the sub-selection toolYou can now preview  the animation and see your object flying around the screen following your curve.

We then made our Christmas trees bounce around…

Sorry, either Adobe flash is not installed or you do not have it enabled

Email mystery…

Email with question markI received the following email last night:

———- Forwarded message ———-
From: Brittany McClaine <bmcclaine@ncpcharterschool.org>
Date: 11 December 2012 21:54
Subject: Loved your page! Special Thanks from Mrs.McClaine and Kids! 🙂

Hi There!

I just wanted to send you a quick note on behalf of some of the kids in our After School program! We’ve been using your page ( http://digitalkatie.com/bsl.htm ) quite a bit while going over an intro to Sign Language, it has been super helpful!

The kids have a hearing impaired student in their class, and we thought it would be great if everyone was able to communicate on the same level 🙂 As a Thank You, a couple of the students also found and wanted to pass along this family resource page to ASL: ( http://usinsurancenet.com/family-health-reference-to-asl/ )

We’ve actually been using it just as much as your page and thought that maybe you would want to include it on your British Sign Language Links page! I was hesitant to email you at first but the kids keep asking if I’ve talked to you about it yet! (haha they’re so cute!)

Would you possibly consider adding it for them? I would love to surprise them before we finish the unit next Friday, that their research find has actually benefited someone else! They would be so excited!…and I may even surprise them with a pizza party for doing such good research 😉

Thanks again!
-Brittany

**************************************************************************************
Brittany McClaine
bmcclaine@ncpcharterschool.org
Jean Massieu Academy

 

This email set my spidey sense tingling.  It seems like a spam email but I really wasn’t sure.  My main issue is this is an email supposedly from America so why would they be using a web page about BRITISH Sign Language??

So, here’s a challenge – figure out if this is real.  Is there really a Brittany McClaine?  Does she work as a teacher?  Does the Jean Massieu Academy exist and is it part of NCP Charter School (the email address domain)?  Is this a standard spam email format and the same text is used pretending to be from different teachers and different schools?

When you think you have an answer look at the clues I found online to see if you’ve come up with the same deduction!

O Christmas Tree!

Today we started making animated Christmas trees.  First we drew a Christmas tree.  This can be done freehand using the pencil tool or by using the line tool or one of the shapes.

Christmas tree

 

Ragged style propertiesYou can get a nice effect by using a different line style.  changing the line from solid to ragged and increasing the ‘stroke’ (the line width) to about 4 gives a nice cartoon-like effect.

We then tried out using Classic Motion Guides.  We drew a Christmas tree on one layer first.  Next we right-clicked on that layer and selected ‘Add Classic Motion Guide’.  A new layer appears above the tree layer.  On this new layer we use a pencil and draw a squiggly line.  Careful not to make it too squiggly or you’ll confuse Adobe Flash.

classic motion guide exampleAdd a keyframe on the tree layer then right click on the frames and select ‘Create Classic Tween’.  Select the first frame and move the tree to where you want it to start on the line.  Make sure the dot in the middle of the tree ‘snaps’ to the line you drew.  Then select the last frame in the tween and drag the tree to where you want it to finish.  Make sure the dot ‘snaps’ to the line again.  Press Ctrl Enter and you should see your tree spin around the stage!

Sorry, either Adobe flash is not installed or you do not have it enabled

You could even add a background layer (make sure it’s the last layer on the list – if necessary drag it down to the bottom of the list) and flying text (use the motion tweet from last time)

Sorry, either Adobe flash is not installed or you do not have it enabled

 

Flash! Ah-ha!

Today we started doing Flash animation!  We are going to learn the basics by making animated e-cards for our school web site.

First though, today we learned how to bounce a ball.

I showed how to create an oval (and how to hold down shift to create a circle).  We created keyframes along the timeline and moved the ball position at each keyframe.  We then added a classic tween to each section of the timeline.  When we pressed Ctrl-Enter it looked like the ball was bouncing round the screen.

Sorry, either Adobe flash is not installed or you do not have it enabled

We then tried to make the ball look a bit squished when it bounced.  We inserted a couple of extra keyframes at each bounce.  At each bounce there was a normal ball against the side, then a squished ball then a normal ball again before it went on it’s merry animated way.

How to squish a ball in Flash

Sorry, either Adobe flash is not installed or you do not have it enabled

If you’re feeling ambitious then why not have lots of balls flying around.  You could even have flying Christmas tree decorations!

Sorry, either Adobe flash is not installed or you do not have it enabled

Blogging

Blogging

Task 1

Use Technorati, Reddit or another blog search engine, find at least five interesting blogs.

You should choose at least one blog from each of the following categories:

  • Personal journal – like someone’s diary
  • Community blog – Blogs written in order to raise awareness in community and to address the issues related to a particular community.  The Greener Leith blog is an example of a community blog.  Often community blogs are written by more than one author.
  • Corporate blog – like Apple or Coca Cola or another company blog
  • Political blog – these blogs cover and discuss political issues and also promote certain political parties and views.  Political blogs also include campaign groups like Pedal on Parliament
  • Special interest blog – like a blog about skateboarding or penguins

Task 2

Follow the blogs using an aggregator tool. An aggregator lets you keep track of lots of blogs and see when new posts and content has been added without having to kepp visiting the website for the blog.

You could try Google Reader (log in through Glew.org.uk), Netvibes.com, Protopage.com or something similar.

Protopage.com website

I like Netvibes and Protopage as they have a fun interface, much brighter and more customisable than Google Reader.  Netvibes is a nice way of finding blogs too.  Just click on the Add Content button at the top.  You can also add ‘Widgets’ on to your pages. Protopage lets you do this too and it lets you have bookmarks, sticky notes and a useful search box.

Task 3

Review the blogs you have read.  Things to think about when evaluating the blogs are:

  • Usability: ease of navigation, ease of finding information, visual appeal and ability to recover from errors.
  • Navigation: backtracking, timeline navigation, search facilities and threading.
  • Structure: linear and hierarchical structures, timelines and semantic blogging.
  • Connectedness: collaboration, links, particularly top other blogs and newsfeeds, but also to the Web in general.
  • Design and Presentation: the visual and typographical aspects of blogs.
  • Content: quality of information, use of multimedia, frequency of update, archiving

Web revision theory

Here are more revision notes for the Web Design Fundamentals unit.  Please see the revision notes on Design and HTML as well.

W3C

The W3C is the World Wide Web Consortium.  It sets standards for HTML and other key web technology.  This means that all browsers know that you want your text bold when you use <strong> and that everyone who uses HTML knows to use <a href=…> to add a web link.

Copyright and Creative Commons

Creative Commons is a nonprofit organization that enables the sharing and use of creativity and knowledge through free legal tools.

The free, easy-to-use copyright licenses provide a simple, standardized way to give the public permission to share and use your creative work — on conditions of your choice. CC licenses let you easily change your copyright terms from the default of “all rights reserved” to “some rights reserved.”


Attribution iconAttribution 
means:
You let others copy, distribute, display, and perform your copyrighted work – and derivative works based upon it – but only if they give you credit.

Noncommercial iconNoncommercial means:
You let others copy, distribute, display, and perform your work – and derivative works based upon it – but for noncommercial purposes only.

No Derivative Works iconNo Derivative Worksmeans:
You let others copy, distribute, display, and perform only verbatim copies of your work, not derivative works based upon it.

Share Alike iconShare Alike means:
You allow others to distribute derivative works only under a license identical to the license that governs your work.

Definitions from Flickr CC

If you can’t get permission to use an image you could always make your own image – take a photo or use a paint package or scan a drawing.  The same goes for sound effects and music – it’s great fun recording your own sound effects

 

Intellectual Property

“Intellectual Property is work or invention that is the result of creativity, such as a manuscript or a design, to which one has rights and for which one may apply for a patent, copyright, trademark, etc”

Definition from Google Dictionary

You should make sure you always cite your sources. This is telling people where you have got text or images from so that they can go and find out more.

 

Accessibility

Some people with visually imparements use screen readers to read aloud everything that is written on a web site.  It is important that you put ‘Alt’ tags (alternative text) on your images so that they can get a description of that is in the image.

It is also useful if you put the most important content and links near the top of your web page so that they don’t have to listen to the rest of your page to find the link or information they need.

File formats

Image files:

A photo of a cat with the compression rate decreasing, and hence quality increasing, from left to right

  • .jpg / .jpeg – a compressed image format that is generally 10% smaller than the uncompressed file.  It is lossy, which means there is a reduction in the image quality when it is compressed.  This happens every time you save, which is why you should always keep your original files
  • .gif – good for clipart and other drawings. Good for animated gifs.
  • .png – best for drawings and illustrations with text

Here’s a great description of difference between jpg, png and gif (and a cool cartoon) 

Sound files:

  • .mp3 – smaller compressed file.  Lossy (there’s a loss in sound quality when the file is compressed)
  • .wav – large uncompressed file, lossless (there’s no loss in quality)
  • .aiff – large uncompressed file, similar size to WAVs but better quality.  Lossless (there’s no loss in quality)
  • .aac – AAC files are generally higher quality (less quality loss) and slightly smaller than MP3 files of the same song

Description of differences between different audio file formats

Video files:

  • .avi – AVI can be played in most Windows-based applications like Windows Media Player
  • .mp4 – MP4 is mostly used with many personal media players like iPod and PSP.  At the same file size, MP4 files have a better video quality then AVI files
  • .mov – a Quicktime movie file

 

Other files:

  • .htm / .html – a web page with text and markup to allow formatting, links, images, videos etc.  HTML stands for HyperText Markup Language.
  • .swf – Adobe Flash file, like a game or animation

 

Things you need to know in HTML

HTML5 logo

Start and end the web page <HTML>  …..     </HTML>
Add a title <HEAD>

<TITLE>Blah</TITLE>

</HEAD>

Add a heading (different sizes) <H1>Hi</H1>

<H6>Hello</H6>

Make text bold and italic <STRONG>  </STRONG>

<EM>  </EM>

Add a web link <A HREF=“www.blah.com”>Blah</A>
Add an image (with alt text) <IMG SCR=http://www.blah.com/blah.jpg ALT=“Blah” HEIGHT=“100” WIDTH=“200”>
Make an ordered list (numbered list) <ol>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
Make an unordered list (bullet points) <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Add a table <table>

<tr>

<td>First Name</td>

<td>Last Name</td>

</tr>

<tr>

<td>Suzi</td>

<td>Smith</td>

</tr>

</table>

It is also useful to know the following older HTML code as some websites let you use it in text boxes:

<b>Bold</b>

<u>Underline</u>

<i>Italic</i>

<font color=”blue”>This text is blue</font>

<body bgcolor=”green”>
The background of this web page is green
</body>

Design Theory

Today we went over some design principles and revised some theory. We looked at Contrast, Shape, Movement, Line, Texture, Balance, Unity and Navigation

Contrast

Good colour contrast makes text easier to read and makes it easier for people with colour blindness and visual impairments. Examples of good and bad contrast (high and low contrast)

If you have time, read more about colour blindness and see examples of how people can see different colours.

Shape

HTML web pages are generally designed in grids of columns but you can use interesting shapes including geometric shapes like squares, circles and triangles to communicate better. Geometric Shapes in web design

Movement

Visual movement is used to guide the user through the web site.  This isn’t using animated gifs but pictures where your eye flows over to the important parts of the page. Visual movement on web pages

Line

Lines are used to divide up elements on your web page, to organise the space and to direct the user’s eye.  The lines don’t have to be straight! Code Slingers - web page showing use of line

Texture

You can use texture to give the impression of a surface to your design and to make your website feel more immersive. Examples of textures

Balance

Balance on a web pages involved making sure the left and right sides of the page are similar in terms of shape, size, colour, position and quantity Balanced web site

Unity

Unity is grouping all the elements on a page that seem to belong together. Unity in Web Design

Navigation

In some ways, navigation is one of the most important part of web design.  If the visitors to your website can’t find the information they want then they will leave your site.  Good navigation will make your visitors want to click and hang around your site a little longer.

Headings need to be clear to help your users navigate around the page. Buttons or navigation bars are usually used to go to the main sections of web sites.

Web navigation

For a long time there has been an informal design rule that you should be able to find the information you’re looking for on a site within three clicks.  However its now felt that the usability of your site is more important than counting the clicks it takes to get there.

Links

You should avoid having web links with “click here” written as this makes it difficult for people with visual impairments using a speech reader

Examples of how to phrase links to avoid "click here"

Exploring the web

Today we’re all feeling a little tired so we’re taking a break from writing our own web pages and looking at others.

First we looked at Don’t Click It.  This site is actually Flash rather than HTML but is an experiment in navigating a website without clicking your mouse button.  This seemed to really confuse everyone!

Next we had a look at The Code Player.  The aim was to find something cool and to right-click and select ‘view source’.  Very quickly there was a realisation that we can take the code off the pages and try it ourselves in Thimble!

Hyperlinker Webmaker badgeA challenge was issued of getting as many of the Webmaker badges as possible.