HTML5 for Beginners Learn by Video 2012



English mp4 670 kb/s 1024×576 15.00 fps(r) aac 127 kb/s (und) 2 hrs 1.32 GB
VideoTraining
The advent of HTML5 has opened up new frontiers in the world of web design, and in this course you?ll learn how to exploit the power of HTML5 to make the best-looking, smoothest-functioning, and easiest-to-use web pages possible.
After getting an overview of HTML and CSS concepts, you?ll work along with author and trainer Sally Cox to create an entire blog site from scratch. Starting with the concept, you?ll proceed to build a wireframe and add text, images, a header, a nav bar, an interactive form, and even multimedia content. Along the way you?ll learn about the new tags in HTML5 and get lots of tips on web design, such as which graphic formats to use and the best way to save your graphics for the web. This Learn by Video title is published in partnership with Peachpit Press.
What Is HTML5?
Understanding Hypertext Markup Language (HTML) 07:47
Learning the Parts of a Web Page 05:15
Writing Your First Snippets of Code 03:01
Understanding How Browsers Interpret HTML 01:50
Comparing Web Browsers and How They Display Web Pages 02:34
Test Yourself
Understanding HTML5 Markup and CSS3
Examining HTML Tags 02:14
Incorporating HTML5 Tags 02:42
Adding Style with CSS3 02:44
Working with CSS and HTML5 Together 03
Test Yourself
Beginning with Wireframing
Deciding How Your Site Will Work 05:07
Planning the Hierarchy of Your Site 03:08
Creating Your First Wireframe 02:36
Thinking About Usability 02:06
Test Yourself
Creating a Simple Blog Design with HTML5
Changing the DOCTYPE of Your HTML5 Document 03:03
Understanding the Elements of a Blog 01:53
Adding a Header and Footer to Your Blog 02:52
Posting to Your Blog 02:12
Adding a Sidebar with the Aside Element 03:01
Using Lists to Organize Content 03:43
Creating Tables in a Web Page 06:04
Test Yourself
Designing an HTML5 Form
Beginning to Design a Form 03:10
Understanding Basic Form Elements 03:55
Adding an Attribute to the New HTML5 Input Tag 04:09
Highlighting Important Content 02:17
Test Yourself
Incorporating Graphics
Understanding Web Graphic Formats 03:24
Saving Graphics Properly for the Web 06:58
Working with Color on the Web 03:03
Resources for Designing with Color 03:36
Exploring the Canvas Tag 05:34
Test Yourself
Adding Multimedia
Why Use Multimedia? 02:56
Adding Audio to Your Contact Form 03:35
Understanding Video Types for the Web 01:24
Working with Video Controls 03:30
Test Yourself
Conclusion
Updating Your Blog 02:17
Changing the Look and Feel of Your Site 02:15
Conclusion 02:03

Download below links:

http://extabit.com/file/2ee9x5es27pp8
http://extabit.com/file/2ee9x5es27sp8
http://extabit.com/file/2ee9x5es27pl8
http://extabit.com/file/2ee9x5es27pos
http://extabit.com/file/2ee9x5es27pq4
http://extabit.com/file/2ee9x5es27png
http://extabit.com/file/2ee9x5es27pm4
http://extabit.com/file/2ee9x5es27pmk
http://extabit.com/file/2ee9x5es27srw
http://extabit.com/file/2ee9x5es27ssc
http://extabit.com/file/2ee9x5es27z4s
http://extabit.com/file/2ee9x5es27z7g
http://extabit.com/file/2ee9x5es27ppo
http://extabit.com/file/2eea3621i49s4

42 basic videos and 3 books about HTML5

42 HTML5 Videos:
Get acquainted with HTML5 by learning about the new semantic markup and JavaScript APIs coming in HTML5-enabled browsers. Learn to reliably detect HTML5 features, work with the DOM, draw with the canvas, enhance forms with the extended web forms API and serve media with native controls.
Authored by:Craig Shoemaker
Craig is a software developer, podcaster, blogger and Product Guidance Manager for Infragistics. As host of the Polymorphic Podcast and Pixel8, Craig does what he loves most – making community contributions drawing the best out of industry luminaries.
DURATION: 2:57
LEVEL: Beginner
DATE: 3/4/2011

3 HTML5 ebooks:
1, HTML5_and_JavaScript_Projects_-_J._Meyer_(Apress,_2011)_BBS.pdf
2, Addison.Wesley.Learning.HTML5.Game.Programming.S ep.2011.pdf
3, Head First HTML5 Programming.pdf

Download Link MF: http://www.mediafire.com/?x4f9urhh3mmoe

Storing Data on the Client

HTML5 offers two new objects for storing data on the client:

  • localStorage – stores data with no time limit
  • sessionStorage – stores data for one session

Earlier, this was done with cookies. Cookies are not suitable for large amounts of data, because they are passed on by EVERY request to the server, making it very slow and in-effective.

In HTML5, the data is NOT passed on by every server request, but used ONLY when asked for. It is possible to store large amounts of data without affecting the website’s performance.

The data is stored in different areas for different websites, and a website can only access data stored by itself.

HTML5 uses JavaScript to store and access the data.


The localStorage Object

The localStorage object stores the data with no time limit. The data will be available the next day, week, or year.

How to create and access a localStorage:

Example

<script type=”text/javascript”>
localStorage.lastname=”Smith”;
document.write(localStorage.lastname);
</script>

Try it yourself »

The following example counts the number of times a user has visited a page:

Example

<script type=”text/javascript”>
if (localStorage.pagecount)
{
localStorage.pagecount=Number(localStorage.pagecount) +1;
}
else
{
localStorage.pagecount=1;
}
document.write(“Visits “+ localStorage.pagecount + ” time(s).”);
</script>

Try it yourself »

 


The sessionStorage Object

The sessionStorage object stores the data for one session. The data is deleted when the user closes the browser window.

How to create and access a sessionStorage:

Example

<script type=”text/javascript”>
sessionStorage.lastname=”Smith”;
document.write(sessionStorage.lastname);
</script>

Try it yourself »

The following example counts the number of times a user has visited a page, in the current session:

Example

<script type=”text/javascript”>
if (sessionStorage.pagecount)
{
sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
}
else
{
sessionStorage.pagecount=1;
}
document.write(“Visits “+sessionStorage.pagecount+” time(s) this session.”);
</script>

Try it yourself »

Source from http://www.w3schools.com

HTML5 Geolocation

HTML5 Geolocation is used to locate a user’s position


Locate the User’s Position

The HTML5 Geolocation API is used to get the geographical position of a user.

Since this can compromise user privacy, the position is not available unless the user approves it.


Browser Support

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Chrome, Safari and Opera support Geolocation.

Note: Geolocation is much more accurate for devices with GPS, like iPhone.


Using Geolocation

Use the getCurrentPosition() method to get the user’s position.

The example below is a simple Geolocation example returning the latitude and longitude of the user’s position:

Example

<script>
var x=document.getElementById(“demo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“<br />Longitude: ” + position.coords.longitude;
}
</script>

Try it yourself »

Example explained:

  • Check if Geolocation is supported
  • If supported, run the getCurrentPosition() method. If not, display a message to the user
  • If the getCurrentPosition() method is successful, it returns a coordinates object to the function specified in the parameter ( showPosition )
  • The showPosition() function gets the displays the Latitude and Longitude

The example above is a very basic Geolocation script, with no error handling.


Handling Errors and Rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user’s location:

Example

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML=”User denied the request for Geolocation.”
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML=”Location information is unavailable.”
break;
case error.TIMEOUT:
x.innerHTML=”The request to get user location timed out.”
break;
case error.UNKNOWN_ERROR:
x.innerHTML=”An unknown error occurred.”
break;
}
}

Try it yourself »

Error Codes:

  • Permission denied – The user did not allow Geolocation
  • Position unavailable – It is not possible to get the current location
  •  Timeout – The operation timed out

Displaying the Result in a Map

To display the result in a map, you need access to a map service that can use latitude and longitude, like Google Maps:

Example

function showPosition(position)
{
var latlon=position.coords.latitude+”,”+position.coords.longitude;var img_url=”http://maps.googleapis.com/maps/api/staticmap?center=”
+latlon+”&zoom=14&size=400×300&sensor=false”;

document.getElementById(“mapholder”).innerHTML=”<img src=’”+img_url+”‘ />”;
}

Try it yourself »

In the example above we use the returned latitude and longitude data to show the location in a Google map (using a static image).

Google Map Script
How to use a script to show an interactive map with a marker, zoom and drag options.


Location-specific Information

This page demonstrated how to show a user’s position on a map. However, Geolocation is also very useful for location-specific information.

Examples:

  • Up-to-date local information
  • Showing Points-of-interest near the user
  • Turn-by-turn navigation (GPS)

The getCurrentPosition() Method – Return Data

The getCurrentPosition() method returns an object if it is successful. The latitude, longitude and accuracy properties are always returned. The other properties below are returned if available.

Property Description
coords.latitude The latitude as a decimal number
coords.longitude The longitude as a decimal number
coords.accuracy The accuracy of position
coords.altitude The altitude in meters above the mean sea level
coords.altitudeAccuracy The altitude accuracy of position
coords.heading The heading as degrees clockwise from North
coords.speed The speed in meters per second
timestamp The date/time of the response

 


Geolocation object – Other interesting Methods

watchPosition() – Returns the current position of the user and continues to return updated position as the user moves (like the GPS in a car).

clearWatch() – Stops the watchPosition() method.

The example below shows the watchPosition() method. You need an accurate GPS device to test this (like iPhone):

Example

<script>
var x=document.getElementById(“demo”);
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else{x.innerHTML=”Geolocation is not supported by this browser.”;}
}
function showPosition(position)
{
x.innerHTML=”Latitude: ” + position.coords.latitude +
“<br />Longitude: ” + position.coords.longitude;
}
</script>

Try it yourself »

Source from http://www.w3schools.com

HTML5 Canvas

The canvas element is used to draw graphics on a web page.

Your browser does not support the canvas element.


What is Canvas?

The HTML5 canvas element uses JavaScript to draw graphics on a web page.

A canvas is a rectangular area, and you control every pixel of it.

The canvas element has several methods for drawing paths, boxes, circles, characters, and adding images.


Create a Canvas Element

Add a canvas element to the HTML5 page.

Specify the id, width, and height of the element:

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

 


Draw With JavaScript

The canvas element has no drawing abilities of its own. All drawing must be done inside a JavaScript:

<script type=”text/javascript”>
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);
ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);
</script>

Try it yourself »

JavaScript uses the id to find the canvas element:

var c=document.getElementById(“myCanvas”);

Then, create a context object:

var ctx=c.getContext(“2d”);

The getContext(“2d”) object is a built-in HTML5 object, with many methods to draw paths, boxes, circles, characters, images and more.

The next two lines draws a red rectangle:

ctx.fillStyle=”#FF0000″;
ctx.fillRect(0,0,150,75);

The fillStyle method makes it red, and the fillRect method specifies the shape, position, and size.


Understanding Coordinates

The fillRect method above had the parameters (0,0,150,75).

This means: Draw a 150×75 rectangle on the canvas, starting at the top left corner (0,0).

The canvas’ X and Y coordinates are used to position drawings on the canvas.

Mouse over the rectangle below to see the coordinates:

X
Y

More Canvas Examples

Below are more examples of drawing on the canvas element:

Example – Line

Draw a line by specifying where to start, and where to stop:

Your browser does not support the canvas element.

Try it yourself »

 

Example – Circle

Draw a circle by specifying the size, color, and position:

Your browser does not support the canvas element.

Try it yourself »

 

Example – Gradient

Draw a gradient background with the colors you specify:

Your browser does not support the canvas element.

Try it yourself »

 

Example – Image

Put an image on the canvas:

Try it yourself »

 


HTML5 <canvas> Tag

Tag Description
<canvas> Defines graphics

 

Complete Canvas 2d Reference

For a complete reference of all the attributes and methods that can be used with the canvas object, go to our complete canvas 2d reference.

Source from http://www.w3schools.com

Ping your blog, website, or RSS feed for Free Sitetag