CV–cases: www.madkulturen.dk

Dette er det første indlæg hvor jeg kort beskriver noget jeg har været involveret i. Grunden er at jeg generelt glemmer at få kommunikeret hvad jeg egentlig går og laver i mit professionelle hverv. Jeg håber at kunne poste løbende eksempler på hvad jeg har gået og lavet.

www.madkulturen.dk fra fødevareministeriet.

Slider i top af siden

Slideren i toppen lagde jeg også en hånd på. Der var tale om implementering ved hjælp af et standard jQuery slider plug-in.

YouTube kanal viser

Kunden ønskede mulighed for at indsætte en visning af videoer. Der forelå et design og et ønske om at bruge YouTube. Jeg var med i dialog om hvordan det kunne implementeres og det endte med et backend modul til Dynamicweb CMS så det blev meget nemt for ikke tekniske redaktører at indsætte videoer på hjemmesiden.

Min rolle handlede primært om frontend implementering af video visningen. Det gjorde jeg gennem XSLT transformering af de filtrerede data fra YouTube.

Kunden ønskede en op/ned funktionalitet som jeg udviklede et jQuery plug-in til at håndtere.

Se den live løsning.

How to: Set up development tools for Android on PC

If you want to create your own apps for Android you can install a number of applications on your PC and you can code and run apps on your PC. Here is a quick guide to setting up the required tools needed to become an android app developer. You will need tools for simulating android devices (AVD) and software for coding your apps.

Installing software for emulating Android Virtual Devices (AVD)

First you need to have a the Java SE Development Kit installed. The Android SDK will inform you about this if you don’t have it. But you need it before next step, so here is a link to the Java SE Development Kit I clicked “Java SE 7u2”, and downloaded the version for windows. After you have downloaded it run the installer. I may take up to 5-10 minutes to install.
The Android SDK
There are a number of versions here. I went for this one:
http://dl.google.com/android/installer_r16-windows.exe Which at the time of writing (2012-02-11) was the current installer for Windows.
After installation you will see a list of packages you should/may download. Here is what it looked like for me:

You may want to install older versions of Android. I ended up installing 35 packages. I had to go through “Install xx packages” though. I guess that some of the packages must be installed in a specifik order. Also I learned that when you need to accept some terms, you should click “Accept all” button.
Creating Android Virtual Devices (AVDs). Below I have created an Android 4 based AVD with 100 Mb Ram and a screen resoloution of 800 × 480 (WVGA800), I named it “Android4”.
When you hace created a AVD you are ready to launce the Virtual Android device! You simply click in the Android Virtual Device manager you simply select your AVD and press “Start…”. button. Voila, in a few moments you will see a virtual Android device on your screen!

Software needed to develop your own apps

Now you have software up so that you can create virtual android devices (AVDs), and the next step may be to set up a development environment so that you can create your own apps Smiley . There ofcause exists more than one soloution, here I will focus on a Eclipse IDE based soloution.

Get the Eclipse development package. Visit http://www.eclipse.org/downloads/ and select Eclipse Classic 3.7.1
Adding the Android Development Tool (ADT) plugin to Eclipse by following the guide found here: http://developer.android.com/sdk/eclipse-adt.html#downloading
After the ADT has been installed Eclipse will restart and you will be prompted to setting up the ADT. I choose to check also the “Install Android 2.1” as it supports 97% of all Android devices (at the time of writing). Also a Android SDK was downloaded.

Running apps in Eclipse

A very good webpage describes this: http://developer.android.com/guide/developing/building/building-eclipse.html

Links

Controling styles for individual websites by adding extra classes to HTML tag

When working with CMS like Dynamicweb or Syncron VIA, you sometimes share stylesheet files across domains or subdomains. It makes sense to share common CSS codes when you want to some some common styles like fonts, colours or logos.

The same styles… almost…

It is also common that some small differences exists on subdomains, perhaps a campaign site or a site target for a specific group of people. You then need to apply some small changes to those sites. Ofcause you can do this in many ways, and the CMS you use will probertly be a part of your decision on how to implement it. Here is one way to do it:

Add a CLASS to HTML tag with some site related information.

For instance I could add this code to my blog:

<html class="wwwnetsidk"...

The rule should be simple, for instance:

Replace not-valid characters like “.” from the DOMAIN NAME to “nothing”

The reason it should be simpel is that it makes it easy to figure out what it should be for a given domain name. Things which are using the KISS (“Keep It Simple, Stupid!”) principle will more likely be used by people, as (in general) people are lazy (I know! Smiley , trust me.)

When this rule have been applied you can add extra lines to your shared CSS file like this:

html.wwwnetsidk {background-color: red;}

The princip is used widely, for instance by http://www.modernizr.com/ which addes a lot of feature related classes to your HTML element telling you for instance which HTML5 features are supported. Just look here at parts of what modernizr adds to your HTML document:

js no-touch postmessage history multiplebgs boxshadow opacity...

Dynamicweb CMS

Working with Dynamicweb CMS, here is an example of adding extra information to HTML element – “areaid-xx” will add the ID of the area. In Dynamicweb you can have several areas, which are individual websites. So you might have areaid=1 which is www.netsi.dk and areaid=2 which is m.netsi.dk. In the example below I have also added extra information telling if the person is a returning person.

<html class="areaid-<!--@Global:Area.ID-->
<!--@If Defined(Global:OMC.Visitor.IsReturning)-->IsReturning<!--@EndIf(Global:OMC.Visitor.IsReturning)-->"...

You may add any information you wish, perhaps have a look at the tags that Dynamicweb CMS offers.

Syncron Via CMS

Here are an example of how I have implemented this feature in the Danish CMS system Syncron Via. The system is using XSLT a lot, and the code here is applied to the XSLT template used to render the outer Page data:

<xsl:variable name="serverName" select="translate(/Page/RequestContent/ServerVariables/Entry[@Name='SERVER_NAME'], '.-', '')" />
...
<html class="{$serverName}"...

This is what I do: define the class to be added to the HTML element in a variable and add it to the HTML class attribute.

How to add entities to XSLT templates

When you work with XSLT you sometimes need special characters like “«” and “»”. You can define “entities” which can then be used in the document. Here is how:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE xsl:stylesheet [
  <!ENTITY laquo "&#171;">
  <!ENTITY raquo "&#187;">
  <!ENTITY hellip "&#8230;">
]>
<xsl:stylesheet…

You add the lines marked above. They defined a relation between a entity name and a character code. For instance the “laquo” will make it possibel for you to use « when inserting a “«”.

HTML Entities codes

The website “entitycode.com” has a very nice structured overview of HTML Entities Codes. You can see the relation between characters, their entity name, the decimal code and a short description of the character. They are very well organised in categories, go and see it for your self…

Links

Did you remember to exclude namespaces from output?

When you work with XSLT, transforming XML to for instance the web in some CMS system, you might use some extra namespaces. Perhaps the CMS offers you some utilitiy namespace to handle relevant datastructure or procedures. You add them to your XSLT but perhaps you forgot to tell the XSLT processor not to add the namespaces to the output? Well I do some times…

Namespaces in a XSLT template

Adding namespaces to get extra features in your XSLT templates is easy. You may or may not think about it, but you will allways add at least one namespace “xsl”. Using Microsoft Visual Studio and selecting “New XSLT…” you will probertly also get a MS namespace like this: “msxsl”. I all happens in the beging of the template like this:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  exclude-result-prefixes="msxsl "
  xmlns:cs="urn:custom-cs"
>

In the above example there are three namespaces:

xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:cs="urn:custom-cs"

The first one “xsl” is telling the XSLT processor that we are using XSLT and that the we will be using the XSLT rules defined in 1999 by w3.org.

The next one “msxsl” addes MS custom features and will give you some nice new features, for instance functions to format dates (ms:format-date Function).

The last one I use for adding custom C# code in my XSLT. That is a very powerfull way of extending the XSLT processor with your own custom .NET code. But please take care when doing that!

Removing the namespace from the output

If you use custom namespaces you may end up with the namespaces added to the output elements. In the above code you may observe that there is an attribute “exclude-result-prefixes” on the xsl:stylesheet tag. It is used to tell the XSLT processor which namespaces should not be added to the output elements. I have added “msxsl” but not “cs”. I the example I use XSLT in Dynamicweb CMS to generate HTML, so I may get output looking like this:

<ul xmlns:cs="urn:custom-cs">

That is not what I wanted! To remove the “cs” namespace I simply need to modify the xsl:stylesheet attribute “exclude-result-prefix” to:

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:msxsl="urn:schemas-microsoft-com:xslt"
  exclude-result-prefixes="msxsl cs"
  xmlns:cs="urn:custom-cs"
>

I have added the “cs” namespace, so I will now get a tag without the “cs” namespace in my HTML.

Extend Object with method that handles CSS values in javascript

If you are working with CSS and need to for instance add or subtract a value to a CSS value like “15px” or “3em” this method “getCSSValueAndUnit()” will come in handy.

Simply add the code somewhere in the top to extend the “Object” object.

The method is used as follows:

"10px".getCSSValueAndUnit();

which will return an object:

{ 'value':10, 'unit':'px' }

Simple but very usefull!

Object.prototype.getCSSValueAndUnit = function() {
  var oReUnit = new RegExp('[0123456789\.-]', 'ig');
  var sOriginal = this.toString();
  var sUnitRaw = sOriginal.replace(oReUnit, '')
  var sUnit = sUnitRaw.replace(new RegExp(' ', 'ig'), '');
  var vValue = parseFloat(sOriginal.replace(sUnitRaw,''));
  return {'value':vValue, 'unit':sUnit};
}

Gratis online undervisnings programmer til skolebørn og forældre

Om det er fordi du er ambitiøs eller du bare hellere vil have at dit bare leger og lærer (noget fornuftigt), så har mange af os forældre til skolebørn godt af at besøge træneren.emu.dk Det er uni-c der står for denne undervisningspotal, som i øvrigt hedder “EMU | Danmarks undervisningsportal.”

Jeg var så heldig at en forældre, i den 0. klasse som min datter går i, skaffede brochurer som blev stukket ned i sko-kassen. Vi havde på en læseaften kort tid inden talt om hvilke undervisningsportaler der var på nettet. Tak for det!

Søgemuligheder og filtrering er rigtig god.

Jeg synes at spil er rigtig nemme at finde. De mange spil kan findes gennem en direkte søgning, valg af bestemte kategorier eller ved at filtrere f.eks. på sværhedsgrad. Det er også rart at der er en gennemført struktur, nærmest som når man shopper på nettet.

Iøvrigt er der også mulighed for at “rate” hvert enkelt spil – og det viser jo også hvordan et spil er blevet vurderet af brugerne.

Lad os kigge på et eksempel på et spil “Abc – Så ka’ du lær’ det”

Jeg har prøvet "Abc – Så ka’ du lær’ det" som er et visuelt spil som træner børn i at genkende bogstaver. Der er forskellige niveauer, fine visuelle effekter, en talende figur og en god speak på spillet. Jeg prøvede med min egen datter, men tidspunktet gjorde at hun nok var fyldt for idag. Lydene fangede alligevel kortvarigt hendes opmærksomhed. Jeg er sikker på at spillet på et andet tidspunkt havde fanget hende!

Hvis det er standarden for undervisningsspil på træneren.emu.dk så er jeg en glad forælder! Jeg må dog bemærke at det er lavet i Flash og at jeg ikke kunne spille det i Google Chrome (måske bare min installation). Det at man har valgt Flash forstår jeg godt, for det har jo indtil for nyligt været den eneste måde at lave den slags på. Lad os se om ikke der efterhånden kommer spil i HTML5 (så også iPad kan anvendes til portalens spil).

Nogle af de gode features

Gratis programmer
Kører i din browser (hvis den kan afvikle flash)
Spil på dansk
Pædagogiske gode spil
Find det her: træneren.emu.dk

Screenshoots fra “Abc – Så ka’ du lær’ det”

YouTube som din video base, en rigtig god idé!

Kort om video på nettet

Hvis du har nogle videoer som du ønsker at dele med venner eller kunder så er YouTube bestemt et godt bud på et sted at gøre det. Du opnår mange gratis muligheder, og Google er jo bestemt ikke en dårlig “partner” på det felt!

Her er et par af de features som jeg mener er guld værd – og der er flere som ikke er nævnt!

Man kan se og uploade til YouTube på mange måder

Om du sidder med en iPad, en Windows baseret PC eller en Apple iOS computer så kan du uploade dine videoer til YouTube. Du kan navngive, beskrive, tagge og generelt kontrolere hvordan dine videoer skal fremstå på nettet. Dine videoer bliver søgbare, hvis du giver lov til det!, og de bliver relateret til lignende videoer.

Videoer fra YouTube kan afspilles på næsten alle devices, lige fra mobil, over “pads”, moderne TV’er (i stuen hos folk) eller på computere. Du skal ikke gøre noget for at konvertere til forskellige video formater – det sørger YouTube for. Dine venner kan synes om dem, gemme dem som deres favoritter eller dele dem f.eks. på Facebook.

Du kan få din egen video kanal, geotagge dem og se statistik over hvordan dine videoer er blevet anvendt, set eller delt. Hvilke type brugere og hvor kommer de fra? Hvor mange gange er din video blevet set, og så videre…

Du kan nemt dele dine videoer fra din hjemmeside, du kan e-maile den til venner eller kunder, alt sammen på dit eget sprog.

Jeg vil derfor anbefale at man får sig en konto på YouTube og bruger det til at gemme sine videoer – det er jo også en god måde at have backup i “skyen” af ens videoer. Se disse screenshoots fra min youtube konto (http://www.youtube.com/netsi64).

Screenshoots fra min konto

Når folk ser videoen

Her er et eksempel på en video jeg har lavet ved hjælp af min mobiltelefon og en app som kan optage “time-lapse” video. Time-lapse er hvor man tager et billede med et givet interval (f.eks. 1 sekund) og så afspiller det med 25 billeder i sekundet. Det giver en morsom effekt, her er det f.eks. en køretur til Aarhus fra Løgten – det tager så 0:21 minutter!!

Rediger oplysninger

Det er så simpelt som at klikke “Rediger oplysninger” og man er igang med at kunne redigere de oplysninger som hører til videoen. Det betyder f.eks. at du kan uploade først og tilføje relevante information senere.

Folk kan iøvrigt kommentere og rate dine videoer. Noget som ja, selvfølgelig er gratis.

Statistik/analytics

Der er ret professionelle statistiske oplysninger som kan være ret interessante at se. Google har styr på det og man føler sig rigtig godt dækket ind på det felt.

Mange andre muligheder

YouTube er udbredt og kendt af mange, selv TV-stationer viser klip derfra. Hvis du bruger YouTube professionelt er der også den fordel at mange CMS systemer integrerer godt til det, der er mange webudviklere som kan hjælpe dig og nettet bugner med gode vejledninger og råd til denne state of the art video tjenste.

Så jeg kan kun anbefale at du bruger denne fantastiske gratis service fra YouTube.

Iøvrigt…

Skulle du nu sidde og have fået lyst til at se ovennævnte video eksempel så kan du se den her – for Windows Live Writer, som jeg bruger til at blogge med, kan selvfølgelig indlejre videoer fra YouTube gennem et par klik! Smiley

Min Time-lapse video–indsat nemt og smertefrit via Windows Live Writer…

Relateret indhold

Video for everybody generator
Et rigtig godt gratis video konvertering program: Free Video Converter
Google YouTube player demo – hjælp til udviklere der ønsker at indsætte YouTube videoer i deres HTML.

Blog indlæg om opdateret nyhedsmodul i Dynamicweb 8

Dynamicweb version 8 er blevet releaset i december 2011 og det indeholder en række forbedringer,
for eksempel er nyhedsmodulet blevet opgraderet. Peter Terkildsen har skrevet et blog indlæg på blog.bleau.dk om det opgraderede nyhedsmodul i Dynamicweb 8.

Læs blandt andet om:

Søgning i nyheder på tværs af alle nyhedskategorier
Søgemaskinevenlige URL’er når man ser en enkelt nyhed
Nyheder kan indgå i flere kategorier

Læs hele blog indlæget her: http://blog.bleau.dk/2011/nye-muligheder-i-nyhedsmodulet-i-dynamicweb-8/

jQuery trigger() will not always fire naturally-occurring event

If you want to trigger (fire) an event on say a link with id=test from jQuery you can use the

jQuery(‘#test’).trigger('click')

which will simulate that a click event has occured and will execute any jQuery attached events. This is fine, but what if you have not assigned an jQuery event handler? You can simply call the native click() method on the element like this:

jQuery('#test').each(function() {
this.click();
})