Teksti-TV-editorin kehittäminen moderneilla web-teknologioilla

Abstract

Insinöörityön tarkoituksena oli toteuttaa nykyaikainen selainpohjainen versio Teksti-TV-editorista. Sovelluksella oli tarkoitus korvata vanha Java-pohjainen käyttöliittymä. Vanhan Teksti-TV-editorin ominaisuudet kopioitiin uuteen versioon siten, että käytettävyys pysyi samana. Joiltakin osin editorin käytettävyyttä kehitettiin paremmaksi. Tavoitteena oli, että uusi editori mukautuisi näytön ruudun koon mukaan ja toimisi myös mobiililaitteilla.

Työssä esiteltiin käytetyt Javascript-kirjastot ja menetelmät. Osuudessa selvitettiin Bootstrap-, Backbone- ja RequireJS-kirjastojen käyttäminen osana selainpohjaista sovellusta. Tämän lisäksi osuudessa esiteltiin npm- ja bower-paketinhallintajärjestelmät sekä HTML5 Canvasin toiminta ja käyttäminen. Myös sovelluksen rakenne yleisellä tasolla esiteltiin. Käytettyjen teknologioiden esittelyn ohessa myös kerrottiin, miksi kyseiset teknologiat valittiin osaksi insinöörityön toteutusta. Osuuden lopuksi esiteltiin projektin kehitysversion kokoaminen tuotantoversioksi RequireJS- ja Gulp-kirjastoja käyttäen.

Työn lopuksi käytiin laajasti läpi Teksti-TV-editorin toteutuksessa esiin tulleita asioita ja ongelmia. Editorin käyttöliittymän responsiivisuus Bootstrap-kirjastoa käyttäen, skaalautuminen sekä mukautuminen kosketusnäyttöön esiteltiin. Osuudessa esiteltiin myös merkkitoimintoja ja merkkien vierittämistä ja rivittämistä.

The purpose of this thesis was to develop a modern web-based version of a Teletext editor. The new editor was meant to replace a Java-based legacy user interface. The features of the legacy editor were copied to the new version, so that the old user experience could be maintained as closely as possible to the original. In some cases the editor’s functionality was improved. One objective was that the editor would be responsive and would thus also work with touch devices.

The usage of the Bootstrap, Backbone and RequireJS Javascript libraries in web-based development is detailed in the study. The npm and bower package managers are explained, as is the usage and functioning of the HTML5 Canvas. The reasons why the aforementioned technologies were chosen and the structure of the application are also explained. The study also details how a development version of the application is built into a package ready for production.

Finally, this thesis reviews many of the issues and problems encountered during development. The editor’s responsiveness, scaling and touch features are explained, as are the various character functions and the character and line wrap features.