Where to Go Next in Html5

Where to Go Next in Html5

Most of this book focuses on Most of this book focuses on things you can do right now, but there are some other things you will be able to start using very soon things you can do right now, but there are some other things you will be able to start using very soon that will make standards-based web development even more interesting, from 3D canvas support with W e b G L to new storage APIs, CSS3 transitions, and native drag-and-drop support. This chapter discusses some of the things on the horizon, so you can get an idea of what to expect. W e ’ ll talk about things that you may be able to use in at least one browser but don’t have good enough fallback solutions or are too far undefined to start working with right now: Where to Go Next in Html5.

CSS3 Transitons for Where to Go Next in Html5

Interaction invitations are important to good user experience design, and CSS has supported the :hover pseudoclass for some time so that we can do some basic interaction cues on our elements. Here’s some CSS markup that styles a link so it looks like a button

a.button{
padding: 10px;
border: 1px solid #000;
text-decoration: none;
}
a.button:hover{
background-color: #bbb;
color: #fff
}

When we place our cursor over the button, the background changes from white to gray, and the text changes from black to white. It’s an instant transition. CSS3 transitions 3 let us do quite a bit more, including simple animations that were possible only with JavaScript. For example, we can make this transition into a cross-fade by adding the following highlighted code to the style definition Where to Go Next in Html5:

a.button{
padding: 10px;
border: 1px solid #000;
text-decoration: none;
webkit-transition-property: background-color, color;
webkit-transition-duration: 1s;
webkit-transition-timing-function: ease-out;
a.button:hover{
background-color: #bbb;
color: #fff
}

On line 5 Where to Go Next in Html5, we specify what properties get the transition applied. In this case, we’re changing the background and foreground colors. We specify the duration of the animation on line 6, and we specify the transition’s timing function on line 7. Timing Functions The transition-timing-function property describes how transitions happen  over time in relation to the duration you’ve set. W e specify this timing function using a cubic Bezier curve, which is defined by four control points on a graph. Each point has an X value and a Y value, from 0 to 1. The first and last control points are always set to (0.0,0.0) and (1.0,1.0), and the two middle points determine the shape of the curve. A linear curve has its control points set to the two end points, which creates a straight line at a 45-degree angle. The four points for a linear curve are ( (0.0, 0.0), (0.0,0.0), (1.0, 1.0), (1.0, 1.0) ), and it looks like this Where to Go Next in Html5:

Where to Go Next

Where to Go Next

A more complex curve, with points ( (0.0, 0.0), (0.42,0.0), (1.0, 1.0), (1.0, 1.0) ), called an ease-in curve, looks like this for Where to Go Next in Html5:

Where to Go Next

Where to Go Next

This time, only the second point has changed, which is what causes the bottom-left part of the line to curve. Even more complex is the ease-in-out curve, which has a curve at the bottom and at the top, like this Where to Go Next in Html5:

Where to Go Next

Where to Go Next

The points for this curve are ( (0.0, 0.0), (0.42,0.0), (0.58, 1.0), (1.0, 1.0) ).

We can specify these points right in the CSS property, or we can use some predefined ones like we did in our example. Our choices are default, ease-in, ease-out, ease-in-out, ease-out-in, and cubic-bezier, in which you set the points of the curve yourself. If you want the rate to be constant, you’d use linear. If you want the animation to start slow and speed up Where to Go Next in Html5, you’d use ease-in. If you want to learn a little more about making these curves, there’s a great public domain script 4 that shows you examples and helps you see the coordinates. Play around with transitions, but keep in mind that you want your interface to be usable first and pretty second. Don’t build transitions that frustrate the user, such as things that flicker or take too long to animate. You may also want to investigate CSS3 animations, 5 another method for changing CSS properties over time Where to Go Next in Html5.

Web Workers for Where to Go Next in Html5

Web Workers 6 are not part of the HTML5 specification, but you may find them useful if you need to do some background processing on the client side, so they’re worth mentioning. We use JavaScript for all of our client-side coding, but JavaScript is a single-threaded language—only one thing can happen at a time. If a task takes a long time, we force the user to wait until the task has finished. Web Workers solve this problem by creating a simple way to write concurrent programs. If we have a script called workesj.r that does some image processing, we can invoke it like this to Where to Go Next in Html5:

var worker = new Worker( "worker.js" );

Any JavaScript file can be launched as a worker, but in order for the worker to be independent, your worker script can’t access the DOM. That means you can’t manipulate elements directly. Our main script can send messages to the worker script using for Where to Go Next in Html5.

$("#button" ).click(function(event){
$("#output" ).html("starting..." );
worker.postMessage("start" );
});

Native Drag-and-Drop Support  for Where to Go Next in Html5

Letting users drag and drop interface elements is something we’ve been able to do with JavaScript libraries for quite a while, but the W3C has adopted Microsoft’s Drag and Drop implementation as part of the HTML5 specification. 7 It’s supported by Firefox, Safari, Internet Explorer, and Chrome, but in actuality it’s a mess with Where to Go Next in Html5. The implementation at first appears to be straightforward; we designate an element as “draggable,” we then designate an element that watches for a dropped object, and we execute some code when that happens. In reality, it’s not nearly that simple. To demonstrate, let’s create a simple drag-and-drop interface that lets us drag small images into a drop area that will load the larger version.

<div id="images">
<img src= "images/red_thumb.jpg"
data-large="images/red.jpg" alt="A red flower" >
<img src= "images/purple_thumb.jpg"
data-large="images/purple.jpg" alt="A white and purple flower" >
<img src= "images/white_thumb.jpg"
data-large="images/white.jpg" alt="A white flower" >
</div>
<div id="preview">
<p>Drop images here </p>
</div>

We are using custom data attributes heret o hold the source oft he larger version of our photos  to Where to Go Next in Html5.

Where to Go Next in Html5

Where to Go Next in Html5

Most of this book focuses on things you can do right now, but there are some other things you will be able to start using very soon

Next we’ll add some basic styles to float the two columns to Where to Go Next in Html5:

#images img{
-webkit-user-drag
}
#images{
float: left;
width: 240px;
margin-right: 10px;
}
#preview{
float: left;
width: 500px;
background-color: #ddd;
height: 335px;
}
.hover{
border: 10px solid #000;
background-color: #bbb !important;
}

At this point,Now let’s add some events so we can drag the photos.
Drag-and-Drop Events to Where to Go Next in Html5
We’ll need to work with several events related to dragging and dropping elements.

Event                      Description
ondragstart                Fires when the user starts dragging the object
ondragend                  Fires when the user stops dragging the object for any
                           reason
ondragenter                Fires when a draggable element is moved into a drop
                           listener
ondragover                 Fires when the user drags an element over a drop
                           listener
ondreagleave               Fires when the user drags an element out of drop
                           listener
ondrop                     Fires when the user drops an element into a drop
                           listener successfully
ondrag                     Fires when the user drags an element anywhere; fires
                           constantly but can give X and Y coordinates of the
                           mouse cursor

To Make Where to Go Next in Html5 That’s a total of seven events just to handle dragging and dropping elements, and some of the events have default behaviors. If we don’t override them, the whole thing fails. First, we need to define all of our list items as draggable.

var contacts = $('#images img');
contacts.attr('draggable', 'true');

We are adding the draggable HTML5 attribute. We could do this in our markup, but since we require JavaScript to do the interaction, we’ll apply this attribute with our script. When we drag the image, we want to grab the address of the large image and store it. We’ll bind to the ondragstart event, and to keep it simple and cross-platform, we’ll use jQuery’s bind( ) method Where to Go Next in Html5.

contacts.bind('dragstart', function(event) {
var data = event.originalEvent.dataTransfer;
var src = $(this).attr( "data-large" );
data.setData("Text" , src);
return true;
});

The specification provides a dataStorage mechanism that lets us specify the type of data and the data itself, which is passed along as part of the event. jQuery’s bind( ) method wraps the event in its own object, so we use the originalevent property on 2 to access the real event. W e store the URL to the image on the event by using the setData( ) method, using Text as the data type. Now that we can drag elements, let’s talk about how we fire events when the user drops the elements. Dropping Elements for Where to Go Next in Html5
We want our “To” form field to act as our drop target, so we’ll locate it and bind the drop event Where to Go Next in Html5.

var target = $('#preview');

target.bind('drop', function(event) {
var data = event.originalEvent.dataTransfer;
var src = ( data.getData('Text') );

var img = $( "<img></img>" ).attr("src" , src);
$(this).html(img);
if (event.preventDefault) event.preventDefault();
return(false);
});

We retrieve the image address we passed with the event using the get-Data( ) method on line 5, and we then create a new image element that we push into our content region. We need to cancel the default ondrop event so it won’t fire when our user drops the element onto the target. To do that, we need to use both preventdefault( ) and return false. Internet Explorer needs return false, and other browsers need preventDefault( ). If we try to use this in Chrome or Safari right now, it won’t work quite right. At a minimum, we have to override the ondragover element. If we don’t, our ondrag event won’t respond. So, we’ll do that by using this code Where to Go Next in Html5:

target.bind('dragover', function(event) {
if (event.preventDefault) event.preventDefault();
return false;
});

File Dragging
Moving text and elements around the page is just the beginning. The specification allows developers to create interfaces that can receive files from the user’s computer. Uploading a photo or attaching a file is as easy as dragging the file onto a specified target. In fact, Google’s Gmail supports this if you are using Firefox 3.6 or Chrome 5. If you want to explore this further, take a look at the excellent article 9 by Leslie Michael Orchard.
All Is Not Well to Where to Go Next in Html5
The behavior in various browsers is, to be kind, inconsistent. IE 8 works, but it breaks if we try to set the data type for setData( ) to Url instead of Text. Additionally, in order to support dragging of elements that are not images or links in Safari 4, we’d need to add additional CSS to our style sheet.

#contents li{
-webkit-user-drag
}

Throughout this book, we’ve discussed how important it is to keep style and behavior separated from content, and this flies right in the face of that concept.Don’t try dragging text onto form fields. Modern browsers already let you do this, but there’s no good way to override that behavior. As it stands, we can get much better results with much less code by using a JavaScript library that supports dragging and dropping like jQuery UI. 10 Even with a library, we still have one last thing to worry about: accessibility. The specification doesn’t say anything about how to handle users who can’t use a mouse. If we implemented drag-and-drop functionality on our interfaces, we’d need to develop a secondary method that didn’t require JavaScript or a mouse to work, and that method would depend on what we’re trying to do. This specification has a lot of potential, but it also has some things that need to be addressed. Use it if it makes sense, but ensure you don’t force your users into something they can’t use to Where to Go Next in Html5.

Web GL for Where to Go Next in Html5
We talked about the canvas element’s 2D context in this book, but there’s another specification in progress that describes how to work with 3D objects. The Web G L 11 specification isn’t part of HTML5, but Apple, Google, Opera, and Mozilla are part of the working group and have implemented some support in their browsers. Working with 3D graphics is well beyond the scope of this book, but the site Learning Web GL 12 has some great examples and tutorials. Indexed Database API to Where to Go Next in Html5
In this book, we talked about two methods for storing data on the client: Web Storage and W e b SQL Storage. The Mozilla foundation took issue with the W e b SQL specification, stating that they didn’t think it was a good idea to base the specification on a specific SQL engine. They introduced a new specification called the Indexed Database API, which is scheduled to become a standard of its own. 13 The Indexed Database API is a key/value store similar to the Web Storage APIs like localStorage and sessionStorage, but it provides methods for performing advanced queries. Unfortunately, at the time of writing, there are no implementations of this specification available, so it’s not even worth going into any implementation details because they will most likely change between now and the time it’s implemented. Firefox 4 and Chrome 7 are expected to include support. This is the specification you’ll want to watch closely, because Web SQL is at an impasse, and Mozilla has stated numerous times that it has no plans to ever implement W e b SQL in Firefox, because Mozilla is uncomfortable with the SQL dialect and doesn’t think that the specification should be based on one particular database implementation. The Web SQL specification uses the SQLite database dialect, which could change independent of the specification. It’s very likely that Internet Explorer will implement this specification as well, because Microsoft has taken an interest in its development.

Where to Go .Next

Where to Go .Next

Client-Side FormV ali dati on to Where to Go Next in Html5
The HTML5 specification lists several attributes we can use to validate user input on the client side, so we can catch simple input errors before the user sends the requests to the server. We’ve been able to do this for years using JavaScript, but HTML5 forms can use new attributes to specify the behavior. W e can ensure that a user has required a form field by adding the required attribute like this:

<label for="name">Name </label>
<input type="text" name="name" autofocus required id="name">

Browsers can then prevent the form from submitting and display a nice error message, and we don’t have to write a single line of JavaScript validation. Opera does this right now, as you can see. This lets users fail early, without waiting for a server response to find out whether they made a mistake Where to Go Next in Html5. This behavior could be disabled or unavailable or just simply not correctly implemented, so you still need to make sure you have a server-side strategy for validating data. It’s definitely something to start thinking about now, though, because you can then easily locate the required fields and style the interface with CSS so that the required fields stand out from the rest for Where to Go Next in Html5. You can take this one step further witht he pattern attribute, which lets you specify a regular expression to ensure that the content meets your criteria.

<label for="name">Name </label>
<input type="text" name="name" autofocus required id="name">

Although Where to Go Next in Html5 no current browser uses this through the user interface, using this markup as the basis for a JavaScript validation library would be easy to implement.  Onward! It’s an exciting time to be a developer. This book just barely scrapes the surface of what the future holds for web developers. There’s so much more to the specifications, and I encourage you to dig deeper. I hope you take the things you learned here and continue to build and explore, watching the various specifications as you do so. Now go build something awesome to Where to Go Next in Html5!

andcombd