Notes on a web journey

posted on: 28 April 2008

Cars and type

filed under: @ 10:13:06

Welcome to CarType. A comprehensive study and collection of reviews and typographical applications of emblems, car company logos and car logos with images, comments, links, car company information and general interest.

cartype

Tags:

posted on: 28 April 2008

Type and design on the web

filed under: @ 10:06:33

There are some basic approaches, guidelines and goals to consider when working with type on the Web. Overall, the medium of Web typography involves readability, accessibility, usability, and brandability. On the Web, these aspects function together to accomplish design's goals of communication and user interaction.

5 Principles And Ideas Of Setting Type On The Web

Design is broken up into a number of basic principles that apply to all design from type creation to painting to page layout, both on the web and in print. However, especially on the web, these rules tend to be forgotten and we just go with what feels “right”. This isn't because designers are feeling too loose to abandon these rules, but rather, most people working on the web don't even know they exist - if they do, they don't understand how to use them.

The Elements of Design Applied to the Web

Tags:

posted on: 24 April 2008

Older than Stonehenge

filed under: @ 07:56:21

Compared with Stonehenge, they [the stone circles of Gobekli Tepe] are humble affairs. None of the circles excavated (four out of an estimated 20) are more than 30 metres across. T-shaped pillars like the rest, two five-metre stones tower at least a metre above their peers. What makes them remarkable are their carved reliefs of boars, foxes, lions, birds, snakes and scorpions, and their age. Dated at around 9,500 BC, these stones are 5,500 years older than the first cities of Mesopotamia, and 7,000 years older than Stonehenge.

7,000 years older than Stonehenge

Tags:

posted on: 23 April 2008

A spiral ornament symbol in illustrator

filed under: @ 13:21:20

On Veerle's blog:

Today I want to show you how you can create a spiral ornament in Illustrator and reuse this ornament throughout your artwork multiple times resized, rotated, mirrored, whatever… by turning it into a Symbol. I've talked about Symbols before and I showed you how to use the Symbol Sprayer Tool. This time I'll focus a bit more on the creation of the ornament itself. Like always I'll talk you through the entire process step by step. By explaining every little detail of each step, this tutorial should be a good exercise for the beginners among you.

A spiral ornament symbol in illustrator

Tags:

posted on: 22 April 2008

Annual death penalty statistics

filed under: @ 10:27:53

At least 1,200 people were executed in 2007 and many more were killed by the state, in secret, in countries including China, Mongolia and Viet Nam. The figures come from Amnesty International's yearly statistics, Death Sentences and Executions in 2007, issued on Tuesday, which say that at least 1,252 people were executed in 24 countries and at least 3,347 people were sentenced to death in 51 countries. Up to 27,500 people are estimated to be on death row across the world.

Secrecy surrounds death penalty

Death penalty, violence against women, arms dealing...all of it should and COULD be stopped...if the indifference would stop as well.

Tags:

posted on: 21 April 2008

Not so hidden hands

filed under: @ 08:40:18

To the public, these men are members of a familiar fraternity, presented tens of thousands of times on television and radio as “military analysts” whose long service has equipped them to give authoritative and unfettered judgments about the most pressing issues of the post-Sept. 11 world. Hidden behind that appearance of objectivity, though, is a Pentagon information apparatus that has used those analysts in a campaign to generate favorable news coverage of the administration's wartime performance, an examination by The New York Times has found...Most of the analysts have ties to military contractors vested in the very war policies they are asked to assess on air. Those business relationships are hardly ever disclosed to the viewers, and sometimes not even to the networks themselves. But collectively, the men on the plane and several dozen other military analysts represent more than 150 military contractors either as lobbyists, senior executives, board members or consultants. The companies include defense heavyweights, but also scores of smaller companies, all part of a vast assemblage of contractors scrambling for hundreds of billions in military business generated by the administration's war on terror. It is a furious competition, one in which inside information and easy access to senior officials are highly prized.

Behind Analysts, the Pentagon's Hidden Hand

What leaves me speechless is that these things need to be “discovered” by the New York Times. I cannot believe that most of people are so uninformed that need to be told what's going on...or maybe that is the chilling truth because I see it happening over and over again, people getting manipulated blatantly actually buying it and supporting the manipulators (see Italy's elections results as the latest example).

Tags:

posted on: 20 April 2008

The ampersand

filed under: @ 11:37:08

Via Veerle's blog:

The term ampersand, as Geoffrey Glaister writes in his “Glossary of the Book”, is a corruption of and (&) per se and, which literally means “(the character) & by itself (is the word) and”. The symbol & is derived from the ligature of ET or et, which is the Latin word for “and”.

Ampersands in history

The ampersand

Tags:

posted on: 20 April 2008

Flickr badge solved

filed under: @ 10:31:41

After almost three weeks I found the solution to the Javascript Flickr badge...

After Roger Johansson's help I kept looking around and ended up checking out
the Flickr API (I knew about it but I didn't think of it as the logical solution until then..). Anyway, I soon found out that I could get an XML document back with all the info needed to build a flickr badge. But...XMLHttpRequest cannot do cross scripting (XSS) because of security reasons and my php set up did not allow me to parse XML or send a call with XML-RPC. I still didn't want to have to change much to attain the result I was looking for.

Then I found an article on Vitamin by Cameron Adams of The Man in Blue.

I could get a response in JSON, no XSS problems and still be able to parse it with plain old Javascript.

I still had some problems and Cameron (thanks again) answered a question I asked him which pointed me in the right direction (code lines that shouldn't be broken marked with >>) :

function jsonFlickrApi(rsp){
if (rsp.stat != 'ok') return;
var div = document.createElement('div');
div.setAttribute('id','photos_wrapper');
var div2 = document.createElement('div');
div2.setAttribute('id','photos');
for (var i=0; i<rsp.photos.photo.length; i++){
var p = rsp.photos.photo[i];
var a = document.createElement('a');
a.setAttribute('href','http://www.flickr.com/photos/13067897@N00/'+p.id+'/');
a.setAttribute('title',p.title);
var img = document.createElement('img');
img.setAttribute('src','http://farm' +p.farm+'.static.flickr.com/'+p.server+'/' >>
+p.id+'_'+p.secret+'_t.jpg');
img.setAttribute('alt',p.title);
a.appendChild(img);
div2.appendChild(a);
}
var target = document.getElementById('badge');
if(!target) return;
div.appendChild(div2);
target.appendChild(div);
}
function call_flickr(){
var newScript = document.createElement('script');
newScript.setAttribute('src','http://api.flickr.com/services/rest/?method >>
=flickr.people.getPublicPhotos&api_key=xxxx& >>
user_id=idididi&per_page=8& >>
page=1&format=json&callback=jsonFlickrApi');
var obj = document.getElementById('write');
if(!obj) return;
obj.appendChild(newScript);
}

On the page I now have two empty, unstyled divs. The first has an ID of write and the other of badge. I build the container divs with Javascript and then append the result inside the badge div.

It validates and now, if Javascript is disabled, I just get nothing which is exactly as it should be!!

Tags:

posted on: 19 April 2008

New hunger, old issues

filed under: @ 09:19:02

Last year wheat prices rose 77% and rice 16%. These were some of the sharpest rises in food prices ever. But this year the speed of change has accelerated. Since January, rice prices have soared 141%; the price of one variety of wheat shot up 25% in a day... The prices mainly reflect changes in demand - not problems of supply, such as harvest failure. The changes include the gentle upward pressure from people in China and India eating more grain and meat as they grow rich and the sudden, voracious appetites of western biofuels programmes, which convert cereals into fuel. This year the share of the maize (corn) crop going into ethanol in America has risen and the European Union is implementing its own biofuels targets. To make matters worse, more febrile behaviour seems to be influencing markets: export quotas by large grain producers, rumours of panic-buying by grain importers, money from hedge funds looking for new markets.

I'm not an economist so my vision of the problem may be simplistic but it seems to me as if all these programs that should help the poorest are just attempts to patch up the effects of economic imbalance between “developed” countries and the rest of the world. These programs don't address the causes and don't try to really change the situation but just to keep it going and as invisible as possible. Food prices raise in response to speculations, rumors...people die of starvation because someone in an air-conditioned office says “maybe we will buy more wheat next year”..and the solution to something so absurd is to tell the farmer that they have to produce more wheat using more fertilizers...these are not solutions, these are the usual suspects making tons of money on rumors like it happens with the oil (forecast a cold winter or a hot summer and oil prices raise). Rumors, forecasts, projections, predictions, previsions...why we let them do this all the time?

Tags:

posted on: 16 April 2008

Designing with type characters

filed under: @ 09:44:51

Another post on Authentic Boredom :

Techniques for designing with type characters

A very beautiful way of using characters.

Tags:

posted on: 16 April 2008

Extensible CSS interface

filed under: @ 09:38:31

A series on Authentic Boredom :

Introducing “The Highly Extensible CSS Interface”, a four-part series of how-to's and savvy conversation to be published in the coming weeks, with the first article debuting this week. The phrase “highly extensible” is in reference to designing and coding interfaces that are flexible enough to adapt in ways the designer or developer may not foresee when handing off coded templates, while still retaining the overall aesthetic integrity of the layout.

The Highly Extensible CSS Interface ~ The Series

Tags:

posted on: 15 April 2008

Data visualization

filed under: @ 20:40:06

An article on A List Apart:

Three techniques for incorporating data visualization into standards-based navigation patterns.

Accessible Data Visualization

Tags:

posted on: 15 April 2008

Of bad choices

filed under: @ 09:56:02

My deepest condolences to my country for one of the worst choices ever. The numbers are now officially inverted, not 21st but 12th century.

Tags:

posted on: 15 April 2008

Delegating events

filed under: @ 09:41:37

On quirksmode.org :

Delegating the focus and blur events

Catching mouse events bubbling up the DOM tree ..

Tags:

posted on: 09 April 2008

Stonehenge dig

filed under: @ 20:01:21

Archaeologists carrying out an excavation at Stonehenge say they have broken through to a layer that may finally explain why the site was built. The team has reached sockets that once held bluestones - smaller stones, most now missing or uprooted, which formed the site's original structure. The researchers believe that the bluestones could reveal that Stonehenge was once a place of healing. The dig is the first to take place at Stonehenge for more than 40 years.

Breakthrough at Stonehenge dig

Tags:

posted on: 09 April 2008

Flickr badge five

filed under: @ 15:37:02

I have done a bit more testing and I found out that on Firefox the Javascript call returns only <img> and <a> but on IE6 it still returns <td>..I should have been more attentive. That's why the images end up outside the DIVs.

Tags:

posted on: 07 April 2008

Flickr badge four

filed under: @ 19:59:02

I'm still looking for a solution to the Flickr badge “problem”. I sent an email to Roger Johansson of 456 Berea St. and I got an answer back extremely fast. I already thanked him and I'm going to do it again: thanks!

He pointed me to this post by Chris Heilmann of Wait till I come. It's definitely interesting but I'm happy with the simple Javascript call I got from Flickr and I'm just trying to figure out why IE puts the images outside the DIV.

I did some more tests, actually coding Javascript on the page old style:

<script type="text/javascript">
document.write('<div id="photos_wrapper">');
document.write('<div id="photos">');
document.write('<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?..."><\/script>');
document.write('</div>');
document.write('</div>');
var div = document.getElementById('photos');
alert(div.firstChild.src);
</script>

It does not validate so I'm doing it just to test. The alert at the end of the script gives back the correct URI or script if I do alert(div.firstChild.NodeName) but the images are still OUTSIDE the DIVs in IE6...or, at least, they appear to be.

Using the DOM to build the Javascript external call to Flickr :

<script type="text/javascript">
document.write('<div id="photos_wrapper">');
document.write('<div id="photos">');
document.write('</div>');
document.write('</div>');
var div = document.getElementById('photos');
var js = document.createElement('script');
js.setAttribute('type','text/javascript');
js.setAttribute('src','http://www.flickr.com/badge_code_v2.gne?...');
div.appendChild(js);
alert(js.parentNode.id);
</script>

The result given by the alert at the end is correct (photos) but in Firefox it does not show the pictures the first time it loads the page (the Javascript call doesn't fire, I suppose) and doing a refresh causes the Javascript call to Flickr to take over the document making it blank and getting stuck on a bad URI call. On IE6 it just does not show the pictures (the Javascript call doesn't fire, I suppose).

Weird....

I also noticed that basically everyone that uses the Flickr badge as I do has the same “problem”, but it doesn't seem to bother them.

Tags:

posted on: 05 April 2008

Marriage

filed under: @ 20:47:16

The idea that marriage is under attack and needs defending is a central tenet of the so-called “culture wars”. The meaning and importance of marriage is central not only to efforts to ban same-sex marriage, but to pro-life politics, father's rights advocacy, abstinence-only sex education, the “mommy wars”, and pretty much the entirety of contemporary conservative politics. The (wholly imaginary) good old days that conservatives want to conserve is essentially a time when (straight, lifelong, twin-bedded) marriage was the fount of all that is good in society. And everything that is bad about today's society - teen pregnancy, street violence, welfare dependency, the spread of STDs, sexual predators roaming the Internet, even terrorism, is traced by said conservatives, directly or indirectly, to the decline and degradation of the institution of marriage. Now, to anthropologists, the way marriage is discussed and deployed in these debates is laughable. We know that marriage as conceptualized by the American religious right at the dawn of the 21st century is neither the only - or even a particularly common - form of marriage in the world, nor the way marriage has always been in our own society. The Biblical marriage that religious conservatives hold up as their example and guiding principle would be (and is) almost universally condemned by today's Christians.

The End of Marriage

Found through this more recent post.

I like to read articles written using common sense and perspective instead of just taking a moral stance and then finding justifications for it.

Tags:

posted on: 05 April 2008

Licit and illicit

filed under: @ 09:40:41

The illicit drugs trade (also referred to as the illegal drugs trade or drug trafficking) is one of the largest global businesses, at some $322 billion, according to the UN World Drug Report, 2007.

Illicit Drugs

I think decriminalization is the only way. It would eliminate the profits of organized crime (with all the other dealings that come with it) and it would cut the micro criminality rate down quite a lot.

The idea that if drugs are decriminalized automatically everyone becomes a drug addict is just nonsense and I don't understand where the people thinking like that have been living until now. As far as I know the youngs usually know exactly what does what. If you were a teenager in the eighties, like I was, you should have seen it all already, as I did.

Beside, believing that people are not able to take care of themselves is an insult to everyone intelligence, if we are able to choose how to regulate the use of alcohol, for example, since it is legal, why shouldn't we be able to do the same with other kinds of drugs? Sometimes I wonder: are the people advocating prohibition doing it because they somehow really believe in it or because there are to many interests at stake? Both drug trafficking and war on drugs are worth billion of dollars and are tight with arms dealing...sometimes the line between licit and illicit becomes strangely blurred...

Tags:

posted on: 04 April 2008

Flickr badge continued

filed under: @ 10:35:02

On Javascript kit I found this tutorial: external JavaScript and php. At this point, I really thought I had the solution.

So, I rewrote the php function accordingly:

<?php
header("content-type: application/x-javascript");
echo "document.write('<div id=\"photos_wrapper\">');";
echo "document.write('<div id=\"photos\">');";
echo "document.write('<script type=\"text/javascript\" src=\"http://www.flickr.com/badge_code_v2.gne?...\"></script>');";
echo "document.write('</div>');";
echo "document.write('</div>');";
?>

then placed a link to the external file inside the page where the badge is supposed to be:

<script src="functions/flickr.php" type="text/javascript"></script>

In Mozilla Firefox everything is all right, it validates and...IE puts the images OUTSIDE the div!! Why? Have no idea...

IE screenshot

The simple fact that is possible to have some kind of data exchange between php and Javascript is very interesting in itself and I had never read anything about it before. I definitely learned something but I still haven't found the solution to the problem...

Tags:

posted on: 03 April 2008

Typeface design process

filed under: @ 19:07:06

In this article I will attempt to illustrate my design process - from typeface concept to a marketable font. Not many folks are willing to write about this. Perhaps they find it boring, irrelevant or just a little bit personal. I suspect it is a mix of all the above.

Font first sketches

Newzald: From Moleskine to Market

Very interesting article. Thanks Kris.

Tags:

posted on: 03 April 2008

More Javascript flickr badge

filed under: @ 10:19:04

Still trying to get my head around the same Javascript problem. I tried the DOM (my first idea, actually, but I didn't want to have an extra div to use as a hook):

function flickr_badge(){
var target = document.getElementById('photos_hook');
if(!target) return;
var div = document.createElement('div');
div.setAttribute('id','photos_wrapper');
var div2 = document.createElement('div');
div2.setAttribute('id','photos');
var js_s = "<script type='text/javascript' src='http://www.flickr.com/badge_code_v2.gne?...'></script>";
div2.appendChild(js_s);
div.appendChild(div2);
target.appendChild(div);
}

and using innerHTML :

function flickr_badge(){
var target = document.getElementById('photos_hook');
if(!target) return;
var div = document.createElement('div');
div.setAttribute('id','photos_wrapper');
var div2 = document.createElement('div');
div2.setAttribute('id','photos');
var js_s = "<script type='text/javascript' src='http://www.flickr.com/badge_code_v2.gne?...'></script>";
div2.innerHTML = js_s;
div.appendChild(div2);
target.appendChild(div);
}

with the same result: the Javascript call to Flickr takes over and rewrites the whole page, I get only unstyled photos and a loopy request to connect with flickr...

I also tried embedding the Javascirpt directly in the page :

<script type="text/javascript">
document.write('<div id="photos_wrapper">');
document.write('<div id="photos">');
document.write('<scr'+'ipt type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?...."></scr'+'ipt>');
document.write('</div>');
document.write('</div>');
</script>

I had to break the <script> tag in two pieces, otherwise I get a Javascript unterminated string error (script tag nested inside another one), it works but it doesn't validate. Basically, so far, most of my possible solutions don't work and what works doesn't validate.

Tags:

posted on: 02 April 2008

Javascript flickr badge

filed under: @ 14:27:21

Beside the lack of web standards attention, I had another problem with the Flickr badge: with Javascript disabled I ended up with a rectangular empty div, 76px height, just sitting there..

I looked around on Google for a solution, at first I thought I could check if Javascript was enabled with php. It turns out that it's pretty easy to check if the browser has Javascript abilities but not if it's actually enabled. I know that php is a server side language and Javascript mostly client side, so it's not possible to call a php function from a Javascript script (except maybe using XMLHttpRequest but I did't even go there).

After trying various unsuccessful combinations I finally figured it out and I wrote the php function so that it writes what I need using Javascript:

<?php
function flickr(){
echo "<script type=\"text/javascript\">\n";
echo "document.write('<div id=\"photos_wrapper\">');\n";
echo "document.write('<div id=\"photos\">');\n";
echo "</script>\n";
echo "<script type=\"text/javascript\" src=\"http://www.flickr.com/badge_code_v2.gne?....."></script>\n";
echo "<script type=\"text/javascript\">\n";
echo "document.write('</div>');\n";
echo "document.write('</div>');\n";
echo "</script>\n";
}
?>

Now, if Javascript is enabled, all is good, otherwise just no empty divs and no flickr badge...I thought... but NO, now it doesn't validate because since there are three <script> “blocks” the parser sees an opening and ending mismatch of the divs ..So, I'm back where I started. More when I fix it..

Tags:

posted on: 01 April 2008

Mobile phone design

filed under: @ 21:18:32

The first step was to create a mobile style sheet. For this I duplicated the CSS file I've already built for large screens, and started stripping out the style that doesn't work so well on a smaller screen. The layout was simplified into a more linear single column, and some elements were re-done to provide a larger target area for a maximum Fitts factor, and background images were dropped wherever possible to cut down on bandwidth demands.

Mediatyping

Interesting post on Mezzoblue. Lots to read and to learn, still going through the comments.

Tags:

CSS,Javascript and Php studies

Anti spam email
A solution to writing an anti spam email contact link
filed under: Javascript
Background image
A background image randomizer that I used in the second version of this site.
filed under: Javascript/CSS
Javascript menu
A menu that uses Javascript and session cookies.
filed under: Javascript/CSS
MiniSite
Experimenting with CSS and Javascript.A simple but, in my opinion, nice navigation “system”. The MiniSite is a one page site.
filed under: Javascript/CSS
Photo display
Protect copyrighted photos: a simple but effective solution.
filed under: Javascript/CSS
Photo gallery
A photo gallery made for a friend
filed under: Javascript
PHP menu
A PHP menu that can be updated without having to re-publish all the pages is on.
filed under: PHP
Pop-up menu
A very simple pop up menu powered by Javascript. It works also if Javascript is disabled.
filed under: Javascript/CSS
RSS feed
How to write and use an RSS feed
filed under: rss-xml
Tag replacer
The Tag replacer explained and a link to it.
filed under: PHP
Tags search
A search form build and powered using Javascript and the DOM
filed under: Javascript