www.netsi.dk

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

Monthly Archives: June 2009

Javascript is my favourite language!

Development in the area suca a serious APIs like jQuery and Prototype, makes development and use in general of easier! It makes a serious part of many webpages. also often play a key part in gadgets. And why not?

Javascript spans accross various technologies, has many open-source initiatives related to it and handles modern things like AJAX and XML. This morning I stumbled into yet another great article on www.smashingmagazine.com. Its called “50 fresh javascript tools that will improve your workflow” – go and visit it! I am sure that you will be inspired!

One of the points in this article is about a way of browsing your objects in a very visually nice way. Here is an example of what you may see if you “look into” one of your javascript objects:

image

“Prettyprint for javascript” – http://james.padolsey.com/javascript/prettyprint-for-javascript/

So no-more “document.write(myObject)” which would just write “[Object object]” :-)

Share

Admittet – I LOVE great Icons! (but cannot myself create them)

From the dawn of my time working with things related to graphics. Here I think about 1981 on the ZX-81, later on the TI-99/4A and Acorn BBC Computer. From that time I have loved icons which illustrate something on a small space. Once working on the Archimedes (Acorn RISC computer) I remember a friend of mine got a task where he had to create I think that it was 4 icons for Ericsson – the size was 32 x 32 pixels and only some 64 (or was it 32) colors were available! He worked hard for many hours and actually produced 4 icons which illustrated for instance “Water department”! :-) Cool!

Today we are spoiled with great icons! Let me link you up with an article with great links to free icons: Icons For Your Desktop and Icons For Your Web Designs. And a taster – I have downloaded some of the Icons:

 

image

 

When I try to create Icons I use Xara Xtreme Pro (open source version for Linux: http://www.xaraxtreme.org/) – a vector based program – which many great icon designers also use. http://iconka.com/ is a place to see examples of that. Here is a teaser:

image

Xara Xtreme has by the way arrived in a version 5 here in the beginning of june 2009!

Share

Getting the right contents when using Dynamicweb CMS templates

In the CMS system I work with – Dynamicweb CMS – content is build around various , each containing a output from the system. The output is generated using ASP.NET and each bit of content is represented in a “tag”. For instance if you want the name of the user which has logged on the page you enter

<!—@Global:Extranet.Name-->

Such templates are based on HTML, it is: You create static parts of HTML and insert tags where you want the system to insert dynamic content.

You might want to do something like this:

...<div>Hi <!—@Global:Extranet.Name-->!</div>...

So far so good! But what if the user has not logged in? You will need to do one of three things:

The soloution

Put shortly: Using javascript to control which content is shown is basically not a good idea. But today almost anyone browsing the net has javascript turned on, and the trend (IMHO) goes towards very powerfull javascript parts. Another discussion is that: “Why give a visitor contents if you allready before you start sending information (HTML) that the content is not really relevant?”. Well, another article about that.. :-) Here goes:

...<script type="text/javascript">
if ('<!—@Global:Extranet.Name-->'!='') {
document.write('<div>Hi <!—@Global:Extranet.Name-->!');
}
</script>...

The soloution

This is actually not a way which I would say always works! But the theory is that you put CSS classes  on HTML tags that are build around a classname-prefix (“customerNumber” for instance) and then add the dynamic value from CMS as postfix. So if a user has logged in a classname would be for instance “customerNumber342” for a customer with the number 342. A customer who has not yet logged in would give a classname “customerNumber”. So if we by default hide the classname “customerNumber” any other classnames would be displayed! :-) Cute right? But the problem can rise when sometime certain Dynamicweb template tags are not replaced, even if it has no value. That way you might end up with

“customerNumber<!--@Global:Extranet.CustomerNumber-->”

That would even be invalid HTML! :-( Anyway here is how a CSS based soloution could be.

<head>.. <style type="text/css">
.customerNumber {display: none;}
</style>
..
</head><body>
...
<div class="customerNumber<!--@Global:Extranet.CustomerNumber-->">
Hi <!—@Global:Extranet.Name-->!
</div>

The If Defined soloution

Dynamicweb CMS offers a way to check if a tag has content, and only pass the  content within the IF-ENDIF if a tag has content.

<!--@If Defined(Global:Extranet.Name)-->
<div>Hi <!—@Global:Extranet.Name-->!</div>
<!--@EndIf(Global:Extranet.Name)-->
...<div>Hi <!—@Global:Extranet.Name-->!</div>...

These are just 3 ways of making workaround in Dynamicweb CMS, you could ofcause come up with more! For instance combining the javascript and CSS soloution.

Templates comes to our rescue – well almost!

Imagine that you build your content using XSLT: Dynamicweb CMS will build a XML document containing all the “template tag values” in a structured way. A tiny bit of this XML document might be:

...<Global.Extranet.Name>342</Global.Extranet.Name>...

So this way you decide if it is relevant to produce output based on “real” values! You can use the power of XSLT/XPATH to decide what to do. An example:

<xsl:if test="Global.Extranet.Name!=''">
<div>Hi <xsl:value-of select="Global.Extranet.Name" />!</div>
</xsl:if>

All this is done before the content has been send to the client (in Dynamicweb Backend). It is a clean powerfull way to produce exactly what is needed for the page to render as wished.

Nothing is perfect…

When all this is said, I must warn you: The XSLT templates path is – I am sad to say – not always perfect in Dynamciweb CMS. The XML document does not always have all tags. I have some workarounds which I will write about in a later article.

You can see all template tags at templates.dynamicweb.dk.

Share