I. Knowledge about WAP (omitted)
Ii. XHTML MP
(1) Introduction to XHTML MP
Xhtml mp (Extensible hypertext markup language mobile profile)
WAP2.0 works with WCSS (wap css/WAP Cascading Style Sheet) and is a subset of XHTML.
XHTML basic (XHTML subset) + other XHTML elements and attributes
Presentation Control)
Xhtml mp advantages: Developed sites can be used on the web and wireless, or any web browser can be used to access WAP2.0 applications
Backward compatibility: xhtml mp/WCSS and WML/WMLScript
(2) development of wireless Markup Language
HTML: the primary task of WAP development-accessing the Internet, such as mobile phones and PDAs. WAP standard (WML and XHTML mobile profile) is similar to HTML
WML (Wireless Markup Language) 1.x: the markup language specified in WAP 1.x specification, the first markup language for wireless devices. Openwave, Nokia, and Ericsson all have their own markup language for a long time. The WML specification is created by WAP Forum (97. Currently, many WAP sites still use WML.
XHTML: The structure is more concise and strict than HTML. This is important for wireless devices (for example, mobile phones) and has limited processing capabilities.
XHTML basic: A simplified version of XHTML. Designed for devices with limited processing capabilities and performance (mobile phones, PDAs, pagers, etc)
But does not contain the XHTML feature. For example, CSS, frames, and scripting. Is defined by W3C.
Xhtml mp: the official markup language specified in WAP2.0 instructions. WAP Forum is created based on XHTML basic and adds some elements and attributes from the full version of XHTML. For example, <I>, <B>, <small>, <big>, and <HR>. Xhtml mp supports a simple CSS version, that is, WCSS/wap css.
WCSS/wap css: A simplified version of css2 that adds WAP-specific extensions. You can easily change the layout and style of the xhtml mp page.
Wml2.0: WAP site developers do not need to worry about wml2.0. Wml2.0 is backward compatible and unavailable to WAP site developers.
(3) Advantages of XHTML MP
Biggest advantage: developers can use the same technology to develop websites suitable for Web and WAP.
You can get started with HTML, XHTML, and CSS basics.
The same development tool can be used to develop Web and WAP sites.
During the development process, a general web browser can browse your WAP site.
Html/XHTML pages can be modified to xhtml mp in a small way, or even without modification (Note: whether the layout is suitable for small screens and whether the file size is the maximum ).
Supports WCSS. Mobile devices have many different features, such as the screen size. You only need to write the structure once and use different WCSS files.
More performance control.
(4) unsupported WML features
1. xhtml mp does not support <deck> and <card> labels.
In XML, a file can contain one or more cards. All cards are combined into one deck and downloaded from a wireless device. The WAP browser displays only one card at a time. You can access other cards through the anchor link. This reduces the round-trip access to the server. It makes sense to improve performance. To implement similar features in xhtml mp, you can use multipart messages (put multiple documents in one request). The other method is to use the target anchor (different locations of a page ).
2. xhtml mp does not support <timer> labels.
<Head> & nbsp; <meta http-equiv = "refresh" content = "10; url = http://www.planabc.net/"/> <Meta> the element tells the WAP browser URL 10 seconds later.
Note: WML timer only enters the card, while HTML refresh timer enters the xhtml mp page.
3. xhtml mp does not support events.
WML supports four events (ontimer, onenterbackward, onenterforward, and onpick). Events except ontimer cannot be simulated. To use wml1.x.
4. xhtml mp does not support variables.
In XML, you can declare variables, assign values, and have a global scope. It can be used in any deck or card. Xhml MP is placed on the server for processing (it must be sent and saved ).
5. xhtml mp does not support client scripts.
In XML, you can use the client script (WMLScript ). A simplified version of JavaScript, which is often used to verify data. Put it on the server for short processing. In future versions, the client script (ecmascript MP) will be supported and all WMLScript functions will be supported.
6. xhtml mp does not support programmable softkeys ).
One of the largest features of WML. Use the <do> label. You can use the accesskey attribute in xhml MP. The anchor and submit buttons support this attribute:
<A accesskey = "1" href = "part1.xhtml"> xhtml mp tutorial Part 1 </
The-wap-accesskey attribute in WCSS can also be defined as: A. wcss_class_1 {-wap-accesskey: 1}
7. xhtml mp does not support <u> labels.
In XML, <u> is used to add underscores under some texts. You can use the text-decoration attribute in WCSS.
8. xhtml mp does not support the format attribute of the input box.
In XML, you can define the type and word limit. You can use the-wap-input-format attribute in WCSS. The syntax is consistent. For example, a maximum of five numeric characters are allowed: input {-wap-input-format: "5N "}
9. xhtml mp does not support data transmission through the anchor link.
<P> & nbsp; Name: & nbsp; <input name = "name"/> <br/> & nbsp; <anchor> <go method = "get" href = "Yuanxin. PHP "> <postfield name =" name "value =" $ (name) "/> </go> & nbsp; Submit & nbsp; </anchor> </P>
<Form action = "Yuanxin. PHP "method =" get "> & nbsp; <p> name: & nbsp; <input name = "name"/> <br/> <input type = "Submit" value = "Submit"/> </P> </form>
(5) syntax rules
The tag must be completely closed.
The tag and attribute must be in lower case.
Attribute values must be enclosed in quotation marks.
No attribute value is allowed.
Tags must be completely nested.
(6) MIME type and file extension
Mime Type: Application/vnd.wap.xhtml + XML, application/XHTML + XML, text/html.
Dynamically generate MIME types. Obtain the accept header information in the HTTP request.
File Extension: .xhtml#.html#.htm
(7) document structure
Must contain <HTML>,
<? XML version = "1.0"?>
<! Doctype HTML public "-// wapforum // dtd xhtml mobile 1.0 //" http://www.wapforum.org/DTD/xhtml-mobile10.dtd ">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> Hello World </title>
</Head>
<Body>
<P> Hello world. Welcome to taobao.com. </P>
</Body>
</Html>
XML declaration and character encoding: <? XML version = "1.0" encoding = "UTF-8"?>
UTF-8/16 encoding can be omitted. XML declarations are not required either, but errors in many WAP browsers are ignored.
The doctype declaration must exist. Between the XML declaration and <HTML> elements.
<HTML>, <P> the element and align attributes have been removed. You can set them using the text-align attribute of wap css.
(8) General metadata
Use the <META/> label, which is included in the If the WAP browser does not understand it, ignore it.
For example, add Author: <meta name = "author" content = "Yuanxin"/>
Cache Control: An application of the <META/> label controls the period in which xhtml mp files exist in the cache:
<Meta http-equiv = "cache-control" content = "no-Cache"/>
<Meta http-equiv = "cache-control" content = "Max-age = 0"/>
Note: It is related to the device. Some use non-phase methods, some do not have a cache mechanism. Some other HTTP headers that do not support <META/> but recognize cache-control: No-cache. It can also be applied to the image cache.
Periodic refresh. Must be used together. Not all browsers support this function.
<Meta http-equiv = "cache-control" content = "no-Cache"/>
<Meta http-equiv = "refresh" content = "15w.urlw.yuanxin.xhtml"/>
(9) Introduction to common labels
Note: <! -->, Which is the same as HTML and wml1.x.
Line feed: <br/>, the same as HTML and wml1.x.
Horizontal line: <HR/>. Cannot be included in the <p> </P> label.
Title: Font Style: labels can be used in XML to change the font style (such as <B>, <I>, <small>, and <big> ). However, some browsers only support some of them. They do not support ignore and do not make any mistakes. WCSS controls the font format.
And formatted text: in xhtml mp, the white space between tags is not displayed. In addition, only two or more white spaces are displayed in the section. if you want to maintain the text format, you can use <PRE>.
List: <ul>, <ol>, and <li>. For <ol> elements, you can use the start attribute to specify the sequence of numbers. You can also use WCSS for more precise control.
Show image: The label is used to display the image. Same as HTML. If the file is not found or the image format is not supported, the alt attribute text is displayed. Specify the height and width of the image display area.
In addition to the old wbmp image format, WAP2.0 also supports the Web image format (GIF, JPG, and PNG), but WAP2.0 wireless devices support some of the above image formats. GPRS-GIF, CDMA-PNG. You can use the accept HTTP header to determine the settings.
About the release of big pictures: Many WAP browsers do not have the horizontal scroll function. If the width is greater than the display screen, many WAP browsers crop images. Scaling down images in proportion cannot help improve performance. Large images may also incur site access fees.
Optimized image: 1. scale down the image proportionally using the graphics software; 2. For GIF images, reduce the color, but reduce the image quality and balance. 3. If the image is a jpg image and a certain compression ratio is saved, it is still a trade-off.
Use multipart messages to download the xhtml mp document first, and then request the image to generate multiple requests. This method can make the document and image in one request, meaning that a page has only one request. Reduce the pressure on the server.
Table: to create a table, you must use the <Table>, <tr>, and <TD> labels. By default, the table has no edge. The attributes include rowspan and colspan.
Anchor link: generally used in navigation. The label is <A> </a>. The href attribute defines the specified URL. Jump to the current page position: first set the target link, set through the ID attribute, and then set the URL of the anchor to # ID name.
Set the shortcut key for the anchor link: <A> the accesskey attribute of the tag. Valid values: *, #, 0-9. You can also set it with-wap-accesskey.
Select list: select the list and use the <SELECT> tag to include one or more <option> tags. <SELECT> the name attribute of the tag defines the name of the selection list. Name is used to obtain the value of the selected item (the value attribute definition of option ).
1. Multi-choice list: the selected Attribute of option is used to set the default option. If you want to set a multi-choice list, you can use the multiple attribute of the <SELECT> label, which has only one unique value 'Multiple '.
2. Option group: Use the <optgroup> label to define the name of the option group.
Input elements: text field, password fireld, checkbox, radio button, and hidden field. Use the <input> element. The <input> element must be used with <form> to transmit data to the server. The Type attribute defines the category of the input element. The name attribute is used to define the name to facilitate the acquisition of user data.
<Input type = "text" name = "Taobao" maxlength = "16" value = "Yuanxin"/>
Input {-wap-input-format: "10n "}
<Input type = "password" name = "Taobao"/>
<Input type = "checkbox" name = "Taobao" value = "Yuanxin" Checked = "checked"/>
<Input type = "radio" name = "Taobao" value = "Yuanxin" Checked = "checked"/>
<Input type = "hidden" name = "Taobao" value = "Yuanxin"/>
Form elements: <input>, <SELECT> and other elements cannot be directly contained in form elements. xhmtl MP standards require block-level elements. If non-ASCII characters exist, use the POST method to avoid Encoding Problems.
<Form method = "get" Action = "Yuanxin. ASP "> <p> & nbsp; <input...> & nbsp; <Select...> </P> </form>
Submit button: All forms must contain a submit button. <Input> the element is used to create a submit button. The Type attribute is defined as 'submit '.
<Input type = "Submit" value = "OK"/>
(9) Introduction to common labels
Reset button: not required. <Input> the element is used to create a reset button. The Type attribute is defined as 'reset '.
<Input type = "reset" value = "default"/>
Div and span.
Iii. WCSS/WAP CSS
(1) WCSS Introduction
WCSS/wap css/wireless profile CSS (WAP Cascading Style Sheet)
Is a subset of css2 + Some WAP-specific extensions
Purpose: To define the style and layout of a document and separate it from the document content.
Importance: different mobile devices have diverse features, such as the screen size.
WML does not support WCSS
W3C CSS mobile profile is different from wap css.
(2) Advantages of WCSS
Mainly: learning costs are reduced, the same development tools are available, and Web browsers are available for browsing.
Separation of performance and structure: matching the characteristics (screen size) of different wireless devices, different client proxies (PCs, PDAs, and mobile phones); reducing maintenance costs (new mobile phones ); CSS is only required to change the visual and layout. CSS is used repeatedly to facilitate work subdivision.
Better control performance than WML: You can define attributes such as color, Font, background, border, margin, and padding of an element.
The first time a mobile device accesses the site, the download style (cache) is used ).
With the external WCSS, The xhtml mp document size becomes smaller and the download time is increased.
(3) disadvantages of using WCSS
Different WAP browsers have different support for WCSS. One attribute may be supported by this WAP browser, but the other does not.
The external wap css may increase the request time for the first access to the page. Cause: the external WCSS does not exist in the cell phone cache and must be downloaded from the server. The xhtml mp document and the external WCSS download are different requests, increasing the server pressure; if you use a WCSS to define all the performance of a WAP site, the file size may be large. The WAP browser needs to parse WCSS to the xhtml mp document.
(4) MIME type and file extension
Mime Type: text/CSS.
File Extension:. CSS
(5) WCSS syntax rules
WCSS Declaration: Selector {property: property_value}
Multiple Attributes are allowed, separated.
Multiple selectors are allowed, separated by commas.
Note:/* orz */, which is ignored by the WAP browser.
(6) How to apply in the xhtml mp document
Link to the external WCSS (recommended) and place it in the head of the document. Use the style attribute to define the WCSS style.
<Link href = "url" rel = "stylesheet" type = "text/CSS"/>. You can add multiple types without modifying the rel and type attributes.
<Style type = "text/CSS"> & nbsp; some WCSS statements </style>
<HR style = "color: Blue"/>
(7) Different Selector
Type selector: h1 {font-style: italic} element name must be in lower case.
The class selector:. Class {color: Blue} corresponds to the class attribute of the tag. You can also use h1.class {color: Blue} with the element name }.
Id selector: # ID {color: Red} the ID attribute of the tag can also be associated with the element name.
General selector: * {color: Blue}, all labels. Note: style rendering slows down in some WAP browsers. (Not recommended)
(8) common attribute values
Length: %, PX, em, ex, CM, mm, in, PT, PC (spaces are not allowed between values and units: margin-top: 1px instead of margrin-top: 1 px ).
Color: RGB (R %; G %, B %), RGB (R, G, B), # rrggbb, # RGB, red (16 ).
URL: ul {list-style-image: url(bullet.gif)} No quotation marks, double quotation marks, or single quotation marks.
(9) font and text attributes
Font Name: P {font-family: "Times New Roman"} the name contains spaces or multiple words that must be enclosed in quotation marks.
Font size: P {font-size: 12px}. You can also use XX-small, X-samll, small, medium, large, X-large, XX-large.
Font Style: italic, bold, and underline (font-style, font-weight, text-decoration ).
Set text align and float. In WAP, float (left, right, none) is often used in IMG and table labels.
(10) List attributes
List-style-type: disc by default. Other values: Circle, square, and none. It can be applied to UL and Li elements.
Change the order of the ordered list: decimal by default. Other values: Upper-alpha (A), lower-alpha (A), upper-Raman (I), lower-Raman (I ), none
3. Use the image file as a small icon: List-style-image: url(bullet.gif ). Note: Some icons are saved locally in the openware WAP browser and can be used as small icons, for example: ul {list-style-image: localsrc ("rightarrow1 ")}
(10) List attributes
(11) color attributes and border attributes
Set the foreground and background color: Color and background-color.
Set border style: border-style (border-top-style, etc.) attributes with many values, but only none and solid are widely supported by WAP browsers. Table {border-style: solid}
Set the Border Width: border-width (same as above) attribute. The value is a numerical value, and thin, medium, and thick are also accepted. Note: The border-width and border values are invisible. Border-style values must be set to non-None values.
Set the border color: border-color (same as above) attribute. Note the same as above.
Shortcut for setting the border attribute: Table {border: 2px solid black}
The order is free.
(12) WAP-specific CSS Extension
Shortcut Key:-wap-accesskey, used to specify the shortcut key of the xhtml mp element.
Input: defines whether the text box can be left blank, what type, and how many characters can be entered
Marquee: Scroll some content on the screen.
(12.1) WCSS shortcut key Extension
Define the shortcut key for the element:-wap-accesskey attribute
Available attribute values *, #,
Input. wcss_class {-wap-accesskey: 4}
Directly define * and # In violation of the css2 syntax. Unicode escape characters/2a and/23 are required. However, some WAP browsers (Sony Ericsson WAP browsers) require/2a and/23, and some (openwave mobile browsers) require * and #.
It is the same as the accesskey attribute of the element. If it is defined at the same time, the attribute value is displayed.
Only four elements a, input, label, and textarea are used. Other definitions are invalid.
(12.2) WCSS input Extension
It consists of two attributes:-wap-input-famat and-wap-input-required, which correspond to the format (definition type and number of characters) of the <input> element in WML) and emptyok (whether it can be left blank) attributes.
The WAP browser on the mobile device was not supported earlier, but the format and emptyok attributes were supported as xhtml mp extensions. For better compatibility, we recommend that you use both WCSS and WML.
<Input type = "text" format = "N" style = '-wap-input-format: "N"'/>
Control the type and number of characters of the text box:-wap-input-format. It must be applied to the <input type = "text">, <input type = "password">, and <textarea> labels. If other labels are used, they are invalid. Format characters (case sensitive): A (small
Write letters or symbols), A (uppercase letters or symbols), n (digits or symbols) n (numbers), x (lowercase letters or digits or symbols ), X (uppercase letters, numbers, or symbols), m (any character, default lowercase letter input mode, can be changed to uppercase mode), m (any character, default uppercase letter input mode, can be changed to lower case mode ). Attribute values must be enclosed in quotation marks. Because some openwave mobile Browsers Do not support single quotation marks, double quotation marks (<input type = "text" style = '-wap-input-format: "N" '/>)
-Wap-input-format: "2n" (up to two numbers)-wap-input-format: "Nn" (two numbers)-wap-input-format: "* n" (unlimited number)
-Wap-input-format: "A * A" (the first uppercase letter or symbol, 0-N lowercase letters or symbols)-wap-input-format: "* m" (default)
Number or * Before the format character: 1. Only one time is allowed; 2. At the end
If the Value Syntax is incorrect, the WAP browser ignores this attribute.
It can also contain escape characters: '/' is a special character in WCSS, and '//' is used '//'.
Whether the control text box can be left blank:-wap-input-required (values: false and true), to help control whether the text box can be blank. Use the same element as above.
When-wap-input-format conflicts with-wap-input-required, required prevails.
(12.3) WCSS marquee Extension
Some content (one line of text, one image, one link, etc.) can be scrolled on the screen, but some WAP browsers only support scrolling text. It is useful when the content exceeds the screen.
Contains four attributes and one attribute value:-wap-Marquee attribute value (value of the display attribute),-wap-marquee-Dir attribute (specifying the direction of Marquee, value: LTr, RTL-default),-wap-marquee-loop attribute (specifying the repetition time of Marquee, infinite forever, most default values: 1 ), -wap-marquee-speed attribute (specifying the speed of Marquee, value: slow, normal-default, fast),-wap-marquee-style (specifying how marquee scrolls on the screen, there are three values: scroll-default, slide, alternate)
Ii. WAP2.0 Design Principles
WAP2.0 Design Principles
Preparations before site design
Interface design, selection of core services, WAP device features statistics (browsers, etc)
Follow the navigation model
A consistent and easy-to-learn navigation model. Simple, accurate, and fast information. Minimize input (select a list, check box, or single-choice button. -Wap-input-format: * n; Avoid mode conversion. First letter. )
Design navigation Layers
Consistent navigation model, less 'return' link, too deep (4-5), back to home page or directory
Design of Small-size screens
Make sure that the content is visible, <title> less than 14 characters, consistent style, reduce horizontal scrolling, use alignment attributes to increase readability (1-3), make full use of space (text) avoid using too many text style attributes, use short and accurate words, avoid using too many colors and stay consistent, and do not need to describe the color by name.
Keep short document size: limited memory, does not support WML multi-card, use the anchor link, etc.
Do not include long comments, remove indentation or spaces, and use ID and class as few as possible
Smooth user task flow and reasonable use of images
Images are not used as little as possible to avoid using large tables.
Provide sufficient information on the page
Frequently Used navigation links, search domains, login screens, and a large amount of information on the first screen; difficult to scroll up or down, form interaction should be brief.
Provide information feedback for user operations
Provide correct feedback on user operations, errors, and problems.
Minimize the number of images and reduce the size of images
Each image is a request, reducing the page display speed, and the content may be re-ordered, occupying time and resources. The same picture is planned for the whole site.
Define the image height and width attributes
Pre-placeholder defined to improve user experience,
Exercise caution when using the table
The cell width uses absolute width. The number of nested layers increases, and the page complexity and processing time increases. The table border should not be too thick.
Consider adding style definition options
Weigh!
Use Unicode characters to write xhtml mp content
Test availability
Appendix Common WAP Simulators
Winwap, openwave, and opera
Qingkai IT Training Base-Seo in Qingdao Development Zone
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
