Study Notes on the road to Web Front-end design practices (1)

Start today and study the front-end knowledge carefully ~~~ Come on ~~~

 

Chapter 1 Web Front-end development knowledge

1.1 Web Overview

1.1.1 W3C

W3C is the abbreviation of World Wide Web Consortium, that is, the World Wide Web alliance, also known as W3C Council, its official website is: http://www.w3.org. It was established to solve the incompatibility between different platforms, technologies and developers in Web applications and ensure the complete circulation of information, at the same time, a series of standards are developed to urge Web application developers and content providers to comply with this standard. Web standards are not a standard, but a series of technical standards. All Web should be composed of three parts: structure, performance, and behavior. Therefore, when doing some architecture, it is often emphasized that "structure and performance are separated", which is also the first principle that front-end developers follow. In such a structured Web page, W3C also puts forward the following corresponding technical standards.

1. Structure standards

HTML/XHTML: HTML is one of the foundations of the Web. Based on HTML, the Web begins to show a variety of pages, containing a variety of information: text, graphics, and video. XHTML is an extension of HTML 4.01, in which XML semantic functions can be used.

XML: XML, as the first important cornerstone of the next generation of Web, provides powerful functions for distributed and heterogeneous data exchange, and separates data from the performance of books. At the same time, in terms of data itself, data values and semantics are also properly separated. The emergence of XML provides a public basis for programs to automatically process Web data and information, as well as Web services (WSDL, SOAP, and UDDI specifications.

2. Performance Criteria

CSS standards are designed to replace HTML table layout, frames, and other languages. The combination of pure CSS layout and structured XHTML helps designers to separate the appearance and structure, making site access and maintenance easier.

3. Behavior standards

DOM is the abbreviation of Document Object Model. According to W3C DOM specifications, DOM is a standard programming interface for processing Extensible Language (XML), allowing you to access other standard components on the page. Because it does not depend on any programming language or web Description Language, it provides a standard and independent interface to effectively process HTML and XML data.

ECMASCript is the standard scripting language (JavaScript) specified by ECMA (European Computer Manufacturers Association ). The emergence of JavaScript makes the relationship between information and users not only display and browsing, but also implements a real-time, dynamic, and interactive expression capability, this allows CGI-Based Static HTML pages to be replaced by Web pages that provide dynamic real-time information and reflect customer operations.

1.1.2 mature client Technology

1. Java and script

In 1995, Java came out, and its platform independence opened a shortcut for developers to develop dynamic applications in browsers. In 1996, Microsoft designed a well-known language, VBScript. The birth and prosperity of the script technology represented by JavaScript have had a profound impact on the development of the Web industry.

Script technology gives HTML page interaction capabilities, while the birth of CSS and DHTML technology makes the page cool, cool, and more dynamic.

2. Style and multimedia

The development of CSS makes the page more beautiful, but people do not meet this requirement. Instead, they integrate more complex multimedia applications such as audio and video into HTML pages.

3. XML Development

The HTML language focuses on the performance and implementation of information, and XML cares about the format and data content of information itself. This is a great leap for information presentation technology.

4. The birth of Ajax

With the development of JavaScript, CSS, XML, and other technologies, and the pursuit of a higher user experience, the integration of these technologies is defined as Ajax. After Ajax technology is widely used, people find that problems such as browser compatibility and script running efficiency have become the biggest obstacle to Ajax development. Therefore, a series of pure script technical frameworks emerged, such: prototype, JQuery, ExtJS, etc.

1.1.3 mature server technology

1. CGI is the leader

The earliest Web Server simply responded to the HTTP request sent by the browser and returned the HTML file stored on the server to the browser. The first technology that enables the server to dynamically generate HTML pages based on the actual running conditions is CGI (Common Gateway Interface) technology.

Early CGI programs were compiled by C, C ++, Pascal, and other languages. to simplify the modification process of CGI programs, people began to explore feasible ways to implement CGI programs using scripting.

2. Web Programming

The Web Server programming language starts with PHP. PHP combines HTML and PHP commands into a complete Server dynamic page, providing Web developers with convenient and convenient development methods.

3. enterprise-level development platform

The improvement of Web server development technology makes it possible to develop complex Web applications. To provide users with more reliable and complete information services, the two most important enterprise-level development platforms are Java EE and. NET.

1.2 technologies required for front-end development

1. Industry Standards

First, we must understand a series of W3C standards. You need to focus on HTML, XHTML, XML, CSS, and JavaScript.

Second, familiarize yourself with some standards based on the camp, such as Java EE standards or. NET standards.

2. Language

In addition to W3C descriptive languages such as HTML, CSS, and XML, it also includes the client scripting language JavaScript. Another language is also very important. It is the basic language for developing Adobe RIA. Flex, Flash, and AIR use it as the scripting language.

3. Visual Design

Visual Design is indispensable for both static Web pages and dazzling Flash animations or game images. In the field of software systems, visual design is generally called the User-Interface design. If you only understand the UI, it refers to the interface design, that is, the effect seen on the web page.

Visual designers work to beautify controls and add some colors to them. Web visual designers need to make the content of the information architecture friendly and beautiful to the browser or PS work.

Therefore, while learning about color design, you also need to understand the Web typographical art and Interactive art. For visual design of Web applications, you must understand not only painting tools such as Photoshop, but also some methods for designing Web applications, such as layout, layout, color, Font, form, and other design methods, can quickly implement the elements in the PSD file or the special effects of PNG images through HTML, CSS and other code.

4. Interaction Design

Generally, UE users emphasize the concept of availability ., Regard availability as the highest level of product design. Software is the interaction between people and machines, which is the "Capability" of software ". Interaction Design is embodied in the design of a small link, and the process of a large operation process should be paid attention.

5. Presentation Layer Logic

Many front-end developers do not pay attention to this part. In fact, the presentation layer serves as a bridge between the page and the backend program. It helps the maintainability of applications.

6. Compatibility Technology

The problems caused by compatibility have attracted more and more attention in recent years. Therefore, as a front-end developer, you must master the features of the following mainstream browsers:

• Mozilla Firefox
• Chrome
• Microsoft Internet Explorer
• Opera
• Apple Safari

While Mastering these browser features, you also need to master some common Hack technologies to solve some compatibility problems.

7. Development Service

Front-end personnel should have a better understanding of Web application APIs, that is, open services.

8. SEO

SEO (Search Engine Optimization) Search Engine Optimization is an Internet-based marketing method. Its main function is to enhance the website's exposure in Search engines, thereby increasing sales opportunities or information sharing. The most intuitive response is the ranking of website information in search engines. SEO is a technology that follows the scientific and comprehensive theoretical mechanism of search engines, rationally plan and deploy the website structure, webpage text language, and interaction diplomacy strategies between sites to discover the maximum potential of the website. To do a good job in SEO, in addition to SEO technology itself, we also need to face W3C technical standards, use tags accurately, and design and experience well.

9. performance and security

In terms of network Security, you need to pay attention to OWASP (Open Web Application Security Project), a non-profit organization. Its website is http://www.owasp.org /. The website provides a large amount of valuable information on security visibility.

In terms of performance, developers need to master some basic principles to ensure that efficient code can be provided at the development stage.

10. Basic Quality

As a front-end developer, you also need to have some important qualities: Teamwork, communication, and correct development processes.

1.3 Common Front-end development tools

1.3.1 design tools

Some of Adobe's software is the most commonly used tool set. Some of them are described below.

• Adobe Photoshop: Graphic Design Software
• Adobe Flash: animation production software
• Adobe Fireworks: allows you to make small GIF animations.
• Adobe Dreamweaver: Quick HTML/CSS/script editing software

1.3.2 prototype tools

The product prototype design is diverse, and some common tools can be simply implemented. Of course, there are also some professional tools that can help design faster and faster.

• Adobe Flash Catalyst is a new Flash Platform product provided by Adobe. If Flash applications are not developed, it is very easy to use it for Interactive Prototype Development.
• Balsamiq Mockup is a prototype tool similar to hand-painted graffiti.
• Axure RP is a powerful prototype tool.
• The Pencil can be used as a prototype graph.

1.3.3 debugging tools

In front-end development, debugging of HTML, CSS, and JavaScript is the main purpose. In the preparation of front-end applications, Firefox should be used for development. Here, we mainly use two plug-ins to complete front-end debugging.

1. Firebug

Firebug is a five-star plug-in tool in Firefox. It integrates functions such as viewing HTML structures and styles, and real-time editing.

2. HttpWatch

HttpWatch is an old debugging tool that supports integration with IE and Firefox. It allows you to see the detailed process of page interaction and give an overview of the details of a URL request. The tool also supports report generation and analysis.

3. Yslow

Yslow is a set of web page scoring plug-ins developed by Yahoo. There are a total of 12 guidelines for use. It can be used to evaluate web page design weaknesses. Yslow is integrated with Firebug, so you must install the Firebug plug-in before using it.

4. Microsoft Expression Web SuperPreview

Expression Web SuperPreview allows developers to simulate the presentation of Web pages in different browsers to detect layout problems.

1.3.4 Auxiliary Tools

To improve Web performance, You Need To Compress scripts with style files to reduce the file size. YUI Compressor is a recommended compression tool.

When developing CSS Sprites Styles, you often need to estimate the images created in Photoshop. In this case, the CSS Sprites style generation tool can be used to quickly calculate the position of each small image.

You can use the PickColor software provided by Yahoo to retrieve colors and Use Adobe Kuler for color.

 

Not complete... ^