eyefordesign

In a piece of code, I had a minor problem with the getElementsByClassName function.

In my piece of code, I had this:

1. // tabsToVis
2. var tabsToVis    = document.getElementsByClassName(”toggleTab”);
3. if(tabsToVis != null) {
4. tabsToVis.each(function(toggleVis) {
5. new E4D.toggleTabs(toggleVis.id, toggleVis.id + “_div”);
6. });
7. }

This gave the error in firebug that the function .each is not a valid function. Because there is nothing wrong about the way prototype is handling things, and I remembered that getElementsByClassName was deprecated, a google search took place.

From the sollutions and articles that I found, this was most interesting and explains this issue about firefox 3 and functions as getElementByClassName.

Today’s issue was to render a webform from the node object. I saw there was enough data known in the node to build the whole form without any extra sql queries.  The node in drupal5 has a property $node->webformcomponents with raw data about every field and fieldset in the form.

Because the drupal_render_form functions requires a formId and the form object, which i could not retrieve in my snippet of code, I had to work with the nodeId  and node object.

Here the snippet of code:

1. $node = node_load($nodeId);
2. $node = webform_view($node);
3. $html.= drupal_render($node->content);

I hope this helps other drupal developers.

Ik ben net gestart met het gebruiken van TortoiseSVN, versie 1.4.8.12137-win32-svn-1.4.6.

Synchroniseren naar een development server is een manier van werken dat ik al een hele tijd wilde uitproberen.  Op mijn nieuw werk krijg ik daarvoor de kans. Nice.

Read this interesting article on internet explorer release IE8

Na een opmerking van iemand dat een bug op een van onze sites stond, begon ik mijn dagelijkse fixing hour.

In het begin dacht dat ik natuurlijk aan javascript, aangezien mozilla firefox weer alles perfect deed en de pagina valideert op css en html. Er zat op die specifieke pagina een reuze flash slideshow dus misschien een foutje bij het aanmaken van het swf-object. Javascript bleek het niet te zijn, maar ergens iets in de html?

Alle zeg, in de html. Ik begon deel per deel in kommentaar te zetten (smarty-template engine , dus geen html output what so ever). Na een tijdje kwam ik op 1 link uit… met een normale href, geen id, normale klasse … normale klasse ik zag “prev” staan en in de link eronder class=”next”. Hierna duurde het niet lang meer voor ik besefte dat next een soort preserved word is voor de internet browser, alle ja browser … .

Even de klassen in volgende en vorige gezet en het was fixed. Een dergelijk probleem gebeurt bij het gebruik van dit : padding: 3em 4em 3em 4em; kon ik ergens op het internet lezen. Nough said! tis fixed en ik ben blij. Als er mensen zijn die dit probleem kennen en er goede documentatie over vinden, dan mag je me dit altijd laten weten.

Eyefordesign bouwde de laatste jaren-maanden aan een gebruiksvriendelijk content management systeem. Met grote blijdschap kan ik melden dat dit systeem voor versie 1 beschikbaar bevonden is.

Dit systeem kan gehuurd worden, maar wordt ook bij een op maat gemaakt pakket geleverd. U kunt het niet kopen, maar wel gebruiken als ontwikkelaar volgens de GPL licensie.

Eyefordesign proudly presents : buro248. Bij schitterende architectuurbeelden hoort een stijlvolle doch eenvoudige sfeersite. Dit is verwezelijkt met behulp van flash omdat de beelden door een lichte vorm van animatie worden bijgestaan.

buro248!

Ik heb vanavond lang zitten zoeken op een eenvoudige methode om al mijn tinyMCE instanties te resetten. Of toch zoiets… als men een plugin koos , bv een contactformulier in het cms paginatie systeem dan werd de pagina content in javascript vervangen zodat de database en dus frontend hiervan wist.
Nu stootte ik op het probleem dat ik na terug kiezen van een normale pagina, dat die plugincontent er natuurlijk nog instond (in de html weliswaar want de plugincontent is html-commentaar).

Ik stootte op rare problemen in verband met de execCommand, bv “replaceContent” gaf de hele tijd een fout bij de getSel functie (recursie probleem).

Na testen van een paar andere zaken zoals InsertContent zag ik dat dit nooit problemen opleverde. Bizar, want waar zit het verschil? Ik probeerde tensotte een command die ik vroeger al eens probeerde, nl “mceSetContent” . Nog raarder, die deed wat het moest doen, namelijk mijn editoren een tekst plaatsen (of leeg) zodat men duidelijk ziet dat dit terug een normale pagina voor hun eigen tekst.
Ik bleef de rare foutmelding krijgen “inst.execCommand is not a function” in firebug. hmm, drie editoren gereset, en drie aanvragen… waarom loopt het dan mis?

Geen idee voorlopig, toch een oplossing: testen of die functie wel een functie is. Maar waarom loopt ie verder als er geen instanties meer over zijn. Nu ja. Hier de oplossing voor dit kleine rare bugje, als het er al eentje is.

for (var n in tinyMCE.instances) {
	var inst = tinyMCE.instances[n];
	if(typeof('inst.execCommand') ==\"function\") {
            inst.execCommand('mceSetContent', false, \"type your text here\");
        }
}

Loose Coupling is een belangrijk gegeven in de OOP wereld. Wat het precies wil zeggen en hoe je het kunt toepassingen, is niet voor iedereen even duidelijk. Daarom probeer ik dit toe te lichten.

Uitgangspunt is het gebruiken van afgebakende stukken code zonder dat de rest van de code dit hoeft te weten. Veel te dikwijls moeten we zogezegd maar een klein stukje aanpassen maar later blijkt dat je in verschillende bestanden bepaalde zaken moet gaan aanpassen. Wanneer een stuk faalt, faalt heel het systeem. Dit is dus op te lossen via loose coupling.

Read the rest of this entry »

Kort samengevat: Alle adobe products werken nu supergoed samen. Om maar een voorbeeld te geven: Je kan nu zonder problemen photoshop bestanden importeren in flash. Een designer kan werken aan een karakterke in illustrator terwijl de developer al kan scripten in flash. Natuurlijk zijn er ook nieuwe filters, functies en andere leutige toolkes bijgekomen waar je hier onder kan over lezen. Flash, dreamweaver en fireworks zijn erbij gekomen, imageready is gone…

2.
Photoshop

Functie auto-align layers: Stel je hebt 2 groepsfotoâ??s van dezelfde groep maar sommige elementen op ene foto zijn toch anders. De 2^de foto is ook wat scheef getrokken. Stel nu dat ik die 2 fotoâ??s wil samen smelten. toolke daarvoor is auto align layers. Die herkent dezelfde elementen in 2 fotoâ??s en aligneert die. De 2 fotoâ??s staan nu perfect boven elkaar en ik kan elementen van de ene foto op de andere plaatsen zonder problemen.

- Magic wand: Nieuwe â??magic wandâ?? die slimmer is. Noemt â??quick selection toolâ??. Veel meer uitleg kan ik niet geven, je moet et gewoon in actie zien

- Smart filters: Filters in cs2 worden toegepast op je laag. Nu kan je smart filters toepassen op een laag die je later nog kan aanpassen. Cs2 kan dat met laagstijlen zoals drop shadow en border, maar niet met een gaussian blur bijvoorbeeld. Nu dus wel

- Video in ps: Je kan video importeren in photoshop, iedere frame retoucheren en herexporteren. De max

- 3d in ps: Je kan U3D bestanden importeren in photoshop en roteren verplaatsen in je compositie. Je kan zelfs texture lagen op het 3d model aanpassen!

- Vanishing point: deze functie zat al in cs2. Gebruik je om bv. Om een logo in perspectief op een muur te plaatsen. Deze functie is een heel stuk beter.

3. Illustrator

- Je kan nu kleurcombinaties (Swatches) groeperen in folders. Die kleurcombinaties pas je dan bv toe op een logo. Met de â??live colorâ?? tool kan je heel snel kleurvarianten maken van dat logo

- Met een tool â??Kulerâ?? kan je zelfs kleurcombinaties downloaden en uploaden. http://kuler.adobe.com/ Deze tool zit in illustrator maar je kan ook surfen naar de link

- Tekenen in illustrator en importeren in flash trekt op niks. Wel nu niet meer Je kan illustrator bestanden importeren in flash zonder problemen. Je kan zelfs al movieclips aanmaken en die een naam geven zodat de developer meteen kan programmeren terwijl de designer nog bezig is. De positieve kanten van tekenen in flash zitten in illustrator en omgekeerd. Je kan nu bv. Ook gummen in illustrator. Iets wat vroeger via een omweg moest gebeuren.

4. Fireworks

- Ik ben zelf nooit grote fan geweest van fireworks maar in de nieuwe versie zitten een paar handige tools die we misschien wel kunnen gebruiken. Je kan bv protoype websites aanmaken. Stel, je hebt een design in photoshop maar het zou wel handig zijn moest de klant al kunnen â??navigerenâ?? door het design of op bepaalde elementen klikken. In fireworks zit een â??pagesâ?? systeem. Daar kan je .psd bestanden in plaatsen en bepaalde hotspots definieren waar je dan op kunt klikken. Die exporteer je dan naar html en plaats je op de gent.wax ofzo. De html code zelf kunnen we natuurlijk niet gebruiken maar we kunnen wel heel snel een preview geven van het design waarin je kan navigeren.

5. Dreamweaver

- Er zijn heel wat functies bijgekomen voor iemand die websites maakt in design-view. Daar hebben we heel veel van gezien hoe je bijvoorbeeld photoshop bestanden kan importeren. Wij werken natuurlijk liever in code view

- Nu zit er naar het schijnt een goeie â??browser compatibility checkâ?? die css bugs opspoort in je css-bestand(en) en daarvoor oplossingen geeft. Noemt â??css advisor betaâ??. Eric Meyer en nog enkele bekende mensen in de css wereld hebben er aan meegewerkt. Zo slecht kan het niet zijn…

- Niet zo speciaal maar wel handig is een functie om heel snel inline styles te kopieren naar externe css bestanden.

- Er zit nu ook een ajax framework in (Spry framework) waar je heel snel effectjes kan toevoegen aan je html pagina.

6. Flash

- Actionscript 3.0 support natuurlijk

- Nieuwe tools om te tekenen (dank u illustrator)

- Photoshop bestanden importeren in flash! Spaart ons zeker ne halven dag uit om een website design in flash te krijgen.

- Flash kent nu photoshop filters (natuurlijk niet allemaal… heb ik gisteren getest) maar een dropshadow vanuit photoshop kan je nog altijd aanpassen in flash. Een tekstveld uit photoshop blijft een tekstveld in flash

- Zoals ik daarnet al zei kun je al beslissen in illustrator welk element een movieclip zal zijn en hoe die zal noemen.

- Je kan animatie op de tijdslijn snel converteren naar as3 code animatie ( heeeel grote lelijke blokken code wel :-s )

- Flash video kan nu subtitles bevatten. Koppeling met een xml bestand

- Custom skins maken voor video player of andere flash componenten gaat nu veel gemaklijker

7. After Effects

- Remember â??vanishing pointâ?? in photoshop? Import photoshop bestand in after effects en animeer 2d graphics in 3d

- Pin points functie in after effects. Je kan een statische foto van een manneke animeren in 5 minuten. Beetje zoals een rag-doll

- Motion sketch. Bestond al in vorige versie maar ze stoefen der blijkbaar graag mee…

- Export profielen om video te converteren naar you tube, google video, of ipod formaat.

8. Soundbooth

- Simpel programma voor iemand die niet veel kent van audio. Gebruik je om loopkes te maken, ruis weg te filteren en dergelijke. Kan heel nuttig zijn.

9. Adobe media player

- Adobe komt er ook aan met zijn eigen media player. Internet television, shows en films downloaden en lokaal bekijken. Active branding van producten. Stel, je kijkt naar temptation island en ge ziet gringo: â??tuc to the hand!â?? rechts onderaan verschijnt een icoontje: koop nu een gringo t-shirt of zo iets… er verschijnt een flash-laag bovenop de video waar je de t-shirt kan bestellen…

- De speler speelt ook standaard flv bestanden af natuurlijk

- De player mag je verwachten eind dit jaar.

Website optimalisatie is een noodzakelijk kwaad geworden. Niet abnormaal natuurlijk in de wetenschap dat iedereen zijn plekje op het internet wilt en dan nog eens populariteit hoog in het vaandel draagt. In dit kort stukje leer je op wat je moet letten om de start van uw SEO-campagne in gang te plooien.
Read the rest of this entry »

Vanaf hier mijn draft’s opmerkingen ivm het cms, welke cms, ja idd “het cms!”

De config

In de config zou een objCMSSettings moeten geinstantieerd kunnen worden, opgebouwd met componenten uit de database en/of bovenaan predefined constants en/of hard-coded componenten vooraf gedefinieerd in het object. Veranderlijke variabelen zoals de plaats op de server worden misschien beter als predefined constanten aangeduid, eenduidig voor die site. De hoofdbedoeling moet zijn om db-toegang te krijgen in het object, door de database settings al te hebben gedefinieerd, en het object zo sterk te maken dat je enkel via cms of phpmyadmin in de settings moet zitten. Dus niet in de classe CMSSettings.

… ik start wel met settings gedefinieerd in de index, de cms index en de config zelf. Later probeer ik hiervoor dat Settings object te maken waarvan de CMSSettings alle eigenschappen zal overerven en cms specifieke bijmaken.

De settings and plugins

De settings moeten dingen kunnen aangeven, die soms te hardcoded gebeuren, door gebrek aan tijd en ruimte. Een belangrijke voorbeelden hiervan die kunen leiden tot gemak in de cms site opbouw:

• Er kan een array van taal extensies gebruikt worden, die aangeven over zowel de frontsite als de backend welke taalkeuzes moeten getoond worden, welke de huidige is, op welke talen er moet gevalideerd worden in het cms, enz … (again al dan niet predefined)
• Hoeveel nieuwsberichten worden op de home pagina getoond, waarbij bij 0 het complete nieuwsblok weggelaten wordt uit de logische code?

De modules

De active modules zijn het enige wat telt. Deze zouden geset moeten kunnen worden in de config. Set je geen array met modules die je voor deze site wilt gebruiken, dan zal het systeem de normale flow nemen waarbij ie gaat kijken in de modules directories op zoek naar aanwezige modules. Maw zijn alle files aanwezig in een gevonden module dir, dan worden de init settings zo gebruikt.

Deze aanpassingen moeten zichtbaar zijn in front en backend, en zelfs het frontend menu moet hiervan weet hebben.

Ik zou een eeuwige discussie kunnen voeren met collega’s in verband met wat zijn modules en hoe implementeer je ze frontend-backend?� Daarom even hieronder wat we weten:

• er moet een link aanwezig zijn op de frontend die toegang geeft tot deze module. bijvoorbeeld ga naar gallerij, nieuwsarchief, blog, enz …
• “Nice to have” als je deze link kan implementeren in de navigatie van de pagina’s.� en zelfs met volgorde van weergave binnen het menu
• � in het cms moet je deze module helemaal “loose” van alles kunnen beheren.
• sommige modules moeten in een vorm op de frontend kunnen getoond worden, zelfs homepagina. (bv 2 laatste gallerij pics die doorlinken, of het klassie 3 readmore nieuwsberichten.

Conclusie bij mij hier is toch, neem puntje 2 weg en je kan deze modules compleet los van het webpaginatie systeem zien. Op de frontend zijn er manieren genoeg zo blijkt om 1 groot navigatie menu te maken met pagina’s en modules (plaatsing van de links wordt meestal vastgelegd door de klant).

tot zover ivm modules

De code

De routing verloopt best via een consistent mechanisme, vooral binnen een groter team. Hiermee bedoel ik het systeem die je toepast om een uiteindelijke pagina opvraag via code weg te leiden naar de logische code en tot het uiteindelijke template resultaat. Werk je nu met een name slug, met pagina id’s, datums of nog andere routings, de conventie is de echte tijdswinner.

Probeer zoveel mogelijk met objecten te werken. Een voorbeeld vanuit het idee van mijn recentste twee dagen. Maak een classe gallery die precies die publieke methoden bevat om zowel front als backend te sturen. Het extra voordeel hierbij dat je loose coupling kunt toepassen zoals een superclasse schrijven die meer functionaliteit biedt dan de vorige. In plaats van direct het vorige werkende object uit te breiden. (noteer de classe er desnoods onder). Zo hoef je soms ook niet direct een plugin te schrijven voor “this special needs ones”. Loose coupling en Inheritance zijn tenslotte “de begrippen” uit de wereld van het object geörienteerd programmeren. Het kost iets meer tijd, maar een parent van een blauwdruk schrijven niet. Laatste tip hierbij is, nu ik toch het woord blauwdruk vernoem, gebruik dan een interface die je kunt implementeren.

06 juni 2007

Ik ben nu in de fase dat ik een page_controller classe heb, die gebruik maakt van de page classe, de plugin classe en een listeners classe. Dit ziet er veel belovend uit en terwijl ik er nog niet aan toe ben, bemerk ik nu plots een paar zaken die ik kan en moet implementeren:

het cms moet kunnen geconfigureerd worden zoals een cms-taal. Dit kan verwezelijkt worden door een simpel brug-patroon van verschillende routes tot includes.

Het cms moet self-explicatory zijn. Desnoods tooltips maar liefst gewoon een tab die je documentation noemt. met submodules waaronder alvast update gegevens.

Er moeten ini settings zijn waardoor je dus talen aangeeft, welke plugins je wil gebruiken, welke de default taal is, front en back end.

It really would be nice als de plugins beluisterd door de pageController enkel getoond en gebruikt worden als de daartoe beschikbare velden, tabellen aanwezigzijn in de database. Let the objects do the dirty work by clean lean code.

Menhir is a webdesign company with eye for detail en grafix.  We follow the new development standards as we continue on reading and studying the internet.

We try to give website visitors a easy-go feeling by means of great usability and “Top” navigations.  For all content management we use our PHP5-framework “Onegana” to give you the ability to upgrade your website.

Menhir can build most webapplications. With a grafic artist and designer, a animation specialist and a backend programmer, we are strong in the field. If you are interested to have a website of your own, visit our website www.menhir.be .