www.netsi.dk » Code

Controling styles for individual websites on shared CSS

netsi — Thu, 09 Feb 2012 08:49:56 +0000

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

XSLT example from 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:


...

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

netsi — Wed, 18 Jan 2012 12:52:39 +0000

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:


stylesheet [
  
  
  
]>
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…

Did you remember to exclude namespaces from output?

netsi — Mon, 16 Jan 2012 12:06:40 +0000

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:

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:

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

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

netsi — Thu, 12 Jan 2012 08:59:55 +0000

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};
}

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

netsi — Tue, 03 Jan 2012 09:16:35 +0000

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!

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

netsi — Wed, 28 Dec 2011 10:49:52 +0000

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

netsi — Sat, 03 Dec 2011 21:00:07 +0000

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();
})

Speeding up you CSS in Visual Studio using Web Essentials plug-in

netsi — Tue, 29 Nov 2011 20:06:21 +0000

Mads Kristensen (@mkristensen) is the name of the person bringing speed and hope for the CSS part of Microsoft Visual Studio. He is adding new life the the rather dead CSS part of Visual Studio. He is doing so through his free plug-in for Visual Studio: Web Essentials.

The features

In general Web Essentials makes working with CSS in Visual Studio more nice, adding features like colour and font preview, change of values using Ctrl+Arrows (up=add, down=subtract as you know it from for instance Firebug and Google Chrome), option to base64 encode images and speed typing. I can only recommend this plug-in, and also the fact that Mads listens to you request given to him for instance through twitter makes me a happy user! Well done Mads, and keep up the good job!

10 seconds guide to Dynamicweb Newsletter v/3 templates (sending out news)

netsi — Mon, 28 Nov 2011 14:41:04 +0000

This is a short note on constructing news templates for Dynamicweb CMS Newsletter v/3 templates when sending out pieces of news.

It can be tricky to create newsletters in HTML, doing it from Dynamicweb CMS using the Newsletter v/3 does, I am sorry to say, not make things easier. Using the snippet below you get the skeleton of the central news item loop:

<p>Dear p>
<table>

<tr>
<td>
<a href="--@LoopStart(IsSetupDetailLink)-->--@ModuleDetailLink-->--@LoopEnd(IsSetupDetailLink)-->">--@NewsHeading-->a>
<br />




…

<br />
<a href="--@LoopStart(IsSetupDetailLink)-->--@ModuleDetailLink-->--@LoopEnd(IsSetupDetailLink)-->">Read morea>
td>
tr>

table>

Doing cross domain scripting–no problem

netsi — Wed, 23 Nov 2011 21:46:41 +0000

Many times I have come across situations where I had an iFrame from which I needed to parse information or execute code between the iFrame and its parent window. It can be done with out any need for this soloution if the parent and the iframe is on the same domain. For instance:

Parent window located at: www.shareddomain.com

Iframe located at: utils.shareddomain.com

I had the situation where the iFrame located on a subdomain needed to update its height as contents height changed. I made a function in the parent window setHeight(height) and tried to call it from the iFrame.

// Code in Parent window
function setHeight(height) {
  // Javascript code which will change the height
  // of the iFrame
}

// Code in iFrame
jQuery(function() {
  // Calculate height of iFrame into var height
  parent.setHeight(height);
})

I ran into the “same origin policy (cross domain issue)” which is a security build into the browser to prevent scripts from one domain (origin) to access data/code in another domain. The code in the iFrame is blocked and not executed because of security issues related to same origin policy.

The soloution: document.domain

I read the information on the wiki about same origin policy and discovered a simpel working soloution. Add a piece of code into both scripts specifying the same domain:

// Code in Parent window
document.domain = 'shareddomain.com';
function setHeight(height) {
  // Javascript code which will change the height
  // of the iFrame
}

// Code in iFrame
jQuery(function() {
  // Calculate height of iFrame into var height
  document.domain = 'shareddomain.com';
  parent.setHeight(height);
})

The browser now allows the two windows to share properties and code, and the function from the parent window can be called from the iframe! Cool!

www.netsi.dk » Code

Controling styles for individual websites on shared CSS

The same styles… almost…

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

XSLT example from Syncron Via CMS

How to add entities to XSLT templates

HTML Entities codes

Links

Did you remember to exclude namespaces from output?

Namespaces in a XSLT template

Removing the namespace from the output

Extend Object with method that handles CSS values in javascript

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

Kort om video på nettet

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

Screenshoots fra min konto

Iøvrigt…

Relateret indhold

Blog indlæg om opdateret nyhedsmodul i Dynamicweb 8

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

Speeding up you CSS in Visual Studio using Web Essentials plug-in

The features

Links

10 seconds guide to Dynamicweb Newsletter v/3 templates (sending out news)

Doing cross domain scripting–no problem

The soloution: document.domain

Links