HTML5 Introduction, c/S and b/s architecture

HTML5 Introduction:

HTML5 is the World Wide Web core language, the standard Universal markup language under the application of Hypertext Markup Language of the fifth version, so called HTML5. Before the HTML4 will not bring the version of the unified known as HTML, but because the fifth version of the HTML changes in the larger, and the HTML4 and the previous version there is a big difference, in this version of the new features are constantly introduced and made nearly hundred changes, So this version of HTML is only unified known as HTML5.

HTML5 's The first formal draft was announced on January 22, 2008, to October 29, 2014 The World Wide Web Consortium announced the completion of the standard specification. One of the biggest advantages of HTML5 is the development of mobile devices, which can be debugged and modified directly on the Web. The original application developer may have to spend a lot of effort to achieve the HTML5 effect, repeatedly coding, debugging and running, which is the first problem to solve. So there are also many mobile magazine clients that are based on the HTML5 standard, and developers can easily debug the changes.

The HTML5 is designed to support multimedia on mobile devices. New grammatical features are introduced to support this, such as video, audio, and canvas tags. HTML5 also introduces new features that can really change the way users interact with documents, including:

· New analytic rules enhance flexibility

· New properties

· Obsolete or redundant attributes are eliminated

· A drag-and-drop function between a HTML5 document and another document

· Offline editing

· Enhancement of information delivery

· Detailed parsing rules

· Multi-purpose Internet Mail Extensions (MIME) and protocol handler registration

· Common Criteria for storing data in SQL database (Web SQL)

HTML5 characteristics

Semantic characteristics (class:semantic)

page better meaning and structure. Richer labels will follow the rdfa Span style= "font-size:13px;font-family: ' The song body '; color: #136EC2; Background-color: #ffffff;" > mini-format and so on, to build a program, Data that is more valuable to the user drive web.

Local Storage features (Class:offline & STORAGE)

Web pages based on the HTML5 development APP with shorter start-up times and faster networking speeds, these are all thanks to the HTML5 APP Cache and local storage capabilities. Indexed DB (one of the most important technologies for HTML5 local storage) and API documentation.

Device compatibility features (Class:device ACCESS)

from geolocation since the API documentation for the feature has been exposed, HTML5 has provided more functional optimization options for Web application developers, bringing more experience features to the advantage. HTML5 provides unprecedented access to data and applications to open interfaces. Allows external applications to directly connect to the data inside the browser, such as video and audio directly linked to the microphones and camera.

Connection characteristics (class:connectivity)

More efficient Connection productivity enables page-based live chat, faster web game experience, and more optimized online communication. HTML5 has more efficient server push technology, Server-sent event and WebSockets are among the two features that can help us implement the server's ability to "push" data to the client.

Web page Multimedia characteristics (Class:multimedia)

Support the web-side audio, video and other multimedia functions, and the site's own apps, cameras, audio and video features complement each other.

Three-dimensional, graphic and special effects features (class:3d, graphics & effects)

Based on the 3D capabilities of SVG, Canvas, WebGL and CSS3, users will marvel at the amazing visuals that appear in the browser.

Performance and integration features (Class:performance & Integration)

no user will ever wait for your LOADING--HTML5 will pass XMLHttpRequest 2 technologies that address previous cross-domain issues and help your Web applications and websites work faster in a diverse environment.

CSS3 characteristics (CLASS:CSS3)

without sacrificing performance and semantic structure, CSS3 offers more style and stronger effects. In addition, the Web's Open font format (WOFF) provides greater flexibility and control than previous Web typography.

Program Architecture Issues:

now the two most common program architecture is the C/s and B + structure, C/S is the Client/server architecture, that is, the client/server architecture. Is familiar with the software system architecture, through the rational allocation of tasks to the client side and server side, reduce the communication overhead of the system, need to install the client to be able to manage operations. Client and server side of the program is different, the user's operations mainly in the client, the server is mainly to provide data management, data sharing, data and system maintenance and concurrency control, etc., the client program mainly to complete the user's specific business.

so c/S architecture of the program to reduce the pressure on the server, and the client is installed on the user's local computer, calling some local hardware devices is more convenient, suitable for large-scale games, audio software, various tools software program architecture method.

But the C/S architecture also has shortcomings, upgrade updates and maintenance is more troublesome, the system upgrade, all the clients need to upgrade, and no client can not use any function, the device needs to install, update the client.

Because of these features, data management software, online shopping, information interaction parts are not suitable for the use of C/s architecture.

c/S program architecture:

650) this.width=650; "style=" width:553px; "src=" http://note.youdao.com/yws/public/resource/ cac583441d3387c9bfd9df8694ae802e/xmlnote/office29bc6ce819cf44daa81ae7a7bf311927/3182 "/>

another b/s architecture, The browser/server (browser/server) structure is a change or an improved structure of C/s structure with the rise of internet technology. In this structure, the user interface is fully implemented by the browser. In this structure, the user interface is implemented through the browser, very few transaction logic in the front-end (Browser) implementation, but the main transaction logic on the server side (server) implementation, the formation of the so-called three-layer 3-tier structure. b/S structure is a network structure model after the rise of web, Web browser is the main application software of the client. This mode unifies the client, and the core part of the system function is centralized to the server, which simplifies the development, maintenance and use of the system.

a server installs databases such as Oracle, Sybase, Informix, or SQL Server as long as a browser (Browser), such as Chrome,firefox or Internet Explorer, is installed on the client. The browser interacts with the database through the Web server. Think that the content on the page is all downloaded from the server, the client does not have any updates this said that greatly simplifies the client computer load, reduce the system maintenance and upgrade costs and workload, reduce the total cost of users, On the browser you only need to refresh to see the latest content, do not update the client.

but b/S architecture also has the corresponding shortcomings, the game can only do web games, if it is a large-scale game browser can't stand, and the network and server can not support, because all the special effects rendering, data calculation have to be done on the server after the network sent to the browser, it is impossible to complete, so B/ s architecture is not suitable for large-scale games. b/S architecture can not be as convenient as the C/s architecture to access and invoke the user's local hardware devices, access is cumbersome. The b/S architecture concentrates the core part of the system function on the server, so the server pressure is also relatively large.

b/S program architecture:

650) this.width=650; "style=" width:553px; "src=" http://note.youdao.com/yws/public/resource/ cac583441d3387c9bfd9df8694ae802e/xmlnote/officec57af2bd3fd742bc8e11fbdc6c0ab437/3183 "/>

Mind mapping for Two program architectures:

650) this.width=650; "style=" width:553px; "src=" http://note.youdao.com/yws/public/resource/ cac583441d3387c9bfd9df8694ae802e/xmlnote/office2f7dde0800664acc903a917f21b5936f/3184 "/>

Web technology:

In web development, the three most basic technologies are: HTML5, CSS3, and JavaScript. HTML5 has been described above, is a Hypertext Markup language, it is responsible for building a page structure, which is equivalent to a skeleton, frame.

CSS3 Introduction:

CSS3 is Cascading Style Sheets ( C ascading S Tyle S heet), the use of cascading style sheets in web pages makes it possible to effectively control the layout, font, color, background and other effects of the page.

CSS3 is an upgraded version of CSS technology, and CSS3 language development is evolving towards modularity. The previous specification was too large and complex to be a module, so it was broken down into smaller modules, and more new modules were added. These modules include: Box model, List module, hyperlink mode, language module, background and border, text effect, multi-column layout, etc.

so CSS3 is responsible for the Web page and color and picture rendering effect, for each marker to add a variety of appearance on the effect, making the Web page looks more beautiful and beautiful.

Introduction to JavaScript:

JavaScript is a literal-translation scripting language, which is a dynamic type, a weak type, a prototype-based language, and a built-in support type. Its interpreter, known as the JavaScript engine, is widely used as a scripting language for clients in the browser, and is used on HTML pages to add dynamic functionality to HTML pages.

In 1995, the Brendan Eich of Netscape Company was first designed and implemented in Netscape Navigator's browser. Because Netscape is working with Sun, Netscape Management wants it to look like Java, so it's named JavaScript. But in fact its grammatical style is closer to self and scheme, and has no real direct relationship with Java.

JavaScript Features:

The JavaScript scripting language has the following characteristics:

(1) scripting language. JavaScript is an interpreted scripting language, and C, C + +, and other languages are compiled and executed, and JavaScript is interpreted on a row-by-line basis in the course of a program's operation.

(2) Object-based. JavaScript is an object-based scripting language that allows you to create objects and use existing objects.

(3) simple. The JavaScript language uses weakly typed variable types, which are not strictly required for the data types used, and are based on the Java Basic statement and Control scripting language, and its design is simple and compact.

(4) Dynamic nature. JavaScript is an event-driven scripting language that does not require a Web server to respond to user input. When you visit a webpage, the mouse clicks or moves up and down the page, and the window moves, and so on, JavaScript can respond directly to these events.

(5) Cross-platform. The JavaScript scripting language is not dependent on the operating system and requires only browser support. So a JavaScript script can be used on any machine after it is written, provided the browser on the machine supports the JavaScript scripting language, and JavaScript is now supported by most browsers.

Unlike server-side scripting languages, such as PHP and Asp,javascript are primarily run as client scripting languages on the user's browser and do not require server support. So in the early days programmers preferred JavaScript to reduce the burden on the server, while at the same time brought another problem: security.

And as the servers are strong, programmers prefer to run scripts on the server to keep them safe, but JavaScript still has the advantage of being cross-platform and easy to use. At the same time, some special features (such as Ajax) must rely on JavaScript to support the client. With the development of engines such as V8 and frameworks such as node. JS, and its event-driven and asynchronous IO features, JavaScript is gradually being used to write server-side programs.

So JavaScript is a Web page that can perform asynchronous operations on the browser and handle some of the roles that interact with the user dynamically, so that a Web page can have a dynamic effect.

A Web page of:

650) this.width=650; "style=" width:553px; "src=" http://note.youdao.com/yws/public/resource/ cac583441d3387c9bfd9df8694ae802e/xmlnote/officea21d55a934e2467f810c0e881ce63087/3185 "/>

These three technologies are the basic technologies that must be mastered in the development of web pages, and a simple metaphor is that HTML5 is equivalent to building a robot, CSS3 the robot with nice clothes or decorations, and JavaScript is giving the robot power, The robot can then make some moves, and we can shake hands, hug, play and other actions of interaction.

App development for mobile apps:

Due to the rise of the HTML5, many mobile phone applications are now using embedded Web pages or semi-embedded web pages to develop the application, so saving the instinct to save a lot of trouble. If you use native development to develop the application, not only the labor cost is high, and maintenance, upgrade is more troublesome.

Native development is also native development, if you are doing Android development, then most are written in the Java language, if you are doing IOS development, is to use objecttive C or Swift to write, these are official standards, the benefits are obvious, the use of official Provide the API, the development of the app has better performance, can achieve a variety of cool effects, better compatibility, for the user experience better.

But if you use native development of the way to develop an app, it must be the Android side development of one, IOS development one, from the development cost is a bit large, and we know that once the program has a bug, we generally only re-release a version to update, for Android is OK, But it's a nightmare for IOS that needs a lengthy review. So in order to solve this problem, the emergence of a variety of heat repair framework, but after all is not official, and inevitably there will be a learning threshold, and inevitably this kind of fix the bug of the heat repair framework itself is also a bug risk.

But if you develop an embedded HTML5 application, it's simple, you just need to wrap a shell outside. With Android, the simplest direct package of WebView processing can be regarded as a simple H5 application, the other to the Web front-end engineer is good.

The benefits of HTML5 application are also obvious, cross-platform, because only need to write a shell directly on Android and IOS, greatly reduce the development cost, and the web is real-time rendering, even if there is a bug, can be published directly, but also solve the problem of hot fix.

However, applications developed using inline HTML5 are not perfect, and the performance experience is not as good as native development applications, iOS is relatively better, but the Android version of the fragmentation of the more serious, So HTML5 application on Android on the physical examination compared to the native development of Android application performance experience is significantly different, so now is the original combination of HTML5 to develop the majority of apps, of course, any application development will have to see the application of the use of the scene to choose the development model, Requirements for the complex layout of the use of HTML5 development, requires the full use of equipment features suitable for the use of native development.

How the Web page is parsed on the browser:

When we open a Web page, we just need to enter a URL in the browser is the domain name, and then enter the site by the page is displayed. Looks very simple actually this process has several steps, first the domain name must pass through the DNS resolution the server's IP, then the browser can request the server through the HTTP protocol, but the underlying network connection uses the TCP/IP protocol to maintain the network connection state, HTTP is just a Hypertext Transfer protocol on the application layer.

After the connection with the server, the browser first downloaded from the server is the HTML code, the browser will parse the markup code to form the structure of the Web page, in the process of parsing will download the page footage and Js&css code, the general user computer will have a local cache, Some footage audio files are cached in the local cache, and only footage that is not locally cached will go to the server to download, easing server and network stress.

Once the page is fully loaded, the user's actions on the Web page are submitted to the server for processing, and the server is processed before returning the results to the browser. So b/S structure of the program, users only need to network and a browser can use different features of the Web page, as long as the F5 refresh the page can see the latest content, the requirements of the client is not high, so many data interactive procedures are gradually adopted B/s architecture.

Page parsing:

650) this.width=650; "style=" width:553px; "src=" http://note.youdao.com/yws/public/resource/ cac583441d3387c9bfd9df8694ae802e/xmlnote/office819dce4805ed4dffadf01d34165cbb1f/3186 "/>

OSI Network Seven layer protocol model:

650) this.width=650; "style=" width:553px; "src=" http://note.youdao.com/yws/public/resource/ cac583441d3387c9bfd9df8694ae802e/xmlnote/office53ecbdc72e5e4788a38580187069e155/3187 "/>

The above talk about C/s and b/s structure, we know whether the C/s or b/s architecture are not perfect, are different and advantages and disadvantages, c/s embedded b/s combination of the same structure, so that there is no best architectural model, only the most suitable architecture mode.

This article is from the "zero" blog, make sure to keep this source http://zero01.blog.51cto.com/12831981/1977484

HTML5 Introduction, c/S and b/s architecture