JavaScript Libraries

Like a Swiss-army knife. Allow you to write JavaScript quicker, easier and better. They do not replace JavaScript, they extend it. Extremely light-weight and cross-platform compliant. Most are open source.

Help to design an experience. Used to prototype and indicate JS functionality. They are used for page searching and modification, CSS and DOM organization, handle events, animations, transitions and AJAX (get and submit data without page reload).

Core Libraries and UI Libraries, many are considered hybrids.

Procedural Programming – JavaScript, PHP, ColdFusion, ActionScipt 1 and 2. Tend to be simpler and require less code than Object-Oriented counterparts, but runs into it’s own challenges.

Object-Oriented Programming – C#, Java, ActionScript 3. Individual components allow greater flexibility. In a well-written object-oriented program, all components function independently.

Object-Oriented Terminology

Package – Filing cabinet or a folder, where files live.

Class – The most important. In order to have and use an object, you must define it. A class defines your objects. You can think of a class as a blueprint. You can’t actually use a class, it’s just the definition of the object. The class is stored in the package.

Object – Defined in the class. What you use in your program. In many cases the term object and instance are interchangeable. This is the house or where you do things.

Property – The nouns of the object. The items in the house. Defining the parameters of the object. Variable = property.

Methods - The verbs of the object. To-do list, things you do in the object. Function = method.

Dot Notation – If you have a class inside of a package, this is how you reference it. If you’re calling a property of an object, you reference using dot notation. Examples: flash.display.MovieClip, txtFirstName.text, etc.

WordPress is the worlds most popular blogging software.

Content Structure

Must plan ahead for content structure. Many think WordPress isn’t capable of doing things such as departments, features, columns and sections. WordPress templates let you to filter by category name or category number. Start with a clean and logical system to simply this process. Ability to set up RSS feed for each category. Sections are set up with slightly different color schemes. Ability to display related articles on an article page left nav.

Category for front page, items classified here show up on home page. Create an e-newsletter by creating a category for stories you wish to appear in your newsletter. Keep category slugs short, but descriptive.

To change automatically generated category ID numbers, you must go into MySQL and update two tables.

• WordPress Posts vs Pages

Editorial Workflow

Normal editorial workflow includes Story Creation, Copy Editing, Line Editing, Publishing. You must extend WordPress plug-ins and techniques to enable each of the workflow steps to work in WordPress.

Plug-ins to enable real-world editorial workflow

• Custom Field Template
• Get Custom Field Values
• Co-Authors Plus
• Capability Manager
• Peters Collaboration E-mails
• In-Series (if story is part of series)
• Custom Field Images
• Simple Pull Quote
• Peters Post Notes (internal notes which never get published)
• Scissors
• NKMImageField
• Remind Me (for cross references within your site, if you change permalink structure, links continue to work)
• Public Post Review (send proofing link before posting it on the site)
• Suma (to allow paid subscriptions, this one isn’t free, but worth the price)

One of the big limitation is the WordPress loop, or the text in the body of the post.

WordPress Limitations and Solutions

Slides at http://bit.ly/D2WCPSB

Books by Rob Huddleston

Adobe Flash Catalyst

Catalyst is middleware. Start in Illustrator or Photoshop, then pull in project using Catalyst. Convert to Flex project, then go to Flash. Catalyst does have very basic drawing tools and could be used for wireframe or a very basic prototype. Biggest challenge will be training designers to create things in Illustrator or Photoshop that will work well in Catalyst. Fireworks has the ability export as .fxg file which can be imported into Catalyst. It’s important to remember, Catalyst is a 1.0 application. It’s stable, but there are obvious capabilities that are missing.

Complete round tripping with Illustrator and Catalyst. A plug-in is needed for Photoshop and Catalyst and it’s not as seamless. Catalyst is creating code, Flex projects are written in ActionScript and MXML.

Best Practices for Designers

• The web is not print, as different from print as video is from print.
• Design for interactivity.
• Don’t overuse interactivity. Realize when you’re enhancing and when you’re making something obnoxious.
• Stay organized. Become obsessed with meaningful layer names. Rename layers, group them logically.
• Plan your layer structure.
• Use a naming convention. Figure out logical naming convention and stick to it.
• Do not link to external files.
• Design assets to be duplicated. Come up with a way in your naming convention to notate these.
• Create outlines for text with filters and effects and text with uncommon fonts.
• Do the right things in the right order in Catalyst.
• Use components in Catalyst, everything in Catalyst becomes a component.
• You don’t have to be a Flex developer, but understand Flex.

Other thoughts on Flash Catalyst best practices

Adobe Flash Catalyst CS5 best practices

What is the difference between us?

Let’s start with some generalizations.

• Developers are killjoys, squashing creativity to make a deadline or taking the easy way out to implement features within an application.
• Designers are fun, but reckless, they create great work but aren’t concerned with the bottom line.

A little reality please.

We all want to create really cool stuff that delights our users. We must work together, have a rudimentary understanding of each others disciplines.

Change is needed. Designers need to be more practical and be able to move on when goal is achieved. You must remember the scope of the project. Developers use a mantra of release early, release often. This might be something designers could learn from. Web applications are evolving and things can change post-launch, or in phases. Developers must realize that design does matter. Nothing will ever be completely resolved, Wabi-sabi. If code can be agile, why can’t design be?

Integration Points

Process

Do you have a process? Having a defined process will get you much farther ahead of the game than someone who hasn’t gotten started. “Four D’s,” Define, design, develop and deliver. These four points must communicate throughout every step in the process. It’s the job of each group on the team to define what they need to get their work done effectively.

Workflow

Do developers produce wireframes, do designers? Which is appropriate? If designers are in communication with client and understand their needs, it’s more appropriate to have them do wireframes. If developers keenly understand client expectations and have regular communication with client, they should design or create wireframes. There are times when it’s appropriate for developers to lead a project and others when a designer is appropriate.

Integration Points

File organization and directory structure. We shouldn’t be arguing over how things are named. Directory structure is not a battlefield, but try to make naming make sense and shouldn’t include names, version numbers, dates, etc. Deep Thoughts On File Naming Conventions.

Versioning

You will need to sell the benefits of this to your designers. Maybe it’s not the best idea. Versions is user-friendly SVN for Macintosh. Service called Assembla does hosted versioning, ticketing, hosted workspaces.

Taxonomy

Standardize the way you talk about things. Do we call them wireframes, block diagrams, something else? Do designers know what vectors, arrays, objects, etc. are? Are you using a lot of jargon? Art history language?

Workflow is all about solving problems.

“Nobody knows what they want, until they see it.”

jQuery UI Themes recommended.

Site Design

When you think of any web site, you think of something visual. If you’re going to have a perfect prototype, why not work with a technology where you can use templates, libraries and patterns and apply a skin to change the look. Clients will often push back. You can push back too, just do it in a friendly way, you’re managing the push back.

Skinning is more than personality. If you can take your prototype and you can apply your company skin, people are going to feel better. When you’re doing your skin design, it’s all about the persona of the company you’re designing for.

Page Design

Usability is not optional. We know what a page does because we created it, when someone else sits down to use our application, do they know what it does, why it exists?

Page Intelligence

• John Farrar on the COOP ColdFusion Framework
• COOP project page on RIAForge

These principles can be extended to ASP and other server side scripting engines. They are in the process of building a reference library for this.

Prototyping is incomplete version of software being developed with a subset of features of the end product.

Why Prototype?

• Proof of concept. Will an idea even work?
• Design validation. Design is organic, so prototyping gives you an idea how something feels.
• Management buy-in. Helps to create a shared vision.
• Reduce misinterpretations. For stakeholders, developers, team members.
• Save time and money. Find and fix process problems early. Overcome design imperfections – often, real world data will change design.
• Power of show and tell.

Guidelines for Prototyping

• Short timeframes. A day, a week. Get something out there, iterate often.
• Build only what you need.
• Don’t be afraid to throw it out.

Types of Prototyping

Low Fidelity – Quick to develop, allows for exploration of ideas, can be more difficult to conduct user studies, zero coding. Includes activities such as paper prototyping using pen and paper, OmniGraffle. Carolyn Snyder wrote the book on Paper Prototyping.

Medium Fidelity – More real user experience, longer design and development time, still limited functionality. Use tools such as Axure, simple HTML, Balsamiq, PowerPoint, Napkee.

High Fidelity – Closer to reality. Greater design requirements. More development time. Can serve as reference platform for other groups (Engineering, QA, Marketing). Use tools such as Ajax with HTML, Flash Catalyst, Flash Builder, Axure, Balsamiq.

User Testing

Put real people in front of your product or service.

Rocket Surgery Made Easy: The Do-It-Yourself Guide to Finding and Fixing Usability Problems - Book

Pitfalls of Prototyping

Be aware of the fidelity trap.

“Looks Done to me! Ship it!”

Prototyping: A Practitioner’s Guide – Book

Font stack is a very early example of progressive enhancement. Compare black & white to color TV’s. When color TV’s came out, program directors’ didn’t say we’re going to keep filming in black & white. Providing visual rewards to those with advanced browsers. CSS3 is a series of modules and was designed that way so browsers could implement them in stages.

Optimal ordering for vendor-specific CSS.

• -webkit-border-radius
• -moz-border-radius
• border-radius

Vendor prefixes are important for testing implementations, precursor for standards and allow you to use this now.

What works today?

Transforms, Transitions & Animations (Safari) – These actions occur outside the flow of the document, it doesn’t affect the box that it’s in and will not affect the rest of the layout.

Transitions

See hovers on tabs at http://handcraftedcss.com/tugboa

Transition goes on normal state of element. Transition can be used onclick, without JavaScript using the active state.

Example:
background-color .4 linear
property duration timing-function

There is also an all property.

Background transition background image on hover.

2D Transforms include rotate, scale, translate (move) &  skew.

Tranform translate moves image away from mouse. Skew uses X, Y coordinate and causes text to slant to one direction.

Animation

Involves defining and naming a keyframe.

Borders & Backgrounds

Some of the most applicable right now.

border-radius for rounded corners on a box

When you get into individual corners, the syntax differs for -moz. If you don’t specify each corner, all will be rounded.

border-radius.com – to get entire stack without worrying about syntax

Text-Shadow

CSS2 supported in webkit initially.

-text-shadow: 0  -1px 1px #300;

You can use multiple text shadows.

Box-Shadow

Box shadow goes out into the gutters and doesn’t affect the box model.

-webkit-box-shadow: 2px 2px 4px #000;
-moz-box-shadow: 2px 2px 4px #000;
box-shadow: 2px 2px 4px #000;

Border-Image

Allows you to stretch images around the edge of a container. It can be confusing. There are nine sections. Causes extra work to be sure it degrades well and is confusing to grasp.

Multiple Backgrounds

Syntax is simple, comma-delimited URL’s & supported in latest Firefox, Safari & Opera. List critical background images first, so it degrades gracefully.

Color & Transparency

RGBA = Red / Green / Blue / AWESOME (or amount of transparency) – can give a bit of the same effect as overprinting in print work.

Example: rgba (255, 255, 255, .8) 80% transparency

Specify solid color before rgba for non-compliant browsers (Internet Explorer)

RGBA for text – Examples: http://www.wilsonminer.com/ & http://24ways.org/

Use RBGA for transparency on backgrounds that cover images. Also works well on textures to let texture come through.

Use opacity for dimmed image, opacity: .5, on hover opacity: 1.

Selectors & Typography

:last-child & :first-child

:nth-child

:nth-child(5n) (every 5th)
:nth-child(5) (only the 5th one)

Zebra Tables – :nth-child(odd)

Beware of relying on :nth-child for layout

attribute selectors

input[type="text"] {width: 200px;}
disabled=”disabled” or enabled=”enabled”

Substring matching

ID’s that begin with … or end with… or wildcard

CSS3 Selectors Explained

Compatibility Table for CSS3 selectors

Typography & CSS3

Drop caps. Old way was initial character in a span, so we could style it differently. New way is using :first-of-type:first-letter selector.

Use the Best Available Ampersand

CSS3 Layout

Multi-column layout. Set up 3 column layout & set up borders for in between them using column-count, column-gap, column rule. Not practice for long articles where you might have to scroll up and down to read multiple columns. Good for print style sheets.

Font Embedding

http://en.wikipedia.org/wiki/Embedded_OpenType – Legal issues, someone could just grab font. Many free fonts available, http://www.theleagueofmoveabletype.com/ & http://www.josbuivenga.demon.nl/

How to use @font-face. This article overstates complexity of implementation. Go with the simple case of true-type and open-type and let IE default back to standard web font.

Font Squirrel scours the internet in search of FREE, highest-quality, designer-friendly, commercial-use fonts and presents them for easy downloading.

Font is cached when using TypeKit. They work through legal issues and you pay them.  Uses JavaScript you paste into your document. Many of TypeKit fonts are also re-hinted for the web.

Using CSS3

To enrich user experience, when site stats rule, experimentation, mobile dev and prototyping.

That’s it. My cache is full. I’ll be editing and organizing this content soon.

Example sites: http://css3exp.com/moon, http://handcraftedcss.com/tugboat & http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com/

History of HTML

There never was an HTML 1. The first version was HTML 2 in November 1995. HTML 3.2 in January 1997, HTML 4 in December 1997, HTML 4.2 in December 1999. XHTML 1.0 in January 2000, XHTML 1.1 was problematic because it  must be served as mime-type: application/xml in May 2001. XHTML 2.0 never happened (it was going to deprecate the img element at one point), because there was a disparity between reality and what W3C wanted the web to be. Internet Explorer 9 to feature support for XHTML 1.1, “that’s so cute.” Plucky rebels from WHAT-WG put forward proposal to use existing XTHML with new features, W3C disagreed. WHAT-WG initially worked on Web Applications 1.0 & Web Forms 2.0, eventually the two merged  into HTML5, the lack of space between HTML and number 5 is intentional, this is not a new version of HTML. In October 2006, Tim Berners-Lee finally realized HTML5 was the way of the future, got W3C HTML Working Group to agree. WHAT-WG still exists and specifications are slightly different, occasionally they are ported to W3C. January 2008, HTML 5. Timeline: HTML5 Candidate Recommendation in 2012.

The web standards process is a lot like sausages, they taste good, but you don’t want to see how they’re made. -Jeremy Keith

The dates are only of interest to the standards body. We don’t wait until a spec is complete to start using it. We use it when browsers support it.

HTML5 design principles value users over authors (us) over implementors over specifiers over theoretical purity. Pave the cowpaths based on what people want and what people need & evolution not revolution (backward compatibility). Standards and working groups will often pay more attention when they see working code with theory behind it.

Doctype & Character Encoding for HTML5

Doctype for HTML5 (authors first) - <!DOCTYPE html> - *applause* - doctype is only needed/intended for document validation. This will trigger standards mode, if you’re using quirks mode, don’t use this.

Character encoding for HTML5 - <meta charset=”utf-8″>

HTML5 must be served using the text/html MIME type.

Syntax, you don’t have to close li, img and certain other tags *yikes*. Attributes don’t need quotation marks *nooo!*. We need a lint tool for HTML5.

Error handling, HTML5 is the first time this has been approached in specifications. Currently browsers reverse engineer from expected behavior & copy each other. This is one of the most ambitious parts of HTML5, all of the browser makers want it, but it’s not something authors (we) need to worry about.

HTML5 Introduces Rich Media Elements

Audio <audio src=”song.mp3″ controls preload><!– fallback content–></audio>

Fallback content isn’t the same as accessibility content. In the example above, you could have a Flash fallback, a fallback linking to mp3 on page.  Control elements can’t be styled, however you can use buttons & JavaScript to style.

Video <video controls width=”200″ height=”200″><source type=”video/ogg” src=”movie.ogg”><source type=”video/mp4″ src=”movie.mp4″><!– fallback content –></video>

“Patents are the root of a lot of pain in the ass.” -Jeremy Keith

Different browsers support different file-types. Firefox doesn’t currently support MP3, but does support Flash. Browser will interpret the first one it supports, list your preferred format first.  Important to note, these are HTML elements and can be styled using CSS. Example: HTML video player.

Canvas <canvas> and JavaScript for drawing on the screen. Example: Canvas & jQuery.

Forms

“For accessibility, a native control will almost always be better than a scripted, emulated control.” -Jeremy Keith

New input types –  input type=”…”
tel, email, url, datetime, date, month, week, time, number, range, color, datalist, placeholder, autofocus, required

Styling – can be styled as other input elements, but date picker and browswer native styles cannot be styled. Browsers will display differently, in the future browsers may compete for best looking native styles.

“Chrome is a pile of shit when it comes to accessibility” -Jeremy Keith

Semantics in HTML5

Deprecated is deprecated. Items have now been “removed” from HTML5.

Removed from HTML5

• Presentational elements: font, big, center, etc.
• Presentational attributes: border, bgcolor, etc.
• frame, frameset, noframes, acronym, axis, summary (tbd)

Changed in HTML5

• a may be wrapped around entire paragraphs, lists, tables, entire sections as long as no interactive content within.
• b changed to a span of text to be stylistically offset from normal prose without conveying extra importance.
• i changed to span of text to be stylistically offset without conveying extra importance.
• hr a paragraph-level semantic break.
• small for small print

Extensibility

Semantics in HTML5 – A List Apart, John Allsop

Structure in HTML5

New elements

mark, time, nav, article, section, aside, header, hgroup, footer, details, figure

• List and definition of new HTML5 elements – W3C Working Group
• List of HTML elements – w3schools.com

With sections, you’re creating mini-documents. Even if you’re not ready to use elements, begin using semantics (class names) to transition new elements now. At the very least, you can also change your doctype and use ARIA roles, change doctype, class names and ARIA roles or if you’re feeling really brave doctype, new elements and ARIA roles.

Creating an outline

…

Sectioning roots

…

Scoping styles

…

ARIA roles

…

600 years of typography. In 1993, the web came about and we had very little control of typography.  2008, we have 18 fonts, most still use four or five fonts.

@font-face comes about, but still isn’t used. First supported in Opera, then Webkit, Firefox and Internet Explorer in a proprietary way. When a couple of things converge, technical disruptions happen. How do you respond?

Look past where your revenue model is today and ask what we’re trying to do here. The qualities that contribute to the success of the web are the qualities that will make us successful too. We are native to the web

Initial proposal was JavaScript-based styles. http://www.w3.org/Submission/1996/1/WD-jsss-960822 After discussion and conflict, consensus was reached, but style needed to be separate from scripting. After some code was developed, the team was able to agree on what eventually became CSS.

Moving forward we can achieve rough census, but we must have the code to demonstrate. Proposal for img tag, consensus wasn’t universal at the moment, but code for Mosaic browser shipped with code for inline images using img tag.

Gauge feedback for features and write blog post about proposed features, see where that goes. Get something out there, get the idea in front of your users.

“If you’re not embarassed when you ship your product, you’ve waited too long.”  -Reid Hoffman

Watch what your users do and say. When you see a pattern, adapt your product to meet the users needs. Iterate, get things out as quickly as you can. You might not always get it right the first time. Speed of iteration, beats quality of iteration. Trying to get to that perfect release really slows you down.

We must stay on the top of our game to be successful on the web.