Tag Archives: web applications

A View from the Top: Taking the Mobile Experience to New Heights

Presenters:
  • Hilary J. Baker, Vice President & CIO, California State University, Northridge
  • Santhana Naidu, Associate Vice President of Marketing Communications, Indiana State University
  • Andrew Yu, Founder & CTO, Modo Labs, Inc.

Full disclosure:  CSUN is my home campus, so I have some knowledge of the Modo Labs product…they back our mobile app.

Andrew kicked off the session by talking about Modo Labs.  The whole thing started out of MiT in 2010, but had it’s beginnings in 2007 in the MiT mobile framework (this was back before the Apple iPhone and app store).  At that time, only about 2% of the web traffic at MiT was from mobile devices.  m.mit.edu took about six months to create.  Modern campus mobile apps must serve multiple constituencies, and serve many purposes…as a result, the mobile app charge at MiT required leadership!

Why WAS mobile Important?

Hilary Baker

CSUN is a public & highly diverse university community of 41,500 students and 4,200 faculty and staff in northwest Los Angeles.  We came late to the mobile party.  Campus priorities:  student success and exemplary service.  We needed to develop and launch a CSUN app fast, and with Modo Labs, we were able to launch in just 10 weeks!

  • We used web services to reach into our PS instance to enable add/drop capability into the mobile app
  • Launched our app a few days before Fall semester 2013.  Our download profile was 6,000 1st week, 9,000 2nd week, 17,000 3rd week
  • Next step for us was to enable pay via mobile app and CashNet
  • We’ve since added lots of additional features, including outdoor mapping and wayfinding, dining, campus tours, indoor floor plans, campus shuttle & transportation services
  • Marketing was important, too.  We printed full-color postcards and distributed these campus-wide.  We also featured the mobile app at our new student orientation.
  • To date downloads:  34K Apple, 9K Android
  • Most used features at beginning of term:  schedule, campus map, class search, add/drop
  • Most used features near end of term:  Transit, dining

Santhana Naidu

  • IU is celebrating its 150 year anniversary
  • Located in Terre Haute
  • 13,500 students

Our mobile journey started about 6 years ago.  Leadership realized the importance of having a mobile app.  It was an internal project, driven by IT and the marketing team.  Unfortunately, students didn’t like the app, so we went back to the drawing board.  In 2012 we re-launched our app with Modo Labs.  Some highlights:

  • 22K downloads to date
  • Classes is by far our most popular module (Blackboard, Banner, Catalog)
  • About 75% of users are iOS, 25% Android

Recruitment is my office’s top priority

  • Growth in mobile usage among students: 20% of overall website traffic from mobile
  • 90% of incoming students carry smartphones
  • 40% of admissions traffic is from mobile devices.
  • Campus life content is very popular; students use this information when making a decision to come to campus
  • IT – MarCom Partnership was a major key to our effort’s success:  shared governance
  • Modo helped us with design, programming, app launch, etc.
  • Content entry through the admin console

How Do You Keep a Mobile App Fresh & Engaging?

  • Communication (messaging) – examples provided of University of Massachusetts, DelMar, and Georgetown, College of William & Mary, Massachusetts General Hospital, Notre Dame
  • Use of Publisher module for content management that can be handled by anyone…no coding skills required
  • Personalization with locations and roles
  • iBeacons can be used to highlight items you want people to know about, especially useful for tours and points of interest
  • Geofencing
  • QR codes can also be used to drive people directly to map locations

Why IS Mobile Important?

Hilary Baker

  • PeopleSoft student services (GreyHeller/Modo Labs).  Includes Financial Aid awards, emergency contact info.
  • Parking space availability
  • Indoor-outdoor maps transitioning.  We want to make this feature more seamless.
  • Matador patrol safety – coming in early Spring 2016.  Talked about the CSUN appjam event and shared a video of one of the winning entries in this event.

Santhana Naidu

  • Audience-based content.  Ability to group icons by audience is important for us.
  • Enhancing the campus visit and tour experience using iBeacons.  This really helps our yield activities.
  • Messaging.  We want to be able to target messages by categories and groups; customize how receive messages, message center in-app so users can refer to the messages, easy to use backend interface for the admin, ability for users to opt in or out of certain optional message types, promotions.

Questions

  • Does it integrate with other apps?  Naidu:  yes, we’re using it for maps and tours.  Hilary:  yes, we link out to other CSUN mobile web sites like the Rec Center, Public Safety.  Andrew:  we can work
  • Does your team do the work?  Naidu:  Modo Labs does the heavy lifting for us.
  • What about using the app for faculty and staff?  Hilary:  yes, we have versions for faculty and staff.  Alumni also have a view.  Naidu:  faculty use the Blackboard module, but we haven’t gone much further than that yet.

Visit Modo Labs at Booth #1930; other campuses will also be here at EDUCAUSE giving presentations about their mobile experiences.

  • Del Mar College
  • Dominican University
  • Notre Dame
  • George Washington University

Implementing ARIA and HTML5 into Modern Web Applications (Part Two)

This is part two of a two-part presentation.  Catch up on part one here:  Introduction to ARIA and HTML5, Part 1

I’m typing this introduction before the presentation begins, and as I understand it, this session will be more technical than the morning session.  I’m not sure how many in-depth code samples will be included (the resources link below hints at what we’ll be talking about), so I’m making an educated guess that I may not be able to capture every nuance.  My apologies in advance if this is the case.

Presenters:

 

RESOURCES

 

EVENT PLUG – TPGBB (The Paciello Group Bug Bash)

  • Wherein you and TPG can ID and squash AT bugs
  • Thursday, March 20, 5:30 – 6:30 PM
  • Suite 3233, Harbor tower, Manchester Grand Hyatt

 

 

STEVE FAULKNER’S SEGMENT

SLIDE ONE

Diving into some HTML5  – an overview of the session

Steve Faulkner talked briefly into his involvement with his having a role in the creation of the HTML specification.  His specific interest is in how APIs speak to AT.

 

SLIDE TWO

Getting Simple

Getting to use native HTML controls makes things simpler for the developers and the AT.

 

SLIDE THREE

HTML5 Demo – details/summary

Here’s an example of the “HTML code triangle” we’re all used to:

<details>

<summary> label </summary>

Some content

</details>

When fully supported, you’ll be able to use native HTML controls without having to use any complicated JavaScript.  In the example above, clicking details would expand and show the contained elements.

Steve then demonstrated in CodePen an example of the code above, and how vastly simplified it is to render these UI elements.  This will make UI/UX designer’s lives much easier.

 

SLIDE FOUR

Chrome, Opera, and Safari have implemented this

Keyboard = 1/2 implemented

 

SLIDE FIVE

Steve then gave a description of how the code above is exposed to the AT APIs (i.e. MSAA).   Put simply, it’s exposed as a <div>, however, it’s not an accurate description of how it’s represented within the DOM.  He then proceeded to show how this looks when viewed through the “Accessibility Viewer” tool.  The aviewer tool is an object inspection tool available from the Paciello Group’s web site at http://www.paciellogroup.com/resources/aviewer.

Not all information is necessarily passed through the API and readable by aviewer.  The hope is that every browser will expose the same API Names, Roles, and States.

 

SLIDE SIX AND SEVEN

What We Want

  • We want to be able to see what’s actually there.
  • We also want to fill the gaps in general support in FF, IE, and webkit browsers

 

SLIDE EIGHT

Steve showed and described the example above, only this time embellished with ARIA code inserted.

 

SLIDE NINE

Showed the details summary here as a working example:  http://www.html5accessibility.com/CSUN14/details.html

The properties of the code on this page are properly exposed by the API, and thus readable as you would expect by aviewer.

 

SLIDE TEN

Dialog

Creating a modal dialog that works with keyboard and prevents users from accessing ‘disable’ content is the holy grail…

Being able to do this within native HTML is something that sure would be awesome.  See next slide…

 

SLIDE ELEVEN

What we get for free:

  • Focus moves to modal dialog when displayed
  • Focus stays until it is dismissed
  • Content not in the modal dialog is really disabled
  • ESC key dismisses it
  • <dialog> = role=dialog

 

SLIDE TWELVE

What we need to add (this only works in Chrome with Canary plug-in at the moment)

  • Accessible name to dialog:  <dialog aria-label=”text”>
  • Currently when the dialog is dismissed, focus moves to <body> when it needs to move to control that triggered dialog display:  can be polyfilled using scripting.

Steve demonstrated accessible modal dialog, once again with CodePen; he was unable to tab “out” of the modal dialog.  It works like a JavaScript alert()

 

SLIDE THIRTEEN

The “good oil” on implementing custom dialogs (I didn’t capture these links, but they’re available in the TPG source slides from the “Resources” link above).

  • Juicy Studio – Custom Built Modal Dialogs
  • The Incredible Accessible Modal Dialog
  • WAI-ARIA design pattern – modal dialog

 

SLIDE FOURTEEN

Input type=number

What we get:

  • Correct role and value information
  • Keyboard operable

Exposed as spin buttons

 

SLIDE FIFTEEN

Input type=range control

Implemented in all browsers.  However, default styling in IE is pretty funky, and they all look different from each other.  Bottom line:  you get everything for free.

 

SLIDE SIXTEEN

There are conformance rules for HTML5, but they can be difficult to decipher.  Steve has a “Using ARIA in HTML” document available for download which can help.

 

SLIDE SEVENTEEN

A large part of what’s been consuming Steve’s life in his role on the HTML5 specification group is figuring out which ARIA Roles, States, and Properties can be used on any HTML element.

 

SLIDE EIGHTEEN

ARIA Validation

  • Use of ARIA in HTML5 is non-conforming and probably always will be.  It doesn’t make any difference, it still works.
  • Easiest method is to use the HTML5 DOCTYPE with ARIA markup and then validate it using the W3C NU markup checker:  http://validator.w3.org/nu/

<!DOCTYPE html>

 

KARL GROVE’S SEGMENT

SLIDE ONE

Live Regions

  • Allows user to be notified of content changes
  • Typically for content that changes automatically
  • Content change may exist separate to what has focus
  • Live Regions facilitate these notifications

ARIA overcomes gaps between what JavaScript has “traditionally” done in web browsers to emulate desktop applications.

 

SLIDE TWO

Karl’s favorite thing to say:  “What is this thing & what does it do?”

  • Chat, error logs, etc. (role=’log’)
  • Status messages (role=’status’)
  • Urgent message requiring immediate notice (role=’alert’)
  • Stock ticker (role=’marquee’)
  • Timer/Clock (role=’timer’)
  • Progress indicator (role=’progressbar’)
  • None of the above (role=’region’)

 

SLIDE THREE

How important is the content?

  • aria-live=’polite’ (waits patiently, default for most roles)
  • aria-live=’assertive’ (interrupts output, default for alert role)

 

SLIDE FOUR

What’s being changed?

  • I’m adding stuff (aria-relevant=’additions’)
  • I’m removing stuff (aria-relevant=’removals’)
  • I’m changing text (aria-relevant=’text’)
  • I’m replacing stuff (aria-relevant=’all’)

Makes relevant changes to the DOM within that live region.  You can change these properties together as needed.

 

SLIDE FIVE

What matters?

  • aria-atomic=’false’ (default behavior, only announces changed node)
  • aria-atomic=’true’ (presents entire contents)

 

SLIDE SIX

What’s my name

A redux of aria labels that was covered in Part One

 

SLIDES SEVEN AND EIGHT

<div role=’alert’ aria-label=”Errors’>

Please correct the following errors:

</div>

Significance of the code above is that it will announce all the mistakes made in a form all at once, which is pretty handy.

 

SLIDE EIGHT

Karl then demonstrated some of the challenges when using live regions with a chat he had set up at:  chat.karlgroves-sandbox.com

He also showed a web-based slideshow called “shower”

Download and play with Karl’s JQuery plug-in at github.com/karlgroves/jquery-live-regions

Short break here…

Karl went about soapboxing:

“ARIA is a LIE and your HTML doesn’t do anything.  They are instead a polite request to the browser about what to do with our code, which is then transformed into a DOM.”

Principle of Least Astonishment:  things should behave consistently

 

HANS’ SEGMENT

SLIDE ONE

  • Keyboard and Focus management
  • Form validation
  • Mode conflicts
  • Solutions, workarounds, and considerations

 

SLIDE TWO

Problem with Custom Controls (not native UI)

Usually created with generic elements like <divs> and <spans>

  • Not keyboard focusable
  • Have a default tab order
  • Behavior unknown

Best solution is to use native controls, or manually define keyboard focus and behavior needs.

 

SLIDE THREE

Keyboard Issues in a Nutshell

  • Reachability:  via tab order, globally defined shortcut, activating another widget
  • Operability:  all functionality should be doable via keyboard and mouse input.

 

SLIDE FOUR

To be accessible, ARIA input widgets need focus.

  • Tabindex=”0″ element becomes a part of the tab order
  • Tabindex=”-1″ element is not in tab order, but focusable

Each widget should have only one stop in the tab order.  All of your widgets should be reachable via keyboard.  Hans then gave a demonstration of a tree widget, tabbing both into and out of it using JAWS.  This demonstration also pointed out the danger of wrapping a page with a role of application.

An alternative for a roving tabindex is the aria-activedescendant=”<idref>”

 

SLIDE FIVE

Every widget needs to be operable by keyboard.  Common keystrokes are:

  • Arrow keys, home, end, page up, page down, enter, space, esc
  • Mimic navigation in the desktop environment when possible:  www.w3.org/WAI/PF/aria-practices
  • Always manage and keep track of your focus.  Never let it get lost.

To demonstrate focus, Hans showed a table that allowed deletion of columns of data.  After deleting a column, the previous column received focus.

 

SLIDE SIX

Skipping Mechanisms

  • Ability to skip content is crucial for screen reader and keyboard users
  • Skip links may be out of fashion and often misused, but users still need to be able to skip.
  • Alternatives:  collapsible sections, consistent shortcuts, custom focus manager

 

SLIDE SEVEN

Form validation

  • ARIA makes form validation easier to manage:  aria-required & aria-invalid states, role=”alert” flags validation errors immediately.  Inline and error summary used together are most effective.
  • Validation summaries make invalid entries easier to find

Create a programmatic connection between validation messages and their associated fields.  Maybe there needs to be a W3C specification about how AT is supposed to behave (there’s one for UA).  Hans provided a demonstration of a sample form with required fields.  Tabbing away from a required field activated the “required” error when tabbing into the following field.  He attempted to mark up the fields as live regions, but it didn’t work very well.

 

SLIDE EIGHT

Fallback solutions for link buttons

There’s no real consensus on links versus buttons.  Set role=”button” to make links look like buttons for screen readers

 

SLIDE NINE

Mode conflicts, i.e. Role=Application

  • Screen readers normally browse in ‘virtual mode.’  This means it navigates a virtual copy of the web page.  It intercepts all keystrokes for its own navigation (i.e. “H” for heading navigation.
  • For dynamic web apps, virtual mode may need to be turned off.  Interactive widgets need to define the keystrokes themselves; content needs to be live, not a virtual copy; automatically switches between virtual and non-virtual mode.
  • role=”application”:  screen reader switches to non-virtual for these elements; must provide all keyboard navigation when in role=”application” mode; screen readers don’t intercept keystrokes then, so typical functions will not work.

 

SLIDE TEN

Role=Document

  • For apps with reading or editing sections (e-mail client)
  • When applied to a container inside an application role, the screen reader switches to virtual mode.

Only use application role when your application actually IS a web application.

 

SLIDE ELEVEN

Explain to users how Rich Internet Applications work

Put some hidden text at the beginning of the page to explain.

 

SLIDE TWELVE

The perfect dialog, in theory

  • Use role=”dialog” combined with aria-labelledby (for dialog title), aria-describedby (for dialog message text)
  • Focus management
  • For modal dialogs:  prevent virtual navigation to background using aria-hidden=”true”

 

My EDUCAUSE 2013 Mega Post

One the things I try to do when I attend conferences is to make a detailed record of all the sessions I attend, with the exception of keynotes, which tend to get really good coverage from other folks.  I live blog the events as I attend them, which hopefully helps those who committed to other sessions, and then I do one of these “mega posts,” which summarize all the posts I attended.  Based on my itinerary, 2013 seems to be the year of big data and analytics.  I’m willing to bet a lot of my fellow attendees will agree 🙂

I’ve been in higher education for just over seven years now, and somewhat amazingly, this was the very first EDUCAUSE event I’ve ever attended.  Why didn’t anyone tell me about this conference?  It was an extremely worthwhile event, at least for me…one of the meetings I had will likely save my division close to $50,000 each year!  That savings will go a long way toward providing students at CSUN with more and/or better services.  There were lots of great sessions to attend, with lots of smart folks sharing what they’re doing with IT on their campuses.  I’ll definitely be back next year.

Without any further ado, here’s my EDUCAUSE 2013 mega-post…please drop me a line and let me know if this helps you!

 

Friday, October 18 (last day of EDUCAUSE was a half day)

 

Thursday, October 17 (my busiest day)

 

Wednesday, October 16 (spent a few hours prowling the vendor floor and visiting with my accessibility colleagues)

 

Tuesday, October 15 (each session was a half-day long)

 

EDUCAUSE Web Professionals Constituent Group

Title:  EDUCAUSE Web Professionals Constituent Group

Facilitator:  Aren Cambre, Team Lead, Web Technologies, Southern Methodist University

 

Quick round of introductions, about 16 attendees.

What is the web now?  What makes it special?  What are we now?

There’s a ton of work to do yet with the web, we tend to be about five years behind the rest of the world.  We spent several minutes talking about CMSes (Ektron, OmniUpdate specifically) and how we tend to work with our marketing departments.

IT people are often are a store of institutional knowledge…do others experience this, too?  General nodding of assent around the room.  Decentralized IT units seem to be the norm.  UCLA has about 80 IT departments.  Other campuses also have many IT units.

We all leverage students to take care of our work.  It’s generally best to serve them with “progressive development opportunities.”  For example, angular framework, CloudFoundry, and Node.js were discussed.

Some talk about UX and design patterns, which led into a discussion about WCM.  Lots of Drupal, some WordPress, Cascade, OmniUpdate, plus a few others I didn’t catch.

Please use the UWebD list serve and use our EDUCAUSE web professionals list!

 

 

Silver Linings Playbook: Hard Earned Lessons from the Cloud

Session Title:  Silver Linings Playbook:  Hard Earned Lessons from the Cloud

Presenters:

  • Bob Carozzoni, Cornell University
  • Erik Lundberg, University of Washington
  • Bill Wrobleski, University of Michigan

The presenters agreed that they are all slightly insane, which is a good sign, IMO 🙂

Presentation Survey:  tinyurl.com/edu-silver

 

Session Goals:

  1. Challenge you to rethink the implications of cloud computing
  2. Provoke you to think beyond the status quo
  3. Inform you of what we’re seeing as we move forward
  4. Learn from you by asking questions

 

SLIDE:  It’s a BYOA (Bring Your Own App) kind of world:

  1. Consumers are more in contorl
  2. IT decisions are increasingly being made by non-IT pros
  3. Big, long software selction processes are a thing of the past

We generally don’t have the time to talk through the tech that touch the consumer.

 

SLIDE:  If no one follows, are we leading?

With SaaS, vendors go straight to the consumer (business).  Consumers are driving the bus.

 

SLIDE:  IT can lead in a new way, by:

  • Partnering
  • Inspiring
  • Coaching
  • Brokering
  • Enabling

 

SLIDE:  Slow Central IT means no central IT (be on the train or be under it)

Reality is that IT is never fast enough, even if you’re operating at peak efficiency and in the best possible way.

  • Concept to delivery must be faster than ever in a cloud world
  • You need to learn to move at the speed of cloud
  • A great but slow implementation is an unsuccessful implementation

 

SLIDE:  If you can’t take risks, end users will do it for you

  • Users take risks, often without even realizing it
  • No longer is risk managed through a single central decision /contract
  • We don’t have to be reckless, but we have to rethink how we look at and manage risk

Thinking about risk needs to be shifted.

 

SLIDE:  On-premise systems are too risky

  • Cloud providers survival depends on a rock solid security posture
  • They’re bigger targets, but they also make bigger security investments
  • Your IT security officer may soon be leading the charge to the cloud!  (there’s a big difference between security and compliance)

FISMA compliance may drive some ISO’s to push for the cloud

 

SLIDE:  big vendors rock (and suck)

  • Big vendors offer stability.  Also deep pockets for innovation, though not always in the direction we need
  • Small vendors are nimble, and will actually listen to higher education
  • Mastery of vendor management will become a critical IT skill

Independently we can’t influence big vendors, but they are responsive to consortia like Internet2, EDUCAUSE, etc.  While universities were cauldrons of innovation in the past, today we’re just small fish.

 

SLIDE:  Candlestick makers usually don’t invent lightbulbs

  • Transformative changes rarely come from someone immersed in operations
  • It’s hard to see over the horizon when you’re in the weeds
  • Liberate your change leaders so they can focus on change

Be careful in selection of your change agents and leaders!  People with positional authority are often NOT the people who can actually move the logjam forward.  You have to be intentional about giving people the free time and space to innovate.

 

SLIDE:  You need to be more fliexible than your cloud vendor

  • Customization creates lock-in, “version freeze,” and raises the cost of updates
  • Alter you business processes not the SaaS app
  • The days of customization are coming to an end

Using SaaS gives you economies of scale; you may need to stop thinking about app customization and start thinking about changing your business processes.  Expectations of your customers are different when using services provided by say, Google.

 

SLIDE:  Watch your Wake!

  • Cloud adoption, like any change, disrupts lives of real people
  • Find ways to support those affected by your transformation efforts
  • Help people work outside their comfort zones, but keep it outside their fear zone

The intellectual challenge is different now..instead of integration it’s a new intellection challenge.

 

SLIDE:  Experience can be a boat anchor

  • Deconstruct habitual thinking that’s based on old paradigms
  • Old  “What problem are we trying to solve?”
  • New: “What new opportunity does this present?”
  • Most of what we have learned about procurement, rsik management, project management, financial models and staffing is changing

Consumers don’t shop based on requirements, we shop based on what we want (right color, size, cost, etc.).  How we staff will change.

 

SLIDE:  Don’t Fight Redundancy

  • Cloud makes duplication more affordable
  • Feature overlap from our perspective is micro-specialization from the end-user perspective
  • Sometimes duplication is  bad, but it isn’t bad as a principle

We don’t worry about duplication in consumer products like ovens, toaster ovens, toasters, bagel toasters 🙂  Thinking about the middleware and integration points is probably a more useful exercise.

 

SLIDE:  Welcome to the Hotel California (check-in but never leave)

  • Make an exit strategy part of the selection and on-boardiing process
  • Getting your data isn’t hard, getting your meta data is
  • Architect to control key integration points, to minimize lock-in

Does your exit strategy work?  Have you ever tested it?  Automobiles are very dangerous, but have we stopped driving them?  No!  They’re far too useful.  We insure them!

Our focus is changing.

 

SLIDE:  Reviewed Summary of Survey

 

AUDIENCE QUESTIONS

Biggest risk is the network…how do you address that?  Students have multiple ways to get to a network, whether it’s 3G, wifi, etc.  Even identity is a risk if it’s housed on campus.  Even the network itself is a security consideration.

 

Have you found a good way to deal with risk incurred by click-through agreements?  We work with procurement to review P-card stuff to see what people are buying here and there.  Click-throughs have never been tested in court…yet.

 

Can we take advantage of the work done by other campuses?  YES!  Aggregation of vendor negotiations is a good thing for everyone, sort of like a “buying club.”

 

What if the negotiated contract ISN’T good enough for your counsel?  The university needs to make that decision for itself.

 

What strategies have you used to get traditional procurement folks to get over their concerns with risk?  We’ve dealt with it from a relationship perspective.  You need to become best friends with your procurement folks.  We developed a default addendum that covers every single issue that might “light up” our procurement folks.  Our addendum supersedes your contract.  This shows that we’ve heard their concerns

 

Cloud “stuff” is very much like a cafeteria where consumers pick and choose the services they want…what services do you see IT continuing to value and maintain?