Ik vind het altijd wel weer spannend om een nieuwe lay voor 1 van m’n websites te maken. Want echt lang blijf ik meestal niet in de huidige layout hangen. Voor leukvoorkids.nl heb ik de voorbereidingen al getroffen voor de wintertijd. Even wachten tot de Sinterklaas voorbij is (misschien dat ik daar nog iets mee doe in de vorm van een aangepaste banner ofzo) en dan ruil ik snel de huidige herfstkleuren in voor een winterse look and feel.

Voor een mooie kleurencombinatie ga ik meestal op bezoek bij Kuler van Adobe. Even zoeken op een sleutelwoord (in dit geval winter) en je krijgt een aantal (geslaagde en minder geslaagde) kleuren combi’s voor je giechel. Make your pick zou ik zeggen.

Vorig jaar had ik me uitgeleefd op een banner met sneeuwvlokken. Zou het niet tof zijn om het (de sneeuw bedoel ik) dit jaar met een flash animatie te doen. Na een half uurtje knoeien met movieclips met een sneeuwvlok die neerdwarrelen op basis van een motion guide layer daagt het me — dit wordt geen succes. Waarom zelf wanhopig slim proberen te zijn als iemand anders het in een tutorial al uitgebreid online heeft gezet. Zie hier Kirupa’s Snow 3.0 tutorial om behoorlijk realistische sneeuw te genereren in Actionscript. Hmm. Sweet!

Heb ik dan helemaal niks zelf gedaan? Toch wel. Een beetje tenminste. Niks is zo akelig als het willen tonen van een Flash animatie op een systeem dat het eigenlijk niet ondersteunt. Aan een half werkende pagina heeft niemand iets. Dus nagedacht over een beleefde manier van integratie (eerst checken of de basis voor de techniek aanwezig is, dan pas aan de slag) heb ik in elk geval. Met andere woorden: gewoon een beproefde manier van object detectie inzetten (FlashObject) en de benodigde pagina elementen in javascript code bouwen. Dan kun je je nooit een buil vallen:


function flashSneeuw() {
var fb = new SWFObject("/img/swf/sneeuw-no-bg.swf", "sneeuw_lvk", "940", "385", "8", "#ffffff");
fb.addParam("quality", "high");
fb.addParam("wmode", "transparent");

var container_sneeuw = document.createElement("div");
var links_container_sneeuw = document.getElementById("container").offsetLeft;



container_sneeuw.id="container-sneeuw";
container_sneeuw.style.position = "absolute";
container_sneeuw.style.display = "block";
container_sneeuw.style.top = "40px";
container_sneeuw.style.left = links_container_sneeuw + "px";
container_sneeuw.style.width = "940px";
container_sneeuw.style.height = "350px";
document.getElementById("menu").appendChild(container_sneeuw);
fb.write("container-sneeuw");
}

En ja, je hebt helemaal gelijk. Het is een stuk netter om alle stijldingetjes die niet dynamisch zijn in het css-bestand op te nemen in plaats van in het javascript te zetten. Dat komt nog wel goed voordat de boel live gaat.

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Flash · Mijn websites
Getagged als actionscript, Flash

Dinsdag 18 september 2007 organiseerde Peter Paul Koch in Pakhuis de Zwijger in Amsterdam het mini-congres voor front enders. Met als doel een belangenvereniging op te richten voor personen die zich beroepsmatig met frontend webdesign bezighouden. Voor iedereen met een beroepsmatige (x)html, Cascading Style Sheets of javascript tic dus. Maar ook voor Flashers. Want Flash is definitely frontend.

Het programma werd ingevuld met presentaties van Stephen Hay van Cinnamon en Refunk’s Bobby van der Sluis (mij vooral bekend vanwege zijn UFO project). En een aantal code reviews. Onder andere verzorgd door de lead frontend developers van Lost Boys, Eden Design en Info punt nl.

Bere-interessant allemaal … Maar het heeft me wel aan het denken gezet. Op de weg terug naar huis borrelde de vraag op: wie ben ik op webgebied? Wat kan ik en waar sta ik? Het antwoord: ik ben voornamelijk een generalist. Een jack of all trades. (X)HTML, cascading style sheets, javascript, webstandaards, XML, ASP, Google mashups, MySQL, IIS, zoekmachineoptimalisatie, PHP, web usability, Flash, grafische dingen, SQL, DOM scripting. Allemaal leuk om eens mee te knutselen en dat heb ik dan ook gedaan. Of zoals Vulcano — 1 van die onvergetelijke Nederlands topbands van de jaren 80 — al verkondigde: Een beetje van dit en een beetje van dat. Een beetje van zus. En een beetje van zo. Ik ben dus voornamelijk breed ge-oriënteerd. Daar is toch niks mis mee, zou je denken. Maar hoe zit het dan met de diepgang? Is het logische gevolg van elke spannende techniek niet dat je een chronisch gebrek aan specialisme ontwikkelt? Is het zo zoetjes aan niet verstandiger om me te concentreren op ëën of enkele deelgebieden?

Okay. Binnenkort maak ik m’n keuze met betrekking tot de webtechnische zaken waarop ik me ga concentreren. Helemaal helder heb ik het nog niet op m’n netvlies, maar ik denk dat het de voorkant van websites wordt waar ik me op wil focussen — XHTML, stijlbladen en javascript dus. Met daarnaast een solide kennis van CMS‘en (Drupal en Wordpress bijvoorbeeld) om als backend te implementeren. En SEO is en blijft natuurlijk ook wel spannend.

K*#@t. Daar gaan we alweer …

Geschreven door HansR
Tot nu toe zijn er 2 reacties op deze tekst. Laat een reactie achter.
Geplaatst in Cascading Style Sheets · Flash · Webstandaards
Getagged als css, frontend code, javascript, xhtml

Goh. Wat zal-ie lekker indexeren. De website van Het Plateel bedoel ik. Het Plateel zei u? Jazeker. Het Plateel. Dat aansprekende nieuwbouwproject in Purmerend. De belichaming van Wonen met stadse grandeur in Purmerend.

Is Purmerend dan eigenlijk zo\’n boerendorp dat er een nieuwbouw project als Het Plateel aan te pas moet komen om het een stadse uitstraling te geven denk ik dan? Maar dat terzijde.

De website van Het Plateel project, uitgevoerd in Flash (love it or hate it) heeft me de afgelopen weken aardig wat grijze haren bezorgd. Soms in technische zin, maar voornamelijk voor wat betreft communicatie. Het is lastig bouwen als delen van het ontwerp niet bekend zijn of aan voorschrijdend inzicht onderhevig. En dan zijn we eigenlijk nog maar net begonnen. Er is nog een lange weg te gaan voordat dit project in het ronde archief kan verdwijnen. Met voldoende leeuwen en beren om naar de eeuwige jachtvelden te verwijzen voordat het AF is …

Waarom de keuze voor flash? Die vraag is me de afgelopen weken meermaals gesteld. Maar behalve te zeggen dat het over het algemeen wel kinky oogt moest ik het antwoord op deze vraag schuldig blijven. Eén reden om NIET voor een volledige flash implementatie te kiezen staat me in elk geval haarscherp op het netvlies: het indexeert zóó ontzettend klote. Nul komma nul.

Er komt nog een blog-onderdeel bij. Niet in flash. Dus het zal met die ranking in de zoekresultaten op termijn wel meevallen. Zoveel competitie is er nou ook weer niet. Maar zover is het nog niet. En omdat Flash zo ontzettend zuigt voor wat betreft zoekmachine aaibaarheid ga ik dat nieuwbouwproject in het Noord-Hollandse Purmerend eens pluggen via Nullbeta. Een mooie gelegenheid om de kracht van ouderwetse html tekst te onderstrepen …

Het Plateel - algemeen

Ymere en de gemeente Purmerend realiseren samen de transformatie van deelgebied 1, gelegen tussen de Dopsloot en De Where. In de periode 2007-2010 worden hier in totaal 315 woningen ontwikkeld, waarvan 215 koop- en 100 sociale huurwoningen. Er komen zowel eengezinswoningen (55 als appartementen (45. De appartementen hebben vijf en zes bouwlagen. De nieuwe woonbuurt heeft een diversiteit aan woningen voor gezinnen, senioren, stellen en singles.

Kopen

Voor het kopen van een woning in Het Plateel dient u als belangstellende voor een nieuwbouwwoning ingeschreven te staan bij de gemeente Purmerend, of zich daarvoor in te schrijven. U krijgt dan een uitnodiging voor een verkoopmanifestatie, waar u een keuzeformulier ontvangt om uw voorkeur voor een van de woningen kenbaar te maken. De gemeente bepaalt via loting wie voor een woning in aanmerking komt.

Staat u (nog) niet ingeschreven, maar heeft u wel belangstelling voor een koopwoning in Het Plateel, schrijf u dan in via het inschrijfformulier onder het kopje wonen.

Huren

De sociale huurwoningen komen in portefeuille bij woningcorporatie Ymere, die de woningen vanuit haar vestiging in Amsterdam-Noord gaat verhuren en beheren. Voor meer informatie:

Ymere Wonen - Noord

Floraweg 200

1032 ZG Amsterdam

T 020 494 63 00

F 020 494 63 60

E noord@ymere.nl

www.ymere.nl

Het Plateel - historie

Het Plateel, de nieuwe woonbuurt nabij het historische centrum van Purmerend, herinnert aan de plateelbakkerijen die rond 1900 aan de rand van Purmerend stonden. Plateel is de aanduiding voor aardewerk dat lijkt op porselein. Van oorsprong betekende plateel \’bord\’, \’schotel\’ of \’platte schaal\’. Het Engelse woord \’plate\’ en het Franse \’plat\’ zijn in het woord terug te vinden. Purmerend was honderd jaar geleden een belangrijk centrum voor de fabrieksmatige productie van sieraardewerk. Het Purmerends Museum bezit prachtige gebruiksvoorwerpen en stukken sieraardewerk, die in die tijd gemaakt werden in de fabrieken van onder andere de Wed. Brantjes en Haga en die Purmerend tot in Perzie bekendheid gaven.

Wonen - Dit wordt mijn buurt

Het Plateel herinnert mij aan een eeuwenoud ambacht; die kunst en kwaliteit van toen zie je terug in de architectuur van de huizen van nu. Dit is een buurt met sfeer en vertrouwdheid, die mij veiligheid en geborgenheid biedt. Het Plateel zorgt voor gemak, zoals een parkeerplaats voor de deur en alle voorzieningen binnen handbereik. Dit is een stadsbuurt, vlakbij het historische centrum van Purmerend en toch heeft het gelukkig ook iets van een dorp, met al dat aangename groen.

Wonen in Het Plateel - prijzen

De woningen in Het Plateel zijn te koop vanaf € 260.000,- V.O.N., prijspeil 2007.

Het Plateel - Marktstad in Waterland

Purmerend ligt in een waterrijk gebied met beschermde natuurwaarden. De eerste bewoners waren vissers die bij het veer over de Where aan wachtende reizigers en kooplieden hun vangsten aanboden. Zo ontstond de marktstad met, rond 1400, ook een waag om de goederen te wegen. De markten waren economisch, maar ook cultureel van belang. Tot circa 1850 groeide de bevolking nauwelijks; er was dan ook geen reden tot stadsuitbreidingen. Deze vonden pas plaats na de economische opleving in de tweede helft van de negentiende eeuw. Vanaf die tijd steeg het inwoneraantal snel, van 5.000 ruim honderd jaar geleden tot bijna 80.000 op dit moment.

De stad Purmerend

Purmerend heeft een zeer compacte binnenstad met nog veel pleinen en gebouwen die de rijke historie van de stad laten zien: de Kaasmarkt, de Koemarkt en de talrijke monumentale panden. De overzichtelijke binnenstad biedt de mogelijkheid om er gezellig te winkelen en uit te gaan. De ligging van het centrum geeft aan de historische binnenstad iets geheel eigens en unieks: er zijn maar weinig steden die zo direct uitkijken op het open landschap; de oude droogmakerijen, de IJsselmeerkust en de nationale landschappen. De stad is omgeven door schilderachtige polders, zoals de Purmer, de Wormer en het Unesco Werelderfgoed de Beemster.

Gemeente Purmerend

Purmerend is in de laatste decennia uitgegroeid tot een stad met ongeveer 80.000 inwoners. Na de groeiperiode gaat de aandacht nu uit naar het versterken van de bestaande stad. Het unieke zwembad en het opvallend moderne poppodium zijn enkele voorbeelden waarin de ambities van Purmerend tot uitdrukking komen. De gemeente werkt, in samenwerking met inwoners en bedrijven, aan een verdere verbetering van de kwaliteit van de stad. Onder het motto Van Groei naar Bloei worden de komende jaren forse investeringen gedaan om Purmerend nog mooier, aantrekkelijker en beter bereikbaar te maken. De nieuwe buurt Het Plateel illustreert deze ambitie voor het wonen en het wooncomfort.

Voorzieningen in Purmerend

Het Plateel ligt op een steenworp afstand van de gezellige binnenstad van Purmerend. Niet alleen de dagelijkse boodschappen zijn dichtbij huis te vinden, ook treft u om de hoek een ruim aanbod van cultuur, sport en ontspanning. Enkele voorzieningen op loopafstand:

Theater de Purmaryn

Een professioneel theater met een brede programmering.

Pop en Cultuurpodium P3

Een jong poppodium, in een opvallend modern gebouw met een geweldige akoestiek, waar zowel bekende als onbekende bands en muzikanten op de buhne staan.

Treinstation Purmerend

Op een paar honderd meter afstand vindt u NS Station Purmerend, met directe verbindingen naar onder meer Amsterdam, Zaandam en Hoorn.

Hey. Waar wacht je nog op? Schrijf je deze miliseconde nog in voor één van die überhippe woningen in Purmerend!!!!

Check dan die website van Het Plateel

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Flash · Mijn websites
Getagged als nieuwbouwproject, webwerk, ymere

De achtergrond
Met Company of Kids ben ik voorzichtig aan het nadenken over een vorm van samenwerking. Om te beginnen ben ik door Company of Kids gevraagd om een flash banner op Leuk voor kids te zetten. Om vervolgens maar eens een dooddoener-konijn uit de hoge hoed te trekken: meten is weten.

En ik wil graag weten hoe vaak de banner van Company of Kids aangeklikt wordt.

Het idee
Oké, dat is niet zo spannend zou je zeggen. Hang een javascript event handler aan het flash object en laat deze event handler een serverside script aanroepen dat het klik-veld van de betreffende record in de hey_hoevaak_wordt_er_op_mij_geklikt tabel met één ophoogt. Een kind kan de was doen …

Het probleem
Een kind kan de was doen … maar niet heus. In theorie klinkt het bovenstaande dan wel logisch, maar in de praktijk blijkt het gemakkelijker gezegd dan gedaan. Want hoewel het in Firefox niet zo’n probleem is om bij een klik op de flash banner de klikteller te updaten, werken Internet Explorer versies 6 en 7 niet mee. En aangezien het overgrote deel van de bezoekers langskomt met deze browsers en versies, MOET een en ander werken onder Internet Explorer 6+. Het probleem lijkt hem erin te zitten dat het flashfilmpje zich in de documentstructuur op de bovenste laag bevindt en derhalve het onclick event van het javascript onderschept. De banner voorzien van de wmode = transparent parameter (geopperd op de Adobe website) biedt evenmin uitkomst. Grrr. Op internet is weliswaar voldoende naslagwerk te vinden over het probleem van de layering van swf objecten in een htmlbestand, maar voor mijn specifieke situatie heb ik geen oplossing gevonden.

De oplossing
Ik kan slecht tegen mijn verlies. Dus heb ik net zolang lopen klooien totdat ik een workaround gevonden had. Toegegeven, ik betwijfel of mijn uiteindelijke fix voor het bovenstaande probleem de schoonheidsprijs verdient, maar hey … het werkt in elk geval wel. Oké, wat heb ik dan gedaan? Door te rommelen met absolute positionering en de z-index, en daarnaast vals te spelen met de in de flashbanner geprogrammeerde doorklik naar de Company of Kids website (lees: de doorklik wordt gedaan door het javascript in plaats van de flash banner) is het gelukt om een tracking van het aantal kliks op de banner te realiseren.

Ik heb een div gebruikt en daarin een absoluut gepositioneerde afbeelding (een transparante gif) geplaatst. Daaronder laad ik een nog een div in, waarin tenslotte de flashbanner zich bevindt. Aan de transparante gif heb ik een onclick event opgehangen, die zorgt voor (1) het verhogen van de teller en (2) het laden van de achterliggende website.

De code
1. html en javascript

<div id="container-banner-cok">
<img id="anker" src="/img/transparant-468x60.gif" />
<div id="flashbanner">
<script type="text/javascript">
// <![CDATA[
var fo = new FlashObject("pad naar flash bestand", "", "468", "60", "6", "#f0f0f0", true);
fo.addParam("wmode", "transparent");
fo.write("flashbanner");
var container = document.getElementById("container-banner-cok");
var anker = document.getElementById("anker");
anker.style.cursor = "pointer";
anker.onclick = function () { updateBannerClicks('cok022007'); window.open('url die geopende moet worden'); }
// ]]>
</script>
</div>
</div>

2. stijlblad dingen

#container-banner-cok { width: 468px; height: 60px; display: block; background: #fff; margin: 10px 10px 10px 20px; padding: 0; z-index: 100; text-align: left; }
#anker { position:absolute; display: block; border: none; z-index: 99; width: 468px; height: 60px; margin: 0; padding: 0; }
#flashbanner { position: absolute; display: block; width: 468px; height: 60px; z-index: 0; padding: 0; margin: 0; }

Oh ja, in het bovenstaande geval heb ik gebruik gemaakt van Geoff Sterns’ flash object voor het inladen van de Flash banner.

Geschreven door HansR
Er is nog niet gereageerd op deze tekst. Laat een reactie achter.
Geplaatst in Flash · javascript
Getagged als banner, javascript