Holly Brewer: 2007

Sunday, December 9, 2007

Excerpt from our JavaScript class, part of the front end group I co-run with my posse at Ascentium.

I am one of Ascentium's rock stars =)
Ascentium
I am a front end dev at Ascentium: working with peers to ensure the quality of our work by learning & teaching best practice in all aspects of front end code. We look at up-to-date methods in CSS, JavaScript and page structure: and teach how to make our sites perform well for SEO, accessibility, page load times, maintainability & the cross-browser experience. We are blessed to be in an organization where many folks from many job roles are fired up about these things.

My experience at Microsoft as a user tester at Expression Web is incredibly useful in this. The Expression team at Microsoft are passionately serious about web standards and ensuring that the web sites of the future will be standards-based, and therefore adhere to the standards brought to the table by the many interest groups that require this. They are an incredibly well-informed and intelligent group of people in the center of the team creating the future of web design.

This blog post is a taste of the type of information that we share in our JavaScript class at Ascentium.

Concepts from Jeremy Keith's fine DOM Scripting book

JavaScript’s History
Netscape enabled JavaScript for the first time in 1995 with Navigator 2.
Microsoft struggled to play catch up, enabling JScript in IE3.
Netscape & Sun worked with the ECMA (the European Computer Manufacturers Association) to standardize the language. The standardized version was called ECMAScript. By 1996, the standardized script was taken up in varying degrees by browser versions 3 and above: the script version is widely known as JavaScript 1.1. The current version of JavaScript is JavaScript 1.6. The W3C encourage browser coders to standardize JavaScript implementations.

Best-practice JavaScript
Degrade gracefully means that the page appears acceptable and behaves in an acceptable manner in older browsers/browsers with incomplete support for the JavaScript functions, or no JavaScript functionality at all. For instance, navigation must not depend on JavaScript.

Backwards compatibility means compatible with older browsers, or browsers with limited or no JavaScript functionality.

Another aspect of best-practice JavaScript scripting is enabling pages to load as quickly as possible. This comes from: externalizing scripts, so that they download once for the entire site (and then are cached by the browser and reused by the pages of the site); and limiting the size of the script by thinking carefully about its syntax.

Jeremy Keith's book

Friday, September 28, 2007

Server Side XML Transformation

Let's do it!

To transform an XML node
try something like this (the related XML is below):
<asp:xmldatasource id="MySource" datafile="~/xml/articles.xml" xpath="articles/article" runat="server">

<asp:datalist id="MyDataList" datasourceid="MySource" runat="server">
<itemtemplate>
<ul class="linklist2">
<li><a href="<%# XPath">"><%# XPath("title") %></a></li>
</ul>
</itemtemplate>
</asp:DataList>

Explanation:
XmlDataSource – defines data source
- Its XPath attribute defines the part of the doc it will draw from.
DataList – data instance drawing from the data, referring to it by id. There can be more than one.
ItemTemplate – looping template, writing data into the html where indicated by XPath controls.

The XML:
<?xml version="1.0" encoding="utf-8" ?>
<articles>
<article>
<id>1</id>
<title>1 Title Name</title>
<author>1 AuthorFirst AuthorLast</author>
<pubdate>1 Published Date</pubdate> <content>article1.html</content>
</article>
<article>
<id>2</id>
<title>2 Title Name</title>
<author>2 AuthorFirst AuthorLast</author>
<pubdate>2 Published Date</pubdate> <content>article2.html</content>
</article>
</articles>

To transform according to/using attributes
try something like this (the XML follows below):
<asp:xmldatasource id="MySource" datafile="Default.xml" xpath="Bookstore/genre/book" runat="server">

<asp:datalist id="MyDataList" datasourceid="MySource" runat="server">
<itemtemplate>

<table>
<tr>
<td>
<img alt="Cover Image" src='<%# "images/" + XPath("@ISBN") + ".gif" %>' >
</td>
<td>
<h4><%# XPath("@Title") %></h4>
<b>ISBN:</b> <%# XPath("@ISBN") %><br />
<b>Price:</b> <%# XPath("@Price") %>

</u>
<br />
<%# XPath(".") %>
</itemtemplate>
</asp:DataList>

</itemtemplate>
</asp:DataList>

The related XML:
<?xml version="1.0" encoding="utf-8" ?>
<bookstore>
<genre name="Business">
<book isbn="BU1032" title="The Busy Executive's Database Guide" price="19.99">
<chapter num="1" name="Introduction">
Abstract...
</chapter>
<chapter num="2" name="Body">
Abstract...
</chapter>
<chapter num="3" name="Conclusion">
Abstract...
</chapter>
</book>
<book isbn="BU2075" title="You Can Combat Computer Stress!" price="2.99">
<chapter num="1" name="Introduction">
Abstract...
</chapter>
<chapter num="2" name="Body">Abstract...
</chapter>
<chapter num="3" name="Conclusion">
Abstract...
</chapter>
</book>
<book isbn="BU7832" title="Straight Talk About Computers" price="19.99">
<chapter num="1" name="Introduction">
Abstract...
</chapter>
<chapter num="2" name="Body">
Abstract...
</chapter>
<chapter num="3" name="Conclusion">
Abstract...
</chapter>
</book>
</genre>
</bookstore>
- Yeah, baby
=)

========================================================================
another way - for repeating controls, using the XML control:
========================================================================

The asp.net control:


<asp:Xml ID="xmlArticle" runat="server" DocumentSource="~/xml/articles.xml" TransformSource="~/xsl/articles.xsl"></asp:Xml>

the XML:
<?xml version="1.0" encoding="utf-8" ?>
<articles>  
<article>    
<id>1</id>
<title>1 Title Name</title>
<author>1 AuthorFirst AuthorLast</author>
<pubdate>1 Published Date</pubdate>    <content>article1.html</content>
</article>  
<article>    
<id>2</id>    
<title>2 Title Name</title>    
<author>2 AuthorFirst AuthorLast</author>    
<pubdate>2 Published Date</pubdate>    <content>article2.html</content>  
</article></articles>

The XSL:
<?xml version="1.0" encoding="utf-8"?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform%22&gt; 
<xsl:output method="xml"></xsl:output>
<xsl:template match="/articles">  
<xsl:for-each select="./article">    
<div>      
<xsl:attribute name="id">article-<xsl:value-of select="id">
</xsl:value-of>      
</xsl:attribute>      
<h2>        
<xsl:value-of select="title"/>      
</h2>      
<h3>        
<xsl:value-of select="pubdate"/>      
</h3>      
<p>        
<xsl:value-of select="content"/>      
</p>    
</div>  
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Tuesday, July 31, 2007

General great info & sites

Another busy month, but here's a few gems:

Found a great site for browser stats:
http://marketshare.hitslink.com/report.aspx?qprid=6

SiFR:
http://www.mikeindustries.com/blog/archive/2004/08/sifr

Check out widgipedia:
http://widgipedia.com/widgets/gallery/

Design inspiration:
http://www.styletheweb.com/

Great PNG solution:
http://www.satzansatz.de/cssd/tmp/alphatransparency.html

JS to find element's properties:
for (p in seeEmbedded.style) { alert(p+": "+seeEmbedded.style[p]) };

Saturday, June 30, 2007

Av Event Apart

Here follow my notes from An Even Apart - an incredible conference for people who make web sites:

Sites to look up:

lightroom.com
37signals.com
subtraction.com
istockphoto.com
websidestory.com
mediatemple.com
swfir.com
bulletproofajax.com
developer.yahoo.com/ypatterns
dean.edwards.name

Books to read:

Gap – Marty Neumeier – recommended by Santa-Maria
Thinking in Type – Ellen Lipton
Making & Breaking the Grid – Timothy Samara
Agile Web Development with Rails – Dave Thomas
Beautiful Evidence – Edward Tufte
Communicating Design – Dan Brown

Secrets of the CSS Jedi
Eric Meyer

Default browser styles
To change the defaults in your web browser, find html.css in your computer, and change it.

*{border:1px solid #000} – applies a style to every element in the page.
If you apply display:block to this selector, it will even show your styles (CSS) & title J
- or you can reference rendering of your styles by using the style selector:
style {display:block}

It is good to apply universal styles thus so that you can override browser defaults:
* {margin:0; padding:0; line-height:15px; font-size:10px}
You then need to override them for form elements, headings, paragraphs, etc.

1em is a good distance to have between paragraphs.

There is a parent element of html: it has no name. It takes on the styles of its child / descendant. For instance, if you give html a background color of blue, it will have it. If there is no background color on html, it will take on the body’s.

Crazy stuff with tables
They can be pulled from their default relationships, and be positioned independently.

Use caption, thead, tbody & tfoot to make tables more legible to the browser:
And also this code: .
It gives information to screen readers.

Design
Jason Santa-Maria

How to Design
Have inspirational material in your environment:
Print material, decorations, sheet music, daguerrotypes, typography, stuff from different cultures.

Design using grids on a page. A common technique is 12 columns subdividing a page.

When trying to draw the eye, use colors, size, and remember that people look more on the left side. (They expect ads on the right.) They also start top left.
Use “ ” instead of " for quotes.

His method of design:
sketches to
grey box design (uncolored containers arranged and measured out in a Photoshop comp) to
added colors

When speaking to clients, set yourself up as the authority. Make it clear that you are in charge of the design and you know what you are doing.

How it is
Tim Bray

Web 2.0
Blog to people, let them comment.
Don’t treat them like idiots – be honest.
Blogs are what people treat as the authorities now, many times.
According to Technorati, there’s 78m already.

The new hole in the market is styled blogs: shops and books are styled, unique and elegant – they should be too.

Modern Dev Technologies
PHP is scalable
Rails wins on time to market (it’s quick to work with) & maintainability.

Use Atom – it’s the new RSS protocol: universal standard. There’s a layer on top of the http protocol, the atom protocol.

Blogging will evolve: every application should have “Publish” button: to go straight to a blog, not just “Save” and “Print” buttons.

Accessibility
Shawn Henry

Use an empty alt tag for all spacer gifs.

View your site through a voicing browser: screen readers are expensive and complex. A common screen reader: IBM HomePageReader.

Try navigating the site using a keyboard, no mouse.

Turn off images to see if you have your alt text. Turn off CSS, JS, sound. See if your site makes sense and is navigable.

Markup headings, so that assistive technologies can enable users to skip through them to get through the page.
Toolbars:
Opera enables you to jump through headings;
Firefox allows you to outline headings;
IE has an accessibility toolbar.

Have a “skip links” link, so that people can skip over them in the page.

Markup lists correctly, so that assistive technologies can group them.

Make link text meaningful (inline and in main navigation), so that people can jump to them and through them.

Look at your site using Lynx.

Resize the fonts to check the structure.

Check the language and usability for those with cognitive disabilities.

Use evaluation tools like screen magnifiers to check the pages. Also have real people test.

Find people in support groups and rehab groups. Probably best to have experienced users: they have developed techniques for navigating their way around.

Look at your color contrast.

Her free book, about accessibility:
http://uiaccess.com/justask/
Are You Experienced?
Andy Budd

People learn about things by exploring these days – not so much by reading manuals, not like they used to. They like to have a feeling of a flow, time passing easily.

Make error messages obvious: be aware that they are probably multi-tasking, busy: and could be in various emotional states.

If you are nice, and make it easy: you’ll have it over everyone else by far: you’ll delight them.

Use people’s names and personalize their experience, remember their preferences. They love it, and relate to you.

His design process: wireframe to Flash / html prototype.

Design for users – not according to how your business is organized / feels about it.

Look at people’s root motivations - not that they want a Tupperware: but that they want a Tupperware because they have just been cooking / bought in bulk / took home froma restaurant.

Build personas to know your customer.

Civil Disobedience in Interactive Media
Mike Davidson – invented Flash Image Replacement.
www.mikeindustries.com

Organizations that design major browsers mostly attempt to follow Web Standards.

In reality, though, they realize that they need to follow the needs of the people. Examples: Safari’s use of the “content:editable” attribute and webkit.

There are many web tools developing quickly: and they need more flexible web technologies to enable this. Examples: 37 Signals & Mint, or Mike Davidson’s latest, wedje:
http://www.mikeindustries.com/blog/archive/2007/06/widget-deployment-with-wedje

It costs $50k per company / $5k per person to join the W3C. There’s 60 people, bad focus: and people leaving.

Grid Design
Khoi Vinh
www.subtraction.com

In 1025 x 768, count on about 960 after chrome.

Use a 12 column layout as the basis: it can broken down in many ways. Have 10px margins between them. Have it as 3 then 3 then 3 then 3; or 6 then 3 then 3: you get the picture.

When listing and the list items have borders, leave more space at the bottom – the eye naturally drops the text a little.

Evolving an Interface
Shaun Inman
www.shauninman.com

You can define constants server side in CSS, and call them within your property-value sets:
http://www.shauninman.com/archive/2005/08/20/css_ssc_quickie
This needs to be used in conjunction with PHP or another server side technology. It makes your CSS more flexible.

Shaun Inman made Mint & ShortStat. In Mint, you click on an upside-down tab, and “drawer” drops a huge div down with multiple stat options. Nice UI.

He put a JavaScript in there that determines how wide the page is, and then stretches the divs to fill it, and drops them lower if they don’t fit.

Hijax is a hybrid of AJAX - see:
http://bulletproofajax.com/

The Yahoo! Developer Library has a great list of web defaults (placing widgets like Login areas, for instance):
http://developer.yahoo.com/ypatterns/

CSS in an IE7 World
Meyer

Between Oct 06 and Jan 07, there were 100m downloads of IE7.

25% of visitors use IE7.

Check this out for great cross-browser solutions, and making IE6 play nice:
http://dean.edwards.name/ - wow!
It can have issues with AJAX, though.

To target just IE7, use: * + html {blah blah}
To target just IE6, use: *html {blah blah}

Selling Design
Zeldman

http://mosquito.happycog.com/ - example of showing a client how useful & easy to moderate a chat area / community group can be.

General advice about choosing & working with clients.

Next Generation of Web Apps
Jeffrey Veen – works on Google analytics site.

http://www.veen.com/apart07.pdf

Match user’s wants into patterns: and map your UI to the patterns.
Make it intuitive to get stuff.