Sunday, November 29, 2009

Photo Sharing With Google's Picasa

Picasa is Google's fast and easy photo sharing program. Google states, "Picasa & Picasa Web Albums make it easy for you to organize and edit your digital photos, then create online albums to share with friends, family & the world." The online program also provides you with plenty of storage and allows you to not only put your pictures on a safe server but also to share your images via email or online web pages. Picasa is also a great way to back up your pictures or to store pictures if you are low on storage space on your computer or your web server.

Creating A Photo SlideShow On Picasa

Below I will show you how you can use Picasa's embed slideshow to add a slideshow to display multiple pictures to your web page or blog via Picasa. If you do not know what an embed tag is take a look at my short previous post it will help you understand what you are about to do a little better.

Steps to making a web slideshow on Picasa:
Note: If you are familiar with Picasa skip to step 3.

1. First you will need a Google Account or Picasa account. Both are free and if you click on the links you can sign up. They will both give you access to Picasa. If you have a Google Gmail account then you already have an account. Just go to Picasa's web page and login with your same username and password as your Gmail account.

2. Upload your pictures to an album. You can use Picasa's online uploading program or install Picasa on your computer to do this. If you install the program be sure to look for the button that says upload your pictures online. I also suggest you watch the videos below so you can get a better understanding of how Picassa works.



3. Once your pictures are uploaded go to your online album on the right side click on the
Link to this album

4. Then click on the Embed Slideshow. This tag will allow you to create your slideshow.

5. A new window will open that will ask
you how you would like your slideshow to appear once you post it. You will need to chose the size and what you would like to include in your slide show like captions and links.

6. Next copy the embed tag by going to Edit copy on your browser or use the short cut key Control C


7. Paste the embed tag into your blog or webpage HTML. On Blogger you will need to go to the Edit HTML section of your post to paste it. In Dreamweaver you will do the same thing add the code to your HTML area.

8. Upload your webpage or publish your blog post and you've got yourself a very fancy slideshow embed in your page.


Picasa Introduction Videos



Click on the arrows to move to the next video on my playlist.

What Are Embed Tags?

Embed tags allow you to add movies, music, flash files, pictures, widgets, your Twitter and Facebook feeds, and all sorts of gadgets to your web pages. Embed tags in HTML (the language used to write webpages) are written like this: < embed src="helloworld.swf" > You can read more about embed tags at W3 schools.

Whenever you see embed tags it usually indicates that the gadget can probably be added to your blog or web page by adding the code following the < embed > tag on your page. A good example is the embed tag you find in a YouTube video. As long as the creator of the video hasn't disabled the embed code you can grab the video's embed code and add the video to your blog post or web page. In my next post I will show you how to add a picture slideshow using an embed tag to a web page or blog.

Tuesday, November 24, 2009

Fun Classroom Learning With Video

Student Learning Is Easy When You Make A Video

Do you have students who have difficulty learning something? Memorizing is an option, but how about putting students in a video to help them reflect on the standard they are trying to master. This month my first grader had to do just that. He had to memorize a poem for his grade level's poetry recital. He chose Jaberwocky, by Lewis Carroll. You might have also seen him tweeting his lines to practice on Twitter. The poem's rhetoric is difficult for any age group since the words in the poem do not exist. Needless to say it was a challenge to remember and learn it. So I decided to create a video to give him the opportunity to hear himself pronounce the words. With his video, he was able to see where he needed to work on his inflection and where he needed additional practice. The result, thanks to all his hard work, was he was one of three finalists from his class. We were very proud of him. I don't know about you, but I also see how this type of learning through video creation can have application to help ESOL or ESE students.

Jabberwocky In The Tulgey Woods

This is my son reciting his video and yes he's in the Tulgey Woods from Alice in Wonderland. We created the effect using Photo Booth 2.03 on a Mac. This fun application allows you to take video and add backgrounds to your video. It is a ton of fun to use and you could literally put yourself in any country or any location. The background could even be a computer motherboard. If you look at this previous post, you will see me experimenting with it at the Discovery Education workshop. Thanks Hall Davidson for the great tutorial! I have included directions on how to do this effect on Photo Booth below.

video

Photo Booth Requirements:
  1. You will need a web cam and a MAC. If you do not have a MAC see below for free alternatives for Windows.
  2. Then you will need Photo Booth 2.03 or above. This program comes pre-installed with OS X.

Directions:
  1. First be sure you have your picture ready. You will need the picture to be in .jpg, .gif, or .png format. There are some really cool pre-made backgrounds already preset in the program that you can use too.
  2. Go to the video camera feature it looks like a movie rail.
  3. Use the arrow keys to scroll to the drop your background here feature
  4. Drop your background (your picture)
  5. Click on the video camera to record your video
  6. The program will ask you to step out of the frame and then back in
  7. I recommend you have a clean background. Think green screen like they do in the movies. The cleaner the background the better the quality of your film.
  8. Have fun!
  9. If you make anything neat be sure to share. I would love to see your ideas. My students are working on Networking Web pages so you might just see a follow up post using their Networking video examples.
Windows Users:

If you are on a Windows machine there are quite a few programs you can try. Any of the programs below can offer the same kind of affect however some of them only take pictures and do not allow video. Also you will need a webcam and your web browser will need Adobe Flash installed. Some of these sites work best if you sign up for a free account and some do not work on a MAC.

Enjoy!

Monday, October 26, 2009

Adobe's Photoshop.com: A Free Online Photo Editor

In our budget minded classrooms it is always nice to find a great application available for free online. Adobe has this wonderful web app (application) called Photoshop.com that allows you to edit pictures very much like the very expensive flagship program, Photoshop. The real real version of Photoshop as you might know can cost you $699. Luckily for our classrooms Adobe offers Photoshop.com the slimmer version online for free. Plus they offer Photoshop's awesome tools with 2 gigabyes of storage space. My students will be signing up for free accounts on Photoshop.com and using it in my classroom since having this web app available will help them continue to develop their picture editing skills when they exit my class. Many times I have students exit my program and then never get to use the expensive Adobe software I teach them on. This web app will hopefully help them continue to strengthen their photo editing skills and allow them to use it to create projects for other subjects.

How To Use Photoshop.com

This video will explain the basics of how to use Photoshop.com's picture editing tools. It might be a good video to download using Real Player's download feature so your students can refer to it while they use it in your classrooms.




Q&A About Adobe's Photoshop.com

This Q&A section is from Adobe.com. It might help you with some of the requirements needed to run this program from your classroom computers. The other exciting news about this program is that it is available for the iPhone and other mobile phones for free. The second Q&A section will tell you more about this feature. If you do try this program or any other online photo editing web app I would love to hear your experiences with them in the classroom.

"Q: What is Photoshop.com?
A:
Photoshop.com is the complete solution for managing, editing, storing, and sharing your photos online, with tutorials, inspiration, and more. Photoshop.com is available from any web-enabled computer, compatible mobile phones, and directly from within Adobe® Photoshop® Elements 7 or Adobe Premiere® Elements 7 software. With Photoshop.com, you can organize, tweak, create, e-mail, display, and store your photos.

Q: Is there a mobile app for Photoshop.com?
A: Yes. Photoshop.com Mobile lets you view and upload photos from your compatible mobile phone to Photoshop.com. You can download the software from Photoshop.com—see Photoshop.com Community Questions—Mobile for more information.

Q:What phones does Photoshop.com Mobile support?
A: Photoshop.com Mobile directly supports a number of Windows Mobile phones from HTC, Samsung, Motorola, and Palm, including a few touch phones. See http://mobile.photoshop.com for the latest list of supported devices. Adobe partnered with ShoZu to offer users of the iPhone, BlackBerry, and other phones the ability to upload and store photos. With ShoZu, you can also take advantage of the photo editing, management, and sharing capabilities on Photoshop.com. For more information, visit www.shozu.com.

Q: What are the system requirements?
A: To use Photoshop.com, you need the following:

  • internet-connected computer with Windows XP or Vista, or Mac OS 10.4 or later
  • a minimum screen resolution of 1024 x 768; 512 MB of RAM
  • Internet Explorer 6, 7, or 8 (Windows), Safari 3.0.4 or later (Mac OS), or Firefox 2 or later (either platform)
  • Flash Player 10 (version 10.0.22 or later)
  • The new landing page could run slowly if you have an older Mac G4 system. After creating your own login credentials and selecting Remember Me, you can skip the landing page on future visits to Photoshop.com.

Q: What type of security measures are in place for Photoshop.com?
A: Adobe uses industry-leading security engineering practices and processes in building its products. With Photoshop.com, security is considered at every level, from the applications to networks to physical facilities. In addition to the latest technologies, world-class security requires ongoing adherence to best-practices policies. When you access Photoshop.com, Secure Sockets Layer (SSL) technology is used for server authentication, helping to protect your data and access. Additionally, Photoshop.com leverages firewall protection, intrusion detection systems, SSL encryption, and proprietary protocols to help protect your important information. Multiple layers of physical security protect the Photoshop.com hosting facilities—only authorized personnel have access to the facilities and servers.

Q: Does Photoshop.com work with video files as well as photos?
A: You can upload video files from the Photoshop Elements 7 or Adobe Premiere Elements 7 organizer to Photoshop.com. You can also download video files anywhere using a web browser, and view them on any video player that handles the file type. In the online organizer on Photoshop.com, video files are designated with a filmstrip icon. Video editing is not one of the features of Photoshop.com. However, Adobe anticipates that it will be one of the features requested by customers for future additions. Stay tuned!

Q: What rights do I have to my photos?
A: Refer to the Terms Of Use link for the specific legal terms and conditions for using Photoshop.com. You'll find it at the lower-right corner of the Photoshop.com window, along with a link to the Privacy Policy for the service."


Enjoy!
Alex


Friday, September 25, 2009

CSS Code Lesson 1 - Changing Your Blog Background Color

Changing the background color or picture in your blog account is actually a simple fix in your CSS code. It is important to note that you can edit the color of you blog or WCMS (web content management system) without going into the manual CSS Code of your site. However, the purpose of this post is not only to learn how to change the background color of you blog but to also to learn how to change CSS code on your blog. Doing this lesson will help you learn the basics of CSS and then you can try some more advanced CSS coding like how to change the width of your blog, create a custom banner, and change images. So take a deep breath you are about to learn the basics of CSS or Cascading Style Sheets.

What is CSS?

CSS dictates the color scheme, navigation and overall look and feel of your blog. If you are a beginner to CSS you might want to review this previous post: What are CSS style sheets? This way you get a better understanding of what you are about to learn.

Understanding Color and Web Pages

Before I get started on CSS code it is important to learn a little about how color works on the computer and webpages. Color on webpages can be specified by any of the following formats. Each of these can tell your webpage what color to display when your page is viewed.
  • name - a color name, like "red"
  • RGB - an RGB value, like "rgb(255,0,0)"
  • HEX - a HEX value, like "#ff0000"
  • Colors are displayed combining RED, GREEN, and BLUE light.
Now that you understand how color works on your computer you should also take a look at a HEX color chart so you can pick the new color's you want to use on your blog.

Before You Get Started!

Before you start changing the CSS code of your blog, I strongly suggest you save or copy your original CSS code into a text editor. This way if you make a mistake you can always restore the original CSS code of your blog by copying it back into your site's editor. I like to use NotePad for Windows or TextEdit on my Macintosh to back up CSS code from my blog. Both programs allow you to simply copy and paste the code from the editor to your blog.

Steps To Changing Your CSS Background Color

The following are the steps you need to change the background color of your blog.

1. Find the HTML editor in your blog
  • Blogger you can locate it in the Layout Tab> Edit HTML
  • Word Press you will need to go to Appearance> Edit CSS. You should also be aware that some Word Press blogs' templates do not allow you to change the CSS code unless you purchase that feature.
2. Next locate the area you want to change your background color on. It could be a header, side bar, main background etc.
  • The easiest way to navigate through your code to find the area you are looking for is to use Edit>Find in your browser.
  • I like to use the shortcut CTRL F to find and then CTRL G to continue to find the next instance of background
  • You will have to experiment with your CSS code to learn what the creator of your blog has called each of your areas common names are: sidebar, main, footer, body. Each of these indicates where the CSS code is being applied to.
3. Once you find the word background and the area you want to change the color on you type the color you wish it to display. For example: body {background-color: black}. You will change the word black to the word red or use the HEX color number you want displayed.

More CSS Color Examples!

Below are some more examples and explanations of what you might find. Understanding these will help you locate the area you want to change and teach you the basics of CSS. Remember you have made a backup of your CSS code so if you make a mistake you can just copy and paste the code back into your site. This means you can play and learn without having to worry.
  • body {background-color: black}
    - This CSS code tells the blog that the Body (the main area of your page where you post your information) is black.

  • footer {background: #f3f3f3;}
    - this CSS code tells the blog to post the color #f3f3f3 to the footer area.
    - the ; semicolon indicates that this line of code in my CSS is completed
    - { } the curly brackets open & close the properties.
    - You can have multiple lines of code for the footer or other areas of your blog they will be seperated by the ;
    - You will know you are at the end of the footer code when you see a "}"

  • sidebar { background-color: #f3f3f3; background-image:url('paper.gif'); }
    - This CSS code tells the blog to post the background color #f3f3f3 into the sidebar (this number is a color in HEX)
    - The sidebar in this example also has a graphic in the background called 'paper.gif'

More Color Please!

The interesting thing about the background color code for CSS is that you can add color to just about everything. Here are some more examples.
  • h1 {background-color:#6495ed}
    - This adds color to anything that has the h1 tag on it.
    - h1 stand for header and it is the biggest header you can add. h3 is smaller and h5 is even smaller.

  • p {background-color:#e0ffff}
    -This adds color to just a paragraph (p).

  • div {background-color:#b0c4de}
    -This adds color to an area (div) or a section on your web page.
CSS For Background Pictures

Above I talked about making changes to the color of your background but you can also change or add pictures using the CSS background tag. These are some examples of the code you would use to change pictures in CSS.
  • background-image: Sets the background image for an element
    Example:
    body { background-image:url('paper.gif'); }
  • background- attachment: Sets whether a background image is fixed or scrolls with the rest of the page
    Example
    (note all this is the code for the body tag):
    body{ background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed; }

  • background-position: Sets the starting position of a background image
    Example (note all this is the code for the body tag):

    body{background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:center; }

  • background-repeat: Sets how a background image will be repeated
    Example:

    body {background-image:url('paper.gif');
    background-repeat:repeat-y;}

Did It Work?

I hope you have fun trying to change some of your background colors or images on your blog. Email me if you have any problems or questions. It can be a little overwhelming when you first start CSS but if you stick to it the code will start to make sense.

Classroom Connection

If you are teaching this to students these examples might be a great way to introduce CSS to them. You could also use blogs to help students understand how learning CSS might help them in the future with WCMS.

Enjoy!
Alex


Thursday, September 24, 2009

What Are CSS Style Sheets?

What is CSS?

Cascading Style Sheets (CSS) is a style sheet language used to describe the the look and formatting of a document written on a web page.

Blogs And CSS

CSS is especially handy to know when you want to edit or personalize the template of your blog or WCMS web page. You will notice that my blog has a custom feel to it and the CSS code I have used to do this is not very complicated and luckily a lot of the CSS code is pretty easy to figure out. Most of the CSS code in a blog is named so you can understand what you are looking at.

Getting Started

I recommend that you start with learning what each part of the components and/or syntax used in CSS are. I have included them below for you to review. Once you have reviewed these I recommend you continue learning CSS by learning how to edit background color and background images on your blog or WCMS CSS code. This post from my blog will allow you to learn the basics of how to change color and background images in your blogs CSS code. I will be posting in the next few days how to edit your banner, size of your blog template, and create a menu area on your blog. So stay tuned for more!

CSS Syntax

The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
  • The Selector
    The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value.
  • The Property & Value
    The property and value are separated by a colon, and surrounded by curly braces.
  • For Example
    The following CSS code changes the color of the body of your page.
    body {color: black}Body is the selector, color is the property and black is the value or in this case the color you will see.

CSS Is A Bit Technical

CSS can be a bit technical but for those of you who are blogging away and creating some amazing blogs on WordPress or Blogger, this might something you might want to experiment with. Once you get the hang of it the code will start to make sense to you.

I love questions!

Be sure to ask away if you run into any problems when editing your CSS code on your blogs or web pages. Plus you can always tweet or email me any questions.

Saturday, September 12, 2009

A Day Of Discovery & Digital Learning


I just attended a wonderful workshop given by Discovery Education and GPB Education at Georgia Public Broadcasting. I thought I would share some video that I captured with my phone and laptop webcam of our day.

It was a fun and very educational day! Plus, the best part of the day was when my colleague, a new teacher, told me that she had been going about her lesson plans all wrong. She was going home to change them and to include digital tools as part of her lessons from now on. HA! I love when I see that light bulb turn on.


video

Hungry? Then Get Fed With An RSS feed

What is an RSS Feed?

I hope you weren't really hungry because an RSS feed is not something you eat it is an aggregator. Wikipedia explains that an "aggregator...reduce(s) the time and effort needed to regularly check websites for updates, creating a unique information space or "personal newspaper." Once subscribed to a feed, an aggregator is able to check for new content at user-determined intervals and retrieve the update. The content is sometimes described as being "pulled" to the subscriber, as opposed to "pushed" with email or IM. Unlike recipients of some "pushed" information, the aggregator user can easily unsubscribe from a feed."

Examples of Aggregators

An example of an aggregator is the RSS feed on my page. If you subscribe you will need a program that will let you read the feeds. That means it will send you my newest posts directly into your aggregator or reader. When I post something the program will post a link to the new post I have added on my blog on your reader page.

Anyone Know How They Feed the Readers?

To read RSS feeds you need a RSS reader or aggregator. Below I will explain two different kinds of Readers you can use to start receiving feeds.

Using An Online RSS Reader

I use Google's RSS reader on my igoogle.com account. This is a free service to Gmail account users. You can get a Gmail account for free at mail.google.com. If you have already signed up for Gmail all you have to do is go to your igoogle.com page and click on Add Stuff. It will then prompt you to add a gadget. Do a search for the gadget called Google Reader. Be sure it is the one made by Google. I really like this kind of reader since you can use it online and that meants I can see my feeds from any computer I log onto.

Can I install an RSS Reader On My Computer?

Yes, you just need to find a one that you enjoy using. There are many aggregate readers out there an you can do a search on Google for them. I recommend starting out with one of these two free ones: RSSOwl for Windows and NewsWire for MAC.

Using aggregate feeds is a great way to keep up with news and all sorts of information that is posted online, like my blog. Instead of you going out and looking for the information, the information comes to you. I highly recommend using one if you aren't already doing so.

Sunday, August 30, 2009

Animoto - You Can Now Add Video Clips!

As you know my presentation on digital tools and multimedia in late July at the 2009 GACTE included the dynamic and professional online slideshow maker Animoto. Last week, the Animoto site announced that you can now add video clips to your Animoto videos! Watch a some sample videos on the Animoto site to see what your projects can look like.

According to their email announcement, it stated that, "You will not believe how good your vids are going to look. And using video clips in your Animoto videos couldn't be easier--no need for a complex video editor!"

Follow these three steps to add the video to your project:
  1. Upload clips from your camera or phone, or use some from our collection.
  2. Choose your highlights. You can choose highlights of up to 10 seconds each, though we recommend using only 3-5 seconds as that works best within the flow of an Animoto video.
  3. Create the rest of your video as normal, and you're done.
Enjoy!
Alex

Saturday, July 25, 2009

Fantastic Digital Tools to Enhance Classroom Multimedia Projects

Thank you for attending my Fantastic Digital Tools to Enhance Classroom Multimedia Projects session at the 2009 GACTE Conference. It was great meeting everyone at the conference and I enjoyed showcasing some of the resources, tools and applications that I utilize in my classroom. I would love to hear your comments, questions or concerns about multimedia projects through this blog. If you have any student work or portfolio samples that you would like to share, please feel free to share them on this blog.

The following is the content, along with links, from my presentation.

Our Students, The Digital Natives

Here are some interesting facts about the current generation that we teach. They are commonly referred to as the YouTube Generation, the Millennials and the ME generation
  • The largest generation in American History
  • Born between 1978 and 2000
  • The ME generation is 95 million strong, compared to the 78 million Baby Boomers
Multimedia in The Curriculum

The teaching of multimedia skills and concepts can be found in the following CTAE Georgia Performance Standards:
  • BCA2-6. Students will utilize appropriate methods to collaborate, publish, and interact with peers, teachers, experts, and other audiences.
  • BCS-BCP-11. Students will use multimedia software to effectively produce a variety of personal and business media-rich projects.
  • BCS-BCP-9. Students will understand the laws and licenses involved in multimedia production.
  • BCS-CA2-8. Students will develop strategies for solving problems.
  • BCS-BCP-4. Students will locate, assess, and use information from a variety of print and online sources.
Multimedia for Media-Rich Projects

According to the GPS, what do we try and have our students create?
  • Usually a lot of PowerPoint slideshows
  • Transitions
  • Animations
  • We also try to do projects involving audio, podcasting and videos
  • Essentially, all of this multimedia can be considered to be digital storytelling
Bloom's Taxonomy
  • As teachers we tend to teach in the “remembering” & “understanding” category 80% to 90% of the time.
  • This is not bad, but focusing on the levels of remembering and understanding all of the time can be.
  • Students engaged in digital storytelling projects are performing at the highest levels of Bloom's Taxonomy. Students are "creating" and "evaluating"!
  • So based on the research, multimedia projects can have students utilizing higher-order thinking skills.
Here are the Fantastic Digital Tools (with links) that I use in my classroom with my students:

PhotoStory - Bring your digital photos to life with this free multimedia tool from Microsoft.

Movie Maker - Another free application from Microsoft. Build awesome classroom videos with this video-editing program.

Animoto - Sign-up as an educator and get your FREE Animoto all-access pass for use in the classroom. Produce unlimited full length videos from photos.

Prezi - Sign-up for a FREE Prezi public account and get your students zooming sketches on a digital napkin. It's visualization and storytelling without slides.

Xtranormal - An excellent Text-to-Movie web-based service. You can make 3D movies with your students for free!

Enjoy!
Alex
There was an error in this gadget