Freeware Windows programma’s voor dagelijks gebruik. Aanvullingen welkom, maar beperk je tot freeware (geen trials, shareware, adware etc.).

PSPad

Een zeer uitgebreide EN uitbreidbare text editor, voor de echte codeklopper. Zoeken en vervangen door meerdere (ook niet geopende) bestanden tegelijk: http://www.pspad.com/en/download.php

Pixie

Heb je een mooie kleur gezien op een website en wil je de RGB-code weten, zodat je hem kunt toepassen in je stylesheet? Gebruik dan Pixie, de ideale colorpicker die uit slechts 1 executable bestaat. Start Pixie en beweeg je muis naar de kleur van je keuze: http://nattyware.com/pixie.php

ColorPic

Vind je Pixie handig, maar zoek je toch een “colorgrabber” met wat meer in huis? ColorPic heeft net dat beetje meer: palettes, magnifiers etc.: http://www.iconico.com/download.aspx?app=ColorPic&type=free

XNViewer

Even snel een hele verzameling afbeeldingen resizen, al dan niet met behoud van de ratio? Download dan XNView, een zeer uitgebreide gallery viewer en converter: http://www.xnview.com/en/xnview.html

Filezilla

De ideale FTP client. Weliswaar heeft de meest recente versie de nare eigenschap dat deze telkens de verbinding verbreekt. De maker van Filezilla wijt dit aan instellingen op de desbetreffende FTP-server. Dat zou best kunnen, maar versie 2.2.32 werkt in mijn geval ideaal: http://www.oldapps.com/download_old_version_filezilla.php

Voordat jouw iDeal account (of dat van je klant) wordt geactiveerd om “in het echie” betalingen te ontvangen, zijn er een aantal stappen die je moet volgen. Onderstaand verhaal gaat uit van iDeal Basic als betaalmodule en PHP als programmeertaal.

1. sleutel

Log in op de iDeal produktie omgeving (dashboard) en upload jouw geheime sleutel. Meestal staat er al een geheime sleutel klaar (b.v. onder de tab “Configuratie”) en hoef je alleen op de “Upload”-button te drukken. Vervolgens zie je een groen vinkje verschijnen.

2. notificatie

Hier kun je ervoor kiezen om de notificaties van de betalingen via email of via XML te ontvangen. Ontvangen via XML heeft zo zijn voordelen. Lees daarom ook de iDeal XML post.

Je kunt hier ook je de URL’s opgeven waar bezoekers terecht moeten komen na een transactie. Dat betekent dat ze in ieder geval op de knop “naar winkel” moeten drukken. Wat gebeurt er als dat niet doen? Ook hierover meer in de iDeal XML post.

Afhankelijk van het resultaat komen ze vervolgens uit bij de hier opgegeven success URL, fout URL of annuleer URL. Je kunt deze ook in je code definiëren. Kies je daarvoor, dan worden de URL’s in je dashboard genegeerd.

Je kunt voor de 3 verschillende resultaten een en dezelfde URL gebruiken, maar met een verschillende querystring (b.v. “betalingsresultaat.php?result=success”) om dan vervolgens in je code deze querystring uit te lezen.

3. herhalen

Herhaal bovenstaande 2 stappen in de test omgeving.

4. testbetalingen

De bank verwacht dat je vervolgens 7 proefbetalingen in de testomgeving doet, van 1 euro tot en met 7 euro. Hiermee boots je 7 verschillende situaties na:

1. Success: de betaling is helemaal goed verlopen, je komt terecht op de success URL
2. Cancelled: de betaling is door de bezoeker afgebroken, je komt terecht op de annuleer URL
3. Expired: de betaling is verlopen, je komt terecht op de fout URL
4. Open: de betaling staat nog open, je komt terecht op de fout URL
5. Failure: de betaling is mislukt door bijvoorbeeld te weinig saldo, je komt terecht op de fout URL
6. Directory Request: de lijst van gelieerde banken wordt opgehaald. Eigenlijk vindt deze test al plaats zodra je de testbetaling van 1 euro hebt gedaan.
7. Format error: de data of het formaat daarvan is niet goed, je kunt nu niet op de knop “naar winkel” drukken en blijft in de iDeal betaalmodule

Wat de bovenstaande termen precies inhouden is op dit moment niet zo heel belangrijk. Je moet je derhalve niet af laten schrikken door waarschuwingen (in rood) tijdens het uitvoeren van de testbetalingen. Dat is juist de bedoeling.

Hoe voer je deze 7 testcases uit? Download daarvoor dit PHP-script. Dit script is getest met zeven succesvol verlopen testtransacties bij de ING bank. Er zijn 3 variabelen in het script, die je moet aanpassen aan jouw eigen situatie:

$bankUrl: dit is de URL van jouw (klants) iDeal Basic test dashboard
$key: de geheime sleutel die je in stap 3 hebt aangemaakt (d.w.z. de TEST sleutel!)
$merchantID: dit heb je van de bank (of van je klant) gekregen

Upload nu het script naar je server en roep het op in je browser. Vul het bedrag ‘1′ in en druk op de submit-button. Je ziet een overzicht van hetgeen je gaat versturen. Druk nogmaals op de submit-button. Nu volgt een iDeal-scherm. Kies hier voor “Issuer Simulator” bij de optie “Selecteer uw bank”.

Druk vervolgens op “Betalen”. Tijdens elke test krijg je een melding “Controleer uw merchantReturnURL“. Dit kun je negeren door op “Bevestigen” te drukken. Uiteindelijk krijg je de melding dat de betaling successvol is en druk je op de knop “naar winkel”.

Herhaal deze procedure voor de bedragen 2, 3, 4, 5 en 7. In theorie mag je het bedrag 6 (de Directory Request-test) overslaan, omdat die al plaatsvindt zodra je de eerste test (van 1 euro) doet. Het kan echter geen kwaad om ook de betaling van 6 euro te doen.

5. controle

Je kunt nu in de test omgeving kijken of de 7 tests zijn geslaagd. Vervolgens is het een kwestie van afwachten tot de test omgeving gesynchroniseerd wordt met de produktie omgeving. Dat duurt even. Zodra in het test dashboard de tab “Activering” grijs is geworden (niet meer aanklikbaar), ben je klaar om echte betalingen te ontvangen.

Zodra er via iDeal Basic afgerekend gaat worden, verlaat de bezoeker jouw website om naar de iDeal website van de aangesloten bank te gaan. Jij wilt uiteraard het resultaat van de betaling in combinatie met het juiste ordernummer in de database terugzien, om te weten of je deze klant daadwerkelijk moet gaan leveren. Hieronder staan 2 manieren om dit voor elkaar te krijgen (uitgaande van PHP als programmeertaal).

sessie

Je kunt het ordernummer in een sessie zetten en de status van de betaling uitlezen via de return URL die je in het iDeal Dashboard OF in je code hebt opgegeven. Als je voor je success URL, je fout URL en je annuleer URL dezelfde pagina gebruikt, maar met een verschillende querystring, dan gebruik je deze querystring in combinatie met de sessie. Voorbeeld:

• Je maakt een uniek ordernummer (van bijv. 12 karakters) aan:
  $_SESSION["ordernumber"] = substr($GLOBALS["order_prefix"].mt_rand(),0,12);
• Dit stuur je mee naar iDeal als (verplicht!) hidden veld:
  <input type="hidden" name="purchaseID" value="<echo $_SESSION["ordernumber"]; ?>”>
• De return URL’s die je hebt opgegeven zijn bijvoorbeeld:
  “idealbetaling.php?result=success“, “idealbetaling.php?result=failure” en “idealbetaling.php?result=cancelled“
• In het script idealbetaling.php lees je uiteindelijk $_SESSION["ordernumber"] in combinatie met $_GET["result"] uit, om daarmee je database te updaten

Er zijn 2 absolute nadelen aan deze methode:

• sessies kennen timeouts: als de klant besluit zijn bestelling pas af te rekenen, nadat hij een heel lange lunchpauze heeft gehad, dan is de inhoud van $_SESSION["ordernumber"] leeg.
• als de klant na de afronding van zijn betaling NIET op de knop “Naar winkel” drukt, maar zijn browser afsluit, dan komt hij niet op de return URL terecht.

xml notificatie

Een nettere manier om het ordernummer (oftwel: purchaseID) te vangen is via xml notificatie. iDeal stuurt een XML bericht naar een door jouw opgegeven pagina. In dit bericht staan zowel het ordernummer als het resultaat van de betaling. Helaas kunnen iDeal helpdesken je niet altijd wat een dergelijke bericht inhoudt.

Na lang zoeken, vond ik uiteindelijk een pagina op Whelp.nl van Theo Bakker, die mij een heel stuk op weg heeft geholpen.

• Download dit bestand, pas het aan met de juiste database verbinding en upload het naar jouw webserver.
• Login op het iDeal Dashboard en geef onder de “Configuratie”-tab aan dat je notificatie via XML moet plaatsvinden. In het veld “notificatie URL” verwijs je naar het script dat je zojuist hebt geupload.
• Bij elke betaling die gedaan wordt, stuurt iDeal nu een ruw XML bericht naar de notificatie URL, die daar automatisch de status en het purchaseID uitpeutert en inleest in jouw database.

Het script is in een live situatie getest. Mocht je problemen tegenkomen, laat het even weten.

Het Internet wemelt van de freeware fonts, dus onderstaande lijst moet als “een beginnetje” worden beschouwd. De lijst is zoals altijd in willekeurige volgorde.

Aanvullingen zijn welkom, maar probeer je te beperken tot sites die echt (gratis!) fonts bevatten en niet:

• alleen maar links naar andere sites met fonts
• wemelen van de advertenties en/of popups

jabroo.com

Meer dan 20000 (!) gratis fonts: http://www.jabroo.com/

urbanfonts.com

Enorme collectie gratis fonts en dingbats: http://www.urbanfonts.com/free-fonts.htm

discoverfonts.com

Gebruik de index aan de rechterkant, zodat je weet dat je een gratis font download. De site bevat nl. ook commerciële fonts: http://www.discoverfonts.com

dafont.com

De fonts zijn ingedeeld in thema’s en kennen verschillende licentiemodellen. Hele ruime voorraad: http://www.dafont.com

fonts101.com

Beetje rommelige site, maar wel meer dan 18000 (!) gratis fonts: http://www.fonts101.com

searchfreefonts.com

13000 gratis fonts en veel artikelen over typografie: http://www.searchfreefonts.com

1001freefonts.com

Fonts voor de PC en voor de Mac, ingedeeld in categorieën en met zoekmogelijkheid: http://www.1001freefonts.com

fontshop.com

Heeft naast een berg downloadable fonts ook een applicatie genaamd FontStruct, waarmee je zelf fonts kunt maken: http://fontstruct.fontshop.com/gallery

lettertype.net

Een Nederlandstalige site met een ruime selectie gratis en commerciële fonts: http://lettertype.net/gratis-lettertypes-a-0.html

highfonts.com

Veel fonts en veel links naar andere font websites: http://www.highfonts.com/freefonts.aspx

blambot.com

Een kleine collectie comic-book-achtige fonts: http://www.blambot.com/fonts.shtml

larabiefonts.com

Let op: commerciële en gratis fonts staan door elkaar aan: http://www.myfonts.com/browse/foundry/larabie/

bvfonts.com

Geen enorme hoeveelheid, wel heel aparte fonts: http://www.bvfonts.com/fonts/fonts.php?show=free

fontdiner.com

Een kleine collectie retro fonts: http://www.fontdiner.com/silver2.html

acidfonts.com

6000 gratis fonts en links naar allerlei font applicaties: http://www.acidfonts.com/

fontsy.com

Mooie vormgeving en meer dan 4500 gratis fonts: http://www.fontsy.com/

eternalfonts.com

Meer dan 5000 fonts in rubrieken ingedeeld: http://www.eternalfonts.com/

fontvillage.com

Meer dan 6000 gratis fonts voor PC en Mac: http://www.fontvillage.com/

fontfreak.com

Voor een kleine bijdrage kun je hier ook alle gratis fonts in 1x downloaden: http://www.fontfreak.com/main.htm

fontface.com

1000 fonts en snel groeiende, volgens eigen zeggen: http://www.fontface.com/

fontreactor.com

Niet allemaal gratis, dus let op de “readme” bij elk font: http://www.fontreactor.com/fonts/

dailyfreefonts.com

Met de mogelijkheid om je eigen tekst in meerdere fonts tegelijk te previewen: http://www.dailyfreefonts.com/

beautifulfonts.com

Grote collectie Windows fonts: http://www.beautifulfonts.com/

fontshack.com

Grote collectie en wekelijks updated: http://www.fontshack.com/

fontmaniac.com

Grote hoeveelheid, alfabetisch gesorteerd: http://www.fontmaniac.com/

2200freefonts.com

Niet geteld, dus ik weet niet of 2200 het aantal betekent: http://www.2200freefonts.com/

typenow.net

Een kleine selectie film- en muziekfonts: http://www.typenow.net/themed.htm

showfont.net

Volgens eigen zeggen meer dan 10000 gratis fonts: http://www.showfont.net/

free-fonts.biz

Nederlandstalig, gratis en commerciële fonts: http://nl.free-fonts.biz/home.html

creamundo.com

9800 opmerkelijke fonts en dingbats: http://www.creamundo.com

typetester.org

Geen opsomming van fonts, maar wel heel handig. Op typetester.org kun je verschillende fonts met elkaar vergelijken: http://www.typetester.org/

richardsprojects.co.uk

Met de font-picker kun je de verschillende fonts op je eigen PC met elkaar vergelijken: http://richardsprojects.co.uk/products/font-picker/

typechart.com

Wil je zien hoe verschillende fonts zich gedragen in je browser en meteen de bijbehorende CSS downloaden? Kijk dan op: http://typechart.com/

http://www.everystockphoto.com

Everystockfoto doorzoekt verschillende bronnen (oa. stock.xchng) en toont bij de zoekresultaten altijd welke licentie van toepassing is. Erg fraaie Web 2.0 vormgeving. Zie http://www.everystockphoto.com/.

http://picturesandbox.com

Okee, de weergave van de zoekresultaten komt een beetje overweldigend over en het zoeken zelf blinkt ook niet uit door snelheid, maar feit blijft dat Picturesandbox een prachtige functionaliteit levert. Zie http://picturesandbox.com/.

http://www.photoree.com

Volgens eigen zeggen: “the image bookmarking and recommendation system”…Vereist een login, op basis waarvan “jouw” favorieten worden vastgeteld, door meerdere website te doorzoeken. Zie http://www.photoree.com/photos/start.

Iedere designer is weleens op zoek naar gratis illustraties voor zijn/haar ontwerp, en komt dan via Google op allerlei sites terecht, die gratis lijken te zijn, maar helaas…Hieronder is geprobeerd een willekeurige opsomming te maken van foto-websites waar je niet je creditcard hoeft te trekken en die geen specifiek onderwerp hebben.

Betekent “free” op deze sites dan ook echt altijd helemaal gratis en voor niks? Niet altijd! Zonder uitgebreid in te willen gaan op de diverse licensiemodellen die er bestaan, moet je er altijd achter zien te komen of de originele fotograaf of site het goed vindt dat jij zijn kunstwerk voor jouw (commerciele) project gebruikt. Lees daarom altijd goed de voorwaarden van de desbetreffende website door, voordat je aan het downloaden slaat!

Wil je door meerdere websites tegelijk of op kleur zoeken? Kijk dan ook even naar deze post en deze post…

Aanvullingen op onderstaande lijst zijn welkom! Helaas heb ik wel de comments moeten sluiten, vanwege onophoudelijke Russische spam….

http://www.sxc.hu

Volgens eigen zeggen is stock.xchng de “leading free stock photography site” (meer dan 350.000 foto’s!). Ook veel tutorials. Een (gratis) account is ook hier vereist. http://www.sxc.hu/.

http://www.flickr.com

Met meer dan 4000 uploads per minuut door fotografen over de hele wereld, lijkt Flickr groter dan stock.xchng. Behalve foto’s (in diverse formaten), ook video’s. http://www.flickr.com/.

http://www.woophy.com

Via de homepage van Woophy kun je een locatie over de hele wereld kiezen, waarbij vervolgens foto’s van een fotograaf uit die plaats getoond worden. http://www.woophy.com/photo.

http://www.photocase.com

Wederom een foto-community. Mooie foto’s, mooie vormgeving. http://www.photocase.com/en/photobrowser.asp.

http://www.stockvault.net

Uitgebreid, inclusief tutorials en artikelen. Geen account vereist. http://www.stockvault.net.

http://www.freerangestock.com

Account vereist, anders bevatten de foto’s een watermerk. http://www.freerangestock.com/.

http://www.deviantart.com

Deviantart bevat niet alleen foto’s, maar ook waanzinnige mooie digital art (interfaces, iconen, wallpapers etc). Neem even de tijd om op je gemak te bladeren. http://browse.deviantart.com/resources/stockart/?order=9#.

http://www.freedigitalphotos.net

Erg mooie foto’s, erg mooie vormgeving. Geen account benodigd. http://www.freedigitalphotos.net/.

http://www.photogen.com

Geen enorme voorraad en veel (Google Ad-Sense) advertenties. (Gratis) account vereist voor downloaden. http://www.photogen.com/free-photos/.

http://www.pixelperfectdigital.com

Voornamelijk afhankelijk van bijdragen van individuele fotografen. Ook illustraties en digital art afbeeldingen beschikbaar. http://www.pixelperfectdigital.com/free_stock_photos/.

http://www.freephotosbank.com

Overzichtelijke gerangschikt, hoewel de voorraad niet recentelijk lijkt aangevuld. Een account aanmaken is niet nodig. http://www.freephotosbank.com/.

http://www.webphotomart.com

Bevat niet alleen foto’s, maar ook clipart. Geen account nodig. http://www.webphotomart.com/.

http://www.freepixels.com

Rommelig en onoverzichtelijk. Wel mooie foto’s. http://www.freepixels.com/.

http://www.morguefile.com

Niet enorm veel foto’s, wel mooi vormgegeven. Geen account nodig. http://www.morguefile.com/archive/.

http://www.public-domain-photos.com

5000 foto’s, 8000 cliparts. http://www.public-domain-photos.com/.

http://www.freejpg.com.ar

Helaas (alleen?) spaanstalig. http://www.freejpg.com.ar/.

http://www.unprofound.com

Het zoeken op kleur lijkt niet helemaal goed te werken, maar Unprofound is gegroeid uit een prive verzameling, dus sowieso een vermelding voor een dergelijk sympathiek initiatief. http://www.unprofound.com/.

http://www.vintagepixels.com

Gericht op oudere foto’s, leuke site. http://www.vintagepixels.com/.

http://www.dreamstime.com

Let op: Dreamstime heeft ook een niet-gratis gedeelte. http://www.dreamstime.com/free-photos.

http://www.studio25.ro

Overzichtelijk en duidelijk. Account vereist. http://www.studio25.ro.

http://www.kavewall.com

Lage resoluties gratis, hoge resoluties niet. http://www.kavewall.com/stock/.

http://www.pixelio.de

Bijna 300000 afbeeldingen in 148 categorieen. Duitstalig. http://www.pixelio.de/.

http://www.fotodatenbank.com

Kleine voorraad, wel de moeite waard. Duitstalig. http://www.fotodatenbank.com/.

http://www.freeimages.co.uk/

De vormgeving is niet geweldig, maar er valt genoeg te zien. Geen account vereist. http://www.freeimageslive.co.uk/search/imagesearch.cgi.

http://www.diwiesign.com

Particuliere collectie met een industriele inslag. http://www.diwiesign.com/index.php?page=stockphotos.

http://pdphoto.org

Lijkt op iemands prive collectie, maar is zeker de moeite waard. http://pdphoto.org.

http://www.photorogue.com/

Heel leuk initiatief: iemand doet een verzoek en aangesloten fotografen maken en/of sturen de foto’s compleet kostenloos. http://www.photorogue.com/.

A customer of mine requested a custom Google Maps plugin for his richtext editor. Since I could not find one for the TinyMce editor he was using, I decided to create my own. To get this plugin working, you need the three things:

1. API key

To get Google Maps appearing on your webpage, you need your very own API key from Google. You can obtain one here: http://code.google.com/apis/maps/signup.html

2. Coordinates

You can query the coordinates of the place you want to show by using the form below. Just enter your location as a comma or space seperated string and press “Go!”.

You will find your coordinates between parentheses just above the form.

Why not use the locationstring as a variable in a TinyMce dialog box, you say? The main reason is that once you have inserted the Google Map into your TinyMce textarea, it does not appear when in wysisyg-mode. You first need to save (or publish) the page in order for the map to appear.

The form above saves you the time of republishing over and over again, just to get your location right.

3. Download

You can download the plugin here.

Remember: it’s a very crude first version with much room for improvement. It comes with a readme.txt, in which I have tried to explain the steps I have taken.

Originally a Google Map needs a “onLoad” function in your body-tag. Since TinyMce is mainly used in content management systems, a user cannot access the body-tag. I added some extra Javascript that avoids the body-tag from being used (not my own, I found the code somewhere on the Internet).

SourceForge

Jeroen van der Stijl has picked up this project and created a SourceForge depository. Since my code was very crude, any improvements are more than welcome. Check out https://sourceforge.net/projects/mcegooglemap/

Download de laatste versie van de WEFT software hier. Voor dit voorbeeld is versie 5.3.2 gebruikt. Let op: deze software werkt alleen op Windows en wordt al geruime tijd niet meer onderhouden.

stappen

• Zorg ervoor dat het font dat je wilt gebruiken, geinstalleerd is op de PC.
• Klik op “New” om een nieuw “font embed project” te starten.
• Vul je naam en e-mailadres in en druk op “Next”.
• Vul de URL van je pagina in en kies “file://” als protocol als je op je eigen harddisk aan het ontwikkelen bent. Druk op “Add” en vervolgens op “Next”.

  

• Vink “Skip analysis” aan en druk op “Next”.
• Druk in het volgende scherm op “Add” om een font te kiezen.

  

  Druk daarna op “Next”.

• Nu geef je de plaats op waar het EOT bestand aangemaakt moet worden. Selecteer weer “file://” en als locatie bijvoorbeeld C:\TEMP\.

  

  Vink de opties “Create font declarations with relative URLs” en “Show CSS @font-family declarations” allebei aan. Druk daarna op “Next”.

• Er opent zich nu een popup waarin de @font-face declaratie staat. Kopieer (Control-C) deze code.
• Maak een C:\TEMP\test.htm aan.
• Plak vervolgens de bewaarde code in de <head>-tag.

  
  <STYLE TYPE=”text/css”>
  <!– /* $WEFT — Created by: Cees Rijken (cees@connectcase.nl) on 21-4-2008 — */
  @font-face {
  font-family: Algerian;
  font-style: normal;
  font-weight: normal;
  src: url(file:///C:\TEMP\ALGERIA0.eot);
  }
  –>
  </STYLE>

• Maak binnen de <STYLE></STYLE>-tag een extra CSS class aan die het nieuwe font aanroept, zoals bijvoorbeeld:

  .algerian {font-family:Algerian, Arial, Helvetica, sans-serif}

• Pas deze class toe in de <body>-tag:

  <p class=”algerian”>dit is een p-tag met het Algerian font….</p>

• Open C:\TEMP\test.htm in een browser met als resultaat: klik hier

Bronnen en links:

NIC, http://webservices.nic.in/wsmad/ResourceCentre/hindiweb.aspx
W3C, http://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions.

Download een gratis versie van TFF hier. Uiteraard kun je ook voor de betaalde, uitgebreidere versie kiezen.

stappen

• Open het gedownloade zipfile en plaats alle bestanden in dezelfde folder. Ik heb hiervoor C:\TEMP\test gebruikt. LET OP: het uitgepakte zipfile bevat een subfolder genaamd ‘tff’.
• Maak in je editor een nieuw PHP bestand C:\TEMP\test\test.php aan.
• Zet daar (behalve de gebruikelijke tags) in: <H3> Dit is een H3 tag</H3>.
• Zet helemaal boven in deze test.php: <script type=”text/javascript” src=”tff/tff.js”></script>.
• Roep vervolgens de H4 tag aan in je CSS met tenminste een font-family property, zoals: <STYLE> font-family: “ALGER.TTF”;</STYLE>.
• Kopieer het font-bestand (in dit geval ALGER.TTF) naar C:\TEMP\test\tff\fonts\.
• Kopieer alles in C:\TEMP\test\ naar een PHP server.
• Zet schrijfrechten op de server aan voor de folder tff/cache.
• Open de URL in een browser met als resultaat: klik hier

Bronnen en links:

True Font Family, http://www.truefontfamily.com/?p=install

Download de laatste versie van sIFR hier. Voor dit voorbeeld is versie 3 release 4.05 gebruikt. In plaats van het compleet opnieuw opbouwen van een HTML bestand, heb ik het demo bestand gebruikt dat bij de download inbegrepen was.

stappen

• Open het gedownloade zipfile en plaats alle bestanden in dezelfde folder. Ik heb hiervoor C:\TEMP\sifr gebruikt.
• Open C:\TEMP\sifr\flash\sifr.fla in Flash. Voor dit voorbeeld heb ik Adobe Flash CS3 (versie 9) gebruikt.
• Dubbelklik op de tekstbox in het midden. De tekst “Bold Italic Normal” verschijnt.
• Klik vervolgens nog een keer om de tekstbox te selecteren. Onder in het scherm staat de properties window (niet zichtbaar? druk Ctrl-F3). Kies daar een font uit de dropdown box. Dit zouden alle fonts op je PC moeten zijn.
• Ga vervolgens naar File, Export, Export en kies C:\TEMP\sifr\flash als folder. Exporteer met de volgende settings:

  Version : Flash Player 8
  Load Order : Bottom up
  Actionscript version : Action Script 2.0
  Protect from Import : aangevinkd
  Compress Movie : aangevinkd
  Omit trace actions : aangevinkd
  Permit debugging : uitgevinkd

• Open C:\TEMP\sifr\demo\index.html in een (Javascript en Flash enabled!) browser met als resultaat: klik hier

Als je C:\TEMP\sifr\demo\index.html in je editor opent, zul je zien dat er in dit bestand 3 stylesheets worden aangeroepen: all.css, sIFR-screen.css en sIFR-print.css. In all.css staan de “gebruikelijke” CSS classes en deze kun je dan ook aanvullen met je eigen CSS. De andere twee hoef je niet te wijzigen.

In C:\TEMP\sifr\demo\index.html worden inline nog een aantal classes aangeroepen. Voor overzichtelijkheid heb ik deze geknipt en in all.css geplakt.

Vervolgens worden de benodigde Javascripts aangeroepen. Onder deze aanroep vind je de syntax van de diverse selectors. Deze is sinds versie 2 behoorlijk gewijzigd en vereist iets meer oplettendheid. Voor een compleet overzicht van aanpasbare properties, klik hier.

Het vreemde is dat sommige style properties (display:inline) in all.css aangepast moeten worden, terwijl andere (letter-spacing) alleen werken als je ze hier in de code aanpast (???).

Bronnen en links:

Mark Wubben, http://wiki.novemberborn.net/sifr3/