HTML 5 tutorials Part 4 - Introduction to HTML5

Initial 3 parts Part1, Part 2 and Part 3 we talked about the basics of HTML. I know most of the developers usually know about this stuff but it is always to brush up the basics before talking about the new stuff.

From this part we will start more on HTML5. First question that come to mind is what are the problems that are being solved by HTML5?

What is HTML5?

HTML5 is combination of new html elements and lots of new JavaScript APIs. I know this not a definition you were expecting but in reality this is it. So do we really need to call it HTML5? I think we can just say HTML as there will be new development but I guess there won't be any HTML6. It will be called on HTML.

Problems solved by HTML5

SEO

Previous we use one tag mostly in the web page design, I guess you know it is div. So for search engine to identify different parts of the page is by scanning the ids. So we need to keep consistent ids across the web pages. How this is solved by HTML5?

HTML5 provide us different html tags like header, main, footer which are used to specify the header content, main content and footer content of the page. Which makes is easy for the search engines to find specific contents of the page. It provides semantics for the web pages.

Mobile Friendly

Billions of people are now using mobile device and we want to make sure that our web pages are more suitable for mobile. If you open up a web page on mobile than you get an option to make the web page mobile friendly and read in mobile mode. As soon as you click on this option the web page completely change the design as per the mobile form factor. So it is easy to develop the web page for vast variety of mobile form factors.

Multi Media

HTML5 provide tags which can be used to host the multi media content like music, video, graphs and games. Now developer can develop a full fledged  game only in HTML5 and supporting CSS3 and javascript. So we do not need to use Flash or Silverlight to show videos or animated stuff on web pages. 

we will discuss these features in details as we move along the tutorials. I am sure there are other many important things which can be done easily in HTML5. Please add these to comments to share with others.

So here is the basic structure of HTML5 page that you can see.

HTML 5 tutorials Part 3 - Bacis of HTML - Lists and Links

In this part we are going to discuss different kind of lists and links.

Lists

Unordered List

unordered list is the bulleted list which is defined using the tags ul and li.

<ul>

<li>1^st</li>

<li>2^nd</li>

</ul>

We can create nested lists with another ul tag within the li tag.

                <ul>

<li>1^st

<<ul>

<li>1.1</li>

</ul>

</li>

<li>2^nd</li>

</ul>

Ordered List

We can create ordered lists using the <ol> and <li> tags. Define in the same way as unordered list.

Definition List

Definition list are used to have term and put its definition next to it.

<dl>

<dt>HTML</dt>

<dd>Hyper text markup language</dd>

</dl>

HTML 5 Tutorial Part 2 - Basics of HTML - Text Elements

So, we have learned about the basics of html5 in the Part 1 of the series of tutorials. In this part we will discuss different Text elements and their attributes.

Note: No examples included please try them in an HTML page and see for yourself that what would be the text like. This is done intentionally. Purpose is to make you aware of the elements and encourage to try them yourself.

Block vs Inline Elements

Block elements are used to define a block of content like div or p tag. They are rendered on different lines, we can make them render on the same line using css. But we can say that block element render in the next line.

Inline elements are used to defined links or acronyms like span tag, a tag. Text will be rendered inline to the content. 

Headings

H1 - Primary heading

Primary heading of the document. It is also used by the search engines. 

H2-H6 - Sub headings

HTML have subheadings ranging from H2 - H6. So you can have subheading H2, H3, H4, H5 and H6. You want to use one primary heading for your page and subsequent sub headings. 

Note: We do not want to use the heading for the font size, we can style the text using style sheets.

<pre>

When client sees the pre tag it will honor the whitespace in the content.

<br/>

Used to add the newline.

<hr/>

Adding a horizonal rule and you can style it look different way.

&nbsp - non breaking space

This is instruction to client that do not break a line at that point while doing text wrapping.

&lt and &gt

Used to show the less than and greater than signs in the web page. As we have < and > being used in the html and if you want to show those as symbols than we need to use &lt and &gt.

<sup> and <sub>

superscript and subscript used to set the text as superscript and subscript.

<cite>

Information for citing a particular person or entity. It will be rendered as Italic text. you can style the cite in the styles. These are mostly for the search engines.

<abbr> and <acronym>

acronym is used to put the acronym and set the title attribute to set the full name of the acronym. Full name of the acronym will be shown in the mouse hover tooltip. abbr is used in the same way.

<em> and <strong>

emphasis and strong can be used to highlight the text. em is going to render the text in italic and strong is going to make the fond bold.

<blockquote><q>

blockquoute and qoute are used to put some quoutes in the text. Blockqoute as the names suggest is block element and q is inline qoute.


Note: Please try them at home.

HTML5 Tutorial Part 1 - Basics of HTML

In this part we will discuss the basics of HTML before we dive in to the html5 elements and features of html5. 

Terms will be used

Client

Client will be user Browser. Which render the html documents. You would not see the html tags on the page but the render web page.

Server

Machine hosting the HTML web documents and that can be located using the specific URL. URL is universal resource locator. There's lot happen when you click on a URL. we can cover that in separate blog.

Framework

Client side javascript framework which help in development of client rich applications. Most popular frameworks are AngularJS and React.

Advanced JavaScript Topics Part 2

We were discussing the let keyword in the Part 1 of this series. We discussed what the advantages and how we can use let keyword in the code. However, let keyword has a problem it does not support hoisting, means if you have declared a variable using let keyword in the mid of the block it would not be available in the part above the declaration of the let keyword.

So you always make sure that let is declared at the top of the block.

As we discussed earlier let keyword kind of Hack the scope implicitly. We can always write the code to make sure when we see we can explicitly identify that this block is a scope. The example given the in the Part 1 of this series used the implicit way. To use the explicit way do it like this

function foo(bar) {

    "use strict"

    let (test = bar) {

        console.log(test) // "bar"  

    }

    console.log(baz) // reference error

}

However, this syntax is rejected by the committee. we can use some other way to make sure we see the block scope in the code as we read the code.

function foo(bar) {

    "use strict"

    /*let */

    {

        let test = bar

        console.log(test) // "bar"  

    }

    console.log(baz) // reference error

}

This is one way to do it. Keyle Simpson have created this great tool to help you with block scoping it is called Let-er .

So, as we started to talk about tools you might want to take a look at traceur-compiler it generates ES 5 code from ES 6 code. As there is development going on in ES 6 you should start writing your code in ES 6 and use a transpiler to convert the ES 6 code to ES 5. You can use grunt-traceur . Other than this you might wanna take a look at the tools for ES 6.

Hoisting

Hoisting is a concept which is developed to understand how JavaScript works when we declare the variables and functions. Take a look at the code below

Advanced JavaScript Topics Part 1

If you are writing Hybrid Mobile Applications than JavaScript should in your blood. So, I am trying to write something about JavaScript today.

Some Resources

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide : It is Mozilla Developer Network also known as MDN. It is an open source Wiki also, which I  think not known to most of the people. It is one link that should be bookmark in your browser.

• https://github.com/rwaldron/idiomatic.js : It is a write up of idiomatic code that is widely accepted across the developer to write consistent JavaScript code. You may not agree with all the code which is there but it is a great place to start. There are couple of quotes written on the git page, which I like it is

         "Arguments over style are pointless. There should be a          style guide, and you should follow it"                

         Rebecca Murphey

• http://addyosmani.com/resources/essentialjsdesignpatterns/book/ : This is one stop shop for design patterns in JavaScript and if you are going to write a clean code in JavaScript and Follow a Design to solve the problems in JavaScript you should go through this.
• 
  
•     http://www.ecma-international.org/ecma-262/6.0/ : JavaScript is EEMA Script if you don’t know. This is the language specification and I am sure many of you have not referred to this. If you are referring to this means you are writing some serious efficient JavaScript Code.

Introduction to Facebook Parse SDK

Parse was acquired by Facebook in 2013 and they have announced Open Source SDKs. Open Sourced all of SDKs related to iOS, OSX, and Andriod. Code for all the SDKs is available on Github ParsePlatform.

Mobile Developers were using these SDKs for Development but were not aware of what is happening behind the scenes. 

Parse Team has started to write updates about the Parse SDKs on the blog. The very first blog "The Parse SDK : What's inside" tells about how Asynchronous APIs works in Parse.