About Jack Zheng
Faculty of IT at Kennesaw.edu
Web
user
http
http www
rich user experience
social
About Jack Zheng
Faculty of IT at Kennesaw.edu
Web
user
http
http www
rich user experience
social
Web 2.0 IT 5443 Web Technology Jack G. Zheng Spring 2019 Overview What is Web 2.0? Web 2.0 ideas and aspects Web 2.0 from a behavior aspect Web 2.0 from a technology aspect we will focus on rich user experience and particularly on AJAX 2 Web Evolution Stages 3 Stage Beginning Time Features Pre-web Before 1990 All kinds of Internet applications with its specific protocols Early/simple web Early 1990s Collection of interlinking web pages. Document based information retrieval. Dynamic web Mid 1990s More advanced dynamic processing on both server and client side. More functional applications emerged. Web as a platform 21st century A fundamental platform to support all kinds of services and integrate various kinds of systems. Web 2.0 Since about 2006 Services that support massive user participation and contribution. Redefined client/server communication style. Greater advancement in software-as-a-service. Mobile Web Since about 2010 Major renovation of user experience design and application architectures. Major client-side advancement. * Note: each later stage does not replace the early stage at this time. They only signal the beginning of some drastically new developments. The applications of each stage are still widely used today. Web 2.0 A general and loose concept for recent advancements (roughly from 2005) of the World Wide Web http://www.techterms.com/definition/web20 The debate of term http://computer.howstuffworks.com/web-204.htm 4 "Web 2.0 is term that was introduced in 2004 and refers to the second generation of the World Wide Web. The term "2.0" comes from the software industry, where new versions of software programs are labeled with an incremental version number. Like software, the new generation of the Web includes new features and functionality that was not available in the past. However, Web 2.0 does not refer to a specific version of the Web, but rather a series of technological improvements." Why to study Web 2.0? Web 2.0 is a phenomenon that fundamental impacts user and organizational behaviors in many aspects (which directly contributes to the emergent of many "2.0" terms) How web 2.0 changed the way of traditional way of business functions? Retail, Advertising and marketing, CRM, HR, Media, Journalism, Publishing, Software, Stock trading, Banking, Retail, Education, Enterprise, Government Businesses need to understand it and embrace the new environment, and even create new models and businesses. 5 http://starseoservices.com/se o-services-offered/social- media-marketing/web-2-0- marketing/ What does the "2.0" mean in many of these 2.0 terms? Conceptual Models Conceptual models or frameworks try to view the Web 2.0 phenomenon systematically and holistically. They help people understand the big picture by categorizing and associating different pieces of Web 2.0. We will take a look at O'Reilly's original principles Anderson's iceberg model Instructor's view More: https://www.pinterest.com/rrodrigo/defining- web-2-0/ 6 O'Reilly's Original Ideas http://www.oreilly.com/pub/a/web2/archive/what -is-web-20.html (please read it for detailed descriptions) 1. The Web As Platform 2. Harnessing Collective Intelligence 3. Data is the Next Intel Inside 4. End of the Software Release Cycle 5. Lightweight Programming Models 6. Software Above the Level of a Single Device 7. Rich User Experiences 7 Instructor's comment: O'Reilly's principles or ideas are somewhat descriptive than definitive. And they are a bit mixed from different perspectives. The following two models provide stronger logical relationships. Iceberg Model Paul Anderson's iceberg model 6 major ideas Supported by newer web technologies and standards Implemented in commonly seen services Read more in his book http://techlun.ch/about-my- book-web-2-0-and-beyond/ The whole book is based on this model Or http://ictlogy.net/bibliograph y/reports/projects.php?idp= 775 8 http://commons.wikimedia.org/wiki/File:Web-20-iceberg-model-from- Web20andBeyond-book.jpg Major Aspects of Web 2.0 9 Behavior focus Technology focus Ideas 1. User participation/contribution 2. Socialization 3. Collective intelligence 4. Rich user experience 1. Rich user experience 2. Web as a platform 3. Service web Applications and services New applications that implement basic ideas and support new user behaviors. - Wiki, Blog, SNS, etc. Key technologies and applications - AJAX, Web Services, etc. - Mash-up, streaming, push, sync Business Model How the Web transformed traditional businesses and created new business opportunities? - This is not limited to commercial businesses, but also many other sectors like education, government, etc.; - it also impacts organization's internal behaviors. (enterprise 2.0). How is the development and delivery of these services and products changed? - Software as a Service - Platform provider Instructor's view One-Term Characterization If using one term to characterize Web 2.0 (from a behavior perspective) I will choose "social web", which depicts the Web as a social (interaction) platform. Web 1.0 is information web, and Web 2.0 is social web. Other ideas and behaviors are built upon this interaction and socialization Other key terms Web of people Social and collaborative web Read/write web Collective intelligence/wisdom of the crowds Network efffect 10 How is Web 2.0 different? 11 http://blogs.voices.com/thebiz/2006/09/web_20_definition.html User interactions and socializations http://yarikson.wordpress.com/2008/04/24/web-20-generalization User interactions and socializations Social Media "Social Media is a group of Internet-based applications that build on the ideological and technological foundations of Web 2.0, and that allow the creation and exchange of User Generated Content." Kaplan and Haenlein (2010) http://www.michaelhaenlein.com/Publications/Kaplan,%20Andreas% 20-%20Users%20of%20the%20world,%20unite.pdf Social media, broadly speaking, is a term that basically corresponds to the behavioral aspects of Web 2.0, with an emphasis on (computer technology mediated) "social network" (which is more appealing to businesses and investors) as a publication and broadcast medium. This is the instructor's understanding at the moment See a diagram on the next slide Relatively inexpensive and widely accessible software tools that enable anyone to publish and access information. 13 Web 2.0 vs. Social Media 14 Social media that fall outside web, particularly with mobile apps? Web 2.0 apps that are not so "social". For example, online collaboration tools, crowdsourcing, etc. Social media backed by Web 2.0 ideas and technologies. Social media Web 2.0 (behavior aspect) User Participation and Contribution User generated content is a common term to describe participation and contribution The read/write web Content can be of many types Writings: articles, reviews, discussions, messages, comparisons (http://socialcompare.com) Media: photos, videos, music Professional: courseware, news, reports, tutorial Actions: clicking, viewing, etc. Other: reviews, opinions, ratings, emotions, etc. Content can be generated Explicitly and purposefully, where the user knowingly makes a contribution, e.g. writing a blog, uploading a photo Implicitly, or as a result of participation in normal online actions (and therefore collected implicitly) like sharing, liking, voting, searching, commenting, etc. 15 Participation beyond Content Crowdsourcing Services and resources provided by participants Collective services organized by the "middle man" 16 https://twitter.com/Wet paintMENA/status/585 810382905675777 Collective Intelligence Collective intelligence (wisdom of the crowds) The aggregated information or knowledge that emerges from the independent inputs and contributions. Shared or group intelligence that emerges from the social behaviors like collaboration, collective efforts, and competition of many individuals Example applications: recommendation, categorization, voting, prediction, trending, collaborative work, etc. Three levels of collective intelligence Implicit aggregation: independent actions do not purposefully aim to create the collective knowledge, e.g., collaborative filtering Explicit aggregation: independent actions purposefully aim to create the collective knowledge by simple aggregation, e.g., folksonomy, collaborative tagging, social tagging, social bookmarking Explicit collaboration: independent actions purposefully aim to create the collective knowledge but beyond just simple aggregation, e.g., Wikipedia, team blog, collaborative editing (Google Docs) 17 Power Law of Participation 18 http://ross.typepad.com/blog/2006 /04/power_law_of_pa.html Network Effect An economic term, generally means the increase in value to the existing users of a service as more and more people use it. In other words, the more people use it, the more value (exponential growth) everybody has, then the service as a whole is more valuable. https://en.wikipedia.org/wiki/Network_effect http://www.businessinsider.com/network-effects-2011-5 The value is created mainly by Interaction of users; Collective value created from user base (content etc.). Implication The value of a product/service to one user depends on how many other users there are. A new product or service is more likely to be successful if it gains traction and momentum through early adoption, rather than being a superior product. A lot of new technology startups focus on user base, rather than being profitable, at the beginning. 19 Image from http://www.kinesisinc.com/ using-networks-to-grow- your-business/ Network Effects Business Models Online community based Either open or focused community (community of practice) Example: Ning Social attention business Content sharing, e.g. YouTube, Flikr Social networking, e.g. Facebook, LinkedIn Intermediary/brokerage Marketplace, e.g. Alibaba Crowdsourcing O2O (online to offline) Many of these businesses are facilitated by Web 2.0 technologies (and mobile technologies) building platforms to support the "network" and use social media for customer engagement 20 The Technology Aspect - Web as a Platform One of the goals of Web 2.0 is to facilitate the use of the Web as a development platform. Traditionally, software was developed for specific platforms, such as Windows, Linux, or Mac OS. Today, developers build Web-based applications that run on the Web, that are completely independent of the user's actual computer operating system. http://www.webopedia.com/TERM/W/web_as_a_platform .html The key for this vision Rich user experience The web as a communication means (for applications and software modules) 21 Major Web 2.0 Technologies Key Aspects Key Technologies Rich user experience: more responsive and interactive; brings desktop experience to the web. Client (JavaScript) focus: AJAX, HTML 5 Service web: services are the building block for the underlying communication for web applications. Semi-structured data: XML (RSS), JSON Web services: SOAP, RESTful (Light weight) Web APIs: REST, JavaScript Application Architecture: architectural changes brought by the new technology AJAX, SPA, MVC, four tier Frameworks: all kinds of web frameworks at different levels Programming frameworks: jQuery, etc. Architecture frameworks: MVC, etc. Application frameworks: CMS, etc. UI frameworks: Bootstrap, etc. 22 Rich User Experience Rich user experience is both from behavior and technology perspective Behavior User's interactions with websites share common properties as they use a desktop https://nicholasleach.wordpress.com/2012/03/30/ric h-user-experience/ When extended to the mobile device, use of gestures http://uxmag.com/articles/gestures-animations-the- pillars-of-mobile-design Technology AJAX, touchscreen, etc. 23 Rich User Experience RUE means Brings desktop experience to the web Multitasking, window Beyond conventional point-and-click UI More responsive and interactive user interfaces Multiple smooth interaction methods Simplicity and efficiency Aesthetics, elegance, visual style and effects http://www.slideshare.net/Luristic/the-anatomy-of-rich-user- experience Key technologies HTML 5 AJAX (Asynchronous JavaScript and XML), SPA 24 "When technology becomes a commodity by satisfying basic needs, user experience dominates." HTML 5 HTML 5 components New HTML elements and attributes CSS3 JavaScript API The significance of HTML 5 for RUE HTML5 introduces a paradigm shift with new semantic elements provided for JavaScript a pretty solid working set of tools and effects JavaScript is still the tool hands all magic Minimizes dependency on foreign components like plug-ins Cross platform Enhance client side processing (data storage, graphic processing, etc.) http://radar.oreilly.com/2011/07/what-is-html5.html http://www.methodsandtools.com/archive/archive.php?id=125 Full list of improvement http://www.w3.org/TR/html5-diff/ 25 AJAX 26 AJAX (Asynchronous JavaScript and XML) is a group of interrelated web development techniques used on the client- side to create interactive web applications. Despite the name, the use of XML is not actually required, nor do the requests need to be asynchronous. With Ajax, web applications can communicate with servers in the background without a complete page loading after every request/response cycle. http://www.adaptivepath.com/ide as/ajax-new-approach-web- applications/ Traditional Model 27 http://www.websiteoptimization.com/secrets/ajax/8-1-ajax-pattern.html The server prepares the whole page. The client does not generate views/presentations (HTML/CSS). Synchronous communications feature sequential request/response cycles, one after another Ajax Model 28 With Ajax, web applications can communicate with servers in the background without a complete page loading after every request/response cycle. http://www.websiteoptimization.com/secrets/ajax/8-1-ajax-pattern.html The server prepares partial pages (partial HTML) or just data (XML or JSON). The client generates views/presentations and update content (partial page) by manipulating DOM. Asynchronous communications feature independent request/response cycles A Typical Example 29 https://www.google.com search term recommendation is a typical AJAX application that relies on continuous server communication from the backend. Traditional web communication style cannot do this. A set of requests have been made to get JSON data from the server as I type in the search term box. Observe the "q" parameter in all URLs. Use Chrome's developer tools to view network communications while typing the search terms. Major AJAX Elements Standards-based presentation using HTML and CSS Asynchronous operations and communications using XMLHttpRequest (AJAX engine) Data interchange and manipulation using XML, JSON, or preformatted HTML Dynamic display and interaction through the Document Object Model JavaScript binding everything together 30 XHR (XMLHttpRequest) 31 XMLHttpRequest (XHR) is an API available to web browser scripting languages such as JavaScript. XHR is used to send HTTP or HTTPS requests to a web server and load the server response data back into the script, in an asynchronous way. See the diagram on slide 6 and 7 to compare synchronous and asynchronous communication It is the AJAX "engine" or the AJAX communication layer mentioned previously. https://en.wikipedia.org/wiki/XMLHttpRequest Response Format 32 The response from the asynchronous call does not have to be XML HTML (AHAH or AJAH) Server returns the preformatted HTML/CSS as a partial page JSON (AJAJ, or Asynchronous JavaScript and JSON JSON has gain popularity for the past years to be used as an exchange format https://en.wikipedia.org/wiki/AJAJ JavaScript 33 JS plays a central role in AJAX and ties everything together Manages the AJAX communication through XHR Triggers AJAX requests in page loading or user actions (clicking, mouse moving, typing, etc.) Update the page dynamically through DOM No complete page refresh Only designated section update AJAX's Impact on RUE More efficient and faster communications between server and client. Enables more frequent "thin" communications Applications that rely on frequent updates are made possible: automatic completion, auto content update, etc. Smoother and continuous user interaction (user experience) Reduces complete page refreshes and transitions Partial page loading; reducing unnecessary page refreshes, less web page transitioning and less wait time Multi-path navigation/action: less navigation interruptions. Improves operational efficiency, enables multi-tasking and immediate action feedback More like applications, building rich interaction/interface: more responsive and interactive; brings desktop experience to the web Advanced interaction actions, such as drag and drop, mouse scroll, etc. Desktop GUI like dynamic interfaces are possible, such as MDI (multiple div(ision) interface) which is similar to MDI (multiple document interface) or TDI (tabbed document interface) in desktop applications. In-page navigation: a web application becomes less dependent on navigations between web pages. A web page becomes more like an application holder that many tasks can be completed within the page. Page transitioning is significantly decreased and navigation path is less complex. Multi tasking is possible in the same page. 34 Mobile Computing Mobile computing has drive the Web 2.0 businesses to a new level Greatly expand the usage from desktop to mobile any time Convenient devices and platforms with embedded and integrated gadgets (camera, sensors, microphone, lighting, etc.) Although many mobile apps are OS dependent native apps, they use web technologies to communicate with servers. 35 Summary Web 1.0 the Web of information The need for access: the need to get information and knowledge from the web; the need to accomplish tasks on the web. Web 2.0 the Web of people The need for participation: the need for socialization on the web; the need to make contributions. Web 3.0? the Web of things What do you anticipate for web 3.0? Instructor's earlier take: http://cubicle-h.blogspot.com/2009/07/web-30-in-my- mind.html Internet (Web) of things? Things generated content https://www.youtube.com/watch?v=F_nbUizGeEY 36