Nonintrusive semantic html5

45 %
55 %
Information about Nonintrusive semantic html5

Published on June 29, 2014

Author: AriefOline



This slide i get from senior and i share at here to facilitate student do their assignment.

Hope it is useful to you.


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

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

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)

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.

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>My first jQuery Mobile code</title> <link rel="stylesheet" href=" 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="">Mobi le Web Blog</a></li> <li><a href="">O'Reilly Media</a></li> </ul> </div> <div data-role="footer"> <h4>&copy; 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.

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.

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.

This is how our first and simple jQuery Mobile code looks like in different devices: iOS,webOS and Android. Figure 1

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.

Figure 2 On non-compatible browsers, jQuery Mobile will fall back to a simple HTML file fully functional.

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

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.

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.

• 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.

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.

• 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.

Example: web-based simulator • Iphone4 simulator • url:

Table 1 : Shows the available emulators and simulator for download. An up-to-date list of emulator download URLs can be found at

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)

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.

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.

Add a comment

Related presentations

mPortal designs, develops and hosts mobile apps and services for cable, telecom an...

Vorstellung des 7. App Day in München mit Übersicht über den Show Your App Award u...

Доклад Галины Диваковой на конференции Appsconference на тему ". 1 НОЯБРЯ, 2014 ...

Vortrag von Anna-Maria Zahn und Stefan Hauck auf der AllFacebook Marketing Confere...

Мобио - кейсы по продвижению мобильных приложени

Related pages

Semantic Html5 | LinkedIn

View 453 Semantic Html5 posts, presentations, experts, and more. Get the professional knowledge you need on LinkedIn.
Read more

Main Features - jQuery Mobile: Up and Running [Book]

Main Features jQuery Mobile started in August 2010 as a modern framework, ... Use of Nonintrusive Semantic HTML5; Progressive Enhancement; Accessibility ...
Read more

HTML5 and CSS3 - jQuery Mobile: Up and Running [Book]

HTML5 and CSS3 I know most web designers and developers panic about HTML5 and CSS3. Before saying anything about it: don’t worry, jQuery Mobile will make ...
Read more

JQuery mobile : up and running (eBook, 2012) []

JQuery mobile : up and running. ... Main Features; Use of Nonintrusive Semantic HTML5; Progressive Enhancement; Accessibility Support; Testing Webapps; ...
Read more

jQuery Mobile: Up and Running - Maximiliano Firtman - IT ...

jQuery Mobile: Up and Running : Would you like to build one mobile web application that works on iPad and Kindle Fire as well as iPhone and Android ...
Read more

Jquery Mobile: Up and Running: Up and Running - Firtman ...

Jquery Mobile: Up and Running: Up and Running è un libro di Firtman, Maximiliano pubblicato da O'Reilly Media : € 27,94. Lo trovi nel reparto ...
Read more

JQuery mobile_文档下载_IT168文库

oreilly.comSpreading the knowledge of innovatorsWant to read more? You can buy this book at oreilly.comin print and ebook format.Buy 2 books, get the 3rd ...
Read more

jquery_mobile_up_and_running_文档下载_IT168文库 Mobile: Up and RunningMaximiliano FirtmanBeijing ? Cambridge ? Farnham ? K?ln ? Sebastopol ? Mobile ...
Read more