One Tip a Day

tracking RSS

admin — Thu, 16 Jul 2009 05:43:50 +0000

Today I implemented a RSS feed on http://giveandtake.co.nz, and try to figure out how to track the number of subscribers.

I was already under the impression that was not an easy thing to do, I got it confirmed.

Aggregator providers, such as Google Reader, fetch a feed once and then distribute it to the subscribers.
Others automatically call the feed at a regular interval, even if the user is not necessary reading the new feeds each time.
A solution is to use a feed gateway such as feedburner (which I just discove is now part of Google). But then the pagerank of the feed benefits to feedburner and not to your own domain…

A more detailed link:
http://www.rss-specifications.com/measuring-tracking-rss.htm

IE6 survival guide

admin — Wed, 15 Jul 2009 03:12:11 +0000

A good link on (the most common) IE6 issues and how to fix them:

http://jimdiesel.wordpress.com/2009/07/13/the-ie6-survival-guide/

OWASP

admin — Tue, 14 Jul 2009 03:41:30 +0000

Yesterday I was at the Auckland OWASP conference, a free full-day conference, with talks about

online Credit Card management rules to be followed (laws) when storing data card information (PCI-DSS)
firefox extensions and security (bottom line: there is none: installing extensions give them full access to your machine)
bug chaining (or how combination of bugs can be more devastating that their sum)
insecurity and the internet: or how technologies changes but security bugs remain the same since more than 10 years
testing web services (same risks than web application, plus additional ones related to the XML parsing)
Vulnerabilities in action: common development and configuration mistake, and demonstration of exploit (for some, you mum could do it)
XSS: how to avoid them (don’t brew your solution, use libraries)

The talks and presentation should be online soon.

CSS: the box model

admin — Thu, 09 Jul 2009 01:58:52 +0000

An interesting discovery for me recently (explaining part of the inconsistencies between IE and FF displays):

For firefox (and the W3C), the width of a box exclude the padding and the border.
For IE till 7, it includes it by default.
So if you set for example both width and padding to a block element, it will renderer differently in both browser.

However, I just learnt that you can turn it to “standard compliant mode” by defining the proper doctype on top of your files, e.g.:

More info:

http://msdn.microsoft.com/en-us/library/bb250395(VS.85).aspx

Flash: can’t fill an area with the Paint Bucket

admin — Wed, 13 May 2009 08:08:38 +0000

As I use very seldomly the flash IDE to draw stuff (I usually got the drawings from designers), I sometimes get stuck with some very basic issue.

Today, I was unable to fill a (close) triangle with the Paint Bucket tool.
After hacking around and filling it with dots or rectangle, I decided it was not the way to go and asked the guy next desk if he had a clue on it.
Actually the triangle was not really close: it appeared so as the line were 3 pixels wide, but the actual drawing object (that we can see by selecting the lines with the subselection tool – A -)

firework, smoke and flame effects in flash

admin — Mon, 11 May 2009 20:56:03 +0000

These days I am working on a project involving an interactive firework animation.
The purpose is to have at the end something like this:
http://maylin.net/Fireworks.html,
but with additional features.

I found the following helpful tutorials for this task:

Firework
http://www.wipeout44.com/tutorials/flash_fireworks.asp

smoke effect
http://www.pixelhivedesign.com/tutorials/Realistic+Flash+Smoke+Effect/

flame effect
http://www.sitepoint.com/article/flash-script-fire-effect/

Results in a few days / weeks! (as I may be working parallely in something else…)

Design links

admin — Wed, 08 Apr 2009 18:40:05 +0000

Today just a link stolen from Fracture’s blog: 50 links on graphic design basics, covering typography, color theory, UX and Design Theory.

http://psd.tutsplus.com/articles/web/50-totally-free-lessons-in-graphic-design-theory/

Making wireframes with Dreamweaver VS Axure

admin — Thu, 02 Apr 2009 22:56:55 +0000

Doing presently wireframes/mockups for a project, I checked around the tools to do that.

I tried 2: Axure and Dreamweaver. Below the pros and cons I find to each of them

Axure
Pros:

Allows to make quickly wireframe: drag and drop text boxes, form components…
Numerous interactions (tabs; conditional events; hidabel panels…) easy to create
Reusable components
Easy to add comments visible in the output
Export HTML
Export specs in doc (But I did not try that part)

Cons:

Generated HTML is definitly not reusable (made up of images, and absolutely positionned divs)
Price (about 589 USD)
Not designed to implement even bits of design (which is fair, it is a wireframe tool)
Tables integration weak (can put only text in it, no form elements, no buttons…)

Dreamweaver CS4
Pros:

Also provides nice user interaction tools (tabs, menus, accordeon) thanks to the integration of Spry (a JS library)
Also provides reusable components (assets) (which are copied over all files whenever saved – slightly less user friendly than Axure, but does the job)
Initial wireframe HTML can be reused first for mockup design, then in the project dev

Cons:

Building wireframes is not etremely fast (you’re closer to the html code, no really drag and drop)
Price too (about 573 EUR) – but is definitly more than just a wireframe / mockup design tool

Finally I’d rather choose Dreamweaver: wireframes are slightly longer to build, but it remains reasonnable (the spry integration is quite cool), and the mockup can be reused for later steps of the projects. And for about same price you’ve got more scope than Axure.

CSS tips with html tables

admin — Wed, 01 Apr 2009 21:11:25 +0000

Presently doing an html mockup, I am using to some extent html tables (which I should not as a presentation tool, but for a mockup, and in particular for forms with large amounts of fields, I still find it way faster than tableless html).

I found out a couple of tips to replace html attributes with proper css:

To prevent word wrapping with css:

table td{
white-space: nowrap;
}

to replace the html attribute “cell-spacing” in css:

table {
border-spacing: 0px;
}

To merge borders of neighbour cells:

table {
border-collapse:collapse;
}

Shared library items in Dreamweaver

admin — Mon, 30 Mar 2009 19:03:16 +0000

I am currently using Dreamweaver CS4 to make an intranet mockup.

Looking for a kind of include (namely, for a menu shared by all pages) without server-side scripting, I found that Dreamweaver propose a handy library.

a) You open window -> assets

b) from the asset panel, you create a new library item.
It creates a ‘.lbi’ file.

c) then, you can place this item anywhere in your pages. When you update your .lbi library item, DW propose you to update automatically all files in which it is included.

More details:
http://webdesign.about.com/od/dreamweaverhowtos/a/aa090406.htm