Helloewy: A blog from Loewy Design » Code

By the book

David Loewy — Wed, 07 Oct 2009 21:19:45 +0000

I recently gave a lecture to the advanced web design class at Farmingdale College. When I met up with professor Jack Harris, he informed me that the kids, mostly juniors and seniors, saw Loewy Design’s page in the Flash/Dreamweaver Genius Guide, and they were looking forward to meeting with me. A bit embarrassed and very flattered, I asked Jack what book was he talking about and where could I get one.

I later found out that the book is published by Imagine Publishing and promises to be the essential guide to dynamic design and development. We were recognized for our website’s approach to animation and design using purely CSS and Javascript, a technological accomplishment but not exactly what I wanted to talk about in my little seminar. My talk was about the real world lessons that you can’t get from a textbook. I wanted to focus on the process of solving business and branding problems with the online medium.

I tried to push their tech questions aside but they kept coming. I eventually got my point across that the technology we’re using today will be completely different when the students immerse themselves in the job market. They’ll need to educate themselves on the latest versions of Flash and Dreamweaver and keep up with always evolving programming languages throughout their careers.

The most valuable information I could share with them was to describe our thought processes, not only about making a website look great but about creating one that will actually help your clients solve their business challenges. I gave them our secret sauce on how we deliver positive results to our clients and improve their bottom lines. As a take-away, I provided them, and now you, with a list of reference tools organized by each phase of our process.

By no means is this the complete list, since it too is always evolving, but it could serve as a nice resource and good starting point for students, clients and peers.

HTML 5 – A new level

Matt Kaye — Wed, 09 Sep 2009 18:37:51 +0000

There’s been a lot of buzz about HTML 5 lately. I’ve seen a wave of articles talking about the new version of HTML in the RSS feeds I follow. Work on HTML 5, which commenced in 2004, is far from complete, but we’re starting to see some new and exciting features being released in the current draft.

So what’s new? For front-end developers, there are a few improvements in version 5 that aim to make life easier and cut down on development time.

So What’s Different?

Well, a lot, but one of the most significant changes from HTML 4 is that HTML 5 is not based on SGML. It has, however, been designed to be backward-compatible with common parsing of older versions of HTML.

In the SGML rulebook, element names are not case sensitive, you can have elements with optional closing tags (like the paragraph tag), and you can have attribute values without quotation marks. XHTML 1.0 and 1.1 are based on a rulebook called XML. In the XML rulebook, element and attribute names are case sensitive, every opening tag must have a closing tag, and attribute values must be quoted.

HTML 5 defines a markup language that isn’t based on either rulebook, but that can be written in either “HTML form” (or serialization, as the specs call it) or “XHTML form.” This gives page authors more flexibility.

Page Structure

HTML 5 brings a whole set of new elements that make it much easier to structure pages. Now, we have tags like:

HTML 4 lacks the necessary semantics for describing these parts of the page specifically. The new tags should replace the all-too-common “use div” elements, giving each a descriptive ID or class.

Typical markup for an HTML 5 document could look something like this:


...
	...
	
		...
	
		...
...

Embedded Media

The popularity of audio and video on the Web is undeniable. Sites such as YouTube, MySpace, and Facebook make it easier than ever for anyone to publish rich content to the Web. HTML 4 lacks the means to embed and control multimedia successfully; many sites rely on Flash to perform those tasks.

HTML 5 promises two tags to aid in the embedding process:

There are many additional attributes available for each of these tags, should the author of a Web page require more-detailed control over its content. But for purposes of demonstration, this would be a typical use:


    Download movie



    Download song

The optional “poster” attribute can be used to specify an image that will be displayed in place of the video before the video has begun playing. The “controls” attribute is a true-or-false attribute that indicates whether the author wants the built-in controls turned on or off by default.

Regular expressions

HTML 5 extends the input element by offering new attributes that allow you to specify what data you will allow as input. These attributes include min and max (to set a numeric range), and HTML 5 also offers new values for the type attribute, such as url, email, date, and time.

Enter a US or Canadian Postal Code:

The value of the pattern attribute is a regular expression, as defined in ECMAScript and used in JavaScript.

Canvas

The new Canvas element consists of a drawable region defined in HTML code with “height” and “width” attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of Canvas include building graphs, animation, games, and image composition.

See the yellow square? That’s being drawn by JavaScript into the Canvas tag. Currently only FireFox, Chrome, and Opera support the canvas tag.

This is an early example of the improvements the Web-development community can look forward to with the release of HTML 5. Of course, not all browsers will be swift to support the new specifications, so don’t throw out that HTML bible just yet!

Do you have any other HTML 5 tips and features you find exciting? We’d love to hear about them!

Tools of the trade

Matt Kaye — Tue, 01 Sep 2009 19:24:07 +0000

Everyone–designer and developer alike–has a set of tools to rely on that make the day go smoothly. We all have tricks that help us be more productive and more efficient–and take less Tylenol!

Here’s my list of tools that I use on a daily basis:

CSS/HTML/JavaScript Helpers:
Firebug (FireFox Add-on)
This is probably my top choice for front-end development. You can see/edit/remove CSS styles and HTML markup on the fly with this great resource. It also has many built-in features that allow you to debug JavaScript code right from the browser.

Web Developer Toolbar (FireFox Add-on)
This tool is similar to Firebug in the functions it offers. I find the combination of the two to be useful; I choose between them depending on the situation. The Web Developer Toolbar’s auto population of form fields saves lots of time, and the inline ruler is quite handy when comparing designs to markup.

Dust-me Selectors (FireFox Add-on)
This is a helpful tool to keep stylesheets as lean as possible. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. It then stores the data, so when you test subsequent pages, selectors can be crossed off the list as they’re encountered.

HttpFox (FireFox Add-on)
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. This resource is useful if you need to know what files are being requested from a web server and you can’t get that information directly by viewing the source code.

CleanCSS
CleanCSS is a powerful CSS optimizer and formatter. It takes your CSS code and makes it cleaner and more concise.

Tabifier
If you work with messy coders or inherit old code that hasn’t been kept neat, this tool will save you lots of time and eyestrain by correctly indenting the code and making it easier to read.

Browser Testing:
XenoCode Browser Sandbox
You don’t have to keep installing different browsers; XenoCode lets you run the browser of your choice virtually from its servers. This service essentially sandboxes the browser, allowing you to run it without changing any of your computer settings. I usually have IE6 and 7 running along with my installed version of IE8.

IENetRender
Here’s another handy tool; it allows you to see real-time screenshots of your page in many versions of IE.

Browsrcamp
If you develop on a PC, Browsrcamp allows you to see screenshots of what your page will look like in MAC Safari. I’ve found that the PC version of Safari doesn’t always render pages consistently.

W3C Validator
This choice is an obvious one. Validation keeps developers honest and squashes most problems before they become headaches.

Version Control:
Assembla
Assembla offers a nice control panel interface for your version-controlled spaces. This particular one runs on Subversion. Even if you’re coding a project all by yourself, I would recommend some kind of version-control software as a must-have. It will save you hours of time.

Tortoise SVN
This is a great SVN client that ties right in with the Windows Explorer Shell. (Sorry, MAC users.) There are numerous subversion clients out there, but this one is my favorite because it runs silently in the background until you need it.

Server Environment Information:
Builtwith
Builtwith is a web technology information profiler; it lets you find out what a given site is using.

Domain Name Details
The name says it all. This is a good place to find answers to most of your common questions about domain names quickly.

This list is by no means exhaustive. There are lots of great products out there that you may find just as useful. It’s really all a matter of preference and comfort. What tools do you use in your development cycle? Feel free to share!