Link: http://ebonphire.com/edet703/simmonswww/
This website, http://shelbyesimmons.me should automatically modify for mobile devices as well.

Shelby Simmons
EDET 703, Spring 2012
WWW Lesson Reflection
April 5, 2012

Link to Lesson: http://ebonphire.com/edet703/simmonswwwlesson/

My lesson is called “Helping Your Child: Prepare for Standardized Testing” and I chose to provide this lesson because it was the topic of a recent UPLIFT session and it is one of my professional goals to make each of the lessons I teach available online following the in-person session.

The online lesson more closely follows the lesson plan from the Practical Parent Education curriculum because when teaching you often adjust to meet the needs and interests of the audience/students. I must admit, when I initially reviewed and taught the lesson to parents in our district, I did not use all of the handouts; I focused on the profile of a discouraged student and group work, so reviewing the lesson highlighted additional activities I could use in the future. Additionally, I think several of the activities could be adapted to become interactive online activities in the future.

I had a little snafu in on the links, after designing the template for the site I created the pages only to discover that I wanted additional sections for the lesson. It was easy to create the additional sections, but I did have to figure out the best place to put the code for the horizontal lines in relation to the table codes.

Shelby  Simmons
EDET 703, Spring 2012
Graphic2 Reflection
March 15, 2012

Graphics2 Project: http://www.shelbyesimmons.me/graphic2.html

Describe what the scene means to you: Honestly, I think I may have totally misunderstood the intended concept for this project and had technical difficulties every step of the way. The animation I created is a dance scene in a dance studio and was created with a theme of “Self-image, it’s in your head!” I took dance classes as a high school student and really enjoyed them, but have held back from participating as an adult due to aesthetics – leotards are cuter on ages 3-16 and professional athletes – not me! This animation kind of makes fun of that self-limitation and transforms a really cute clipart girl into a stick figure, showing that cute, not-cute, and every other classification is in our head and the important thing is the dance! The key thing to remember is that this animation takes place in the imagination of the character.

Describe what you did to build the scene: The background and the head of the animated character come from online sources (backdropsbeautiful.com; sophiefitness.ca) and the background is unaltered in the final version. In alternate versions the background enlarged or spun to give a zoom or dizzy effect or had place settings for each character. The alternate versions are available on my website. The animated character is the head of a cartoon that I removed from the body using tools in Adobe Fireworks and created a stick body in place of the pre-existing body. I then animated the stick figure body to make it dance. In other versions of the project, I completely created stick figure animations. I thought it was required to do this all in one program, so I did not use Paint.net which I would have been much more comfortable with using.

After days of confusion and trial and error, I realized I needed to put each character in a different layer and think of each stage as a frame. I also realized I needed to click within the stage when transferring from one file to another, otherwise changes would be made within the previous file even if I had clicked on the appropriate stage. I also had difficulty working with the library and didn't realize until the last day that the rotation was measured in degrees, not number of rotations as in Flash. If the trial had not expired, I would probably have completed the assignment in Flash. I was unable to figure out how to use the animate settings to move the character across the scene while dancing, although I did go in by hand and alter each stage so the dancing figure floated out at the end.

Requirements: Two images were taken from the internet as indicated above; I created the bodies of the characters using the drawing tools in Fireworks. The scene, is blended in that each component represents my concept as well as catering to my lack of artistic ability. All of the elements are drawn, rather that coming from photographs.
Each character moves internally – the arms and legs move in a little dance, as well as spinning to change orientation, shrinking or enlarging to change size, and moving across the screen to change location. One character appears to change direction within the animation.

My calculation of elements includes: 2 images taken from the internet, 1 drawn body, 1 internal animation (actually 2 arms and 2 legs), 3 changes of location, 2 changes of orientation, 3 changes in size, 1 change in direction, 4 instances of animation/path, 4 instances of state manipulation animation (the characters hop while dancing in the first part of the scene and then the final section has a dancing character float off stage).

Shelby Simmons

EDET 703, Spring 2012

Flash 2 Reflection

February 23, 2012

Link to animation: http://www.shelbyesimmons.me/flash2.html

I used the Flash 2 assignment to create a greeting for visitors to the Parent Field Day section of the Title I Parent Involvement website. This greeting should appeal to parents and potential sponsors. I am trying to project a warm greeting with a sense of fun and excitement. I will post the finished product on the website sometime during the month of March; this project is my first draft.

I tried my best to use a process similar to the previous Flash assignment. I selected or created the images I wanted to use, the text I would create, the audio file, and a color scheme. I created a properly named folder to hold all of the files I planned to use before creating the Flash file. I selected a stage size based on the size and resolution of the other images I intended to use, as well as the space available on the website where I intend to use the animation. I think this piece shows significant improvement in my skills and the final version should be pretty awesome, given my general lack of creative ability.

From the first assignment, I knew that I wanted to use classic tweens to move at least some of the text, and that I wanted all of the text to move at the same time to partially recreate the logo for the Parent Involvement logo. I also wanted to keep the project about 10 seconds long so I set my ending keyframes at the 240 mark.

I tried to complete the parts of the project I was most familiar with first, which were the letters and the text. I watched each video several times and looked up additional videos on Youtube to complete the shape and motion tweens and the stop/replay button. I used the shape tween to enhance the logo-replication section of the animation. I also had to add a creative commons image in place of the district logo I originally intended to use, but I believe that the image added a human touch and sense of warmth to the piece.

Originally, I was going to have the last image be a recreation of a flyer for the last image on the piece. Unfortunately,  I ran out of time in the animation and the series of motion guides became too complex for me, so I deleted the frames for the last second, but accidentally deleted too much. Finally, I used one of the alternate files I had created along the way to complete the project on time.

Required Item:

Folder /Layer:

Frame #:

Description:

(1.1) Text

Folder PIP Text/Layers P-m

5

The letter P from “Parent Involvement Program” enters the stage

(1.2) Self-Generated Graphic

Layer PIF IMG

73

Image with the date, time, and location of Parent Field Day appears “riding” along a motion guided tween

(1.3) Creative Commons Graphic

Folder Field Day Text/Layer ready

110

Modified creative commons image from Microsoft Office downloads, cropped to fit with text added appears

(1.4) Additional Text or Graphic

Folder Field Day Text/Layer PFD Txt

95

Text “Parent Field Day” converted to graphic appears and then fades out

(1.5) Additional Text or Graphic

Folder Field Day Text/Layer games

129

Text “Games” appears in upper left of stage

(2) Motion Guide

Layer Guide: PIF IMG

73

Swirl shaped motion guide for self-generated image on related layer

(3) Sound

Folder SoundnButtons/Layer Sound

1

Self-created audio file of narration for greeting/animation

(4.1a) Motion Tween

Folder PIP Text/Layer PIF IMG

74

Motion tween moves related image in swirl pattern along motion guide

(4.1b) Shape Tween

Folder PIP Text/Layer Oval-PIP

14

Small black Square begins to change/deform into large blue oval that moves from the upper left of screen to the center of the screen

(4.2a) Change Size

Folder PIP Text/Layer Oval-PIP

14

Small black Square begins to change/deform into large blue oval that moves from the upper left of screen to the center of the screen

(4.2b) Change Location

Folder PIP Text/Layer Oval-PIP

14

Small black Square begins to change/deform into large blue oval that moves from the upper left of screen to the center of the screen

(4.2c) Change Shape

Folder PIP Text/Layer Oval-PIP

14

Small black Square begins to change/deform into large blue oval that moves from the upper left of screen to the center of the screen

(4.2d) Alpha

Folder Field Day Text/Layer PFD Txt

96

Text “Parent Field Day” converted to graphic appears and then fades out

(5.1) Button – Replay

Folder SoundnButtons/Layer Button

189

Button appears that will replay the movie

(5.2) Action: Stop Movie

Folder SoundnButtons/Layer Button

217

Action stops movie

_ Shelby Simmons

EDET 703, Spring 2012

Mistakes in WWW Design

February 1, 2012

Web design has changed over time. At one point in time, almost anything passed for inspired design and users had low, few, or no expectations of the medium. Today there are websites and pages designed for a wide variety of purposes and designed to suit specific objectives. Several online journals and self-styled gurus judge pages a present awards for web design. A review of several “mistakes in web design” lists generates the following top ten mistakes in web design:

1. Overly Long Download Times

A website typically has about 10 seconds as the maximum response time before users lose interest. Since “bandwidth is getting worse, not better, as the Internet adds users faster than the infrastructure can keep up” keeping file sizes, scripts, and multimedia features to a manageable size and length will promote usage of your site (Nielsen, 2006, pp. 10). The longer it takes to download the site, the smaller your audience. Why discourage people with dial-up, dsl, basic cable speeds, or older computers from using your site?

Example: http://www.serene-naturist.com/ this spa site takes between 5 and 20 seconds to load depending on your computer and connection. One major reason for the length of time is excess of images and scrolling features on the page. There is also music and no quick and easy way to turn the music off, other than closing your browser. There are many other mistakes on the homepage that will be highlighted later. WARNING, the site images include tasteful nudes, so please avoid if offended; all items discussed can be viewed without scrolling.

2. Scrolling Text, Marquees, and Constantly Running Animations

“Never include page elements that move incessantly. Moving images have an overpowering effect on the human peripheral vision. A web page should not emulate Times Square in New York City in its constant attack on the human senses: give your user some peace and quiet to actually read the text!” (Nielsen, 2006, pp. 3). These animations and moving images obscure the purpose and professionalism of any site. Unless there is a style and design reason to use these, such as constantly changing information including stock prices or game scores, they should be avoided.

Example: http://www.serene-naturist.com/ this spa site takes between 5 and 20 seconds to load depending on your computer and connection. One major reason for the length of time is excess of images and scrolling features on the page. Not only is there a scrolling message across the top of the home page, above the navigation, but there are also hovering butterflies and bubbles as well. WARNING, the site images include nudes, so please avoid if offended.

3. Orphan Pages

“Make sure that all pages include a clear indication of what web site they belong to since users may access pages directly without coming in through your home page. For the same reason, every page should have a link up to your home page as well as some indication of where they fit within the structure of your information space” (Nielsen, 2006, pp. 5). Even if the page will return users to the homepage, if there is no link to the page other than a direct link, the page can be considered an orphan.

Example: http://ccsdtitle1.org/title-i-blog.html this page is hidden from current navigation and you cannot reach it from the main website, which is http://ccsdtitle1.org. This is one of the websites I manage, this page will remain hidden until I update it to match the previous blog page: http://ccsdtitle1.weebly.com/title-i-blog.html

4. Long Scrolling Pages

“All critical content and navigation options should be on the top part of the page. Users will only scroll if they believe that there is something useful lower down the page” (Nielsen, 2006, pp. 6).

Example: http://www.serene-naturist.com/  this site’s homepage is very long. It is surprising that the designer needed more than one page after the first, but the other pages of the site repeat the mistakes of the first. WARNING, the site images include tasteful nudes, so please avoid if offended; all items discussed can be viewed without scrolling. A second example is http://pinesol.com, which actually scrolls in four directions.

5. Lack of Navigation Support

“Don't assume that users know as much about your site as you do. They always have difficulty finding information, so they need support in the form of a strong sense of structure and place. Start your design with a good understanding of the structure of the information space and communicate this structure explicitly to the user” (Nielsen, 2006, pp. 7). Just like getting lost in a mall, getting lost online is no fun and does not encourage repeat visits. Site maps, breadcrumbs, and explicit menus carried from page to page help counteract this mistake. Using multiple fonts, images, and locations for the navigation are also examples of this mistake. Some pages also use random images as unlabeled links.

Example: http://pinesol.com and http://www.genicap.com/Site/ have images as links but very little explanation, text, or mapping to support the user navigating the site for the first, or third, time.

6. Forgoing Web page titles

“Many Web designers don’t set the title of their Web pages. This is obviously a mistake, if only because search engines identify your Web site by page titles in the results they display, and saving a Web page in your browser’s bookmarks uses the page title for the bookmark name by default” (Perrin, 2012, pp. 10). While this may be easy to forget when you are new to hard-coding a webpage or learning to use a design program, professional developers should never forget to use a simple, unique, and descriptive title for every page.

Examples: http://www.wesleyburt.com/drawingsamples.html  and http://www.jeffkoons.com/ are the top two results for “untitled document”.  The title for each of these pages? “Untitled Document” which is a shame given the excellent artwork.

7. Going overboard with images

“With the exception of banners and other necessary branding, decorative images should be used as little as possible. Use images to illustrate content when it is helpful to the reader, and use images when they themselves are the content you want to provide. Do not strew images over the Web site just to pretty it up or you’ll find yourself driving away visitors. Populate your Web site with useful images, not decorative ones, and even those should not be too numerous. Images load slowly, get in the way of the text your readers seek, and are not visible in some browsers or with screen readers. Text, on the other hand, is universal” (Perrin, 2012, pp. 6).

Example: http://www.serene-naturist.com/ this spa site takes between 5 and 20 seconds to load depending on your computer and connection. One major reason for the length of time is excess of images and scrolling features on the page. WARNING, the site images include tasteful nudes, so please avoid if offended; all items discussed can be viewed without scrolling. A second example is http://pinesol.com, which looks like a scrapbook, a very colorful scrapbook about a cleansing fluid.

8. Failing to provide information that describes your Web site

“Every Web site should be very clear and forthcoming about its purpose. Either include a brief descriptive blurb on the home page of your Web site or provide an About Us (or equivalent) page with a prominent and obvious link from the home page that describes your Web site and its value to the people visiting it” (Perrin, 2012, pp. 1) .

Example:  http://www.genicap.com/Site/ A visit to this homepage provides no information about what the company is or does, or if it is in fact a company. At least the rest of the site is consistent with that first impression.

9. Poor text contrast or placement

Communication on the internet is primarily text based. In order to read text it needs to have enough contrast with the background color of the page to be visible. For the blind or those who have visual impairments, text readers may help them experience the internet, however if text is displayed in image files without descriptions the site becomes essentially blank. Moreover, text as images may cause large sections of text to become unreadable due to image blockers or stretching of images. Allowing text to continue to the point where readers must horizontal scroll also decreases the ease of use and readability of the site.

Example: http://www.sixtiespress.co.uk/ This site uses various colors and fonts throughout the website and places columns and paragraphs too close together. On some pages, there is blue text on a bluish background.

10. Broken links

Broken links are links to other web pages that do not, in fact, actually lead to the intended pages. Search engines and blogs commonly have this problem. Broken links also tend to come from Search Engine Optimization companies that create pages and links to promote a website or business, but then fail to maintain the sites. More information on broken links can be found here: http://www.seoptimise.com/blog/2011/03/what-checking-broken-links-can-teach-you-about-the-web-and-linking-out.html

Example:  http://www.google.com/search?q=internet&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla:en-US:official&client=firefox-a  While many of the links Google compiles do work, as you move through the 7,580,000,00 results for “Internet” you find many broken links that lead to the 404 “page not found” message seen here: http://www.ebonphire.com/current_projects

There are many other errors listed online that damage the readability, functionality, and commercial value of a website, but hopefully this summary is beneficial to new would-be web moguls and design novices.

References:

Flanders, V. 1996-2012 Biggest mistakes in website design. Accessed 1 February 2012 from: http://www.webpagesthatsuck.com/biggest-mistakes-in-web-design-1995-2015.html

Nielsen, J. (2006). Jakob Nielsen's top ten mistakes in web design. Accessed 1 February 2012 from: http://www.usabilitynet.org/management/b_mistakes.htm  

Perrin, C. (2012). 10 common website design mistakes to watch out for. Accessed 1 February 2012 from: http://www.techrepublic.com/blog/10things/10-common-web-design-mistakes-to-watch-out-for/259

_Shelby Simmons

EDET 703, Spring 2012

Graphic I Assignment

January 25, 2012

 

I used Adobe Photoshop to complete the Graphic I assignment and create my .jpg files.

My EDET703 Webpage can be accessed at http://www.shelbyesimmons.me/edet703.html

My Graphic I Assignment can be accessed directly at http://www.shelbyesimmons.me/graphic1.html

On the surface, this appears to be an easy assignment, and I have used Adobe Photoshop in the past; however, I have since chosen to use free programs such as GIMP and Paint.NET for editing and design, even in EDET 603. A sample of work completed in those programs can be found at http://ccsdtitle1.org and http://simmonss603.wikispaces.com.

I decided to work with Adobe, so I visited http://adobe.com in order to download the free trial version of Photoshop CS5.1 on to my Windows7 laptop. The initial download of the Adobe installer was successful, but the installation and the download of Photoshop required a visit to the knowledge base and a restart in order to complete. It took a total of about 15 minutes to complete the download once I got it started and several more to extract it, then it took about 25 minutes to install and get started, but now I have 30 days of Photoshop!

In addition to watching Dr. Senn’s video, I copied the instructions for the assignment from the blackboard website and reviewed some of the reflections from other students in the hopes of uncovering issues before I started. This first tip? Save the .psd file with the proper file name first! A second tip from last semester? Create the website and webpage first, and create a folder for the assignment since you will need to submit several files all together.

To summarize, I completed the following steps:

    Open Photoshop, new file>resize to 1” by .5”>save as SimmonsSG1Name.psd
    I selected the text tool and typed my name. I changed the font to another sans-serif font and enlarged the text to fill the space. I saved the image for the web as a jpg.
    I created a new layer by duplicating the 2nd layer (background is the first) which is now named Shelby Copy. Then I changed the layer properties to change the gradient to 50% and selected a new color style (effects/gradient overlay) and saved the layer as a jpg for the web.
    On the second copy I beveled and embossed my first name and saved for the web.
    Next I duplicated the primary label and used the text tool to change the text to my last name and resized to fit the space. I saved my last name as a jpg and the created 2 additional layers. I altered each layer either with emboss/bevel, gradient, or another layer adjustment.
    I closed the SimmonsSG1name.psd file and then opened a windows sample picture file that I resized to be smaller than 300x300 pix. I saved the .jpg as a .psd file and created two additional layers.
    I added the “satin” adjustment to one layer and a blue color to the other layer, saved each layer as a jpg, and after saving the .psd file, I closed the program and prepared to post my project.  The individual stages and .jpgs are on my webpage in side-by-side comparisons and as a slide show.

I am very proud to have completed the assignment, I have some anxiety about using Photoshop that is based on previous unflattering product results. I am often told that the program is intuitively designed so I suppose my intuition is what is letting me down! However, having a demonstration of the process did boost my confidence and I am satisfied that with additional practice I could become comfortable with this new version of Photoshop.

Moreover, I believe that the newer interface (as opposed to the pre-creative suite experience I had nearly ten years ago) combined with experience in other programs helped me through this assignment.