Javascript – Sjoerd van der Hoorn

DWH

Data Warehouse, de generieke term voor een applicatie die dient als database voor andere applicaties, zodat mensen in managementfuncties in één oogopslag kunnen zien hoe het bedrijf er als geheel voor staat. Meest van deze DWH oplossingen zijn vanwege de complexiteit haast onmogelijk te implementeren, en als dat toch wordt gedaan loopt het vaak uit op een mislukking.

Met een avondje brainstormen kwam ik op het idee het eens om te draaien. Wat als er een DWH applicatie is welke alleen een frontend is, waarna voor elke applicatie die data moet leveren een kleine plugin geschreven kan worden door middel van standaard protocollen? Dit kan gedaan worden door de ontwikkelaars van de externe applicatie, zonder dat er ook maar enige kennis van het DWH nodig is. Het beheren kan via een simpele en eenduidige webinterface. Mijn DWK kan daarna via verschillende connectoren verbinding maken met de externe databases en deze data real time weergeven. Afhankelijk van iemand zijn positie in een organisatie, kan meer of minder informatie vrijgegeven worden.Â Inzoomen op de data kan ook door simpelweg te klikken op wat voor jou relevant is.

Kleverrr

Afgeronde projecten, Algemeen, Ideeën, Javascript, PHP, Programmeren

Voor de verandering eens een spelletje. Kleverrr is een website waarop je jezelf kunt testen op verschillende onderwerpen.

Geef aan welke onderwerpen je interesseren en je krijgt de ene na de andere vraag op je afgevuurd. Antwoord goed? Je kan dan gelijk door met de volgende. Bij het verkeerde antwoord krijg je te zien wat het antwoord wel moet zijn. Bij elk onderwerp zit een eigen kleurenthema met bijpassende achtergrond, het is dus afwisselend en spannend genoeg om te doen. Speel het elke dag en je merkt dat je kennis met stappen vooruit schiet.

JS-VDS

Javascript, Programmeren, Visual Dialogscript

Grenzen tussen webapplicaties en normale computerapplicaties vervagen. Hierdoor is het ook nodig om de belevingswijze van applicaties aan te passen. Echter, soms is het toch handig om webapplicaties te kunnen gebruiken alsof het programma’s zijn die op de computer zelf staan. Normale websites bestaan vaak uit PHP en enkele regels Javascript om de interactie tussen de browser en de server mogelijk te maken.

Veel programmeertalen zouden ontoereikend zijn om op het internet gebruikt te kunnen worden. Hiervoor zijn ze te ingewikkeld of missen ze juist essentiële dingen. Visual Dialogscript daarintegen is een programmeertaal waarbij met enkele regels code al complete, complexe programma’s gemaakt kunnen worden. Hierom heb ik besloten om in Javascript een interpreter te maken die Visual Dialogscript code uit kan voeren. Met deze combinatie is het nu een kwestie van enkele minuten om een complete webapplicatie te bouwen die niet onder doet aan de look-and-feel van normale programma’s op de computer. Een ander groot voordeel is dat de applicaties cross-platform zijn; ze werken dus op elk type computer precies hetzelfde. Dit stelt programmeurs dus in staat om de klant precies zo te bedienen als dat ze gewend zijn.

jsImageGrid

Javascript, Programmeren

Sinds het begin der tijden is er weinig veranderd aan het begrip “fotoboek”. Vroeger plakte men foto’s in een echt boek, schreef er wat tekst bij om deze boeken daarna tot in het einde der tijden te laten verstoffen in een kast. Met de komst van de digitalisering is er niet veel veranderd. Foto’s worden geupload op een site, voorzien van commentaar en blijven daarna wachten tot iemand ze inkijkt. Zolang niemand het desbetreffende fotoboek opent, zal ook niemand de foto’s zien.

Hier heb ik verandering in willen brengen. Ik heb een “image grid” gemaakt waarin foto’s ingeladen kunnen worden, samen met commentaar en overige informatie. Door het intypen van zoekwoorden kan er gefilterd worden wat er op dat moment te zien is. Na het intypen van “rood” worden bijvoorbeeld alle foto’s die iets met de kleur rood te maken hebben getoond. Al typ je “bloem” krijg je alle bloemen te zien. Combinaties zijn natuurlijk ook mogelijk, “rode bloemen” laat alle foto’s van rode bloemen zien. Daarnaast kunnen ook nog filters geplaatst worden, om bijvoorbeeld alleen foto’s uit een bepaald jaar te tonen.

Na het intypen van steekwoorden of zelfs al enkele letters, wordt er op het scherm dynamisch een selectie gemaakt van alle foto’s die iets met deze woorden te maken hebben. Wat er niet mee te maken heeft, verdwijnt uit beeld, wat er wel mee te maken heeft schuift mooi op zijn plaats. Alles is mooi geanimeerd. Op deze manier kan je dus altijd precies de foto’s zien die je wilt zien en zijn fotoboeken niet meer zo statisch als vroeger, maar één dynamisch geheel.

NetTV

Afgeronde projecten, Algemeen, Javascript, Programmeren, Thuis, Visual Dialogscript

Steeds vaker zijn televisieprogramma’s live te volgen op internet. Sommige internetproviders broadcasten zelfs hun hele zenderaanbod live. Omdat mijn provider dat ook doet en ik graag TV kijk tijdens het computeren ben ik dus in het “IPTV” gebeuren gerold. Na een tijdje gewoon met Windows Media Player naar de streams gekeken te hebben, begon het me steeds meer te irriteren dat je WMP niet boven andere vensters kunt plaatsen zonder dat die steeds verdwijnt. Ook was het niet mogelijk om een lijst met alle TV zenders te maken.

Van het één kwam het ander, en zo maakte ik dus mijn eigen IPTV speler genaamd NetTV. Standaard blijft het programma boven alle andere geopende vensters staan, krijg je netjes te zien hoe ver de zender die je wilt bekijken is met bufferen (vooruitladen) en kan je makkelijk wisselen tussen zenders door de zenderlijst op te vragen en gewoon aan te klikken wat je wilt zien. Ook even snel zien wát er nu precies bezig is op TV is simpel, er is namelijk ook een knopje waarmee je zó naar de website van het TV station dat op dat moment aan staat kunt gaan.

WYSIWYG

Javascript, Programmeren

Op internet zijn al veel zogenaamde WYSIWYG -What You See Is What You Get- tekstverwerkers te vinden. De meeste werken op het principe dat de gebruiker zelf een lettertype, lettergrootte, kleur en overige opmaak mag kiezen. Voor persoonlijke websites en brieven is dit geen punt, want wie heeft er nu een standaard lay-out nodig voor een brief aan zijn of haar oma? Voor bedrijven is het echter een doorn in het oog. Een bedrijf wil namelijk als eenheid naar buiten treden, niet alsof er een stel amateurs werkt.

Met mijn WYSIWYG tekstverwerker kan dit eindelijk. Het maakt een einde aan de wildgroei van editors die steeds maar meer en meer functies krijgen die alleen maar misbruikt worden of waarvan de gebruiker überhaupt niet wat ze doen. Het idee is simpel; laat één persoon een opmaaksjabloon opstellen en gebruik deze hierna voor iedere gebruiker. De gebruikers kunnen tekst per tekstvak invoeren en per tekstvak hier een opmaak aan toewijzen. Daarnaast kan het opmaaksjabloon ten alle tijden worden aangepast, waarna alle documenten die ermee gemaakt zijn óók aangepast zullen worden.

Tijdens het bewerken van de tekst is er steeds één alinea de actieve alinea. Door middel van toetscombinaties of door het klikken op het scherm kan de alinea omhoog en omlaag verplaatst worden of kan een andere alinea geselecteerd worden. Alinea’s invoegen en verwijderen gaat met hetzelfde gemak. Zodra de tekst in een alinea is ingevoerd, kan door te klikken op de opmaakknop het opmaakprofiel voor die alinea gekozen worden, zoals ‘koptekst 1’, ‘koptekst 2’, ‘platte tekst’, ‘citaat’, enzovoorts.

vSchool

Javascript, PHP, Programmeren, School

vSchool is een revolutionair product dat leerlingen in staat stelt om zowel thuis als op school aan projecten te werken, huiswerk te maken, bestanden uit te wisselen en te vergaderen via internet. Op deze manier kan zo goed mogelijk met moderne techniek omgegaan worden in het lesprogramma.

Zo, dat is de officiële inleiding van vSchool. vSchool is een op javascript en PHP gebaseerd raamwerk om applicaties op te draaien in het onderwijs. Omdat het voor veel scholen veel te duur is om elke 3 jaar nieuwe computers, besturingssystemen en software te kopen is vSchool als dé oplossing voor deze problemen ontwikkelt. vSchool draait op allerhande computers, van Pentium I tot en met Pentium IV.

De grootste tekortkoming van huidige interactieve lesondersteunende ICT middelen is dat altijd voor elke aparte actie een aparte pagina geladen moet worden. Het is dus haast onmogelijk om tegelijk in een virtueel boek te kijken én antwoorden ergens te noteren. vSchool lost dit op door multitasking ondersteuning en het werken met vensters. Gebruikers kunnen meerdere verschillende online applicaties naast elkaar draaien, snel wisselen tussen de applicaties en ze ook om beurten weer afsluiten als ze niet nodig zijn.

Zoals gezegd is vSchool compleet gericht op het onderwijs. Zo zijn de gebruikers standaard opgedeeld in klassen en projectgroepen. Daarnaast is er standaard een chatfunctie aanwezig zodat leerlingen (ook al zijn ze niet fysiek bij elkaar) toch kunnen samenwerken. vSchool is gemaakt door middel van javascript, PHP en HTML. Om data heen en weer te kunnen zenden tussen de server en de browser van de gebruiker, wordt er gebruik gemaakt van de Ajax-methode. Op deze wijze kan er een dynamische verbinding opgezet worden zonder dat de complete pagina herladen hoeft te worden. Vensters kunnen hierdoor onafhankelijk van elkaar werken.

Priki

Javascript, PHP, Programmeren

Priki, een samentrekking tussen ‘proxy’ en ‘wiki’. Priki is een systeem waarbij er bij de sites die je bezoekt, automatisch woorden worden onderstreept. Ga je met je muis over die woorden heen, dan krijg je informatie over wat het woord precies inhoud.

Leuk en aardig, dat je met Priki snel de betekenis van woorden kunt achterhalen zal je denken. Maar dat is dan ook nog niet alles. Met Priki kan je ook heel snel van site naar site hoppen terwijl je specifiek naar een onderwerp zoekt. Zoek je bijvoorbeeld eerst op het woord ‘Nederland’ en je klikt dan op de onderstreepte woorden ‘Koningin Beatrix’, krijg je info te zien over Beatrix haar ambt. Klik je daarna op die pagina op het onderstreepte woord ‘geschiedenis’, krijg je netjes een overzichtje met de geschiedenis van het koningshuis.

Als je een pagina wilt openen, gaat Priki met een PHP script de betreffende pagina downloaden, zet tags bij relevante woorden en stuurt de aangepaste pagina naar de browser van de gebruiker. Een stuk Javascript code op de pagina veranderd alle links zodat ze gebruik maken van de Priki engine, onderstreept de woorden die bij de tags staan en zorgt voor de popup omschrijvingen van woorden. Klik je op een onderstreepte link, dan kom je gelijk op een nieuwe pagina die zowel de oude zoekwoorden als het net aangeklikte woord bevat. Zoeken door te surfen dus!

Online Office

Javascript, PHP, Programmeren

Overal en altijd je bestanden bij je hebben. Tegenwoordig steek je gewoon een USB stick in je broekzak, maar wat als je die vergeet? Dan heb je in één klap helemaal niets meer. En uploaden op een FTP server is ook niet handig, want door allerlei proxyservers kan je er dan soms geeneens meer bij komen vanaf school of werk.

Nadat ik een keer een “WebOffice” heb gezien heb ik besloten er zelf een te maken die makkelijker in gebruik is. Niet meer knoeien met allerlei checkboxen die je moet aanvinken en buttons die je moet aanklikken voor je bestanden kunt verplaatsen of aanpassen, maar gewoon net zoals in Windows met linker en rechter muisklikken. Hieruit is Online Office ontstaan. Je kan simpel je bestanden uploaden, waarna je ze óveral vandaan kunt openen.

Om te zorgen dat je snel eigenschappen van bestanden kunt wijzigen zonder daarvoor andere pagina’s hoeft te laden, worden child windows gebruikt. Op deze manier zie je nog gewoon het bestandsoverzicht en zie je in één oogopslag waar je mee bezig bent als je met meerdere vensters tegelijk werkt.

Een andere leuke toevoeging aan Online Office is de hulp van een MsAgent. Normaal gesproken kom je deze tekenfiguurtjes alleen maar tegen in Microsoft Office maar ze kunnen ook gewoon op websites gebruikt worden. Op deze manier is het makkelijk de gebruiker wat uitleg te geven over kleine dingen, zonder dat deze hiervoor een hele handleiding door hoeft te spitten.

JsForum

Javascript, Programmeren

XmlHttp, tegenwoordig veel gebruikt. Een paar jaar geleden was dat wel anders. Veel websites hekelden om ook maar enige vorm van javascript te gebruiken omdat elke browser dat verschillende zou interpreteren. Niet dus. Om dat te bewijzen heb ik een begin gemaakt met een forum die totaal op javascript draaide. En wat bleek? Het werkt gewoon netjes in elke browser én je hebt veel minder code nodig dan bij een forum als phpBB, terwijl je toch alle functionaliteiten zo over kunt nemen.

Een voordeel van javascript boven gewoon PHP en HTML is dat je altijd gewoon de pagina kunt blijven zien. Als je een normaal forum hebt en je klikt op een link, moet álles opnieuw geladen worden en is je scherm de eerste paar seconden wit. Met JsForum krijg je gewoon netjes een schermpje waarin staat dat de pagina aan het laden is waardoor je niet teveel wordt afgeleid. Ook gaat het laden van pagina’s sneller omdat er niet elke keer opmaak en dergelijke gedownload hoeft te worden als je een nieuwe pagina opent, maar dat dat maar één keertje hoeft.

Een ander voordeel is bbcode. Normaal gesproken moet de server elk bericht dat binnenkomt opslaan in de database en zodra iemand die pagina opvraagt, de bbcode in HTML code omzetten. Omdat JsForum toch al op een programmeertaal draait, heb ik gelijk gezorgd dat javascript bbcode en smileys en dergelijke afhandelt. Dat scheelt niet alleen serverbelasting, maar het voorkomt ook dat je extra info zoals HTML tags en opmaakcodes heen en weer moet sturen om hetzelfde resultaat te krijgen.