índice
2
Introdução
3
hi
http://www.hi-web.ch/#
8
Josef Muller brockmann - exibition
http://www.imagenow.ie/gallery/constructnew.html
10
helvetica forever
http://helveticaforever.com/en/html/helveticaforever.html
14
UBUweb
http://www.ubu.com/
26
Cortex — Xavier Encinas Studio personal visual
http://cortex.xavierencinas.com/page/1
32
Bitique
http://www.bitique.co.uk/
37
September industry - Online Graphic Design Journal
http://www.septemberindustry.co.uk/
42
The Grid System
http://www.thegridsystem.org/
48
Flickr - ser chic
http://www.flickr.com/
photos/tobias_assimil/3601826205/in/photostream/
2
Introdução
Este trabalho é a reunião de alguns estudos de caso, que
serão importantes para embasar várias premissas, conceitos e
métodos que serão espostos nessa dissertação.
Aqui, selecionamos uma série de sites que tem em comum
uma interface “minimalista”, isto é, interface limpa, com poucos e discretos elementos auxiliares, e em geral discretas.
Apresentamos uma imagem da interface das páginas, seguidas do código fonte que é recebido no computador do usuário, uma vez que não temos acesso aos códigos-fonte processados no servidor. Isto inclui o HTML e o CSS, e em algns
casos alguma informação de JavaScript. Como a ênfase do
trabalho é na estrutura e na aparência, não incluímos algumas
bibliotecas de JavaScript, utilizadas em elementos interativos,
pois muitas delas são muito extensas, e de fato seria muito
difícil separa o que é realmente utilizado em cada site.
Separamos alguns exemplos significativos de cada método
possível de projeto, que inclui, um site feito em flash, um site
feito a partir de um editor tipo WYSIWYG, sites em html e
CSS simples, e um site organizado a partir de tabelas construído à mão, e por fim, reunimos alguns sites construídos a
partir de sistemas de gerenciamento de conteúdo, e o Flickr.
Aqui podemos ver que não existe uma relação direta entre
volume de código e limpeza da interface. Sites cuja interface
é totalmente limpa, podem ser constituídos de milhares de
linhas de código, como é o caso do Flickr.
Cada interface e código é seguida de uma breve análise, que
procura observar partidos de projeto e consequências das
escolhas feitas pelos seus desenvolvedores. Nos códigos
HTML, conseguimos separar por cor o que é informação de
código (preto) e o que é informação de texto (colorido) do
conteúdo dos sites. Assim, podemos ter uma idéia do volume
dessa forma oculta, e do peso que as diferentes concepções
de projeto e construção podem ter na forma final desses
códigos.
Como o volume de informação é muito grande, tivemos que
utilizar uma fonte bem pequena, e organizar os textos em 3
colunas, do contrário este trabalho seria apenas páginas e
mais páginas de código.
3
http://www.hi-web.
ch/#
Site de um escritório
de design, o visual
é interessante, pois
tem relação tanto
com o design modernista da escola suíça
como tem elementos
mais contemporâneos, como o uso
da cor verde (ta tela
é verde puro, bem
brilhante), e textos
que aparecem sobre
as imagens quando
se passa o mouse
por cima deles.
A tipografia utilizada
também foge do
padrão arial, helvetica
sans-serif”, comuns
na maioria dos sites
analisados, e é mais
contemporânea.
4
<!DOCTYPE HTML PUBLIC “-//W3C//DTD
HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/
html; charset=iso-8859-1”>
<title>Hi - Web 2.0</title>
<meta name=”author” content=”Megi Zumstein,
Claudio Barandun” />
<meta name=”description” content=”Hi-Visuelle
Gestaltung, Neustadtstrasse 28, 6003 Luzern,
Grafische Erzeugnisse, von Büchern über Plakate
bis Signaletik.” />
<meta name=”keywords” content=”Grafik,
Gestaltung, Buch, Plakat, Printmedien, Signaletik,
Beschriftung, Print, Visuelle Gestaltung, Bernhard
Willhelm, Het Totaal Rappel, 68 - Zürich steht
Kopf, Community Development: Local and Global
Challenges, Herweber, Top of Central Switzerland,
Kunstmuseum Luzern, Design_Z, ZHdK, Hochschule Luzern - Soziale Arbeit, Hochschule Luzern Design & Kunst, Schönste Schweizer Bücher” />
<script language=”JavaScript” type=”text/
JavaScript”>
<!-function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p)
d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new
Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.
indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for
(i=0;!x&&i<d.forms.length;i++) x=d.forms[i]
[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.
getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments;
document.MM_sr=new Array; for(i=0;i<(a.
length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.
MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src;
x.src=a[i+2];}
}
function MM_openBrWindow(theURL,winNa
me,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>
<link href=”web2_files/navbar.css”
rel=”stylesheet” type=”text/css”>
<style type=”text/css”>
<!-body {
margin-left: 15px;
margin-top: 15px;
}
#gaswerk_text {
position:absolute;
width:200px;
height:115px;
z-index:27;
left: 626px;
top: 18px;
visibility: hidden;
}
#text_68 {
position:absolute;
width:200px;
height:115px;
left: 349px;
top: 20px;
z-index: 28;
visibility: hidden;
}
#zhdk_text {
position:absolute;
width:200px;
height:115px;
z-index:29;
left: 83px;
top: 594px;
visibility: hidden;
}
#bw_kat_text {
position:absolute;
width:200px;
height:115px;
z-index:30;
top: 20px;
visibility: hidden;
}
#commDev_text {
position:absolute;
width:200px;
height:115px;
z-index:31;
left: 489px;
top: 19px;
visibility: hidden;
}
#kuer_text {
position:absolute;
width:200px;
height:145px;
z-index:32;
left: 756px;
top: 17px;
visibility: hidden;
}
#weber_text {
position:absolute;
width:209px;
height:145px;
z-index:33;
left: 360px;
top: 208px;
visibility: hidden;
}
#werkstatt_text {
position:absolute;
width:200px;
height:115px;
z-index:34;
left: 422px;
top: 591px;
visibility: hidden;
}
#rep_text {
position:absolute;
width:200px;
height:145px;
z-index:35;
left: 212px;
top: 586px;
visibility: hidden;
}
#flyer_text {
position:absolute;
width:120px;
height:145px;
z-index:36;
left: 597px;
top: 208px;
visibility: hidden;
}
#blatten_text {
position:absolute;
width:200px;
height:146px;
z-index:37;
left: 82px;
top: 396px;
visibility: hidden;
}
#titelkampf_text {
position:absolute;
width:200px;
height:115px;
z-index:38;
left: 552px;
top: 594px;
visibility: hidden;
}
#skos_text {
position:absolute;
width:200px;
height:115px;
z-index:39;
left: 825px;
top: 593px;
visibility: hidden;
}
#brieflogo_text {
position:absolute;
width:200px;
height:115px;
z-index:40;
left: 693px;
top: 593px;
visibility: hidden;
}
#Plakat_text {
position:absolute;
width:200px;
height:145px;
z-index:41;
left: 299px;
top: 397px;
visibility: hidden;
}
#hgk_studien_text {
position:absolute;
width:200px;
height:115px;
z-index:42;
left: 428px;
top: 405px;
visibility: hidden;
}
#top_text {
position:absolute;
width:200px;
height:115px;
z-index:43;
left: 866px;
top: 209px;
visibility: hidden;
}
#bw_lookbook_text {
position:absolute;
width:200px;
height:115px;
z-index:44;
left: 732px;
top: 207px;
visibility: hidden;
}
-->
</style>
<script language=”JavaScript” type=”text/
JavaScript”>
<!-function MM_reloadPage(init) { //reloads the
window if Nav4 resized
if (init==true) with (navigator) {if ((appName=
=”Netscape”)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_
reloadPage; }}
else if (innerWidth!=document.MM_pgW ||
innerHeight!=document.MM_pgH) location.
reload();
}
MM_reloadPage(true);
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.
arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj
=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v==’show’)?’
visible’:(v==’hide’)?’hidden’:v; }
obj.visibility=v; }
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.
length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
//-->
</script>
</head>
<body onLoad=”MM_preloadImages(‘web2_files/
thumbnails/affoltern_down.jpg’,’web2_files/
thumbnails/skos_down.jpg’,’web2_files/thumbnails/blatten_down.jpg’,’web2_files/thumbnails/
werkstatt_down.jpg’,’web2_files/thumbnails/
titelkampf_down.jpg’,’web2_files/thumbnails/
rep_down.jpg’,’web2_files/thumbnails/BW_katalog_down.jpg’,’web2_files/thumbnails/68_down.
jpg’,’web2_files/thumbnails/CommDev_down.
jpg’,’web2_files/thumbnails/gaswerk_down.
jpg’,’web2_files/thumbnails/kuer_kat_down.
jpg’,’web2_files/thumbnails/design_z_down.
jpg’,’web2_files/thumbnails/fonts_down.
gif’,’web2_files/thumbnails/weber_down.
jpg’,’web2_files/thumbnails/flyer_down.
jpg’,’web2_files/thumbnails/BW_lookbook_down.
jpg’,’web2_files/thumbnails/plakate_down.
jpg’,’web2_files/thumbnails/hgkl_studienangebot_down.jpg’,’web2_files/thumbnails/hslusa_lesebuch_down.jpg’,’web2_files/thumbnails/
zhdk_master_down.jpg’,’web2_files/thumbnails/
top_down.jpg’,’web2_files/thumbnails/briefschaften_down.jpg’)”>
<div id=”hgk_studien_text”><img src=”web2_
files/sprechblasen/hgkl_studien_text.gif”
width=”168” height=”145” border=”0”
usemap=”#Map12”>
<map name=”Map12”>
<area shape=”rect” coords=”-4,0,103,147”
href=”#” onClick=”MM_swapImage(‘studiange
bot’,’’,’web2_files/thumbnails/hgkl_studienangebot_down.jpg’,1);MM_openBrWindow(‘web2_
files/hgkl_studienangebot/hgk_studien_1.ht
m’,’’,’scrollbars=no,width=800,height=621’)”
onMouseOver=”MM_showHideLayers(‘hgk_studien_text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘hgk_studien_text’,’’,’hide’)”>
</map></div>
<div id=”blatten_text”><img src=”web2_files/
sprechblasen/blatten_text.gif” width=”190”
height=”145” border=”0” usemap=”#Map17”>
<map name=”Map17”>
<area shape=”rect” coords=”1,3,189,142”
href=”#” onClick=”MM_openBrWindow(‘web2_
files/blatten/blatten1.htm’,’’,’scrollba
rs=no,width=750,height=591’);MM_
swapImage(‘blatten’,’’,’web2_files/thumbnails/
blatten_down.jpg’,1)” onMouseOver=”MM_
showHideLayers(‘blatten_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘blatten_
text’,’’,’hide’)”>
</map></div>
<div id=”designz_text” style=”position:absolute;
left:82px; top:214px; width:190px; height:156px;
z-index:10; visibility: hidden;”><img src=”web2_
files/sprechblasen/designZ_text.gif” width=”202”
height=”145” border=”0” usemap=”#Map2”>
<map name=”Map2”>
<area shape=”rect” coords=”3,0,101,157”
href=”#” onClick=”MM_
swapImage(‘design_Z’,’’,’web2_files/
thumbnails/design_z_down.jpg’,1);MM_
openBrWindow(‘web2_files/design_Z/designZ_1.
htm’,’’,’scrollbars=no,width=800,height=611’)”
onMouseOver=”MM_showHideLayers(‘designz_
text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘designz_text’,’’,’hide’)”>
</map></div>
<div id=”gaswerk_text”><img src=”web2_files/
sprechblasen/gaswerk_text.gif” width=”165”
height=”145” border=”0” usemap=”#Map4”>
<map name=”Map4”>
<area shape=”rect” coords=”1,1,106,146”
href=”#” onClick=”MM_
swapImage(‘gaswerk’,’’,’web2_files/
thumbnails/gaswerk_down.jpg’,1);MM_
openBrWindow(‘web2_files/gaswerk/gaswerk_1.
htm’,’’,’scrollbars=no,width=566,height=811’)”
onMouseOver=”MM_showHideLayers(‘gaswerk_
text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘gaswerk_text’,’’,’hide’)”>
</map></div>
<div id=”font_text” style=”position:absolute;
left:209px; top:211px; width:175px; height:143px;
z-index:11; visibility: hidden;”><img src=”web2_
files/sprechblasen/fonts_text.gif” width=”121”
height=”165” border=”0” usemap=”#Map15”>
<map name=”Map15”><area shape=”rect”
coords=”0,1,143,149” href=”#” onClick=”MM_
swapImage(‘fonts1’,’’,’web2_files/thumbnails/
fonts_down.gif’,1);MM_openBrWindow(‘web2_
HTML e CSS
Observando o código
fonte, podemos
ver alguns indícios
de que esse site
foi feito em um
programa editor
do tipo WYSIWYG,
o Macromedia
Dreamweaver.
Conseguimos perceber isso através de
uma marcação específica que o programa
deixa no mome de
algumas funções, o
prefixo MM_.
Além disso, o código
gerado pelo programa tem o CSS
embutido no HTML
e é estruturado a
partir de tabelas. O
uso de tabelas para
organizar o texto não
é recomendável, pois
é semânticamente
incorreto.
Ele praticamente
não tem nenhuma
informação textual,
pois o uso de fonte
não convencional
obriga o designer a
utilizar imagens para
disponibilisar o texto.
Isso significa que
este site não é
pesquisável por mecanismos de busca
e não é acessível
por browser textuais ou programas
especiais para cegos,
que transformam a
informação visual em
texto.
O código também
é sobrecarregado
de uma série de
scripts redundantes,
para fazer o texto
aparecer quando se
rola o mouse por
5
files/fonts/fonts_1.htm’,’’,’scrollbars=no,widt
h=840,height=606’)” onMouseOver=”MM_
showHideLayers(‘font_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘font_
text’,’’,’hide’)”>
</map></div>
<div id=”affoltern_text” style=”position:absolute;
left:772px; top:404px; width:232px; height:133px;
z-index:13; visibility: hidden;”><img src=”web2_
files/sprechblasen/affoltern_text.gif” width=”190”
height=”145” border=”0” usemap=”#Map8”>
<map name=”Map8”><area shape=”rect”
coords=”1,3,127,147” href=”#” onClick=”MM_
swapImage(‘affoltern’,’’,’web2_files/thumbnails/affoltern_down.jpg’,1);MM_openBrWindow(‘web2_
files/affoltern/affoltern_1.htm’,’’,’scrollbars=no,
width=700,height=483’)” onMouseOver=”MM_
showHideLayers(‘affoltern_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘affoltern_
text’,’’,’hide’)”>
</map></div>
<div id=”lesebuch_text” style=”position:absolute;
left:558px; top:396px; width:190px; height:145px;
z-index:24; visibility: hidden;”><img
src=”web2_files/sprechblasen/lesebuch_text.
gif” width=”187” height=”145” border=”0”
usemap=”#Map19”>
<map name=”Map19”>
<area shape=”rect” coords=”3,1,185,142”
href=”#” onClick=”MM_swapImage(‘hslu_
lesebuch’,’’,’web2_files/thumbnails/hslusa_lesebuch_down.jpg’,1);MM_openBrWindow(‘web2_
files/hsa_lesebuch/lesebuch_1.htm’,’’,’scrollbars=n
o,width=800,height=623’)” onMouseOver=”MM_
showHideLayers(‘lesebuch_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘lesebuch_
text’,’’,’hide’)”>
</map></div>
<div id=”kontakt” style=”position:absolute;
left:18px; top:73px; width:45px; height:20px;
z-index:26; visibility: hidden;”><img
border=”0”src=”web2_files/sprechblasen/kontakt_text.gif” width=”48” height=”11”></div>
<table border=”0”>
<tr>
<td width=”46” height=”145”><a
href=”web2_files/kontakt/kontakt_1.htm”><img
src=”web2_files/thumbnails/hi.gif” name=”hi”
width=”46” height=”145” border=”0”
usemap=”#hiMap” id=”hi”></a></td>
<td width=”10” height=”145”><img
src=”web2_files/thumbnails/transp.gif”
name=”transp” width=”10” height=”10”
id=”transp”></td>
<td width=”239” height=”145”><a
href=”javascript:;”><img border=”0”
src=”web2_files/thumbnails/BW_katalog_up.jpg”
name=”bw_katalog” width=”239” height=”145”
id=”bw_katalog” onClick=”MM_swapImage(‘bw_
katalog’,’’,’web2_files/thumbnails/BW_katalog_
down.jpg’,1);MM_openBrWindow(‘web2_files/
bw_katalog/bw_kat_1.htm’,’’,’scrollbars=no,wi
dth=800,height=595’)” onMouseOver=”MM_
showHideLayers(‘bw_kat_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘bw_kat_
text’,’’,’hide’)”></a>
<div id=”bw_kat_text”><img src=”web2_files/
sprechblasen/BW_kat_text.gif” width=”239”
height=”165” border=”0” usemap=”#Map5”></
div></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif”
name=”transp” width=”20” height=”20”
id=”transp”></td>
<td width=”111” height=”145”><a
href=”javascript:;”><img border=”0” src=”web2_
files/thumbnails/68_up.jpg” name=”Zuerich_68”
width=”111” height=”145” id=”Zuerich_68”
onClick=”MM_swapImage(‘Zuerich_68’,’’,’web2_
files/thumbnails/68_down.jpg’,1);MM_
openBrWindow(‘web2_files/68/68_Zurich_1.ht
m’,’’,’scrollbars=no,width=900,height=624’)”
onMouseOver=”MM_showHideLayers(‘text_68’,’’
,’show’)” onMouseOut=”MM_showHideLayers(‘t
ext_68’,’’,’hide’)”></a></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp2”>
<div id=”text_68”><img src=”web2_files/
sprechblasen/68_text.gif” width=”159”
height=”179” border=”0” usemap=”#Map”></
div></td>
<td width=”109” height=”145”><a
href=”javascript:;” onClick=”MM_
openBrWindow(‘web2_files/CommDev/
CommDev_1.htm’,’’,’scrollbars=no
,width=900,height=554+11’);MM_
swapImage(‘CommDev’,’’,’web2_files/thumbnails/
CommDev_down.jpg’,1)” onMouseOver=”MM_
showHideLayers(‘commDev_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘commDev_
text’,’’,’hide’)”><img border=”0”
src=”web2_files/thumbnails/CommDev_up.jpg”
name=”CommDev” width=”109” height=”145”
id=”CommDev”></a></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp3”></td>
<td width=”102” height=”145”><a
href=”javascript:;”><img border=”0”
src=”web2_files/thumbnails/gaswerk_
up.jpg” name=”gaswerk” width=”102”
height=”145” id=”gaswerk” onClick=”MM_
swapImage(‘gaswerk’,’’,’web2_files/
thumbnails/gaswerk_down.jpg’,1);MM_
openBrWindow(‘web2_files/gaswerk/gaswerk_1.
htm’,’’,’scrollbars=no,width=566,height=811’)”
onMouseOver=”MM_showHideLayers(‘gaswerk_
text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘gaswerk_text’,’’,’hide’)”></
a></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp4”></td>
<td width=”200”><a href=”javascript:;”><img
border=”0” src=”web2_files/thumbnails/
kuer_kat_up.jpg” name=”kuer_kat”
width=”200” height=”145” id=”kuer_kat”
onClick=”MM_swapImage(‘kuer_kat’,’’,’web2_
files/thumbnails/kuer_kat_down.jpg’,1);MM_
openBrWindow(‘web2_files/kuer/kuer_1.htm
’,’’,’scrollbars=no,width=800,height=595’)”
onMouseOver=”MM_showHideLayers(‘kuer_
text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘kuer_text’,’’,’hide’)”></a>
<div id=”kuer_text”><img src=”web2_files/
sprechblasen/kuer_text.gif” width=”200”
height=”145” border=”0” usemap=”#Map21”></
div></td>
<td width=”20”><img src=”web2_files/
thumbnails/transp.gif” alt=”” name=”transp”
width=”20” height=”20” id=”transp5”></td>
<td width=”0”> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><img src=”web2_files/thumbnails/
transp.gif” alt=”” name=”transp” width=”35”
height=”35” id=”transp7”></td>
<td width=”10”> </td>
<td width=”239”> </td>
<td width=”20”> </td>
<td width=”111”> </td>
<td width=”20”> </td>
<td width=”109”> </td>
<td width=”20”> </td>
<td width=”102”> </td>
<td width=”20”> </td>
<td width=”200”> </td>
<td width=”20”> </td>
<td width=”0”> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div id=”top_text”><img src=”web2_files/sprechblasen/top_text.gif” width=”190” height=”145”
border=”0” usemap=”#Map13”>
<map name=”Map13”>
<area shape=”rect” coords=”1,-1,124,149”
href=”#” onClick=”MM_
swapImage(‘top’,’’,’web2_files/thumbnails/
top_down.jpg’,1);MM_openBrWindow(‘web2_
files/top/top_1.htm’,’’,’scrollbars=no,width
=900,height=650’)” onMouseOver=”MM_
showHideLayers(‘top_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘top_
text’,’’,’hide’)”>
</map></div>
<div id=”werkstatt_text”><img src=”web2_files/
sprechblasen/werkstatt_text.gif” width=”157”
height=”145” border=”0” usemap=”#Map7”>
<map name=”Map7”>
<area shape=”rect” coords=”-2,0,102,145”
href=”#” onClick=”MM_swapImage(‘hsa_
werkstatt’,’’,’web2_files/thumbnails/werkstatt_
down.jpg’,1);MM_openBrWindow(‘web2_files/
hsa_werkstatt/werkstatt_1.htm’,’’,’scrollbars=no,
width=800,height=631’)” onMouseOver=”MM_
showHideLayers(‘werkstatt_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘werkstatt_
text’,’’,’hide’)”>
</map></div>
<div id=”commDev_text”><img src=”web2_files/
sprechblasen/CommDev_text.gif” width=”156”
height=”165” border=”0” usemap=”#Map6”>
<map name=”Map6”><area shape=”rect”
coords=”0,0,110,146” href=”#” onClick=”MM_
swapImage(‘CommDev’,’’,’web2_files/
thumbnails/CommDev_down.jpg’,1);MM_
openBrWindow(‘web2_files/CommDev/
CommDev_1.htm’,’’,’scrollbars=no,width=
900,height=565’)” onMouseOver=”MM_
showHideLayers(‘commDev_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘commDev_
text’,’’,’hide’)”>
</map></div>
<table border=”0”>
<tr>
<td width=”46” height=”145”><img
src=”web2_files/thumbnails/transp.gif”
name=”transp” width=”46” height=”46”
id=”transp”></td>
<td width=”10” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”10” height=”10”
id=”transp8”></td>
<td width=”99” height=”145”><a
href=”javascript:;”><img border=”0”
src=”web2_files/thumbnails/design_z_
up.jpg” name=”design_Z” width=”99”
height=”145” id=”design_Z” onClick=”MM_
swapImage(‘design_Z’,’’,’web2_files/
thumbnails/design_z_down.jpg’,1);MM_
openBrWindow(‘web2_files/design_Z/designZ_1.
htm’,’’,’scrollbars=no,width=800,height=611’)”
onMouseOver=”MM_showHideLayers(‘designz_
text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘designz_text’,’’,’hide’)”></
a></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp9”></td>
<td width=”123” height=”145”><a
href=”javascript:;”><img border=”0” src=”web2_
files/thumbnails/fonts_up.gif” name=”fonts1”
width=”123” height=”145” id=”fonts1”
onClick=”MM_swapImage(‘fonts1’,’’,’web2_
files/thumbnails/fonts_down.gif’,1);MM_
openBrWindow(‘web2_files/fonts/fonts_1.ht
m’,’’,’scrollbars=no,width=840,height=606’)”
onMouseOver=”MM_showHideLayers(‘font_
text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘font_text’,’’,’hide’)”></a></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp10”></td>
<td width=”208” height=”145”><a
href=”javascript:;”><img border=”0” src=”web2_
files/thumbnails/weber_up.jpg” name=”weber”
width=”208” height=”145” id=”weber”
onClick=”MM_swapImage(‘weber’,’’,’web2_files/
thumbnails/weber_down.jpg’,1);MM_
openBrWindow(‘web2_files/weber/weber1.ht
m’,’’,’scrollbars=no,width=850,height=611’)”
onMouseOver=”MM_showHideLayers(‘weber_
text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘weber_text’,’’,’hide’)”></a></
td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp11”></td>
<td width=”107” height=”145”><a
href=”javascript:;”><img border=”0” src=”web2_
files/thumbnails/flyer_up.jpg” name=”flyer”
width=”107” height=”145” id=”flyer”
onClick=”MM_swapImage(‘flyer’,’’,’web2_files/
thumbnails/flyer_down.jpg’,1);MM_
openBrWindow(‘web2_files/flyer/flyer_1.htm
’,’’,’scrollbars=no,width=873,height=661’)”
onMouseOver=”MM_showHideLayers(‘flyer_
text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘flyer_text’,’’,’hide’)”></a></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp12”></td>
<td width=”107”><img border=”0”
src=”web2_files/thumbnails/BW_lookbook_
up.jpg” name=”bw_lookbook” width=”107”
height=”145” id=”bw_lookbook” onClick=”MM_
swapImage(‘bw_lookbook’,’’,’web2_files/
thumbnails/BW_lookbook_down.jpg’,1);MM_
openBrWindow(‘web2_files/bw_lookbooks/
bw_lookbooks_1.htm’,’’,’scrollbars=no,widt
h=850,height=711’)” onMouseOver=”MM_
showHideLayers(‘bw_lookbook_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘bw_lookbook_text’,’’,’hide’)”>
<div id=”bw_lookbook_text”><img
src=”web2_files/sprechblasen/BW_lookbook_text.
gif” width=”253” height=”305” border=”0”
usemap=”#Map14”></div></td>
<td width=”20”><img src=”web2_files/
thumbnails/transp.gif” alt=”” name=”transp”
width=”20” height=”20” id=”transp13”></td>
<td width=”123”><a href=”javascript:;”
onClick=”MM_openBrWindow(‘web2_files/top/
top_1.htm’,’’,’scrollbars=no,width=700,heigh
t=483’);MM_swapImage(‘top’,’’,’web2_files/
thumbnails/top_down.jpg’,’affoltern’,’’,’web2_
files/thumbnails/affoltern_down.jpg’,1)”></
a><a href=”javascript:;” onClick=”MM_
openBrWindow(‘web2_files/top/top_1.htm
’,’’,’scrollbars=no,width=900,height=650’);
MM_swapImage(‘top’,’’,’web2_files/thumbnails/
top_down.jpg’,’affoltern’,’’,’web2_files/thumbnails/
affoltern_down.jpg’,1)”><img src=”web2_files/
thumbnails/top_up.jpg” alt=”” name=”top”
width=”123” height=”145” id=”top”
onMouseOver=”MM_showHideLayers(‘top_
text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘top_text’,’’,’hide’)” border=”0”></a></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td><img src=”web2_files/thumbnails/
transp.gif” alt=”” name=”transp” width=”35”
height=”35” id=”transp14”></td>
<td width=”10”> </td>
<td width=”99”> </td>
<td width=”20”> </td>
<td width=”123”> </td>
<td width=”20”> </td>
<td width=”208”> </td>
<td width=”20”> </td>
<td width=”107”> </td>
<td width=”20”> </td>
<td width=”107”> </td>
<td width=”20”> </td>
<td width=”123”> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div id=”flyer_text”><img src=”web2_files/
sprechblasen/flyer_text.gif” width=”107”
height=”145” border=”0” usemap=”#Map20”>
<map name=”Map20”>
<area shape=”rect” coords=”2,3,106,145”
cima das imagens.
Boa parte desses
scripts poderiam ser
otimizados, e não há
a necessidade de se
repetir tantas vezes a
mesma informação.
É um resultado típico
de página gerada
automaticamente
por programas do
tipo WYSIWYG,
que facilita a diagramação para leigos,
mas gera um código
confuso, redundante,
mal-estruturado e
inacessível.
6
href=”#” onClick=”MM_
swapImage(‘flyer’,’’,’web2_files/thumbnails/
flyer_down.jpg’,1);MM_openBrWindow(‘web2_
files/flyer/flyer_1.htm’,’’,’scrollbars=no,widt
h=873,height=661’)” onMouseOver=”MM_
showHideLayers(‘flyer_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘flyer_
text’,’’,’hide’)”>
</map></div>
<div id=”rep_text”><img src=”web2_files/sprechblasen/rep_text.gif” width=”190” height=”145”
border=”0” usemap=”#Map16”>
<map name=”Map16”>
<area shape=”rect” coords=”1,1,187,145”
href=”#” onClick=”MM_
swapImage(‘rep’,’’,’web2_files/thumbnails/
rep_down.jpg’,1);MM_openBrWindow(‘web2_
files/rep/rep_1.htm’,’’,’scrollbars=no,width
=850,height=601’)” onMouseOver=”MM_
showHideLayers(‘rep_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘rep_
text’,’’,’hide’)”>
</map></div>
<div id=”weber_text”><img src=”web2_files/
sprechblasen/weber_text.gif” width=”208”
height=”145” border=”0” usemap=”#Map22”>
<map name=”Map22”>
<area shape=”rect” coords=”1,1,208,142”
href=”#” onClick=”MM_
swapImage(‘weber’,’’,’web2_files/thumbnails/
weber_down.jpg’,1);MM_openBrWindow(‘web2_
files/weber/weber1.htm’,’’,’scrollbars=no,wid
th=850,height=611’)” onMouseOver=”MM_
showHideLayers(‘weber_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘weber_
text’,’’,’hide’)”>
</map></div>
<table border=”0”>
<tr>
<td width=”46” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”46” height=”46”
id=”transp15”></td>
<td width=”10” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”10” height=”10”
id=”transp16”></td>
<td width=”188” height=”145”><a
href=”file:///”></a><a href=”javascript:;”
onClick=”MM_openBrWindow(‘web2_files/blatten/blatten1.htm’,’’,’scrollbars=no,width=750,h
eight=591’);MM_swapImage(‘blatten’,’’,’web2_
files/thumbnails/blatten_down.jpg’,1)”
onMouseOver=”MM_showHideLayers(‘blatten_
text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘blatten_text’,’’,’hide’)”><img
src=”web2_files/thumbnails/blatten_up.jpg”
alt=”” name=”blatten” width=”188”
height=”145” border=”0” id=”blatten”></a></
td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp17”></td>
<td width=”101” height=”145”><img
border=”0” src=”web2_files/thumbnails/
plakate_up.jpg” name=”plakate” width=”101”
height=”145” id=”plakate” onClick=”MM_
swapImage(‘plakate’,’’,’web2_files/thumbnails/
plakate_down.jpg’,1);MM_openBrWindow(‘web2_
files/plakate/plakate1.htm’,’’,’scrollbars=no,wi
dth=900,height=661’)” onMouseOver=”MM_
showHideLayers(‘Plakat_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘Plakat_
text’,’’,’hide’)”></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp18”></td>
<td width=”102” height=”145”><img
src=”web2_files/thumbnails/hgkl_studienangebot_up.jpg” name=”studiangebot” width=”102”
height=”145” id=”studiangebot” onClick=”MM_
swapImage(‘studiangebot’,’’,’web2_files/thumbnails/hgkl_studienangebot_down.jpg’,1);MM_
openBrWindow(‘web2_files/hgkl_studienangebot/
hgk_studien_1.htm’,’’,’scrollbars=no,width=8
00,height=610+11’)” onMouseOver=”MM_
showHideLayers(‘hgk_studien_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘hgk_studien_text’,’’,’hide’)”></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp19”></td>
<td width=”187” height=”145”><a
href=”javascript:;” onClick=”MM_
openBrWindow(‘web2_files/hsa_lesebuch/
lesebuch_1.htm’,’’,’scrollbars=no,width=
800,height=623’);MM_swapImage(‘hslu_
lesebuch’,’’,’web2_files/thumbnails/hslusa_lesebuch_down.jpg’,’skos’,’’,’web2_files/thumbnails/
skos_down.jpg’,1)” onMouseOver=”MM_
showHideLayers(‘lesebuch_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘lesebuch_
text’,’’,’hide’)”><img src=”web2_files/thumbnails/
hslusa_lesebuch_up.jpg” name=”hslu_lesebuch”
width=”187” height=”145” id=”hslu_lesebuch”
border=”0”></a></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp20”></td>
<td width=”125”><a href=”javascript:;”
onClick=”MM_openBrWindow(‘web2_files/blatten/blatten1.htm’,’’,’scrollbars=no,width=750,h
eight=591’);MM_swapImage(‘blatten’,’’,’web2_
files/thumbnails/blatten_down.jpg’,1)”
onMouseOver=”MM_showHideLayers(‘bla
ttentext’,’’,’show’)” onMouseOut=”MM_sh
owHideLayers(‘blattentext’,’’,’hide’)”></
a><a href=”javascript:;” onClick=”MM_
openBrWindow(‘web2_files/affoltern/affoltern_1.ht
m’,’’,’scrollbars=no,width=700,height=483’);MM_
swapImage(‘affoltern’,’’,’web2_files/thumbnails/
affoltern_down.jpg’,1)” onMouseOver=”MM_
showHideLayers(‘affoltern_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘affoltern_
text’,’’,’hide’)”><img src=”web2_files/thumbnails/
affoltern_up.jpg” alt=”” name=”affoltern”
width=”125” height=”145” border=”0”
id=”affoltern”></a></td>
<td width=”20”><img src=”web2_files/
thumbnails/transp.gif” alt=”” name=”transp”
width=”20” height=”20” id=”transp21”></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width=”46” height=”35”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”35” height=”35”
id=”transp22”></td>
<td width=”10”> </td>
<td width=”188”> </td>
<td width=”20”> </td>
<td width=”101”> </td>
<td width=”20”> </td>
<td width=”102”> </td>
<td width=”20”> </td>
<td width=”187”> </td>
<td width=”20”> </td>
<td width=”125”> </td>
<td width=”20”> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<div id=”Plakat_text”><img src=”web2_files/
sprechblasen/plakat_text.gif” width=”107”
height=”145” border=”0” usemap=”#Map18”>
<map name=”Map18”>
<area shape=”rect” coords=”2,2,102,142”
href=”#” onClick=”MM_
swapImage(‘plakate’,’’,’web2_files/thumbnails/
plakate_down.jpg’,1);MM_openBrWindow(‘web2_
files/plakate/plakate1.htm’,’’,’scrollbars=no,wi
dth=900,height=661’)” onMouseOver=”MM_
showHideLayers(‘Plakat_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘Plakat_
text’,’’,’hide’)”>
</map></div>
<div id=”brieflogo_text”><img src=”web2_files/
sprechblasen/brieflogo_text.gif” width=”139”
height=”145” border=”0” usemap=”#Map11”>
<map name=”Map11”>
<area shape=”rect” coords=”1,-1,105,150”
href=”#” onClick=”MM_swapImage(‘briefe_
logos’,’’,’web2_files/thumbnails/briefschaften_
down.jpg’,1);MM_openBrWindow(‘web2_files/
briefe_logos/briefelogos_1.htm’,’’,’scrollbars=no,
width=802,height=671’)” onMouseOver=”MM_
showHideLayers(‘brieflogo_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘brieflogo_
text’,’’,’hide’)”>
</map></div>
<div id=”skos_text”><img src=”web2_files/
sprechblasen/skos_text.gif” width=”219”
height=”145” border=”0” usemap=”#Map10”>
<map name=”Map10”>
<area shape=”rect” coords=”2,1,105,147”
href=”#” onClick=”MM_
swapImage(‘skos’,’’,’web2_files/thumbnails/
skos_down.jpg’,1);MM_openBrWindow(‘web2_
files/skos/skos_1.htm’,’’,’scrollbars=no,widt
h=750,height=594’)” onMouseOver=”MM_
showHideLayers(‘skos_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘skos_
text’,’’,’hide’)”>
</map></div>
<div id=”titelkampf_text”><img src=”web2_files/
sprechblasen/titelkampf_text.gif” width=”190”
height=”145” border=”0” usemap=”#Map9”>
<map name=”Map9”><area shape=”rect”
coords=”0,-2,119,144” href=”#” onClick=”MM_
swapImage(‘titelkampf’,’’,’web2_files/
thumbnails/titelkampf_down.jpg’,1);MM_
openBrWindow(‘web2_files/titelkampf/
titelkampf_1.htm’,’’,’scrollbars=no,width=
685,height=511’)” onMouseOver=”MM_
showHideLayers(‘titelkampf_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘titelkampf_
text’,’’,’hide’)”>
</map></div>
<table border=”0”>
<tr>
<td width=”46” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”46” height=”46”
id=”transp23”></td>
<td width=”10” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”10” height=”10”
id=”transp24”></td>
<td width=”103” height=”145”><a
href=”javascript:;” onClick=”MM_
openBrWindow(‘web2_files/ZHdK_Master/
zhdk_master_1.htm’,’’,’scrollbars=no,width
=800,height=601’);MM_swapImage(‘zhdk_
master’,’’,’web2_files/thumbnails/zhdk_master_
down.jpg’,’titelkampf’,’’,’web2_files/thumbnails/
titelkampf_down.jpg’,1)”><img src=”web2_files/
thumbnails/zhdk_master_up.jpg” name=”zhdk_
master” width=”103” height=”145”
id=”zhdk_master” onMouseOver=”MM_
showHideLayers(‘zhdk_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘zhdk_
text’,’’,’hide’)” border=”0”></a>
<div id=”zhdk_text”><img src=”web2_files/
sprechblasen/zhdk_master_text.gif” width=”200”
height=”145” border=”0” usemap=”#Map3”></
div></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp25”></td>
<td width=”181” height=”145”><a
href=”javascript:;” onClick=”MM_
openBrWindow(‘web2_files/rep/rep_1.htm
’,’’,’scrollbars=no,width=850,height=601’);
MM_swapImage(‘rep’,’’,’web2_files/thumbnails/
rep_down.jpg’,1)”><img src=”web2_files/
thumbnails/rep_up.jpg” alt=”” name=”rep”
width=”181” height=”145” border=”0” id=”rep”
onMouseOver=”MM_showHideLayers(‘rep_
text’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘rep_text’,’’,’hide’)”></a></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp26”></td>
<td width=”102” height=”145”><a
href=”javascript:;” onClick=”MM_
openBrWindow(‘web2_files/hsa_werkstatt/
werkstatt_1.htm’,’’,’scrollbars=no,width=
800,height=631’);MM_swapImage(‘hsa_
werkstatt’,’’,’web2_files/thumbnails/werkstatt_down.jpg’,1)” onMouseOver=”MM_
showHideLayers(‘werkstatt_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘werkstatt_
text’,’’,’hide’)”><img src=”web2_files/thumbnails/
werkstatt_up.jpg” alt=”” name=”hsa_werkstatt” width=”102” height=”145” border=”0”
id=”hsa_werkstatt”></a><a href=”javascript:;”
onClick=”MM_openBrWindow(‘web2_files/rep/
rep_1.htm’,’’,’scrollbars=no,width=850,height=601
’);MM_swapImage(‘rep’,’’,’web2_files/thumbnails/
rep_down.jpg’,1)” onMouseOver=”MM_showHid
eLayers(‘reptext’,’’,’show’)” onMouseOut=”MM_
showHideLayers(‘reptext’,’’,’hide’)”></a></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp27”></td>
<td width=”113” height=”145”><a
href=”javascript:;” onClick=”MM_
openBrWindow(‘web2_files/
titelkampf/titelkampf_1.htm’,’’,’scrollb
ars=no,width=685,height=511’);MM_
swapImage(‘titelkampf’,’’,’web2_files/thumbnails/
titelkampf_down.jpg’,1)” onMouseOver=”MM_
showHideLayers(‘titelkampf_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘titelkampf_
text’,’’,’hide’)”><img src=”web2_files/thumbnails/
titelkampf_up.jpg” alt=”” name=”titelkampf”
width=”111” height=”145” border=”0”
id=”titelkampf”></a></td>
<td width=”20” height=”145”><img
src=”web2_files/thumbnails/transp.gif” alt=””
name=”transp” width=”20” height=”20”
id=”transp28”></td>
<td width=”104”><a href=”javascript:;”><img
src=”web2_files/thumbnails/briefschaften_up.jpg” name=”briefe_logos” width=”104”
height=”145” id=”briefe_logos” onClick=”MM_
swapImage(‘briefe_logos’,’’,’web2_files/
thumbnails/briefschaften_down.jpg’,1);MM_
openBrWindow(‘web2_files/briefe_logos/
briefelogos_1.htm’,’’,’scrollbars=no,width=8
02,height=660+11’)” onMouseOver=”MM_
showHideLayers(‘brieflogo_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘brieflogo_
text’,’’,’hide’)” border=”0”></a></td>
<td width=”20”><img src=”web2_files/
thumbnails/transp.gif” alt=”” name=”transp”
width=”20” height=”20” id=”transp29”></td>
<td width=”99”><a href=”javascript:;”
onClick=”MM_openBrWindow(‘web2_files/skos/
skos_1.htm’,’’,’scrollbars=no,width=750,height=5
94’);MM_swapImage(‘skos’,’’,’web2_files/thumbnails/skos_down.jpg’,1)” onMouseOver=”MM_
showHideLayers(‘skos_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘skos_
text’,’’,’hide’)”><img src=”web2_files/thumbnails/
skos_up.jpg” alt=”” name=”skos” width=”100”
height=”145” border=”0” id=”skos”></a></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<map name=”hiMap”>
<area shape=”rect” coords=”-2,-5,45,41”
href=”#” onClick=”MM_openBrWindow(‘web2_
files/kontakt/kontakt_1.htm’,’’,’scrollbars=no,wid
th=400,height=611’)” onMouseOver=”MM_sh
owHideLayers(‘kontakt’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘kontakt’,
’’,’hide’)”>
</map>
<map name=”Map”><area shape=”rect”
coords=”3,3,113,151” href=”#” onClick=”MM_
openBrWindow(‘web2_files/68/68_Zurich_1.htm
’,’’,’scrollbars=no,width=900,height=624’);MM_
swapImage(‘Zuerich_68’,’’,’web2_files/thumbnails/68_down.jpg’,1)” onMouseOver=”MM_sh
owHideLayers(‘text_68’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘text_68’,
’’,’hide’)”>
</map>
7
<map name=”Map3”>
<area shape=”rect” coords=”-6,-37,106,144”
href=”#” onClick=”MM_swapImage(‘zhdk_
master’,’’,’web2_files/thumbnails/zhdk_master_down.jpg’,1);MM_openBrWindow(‘web2_files/
ZHdK_Master/zhdk_master_1.htm’,’’,’scrollbars=n
o,width=800,height=601’)” onMouseOver=”MM_
showHideLayers(‘zhdk_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘zhdk_
text’,’’,’hide’)”>
</map>
<map name=”Map5”>
<area shape=”rect” coords=”1,-2,238,150”
href=”#” onClick=”MM_swapImage(‘bw_
katalog’,’’,’web2_files/thumbnails/BW_katalog_
down.jpg’,1);MM_openBrWindow(‘web2_files/
bw_katalog/bw_kat_1.htm’,’’,’scrollbars=no,wi
dth=800,height=595’)” onMouseOver=”MM_
showHideLayers(‘bw_kat_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘bw_kat_
text’,’’,’hide’)”>
</map>
<map name=”Map14”><area shape=”rect”
coords=”1,1,111,151” href=”#” onClick=”MM_
openBrWindow(‘web2_files/bw_lookbooks/
bw_lookbooks_1.htm’,’’,’scrollbars=no,widt
h=850,height=711’);MM_swapImage(‘bw_
lookbook’,’’,’web2_files/thumbnails/BW_lookbook_down.jpg’,1)” onMouseOver=”MM_
showHideLayers(‘bw_lookbook_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘bw_lookbook_text’,’’,’hide’)”>
</map>
<map name=”Map21”>
<area shape=”rect” coords=”2,2,198,144”
href=”#” onClick=”MM_swapImage(‘kuer_
kat’,’’,’web2_files/thumbnails/kuer_kat_down.
jpg’,1);MM_openBrWindow(‘web2_files/
kuer/kuer_1.htm’,’’,’scrollbars=no,width=
800,height=595’)” onMouseOver=”MM_
showHideLayers(‘kuer_text’,’’,’show’)”
onMouseOut=”MM_showHideLayers(‘kuer_
text’,’’,’hide’)”>
</map></body>
</html>
.navbar {
white-space: nowrap;
}
8
http://www.imagenow.ie/gallery/constructnew.html
O site mostra uma
exposição de cartazer
de Joseph Muller
brockman. O design
é bastante minimalista, com cores claras,
linhas finas e uma
composição baseada
na proporção áurea
9
<HTML>
<HEAD>
<TITLE></TITLE>
<meta http-equiv="Content-Type" content="text/
html; charset=iso-8859-1"><style type="text/css">
<!-body {
background-color: #ffffff;
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js"
type="text/javascript"></script>
</HEAD>
<BODY MARGINWIDTH="0" MARGINHEIGHT="0"
LEFTMARGIN="0" RIGHTMARGIN="0"
TOPMARGIN="0" BOTTOMMARGIN="0">
<table width="105%" height="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="100%" align="center"
valign="middle"><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.
macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,29,0','width','693','heigh
t','516','src','gallery_mono_c','quality','high','plugi
nspage','http://www.macromedia.com/go/getflash
player','scale','noborder','movie','gallery_mono_c'
); //end AC code
</script><noscript><object
classid="clsid:D27CDB6E-AE6D-11cf96B8-444553540000" codebase="http://download.
macromedia.com/pub/shockwave/cabs/flash/
swflash.cab#version=6,0,29,0" width="693"
height="516">
<param name="movie" value="gallery_mono_c.
swf">
<param name="quality" value="high"><param
name="SCALE" value="noborder">
<embed src="gallery_mono_c.swf"
width="693" height="516" quality="high"
pluginspage="http://www.macromedia.com/go/
getflashplayer" type="application/x-shockwaveflash" scale="noborder"></embed>
</object></noscript></td>
</tr>
</table>
</BODY>
</HTML>
Um olhar sobre o
código fonte revela,
no entanto, que ele
é contituído de um
mínimo de elementos html e um objeto
feito em flash. O
código, lembramos
aqui, é o que os mecanismos de busca
conseguem pesquisar, e também o que
pesquisam ferramentas para surdos.
Com uma estrutura
baseada em flash,
o máximo que se
pode atingir do site,
através de ferramentas de busca, é seu
título.
10
http://helveticaforever.com/en/html/helveticaforever.html
O site hevetica
forever também tem
um design bastante
minimalista, como
podemos ver nesta
página de abertura.
São poucas seções,
estruturadas em um
grid de três colunas,
bem inspirado no design da escola suíça.
11
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
<title>Helvetica forever</title>
<script type=”text/javascript” src=”../../scripts/fade.js”></script>
<link rel=”stylesheet” type=”text/css” href=”../../css/helveticaforever.css”>
</head>
HTML
<body>
<div id=”bg_helveticaforever”></div>
<div id=”linkbox_ausstellung”><a href=”javascript:showandhide();” title=”show/hide exhibit” class=”exponate”> <br /> <br /> <br
/> <br /> <br /> <br /></a></div>
<div id=”sprachwahl”>
<a href=”../../de/index.html” title=”German” class=”sprachwahl”>DE</a><br />
<a href=”../index.html” title=”English” class=”sprachwahl”><span class=”sprachwahl_aktiv”>EN</span></a></div>
<div id=”bg”>
<p class=”navigation”>
<a href=”helveticaforever.html” class=”navigation_aktiv”>_helvetica forever</a><br />
<a href=”exhibition.html” class=”nav_link”>exhibition</a><br />
<a href=”books.html” class=”nav_link”>books</a><br />
<a href=”film.html” class=”nav_link”>film</a><br />
<a href=”products.html” class=”nav_link”>products</a><br />
<a href=”imprint.html” class=”nav_link”>imprint</a><br />
<a href=”contact.html” class=”nav_link”>contact</a><br /><br /><br /><br /><br /><br /><br /><br />
<span class=”Helvetica_Logo_regular”><img src=”../../img/Helvetica_forever.gif” width=”107” height=”41” alt=”Helvetica forever” /></span></p>
<p class=”content”>
<span class=”text_headline”>Helvetica forever</span>
<br />
<span class=”text_bold”>
Eduard Hoffmann’s decision in 1950 to introduce a new sans serif typeface
to the Swiss market launched the beginning of the most successful project
of his long carrier. He could never have predicted that the typeface,
introduced by the Haas’sche Schriftgiesserei AG (Haas Type Foundry Ltd.)
and later called Helvetica, would conquer the world, become the typeface
of both dignified brands and humble stationery, an element in graphic
works of art and badly designed pamphlets—or, in short, that it would
become a classic.<br />
<br />
His son Alfred E. Hofmann who became director of the Haas’schen Schriftgießerei in 1968, has documented the development and its success
with numerous printed matters, advertising brochures and the original sketches. For the first time the book and the exhibition provide an insight into
this archive.<br /><br />
The most important record of Helvetica’s creation is a simple notebook,
into which Eduard Hoffmann pasted all the proofs that were relevant for
the genesis of the Neue Haas Grotesk and later Helvetica. He documented
every single developmental step for each and every letter, numeral, and
special character in all available point sizes of the Medium, Regular, Bold,
Regular Italic and Bold Italic. As in a diary, he dated each entry, noted the
opinion’s of third parties, drew desired changes, and regularly compared
the results to the Akzidenz Grotesk typeface. The entries in this fifty-eight
page chronicle began on November 16, 1956 and end on July 21, 1965. It
serves as a priceless testimony, unprecedented in typeface history.
</span>
</p>
<p class=”subnavigation”>
<a href=”it_is_what.html” class=”sub_link”>Helvetica – It is what<br /> you make of it</a><br /><a href=”1t2f.html” class=”sub_link”>One Typeface,
Two Fathers</a><br /><a href=”vita.html” class=”sub_link”>Vita</a><br />
<br /> <br />
</p>
</div>
</body>
</html>
Observando seu código fonte, podemos
notar uma grande
correspondência
entre a estrutura e
o conteúdo do site.
Dos exemplos aqui
apresentados é o
que tem uma relação
mais equilibrada
entre código e conteúdo, como podemos
ver na mancha de
cor.
É bem estruturado,
com divs (divisões
em html) que demarcam seções e sem
excesso de elementos desnecessários.
Pelo tipo de formatação, sem tabulações,
é tipica de códigos
escritos à mão.
12
@charset "UTF-8";
/* CSS Document */
html {
height:100%;
}
*{
margin: 0px;
padding: 0px;
}
body {
background-color:#e3e4e5;
font-family: Arial, sans-serif;
height:100%;
font-weight: normal;
margin: 0px;
padding:0px;
}
/* LAYER */
#bg_index{
width: 1024px;
height: 692px;
background:url(../img/prospekt.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
position:fixed;
z-index: 1;
}
#bg_it_is_what{
width: 1024px;
height: 692px;
background:url(../img/knoll_vignelli.
jpg);
background-repeat: no-repeat;
background-attachment:fixed;
position:fixed;
z-index: 1;
}
#bg_exhibition{
width: 1024px;
height: 692px;
background:url(../img/shin.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
position:fixed;
z-index: 1;
}
#bg_contact{
width: 1024px;
height: 692px;
background:url(../img/50jh.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
position:fixed;
z-index: 1;
}
#bg_1t2f{
width: 1024px;
height: 692px;
background:url(../img/viva_musica_
brockmann.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
position:fixed;
z-index: 1;
}
#bg_products{
width: 1024px;
height: 692px;
background:url(../img/hartmann_pres.jpg);
background-repeat: no-repeat;
background-attachment:relative;
position:fixed;
z-index: 1;
}
#bg_helveticaforever{
width: 1024px;
height: 692px;
background:url(../img/dumbar1.jpg);
background-repeat: no-repeat;
background-attachment:relative;
position:fixed;
z-index: 1;
}
#bg_tokyo{
width: 1024px;
height: 692px;
background:url(../img/megert_licht.jpg);
background-repeat: no-repeat;
background-attachment:relative;
position:fixed;
z-index: 1;
}
#bg_osaka{
width: 1024px;
height: 692px;
background:url(../img/peacock.jpg);
background-repeat: no-repeat;
background-attachment:relative;
position:fixed;
z-index: 1;
}
#bg_books{
width: 1024px;
height: 692px;
background:url(../img/protokollheft-hoffmann.
jpg);
background-repeat: no-repeat;
background-attachment:relative;
position:fixed;
z-index: 1;
}
#bg_books2{
width: 1024px;
height: 692px;
background:url(../img/protokollheft-hoffmann2.
jpg);
background-repeat: no-repeat;
background-attachment:relative;
position:fixed;
z-index: 1;
}
#bg_books3{
width: 1024px;
height: 692px;
background:url(../img/idiom.jpg);
background-repeat: no-repeat;
background-attachment:relative;
position:fixed;
z-index: 1;
}
#bg_ddorf{
width: 1024px;
height: 692px;
background:url(../img/askul.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
position:fixed;
z-index: 1;
}
#bg_film{
width: 1024px;
height: 692px;
background:url(../img/film.jpg);
background-repeat: no-repeat;
background-attachment:relative;
position:fixed;
z-index: 1;
}
#bg_designer{
width: 1024px;
height: 692px;
background:url(../img/rand.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
position:fixed;
z-index: 1;
}
#bg_impressum{
width: 1024px;
height: 692px;
background:url(../img/handzeichen.jpg);
background-repeat: no-repeat;
background-attachment:relative;
position:fixed;
z-index: 1;
}
#bg_maker{
width: 1024px;
height: 692px;
background:url(../img/schild.jpg);
background-repeat: no-repeat;
background-attachment:fixed;
position:fixed;
z-index: 1;
}
#sprachwahl{
width: 217px;
height: 25px;
top: 14px;
left: 20px;
position:absolute;
z-index: 2;
}
#bg_vita{
width: 1024px;
height: 692px;
background:url(../img/bellini_fletcher.
jpg);
background-repeat: no-repeat;
background-attachment:relative;
position:fixed;
z-index: 1;
}
#bg_sofia{
width: 1024px;
height: 692px;
background:url(../img/rambow.jpg);
background-repeat: no-repeat;
background-attachment:relative;
position:fixed;
z-index: 1;
}
#fading_in{
width: 400px;
top: 600px;
left: 600px;
float:left;
position:fixed;
padding-bottom:40px;
z-index: 2;
}
#bg{
width: 780px;
min-height:590px;
top: 55px;
left: 0px;
float:left;
background-color:#FFF;
position:absolute;
padding-bottom:40px;
z-index: 3;
}
CSS
#linkbox_ausstellung{
width:149px;
height:84px;
top:600px;
left:855px;
position:fixed;
z-index: 10;
}
/* TYPO */
.sprachwahl_aktiv {
font-size: 12px;
line-height:15px;
font-weight:bold;
color: #000000;
}
.text_10t {
font-family:Helvetica;
font-size: 10px;
line-height:12px;
color: #000000;
text-decoration:none;
}
.navigation_aktiv {
font-size: 14px;
line-height:17px;
font-weight:bold;
color: #000000;
text-decoration:none;
}
.Helvetica_Logo {
font-size: 25px;
line-height:23px;
padding-left:25px;
font-weight:bold;
color: #000;
text-decoration:none;
}
.Helvetica_Logo_regular {
font-size: 25px;
line-height:23px;
color: #000000;
text-decoration:none;
}
.text_bold {
font-size: 11px;
line-height:16px;
font-weight:bold;
width:277px;
display:block;
color: #000000;
}
.text_bold_einzug {
font-size: 11px;
line-height:16px;
font-weight:bold;
width:277px;
padding-left:25px;
display:block;
color: #000000;
}
.text_regular {
font-size: 11px;
line-height:16px;
font-weight:normal;
width:277px;
display:block;
color: #000000;
}
.text_headline {
font-size: 14px;
line-height:16px;
font-weight:bold;
padding-bottom:20px;
width:277px;
display:block;
color: #000000;
}
.sub_link_aktiv {
font-size: 10px;
line-height:12px;
display:block;
width:138.5px;
color: #000;
background-color:#e3e4e5;
text-decoration:none;
}
/* css-struktur */
.navigation {
float:left;
width: 138.5px;
margin:20px;
padding-top:20px;
border-top:2px #000 solid;
}
.content {
Esse é um caso
peculiar, aonde o
arquivo CSS, que determina a informação
do design é maior do
que o código HTML.
Isto é porque ele tem
informação de apresentação de várias
páginas.
Vemos aqui que as
imagens que ficam
no fundo da página,
como o cartaz que
aparece na capa,
estão todas determinadas atravéz do
CSS, por isso, precisa
de uma id diferente
para cada página (os
blocos de texto que
começam com #bg_).
13
float:left;
width: 423px;
border-top:2px #000 solid;
margin-top:20px;
padding-top:20px;
}
.subnavigation {
float:left;
width: 138.5px;
margin:20px;
line-height:10px;
padding-top:20px;
border-top:2px #000 solid;
}
/* LINKS */
a.sprachwahl:link, a.sprachwahl:visited,
a.sprachwahl:active {
font-size: 12px;
line-height:15px;
color: #000000;
text-decoration:none;
}
a.sprachwahl:hover {
font-size: 12px;
line-height:15px;
font-weight:bold;
color: #000000;
text-decoration:none;
}
a.nav_link:link, a.nav_link:active, a.nav_
link:visited {
font-size: 14px;
line-height:17px;
color: #000000;
text-decoration:none;
}
a.nav_link:hover {
font-size: 14px;
line-height:17px;
font-weight:bold;
color: #000000;
text-decoration:none;
}
a.sub_link:link, a.sub_link:visited, a.sub_
link:active {
font-size: 10px;
display:block;
width:138.5px;
border-bottom:1px solid #000;
line-height:12px;
padding-bottom:10px;
margin-left:auto;
margin-right:0px;
color: #000000;
text-decoration:none;
}
a.sub_link:hover {
font-size: 10px;
line-height:12px;
display:block;
width:138.5px;
padding-bottom:10px;
color: #000;
background-color:#e3e4e5;
text-decoration:none;
}
a.exponate:link, a.exponate:visited,
a.exponate:active {
font-size: 10px;
line-height:12px;
font-weight:bold;
color: #ffffff;
display:block;
text-decoration:none;
}
a.exponate:hover {
font-size: 10px;
line-height:12px;
font-weight:bold;
color: #ffffff;
display:block;
text-decoration:none;
}
a.fade-in:link, a.fade-in:visited, a.fadein:active {
font-size: 12px;
line-height:12px;
font-weight:normal;
display:block;
border-top:1px #000 solid;
padding-top:10px;
width:150px;
color: #000;
text-decoration:none;
}
a.fade-in:hover {
font-size: 12px;
line-height:12px;
font-weight:normal;
color: #000;
background-color:#fff;
text-decoration:none;
}
a.text_links_bold:link, a.text_links_bold:visited,
a.text_links_bold:active {
font-size: 11px;
line-height:16px;
font-weight:bold;
color: #999;
text-decoration:none;
}
a.text_links_bold:hover{
font-size: 11px;
line-height:16px;
font-weight:bold;
color: #000;
text-decoration:none;
}
14
http://www.ubu.com/
O site ubu.com é um
repositório de textos
e arquivos de artistas
de vanguarda. O visual é condizente com
a proposta do site:
minimalista, com
poucos elementos
de design, apesar do
extenso conteúdo.
A faixa preta no alto é
o elemento de maior
peso da página, e o
restante do layout
é estruturado em
quatro colunas.
Apesar de ser atualizado com frequência,
o site foi fundado em
1996. Ele não é um
blog, é um arquivo.
Ao lado, reproduzimos em miniatura
uma imagem da
página inteira, para
se ter uma idéia da
quantidade de dados
disponível.
15
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REChtml401-19991224/loose.dtd">
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" />
<link rel=stylesheet type="text/css" href="./css/
ono.css">
<style type=text/css>
<!-BODY {
background-image : url(./images/beckett_header.
jpg);
background-repeat : repeat-x;
background-color : #FFF;
}
-->
</style>
<title>UbuWeb</title><script type="text/
javascript"
src="http://images.del.icio.us/static/js/playtagger.
js"></script>
<META NAME="GOOGLEBOT"
CONTENT="NOINDEX, NOFOLLOW">
</head>
<body topmargin="0" leftmargin="0" marginwidth="0" marginheight="0" class="default">
<table width="1000" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td height="180" valign="top" align="left"
width="178"><br></a>
</td>
</tr>
</table>
<center>
<table border=0 width=900 cellspacing="0"
cellpadding="0">
<tr>
<td width=15><br></td>
<td class="default" width="175" height=20
valign=top>
<img src="images/dot_clear.gif" alt="" width="1"
height="50" border="0">
<FORM ACTION="http://search.freefind.com/find.
html" METHOD="GET">
<INPUT TYPE="HIDDEN" NAME="id" SIZE="-1"
VALUE="17493">
<INPUT TYPE="HIDDEN" NAME="pageid" SIZE="1" VALUE="r">
<INPUT TYPE="HIDDEN" NAME="mode" SIZE="-1"
VALUE="ALL">
<INPUT TYPE="TEXT" NAME="query" SIZE="18">
<INPUT TYPE="image" SRC="./images/go_white_
gray.gif" align=top BORDER="0">
</FORM>
<font color="333">Search UbuWeb</font>
<br><br><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="top"> <a href="http://ubuweb.
tumblr.com">Blog</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="top"> <a href="http://twitter.com/
ubuweb">Twitter</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="top"> <a href="resources/feature.
html">Featured Resources</a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="top"> <a href="./recent.
html">Recent Additions</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/resources/">Resources</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="top"> <a href="http://interglacial.
com/rss/ubuweb.rss"><img src="images/rss.gif"
width="33" height="11" border="0"></a><br>
<br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://www.
ubu.com/outsiders/365/index.html">365 Days
Project</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/aspen/">Aspen Magazine</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/concept/">Conceptual Writing</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/contemp/">Contemporary</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/ethno/">Ethnopoetics</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/film/">Film & Video</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/historical/">Historical</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/mp3/">MP3 Archive</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/outsiders">Outsiders</a><br>
<img src="./images/arrow_red_trans.gif" bor-
der="0" align="middle"> <a href="http://www.ubu.
com/papers/">Papers</a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://peacemaker.stat.wvu.edu:8000/listen.pls">UbuWeb
Radio</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/sound/">Sound</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/ubu/">/ubu Editions</a><br>
<b>Recent Additions:</b><br><br>
<br>
and Space Concepts in Music and Visual Art
(1978)</font></a> <br><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://www.
ubu.com/resources/faq.html">FAQ - English
Version</a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://www.
ubu.com/resources/faq_german.html">FAQ Deutsche Version</a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://www.
ubu.com/resources/faq_fr.html">FAQ - Version
française</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/resources/faq_ital.html">FAQ - Versione
italiana</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.ubu.
com/resources/faq_port.html">FAQ - Portuguese
Version</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="resources/faq_
spanish.html">FAQ - Español</a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="resources/
faq_turkish.html">SSS - Turkish</a><br>
<br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://
yourwebapps.com/WebApps/byo.
cgi?id=89321">Contact</a><br>
<br><br>
<b>UbuWeb's Partners</b><br><br>
Technical and moral support for UbuWeb is
provided by our partners:
<br><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://www.
anthologyfilmarchives.org/">Anthology Film
Archives</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://artmob.
ca/">Artmob</a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://www.
bidoun.com/">Bidoun Magazine - Art and
Culture from the Middle East</a><br>
<img src="./images/arrow_red_trans.gif" border="0" align="middle"> <a href="http://www.clc.
wvu.edu/">Center for Literary Computing</
a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://www.
electra-productions.com/">Electra</a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://epc.buffalo.edu/">Electronic Poetry Center</a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://www.
writing.upenn.edu/pennsound/">PennSound</
a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://www.
primaryinformation.org">Primary Information</
a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://www.
roulette.org">Roulette</a><br>
<img src="./images/arrow_red_trans.gif"
border="0" align="middle"> <a href="http://www.
wfmu.org">WFMU</a><br>
<br><br>
<b>About UbuWeb</b><br><br>
UbuWeb is a completely independent
resource dedicated to all strains of the avantgarde, ethnopoetics, and outsider arts.
<br><br>
All materials on UbuWeb are being made available for noncommercial and educational use
only. All rights belong to the author(s).
<br><br>
UbuWeb is completely free.
<br>
<img src="./images/arrow_red.gif" border="0"
align="top"> <a href="./resources/index.
html">more...</a><br><br>
<br>
HTML
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/stein-moa.html">The
Complete Gertrude Stein's "The Making of
Americans" <font color="#000000">Read by
Gregory Laynor (2008) [MP3]</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/cunningham_time.
html">Merce Cunningham, Nam June Paik
& John Cage <font color="#000000">Time
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
rainer_privilege.html">Yvonne Rainer <font
color="#000000">Privilege (1990)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/baldessari_stories.html">John Baldessari <font
color="#000000">Some Stories [Documentary]
(1990)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/ono_apotheosis.
html">John Lennon & Yoko Ono <font
color="#000000">Apotheosis (1970)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/g-f_parc.
html">Dominique Gonzalez-Foerster <font
color="#000000">Parc Central (2006)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="http://ubu.wfmu.org/text/
Cage-John_Notations.pdf">John Cage and Alison
Knowles, eds. <font color="#000000">Notations
(1969) [PDF, 75mb] </font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/paperrad_p.
html">Paper Rad <font color="#000000">P-Unit
Mixtape 2005 (2005)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/broodthaers_voyage.html">Marcel Broodthaers <font
color="#000000">Un Voyage en Mer du Nord (A
Voyage on the North Sea) [1973-74]</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
serra_turnbridge.html">Richard Serra <font
color="#000000">Railroad Turnbridge (1976)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./contemp/
retallack/index.html">Joan Retallack <font
color="#000000">Fast Forward (2008) [PDF]</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/sharits_epileptic.html">Paul Sharits <font
color="#000000">Epileptic Seizure Comparison
[1976]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="ubu/unpub/Unpub_037_
Byrne.pdf">Mairéad Byrne <font
color="#000000"> Example As Figure [PDF]</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./papers/Heidsieck_Interview-2008.pdf">Bernard Heidsieck <font
color="#000000">Interview (2008) [PDF]</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
serra_prisoner.html">Richard Serra <font
color="#000000">Prisoners Dilemma (1974)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./sound/
baudrillard.html">Jean Baudrillard <font
color="#000000">Suicide Moi (1996) with Mike
Kelley, George Hurley and others [MP3]</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/acconci.html">Vito
Acconci <font color="#000000">Soundworks
(1976-2001) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/kelley-mccarthy.
html">Mike Kelley & Paul McCarthy (with
Violent Onsen Geisha) <font color="#000000">
Sod and Sodie Sock, Studio C, Comp O.S.O.
(mid-90s) and "The Gobbler" (1997) [MP3]</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/roth.html">Dieter
Roth <font color="#000000">Musik (1973-1991)
Olhando o código fonte do site,
percebemos que
ele de fato ainda é
baseado em uma
modo de produção
antigo. ele usa uma
série de elementos
não recomendados,
e a proporção entre
código e informação
é bastante desigual,
com uma grande
quantidade de código
para cada pequeno
trecho de informação.
Além disso, a estrutura clara que vemos
na interface gráfica
de não corresponde a uma estrutura
interna coerente. As
colunas e sua largura
são determinadas no
próprio código fonte,
e não há qualquer
divisão entre blocos
de conteúdo diferentes além de algumas
quebras de linha.
Quebras de linha
(<br>) também são
utilizadas para separar elementos dentro
de um mesmo bloco,
efeito que poderia
ser feito com muito
menos bytes através
de simples declarações CSS.
Isto provavelmente ocorreu pois o
site começou a
ser construído em
uma época aonde
o suporte para CSS
ainda não existia.
Então boa parte de
seus arquivos devem
ter sido construídos
sobre essas bases, e
depois de um certo
volume de informação acumulada, fica
cada vez mais difícil
16
[MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/rose.html">Jon
Rose <font color="#000000">Syd and George
/ Serinette Exotique (2007) [MP3]</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/greenaway-phillips_
dante.html">Peter Greenaway & Tom Phillips
<font color="#000000">A TV Dante (1983)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/chambers.html">Jack
Chambers <font color="#000000">The Hart of
London (1970)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
joyce_wake.html">Mary Ellen Bute <font
color="#000000">Passages from James
Joyce's "Finnegans Wake" (1965-67)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
leckey_hardcore.html">Mark Leckey <font
color="#000000">Fiorucci Made Me Hardcore
(1999) </font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/parreno_mars.html">Philippe Parreno <font
color="#000000">The Boy from Mars (2005)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/moffatt_rural.html">Tracey Moffatt <font
color="#000000">Night Cries: A Rural Tragedy
(1989)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/moffatt_girls.html">Tracey Moffatt <font
color="#000000">Nice Coloured Girls (1987)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/sala_see.html">Anri
Sala <font color="#000000">Now I See (2004)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
kur_electronics.html">Erkki Kurenniemi <font
color="#000000">Electronics in the World of
Tomorrow (1968)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/Wieland_rat.
html">Joyce Wieland <font color="#000000">Rat
Life and Diet in North America (1968)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
streuli_brussels.html">Beat Streuli <font
color="#000000">Brussels 05/06 (2006)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/paik_edited.html">Nam
June Paik <font color="#000000">Edited for
Television (Documentary, 1975)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/beauvais.html">yann
beauvais <font color="#000000">Still Life (1997)
/ Hezraelah (2996)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/hugo_atlantis.html">Ian
Hugo <font color="#000000">Bells of Atlantis
(1952)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/schwartzlillian_pixillation.html">Lillian Schwartz <font
color="#000000">Pixillation (1970)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/whitman_shower.html">Robert Whitman <font
color="#000000">Shower (1964)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/nelson_awful.html">Robert Nelson <font
color="#000000">The Awful Backlash (1967)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/rosler_secrets.html">Martha Rosler <font
color="#000000">Secrets from the Street: No
Disclosure (1980)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/rosler_disinformation.
html">Martha Rosler <font color="#000000">If
It's Too Bad to Be True, It Could Be DISINFORMATION (1985)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/duchamp_chess.html">Marcel Duchamp <font
color="#000000">Jeu d'échecs avec
Marcel Duchamp (1963)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./contemp/
baum/index.html">Erica Baum <font
color="#000000">Photographic Works (19972008)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./ubu/unpub/Unpub_036_
Schwabsky.pdf">Barry Schwabsky <font
color="#000000">Two Poems Circa 1992
(PDF)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./ubu/unpub/Unpub_034_Beaulieu.pdf">Derek Beaulieu <font
color="#000000">How To Write / How To Edit
(PDF)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./ubu/unpub/
Unpub_035_Brown.pdf">Eleanor Brown <font
color="#000000">Le A Play on Words (PDF)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/broodthaers_corbeau.html">Marcel Broodthaers <font
color="#000000">Le Corbeau et le Renard
(1967)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./sound/
schaefer_j.html">Janek Schaefer <font
color="#000000">Audio Works (1985-2003)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/baudrillard_violence.html">Jean Baudrillard <font
color="#000000">The Violence of the Image
(2004)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
blake_century-21.html">Jeremy Blake <font
color="#000000">Century 21 (2004)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/lenteng.html">Forum
Lenteng <font color="#000000">Massroom
Project (2005) </font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/leccia_perfect.html.html">Ange Leccia <font
color="#000000">Perfect Day (2007)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/gehr_eureka.
html">Ernie Gehr <font color="#000000">Eureka
(1974)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/mccoy_raisins.
html">Jennifer McCoy & Kevin McCoy
<font color="#000000">Soft Rains & Our
Second Date (2003)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/oldenburg_fotodeath.html">Claes Oldenburg <font
color="#000000">Fotodeath (1961)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/price.html">Seth
Price <font color="#000000">"8-4 9-5 10-6 11-7"
(8 Hour MP3 Audio File, 2007)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/acconci_sharp.html">Vito Acconci <font
color="#000000">Willoughby Sharp Videoviews
Vito Acconci (1973)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/gg_bbc.html">Gilbert
and George <font color="#000000">No Surrender (BBC Documentary, 2007)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/wooster_rhyme.html">The Wooster Group <font
color="#000000"> Rhyme 'Em To Death
(1993)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/baldessari.html">John
Baldessari <font color="#000000"> I Will Not
Make Any More Boring Art (1971); John
Baldessari Sings Sol Lewitt (1972); The Meaning of Various News Photos to Ed Henderson
(1973)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/tardos.html">Anne
Tardos <font color="#000000"> Sound Works</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/dean_kodak.
html">Tacita Dean <font color="#000000">
Kodak (2006)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./historical/young/
index.html">La Monte Young, editor <font
color="#000000">An Anthology of Chance
Operations (1963) </font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="http://ubu.artmob.ca/text/
Smithson-Robert_HotelPalenque_1969TO1972AN
DWakefield-Neville_YucatanIsElsewhereOnRobert
Smithson'sHOTELPALENQUE_1995.pdf">Robert
Smithson <font color="#000000">text of
"Hotel Palenque" (1969-72) [PDF]</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/hennix.html">C.C.
Hennix <font color="#000000"> Electric Harpsichord No. 1</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/gaudi_doc.html">Antonio Gaudí <font
color="#000000"> Documentary (1984)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/bag_fall95.html">Alex
Bag <font color="#000000">Untitled Fall '95
(1995)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/tellus_15.
html">Tellus 15: The Improvisors (1986)<font
color="#000000"> John Zorn, Bill Frisell, Christian Marclay, Fred Frith and many others</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/rainer.html">Yvonne
Rainer <font color="#000000">Writings by and
About Yvonne Rainer from <i>October</i>
(1976-1999)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/tellus_17.
html">Tellus #17 - Video Arts Music (1987)
<font color="#000000"> Jean Paul Curtay, Ann-
<img src="./images/arrow_red.gif" border="0" align="top"><a href="historical/
brecht/index.html">George Brecht <font
color="#000000">Book of the Tumbler on Fire
(1978) [PDF, 314mb]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="papers/MacDonaldScott_Screen-Writings.pdf">Scott MacDonald
<font color="#000000">Screen Writings (1985)
[13.4mb, PDF]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/douglas.html">Stan
Douglas <font color="#000000">Television
Spots / Monodramas (1987-1991), Der Sandmann (1995), Nu•tka• (1996)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./sound/
maclow.html">Jackson Mac Low <font
color="#000000">Audio Works (1955-2004)</
font></a> <br><br>
Sargent Wooster, Woody Vasulka, Peter Rose
and many others</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/tellus_20.
html">Tellus #20 - Media Myth (1988) <font
color="#000000"> Crawling With Tarts, Nicolas
Collins, Joseph Nechvatal and many others</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/paik_beatles.
html">Nam June Paik <font color="#000000">
Beatles Electroniques (1966-69)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/graham_performer.
html">Dan Graham <font color="#000000">
Performer/Audience/Mirror (1975)</font></
a> <br><br>
mudar o sistema, já
que isso depende de
um grande esforço
de converter arquivos, e organizar um
eventual banco de
dados.
A falta de suporte
para CSS obrigava
os programadores
a construir o site
baseados em tabelas,
embora a estrutura
do site não seja de
dados tabulados.
A estrutura do código, inclusive, sugere
que não há um banco
de dados nem um
sistema automático
de publicação, uma
vez que os links não
têm id, mas isto é um
ponto que é impossível de ser determinado apenas a partir da
leitura do código.
Mais uma curiosidade
dese código é que
ele tem logo no começo uma instrução
<META NAME=
”GOOGLEBOT”
CONTENT=
”NOINDEX,
NOFOLLOW”>, que proíbe o robô da
google de indexar
seu conteúdo, e de
procurar em seus arquivos. Isto pode ser
um cuidado especial
contra as leis de copyright, uma vez que
parte do arquivo do
site, está publicada
sem autorização dos
detentores de seus
direitos autorais, embora sejam materiais
fora de catálogo.
Pelos links, que são
todos arquivos htmls,
com nomes significativos e organizados
dentro de seções,
e pelo fato de não
haverem declarações
de ids, que costumam a ser utilizadas
para organização de
sistemas automáticos, parece que este
17
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/barney_artsafari.
html">Ben Lewis <font color="#000000"> Art
Safari: Matthew Barney</font> (2005)</a>
<br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/barney_matrix.html">Maria Anna Tapeiner <font
color="#000000">The Body as a Matrix:
Matthew Barney's Cremaster Cycle </
font>(2002)</a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/tellus_10.
html">Tellus 10: All Guitars! (1985)<font
color="#000000"> Lee Ranaldo, Butthole Surf-
ers, Bob Mould, Thurston Moore and many
others</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/tellus_2.html">Tellus
2 (1984) <font color="#000000"> Kiki Smith,
David Garland, Jamie Dalglish, Willoughby
Sharp and many others</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/tellus_12.
html">Tellus 12: Dance <font color="#000000">
(1986)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/benglis_female.
html">Lynda Benglis <font color="#000000">
Female Sensibility (1974)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/frampton_gloria.
html">Hollis Frampton <font color="#000000">
Gloria! (1979)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/barney_artsafari.
html">Ben Lewis <font color="#000000"> Art
Safari: Matthew Barney (2005)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./historical/terayama/index.
html">Terayama Shuji <font color="#000000">
Photothèque imaginaire de Shuji
Terayama, les gens de la famille Chien Dieu
(photographs; 1975)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/dali.html">Salvador
Dalí <font color="#000000"> Radioscop-
ie De Jacques Chancel - Interview (French
language; 1971)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/roach.html">John
Roach <font color="#000000"> Simultaneous
Translation (2007)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/dufrene.
html">François Dufrêne <font
color="#000000"> Crirhythms, Osmose-Art and
various works (1958-70)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/schneeman_meatjoy.html">Carolee Schneeman <font
color="#000000"> Meat Joy (1964)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/ulay_action.html">Ulay
<font color="#000000"> Action in 14 predeter-
mined Sequences: There is a Criminal Touch
to Art (1975)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/kelley_test.html">Mike
Kelley <font color="#000000"> Test Room
Containing Multiple Stimuli Known to Elicit Curiosity and Manipulatory Responses (1999)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/taylor_michael.
html">Michael Taylor <font color="#000000">
Lecture on Alfred Jarry's <i>Ubu Roi</i>
(2008)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./sound/tellus_23.html">Tellus 23: Paul Bowles<font
color="#000000"> Historical musical and literary
works</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/tellus_16.
html">Tellus 16: Tango<font color="#000000">
with Carlos Gardel, David Garland, Fast
Forward and many others (1991)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/tellus_13.
html">Tellus 13: Power Electronics<font
color="#000000"> with Merzbow, Rhys
Chatham, Controlled Bleeding and many others (1986)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./sound/tellus_26.html">Tellus 26: Jewel Box<font
color="#000000"> with Catherine Jauniaux
& Ikue Mori, Sapphire, Mary Ellen Childs
and many others (1992)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/trecartin_area.
html">Ryan Trecartin <font color="#000000">
I-Be AREA (2007)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/serra_lead.
html">Richard Serra <font color="#000000">
Hand Catching Lead (1968)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/ant_farm.html">Ant
Farm <font color="#000000"> Dirty Dishes
(1968-1978)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/hennix.html">C.C.
Hennix <font color="#000000"> Dutch National
Radio Broadcast (2005)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/frampton_nostalgia.html">Hollis Frampton <font
color="#000000">Nostalgia (1971)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/group_180.
html">Group 180 <font color="#000000"> Works
by Reich, Szezmo, Rzewski and others (1980,
1985)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/blonk_vocalor.
html">Jaap Blonk <font color="#000000">
Vocalor (1998)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./sound/ross.
html">Alexander Ross (painter) <font
color="#000000"> Grandfather Paradox (1989)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/simonds.html">Charles
Simonds <font color="#000000">Five Films
(1972-74), with Rudy Burckhardt</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/tellus_5-6.
html">Tellus 5-6: Audio Visual Issue <font
color="#000000"> with Louise Lawler, Richard
Prince, David Wojnarowicz and many others
(1984)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/calle_double.
html">Sophie Calle & Greg Shepard
<font color="#000000">No Sex Last Night aka
Double-Blind (1992)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/kupferberg.
html">Tuli Kupferberg <font color="#000000">No
Deposit, No Return (1964) </font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
rainer_journeys.html">Yvonne Rainer <font
color="#000000">Journeys from Berlin/1971
(1980) </font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/smithson_east.
html">Robert Smithson & Nancy Holt
<font color="#000000">East Coast West Coast
(1969)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
gmc_city.html">Gordon Matta-Clark <font
color="#000000">City Slivers (1976)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/obrist_
arkipelag.html">Hans Ulrich Obrist <font
color="#000000">Arkipelag TV (2000), with
Alexander Kluge, Dan Graham, Douglas Gordon, Rosemarie Trockel and others</font></
a> <br><br>
<img src="./images/arrow_red.gif" bor-
der="0" align="top"><a href="./film/grimonprez_dial.html">Johan Grimonprez <font
color="#000000">Dial H-I-S-T-O-R-Y (1998)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./contemp/beaulieu/index.
html">Derek Beaulieu <font color="#000000">
Flatland (2007)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
rosler_vital.html">Martha Rosler <font
color="#000000">Vital Statistics of a Citizen,
Simply Obtained (1977)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
cooper_reyner.html">Julian Cooper <font
color="#000000">Reyner Banham Loves Los
Angeles (1972)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
rainer_woman.html">Yvonne Rainer <font
color="#000000">Film About A Woman Who...
(1974)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/whitman.html">Robert
Whitman <font color="#000000">Performances
from the 1960s</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/landers.html">Sean
Landers <font color="#000000">The Man Within
(1991) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/chicago82.
html">Chicago '82: A Dip in the Lake <font
color="#000000">John Cage, Glenn Branca,
Meredith Monk, Charlemagne Palestine,
Harold Budd and many others (1982) [MP3]</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
kelley_extra.html">Mike Kelley <font
color="#000000">Extracurricular Activity &
Superman Recites Selections from 'The Bell
Jar' and Other Works by Sylvia Plath (1999 2000)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/gmc_
conical.html">Gordon Matta-Clark <font
color="#000000">Conical Intersect (1975)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/gmc_splitting.html">Gordon Matta-Clark <font
color="#000000">Splitting, Bingo/Ninths,
Substrait (Underground Dailies) (1974-1976)</
font></a> <br><br>
</td>
<td width=20><br></td>
<td class="default" width=350 valign="top">
<img src="images/dot_clear.gif" alt="" width="1"
height="70" border="0"><br>
<b>UbuWeb | Spring 2009</b>
<br><br><br>
<font color="#000"><b><a href="./film/dodge_
kahn.html">The Films of Harry Dodge and
Stanya Kahn (2002-2008)</a></b> The collab-
oration of Harry Dodge and Stanya Kahn has
produced an exciting series of character-driven
videos whose protagonists are, above all,
under pressure: economic pressure, ecological pressure, and the pressures of class and
gender (and, for that matter, genre) regimes.
These pressures catalyze affective mutations
and a sense of dislocation, a felling of (not so
transcendental) homelessness. Responding
to eco-social circumstances, Dodge and Kahn
work from the ethoi that the personal is political and the aesthetic is ideological. In their
work, then, the aesthetic -- including, crucially,
the anaesthetic, and the anti-aesthetic is leveraged politically. These videos draw attention
to the aesthetic itself as a fraught category,
using the heightened consciousness created
by the frame only to crash it, transmitting/
effecting cognitive-cosmic dissonance via
their signature punk-slapstick. Included here
are seven works: <a href="film/dodge_all.
html">All Together Now</a> (2008), <a
href="film/dodge_swallow.html">Can't Swallow
It, Can't Spit It Out</a> (2006), <a href="film/
dodge_masters.html">Masters of None</a>
(2006), <a href="film/dodge_ugly.html">The Ugly
Truth</a> (2006), <a href="film/dodge_good.
html">Let the Good Times Roll</a> (2004),
<a href="film/dodge_whacker.html">Whacker</
site é atualizado sem
o uso de um sistema de geração de
conteúdo.
No geral, esse é
um belo exemplo
do modo de produçào anterior ao
“tableless”.
18
a> (2005) and <a href="film/dodge_winner.
html">Winner</a> (2002). Presented in col-
laboration with Harry Dodge and Stanya Kahn /
and the <a href="http://www.elizabethdeegallery.
com">Elizabeth Dee Gallery</a>.
<br><br><br>
<font color="#000"><b><a href="./sound/bidoun.
html">Electronic Music and Films from the
Middle Eastern Avant-Garde (1959-2001)</
a></b> In collaboration with <a href="http://
www.bidoun.com">Bidoun Magazine</a>,
UbuWeb is pleased to bring you the first
installment of a trove of rarely heard and seen
Middle Eastern culture. We begin by featuring
six historic electronic musicians and sound
poets: Dariush Dolat-Shahi <a href="http://ubu.
com/sound/dolat-shahi.html">Electronic music,
Tar and Setar (1985) and Otashgah (1986)</
a> ; Halim El-Dabh Leiyla <a href="http://ubu.
com/sound/dabh.html">Visitations (1959)</
a> ; Forough Farrokhzad <a href="http://ubu.
com/sound/farrokhzad.html">Radio Tehran Sessions</a> (1962-1964) ; Ali Reza Mashayekhi
<a href="http://ubu.com/sound/mashayekhi.
html">Electronic Music (1970-2001)</a> ; Bijan
Mofid <a href="http://ubu.com/sound/mofid.
html">Shahreh Ghesseh (1967)</a>; and Ilhan
Mimaroglu <a href="http://ubu.com/sound/mimaroglu.html">Electronic Music (1964-1983)</a>.
We are also pleased to present three films:
Forough Farrokhzad's <a href="http://ubu.com/
film/farrokhzad_house.html">The House is Black
/ Khaneh Siyah Ast</a> (1962); Albert Lamorisse's <a href="http://ubu.com/film/lamorisse.
html">Baadeh Sabah / The Lovers' Wind / Vent
Des Amoureux</a> (1970/1978); and Ali Akbar
Sadeghi's <a href="http://ubu.com/film/sadeghi_
malek.html">Malek Khorshid</a> (1975). Keep
checking back for future installments: there's
much more to come.
<br><br><br>
<font color="#000"><b><a href="http://ubuweb.
tumblr.com/">UbuWeb Blog</a></b> UbuWeb
is now blogging about new resources on the
site, focusing on lost gems and shedding light
on some of the things you may have missed
or might not have been aware exist in the
vastness of the archive. Think of it as a textual
analogy to the <a href="resources/podcast.
html">UbuWeb Podcasts</a> or our monthly
guest-curated <a href="resources/feature.
html">Featured Resources</a> but it happens
a whole lot more frequently.
<br><br><br>
<font color="#000"><b><a href="http://ubu.com/
sound/afa.html">Rare Audio from Anthology
Film Archives (1964-1974)</a></b> UbuWeb
is pleased to annouce a new project in our
ongoing partnership with <a href="http://www.
anthologyfilmarchives.org">Anthology Film
Archives</a> in New York City. This is the
first in a series of over 1,000 tapes from the
Anthology historic audio collection. These
recordings feature many years worth of
interviews, lectures, question & answer
sessions and other amazing discoveries.
The first series includes: P. Adams Sitney
Interviews Kenneth Anger on WNYC's "Arts
Forum" (1972); Charles Levine Interviews Robert Breer (July 1970); Jonas Mekas Interviews
Emile De Antonio (11/06/1969); Jonas Mekas
Interviews Emile De Antonio (11/06/1969); Poetry And The Film: Amos Vogel, Maya Deren,
Parker Tyler, Willard Maas & Dylan Thomas
Sessions 1 & 2 At Cinema 16 (10/28/ 1953); P.
Adams Sitney Interviews Sidney Peterson On
WNYC's "Arts Forum" (1976); P. Adams Sitney
Interviews Sidney Peterson On WNYC's "Arts
Forum" (1976); Annette Michelson Interviews
Yvonne Rainer On WNYC's "Arts Forum"
(01/25/1974); Pauline Kael And Stan Brakhage
(1964); Robert Haller Interviews Carolee
Schneemann (11/30/1973); Hollis Frampton
At Binghampton University, Part 1 & 2
(03/11/1972); Ken Jacobs, Larry Gottheim,
Stan Brakhage: Binghampton Council Of
Churches (11/23/1970) defending a Hermann
Nitsch action; Harry Smith Interviewed by P.
Adams Sitney (1965). You can also read <a
href="papers/film_culture.html">selections from
FILM CULTURE Magazine</a> (1955-1996)
including many of the artists featured in the
audio archive.
<br><br><br>
<font color="#000"><b><a href="resources/
podcast.html">All Avant-Garde All The
Time - UbuWeb Podcast #8: The Sounds of
Los Angeles in the 1970s and Beyond</a>
<br><br><a href="http://www.poetryfoundation.
org/audio/ResidentVoices_AvantGardeAllTheTime042809.mp3">Listen / Download</a></
b> <br><br>Produced by <a href="http://
poetryfoundation.org">The Poetry Foundation</a>, UbuWeb is pleased to announce
the latest in its podcast series, focusing on a
dozen of Ubu's hidden treasures, highlighting
audio works that you really should know
about about but most likely don't. With this
podcast, we kick off a series focusing on the
sounds of different regions. Here the focus
is on the very rich scene emerging out of
Los Angeles. Blending genres such as punk
rock, visual art, performance art, experimental music and innovative poetry, we focus
mostly on the late 1970s. Featured here are
<a href="sound/burden.html">Chris Burden</
a>, <a href="sound/mccarthy.html">Paul McCarthy</a>, <a href="sound/kipper.html">The
Kipper Kids</a>, <a href="sound/kelley.
html">Mike Kelley with Sonic Youth</a>, <a
href="sound/bald.html">John Baldessari</a>,
<a href="sound/antin.html">David Antin</a>, <a
href="sound/antin_e.html">Eleanor Antin</a>,
<a href="sound/lafms.html">the Los Angeles
Free Music Society</a>, and <a href="sound/
weismann.html">Benjamin Weismann</a>.
You can <a href="http://poetryfoundation.org/
podcast_avantgarde.xml"><b>subscribe to our
podcast here</b></a>.
<br><br><br>
<font color="#000"><b><a href="./film/oursler.
html">Tony Oursler - Synesthesia: Genesis
P-Orridge & Synesthesia: Alan Vega
(1997-2001)</a></b> Tony Oursler's Synesthesia project features interviews with twelve
legendary figures in the downtown music, performance and art scenes. One video features
Genesis P-Orridge, performance artist and
vocalist for the iconoclastic English industrial
band Throbbing Gristle in the late 1970s, pioneered industrial music. P-Orridge, who went
on to form the experimental band Psychic TV,
continues to work in music, art, and performance in New York, and is undertaking a longterm "Pandrogeny" project involving a radical
identity transformation. These conversations
reveal fascinating insights and anecdotes
from some of the most influential figures in
the experimental rock and art underground of
the 1970s and '80s, from pre-punk innovators
to post-punk icons, from industrial and avantgarde music to noise bands and No Wave.
The other features Alan Vega, one half of the
influential pre-punk synthesizer/drum machine
duo Suicide (with Martin Rev), helped pioneer
electronic music in the early 1970s. Vega,
who began his career in New York as an artist
known for light sculptures, also ran an art
space that was a meeting ground for some of
the most important artists in the underground
New York art and music scenes.
<br><br><br>
<font color="#000"><b><a href="http://ubu.com/
film/index.html">1000 Avant-Garde Films</
a></b> UbuWeb now hosts 1000 avant-garde
films by over 500 artists in our Film and Video
section. To celebrate, we've upgraded our
streaming player so that finally, UbuWeb
videos can be viewed full-screen as well as
embedded in your web pages and blogs.
Ubu would like to salute <a href="http://www.
maxfenton.com">Max Fenton</a> for making
this all possible.
<br><br><br>
<font color="#000"><b><a href="http://ubu.com/
sound/yeh.html">C. Spencer Yeh - Audio Works
(2005-2009)</a></b> Yeh is active both as a
solo and collaborative artist, as well as with
his primary project, Burning Star Core. As an
improviser, Yeh is focused on developing a
personal vocabulary using violin, voice, and
electronics. As a sound artist/composer, Yeh
works with all aspects available surrounding
a work, aurally and physically, as elements
key to the cumulative experience. He is
concerned not only with the sensual aspects
of 'sound organization,' but the gestural
qualities as well. Yeh has collaborated with
a deep and ever-growing list of artists and
groups, including Tony Conrad, <a href="sound/
new_humans.html">New Humans</a> with
<a href="sound/acconci.html">Vito Acconci</
a>, Evan Parker, Thurston Moore, Amy Granat
with Jutta Koether, Justin Lieberman, Don Dietrich and Ben Hall (as The New Monuments),
Prurient and Jandek. Included here are several
full-length albums, assorted singles and radio
works, featuring solo and collaborative works.
<br><br><br>
<font color="#000"><b><a href="http://ubu.
com/sound/davis.html">Brian Joseph Davis Audio Works (2004-2008)</a></b> UbuWeb
is pleased to feature soundworks from this
innovative young Toronto-based artist. Extending the vocabulary of Pluderphonics, Davis'
brilliant media deconstructions are pointed
and hilarious at the same time, with each
concept perfectly matching its aural form.
Included here is <a href="http://ubu.com/sound/
davis_minima.html">Minima Moralia</a>, punk
rock versions of Adorno tracts; <a href="http://
ubu.com/sound/davis_banned.html">10 Banned
Albums Burned Then Played</a> is exactly
what it sounds like, and includes discs by
everyone from Stravinsky to the Sex Pistols
to 2 Live Crew; <a href="http://ubu.com/sound/
davis_greatest.html">Greatest Hit</a> is a
collection of single tracks composed from
entire "Greatest Hits" albums (imagine all 22
songs of The Carpenters' 1968-1983 playing
simultaneously); the hilarious <a href="sound/
davis_yesterduh.html">Yesterduh</a>, where
passersby were stopped and asked to sing,
from memory and with no practice, the
Beatles' "Yesterday"; <a href="http://ubu.com/
sound/davis_soundtrack.html">Original Soundtrack</a>, a piece derived from the sounds
of 20 DVD menus; <a href="http://mediamogul.
seas.upenn.edu/pennsound/authors/Davis-Brian/
Davis_Brian_Joseph_VoiceOver_2006.mp3">Voice
Over</a>, a script composed from over 5000
film taglines then performed by a professional voice over artist; and <a href="http://
mediamogul.seas.upenn.edu/pennsound/authors/
Davis-Brian/Davis_Brian_Joseph_Eula_Eula_2007.
mp3">Eula</a>, where a women's chorus
sings the End User License Agreement.
<br><br><br>
<font color="#000"><b><a href="./sound/
momus.html">Momus - The Creation Records
(1987-1993)</a></b> "Okay, this is quite a big
decision, but I've taken it. Six Momus albums
-- the ones I recorded for Alan McGee's
Creation label between 1987 and 1993 -- are
out of print. Creation doesn't exist any more,
and in theory Sony owns the rights to these
albums, but isn't doing anything with them
and probably never will. In the meantime, only
Russian pirates are profiting, charging punters
for illegal downloads." - <a href="http://imomus.
livejournal.com/">Momus</a>. Included here
are <a href="./sound/momus_poison.html">The
Poison Boyfriend</a> (1987), <a href="sound/
momus_pervert.html">Tender Pervert (1988)</
a>, <a href="sound/momus_night.html">Don't
Stop The Night</a> (1989), <a href="sound/
momus_hippo.html">Hippopotamomus</
a> (1991), <a href="sound/momus_voyager.
html">Voyager</a> (1992) and <a href="sound/
momus_timelord.html">Timelord</a> (1993).
<br><br><br>
<font color="#000"><b><a href="resources/
podcast.html">All Avant-Garde All The
Time - UbuWeb Podcast #7: Punk Versions
of Monkey Chants and Other Ethnopoetic Marvels</a> <br><br><a href="http://
poetryfoundation.org/audio/AvantGardeAllTheTime_010609.mp3">Listen / Download</a></
b> <br><br>Produced by <a href="http://
poetryfoundation.org">The Poetry Foundation</
a>, UbuWeb is pleased to announce the latest
in its podcast series, focusing on a dozen of
Ubu's hidden treasures, highlighting audio
works that you really should know about
about but most likely don't. This time around
we focus on our <a href="http://ubu.com/sound/
rothenberg.html">Jerome Rothenberg</a>curated trove of <a href="http://ubu.com/ethno/
index.html">Ethnopoetic treasures</a>, focusing on <a href="http://ubu.com/ethno/soundings.
html">sound</a>. Included here are examples
of and by <a href="http://ubu.com/ethno/soundings/fitzgerald.html">Ella Fitzgerald</a>, <a
href="http://ubu.com/ethno/soundings/gaillard.
html">Slim & Slam</a>, <a href="http://
ubu.com/ethno/soundings/gloss.html">Glossolalia
(speaking in tongues)</a>, Tuvan throat singers, <a href="http://ubu.com/ethno/soundings/
ketjack.html">Indonesian ketjack</a>, Sainkho
Namtchylak, <a href="http://ubu.com/ethno/
soundings/inuit.html">Inuit Throat Music</a>
and the punk rock vocal band <a href="http://
ubu.com/sound/furious_pig.html">Furious Pig</
a>. You can <a href="http://poetryfoundation.org/
podcast_avantgarde.xml"><b>subscribe to our
podcast here</b></a>.
<br><br><br>
<font color="#000"><b><a href="./film/zwartjes.
html">Frans Zwartjes - Twelve Films (19681971)</a></b> The incomparable Frans
Zwartjes is a filmmaker, musician, violinmaker, painter and sculptor. In the late-60s
he was one of the first Dutch visual artists to
take up film, initially to document his performances and soon after as an independent
medium perfectly suited to his way of creating
visual art. His mind-bending works caused
a furor, with psychological black-and-white
imagery of heavily made-up and over-dressed
actors from his circle of friends. Focused
on sexually-loaded power games, hysteria,
psychosis and cruelty, his films are largely
edited 'in-camera'. "My own motor system
determined the film style", Zwartjes stated
in an interview. Zwartjes's oeuvre includes
over forty films and his style has left a strong
stamp on at least two generations of experimental filmmakers in Holland. You've never
seen anything quite like this. - Film Anthology
Archive. Included here are <a href="film/
zwartjes_birds.html">Birds, One (1968)</a>,
<a href="film/zwartjes_sorbet3.html">Sorbet 3
(1968)</a>, <a href="film/zwartjes_anamnesis.
html">Anamnesis (1969)</a>, <a href="film/
zwartjes_visual.html">Visual Training (1969)</a>,
<a href="film/zwartjes_walls.html">Behind Your
Walls (1970)</a>, <a href="film/zwartjes_living.
19
html">Living (1971)</a>, <a href="film/zwartjes_
spectator.html">Spectator (1970) </a>, <a
href="film/zwartjes_bedroom.html">Spare Bedroom (1970) </a>, <a href="film/zwartjes_seats.
html">Seats Two (1970) </a>, <a href="film/
zwartjes_pentimento.html">Pentimento
(1979) </a>, <a href="film/zwartjes_bedsitters.
html">Bedsitters (1972) </a> and <a href="film/
zwartjes_audition.html">Audition (1973)</a>
<br><br><br>
<font color="#000"><b><a href="./film/
michaux_images.html">Henri Michaux -Images
du monde visionnaire (1964)</a></b> Rarely
seen, <i>Images du monde visionnaire</i>,
was an educational film by Henri Michaux and
Eric Duvivier "produced in 1963 by the film
department of Swiss pharmaceutical company
Sandoz (best known for synthesizing LSD in
1938) in order to demonstrate the hallucinogenic effects of mescaline and hashish."
<br><br>
Ce film se propose de montrer les types
d’images, et leurs façons
spéciales d’apparaître
et de disparaître, qu’un sujet
quelconque, soumis à l’action
de certaines substances psychotropes,
voit défiler en son imagination avec
une clarté extrême et sans
l’intervention de sa volonté.
Deux genres de visions, dont on a ici
accusé les différences
plutôt que les ressemblances,
correspondent donc à deux
hallucinogènes.
<br><br><br>
<font color="#000"><b><a href="./sound/hanson.
html">Sten Hanson - Soundworks</a></
b> The Swedish composer, Sten Hanson,
was leader of the <a href="sound/fylkingen.
html">Fylkingen</a> language group from
1968 and in charge of the <a href="sound/
text-sound.html">Text-Sound Festivals</a>
which were held for many years. He has been
working with experimental music, literature
and art since the beginning of the 1960's,
cultivating both instrumental, vocal and
electro-acoustic music for performance on
radio and television, on outdoor occasions or
from the concert platform. Featured full-lenth
albums on UbuWeb include a compilation
spanning nearly 40 years, <a href="sound/
hanson_trinkets.html">Text-Sound Gems &
Trinkets</a>; <a href="sound/hanson_autobiography.html">Autobiography</a> from 2001;
<a href="sound/hanson_sonosopher.html">The
Sonosopher Retrospective</a> (1998); <a
href="sound/hanson_carter.html">The John Carter Song Book</a> (1988); and <a href="sound/
hanson_secret.html">Secret Connection</a>
featuring works from 1975-1983.
<br><br><br>
<font color="#000"><b><a href="./film/acconci.
html">Focus on Vito Acconci</a></b> A poet
of the New York school in the early- and mid1960s, Vito Acconci (b. 1940) moved toward
performance, sound, and video work by the
end of the decade. UbuWeb is pleased to
feature a number of Acconci's works, across
serveral mediums, focusing mainly on his
1970s output. <a href="film/acconci.html">Video
works</a> include <a href="film/acconci_conversions.html">Conversions</a> (1971), <a
href="film/acconci_pryings.html">Pryings</a>
(1971), <a href="film/acconci_book.html">Open
Book</a> (1971), <a href="film/acconci_undertone.html">Undertone</a> (1972), <a href="film/
acconci_seedbed.html">Seedbed</a> (1972),
<a href="film/acconci_theme.html">Theme
Song</a> (1973); as well as an interview,
<a href="film/acconci_sharp.html">Willoughby
Sharp Videoviews Vito Acconci</a> (1973);
<a href="./sound/acconci.html">Sound pieces</
a> a number of full-length works including <a
href="http://ubu.artmob.ca/sound/acconci_vito/
Acconci-Vito_The-American-Gift_1976.mp3">The
American Gift</a> (1976); <a href="http://ubu.
artmob.ca/sound/acconci_vito/Acconci-Vito_TheGangster-Sister-from-Chicago_1977.mp3">The
Gangster Sister From Chicago Visits New York
(A Family Piece)</a> (1977); <a href="http://ubu.
artmob.ca/sound/acconci_vito/Acconci-Vito_UnderHistory-Lessons_1976.mp3">Under-History
Lessons</a> (1976); <a href="http://ubu.artmob.
ca/sound/acconci_vito/Acconci-Vito_Ten-PackedMinutes.mp3">Ten Packed Minutes</a> (1977);
and <a href="http://ubu.artmob.ca/sound/acconci_vito/Acconci-Vito_The-Bristol-Project_2001.
mp3">The Bristol Project</a> (2001); Works
from the <a href="http://ubu.com/concept/index.
html">UbuWeb Anthology of Conceptual Writing</a> include <a href="http://ubu.com/concept/
acconci_re.html">RE</a>; <a href="http://ubu.
com/concept/acconci_read.html">READ THIS
WORD</a>; <a href="http://ubu.com/concept/acconci_points.html">Points for Motion</a>; and
<a href="http://ubu.com/concept/acconci_installment.html">INSTALLMENT (INSTALLATION):
MOVE/REMOVE</a>.
<br><br><br>
<font color="#000"><b><a href="./film/chan.
html">Paul Chan - Three Videos (2002-2006)</
a></b> In 2002, Chan was a part of the
American aid group Voices in the Wilderness
that broke U.S. sanctions and federal law by
working in Baghdad before the U.S. invasion
and occupation. In 2004 he garnered police
attention for <i>The People's Guide to the
Republican National Convention</i>, a free
map distributed throughout New York to
help protesters to get in or out of the way of
the RNC. Most recently Chan collaborated
with the Classical Theatre of Harlem and
Creative Time to produce a site-specific
outdoor presentation of Samuel Beckett's
play <i>Waiting for Godot</i> in New Orleans.
Featured here are <a href="film/chan_operation.
html">RE:THE_OPERATION</a> (2002); <a
href="film/chan_baghdad.html">Baghdad No
Particular Order</a> (2003); and <a href="film/
chan_stewart.html">Untitled Video on Lynne
Stewart and Her Conviction, The Law, and
Poetry</a> (2006)
<br><br><br>
<font color="#000"><b><a href="resources/
podcast.html">All Avant-Garde All The Time UbuWeb Podcast #6: Politics As Unusal</a>
<br><br><a href="http://poetryfoundation.org/audio/AGAT_CIA_Dope_CalypsoFINAL.mp3">Listen
/ Download</a></b> <br><br>Produced
by <a href="http://poetryfoundation.org">The
Poetry Foundation</a>, UbuWeb is pleased to
announce the latest in its podcast series, focusing on a dozen of Ubu's hidden treasures,
highlighting audio works that you really should
know about about but most likely don't.
This time around, in conjunction with the US
election season, we feature a quick tour of
UbuWeb's audio / visual political landscape.
Selections inlcude Christopher DeLaurenti's
<a href="http://media.sas.upenn.edu/pennsound/
authors/DeLaurenti/Protest-Symphonies/DeLaurenti-Christopher_Protest-Symphony-04_RNC.
mp3">Live in New York at the Republican
National Convention Protest, September
2 - August 28, 2004</a>; Abbie Hoffman's
<a href="http://ubu.artmob.ca/sound/hoffman_abbie/Hoffman-Abbie_Wake-Up_02_Malachy.
mp3">Malachy's Bar and Grill</a>; Cornelius
Cardew's <a href="http://ubu.artmob.ca/sound/
cardew_cornelius/memorial_concert/CardewCornelius_Memorial-Concert_2-06_Smash-TheSocial.mp3">Smash The Social Contract</
a>; Alejandra Salinas and Aeron Bergman's
film <a href="http://ubu.com/film/aa_boggs.
html">Grace Lee Boggs, 91-year old activist</
a>; Red Shadow (The Economics Rock &
Roll Band)'s <a href="http://blogfiles.wfmu.org/
DP/2003/01/365-Days-Project-01-06-red-shadowunderstanding-marx-1975.mp3">Understanding
Marx</a>; Allen Ginsberg's <a href="http://
ubu.artmob.ca/sound/dial_a_poem_poets/sam/
Sugar-Alcohol-Meat_19-_Allen_Ginsberg-_C-IA-_Dope_Calypso.mp3">C.I.A. Dope Calypso</
a>; Ezra Pound's <a href="http://media.sas.
upenn.edu/pennsound/authors/Pound/1958/
Pound-Ezra_10_Canto-XLV_DC_1958.mp3">Canto
XLV ("With Usura")</a>; and Amiri Baraka's
<a href="http://media.sas.upenn.edu/pennsound/
authors/Baraka/Buffalo-78/Baraka-Amiri_05_Dope_
Buffalo_12-8-78.mp3">Dope</a> from 1978.
You can <a href="http://poetryfoundation.org/
podcast_avantgarde.xml"><b>subscribe to our
podcast here</b></a>.
<br><br><br>
<font color="#000"><b><a href="resources/
podcast.html">All Avant-Garde All The Time -
UbuWeb Podcast #5: An UbuWeb Grab Bag</
a> <br><br><a href="http://www.poetryfoundation.org/audio/SchwittersHappens.mp3">Listen
/ Download</a></b> <br><br>Produced
by <a href="http://poetryfoundation.org">The
Poetry Foundation</a>, UbuWeb is pleased
to announce the latest in its podcast series,
focusing on a dozen of Ubu's hidden treasures, highlighting audio works that you really
should know about about but most likely
don't. Featured here gems ranging from <a
href="http://ubu.artmob.ca/sound/ball_hugo/BallHugo_Karawane.mp3">Marie Osmond incanting
Hugo Ball's 1916 sound poem Karawane</
a> to Charles Bernstein 1975 oratorio <A
HREF="http://ubu.artmob.ca/sound/bernstein_
charles/Bernstein-Charles_1-100.mp3">1-100</
a> where, yep, whispers and screams the
first one hundred numbers in, urm, numerical
order. Other artists include <a href="http://
www.ubu.com/sound/beuys.html">Joseph
Beuys</a>, <a href="http://www.ubu.com/sound/
fox.html">Terry Fox</a>, Hugo Keesing's <a
href="sound/keesing.html">Chart Sweep</
a>, <a href="http://www.ubu.com/sound/colby.
html">Todd Colby</a>, <a href="http://www.ubu.
com/sound/mclaughlin.html">Steve McLaughlin</a>, <a href="http://www.ubu.com/sound/
mark.html">Kelly Mark</a> and <a href="sound/
komar.html">Komar & Melamid</a>. You
can <a href="http://poetryfoundation.org/podcast_
avantgarde.xml"><b>subscribe to our podcast
here</b></a>.
<br><br><br>
<font color="#000"><b><a href="./film/kagel.
html">Mauricio Kagel: 1931-2008</a></
b> UbuWeb mourns the loss of the great
composer, filmmaker and artist. You can <a
href="sound/kagel.html">hear his music here</
a> and <a href="film/kagel.html">view his films
here</a>. He will be missed.
<br><br><br>
<font color="#000"><b><a href="./film/vanderbeek.html">Stan VanDerBeek - Films:
1959-1972</a></b> UbuWeb is pleased to
present 14 films by the legendary filmmaker
Stan VanDerBeek (1927-1984). "A pioneer in
the development of experimental film and
live-action animation techniques, he achieved
widespread recognition in the American avantgarde cinema. VanDerBeek was also intimately involved with the artists and art movements
of his time; he filmed Happenings and merged
dance with films and videos. VanDerBeek
was a preeminent thinker, scientist, artist, and
inventor who forged new links between art,
technology, perception, and humankind." (<a
href="http://www.eai.org">www.eai.org</a>)
Presented in collaboration with <a href="http://
guildgreyshkul.com/">Guild & Greyshkul</
a>, <a href="http://www.eai.org">EAI</a> and <a
href="http://www.re-voir.com/">re:voir</a>
<br><br><br>
<font color="#000"><b><a href="./sound/
dunaway.html">Judy Dunaway - Soundworks:
1990-2002</a></b> Judy Dunaway is a com-
poser, improvisor and conceptual artist who
is primarily known for her sound works for
latex balloons. Since 1990 she has composed
over thirty works for balloons as instruments
and has also made this her main instrument
for improvisation. Included here are three
unrelased baloon works: "For Chorus with Balloons" (2000), 40 Days and 40 Nights (1999)
and Surabaya (6:07); <i>Shar: Pop Music</i>, a
collaboration with Ilja Komarov; the legendary
<i>Duo for Radio Stations</i>, simulcast on
WFMU (New Jersey) and WKCR (New York) in
1992; five collaborations with Evan Gallagher
Little Band; and <i>The Dead</i>, a score
for artist Diane Torr's <i>Crossing the River
Styx</i> (1990).
<br><br><br>
<font color="#000"><b><a href="./film/roulette.
html">Roulette TV, Part 2</a></b>
32 more streaming and downloadable
episodes of Roulette TV from the 2000
season. Artists include <a href="./film/roulette_
bang_2000.html">Billy Bang</a>, <a href="film/
roulette_cutler_2000.html">Chris Cutler</a>, <a
href="film/roulette_gordon_2000.html">Michael
Gordon</a>, <a href="film/roulette_higgins-parkins.html">Zeena Parkins</a>, <a href="film/roulette_hirsch_2000.html">Shelley Hirsch</a>, <a
href="film/roulette_marclay_2000.html">Christian
Marclay</a>, <a href="film/roulette_mori_2000.
html">Ikue Mori</a>, <a href="film/roulette_namchylak_2000.html">Sainkho Namchylak</a>, <a
href="film/roulette_niblock_2000.html">Phil Niblock</a>, <a href="film/roulette_oliveros_2000.
html">Pauline Oliveros</a>, <a href="film/
roulette_parker_2000.html">William Parker</a>,
<a href="film/roulette_sharp_2000.html">Elliott
Sharp</a>, <a href="film/roulette_staley_2000.
html">Jim Staley</a> and many others. The
first series of Roulette TV is below. This is presented in partnership with the legendary New
York City experimental music organization <a
href="http://www.roulette.org">Roulette</a>.
Founded in 1978, is a major New York City
venue for contemporary music and intermedia
art.
<br><br><br>
<font color="#000"><b><a href="./film/pearlstein.
html">Alix Pearlstein - Videos: 2000-2005</
a></b> Presented in conjunction with
her solo show at <a href="http://www.
thekitchen.org">The Kitchen</a> in New York
City, September 5-October 18, UbuWeb
is pleased to present four videos works.
Alix Pearlstein's performance based videos
subject highly charged narratives to minimalist
structures - at once pressuring emotionality
and artifice. Characterized by deadpan humor
and a streamlined aesthetic, her approach
is direct and intimate. Pearlstein's earliest
videos, in which she appears most often as
performer, exhibit a deliberately low-tech,
grunge sensibility that is countered by the
cool, stylized elegance of her later works.
Included here are <a href="http://www.ubu.
com/film/pearlstein_two.html">Two Women</a>
(2000), <a href="http://www.ubu.com/film/pearlstein_forsaken.html">Forsaken</a> (2003), <a
href="http://www.ubu.com/film/pearlstein_crash.
html">Crash</a> (2004) and <a href="http://
www.ubu.com/film/pearlstein_day.html">All Day
and a Night</a> (2005)
<br><br><br>
<font color="#000"><b><a href="./film/roulette.
html">Roulette TV (2008)</a></b> UbuWeb
is pleased to announce a partnership with
the legendary New York City experimental
music organization <a href="http://www.roulette.
20
org">Roulette</a>. Founded in 1978, is a major
New York City venue for contemporary music
and intermedia art. We are happy to present
<a href="film/roulette.html">ten videos</a> from
the 2008 season of Roulette TV. Roulette
TV is an on-going, innovative video series
which presents unique contemporary music
in compelling and engaging performances
given by the creators themselves. Each
performance is followed by an insightful
interview with the artist. This series includes
performances by: <a href="film/roulette_behrman.html">David Behrman</a>, <a href="film/
roulette_crispell.html">Marilyn Crispell</a>, <a
href="film/roulette_cyrille.html">Andrew Cyrille</
a>, <a href="film/roulette_labarbara.html">Joan
La Barbara</a>, <a href="film/roulette_lake.
html">Oliver Lake</a>, <a href="film/roulette_
legere.html">Phoebe Legere</a>, <a href="film/
roulette_lengtan.html">Margaret Leng Tan</a>,
<a href="film/roulette_supove.html">Kathleen
Supové</a>, <a href="film/roulette_tyranny.html">Blue Gene Tyranny</a> and <a
href="film/roulette_vierk.html">Lois V Vierk</a>.
Future archive plans include several seasons
of Roulette TV as well as Roulette's extensive
concert audio archive.
<br><br><br>
<font color="#000"><b><a href="./film/donegan.
html">Cheryl Donegan - Videos: 1993-2007</
a></b> Cheryl Donegan defines a generation
of artists, many of whom are women, who
first engaged in a new conceptual art practice
in the early 1990s. Her work integrates the
time-based, gestural forms of performance
and video with forms such as painting,
drawing, and installation. Provocative and
irreverent, her body-based, performative video
works put a subversive spin on issues relating
to sex, gender, art-making, art history, and pop
culture. Presented here are fourteen videos
from her early ground-breaking <a href="film/
donegan_head.html">Head</a> (1993) to her
most recent mediation on Carolee Schneeman
and Coroline Bergvall's works, <a href="film/
donegan_refuses.html">Refuses</a> (2007).
<br><br><br>
<font color="#000"><B><a Href="./film/cytter.
html">Keren Cytter - Videos: 2003-2008</A></
B> "Keren Cytter's videos have a distinctly
literary flavour. Although her medium is tape
and she makes countless references to cinematic and televised forms, her scripts often
involve long soliloquies and multiple voiceovers that would seem more comfortable
unravelling over the pages of a novel. Cytter,
who writes all her own scripts, deliberately
uses an over-poetic and non-realistic spoken
language to enhance the artificiality of the
filmmaking process. This eloquent and expressive speech is at odds with the videos' documentary style, which includes lots of wobbly,
hand-held, out-of-focus shots, culminating
in the camera getting knocked over." - Frieze
Magazine. Included here are five videos: <a
href="film/cytter_mfpig.html">MFPIG</a> (2003),
<a href="film/cytter_nothing.html">Nothing</
a> (2003), <a href="film/cytter_continuity.
html">Continuity</a> (2005), <a href="film/cytter_spiegel.html">Der Spiegel</a> (2007) and
<a href="film/cytter_ruis.html">Les Ruissellements du Diable</a> (2008).
<Br><Br><BR>
a> [1997], T.S Eliot poem 'Burnt Norton' is
a Happening (1966) [PDF, 112k]</font></a>
upenn.edu/pennsound/authors/Schaefer/SchaeferJanek_Love-Song.mp3">Love Song</a> [2003],
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./contemp/nelson/index.
html"> Jason Nelson <font color="#000000">
Eleven Digital Poems (2009)</font></a>
<br><br>
played 3 times at once on the 3 tone-arm
Tri-Phonic Turntable; <a href="http://media.sas.
sing the word Love seven separate times at
seven different pitches; <a href="http://media.
sas.upenn.edu/pennsound/authors/Schaefer/
Schaefer-Janek_Skate.mp3">Skate - Random
Play Record</a> [2001], an LP that is never
the same twice; and <a href="http://media.sas.
upenn.edu/pennsound/authors/Schaefer/SchaeferJanek_Minneapolis-Office-Max-Messages.
mp3">Minneapolis 'Office Max' Messages</
a> [2003], a simple collage of the messages
Schaefer found left on the display model
of a mini digital Dictaphone he bought at
Office Max in Minneapolis. Films include <a
href="film/schaefer_freedom.html">The Freedom
of Speech</a> [2006], a work for typewriter
and voice about the erosion of our freedom
of speech; <a href="film/schaefer_vacant.
html">Vacant Space</a> [2006], an installation
using location recordings and panoramic
photographs collected in a series of empty
interiors around the world; <a href="film/
schaefer_extended.html">Extended Play</a>
[2008], an installation for 3 x Cello EP's, 3 x
Piano EP's, and 3 x Violin EP's played at either
33, 45, or 78rpm using nine retro record players, playing continuously; and <a href="film/
schaefer_two.html">Two by Two by Two by
Two by Too many by Too much</a> [2007], an
audio /visual response to global warming.
<br><br><br>
<font color="#000"><b><a href="./film/
smith_mike.html">Michael Smith and Joshua
White - Collaborative Works (1997-2005)</
a></b> In conjunction with <a href=" http://
www.icaphila.org/exhibitions/mikes.php">Mike's
World</a> at the <a href="http://www.icaphila.
org/">ICA in Philadelphia</a>, Mike Smith and
Joshua White's retrospective at the Institute
of Contemporary Art in Philadelphia, UbuWeb
is pleased to present a retrospective of their
video works including <a href="film/smith-mike_
musco.html">The MUSCO Story: 1969-1997</
a>, video documentation of a fictitious lighting
design company with origins in the psychedelic oil-projection shows of the late '60s;
<a href="film/smith-mike_open-houe.html">Open
House (1999)</a>, about an artist who, in
response to skyrocketing SoHo real estate
values, has decided to sell out after living in
extended-adolescent squalor for 20 years;
<a href="film/smith-mike_quin.html">QuinQuag
(2001-2002)</a>, a spoof of a utopian artists'
colony; and <a href="film/smith_mike.html">Take
Off Your Pants (2005)</a>, a meditation on
internet life in the form of six-sided kiosk that
serves as a relentlessly cheerful information
booth purporting to take you to a miniature
"virtual" world that conflates the internet and a
Disney ride. Michael Smith is a video and performance artist who invokes the routines of
popular comedy to articulate the banality and
hype of mass consumer culture, and the isolation of those whose inner lives are defined
by it. Smith chronicles the trivial dreams and
adventures of his eponymous alter-ego, the
deadpan "Mike," a postmodern Everyman who
believes everything and understands nothing
in his media-saturated world.
<br><br><br>
<font color="#000"><B><A Href="./film/ben-ner.
html">Guy Ben-Ner - Videos: 1999-2007</A></
B> Although shot at home and usually with his
children, Ben-Ner's films are far from home
movies. They are sequences of carefully
planned scenes, each film is in fact preceded
by a copious storyboard drawings. The interest in the works of the mid-1960 and early
1970s' body artists such as <a href="film/nauman.html">Bruce Nauman</a>, <a href="film/
acconci.html">Vito Acconci</a>, and Dennis
Oppenheim, and the fascination with filmic
situations in which the director, the cameraman, the leading actor and the stuntman are
all one and the same, led Ben-Ner to deepen
his interest in the early films of Harold Lloyd,
Charlie Chaplin, and specially <a href="film/
beckett_film.html">Buster Keaton</a>. Included
here are four videos: <a href="/film/ben-ner_
beauty.html">Stealing Beauty</a> (2007), <a
href="film/ben-ner_moby.html">Moby Dick</a>
(2000), <a href="film/ben-ner_wild.html">Wild
Boy</a> (2005) and <a href="film/ben-ner_berkeley.html">Berkeley's Island</a> (1999).
spective of the audio and visual works of this
U.K.-based composer and artist. Sound works
included are: <a href="http://media.sas.upenn.
edu/pennsound/authors/Schaefer/Schaefer-Janek_
Recorded-Delivery.mp3">Recorded Delivery</
a> [1995], fragmented noises of a sound acti-
vated dictaphone traveling overnight through
the Post Office; <a href="http://media.sas.upenn.
edu/pennsound/authors/Schaefer/Schaefer-Janek_
His-Masters-Voices.mp3">His Master's Voices</
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/jarman_shadow.html">
Derek Jarman <font color="#000000"> Shadow
of the Sun (1980)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/mitry_pacific.html">
Jean Mitry <font color="#000000"> Pacific 231
(1949)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/menken_noguchi.html"> Marie Menken <font
color="#000000">Visual Variations on Noguchi
(1945) ; score by Lucia Dlugoszewski</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/pallieres_stein.
html"> Arnaud des Pallières <font
color="#000000"> Is Dead (Portrait Incomplet
de Gertrud Stein) (2000)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/wearing.html"> Gillian
Wearing <font color="#000000"> 2 Into 1
(1997)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/vasulka.html"> Woody
& Steina Vasulka <font color="#000000">
Steina Vasukla <i>Switch! Monitor! Drift!</i>
(1976); Woody Vasukla <i>C Trend</i> (1974);
Steina & Woody Vasukla <i>Calligrams</
i> (1970)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/doyen.html">
Jacques Doyen & Jacques Lasry ·<font
color="#000000"> French poetry accompanied
by Lasry-Baschet electronic sound structures
(1966) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/kirschner.html">
Kenneth Kirschner <font color="#000000"> Solo
works and collaborations with Taylor Deupree
(1997-2009) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/sadeghi_malek.html">
Ali Akbar Sadeghi <font color="#000000">
Malek Khorshid (1975)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/lamorisse.html">
Albert Lamorisse <font color="#000000">
Baadeh Sabah / The Lovers' Wind / Vent Des
Amoureux (1970/1978)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/farrokhzad_house.
html"> Forough Farrokhzad <font
color="#000000"> The House is Black / Khaneh
Siyah Ast (1962)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/dolat-shahi.html">
Dariush Dolat-Shahi <font color="#000000">
Electronic music, Tar and Setar (1985) and
Otashgah (1986) [MP3]</font></a> <br><br>
<center><font color="black">
All rights for materials presented on UbuWeb
belong to the artists. All materials are for noncommercial and / or educational use only.
<br><br>
</td>
<td width=20><br></td>
<td class="default" width="175" height=20
valign=top>
<font face="verdana, geneva">
<Br><Br><BR>
<font color="#000"><b><a href="./sound/
schaefer_j.html">Janek Schaefer - Soundworks</a> and <a href="./film/schaefer_j.
html">Videos (1995-2008)</a></b> A retro-
<br><br>
<img src="images/dot_clear.gif" alt="" width="1"
height="40" border="0">
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/farrokhzad.html">
Forough Farrokhzad <font color="#000000">
Radio Tehran Sessions (1962-1964) [MP3]</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/mashayekhi.html">
Ali Reza Mashayekhi <font color="#000000">
Electronic Music (1970-2001) [MP3]</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/dabh.html"> Halim
El-Dabh <font color="#000000"> Leiyla Visitations (1959) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/mimaroglu.html">
Ilhan Mimaroglu <font color="#000000">
Electronic Music (1964-1983) [MP3]</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/mofid.html">
Bijan Mofid <font color="#000000"> Shahreh
Ghesseh (1967)</font></a> <br><br>
<b>New Additions:</b><br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/ussachevsky.html">
Vladimir Ussachevsky <font color="#000000">
Film Music (1962-1967) [MP3]</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./historical/kaprow/KaprowAllan_How-To-Make-a-Happening.pdf"> Allan
Kaprow <font color="#000000"> How to Make
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/edmondez.html">
Gwilly Edmondez <font color="#000000">
Sounds & Films</font></a> <br><br>
<br><br><br><br><br><br>
21
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/nww.html"> Nurse
With Wound <font color="#000000"> Shipwreck
Radio (2004) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/anderson_colin.
html"> Colin Anderson <font color="#000000">
Whistles the First 19 Articles (1949) [MP3]</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/oursler_vega.
html"> Tony Oursler <font color="#000000">
Synesthesia: Alan Vega (1997-2001)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/oppenheim_d.html">
Dennis Oppenheim <font color="#000000">
Dennis Oppenheim in Conversation, The Whitney Museum of American Art, 2001 [MP3]</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/mann_hard.html">
Chris Mann <font color="#000000"> maybe if
you hit it hard (2008)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/cage.html"> John
Cage <font color="#000000"> Lecture on
Nothing (Performed by Kaegan Sparks), 2006
[MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/manitoba_winnipeg.
html"> L'Atelier National du Manitoba <font
color="#000000"> The Tragedy of the Winnipeg
Jets (2006)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/moulton.html"> Shana
Moulton <font color="#000000"> Whispering
Pines 6,7,8 (2006); The Mountain Where
Everything is Upside Down (2008)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/baldwin_sonic.html">
Craig Baldwin <font color="#000000"> Sonic
Outlaws (1995)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/burden.html"> Chris
Burden <font color="#000000"> Big Wrench
(1980); A Twenty-Year Survey, Newport Harbor
Art Museum (1988)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/bokanowski_angel.html"> Patrick Bokanowski <font
color="#000000"> L'Ange (The Angel) (1982)</
font></a> <br><br>
zwartjes_pentimento.html">Pentimento
(1979) </a>, <a href="film/zwartjes_bedsitters.
html">Bedsitters (1972) </a> and <a href="film/
zwartjes_audition.html">Audition (1973)</a>
<br><br>
of Art (2008)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/lipsett_free.html">
Arthur Lipsett <font color="#000000"> Free Fall
(1964)</font></a> <br><br>
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/acker.html"> Kathy
Acker <font color="#000000"> Redoing Childhood (2000) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/rosenfeld.html">
Marina Rosenfeld <font color="#000000">
Emotional Orchestra (2005) [MP3]</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/weiner.html">
Lawrence Weiner & Peter Gordon <font
color="#000000"> Deutsche Angst (1982)
[MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/nelson.html"> Robert
Nelson <font color="#000000"> Oh Dem Watermelons (1965); The Awful Backlash (1967)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/kac.html"> Eduardo
Kac <font color="#000000"> Digital and Holopoems (1985-1996)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/warhol_cars.html">
Andy Warhol <font color="#000000"> The Cars:
Hello Again [Music Video, 1984]</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/adbusters_meaning.
html"> Adbusters <font color="#000000"> The
Production of Meaning (2006)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/robbegrillet_dice.html"> Alain Robbe-Grillet <font
color="#000000"> N. a pris les dés
... aka N. took the dice (1971)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/nordine_eye.html">
Ken Nordine <font color="#000000"> The Eye Is
Never Filled (2005)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/sharits_interview.
html"> Paul Sharits <font color="#000000">
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/just.html"> Jesper
Just <font color="#000000"> Bliss &
Heaven (2005); A Vicious Undertow (2007)</
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/gursky_world.html">
Andreas Gursky <font color="#000000">
Gursky World (documentary, 2002)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/monk.html"> Meredith
Monk <font color="#000000"> Ellis Island
(1981); Book of Days (1989)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/plu.html"> People
Like Us <font color="#000000"> Nine Additional
Films [see features column] (1999-2008)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/export.html"> VALIE
EXPORT <font color="#000000"> ...Remote...
Remote... (1973); Mann & Frau &
Animal AKA Man & Woman & Animal
(1973); Syntagma (1983)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/zedd_war.html">Nick
Zedd <font color="#000000"> War is Menstrual
Envy (1992)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/murata_silver.
html">Takeshi Murata <font color="#000000">
Silver (2006)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/thompson_ny.html">Francis Thompson <font
color="#000000"> NY, NY: A Day in New York
(1957)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/jacobs_tom.html">Ken
Jacobs <font color="#000000"> A Tom Tom
Chaser (2002)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/paik_master.
html">Nam June Paik <font color="#000000">
Lessons from the Video Master (Documentary, 2006)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/castillejo.html">Jose
Luis Castillejo <font color="#000000"> The Book
of I's (1969)</font></a> <br><br>
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./sound/heidsieck_50-70.html">Bernard Heidsieck <font
color="#000000"> 50/70</font></a> <br><br>
(2002); Video Ravingz (2002); Naptime (2002);
f2 (2005); Mario Movie (2005)</font></a>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/rice_chumlum.html">
Ron Rice <font color="#000000"> Chumlum
(1964)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/oursler_evol.
html">Tony Oursler <font color="#000000">
EVOL (1984)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/greenaway_walk.
html"> Peter Greenaway <font color="#000000">
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/turrell_passageways.
html"> James Turrell <font color="#000000">
Passageways (documentary, 2006)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/manovich_soft.
html">Lev Manovich <font color="#000000">
Soft Cinema (2004)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/arcangel.html">
Cory Arcangel <font color="#000000"> Clouds
<br><br>
A Walk Through H: The Reincarnation of an
Ornithologist (1978)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/jarman_wittgenstein.
html"> Derek Jarman <font color="#000000">
Wittgenstein (1993)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/vilh.html">
Hallgrímur Vilhjálmsson <font
color="#000000"> Serenade for six German Sirens, op.43 (2008) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./contemp/tietz/index.html">
Ward Teitz <font color="#000000"> Concrete
Poetry Sculptures (1989-2008)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/birnbaum_faust.
html"> Dara Birnbaum <font color="#000000">
Damnation of Faust Trilogy (1983)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/mccall_argument.
html"> Anthony McCall & Andrew Tyndall
<font color="#000000"> Argument (1978)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/zwartjes.html">Frans
Zwartjes</a> <font color="#000000"> Six More
Films: (1978)</font> <a href="film/zwartjes_
spectator.html">Spectator (1970) </a>, <a
href="film/zwartjes_bedroom.html">Spare Bedroom (1970) </a>, <a href="film/zwartjes_seats.
html">Seats Two (1970) </a>, <a href="film/
Video Interview with Gerard O'Grady (1976)</
s
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/horn_erotic.
html">Rebecca Horn <font color="#000000"> An
Erotic Concert (1998)</font></a> <br><br>
Poetry as an International Movement viewed
by Augusto de Campos: An Interview (2008)</
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/eno_14.html">Brian
Eno <font color="#000000"> 14 Video Paintings
(1981 & 1984)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/jarman.html"> Derek
Jarman <font color="#000000"> Four Early
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/irwin_primaries.
html">Robert Irwin <font color="#000000">
Primaries and Secondaries (2008)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="http://ubu.com/papers/
decampos-a_interview/index.html"> Marina
Corrêa <font color="#000000"> Concrete
font></a> <br><br>
Films: Journey to Avebury (1971); Garden of
Luxor (1972); Ashden's Walk on Møn
(1973); Stolen Apples for Karen Blixen
(1973)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/jacobs_ontic.html">
Ken Jacobs <font color="#000000"> Ontic
Antics Starring Laurel and Hardy: Bye, Molly
(2005)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/reeves_nervy.html">
Jennifer Reeves <font color="#000000"> The
Girl's Nervy (1995)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/brakhage_garden.
html"> Stan Brakhage & Mary Beth
Reed <font color="#000000"> The Garden Path
(2001)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/meese_scarlett.html">
Jonathan Meese <font color="#000000"> Scar-
lettierbaby's Revolutions Parfum: Dictatorship
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/deantonio_painters.
html">Emile de Antonio <font color="#000000">
Painters Painting (1969)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/snow_montreal.
html">Michael Snow <font color="#000000">
One Second in Montreal (1969)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./sound/hodell.
html">Åke Hodell <font color="#000000">
220 Volts Buddha [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/corner.html">Philip
Corner <font color="#000000"> Word-Voices
(1962-1988) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
22
align="top"><a href="./sound/chopin.html">Henri
Chopin <font color="#000000"> Cantata for Two
Farts & Co. and Les Mirifiques Tundras
& Co. [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./sound/heidsieck_partition.html">Bernard Heidsieck <font
color="#000000"> Poème-Partition X LP
[MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/morales.html">Taniel
Morales <font color="#000000"> Sin Cabeza Necropsia [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./historical/awc/
index.html">Art Worker's Coalition <font
color="#000000"> Documents 1 (1969) and
Open Hearing (1969)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/sound_sculptures.
html">Sound Sculptures <font color="#000000">
Published by Wergo in 1985, <i>Sound
Sculptures</i> is a gorgeous, state-of-the-art
overview of Austria and West Germany's
instrument builders and sculptors. [MP3]</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/frampton.html">Hollis
Frampton <font color="#000000"> Two Interviews (1978)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/horn.html">Roni
Horn <font color="#000000"> Saying Water
(1999) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/klein.html">Yves
Klein <font color="#000000"> Conference
á la Sorbonne (1959) [MP3]</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/snow.html">Michael
Snow <font color="#000000"> Two Radio Solos:
Short Wavelength (1980) and The Papaya
Plantations (1980) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/roth.html">Dieter
Roth <font color="#000000"> Die Radio Sonata
(1976) [MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/patterson.html">Ben
Patterson <font color="#000000"> Tells Fluxus
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/frampton.html">Hollis
Frampton <font color="#000000"> Manual of
Arms (1966); Heterodyne (1967); Artificial
Light (1969) ; Noctiluca (Magellan's Toys: #1)
(1974); Matrix [First Dream] (1977-79)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/marker_junkopia.
html">Chris Marker <font color="#000000">
Junkopia (1981)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/buckingham_dots.
html">Matthew Buckingham <font
color="#000000"> Three Dots & Sandra of
the Tulip House or How To Live in a Free State
(2001)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/leccia_stridura.
html">Ange Leccia <font color="#000000">
Stridura (1980)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/freidrich_scar.html">Su
Friedrich <font color="#000000"> Scar Tissue
(1979)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/acconci.html">Vito Acconci <font color="#000000"> Seedbed (1972)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/kipper.html">Kipper
Kids <font color="#000000"> Audio Works
(1977-83)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/burden.html">Chris
Burden <font color="#000000"> Audio Works
(1977-82)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/cointet.html">Guy
de Cointet <font color="#000000"> Audio Works
(1976-92)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./sound/huebler.
html">Douglas Huebler <font color="#000000">
Audio Works and Radio Interviews (1977-78)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/new_humans.
html">New Humans <font color="#000000">
(1968); Paindrome (1969); Ordinary Matter
(1972); Autumnal Equinox (1974)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/sherman_doll.
html">Cindy Sherman <font color="#000000">
Doll Clothes (1975)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/burroughs_shotgun.html">William S. Burroughs <font
color="#000000"> Shotgun Paintings (date
unknown)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/payne-relph_mixtape.
html">Oliver Payne & Nick Relph <font
color="#000000"> Mixtape (2002)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/payne-relph_comma.
html">Oliver Payne & Nick Relph <font
color="#000000"> Comma, Pregnant Pause
(2004)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/wegman_man-ray.
html">William Wegman & Man Ray <font
color="#000000"> Man Ray, Man Ray (documentary, 1978)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/sjolander_monument.
html">Ture Sjölander & Lars Weck
<font color="#000000"> Extracts from "Monument" (1967)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/aa.html">Alejandra
Salinas and Aeron Bergman <font
color="#000000"> Two New Videos: Let
100 Flowers Bloom (2008) and Big Kahuna
(2006)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/aa.html">Alejandra
Salinas and Aeron Bergman <font
color="#000000"> Three New Sound Works:
LoreleiTube, Imperfect Reliability and Traditional Visual (2008)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
cage_masters.html">John Cage <font
color="#000000">"American Masters" John
Cage: I Have Nothing to Say and I Am Saying
It (1990) </font></a> <br><br>
Stories (1962-2002); Drip Music; 370 Flies
[MP3]</font></a> <br><br>
New Humans (2005); Disassociate (2006);
Undercover (2007); Collaborations with Vito
Acconci and C. Spencer Yeh (2008) [MP3]</
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/russian_futurists.
html">Russian Futurists <font color="#000000">
from the GLM Collection [MP3] (1920-1959)</
font></a> <br><br>
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/sharits_epileptic.html">Paul Shartis <font
color="#000000">Epileptic Seizure Comparison
(1976)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/snow.html">Michael
Snow <font color="#000000"> Wavelength
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/relational.html">Art
Safari <font color="#000000">Relational Aesthetics (2004)</font></a> <br><br>
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/garrel_solitudes.
html">Philippe Garrel <font color="#000000">Les
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/stein_seldes.
html">Gertrude Stein (read by Marian Seldes)
<font color="#000000"> from The Making of
Americans and Lectures in America (1963)
[MP3]</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./sound/dubuffet.html">Jean
Dubuffet <font color="#000000"> Musique Brut
(1971)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/alys.html">Francis
Alÿs <font color="#000000"> When Faith
Moves Mountains (2002) and The Politics
of Rehearsal [AKA Ensayo 2, 2005] (2005)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/smithson.
html">Robert Smithson and Nancy Holt <font
color="#000000"> Mono Lake (1968-2004) and
Swamp (1971)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/weiner_matter.
html">Lawrence Weiner <font color="#000000">
A Little Bit of Matter and a Little Bit More
(1976)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/lemaitre_amour.html">Maurice Lemaître
<font color="#000000"> Amour
réinventé (1979-1989)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/holmqvist_rockland.
html">Karl Holmqvist <font color="#000000">
I'm With You in Rockland (2005)</font></a>
<br><br>
(1967); La Région Centrale (1971);
Breakfast (Table Top Dolly) (1976); Presents
(1981); So This Is (1982); Prelude (2000)</
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/mishima_rite.
html">Yukio Mishima & Domoto Masaki
<font color="#000000"> Yûkoku aka
Patriotism aka Rite of Love & Death (1966)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/lipsett_gaucher.
html">Eric Gaucher <font color="#000000"> The
Arthur Lipsett Project: A Dot on the Histomap
(2007)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/hill.html">Gary Hill
<font color="#000000"> Mirror Road (1976);
Bathing (1977); Soundings (1978); Electronic
Linguistic (1978); Sums &' Differences
(1978); Windows (1978); Objects with Destinations (1979); Black/White/Text (1980); Site/
Recite (a prologue) (1989)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/acconci_red.html">Vito
Acconci <font color="#000000"> The Red Tapes
(1976)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/keuken_meester.
html">Johan van der Keuken <font
color="#000000"> De Meester en de Reus aka
The Master and the Giant (1980)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/frampton.html">Hollis
Frampton <font color="#000000"> Snowblind
Hautes solitudes (1974, with Jean Seberg and
Nico)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/hodell_lagsniff.html">Åke Hodell <font
color="#000000">Lågsniff (1965)</font></
a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
bausch_linsel.html">Pina Bausch <font
color="#000000">Documentary (German
language, Directed by Anne Linsel, 2006)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
jacobs_window.html">Ken Jacobs <font
color="#000000">Window (1964)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
serra_surprise.html">Richard Serra <font
color="#000000">Surprise Attack (1973)</
font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/gianikian_pole.
html">Yervant Gianikian and Angela Ricci Lucchi <font color="#000000">From the Pole to the
Equator (1987)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0" align="top"><a href="./film/
lawder_color.html">Standish Lawder <font
color="#000000">Corridor (1970, music by Terry
Riley)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
23
align="top"><a href="./film/lawder_corridor.
html">Standish Lawder <font color="#000000">
Colorfilm (1971, music by the Mothers of
Invention)</font></a> <br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./film/rose-jon_fences.
html">Jon Rose <font color="#000000">
Great Fences of Australia (2002)</font></a>
<br><br>
<img src="./images/arrow_red.gif" border="0"
align="top"><a href="./historical/cowell/CowellHenry_New- Musical-Resources.pdf">Henry
Cowell <font color="#000000">New Musical
Resources (1938/1969) [PDF, 56mb]</font></
a> <br><br>
<td width=20><br></td>
<td class="default" width="160" height=25
valign=top>
<font face="verdana, geneva">
<img src="images/dot_clear.gif" alt="" width="1"
height="40" border="0">
<br><br><br><br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources: <br>June
2009</font></b><br>
Selected by Mika Tajima<br>
<br>
1. <a href="http://ubu.artmob.ca/sound/yeh/
Solo_Violin_I-X/Yeh_C_Spencer_Side-A_Solo-ViolinI-X_2006.mp3">C. Spencer Yeh--Solo Violin</a>
<br>
2. <a href="http://www.ubu.com/aspen/aspen8/
threeDistributions.html">Yvonne Rainer--Three
Distributions</a>
<br>
3. <a href="http://www.ubu.com/film/varda.
html">Agnes Varda--Black Panthers-Huey!</a>
<br>
4. <a href="http://www.ubu.com/film/acconci_
theme.html">Vito Acconci--Theme Song</a>
<br>
5. <a href="http://www.ubu.com/sound/tellus_13.
html">Tellus #13--Power Electronics</a>
<br>
6. <a href="http://www.ubu.com/film/paik_edited.
html">Nam June Paik--Edited for Television</
a>
<br>
7. <a href="http://www.ubu.com/film/campus_
double.html">Peter Campus--Double Vision</a>
<br>
8. <a href="http://www.ubu.com/film/schwartzlillian_pixillation.html">Liliann Schwartz-Pixellation</a>
<br>
9. <a href="http://www.ubu.com/film/varese.
html">Edgard Varese, Iannis Xenakis & Le
Corbusier</a>
<br>
9. <a href="http://www.ubu.com/film/kirk.
html">Rahsaan Roland Kirk and John Cage-Sound?</a>
<br>
<br>
<i>Mika Tajima is an artist and also works under the collaborative moniker <a href="sound/
new_humans.html">New Humans</a>. Recent
shows include SFMoMA, X Initiative, The
Kitchen, Whitney Biennial 2008, among others.</i><br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources: <br>May
2009</font></b><br>
Selected by David Toop<br>
<br>
1. <a href="http://www.ubu.com/film/michaux_
images.html">Henri Michaux: Images du
Monde Visionnaire</a>
<br>
2. <a href="http://www.ubu.com/film/klein.
html">Yves Klein: Anthropometries of the Blue
Period & Fire Paintings</a>
<br>
3. <a href="http://www.ubu.com/
film/lacan.html">Jacques Lacan:
Télévision </a>
<br>
4. <a href="http://www.ubu.com/film/mishima_
rite.html">Yukio Mishima: Rite of Love and
Death</a>
<br>
5. <a href="http://www.ubu.com/film/marker_
junkopia.html">Chris Marker, John Chapman &
Frank Simeone: Junkopia</a>
<br>
6. <a href="http://www.ubu.com/ethno/soundings/masters.html">Ethnopoetics: Canntaireachd - Earl of Seaforth's Salute</a>
<br>
7. <a href="http://ubu.wfmu.org/sound/
ethno/gaillard_slim/Gaillard-Slim_Bassology.
mp3">Ethnopoetics: Slim and Slam - 'African
Jive'</a>
<br>
8. <a href="http://ubu.artmob.ca/sound/aspen/
mp3/drift.mp3">La Monte Young: Drift Study 31
1 69, Aspen 8, item 5.</a>
<br>
9. <a href="http://www.ubu.com/film/ballard.
html">J.G. Ballard: Shanghai Jim</a>
<br>
10. <a href="http://ubu.artmob.ca/sound/
group_ongaku/Group-Ongaku_Automatism_1960.
mp3">Group Ongaku: Automatism</a>
<br><br>
<i>David Toop is a musician/composer, writer
and curator. More <a href="http://www.davidtoop.com">here</a>.</i><br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources: <br>April
2009</font></b><br>
Selected by Pauline Oliveros<br>
<br>
1. <a href="film/roulette_bang_2000.html">Billy
Bang - "Daydreams"</a>
<br>
2. <a href="film/roulette_klucevsek_2000.
html">Guy Klucevsek - "Clairvoyant"</a>
<br>
3. <a href="film/kagel_antithese.html">Mauricio
Kagel - Antithese</a>
<br>
4. <a href="film/hsieh_no3.html">Tehching
Hsieh (b. 1950) - One Year Performance, No.
2 (1980-81)</a>
<br>
5. <a href="film/her_noise.html">Her Noise The Making Of</a>
<br>
6. <a href="film/fox.html">Terry Fox - Children's
Tapes</a>
<br>
7. <a href="film/gould_karlheinz.html">Glenn
Gould - Karlheinz Klopweisser Promo for
CBC</a>
<br>
8. <a href="film/roulette_namchylak_2000.
html">Sainkho Namtchylak - Roulette TV</a>
<br>
9. <a href="film/baldessari_lewitt.html">John
Baldessari (b. 1931) - Baldessari Sings
Lewitt</a>
<br><br>
<i>Pauline Oliveros (b. 1932) is an accordionist
and composer who was a central figure in the
development of post-war electronic art music.
Oliveros was a founding member of the San
Francisco Tape Music Center in the 1960s,
and served as its director. She has taught
music at Mills College, the University of
California, San Diego (UCSD), and Rensselaer
Polytechnic Institute. Oliveros has written
books, formulated new music theories and
investigated new ways to focus attention on
music including her concepts of <a href="http://
www.deeplistening.org/site/">Deep Listening</
a> and "sonic awareness". More <a href="http://
paulineoliveros.us/">here</a>.</i><br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources: <br>March
2009</font></b><br>
Selected by Naomi Beckwith<br>
<br>
1. <a href="http://ubu.com/ethno/discourses/
tzara.html">Tristan Tzara "A Note On Negro
Poetry" (1918)</a>
<br>
2. <a href="http://ubu.com/film/douglas_sandmann.html">Stan Douglas "Der Sandmann"</a>
<br>
3. <a href="http://ubu.artmob.ca/sound/
patterson_ben/Patterson-Ben_Tells-FluxusStories_1962-2002.mp3">Ben Patterson Tells
Fluxus stories</a> [MP3]
<br>
4. <a href="http://mediamogul.seas.upenn.edu/
pennsound/authors/Vitiello/Stephen-Vitiello-13Drum-and-Organ.mp3">Stephen Vitiello "Drum
and Organ"</a> [MP3]
<br>
5. <a href="http://ubu.artmob.ca/sound/farfa/Farfa_Affaraffari.mp3">Farfa "Affaraffari"</a> [MP3]
<br>
6. <a href="http://ubu.com/film/leslie.
html">Alfred Leslie & Frank O'Hara "The
Last Clean Shirt</a>
<br>
7. <a href="http://ubu.com/film/corbijn.
html">Anton Corbijn "Some YoYo Stuff: An
observation of the observations of Don Van
Vliet"</a>
<br>
8. <a href="http://ubu.com/film/hatoum_measures.html">Mona Hatoum "Measures of
Distance"</a>
<br>
9. <a href="http://ubu.com/film/hsieh_no2.
html">Tehching Hsieh "One Year Performance
No. 2"</a>
<br>
10. <a href="http://ubu.artmob.ca/
sound/12+2/10+2=12_12.Aram_Saroyan.
mp3">Aram Saroyan "Crickets"</a> [MP3]
<br>
BONUS: <a href="http://ubu.com/film/roulette_fen_2000.html">Ming Xiao-Fen Live at
Roulette</a>
<br><br>
Naomi Beckwith is Assistant Curator at The
Studio Museum in Harlem.
<br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources:
<br>February 2009</font></b><br>
Selected by Dennis Cooper<br>
<br>
1. <a href="http://ubu.com/film/kluge_brutality.
html">Alexander Kluge 'Brutality in Stone
(Yesterday Goes on Forever)'</a>
<br>
2. <a href="http://www.ubu.com/film/trecartin_
area.html">Ryan Trecartin 'I-Be AREA'</a>
<br>
3. <a href="http://ubu.artmob.ca/sound/aspen/
mp3/robbeGrillet.mp3">Alain Robbe-Grillet
'Jealousy'</a>
<br>
4. <a href="http://www.ubu.com/concept/secrets.
pdf">Douglas Huebler 'Variable Piece 4 New
York City: Secrets'</a> [PDF]
<br>
5. <a href="http://www.ubu.com/sound/tellus_15.
html">Tellus #15: The Improvisors</a>
<br>
6. <a href="http://ubu.artmob.ca/sound/dial_a_
poem_poets/sam/Sugar-Alcohol-Meat_23-_Rene_
Ricard-_Rene_Ricard_famous_at_20.mp3">Rene
Ricard 'Rene Ricard famous at 20'</a>
<br>
7. <a href="http://www.ubu.com/film/burden.
html">Chris Burden 'Documentation of
Selected Works 1971-74'</a>
<br>
8. <a href="http://www.ubu.com/ubu/simon_
properties.html">Claude Simon 'Properties
of Several Geometric and Non-Geometric
Figures'</a>
<br>
9. <a href="http://www.ubu.com/sound/static.
html">Glenn Branca/The Static 'The Static'</a>
<br>
10. <a href="http://www.ubu.com/film/terayama_vol1.html">Terayama Shuji 'Experimental
Image World Vol. 1'</a>
<br><br>
Dennis Cooper is the author of eight novels,
most recently 'The Sluts' and 'God Jr.' (both
2005). With the French director Gisele Vienne,
he has co-created theater five works, most
recently 'Jerk' (2007). He's a Contributing
Editor of Artforum, and editor of the publishing
imprint Little House on the Bowery/Akashic
Books. His blog is <a href="http://denniscoopertheweaklings.blogspot.com/">here</a>.
<br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources: <br>January
2009</font></b><br>
Selected by James Hoff<br>
<br>
1. <a href="http://ubu.com/film/sjolander_monument.html">Sjollander/Weck: Extracts from
Monument</a>
<br>
2. <a href="http://ubu.com/papers/rice.html">Ron
Rice: A Brief History of Anti-Records and
Conceptual Records</a>
<br>
3. <a href="http://www.ubu.com/contemp/
sondheim/index.html">Alan Sondheim: Run by
Me</a>
<br>
4. <a href="http://ubu.com/film/ulay_action.
html">Ulay: Action in 14 Predetermined
Sequences</a>
<br>
5. <a href="http://ubu.com/sound/nechvatal.
html">Joseph Nechvatal: viral symphOny
(28'09")</a>
<br>
6. <a href="http://ubu.com/film/chopin.
html">Henry Chopin Performance: Undated</
a>
24
<br>
7. <a href="http://ubu.com/film/colab_news.
html">CoLab: All Color News Sampler</a>
<br>
8. <a href="http://ubu.artmob.ca/sound/chi-
cago_82/Chicago_82-B2_Cage-Mertens_So-thateach.mp3">John Cage / Wim Mertens "So that
each person is in charge of himself."</a>from
<a href="http://www.ubu.com/sound/chicago82.
html">A Dip in the Lake</a>
<br>
9. <a href="http://ubu.artmob.ca/sound/dec_francis/Dec-Francis-E_rant2.mp3">Dec-Francis: Rant
2</a>
<br>
10. <a href="http://www.ubu.com/film/palestine.
html">Charlemagne Palestine: Island Song</a>
<br><br>
James Hoff is an artist living in New York
City. He, along with Miriam Katzeff, is the cofounder of <a href="http://www.primaryinformation.org/">Primary Information.</a>
<br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources:
<br>December 2008</font></b><br>
Selected by Julian Cowley<br>
<br>
1. <a href="http://ubu.com/film/aether.
html">Robert Ashley - Music with Roots in the
Aether</a>
<br>
2. Joe Jones/ Chicken to Kitchen <a
href="http://ubu.artmob.ca/sound/jones_joe/
chicken/Jones-Joe+Chicken-to-Kitchen_02Fluxus-Meditation.mp3">Fluxus Meditation</
a> from <a href="http://ubu.com/sound/jones.
html">Fluxsaints</a> (1992)
<br>
3. Robert Wilson - Christopher Knowles <a
href="http://ubu.artmob.ca/sound/dial_a_poem_poets/big_ego/Big_Ego_05-wilson.mp3">The
Sundance Kid Is Beautiful (1975)</a> from <a
href="http://ubu.com/sound/big_ego.html">Giorno
Poetry Systems, Big Ego</a>
<br>
4. <a href="http://www.ubu.com/sound/vostell.
html">Wolf Vostell - De/Collage [LP] (1980)</a>
<br>
5. <a href="http://www.ubu.com/film/kirk.
html">John Cage and Raahsan Roland Kirk Sound?? (1966)</a>
<br>
6. <a href="http://ubu.com/ubu/moore_spleen.
html">Nicholas Moore, Spleen (Ubu Editions,
2004)</a>
<br>
7. <a href="http://www.ubu.com/film/bausch_linsel.html">Pina Bausch Documentary (directed
by Anne Linsel) (2006)</a>
<br>
8. <a href="http://www.ubu.com/film/roulette_behrman.html
">David Behrman, Long Throw (Roulette,
2008)</a>
<br>
9. <a href="http://ubu.artmob.ca/sound/bailey_derek/Derek-Bailey-Interview-by-Henry-Kaiser_
KPFA_2-7-87.mp3">Derek Bailey, Interview by
Henry Kaiser (1987)</a>
<br>
10. <a href="http://ubu.artmob.ca/sound/acconci_vito/Acconci-Vito_The-Bristol-Project_2001.
mp3">Vito Acconci, The Bristol Project
(2001)</a>
<br><br>
Julian Cowley contributes regularly to <i>The
Wire</i> and occasionally to other music
magazines. He has also lectured and written
extensively on literature. During the 1980s he
had the good fortune to work closely for several years with poet and critic Eric Mottram,
whose inexhaustible conversation was, in
effect, a foretaste of the UbuWeb experience.
<br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources:
<br>November 2008</font></b><br>
Selected by Neville Wakefield<br>
<br>
1. <a href="http://www.ubuweb.com/film/acconci_sharp.html">Willoughby Sharp Interviews
Vito Acconci (1973) </a>
<br>
2. <a href="http://www.ubu.com/film/ader_selected.html">Bas Jan Ader - Selected Works
(1970-71)</a>
<br>
3. <a href="http://www.ubu.com/film/rist.
html">Pipilotti Rist - Video Works (19862003)</a>
<br>
4. <a href="http://www.ubu.com/film/burden.
html">Chris Burden - Documentation of
Selected Works 1971-74 </a>
<br>
5. <a href="http://www.ubu.com/film/grimonprez_dial.html">Johan Grimonprez - Dial H-I-S-TO-R-Y (1997)</a>
<br>
6. <a href="http://www.ubu.com/film/goldstein.
html">The Films of Jack Goldstein (19741978)</a>
<br>
7. <a href="http://www.ubu.com/film/gmc_splitting.html">Gordon Matta-Clark - Splitting,
Bingo/Ninths, Substrait (Underground Dailies)
(1974-1976)</a>
<br>
8. <a href="http://www.ubu.com/film/
weiner_water.html
">Lawrence Weiner - WATER IN MILK EXISTS
(2008)</a>
<br>
9. <a href="http://ubu.artmob.ca/sound/
dial_a_poem_poets/demon/Demon_04_psychic.
mp3">Psychic TV - "Unclean" </a>
<br>
10. <a href="http://www.ubu.com/film/smithson_
hotel.html">Robert Smithson - Bootleg of Hotel
Palenque by Alex Hubbard (1969 / 2004)</a>
<br><br>
Neville Wakefield is a writer and curator
living in NYC. Recent film projects include
'destricted' a compilation of commissioned
films by Marina Abramovic, Matthew Barney,
Marco Brambilla, Larry Clark, Gaspar Noe,
Richard Prince and Sam Taylor Wood. Senior
curatorial advisor to PS1 and curator of Frieze
he is also creative director of 'tar' magazine.
<br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources:
<br>October 2008</font></b><br>
Selected by Gary Sullivan<br>
<br>
1. <a href="http://www.ubu.com/sound/blonk.
html">Jaap Blonk's sound files</a>
<br>
2. <a href="http://www.ubu.com/historical/dada/
index.html">Dada Magazine</a>
<br>
3. <a href="http://www.ubu.com/sound/gardner.
html">Drew Gardner's sound files</a>
<br>
4. <a href="http://ubuweb.com/ubu/unpub.
html">Kenneth Goldsmith, editor, "Publishing
the Unpublishable" series</a>
<br>
5. <a href="http://www.ubu.com/film/kuchar.
html">George Kuchar's films (especially "Corruption of the Damned")</a>
<br>
6. <a href="http://www.ubu.com/papers/oei/
index.html">Anders Lundgerg, Jonas Mag-
nusson and Jesper Olsson, editors, "After
Language Poetry" papers</a>
<br>
7. <a href="http://ubuweb.com/film/paperrad_p.
html">Paper Rad's "P-Unit Mixtape"</a>
<br>
8. <a href="http://www.ubu.com/historical/
porter/index.html
">Bern Porter's page</a>
<br>
9. <a href="http://www.ubu.com/ethno/soundings/vietnam.html">Jerome Rothenberg's
Ethnopoetics : Soundings page (especially "Ca
Dao, Vietnamese Folk Poems")</a>
<br>
10. <a href="http://ubuweb.com/film/srl_virtues.
html">Survival Research Laboratories, "Virtues
of Negative Fascination"</a>
<br><br>
Poet and cartoonist Gary Sullivan lives
in Brooklyn with <a href="http://ululate.
blogspot.com">Nada Gordon</a>. Together,
they wrote the book <a href="http://
www.amazon.com/Swoon-Nada-Gordon/
dp/1887123547">Swoon</a>. Gary's most
recent book is <a href="http://spdbooks.org/
details.asp?BookID=9781931824286">PPL in a
Depot</a>. He has published three issues of a
comic book, Elsewhere, and maintains a blog
by the same name at <a href="http://garysullivan.blogspot.com">http://garysullivan.blogspot.
com</a>.
<br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources:
<br>September 2008</font></b><br>
Selected by Rick Moody<br>
<br>
1. <a href="http://ubu.artmob.ca/sound/komar_
melamid/KomarMelamid_The-Most-UnwantedSong.mp3">Komar and Melamid & Dave
Soldier, "The Most Unwanted Song"</a>
<br>
2. <a href="http://www.ubu.com/sound/derrida.
html">Jacques Derrida, "On Religion"</a> <a
href="http://ubu.artmob.ca/sound/derrida_jacques/
Derrida-Jacques_On-Religion_Part-1.mp3">Part
1</a>, <a href="http://ubu.artmob.ca/sound/derrida_jacques/Derrida-Jacques_On-Religion_Part-2.
mp3">Part 2</a>
<br>
3. <a href="http://www.ubu.com/outsiders/ass.
html">Assorted Street Posters</a>
<br>
4. <a href="http://media.sas.upenn.edu/
pennsound/authors/Williams-WC/05_EmersonRecording_08-50/Williams-WC_11_Danse-Russe_
prod-Emerson_08-50.mp3">William Carlos
Williams, "Danse Russe."</a>
<br>
5. <a href="http://www.ubu.com/film/b.html">
Beth B., "Stigmata"</a>
<br>
6. <a href="http://ubu.artmob.ca/sound/
joyce_james/Joyce-James_Anna-Livia-Plurabelle.
mp3">James Joyce, "Anna Livia Plurabelle"</a>
<br>
7. <a href="http://www.ubu.com/sound/tellus_14.
html">Tellus #14, "Just Intonation"</a>
<br>
8. <a href="http://ubu.artmob.ca/sound/ball_hugo/
Marie-Osmond_Hugo-Ball_Karawane.mp3">Hugo
Ball, "Karawane," performed by Marie
Osmond</a>
<br>
9. <a href="http://mediamogul.seas.upenn.edu/
pennsound/authors/Whitehead/Gregory_Whitehead-We_All_Scream_Alone_1992.mp3">Gregory
Whitehead, "We All Scream Alone"</a>
<br>
10. <a href="http://www.ubu.com/sound/cage.
html"> John Cage Meets Sun Ra</a> <a
href="http://ubu.artmob.ca/sound/cage_john/
cage_sun_ra/Cage-John_and_Ra-Sun_01.
mp3">Part 1</a>, <a href="http://ubu.artmob.ca/
sound/cage_john/cage_sun_ra/Cage-John_and_RaSun_02.mp3">Part 2</a>
<br><br>
<a href="http://en.wikipedia.org/wiki/Rick_
Moody">Rick Moody</a> is the author of
four novels, three collections of stories, and
a memoir, THE BLACK VEIL. He also plays
music with The Wingdale Community Singers.
<br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources: <br>August
2008</font></b><br>
Selected by Ben Rubin<br>
<br>
1. <a href="http://www.ubu.com/papers/satie_day.html">Erik Saite - A Day in the Life of a
Musician </a>
<br>
2. <a href="http://www.ubuweb.com/pa-
pers/leacock_richard-uncontrolled_cinema.
html">Richard Leacock - For an Uncontrolled
Cinema</a>
<br>
3. <a href="http://www.ubu.com/papers/burroughs_gysin.html">William S. Burroughs - The
Cut-Up Method of Brion Gysin</a>
<br>
4. <a href="http://www.ubu.com/concept/
closky_1000.html">Claude Cloksy - The first
thousand numbers classified in alphabetical
order</a>
<br>
5. <a href="http://www.ubu.com/concept/smithson_heap.html">Robert Smithson - A Heap of
Language</a>
<br>
6. <a href="http://www.ubu.com/concept/acconci_re.html">Vito Acconci - RE</a>
<br>
7. <a href="http://ubu.artmob.ca/sound/mcluhan_marshall/Mcluhan-Marshall_The-Medium-IsThe-Massage_01.mp3">Marshall McLuhan - The
Medium is the Massage, Side A </a>, <a
href="http://ubu.artmob.ca/sound/mcluhan_marshall/Mcluhan-Marshall_The-Medium-Is-TheMassage_02.mp3">Side B</a>
<br>
8. <a href="http://www.ubu.com/papers/
rubinstein.html">Raphael Rubinstein - A Brief
History of Appropriative Writing</a>
<br>
9. <a href="http://www.ubu.com/papers/perloff02.html">Marjorie Perloff - The Music of
Verbal Space</a>
<br>
10. <a href="http://www.ubu.com/aspen/aspen8/
leadPendulum.html#reichl">Steve Reich - Pendulum Music (score)</a>
<br><br>
<a href="http://www.earstudio.com/">Ben
Rubin</a> is a media artist based in New
York City. He has been a frequent collaborator
with artists and performers including Laurie
Anderson, Diller+Scofidio, Ann Hamilton, Arto
Lindsay, Steve Reich, and Beryl Korot.
<br><br><br>
<font color="#000"><b><font
25
color="#000">Featured Resources: <br>July
2008</font></b><br>
Selected by Zach Feuer<br>
<br>
1. <a href="http://ubu.com/film/mccarthy_painter.
html"> Paul McCarthy - Painter (1995)</a>
<br>
2. <a href="http://ubu.com/film/rist.html">Pipilotti
Rist - Video Works (1986-1999)</a>
<br>
3. <a href="http://ubu.com/film/kern_nightmare.
html">Richard Kern - My Nightmare (1993)</a>
<br>
4. <a href="http://ubu.com/film/ader_selected.
html">Bas Jan Ader - Fall I & II (1970)</
a>
<br>
5. <a href="http://ubu.com/film/benglis_female.
html">Lynda Benglis - Female Sensibility
(1974)</a>
<br>
6. <a href="http://www.ubu.com/film/calle_double.html">Sophie Calle & Greg Shepard - No
Sex Last Night aka Double-Blind (1992)</a>
<br>
7. <a href="http://www.ubu.com/film/pfhaler.
html">Kembra Pfahler - Cornella; The Story of
a Burning Bush (1985)</a>
<br>
8. <a href="http://ubu.artmob.ca/sound/aspen/
qt/morris.mov"> Robert Morris & Stan VanDerBeek - Site (excerpt) (1964, .mov)</a>
<br>
9. <a href="http://www.ubu.com/film/schneeman_meatjoy.html">Carolee Schneeman Meat Joy (1964)</a>
<br>
10. <a href="http://www.ubu.com/film/graham_
rock.html">Dan Graham - Rock My Religion
(1982-84)</a>
<br><br>
Zach Feuer owns the creatively named <a
href=http://www.zachfeuer.com> Zach Feuer
Gallery </a>in New York City.
<br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources: <br>June
2008</font></b><br>
Selected by Ron Silliman<br>
<br>
1. <a href="http://ubu.com/film/mouris.html">
Frank Film (1973), Frank and Caroline Mouris</
a>
<br>
2. <a href="http://ubu.artmob.ca/sound/
dial_a_poem_poets/disconnected/Disconnected_11_creeley.mp3">The Name (1973), Robert
Creeley</a>
<br>
3. <a href="http://ubu.artmob.ca/sound/
dial_a_poem_poets/disconnected/Disconnected_28_dorn.mp3">Recollections of Grande
Apachería (1973), Edward Dorn</a>
<br>
4. <a href="http://media.sas.upenn.edu/
pennsound/authors/Creeley/Goddard/CreeleyRobert_Full_Goddard_VT_5-18-73.mp3">Reading
at Goddard College (1973), Robert Creeley</a>
<br>
5. <a href="http://www.ubu.com/papers/
mc_carn1.html">Carnival The First Panel: 19671970 (1973), Steve McCaffery</a>
<br>
6. <a href="http://media.sas.upenn.edu/
pennsound/authors/Mac-Low/CDs/Doings/MacLow-Jackson_08_Black-Tarantula_Doings_1982.
mp3">Black Tarantula Crossword Gathas
(excerpt) (1973), Jackson Mac Low</a>
<br>
7. <a href="http://media.sas.upenn.edu/
pennsound/authors/Mac-Low/CDs/Doings/
Mac-Low-Jackson_09_Vocabulary-for-Mattlin_Doings_1982.mp3">A Vocabulary for Sharon Belle
Matlin (1973), Jackson Mac Low</a>
<br>
8. <a href="http://ubu.com/sound/
files/10+2=12_02.Charles_Amirkhanian.
mp3">Heavy Aspirations (1973), Charles
Amirkhanian</a>
<br>
9. <a href="http://media.sas.upenn.edu/
pennsound/video/Schwerner/Schwerner-Armandby-Phill-Niblock_c-1973.rm">Armand Schwerner
(1973), Phil Niblock (real video .rm file)</a>
<br>
10. <a href="film/broughton_kuku.html">High
Kukus (1973), James Broughton</a>
<br><br>
<a href="http://ronsilliman.blogspot.com/">Ron
Silliman</a> was once a slow left-handed sec-
ond baseman. Now he lives in a faux forest in
what was once the Biddle Estate.
<br><br><br>
<font color="#000"><b><font
color="#000">Featured Resources: <br>May
2008</font></b><br>
Selected by Christian Bök<br>
<br>
1. <a href="http://www.ubu.com/concept/Claude_
Closky_1000.pdf">Claude Closky: "The First
P {}
<br>
2. <a href="http://writing.upenn.edu/pepc/
authors/beaulieu/Beaulieu-Derek_Flatland.
pdf">Derek Beaulieu: "Flatland" (2007) [PDF]</
a>
<br>
3. <a href="http://www.ubu.com/ubu/wershler_
tapeworm.html">Darren Wershler-Henry: "The
Tapeworm Foundry" (2002)</a>
A {color:#FF0000; text-decoration:none;}
<br>
4. <a href="http://www.ubu.com/ubu/simon_
properties.html">Claude Simon: "Properties
.default {color:#000000; font-family:Verdana, Arial;
font-size: 10px;}
.fine {color:#000000; font-family:Arial; font-size:
10px;}
.form {color:#000000; font-family:Verdana, Arial;
font-size: 10px;}
Thousand Numbers Classified in Alphabetical
Order" (1989) [PDF]</a>
of Several Geometric and Non-Geometric
Figures" (1971)</a>
<br>
5. <a href="http://ubu.artmob.ca/sound/marinetti_ft/Marinetti-Filippo-Tommaso_Dune.mp3">F.
T. Marinetti: "Dune, Parole in Libertà"
(1914)</a>
<br>
6. <a href="http://www.ubu.com/film/srl_virtues.
html">Survival Research Laboratories: "Virtues
of Negative Fascination" (1985-86)</a>
<br>
7. <a href="http://media.sas.upenn.edu/
pennsound/authors/Price/Vidz/Price-Seth_VidTrax_CONTINUOUS_MIX_2001.mp3">Seth
Price: "Video Game Soundtracks 1983-1987"
(2001)</a>
<br>
8. <a href="http://www.ubu.com/outsiders/365/2007/199.shtml">Trek Bloopers</a>
<br>
9. <a href="http://ubu.artmob.ca/sound/bruhin_anton/rotomotor/Bruhin-Anton_Rotomotor_05_Rotomotor.mp3">Anton Bruhin: "Rotomotor"
(1976-77)</a>
<br>
10. <a href="http://www.ubu.com/historical/
racter/index.html">RACTER: "The Policeman's
Beard Is Half-Constructed" (1984)</a>
<br>
<br>
<b>BONUS TRACK:</b>
<br>
<a href="http://www.ubu.com/outsiders/365/2003/260.shtml">IBM 7090: "Music
from Mathematics" (1962)</a>
<br><br>
<a href="sound/bok.html">Christian Bök</
a> is the author of <a href="contemp/bok/index.
html">Eunoia</a>.
<br><br><br>
</td>
</tr>
</table>
</center>
<br><br>
</body>
</html>
CSS
H1 {color:#000000; font-family:Verdana, Arial;
font-size: 12px;}}
H2 {}
H3 {}
A:Visited {color:#FF0000}
A:Active {color:#FF0000}
A:Hover {color:#FF0000;text-decoration:underline;}
BODY {background-color : #ffffff;}
Uma vez que todo o
documento é estruturado através de tabelas, o css deste site
é mínimo, (apenas
a colunada direita)
e contém apenas algumas definições de
links, fontes e para
os títulos.
26
http://cortex.xavierencinas.com/page/1
Esse site bastante
leve e rígidamente organizado, é construído sobre uma base
modular.
Esta é a biblioteca
visual de Xavier
Encinas, diretor e
arte e proprietário de
um estúdio de artes
visuais especializado
em mídia impressa.
Segundo definição
encontrada no link
“about”o escritório
acredita em “uma
estética tipográfica
sofisticada e uma
paixão por coisas
belas”
27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">
<!-Theme: Museum v1.3
Author: Paul Giacherio [http://paulgiacherio.com/]
For: Tumblr [http://tumblr.com/]
Terms: Free to use and alter, but please give
credit.
-->
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/
html; charset=utf-8"/>
<meta http-equiv="Content-Language"
content="en">
<meta http-equiv="Content-Script-Type"
content="text/javascript">
<meta name="Title" lang="en" content="Cortex Xavier Encinas Studio Personal Visual Library">
<meta name="Identifier-url" content="http://cortex.
xavierencinas.com">
<meta name="Description" lang="en"
content="Cortex is the personal visual library of
Vancouver based Art Director Xavier Encinas.">
<meta name="Abstract" content="Cortex is the
personal visual library of Vancouver based Art
Director Xavier Encinas.">
<meta name="keywords" lang="en"
content="cortex, blog, visual library, xavier encinas,
vancouver graphic design studio, art director">
<meta name="Date-Creation-yyyymmdd" content="20090505">
<meta name="Author" lang="en" content="Xavier
Encinas">
<meta name="Reply-to" content="hello [at]
xavierencinas [dot] com">
<meta name="Publisher" content="Xavier
Encinas">
<meta name="Copyright" content="©Copyright :
Xavier Encinas">
<meta name="Location" content="Vancouver, BC,
Canada">
<meta name="Distribution" content="Global">
<meta name="Rating" content="General">
<meta name="Robots" content="index, follow">
<meta name="Revisit-After" content="10 days">
<title>Cortex - Xavier Encinas Studio Visual
Library</title>
<style type="text/css">
*{
margin:0;
padding:0;
list-style-type:none;
text-decoration:none;}
body{
background:#fff;
font-family:Helvetica, Arial,san-serif;
font-size:12px;
color:#999;
text-align:center;}
#container{
width:auto;
margin:0 27px;
text-align:left;}
/*HEADER STYLES*/
#header{
padding:27px 0 36px 27px;
position:relative;
text-align:left;}
#header a{
color:#777;}
#header a:hover{
color:#fff;}
#header h1 a{
border:0;
font-size:17px;
line-height:18px;
text-transform:uppercase;
letter-spacing:.05em;}
#header ul li{
display:inline;}
#header ul li a{
border-bottom:0;
margin-right:11px;
line-height:18px;}
#header ul li a:hover{
border-bottom:0px}
#portrait{
width:54px;
float:left;}
/*MAIN BOXES*/
.post{
padding:10px;
float:left;
background:#fff;
margin-right:10px;
margin-bottom:10px;
position:relative;
line-height:18px;
border:1px dotted #6cfad7;}
.photo,.quote,.link,.conversation,.video,.audio,.
regular{
min-height:350px;
width:auto;}
body#index .regular,body#index .photo,body#index
.quote,body#index .link,body#index
.conversation,body#index .video,body#index
.audio,.metabox{
height:350px;
width:250px;
overflow:hidden;}
/*BIG MORE LINK AND TRICKY PNG FADE BOX
TRIGGERED BY TAGGING ANY POST WITH
'more'*/
.morewrap{
display:none;}
body#index .more .morewrap{
display:block}
.morelink{
display:block;
background:#6cfad7;
position:absolute;
top:235px;
left:0px;
padding:0 10px 0 45px;
border:0;
line-height:27px;
z-index:3000;}
.morelink:hover{
border:0;
background:#6cfad7;
color:#fff;}
.fade{
position:absolute;
bottom:10px;
height:175px;
background:url(http://www.swisslegacy.com/
shadeok.png) repeat-x left bottom;
width:250px;
display:block;
z-index:100;}
/*PERMALINK AND COMMENT COUNT
LINKS*/
.permalink, .disquscount {
border-width: 0px;
height: 11px;
line-height:11px;
position: absolute;
bottom: 10px;
right: 10px;
color:#999;
z-index:200;
display:none/*HIDE ON PERMALINK PAGES*/}
body#index .permalink, body#index .disquscount{
display:block;}
.disquscount{
right:auto;
left:10px;
color:#444;}
.permalink:hover,.disquscount:hover{
color:#6cfad7;
border:0;}
/*PHOTO STYLES*/
.photo/*PERMALINK PAGES STRETCH TO FIT
PHOTO*/{
height:auto;}
.photo .photobox a{
border:0;}
.photo img{
border:15px solid #fff;
}
.photo a:hover img{
border-color:#fff;}
body#index .photo img/*TRICK TO CENTER
THE PHOTOS IN THE VISIBLE BOX ON INDEX
PAGES*/{
left:50%;
margin-left:-50%;
border:0;}
body#index .slim .photo img{left:0;marginleft:0;}/*IF YOUR IMAGES ARE NARROW AND
OFF TO THE LEFT TAG THEM AS 'slim' AND
THEY WILL SIT TOP LEFT*/
body#index .photo .permalink/*SPECIAL PERMALINK FORMATTING FOR PHOTO PAGES*/{
position: absolute;
top: 0px;
right: 20px;
display:none;
padding:15px 7px 7px;
background:#6cfad7;
color:#FFF;
font-size:16px;}
body#index .photo:hover .permalink{
display:block;}
body#index .photo .permalink:hover{
background:#6cfad7;
border:0;}
body#index .photo .caption/*OVERLAY TRANSPARENT CAPTION AT BOTTOM OF PHOTO*/{
position:absolute;
bottom:10px;
left:10px;
background:#000;
opacity:.85;
-moz-opacity: 0.85;
filter: alpha(opacity=85);
width:250px;
padding:10px 0 10px 0;
z-index:100;}
body#index .photo .caption p{
padding:0 5px;margin:0;}
body#index .photo b{
display:block;margin-bottom:5px;}
/*REGULAR TEXT POST STYLES*/
body#index .pad{
padding-top:36px;}
/*AUDIO/VIDEO STYLES*/
.player{
padding:60px 20px;
border:1px solid #6cfad7;
background:#6cfad7;
margin:0 0 10px 18px;
float:right;}
body#index .player{
padding:60px 0 60px 20px;
margin:0 0 10px 0;
float:none;}
/*body#index .video embed,body#index .video
object{*/
/*height:auto;width:248px;margin:0;}*/
/*.video embed{margin:0 0 0 15px;}*/
.video .caption{
padding-top:10px;}
/*QUOTE STYLES*/
.quotetext{
font-size:22px;
font-family:"Adobe Calson Pro", Georgia,"Times
New Roman", serif;
font-style:italic;
line-height:24px;
padding-bottom:11px;
color:#999;
padding-top:36px;}
.source{
font-family:Helvetica, Arial;
font-size:11px;
text-align:right;
color:#999;}
/*CONVERSATION STYLES*/
.conversation ul li{
line-height:18px;
border-bottom:1px dotted #6cfad7;
padding:3px 0 3px 0px}
.conversation ul li span{
color:#ccc;}
.even{
border-bottom:1px dotted #6cfad7;}
/*GENERAL CONTENT STYLES*/
a{
color:#999;
border-bottom:1px dotted #6cfad7;
text-decoration:none;}
a:hover{
color:#6cfad7;
border-bottom:1px dotted #6cfad7;}
p{
line-height:18px;
margin-bottom:9px;}
h1,.photo strong, .photo b, .video strong, .video b,
.audio strong, .audio b{
font-weight:normal;
font-size:16px;
line-height:18px;
color:#999;}
h1{
padding:0 0 9px 0;}
h2{
font-size:12px;
font-weight:normal;
text-transform:uppercase;
color:#999;
margin:9px 0 9px 0;}
h3{
text-transform:uppercase;
font-size:10px;
color:#999;
line-height:18px;}
ol{
margin-bottom:9px;}
ol li{
list-style:decimal outside;
margin:0 0 0 20px;
padding:0 0 5px 0;}
blockquote{
margin:0 20px 9px;}
/*PAGENAVIGATION BOX STYLES*/
#navigation/*HIDDEN ON PERMALINK PAGES*/{
display:none;}
body#index #navigation{
display:block;
text-align:center;
float:left;
background:#fff;
height:370px;
width:270px;
position:relative;
border:1px dotted #6cfad7}
#pagetab{
height: 11px;
line-height:10px;
font-size:11px;
position: absolute;
top: 0px;
left: 20px;
color:#fff;
padding:15px 7px 7px;
background:#6cfad7;}
.pages{
line-height:225px;
font-size:11px;}
.pages span{
font-size:110px;
vertical-align:middle;}
.total{
color:#6cfad7;}
#navigation a{
border:1px dotted #6cfad7;
line-height:27px;
padding:5px 9px;
color:#999;}
#navigation a:hover{
background:#6cfad7;
color:#fff;}
/*FOOTER STYLES*/
#footer{
color:#999;
clear:both;
padding:40px 0;
text-align:left;
font-size:10px;
}
#footer a{
color:#999;
HTML+CSS
Observando o código
fonte deste site, conseguimos perceber
que ele é construído a partir de um
sistema já pronto, do
site tumblr.com, um
sistema dinâmico de
reunião de conteúdo,
que permite a postagem de textos, fotos,
links e mensagens
de outros sistemas, e
pode funcionar integrado com sistemas
de outros sites.
A versão utilizada
neste site, é uma
versão customizada
do tema escolhido
por ele, que possui
fundo escuro.
Podemos observar
que este código
é rico em metainformações, com
descrição de autores,
do propósito do site
e informações de copyright, entre outras.
Além disso, obeservamos que os
códigos CSS, que
definem o aspecto
gráfico do site estão
todas no próprio
código, ao invés de
reunidas em um
arquivo separado.
Isto é uma abordagem interessante
para sistemas de
geração de conteúdo, pois ele pode
ser customizável por
uma interface gráfica,
e inserido automaticamente pelo sistema em cada página,
sobrescrevendo
qualquer definição
original que tenha o
sistema.
28
border:0;}
#footer a:hover{
color:#6cfad7;}
/*META BOX LOCATED ON PERMALINK PAGES*/
body#index .meta/*HIDDEN ON INDEX PAGES*/{
display:none;}
.meta{
display:block;
float:left;
text-align:left;
background:#fff;
padding:10px;
border-top:1px dotted #6cfad7;}
.meta span{
text-transform:uppercase;
font-size:10px;
color:#999;
display:block;
line-height:19px;}
/*DISQUS STYLES*/
body#index .comments{display:none}
.comments{width:530px;}
#disqus_thread{padding-top:36px;margintop:36px;border-top:1px solid #222;}
#dsq-content #dsq-options-toggle { display: none; }
#dsq-content #dsq-extra-links { display: none; }
#dsq-content #dsq-add-new-comment{margintop:36px;}
#dsq-content #dsq-comments .dsq-comment-rate
{ display: none; }
#dsq-content #dsq-comments .dsq-commentheader{ background: #111; }
#dsq-content #dsq-comments .dsq-headermeta{color:#444;}
#dsq-content #dsq-comments ul{border:0;}
#dsq-content #dsq-comments .dsq-comment{back
ground:#111;padding:10px;}
#dsq-content #dsq-comments .dsq-commentfooter{display:none;}
/*LIVE SEARCE STYLES*/
.searchbox {
position:relative;
margin-left:280px;
width:500px;
padding:0;}
.searchbox input{
position:absolute;
top:-22px;
left:280px;
padding:2px;
font-size:13px;
width:180px;
border:1px solid #000;
border-color:#000 #2f2f2f #2f2f2f #a00;
border-width:1px 1px 1px 2px;
background:#202020;
color:#fff}
#SearchBox1results{
padding-top:18px;}
.searchmatch{
background-color:#a00;
color:#fff;}
.searchresultrow {
background:#000;
font-family:verdana;
font-size:12px;
padding:10px;
margin-top:10px;
overflow:hidden;
border:1px solid #000;
width:530px;}
.searchresultrow:hover {
cursor:pointer;
border:1px solid #222;
background:#191919;}
#header .searchresultrow a {
font-size:14px;
color:#fff;
text-decoration:none;}
.searchexcerpt {
color:#AAA;
padding:5px 0;
font-size:12px;}
.searchexcerpt span {
background:#a00;
color:#fff;}
</style>
<!--[if IE 6]>
<style type="text/css">
.post,#navigation,.meta{background:#fff;}
.photo,.quote,.link,.conversation,.video,.audio,.reg
ular{height:350px;overflow:visible;}
body#index .fade{z-index:100;position:absolute;b
ottom:8px;}
</style>
<script type="text/javascript" src="http://themes.
paulgiacherio.com/museum/supersleight-min.
js"></script>
<![endif]-->
<style type="text/css">
</style>
<script src="http://www.thisismydevsite.com"
type="text/javascript"></script>
</head>
<body id="index">
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.
protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='"
+ gaJsHost + "google-analytics.com/ga.js'
type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._
getTracker("UA-125752-12");
pageTracker._trackPageview();
} catch(err) {}</script>
<div id="header">
<!--UNCOMMENT TO INCLUDE PORTRAIT
PHOTO
<div id="portrait"><img src="http://assets.tum-
-->
HERE-->
blr.com/images/default_avatar_40.gif" alt="Cortex
- Xavier Encinas Studio Visual Library" /></div>
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
<a href="/"><img src="http://www.swisslegacy.com/header_blog.jpg" border="0"></a>
</div>
<div class="searchbox">
<script type="text/javascript">Tumblr.
searchBox()</script>
</div>
</div>
<div id="container">
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Tuesday,
June 2nd, 2009</p>
<span>caption:</span>
<div class="post ">
<div class="caption"><b><a target="_blank"
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
</div>
</div>
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.
xavierencinas.com/post/120661477/salva-lopez"
class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierencinas.com/post/120661477/salva-lopez"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img
src="http://11.media.tumblr.com/8OOxnu5
3hoig4iqb1NfbMUYNo1_500.jpg" alt="Salva
López" /></div>
</div>
href="http://en.wikipedia.org/wiki/Andreas_
Gursky">Andreas Gursky</a></b>, <i>99
cent</i><br/>1999</div>
<div class="post ">
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.
xavierencinas.com/post/116566455/hedi-slimane"
class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierenci-
nas.com/post/116566455/hedi-slimane"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img src="http://
cortex.xavierencinas.com/photo/1280/1165664
55/1/8OOxnu53ho7j4a3bTTDUujPD" alt="Hedi
Slimane" /></div>
</div>
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Tuesday,
June 9th, 2009</p>
<span>caption:</span>
<div class="caption"><a title="Link to Salva
López's photostream" href="http://www.flickr.
com/photos/senyoriguana/" target="_blank"><b
property="foaf:name">Salva López</b></a></
div>
</div>
</div>
<div class="post ">
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.xavierenci-
nas.com/post/116897484/andreas-gursky"
class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierencinas.com/post/116897484/andreas-gursky"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img src="http://
cortex.xavierencinas.com/photo/1280/11689748
4/1/8OOxnu53ho8g5vzvYJBEn4Fi" alt="Andreas
Gursky, 99 cent1999" /></div>
</div>
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Monday,
June 1st, 2009</p>
<span>caption:</span>
<div class="caption"><a target="_blank"
href="http://www.hedislimane.com/diary">Hedi
Slimane</a></div>
</div>
</div>
<div class="post ">
<div class="quote">
<div class="morewrap"><!--MOREWRAP
TRIGGERED BY TAGGING POST 'more'-->
<a href="http://cortex.xavierencinas.com/post/116556813/david-cronenberg"
class="morelink">more +</a>
<div class="fade"></div>
</div><!--END MOREWRAP-->
<div class="quotetext">
“ I see technology as being
an extension of the human body
</div>
<div class="source">— David
Cronenberg</div>
A informação CSS
aqui neste exemplo,
está dividida em
duas seções, sendo
que uma delas só é
ativada em caso de
o navegador ser internet explorer 6, um
navegador que tinha
um suporte muito
ruim para CSS.
Quando olhamos o
resultado do HTML,
que é formado através de um processamento pelo sistema,
a impressão é de
desordem total.
No entanto, esta
impressão se dá pelo
fato deste código ser
construído automaticamente a partir
de umasomatória
de pequenas partes,
e cada uma dessas
partes tem uma
identação (tabulação)
diferente, que para o
programador, é uma
forma de organizar
o código e facilitar o
seu trabalho. No entanto, quando todos
esses pedaços com
tabulações diferentes
são somados, o resultado aparente para o
HTML é um aspecto
totalmente caótico.
Apesar desse aspecto caótico, o código
desse site é totalmente estruturado a
partir de divs, o que
justamente permite
este controle total
por meio de CSS, e a
customização total da
aparência do site.
Observamos que o
código inteiro está
repleto de comentários, dispostos entre
as marcas <--- e --->
que são trechos
de código que não
aprecem na página.
esses comentários
são ferramentas
valiosas para auxiliar
a customização sem
a necessidade de se
29
<a href="http://cortex.xavierencinas.
com/post/116556813/david-cronenberg"
class="permalink">6.01.09</a>
<!--UNCOMMENT BELOW TO ENABLE
COMMENTS COUNT FOR QUOTE POSTS-->
<!--<a href="http://cortex.xavierencinas.
com/post/116556813/david-cronenberg#disqus_
thread" class="disquscount">Comments (View)</
a>-->
</div>
<!--</div>-->
<a href="http://cortex.xavierenci-
nas.com/post/116302535/grant-willing"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img src="http://
cortex.xavierencinas.com/photo/1280/11630253
5/1/8OOxnu53ho6wx8p7USQ9KK1w" alt="Grant
Willing, Grand County" /></div>
</div>
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Monday,
June 1st, 2009</p>
<span>caption:</span>
</div>
</div>
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Monday,
June 1st, 2009</p>
<span>caption:</span>
</div>
</div>
</div>
<div class="post ">
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.
xavierencinas.com/post/114915649/joyce-kim"
class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierencinas.com/
post/114915649/joyce-kim" class="permalink">+</
a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img src="http://
cortex.xavierencinas.com/photo/1280/114915649/
1/8OOxnu53ho2p83q68Q2GUjdJ" alt="Joyce Kim,
Things" /></div>
</div>
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
</div>
<div class="caption"><b><a target="_
<div class="meta"><!--METABOX APPEARS
<div class="post ">
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.
xavierencinas.com/post/116302535/grant-willing"
class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Tuesday,
May 26th, 2009</p>
<span>caption:</span>
<div class="caption"><b><a tar-
get="_blank" href="http://www.craightonberman.
com/">Craighton Berman</a></b>, <i>Coil
Lamp</i></div>
</div>
</div>
<div class="post ">
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.xavierencinas.com/post/112991036/cristian-ordonez"
class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierencinas.com/post/112991036/cristian-ordonez"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
</div>
<span>caption:</span>
</div>
</div>
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
cortex.xavierencinas.com/photo/1280/1129910
36/1/8OOxnu53hnxf5prg5F27iNrp" alt="Cristian
Ordóñez" /></div>
<div class="metabox">
<p><span>posted :</span> Monday,
June 1st, 2009</p>
blank" href="http://www.flickr.com/photos/
senyoriguana/">Salva López</a></b></div>
com/post/113492859/craighton-berman"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img src="http://
cortex.xavierencinas.com/photo/1280/11349285
9/1/8OOxnu53hnytyti1bvecEU6k" alt="Craighton
Berman, Coil Lamp" /></div>
<div class="photobox"><img src="http://
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
</div><!--CLOSE POST-->
vários trechos de
código também estão
comentados, o que
mostra que o sistema
permite uma série de
recursos a mais do
que os que aparecem
nessa versão.
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
nas.com/post/116553984/salva-lopez"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img
src="http://13.media.tumblr.com/8OOxnu53ho7i6
28ojrVTfj91o1_500.jpg" alt="Salva López"
/></div>
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierencinas.
</div>
<div class="caption"><b><a target="_
blank" href="http://grantwilling.com/">Grant
Willing</a></b>, <i>Grand County</i></div>
<a href="http://cortex.xavierenci-
perder muito tempo
no processo de decifrar o código.
<div class="post ">
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.
xavierencinas.com/post/116553984/salva-lopez"
class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<!--</div>-->
MENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.xavierencinas.com/post/113492859/craighton-berman"
class="morelink">more +</a>-->
HERE-->
</div><!--CLOSE POST-->
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Friday,
May 29th, 2009</p>
<span>caption:</span>
<div class="caption"><b><a target="_blank"
href="http://jkjkjk.net">Joyce Kim</a></b>,
<i>Things</i></div>
</div>
</div>
<div class="post ">
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
TOS- IT INTERFERES WITH CAPTION. UNCOM-
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Monday,
May 25th, 2009</p>
<span>caption:</span>
<div class="caption"><a title="Link to Cris-
tian Ordóñez's photostream" href="http://www.
flickr.com/photos/cristian_h23/" target="_blank"><b
property="foaf:name">Cristian Ordóñez</b></
a></div>
</div>
Isto é interessante
como possibilidade
de customização,
mas é um problema,
no sentido de que
todo o código comentado está sendo de
fato carregado pelo
usuário, e que pode
fazer o site ficar mais
lento e gastar mais
banda de servidor
do que é realmente
necessário.
30
</div>
<span>caption:</span>
<div class="post ">
<div class="caption"><b><a target="_blank"
href="http://www.poppydevilleneuve.com">Poppy
de Villeneuve</a></b>, <i>American Mornings</i></div>
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
</div>
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.xavierenci-
nas.com/post/111817780/torres-blancas"
class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierencinas.com/post/111817780/torres-blancas"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img
src="http://22.media.tumblr.com/8OOxnu53hntkk
qnz9WHEFWVHo1_500.jpg" alt="Francisco Javier
Sáenz de Oiza, Torres Blancas1961"
/></div>
</div>
</div>
<div class="post ">
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.xavierencinas.com/post/109696418/benjamin-bouchet"
class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierencinas.
com/post/109696418/benjamin-bouchet"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img src="http://
cortex.xavierencinas.com/photo/1280/109696418
/1/8OOxnu53hnncmfdqHse2J7J1" alt="Benjamin
Bouchet" /></div>
</div>
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Saturday,
May 23rd, 2009</p>
<span>caption:</span>
<div class="caption"><b>Francisco Javier
Sáenz de Oiza</b>, <i>Torres Blancas</
i><br/>1961</div>
</div>
</div>
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Monday,
May 18th, 2009</p>
<span>caption:</span>
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
</div>
</div>
com/post/111117094/poppy-de-villeneuve"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img src="http://
cortex.xavierencinas.com/photo/1280/111117094
/1/8OOxnu53hnrgk1jb32FNQG2O" alt="Poppy de
Villeneuve, American Mornings" /></div>
</div>
<div class="post ">
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Thursday,
May 21st, 2009</p>
<div class="post ">
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.xavierencinas.com/post/107746206/ecm-sleeves-of-desier"
class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierencinas.
com/post/107746206/ecm-sleeves-of-desier"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img src="http://
cortex.xavierencinas.com/photo/1280/1077462
06/1/8OOxnu53hnh7mfti8tLbQMI0" alt="ECM,
Sleeves of Desire, Lars Müller Publishers."
/></div>
</div>
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Thursday,
May 14th, 2009</p>
<span>caption:</span>
<div class="caption"><i><a href="http://
www.ecm-records.com" target="_blank">ECM</
a>, <a href="http://anbakoyawa.exblog.
jp/6779018/" target="_blank">Sleeves of Desire</
a></i>, <br/>Lars Müller Publishers.</div>
<!--<a href="http://cortex.
<div class="post ">
xavierencinas.com/post/107851134/won-ju-lim"
class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierencinas.com/post/107851134/won-ju-lim"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img src="http://
cortex.xavierencinas.com/photo/1280/10785113
4/1/8OOxnu53hnhi6mnxcl7BNih8" alt="Won Ju
Lim, Blue 1, 2003" /></div>
</div>
HERE-->
</div>
</div>
</div>
</div>
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
<div class="caption"><b>Won Ju Lim</
b>, <i>Blue 1</i>, 2003</div>
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<span>caption:</span>
<div class="caption"><b><a target="_blank"
href="http://benjaminbouchet.fr">Benjamin
Bouchet</a></b></div>
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierencinas.
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Thursday,
May 14th, 2009</p>
<div class="post ">
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.xavierencinas.com/post/111117094/poppy-de-villeneuve"
class="morelink">more +</a>-->
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
</div>
<div class="photo">
<!--MORELINK DISABLED FOR PHO-
TOS- IT INTERFERES WITH CAPTION. UNCOMMENT NEXT FOUR LINES IF YOU GOTTA HAVE
MORE LINK ON PHOTOS-->
<!--<div class="morewrap">-->
<!--<a href="http://cortex.xavierencinas.com/post/107344870/gerhard-richter-confrontation-1" class="morelink">more +</a>-->
<!--<div class="fade"></div>-->
<!--</div>-->
<a href="http://cortex.xavierencinas.com/
post/107344870/gerhard-richter-confrontation-1"
class="permalink">+</a><!--SPECIAL TREATMENT FOR PHOTO PERMALINK-->
<div class="photobox"><img
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
src="http://14.media.tumblr.com/8OOxnu53h
nbjz5t1eKYgmMN2o1_500.jpg" alt="Gerhard
Richter, Confrontation 1 1988, Oil on
canvas" /></div>
</div>
31
<div class="comments">
<!--PASTE DISQUS PERMALINK BLOCK
HERE-->
</div>
</div><!--CLOSE POST-->
<div class="meta"><!--METABOX APPEARS
ON PERMALINK PAGE-->
<div class="metabox">
<p><span>posted :</span> Wednesday, May 13th, 2009</p>
<span>caption:</span>
<div class="caption"><b><a
href="http://www.gerhard-richter.com/"
target="_blank">Gerhard Richter</a></b>,
<i>Confrontation 1</i> <br/>1988, Oil on
canvas</div>
</div>
</div>
<div id="navigation"><!--NAVIGATION ONLY
APPEARS ON INDEX PAGES-->
<div id="pagetab">page</div>
<div class="pages">
<span>1</span> of <span
class="total">3</span>
</div>
<a href="/page/2">Next Page +</a>
</div>
<div id="footer">
<bio>About <a href="http://www.xavierencinas.
com/" target="_blank">Xavier Encinas Studio</
a> | <a href="/rss">RSS</a> | <a href="http://
twitter.com/xencinas" target="_blank">Twitter</
a></bio>
</div>
</div><!--CLOSE CONTAINER-->
<!-- BEGIN TUMBLR CODE -->
<iframe src="http://www.tumblr.com/dashboard/iframe?src=http%3A%2F%2Fcortex.
xavierencinas.com%2Fpage%2F1"
border="0" scrolling="no" width="278"
height="25" allowTransparency="true"
frameborder="0" style="position:absolute;
z-index:1337; top:0px; right:0px; border:0px;
background-color:transparent;
overflow:hidden;" id="tumblr_controls"></
iframe><script type="text/javascript">_
qoptions={qacct:"p-19UtqE8ngoZbM"};</
script><script type="text/javascript"
src="http://edge.quantserve.com/quant.js"></
script><noscript><img src="http://pixel.
quantserve.com/pixel/p-19UtqE8ngoZbM.gif"
style="display:none; border-width:0px; height:1px;
width:1px;"/></noscript><!-- END TUMBLR CODE
--></body>
</html>
32
http://www.bitique.
co.uk/
Este site é um blog
que reúne trabalhos
de design gráfico de
vários escritórios ao
redor do mundo.
O design é, como o
dos outros selecionados, bastante minimalista, com texto
com texto pequeno,
poucas cores, a não
ser nas imagens,
e poucos e bem
medidos elementos
acessórios.
O layout também
valoriza os espaços
em branco, e de fato,
o que chama atenção
é o conteúdo do site.
Na barra lateral, uma
série de categorias,
que correspondem
a tags relacionadas
com os posts.
Além do próprio
layout do site, cabe
fazer uma observação
sobre o conteúdo
do site. Apesar de a
internet e o computador darem uma
infinidade de possibilidades de design e
linguagens gráficas,
dá para notar um certo revival da liguagem
gráfica minimalista e
estruturada da “escola suíça” pelo menos
nos meios de debate
dos profissionais de
design gráfico, como
podemos observar
em alguns desses
posts.
33
Só para fazer mais
uma observação sobre o layout do site,
apresentamos uma
versão reduzida do
site completo, onde
se pode notar mais
uma tendência atual,
em parte relacionada com a difusão
de ferramentas de
geração de conteúdo
automáticas, que dão
facilitam o aumento
do volume de informações nos sites,
em parte também
com uma mudança
no mouse, que cada
vez mais tem contado com a roda de
scroll automático.
Isto se reflete numa
tendência das páginas serem mais verticais, com o máximo
de conteúdo em uma
mesma página, mesmo que parte desse
conteúdo fique fora
do ‘fold’, que é a parte da janela que fica
visível no monitor.
O layout estruturado a parti de CSS
também facilita
essa abordagem.
Antigamente, com os
layouts baseados em
tabela, e os antigos
mouses sem disco,
a maior parte dos
layouts era restrita ao
tamnho da janela, e
muitas vezes para seguir um determinado
texto o usuário tinha
que mudar muitas
vezes de página.
34
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/
html; charset=UTF-8" />
<title>Bitique - Another Graphic Design Blog</
title>
<link rel="alternate" type="application/rss+xml"
title="bitique RSS Feed" href="http://www.bitique.
co.uk/feed" />
<link rel="pingback" href="http://www.bitique.
co.uk/xmlrpc.php" />
<link rel="shortcut icon" href="http://www.bitique.
co.uk/wp-content/themes/default/images/favicon.
png" />
<style type="text/css" media="screen">
@import url('http://www.bitique.co.uk/wpcontent/themes/default/style.css');
</style>
<script type="text/javascript" src="http://www.
bitique.co.uk/wp-content/themes/default/js/jquery.
js"></script>
<script type="text/javascript" src="http://www.
bitique.co.uk/wp-content/themes/default/js/jquery.
innerfade.js"></script>
<script type="text/javascript" src="http://www.
bitique.co.uk/wp-content/themes/default/js/jquery.
cycle.all.pack.js?v2.23"></script>
<script type="text/javascript">
<!-$(document).ready(function(){
$('#img3265').cycle({
speed:300,
timeout: 1200
}).cycle('pause');
$('#img3265').hover(function() {
$('#img3265').cycle('resume');
},function() {
$('#img3265').cycle('pause');
});
$('#img3257').cycle({
speed:300,
timeout: 1200
}).cycle('pause');
$('#img3257').hover(function() {
$('#img3257').cycle('resume');
},function() {
$('#img3257').cycle('pause');
});
$('#img3250').cycle({
speed:300,
timeout: 1200
}).cycle('pause');
$('#img3250').hover(function() {
$('#img3250').cycle('resume');
},function() {
$('#img3250').cycle('pause');
});
$('#img3242').cycle({
speed:300,
timeout: 1200
}).cycle('pause');
$('#img3242').hover(function() {
$('#img3242').cycle('resume');
},function() {
$('#img3242').cycle('pause');
});
$('#img3234').cycle({
speed:300,
timeout: 1200
}).cycle('pause');
$('#img3234').hover(function() {
$('#img3234').cycle('resume');
},function() {
$('#img3234').cycle('pause');
});
$('#img3225').cycle({
speed:300,
timeout: 1200
}).cycle('pause');
$('#img3225').hover(function() {
$('#img3225').cycle('resume');
},function() {
$('#img3225').cycle('pause');
});
$('#img3209').cycle({
speed:300,
timeout: 1200
}).cycle('pause');
$('#img3209').hover(function() {
$('#img3209').cycle('resume');
},function() {
$('#img3209').cycle('pause');
});
$('#img3214').cycle({
speed:300,
timeout: 1200
}).cycle('pause');
$('#img3214').hover(function() {
$('#img3214').cycle('resume');
},function() {
$('#img3214').cycle('pause');
});
$('#img3202').cycle({
speed:300,
timeout: 1200
}).cycle('pause');
$('#img3202').hover(function() {
$('#img3202').cycle('resume');
},function() {
$('#img3202').cycle('pause');
});
$('#img3197').cycle({
speed:300,
timeout: 1200
}).cycle('pause');
$('#img3197').hover(function() {
$('#img3197').cycle('resume');
},function() {
$('#img3197').cycle('pause');
});
});
-->
</script>
<link rel="EditURI" type="application/rsd+xml"
title="RSD" href="http://www.bitique.co.uk/xmlrpc.
php?rsd" />
<link rel="wlwmanifest" type="application/
wlwmanifest+xml" href="http://www.bitique.co.uk/
wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress
2.7" />
<!-- all in one seo pack 1.4.6.15 [300,314] -->
<meta name="description" content="Simply a
showcase blog for the best graphic design around
- whether contemporary or retrospective. A daily
digest of progressive graphic design to inspire." />
<meta name="keywords" content="graphic design
blog,design blog,design inspiration,design help" />
<!-- /all in one seo pack -->
</head>
<body>
<div id="container">
<div id="header">
<div id="logo"><a href="http://www.bitique.
co.uk"><img src="http://www.bitique.co.uk/wpcontent/themes/default/images/bitique_logo.gif"
alt="Bitique" /></a></div>
</div>
<ul id="navbar">
<li class="categories"><h3>Categor
ies</h3><ul> <li class="cat-item cat-item6"><a href="http://www.bitique.co.uk/category/agencies" title="View all posts filed under
Agencies">Agencies</a>
</li>
<li class="cat-item cat-item-8"><a
href="http://www.bitique.co.uk/category/announcement" title="View all posts filed under
Announcement">Announcement</a>
</li>
<li class="cat-item cat-item-26"><a href="http://
www.bitique.co.uk/category/art" title="View all
posts filed under Art">Art</a>
</li>
<li class="cat-item cat-item-38"><a href="http://
www.bitique.co.uk/category/artist" title="View all
posts filed under Artist">Artist</a>
</li>
<li class="cat-item cat-item-7"><a href="http://
www.bitique.co.uk/category/books" title="View all
posts filed under Books">Books</a>
</li>
<li class="cat-item cat-item-12"><a href="http://
www.bitique.co.uk/category/branding" title="View
all posts filed under Branding">Branding</a>
</li>
<li class="cat-item cat-item-25"><a
href="http://www.bitique.co.uk/category/
competitions" title="View all posts filed under
Competitions">Competitions</a>
</li>
<li class="cat-item cat-item-10"><a href="http://
www.bitique.co.uk/category/designers" title="View
all posts filed under Designers">Designers</a>
</li>
<li class="cat-item cat-item-14"><a href="http://
www.bitique.co.uk/category/editorial" title="View
all posts filed under Editorial">Editorial</a>
</li>
<li class="cat-item cat-item-24"><a
href="http://www.bitique.co.uk/category/
exhibitions" title="View all posts filed under
Exhibitions">Exhibitions</a>
</li>
<li class="cat-item cat-item-13"><a href="http://
www.bitique.co.uk/category/fashion" title="View all
posts filed under Fashion">Fashion</a>
</li>
<li class="cat-item cat-item-16"><a href="http://
www.bitique.co.uk/category/favourite-pieces"
title="View all posts filed under Favourite
pieces">Favourite pieces</a>
</li>
<li class="cat-item cat-item-27"><a href="http://
www.bitique.co.uk/category/fun" title="View all
posts filed under Fun">Fun</a>
</li>
<li class="cat-item cat-item-43"><a href="http://
www.bitique.co.uk/category/furniture" title="View
all posts filed under Furniture">Furniture</a>
</li>
<li class="cat-item cat-item-35"><a
href="http://www.bitique.co.uk/category/goodcauses" title="View all posts filed under Good
causes">Good causes</a>
</li>
<li class="cat-item cat-item-19"><a href="http://
www.bitique.co.uk/category/graduates" title="View
all posts filed under Graduates">Graduates</a>
</li>
HTML
<li class="cat-item cat-item-9"><a href="http://
www.bitique.co.uk/category/graphic-design"
title="View all posts filed under Graphic
Design">Graphic Design</a>
</li>
<li class="cat-item cat-item-28"><a
href="http://www.bitique.co.uk/category/
illustration" title="View all posts filed under
Illustration">Illustration</a>
</li>
<li class="cat-item cat-item-20"><a
href="http://www.bitique.co.uk/category/
infographics" title="View all posts filed under
Infographics">Infographics</a>
</li>
<li class="cat-item cat-item-37"><a
href="http://www.bitique.co.uk/category/
installations" title="View all posts filed under
Installations">Installations</a>
</li>
<li class="cat-item cat-item-21"><a href="http://
www.bitique.co.uk/category/legends" title="View
all posts filed under Legends">Legends</a>
</li>
<li class="cat-item cat-item-15"><a
href="http://www.bitique.co.uk/category/
magazines" title="View all posts filed under
Magazines">Magazines</a>
</li>
<li class="cat-item cat-item-32"><a href="http://
www.bitique.co.uk/category/packaging" title="View
all posts filed under Packaging">Packaging</a>
</li>
<li class="cat-item cat-item-22"><a href="http://
www.bitique.co.uk/category/personal" title="View
all posts filed under Personal">Personal</a>
</li>
<li class="cat-item cat-item-18"><a
href="http://www.bitique.co.uk/category/
photography" title="View all posts filed under
Photography">Photography</a>
</li>
<li class="cat-item cat-item-11"><a href="http://
www.bitique.co.uk/category/portfolios" title="View
all posts filed under Portfolios">Portfolios</a>
</li>
<li class="cat-item cat-item-36"><a href="http://
www.bitique.co.uk/category/posters" title="View
all posts filed under Posters">Posters</a>
</li>
<li class="cat-item cat-item-39"><a href="http://
www.bitique.co.uk/category/product-design"
title="View all posts filed under Product
Design">Product Design</a>
</li>
<li class="cat-item cat-item-29"><a href="http://
www.bitique.co.uk/category/resources" title="View
all posts filed under Resources">Resources</a>
</li>
<li class="cat-item cat-item-23"><a href="http://
www.bitique.co.uk/category/shopping" title="View
all posts filed under Shopping">Shopping</a>
</li>
<li class="cat-item cat-item-34"><a href="http://
www.bitique.co.uk/category/software" title="View
all posts filed under Software">Software</a>
</li>
<li class="cat-item cat-item-33"><a href="http://
www.bitique.co.uk/category/students" title="View
all posts filed under Students">Students</a>
</li>
<li class="cat-item cat-item-17"><a href="http://
www.bitique.co.uk/category/studios" title="View all
posts filed under Studios">Studios</a>
</li>
<li class="cat-item cat-item-30"><a href="http://
www.bitique.co.uk/category/twaddle" title="View
all posts filed under Twaddle">Twaddle</a>
</li>
<li class="cat-item cat-item-40"><a
href="http://www.bitique.co.uk/category/typefoundry" title="View all posts filed under Type
Foundry">Type Foundry</a>
</li>
<li class="cat-item cat-item-31"><a href="http://
www.bitique.co.uk/category/web-design"
title="View all posts filed under Web design">Web
design</a>
</li>
</ul></li> <li><h3>Archive</h3>
<ul>
<li><a href='http://www.bitique.
co.uk/2009/06' title='June 2009'>June 2009</
a></li>
<li><a href='http://www.bitique.co.uk/2009/05'
title='May 2009'>May 2009</a></li>
<li><a href='http://www.bitique.co.uk/2009/04'
title='April 2009'>April 2009</a></li>
<li><a href='http://www.bitique.co.uk/2009/03'
title='March 2009'>March 2009</a></li>
<li><a href='http://www.bitique.co.uk/2009/02'
title='February 2009'>February 2009</a></li>
Observando o código-fonte desse site,
podemos ver que ele
é feito com base no
segundo sistema de
gerenciamento mais
popular do mundo,
segundo a google
trends, ficando atrás
apenas do Joomla, o
Wordpress.
O Wordpress é um
CMS voltado para
a criação de blogs,
e neste nicho, é o
mais importante no
mundo, sendo usado
por 34% de todos os
blogs do mundo listados pelo Technorati,
um mecanismo de
busca especializado
em blogs.
Entre os fatores que
tornam esse sistema
tão popular estão a
grande possibilidade
de customização e
e a grande oferta de
plugins, além de ser
um sistema gratuito
e open-source, que
pode ser modificado
leivremente e completamente estudado
por qualquer um.
Apesar de ser um
sistema automático
de publicação, o
código gerado pelo
wordpress, pelo menos neste template,
é bem mais organizado que o código
do tumblr, que vimos
anteriormente.
Como esse site é
baseado em imagens, principalmente,
a quantidade de
código em relação à
quantidade de texto é
grande.
35
<li><a href='http://www.bitique.co.uk/2009/01'
title='January 2009'>January 2009</a></li>
<li><a href='http://www.bitique.co.uk/2008/12'
title='December 2008'>December 2008</a></
li>
</ul>
</li>
<li id="linkcat-" class="linkcat"><h2><h3>Frien
ds</h3></h2>
<ul class='xoxo blogroll'>
<li><a href="http://www.wearebuild.com/blog/"
rel="friend" onclick="javascript:pageTracker._trackPageview('/outbound/blogroll/www.wearebuild.
com');" target="_blank">Build</a></li>
<li><a href="http://www.charactercreative.
co.uk" rel="friend" onclick="javascript:pageTrack
er._trackPageview('/outbound/blogroll/www.charactercreative.co.uk');" target="_blank">Character
Creative</a></li>
<li><a href="http://www.designassembly.org/"
rel="friend" onclick="javascript:pageTracker._trackPageview('/outbound/blogroll/www.designassembly.org');" target="_blank">Design Assembly</
a></li>
<li><a href="http://effektiveblog.com/" rel="friend"
onclick="javascript:pageTracker._trackPageview('/
outbound/blogroll/effektiveblog.com');" target="_
blank">EffektiveBlog</a></li>
<li><a href="http://www.formfiftyfive.com/"
rel="friend" onclick="javascript:pageTracker._trackPageview('/outbound/blogroll/www.formfiftyfive.
com');" target="_blank">FormFiftyFive</a></li>
<li><a href="http://www.grafikcache.com"
rel="friend" onclick="javascript:pageTracker._trackPageview('/outbound/blogroll/www.grafikcache.
com');" target="_blank">Grafik Cache</a></li>
<li><a href="http://www.septemberindustry.co.uk"
rel="friend" onclick="javascript:pageTracker._trackPageview('/outbound/blogroll/www.septemberindustry.co.uk');" target="_blank">September
Industry</a></li>
<li><a href="http://www.swisslegacy.com/"
rel="friend" onclick="javascript:pageTracker._trackPageview('/outbound/blogroll/www.swisslegacy.
com');" target="_blank">Swiss Legacy</a></li>
<li><a href="http://www.grafikcache.com/thedirectory.html" rel="friend" onclick="javascript:page
Tracker._trackPageview('/outbound/blogroll/www.
grafikcache.com');">The Directory</a></li>
<li><a href="http://www.visuelle.co.uk/"
rel="friend" onclick="javascript:pageTracker._trackPageview('/outbound/blogroll/www.visuelle.
co.uk');" target="_blank">Visuelle</a></li>
</ul>
</li>
<li><h3>Etc</h3>
<ul>
<li><a href="http://twitter.com/
bitique">Twitter</a></li>
<li><a href="http://www.bitique.co.uk/
feed">RSS</a></li>
<li><a href="mailto:submit@bitique.
co.uk&Subject=I visited bitique and would like to
submit...">Submit Work</a></li>
<li><a href="mailto:hello@bitique.
co.uk&Subject=I visited bitique and would like to
say...">Contact</a></li>
</ul>
</li>
</ul><div id="main">
<div id="3265" class="post">
<div class="post-left">
<h2><a href="http://www.bitique.co.uk/
round/2009/06/11">Round</a></h2>
<div class="cats"><a href="http://
www.bitique.co.uk/category/designers"
title="View all posts in Designers" rel="category
tag">Designers</a> <a href="http://www.
bitique.co.uk/category/graphic-design" title="View
all posts in Graphic Design" rel="category
tag">Graphic Design</a> <a href="http://www.
bitique.co.uk/category/portfolios" title="View all
posts in Portfolios" rel="category tag">Portfolios</
a></div>
<div class="post-content">
<p>Round are an Australian studio
based in Melbourne with a cracking portfolio
of print and web projects.</p>
<p>Check it–</p>
<p><a href="http://www.round.com.au/" oncl
ick="javascript:pageTracker._trackPageview('/
outbound/article/www.round.com.au');" target="_
blank">www.round.com.au</a></p>
</div>
</div>
<div id="img3265" class="post-image"><img
class="alignnone size-full wp-image-3266"
title="round_1" src="http://www.bitique.co.uk/
wp-content/uploads/round_1.jpg" alt="round_1"
width="480" height="354" /><img class="alignnone
size-full wp-image-3267" title="round_2"
src="http://www.bitique.co.uk/wp-content/
uploads/round_2.jpg" alt="round_2" width="480"
height="354" /><img class="alignnone size-full
wp-image-3268" title="round_3" src="http://www.
bitique.co.uk/wp-content/uploads/round_3.jpg"
alt="round_3" width="480" height="354" /></div>
<div class="post-author">11th June 2009</
div>
</div>
<div id="3257" class="post">
<div class="post-left">
<h2><a href="http://www.bitique.co.uk/
cody-halton/2009/06/11">Cody Halton</a></h2>
<div class="cats"><a href="http://
www.bitique.co.uk/category/designers"
title="View all posts in Designers" rel="category
tag">Designers</a> <a href="http://www.
bitique.co.uk/category/graphic-design" title="View
all posts in Graphic Design" rel="category
tag">Graphic Design</a> <a href="http://www.
bitique.co.uk/category/portfolios" title="View all
posts in Portfolios" rel="category tag">Portfolios</
a></div>
<div class="post-content">
<p>Some very nice print pieces
from Austin, Texas based designer Cody
Halton.</p>
<p>Check it–</p>
<p><a href="http://www.codyhaltom.com/" on
click="javascript:pageTracker._trackPageview('/
outbound/article/www.codyhaltom.com');"
target="_blank">www.codyhaltom.com</a></p>
</div>
</div>
<div id="img3257" class="post-image"><img
class="alignnone size-full wp-image-3258"
title="codyhalton_1" src="http://www.bitique.
co.uk/wp-content/uploads/codyhalton_1.jpg"
alt="codyhalton_1" width="480" height="354"
/><img class="alignnone size-full wp-image-3259"
title="codyhalton_2" src="http://www.bitique.
co.uk/wp-content/uploads/codyhalton_2.jpg"
alt="codyhalton_2" width="480" height="354"
/><img class="alignnone size-full wp-image-3260"
title="codyhalton_3" src="http://www.bitique.
co.uk/wp-content/uploads/codyhalton_3.jpg"
alt="codyhalton_3" width="480" height="354" /></
div>
<div class="post-author">11th June 2009</
div>
</div>
<div id="3250" class="post">
<div class="post-left">
<h2><a href="http://www.bitique.co.uk/
campbell-hay/2009/06/11">Campbell Hay</
a></h2>
<div class="cats"><a href="http://www.
bitique.co.uk/category/graphic-design" title="View
all posts in Graphic Design" rel="category
tag">Graphic Design</a> <a href="http://www.
bitique.co.uk/category/portfolios" title="View all
posts in Portfolios" rel="category tag">Portfolios</
a> <a href="http://www.bitique.co.uk/category/studios" title="View all posts in Studios"
rel="category tag">Studios</a></div>
<div class="post-content">
<p>A cracking portfolio of print
and web projects here from London studio
Campbell Hay. Not only do they produce great
work but they also have great taste in design
blogs – I hope this makes the morning coffee
taste even better chaps!</p>
<p>Check it–</p>
<p><a href="http://www.campbellhay.com/" oncl
ick="javascript:pageTracker._trackPageview('/outbound/article/www.campbellhay.com');" target="_
blank">www.campbellhay.com</a></p>
</div>
</div>
<div id="img3250" class="post-image"><img
class="alignnone size-full wp-image-3251"
title="campbellhay_1" src="http://www.bitique.
co.uk/wp-content/uploads/campbellhay_1.jpg"
alt="campbellhay_1" width="480" height="354"
/><img class="alignnone size-full wp-image-3252"
title="campbellhay_2" src="http://www.bitique.
co.uk/wp-content/uploads/campbellhay_2.jpg"
alt="campbellhay_2" width="480" height="354"
/><img class="alignnone size-full wp-image-3253"
title="campbellhay_3" src="http://www.bitique.
co.uk/wp-content/uploads/campbellhay_3.jpg"
alt="campbellhay_3" width="480" height="354"
/></div>
<div class="post-author">11th June 2009</
div>
</div>
<div id="3242" class="post">
<div class="post-left">
<h2><a href="http://www.bitique.co.uk/
young/2009/06/10">Young</a></h2>
<div class="cats"><a href="http://www.
bitique.co.uk/category/graphic-design" title="View
all posts in Graphic Design" rel="category
tag">Graphic Design</a> <a href="http://www.
bitique.co.uk/category/portfolios" title="View all
posts in Portfolios" rel="category tag">Portfolios</
a> <a href="http://www.bitique.co.uk/category/studios" title="View all posts in Studios"
rel="category tag">Studios</a></div>
<div class="post-content">
<p>I’m ashamed to say
I’d not heard of these chaps until
today – cheers Grafikcache! – especially as
they are from Manchester. Absolutely stunning work!</p>
<p>Check it–</p>
<p><a href="http://www.weareyoung.co.uk" target="_blank">www.weareyoung.co.uk</a></p>
</div>
</div>
<div id="img3242" class="post-image"><img
class="alignnone size-full wp-image-3243"
title="young_1" src="http://www.bitique.co.uk/
wp-content/uploads/young_1.jpg" alt="young_1"
width="480" height="354" /><img class="alignnone
size-full wp-image-3244" title="young_2"
src="http://www.bitique.co.uk/wp-content/
uploads/young_2.jpg" alt="young_2" width="480"
height="354" /><img class="alignnone size-full
wp-image-3245" title="young_3" src="http://www.
bitique.co.uk/wp-content/uploads/young_3.jpg"
alt="young_3" width="480" height="354" /></div>
<div class="post-author">10th June 2009</
div>
</div>
<div id="3234" class="post">
<div class="post-left">
<h2><a href="http://www.bitique.co.uk/
ingrid-siliakus/2009/06/10">Ingrid Siliakus</
a></h2>
<div class="cats"><a href="http://
www.bitique.co.uk/category/designers"
title="View all posts in Designers" rel="category
tag">Designers</a> <a href="http://www.
bitique.co.uk/category/portfolios" title="View all
posts in Portfolios" rel="category tag">Portfolios</
a></div>
<div class="post-content">
<p>If any of you were blown away
by the Camp Nou poster – by Alvin Chan –
featured here a while back then prepare to
have your socks blown off by the work of
Ingrid Siliakus – the lady behind the complex
structure.</p>
<p>Check it–</p>
<p><a href="http://www.ingrid-siliakus.exto.org/"
onclick="javascript:pageTracker._trackPageview('/
outbound/article/www.ingrid-siliakus.exto.org');"
target="_blank">www.ingrid-siliakus.exto.org</
a></p>
</div>
</div>
<div id="img3234" class="post-image"><img
class="alignnone size-full wp-image-3235"
title="ingrid_1" src="http://www.bitique.co.uk/
wp-content/uploads/ingrid_1.jpg" alt="ingrid_1"
width="480" height="354" /><img class="alignnone
size-full wp-image-3236" title="ingrid_2" src="http://
www.bitique.co.uk/wp-content/uploads/ingrid_2.
jpg" alt="ingrid_2" width="480" height="354"
/><img class="alignnone size-full wp-image-3237"
title="ingrid_3" src="http://www.bitique.co.uk/
wp-content/uploads/ingrid_3.jpg" alt="ingrid_3"
width="480" height="354" /></div>
<div class="post-author">10th June 2009</
div>
</div>
<div id="3225" class="post">
<div class="post-left">
<h2><a href="http://www.bitique.co.uk/
huda-abdul-aziz/2009/06/09">Huda Abdul Aziz</
a></h2>
<div class="cats"><a href="http://
www.bitique.co.uk/category/graduates"
title="View all posts in Graduates" rel="category
tag">Graduates</a> <a href="http://www.
bitique.co.uk/category/graphic-design" title="View
all posts in Graphic Design" rel="category
tag">Graphic Design</a> <a href="http://www.
bitique.co.uk/category/portfolios" title="View all
posts in Portfolios" rel="category tag">Portfolios</
a></div>
<div class="post-content">
<p>I really like this project by Huda
Abdul Aziz - a 3rd year student at Falmouth
who is showing lots of potential in her
portfolio.</p>
<p>Check it–</p>
<p><a href="http://www.hudauploaded.com/" onc
lick="javascript:pageTracker._trackPageview('/outbound/article/www.hudauploaded.com');" target="_
blank">www.hudauploaded.com</a></p>
</div>
</div>
<div id="img3225" class="post-image"><img
class="alignnone size-full wp-image-3226"
title="huda_1" src="http://www.bitique.co.uk/
wp-content/uploads/huda_1.jpg" alt="huda_1"
width="480" height="354" /><img class="alignnone
size-full wp-image-3228" title="huda_2" src="http://
www.bitique.co.uk/wp-content/uploads/huda_2.
jpg" alt="huda_2" width="480" height="354"
/><img class="alignnone size-full wp-image-3229"
title="huda_3" src="http://www.bitique.co.uk/
wp-content/uploads/huda_3.jpg" alt="huda_3"
width="480" height="354" /></div>
<div class="post-author">9th June 2009</
div>
</div>
<div id="3209" class="post">
<div class="post-left">
<h2><a href="http://www.bitique.co.uk/
counter-print/2009/06/09">Counter Print</a></
h2>
<div class="cats"><a href="http://
www.bitique.co.uk/category/art" title="View all
posts in Art" rel="category tag">Art</a> <a
href="http://www.bitique.co.uk/category/graphicdesign" title="View all posts in Graphic Design"
rel="category tag">Graphic Design</a> <a
href="http://www.bitique.co.uk/category/shopping"
title="View all posts in Shopping" rel="category
tag">Shopping</a></div>
<div class="post-content">
<p>Counter Print is a site dedicated
to the promotion and sale of rare and beautiful
art and design related material.</p>
<p>Check it–</p>
<p><a href="http://www.counter-print.co.uk/" target="_blank">www.counter-print.co.uk</a></p>
</div>
</div>
<div id="img3209" class="post-image"><img
Conseguimos notar
também, que este
código é bastante
correto do ponto de
vista semântico, com
marcações de lista
aonde há uma lista,
com marcações de título aonde existe um
título, e de parágrafo,
aonde tem parágrafo, tudo separado e
estruturado por uma
série de divs devidamente classificadas.
36
class="alignnone size-full wp-image-3221"
title="counterprint1" src="http://www.bitique.
co.uk/wp-content/uploads/counterprint1.jpg"
alt="counterprint1" width="480" height="354"
/></div>
<div class="post-author">9th June 2009</
div>
</div>
<div id="3214" class="post">
<div class="post-left">
<h2><a href="http://www.bitique.co.uk/
mark-adamson/2009/06/09">Mark Adamson</
a></h2>
<div class="cats"><a href="http://
www.bitique.co.uk/category/graduates"
title="View all posts in Graduates" rel="category
tag">Graduates</a> <a href="http://www.
bitique.co.uk/category/graphic-design" title="View
all posts in Graphic Design" rel="category
tag">Graphic Design</a> <a href="http://www.
bitique.co.uk/category/portfolios" title="View all
posts in Portfolios" rel="category tag">Portfolios</
a></div>
<div class="post-content">
<p>Some superb work from
University of Cumbria 3rd year student Mark
Adamson. The level of execution is very
mature for one so young!</p>
<p>Check it–</p>
<p><a href="http://www.maaku87.co.uk/" target="_blank">www.maaku87.co.uk</a></p>
</div>
</div>
<div id="img3214" class="post-image"><img
class="alignnone size-full wp-image-3215"
title="mark_adamson_1" src="http://www.bitique.
co.uk/wp-content/uploads/mark_adamson_1.jpg"
alt="mark_adamson_1" width="480" height="354"
/><img class="alignnone size-full wp-image-3216"
title="mark_adamson_2" src="http://www.bitique.
co.uk/wp-content/uploads/mark_adamson_2.jpg"
alt="mark_adamson_2" width="480" height="354"
/><img class="alignnone size-full wp-image-3217"
title="mark_adamson_3" src="http://www.bitique.
co.uk/wp-content/uploads/mark_adamson_3.jpg"
alt="mark_adamson_3" width="480" height="354"
/></div>
<div class="post-author">9th June 2009</
div>
</div>
<div id="3202" class="post">
<div class="post-left">
<h2><a href="http://www.bitique.co.uk/
jamie-conkleton-2/2009/06/08">Jamie Conkleton</a></h2>
<div class="cats"><a href="http://
www.bitique.co.uk/category/designers"
title="View all posts in Designers" rel="category
tag">Designers</a> <a href="http://www.
bitique.co.uk/category/graduates" title="View
all posts in Graduates" rel="category
tag">Graduates</a> <a href="http://www.
bitique.co.uk/category/graphic-design" title="View
all posts in Graphic Design" rel="category
tag">Graphic Design</a> <a href="http://www.
bitique.co.uk/category/portfolios" title="View all
posts in Portfolios" rel="category tag">Portfolios</
a></div>
<div class="post-content">
<p>Jamie is a recent graduate of
Falmouth University who is looking to move to
London in early July in search of employment
and placements.</p>
<p>He’s updated since we last fea-
tured him – I particularly like the Black &
White Biycyle Company work.</p>
<p>Check it–</p>
<p><a href="http://www.conkleton.co.uk/" target="_blank">www.conkleton.co.uk</a></p>
</div>
</div>
<div id="img3202" class="post-image"><img
class="alignnone size-full wp-image-3203"
title="conkleton_0609_1" src="http://www.bitique.
co.uk/wp-content/uploads/conkleton_0609_1.jpg"
alt="conkleton_0609_1" width="480" height="354"
/><img class="alignnone size-full wp-image-3204"
title="conkleton_0609_2" src="http://www.bitique.
co.uk/wp-content/uploads/conkleton_0609_2.jpg"
alt="conkleton_0609_2" width="480" height="354"
/><img class="alignnone size-full wp-image-3205"
title="conkleton_0609_3" src="http://www.bitique.
co.uk/wp-content/uploads/conkleton_0609_3.jpg"
alt="conkleton_0609_3" width="480" height="354"
/></div>
<div class="post-author">8th June 2009</
div>
</div>
<div id="3197" class="post">
<div class="post-left">
<h2><a href="http://www.bitique.co.uk/
in-an-expression/2009/06/08">In An Expression</
a></h2>
<div class="cats"><a href="http://
www.bitique.co.uk/category/exhibitions"
title="View all posts in Exhibitions" rel="category
tag">Exhibitions</a> <a href="http://www.
bitique.co.uk/category/graphic-design" title="View
all posts in Graphic Design" rel="category
tag">Graphic Design</a></div>
<div class="post-content">
<p>In An Expression Of The Inex-
pressible is a contemporary graphic design
exhibition being held at the Dean Johnson
Gallery in Indianapolis – why not check it out if
you’re over that way!</p>
<p><a href="http://www.inanexpression.com/" on
click="javascript:pageTracker._trackPageview('/
outbound/article/www.inanexpression.com');"
target="_blank">www.inanexpression.com</
a></p>
</div>
</div>
<div id="img3197" class="post-image"><img
class="alignnone size-full wp-image-3198"
title="inanexpression_4" src="http://www.bitique.
co.uk/wp-content/uploads/inanexpression_4.jpg"
alt="inanexpression_4" width="480" height="354"
/></div>
<div class="post-author">8th June 2009</
div>
</div>
<div id="footer">
<div id="footnav">
<div id="older"><a href="http://www.
bitique.co.uk/page/2" >Older</a></div>
<div id="newer"></div>
</div>
</div>
<!-- Google Analytics for WordPress | http://
yoast.com/wordpress/google-analytics/ -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript
src='" + gaJsHost + "google-analytics.
com/ga.js' type='text/javascript'%3E%3C/
script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._
getTracker("UA-4113699-2");
</script>
<script type="text/javascript">
pageTracker._initData();
pageTracker._trackPageview();
</script>
<!-- End of Google Analytics code -->
</div>
</div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.
protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='"
+ gaJsHost + "google-analytics.com/ga.js'
type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._
getTracker("UA-4113699-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
/*
Theme Name: Bitique
Theme URI: http://www.bitique.co.uk/
Description: We made this
Version: 1.0
Author: Ben Palmer
Author URI: http://www.cheepindustries.com/
Tags: modernist, custom header, fixed width, two
columns
CSS
Bitique v1.0
http://www.cheepindustries.com
This theme was designed and built by Ben
Palmer & Neil Ramsbottom,
whose blog you will find at http://binarybonsai.
com/
The CSS, XHTML and design is released under
GPL:
http://www.opensource.org/licenses/gpl-license.
php
*/
body { margin-top:50px; margin-left:10px; fontfamily:Arial, Helvetica, sans-serif; }
#container { }
#header { margin-left:140px; width:170px; paddingbottom:30px; border-bottom:10px solid black;
margin-bottom:20px; }
#logo { height:80px; border-bottom:1px solid
#ccc; }
a { outline:none; }
#logo img { border:0; }
ul#navbar { margin:0; padding:0; list-styletype:none; width:140px; float:left; }
#navbar h3 { font-size:.7em; margin:0 0
10px 0; font-weight:normal; color:#ccc;
background:url('http://www.bitique.co.uk/wpcontent/themes/default/images/dash_grey.gif')
no-repeat; padding-top:3px; }
#navbar ul { margin:0; padding:0; list-styletype:none; margin-bottom:40px; }
#navbar li a { font-size:.7em; text-decoration:none;
color:#ccc; display:block; width:130px; }
#navbar li a:hover { color:#fff; backgroundcolor:#ccc; }
#main { position:absolute; left:150px; width:672px;
}
#footer { float:left; width:672px; marginbottom:100px; }
#footnav { width:170px; background-color:#000;
float:left; }
#older { width:85px; float:left; }
#newer { width:85px; float:right; }
#older a { width:85px; color:#fff; textdecoration:none; display:block; backgroundcolor:#000; font-size:.7em; height:12px; }
#newer a { width:85px; color:#fff; textdecoration:none; display:block; backgroundcolor:#000; font-size:.7em; text-align:right;
height:12px; }
#older a:hover { background-color:#F00; }
#newer a:hover { background-color:#f00; }
#footnumbers { float:left; font-size:.7em; marginleft:20px; }
#footnumbers a { color:#000; }
#footnumbers a:hover { color:#fff; backgroundcolor:#000; text-decoration:none; }
h1 { background-color:#f00; font-size:.7em;
color:#fff; margin-bottom:40px; fontweight:normal; padding-top:3px; width:672px; }
.post { height:354px; width:672px; paddingbottom:20px; border-bottom:1px solid #ccc;
margin-bottom:40px; }
.post-left { float:left; width:170px; }
.post-image { float:left; margin-left:20px;
width:480px; height:354px; overflow:hidden;
cursor:pointer; }
.post-author { float:left; font-size:.7em; color:#fff;
background-color:#ccc; margin-top:-12px;
width:170px; height:12px; }
.bookmarks { width:672px; text-align:right; margintop:-30px; }
.bookmarks a { }
.bookmarks a img { border:0; outline:none; }
.post h2 { font-size:.7em; margin:0; color:#000; }
.post h2 a { color:#000; text-decoration:none;
display:block; width:170px; background:url('http://
www.bitique.co.uk/wp-content/themes/default/images/dash_black.gif') no-repeat; padding-top:3px; }
.post h2 a:hover { color:#fff; backgroundcolor:#000; }
.post-content a { margin:0; color:#f00;
background:url('http://www.bitique.co.uk/
wp-content/themes/default/images/dash_red.
gif') no-repeat; padding-top:3px; display:block;
width:170px; }
.post-content a:hover { color:#fff; backgroundcolor:#f00; text-decoration:none; }
.post-content p { font-size:.7em; margin:0 0 10px
0; }
.cats { margin-bottom:10px; }
.cats a { font-size:.7em; color:#000; }
.cats a:hover { color:#999; }
O código de estilo
desse site se autodenomina modernista, e os autores são
os próprios autores
do blog/site. É disponibilizado sob licensa
GPL, que significa
que pode ser copiado
e utilizado por qualquer um que deseje.
De fato, a quantidade de código é bem
pequena, com uma
declaração geral para
todas as fontes do
site, e algumas definições específicas
de largura e posicionamento das divs,
cabendo somente em
uma coluna.
37
http://www.septemberindustry.co.uk/
O septemberindustry
também é um blog
sobre design gráfico,
apesar de se intitular
“journal”.
Também tem um
design minimalista,
mas o layout é bem
diferente do bitique,
que apresentamos
anteriormente.
O menu fica à direita,
e exite um post
sempre em destaque em relação aos
outros. o nome dos
autores fica colocado
em uma barra semitransparente e existe
um pequeno link
indicando o número
de comentários que
cada post recebeu.
Aqui, como no
bitique, o detaque
é todo para as
imagens, e o site
propriamente dito é
bastante discreto.
Em baixo, uma lista
com categorias (tags)
organiza o conteúdo
do site.
38
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML
1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head profile=”http://gmpg.org/xfn/11”>
<meta http-equiv=”Content-Type” content=”text/
html; charset=UTF-8” />
<title>SeptemberIndustry</title>
<meta name=”description”
content=”SeptemberIndustry is an online graphic
design journal/resource that showcases the best
in international graphic design, communication
and photography every week.” />
<meta name=”keywords” content=”September
Industry,Design,Graphic,Designer,Consultancy,A
gency,Creative,Designers,Brand,Identity,Septem
ber,Industry,David,Corti,Design Industry,Design
Resource,Resources,Photography” />
<link rel=”stylesheet” href=”http://www.septemberindustry.co.uk/wp-content/themes/unstandard/style.css” type=”text/css” media=”screen” />
<link rel=”alternate” type=”application/
rss+xml” title=”SeptemberIndustry RSS
Feed” href=”http://www.septemberindustry.
co.uk/?feed=rss2” />
<link rel=”EditURI” type=”application/rsd+xml”
title=”RSD” href=”http://www.septemberindustry.co.uk/xmlrpc.php?rsd” />
<link rel=”wlwmanifest” type=”application/
wlwmanifest+xml” href=”http://www.septemberindustry.co.uk/wp-includes/wlwmanifest.xml” />
<meta name=”generator” content=”WordPress
2.7” />
<link rel=”stylesheet” href=”http://www.septemberindustry.co.uk/wp-content/plugins/wp-lightview/
css/lightview.css” type=”text/css”/><script
type=”text/javascript” src=”http://www.septemberindustry.co.uk/wp-content/plugins/wp-lightview/
js/lightview.js”></script>
<script type=’text/javascript’ src=’http://ajax.
googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js’></script>
<script type=’text/javascript’ src=’http://ajax.
googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js’></script>
<script type=’text/javascript’ src=”js/jquery.js”></
script>
<script type=”text/javascript”>
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j(“none”).css({opacity: 0}); // Loaded at 0 opacity
$j(“none”).fadeTo(1500, 0.15); // Onload fade items to 15%
$j(“none”).hover(function(){
$j(this).fadeTo(“normal”, 1.0); // Rollover at 100%
},function(){
$j(this).fadeTo(“normal”, 0.15); // Rollout at 15%
});
$j(“a img”).css({opacity: 0}); //
Loaded at 0 opacity
$j(“a img”).fadeTo(900, 0.8); //
Onload fade items to 80%
$j(“a img”).hover(function(){
$j(this).fadeTo(“fast”, 1.0); // Rollover at 100%
},function(){
$j(this).fadeTo(“fast”, 0.8); // Rollout at 80%
});
});
</script>
<script type=”text/javascript” src=”http://www.
septemberindustry.co.uk/wp-content/themes/unstandard/js/jquery-1.2.6.min.js”></script>
<script>
$(document).ready(function() {
$(“.archive-drop”).hide();
$(“#lihide”).hide();
$(“a#show”).click(function() {
$(“.archive-drop”).slideDown(600);
$(“#lihide”).show();
$(“#lishow”).hide();
return false;
});
$(“a#hide”).click(function() {
$(“.archive-drop”).slideUp(200);
$(“#lihide”).hide();
$(“#lishow”).show();
return false;
});
});
</script>
</head>
<body>
<div id=”main-wrapper”>
<div id=”leaderboard” class=”fix”>
<ul id=”main-nav” class=”left”>SeptemberInd
ustry<br />
<font color=”#888888”><a href=”http://
septemberindustry.co.uk” title=”Home”>Online
Graphic Design Journal</a></li></font></ul>
<ul id=”main-nav” class=”rightnav”>
<li><form id=”menu”><select
style=”background-color: #FFFFFF; BORDERRIGHT: #888888 1px solid; BORDER-TOP:
#888888 1px solid; BORDER-LEFT: #888888 1px
solid; WIDTH: 184px; COLOR: #888888; BORDERBOTTOM: #888888 1px solid;” name=”tdwcblsel”
onchange=”window.location=(document.
forms.menu.tdwcblsel[document.forms.menu.
tdwcblsel.selectedIndex].value);”><option
value=”” title=”mind the gap:)”>À la carte</
option><option value=”http://septemberindustry.co.uk/?page_id=2/” title=””>About</
option><option value=”http://www.septemberindustry.co.uk/?page_id=386/” title=””>Contact</
option><option value=”http://www.septemberindustry.co.uk/?page_id=5/” title=””>Resources</
option></select></form></li>
<!--
<li>
<select name=”page_id” id=”page_id”>
<option value=””>Pages</option>
<option class=”level-0” value=”2”>About</
option>
<option class=”level-0”
value=”386”>Contact</option>
<option class=”level-0”
value=”5”>Resources</option>
</select>
<script type=”text/javascript”>
var dropdownf = document.
getElementById(“page_id”);
function onPageChange() {
if ( dropdownf.options[dropdownf.selectedIndex].value > 0 ) {
location.href = “http://www.septemberindustry.co.uk/?page_id=”+dropdownf.
options[dropdownf.selectedIndex].value;
}
}
dropdownf.onchange = onPageChange;
</script>
</li>
-->
<li><div class=”search”>
<div id=”applesearch”>
<form method=”get” id=”search_form”
action=”http://septemberindustry.co.uk”>
<span class=”sbox_l”></span><span
class=”sbox”><input type=”search”
name=”s” id=”s” placeholder=”Search...”
autosave=”applestyle_srch” results=”5”
onkeyup=”applesearch.onChange(‘srch_fld’,’srch_
clear’)” /></span><span class=”sbox_r”
id=”srch_clear”></span>
<input type=”hidden” id=”searchsubmit”
value=”Search” />
</form> </div>
</div></li>
</ul>
</div><div class=”home fix”>
<div class=”left”>
<div class=”post” id=”post-1939”>
<div class=”main-post-bg”>
<p class=”post-comments”><a
href=”http://www.septemberindustry.
co.uk/?p=1939#respond” title=”Comment on
Thomas Buxó x Juul Hondius”>No Comments</
a></p>
<a href=”http://www.septemberindustry.co.uk/?p=1939” title=”Thomas Buxó x
Juul Hondius”><img width=”593” src=”images/
buxolead.jpg” alt=”” /></a>
<div class=”title-insert”>
<h2><a href=”http://www.septemberindustry.co.uk/?p=1939” rel=”bookmark”
title=”Thomas Buxó x Juul Hondius”>Thomas
Buxó x Juul Hondius</a></h2>
</div>
</div>
</div>
<div class=”recent-leads fix”>
<div class=”post”
id=”post-1938”>
<div class=”secondary-post-bg left”>
<p class=”post-comments”><a
href=”http://www.septemberindustry.
co.uk/?p=1938#comments” title=”Comment on
Allmann Sattler Wappner Architekten”>2 Comments</a></p>
<a href=”http://www.septemberindustry.co.uk/?p=1938” title=”Allmann Sattler
Wappner Architekten”><img src=”images/hornsecond2.jpg” alt=”” /></a>
<div class=”title-insert”>
<h3><a href=”http://www.septemberindustry.co.uk/?p=1938” title=”Allmann
Sattler Wappner Architekten”>Allmann Sattler
Wappner Architekten</a></h3>
</div>
</div>
</div>
<div class=”post” id=”post-1933”>
<div class=”secondary-post-bg left”>
<p class=”post-comments”><a
href=”http://www.septemberindustry.
co.uk/?p=1933#comments” title=”Comment on
MadeThought”>3 Comments</a></p>
<a href=”http://www.
septemberindustry.co.uk/?p=1933”
title=”MadeThought”><img src=”images/reisssecond.jpg” alt=”” /></a>
<div class=”title-insert”>
<h3><a href=”http://www.septemberindustry.co.uk/?p=1933” title=”MadeThought”
>MadeThought</a></h3>
</div>
</div>
</div>
<div class=”post” id=”post-1932”>
<div class=”secondary-post-bg left”>
<p class=”post-comments”><a
href=”http://www.septemberindustry.
co.uk/?p=1932#comments” title=”Comment on
studionineteen”>2 Comments</a></p>
<a href=”http://www.
septemberindustry.co.uk/?p=1932”
title=”studionineteen”><img src=”images/horne19second.jpg” alt=”” /></a>
<div class=”title-insert”>
<h3><a href=”http://www.septemberindustry.co.uk/?p=1932” title=”studionineteen
”>studionineteen</a></h3>
</div>
</div>
</div>
<div class=”post” id=”post-1917”>
<div class=”secondary-post-bg left”>
<p class=”post-comments”><a
href=”http://www.septemberindustry.
co.uk/?p=1917#comments” title=”Comment on
North”>2 Comments</a></p>
<a href=”http://www.septemberindustry.co.uk/?p=1917” title=”North”><img
src=”images/imagebanksecond.jpg” alt=”” /></
a>
<div class=”title-insert”>
<h3><a href=”http://www.septemberindustry.co.uk/?p=1917” title=”North”>North</
a></h3>
</div>
</div>
</div>
<div class=”post” id=”post-1914”>
<div class=”secondary-post-bg left”>
<p class=”post-comments”><a
href=”http://www.septemberindustry.
co.uk/?p=1914#respond” title=”Comment on
Farrow”>No Comments</a></p>
<a href=”http://www.septemberindustry.co.uk/?p=1914” title=”Farrow”><img
src=”images/farrowscp.jpg” alt=”” /></a>
<div class=”title-insert”>
<h3><a href=”http://www.
septemberindustry.co.uk/?p=1914”
title=”Farrow”>Farrow</a></h3>
</div>
</div>
</div>
<div class=”post” id=”post-1906”>
<div class=”secondary-post-bg left”>
<p class=”post-comments”><a
href=”http://www.septemberindustry.
co.uk/?p=1906#comments” title=”Comment on
Departures”>2 Comments</a></p>
<a href=”http://www.septemberindustry.co.uk/?p=1906” title=”Departures”><img
src=”images/betrayalsecond.jpg” alt=”” /></a>
<div class=”title-insert”>
<h3><a href=”http://www.
septemberindustry.co.uk/?p=1906”
title=”Departures”>Departures</a></h3>
</div>
</div>
</div>
<div class=”post” id=”post-1905”>
<div class=”secondary-post-bg left”>
<p class=”post-comments”><a
href=”http://www.septemberindustry.
co.uk/?p=1905#respond” title=”Comment on Tom
Munckton”>No Comments</a></p>
<a href=”http://www.
septemberindustry.co.uk/?p=1905” title=”Tom
Munckton”><img src=”images/greg_range2.jpg”
alt=”” /></a>
<div class=”title-insert”>
<h3><a href=”http://www.
septemberindustry.co.uk/?p=1905” title=”Tom
Munckton”>Tom Munckton</a></h3>
</div>
</div>
</div>
<div class=”post” id=”post-1885”>
<div class=”secondary-post-bg left”>
<p class=”post-comments”><a
href=”http://www.septemberindustry.
co.uk/?p=1885#respond” title=”Comment on
Marque”>No Comments</a></p>
<a href=”http://www.septemberindustry.co.uk/?p=1885” title=”Marque”><img
src=”images/bailliesecond.jpg” alt=”” /></a>
<div class=”title-insert”>
<h3><a href=”http://www.
septemberindustry.co.uk/?p=1885”
title=”Marque”>Marque</a></h3>
</div>
</div>
</div>
HTML
Quando observamos
o código fonte desse
site uma surpresa: ele também é
baseado no sistema
wordpress, o mesmo
sitema em que se
baseia o site apresentado anteriormente.
O sistema de geração
de conteúdo wordpress, como já
dissemos é altamente customizável, e
permite inclusive a
alteração do próprio
código HTML, além
do CSS.
Na verdade, por
ser open-source,
tudo nele pode ser
alterado, inclusive o
banco de dados, mas
o costume é que se
configure apenas o
que é chamado de
template, que são os
arquivos ( no wordpress a linguagem
utilizada é php) que
determinam a forma
final do HTML, mais
o arquivo CSS.
além do template,
existe uma série de
arquivos responsáveis por fazer o
intercâmbio com o
banco de dados, para
fazer o gerenciamento de conteúdo e
de plugins, e esses
arquivos são alterados com menos
frequência, pois uma
alteração significativa
pode prejudicar uma
futura atualização do
site, e causar imcompatibilidades com
plugins.
Já que o template é
facilmente customizável no wordpress
39
</div>
</div>
<div class=”right”>
<h3>Recently Featured</h3>
<ul class=”sidebar-ul”>
<li><a href=’http://www.septemberindustry.
co.uk/?p=1939’ title=’Thomas Buxó x Juul
Hondius’>Thomas Buxó x Juul Hondius</a></
li>
<li><a href=’http://www.septemberindustry.
co.uk/?p=1938’ title=’Allmann Sattler Wappner
Architekten’>Allmann Sattler Wappner Architekten</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?p=1933’ title=’MadeThought’>MadeThou
ght</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?p=1932’ title=’studionineteen’>studionine
teen</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?p=1917’ title=’North’>North</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?p=1914’ title=’Farrow’>Farrow</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?p=1906’ title=’Departures’>Departures</
a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?p=1905’ title=’Tom Munckton’>Tom
Munckton</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?p=1885’ title=’Marque’>Marque</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?p=1884’ title=’SEA’>SEA</a></li>
</ul>
<br /><br />
<h3>Visual Archive</h3>
<div>
<ul class=”sidebar-ul”>
<li id=”lishow”><a href=””
id=”show”>Browse</a></li><li id=”lihide”><a
href=”” id=”hide”>Close</a></li>
</ul>
</div>
<div class=”archive-drop”>
<ul class=”sidebar-ul”>
<li><a href=’http://www.septemberindustry.
co.uk/?m=200906’ title=’June 2009’>June
2009</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?m=200905’ title=’May 2009’>May 2009</
a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?m=200904’ title=’April 2009’>April 2009</
a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?m=200903’ title=’March 2009’>March
2009</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?m=200902’ title=’February 2009’>February 2009</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?m=200901’ title=’January 2009’>January
2009</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?m=200812’ title=’December 2008’>December 2008</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?m=200811’ title=’November 2008’>November 2008</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?m=200810’ title=’October 2008’>October
2008</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?m=200809’ title=’September 2008’>September 2008</a></li>
<li><a href=’http://www.septemberindustry.
co.uk/?m=200808’ title=’August 2008’>August
2008</a></li>
</ul>
</div> </div>
</div>
<div id=”categories”>
<ul class=”fix”>
<li class=”cat-item cat-item-126”><a
href=”http://www.septemberindustry.
co.uk/?cat=126” title=”View all posts filed under
Advertising”>Advertising</a> (4)
</li>
<li class=”cat-item cat-item-3”><a
href=”http://www.septemberindustry.
co.uk/?cat=3” title=”View all posts filed under
Announcement”>Announcement</a> (3)
</li>
<li class=”cat-item cat-item-199”><a
href=”http://www.septemberindustry.
co.uk/?cat=199” title=”View all posts filed under
Architecture”>Architecture</a> (5)
</li>
<li class=”cat-item cat-item-101”><a
href=”http://www.septemberindustry.
co.uk/?cat=101” title=”View all posts filed under
Art”>Art</a> (7)
</li>
<li class=”cat-item cat-item-34”><a
href=”http://www.septemberindustry.
co.uk/?cat=34” title=”View all posts filed under
Art Direction”>Art Direction</a> (13)
</li>
<li class=”cat-item cat-item-4”><a href=”http://
www.septemberindustry.co.uk/?cat=4”
title=”View all posts filed under Book
Design”>Book Design</a> (31)
</li>
<li class=”cat-item cat-item-5”><a
href=”http://www.septemberindustry.
co.uk/?cat=5” title=”View all posts filed under
Branding”>Branding</a> (38)
</li>
<li class=”cat-item cat-item-30”><a
href=”http://www.septemberindustry.
co.uk/?cat=30” title=”View all posts filed under
Brochure Design”>Brochure Design</a> (31)
</li>
<li class=”cat-item cat-item-28”><a
href=”http://www.septemberindustry.
co.uk/?cat=28” title=”View all posts filed under
Catalogue Design”>Catalogue Design</a> (19)
</li>
<li class=”cat-item cat-item-331”><a
href=”http://www.septemberindustry.
co.uk/?cat=331” title=”View all posts filed under
Collateral”>Collateral</a> (6)
</li>
<li class=”cat-item cat-item-249”><a
href=”http://www.septemberindustry.
co.uk/?cat=249” title=”View all posts filed under
Document Design”>Document Design</a> (8)
</li>
<li class=”cat-item cat-item-39”><a
href=”http://www.septemberindustry.
co.uk/?cat=39” title=”View all posts filed under
Editorial Design”>Editorial Design</a> (5)
</li>
<li class=”cat-item cat-item-128”><a
href=”http://www.septemberindustry.
co.uk/?cat=128” title=”View all posts filed under
Event”>Event</a> (1)
</li>
<li class=”cat-item cat-item-6”><a
href=”http://www.septemberindustry.
co.uk/?cat=6” title=”View all posts filed under
Identity”>Identity</a> (79)
</li>
<li class=”cat-item cat-item-221”><a
href=”http://www.septemberindustry.
co.uk/?cat=221” title=”View all posts filed under
Illustration”>Illustration</a> (1)
</li>
<li class=”cat-item cat-item-195”><a
href=”http://www.septemberindustry.
co.uk/?cat=195” title=”View all posts filed under
Industrial Design”>Industrial Design</a> (5)
</li>
<li class=”cat-item cat-item-64”><a
href=”http://www.septemberindustry.
co.uk/?cat=64” title=”View all posts filed under
Interaction Design”>Interaction Design</a> (24)
</li>
<li class=”cat-item cat-item-302”><a
href=”http://www.septemberindustry.
co.uk/?cat=302” title=”View all posts filed under
Motion”>Motion</a> (2)
</li>
<li class=”cat-item cat-item-281”><a
href=”http://www.septemberindustry.
co.uk/?cat=281” title=”View all posts filed under
On Screen”>On Screen</a> (1)
</li>
<li class=”cat-item cat-item-62”><a
href=”http://www.septemberindustry.
co.uk/?cat=62” title=”View all posts filed under
Packaging”>Packaging</a> (30)
</li>
<li class=”cat-item cat-item-7”><a
href=”http://www.septemberindustry.
co.uk/?cat=7” title=”View all posts filed under
Photography”>Photography</a> (48)
</li>
<li class=”cat-item cat-item-8”><a href=”http://
www.septemberindustry.co.uk/?cat=8”
title=”View all posts filed under Poster
Design”>Poster Design</a> (30)
</li>
<li class=”cat-item cat-item-58”><a
href=”http://www.septemberindustry.
co.uk/?cat=58” title=”View all posts filed under
Print”>Print</a> (56)
</li>
<li class=”cat-item cat-item-142”><a
href=”http://www.septemberindustry.
co.uk/?cat=142” title=”View all posts filed under
Product Design”>Product Design</a> (4)
</li>
<li class=”cat-item cat-item-230”><a
href=”http://www.septemberindustry.
co.uk/?cat=230” title=”View all posts filed under
Promotional Literature”>Promotional Literature</a> (21)
</li>
<li class=”cat-item cat-item-33”><a
href=”http://www.septemberindustry.
co.uk/?cat=33” title=”View all posts filed under
Publication Design”>Publication Design</a>
(12)
</li>
<li class=”cat-item cat-item-141”><a
href=”http://www.septemberindustry.
co.uk/?cat=141” title=”View all posts filed under
Retail Communications”>Retail Communications</a> (2)
</li>
<li class=”cat-item cat-item-9”><a
href=”http://www.septemberindustry.
co.uk/?cat=9” title=”View all posts filed under
Signage”>Signage</a> (5)
</li>
<li class=”cat-item cat-item-115”><a
href=”http://www.septemberindustry.
co.uk/?cat=115” title=”View all posts filed under
Sleeve Design”>Sleeve Design</a> (5)
</li>
<li class=”cat-item cat-item-257”><a
href=”http://www.septemberindustry.
co.uk/?cat=257” title=”View all posts filed under
Typography”>Typography</a> (4)
</li>
</ul>
</div><div id=”footer”>
<div class=”left”>© 2009 <a href=”http://
www.septemberindustry.co.uk/”
title=”Home”>SeptemberIndustry</a></div>
</div>
</div>
<!-- Start of StatCounter Code -->
<script type=”text/javascript”>
<!- var sc_project=4244190;
var sc_partition=55;
var sc_security=”1c57c46d”;
//-->
</script>
<script type=”text/javascript” src=”http://www.
statcounter.com/counter/counter_xhtml.js”></
script>
<!-- End of StatCounter Code -->
</body>
</html>
(mais adiante, iremos
mostrar essa interface de customização
do wordpress), a estrutura do documento
desse site é um tanto
diferente do site que
apresentamos anteriormente, e ele tem
inclusive, o mesmo
problema (apenas
de aparência) que
tem o site de xavier
encinas, apresentado
anteriormente, tabulações execessivas
que deixa a aparência
do código menos
inteligível.
Logo no começo do
código, vemos que
existe um pequeno
código JavaScript,
que cria alguns eeitos
de transparência e
fade utilizados no
site, e além deles,
utiliza também duas
bibliotecas de código
hospedadas em
outros servidores, a
prototype e a scriptaculous, citadas no
trababalho programado 2.
40
/* lightview.css
http://www.nickstakenburg.com/projects/
lightview
*/
#lightview {
position: absolute;
top: 50%;
left: 50%;
height: 150px;
width: 150px;
margin: -75px 0 0 -75px;
padding: 0;
}
/* The container that holds everything */
.lv_Container {
position: relative;
width: 100%;
height: 100%;
background: none;
padding: 0;
margin: 0;
}
.lv_Button {
cursor: pointer;
text-decoration: none;
border: none;
background: none;
margin: 0;
padding: 0;
}
/* The buttons on the side when you view a
gallery */
.lv_Sides {
position: absolute;
top: 50%;
left: 0;
clear: both;
width: 100%;
padding: 0;
margin: 0;
}
.lv_Sides * { padding: 0; margin: 0; }
.lv_Sides li {
list-style-type: none;
position: relative;
}
.lv_PrevSide { float: left; }
.lv_NextSide { float: right; }
.lv_Sides .lv_Wrapper {
width: 100%;
height: 100%;
cursor: pointer;
}
.lv_Sides .lv_Button {
float: left;
background: none;
}
/* The frames above and below the center, that
hold the corners.
It's recommended not to change anything here,
a lot is done in
javascript to build further upon this based on
your settings.
*/
.lv_Frames {
width: 100%;
height: 100%;
position: relative;
padding: 0;
margin: 0;
}
.lv_Frames li {
list-style-type: none;
margin: 0;
padding: 0;
}
.lv_Frame {
width: 100%;
display: block;
}
.lv_Frame * { padding: 0; margin: 0; }
.lv_FrameTop {
position: absolute;
left: 0;
width: 100%;
display: block;
}
.lv_FrameBottom {
position: relative;
float: left;
clear: both;
}
.lv_Corner {
float: left;
position: relative;
}
.lv_CornerTr, .lv_CornerBr { float: right; }
.lv_Fill {
position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.lv_Half .lv_CornerWrapper {
float: left;
position: relative;
width: 50%;
height: 100%;
overflow: hidden;
}
.lv_HalfRight .lv_CornerWrapper { float: right; }
.lv_Corner { position: relative; }
.lv_Corner canvas { position: relative; }
.lv_HalfLeft .lv_Corner { float: left; }
.lv_HalfRight .lv_Corner {
position: relative;
float: right;
}
/* To position content correctly in the center with
correct
rounded corner display we need a few wrappers.
This is to get it right on all browsers.
*/
.lv_Center {
position: relative;
clear: both;
height: 100%;
overflow: hidden;
background: none;
padding: 0;
margin: 0;
}
.lv_WrapUp {
position: absolute;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
.lv_WrapDown {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
padding: 0;
margin: 0;
}
.lv_WrapCenter {
position: relative;
padding: 0;
margin: 0;
}
/* The loading indicator */
.lv_Loading {
position: absolute;
top: 50%;
left: 50%;
}
.lv_Loading .lv_Button {
float: left;
height: 100%;
width: 100%;
}
.lv_MediaWrapper {
position: relative;
width: 100%;
display: block;
overflow: hidden;
clear: both;
padding: 0;
margin: 0;
}
.lv_MediaWrapper img {
position: relative;
float: left;
padding: 0;
margin: 0;
}
.lv_Liquid {
position: relative;
float: left;
width: 100%;
overflow: hidden;
clear: both;
}
.lv_Liquid .lv_Filler {
position: absolute;
height: 100%;
width: 2px;
top: 0;
left: 50%;
}
/* The overlays on top of images that toggle the
previous/next buttons */
.lv_PrevNext {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
.lv_PrevNext * { padding: 0; margin: 0; }
.lv_PrevNext .lv_Button {
position: relative;
height: 100%;
}
.lv_PrevButton { float: left; }
.lv_NextButton { float: right; }
.lv_Half {
display: block;
height: 100%;
clear: both;
line-height: 0px;
}
.lv_Half li { list-style-type: none; }
/* The bar that holds title, caption, imagenumber,
slideshow and closebutton */
.lv_MenuBar {
clear: both;
position: relative;
width: 100%;
font: 11px Arial, Helvetica, sans-serif;
color: #7a7a7a;
padding: 0;
margin: 0;
text-align: left;
}
.lv_MenuBar * { padding: 0; margin: 0;}
CSS
.lv_Close {
position: relative;
float: right;
overflow: hidden;
width: 100%;
height: 100%;
}
.lv_Data {
position: relative;
float: left;
padding-bottom: 3px;
line-height: 13px;
overflow: hidden;
}
/* simulates padding-left inside .lv_Data
.lv_DataText div, .lv_ImgNumber div { margin-left:
3px; } */
.lv_Data li {
list-style-type: none;
float: left;
margin-top: 3px;
}
.lv_DataText { width: 100%; }
.lv_DataText .lv_Title {
font-weight: bold;
margin-bottom: 2px;
}
.lv_DataText .lv_Caption { clear: both; }
.lv_Data .lv_ImgNumber {
color: #a7a7a7;
margin-right: 5px;
margin-top: 5px;
}
.lv_Data .lv_innerPrevNext,
.lv_Data .lv_Slideshow {
position: relative;
border-left: 1px solid #d7d7d7;
padding: 0 5px;
margin-top: 5px;
vertical-align: middle;
}
.lv_Data .lv_Slideshow { padding-right: 0px; }
.lv_Data .lv_innerPrevNext .lv_Button,
.lv_Data .lv_Slideshow .lv_Button { /* play and
stop */
float: left;
background-position: center left;
background-repeat: no-repeat;
}
/* the boxes that hold media or external content */
.lv_contentTop,
.lv_contentBottom {
position: relative;
float: left;
margin: 0;
padding: 0;
clear: both;
}
#lightview iframe {
float: left;
border: 0;
clear: both;
padding: 0;
margin: 0;
background: none;
}
/* The container that hold buttons above the view,
currently only topclose */
.lv_topButtons {
position: absolute;
left: 0;
width: 100%;
overflow: hidden;
margin: 0;
padding: 0;
}
.lv_topcloseButtonImage { cursor: pointer; }
/* The error/warning/download message that will
appear when
a required plugin is not installed.
*/
#lightviewError p { padding: 0 0 10px 0; }
#lightviewError div {
padding: 6px;
font: 11px Arial, Helvetica, sans-serif;
}
#lightviewError .message {
background: #fcb5b5;
color: #dd1f1f;
margin-bottom: 3px;
}
#lightviewError .type { font-weight: bold; }
#lightviewError .pluginspage {
background: #b5fcbd;
color: #21be30;
}
#lightviewError a,
#lightviewError a:hover,
#lightviewError a:visited {
color: #21be30;
text-decoration: none;
background: none;
font-weight: bold;
Esse código CSS
é mais extenso do
que o do site bitique,
e podemos ver
em uma pequena
observação, que ele é
um projeto chamado
lightview.
Ele mostra que o site
é estruturado a partir
de uma série de “envelopes” (wrappers)
para permitir o alinhamento centralizado, e
a aplicação de cantos
arredondados. Esses
cantos arredondados,
no entanto, foram retirados no template,
o que demontra que
parte deste código foi
feita para outro site.
O código tem uma
série de elementos
que efetivamente
não são utilizados por
este site, só mais
uma demonstração
dessa tendência atual
de customizaçã de
sistemas e temas
prontos.
41
border-bottom: 1px solid #7de689;
}
#lightviewError p {
margin-left: 0;
padding: 0;
}
#lv_overlay {
position: absolute; /* Opera will use fixed */
top: 0;
left: 0;
height: 100%;
width: 100%;
}
/* navbar
Adds a bar below the view that takes over the
default Controller
*/
#lightviewController {
position: fixed;
bottom: 0;
top: 0;
left: 50%;
margin: 0;
padding: 0;
color: #d2d2d2;
font: 11px Arial, Helvetica, sans-serif;
}
* html body #lightviewController { /* IE6 */
position: absolute;
top: auto;
margin-top: expression( (-1 * this.offsetHeight
/ 2 + (document.documentElement ? document.
documentElement.scrollTop : 0) + (Lightview.
controllerOffset || 0)) + 'px');
}
#lightviewController ul {
display: block;
height: 100%;
float: left;
margin: 0;
padding: 0;
position: relative;
}
.lv_controllerTop, .lv_controllerMiddle, .lv_controllerBottom {
list-style-type: none;
float: left;
display: block;
position: relative;
clear: both;
overflow: hidden;
margin: 0;
padding: 0;
}
.lv_controllerCenter { width: auto; float: left; }
.lv_controllerCornerWrapper {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.lv_controllerCornerWrapperTopLeft,
.lv_controllerCornerWrapperBottomLeft { top: 0;
left: -100%;}
.lv_controllerCornerWrapperTopRight,
.lv_controllerCornerWrapperBottomRight { top: 0;
left: 100%;}
#lightviewController .lv_CornerWrapper {
width: 100%;
}
#lightviewController .lv_Corner { float: left; }
#lightviewController .lv_Corner {
float: right;
position: relative;
}
#lightviewController .lv_CornerTr, #lightviewController .lv_CornerBr { float: left; }
.lv_controllerBetweenCorners {
position: relative;
height: 100%;
overflow: hidden;
}
.lv_controllerMiddle {
position: relative;
height: 100%;
float: left;
}
.lv_controllerCenter { float: left; width: auto;}
.lv_controllerCenter li {
list-style-type: none;
float: left;
display: inline;
position: relative;
clear: none;
}
.lv_controllerSetNumber {
float: left;
text-align: center;
}
#lightviewController .lv_Button {
float: left;
position: relative;
height: 100%;
clear: none;
}
.lv_controllerSetNumber {
position: relative;
height: 100%;
padding-right: 3px;
}
.lv_controllerPrev,
.lv_controllerNext,
.lv_controllerSlideshow,
.lv_controllerClose {
float: left;
position: relative;
height: 100%;
padding-left: 3px;
}
.lv_controllerPrev { border-left: 1px solid #3c3c3c; }
#lightviewController .lv_controllerNext { paddingright: 3px; border-right: 1px solid #3c3c3c; }
* html #lightview { /* IE6 */
position: absolute;
margin-top: expression( (-1 * this.offsetHeight
/ 2 + (document.documentElement ? document.
documentElement.scrollTop : 0) - (Lightview.
controllerHeight || 0)) + 'px');
margin-left: expression( -1 * this.offsetWidth /
2 + (document.documentElement ? document.
documentElement.scrollLeft : 0) + 'px');
}
/* Always cover 100% of the screen in IE6 */
html #lv_overlay {
position: absolute;
height: expression(((window.Enumerable &&
window.Enumerable.max) ? [document.body.
scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.
documentElement.clientHeight].max() : document.
documentElement.scrollHeight) + 'px' );
width: expression(((window.Enumerable &&
window.Enumerable.max) ? [document.body.
scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.
documentElement.clientHeight].max() : document.
documentElement.scrollWidth) + 'px' );
}
42
http://www.thegridsystem.org/
O The Grid System é
um site de inspiração
claramente moderna,
que se faz notar desde a citação de Josef
Muller-Brockmann no
topo da página, até o
próprio tema do site,
e o conteúdo, todo
votado para o estudo
e a prática de construção de sistemas
de grade.
A aparência é bastante diferente da dos
demais sites apresentados, com ênfase na
tipografia, e a divisão
do conteúdo em 6
seções principais,
quatro seções auxiliares, e alguns links
na seção inferior,
que é somente onde
existem imagens.
43
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
1.0 Transitional//EN" "http://www.w3.org/TR/
xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<title>The Grid System</title>
<meta http-equiv="content-type" content="text/
html; charset=UTF-8" />
<meta name="description" content="The
ultimate resource in grid systems." />
<meta name="generator" content="WordPress
2.7" /><!-- Please leave for stats -->
<link rel="stylesheet" type="text/css"
href="http://www.thegridsystem.org/wp-content/
themes/ub_futurositymag/style.css" title="style1"
media="screen" />
<link rel="alternate stylesheet" type="text/
css" href="http://www.thegridsystem.org/wpcontent/themes/ub_futurositymag/style_grid.css"
title="style2" media="screen" />
<link rel="alternate" type="application/rss+xml"
href="http://feedproxy.google.com/TheGridSystem" />
<link rel="pingback" href="http://www.the-
gridsystem.org/xmlrpc.php" />
<script type="text/javascript" src="http://www.
thegridsystem.org/wp-content/themes/ub_futurositymag/js/jquery.js"></script>
<script type="text/javascript" src="http://www.
thegridsystem.org/wp-content/themes/ub_futurositymag/js/styleswitch.js"></script>
<link rel="icon" href="/favicon.ico" type="image/
x-icon" />
<script src="/mint/?js" type="text/javascript"></
script>
<!-- META Tags added by Add-Meta-Tags WordPress plugin. Get it at: http://www.g-loaded.eu/ -->
<meta name="description" content="The Grid
System is a resource for all designers to learn
about the benefits of using grid systems, golden
ratios and baseline grids." />
<meta name="keywords" content="grid, grids,
grid system, grid systems, graphic design, design,
graphic, typography, type, typeface, fonts, baselines, kerning, golden ratio, golden section, golden
mean, divine proportions, phi, josef müller-brockmann, wim crouwel,minimalism, modernism" />
<link rel="EditURI" type="application/rsd+xml"
title="RSD" href="http://www.thegridsystem.org/
xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/
wlwmanifest+xml" href="http://www.thegridsystem.org/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress
2.7" />
</head>
<body class="wordpress y2009 m06 d17 h16
home">
<div id="wrapper" class="hfeed">
<div id="header">
<div id="search">
<form method="get" id="sform"
action="http://www.thegridsystem.org/">
<input type="text" size="15" name="s"
value="Search" id="q" onfocus="if(this.
value=='Search')this.value=''" onblur="if(this.
value=='')this.value='Search'"/>
</form>
</div>
<div id="topnav">
<a href="http://www.thegridsystem.org/
forum/">Join The Forum</a>
</div>
<div id="styleswitch">
<a id="hide" href="http://www.
thegridsystem.org?style=style1" rel="style1"
class="styleswitch">Hide Grid</a>
<a id="show" href="http://www.
thegridsystem.org?style=style2" rel="style2"
class="styleswitch">Show Grid</a>
</div>
<div id="blog-title">
<a href="http://www.thegridsystem.
org/" title="The Grid System" rel="home"><img
src="http://www.thegridsystem.org/wp-content/
themes/ub_futurositymag/images/title.png"
alt="Title" /></a>
</div>
<div id="quote">
<blockquote><p class="quote">“
The grid system is an aid, not a guarantee.<br
/>It permits a number of possible uses and
each<br />designer can look for a solution
appropriate to his<br />personal style. But one
must learn how to use the<br />grid; it is an
art that requires practice. ”<br
/><strong>Josef Müller-Brockmann</
strong></p></blockquote>
</div>
<div id="blog-description">
<p>The ultimate resource<br />in grid
systems.</p>
</div>
</div><!-- #header -->
<div id="container">
<div id="content">
<!-- Begin editing categories below here. -->
<ul class="latest">
<li><h2 class="latest"><a href="http://www.
thegridsystem.org/categories/articles/" title="View
all posts in Articles" rel="category tag">Articles</
a></h2></li>
<li>
<ul class="latestinside">
<li><a href="http://font.is/?p=1226" title="Making
Grids in Illustrator">
</a></li>
<li class="list-title"><h3><a href="http://font.
is/?p=1226" rel="bookmark">Making Grids in
Illustrator</a></h3></li>
<li class="latest-excerpt"><p>A detailed
article by Sigurdur Armannsson on how to
create a grid system in Adobe Illustrator.</p>
</li>
<li class="list-time">08.Jun.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<ul class="latestinside">
<li><a href="http://www.vcarrer.com/2009/05/orule-golden-proportion-for.html" title="O rule +
Golden Proportion for Calculating the Gutter in
a Grid">
</a></li>
<li class="list-title"><h3><a href="http://
www.vcarrer.com/2009/05/o-rule-golden-proportion-for.html" rel="bookmark">O rule + Golden
Proportion for Calculating the Gutter in a
Grid</a></h3></li>
<li class="latest-excerpt"><p>There is
practically no (or very little) documentation
about this problem on the web or in many
typography or grid design books.</p>
</li>
<li class="list-time">08.Jun.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<ul class="latestinside">
<li><a href="http://www.sitepoint.com/
blogs/2007/04/30/typography-baseline-rhythmdeciphered/" title="Baseline Rhythm Deciphered">
</a></li>
<li class="list-title"><h3><a href="http://
www.sitepoint.com/blogs/2007/04/30/
typography-baseline-rhythm-deciphered/"
rel="bookmark">Baseline Rhythm Deciphered</
a></h3></li>
<li class="latest-excerpt"><p>When this
occurs, your page is said to have vertical
rhythm — the text is easier to read than text
that doesn’t line up, as it feels more cohesive
and less disjointed.</p>
</li>
<li class="list-time">19.May.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<div class="viewlink">
<a href="http://www.thegridsystem.org/
categories/articles/" title="View All Articles">View
All Articles →</a>
</div>
</li>
</ul>
<ul class="latest">
<li><h2 class="latest"><a href="http://www.
thegridsystem.org/categories/tools/" title="View
all posts in Tools" rel="category tag">Tools</a></
h2></li>
<li>
<ul class="latestinside">
<li><a href="http://curella.org/pdfgridder/"
title="PDFGridder">
</a></li>
<li class="list-title"><h3><a href="http://curella.org/pdfgridder/" rel="bookmark">PDFGridder</
a></h3></li>
<li class="latest-excerpt"><p>An
excellent grid tool that generates a <span
class="caps">PDF</span> version of the grid.</
p>
</li>
<li class="list-time">08.Jun.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<ul class="latestinside">
<li><a href="http://drewish.com/tools/vertical-
rhythm" title="CSS with Vertical Rhythm">
</a></li>
<li class="list-title"><h3><a href="http://
drewish.com/tools/vertical-rhythm"
rel="bookmark">CSS with Vertical Rhythm</
a></h3></li>
HTML
<li class="latest-excerpt"><p>This tool will
help you compute <span class="caps">CSS</
span> that has a consistent vertical rhythm.</
p>
</li>
<li class="list-time">19.May.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<ul class="latestinside">
<li><a href="http://www.gridsystemgenerator.
com/" title="Grid System Generator">
</a></li>
<li class="list-title"><h3><a href="http://
www.gridsystemgenerator.com/"
rel="bookmark">Grid System Generator</a></
h3></li>
<li class="latest-excerpt"><p>The grid sys-
tem generator will create fixed grid systems in
valid css/xhtml for rapid prototyping, development and production.</p>
</li>
<li class="list-time">04.May.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<div class="viewlink">
<a href="http://www.thegridsystem.org/categories/tools/" title="View All Tools">View All Tools
→</a>
</div>
</li>
</ul>
<ul class="latest">
<li><h2 class="latest"><a href="http://www.
thegridsystem.org/categories/books/" title="View
all posts in Books" rel="category tag">Books</
a></h2></li>
<li>
<ul class="latestinside">
<li><a href="http://www.amazon.com/gp/product
/0262512408?ie=UTF8&tag=aisleone-20&am
p;linkCode=as2&camp=1789&creative=
9325&creativeASIN=0262512408" title="The
Grid Book">
</a></li>
<li class="list-title"><h3><a href="http://
www.amazon.com/gp/product/0262512408?ie=U
TF8&tag=aisleone-20&linkCode=as2&a
mp;camp=1789&creative=9325&creati
veASIN=0262512408" rel="bookmark">The Grid
Book</a></h3></li>
<li class="latest-excerpt"><p>Examines the
history of ten grids that changed the world
and charts the evolution of each.</p>
</li>
<li class="list-time">07.Apr.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<ul class="latestinside">
<li><a href="http://www.amazon.com/gp/prod
uct/1592534724?ie=UTF8&tag=aisleone20&linkCode=as2&camp=1789&
creative=9325&creativeASIN=1592534724"
title="Layout Essentials: 100 Design Principles for
Using Grids">
</a></li>
<li class="list-title"><h3><a href="http://
www.amazon.com/gp/product/1592534724?ie=U
TF8&tag=aisleone-20&linkCode=as2&
amp;camp=1789&creative=9325&crea
tiveASIN=1592534724" rel="bookmark">Layout
Essentials: 100 Design Principles for Using
Grids</a></h3></li>
<li class="latest-excerpt"><p>This book
outlines and demonstrate basic layout/grid
guidelines and rules through 100 entries.</p>
Este site certamente
aparenta se bastante
diferente dos dois
sites apresentados
anteriormente, mas
logo na meta informação, no começo
do código observamos uma palavrinha
familiar: <meta
name=”generator”
content=”WordPress
2.7” />
Isto indica que o
sistema gerador de
conteúdo é o mesmo
sistema dos dois
sites aresentados até
agora: o Wordpress,
o sistema open-source mais utilizado por
blogueiros do mundo
inteiro.
Aqui, não só o CSS é
diferentes, mas toda
a estrutura, do site,
e a organização em
tópicos. Isto demonstra a grande possibilidade de customização e adaptabilidade
desses sistema.
Podemos ver que
todas as classes são
diferentes e que
este é um template
contruído especificamente para esse tipo
de layout, em colunas
de um grid rigoroso.
</li>
<li class="list-time">23.Mar.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<ul class="latestinside">
<li><a href="http://www.amazon.com/gp/product
/013099071X?ie=UTF8&tag=aisleone-20&am
p;linkCode=as2&camp=1789&creative
=9325&creativeASIN=013099071X" title="A
Type Primer">
</a></li>
<li class="list-title"><h3><a href="http://
www.amazon.com/gp/product/013099071X?ie=U
TF8&tag=aisleone-20&linkCode=as2&
amp;camp=1789&creative=9325&crea
tiveASIN=013099071X" rel="bookmark">A Type
Primer</a></h3></li>
<li class="latest-excerpt"><p>A Type Primer
provides a practical guide for beginners, presenting the basic principles and applications
of typography. The book includes a section on
how type is applied to a grid.</p>
</li>
<li class="list-time">18.Feb.2009</li>
Só para observar um
detalhe interessante
desse site, o endereço de e-mail está
escrito em código
ASCII bruto, isso faz
com que no código
ele seja totalmente
ininteligível. Isto é
uma medida contra
robôs que navegam
automaticamente
em sites a procura de e-mails para
44
<li class="edit-link"></li>
</ul>
</li>
<li>
<div class="viewlink">
<a href="http://www.thegridsystem.org/
categories/books/" title="View All Books">View All
Books →</a>
</div>
</li>
</ul>
<ul class="latest">
<li><h2 class="latest"><a href="http://www.
thegridsystem.org/categories/templates/"
title="View all posts in Templates" rel="category
tag">Templates</a></h2></li>
<li>
<ul class="latestinside">
<li><a href="http://www.evowebdev.com/
blog/2009/05/free-4-column-grid-photoshoptemplates-for-better-web-design/" title="Photoshop
4 Column Grid">
</a></li>
<li class="list-title"><h3><a href="http://
www.evowebdev.com/blog/2009/05/free-4column-grid-photoshop-templates-for-better-webdesign/" rel="bookmark">Photoshop 4 Column
Grid</a></h3></li>
<li class="latest-excerpt"><p>A free 4 Col-
umn Photoshop grid template for a 1024×768
screen resolution by Ray Gulick.</p>
</li>
<li class="list-time">08.Jun.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<ul class="latestinside">
<li><a href="http://www.thegridsystem.org/2009/
templates/indesign-568x792-grid-system-12/"
title="InDesign 568×792 Grid System (12)">
</a></li>
<li class="list-title"><h3><a href="http://
www.thegridsystem.org/2009/templates/
indesign-568x792-grid-system-12/"
rel="bookmark">InDesign 568×792 Grid
System (12)</a></h3></li>
<li class="latest-excerpt"><p>By Dario Gal-
vagno. Adobe InDesign file with a grid system
for a 568pts x 792pts page that is divided into
12 columns and rows using the Golden Ratio.
Includes a 12pt baseline grid.</p>
</li>
<li class="list-time">16.Apr.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<ul class="latestinside">
<li><a href="http://www.thegridsystem.org/2009/
templates/illustrator-974px-grid-system-12/"
title="Illustrator 974px Grid System (12)">
</a></li>
<li class="list-title"><h3><a href="http://www.
thegridsystem.org/2009/templates/illustrator974px-grid-system-12/" rel="bookmark">Illustrator
974px Grid System (12)</a></h3></li>
<li class="latest-excerpt"><p>By Neil Bradley. Adobe Illustrator file with a grid system
for a 974px wide page that is divided into 12
columns and rows using the Rule of Thirds
(Golden Ratio). Includes a 16px baseline
grid.</p>
</li>
<li class="list-time">18.Feb.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<div class="viewlink">
<a href="http://www.thegridsystem.org/categories/templates/" title="View All Templates">View
All Templates →</a>
</div>
</li>
</ul>
<ul class="latest">
<li><h2 class="latest"><a href="http://www.
thegridsystem.org/categories/blog/" title="View
all posts in Blog" rel="category tag">Blog</a></
h2></li>
<li>
<ul class="latestinside">
<li><a href="http://www.area17.com/" title="Area
17">
</a></li>
<li class="list-title"><h3><a href="http://
www.area17.com/" rel="bookmark">Area 17</
a></h3></li>
<li class="latest-excerpt"><p>Area 17 is a
Brooklyn based studio with a gorgeous gridbased website.</p>
</li>
<li class="list-time">08.Jun.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<ul class="latestinside">
<li><a href="http://www.buddycarrskateboards.
com/" title="Hello: Limited Edition Skateboard
Released">
</a></li>
<li class="list-title"><h3><a href="http://
www.buddycarrskateboards.com/"
rel="bookmark">Hello: Limited Edition Skateboard Released</a></h3></li>
<li class="latest-excerpt"><p>The limited
edition Buddy Carr skateboard is now available
for purchase. Designed on a simple grid.</p>
</li>
<li class="list-time">01.Jun.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<ul class="latestinside">
<li><a href="http://www.andystewartphotography.com/" title="Andrew Stewart Photography">
</a></li>
<li class="list-title"><h3><a href="http://
www.andystewartphotography.com/"
rel="bookmark">Andrew Stewart Photography</a></h3></li>
<li class="latest-excerpt"><p>Beautiful, simple, grid based site design for photographer
Andrew Stewart.</p>
</li>
<li class="list-time">19.May.2009</li>
<li class="edit-link"></li>
</ul>
</li>
<li>
<div class="viewlink">
<a href="http://www.thegridsystem.org/categories/blog/" title="View All Blog Articles">View All
Blog Posts →</a>
</div>
</li>
</ul>
<ul class="latest">
<li id="linkcat-2" class="linkcat"><h2>Inspirati
on</h2>
<ul class='xoxo blogroll'>
<li><a href="http://acejet170.typepad.com">Ace
Jet 170</a></li>
<li><a href="http://www.aisleone.
net/">AisleOne</a></li>
<li><a href="http://athleticsnyc.com/">Athletics</
a></li>
<li><a href="http://www.bbdk.com/">BBDK</
a></li>
<li><a href="http://www.blanka.co.uk/">Blanka</
a></li>
<li><a href="http://wearebuild.com/">Build</
a></li>
<li><a href="http://www.corporateriskwatch.
com/">Corporate Risk Watch</a></li>
<li><a href="http://www.davidairey.com/">David
Airey</a></li>
<li><a href="http://www.designassembly.
org/">Design Assembly</a></li>
<li><a href="http://www.dirtymouse.co.uk/">Dirty
Mouse</a></li>
<li><a href="http://www.experimenta.
co.nz/">Experimenta</a></li>
<li><a href="http://www.experimentaljetset.
nl/">Experimental Jetset</a></li>
<li><a href="http://www.formfiftyfive.
com/">Form Fifty Five</a></li>
<li><a href="http://www.grafikmagazine.
co.uk/">Grafik Magazine</a></li>
<li><a href="http://grainedit.com/">Grain Edit</
a></li>
<li><a href="http://graphichug.com/">Graphic
Hug</a></li>
<li><a href="http://ilovetypography.com/">I Love
Typography</a></li>
<li><a href="http://www.lamosca.
com/">Lamosca</a></li>
<li><a href="http://magculture.com/
blog/">magCulture</a></li>
<li><a href="http://www.markboulton.co.uk/
journal">Mark Boulton</a></li>
<li><a href="http://www.minimalsites.
com/">Minimal Sites</a></li>
<li><a href="http://www.monocle.
com/">Monocle</a></li>
<li><a href="http://www.neubauberlin.
com/">Neubau</a></li>
<li><a href="http://www.studionewwork.
com/">NewWork</a></li>
<li><a href="http://www.ok-rm.co.uk/">OK-RM</
a></li>
<li><a href="http://original-linkage.blogspot.
com/">Original Linkage</a></li>
<li><a href="http://www.robinuleman.nl/">Robin
Uleman</a></li>
<li><a href="http://www.sampsonmay.
com/">SampsonMay</a></li>
<li><a href="http://www.schmidtoday.
com/">Schmid Today</a></li>
<li><a href="http://www.septemberindustry.co.uk/
blog/">September Industry</a></li>
<li><a href="http://www.soulellis.
com/">Soulellis</a></li>
<li><a href="http://www.subtraction.
com/">Subtraction</a></li>
<li><a href="http://www.swisslegacy.
com/">Swiss Legacy</a></li>
<li><a href="http://thinkingforaliving.
org/">Thinking for a Living</a></li>
<li><a href="http://www.this-studio.co.uk/">This
Studio</a></li>
<li><a href="http://www.toko.nu/">Toko</a></li>
<li><a href="http://www.typographicposters.
com/">Typographic Posters</a></li>
<li><a href="http://visuelle.co.uk/">Visuelle</
a></li>
<li><a href="http://xavierencinas.com/">Xavier
Encinas</a></li>
<li><a href="http://www.yearofthesheep.
com/">Year of the Sheep</a></li>
</ul>
</li>
</ul>
<!-- Stop editing categories here. -->
<div class="clear"></div>
<!-- You can edit this part, but be careful. -->
<div class="two-col">
<h2>About</h2>
<p class="about">Made popular by the
International Typographic Style movement and
pioneered by legends like Josef MüllerBrockmann and Wim Crouwel, the grid is
the foundation of any solid design. The Grid
System is an ever-growing resource where
graphic designers can learn about grid systems, the golden ratio and baseline grids.</p>
<p class="about">Created by <a href="http://
www.yearofthesheep.com/" title="Year of the
Sheep">Antonio Carusone</a>, graphic
designer and author of the design and
typography blog <a href="http://www.aisleone.
net/" title="AisleOne">AisleOne</a>. Special
thanks to <a href="http://thinkingforaliving.org/"
title="Thinking for a Living">Duane King</a> for
his help and wisdom.</p>
<p class="about">If you want to say hi
or for general inquiries, send an email to:
<a href=”mailto:hel

8;o@theg
;ridsys
;tem.org
;”>hello@
thegri&#
100;syste

9;.org</a></p>
<p>Have an article, tool, template or
news you want to submit? Send an email
to: <a href=”mailto:sub
;mit@the
;gridsys
;tem.org
;”>submit
;@thegr&
#105;dsyst
01;m.org</a></
p>
</div>
<div class=”one-col”>
<h2>Subscribe</h2>
<p class=”about”>Want to stay updated
with the most recent content? Subscribe
below via email for daily updates or to the RSS
feed.</p>
<ul>
<li><a href=”http://www.feedburner.com/
fb/a/emailverifySubmit?feedId=2698762&loc
=en_US”>Subscribe by Email</a></li>
<li><a href=”http://feedproxy.google.com/
TheGridSystem”>Subscribe to RSS</a></li>
<li class=”feedcount”><a href=”http://
feedproxy.google.com/TheGridSystem”><img
src=”http://feeds.feedburner.com/~fc/TheGridSy
stem?bg=444444&fg=ffffff&anim=0”
height=”26” width=”88” alt=”” /></a></li>
</ul>
</div>
<div class=”one-col”>
<h2>Archives</h2>
<ul> <li><a href=’http://www.thegridsystem.org/2009/06/’ title=’June 2009’>June 2009</
a></li>
<li><a href=’http://www.thegridsystem.
org/2009/05/’ title=’May 2009’>May 2009</a></
li>
<li><a href=’http://www.thegridsystem.
org/2009/04/’ title=’April 2009’>April 2009</a></
li>
<li><a href=’http://www.thegridsystem.
org/2009/03/’ title=’March 2009’>March 2009</
a></li>
<li><a href=’http://www.thegridsystem.
org/2009/02/’ title=’February 2009’>February
2009</a></li>
<li><a href=’http://www.thegridsystem.
org/2009/01/’ title=’January 2009’>January
2009</a></li>
<li><a href=’http://www.thegridsystem.
org/2008/12/’ title=’December 2008’>December
2008</a></li>
<li><a href=’http://www.thegridsystem.
org/2008/11/’ title=’November 2008’>November
2008</a></li>
</ul>
</div>
alimentação de
bancos de dados de
spammers.
45
<div class=”one-col”>
<h2>Goodies</h2>
<ul>
<li><a href=”http://www.legistyles.
com/”>LegiStyles</a></li>
<li><a href=”http://aisleone.bigcartel.
com/”>AisleOne Store</a></li>
<li><a href=”http://www.aisleone.net/
wallpapers/”>Wallpapers</a></li>
<li><a href=”http://www.flickr.com/groups/
thegridsystem/”>The Grid System Group</a></
li>
<li><a href=”http://www.flickr.com/groups/
intertypostyle/”>Inter-Typo-Style Group</a></li>
<li><a href=”http://www.flickr.com/groups/
wimcrouwel/”>Wim Crouwel Group</a></li>
</ul>
</div>
<div class=”one-col”>
<h2>Colophon</h2>
<ul>
<li>Made on a <a href=”http://www.apple.
com/”>Mac</a></li>
<li>Set in <a href=”http://www.linotype.
com/526/helvetica-family.html”>Helvetica</a></
li>
<li>Themed in <a href=”http://www.upstartblogger.com/wordpress-theme-upstart-bloggerfuturosity-magazine”>Futurosity</a></li>
<li>Hosted by <a href=”http://www.mediatemple.net/”>Media Temple</a></li>
<li>Powered by <a href=”http://www.
wordpress.org/”>Wordpress</a></li>
</ul>
</div>
<div class=”clear”></div>
<div class=”two-col”>
<h2><a href=”https://www.e-junkie.com/
ecom/gb.php?ii=195571&c=ib&a
ff=48247” target=”ejejcsingle” title=”Designers
Bookshop”>Designers Bookshop</a></h2>
<a href=”https://www.e-junkie.com/ecom/
gb.php?ii=195571&c=ib&aff=48247”
target=”ejejcsingle” title=”Grid Calculator”><img
src=”http://www.thegridsystem.org/wp-content/
themes/ub_futurositymag/images/gridcal_tout.jpg”
alt=”Advertising” class=”touts”/></a>
</div>
<div class=”two-col”>
<h2><a href=”http://thinkingforaliving.org/”
title=”Thinking for a Living”>Thinking For A
Living</a></h2>
<a href=”http://thinkingforaliving.org/”
title=”Thinking for a Living”><img src=”http://
www.thegridsystem.org/wp-content/themes/
ub_futurositymag/images/tfal_tout.jpg”
alt=”Advertising” class=”touts”/></a>
</div>
<div class=”two-col”>
<h2><a href=”http://www.youworkforthem.
com/?a_aid=239b8b0a&a_bid=3f929196”
title=”You Work For Them”>You Work For
Them</a></h2>
<a href=”http://www.youworkforthem.
com/?a_aid=239b8b0a&a_bid=3f929196”
title=”You Work For Them”><img src=”http://
www.thegridsystem.org/wp-content/themes/
ub_futurositymag/images/ywft_tout.jpg” alt=”You
Work For Them” class=”touts”/></a>
</div>
<div class=”clear”></div>
<div class=”two-col”>
<h2><a href=”http://www.flickr.com/groups/
thegridsystem/” title=”The Grid System Flickr
Group”>The Grid System Flickr Group</a></
h2>
<ul class=”flick”>
<li class=”flickimage”><a href=”http://
www.flickr.com/photos/world1984/3636045843/
in/pool-962722@N23” title=”Merde
interdite”><img src=”http://www.thegridsystem.org/cache/3636045843_e46803c3da_s.
jpg” alt=”Merde interdite” /></a></li><li
class=”flickimage”><a href=”http://www.
flickr.com/photos/world1984/3634725113/in/
pool-962722@N23” title=”Visionnaire”><img
src=”http://www.thegridsystem.org/
cache/3634725113_b1b93fea5e_s.
jpg” alt=”Visionnaire” /></a></li><li
class=”flickimage”><a href=”http://www.
flickr.com/photos/nfphotos/3630065490/
in/pool-962722@N23” title=”Repeat
visual”><img src=”http://www.thegridsystem.org/cache/3630065490_68e2228c83_s.
jpg” alt=”Repeat visual” /></a></li><li
class=”flickimage”><a href=”http://www.
flickr.com/photos/nfphotos/3629252993/in/
pool-962722@N23” title=”Repeat visual/
repeat”><img src=”http://www.thegridsystem.org/cache/3629252993_693c504d94_s.
jpg” alt=”Repeat visual/ repeat” /></a></li><li
class=”flickimage”><a href=”http://www.flickr.
com/photos/9621958@N04/3492645179/in/
pool-962722@N23” title=”Michael’s Personalized
Wrapping Paper”><img src=”http://www.thegridsystem.org/cache/3492645179_44f22c236c_s.
jpg” alt=”Michael’s Personalized Wrapping
Paper” /></a></li><li class=”flickimage”><a
href=”http://www.flickr.com/photos/petervanlancker/3624713598/in/pool-962722@
N23” title=”HAMBURGEFONTIVS”><img
src=”http://www.thegridsystem.org/
cache/3624713598_97e94fcb42_s.jpg”
alt=”HAMBURGEFONTIVS” /></a></li><li
class=”flickimage”><a href=”http://www.
flickr.com/photos/benbenworld/3148821514/
in/pool-962722@N23” title=”Cartes de
visite”><img src=”http://www.thegridsystem.org/cache/3148821514_50be6d5a2d_s.
jpg” alt=”Cartes de visite” /></a></li><li
class=”flickimage”><a href=”http://www.
flickr.com/photos/benbenworld/2622167740/in/
pool-962722@N23” title=”Pecha Kucha Paris
#5”><img src=”http://www.thegridsystem.
org/cache/2622167740_33b36c7b0c_s.jpg”
alt=”Pecha Kucha Paris #5” /></a></li><li
class=”flickimage”><a href=”http://www.
flickr.com/photos/benbenworld/2622167638/in/
pool-962722@N23” title=”Pecha Kucha Paris
#5”><img src=”http://www.thegridsystem.
org/cache/2622167638_e5c645d426_s.jpg”
alt=”Pecha Kucha Paris #5” /></a></li><li
class=”flickimage”><a href=”http://www.
flickr.com/photos/benbenworld/2622168314/in/
pool-962722@N23” title=”Pecha Kucha Paris
#5”><img src=”http://www.thegridsystem.
org/cache/2622168314_4674970799_s.jpg”
alt=”Pecha Kucha Paris #5” /></a></li><li
class=”flickimage”><a href=”http://www.flickr.
com/photos/andrewdavidpark/3484559222/
in/pool-962722@N23” title=”William Johnson
Photography”><img src=”http://www.thegridsystem.org/cache/3484559222_edfd9b21ab_s.jpg”
alt=”William Johnson Photography” /></a></
li><li class=”flickimage”><a href=”http://www.
flickr.com/photos/andrewdavidpark/3484559346/
in/pool-962722@N23” title=”William Johnson
Photography”><img src=”http://www.thegridsystem.org/cache/3484559346_9138a542e8_s.jpg”
alt=”William Johnson Photography” /></a></li>
</ul>
</div>
<div class=”two-col”>
<h2><a href=”http://www.typeneu.com/”
title=”TypeNeu”>TypeNeu</a></h2>
<a href=”http://www.typeneu.com/”
title=”TypeNeu”><img src=”http://www.thegridsystem.org/wp-content/themes/ub_futurositymag/images/typeneu_tout.gif” alt=”Advertising”
class=”touts”/></a>
</div>
<div class=”two-col”>
<h2><a href=”http://www.blanka.co.uk/”
title=”Blanka”>Blanka</a></h2>
<a href=”http://www.blanka.co.uk/”
title=”Blanka”><img src=”http://www.thegridsystem.org/wp-content/themes/ub_futurositymag/
images/blanka_tout.jpg” alt=”Advertising”
class=”touts”/></a>
</div>
<!-- Stop editing here. -->
</div><!-- #content -->
</div><!-- #container -->
<div id=”footer”>
<span>Copyright © 2008 <a
href=”http://www.yearofthesheep.com/”
title=”Antonio Carusone”>Antonio Carusone</
a>, unless otherwise noted. All rights reserved.</span>
</div><!-- #footer -->
</div><!-- #wrapper .hfeed -->
</body>
</html>
46
/*
THEME NAME: Upstart Blogger Futurosity
Magazine Theme
THEME URI: http://www.upstartblogger.com/
wordpress-theme-upstart-blogger-futurosityaltera
*/
/* Reset */
*{
margin:0;
padding:0;
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p
re,form,fieldset,input,textarea,a,p,blockquo
te,th,td {
margin:0;
padding:0;
}
img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th
,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
#wrapper{
margin: 0;
padding: 0;
}
/* Structure */
body{
background-image:url(http://www.
thegridsystem.org/wp-content/themes/ub_futurositymag/images/grid.gif);
background-repeat: repeat-y;
background-position: center top;
margin:auto;
width:961px;
}
#container{
margin: 0;
padding: 0;
}
#content{
display:inline;
float:left;
width:961px;
margin:0 0 0 8px;
}
#header{
height:186px;
margin:0;
width:945px;
margin-left:8px;
}
#footer{
border-top:1px solid silver;
clear:both;
display:inline;
float:left;
margin: 18px 0 0 8px;
padding: 21px 0 40px 0;
width:945px;
}
#show {
display: none;
}
#blog-title{
margin:38px 0 0 0;
padding:0;
}
#blog-description{
position: absolute;
top:0;
margin: 53px 0 0 160px;
padding:0;
width:145px;
}
#quote{
position: absolute;
top:0;
margin: 53px 0 0 320px;
width:305px;
}
#styleswitch {
position: absolute;
top: -1px;
margin-left: 800px;
padding-top: 22px;
}
#styleswitch a{
padding: 6px 6px 6px 6px;
color: #fff;
background-color:#bbb;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#styleswitch a:hover {
background-color: #ff5247;
}
#topnav {
position: absolute;
top: -1px;
margin-left: 800px;
padding-top: 54px;
}
#topnav a{
padding: 6px 6px 6px 6px;
color: #fff;
background-color:#000;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}
#topnav a:hover {
background-color: #ff5247;
}
h2.latest{
border-top:1px solid silver;
padding: 17px 0 0 0;
margin-bottom: 34px;
}
ul.latest{
float:left;
padding-right:15px;
width:145px;
}
ul.latestinside{
margin:0;
height: 208px;
}
.latest-excerpt p{
margin: 1px 0 0 0;
}
.single .entry-content p{
margin-bottom: 16px;
}
.single .entry-content h4{
margin-bottom: 16px;
}
.linkcat h2{
border-top:1px solid silver;
padding-top: 17px;
margin-bottom: 3px;
}
ul.xoxo.blogroll {
margin-top: 35px;
height: 623px;
}
.viewlink {
padding-top: 1px;
margin-bottom: 10px;
}
.three-col{
border-top:1px solid silver;
float:left;
width:465px;
}
.two-col,#post-bottom .two-col,#search-bottom .two-col,#error-bottom .two-col{
border-top:1px solid silver;
display:inline;
float:left;
margin: 33px 15px 26px 0;
padding:0 0 0 0;
width:305px;
}
.two-col h2,#post-bottom h2,#search-bottom
h2,#error-bottom h2{
margin: 17px 0 3px 0;
padding:0 0 0 0;
}
.one-col,#post-bottom .one-col,#search-bottom .one-col,#error-bottom .one-col{
border-top:1px solid silver;
display:inline;
float:left;
margin: 33px 15px 26px 0;
padding:0 0 0 0;
width:145px;
}
.one-col h2,#post-bottom h2,#search-bottom
h2,#error-bottom h2{
margin: 17px 0 3px 0;
padding:0 0 0 0;
}
.one-col ul {
list-style: none;
}
.clear{
clear:both;
margin: 0 0 0 0;
padding:32px 0 0 0;
}
img.touts{
max-width: 305px !important;
margin-top: 11px;
float: left;
}
ul.flick{
list-style: none;
margin: 14px 0 0 0 !important;
}
ul.flick img{
display: inline;
margin: 0 1px 1px 0;
}
li.flickimage{
display: inline;
}
li.feedcount{
border: 0;
margin: 3px 0 0 0;
}
p.about{
margin: 0 0 16px 0;
}
.single .template-thumb {
margin: 11px 0 20px 0;
}
/* Archives */
.left-col{
border-top:1px solid silver;
float:left;
width:305px;
margin: 0 15px 0 8px;
}
h2.page-title,.search h2.page-title,.single
h2.page-title,.four04 h2.page-title{
margin: 17px 0 0 0;
}
.archive #content,.search #content,.single
#content,.tag #content,.four04 #content,
#index #content{
border-top:1px solid silver;
display:inline;
float:left;
margin: 0 15px 0 0;
padding: 17px 0 0 0;
width:465px;
}
.archive .post,.search .post,.single .post,.tag
.post,.four04 .post{
margin: 0 0 29px 0;
}
.archive h2.entry-title,.archives h2,.search
h2.entry-title,.search h2,.single h2.entry-title,.
single h2,.tag h2.entry-title,.tag h2,.four04
h2.entry-title,.four04 h2{
border:none;
margin: 0 0 3px 0;
padding:0;
width:465px;
}
.archive .entry-content,.search .entry-content,.
single .entry-content,.tag .entry-content,.
four04 .entry-content{
border:none;
clear:both;
float:left;
width:465px;
margin: 0 0 0 0;
}
.archive .entry-meta,.search .entry-meta,.
single .entry-meta,.tag .entry-meta{
border:none;
}
.search .post-noresults{
margin: 0 0 0 0;
}
.sidebar{
border-top:1px solid silver;
float: left;
width:145px;
margin: 0 0 0 0;
padding: 17px 0 0 0;
}
.sidebar h2{
margin: 0 0 0 0;
}
ul.sidelinks{
margin: 3px 0 13px 0;
}
.post-tags{
margin: 3px 0 13px 0;
}
.sidetags{
margin: 3px 0 13px 0;
}
#cat-bottom{
display:inline;
float:left;
width:961px;
margin: 13px 0 0 8px;}
CSS
Observando o css do
site, podemos notar
que ele também é
emprestado de outrem e provavelmente foi adaptado para
esse layout de site,
mas no entanto, não
conseguimos determinar o que é novo e
o que é emprestado
do tema.
47
#archive-bottom{
display:inline;
float:left;
width:961px;
margin: 13px 0 0 8px;
}
#search-bottom{
display:inline;
float:left;
width:961px;
margin: 13px 0 0 8px;
}
#post-bottom{
display:inline;
float:left;
width:961px;
margin: 13px 0 0 8px;
}
#tag-bottom{
display:inline;
float:left;
width:961px;
margin: 13px 0 0 8px;
}
#error-bottom{
display:inline;
float:left;
width:961px;
margin: 13px 0 0 8px;
}
/* Archives End */
#search{
filter:alpha(opacity=40);
-moz-opacity:0.4;
opacity:.40;
}
#search:hover{
filter:alpha(opacity=100);
-moz-opacity:1.0;
opacity:1.00;
}
#search input{
float: right;
width:141px;
margin-top: 124px;
font-size: 11px;
background:#ccc;
}
#nav-above{padding:24px 0;}
#nav-above .nav-next{clear:both;float:right;}
#nav-above h3{clear:both;}
#nav-below h3{clear:both;}
#nav-below,.commentlink,#respond{clear:both;}
.alignleft{float:left;margin:0 15px 10px 0;}
.alignright{float:right;margin:0 0 10px 15px;}
.nav-next{clear:both;float:left;paddingbottom:12px;}
.nav-previous{float:left;}
#search input:focus{
background:#fff;
}
/* Links */
a:link,a:visited{
color:#000;
text-decoration: none;
font-weight: bold;
}
a:hover{
color: #ff5247;
}
/* Typography */
body {
font-family: Helvetica, Arial, Sans-Serif;
color: #444;
font-size: 100%;
line-height:16px;
text-align: left;
}
h1,h2,h3,h4,h5,h6{
font-weight:bold;
}
H1 {
font-size:24px;
color:#000;
}
H2 {
font-size:18px;
color:#000;
}
H3 {
font-size:16px;
color:#000;
}
H4 {
font-size:12px;
color:#000;
}
blockquote, blockquote p{
text-indent:-0.8em;
font-size: 12px;
font-style: oblique;
}
blockquote strong{
font-weight: bold;
}
.latest-excerpt p{
font-size: 12px;
}
li.list-time{
font-size: 12px;
font-weight: bold;
color: #000;
}
.two-col p{
font-size: 12px;
}
.two-col ul{
font-size: 12px;
}
.one-col p{
font-size: 12px;
}
.one-col ul{
font-size: 12px;
}
ul.xoxo.blogroll {
font-size: 12px;;
font-weight: bold;
}
.viewlink {
font-size: 12px;
font-weight: bold;
}
#blog-description p{
font-size: 12px;
}
#styleswitch {
font-size:11px;
font-weight:bold;
}
#topnav {
font-size:11px;
font-weight:bold;
}
#nav-above h3{
font-size:16px;
}
#nav-below h3{
font-size:16px;
}
.archive .entry-content,.search .entry-content,.
single .entry-content,.tag .entry-content,.
four04 .entry-content{
font-size: 12px;
}
.archive .entry-meta,.search .entry-meta,.
single .entry-meta,.tag .entry-meta{
font-size: 12px;
font-weight: bold;
color:#000;
}
.cat-tags{
font-weight: bold;
}
.edit-link{
font-weight: bold;
}
li.edit-link{
font-size: 12px;
}
h2.page-title,h2.entry-title{
color:#000;
}
.left-col{
text-align:left;
}
.sidebar{
font-size: 12px;
font-weight: bold;
}
.center{
text-align:center;
}
#footer{
font-size:11px;
}
48
http://www.flickr.
com/photos/tobias_
assimil/3601826205/
in/photostream/
O Flickr é uma das
principais ferramentas de compartilhamento e publicação
de imagens, e foi
comprada pela Yahoo
há algum tempo.
A ferramenta mistura a postagem de
imagens, criação
e participação em
grupos e fóruns de
discussão e redes
de relacionamento.
Um site tipicamente
web 2.0.
O visual é, sem
dúvida minimalista,
exitem poucos items
aparentes no menu,
e pouca interferência
sobre as imagens,
isto pode ser inclusive, parte de seu
sucesso.
49
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN">
<html xmlns:dc="http://purl.org/dc/terms/"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:cc="http://creativecommons.org/ns#">
<head>
<title>ser chic on Flickr - Photo Sharing!</
title>
<meta http-equiv="Content-Type" content="text/
html; charset=UTF-8">
<meta name="keywords" content="photography,
digital photography, cameraphones, camera, hobby
photography, photo, digital camera, compactflash,
smartmedia, cameras, canon, nikon, olympus,
fujifilm, video">
<meta name="description" content="ser chic">
<meta http-equiv="imagetoolbar" content="no">
<meta name="title" content="ser chic" />
<meta name="medium" content="image" />
<link rel="image_src" href="http://farm4.static.
flickr.com/3414/3601826205_6d90e7098c_m.jpg"
/>
<link rel="canonical" href="http://www.flickr.
com/photos/tobias_assimil/3601826205/" />
<meta name="viewport" content="width=820">
<link type="text/css" rel="stylesheet"
href="http://l.yimg.com/g/css/c_fold_main.css.
v73751.64777.71350.14">
<link rel="shortcut icon" type="image/ico" href="/
favicon.ico">
<link type="text/css" rel="stylesheet"
href="http://l.yimg.com/g/css/c_fold_photo.css.
v72999.67580.69785.64777.14">
<link type="text/css" rel="stylesheet"
href="http://l.yimg.com/g/css/c_bo_selecta.css.
v999.1245290295.14">
<!--[if LT IE 7]>
<style type="text/css">
.trans_png {
behavior: url('/javascript/pngbehavior2.htc');
border:0;
}
</style>
<![endif]-->
<script type="text/javascript">
var global_magisterLudi = '96b1951795c91dc03467cfdd95a798f0',
global_auth_hash = '195e4e74ea2601cc380758a847504edf',
global_auth_token = '',
global_flickr_secret = 'cf787ad5963cd371',
global_slideShowVersion = '6708',
global_slideShowCodeVersion = '34351',
global_slideShowVersionV2 = '33427',
global_slideShowCodeVersionV2 = '49745',
global_slideShowTextVersion = '66488',
global_slideShowVersionV3 = '71649',
global_nsid = '99894645@N00',
global_ispro = 0,
global_dbid = '919749',
global_name ='garotasimpatica',
global_expire ='0',
global_icon_url ='http://l.yimg.com/g/images/buddyicon.jpg#99894645@N00',
global_tag_limit = '75',
global_collection_depth_limit = 5,
global_stewartVersion = '71377',
global_contact_limit = '3000',
global_eighteen = 1,
global_group_limit = 10,
global_photos_ids_limit = 20,
one_photo_show_belongs = 0,
prefs_isset_viewgeo = 0,
photos_url = '/photos/99894645@N00/',
disable_stewart = 0;
disable_geo = 0;
var global_rper = 0;
var global_widget_carets = 0;
var global_explore_search = 0;
var global_intl_lang = 'en-us';
var _photo_root = 'http://farm.static.flickr.com/';
var _site_root = 'http://www.flickr.com';
var _images_root = 'http://l.yimg.com/g/images';
var _intl_images_root = 'http://l.yimg.com/g/
images/en-us';
var do_bbml = 1;
</script>
<script type="text/javascript" src="http://l.yimg.
com/g/javascript/global.js.v73010.14"></script>
<script type="text/javascript">
</script>
<script type="text/javascript" src="http://l.yimg.
com/g/javascript/fold_main.js.v48851.48851.488
51.48851.48851.38771.48851.48851.73761.387
71.71746.71745.62864.38771.66362.72618.73
326.69832.38771.63688.38771.73289.67088.5
5944.73491.14"></script>
<script type="text/javascript" src="http://l.yimg.
com/g/javascript/s_output_en-us.js.b34cffc1bd4fc4
f000e74458534fb6ab"></script>
<script type="text/javascript">
YAHOO.util.Event.addListener(window, 'load',
F._window_onload);
YAHOO.util.Event.addListener(window, 'resize',
F._window_onresize);
YAHOO.util.Event.addListener(window, 'blur',
F._window_onblur);
YAHOO.util.Event.addListener(window, 'focus',
F._window_onfocus);
YAHOO.util.Event.addListener(window, 'unload',
F._window_onunload);
</script>
<script type="text/javascript">
var global_joinDate = F.convert_unix_time_
stamp('1121139319');
var global_time_stamp = '090617185815';
fixMaxWidth_getWidth = (navigator.userAgent.
match(/MSIE 6/i)?function(el) {
return el.currentStyle['max-width'];
}:function(el){
return el.currentStyle['maxWidth'];
});
fixMaxWidth = function(el) {
try {
el.runtimeStyle.behavior = 'none';
var mw = fixMaxWidth_getWidth(el);
var nmw = parseInt(mw,10) || 10000;
var cW = parseInt(el.offsetWidth);
var cH = parseInt(el.offsetHeight);
var ratio = (cH/cW);
if (el.offsetWidth>nmw) {
el.style.width = (nmw+'px');
if (!isNaN(cH) && cH) {
el.style.height = (Math.ceil(nmw*ratio)+'px');
}
}
} catch(e) {
// oh well
}
}
// Dean Edwards/Matthias Miller/John Resig
/* for Mozilla/Opera9 */
if (document.addEventListener) {
document.addEventListener("DOMContentLoad
ed", F._window_onload_dom, false);
}
/* for Internet Explorer */
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer
src=javascript:void(0)><\/script>");
var script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete") {
F._window_onload_dom(); // call the onload
handler
}
};
/*@end @*/
/* for Safari */
if (/WebKit/i.test(navigator.userAgent)) { // sniff
F.onload_dom_timer = setInterval(function() {
if (/loaded|complete/.test(document.
readyState)) {
F._window_onload_dom(); // call the onload
handler
}
}, 10);
}
F.keyboardShortcuts.enableAll();
</script>
<!--[if IE]>
<style type="text/css">
img.notsowide {
behavior:expression(fixMaxWidth(this));
}
</style>
<![endif]-->
<script type="text/javascript" src="http://l.yimg.
com/g/javascript/fold_photo.js.v71310.72034.689
05.67835.69786.68459.60180.65929.72659.7101
1.14"></script>
<script type="text/javascript">
F.output.format_strs.page_photo_hi_im_admin =
'Oi! Sou administrador de um grupo chamado <a
href=\'%s/groups/%s/\'>%s</a> e nós adoraríamos ter isto adicionado ao grupo!';
page_photo_id = '3601826205';
var page_p = global_photos['3601826205'] = {};
page_p.id = '3601826205';
var page_printing_country_name = '';
var page_printing_country_code = '';
var page_printing_provider = '0';
page_p.server = '3414';
page_p.secret = '6d90e7098c';
page_p.url = '/photos/tobias_assimil/3601826205/';
page_p.ownersUrl = '/photos/tobias_assimil/';
page_p.zoomUrl = '/photos/tobias_assimil/3601826205/sizes/o/in/photostream/';
page_p.tagsA = [];
page_p.tags_rawA = [];
page_p.isPublic = 1;
page_p.title = 'ser chic';
page_p.swfObjSrc = 'http://l.yimg.com/g/javascript/swfobject.js.v55944.14';
page_p.isOwner = false;
page_p.ownerNsid = '70469049@N00';
page_p.notesA = [];
var page_print_orderA = [];
var page_user_can_create_sets = 0;
var page_current_url = '/photos/tobias_assimil/3601826205/in/photostream/';
var page_hp_url;
var page_tinyprints_url;
var page_qoop_url = 'http://www.qoop.
com/photobooks/flickr_user/flickr_start.
php?product=prints&b_id=photoID-3601826205';
var page_tinyprints_url = 'http://www.tinyprints.
com/flickr';
deja_view_check('p3601826205');
var in_groupsObj = function(nsid,status) {this.
nsid=nsid;this.status=status};
var in_groupsA = new Array();
var geo_map_url = '/photos/tobias_assimil/3601826205/map/';
var geo_possessed_username = 'tobias_
assimil\'s';
var geo_thmb = 'http://farm4.static.flickr.com/3414
/3601826205_6d90e7098c_s.jpg';
var _has_geo = false;
var _is_editing_geo = false;
var picnik_urlkit_path = "http://l.yimg.com/g/apps/
picnikV2/urlkit.js.v67962.14";
var _is_picnik_basket = true;
var picnik_swf_path = "http://l.yimg.com/g/apps/
picnikV2/app/.v999.1245290295?apps/picnikV2/
app/.14?rel=";
var picnik_token = "";
var picnik_set_id = "";
</script>
</head>
<body>
<div id="beacon"><img src="http://geo.
yahoo.com/f?s=792600146&t=e45bbc4232
53772b61f3a1501079356c&r=http%3A%2F
%2Fwww.flickr.com%2Fphotos%2Ftobias_
assimil%2F3601826399%2F&fl_
ev=0&lang=en&intl=us" width="0" height="0" alt=""
/></div>
<a name="top"></a>
<div class="TopBar" id="TopBar">
<table cellspacing="0" class="Header" border="0">
<tr>
<td class="FlickrLogo">
<a href="/"><img src="http://l.yimg.
com/g/images/flickr_logo_gamma.gif.v59899.14"
id="FlickrLogo" width="98" height="26" alt="Flickr
logo. If you click it, you'll go home" />
</a>
</td>
<td class="Status">
Signed in as <a href="/account"
class="Pale">garotasimpatica</a>
HTML
O minimalismo
aparente, é no
entanto, somente
a máscara de um
sistema gigantesco
de mecanismos de
código, principalemente JavaScript,
para manter todas
as funcionalidades
operantes.
Para cada link na
interface, há uma
grande quantidade de
código e de indicações de CSS.
No entanto, apesar
disso, o HTML é
bem organizado. e a
aparência caótica é
devido ao número de
tabs.
50
<a href="/mail/"
style="background-color: #fff;"><img src="http://l.
yimg.com/g/images/spaceout.gif" alt="Check your
FlickrMail" title="Check your FlickrMail" width="16"
height="16" style="vertical-align:middle" class="fsprite fs-icon_unread"/></a>
<span id="UnreadMessageChunk">(<a
href="/mail/"><b id="UnreadMessageCount">2</
b> new</a>)</span>
<a href="/help/">Help</a>
<a href="/logout.gne?magic_cookie=195
e4e74ea2601cc380758a847504edf">Sign Out</
a>
</td>
</tr>
</table>
<table cellspacing="0" class="NavBar" bor-
above">Invite your Friends</a>
<a title="See invites you've sent" href="/
invite/history/">Invite History</a>
<a title="See Guest passes you've sent" href="/
invite/history/guests/">Guest Pass History</a>
</form>
<a href="/gift/" class="menu_item_line_
above">Give the gift of Flickr</a>
</div>
</li>
<li class="menu_li" id="candy_nav_button_
groups"><span><a href="/groups/">Groups</a>
class="candy_button_bar">
<ul class="site_nav_menu_buttons">
<li class="menu_li" id="candy_nav_button_search"><span><a href="/search/" onclick="_
do_header_search('all', '', '/search/', 'int', '');return
false;">Search</a> <img src="http://l.yimg.
com/g/images/site_nav_caret_split_default.png"
class="nav_button_caret" width="18" height="15"
alt="More options"></span>
<div class="candy_menu" id="candy_nav_
menu_search">
<a title="Everyone's Uploads" href="/
search/" onclick="_do_header_search('all', null,
null, 'int', ''); return false;"><b>·</b>
Everyone's Uploads</a>
<img src="http://l.yimg.com/g/images/site_nav_
caret_split_default.png" class="nav_button_caret"
width="18" height="15" alt="More options"></
span>
<div class="candy_menu" id="candy_nav_
menu_groups">
<a href="/groups/">Your Groups</a>
<a href="/recent.gne">Recent Changes</
a>
<a class="menu_item_line_above" href="/
search/groups/">Search for a Group</a>
der="0">
<tr>
<td class="Primary">
<a class="menu_item_line_above" href="/
groups_create.gne">Create a New Group</a>
</div>
</li>
<div id="candy_nav_button_bar" class="candy_button_bar">
<ul class="site_nav_menu_buttons">
<li class="menu_li" id="candy_nav_button_
<li class="no_menu_li"><span><a
href="/">Home</a></span></li>
<li class="menu_li" id="candy_nav_but-
ton_you"><span><a href="/photos/99894645@
N00/">You</a> <img src="http://l.yimg.com/g/
images/site_nav_caret_split_default.png"
class="nav_button_caret" width="18" height="15"
alt="More options"></span>
<div class="candy_menu" id="candy_nav_
menu_you">
<a href="/photos/99894645@N00/">Your
Photostream</a>
<a href="/photos/99894645@N00/
sets/">Your Sets</a>
<a href="/photos/99894645@N00/
archives/">Your Archives</a>
<a href="/photos/99894645@N00/
tags/">Your Tags</a>
<a title="Photos and videos on a map"
href="/photos/99894645@N00/map/">Your Map</
a> <a href="/photos/99894645@N00/
favorites/">Your Favorites</a>
<a href="/photos/99894645@N00/
stats/">Your Stats</a>
<a href="/activity/" class="menu_item_line_
above">Recent Activity</a>
<a href="/photos/upload/"
class="menu_item_line_above">Upload Photos
and Videos</a>
<a href="/account/" class="menu_item_
line_above">Your Account</a>
<a href="/people/99894645@N00/">Your
Profile</a>
<a href="/mail/" class="menu_item_line_
above">FlickrMail</a>
</div>
</li>
<li class="menu_li" id="candy_nav_but-
ton_organize"><span><a href="/photos/
organize/">Organize</a> <img src="http://l.yimg.
com/g/images/site_nav_caret_split_default.png"
class="nav_button_caret" width="18" height="15"
alt="More options"></span>
<div class="candy_menu" id="candy_nav_
menu_organize">
<a href="/photos/organize/">All your
content</a>
<a href="/photos/organize/?start_
batch=recent_uploads">Most recent upload</a>
<a href="/photos/organize/?start_
tab=sets">Your Sets</a>
<a href="/photos/organize/?start_
tab=map">Your Map</a>
</div>
</li>
<li class="menu_li" id="candy_nav_button_
contacts"><span><a href="/photos/99894645@
N00/friends/">Contacts</a> <img src="http://l.
yimg.com/g/images/site_nav_caret_split_default.png" class="nav_button_caret" width="18"
height="15" alt="More options"></span>
<div class="candy_menu" id="candy_nav_
menu_contacts">
<a title="Your contacts' photostream"
href="/photos/99894645@N00/friends/">Most
Recent Uploads</a>
<a href="/people/99894645@N00/
contacts/">Contact List</a>
<a href="/search/people/">People
Search</a>
<a href="/invite/" class="menu_item_line_
explore"><span><a href="/explore/" alt="Explore
Flickr">Explore</a> <img src="http://l.yimg.
com/g/images/site_nav_caret_split_default.png"
class="nav_button_caret" width="18" height="15"
alt="More options"></span>
<div class="candy_menu" id="candy_nav_
menu_explore">
<a href="/explore/">Explore Page</a>
<a href="/explore/interesting/7days/">Last
7 Days Interesting</a>
<a href="/photos/tags/">Popular Tags</a>
<a href="/explore/
interesting/2009/06/">Calendar</a>
<a href="/photos/">Most Recent Uploads</a>
<a href="/explore/video/">Video on
Flickr</a>
<a href="/analog/">Explore Analog</a>
<a href="/explore/clock/"
title="Flickr Clock">Flickr Clock</a>
<!--<a href="/explore/
interesting/2008/06/">A Year Ago Today</a>-->
<a title="Photos and videos on a
map" href="/map/" class="menu_item_
line_above">World Map</a>
<a href="/places/">Places</a>
<a href="/commons/" class="menu_item_
line_above">The Commons</a>
<a href="/creativecommons/">Creative
Commons</a>
<a href="http://blog.flickr.com/"
class="menu_item_line_above">FlickrBlog</a>
<a href="http://code.flickr.com/">code.
flickr</a>
<a href="/services/">Flickr Services</a>
<a href="/do/more/" class="menu_item_
line_above">Do More, Order Prints</a>
<a href="/cameras/">Camera Finder</a>
</div>
</li>
</ul>
</div>
<script type="text/javascript">F.decorate(_
ge('candy_nav_button_bar'), F._nav_button_bar).bar_go_go_go();</script>
</td>
<td id="search_header_form_td">
<form action="/search/" method="get" onsubmit="_do_header_search('all', '', '/search/', 'int',
'');return false;" id="headersearchform">
<input name="q" id="header_search_q"
type="text" class="Box" value="">
<input name="w" type="hidden" value="all">
<input name="m" type="hidden" value="">
<input name="s" type="hidden" value="int">
<input name="mt" type="hidden" value="">
<input name="referer_searched"
type="hidden" value="">
<span id="headersearchbutton1"><input
value="Search" type="image" src="http://l.yimg.
com/g/images/header_search_button.png" /></
span>
</td>
<td id="search_header_button_td" width="82">
<div id="candy_search_button_bar"
<a title="From Your Contacts" href="/
search/?w=contacts" onclick="_do_header_
search('contacts'); return false;">From Your
Contacts</a>
<a title="From Your Friends" href="/
search/?w=ff" onclick="_do_header_search('ff');
return false;">From Your Friends</a>
<a title="Your Photostream" href="/
search/" onclick="_do_header_search('99894645@
N00', ''); return false;">Your Photostream</a>
<a title="Groups" href="/search/groups/" onclick="_do_header_search('', '', '/search/groups/');
return false;">Groups</a>
<a title="Flickr Members" href="/search/
people/" onclick="_do_header_search('', 'names', '/
search/people/'); return false;">Flickr Members</
a>
<a title="For a Location" href="/map/"
onclick="_do_header_search('location', '', '/map/');
return false;">For a Location</a>
<a class="menu_item_line_above"
title="tobias_assimil's Photostream" href="/
search/" onclick="_do_header_search('70469049@
N00', ''); return false;">tobias_assimil's Photostream</a>
</div>
</li>
</ul>
</div>
<script type="text/javascript">F.decorate(_
ge('candy_nav_button_search'), F._nav_button).button_go_go_go();</script>
<script type="text/javascript">
var b1 = _ge('headersearchbutton1');
b1.parentNode.removeChild(b1);
_ge('search_header_form_td').style.paddingBottom = '2px';
_ge('candy_search_button_bar').style.display =
'block';
var f = _ge('headersearchform');
if (f.q.value == '') f.q.style.color = '#999';
f.q.onfocus = function() {
if (this.value == '') this.value = '';
this.style.color = '#222';
if (window.ymap) ymap._disableKeys = true;
}
f.q.onblur = function() {
if (this.value != '') return;
this.style.color = '#999';
this.value = '';
if (window.ymap) ymap._disableKeys = false;
}
var _do_header_search = function(w, m, action,
s, mt) {
var f = _ge('headersearchform');
if (f.q.value == '') f.q.value = '';
f.q.value = f.q.value.trim();
// do location search if the location search
window is open, or if w == 'location'
if (w == 'location' || (_ge('loc_search_div') &&
_ge('loc_search_div').style.display != 'none')) {
if (!_ge('loc_search_div')) {
// create the location search crap!
var div = document.
createElement('div');
div.id = 'loc_search_div';
document.body.appendChild(div);
var page_type = 'site';
F.decorate(div, F._loc_search_div).div_go_
go_go(page_type);
}
try {_ge('loc_search_div').div_do_loc_
search()} catch(err) {writeDebug(err)};return false;
return;
}
f.w.value = w;
f.m.value = (m) ? m : '';
f.s.value = (s) ? s : '';
f.mt.value = (mt) ? mt : '';
f.action = (action) ? action : '/search/';
51
if (f.m.value == 'tags' && f.q.value &&
f.q.value.indexOf(' ') == -1) {
var alias = 'tobias_assimil';
alias = (alias) ? alias : f.w.value;
var turl = '/photos/';
if (f.w.value == 'all') {
turl+= 'tags/'+encodeURIComponent(f.q.
value);
} else {
turl+= alias+'/tags/'+encodeURICompon
ent(f.q.value);
}
document.location = turl;
return;
}
var qsA = ['q='+encodeURIComponent(f.q.value)];
if (f.w.value) qsA.push('w='+encodeURIComp
onent(f.w.value));
if (f.m.value) qsA.push('m='+encodeURICom
ponent(f.m.value));
if (f.s.value) qsA.push('s='+encodeURICompo
nent(f.s.value));
if (f.mt.value) qsA.
push('mt='+encodeURIComponent(f.mt.value));
if (f.referer_searched.value) qsA.push('referer_
searched='+encodeURIComponent(f.referer_
searched.value));
style="visibility:hidden;" action="/blog.gne"><input
type="hidden" name="magic_cookie" valu
e="195e4e74ea2601cc380758a847504e
df" /><input type="hidden" name="photo"
value="3601826205"><input type="hidden"
name="blog" value="0"></form></div>
var surl = f.action+'?'+qsA.join('&');
document.location = surl;
}
</script>
</td>
</tr>
</table>
</div>
<div id="Main" class="">
<!-- CONFIRM MSGS -->
<!-- PHOTO CONTENT: DESCRIPTION,
NOTES, COMMENTS -->
<div id="About">
<noscript>
<div style="margin: 10px 0; padding:
8px 8px 8px 32px; background: #e2ecf8 url(http://l.
yimg.com/g/images/icon_info.gif) no-repeat 8px
8px;">
To take full advantage of Flickr,
you should use a JavaScript-enabled browser
and<br> <a href="http://www.macromedia.com/
<div id="button_bar" ><a href="#addtofaves"
onclick="this.blur();return false" id="photo_
gne_button_add_to_faves" class="photo_
gne_button sprite-add_to_faves_grey"
style="width:54px;*width:56px" alt="Add
to faves"> </a><a href="#blogthis"
onclick="this.blur();return false" id="photo_gne_
button_blog_this" class="photo_gne_button spriteblog_this_grey" style="width:45px;*width:47px"
alt="Blog this"> </a><a href="/photos/tobias_assimil/3601826205/sizes/o/in/photostream/"
id="photo_gne_button_zoom" class="photo_gne_
button sprite-zoom_grey" onclick="this.blur();
return false;" style="width:47px;*width:49px"
alt="All sizes"> </a></div><script
type="text/javascript">F.decorate(_ge('button_
bar'), F._photo_button_bar).bar_go_go_
go(3601826205, 0);</script><div><div
id="photo_notes" class="photo_notes"><div
id="notes_text_div"></div><script type="text/
javascript">var page_note_ratio = 1;</script></
div><div id="comm_div"></div><div id="rotate_
div"></div><div id="shadow_div"></div><div
id="photoImgDiv3601826205" style="width:502px"
class="photoImgDiv">
<img src="http://farm4.static.flickr.
com/3414/3601826205_6d90e7098c.jpg?v=0"
alt="ser chic by tobias_assimil." title=""
width="500" height="500" onload="show_
notes_initially();" class="reflect"></div><script
type="text/javascript">F.decorate(_ge('photo_
notes'), F._photo_notes).notes_go_go_
go(3601826205, 'http://farm4.static.flickr.
com/3414/3601826205_6d90e7098c_t.
jpg', '3.1444');</script><form id="fave_form"
method="post" style="visibility:hidden;"><input
type="hidden" name="magic_cookie" value="19
5e4e74ea2601cc380758a847504edf" /><input
type="hidden" name="faveadd" value="0"><input
type="hidden" name="faveremove" value="0"></
form><form id="blog_form" method="post"
<span id="ShareButtonContainer"><a
href="/send?photo=3601826205"
id="ShareButton" onclick="if (F.sharing_code_
loaded) _ge('ShareMenu').toggle(); return
false;"><em>Share This</em></a></span>
</div>
<div id="ShareMenu" class="yui-skin-sam sharemenu-bs">
<ul id="ShareOptions">
<li id="SharingQuickShare" class="share_
<!-- ############## COMMENTS -->
<div id="DiscussPhoto">
style="overflow: visible; height: auto; display:
block;">
<form id="AutoCompleteForm">
<ul class="share_inner_list">
<li class="sharelist">
<ul
id="BoSelectaResultsBox"></ul>
<h3><a name="reply"></
a>Add your comment</h3>
<form ac-
tion="/photos/tobias_assimil/3601826205/in/
photostream#preview" method="post">
<input type="hidden" name="magic_cookie" valu
e="195e4e74ea2601cc380758a847504edf" />
<input type="hidden"
name="addcomment" value="1">
<input type="hidden" name="flash_
ver" id="flash_ver" value="unknown" />
<script type="text/javascript">
(function() {
var flashVersion = deconcept.
SWFObjectUtil.getPlayerVersion();
_ge('flash_ver').value='Flash
V:'+(flashVersion.major+'.'+flashVersion.
minor+'.'+flashVersion.rev)+'
D:'+flashDescription;
})();
</script>
<textarea id="message" tab
<table id="tbl_comment_stuff"
<table id="Photo" cellspacing="0" border="0">
<tr valign="top" class="not_wide_top">
<td id="photoswftd" width="502">
<h1 id="title_div3601826205"
property="dc:title">ser chic</h1>
<div class="SlideShowShareButtons">
<div id="SSButtonHugger">
shockwave/download/download.cgi?P1_Prod_
Version=ShockwaveFlash">install the latest
version of the Macromedia Flash Player</a>.
</div>
</noscript>
index="1" name="message" style="width: 400px;"
rows="8"></textarea><br/>
<!-- CONTENT TABLE -->
width="400px" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<small>
<div><a class="Plain" tabindex="5" target="_blank"
href="/html.gne?tighten=0" onclick="F.html_info.
show(this); return false"><img id="html_info_caret" src="http://l.yimg.com/g/images/caret_closed.
gif" width="9" height="9" border="0"> How do I
format my comment?</a></div>
</small>
</td>
<td valign="top" align="right">
</td>
</tr>
</table>
<p>
<input tabindex="3" id="btn_preview_comment" name="preview" type="submit"
class="Butt" value="PREVIEW">
O
R
<input tabindex="2" id="btn_
post_comment" name="Submit" type="submit"
class="Butt" value="POST COMMENT">
</p>
</form>
</div>
options sharing_options_li_open">
<div class="sharing_options_header">
Share this photo
</div>
<div class="sharing_options_inner"
<p id="BoSelectaInstructions"
>Enter email addresses or a contact's screen
name:</p>
<div
id="BoSelectaContactsBox">
<input type="text"
id="sharing_email_input" name="sharing_email_input" tabindex="10" value="">
</div>
</li>
</ul>
<p id="QuickShareAddMsg">
<a href="#" onclick="_ge('sharing_
personal_message_container').style.display =
'block'; _ge('QuickShareAddMsg').style.display =
'none'; _ge('sharing_personal_message').focus();
return false;" tabindex="11">Add a message</
a>?
</p>
<div id="sharing_personal_mes-
sage_container" style="display: none; margin-top:
10px;">
<label for="sharing_personal_
message">Message:</label>
<textarea id="sharing_personal_message" name="personal_message"
style="width: 265px; height: 70px; padding: 4px;
border: 1px solid #d7d7d7;" tabindex="11"></textarea>
</div>
<p id="SharingShareCancel"><input
type="button" value="SEND" class="Butt"
name="quick_share_save" onclick="_
ge('ShareOptions').quick_share(this.form.
sharing_email_input.value); return false;" tabindex="12"> <input type="button" value="Cancel"
name="quick_share_cancel" class="CancelButt"
onclick="_ge('ShareMenu').toggle(); return false;"
tabindex="13"></p>
</form>
<form id="STAFForwardForm" action="/send?photo=3601826205" method="post">
<input type="hidden" name="to_
email_prepop" id="to_email_prepop" value="">
<input type="hidden" name="to_
flickr_prepop" id="to_flickr_prepop" value="">
<input type="hidden"
name="checkbox_prepop" id="checkbox_prepop"
value="">
</form>
</div>
</li>
<li id="SharingGrabLink" class="share_options">
<div class="sharing_options_
header">Grab the link</div>
</div>
<div class="sharing_options_inner">
<form id="GrabLinkForm">
<ul class="share_inner_list">
<li class="sharelist" id="pre-gp-
</td>
<td class="RHS">
<p class="first">
Here's a link to this photo. Just copy and
paste!
</p>
<input type="text" value=""
</form>
</div>
link">
id="sharing_grab_link_input" onfocus="this.
select();">
</li>
</ul>
52
</li>
<li id="SharingEmbedIt"
class="share_options">
<div class="sharing_options_
header">Grab the HTML</div>
<div class="sharing_options_inner">
<p class="sharing_faded_text">Copy
and paste the code below:</p>
<p class="sharing_embed_cont">
<texta-
rea name="SharingEmbedMarkup"
id="SharingEmbedMarkup" onfocus="this.
select();" rows="4" wrap="virtual"><a
href="http://www.flickr.com/photos/tobias_assimil/3601826205/"
title="ser chic by tobias_assimil, on Flickr"><img
src="http://farm4.static.flickr.
com/3414/3601826205_6d90e7098c.
jpg" width="500"
height="500" alt="ser
chic" /></a></textarea>
</p>
</div>
</li>
<li id="SharingBlogIt"
class="share_options">
<div class="sharing_options_
header">Blog it</div>
<div class="sharing_options_inner"></
div>
</li>
</ul>
<div id="ShareMenuShadow">
<table class="shadow_table">
<tbody>
<tr>
<td class="shadow_sprite shadow_
tl"> </td>
<td class="shadow_sprite
shadow_t"> </td>
<td class="shadow_sprite shadow_
tr"> </td>
</tr>
<tr>
<td class="shadow_sprite
shadow_l"> </td>
<td class="shadow_sprite
shadow_m"> </td>
<td class="shadow_sprite
shadow_r"> </td>
</tr>
<tr>
<td class="shadow_sprite shadow_
bl"> </td>
<td class="shadow_sprite
shadow_b"> </td>
<td class="shadow_sprite shadow_
br"> </td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript">
F.sharing_vars = {};
F.sharing_vars.sending_guest_pass = 0;
F.sharing_vars.share_close_butt =
'<br><br><input type="button" value="OK"
class="Butt" name="quick_share_ok" id="quick_
share_ok" onclick="_ge(\'ShareOptions\').confirm_
ok_click(); return false;">';
F.sharing_js_files = [
"http://l.yimg.com/g/javascript/yahoo/
autocomplete_2.5.1.js.v67671.14",
"http://l.yimg.com/g/javascript/bo_selecta.
js.v999.1245290295?javascript/bo_selecta.js.14",
"http://l.yimg.com/g/javascript/sharing_bo_selecta.js.v999.1245290295?javascript/
sharing_bo_selecta.js.14"
];
F.sharing_load_js = function(e) {
if (!F.sharing_drop_down) {
var params = (e) ? null : {onSuccess:
function() {window.setTimeout("_ge('ShareMenu').
go_go_go();", 200);}};
// Load js if it hasn't been already
var load_js = Y.U.Get.script(F.sharing_js_
files, params);
}
};
F.sharing_button = {
toggle: function() {
this.style.display = (this.visible) ? "none" :
"block";
var shadow = _ge('ShareMenuShadow');
if (shadow) {
shadow.style.display = (this.visible) ?
"none" : "block";
if (YAHOO.env.ua.ie || YAHOO.env.
ua.opera) {
Y.D.addClass(shadow, 'shadow-ie');
}
}
if (this.visible) {
// Close
F.eb_broadcast('stewart_play_if_was_
playing');
Y.U.Dom.removeClass(_
ge("ShareButton"), "share_button_on");
var quickMsg = _ge('sharing_personal_
message');
if (quickMsg) {
var quickMsgValue = quickMsg.
value;
_ge("AutoCompleteForm").reset();
if (Y.D.getStyle('sharing_personal_message_container', 'display') === 'block') { //
Restore the value if it's shown.
quickMsg.value = quickMsgValue;
}
}
else {
_ge("AutoCompleteForm").reset();
}
} else {
// Open
F.eb_broadcast('stewart_pause');
Y.U.Dom.addClass(_ge("ShareButton"),
"share_button_on");
<table cellpadding="0" cellspacing="0"
if (!this.opened) {
if (!F.sharing_drop_down) {
F.sharing_load_js();
} else {
this.go_go_go();
}
} else {
if (_ge("sharing_email_input").style.
display) {
_ge("sharing_email_input").focus();
}
}
}
<a href="/photos/tobias_assimil/"
this.visible = (this.visible) ? 0 : 1;
this.opened = true;
},
go_go_go: function(attribute){
setupDropdown();
function setupDropdown() {
if (_ge("ShareOptions") && F.sharing_
drop_down) {
F.decorate(_ge("ShareOptions"),
F.sharing_drop_down).go_go_go('/people/99894645@N00/contacts/cache/dump/195e4e
74ea2601cc380758a847504edf.1245013413a');
}
else {
setTimeout(setupDropdown, 100); //
Call itself recursively until the objects are loaded.
}
}
}
}
F.decorate(_ge("ShareMenu"), F.sharing_button);
var quickMsg = _ge('sharing_personal_message');
if (quickMsg) {
quickMsg.value = '';
}
Y.U.Event.addListener("ShareButton",
"mouseover", F.sharing_load_js);
F.sharing_code_loaded = true;
</script>
</div>
<div id="GPTooltip">
<span style="display: none;"
id="tooltip_1245290295_0">Guest Passes let
you share your photos that aren't public.
Anyone can see your public photos anytime,
whether they're a Flickr member or not. But!
If you want to share photos marked as friends,
family or private, use a Guest Pass. If you're
sharing photos from a set, you can create a
Guest Pass that includes any of your photos
marked as friends, family, or private. If you're
sharing your entire photostream, you can create a Guest Pass that includes photos marked
as friends or family (but not your private
photos). <a href="/help/sharing/#2184" target="_
blank">Learn more about Guest Passes!</a></
span><span class="Tip">[<a href="#" onclick="this.
blur(); show_tooltip(this, 'tooltip_1245290295_0',
599); return false;">?</a>]</span>
</div>
<!-- #### UPLOADED BY -->
<div class="Widget">
<a href="/photos/tobias_assimil/"><img
class="rightSideContactChanger" src="http://farm4.
static.flickr.com/3124/buddyicons/70469049@
N00.jpg?1222465416#70469049@N00" alt="view
photos" width="24" height="24" /></a>
Uploaded on <a href="/photos/to-
bias_assimil/archives/date-posted/2009/06/06/"
class="Plain" property="dc:date">June 6, 2009</
a><br /> by <a href="/photos/tobias_assimil/"
title="Link to tobias_assimil's photostream" ><b
property="foaf:name">tobias_assimil</b></a>
</div>
<!-- #### CONTEXTS -->
<div class="ContextTop">
border="0">
<tr>
<td class="LilIcon"
valign="bottom"><script type="text/javascript">if
(_ok_for_scrumjax_xml()) document.
write('<img src="http://l.yimg.com/g/im-
ages/context_open.gif" width="18" height="25"
style="border:0;" class="nextprev_button"
id="nextprev_button_stream70469049@N00">');
if (_ok_for_scrumjax_xml())
F.decorate(_ge('nextprev_button_
stream70469049@N00'), F._nextprev_button).
button_go_go_go('stream', '70469049@N00',
'3601826205');
</script></td>
<td colspan="2">
<h3 id="contextTitle_
stream70469049@N00" class="contextTitleOpen">
class="currentContextLink" id="contextLink_
stream70469049@N00">tobias_assimil's
photostream</a>
</h3>
<script type="text/
javascript">
var nextprev_currentContextLink
= _ge('contextLink_stream70469049@N00');
var nextprev_currentContextID =
'stream70469049@N00';
</script>
</td>
</tr>
<tr id="nextprev_tr_stream70469049@
N00" class="contextThumbsRow">
<td rowspan="2" valign="bottom"
class="context_crap_td"><img src="http://l.
yimg.com/g/images/spaceout.gif" width="18"
height="104" class="crap f-sprite fs-context_crap"
alt=""></td>
<td><div id="nextprev_div_
stream70469049@N00" class="nextprev_
contextThumbsDiv"><div class="con
textThumbsMoverWrapperDiv"><div
class="contextThumbsMoverDiv" id="nextprev_
mover_div_stream70469049@N00"><a
class="contextThumbLink" href="/photos/
tobias_assimil/3601826083/in/photostream/"
style="positcion:absolute"><img id="nextprev_
thumb_stream70469049@N003601826083"
class="nextprev_thumb" src="http://farm4.
static.flickr.com/3301/3601826083_3abe5ef8
7a_s.jpg" width="75" height="75" title="Go to
the previous item in the stream
" alt=""></a><a class="contextThumbLink"
href="/photos/tobias_assimil/3601826399/in/
photostream/"><img id="nextprev_thumb_
stream70469049@N003601826399"
class="nextprev_thumb" src="http://
farm4.static.flickr.com/3605/3601826399_
e4a8376392_s.jpg" width="75" height="75"
title="Go to the next item in the stream
" alt=""></a></div></div><div
class="nextprev_contextThumbsArrowsDiv"
id="nextprev_arrows_div_stream70469049@
N00"><img id="nextprev_arrows_prev_img_
stream70469049@N00" class="nextprev_arrows_img_prev" border="0" src="http://l.yimg.
com/g/images/context_arrow_more_left_out.
gif.v1" width="37" height="10" title="More"><a
href="/photos/tobias_assimil/with/3601826205/"
class="contextThumbLink"><img id="nextprev_
view_page_img_stream70469049@N00"
class="nextprev_view_page_img" border="0"
src="http://l.yimg.com/g/images/en-us/context_view_page_out.gif.v1" width="79" height="10"
title="Browse"></a><img id="nextprev_arrows_next_img_stream70469049@N00"
class="nextprev_arrows_img_next" border="0"
src="http://l.yimg.com/g/images/context_arrow_more_right_out.gif.v1" width="37" height="10"
title="More"></div></div></td>
<td>
<div class="contextInfo">
<div class="contextInfoInner"
id="contextInfoInner_stream70469049@N00">
<div class="photosNum"
id="photosNum_stream70469049@N00">200</
div>
<div class="photosText" id="photosText_
stream70469049@N00">uploads</div>
<div class="showLink" id="slideshowLink_
stream70469049@N00" style="display:block"><a
title="View as slideshow" id="slideshow_link_
stream70469049@N00" href="/photos/tobias_assimil/show/with/3601826205/"><img src="http://l.
yimg.com/g/images/context_slideshow_icon_default.png" width="23" height="23" alt=""></a></
div>
</div>
</div>
<script type="text/javascript">
if (_ok_for_scrumjax_xml()) F.decorate(_ge('nextprev_div_
stream70469049@N00'), F._nextprev_div).
div_go_go_go('3601826083', '3601826399', '/
photos/tobias_assimil/3601826083/in/photostream/', '/photos/tobias_assimil/3601826399/
in/photostream/', false, false, 'stream',
'70469049@N00', true, '3601826205', '/
photos/tobias_assimil/');
</script>
</td>
</tr>
<tr id="nextprev_crumbs_tr_
stream70469049@N00">
53
<td colspan="2"><div
class="contextCrumbsDiv"></div></td>
</tr>
</table>
</div>
<div class="ContextsOther"
id="otherContexts_div"><p style="display:none"
id="other_contexts_p">This photo also belongs
to:</p>
</div>
<!-- ################ TAGS STUFF -->
<script type="text/javascript">
deja_view_refresh();
</script>
<!-- ############# STATS -->
<h4>Additional Information</h4>
<p class="Privacy">
<span class="license">
<img src="http://l.yimg.com/g/images/
spaceout.gif" border="0" height="15" width="15"
style="vertical-align: bottom" class="f-sprite fsicon_all_rights"/> All rights reserved
</span>
<span class="privacy_info">
<img src="http://l.yimg.com/g/images/
spaceout.gif" width="15" height="15" align="left"
class="f-sprite fs-icon_public"/> Anyone can see
this photo </span>
</p>
<ul>
<div id="div_geo_block"
style="display:none"><li class="stats"><span
id="div_taken_in"></span><span id="div_taken_
in_links"></span></li></div>
<li class="Stats">
Taken on <a href="/photos/
tobias_assimil/archives/date-taken/2009/06/07/"
class="Plain">June 7, 2009</a>
</li>
<script type="text/javascript">fave_
count = 2;</script>
<div id="faves_p">
<li class="Stats">
<a href="/pho-
tos/tobias_assimil/3601826205/favorites/"
class="Plain"><span id="fave_countSpan">2 people</span></a> <span id="fave_callsSpan">call</
span> this photo a <b>favorite</b>
</li>
</div>
<li class="Stats" style="marginbottom:1em">
Viewed <b>7</b> times
</li>
</ul>
<script type="text/javascript">
var upPage = new function(){
this.toggle_mod = function(){
row = _ge('moderation');
if(Y.U.Dom.hasClass(row,'open')) {
Y.U.Dom.removeClass(row,'open')
} else {
Y.U.Dom.addClass(row, 'open');
}
return false;
}
this.show_votes = function(){
_ge('votes_0').style.display = 'block';
_ge('votes_1').style.display = 'block';
_ge('votes_2').style.display = 'block';
_ge('hide_votes').style.display = 'block';
_ge('show_votes').style.display = 'none';
return false;
}
this.hide_votes = function(){
_ge('votes_0').style.display = 'none';
_ge('votes_1').style.display = 'none';
_ge('votes_2').style.display = 'none';
_ge('hide_votes').style.display = 'none';
_ge('show_votes').style.display = 'block';
return false;
}
}
</script>
<div class="Separated">
<div id="moderation" class="open">
<div id="moderation_toggle">
<h5 class="moderation_show"><a
href="#" onclick="return upPage.toggle_mod()"
style="text-decoration: none;">Flag this photo</
a></h5>
<h5 class="moderation_hide">Flag this
photo <a href="#" onclick="return upPage.
toggle_mod()" style="text-decoration: none; color:
#FF0000;">Cancel</a></h5>
</div>
<div id="moderation_settings" class="moderated
moderation_box"">
<form method="post" action="/photos/
tobias_assimil/3601826205/in/photostream/">
<input type="hidden" name="magic_cookie"
value="195e4e74ea2601cc380758a847504edf" />
<input type="hidden" name="moderate_other"
value="1" />
<p><input name="offensive" id="offensive"
type="checkbox" value="1" /> <label
for="offensive">Please review this photo's
safety level</label></p>
<p><input name="content_type" type="radio"
id="ct_photo" value="0" checked /> <label for="ct_
photo">This is a photo</label><br />
<input name="content_type" type="radio"
id="ct_screenshot" value="1" /> <label for="ct_
screenshot">This is a screenshot</label><br />
<input name="content_type" type="radio"
id="ct_other" value="2" /> <label for="ct_
other">This is art/illustration</label></p>
<p><input type="submit" name="submit"
value="SAVE" class="Butt" /> <a href="/help/
filters/" class="need_help">Need help?</a></p>
</form>
</div>
<script type="text/javascript">
upPage.toggle_mod();
_ge('moderation_toggle').style.display =
"block";
</script>
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var _default_viewgeo = 0;
var _use_osm = true;
var _place_map = {};
_place_map[1] = { type: 22, distance: 3 };
_place_map[2] = { type: 7, distance: 7 };
_place_map[3] = { type: 9, distance: 50 };
_place_map[4] = { type: 8, distance: 200 };
_place_map[5] = { type: 12, distance: 500 };
_place_map[6] = { type: 29, distance: 1500
};
var _save_position = true;
var _is_suggestion = false;
var _use_viewgeo = '';
var _use_location = '';
var _use_4real_location = '';
var _photo_acc = '';
var _taken_in = '';
var _tmp_use_4real_location
= '100;0;16';
_use_4real_location = _pi(_tmp_
use_4real_location.split(';')[0])/1000000 + ', ' +
_pi(_tmp_use_4real_location.split(';')[1])/1000000 +
', ' + _pi(_tmp_use_4real_location.split(';')[2]);
</script>
<div id="f_div_corrections_box_holder_border">
<div id="f_div_corrections_box_holder_background"></div>
<div id="f_div_corrections_topbar">
<div id="f_div_corrections_topbar_left">
Add to your map
</div>
</div>
<div id="f_div_corrections_close_button"><img
width="15" height="15" onclick="_ge('f_div_corrections_box_holder_border').hide();" src="http://l.
yimg.com/g/images/simple_close_default.gif"
id="one_corrections_close_img" style="cursor:
pointer;"/></div>
<div id="f_div_corrections_right_side">
<div id="div_corrections_main_form"
style="display:block">
<div id="div_geo_remove_success"
class="corrections_inside" style="display:none;">
<img id="img_geotag_confirm_hooray"
src="http://l.yimg.com/g/images/spaceout.gif"
width="28px" height="22px" align="top" class="fsprite fs-icon_check" /> <strong>Yay location
removed</strong><br />
</div>
<div class="corrections_inside" >
<div id="f_div_corrections_drag_
around">...</div>
<div id="f_div_edit_form">
<br />
<form id="frm_geotagging" style="inline"
onSubmit="return false">
<input id="freeform_geotagging"
type="input" value="" />
<input id="inp_freeform_geotagging_go" type="button" class="Butt" value="GO"
onclick="_ge('f_div_corrections_right_side').go()" />
</form>
<small>(<a class="Plain"
onclick="window.open('/geoformats.gne','geofor
mat','status=yes,scrollbars=yes,resizable=yes,wi
dth=400,height=580'); return false" href="/geoformats.gne" tabindex="5">Some formats are OK</
a>.)</small>
</div>
</div>
<div id="f_div_extra_options"
style="display:none">
<div class="corrections_inside">
<div id="f_div_corrections_who_can_see"
style="display:inline"><img width="15" height="15"
class="absmiddle f-sprite fs-icon_public"
src="http://l.yimg.com/g/images/spaceout.gif" />
Anyone will be able to see this on the map </
div> (<a class="Plain" href="#"
onclick="Y.U.Dom.setStyle('div_geo_perms',
'display', 'block'); Y.U.Dom.setStyle('div_corrections_main_form', 'display', 'none'); return
false">edit</a>)
</div>
</div>
<div id="div_corrections_inside"
class="corrections_inside" style="display: none">
<input type="button" class="Butt"
value="DONE" onclick="_ge('f_div_corrections_
box_holder_border').hide()" />
<div style="display:inline">
Or, <a id="a_remove_location" href="#"
onclick="_ge('div_geo_remove_location_confirm').
style.display='block'; _ge('div_corrections_
main_form').style.display='none'; return false"
style="display:inline" class="Warning">remove it
from the map</a>.
</div>
</div>
<div id="div_corrections_save_bottom" class="corrections_inside" style="bottom:
5px;">
<input id="geo_form_save" type="button"
value="SAVE TO MAP" class="Butt" />
<div id="f_div_extra_options_2"
style="display:none">
<br />
Or, <a id="a_remove_location" href="#"
onclick="_ge('div_geo_remove_location_confirm').
style.display='block'; _ge('div_corrections_
main_form').style.display='none'; return false"
style="display:inline" class="Warning">remove it
from the map</a>.
</div>
</div>
<div id="f_div_corrections_psst_
holder" style="display: none">
<div id="f_div_corrections_psst">
</div>
</div>
</div>
<div id="div_geo_feedback_finding_locations"
54
class="corrections_inside" style="display:none">
<img src="http://l.yimg.com/g/images/
progress/balls-24x12-grey.gif" width="24px"
height="12px" style="padding-left: 4px; paddingright: 4px;" /> <strong>Finding location...</
strong>
</div>
<div id="div_geo_feedback_finding_alter-
native_locations" class="corrections_inside"
style="display:none">
<img src="http://l.yimg.com/g/images/
progress/balls-24x12-grey.gif" width="24px"
height="12px" style="padding-left: 4px; paddingright: 4px" /> <strong>Finding location...</
strong>
</div>
<div id="div_corrections_search_no_results"
style="display: none">
<div id="div_corrections_search_no_re-
sults_display" class="corrections_inside"></div>
<div class="corrections_inside">
<input id="freeform_geotagging_3"
type="input" value="" />
<input id="inp_freeform_geotagging_go_3" type="button" class="Butt" value="GO"
onclick="_ge('f_div_corrections_right_side').
go('_3')" /><br />
<small>(<a class="Plain"
onclick="window.open('/geoformats.gne','geofor
mat','status=yes,scrollbars=yes,resizable=yes,wi
dth=400,height=580'); return false" href="/geoformats.gne" tabindex="5">Some formats are OK</
a>.)</small>
</div>
<div id="div_corrections_save_bot-
tom" class="corrections_inside">
<input id="geo_form_save_2"
type="button" value="SAVE TO MAP" class="Butt"
/> Or, <a href="#" onclick="_ge('f_div_corrections_right_side').stop_editing(); return false"
class="Plain">cancel</a>.
</div>
</div>
height="12px" style="padding-left: 4px; paddingright: 4px;" /> <strong>Saving location...</
strong>
</div>
<div id="div_geo_feedback_list_locations"
style="display:none;">
<div id="div_geo_feedback_list_locations_
list" class="corrections_inside"></div>
<div class="corrections_inside">
Or, search again.<br />
<input id="freeform_geotagging_4"
type="input" value="" />
<input id="inp_freeform_geotagging_go_4" type="button" class="Butt" value="GO"
onclick="_ge('f_div_corrections_right_side').
go('_4')" /><br />
<small>(<a class="Plain"
onclick="window.open('/geoformats.gne','geofor
mat','status=yes,scrollbars=yes,resizable=yes,wi
dth=400,height=580'); return false" href="/geoformats.gne" tabindex="5">Some formats are OK</
a>.)</small>
</div>
<div class="corrections_inside">
Or, <a href="#" onclick="_ge('f_div_corrections_right_side').stop_editing(); return false"
class="Plain">cancel</a>.
</div>
</div>
<div id="div_geo_feedback_list_alternative_locations" style="display:none">
<div class="corrections_inside">
Do any of these fit?
</div>
<div class="corrections_inside">
<ul id="div_geo_feedback_list_alternative_locations_list_ul" style="font-size: 11px;">
</ul>
</div>
<div id="div_geo_feedback_after_list"
class="corrections_inside"></div>
</div>
<div id="div_geo_remove_location_confirm"
style="display:none">
<div class="corrections_inside">
Are you sure you want to remove this
from the map?
</div>
<div class="corrections_inside">
<input type="button" value="YES"
class="Butt" onclick="_ge('f_div_corrections_right_
side').remove_location(); return false" />
<input type="button" value="NO"
class="CancelButt" onclick="_ge('div_geo_remove_
location_confirm').style.display='none'; _ge('div_
corrections_main_form').style.display='block'" />
</div>
</div>
<div id="div_geo_removing"
class="corrections_inside" style="display:none">
<img src="http://l.yimg.com/g/images/
progress/balls-24x12-grey.gif" width="24px"
height="12px" style="padding-left: 4px; paddingright: 4px;" /> <strong>Removing location...</
strong>
</div>
clicked" style="display: none;">
<div id="f_div_corrections_search_results_
clicked" class="corrections_inside"></div>
<div class="corrections_inside">
Or, search again.<br />
<input id="freeform_geotagging_2"
type="input" value="" />
<input id="inp_freeform_geotagging_go_2" type="button" class="Butt" value="GO"
onclick="_ge('f_div_corrections_right_side').
go('_2')" /><br />
<small>(<a class="Plain"
onclick="window.open('/geoformats.gne','geofor
mat','status=yes,scrollbars=yes,resizable=yes,wi
dth=400,height=580'); return false" href="/geoformats.gne" tabindex="5">Some formats are OK</
a>.)</small>
</div>
<div id="div_corrections_save_bot-
tom" class="corrections_inside">
<input id="geo_form_save_3"
type="button" value="SAVE TO MAP" class="Butt"
/> Or, <a href="#" onclick="_ge('f_div_corrections_right_side').stop_editing(); return false"
class="Plain">cancel</a>.
</div>
</div>
<div id="div_geo_feedback_saving"
<img src="http://l.yimg.com/g/images/
progress/balls-24x12-grey.gif" width="24px"
class="Butt" onclick="_ge('f_div_corrections_right_
side').remove_location(); return false" />
<input type="button" value="NO"
class="CancelButt" onclick="_ge('div_geo_remove_
location_confirm').style.display='none'; _ge('div_
corrections_main_form').style.display='block'" />
</div>
<div id="div_geo_perms" class="corrections_
inside" style="display:none">
Who can see this on the map.
<form id="frm_geo_perms">
<input id="geo_perms_5" value="5"
type="radio" name="inpt_geo_perms" /> <label
for="geo_perms_5">Only You</label><br />
<input id="geo_perms_2" value="2"
type="radio" name="inpt_geo_perms" /> <label
for="geo_perms_2">Your Friends and/or Family</label><br />
<input id="geo_perms_4" value="4"
type="radio" name="inpt_geo_perms" /> <label
for="geo_perms_4">Your Family</label><br />
<input id="geo_perms_3" value="3"
type="radio" name="inpt_geo_perms" /> <label
for="geo_perms_3">Your Friends</label><br />
<input id="geo_perms_1" value="1"
type="radio" name="inpt_geo_perms" /> <label
for="geo_perms_1">Your Contacts</label><br />
<input id="geo_perms_0" value="0"
type="radio" name="inpt_geo_perms"
checked="true" /> <label for="geo_
perms_0">Anyone (Recommended)</label><br
/>
</form>
<br />
<input id="geo_perms_save" type="button"
value="SAVE" class="Butt" onclick="_ge('f_div_corrections_right_side').set_perms()" /> Or, <a
href="#" onclick="Y.U.Dom.setStyle('div_geo_
perms', 'display', 'none'); Y.U.Dom.setStyle('div_
corrections_main_form', 'display', 'block'); return
false" class="Plain">cancel</a>.
<script type="text/javascript">
for (var i = 0; i <= 5; i++) {
if (i == 0) {
_ge('geo_perms_' + i).checked =
true;
} else {
_ge('geo_perms_' + i).checked =
false;
}
}
</script>
</div>
<div id="div_geo_other_photos"
<div id="div_corrections_search_results_
class="corrections_inside" style="display:none">
Are you sure you want to remove this
photo's geo information?
<br />
<br />
<input type="button" value="YES"
<div id="div_geo_remove_location_confirm"
class="corrections_inside" style="display:none">
style="display:none">
<div id="div_geo_other_photos_number"
class="corrections_inside"></div>
<div class="corrections_inside">
<input type="button" value="YES"
class="Butt" onclick="_ge('f_div_corrections_right_
side').update_other_locations()" /> <input
type="button" value="NO" class="CancelButt"
onclick="_ge('f_div_corrections_right_side').
close_saving();" />
</div>
<div class="corrections_inside">
(Just so you know, it'll take a few
minutes to make those updates. But you can
carry on as normal while we do the work in
the background.)
</div>
</div>
</div>
<div id="f_div_corrections_bottombar">
<div id="f_div_corrections_bottombar_left">
<div id="f_div_corrections_bottom_options"
style="padding: 5px 0px 0px 8px">
<a href="#" onclick="_ge('f_div_corrections_box_holder_border').map_box.jump_
to_map(); return false" class="Plain">Go to the
map</a>
</div>
</div>
<div id="f_div_corrections_bottombar_
right"></div>
</div>
<div id="pp_geo" style="display:none">
<form id="emptyform">
<div class="pp-box_geo"
style="position:absolute; top:40px; left:10px;
width: 480px; height: 358px; background:#f0f0f0;
padding:0px">
55
<div class="col1"
style="position:absolute; top:0px; left:0px; width:
480px; height: 358px;">
<div id="pp-source_geo" class="listbox" style="position:absolute; top:0px; left:0px;
width: 480px; height: 358px; padding: 0px; margin:
0px; border:0px">
<ul class="pp-list_geo">
</ul>
<div class="clear"></div>
<span id="pp-loading_geo"></span>
</div>
</div>
</div>
</form>
</div>
<div id="f_div_corrections_map_holder">
<div id="f_div_corrections_map"></div>
<div id="f_div_osm_cc" style="position: ab-
solute; left:1px; bottom:1px; width:90%; display:
none; font-size: 11px; text-align:left; z-index:999 ">
Map data <a href="http://creativecommons.org/licenses/by-sa/3.0/">CCBYSA</
a> 2009 <a href="http://OpenStreetMap.
org">OpenStreetMap.org</a> contributors
</div>
</div>
</div>
<script type="text/javascript">
var _pp_geo = new F.PhotoPicker();
_pp_geo.init();
</script>
<!-- BEGIN URLKit required section -->
<div id="anchorDiv" style="width: 0px; height: 0px;
display:none"></div>
<div id="formDiv" style="width: 0px; height: 0px;
display:none"></div>
<iframe id="historyFrame" style="width: 0px;
height: 0px; display:none" name="historyFrame"
src="" height="100" width="100"></iframe>
<!-- END URLKit required section -->
</div><!--end Main-->
<br id="MainFooterClear" clear="all" />
<div id="FooterWrapper">
<div class="Footer">
<table class="Jump" cellspacing="0">
<tr>
<th class="To">
Activity
</th>
<td>
<a href="/activity/">Around You</
a> | <a href="/recent.gne">In Your
Groups</a> |
<a href="/photos/99894645@N00/
friends/">From your friends</a>
</td>
</tr>
<tr>
<th class="To">
<a href="/photos/99894645@
N00/" class="Plain">You</a>
</th>
<td>
<a href="/photos/99894645@N00/">Your
Photostream</a> |
<a href="/photos/organize/">Organize</a>
|
<a href="/photos/upload/">Upload</a> |
<a href="/account/">Your Account</a> |
<a href="/do/more/">Do More, Order
Prints</a>
</tr>
</td>
<tr>
<th class="To">
<a href="/explore/"
class="Plain">Explore</a>
</th>
<td>
<a href="/places/">Places</a> |
<a href="/explore/interesting/7days/">Last
7 Days</a> |
<a href="/explore/
interesting/2009/06/">This Month</a> |
<a href="/photos/tags/">Popular Tags</a>
|
<a href="/commons/">The Commons</a>
|
<a href="/creativecommons/">Creative
Commons</a> |
<a href="/search/">Search</a>
</tr>
<tr>
</td>
<th class="To">
<a href="/help/"
class="Plain">Help</a>
</th>
<td>
<a href="/guidelines.
gne">Community Guidelines</a> |
Forum</a> |
<a href="/help/forum/">The Help
<a href="/help/faq/">FAQ</a> |
<a href="/
tools/">Tools</a> |
<a href="/sitemap.gne">Sitemap</a> |
<a href="/help/contact/">Help by
Email</a>
</td>
</tr>
</table>
<div class="Delicious">
<a href="/send?photo=3601826205" id="send_to_
friend_foot_link"><img src="http://l.yimg.com/g/
images/spaceout.gif" width="10" height="10"
alt="Send to a friend" class="f-sprite fs-send_to_a_
friend" /> Send to a friend</a><br />
<a href="http://delicious.com/save"
onclick="window.open('http://delicious.com/
save?partner=flickr&v=5&noui&a
mp;jump=close&url='+encodeURICom
ponent(location.href)+'&title='+encode
URIComponent(document.title), 'delicious',
'toolbar=no,width=550,height=550'); return
false;"><img src="http://l.yimg.com/g/images/spaceout.gif" width="10" height="10" class="f-sprite
fs-add_to_delicious" /> Bookmark on
Delicious</a>
</div>
<p class="About">
class="yahoo_logo">
<span
<a href="http://www.yahoo.
com/"><img src="http://l.yimg.com/g/images/
spaceout.gif" width="99" height="11" alt="Flickr,
a Yahoo! Company" class="f-sprite fs-logo_yahoo_company" /></a>
</span>
<a href="http://blog.flickr.net/">Flickr Blog</
a> |
<a href="/about/">About Flickr</a> |
<a href="/terms.gne" onClick="window.
open('/terms.gne','TOC','status=yes,scrollbars=y
es,resizable=yes,width=600,height=480'); return
false">Terms of Service</a> |
<a href="/privacy_policy.gne">Your Privacy</
a> |
<a href="http://docs.yahoo.com/info/copyright/copyright.html" target="_blank">Copyright/
IP Policy</a> | <a id="ft-report-abuse" href="/
report_abuse.gne">Report Abuse</a>
<p class="LanguageSelector"
id="LanguageSelector">
<span>
<a href="/change_language.gne?lang=zh-
hk&magic_cookie=195e4e74ea2601cc38075
8a847504edf" class="image_link" id="lang_zhhk"><img src="http://l.yimg.com/g/images/lang_zhtw_11px_default.png" width="45" height="13"
id="langselect_zh-hk" alt="繁體中文"></a>
<b>|</b>
<a href="/change_language.gne?lang=dede&magic_cookie=195e4e74ea2601cc380758a84
7504edf" >Deutsch</a>
<b>|</b>
<a href="/change_language.gne?lang=enus&magic_cookie=195e4e74ea2601cc380758a84
7504edf" class="selected">English</a>
<b>|</b>
<a href="/change_language.gne?lang=es-
us&magic_cookie=195e4e74ea2601cc380758a84
7504edf" >Español</a>
<b>|</b>
<a href="/change_language.gne?lang=frfr&magic_cookie=195e4e74ea2601cc380758a847
504edf" >Français</a>
<b>|</b>
<a href="/change_language.gne?lang=ko-
kr&magic_cookie=195e4e74ea2601cc38075
8a847504edf" class="image_link" id="lang_kokr"><img src="http://l.yimg.com/g/images/lang_kokr_11px_default.png" width="23" height="13"
id="langselect_ko-kr" alt="한글"></a>
<b>|</b>
<a href="/change_language.gne?lang=itit&magic_cookie=195e4e74ea2601cc380758a847
504edf" >Italiano</a>
<b>|</b>
<a href="/change_language.gne?lang=ptbr&magic_cookie=195e4e74ea2601cc380758a847
504edf" >Português</a>
</span>
<script type="text/javascript">if
(_ge('langselect_zh-hk')) F.decorate(_
ge('langselect_zh-hk'), F._link_button).button_
go_go_go();</script>
<script type="text/javascript">if
(_ge('langselect_ko-kr')) F.decorate(_
ge('langselect_ko-kr'), F._link_button).button_
go_go_go();</script>
Copyright © 2009 Yahoo! Inc. All rights
reserved.
</p> </p>
<br />
</div>
</div>
<div style="background: #000; color: #0f0; textalign: left; font-family: "Courier New",
Courier, monospace;"></div>
<div id="contactChangerBackground"></div>
<div id="contactChangerPopup" class="shadowtable">
<div class="shadow_sprite shadow_tl"></div>
<div class="shadow_sprite shadow_t"></div>
<div class="shadow_sprite shadow_tr"></div>
<div class="shadow_sprite shadow_l"
id="contactChangerShadowLeft"></div>
<div id="contactChangerContainer">
<div class="contactChangerHeader">
<img id="contactChangerIcon" src="http://l.
yimg.com/g/images/spaceball.gif" width="48"
height="48" alt="">
<div id="contactChangerText1">x</div>
</div>
<div class="contactChangerBody">
<div class="contactChangerCheckboxes">
<input name="con" type="checkbox"
id="contactChangerCheckContact" onclick="return
icon_setSubmitButton(this);"> <label for="contact
ChangerCheckContact" id="contactChangerCheck
ContactLabel">Add as a Contact</label><br>
<input name="fri" type="checkbox"
id="contactChangerCheckFriend" onclick="return
icon_setSubmitButton(this);"> <label
for="contactChangerCheckFriend" id="contactCh
angerCheckFriendLabel">Also mark as a Friend
<span class="optional">(optional)</span></
label><br>
<input name="fam" type="checkbox"
id="contactChangerCheckFamily" onclick="return
icon_setSubmitButton(this);"> <label
for="contactChangerCheckFamily" id="contactCh
angerCheckFamilyLabel">Also mark as Family
<span class="optional">(optional)</span></
label><br>
</div>
<div class="contactChangerButtons">
<input type="button" value="OK"
onclick="icon_windowCloseDone();" class="Butt"
id="contactChangerButtonOk">
<input type="button" value="Remove as
a Contact" class="Butt remove-contact" id="contac
tChangerButtonRemove">
<input type="button" value="Cancel"
onclick="icon_windowClose();" class="DeleteButt"
id="contactChangerButtonCancel">
</div>
<div class="contactChangerFootnote">
<p>
These settings can be changed at
any time.
</p>
</div>
</div>
<div class="contactChangerFooter">
<div class="contactChangerInfo">
<div id="contactChangerInfoDetails">
<p class="first">
Adding someone as a
<strong>contact</strong> is a way of keeping
up to date with their photos on Flickr. Their latest uploads will appear on your Contacts page
and homepage.
</p>
<p>
Additionally, marking someone as
a <strong>friend</strong> or <strong>family</
strong> (or both) lets you give them access to
your semi-private photos and videos.
</p>
<p class="last">
You can <a href="/help/
contacts/">learn all about Contacts in the
FAQ</a>.
</p>
</div>
</div>
</div>
</div>
<div class="shadow_sprite shadow_r" id="conta
ctChangerShadowRight"></div>
<div class="shadow_sprite shadow_bl"></div>
<div class="shadow_sprite shadow_b"></div>
<div class="shadow_sprite shadow_br"></div>
</div>
<div id="person_hover">
<div id="person_hover_shadow"
class="shadowLight"></div>
<div id="person_hover_inner">
<a href="#" id="person_hover_link"></a>
<img id="person_hover_pulser_img"
src="http://l.yimg.com/g/images/pulser2.gif" alt=""
width="32" height="15" border="0">
<div id="personmenu_button_bar"
class="candy_button_bar">
<img src="http://l.yimg.com/g/images/
personmenu_down_default.gif" alt="More options"
56
id="personmenu_down_button" class="candy_button" width="15" height="48" alt="" border="0" onclick="_ge('person_hover').hover_toggle_menu();">
<div class="candy_menu" id="personmenu_
down_menu">
<div id="personmenu_border_blocker"></div>
<p id="personmenu_relationship_p">Hi,
you!</p>
<div id="person_menu_other_div">
<a class="block" href="#"
id="personmenu_contact_link" onclick="_
ge('person_hover').hover_add_contact(); return
false;"></a>
<div class="menu_item_line_above">
<a class="block" href="#"
id="personmenu_photos_link">Photostream</a>
</div>
<a class="block" href="#"
id="personmenu_collections_link">Collections</
a> <a class="block" href="#"
id="personmenu_sets_link">Sets</a>
<a class="block" href="#"
id="personmenu_profile_link">Profile</a>
<a class="block" href="#"
id="personmenu_tags_link">Tags</a>
<a class="block" href="#"
id="personmenu_archives_link">Archives</a>
<a class="block" href="#"
id="personmenu_map_link">Map</a>
<a class="block" href="#" id="personmenu_
faves_link">Favorites</a>
<a class="block" href="#"
id="personmenu_contacts_link">Contacts</a>
<div class="menu_item_
lines_around">
<a class="block" href="#"
id="personmenu_mail_link">Send FlickrMail</a>
</div>
<a href="/ignore.gne"
id="personmenu_block_link"></a>
</div>
<div id="person_menu_you_div">
<div class="menu_item_line_above">
<a class="block" href="/pho-
tos/99894645@N00/" id="personmenu_your_photos_link">Your Photostream</a>
</div>
<a class="block" href="/photos/99894645@N00/collections/" id="personmenu_
collections_link">Your Collections</a>
<a class="block" href="/photos/99894645@
N00/sets/" id="personmenu_sets_link">Your
Sets</a>
<a class="block" href="/recent_activity.
gne" id="personmenu_activity_link">Recent Activity</a>
<a class="block"
href="/mail/" id="personmenu_your_mail_
link">FlickrMail</a>
<a class="block" href="/account/"
id="personmenu_account_link">Your Account</
a>
<a class="block" href="/people/99894645@N00/" id="personmenu_your_profile_link">Your Profile</a>
<a class="block" href="/photos/99894645@N00/map/" id="personmenu_
your_map_link">Your Map</a>
<a class="block" href="/iconbuilder/"
id="personmenu_buddyicon_link">Your Buddy
Icon</a>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
</script>
<script type="text/javascript">
try{
if (window.personmenu_init) personmenu_
init(1);
} catch(er) {}
</script>
<!-- page generated by www42 (in mud) at
18:58:15 06/17/09 in 133ms -->
<script src="http://us.adserver.yahoo.com/a?f=792
600146&p=flickr&l=FOOT9&c=r"></script>
</body>
</html>
57
body{padding:0;margin:0;textalign:center;background-color:#fefefe;color:#000;}
body,input,textarea,select{fontfamily:Arial,Helvetica,sans-serif;}#beacon,.ad_beac
on{position:absolute;height:0;width:0;}.
TopBar{background-image:url(http://l.yimg.com/g/
images/dotted.gif);background-repeat:repeatx;background-position:left bottom;textalign:center;padding-bottom:1px;}.TopBar .
Header{width:820px;margin-top:0;marginright:auto;margin-left:auto;min-width:820;}.TopBar
.Header .FlickrLogo{padding:5px 0 0 5px;}.TopBar
.Header .FlickrLogo img{float:left;}#FlickrLogo2{pa
dding:5px 0 0 5px;}#FlickrLogo2 img{float:left;}.
TopBar .Header .Status{fontsize:11px;color:#999;text-align:right;verticalalign:top;padding-top:6px;paddingbottom:2px;padding-left:10px;padding-right:10px;}.
TopBar .Header .Status .WhoIs{color:#666;}.TopBar
.Header .Status img{border-style:none;}.TopBar
.Header .Status a{text-decoration:none;}.TopBar
.NavBar{width:820px;margin-top:0;marginright:auto;margin-left:auto;min-width:820;}.TopBar
.NavBar .Primary{padding-top:5px;verticalalign:bottom;padding-bottom:0;padding-left:1px;}.
TopBar .NavBar #search_header_form_td{verticalalign:bottom;text-align:right;paddingbottom:5px;padding-right:4px;}.TopBar .NavBar
#search_header_form_td
form{padding:0;margin:0;}.TopBar .NavBar
#search_header_form_td form input{vertical-align:b
ottom;margin:0;color:#222;background-color:#fff;}.
TopBar .NavBar #search_header_form_td form
img{vertical-align:bottom;margin:0;}.TopBar .
NavBar #search_header_form_td .
Box{width:170px;font-size:11px;margin:0;}.TopBar
.HeaderFullwidth{width:100%;}.TopBar .
NavBarFullwidth{width:100%;}* html .TopBar .
HeaderFullwidth,* html .TopBar .NavBarFullwidth{
width:expression(document.body.clientWidth <
820 ? "820px":"100%");}.TopBar .NavBar
#search_header_button_td{verticalalign:bottom;text-align:left;padding:0;}#bb_
header{margin-bottom:6px;background:url(http://l.
yimg.com/g/images/bb_header_bg.png);borderbottom:1px solid #b3b3b3;height:24px;fontsize:11px;color:#333;line-height:24px;}#bb_header
.bb_h_inner{text-align:left;width:810px;margin:auto
;position:relative;}* html #bb_header .bb_h_
inner{padding-top:2px;}#bb_header
a{color:#333;text-decoration:none;}#bb_header
a:hover{background:none;textdecoration:underline;}#bb_header form{width:600p
x;float:right;text-align:right;position:absolute;top:0;
right:0;margin:0;padding:0;fontfamily:Verdana;font-size:10px;}* html #bb_header
form{top:2px;}#bb_search{width:300px;border:1px
solid #999;}#bb_header p{margin:0;padding:0;fontsize:10px;}#bb_header label{font-weight:bold;}#bb_
header .bb_butt{font-size:11px;}#bb_header img{p
osition:relative;top:4px;}#candy_nav_button_
bar,#candy_search_button_bar{padding:0 0 1px
0;margin:0;}#candy_search_button_
bar{display:none;}#candy_nav_button_bar
img,#candy_search_button_bar img{border:0;margi
n:0;display:inline;}#candy_nav_button_bar
a:hover,#candy_nav_button_bar a:active,#candy_
nav_button_bar a:focus{outline:0;backgroundcolor:inherit!important;}#candy_search_button_bar
a:hover,#candy_search_button_bar
a:active,#candy_search_button_bar
a:focus{outline:0;backgroundcolor:inherit!important;}#candy_nav_button_bar .
candy_menu,#candy_search_button_bar .candy_
menu{display:none;position:absolute;bord
er-left:1px solid #F0F0F0;border-right:1px solid
#666;border-bottom:1px solid #666;bordertop:0;width:180px;z-index:5000;backgroundcolor:white;text-align:left;}#candy_nav_button_bar
.candy_menu a,#candy_nav_button_bar .candy_
menu a:link{font-weight:normal;display:block;margi
n:6px;padding:0;font-size:11px;text-decoration:non
e!important;color:#0063DC!important;}#can
dy_nav_button_bar .candy_menu a:hover,#candy_
nav_button_bar .candy_menu a:active{color:#0063
DC!important;background:white;text-decoration:u
nderline!important;}#candy_nav_button_bar .
candy_menu a.menu_item_line_above{margintop:10px;padding-top:8px;border-top:1px solid
#E5E5E5;}#candy_search_button_bar .candy_
menu{left:auto;right:0;margin-right:-1px;}#candy_
search_button_bar .candy_menu a,#candy_search_
button_bar .candy_menu a:link{display:block;margi
n:6px;padding:0;font-size:11px;text-decoration:non
e!important;color:#0063DC!important;}#can
dy_search_button_bar .candy_menu
a:hover,#candy_search_button_bar .candy_menu
a:active{color:#0063DC!important;background:whi
te;text-decoration:underline!important;}#can
dy_search_button_bar .candy_menu a.menu_item_
line_above{margin-top:10px;paddingtop:8px;border-top:1px solid #E5E5E5;}.candy_
form{padding:8px;}#SubNav{margintop:25px;margin-bottom:20px;}#SubNav
tr{vertical-align:top;}#SubNav a{textdecoration:none;}#SubNav .Buddy{paddingright:10px;text-align:left;vertical-align:top;}#SubNav
.Section{width:100%;padding-top:1px;}#SubNav
.Section h1{padding:0;margin:0;}#SubNav .Section
.Links{font-size:12px;margin:0;padding:0;vertic
al-align:top;}#SubNav .Section .Links
img{margin-left:5px;margin-right:5px;verticalalign:middle;}#SubNav .Section .Links .
Here{color:#000;font-weight:bold;}#SubNav
.Section .LinksNewP{font-size:12px;margin:0;paddi
ng:0;vertical-align:top;}#SubNav .Section .
LinksNew .Here{color:#000;fontweight:bold;}#SubNav .Section .LinksNew
span{padding:0 5px 0 0;margin:0 5px 0
0;border-right:1px dotted #dadada;}#SubNav .
Section .photo_navi_contact .edit_relationship{font-
size:11px;}#SubNav .Section .photo_navi_
contact{white-space:nowrap;}#SubNav .Section
small{font-weight:normal;}#SubNav
.Extras{vertical-align:top;width:200px;fontsize:12px;color:#333;}#SubNav .Extras
p{width:200px;}#SubNav .Extras
img{border:none;}#SubNav .Extras form{margin:0;
padding:0;}#SubNav .Extras .SlideShow{textalign:right;width:200px;padding-top:12px;}#SubNav
.Extras .SharePhotos,#SubNav .Extras .
ShareSet{clear:right;textalign:right;width:200px;padding-top:2px;}#SubNav
.Extras .SharePhotos img,#SubNav .Extras .
ShareSet img{border:none;vertical-align:middle;}#T
ertiary{width:100%;}#Tertiary a{textdecoration:none;}#Tertiary tr{verticalalign:top;}#Tertiary td{padding:0 0 10px 0;}#Tertiary
div.SlideShow{float:right;textalign:left;width:140px;padding-top:30px;}#Tertiary
div.SlideShowShareButtons{float:right;te
xt-align:left;margin-top:30px;}#Tertiary div.
SearchBox{float:right;text-align:left;paddingtop:14px;}* html br.ie_no_display{display:none;}.
ShowUnderLogo{float:right;marginleft:20px;width:140px;text-align:left;paddingtop:5px;background-color:#639;}.
SeeSlideShow{padding-bottom:10px;paddingtop:10px;padding-left:5px;margintop:30px;background-color:#639;}.SlideShowTop{b
ackground:#eaeaea;padding-left:2px;paddingbottom:3px;padding-top:2px;border-bottom:1px
solid #dbdbdb;font-size:14px;text-align:left;}#Main{
width:800px;margin-top:0;margin-left:auto;marginright:auto;text-align:left;padding-top:0;paddingleft:0;padding-right:0;min-width:800;}.
wide#Main{width:800px;padding-left:0;paddingright:0;}.MainFullwidth{width:auto!important;paddi
ng:0!important;}#Main.MainExtendedWidth{width:
960px;}#Hint{padding-top:0;padding-left:0;verticalalign:top;}#Hint p{color:#555;}#Hint img{border:non
e;}#GoodStuff{width:100%;verticalalign:top;padding-left:30px;paddingright:10px;}#GoodStuff td{padding:5px;}#GoodStuf
fL{width:100%;vertical-align:top;paddingright:30px;}.ThinCase{width:500px;marginleft:120px;margin-right:120px;paddingbottom:50px;}.ThinCase td{padding:5px;}.
FullCase{width:760px;paddingbottom:50px;float:left;}a:link{color:#0063DC;textdecoration:underline;}a:visited{color:#1057ae;textdecoration:underline;}
a:hover{color:#FFF;textdecoration:none;background-color:#0063DC;}
a:active{color:#FFF;textdecoration:none;background-color:#0259C4;}.
Plain:link{color:#3886E6;text-decoration:none;}.
Plain:visited{color:#3886E6;text-decoration:none;}.
Plain:hover{color:#FFF;text-decoration:none;backgr
ound:#0063DC;}.Plain:active{color:#FFF;text-decor
ation:none;background:#0259C4;}.
Warning:link{color:#F30;text-decoration:none;}.
Warning:visited{color:#F30;text-decoration:none;}.
Warning:hover{color:#fff;text-decoration:none;back
ground:#F30;}.Warning:active{color:#fff;text-decora
tion:none;background:#FF0084;}.
Grey:link{color:#c9c9c9;text-decoration:none;fontsize:11px;}.Grey:visited{color:#c9c9c9;textdecoration:none;}.Grey:hover{color:#0063DC;back
ground:#fff;text-decoration:none;}.Grey:active{colo
r:#FF0084;background:#fff;text-decoration:none;}.
Dark_grey:link{color:#868686;textdecoration:none;font-size:11px;}.Dark_
grey:visited{color:#868686;text-decoration:none;}.
Dark_grey:hover{color:#0063DC;background:#fff;t
ext-decoration:none;}.Dark_grey:active{color:#FF00
84;background:#fff;text-decoration:none;}
a.iconlink,a.iconlink:visited,a.iconlink:hover,a.
iconlink:active,a.iconlink:link,span.
icontext{color:#000;font-size:16px;text-decoration:
none;background:none;}a.image_link:link,a.
image_link:visited,a.image_link:hover,a.image_
link:active{background-color:transparent;outline:0;}
a.arrowRight{padding-left:14px;backgroundimage:url(http://l.yimg.com/g/images/icon_arrow_right.gif);background-position:0
2px;background-repeat:no-repeat;}
a.arrowDown{padding-left:14px;backgroundimage:url(http://l.yimg.com/g/images/icon_arrow_down.gif);background-position:0
2px;background-repeat:no-repeat;}h1{fontsize:24px;margin-top:0;padding-top:25px;}
h2{font-size:20px;font-weight:normal;marginbottom:10px;}h3{fontsize:18px;color:#FF0084;fontweight:normal;margin-bottom:10px;}
h4{font-size:13px;margin-bottom:10px;}
h5{font-size:12px;margin-bottom:10px;}
h6{font-size:11px;margin-bottom:10px;}
p{font-size:12px;}.p_smaller{font-size:11px;}
small{font-size:11px;color:#999;}li{fontsize:12px;line-height:18px;}dd,dt{fontsize:12px;line-height:18px;}form{padding:0;margin:
0;border:0;}table{border:0;}th{border-bottom:1px
solid #eee;font-size:11px;fontweight:normal;color:#666;text-align:left;}
td{font-size:12px;color:#000;}img{border:none;}
input,textarea,select{font-size:12px;color:#222;}
textarea{background-color:#fff;}.f-hide-selects
select{visibility:hidden;}
td.Label{text-align:right;font-weight:bold;verticalalign:top;font-size:12px;}.Confirm,.Problem,.
Alert{margin-bottom:11px;padding:3px 0 7px
38px;background:url(http://l.yimg.com/g/images/
icon_check.png) no-repeat left top;fontsize:14px;text-align:left;vertical-align:middle;width:
100%;color:#000;}.Confirm_small,.Problem_small,.
Alert_small{margin-bottom:11px;margintop:4px;margin-left:4px;padding:3px 0 7px
38px;background:url(http://l.yimg.com/g/images/
icon_check_small.png) no-repeat left
top;font-size:14px;text-align:left;vertical-align:middl
e;width:100%;color:#000;}.Problem{padding:5px 0
10px 38px;background:url(http://l.yimg.com/g/
images/icon_alert_big.png) no-repeat left top;}.
Problem_small{padding:5px 0 10px
38px;background:url(http://l.yimg.com/g/images/
icon_alert.png) no-repeat left top;margin-top:1px;}.
Alert{padding:0 0 14px 35px;background:url(http://l.
yimg.com/g/images/icon_alert_big.png) no-repeat
left top;}.Alert_small{padding:0 0 14px
35px;background:url(http://l.yimg.com/g/images/
icon_alert.png) no-repeat left top;}.AlertY{marginbottom:20px;padding:11px 10px 14px
55px;background:#ffffd4 url(http://l.yimg.com/g/
images/icon_alert_big.png) 11px 11px
no-repeat;font-size:12px;text-align:left;verticalalign:middle;color:#000;}.Pulser{marginbottom:20px;padding:0 0 5px
35px;background:url(http://l.yimg.com/g/images/
pulser2.gif) no-repeat left top;font-size:14px;fontweight:bold;text-align:left;vertical-align:middle;widt
h:100%;color:#000;}.Pulser_gray{margintop:3px;background:url(http://l.yimg.com/g/images/
progress/balls-24x12-grey.gif) no-repeat left top;}.
NoResult{font-size:14px;paddingbottom:5px;width:100%;text-align:left;verticalalign:middle;color:#888;}.Butt{fontfamily:Arial,Helvetica,sans-serif;fontweight:bold;font-size:12px;color:#FFF;background:
#0063DC;}.DeleteButt,.CancelButt,.
DisabledButt{font-family:Arial,Helvetica,sansserif;font-weight:bold;fontsize:12px;color:#666;background-color:#DDD;}.
PinkButt{font-family:Arial,Helvetica,sans-serif;fontweight:bold;font-size:12px;color:#FFF;backgroundcolor:#FF0084;}.SmallButt{fontfamily:Arial,Helvetica,sans-serif;fontsize:10px;color:#FFF;background-color:#0063DC;}.
SmallDisabledButt{font-family:Arial,Helvetica,sansserif;font-size:10px;color:#666;backgroundcolor:#DDD;}.SmallDeleteButt,SmallCancelButt{fo
nt-family:Arial,Helvetica,sans-serif;fontsize:10px;color:#666;background-color:#DDD;}.
SmallPinkButt{font-family:Arial,Helvetica,sansserif;font-size:10px;color:#FFF;backgroundcolor:#FF0084;}.absmiddle{vertical-align:middle;}.
New{font:8px Verdana,Arial,Helvetica,sans-serif;co
lor:#000;background:#FFE28A;padding:1px;vertic
al-align:middle;}span.button span span.
New{position:relative;top:-1px!important;}.
Highlight{background-color:#FFFBC2;}.
HighlightNew{background-color:#000;color:#fff;pa
dding:1px 4px;font-weight:bold;}.icon{border:0
none;vertical-align:middle;}.linkout{backgroundcolor:#FFF;}.linkover{backgroundcolor:#F0F0EB;border-left-width:1px;border-leftstyle:solid;border-left-color:#FFF;}.
Focus{padding:10px;text-align:left;font-size:13px;c
olor:#036;background:#f3f3f3;}.
ToolTip{background-color:#ffd;color:#000;padding:8
px;border-top:1px solid #ccc;border-left:1px solid
#ccc;border-bottom:2px solid #333;borderright:2px solid #333;position:absolute;fontsize:12px;text-align:left;cursor:default;}.
ToolTipSmall{background-color:#ffd;color:#000;pad
ding:2px 4px;border-top:1px solid #ccc;borderleft:1px solid #ccc;border-bottom:1px solid
#333;border-right:1px solid
#333;position:absolute;font-size:11px;textalign:left;cursor:default;}* html .ToolTipSmall{fontsize:10px;}div.Preview{border:1px solid
#ddd;background-color:#f5f5f5;padding:10px;fontsize:12px;}#spam-url-warn-div
p.Problem{width:auto;}
a.bab{display:inline-block;display:-moz-inlinebox;*width:1px;white-space:nowrap;padding-left:3
2px;cursor:pointer;cursor:hand;textdecoration:none!important;}a.bab,a.bab
strong{background:transparent url(http://l.yimg.
com/g/images/button-cta-white.png) no-repeat 0
0;height:39px;line-height:35px;}a.bab,a.bab:hover{
background:transparent url(http://l.yimg.com/g/
images/button-cta-white.png) no-repeat 0 0;}a.bab
strong{display:block;background:transparent
url(http://l.yimg.com/g/images/button-cta-white.
png) no-repeat right 0;padding-right:36px;textalign:center;color:#ff3ea4;font-size:16px;fontweight:bold;}.breaking-non-space{font-size:0;}.
small_clean{font-size:11px;color:#999;}.small_clean
a{text-decoration:none;}#AdBlock{backgrou
nd-color:#fff;border-left:1px solid #ccc;paddingleft:10px;padding-bottom:10px;margintop:0;}#AdBlock{background-color:#fff;borderleft:1px solid
#ccc;padding-left:10px;paddingbottom:10px;margin-top:0;}#AdBlock
#Label{font-size:9px;color:#999;fontfamily:Verdana,Arial;margin-bottom:0;textalign:center;margin-top:0;}#AdBlock tr{verticalalign:top;}#AdBlock td{width:50%;}#AdBlock .
Ad{margin-top:5px;}#AdBlock .Ad .Title:link{font-siz
e:14px;color:#00f;background:#fff;}#AdBlock .Ad
.Title:hover{text-decoration:underline;color:#00f;ba
ckground:#fff;}#AdBlock .Ad .Spiel{fontsize:12px;}#AdBlock .Ad .Spiel a{text-decoration:no
ne;color:#000;}#AdBlock .Ad .Spiel a:hover{text-de
coration:none;color:#000;backgroundcolor:#fff;}#AdBlock .Ad .
Host:link{color:#488000;font-size:12px;text-decora
tion:none;background:#fff;}#AdBlock.
AdLeft{border-left:0;padding-left:0;}#NotSearchAd
Block{background-color:#fff;paddingbottom:10px;margin-top:0;}#NotSearchAdBlock
#Label{font-size:9px;color:#999;fontfamily:Verdana,Arial;margin-bottom:0;textalign:center;margin-top:0;}#NotSearchAdBlock
tr{vertical-align:top;}#NotSearchAdBlock
td{width:50%;}#NotSearchAdBlock .Ad{margintop:5px;}#NotSearchAdBlock .Ad .Title:link{font-siz
e:14px;color:#00f;background:#fff;}#NotSearchAd
Block .Ad .Title:hover{text-decoration:underline;col
or:#00f;background:#fff;}#NotSearchAdBlock .Ad
CSS
O código CSS do
Flickr, não dá pra
saber se é por uma
questão de espaço
ou se para evitar
cópias, é todo escrito
em somente uma
linha. Assim, fica
difícil analisá-lo e
observá-lo.
Os espaços em branco, também contam
como informação,
e num caso como
esse, de um site
que é visitado por
milhões de usuários
por todo o mundo,
retirar os espaços
em branco do código
pode de fato significar alguma economia
na escala.
Além disso, o CSS
do Flickr é um código
bastante extenso, de
mais de quatro páginas corridas de letras
neste tamanho.
É muito provável
que houvesse meios
de se otimizar esse
código, mas é muito
comum em projetos
muito grandes, com
equipes muito grandes, que as coisas
saiam um pouco do
controle, e as vezes
é mais fácil para
os programadores
simplesmente incluir
novos trechos do que
rever o código inteiro
atrás de reuso.
58
.Spiel{font-size:12px;}#NotSearchAdBlock .Ad
.Host:link{color:#488000;font-size:12px;text-decora
tion:none;background:#fff;}.Separated{margintop:20px;padding-top:10px;backgroundimage:url(http://l.yimg.com/g/images/dotted.
gif);background-repeat:repeat-x;backgroundposition:left top;}.Separate{margintop:10px;margin-bottom:20px;paddingbottom:10px;background-image:url(http://l.yimg.
com/g/images/dotted.gif);backgroundrepeat:repeat-x;background-position:left bottom;}.
ThinSeparated{background-image:url(http://l.yimg.
com/g/images/dotted.gif);backgroundrepeat:repeat-x;background-position:left
bottom;padding-right:0;paddingbottom:3px;padding-left:0;margin-bottom:3px;}.
ThinSeparated .globe{background-color:#fff;}.
ThinSeparated .globe img{float:left;marginbottom:25px;margin-right:7px;}.ccIcn{paddingright:2px;}.ccIcn img{border:none;marginright:4px;height:32px;width:32px;}.ccIcnSmall
img{border:none;marginright:1px;height:15px;width:15px;}.ccIcn img.
last{margin-right:0!important;}.ccIcn a{textdecoration:none;}.ccIcn a:hover,.licenseIcons
a:active{background:none;}.ccTerm{position:relativ
e;top:1px;}.Intro{text-align:left;vertical-align:top;pad
ding:10px;background-color:#f5f5f5;width:50%;}.
Intro p{font-size:16px;line-height:24px;color:#333;}.
IntroChunk{text-align:left;vertical-align:top;padding:
10px;background-color:#f5f5f5;font-size:16px;lineheight:24px;color:#333;margin-bottom:30px;}.Intro
h3{font-size:20px;font-weight:bold;}.Starters{textalign:left;vertical-align:top;padding-right:0;paddingbottom:10px;padding-left:20px;width:50%;}.
Starters p{font-size:14px;}.Starters .light{fontweight:normal;}.Starters .cta{font-size:16px;}.
Pointers .Subheading{padding-bottom:0;}.Pointers
h3{padding-top:30px;}.Pointers h4{fontsize:14px;margin-bottom:5px;}.Pointers td{paddingright:10px;padding-bottom:30px;paddingleft:10px;width:33%;vertical-align:top;}.Pointers
p{font-size:14px;}.Pages{text-align:center;marginbottom:20px;margin-top:20px;}.Paginator{fontsize:12px;padding-top:10px;marginleft:auto;margin-right:auto;}.Paginator a,.pageList .
this-page{padding:2px 6px;border:solid 1px
#ddd;background:#fff;text-decoration:none;}.
Paginator a:visited{padding:2px 6px;border:solid
1px #ddd;background:#fff;text-decoration:none;}.
Paginator .AtStart{margin-right:20px;padding:2px
6px;background:#fff;color:#aaa;}.Paginator .
Prev{margin-right:20px;padding:2px
6px;border:solid 2px #ddd;background:#fff;}.
Paginator .break{padding:2px 6px;border:none;bac
kground:#fff;text-decoration:none;}.Paginator .
Next{margin-left:20px;padding:2px
6px;border:solid 2px #ddd;background:#fff;}.
Paginator .AtEnd{margin-left:20px;padding:2px 6px
;background:#fff;color:#aaa;}.Paginator .
this-page{padding:2px 6px;border-color:#999;fontweight:bold;font-size:13px;vertical-align:top;backgr
ound:#fff;color:#FF0084;}.Paginator a:hover{color:#
fff;background:#0063DC;border-color:#036;textdecoration:none;}.Pages div.Results{textalign:center;font:11px/15px Arial,Helvetica;color:#a
aa;margin-top:8px;}.Paginator_2{fontsize:12px;padding-top:5px;margin-left:auto;marginright:auto;}.Paginator_2 a,.Paginator_2 a:visited,.
Paginator_2 a.this-page{padding:2px
6px;border:solid 1px #ddd;background:#fff;textdecoration:none;margin-right:2px;margin-left:2px;}.
Paginator_2 a.Prev{margin-right:20px;padding:2px
6px;border:solid 2px #ddd;background:#fff;}.
Paginator_2 .break{padding:2px 6px;border:none;b
ackground:#fff;text-decoration:none;}.Paginator_2
a.Next{margin-left:20px;padding:2px
6px;border:solid 2px #ddd;background:#fff;}.
Paginator_2 a.this-page{padding:2px 6px;bordercolor:#fff;font-weight:bold;vertical-align:top;backgr
ound:#fff;color:#FF0084;}.Paginator_2 a:hover{colo
r:#fff;background:#0063DC;border-color:#036;textdecoration:none;}.Paginator_2 a.AtStart{marginright:20px;}.Paginator_2 a.AtEnd{margin-left:20px;}.
Paginator_2 a.AtStart,.Paginator_2 a.AtStart:link,.
Paginator_2 a.AtStart:visited,.Paginator_2 a.
AtStart:hover,.Paginator_2 a.AtEnd,.Paginator_2 a.
AtEnd:link,.Paginator_2 a.AtEnd:visited,.
Paginator_2
a.AtEnd:hover{color:#aaa;background:transparent!i
mportant;text-decoration:none;outline:0;border:0;p
adding:4px 8px;}#Feeds{width:800px;margintop:20px;padding:0;text-align:left;verticalalign:middle;}* html #Feeds{marginleft:10px;width:790px;}#Feeds
img{border:none;margin-right:3px;}#AtomRSS{widt
h:690px;float:left;font-size:11px;color:#999;}#AddT
oYahoo{width:70px;float:right;}#AddToYahoo
img{border:none;float:right;}.AdminStrip,#AdminSt
rip{background:url(http://l.yimg.com/g/images/
badge_preview_bg.gif) repeat left top;font-size:11
px;color:#666;padding:5px;textalign:left;border:2px solid #eee;margin:10px 0 0
0;}.AdminStrip a,#AdminStrip a{textdecoration:none;}.AdminStrip b,#AdminStrip
b{color:#444;}#AdminStrip option{fontsize:11px;}#AdminStrip .CaseNote{padding:3px
5px 3px 5px;width:180px;font-size:11px;backgroun
d:#fefefe;border-top:none;borderright:none;border-left:none;border:1px solid #eee;c
olor:#aaa;}#AdminBox{background:url(http://l.yimg.
com/g/images/badge_preview_bg.gif) repeat left
top;border:2px solid #eee;}#AdminBox
h4{padding:0 5px 3px 5px;font-size:12px;backgrou
nd:#eee;color:#444;font-weight:bold;margintop:0;}#AdminBox p{padding:5px;margin:0;color:#8
88;font-size:11px;}#AdminBox table{margintop:0;}#AdminBox td{padding:5px;color:#888;fontsize:11px;}.Count{padding:3px;border:2px solid
#eee;background-color:#fff;}.Footer{position:relativ
e;width:800px;text-
align:left;color:#ccc;background-image:url(http://l.
yimg.com/g/images/dotted.gif);backgroundrepeat:repeat-x;background-position:left
top;margin:10px auto 0 auto;padding:10px;}#Foote
rFullwidthPadder{padding:0 10px;}* html .
Footer{z-index:-1;}.Footer .Jump{width:100%;}.
Footer .Jump .To{white-space:nowrap;fontsize:11px;line-height:18px;color:#999;padding:0;fo
nt-weight:bold;border:0;}.Footer .Jump .To .
Plain:link{color:#999;}.Footer .Jump .To .
Plain:visited{color:#999;}.Footer .Jump .To .Plain:h
over{color:#3886E6;background-color:#fff;}.Footer
.Jump .To .Plain:active{color:#3886E6;backgrou
nd-color:#fff;}.Footer .Jump td{width:100%;fontsize:11px;line-height:18px;color:#ccc;paddingleft:20px;}.Footer .About{font-size:11px;lineheight:18px;}.Footer .About
span{float:right;border:none;}.Footer .About span.
bb_logo{margin-top:-25px;}.Footer .About span
i{display:block;color:#666;}.Footer a:link{textdecoration:none;}.Footer a:visited{textdecoration:none;}.Footer .Delicious{position:absolu
te;right:0;top:1em;font-size:11px;lineheight:18px;}.Footer p.LanguageSelector{fontsize:11px;text-align:center;margin-top:3em;}.
Footer .LanguageSelector
span{display:block;margin-bottom:.5em;}.Footer
.LanguageSelector img{vertical-align:bottom;}.
Footer .LanguageSelector a.selected{color:#999;cu
rsor:default;}.Footer .LanguageSelector a.selected:
hover{background:none;}#comm_
div{position:absolute;}#shadow_
div{position:absolute;}.shadow_table td,#comm_table td{padding:0;}.shadow_table img,#comm_table
img{border:0;}.td_white{background-color:#fff;}.
shadow_table .shadow_sprite{backgroundcolor:transparent;background-image:url(http://l.
yimg.com/g/images/tc_white_shadow_sprite.
png);background-position:0 0;backgroundrepeat:no-repeat;}.shadow_table .shadow_
tl{background-position:0 0;}.shadow_table .
shadow_t{background-position:-11px 0;}.
shadow_table .shadow_tr{background-position:989px 0;}.shadow_table
.shadow_l{background-position:0 -11px;}.shadow_
table .shadow_r{background-position:-989px
-11px;}.shadow_table .shadow_bl{backgroundposition:0 -989px;}.shadow_table
.shadow_b{background-position:-11px -989px;}.
shadow_table .shadow_br{background-position:989px -989px;}#person_hover{position:absolute;wi
dth:80px;height:58px;display:none;zindex:300;}#person_hover .shadowLight{position:absolute;top:1px;left:1px;width:79px;height:58px;b
ackground-color:#999;}#person_hover .
shadowDark{position:absolute;top:1px;left:1px;wid
th:79px;height:58px;backgroundcolor:#666;}#person_hover_inner{position:absolute
;top:0;left:0;width:75px;height:54px;backgrou
nd-color:#fff;border:2px solid #f0f0f0;}#person_
hover_link{display:block;position:absolute;top:3px;l
eft:4px;width:48px;height:48px;margin:0;bord
er:0;}.person_hover_img{display:none;position:abs
olute;top:0;left:0;width:48px;height:48px;margin:0;
cursor:pointer;border:0;}#person_hover_pulser_im
g{display:none;position:absolute;top:19px;left:12px
;border:0;}#personmenu_button_bar{position:absol
ute;display:block;top:3px;left:56px;width:15px;heig
ht:48px;cursor:pointer;overflow:visible;}#personm
enu_down_menu{position:absolute;background:white;width:176px;display:none;marg
in-left:-58px;padding-bottom:3px;border-left:2px
solid #f0f0f0;border-bottom:1px solid
#666;border-right:1px solid #666;border-top:2px
solid #f0f0f0;z-index:600;}#personmenu_button_
bar .candy_menu p{text-align:left;margin:4px;paddi
ng:2px 4px;font:normal 12px Arial,Helvetica,sansserif;color:black!important;}#personme
nu_block_link{display:block;textalign:left;margin:2px 5px;padding:1px
4px;font:normal 12px Arial,Helvetica,sansserif;}#personmenu_block_
link:link{color:#868686;textdecoration:none;}#personmenu_block_
link:visited{color:#868686;textdecoration:none;}#personmenu_block_link:hover{c
olor:#fff;background:#4C93E9;textdecoration:none;}#personmenu_block_link:active{c
olor:#fff;background:#4C93E9;textdecoration:none;}#personmenu_button_bar .
candy_menu a.block,#personmenu_button_bar .
candy_menu a.block:link{display:block;textalign:left;margin:2px 4px;padding:1px
4px;font:normal 12px Arial,Helvetica,sansserif;text-decoration:none!important;color:#0063D
C!important;}#personmenu_button_bar .candy_
menu a.block:hover,#personmenu_button_bar .
candy_menu a.block:active{color:#FFF!important;b
ackground:#4C93E9;}#personmenu_border_blocke
r{position:absolute;width:75px;height:2px;top:-2px;
left:0;overflow:hidden;backgroundcolor:white;}#personmenu_button_bar .candy_
menu div.menu_item_lines_around{margin:3px
4px;border-top:1px solid #F0F0F0;borderbottom:1px solid #F0F0F0;}#personmenu_button_
bar .candy_menu div.menu_item_lines_around
a.block{margin:2px 0;}#personmenu_button_bar .
candy_menu div.menu_item_line_
above{margin:3px 4px 0 4px;border-top:1px solid
#F0F0F0;}#personmenu_button_bar .candy_menu
div.menu_item_line_above a.block{margin:2px
0;}#lb_panel_content{text-align:left;font-size:12px;
background:white;}#contactChangerBackground{di
splay:none;position:absolute;top:0;left:0;width:100
%;height:100%;z-index:20000;}#contactChangerP
opup{display:none;position:absolute;width:330px;t
ext-align:left;font-size:12px;z-index:20001;}#contac
tChangerContainer{float:left;position:relative;z-inde
x:1;width:300px;*width:314px;overflow:hidden;pa
dding:1px;border:6px solid #f6f6f6;background-col
or:#d7d7d7;}#contactChangerPopup .shadow_sprit
e{float:left;padding:0;background:transparent
url(http://l.yimg.com/g/images/tc_white_shadow_
sprite.png) no-repeat 0 0;line-height:1px;_visibility:
hidden;}#contactChangerPopup .shadow_tl{width:
7px;height:6px;background-position:-1px -1px;over
flow:hidden;}#contactChangerPopup
.shadow_t{width:314px;height:6px;backgrou
nd-position:-11px 0;overflow:hidden;}#contactChan
gerPopup .shadow_tr{width:7px;height:6px;backgr
ound-position:-992px -1px;overflow:hidden;}#conta
ctChangerPopup
.shadow_l{width:7px;height:381px;backgrou
nd-position:0 -11px;clear:left;}#contactChangerPop
up
.shadow_r{width:7px;height:381px;backgrou
nd-position:-993px -11px;}#contactChangerPopup
.shadow_bl{width:7px;height:7px;backgrou
nd-position:-1px -992px;clear:left;}#contactChanger
Popup
.shadow_b{width:314px;height:7px;backgrou
nd-position:-11px -992px;margin-top:1px;}#contactChangerPopup .shadow_br{width:7p
x;height:7px;background-position:-992px -992px;}.
contactChangerHeader{clear:both;overflow:hidden
;*zoom:1;padding:5px;background:#eee;border:1
px solid #fff;font-size:17px;}.contactChangerBody{
clear:both;padding:10px;background:#fff;}.contact
ChangerFooter{padding:8px;background:#dce8f6;b
order:1px solid #fff;}.contactChangerHeader
img{float:left;border:2px solid #fff;marginright:8px;}.contactChangerHeader div{overflow:visi
ble;padding:4px;}.contactChangerCheckboxes{pad
ding:0;}.contactChangerCheckboxes input,.
contactChangerCheckboxes label{verticalalign:middle;}.contactChangerCheckboxes label
span.optional{color:#8d8d8d;font-size:11px;}.
contactChangerButtons{padding-top:15px;text-alig
n:center;}#contactChangerCheckFriend,#contactC
hangerCheckFamily{margin-left:25px;}#contactCha
ngerButtonRemove{display:none;background:#b52
727;}#contactChangerText3
a,#contactChangerText3
a:visited{color:#F15050;font-weight:bold;text-deco
ration:none;}#contactChangerText3
a:hover,#contactChangerText3
a:active{color:#fff;background-color:#F15050;fontweight:bold;text-decoration:none;}.contactChangerFootnote p{margin-bottom:0;color:#8d8d8d;fontsize:11px;text-align:center;}.
contactChangerInfo{padding-left:24px;background:
url(http://l.yimg.com/g/images/icon_info.gif)
no-repeat 0 0;}.contactChangerInfo a{textdecoration:none;}.contactChangerInfo p.
first{margin-top:0;}.contactChangerInfo p.
last{margin-bottom:0;}a.tagrsUsed:link,a.
tagrsUsed:visited,a.tagrsUsed:hover,a.tagrsUsed:a
ctive{color:#95b5bd;text-decoration:none;backgrou
nd:#fff;font-size:12px;}a.tagrsUnUsed:link,a.
tagrsUnUsed:visited,a.tagrsUnUsed:hover,a.tagrsU
nUsed:active{color:#0063DC;textdecoration:none;background-color:inherit;fontsize:12px;}a.tagrsUnUsed:hover,a.
tagrsUnUsed:active{text-decoration:underline;}
a.simple_butt,a.simple_butt:link,a.simple_butt:visited{color:#4c93e9;background:transparent!important;text-decoration:none;fontsize:11px;font-family:arial;outline:0;}a.simple_butt:
hover{color:#4c93e9;background:transparent!impo
rtant;text-decoration:none;}a.simple_butt_
disabled,a.simple_butt_disabled:link,a.simple_
butt_disabled:visited,a.simple_butt_disabled:hover{color:#999;background:transparent!important;text-decoration:none;fontsize:11px;font-family:arial;outline:0;}a.simple_butt
img,a.simple_butt_disabled img{verticalalign:middle;}a.simple_butt span,a.simple_butt_
disabled span{vertical-align:middle;padding:0
4px;}#surveyInvite{background-color:#f8e4ee;textalign:center;overflow:hidden;fontsize:11px;}#surveyInvite div.b{padding:10px 10px
5px 10px;}#surveyInvite p{margin:0 0 .25em
0;}#surveyInvite p span{margin:0 1.5em;}#loc_
search_div,#explore_loc_search_div,#geo_bookmarks_div{position:absolute;left:0;top:0;backgroun
d:#f7f7f7;border:1px solid
#cecece;padding:0;display:none;zindex:998;font:12px arial,sansserif;color:#434343;text-align:left;}.loc_search_
found_term{font-weight:bold;}#map_pagination_bg
{position:absolute;display:block;left:0;top:0;}#pagin
ation_pages_txt_div{text-align:center;font:11px
arial;display:block;line-height:13px;}#pagi_loading_text{font:11px arial;}#pagination_pages_
div{text-align:center;font:14px arial;font-weight:bol
d;display:block;}#pagination_count_div{textalign:center;font:11px arial;color:#666;display:bloc
k;}#pagination_exlink_div{textalign:center;font:11px arial;color:#666;display:bloc
k;}#readable_results_header{font-size:11px;fontweight:normal;}#readable_results{fontsize:14px;font-weight:bold;marginbottom:5px;}#filtrer_table
td{padding-top:5px;padding-left:5px;}
td.filtr_label_td{font-weight:bold;paddingleft:5px;padding-left:14px!important;fontsize:11px;}tr.filtr_tr{background-color:#f5f5f5;fontsize:11px;}tr.top_filtr_tr
td{padding-top:10px!important;border-top:1px solid
#d4d4d4!important;}#filtrer_form input{fontsize:11px!important;}#filtrer_ok,#filtrer_
cancel{width:75px;}#filtrer_clear_all_td{fontweight:bold!important;paddingleft:10px!important;}.
filtrer_clear_td{paddingright:10px!important;}#filtrer_
input{width:250px;font-weight:normal;}.
filtrer_select{width:220px;}#filtrer_date_
input{width:75px;font-weight:normal;}#filtrer_tab{width:52px;height:21px;position:absolute;display
:none;background-image:url(http://l.yimg.com/g/
images/filter_tab.gif);font-size:11px;}#filtrer_tab
59
div{padding-top:5px;textalign:center;color:#5ea2ed;fontweight:bold;}#filtrer_buttons_td{padding:15px 10px
10px 10px!important;}.
HomeBoxHollow{border:1px solid #ccc;marginbottom:20px;padding:16px 6px 10px
10px;position:relative;}.HomeBoxHollow span{displ
ay:inline;float:left;margin-right:8px;}.HomeBoxhollow div{margin-bottom:12px;}a.filtrer_clear,a.
filtrer_clear:link,a.filtrer_clear:visited{color:#4c93e9;background:transparent!important;text-decoration:underline;fontsize:11px;font-family:arial;outline:0;}a.filtrer_clear:h
over{color:#4c93e9;background:transparent!import
ant;text-decoration:underline;}a.filtrer_clear_
disabled,a.filtrer_clear_disabled:link,a.filtrer_clear_
disabled:visited,a.filtrer_clear_disabled:hover{color:#999;background:transparent!important;text-decoration:none;fontsize:11px;font-family:arial;outline:0;}div.dismissabl
e#guestPassNotice{padding-right:60px;}
div#guestPassNotice{_width:760px;backgroundcolor:#f1f1f1;margin-top:1px;margin-bottom:0;fontsize:12px;padding:10px 10px 10px 25px;overflow:
hidden;position:relative;}div#guestPassNotice img.
gpIcon{position:absolute;top:10px;left:5px;}
div#guestPassNotice img.candy_button{position:a
bsolute;right:5px;top:10px;}div#interstitialNotice{_
width:760px;background-color:#f1f1f1;margintop:1px;margin-bottom:0;fontsize:12px;padding:10px 10px 10px 25px;overflow:
hidden;position:relative;}#one_photo_license_
pop{background-color:#dad6d6;padding:10px;displ
ay:none;position:absolute;font:12px arial,sansserif;text-align:left;z-index:5;width:380px;}#one_
photo_license_pop_inner_div{backgroundcolor:#f0f0f0;border:1px solid
#c6c6c6;padding:10px;}#one_photo_
link{outline:0;}#one_photo_revert_link{font:11px
arial,sans-serif;visibility:hidden;}#one_photo_link
img{margin-left:5px;}#one_photo_goto_next_
label{font-size:11px;}#one_photo_img_div{marginbottom:4px;}#one_photo_img_parent_div{textalign:left;}#one_photo_inner_border_div,#geo_
pref_inner_border_div,#collection_pop_inner_border_div{background-color:#dad6d6;padding:10px;}#
collection_pop_meta_div,#collection_pop_iconb_di
v{width:590px;overflow:auto;}#collecti
on_pop_meta_inner_div{padding:20px;}#collection_
pop_meta_div{fontsize:14px!important;}#collection_pop_iconb_row
td{padding:5px;}#collection_pop_iconb_row
td#collection_pop_iconb_left_td{background:#f0f0f
0!important;}#collection_pop_iconb_row
td#collection_pop_iconb_right_td{background:#e6e
6e6!important;}#collection_pop_iconb_left_
div,#collection_pop_iconb_right_
div{padding:20px;fontsize:14px!important;}#collection_pop_title_row
td{border-bottom:1px solid #c6c6c6;font-size:14px
!important;}#collection_pop_contents_row
td{padding:0;}#collection_pop_form_title{marginbottom:10px;width:100%;font:20px arial,sansserif;font-weight:bold;padding:3px;}#collecti
on_pop_form_desc{width:100%;height:200px;mar
gin-bottom:10px;}#collection_pop_form_parent_
id{width:90%;margin-top:6px;}#collection_pop_
iconb_preview_frame{width:195px;height:154px;b
ackground:url(http://l.yimg.com/g/images/
collection_case_l.gif) no-repeat;}#collection_pop_
iconb_buttons_div{margin-top:140px;marginleft:40px;}#collection_pop_iconb_happy_
div{margin:0
0 8px 0;}#collection_pop_iconb_instructions_top_
div{margin-bottom:10px;}#collection_pop_iconb_
preview_top_div{margin-bottom:10px;}#collection_
pop_iconb_instructions_bottom_div{margin:8px
0;}#collection_pop_randomate_iconb_
button{margin:8px 0;}#collection_pop_iconb_preview_holder{padding:8px 0 0 8px;}#collection_
pop_iconb_preview_holder
img{border-width:0;margin-bottom:1px;marginright:1px;}#collection_pop_iconb_builder_
holder{border:2px solid #c6c6c6;background:white
;padding:2px 0 0 2px;width:308px;}* html body
#collection_pop_iconb_builder_
holder{width:314px;}#collection_pop_iconb_builder_holder img{border-width:0;border-bottom:2px
solid #fff;border-right:2px solid #fff;}.collection_
pop_table{background-color:#e6e6e6;border:1px
solid #c6c6c6;border-bottom:0;width:590px;}.
one_photo_table{backgroundcolor:#f0f0f0;border:1px solid #c6c6c6;borderbottom:0;}.one_photo_table
td{padding:10px;font:12px arial,sans-serif;}#one_
photo_close_img,#collection_pop_close_
img{border:0;}#one_photo_tabs_div{fontfamily:arial,sans-serif;font-size:12px;fontweight:normal;}.one_photo_tab,.one_photo_tab_ac
tive{display:inline;padding:3px 0;margin:0 4px;}.
one_photo_tab{color:#0063DC;textdecoration:none;}.one_photo_tab_active{fontsize:14px;font-weight:bold;color:#FF0084;}#one_
photo_tab_row td,#one_photo_next_prev_row
td,#geo_pref_tab_row td,#collection_pop_title_row
td{padding:5px;background:#fff!important;}#o
ne_photo_next_prev_row a:hover{background-colo
r:transparent!important;color:#0063DC!important;t
ext-decoration:underline!important;}#o
ne_photo_next_prev_row a{textdecoration:none!important;}#one_photo_prev_
link,#one_photo_next_link{visibility:hidden;}#one_
photo_prev_link img,#one_photo_next_link
img{border:0!important;}#one_photo_next_prev_
row td{border-top:1px solid #c6c6c6;borderbottom:1px solid #c6c6c6;}#one_photo_mats_
div{position:relative;}.
one_photo_v_text,one_photo_p_
text{display:none;}#one_photo_mats_div
input,#one_photo_mats_div select{margintop:2px;}.one_photo_mat{overflow:auto;}#one_
photo_mat_title{overflow:hidden;}#one_photo_
mat_belongs_list_div{margin-top:8px;height:235px;
overflow:auto;}#one_photo_more_perms_table
td{padding:0;}#one_photo_geo_date_table
td{padding:0;}#one_photo_more_perms_table
label{font-size:11px;}* html body #one_photo_
mat_perms input{padding:0!important;margin:0!im
portant;}#one_photo_mat_perms{overflow:hidden!
important;}#one_photo_title,#one_photo_date_taken_exact,#one_photo_time_taken_exact,#one_
photo_date_posted_exact,#one_photo_time_posted_exact,#one_photo_date_taken_approx_
month,#one_photo_date_taken_approx_year{fontsize:20px;}#one_photo_more_perm_carrot_
div{margin-top:8px;}#footer_mobile_
message{color:#000;font-size:22px;margin:10px 0
0 0;text-align:center;padding:15px 0
19px;background:#dce8f6;fontfamily:Arial,Helvetica;border-top:5px solid
#bbd2ee;}#footer_admin_info_div{backgroundcolor:#600;color:#fff;font-weight:bold;border:2px
solid #900;padding:8px;}.site_nav_menu_
buttons{list-style:none;margin:0;padding:0;}.
site_nav_menu_buttons li{float:left;fontsize:13px;line-height:13px;position:relative;zindex:1001;border:1px solid #fff;border-bottom:1px
solid #fff;}.site_nav_menu_buttons li.menu_
li{margin-right:3px;}.site_nav_menu_buttons li.no_
menu_li{margin-right:16px;}* html .site_nav_
menu_buttons li.no_menu_li{margin-top:2px;}.
site_nav_menu_buttons li span{padding:4px 2px
4px 6px;display:block;border-right:1px solid
#fff;white-space:nowrap;cursor:pointer;}* html
.site_nav_menu_buttons li span{cursor:hand;}.
site_nav_menu_buttons li img{verticalalign:top;margin-left:4px;}.site_nav_menu_buttons
li a,.site_nav_menu_buttons li a:visited,.site_nav_
menu_buttons li a:link{text-decoration:none;fontweight:bold;color:#0063DC;}.site_nav_menu_buttons li a:hover,.site_nav_menu_buttons li a:active{b
ackground:none!important;color:#0063DC;te
xt-decoration:underline;}.site_nav_menu_buttons
li.hover{border:1px solid #f0f0f0;border-bottom:1px
solid #fff;border-right-color:#9f9f9f;}.site_nav_
menu_buttons li.hover span{border-right:1px solid
#f0f0f0;}.site_nav_menu_buttons li.hover_left a,.
site_nav_menu_buttons li.hover_left a:link,.site_
nav_menu_buttons li.hover_left a:visited{textdecoration:underline;}.site_nav_menu_buttons li
div.candy_menu{left:-1px;}.site_nav_menu_buttons
li div.candy_menu a{font-weight:normal;}.gray_
menu_buttons{list-style:none;margin:0;padding:0;}.
gray_menu_buttons li{float:left;fontfamily:arial;font-size:11px;line-height:13px;border:0
;cursor:pointer;color:gray;position:relative
;z-index:210;}* html .gray_menu_buttons
li{cursor:hand;}.gray_menu_buttons li.menu_
li{margin-right:3px;}.gray_menu_buttons li span.
button{padding:2px 2px 1px
0;display:block;border:0;white-space:nowrap;}.
gray_menu_buttons li span.
left{height:18px;padding:4px 1px 1px 7px;border:0
solid black;display:block;float:left;}.gray_menu_buttons li span.padded{padding-right:7px;}* html .
gray_menu_buttons li span.left{height:22px;float:n
one;display:inline;}.gray_menu_buttons li
img{vertical-align:top;margin-left:0;}.gray_menu_
buttons li a,.gray_menu_buttons li a:link,.
gray_menu_buttons li a:visited,.gray_menu_buttons li a:active{text-decoration:none;fontweight:normal;color:gray;}.gray_menu_buttons li a:
hover{background:none!important;color:black;te
xt-decoration:none;}.gray_menu_buttons li.
hover{border:0 solid black;}.gray_menu_buttons li.
hover span.button{border:0 solid red;}.gray_menu_
buttons li.hover a{color:black;}.gray_menu_buttons
li.hover span.left{overflow:visible;backgroundimage:url(http://l.yimg.com/g/images/gray_button_bg_hover.gif);background-repeat:norepeat;background-position:left
top;}.gray_menu_buttons li.selected span.
left{overflow:visible;background-image:url(http://l.
yimg.com/g/images/gray_button_bg_selected.
gif);background-repeat:no-repeat;backgroundposition:left top;padding:5px 0 0 8px;}.gray_menu_
buttons li.selected span.padded{paddingright:6px;}@media all and(min-width:0){head~body
.gray_menu_buttons li img{float:right;}.gray_menu_
buttons li div.candy_menu{margin-top:23px;}}div.
ad_lsrpn{width:190px;overflow:hidden;}div.ad_
lsrpn div em{font-style:normal;fontsize:10px;color:#999;text-align:center;display:block
;margin-bottom:10px;}div.ad_lsrpn
h4{margin:.75em 0 0 0;font-size:14px;}div.ad_lsrpn
p{margin:.25em 0 1em
0;color:#000!important;font-size:12px;}div.ad_ssrp
n{width:190px;overflow:hidden;marg
in-bottom:25px;}div.ad_ssrpn div em{fontstyle:normal;font-size:9px;color:#999;text-align:cen
ter;display:block;margin-bottom:10px;}div.ad_ssrpn
h4{margin:0;font-size:12px;}div.ad_ssrpn p{margin:
0;color:#000!important;font-size:12px;}
div.ad_ssrpn img{float:left;margin:0 5px 5px 0;}div.
ad_hswhn{width:740px;margintop:4px;padding:7px 0 4px 7px;height:35px;positio
n:relative;background:url(http://l.yimg.com/g/
images/ad_hswh_bg.gif) repeat-x;}div.ad_
hswhn{color:#222;font-size:12px;fontfamily:Arial,Helvetica,sans-serif;}div.ad_hswhn div,.
ad_hswhn h1,.ad_hswhn h2,.ad_hswhn
p{margin:0;padding:0;}div.ad_hswhn h1{font-size:1
0px!important;position:absolute;color:#666;text-ali
gn:center;width:780px;left:0;top:-4px;fontweight:normal;}div.ad_hswhn h1
span{background:#fff;padding:0 10px;}div.ad_
hswhn img{border:0;float:left;margin-right:10px;}
div.ad_hswhn p{padding-top:8px;float:left;}div.ad_
hswhn .cleaner{clear:both;font-size:1px;}div.
ad_hb{margin-bottom:15px;margin-top:35px;height:72px;}div.ad_hb span{fontstyle:normal;font-size:9px;color:#999;display:block;
margin-bottom:2px;}a.slide_show_back:link,a.
slide_show_back:visited,a.slide_show_
back:hover,a.slide_show_back:active{color:#53535
3;background-color:black;textdecoration:underline;}a.slide_show_
back:hover{color:#fff;}.clearfix:after{content:".";displ
ay:block;height:0;clear:both;visibility:hidden;}.
clearfix{display:inline-block;}/* Hides from IE-mac
\*/ * html .clearfix{height:1%;}.
clearfix{display:block;}/* End hide from IE-mac */
.nowrap{white-space:nowrap;}#favoriteThumbs
.photo_container{float:left;display:inline;margin:3
px;}span.photo_container{position:relative;}* html
span.photo_container{zoom:1;}span.photo_container a.pc_link img{border:none;position:absolu
te;}span.pc_tiny a.pc_link img{bottom:0;height:11p
x;left:2px;width:11px;}span.pc_s a.pc_link img{heig
ht:11px;left:2px;top:64px;width:11px;}span.pc_t
a.pc_link img{bottom:3px;*bottom:0;height:11px;l
eft:2px;width:11px;}span.pc_m a.pc_link img{botto
m:1px;height:15px;left:3px;width:22px;}span.pc_l
a.pc_link img{bottom:3px;height:22px;left:5px;widt
h:40px;}span.pc_m{display:block;}span.
pc_l{display:block;}p.UserTagList span.
pc_t{font-size:0;}.TagsMain #Hint p{color:#999;}
span.pc_tiny{display:block;}div.borderize span.
pc_t{font-size:0;}table.RecentActivity span.
pc_s{display:block;}table.ArchiveDisplay span.
pc_s{display:block;}* html div#setThumbs span.
photo_container{zoom:normal;}p.vsThumbnail
span.pc_m{display:block;font-size:0;}p.
vsThumbnail span.pc_m a.pc_link img{left:22px;}
div#setThumbs div.setThumbs-indv{float:left;}
div#setThumbs span.pc_s{display:block;}
div#setThumbs span.pc_s a.pc_link
img{bottom:3px;float:left;}div.HoldPhotos p.
RecentPhotos span.pc_t{font-size:0;}table.
PopularPic .pc_s{display:block;}p.StreamList span.
pc_t{font-size:0;}div.ResultsThumbs span.
pc_t{font-size:0;}table.AllMonths
.pc_s{display:block;}div#gpHistory span.
pc_s{display:block;}div#gpHistory span.pc_s a.
pc_link img{top:24px;}p.PoolList .pc_t a.pc_link
img{bottom:2px;}div.PoolList2 .pc_t a.pc_link
img{bottom:2px;}div.thumb-squirt-cont div.
thumb-squirt-indv{color:#999;float:left;fontsize:11px;margin:0 10px;position:relative;textalign:center;width:75px;}div.thumb-squirt-cont div.
thumb-squirt-indv span.pc_s{display:block;}img.
nextprev_stew_indicator{position:absolute;display:
block!important;top:65px;left:3px;border:0!importa
nt;width:11px;height:11px;}img.nextprev_caret{po
sition:absolute;display:block!important;top:28px;le
ft:30px;border:0!important;width:16px;height:19
px;}img.notsowide{height:auto;max-width:500px;}.
loading_el{position:absolute;display:block;color:#fff
;background-color:#000;fontfamily:Arial,Helvetica,sans-serif;fontweight:bold;padding:3px 5px;font-size:12px;}.
Set{width:130px;text-align:left;marginbottom:15px;}.Set h4{width:120px;margintop:0;margin-bottom:0;font-size:15px;fontweight:bold;}.Set
p{margin-top:2px;font-size:11px;color:#777;}.Sets{
width:120px;height:182px;textalign:left;float:left;paddingright:6px;}#ViewCollection .Sets{width:130px;}.
Sets h4{width:110px;margin-top:0;marginbottom:0;font-size:15px;font-weight:bold;}.Sets
p{margin-top:2px;font-size:11px;color:#777;}.
bbml_set{text-align:left;}.bbml_set
h4{margin:0;font-size:15px;font-weight:bold;}.
bbml_set p{margin-top:2px;fontsize:11px;color:#777;}.bbml_set .
SetCase{margin:0;height:91px;}.SetCase{margintop:5px;margin-bottom:5px;width:91px;height:95p
x;padding:7px 0 0 7px;background:url(http://l.yimg.
com/g/images/set_case.gif) no-repeat;}.SetCase
a{text-decoration:none;}.SetCase a:link{textdecoration:none;}.SetCase a:visited{textdecoration:none;}.SetCase a:hover{background:tra
nsparent;text-decoration:none;}.SetCase a:active{b
ackground:transparent;text-decoration:none;}.
SetCase .setThumb{border:1px solid #000;}.
setCommentLinkDiv{margin-top:-20px;marginleft:2px;}a.setLink img{border:1px solid #000;}a.
setCommentLink img{border:0;}.
Seta:link{color:#0259C4;text-decoration:none;}.
Seta:visited{color:#0259C4;text-decoration:none;}.
Seta:hover{color:#FFF;text-decoration:none;backgr
ound:#0063DC;}.Seta:active{color:#FFF;text-decor
ation:none;background:#0259C4;}#FaqContainer
h2 a{text-decoration:none;}#FaqContainer ol.
Separate{padding-bottom:20px;}#faq-controls{displ
ay:none;}#FaqContainer.scrumjax{position:relative;
width:100%;margin:0;}#FaqContainer.scrumjax
h2{margin-bottom:6px;font-size:14px;fontweight:bold;}#FaqContainer.scrumjax .OlContainer{
overflow:hidden;height:36px;}#FaqContainer.
scrumjax .OlContainer ol.Separate{margintop:0;margin-bottom:0;padding-bottom:0;backgrou
nd:none;}#FaqContainer.scrumjax .CatContainer a.
ShowMore{display:block;margin:4px 0 18px
40px;font-size:11px;color:#0063DC;text-decoration
:none;background:none;outline:none;-mozoutline:none -moz-mac-focusring;}#FaqContainer.
scrumjax .CatContainer a.ShowMore:hover{text-de
coration:underline;background:none;}#FaqContain
er.scrumjax .CatContainer{marginbottom:16px;border-bottom:1px dotted
#dadada;}#FaqContainer.scrumjax div.col{float:left;
display:inline;width:45%;marginleft:35px;}#FaqContainer.scrumjax #faq-controls{di
splay:block;position:absolute;top:-34px;*top:41px;right:0;}#FaqContainer.scrumjax
#faq-controls.search-enabled{top:-84px;*top:91px;right:0;}#FaqContainer.scrumjax #faq-controls
a{font-size:12px;text-decoration:none;}#faqcontrols-collapse{display:none;}#faq-search{marginbottom:8px;padding:10px;background:#f9f9f9;fo
nt-size:12px;}#faq-search label{font-
60
weight:bold;}#faq-search-field{width:275px;marginleft:6px;}#referal_tip{position:relative;backgroundcolor:#ffe28a;padding:10px;marg
in-bottom:20px;margin-top:-10px;fontsize:12px;border:1px solid #ffe28a;}.referal_tipwedge{background-color:transparent;backgroundimage:url(http://l.yimg.com/g/images/
wedges-yellow.gif);background-repeat:norepeat;background-position:0 0;width:17px;height:
8px;position:absolute;}.referal_tip-wedgeup{background-position:0
-162px;left:195px;top:0;margin-top:-8px;}
td.see_original_mail{white-space:nowrap;padding:0
25px 0 15px;}.f-sprite{background-image:url(http://l.
yimg.com/g/images/photo-gne-sprite-3.png);_background-image:url(http://l.yimg.com/g/images/
photo-gne-sprite-3.gif);background-position:0
0;background-repeat:no-repeat;}.fs-add_to_
delicious{background-position:0 -30px;}.fs-badge_
pro{background-position:0 -70px;}.fs-cc_icon_attribution_small{background-position:0 -112px;}.
fs-cc_icon_noderivs_small{background-position:0
-157px;}.fs-cc_icon_noncomm_small{backgroundposition:0 -202px;}.fs-cc_icon_sharealike_
small{background-position:0 -247px;}.
fs-context_caret_left{background-position:0
-292px;}.fs-context_caret_right{background-position:0 -341px;}.fs-context_crap{background-position:0 -388px;}.fs-icon_a_bit_private{backgroundposition:0
-522px;}.fs-icon_all_rights{background-position:0
-567px;}.fs-icon_blue_arrow_down{backgroundposition:0 -612px;}.fs-icon_blue_arrow_
right{background-position:0 -651px;}.fs-icon_
cart{background-position:0
-690px;}.fs-icon_check{background-position:0
-736px;}.fs-icon_confirm{background-position:0
-788px;}.fs-icon_dopplr{background-position:0
-836px;}.fs-icon_getty_15x15{background-position:0 -882px;}.fs-icon_globe{background-position:0
-927px;}.fs-icon_guest_pass{background-position:0
-973px;}.fs-icon_lastfm_over{background-position:0
-1018px;}.fs-icon_no_known_
restrictions{background-position:0 -1064px;}.
fs-icon_openlibrary{background-position:0
-1110px;}.fs-icon_openplaques{background-position:0 -1156px;}.fs-icon_private{background-position:0 -1202px;}.fs-icon_public{background-position:0
-1247px;}.fs-icon_unread{background-position:0
-1292px;}.fs-icon_unread_bw{background-position:0 -1338px;}.fs-icon_upcoming_
over{background-position:0 -1384px;}.fs-logo_yahoo_company{background-position:0 -1430px;}.
fs-send_to_a_friend{background-position:0
-1471px;}.fs-icon_upcoming_
over{width:15px;height:15px;}.fs-icon_dopplr,.
fs-icon_openlibrary,.fs-icon_openplaques,.
fs-icon_lastfm_
over{width:16px;height:16px;}.f-note-yellowsprite{background-image:url(http://l.yimg.com/g/
images/note-sprite-1.png);background-position:0
0;background-repeat:no-repeat;}.f-note-greensprite{background-image:url(http://l.yimg.com/g/
images/note-sprite-2.png);background-repeat:norepeat;}.f-rotate-sprite{backgroundimage:url(http://l.yimg.com/g/images/rotate-sprite.
png);background-position:0 0;backgroundrepeat:no-repeat;}.fs-tl{background-position:0 0;}.
fs-tr{background-position:top right;}.fsbl{background-position:bottom left;}.
fs-br{background-position:bottom right;}#feature_
flip .feature_on{color:green;fontweight:bold;}#feature_flip .feature_
off{color:red;font-weight:bold;}#feature_flip
p{font-size:12px;}table.flipper tr.
flipped{background-color:#f6f6f6;}table.flipper
th{padding:0 5px;font-size:12px;height:30px;}table.
flipper tr.second td{border-bottom:1px solid #eee;}
table.flipper tr.first td{padding:5px 5px 0
5px;font-size:12px;vertical-align:bottom;}table.
flipper tr.second td{padding:5px 0 10px
5px;font-size:12px;vertical-align:top;}table.flipper
td.gray{color:gray;}
p.flickr-user{position:relative;min-height:26px;*heig
ht:26px;padding:0;overflow:visible;}p.flickr-user
span.name{float:left;margin:0;paddingleft:30px;padding-right:10px;}p.flickr-user span.
name img{display:block;position:absolute;top:0;le
ft:0;}p.flickr-user span.name strong.username{displ
ay:block;color:#222;margin-top:-1px;fontsize:13px;font-weight:normal;}p.flickr-user span.
name strong.username a{color:#222;textdecoration:none;}p.flickr-user span.name strong.
username a:hover{color:#0063DC;background:tran
sparent;}p.flickr-user span.name span.realname{dis
play:block;float:left;margin-top:1px;padding:0;fontsize:11px;color:#bbb;}
a.delete-x{display:block;width:14px;height:14px;ba
ckground:url(http://l.yimg.com/g/images/delete_x_
small_sprite.gif) no-repeat 3px 4px;}a.
delete-x:hover{background-position:3px -34px;}a.
delete-x span{position:absolute;left:-999em;}a.
delete-x-inline img{background:url(http://l.yimg.
com/g/images/delete_x_small_sprite.gif) no-repeat
3px 4px;}a.delete-x-inline:hover{backgroundcolor:transparent;}a.delete-x-inline:hover
img{background-position:3px -34px;}.
maint-warning-minor,.maint-warning-major{margintop:1em;padding:8px;background:#ffc;border:1px
solid #eee;}.maint-warning-minor p,.maint-warningmajor p{margin:0;padding:0;font-size:130%;}.
taglist{border-collapse:collapse;}.taglist
th{text-align:left;backgroundcolor:#eee;padding:5px;font:12px
Arial,Helvetica,sans-serif;font-weight:bold;}.taglist
td{border-bottom:0 solid #ccc;border-top:1px solid
#ccc;}.taglist td.tag{padding-right:5em;}#taglist_
fragment_div .taglist th{paddingtop:0;color:#666;}#taglist_fragment_div .taglist{wid
th:100%;*width:94%;}#taglist_fragment_div .
taglist td{padding:4px 4px!important;backgroundcolor:#fff;}#taglist_div .taglist_example_
div{background-color:#eee!important;}#taglist_fragment_div{border:1px solid
#ccc;padding:10px;-moz-border-radius:8px;-webkitborder-radius:8px;background-color:#eee;}.
taglist_copy_div,.taglist_example_
div{display:block;font:12px Arial,Helvetica,sans-seri
f!important;color:#666!important;margin:0 0 10
0!important;padding:0!important;}.taglist_example_div{color:#000!important;padding:4px!importa
nt;background-color:#fff;}.yui-skin-sam .
yui-ac{position:relative;font-family:arial;fontsize:100%;}.yui-skin-sam .yui-ac-input{position:rela
tive;width:100%;}.yui-skin-sam .yui-ac-container{po
sition:absolute;top:1.6em;left:-1px;width:100%;}.
yui-skin-sam .yui-ac-content{position:absolute;widt
h:100%;border:1px solid
#808080;background:#fff;maxheight:20em;overflow:auto;overflow-x:hidden;_
height:20em;z-index:9050;}.yui-skin-sam .yui-ac-sh
adow{position:absolute;margin:.3em;width:100%;
background:#000;-moz-opacity:.10;opacity:.10;filte
r:alpha(opacity=10);z-index:9049;}.yui-skin-sam .
yui-ac-content ul{margin:0;padding:0;width:100%;}.
yui-skin-sam .yui-ac-content
li{margin:0;padding:3px 7px;cursor:default;whitespace:nowrap;text-indent:0;}.yui-skin-sam .
yui-ac-content
li.yui-ac-prehighlight{background:#B3D4FF;}.
yui-skin-sam .yui-ac-content li.yui-ac-highlight{back
ground:#426FD9;color:#FFF;}td.yui-skin-sam .
yui-ac-content{width:500px;}#SubNav .Extras div.
SlideShowShareButtons{text-align:right;margintop:-6px;}.SlideShowShareButtons{position:relative
;text-align:right;z-index:1000;zoom:1;}.wide_top
.SlideShowShareButtons{margin-top:0;paddingtop:0;border:0 solid black;}#SSButtonHugger{positi
on:relative;z-index:251;white-space:nowrap;zoom:
1;}#SSButtonHugger span{float:right;display:inline;}
#SSButtonHugger span.slideshow-link-wrapper{flo
at:none;}#SSButtonHugger a{text-decoration:none;
display:block;font-weight:bold;fontsize:11px;zoom:1;_width:30px;}td.RHS{paddingtop:5px;}td.RHS .SlideShowShareButtons{marginbottom:34px;_margin-bottom:10px;margin-top:6px;}div.ad_hb{margin-top:0;height:auto;}td.Extras
#SSButtonHugger{width:210px;}#SubNav
#ShareMenu a{textdecoration:underline;}#setCrumbs
.scTopCrumbShareSlideshow{padding-top:0;}#Slid
eShowButton,#ShareButton{background:transpare
nt url(http://l.yimg.com/g/images/sharing_sprite.
png) no-repeat 100% 3px;border:solid 1px
#fff;padding:5px 26px 5px
6px;color:#a1a1a1;white-space:nowrap;textdecoration:none;z-index:252;}#ShareButton{borderbottom:solid 5px #fff;}#ShareButton:focus{outline:
none;}#ShareButton:hover{color:#0259C4;backgro
und-position:100% -19px;}#ShareButton.share_
button_on{background-color:#efefef;border:solid
1px #d7d7d7;border-bottom:solid 5px
#efefef;background-position:100%
-41px;color:#000;}#ShareButton.share_button_
on:hover{border-bottom:solid 5px
#efefef;background-position:100%
-63px;}#SlideShowButton{background-position:100% -85px;padding-right:29px;margin-right:5
px;}#SlideShowButton:hover{color:#0259C4;backg
round-position:100% -108px;}#ShareMenu{clear:b
oth;float:none;position:absolute;zindex:50;top:27px;right:0;white-space:normal;textalign:left;background-color:#efefef;display:none;pa
dding:6px 6px 14px 6px;width:312px;border:solid
1px #d7d7d7;}#ShareMenu h4{font-size:13px;fontweight:bold;margin:0;color:#000;texttransform:uppercase;}#SubNav .Extras
#ShareMenu p{width:auto;}#ShareMenu .sharing_
faded_text,#ShareMenu p.sharing_faded_text a,.
sendInvite p.sharing_faded_
text{color:#969593;font-size:11px;}#ShareMenu
p.sharing_faded_text,.sendInvite p.sharing_faded_
text{margin:0;}#sharing_email_input,#to_email_inp
ut{width:125px;border:none;background-color:non
e;display:none;}#sharing_email_input:focus,#to_
email_input:focus{outline:none;}#ShareMenu p.
sharing_faded_text a{textdecoration:underline;}#ShareMenu p.sharing_faded_text a:hover{color:#fff;}#ShareMenu .
CancelButt{margin-left:4px;}.share_inner_list .
ShareGPMsg .sharing_privacy_msg{fontsize:11px;color:#969593;lineheight:normal;margin:5px 0;}#sharing_chbx_
family,#sharing_chbx_private{margin-left:5px;}#Sha
ringQuickStatMsg{padding:0 0 0 3px;margin:0;posi
tion:absolute;top:0;left:0;backgroundcolor:#fff;}#SubNav .Extras #ShareMenu p#Sharin
gQuickStatText{padding:0 0 0 20px;margin:0;textalign:left;line-height:18px;font-size:12px;color:#000
;width:225px;}#SharingQuickStatText{padding-left:
22px;}#SharingQuickStatText a{text-decoration:und
erline;}#SharingQuickStatText.send_
success{background:transparent url(http://l.yimg.
com/g/images/icon_check_small.png) no-repeat 0
1px;}#SharingQuickStatText.send_
fail{background:transparent url(http://l.yimg.com/g/
images/icon_error_x_small.png) no-repeat 0 1px;}#
QuickShareAddMsg{padding:0;fontsize:12px;margin:10px 0 0 0;}#ShareOptions{liststyle:none;margin:0 0 15px
0;padding:0;}#ShareOptions li.share_
options{margin-bottom:10px;padding:5px 5px 5px
15px;line-height:normal;text-indent:0;border:solid
1px #d7d7d7;}#ShareOptions li.share_
options:hover{backgroundcolor:#fff;}#ShareOptions li.sharing_options_li_
open{background-color:#fff;paddingbottom:10px;}#ShareOptions li.share_options
#SharingEmbedMarkup.ff_2_mac_hack{display:no
ne;}#ShareOptions li.sharing_options_li_open
#SharingEmbedMarkup.ff_2_mac_hack{display:inli
ne;}#ShareOptions div.sharing_options_
header{color:#0063dc;font-weight:bold;paddingleft:15px;margin-left:-13px;cursor:pointer;backgrou
nd:transparent url(http://l.yimg.com/g/images/
sharing_sprite.png) no-repeat 5px
-130px;}#ShareOptions div.sharing_options_header_open{color:#000;background-position:3px
-143px;}#ShareOptions .sharing_options_inner{disp
lay:none;zoom:1;}#ShareOptions .sharing_options_inner p.sharing_faded_text{color:#000;fontsize:12px;margin:15px 0 0;padding:0;}.sharing_embed_cont{margin-top:0;padding-top:0;}.share_inner_list{list-style:none;margin:7px 0 0
0;padding:0;}.share_inner_list li.sharelist{textindent:0;line-height:normal;}.morethanoneli li.share
list{background:transparent url(http://l.yimg.com/g/
images/sharing_sprite.png) no-repeat 0
-183px;padding-left:10px;}.share_inner_list li.
sharelist p{font-size:12px;color:#000;margin:0;pad
ding:0;}.share_inner_list li.sharelist p.
first{margin-top:15px;}.share_inner_list li.sharelist
#AutoCompleteContactsBox{marginbottom:10px;}#grab_link_get_butt{texttransform:uppercase;margin:12px 0;}#sharing_
grab_link_input{width:275px;marginbottom:20px;border:1px solid #d7d7d7;margin-top:
4px;padding:4px;*height:24px;}#SharingEmbedIt
textarea{width:280px;border:1px solid #d7d7d7;pa
dding:4px;}#SharingBlogIt .sharing_blog_
link{color:#0063dc;marginbottom:4px;cursor:pointer;text-decoration:underlin
e;}#SharingBlogIt p.sharing_faded_text
a{color:#0063dc;}#SharingBlogIt .sharing_options_
inner p.sharing_faded_text{margin-bottom:10px;}#
GPTooltip{display:none;}#AutoCompleteContact
{display:none;}#AutoCompleteContactsBox{width:
265px;background-color:#fff;fontsize:12px;border:solid 1px
#d7d7d7;padding:4px;min-height:15px;lineheight:20px;}.sendContentCol #AutoCompleteCon
tactsBox{width:100%;}b.autocomplete_
contact{font-weight:normal;color:#000;marginright:10px;white-space:normal;}.AutoCompleteCon
tactClose{color:#acacac;marginleft:3px;cursor:pointer;}.autocomplete_hilite{color:
#000;background:#c3ddff;}.autocomplete_contact_hilite{background-color:#b5d5ff;}.
autocomplete_contact_hilite span{color:#B7410E;}
#AutoCompleteLoading{color:#969593;font-style:it
alic;margin:0;padding:0;}#ShareButtonContainer
#ShareButton{padding:0;borderbottom:0;}#ShareButtonContainer #ShareButton
em{display:block;padding:5px 26px 5px
6px;border-bottom:4px solid #fff;font-style:normal;
}#ShareButtonContainer #ShareButton.share_button_on em{border-bottom:4px solid
#f6f6f6;}#ShareButtonContainer #ShareButton.
share_button_on{backgroundcolor:#f6f6f6;border:solid 1px #999;borderbottom:0;background-position:100% -41px;color:#
000;}#ShareButtonContainer #ShareButton.
share_button_on:hover{background-position:100%
-63px;}#ShareMenu.share-menu-bs{clear:both;float
:none;position:absolute;z-index:50;top:27px;right:0
;*top:28px;*right:-1px;white-space:normal;textalign:left;background-color:#f6f6f6;display:none;pa
dding:6px 6px 0 6px;width:312px;border:solid 1px
#999;}body:first-of-type #ShareMenu.
share-menu-bs{top:26px;}#ShareMenu.
share-menu-bs p.sharing_faded_text{marginbottom:10px;}#ShareMenu.share-menu-bs
#SharingEmbedIt p.sharing_faded_text{marginbottom:2px;}#ShareMenu.share-menu-bs
#ShareOptions{list-style:none;margin:0;padding:0;}
#ShareMenu.share-menu-bs #ShareOptions li.
share_options{margin-bottom:10px;padding:5px
5px 5px 15px;line-height:normal;textindent:0;border:solid 1px #d7d7d7;background:#fc
fcfc;}#ShareMenu.share-menu-bs #ShareOptions
li.share_options:hover{backgroundcolor:#fff;}#ShareMenu.share-menu-bs
#ShareOptions li.sharing_options_li_open{paddingbottom:10px;background-color:#fff;}#ShareMenu.
share-menu-bs #ShareOptions li.share_options
#SharingEmbedMarkup.ff_2_mac_
hack{display:none;}#ShareMenu.share-menu-bs
#ShareOptions li.sharing_options_li_open
#SharingEmbedMarkup.ff_2_mac_
hack{display:inline;}#ShareMenuShadow{display:n
one;position:absolute;top:7px;left:0;z-index:-1;widt
h:338px;height:100%;overflow:hidden;marg
in-left:-7px;background:transparent;paddi
ng:0;-moz-opacity:.8;opacity:.8;filter:alpha(opacity=
80);}#ShareMenuShadow.shadow-ie{display:none!i
mportant;position:absolute;z-index:-2;width:312px;
height:400px;margin:.3em;background:#000;-mozopacity:.10;opacity:.10;filter:alpha(opacity=10);}#S
hareMenuShadow.shadow-ie .shadow_table{displa
y:none;}#ShareMenuShadow .shadow_table{positi
on:relative;width:100%;height:100%;border-collap
se:collapse;margin:0;padding:0;}#ShareMenuShad
ow .shadow_sprite{padding:0;background:transpar
ent url(http://l.yimg.com/g/images/tc_white_shadow_sprite.png) no-repeat 0 0;lineheight:1px;}#ShareMenuShadow .shadow_tl{width
:6px;height:6px;background-position:-1px
-1px;}#ShareMenuShadow
.shadow_t{background:none;}#ShareMenuShadow
.shadow_tr{width:6px;height:6px;backgrou
nd-position:-993px -1px;}#ShareMenuShadow .
shadow_l{background-position:0
-11px;}#ShareMenuShadow
.shadow_m{background:none;}#ShareMenuShad
ow
.shadow_r{width:6px;background-position:-994px
-11px;}#ShareMenuShadow .shadow_bl{width:6px
;height:6px;background-position:-1px
-993px;}#ShareMenuShadow
.shadow_b{height:6px;background-position:-11px
-994px;}#ShareMenuShadow .shadow_br{width:6p
x;height:6px;background-position:-993px -993px;}#
61
BoSelectaContactsBox{width:265px;backgrou
nd-color:#fff;font-size:12px;min-height:15px;lineheight:20px;}.morethanoneli li.sharelist
#BoSelectaContactsBox{margin-bottom:10px;}#Bo
SelectaContactsBox #sharing_email_input{display:
block;width:100%;border:1px solid
#d7d7d7;margin-top:4px;padding:4px;*height:24px
;}#BoSelectaContactsBox .loading{margintop:4px;padding:1px 4px;}body:first-of-type
#BoSelectaContactsBox.bo-selecta .
yui-ac-content{margin-top:1px;}#BoSelectaResultsBox{maxheight:166px;overflow:auto;liststyle:none;margin:0 0 12px 0;*margin-top:-15px;pa
dding:0;}#BoSelectaResultsBox.overflow{*height:1
66px;}#BoSelectaResultsBox
li{overflow:hidden;*margin-bottom:3px;padding:5px 5px 3px;line-height:13px;color:#0
00;*zoom:1;}#BoSelectaResultsBox li p,#SubNav
#ShareMenu #BoSelectaResultsBox li p{position:r
elative;float:left;overflow:visible;width:100%;m
in-height:26px;*height:26px;margin:0;padding:0;}#
BoSelectaResultsBox li img{vertical-align:middle;}#
BoSelectaResultsBox li a,#ShareMenu
#BoSelectaResultsBox li a{text-decoration:none;}#
BoSelectaResultsBox li span.edit-rel{display:inline;f
loat:none;margin:0;font-size:11px;text-transform:lo
wercase;}#BoSelectaResultsBox li p span.
name{float:left;max-width:184px;margin:0;paddingleft:30px;paddingright:10px;}#BoSelectaResultsBox li p span.name
img{display:block;position:absolute;top:0;left:0;}#B
oSelectaResultsBox li p span.name img.
bs-email-icon{margin:4px 0 0
4px;}#BoSelectaResultsBox li p span.name strong.
username{display:block;margin-top:-1px;fontsize:13px;font-weight:normal;color:#222;}#BoSele
ctaResultsBox li p span.name strong.username a{c
olor:#666;}#BoSelectaResultsBox li p span.name
strong.username a:hover{background:transparent;
color:#0063dc;}#BoSelectaResultsBox li p span.
name strong.email{margintop:4px;}#BoSelectaResultsBox li p span.name .re
alname{display:block;float:left;margintop:1px;padding:0;font-size:11px;color:#bbb;}#BoS
electaResultsBox li p span.name a.realname:hover
{color:#fff;}#BoSelectaResultsBox li p span.
remove-link-container{float:left;margin:6px 0
0;}#BoSelectaResultsBox li p span.
controls{float:right;margin-top:-1px;padding-right:2
0px;*position:absolute;*right:0;*top:5px;*margin:0
;}#BoSelectaResultsBox li p.email-contact span.
controls{margin-top:4px;*top:9px;*margin:0;}.
share-menu-bs .morethanoneli li.sharelist{backgro
und:none;padding-left:0;}#post-gp-gen{margin-top:
15px;}#SharingGeneratingGpMsg{position:absolut
e;top:0;left:-5px;margin:0;padding:0;background:#f
ff;}#SharingGeneratingGpText{textalign:center;}#sharing_grab_link_gp_
input{width:275px;margin:4px 0 6px;border:1px
solid #d7d7d7;padding:4px;*height:24px;}#ShareM
enu.share-menu-bs #SharingBlogIt .sharing_options_inner ul{padding:0;}#ShareMenu.
share-menu-bs #SharingBlogIt .sharing_blog_
link{color:#999;margin:0 0 4px
18px;cursor:pointer;list-styletype:circle;}#ShareMenu.share-menu-bs
#SharingBlogIt .sharing_blog_link
span{color:#0063dc;text-decoration:underline;}.
sendInviteBS p.sharing_faded_text{margintop:15px;}.sendInviteBS #BoSelectaContactsBox{
width:100%;margin:0 0 15px;}.sendInviteBS
#BoSelectaContactsBox #to_email_input{display:bl
ock;width:100%;border:1px solid #d7d7d7;margintop:0;padding:4px;}.sendInviteBS #BoSelectaContactsBox #to_email_input.grey,.sendInviteBS
#BoSelectaContactsBox #to_email_input.
grey:hover{color:#999;}.sendInviteBS
#BoSelectaContactsBox .ac-container .
yui-ac-content .yui-ac-bd ul{position:static;width:10
0%;background:transparent;border:none;opacity:1;
filter:alpha(opacity=100);}.sendInviteBS
#BoSelectaContactsBox .ac-container .
yui-ac-content .yui-ac-bd ul li{padding:5px;lineheight:10px;}.sendInviteBS #BoSelectaResultsBox
{display:none;max-height:174px;margin:15px
0;background:#fff;border:1px solid #d7d7d7;}.
sendInviteBS #BoSelectaResultsBox.
not-empty{display:block;}.sendInviteBS
#BoSelectaResultsBox li{border-bottom:1px solid
#efefef;}.sendInviteBS #BoSelectaResultsBox li.
last{border-bottom:0;}.sendInviteBS #BoSelectaResultsBox li p span.controls{paddingright:10px;padding-top:4px;}
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<html
xmlns:dc="http://purl.org/dc/terms/"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:cc="http://creativecommons.org/ns#">
<!DOCTYPE
HTML
PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
content=”text/html; charset=iso-8859-1”>
<head><meta http-equiv=”Content-Type”
<html xmlns:dc="http://purl.org/dc/terms/"
xmlns:foaf="http://xmlns.com/foaf/0.1/"
xmlns:cc="http://creativecommons.org/ns#">
<title>
Hi
Web
2.0
</title>
<title>
ser
chic
on
Flickr
Photo
Sharing!
</title>
<head>
<meta
http-equiv="Content-Type"
content="text/html; charset=UTF-8">
<title>ser
chic on
Flickr - Photo Sharing!</title>
<meta
name=”author”
content=”Megi charset=UTF-8">
Zumstein,
Barandun”
/>
<meta
name="keywords"
content="photography,
digital Claudio
photography,
cameraphones,
camera, hobby photography, photo, digital camera, compact <metahttp-equiv="Content-Type"
content="text/html;
<meta name=”description”
Gestaltung,
smartmedia,
cameras,
canon, content=”Hi-Visuelle
nikon, olympus,
fujifilm,
video">
Neustadtstrasse
<metaflash,
name="keywords"
content="photography,
digital photography,
cameraphones,
camera,28,
hobby photography, photo, digital camera, compact6003
Luzern,
Grafische
Erzeugnisse,
von
Büchern
über
Plakate
bis
Signaletik.”
/>
<meta
name="description"
content="ser
chic">
flash, smartmedia, cameras, canon, nikon, olympus, fujifilm, video">
<meta
name=”keywords”
content=”Grafik,
<meta
http-equiv="imagetoolbar"
content="no"> Gestaltung, Buch, Plakat, Printmedien,
<metaname="description"
content="ser chic">
Signaletik,
Beschriftung,
Print,
Visuelle
<meta
name="title"
content="ser
chic"
/> Gestaltung, Bernhard Willhelm, Het Totaal
<metahttp-equiv="imagetoolbar"
content="no">
Rappel,
68 - Zürich steht
Kopf, Community
Development: Local and Global Challenges,
<meta
name="medium"
content="image"
/>
<metaname="title"
content="ser
chic" />
Herweber,
Top
of
Central
Switzerland,
Kunstmuseum Luzern, Design_Z, ZHdK,
<meta name="medium" content="image" />
Luzern
- Soziale Arbeit, Hochschule Luzern - Design & Kunst, Schönste
<link Hochschule
rel="image_src"
href="http://farm4.static.flickr.com/3414/3601826205_6d90e7098c_m.jpg"
/>
Bücher”
/>
<link Schweizer
rel="canonical"
href="http://www.flickr.com/photos/tobias_assimil/3601826205/"
/>/>
<link rel="image_src"
href="http://farm4.static.flickr.com/3414/3601826205_6d90e7098c_m.jpg"
<meta name="viewport"
content="width=820">
<link rel="canonical"
href="http://www.flickr.com/photos/tobias_assimil/3601826205/"
/>
<script language=”JavaScript”
type=”text/JavaScript”>
<meta name="viewport"
content="width=820">
<!-function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length;
<link type="text/css"
rel="stylesheet" href="http://l.yimg.com/g/css/c_fold_main.css.v73751.64777.71350.14">
i++) rel="stylesheet" href="http://l.yimg.com/g/css/c_fold_main.css.v73751.64777.71350.14">
<link type="text/css"
if (a[i].indexOf(“#”)!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
<link rel="shortcut
icon" type="image/ico" href="/favicon.ico">
<link rel="shortcut
icon" type="image/ico" href="/favicon.ico">
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(“?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i]
[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].
document);
if(!x && d.getElementById)
return x;
<link type="text/css"
rel="stylesheet"x=d.getElementById(n);
href="http://l.yimg.com/g/css/c_fold_photo.css.v72999.67580.69785.64777.14">
}
<link type="text/css"
rel="stylesheet"
href="http://l.yimg.com/g/css/c_bo_selecta.css.v999.1245290295.14">
<link type="text/css"
rel="stylesheet"
href="http://l.yimg.com/g/css/c_fold_photo.css.v72999.67580.69785.64777.14">
<link type="text/css" rel="stylesheet" href="http://l.yimg.com/g/css/c_bo_selecta.css.v999.1245290295.14">
function MM_swapImage() { //v3.0
i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
<!--[if LT var
IE 7]>
for(i=0;i<(a.length-2);i+=3)
<!--[if LT <style
IE 7]> type="text/css">
if
((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.
.trans_png
{
<style type="text/css">
src; x.src=a[i+2];}
{behavior:
url('/javascript/pngbehavior2.htc');
.trans_png
}
border:0;
behavior: url('/javascript/pngbehavior2.htc');
}
border:0;
</style>function MM_openBrWindow(theURL,winName,features) { //v2.0
}
window.open(theURL,winName,features);
</style> <![endif]-->
}
<![endif]-->
//-->
<script </script>
type="text/javascript">
<link href=”web2_files/navbar.css”
rel=”stylesheet” type=”text/css”>
var global_magisterLudi
= '96b1951795c91dc03467cfdd95a798f0',
<script type="text/javascript">
<style
global_auth_hash
= '195e4e74ea2601cc380758a847504edf',
var global_magisterLuditype=”text/css”>
= '96b1951795c91dc03467cfdd95a798f0',
<!-global_auth_token
= '',
global_auth_hash
= '195e4e74ea2601cc380758a847504edf',
body
global_flickr_secret
= 'cf787ad5963cd371',
global_auth_token
= '',{
margin-left:
15px;= '6708',
global_slideShowVersion
global_flickr_secret
= 'cf787ad5963cd371',
margin-top:
15px;
global_slideShowCodeVersion
= '34351',
global_slideShowVersion = '6708',
}
global_slideShowVersionV2
= '33427',
global_slideShowCodeVersion
= '34351',
#gaswerk_text
{
global_slideShowCodeVersionV2
= '49745',
global_slideShowVersionV2 = '33427',
position:absolute;
global_slideShowTextVersion
= '66488',
global_slideShowCodeVersionV2
= '49745',
width:200px;
global_slideShowVersionV3
=
'71649',
global_slideShowTextVersion = '66488',
height:115px;
global_nsid
= '99894645@N00',
global_slideShowVersionV3
= '71649',
z-index:27;
global_ispro
= 0,
global_nsid
= '99894645@N00',
global_dbid
'919749',
global_ispro
= 0, left:=626px;
top: ='garotasimpatica',
18px;
global_name
global_dbid
= '919749',
visibility:
global_expire
='0',hidden;
global_name
='garotasimpatica',
}
global_icon_url
='http://l.yimg.com/g/images/buddyicon.jpg#99894645@N00',
global_expire ='0',
#text_68 =
{ '75',
global_tag_limit
global_icon_url
='http://l.yimg.com/g/images/buddyicon.jpg#99894645@N00',
position:absolute;
global_collection_depth_limit
= 5,
global_tag_limit = '75',
width:200px;
global_stewartVersion
global_collection_depth_limit
= 5, = '71377',
height:115px;
global_contact_limit
=
'3000',
global_stewartVersion = '71377',
left:
349px;
global_eighteen
= 1,
global_contact_limit
= '3000',
= 1,
top: 20px;= 10,
global_group_limit
global_eighteen
z-index:
28;
global_photos_ids_limit
= 20,
global_group_limit
= 10,
visibility:
one_photo_show_belongs
global_photos_ids_limit
= 20,hidden; = 0,
}
prefs_isset_viewgeo
one_photo_show_belongs
= 0, = 0,
#zhdk_text
{
photos_url
=
prefs_isset_viewgeo
= '/photos/99894645@N00/',
0,
position:absolute;
disable_stewart
= 0;
photos_url
= '/photos/99894645@N00/',
width:200px;
disable_geo
=
0;
disable_stewart = 0;
var =global_rper
= 0;
disable_geo
0; height:115px;
var global_rper = 0;z-index:29;
Forma
Aparente
Forma
Oculta
left: 83px;
var global_widget_carets
= 0;
top: 594px;
var global_explore_search
= 0;
var global_widget_carets
= 0;
visibility:
hidden;
var global_explore_search
= 0;
}
var global_intl_lang
= 'en-us';
#bw_kat_text
var global_intl_lang
= 'en-us'; {
position:absolute;
var _photo_root
= 'http://farm.static.flickr.com/';
'http://farm.static.flickr.com/';
width:200px;
var _site_root
= 'http://www.flickr.com';
var _photo_root
=
height:115px;
var _images_root
= 'http://l.yimg.com/g/images';
var _site_root
= 'http://www.flickr.com';
=z-index:30;
var _intl_images_root
= 'http://l.yimg.com/g/images/en-us';
var _images_root
'http://l.yimg.com/g/images';
top:
20px;
var _intl_images_root = 'http://l.yimg.com/g/images/en-us';
visibility: hidden;
}
var do_bbml
= 1;
var do_bbml = 1;#commDev_text {
position:absolute;
</script>
width:200px;
</script>
height:115px;
z-index:31;
left: 489px;
top: 19px;
visibility: hidden;
}
#kuer_text {
position:absolute;
width:200px;
Estudos de Casos
Trabalho Programado 3
Faculdade de Arquitetura e Urbanismo da
Universidade de São Paulo
Programa de Mestrado
área de concentração: design e arquitetura
Ariane de Souza Stolfi
Orientador
Carlos Zíbel Costa
Download
