All posts tagged ‘HTML’

File Under: Software, Visual Design
Jun
2
2010

Photoshop Contemplates Adding Live HTML Layers

By

Adobe’s Principal Product Manager of Photoshop, John Nack has posted an idea for a new Photoshop feature on his blog. Nack’s idea is to create a way of rendering HTML and CSS within Photoshop. This means visual designers could work with “live” HTML objects as they’re building websites within a team of programmers, easing the workflow between the designing and coding stages.

Before you get to excited (or disappointed) keep in mind that isn’t a feature, isn’t even part of a plan, it’s simply and idea that Nack would like feedback on.

Nack describes the idea (and workflow) like this: a designer creates a mockup, which he hands off to a programmer. The programmer then renders the mockup in HTML/CSS, at which point he could hand it back to the designer who can open it in Photoshop as a kind of live layer. Resizing and other layer actions would cause the code to respond according to how the programmer has written the code.

What Nack is envisioning is a smart layer that uses WebKit (already part of the Creative Suite) to render what he calls “programmable layers.”

Among the benefits Nack sees are “[live] pixel-accurate web rendering (text and shapes); the ability to style objects via CSS parameters (enabling effects like dotted lines); data-driven 2D and 3D graphics; and high fidelity web output (HTML as HTML).”

The real world example Nack uses is a calendar widget, but that particular example raises an interesting question — what about scripting languages? We don’t know of anyone who writes out calendar code in HTML, that would be insane to update. So if you’re generating the calendar with, say, PHP, where does the script rendering happen?

So far, the comments appear pretty evenly divided between those who think such a feature would be great and those think that either it’s just more bloat in Photoshop, or that Fireworks would be a better home for the idea.

If you’ve got strong opinions one way or the other, head over to Nack’s blog and let him know what you think, either in the comments or by completing this survey.

Just remember that this is not part of a roadmap and may well never happen. In the words of Douglas Adams, “Don’t panic.”

See Also:

Tags: , ,
File Under: HTML, UI/UX
Feb
26
2010

Using ‘Mad Libs’ to Make Web Forms More Fun

By

In an ideal world, the web would have a built-in identity solutions — websites would automatically know who you are when you arrive. In the real world, however, almost every website has its own sign up and authentication process, endless forms enticing you to enter your name, your e-mail, pick a password… yawn, what now?

It’s repetitive, boring and makes many of your users click away in disgust. But what if you turned the sign up form into a narrative, something a bit like a Mad Lib?

That’s exactly what web developer Jeremy Keith has done for his podcasting site, Huffduffer. Instead of a list of blank boxes, Huffduffer’s sign up form looks like this:

All the usual behaviors of a web form are still there. You can tab between fields, your password is still masked and errors are highlighted if there are any. The difference is the in the presentation. It doesn’t look like some kind of online test.

In short, Huffduffer’s sign up for is refreshing, but does it work? Well, Luke Wroblewski, Chief Design Architect at Yahoo and author of the book Web Form Design, had the same question and, with some help from the team at Vast.com, ran some tests.

The designers at Vast redesigned their response forms along the lines of Huffduffer’s form and found that, as Wroblewski reports, “Mad Libs style forms increased conversion across the board by 25-40 percent.”

The forms are live on both Vast and the Kelley Blue Book website if you’d like to experience them yourself. Wroblewski has a few minor caveats about the increased number of users — be sure to check out his post for the complete details — but at least in some cases it would seem that a narrative flow trumps the boring old form.

See Also:

Tags: ,
File Under: Glossary
Feb
15
2010

Link

By

A link is a bit of highlighted text on a web page that connects to another web page or file. Clicking the link sends your browser in search of the address attached to the text. That address can refer to another place on the same page, another page within the same site, or just about anywhere on the internet. If you could peel back the text of the link to Webmonkey and view the HTML underneath, you’d see: 

<a href="http://www.webmonkey.com/">Webmonkey</a>

If you clicked on the text of the link, you would be taken to that URL.

Tags: ,
File Under: HTML, Web Standards
Feb
15
2010

Building with the Document Object Model

By

How would you describe your web page without mentioning its content?

One way would be to describe the page’s structure. What tags are on the page? How many are there? What order are they in? What are the properties of these tags? And finally, what is the presentational nature of each element? This is what the Document Object Model does. It expresses the structure of an HTML document in a universal, content-neutral way.

One of my first Webmonkey articles was about displaying random images. I twiddled with image tags on a page so they pointed to different image files over time. It was a simple concept: You have an arbitrary number of images on a page, a few of which the computer would randomly change about five times a second. The effect was a flashing, mutating space that I liked a lot.

I didn’t know it back then, but what I was doing was manipulating the Document Object Model of that page. I had a number of objects on the page. My script would then query out the number of images, and then modify an attribute of that object (i.e., switch out the sources of the images).

This was about the limit of what you could do with the Document Object Model in Netscape 3. You could read and write the attributes of image and anchor tags, and you could query some information about the browser itself – what MIME-types it accepted, what plug-ins were installed, its location, and a few other things. Simple, basic, down-to-earth, level-zero items.

Continue Reading “Building with the Document Object Model” »
Tags: , , ,
File Under: HTML, Web Standards
Feb
15
2010

Make an HTML Document

By

HTML is the lingua franca of the web. It’s a simple, universal mark-up language that allows web publishers to create complex pages of text and images that can be viewed by anyone else on the web, regardless of what kind of computer or browser is being used.

Despite what you might have heard, you don’t need any special software to create an HTML page; all you need is a word processor (such as SimpleText, BBEdit, or Microsoft Word) and a working knowledge of HTML. And lucky for all of us, basic HTML is dead easy.

It’s All About the Tags

HTML is just a series of tags that are integrated into a text document. They’re a lot like stage directions — silently telling the browser what to do, and what props to use. Continue Reading “Make an HTML Document” »

Tags: , ,
« OLDER POSTS