Nonintrusive semantic html5
Download as PPTX, PDF0 likes622 views
The document provides an introduction to mobile web development, focusing on nonintrusive semantic HTML5 and jQuery Mobile, which enhances user experience on mobile browsers. Key learning outcomes include understanding progressive enhancement, accessibility support, and different testing environments such as emulators and remote labs. It emphasizes HTML5's evolving standard, CSS3's role in animations, and the capabilities of jQuery Mobile in creating accessible web applications across various devices.
Nonintrusive semantic html5
- 2. Learning Outcomes By the end of this class, students will be able to: 1)Describe Nonintrusive Semantic HTML5 2)Use Nonintrusive Semantic HTML5 3)Identify the basic techniques in mobile web application: a. Progressive Enhancement b. Accessibility Support 4)Identify Webapps Environment a. Emulators and Simulators b. Remote Labs
- 3. HTML5 and CSS3 HTML5 in hard terms is an evolving standard including changes to the HTML markup and lot of new APIs in JavaScript. HTML5 in a more casual term is an umbrella for many modern features inside browsers, including the W3C’s formal HTML5 standard, other W3C’s APIs, CSS 3, and nonstandard extensions
- 4. jQuery Mobile provide a great and fast experience on mobile browsers. jQuery Mobile uses CSS3 for animations, gradients, effects and User Interfaces rendering. HTML5, CSS3 and other modern techniques with a jQuery Mobile provide experience, the following features: • Offline Access • Offline storage • Web Sockets • Animations • 2D and 3D Transformations • Gradients and Visual Effects • Viewport Management (for zooming support inside the browser) • Integration with Native applications • Multimedia support • Graphic drawing (vector and bitmap)
- 5. Nonintrusive Semantic HTML5 • jQuery Mobile creates webapps from standard and semantic HTML5, perfectly suitable for SEO -Search Engine Optimization- and WPO –Web Performance Optimization- purposes. • A jQuery Mobile application will also works on a very basic browser without CSS or JavaScript support. And that is a great feature for a mobile webapp.
- 6. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My first jQuery Mobile code</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/j query.mobile- 1.0.min.css" /> Main Features | 15 <meta name="viewport" content="width=device-width, initial- scale=1"> </head> <body> <div data-role="page" data-theme="a"> <div data-role="header"> <h1>jQuery Mobile</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true" data-dividertheme="b"> <li data-role="list-divider">Summary</li> <li><a href="ch1.html">The Platform</a></li> <li><a href="cap2.html">The Page</a></li> <li><a href="cap3.html">Lists</a></li> <li><a href="cap4.html">Components</a></li> </ul> <ul data-role="listview" data-inset="true" data-dividertheme="d"> <li data-role="list-divider">Links</li> <li><a href="http://www.mobilexweb.com">Mobi le Web Blog</a></li> <li><a href="http://www.oreilly.com">O'Reilly Media</a></li> </ul> </div> <div data-role="footer"> <h4>© 2011 Maximiliano Firtman @firt</h4> </div> </div> </body> </html> As you can see in this example codes, there is no complicated code there for initialization or any other stuff. Just some simple JavaScript includes.
- 7. Progressive enhancement • Progressive enhancement is a simple but very powerful technique used in web design that defines layers of compatibility that allow any user to access the basic content,services and functionality of a web and providing an enhanced experience for browser with better support of standards. • jQuery Mobile is totally built using this technique.
- 8. Progressive enhancement has the following core principles: • Basic content is accessible to all browsers. • Basic functionality is accessible to all browsers. • Semantic markup contains all content. • Enhanced layout is provided by externally linked CSS. • Enhanced behavior is provided by unobtrusive, externally linked JavaScript. • End user browser preferences are respected.
- 9. This is how our first and simple jQuery Mobile code looks like in different devices: iOS,webOS and Android. Figure 1
- 10. Accessibility support From Wikipedia: “Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. When sites are correctly designed, developed and edited, all users can have equal access to information and functionality.” Therefore, a jQuery Mobile webapp will provide an accessible experience to users with visual disabilities on iPhone, iPod and iPad.
- 11. Figure 2 On non-compatible browsers, jQuery Mobile will fall back to a simple HTML file fully functional.
- 12. Webapps Environment A jQuery Mobile webapp will work on almost every modern desktop browser. However, it would be better if we can test them on a more accurate environment. To test the mobile webapp in different environments we can use: • Real devices • Remote labs • Emulators • Simulators
- 13. Figure 3 You can test jQuery Mobile accessibility from an iPhone, iPod or iPad with iOS 4.0 or higher. Go to Settings > General > Accesibility and activate VoiceOver. Now close your eyes and browse your website using your fingers and ears.
- 14. Emulators • An emulator is a piece of software that translates compiled code from an original architecture to the platform where it is running. • It allows us to run an operating system and applications on another operating system. • In the mobile development world, an emulator is a desktop application that emulates mobile device hardware and operating systems, allowing us to test and debug our applications and see how they are working. • The browser, and even the operating system, is not aware that it is running on an emulator, so we can execute the same code that will execute on the real device.
- 15. • Emulators are created by manufacturers and offered to developers for free, either standalone or bundled with the Software Development Kit (SDK) for native development. • There are also operating system emulators that don’t represent any real device hardware but rather the operating system as a whole. These exist for Windows Mobile and Android.
- 16. Simulators • A simulator is a less complex application that simulates some of the behavior of a device, but does not emulate hardware and does not work over the real operating system. These tools are simpler and less useful than emulators. • A simulator created by the device manufacturer or by some other company offering a simulation environment for developers.
- 17. • For mobile web development, we will find emulators from Nokia, Symbian, BlackBerry, • Android, webOS, and Windows Mobile and simulators from Apple for the iPhone and iPad (though only for Mac OS X). • Some browser-based emulators (that finally works on many different platforms), like the Opera Mobile emulator, are also available.
- 18. Example: web-based simulator • Iphone4 simulator • url: http://iphone4simulator.com/
- 19. Table 1 : Shows the available emulators and simulator for download. An up-to-date list of emulator download URLs can be found at http://www.mobilexweb.com/emulators.
- 20. Remote Labs • A remote lab is a web service that allows us to use a real device remotely without being physically in the same place. • It is a simple but very powerful solution that gives us access to thousands of real devices, connected to real networks all over the world, with a single click. • You can think of it as a remote desktop for mobile phones as it is used to control your PC from your Windows Mobile phone or to remotely control your windows Mobile phone from desktop. The most useful services on the market are: • DeviceAnywhere (commercial) • Perfecto Mobile (commercial) • Nokia Remote Device Access for Symbian and Meego (free) • Samsung Lab.Dev for Android (free)
- 21. It is an application that installs on your Windows Mobile phone and lets you control it from your desktop. The mouse works like a touch on the touchscreen and the keyboard works as an input device. It works via ActiveSync or by IP address to give you multiple options of connecting, giving you the ability for wireless free (wifi) access to your phone.
- 22. You will need to know your username, password and your domain. You will also have to make sure that port 3389 is opened and mapped to your desktop that you want to connect to.