"TiVo ran 12 user tests in 12 weeks while designing its new website. As TiVo's experience shows, frequent and regular testing keeps the design usability focused."
From http://www.useit.com/
My Summer Vacations
14 years ago
Saturday, August 2, 2008
Tuesday, July 29, 2008
Project Presentation
Things I still need to do on my website:
Tweener to help with the flash projects
- Check the width
- Add (pdf) to links
- color? what about color blind people who can't see the green well?
- formatting/design of lesson plan pages?
- Maybe a graphic or navigation bar at the top of the lesson plan pages
- outside server, then rollover link to redirect to the new site
- check my "blank" links
- continue to add content
- check on the tables
- Add the explanation pages for each website with an image capture of the site and how I like to use the site
- Bevel/Emboss each button to make them more 3-D like the title
- plan ahead better next time
- add iTunes link to middle ages project
- check the site on different servers, computers, monitors, etc.
Tweener to help with the flash projects
Tuesday, July 22, 2008
Almost Done
Prescriptive Design Document
1-2 pages
Why is your site designed the way it is?
-navigation
-color
-pdf's
-basic design
Top 100
Social Bookmarking
*Google Bookmarks:
bookmarks are private
need an account
online storage
not as easily accessible
*del.icio.us :
all your bookmarks in one place
share bookmarks
tag pages you want
tool bar addition to tag easily
tag as a cloud, frequency, key words, date, & # of other people who have tagged it
Slideshare
like YouTube with slide shows, powerpoints, slidecasts, etc.
You can include your notes as a slide show transcript.
You can make your presentations public or private.
People can comment on your presentation if it's public.
networking
widgets
tags
downloadable
popular presentations
events
FAQs
1-2 pages
Why is your site designed the way it is?
-navigation
-color
-pdf's
-basic design
Top 100
Social Bookmarking
*Google Bookmarks:
bookmarks are private
need an account
online storage
not as easily accessible
*del.icio.us :
all your bookmarks in one place
share bookmarks
tag pages you want
tool bar addition to tag easily
tag as a cloud, frequency, key words, date, & # of other people who have tagged it
Slideshare
like YouTube with slide shows, powerpoints, slidecasts, etc.
You can include your notes as a slide show transcript.
You can make your presentations public or private.
People can comment on your presentation if it's public.
networking
widgets
tags
downloadable
popular presentations
events
FAQs
Tuesday, July 15, 2008
More Top 100
Tuesday, July 8, 2008
Fireworks III - Page Layout and Navigation
Create a button:
Edit -> Insert -> New Button
Create a rollover image:
Insert -> Image Objects -> Rollover Image
Edit -> Insert -> New Button
Create a rollover image:
Insert -> Image Objects -> Rollover Image
Tuesday, June 24, 2008
Fireworks II - More Image Tools
Dreamweaver Tips:
Insert -> html -> meta tags -> Refresh - You set a time when the page will reload automatically (every 30 seconds or whatever)
You could also set it to reload to another page after so many seconds.
Twitter
http://www.akammerman.com/microblogging.html
Twitter
Microblogging
You can keep a status update of what you're doing, you can follow others' updates, send messages, etc.
You can even post your twitter updates to your regular blog.
Others:
Jaiku
Tumblr
Pownce
Plurk
Mahalo - add-on for Firefox
Twitterbar - Twiiter add-on for Firefox
Jott - voice activated updates for Twitter, Blogger, etc.
Tempo - time manager/tracker
Hello Txt - with one click you can update all your microblogging sites at once
Google Gadgets
Review of more microblogging sites
Adobe Captivate 3
Adobe's Website
Captivate 3 Website
Screen capture capabilities
Run the program you are trying to teach and press "record" on Captivate 3 and it will record what you are doing on the actual program.
It creates a bunch of flash files of what you are doing.
You can edit what you have recorded later by deleting or changing around the slides you have created by recording.
Create interactive tutorials that can quiz, poll, etc. along with the presentation.
Publish as PowerPoint, html, etc. A lot of possible formats
You can download a 30-day trial.
There are a lot of other screen capture software packages available too.
Personal Site
Email John to let him know your site is finished and ready for him to view.
Fireworks Basic Tools
Select
Bitmap
Vector - When creating a shape, like a circle, hold the shift key down to make a perfect shape
Web
Colors
View
Class Assignment:
Insert -> html -> meta tags -> Refresh - You set a time when the page will reload automatically (every 30 seconds or whatever)
You could also set it to reload to another page after so many seconds.
http://www.akammerman.com/microblogging.html
Microblogging
You can keep a status update of what you're doing, you can follow others' updates, send messages, etc.
You can even post your twitter updates to your regular blog.
Others:
Jaiku
Tumblr
Pownce
Plurk
Mahalo - add-on for Firefox
Twitterbar - Twiiter add-on for Firefox
Jott - voice activated updates for Twitter, Blogger, etc.
Tempo - time manager/tracker
Hello Txt - with one click you can update all your microblogging sites at once
Google Gadgets
Review of more microblogging sites
Adobe Captivate 3
Adobe's Website
Captivate 3 Website
Screen capture capabilities
Run the program you are trying to teach and press "record" on Captivate 3 and it will record what you are doing on the actual program.
It creates a bunch of flash files of what you are doing.
You can edit what you have recorded later by deleting or changing around the slides you have created by recording.
Create interactive tutorials that can quiz, poll, etc. along with the presentation.
Publish as PowerPoint, html, etc. A lot of possible formats
You can download a 30-day trial.
There are a lot of other screen capture software packages available too.
Personal Site
Email John to let him know your site is finished and ready for him to view.
Fireworks Basic Tools
Select
Bitmap
Vector - When creating a shape, like a circle, hold the shift key down to make a perfect shape
Web
Colors
View
Class Assignment:
Tuesday, June 17, 2008
Fireworks I - Pictures for a Website
Google Calendars
Voiceline
Cha Cha
text 242 242 (cha cha) any question
Picasa
Fireworks
Keep the resolution at 72 if you're planning on putting on the web.
If you're printing, you can increase it if you want to.
Vector - uses algorithms
Bitmap - uses squares
When you resize your image smaller, it takes out the pixels it doesn't need, but that makes it pixelated if you blow it back up. Just make sure you do this last, after you work with it.
Find some sites you like.
Voiceline
Cha Cha
text 242 242 (cha cha) any question
Picasa
Fireworks
Keep the resolution at 72 if you're planning on putting on the web.
If you're printing, you can increase it if you want to.
Vector - uses algorithms
Bitmap - uses squares
When you resize your image smaller, it takes out the pixels it doesn't need, but that makes it pixelated if you blow it back up. Just make sure you do this last, after you work with it.
Find some sites you like.
Unit 2 - Experience Bank:
You need to post
Tuesday, June 10, 2008
Reviewing, Testing, Publishing
100 Tools for Learning
Audacity
editing music
iTunes uses 128 bit rate
CD quality is 160
You can convert tapes to CDs using a two-ended headphone jack
Poll Daddy
polldaddy.com
answers.polldaddy.com
Preliminary Design Document
Draw a map of what pages your site is going to connect.
What is the site about?
How will it connect together?
Color schemes?
Layout?
CSS & Templates
Templates - aks if you want to upload all the files with updated info.
CSS - you only have to upload one file because all the files are based on the one CSS file
CSS is a lot faster, especially if you have a lot of pages on your site.
Window Size
800 X 600 is optimal.
Adjust it by dragging the bottom right hand corner of the dreamweaver view.
Also pay attention to the number of seconds it is going to take to load. You don't want it to take too long.
Audacity
editing music
iTunes uses 128 bit rate
CD quality is 160
You can convert tapes to CDs using a two-ended headphone jack
Poll Daddy
polldaddy.com
answers.polldaddy.com
Preliminary Design Document
Draw a map of what pages your site is going to connect.
What is the site about?
How will it connect together?
Color schemes?
Layout?
CSS & Templates
Templates - aks if you want to upload all the files with updated info.
CSS - you only have to upload one file because all the files are based on the one CSS file
CSS is a lot faster, especially if you have a lot of pages on your site.
Window Size
800 X 600 is optimal.
Adjust it by dragging the bottom right hand corner of the dreamweaver view.
Also pay attention to the number of seconds it is going to take to load. You don't want it to take too long.
Tuesday, June 3, 2008
Tables, Templates, & CSS - Oh my!
Top 100 Presentations:
Skype
Free phone calls, video conferencing, chatting, and file sharing computer to computer.
Free phone calls from your computer to a telephone or from a phone to your computer.
Call forwarding to your cell phone or voicemail.
You can get an 800 number.
Works best with a USB headset.
Dreamweaver
Be sure to key the # sign and key upper-case letters when typing in a color number.
Graphics Formats:
For pictures, use jpg.
For small and simple things, like buttons, that only have 4 or 5 basic colors in bigger blocks, use gif.
png files are usually HUGE
Color
ColorSchemer
Tables
pixels - will stay the same size no matter what the screen size is
percent - will adjust to the size of the person's screen
You would typically want to set table size to pixels - about 780 or 790 so that your text doesn't get messed up on people's monitors.
Skype
Free phone calls, video conferencing, chatting, and file sharing computer to computer.
Free phone calls from your computer to a telephone or from a phone to your computer.
Call forwarding to your cell phone or voicemail.
You can get an 800 number.
Works best with a USB headset.
Dreamweaver
Be sure to key the # sign and key upper-case letters when typing in a color number.
Graphics Formats:
For pictures, use jpg.
For small and simple things, like buttons, that only have 4 or 5 basic colors in bigger blocks, use gif.
png files are usually HUGE
gif vs. jpg
http://www.siriusweb.com/tutorials/gifvsjpg/
http://cter.ed.uiuc.edu/gif-jpeg/
http://www.algonet.se/~otsu/pngcomparison.html
http://www.sph.sc.edu/comd/rorden/graphics.html
Color
ColorSchemer
Tables
pixels - will stay the same size no matter what the screen size is
percent - will adjust to the size of the person's screen
You would typically want to set table size to pixels - about 780 or 790 so that your text doesn't get messed up on people's monitors.
Tuesday, May 27, 2008
Images & Links
Top 100 Presentations:
GarageBand
Edublogs
Homework
Posting homework on your U of U student website:
Go to "site" -> "manage site" on Dreamweaver
"How do you connect to your remote server?" -> FTP (File Transfer Protocol)
Folder Name (only after you have created it on the website) -> public_html
Hostname -> home.utah.edu
Username -> your UNID
Password -> your U of U user password
Right click on your folder, then select "permission".
Don't give users and everyone permission to write, but give them everything else.
Maximize your view of the website contents.
click on the files you want uploaded, then click the blue arrow to actually upload.
(Say "yes" to dependent files.)
Here is my site.
Text
For text wrapping to work properly, make sure the image is at the beginning of the paragraph.
Images
To change the file size of your picture, go to the vice tool at the bottom of your page when the picture is selected.
Choose "use this file".
Change file size under the file menu.
Keep your options at 100%.
It's best to make all changes, borders, etc. to your picture in a program like Photoshop before putting on your page because your options on Dreamweaver are limited.
Links
Absolute Link - http://.....
Highlight whatever you want to become a link.
Go to "link" at the bottom of the page and simply type in the url you want it to go to.
To make it bring up another window to go to the link, select "blank" on the "target" menu below "link" on the bottom of your page.
Click F12 to view your page online and check that your link is working.
Relative Link - use this for any of your own pages that you want to link to because it will automatically update your links for you if you change their locations in your files.
Next to the "link" menu at the bottom, click and hold down on the little clock looking icon. Drag to the file on the right in Dreamweaver you want to link to, then let go.
Anchor - internal link to go quickly to another spot on the same page
Place an anchor by setting your cursor where you want it and clicking the anchor icon.
Name the anchor something simple, easy to remember, all lowercase.
Highlight what you want linked, then type # and the name of your anchor in the "link" tool.
Hotspot - allows only one part of a picture to be a link, like an image map of a site
Click on the circle or square at the bottom right hand corner, put it on the spot of your picture you want, then link it like we have the other links.
It will show you that there is a hotspot on Dreamweaver, but it won't show up on your site. The user will know there is a link because their mouse icon will show the hand instead of the arrow.
GarageBand
Edublogs
Homework
Posting homework on your U of U student website:
Go to "site" -> "manage site" on Dreamweaver
"How do you connect to your remote server?" -> FTP (File Transfer Protocol)
Folder Name (only after you have created it on the website) -> public_html
Hostname -> home.utah.edu
Username -> your UNID
Password -> your U of U user password
Right click on your folder, then select "permission".
Don't give users and everyone permission to write, but give them everything else.
Maximize your view of the website contents.
click on the files you want uploaded, then click the blue arrow to actually upload.
(Say "yes" to dependent files.)
Here is my site.
Text
For text wrapping to work properly, make sure the image is at the beginning of the paragraph.
Images
To change the file size of your picture, go to the vice tool at the bottom of your page when the picture is selected.
Choose "use this file".
Change file size under the file menu.
Keep your options at 100%.
It's best to make all changes, borders, etc. to your picture in a program like Photoshop before putting on your page because your options on Dreamweaver are limited.
Links
Absolute Link - http://.....
Highlight whatever you want to become a link.
Go to "link" at the bottom of the page and simply type in the url you want it to go to.
To make it bring up another window to go to the link, select "blank" on the "target" menu below "link" on the bottom of your page.
Click F12 to view your page online and check that your link is working.
Relative Link - use this for any of your own pages that you want to link to because it will automatically update your links for you if you change their locations in your files.
Next to the "link" menu at the bottom, click and hold down on the little clock looking icon. Drag to the file on the right in Dreamweaver you want to link to, then let go.
Anchor - internal link to go quickly to another spot on the same page
Place an anchor by setting your cursor where you want it and clicking the anchor icon.
Name the anchor something simple, easy to remember, all lowercase.
Highlight what you want linked, then type # and the name of your anchor in the "link" tool.
Hotspot - allows only one part of a picture to be a link, like an image map of a site
Click on the circle or square at the bottom right hand corner, put it on the spot of your picture you want, then link it like we have the other links.
It will show you that there is a hotspot on Dreamweaver, but it won't show up on your site. The user will know there is a link because their mouse icon will show the hand instead of the arrow.
Tuesday, May 20, 2008
Dreamweaver Intro.
Learning the Basics / Text
Web2Expo
Clay Shirky - author wrote about web 2.0
Media includes consuming, producing, and sharing.
http://web2expo.blip.tv/file/855937/
Making a Website
Print out the UEN planning document
Draw out a plan of the pages you will have on your site and how they'll be connected.
Download the Student Files.
www.useit.com
Dreamweaver
Give your webpage a name. Do not leave it as "untitled document". This primarily helps with search engines.
You can title your home page whatever you want, but below in the content you always want to label your home page "index.html".
Managing your files:
Create a website folder called "website".
When naming things for web servers, always use lowercase letters and do not use spaces.
Always use the .html extension on all your files for the web servers.
In your website folder create a file called "index.html".
Create nested folders inside your main folder for things like "homework", "project", etc.
Manage all your files within Dreamweaver so the program will manage it all for you and not get mad.
UEN handouts to help with Dreamweaver
Web2Expo
Clay Shirky - author wrote about web 2.0
Media includes consuming, producing, and sharing.
http://web2expo.blip.tv/file/855937/
Making a Website
Print out the UEN planning document
Draw out a plan of the pages you will have on your site and how they'll be connected.
Download the Student Files.
www.useit.com
Dreamweaver
Give your webpage a name. Do not leave it as "untitled document". This primarily helps with search engines.
You can title your home page whatever you want, but below in the content you always want to label your home page "index.html".
Managing your files:
Create a website folder called "website".
When naming things for web servers, always use lowercase letters and do not use spaces.
Always use the .html extension on all your files for the web servers.
In your website folder create a file called "index.html".
Create nested folders inside your main folder for things like "homework", "project", etc.
Manage all your files within Dreamweaver so the program will manage it all for you and not get mad.
UEN handouts to help with Dreamweaver
Tuesday, May 13, 2008
1st Day of Class
Learning the Basics
Write a prescriptive plan for good website design. Search other websites and find what works and what doesn't work. Why did they design it that way? Make mistakes and explore.
Class Values:
Interoperability - how websites work on different computer platforms
Originality of Work
Assignments:
Class Participation
Option 1 -
Homework
Minor Project - Personal Website - photo, resumé, 3 pages
Major Project - address an instructional need - choose an instructional procedure
home.utah.edu - every student gets 10 mb of space for their own website
Get software at software.utah.edu
Class website - http://www.ed.utah.edu/~monson_j/edps6447/
Dr. Monson's website - http://www.ed.utah.edu/~monson_j/
100 Tools for Learning
NeoTrace - shows you where a url is hosted
InternetFrog.com - checks your internet speed
Google Docs
Creating Websites
html
Homework:
Email John with the email address you want John to use to communicate with you.
Email your choice of top 100 tools to present on.
Get the book.
Get the software.
Establish a google account.
Decide where you are going to keep your work.
Keep a backup of everything you do.
Write a prescriptive plan for good website design. Search other websites and find what works and what doesn't work. Why did they design it that way? Make mistakes and explore.
Class Values:
Interoperability - how websites work on different computer platforms
Originality of Work
Assignments:
Class Participation
Option 1 -
Homework
Minor Project - Personal Website - photo, resumé, 3 pages
Major Project - address an instructional need - choose an instructional procedure
home.utah.edu - every student gets 10 mb of space for their own website
Get software at software.utah.edu
Class website - http://www.ed.utah.edu/~monson_j/edps6447/
Dr. Monson's website - http://www.ed.utah.edu/~monson_j/
100 Tools for Learning
NeoTrace - shows you where a url is hosted
InternetFrog.com - checks your internet speed
Google Docs
Creating Websites
html
Homework:
Email John with the email address you want John to use to communicate with you.
Email your choice of top 100 tools to present on.
Get the book.
Get the software.
Establish a google account.
Decide where you are going to keep your work.
Keep a backup of everything you do.
Subscribe to:
Posts (Atom)
