These 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?
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
Today we tried out a different ‘tween’ – the motion tweet. This lets your object fly along a straight or curved line. 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
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.
You 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
———- 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!
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.
You 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.
Add 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
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.
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
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
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.
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
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 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 means:
You let others copy, distribute, display, and perform your work – and derivative works based upon it – but for noncommercial purposes only.
No Derivative Worksmeans:
You let others copy, distribute, display, and perform only verbatim copies of your work, not derivative works based upon it.
Share Alike means:
You allow others to distribute derivative works only under a license identical to the license that governs your work.
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”
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:
.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
.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.
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.
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.
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.
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!
Texture
You can use texture to give the impression of a surface to your design and to make your website feel more immersive.
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
Unity
Unity is grouping all the elements on a page that seem to belong together.
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.
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
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!
A challenge was issued of getting as many of the Webmaker badges as possible.