Web Design Training Blog

CSS3, Fonts, and Legal Issues

akenien — Wed, 09 Nov 2011 21:44:06 +0000

Among other hot CSS3 topics, bloggers are buzzing about @font-face. A frequently overlooked topic are the legal issues associated with this new design capability.

The @font-face rule allows designers to upload any font, which the browser will download to render the page for the client. This means that designers can work outside of the traditional web safe fonts. The rule:

@font-face {

font-family : ‘FontName’ ;

src : url (‘link’) ;

}

For more in-depth information on using the rule, visit w3.org.

After overcoming the initial excitement of the design possibilities, it’s important to consider a few legal issues.

Font Copyright

Unless you created the font yourself, there’s a proud designer out there who would like credit for their lovely font! Be sure to add attribution in the code. For example:

/* Font created by Jane Smith (link) */

Font Licensing

Where did you get the font from and what are the regulations associated with it? It’s so easy to browse through dafont.com or fontspace.com and just download font after font. Are there limitations for using the font? Is it for personal or commercial use? Remember to keep track of the licensing regulations before publishing it for thousands or millions of website visitors to see!

Font Piracy

Hopefully no one would do this, but it’s possible to go to a person’s website and download their font files! Be sure to consider this before uploading $1,000 worth of fonts for your website.

(Note: As was pointed out in the comment section of this post by Brian Love, you can protect your fonts on the web. Be sure to do this! Here is a link to instructions on protecting your fonts.)

Your Responsibility

As with any new development, it’s exciting to try out this new capability right away! As you do, keep your fellow designer in mind and consider these issues of copyright, licensing, and piracy.

To learn more about web design, consider our CSS Training.

Social Media from a Web Developer’s Perspective

akenien — Tue, 01 Nov 2011 18:51:07 +0000

Americans spend more time on Facebook than any other website, according to a recent Nielson study. In general, Americans spend a quarter of their Internet time on social sites. For web developers, jumping into the social trend is a must.

To help students in our web design training and web development training classes, we reached out to an expert on social site development. We asked Paul deGrandis, a developer who has worked at social sites such as Etsy and Tutorspree, for his perspective on the social trend.

Q: Paul, can you tell us about the social sites you have worked on?

A: I was an early hire at Etsy.com. I founded and successfully exited my own startup, OurShelf. Then, I worked in online social games for a little while with PushButton Labs. Now I’m the VP of Engineering at Tutorspree, a YC-backed company.

Q: How does a social site approach it’s interaction with site visitors?

A: All of these companies aggressively searched (and continue to search) on the best ways to apply and enhance social interactions online and offline to drive the product.

Both Tutorspree and Etsy face the same challenges: How do you connect the best people together, and help maintain and grow that relationship?

OurShelf was all about creating a social cataloging site. Empower users through everything they own and everyone they know. The real goal was to build the best marketing/targeting data possible, put it in the hands of the consumers, and build useful applications that harness it.

Q: How do you keep your skills sharp?

A: I keep my skills sharp by continually reading and learning new technologies, even if I don’t think I’ll use them in production work. I also try to always contribute to an open source project too. I’ve instilled the same belief at Tutorspree, where we take Fridays to grow our individual skill sets and contribute to open source projects. So, every week the entire team gets a little more talented than we were the week before. We have “Teach Tuesdays” where an employee will give a lightning talk during lunch about any topic they choose, with the only goal to teach all the employees something new.

Q: Do you have any suggestions for someone who would like to work in web development for a social site?

A: If you want to start working in social web, the best thing you can do is contribute to relevant open source projects that are used by social web startups. From there, it’s an easy jump into commercial development (and most companies will happily hire you).
Make the most of your experiences; every startup has something new that it can teach you.

____

Paul deGrandis is the VP of Engineering for Tutorspree. He loves metrics, taking on the impossible, and making lives better through technology. Previously Paul worked at PushButton Labs, Etsy.com, OurShelf, and SilverCloud Software as well as working in advanced research (DARPA). Visit his blog at http://www.pauldee.org/blog.

Business Tips for Web Designers

akenien — Thu, 20 Oct 2011 18:22:58 +0000

In addition to writing code and planning Web sites, freelance designers and developers need an arsenal of business skills. To help students in our our web design training classes, we asked an expert to provide his advice. The following guest post from Neil Tortorella provides advice on the business side of web design and development.

The Business of Freelance Web Design by Neil Tortorella

Beyond writing code and designing, there are many skills web designers should know. This is, after all, a business. It makes little difference whether a designer is self-employed or working for a company. But, if one is self-employed, the imperative is perhaps a bit more important. They can’t usually rely on account executives, company administrators, various assistants and the likes to handle the numerous tasks needed to get things done.

Basic Business Skills

Basic, yet essential, business skills are paramount. That means understanding how to communicate with clarity, both verbally and written. There will be proposals to write, presentations to give, memos and a myriad of other forms of communications, both to external and internal audiences.

Project Management

Next up is project management. Web work can quickly become a tangled mess. And, it happens before you know it. Know your process and stick to it. If you trip up here you can easily string another loop around the noose. Process means to go from point A to point B in a predicable manner. In other words, the proposal gets approved; you get a check; get the content; do the layouts; get an approval; go into production, etc. It’s a foreseeable process and when things don’t go right, you can throw up the red flag.

Finance

Money. You can only do so much for this or that amount. Keep an eye on the budget. Ideally, develop a “back out” budget. In other words, start from the end and work to the beginning. The problems will show up fairly quick.

If a client asks for something halfway through a project, think it through. How much time and expense will be involved? All too often, we designers simply say, “Sure. No problem.” Thinking it through can mean the difference between making some money, or losing your shirt.

Customer Relationships

Beyond all that is the ability to simply get along with people. We often say we buy this or that from this or that company. In most cases, that’s not so. We don’t often buy from a faceless company. People buy from people … and usually people they like. So, it’s important to be likeable. But that likeability needs to be authentic. Care for your clients like a newborn babe. Nurture their needs. Find ways to help them be the best at whatever it is they do. If you do this simple thing, you’ll always be the hero.

Want more from Neil Tortorella? You can order his book on Amazon, or enter our contest to win a free copy plus a web design class.

Develop your Web Design Career

akenien — Tue, 18 Oct 2011 20:01:39 +0000

Neil Tortorella calls himself a “designosaur.” Why? He’s been a designer since the 80s.

Originally a graphic designer, he switched to web design in the early years of AOL’s release. “Back then we all did strange stuff, mostly because we were pretty much clueless,” Tortorella says. “Flaming, spinning logos. Metaphor designs and all such weirdness.”

Web design has come a long way since the blinking images and scrolling text of the 90s, and so has Tortorella. He now has a successful career as a web designer and has recently published a book, Starting Your Career as a Freelance Web Designer. We asked Tortorella the three essential questions commonly asked by newbie web designers from our web design training classes. Here are his thoughts.

Question: What training and preparation do you recommend for someone looking to design web pages?

Tortorella’s Advice: Web design is continually evolving enterprise. Technologies are forever changing. It can be frustrating. Just when you think you’ve got things handled, they change the rules. So, a commitment to training is imperative.

Whether a designer/developer went to school or is self-taught, the trick, if there is one, is to keep it up. Buy a book. Sign up for a class. The easiest way, I believe, to keep up is to simply read and do. There are loads and loads of free tutorials on the web.

The bottom line is to know your craft intimately. Find the way you learn. Some folks learn best in a formal classroom setting. Others learn on their own by reading. Still others learn by watching videos and such. Find what works for you and make a commitment to keep it up. What you learn today will be out-of-date tomorrow.

Question: What are your biggest frustrations as a web designer? Do you have any recommendations for how others might deal with the same problems?

Tortorella’s Advice: Every project has its frustrations. Some are bigger than others. Tracking down content material. People going on vacation. Wrong formats. Unrealistic delivery expectations. Cross-browser and cross-platform issues. Finding a script that does what you need. The list goes on and on.

Probably, the biggest frustration is poor communication. I believe it’s the designer/developer’s responsibility to clearly communicate how this stuff works.

It’s important to remember that the designer/developer and the client speak different languages. We, as designers, work with web design every day. Clients don’t. They simply want a site that works, does what it’s supposed to and hopefully completed within a reasonable amount of time and money.

Remember to spell things out in common language. Describe it. Explain it. Put yourself in the client’s position and speak or write from there.

Question: What advice do you have for someone starting a freelance career?

Tortorella’s Advice: When one works for a company, churning out sites on a full time basis, things are often fairly clear-cut. The project comes in … the project goes out. The designer comes in at eight or nine and goes home at five. Sort of. Nonetheless, it’s predicable.

For the moonlighter, things are not always so easily packaged. It’s a serious trick to blend life with work. The solution seems to be in the planning.

Striking a balance between work and life can be a challenge. What are you willing to give up? You need time to go to work each day; do the side work; keep up your training; do the billing and other tasks; make dinner and the laundry; pick up little Jonnie from soccer practice and meet or email your clients with progress reports. It’s, in a word, exhausting. Yet it can be done.

Plan your time. How much can you devote to side projects after hours? Plot out your personal time. When do you need to pick up the kids? When do you need to cook dinner and clean the house? Can you take an entire Saturday to work on client stuff, or should you trim the hedges and mow the lawn? How much time is left?

Our lives are measured in hours, minutes and seconds. How much will you devote to work and personal time is really up to you. But remember, time is a non-renewable resource. When time is gone, it’s gone.

Envision your life and your work and then, in the words of Nike®, “Just do it.”

Want more from Neil Tortorella? You can order his book on Amazon, or enter our contest to win a free copy plus a web design class.

Two Introduction to Web Design Webinars

akenien — Thu, 13 Oct 2011 19:17:34 +0000

If you’ve ever wondered how to learn web design, these webinars are the answer! These two webinars introduce attendees to the basics of web design and key web design concepts. Those interested in learning Dreamweaver should attend “Get Started with Adobe Dreamweaver” on October 27. Anyone looking to learn HTML is invited to “Introduction to HTML” on December 14. Each webinar will provide helpful tips and suggest key resources. Below are the details for both webinars.

Web Design Webinars

Get Started with Adobe Dreamweaver Webinar: This webinar will discuss the capabilities of Dreamweaver and talk about planning your website. Attendees will learn about the interface, get a quick introduction to the tools, and watch as a very simple HTML page is created. There will also be Introduction to Dreamweaver course giveaways! Webinar will be held on October 27 at 1pm ET. Click to sign up for the Dreamweaver webinar.

Introduction to HTML Webinar: This webinar will explore basics of web design, the evolution of HTML, and the basic structure of an HTML page. Attendees will learn about resources to help them develop their web design skills. Selected attendees will win a free Introduction to HTML course. The webinar is scheduled for December 14 at 1pm ET. Click to sign up for the HTML webinar.

About the presenter

Allison Kenien has a passion for publishing content, both on the web and in print. She has a wide range of experience with Adobe products, including Dreamweaver, InDesign, Illustrator, and Acrobat. She is the manager for the Syracuse Adobe User Group. Connect with her on Twitter @AllisonKenien.

Create iPhone Apps: Tips to Get You Started

akenien — Fri, 07 Oct 2011 18:55:42 +0000

When Apple announced their iPhone 4S on October 4, their website crashed, likely because of the high volume of traffic. As the iPhone trend continues to explode, seasoned programmers and IT newbies a like face an exciting new career option: iPhone app development. To help students in our iPhone training classes, we asked successful iPhone developers for their best advice on developing apps.

Meet Raphael Caixeta and Gavin Miller. Caixeta is the co-founder of Grip’d, a web and iOS development and marketing company. His projects have received attention from Techcrunch, Mashable, Lifehacker and more. Miller is the co-owner of RANDOMTYPE, a company specializing in web strategy, design, and development. His projects include web development work for Nissan USA, development of video encoding and compression software, and of course developing iPhone apps.

Here are insights on creating apps from the developers.

When you spot a good opportunity to build iPhone apps, jump on it!

When the city of Calgary announced that they would be releasing real-time traffic data on the web, Gavin Miller recognized the opportunity for a useful iPhone app. “I literally called up my business partner and says we have to do this,” Miller says. “Parking in downtown Calgary can be a nightmare, and so the chance to make it easier for people was such a draw for me.” Miller ended up developing an app called yycParking, which keeps users updated on parking availability, directions, and lot information. “We’ve gotten some local press from the app, and we’re currently talking with the city about how we can work with them to do more with the app,” Miller says. “It’s turned out to be a bigger splash than we thought!”

Take on Challenging App Development Projects

When Raphael Caixeta set out to develop his QR Scanner iPhone app, he faced an enormous amount of work. “I had no idea what I was doing when it came to 90% of the application and had to figure everything out – with very little help!” Caixeta says. Although he faced a challenge, he jumped in and eventually developed a successful app. “It’s all paid off,” he says. “Every day when I look at the downloads number from iTunes I get more and more excited that so many people are using something I’ve made.”

Make Creating Apps a Fun Project

When Gavin Miller set out to create a game app, he was determined to get it done quickly and enjoy the process. “This was the second app I created, and I did it during a 24 hour code-a-thon,” Miller says. “The goal was to build a game (something I hadn’t done before) over the course of 24 hours. It was a ton of fun. I picked something silly like lolcats so that my interest wouldn’t wane over the project, and I was able to get 95% done. I spent the next week doing bug fixes and released it to the app store.”

Connect with Other App Developers

The web is packed with app development experts, resources, and advice. Caixeta recommends StackOverflow.com, Reddit.com/r/simpleios, and Apple iOS Dev Center. “ There are so many great developer communities on the web today that are willing to point you in the right direction and help you figure out whatever problems you may be having,” Caixeta says. “Google is also a great friend, don’t ever underestimate Google. If you get stuck somewhere or don’t know how to do something, chances are Google has already helped someone find the solution to the very same problem.”

Get Started

“Don’t keep finding excuses not to do something you’re itching to do,” Caixeta says. “It’ll probably be very hard in the beginning and you’ll come across a lot of different challenges, but if you stick through it, it’ll pay off in the end.”

Find Raphael Caixeta on Twitter @raphaelcaixeta. Find Gavin Miller on Twitter @gavingmiller.

Free Dreamweaver Tutorial and Webinar

akenien — Mon, 29 Aug 2011 22:38:27 +0000

Do you want to learn how to use Dreamweaver? Webucator regularly provides Dreamweaver tutorials and Dreamweaver webinars. On October 27, our trainers will present a free Dreamweaver webinar to help you get started with this program! Click here to register. To get a sample of the content, check out the tutorial below, which shows you how to set up an HTML page in Dreamweaver.

Dreamweaver Tutorial

[youtube:http://www.youtube.com/watch?v=zQXUGGZFvhA&h=505&w=640]

Understanding the CSS Inherit Value

Nat Dunn — Mon, 18 Jul 2011 11:40:41 +0000

I had a student ask to see an example of the inherit property in CSS. It is a little hard to demonstrate, because most of the time the property does not change anything as it is the default value in most cases. However, it can be used to turn off the default browser-assigned property of a tag.

Very quickly for those new to the inherit property in CSS, when a property is assigned the inherit value it indicates that the property should be inherited from the parent element. This is default behavior in HTML. For example, take the following code:

>The >Inherit> Value>

The text within the em tag will also be big and bold, because it inherits size and weight from the h1 tag.

We can also use inherit to turn off default properties. For example, look at the following CSS:

p {
	font-style:none;
}
 
em {
	font-style: inherit;
	text-decoration:underline;
}

The rule for p sets the font-style of paragraphs to none, which means plain, non-italicized text. We don’t really have to do this as the default value for font-style for paragraphs is none.

Now take a look at this HTML:

>Even the word >inherit> isn't italicized.>

The em tag will now inherit the none value from the containing p tag. We also set the text-decoration property to underline, so we can still see that the tag’s content is emphasized:

I hope that gives a better understanding of how inherit works. This is also covered in our CSS classes.

Regular Expression Tester

Nat Dunn — Mon, 06 Jun 2011 19:15:56 +0000

I know there are a lot out there already, but we built a simple regular expression tester for use in our Intro to PHP class and Advanced JavaScript class. I’ve made the tester publicly available here: Regular Expression Tester. Happy regexing!

Dreamweaver CS5 and PHP/MySQL Total Connectivity Webinars

akenien — Wed, 04 May 2011 00:21:58 +0000

Get set up with PHP/MySQL using DreamWeaver CS5 and XAMPP! These recorded webinars show you everything you need to know!

Dreamweaver CS5 and PHP/MySQL Total Connectivity: Part One

[youtube:http://www.youtube.com/watch?v=0XdGfsM750Q&h=505&w=640]

Dreamweaver CS5 and PHP/MySQL Total Connectivity: Part Two

[youtube:http://www.youtube.com/watch?v=yM89ys87Ras&h=505&w=640]

Learn more about our web design training. Hear about our latest webinars by subscribing to our newsletter. Click here to subscribe.

Testing Web Pages in Old Versions of IE with Virtual PC

Nat Dunn — Fri, 11 Mar 2011 19:05:21 +0000

Testing on old versions of Internet Explorer can be a pain. I have used IE Tester a lot and it used to do a pretty good job, but lately it has been having trouble with IE7 and IE8.

One of my colleagues recently told me about these Virtual PC images provided by Microsoft explicitly for testing web pages on older versions of Internet Explorer. I downloaded and installed XPSP3-IE6.EXE, XPSP3-IE7.EXE, and XPSP3-IE8.EXE .

I didn’t want to have to move files from my main machine to each of the VMs every time I need to test, so I tried to map a drive to a shared folder. But that didn’t work. The correct way (at least the way that worked for me) is to enable Integration Services. It took a while to figure out just how to do that, but I finally got it working. As the VMs time out and need to be reinstalled every few months, I knew I’d have to go through this process again, so I figured I’d document it. Here’s the way I did it:

Set the Password for IE User in Computer Management:
Select Enable Integration Services from the Tools menu.
If prompted to Download Updates, download and run them.
You’ll be prompted to restart. Do so.
Again, select Enable Integration Services from the Tools menu.
Select Settings from the Tools menu.
Click on Integration Services in the left panel. Make sure the drive containing the files you want to test is checked.
Close and Reopen Virtual PC and log into Windows. You should now see the drive available in your Computer folder.

I hope this helps make the process easier for someone else (and for me when I need to go through it again).

Happy testing!

JavaScript Division by Zero and Infinity

Nat Dunn — Thu, 03 Mar 2011 13:21:52 +0000

In JavaScript, division by zero does not cause an error. Instead, it evaluates to Infinity, which is a reserved word (note the capital “I”). To see this, run the following code:

alert(5/0);

You’ll get an alert that reads “Infinity”, which is a number:

alert(typeof Infinity); //number
alert(isNaN(Infinity)); //false

You can check for an infinite number using the isFinite() function:

isFinite(5/0); //false

There is also negative infinity:

alert(-5/0); //-Infinity

Finally, numbers that are too big or too small for JavaScript to handle evaluate to Infinity:

alert(Math.pow(10,309)); //Infinity

XMLHttpRequest readyState bug in Opera

Nat Dunn — Wed, 02 Mar 2011 22:44:18 +0000

The readyState holds the current state of an XMLHttpRequest object. It is generally used to see if the requested content has been received. According to the W3C specification:

0 = UNSENT
1 = OPENED
2 = HEADERS_RECEIVED
3 = LOADING
4 = DONE

Here is a simple script to show how to use readyState to output the responseHeaders:

window.onload = function() {
	var ajax = new XMLHttpRequest();
	var responseHeaders;
	var output = document.getElementById("headers");
	var temp = "";
	ajax.open("GET", "arrays.html", true);
	ajax.send();
	ajax.onreadystatechange = function() {
		if ( this.readyState == 2 ) {
			responseHeaders = this.getAllResponseHeaders().split("\n");
			temp = "";
			for (var i in responseHeaders) {
				if (responseHeaders[i].trim().length > 0) {
					temp += "" + responseHeaders[i] + "
";
				}
			}
			temp += "
";
			output.innerHTML=temp;
		}
	}
}

This script works as expected in IE9, Firefox 4, Chrome 10, and Safari 5, but errors in Opera 11. Opera doesn’t appear to have the responseHeaders yet so this.getAllResponseHeaders() causes an INVALID_STATE_ERR exception.

To get around this bug, we change our if condition as follows:

if ( this.readyState > 2 && typeof responseHeaders == "undefined" ) {...

This if block will run if this.readyState is greater than 2 and the responseHeaders variable is yet to be defined. The first part of the condition will be true in readyStates 3 and 4, but the second part will only be true in readyState 3.

JavaScript and the User’s Environment

Nat Dunn — Fri, 04 Feb 2011 15:16:44 +0000

A lot of support forms ask users what browser and operating system they’re using as this can be useful information for debugging the problem. But users sometimes do not provide accurate information. And sometimes the support tech needs additional information like whether cookies are enabled. So, I played with the idea of capturing information on the user’s environment in a hidden field of a support form as a JSON string. Here’s a script I came up with:





Navigation Info

<script type="text/javascript">
function dumpNav(type,destination) {
  try {
    switch (type) {
      case "list" :
        document.write("");
        var i,j;
        for (i in navigator) {  
          document.write("");
          if (typeof navigator[i] == "object") {
            document.write(i);
            try {    
              document.write("");      
              for (j in navigator[i]) {
                try {
                  document.write("" + i + "." + j + ":  
");  
                  document.getElementById(i + "." + j).size = document.getElementById(i + "." + j).value.length
                } catch (e) {
                  //alert(e.message);  
                }
              }
              document.write("
");
            } catch (e) {
              //alert(e.message);  
            }
          } else {
            document.write("" + i + ":  ");  
          }
          document.write("
");
        }
        document.write("
");
        break;
      case "json" :
        var navInfo={};
        var i,j;
        for (i in navigator) {
          if (typeof navigator[i] == "object" ) {
            navInfo[i]={};
            for (j in navigator[i]) {
              try {
                navInfo[i][j]=navigator[i][j].type ? navigator[i][j].type : navigator[i][j].name ? navigator[i][j].name : navigator[i][j];
              } catch(e) {
                //alert(e.message);  
              }
            }
          } else {
            navInfo[i] = navigator[i];
          }
        }
        document.getElementById("navInfo").value=JSON.stringify(navInfo);
        break;
      default :
        throw({"message":"type must be 'list' or 'json'"});  
    }
  } catch (e) {
    alert(e.message);  
  }
}
script>



	This would normally be a hidden field.

The function can either dump the navigator information as a nested ordered list (for displaying in the browser) or as a JSON string (for putting in a hidden field). In the example above, I use a textarea instead of a hidden field just for testing.

The script throws an Object Not Supported error in IE6, but works in IE9. I’m not sure about IE7 and IE8 because my IETester seems to be freaking out.

Anyone know of a script out there that does something similar or of a better approach of getting a general dump of the user’s environment?

window.document bug in Chrome and Opera?

Nat Dunn — Wed, 02 Feb 2011 22:32:53 +0000

I’ve found some strange behavior in Google Chrome and Opera when dealing with new windows and I’m wondering if it’s a bug or if it’s by design.

Here’s the code:

var newwin;
 
function openWin() {
	newwin = window.open("newwin.html","newwin","height=200px,width=300px");
	alert(newwin.document);
	setTimeout(function() { alertDoc(); },1000);
}
 
function alertDoc() {
	alert(newwin.document);
}

In Safari, IE and Firefox, this code works fine, meaning that an alert dialog similar to the following pops up when openWin() is called and it pops up again one second later when alertDoc() is called:

In Opera and Chrome, however, newwin.document is only recognized within the openWin() function. The second alert from within the alertDoc() function pops up “undefined.”

Anyone know why?

CSS Units of Measurement

Nat Dunn — Thu, 20 Jan 2011 13:18:40 +0000

CSS allows you to specify font size, border size, margins, padding, etc. using many different units of measurement. The table below shows the units available.

Unit	Description	Example
`px`	Pixels	`margin-top: 10px;`
`pt`	Points	`font-size: 12pt;`
`in`	Inches	`padding-top: .5in;`
`cm`	Centimeters	`top: 5cm;`
`mm`	Millimeters	`left: 45mm;`
`pc`	Picas	`bottom: 12pc;`
`em`	Ems	`font-size: 1.5em;`
`ex`	Exs	`font-size: 1.5ex;`
`%`	Percentage	`width: 80%;`

Pixels (px)

The measurement unit most often used for designing web pages is pixels. A pixel is not an absolute measurement like, for example, an inch or a point. The actual size of a pixel depends on the resolution and size of a user’s monitor. Consider an image that is 900 pixels wide. If the monitor resolution is set to 800 by 600 pixels, then the image will not fit on the screen. However, if the monitor resolution on the same computer is set to 1024 by 768 pixels, the image will fit with room to spare.

Points (pt)

Points should be reserved for print. There are 72 points in an inch.

Inches (in), Centimeters (cm), and Millimeters (mm)

Although these are the most common units of measurement in life, they should be avoided in Web design.

Picas (pc)

Picas should be reserved for print. There are 6 picas in an inch.

Ems (em)

An em (or Mutt) is a relative unit that refers to the size of the letter “M” in a font. Because em is a relative rather than absolute measurement, it is often used in Web design.

Exs (ex)

The “x-height” is the height of font’s lowercase “x”. Exs are used to set the size of content based on the size of the surrounding font.

HTML5 Canvas Bézier Curve Application

Nat Dunn — Tue, 14 Dec 2010 16:46:40 +0000

As part of our upcoming HTML5 training, we have created a small HTML5-based application for generating Bézier curves. The video below shows how to use this application, both to get a better understanding of how Bézier curves work and to generate HTML5 code for the drawings you create.

HTML5 Canvas-based Raffle Picker

Nat Dunn — Fri, 10 Dec 2010 22:56:28 +0000

I’ve been playing with HTML5 Canvas. All the examples I’ve seen are either overly simplified (for teaching purposes) or full-blown applications (like Sketchpad). I’m trying to figure out how your average web developer might incorporate it into their websites. I don’t have a great answer yet, but I am having fun with it!

At Webucator, we do a lot of giveaways and we commissioned a Flash-based solution, which we call the Webuwheel. I’m no designer, but I tried to do something similar with HTML5 Canvas. I couldn’t get it to run in WordPress, so it’s hosted on our main site. Have a look: An HTML Canvas-based Raffle Picker.

HTML5 WebKit Browser Bug: required fails for color input type

Nat Dunn — Fri, 10 Dec 2010 04:55:12 +0000

The required attribute doesn’t work for the color input type in Google Chrome 8 and Safari 5 – the WebKit browsers. Consider the following code:

1
2
3

 type="text" name="c" id="c" required placeholder="Enter Color">
 type="button"
  onclick="alert(document.getElementById('c').validity.valid)">check>

Clicking the Check button before filling in the field results in a “false” alert. That is correct as the required attribute indicates that the field must be filled out.

Now change the type from “text” to “color” like so:

1
2
3

 type="color" name="c" id="c" required placeholder="Enter Color">
 type="button"
  onclick="alert(document.getElementById('c').validity.valid)">check>

Again, click the Check button before filling in the field. Now the alert reads “true.” And that is a bug.

I tested the same thing in Opera 10.6 and Firefox 4 (beta) and both appropriately alert “false” when the color field is left empty.

HTML5 autofocus attribute messes up number types in Chrome

Nat Dunn — Thu, 09 Dec 2010 17:40:43 +0000

When one field in a form contains the autofocus attribute, Chrome’s number spinboxes break. Check out the following code:

 method="post" action="process.xyz">
	>
		 for="fullname">Your name:>
		 type="text" name="fullname" id="fullname" autofocus>
	>
	>
		 for="age">Your age:>
		 type="number" name="age" id="age" min="0" step="1">
	>
>

That autofocus attribute in the fullname field on line 4 messes up the age field’s spinbox in Chrome (testing on v. 8.0.552.215 on Windows 7). When you click on the up or down arrow, nothing happens until the field loses focus. To test this:

Click on the age field’s up arrow three times. Nothing happens.
Click somewhere else on the page to remove focus from the element. The value updates to 2.

Chrome registers all three clicks, but doesn’t update the value until focus is removed from the element.

Very strange. If you remove the autofocus attribute from the fullname element, everything works swimmingly.

So, I think the takeaway for now is that we cannot yet use autofocus in any forms that include number types.

Using Modernizr to Check for HTML5 Features

Nat Dunn — Thu, 09 Dec 2010 02:58:33 +0000

Modernizr

In our new HTML5 class, we use a great little JavaScript library called Modernizr. Modernizr to check the browser for feature support so you can write code like this:

if (Modernizr.xyzFeature) {
	//do this;
} else {
	//do something different
}

Here’s an example of how you can check for the new email input type:

if (Modernizr.inputtypes.email) {
	alert("woohoo!");	
} else {
	alert("boohoo!");	
}

And you can use the below to do a pretty complete HTML5 feature check of your browser of choice:


>
>
 charset="UTF-8">
>HTML5 Feature Check>
>
.true {
	color:#060;
}
.false {
	color:#f00;
}
.probably {
	color:#3c3;
}
.maybe {
	color:#960;
}
table {
	width:400px;
	margin:auto;
}
caption {
	font-weight:bold;
}
th,td {
	border:1px solid black;
	text-align:center;	
}
>
 src="modernizr.min.js" type="text/javascript">>
>
>
>
	>
	Your Browser's Feature Support according to  href="http://www.modernizr.com">Modernizr>
	>
	>
		>
			>Feature>
			>Your Browser Support>
		>
	>
	>
		>	
			var i,j,o,prop;
			for (i in Modernizr) {
				if (typeof(Modernizr[i])=="boolean") {
					document.write(" class='" + Modernizr[i] + "'>");
					document.write(">" + i + ">");	
					document.write(">" + Modernizr[i] + ">");	
					document.write(">");
				} else if (typeof(Modernizr[i])=="object") {
					document.write(" class='" + Modernizr[i] + "'>");
					document.write(">" + i + ">");
					document.write(">>");
					o = Modernizr[i];
					for (j in o) {
						document.write(" class='" + o[j] + "'>");
						document.write(">" + j + ">");	
						if (o[j] == '') {
							prop = 'unknown';	
						} else {
							prop = o[j];
						}
						document.write(">" + prop + ">");		
						document.write(">");
					}
					document.write(">>");	
					document.write(">");
				}
			}
		>
	>
>
>
>

It’s a great tool and, in most cases, it gets it right, but be careful with the date/time input types. According to Modernizr, Chrome doesn’t support them, but it does (although in an ugly way).

You can use the HTML5 tel Type Now

Nat Dunn — Wed, 08 Dec 2010 17:38:25 +0000

HTML5 comes with a bunch of new input types, including a tel type for entering telephone numbers:

 name="telephone" type="tel">

Currently, only Safari, Chrome and Firefox 4 (beta) support the tel. And even in these supporting browsers, you don’t really gain anything “out of the box” by using the tel input type. As telephone numbers can come in all different formats, there are no constraints on what can be entered here.

However, you could add your own custom validation to all telephone inputs and use the type=”tel” as a means of finding them.

But the biggest reason to use the tel type now is that user agents can provide a different/better means for filling out input fields based on their type. And the iPhone does just that for the tel type. Rather than giving you the standard keyboard, it provides this interface:

That makes things a lot easier and eventually they might even add a way to grab telephone numbers out of your contact list.

So, there is no harm in using the tel type now and there is at least something to gain.

We cover all the new input types in our new HTML5 training class.

Nesting CDATA Blocks

Nat Dunn — Sat, 20 Nov 2010 00:51:26 +0000

You can’t nest CDATA sections in XML. It’s not allowed. But Steve Claflin, our Java trainer extraordinaire and courseware author figured out a work around.

Nesting CDATA Sections – (workaround)

Imagine you’re starting with this code:

>
	code here
	
		escaped code here
	]]>
	more code here
>

You then want to wrap everything inside the foo tag within a CDATA section like this:

>
	code here
	
		escaped code here
	]]>
	more code here
]]>>

But you can’t do that, because the closing of the nested CDATA tag closes the outer CDATA tag leaving you with poorly formed XML.

Here’s the workaround Steve came up with:

>
	code here
	
		escaped code here
	]]]]>
	more code here
]]>>

The magic is in line 5 where he splits up the closing CDATA code (i.e., ]]>) using a close and open CDATA tag. This essentially does away with the nested CDATA tag, but keeps the original content whole. Very sweet!

Converting an HTML table to WordProcessingML with XSLT

Nat Dunn — Fri, 19 Nov 2010 21:06:49 +0000

This tutorial shows how to convert an HTML table to WordProcessingML using XSLT. I’ll start with a simple table with the same number of cells in each row. Then I’ll address cell merging, which makes everything much more complicated.

Simple Tables

A Simple HTML Table

>
>
	>My Caption>
	>
		>
			>Heading 1>
			>Heading 2>
			>Heading 3>
			>Heading 4>
		>
	>
	>
		>
			>data>
			>data>
			>data>
			>data>
		>
		>
			>data>
			>data>
			>data>
			>data>
		>
		>
			>data>
			>data>
			>data>
			>data>
		>
		>
			>data>
			>data>
			>data>
			>data>
		>
	>
>
>

The result with some styling to show borders:

A Simple WordProcessingML Table

>
>
	>
		 w:val="Caption"/>
		/>
	>
	>
		>My Caption>
	>
>
>
	>
		 w:val="TableGrid"/>
		 w:w="0" w:type="auto"/>
	>
	/>
	>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					 w:val="center"/>
				>
				>
					>
						/>
					>
					>Heading 1>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					 w:val="center"/>
				>
				>
					>
						/>
					>
					>Heading 2>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					 w:val="center"/>
				>
				>
					>
						/>
					>
					>Heading 3>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					 w:val="center"/>
				>
				>
					>
						/>
					>
					>Heading 4>
				>
			>
		>
	>
	>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
	>
	>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
	>
	>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
	>
	>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					>Data>
				>
			>
		>
	>
>
>

The result with some basic Word 2010 styling:

Comparing the HTML and WordProcessingML Tables

HTML

WordProcessingML

Description

, ,


	“Root” table element

Use before	Table caption

No equivalent	Row grouping elements
No equivalent		Table properties
No equivalent		To define the columns

	Table row
	,		Table cells
No equivalent		Table cell properties

The XSLT (No Merging)

The XSLT for converting the above HTML table to a WordProcessingML table is not that complicated. Here it is:

 version="1.0" 
	xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
	 method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
	 match="body">
		>
			/>
		>
	>
	 match="table">
		
		>
			>
				 w:val="Caption"/>
				/>
			>
			>
				> select="caption"/>>
			>
		>
		
		>
			>
				 w:val="TableGrid"/>
				 w:w="0" w:type="auto"/>
			>
			/>
			 select="*[name() != 'caption']"/>
		>
	>
	 match="thead | tbody | tfoot">
		
		/>
	>
	 match="tr">
		>
			 />
		>
	>
	 match="th">
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					 w:val="center"/>
				>
				>
					>
						/>
					>
					> select="."/>>
				>
			>
		>
	>
	 match="td">
		>
			>
				 w:w="0" w:type="auto"/>
			>
			>
				>
					> select="."/>>
				>
			>
		>
	>
>

Things to note:

The caption in HTML is nested within the table, while in WordProcessingML the caption comes before the start of the table. So we need to pull the caption out of the table in the table template (lines 12 to 20) and ignore the caption element when applying further templates (line 28).
In WordProcessingML, table header cells are handled with basic formatting tags (e.g, (for centering) and (for bold).
The element would normally have nested elements to define the width of the table columns. However, WordProcessingML allows the element to be empty and Microsoft Word 2010 is able to interpret the number of columns from the table itself and auto adjust it for the width of the content (note the elements nested within the elements).

Merging Cells

HTML and WordProcessingML use very different models for merging cells so cell merging makes the XSLT much more complicated.

HTML Model for Merging Cells

In HTML, cell merging is handled with the colspan and rowspan attributes, which can be applied to th and td elements.

An HTML Table with Cell Merging

>
	>
		>My Caption>
		>
			>
				>Heading 1>
				>Heading 2>
				>Heading 3>
				>Heading 4>
			>
		>
		>
			>
				 rowspan="4">Long column>
				 colspan="3">Long row top>
			>
			>
				>data>
				>data>
				>data>
			>
			>
				>data>
				 colspan="2">2 cols merged>
			>
			>
				 colspan="3">Long row bottom>
			>
		>
	>
>

The result with some styling to show borders:

A WordProcessingML Table with Cell Merging

Note the vMerge and gridSpan tags.

>
	>
		>
			 w:val="Caption"/>
			/>
		>
		>
			>My Caption>
		>
	>
	>
		>
			 w:val="TableGrid"/>
			 w:w="0" w:type="auto"/>
		>
		/>
		>
			>
				>
					 w:w="0" w:type="auto"/>
				>
				>
					>
						 w:val="center"/>
						>
							/>
						>
					>
					>
						>
							/>
						>
						>Heading 1>
					>
				>
			>
			>
				>
					 w:w="0" w:type="auto"/>
				>
				>
					>
						 w:val="center"/>
						>
							/>
						>
					>
					>
						>
							/>
						>
						>Heading 2>
					>
				>
			>
			>
				>
					 w:w="0" w:type="auto"/>
				>
				>
					>
						 w:val="center"/>
						>
							/>
						>
					>
					>
						>
							/>
						>
						>Heading 3>
					>
				>
			>
			>
				>
					 w:w="0" w:type="auto"/>
				>
				>
					>
						 w:val="center"/>
						>
							/>
						>
					>
					>
						>
							/>
						>
						>Heading 4>
					>
				>
			>
		>
		>
			>
				>
					 w:w="0" w:type="auto"/>
					 w:val="restart"/>
				>
				>
					>
						>Long column>
					>
				>
			>
			>
				>
					 w:w="0" w:type="auto"/>
					 w:val="3"/>
				>
				>
					>
						>Long row top>
					>
				>
			>
		>
		>
			>
				>
					 w:w="0" w:type="auto"/>
					/>
				>
				/>
			>
			>
				>
					 w:w="0" w:type="auto"/>
				>
				>
					>
						>Data>
					>
				>
			>
			>
				>
					 w:w="0" w:type="auto"/>
				>
				>
					>
						>Data>
					>
				>
			>
			>
				>
					 w:w="0" w:type="auto"/>
				>
				>
					>
						>Data>
					>
				>
			>
		>
		>
			>
				>
					 w:w="0" w:type="auto"/>
					/>
				>
				/>
			>
			>
				>
					 w:w="0" w:type="auto"/>
				>
				>
					>
						>Data>
					>
				>
			>
			>
				>
					 w:w="0" w:type="auto"/>
					 w:val="2"/>
				>
				>
					>
						>2 cols merged>
					>
				>
			>
		>
		>
			>
				>
					 w:w="0" w:type="auto"/>
					/>
				>
				/>
			>
			>
				>
					 w:w="0" w:type="auto"/>
					 w:val="3"/>
				>
				>
					>
						>Long row bottom>
					>
				>
			>
		>
	>
>

The result with some basic Word 2010 styling:

The XSLT (Cell Merging)

Dealing with horizontal merging (merging across columns) is pretty straightforward. Where HTML uses the colspan attribute, WordProcessingML uses a gridSpan tag with a val attribute to specify the number of merged columns. So…

would be (nested within the element)

To handle this in the XSLT, we add the following to our td and th templates:

1
2
3

 test="@colspan">
	 w:val="{@colspan}"/>
>

The Challenge

The challenge of using XSLT to convert an HTML table with merged cells to WordProcessingML is that the models for vertical cell merging are so different.

HTML uses the rowspan attribute, which is analogous to the colspan attribute.

WordProcessingML , however, uses a element, which must be included in every cell that is included in the vertical merge. The element in the topmost cell (w:tc) must include a w:val attribute with a value of “restart”. The subsequent elements do not require a w:val attribute, but if they have one, the value should be “continue”.

So in WordProcessingML, each row has the same number of child cell elements. In HTML, however, there are no elements in subsequent rows that match up with the cell containing the rowspan attribute. The whole merged cell is handled with a single element.

That leaves us with the challenge of creating something from nothing. Specifically, we need to determine for each row (after the first):

Does the current cell contain a rowspan attribute?
Do any of the previous rows contain a cell with a rowspan attribute?
If so, does the rowspan reach down to the current row?
If so, in which position should we insert a cell?

The first problem is easy enough. We just add this bit of code to the td and th templates:

1
2
3

 test="@rowspan">
	 w:val="restart"/>
>

Since we’ll need to add a lot of logic to the th and td templates, let’s merge them like this (note lines 14-16 and 20-22):

 match="th|td">
	>
		>
			 w:w="0" w:type="auto"/>
			 test="@colspan">
				 w:val="{@colspan}"/>
			>
			 test="@rowspan">
				 w:val="restart"/>
			>
		>
		>
			>
				 test="name()='th'">
					 w:val="center"/>
				>
			>
			>
				>
					 test="name()='th'">
						/>
					>
				>
				> select="."/>>
			>
		>
	>
>

Questions 2-4 above are tougher to answer. I took the approach of creating a pseudo-lookup-table to indicate where we need to insert the vMerge cells. The pseudo-lookup-table (vMergeLookUp) is a string formatted as follows:

|cellPos:rowPos||cellPos:rowPos||cellPos:rowPos||cellPos:rowPos|

The idea is that we should be able to look at any cell position in the table grid and determine from the vMergeLookUp whether we need to insert a vMerge cell in that position.

To illustrate, let’s look at the following relatively simple table:

>
	>
		>
			 rowspan="3">data>
			>data>
			 rowspan="3">data>
		>
		>
			>data>
		>
		>
			>data>
		>
	>
>

The XSLT processor will hit five td elements. Our code needs to tell it to insert four vMerge cells: one before and one after each of the lone td elements in the second and third rows. So our vMergeLookUp string would look like this:

|1:2||1:3||3:2||3:3|

I created the vMergeLookUp using a called template, which makes use of another called template. The code is a bit complex as it involves recursively looking through preceding siblings for colspan attributes and adding their values to interpret the position at which we need to insert a vMerge cell. I’m not going to go through it here (phew, that’s a relief!).

I first create the vMergeLookUp at the thead/tbody/tfoot level and then pass it on to other templates using xsl:with-param. If your HTML table doesn’t use these row grouping elements, you can move the code to the table template.

I make use of the vMergeLookUp in two places:

In the tr template, I use it to see if we need to insert a vMerge cell before the first cell.
In the td | th template, I use it to see if we need to insert a vMerge cell after the current cell.

Here’s the code for the tr template (note lines 5-13):

 match="tr">
	 name="vMergeLookUp"/>
	>
		
		 test="contains($vMergeLookUp,concat('|1:',position(),'|'))">
			>
				>
					 w:w="0" w:type="auto"/>
					/>
				>
				/>
			>
		>
		>
			 name="vMergeLookUp" select="$vMergeLookUp"/>
			 name="rowPos" select="position()"/>
		>
	>
>

And here’s the code for the td | th template (note lines 2-10 and 39-47):

 match="th|td">
	 name="vMergeLookUp"/>
	 name="rowPos"/>
	 name="cellPos">
		 name="getInterpretedCellPos">
			 name="cell" select="."/>
			 name="pos" select="position()"/>
		>
	>
	 name="nextCellPos" select="$cellPos+1"/>
	>
		>
			 w:w="0" w:type="auto"/>
			 test="@colspan">
				 w:val="{@colspan}"/>
			>
			 test="@rowspan">
				 w:val="restart"/>
			>
		>
		>
			>
				 test="name()='th'">
					 w:val="center"/>
				>
			>
			>
				>
					 test="name()='th'">
						/>
					>
				>
				>
					 select="."/>
				>
			>
		>
	>
	 test="contains($vMergeLookUp,concat('|',$nextCellPos,':',$rowPos,'|'))">
		>
			>
				 w:w="0" w:type="auto"/>
				/>
			>
			/>
		>
	>
>

Here is the complete code, in case you are dealing with this same issue (which you must be or you never would have made it this far):

 version="1.0" encoding="UTF-8"?>
 version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:w="http://schemas.openxmlformats.org/wordprocessingml/2006/main">
	 method="xml" version="1.0" encoding="UTF-8" indent="yes"/>
	 match="body">
		>
			/>
		>
	>
	 match="table">
		
		>
			>
				 w:val="Caption"/>
				/>
			>
			>
				>
					 select="caption"/>
				>
			>
		>
		
		>
			>
				 w:val="TableGrid"/>
				 w:w="0" w:type="auto"/>
			>
			/>
			 select="*[name() != 'caption']"/>
		>
	>
	 match="thead | tbody | tfoot">
		 name="vMergeLookUp">
			 name="createVMergeLookUp"/>
		>
		>
			 select="$vMergeLookUp"/>
		>
		>
			 name="vMergeLookUp" select="$vMergeLookUp"/>
		>
	>
	 match="tr">
		 name="vMergeLookUp"/>
		>
			
			 test="contains($vMergeLookUp,concat('|1:',position(),'|'))">
				>
					>
						 w:w="0" w:type="auto"/>
						/>
					>
					/>
				>
			>
			>
				 name="vMergeLookUp" select="$vMergeLookUp"/>
				 name="rowPos" select="position()"/>
			>
		>
	>
	 match="th|td">
		 name="vMergeLookUp"/>
		 name="rowPos"/>
		 name="cellPos">
			 name="getInterpretedCellPos">
				 name="cell" select="."/>
				 name="pos" select="position()"/>
			>
		>
		 name="nextCellPos" select="$cellPos+1"/>
		>
			>
				 w:w="0" w:type="auto"/>
				 test="@colspan">
					 w:val="{@colspan}"/>
				>
				 test="@rowspan">
					 w:val="restart"/>
				>
			>
			>
				>
					 test="name()='th'">
						 w:val="center"/>
					>
				>
				>
					>
						 test="name()='th'">
							/>
						>
					>
					>
						 select="."/>
					>
				>
			>
		>
		 test="contains($vMergeLookUp,concat('|',$nextCellPos,':',$rowPos,'|'))">
			>
				>
					 w:w="0" w:type="auto"/>
					/>
				>
				/>
			>
		>
	>
	 name="createVMergeLookUp">
		
		 select=".//tr">
			 name="rowPos" select="position()"/>
			 select="td|th">
				 name="cellPos">
					 name="getInterpretedCellPos">
						 name="cell" select="."/>
						 name="pos" select="position()"/>
					>
				>
				 test="@rowspan">
					 name="insertCellLocation">
						 name="cellPos" select="$cellPos"/>
						 name="rowPos" select="$rowPos + 1"/>
						 name="lastRow" select="$rowPos + @rowspan - 1"/>
					>
				>
			>
		>
	>
	 name="insertCellLocation">
		 name="cellPos"/>
		 name="rowPos"/>
		 name="lastRow"/>
		>|>
		 select="$cellPos"/>
		>:>
		 select="$rowPos"/>
		>|>
		 test="$rowPos < $lastRow">
			 name="insertCellLocation">
				 name="cellPos" select="$cellPos"/>
				 name="rowPos" select="$rowPos + 1"/>
				 name="lastRow" select="$lastRow"/>
			>
		>
	>
	 name="getInterpretedCellPos">
		 name="cell"/>
		 name="pos"/>
		>
			 test="not($cell/preceding-sibling::*/@colspan) and not(@colspan)">
				 select="$pos"/>
			>
			 test="not($cell/preceding-sibling::*/@colspan)">
				 select="$pos - 1 + @colspan"/>
			>
			>
				 name="getInterpretedCellPos">
					 name="cell" select="$cell/preceding-sibling::*[@colspan][1]"/>
					 name="pos">
						 select="$pos - 1 + $cell/preceding-sibling::*[@colspan][1]/@colspan"/>
					>
				>
			>
		>
	>
>

I had a tough time with this one. If anyone has a simpler way of tackling this problem, I’d love to hear about it.

Using XSLT to Break out a Nested Inline Element

Nat Dunn — Fri, 12 Nov 2010 06:43:32 +0000

Webucator uses an XHTML-based courseware system. At publishing time, we compile all the lessons, written in XHTML, into a single large XML file and then we use XSLT/XSL-FO to create a PDF.

We are now planning to submit several of our courses to the Microsoft Courseware Library. To do so, we need to get them into Microsoft Word. It would be a ton of work to convert them manually and then we would have to keep both version in sync.

So, I dove into WordProcessingML. I’ve looked at it several times before, but always walked away after an hour or two of frustration. This time, I pushed further as we now have a real incentive to get it working. It’s actually kind of cool. Maybe I’ll write a WordProcessingML course someday? Interested?

Anyway, right now I’m struggling with an XSLT problem that I hope someone might be able to help me with.

I’m starting with the following code from my source XML:

>
	Some text and inline elements.
	/>
	Some more text and inline elements
>

And here’s my desired output:

>
	>
		>Some text and inline elements.>
	>
>
 >
	>
		 w:val="center"/>
	>
 	>
		>
		...
		>
	>
 >
 >
 	>
 		>Some more text and inline elements.>
 	>
>

The issue is that the image needs to appear centered on a block by itself. I know there’s WordProcessingML markup for doing that within a paragraph, but I haven’t been able to get that to behave correctly even while working in Word 2010 directly.

In XSL-FO, this isn’t a problem, because you can simply nest one fo:block in another fo:block, but in WordProcessingML, that’s not allowed.

The above “Desired Output” markup works correctly in Word (meaning it displays like I want it to), but it’s an XSLT challenge.

Essentially, what I need is this:

 match="img">
	>
	>
		>
			 w:val="center"/>
		>
		>
			>
			...
			>
		>
	>
	>
>

But, of course, that’s not well-formed XML, so it chokes.

Anybody know of a solution for this sort of problem?

Dreamweaver CS5 with PHP and MySQL

Connie — Fri, 05 Nov 2010 19:19:06 +0000

Have you ever wanted to use Dreamweaver CS5 to run PHP pages? What about displaying data in a PHP page from a MySQL database? Well, it is a lot easier than you might think! I have written a series of 5 blogs to take you step-by-step through the connection and testing process. To achieve total success, go through the blogs in the order listed below.

How to Use Dreamweaver CS5 with PHP and MySQL

PHP Installation with XAMPP. This blog takes you through the process of installing XAMPP. XAMPP is an application that combines the downloading of phpMyAdmin, MySQL, and the required files to run PHP pages.
MySQL Configuration for Windows. This blog will help you configure MySQL and phpMyAdmin, so that you can administer the database.
Dreamweaver CS5 and PHP Connectivity Test. This blogs walks you through the process of defining a site in Dreamweaver CS5. It also gives you everything you need to run a test page to ensure that everything is running smoothly.
Dreamweaver CS5 and Database Connectivity. This blog establishes the connection to the database and teaches you to retrieve a recordset of the data from a database table to display on your PHP page.
Using Dreamweaver CS5 to Enter Data into a MySQL Database. The final blog ties everything together! We use a wizard to create a form that will accept data from the end-user and insert it into the database table to which you connected in blog four. Then, we refresh the page and see if our new data appears! I bet you it will!

I know you are probably thinking that this process will take a long time. Not at all! Blogs 1-3 will take about 30 minutes, depending on your Internet connection. Blogs 4-5, getting data in and out of a database, I have perfected to take 8 minutes flat!

If you’d like to learn more, please consider our PHP training, MySQL training and Dreamweaver training.

Using Dreamweaver CS5 to Enter Data into a MySQL Database

Connie — Fri, 29 Oct 2010 18:53:58 +0000

Getting data into a MySQL database is actually easy! It is the connectivity that is confusing. I have written a few blogs on the topic: PHP Installation through XAMPP, MySQL Configuration, and Dreamweaver CS5 and PHP Connectivity test. Those blogs will take you step-by-step through the connection process. The fun part is creating a form and submitting data into your database. To do this, you must create a page that inserts the data using a form, and then displays a record set of the same table where the data was inserted. It is the whole round-trip! Let’s get started:

Entering Data into the Database

Make sure you have your connectivity set up. (See the blog links above.)
You must have the connectivity done and the site defined in Dreamweaver.
Open the XAMPP console and start MySQL and Apache.
Create a new PHP page in the Dreamweaver site you have defined. Save it with no spaces in the name.
Click on Insert > Data Objects > Insert Record > Record Insertion Form Wizard.
Choose your Connection from the dropdown.
Choose the table that you want to insert the data into.
In the “After inserting, go to:” text field, type in the name of the page that will open automatically after the end user submits the form data. For example, it could go to a page that displays “Thanks for signing up for our Newsletter.” It can be a simple page named “thankyou.htm”.
Click OK.
Save the page, run it, and insert some text into the fields.
Click the Insert Record button.
Hopefully, you will now see your “thankyou.htm” page. Remember, you have to create the “ThankYou” page!

Now, let’s create a PHP page to display the data you just entered.

Create a new PHP page.
Click on the Bindings tab in the upper right corner.
Click the little ‘+‘ and choose Recordset (Query).
Give the recordset a name, like rsMyRecords.
Select the Connection.
Select the table from the database that you want to get data from.
Select the Test button on the left side. If the connection is successful, you will see all of the rows from that table.
Click OK.
Click the expander button next to the record. Then, set and drag a field from your database over to your new PHP page.
Save the page, run the page, and poof! You are displaying data from a database!

If you are interested in learning more, check out our PHP training, MySQL training and Dreamweaver training.

Dreamweaver CS5 and Database Connectivity

Connie — Wed, 27 Oct 2010 16:38:02 +0000

After you have successfully installed PHP and MySQL, it is time to open Dreamweaver CS5 and connect to MySQL. Make sure that every window is closed except Dreamweaver CS5. When inserting data into a database, or retrieving data from a database, it is best to have that database application closed.

How to Connect Dreamweaver CS5 to MySQL

Define a site in Dreamweaver. Once you have a site defined, create a new PHP page and give it a name, without spaces.
On the Menu, click Window > Databases, then click the little ‘+‘ and select MySQL Connection.
Give the Connection a name, such as connMyTest.
For the MySQL Server, type in localhost.
For the Username, type in root.
For the password, type in the password you created earlier.
Click the Select button and choose the database you want to connect to.
Click the Test button to confirm your connection. You should now see the connection in the databases window with an expander ‘+’.
Click on the Bindings tab next to Databases.
Click the little ‘+‘, and then select Recordset (Query).
Give the recordset a name, like rsMyRecords.
Select the Connection you created earlier.
Select the table from the database that you want to get data from.
Select the Test button on the left side. If the connection is successful, you will see all of the rows from that table.
Click ‘Ok‘.
Click the expander button next to the record set and drag a field from your database over to your new PHP page.
Save the page, run the page, and poof! You are displaying data from a database!

If you are interested in learning more, check out our PHP training, MySQL training and Dreamweaver training.

Creating PHP pages using Dreamweaver CS5: Part Three

Connie — Sun, 24 Oct 2010 18:37:44 +0000

Once you have PHP installed, it is time to test the connectivity in Dreamweaver CS5. Follow the easy steps below to display the date dynamically using PHP. This tutorial assumes you have downloaded XAMPP. If you don’t have it installed, please see the first blog in this series, which covers PHP Installation through XAMPP.

Dreamweaver CS5 and PHP Connectivity Test

Make sure the XAMPP Control Panel is open. If it is not open, you should have an icon on your desktop. Double-click on the icon to open the Control Panel.
Start MySQL by clicking the Start button. Then, start Apache by clicking the Start button.
Minimize the Control Panel.
Now, we need to tell Dreamweaver where your testing server is, as well as the URL to use. Create a folder with any name, like myNewSite, and put it in this location: C:\xampp\htdocs.
Open Dreamweaver and select Site > New Site.
Give your site a name, like My PHP Site.
Click the folder icon to the right of Local Site Folder and browse to your testing servers document root: C:\xampp\htdocs\myNewSite.
Click > Open > Select > Save.
- NOTE: All of your webpages for this PHP site need to be in a folder in C:\xampp\htdocs from now on.
Select Servers on the left side.
Click the ‘+’ to add a new server.
Make sure you are on the Basic button and select Local/Network from the Connect Using List.
Give the server a name, like Local PHP Server.
Set the server folder to your local folder, C:\xampp\htdocs\myNewSite.
For the URL, type http://localhost/myNewSite.
Select the Advanced button.
In the testing server drop-down at the bottom of the screen, choose PHP MySQL and click Save.
Click the Testing checkbox as well as the Remote checkbox, and then click Save.
In Dreamweaver, create a new PHP page.
In the code window, within the body tags, type this line of code:
- The time on your local machine is
  (That is the letter ‘l’ in the line of code, not the number ’1′).
Save the page and run it. If you see Sunday, or whatever day it is, displayed in your browser, then you have done it!

This concludes our three-part series on creating PHP pages using Dreamweaver CS5. To learn more about web design, consider our numerous options for web design training.

HTML5 Feature Check with Modernizr

Nat Dunn — Sat, 23 Oct 2010 01:26:32 +0000

Modernizr is a relatively small JavaScript file that checks the user’s browser for HTML5 feature support. The name is a bit of a misnomer as it doesn’t actually modernize the browser. It doesn’t add any missing features, it just gives developers an easy way of figuring out if the browser supports a given feature, so they can write conditional code like this:

if (Modernizr.canvas) {
    //use canvas to create awesome drawing application
} else {
    alert("Go get yourself a browser that supports canvas.");
}

If you’re curious what HTML5 features your browser supports, check out this HTML5 Feature Check page, which I built using Modernizr.

Creating PHP Pages using Dreamweaver CS5: Part Two

Connie — Thu, 21 Oct 2010 15:55:21 +0000

In order to use PHP and MySQL with Dreamweaver CS5, you need to download PHP, MySQL, and you should also download phpMyAdmin. This is done easily by downloading XAMPP, which will download all three applications for you! See my other blog, “PHP Installation through XAMPP,” for detailed instructions on downloading XAMPP. Once downloaded, open the XAMPP console and start MySQL, and then start XAMPP. Now, we can configure MySQL.

How to Configure MySQL

Here are the steps:

Go to http://localhost.
A window should open in the browser with an orange menu on the left side. Click ‘Security‘ on the left and choose a language. Scroll down and click on this link: http://localhost/security/xamppsecurity.php.
The window that now displays allows you to choose a password. Choose something easy to remember. Leave all of the defaults as they are and click the Password Changing button.
Go back to the Welcome window at http://localhost and click the phpMyAdmin link in the lower left corner.
Put in the password you created. The username is ‘root‘.
If you logged in correctly, you should see the main phpMyAdmin window. Within this window, you can create a database to work with for the time being. I suggest creating one table for now and entering a few records for testing purposes.

The next step is to test the connectivity of Dreamweaver CS5 and PHP. I explain how to do this in part three of this series.

Creating PHP Pages using Dreamweaver CS5: Part One

Connie — Wed, 20 Oct 2010 01:45:04 +0000

In a series of three blogs, I will take you through the installation and creation of PHP pages using Dreamweaver CS5, PHP, and MySQL. The following steps will guide you in the installation process of PHP.

If you want to run PHP pages, you need a web server. Eventually, you will want to run data-driven pages, which means you need MySQL (you can use other databases too, but PHP and MySQL go well together). You also need a user-interface for MySQL – a good free web-based one is phpMyAdmin. Do you have to install all three separately? No. Just download XAMPP.

Before you install XAMPP, make sure you are logged on as the administrator in Windows and make sure that you have turned off IIS, if you have it installed.

How to install XAMPP

Make sure all applications on your computer are closed.
Follow this link: http://www.apachefriends.org/en/xampp-windows.html#641 and download XAMPP for Windows.
Make sure you download the Self-extracting RAR archive from the Basic package.
Double-click the .exe file you downloaded. When you get the dialog box about where to install it, choose the default, which is C:\xampp. This folder will be very important later.
When completely downloaded, a Windows Command Prompt window opens and asks you a few questions. Just answer “yes” or “no,” and press Enter.
You will now see a message that tells you that XAMPP is ready. A screen comes up and asks you to enter a number, enter number “1” and press Enter. This will start the XAMPP Control Panel.
Close the Command Prompt Window.

Now, you are ready to configure MySQL! Move on to the next blog in the series: Configuring MySQL.

List of New HTML5 Tags

Nat Dunn — Thu, 14 Oct 2010 04:54:39 +0000

One great thing about HTML compared to “programming languages” is that it is finite. There is probably someone out there who, just for the fun of it, memorized all the HTML tags and can rattle them off in alphabetical order or according to the number of letters in the tag. HTML5 adds some great features to HTML and standardizes some others that were de facto standardized already. There is a lot of new stuff to learn. But, luckily for our friend who memorized all the tags, HTML5 doesn’t pose such a threat. There are only 28 new tags, which are listed and briefly described below:

#	Tag	Description
1		For a standalone article on a page. Articles can be nested within other articles; for example, a blog post would be contained in tags and each comment would be contained within a nested tag.
2		For content contained in an aside. Often used for navigation elements or for a list of articles or categories (e.g., in a blog).
3		For embedding audio files.
4		For creating graphics and graphic applications. (see this cool example of pong created with )
5		For command buttons similar to what you might see in the Microsoft Office 2010 ribbon. must be nested in .
6		For a dropdown list providing built-in functionality similar to a JavaScript autocomplete boxes.
7		For expandable (usually initially hidden) content to provide more information about an element.
8		For backwards compatibility with the non-standard (but well supported) tag in HTML 4.
9		For captions on images. (In HTML4, there was no way to semantically associate a caption with an image.
10		For wrapping embedded content (e.g, an image) with a .
11		For the footer of a page or a section.
12		For the header of a page or a section.
13		For grouping … tags on a page. For example, the title and subtitle of a page could be an and grouped in an tag.
14		For a generated key in a form
15		For showing marked (or highlighted) text. Unlike or , doesn’t give the text any special meaning. The best example is marking a word or phrase that a user has searched on within the search results.
16		For a measurement within a set range.
17		For holding a group of navigation links.
18		For holding output (e.g., produced by a script).
19		For a progress indicator (e.g., for a loading).
20		Used within tags to tell browsers that cannot render the East Asia characters properly what extra characters (usually parentheses) to display.
21		Used within tags to show how to pronounce East Asia characters.
22		For ruby annotations. (See specification for examples.)
23		For creating a on the page. This helps the browser (user agent) determine the page outline.
24		For indicating media sources within and .
25		For the header of a element. The would show by default.
26		For holding a machine-readable date and/or time while displaying a friendly date and/or time.
27		For embedding video files.
28		An opportunity to insert a line break within a word. (e.g, supercalifragilisticexpialidocious)

A note on the

tag. It was deprecated in HTML4, but is brought back and redefined in HTML5 as a container for controls.

Learn how to use these tags to build great HTML5 applications in our HTML5 training classes.

XHTML, HTML5 and Freedom from Choice

Nat Dunn — Wed, 06 Oct 2010 13:55:31 +0000

I used to work in downtown Boston where you have a lot of lunch options. But every day, my colleagues and I would go to the same pizza place for lunch. That way, we never had to decide what we felt like doing. We called it “freedom from choice.”

One of the things I love about XHTML is it provides that same freedom from choice. There is (usually) only one way to do things. One of the original design goals of XML was:

The number of optional features in XML is to be kept to the absolute minimum, ideally zero.

Why? To make it easy to build applications that work with XML. But a nice side effect was that it provided freedom from choice. And with this freedom comes the knowledge that you can look at any valid XHTML document and know what to expect. No need for a style guide to tell authors when to and not to put quotation marks around their attributes or to write in lowercase or uppercase letters.

HTML5, on the other hand, takes a much more flexible approach. It is designed with the idea that authors have been writing HTML in many different ways over the years and there are zillions of web pages out there that don’t adhere to the strict XHTML standards. Rather than render those page useless, let’s just relax the standard a bit (well, a whole lot). So, among the variations of acceptable tag formatting are:

The last one makes me cringe, but it’ll work.

At Webucator, we’re in the process of writing HTML5 training courseware and we have to decide how to approach this new flexibility. I’m currently reading Introducing HTML5 (Voices That Matter) by Bruce Lawson and Remy Sharp. Bruce and Remy have different styles of writing HTML5. Essentially, Remy likes the XHTML approach and Bruce prefers to make the code as terse as possible, minimizing attributes and avoiding unnecessary quotation marks and self -closing forward slashes.

Early in the book, the authors give this advice: “Pick the style that works for you and stick to it.” They point out that this is especially important when working with a team. I agree with this advice and when writing our courseware, we plan to make and stick to some basic rules. But which rules to choose?

I really really really want to take the XHTML approach. I have been coding that way for about 10 years and it is hard to imagine dropping all those pretty self-closing forward slashes. And when I started this article, I was ready to say that that is the approach we will be using in our HTML5 courseware. But (much to my chagrin) I cannot find any good reason to use XHTML5.

There is a mildly interesting discussion on XHTML5 vs HTML5 that gets into the MIME type issue and IE8 support and what it means to be well-formed or malformed. The discussion is long and drawn out and probably not worth reading (but the article preceding the comments is a quick and good read). The whole thing seems pretty simple to me. XHTML can be very useful in certain use cases, but unless you are planning for those use cases, there is no reason to write all your HTML5 pages as XHTML. You would just be doing it for the sake of doing it.

So, at this point, I am thinking we will follow these guidelines for writing HTML5:

Write tags and attributes in all lowercase letters (even event handlers like onclick).
Do not use short-cut close tags for void/empty elements.
Put all attribute values in quotes. Why? Because attribute values that have spaces in them have to be in quotes. And I do not like the idea of having some attributes in quotes and some not.
Minimize attributes when you can.

Simple enough. I may change my mind though. J

Form Methods: GET versus POST

Connie — Mon, 27 Sep 2010 18:45:47 +0000

When creating a webpage with a form, you have two methods to use when submitting data:

The GET Method
The POST Method

We will look at the reasons for using each of these methods.

Using the GET Method to Submit Data

When using the GET Method, data is sent to the server in name-value pairs as part of the query string. I am sure you have seen this before. Have you ever been to a site where you used a form to search for something, and the next thing you know, the URL is a mile long? Well, next time, take a look at that URL. Do you see the name-value pairs in there? That is the GET Method hard at work!

GET Method Advantages

The GET Method is most commonly used by search engines.
The GET Method allows you to bookmark the page that is returned after the form is submitted.

GET Method Disadvantages

The GET Method should not be used with sensitive data. Remember, the data will be seen in the URL, and if the user sees their Social Security number, credit card number, or other sensitive data in the URL, it will scare them away! It scares me just thinking about it!

Using the POST Method to Submit Data

Use the POST Method when you want to hide your data. For example, if the form modifies a database, or you are logging in using a username and password, then the POST Method is the choice for you. When using the POST Method, the name-value pairs are not appended to the URL. So, any data that gets passed from the form will not be visible.

POST Method Advantages

The POST Method will not display the name-value pairs in the URL, so this is great for passing sensitive data.
The POST Method allows uploading of files, such as images or documents.

POST Method Disadvantages

The POST Method will not allow you to bookmark the page.

We offer web design training on this topic and other web design topics. Visit our website to see a full listing of instructor-led online courses.

Using a Regular Expression to create a simple HTML list

Nat Dunn — Mon, 09 Aug 2010 18:23:02 +0000

I often find myself creating HTML lists from a list of items in a text format. In TextPad (or any other tool that supports regular expressions) you can do this very quickly using a simple regular expression.

Start with a list.
Using the Replace dialog (F8 in TextPad), replace \n with

.
- \n is a hard return. This puts a close
- at the beginning of every line.
So you end up with this:
Then you just cut and paste that extra open
tag at the end to the beginning and add your parent

Using JavaScript to Blur a TextBox

Connie — Wed, 04 Aug 2010 14:24:16 +0000

How can you keep a user from changing the contents of a textbox? It is easy to do using HTML Event Handlers. Try the code below. It works like this…

Click the button and type in a color. We’ll use green. Then, click “ok”. The background color will turn green and the word “green” will display itself in the FavColor text box. Try to change the contents of the FavColor text box and you can’t! That is because of the HTML Event Handler: onfocus = “this.blur();”

Example Using blur()

>
>
>Blurring a TextBox>
 type="text/javascript">
function getMyColor() {
  var myColor = prompt("What is your favorite Color?", "");
  var myTextBox = document.MyForm.FavColor;
  document.bgColor = myColor;
  myTextBox.value = myColor;
}
>
>
>
>Example Using Blur>
 name="MyForm">
   type="button" value="Choose A Color" onclick="getMyColor();">
  My Favorite Color is:
   type="text" name="FavColor" size="15" onfocus="this.blur();">
>
>
>

And for you geeky rebels out there:

HTML Event Handlers and JavaScript Event Listeners

Connie — Tue, 03 Aug 2010 00:52:30 +0000

HTML Event Handlers provide a gateway from HTML to JavaScript. Event Handlers are HTML attributes that force an element to “listen” for a specific event to occur. HTML Event Handlers all begin with the word “on”. Here are a few:

onload
onclick
onfocus
onblur
onmouseover
onmouseout

These event listeners can also be created via JavaScript:

window.onload…
element.onclick…
element.onfocus…
element.onblur…
element.onmouseover…
element.onmouseout…

Here is are a couple of examples of how you can use the HTML onload event handler and the document.onload event listener to accomplish the same thing: placing focus on a form element when the page loads:

>
>
>Applying Focus to a Form Element>
 type="text/javascript">
	function applyFocus() {
		document.getElementById('searchbox').focus();
	}
	window.onload=applyFocus;
>
>
 onload="document.getElementById('searchbox').focus();">
 method="post" action="search.php">
	 type="text" name="searchbox" id="searchbox" />
	 type="submit" value="Search" />
>
>
>

The JavaScript on lines 5-8 does the exactly the same thing as the onload event handler in the tag on line 11. You would only need one or the other.

Note that HTML Event Handlers are NOT case sensitive. Why? Because they are HTML, not JavaScript. Some programs, such as Dreamweaver, will insert HTML Event Handlers in Camel Case (e.g, onLoad), and that is ok. However, the same is not true for JavaScript event listeners. They are case sensitive.

Event handlers are covered in our Introduction to JavaScript class.

Creating a Rollover Effect with CSS

Sean — Tue, 27 Jul 2010 02:40:14 +0000

I recently discovered there’s yet another way to create rollover images in Dreamweaver. This method actually doesn’t even require any knowledge of JavaScript, even minimally. You only need to know basic CSS. In fact, it doesn’t even require images.

How to create a rollover effect in CSS

If you remember how rollover images work, they are essentially two images that swap with each other depending on whether the cursor is hovering over them. We can create a similar effect in CSS through the use of the tag’s pseudo-classes.

A link can have the following pseudo-classes:

a:hover - indicates the mouse pointer is over the link
a:visited - indicates the link has been visited
a:active - indicates the link is active (e.g, the user has clicked down on it)

By using traditional CSS properties “colors” and “text-decoration” in the link tag’s pseudo-classes (shown below), we can create the same visual effect of rollover images.

 type="text/css">
 a {
  color:#000066;
  text-decoration:none;
  cursor:pointer;
 }
 
 a:visited {
  color:#336699;
 }
 
 a:hover {
  color:#ff6600;
  text-decoration:underline;
 }
 
 a:active {
  color:#ffcc99;
  cursor:wait;
 }
>
>CSS Links>
 href="http://www.washingtonpost.com">WashingtonPost.com>
 href="http://www.webucator.com">Webucator>
 href="http://www.google.com">Google>

Note that order matters. If a:active precedes a:hover, the effects in a:hover will take precedence. So, in this example, you would not see the color change when the user clicks down on a link.

By using even more properties, such as padding, margin, and border, it is possible to create links that look like buttons, something you would normally need images for. The following example illustrates this.

 type="text/css">
div {
 width:300px;
}
 
a {
 display:block;
 background-color: #eaf1dd;
 color:#060;
 text-decoration:none;
 font-family:Verdana, Geneva, sans-serif;
 font-size:1.5em;
 padding: 6px 4px;
 margin: 4px;
 border-right: 2px solid #999999;
 border-bottom: 2px solid #999999;
 border-top-width: 0px;
 border-left-width: 0px;
}
 
a:hover
{
 color:#030;
 border: 1px solid #9999ff;
}
 
a:active
{
 color:#aca;
 border-left: 2px solid #030;
 border-top: 2px solid #030;
 border-right-width: 0px;
 border-bottom-width: 0px;
}
>
>Button Links>
>
  href="http://www.washingtonpost.com">WashingtonPost.com>
  href="http://www.webucator.com">Webucator>
  href="http://www.google.com">Google>>

The screenshots below show how these CSS buttons look in different states: the default state, the hover state, and the active state.

Default State

a:hover - Cursor hovering over link

a:active - Mouse click on link

Which method do you like better: the traditional, JavaScript method (which Dreamweaver can do for you, without you ever having to code), or the CSS method?

variables, parameters, arguments and values

Nat Dunn — Tue, 15 Jun 2010 19:30:28 +0000

Programmers often use the following terms incorrectly, which can cause confusion:

variable
parameter
argument
value

Variable

A variable is a string of text that holds data.

Parameter

A parameter is a type of variable used within a function definition to capture data passed into the function:

function getSum(parameter1, parameter2) {
  return parameter1 + parameter2;
}

Argument

An argument is the value passed into the function. For example, the following would add argument1 and argument2.

getSum(argument1, argument2);

Value

The value is the current contents of a variable.

Passing Arguments to JavaScript Functions

Connie — Tue, 15 Jun 2010 19:12:02 +0000

Values can be passed into JavaScript functions to make the functions more flexible. That is where the parentheses come in after the function name. The parentheses hold parameters which will store the arguments (or values) passed in by the function call.

Here is an example of a few arguments passed to a function:

>
>
>Functions with Values>
 type="text/javascript">
      function changeColors(newColor) {
         document.bgColor = newColor;
      }
>
>
>
  >
    > type="button" value="purple" onclick="ChangeColors('purple');"/>>
   > type="button" value="pink" onclick="ChangeColors('pink');"/>>
   > type="button" value="green" onclick="ChangeColors('green');"/>>
  >
>
>

Those three colors in single quotes, ‘purple’, ‘pink’, and ‘green,’ get passed to the newColor parameter and the function changes the background to the passed-in color! It’s that simple!

JavaScript functions are covered in our Introduction to JavScript class.

Connecting to a Database with Dreamweaver CS4

Connie — Tue, 18 May 2010 14:41:20 +0000

Have you ever wanted to get data from a database to display in your webpage, but were unsure how to do it? Have no fear; your Cheat Sheet is here! The steps below will guide you through the process. These instructions are for a Windows XP Pro OS, a Microsoft Access database 2000-2007, and Dreamweaver CS4.

Create an Access database and save it in the My Documents folder on your desktop
Create a folder on the desktop (name the folder however you want, but with no spaces)
Copy & Paste the new folder into the C:\InetPub\wwwroot folder. If wwwroot doesn’t exist, you need to set up your web server:
1. Select Control Panel > Add or Remove Programs > Add or Remove Components
2. Scroll down to Internet Information Services( IIS) , select it and click Next to install
3. Follow the instructions until the install is complete, then reboot your computer
Click Start > My Computer > Control Panel > Administration Tools > DataSource ODBC
In the ODBC Data Source Administrator Dialog box click the System DSN tab, and then click Add
In the Create New Data Source Dialog box, scroll down to Microsoft Access Driver(*.mdb or *.accdb), then click Finish
In the ODBC Microsoft Access Setup Dialog box type in any name, then click Select
In the Select Database Dialog box, under Directories, look for the database in the My Documents folder and
Double-click on the database; continually click OK to close all of the screens
Open Dreamweaver CS4
Click on Site > New Site
In the Advanced Tab, select Local Info and type in a site name
In the Local Root Folder area, browse to the desktop folder you created and select it
Select Remote Info on the left side under Categories
In the Access dropdown select Local/Network
In the Remote folder, browse to the Inetpub/wwwroot/[new folder name], then click Select
Select Testing Server on left side under Categories
In the Server Model drop down select ASP VBScript. In the Access drop down, select Local/Network and click OK
Click Done
Go to File > New
Choose ASP VBScript under the Page Type heading
Give the page a name without spaces
On the menu, click Window > Databases
Click the “+” in the Databases window upper-left corner, and then click Data Source Name (DSN)
Give your Connection a name without spaces
Click the arrow next to Data Source Name
Choose the Data Source Name from the drop down that you created earlier
Click Test and you should receive a message that it was connected properly
Click OK
Go to Window > Bindings on the menu bar
Click the “+”
Choose Recordset Query
Give the Recordset a name
Choose the Connection you just created from the Connection drop down
Choose a Table that you want to view records from
Click OK
Expand the Recordset in the Bindings panel
Drag a field onto the ASP page, in Design view
Save the page
Click on the blue arrow in the Files panel to send ALL of the files to the wwwroot folder
Run the page by select F12 on your keyboard.
You should now see dynamic data in your webpage!

Now you can breath!

You can learn more about working with databases in Dreamweaver in our Database-Driven Websites with Dreamweaver CS4 class.

How to Become a Web Developer

Nat Dunn — Mon, 03 May 2010 14:08:37 +0000

When I started in web development training in 1998, the job prospects for people who knew HTML and some CSS or JavaScript were pretty good. Everybody needed a website and relatively few people knew how to create one. The beauty of it from a career perspective was that HTML and CSS are relatively easy to learn for someone who is comfortable with computers. And basic JavaScript isn’t that tough either, but as it’s a scripting language, it requires the developer to have some basic logic skills. In those days, you could earn a living with just the basics, and web development shops appeared all over the place.

In 1999, I interned for Zefer, a big web development shop. It called itself an internet consulting firm, but it was basically a web development company with a bunch of salespeople /consultants. Zefer landed a whopping $100 million dollars in venture capital in May 1999 and another $48 million in March 2001, which turned out to be about six months before it went belly up. I’m not sure how many of its employees were on the web development side, but it literally hired people off the street. I remember one guy came into the office to ask if they were hiring and they set him up with a desk that day. These days, finding a job in web development is not that easy. It’s even hard to find an internship. One problem is that the term “web developer” is vague.

What is a web developer?

You can divide web developers into two main types:

Client-side developers – people who write the code interpreted by the browser. This includes HTML, CSS, and JavaScript, and in some cases, XML.
Server-side developers – people who write the code interpreted by the server. Server-side developers can further be divided into many types, including:
1. ASP.NET developers
2. Multiple variants of Java EE developers
3. PHP developers
4. ColdFusion developers

We still even get people taking our Classic ASP classes, but most of them have inherited legacy code that they need to maintain. If you’re looking to get into web development now and you’re starting from scratch, here’s my recommended approach.

Learn HTML First

HTML provides the structure to a web page: the title, headings, paragraphs, lists, tables, and so on. Every web developer needs to know HTML.

And the good news is that HTML is not that difficult, but like anything new, you’ll need to study. You can learn HTML using a free HTML tutorial or with an HTML book. And, of course, we’d love to have you take our HTML class.

You should count on being able to work efficiently in HTML after just 2-4 weeks of hard work.

CSS and JavaScript

If you want to be a client-side developer, you need to know both CSS and JavaScript, in addition to HTML.

CSS

CSS is the language that controls the display (e.g, where and which elements are displayed) and formatting (e.g, how the elements are displayed) of a web page. JavaScript is used to make single web pages more interactive (e.g, form validation, drop-down menus, moving objects on the page).

CSS is not incredibly difficult to learn, and now that browsers support it better, it’s much easier to make it work across browsers without learning a bunch of CSS hacks.

Count on another 2-4 weeks to learn CSS.

JavaScript

JavaScript is a scripting language. Many people find that it goes from relatively easy to phenomenally difficult very fast as you try to do more and more complex things. Anyone who has created dropdown menus using JavaScript knows just how complicated it can get. The nice thing is that you can gradually increase your JavaScript knowledge and with it increase your productivity.

Count on 2 weeks to become minimally productive with JavaScript and constant learning as you use it.

Like with HTML, there are plenty of books and free tutorials on CSS and JavaScript. And, again, we provide CSS training and JavaScript training.

Server-side Technologies

On the server-side, you have a slew of choices. The easiest languages to get up to speed quickly on are ColdFusion and PHP, and that might be a good place to start. ColdFusion is the simplest to learn, but it isn’t nearly as common as PHP. On the other hand, there are a lot fewer ColdFusion developers than PHP developers, so you might find the competition less fierce. In any case, you can become dangerous with either language in about a month, but it will likely take 3-6 months before you can become truly productive.

ASP.NET and Java EE are much more difficult to learn. Both require that you first learn a sophisticated programming language (C# or VB for ASP.NET and Java for JavaEE). While the jobs are better paying, you’ll be competing for them with people who have computer science degrees. If you decide to go down either of these paths, count on a lot of hard work over an extended period of time.

A Note on SQL

SQL is the language for querying databases. There are developers who focus on SQL (database developers), but most server-side web developers will find it helpful, if not necessary, to have at least basic SQL skills.

A Note on XML

XML is a metalanguage for storing and transferring data. It has become prevalent in many aspects of web development. Many things in life are easier to understand than to learn. For example, you might understand how an operation is performed, but you couldn’t do it yourself. XML is the opposite. Basic XML is easy to learn, but it’s hard to understand what the benefit is until you start actually using it in development projects.

A Note on Ajax

Ajax is a client-side technique for communicating with a server using JavaScript. It is the magic behind cool websites such as Google Maps and Google Wonder Wheel. In the already confusing world of web development, Ajax muddies the distinction between client-side and server-side web development. The main language used in Ajax is JavaScript (a client-side technology); however, to understand what you can do with Ajax, you must understand the business logic that happens on the server and, in many cases, it helps to have a good understanding of the underlying database(s). And now, with a zillion and a half Ajax frameworks, it’s extremely difficult to decide which direction to take. This is true both for companies making technology decisions and for individuals trying to decide how best to increase their skill sets.

Our recommendation on SQL, XML and Ajax for new web developers? Cross those bridges when you come to them. It’ll likely take at least a year before you’re ready and things in the web development world change quickly.

You may find the following table useful in figuring out how long it might take you to become a web developer.

Key: applies to shaded rows

3	Must have this skill
2	Should have this skill
1	Useful to have this skill
0	Don’t need this skill

Common languages in web development

	HTML	CSS	JavaScript	XML	SQL
Client-side developer	3	3	3	1	0
Server-side developer*	3	1	1	2	2
Time to learn (min weeks)**	2	2	2	1	1
Time to learn (max weeks)**	4	4	4	2	4
Server-side developers must also learn a server-side technology. *This is the time it takes to become minimally productive. You’ll never stop learning.

Best of luck!

Hear about our latest Web design and development blogs, classes, and webinars by signing up for our newsletter.

GUI Design Training

Dave Dunn — Fri, 09 Apr 2010 14:57:20 +0000

We recently had a client ask if we could deliver GUI Design Training, Well, we thought, GUI design is not new, so finding a good GUI design trainer and courseware should be pretty simple. Turns out, however, that we were wrong. We couldn’t find anyone licensing good GUI design training courseware. We found some books on Amazon, but most of them were written more than 10 years ago. And the few training companies we found that offered GUI Design classes were asking much more than we generally charge for similar courses.

Fortunately, we have a trainer on staff with some experience with GUI design training, and we were able to find one book that looks pretty good: The Essential Guide to User Interface Design: An Introduction to GUI Design Principles and Techniques, by Wilbert O. Galitz. So we put together our own outline with the idea of using that book for courseware and supplementing it with hands-on exercises. Our goal was a good course covering the basics of GUI Design which could be easily customized to include more or less material. Here’s information on the 3-day course we put together:

GUI and Web Application Design Best Practices

Overview

Participants will learn techniques for effective Graphical User Interface (GUI) and effective Web applications design through theory and hands-on exercises. Explore user interaction characteristics and incorporate them in application design. Profit from user feedback to create applications that meet business and usability goals. The course provides a practical guidelines and approaches to design and prototyping. Participants will learn how to effectively specify user interfaces and apply the User Centered Design process in software application design.

Benefits

After completing this course, you will be able to:

Remove risk in design decisions
Verify the usability of application design
Write standards and guidelines
Develop business and user requirements
Manage user involvement in application design
Slash user training in half

Who Should Attend?

Web and Applications Developers
Information architects and Interface Designers
Market and QA personnel
Project managers

GUI Design Training Outline

Overview
- Humans and computers
- GUI and Web based systems
  - Information
  - Interaction
  - Visual Design
  - Organizing Principles
- Parting Company
  - Technological Differences
  - Data Flow
  - Navigation
  - Operations
- Menus and forms and commands
- Designing for user interaction
- Intuitive Design: If the user can’t use it, the program doesn’t work!
- Exercise: Case Study
Knowing Your Clients
- Human action cycle
- Common problems
- Mental models
- Learning curves
- Skill sets
- User knowledge and experience
Integrating the business model
- Requirements and analysis
- Understanding the problem
- Training and documentation
Putting the User and the Model Together
Exercise: Analysis and Planning
GUI Applications
- Data, Processes and Tasks
- Orientation
- Using Feedback Effectively
- Using Color
- Controls & Widgets
- Navigation
- Search
- Input Devices
- Design Patterns
- Progressive Disclosure
- High Level Design
- Prototyping
- Visualization Challenges and Principles
- Icon and TextStandards
- ISO Standards
- Accessibility
- Usability
- Exercise: Prototyping the Domain
Web Application
- What is good design?
  - Information Design
  - Navigation
  - The Concept
- Application Information
  - Information
  - Organization
  - Exercise: Information Design
- UI Architecture
- Guidelines and Fundamentals
  - Interaction
    - Orientation
    - Feedback
    - Progressive Disclosure
  - Building Blocks of Web Apps
    - Controls, Forms, Pages
    - Objects
    - Task Flow
- Common Interaction Elements
  - Text and Labels
  - Colors
  - Page Layout
  - Forms
  - Wizards and Guides
  - Icons and Images
  - Navigation
  - Links
  - Search
  - Common Controls
  - Another Look at Design Patterns
- Exercise: Prototyping
- Web 2.0
  - Old problems
  - User needs
  - New technologies
- Designing to Common Behaviors
- Usability Design Guidelines
- Heuristic Guidelines
- Exercise: Wireframe Evaluation
- Web Accessibility

Our guess is that there is not a lot of demand for this course, so we decided not to create the course yet. If you are interested in it, however, let us know. And if you have thoughts about how the outline should be changed, let us know that too. Finally, if you’re a trainer with experience in delivering GUI design courses, please consider filling out our online application for new trainers.

Saying “Hello World!” in your Language using JavaScript

Nat Dunn — Wed, 31 Mar 2010 17:35:23 +0000

Almost every programming class or book starts with a “Hello World” script, in which students learn to write a small program that outputs “hello world”. According to the all-knowing wikipedia, this practice dates back to 1974 and was first used in a book on C.

Although there are programmers all over the world who speak many different languages, for some reason, the script always seems to use English (e.g, “Hello world” instead of “Bonjour monde” or any other language).

Just for fun, we’ve decided to create a little script in JavaScript that let’s you choose in which language you would like to greet the world.

Here’s the function:

function sayHello(language) {
	var arrHellos = {
		"Chinese" : "你好世界",
		"Dutch" : "Hello wereld",
		"English" : "Hello world",
		"French" : "Bonjour monde",
		"German" : "Hallo Welt",
		"Greek" : "γειά σου κόσμος",
		"Italian" : "Ciao mondo",
		"Japanese" : "こんにちは世界",
		"Korean" : "여보세요 세계",
		"Portuguese" : "Olá mundo",
		"Russian" : "Здравствулте мир",
		"Spanish" : "Hola mundo"
	};
	alert(arrHellos[language]);
}

And here’s a simple HTML form to call the function:

 method="get" action="javascript:void()">
  >
    >Language:> 
     name="language" id="language">
      >Chinese>
      >Dutch>
      >English>
      >French>
      >German>
      >Greek>
      >Italian>
      >Japanese>
      >Korean>
      >Portuguese>
      >Russian>
      >Spanish>
    >
  >
   type="button" onclick="sayHello(this.form.language.options[this.form.language.selectedIndex].value);" value="Say Hello" />
>

I used http://babelfish.yahoo.com for the translations. If you see any that our wrong, please let me know. Also, if you know how to say “Hello world” in additional languages, please leave a comment to let me know.