Archive for the tag 'webdesign'

Embed an HTML5 audio player in Google Sites

June 27th, 2014

Want to add audio files that play in your Google Site without forcing visitors to download the files first?

audio player in Google Sites

An HTML5 audio player embedded in Google Sites

Do you need this to work on the iPad or in other browsers that do not support Flash?

Below is the URL to a gadget I made that will embed an HTML5 audio player in Google Sites.

https://googledrive.com/host/0B42c3pO5_y67X0Fhcmg5XzhoR0U/html5-audio-player.xml

Watch the video below to learn how to use it.

https://www.youtube.com/watch?v=m0CzF4l5IvU

No child left without coding skills

February 10th, 2012

In this article, Andy Young writes:

Programming is the act of giving computers instructions to perform. This is true whether the output is your word processor, central heating or aircraft control system. If you can’t code, you are forced to rely on those that can to ensure that you can benefit from the greatest tool at your disposal.

I can’t agree more. Every kids should learn to code. Even if it’s just a little bit. Programming skills are empowering and they teach kids the importance of building models.

The easiest way to get started is to teach your students how to build a simple web  page using HTML. It’s not really programming but it will get kids thinking about code.

Learn HTML

 

To dive into programming, check out these tools to get kids started. My personal favorite is Scratch. It is free, easy to use, and designed so even  young kids can understand programming without actually having to write out complex code. Below is an overview.

Resembling Scratch, App Inventor is another easy to use programming tool for building apps on Android devices.

App Inventor

App Inventor was announced by Google but has recently been handed to MIT to manage. Watch for the “MIT App Inventor” this spring.

Finally, maybe for the more experience coders, give VPython a look. It allows students to create 3D interactive models. Compared to Scratch, it looks a little intimidating. However, there are many sample programs and tutorials available to help you get started.

Color your Website with a Touch of Nature

August 17th, 2007

Recently Steve Dembo (from Teach42) Twittered:

It’s amazing just how much better you feel about a website once the graphic design gets put in.

I can’t agree more. While good content is what keeps your users coming back for more, usability and design are responsible for holding their attention during their first visit.

A site’s color scheme is key to its look and feel. Here is a site that shows how you can get inspiration from nature.

Frogs:
Frog Colors

Hawaii:
Beach Colors

There are also several online color scheme tools (like this one) that can help you start designing your next site.

5 favorite Firefox extensions for web design

August 8th, 2007

As a web page designer, I am please with all the options that the Firefox browser provides. Even though Microsoft has made some significant advances with the release of Internet Explorer 7, they simply haven’t matched what Firefox has been able to accomplish.

I consider the vast collection of Firefox extensions its biggest strength. Here are my five favorite extensions for web page design:

  1. MeasureIt
    Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
    measureit
  2. ColorZilla
    get a color reading from any point in your browser
    colorzilla
  3. Aardvark
    See how the page is created, block by block
    example01.png
  4. Web Developer
    Adds a menu and a toolbar with various web developer tools
    webdev.png
  5. IE View Lite
    IE View Lite opens your current page in IE with just one-click

Create a website in minutes

June 2nd, 2006

Looking for an easy way to create a website? Checkout some of the new portal sites that are emerging. Many allow you to drag and drop content onto the page with ease. This might be the perfect place to set up a quick webpage for you and your students.

All of the sites have similar features such as rss readers, email checkers, to-do lists, photo albums, and etc. It’s really a matter of finding one that works best for you.

Here are two that I have used in the past:

Pageflakes
pageflakes

Protopage
protopage

Of course, there are several others– give one a try.

Color Blindness Revisited

June 1st, 2006

I don’t know what has sparked my recent fascination with color blindness but here is a tool I found that blows my previous suggestions out of the water.

To see a fascinating example (unless you are color blind) set the foreground to bright red and the background to black.

Color blindness: should you care?

May 18th, 2006

Approximately one out of every twelve males has some form of color blindness. Take a look at how they see the world.

colorblind.JPG

Should you think about this disorder while creating your next presentation or website? That depends on your audience. If the majority of your audience is male, I would let color blindness influence the design of your next project.

Here are a few things to consider when building a presentation or website:

  • do not place red and green together (especially in menus)
  • avoid using color as the only distinction between key elements
  • find a color blind friend to look at your work
  • view desaturated versions of your images to see if their features still can be detected

Some resources:

F is a passing grade for websites

May 14th, 2006

The Nielsen Norman Group has conducted an eye tracking study that has shown that most users read in an F shaped pattern when visiting a website.

f_reading_pattern_eyetracking1.jpg

What should web designers learn from this study?

  • users won’t read your site thoroughly
  • the first two paragraphs are the most important
  • information-carrying words should start subheadings, bullet points and paragraphs

Read more about the study.