Flickr Uploader for Student-Generated Photos

Indiana University East's home page integrates Social Media including Flickr. They won Edustyle.net's 2010 People's Choice Winner Jadu Best Integration of Social Networking.

Their most notable feature is their Flickr uploader, which allows students to upload photos through email, cell-phone, or via a form on the website. Photos then appear on their main Flickr account http://www.flickr.com/photos/iueast within a few days or sooner.

IUE does not appear to have a separate Flickr account exclusively for students, so it's hard to tell which photos may have been submitted by students. Phoenix College would use a separate account, which would be provides better ability to feature strictly student-generated photos, as well making it easier to mitigate issues that might come up.

I contacted the IUE Communication and Marketing Staff to find out how their "Flickr upload" process works. According to one of their staff, here's how it works:

"My role with Flickr is to moderate photos that get uploaded. Typically, they are photos that I’ve taken for various events so there isn’t a lot of monitoring to do from outside sources. If a student did want to post something, they are to e-mail me the photo. We have no set guidelines other than making the sure the content of the photos reflect positively on the IU East message. …I manually upload from my computer."


It appears IUE does not have an "automated" process. They just receive the photo by email through one of the various sources, and then upload it themselves.


EDIT: June 2012
Some other places that use Flickr uploads in various ways:



Flickr API
http://www.clarkson.edu/flickr/photo_upload.php?set_id=72157627576240328
http://www.flickr.com/photos/alumnievents/sets/


Groups
http://www.law.pace.edu/flickr/
http://my.nature.org/birds/engage/flickr.html
http://www.ag.ndsu.edu/workingdifferently/training/flick-your-photos-onto-flickr
http://clubhosting.org/info/support/flickr-group-app-creation-guide/
http://www.flickr.com/groups/bualumni/pool/
http://www.bu.edu/alumni/connected/photos/
http://www.flickr.com/groups/35034353808@N01/
http://www.winona.edu/share-flickr.asp
http://pictures.vcu.edu/submit/index.html
http://www.flickr.com/groups/fowlermuseum/pool/ (UCLA)a



Tags
http://pictures.commons.gc.cuny.edu/submit-a-picture/

Contest
http://summer.oregonstate.edu/connect/2009/benny-photo-contest-rules.htm

News & Media Websites Using Drupal

Colleges using Drupal for their News & Media site:

University of Pittsburgh
http://pittnews.com/

Copenhagen Business School
http://cbsobserver.dk/

University of Puerto Rico
http://www.dialogodigital.com/

Cornell University
http://cornellsun.com/

Harvard University
http://thehvoice.com/

Vanderbilt University
http://www.insidevandy.com/drupal/

University of Liverpool
http://www.liverpoolstudentmedia.com/

Mercyhurst College
http://merciad.mercyhurst.edu/

Olivet College
http://www.ocecho.com/

Stony Brook University
http://www.sbindependent.org/
University of Arizona - News

http://uanews.org/

University of Arizona - Calendar

http://uanews.org/calendar/day

Businesses or agencies with a Drupal-based News & Media site:

Columbia & Spectator
http://www.columbiaspectator.com/

The Economist
http://www.economist.com/

The UK Times
http://www.thetimes.co.uk/tto/news/

New York Observer
http://www.thetimes.co.uk/tto/news/

Seattle Times
http://www.nwsource.com/

Trinidad & Tobago Guardian
http://guardian.co.tt/

FedEx news
http://news.van.fedex.com/

Fayette, GA Citizen
http://www.thecitizen.com/

White House Press Briefings

http://www.whitehouse.gov/briefing-room/press-briefings

Mobile device accessibility using dropdown menus and mouseover/hover effects

Someone mentioned that "using mouseovers to reveal information is problematic on devices without mice, such as mobile phones and tablet devices like iPads.  On these devices, this page provides no way to see any descriptive information about the resources."

Does this mean that unless we create mobile versions of our site, mobile users won't be able to use the mouseover drop down menus on PC's new website?

The answer that accessibility really is not a problem for these devices. Proper dropdown menus are created using standard HTML, such as lists (ul) tags. The dropdown effect is usually done using a combination of CSS hover attribute and Javascript as well. This method makes it accessible for screenreaders, assistive devices, and mobile platforms. The NCSU library website uses Drupal. They use device detection to redirect iPods and iPads to the mobile version of their site (m.lib.ncsu.edu). Also take note that they are using mega dropdowns, and the links also work when you click it.

Other websites that don't have a "mobile" version of their site also seem to work fine with the iPad/iPod, such as:

http://econsultancy.com/us/blog/6058-how-do-e-commerce-websites-work-on-the-ipad (these dropdown menus work on iPad)

http://www.foodnetwork.com/ (these dropdown links go to that link's landing page instead of showing the dropdown, because these dropdowns are activated differently)

As you can see, there are different ways to slice the pie, but they do produce accessible sites that work on mobile devices as well.

Alumni Profiles

From Walden:

Name
Degree
Job Title before PC Degree
Current Job Title
How my degree helped me make a larger impact
Biggest benefit of earning a degree at PC

How I Did It
Degree Earned
What I studied
How I paid for it
How long it took
What else I was doing at the same time
when I studies
where I studied
Most challenging part
Best thing my family did to help me
what kept me motivated
highes tpoint
biggest change in my life since getting a degree
my next big challenge

Name
Current Job
Social Change Mission
How I'm making a difference
biggest benefit of my degree
why I chose PC
best advice received from a faculty members
favorite PC moment
words of wisdom

Words of Wisdom: "Succeeding at Walden takes the same thing that succeeding in life takes: organization, discipline, the right tools, and the right attitude."

Faculty Profiles

Question Examples from Walden University
What is the most exciting advancement in your field right now?
What are the benefits of a degree in your field?
What is the main thing you hope students take away from your classes?
What is the greatest lesson your student have taught you?

Could use Faculty of the Year in the profiles.

PC Library Website Redesign

The following websites illustrate some examples of features we like:
NCSU Libraries: http://www.lib.ncsu.edu/  (Prominent search box, clear distinction between library navigation and college navigation, mouse-over dropdown navigation in library nav. bar)
McIntyre Library UW-Eau Claire: http://www.uwec.edu/Library/index.htm  (Prominent search box)
U of A: http://www.library.arizona.edu/  (Prominent search box, mouse-over dropdown navigation in library nav. bar)
James Madison University Libraries: http://www.lib.jmu.edu/  (Prominent search box, Icons for some navigation)
UNC Libraries: http://www.lib.unc.edu/   (Prominent search box, Icons for some navigation)

Librarians Web Survey Responses:
What do you consider the main goal/purpose of our library website?
•    Provide quick/easy look-up for resources: books, articles, ebooks and media.
•    To enhance student learning.  This should be the goal of the entire PC website.  If we are truly a Learning College, then the entire focus of the PC website should be for learning.
•    To provide instruction on information literacy principles/practices  (citing tools, researching how-to guides/tutorials, etc.)
•    To provide services via an online platform (ASK a Librarian, instruction and L122/Conference Room/Campus Vista Room booking, material suggestions, ILL, etc.)
•    To allow for feedback on services/resources.

Why do you think our users come to the library website?
•    I think they come to our page reluctantly, so we need to make it as simple as possible
•    Looking for articles, books...
•    I think the main reason users come to the library's website is to help them complete course-related assignments.
•    To search for research information; To find out about library hours/facility;  ASK a Librarian service;  To book a room (instructors/faculty);  to submit an ILL (not many but some);  For citation guides (probably some instruction, too)

What do you like about our current website? (e.g. features, functionality, layout)
•    I like the clean layout and the use of icons.
•    Nothing jumps out to me.
•    I like the way the information formats are delineated. Some instructors provide format requirements (books, articles, etc.) which help the library user know where to go to start their search.
•    I like the Library quick links for details that aren't really a major resource necessarily but that complement or support the research process and/or use of the services the Library provides (Periodicals Title List, Request Forms, DBs by titles/subject, request forms)
•    The top navigational areas seem to hit the main reasons students/faculty might be coming to the web site (as they should):  Books, Articles, Research Help, Services, Classes & Instruction.
•    I also like the fact that it isn't too busy - the navigation is clear, the center newsy area is less prominent.  It is important to focus on key categories, because if a site is overwhelming with content (the main page especially), it can be hard for students to find things (lead to cognitive overload).

What do you dislike about our current website?
•    How restrictive it is
•    Lots of wasted space
•    The picture on the main page takes up lots of good real-estate
•    I dislike not having everything on one screen, I don't want to scroll. I don't like not having mouse over for Research Help, About the Library, etc.  I sometimes wish the Quick Links were in alphabetical order.
•    It looks outdated.  It takes too many "clicks" to get to information.  It's hard to use on a mobile device.  The main page has redundant information.
•    Don't like the way prime real estate is taken up by a large photo and the infrastructure of the PC site (the space and layout  is too limited).
•    Don't like the way it scrolls and shows the long list in the center of the page based on what navigation is like there once inside the site (or for whatever reason it does it).
•    I think the PC infrastructure takes over the identity of the page.  When on the Library site, one should be clear about that.  Those tabs at the top leading to all things PC and the PC Library identifier is too small.  While I understand the need for a PC presence so all their pages look the same (and students can easily see how to navigate to other key areas of campus), it should be less pronounced. It is important that students when at the Library site have navigation that keeps them there without confusion and that they see clearly it is the Library site.
•    The font is too small.
•    We need a better search mechanism for the site, preferably focusing on the Library web page(s). So, someone looking for citation guides can find them quickly, for example.
What functionality should our website contain?
•    Mouse overs and search on the main page.
•    Why should students have to click around until they can find a search box?  We should have a prominent search box (QUICK SEARCH) on our main page to our catalog, our top general article databases, our encyclopedias, etc.  We should have a mobile version of our website. We should have an immediate chat box, either through the Ask a Librarian pilot project or provided by PC librarians.  Also, we should solicit feedback from our students via our website (Web 2.0).  Our site needs to be more focused on learning.
•    We need a better search mechanism for the site, preferably focusing on the Library web page(s). So, someone looking for citation guides can find them quickly, for example.
•    We need a way to see what categories contain without having to commit to clicking on a link.
•    We need a quality one search product to complement our individual resources links (books, articles, etc.).
•    Any service we offer should have an online form supporting it (Reserves, One on One Library appointments, etc.. can't think of everything here but just to jot down the idea).

Slideout Panels for Viewing/Expanding Content

Slideout Panels can be a useful way to feature additional content on a page without requiring the visitor to navigate to a different page. In short, it is frequently shown initially as a "tab" on a page, but there are unlimited ways of implementing content that "expands". The expansion usually occurs on "click". It could also expand on "hover", but since the content is actually "growing", it would probably be best to occur on a click action, so the user can have a greater expectation that a substantial change will occur.  This "expansion" behavior is also seen in advertising, where a flash ad will expand if someone clicks on or hovers over the ad.

Expanding content or panels are a little different than a "lightbox" style popup.

In a lightbox (see lightbox blog), the content  usually appears by "floating" in the middle of the screen, and the rest of the screen goes dark around it.

In a slideout panel, the entire panel usually grows by expanding along the top, bottom, or side of the browser window. Depending on the implementation and the page layout, the expanding panel may either overlap the page content, or the panel may "push" the page content out of the way (the "push" method would only work effectively with top or bottom panel placement). Generally, the overlapping style is more common. There is generally no darkening of the surrounding page content when this method is used.
http://web-kreation.com/demos/Sliding_login_panel_jquery/
http://jalbum.macosxsupport.com/

Slideout Panel vertical

Slideout Panel left

In expanding content, the expanding container simply grows its dimensions, usually in an overlapping manner. Again, there is generally no darkening of the surrounding page content when this method is used.
http://demo.tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/demo.html

Expanding content

Essentially, there many ways that JavaScript (and to be more specific, the Jquery library, bundled with Drupal), can be used to modify the display and provide a deeper level of interactivity with the end user. As always, a non-JavaScript alternative should be available for search engines and browsers with JavaScript disabled.

The Jquery plugins homepage should provide a good source of ideas and possibilities.

Lightbox-style Popup Windows Useful for Viewing Thumbnail Content

Lightbox style popup windows may be a good solution for displaying large versions of thumbnail images or video.

For example, a small thumbnail image can be enlarged within a lightbox window, allowing content to be viewed at a larger size without having to navigate away from the page.

Small video thumbnails can also be displayed at full-size without making the visitor watch a tiny video, and without requiring them to visit youtube or another page. This could be one way to display videos on a program's web page if there is only room for a thumbnail size.

Examples:

Lightbox2

Fancybox

Multiple lightbox variants exist. Lightbox2 is arguably most versatile, with support for embedded images, slideshows, videos, web pages, iframes, and more—and has full Drupal integration. Another nice variant include Fancybox (apple-style),  

Some live examples and comparisons are: 

http://stellapower.net/content/lightbox2

http://videolightbox.com/

http://www.cinemablend.com/new/trailer-for-did-you-hear-about-the-morgans-14365.html

http://planetozh.com/projects/lightbox-clones/

http://drupal.org/node/266126

Alumni Page

http://www.southwestalumni.com/s/820/new/index.aspx

Faculty and Staff Page

http://www.wccnet.edu/for/faculty-staff/

Google Apps and Student Email Page

http://mymail.vcu.edu/

Fonts and Typeface

Current Site:
Phoenix College
11px/normal Arial, sans-serif
Titles: Times New Roman 18px Serif

New Site Recommend:  Verdana 12px for body  (line height 20px has a lot of white space around it)
Titles:  Georgia
Example:  www.Alistapart.com

RIO: 
Link Bar: 14px/Arial, Helvetica, sans-serif
Self-Serve Title:  20px Arial

Estrella
The whole page Body: Verdana, Tahoma, 'DejaVu Sans', sans-serif

Gateway:  Link Bar Verdana 13px (H1) 14px Verdana, sans-serif; (H2) Verdana 12px

AZ Central.com  Title: Arial, Helvetica, sans-serif

SERIF FONT
Examples of serif fonts are Times New Roman, Georgia, Book Antiqua, Palatino and Garamond. They aren’t heavily used on the web.

Suitable for the Web: Serif (Title): If you’d like to use a serifed font then Georgia is a popular choice. It looks nice, particularly at around 14 pixels.

SANS SERIF
Well-known sans-serif fonts include Helvetica (known as Arial on Windows), Trebuchet MS, Lucida Grande, and the ever-popular Verdana. All of these fonts are clean and will usually work well even at small sizes. Below is an example of text set in Trebuchet MS:

Sans Serif:  Verdana — it’s probably the most-used font on the web.  Helvetica/Arial and their variations are nice fonts, but are rarely specified as they don’t look quite as cool as Verdana. Trebuchet MS is nice, has similar spacing to Helvetica, and adds a distinctive edge since it is so rarely used.

Slab Serif:  Courier New, and Rockwell

Web Fonts compatibility chart (lists Windows/Mac font equivalents):
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Arial  
Arial (Verdana)
Arial (Tahoma)
Arial   (Trebuchet)

SKINS AND BACKGROUNDS

Blackboard Skin on the Blog: http://blogs.loyno.edu/students/

Color

002b5e

http://www.colorcombos.com/color-scheme-183.html

http://www.colorcombos.com/color-scheme-161.html

http://www.colorcombos.com/color-scheme-183.html

http://www.colorcombos.com/color-scheme-227.html

http://www.colorcombos.com/color-scheme-276.html

http://www.colorcombos.com/color-scheme-273.html

http://osc4.template-help.com/wt_29648/index.html#



College Websites Using Blue and Gold - some bad and some good.  Really like the use of the darker blue with minimal gold (high bright yellow - not the darker mustard) and some lime green accents with a bit of brick

http://www.umich.edu/current.php (just like ours...yuck)

http://www.wvu.edu (not bad)

http://berkeley.edu/students (gold looks bad)

http://www.kent.edu/index.cfm

http://www.edustyle.net/site.php?site=3508

http://www.nd.edu/

*** http://www.coker.edu (blue with white lettering and just a little gold and some light green)

Nice redesign of color:  http://www.pdx.edu  ( I like the clean white small use of brick in a tab)  Look at 2007 preview:  http://www.edustyle.net/site.php?site=391


Green and Gold
http://www.msu.edu/  nice gold and the grey has a hint of green to it.

PICTURE TRANSITION IS INTERESTING!

Student Life

Indian East University
Clean, Nicely Laid Out
Good Use of Colors
Minimal but Important Information
Good side navigation Headers and secondary pages
Good use of social media:  Flickr
http://www.iue.edu/campuslife/resources/http://www.iue.edu/campuslife/resources/

COLOR

http://www.deeside.ac.uk/about-us/
Main Colors:  Blue (two tones), Gold
Secondary: Purple, Green
Drop Down Menu: Grey with Yellow Headlines

Hillsdale  (same color scheme)

Kent State http://www.kent.edu/index.cfm

Athletics

Middlebury (A+)
http://www.middlebury.edu/athletics/
See Scoreboard (right hand column)

Team Photo
Wasn't sure where to put the team photo, since it seems kind of barren to place it on a page all by itself, and where this photo goes wasn't addressed in any of the documentation. Talked with Samantha Ezell, and she said the roster page would be a good place for the team photo, [since the roster is a list of the individuals on a team, so both the team photos, and its players would be shown here, and these both relate to an academic year].
Updated: 8/17/2011

Schedule/Results
Video Link/Feed
In the future, if required, the schedule/results pages (the Drupal content type) could be expanded to include a Video link (Embedded Media Field) so that if a game were videotaped, a direct link to the video for this game could be placed here by pasting in the the YouTube URL.
Photo Link/Feed
Additionally, a Flickr or Smugmug field (Embedded Media Field) could be added to this content type to display photos from a particular game.
Note about Smugmug: Michael Burm takes many pictures of PC Sports, and publishes his work on Smugmug, thus the note about Smugmug as a photo link or feed. Of course, this would need to be discussed ahead of time with Mr. Burm if it were to be considered. http://www.mjbphoto.smugmug.com/
Link Field
A link field could be added in the future, so each game could link to somewhere, such as a news article about the game.

These would be game-specific links and fields, not general links. At this time, it's not needed and would be additional content to manage, but would not be too difficult to set up if athletics wanted to use it at a later time.

Results Column
Samantha Ezell explained that if a game is not played yet (no score entered), the score should be completely blank. If a game HAS been played and the score is tied, this can be called a Draw ("D"). A draw can be 0-0, 1-1, 2-2, or any game where the score is tied, even if it's tied at 0-0. Wins and Losses can be labeled "W" and "L", respectively.
Updated: 8/17/2011

About, Enrollment, Getting Started

Middlebury (Don't love this part of Middlebury)
http://www.middlebury.edu/admissions/start

Admissions:
-Getting Started (Quick Facts, FAQs+)
-

Program Pages

Middlebury (A+)
http://www.middlebury.edu/academics/bio

Academic Programs
Title: Departments and Programs (There are no occupational programs)
Listing: Alpha YES>NO clusters
Photo:Interesting Large Pictures
Courses: Courses Listed  - Push Down Menus for Descriptions on each; lists last 4 years and denotes what is current
Contact: Main contact listed clearly in left column open space; all other contacts have large photos, office hours, and can click through to more information
News & Ads: Blocks on left hand side used well for information pertinent

Academics:
Catalog & Curriculum: Departments by Division
http://www.middlebury.edu/academics/catalog/depts

Northland Community & Technical College
http://www.northlandcollege.edu/programs/nursing/program_detail.php?program_code=NUR2

Academic Programs
Title: Career & Technical Programs (or) Liberal Arts & Transfer Programs
Listing: Alpha by Clusters (narrow search by clicking cluster area)
Photo: Academic Landing page has nice photos.


http://www.cerritos.edu/#academics
Cluster Programs

http://www.fresnocitycollege.edu/
Cluster maybe by department as well

http://www.northseattle.edu/programs/proftech/
Cluster in a different way

http://www.scc.spokane.edu/?progsbycat
Career and Technical and Transfer
Category, Subject, or Alpha

Creative Menu Types

Here are some other Navigation Menu Trends, as published by SmashingMagazine.com.

1) Micro-summary navigation blocks, a trend where a link is more descriptive than a single keyword:

2) Visually appealing icons. Icons intergrated into the menu should be recognizable and not too small. It's not just for decoration. It's there to help clearly convey the message. Some even make use of gradients, bevels and shading along with the icons.

3) Vertical Tabs: Here we are referring to sideways vertical tabs (90°). Text should be readable and the website layout should be able to support the number of tabs you'll need to cover the number of navigation buttons required.

4) Handwriting and illustrations: A handwritten look adds an unmistakable visual interest. As with all designs, the use of it should fit within the theme of the website or page.