www.netsi.dk

"The internet is just a layer on the real world" (don't forget that!)

Monthly Archives: February 2012

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.

 

madkulturen.dk

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 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.

Share

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 () and software for coding your apps.

 

Installing software for emulating Android Virtual Devices (AVD)

 

  1. 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.
  2. 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:
    Android SDK manager
    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.
  3. 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”.
  4. An AVD called Android4
  5. 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!
    A running virtual Android device - in this case an Android 4 based device

Software needed to develop your own apps

Now you have software up so that you can create (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 IDE based soloution.

 

  1. Get the Eclipse development package. Visit http://www.eclipse.org/downloads/ and select Eclipse Classic 3.7.1
  2. Adding the Android Development Tool (ADT) plugin to Eclipse by following the guide found here: http://developer.android.com/sdk/eclipse-adt.html#downloading
  3. 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

Share

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

When working with CMS like Dynamicweb or Syncron VIA, you sometimes share 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 a lot, and the code here is applied to the 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.

Share