Archive for the 'webdev' Category

There are no Flash websites

Never say “we have a Flash website”; there is no such thing. You might say: we have a website and it features, amongst a lot of relevant information in HTML pages, a Flash movie and/or application. You might say: we did buy a domain and we decided that a real website would be too accessible for our customers, so it only has a Flash blob on the ‘homepage’.

Flash is to websites what airconditioning is to a car: you might call it luxury, you might call it indispensable, but you cannot call it a car. It’s just airco.

For some reason, people that have experience with creating Flash applications also think they can make websites. “Just throw some Javascript on the homepage and it plays beautifully”, right? Wrong! If you have never heard of proper markup, SEO, the limitations of Javascript and Flash, you should leave making websites to professionals. If you insist that your branding cannot be properly expressed with just HTML/CSS/Ajax, you can add a Flash object to your site. But on its own, it’s a sorry excuse for a website.

Case: Le Fabuleux Marcel de Bruxelles
Le Fabuleux Marcel de Bruxelles
Le Fabuleux Marcel de Bruxelles is a new brand of singlets (’wifebeaters‘ in English, or ‘marcellekes’ in Bruxellois). The idea is good, the branding is beautiful, the advertising is top-notch (not surprisingly, since the founder is also one of the founders of the ad agency LG&F).
Continue reading ‘There are no Flash websites’

If you're new here, you may want to subscribe to my RSS feed or receive updates via email. Thanks for visiting!

Styles should not be referenced by a <link>

(If you don’t work with HTML, this next post will be of no interest to you.)

Rant: the way external CSS stylesheets are included in HTML now is not logical nor convenient.
So: <link type="test/css" href="(...).css" rel="stylesheet" /> is wrong,
it should be <style type="text/css" src="(...).css" />.

Why?

css Zen Garden
Because src is for now, href is for later

In a HTML page, there are a number of files (URLs) that have to be fetched to display:

  • any text in the document, within <h1>, <p> or <div> tags or not
  • any images, specified as <img src=”" /> (always external)
  • any iframes, specified as <iframe src=”" /> (always external)
  • any javascript, specified as <script src=”" /> (external or in-line)

There are also links to other URLs that are not for now: maybe one click away, maybe just there to be interpreted by the web browser:

  • anchor links, specified as <a href=”"></a>
  • links: prev/next, archive links, feed link, specified as <link rel=”" href=”" />

So: you need the src="" referenced files immediately, and the href="" ones not. The way stylesheets are referenced now breaks this logic.

Because <style> is for stylesheets

Why can you embed in-line CSS style information within <style> tags, but not external stylesheets? Compare that to Javascript:

Inline JS: <script>...</script> and
External JS: <script src="" />

That makes sense. The same should be possible for <style>. The way it works now is counter-intuitive and antiquated. So please add it to XHTML 1.1.

Flickr: combining ALT and TITLE for images

If you want to embed one of your own Flickr pictures into your blog, the Flickr photo page gives you the HTML code for easy copy/paste. They require you to link back to the photo page, so obviously in the HTML they provide, they give your an image with a link, i.e. an <img> tag in between a <a> </a> anchor tag pair. A typical example:
<a href="http://www.flickr.com/photos/(...)" title="Photo Sharing“><img src=”http://static.flickr.com/(…).jpg” width=”600″ height=”1200″ alt=”(image title)” /></a>
As you can see, they combine both an anchor title (always “Photo Sharing”) with an image alt text (Flickr uses the photo title for that). Both fields give more info about the objects they refer to and are very much loved by search engines. It should come as no surprise that the #1 Google result for “photo sharing” is Flickr.
Flickr: img alt vs. a title
Continue reading ‘Flickr: combining ALT and TITLE for images’

Rails Conference in London - who’s coming?

RailsConf Europe
Who wants to join in for the September Rails Conference in London? Let’s set up a nice Belgian delegation!

We can get a group discount:

  • 5 or more delegates and get 10% discount
  • 10 or more delegates and get 15% discount

This is the reason why I’m asking this now:

  • May 15th and pay just £400/delegate
  • May 30th and pay just £425/delegate
  • June 30th and pay just £450/delegate
  • July 30th and pay £475/delegate
  • August 30th and pay £525/delegate
  • September 10th and pay £575/delegate

So: leave your details here if you want to join: if we get to 5 people by May 15, we take the 10% discount (£360 = 526 euro), if we don’t, but we get to 10 people by May 30th (Barcamp Brussels might help), we take the 15% discount (also £360), if not, it’s everyone to themselves.

Confirmed speakers:

The conference is already packed with exciting speakers, including the creator of Rails, David Heinemeier Hansson, Pragmatic Programmer Dave Thomas, best-selling author and passion maven Kathy Sierra, Rails core developers Jamis Buck, Marcel Molina, Jr., Thomas Fuchs, Rails authors and trainers David Alan Black, and Chad Fowler, Rake author Jim Weirich and many more to be announced.
(from europe.railsconf.org)

Storing the SQL queries in the database

I want to outline something I developed something like 5 years ago, and that I was kind of happy with at the time: a way of saving all SQL queries inside the database itself. The reason for writing this is that it would really fit in with all the RubyOnRails and other programming frameworks that are created these days. If someone feels like creating a component/plug-in for it, that would be so nice…

If you have no interest in programming and/or database management, go hug somebody and skip this article.

PRINCIPLE
In the most simple version, you have 1 extra table in your database that looks like this:

query_id   int % unique ID of the query
template   varchar(1000) % or even longer
var_list   varchar(255) % comma separated list of vars

An example:
[ 33 , "select * from users where user_id = %user_id% AND type = '%status%' " , "%user_id%,%status%" ]
Instead of constructing your SQL code in your (PHP) code by making one big string and then executing it, you call a function my_exec_query(query_id,array_params)
This function will

  • get the template text
  • walk through the comma-separated list var_list and for each variable inside, look the corresponding value up in the array array_params (or this can be a dictionary or a hashtable).
  • when all substitutions are finished, execute the SQL code and return the result as (connected/disconnected) recordset or an array.

Continue reading ‘Storing the SQL queries in the database’

Web-based web development

Writing code in your browser, it’s coming this way, I tell you! Some indications:

my own WikiRAD article (July 2005)
Playing around with PHP and wikis at the same time made me think on how web-based editing and compiling would be a good way to develop and run web applications
Feed43
Create an RSS feed out of any web page by using regular expressions with a nifty Web2.0 user interface. Lots of services are based on URLs and use RSS as input, so this can be the start of a first application. E.g. I just created an RSS feed for the Stubru playlist pages out of a Stubru Javascript file. Imagine I could now tell Feed43:
for each item in feed_that_I_just_created {
parse_the item_url
publish an rss feed for this item_url as feed_url_X
}

and then start working with that content too.
Amazon S3
web-based outsourced storage for any application, which made John Keyes and Peter Van Dijck to ask themselves: “Can you use Amazon S3 to create the new Flickr killer?”, and which made me think: but what if not only the storage, but the whole program was run by a 3rd party?
Iamalpha (via Richard McManus)
AOL’s new initiative for building microformat-based applications. It’s a bit early to grasp the extent what what they’re trying to accomplish, but I think it’s potentially more than just widgets. They don’t have a web-based IDE yet, but they do have a copy/paste code-validator. Most importantly: the applications are run by AOL!
YouOS (via Jeremy Zawodny)
YouOS: web-based IDE
a web-based OS that allows you to develop Javascript-based applications in a web-based IDE, with version control and compiling. It’s one of the products coming out of Paul Graham’s Y-combinator startup incubator.

Continue reading ‘Web-based web development’

Barcamp Brussels: May 2006

Barcamp Brussel
Last year we organised a fairly successfull blogger’s dinner in Brussels, and now we’re gonna try something different:
next May we will have a Barcamp Brussels event.

WHAT IS A BARCAMP?

Barcamp NY
(photo by miss_rogue)

Barcamp was first organised in LA by Chris Messina and some buddies.

BarCamp is an ad-hoc un-conference born from the desire for people to share and learn in an open environment. It is an intense event with discussions, demos, and interaction from attendees.

It is not your regular conference:

  • No spectators, only participants: Attendees must give a demo, a session, or help with one. All presentions are scheduled the day they happen. Prepare in advance, but come early to get a slot on the wall.
  • No fixed agenda: talks, demos and topics are proposed by the attendees when they arrive on a central whiteboard.

Continue reading ‘Barcamp Brussels: May 2006′

Jakob Nielsen: design mistake #5


Jakob Nielsen has published his updated Weblog Usability: The Top Ten Design Mistakes. One that I recently have tried to fix (before Jakob published his article, honestly!) is #5: “Classic Hits are Buried”.

Highlight a few evergreens in your navigation system and link directly to them. For example, my own list of almost 300 Alertbox columns starts by saying, “Read these first: Usability 101 and Top Ten Mistakes of Web Design.”
Also, remember to link to your past pieces in newer postings. Don’t assume that readers have been with you from the beginning; give them background and context in case they want to read more about your ideas.

As you can see in the sidebar on the right (if I haven’t changed my layout by the time you read this), “This blog covers stuff like […]” and then I have some links that show up when you click the […] button. I list some of the more typical posts (Podcasting with Blogger and Feedburner - Oct 2004 as well as tango moves) and some ideas/projects I launched (folksonomy, photofeed).

So what kind of links to your own posts could you make:

  • ‘classic’ posts: posts that are typical for the subjects you address
  • ‘remarkable’ posts: posts that are are maybe not typical, but that you are somehow proud of (in my case, “Imperial time units” comes to mind)
  • ‘popular’ posts: the posts that people visit most, link most to, have most comments on, …

The first 2 are probably links you better indicate yourself, the last one could be based upon aggregated stats. Let’s say you want to make each list as an RSS feed, so you can display it through PHP or Javascript on each blog page.

  • handpicked (’classic’, ‘remarkable’, ‘controversial’) posts: put them in del.icio.us or furl and use the RSS feed
  • ‘popular’ posts: imagine a statcounter of somekind, that measures the #page hits and visitors, that also checks Technorati, Google Blog Search and Yahoo stats, that also uses the Feedburner item stats (if any) and the # of comments per post (don’t know where that could come from) and that aggregates these together according to your own wishes. The end result should be the Top 20 of your own blog posts, in RSS format.

Any ideas on this?

UPDATE: I created an overview page for my blog, linked from the blog homepage.

Technorati: - - - stats - -