Professional Showcase ePortfolio Website

Assignment Description: Students will create and make live their Prototype Professional Showcase ePortfolio websites for presentation to the class.

Here is my official Showcase Website!

http://pages.uoregon.edu/ethorne

Reflection:

I had a lot of fun designing the layout for my website, but it was pretty difficult to transfer to my design to Dreamweaver. This is partly my fault since I created a fairly complicated design with two templates and a flash page. However, it wasn’t connecting these templates that I found difficult but the getting little functions to work like the light box gallery or the tagxedo. I actually ended up taking out the interactive tagxedo because I discovered it didn’t work on Mac computers. I also didn’t use a contact me form, because I wanted my email to be accessible, but I might change it be encoded later. I will be updating my research and internship information as that develops, but I tried to include interesting information for now. I don’t think I really understand how to use Dreamweaver yet, but I will be able to edit my website in the future.

Web 2.0 Apps Abstract

Assignment Description: Students pick a Web 2.0 app that they use, and/or one they are interested in knowing more about, to write a brief abstract about its features, application, and value. This will be presented like a product review, approximately a page in length, and submitted as a PDF. These will be shared on my instructional blog.

Web 2.0 Abstract

Showcase ePortfolio Project Final Site Template Design

Assignment Description: Students will have their site design completed with navigation scheme in place, content areas identified and ready to export to Dreamweaver. Depending on the web production approach chosen, students will have to prepare and purpose their design and or design elements for that specific approach – production with HTML CSS, Divs, ApDivs, and/or combinations of these features. Students also need to have identified any additional programming features they will include – examples of this are galleries, java scripts that key specific actions, etc.

Here are the three templates I will be using to create my website:

The home page or splash page:

This is the basic template for my website:

And this is the template for the Professional page. Since the menu is an accordion style, I had to create a new template:

I would post PDF links, but my computer is functioning too slowly. I plan to use HTML because I am more familiar with it than CSS. All of these pages are sliced and ready to import to Dreamweaver. Each  page will have an image on the right and text on the left, with a quote in the smaller blue box. The social media boxes will link out. My resume will be split into sections that will each link to a new page (same window) with a full pdf link of the resume constant on each page. The most complicated page will be the portfolio. I’m guessing I will have to use a gallery widget. I’m hoping to have just a few thumbnail sized images that people can click on to see larger. Then I will just have hyperlinks to writing samples. The contact page will just list my email and a thank you. I’m not sure yet what functions will be difficult to manage until I start using Dreamweaver. I have the images and quotes ready. I need to work on the text for each page.

 

Arts Organization Website Case Study

Assignment Description: Students will pick an arts organization (their internship site makes for an interesting choice) and critique the organization website. The case study will include a brief backgrounder of the organization, an overall assessment – addressing design, UI, navigation, functionality, and content, and prescription for improvement.

Website for The Moth: themoth.org

The Moth is were I hope to do my internship. The Moth is a non-profit focusing on the art of storytelling. They have many different programs, but are probably most known for their podcast. They record stories told at their live performance events and they hold story slam competitions all over the country. They also hold storytelling workshops in NY and high school story slams. They even have a corporate training programming to help business connect to their audiences through storytelling. I am hoping to work with their workshops or slams this summer. I love this organization, but what about their website:

Right off the bat, the website is very searchable. The domain name is simply the organization’s name. So, it’s the first site to pop up on a Google search. You search Moth events and it sends you right to their event page. However, tickets only go on sale a week or less before an event and never at a set time. This makes it difficult to buy tickets, especially when their events sell out so quickly. Let’s just say, I know this from experience.

The home page is very dynamic with a changing header photo attached to different blog posts and announcements. They have all of their social media links along the top right of the page although there’s no alt text to tell me what some of them are. The menu options on the top of the page include: events, stories, tell a story, radio, support. However, other menu options like: blog, about, shop, contact, newsletter and press are at the bottom of the page. I find this most frustrating for the about page. Often when I’m looking up an organization, the first button I click is about. That page should tell me the organization’s mission and give me a brief overview of their programming. However, I always have to search for The Moth’s about button (and believe me, I have visited this site many times). Furthermore, their about page doesn’t have a mission, but a media quotes and a summary of what The Moth is. I already know and love this organization, but if I were someone new coming to this site, I would wonder why they don’t have a mission.

The home page is also very focused on fundraising. They have both a support button and a donate button on the top of the page. Although the support sends you to a page listing various ways you can either donate money and time or support an event. The donate button open up another window and gives you a form for becoming a member. I don’t understand why it has to open up another window. Maybe so you can refer back to the site, but functions like that always annoy me. Furthermore, they have many different ways to navigate through the various support options. They have them listed out visually on the page, but they also have a side menu. If you click on the corporate link for example, there’s an overview across the top with links that jump down to the portion of the page regarding that topic. Or you can just click the overview of all the support options on the left hand menu and get an even quicker description. Thus, while there are many different ways to navigate or receive the same information, the side menu keeps you from getting lost.

Going back to the home page, they are definitely integrating their social media into the site design: They have an RSS feed of their tweets at the bottom of the home page and there’s an option to like their Facebook page on the bottom of every page! They also have a quick calender widget at the bottom of the page. Essentially you could go to this home page and find everything you need and then link out to their social media from there.

One difficulty in navigating through their site is determining the difference between their stories and radio page. They both generally have the same content, but some stories are listed by radio hour, some by podcast, some by storyteller or you can look at all stories. It’s difficult, especially for someone who doesn’t know much about The Moth, to figure out which stories to listen to. However, they do give you some cool search options. You can sort the stories by video or audio. You can look at the most recent stories or the most listened to. You can add stories to a Moth player (although it doesn’t seem to be working for me), live stream the audio, buy the story at their store, download it on iTunes or of course, share it on Twitter or Facebook (although it only gives you the option to like it). These are a lot of options that give people freedom to listen how they want, but can also be confusing. They should at least have a short summary of the different options at the top of their story and radio pages, so that people can understand the difference.

The last page I’m going to look at is “Tell a Story”. They have an option to record your stories straight to their website and then people can vote on them. This could be an extremely complicated submission process with lots of instructions and a difficult recording process, but The Moth makes it simple and easy. They give four main tips augmented by visual icons. They have a help phone number at the top and they have a simple form you fill out before using the embedded widget to record your story. I haven’t used it but once people record their stories, The Moth reviews them and then informs the storyteller when they post them to the site. You can then go to the Listen & Vote page to listen to these stories and give them a 1-5 star rating. The only thing I say is missing from this part of the website is what happens to your story if you get a high rating. Do they end up on the podcast? Do you win something? It would be good to know what The Moth is planning do with your story. Although you do have to give all right to your story to The Moth if you submit it.

In the end, looking over this website made me want to do my internship with The Moth even more. They are doing so many awesome things and their website is so interactive. My biggest complaint about the website is that it can be difficult to navigate. It’s great they have so much to offer, but I think they need to provide more explanation of each of their programs on each page. Also, they should move the about page up to the top (especially because it describes all of their programming) and add their mission!

Showcase ePortfolio Project Timeline

Assignment Description: Students create a timeline, a chronology of events to complete their websites. The timeline is an outline of calendar dates detailing activities with specific tasks necessary to complete the website.

Showcase ePortfolio Website Project Timeline

1/20/13: Make website webmap

2/12/13: Make timeline and start designing template for website in Illustrator

2/14/13: Finish designing template for website in Illustrator

2/19/13: Collect all materials for website and modify for website design

2/21/13: Create homepage in Dreamweaver with buttons and rollovers

2/26/13: Create About and Portfolio pages in Dreamweaver

2/28/13: Create Contact page in Dreamweaver; fix any problems with other pages

3/7/13: Work on Professional pages in Dreamweaver

3/10/13: Finish Professional pages

3/15/13: Test all links, images and content and make adjustments as needed

3/16/13: Finalize site and present design

Here’s a PDF link of this timeline:

Showcase ePortfolio Project Timeline