heweb10 – teamsiems

HighEdWeb 2010 Wrap Up

Posted on November 6, 2010 | by C. | Leave a Comment

I know it’s a month late, but here’s my wrap-up of High Ed Web 2010.

Conference Links

Post-conference Links

Last year I wrapped up HighEdWeb 2009 with this thought:

We have something to think about for next year. In this age of transparency you must “know thyself” and be an expert in your area – experience and ignorance shine equally through the window of our minds. We are people in higher education with limited budgets that come together to live, laugh, learn, and we express ourselves using the technology we help to create – the web.

Sea of Hands at HighEdWeb 2010 Opening Session

So, did we learn our lessons? Did we know ourselves? Did we become experts? The simple answer is “yes.”

There was only one keynote this year, by Steve Krug, author of “Don’t Make Me Think.” While I think the keynote wasn’t a failure, I expected more. I expected Steve to be a more engaging speaker. I’m glad he was the keynote. He did what he said he does in the book: he gave a quick accessibility test using a member of the audience.

I think the biggest difference this year was the comfort level. Being around so many people with the same job as me was comfortable. I think that was due in part because I was returning to many of the same people, but also because we had shared our lives on Twitter throughout the past year. I felt like I knew them.

wordle — Worldle of this blog for HighEdWeb

What did I learn?

HTML5 and CSS3 were topics I wanted to learn about. I learned some of the the pros and cons of HTML5, and I got a lot of links to good resources. I got enough CSS3 before the conference and after the conference to keep me occupied for the next year. Bonus, those of us in attendance at the CSS…In 3D! workshop got a free copy of Christopher Schmitt’s book, CSS Cookbook.

But, aside from these few technical topics, I felt 2010 was a little disappointing. Last year I had a similar feeling; however, last year was my first time going and I was a little overwhelmed.

Tweetups, After Darks and more

I met a lot more new folks and followed them on Twitter. We had a lot of shared experiences at this year’s conference as well. Starting the night I arrived, through the night before I left, my circle of friends expanded.

Saturday night was dinner with the guys from A&M at O’Maley’s in the Alley, followed by a tweetup at Madonna’s Bar & Grill.

Sunday night was the “Welcome Reception” at the Contemporary Arts Center, followed by “Party Like It’s 10-10-10” back at the Hilton, followed by the Hilton bar.

Monday night was sushi at Benihana (sponsored in part by nuCloud) with about 30 people. That was followed by the HighEdWeb After Dark mini pub crawl with stops at Madonna’s, Nicholson’s Gastropub, Bartini’s, and the Cadillac Ranch.

Karaoke Plane — "I can not wait to ride the #karaokeplane tonight." @mikepetroff

Tuesday night we started at the Newport Aquarium with hot hors d’oeuvres with the fishes. That was followed by the Hofbräuhaus for dunkelbier (dark beer), bratwursts, pretzels, fried sauerkraut and fried pickles. Of course there was lots of accordion-playing and yodeling and prosting (toasting). I have to say it was almost as good as the one in Munich, but it felt American-ized.

Since Newport, Kentucky is on the other side of the Ohio River from Cincinnati, we were bussed over there. After Hofbräuhaus we took the bus back to the Hilton, but we didn’t stop there. We topped off the night with a ride on the “Karaoke Plane” – straight to Hamburger Mary’s. Mary’s a mixed gay-straight bar and they probably had the best night of there lives because we showed up by the bus-load. I’d say at least 100 people were there drinking, singing, dancing, and of course playing pool.

Wednesday night we took it easy with the guys from A&M and dinner at Rock Bottom Restaurant and Brewery.

Next year

What are the lessons for next year? High Ed Web 2011 will be in Austin, Texas. We should be able to send two people next year. I’ll go out on a limb and predict the hot topics next year. Semantic content (Web 3.0) for mobile, desktop, vehicles, televisions, toasters, etc. (We can make content inter-operable; maybe using a CMS.) Location-based (geo-loco) applications with a side of augmented reality or geo-fencing. (Facebook Places exploded this year. Foursquare has the most users, for now. Gowalla is based in Austin.) HTML5 and CSS3 are growing, even if at a slow pace. (The W3C made an announcement about holding off deploying HTML5.)

Analyzing Real-Time Internal User Searches

Posted on October 19, 2010 | by C. | Leave a Comment

APS11

View this presentation online.

Higher education websites always have a steady supply of visitors. It’s great to see the numbers in Google Analyics fluctuate each day and trend upwards over time, but are your visitors finding what they came for? This talk is a high-level-to-in-depth look at tracking what visitors are searching for in real time from your site. We’ll go beyond the consolidated “popular keywords” list to an actual trend list with grouped phases and pages. The goal is peer into the visitor’s mind and figure out why they are searching for “address” on the Contact Us page or “Professor Smith” on the Faculty Information page. Higher education websites always struggle to accommodate two audiences, internal and external. Search results based on location don’t lie, it’s easy to combine real internal searches with reasons why quicklinks and extra menus may or may not be functioning as optimally as they should. It’s time to go beyond pageviews and user paths and look at real-time search analytics.

Nick Denardis, Associate Director of Web Communications, Wayne State University

http://wcs.wayne.edu/blog/
http://queryspy.com
http://higheredanalytics.com/analytics/
http://www.trendingupward.net/

————————————————–

My Notes

Driving decisions with data
– Why does your university have a website: they come there for a purpose, a purpose they know
– He is with Wayne State: 11% use search, 25% external search
– They used Google Analytics, Crazy Egg, Woopra
— These only gave them half the picture

– Every visitor tells a story (summaries didn’t cut it)
– It starts with a fist impression

External vs. internal
10 sec test
general

– external scan get frusted, punt to search
– internal don’t have time to scan, punt to search

– they added a script to the search to db the search terms
— only put it on top two levels

– notalbe patterns
— they search for existing pages

– they categorized them into 5 categories

– then they made a auto search (jquery: auto suggest) on the search box – to skip the search results page
– they got 35% used the auto search

– they added a “quick link bar” below the centerpiece for move in week. they did heat map and showed that they got .1% clicks on the bar.

typical search experience

– they then started tweaking google custom search results page: give events, classes, faculty, building info related to the search term

– data driving decisions
— start collecting and watching

Got Centerpiece? So Does Everyone Else.

Posted on October 19, 2010 | by C. | Leave a Comment

TNT10

View this presentation online.

Higher ed has a problem with its websites. Many of us are past that first big hump of “The Millennial Redesign.” We’ve plopped down money on a shiny new CMS. Our design is hip and groovy. But an issue snuck in when we weren’t looking. Centerpieces have become a staple component of the ever important home page. The problem is that they have homogenized us. We’re all doing it, and we’re all doing it the same. This presentation will look at a number of sites and their centerpieces, look at common themes, address why our current trend is a problem, and make suggestions as to where we can go and what we can do to stand out and differentiate ourselves.

Michael Fienen, Director of Web Marketing, Pittsburg State University

————————————————–

My Notes

– in 2000 we were wild, do it
– in 2010 we have committees, brand guides, hurdles
– now we’re normalized: dilution
– jquery, 960gs, cms all dilute technology
– we are creating industry homogeny

Centerpieces have 3 things

– visual
– informational
– story tellers
– (caotic one)

– They lack something: they’re not actionable

– people dont click on them
– new roi: relying on insignificance
– but it takes effort to fix it
– but with analytics we can make a difference

– smsu centerpiece has calls to action

– you need to measure
– you need to set goals
– get rid of old conventions; need to inovate
– this requires new standards

– first impressions are important
– standout
– its not enough to keep up

See PatternTap for design ideas

One Map To Rule Them All

Posted on October 19, 2010 | by C. | Leave a Comment

APS9

What good is a map that you can zoom, click, stretch and interact with if you can’t take it with you? You know where the lecture hall is, but how do you get there on your bike? Let’s ask the visitor in the parking lot how cool your map is when they are trying to find the admissions office. Maps are now used everywhere and growing in popularity. Can your map keep up? This session explores how to use the new Google Maps V3 API to make all your map dreams come true — including the one where you’re the campus hero for the stellar new iPhone/Android application. One map that just works everywhere. Based on experiences with the Missouri State Map.

Chad Killingsworth, Missouri State University

————————————————–

My Notes

Users have low tollerence for out of date maps.

They want to interact, but they don’t want too much information.

Don’t reinvent the wheel: google maps is already there.

All your maps should match.

Customize the map with markers.

He uses Google maps api v3. It’s designed for mobile devices.

KML layers: xml doc to maintain cool maps: from Google Earth, polyicon tool, click the edges, copy paste to KML.

Maps need to be mobile.

Make it familiar to the user. Keep brand and extras small, and maximize the map.

Student workers can make KML – it’s tedious work.

Make hybrid application: make a basic app first, embed a browser, point the browser to the map.

Optimize
– avoid extra javascript libraries
– compress your javascript
– use HTML5 local storage (cache-manifest)
– use google page speed (firefox add-on)

General Session with Steve Krug and Notes On “Don’t Make Me Think”

Posted on October 16, 2010 | by C. | Leave a Comment

Keynote at HighEdWeb 2010

Steve Krug (pronounced “kroog”) is best known as the author of “Don’t Make Me Think: A Common Sense Approach to Web Usability,” now in its second edition with over 200,000 copies in print.

His new book, “Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems,” explains how everyone can-and should-be doing their own usability testing.

His books are based on 20 years of experience as a usability consultant for a wide variety of clients like Apple, Bloomberg.com, Lexus.com, NPR, the International Monetary Fund, and many others. His consulting firm, Advanced Common Sense (“just me and a few well-placed mirrors”) is based in Chestnut Hill, MA.

He currently spends most of his time teaching usability workshops, consulting, and watching old movies.

————————————————–

My Notes

The following are my thoughts on Steve Krug’s book, “Don’t Make Me Think: A Common Sense Approach to Web Usability.” Steve was a keynote speaker at HighEdWeb 2010 and he touched on a few points in this book and his new book, “Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems.”

———-

p. 16?

Referring to Krug’s 3rd law on p. 45., can we simplify too much? into the obscure? How do you know? or how do you find the balance?

———-

p. 45 “Krug’s 3rd law of usability: get rid of half the words on each page, then get rid of half of what’s left.”

———-

p. 22

I had a thought, how many people use CTRL+F to find something on a page?

———-

p.128

“And the worst thing about the myth of the average user is that it reinforces the idea that good web design is largely a matter of figuring out what people like.”

“the average user doesn’t exist.”

“The problem is there are no simple “right” answers for most web design questions. What works is good, integrated design that fills a need – carefully thought out, well executed, and tested.”

———-

p.128

So, how can Krug tell us what is good design or what is usable or what doesn’t make us think if there is now average “us” to base it off of? I know he’s done tons of usability studies, and watched lots of people, and found that “all web users are unique, and all web use is basically idiosyncratic. (p. 128)” How does he know that I want site id in the top left with a clever tag line?

———-

p. 129

“The point is, it’s not productive to ask questions like “Do most people like pulldown menus?” The right question to ask is does this X create a good experience for most people. The only way to answer that question is with testing. You should watch ordinary people as they try to figure it out.

———-

HTML 5 Design

Posted on October 16, 2010 | by C. | Leave a Comment

TPR8

Even though the specification is still being written, HTML5 can be implemented for your website today. In this workshop presented by Christopher Schmitt focused on real world solutions, attendees will learn about the new HTML elements and their semantics, HTML5 form elements, incorporate audio and video without Flash, new JavaScript API like geolocation, and more.

Christopher Schmitt

————————————————–

My Notes

– There is 91 HTML elements
– Microformats.org are awesome, but they have problem with screen readers

– Talk about difference from xhtml to html5
– building html5
– video
– audio
– geolocation

DOCTYPE changes

SYNTAX
– quotes are optional
– case insensitive
– end / is optional

Page Structure
– Merge the div id like

Does HTML5 retain the block/in-line rules?

IE needs javascript to trick it.

IE9 supports HTML5

– Progressively modernize code

You can use java script modernizr.min.js

It can turn on features for browsers that support the feature (from CSS rules)

HTML5 audio
– only a few file formats are supported by a few

HTML5 video
– posterframe, very simple
– same issues as audio, few codecs few browsers
firefogg.org
vlc media player
handbrake.fr

youtube beta html

– Captioning (use jquery)
jCaps jquery plugin

HTML5 Geolocation
– navigator.geolocation javascript
– or

Microformats Made Simple by Emily Lewis

jquerysummit.com

How To Install Custom Ringtones on Samsung Galaxy S (T-Mobile Vibrant)

Posted on October 15, 2010 | by C. | Leave a Comment

If you have a T-Mobile Vibrant you can add your own MP3 ringtones to your phone using these simple steps.

Download your favorite MP3 to your desktop – like the “Droid” Squirrel.mp3 from the HighEdWeb 2010 website.
Next, connect your phone to your desktop using the USB cable and select Media Player type connection.
On your desktop you should get an Explorer window. Select “Open device to view files” and go to the Card directory.
Create a sub-directory named “ringtones” if you don’t have one already.
Drag and drop your MP3 file into the ringtones directory.
On your phone, on the Settings > Sound and display > Voice call ringtone screen, select your MP3 filename and press OK.

That’s all.

Thanks to HighEdWeb 2010 for providing the best ringtone ever!

Be sure to check out @HighEdWeb and @ThisSquirrel on Twitter.

Mobile Applications for Higher Education

Posted on October 15, 2010 | by C. | Leave a Comment

APS7

With the growing presence of smartphones, modern colleges have been presented with a powerful new platform to deliver specialized content to the campus community. From creating customizable study tools to concentrating the core functionality of a college website, mobile applications represent an opportunity to remain at the forefront of cutting edge technology while creating unique tools that are most useful outside of traditional computing environments. During this session, we’ll take a look at two of the mobile applications that NKU has developed for the iPhone/iPod Touch. During the first portion of this session, we’ll discuss the development of NKU’s flagship mobile app, iNKU. With the development of iNKU, we’ve consolidated some of the most useful content that our online presence has to offer, such as our campus directory and schedule of classes. We’ve also created tools which are new with iNKU, like our TANK bus schedule app and streaming radio. During the second portion of the session, we’ll talk about NKU’s flashcard application. Intended to encapsulate the same functionality as paper flashcards, this app is a promising digital version of the time-honored study tool. Users can download specialized ‘decks’ of study questions with which they may quiz themselves.

Thomas Barker, Northern Kentucky University and Curtis McCarney, Northern Kentucky University

————————————————–

My Notes

This is the NKU approach to mobile.

The iPhone, Blackberry, and Windows Mobile where the top 3 in early 2009

They chose iPhone.

They used modular app design.

They used student workers; many came from a iPhone course at the university.

They have 14 apps in all.

Students made one solely by themselves: flashcards.

iNKU is their flagship app.

It started as a native app (compared to mobile web app).

In march 2010 they added mobile web to it.

Released spring 2009.

They made their own map (Google was too old)

They have SAP portal for student information system.

They tied in more app features to SAP in successive versions.

They use Flurry to collect stats.

Next for them: social media, photo gallery, more SAP integration, virtual tours.

Authentication for at least 3 features. They use secure connection to LDAP.

They use a central services server for RSS and SAP features and other services.

They used the Cocoa Touch framework.

CSS3…In 3D! Workshop

Posted on October 13, 2010 | by C. | Leave a Comment

HighEdWeb 2010 Post-Conference Workshop: CSS3…In 3D!

WRK7

The advent of CSS3 allows for greater control and creativity in Web design. Attendees in this workshop will learn about using colors through RGBa and opacity, border images, text and box shadows, animations, transformations, and much much more to enrich their Web designs. And, yes, free 3D glasses will be distributed to attendees!

Christopher Schmitt
Web Design Specialist, Heatvision.com, Inc.

The founder of Heat Vision, a small new media publishing and design firm, Christopher is an award-winning Web design specialist who has been working with the Web since 1993. As a sought-after speaker and trainer, Christopher regularly demonstrates the use and benefits of practical standards-based designs. He is co-lead of the Adobe Task Force for the Web Standards Project (WaSP) in addition to being a contributing member of its Education Task Force. Author of numerous Web design and digital imaging books, including Adapting to Web Standards: CSS and Ajax for Big Sites and CSS Cookbook, Christopher has also written for New Architect Magazine, A List Apart, Digital Web, and Web Reference.

via Session Details – HighEdWeb 2010: The National Conference for Higher Education Web Professionals.

——

My Notes

– Apple used Safari to add behaviors
– Split into modules
— Tranformations
— Animations
— Media Queries
…

http://www.css3.info/
http://www.modernizr.com/

background-color: rgb(55,55,55);
background-color: rgba(55,55,55,.5);

Firefox 3+, Opera 10+, Safari support rgba
IE can use filter:progid:DXImageTransform.Microsoft.gradient(startColor….

Text overflow
text-overflow: ellipsis
-o-text-overflow: ellipsis

Text-selection
::selection

Text Columns
welcome.totheinter.net for jquery plugin

@Font-Face
you can define them
fontsquirrel.com
fonthead.com
typekit.com
fontdeck.com
book “fluid web typography”

Text Shadow
text-shadow: x,y,depth

Borders
— box-shadow:x,y,depth, rgba
— border-image:url, t, r, b, l, stretch, stretch
— border-radius:px (or border-top-left….

Image Masks
– webkit-mask-box-image
– moz-…

Gradient
background-image: -webkit-gradient(radial, center center,900,center bottom, o, from(#abc), to(#cba))
westciv.com/tools/

Gradient Masks
-webkit-mask-box-image:
-webkit-gradient(linear, left bottom, left top, from(rgba(0,0,0,1)), to(rgba(1,2,3,1))
Example zodurl.com

Transform Rotate
transform:rotate(270deg);
-webkit-transform:rotate(270);

Animated Links
-webkit-transition-timing-function
-…
-…

Complex animated links
farukat.es

Animating elements // not a:hover
position:absolute

Resources
–
gradients.glrzard.com

Advanced CSS Workshop

Posted on October 10, 2010 | by C. | Leave a Comment

HighEdWeb 2010 Pre-Conference Workshop: Advanced CSS

WRK1

Download the CD or go to the CD site.

A hands-on opportunity to play with some advanced CSS concepts. Bring your laptops and an open mind. We’ll cover many of the current hot design techniques: multi-column layout, faux-column layout, advanced image replacement techniques, advanced list manipulation, rounded corner boxes, son-of-suckerfish dropdowns, cross-column pull-outs, CSS hacks, and customized CSS for alternate devices.

Daniel Frommelt
University World Wide Web Coordinator, University of Wisconsin – Platteville

Daniel Frommelt has been the Web Coordinator for the University of Wisconsin – Platteville since 1997. Daniel has a staff of ten students who assist him in maintaining the core university Web pages, and with training faculty, staff and students on Web page maintenance and development. Daniel’s background is in publishing, teaching, management, and computer technologies. Daniel is on the board of directors for the Higher Education Web Professionals Association, an executive committee member of the Campus Web Council of Wisconsin, a graduate of the State of Wisconsin’s Club Tech 2000 program, holds a master of science management in information technology from Colorado Technical University and a BA from Loras College. Daniel is very active in pursuing Web standards and advancing Web technologies. He has written multiple articles on Web standards and design techniques for A List Apart online magazine.

via Session Details – HighEdWeb 2010: The National Conference for Higher Education Web Professionals.

————————————————–

My notes

Zvon.org

CSS Discuss Wiki

CWCW

Hacks
centricle : css filters
dithered css filters (mirror)
csshack : CSS Discuss wiki

Issues with PDAs
most older pds answer to media=”screen”

Screen readers
Opera has “enable voice-controlled browsing”

Specificity weight
element selector – 1
class – 10
id – 100
!important – 1000

Specificity details
in-line
style tag
link tag
@import

Hacks
child selector : html> body
adjacent sibling : html + body

Inheritance
some things can, some cannot

margin: 10px 5px 1px; // left is the same as last so 1px

960 grid 960gs
or 976