Understanding HTML5
As a Flash developer, you have probably worked with HTML on a frequent, if not daily, basis as a platform for publishing your compiled Adobe Flash SWF files on the Web. Although web browsers with Flash Player installed can view standalone SWF files, it is normal practice to embed Flash content within an HTML document. Thanks to the simplistic syntax and availability of HTML, many people who are not even developers have learned traditional HTML development techniques. Unfortunately, early HTML specifications fell short in many areas of displaying content online. Common tasks such as creating rich interactive experiences, sharing multimedia assets, or creating web-based user interfaces to act in a more typical software-like manner became a massive chore, if not impossible. In the recent past, Flash has been the obvious choice when developing and integrating assets such as video and audio playbacks, web-based games, 3D interactive graphics, and inline advertisements. Lately, many of these features on the Web have been remade using HTML5 allowing users to access the content in the same manner, but without the use of technology such as Adobe Flash Player.
The ability to build quality web-based content that can be globally accessible from any device is the key to a successful product or service. Facebook, Google, and Twitter are all using HTML5 to better the user experience of their applications and deliver content to users without the need for third-party plugins. More businesses are saving time, resources, and money during their application development process by utilizing the HTML5 development stack to target not only web browsers on desktop and mobile, but also installable applications on both platforms as well.
Transitioning your Flash development skills to HTML5 is a fun process that will not only open you to more opportunity professionally, but enable you to better analyze what tool is right for the job at hand. Adobe Flash isn't going anywhere anytime soon, but the same can easily be said for HTML5.
Since many developers flock to Flash development from previous web and application development technologies that may have had nothing to do with HTML, let's start by covering the essentials of the HTML5 stack.
What is HTML5?
HTML5 is the fifth and latest version of the HTML standard developed by the World Wide Web Consortium (http://www.w3.org/). Being a new version, it brought some new features to the existing HTML specification as well as removed some of the old outdated features. Many of these new and existing features are starting to closely resemble the feature set within Adobe Flash, thus opening many new facets of web development, which are not reliant on paid applications or browser plugins such as the Adobe Flash Player.
The development of the HTML5 specification is still a work in progress and is scheduled to be finalized and released sometime in 2014, but most of the modern web browsers today support many features of the specification already.
Generally, references to HTML5 refer to a suite of features and technologies surrounding the usage of not just HTML but Cascading Style Sheets (CSS) as well as JavaScript . Without the use of CSS and JavaScript, plain HTML documents, even HTML5 documents, will remain extremely simplistic in their functionality and look and feel. Therefore, learning HTML5 is effectively learning three technologies simultaneously. As tedious as that sounds, Adobe Flash is setup in a very similar way. The Flash IDE allows easy creation, editing, and referencing of assets to be used within your application. To integrate these assets into a dynamic interactive application requires the use of ActionScript. HTML5 is very similar to this such that HTML and CSS will be your Flash IDE and JavaScript will be the replacement for ActionScript. With all this in mind, let's continue by reviewing the standards on which HTML is built.
HTML standards
The World Wide Web Consortium (http://www.w3.org/) or W3C, is responsible for creating the standards on which HTML is developed today. These web development standards have been created as an attempt to unify the syntax and functionality developers create web pages with, as well as the feature set integrated in web browsers to enable these features in HTML. By writing web applications in a compliant markup that follows the HTML specification standards, developers can better ensure that their content will be displayed properly no matter how a user chooses to view it.
HTML syntax
Though it may look trivial, HTML syntax is the core of all web pages. Regardless of whether it is hardcoded within an HTML file, compiled from another programming language source, or injected into a document during application runtime, HTML syntax is the blueprint for the assets used within an HTML page. The better a developer understands HTML syntax and its limitations, the easier it will be for them to build their applications.
HTML syntax is written with the use of tag elements which are wrapped in angle brackets. HTML tags come in two different varieties: paired or empty elements. Paired HTML tags are the most common and the first tag style that one usually uses when creating an HTML document. The html tag is used to declare what is within an HTML document and usually sits on the first and last lines of an HTML file:
<html> Add your HTML content here. </html>
As you can see in the previous example, paired tags open and close a container for more HTML elements to sit inside. Tags are always formatted the same, the only difference between each tag in the pair is that a forward slash is used to declare that a tag is closing an element. Therefore, <html> will not pair with any tag that does not contain the same internal value. HTML tags are case insensitive, and in the early days it was common for developers to always use capitals when writing tags. That tradition has now disappeared and you will almost always see tags written in lower case.
Empty HTML tags are written without the use of a closure tag. For example, when placing an image reference within an HTML document, there is no further HTML element content that can be placed within that image. Therefore, image references in HTML are formatted such as <imgsrc="my_image.jpg">. The image is referenced within the img tag by appending the src parameter with its value set to the image location.
Tip
If you have managed to use Adobe Flex to build any of your Flash content and utilized the MXML user interface markup language, you may have got the hang of closing empty tag elements with syntax such as <imgsrc="my_image.jpg" />. In HTML5, this trailing forward slash is not required but will still render your content properly if you happen to append it. For best use case, try to get in the habit of not using it in your HTML5 projects.
HTML is a tricky beast when it comes to debugging; a document with HTML errors in the syntax will not display errors on loading like a traditional Flash application. Writing clean and concise HTML is the key to maintaining an error-free, standard, compliant web page. There are many applications and tools available to aid in developing clean HTML code, some of which will be covered later in the book. The W3C has created a robust HTML syntax validation service, which will check a publicly available website for HTML errors (http://validator.w3.org/).
HTML elements
Every version of the HTML specification has a specific list of tags available to developers while creating HTML documents. The current list of elements within the HTML5 specification as defined by the W3C can be found within their language reference documentation (http://www.w3.org/TR/html-markup/elements.html).
Within the HTML5 specification are some very interesting new elements available to developers with regards to media integration into web pages. For example, Flash requirements for media playback can now be avoided when embedding audio or video into a web page with the addition of the audio and video tags. These exciting new media tags are covered in more depth in Chapter 3, Scalability, Limitations, and Effects.
Bringing in the style
Cascading Style Sheets or CSS is the primary method used for styling HTML elements. Like HTML, there is a set list of styles in CSS that you can apply to elements in an HTML documents. To get an idea of what CSS attributes are available to you, head over to http://www.w3schools.com/cssref/ for the entire list. CSS can be applied to HTML elements in a number of different ways. Traditionally, CSS syntax is stored within an external .css file and referenced from within the head element in an HTML document. However, CSS can be appended to elements within the HTML document directly by adding a style parameter to almost any element within the body tag:
<imgsrc="my_image.jpg" style="border:5px solid #000000;">
The previous example uses the style parameter within an image element to apply a 5-pixel thick black border around the image referenced in the src parameter.
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.
What if you had five images or even 100 images in your page that needed the same styles applied to each element? Applying the exact same style parameter to each image tag is not only time consuming but will result in code that is oversized and possibly extremely hard to maintain or update. CSS can target a single element or a group of elements by using a class or id HTML parameter:
<div id="photo-gallery"> <imgsrc="photo1.jpg" class="photo"> <imgsrc="photo2.jpg" class="photo"> <imgsrc="photo3.jpg" class="photo"> <imgsrc="photo4.jpg" class="photo"> <imgsrc="photo5.jpg" class="photo"> </div>
In the previous example, we attempted to display a group of different images within an HTML document. Each image, referenced with an img element tag, also has a class parameter appended to it with the photo value. The class HTML parameter can be used and re-used on almost any element available and allow you to reference a group of elements rather than modifying each element directly. All of the images are also encased in a div element. div elements are used as containers to display content in. In this case, the div element has an id parameter set to photo-gallery. The id HTML parameter is very similar to class with the exemption of being able to re-use the same value of id within the same HTML document.
Tip
Editing HTML, CSS, and JavaScript can be simplified by using a code editing application setup to aid with HTML5 syntax. Applications like Aptana (http://aptana.com/), Dreamweaver (http://adobe.com/products/dreamweaver.html), and Sublime Text (http://sublimetext.com/) are all recommended. However, if simplicity is your thing, feel free to use something else.
With all this in mind, writing CSS to style this photo gallery could be done as follows:
<!DOCTYPE html>
<html>
<head>
<title>My Photo Gallery</title>
<!-- Our Photo Gallery CSS Styles -->
<style type="text/css">
body {
background-color:#000000;
}
#photo-gallery {
width:100%;
}
#photo-gallery .photo {
width:200px;
border:4px solid #ffffff;
}
</style>
</head>
<body>
<div id="photo-gallery">
<imgsrc="photo1.jpg" class="photo">
<imgsrc="photo2.jpg" class="photo">
<imgsrc="photo3.jpg" class="photo">
<imgsrc="photo4.jpg" class="photo">
<imgsrc="photo5.jpg" class="photo">
</div>
</body>
</html>
Instead of applying style parameter to each and every element in the document, we can now use the style tag within the head element to place our raw CSS code. In the previous example, HTML elements are selected in three different ways. To start, the body of the document had the background color set to black by using its hexadecimal value. We select the body tag element by simply using the tag reference. This method of selecting raw elements can be used on a wide variety of elements within your document but will affect all elements with that reference. The next method of selection is by looking for elements with a specific ID. To designate the use of an ID, # is placed in front of the ID value. Therefore, #photo-gallery will be selecting the div element with the id parameter set to photo-gallery. We set the width parameter of the gallery container to 100%, which is calculated from the browser width when viewing the HTML document. Finally, to style each one of the images in the gallery, we style the class which was applied to each one of the image tags in the body of the HTML document. Since the class HTML parameter can be applied to an unlimited number of elements in an HTML document, we can specifically target the classes within another element by chaining the CSS element selection together. Classes are selected in CSS by appending . to the start of the class name. Therefore, #photo-gallery .photo will select only the elements with the photo class name inside the element with id of photo-gallery:
Passing it over to JavaScript
Styling HTML elements with CSS only gets you so far. HTML and CSS are effectively the Flash IDE from the perspective of a Flash developer. What is missing is the code that drives the interaction and functionality within your application. While using Flash, ActionScript is the weapon of choice when creating robust applications. While developing HTML5 content, JavaScript will be doing the grinding, allowing you to bring life to your HTML elements.
What is JavaScript?
JavaScript has been around since the mid 1990s and has grown up to be one of the most popular scripting languages available. JavaScript brings life to HTML documents by adding features such as content modifications, animations, 3D graphics, form submission, and data retrieval all without having to reload the active HTML document. Features such as these allow web content to act more like traditional software applications rather than static web pages.
Unlike ActionScript 3, JavaScript is a true scripting language as it requires no preprocessing or compiling to be run. Just like HTML and CSS, a JavaScript document's source is sent to user upon request and executed on client side. Therefore, unlike technologies such as ActionScript, JavaScript source code is open for public viewing.
JavaScript in action
Looking back at our My Photo Gallery example, an important missing feature is the ability to view a selected photo in larger format. JavaScript is a perfect platform to add this functionality as its main usage is to bring interaction to HTML documents. Using the existing code example, we can extend its functionality by adding a new div element at the bottom of the page body to contain the larger image view. This element can be empty as we do not want a photo to be displayed by default on page load. Finally, we set an identifier on the div tag of id="photo-display", which will allow us to target the content in that element from CSS and JavaScript:
<div id="photo-display"></div>
Before integrating the JavaScript functionality, we need to append some CSS styles to div using #photo-display to allow selected photos to fill the browser window at a higher resolution, typical of most photo gallery displays. Within the CSS styles, we have already set for this example, we will append some more style properties to the #photo-display element:
#photo-display {
display:none;
position:absolute;
top:0;
width:100%;
height:100%;
background-color:#000000;
text-align:center;
}
#photo-display img {
margin:auto;
margin-top:50px;
max-height:800px;
border:4px solid #ffffff;
}
This CSS will target only one specific div as we have used the #photo-display syntax to target it. To start the styles off, we begin with the most important parameter, display:none , which hides the element on page load. This is perfect in our case as we do not want the full-screen display visible on page load. By adding position:absolute and top:0 to the style definition for our #photo-display element, we will display the element on top of the previous elements declared within the HTML body. The rest of the styles set on #photo-display are pretty self-explanatory. The next lines of CSS specifically target the img elements within div with the photo-display class. We can do this in CSS by chaining identifiers together. In this case, we specify these styles for image tag elements within a custom named element ID.
With the HTML and CSS to display the larger version of a selected photo in place, the next step is adding the JavaScript code for displaying the selected photo within the #photo-display container upon user interaction. To consolidate this example into a single file, we will add the JavaScript within an HTML script element:
<!-- Our Photo Gallery JavaScript Source -->
<script>
var largeImage = new Image();
// Display a specific photo in the large
// photo display element.
var displayPhoto = function(source) {
// If there is already an image inside the display
// remove it.
if(largeImage.src != '') {
document.getElementById("photo-display").removeChild(largeImage);
}
// Update the source location of the image
largeImage.src = source;
document.getElementById("photo-display").appendChild(largeImage);
// Display the large photo element.
document.getElementById("photo-display").style.display = 'block';
}
// Closes the large photo display element.
var closePhotoDisplay = function() {
document.getElementById("photo-display").style.display = 'none';
}
</script>
As a Flash developer, the previous function syntax should look pretty familiar. A major change within the function scope is the variable syntax. Unlike AS3, the HTML as well as the source variables are not strictly typed. This goes for all variables within JavaScript syntax and is probably one of the biggest issues Flash developers have with JavaScript.
Aside from some string manipulations to generate img HTML elements from the source variable, the method also references the document object. Every HTML document that is loaded into a browser then becomes the document object accessible from within JavaScript. The document object within JavaScript has a number of built-in properties and methods that are available to access information and elements within the view HTML document. In our example, we make use of the easily defined document object method getElementById(). As the method name implies, when an HTML element's ID is supplied, the reference to the element within the HTML document is returned for use within the script. Since JavaScript supports the chaining of properties, we can apply the innerHTML property to manipulate the inner content of an HTML element as well as the style property to change an element's CSS properties.
To enable an image to close once a user has finished viewing it, we will add a second JavaScript function to our example to revert all the changes made when displaying the photo. Since the photo-display image will be updated when the user clicks on a new image, all our closePhotoDisplay method needs to do is hide the visible element to show the full photo gallery again:
functionclosePhotoDisplay() {
document.getElementById("photo-display").style.display = 'none';
}
Setting the #photo-display element's style.display back to none hides the entire element and reverts the user interface back to its initial state.
Adding events to each of the photos can easily be accomplished by appending an onclick parameter to the targeted element. The addition would look as follows:
<imgsrc="photo1.jpg" class="photo"onclick="displayPhoto('photo1.jpg')">
Now, when the image is clicked on, the onclick event gets fired and runs the JavaScript code declared within the parameter. In this case, we use this opportunity to call our displayPhoto method within our previously written JavaScript block. Within the call, we supply the required source variable, which will be the image file name as a String datatype. This will allow the proper image reference to be used within the #photo-display element. All put together, our updated div tag with id="#photo-gallery" will now look like the following:
<div id="photo-gallery">
<imgsrc="photo1.jpg" class="photo"onclick="displayPhoto('photo1.jpg')">
<imgsrc="photo2.jpg" class="photo"onclick="displayPhoto('photo2.jpg')">
<imgsrc="photo3.jpg" class="photo"onclick="displayPhoto('photo3.jpg')">
<imgsrc="photo4.jpg" class="photo"onclick="displayPhoto('photo4.jpg')">
<imgsrc="photo5.jpg" class="photo"onclick="displayPhoto('photo5.jpg')">
</div>
Finally, to enable the user to close an open image within the #photo-display element, we will apply an onclick event to call our closePhotoDisplay method. Rather than applying the onclick event to the image within the #photo-display element, we will target the display itself, allowing users to click anywhere in the browser to close the display:
<div id="photo-display" onclick="closePhotoDisplay()"></div>
Putting all of these code snippets together, the gallery source now looks like the following:
<!DOCTYPE html>
<html>
<head>
<title>My Photo Gallery</title>
<!-- Our Photo Gallery CSS Styles -->
<style type="text/css">
body {
background-color:#000000;
}
#photo-gallery {
width:100%;
}
#photo-gallery .photo {
width:200px;
border:4px solid #ffffff;
}
#photo-display {
display:none;
position:absolute;
top:0;
width:100%;
height:100%;
background-color:#000000;
text-align:center;
}
#photo-display img {
margin:auto;
margin-top:50px;
max-height:800px;
border:4px solid #ffffff;
}
</style>
<!-- Our Photo Gallery JavaScript Source -->
<script>
var largeImage = new Image();
// Displays a specific photo in the large
// photo display element.
var displayPhoto = function(source) {
// If there is already a image inside the display
// remove it.
if(largeImage.src != '') {
document.getElementById("photo-display").removeChild(largeImage);
}
// Update the source location of the image
largeImage.src = source;
document.getElementById("photo-display").appendChild(largeImage);
// Display the large photo element.
document.getElementById("photo-display").style.display = 'block';
}
// Closes the large photo display element.
var closePhotoDisplay = function() {
document.getElementById("photo-display").style.display = 'none';
}
</script>
</head>
<body>
<div id="photo-gallery">
<!-- Place all of the images inline with a 'photo' class for CSS manipulation. -->
<imgsrc="photo1.jpg" class="photo"onclick="displayPhoto('photo1.jpg')">
<imgsrc="photo2.jpg" class="photo"onclick="displayPhoto('photo2.jpg')">
<imgsrc="photo3.jpg" class="photo"onclick="displayPhoto('photo3.jpg')">
<imgsrc="photo4.jpg" class="photo"onclick="displayPhoto('photo4.jpg')">
<imgsrc="photo5.jpg" class="photo"onclick="displayPhoto('photo5.jpg')">
</div>
<!-- An empty DIV element to contain the user selected photo in large scale. -->
<div id="photo-display" onclick="closePhotoDisplay()"></div>
</body>
</html>
Saving the text into an .html file and launching it in a web browser will now reveal all of our hard work. Just as before, the gallery should start by displaying the list of images by default. Once an image is clicked on, the selection will be passed to the #display-window element and displayed at 100 percent of the browser width:
Finally, clicking anywhere within the document will close the large image and return you back to the initial gallery display.
Although this example contains none of the new features of HTML5, it is a simple way of showing some of the key technologies that make up HTML and some of the methods used to reference assets in HTML.