HTML5 input elements - Alexis Goldstein

Intro to HTML5 These slides are available at: http://bit.ly/GAhtml5 Alexis Goldstein @alexisgoldstein [email protected]

Monday, October 10, 2011

The plan! We have a ton to cover today, so I want to let you know the target pacing of the class. • Overview • New semantic elements • Why you should care about Micro id="emailAddr">

• The places where visitors enter their information is in the input element.

• There are lots of input types in HTML4, like checkbox, radio, submit and button.

• HTML5 adds several new input types. Monday, October 10, 2011

New Form Input Types

• The best thing about the new input types? • You can safely use the new input type attributes now.

• Why? Because all browsers treat

unrecongnized type attributes as type=”text” (even IE 6!). So you can use the new email and url input types now!


Email E-mail:

•

Email: When you view this on an iPhone, you get an on-screen keyboard with dedicated keys for the @ and . characters

•

If you have an iPhone, try this out yourself at this link: http:// alexisgo.com/resistor/ html5samples/emailAndURL.html


URL •

You can safely use the new input type attributes now.

•

Why? Because all browsers treat unrecongnized type attributes as type=”text” (even IE 6!). So you can use the new email and url input types now!

URL:


•

When you view this on an iPhone, the keyboard is optimized for a URL.

•

If you have an iPhone, try this out yourself at this link: http:// alexisgo.com/resistor/ html5samples/emailAndURL.html

Other New Input Typess Range of #s:

Slider:

Search:


A Date Picker... for the future • • •

HTML4 provided no way to specify a date picker. The date pickers you see on websites use JavaScript to create them. HTML5 creates a new input type, date, giving HTML5 built-in support for date pickers! Date:

The problem is, so far, Opera is the only browser that supports the new date input type.


Placeholder Text!

Browsers that don’t support the placeholder attribute will simply ignore it.


Checking for Placeholder Text We can check for placeholder text support using Modernizr in some JavaScript: if (Modernizr.input.placeholder != true) { // no placeholder support :( // fall back to a scripted solution, like jQuery’s // watermark plugin: //http://plugins.jquery.com/project/jq-watermark

}


Resources on Forms: • •

Where to go to learn more on forms: http://w3schools.com/html/html_forms.asp Where to go to learn more on new HTML5 input elements: http://www.w3schools.com/html5/default.asp http://diveintohtml5.org/forms.html

• • •


Semantics!


New Semantic Elements The new semantic elements in HTML5 are a way to give more specific meaning to your content. As a counter-example, the div element has NO semantic meaning. It’s simply a way to wrap things up so you can style them. The span element is another example of a non-semantic element. It’s just a wrapper!


New Semantic Elements Most pages are swimming in divs that have been labeled with classes. Here is a familiar pattern: ... ... ... ...


New Semantic Elements If you like your div/class structure, keep it! It is perfectly valid HTML5. That said, HTML5 provides some additional semantic elements for headers and sections that you may find useful.


New Semantic Elements Old way: My Weblog
The only thing you need to read today.
A new way: My Weblog
The only thing you need to read today.
… Monday, October 10, 2011

New Semantic Elements We can now write: My Weblog
A lot of effort went into making this effortless.
… What is nice about this, is that anyone viewing or maintaing the page source will know that this is a header. Since there are no rules for how you label your class attributes, this is not always the case today.


New Semantic Elements Instead of: ... We can now write:

home

blog

gallery

about

Anyone viewing or maintaing the page source will know that this is the section for navigation.


Other Semantic Elements article • Meant to hold anything that can be independently re-distributed/syndicated. Think articles in newspapers, journals, blogs. section • Used to group content that shares a common theme aside • A side note that isn’t critical to the main text hgroup • Used to group together the heading (h1-h6) elements. Ex: If you use h1 and then h2, group them both inside an hgroup.


Other Semantic Elements • • •

footer time mark • Text that is highlighted or otherwise marked for reference.

Learn more about the new semantic elements: • http://www.whatwg.org/specs/web-apps/currentwork/multipage/text-level-semantics.html#text-levelsemantics • http://diveintohtml5.org/semantics.html#newelements


New Semantic Elements in older browsers

• But what about older browsers? • What happens if I’m using IE 8 or earlier, and you use these new header or nav or section elements?

• They get ignored! • This is true now!


New Semantic Elements in older browsers

•

If you add an element called Truth! it will appear in the browser as if it had no element at all.

•

If you style the alexisisamazing element, even though it’s not valid HTML, the styles will work (meaning the browser will display they styles)...

• •


UNLESS it’s in IE 8. Internet Explorer prevents any unknown elements from getting styled.

So, the point is, using nav and header today won’t hurt

•

Just be aware that if you add styles to them, the styles won’t work in IE until we get IE 9.0

New Semantic Elements in IE

• So, the point is, using nav and header today won’t hurt you, and can only help you.

• Just be aware that if you add styles to them, the styles won’t work in IE until we get IE 9.0

• But what if this isn’t acceptable to me? • Never fear! Modernizr is here!


Detecting HTML5 Support with Modernizr


Detecting support: Modernizr Modernizr is an open-source JavaScript library that helps you understand what your visitor’s browsers do and do not support. With Modernizr, you can provide different CSS styling for browsers that do not support new CSS3 features, or use JavaScript to fall back gracefully if the visitor’s browser does not support the new video element.


Our first problem: styling header, nav, section etc in IE 8 How can Modernizr help us with that problem we had with using the new semantic elements in IE 8.0 & earlier? “Modernizr runs through a little loop in JavaScript to enable the various elements from HTML5 for styling in Internet Explorer. Note that this does not mean it suddenly makes IE support the Audio or Video element, it just means that you can use section instead of div and style them in CSS.” --http:// www.modernizr.com/docs/ Monday, October 10, 2011

How to use Modernizr You can download Modernizr here: http:// modernizr.com. You then want to include it in the head element of your site:

My Beautiful Sample Page

...


Modernizr: What else? Modernizr allows us to detect whether our visitor’s browser supports a given HTML5 element (or CSS3 property!) If their browser does NOT support a given feature, we have a choice: • We can use custom CSS styles

•


We can write some JavaScript to fallback to another way of doing things.

Testing for features in JavaScript •

The Modernizr JavaScript library creates a global object called Modernizr

•

This Modernizr object can tested to see if a specific feature is supported.

•

In the JavaScript file for your site, you may have the following code:

if (Modernizr.geolocation) { /* use HTML5’s Geolocation */ } else { /* use Alexander Farkar’s Geolocation shim: http://afarkas.github.com/ webshim/demos/demos/geolocation.html */ } Monday, October 10, 2011

Detecting support: Modernizr To learn more about how to use Modernizr, see:

•

http://www.alistapart.com/articles/taking-advantage-of-html5and-css3-with-modernizr/

• •

http://www.modernizr.com/docs/


http://diveintohtml5.org/detect.html

Micro>http://pizza.com Here’s our official website


Micro>http://pizza.com

2. Itemtype 3. Itemprop


Micro>http://pizza.com

3. Itemprop


Micro itemprop=”url”>http://pizza.com


Micro itemprop=”url”>http://pizza.com So I specified which item PROPERTY I care about, but... how does the search engine know what VALUE I mean? • Does it just take the text content (“L’Amourita Pizza”) • How would it know where to grab the URL from?


Micro itemprop=”url”>http://pizza.com Addresses are their own unique itemtype. So I need to nest the address information inside a new element with the itemtype set to Address


Nested Micro itemprop=”url”>http://pizza.com Monday, October 10, 2011

Micro src="http://maps.google.com/ maps/api/js?sensor=true"> Google has a sensor parameter to indicate whether this application

uses a sensor (GPS device) to determine the user's location.You must set this value to either true or false explicitly.


Google Maps API Next, we need an HTML element to hold the Google Map.


I am going to store my map in a div. I’ve labeled that div with the id map_canvas.

A simple map with location We’ll add the following functions to our existing JavaScript file findMe.js: . . .

function show_map(position) { ! var latitude = position.coords.latitude; ! var longitude = position.coords.longitude; var myOptions = { ! ! zoom : 16, ! ! mapTypeId : google.maps.MapTypeId.ROADMAP ! }; ! var map_canvas = document.getElementById ("map_canvas"); ! var map = new google.maps.Map(map_canvas, myOptions); ! displayLocation(map, latitude, longitude); } function displayLocation(map, lat, lng) { /* we’ll fill this in later */ Monday, October 10, 2011 }

Google’s Map Options •

Google allows you to set several options on your map, like zoom level and map type

function show_map(position) { ! var latitude = position.coords.latitude; ! var longitude = position.coords.longitude;

1

var myOptions = { ! ! zoom : 16, ! ! mapTypeId : google.maps.MapTypeId.ROADMAP ! }; ! var map_canvas = document.getElementById ("map_canvas"); ! var map = new google.maps.Map(map_canvas, myOptions); ! displayLocation(map, latitude, longitude); } function displayLocation(map, lat, lng) { /* we’ll fill this in later */ }


Finding the place for the map •

Next, we grab the div element where we want to place the Map


2

! ! ! ! !

var myOptions = { ! zoom : 16, ! mapTypeId : google.maps.MapTypeId.ROADMAP }; var map_canvas = document.getElementById("map_canvas"); var map = new google.maps.Map(map_canvas, myOptions);

! displayLocation(map, latitude, longitude); } function displayLocation(map, lat, lng) { /* we’ll fill this in later */ Monday, October 10, 2011 }

Creating a new Map • •

Now we create a new Google map, using google’s object google.maps.Map It takes the HTML element we want the map to go in, and the options we defined for the map


3

! ! ! ! !

var myOptions = { ! zoom : 16, ! mapTypeId : google.maps.MapTypeId.ROADMAP }; var map_canvas = document.getElementById("map_canvas"); var map = new google.maps.Map(map_canvas, myOptions);

! displayLocation(map, latitude, longitude); } function displayLocation(map, lat, lng) { /* we’ll fill this in later */ Monday, October 10, 2011 }

Displaying the map • •

The last step is to display the map and our location on it. To handle this, I am calling a separate function, displayLocation


! ! ! ! !

4!

var myOptions = { ! zoom : 16, ! mapTypeId : google.maps.MapTypeId.ROADMAP }; var map_canvas = document.getElementById("map_canvas"); var map = new google.maps.Map(map_canvas, myOptions); displayLocation(map, latitude, longitude);

} function displayLocation(map, lat, lng) { /* we’ll fill this in later */ Monday, October 10, 2011 }

Displaying the marker • •

1

We also want a marker that shows where we are on the map. To add this, we need to store the Latitude and the Longitude together in a special Google object: google.maps.LatLng

function displayLocation(map, lat, lng) { initialLocation = new google.maps.LatLng(lat, lng); ! ! ! ! !

var marker = new google.maps.Marker({ ! position : initialLocation, ! map : map, ! title : "Hello World!" });

! map.setCenter(initialLocation); } Monday, October 10, 2011

Displaying the marker • •

Next, we create another Google object, a google.maps.Marker object. This object needs: • The LatLng object we just created • The Google Maps object • A title


2

var marker = new google.maps.Marker({ ! position : initialLocation, ! map : map, ! title : "Hello World!" });

! map.setCenter(initialLocation); } Monday, October 10, 2011

Displaying the marker •

The final step is to call a method on the Google Map object called setCenter, passing in the LatLng object you created in the first line of this function


3! } Monday, October 10, 2011

var marker = new google.maps.Marker({ ! position : initialLocation, ! map : map, ! title : "Hello World!" }); map.setCenter(initialLocation);

Geolocation: Lat & Long I have put together a complete sample of this here: http://alexisgo.com/teaching/ codesamples/geo/geolocation.html


Geolocation: The next level If you want to build some map-based web applications, I would strongly suggest using Google Maps’ JavaScript API, version 3. You can find a plethora of documentation about it here: http://code.google.com/apis/maps/documentation/javascript/ http://code.google.com/apis/maps/documentation/javascript/ tutorial.html The full geolocation API is here: http://dev.w3.org/geo/api/specsource.html


Offline & Local Storage


Offline Storage • •

Offline Storage leverages the HTML5 Application Cache. The Application Cache stores the entire website offline: all the javascript, html, css, all your images and resources. Your application is automatically updated every time the user visits your page while online. If even one byte of >


The cache.manifest file •

Ingredients in HTML5 offline storage: 1. Create a cache.manifest file:

CACHE MANIFEST

The first line must be “CACHE MANIFEST”

#v0.1 cityracks.kml index.html main.css main.js NETWORK:

All files (of any type, be they html, css, images or >


The cache.manifest file •

Ingredients in HTML5 offline storage: 1. Create a cache.manifest file 2. Set the content type on your server 3. Set the following in your HTML:

NOTE: Every page of your web application needs . You should only have one cache.manifest file for the entire application.


Debugging Offline Web Apps •


http://www.fuckyeahtml5.com/2011/06/debugging-html5soffline-web-apps/

Web Storage


Persist Simple > Your browser does not support the video element.


HTML5 Video: The Good News! •

Here’s the theory: the old way is messy, since it requires the use of plugins:

•

• •

New way:


HTML5 Video: The Bad News!

• If you want to support ALL browsers and ALL video encodings, you will still need a plugin as a last-resort fall back plan.

• This is because IE 8 does NOT support the video element yet.

• IE 9 will have video element support.

• The idea was to simplify! The (sad :(

) reality is, video in HTML5 is currently not very simple.


HTML5 Video: The Bad News!

• The new way really looks like this:
Download video as MP4, WebM, or Ogg.


Canvas: The JavaScript • •

Next, we need to get what is known as the graphics context. Currently, there is only a two-dimensional context. We grab the context by calling the getContext method defined in the canvas API.


Canvas: The JavaScript •

Now that we have the context, we are ready to draw into it. • Before we draw any shapes, we need to set the fill (the color background) and the stroke (the color border)


Canvas: The JavaScript • •

All we have done is set the color of the fill and the stroke. Now, we need to actually draw the fill and the stroke. Let’s make a rectangle.


Using Patterns •

We can also fill our rectangles with patterns based on images!


A Note about Coordinates •

In math class, we were used to our coordinate system looking like this:

•

On the Canvas, our (0,0) is actually in the top left corner. (400, 400) in Canvas looks like this:


Canvas: Arcs! • • •

We are not limited to drawing rectangles! We can draw any arbitrary lines, or paths, as Canvas refers to them. Let’s draw a circle now...


Canvas: A circle

• Monday, October 10, 2011

Canvas Resources •

To learn more: • http://www.standardista.com/html5/html5-introductionto-canvas • http://diveintohtml5.org/canvas.html • http://dev.opera.com/articles/view/html-5-canvas-thebasics/ • How to make a color image black and white using Canvas: http://www.youtube.com/watch? v=QJa7tWScXS4 • Video + Canvas = Magic: http://html5doctor.com/videocanvas-magic/


Drag and Drop


How to drag & drop In order to demonstrate drag and drop, we’ll take a look at a simple example I created: http:// www.livetotry.com/GDI/codeSamples/dragndrop.html The complete code for the example we’ll be using is up here: https://github.com/alexisgo/ DragNDrop_PlanningBoard


How to drag & drop In order to add Drag and Drop to our pages, we must: 1. Set the draggable attribute on HTML elements you’d like to be able to drag. 2. Add an Event Listener for the dragstart event on draggable HTML elements. 3. Add an EventListener for the dragover and drop events on the elements you want to accept dropped items. The complete code for the example we’ll be using is up here: https://github.com/alexisgo/ DragNDrop_PlanningBoard


Drag & drop code disclaimer I used the jQuery JavaScript library while writing this code, for convenience


How to drag & drop In order to add Drag and Drop to our pages, we must: 1. Set the draggable attribute on HTML elements you’d like to be able to drag. 2. Add an Event Listener for the dragstart event on draggable HTML elements. 3. Add an EventListener for the dragover and drop events on the elements you want to accept dropped items. Learn HTML5 Learn CSS3


How to drag & drop In order to add Drag and Drop to our pages, we must: 1. Set the draggable attribute on HTML elements you’d like to be able to drag. 2. Add an Event Listener for the dragstart event on draggable HTML elements. 3. Add an EventListener for the dragover and drop events on the elements you want to accept dropped items. We’ll do this via JavaScript: ! ! !

! ! !


Binding Events to Event Listeners We’ll do this via JavaScript: ! ! !

! ! !

3. ...run the code inside this anonymous function


> $('document').ready(init);

function init(){ $('#item1, #item2').bind('dragstart', function(event) { event.originalEvent.> $('document').ready(init);



function init(){ $('#item1, #item2').bind('dragstart', function(event) { event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id')); }); ! !

event.originalEvent.dataTransfer.setData Here’s where we actually store some information. - First, we tell it to store in plain text (“text/plain”). - Next, we tell DataTransfer to store the id of the item that was dragged. This will be either item1 or item2, sine these are the only two draggable items.


How to drag & drop In order to add Drag and Drop to our pages, we must: 1. Set the draggable attribute on HTML elements you’d like to be able to drag. 2. Add an Event Listener for the dragstart event on draggable HTML elements. 3. Add an EventListener for the dragover and drop events on the elements you want to accept dropped items. $('#todo, #inprogress, #done').bind('dragover', function(event) { event.preventDefault(); });


$('#todo, #inprogress, #done').bind('drop', function(event) { var notecard = event.originalEvent.dataTransfer.getData("text/plain"); event.target.appendChild(document.getElementById(notecard)); event.preventDefault(); });

How to drag & drop $('#todo, #inprogress, #done').bind('dragover', function(event) { event.preventDefault(); });

By default, NONE of the elements on the page will accept a dropped item. In order to override this default behavior on a specific element, we must stop the default (no dragging and dropping allowed!) behavior. We do this via the event.preventDefault(); line


How to drag & drop

$('#todo, #inprogress, #done').bind('drop', function(event) { var notecard = event.originalEvent.dataTransfer.getData("text/plain"); event.target.appendChild(document.getElementById(notecard)); event.preventDefault(); });

In the dragstart Event Handler, we stored the value of the dragged div’s id. Now, we need to retrieve that, in order to successfully drop our item! We get the item out via getData. As a last step, we call appendChild to insert the notecard inside the element we dragged it into.


More on Drag and Drop http://blogs.sitepoint.com/a-drag-and-dropplanning-board-with-html5/


Where to Learn More


Resources to Learn More •

Book: • HTML5 and CSS for the Real World

•

Web Resources: • Safari Developer Center • How-to Videos • Dive Into HTML5, the free online book • http://html5demos.com/ • http://www.standardista.com/html5 • http://html5doctor.com/


General JavaScript Resources • • • •

http://girldevelopit.com/materials/ Mozilla's JS Guide: https://developer.mozilla.org/en/ JavaScript/Guide http://javascript.infogami.com/ Javascript_in_Ten_Minutes Videos by Douglas Crawford: http:// video.yahoo.com/watch/111593/1710507


HTML5 input elements - Alexis Goldstein

HTML5 input elements - Alexis Goldstein

Suggest Documents

HTML5 input elements - Alexis Goldstein

google.maps.LatLng - Alexis Goldstein

html - Alexis Goldstein

html - Alexis Goldstein

html - Alexis Goldstein

google.maps.LatLng - Alexis Goldstein

These slides are available at - Alexis Goldstein

Customizing HTML5 Layout Elements

C-GOLDSTEIN

Goldstein CV

html5-all elements by abdelhakeem qassem.pdf - Google Drive

Andy Goldstein: Huésped de Honor de la UNRC Andy Goldstein ...

JOSHUA HOWARD GOLDSTEIN

Goldstein TG - Dental XP

The_roseanne_of_literature_-_new_york_times - Alexis Jetter

Notomys alexis - Reproduction

Alexis de Tocqueville - geovest

Alexis K. Manheim

06 Alexis Kalergis.indd - SciELO

Alexis Benton - Google Sites

International Relations - Joshua Goldstein

JOSEPH GOLDSTEIN - yimg.com

Joseph Goldstein - Eliezer Sobel

steve goldstein - Bitly