&lt;p&gt;The &lt;a href="/2009/sparql/wiki/Main_Page"&gt;SPARQL Working Group&lt;/a&gt; has published a First Public Working Draft of &lt;a href="http://www.w3.org/TR/2010/WD-sparql11-property-paths-20100126/"&gt;SPARQL 1.1 Property Paths&lt;/a&gt;, which defines a more succinct way to write parts of basic graph patterns and also extend matching of triple pattern to arbitrary length paths. The group also published six updates, listed below. The group seeks feedback on &lt;a href="/2009/sparql/track/issues/open"&gt;open issues&lt;/a&gt; in particular. Learn more about the &lt;a href="/2001/sw/"&gt;Semantic Web&lt;/a&gt;. &lt;/p&gt; &lt;ul class="show_items"&gt; &lt;li&gt;&lt;a href="http://www.w3.org/TR/2010/WD-sparql11-query-20100126/"&gt;SPARQL 1.1 Query&lt;/a&gt; adds support for aggregates, subqueries, projected expressions, and negation to the SPARQL query language.&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.w3.org/TR/2010/WD-sparql11-update-20100126/"&gt;SPARQL 1.1 Update&lt;/a&gt; defines an update language for RDF graphs.&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.w3.org/TR/2010/WD-sparql11-protocol-20100126/"&gt;SPARQL 1.1 Protocol for RDF&lt;/a&gt; defines an abstract interface and HTTP bindings for a protocol to issue SPARQL Query and SPARQL Update statements against a SPARQL endpoint.&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.w3.org/TR/2010/WD-sparql11-service-description-20100126/"&gt;SPARQL 1.1 Service Description&lt;/a&gt; defines a vocabulary and discovery mechanism for describing the capabilities of a SPARQL endpoint.&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.w3.org/TR/2010/WD-sparql11-http-rdf-update-20100126/"&gt;SPARQL 1.1 Uniform HTTP Protocol for Managing RDF Graphs&lt;/a&gt; describes the use of the HTTP protocol for managing named RDF graphs on an HTTP server.&lt;/li&gt; &lt;li&gt;&lt;a href="http://www.w3.org/TR/2010/WD-sparql11-entailment-20100126/"&gt;SPARQL 1.1 Entailment Regimes&lt;/a&gt; defines conditions under which SPARQL queries can be used with entailment regimes such as RDF, RDF Schema, OWL, or RIF.&lt;/li&gt; &lt;/ul&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;The UK Government has unveiled its open data website, &lt;a href="http://data.gov.uk/"&gt;data.gov.uk&lt;/a&gt;, developed with the help of Tim Berners-Lee (W3C Director) and John Sheridan (Linked Data Lead for data.gov.uk and co-Chair of the &lt;a href="/2007/eGov/IG/wiki/Main_Page"&gt;W3C eGovernment Interest Group&lt;/a&gt;). Like &lt;a href="http://www.data.gov/"&gt;data.gov&lt;/a&gt; in the United States, the UK site reflects a growing awareness inside and outside of government that standards-based open data is a key enabler of government services and a building block for new information services across government and industry. Additionally, this new site showcases &lt;a href="/2001/sw/"&gt;Semantic Web&lt;/a&gt; and &lt;a href="/DesignIssues/LinkedData.html"&gt;Linked Data&lt;/a&gt; technologies. Learn more about &lt;a href="/TR/gov-data/"&gt;Publishing Open Government Data&lt;/a&gt; and &lt;a href="/2007/eGov/"&gt;eGovernment at W3C&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/2008/webapps/"&gt;Web Applications Working Group&lt;/a&gt; has published the First Public Working Draft of &lt;a href="/TR/2010/WD-UMP-20100126/"&gt;Uniform Messaging Policy, Level One&lt;/a&gt;. The Uniform Messaging Policy (UMP) enables cross-site messaging that avoids Cross-Site-Request-Forgery and similar attacks that abuse HTTP cookies and other credentials. For example, content from customer.example.org can safely specify requests to resources determined by service.example.com. Rather than restricting information retrieval to a single origin, as the Same Origin Policy almost does, the Uniform Messaging Policy supports origin independent messaging. Learn more about the &lt;a href="/2006/rwc/"&gt;Rich Web Client Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/XML/Schema"&gt;XML Schema Working Group&lt;/a&gt; invites implementation of the Candidate Recommendation of &lt;a href="/TR/2010/CR-xmlschema-ref-20100119/"&gt;W3C XML Schema Definition Language (XSD): Component Designators&lt;/a&gt;. XML Schema: Component Designators defines a scheme for identifying XML Schema components as specified by XML Schema Part 1: Structures and XML Schema Part 2: Datatypes. Learn more about the &lt;a href="/XML/"&gt;Extensible Markup Language (XML) Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/2008/WebVideo/Annotations/"&gt;Media Annotations Working Group&lt;/a&gt; has published a Working Draft of &lt;a href="/TR/2010/WD-media-annot-reqs-20100121"&gt;Use Cases and Requirements for Ontology and API for Media Resource 1.0&lt;/a&gt;. This document specifies use cases and requirements as an input for the development of the "Ontology for Media Resource 1.0" and the "API for Media Resource 1.0". The ontology will be a simple ontology to support cross-community data integration of information related to media resources on the Web. The API will provide read access and potentially write access to media resources, relying on the definitions from the ontology. Learn more about the &lt;a href="/2008/WebVideo/"&gt;Video in the Web Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/Style/CSS/members"&gt;Cascading Style Sheets (CSS) Working Group&lt;/a&gt; has published a Last Call Working Draft of &lt;a href="/TR/2010/WD-css-style-attr-20100121/"&gt;CSS Styling Attributes Level 1&lt;/a&gt;. Markup languages such as HTML and SVG provide a styling attribute on most elements, to hold a fragment of a style sheet that applies to those elements. One of the possible style sheet languages is CSS. This draft describes the syntax and interpretation of the CSS fragment that can be used in such styling attributes. Comments are welcome through 09 February. Learn more about the &lt;a href="/Style/"&gt;Style Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/2009/dap/"&gt;Device APIs and Policy Working Group&lt;/a&gt; has published the First Public Working Draft of &lt;a href="/TR/2010/WD-contacts-api-20100121/"&gt;Contacts API&lt;/a&gt;. This API provides access to the user's address book from within a browser environment. Learn more about &lt;a href="/standards/techs/js"&gt;JavaScript interfaces developed in W3C&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;W3C is organizing a &lt;a href="/2009/12/rdf-ws/cfp"&gt;Workshop on the Next Steps for RDF&lt;/a&gt; around June 2010; we will announce the exact dates and location as soon as possible. Since its publication in 2004, the &lt;a href="/TR/2004/REC-rdf-concepts-20040210/"&gt;Resource Description Framework (RDF)&lt;/a&gt; has become the core architectural block of the &lt;a href="/2001/sw/"&gt;Semantic Web&lt;/a&gt;. The standard is now widely deployed in terms of tools and applications. Due to this wide deployment, additional R&amp;D activities, and the publication of newer standards (e.g., &lt;a href="/TR/rdf-sparql-query/"&gt;SPARQL&lt;/a&gt;, &lt;a href="/TR/owl2-overview/"&gt;OWL&lt;/a&gt;, &lt;a href="/TR/powder-primer/"&gt;POWDER&lt;/a&gt;, and &lt;a href="/TR/skos-reference"&gt;SKOS&lt;/a&gt;), a number of issues regarding RDF have come to the fore. Workshop participants will discuss these issues and help determine whether it is time for a new version of RDF. W3C Membership is not required to participate in the Workshop, but each participant must be associated with an accepted position paper. The deadline for position papers is 29 March 2010; see the &lt;a href="/2009/12/rdf-ws/cfp"&gt;Call for Participation&lt;/a&gt; for more information. Updates (including the exact date and location of the Workshop) will be added to the Call for Participation and will be announced on the &lt;a href="/2001/sw/anews"&gt;Semantic Web Activity News Blog&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/Style/XSL/"&gt;XSL Working Group&lt;/a&gt; has published a Working Draft of &lt;a href="/TR/2010/WD-xslfo20-20100204/"&gt;Design Notes for Extensible Stylesheet Language (XSL) 2.0&lt;/a&gt;. This document describes initial design notes for version 2.0 of the Formatting Object (FO) part of the Extensible Stylesheet Language (XSL). Learn more about the &lt;a href="/XML/"&gt;XML Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/2008/xmlsec/"&gt;XML Security Working Group&lt;/a&gt; published two Last Call Working Drafts:&lt;/p&gt; &lt;ul class="show_items"&gt; &lt;li&gt;&lt;a href="http://www.w3.org/TR/2010/WD-xmldsig-core1-20100204/"&gt;XML Signature Syntax and Processing 1.1&lt;/a&gt;, which specifies XML syntax and processing rules for creating and representing digital signatures. XML Signatures can be applied to any digital content, including XML. &lt;/li&gt; &lt;li&gt;&lt;a href="http://www.w3.org/TR/2010/WD-xmldsig-properties-20100204/"&gt;XML Signature Properties&lt;/a&gt;, which outlines proposed standard XML Signature Properties syntax and processing rules and an associated namespace for these properties. The intent is these can be composed with any version of XML Signature using the XML SignatureProperties element. &lt;/li&gt; &lt;/ul&gt; &lt;p&gt;The group welcomes Last Call comments through 18 March. The group also published several other drafts today: &lt;a href="http://www.w3.org/TR/2010/WD-xmlsec-reqs-20100204/"&gt;XML Security 1.1 Requirements and Design Considerations&lt;/a&gt;, &lt;a href="http://www.w3.org/TR/2010/WD-xmlsec-rngschema-20100204/"&gt;XML Security RELAX NG Schemas&lt;/a&gt;, &lt;a href="/TR/2010/WD-xmlsec-reqs2-20100204/"&gt;XML Security 2.0 Requirements and Design Considerations&lt;/a&gt;, &lt;a href="/TR/2010/NOTE-xmldsig-simplify-20100204/"&gt;XML Signature Transform Simplification: Requirements and Design&lt;/a&gt;, and &lt;a href="http://www.w3.org/TR/2010/WD-xmldsig-bestpractices-20100204"&gt;XML Signature Best Practices&lt;/a&gt;. Learn more about &lt;a href="/standards/xml/"&gt;XML Technology&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;W3C launched today the &lt;a href="/2010/02/rdfa/"&gt;RDFa Working Group&lt;/a&gt;, whose mission is to support the use of RDFa, a format for embedding structured data in Web documents. The Working Group's goals include making it easier to author RDFa, promoting continued adoption of the technology in HTML, XHTML, and XML, and helping developers create RDFa applications. The group is &lt;a href="/2010/01/rdfa-wg-charter.html"&gt;chartered&lt;/a&gt; to extend and enhance &lt;a href="/TR/rdfa-syntax"&gt;RDFa 1.0&lt;/a&gt;, including the specification of an API. The Working Group will also support the &lt;a href="/html/wg/"&gt;HTML Working Group&lt;/a&gt; in its work on incorporating RDFa in HTML5 and XHTML5 (as a followup on the the currently published &lt;a href="/TR/rdfa-in-html/"&gt;Working Draft for RDFa 1.0 in HTML5)&lt;/a&gt;. Learn more about the &lt;a href="/2001/sw/"&gt;Semantic Web&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/2009/dap/"&gt;Device APIs and Policy Working Group&lt;/a&gt; has published the First Public Working Draft of &lt;a href="/TR/2010/WD-system-info-api-20100202/"&gt;The System Information API&lt;/a&gt;. This specification defines an API to provide Web applications with access to various properties of the system which they are running on. Specifically, properties pertaining to the device hardware are addressed. Examples include battery status, current network bandwidth. Additionally, some of those properties offer access to the environment around the device, such as ambient brightness or atmospheric pressure. Learn more about the &lt;a href="/2007/uwa/"&gt;Ubiquitous Web Applications Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/XML/Query/"&gt;XML Query Working Group&lt;/a&gt; and the &lt;a href="/Style/XSL/"&gt;XSL Working Group&lt;/a&gt; have jointly published an update to the Candidate Recommendation of &lt;a href="/TR/2010/CR-xpath-full-text-10-20100128/"&gt;XQuery and XPath Full Text 1.0&lt;/a&gt;, and to the companion &lt;a href="/TR/2010/WD-xpath-full-text-10-use-cases-20100128/"&gt;Use Cases&lt;/a&gt;. The former defines the syntax and formal semantics of XQuery and XPath Full Text 1.0 which is a language that extends XQuery 1.0 and XPath 2.0 with full-text search capabilities. Learn more about the &lt;a href="/XML/Activity"&gt;XML Activity&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;The &lt;a href="/2005/MWI/Tests/"&gt;Mobile Web Initiative Test Suites Working Group&lt;/a&gt; has published the First Public Working Group Note of &lt;a href="/TR/2010/NOTE-test-methodology-20100128/"&gt;A Method for Writing Testable Conformance Requirements&lt;/a&gt;. This document presents a method for writing, marking-up, and analyzing conformance requirements in technical specifications that can help other Working Groups develop better specifications more quickly. Learn more about &lt;a href="/standards/techs/qa#w3c_all"&gt;testing-related work in W3C&lt;/a&gt;.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

&lt;p&gt;W3C has published a &lt;a href="http://www.w3.org/2009/policy-ws/report.html"&gt;report&lt;/a&gt; and &lt;a href="http://www.w3.org/2009/policy-ws/agenda"&gt;full minutes&lt;/a&gt; of the &lt;a href="/2009/policy-ws/"&gt;Workshop on Access Control Application Scenarios&lt;/a&gt;, held in Luxembourg in November 2009. Participants from 17 organizations examined the current limitations of access control, privacy enhancement, distributed handling of access control, and other challenging use cases. &lt;a href="http://www.oasis-open.org/committees/tc_home.php?wg_abbrev=xacml"&gt;eXtensible Access Control Markup Language (XACML)&lt;/a&gt; was a focus of the Workshop, though not the exclusive topic of conversation. The report summarizes the major "takeaways" from the Workshop, related to XACML semantics, "sticky" policies, and credentials-based access control. The &lt;a href="http://www.oasis-open.org/committees/xacml/"&gt;OASIS XACML Technical Committee&lt;/a&gt; is expected to take up these topics. W3C's &lt;a href="http://www.w3.org/Policy/pling/"&gt;Policy Languages Interest Group (PLING)&lt;/a&gt; is expected to discuss data handling policies and the matching and triggering of events in the privacy context.&lt;/p&gt; </content>

by W3C Staff at February 09, 2010 06:00 AM

Just a heads-up to anyone using sIFR to render text: the default CSS that comes with sIFR hides the replaced text from the VoiceOver screen reader. I don't know if any others are affected "“ VoiceOver is the only screen reader I have been able to verify this problem in.

Read full post

Posted in Accessibility, CSS, Typography.

by Roger Johansson at February 08, 2010 06:30 PM

I’m a bad conference organizer.

Why? Because we opened the An Event Apart 2010 schedule for sales back in, um, flippin’ November, and I never mentioned it here. Cripes, I never even posted when we announced the lineup of cities. I could go through the great big long sob-story list of reasons why 2009 was really tough and blah blah blah, but when you get right down to it, I fell down on my job.

Okay. So. Time to correct that.

(deep breath)

Hey everyone, check it out: the complete tour schedule for An Event Apart 2010! Woohoooo!

1. Seattle: April 5-7, 2010 (yes, three days; more on that anon)
2. Boston: May 24-25, 2010
3. Minneapolis: July 26-27, 2010
4. Washington, DC: September 16-17, 2010
5. San Diego: November 1-2, 2010

We’ve got a pretty killer lineup, if I do say so myself. You can get the mostly-complete list from our opening-of-sales announcement last November. It lists the people we had confirmed at the time; there have been a few additions since then. Check out your city of choice to see who’s going to be there! (But always remember that speaker lineups are subject to change: speakers are people too, and life has a way of interfering with schedules. I myself had to withdraw from An Event Apart Boston last year due to a family emergency.)

The price to register for these two-day, one-track Events is the same as it was in 2009, and there are educational and group discounts available for those who are interested.

But wait, I just said “two-day” when the first show of the year is clearly three days. What gives?

Seattle is the site of our first-ever A Day Apart, a full-day workshop that can be attended on its own or as part of a full three days of Event Apart ecstasy. And the inaugural Day Apart will be nothing less than a detailed plunge into HTML 5 and CSS3 with Jeremy Keith and Dan Cederholm. Jeremy handles the markup; Dan gets stylish. It’s going to be fantastic. I’m going to be in the back of the room for the whole day, soaking up as much as I can.

If you want to attend just the workshop, it’s $399 for the whole day if you buy an early bird ticket (available through March 5th). The price goes up $50 when early bird ends, and another $100 if you show up at the door. But I wouldn’t recommend that last, because I don’t think there will be any tickets available at the door. Again: if you show up unannounced on the day of the workshop and ask to buy a ticket, we will most likely have to turn you away, because I expect that there won’t be any seats available.

On the other hand, maybe you’d like to experience more than just one day of AEA goodness. Maybe you’d like to go whole hog and attend both the two-day Event Apart and the subsequent Day Apart, soaking up all the knowledge and enthusiasm and camaraderie that typifies An Event Apart. And who could blame you? If you do that, then the total early bird price for all three days is $1,190, whereas buying the event and workshop passes separately would total $1,294. That’s right: you actually get slightly more than $100 off the cost of the workshop if you attend all three days, over and above the early bird discount. (Or you can think of it as getting $100+ off the cost of the conference. We’re not fussy.)

As it happens, these three-day passes have proved quite popular. So if you want to get your hands on one of those"”or on any Seattle tickets, whether one, two, or three days"”I wouldn’t wait too long. Our internal analyses suggest that there will come a time, some time before the doors open on April 5th, that the ability to buy a ticket will cease to be. It may even pine for a fjord or two.

As for the four shows that come after Seattle, well, they’re looking pretty popular too.

I know I say this every year, but I’m really excited about what we’ve got planned for the year. Jeffrey and I constantly and (we hope) consistently strive to create an event that we ourselves want to attend, and that’s absolutely true of the shows and workshop we have planned in 2010. I can’t wait to hear what the speakers and attendees have to share. Hope to see you there!

by Eric Meyer at February 08, 2010 03:29 PM

Donating money to a charity should be as quick and easy online as it is to stuff a few coins in a collection pot on the high street. It should also be apparent what the money will be used for.

With these two things in mind, it is surprising how often charities miss the mark when it comes to their online donation screens. Fiddly pull-downs, peculiar microcopy, trillions of steps, and minimal transparency.

Here are some of our step-by-step notes and drafts from a concept exercise on behalf of a well-known charity. The goal was to create a screen that encourages more site visitors to give, and give larger amounts.

We don't know if these ideas will ultimately be used, but they illustrate ways of evolving the user experience in a way that should increase the amount of money collected.

The starting point

(Disclaimer: we combined two screens in to one to have a truly poor starting point for the exercise.)

The centre of the donations page has the words "Charge me"� followed by one drop-down menu with well over fifty options starting at $2.00 increasing by one dollar up to $30 and then in larger increments up to the $1000 mark. The second menu has only one option: zero cents.

Round 1

First of all we remove the second menu. It offers literally no value and, worse, has a negative effect on the overall impression of the charity at the point of transaction.

And it is a transaction, even if some people might object to using that word in the charitable context. I believe calling something by its real name makes it easier to resolve any issues that surround it.

Also changed the copy from "Charge me"� to "I am donating"�.

Round 2

Online donations come in at an average of $17. Not bad but comparatively not good enough. I am certain the very long drop-down menu is part of the problem. With over 50 options it takes a lot of scrolling to get anywhere.

I cut the donation options from 50 to just seven. This offers a good range, and makes sure all the options are always visible on screen.

The amounts represent those the charity know, based on both offline and online experience, are likely to make people whip out their credit cards. The new amounts are $20, $30, $40, $50, $100, $150, and $200.

This intentionally puts the minimum donation amount over the $17 average. It is a slightly risky move but with large potential upside.

I also did away with the drop-down menu and replaced it with a clear display of all the amounts plus radio buttons. Clear and simple.

Round 3

Until now focus has been on tweaking what is already there. It is time to make a big change.

A problem with donating is that even when we are giving a relatively small amount, say $10 or $20, the money suddenly feels like $100 or $200 and we might hesitate to give it up.

To work around this I remove the seven donation amounts, and replace them with a large bold field with "$20"³ in it. This establishes the giving of something tangible like a twenty-dollar note as the normal, logical thing to do; "Of course I should give a twenty, anything less would be silly"�.

Before I visualize the effect of the donation I put a nice big button with the copy "+20 I can help more"� next to the amount field. Each click raises the amount to be donated by 20 dollars. It shamelessly (for a good cause) plays on pride and generosity.

Under the "I can afford"¦"� button I add a text link option: "I can't give more than $10"³. This lowers the amount in the field and displays the message "Giving, not the amount, is what matters."� Making it possible for people to give, even if it is a bit less, makes perfect sense.

Round 4

Another challenge with charity sites is that one rarely gets a really good idea of how the money will be used. Food for poor people in my city, or schoolbooks for kids in a developing nation, or tools for farmers, sound good but they are still quite abstract.

In this round we fix this problem by visualizing the result of the donation.

To the right of the donation amount I add a headline: "30 families in this area need your help"�. Underneath it 30 family icons (with different numbers of parents and kids) represent the families.

The idea is that for each 20 dollars one of the icons would be highlighted, i.e. your money benefits these people.

Still I didn't feel this was clear enough. So for each icon that lit up, I added a call-out listing what a family would receive for the money. For example a bus pass, seven breakfasts and a weeks worth of lunch boxes to take to school.

Much better. Plus, imagine if you are the person donating money and suddenly changed your mind"¦ It'll be a lot harder to do when you have to picture a family missing out on breakfast and lunch for a week.

Conclusion

The goal with the exercise was to create a screen that encouraged more visitors to give, and give larger amounts. At the end of it we had two alternative solutions. The first one (round 1-2 above) used small improvements to create a better experience.

The other completely re-imagined how online donations look and work (round 3-4).

Time will tell if these ideas ever get used, but at the very least they illustrate ways of evolving the user experience in a way that should increase the amount of money the charity collects.

To learn more about designing for charities, including the importance of having a funding goal, stating a clear mission, offering other ways to help and so on, please see "8 tips to design a charity website"� at the Webdesigner Depot.

by Jaan Orvet & Andreas Carlsson at February 08, 2010 01:57 PM

Since my attempts at capturing web developers’ hearts and minds by publishing fundamental research have failed miserably but my thirst for attention continues unabated, today I will once more shout at iPhone developers. That’s proven to work.

More specifically, today I will shout at web developers who think that delicately inserting an iPhone up their ass is the same as mobile web development.

Before we start, a little thought experiment. Suppose I proposed the following:

1. IE6 is today’s most advanced browser. (Note: this was actually true back in 2000. Please bear with me.)
2. IE6’s market share is about 80%.
3. The other browsers are way worse than IE6, and developing for them is a pain; something we’re not interested in and are a bit afraid of.
4. Therefore we will develop websites exclusively for IE6.

Would you agree with those sentiments, even if we’re back in 2000 and IE6 is really the best browser we have?

Or would you reply that our sites should work as well as they can in all browsers through the use of web standards, progressive enhancement, and all the rest of the best practices we’ve been preaching for the past ten years?

I distinctly remember a time when we web developers cared about such concepts. But those times are long gone.

February 08, 2010 12:13 PM

It is quite interesting to see how technology moves in circles. With canvas being the new fun toy to play with for creating browser-based games we have to find solutions to fake a 3D environment to be really fast (sure there is Canvas 3D but it is overkill for most games). The trick is to dig into the tricks arsenal of old-school game development on machines full of win like the Commodore 64 or Amiga.

Louis Gorenfeld some very detailed explanations on how to fake 3D including some of the formulas used in the days of 8 bit.

He is also working on some demo code which you can help him with by providing some JS/Canvas demos:

by Chris Heilmann at February 08, 2010 12:04 PM

We have been long term fans of Román and the fantastic demos and samples that he puts together, usually involving CSS goodness. We messed up the other week though when we linked to his work on a scrolling coke can. I do these postings as a labor of love, and since Ajaxian isn't my day job, that means that the labor often happens at 2am. In this case I made the rookie mistake of grabbing an iframe to his demo so it would run inline. Román then looked up to see his servers getting pummeled and a bill is associated with that traffic. He quickly rick rolled us (thank you for not going for something much worse ;) and Christian Heilman (who is in Europe along with Román) saw it and kindly switched in an image of the code can effect.

I woke up the next morning to learn about this all and see a post that Román did talking about our hot linking. I immediately responded saying how sorry I am. I aim to highlight the great work that is done, not cause an issue.

Román is a great guy and kindly offered to collaborate and show friendship with Ajaxian (and myself) by putting together more amazing demos to share on the blog. Inline. Not hot-linking. :)

Here they are

These effects are CSS level 1 and 2.1 only. There is no javascript, css3 or whatever, just html and css.

They are all based on the CSS 2D displacement map technique that Román Cortés discovered when he created the infamous CSS Coke Can effect. Since displacement maps are very versatile, Román Cortés wanted to show us more and different applications of these.

The Ajaxian Prism

This is simple displacement map usage to distort the borders of the prism, with a transparent .png image on top to add the shadows, orange semi-transparent bg and the Ajaxian's "a" logo. The background painting is an original artwork by Román Cortés. Move the area around to see the effect the prism has on the underlying painting.

Van Gogh's Starry Night

Van Gogh's Starry Night separated in 3 layers and displacement map sinusoidal distortions applied to two of them.

Sliding and Slicing

A really simple displacement map + rearranged image makes this effect possible. Watch the window blinds do their thing as you move the scollbar.

The Coke Can spinning in the opposite direction of the original

There some comments in the original code can posting that the spinning direction was unnatural. So, here he did spin as the commenters wanted it. To make it possible, he had to mirror the label texture and adapt the source code.

The smashed can

By using several cylindrical displacement map layers with a growing radius and png transparent textures, it is possible to do voxel surface rotations like this one.

Thanks for Román for being so reasonable, and for creating such fun examples for us all. We hope to go deeper on the implementation of some of these examples in the future.

by Dion Almaer at February 08, 2010 11:52 AM

Mozilla Labs has released the magical 1.0 version of Weave and the doors are now open for developers.

When I was a part of Mozilla Labs day to day, I always loved the vision and team behind Weave. I kept wanting the implementation to match the vision, but it is a tough problem and it takes time to bake. Well, it is getting there now.

Weave is special because it offers a series of back-end services (more than just sync) that are build with users (and their privacy) in mind, rather than business models. I have talked to a couple of entrepreneurs recently and thought that there ideas could be implemented nicely on top of Weave.

It is still early days, but I am jazzed to see the platform getting opened up. I am hoping to get clients for Safari, Chrome, and IE.... and look forward to a webOS client too :)

by Dion Almaer at February 07, 2010 05:08 PM

One reaction I received about my touch research was: Do we really need the touch events? Can’t we just fire the mouse events when a touch action occurs? After all, touch and mouse events aren’t that different.

That’s a fair question. It deserves a fair answer.

February 05, 2010 01:19 PM

Anthony Calzadilla has a fun Friday example for us. He has a tutorial on how he animated an AT AT using CSS.

He goes over the different areas and how he uses animation and transforms.

For example, the head of the beast:

by Dion Almaer at February 05, 2010 11:17 AM

Anyone who has been using CSS for any length of time has probably been frustrated by the lack of selector support in Internet Explorer 6. There are quite a lot of cases where a CSS 2.1 selector will let you target elements in all other relevant browsers, but where you, if you want it to work in IE 6, have to add a class or id attribute to the HTML.

Well, the market share of IE 6 is now finally at a level where we as developers can say that a site "supporting"� IE 6 does not mean "looking pixel perfect"�. Fortunately more and more clients understand this as well. IE 7 has been out for well over three years and IE 9 is on the horizon, so I think it's time to revive those CSS selectors that you never got to use just because IE 6 doesn't understand them.

Read full post

Posted in CSS.

by Roger Johansson at February 04, 2010 07:39 PM

You have all your important data backed up, right? I mean, come on folks, it’s 2010. We may not have flying cars yet like we’re supposed to, but “having backups” is a problem that’s solved. And I’m sure you’ve solved it. I’m sure you sleep well at night knowing that if a comet hit the data center where your website lives, and everything was completely destroyed, you could get back up and running somewhere else quickly enough.

Except that the chance this is actually true for you, statistically, is very small. If we look at the statistics, then what we see is that people are storing increasing amounts of things, important things even, online because disks keep getting bigger and cheaper (though sadly not much faster, but that’s a different article).

But despite this availability of cheap storage, people for the most part still don’t back things up. This isn’t universally true of course, there are some folks who have implemented really brilliant backup systems at their companies.

Of course, it helps when you have an amazing systems guy on your team who is made out of lighting bolts and awesomeness, taking care of the nitty gritty details for you. If, however, you are one of the many many people who doesn’t have a good backup strategy in place, this article is here to help you out.

I’ve written a shell script (Ed: please remove .txt extension before use) that will serve as a good starting point, and we’ll talk through it in a little bit. For now though, let’s discuss backups in a more general sense so we can decide what our end goals are.

Types of things to back up

There are lots of different kinds of data that you may need to back up. Three of the most common are:

1. Source Code
2. Static Files (images, PDFs, etc)
3. Data in a Database

These days, there’s a good chance you have your source code files in an RCS system somewhere, such as GitHub. If you do (and you should), and your RCS system is on a different server or servers than your site, you already have your source code backed up. If your server catches on fire, you can just do a fresh checkout onto a new server. This is one of the many advantages of using an RCS system.

Static files, such as images or music or what have you, are easy to back up. A quick search will reveal dozens of different ways to ship this sort of data to some secondary place in case of emergency.

Database data, however, can be a little more tricky. You can’t just copy your binary data files safely while the database is running because if a write happens during the process, then your “backup” will be in an inconsistent state, which will probably render it useless.

Moreover, it’s not generally the best way to do a backup because restoring data from a binary copy can be tricky. What my shell script does is allow you to automate correctly backing up a standard MySQL database, or databases, with full end-to-end encryption to an offsite location.

Is my data backed Up?

This seems like an easy question to answer. In fact, it is a rather easy question to answer, but I’ve found that many people have never bothered to answer it, and it gets them in trouble. Are you doing backups of some sort currently? If so, does that mean you have backups? Actually, no, it doesn’t. If there is one golden rule of having backups that I hope you remember after reading this, it’s the following:

If your backup procedure doesn’t include instructions for doing a restore of the data, or if your restoration procedure has not been tested, then you don’t have backups.

Simply put, unless you know that you can reliably do a restoration of your data, you don’t have backups. If you haven’t tried, you don’t know. As an example, I once encountered a setup where an administrator was “backing up” several databases by using rsync to copy the binary data store to a remote machine once a day. He thought he had backups, and he was wrong.

As I noted before, if a write happens during the rsync process, those binary files aren’t guaranteed to be in a consistent state. If he’d ever tried to do a restore of those files (he hadn’t), he would have discovered this problem. So I say again, until you have tested a restore and it’s worked, and you’ve documented how to do that restore, you don’t have backups.

Another thing that I always like to stress is that you really, really want backups that are under as much personal control as possible. This typically means using a third party or offsite service distinct from your ISP to store your backups. If you ever need to restore some data, there’s a good chance it’s because something has gone wrong with your systems.

In that case, there’s also a fair chance that something has gone wrong at your ISP itself, so you’d rather not have your backups tied to your ISP. What you want is backups that are stored by some other company, preferably in an entirely different physical data center.

Basic process for setting up database backups

The steps I use to back up the databases for Virb are as follows:

• Get a dump of the database
• Compress the data
• Encrypt the data
• Send the data over an encrypted connection to an offsite service
• Automate the entire procedure with a cron job

It’s nothing fancy, and it shouldn’t be. Fancy, intricate things tend to break, and this is the last thing you want to worry about breaking.

Prerequisites

You’ll need to have a few things in place for this to all work. I’m assuming you’re using a reasonably new Debian style Linux distribution (which includes Ubuntu). You need to be able to use the mysqldump program to get a dump of the desired database data. This comes standard with the MySQL installations on every Linux distribution I know of.

I’m going to assume that you have a .my.cnf file set up in your home directory with a username and password that allow you to dump out the data you want. If you’ve never used a .my.cnf file before, it’s very easy. Create a file called .my.cnf in your home directory, and put the following in it:

[client]
user = dbusername
password = dbpassword

of course substituting the correct username and password for your systems. Then run chmod 600 $HOME/.my.cnf on the file so other people can’t read it. You can now use all the mysql* command line utilities without having to pass the -u and -p flags all the time.

Another assumption I’m making here is that you can safely run mysqldump at some point during the day, and this won’t mess anything on your site up, which practically means that you don’t have that much data. When you dump the database out, a write lock is placed on all the tables in that database (assuming you’re dumping out all the tables). So while the data is getting written out, reads can still happen, but no INSERTS, UPDATEs or DELETEs can.

If you have say a few hundred megabytes of binary data, usually located in /var/lib/mysql on Linux systems, you are probably okay just dumping the data out from whatever machine the database is on. On reasonably modern hardware, 300M of binary data takes about 15 seconds to dump out, for example. Having a write lock for 15 seconds in the middle of the night is not a big deal for most people.

If you have enough data that it really does take a long time, or your requirements are such that you can’t have a write lock happen even briefly, then the next option is to set up a mysql slave server that exists just for backups. The idea is that the slave is continuously replicating from the master.

When you do the backup on the slave, the write lock will happen there so that the data can get dumped out, and then once it’s finished the replication will catch back up to the master if it’s missed anything.

Explaining how to set up MySQL replication is beyond the scope of this article, but this “back up a slave” strategy is exactly what we do for Virb.

We’re going to be backing things up using the online back up service provided by IBackup. There are plenty of these sorts of services available, so if you want to use a different one feel free. Not much of what I’m going to describe is specific to IBackup. I have no particular affiliation to them, other than having used them for several projects and being pleased with their products and pricing. I’m going to assume you have an Economy plan with enough storage to hold your backups.

The only other assumptions I’l make are that you have stunnel4, rsync, and gpg installed. These are very standard, freely available programs. On reasonably recent Debian style systems (which include Ubuntu) you can install all of them by running this command as root:

apt-get update && apt-get install stunnel4 rsync gnupg

Setting up encryption

We are going to encrypt our database backups, and we’re going to transmit the encrypted files over a secure connection. This is technically overkill, but encryption is free and easy so we’ll do it anyway. The first thing you’ll need to do is generate GPG keys to use.

I’m not going to explain it here because this tutorial will take you all of five minutes to get through, and covers everything you’ll need. Just be sure to remember your passphrase, and put copies of your key files somewhere safe just in case.

You should now have GPG keys set up, and an account with IBackup, so create a file in your home directory called .ibackup with the following contents:

IBACKUP_USERNAME=username
IBACKUP_PASSWORD=password
GPG_EMAIL=your@email.com

The reason for this file will become apparent shortly. Just substitute the username and password for your IBackup account there, and put in the email address that was used to generate your GPG keys. Be sure to run chmod 600 $HOME/.ibackup so that nobody else can see your password.

Now we need to do a little configuration for stunnel4. We don’t need it to be running all the time, so shut it down and make sure it doesn’t start on boot with the following commands:

/etc/init.d/stunnel4 stop
update-rc.d -f stunnel4 remove

Now let’s configure stunnel4 for IBackup. First get the default configuration file out of the way.

cd /etc/stunnel
mv stunnel.conf stunnel.conf-orig

Next, with your text editor of choice, create a file called ibackup.conf in the /etc/stunnel directory with the following contents:

client = yes
[ibackup]
accept = 8455
connect = rsync4.ibackup.com:5000

These options are fairly specific to IBackup’s service, but other backup services have similar options. The accept option defines a local port for stunnel4 to use, so you don’t have to pick that particular one if, for some reason, it’s already in use.

Performing the backup

Since we have our security issues handled, we can now perform the backup. Open up that shell script (Ed: please remove .txt extension before use) I mentioned at the beginning in your text editor of choice, so we can go through it. The first 14 lines just get the names of databases we’re going to back up and identify the programs we’re going to use.

#!/bin/bash

# ibackup.com destination
IBACKUP_DEST=$1

# database names
DB_NAMES=$2

# binaries we need
MYSQLDUMP=/usr/bin/mysqldump
GZIP=/bin/gzip
GPG=/usr/bin/gpg
RSYNC=/usr/bin/rsync
STUNNEL=/usr/bin/stunnel4

If you’re not familiar with bash shell scripting, it’s not hard. Things like $1 and $2 indicate command line arguments that get passed to the script. So here, $1 is something we’re going to use in the name of the eventual backup file we’ll get, and $2 will hold the name(es) of the database(es) we will back up.

Things get more interesting from lines 23 to 39.

DOTIBACKUP="$HOME/.ibackup"

if [ ! -r $DOTIBACKUP ]; then
    echo "Need $DOTIBACKUP file for username and password!"
    exit 1
else
    PERMS=`/bin/ls -l $DOTIBACKUP | /usr/bin/awk '{print $1}'`
fi

if [ $PERMS != "-rw-------" ]; then
    echo "Permissions on $DOTIBACKUP are wrong!"
    echo "Should be -rw-------, actually is $PERMS"
    exit 1
fi

. $DOTIBACKUP
export RSYNC_PASSWORD=$IBACKUP_PASSWORD

These commands check that the .ibackup file exists and has the correct permissions. If so, they source the file, which is to say they absorb the things that file defines into the running shell script. Then it sets the environment variable RSYNC_PASSWORD to be the value of the IBACKUP_PASSWORD that you use to access the service.

Lines 41 and 42 grab the local port that stunnel4 needs in order to work.

# local stunnel4 port
STUNNEL_PORT=`/bin/grep 'accept' /etc/stunnel/ibackup.conf | awk '{print $3}'`

Next, between lines 44 and 49, we make make sure there’s a directory where we can dump out all of our data.

# place to dump everything
DUMPDIR="$HOME/.ibackup_data"

if [ ! -d $DUMPDIR ]; then
    mkdir $DUMPDIR
fi

We’re eventually going to set this up to run daily, and if we’re doing a once-per-day backup, it’s nice to keep a few days’ worth around just in case. In lines 51 through 56 we use the very convenient *NIX date program to get date stamps for the current day, the previous day, and the day before that.

# today, for tagging the dumpfile
DATE=`/bin/date +%Y-%m-%d`

# yesterday, and the day before that
ONEDAYAGO=`/bin/date -d '1 day ago' +%Y-%m-%d`
TWODAYSAGO=`/bin/date -d '2 days ago' +%Y-%m-%d`

We’re almost ready to actually dump out our data now. Lines 58 to 86 are really boring and just make sure we have a destination name and the programs we need, so I’ll gloss over those. The important part picks between lines 88 and 92, where we go into our backup directory and actually run mysqldump.

cd $DUMPDIR

echo -n "dumping $DB_NAMES to $DUMPDIR/$IBACKUP_DEST-$DATE.mysql... "
$MYSQLDUMP --opt --databases $DB_NAMES > $IBACKUP_DEST-$DATE.mysql
echo "done!"

Let’s take a look at that dump command to make sure we understand it. The $DB_NAMES variable was set earler in the script. It’s the second command line argument passwed to the script, and it tells mysqldump which databases we care about. The $IBACKUP_DEST variable, similarly, was the first command line argument passed to the script, and it just sets the part of the name of our dump file. Finally, the $DATE variable we just saw getting set a moment ago, and we use it as a date stamp for this dump.

Next, between lines 94 and 105, we compress and encrypt our dump file. We also check to make sure the encryption step actually worked and we exit out if not.

echo -n "gzipping $DUMPDIR/$IBACKUP_DEST-$DATE.mysql... "
$GZIP $DUMPDIR/$IBACKUP_DEST-$DATE.mysql
echo "done!"

echo -n "encrypting $DUMPDIR/$IBACKUP_DEST-$DATE.mysql... "
$GPG -e -r $GPG_EMAIL $DUMPDIR/$IBACKUP_DEST-$DATE.mysql.gz
echo "done!"

if [ $? -ne 0 ]; then
    echo "encryption failed!"
    exit 7
fi

We do a little cleanup and start stunnel4 in lines 107 to 112, which are pretty self explanatory.

echo -n "removing $DUMPDIR/$IBACKUP_DEST-$DATE.mysql.gz... "
/bin/rm -fv $DUMPDIR/$IBACKUP_DEST-$DATE.mysql.gz
echo "done!"

echo "Starting stunnel for rsync..."
/etc/init.d/stunnel4 start

And now on line 114, we finally send our freshly made backup off to the remote servers managed by IBackup for safe keeping.

$RSYNC -r -v -z -t --delete-after --exclude $IBACKUP_DEST-$ONEDAYAGO* --exclude $IBACKUP_DEST-$TWODAYSAGO* $DUMPDIR/ $IBACKUP_USERNAME@localhost::ibackup/$IBACKUP_DEST --port $STUNNEL_PORT

This is using several different features of rsync so let’s talk about them so we know what is going on. The command line flags -r -v -z -t are what the folks at IBackup tell us to use when syncing things over to them. The --delete-after flag tells rsync to delete anything in the target directory that’s not in the local directory being sync’d. But we also have the two --exclude options there.

So what we’re really saying is “Keep the file we’re sending over, and the one from yesterday, and the day before that, but then delete everything else”. That way we always have the last three days’ worth of backups. The last point of interest is that because we tell rsync to use $STUNNEL_PORT, all the communication is encapsulated by stunnel4 and is therefore encrypted across the wire as it gets transferred. Whew!

The last few lines from 116 to 121 simply stop stunnel4 and clean up things by removing the directory we made to put the dump file into.

echo "Stopping stunnel for rsync..."
/etc/init.d/stunnel4 stop

echo -n "Cleaning up... "
/bin/rm -rfv $DUMPDIR
echo "done!"

So that should about do it. To find out, put this script somewhere and run chmod 755 db-backup.sh on it so it’s executable. Then test it to make sure it actually works. If you want the target to be called ‘mybackup’, and you have to back up the databases named ‘db1′, ‘db2′, and ‘db3′, you would invoke the script like this.

/path/to/db-backup.sh mybackup "db1 db2 db3"

If that works, then you are almost done! We just need to automate the process, which we can do trivially with a cron job. In your shell where you tested the script from, type the following:

crontab -e

This will put you into edit mode for your crontab. Assuming you want the backup to happen starting at 12:40am each day, put the following into your crontab file:

0 40 * * * /path/to/db-backup.sh mybackup "db1 db2 db3" >/dev/null 2>&1

Save the file, and then type crontab -l to list the crontab and make sure that line is in there. If it is, then there’s just one last thing to do.

Testing a restore

I said at the start of this article that if you haven’t done a restore, you don’t have backups. And seriously, I meant that. So if you’ve made it this far, then you must do one last step. The day after you set this up, you need to go to your IBackup account, download your dump file, decrypt it with the GPG key you made, and do a restore to a running MySQL instance.

Make sure you do this last step, as the consequences of missing it can be dire.

In conculsion

I covered quite a bit in this article, but if you make it through everything, you should be able to rest easier knowing that you have good, safe backups of your database. Although we used the IBackup service in these examples, very little of what I covered is specific to them.

If you wanted to use a different company, or maybe just push the backup files to a different server you have, you’ll probably just need to change some of the commands that you pass to rsync. The basic strategy though should’t have to change.

I hope you’re found this helpful, and don’t hesitate to get in touch if you have any questions.

by Chris Lea at February 04, 2010 01:27 PM

Fan of Eiffel or the design by contract pattern that it espouses?

Øyvind Kinsey is, and he just created jsContract an alpha library to give you some pre and post condition abilities.

Here is an example:

A lot of contract code for little functionality.... good old contracts ;)

It is interesting to read how Øyvind instruments the code. Run a test through the translator tool and you get:

by Dion Almaer at February 04, 2010 11:07 AM

It turns out to be possible to handle the touchmove and touchend events with data obtained from the touchstart event object. It is not necessary to access the touchmove and touchend event objects, as long as you continue to have access to the touchstart one.

Apparently, the touchstart event object persists in browser memory even when the event has long ended. More importantly, it continues to be updated with information about the current touch action.

This is interesting. It’s also profoundly different from the desktop, where a similar trick with the mousedown, mousemove, and mouseup events definitely does not work.

Both iPhone and Android display this behaviour. Therefore future implementations of the touch events should, too.

February 03, 2010 09:58 PM

Save $50 off your pass by entering promo code THINKVITAMIN when booking your pass. Only 9 left! Buy your tickets now »

Did you know Carsonified, the team behind Think Vitamin, also run a number of web industry events? In a couple of weeks we head off to Florida for the third Future of Web Apps Miami.

It’s going to be a great three days (February 22nd – 24th) and will feature great speakers, in depth workshops and free University sessions all delivered by leading industry figures. Here’s a quick round up of what’s happening:

Companies speaking at FOWA Miami 2010 include:

• Twitter
• Facebook
• FreshBooks
• Opera
• Mint.com
• Mozilla
• jQuery
• Reddit
• KISSmetrics

Topics at FOWA Miami 2010 include:

• HTML5
• Advanced JavaScript
• API’s
• Online marketing that works
• Funding strategies for startups
• Web app branding
• Functional languages
• Measuring your apps success
• How to build a successful web app business

Speakers at FOWA Miami include:

• John Resig (jQuery & Mozilla)
• Gary Vaynerchuk (Wine Library TV)
• Molly Holzschlag (Opera)
• Tara Hunt (Author of The Whuffie Factor)
• Alex Payne (Twitter)
• Fred Wilson (Union Square Ventures)
• Mike McDermott (FreshBooks)

As well as in depth workshops and speaker presentations there will be plenty of opportunities to meet fellow web developers and entrepreneurs at the Future of Web Apps beach party at the beautiful Nikki Beach.

You can register, pick up your badge, hang out with some of our partners, enjoy a free BBQ, play games on the beach and as the sun sets the party will begin. Just be sure to keep a clear head for the conference day.

Save $50 off your pass by entering promo code THINKVITAMIN when booking your pass. Buy your tickets now »

by Keir Whitaker at February 03, 2010 11:09 AM

Aaron Boodman created Greasemonkey back in the day. He also worked on Gears. And most recently he created Chrome Extensions. I have a funny feeling that folks were pinging him daily "hey, when ya gunna give me Greasemonkey on Chrome" and he just delivered:

One thing that got lost in the commotion of the extensions launch is a feature that is near and dear to my heart: Google Chrome 4 now natively supports Greasemonkey user scripts. Greasemonkey is a Firefox extension I wrote in 2004 that allows developers to customize web pages using simple JavaScript and it was the inspiration for some important parts of our extension system.

Ever since the beginning of the Chromium project, friends and coworkers have been asking me to add support for user scripts in Google Chrome. I'm happy to report that as of the last Google Chrome release, you can install any user script with a single click. So, now you can use emoticons on blogger. Or, you can browse Google Image Search with a fancy lightbox. In fact, there's over 40,000 scripts on userscripts.org alone.

Not all of the scripts will work. The deeper the integration, the less chance of success. We now have user scripts supported in a variety of browsers, and hopefully they get more and more portable.

If browsers could surface the functionality to mainstream users, good things could happen beyond us power users.

by Dion Almaer at February 03, 2010 09:38 AM