HTML5 Tutorial Part 2 - HTML5 Semantics

The HTML5 specification brings several new elements to web developers allowing them to describe the structure of a web document with standard semantics. This document describes these elements and how to use them to define the desired outline for any document.

The structure of a document, i.e., the semantic structure of what is between and , is fundamental to presenting the page to the user. HTML4 uses the notion of sections and sub-sections of a document to describe its structure. A section is defined by an HTML Dividing (

) element with HTML Heading Elements

, 
, 
, 
, 
, or 

within it, defining its title. The relationships of these HTML Dividing and HTML Heading Elements leads to the structure of the document and its outline.

See the following Mark up

  
Forest elephants
  
In this section, we discuss the lesser known forest elephants.
    ...this section continues...
  

    
Habitat
    
Forest elephants do not live in trees but among them.
     ...this subsection continues...
  

Here is the Output for above program

1. Forest elephants

1.1 Habitat

The div elements aren't mandatory to define a new section. The mere presence of an HTML Heading Element is enough to imply a new section. Therefore,

Forest elephants
  
In this section, we discuss the lesser known forest elephants.
    ...this section continues...
  
Habitat
  
Forest elephants do not live in trees but among them.
    ...this subsection continues...
  
Diet
Mongolian gerbils

Leads to the following outline:

1. Forest elephants

1.1 Habitat

1.2 Diet

2. Mongolian gerbils

Problems Solved by HTML5

The HTML 4 definition of the structure of a document and its implied outlining algorithm is very rough and leads to numerous problems:

1) Usage of div for defining semantic sections, without defining specific values for the class attributes makes the automation of the outlining algorithm impossible ("Is that div part of the outline of the page, defining a section or a subsection?" Or "is it only a presentational div, only used for styling?"). In other terms, the HTML4 spec is very imprecise on what is a section and how its scope is defined. Automatic generation of outlines is important, especially for assistive technology, that are likely to adapt the way they present information to the users according to the structure of the document. HTML5 removes the need for div elements from the outlining algorithm by introducing a new element, section, the HTML Section Element.

2) Merging several documents is hard: inclusion of a sub-document in a main document means changing the level of the HTML Headings Element so that the outline is kept. This is solved in HTML5 as the newly introduced sectioning elements (article, section, nav and aside) are always subsections of their nearest ancestor section, regardless of what sections are created by internal headings.

3) In HTML4, every section is part of the document outline. But documents are often not that linear. A document can have special sections containing information that is not part of, though it is related to, the main flow, like an advertisement block or an explanation box. HTML5 introduces the aside element allowing such sections to not be part of the main outline.

4) Again, in HTML4, because every section is part of the document outline, there is no way to have section containing information related not to the document but to the whole site, like logos, menus, table of contents, or copyright information and legal notices. For that purpose, HTML5 introduces three specific sections elements: nav for collections of links, such as a table of contents, footer and header for site-related information.

More generally HTML5 brings precision to the sectioning and heading features, allowing document outlines to be predictable and used by the browser to improve the user experience.

The HTML5 Outline Algorithm

Defining Sections in HTML5

All content lying inside the body element is part of a section. Sections in HTML5 can be nested. Beside the main section, defined by the body element, section limits are defined either explicitly or implicitly. Explicitly-defined sections are the content within body, section, article, aside, footer, header, and nav tags.

Example :

  
Forest elephants
 
  

    
Introduction
    
In this section, we discuss the lesser known forest elephants.
  
  

    
Habitat
    
Forest elephants do not live in trees but among them.
  
  

    
advertising block
  


  
(c) 2010 The Example company

This HTML snippet defines two top-level sections:

  
Forest elephants
    
  
     
    
Introduction
     
    
In this section, we discuss the lesser known forest elephants.
  
   
  
     
    
Habitat
    
Forest elephants do not live in trees but among them.
  
  

    
advertising block
  



  
(c) 2010 The Example company

The first section has three subsections:

  
Forest elephants
 
  
     
    
Introduction
     
    
In this section, we discuss the lesser known forest elephants.
  

  
     
    
Habitat
    
Forest elephants do not live in trees but among them.
  

  

    
advertising block
  



  
(c) 2010 The Example company

This leads to the following structure:

1. Forest elephants

1.1 Introduction

1.2 Habitat

1.3 Section (aside)

HTML5 Tutorial Part 1 - Introduction to HTML5

HTML5 Features and Tutorial - Part 1

HTML5 is the latest evolution of the standard that features html. The term represents two different concepts: It is the new version of language html, with new elements, attributes, and behaviors.

And a larger set of technologies that allows more diverse and powerful websites and applications.This set is called HTML5 and friends and often called it as HTML5.

Designed to be usable by all Open Web developers, this reference page links to numerous resources about HTML5 technologies, classified into several groups based on their function.

• 1)Semantics: Allowing you to describe more precisely what content is.
• 2) Connectivity: Allowing you to communicate with the server in new and innovative ways.
• 3) Offline & Storage : Allowing webpages to store data on the client-side locally and operate offline more efficiently.
• 4) Multimedia: Making Audio & Video first class citizens in the open web.
• 5) 2D/3D Graphics & Effects : Allowing a much more diverse range of presentation options.
• 6) Performance and Integration: Performing greater speed optimization and better usage of computer hardware.
• 7) Device Access : Allowing for the usage of various input and output devices.
• 8) Styling : letting authors write more sophisticated themes.

HTML5 Interview Questions and Answers Part - 1

What is the relationship between SGML,HTML , XML and HTML? SGML (Standard generalized markup language) is a standard which tells how to specify document markup. It’s only a Meta language which describes how a document markup should be. HTML is a markup language which is described using SGML. So by SGML they created DTD which the HTML refers and needs to adhere to the same. So you will always find “DOCTYPE” attribute at the top of HTML page which defines which DTD is used for parsing purpose.

Now parsing SGML was a pain so they created XML to make things better. XML uses SGML. For example in SGML you have to start and end tags but in XML you can have closing tags which close automatically (“”). XHTML was created from XML which was used in HTML 4.0. So for example in SGML derived HTML “ ” is not valid but in XHTML it’s valid. You can refer XML DTD as shown in the below code snippet.

HTML5 Simplequiz #1

A few years ago, Dan Cederholm published a series of articles called Simplequiz in which he posed some options for marking up a specified piece of content and invited readers to choose the one they felt was the best way to mark that up. The value was in the comments in which people said why they made that choice and debated the options (which means it is THE LAW that you read the preceeding comments before adding your own).
With Dan’s blessing, we’re beginning an occasional series of HTML5 Simplequizzes. And here’s the first.
Consider a products page on a website. It might be a page showing widgets, HTML5 books or Remy’s favourite nose hair removers. What’s the best way to mark up the products?
Note: please DON’T USE ANGLE BRACKETS in your comments. Escape them with < and > or just use [foo] – we’ll know what you mean.

A:

<div>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
</div>
<div>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</div>

B:

<article>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...</article>
<article>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</article>

C:

<section>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...</section>
<section>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</section>

D:

<nav>
<div>
<h2>Groom Mate Platinum Xl Nose & Ear Hair Trimmer by Groom Mate</h2>
...</div>
<div>
<h2>Philips NT9110 Nose Hair Trimmer by Philips<h2>
...</div>
...</nav>

Your answers below, please, with your rationale.

PhoneGap and Cordova with iOS 7

Running Existing Apps

The first thing I tried to do after the upgrade process was to run the existing PhoneGap applications already installed on my phone. Good news: They run “as is” (with a minor cosmetic issues: see below).

Building and Deploying

Building and deploying new apps was also pretty straightforward. Here are the steps (I’m assuming PhoneGap 3):

1. Install Xcode 5: the update is available in the App Store on your Mac.
2. Start Xcode 5 before building your application to make sure Xcode downloads the required components. Before you can build a project using the PhoneGap or Cordova command line tool, you’ll also have to accept the new license agreement in Xcode 5.
3. Build your PhoneGap application as usual on the command line:

   1	phonegap build ios

4. Open the project (the .xcodeproj file in platforms/ios) in Xcode, and run it on your device.

The Status Bar Issue

On iOS7, all the applications are running full screen, and the status bar now overlays your application. As a result, it may cover some of your content or interfere with your header:



Different solutions have been discussed in the forums (here and here). Some of them involve native code to offset the web view. I think the simplest and cleanest solution is to add a 20px top margin to the document’s body using CSS. You can use version detection to avoid adding the margin if the application is running on iOS 6. Shazron posted a nice Gist with a simple solution:

1 2 3 4 5 6 7

function onDeviceReady() {     if (parseFloat(window.device.version) === 7.0) {           document.body.style.marginTop = "20px";     } }    document.addEventListener('deviceready', onDeviceReady, false);

Here is the result:

Cordova 3.1

Cordova 3.1 is expected soon (probably next week) with additional iOS 7 support:

• Update to the splashscreen plugin to better support the status bar
• Update to the Media and Media Capture plugins to handle the new Microphone access permissions
• A fix to this bug (keyboard preferences)

Topcoat

iOS 7 is another reason to take a look at Topcoat, the new CSS toolkit that I have already covered and demonstrated multiple times in this blog. Topcoat’s flat design with no gradients or shadows fits perfectly with the new aesthetics of iOS7. Topcoat is just a set of CSS styles and works with any JavaScript framework: Backbone.js AngularJS, Ember, etc.

Follow Me

PhoneGap tutorial - Employee Directory Sample App

Employee Directory Sample Application with Ratchet 2.0

By Christophe Coenraets on February 27, 2014 in Cordova, Ratchet

After this week’s double announcement that Ratchet 2.0 is available and is now part of the Bootstrap organization, I decided to update the Ratchet/Backbone version of my Employee Directory application with Ratchet 2.0 and see how it looks.
You can experience the application in the phone “simulator” below (type a few characters in the search box), or click here to run the app in a full browser window.

Platform-Specific Themes

Among other new features, Ratchet 2.0 has a new base theme that you can overlay with optional themes for iOS and Android.

iOS theme

Here is the exact same app with the iOS theme:

Click here to run the app in a full browser window.

Android theme

And here is the same app with the Android theme:

Click here to run the app in a full browser window.

Source Code

The source code for the application is available on GitHub: http://github.com/ccoenraets/directory-backbone-ratchet

Wrapping Up

After a long wait, it’s great to see this new version of Ratchet, and it’s going to be interesting to see how the project evolves and how active it will be in its new home.
Ionic (built on top of AngularJS) has a lot of momentum in this space right now. It’s good to have options, especially if you are using another architectural framework. You can read about the Ionic/AngularJS version of the same application in this post.

PhoneGap Build API for Node.js

Adobe PhoneGap Build has a powerful RESTful API that you can use to tap into PhoneGap Build’s functionality. With the API, you can authenticate as a user and create, build, update, and download PhoneGap applications.
RESTful APIs are great but not without annoyances. All of the popular programming languages (and not so popular ones) have HTTP libraries for RESTful access. The downside is that you still need to implement the HTTP request and response communication logic. It’s not complicated, except with some authentication types. But it is more code to manage and grows as you encounter API quirks.
This is why we use libraries.
phonegap-build-api-js is a published NPM module for accessing the PhoneGap Build API with node.js. It abstracts the HTTP communication, deals with the API quirks, and leaves the rest untouched. In other words, it simplifies accessing the PhoneGap Build API, so that you can focus on integrating it with your product.

• Source code
• Issue tracker
• Interface documentation
• Usage examples
• PhoneGap Build API Documentation

For your coding pleasure, here is an exhaustive list of usage examples:

Authentication

var client = require('phonegap-build-api');

client.auth({ username: 'zelda', password: 'tr1f0rce' }, function(e, api) {
    // use `api` to make requests
});

GET https://build.phonegap.com/api/v1/me

api.get('/me', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

GET https://build.phonegap.com/api/v1/apps

api.get('/apps', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

GET https://build.phonegap.com/api/v1/apps/:id

api.get('/apps/199692', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

GET https://build.phonegap.com/api/v1/apps/:id/icon

api.get('/apps/199692/icon').pipe(fs.createWriteStream('icon.png'));

GET https://build.phonegap.com/api/v1/apps/:id/:platform

api.get('/apps/199692/android').pipe(fs.createWriteStream('app.apk'));

GET https://build.phonegap.com/api/v1/keys

api.get('/keys', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

GET https://build.phonegap.com/api/v1/keys/:platform

api.get('/keys/ios', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

GET https://build.phonegap.com/api/v1/keys/:platform/:id

api.get('/keys/ios/917', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/apps

var options = {
    form: {
        data: {
            title: 'My App',
            create_method: 'file'
        },
        file: '/path/to/app.zip'
    }
};

api.post('/apps', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

PUT https://build.phonegap.com/api/v1/apps/:id

var options = {
    form: {
        data: {
            debug: false
        },
        file: '/path/to/app.zip'
    }
};

api.put('/apps/197196', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/apps/:id/icon

var options = {
    form: {
        icon: 'my-icon.png'
    }
};

api.post('/apps/232741/icon', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/apps/:id/build

Build all platforms:

api.post('/apps/232741/build', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

Build specific platforms:

var options = {
    form: {
        data: {
            platforms: [ 'android', 'blackberry', 'ios', 'winphone', 'webos' ]
        }
    }
};

api.post('/apps/232741/build', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/apps/:id/build/:platform

api.post('/apps/232741/build/android', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/apps/:id/collaborators

var options = {
    form: {
        data: {
            email: 'michael@michaelbrooks.ca',
            role: 'dev'
        }
    }
};

api.post('/apps/232741/collaborators', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

PUT https://build.phonegap.com/api/v1/apps/:id/collaborators/:id

var options = {
    form: {
        data: {
            role: 'tester'
        }
    }
};

api.put('/apps/232741/collaborators/263955', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

POST https://build.phonegap.com/api/v1/keys/:platform

var options = {
    form: {
        data: {
            title: 'My BlackBerry Signing Key',
            password: 'my-password'
        },
        db: '/path/to/sigtool.db',
        csk: '/path/to/sigtool.csk'
    }
};

api.post('/keys/blackberry', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

PUT https://build.phonegap.com/api/v1/keys/:platform/:id

var options = {
    form: {
        data: {
            password: 'my-updated-password'
        }
    }
};

api.put('/keys/blackberry/1505', options, function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

DELETE https://build.phonegap.com/api/v1/apps/:id

api.del('/apps/14450', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

DELETE https://build.phonegap.com/api/v1/apps/:id/collaborators/:id

api.del('/apps/232741/collaborators/263955', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

DELETE https://build.phonegap.com/api/v1/keys/:platform/:id

api.del('/keys/ios/2729', function(e, data) {
    console.log('error:', e);
    console.log('data:', data);
});

Enjoy!

Getting Started with PhoneGap and PhoneGap Build

PhoneGap Intro
PhoneGap is a free and open source framework that allows you to create mobile apps using the web technologies you’re already familiar with: HTML, CSS, and JavaScript. Use standardized web APIs and target the platforms you care about. Download PhoneGap for free right now and try it out.

The beauty of PhoneGap is that you’re able to reuse your existing web developer skills so you have a shorter learning curve and faster development. It’s based on 100% web standards and backed by large stakeholders like Google, Microsoft, BlackBerry, Intel, and more.

Other helpful reads:
PhoneGap’s Beliefs, Goals and Philosophy.
PhoneGap explained Visually


PhoneGap Build Intro
Taking PhoneGap one step further, PhoneGap Build is a service that allows you to package mobile apps in the cloud for multiple platforms. Simply upload your HTML, CSS, and JavaScript to the PhoneGap Build cloud service and we do the work for you. No more hassles of maintaining SDKs on your computer. You quickly and easily get app-store ready apps for iOs, Android, BlackBerry, and more. PhoneGap Build has a couple of subscription options, including a free subscription to try it out. Learn more about PhoneGap Build.
Did you know? PhoneGap Build is also part of Adobe’s Creative Cloud. PhoneGap Build is available to free and paid Creative Cloud members. Learn more about Creative Cloud. You might also be interested in Adobe’s Edge Tools + Services, which are a complementary set of offerings for web designers and developers looking to create beautiful mobile-ready content and apps with HTML, CSS, and JavaScript.

What’s the difference between PhoneGap and Cordova?
In October 2011, PhoneGap was donated to the Apache Software Foundation (ASF) under the name Apache Cordova. Through the ASF, future PhoneGap development will ensure open stewardship of the project. It will remain free and open source under the Apache License, Version 2.0.
PhoneGap is an open source distribution of Cordova. You may see references to both PhoneGap and Cordova and their names used interchangeably. Think about Cordova’s relationship to PhoneGap like WebKit’s relationship to Safari or Chrome.


In October 2011, PhoneGap was donated to the Apache Software Foundation (ASF) under the name Apache Cordova. Through the ASF, future PhoneGap development will ensure open stewardship of the project. It will remain free and open source under the Apache License, Version 2.0.
PhoneGap is an open source distribution of Cordova. You may see references to both PhoneGap and Cordova and their names used interchangeably. Think about Cordova’s relationship to PhoneGap like WebKit’s relationship to Safari or Chrome.
Read more:
Rolling Releases: How Apache Cordova becomes PhoneGap
PhoneGap, Cordova and what’s in a name.
Where to begin?
So you’ve got the background, installed PhoneGap, now what? Below are some helpful places to start:

• Get started with our Docs. You’ll find references to all the APIs that PhoneGap supports as well as Getting Started Guides, Command-Line Usage and more. Speak another language? We’d love your help with translations!
• Check out Andrew Trice’s helpful blog post My Workflow for Developing PhoneGap Applications
• The Adobe Developer Connection (ADC) has a series of videos to walk you through the APIs available and how to use them: ADC Presents: PhoneGap
• Christophe Coenraets has a beginner’s tutorial to help you develop your first PhoneGap application.

Other handy resources:
wiki.phonegap.com
PhoneGap FAQ
PhoneGap Build FAQ
Found a bug?
Sometimes you might find something that doesn’t look quite right. It might be in the docs or a bug in Cordova itself. Help the community out by flagging the issue. Submit the bug on the Cordova Issue tracker.
What’s the community up to?
The PhoneGap community is large and robust. Find out what they’ve been up to in a variety of places:

• The PhoneGap Featured Apps and Case Studies highlight some notable apps made with PhoneGap and services that integrate with PhoneGap Build. Have you made a PhoneGap app? Submit yours here
• The PhoneGap Community Repo shows a monthly breakdown of the PhoneGap events and articles. If you’re organizing a PhoneGap event, speaking on PhoneGap, writing a blog post or have something to share, please add it to the release notes on Github.
• Check out the PhoneGap Events calendar to find out what events we’re sponsoring and where the team is speaking.
• PhoneGap meetups take place all over the world and have different community organizers. Find one close to you or start your own: Meetup.PhoneGap.com

Where do I get help?
Get answers to your questions from the community:
For PhoneGap, check out the PhoneGap Google Group
For PhoneGap Build, check out the PhoneGap Build Forum
Looking for extra, dedicated PhoneGap support? Check out PhoneGap’s paid support options
Stay connected
Are you a PhoneGap Developer or part of a PhoneGap Dev shop? Maybe you’re looking for a Dev? Check out our new PhoneGap Developer Directory. We have over 700 developers and dev shops in 83 countries listed so far!
Find out what’s happening with PhoneGap and PhoneGap Build with our Newsletter. Don’t worry, we hate spam too and won’t be sharing your info with anyone else.

Phonegap Video Tutorial - Real Time Work Shop Example

Abstract Learn how to build large, complex, and native-like mobile apps using HTML, JavaScript, and CSS. In this workshop you'll learn modern strategies and architectural patterns to build real-life Hybrid Applications that work and perform like native apps. You'll also learn how to efficiently use PhoneGap to leverage the native capabilities of your device in JavaScript and to package your HTML application as a native app for distribution through the different app stores. this video tutorial covers the following topics are covered and explained with real time examples The PhoneGap APIs - explains all phonegap API's how to use and build them remotely, locally and test them on different divices. Topcoat - Explains how to use Topcoat framework. The Single Page Architecture - Describes how to develop single page architecture applications rather then multi page architechture , differentiate between them, advatages of using single page architecture. Client-side HTML templates Effective Touch Events Modularization Approaches Mobile Performance Optimization Techniques Comparison of Leading JavaScript frameworks PhoneGap Plugins