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.
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, 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
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.
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
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! 😉
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?
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.
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!
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.
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
In this first part of my postings on HTML5 I will focus on what I know and have experimented with in regards to HTML5’s Drag and Drop. (Updated 05.25.2010)
HTML5 is a web standard in development by the Web Hypertext Application Technology Working Group since 2004 and the World Wide Web Consortium since 2007. HTML5 will replace HTML 4.01 and xHTML. For those that don’t know, HTML is the basic language used to create web pages. The emphasis for HTML5 is to add Rich Internet technologies into HTML negating the need to depend on Adobe Flash for video or heavy scripting/frameworks for things such as editing content directly on a web page or using Drag and Drop.
Before I start, I want to briefly address the tit-for-tat going on between Apple and Adobe. To summarize my point: BORING. The web community needs the Church of Apple and it needs Adobe. What it doesn’t need is each company throwing around buzzwords such as “open” to rile up zealots on either side. That crap is already boring and past the “detrimental to society” line in the States (think “socialism”, “gay” and “illegal immigrant”). Let’s move on, please.
Where it works
The purpose of this posting is to help call attention to emerging web standards that are currently being worked on. Regardless of what Steve Jobs may allude to, HTML5 is currently in Draft State. While you can use some of HTML5’s tech in certain browsers, it’s should be known that some features of Drag and Drop do not work in every browser. In some cases, such as Opera, Drag and Drop does not work at all. So, it would be irresponsible to trumpet HTML5 as the savior of our CPUs because the fact remains, HTML5 is far from ready.
This is the my HTML5/CSS3 test area. At the top, I have listed the browsers I am currently testing with. Where are IE6 and IE7 you ask? I am not interested in developing anything for either of those browsers. As reported on Ars Technica last month, the percentage of users using IE6 as opposed to those using IE7 is not small. The “Internet Explorer usage by version” chart show that IE6 is beating out IE7 18.41% to 13.16%. Why are so many users using a 9 year old browser? I haven’t got a clue and quite honestly, I no longer care. Companies can make up whatever excuse they like but they’ve had 9 years and two newer versions of Internet Explorer to change. Even, Microsoft has been telling people to stop using IE6. While things are looking up for the internet with the coming of IE9, I’m still not hopeful that people will change. Meanwhile, my job remains a difficult one because the space separating the major browsers (Firefox, Safari, Chrome, Opera and IE) supporting different things has grown even larger. While the first four add support for emerging technologies with constant updates, Internet Explorer seems to be the only one that does not receive support for web tech with updates. That is, unless it’s a new major version (IE5, 6, 7, 8, 9… etc.). Plugging the billion security holes is nice but how about finally adding new web tech with those updates?
And now, on with the show…
Drag and drop image
If you click on “Gophanet splash page”, you will see a carbon copy of what appears at gophanet.com. You can drag the red ball with the gopha logo to either the left or right of the light green container with the rounded corners. You can also drop the image back into the container. This is HTML5 Drag and Drop at it’s simplest. Here’s how it works:
I have three div containers floated side by side within a larger “wrapper” container div. A lot of Drag and Drop has to do with element attributes. The HTML code all three divs looks much like this:
<div id="indexLeftContainer" ondrop="drop(this, event)" ondragover="return false"></div>
You need ondragover=”return false” in order for ondrop to work. Next this is the code that makes the image draggable.
<img src="index_logo.png" style="border:0px; margin-top:10px;" alt="Gophanet" id="gophanetLogo" ondragstart="drag(this, event)" />
Easy enough so far, right? To make the image draggable, use the ondragstart attribute and call your JavaScript function. Is that all, you ask? Yeah but if you are dragging an image in Safari, instead of say a DIV, you need to add this CSS code to your stylesheet:
[draggable=true] {
-khtml-user-drag:element;
}
Yeah, this is a little stupid and I hope that eventually this CSS declaration won’t be needed in Safari as time goes on. If you do not use this CSS code, the image is replaced with a smaller image (instead of a ghost image) until the drag and drop is completed.
Now, this is where the whole thing becomes even more funky. Because in order to move the image from one container to another, you need some JavaScript to tie it all together. Yeah…
function drag(tgt, e) {
e.dataTransfer.setData("Text", tgt.id);
}
function drop(tgt, e) {
var elemId = e.dataTransfer.getData("Text");
tgt.appendChild(document.getElementById(elemId));
if(e.preventDefault) {
e.preventDefault();
}
}
So, in order to achieve a simple HTML5 Drag and Drop you need a little bit of JavaScript. I thought that they were working on updating the HTML specification?
As you can see above, you can drag an element from one container to another by creating a function that captures both the drag event and the element that is being dragged: ondragstart=”drag(this, event)” –> function drag(tgt, e) {js code here}. The dataTransfer() object hangs on to data that is being moved in the event of a Drag and Drop. The setData() method tells what type of data is being transferred. Using the Text value allows you to hang on to the element id in the dataTransfer() object.
When you add the ondrop attribute, you can call whatever function you wish to call when you drop an element: ondrop=”drop(this, event)” –> function drop(tgt, e) {js code here}. In order to drop an element into another one, a function has to be created and called in order to grab the data that the dataTransfer() object is holding onto. Using the getData() method you can establish the data type – “Text” in this case – and declare it in a variable. From there you can use appendChild() to attach the element you just dragged. Pretty easy, but I’m not happy about the JavaScript use.
Using the preventDefault() stops the default action (the action that has already been built into a browser prior to HTML5 Drag and Drop) from occurring.
Attribute Testing
I tested these attributes by using a basic function that used innerHTML to write “Hi!” into a div.
Ondrag: The function executed repeatedly for as long as it took to drag the element from the source element to the drop element. You can use ondrag with a parent element. The function executed when I dragged the child element.
Ondragend: The function executed once the drop operation completed. Ondragend could only be used in concert with ondrop and ondragstart. Ondragend cannot be used as a replacement for ondrop.
Ondragleave: The function executed once the element was dragged outside of/left the source element.
Ondragover: The function executed repeatedly every time the element was moved over the drop element.
Ondragstart: The function executed when the element was first dragged.
Ondrop: Besides ondragstart, ondrop will probably be the most used attribute. The function did not execute until I dropped the element into the drop element. It is important to note that ondrop will not work without ondragover declared (ondragover=”return false”).
Draggable: This can only be set to either true or false. (This attribute is not necessary in order for an IMG element to be dragged. In fact, using ondragstart pretty much negates the need for this attribute in an IMG element.)
Some notes
It should be obvious to you by now that HTML5’s Drag and Drop is not ready. While it works well, if you choose to use it, you need to keep track of any changes made to the specification. I will try to keep track of it and make changes to this post when necessary and when I can. It’s become harder to babble on this blog because my baby daughter requires my attention. 🙂
GophaSpeak 