Another day

En bij deze zitten we alweer halverwege deze week. De tijd gaat heel snel vooruit.

Export
Ik had gisteren nog een mail ontvangen met een kleine aanpassing die moest gebeuren op de export-functie die ik maandag heb geschreven. Er moest met name een andere Print-CSS op gezet worden. Dit was op een minuutje gefixed en dus kon ik snel aan mijn andere jobs zetten.

Meertaligheid
Ook vandaag ben ik bezig geweest met de meertaligheidsfunctie van de despat-applicatie. Het is een langdurig proces maar het is dan ook een ingewikkelde functionaliteit. De meertaligheid zit in bijna elke interface van de despat ingewerkt. Zo moet je artikels en versies in verschillende talen kunnen beheren.

Het programmeren van de meertaligheid vlot vrij goed, maar in de namiddag heb ik wat tijd gemaakt voor een extensie van de meertaligheid. Een interface die zal weergeven welke artikels er nog naar welke talen moeten vertaald worden.

Debugging

Vandaag was het al bij al nog een rustige dag, we hadden geen echt dringende deadlines en we waren ook niet overladen met werk.

Despat meertaligheid
Mijn eerste actie van de dag was het fixen van een paar bugs in het vertaal-systeem van de despat applictie. Doordat het kleine bugs betrof, was dit werk vrij snel voltooid.
Als een gebruiker (met voldoende rechten) een artikel raadpleegt, zal hij vanboven een link zien verschijnen die hem de mogelijkheid biedt om het artikel te vertalen. Indien de gekozen versie van het artikel reeds vertaald is in alle mogelijke talen, zal de vertaal-link niet getoond worden.

In de vertaal-interface kan de gebruiker dan kiezen naar welke taal hij het artikel zal vertalen. De talen waarvoor reeds en vertaling aanwezig is zullen uit de keuzelijst worden gehaald aangezien het verloren tijd zou zijn om een artikel 2 maal te vertalen in de zelfde taal.

Html export per sectie
Voor de rest van de dag heb ik mij bezig gehouden met het fixen van een aantal kleine bugs in de html export die ik gisteren geschreven heb. Ook had ik een paar aanwijzingen gekregen van Kathy en Marc ivm extra pagina’s en gegevens die nog bij in de export zouden moeten zoals onder andere een startpagina en een sitemap.

Nothing but export

Vandaag kreeg ik de opdracht om de despat van nog maar is een nieuwe exportmogelijkheid te voorzien.

Deze export is gebaseerd op de PDF-export die ik een tijdje geleden heb geschreven. De PDF-export maakt van heel de despat applicatie 1 lange HTML-file. De nieuwe export moet een soortgelijke functionaliteit voorzien, maar dan met 1 lange HTML-file per hoofdonderdeel. De despat applicatie bestaat uit een stuk of 5 hoofdonderdelen die de navigatie vormen. De export gaat dus per onderdeel de actie uitvoeren die bij een PDF-export wordt uitgevoerd.

Het volgende dat in de export moest gebeuren was het vervangen van de links door links naar de statische html dump. De statische html dump is een functionaliteit geschreven door mijn stagepartner en exporteert heel de despat applicatie in een browsable formaat.
Om een voorbeeld te geven: design pattern 1 behoort tot algemene designpattern “Verzameling”. Als je dan vanuit mijn export functie wil linken naar pattern 1, zal je volgende link moeten gebruiken: http://www.mijnsite.be/Verzameling/pattern_1/index.html
Dit moet dus gedaan worden voor alle links in het document.
Sinds een paar dagen heb ik mijn werkplaats uitgebreid met een 20” Widescreen monitor, als je aan het programmeren bent merk je zeker het verschil tov een klein 15inch laptop schermpje.

Something I’d like to share
In de loop van mijn stage heb ik met een deel nieuwe en handige programma’s/plugins/add-ons leren werken. Één daarvan is Firebug. Firebug is een Add-on voor de allombekende browser Firefox.

Firebug is een applicatie die je toe laat om gemakkelijk de html en css code van je web-pagina te controleren op structuur, eventuele tags die niet zijn afgesloten en natuurlijk CSS. Zeker de CSS functionaliteit is handig, zo kan je bijv door op een element te klikken zien welke klasses er toegepast zijn op dit element, en welke eigenschappen worden overschreven door andere.

Bijv: je zet een font-weight: 700; op een h2 tag, maar toch wil hij dit niet doen. Dan kan je in Firebug gaan zien door wat die font-weight wordt overschreven (maw: prioriteiten checken).

Weekoverzicht Week 3

En bij deze is er ook een einde gekomen aan de 3de week van onze stage, we zijn bijna halfweg

Dag 1 (19 februari) <lees meer>
Deze dag heb ik verder gewerkt aan de Visio-to-xhtml applicatie. Naar aanleiding van een paar opmerkingen van David heb ik een paar aanpassingen gemaakt. De volledige bespreking van de aanpassingen vind je bij het dagverslag van 19 februari.

Dag 2 (20 februari) <lees meer>
De 2de dag van de week is het eerste werk verricht met betrekking tot het meertalig maken van de despat applicatie. We hadden hier reeds een brainstorm sessie rond gehad, dus het werd tijd om die voorstellen en ideeën om te zetten in praktijk.

Dag 3-4 (21-22 februari) <lees meer>
Het werk aan de meertaligheid zette zich voort. Ik moest ervoor zorgen dat het voor de gebruiker duidelijk is wanneer een artikel niet beschikbaar is in zijn taal of wanneer het artikel eventueel outdated zou kunnen zijn. Hiervoor werden meldingen ontwikkeld die de gebruiker daarvan op de hoogte stellen:


Ze geven ook een link naar de up-to-date versie van het artikel, of in het geval van het niet beschikbaar zijn in de gekozen taal, zal er een lijst met alternatieve talen getoond worden.

Dag 5 (23 februari) <lees meer>
Ook op deze dag heb ik verder gewerkt aan de meertaligheidsmogelijkheid van de despat applicatie. Voor vandaag stond het ontwikkelen van de vertaalpagina op het menu. Deze bestaat uit een keuzemenu waar de gebruiker de taal van de vertaling kan selecteren en uit een reeks tekstboxen. Elke tekstbox bevat 2 tekstvakken (1 met originele tekst en 1 met de vertaalde tekst) zodat de gebruiker de te vertalen tekst direct kan raadplegen.

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.