One Web To Rule Them All
•
2 j'aime•1,423 vues
The web is supposed to be the great democratiser, but what happens if you don't have a web browser? Anybody should be able to access any web content, service or application using any type of connected device from anywhere at any time, but the current reality is far from this. In this talk, join Den Odell, Head of Web Development at AKQA, as he envisions a "One Web" future, the ultimate form of Responsive Design where sites truly adapt to their users' devices, needs and context, a future where user interfaces reach beyond the browser to create an optimal experience for everyone, all built with W3C open standards.
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à One Web To Rule Them All
Similaire à One Web To Rule Them All (20)
Dernier
Dernier (20)
One Web To Rule Them All
- 1. DEN ODELL AKQA #TECHINSIGHT TECHINSIGHT.IO One Web To Rule Them All
- 2. @DENODELL this print for content only—size & color not accurate spine = 0.844" 440 page count BOOKS FOR PROFESSIONALS BY PROFESSIONALS® Pro JavaScript RIA Techniques: Best Practices, Performance, and Presentation Dear Reader, Many people are familiar with rich Internet applications (RIAs), those web sites that blur the line between desktop software and the web browser. Applications like webmail clients, photo editors, and social networking sites cross this boundary. They feature intuitive, user-friendly interfaces, without the need for page refreshes or other interruptions to the end user’s experience. It is widely regarded that this type of web site will continue to grow in popularity. I wrote this book to help web developers with some existing JavaScript skills suc- cessfully create their own professional, visually rich, dynamic, and performance- tuned RIAs. And following the guidelines in this book, you’ll be safe in the knowledge that your code is built according to best practices, adhering to web standards and accessibility guidelines. In this book, I will show you how best to build a solid, maintainable foundation of HTML, CSS, and JavaScript code for your RIAs, together with the Ajax techniques needed to provide the dynamic communication between the browser and web server behind the scenes. I will describe the performance limitations you may run into when building your web applications and how best to overcome these. And I’ll give you some tips for making your user interfaces feel more responsive, even when you can’t get around the performance limitations. You also will learn how to improve your RIA user interfaces by adding typo- graphical headings using custom fonts, multimedia playback components, customized form controls, and dynamic charting capabilities. Additionally, I will demonstrate how to continue running your web applications when the connection to the server is broken, how to use Ajax to read hidden data stored within binary files, and how to ensure the highest level of accessibility within your JavaScript web applications. Den Odell US $44.99 Shelve in Web Development User level: Intermediate–Advanced OdellProJavaScriptRIATechniques THE EXPERT’S VOICE® IN WEB DEVELOPMENT Pro JavaScript RIA Techniques Best Practices, Performance, and Presentation CYAN MAGENTA YELLOW BLACK PANTONE 123 C Den Odell Companion eBook Available www.apress.com SOURCE CODE ONLINE Companion eBook See last page for details on $10 eBook version Turn your JavaScript knowledge into beautiful, dynamic, and performance-tuned rich Internet applications ISBN 978-1-4302-1934-7 9 781430 219347 5 4 4 9 9 RELATEDTITLES DEN ODELL HEAD OF WEB DEVELOPMENT, AKQA Out July
- 3. “Imagine a console in your office that will bring the accumulated knowledge of the world to your fingertips.” Arthur C. Clarke, Popular Science, 1970
- 4. “You can get the data on some historical event, or hear an illustrated lecture on any subject you wish. Or you can hold an electronic conference with any group of people scattered all over the world, seeing each other as you talk.” Arthur C. Clarke, Popular Science, 1970
- 5. 1993
- 6. “The web is an incredible democratiser. A small company can look as large as a big company and be as accessible as a big company on the web.” Steve Jobs, Wired Magazine, 1996
- 7. ACCESS THE WEB ANYTIME, ANYPLACE, ANYWHERE, ANYHOW.
- 8. ONE WEB
- 9. User Interface Varies Based On Device Characteristics RESPONSIVE Web design
- 11. Multimodal Interaction DATA STORE SERVICES (RESTful) WEB BROWSER iOS APP ANDROID APP
- 12. Multimodal Interaction DATA STORE SERVICES (RESTful) MODALITY COMPONENT INTERACTION MANAGER MODALITY COMPONENT MODALITY COMPONENT
- 13. MULTIMODAL INTERACTION Bringing The User Interface To The User
- 15. Inputs
- 16. Inputs InkML HTML5 Touch Events API VoiceXML HTML5 Touch Events API HTML DOM Events API
- 17. Outputs
- 18. Outputs HTML5 / CSS3 CSS Braille Media Type VoiceXML / JavaScript Web Speech API HTML5 Vibration API
- 24. Welcome to the ticket booking service. What are you looking for - concert, conference, or cinema tickets?
- 25. Welcome to the ticket booking service. What are you looking for - concert, conference, or cinema tickets? Cinema tickets
- 26. Which film would you like to purchase tickets for - White House Down, The Call, or About Time?
- 27. Which film would you like to purchase tickets for - White House Down, The Call, or About Time? The Call
- 28. OK, and which cinema should we book the tickets for The Call at?
- 29. OK, and which cinema should we book the tickets for The Call at? The Odeon, Leicester Square
- 30. Great. We've now reserved you tickets to see The Call at The Odeon, Leicester Square.
- 31. RESPONSIVE Web design Bringing The User Interface To The User
- 32. TODAY
- 35. TOMORROW
- 36. StreamInput API
- 37. StreamInput API
- 38. EmotionML
- 39. ACCESS THE WEB ANYTIME, ANYPLACE, ANYWHERE, ANYHOW.
- 40. ONE WEB
Notes de l'éditeur
- I’m going to cover open standards, connected user interfaces, and a concept known as “One Web”.
- I love talking and writing about JavaScript.
- Let’s start by travelling back in time a few years… The concept of the web was envisioned by science fiction writers long before it came into existence. Here’s a quote from 1970 by Arthur C. Clarke, co-writer of “2001: A Space Odyssey”, in an article in Popular Science magazine at the time. - He’s predicting the democratisation of information and the opportunities that live-connected collaboration can bring.
- Let’s start by travelling back in time a few years… The concept of the web was envisioned by science fiction writers long before it came into existence. Here’s a quote from 1970 by Arthur C. Clarke, co-writer of “2001: A Space Odyssey”, in an article in Popular Science magazine at the time. - He’s predicting the democratisation of information and the opportunities that live-connected collaboration can bring.
- The first web browser was created in 1990, 24 years ago, but the first web browser that resembles what we still have today was released three years later - it was called Mosaic. It made the world wide web accessible to the general public and became popular from its launch date in 1993, fulfilling Arthur C Clarke’s prediction from 23 years before. It was the first web browser to show images and text together on a single page - other browsers of the time showed images in secondary windows, away from the page text - and it contains many features still present in today’s browsers. Developers from the Mosaic team later went on to create a similar-looking second web browser the following year, called Netscape, the code of which became the foundation of Firefox.
- Here’s a quote from Steve Jobs, co-founder of Apple, which was made in 1996, three years after Mosaic was released. - As well as the democratisation of information predicted by Arthur C. Clarke, it was becoming clear that the web was also going to democratise the ability for new businesses to flourish, enabling them to present themselves on a level playing field with the larger players.
- Arthur C. Clarke’s vision of a console sitting in an office is obviously familiar to us now, but also feels slightly dated as mobile devices are replacing stationary devices in popularity, bringing access to the same information and collaboration, wherever we are. To be the democratising force it is for everyone, everywhere, I believe the web needs to be truly ubiquitous, not just in terms of data connections needed to access it, but also in terms of user interfaces - as these are the connection point between the user and the underlying system. It’s no use if web access is only possible for those who are computer literate, or those who are able-bodied enough, or even rich enough, to be able to use the devices we choose to build our sites and applications for.
- This principle of a web built on open standards that works for everyone, everywhere, and at all times, has been termed “One Web” by the W3C, the standards body behind the technologies that make the web work.
- Responsive Web Design is one technique for adapting the layout and style of a web page or application based on characteristics of the device it’s being viewed upon, such as that device’s screen size or aspect ratio. When I consider the current state of Responsive Design, I think we’re making good progress on this road towards “One Web”, but I can’t help but feel we’re just getting started, barely scratching the surface of what needs to be done. To offer our sites, services and applications to everybody, everywhere involves the need to not only tailor and adapt the user interface we already have, but also to augment them or to add entirely new interfaces where it makes most sense.
- The technical architecture definition behind the One Web vision is known as Multimodal Interaction, another term coined by the W3C.
- This diagram shows how the architecture of a typical data-driven web site or app might be envisioned, with a data store accessed only by a set of RESTful Web Services which are, in turn, accessed over HTTP by one or more user interfaces, such as a browser or a native app. In Multimodal Interaction, a site’s underlying data and services are treated as entirely distinct from a potential multitude of user interfaces built on top.
- In the Multimodal system, these user interfaces are known as “modality components”, of which the web browser is just one. These interfaces should each be built using open web standards, and separated from the web services layer by a controller system known as an “interaction manager”. This allows the end user to select, or be presented, the most appropriate user interface according to their context, needs, abilities, or preferences. This interaction manager also normalises the inputs from different forms of user interface into a single, unified format, called EMMA (the Extensible MultiModal Annotation markup language), simplifying the transferal of data down to the web services layer.
- The whole point of this MultiModal Interaction architecture, is so that we can bring the user interface right to the user wherever they are, and whatever their needs. This is in stark contrast to enforcing a single web site as the only means for them to interact with your service. The user is free to chose what works best for them, rather than accept a restricted set of access conditions imposed upon them.
- The reason for building multiple user interfaces is to support the widest variety of input and output devices, where different underlying markup languages are often required to construct these interfaces.
- In a multimodal world, depending upon the device, users will be able to interact with online services, providing input via speech, handwriting, touchscreens, clicks, keystrokes or gestures.
- The W3C provide open standards for accessing data from these input types, including: - InkML, for transmitting handwriting and other pen-based inputs, including mathematical drawings which can’t be input in a convenient way by any other means - VoiceXML, for use with a voice server to access and process spoken commands - HTML5 TouchEvents API, which allows access to single or multiple touches, and gestures, on a touch surface - HTML DOM events API, allowing keyboard and mouse control over web applications
- In the Multimodal system, outputs can be presented via displays, pre-recorded and synthetic speech, audio, and tactile mechanisms such as mobile phone vibration and Braille strips.
- We’re already very familiar with open web standards HTML5 and CSS3 for creating a user interface, but we have emerging standards and support for the HTML5 Vibration API, allowing us to alert our users through specially synchronised vibration patterns, and the JavaScript Web Speech API is also gaining traction, with support already in Google Chrome, allowing us to perform speech recognition on the fly through web pages.
- A well-crafted responsive web site, built using HTML5 and CSS3, already allows us to present an appropriate user interface based on device, albeit only within the context of a web browser and only within a very narrow set of parameters and requiring specific, modern devices to work correctly. Let’s imagine two “modality components”, one a responsive web site built with HTML5 and CSS3, and another built on top of the same web services but using VoiceXML. So it’s ideally suited to phone access, literally enabling you to “dial-a-site”.
- Imagine an online ticket booking system. In addition to a responsive web site, why not create a VoiceXML document driven by the same set of data, and connect it to a voice server to provide an automated speech interface to this same system via telephone or some future in-car dashboard system?
- The responsive web site ‘modality component’ is simple enough to realise, using HTML5 and CSS3, but how might the VoiceXML document look...
- The user dials up the voice server which uses this VoiceXML document like a script, asking questions of the user, collecting their answers and adapting follow-up questions to gather all the necessary information to then use to book the tickets via the underlying web service. Let’s take a closer look at the XML structure...
- The <field> tag in VoiceXML denotes that we wish to get some information from the user. The <prompt> tag then describes the question that should then be spoken out loud to the user, asking for their response. In this case, I define a <grammar> rule for the response I’m expecting to hear, with a pre-defined list of the three responses I’m after here. Further down, I can provide a <noinput> tag which allows me to let the user know they were expected to provide an input, or if they did, that they were too quiet and we couldn’t make it out. I can also provide a <nomatch> tag, which will be read out to the user if the response they provided didn’t match the three items I expected to hear. So let’s hear how this might sound...
- Notice how we’re able to use the answers from previous questions to populate further, more probing questions, in order to get all the necessary information from the user.
- Obviously you can see how we can take this further, asking more detailed questions about the number of tickets, and the time of the film showing, but this example is just to prove the point of the simplicity of this type of voice-driven user interface.
- Alongside the obvious accessibility benefits of multimodal interaction, it’s really about bringing the user interface to the user wherever they are by considering the inputs and outputs different groups of users might need. In fact, by adding an extra user interface controlled only by voice, not only do our users not need access to a computer, smartphone or tablet, we can also eradicate the need for computer literacy (or hands!) as a prerequisite for accessing a website or application. Suddenly our user base can grow to those unfamiliar with computers and modern technology, or those without the necessary motor skills to operate a computing or mobile device. This is a big deal and brings us a lot closer to the democratisation of information and services promised by the connected web platform.
- So where are we at right now and how far away are we from the “One Web” goal?
- We have native apps for mobile and desktop operating systems, and voice-activated services such as Apple Siri and Google Voice Search, and these are great, they point the way to the future in this area. However these often involve using proprietary technologies to develop, which ends up being time consuming for developers and costly for businesses to produce. We could use a technology like PhoneGap to harness HTML and CSS for development of native mobile apps, but these rarely provide the same feature set or give good enough performance to warrant a straight like-for-like replacement. (cont...)
- Mozilla’s Firefox OS is a fairly new player to the smartphone market, but allows developers to write native apps in HTML5, CSS3 and JavaScript, bucking the trend for proprietary software, SDKs and tools. Microsoft, too, allow apps to be written using these technologies, in addition to their proprietary technologies, for Windows Phone. I believe Mozilla, and to some extent Microsoft, are showing us the road we should all follow - we need to embrace open web standards such as HTML5, CSS3, VoiceXML, InkML and others proposed by the W3C to provide the best and most easily-connected future for our users within the world wide web.
- What other advances are on their way which could bring us closer towards realising the “One Web” vision?
- The Khronos group, who are known as the creators of the OpenGL and WebGL standards for programming 3D graphics in games, are working with a number of partners on the creation of a new standard API, which they’re calling StreamInput, for accessing the data from any type of sensor through a single, common coding interface. They’ve given themselves a 12 month target to release a first version of the API. Using this, developers could access touches on a screen, or pen-based writing on a tablet, just as easily as voice commands through a microphone or hand and body gestures through a camera. (cont...)
- It’ll also give access to other sensors we’ve been able to access for some time, such device compass, accelerometer, and geolocation. We’re living in a world where the number of means of inputting data to a device is growing rapidly. Take Google Glass for example, which features head and eye motion detection, as well as a touch panel on the side. Having a single standardised API for accessing the data from any input, including new types, would be a godsend for us developers over the next few years.
- The W3C are hard at work too, attempting to establish a common markup language format for transmitting and receiving information about emotion, which they’re calling EmotionML. Being able to detect, define, and accurately represent emotions might give us the ability to adapt our user interfaces based on a customer’s reaction or mood. If we can detect frustration, we can pop up an automated help service on screen. We could also track what parts of our site cause the most happiness and focus on those aspects in future updates. It could even mean the end to annoying customer survey popups if we can instantly establish and communicate the user’s mood at any time in the process of using our site.
- In summary... To be the democratising force it is for everyone, everywhere, I believe the web needs to be truly ubiquitous, not just in terms of data connections needed to access it, but also in terms of user interfaces - as these are the connection point between the user and the underlying system. It’s no use if access is only possible for those who are computer literate, or those who are able-bodied enough, or even rich enough, to be able to use the devices we choose to build our web sites and applications for.
- Take the time to study the sites and connected applications you are personally responsible for, ensure your data is accessible through services that aren’t directly tied into a user interface, then start to envision how you might use open, standard web technologies now and in the future to create user interfaces that reach users where they are according to their personal context, needs, abilities, or preferences. It’s time to consider about the world outside the web browser, moving on from Arthur C Clarke’s fixed “console in an office”, and bring about the “One Web” future that’s built around the user, not their device.