bringing the web everywhere
DESCRIPTION
Bringing the Web Everywhere. Web Design For Google Glass. Jessica Naimo. Wearable technology. New paradigm 2020: Ubiquitous Technology Computing is everywhere and anywhere Wearable Technology= Next Step New Products: Samsung Galaxy Gear GoPro Cameras. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/1.jpg)
BRINGING THE WEB EVERYWHERE
WEB DESIGN FOR GOOGLE GLASS
Jessica Naimo
![Page 2: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/2.jpg)
WEARABLE TECHNOLOGY
• New paradigm• 2020: Ubiquitous Technology
• Computing is everywhere and anywhere
• Wearable Technology= Next Step
• New Products:• Samsung Galaxy Gear
• GoPro Cameras “Minority Report” will be a reality!
![Page 3: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/3.jpg)
EARLY BEGINNINGS• Shift to wearable technology New interfaces to view internet
• Accommodate to new platform
• Adapt new design principles
• Google Glass: Project Glass• Initiated at Google[x] by Sergey Brin
• Reported Feb 21, 2012: New York Times
• First Features: With Voice Commands• Map
• Camera
• Currently:• Explorers Program
• 18+ $1,500
• Google Community: 27,958 MembersEarly prototype
![Page 4: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/4.jpg)
MOVING TOWARD THE INTERNET• UPDATE: July 2013
• Call or Message Gmail contacts
• Web Browser- Not just for searching
• What the critics have to say:• “…practically useless on such a small screen.”
- Technology Review
• “….it isn't particularly useful…it's far from an ideal experience.” – Gizmag
• “the logistics of navigating a website through Google Glass is a little bit weird”
– Gizmodo
• Head movements to click on center + tapping on the glasses
Google Hangout
![Page 5: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/5.jpg)
WHERE DO WE FIT IN?• Full of opportunity
• UX design
• Safety:• Jake Steinerman - Michigan programmer
• Drive Safe: Detect driver’s drowsiness
• Government Work
• Police Departments • Have to multitask in a police car
• New application for searching statutes and license plates
• Patrick Jackson – Firefighter
• Sync police calls and fire hydrant locations to Glass
![Page 6: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/6.jpg)
HOW THE INTERNET WORKS
• Voice Command: “Okay, Glass Google (web address)”• Select “View Website”
• Scroll= One finger sliding forward
• Zoom: Two finger forward or background
• Round Pointer: Targets Links
• Select: Touchpad tap (Link must be centered on screen)
YouTube
![Page 7: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/7.jpg)
HOW TO DESIGN FOR IT• Need to know:
• nHD display 640 x 360px
• Bone conduction transducer for audio (no ear buds)
• 5mp camera
• Touchpad
• Bluetooth
• WiFi
• Storage Synced with Google cloud
• Sensors: Gyroscope (orientation), Accelerometer Getting to know Glass
![Page 8: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/8.jpg)
HOW TO DESIGN FOR IT• NOT A MOBILE APP
• But will deliver mobile version (Responsive)
• NOT A TRANSPARENT BACKGROUND • Videos are touch and go:
• YouTube
• HTML5 Video and Audio
• Dailymotion
• No sign in/form capabilities• DISCLAIMER: In Development, Changing every second
Source: Google Support
First Person POV
![Page 9: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/9.jpg)
BASICS• Timeline :
• Homepage
• Set of cards (content)
• Built with CSS and HTML
• Card:• Piece of content appearing on timeline
• Swipe: To search through cards
• Display information from the server
• Approved Card Designs and Templates: CSS
Google Glass Timeline
Card Template
![Page 10: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/10.jpg)
THE EASY WAY • Normal websites can be viewed:
• Near impossible to read
• Hard to select links
• Luke Wroblewski’s “Mobile First” Approach• “One eyeball, one thumb” Approach
• Loads mobile automatically
• Responsive (640 x 360px): Media Queries• Orientation: landscape
• @media screen and (width: 427px) {/* Glass layout */}
Source: WebDesign.Tutsplus
Viewing the web
![Page 11: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/11.jpg)
THE EASY WAY• Small bits of content• Eliminate:
• Long scrollable pages
• Forms
• Sidebars
• Banners
• Readability• Contrasting colors
• Font Size (large enough to read without zoom)
• Obvious Links: Big and Locatable
• Limit Calls to Action• Simplicity is Key
PeachPit released a guide book this month ($5)
![Page 12: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/12.jpg)
THE HARD WAY • Not just for a web browser Applications
• Web Service APIs
• RESTful HTTP services• Alternative to SOAP
• Android Development Tools• Google Glass is an Android Device
• Google Development Kit:• GDK: Android Development add-on
• Google Mirror API (Glassware)
• Building a web server to communicate with google web server
• Within Timeline Paradigm (Card)
• No access without Google Glass
World Maker Faire New York
![Page 13: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/13.jpg)
THE HARD WAY
• Do You Sleep With That Thing On?• Matt Richardson
• Github
• Application using Google Mirror API
• Things people said about Google Glass• Automatically published to blog
• Speech to Text
Web Blog for Application
![Page 14: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/14.jpg)
THE HARD WAY • Need To Know
• Everything is the Internet• Server–side platform: Go, Java, .NET, Python, PHP, Ruby
• Quick Start Examples
• Static Display: No animation
• Respond to key presses (not touch coordinates)
• Black background/ White text
• If not updated in ten days: Deleted
• Insert Timeline Item:• POST a JSON representation to REST endpoint
POST JSON in RAW HTTP
![Page 15: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/15.jpg)
CUT TO THE CHASE
• The Future is Ubiquitous
• Not just web browser• Static Cards
• Built with HTML, text, images, CSS, Server-Side
• Mobile First
• Content:• Brief
• Simple
• Easy to Read
• Be able to Adapt!
Iron Man’s suit is becoming reality
![Page 16: Bringing the Web Everywhere](https://reader036.vdocuments.site/reader036/viewer/2022062501/5681693f550346895de0bd0a/html5/thumbnails/16.jpg)
EXAM QUESTIONS
1. What are the two means of creating web content for Google Glass?
2. What are the basic design principles for creating content for Google Glass? What should be avoided in your design?
3. Describe the Mobile first approach and how it relates to Google Glass.
4. Explain the Timeline paradigm of Google Glass and how a card relates to web service APIs.
5. What is the importance of Google Glass in relation to safety and government work? Give an example.