www.netsi.dk

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

Tag Archives: website

Use Google Picasa to generate cool webgalleries using templates…

Google Picasa offers so much more than just viewing on your PC and exporting them to a Google Webalbum. One of the ones is of template based webgallery generation. Exporting images using free can give your a twist making them very cool to watch.

How does it work?

Well you need ofcause Google Picasa. Then you need to add some “templates” inside the Picasa program. When you have done that you can get another template to choose from when you use the “Export to …” option. What is generated are a folder containing files needed to show a gallery of the images you have selected.

1 Getting

This is simpel: Download and install it from Google: http://picasa.google.com

2 Adding the template

This post uses templates on: http://www.paulvanroekel.nl/picasa/. You will probertly find many others elsewhere on the net! We will try to use Piecemaker.

  1. Download the ZIP file containing the templates for Picasa
  2. Extract them to a temp folder
  3. Copy the folder named “Piecemaker” to a folder inside your Picasa installation – something like: “C:\Program Files\Google\Picasa3\web\templates”
  4. Start Picasa

3 Exporting some images using a template

You simply choose some images in Picasa. Then you find the “Export to HTML..” under the “Folder” menu (my version is in Danish, so it might be called something in that direction). Here you can see how it looks in my Danish Picasa when I choose the “Export to HTML…”:

image

When you choose the menu item you get a box with some choices. Here you can see which templates are installed inside your Google Picasa’ target=_blank>Google Picasa’ target=_blank>Google Picasa’ target=_blank>Picasa – probertly some basic ones plus Piecemaker which you just “installed” above. Choose Piecemaker and change other settings if you like…

image

When you have choses the “export” (here: “Eksporter” – in Danish) Google Picasa’ target=_blank>Google Picasa’ target=_blank>Google Picasa’ target=_blank>Picasa will generate the static files inside the folder you can see above as “Mappe”. You do not need to worrie so much about it now, because when exporting is done Picasa will launce the file showing the final result!

Usefull links and information

You can read the instructions on how to add templates to Google Picasa’ target=_blank>Google Picasa’ target=_blank>Google Picasa’ target=_blank>Google Picasa from the FAQ on the website of Paul Van Roekel. Another page on that site has some videoes showing how to… The example above is IFRAMED into this post, which is okay, but not perfect. Also I have changed the index.html file inside the template to include a link to my blog – ofcause you can make other changes… Perhaps one day you can even create your own template!

Share

Xara Web Designer – easy website creation for designer

So you are a creative mind? You dont know much about the of and the nature of a webpage? But still you would love to just design your and voila! put it on the web – as a valid HTML based page, not flash, not an image! The answer is here: Xara Web Designer

(XWD) is a very cheap application which fills the gab between designing websites and creating them in HTML. The idea is that you design your site with graphics like buttons, text-areas, menues and graphics. When you are done you simply publish the site to HTML!

The HTML code generated is valid HTML – using CSS to reproduce your (complex) design from the vector (!) based Web Designer application. I myself am a developer and I love to handcode HTML, CSS and javascript (ok, I said it!), so I know about validation of those elements. XWD published HTML is job well done IMHO!

Inserting dynamic elements
One thing which I specially like is the ability to insert placeholders in your design. You can then embed HTML/Javascript/CSS directly in your design. When the site is published the placeholders will contain your code – allowing you to have semi-dynamic contents in your website design.

How to do it?

Well you simply add an area and right click it.

Choose “Web properties…”.

Click on the tab “Placeholder” and select “Replace with HTML code”

Now paste your html into the textbox – voila!

Examples

QR code – information embedded in machin readable 2D barcode
Imagine that you put a small barcode on your webpage, this barcode contains your contact information in a graphic 2d barcode called a QR Code. Your cell phone and other applications can then scan the barcode and save this information about you (and your website)
Try embedding this in XWD:
<img src="http://chart.apis.google.com/chart?chl=Xara%20Ltd.%2C%20Gaddesden%20Place%2C%20Hemel%20Hempstead%2C%20HP2%206EX%2C%20United%20Kingdom&cht=qr&chs=110" />

A You Tube Video
Ofcause you can also embed a You Tube video!
Try embedding this into XWD:
<EMBED src="http://www.youtube.com/v/Mb-ylTDHn44" width=425 height=350 TYPE="application/-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"></EMBED>

Share

Xara Web Designer Video Demos

has done it again! Created a brilliant application – this time a creation tool based on their excelant xara xtreme pro vector based drawing application. I must say this new application is a winner!

Perhaps not for us professionel website implementing developers – but, I will perhaps use it when starting up a site, or for prototyping. Xara: You are the greatest! Can’t wait to get a copy! :-) (You know my e-mail over there in UK! ;-) ).

Example demo video

 Xara Web Designer Video Demos

Share

It’s a dream: Serverside javascript!

I know that nothing is perfect, but today I saw a server running javascript! It is based on the mozilla javascript engine which means that it understands the same level of javascript that Firefox does!

So is this a dream?
Well to start with I love javascript! It’s so flexible and fits very well for the internet. With the many very APIs appearing nowadays – like , prototype and other – you would be able to use the same terms, methodes and datastructures on both client- as well as server-side! Google and Yahoo are building serious javascript free APIs which you simply use on the server rather than on the browser.

I just watched a video showing an example where a RSS feed is fetched as XML, transformed using XSLT and added to the DOM using various javascript APIs. Server side that is!

You would be able to manipulate the DOM using javascript syntax and APIs before the page is returned to the browser.

But how do I get it?
Well you can get locally by downloading Aptana framework, which is also very powerfull in general – even if you do not want to play around with serverside javascript.

It is mentioned that it has its own JAXER server, not sure if it means that you will be able to host it only some places… time will show! For now I keep on dreaming!

Share

Snippets: Dynamicweb snippets

If your are working a lot with the CMS system you will find these snippets very handy! I have allready been published a very useful “eval window” , where you can see a description about how to “install” it in your browser. Below are five other snippets targeted for users of Dynamicweb CMS.

I have choosen to set the snippet in as a link on each word, so what you need to do to get the actual code is to right click and choose “Copy destination”. On your clipboard the snippet will be then to use as I wrote in the “eval window“.

Here goes:

  • Log off – Use this to logoff a an extranet user
  • Admin – Open the ADMIN () of the current Dynamicweb CMS site
  • Empty cart – Well… Empty the shopping cart
  • Save Template XML – Will add “savetemplateXML=true” to the current page, which will make Dynamicweb CMS save the XML in the respective template folders
  • GetImage – Will open the “Get Image” URL generator of your Dynamicweb CMS – very usefull!

Oh, and You ofcause can right click the link (snippet) and choose “Add to favourites…” :-)

Share

What is extra, what is basic on a website?

It’s always a challange when building a new to find the ballance between what the customer (says he) needs and what the experts (read: people like me working and thinking on the internet) thinks he needs. It can be seen as two oppersites, but I think that it is actually not the case.

The “small” things makes up the difference
When you shop in real life you may have tried to shop in a shopping house where things are handled in a personal manner: You get service, guidence, choices and small things like the way the products are wrapped makes a difference. You feel like you are a person which the shop actually takes serious and handles as an important customer.

On the other hand discount shops focus on one thing only: The price. Somehow it has been become a constant, if you want good prices you must accept poor service, no-personal handling of customer and other things. Perhaps you could draw a line to the way fast food works..?

When it comes to websites sometimes rules like the ones above also seems to apply. I think that it is my risponsebility to be serious about (at least) my part of the development of a website. I should ensure that the content on a website is upto date when it comes to webstandards – from javascript over /CSS to things like and microformats. Here however sometimes is a problem:  People tend to think that implementing things like microformats will add more time to the production time. I do not agree!

The methodes which we as web-developers use should simply be build upon tools ensuring that things like publishing is not something extra – it should be standard. Like in the shopping house which offers a high level of quality,  I would prefer quality instead of discount. It should all be part of the identity of any webdeveloper! Or any company working with the internet.

Tools like WordPress in its basic form support all such quality assuring technologies! So thank you WordPress for making me smile: Serious web publishing tools long live! :-)

Share