but they It is deleted

iPhone5 and iOS6 on HTML5 development of new featuresdevelopment of mobile applications in the end is to select Native, Web application or hybrid application? The answer is different mobile applications require different techniques, select the appropriate line. In fact, most mobile applications, enterprise mobile applications regardless of Internet or mobile applications, 90% can be used HTML5-based Web technology is sufficient. In Android 4.0 and above browser iOS 6 already applied it is the fastest, more than any local microblogging, micro-channel almost without an upgrade, no need to upload split APP market, do not suddenly apples off the shelf applications. Take a look at the recently released Firefox OS development of mobile phone configuration is also probably know, run most applications do not require so high-profile. The current mainstream smart terminal, iOS6 degree of support for HTML5 is still the best, ahead of Android and Windows phone. With double the performance iPhone5 again, and iOS rising canvas rendering performance, combined with Android's webGL, Win8 / wp8 local api open to Javascript, performance is no longer the main mobile applications developed excellent barrier, and now to be considered How to play the advantages of HTML5 to make a user-friendly application. Let's look at iPhone5 and iOS6 HTML5 development on new features. iPhone 5: The new screen size of the new simulator you need to do is issue iOS 6 new features: file upload, with a camera to capture the media access and file API Web Audio API native application integration intelligent application banner filter cross CSS 3 Fade CSS 3 CSS Partial support for full-screen support image animation timing API supports multi-resolution image Passbook coupons and monthly changes in the delivery of storage API and native Web applications Web application to change the Web View Web Inspector Remote debugging faster JavaScript engine and other new features in the new iPhone 5 iPhone 5, and iPod Touch 5th generation since the beginning, there is a big change in Web development: screen resolution. These devices have a wide 4-inch screen, WDVGA (Wide Angle Dual VGA) 6401136 pixels, 326 DPI's Retina Display. These devices and iPhone 4 / 4S has the same width but 176 pixels high. IPhone 5 new simulator contains emulator Xcode4 iOS simulator new Xcode 4 (Mac AppStore) include the updated iPhone simulator. Three options for the new version of the iPhone simulation: iPhone: iPhone 3GS, iPod Touch first, third-generation iPhone Retina 3.5: iPhone 4, iPhone 4s, iPod Touch fourth-generation iPhone Retina 4: iPhone5, iPod Touch first 5 generation of new simulators also include substituted Google maps new maps application and Passbook. Next you need to do for the new device Normally, if your site / application has been optimized vertical scrolling, there should not be any problems. With a viewport (Viewport), the icon and iPhone 4 / 4S technology should be able to work properly. But when the updated iOS, and also update the Web View: This means that all native Web applications, such as PhoneGap / Apache Cordov applications and pseudo-browsers, such as iOS browser on Google also updated. However, if your solution is highly correlated, then there may be a problem, look at the following example, iPhone 4 Air Jordan 3 and the iPhone 5's Google Maps website. Since this is to say as a constant height, does not hide the status bar at the bottom of a column blank. If you designed a specific height of Google Maps. As you can see (right from the iPhone 5) have a white bottom bar and the URL address bar can not be hidden, because there is not enough content. If you are using a responsive Web design, you should not have too much trouble, under normal circumstances, RWD technology uses the width and not height as the condition. The device detects the time of this writing, there is no iPhone 5 in the market. On the server side there is no way to detect iPhone 5. User Agent only iOS 6 system of the iPhone, and use the same user agent system iOS6 iPhone 4S and iPhone 5. Mozilla / 5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit / 536.26 (KHTML, like Gecko) Version / 6.0 Mobile / 10A403 Safari / 8536.25 Therefore, the client only way to 4-inch iPhone device detection is to use JavaScript or media inquiries. Remember, these devices have 1136 pixel height, but we are talking about CSS pixels (resolution-independent pixels) about 568 pixel height, half these devices pixel. isPhone4inches = (window.screen.height == 568); the use of CSS media queries and responsive Web design technology, we can detect the use of iPhone 5:media (device-height: 568px) and (-webkit-min-device- pixel-ratio: 2) {/ * iPhone 5 or iPod Touch 5th generation * /} webapps webapps question the main screen of the main screen seems to be very serious. I've reported this problem, NDA has not any answers from Apple. When you add a site's home page to the screen, support apple-mobile-web-app-capable web application meta tag only works in iPhone 3.5 emulation mode (it does not consider the whole height). In the image can be seen in the black bar strip. This is the iPhone 5 and the new iPod Touch default full-screen webapp. If the operating system is not sure whether to support a wider screen, not to the web application extension height is a good idea. If you provide an apple-touch-startup-image is 6401096, iPhone 5 will adjust its size to 640,920 on the main screen. The solution is that you need to forget the viewport width = device-width or width = 320. If you do not provide the viewport, webapps will work properly. Similarly, if you use other attributes rather than width is similar, if you do not want the default viewport 980px, may this: meta name = viewport Discount Nike Air Force 1 Womens White Green Shoes content = initial-scale = 1.0 even if you specify a width can be different from the 320: meta name = viewport content = width = 320.1 Fixed viewport, the following script can achieve the purpose of:. if (window.screen.height == 568) {// iPhone 4 document.querySelector (meta [name = viewport]) content = width = 320.1;} If the program is 6,401,096 boot image, and using different images on different devices, you can use the media queries. Some reports say that you need to start the same picture as in the present program is named [email protected] but incorrect. But if you want to, you can name it. But the size of the property is completely ignored. You can use media queries, providing different startup picture: linkhref = startup-568h.png rel = apple-touch-startup-image media = (device-height: 568px) linkhref = startup.png rel = apple-touch-startup- image sizes = 640x920 media = (device-height: 480px) If you want to provide an alternative version of the low-resolution device, then you can use the device pixel ratio of the WebKit conditions. If you want to know why is 568px rather than 1136px, remember pixels than CSS pixels and we use these devices to 2. Another problem is that after the purchase of a new device, iTunes will back up installation is again from the shortcut icon, it is not clear HTML5 2015 Latest Nike Shoes iOS developers of iOS 6 and 6 for each free updates iOS 5 devices, in addition to the first iPad generation, so we will see this version really quickly browse the Web, iPad market was first divided. The following survey results are available for all iOS upgrade iOS devices. File management File iOS Safari browser supports uploading and 6 on some support HTML Media Capture of. A simple file upload will require the user to enter a file from your camera or photo album, you can see in the figure. I really like the Safari display image preview, instead of a temporary file name. labelSingle file / label input type = file we can use HTML5 new Boolean attribute request multiple files. In this case, you can not use the camera as the source. labelMultiple files / label input type = file multiple file upload we can use to access the camera and photo album, although there is no way to enforce the use of cameras, but we can use the accept attribute specifies only want to capture an image or video. input type = file accept = video / * input type = file accept = image / * does not support other types of files, such as audio, Pages documents or PDF files. There is no real-time streaming media getUserMedia camera support. There are pictures and videos After selecting what can you do? Use multipart POST form submissions using XMLHttpRequest2 AJAX upload upload (even schedule support) using the File API, JavaScript directly in iOS 6 allows the number of bytes read and client operating files. HTML5ROCKS have a good API examples. Web Audio API HTML5 game developers should be like! Web Audio API in a mobile browser the first time. The JavaScript API allows us to process and synthesize audio. If you've never played with some of the low-level audio, API might look a little weird, but after a period of time not difficult to understand. Similarly, HTML5ROCKS have a good article to get started using the audio API. API For more information and news in the website banner http://www.html5audio.org intelligence application or a native application? If we are, we can now connect our website with our native applications. With the intelligent application banners, when there is a native application associated with the site, Safari browser to display a banner. If you do not install this application will display the Install button, or already installed display the View button to turn it on. We can also send parameters to the native applications from the network. Such as opening and users see the contents of the same native application location on the site. To define a smart app banner, we need to create a meta tag name = apple-itunes-app. First, we need to search our iTunes Link Maker application and the application ID. meta name = apple-itunes-app content = app-id = 9999999, we can use app-argument provides a string value, iTunes affiliate program if we participate, we can also add the same meta tags subsidiary data meta name = apple- itunes-app content = app-id = 9999999, app-argument = xxxxxx meta name = apple-itunes-app content = app-id = 9999999, app-argument = xxxxxx, affiliate-data = partnerId = 99siteID = XXXX banner needs 156 pixels (equipment is 312 hi-dpi) at the top, until the user clicks on content below or close button, it shows all of the height of your site on your site. It's like Air Jordan 22 the HTML DOM objects, but it is not really a DOM. With the intelligent application banners, the browser will automatically invite the user to install or open native applications within a few seconds, the banner displayed when loading animation system to verify the application of the current user's device and App Store are valid. If it is invalid, the banner is automatically hidden, for example, it is an iPad only app, you are browsing iPhone or application is only available in the German App Store, and your account is in the United States. CSS 3 CSS 3 filter filter is a set of image manipulation, we can use CSS features, such as gray, blur, drop shadow, brightness and other effects. These features will be displayed on the screen before the contents are used. We can use spaces using multiple filters. Here you can try a good demonstration. As a simple example, such as: -webkit-filter: blur (5px) grayscale (.5) opacity (0.66) hue-rotate (100deg); CSS 3 Crossfade begun to Personality Nike Air Force 1 Unisex White Blue Shoes support iOS 6 new CSS Image Values, including cross Fade function. With this feature, we can combine two images in the same place have varying degrees of transparency, it can even be part of the transition or animation. Simple example: background-image: -webkit-cross-fade (url (logo1.png), url (logo2.png), 50%); Safari in full screen in addition to the main screen, chrome-less meta tags, and now iPhone and iPod Touch (but not in iPad) to support full-screen mode window. It's the perfect immersive experiences such as games or multimedia applications. No way to force full-screen mode, it needs to be started by the user (the last icon on the toolbar). However, we can invite users to move to the window, and press the full-screen icon on the screen to activate our application. If we mix some touch event handling, we can hide the URL address bar to provide a good interface until the user leaves the full screen. Full-screen navigation on the iPhone and iPod Touch you can always find two or three buttons at the bottom of the cover, you should know what the back button, a forward button and cancel the optional full screen. You can use onresize event detection if the user switches to a full screen. Animation timing API game developers are very lucky. iOS 6 support animation timing API, also known as requestAnimationFrame, a new way to manage JavaScript-based animation. Here's Nike Air Max 90 Hyperfuse a good example, a more detailed description see from Paul Ireland blog. CSS Image Set, which is not part of any standard group. This is a new graphics capabilities, image set to receive an additional set of conditions or image. With this new feature, we do not need a different resolution, to define different images using media queries. The syntax of work is: -webkit-image-set (url (low.png) 1x, url (hi.jpg) 2x) It's like CSS background images work like. With this new syntax, we can have a clearer multi-resolution image clarity, so we do not need to use the media queries and background-size value. Passbook Passbook is a new iOS app, a virtual container, such as passport, tickets, coupons, loyalty cards, gift cards. As a Web developer, you might want to provide users with coupons, tickets, your next flight e-ticket or loyalty card. Apple allows sites do not need this program can provide this pass. In order to provide a pass on your site, you need to use the application / vnd.apple.pkpass MIME type or provide a tool emailed Apple, you can quickly install on your server package and custom signature passes may include current profile information to be passed is just a JSON metadata file and a pair of images. We need to package files and signed. Unfortunately, to be signed by, we need Apple's signature, which means that Web developers need a iPhone Developer Program account ($ 99 / year). If you receive a notification has been signed, you can put it on their website. One powerful pass, once installation is complete, and through push notification service, can provide some network services to users and push message alerts, the operating system will call your Web service, update the transmission of information. More passbook update information developer.apple.com storage API and web applications is not new storage API. It does not support indexing databases. However, there are some changes that you should consider: increase application cache limit to 25MB. Chromeless web applications (using apple-mobile-web-app-capable meta tag) now have their own storage sandbox. This means that, even if they come from the same field from the main screen on the web application will have its own local storage and SQL persistent storage. Even if you install multiple icons, each will have its own sandbox. While this is good news, but if you from site to the home screen widgets by passing information storage, it can also be a problem. See George Henne article. There is a new unpublished meta tags that can be used on any website (apple-mobile-web-app-capable meta tags), the main screen icons allows us to define a different title. As you probably know, the title by default Safari browser documentation is limited to 13 characters. Now we can define the alternative title of the main screen using meta name = apple-mobile-web-app-title content = My App Name I also found, apple-mobile-web-app-orientations possible values ​​are acceptable portrait, portrait-upside -down, landscape-right, landscape-left, portrait-any. Web View Update Web View (pseudobrowsers, PhoneGap / Cordova applications, embedded browser) running on Javascript 3.3 times slower than Safari (or, Nitro engine in Safari browser is a Web application that is 3.3 times faster). We can find some other good news: debug web applications Remote Web Inspector supressesIncrementalRendering a new Boolean property, improved part rendering mechanism. I believe that, in order to reduce the load on the page feel, this feature is very useful. WebKitStoreWebDataForBackup info.plist a new Boolean function, where we can define our to be stored in a local storage and Web SQL database backup places, such as in iCloud. Change this problem has appeared in iOS 5.01, and now it solves Developer Agreement it seems to limit the use of only local WebView to parse HTML and JS Cheap Nike Air Force 1 Mens Beige White Shoes of the. That's fine, if someone from Apple can confirm this. It is the only internal WebKit engine able to download and execute the new code of the engine, ensure that the same expectations of application behavior. If you do not download the code from the Internet, you can use your own engine. This may open a door ... such as providing our own engine, for example, WebGL support. Remote debugging This is a Web developer a huge change. Safari on iOS for the first time, including the official Remote Web Inspector. Therefore, iWebInspector or Weinre tool, because this version will become obsolete. Remote debugger can work together or connect via USB devices and simulators. To enable remote examination session, you need to use a desktop Safari 6 browser. This is the bad news: you can only debug your web application on the Mac desktop. This is a silent change, but Safari for Windows does not exist, so it stays in 5.x, therefore, only with Mac OS computers, you can open your iOS device (at least officially) network debugging session . For security reasons, you need to enable the inspector to set the Safari Web browser Advanced. The new inspection methods mean old JavaScript Console is unavailable. You can start a debug session: Use the Web View native applications in chrome-less webapp program your iOS device or simulator Safari window installed on your iOS device or emulator, such as Apache Cordova / PhoneGap applications. Speaking native application, you can only check the Xcode (his application) installed in the application of the device. Therefore, there is no way to check in on the website of iOS Google browser. If you are using Webkit Inspector Safari 5 or even Chrome, Safari 6 you will see a completely redesigned version of the Inspector-based native Xcode development of the UI. With Inspector tuning session, you can: view real-time changes in HTML and CSS to access your storage: cookies, local storage, session storage and SQL database review Profile web applications, including network request, layout and rendering and JavaScript and event performance reports. This is a performance tool has taken a big step. Find your DOM view all errors and warnings manage your workers (threads) to manage JavaScript breakpoints in one place, and determining an uncaught exception breakpoints. Access the console and debug JavaScript code to execute JavaScript palpation: the inspector inside a small hand icon lets you touch and find DOM elements in the inspector on the device. Apple Well done, we fine that has been a long time in iOS. Apache Cordova users should also like to use this feature. Other minor updates Apple claims to have a faster JavaScript engine. It seems to be true. In the SunSpider test, I iOS 5.1 and iOS JavaScript performance 6 20% on the same device. Google Maps is no longer available on iOS 6, now redirect to Google Maps http://maps.google.com site, rather than native applications. So there is a new URL patterns, maps, which will open a new native Maps application. The syntax is maps:? Q = query, query may be a search term or latitude and longitude (separated by commas). To start route guidance, the parameters are: maps:? Saddr = sourcedaddr = destination. XHR2: XMLHttpRequestProgressEvent now supported autocomplete attribute input follow DOM specification Mutation Observers from DOM4 has been achieved. You can use WebKitMutationObserver constructor capture changes in DOM Safari no longer always use -webkit-transform: preserve-3d elements create the hardware acceleration layer, we should stop using it. By window.selection the Selection API keygen element Canvas update: createImageData have an argument, and now there are two new features prepared to provide high-resolution images with webkitGetImageDataHD and webkitPutImageDataHD. SVG processor and related measurement update event constructor new CSS viewport of: VH (the height of the viewport), VW (viewport width) and VMIN (minimum between VW and VH) CSS3 Exclusions and CSS Regions provide a Beta version, but they It is deleted in the final version. It's a shame, though they are too new, not mature enough. iCloud tab. You can all the equipment, including synchronization between your label Mac computer, iPhone and iPad. Therefore, the same URL through all devices. Be careful using the mobile network infrastructure! We are still waiting there are some things we still need to wait for the next version, such as: Indexed Database API IndexedDB file system performance Timing API WebRTC and getUserMedia WebGL is still disabled Games / inmersive orientation lock application API integrated Facebook and Twitter accounts native API, so we can use the user's credentials to the current operating system automatically, rather than forcing the user to log in again. Final Thoughts on the iOS Safari 6 for HTML5 development and debugging tools a big step, a new API, better JavaScript performance. However, I must say that Apple still forget the documentation updates and properly communicate with the Web developer. Source: IT addiction contributor, translated from the original: New iPhone 5 and iOS 6 Features for HTML 5 Developers