<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>barebenteblog &#187; webdesign</title>
	<atom:link href="http://barebente.com/blog/category/digital/webdesign/feed/" rel="self" type="application/rss+xml" />
	<link>http://barebente.com/blog</link>
	<description></description>
	<lastBuildDate>Mon, 23 Aug 2010 14:27:21 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>bachelor thesis: a walk in the rift valley, four million years ago</title>
		<link>http://barebente.com/blog/2010/06/bachelor-thesis-a-walk-in-the-rift-valley-four-million-years-ago/</link>
		<comments>http://barebente.com/blog/2010/06/bachelor-thesis-a-walk-in-the-rift-valley-four-million-years-ago/#comments</comments>
		<pubDate>Tue, 15 Jun 2010 19:44:44 +0000</pubDate>
		<dc:creator>benteh</dc:creator>
				<category><![CDATA[USA]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[digital]]></category>
		<category><![CDATA[history]]></category>
		<category><![CDATA[media]]></category>
		<category><![CDATA[studies & education]]></category>
		<category><![CDATA[technology]]></category>
		<category><![CDATA[travel]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://barebente.com/blog/?p=1904</guid>
		<description><![CDATA[So what was that bachelor thesis all about? I have had that question a few times, and now that I have room to breathe again, I will elaborate. At the Smithsonian Museum of Natural History, Washington D.C., they have a programme that&#8217;s been going on for a number of years; The Human Origins Program. This [...]]]></description>
			<content:encoded><![CDATA[<p>So what was that bachelor thesis all about? I have had that question a few times, and now that I have room to breathe again, I will elaborate.</p>
<p>At the Smithsonian Museum of Natural History, Washington D.C., they have a programme that&#8217;s been going on for a number of years; The Human Origins Program. This is to bring evolution and research out there, mainly via the exhibition <a href="http://humanorigins.si.edu/" target="_blank">Hall of Human Origins</a>. In the US, this is considered politics. I venture to say that in Europe this is considered history. So as the americans need to do sensible research, they also to a certain extent need to step carefully. Interesting, bizarre and a wee bit disturbing to me; this tip-toeing.</p>
<p>Scientists argue. Scientists have specialities, and some are extremely specialised in very detailed, at times small and obscure fields. Sometimes they want to share, sometimes not. Sometimes they dislike other scientists definitions, sometimes the overlap of fields can be enriching or frustrating. They work on projects, and they create the tools they need. It seems that they, for all sorts of reasons, creates their own databases; gather their data and information in forms that suits them best there and then. Not necessarily very sustainable, but if you don&#8217;t want to share your findings, well, I suppose you could have it inscribed on scrolls under your bed.<span id="more-1904"></span></p>
<p>Anyway. Working on The Human Origins Program team is Dr. <a href="http://humanorigins.si.edu/research/hop-team/matt-tocheri/" target="_blank">Matthew Tocheri</a>, a paleoanthropologist specialising in the evolution of the hand and foot. Part of his job is to gather data in a cross-field database. This covers several specialist fields, including paleoanthropology, archeology, vertebrae zoology, geochronology, paleoecology, paleoenvironment and of course geology. He collects data wherever he can find it, from old publications, from fellow researchers. Apparently, it has not been attempted to collect data from these related fields together in this manner before. Matthew collects, and created a database that will accept different definitions, different names and different approaches. This is an exercise in flexibility, and therefore; sustainability.<br />
Understanding that no data is also information.</p>
<p><em>Everything should be made as simple as possible, but not one bit simpler. – Einstein –</em></p>
<p>So. In the middle of this, we landed. Two computer engineering students, and one student of digital media. What could we do, and how on earth could we handle those specialist fields?!</p>
<p>The idea was to make a website, that would make it possible to handle these data, show relations and scope quicky and intuitively.</p>
<p>We drew, scribbled, and tried to get our heads around Matthews database. This is complex data with, at times, complex relations. What a field day, for a digital media student! Deep time, deep space&#8230;</p>
<p><a href="http://barebente.com/blog/wp-content/uploads/2010/06/Picture-4.png"><img class="alignnone size-large wp-image-1914" title="human origin program database" src="http://barebente.com/blog/wp-content/uploads/2010/06/Picture-4-1024x696.png" alt="" width="645" height="438" /></a></p>
<p><a href="http://si.hiof.no/development/combine/" target="_blank">This is the prototype</a>, as it stands at the end of the project. Google maps, five timelines, and a field for data. It seems simple; it seems obvious, but the road was hard. I like to believe that to make something complex seem effortless is an art; and is the litmus test of a system like this. If you can think &#8220;of course, that is how it must be done, it is obvious&#8221; – it is the colombus&#8217; egg. It is art, it is magic.<br />
In reality; lots of work.</p>
<p><em>It is not easy. But it is simple. – House –</em></p>
<p>We had amazing days in Washington D.C., working with Matthew and the others in the Human Origins Program. (plenty of pictures <a href="http://barebente.com/zenphoto/page/search/tags/USA" target="_blank">here</a>) It was relief, and an extreme privilege to work with solid data and talented, smart and dedicated people. The wonderful, beautiful feeling of working with real, sensible content, and not trying to sell sand in Sahara; creating designs and frameworks without content. It was mad, fab and hard work. We spend about six weeks all in all in D.C., and with the exception of one day and a hospitalisation, we worked at the museum every day. Not much sightseeing, not much fresh air. Back in Norway, we did pretty much the same&#8230;</p>
<p>There is a million small things to consider, building something like this. Personally, I am primarily interested in the overall structure, the architecture, the interface and the graphic design. To display scope is very important: if you&#8217;re looking for information, and you know nothing of the source, it must pretty easily show you that it might contain what you&#8217;re looking for or not. This is – as of yet – a site for students and scientists of the fields, and I think I can assume that they have a little more than a two-second attention-span. Still. Scope is absolutely essential.</p>
<p>This is in many ways inf<a href="http://barebente.com/blog/wp-content/uploads/2010/06/timelines.png"><img class="size-full wp-image-1925 alignleft" title="timelines" src="http://barebente.com/blog/wp-content/uploads/2010/06/timelines.png" alt="" width="222" height="214" /></a>ographics. I do obsess, though, over tiny, tiny details. The amazing privilege of being allowed to do both: play with ideas, overall structures, grand plans and gestures, and at the same time dig into tiny pixels.</p>
<p>An example of the detail-obsession, would be the angled text above the timeline icons. I really, really wanted them angled, and the amount of hassle and fiddling to make them, place them, and allow them to be clickable and roll-overs was unreal. Of course, as we kept inventing uses for them, I had to adjust, but it is just one example of obsessive fiddling that would easily have drowned in another project&#8230;</p>
<p>..and that brings me to the boys. Lars and Audun handled the programming and database part, while I obsessed with html, css, graphics, interface and structures. Bless them. Not only was it an enormous privilege to work with the anthropologists, but my team was the best. Of course they were, I hand-picked them myself ;-)</p>
<p><img class="alignnone" title="Lars and Audun" src="http://barebente.com/zenphoto/albums/photography/travel/usa-ii/img_1880aw.jpg" alt="" width="600" height="522" /></p>
<p><em>Confidence in nonsense is a requirement for the creative process. – M. C. Escher – </em></p>
<p>That I could fiddle, learn, dig and struggle with things I like, and at the same time important progress was made in other parts, was wonderful. I suspect the boys feel the same. We became a tightly knit team, and we had to talk through definitions and find a common language. We shared the dedication for the project, and nearly worked ourselves into collapse. It was hard, we all had to learn new things ourselves, we all banged fists on the table in frustration at times, but I&#8217;d do it all over again. There was plenty of compromises. And plenty of laughs. Ah, the giggles&#8230; I will miss that.</p>
<p>But out of the other end, came a prototype we are proud of, that others like and admire, that several people might be interested in, and I believe Matthew is happy with. We got top grades on the project, that I for one feel was the only option. It was not by far the most important thing, but feels good anyway, and the good people at the museum expected nothing less.</p>
<p>At the time of writing, the prototype is hosted on our servers, and only contains some of the data from the database. We hope, though, that it will go live from Smithsonian before x-mas. I am hoping they will continue to develop it; I hope we have been part of pointing out a direction.</p>
<p>Now, as I have finished my bachelor, new adventures beckons. If all goes well, there might be another project for the museum. I keep my fingers crossed, and take a few weeks well deserved holiday. It is summer, and I still have that indoor skin colour that I always thought was the trademark of geeks only&#8230;</p>
]]></content:encoded>
			<wfw:commentRss>http://barebente.com/blog/2010/06/bachelor-thesis-a-walk-in-the-rift-valley-four-million-years-ago/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Pick or guess your favourite font – sansserifs</title>
		<link>http://barebente.com/blog/2009/06/pick-or-guess-your-favourite-font-%e2%80%93-sansserifs/</link>
		<comments>http://barebente.com/blog/2009/06/pick-or-guess-your-favourite-font-%e2%80%93-sansserifs/#comments</comments>
		<pubDate>Wed, 03 Jun 2009 14:01:16 +0000</pubDate>
		<dc:creator>benteh</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[media]]></category>
		<category><![CDATA[typography]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://boblets.wordpress.com/?p=574</guid>
		<description><![CDATA[Been awfully bad at writing, these last few months, so I start carefully with a font-post. A sans-serif is not just a sans-serif! All the trad ones are there, with some odd ones thrown in for entertaninment. I don&#8217;t get a lot of response on the fontthing, but hey &#8211; I like it. Which one [...]]]></description>
			<content:encoded><![CDATA[<p>Been awfully bad at writing, these last few months, so I start carefully with a font-post. A sans-serif is not just a sans-serif! All the trad ones are there, with some odd ones thrown in for entertaninment. I don&#8217;t get a lot of response on the fontthing, but hey &#8211; I like it. Which one is the pretty one?</p>
<p>Go oooon – guess!</p>
<p><span id="more-574"></span></p>
<p><img class="alignnone size-full wp-image-575" title="fonts" src="http://boblets.files.wordpress.com/2009/06/fonts.jpg" alt="fonts" width="387" height="792" /></p>
]]></content:encoded>
			<wfw:commentRss>http://barebente.com/blog/2009/06/pick-or-guess-your-favourite-font-%e2%80%93-sansserifs/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Pick or guess your favourite font – serifs</title>
		<link>http://barebente.com/blog/2008/08/favourite-font-serifs/</link>
		<comments>http://barebente.com/blog/2008/08/favourite-font-serifs/#comments</comments>
		<pubDate>Fri, 08 Aug 2008 20:34:28 +0000</pubDate>
		<dc:creator>benteh</dc:creator>
				<category><![CDATA[books]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[digital]]></category>
		<category><![CDATA[print]]></category>
		<category><![CDATA[typography]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://boblets.wordpress.com/?p=276</guid>
		<description><![CDATA[Not sure I&#8217;d do so well at guessing these fonts myself. I imagine I&#8217;d get about half of them right. And which one do I like the best? It certainly is not number eight&#8230;. Go oooon &#8211; guess!]]></description>
			<content:encoded><![CDATA[<p>Not sure I&#8217;d do so well at guessing these fonts myself. I imagine I&#8217;d get about half of them right. And which one do I like the best?<br />
It certainly is not number eight&#8230;.<br />
Go oooon &#8211; guess!<br />
<span id="more-276"></span></p>
<p><a href="http://boblets.files.wordpress.com/2008/08/font.jpg"><img class="alignnone size-medium wp-image-277" src="http://boblets.files.wordpress.com/2008/08/font.jpg?w=150" alt="" width="500" height="1000" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://barebente.com/blog/2008/08/favourite-font-serifs/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Helvetica, gods of fonts. I don&#039;t like the a.</title>
		<link>http://barebente.com/blog/2008/07/helvetica/</link>
		<comments>http://barebente.com/blog/2008/07/helvetica/#comments</comments>
		<pubDate>Mon, 14 Jul 2008 19:09:21 +0000</pubDate>
		<dc:creator>benteh</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[digital]]></category>
		<category><![CDATA[print]]></category>
		<category><![CDATA[studies & education]]></category>
		<category><![CDATA[trivia]]></category>
		<category><![CDATA[typography]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://boblets.wordpress.com/?p=87</guid>
		<description><![CDATA[I finally saw the much-trumpeted film. It was amusing; mainly for the characters in it – and I mean the designers, not the fontface. That helvetica is everywhere is no surprise. It is clean, bland, large, simple and good for signage. Generally. But the designers was the funniest bits. Some of them are clearly off [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignnone size-medium wp-image-86" src="http://boblets.files.wordpress.com/2008/07/helvetica.jpg?w=400" alt="" width="400" height="400" /></p>
<p>I finally saw the much-trumpeted film. It was amusing; mainly for the characters in it – and I mean the designers, not the fontface. That helvetica is everywhere is no surprise. It is clean, bland, large, simple and good for signage. Generally.<br />
But the designers was the funniest bits. Some of them are clearly off their rockers, and I love it. Especially <a href="http://www.spiekermann.com">Erik Spiekermann</a> is a raving loony, a man with wit, opinions and a careless regards of others. &#8220;I am always on time, but always a year late&#8221;, he says. He despises Helvetica for having no contrast; no rhythm. He shrugs, and says bad design is everywhere.</p>
<p><span id="more-87"></span></p>
<p>The film is seen as a homage to Helvetica, but if you watch the extras, the table turns. Seen from there, not much positive is said about it. And Rick Poynor goes a little overboard with his talk about the psychology of enslavement. Sometimes he is away with the faries, sometimes he is dead on. Paula Sher sees Helvetica as the fontface of war, power and corruption.</p>
<p>Matthew Carter, the man behind verdana, tahoma and caslon, seems to be the one of a few genuinely in awe of the fontface, and Vignellis rants over the &#8220;flowerchildren&#8221; is both hilarious and serious. Such a sweet, sweet man.</p>
<p>Most of the interviews take place in offices, meetingrooms and those bare, pale designers hideouts. One bizarre  exception is Michael C. Place &#8211; interviewed in a spare room in his house, it seems, with two or more hairless Sphynx cats crawling over a spare bed, chewing on microphone cords and climbing over cardboardboxes; green trees and the hint of a garden outside. In contrast to the bareness of designers meetingrooms. Not a coincidence, surely.</p>
<p>Hoefler and Frere-Jones are delightful – Hoefler cannot shut up to save his life, and his endless stream confirms Frere-Jones&#8217;s quiet assurances that type designers are bonkers, no exceptions.</p>
<p>Lars Müller, a norwegian gone swiss-german-dutch-english, with a bizarre gray lions mane, points at all sorts of signs. He looks increasingly self-conscious, but it gets funnier and funnier, as he stands beside all sorts of signs, popping up behind them, pointing out Helvetica.</p>
<p>Hermann Zapf – I have always admired Zapf for his calligraphy, but this is the first time I have seen him in moving pictures &#8211; he seems the incarnation of graphic craftsman and artist, an unassuming elderly gentleman with enough understatement to go around. If you didn&#8217;t know, you&#8217;d think him a doddering, doodling anybody. And, in the extras, it turns out, when he cannot say anything nice about helvetica, he refuses to say anything at all. When pushed, he mutters &#8220;I have never used Helvetica&#8221;. To him, it&#8217;s too 19th century. I like 20th century design, he says. Frutiger. There are lots and lots of other good faces around, he says, there is no need to always use helvetica.</p>
<p>Bless him.</p>
<p>David Carson – fruitcake par excellence – a brilliant, silly, funny guy, not in the least bit interested in squares and rules, and a doer of &#8211; and fan of &#8211; those mistakes others might find deadly.</p>
<p>So what do I think of Helvetica?<br />
I hate the a. I really do. It ruins it all for me. This is a simple, clean face, and then you add that bendy little thing on the a. It&#8217;s not a serif, maybe it is to soften the font a little, I don&#8217;t know. But the a is fiddly enough as it is. It doesn&#8217;t show in the bold, thank god. I know a guy who doesn&#8217;t like the k, and for that reason refuse to use it.</p>
<p>Designers are lunatics. They are weird and wonderful. I&#8217;m happy to be one.</p>
]]></content:encoded>
			<wfw:commentRss>http://barebente.com/blog/2008/07/helvetica/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
		<item>
		<title>css rollover tutorial&#8230;</title>
		<link>http://barebente.com/blog/2008/06/css-rollover-tutorial/</link>
		<comments>http://barebente.com/blog/2008/06/css-rollover-tutorial/#comments</comments>
		<pubDate>Wed, 04 Jun 2008 21:43:49 +0000</pubDate>
		<dc:creator>benteh</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[digital]]></category>
		<category><![CDATA[webdesign]]></category>

		<guid isPermaLink="false">http://boblets.wordpress.com/?p=25</guid>
		<description><![CDATA[By popular demand &#8211; haha &#8211; here is a CSS rollover tutorial. if you want to play with my turtle, feel free to rightclick it and download the image to your own computer &#8211; I only ask that you drop me a link to your site if you use it. click here to see the [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright" style="float:right;" src="http://www.it-stud.hiof.no/~benteh/gifs/turtletwo.gif" alt="" width="150" height="240" />	By popular demand &#8211; haha &#8211; here is a CSS rollover tutorial. <br />
	if you want to play with my turtle, feel free to rightclick it and download the image to your own computer &#8211; I only ask that you drop me a link to your site if you use it. </p>
<p><p><b>click <a href="http://www.it-stud.hiof.no/~benteh/1aar/rollover_tut.php" target="_blank">here</a> to see the turtle doing what it is supposed to.</b></p>
<p>	I start out with a single image file, with one green and one blue turtle <i>placed directly above</i> each other. Here is my simple .gif image on the right.</p>
<p><span id="more-25"></span></p>
<p>Then, the code that goes into your css-script:</p>
<p></p>
<p>
a.brollover {</p>
<p>    width: 320px;<br />
    height: 220px;<br />
    background: url(gifs/turtletwo.gif) 0 0 no-repeat;</p>
<p>       display: block;<br />
      }</p>
<p>
a:hover.brollover {<br />
    background-position: 0 -224px;<br />
      }
	</p>
<p>this is the code that goes into your html:</p>
<p>	&lt;a href=&#8221;index.php&#8221; class=&#8221;brollover&#8221; 	&gt;&lt;/a 	&gt;</p>
<p>If all you wanted was my turtle, then you&#8217;d be finished now &#8211; providing you had downloaded my image, and put the bits in the right places. But. I assume you want to do this to something else. you then need to understand a bit of what&#8217;s going on:</p>
<p><b>this is how it works &#8211; how to change it to your images:</b></p>
<p>	<b>a.brollover {</b> -you don&#8217;t have to call it brollover. but don&#8217;t lose the a. in front. <br />
<b>width: 320px;</b> -self-explanatory? width of the image<br />
<b>height: 220px;</b> -this is the height of the green turtle alone<br />
<b>background: url(gifs/turtletwo.gif) 0 0 no-repeat; </b>-here&#8217;s the thing: put the image in a folder, and put the address here. This is veeery important. <br />
<b>display: block;</b><br />
<b>}</b></p>
<p>
<b>a:hover.brollover {</b><br />
   <b> background-position: 0 -224px;</b> -this is what happens when pointed at. The the image is rolled up &#8211; in this case -224pixels. Play with this till you get it right. <br />
      <b>}</b>-don&#8217;t forget the curlies..</p>
<p>in the html</p>
<p>		&lt;a href=&#8221;http://www.google.no/&#8221; class=&#8221;brollover&#8221; 	&gt;&lt;/a 	&gt;</p>
<p>inside the &#8221; &#8221; is the url to the page linked to. Just using google as example. class=brollover  gets the bit from the css. Make sure the name in css and html &#8211; in this case &#8220;brollover&#8221; &#8211; is the same. </p>
<p>		Good luck-</p>
]]></content:encoded>
			<wfw:commentRss>http://barebente.com/blog/2008/06/css-rollover-tutorial/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
	</channel>
</rss>
