Instructional Website

For my Instructional Website project, I created a website explaining the use of Google Docs and spreadsheets.  I began by defining Google Docs, comparing differences between Google Sheets and Microsoft Excel, and also provided a general overview of Google Docs versus Microsoft Office.  Beyond examining these subjects, my objective was to create a website that would provide detailed instructions on how to create a new Google Docs spreadsheet, and how to use functions and insert graphs in Sheets.  I wanted to make a visually appealing website, free from frustrating contrast issues between background and text.  I also wanted to ensure my website was intuitive and easy to navigate.  Here is a screen capture showing my homepage:

Because of the website experience I have gained from career, along with the training videos I watched on Lynda.com and the previous Dreamweaver assignments in this course, I really didn't encounter any obstacles during this assignment.  Although I felt prepared, it was still a lot of work.  I estimate that I spent approximately 4 hours working on this site.  The only two issues I experienced were:

1. My Website Background - I wanted to add a visually appealing background, without it being too distracting.  After a quick Google search, I found a website offering free backgrounds for download.  I download a background and inserted into my CSS code to change it from the plain, solid color background.  It worked fine previewing it in Dreamweaver, but once I uploaded it to my U of A web server the background stopped working and reverted to the solid color.   I had to edit the HTML on each of my web pages and remove the default color setting that was entered from the Dreamweaver template.  Once I deleted the HTML code, the CSS code took over and placed my background image on each page.
2. Uploading my Website - I was grateful for my general understand of FTP and public_html folders because of the issue I ran into after uploading my website to the U of A server.  I had selected all of the files for my website, and transferred them to my U of A server using a FTP client on my Mac laptop.  I opened a browser and navigated to my site, but some of my pages were showing a 505 error message.  After clicking around for a bit to see the extent of the issues with my page, I went back to my FTP client to look at the files on the server.  I realized that a few of the pages didn't upload into the public_html folder for some reason.  Some had been saved to the root directory folder, while others were placed into the public_html folder properly.  I moved the orphaned files from root into public_html and everything started working properly.  

The main thing I learned during this project was a much deeper understanding of Dreamweaver.  As I mentioned earlier, I've had experience with HTML coding in my career as well as previous college courses when I was working on my B.S. degree in Information Systems.  However, I had never really used Dreamweaver because I had either worked directly with HTML code, or on websites that were already created and used normal text editors to modify those.  I'm glad to have a good understanding of Dreamweaver as well as more knowledge of external CSS.  A lot of the training videos on Dreamweaver that I had watched on Lynda.com really paid off during these projects.  I don't know of any additional Dreamweaver features that I would like to learn that were not covered during these projects.  It is an extremely powerful software tool, so I'm sure there are many features that I don't even realize yet.  But for now, I feel like I learned everything I needed to learn to accomplish my goals.  

Photoshop Montage

I began this project by downloading the provided files from 3D GameLab, and opening them in Photoshop.  The first step was to combine all of the pictures into the same document, because they were  all initially opened in separate projects.  I did this by creating a new document using a 800x600 image size specific for use on the web.  Once my main document was created I used the Move tool to drag each provided sample photo into my new document, and releasing the mouse.  

Now I had one single Photoshop document with the four individual pictures, but I also noticed I had five different layers indistinctly name layer 1, 2, 3, 4 and 5.  I knew this was going to be confusing so I renamed each layer to something I could easily recognize: Background, Hills, Aspen, Stream, and Fence.  When I created my document I used a transparent background, but I knew I wanted to change it by adding some color.  I clicked to select my background layer, then clicked on the Paint Bucket tool to color the entire layer white.  The solid white color seemed a bit too plain, so I added a Pattern Overlay layer Style to the Background layer to give it some character.  I didn't find a pattern I cared for, so I clicked on the small button inside the Pattern Picker box to append more pattern options to the dialogue box.  I finally decided on Canvas for the pattern type.

The photos layered over my background layer looked quite boring because there was no depth to the photos.  I used the Move tool to move my Aspen picture into place, opened the layer style dialogue box and added a drop shadow to give the photo a 3D look over the canvas background.  I liked the effect, so I used Shift + Alt to copy the effect to the remaining three pictures.  Note that I sometimes use a Mac laptop with a Windows keyboard, so some of my key combinations may sound unusual.  My next step was to move all of the photos into proper position over my background layer.  I clicked on the layer I wanted to move, clicked on the Move tool icon, and moved each photo into place.  After my initial move I wasn't pleased with the results because each corner of the photo as on the same layer as the other.  Meaning, one entire photo was either completely underneath or completely over the other photo.  I wanted each photo corner to overlap different, much like you can image folding a cardboard box would look.  So, I drug each photo into different positions in the layers field until I found my desired look.

I added my name to the project by selecting the Horizontal Type tool, clicking inside the document, and typing.  I changed the font size to 36 and type to Verdana because I wanted to use a screen font to make it easily readable.  Like the picture issue I mentioned above, the text lacked depth and looked very plain.  I double-clicked on the font layer which opened the Layer Style box and added a drop shadow with a normal blend mode to help the text stand out more.  It seemed like the default settings for the drop shadow made the text too blurry, so I changed the shadow to a distance of 2px, spread of 0px, and size of 5px.  This darkened the shadow by reducing the distance of the shadow from the text while also decreasing the spread of the shadow.

With the background, layout, and text set I went back and focused on retouching the pictures themselves.  To help concentrate on a single picture, I turned off the visibility by clicking on the eye icon beside each layer except for the Aspen photo.  The photo was small so I used "Command +" on my keyboard to zoom in on the document.  I opened the Hue/Saturation settings by clicking on Image, Adjustments, Hue/Saturation and increased the hue to +5 to darken the green elements in the photo.  I also decreased the lightness to -7 to create more contrast between the light and dark areas of the photo.  Next, I turned the visibility of the Aspen layer off and turned on my Fence layer.  For this layer I wanted to increase the intensity of the green grass and the blue sky.  So I clicked on Image, Adjustments, Color Balance.  For the midtones color balance I slid the green color level to +50, which added more color to the grass for better tone.  I wanted to darken the clouds and tried using the Dodge tool, but I didn't like the results.  I chose the Magic Wand tool and clicked on an area of the sky to select the clouds.  Then I held Control and clicked, and selected "Similar" from the pop-up menu to select the rest of the clouds.  I did this because I didn't want my color adjustments to affect any other colors in the picture.  Once everything was selected that I wanted to adjust, I opened the Levels box and slid the midtones adjustment bar to the right (toward black) to darken the clouds.  I decided to save my selection in case I decided to adjust the clouds later.  I did this by clicking on Selection, Save Selection and naming it "clouds".  Then I pressed "Command + D" to deselect the selection.  The Hills photo was very whitewashed.  My first adjustment was darkening the clouds and adding more definition by using Dodge tool.  The picture also seemed to be out of focus so I used the Sharpen tool (Filter > Sharpen > Sharpen) which added more detail to the silhouette of the trees.  I actually liked the results so much that I added the Sharpen filter to all of the photos. To make the hills have a better feel I added a Vibrance adjustment and set the level to +64.  I also increased the Saturation level to +10.  For my last photo, the Stream picture, I added an Exposure adjustment and reduced the offset which removed some whitewash and increased the saturation of the trees.  To give the water more character I added a Hue/Saturation adjustment and used the eyedropper tool to set the color adjustment to match the water.  I changed the hue level to +3 which darkened the water tone.

Photoshop

Before and After Project

Before

After

Pike's Peak is one of my favorite places in Colorado.  A couple of years ago, we had someone take our picture at the sign on the summit.  At that altitude, the sun is harsh and it can be a little difficult to take a good picture.  Looking at the original picture above, you can see a few different issues.  First, there is a dark cast over the entire picture which reduces the features of the rocks and of the coloring on the sign.  The were also dark shadows on my face because the sun was behind my shoulder.  Lastly, the framing of the shot by the person taking the picture was a little boring.  

My first goal was to brighten the overall image by removing the dark cast.  I began by adding a Levels adjustment and moving the mid tone slider towards the right, from 1.0 to .94.  This was a small adjustment, but it gave the picture better contrast between the color ranges.  Next, I added a Brightness/Contrast adjustment. I moved the Brightness slider from 0 to +78.  This was a big adjustment, but it brightened the overall image substantially and did a lot to remove the cast.  However, when I increased this setting I had to adjust the Contrast level from 0 to -5 to compensate for the increased brightness.  At this point the picture looked much  brighter, but it seemed to have a whitewash look to it.  So, I added a Vibrance adjustment and moved the vibrance setting from 0 to +10 and the saturation from 0 to +9.  This gave the picture more warmth and a better feel, while revealing a lot more detail.  

Overall, I liked the looks of the clouds in the background.  But, they seemed to be lacking a certain amount of character because some of the highlights were too bright to show much definition in the clouds.  I selected the Burn tool and went over the clouds to make them darker.  Doing this brought out more definition and improved the appearance of the clouds by creating more contrast between them.  It helped make the clouds look more like individual clouds rather than one big cloud. While I was working on the clouds, I noticed the framing of the picture and how there was quite a bit more space on the left side of the sign compared to the right side.  I'm aware of the Rule of Thirds, but I didn't feel this picture looked right by not being centered.  I used the Crop tool to take out the extra space and even out the distance between the edge of the picture to the rock sign on both sides of the picture. It seemed to give the picture better balance by centering the focal point to the middle of the picture rather than to one side. 

If you look closely at the rocks in the before image, you'll notice much less detail than what they show in the after photo.  One reason for this is because the cast was hiding some of the detail.  But, I also use the Sharpen tool by dragging it over the rocks as well as our faces.  This gave the illusion of the picture having better focus than it actually had when the picture was taken.  Zooming in much closer and using the bracket keys to enlarge and shrink the tool selections saved a lot of time and made the adjustments much easier.  I was glad I learned those tips in the reading materials. One of the most satisfying accomplishments of this project for me was removing much of the shadow that was hiding my face.  To do this, I selected the Dodge tool, adjusted the size of the brush, and drug it over my face, especially concentrating underneath my eyes.  While this wasn't a perfect fix, I was very surprised to see how much shadow it did remove.  It greatly enhance the overall quality of the picture.

Another big difference between the pictures is the coloring in the sign.  The colors in the original image are dull.  I liked the contrasting colors and wanted to make them pop more.  So, I used the Dodge tool to go over the sign to make it brighter.  I also used the Sharpen tool to make the text a little more crisp.  

After finishing the color editing, I wanted to add the Polaroid effect I discovered on http://www.picturesocial.com/video/how-to-convert-a-digital-photo.  Unfortunately, when I tried following his tutorial I couldn't do the exact steps he showed because my images behaved differently.  For example, I imported the Polaroid image onto my picture and used the Magic Wand tool to select the center area of the image where I wanted to expose the picture underneath.  But, when I tried to delete the selection it wouldn't do anything.  I re-watched the video and noticed he went to Edit > Paste Into to reveal the underlying photo into the selected area.  When I tried this method, it would only paste whatever was copied on my clipboard into the image.  I still don't really know how I finally got the images to reveal because I worked on it for quite some time.  Once, after selecting the center area with the Magic Wand too, I clicked on the Move tool and began dragging the section to another locating.  I could see the picture so I pressed the Delete key and it went away.  I tried that again on the second Polaroid effect but it didn't work.  So on the second picture I think I used the background eraser tool to reveal the photo through the Polaroid template. 

Following the Polaroid confusion, changing the background color seemed fairly easy.  First I tried creating a new layer and using the Fill tool to add color to the entire layer.  But that didn't work at all.  Next I tried going into the Layer Style properties box and adding a color overlay to the layer, but that didn't work either.  Finally, I used the Magic Wand tool to select the background area I wanted to hide and then used the Paint Brush tool to paint the selected area black.  In comparison to the original photo, I think this helped focus attention on us and the sign instead of on the clouds and background in general.  

This was a challenging, but rewarding project.  As I mentioned earlier, I faced several situations where I really didn't know how to solve a problem, but I was able to find answers to these problems by utilizing Google searches and re-reading the reference material supplied on 3D GameLab.  I have used Photoshop for years, but mainly for specific reasons that haven't pushed my skill level.  I was glad to learn more about the Dodge, Burn, and Background Eraser tools because those helped me a lot during this project.  Having the ability to use the Dodge tool to brighten specific, and the Burn tool to darken areas, areas are great assets.  One of the biggest takeaways from this project for me though are the keyboard shortcuts.  I found the brackets to enlarge/shrink the brush sizes extremely helpful.  Generally, my uses for Photoshop are to slightly enhance photos for our district website, or to create graphics for banner ads on our website.  The skills I've learned will help me do these tasks quicker and easier.

Podcasting

Click the play button above to begin the podcast.

I used Audacity to create my MP3 file for the podcasting project.  I have a Mac laptop, so I installed the Mac version of Audacity to do the recording, and the LAME encoder to export my recording as an MP3 file.  I had used my Mac to record my voice in the past, and knew it did a decent job of recording audio with the built-in mic.  So, I found a quiet place, launched Audacity, and began recording.  That makes it sound like a simple project, but in reality it was a rather lengthy process.

My first issue was that I had to restart my recording multiple times.  During my reading, I remembered an article discussing the pros and cons of following an outline, versus recording it on the fly.  Using an outline can make a podcast sound too scripted, but recording on the fly brings in more mistakes and awkward pauses.  On my first few attempts, I tried to record on the fly.  All I can say is that I have a greater respect for radio DJs than I had before.   I found it too difficult to monitor pronunciations of words and think about what I was going to say.  Following an outline didn't help much either, so I resorted to writing a script.  The script worked much better for me, but even with this I found myself making pronunciation mistakes and losing my train of thought.  After seven or eight attempts I was able to complete the recording with what I felt were acceptable mistakes.

With the recording complete, the next issue to tackle was editing the recording.  One side-effect I don't like when using the built-in mic on my laptop is the sounds that it picks up from my keyboard.  When I had to click my mouse button to start or stop recording, it was recorded by Audacity and was very annoying.  I also wanted to add into, ending, and continuous music to my recording.  So, I had to use editing tools to trim clip lengths and lower the volume on the music tracks so it didn't interfere with my podcast audio.  I have had a lot of experience with Final Cut Pro video editing software in years past.  Maybe this is somewhat of a handicap, because I often find free software unnecessarily confusing.  For example, while editing my podcast I inserted a background music audio file.  I needed to highlight the file and drag it into a different position on the track, but I couldn't figure out how to select and move it.  I finally gave up figuring it out on my own and resorted to a Google search.  It said to highlight the file and click on the Time Shift Tool icon.  This icon is a rather nondescript line with arrows on either end.  To me, this makes no sense at all, but I do admit that these things would become insignificant after using the program on a few projects.

The last hurdle in completing this project was the most difficult for me.  I had issues uploading my podcast to the U of A Comp server.  Technically, uploading the file to the server wasn't a big issue.  Locating the correct URL for the file and trying to get correct permissions on the "audio" folder I created was painful.  I have used FTP clients for years, so I understood the concepts of transferring a file.  However, I never could get the rights correct on the audio folder to access the files.  On the 3D GameLab site, the instructions mentioned modifying the rights like we did in the Dreamweaver project. The problem was that I hadn't completed the Dreamweaver project before doing this assignment.  First I tried using my Mac FTP client, Cyberduck, to modify the folder permissions.  But every time I changed them it would default back to the original settings on the folder.  Next, I did some Google searches because I assumed other students would have had similar problems in the past.  I found an article describing how to change the rights using this website: https://webdocs.uark.edu.  I logged into the site, click on my "audio" folder and selected the option entitled "Change Permissions" just as the page instructed.  I entered the same permissions as my "public_html" folder had, but when I would click the "Save" button, a blank white screen would appear.  I tried three different web browsers with the same result.  Finally, I conceded and put everything inside the root of the public_html folder and it worked perfectly.

What I've learned during this project is that while creating an audio file isn't necessarily that difficult, it is still much too technical for the average K-12 teacher to use.  I don't mean to say that our teachers couldn't figure out how to use it from a technical perspective, but rather from a time perspective.  Because of the technical nature of everything involved, it is too time consuming to be used in most K-12 classrooms.  Teachers don't want spend time working out technical issues; they want to focus on instruction.  For my personal purposes, I will likely use Audacity to create audio files for our intercom and bell system.  I am more likely to use Apple's Garageband to record a podcast.  The types of podcasts I will create will be informative in nature, describing technical procedures or discussing upcoming technology projects.

Accessible Word Documents

For my Word Accessibility Project, I created a tutorial that shows users how to install the Chrome web browser onto a Windows 7 computer.  The reason I chose this as my project is because it was relevant to my workplace.  Our school district uses Google Apps for Education, and the Google Chrome web browser is the best browser we have found when using Google Apps.  Recently, for example, we have noticed issues when our computers updated to Internet Explorer version 10.  After the upgrade, they would receive a blank white screen after logging into email.  After troubleshooting, we found that using Google Chrome resolved the issues.

One obstacle I encountered during this project was how to add an alt text to images.  I took some screen captures of the install process to show users how to install Chrome.  I was using Microsoft Word 2007 and couldn't see where to actually enter the alt text.  Another issue I faced was with a long URL.  I needed to insert a hyperlink into the tutorial, but the URL was rather long.  I wanted to make it more easily readable so I had to figure out a way to shorten the URL.  My last issue was adding labels to images for my references page.

I resolved the alt text issue by researching how to add alt text with Word 2007. What I found was that you first need to click on the image that was inserted, then click on the format tab.  Next I had to click on the expand icon inside the Size group to open the alt text field.  Later on I discovered a much quicker way of accessing the alt text field.  I found that I could simply right-click on the image, then click on FormatAutoShape. Using this method saved me a lot of time. To shorten the URL, I used Google's URL shortener, www.goo.gl.  This site allows you to paste a long URL into the text field and it will shorten it to a more memorable length.  In my tutorial, I was able to shorten https://support.google.com/chrome/answer/95346?hl=en, to http://goo.gl/eizwe.  The last obstacle, adding labels to images, was solved by researching how to add labels in Word 2007.  I learned to right-click on an image, choose Insert Caption, click the New Label button and create the label.

During this course, my eyes were opened (no pun intended) to the fact that I had never heard any of my colleagues talk about creating accessible documents.  I admit, I hadn't given it any though myself.  Thinking more about it, I realized that we have at least one staff member with a sight disability in our district.  What I learned is that we need to be more conscientious of those around us with disabilities such as color blindness or poor vision.  One reason this is important is to provide fairness for everyone.  By creating documents that fall outside the guidelines of being accessible, we neglect others with needs.  It is unfair to make their jobs more difficult when a document can easily be created in a more accessible manner. One of the most incredible things I learned during this process was to create headers with separate colors.  In the past, I had always used the same font type, the same color, and made it bold with a larger font size. 

In the future, I will be creating several accessible documents.  Working in the IT field, we often find the need to create tutorials for staff members.  One upcoming project is to training a group of middle school teachers on the use of Google Chromebooks.  I plan on creating tutorial documents showing them basic features like volume controls, screen brightness adjustment, and ports such as card readers and headphone jacks.  These tutorials will require skills covered in this course, such as screen captures, tables, and references.  I will be mindful of the need for accessible documents in the future.  

PowerPoint Reflection

In my PowerPoint Instructional Project, I created a presentation to show students and staff how to create and share a document in Google Apps.  The reason I chose this as my topic is because our school district uses Google Apps for Education.  Google Apps is a suite of products that provides cloud-based email, calendar, websites, as well as office applications such as a word processor, spreadsheet, and presentation software.  The main advantages to Google Apps is that it is accessible from anywhere, as long as you have an internet connection, and for the collaboration opportunities it allows by utilizing the built-in sharing options. 

Because I was creating a PowerPoint presentation to be used as a training document, I felt like I needed to do more than provide written instructions. This need, however, created some obstacles to overcome such as how to insert graphics into the presentation, as well as how to take screen captures of those graphics.  Other obstacles I encountered included creating hyperlinks to external websites as well as links to slides within the document.  

These issues were overcome by first learning how to create a screen capture on my Mac laptop.  I learned that by pressing "shift+command+4", I could select a section of my screen and save that as an image file.  Next, I learned to insert the saved image into my presentation by going to "Insert", "Picture" within PowerPoint.  Most of the images I inserted were too large by default, so I learned how to resize the images by dragging the sizing handles around the images.  One of the most interesting things I discovered was how to insert links into my presentation that referenced other slides.  I did this by selecting a word, and then going to "Insert", "Hyperlink", and then "Place in this Document".  This allowed me to select an existing slide so that when someone clicked on the word, it opened the linked slide. By learning these skills, I was able to create a more informative presentation that provided a visual reference to what I was referring to, rather than only being able to read about it.

Optimizing instruction is important for several different reasons. The discussion of diminishing attention spans was especially enlightening.  I intend to implement the concept of front loading the more important topics into my next presentation. I have always leaned toward saving the most important for last, but I see why that is not effective because of diminishing attention spans.  Understanding that presentations loaded down with lots of bells and whistles do nothing to improve comprehension, but rather distract the audience, was also informative.  By creating simpler-looking presentations, not only do you save time by cutting down on how long it takes to you to create presentations, but it also improves the viewing experience for the audience.  Aside from these examples, other informative points worth mentioning are your consideration when choosing font size, type, color, and background color. 

Because of my occupation, I will mainly be using PowerPoint to create instructional documents. However, I do informative presentations from time to time as well.  In the future, I will be sure to use the lessons learned in this segment to create simpler, clearer, and more concise presentations.

Blogger Experience - Intro to Educational Technology ETEC 5213

I've never really been big on social media.  I suppose I am a private person by nature, which is why I've always done my best to stay away from media sites like Facebook, Twitter, and Blogger.  I did create a Blogger site to use as my family website around 2008.  I probably haven't made a post on it in nearly three years.

I have had a Twitter account since around 2008 as well.  I never posted too many things on it either.  I did recently figure out my Twitter password and actually got logged into the site.  I deleted all of my old posts and decided to try and make myself use it for professional purposes this time.  But I haven't posted anything on it so far in what has been over a month now.

After attending the ISTE Conference in San Antonio earlier this summer, I made a decision to use Google+.  Right or wrong, I feel like Google+ is step above Facebook in terms of being able to communicate with other professionals, without all of the drama that seems to be attached to Facebook.