Learning the World View RSS

Excuses for Data Hugging 23 Jul 2011 11:07 AM (13 years ago)

At the Open Knowledge Conference on Open Data that was held recently in Berlin (more to follow), Andrew Stott, who led the work on data.gov.uk, shared a sample of “data hugging” excuses:

• It’s held separately by n different organizations and we can’t join it up.
• It will make people angry and scared without helping them.
• It is technically impossible.
• We do not own the data.
• The data is just too large to be published and used.
• Our website cannot hold files this large.
• We know the data is wrong.
• We know the data is wrong, and people will tell us where it is wrong.
• We know the data is wrong, and we will waste valuable resources inputting the corrections people send us.
• People will draw superficial conclusions from the data without understanding the wider picture.
• People will construct league tables from it.
• It will generate more Freedom of Information requests.
• It might be combined with other data to identify individuals/ sensitive information.
• It will cost too much to put it into a standard format.
• Our IT suppliers will charge us a fortune to do an ad hoc extract.

So just be prepared, these and other concerns will be expressed and need to be countered. Apparently administrations cling to “their” data and need to learn that it’s our data to begin with.

More CSS Drop Shadows For All Browsers 23 Aug 2010 8:00 AM (14 years ago)

Thanks to the unstoppable advancements of web standards aiding mankind to overcome the real burdens of the 21st century, adding drop shadows to boxes became much easier in recent years! No more PNG background images! Leaving the question aside whether drop shadows are really progressive and appropriate for a flat medium (anybody remember the fad of “3D” bulging buttons in the 1990ies?), I was confronted with the challenge of adding box shadows in Internet Explorer for a client project.

Pro tip: communicate to the client that shadows are a bonus feature. Your designers may disagree, but the site will not suffer considerably when special effects like box shadows, text shadows, or rounded corners are regarded as enhancements for decent browsers. However, your client’s budget will suffer when they are determined to provide the same visual effects on outdated browsers such as IE6. That said, here is the well-known method in CSS3:

1. .wrapper {
2. background-color: #fff;
3. border: 1px solid #d30d01;
4. box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
5. float: left;
6. height: 75px;
7. margin: 15px;
8. padding: 10px;
9. width: 75px;
10. -moz-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
11. -o-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
12. -webkit-box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
13. }

1. <div class="wrapper">
2. <p>CSS box-shadow</p>
3. </div>

At the same time when we rolled out the website, Robert Nyman came to the conclusion that the proprietary Microsoft filter for Shadow looks much prettier than DropShadow, so I forgot about blogging myself as his solution doesn’t rely on unsemantic markup and is more elegant:

1. .wrapper {
2. /* For IE 8 */
3. -ms-filter: progid:DXImageTransform.Microsoft.Shadow( Strength=5, Direction=135, Color='#999999' );
4. /* For IE 5.5 – 7 */
5. filter: progid:DXImageTransform.Microsoft.Shadow( Strength=5, Direction=135, Color='#999999' );
6. }

Note that you get slightly better effects when you choose a dark gray instead of black as shadow color. If you can live with the rendering of the third box below, don’t read any further.

However, applying the filter had the side effect that text inside the box wasn’t anti-aliased in IE 6-8 anymore, and the shadow still didn’t look decent enough. So we added an extra span and applied the blur filter on it.

That led to a more complex code as we needed an inner wrapper where the border and background is applied to, while the outer wrapper merely acted as a … wrapper, where the styles were reset to defaults. HTML first:

1. <div class="wrapper ms-box-shadow">
2. <div class="inner">
3. <p>Internet Explorer with blur filter</p>
4. </div>
5. <span class="shadow"></span>
6. </div>

And here’s the CSS that’s added with Conditional Comments for IE 6-8 only (as IE9 supports native CSS box-shadow, more or less). The shadow element is absolutely positioned, set behind the inner content and blown up to 100%. Not original, but it works:

1. .wrapper, .inner {
2. background-color: #fff;
3. border: 1px solid #d30d01;
4. height: 75px;
5. padding: 10px;
6. position: relative;
7. width: 75px;
8. }
9. .wrapper {
10. float: left;
11. margin: 15px;
12. }
13. /* reset wrapper styles to defaults; work-around for screwed box-model */
14. .ms-box-shadow {
15. background-color: transparent;
16. border: 0 none;
17. height: 95px;
18. padding: 0;
19. width: 95px;
20. }
21. /* Move the inner wrapper to the foreground */
22. .inner {
23. z-index: 50;
24. }
25. /* The shadow element */
26. .shadow {
27. background-color: #000;
28. display: block;
29. filter: progid:DXImageTransform.Microsoft.Blur( makeShadow='true', pixelRadius=4, shadowOpacity=0.30 );
30. height: 100%;
31. left: 0;
32. position: absolute;
33. top: 0;
34. width: 100%;
35. z-index: 0;
36. }

For some reason I got a more similar result with the shadowOpacity set to 30% instead of 20%.

Where’s the crux?

If we are willing to ignore lots of bloated CSS: IE6 only blows the shadow up to 100% when the wrapper has a fixed height. This sucks, but unless you want to add more bloated code in JavaScript I don’t know of any solution for this problem. Still IE 7-8 handle a value of 100% right, and there are many cases where the height is known. Take for example photos where you’d like to apply shadows, some buttons, or horizontal shades lying above images, like the shadow of the second level navigation on this site. Beautiful, isn’t it?

Guest Lecture on Accessibility 21 May 2010 7:00 AM (14 years ago)

Last week I was invited to hold a guest lecture at the Johannes Gutenberg-University of Mainz about accessible websites. After the successful barcamp at the University of Mainz in November the executive director of the institute for informatics at that time, Prof. Dr. Herbert Göttler, had the idea to continue that contact. So now there is a small series of talks about current Internet practices.

First I talked about the term of disability in a changing social and political context, then I lead to the demographic trend, hence to accessibility as an economic imperative. I showed a few barriers and techniques in practical examples as “virtual wheelchair ramps” and ended with an outlook on the challenges we currently face in the W3C HTML Accessibility Task Force.

The slides are currently available only in German at Slideshare where they can also be downloaded (15 MB). I will further adapt the slides and translate them for a Mozilla P2PU course in September, I appreciate your patience. There are also notes in the powerpoint file for a more detailed description.

But the story continues: beginning in the winter semester I’ll have a lectureship once a week at the university, teaching organic frontend development with contemporary techniques.

Web Performance Optimization (WPO) 18 May 2010 7:00 AM (14 years ago)

Yesterday I held a talk at the Webmontag in Frankfurt about web performance optimization. According to the prophecy WPO will become an industry like SEO in the near future. Tenni Theurer and Steve Souders began to examine the performance of websites at Yahoo! in 2003, I learned about it in 2006 from Nate Koechley and subsequently blogged about it. In the meantime Souders published two books about the topic and works today at Google.

The goal of web performance optimization is to become faster and smaller: research at Yahoo! and Google found that just 10-20% of the perceived loading time is caused by the server. A few years ago we thought performance was exclusively connected to the server. However, 80-90% of the loading time incurs in the frontend. Thus WPO is more efficient targeting the frontend.

Two important weak points are JavaScript files and the sheer number of files: JavaScript loads sequentially and blocks subsequent code until each file is loaded. Hence it shouldn’t be located in the head, but in the foot of a page. Secondly older browsers, in particular Internet Explorer, will only load 2-4 files in parallel. Files queue up and get processed when it’s their turn. Therefore aggregation of files is used for reducing the number of HTTP requests.

Several international companies have conducted research or just tracked the effects of optimization.

Effects of slowness

• Amazon: 100 ms delay caused a 1% drop in revenue.
• Google: 400 ms delay caused a 0.59% decrease in search requests per user (earlier tests list larger numbers).
• Yahoo!: 400 ms delay caused a 5-9% decrease in traffic.
• Bing: 2 seconds delay caused a 4.3% drop in revenue per user.

Effects of speed

• Mozilla made their download page 2.2 seconds faster and was rewarded with an increase of 15.4% in downloads.
• Google Maps reduced the file volume by 30% and observed a 30% increase in map requests.
• Netflix enabled gzip on the server; simply by this single action pages became 13-25% faster and saved 50% of traffic volume!
• Shopzilla succeeded in reducing the loading time from 7 down to 2 seconds, whereby the conversion rate increased by 7-12%, they observed a 25% increase in page requests, they were able to retire 50% of their servers, thus saving energy costs.
• AOL observed the number of page views on several websites. While the fastest users requested 7-8 pages, the slowest only viewed 3-4.

As a cream topping Google recently announced to factor in the site speed as a parameter in web search ranking.

Eventually pages become faster, clients are happy, generate more revenue and page views, while power consumption and CO₂ emissions decrease. Saved the world, again! And if you’d like to contribute, start by checking the rules at Yahoo! A few tricks beyond that can be found in the presentation which will be translated soon.

Heroes – Transmedia Storytelling 29 Mar 2010 8:00 AM (15 years ago)

Another inspiring panel at SXSW featured Tim Kring as interviewee. He is a screenwriter and began his carrer with episodes for Knight Rider, achieved his breakthrough with the cult series Crossing Jordan and since 2006 with Heroes: in an alternative reality the protagonists discover they have super-powers.

What would Rupert do?

The usual marketing scheme for a successful series would be selling licensed products. So there is a loveless website, t-shirts, coffee mugs, DVDs, comics, eventually the stars produce a mediocre pop song. Fan pages will be sued, and the industry would bitch about weak sales because of evil pirates. However we’ve seen more successful ways, for example when the fantasy and science fiction novels that came along with Forgotten Realms or Shadowrun became more popular than the original role-playing games. All those products are set in the same fictional world, but the different media remain closed in themselves: for understanding the novels it is not necessary to know the game.

Then what is transmedia? Here is a quick introduction:

Heroes Transmedia Storytelling Extensions

“Heroes provides the most innovative and immersive interactive TV experience on the web.”

Central in that universe is the TV series, accompanied by a wiki, web comics (in JPEG, flash or PDF format), several websites, mobile strategies, webisodes exclusively published on the web and many more – and they all form a narrative whole!

Transmedia Storytelling

When a character doesn’t appear in the series for a couple of episodes, their story goes on in the webcomics. The fictional characters have their own blogs, pages on MySpace and Facebook and ask their fans for help via SMS. Hanna even publishes clips from news channels in her blog. A fictional candidate for the US congress has his own website hacked by Hanna. Another discusses scientific theories in his book Activating Evolution (would be even more convincing if it was out-of-sale at Amazon). Fictional companies appear in the series, fans can apply for jobs on their websites thus getting insider information, or they can “hack” their surveillance cameras. Fan fiction and art is supported and can eventually become part of the series.

That idea isn’t exactly new, emotionally drawing in the fan base through “secret” information. As early as 1997, before the Star Wars prequels, George Lucas registered numerous domains temporarily forwarding to starwars.com. Then the information was spread around in Usenet and they observed which domains generated the most page views. Then a mysterious swamp environment was created at naboo.com. Apart from the usual swamp noise we can hear the calls of the Peko bird and the Nuna toad. Subtly playing with the methods of easter eggs those animals will move across the screen when you enter “peko” or “nuna” hearing their sounds. After about five minutes the swamp water begins to ripple. If you click on it you originally landed on a simple page with background information. Of course ten years later Heroes is editing and interweaving the content more elaborately – originally there were five people on their web team, now there are more than fifty.

Heroes has a world wide fan community – even in countries where the series isn’t officially aired on TV. It’s one of the most unauthorized downloaded torrents on the web. At least producer Tim Kring doesn’t mind that: Kring says “we fish where the fish are.” The whole multimedia strategy is designed for numerous sources of income. If fans get hooked via illegal downloads, the company will earn money elsewhere with them.

Most importantly today’s fans want to participate in “their” series, and this means more than offering contests and sueing them when they actually adopt content. Heroes is the pioneer massively involving their fan community into that complex alternate reality. The web provides the central communication platform, technically but most important creatively. In that depth this is an entirely new challenge for TV providers and Internet agencies!

The Long Tail: Kids With Homemade Flamethrowers 26 Mar 2010 8:00 AM (15 years ago)

One of the most entertaining panels at SXSW last week was What We Learned Watching Kids With Homemade Flamethrowers. For those of us who are unfamiliar with that microgenre here is a short introduction:

YouTube Video

What can we learn from this?

On YouTube alone on this topic there are some 1,500 videos with a total duration of 25.2 hours. There are videos on almost every topic, however bizarre they may be. Even on topics that aren’t any topic at all, like “we got some food at McDonald’s and film now how we eat burgers.” Who watches that stuff? Hardly anybody. Welcome to the “long tail,” the niches of exponential decline accounting for a large amount of more than 100 million videos on YouTube.

There is a point when those niches become unmarketable. We’ve seen in the video above how larksome kids set their car on fire, or half a forest. Others test flamethrowers in their bedroom or try to light a cigarette with a flamethrower. These are rather silly actions, not mentioning obviously illegal things – alone on the consuming of psychoactive salvia (prohibited in Germany) there are 13,700 videos on YouTube.

Nobody would buy adverts on such a video. However, YouTube is financed by advertising. At the same time it becomes exponentially easier to produce and upload videos with a camera on your mobile: the “long tail” gets longer, thus the costs for hosting and streaming. Well, at the same time those latter factors get cheaper by the hour, but with the commercialization of those platforms the question arises: are those microgenres endangered? And what would we miss if we didn’t have these obscure contents any more?

Microgenres are the primeval soup of the Internet. Here the trends of tomorrow crop up, therefore they are also an economic driving force.

Even if there’s no such things as a community, a subculture of youth with self-made flamethrowers – for example the discussion whether there is a danger of flames flashing back into the container appears over and over again – still those contents create social relationships.

With those single irrelevant snapshots in time our society has the unique opportunity to create a comprehensive archive of everyday life of the 21st century. Just think of the scientific value of these recordings today or in a hundred years! Therefore yes, what we consider trivial today will have considerable historic-documentary or scientific value tomorrow.

And yes, in the hands of a company like Google that is subject to commercial constraints and changes, this content is in danger of getting deleted. Out of the top 100 companies existing a hundred years ago, today still three exist. While commercial, expensively produced content has linear growth, non-commercial content grows exponentially. When there is a point where the marketable part cannot support the other any longer, we are facing the loss of this archive of amateur recordings. Unless Google knows and speculates with that value?

A possible solution might be a new initiative by Wikimedia: let’s get video on Wikipedia. Because even while today 1,500 flamethrower videos are still irrelevant for an article on Wikipedia, they could find a new home at Wikimedia Commons.

Ada Lovelace Day 2010 23 Mar 2010 2:00 PM (15 years ago)

Today is Ada Lovelace Day, an international day of blogging to celebrate the achievements of women in technology and science. Augusta Ada King, Countess of Lovelace, wrote the first programs for Charles Babbage’s mechanical computer.

This post is to commemorate my grandfather’s grandmother, Antonia Odenweller. She was born 33 years after Lady Ada, on January 7th, 1849, in Kransberg, a village in a valley of the Taunus mountains, about 30 km north of Frankfurt. She was the daughter of the mason Ludwig Friedrich¹ and his wife Eva.² My great-great-grandmother married Joseph Odenweller³ in 1870 who served as a combat medic in the Franco-Prussian War 1870/71, where he received an internal wound that led to his early decease in 1878 at the age of 30. Antonia died March 3rd, 1911, in Usingen.

So what’s got that to do with technology, you ask? Here’s what my grandfather Wilhelm Kliehm wrote about her in his diary,⁴ more than 50 years ago:

Due to the early loss of her bread-winner my grandmother had to earn her livelihood by sewing. Thus she was often out-of-town, and mostly in Winter she was at our place at home.

People tell me about her that she was the most beautiful and strongest of her siblings. She was good at writing poems and provided them to everybody at every occasion. Alas I wasn’t able to obtain any of them until today.

Grandmother was in her younger days (roughly at 14-18 years) in Friedrichsdorf in the employ of Philipp Reis, the inventor of the telephone, at a time when Reis was still working on the invention. Grandmother often had to help him strain the wires across the yard into the barn, listening to the first sounds. So to speak she was the first foreign person Philipp Reis was speaking to on the phone.

In fact the Philipp-Reis-Museum and archive in Friedrichsdorf confirmed that Antonia worked in the household around 1866; according to the notes of my grandfather she would have been employed there between 1863-1867. Philipp Reis started to work on his first prototype between 1858-1863, he also coined the term telephone.

Alas the inventor died of tuberculosis in 1874; I guess otherwise grandma Antonia could have asked him for work after her husband passed away, instead she resorted to sewing. I can imagine her very well straining the wires and assisting Reis, and since she wrote poems I assume she was somewhat smart — who knows what else she contributed to the invention? Had she been born in another century, she might have become an engineer!

The barn where Philipp Reis had his workshop:

In a broader historical context, Prussia annexed the Free City of Frankfurt and the Southern part of the Grand-Duchy of Hesse-Darmstadt in 1866 after the allies lost the Austro-Prussian War. So I guess that brought massive changes to the citizens and could be the reason why my great-great-grandma quit her job in 1866/67 as it was unsafe for a young woman to work in occupied territory.

So this everyday example shows that even in the 19th century women in technology might have been more common than we thought, but were much more constrained by society. A mere 150 years later the constraints are less visible, but still exist in some people’s heads. Let us embrace diversity instead and respect the talents of people, without any reservations. My great-great-grandmother Antonia Odenweller is my personal technical heroine, and so could be you for successive generations.

Footnotes

Please note the German version of this post on my employer’s blog.

³ Joseph Odenweller
(1848-1878, her spouse)

¹ Ludwig Friedrich
(1824-1901, her father)

² Ludwig & Eva Friedrich
(1822-1906, her parents)

⁴ My grandfather’s diary notes (in German kurrent script):

Embedding YouTube Video with iPhone Fallback 25 Nov 2009 8:00 AM (15 years ago)

Just a quick note as a reminder to myself how to embed YouTube videos in a standards compliant, valid XHTML syntax. It works across all current browsers, doesn’t use <embed>, and has the elegant fallback displaying a still image that is linked to YouTube, thus enabling iPhone users without Flash to view the video.

1. <object type="application/x-shockwave-flash" data="http://www.youtube.com/ v/ VideoID" width="480" height="360">
2. <param name="movie" value="http://www.youtube.com/ v/ VideoID" />
3. <param name="quality" value="high" />
4. <param name="allowFullScreen" value="true" />
5. <!-- Fallback content -->
6. <a href="http://www.youtube.com/ watch? v=VideoID">
7. <img src="http://img.youtube.com/ vi/ VideoID/0.jpg" width="480" height="360" alt="[Video title]" />
YouTube Video
8. </a>
9. </object>

Please note that there are spaces in the code above to allow linebreaks. If you copy and paste you need to remove those.

Here is an example:

YouTube Video

HTML 5 Accessibility at SXSW Interactive 17 Aug 2009 8:00 AM (15 years ago)

SXSW is an enormous web conference in Austin / Texas with hundreds of panels squeezed into four days. The panelpicker application opened today and yours truly is hosting a panel on HTML 5 Accessibility. Please vote for me and twitter about it! If the panel is chosen I’d like to invite a few people (will not disclose who until the panel is confirmed, but I have a nice line-up on my mind) to answer the following questions:

1. What are the issues of accessibility in HTML 5?
2. What is the canvas element?
3. What is the difference between video built in natively in the browser or provided through a Flash plugin?
4. Why are people in the HTML 5 working group so nasty to each other?
5. Why is accessibility important in an emerging standard?
6. Can’t accessibility be added later?
7. What is the state of support of HTML 5 in browsers?
8. When can we start to use HTML 5?
9. What can geolocation do for accessibility?
10. Does assistive technology support HTML 5 features?

So please vote for it now, and while you’re at it, show your love to some other accessibility and web standards proposals as well. </thxkbay>

Amazon Plugin Authorization 31 Jul 2009 1:00 PM (15 years ago)

Oh, it’s confusing how often Amazon changes it’s product names and API. In my plugin the Help response group is used for key validation, alas recently it’s been deprecated. I need more time to look for an alternative. In the meantime you can hack it by adding a file amtap-aws-key-verification.txt in the wp-content/cache folder where the content is true.

Starting August 15th, the AWS Product Advertising API, as the former E-Commerce Service is now called, will only accept signed requests. The plugin will stop working if you don’t update. Thus I needed to re-engineer a few functions of my WordPress Amazon Machine Tags Plugin.

What you need to do is:

• Update to version 3.0 of the plugin.
• If you didn’t adapt any files just overwrite them. If you customized the CSS or XSL files, take care that you don’t overwrite yours. Also the XSL namespace must reflect the API version used in the plugin (2009-07-01), i.e. xmlns:aws= "http://webservices.amazon.com/ AWSECommerceService/ 2009-07-01"
• Get your Secret Access Key in addition to your existing Access Key ID. Your future requests will be signed using the secret key.
• Go to the plugin’s admin interface and enter the secret key.
• Some people experienced a few minutes where the items didn’t show up, instead they got the untransformed XML code. After a few minutes the problem resolved itself. My guess is that Amazon cached the XSL files, the versions mismatched, therefore the XML wasn’t transformed. That’s why I renamed the XSL files so that the new ones will be used. If you want to be sure, also delete the cached files amtap-aws-items-for-post-*.html in your wp-content/cache directory.

If you encounter any problems with the update, re-install the old version and let me know what went wrong so that we can fix it together until August 15th.

You can also support the plugin by translating it. There’s an empty PO file in the package. With a tool such as Poedit it’s fairly easy to translate everything. Thanks.