HTML5 and CSS3
HTML5, jQuery, and CSS3 are the new mantra for developing cutting-edge web applications. When we say web, it includes the standard websites/applications, mobile websites/applications, as well as hybrid applications. Even though this book is about Kendo UI Mobile, it's important to have an idea about the underlying technologies behind the Kendo UI Mobile framework, namely, HTML5, CSS3, and jQuery. Let's take a high-level view at HTML5 and CSS3 technologies briefly before we take a deep dive into Kendo UI Mobile. Since we expect the readers of this book to have knowledge in jQuery, we won't be discussing the basics of jQuery here.
HTML5 – Steve Jobs made me famous
HTML5 shot to fame among the Internet public when Steve Jobs famously announced the death of Flash on the iOS devices and endorsed HTML5 as the future, as it helps to build advanced graphics, typography, animations, and transitions without relying on third-party browser plugins.
HTML5 is a markup language specification that is comprised of a significant number of features, technologies, and APIs that allow content developers to create a rich and interactive experience. HTML5 is still in the recommendation stage, but many browsers already implement a significant portion of the specification. This poses a challenge for developers as they need to figure out which browsers support which features before kick starting an HTML5 project.
Main features of HTML5
Even though the specification for HTML5 is not complete yet, tons of features are already implemented by mainstream browsers. The following are some of the main features of HTML5 as it stands as of today:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Note
http://html5rocks.com from Google is a very good website for HTML5 reference with tons of tutorials, articles, and other resources.
Who is behind the HTML5 specification?
There are three different organizations behind the development of the HTML5 specification: W3C (World Wide Web Consortium), WHATWG (Web Hypertext Application Technology Working Group), and IETF (Internet Engineering Task Force). As a result, there are two versions of the HTML5 specification maintained by W3C and WHATWG, which can be found at http://www.w3.org/TR/html5/ and http://whatwg.org/html respectively. IETF comprises of the groups responsible for Internet protocols such as HTTP, and handles the WebSocket protocol which is used by the WebSocket API of HTML5.
Two different versions of HTML5 is not a matter of concern as the WHATWG version is considered as a living standard (meaning there will be constant development and versions no longer will be applied) and W3C is planning to create a single definitive standard, which WHATWG calls a snapshot of their living standard.
The WHATWG effort is focused on developing the canonical description of HTML and related technologies (meaning fixing bugs, adding new features, and generally tracking implementations), while W3C will continue the HTML5 specification work, focusing on a single definitive standard.
A sample HTML5 page
Now let's get our hands dirty and take a look at a simple HTML5 page:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Our first HTML5 page </title>
</head>
<body>
<header>
<h1>Sample HTML5 Structure</h1>
<nav>
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
</ul>
</nav>
</header>
<section>
<h1>Main Section</h1>
<h2>This is a sample HTML5 Page</h2>
<article>
<p>Article 1 goes here</p>
</article>
<article>
<p>Article 2 goes here</p>
</article>
</section>
<footer>
<p>Footer goes here</p>
</footer>
</body>
</html>Tip
Downloading the example code
You can download the example code files for all Packt books you have purchased from your account at http://www.packtpub.com. If you purchased this book elsewhere, you can visit http://www.packtpub.com/support and register to have the files e-mailed directly to you.
DOCTYPE and character encodings
The DOCTYPE declaration for HTML5 is very simple: <!DOCTYPE HTML>
This line needs to be added at the top of every HTML5 page that we create. The new DOCTYPE declaration is plain and simple, unlike the lengthy and hard to remember ones in HTML4 shown as follows:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
All the latest browsers will look at the new DOCTYPE declaration and switch the contents into standard mode.
Like the DOCTYPE declaration, the character set declaration is also simplified in HTML5 as shown as follows:
<meta charset="UTF-8">
The meta charset attribute in a meta element is used instead of a pragma directive as in HTML4.
This is how a typical character encoding looks in HTML4:
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
Some new HTML5 tags
As highlighted in the earlier code, you can see some new HTML5 tags which are semantic markups. Semantic markups describe their meaning or purpose clearly to the browser and to the developer. In HTML4, we used the <div> tag to define a division in a page, but it never provided any details about the contents and had no specific meaning. To make sense, developers used to add an id attribute and provide a meaningful ID such as sectionHeader, footer, and navLinks as follows:
<div id="sectionHeader"> </div>
The semantic elements such as <header>, <footer>, and <nav> were added in to HTML5 as a result of mining billions of web pages, for figuring out what common IDs and CSS class names the developers use most often, and for selecting a small subset to be added in to the HTML5 specification. It made perfect sense as this will help search engines and accessibility tools to crawl the web pages easily and developers can work on neat HTML code.
Let's now checkout some of the new semantic markups we used in our sample HTML5 page.
<header>
The <header> element represents a group of introductory or navigational aids. Typically <header> will be the first element in a page. It is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not a requirement. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
<nav>
The <nav> element represents a section with navigation links to other pages or to sections inside a page. This element is primarily intended for sections that consist of major navigation blocks. Usually footers will have a short list of links to various pages of a site. The <footer> element alone is sufficient for such cases, while a <nav> element can also be used, but it is usually unnecessary.
The following are some more places where you can think about adding the <nav> element:
- Bread Crumbs
- Table of Contents
- Side Navigation
<section>
The <section> element represents a generic section of a document or application. A section, in this context, is a thematic grouping of the following contents:
- Chapter
- Various tabbed pages in a tabbed dialog box
- Numbered sections of a thesis
A website's home page could be split into sections for an introduction, news items, and contact information. It is a segment of content that you will consider storing as a record in a database.
The <section> element is appropriate only if the contents would be listed explicitly in the document's outline.
<article>
The <article> element represents an independent section of content such as a blog post, a comment, and a magazine article. An article should be an independent entity and it should be possible to distribute or reuse it even when the surrounding contents are removed.
<footer>
The <footer> element represents information about the containing element such as links to related content or copyright information. Footers need not be added at the end of the section even though it is the usual practice.
Note
http://html5test.com/ is a great website to test your browser's HTML5 compatibility.
CSS3
CSS3 is the latest version of CSS, that unlike CSS2 (which is a single large specification of CSS) is divided into multiple modules which are documented and worked upon separately. Work on the CSS3 specification started back in 1998 as soon as the specifications for CSS2 were complete, and it is still undergoing updates.
CSS3 helps in adding life to a web page by animating its elements, applying different effects such as gradients, shadows, multiple backgrounds, and opacity, and much more without using images or client-side code as done with previous versions of CSS. CSS3 helps to improve performance of the application as CSS files are cached on the client side and use hardware acceleration technique for animations on supported browsers.
CSS3 has over 50 modules published from the CSS Working Group such as Media Queries, Namespaces, Color, Animations, Backgrounds and Borders, Selectors, and 2D/3D Transformations.
Let's see using a quick example, how easy it is to apply rounder border, transformation, and shadow to an HTML element using CSS3.
First, let's define a simple div element and add some styles to it:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div#myDiv
{
width: 200px;
height: 100px;
background-color: #A3D1FF;
border: 1px solid black;
margin: 10px;
padding: 5px;
}
</style>
</head>
<body>
<div style="margin: 75px">
<div id="myDiv">
I am an HTML div
</div>
</div>
</body>
</html>The HTML is rendered as shown in the following figure:
Now, we need to rotate this div by 40 degrees, add rounded corners to the border, and add a shadow to the box. In CSS3, achieving these requirements is very easy using few lines of code. Add the following CSS3 properties to the CSS definition of our HTML document:
border-radius: 10px; box-shadow: 8px 8px 1px gray; transform: rotate(40deg); -ms-transform: rotate(40deg); /* IE 9 */ -webkit-transform: rotate(40deg); /* Safari and Chrome */
On reloading the HTML page, we can see our div has transformed to this new look:
