Despat meertaligheid – The trilogy

Ook vandaag heb ik verder gewerkt aan het ontwikkelen van de meertaligheids functionaliteit in de despat applicatie.

De eerste uren van de dag heb ik mij vooral bezig gehouden met het afwerken van de code om pagina’s in verschillende talen te bekijken zoals ik gisteren reeds besproken heb. >.

TinyMCE
Eens de artikels juist werden weergegeven kon ik beginnen aan de eigenlijke interface om de vertaling op uit te voeren. Deze zou per tekstblok bestaan uit 2 tekstvelden (1 met de originele tekst en 1 met de vertaalde tekst). Deze tekstvelden worden dan omgezet naar WYSIWYG-editors met behulp van TinyMCE. TinyMCE is een opensource javascript project dat dus textareas omzet naar volwaardige editors. In de configuratie-file kan worden ingesteld welke knoppen er moeten worden weergegeven.
In onderstaande afbeelding zie je een tinyMCE editor met alle mogelijke functieknoppen.

Readonly
Maar al snel bleek dat er op het eerste tekstveld (met de originele tekst) geen TinyMCE editor nodig was, omdat dit veld toch onveranderd moest blijven. Normaal gezien zit er in de TinyMCE applicatie een plugin die ervoor zorgt dat de inhoud van een tekstveld niet kan gewijzigd worden. Maar deze bleek niet te werken. Na een beetje zoekwerk bleek dat er nog vele anderen met die probleem kampten, dus ben ik op zoek gegaan naar een andere oplossing.

De oplossing leek vrij simpel te zijn. Niels (de persoon die verantwoordelijk is voor het schrijven van de xhtml en css code van de design patterns) kwam met het voorstel om de originele tekst in een div te steken met “overflow: auto”. Dit zou ervoor zorgen dat als de inhoud van de div groter wordt dan de opgegeven hoogte, zal er een scrollbar getoond worden.

Eens de template van deze pagina voltooid was kon ik terug beginnen met programmeren. Als een gebruiker op de Translate link klikt van een pagina krijgt hij nu dus een formulier te zien waarop hij zijn vertaling kan uitvoeren, en waar hij kan kiezen naar welke taal de tekst vertaald wordt.

Despat meertaligheid – The sequel

Een paar dagen geleden heb ik het reeds gehad over deze opdracht. Deze bestaat erin de huidige despat applicatie zodanig aan te passen dat het meerdere talen ondersteunt.
Aangezien heel de despat applicatie werkt op een uitgebreid versie-beheer systeem was dit niet zo simpel als je zou denken.

Versie-beheer
Aangezien een artikel in verschillende versies kan bestaan moet je ervoor zorgen dat aan elke versie van het artikel de juiste versie van de vertaling is gekoppeld, je kan niet zomaar Engelse artikels gaan vertalen zonder er iets van samenhang aan vast hangen. Zo zou het kunnen gebeuren dat een gebruiker een verouderde tekst in het Nederlands leest terwijl er een nieuwere versie beschikbaar is in het Engels.

Outdated
Het systeem moest er dus voor zorgen dat er werd gecontroleerd of er een nieuwe versie is van de andere talen waaraan de versie in de huidige taal is gekoppeld. Dit is misschien moeilijk te snappen dus ik zal het even uitleggen met een voorbeeld.
Stel je hebt volgende situatie:

Er is een nieuwe versie gemaakt van een artikel in het Engels (v0.1rc10), deze wordt vertaald naar het Nederlands (v0.1rc5 / de versie nummers zijn taalafhankelijk).
Als nu de Engelse versie van het artikel wordt aangepast en dus wordt geüpgrade naar v0.1.rc11, wil dit dus zeggen dat de Nederlandse versie verouderd kan zijn.
Het systeem moet de gebruiker dus waarschuwen dat de Nederlandse versie die hij aan het bekijken is eventueel verouderd kan zijn en dat, als hij up-to-date informatie wil, hij het Engelse artikel zal moeten checken.

Alternatieven
Natuurlijk kan het ook voorkomen dat een artikel gewoon nog niet vertaald is, ook hier moet de gebruiker op de hoogte gesteld worden van dit probleem, en een lijst voorgeschoteld krijgen met eventueel alternatieve versies (in andere talen) van het artikel dat hij wil raadplegen.

Ook heb ik al de eerste hand gelegd aan de template voor de pagina om de artikels te vertalen. Voor morgen staat het afwerken van die template op het menu en het schrijven van de code om de eigenlijke vertaling op te slaan.

Despat meertaligheid

Deze morgend luidde mijn wekker alweer het begin van een nieuwe werkdag in, maar deze begon al niet zo positief. ‘k hoorde in de verte op de radio iets van een treinstaking. Ik vreesde het ergste, maar kon al snel gerust ademhalen toen ik hoorde dat het in Wallonië was.
Had ik nu naar school gemoeten stonden talloze vertragingen mij te wachten, maar gelukkig is dit niet zo… De rit naar Antwerpen-Centraal verliep vlot (buiten dan een paar haltes tussen door) en zonder problemen, ben met slechts paar minuten vertraging aangekomen. Eens in Antwerpen aangekomen rest mij nog een korte metrorit van 1 halte en dan zit mijn reis erop.

Despat meertaligheid
Ik had een paar dagen geleden (14 februari blijkbaar) deze opdracht al even aangehaald. De bedoeling is dus dat we de design patterns die op de despat applicatie zijn te vinden beschikbaar gaan maken in verschillende talen. Ik heb een sterk vereenvoudigde weergave bijgevoegd van hoe de database eruit ziet voor een artikel (in werkelijkheid is er veel meer info beschikbaar dan description en technicalinfo).

Zoals je ziet hangen er aan een artikel X aantal versies vast, dit hangt er vanaf hoe vaak het artikel is aangepast. Telkens het artikel wordt aangepast, wordt er een nieuwe record aangemaakt in version en in de tabellen waar er een verandering is gebeurd (description, technicalinfo, …). In de nieuwe record in version wordt dan gelinkt naar de nieuwe records van description, ….
Dit systeem zorgt ervoor dat er een perfect versie beheer is. Als er nu bijvoorbeeld een verkeerde Edit gedaan wordt, is het mogelijk om het artikel te herstellen naar de versie voor de Edit.

Voor de meertaligheid geldt dus hetzelfde systeem, zo zal er per taal een nieuwe record worden aangemaakt in version. Als men de pagina bezoekt kan men een standaard taal kiezen. Indien mogelijk worden de artikels weergegeven in deze taal. Maar indien dit niet mogelijk is, wordt de recentste Engelse versie van het artikel getoond, samen met een waarschuwing voor de gebruiker dat het artikel niet beschikbaar is in zijn taal.

Week 3 Dag 1

En bij deze is de derde week van onze stage van start gegaan.

Ook op deze dag heb ik mij bezig gehouden met de Visio to xHTML converter.
Vrijdag is deze applicatie gepresenteerd geweest door David, en er waren een paar dingen die moesten aangepast worden. Deze aanpassingen heb ‘k vandaag toegepast.

Design patterns per pagina weer geven
In de eerste versie van de applicatie werden alle design patterns gewoon samen geteld, en werd er nog niet echt een onderscheid gemaakt tussen de verschillende pagina’s. Maar blijkbaar was dit wel de bedoeling. Hiervoor moest ik dus de VB.Net applicatie herschrijven opdat deze de pagina titels mee zou doorsturen. Ook de PHP applicatie moest dus worden aangepast.

Design patterns van backpages moeten worden bijgeteld
Opdat je dit zou begrijpen zal ik even kort aanhalen wat er bedoeld wordt met deze backpages en hoe Visio deze gebruikt.
Om het concept een beetje duidelijk te maken ga ik een programma gebruiken waar we allemaal wel een beetje bekend mee zijn: Photoshop. Je kan de backpages in Visio vergelijk met Layers in Photoshop. Je kan bepaalde pages bovenop een andere pagina leggen (waardoor die andere pagina een backpage wordt) net zoals je in Photoshop layers boven mekaar kan plaatsen om zo inhoud van een andere layer te laten doorschijnen.

Dit zal bijvoorbeeld gebruikt worden om elementen die op alle pagina’s herhaald worden, te verzamelen op 1 backpage en die dan te gebruiken als backpage voor alle pagina’s, zo zorg je ervoor dat je al die elementen niet telkens op alle pagina’s moet zetten.

Mijn script moest er dus rekening mee houden dat een pagina bepaalde backpages bevat waar dus ook nog elementen op staan die ook op de huidige pagina te zien zijn.

Overzicht Week 2

De 2de week van onze stage zit er ook al op, tijd dus om eens kort samen te vatten wat voor werk ik gedaan heb.
Indien je meer info wenst per dag kan je terecht op de andere posts op deze blog.

Dag 1 (12 februari) <Lees meer>

• Klasses schrijven om XML file te analyseren
• Gemaakte klasses gebruiken om gegevens uit Visio XML file te lezen
• Script schrijven om vereenvoudigde XML-structuur naar een bestand te schrijven

Dag 2 (13 februari) <Lees meer>

• VB.Net project voor Visio XML converteren naar een console applicatie zodanig dat deze kan worden opgestart vanuit Visio met behulp van Macro’s
• Brainstormen over manier om de despat applicatie te exporteren naar 1 lange HTML-file
• Schrijven van script voor HTML-export

Dag 3 (14 februari) <Lees meer>

• Ontwikkelen van een script om alle interne en externe links binnen de despat applicatie weer te geven om te checken op eventueel “dode” links
• Brainstormen rond de mogelijkheid om de despat applicatie meertalig te maken

Dag 4 (15 februari) <Lees meer>

• Verder bouwen op de Visio to xHTML applicatie. Eens de applicatie de XML uit Visio heeft geanalyseerd, moet deze een verbinding maken naar de despat applicatie om zo de code voorbeelden van de gebruikte design patterns op te halen

Dag 5 (16 februari)

• Opkuisen van de code van de Visio to xHTML applicatie
• Paar aanpassingen gemaakt aan deze applicatie op basis van instructies gegeven door David

Week 2 Dag 4

Vandaag was het een vrij drukke dag waarin we moesten werken met een strakke deadline. Het programma dat we vandaag moesten ontwikkelen moest dezelfde avond klaar zijn, omdat dit vrijdag (17 februari) zal gebruikt worden in een presentatie van het despat framework voor een groep van managers.

Visio to VB.Net to xHTML
Het programma dat vandaag moest ontwikkeld worden bouwt voort op de Visio applicatie waarover ik het in vorige posts heb gehad. Om even kort samen te vatten, die bepaalde applicatie leest de XML export van Visio in en vereenvoudigd die naar een vereenvoudigde en meer overzichtelijke XML-structuur.

De uitbreiding die vandaag op het menu stond zou de gegevens in de vereenvoudigde XML-structuur gaan gebruiken om gegevens uit de database te gaan halen. Om even duidelijk te maken wat er exact gebeurt geef ik een overzicht van hoe de vereenvoudigde XML-structuur eruit ziet:

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Document>
<Page PageName="Application framework" BackPage="0">
<Shapes>
<Shape ShapeID="24468010-ac9b-11db-abbd-0800200c9a66" Amount="1"/>
<Shape ShapeID="2446800f-ac9b-11db-abbd-0800200c9a66" Amount="1"/>
</Shapes>
</Page>
</Document>


In de code staat elk Shape-element voor een gebruikte design pattern op een bepaalde pagina. De ShapeID die erbij staat is een uniek ID die gebruikt wordt om de design pattern op te zoeken in de database en de code op te vragen. Wat mijn applicatie dus doet is een lijst maken van alle ID’s die gebruikt worden in het Visio document. Deze lijst wordt dan vervolgens doorgestuurd naar een PHP-pagina op de despat-applicatie. Deze pagina haalt de ID’s binnen via een POST en doet dan de nodige bewerkingen om de gegevens uit de database te halen. Vervolgens wordt dan alle informatie terug gestuurd naar de VB.Net applicatie die daarna de code kan opslaan in een HTML-file. Deze applicatie laat de Webdesigner toe om in Visio de design patterns te kiezen die hij nodig heeft, om dan in 1 keer alle informatie voor die bepaalde design patterns op te vragen. Zo hoeft hij niet alle design patterns gaan op te zoeken. De gegenereerde HTML-pagina is dus enkel puur als referentie voor de webdesigner.

VB comments
Dit is niet echt iets dat met mijn werk te maken heeft, maar het is toch iets dat ik met jullie zou willen delen. In mijn zoektocht naar een goede en duidelijke manier om mijn VB.Net code te documenteren ben ik op een functionaliteit van Visual Studio gestoten.
Als je een bepaalde functie hebt geschreven volstaat het om voor de functie gewoon ''' (3 enkele quotes) en dan zal Visual studio een template aanmaken om je code te documenteren.
Een voorbeeld:

''' <summary>
''' Get a given node based on an attribute
''' </summary>
''' <param name="aNodeName">Name of the node</param>
''' <param name="aName">Name of the attribute</param>
''' <param name="aValue">Value of the attribute</param>
''' <returns>ChildNode matching the parameters</returns>
Public Function GetNodeByAttr(ByVal aNodeName As String, ByVal aName As String, ByVal aValue As String) As ChildNode
Dim aNode As ChildNode
For Each aNode In Me.chContent
If aNode.GetAttribute(aName) = aValue And aNode.Name = aNodeName Then
Return aNode
Exit Function
End If
Next
Return Nothing
End Function

De informatie die je tussen de <Summary> tags zet zal getoond worden als je de functie oproept via de “AutoComplete” functie in Visual Studio.

How many links do you need?

Week 2 dag 3, ik kan echt niet geloven hoe snel de tijd voorbij gaat. Maar des te sneller de tijd voorbij gaat, des te sneller komt de deadline dichterbij.

Met de deadline in zicht wisten we dat er vandaag veel werk moest verzet worden dus zijn zijn we er ’s morgens direct in gevlogen.

Visio
Mijn eerste opdracht bestond erin om de console applicatie waar ik dinsdag aan bezig was verder af te werken. Dit vergde slechts een paar uurtjes werk. Eens deze applicatie voltooid was, zouden we verder kunnen gaan naar de volgende stap in de ontwikkeling van de “Visio-to-xHTML-converter”, vandaag is er een tijdje gebrainstormd over deze stappen en normaal gezien zal ik u donderdag laten weten wat het resultaat hiervan zal worden.

despat link export
In eerste instantie was dit niet een opdracht die mij werd toegewezen, maar omdat ik op die moment nog geen opdracht had, heb ik beslist om Jonas te helpen bij de uitvoering ervan.

De bedoeling was om een extra Export-scriptje te schrijven dat een lijst zou maken van alle links (zowel interne als externe) die gebruikt worden in heel het despat framework. Deze zouden dan per soort (intern en extern) getoond worden met wat extra info bij, zoals de pagina waarop de link staat, de url van de link en de label (wat tussen de <a> tags staat).

We hebben dan ook beslist om een kleinigheid toe te voegen die in onze ogen wel belangrijk was, zijnde een status veld.
Het status veld gaat checken of de link naar een geldige pagina linkt, zo zullen links die naar een artikel verwijzen dat verwijderd is, aangeduid worden als een “dode” link en zullen dus direct in het oog springen (zodat men deze kan corrigeren). Natuurlijk kunnen we dit alleen doen voor interne links, dit doordat een controle uitvoeren op externe links zou betekenen dat we rekening moeten houden met een time-out tijd die onze applicatie serieus zou vertragen.

Eens dit script voltooid was, werd ons duidelijk hoeveel links er zich eigenlijk in heel het despat framework bevinden. Als ik mij niet vergis werden ongeveer 490 interne links gevonden, die door het script in één keer worden gecontroleerd. ‘k denk dat je je wel kan voorstellen dat het manueel checken van al deze links in de desbetreffende artikels redelijk wat tijd zou opslorpen.

despat meertaligheid
Een laatste puntje waar we vandaag al eens over gebrainstormd hebben is het feit dat het despat framework vertaald gaat worden in het Nederlands en het Frans en dat dit natuurlijk ondersteund moet worden in de php applicatie. Het concept staat op papier en moet nu dus nog uitgewerkt worden in code. Eens de code is uitgewerkt zal ik meer uitleg kunnen geven over hoe het meertaligheid-systeem juist werkt.

Bij deze beëindig ik het verslag voor woensdag 14 februari.

Please stay tuned for more…

Progress report

‘t is al een tijdje geleden dat ‘k nog is iets gepost heb, dus het wordt hoog tijd dat ik jullie op de hoogte breng van wat ik de laatste dagen heb uitgevoerd.

De 1ste dag van de week (12 februari)
Op deze dag bestond mijn taak erin om verder te werken aan de .NET applicatie waar ik vrijdag mee aan het sukkelen was. Maar na een verfrissend weekend leek alles mij veel duidelijker dan vrijdag avond (dat zal iedereen wel begrijpen :p).
Tegen de middag slaagde ik erin om de applicatie alle XML vanuit Visio te laten verwerken en deze op te slaan in klasses.

Eens dat dit gebeurd was, moest het script de gegevens uit de XML gaan analyseren. Dit houdt in dat er moest worden waargenomen welke design patterns er in Visio werden gebruikt en waar die zich bevinden.

De 2de dag van de week (13 februari)
In de voormiddag heb ik de .Net applicatie die ik de afgelopen 2 dagen heb ontwikkeld, moeten omzetten naar een console applicatie. Gelukkig vergde dit niet al te veel aanpaswerk.

In de namiddag kregen we de opdracht om een script te schrijven dat de despat library te kunnen exporteren naar 1 lange xHTML file. Deze file zou dan dienen om de despat library te kunnen converteren naar een PDF-bestand.
In het begin was het een lastige opdracht doordat ik de code niet kende en ze soms niet helemaal begreep. Maar na veel zuchten is het uiteindelijk toch gelukt om een beetje een overzicht te krijgen in wat de code juist doet en waar die wat doet.
Eens ik dit overzicht had kon ik beginnen aan het eigenlijke script.

Alhoewel ik goede vooruitgang boekte, was het toch een traag proces. Dit mede doordat de library zo uitgebreid is dat telkens ik het script wou testen, ik een paar minuten moest wachten tot het voltooid was. Tegen het einde van de dag kwam het einde van deze opdracht in zicht en toen ik huiswaarts keerde lag dit reeds achter mij. Het was een productieve dag.

34 bottles of beer on the wall

35 bottles of beer on the wall, take on down, pass it around, 34 bottles of beer on the wall (yep ‘t is weekend :p). Jaja, 5 dagen zijn reeds gepasseerd, dit wil zeggen dat ons nog 34 dagen resten (als ‘k niet verkeerd gerekend heb :p).

Weekend
Ook al was vandaag de laatste dag van de week, het was toch niet mijn favoriete dag. Ik wist dat ‘k vandaag in Visio zou moeten werken, en dit is nu niet bepaald mijn lievelingsprogramma. Je kan je wel voorstellen hoe opgelucht ik was toen ik hoorde dat ik niet echt in Visio moest werken. But there’s the catch, blijkbaar moest ik gaan werken met de XML output van een Visio project. En geloof me, dat is nog veel erger dan werken met visio zelf. De XML-file, door Visio ge-export, die mij werd voorgesteld was maar liefst 7MB groot (1800 lijnen). Probeer daar maar eens een paar bepaalde lijntjes in te zoeken. Heb klein voorbeeld-bestand (200KB) online gezet om aan te tonen hoe een Visio XML eruit ziet. Het voorbeeld is de XML van een databasemodel met 2 tabellen en 1 pijl ertussen. Je kan je dus wel voorstellen dat deze XML enorm groot zal worden voor een hele webpagina.

XML Export
Nu vraag je je misschien af wat het nut is van met de XML export van Visio te werken?
Wel, het programma waar ik nu aan bezig ben werk in nauwe samenwerking met despat. Het Visio project bevat alle patterns die in de despat applicatie aanwezig zijn. Zo kan een gebruiker bijv een gestandaardiseerde (volgens despat normen) Dropdownlist importeren door het gewoon naar zijn plaats te slepen.

HTML Vs XML
Nu zou men om die opgestelde html pagina te exporteren de Visio HTML export kunnen gebruiken, maar bij mijn weten werkt die niet altijd even goed en we weten allemaal hoe goed door software gegenereerde code kan zijn (ref: imageready). Door de export naar XML worden de verwijzingen naar despat mee opgeslagen en kan ik in mijn code dus correcte syntax ophalen uit despat voor de gekozen objecten (dropdownlist, input veld, …). Dit zorgt er dus voor dat er mooie en overzichtelijke code wordt opgesteld. Jonas gebruikte daarstraks een mooie term om het te omschrijven:

“We ontwikkelen in principe een Dreamweaver applicatie onder Visio gebaseerd op de webstandaarden van despat“.

Met andere woorden, er is nog veel werk aan de winkel.

XSLT Vs VB.Net
Gelukkig lieten ze mij de keuze op welk platform ik de applicatie zou gaan programmeren.
Eerst heb ik zitten experimenteren met XSLT, maar aangezien mijn kennis daarvan beperkt is, en die lessen vrij ver in het geheugen zitten, ben ik overgestapt naar een VB.Net applicatie. Dit platform ken ik veel beter (ref: CARS).

Maandag weet ik jullie meer te vertellen over de voortgang van de Visio/XML/VB.Net applicatie.

En nog even een nota, bij weekoverzicht vind je een opsomming van wat ik deze week gedaan heb.

Overzicht Week 1

Dag 1 & 2 (5-6 februari)

• Kennismaking met de collega’s
• Introductie tot despat
• Testen van despat door middel van ze toe te passen op bestaande designs:
  • catherinejacques.com
  • provant.be

Dag 3 (7 februari)

• Documenteren van despat aan de hand van afbeeldingen
• Afbeeldingen in despat applicatie plaatsen

Dag 4 (8 februari)

• Bestuderen van de uitgebreide php code van despat
• Kleine aanpassingen maken aan despat
  • Fixen van sortering van de artikels
  • Fixen van Inschakelen en uitschakelen van een artikel
  • Extra opties aan artikels toevoegen
  • Weergave van Last added/updated/deleted artikels fixen

Dag 5 (9 februari)

• Bestuderen van XML export van uit Visio
• Startup fase van software om de XML export te verwerken

Voor een meer gedetailleerde bespreking per dag of per taak kan u altijd terecht op de “Stage 2007 @ IA” categorie.