<?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>Frontaal.net &#187; framework | Frontaal.net</title>
	<atom:link href="http://frontaal.net/tag/framework/feed/" rel="self" type="application/rss+xml" />
	<link>http://frontaal.net</link>
	<description>Front-end basics over markup, CSS en toegankelijkheid</description>
	<lastBuildDate>Thu, 24 May 2012 00:17:26 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>Frontaal.net vernieuwd: versie 2.0</title>
		<link>http://frontaal.net/200812/frontaalnet-vernieuwd-versie-20/</link>
		<comments>http://frontaal.net/200812/frontaalnet-vernieuwd-versie-20/#comments</comments>
		<pubDate>Tue, 09 Dec 2008 06:58:26 +0000</pubDate>
		<dc:creator>Roger</dc:creator>
				<category><![CDATA[Frontaal]]></category>
		<category><![CDATA[framework]]></category>
		<category><![CDATA[layout]]></category>

		<guid isPermaLink="false">http://frontaal.net/?p=48</guid>
		<description><![CDATA[Frontaal.net heeft sindskort een vernieuwde layout. De oude layout uit 2006 was eigenlijk meer een experiment. Ik vond de layout niet leesbaar genoeg en en er moest meer aansluiting bij de rest van het internet komen. Tijd voor verandering: Frontaal.net versie 2.0.]]></description>
			<content:encoded><![CDATA[<p>Onlangs heb ik dit blog voorzien van een verbeterde <a href="http://nl.wikipedia.org/wiki/Layout" rel="external">layout</a>. De oude layout was eigenlijk een experiment met een donkere achtergrond, juist omdat websites met een donkere achtergrond weinig voorkomen. Het experiment vond ik slechts deels geslaagd; ik vond de layout niet leesbaar genoeg en en er moest meer aansluiting bij de rest van het internet komen. Dus om in de tijdgeest te blijven en met de woorden van Obama te spreken, het was tijd voor &#8216;<a href="http://change.gov/" rel="external">change</a>&#8216;: Frontaal.net versie 2.0.</p>
<ul>
<li><a href="#oud-nieuw">Oud versus nieuw in beeld</a></li>
<li><a href="#leesbaarheid">Leesbaarheid</a></li>
<li><a href="#connecting">Connecting people</a></li>
<li><a href="#technisch">Technische aspecten</a></li>
<li><a href="#feedback">Feedback?</a></li>
</ul>
<h2 id="oud-nieuw">Oud versus nieuw in beeld</h2>
<ul>
<li><div id="attachment_58" class="wp-caption alignnone" style="width: 310px"><a href="http://frontaal.net/wp-content/frontaal-2006.jpg" rel="shadowbox"><img src="http://frontaal.net/wp-content/frontaal-2006-300x205.jpg" alt="Frontaal.net layout 2006" title="frontaal-2006" class="size-medium wp-image-58" /></a><p class="wp-caption-text">Frontaal.net layout 2006</p></div>
<li><div id="attachment_59" class="wp-caption alignnone" style="width: 310px"><a href="http://frontaal.net/wp-content/frontaal-2009.jpg" rel="shadowbox"><img src="http://frontaal.net/wp-content/frontaal-2009-300x237.jpg" alt="Frontaal.net layout 2009" title="frontaal-2009" class="size-medium wp-image-59" /></a><p class="wp-caption-text">Frontaal.net layout 2009</p></div></li>
</ul>
<h2 id="leesbaarheid">Leesbaarheid</h2>
<ul>
<li>De grootste verandering is <span id="more-48"></span> dat de <strong>kleurstelling is veranderd</strong> van een donkere achtergrond naar een lichte achtergrond. Dat maakte voor de leesbaarheid van de artikelteksten weinig uit, maar het was erg moeilijk om <em>alle</em> onderdelen van de website zo leesbaar te houden, zoals de codevoorbeelden (het zou betekenen dat ik het kleurgebruik in de <dfn title="verhelderen van code-voorbeelden d.m.v. kleurgebruik">code-highlighting</dfn> compleet moet veranderen).</li>
<li>Verder is er qua layout weinig veranderd wanneer je een relatief klein scherm hebt, de <strong>opbouw is hetzelfde gebleven</strong>. In dat geval krijg je de oude <strong>tweekolomslayout</strong>, in een nieuw jasje.</li>
<li>Wanneer je een schermresolutie van 900 pixels breed of meer hebt, zul je zien dat er veel <stong>meer ruimte</strong> is gekomen voor de artikelteksten. Dat maakt de artikelen overzichtelijker. Daarnaast is nu een <strong>driekolomslayout</strong>, zodat je naast de links in de artikelen ook in de zijbalk nuttige links kunt vinden.</li>
</ul>
<h2 id="connecting">Connecting people</h2>
<p>Hoewel in de artikelen op deze site talloze links naar andere sites staan, kan het natuurlijk nog beter. Wat volgens mij ontbrak, was een stukje actualiteit en meer verband met gerelateerde blogs. In de zijbalken is daarom ruimte ingeruimd voor links naar de meest <strong>actuele artikelen voor front-end webdevelopers</strong>, te vinden op de betere blogs.</p>
<ul>
<li>Het stuk &#8216;Meer webdevelopment&#8217; haalt de nieuwste artikeltitels via <a href="http://nl.wikipedia.org/wiki/Webfeed" rel="external">webfeed</a> binnen.</li>
<li>Wanneer in de <a href="http://en.wikipedia.org/wiki/Blogosphere" rel="external">blogosfeer</a> of nieuwsland iets voorbij komt wat een belangrijke ontwikkeling lijkt, schrijf ik er kort over in de nieuwe rubriek &#8216;Marginaal&#8217;.</li>
<li>Tot slot vind je sindskort ook de nieuwste <strong>vacatures voor front-end webdevelopers</strong> in de zijbalk.</li>
</ul>
<p>Aangezien dit blog zich richt op mensen die nog niet zo lang bezig zijn met onderwerpen als tabelloze layouts, CSS, toegankelijkheid, hoop ik op deze manier dat bezoekers spelenderwijs andere goede blogs ontdekken. En de gevorderde sitebouwer komt zo wellicht op ideeën voor een carrièrestap.</p>
<h2 id="technisch">Technische aspecten</h2>
<p>Ik heb ervoor gekozen het grootste deel van de HTML en een stuk van mijn CSS niet zelf te schrijven, maar gebruik te maken van enkele frameworks, &#8220;<cite>een aantal standaardinstellingen (&#8230;) die voor iedere website opnieuw handig kunnen zijn</cite>&#8221; (uit: Naar Voren &#8211; <a href="http://naarvoren.nl/artikel/css_frameworks/" re="external">CSS Frameworks</a>).</p>
<ul>
<li>
<h3>HTML en CSS: Sandbox</h3>
<p><a href="http://code.google.com/p/sandbox-theme/" rel="external">Sandbox</a> is een thema voor WordPress dat niet meer is dan kale, goed opgebouwde (semantische) XHTML en wat CSS waarmee je een één-, twee- of driekolomslayout kunt produceren. Hoewel het wat overbodige elementen en classes bevat, vond ik het van doorslaggevender betekenis dat het thema is voorbereid op diverse ingebouwde mogelijkheden van WordPress. En van de XHTML maak ik server-side gewoon <a href="http://frontaal.net/200612/doctype-welke-moet-ik-kiezen/">HTML</a>.</p>
</li>
<li>
<h3>Meer CSS: Blueprint</h3>
<p>De zelfgeschreven CSS bevat een gedeelte dat afkomstig is van het Blueprint CSS-framework. <a href="http://www.blueprintcss.org/" rel="external">Blueprint</a> bestaat uit HTML- en CSS-templates bedoeld om snel een website op te zetten volgens het <a href="http://en.wikipedia.org/wiki/Grid_(page_layout)" rel="external">grid-principe</a>: mooie layouts zijn altijd gebaseerd op een evenwichtige vlakverdeling in rijen en kolommen. Voor deze layout heb ik eigenlijk slechts de CSS-reset en de typografie gebruikt. Het grid-principe heb ik zonder het framework toegepast, om layoutgebaseerde classes in mijn template te voorkomen.</p>
</li>
</ul>
<h2 id="feedback">Feedback?</h2>
<p>Bij de wijzigingen ben ik louter uitgegaan van wat ik zelf gebrekkig vond. Als je als bezoeker iets geweldig onhandig vindt, of vindt dat er misschien iets ontbreekt dat geweldig handig zou zijn, hoor ik graag van je via een <a href="#respond">reactie</a> of een <a href="http://frontaal.net/contact/">mailtje</a>. Alvast bedankt!</p>
]]></content:encoded>
			<wfw:commentRss>http://frontaal.net/200812/frontaalnet-vernieuwd-versie-20/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

