HTML5 Project NOTE 1: Project preparation and tool use

The company's New case, there is a need for offline application work system this piece, the goal is that the network can perform the system operation, whether online or offline, so that employees can still carry out the company's project tasks without the network, the form filling and data of the client to save, and the delivery and data communication with the server when the network is unblocked. The overall design is discussed using HTML5 's feature development and specifies that users use specific browsers.

The system contains the HTML5 form API (form), WebStorage Api,communication API (for cross-domain access), Webdatabase Api,file system API, and several parts of the offline application, Finally make Chrome's application plugin (CRX file) and publish it to customers ...

The possibility and feasibility of using HTML5 to design this off-line working system:

1, Compatibility: HTML5 is not disruptive innovation, once the browser does not support a feature of HTML5, the options for HTML5 functionality will be carried out ...

2, efficiency and User priority: HTML5 specification is based on user priority guidelines: In the face of unresolved conflicts, will put the user in the first place, followed by the page author, again is the implementation (or browser), then the norm-makers (web, WHATWG)

3, security mechanism design: Each specification is the chapter of the security mechanism

4. Separation of performance and content

5. Universal access

6, no plug-in paradigm, to provide native support

Simplified function DOCTYPE declaration simplification, by the original

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

Change to <meta charset= "Utf-8"/>

Character Set declaration simplification: <meta http-equiv= "Content-type" content= "text/html" charset= "Utf-8"/>

Simplified to: <meta charset= "Utf-8"/>

7. HTML5 Fragment class element (semantic tag):

Header: Marking the contents of the head area

Footer: Mark the content of Footstep area

An area of the Section:web page

Article: stand-alone article area

Aside: related citations or areas

Nav: Navigation class auxiliary Area

8. Convenient JavaScript logging and debugging

Console.log (msg); You can output a user's customized debugging information in the console, which does not break and break the program like alert.

9, window. Json:json API

Json.parse used to serialize a string into a DOM object

Json.. Stringify to convert a DOM object to a string

10. Offline data storage, including modules such as Webdatabase and the File System API and Storage API, for temporary or persistent data saving on the client.

11. Cross-domain data communication: The communication API, which is used for the interaction between the offline system and the service-side system when the network is connected.

HTLM5 Development tools:

There are many HTML5 development tools on the Internet,

Http://www.cnblogs.com/lhb25/archive/2011/10/09/10-online-tools-to-simplify-html5-coding.html

If you are using dreamwear to develop, then download a HTML5 install package (HTML5 Pack), which is a dreamware-based extension that adds support for HTML5 and CSS3 in Dreamweaver.

If you are a dreamweaver CS5, download HTML5 Pack for Dreamweaver CS5

(Http://download.macromedia.com/pub/dreamweaver/updates/cs5/11_0_4/win/AdobeDreamweaver-11-0-All-Update.zip)

If you are an Adobe Dreamweaver CS5.5, download HTML5 Pack for Dreamweaver CS5.5

(Http://download.macromedia.com/pub/dreamweaver/updates/cs5/11_5_1/win/AdobeDreamweaver-11.5-All-Update.zip)

If your project is being developed in VS, then you go to the Extension Manager to download the install Web Standards Update for Microsoft Visual Studio SP1 (VS2010-based patch pack), It contains the CSS3 cascading style sheet version and the HTML5 target validation schema.

Official address:

Http://visualstudiogallery.msdn.microsoft.com/a15c3ce9-f58f-42b7-8668-53f6cdc2cd83?SRC=Home

HTML5 and CSS3 part of the introduction:

Http://www.hanselman.com/blog/AnnouncingTheWebStandardsUpdateHTML5SupportForTheVisualStudio2010Editor.aspx

The following list is installed:

asp.net mvc 3 tools update installer

TD valign= "Top" width= "643" >

microsoft visual studio 2010  Sp1 tools for sql server compact4.0 installer for repaire ( Chinese-china)

microsoft visual studio& Nbsp;2010 sp1 tools for sql server compact4.0 installer

microsoft visual studio 2010 sp1  Tools for asp.net web pages

Asp.net mvc3 tools update language packs install

More than just support for HTML5, there are other updates such as MVC and SQL Server. If you do not need to, you can go to the control Panel to remove the individual. After installation, your VS is much more handsome, and you can intelligently perceive the new tag properties and style attributes of HTML5:

The main browsers that support HTML5 are:

Chrom	3.0 or more
Firefox	Version 1.5 starts to support
Internet Explorer	9.0 or more
Opera	Above 9.0 versions
Safari	Above 1.3 versions

Chrome3.0 the above version basically supports the HTML5 features and all APIs, has been in a leading position in support, and has an easy-to-operate developer tool, so our project's browser support platform is Google Chrome.

工欲善其事 its prerequisite, let's take a look at the developer tools for Google Chrome:

You can choose to go to the Developer Tools panel by clicking the tools tab = Tool = "Tools =" tool in the top right corner of Google Chrome, or use the ctrl+shift+i (or F12) shortcut to open Developer tools.

In the top toolbar of the window is lined with 8 icons, respectively, corresponding to different functions, each icon click will open the corresponding debug panel, to help you get a variety of information, such as the DOM tree, Resource Usage, page-related scripts and so on. The ctrl+[and CTRL +] keys allow you to toggle between these items. A search box is also available at the right of the toolbar to search in the current panel.

Three fixed icons in the lower left corner of the developer Toolbox

First icon: The prompt is undock into separeter windown or dock to main window, reminding you whether to dock the developer Toolbox in the main form or a separate form.

Second icon: Show console, whether the console is displayed

The third icon selects the corresponding page element

1. Element Panel (Elements):

Element panel: Element Panel allows you to view and read Web page content and structure like the browser itself, using this element panel, you can see native HTML source, CSS style code, document structure model, and browser to the page real-time processing and operation.

Open the Developer Toolbox and select the Elaments panel

In this element panel, we can see the HTML elements in the left panel, see the Styles in the Panel on the right, frame metrics (metrics), attributes (properties) and event listeners (events listeners), and so on.

Dom element tree (document elements trees):

Contains embedded scripts and elements, select the appropriate element will lock the source code, such as the selection of the paragraph <p> elements

When you select this element, you can add, edit, delete the attributes of the element, and even delete the entire node

CSS styles (CSS style): After you select an element, in the styles option on the right panel, you can view all the style information for that selected element and modify its style

You can use the button to add a new style element, using the pseudo state of the Set element (: Active,: hover,: Focus,: visited).

Box model: Selecting the Metrics tag in the right panel displays the model position of the selected element in the entire DOM document, and allows you to edit any of the CSS box model metrics for absolute, relative, fixed page elements,

Properties, select the property label in the right panel and modify the property value

Event snooping: Captures events that also page elements, such as Click,kendown and mouseover

2. Resource Panel (resources)

Frames: Frame resources, you can see the resources uploaded from the page, which contains the HTML pages, scripts, font files, images files, scripts files, stylesheets files, are the related resource files that are retrieved from the displayed site.

Databases: Chrome-based database, using SQLite, our off-line system uses this as an offline storage database

Localstorage: From the WebStorage API for storing data in the cache

Sessionstorage: From the WebStorage API for storing data in the cache

The difference between Localstorage and sessionstorage

Type	Life cycle	Visibility of
Sessionstorage	The data is saved to the page where his tab is stored or when the browser is closed	Data is visible only on the page where it is built or in the browser
Localstorage	The life cycle of the data is longer than the window or browser cycle	Data can be visible from each window or label page of the same origin

Cookies: Check your browser's cookies to modify and delete cookies

3. Network panel:

Network panel to check the time and details of resource onboarding

4. Script panel (Scripts):

The Panel for debugging scripts, this panel is very important, our off-line system is almost all built with script (JavaScript) plus htmlapi, so we often have to script debugging here.

, on the left is the collection of scripts used by the current page, select the script you want to debug, add a breakpoint to the left (add breakpoint), and the icons on the right panel represent: Run/stop, do not jump like a function (F10), jump into the next line, or inside the next function, go outside the current function, Invalidates all current breakpoints.

Other shortcut keys:

Continue	F8 or command-/(forward slash) on Mac or control-/(forward slash) on other platforms.
Step over	F10 or command-' (apostrophe) on Mac or control-' (apostrophe) on other platforms.
Step into	F11 or command-; (semi-colon) on Mac or control-; (semi-colon); on other platforms.
Step out	Shift-f11 or shift-command-; (semi-colon) on Mac or shift-control-; (semi-colon) on platforms.
Next Call Frame	control-. (period) on all platforms.
Previous Call Frame	control-, (comma) on all platforms.

5. Console panel (Scripts):

Panel to display console information, if there is any error or warning on this side of the system will appear in this panel, this panel can also output the developer's customized information: console.debug (message), our offline system has been wrapped in the package of custom information.

6. Search box:

Find the corresponding page element, script code, style code, etc.

HTML5 Project NOTE 1: Project preparation and tool use