Postdesktop

889 views

Published on

Responsive design, application development using APIs, and content strategy are hot topics in web development right now. These ideas belong to a bigger umbrella: ubiquitous computing and the role it plays in our lives. Traditional ideas of usability are undergoing dynamic changes as we move away from a desktop-first model of personal computing.

The internet refrigerator already exists and it's only the tip of the iceberg. In the near future, human-computer interactions will be thoroughly integrated into everyday objects and activities.

Postdesktop was a presentation to add clarity to responsive design as part of a larger context and to think about a shift that is changing the devices we use to access the web, the delivery method for education, the teaching and learning experience, and the whole of our lives.

Topics included a look at the role of pervasive computing:
• as it relates to responsive design
• in the classroom and textbooks
• in .edu marketing and utility on campuses

Written by Doug Gapinski and first delivered at PSU Web Conference 2012

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
889
On SlideShare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Postdesktop

  1. 1. byPostdesktop Doug Gapinski
  2. 2. Please share.#psuweb12 #postdesktop @thedougco clients.mstoner.com/postdesktop
  3. 3. Doug GapinskimStoner.com@thedougco
  4. 4. Postdesktop:A look at how ubiquitous computingis changing the world and education
  5. 5. Purpose:To view responsive design and mobile techology in alarger context of computing, the web, and the world.
  6. 6. 70s 80s90s 00s
  7. 7. I. Three point four mainframes to every newborn II. Device-iveness III. Postclassroom, postcampus IV. Steal these ideas
  8. 8. Part 1 3.4 mainframeshere should be shared. Everything in to every newborn:an introduction to pervasive computing
  9. 9. Pervasive computing is theidea of seamless human-computer interaction,where informationprocessing is thoroughlyintegrated into human life.
  10. 10. nd.edu Source: @erunyon
  11. 11. Google glass source: Google
  12. 12. Tesco virtual supermarket source: designboom
  13. 13. frvnt.com
  14. 14. aws.amazon.com/mturk
  15. 15. Wayne State mobile vs. desktop traffic trajectory Source: @nickdenardis
  16. 16. Properties Related topics • small, inexpensive, interconnected • the Internet of Things devices • context-aware systems • interaction with computer is intuitive • augmented reality• computer provides human with enhanced • mobile learning capability
  17. 17. How did we get here?
  18. 18. 1954IBM 6150 Mainframe$200,000 to $400,000
  19. 19. 1975IBM 5100 “Portable Computer” ~$17,000
  20. 20. 1981IBM 5150 Personal Computer $1,595
  21. 21. 1981Dulmont Magnum $8,150
  22. 22. 1983HP 150$2795
  23. 23. 1981TCP / IP introduced 1993 Mosaic First official GUI Browser
  24. 24. Tablets 1968 1989Alan Kay’s Dynabook Concept Samsung’s GridPad
  25. 25. 1993IBM Simon $899
  26. 26. 1996Nokia 9000 $899
  27. 27. Touchscreens, mobile, GUI, wireless... in less than 60 years. —and— These ideas are old. It just took a while to hit the mainstream.
  28. 28. 2007first iPhone
  29. 29. Human needs have driven this change in five ways: Portability Connectivity Interface Cost Capability
  30. 30. Forces of change in computing 1954 2012 Portability mainframe; not portable smartphones and tablets limited packet switchingConnectivity between two computers wireless access Interface punchcards touchscreen Cost $200,000 to $400,000 $200
  31. 31. The most powerful force of change is capability. source: istockphoto.com
  32. 32. Forces of change in computing 1954 2012 Capability math entertainment education shopping prayer communication information wayfinding sharing investigation travel recording observing financial management ... and math
  33. 33. Mobile and tablet traffic will outpace desktop traffic. by 2015 or sooner Source: IDC
  34. 34. Access in developing nations:half of India’s homes have cellphones but not toilets. as of March 14, 2012 Source: thehindu.com
  35. 35. Access in developing nations:38% of China’s internet population is mobile only. as of January 2012 Source: thenextweb.com
  36. 36. In .edu: Community colleges (Waubonsee) and commuter colleges (NSC)report growth of mobile-only contingents. Source: anecdotal from clients
  37. 37. 29% of households in the U.S. own a tablet or e-reader. 30 days before and after Christmas 2011 Source: MSNBC and Pew Internet
  38. 38. +440% increase in traffic to Google ads from tablets. from November 2010 to December 2011 Source: Google mobile ads
  39. 39. Pervasive computing isn’t as simple asmobile or tablets replacing the desktop.
  40. 40. Audi in-car mobile computer source: readwriteweb
  41. 41. Xfinity home security tablet source: comcast
  42. 42. NEST learning thermometer source: NEST
  43. 43. We’re headed toward a future where the web is connected seamlessly in affordable, ordinary devices.
  44. 44. 562,000 iOs are sold every day, and 700,000 android devices. as of January 2012Source: @lukew and thenextweb.com
  45. 45. (562,000 iOs devices + 700,000android devices) sold per day/ 371,000 newborns born per day3.4 mainframes to every newbornSource: @lukew and thenextweb.com
  46. 46. Would they have believed it?
  47. 47. With this much change in less than 60 years, what does the future look like for us?
  48. 48. Three sites for everyoneThe web is changing! Our work is changing! Mobile is changing! thenextweb.com alistapart.com lukew.com
  49. 49. Part 2 Everything in here should be shared.Device-iveness: responding to a Device-ive future
  50. 50. Responsive design meets the reality of peopleaccessing the web from increasingly different devices.
  51. 51. UCSD.edu A high-level definition Responsive design is an approach to design anddevelopment that ensures a site displays optimally on a variety of devices, including mobile.
  52. 52. mStoner projects UC Hastings Webster University Miami University Whittier CollegeSpring Arbor University
  53. 53. How responsive is changing our work Client education Planning (wireframes / prototypes) Design (flexible elements) Development (conditionals / touch interface) Testing (more devices)User testing (we haven’t figured this one out yet) The whole team is involved
  54. 54. Hotgloo.com1. Responsive prototyping for Miami University2. Adding notes so that the wireframe is the beginning of functional specs3. Our developers now edit the wireframes directly
  55. 55. Hotgloo allows for annotations that can be thebeginning of your functional specs document. i.e. how page elements will be set up in development
  56. 56. Responsive prototyping for Webster University
  57. 57. +
  58. 58. Pay attention to how the outliers organize Utility: custom mobile tools Investigative links point to responsive pageswww.usc.edu/?view=m
  59. 59. Pay attention to how the outliers organizebu.edu does not follow a nd.edu offers a primary navigationuniversal model as you dig in that only has 4 categories
  60. 60. More free adviceFor responsive, look outside of higher education.
  61. 61. Pay attention to e-commerceamazon.com
  62. 62. Responsive examples and design resources mediaqueri.es awwwards.com dribbble.com straightforward several different search responsiveresponsive gallery responsive resources or mobile
  63. 63. Part 3Postclassroom, postcampus
  64. 64. What does pervasive computing mean to education?
  65. 65. The knowledge capital is becoming completely unhinged from the physical location.
  66. 66. Heralds of change • online delivery • satellite locations• global research centers • open courseware • startup universities
  67. 67. luonline.com
  68. 68. riosalado.edu
  69. 69. phoenix.edu
  70. 70. Global research branches
  71. 71. Open courses
  72. 72. Itunes U• Audio and video• Presentations / lectures• Documents• PDFs• iBooks textbooks for iPad• ePub books• iOS apps• Web links
  73. 73. oyc.yale.edu
  74. 74. Source: the Chronicle
  75. 75. The startup university
  76. 76. • launches in 2014• attempting to compete with Ivy Leagues• only looks at academic qualifications of students, not extracurricular or legacies• all online courses deployed online featuring top faculty• 25 students per online course to create selectivity and reasonable class sizes• tuition of less than $20,000• urban housing in major cities, students encouraged to switch cities source: CNN.com
  77. 77. Where might we be headed?
  78. 78. Is TED.com the new Harvard?Anya Kamenetz @anya1anya source: fastcompany
  79. 79. • top prestigeeducation brand• very best mindsfrom all disciplines• specialized /customizedexperience• tools for sharingand dialogue• premium eventsfor networking source: fastcompany
  80. 80. Part 4 Steal these ideas:postdesktop marketing and utility for education
  81. 81. Look for geolocation opportunities.
  82. 82. scvngr.com/university
  83. 83. Look for ways to enhance or evolve storytelling.
  84. 84. storify.com
  85. 85. Look for ways of letting your audiences tell the story.
  86. 86. mxschool.edu
  87. 87. Apps for learning: the IT department as a concept-to-market agency
  88. 88. itap.purdue.edu/studio
  89. 89. RememberEvery web trend that comes along is a chance to reinvent yourself as a professional.
  90. 90. Shameless plugEDUniverse.org
  91. 91. Doug GapinskiQuestions? @thedougco clients.mstoner.com/postdesktop
  92. 92. Epilogue Many Grateful Dead songs The skull and roses image is deal with topics of loss anda momento mori (symbol of our hard luck, but the music is impermanence) from the stylized to convey happiness Rubiyaat of Omar Khayyam. and lightness of heart. (1048–1131) translated by the poet Edward Fitzgerald and The celebratory roses that later appropriated by the frame the skeleton provide Grateful Dead. a counterweight to the reminder of death. In the ‫ر)"#"ت &% $#"م‬ face of radical change and difficulty, we can still feel good.

×