Alcides Fonseca

Opera’s Chris Mills writes a great article titled Coding for the mobile web which I heavily recommend for any of you who is interested in developing websites targeting mobile devices, or just any webdesigner/webdeveloper in general, because you should make sure your website runs on mobile devices too.

In this article I learned something that I find amazing I didn’t know before: the fact that some mobile browsers, like Opera Mini in this case, work through a proxy system. This is, when you navigate to alcidesfonseca.com, you’re going for a opera script that fetches this website and formats it in a way it fits perfectly your browser (and saves you bandwidth costs!). I must say I’m admired! From the use I gave to Opera Mini, the speed didn’t make me think there was an external proxy doing this!

That’s true, I’m finally learning Django. Since I haven’t had no big website until now, I’ve been using my microwebframework pungi. But for large websites I feel the need for something more powerful and scalable.

I’ve been following (well, almost) the tutorial on the website adapting it to my needs. I’ve now reached the template part and I wondering if Django’s default template system is the best approach. I am pretty familiar with HTML and I even find it natural to write using XML tags, but I’m not sure if this is the best approach.

I’ve been looking for some alternatives (Yeah, Django is great because you can use whatever template language you want without any trouble!) and I found Brevé, a python DSL (or little language) for HTML generation. Writing Python is so much simple than the weird XML syntax. But I’m already used to HTML, so I got a problem here. And I believe there would be a more pythonic way of representing HTML. I feel ruby’s HTML generation in the CGI module (scroll down to “Print http header and html”) more readable than python lists. But okay that’s just my personal opinion.

I also took a look at PyMeld. Not quite a template language, but a way of manipulating HTML, that would have the same effect, but I believe Django’s template system is easier.

I could also use a client-side javascript template system, like MV suggests but I think neither me nor the world is ready for such thing.

So what would you choose if you were me?

The first one is not a tech one, but still geeky. Randall Munroe is the author of xkcd, a fantastic comic about romance, sarcasm, math, and language.

The second one is indeed technical. Håkon Lie and Michael Day present PrinceXML and CSS design for printing. A really cool presentation to learn a bit how to style you webpages to generate an handsome print layout or PDF file.

Until now, I would swear that the only mobile device AJAX was available was in the iPhone. Well, I now know how to use the XHR activeX object in Pocket IE and it gets better: There is a library for working with the AJAX capabilities of mobile browsers. Frost AJAX lib (via Celso) is a really nice project that I will use when developing my next web application.

I really hate when I go to some website that is only meant to use with desktop browsers. Sure webdesigns should have fluid layouts and AJAX should be hiJAXed, but I believe sometimes the best solution is to make a mobile-specific website. Like m.twitter.com or GMail/GReader. Sometimes users in different devices have different needs so they should get different contents.

But yes, Javascript and AJAX is the future for Mobile also. The iPhone is a good example of that!

Whenever I have some work that envolves design, I usually have to find some source of inspiration. I usually bookmark websites that have unusual or interesting design. Appart from blogs, I also follow the work from some companies. Three of them follow, and all from Portugal.

SenteDesign

SenteDesign is a design & communication company based in Aveiro. They do photography, illustration, corporative image, video, advertising, webdesign, you name it. For examples of their work, check out their portfolio. You should also check their backstage, a company fotolog, and their sentetube, where they keep their videos.

Burocratik

This one is from my hometown, Coimbra. This design and multimedia studio has some pretty good work in webdesign, branding, illustration, just to name a few. I follow them mainly through their blog that is a almost daily inspiration source.

WigWag

The last one, from Algarve, is also a marketing/branding/design company, but what I love the most is their webdesign. The sites they build have a very clean and simple design, but leaves a pretty good impression on the visitor. They also have a passion on mac’s and that will surprise everyone anytime soon!

Open up the websites of your favorite web2.0 applications or social networks. Take only one second looking at each. Finally you’ll probably take the conclusion that there are design patterns in all of them. The squared corners, the reflection, gradients, badges, you name it… And every new web2.0site that comes up has this proven-to-work design. But this is not innovative in any way, is it?

Elliot Jay Stocks has a pretty awesome presentation on this called Destroy the web2.0 look that he gave at Future of Web Design. If you are a webdesigner, this is a must-read! If you are not, well… read it anyway!

I strongly agree with Elliot, since I’m tired of seeing all these websites look the same. If they want to have their own identity and not yet another web service, they have to engineer their own design. Web2.0 is not about that gradients or squared corners, it’s about focusing the web on the users and the relations between them (in my humble opinion). Of course there are several things that come from this, one of them being the simpleness of the design, so that the content is not obfuscated. But there are unlimited ways of achieving that, you just have to let your inner artist do his thing.

Do outro lado do Atlântico, na terra do tio Sam, há um caso em tribunal que poderá mudar o futuro da acessibilidade web. Um cego processou a empresa Target pelo seu website não ter atributos ALT nas imagens e teclas de acesso para permitir a sua navegação por ele próprio. Um juiz aceitou em tribunal o caso e estamos a espera de novos seguimentos.

De facto faz pensar se não será ilegal discriminar as pessoas com algumas limitações, quando existem standards para o fazer correctamente. Pessoalmente acho que não deveria ser ilegal, visto que cada autor do site faz o site para o público alvo que entender. Acho de bom senso fazê-lo até porque nem custa nada, e sofro bastante com isto quando navego no meu PDA.

Claro que se esta situação acontecesse cá em Portugal, estavam os webdesigners todos tramados, tirando uns ou outros que sabem fazer sites. Aqueles que fazem sites flash-based, com tabelas, spacers em gif, IE-only, etc… estariam em maus lençois, o que até gostava de ver, para que se esmerassem no seu trabalho.

Ainda nesta área fiquei surpreendido quando a Vanessa me disse que no curso de Novas Tecnologias da Informação, na Universidade de Aveiro, incluem acessibilidade, usabilidade e standards nos programas do plano curricular.

Lately I’ve been spammed a lot in this blog, so I decided I had to implement some kind of captcha, a way of checking if it is a real person submitting that form. Here you can check some wicked examples. Through Sérgio I learned about reCaptcha, a project that uses captchas to complement OCR programs. You can read more about this in his post.

I was having some issues trying to implement it, when Bruno Figueiredo told me about Negative Captchas. I googled it and I found out that was a pretty nice system. I added a <input name="email" value="" /> hidden with CSS and changed the email field to “email_alt”. Bots fill all the fields for default, so if the email field has some content, it was a bot since users can’t see it. Easy and users won’t notice.

However, the negative captcha technique has a downside: Spammers can make custom bots to spam the system, but since this is a not-so-popular weblog I’ll take that chance.

Oh and a small time-waster:

Context-driven advertising is becoming widely popular, proved by the Adsense’s success. Two days ago, while talking to Tiago Serra about how to get money from google maps mashups, I thought about a advertising system, just like Adsense, but georeferenced. Publishers would charge their GeoAds account with credits and then add their ads to the system with their coordinates. Mashup owners would add a little code to their website (compatible with GoogleMaps, LiveEarth and YahooMaps) and from then on, all the ads would be seen in their application. And for each user click, the credit changes from the advertiser to the publisher (can be traded later for real world money).

But this system will only work fine if adopted by a large number of online geo-based services in order to show advertisers this is really a good way of publicize businesses just like local outdoors. So if you own a GeoMashup, feel free to contact me and share some ideas about GeoAdvertising.

Para além do jantar, a waveweb, pela pessoa do Pedro Barata ainda nos presenteou com uma apresentação sobre uma área do meu interesse : Search Engine Optimization. Gostei da sequência dos conteúdos da apresentação, começando primeiro pela necessidade que as empresas têm em que o seu site apareça primeiro nos resultados dos motores de busca, depois do PageRank e como ele funciona.

Falou também sobre como através das metatags, title, headers e footers melhorar a indexação pelos motores de busca. Aqui as keywords escolhidas desempenham um papel importante. Foi por esse motivo que ele lançou o projecto GimmeKeywords em que quem quiser pode submeter o seu site, e ele irá responder-lhe com as keywords ideais para inserir no código. Também fiquei admirado com este projecto, pois normalmente uma empresa aproveitava esta tecnologia para si própria, ou no máximo, vendia a outra. Way to go WaveWeb!

Falou também da importância essencial do conteúdo, dos links de outros sites para o nosso e da qualidade (= pagerank de quem linka) desses links. Falou também de uma técnica que é bastante questionável na minha opinião: colocar links para sites da concorrência. Claro que isto indica que “não temos medo da concorrência” mas muitas empresas podem não querer fazer isso por questões de política. E de facto, isto pode aumentar (em certas situações) a qualidade do site, mas de facto não optimiza o site para motores de busca. Pelo contrário, ao linkar-mos a concorrência estamos a contribuir para que o PageRank deles aumente e apareça antes do nosso.

Gostaria de ouvir mais opiniões relativamente a este assunto, visto ter sido a única coisa em que discordei das úteis ajudas que o Pedro nos proporcionou.

As I’ve already posted here, I’ve been working the last two months on the ejaki project. I was assigned to make its web interface and I have it working already.

The previous website was very ugly and the ejaki data displaying was only a list of ejakis with a small google maps thumbnail for each one. It was running in ASP.NET (SQL server as database) and was using .NET authentication methods.

It was my first time working with ASP.net (I’ve only worked with classic ASP a few years ago) and I didn’t like quite much the webcontrols and the way things were organized. A RAD MVC platform for ASP.NET is what I really wanted, but Midgard wasn’t ready yet.

I decided to remake the website all from scratch. The database was changed not to use that heavy .NET authentication modules and to add some extra information. As for javascript, I chose Prototype + Script.aculo.us + MyPrototype and it was the first time I’ve seen it being used with ASP.NET. It works the same way as in ruby, python or PHP, you just have to make a ashx file (Generic Handler) with the response you want to load with AJAX methods. I found the MASTER and partial page system pretty weak for some stuff I wanted to do.

In the new website I tried a different approach. Being the data mainly geographical, the map is now the center of the website, and everything works around it. This may raise issues with browsers not compatible with Google Maps API and Mobile Devices (a target platform). So in the future, a mobile website will probably be done.

As for now, I’ve revamping the Windows Mobile software so it looks more cool to use. If you’re attending Barcamp Portugal, I’ll be making a short presentation with a demo, so if you do have a PDA with GPS, please don’t forget it ;)

I think it was a great idea to make the website design like this, so it would stand out from the rest of websites. Mainly bands pick up good artists to make their website, because they like their visual art. However designers tend to be bad web designers. They lack the geekness needed for professional websites. In my work, I’ve dealt with designers that are good in traditional paper design, but when it comes down to the web, they just lack some skills.

If you notice the Dandy's website, although it has RSS and validates the code. It’s still displayed inside tables and iframes. This sucks when viewing the page in small screen devices like IE mobile, Opera Mobile and Mini (which you can test here). Web designers should know this stuff and how to get around that.

I gave Dandy Warhol's Website example as i could give a lot of them, and you probably know it by yourself. In my work I’ve dealed with a lot of designers, and when they “draw” something, they don’t even think how it would be displayed, if it’s even possible to do those effects, if it will run on mobile devices, if it would be accessible to disabled people and so on… It’s terrible to work with them if you can’t change the design and you know it’s bad.

Introduction

A few small companies have been asking me how to increase their website visits, so I decided to write something explaining the basics of SEO and some tricks I use.

Where do visitors come from?

This is an easy one! They usually mostly from three sources:
# Advertising ( Paper flyers, Outdoors, Contact cards, emails, sms’s, etc )
# Links from other websites, usually from the same area
# Search Engines

What can I do to make people navigate to my website?

If people arrive you page through those different sources, you should explore each one the most you can.

Advertising

This one is obvious, you should make sure your site address is written (and correct!) on each paper your company prints. Even on receipts or invoices, you should print it on a side or footer. Most of the times the best form to display it it’s just www.company.com, because for non-geeks the http:// is not useful and often confuses people.

Links

Contact companies you work with, or websites with content related to yours, and ask if they can include your site in their link area. Offer yourself to do the same as a reward, or even a small banner on your page. It will prove to be one of the best solutions for you to get some guests on your page.

Other viable option is adwords, system where pages with google ads and content related to you, show your link. This will make the work by itself in most cases. Just find out if the prices are affordable to you.

SEO?

SEO stands for Search Engine Optimization and it refers to the art of making you website more visible to the public, and the one that matters most to you.

As you can see by looking at the pie, google is the search engine most used, and that’s the one you should worry the most, although most of the browsers work almost the same way. If your business is local, then you should check for the most used search engine in your area.

How do Search Engine Work?

First thing in the SEO, is to know how search engine works. Search Engine Companies have webcrawlers running in their servers. These are programs that navigate through websites and add each link they found to their database to check later. They usually save other information we will discuss later.

How does the Search Engine know what my content is? Does it know how to read?

Well, for now the short answer is no. But you can teach him what your content are. First of all, make sure your code validates, this will make sure the crawler reads you page. Now, the page should have some special information in it’s head tag. You can change this using a text editor or the code tab from your WYSIWYG editor. First, you should choose a title, that describes in a short way your page, so people will click it when seeing it as a result from their search.

Then, define the language your page is written in:

Afterwards, you should make sure you define the keywords and description you want search engines to associate to your page:

For last, there are some instructions you can give to the crawlers. INDEX means the robot should add the current page to it’s database and FOLLOW says he should follow the links in that page. Here are some examples for you to understand. Notice that the first is probably the one you should want.

Why my website isn’t shown first when searching for some keyword?

Google works with a PageRank algorithm. Each link to a website increases by one the rank of the linked page. The page better ranked with that keywords is shown first in the results page. In order to be the first result, your page has to be linked from a lot of other pages. This is why the Links section we saw above is so important.

Some tips and tricks

Usually, webdesigners are the ones looking for this information, and there are a few tips for them:

Have a development blog!
This is important since when you post about a website of yours, you add one link to it, increasing the page rank we talked about early. In addiction you can provide some information to another developers and this will be useful to the community.

Create a web of links
Imagine you have 3 clients. If you added in each one, two links for the others. This will also increase each one page rank. But if their contente is not related? Doesn’t matter, just add the style “display:none;” and visitors won’t see it while crawlers will. Now imagine this with a hundreds of websites, this would increase each one page rank in hundreds minus one. In this case I suggest you to use some server-side scripting to get the link list from your central page (PHP, ASP.NET, Python, Ruby, Perl, etc) I might post a code example regarding this later.

Conclusion

Well I think that’s it. Hope this suits you and help you page to be number one in the search engine result :) If you have any suggestion or doubt, just comment below ;)

My website was a bit ugly so I started to make a new layout. It’s kinda weird this one, but I think makes this more readable. Other pages moved to the sides so you have all the information in the front page.

Now the website is heavier and confused to mobile browsers, so when I got time, I’ll do a mobile version.