Please, go read Mark's article and then come back. I'll be here waiting.

Now, I wholeheartedly agree that we have to get advertisers on board, but before they learn to run, they must first learn to walk. By this, I mean that the proposals Mark has put forth are the perfect scenario to solving the whole ecosystem and bringing the sub-industry of web advertising into the era of Responsive Web Design, myriads of devices and Future Friendliness. But, as anyone who has worked with ad agencies will tell you, we're still trying to bring them from the Flash to the HTML/CSS era. The market is tough, so this might actually take a couple of years before we help them bring it into fruition.

Package Deals

Mark suggests the creation of a new Responsive Package that according to his example would include the different versions: mobile, tablet and desktop. This will undoubtedly be a boon for advertisers to get a better deal and eventually some will take advantage of this in a creative way.

Still, I really think we ought to take step back and think about the basis of Responsive Web Design.

Only us, web developers and web designers, franticly resize our browsers every other page. In the real world, the regular user will take advantage of the adaption to a multitude of screen sizes only once: when the page is loaded.

That's exactly when the ad slots are filled in, by electing a creative or as we commonfolk call it, an advertisement. I honestly believe it's fair to assume it's rare for a user to resize their browser, although... it wouldn't hurt to do some proper testing/detection to solidify this point.

But even then, if the resize triggers a change to a different layout, that can be detected (via javascript, which the majority of ads are delivered with) and all the ad slots can then be re-elected. After this re-election, the site is by no means obligated to maintain the same ad or even the same advertiser. Since you will never be able to assume that 100% of your inventory are available on all three sizes, you will always have to cause a re-election for the new formats.

This means that even though the packages are a good way to move the industry forward, it's not an absolute necessary step to having ads exist in a responsive web site. We've had mobile advertising for a while, all we have to do is switch between "models" accordingly.

Lazy Loading

If your model of advertising is CPM, in which you're paid by the advertiser for every thousand impressions, advertisers will frown upon loading an ad if it isn't visible to the user. Thus, the ad slots in the "inactive" layouts of your website, should never be loaded until/if that version is activated.

This fits like a glove with the pattern of Lazy Loading. Ads only load if & when they'll be shown. This way, no advertiser will ever hold a grudge.

Transitioning

This is a far more conservative proposal than Mark's, but it is made with a good intent. We might need a transition phase before a full-fledged Responsive era of Web Advertising. Specially if we want to avoid the commercial interests to hinder our will to explore new ways to present content with Responsive® layouts.

After the model is tried and tested, we'll have lots of attractive numbers to show the advertisers and they really like numbers. It will undoubtedly be a hefty argument while trying to explain and convince them to buy the packages Mark proposed.

Last week, Simon Collison showed us how We Are the Explorers at Build conference in Belfast. Once explorers get back after an expedition, they must tell the story to the fellow colleagues who weren't there. We have to do this part now. Talk to your friends who work at ad agencies, your colleagues in the commercial department, propose a talk on Responsive Web Design for communities dedicated to Flash development—which are usually ripe with ad agency good folks, buy your colleagues The Book, etc.

Let's spread the experiences about responsive web design and ask for their help to move our collective industry forward.

Copyright © 2011 — Wordpress Portugal — All rights reserved.

Bom... alguns de vocês já devem ter reparado ali no gráfico persistente no fundo do site. É verdade, vou falar no Wordcamp Lisboa 2011! E é já no próximo sábado, dia 24, na Universidade Lusófona de Lisboa.

O programa está carregado de oradores portugueses e outros internacionais bastante sonantes no panorama do Wordpress e da Web. Estou especialmente ansioso por ouvir o fantástico Scott Berkun (Como é feito o Wordpress.com?), o mítico e grande amigo Hugo Baeta (Como desenhar um site com WordPress.com), o Isaac Keyet (Wordpress em Dispositivos Móveis), a Ana Silva (A arte da vida em forma de blog) e outros como o Nuno Morgadinho e o Paulo Faustino.

É por isso com imenso orgulho que noto que me colocaram a fechar o dia que, repito, está carregado de oradores brilhantes. ;-)

Há vários temas a serem cobertos e certamente haverá ali lições valiosíssimas a tirar para o dia-a-dia de quem trabalha na web. Mas não só... todos nós somos utilizadores da Internet e mais cedo ou mais tarde vamos querer contribuir para este ethos.

Quanto a mim, vou falar de Direitos de Autor, o que significa mais uma aparição do Dr. Copyright. :-) Não vai ser a repetição da talk do Codebits IV mas sim uma adaptação da mesma ao mundo do Wordpress. E vai ter novidades... ;-)

Ficam aqui com a descrição da apresentação, mas vejam no site o programa completo e inscrevam-se. O preço é uma pechincha para um evento deste calibre, apenas €30.

Dr. Copyright ou Como eu deixei de me preocupar e passei a adorar licenças permissivas (link)

Todos os dias vemos artistas talentosos e criativos a serem vítimas de direitos de autor restritivos. As pessoas vivem fascinadas pelo poder que a Web nos dá de exporem o seu trabalho, mas a possibilidade desse mesmo trabalho ser roubado e abusado por outros faz com que esses artistas se tornem extremamente possessivos em relação ao que publicam online.

Em meros instantes, podemos facilmente criar uma galeria online ou um blog no wordpress.com e ter mais olhos a passar pelo nosso trabalho do que um artista bem reputado numa galeria de arte IRL.

Mas há um senão. As pessoas podem roubar o vosso trabalho. A natureza da web diz-nos que tudo o que chega ao browser, pode ser copiado, guardado e, se assim o quiserem, republicado.

Como é que podemos evitar que o nosso trabalho seja abusado por pessoas mal intencionadas?

Mais… como encontrar e re-utilizar trabalho de artistas excelentes sem lhes violar os direitos ou prejudicá-los?

No final desta sessão, terão ouvido histórias que ajudarão a compreender o mundo dos direitos de autor e os porquês duma partilha activa online. Terão visto também ferramentas que podem usar para tornar esta tarefa mais fácil e habitual.

Vemo-nos lá?

Adicionem já o evento ao vosso calendário (.ics).

It is no secret that I've been a fan of BBC programmes for a very long time. When I was a kid growing up in Portugal learning English, Mark (the teacher) would bring Monty Python and Fawlty Towers sketches into class for us to pick up on weird accents, advanced vocabulary and quick-paced discourses. Whenever he did, it was like Christmas in the classroom. Even more than the odd day when we played games! Remember, we were kids.

Later on, I became a devotee to the weekly hour of British Comedy on our national tv channel. Everything from The League of Gentlemen to Little Britain, not forgetting Goodness Gracious Me and other classics.

So it will come as no surprise when I tell you I had been salivating for years. Whenever I heard someone I follow on twitter point to or simply mention BBC iPlayer, a little bit of me just wanted to pack the bags and move to the UK. You see, because up until now, iPlayer was limited to UK internet addresses.

That changed with the iPad version being released in 11 countries. And let me tell you all you need to know about the app in one phrase: it does not disappoint. No wonder, coming from the hands of Brian Fling's Pinch/Zoom. The only downside is you can't stream video over HDMI or Airplay to your TV on the iPad 1. Smooth-sailing on the second version of the tablet.

More than meets the eye

OK, we've covered how great it is. We might even mention that the €6 a month is a bit of a stretch... but think about it. I mean, really think about it.

Ever since the DVDs came out with regions, DRM has tried to put a ball and chain to cultural programmes. The thing is, people aren't only interested in what's produced inside their country. But as recent history has shown, content creators have been scared to death of letting us, inhabitants of countries besides the UK or the USA, get access to their creations.

Now, this is easily explained by fear of reduction of sales in DVDs or even with making local TV stations less interested in purchasing their shows. But this always stroke me as odd, since all we want is to give them our money. In a time where MPAA is getting their panties up in a bunch suing people left and right, I thought they'd be more willing to try new grounds.

That's where the BBC came in.

By giving this small yet corageous step BBC has set the example and provided an opportunity for us to show all TV networks around the globe this is the way to go, we're waiting for NBC and others to come and take our money—Hey, I wants me some fresh Jimmy Fallon, pronto!

A call to arms

It'd be silly for me to try and tell you what to do with your money, but I'll just leave a small thought before letting you on your way.

What if the BBC iPlayer was such a hit, that TV chains all over the world started creating the same model, perhaps even using non-proprietary formats and on a web browser without plugins? Baby-steps, my friends. That's why even if BBC had shitty content—which it most certainly hasn't—I'd be willing to pay for a couple of months just to tell the world what happens when you let us give you our money.

Go get it! http://www.bbc.com/iplayer/tv

So, it's that time of the year again and here I am, writing up one of the lonely posts in the blog.

This year, I went crazy and submitted two talks and both got accepted. I proposed them, because I really wanted to shed some light on both subjects. Glad they got accepted, but I obsessed a bit over the slides... I think I have the Tom Coates's syndrome... but not half the talent and patience. ;)

Still, here's my various coverage of the event.

• My talk: "We're not designing posters, here!"
  • Slides
  • Video
• My talk "Dr. © or How I stopped worrying and love fair-use licenses"
  • Slides
  • Video (in portuguese)
• My photo set on Flickr and on SAPO Fotos.

That's it!

Have fun a leave feedback on slideshare, on flickr or in the comments of this post.

Here are the slides I made for the presentation I was asked to give at ISEL Tech 2010 last tuesday.

If you're wondering why there's very little reference to browser support, it's because the support now will make little difference on the big scheme of things. Things are evolving so rapidly, with more and more features being supported in the modern browsers at each release (you know, Firefox, Safari and Opera).

Any questions or remarks, leave 'em in the comments, please. They're very welcomed.

Slides for: HTML5 - A nova era da web

(in portuguese)

Check out the slides on slideshare. or if you prefer Download the pdf (28MB).

So, what is iGIVE?

Well, if you have something cluttering your home, it's probably because you don't need it. But someone might.

That's the goal of iGIVE. It enables people to say what they have to give and what they are looking for. This way, you can find someone who will find a better use for your ___________ (fill in blank) other than collecting dust!

The website is entirely in Portuguese and geographically focused in Portugal. Here, have a looksie!

check out my profile or see a bigger screenshot

We have great plans for the website and the community. We really want to make a difference and help people help other people. :)

If you have any feedback, do send it our way. You can use the GetSatisfaction page we setup or e-mail me directly.

The boring technical bits

On the backend, it uses the typical Linux, Apache, PHP, MySQL combination. Memcached for cache and a homegrown CMS.

On the frontend, the HTML5 doctype (nothing fancy though), CSS (including CSS3 smartass-eries) and not an ounce of javascript. For now. ;)

The design was entirely Susana's work. Kudos to her! I merely helped with the rest.
Am particularly proud of the progressively-enhanced <button>s.

A lot more to come

Even though we're not completely dedicated to the website (we still have day jobs), we are wholeheartedly committed to the project and will are already enhancing the website and contacting people that can help us prove that the web and computers can actually bring us closer to each other.

Hope to have your help along the way.

The problem

He wanted to have the <li>s from an <ul> to occupy the entire width regardless of how many they were. If there was only one list item, it would have a width of 100%. Two would have 50% each and three of them, 33.33%.

Also, he wanted to accomplish this using CSS only, without having to figure out the number either using javascript or a server-side language and apply a class accordingly (a natural and understandable cop-out if you have to support all browsers). But this is 2009 and he was looking at webkit. There has to be a way, I thought.

So after scratching my head for a bit, I put together a test page and started throwing selectors together and attempting to figure it out.

The Solution

With the pseudo-class :nth-child you can easily select elements based on their position in the list of children. This allows you to select one element at a time.

But you need an extra something to take into account how many siblings it has. That was the whole point.

In comes :nth-last-child. The difference between the two is that nth-child applies to the nth child counting from the top (ie, the child that has n-1 elements before it) while the nth-last-child applies to the nth child counting from the bottom (ie, the child that has n-1 elements after it!).

That said, we could use both of this pseudo-classes together to create sets of rules that would only apply when there are one, two or three items in the list!

Code

Here's the code.

/* one item */

li:nth-child(1):nth-last-child(1) {

	width: 100%;

}



/* two items */

li:nth-child(1):nth-last-child(2),

li:nth-child(2):nth-last-child(1) {

	width: 50%;

}



/* three items */

li:nth-child(1):nth-last-child(3),

li:nth-child(2):nth-last-child(2),

li:nth-child(3):nth-last-child(1) {

	width: 33.3333%;

}

I wish I could find one rule that would automatically figure out the width regardless of the number, instead of enumerating them all. Or even find an expression of the type an+b that would collapse all those selectors into one... But for now, this'll do.

You can test it if you have either Safari or Firefox 3.5 (beta) on this demo page.

Why am I telling you this?

What made CSS2 so successful or powerful wasn't just what was written in the spec. It was also the myriad of articles that popped up all over the web that showed how to combine little aspects of the spec to amount to pretty amazing things.

In conclusion, the sliding doors, the faux columns or the running with sprites articles of CSS3 are still waiting to be written.

So, what are you waiting for? Push the envelope and try to discover new ways of using the properties, selectors and media queries to achieve something otherwise impossible.

Just let us know when you do.

Video

Slides

If you have any questions, suggestions or criticism, don't hesitate to send them my way either on the comments, via email or twitter.

BTW, if you haven't seen these guys' original videos, you're so missing out. Best comedy show I've seen online. I recommend the Hardly Working series. ;)

• Actor in a Leading Role

  My hunch: Mickey Rourke FAIL

  Winner: Sean Penn

• Actor in a Supporting Role

  My hunch: Heath Ledger EPIC WIN!! (see my review of the Black Knight)

  Winner: Heath Ledger

• Actress in a Leading Role

  My hunch: Kate Winslet FTW! (best acceptance speech of the evening)

  Winner: Kate Winslet

• Actress in a Supporting Role

  My hunch: Viola Davis FAIL

  Winner: Penélope Cruz

• Animated Feature Filme

  My hunch: WALL-E FTW!

  Winner: WALL-E

• Art Direction

  My hunch: Changeling FAIL

  Winner: Donald Graham Burt, Victor J. Zolfo (Benjamin Button)

• Cinematography

  My hunch: The Curious Case of Benjamin Button FAIL

  Winner: Slumdog Millionaire

• Directing

  My hunch: The Curious Case of Benjamin Button FAIL

  Winner: Danny Boyle (Slumdog Millionaire)

• Writing (adapted)

  My hunch: Slumdog Millionaire FTW!

  Winner: Simon Beaufoy (Slumdog Millionaire)

• Writing (original)

  My hunch: WALL-E FAIL

  Winner: Dustin Lance Black (Milk)

• Best Picture

  My hunch: Slumdog Millionaire FTW!

  Winner: Slumdog Millionaire

MY WINNER

I couldn't leave out the best movie I've watched in recent years, which, IMHO, deserved the Best Picture award this year: SEVEN POUNDS!!!

What do you think? Any comments? :)

• try to blog more
• tweet less
• and hope to advance a few projects I have brewing.

In review, 2008 was a great year, filled with great music. Kings of Leon and Get Cape. Wear Cape. Fly. (best name for a band, ever) take the top spots on my shortlist.

As for movies, I'm going to have to agree with pecus, Into the Wild was the best movie I watched all year (it premiered in 2008 in Portugal, so it counts). Followed by TDK and Before the Devil Knows You're Dead.

And that's a wrap! :-)

SAPO Codebits 2008 has come and gone... and let me tell you, what a 3 day experience it was.

Let's start from the beginning.

My talk

I was up very early in the schedule, so I gave the talk, Microformats - putting together the pieces of the puzzle (roughly translated title) on the second slot of the first day. It was nice being able to stop worrying about it very early in the event.

From all the feedback I've gathered, right then and there and also later on the web, I think it went very well. It's nice seeing people saying:

The truth is that I’ve already heard a lot about microformats, but I’ve never had the chance to search and read something more detailed about it. (...) So, now that I caught some interest in Microformats, I’ll soon be applying them on my web projects.
—Rogério Vicente

If you want, take a peek at the slides at my last post or view them on slideshare (they're in Portuguese, though).

I handed out a few stickers, but if you want some for you, either ask me or create your own at Moo
(created by Brian Suda).

Other Presentations

The fact that some talks I was interested in were at the same time, presented the usual difficulties.

Which talk should I go to?

The ones I liked best were:

• Web cartooning ao vivo e a cores, by Pedro Couto e Santos
• CouchDB, by Jan Lehnardt
• Tecnologia numa startup , by Celso Pinto (only saw it on slideshare)

There were a few others I missed but I'll try to watch them as SAPO start releasing the videos (yes, there will be videos).

Coding competition

Right. Since this was heavily inspired in Yahoo! Hackday, the highlight is the coding competition.

This year I teamed up again with my pal Pedro Eugénio and we implemented a basic prototype of an idea we had during the event. Little did we know what was in store for us!

Here's the pitch.

Who's In?

We thought that one feature that was lacking on all major analytics packages was being able to see what your users were actually doing on your websites. So we wrote a little demo that captured the mouse movements and mouse clicks of each user and played it in the admin area (using comet, which was our first attempt at using it), all merged into one replica of the website.

This would allow site owners to perform usability tests on users without affecting their behaviour by telling them they're being tested. Also, client support can use this to provide some remote assistance on-the-fly with no setup required. There's a whole bunch of use-cases for this, really. And some of them might actually pull some money behind it.

If you're interested, watch the screencast we used during the 90 seconds and see the picture of a visual enhancement we did after recording the video below.

We thought the idea was great and as we shared it with everyone who was kind enough to hear us, we started getting very positive feedback... namely from Bruno Pedro, Pedro Melo, Nuno Mariz, etc. That's always a great motivator. Also, Bernardo Mota helped us a lot with his experience with client support. Thank you all for the help.

Well... The best was yet to come, as this little demo granted us the ___th prize! (we were so taken by surprise that we didn't actually remembered to ask which prize we got! It was either 6th or 5th, I think.) 4th place I couldn't believe it! We won a prize!! And what a prize it was! We each got a brand new Macbook, a motorola Q 9h and 2x books. I grabbed one that I've been wanting ever since I saw Ann McMeekin presenting at <HEAD>: Design Accessible Web Sites. Pedro got a huge bible on Ajax. Awesome (the Eddie Izzard kind of awesome) prizes, I tell you. Great partners Codebits has. ;)

So thank you all who helped us, the jury for supporting us and now, we're off to find out the best way to get this online ASAP. I'll keep you posted.

One wish for 2009, though... I hope to see a lot less (or... none?) projects presented that were not developed within the 24 hours. There were still a good deal of projects that were clearly developed outside codebits and just used them at the competition... I know it's not that polite to critique if you're one of the winners, but the whole spirit of the event is to see what you can come up with in 24 hours...

So kudos to everyone who did their stuff at the event and as far as my favourite projects go, well, here's a list.

• Crowdbeats
• CloudStream
• Myusic
• Blog game

Organizers and participants

A last word to the organizers, who happen to be the company where I work at. Well done boys. It makes us proud to be part of the family with such a stunning event.

Also, I met a good deal of people throughout the 3 days and let me tell you, it feels good to see so many people getting together around the common interest, technology, and still be able to have a good time, laugh, sing, play, etc.

It's a proof that when it comes to geeks, there's more than meets the eye. ;)

Feedback more than appreciated.

Also, I forgot to say I'll be hanging out with cheatsheets during the hacking competition. On top of that, I have some moo stickers to hand out. Ask me for them... I'm also looking for more stickers, so if you have some, let me know.

Happy hacking, folks.

Estamos naquela altura do ano. Altura do Codebits! O ano passado, a primeira edição garantiu um lugar especial no coração de geeks por todo esse Portugal. Pelos pequenos teasers que foram sido lançados no Blog do evento, este ano ainda vai ser melhor!

E claro, não podia deixar de lá estar. Cá está o meu perfil na Intra do evento. Graças ao Celso, aquilo está carregadinho de XFNs e hCards. :D

Este ano, fui convidado a fazer uma workshop sobre um tema que me interessa bastante e que não deverá ser surpresa para quem lê o blog — microformatos. Na altura tive receio de ficar marcado como "O gajo que não se cala com microformatos", mas uma vez que nunca fiz nenhuma sobre este tema num espaço público (ambas as vezes foram formações internas), aceitei o convite.

Aqui fica a sinopse publicada no site do Codebits:

Os microformatos têm-se vindo a afirmar nos últimos anos como uma peça vital no futuro da web. Dada a sua facilidade de implementação e o aumento do suporte destes formatos em várias frentes, há cada vez mais sites a produzirem conteúdos com estes formatos embebidos.

Nesta workshop iremos dar uma introdução ao conceito, uma visão geral dos formatos mais predominantes e mostrar várias formas de os consumir _hoje_ na web.

Vai ter por base a apresentação que publiquei há umas semanas, no entanto, foi alterada para estar mais próxima da realidade do codebits. Para além disso, foi actualizada com algumas novidades que sugiram entretanto. Também irá incluir uma série de exemplos e possibilidades para talvez despertar a imaginação dos participantes e poderem assim criar projectos para o concurso do Codebits que tirem partido da miríade de microformatos que existem por essa web fora.

Ora tomem lá um sneak-peek:

Se tens dúvidas ou críticas sobre os slides que publiquei, aparece e coloca questões!

Até lá? ;)

Mal posso esperar pela edição de 2009. Ano passado: quadrados. Este ano: cubos. Próximo: hipercubo? :D

I've had a couple of websites hosted at PowWeb since 2005. Even tough I had had other hostings before that, their plan really looked promising, at the time.

For the first year, everything went smoothly. After that, the lack of SSH and their poor handling of a few issues I had with my account really started to bug me.

When the yearly invoice was approaching, I really wanted to move everything elsewhere, but I ended up staying simply because it was too much of a trouble. Didn't want to move the whole set of websites, since, if I recall correctly, it was during some busy busy weeks.

But come on... this is 2008, the 21st century! No one should have their websites hosted on hosts they don't like. That's why this year, I got off my ass and moved everything to slicehost. Yes, I'm finally free of PowWeb! And that makes me smile.

On the table, I had mediatemple's (gs), slicehost and gandi. I decided to grab a slice and see how it goes. I'm on a monthly basis, so if I want to pick up and leave, I will. And yes, I know they were just bought by RackSpace. I'm an optimist.

With the total control over the machine, comes a lot more work. Since I've never worn the admin hat very seriously, some of you might have felt a few *hiccups* on either one of my hosted domains:

• *.andr3.net
• mobifeeds.net
• brunoluis.com

If you find something out of place, it's either a glitch in the Matrix or I've overlooked something.

Give me a shout, will ya? Thanks.

Feel free to give some feedback in the comments below.

Demo and Code

For those of you who didn't attend, I wrote a tiny little script over two nights that acts as proof of concept. It simply scrapes a given page and tries to gather data of the user's attention profile.

The goal would be to be able to provide content in which the user is interested right off the bat, as soon as they sign up. I described the harvesting algorithm in one of the slides, but here is a small list of the steps:

1. Get page contents.
2. Look for an APML
3. Gather set of rel-tags
4. Scrape any rel-next, rel-previous or rel-archives.
   This step is not done in the script, it just detects the presence of the links.

You can test it for yourself at: http://workshop.andr3.net/tageater/

If you want the code, it's available for download as zip file. I didn't put it up on SVN or anything because it's just an example. It's written in PHP (5.0), requires curl, DOM and SimpleXML.

It uses the microformats transformer Optimus, written by Dmitry Baranovskiy.

It includes a very basic cache mechanism, based on the filesystem. Make sure the ./cache/cache folder has the right permissions, if you want to use it.

I'm releasing all this under the MIT License, but remember this is only a proof of concept, or in another words, do not use this in production.

Examples

Here's a few tests I made with it. First, and this is included in the script eve though it's deactivated, I pointed it at the all the URLs specified by the BarcampPT attendees. On top of that, to avoid skewing the results by grabbing URLs owned by fellow geeks, I pointed it towards 5 of the highlighted blogs at SAPO Blogs at the time.

Q&A

A very important question came up from the audience right at the end.

What's the motivation to open up and publish our users' attention profiles?

By opening up your platform and allowing the users to knowingly publish their attention profiles, you are not only becoming a part of the web's ecosystem. You are increasing the value and importance of the users profiles in your own service/website!

Or as I put it, when the user signs up on any other website or service and sees that it's possible to import his attention profile from YOUR service, who do you think will benefit? Both the new service AND your own! He will become aware of the increased usefulness of having a profile with you. More here.

If you have some more questions, shoot. :)

z-Ceiling

Let me know if you run into some bugs or if it fails to pick up any element. Worked for me on Firefox 3, but should work on other browsers as well.

(the code of the demo I used at barcamppt is in the oven, should be ready soon.)