Author Archives: Digitalkatie

Peppa site finished

Posted on by

I have finished my example Peppa Pig site. The main reason I decided to finish it isn’t because my class need to see an example because they are sitting quietly working away on amazing sites. Nope, I decided to make my site because I wanted to get the full set of Webmaker badges!

I’ve made a set of four pages.  I have an image, a rollover image, an image map, CSS code, bullet lists, tables, videos, sound and links.  I haven’t done a simple form or a pop up / drop down menu – I chose to do rollovers and image maps instead.

There are differences to my original plan.  On my plan I had a page for Characters but instead that information is on the home page.  Instead I have a page with my image map weblinks.

Ms Farrell's Peppa Pig website plan

Things I’d like to do to improve the website are adding some fonts from Google Web Fonts so that the site looks more customised and professional and maybe adding a pig voki, cause everyone likes Vokis 😉  I think I would also move the lists of Peppa’s family and friends and put it onto its own page as at the moment this information is really far down the page.  I could even have a family image map or little pictures of each character.

My Peppa Pig site.

The Eddies are back!

Posted on by

Nominations are now open for the 2012 Edublogs Awards

Eddies 2012 logoThe Edublog Awards is a community based initiative started in 2004 in response to community concerns relating to how schools, districts and educational institutions were blocking access of learner and teacher blog sites for educational purposes.  The purpose of the Edublog awards is promote and demonstrate the educational values of these social media.

How To Nominate

To nominate your favourites:

  • Write a post with your nominations for the different categories on your own blog (or a website – anywhere public)
  •  Send the link to your post via the form at the bottom of the Nominations Page

Nominations are open from now until Monday, November 26th so go nominate your favourite blogs, twitterers, community sites, videos, podcasts and more… for 2012

Here are the categories in full

  • Best individual blog
  • Best group blog
  • Best new blog
  • Best class blog
  • Best student blog
  • Best ed tech / resource sharing blog
  • Best teacher blog
  • Best library / librarian blog
  • Best administrator blog
  • Most influential blog post
  • Best individual tweeter
  • Best twitter hashtag
  • Best free web tool
  • Best educational use of audio / video / visual / podcast
  • Best educational wiki
  • Best open PD / unconference / webinar series
  • Best educational use of a social network
  • Best mobile app
  • Lifetime achievement

Please nominate us!

If you’d like to nominate this blog (and we’d be your best friend forever if you did!!), then please write a post on your blog nominating digitalmediacomputing.org.uk for Best New Blog, Best Individual Blog or Best Teacher Blog or any other category you feel is appropriate, then fill in the form on the Nominations Page.  Thank you!!!

Our nominations:

 

Image mapping

Posted on by

Image maps are pictures that have places on them where you can click your mouse and you will go to a specific web page.  They are sometimes used for navigation bars on websites.

The clickable areas of an image map are either circles, rectangles or polygons.  The coordinates of the shapes are described in the HTML code.

Image Map Co-ordinates

The code you need looks like this:

<img src=”planets.gif” width=”145″ height=”126″ alt=”Planets” usemap=”#planetmap”>

<map name=”planetmap”>

<area shape=”rect” coords=”0,0,82,126″ href=”sun.htm” alt=”Sun”>

<area shape=”circle” coords=”90,58,3″ href=”mercur.htm” alt=”Mercury”>

<area shape=”circle” coords=”124,58,8″ href=”venus.htm” alt=”Venus”>

</map>

Image maps are another trick that is far easier to do in web development software or some image editing software packages.  It is possible to do in HTML though and Mobile Fish have a nice online image map generator tool that is easy to use.

The map is available as a Peppa Pig Map

click map

Nick Jr

< Peppa Pig's website

Channel 5

Peppa Pig World

Peppa Pig Store

Roll over, roll over

Posted on by

The website needs to include three of the following:

  • A simple form (like a ‘mailto:’ form)
  • An image map
  • Rollover images
  • A pop up or drop down menu
  • Photographs

Today we looked briefly at rollover images.  This is something that is easier using web development software but is still very possible when making the pages yourself using HTML.

First you can use a CSS button generator like ButtonMaker.  Tweek the settings to make the button look like you want it then copy the CSS code.

Open up your HTML file (in Notepad or in Mozilla Thimble).  Paste the copied code into the <head> section of your page.  This will need to be in <style> tags (<style> before the code, </style> after the copied code)

Next we need to add in code to display your button.  This needs to go into the <body> section of the page.

We have to find code to display the button.  You can get this by viewing the page source on the ButtonMaker site and looking for the part that has “View the CSS” in it.

….if you get stuck, the code you need is:

<div id=”button-box”>
<a href=”#” class=”button”>View the CSS</a>
</div>

Add this code into your page and change the text from “View the CSS” to something more appropriate for your website.

Finally in the <a href..> tag you need to change the ‘#’ to be the web address you want to link to.

Have a look at my example to see a working button.  It actually links to a lovely site called Don’t Click It which tries out different ways of using websites without clicking your mouse – worth having a look and a play!

Alternative:

A different way to do this is to use code in the main body of the page.  This is particularly useful when you can’t change the CSS such as with a blog.  The code you need is:

<a href=”TARGET URL GOES HERE”>
<img src=”URL OF FIRST IMAGE GOES HERE” onmouseover=”this.src=’URL OF SECOND IMAGE GOES HERE'” onmouseout=”this.src=’URL OF FIRST IMAGE GOES HERE'” />
</a>

Website Design with Peppa Pig

Posted on by

Peppa Pig on the computerToday we started on the Website Design and Development unit.  Pupils have chosen to select their own topic rather than being given a topic by me.  We will still have a client interview though, where the ‘client’ is requesting a topic the pupil has chosen.

Website Design Task:

Plan a website on a topic of your choice with four pages.

On paper or using gliffy.net plan out your website structure and what each page will look like.

There should be a home page and then three other pages.

Examples:

  • a main page about cycling then a page on famous cyclists, a page on bikes and page on places to cycle inEdinburgh
  • a home page on Peppa Pig and then a page on episodes, a page on characters, a page with video clips and sound clips
Ms Farrell's Peppa Pig website plan

The website doesn’t need to be made in HTML.  You can use software to make the site if you prefer.  It does need to have some CSS though.

Possible next tasks:

  • Go to http://www.google.com/webfonts and choose a font for the headings and a font for paragraph text
  • Select images for your site
  • If you want go to voki.com and create a video for your site
  • If you want, you can embed a youtube video

Zombies and squished bunnies

Posted on by

We have spent a fair amount of time on HTML so I felt it was a good time to move onto looking at CSS.  We talked about the content being stored in HTML and the appearance settings being in CSS code.

Zen Garden screenshot - ocean design Zen Garden screenshot - army design

We looked at CSS Zen Garden and saw how different the page can look depending on the CSS file.  This is a site where the HTML page is always the same but the CSS file is very different!

Get Off My Lawn zombieWe then looked at a couple of projects in Mozilla Thimble.  First we looked at Get Off My Lawn, where you have to change the CSS positioning code to move furniture around to defend your house against zombie attack!  Later in this project you can add your barricades.  I chose a steel door.  One pupil chose a lion, which I felt would be risky as it might turn into a zombie lion!

zombies on the lawnYou can then customise your zombies.  I’m afraid I was boring and just added a picture of myself.  I should have zombiefied myself first but I ran out of time.

Bunny and Bunny MasherSome pupils moved onto a different positioning project called Bunny Masher where you have to find different ways of saving a little bunny rabbit from being horribly squished by a huge bunny mashing machine.

Positioning in CSS can be done by pixels (px), percentage (%) or ’em’.  An em is a multiple of a predefined size. The predefined size is the current font size, so 1em = current font size.  We discussed why on earth would we want to use em instead of the far easier px or %.  We thought back to our discussion the other day about accessibility and realised that if someone wanted to make the font size larger then there will be times you want to adjust positioning of graphics around the text because you can’t set the font to be a fixed size.

Email

Posted on by

Gmail red envelope logoToday we started the email part of the Internet and Online Communications assessment.  I was surprised how few pupils didn’t seem to know if they had an email account.

I decided to show how to get a gmail account as this has more facilities than the pupil’s Glow Mail accounts such as signatures and formatting.

GlewWe all signed up for an account at Glew as this would also give us access to other useful tools later.  Once we got logged in we went into gmail.  The first task was just to send an email to me.

We then talked about reply, CC and BCC and we sent an email with someone in the CC field.

The last task was to investigate signatures and to try and find a cool signature.

HTML: the language of the world wide web

Posted on by

We have decided to learn HTML in a self paced kind of way.  There are so many quality resources for learning HTML and I don’t want to dictate one when it might not suit everyone in the class.

Codecademy Badges

The learning intention has been “Learn some HTML coding“.  You can use:

The challenge is:

Can you make a page with some
text, links and a picture?