Things are getting better out there. Browsers today are still not fully in agreement as to how any particular page should look, but it’s a whole lot better than it was. I think we all owe a tremendous debt to the Firefox people at Mozilla. They have done more than anyone else to shame Microsoft into fixing their Internet Explorer, who had more to fix than anyone. IE’s still not perfect, but it’s much better than it was. And that’s upped the game for everyone.
There was a Web Standards Group who railed against substandard browsers, but they never did a particularly good job of explaining who they were, how to join them, or why anyone would want to listen. For a time they maintained a redirect page you could send people to that encouraged people to upgrade their Web browsers, but they grew timid and withdrew from that. The guys from A List Apart drew a line in the sand back at Issue 99 and said “No More!” and started making a lot of noise about how Things Should Be Better Than This By Now. That was great and it did a lot to bring a brighter light to The Cause. But Mozilla actually went about solving the problem by creating a wonderful browser with features people had been asking for that, wait for it, actually worked! And they gave it away for free.
One of the best things Mozilla did, early on, was to realize that they could not think of everything, and that they could not provide everything, that the market might want. It seems self evident, now. Nobody could imagine the Two Steves trying to write all of the programs that would ever run on the Apple II, or on the Macintosh. A big reason the Apple iPhone is so popular is not because the audio is so much better than any other telephone or that the AT&T plan is just so much better than what you can get from Verizon--it’s a wildly popular telephone because everything on it works and, “There’s an App for that!”
Mozilla Firefox has terrific support for add-ons. These range from very simple to incredibly complex. They span the range from whimsy to serious research. As you might imagine, there is a pretty comprehensive collection of Web Developer tools available at a click that will help to make your page-building better, faster and easier.
CodeBurner is an extended reference for anyone working HTML and CSS. Originally, this was itself an add-on to the Firebug extension, but now it is available as a standalone tool. Very nice, though you may prefer the books and documentation that ships with every copy of Dreamweaver (Window => Results => Reference leads you to the O’Reilly library of reference materials for HTML, CSS, PHP, JavaScript and more ).
One of my favorite extensions is HTML Validator. It generates a continuously updated report in the bottom status bar of Firefox, showing the number of validation errors found on the page you are viewing almost instantly. Click on this number and the Page Source displays, with the errors highlighted. From the Firefox add-on site, there is a warning saying that there is no Mac OSX version, but if you visit the developer’s Web site, you can download a Macintosh version there. It’s the one I depend upon, every day.
Chris Pederick’s wonderful Web Developer extension adds a menu and a toolbar full of tools you probably didn’t even know you needed. Toggle CSS on or off. Quickly re-size your browser to approximate various screen resolutions. Outline block-level elements, or deprecated elements you are still using on your pages. Disable JavaScript, Images or even Cookies on a page to see how each affects the outcome. Even validate your markup or code. It’s a nice piece of work, and so far Chris only suggests that you pay him for his efforts.
The charmingly-named ColorSuckr is not a color picker tool (there are several of those, too, though). ColorSuckr studies an image and then suggest the dozen colors represented in that image that would look best when used on your page. Kind of nice.
There are extensions entirely devoted to JavaScript, the DOM and all of those Black Arts. Similarly, there are downloads catering to the PHP developer, or ASP developer, who wants all of his or her tools in one place.
I’m finding more and more that I develop in Firefox, now, and merely check my pages in other browsers. Try a few extensions out this week, and you might begin to work that way, too.
Wednesday, September 30, 2009
Wednesday, September 23, 2009
HTML 5ive?
HTML 5 is coming. Maybe. Is there any reason to care? To worry? To rejoice?
One of the things that I enjoyed the most about teaching HTML over the last several years is the look in peoples’ eyes when I would explain that in all of techdom, there was at least one thing that you could learn all of and then be forever current in: HTML was done.
You spent a lot of time learning Windows 95 when it first came out. And damned if they didn’t follow it up with Windows 98. But that was okay, it was only a few new features, really. And most of it looked and worked like Windows 95 did, or tried to, so it wasn’t really a burden. Flash ahead through Windows 98SE, Windows Me, Windows 2000, Windows XP and Windows Vista. Now, Windows 7 is again hewing to the basic baked-in goodness of Windows 95. From one release to the next you have very few surprises, but there are changes. Still, you only had to absorb a dozen or so new details every several years. It was manageable, but it was still a burden.
We didn’t have that in HTML. The committee slapped one another on the back and promised to keep in touch and turned out the lights years ago, secure in the knowledge that the future belonged to some variant of XML and/or XHTML. Work on HTML had finally stopped. You could finally spend a few quiet moments every day learning One New Thing and you would eventually learn all of HTML. What a wonderful place to be, huh? Think of the guy or gal out there who knows more about HTML than any of us. You could know as much as they knew. You could know it all.
Well, those days may be drawing to a close. And, maybe, that’s not such a bad thing. Every Web page I have built in the last four or five years has had some common elements with every other Web page I have built in the last four or five years. They have all had a “header” of some kind—not the HTML document <head> area, but a visible header area of the page. They have all had some form of page navigation. They have had some kind of footer. And I have had to sketch out these areas on the page using division tags, assigning classes and IDs as necessary, then styling these divisions as needed.
Since HTML 4.01 was chiseled into stone back in the Olden Days we have seen the rise of several new technologies, many of which look like they’re going to be Keepers. It’s a multimedia world out there and we need more and better ways to accommodate that. But how about all of that vague and indistinct markup? If every page needs divisions for headers, footers and navigation then shouldn’t there be some taggage to support that? In the front-running candidate for Next New Markup Language, there is.
Now, these things have a way of taking a lot of time. The committee is working, albeit slowly, on codifying every little nuance of every new descriptor and we can probably look forward to at least one Name Brand browser ignoring some meaningful fraction of their work. We will need to learn new hacks and workarounds and we should expect a transitional period where some of it all works great in one or two obscure browsers, but no browsers gets it all right. In a way we are already there, with some spotty support for HTML 5 in several current browsers, but nobody yet handling it all.
There is a chance that this will finally be it; the end of the line. But I suspect that now that we have finally gotten away from the idea that HTML might one day find itself a dead language, we probably will see point-releases and maybe even an HTML 6 one day. And so our markup language will join the ranks of our Web page editors and our operating systems as an ongoing project that continually refreshes itself to the demands of the marketplace, and one that we must devote continuing resources to mastering.
One of the things that I enjoyed the most about teaching HTML over the last several years is the look in peoples’ eyes when I would explain that in all of techdom, there was at least one thing that you could learn all of and then be forever current in: HTML was done.
You spent a lot of time learning Windows 95 when it first came out. And damned if they didn’t follow it up with Windows 98. But that was okay, it was only a few new features, really. And most of it looked and worked like Windows 95 did, or tried to, so it wasn’t really a burden. Flash ahead through Windows 98SE, Windows Me, Windows 2000, Windows XP and Windows Vista. Now, Windows 7 is again hewing to the basic baked-in goodness of Windows 95. From one release to the next you have very few surprises, but there are changes. Still, you only had to absorb a dozen or so new details every several years. It was manageable, but it was still a burden.
We didn’t have that in HTML. The committee slapped one another on the back and promised to keep in touch and turned out the lights years ago, secure in the knowledge that the future belonged to some variant of XML and/or XHTML. Work on HTML had finally stopped. You could finally spend a few quiet moments every day learning One New Thing and you would eventually learn all of HTML. What a wonderful place to be, huh? Think of the guy or gal out there who knows more about HTML than any of us. You could know as much as they knew. You could know it all.
Well, those days may be drawing to a close. And, maybe, that’s not such a bad thing. Every Web page I have built in the last four or five years has had some common elements with every other Web page I have built in the last four or five years. They have all had a “header” of some kind—not the HTML document <head> area, but a visible header area of the page. They have all had some form of page navigation. They have had some kind of footer. And I have had to sketch out these areas on the page using division tags, assigning classes and IDs as necessary, then styling these divisions as needed.
Since HTML 4.01 was chiseled into stone back in the Olden Days we have seen the rise of several new technologies, many of which look like they’re going to be Keepers. It’s a multimedia world out there and we need more and better ways to accommodate that. But how about all of that vague and indistinct markup? If every page needs divisions for headers, footers and navigation then shouldn’t there be some taggage to support that? In the front-running candidate for Next New Markup Language, there is.
Now, these things have a way of taking a lot of time. The committee is working, albeit slowly, on codifying every little nuance of every new descriptor and we can probably look forward to at least one Name Brand browser ignoring some meaningful fraction of their work. We will need to learn new hacks and workarounds and we should expect a transitional period where some of it all works great in one or two obscure browsers, but no browsers gets it all right. In a way we are already there, with some spotty support for HTML 5 in several current browsers, but nobody yet handling it all.
There is a chance that this will finally be it; the end of the line. But I suspect that now that we have finally gotten away from the idea that HTML might one day find itself a dead language, we probably will see point-releases and maybe even an HTML 6 one day. And so our markup language will join the ranks of our Web page editors and our operating systems as an ongoing project that continually refreshes itself to the demands of the marketplace, and one that we must devote continuing resources to mastering.
Wednesday, September 9, 2009
Troubleshooting III: Return of the Bugs!
Is It Me?
It’s a question I don’t often ask myself, these days. Since somewhere around high school, I have pretty much expected it was me. That’s just the way I ended up wired, I guess. But I do have a few core competencies and within these circles, I am pretty much not worried that, if something goes wrong, it’s because of something I have done.
I made very sure I knew how to fly. I was terribly anxious when I had three flight instructors in four hours of instruction. How do they keep it all straight? What are the odds that each of them is going to think that one of the others taught me how to, say, Land A Plane? So I did a lot of reading and studying, hung out with pilots and listened to what they had to say and I made sure that I was fully in the moment, whenever I bought “an hour of dual” and actually went up to learn something. People have died doing this. I was going to make damned sure that I was not one of them.
I am slowly regaining that kind of feeling with my guitar. For thirty years I didn’t play at all and lost almost all of my musical mojo. A year ago, I assumed that if something went wrong in the band, it was something that I had done wrong. Now I am getting back to that confident place where I love playing. Wanna change tempo? I’m okay with that. Wanna change key? Let’s give it a shot. I’m good.
But for years now, I have been really confident of my markup skills. I embarked upon the journey of learning all I could about HTML years ago and the powers that be blessed me with a stagnant technology that hasn’t changed in meaningful ways for a dozen years. You can start today and learn a tag a day and how to use them and still learn as much HTML as anyone in the world knows, within a year. A month or so and I was good with XHTML, too. CSS came hard, but by biting off manageable hunks and really wailing on them I have picked up most of it by now, too. When and if a new standard of CSS or HTML is announced, I’m probably not going to have much trouble moving into it because I know the current stuff so well. Someone coming in new would have to learn everything. I’ll only have to learn the changes.
But this week, a couple of things happened and in each case, for some reason I lost half a day to self doubt.
In the first, I had been applying the new Template to my web application that does the scheduling for the various training we give at work. It used to have “this” kind of a shell around it, and now it has “that” kind of look to it. On some level, I knew that the only thing that changed was the shell. It’s like if Frank Sinatra came out in a dark blue tuxedo and sang for half an hour and then took a break and returned to the stage in a dark gray tuxedo and sang some more. In both cases, you’re listening to the same guy, only the clothes have changed. That’s how the Templates update should have worked.
But I applied the new Template to a page that adds people to a class on Thursday morning. And Thursday afternoon, someone called saying they couldn’t get logged-in. If it had happened last week, I would have gone down the Do-You-Have-The-Right-User-Name-And-Password tack, not the Oh-My-God-What-Have-I-Done tack. But because my changing the page and the complaint came so close together, I assumed one had something to do with the other. I still don’t know what caused me to see if I could add myself to the class, which worked like a champ and reset my thinking back to the account name and password, which is where the problem really was. Once I found the right information, I was able to get the guy loaded into the class quite easily, just like always.
This morning, I was working on styling a Table and could not get rules to work. I had put all of my page styles into the head of the page, and no matter how specific I made them, nothing seemed to register on the page. I could do only inline styles, where you apply a whole long list of properties and values to individual tags. I even sought help, asking what I was doing wrong and nobody could find anything, until it was noticed that the Templates files on the server were wrong. It wasn’t me, it was my server administrator! But I immediately folded-up and spent most of a morning questioning just how much of this stuff I really did know?
I wonder how long it will take me to regain my former confidence? And I wonder how doing so might one day end up biting me in the hiney?
It’s a question I don’t often ask myself, these days. Since somewhere around high school, I have pretty much expected it was me. That’s just the way I ended up wired, I guess. But I do have a few core competencies and within these circles, I am pretty much not worried that, if something goes wrong, it’s because of something I have done.
I made very sure I knew how to fly. I was terribly anxious when I had three flight instructors in four hours of instruction. How do they keep it all straight? What are the odds that each of them is going to think that one of the others taught me how to, say, Land A Plane? So I did a lot of reading and studying, hung out with pilots and listened to what they had to say and I made sure that I was fully in the moment, whenever I bought “an hour of dual” and actually went up to learn something. People have died doing this. I was going to make damned sure that I was not one of them.
I am slowly regaining that kind of feeling with my guitar. For thirty years I didn’t play at all and lost almost all of my musical mojo. A year ago, I assumed that if something went wrong in the band, it was something that I had done wrong. Now I am getting back to that confident place where I love playing. Wanna change tempo? I’m okay with that. Wanna change key? Let’s give it a shot. I’m good.
But for years now, I have been really confident of my markup skills. I embarked upon the journey of learning all I could about HTML years ago and the powers that be blessed me with a stagnant technology that hasn’t changed in meaningful ways for a dozen years. You can start today and learn a tag a day and how to use them and still learn as much HTML as anyone in the world knows, within a year. A month or so and I was good with XHTML, too. CSS came hard, but by biting off manageable hunks and really wailing on them I have picked up most of it by now, too. When and if a new standard of CSS or HTML is announced, I’m probably not going to have much trouble moving into it because I know the current stuff so well. Someone coming in new would have to learn everything. I’ll only have to learn the changes.
But this week, a couple of things happened and in each case, for some reason I lost half a day to self doubt.
In the first, I had been applying the new Template to my web application that does the scheduling for the various training we give at work. It used to have “this” kind of a shell around it, and now it has “that” kind of look to it. On some level, I knew that the only thing that changed was the shell. It’s like if Frank Sinatra came out in a dark blue tuxedo and sang for half an hour and then took a break and returned to the stage in a dark gray tuxedo and sang some more. In both cases, you’re listening to the same guy, only the clothes have changed. That’s how the Templates update should have worked.
But I applied the new Template to a page that adds people to a class on Thursday morning. And Thursday afternoon, someone called saying they couldn’t get logged-in. If it had happened last week, I would have gone down the Do-You-Have-The-Right-User-Name-And-Password tack, not the Oh-My-God-What-Have-I-Done tack. But because my changing the page and the complaint came so close together, I assumed one had something to do with the other. I still don’t know what caused me to see if I could add myself to the class, which worked like a champ and reset my thinking back to the account name and password, which is where the problem really was. Once I found the right information, I was able to get the guy loaded into the class quite easily, just like always.
This morning, I was working on styling a Table and could not get rules to work. I had put all of my page styles into the head of the page, and no matter how specific I made them, nothing seemed to register on the page. I could do only inline styles, where you apply a whole long list of properties and values to individual tags. I even sought help, asking what I was doing wrong and nobody could find anything, until it was noticed that the Templates files on the server were wrong. It wasn’t me, it was my server administrator! But I immediately folded-up and spent most of a morning questioning just how much of this stuff I really did know?
I wonder how long it will take me to regain my former confidence? And I wonder how doing so might one day end up biting me in the hiney?
Wednesday, September 2, 2009
Troubleshooting II: Son of Troubleshooting
More thoughts on What To Do When It Isn’t Working.
Those of you who have had a little experience with Cascading Stylesheets will probably already know this one, but it’s one of my favorites. You can style just about any tag to act like just about any other tag, of course. You can make all of your strong text italic, or all of your emphasized text look like H4 headings. But you can also draw a border around any visible element on your page.
This is really where CSS has it all over Tables, when it comes to design. You can add a border to your table, of course, but it places a border around everything that sketches out the table. Headings, rows, columns, cells and the outer edge of the table, itself. With CSS, you can style borders around only the fourth cell in a row.
So, td td td td { border: 1px solid green; } will place a one-pixel border around any cell that is fourth in a sequence, so remember that if your row has five boxes, it may have two “fourth boxes”, the 1-2-3-fourth box and also the 2-3-4-fifth fourth box. You have even more control. td td td td { border-bottom: 1px dotted red; } places a dotted red line at the bottom of that third box. Pretty neat, huh?
So, how does any of this help you when it comes to Stuff Not Looking Right? You can easily lose track of spans and divisions and columns and paragraphs and all of their various margins and paddings and so on. So, when it doubt, put a border around it!
I cannot begin to count the number of times I was not sure why something was not getting better as I tweaked this or that element, only to draw a box around something and discover I wasn’t even working on the right area of the page! With today’s pages full of zenboxes and columns and so on it can be easy to get off into an area where you think you are working in one part of the page, only to find that you are actually adjusting some other page element.
Again, table borders go around everything in the table. Adding { border: 1px solid blue; } to a table in CSS, however, just draws a box around the outer edges.
Where this is all really useful is in figuring out how various spatial adjustments will affect our pages. The two most-common CSS rules are probably going to be margin and padding. We remember from our HTML training that we have an image, a portrait. Surrounding that, we have padding, like the matte. Then comes the border, similar to the frame of the portrait, and finally we have the space outside of the border, like the room outside of the frame, which we call margin.
You have an image that you want flush-right against the right column of your page. If you apply padding of 1 em-unit all of the way around that image ( padding: 1em; ), you will be creating an air space equal to the size of the M character over the top, down the right side, across under the bottom and up the left side. Get used to traveling clockwise around the box. If you need help, remember that “Margins and Padding are TRouBLe”. T-R-B-L, Top, Right, Bottom and Left. Those are the order we specify margin and padding limits.
After adding some space around your photo, you may now be unhappy because all of the text on your page lines up at the edge of its container, but the right-most edge of the picture itself is back to the right a character or two, and its apparent top isn’t aligned with the first line of text, but aligns closer to the second line. The way to fix this would be to assign no padding at all to the top and the right, but keeping it in effect for the bottom and the left-side of the photo. Padding: 0 0 1em 1em; will do that for you. Remember TRouBLe. We are assigning a value of zero to the top padding, zero again to the right-side padding, 1em to the bottom and another 1em to the left side.
Some of these adjustments can be pretty subtle and depending upon the vagaries of servers and connections, you may not be able to simply refresh your browser quickly enough to see the difference. But if you draw a box around your image, it will be much clearer. In your stylesheet, img { border: 1px solid orange; } will place a one-pixel line around your image. Some people also like to color a background when using padding. Background-color: #353535; will place a dark gray background color anywhere you have visible padding.
Three things are important here. Choose a color that contrasts easily with the rest of the material on your page. If your page includes a lot of browns and greens, choose a bright yellow or pink for your border color or background-color. Secondly, if things are really tight, you may find that adding a 1-pixel border around elements destroys some of the design. Imagine a full-width container of 800 pixels for your page. Now you fill that with three boxes, one 350-pixels wide, one that’s 150-pixels wide and one that’s 300-pixels wide. There’s your 800, right? What do you suppose will happen, if you add a 1-pixel border around that middle box? Remember, you have a pixel on the left, and a pixel on the right to contend with.
Finally, remember to delete these little tricks before you walk away from your page. It may confuse your visitors if they happen upon a page with little lines drawn around various elements for no apparent reason.
Those of you who have had a little experience with Cascading Stylesheets will probably already know this one, but it’s one of my favorites. You can style just about any tag to act like just about any other tag, of course. You can make all of your strong text italic, or all of your emphasized text look like H4 headings. But you can also draw a border around any visible element on your page.
This is really where CSS has it all over Tables, when it comes to design. You can add a border to your table, of course, but it places a border around everything that sketches out the table. Headings, rows, columns, cells and the outer edge of the table, itself. With CSS, you can style borders around only the fourth cell in a row.
So, td td td td { border: 1px solid green; } will place a one-pixel border around any cell that is fourth in a sequence, so remember that if your row has five boxes, it may have two “fourth boxes”, the 1-2-3-fourth box and also the 2-3-4-fifth fourth box. You have even more control. td td td td { border-bottom: 1px dotted red; } places a dotted red line at the bottom of that third box. Pretty neat, huh?
So, how does any of this help you when it comes to Stuff Not Looking Right? You can easily lose track of spans and divisions and columns and paragraphs and all of their various margins and paddings and so on. So, when it doubt, put a border around it!
I cannot begin to count the number of times I was not sure why something was not getting better as I tweaked this or that element, only to draw a box around something and discover I wasn’t even working on the right area of the page! With today’s pages full of zenboxes and columns and so on it can be easy to get off into an area where you think you are working in one part of the page, only to find that you are actually adjusting some other page element.
Again, table borders go around everything in the table. Adding { border: 1px solid blue; } to a table in CSS, however, just draws a box around the outer edges.
Where this is all really useful is in figuring out how various spatial adjustments will affect our pages. The two most-common CSS rules are probably going to be margin and padding. We remember from our HTML training that we have an image, a portrait. Surrounding that, we have padding, like the matte. Then comes the border, similar to the frame of the portrait, and finally we have the space outside of the border, like the room outside of the frame, which we call margin.
You have an image that you want flush-right against the right column of your page. If you apply padding of 1 em-unit all of the way around that image ( padding: 1em; ), you will be creating an air space equal to the size of the M character over the top, down the right side, across under the bottom and up the left side. Get used to traveling clockwise around the box. If you need help, remember that “Margins and Padding are TRouBLe”. T-R-B-L, Top, Right, Bottom and Left. Those are the order we specify margin and padding limits.
After adding some space around your photo, you may now be unhappy because all of the text on your page lines up at the edge of its container, but the right-most edge of the picture itself is back to the right a character or two, and its apparent top isn’t aligned with the first line of text, but aligns closer to the second line. The way to fix this would be to assign no padding at all to the top and the right, but keeping it in effect for the bottom and the left-side of the photo. Padding: 0 0 1em 1em; will do that for you. Remember TRouBLe. We are assigning a value of zero to the top padding, zero again to the right-side padding, 1em to the bottom and another 1em to the left side.
Some of these adjustments can be pretty subtle and depending upon the vagaries of servers and connections, you may not be able to simply refresh your browser quickly enough to see the difference. But if you draw a box around your image, it will be much clearer. In your stylesheet, img { border: 1px solid orange; } will place a one-pixel line around your image. Some people also like to color a background when using padding. Background-color: #353535; will place a dark gray background color anywhere you have visible padding.
Three things are important here. Choose a color that contrasts easily with the rest of the material on your page. If your page includes a lot of browns and greens, choose a bright yellow or pink for your border color or background-color. Secondly, if things are really tight, you may find that adding a 1-pixel border around elements destroys some of the design. Imagine a full-width container of 800 pixels for your page. Now you fill that with three boxes, one 350-pixels wide, one that’s 150-pixels wide and one that’s 300-pixels wide. There’s your 800, right? What do you suppose will happen, if you add a 1-pixel border around that middle box? Remember, you have a pixel on the left, and a pixel on the right to contend with.
Finally, remember to delete these little tricks before you walk away from your page. It may confuse your visitors if they happen upon a page with little lines drawn around various elements for no apparent reason.
Subscribe to:
Posts (Atom)
