One Map To Rule Them All

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”

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

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

Mobile Applications for Higher Education

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

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

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

What’s Trending

Debra Goldentyer asked the following question on the HighEdWeb Ning site: “What’s the big buzz this year? mobile? apps? social media? CMS revisited?”

The quick answer is yes.

I think people going to the conference are doing all of these things – just check Twitter for the conference hashtag #heweb10: make a mobile site before the mobile app; WordPress 3 Basic; dotCMS; social media expanding into location applications like foursquare, facebook touch, Gowalla, Yelp, Google Latitude, etc.

Perhaps the latest buzz is location based applications for smartphones because no one has really come full circle on them yet. We don’t know the full extent or what’s possible.

Like the others said, location based applications are growing. They offer more precise control of information distribution – e.g. on the campus tour a visitor could get a building’s information, services housed there, etc. Location applications also offer local search (precise down to the building or room) – e.g. foursquare now offers university services…so a student searches foursquare for coffee at 11pm and finds all the spots on campus that are open that serve coffee and gets a map to each. Also, your services like campus bookstore could offer “specials” through foursquare. The marketing possibilities are virtually endless.

Contrary to location based applications, most universities (at HighEdWeb) have gotten their feet wet with a CMS or three. They’ve made (or are making) mobile sites and mobile apps. I think the term “social media” has become mainstream and benign. Some universities jumped in feet first are now they’re trying to figure out what to do in social media; evaluation after experimentation. I think “Social Media Policy” is trending.

P.S.
“Buzz” is so 2007. Now it is “trending.”

Social Media In the Classroom [UPDATE]

Schools should educate kids about the world around them even if the kids get there first.

Instead of dismissing social media as distracting or destructive, schools should embrace it as an essential part of the curriculum. Not only does this limit the potential for students to abuse the technology, but it opens a new set of valuable educational tools. Source: 4 Tips for Integrating Social Media Into the Classroom | Mashable.com

Dangers in the virtual world like bullying, pornography, reputation, predators, or viruses,  are just as real out in the real world. I think teaching them how to play nice and be smart on all Internet activities should be integral to classroom curricula.

UPDATE:

On a more positive note, I kept my eyes peeled for other information about social media in the classroom and behold more stuff dropped on my desktop from the Twitterverse and beyond. I learned a new word, pedagogy, or method of teaching. I found stuff like a plethora of YouTube videos about Twitter in the classroom, tweets about videos that explain things in plain English, blogs about social media in higher education.

Source: The Twitter Experiment – UT Dallas | YouTube.com

I like what she says at the end, “It’s going to be messy, but messy doesn’t necessarily mean that it’s going to be bad.” I think that means, students might use bad grammar in Twitter, they might not like going from 1000 word papers to Twitter and back, but the important thing is that they communicate their thoughts. If their thoughts are closely related to the subject being thought, then mission accomplished. In other words, the important thing is the message not the delivery mechanism.

I think the reverse is true too. How you get the message to the students brain can be important. We know that students learn in different ways at different speeds. If a student can watch and remember a YouTube video about a school subject, and then tweet comments about it, then why not try that method; the school might even save money.

I re-found the blog, Social Media in Higher Education, which is one professor’s views about using social media in college classrooms. I won’t go into detailed description of his site, but suffice it to say he is trying to quantify what others are discovering by doing – that is using social media in a classroom has merit. There are caveats and benefits to this new mode of teaching.

Note-to-self: Likes are the new links. We can use facebook’s “Like” buttons on any content.

Students Sans (Social) Media – UPDATED

According to a new ICMPA study, most college students  are not just unwilling, but functionally unable to be without their media links to the world. Source: A Day Without Media | http://withoutmedia.wordpress.com.

Knowing this, should we, as programmers, promote this behavior by writing applications that enable easy-to-publish, multi-modal content? Currently, I’m under pressure to  (or let a CMS) produce content in at least 4 modes. All of these modes are easily available through browsers, phones or mobile devices. As a programmer of multi-modal content, sometimes I feel like I provide the path to a media-addicted future.

I suppose we could play devil’s advocate for a minute and say, “if that’s where their focus lies, that’s where we need to go.” I can agree with this because I think the battle is lost if you want to fight media and make kids read paper books and go to class rooms and write with wooden pencils. That is so 20th century to them – and most of them have no concept of the 20th century.

Now, on the other hand, what if social media is not only harmful (addictive), but it can actually lowers communications skills. Is it worth risking addiction to a mind-numbing medium to test, challenge or enlighten students?

“I defend to the highest possible level that today’s youth are not addicted to social media and networking, the Web, and online media,” Mr. Whittaker wrote. “We do spend far more time on Facebook and accessing the Web for leisure use and socializing, but that is part of the natural progression of tertiary, noncompulsory education socialization.” Source: Students Denied Social Media Go Through Withdrawal | The Chronicle of Higher Education

This last quote brings up another issue entirely, health of modern, media-addicted children. It is impossible to ‘facebook’ (a new verb) or watch TV or do any media related activity when you are outside riding your bike or skating or playing. Kids are getting obese and unhealthy at an alarming rate. They’ve taken the lifestyle of ‘couch potato’ to a whole new level. But that kiddies, is for another blog – go out and play, DVR your TV program, tell your Facebook fans you’ll out live them.