Communicate with certainty
and your Voice will be heard.

Category Archives: events


So, I recently returned from what could best be described as descent into confusion, madness and finally, utter euphoria. You see, I’ve just completed what some PR folk might call a “media tour” and others would refer to as a Mr. Magoo-like dodder-fest through the dark world of socialized media into the enlightening universe of pure communal interaction with some very intelligent and creative folks at the PRSA International Conference in Washington D.C.. Not only did I speak at the PRSA International Conference and do a video interview right after I finished, but I also did an interview with the brilliant Eric Schwartzman, host of “On the Record…Online,” penned a blog post at PRSA.org and led a webinar about social media – all within a 6 week timeline.

But let’s start from my arrival in the former District of Columbia…

…I exited my Amtrak Iron Horse after she galloped safely into Washington’s Union Station, thinking I would be a clever chappy by using the mighty D.C. mass transit system to reach my final destination – the Washington Hilton, home of the 2010 PRSA International Conference as well as the place where then-President Ronnie Reagan was shot at by a slithering toad (and Jodie Foster aficionado), named John Warnock Hinkley, Jr. back in 81′.

I must confess to being a bit of a tech junkie, as I was aptly armed on my journey to Washington with my Android phone, an iPad, an iPod and a computer loaded to the silicon gills with what I hoped would be a delightful tiptoe through the social media glory of a Website that The Mechanism had built for Flight of the Conchords. The comedy pop duo and former HBO stars are now likely the bona-fide and rightful owners of the country of New Zealand after a successful tour of Europe and the United States during the summer of 2010.

In addition to my shoulder pack containing every electronic device known to human, I was slugging my suitcase, a freshly-pressed suit, and finally, a three-foot-by-two-foot flat slice of unassuming cardboard, which contained some very nicely designed and rare Flight of the Conchords posters (graciously donated by the band’s management), which I was truly excited to give away to some lucky attendees of my chat at the PRSA Conference. I figured if I really bombed as a speaker, my saving grace would be at the end. After the boos had ended and the cat calls of “Well, look at Mr. Social Media Tough Guy!” had subsided, I could whip out a couple of fancy posters – and much like Houdini shackled in a chest in the ocean – escape as the awesomely heroic “Pied Piper of Social Media”, dancing my way into everyone’s hearts and minds.

So…I’m inside the cavernous Union Station in D.C., seeking advice from my Android for the best mass transit route to my destination. After several moments attempting to locate the subway station on the Google map and giving up, I walked out into the afternoon air. I strolled like a knucklehead toward the first person who looked like a native of the city and pulled some real “old-fashioned” social media mojo on them by personally asking how I could get to the Washington Hilton on Connecticut Ave.

“Well, that depends which side of Connecticut you want to go to,” she politely said, indicating to me that not only were there at least two Hilton hotels in Washington, but there were two Hilton hotels in Washington in opposite directions of the same street. It was at that precise moment that I realized that the cardboard poster container that I had held so dear to my survival at the PRSA Conference had been left back inside Union Station against the wall.

I politely, yet discretely excused myself from my conversation and high-tailed it back into Union Station. Surprisingly, and mercifully, the Social Media Gods were shining down on me, and the posters were safely leaning against the wall, exactly where I left them. I grabbed them, kissed them and returned to my journey.

I should have realized the trouble I was about to be in and taken a taxi immediately…

The underground mass transit snake that I boarded took me swiftly to Dupont Circle, which a kindly fella in the Metro Station had told me was in the vicinity of the hotel. In my opinion, this particular destination is possibly a portal of hell, resembling – from a birds eye – an unholy nucleus of evil incarnate, with none other than 12 streets slithering from it’s demon heart in every direction. Of these 12 foul streets, four of them bear the name Connecticut, and both directions from Dupont Circle are suspiciously named “Connecticut NW”.

For the next hour and a half, I wandered aimlessly in every direction but the correct one, carrying a computer bag, my suitcase, a freshly-pressed suit and finally, that 3-foot-by-2-foot flat slice of cardboard which contained some very nicely designed, and as I’ve mentioned, rare Flight of the Conchords posters. After leaving a trail through the Dupont area that could only be compared to the flight of a brain-damaged hornet, my destination was in sight. Halfway up the hill, I squinted my tired eyes to gaze upon the Hilton sign and the place where I would be speaking about Social Media, the Flight of the Conchords Website and be giving away some very nicely designed – and as I’ve mentioned extremely rare – Flight of the Conchords posters.

But I didn’t have the cardboard container.

With sore feet, a sour disposition, an aching back from carrying a now sloppily packed and disheveled suit, a computer bag and a suitcase on wheels worn to a bloody axle, I realized that at yet another point on my now Oddyssec journey from Union Station to the Washington Hilton, I had inexplicably put the posters down again and left them behind. Rather than go absolutely ape-shit (like anyone else could have rightfully done in my opinion), I decided to slug back down the hill, with all of my crap dangling from me and try to find the posters…

After another half hour attempt to recapture the true magic of my mindless path (exemplified by the blue line on the map below), I realized that it wasn’t to be. I scaled the hill to the Washington Hilton and checked in – truly defeated and anticipating a hissing horde of social media gurus to torch me at the end of my presentation like Frankenstein’s Monster or the Hunchback of Notre Dame, without the necessary lifeline of my fancy posters to save me from certain doom.

The grim details of our hero’s journey through the wilds of Dupont Circle

Needless to say, this story ends quite happily. After dropping everything off in my lovely hotel room, I gallantly retraced my steps and located the three-foot-by-two-foot flat slice of cardboard (containing some very nicely designed, rare and likely expensive Flight of the Conchords posters) – laying casually in the street, exactly where I had left it. My talk went well, as evidenced by the well wishers, tweeters and generally friendly folk at the PRSA Conference. Some of the attendees gleefully walked out with some fancy Flight of the Conchords posters devoid of any desire to boo, beat or burn me like a social media Quasimodo, lost in the unholy maze of Dupont Circle.

Dave Fletcher is the Founder & Executive Creative Director at The Mechanism, a multi-disciplinary design agency with offices in New York, London and Durban, South Africa. He is also an avid Social Media junkie as evidenced by the number of confused Gowalla and Foursquare check-ins that occurred on his hellish trip through the wilds of Dupont Circle. He also wants to thank Albert Chau, the photographer who sent over the photographs from the 2010 PRSA Conference and the fine staff of PRSA for a grand old time in Washington D.C..

The New York Web Standards Meetup will meet 17 March 2010 at reBar at 7:00 pm for "CSS3 and the Death of the Background Image, or Yet Another Talk on Progressive Enhancement (aka Death to IE6/7/Sometimes 8)."

The immense CSS3 proposal (which has been on the W3C's table for years) is now seeing a significant number of draft modules being implemented in browsers and most of these modules are explicitly geared toward reducing our time in Photoshop. In this comprehensive how-to, Marco Carag (TheKnot.com) will run through all the new properties you've been reading about and anticipating, including @font-face, rgba, gradients, drop-shadows, transforms and animation. Using both focused proof-of-concept pages and actual production examples from The Knot and other websites across the web, attendees will see the impact of CSS3 on the average front-end workflow and understand how it improves or affects your users' experience across all browsers.

CSS3 and the Death of the Background Image
17 March 2010 . 7:00 pm
reBar
147 Front Street
Brooklyn, NY 11201 [map]

RSVP now!

Please contact The Mechanism if you'd like to present at a future New York Web Standards meetup.

Håkon Wium Lie

Photos and discussion of CERN and Tim Berners-Lee. How the web was actually developed by Tim at CERN. Pretty hilarious.

CSS a response to potential destruction of HTML's markup language with presentation elements. Currently CSS still relies too heavily on images and the occasional table hack.

HTML5 + CSS3 = WEB8. CSS3 is not a single specification, a series of specifications.

CSS1 could style text in an element. Some borders. A revolution when it came out.

For this presentation, Håkon is using a special build of Opera that isn't publicly available.

1
text-shadow

. Web font: Safari, Firefox and Opera.

Håkon believe web fonts is going to be the big new thing. Will create a pre- and post-font Web.

1
@import url(path/to/font);

1
font-family:Cardiff;

IE is the only one that does not not support this. Argument now breaks out between Håkon and Pete LePage

IE has supported a broad range of fonts since IE 4, but .EOT. However, the above @import is all TTF. IE uses .EOT because font foundries want support for DRM. Check out Fontdeck and Typekit.

At Standards.Next, IE pledged support to add support to TTF along with EOT.

rgba()

1
background: rgba(0, 0, 255, 0.4);

See Molly's presentation.

A review of Opera's support for the CSS 3 features discussed by Andy Budd.

Opera Unite

Turns browser into a server. Allows people to access your machine via

1
http://

. Can be quite useful.

It's not the cloud. This service is close to machine and useful for local collaboration. Millions of phones use Opera. Peer-to-peer model. Can take picture and easily

Question/Answer

Q: When will the geolocation build be integrated with the shipping version?

A: Not sure; no date yet. Will probably not occur until the standard is more fixed.

Pete LePage
Senior Product Manager, Developers & Security for IE

IE 8

IE 8 is a hybrid, has two engines; IE 9 will have three engines: IE 7, IE 8 and IE 9. This way can ensure site works in future versions of the browser.

IE 8 supports session and local storage (see presentation by Marcus Lofthouse to the New York Web Standards Meetup). Added addition to spec: a way to remove all.

Mutable DOM prototypes: take a DOM element and add properties/methods to it. Add method to

1
img

. There are a number of things not implemented in IE 8. Can write a chunk of JavaScript that adds functionality to browser. This will be used by people writing the JavaScript frameworks (jQuery, Dojo).

Native JSON support.

Network events

CrossDocumentMessaging and CrossDomainRequest

Selectors API

Fixed getElementById.

Demos at ie8demos.com (browser-sniffs and only wants to work in IE 8).

IE 9

  • Faster; speed is important. Finally comparable to FF.
  • A lot of work on standards-support. Will implement border-radius. Acid3 score went from 20 to 32. IE 8 Current CSS3 support is vertical-text. Hope to more than double it in IE 9. ;)

Questions/Answers

Q: Why always trying to play catch up? Why not just adopt Webkit?

A: A lot of things that make adopting Webkit or Gecko more difficult than it seems.

Q: Any release date for IE 9?

A: No dates as of now

Q: Still trying to get Canvas out of the spec for HTML5?

A: Not sure; might be a miscommunication

Q: Any major updates planned for IE 8?

A: Probably not; next major version will be 9. Security updates will be released for 8, but the rendering engine will not change.

Molly Holzschlag

RGB: Additive synthesis

Red, Green, Blue: Add colors to get result color. In print world, subtractive. Remove color to get result. R + G + B = white

RGB color notation

RGB in percentage values or RGB in integer values. Not equivalent; so don't use both (mix in a single rule)!

NOT

1
rgb (60, 100, 50%);

Firefox and Opera will ignore the incorrect rule. Safari and IE (5–now) will attempt to correct and end up with a severely washed-out result.

HSL color

Hue, saturation and lightness. Easier and more intuitive way to get to colors we want as designers. Value from 1–360, then adjust saturation and lightness.

  • Hue value comes first, using the hue's angle on the color wheel as represented by an integer.
  • Saturation comes next, using the percentage of saturation you'd like
  • Lightness is next, using the percentage of lightness you' like

HSL advantages

  • Not CRT specific
  • Easier, more intuitive to work with
  • Working with a set of colors allows for easy palette creation
  • Reduces errors
  • Reduces dependency on charts and other value lookup tools

As adjust saturation, lightness, base-hue remains the same.

RGBA and HSLA

Alpha transparency for both RGB and HSLA.

Notation is the same in both. a value is alpha transparency from 0–1.

Allows for fully opaque to fully transparent.

1
hsla(0, 100%, 50%, .25)

Supported by Firefox, Webkit and Opera.

Questions/Answers

A: Best article out there on HSLA is Wikipedia. Useful to have the color wheel.

Q: Why is a value decimal instead of percentage?

A: Not sure. No one remembers a discussion about it.

Q: Is this part of the spec?

A: Yes. It is all part of the CSS3 color module.

Andy Budd

Border radius

1
-webkit-border-radius: 30px;

Safari, Chrome, Webkit suppot it. Gecko does as well, but the syntax a bit different. IE 9 to support border-radius as well.

  • Currently not supported in Internet Explorer
  • Problems with images overlapping corners

Border image

1
border-image: url(border.png 25% 12% 30% 20%;

1
-webkit-border-image

1
-moz-border-image

An ad-hoc discussion of why vendor-specific extensions exist:

  • Useful for testing out features, instead of a general release and then breaking general release codes.
  • To become a proper standard, must exist with two different implementations.

Multiple background images

Example Silverback app

1
background-image: url(path), url(path);

1
background-position: 150% 0, 40% 0;

Older browsers get no background a'tall.

Borders and backgrounds are coming soon (general release).

Gradients and reflections

Buttons are generally bitmap images. Can now create a beautiful button using gradient and reflection purely in CSS.

1
-webkit-gradient(linear, left top, left bottom, from(#abe143), to(#cccccc));

1
-webkit-box-reflect: below 2px;

[Will need to do some demos of these things]

box-shadow

Box shadow property attaches one or more shadows to box. Offset, size, blur and spread. Can also do inset box shadows. Exactly the same as working with box shadows in Photoshop.

Example: http://2010.uxlondon.com/

Transforms

Can scale, rotate, flip, skew, etc. Can use translate to create animations/move over time

Demos: http://remysharp.com/demo/rubiks/
http://webkit.org/blog-files/leaves/

Questions

Q: Box-shadow has recently been removed from the spec, even though it has been implemented. Should we use it or not?

A: When younger, Andy Budd would have said, "If it's not in the spec, don't use it." Now, he's more tolerant. Not as impressed with the W3C as he once was. Doesn't always give designers what they need.

Molly: It has been difficult to get designers involved with the creation of the spec. As a volunteer, tech spec heavy group, difficult to keep designers active.

Q: Regarding animations, between JavaScript, Canvas, SVG and CSS, what do you think the best technology to bet on is?

A: Easiest is best, why Andy favors CSS.

Q: For individuals, CSS might be easy, but not so for large organizations where designers/developers have a large codebase to absorb. And what about object-oriented CSS? And mixins, variables, etc? (Nicole Sullivan's work)

A: Andy is opposed, because CSS is used more often by designers than programmers. Thinks it’s an interesting concept, but not necessarily the answer.

Having gone from table-based design to CSS-based layouts, works well with 5-6 page templates, but with very large sites, doesn’t necessarily scale. This is where an object-oriented CSS approach comes in use.

Andy thinks the framework is not useful. There is no one size fits all framework. He develops site-specific frameworks. A lot of libraries and components that are re-usuable, but specific to site.. Hates Blueprint, 960.

Q: Tips/techniques on testing?

A: Creates a central page that uses all components. Creates a type of regression testing. If change anything, can scan that page to see if anything is broken. Testing does not occur at the end of the process; testing should be occurring throughout the process. This includes cross-browser. Use VMware.

Follow the hash tag #standardsnext to track the event on Twitter.

Introductions from various audience members. Who they are, what they do and challenges they face.

A brief discussion of Internet Explorer and a plea for tolerance from Molly Holzschlag.

http://standards-next.org/ built using HTML5 and CSS3.

HTML5 Part Three: Session, local storage, Web databases, and application cache

Marcus Lofthouse (tunecore.com) will continue the HTML5 series by exploring the following web storage techniques:

  • Session and Local Storage—providing a javascript accessible interface to key-value storage.
  • Web Databases—relational database support for storing structured data inside the browser.
  • Application Cache—providing the ability to define a list of files the browser should store locally and not request from the server again (until you explicitly signal the browser that you have something new to offer). Strategically used, this allows for the creation of web applications that can be used completely offline.

HTML5 storage techniques

  • Session/local storage
  • Client-side browser databases
  • Application cache

Current techniques

  • Server-side storage
  • Cookies: often used for customization
  • Plugins (Google Gears): Not used as extensively as server-side storage or cookies

Some issues (server side)

  • Requires persistent connection to the internet
  • Large data sets have to be downloaded each time the page is loaded
  • Can be processing intensive

Some issues (cookies)

  • Difficult to work with in JavaScript
  • Get sent to and from the server with each request (whether used or not)
  • Limited to 4k depending on the browser

Session storage

  • Allow 5–10 mb of storage
  • Works in Firefox, Safari and IE 8
  • Easy to use

Using session storage

1
sessionStorage.setItem(key, value);

1
sessionStorage['key'] = value;

1
sessionStorage.key = value;

1
sessionStorage.getItem(key);

1
sessionStorage.length;

1
sessionStorage.removeItem('key');

1
sessionStorage.clear();

Local storage

  • Exactly the same—only different
  • Different in scope & persistence

Session storage scope

  • Accessible only to one instance of a browser tab or window
  • All data is destroyed when window is closed
  • Newly created windows or tabs will get a unique copy of sessionStorage; they will diverge from that point forward
  • Prevents data leaking between windows

Local storage

  • Accessible to all windows or tabs (for site—obeys same origin policy)
  • Persistent storage between browser restarts

The base features are the same cross-browser, but each browser has its own specific extensions.

More than simple key-value pairs; can also store large chunks of XML or JSON.

Client-side database

  • Provides persistent storage of well structured data
  • Currently only supported in Webkit

Comments and concerns

  • No standard web SQL dialect
  • SQLite doesn't enforce types
  • SQLite doesn't enforce data lengths

Positives

  • Asynchronous DB calls keep the UI responsive
  • JS interface provides an easy way to clean your data and avoid SQL injection attacks
  • All database calls wrapped in transactions
  • Database versioning

Opening a database

1
var name = 'cheesedb';

1
var version = '1.0';

Execute SQL statements; two flavors

1
executeSQL(sqlStatement, arguments);

1
executeSQL(sqlStatement …

Security issues

  • Same origin policy
  • Tools can allow users to modify their own local data.

What is an application?

  • Desktop: compiled source, images, config/data files
  • WebApp: HTML, images, CSS, JavaScript, config/data files
  • Largest difference is delivery mechanism: webapps require you to access the sources via the internet

Application cache

  • Allows you to instruct the browser to keep a local copy of a set of files.
  • These files can be used offline, but more importantly won't request the resource from the server until told to do so again.
  • If you specify all of the files needed to run your application you will be able to run it offline.

Application caching

  • Cache manifest

Cache manifest

  • Simple text file
  • First line contains
    1
    CACHE MANIFEST
  • Following lines contain paths to files to be cached
  • Document is declared as HTML5: <!DOCTYPE html>
  • The cache manifest file is served with …
  • New attribute for the
    1
    html

    element:

    1
    &lt;html manifest="cache.manifest"&gt;
  • The cache manifest automatically includes the file it is called from.

Other options

  • Network section for content never to be cached

Updating cache manifest

  • Browsers check to see if the cache file has been updated by doing a byte by byte comparison of the cache manifest file, not by looking to see if the server resources have been updated
  • If the file has been changed the browser will download the new assets in the background
  • Cache updating is atomic. If any file is not found, the cache manifest will re-download everything (304 or 200 requests).

Batteries about to fail; signing out

Standards.Next comes to New York and would like to invite all interested Web developers and designers to attend and participate in a free event focused on CSS3.

Talks will range from a focus on CSS3 features related to color, typography and media; to discussions of Open Web concepts, current case studies and demos, as well as brainstorming sessions to openly work with and solve shared challenges within our industry.

Speakers include:

  • Molly E. Holzschlag, who will speak on CSS3 color including HSLa and RGBa
  • Andy Budd will speak on backgrounds and borders and other cool CSS3 design stuff
  • Håkon Wium Lie, who will present on Web typography
  • Pete LePage on HTML5 features in IE

Slides, commentary and tracked Tweets will be available at the Standards.Next website at http://www.standards-next.org. Hash tag: #standardsnext

Standards.Next CSS3
20 November 2009 . 10:00 am2:00 pm
Time & Life Building
1271 Ave of the Americas 8th Floor
Manhattan, NY 10020
[map]
RSVP at http://upcoming.yahoo.com/event/4878729/