March 22, 2007
March 19, 2007
March 18, 2007
Political Video Smackdown!
Original Story By: Carla Marinucci
Lifted & Posted By: Edgewalker™
'Hillary 1984': Unauthorized Internet ad for Obama converts Apple Computer's '84 Super Bowl spot into a generational howl against Clinton's presidential bid
Sunday, March 18, 2007
It may be the most stunning and creative attack ad yet for a 2008 presidential candidate -- one experts say could represent a watershed moment in 21st century media and political advertising.
Yet the groundbreaking 74-second pitch for Democratic Illinois Sen. Barack Obama, which remixes the classic "1984" ad that introduced Apple computers to the world, is not on cable or network TV, but on the Internet.
And Obama's campaign says it had absolutely nothing to do with the video that attacks one of his principal Democratic rivals, New York Sen. Hillary Rodham Clinton. Indeed, the ad's creator is a mystery, at least for now.
The compelling "Hillary 1984" video recently introduced on YouTube represents "a new era, a new wave of politics ... because it's not about Obama," said Peter Leyden, director of the New Politics Institute, a San Francisco-based think tank on politics and new media. "It's about the end of the broadcast era."
But some say the ad is just the latest attempt by outside activists to influence political campaigns -- or the newest way for campaigns to anonymously attack their opponents.
The video is a sophisticated new take on director Ridley Scott's controversial Apple ad that caused shock waves with its premiere during the 1984 Super Bowl, and shows the same blond young female athlete running with a sledgehammer toward a widescreen -- where an ominous Big Brother figure drones to a mass of zombielike followers.
But this time, the woman is wearing an iPod -- and has her candidate's slogan on her chest. And the Big Brother -- whose image she defiantly smashes with a wave of her sledgehammer -- is Clinton, the Democratic presidential front-runner.
The tagline for the attack: "On Jan. 14, the Democratic primary will begin. And you'll see why 2008 won't be like 1984."
An updated Apple symbol -- transformed into an O -- is followed by the dramatically emerging logo: BarackObama.com.
Veteran San Francisco ad man Bob Gardner, whose work has included political campaigns for former President Gerald Ford, said the video is "very powerful" in its efforts to call for a generational change in politics.
"It puts Hillary spouting cliche nonsense to the drones -- while a fresh face breaks through," he says. "It's old versus new."
That theme -- reflecting a generational change in the relationship between media, politics, candidates and voters -- suggests that "Hillary 1984" could have the iconic power with the 21st century political generation that another classic political ad called "Daisy" represented to Baby Boomers, says Leyden. That 1964 spot for President Lyndon Johnson -- featuring images of a child plucking a daisy, which morphed ominously into a nuclear mushroom cloud -- battered GOP presidential candidate Sen. Barry Goldwater because it, too, portrayed "a shattering of the whole world" in both political leadership, and media.
Bill Burton, a spokesman for Obama, said he is aware of the "Hillary 1984" video and has gotten calls from reporters on it -- but he insisted that the campaign is not connected to it. "It's somebody else's creation," he said, declining to comment on the ad's biting content.
Burton said he doesn't know who created the spot, but it shows "there is a lot of energy for Sen. Obama on the Web, in communities all over the country ... and frankly, that energy will manifest itself in a lot of ways."
But in the weeks since its early March debut, the expertly created video remix -- called a mashup in blogosphere circles -- has "changed the zone" between political campaigns, their followers and the Internet, said Simon Rosenberg, president of the Washington-based New Democrat Network, an influential party advocacy group based in Washington, D.C.
With presidential campaigns now poised to spend hundreds of millions of dollars in advertising that will blanket television before November 2008, this seemingly home-produced video -- created with software and a laptop, and likely without the benefit of a team of expensive political consultants -- opens a new window, Rosenberg said. It has dramatized a brave new world in which passionate activists outside the structure of traditional campaigns have the power to shape the message -- even for a presidential candidate.
The ad is proof that "anybody can do powerful emotional ads ... and the campaigns are no longer in control," Rosenberg said. "It will no longer be a top-down candidate message; that's a 20th century broadcast model."
It also dramatizes that today, political activists with the Internet as their ammunition have gone from being "just donors to the cause," he said, "to being partners in the fight. And they don't have to wait for permission."
But while the medium is clearly more grassroots, political campaigns have not been averse to having an outside or independent voice -- witness the efforts of the Swift Boat Veterans for Truth in the 2004 presidential race against Democratic Sen. John Kerry -- delivering ads that are tougher and meaner than the candidates might launch on their own.
Eric Jaye, a San Francisco political consultant and key adviser to Mayor Gavin Newsom, said the sophisticated "Hillary 1984" effort is the "best example yet" of a crop of viral videos that have blossomed on the Internet over the past 18 months.
But Jaye predicted such efforts are bound to become attractive tools for political campaigns, which will "orchestrate these videos on the down low to communicate negative messages -- without having to own them in public."
Jaye noted that Obama's campaign -- even as it insists it has no connection to the production -- reaps a clear benefit from the mashup video: "They get to call Hillary Clinton a pabulum-spewing pseudo-fascist, without having to own it."
And he says the individual viral video efforts popping up on the Internet, however creative, come with risk for political campaigns -- especially presidential runs, where nuance and caution usually win out over edginess when it comes to shaping messages that appeal to wide swaths of voters
"They tend to be more entertaining -- but they tend to be nastier. You used to have a series of apologies for what campaign bloggers said. Now you have to have a series of apologies for what people with a video camera and software editing and a laptop do."
Still, Jaye said, there's a clear benefit in the energy such efforts create.
"If people take the time to make a campaign ad, it helps generate more excitement, more laughs. It's fresher," he said. "But it also generates more issues. You have people making ads you don't authorize."
Gardner said the success of "Hillary 1984" means that now "every candidate will have to worry about some guy with a video camera and a Mac being able to do whatever he or she wants."
At the Obama campaign, he added wryly, "they are probably calling their consultant and saying, 'Why couldn't you guys come up with something as brilliant?' "
E-mail Carla Marinucci at cmarinucci@sfchronicle.com.
This article appeared on page A - 1 of the San Francisco Chronicle
March 17, 2007
25 Code Snippets for Web Designers (Part 1)
Original Story By: TUTORIALBLOG
Lifted & Posted By: Edgewalker™
Bubble Tool Tips - Bubble Tooltips are an easy way to add (via a bit of CSS and javascript) fancy tooltips with a balloon shape to any web page.
Box Over - BoxOver uses javascript / DHTML to show tooltips on a website.
Ajax Star rating Bar - This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh.
CSS Star Rating Redux - Star rating with css tutorial
Ajax Contact Form - An unobtrusive AJAX contact form (works even with JavaScript disabled)
Wufoo - Build online forms easily with this web app
Pretty Accessible Forms - It can be time consuming to make web forms both pretty and accessible. In particular, laying out forms where the form label and input are horizontally adjacent, as in the image below, can be a real problem.
Adam’s Radio & Checkbox Customisation Method - Customised check boxes using images
sIFR 3b1: The Mo’ Betta Beta - sIFR is meant to replace short passages of plain browser text with text rendered in your typeface of choice, regardless of whether or not your users have that font installed on their systems.
Revised Image Replacement - Plenty of new and interesting revisions to the original Fahrner Image Replacement technique sprouted up in late 2003. This was an attempt to consolidate them.
CSS Rounded Corners - Spiffy Corners is a simple way to generate the CSS and HTML you need to create anti-aliased corners without using images or javascript.
Even More Rounded Corners - Another article detailing a method of doing rounded corners with CSS. In this case, single-image, PNG-based, fluid rounded corner dialogs with support for borders, alpha transparency throughout, gradients, patterns and whatever else you (or your designer) could want.
Vertical Bar Graphs - Who wants to use Excel to make a new graph each week? Using CSS and PHP you can create attractive bar graphs (yes, even the stacked kind) that are always up to date.
CSS Vertical Bar Graphs - Here’s a fairly typical vertical bar graph showing a hypothetical set of quarterly data for, say, invoice and collection totals. The difference here is that the whole thing is a simple set of nested lists and CSS. Really.
Suckerfish HoverLightbox - A really creative way to show a collection of images in a gallery.
Lightbox JS - Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.
CSS Image Maps - Image map that’s built entirely using CSS and XHTML.
CSS Image Pop-up - This is an Pop-UP image effect that is similar to the ones you see using JavaScript on mouseover or on click but THIS ONE uses ONLY CSS!
Sliding Doors CSS Navigation - A rarely discussed advantage of CSS is the ability to layer background images, allowing them to slide over each other to create certain effects.
Taming Lists - I’ll demonstrate how to use CSS to bring unwieldy lists under control. It’s time for you to tell lists how to behave, instead of letting them run wild on your web page.
The Art of Navigation - The main purpose of this design experiment is to see how far we can push CSS. Is it possible to create the most complex navigation (in terms of graphic design) and have it marked-up as an unordered list?
Navigation Matrix Reloaded - This new experiment is, as the first one, based exclusively on graphics — therefore the same usability and accessiblity cautions apply.
Light Weight Low Tech CSS Tabs - An example of light weight tabs by combining the Sliding Doors method with the Mountaintop corners idea.
Accessible Image-Tab Rollovers - I wanted to continue to use a simple unordered list for the navigation in the markup. Much has already been said about using lists for navigation, here and elsewhere. They’re compact, lightweight and accessible to text browsers, screenreaders, PDAs, phones, etc.
25 Code Snippets for Web Designers (Part 2)
Original Story By: TUTORIALBLOG
Lifted & Posted By: Edgewalker™
Tables with style - It might not seem like it but styling tabular data can be a lot of fun. From a semantic point of view, there are plenty of elements to tie some style into. You have cells, rows, row groups and, of course, the table element itself. Adding CSS to a paragraph just isn’t as exciting.
CSS Shadows - So for a couple of years now, folks have been trying to find ways to work around the fact that the box-shadow property from CSS3 seems to perpetually be just a few months away from actually appearing in Web browsers everywhere. Box shadows are a very common design element, and not being able to use them on the Web is a real pain in the ass.
Airtight Corners - Here’s a quick number on how to produce a box with rounded corners using only one image, and off-setting that image for each corner.
Collapsing Tables With DOM and CSS - Each of the tables below has a class called “footcollapse” which makes the script add the arrow images in the footer allowing the table to be collapsed and expanded.
3D Box Model Diagram - Here’s a thing. I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram.
Docking Boxes - Docking boxes (dbx) adds animated drag ‘n’ drop, snap-to-grid, and show/hide-contents functionality to any group of elements.
CSS Submit Button - For some time now we have all known about how you can treat a submit button as you would any tag when it comes to styling it with CSS, we can change its background colour, border and font styles using our trusty CSS.
PHP Style Switcher - For your style-sheet-switching pleasure, A List Apart offers the Switcher, a piece of JavaScript that dynamically changes page styles. Functional as it is, it quite unfortunately relies on the user to have both JavaScript and cookies enabled. There’s not much we can do about the cookies, but we can sidestep client-side processing with a little help from PHP.
Two Color sIFR - How to implement two color sIFR
Styled images with caption - The problem is a simple one. A client wants to add an image to their site via the content management system. They want it to look attractive, not appear too boxy (let us say they want a nice rounded corner, as this is all the rage) and have a nice caption underneath it. However, they do not know how to use an image editor (beyond basic resizing) or how to edit HTML.
Simple CSS Image Switcher - This is a pure CSS image switcher that is lightweight and standards-compliant. It could be used for a gallery or any similar function.
Dynamic Pie Chart with CSS - This is an example of creating a semi-dynamic pie chart without the use of server-side imaging libraries
Replicating a Tree Table - The aim is to replicate a graphic table tree using HTML
Listamatic - Can you take a simple list and use CSS to create radically different list options? The Listamatic shows the power of CSS when applied to a simple list.
Simple accessible external links - How to identify external links
CSS Element Hover Effect - Using css and html only
CSS Going to Print - You’ve seen them before: links that say “click here for printer-friendly version” or words to that effect. Every time you follow one of those links, you load a separate document that presents exactly the same information with a different layout, and probably different markup.
Drop Caps with CSS - The code for the dropcap is simple, but we can fancy it up a bit. We use the inline CSS for fiddling with the look.
CSS: Unordered List Calendar - This is a list boxes calendar. It isn’t the most semantic method, but it does seem to be faily stable and it resizes perfectly. A monospace font like Courier New must be used to ensure proper proportions and two characters must be used. Prepared with dynamic generation in mind.
Visited Links - Everyone does visited links differently. Jakob Neilson flunkies use the old school blue-and-purple combo to help show visitors where they’ve been. People with actual design taste use more palatable colors, or perhaps a font-weight variation instead.
Smart Back to top link - Back to top link’s purpose is to quickly position the viewport back to a beginning of a web page. Sometimes you have a variable height of the content and this link is unnecessary if a particular page is shorter than viewport height
Displaying percentages with CSS - In turning this part of the design into something flexible on the website I saw two options; clever CSS, or ‘Lots of Images’. I decided that ‘Lots of Images’ was a bad idea
Unobtrusive Sidenotes - Unobtrusive Sidenotes is a simple mix of Javascript and CSS that makes it ridiculously easy to incorporate sidenotes into your web pages or blogs.
CSS Cheatsheet - The CSS cheat sheet is designed to act as a reminder and reference sheet, listing all selectors (as of CSS 2.1) and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.
CSS Navigation Techniques - A roundup of 37 different nav bars
Subscribe to:
Posts (Atom)
