Je kent het waarschijnlijk wel. Je bent bezig met het slicen van een website je merkt dat een bovenliggende container niet mee groeit met de lengte van je een floating div. Omdat de hoogte vaak dynamisch is, wil je dit ook niet in je CSS zetten. Hieronder volgen twee manieren om dit voor elkaar te krijgen.

Voorbeeld oude methode

In de methode die ik een aantal jaren geleden op internet vond, voegde je een extra div toe met class=”clear”. De code in deze gevallen zag er dan als volgt uit.

<style>
	#container {
			width: 400px;
			overflow: hidden;
	}
	#left {
			width: 100px;
			float: left;
	}
	#main {
			width: 300px;
			float: left;
	}
	.clear {
		clear: both;
	}
</style>
<div id="container">
	<div id="left">Left container</div>
	<div id="main">Main container</div>
	<div class="clear"></div>
</div>

De nieuwe methode

In de nieuwe methode heb je geen extra div meer nodig om hetzelfde effect te krijgen. De truc zit hem in het gebruik van overflow:hidden in je container. Daarbij is het nodig dat je voor IE in ieder geval een breedte of hoogte opgeeft. De code ziet er in dat geval als volgt uit.

<style>
	#container {
		background: #ccc;
		width: 400px;
		overflow: hidden;
	}
	#left {
		width: 100px;
		float: left;
	}
	#main {
		width: 300px;
		float: left;
	}
</style>
<div id="container">
	<div id="left">Left container</div>
	<div id="main">Main container</div>
</div>

Image replacement is volgens de webrichtlijnen mogelijk. De uiteindelijke informatie moet echter voor iedereen toegankelijk zijn, ook als er geen CSS- of afbeeldingenondersteuning is. In deze post ga ik dieper in op twee mogelijke oplossingen voor het vervangen van tekst door afbeeldingen waarbij de tweede oplossing toegankelijker is dan de eerste.

Methode 1: Tekst buiten beeld, container een achtergrond

<style>
	#navigation li {
		display: block;
		width: 200px;
		height: 50px;
	}
	#navigation li.nav-special {
		background: url(nav-special.gif) no-repeat top left;
	}
	#navigation li span {
		position: absolute;
		left: -3000em;
	}
</style>

<ul id="navigation">
	<li id="nav-special"><a href="#"><span>Item 1</span></a></li>
</ul>

Bovenstaande methode is de meest eenvoudige manier om image replacement voor elkaar te krijgen. Er zit echter een nadeel aan bovenstaande methode. Wanneer je de CSS uitschakelt (of bij gebruik van een screenreader) wordt netjes de tekst getoond in plaats van de afbeelding. Echter als de afbeelding niet geladen kan worden en CSS wel aanstaat, krijg de gebruiker helemaal niets te zien. Volgens de webrichtlijnen moet content voor iedereen beschikbaar zijn en op deze manier bereik je dat bij het ontbreken van de afbeeldingen niet.

Methode 2: Afbeelding plaatsen over tekst

Onderstaande methode is moeilijker te implementeren maar lost bovenstaande probleem wel op. De afbeelding wordt over de tekst geplaatst. Wanneer de afbeelding niet getoond kan worden, wordt de tekst toch nog juist getoond. Deze methode kan problemen opleveren wanneer er veel gebruik gemaakt wordt van transparante achtergronden omdat de tekst er dan alsnog achter zichtbaar is.

<style>
	#navigation li, #navigation li span {
		position: relative;
		display: block;
		width: 200px;
		height: 50px;
	}
	#navigation li span {
		position: absolute;
		left: 0; top: 0;
		background: url(nav-speciald.gif) no-repeat top left;
	}
</style>
<ul id="navigation">
	<li id="nav-special"><a href="#">Item 1<span></span></a></li>
</ul>

Format Factory

Handig van deze versie is dat je naar de meeste zoniet alle formaten kunt converteren. Nu doen de meeste programma’s dit wel, maar wat ik een pluspunt vind aan dit progamma is dat je ook op merk mobiel kunt zoeken om zo de meest geoptimaliseerde instellingen te krijgen voor je mobiel.

Uit ervaring heb ik gemerkt dat veel mensen niet goed weten naar welk formaat ze nou precies moeten converteren om het goed te kunnen afspelen op hun mobiele device. Daarnaast staat er bij de specificaties van een device vaak niet meer dan dat het bijvoorbeeld MP4 ondersteunt. Daar kunt je namelijk nog alle kanten mee uit.

De interface van ‘Sothink Video converter’ vind ik echter wel iets prettiger dan Format Factory voor het omzetten van video naar mijn iPod omdat je hier duidelijk kunt kiezen voor iPod video terwijl je bij Format Factory eerst moet zoeken in een lijst van veel verschillende merken. Daarnaast heeft Sothink ook de mogelijkheid om direct video naar je Ipod te zetten. Maar het feit dat er een goed Portable alternatief op de markt is, zal mij waarschijnlijk snel overhalen.

Format Factory Portable is te vinden op de website van Liberkey onder Applications -> Video -> Converters

Meer informatie

• Download Portable Applicaties van LiberKey
• Informatie over de normale versie van Format Factory
• Informatie over Sothink Video Converter

Wat is Lightscreen portable?

Dit programma draait op de achtergrond van Windows en neemt een aantal functies in Windows over. Daarnaast geeft dit programma nog wat extra instellingen voor het maken van print screens.

Wat ik erg handig vind van deze tool is dat Lightscreen zowel het resultaat opslaat op het klembord zodat je door middel van CTRL-C het resultaat ergens kunt plakken ook direct als afbeelding op slaat op je computer. Hierbij kun je nog aangeven in wat voor formaat hij het wegschrijft. Dit is uiteraard erg makkelijk als je meerdere afbeeldingen pas op een later tijdstip wil verwerken.

Verder geeft Lightscreen de volgende toetsencombinaties (deze zijn in te stellen):

• Print screen
  Maak een print screen van je complete view (standaard in Windows)
• Alt + print screen
  Maak een print screen van het actieve venster (standaard in Windows)
• Ctrl + print screen
  Maak zelf een selectie binnen je scherm

Interessante links

• Website van Lightscreen
• Download lightscreen portable

Het voordeel van deze plugin ten opzichte van bijvoorbeeld de Firefox plugin Web developer, waarmee je ook een extern CSS kunt laden, is dat je niet iedere keer bij het laden van een pagina hoeft te bevestigen of het stylesheet geladen moet worden. Daarnaast kun je ook makkelijk standaard CSS bestanden aan- en uitvinken.

Daarnaast hieronder nog wat tips waarvoor ik het erg handig vind.

User interface wijzigingen

Er is een aantal webapplicaties waarin de inputvelden (met name de textarea’s) niet prettig gestyled zijn. Je kent het wel: te kort, te grote letters, irritante kleuren etc. Hiervoor heb ik een apart CSS geladen met daarin de geoptimaliseerde styles voor deze velden. Bijvoorbeeld:

textarea {
height: 300em;
font:  10px arial;
}

Google Advertensies / gesponsorde links uitzetten

Over het algemeen klik ik niet op links aan de rechterkant op Google onder “Gesponsorde links”. Sterker nog, ik vind het ruis op de pagina waar al genoeg links op staan. Helemaal irritant vind ik de “Gesponsorde links” die nu ook boven de  gewone (organische) zoekresultaten staan. Helemaal omdat er heel variërend een x aantal items door Google wordt neergezet.

Hierdoor klik ik vaak op een gesponsorde link zonder dat ik dat wilde. Je zou verwachten dat deze gesponsorde links toch wat beter aan zouden sluiten bij mijn zoektermen maar dat is bij mij vaak niet het geval. Dat kan uiteraard ook liggen aan mijn zoekgedrag, maar dat terzijde.

Ik gebruik Stylish voor het uitzetten van al deze blokken. De volgende code zou je kunnen gebruiken om de gesponsorde links van Google uit te zetten:

#mbEnd, #taw {
display: none;
}

Interessante links

• Download de Stylish plugin voor Firefox
• Website met gebruikers stylesheet voor Stylish

De eerste vraag die bij mij altijd opkomt bij tips over software is: “Is het programma (of een alternatief) ook portable te verkrijgen”. Gelukkig was iemand in het publiek mij voor en stelde deze vraag waarop het antwoord eigenlijk luidde dat deze versie geïnstalleerd wordt op de computer en dus niet portable is. Na wat verder onderzoek blijkt dit laatste niet waar te zijn. Fingertips is zeker wel portable te gebruiken omdat het programma niets opslaat in het register van je computer.

Hieronder volgende stappen die je moet ondernemen om Fingertips portable te krijgen:

1. Installeer Fingertips eerst op de normale manier op je computer.
2. Ga naar de locatie waar Fingertips is geïnstalleerd (bv c:/program files/fingertips)
3. Kopieer deze complete map naar je USB stick.
4. Ga nu weer naar de nieuwe map en open ‘Fingertips.ini’ met Notepad
5. Verwijder nu de ; bij de eerste regel zodat de volgende regels actief wordt
   FingertipsDataFoldername={FingertipsExeFolderName}\data\

Met bovenstaande wijziging worden tevens alle wijzigingen plus eigen commando´s opgeslagen in de Portable map op de USB-stick. Je kunt Fingertips nu dus overal gebruiken vanaf je USB-stick zonder dat je Administrator rechten hebt.

Meer informatie
http://www.getfingertips.com/
http://fingertips.ning.com/forum/topics/fingertips-as-a-portable-app

Eén richtlijn die mij opvalt is R-pd8.15 die aangeeft dat je niet automatische links in nieuwe vensters mag tonen. Hoewel ik de webrichtlijn wel snap, zijn er tal van argumenten te noemen waarom dit nou wel maar ook juist niet een goede richtlijn is. Uiteraard heb ik hier ook zo mijn mening over, maar die bewaar ik voor een volgende post waarin ik ook dieper in wil gaan op een Jquery plugin die ik aan het ontwikkelen ben.

Wel wil ik even stilstaan bij het argument dat gebruikers zelf de regie moeten houden over het openen van links in nieuwe vensters. Er zijn namelijk zeer weinig mensen die ik ken, van wie ik weet dat zij actief links in nieuwe vensters openen en dus zelf regie nemen over het gedrag van links.

Vandaar dat ik de opties om links te openen in nieuwe vensters/tabbladen hieronder nog maar eens opsom. Onderstaande functies werken in ieder geval voor Internet Explorer en Firefox.

• Rechtermuisknop > Openen in nieuw window / tab = Lijkt me duidelijk, alleen 1 klik te veel
• CTRL klik op link = Opent link in nieuw tabblad
• Shift klik op link = Opent link in nieuw venster

In Google open ik vaak de eerste 5 resultaten direct in nieuwe tabs. Vervolgens bekijk ik tab voor tab het resultaat en bewaar alles tabs die ik interessant vind. Uiteraard wel met het gevolg dat mijn browser er met tabbladen niet altijd overzichtelijker van wordt.

Uit ervaring weet ik gelukkig onderhand meestal wel meteen wat het probleem is, zonder het te kunnen reproduceren, ik gebruik uiteraard zelf geen IE6 meer. Mijn reactie is dan ook meestal in de trant van “Als het goed is heb ik het opgelost, zou je zelf even willen testen?”. Toch is het makkelijk als ik zelf ook zou kunnen testen zonder dat ik daar een nieuwe PC voor moet aanschaffen. Gelukkig kwam ik het volgende programma tegen.

IETester

http://www.ietester.com/
Dit programma maakt het mogelijk om alle versies van Internet Explorer (IE5.5, IE6, IE7 en IE8) in 1 browser te tonen. Een jaar geleden had ik al wel een pakket gevonden met alle losse versie van IE maar dat was het niet helemaal. Voor iedere ontwikkelaar kan ik deze applicatie zeer aanraden. Nu nog kijken of hij ook als Portable Applicatie te vinden is.

Wanneer is dit dan handig?
Bijvoorbeeld als je veel verschillende afbeeldingen moet maken met dezelfde uitsnede (bijvoorbeeld ronde hoekjes). Voor de HAN hebben bijvoorbeeld alle opleidingen een zogenaamde ‘Homefoto’ die op elke startpagina terugkomt (http://www.han.nl/opleidingen/bachelor/accountancy/vt/ ). Hieronder laat ik zien hoe ik zeer eenvoudig en snel deze afbeeldingen kan maken.

Stap 1:
Zorg dat je eerst een nieuw canvas maakt zo groot als de afbeelding moet worden. Ik maak een nieuwe afbeelding met de afmetingen 197px bij 263px.
Maak nu een rechthoek met ronde hoekjes met de ‘Rounded Rectangle Tool. Ik maak gebruik van een radius van 10pixels voor de ronde hoekjes.

Stap 2:
Kopieer nu de gewenste afbeelding die je in de selectie wilt plakken.
Als voorbeeld pak ik de eerste afbeelding die ik op Google kan vinden als ik zoek op ‘portrait’ en klik op ‘Kopieer afbeelding’.

Stap 3:
Ga nu terug naar het venster waar we zojuist bij stap 1 de rechthoek hebben gemaakt en selecteer de vorm.
Je kunt ook CTRL-linkermuisknop klikken op de laag waarin je de vorm voor de selectie hebt gemaakt.

Stap4:
Om het gekopieerde beeld te plakken in de selectie ga je naar Edit -> Paste Into (Ctrl-Shift-V).
Het beeld wordt in een nieuwe layer aangemaakt met een zogenaamd layer mask.
Je kunt de ‘Free Transform’ tool gebruiken om de afbeelding in de selectie nog te verkleinen, vergroten of te verplaatsen.

Eindresultaat

Je kan bij het maken van een selectie ook een feather om afbeeldingen te laten faden.

Ik gebruik nu al een tijdje het programma Evernote om mijn notities bij te houden en ik vind het een topprogramma. Mijn Samsung netbook is dan ook een vervanging geworden van mijn papieren notitieblok. Een probleem waar ik echter tegenaan liep, is dat ik zowel thuis, op mijn werk, op mijn mobiel en op mijn netbook alle notities wil kunnen bereiken.

Uiteraard biedt Evernote voor ieder platform wel een manier om je notities te kunnen benaderen, maar aangezien ik op mijn werk een PC heb zonder adminrechten en veel liever het programma gebruik in plaats van de webversie, zocht ik naar een betere oplossing.

Nu ben ik een groot fan van Portable Applicaties, een manier om applicaties op de USB (maar kan ook gewoon op je PC) te draaien zonder deze te installeren. Er is een manier om Evernote op je USB te zetten en dus portable te maken.

1. Allereerst moet je Evernote gewoon installeren op een Windows computer
2. Open Evernote en ga naar Tools > Install Evernote Portable
3. Selecteer de map waar je evernote wilt installeren (bij mij bijvoorbeeld F:\PortableApps\Evernote)
4. Je kan het volgende bestand dan openen op de USB stick (F:\PortableApps\Evernote\Program Files\Evernote.exe)
5. Je kunt hier uiteraard ook eenvoudig een snelkoppeling naartoe maken.

Links

• Evernote website
• Officiele uitleg op Evernote