Tag Archives: HTML5

HTML5 Test Page Update

Yes, it’s been a long time since I have posted anything on here. I guess that’s the way life goes. Anyways…

I have updated the HTML5 test page. There are a couple of notes. The first being that Opera is moving to WebKit. The second is that Apple has decided to stop making Safari for Windows. Whether this is permanent or not is the question. The last version is 5.1.7.


HTML5 Part 5: Forms

In the years since I started web development, my use of Forms has evolved from writing a simple email form to making a complicated Resume/CV form driven by JavaScript, AJAX and PHP. When making forms, the one thing we always have to remember is that we developers are the ones pointing the users in the right direction. Forms give us the tools to create a good user experience while making sure that the user stays on the right track.

Unfortunately, when validating forms, we had to rely on using JavaScript and/or a server-side script. However, HTML5 Forms have built-in validation tools which do not require scripting. But, don’t get too excited, you will still have to write some scripts to validate some things. Continue reading


HTML5 Part 4: Geolocation

HTML5, or whatever it’s going to be called, brings on a whole bunch of new things to use. So far, I have gone over the Canvas tag, the ContentEditable attribute and Drag and Drop. The more I learn about HTML5, the more I understand that it’s not just about new tags and depreciating old tags anymore, it’s also about standardizing APIs. While I mentioned in the Canvas article how we have gone from just learning how and where to place HTML markup, we now have to learn the APIs that really bring out the Web 2.0+ experience. In order to do that, you really really need to learn a scripting language such as JavaScript. With that said, let’s dive into a simple lesson of Geolocation. Continue reading


The Markup Formerly Known As HTML5

Apparently, a week or so ago, the W3C (World Wide Web Consortium – the group that standardizes tech to use on the web) started a web campaign for HTML5. People have been talking about HTML5 and the cool stuff it does so, why not make T-shirts and stickers? My only question is where are the coffee mugs?? With this new campaign, the W3C also posted some code that allows you to put a “my web site supports HTML5 fo’ shiz'” graphic on your site. While hyping up HTML5 and all of the cool things it does is great, the problem is that IT’S NOT READY YET!!!!!!!!!!!!!!!!!

Taking a deep breath…

Some days later, the splinter other group who is also working on HTML5, the WHATWG (Web Hypertext Application Technology Working Group) announced through the person responsible for writing the HTML5 specification, Ian Hickson, that the 5 will be dropped and the whole shebang will simply be known as HTML. Wow, nice timing…

I don’t know if this was done on purpose or if WHATWG just has really bad timing. But, if they had decided on changing the name over a year ago then someone should have let the people at the W3C know. Or, maybe they did know and they tried to force the WHATWG’s hand by starting this marketing campaign.

Either way, I do know one thing and that this DOES NOT HELP the advancement of HTML5/HTML/The Markup Formerly Known As HTML5. Stop jacking around and get your asses in gear. You’ve only got a large video codec war brewing – for starters.


HTML5 Part 3: The ContentEditable Attribute

If you have been using blogs and message boards for some time then, you should be familiar with Rich Text Editing. RTE was created to make simple web page editing easy for people who were not familiar with HTML and, any one person could submit content.

For developers, the biggest hindrance to RTE is downloading an entire application (it’s not small which means more .js file downloading for your users) and then going through the instructions on how to install it and add the code that generates the Rich Text Editor. My favorite RTE has been TinyMCE. You can also download various plugins for TinyMCE to help make life easier (or harder depending on who is going to use it). You simply add the correct javascript code, edit some settings and away you go. Unfortunately, you also have to do some reading to figure out how to validate it in JavaScript and submit it through AJAX.

Enter the ContentEditable attribute… It’s [not] new, easy to install and supported well enough in all current version, major browsers. Continue reading


Internet Explorer 9 Beta vs. My HTML5/CSS 3 Test Page

Microsoft wide-released Internet Explorer 9 Beta and it’s impressing a great many people. So, how does it stack up to my HTML5 Test Page? Go on, click the link. You know you want to! 😉

A few thoughts

While browsing through Microsoft’s Internet Explorer 9 Beta Guide For Developers, I came across some very cool information. Microsoft has added new DOM support for addEventListener, DOMContentLoaded and getElementsByClassName (Yes, I tested them just to make sure!) – among others. This means a great deal for us developers who have been using addEvent, !document.all and other methods to make sure that our code was also supported by earlier versions of Internet Explorer.

While Microsoft has finally decided to stop pouting and start playing nicely, in my opinion, the damage has already been done. How long it will take to repair the damage depends on how long Microsoft plans to continue supporting Internet Explorer 6 (2014 when support for Windows XP SP 3 ends) – 8. Even if Microsoft stopped supporting all three browsers in favor of dedicating it’s time to Internet Explorer 9, a good portion of Internet users will still continue to use Internet Explorer 6 (currently at 16% of total). Also, there is still no definite word if IE9 will have frequent updates to standards support like the other browsers have.

Whatever the excuse is to continue using Internet Explorer 6-8, after the release of Internet Explorer 9 – and they are excuses – we web developers have inherited a crapfest that we will continue to deal with for years to come. It’s obviously up to us to suck it up and say, “We’re willing to lose some visitors for the sake of progression.”

After all, we’re supposed to be progressing – right?


HTML5 Part 2: Canvas

Back at the beginning of 1997, I began to learn HTML. Boy, was it easy. Back then, it was just a matter of placing a tag on a page. After that, I learned that I should close that tag with another tag. Building web pages was easy. Fiddle around in Photoshop and make a banner graphic. Instant web page!

It’s a good thing it’s not the beginning of 1997 or else I would be trouble…

Just when you thought HTML was just a tag with some attributes and followed by a closing tag, you thought wrong. In my last HTML5 post about Drag and Drop, I point out that HTML no longer stands on it’s own and that JavaScript will be supplementing HTML5.

What is Canvas?

The Canvas element allows for a developer to create dynamically generated pictures using JavaScript and one HTML tag. Allow me to introduce the Canvas tag:

<canvas id="canvasTag" width="200" height="200">This browser does not support Canvas!</canvas>

This is the only HTML you need to display your Canvas artwork on a web page. The remaining 99% of the work is done with JavaScript. Of course, you don’t need to use the width or height attributes as I will show you below. But, at least you know you can use them.

I have built a small application using Canvas. It sits on my HTML5/CSS 3 test page. Basically, the app allows you to enter 3 sets of numbers into fields in a form. These fields are marked “Month 1”, “Month 2” and “Month 3”. While I don’t have an actual point to the application, I want you to use your imagination. Maybe your company needs sales figures for a series of months. The form will save the relevant information to the database via AJAX and draw up a bar chart for users to see. No need to turn to Photoshop to create a static chart.

NOTE: This is not intended to be a tutorial. I am merely showing you what Canvas is and does by using a potential real-world example. If you want to learn how to draw circles, rectangles and whatever else, there is a ton of information on the interwebs. Just Google html5 canvas to get started!

The Bar Graph Application

I need to show information in a 3-month span in bar graph format. I add the Canvas tag to my page.

<canvas id="monthBarChart" style="float:left; text-align:left; margin:auto;"></canvas>

I don’t need to use the width and height attributes because I can set them in the JavaScript code using the setAttribute() method. When I do this, it basically wipes the slate clean so I can draw a new chart. The Canvas element is declared in a variable so it can be used later. Next, I need to make sure the browser likes Canvas by testing the getContext object.

var monthBarChart = document.getElementById("monthBarChart");
if(monthBarChart && monthBarChart.getContext) {

If all is well, the code moves to the next part which is to prepare the Canvas for drawing. This is done by setting the getContext() object in “2d” (3d is not supported yet) and declaring the object in a variable.

chartCtx = monthBarChart.getContext("2d");
monthBarChart.setAttribute("width", 250);
monthBarChart.setAttribute("height", 250);

It’s better to set the width and height within the JavaScript code so, you can erase the Canvas. If you don’t do this, the graph will remain and the new one will be drawn over it.

Drawing lines

Drawing lines requires a path. Imagine looking at the piece of paper and figuring out the spot where you are going to place your pencil and the spot to where you are going to draw. Next, you draw your line. Drawing another line? This requires moving the pencil from the previous spot and moving it to the new spot. Check out the code for drawing the main, black horizontal and vertical lines:

//LAYER 1: Vertical outside line
chartCtx.beginPath();//New path
chartCtx.moveTo(30,2);//pixels
chartCtx.lineTo(30,230);//pixels
chartCtx.strokeStyle = "#000000";
chartCtx.stroke();
//LAYER 1: Horizontal outside line
chartCtx.moveTo(30,230.5);
chartCtx.lineTo(245,230.5);
chartCtx.closePath();//Ending the path
chartCtx.strokeStyle = "#000000";
chartCtx.stroke();

Drawing a line in Canvas requires the beginPath() function. If consecutive lines are to be drawn, beginPath() only needs to be called once. Using moveTo(x,y) is just the same as picking up a pencil and moving it to the spot where drawing will begin. Using lineTo(start,finish) is the same as drawing a line from one spot to another. Once moveTo() and lineTo() are set, you set the color of your line and then draw it by using stroke(). Canvas draws a horizontal line from right to left and a vertical line from top to bottom.

Text

Drawing text on a canvas requires CSS-like settings before text is actually added.

chartCtx.font = "9pt Arial";
chartCtx.textBaseline = "top";
chartCtx.fillStyle = "#000";

Text can also be bolded by adding bold before the size of the text. In my tests, I noticed that bold looks aliased in Safari. I don’t really understand what s going on there. Maybe it was the size of the text?

In order to add a list of number to the graph, the starting y pixel and starting number must be set. Then, a for loop must be run (loop 5 times).

//LAYER 3: Chart number amounts
var yStart = 1;//The y pixel the number list starts at
var amountStart = 500;//The amount that is displayed first
for(b = 0; b < 5; b++) {
 chartCtx.fillText(amountStart, 2, yStart);//fillText("text to be written", x, y)
 yStart = (Number(yStart) + 46);
 amountStart = (Number(amountStart) - 100);
}

The reason the y pixel is set (to 1) and declared is because each time the loop is run, 46 pixels must be added to the fillText() y position. 46 pixels separate each grey horizontal line in the chart. The amountStart number decreases by 100 every time the loop is run. The numbers are drawn in this order: 500, 400, 300, 200 and 100.

Bars

The amount of bar that is made is dependent on what the user enters into the field. Of course, in order to do this, a formula must be worked out.The intial formula I worked out for my application: 100/46 = 2.173.

This formula took some trial and error and to be honest, I pulled this one out of my ass. Since each number on the chart is counted by one-hundred, 100 is divided by the number of pixels between each grey line on the chart, 46 in this case. This equals 2.173913043478261. Of course, it is not necessary to use the entire number so I just used 2.173 and I did not round off to the nearest one-thousandth.

Next, I used this formula to calculate the height of a rectangle: (value of a month field/2.173) – 2.

I subtracted 2 from the remainder of the month field value/2.173 because the graph bar height was off by just a little bit every time I entered 100, 200, 300 etc. into a month field. This is the code to make the bars:

//LAYER 5: Bars
var monthArr = new Array(document.getElementById("month1Field"), document.getElementById("month2Field"), document.getElementById("month3Field"));
var error_var = 0;
for(c = 0; c < monthArr.length; c++) {
 if(monthArr[c].value < 0 || monthArr[c].value > 500) {
  error_var++;
 }
}
if(error_var > 0) {
 alert("You can only choose a number between 0 and 500!");
}
else {
 var monthColorArr = new Array("rgb(0, 100, 100)", "rgb(100, 100, 100)", "rgb(0, 153, 0)");
 var rectX = 40;//Where the first bar will be drawn
 //100/46 = 2.173
for(d = 0; d < monthArr.length; d++) {
  if(monthArr[d].value > 0) {
   var rectangleHeight = ((Number(monthArr[d].value)/2.173) - 2);
  }
  else {
   var rectangleHeight = 0;
  }
  var rectY = (230 - Number(rectangleHeight));
  chartCtx.fillStyle = monthColorArr[d];
  chartCtx.fillRect(Number(rectX), Number(rectY), 50, Number(rectangleHeight));
  rectX = (Number(rectX) + 70);
 }
}
chartCtx.restore();

When a rectangle is made, a color is defined using fillStyle and CSS: canvasElem.fillStyle=”rgb(0,0,0)”.

Next, canvasElem.fillRect(x,y,width,height) is used to draw out the actual rectangle. It’s pretty simple. The for() loop runs until all three fields are found and graph bars are made out of them. A user can fill out one, two or all three fields – it does not matter.

In Conclusion

I have to admit that creating graphics on the fly is killer. The possibilities with Canvas are only limited by, well, it’s limitations. There is a feature that has not been added on, even though there has been considerable discussion about it and request for it. For example, in my WordPress dashboard, a graph is created that shows how many hits I get. The cool thing is that I can mouse over certain points and see when a new post was created. While you can add event attributes to the Canvas element itself, without a great deal of work, you cannot add events to shapes within the Canvas. I read somewhere of people suggesting a Usemap like feature but it was shot down for the moment.

While Canvas is not supported in Internet Explorer 8 and below, there is a project called “explorercanvas”.

While visiting my HTML5/CSS 3 test page, you may have noticed my CSS 3 Fun Box. I will be talking about that in my next blog posting