| PrintNumber | ErrorLocation | Error | Correction | DateAdded |
|---|---|---|---|---|
| 1 | pii | First Printing: November 2011 | TBD with corrections April 2013 |
1/12/2012 |
| 1 | pxv | HTML used to be used primarily in web browsers on computers, but now, with the advent of smartphones and tablet computers, more people are accessing web pages on mobile devices. | HTML used to be used primarily in web browsers on computers, but now, with the popularity of smartphones and tablet computers, more people are accessing web pages on mobile devices. | 4/9/2013 |
| 1 | p1 | HTML5 is the latest version of HTML, and although adoption on desktop browsers such as Internet Explorer is slow, mobile devices are jumping on the bandwagon in record numbers. | HTML5 is the latest version of HTML, and although adoption on desktop browsers such as Internet Explorer has been slow, mobile devices are jumping on the bandwagon in record numbers. | 4/9/2013 |
| 1 | p3 | Because of these difficulties, a group of web designers and developers as well as browser makers and others got together in 2004 and formed the Web Hypertext Application Technology Working Group (WHATWG). | Because of the difficulties writing XHTML, a group of web designers and developers as well as browser makers got together in 2004 and formed the Web Hypertext Application Technology Working Group (WHATWG). | 4/9/2013 |
| 1 | p3 | HTML5 also adds a lot of new elements, including a streamlined doctype (or DTD—the first line of your HTML document. It tells the browser that this document is an HTML5 one), sectioning elements, many new form features, and support for drag and drop and other features useful for creating web applications. | HTML5 also adds a lot of new elements, including a streamlined doctype (or DTD—the first line of your HTML document. It tells the browser that this document is an HTML5 document), sectioning elements, many new form features, and support for drag and drop and other features useful for creating web applications. | 4/9/2013 |
| 1 | p5 | Use either the vi or Emacs command on a Linux computer. | Use either the vi or Emacs command on a Linux computer. | 4/9/2013 |
| 1 | p6 | In fact, only Internet Explorer 9 has decent HTML5 support. | In fact, only Internet Explorer 9 and 10 have decent HTML5 support. | 4/9/2013 |
| 1 | p7 | If you plan to create pages and applications for iOS and Android devices as well as desktop browsers, always test your documents in Internet Explorer 8. This browser (and IE 7) still has the lion’s share of the browser market, and if your page or application doesn’t work with it, your page or application won’t work for most people browsing the web. If you don’t have a Windows machine you can use an online tool such as Browsershots (http://browsershots.org/) to test in Internet Explorer and other browsers. | If you plan to create pages and applications for iOS and Android devices as well as desktop browsers, always test your documents in Internet Explorer 8. Internet Explorer 8 and 9 still have a large share of the browser market, and if your page or application doesn’t work with it, your page or application won’t work for most people browsing the web. If you don’t have a Windows machine you can use an online tool such as Browsershots (http://browsershots.org/) or IE NetRenderer (http://netrenderer.com/) to test in Internet Explorer and other browsers. You will learn more about testing in Hour 4, “Detecting Mobile Devices and HTML5 Support.” |
4/9/2013 |
| 1 | p7 | But what about mobile devices running on Android and iOS, such as a Xoom tablet or iPad? They all come with HTML5 support pretty much out of the box because they each run a browser (Safari on iOS and Chrome on Android) based on WebKit, which has excellent support for HTML5. | But what about mobile devices running on Android and iOS, such as a Samsung Galaxy Tab or iPad? They all come with HTML5 support out of the box because they each run a browser (Safari on iOS and Chrome on Android) based on WebKit, which has excellent support for HTML5. | 4/9/2013 |
| 1 | p8 | Tablets add to the mix by having not only an increased screen size, but also having a variation in how they can be viewed. For example, most tablets (and some smartphones for that matter) can be viewed in portrait or landscape mode. This means that sometimes you might have a 1024-pixels-wide screen to work with, and other times 800 pixels wide or less. However, in general, the tablets provide a lot more screen space for you to play with on mobile devices. You can assume you have around 1024–1280 pixels by 600–800 pixels for most tablet devices. |
Tablets add to the mix by having not only an increased screen size, but also having a variation in how they can be viewed. For example, most tablets (and some smartphones for that matter) can be viewed in portrait or landscape mode. There are also several sizes for tablets: . 1024 x 768—iOS tablets like iPad mini and iPad 2 . 1280 x 800—Smaller tablets like Kindle fire . 1920 x 1200—For tablets like the Transformer Pad Infinity . 2048 x 1536—For iPad retina . 2560 x 1600—Larger tablets like the Nexus 10 In general, the tablets provide a lot more screen space for you to play with on mobile devices. You can assume you have at least 1024–1280 pixels by 600–800 pixels for tablet devices. |
4/9/2013 |
| 1 | p8 | If the mobile site doesn’t have the phone number and location front-and-center, the user might quickly give up on the site. | If the mobile site doesn’t have the phone number and location front-and-center, the user will quickly give up on the site. | 4/9/2013 |
| 1 | p10 | When trying to decide how to handle your mobile site version, consider how you are going to maintain the site. You can create the mobile domain manually with completely separate pages, or you can use a content management system. Hour 4, “Detecting Mobile Devices and HTML5 Support,” covers this topic in more detail. |
When trying to decide how to handle your mobile site version, consider how you are going to maintain the site. You can create the mobile domain manually with completely separate pages, or you can use a content management system. Another popular solution for mobile devices is to use responsive design with CSS. Hour 4, “Detecting Mobile Devices and HTML5 Support,” covers this topic in more detail. | 4/9/2013 |
| 1 | p13 | With this method, even if you can’t get direct customer feedback you can see what features they are currently using and adjust your site accordingly. | With this method, even if you can’t get direct customer feedback, you can see what features they are currently using and adjust your site accordingly. | 4/9/2013 |
| 1 | p16 | . <aside>—Content that is tangential to the main part of the page or site. . <figcaption>—Caption for a figure. . <figure>—A figure or quotation pulled out of the flow of text. |
. <aside>—Content that is tangential to the main topic of the page or site. . <figcaption>—Caption for a figure. . <figure>—An image or quotation pulled out of the flow of text. |
4/9/2013 |
| 1 | p16 | 4/9/2013 | ||
| 1 | p17 | <title>My HTML 4 2-Column Page</title> <link type=”text/css” href=”styles.css”> </head> <body> <section id=”main”> <header> <h1>My HTML 4 2-Column Page</h1> |
<title>My HTML 5 2-Column Page</title> <link type=”text/css” href=”styles.css”> </head> <body> <section id=”main”> <header> <h1>My HTML 5 2-Column Page</h1> |
4/9/2013 |
| 1 | p18-19 | . <details>—Control for adding more information. . <figcaption>—Caption for a figure. . <figure>—A figure or quotation pulled out of the flow of text. . <mark>—Content that has been highlighted or marked. |
. <details>—Control for adding more information. . <mark>—Content that has been highlighted or marked. |
4/9/2013 |
| 1 | p20 | As you can see in Figure 2.2, the iOS browsers already support the <canvas> tag. |
As you can see in Figure 2.2, the Android browser already support the <canvas> tag. | 4/9/2013 |
| 1 | p21 | // put code for browsers that don’t support canvas here alert(“This page requires an HTML5 compliant browser to render correctly. Other browsers may not see anything.”) |
// put code for browsers that don’t support canvas here alert(“This page requires an HTML5 compliant browser to render [ccc]correctly. Other browsers may not see anything.”) |
4/9/2013 |
| 1 | p21 | If you use the preceding script to add a <canvas> square to your web page, don’t forget to change your <body> tag to load the script to <body onload=”drawSquare”>. Otherwise, your <canvas> will remain blank. | If you use the preceding script to add a <canvas> square to your web page, don’t forget to change your <body> tag to load the script to <body onload=”drawSquare()”>. Otherwise, your <canvas> will remain blank. | 4/9/2013 |
| 1 | p21 | HTML5 has some other interesting additions to the language. | HTML5 has some other interesting multimedia elements. | 4/9/2013 |
| 1 | p21 | Not all types will play natively in the browsers, but this flexibility means that when formats improve, your web pages won’t need to change to a new tag. | Not all types will play in the browsers, but this flexibility means that when formats improve, your web pages won’t need to change to a new tag. | 4/9/2013 |
| 1 | p26 | If you include the border attribute on an <img> tag to turn off the border, you must give it a value of “0.” Using CSS, such as img {border: none;} instead is better. | If you include the border attribute on an <img> tag to turn off the border, you must give it a value of “0,” for example, border=0. Using CSS, such as img {border: none;} is better. | 4/9/2013 |
| 1 | p28 | But that changed in March 2011, when Microsoft stated that an HTML5 browser was on track for release to its mobile platform. | But that changed in 2012, when the Windows phone came out with Internet Explorer 10 and full HTML5 support. | 4/9/2013 |
| 1 | p33 | Cascading Style Sheets (CSS) are an important part of mobile web development. In this hour you will learn about how to write CSS and use it to style your mobile pages, including media queries to build style sheets for specific devices. | Cascading Style Sheets (CSS) are an important part of mobile web development. In this hour you will learn about how to write CSS and use it to style your mobile pages, including media queries for responsive design to build style sheets for specific devices. | 4/9/2013 |
| 1 | p33 | CSS has been around for more than 10 years and is widely supported by most browsers and mobile devices. | CSS has been around for more than 12 years and is widely supported by most browsers and mobile devices. | 4/9/2013 |
| 1 | p34 | To add a second selector, simply separate it with a comma: | To add a second selector, simply separate it with a comma. For example, this assigns the red color to paragraphs and elements with the class redText: | 4/9/2013 |
| 1 | p34 | For example, to color the text of a single paragraph in your HTML red you would write: | For example, to color the text of a single paragraph red you would write: | 4/9/2013 |
| 1 | p35 | Using embedded styles only for testing and for small style changes that are applied to only the one page is best. |
Only use embedded styles for testing or for small style changes that are only needed on one page. |
4/9/2013 |
| 1 | p35 | Open a new document. | Open a new document in your text editor. | 4/9/2013 |
| 1 | p35 | font: 1em/1.25 Arial, Helvetica, sans-serif; | font: 1em/1.25em Arial, Helvetica, sans-serif; | 4/9/2013 |
| 1 | p40 | 4. Set the width of the header and footer to 100% as well: header { width: 100% } footer { width: 100% } |
4. Set the width of the header and footer to 100% as well: header { width: 100% ; } footer { width: 100%; } |
4/9/2013 |
| 1 | p41 | First line of page: header { width: 100% } |
header { width: 100% ; } | 4/9/2013 |
| 1 | p43 | However, you also need to include the browser extensions for Firefox and WebKit to have your styles show up in those browsers. WebKit extensions will apply to iOS and Android devices as well as Safari and Chrome. Opera uses the CSS3 properties rather than any extension. Table 3.1 shows the CSS3 properties and their browser-specific extensions. Be sure to test in the browsers you support, because the most modern versions of Chrome, Firefox, and Safari don’t need the extensions. | The border-radius properties are well supported by modern browsers. You can use the CSS3 values in all instances unless you are writing for extremely old versions of Firefox or iOS/Safari. But it's a good idea to include the extensions for backwards compatibility. Table 3.1 shows the CSS3 properties and their browser-specific extensions. Be sure to test in the browsers you support, because the modern versions of Chrome, Firefox, and Safari don’t need the extensions. Even Internet Explorer 9 and 10 support this property. | 4/9/2013 |
| 1 | p44 | 4. Style the top-left corner with a round corner, and don’t forget the browser extensions: border-top-left-radius: 25px; -moz-border-radius-topleft: 25px; -webkit-border-top-left-radius: 25px; 5. Style the top-right corner with an even ellipse (which is the same as a rounded corner): border-top-right-radius: 65px 65px; -moz-border-radius-topright: 65px 65px; -webkit-border-top-right-radius: 65px; 65px; 6. Give the bottom two corners uneven ellipses: border-bottom-left-radius: 100px 50px; -moz-border-radius-bottomleft: 100px 50px; -webkit-border-bottom-left-radius: 100px 50px; border-bottom-right-radius: 135px 25px; -moz-border-radius-bottomright: 135px 25px; -webkit-border-bottom-right-radius: 135px 25px; |
4. Style the top-left corner with a round corner, and don't forget to put the browser extensions first, and the CSS3 property last: -moz-border-radius-topleft: 25px; -webkit-border-top-left-radius: 25px; border-top-left-radius: 25px; 5. Style the top-right corner with an even ellipse (which is the same as a rounded corner): -moz-border-radius-topright: 65px; -webkit-border-top-right-radius: 65px; border-top-right-radius: 65px; 6. Give the bottom two corners uneven ellipses: -moz-border-radius-bottomleft: 100px 50px; -webkit-border-bottom-left-radius: 100px 50px; border-bottom-left-radius: 100px 50px; -moz-border-radius-bottomright: 135px 25px; -webkit-border-bottom-right-radius: 135px 25px; border-bottom-right-radius: 135px 25px; |
4/9/2013 |
| 1 | p46 | CSS3 is well supported by modern smartphones and tablets that use WeKit- and Opera-based browsers. Both Android and iOS devices support many elements of CSS3, but older phones might have trouble with these styles. Also, mobile devices using Windows operating systems may not have good CSS3 support. Internet Explorer has not had good CSS3 support until version 9, and the mobile versions of this browser are just as bad. When you’re using CSS3, be sure to always use the browser extensions as well as the CSS3 styles for the most support, and always test in as many browsers as possible when you’re using a style you’re not familiar with. |
CSS3 is well supported by modern smartphones and tablets that use WebKit- and Opera-based browsers. Both Android and iOS devices as well as Windows 8 phones, support many elements of CSS3, but older phones might have trouble with these styles. Also, mobile devices using versions of Windows older than Windows 8 may not have good CSS3 support. Internet Explorer has not had good CSS3 support until version 9, and the mobile versions of this browser are just as bad. When you're using CSS3, be sure to always place browser extensions first with the CSS3 property last for the broadest support, and always test in as many browsers as possible when you’re using a style you’re not familiar with. |
4/9/2013 |
| 1 | p46-47 | A. This book does not cover many CSS3 properties, because they aren’t well supported by modern browsers. | A. This book does not cover many CSS3 properties, but there are a lot more that are supported by modern browsers both with and without extensions. (caused page to wrap) |
4/9/2013 |
| 1 | p47 | A. This is partially true. Internet Explorer 5, 6, and 7 all implemented the CSS box model slightly differently than other, more standards-compliant browsers. These versions of IE did things like double the padding when you float an element inside another and count the padding as part of the width of the element, rather than adding it on. You can find hacks online to fix these problems, but luckily Internet Explorer 8 and 9 both were brought into compliance with the standards, and so you may only see these issues in older browser versions. | A. This is partially true. Internet Explorer 5, 6, and 7 all implemented the CSS box model slightly differently than other, more standards-compliant browsers. These versions of IE did things like double the padding when you float an element inside another and count the padding as part of the width of the element, rather than adding it on. You can find hacks online to fix these problems, but luckily Internet Explorer 8 and beyond was brought into compliance with the standards, and so you should only see these issues in older browser versions. | 4/9/2013 |
| 1 | p49 | . Either you decide to support everything you possibly can, and are tempted to ignore anything that doesn’t work. | . Either you decide to support everything you possibly can, and ignore all browsers that don't work. | 4/9/2013 |
| 1 | p50 | The problem many web designers have with using HTML5 and CSS3 is that the majority of web browsers don’t support them. By majority, I mean Internet Explorer. Internet Explorer 9 only came out in early 2011, and all versions prior to it have virtually no HTML5 support and limited CSS3 support. | The problem many web designers have with using HTML5 and CSS3 is that they think the majority of web browsers don't support them. By majority, they mean Internet Explorer. Internet Explorer 9 came out in early 2011, and all versions prior to it have virtually no HTML5 support and limited CSS3 support. But Internet Explorer 9 and 10 have good HTML5 and CSS3 support. And more importantly, they have a much smaller share of the browser market. | 4/9/2013 |
| 1 | p50 | But as of this writing, no web browser supports all the HTML5 standards. | But as of this writing, no web browser supports all the HTML5 or CSS3 standards. | 4/9/2013 |
| 1 | p50 | When you’re choosing what parts of HTML5 you want to use, think about the features that you want on your site, rather than the browsers and devices you want to support. That may sound like I’m advocating going back to the bad old days when websites had notes written to certain browser users suggesting they go download a better browser, but I’m not. Remember, some organizations and schools have rules about what browsers and versions can and can’t be used, and these are often much older than most web designers would prefer. As you’ll see in this hour, choosing the technology you want to support without leaving the people and the browsers and devices they use out in the cold is possible. |
When you’re choosing what parts of HTML5 you want to use, think about the features that you want on your site, rather than the browsers and devices you want to support. Don't worry about the browsers or versions. Remember, some organizations and schools have rules about what browsers and versions can and can't be used, and these are often older than we web designers would like. Instead, build your web pages so the most advanced features are optional. As you’ll learn in this hour, choosing the technology you want to support without leaving the people and the browsers and devices they use out in the cold is possible. |
4/9/2013 |
| 1 | p50 | The most current versions of iOS and Android have about 47% and 49% HTML5 support, respectively. Opera Mobile has 58% HTML5 support. | The most current versions of iOS and Android have about 66% and 60% HTML5 support, respectively. Opera Mobile has 73% HTML5 support. | 4/9/2013 |
| 1 | p50-51 | The most recent versions of Chrome, Firefox, Opera, and Safari support more than 60% of the HTML5 features, and even IE9 supports 52% of HTML5. But the problem comes when you look at their market share. Chrome 10 through 13 have the most HTML5 support, but only 17% of the browser market. In fact, the largest market share in desktop markets still belongs to Internet Explorer 8, 7, and 6 with 29.6% in July 20111, and these versions only support at best 20% of the HTML5 features. In comparison, iOS and Android have nearly 40% of the market and with Opera, the penetration is closer to two-thirds. Now, how many of those browsers are using the most recent versions of their operating systems isn’t clear, but iOS and Android have had at least 25% HTML5 support going back two generations. |
However, when you look at browser usage statistics, this paints a very different picture. The most recent versions of Chrome, Firefox, Opera, and Safari support more than 71% of the HTML5 features, and even IE10 supports 68% of HTML5. | 4/9/2013 |
| 1 | p51 | Table 4.1 HTML5 Support in Modern Browsers All info in table updated. |
fixed | 4/9/2013 |
| 1 | p52 | Opera Mini, unlike its bigger cousin, Opera Mobile, does not have good HTML5 support—only 15% in fact. | Opera Mini, unlike its bigger cousin, Opera Mobile, does not have good HTML5 support—only 10% in fact. | 4/10/2013 |
| 1 | p52 | As you can see from Table 4.1, people don’t upgrade their desktop browsers, but they do upgrade their mobile browsers. This is because when they purchase a new phone, they get a new browser, and many people purchase new cellphones almost every year. In fact, a prediction is that mobile users will overtake desktop internet users by 2014, and possibly even sooner.5 | As you can see from Table 4.1, people don’t upgrade their desktop browsers, as quickly as they upgrade their mobile browsers. This is because when they purchase a new phone, they get a new browser, and many people purchase new cellphones almost every year. In fact, a prediction is that mobile users will overtake desktop internet users by 2014, and possibly even sooner.4 | 4/10/2013 |
| 1 | p53 | But if you just detect to see whether geolocation works, then any new browser that comes out with geolocation will work with your application. | But if you just detect to see whether geolocation works, then any new browser that comes out with geolocation will work with your application automatically. | 4/10/2013 |
| 1 | p57 | When you test in older versions of Internet Explorer, the new tags will have styles. |
When you test in older versions of Internet Explorer, the new tags will have styles and other browsers and more modern versions of IE will ignore the script completely. | 4/10/2013 |
| 1 | p58 | Back when IE had the majority browser share, expecting people to switch to IE was almost understandable, but these days IE is just one of a number of equally good browsers, and at the rate things are changing IE probably won’t even be the most popular before too long. | Back when IE had the majority browser share, expecting people to switch to IE was almost understandable, but these days IE is just one of a number of equally good browsers, and it is no longer the most popular browser. | 4/10/2013 |
| 1 | p59 | This is your ultimate app—the app that only cutting-edge users will see. |
This is your ultimate app—the app that cutting-edge users will see. |
4/10/2013 |
| 1 | p59 | Then, as your readers improve their tools, they will think your application is improving as well. | Then, as your readers improve their browsers, they will think your application is improving as well. | 4/10/2013 |
| 1 | p61 | The same is true of the height and device-height keywords for height. | The same is true of the height and device-height keywords for height. By creating different styles for different width devices and defining those styles with media queries, you can create a web page that adjusts depending upon what size device is viewing it. This is often called "responsive design." | 4/10/2013 |
| 1 | p64 | To do this detection, you learned four methods of testing for HTML5 technology as well as how to target specific devices with CSS3 media queries. | To do this detection, you learned four methods of testing for HTML5 technology as well as how to target specific devices with CSS3 media queries and responsive design. | 4/10/2013 |
| 1 | p65 | This script checks for Android, Blackberry, iPad, iPhone, iPod, Windows Mobile, Opera Mobile, PalmOS, WebOS, and the Google mobile search robot, and redirects them to your mobile site at http://m.yoursitename.com/. | This script checks for Android, Blackberry, iPad, iPhone, iPod, Windows Mobile, Opera Mobile, PalmOS, WebOS, and the Google mobile search robot, and redirects them to your mobile site at http://m.yoursitename.com/. To do this detection, you learned four methods of testing for HTML5 technology as well as how to target specific devices with CSS3 media queries and responsive design. | 4/10/2013 |
| 1 | p68 | To add JavaScript to a web page, you use the <script> tag. You can place scripts in the <head> or in the <body> of your document. You also can trigger script functions in any event attribute, such as onmouseover or onload. |
To add JavaScript to a web page, you use the <script> tag. You can place scripts in the <head> or in the <body> of your document, but the best place to put your scripts is at the very bottom of your HTML document, right before the closing </body> tag. This is a best practice and will help your pages load more quickly. You also can trigger script functions in any event attribute, such as onmouseover or onload. |
4/10/2013 |
| 1 | p69 | <html> <head> <title>Simple JavaScript</title> <script> function hello() { alert(“Hello World”); } </script> </head> <body> <a href=”#” onclick=”hello();”>Click Me</a> <noscript> <p>Hello World <p>This text is not written with JavaScript. </noscript> </body> </html> |
<html> <head> <title>Simple JavaScript</title> </head> <body> <a href=”#” onclick=”hello();”>Click Me</a> <noscript> <p>Hello World <p>This text is not written with JavaScript. </noscript> <script> function hello() { alert(“Hello World”); } </script> </body> </html> |
4/10/2013 |
| 1 | p70 | When you remove an item with visibility: hidden: you are simply hiding it from sight. It still will take up space in your design. | When you remove an item with visibility: hidden: you are simply hiding it from sight. It will still take up space in your design. | 4/10/2013 |
| 1 | p71 | Although this JavaScript usage can be annoying, it can be useful for web applications, for things like displaying extra information and requesting data. | Although this can be annoying, popups can be useful for web applications, for things like displaying extra information and requesting data. | 4/10/2013 |
| 1 | p73 | If you guessed that it puts a red (#f00) background on all elements with the class red you would be right. | If you guessed that it puts a red (#f00) background color on all elements with the class red you would be right. | 4/10/2013 |
| 1 | p76 | You can see this example in action at www.enjoyscifi.com/rollover-test.html. | You can see this example in action at www.html5in24hours.com/examples/rollover-test.html. | 4/10/2013 |
| 1 | p76 | In fact, as in other aspects of jQuery, writing the scripting is faster than writing the HTML and CSS you want to modify. | In fact, as in other aspects of jQuery, writing the script is faster than writing the HTML and CSS you want to modify. | 4/10/2013 |
| 1 | p77 | #contactForm input, #contactForm textarea { width: 400px; border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em; |
#contactForm input, #contactForm textarea { width: 400px; -moz-border-radius: 1em; -webkit-border-radius: 1em; border-radius: 1em; |
4/10/2013 |
| 1 | p79 | jQuery condenses the JavaScript—Approximately five lines of jQuery is equivalent to five times that much JavaScript, but web applications, especially mobile applications, must be small and nimble. |
jQuery condenses the JavaScript—Approximately five lines of jQuery is equivalent to five times that much JavaScript, and web applications, especially mobile applications, must be small and nimble. |
4/10/2013 |
| 1 | p83 | A. Several themes are pre-built into jQuery Mobile that you can use to change the colors of your applications, or you can adjust the styles yourself. Plans are also in place for a theme roller so that you can create your own. | A. Several themes are pre-built into jQuery Mobile that you can use to change the colors of your applications, or you can adjust the styles yourself. There is also a jQuery Mobile ThemeRoller at http://jquerymobile.com/themeroller/index.php where you can create the exact themes you want for your mobile site. | 4/10/2013 |
| 1 | p87 | These are sometimes called “SMART” goals because they are Specific Measurable, Actionable, Realistic, and Time-bound. | These are sometimes called “SMART” goals because they are Specific, Measurable, Actionable, Realistic, and Time-bound. | 4/10/2013 |
| 1 | p87 | A good idea is to create aggregates, even give them names and photographs, to help you visualize your customers and potential customers. | A good idea is to create aggregates and even give them names and photographs, to help you visualize your customers and potential customers. | 4/11/2013 |
| 1 | p92 | Android came with three: Droid Sans, Droid Mono, and Droid Serif, but users can download more. | The original Android phones came with three: Droid Sans, Droid Mono, and Droid Serif, but users can download more. | 4/11/2013 |
| 1 | p95 | Then you use your media query style sheets only to modify the main one. | Then you use your media query style sheets only to modify the main one. This is how responsive design works. | 4/11/2013 |
| 1 | p95 | Learn how to add media queries to your web applications to support feature phones, smartphones, tablets, and computer browsers. | Responsive design uses CSS media queries to define different styles for different devices. Learn how to add media queries to your web applications to support feature phones, smartphones, tablets, and computer browsers. | 4/11/2013 |
| 1 | p98 | Some versions of Android (1.5, 1.6, 2.1, and so on) don’t support all the preceding meta tags reliably. | Some older versions of Android (1.5, 1.6, 2.1, and so on) don’t support all the preceding meta tags reliably. | 4/11/2013 |
| 1 | p106 | At the end of April 2011, Internet Explorer 6 had 2.86% of the browser market.1 This may not seem like a lot, but extrapolated over the entire web, that is a huge number of browsers. In fact, IE 6 is still in the top 10 most popular browsers. The problem is that IE 6 has a large number of bugs that make it very difficult to design for. The most well-known bug is the way IE 6 handles floated margins. If you use the CSS from the standards to add a margin to a box with a floated element inside it, IE 6 will double that margin, as shown in Figure 7.1 Many other bugs similar to this one exist, where Internet Explorer 6 does not support the HTML and CSS standards correctly. Yet, it is a very popular browser. |
Internet Explorer 6 has a large number of bugs that make it very difficult to design for. The most well-known bug is the way IE 6 handles floated margins. If you use the CSS from the standards to add a margin to a box with a floated element inside it, IE 6 will double that margin, as shown in Figure 7.1 Many other bugs similar to this one exist, where Internet Explorer 6 does not support the HTML and CSS standards correctly. |
4/11/2013 |
| 1 | p106-107 | Because of compatibility mode, web designers are forced to continue to support hacks and workarounds just to ensure that their pages are viewable by Internet Explorer, the most commonly used browser. | Because of compatibility mode, web designers are forced to continue to support hacks and workarounds just to ensure that their pages are viewable by Internet Explorer. | 4/11/2013 |
| 1 | p108 | On desktop browsers, Firefox 4, Safari 5, Chrome 5, and Opera 11 all have good support of HTML5 features. These browsers support 60% or more of the features in the HTML5 specifications. Mobile browsers don’t have as good support as desktop browsers with Android 3.0 and Opera mobile 11.5 supporting 60% or more of the features. iOS and Android 2.3 support a little less than 50% of HTML5 features. | On desktop browsers, Firefox 4+, Safari 5+, Chrome 5+, and Opera 11+ all have good support of HTML5 features. These browsers support 60% or more of the features in the HTML5 specifications. Mobile browsers don’t have as good support as desktop browsers with Android 3.0 and Opera mobile 11.5 supporting 60% or more of the features. iOS and Android 2.3 support a little less than 50% of HTML5 features, but every new version of these browsers adds a little better support. | 4/11/2013 |
| 1 | p109 | You might be tempted to go to a site like W3Counter.com, note that Internet Explorer still has the largest market share, and give up on HTML5 before you even start. | You might be tempted to go to a site like W3Counter.com, note that Internet Explorer still has the second largest market share, and give up on HTML5 before you even start. | 4/11/2013 |
| 1 | p109 | That site designer should avoid focusing on Internet Explorer. | The Apple and Firefox site designers should avoid focusing on Internet Explorer. | 4/11/2013 |
| 1 | p109 | The possibility exists that people using Safari (which has good HTML5 support) or Chrome (which has excellent support) would spend more money or give you more revenue than the Internet Explorer users to whom you are currently catering. | The possibility exists that people using Safari (which has good HTML5 support) or Chrome (which also has good support) would spend more money or give you more revenue than the Internet Explorer users to whom you are currently catering. | 4/11/2013 |
| 1 | p110 | In December 2010, it was found that 20% of all US and UK internet users only browse the web over mobile devices.2 In Africa and Asia, that number is closer to 50%. A lot more people do periodic web browsing on mobile, and with the growth in popularity of tablets like the iPad, that fact is becoming even more so. The first iPad had sales figures in the millions in just the first few weeks, and analysts estimate that between 400,000 and 800,000 iPad 2s sold in the first three days.3 Mobile use will likely continue to grow in the future for all sites. If you are starting to write pages that support mobile, your site will be ahead of the game. | In December 2010, it was found that 20% of all US and UK internet users only browse the web over mobile devices.1 In Africa and Asia, that number is closer to 50%. A lot more people do periodic web browsing on mobile, and with the growth in popularity of tablets like the iPad, that fact is becoming even more so. The first iPad had sales figures in the millions in just the first few weeks, and analysts estimate that between 400,000 and 800,000 iPad 2s sold in the first three days.2 And since then the iPad 3, iPad 4, iPad mini, and many many Android tablets have entered the market. Mobile use will likely continue to grow in the future for all sites. If you are starting to write pages that support mobile, your site will be ahead of the game. | 4/11/2013 |
| 1 | p112 | Datasets and the data-* attributes—This has great support on Chrome and Opera 11.1, but it has limited support on IE, Firefox, Safari, Android, iOS, and Opera Mini and Mobile. Hour 17, “HTML5 Links,” covers this topic more. | Datasets and the data-* attributes—This has great support on Chrome, Firefox, Opera, and Safari, as well as iOS and Android. It has partial support in IE 8, 9, and 10. Hour 17, “HTML5 Links,” covers this topic more. | 4/11/2013 |
| 1 | p113 | HTML5 also has a number of things that, though they aren’t supported by IE 8, they are supported in IE 9: | HTML5 also has a number of things that, though they aren’t supported by IE 8, they are supported in IE 9 and 10: | 4/11/2013 |
| 1 | p113 | Video—IE 8, Safari 3.2, iOS 3.2, Opera Mini, and Opera Mobile 10 don’t support the video tag. Android 2.2 and 2.1 have limited support. However, many browsers and more recent versions of Safari and iOS support it. You’ll learn about the video tag in Hour 12. | Video—IE 8 and Opera Mini don’t support the video tag. However, many browsers and more recent versions of Safari and iOS support it. You’ll learn about the video tag in Hour 12. | 4/11/2013 |
| 1 | p113 | Offline web applications—This feature isn’t supported by IE 9, but it does have good mobile support on iOS and Android, and good support on Firefox, Safari, Opera and Chrome. Hour 21, “Web Storage in HTML5,” goes into more detail. | Offline web applications—This feature isn’t supported by IE 9, but it does have good mobile support on iOS and Android, and good support on IE 10, Firefox, Safari, Opera and Chrome. Hour 21, “Web Storage in HTML5,” goes into more detail. | 4/11/2013 |
| 1 | p113 | The new semantic elements—These new elements are supported in all the current browser versions. They aren’t supported by IE 8, but a workaround is available. | The new semantic elements—These new elements are supported in all the current browser versions. They aren’t supported by IE 8, but a workaround is available and IE 9+ supports them. | 4/11/2013 |
| 1 | p113 | History management—Current versions of Chrome, Android, and Firefox all support the history API. Safari and iOS have partial support. Hour 22, “Controlling the Browser History with the History API,” can teach you all about the history API. |
History management—Current versions of Internet Explorer, Chrome, iOS, , Android, and Firefox all support the history API. Safari has partial support. Hour 22, “Controlling the Browser History with the History API,” can teach you all about the history API. | 4/11/2013 |
| 1 | p115 | SVG—Scalable Vector Graphics is supported in the current versions of all web browsers except Android 2.3. Hour 10 discusses more about SVG. | SVG—Scalable Vector Graphics is supported in the current versions of all web browsers. Hour 10 discusses more about SVG. | 4/11/2013 |
| 1 | p117 | Until just recently, most web browsers did not have built-in checks for new versions, and if they did, they could be easily cancelled by users who did not want to upgrade. | It's only in the last couple years that web browsers had built-in checks for new versions and auto-updates. | 4/11/2013 |
| 1 | p120 | You can get a trial version of Dreamweaver from the Adobe website (www.adobe.com/products/dreamweaver.html). | You can get a trial version of the most recent version of Dreamweaver from the Adobe website (www.adobe.com/products/dreamweaver.html). | 4/11/2013 |
| 1 | p128 | 7. Include the browser extensions, for maximum support: | 7. Include the browser extensions above the CSS3 property, for maximum support: | 4/11/2013 |
| 1 | p134 | . WebOS (http://developer.palm.com/index.php?option=com_ content&view=article&id=1788&Itemid=55) |
delete | 4/11/2013 |
| 1 | p135 | The web page in Figure 8.5 is displayed with the background different in compliant browsers. | The web page in Figure 8.5 has a colored background color in HTML5 compliant browsers. (now on p134) |
4/11/2013 |
| 1 | p136 | This script won’t make Internet Explorer suddenly play videos with the <video> tag or show vector graphics in the <canvas> tag. | This script won’t make older versions of IE suddenly play videos with the <video> tag or show vector graphics in the <canvas> tag. | 4/11/2013 |
| 1 | p144 | Where most web designers will find the most value in these new sectioning elements is how they provide more human-readable structure to the documents. | The best thing about the new sectioning elements is how easy they make the HTML to read. | 4/11/2013 |
| 1 | p146 | In HTML 4 the <h1> through <h6> tags were about the only outlining option designers had, so the recommendation was to use only one <h1> tag—for the page title. | In HTML 4 the <h1> through <h6> tags were the only outlining option designers had, so the recommendation was to use only one <h1> tag—for the page title. | 4/11/2013 |
| 1 | p147 | The <menu> element is really a list of commands. | The <menu> element is a list of commands. | 4/11/2013 |
| 1 | p153 | 6. Put a <footer> including your name and the date inside the <article>: <footer> <p>By: <address><a href=”mailto:me@myurl.com”>Jennifer</a></address> <p>Date: <time datetime=”2011-05-12”>May 12, 2011</time> </footer> </article> |
6. Put a <footer> including your name and the date inside the <article>: <footer> <p>By: <address><a href=”mailto:enn@html5in24hours.com”>Jennifer</a></address> <p>Date: <time datetime=”2011-05-12”>May 12, 2011</time> </footer> </article> |
4/11/2013 |
| 1 | p167 | Figure 10.1 shows these three functions used on one canvas. The black boxes are two fillRect functions, one first filling the entire canvas and the other one last, filling the inner space. The white box is created with a clearRect function to bring the <canvas> element back to its default color (white). The thin black line is drawn with the strokeRect function. | Figure 10.1 shows these three functions used on one canvas. There are two black boxes on the canvas. The first fills the entire canvas with black and the second is drawn last creating a square in the middle. The white box is created with a clearRect function to bring the <canvas> element back to its default color (white). The thin black line is drawn with the strokeRect function. The canvas draws the squares in order one on top of another, creating a decorative final shape. | 4/11/2013 |
| 1 | p170 | Because radial gradients are defined as circles, you can use them to draw circles on your canvas. If you want to fill an object that is not a circle, then you need to make sure the second circle completely surrounds the object. | Because radial gradients are defined as circles, you can use them to draw circles on your canvas. If you want to fill an object that is not a circle, then you need to make sure the second circle completely surrounds the object, so that the object acts as a clipping path for the gradient. | 4/11/2013 |
| 1 | p175 | Arcs in the <canvas> element are measured in radians, not degrees. Radians do not have the same starting point as degrees (in degrees 0° is noon, but in radians it is not). | Arcs in the <canvas> element are measured in radians, not degrees. The starting point (0° or 0 radians) is at 3 o'clock on a clock face. And radians are measured differently than degrees. 1 radian equals about 57.3 degrees, and there are about 6 radians in every circle. | 4/11/2013 |
| 1 | p180 | Odd printer markin center of code. | deleted | 4/11/2013 |
| 1 | p183 | Table 10.1, 4 rows down: Few if any commercial programs exist for building canvas graphics. | Few commercial programs exist for building canvas graphics. | 4/11/2013 |
| 1 | p184 | An experimental context has been enabled in Chrome, Firefox 4, and Internet Explorer 9 to enable three-dimensional context: WebGL. You use ”experimental-webgl” to enable this context. | An experimental context has been enabled in Chrome, Firefox 4+, and Internet Explorer 9+ to enable three-dimensional context: WebGL. You use ”experimental-webgl” to enable this context. | 4/11/2013 |
| 1 | p185 | A. Yes, you can add shadows to all the canvas shapes, but if you add a shadow to a drawing with a gradient fill applied to it, the shadow will not be displayed. This is a browser bug that has been marked as fixed, but still seems to be a problem. Adding a shadow to a gradient-filled shape works in Firefox 4 but not Chrome or Safari, as of this writing. | A. Yes, you can add shadows to all the canvas shapes, but you should test it in your browsers. Some older browser versions have difficulty displaying shadows on elements with gradient fills. | 4/11/2013 |
| 1 | p189 | font—A shorthand property that describes the font style, variant, weight, size, line-height, and family in the following format: font: font-style font-variant font-weight font-size/line-height font-family;. For example, |
font—A shorthand property that describes the font style, variant, weight, size, line-height, and family in the following format: font: font-style font-variant font-weight font-size/line-height font-family;. For example, (wrong font) |
4/11/2013 |
| 1 | p190 | font-emphasize—This is a shorthand property for the two emphasize properties. Use font-emphasize: font-emphasize-style font-emphasize-position; for example: |
font-emphasize—This is a shorthand property for the two emphasize properties. Use font-emphasize: font-emphasize-style font-emphasize-position; for example: (wrong font) |
4/11/2013 |
| 1 | p195 | hyphenation-limit-last: all; | hyphenate-limit-last: all; | 4/11/2013 |
| 1 | p197 | Table 11.1, Guillemets, wrong character used. | fixed | 4/11/2013 |
| 1 | p199 | . Safari 5 does not support WOFF, although it is expected to be supported in Safari 6. . The only mobile platform to support it currently is Opera Mobile. Neither iOS nor Android support WOFF |
. Android devices do not yet support WOFF. | 4/11/2013 |
| 1 | p199 | Android has limited support in 3.0 and 2, and Opera Mobile fully supports it. | Android has limited support in 3.0 and 2, and 4.0 and up fully support it, and Opera Mobile fully supports it. | 4/11/2013 |
| 1 | p206 | Chrome and Android support all three. Firefox and Opera support ogg/Theora and WebM. IE 9 supports MP4 and WebM with an add-on. Safari and iOS support MP4. | Chrome supports all three. Firefox, Chrome, and Opera support ogg/Theora. Chrome, IE 9, Safari, iOS, and Android support H.264. Firefox, Chrome, Opera, and Android support WebM. | 4/11/2013 |
| 1 | p207 | Table 12.1 updated. | fixed | 4/11/2013 |
| 1 | p208 | ...(makers of Firefox) have stated that Firefox will never support H.264 video because of patent issues and their focus on open source software. | ...(makers of Firefox) have stated that Firefox will never support H.264 video because of patent issues and their focus on open source software. Microsoft has created a plugin for Firefox users on Windows 7+, but there is no support for Macintosh users. | 4/11/2013 |
| 1 | p223 | A lot of the features of HTML5 forms are things that you can already do with scripts, but now they are built into the HTML, which reduces the page load time and makes build forms easier. | A lot of the features of HTML5 forms are things that you can already do with scripts, but now they are built into the HTML, which reduces the page load time and makes building forms easier. | 4/11/2013 |
| 1 | p224 | It provides information about the form fields or how the data should be formatted but doesn’t get in the way of what is written in the form field. | It provides information about the form fields and how the data should be formatted but doesn’t get in the way of what is written in the form field. | 4/11/2013 |
| 1 | p224 | To add placeholder text to a form field, add the placeholder attribute to the element, with the text you want as the placeholder as the value: | To add placeholder text to a form field, add the placeholder attribute to the form element, with the text you want as the placeholder as the value: | 4/11/2013 |
| 1 | p225 | The colons are required because the extensions are pseudo-classes. | The colons are required because the extensions are pseudo-classes and yes, the WebKit extension uses two colons. | 4/11/2013 |
| 1 | p226 | You can use the placeholder attribute on <input> and <textarea> elements. It works in Chrome 4, Firefox 3.7, iOS 4, Opera 11, and Safari 4. It does not work in Android or Internet Explorer. | You can use the placeholder attribute on <input> and <textarea> elements. It works in Chrome 4, Firefox 3.7, Internet Explorer 10, Opera 11, Safari 4. And on both iOS 3.2 and Android 2.1. | 4/11/2013 |
| 1 | p226 | It works in Chrome 3, Firefox 4, Opera 10, and Safari 4. |
It works in Chrome 3, Firefox 4, Internet Explorer 10, Opera 10, and Safari 4. |
4/11/2013 |
| 1 | p227 | The problem with autocomplete and <datalist> for most developers is that they only work in Opera. But with jQuery UI (http://jqueryui.com/) you can create a fallback option for browsers that don’t support it. | The autocomplete and <datalist> elements don't work on mobile devices (Android and iOS) or Safari. But they do work on Internet Explroer 10, Firefox, Chrome, and Opera. With jQuery UI (http://jqueryui.com/) you can create a fallback option for browsers that don’t support it. |
4/11/2013 |
| 1 | p230 | As mentioned earlier, you can use these input types without any fallback option, and they will show up as text boxes just fine in all non-compliant browsers. | As mentioned earlier, you can use these input types without any fallback option, and they will show up as text boxes in all non-compliant browsers. | 4/12/2013 |
| 1 | p232 | The most frustrating aspect of these input types is that right now, although Safari 5 will create a picker that puts the dates in these formats, the only browser that provides a real date picker is Opera 9. | The most frustrating aspect of these input types is that right now, although Chrome 20 will create a picker that puts the dates in these formats, the only browser that provides a real date picker is Opera 9. | 4/12/2013 |
| 1 | p234 | The color type adds a color picker to browsers that support it. At this time, that is only Opera 11. | The color type adds a color picker to browsers that support it. At this time, that is Chrome 20 and Opera 11. | 4/12/2013 |
| 1 | p234-235 | WebKit and Search Field Styles section is not formated correctly. | fixed | 4/12/2013 |
| 1 | p237 | The <command> element is not supported by any browser at the moment. The <menu> element still acts just like a <ul> list. | The <command> element is not fully supported by any browser at the moment and Firefox 8 only partially supports it. The <menu> element still acts just like a <ul> list. | 4/12/2013 |
| 1 | p237 | In Opera 9, Firefox 4, and Chrome 10, just by your adding an email or URL field these browsers will validate the email address and URL without your having to do anything else. | In Opera 9, Firefox 4, Internet Explorer 10, and Chrome 10, just by your adding an email or URL field these browsers will validate the email address and URL without your having to do anything else. | 4/12/2013 |
| 1 | p238 | However, the required field is only supported in Chrome 10, Firefox 4, and Opera 9, so you will still need to do some validation with JavaScript as well. | The required field is supported in Chrome 10, Firefox 4, Internet Explorer 10, Safari 5 (partially), and Opera 9, so you will still need to do some validation with JavaScript as well. | 4/12/2013 |
| 1 | p238 | The pattern attribute is supported by Chrome 10, Firefox 4, and Opera 9. | The pattern attribute is supported by Chrome 10, Firefox 4, Internet Explorer 10, and Opera 9. | 4/12/2013 |
| 1 | p240 | Now you have a form that will work, and in Chrome, Firefox, and Opera, there is some validation of the fields. | Now you have a form that will work, and in most modern browsers, there is some validation of the fields. | 4/12/2013 |
| 1 | p245 | So, after this hour you will be able to provide your readers with the ability to edit parts of your web pages with a rich text editor and verify the spelling in form elements and the sections they edit. | After this hour you will be able to provide your readers with the ability to edit parts of your web pages with a rich text editor and verify the spelling in form elements and the sections they edit. | 4/12/2013 |
| 1 | p251 | 4. Start the document ready function: <Script> |
4. Start the document ready function: <script> |
4/12/2013 |
| 1 | p276 | Most of the major browsers provide support for drag and drop, including Android 2.1, Chrome 3, Firefox 3.5, Internet Explorer 5, and Safari 3. It is not supported in iOS or Opera. | Most of the major browsers provide support for drag and drop, including Android 2.1, Chrome 3, Firefox 3.5, Internet Explorer 5, Opera 12, and Safari 3. It is not supported in iOS. | 4/12/2013 |
| 1 | p293 | HTML5 also adds a few new link type relations using the rel attribute. With Google’s recent announcements about supporting authorship markup (http://googlewebmastercentral.blogspot.com/2011/06/authorship-markup-and-web-search.html), these link relations are going to be even more important as time goes by. | HTML5 also adds a few new link type relations using the rel attribute. With Google’s recent announcements about supporting authorship markup (http://googlewebmastercentral.blogspot.com/2011/06/authorship-markup-and-web-search.html), these link relations are going to be even more important as time goes by. | 4/12/2013 |
| 1 | p294 | These link types are not a change in HTML5, but understanding the difference is important. | These link types are not new in HTML5, but understanding the difference is important. | 4/12/2013 |
| 1 | p298 | Be careful with this attribute, because it isn’t supported in Safari or Firefox without your adding the style display:none; to elements with this attribute. For example: | If you're worried about backwards compatibility of this attribute, you can use the style display:none; to elements with this attribute. For example: | 4/12/2013 |
| 1 | p303 | Content you don’t vouch for—Although not including links to sites you don’t vouch for is probably a better idea, if a reason exists for why you have to allow these links, such as in comments or guestbook entries, adding rel=nofollow to them indicates that they are not links you recommend. | Content you don’t vouch for—Although not including links to these sites in the first place for is probably a better idea, if a reason exists for why you have to allow these links, such as in comments or guestbook entries, adding rel=nofollow to them indicates that they are not links you recommend. | 4/12/2013 |
| 1 | p319 | The best part of data-* attributes is that you can use them in any browser. Some browsers, such as IE 10, Firefox 5, Opera 11, iOS 4.3, and Android 3.0, don’t support the dataset property, but you can still get the data inside the data-* attribute by using getAttribute(). | The best part of data-* attributes is that you can use them in any browser. Some browsers, such as IE 10, Firefox 5, Opera 11, iOS 4.3, and Android 2.3, don’t support the dataset property, but you can still get the data inside the data-* attribute by using getAttribute() and Firefox 6, Opera 11.1, and Android 3.0 do support it correctly. | 4/12/2013 |
| 1 | p323 | WebSockets is implemented in Firefox 4, Chrome 4, Opera 11, and Safari 5, as well as iOS 4.2. It is not available in Internet Explorer or Android. Firefox and Opera have disabled support in their browsers because of security concerns. Firefox and Opera users can re-enable it if they really want it, but it won’t be available there until the security concerns are dealt with. | WebSockets is implemented in Firefox 4, Chrome 4, and Internet Explorer 10, Opera 11, and Safari 5, as well as iOS 4.2. It is not available in Android. | 4/12/2013 |
| 1 | p324 | The problem that Firefox and Opera browser manufacturers have with WebSockets is a security concern that is not browser specific. | The problem that Firefox and Opera browser manufacturers have had with WebSockets is a security concern that is not browser specific. | 4/12/2013 |
| 1 | p324 | Firefox and Opera decided to disable support for WebSockets until the handshake vulnerability is dealt with, but browsers such as Safari and Chrome still support it, and users could be attacked. Although, Safari may disable WebSockets as well in the future.1 The problem with the WebSockets protocol is not in WebSockets at all, but in implementations of some types of proxies. However, it came to people’s attention when Firefox and Opera disabled support. In fact, the exploit on the handshake was discovered in raw sockets in Flash and Java first, and then were found in the same situations in WebSockets. Ultimately, WebSockets is still in the early stages of development, so by learning this API you can put your website on the cutting edge. Most web developers will skip using it until it is supported by Firefox and Internet Explorer. |
The problem with the WebSockets protocol is not in WebSockets at all, but in implementations of some types of proxies. However, it came to people’s attention when Firefox and Opera disabled support. In fact, the exploit on the handshake was discovered in raw sockets in Flash and Java first, and then were found in the same situations in WebSockets. Web Sockets are no longer disabled as long as you use an up-to-date protocol. Ultimately, WebSockets is still in the early stages of development, so by learning this API you can put your website on the cutting edge. |
4/12/2013 |
| 1 | p325 | Alchemy WebSockets (www.olivinelabs.com/index.php/projects/71-alchemy-websockets) | Alchemy WebSockets (https://github.com/Olivine-Labs/Alchemy-Websockets) | 4/12/2013 |
| 1 | p333 | The File API is supported in Android 3.0, Chrome 6, Firefox 3.6, Opera 11.1, and Safari 5.1. So for IE and iOS, you need to detect it and use standard file uploading for those browsers. Here is a simple detection script: | The File API is supported in Android 3.0, Chrome 6, Firefox 3.6, Internet Explorer 10, iOS 6.0, Opera 11.1, and Safari 5.1. So for older versions of IE and iOS, you need to detect it and use standard file uploading for those browsers. Here is a simple detection script: | 4/12/2013 |
| 1 | p341 | Cellphones go out of coverage areas and Wi-Fi devices (such as iPod touches and some iPads) are only online when a Wi-Fi hotspot is nearby. | Cellphones go out of coverage areas and Wi-Fi devices (such as iPod touches and some iPads and Android tablets) are only online when a Wi-Fi hotspot is nearby. | 4/12/2013 |
| 1 | p342 | It is fully supported in Android 2.1+, iOS 3.2+, Opera, Chrome, Safari 4+, and Firefox. | It is fully supported in Android 2.1+, iOS 3.2+, Internet Explorer 10+, Opera, Chrome, Safari 4+, and Firefox. | 4/12/2013 |
| 1 | p346 | But you can also build a cache that stores every file it sees—this is called a lazy cache. | But you can also build a cache that stores every file it sees—this is called a lazy cache. Lazy caches are a great way to allow readers to save longer articles on their devices for reading while offline. | 4/12/2013 |
| 1 | p357 | Hackers can use session information to get information about your customers. | Hackers can use session information to get information about your customers, if you don’t. | 4/12/2013 |
| 1 | p363 | This can have databases with records and fields that you use just like a database, but rather than accessing them through SQL calls, you use methods on the object store. IndexedDB is supported by Firefox 4 and Chrome 11. | This can have databases with records and fields that you use just like a database, but rather than accessing them through SQL calls, you use methods on the object store. IndexedDB is supported by Chrome 11 with webkit extension, Chrome 24 without, Firefox 4 with moz extension, Firefox 16 without, and Internet Explorer 10. | 4/12/2013 |
| 1 | p364 | Although the specification lists window.indexedDB.open() as the method to open indexedDB databases, you need to use browser-specific prefixes to get it to work reliably. Firefox version 3 and lower uses moz_ (with an underscore), and Firefox 4 and up uses moz (without). Safari and Chrome use the webkit prefix. So, when you work with IDB it helps to initialize the object itself: | Although the specification lists window.indexedDB.open() as the method to open indexedDB databases, for some browser versions you need to use browser-specific prefixes to get it to work reliably. Firefox version 3 and lower uses moz_ (with an underscore), and Firefox 4 and up uses moz (without). Chrome uses the webkit prefix. So, when you work with IDB it helps to initialize the object itself: | 4/12/2013 |
| 1 | p365 | Note that this application won’t work in Firefox because the application uses only Web SQL, and Firefox only supports IndexedDB. It also doesn’t work in Internet Explorer because IE doesn’t support any web databases. | delete sentences. | 4/12/2013 |
| 1 | p374 | In many ways, the History API is very boring. It makes the browser do what users would expect the browser to do. | In many ways, the History API is very boring. It makes the browser do what users expect the browser to do. | 4/12/2013 |
| 1 | p375-376 | The History API is currently supported by Android 2.2, Chrome 8+, Firefox 4+, iOS 4.2.1+, Opera 11.5+, and Safari 5+. However, support in Safari and iOS is buggy so you should test your application extensively on iOS and Safari before release. Also, when you use the History API, you need to have fallback options for Internet Explorer and older browsers. |
The History API is currently supported by Android 2.2 and 2.3 and Android 4.2, but not 3.0 or 4.0. It is also supported by Chrome 5, Firefox 4, Internet Explorer 10, iOS 5, and Opera 11.5. It works but is buggy in iOS 4.2-4.3 and Safari 5. Also, when you use the History API, you need to have fallback options for older browsers. |
4/12/2013 |
| 1 | p392 | Most Android devices on the market have both a cellphone and a GPS in them, but the newer Android tablets are coming out with Wi-Fi only models that don’t have cellphone hardware and may not have GPS hardware. iPods and some iPad models do not have either. These devices use IP address mapping from an Apple database of IP addresses for most of their location services. | Most Android devices on the market have both a cellphone and a GPS in them, but many Android tablets have Wi-Fi only models that don’t have cellphone hardware and may not have GPS hardware. iPods and some iPad models do not have either. Apple devices use IP address mapping from an Apple database of IP addresses for most of their location services. | 4/12/2013 |
| 1 | p394 | To use geo.js, you download geo.js and install both Google Gears and geo.js at the bottom of your document: | Be sure to check the website for the most up-to-date information on device support and issues. To use geo.js, you download geo.js and install both Google Gears and geo.js at the bottom of your document: |
4/12/2013 |
| 1 | p397 | . Google Maps JavaScript API—Possibly the best-known maps API, the Google Maps JavaScript API lets you create solutions for both desktop and mobile devices (http://code.google.com/apis/maps/documentation/javascript/). . MapQuest Open API—This service uses OpenStreetMap data to generate static maps, directions, elevation information, and more (http://open.mapquestapi.com/). . OviMaps API—This is a maps API from Nokia, and it is the recommended alternative to the Yahoo! Maps API, which is shutting down in late 2011 (http://api.maps.ovi.com/). |
. Google Maps JavaScript API—Possibly the best-known maps API, the Google Maps JavaScript API lets you create solutions for both desktop and mobile devices (https://developers.google.com/maps/documentation/ javascript/). . MapQuest Open API—This service uses OpenStreetMap data to generate static maps, directions, elevation information, and more (http://open.mapquestapi.com/). . Here Maps API—This used to be the OviMaps API from Nokia. It offers features like maps, positioning, traffic, and more (http://developer.here.com/ javascript_api). |
4/12/2013 |
| 1 | p400 | To set up a static map, you create an image with the source pointing to http://open.mapquestapi.com/staticmap/v3/getmap? with the following parameters: . center—The latitude and longitude of the center of the map (center=latitude,longitude) . zoom—The zoom level from 1 to 16 (zoom=14) . size—The width and height of the map (size=400,400) For example: <img src=”http://open.mapquestapi.com/staticmap/v3/getmap? center=40.0378,-76.305801&size=400,400&zoom=12”> |
To set up a static map, you create an image with the source pointing to http://open.mapquestapi.com/staticmap/v4/getmap? with the following parameters: . key—A valid key string from the MapQuest Developer Network (http://developer.mapquest.com/) . center—The latitude and longitude of the center of the map (center=latitude,longitude) . zoom—The zoom level from 1 to 16 (zoom=14) . size—The width and height of the map (size=400,400) For example: <img src="http://open.mapquestapi.com/staticmap/v4/getmap? key=YOUR_KEY_HERE¢er=40.0378,-76.305801&size=400,400&zoom=12"> |
4/12/2013 |
| 1 | p406 | If you create a native app that only works on Android, if it gains any popularity at all you will start getting requests for it to be built on iOS (and then Blackberry and WebOS and so on). | If you create a native app that only works on Android, if it gains any popularity at all you will start getting requests for it to be built on iOS (and then Blackberry and Windows 8 and so on). | 4/12/2013 |
| 1 | p407 | However, it’s not precisely true that native applications work better. | However, it’s not precisely true that native applications always work better. | 4/12/2013 |
| 1 | p409 | Xcode is available from the Apple App Store (http://itunes.apple.com/us/app/ xcode/id422352214?mt=12) for $4.99. |
Xcode is available from the Apple App Store https://itunes.apple.com/us/app/ xcode/id497799835?mt=12) for $4.99. |
4/12/2013 |
| 1 | p410 | PhoneGap, as of this writing, is beta testing an even easier way to turn your HTML5 into native applications. It’s called PhoneGap:Build | Adobe PhoneGap:Build is an even easier way to turn your HTML5 into native applications | 4/12/2013 |
| 1 | p411 | Dreamweaver CS5.5 has PhoneGap connectivity built in. | Dreamweaver has had PhoneGap connectivity built in, since version CS5.5. | 4/12/2013 |
| 1 | p415 | Table 24.1 updated. | fixed | 4/12/2013 |