HTML5 css3 pre-Research summary document

Directory:

Chapter 1 Technical highlights of HTML 5... 3

1. geographic location API 3

1.1 Introduction:... 3

1.2 How to obtain the geographical location and its advantages and disadvantages:... 3

1.3 geographic location acquisition process:... 3

1.4 browser support:... 3

1.5 check method supported by the browser:... 3

1.6 location Request Method:... 4

1.6.1 single request... 4

1.6.2 repeated requests... 5

2. HTML5 offline functions... 5

2.1 Introduction:... 5

2.1.1 offline resource cache:... 5

2.1.2 online status detection:... 5

2.1.3 local data storage (Web sotrage API):... 5

2.2 browser support:... 6

3. Audio and Video tags... 6

3.1 support for encoding formats in various browsers:... 6

3.2 check method supported by the browser:... 6

3.3 label usage:... 6

4. websocket API 7

4.1 Introduction:... 7

4.2 browser support:... 7

4.3 check method supported by the browser:... 8

5. Cross document messaging... 8

5.1 Introduction:... 8

5.2 browser support:... 8

5.3 browser support:... 8

6. XMLHttpRequest Level 2. 8

6.1 Introduction:... 8

6.2 browser support:... 9

6.3 check method supported by the browser:... 9

7. web worker API 9

7.1 Introduction:... 9

7.2 check method supported by the browser:... 9

8. Other features supported by HTML5 (some are not widely supported)... 10

9. Summary... 10

Chapter 2 jquery mobile. 10

1. Four mainstream mobile Web development frameworks... 10

1.1 IUI: 10

1.2 jqtouch: 10

1.3 sencha touch:... 10

1.4 jquery Mobile: 11

2. Use jquery mobile. 11

2.1 Introduction:... 11

2.2 integrate jquery moblie + Google Maps API V3 interface... 12

Outline:

1. web app development: HTML 5 technical points and CSS 3 features

2. web app development: CSS 3 features

3. web app development: mobile Web development framework (jquery mobile)

Chapter 1 Technical highlights of HTML 5

1. geographic location API

 

1.1 Introduction:

HTML5 uses the geolocation API to detect user locations. Based on your needs, it provides single-time location reception and continuous location reception.

1.2 methods and advantages and disadvantages of obtaining a geographical location:

1. IP Address

2. GPS

3. MAC address of the Wi-Fi base station. (When connecting public WiFi with a known location, identify the Wi-Fi access point through the MAC address to locate)

4. GSM or CDMA base stations

1.3 geographic location acquisition process:

1. the user opens the web application that needs to obtain the geographical location.

2. When the application requests the geographical location from the browser, the browser displays a dialog box asking whether the user shares the geographical location.

3. Assume that the user permits the browser to query related information from the settings.

4. the browser sends the relevant information to a trusted location server, and the server returns the specific geographic location.

1.4 browser support:

Currently, chrome, Firefox, opera, and Safari are supported, but ie9 is not.

1.5 Check Methods supported by browsers:

Function loaddemo (){
If (navigator. geolocation ){
// Supported

} Else {
// Not supported
}
}

1.6 location request method:

1.6.1 single request

Navigator. geolocation. getcurrentposition (updatelocation, handlelocationerror, options );

The callback function updatelocation accepts an object parameter, indicating the current geographic location. It has the following attributes:

Latitude-latitude
Longpolling -- precision
Accuracy-precision, in meters
Altitude -- height, in meters
Altitudeaccuracy-precise height, in meters
Heading-the direction of motion, relative to the normal north direction
Speed-the speed of motion (Suppose you are moving on the horizon), in meters/second

The callback function handlelocationerror accepts the error object. Error. Code is the following error code.

Unknown_error (error code 0) -- the error is not in the following three types. You can use error. Message to obtain error details.
Permission_denied (error code 1) -- do not select not to share geographic location
Position_unavailable (error code 2) -- unable to get the current location
Timeout (error code 3) -- this error is triggered when the location cannot be obtained at the specified time.

The third parameter options is an optional parameter. The attributes are as follows:

Enablehighaccuracy-indicates the location where the browser obtains high precision. The default value is false. When enabled, the browser may not be affected, or it may take a longer time to obtain more accurate location data.
Timeout -- specifies the time-out time for obtaining geographic locations. The default value is unlimited. The Unit is milliseconds.
Maximumage -- maximum validity period. This parameter specifies how long it will take to obtain the location again when you obtain the location again. The default value is 0, indicating that the browser needs to re-calculate the location immediately.

The parameters are used as follows:

Navigator. geolocation. getcurrentposition (updatelocation, handlelocationerror,

{Timeout: 10000 });

1.6.2 repeated requests

Navigator. geolocation. watchposition (updatelocation, handlelocationerror );
Watchposition can be used to continuously obtain the geographical location. the browser or multiple calls the updatelocation function to pass the latest location. This function returns a watchid. You can use navigator. geolocation. clearwatch (watchid) to clear the callback. Use navigator. geolocation. clearwatch () without parameters to clear watchposition.

 

2. HTML5 offline Functions

 

2.1 Introduction:

Develop a web application that supports offlineProgramDevelopers usually need to use the following three features:

2.1.1 offline resource cache:

You need to specify the resource files required for the application to work offline. In this way, the browser can cache these files locally when they are online. After that, when the user accesses the application offline, these resource files are automatically loaded, so that the user can use them normally. In HTML5, the cache manifest file is used to specify the resources to be cached, and automatic and manual cache update methods are supported.

2.1.2 online status detection:

Developers need to know whether the browser is online so that they can handle the online or offline status. In HTML5, two methods are provided to check whether the current network is online.

2.1.3 local data storage (Web sotrage API ):

Offline, you must be able to store data locally for online synchronization to the server. To meet different storage requirements, HTML5 provides two storage mechanisms: Dom storage and web SQL database. The former provides easy-to-use key/value pairs, while the latter provides basic relational database storage functions.

For more information, see: http://www.ibm.com/developerworks/cn/web/1011_guozb_html5off/ (using HTML5 to develop offline applications)

2.2 browser support:

Browser support: Various mainstream browsers have implemented many functions.

3. Audio and Video tags

 

3.1 support for encoding formats in various browsers:

For the actual use of the two labels, see the w3school tutorial.

Http://www.w3school.com.cn/html5/html5_audio.asp
Http://www.w3school.com.cn/html5/html5_video.asp

3.2 Check Methods supported by browsers:

VaR hasvideo = !! (Document. createelement ('video'). canplaytype );

3.3 How to use tags:

<Video src?video.ogg ">

<Object data‑embedded videoplayer.swf "type =" application/X-Shockwave-flash ">

<Param name = "movie" value?video.swf "/>

</Object>

</Video>

If the browser does not support HTML5, The Flash tag is loaded. If the browser does not support HTML5, the HTML5 video tag is preferentially selected. However, you must prepare two sets of video formats.

For the audio element, different browsers support different formats and provide two different formats for the browser to choose from.

<Audio controls>

<Source src?”johann_sebastian_bach_air.ogg ">

<Source src?”johann_sebastian_bach_air=">

An audio clip from Johann Sebastian Bach.

</Audio>

4. websocket API

 

4.1 Introduction:

Websocket API, the browser and the server only need to do a handshake action, and then a fast channel is formed between the browser and the server. Data can be directly transmitted to each other. In this websocket protocol, even if the service is implemented, it brings two benefits:

1. Header

The Header for mutual communication is very small-about 2 bytes

2. server push

The server can send data to the client.

For more information, see: http://zh.wikipedia.org/zh-cn/WebSocket

4.2 browser support:

Google Chrome 4.0 supports websockets.

Firefox 4.0 Beta supports websockets.

Opera 11 (or 10.70) Alpha also

Safari 5.0.2 supports them too

For other browsers it's not so clear.

4.3 Check Methods supported by browsers:

Function loaddemo (){

If (window. websocket ){

// Support HTML5 websocket

} Else {

// Not support HTML5 websocket

}

}

5. Cross-document message mechanism)

 

5.1 Introduction:

Postmessage API supports communication across frames, tabs, or windows.

5.2 browser support:

5.3 browser support:

If (typeof window. postmessage === "undefined "){
// Postmessage not supported in this Browser
}

6. XMLHttpRequest Level 2

 

6.1 Introduction:

XMLHttpRequest Level 2 is defined in HTML5. It has two enhancements: Cross-origin communication and communication progress notification (Progress events)

6.2 browser support:

6.3 Check Methods supported by browsers:

VaR xhr = new XMLHttpRequest ()

If (typeof xhr. withcredentials === undefined ){

// Support HTML5 cross-origin XMLHttpRequest

} Else {

// Not support HTML5 cross-origin XMLHttpRequest

}

7. web worker API

 

7.1 Introduction:

Web worker can be in a separate thread. jsCodeHowever, due to browser features, webworker cannot access the Dom and can only communicate with the main thread through specific events and postmessage APIs. Web worker can use the timer API and can also start worker in a worker. Webworder is ideal for computing-intensive operations.

7.2 Check Methods supported by browsers:

Function loaddemo (){
If (typeof (worker )! = "Undefined "){
// Support HTML5 web workers ";
}
}

8. Other features supported by HTML5 (some are not widely supported)

 

Canvas, form API, webgl, 3D shaders (3D shaders), devices tag, audio data API, events for touch screen devices, point-to-point network communication

9. Summary

 

These new features of HTML 5 provide a good platform for us to create rich and efficient web applications. We can try to use some functional features that are useful to our project and stay at the forefront of WEB programming technology.

Chapter 2 CSS 3

For more information about the new features of CSS 3, seeArticle:

Http://www.blueidea.com/tech/web/2009/6930.asp

Chapter 3 jquery mobile

1. Four mainstream mobile Web development frameworks

 

1.1 IUI:

It is a JavaScript and CSS library used to simulate the appearance and feeling of the iPhone on a webpage. Although the UI is designed for the iPhone, more than 90% of Android functions are completely usable, because Android and iPhone are both based on WebKit browser systems.

Http://code.google.com/p/iui/

1.2 jqtouch:

Is a jquery plug-in for mobile Web development. It supports iPhone, iPod Touch, and other WebKit-based systems.

Official: http://www.jqtouch.com/

1.3 sencha touch:

It makes your web app look like a native app. The beautiful user interface components and rich data management are fully compatible with Android and Apple iOS devices based on the latest HTML5 and css3 web standards.

Http://www.sencha.com/products/touch/

1.4 jquery Mobile:

That is, jquery released jquery mobile Alpha 3 last month for mobile devices. It mainly includes jquery core and jquery UI for mobile devices. Supports mainstream mobile operating systems such as Android, iPhone, Symbian, blackbery, and WebOS ).

Which framework is selected?

Currently, jquery mobile and sencha touch are the most popular frameworks. The differences between the two are described in a simple comment from foreign forums:

Sencha touch is an application framework (you create your interface programmatically through JavaScript) while jquery mobile is more of a mobile enhancement Library (you write regular HTML for your content, then add jquery mobile for transitions/animations ). jquery mobile has an easier learning curve, but sencha touch can better simulate "native" apps.

Jquery mobile is more lightweight and easier to learn.

In summary, choosing jquery mobile is more convenient for us to quickly create an application.

2. Select jquery mobile.

 

2.1 Introduction:

Jquery Mobile provides a jquery core library for mobile device web applications and a unified UI framework. Other advantages of jquery mobile include:

1. Based on the jquery core library; compatible with all mainstream mobile devices

2. Small (12 KB)

3. HTML5/css3-based

4. availability and accessibility

5. Powerful UI framework

6. When using jquery mobile to build Web applications for mobile devices, developers only need to take charge of HTML pages, and jquery mobile does not infringe on HTML, fully using the standard HTML 5.

2.2 integrate jquery moblie + Google Maps API V3 Interface

 

1). Display Effect on Android:

 

 

2). Display Results on iPhone:

 

 

From the interface, we can see that the Web application interface developed by jquery mobile and HTML 5 CSS 3 is similar to the local app on the mobile phone.

In addition, as long as the mobile browser supports HTML5 on different platforms, the jquery Mobile UI framework can help us achieve compatibility, saving us a lot of trouble in adaptation.