DOCSLIB.ORG

Software Architectures 1

Total Page：16

File Type：pdf, Size：1020Kb

Download full-text PDF Read full-text
Software Architectures 1 SOFTWARE ARCHITECTURES Chapter 1 – HTML5 Anh Au Summary In this chapter, we cover HTML5 and the specifications of HTML5. HTML takes a major part in defining the Web platform. We will cover high level concepts, the history of HTML, and famous HTML implementations. This chapter also covers how this system fits into a larger application architecture. Lastly, we will go over the high level architecture of HTML5 and cover HTML5 structures and technologies. Introduction High level concepts – what is the basic functionality of this system HyperText Markup Language (HTML) is the markup language used by to create, interpret, and annotate hypertext documents on any platform. HTML5 is the fifth and latest standard for HTML. It is enhanced to provide multimedia and interactive content without needing additional plug-ins.1 The current version more easily and effectively supports the creation of web applications that are able to work with the user, the user’s local data, and server. Glossary CERN European Organization for Nuclear Research CSS Cascading Style Sheets A style sheet language used for describing the look and formatting of a document written in a markup language DOM Document Object Model A cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents DTD Document Type Definition A set of markup declarations that define a document type for an SGML-family markup language GPU Graphics Processing Unit HyperText Text displayed on a computer display with hyperlinks to other text which the reader can immediately access IETF Internet Engineering Task Force Develops and promotes Internet standards Internet A global system of interconnected computer networks that use the standard Internet protocol suite to link several billion devices worldwide JS JavaScript The scripting language of the Web Markup Modern system for annotating a document in a way that is language syntactically distinguishable from the text PHP PHP: Hypertext Preprocessor 1 SOFTWARE ARCHITECTURES A server-side scripting language designed for web development RTC Real-Time Communication SGML Standard Generalized Markup Language Used for defining generalized markup languages for documents W3C World Wide Web Consortium The main international standards organization for the World Wide Web WHATWG Web Hypertext Application Technology Working Group A community of people interested in evolving HTML XHTM L Extensible HyperText Markup Language A family of XML markup languages that extends versions of HTML XML Extensible Markup Language A markup language that defines a set of rules for encoding documents in a format that is both human-readable and machine-readable 2 SOFTWARE ARCHITECTURES History Although the origin of the Internet began around the 1960s, the field of academia began to utilize the Internet in the 1980s. Progressing into the 1990s, the increasing popularity of the Internet had created an impact on cultures and businesses everywhere. CERN researchers were looking for a system that would the central location where documents could be created and shared. The idea came to be ENQUIRE in 1980. In 1989, physicist and CERN contractor Tim Berners-Lee incorporated the ever-growing Internet into the ENQUIRE system. He suggested a hypertext system that would use hyperlinks connecting to the Internet. By late 1990, Berners-Lee created HTML and the browser and server software. 2 Figure 1. ENQUIRE Proposal9 In late 1991, Berners-Lee first publicly defined HTML on the Internet. At the time, HTML contained only 18 elements. He stated that HTML was an application of the Standard Generalized Markup Language (SGML). Several concepts were borrowed from SGML such as element types formatting with a start tag, content, and an end tag, element attributes, character references, and comments. Figure 2a. Sample SGML markup 10 Figure 2b. Sample HTML markup 12 3 SOFTWARE ARCHITECTURES Because of the widespread usage of HTML, an IETF working group was formed to develop IETF specifications for HTML. In 1995, HTML 2.0 was released as the suggested standard for future HTML uses. The HTML 2.0 specification formalized HTML capabilities and introduced new features like form-based file upload, tables, client-side image maps, and internationalization. 3 Figure 3. Sample of HTML 2.0 13 HTML 3.0 was drafted and proposed in April 1995. The HTML 3.0 proposal expired without approval from the IETF. The increase in web browser development contributed to the failure of the HTML 3.0 proposal. 22 Since the IETF working group for HTML 2.0 closed in September 1996, HTML 3.2 was released by W3C in January 1997. Features that were added in HTML 3.2 specification were tables, applets, and text flow around images. Mathematical formulas were purposely not included in this version. 23 Figure 4. Sample of HTML 3.2 11 4 SOFTWARE ARCHITECTURES In December 1997, HTML 4.0 was released as a W3C recommendation. HTML 4.0 featured more multimedia options, scripting languages, style sheets, and documents were made to be more accessible to users with disabilities. This version began specifying <!DOCTYPE> declarations that were to be included at the beginning of each HTML document. This declaration is an instruction for the web browser indicating which version of HTML the page is written in. The three document type definitions were strict, transitional, and frameset. Users were recommended to use the Strict DTD whenever possible since the Strict DTD excluded presentation attributes and elements, but users could use the Transitional DTD when support for the presentation attributes and elements were required. The Frameset DTD was similar to the Transitional DTD except that the “FRAMESET” element was used in place of the “BODY” element. 24 The subversion HTML 4.01 was released in 1999. Some errata were changes to the DTDs, new style sheets, document scripts, and global structure of a HTML document. 25 Figure 5. Sample of HTML 4.01 In 2004, the Web Hypertext Application Technology Working Group (WHATWG) began developing HTML5. With the collaboration with the W3C, HTML5 was completed in 2008. 1 HTML5 was designed to replace HTML4, XHTML, and the HTML Dom Level 2. New features included new elements, new attributes, full CSS4 support, video and audio, 2D/3D graphics, local storage, local SQL database, and web applications. HTML5 is also cross-platform. Figure 6. HTML5 is designed to be supported on PCs, tablets, and smartphones 16 5 SOFTWARE ARCHITECTURES Famous system implementations Since every browser vendor provides HTML5 support and HTML5 has become the only truly cross-platform application environment, there are billions of examples of HTML. Open source blogging tools, such as WordPress, are an example of HTML implementations. In conjunction with CSS and PHP, WordPress themes and posts use these languages to change the aesthetics and functionality of a WordPress website. In 2011, Facebook had two focuses - HTML5 and mobile. Facebook’s Chief Technology Officer, Bret Taylor, saw the two focuses as very interrelated concepts. Taylor claimed HTML5 as the future of mobile. Since it was ideal to keep Facebook consistent on desktop site and on mobile, Facebook took after the HTML5 trend. There were even internal teams devoted to creating HTML5 Facebook games! 5 RuneScape, one of the most famous massively multiplayer online role-playing games, developed an HTML5 version in 2012. Originally written in an interpreted domain-specific scripting language, the makers of Runescape transitioned the game to have the ability to be played on “your favourite tablets, platforms and even smart TVs.” The decade-old browser game experimented with the HTML5 graphics engine that provided impressive visuals. 6 Figure 7. RuneScape HTML5 comparison 20 How does this system fit into a larger application architecture? Since the beginning of software development, the application’s function and experience versus the application’s distribution and access have been on opposite ends of the software development spectrum. The perfect software application model would maximize both of these two features. As shown in the figure below, multiple generations of different software architecture have passed as the ideal software architecture generation is in the near future. Mainframe marked the beginning of the software architecture evolution with the server, keyboard, and monochrome screen. Mainframe had a low user experience but a high application access. In the second generation, the Client/Server model increased the user experience significantly by moving all of the application logic to the client side but decreased application distribution. By the third generation, instant access and an update of a server-driven application with better user interfaces was granted by the Web. 6 SOFTWARE ARCHITECTURES In the current generation, the Mobile Apps model acted as the successor to the Client/Server model. This model is successful for games and other consumer applications. Although this model is a more efficient platform for users to use their applications, limitations such as platform dependency were still inherited by its predecessor. Therefore, some aspects of the Mobile Apps model still lose to the Web model. While the current mobile apps market trend is taking up society’s attention, the biggest Internet providers are competing to master HTML5. In the present, the latest version of every browser has complete HTML5 support. Even though the number of devices being introduced is always increasing, HTML5 has been proven to be the cross-platform application environment. If executed correctly, a HTML5 application code can be distributed on the Web or by mobile apps. As the impending fifth generation of the software architecture evolution, HTML5 will provide a rich user experience and high instant deployment. 14 Figure 8. Software Architecture Evolution 14 Also as shown in the figure below, HTML fits in the SGML architecture. SGML and XML are considered to be meta-languages - languages that are used to mark up languages. XML is a more restricted subset of SGML.
Load more

Recommended publications
  • The Implementation of Large Video File Upload System Based on the HTML5 API and Ajax Yungeng Xu , Sanxing
    Joint International Mechanical, Electronic and Information Technology Conference (JIMET 2015) The Implementation of Large Video File Upload System Based on the HTML5 API and Ajax Yungeng Xu1, a, Sanxing Cao2, b 1 Department of Science and Engineering, Communication University of China, Beijing 2 New Media Institute, Communication University of China, Beijing a b [email protected], [email protected] Keywords: HTML5; File upload; Shell; XMLHttpRequest Abstract. The function of upload file is an important web page designs. Traditional file upload function for file upload function by HTML form and $_FILES system function, has the advantages of convenience, can cope with a relatively small file upload. The traditional HTML way has been difficult to meet the upload of the oversized file. Service not only to open a link waiting for this file is uploaded, but also to allocate the same size of memory to save this file. In the case of large concurrency may cause a great pressure on the server. This article is the use of HTML5 File API to upload video files in the original form on the basis of form, use the function of slice inside the HTML5 file API for the split file upload, to achieve the result of no refresh upload files. Have a valid practical significance. Introduction With the development of web technology, watch videos on the website has become an important forms of entertainment in the people's daily life. Internet video give people a great deal of freedom to choose the way of entertainment, not limited to the live TV mode. People can watch the video on the webpage.
    [Show full text]
  • Sessionstorage
    Offline First HTML5 technologies for a faster, smarter, more engaging web © 2014 John Allsopp, Web Directions draft 1 intro-1 Offline Apps with HTML5 What if I told you that you don’t have to be online to use the Web? There’s a general (and understandable) belief by many developers, not to mention most users, that websites and web applications have a very serious limitation – they can only be used when the browser has a web connection. Indeed, this is routinely cited as one of the real advantages of so-called native apps over the Web. As counter-intuitive as it sounds, in almost every modern browser on any device (including IE10 and up), it’s no longer the case that users need to be connected to the Web to use our websites and applications, provided we developers do a little extra work to make our site or application persist when a browser is offline. This opens up a whole range of opportunities, leveling the field with native apps that can be installed on the user’s phone, tablet, laptop or desktop computer, or indeed any other device capable of running apps. But there are many more benefits to offline technologies than simply allowing websites and apps to work offline, as we’ll soon discover. Offline First Recently the team behind the “Hoodie” framework published “Offline first”1 a new way of thinking about developing for the Web. They observe that even in the developed world, mobile bandwidth and connectivity, increasingly the primary way in which people connect to the Web, are not always guaranteed to be there, or be reliable, and, they state: “We can’t keep building apps with the desktop mindset of permanent, fast connectivity, where a temporary disconnection or slow service is regarded as a problem and communicated as an error.” And when we think of offline and online, we typically only focus on the client, but servers go offline as well, both for routine maintenance, or in times of crisis, or under heavy stress.
    [Show full text]
  • Advanced HTML5 and CSS3 Specialist Exam 1D0-620
    Advanced HTML5 And CSS3 Specialist Exam 1D0-620 Domain 1: HTML5 Essentials 1.1 Consider HTML5 development skills you can apply to both traditional and non-traditional delivery platforms, including mobile apps. 1.2 Identify the Web development trifecta and explain its significance. 1.3 Explain the evolution of HTML and its relevance to modern design techniques. 1.4 Create and deploy HTML5 structure tags. 1.5 Perform HTML5 code validation, which includes explaining the practical value of code validation and listing the steps to validate HTML5 code. 1.6 Explain the importance of universal markup creation. 1.7 Apply the HTML5 <video> element appropriately. 1.8 Use the HTML5 <audio> element. 1.9 Define common elements of HTML5 application programming interfaces (APIs). Domain 2: Using Cascading Style Sheets (CSS) Technology 2.1 Explain the function and purpose of the Cascading Style Sheets (CSS) technology. 2.2 Explain the importance of using style guides when designing sites and documents. 2.3 Define common CSS terms and syntax. 2.4 Apply CSS styles to format pages. 2.5 Develop and apply page layouts with CSS. 2.6 Use CSS to position content and apply document flow. 2.7 Define common CSS positioning schemes. 2.8 Use the CSS Box Model. Domain 3: Introduction to CSS Version 3 (CSS3) 3.1 List the features added to CSS functionality in CSS version 3 (CSS3). 3.2 Apply common CSS3 properties and selectors. 3.3 Apply backgrounds and borders with CSS3. 3.4 Apply fonts and text effects with CSS3. Certification Partners, LLC - 1.800.228.1027 - 1.602.275.7700 www.CIWcertified.com - www.Certification-Partners.com Domain 4: Using Advanced CSS3 Techniques 4.1 Apply 2D and 3D transformations with CSS3.
    [Show full text]
  • A Webrtc Based Platform for Synchronous Online Collaboration and Screen Casting
    A WEBRTC BASED PLATFORM FOR SYNCHRONOUS ONLINE COLLABORATION AND SCREEN CASTING by NIKOLAOS PINIKAS Master in Informatics and Multimedia, Department of Informatics Engineering, School of Applied Technology, Technological Educational Institute of Crete, 2016 A THESIS submitted in partial fulfillment of the requirements for the degree of MASTER OF SCIENCE IN INFORMATICS & MULTIMEDIA DEPARTMENT OF INFORMATICS ENGINEERING SCHOOL OF APPLIED TECHNOLOGY TECHNOLOGICAL EDUCATIONAL INSTITUTE OF CRETE 2016 Approved by: Assistant Professor Dr. Spyros Panagiotakis Copyright NIKOLAOS PINIKAS 2 0 16 This work is licensed under the Creative Commons Attribution 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/. All included code is licensed under the MIT License. 2 “WebRTC is not a standard. It’s a movement.” -Tsahi Levent-Levi 3 Abstract WebRTC is a project that was released by Google in 2011 to allow browser- to-browser communication. It includes voice, video and data without the use of plugins. The mission of WebRTC according to Google is to enable rich, high quality, RTC applications to be developed for the browser, mobile platforms, and Internet of Things (IoT) devices, and allow them all to communicate via a common set of protocols. In this thesis we employ the capabilities of the WebRTC APIs to implement a platform for synchronous online collaboration, screen casting and simultaneous multimedia communication by utilizing the WebRTC data and media streams. Collaborative software is defined as “a software that supports intentional group processes”. Collaborative solutions include a wide range of tools. On the Web these tools can be part of what is known as a “Client-Portal” and can include discussions, white boards, media and file exchanging etc.
    [Show full text]
  • Using HTML5 Apis
    7Lesson 7: Using HTML5 APIs Objectives By the end of this lesson, you will be able to: 7.1: Define the Document Object Model (DOM). 7.2: Define application programming interface (API), and list the common HTML5 APIs. 7.3: Use the HTML5 Canvas API for advanced techniques. 7.4: Develop offline Web applications using the HTML5 AppCache API. 7.5: Use the HTML5 Geolocation API to obtain geographic information about a user. 7.6: Create drag-and-drop Web pages using the HTML5 Drag-and-Drop API. 7.7: Use the HTML5 File API to interact with files. 7.8: Use the HTML5 History API to manipulate a browser's history. 7.9: Retrieve and manipulate HTML5 data using XMLHttpRequest and jQuery. 7-2 Advanced HTML5 and CSS3 Specialist Pre-Assessment Questions 1. Which HTML5 API allows a Web program to run locally on a client system? a. Canvas b. AppCache c. Drag-and-Drop d. Geolocation 2. Which of the following is a function of the HTML5 File API? a. Create preview thumbnail images during image uploads b. Locate the position of the client system c. Move files using a drop zone d. Validate HTML5 code 3. What is the function of the HTML5 History API? © 2014 Certification Partners, LLC. — All Rights Reserved. Version 1.0 Lesson 7: Using HTML5 APIs 7-3 Introduction to HTML5 APIs As mentioned in an earlier lesson, experts in Web technology expect that the future of Web development will rely heavily on HTML5 APIs. HTML5 APIs consist of HTML5, CSS and JavaScript — the Web development trifecta.
    [Show full text]
  • An Extensible Framework for Creating Personal Archives of Web Resources Requiring Authentication
    Old Dominion University ODU Digital Commons Computer Science Theses & Dissertations Computer Science Summer 2012 An Extensible Framework for Creating Personal Archives of Web Resources Requiring Authentication Matthew Ryan Kelly Old Dominion University Follow this and additional works at: https://digitalcommons.odu.edu/computerscience_etds Part of the Computer Sciences Commons, and the Digital Communications and Networking Commons Recommended Citation Kelly, Matthew R.. "An Extensible Framework for Creating Personal Archives of Web Resources Requiring Authentication" (2012). Master of Science (MS), thesis, Computer Science, Old Dominion University, DOI: 10.25777/x6x6-4x93 https://digitalcommons.odu.edu/computerscience_etds/6 This Thesis is brought to you for free and open access by the Computer Science at ODU Digital Commons. It has been accepted for inclusion in Computer Science Theses & Dissertations by an authorized administrator of ODU Digital Commons. For more information, please contact [email protected]. AN EXTENSIBLE FRAMEWORK FOR CREATING PERSONAL ARCHIVES OF WEB RESOURCES REQUIRING AUTHENTICATION by Matthew Ryan Kelly B.S. June 2006, University of Florida A Thesis Submitted to the Faculty of Old Dominion University in Partial Fulfillment of the Requirements for the Degree of MASTER OF SCIENCE COMPUTER SCIENCE OLD DOMINION UNIVERSITY August 2012 Approved by: Michele C. Weigle (Director) Michael L. Nelson (Member) Yaohang Li (Member) ABSTRACT AN EXTENSIBLE FRAMEWORK FOR CREATING PERSONAL ARCHIVES OF WEB RESOURCES REQUIRING AUTHENTICATION Matthew Ryan Kelly Old Dominion University, 2012 Director: Dr. Michele C. Weigle The key factors for the success of the World Wide Web are its large size and the lack of a centralized control over its contents. In recent years, many advances have been made in preserving web content but much of this content (namely, social media content) was not archived, or still to this day is not being archived, for various reasons.
    [Show full text]
  • Eriksson Jorge Melicio Monteiro Cloudmed
    Departamento de Universidade de Aveiro Electr´onica,Telecomunica¸c~oese Inform´atica, 2012 Eriksson Jorge CloudMed { Plataforma de Comunica¸c~oespara Melicio Monteiro Medicina CloudMed - Open Communications in Medicine Departamento de Universidade de Aveiro Electr´onica,Telecomunica¸c~oese Inform´atica, 2012 Eriksson Jorge CloudMed { Plataforma de Comunica¸c~oespara Melicio Monteiro Medicina CloudMed - Open Communications in Medicine \It has become appallingly obvious that our technology has exceeded our humanity." | Albert Einstein Departamento de Universidade de Aveiro Electr´onica,Telecomunica¸c~oese Inform´atica, 2012 Eriksson Jorge CloudMed { Plataforma de Comunica¸c~oespara Melicio Monteiro Medicina CloudMed - Open Communications in Medicine Disserta¸c~aoapresentada `aUniversidade de Aveiro para cumprimento dos requesitos necess´arios`aobten¸c~aodo grau de Mestre em Engenharia de Computadores e Telem´atica,realizada sob a orienta¸c~ao cient´ıficado Doutor Carlos Manuel Azevedo Costa, Professor do Departamento Eletr´onicae Telecomunica¸c~oese Inform´aticada Universidade de Aveiro. o j´uri/ the jury presidente / president Prof. Dr. Antonio Manuel Melo de Sousa Pereira Professor Catedr´aticodo Departamento de Electr´onica,Telecomunica¸c~oes e In- form´aticada Universidade de Aveiro vogais / examiners committee Prof. Dr. Carlos Manuel Azevedo Costa Professor Auxiliar do Departamento de Electr´onica, Telecomunica¸c~oes e In- form´aticada Universidade de Aveiro Prof. Dr. Rui Pedro Sanches de Castro Lopes Professor Coordenador do Departamento de Inform´aticae Comunica¸c~oesdo Insti- tuto Polit´ecnicode Bragan¸ca agradecimentos / acknowledgements Quero agradecer ao meu orientador, Professor Doutor Carlos Manuel Azevedo Costa, pelo interesse, apoio, incentivo e simpatia mostrados ao longo de todo o trabalho.
    [Show full text]
  • A Legacy System Migration and Software Evolution
    Die approbierte Originalversion dieser Diplom-/ Masterarbeit ist in der Hauptbibliothek der Tech- nischen Universität Wien aufgestellt und zugänglich. http://www.ub.tuwien.ac.at The approved original version of this diploma or master thesis is available at the main library of the Vienna University of Technology. http://www.ub.tuwien.ac.at/eng A Legacy System Migration and Software Evolution DIPLOMARBEIT zur Erlangung des akademischen Grades Diplom-Ingenieur im Rahmen des Studiums Software Engineering & Internet Computing eingereicht von Andreas Fürnweger Matrikelnummer 0626472 an der Fakultät für Informatik der Technischen Universität Wien Betreuung: Ao.Univ.Prof. DI Mag. Dr. Stefan Biffl Mitwirkung: Dr. DI Mag. MA Martin Auer Wien, 20.04.2017 (Unterschrift Verfasser) (Unterschrift Betreuung) Technische Universität Wien A-1040 Wien Karlsplatz 13 Tel. +43-1-58801-0 www.tuwien.ac.at Erklärung zur Verfassung der Arbeit Andreas Fürnweger Industriestraße 135/1/29, 1220 Wien Hiermit erkläre ich, dass ich diese Arbeit selbständig verfasst habe, dass ich die verwende- ten Quellen und Hilfsmittel vollständig angegeben habe und dass ich die Stellen der Arbeit - einschließlich Tabellen, Karten und Abbildungen -, die anderen Werken oder dem Internet im Wortlaut oder dem Sinn nach entnommen sind, auf jeden Fall unter Angabe der Quelle als Ent- lehnung kenntlich gemacht habe. (Ort, Datum) (Unterschrift Verfasser) i Abstract Software ages. Maintenance costs tend to increase, and modifications to an application make future adaptions more difficult. As the surrounding software components are updated and mod- ernized, static software becomes even more outdated relative to them. As soon as a system notably resists modification and evolution, it becomes legacy software and the stakeholders, such as architects and managers, have to decide whether to preserve or redesign the system.
    [Show full text]
  • HTML5 - Developer Guides | MDN
    HTML5 - Developer guides | MDN https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 Technologies References & Guides Feedback Sign in HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5. Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function. Semantics: allowing you to describe more precisely what your content is. Connectivity: allowing you to communicate with the server in new and innovative ways. Offline and storage: allowing webpages to store data on the client-side locally and operate offline more efficiently. Multimedia: making video and audio first-class citizens in the Open Web. 2D/3D graphics and effects: allowing a much more diverse range of presentation options. Performance and integration: providing greater speed optimization and better usage of computer hardware. Device access: allowing for the usage of various input and output devices. Styling: letting authors write more sophisticated themes. 1 of 7 24/10/2018, 12:15 HTML5 - Developer guides | MDN https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 SEMANTICS Sections and outlines in HTML5 A look at the new outlining and sectioning elements in HTML5: <section>, <article>, <nav>, <header>, <footer> and <aside>. Using HTML5 audio and video The <audio> and <video> elements embed and allow the manipulation of new multimedia content.
    [Show full text]
  • Procedure to Request a JSON File Or an XML File in the Local Host Using AJAX with Jquery Cross Domain File Request: Same Domain
    Procedure to request a JSON file or an XML file in the local host Using AJAX with JQuery Cross Domain File Request: Access Across Domains For security reasons, modern browsers do not allow access across domains. This means that both the web page and the XML file it tries to load, must be located on the same server. The examples on W3Schools all open XML files located on the W3Schools domain. If you want to use the example above on one of your own web pages, the XML files you load must be located on your own server. Same Domain File Request: With Google Chrome: Need a local Web Server to request a file using AJAX with JQuery on the local host For example, in order to host these pages locally, MAMP’s local server is set up and used. Using the local server is necessary because when introducing JQuery’s getJson function, you will encounter cross origin domain requests which are not allowed when not on a server. With Firefox: No need to set a local Web Server to request a file using AJAX with JQuery on the local host /*use the JQuery function $.getJSON() to simply grab a JSON data file*/ function getJSON(){ $.getJSON("YelpOneBusinessJasonData.json", function(result){ jsondata = result; processJson(jsondata); }); } /*set our corresponding html via our json objects*/ function processJson(data){ //Set name first var name_html = document.getElementById('name'); name_html.innerText = data.name; … //Create our services and features table replacement_html = "<table>"; for(i in data.attributes){ replacement_html += "<tr>" if(typeof data.attributes[i]
    [Show full text]
  • Preloading and DOM DOM Table Object and JSON File Upload
    Preloading and DOM DOM Table Object and JSON File upload, HTML5 File APIs Web workers web sockets and node.js jQuery, AngularJS and other libraries CMS systems Image rollover and pre-loading • An image rollover should use pre-loaded images, since viewing images that has to be downloaded take time <script> var image1, image2; function init(){ if(document.images){ image1 = new Image(); // Preload an image image1.src = "images/image1.jpg"; image2 = new Image(); // Preload a second image image2.src = "images/image2.png"; } } window.onload=init; rollover.html </script> <body> <h3>Rollover with mouse events</h3> <p>Move your mouse over the image to see the result</p> <a href="#" onMouseOver="document.rolloverImage.src=image2.src;" onMouseOut="document.rolloverImage.src=image1.src;"> <img name="rolloverImage" src="images/image1.jpg" /> </a> </body> Animation in the DOM • You can use JavaScript to create animations and effects • DOM elements (<img />, <div> or any other HTML element) can be moved around the page • The timer functions are used to create many effects • Together with certain style.* attributes as position • Other positions than relative are: static (default), absolute, fixed, inherit // This function calls function after duration milliseconds from now. var timeoutVar = setTimeout(function, duration); // This function calls function repeatedly every duration milliseconds. var timeoutVar = setInterval(function, duration); // This function clears any timer set by the functions above. clearTimeout(timeoutVar); // declare that the object have a relative position myObj.style.position= 'relative'; // Set distance from left edge of the screen. myObject.style.left = distance in pixels or points; animate.html // Set distance from top edge of the screen.
    [Show full text]
  • Browser to Browser Media Streaming with HTML5
    Aalto University School of Science Degree Programme of Computer Science and Engineering Antony J.R. Meyn Browser to Browser Media Streaming with HTML5 Master's Thesis Espoo, June 30, 2012 Supervisors: Professor Jukka K. Nurminen, Aalto University Professor Christian W. Probst, Technical University of Den- mark Aalto University School of Science ABSTRACT OF Degree Programme of Computer Science and Engineering MASTER'S THESIS Author: Antony J.R. Meyn Title: Browser to Browser Media Streaming with HTML5 Date: June 30, 2012 Pages: 88 Professorship: Data Communication Software Code: T-110 Supervisors: Professor Jukka K. Nurminen Professor Christian W. Probst Video on demand services generate one of the largest portions of Internet traffic every day and their use is constantly increasing. Scaling up the infrastructure to meet this demand with the current model of Internet video delivery over HTTP, is proving to be very costly for service providers. An alternative model for video content delivery is the need of the hour to meet this challenge. Peer-to-peer streaming is a viable alternative model that is highly scalable and can meet this increasing demand. The emerging HTML5 standard intro- duces APIs that give Web browsers the ability to communicate directly with each other in real-time. This also allows web browsers to behave as Peer-to-peer nodes. In this thesis, we utilize these new APIs to develop a Video on demand service within the Web browser. The goal of this being, to determine the feasibility of such a solution and evaluate the usage of these APIs. We hope to aid the HTML standardization process with our findings.
    [Show full text]