www.netsi.dk

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

Category Archives: Code

How to add entities to XSLT templates

When you work with 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 &laquo; 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

Share

Did you remember to exclude namespaces from output?

When you work with , transforming XML to for instance the web in some CMS system, you might use some extra namespaces. Perhaps the CMS offers you some utilitiy to handle relevant datastructure or procedures. You add them to your but perhaps you forgot to tell the 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 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.

Share

Extend Object with method that handles CSS values in javascript

If you are working with and need to for instance add or subtract a value to a value like “15px” or “3em” this method “()” 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};
}
Share

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

Kort om på nettet

Hvis du har nogle videoer som du ønsker at dele med venner eller kunder så er 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

Sådan ser en video ud når folk ser på den

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

At redigere information relateret til video er meget nemt

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 vises overskueligt og med mange facetterStatistik/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
Share

Blog indlæg om opdateret nyhedsmodul i Dynamicweb 8

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

Share

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

Share

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

Mads Kristensen (@mkristensen) is the name of the person bringing speed and hope for the part of Microsoft Visual Studio. He is adding new life the the rather dead part of Visual Studio. He is doing so through his free 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! Smiley

Amoung other features: Embed image as base64 encoded image

Links
Share

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

This is a short note on constructing news templates for CMS 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 <!--@DWUserName--></p>
<table>
<!--@LoopStart(ItemsLoop)-->
<tr>
<td>
<a href="<!--@LoopStart(IsSetupDetailLink)--><!--@ModuleDetailLink--><!--@LoopEnd(IsSetupDetailLink)-->"><!--@NewsHeading--></a>
<br />
<!--@If Defined(NewsManchet)-->
<!--@NewsManchet-->
<!--@EndIf(NewsManchet)-->
<!--@If Not Defined(NewsManchet)-->
<!--@NewsText#100-->&#8230;
<!--@EndIf(NewsManchet)-->
<br />
<a href="<!--@LoopStart(IsSetupDetailLink)--><!--@ModuleDetailLink--><!--@LoopEnd(IsSetupDetailLink)-->">Read more</a>
</td>
</tr>
<!--@LoopEnd(ItemsLoop)-->
</table>
Share

Doing cross domain scripting–no problem

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 .

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!

Links
Share