HTML Editors

Created April 21, 2007 by

If you are building a website from scratch you will want a HTML editor to help create webpages.

Some of the best HTML editors.

Dreamweaver – The market Leader but quite expensive. Dreamweaver at Adobe
Microsoft Front Page – One of the most popular editors, it is now being superceded by Microsoft Expression Available for trial download.

Free HTML Editors

NVu – OPen source html editor How to build a website using NVu
Mozilla Composer

These HTML editors will enable you to upload your webpages using FTP transfer. However for optimal FTP transfer you may wish to make use of a dedicated FTP programme.

Cute FTP

Cheap Hosting and Site wizard – cheap webhosting with editor built in.

Tidy language folders with LinguaPlone

Created March 28, 2007 by

Photo: Projjwal Pohland .

In Linguaplone, the one thing that you can’t translate is the portal itself. Hence if you have any documents or folders at site root, then they will be translated into documents or folders also at site root. It is easy to see how (especially with more than two languages) things can get very messy indeed.

However there is a way around this if you have your site address directed to a folder at the root of the portal, public_home, say (in my opinion this should be Plone default behaviour to stop user content from being scattered around portal tools in the zmi). You can then translate the folder and the translated folder will show up on the same level as public_home. (You can even translate some content inside the folder before you translate the folder and LinguaPlone will put the content inside the folder for you)

However, perhaps you want all content – including translations – to be inside the public_home folder for ease of maintenance. Well, after you translate the folder, you can go into the zmi, cut the folder and paste it within public_home. This doesn’t seem to have any effect on the links between original and translated folders, or on any content translated after you move the folder, and you now have all the content for each language inside their respective folders inside public_home.

Displaying body text of a news item in sdotnews

Created March 17, 2007 by

http://www.srichinmoycentre.org/gallery/d/205411-2/P1030839.JPG

Who says a technical site can’t have pictures? (Photo:Kedar Misani )

Sdotnews by default displays the description of a news item. However, sometimes you will want to link to another page direct from the front sdotnews page, so it might be better to display the body text instead of the description, and in the body text of the news item you can then insert your links.

In order to implement this change we have to change the sdotnews_view template; specifically, replacing the bit that says

<p tal:content="result/Description">

At first I tried to call the text of the page body using

<p tal:content="result/getText">

<p tal: content="python: result.CookedBody()">

But this doesn’t work, because once sdot has batched the news articles in groups so they can be displayed on different pages, the page results can access the metadata listed in the catalog, (so result/Description or result/Title is ok, but result/getText isn’t).

Now, to get around this, you can include the page body in the catalog metadata (which would defeat the whole purpose of having a catalog in the first place), or else you can use the getObject method to access the obkjct and all of its attributes, rather than just the ones specified in the catalog.

tal:define="resultObject result/getObject;
            resultText python:resultObject.CookedBody(stx_level=2);

 <p tal:replace="structure resultText">

Note that sdot news already has defined resultObject, which it needed to access the news item image. Also note the structure command, this converts the HTML or ReStructured text. If you just put in

<p tal:content="resultText">

you will just get all the HTML tags.

Adding images to a csv-table in restructured text

Created February 27, 2007 by

Anyone who has tried to add images using the csv-table directive in restructured text may have come to the following conclusion: it can’t be done. Well certainly not using any of the existing attributes or syntax for tables (an oversight?), but it can be done with the replacement directive.

Firstly, a csv-table in restructured text looks like this:

Currently Held Records

No Category Details Record Date Photo

1 Somersaulting Longest continuous distance 12 miles 390 yards Apr 1986

Currently Held Records
No	Category	Details	Record	Date	Photo
1	Somersaulting	Longest continuous distance	12 miles 390 yards	Apr 1986

And would created with the following code:

.. csv-table:: Currently Held Records
  :header: "No", "Category", "Details", "Record", "Date", "Photo"
  :widths: 42, 270, 270, 220, 119, 119

  1, "**Somersaulting**", "Longest continuous distance", "12 miles 390 yards", "Apr 1986", |green_face.jpg|

Ignore the first three lines—it’s the table structure info, similar to the way you would define an image, but instead defining table column titles and widths. Should be pretty obvious how to change anything there, but in case not, let’s recap a few csv-table fundamentals, as it is important in restructed text that formatting is followed precisely—right down to the space and comma:

a single space after each comma—no other spaces
bold text like **this**
all text inside "quote marks"
numbers don’t need to be in quote marks, unless together with text: "12 miles 390 yards"
return at the end of the line

The last line is an example of a row of the table, and more importantly contains the image:

1, "**Somersaulting**", "Longest continuous distance", "12 miles 390 yards", "Apr 1986", |green_face.jpg|

The image is the complex, for “|green_face.jpg|” (without quotes) is actually a “replacement” for the image definition, somewhat akin to an ID in css or a variable in pretty much any programming language you could name.

The image url, link and any other image parametres pointed to by the replacement id then get defined below the table (ie at the bottom of your reSt document):

.. |green_face.jpg| image:: green_face.jpg
  :target: green_face.jpg

Note:

The spaces are important as usual, as is putting the info on two lines
the name of the replacement/id can be anything, but it makes sense to me to use the image name
you can use the same image two times (or more) but only define the replacement once.

Example

You can view an example of a resturctured text csv-table including images here: Ashrita.com

Tips for faster speed in Plone

Created February 13, 2007 by

Plone, like any content management system, has slower page load speeds than static pages. Ensuring a fast enough page load speed so users won’t get turned off is therefore a big concern of Plone site maintainers. Here are some tips:

1. Avoid missing page components

If a part of a page (most commonly an image) returns a 404 or 301, it can slow down the page to more than half the speed. No matter what one does on system level you cannot make up for that kind of speed loss.

301 errors are particularly tricky since it is basically a bad link, but some code (most probably RedirectionTool) finds the requested object somewhere else and redirects the original request to the correct url. The url is served correctly, but that 301 makes the page load slow.

Actually the standard use of RedirectionTool (aliases) has the same effect, so it should be used just temporarily.

The Tamper Data extension (https://addons.mozilla.org/firefox/966/) to Firefox is a great tool because it allows you to quickly inspect headers of all the page components, not only the page itself. After installation, you will be requested to close the browser completely and start it again. Now Open Tamper Data from Tools menu in Firefox, and open a page you want to check out in Firefox. You can now see that Tamper Data window is being populated. Each line is one individual component of the requested page that has to be loaded in order to render the page. The most important column for us
is "Status". We are looking for 404 and 301 errors. 200 means you accessed site content without error and 304 means your local content is the same as in the squid, which is even better.

2. Page content – sometimes less is more

A page with twice as much content will most probably load two times slowly. Understandably that we want put as much possible into every page, but quite often less is more. Things that have to be generated by Zope (smart folders ect) will obviously take longer to load than static content

3. Caching

Most speed improvement on a system level involves caching – storing site content in easily accessible areas. Most large sites run a proxy cache like squid to serve up static content and keep Zope from doing the work. Other static content is cached in the browser itself. The most import thing is to make sure all pages and their components have correct caching headers; this is done by the CacheFu product, which now ships with Plone.

The whole plone caching business is described in http://plone.org/events/regional/nola06/collateral/make-plone-go-fast.pdf and CacheFu product documentation.

Obviously, any caching issue we fix has a double effect. The page is served from cache much faster and it does not create any load on zope server. Then the pages that have to be served by zope (cache refresh, editors) are much faster.

Another crucial point is to evaluate any new feature or product we are going to use from the caching and performance perspectives. Then we should document what adjustments have to be done when a product or a feature is deployed on a particular site. For instance if EasyBlog is installed on a site, the CacheFu will have to be set; if sdot is installed, the CacheFu will have to be set and icon image will have to be created, etc.

(Thanks to Atmasamarpan for all his help with this article)

Benefits of Writing with Lists

Created February 7, 2007 by

The Advantages of Writing in Lists.

Easier to Read. People don’t have time or the interest to read long sections of text. Writing by bullet points or numbers makes it easy to read and skim through. Picking up on the points which look most interesting.
Easier to Write. Writing lists tends to be easier. Writing by bullet points means that you focus on one point at a time. It also tends to encourage simpler writing which is a good habit to encourage.
Discussion. Lists provide an opportunity for discussion. For my next blog post I am going to choose my top 13 books that changed the world. It engages the reader because they start thinking what they would have chosen. If you want people to add comments to your blog this is a good strategy to employ.

Look Authorative Lists have a certain authority. People give a lot of respect to top 10 Bestsellers. If you give top 10 tips for writing a blog, it gives your points an added force.
Grab Attention. People skim read the internet. Surfing the internet is not like reading a book. When you a buy a book you know what you are getting. When you come across an internet page, 95% of people move on after less than 60 seconds. Lists and subheadings are a way to grab people’s attention before they move elsewhere.
Use Bold Text. As well as writing lists it is helpful to use a small amount of bold text. This makes it even clearer what the point is about.

(To create Bold text in reSt use ** Text to be made bold **

Create Content Lists are an easy way of creating content. Top 10 favourite books. Top 7 Reasons to write a blog Top 7 reasons to write lists…

Of course this doesn’t mean you have to write everything by lists. But some subjects work very well through writing by lists.

Interesting Links for building web traffic

Created February 7, 2007 by

Archetypes and ATContentTypes, part 2: Templates and customization slots

Created January 25, 2007 by

We will now look at how these schemas are called by the edit templates, and point out slots and hooks which Archetypes have left for customization.

Let us return to our Image type: selecting this type in portal_types and looking at properties will show that atct_edit is the default editing form, as it is for all ATContent Types. There is only one line in atct_edit, calling the master macro in the base_edit template. The main function of this macro is to call other macros for different parts of the page: most of these macros are located in the edit_macros file"

the top slot gets filled by edit_macros/topslot
javascript is looked after by archetypes_custom_js/macros/javascript_head
css: edit_macros/css
header,description, body,footer all in edit_macros.

So, let’s take a closer look at some of the macros in edit_macros:

Macros in edit_macros

header generates document actions like print, rss ect via the document actions macro and generates a title for the edit form with the name ‘Edit (Content Type)’
byline generates the byline, via the document_byline macro
archetypes_schemata_links: not sure what this bit does yet 🙂
typedescription returns the description of the content type, which will appear at the top of the page under the title. It can be edited in portal_types without customizing, but the resulting edit will only appear in the ‘add item’ listng and not the edit form where you want it.
body: This is where the main action happens: for us, the interesting part of this macro is:

<metal:block define-slot="extra_top" />

        <metal:block define-slot="widgets">
          <tal:fields repeat="field fields">
            <metal:fieldMacro use-macro="python:here.widget(field.getName(), mode='edit')" />
          </tal:fields>
        </metal:block>

        <metal:block define-slot="extra_bottom" />

If we look at the above piece of code, it is essentially asking us to go through each field of the image schema and get its widget (For more on schemas and widgets, see part 1). Note the two slots ‘extra-top’ and ‘extra-bottom’ if you want to put something above or below the image widgets without changing the template.

The body macro also contains a good bit to do with sending the form, and the buttons. It contains a block defining Previous, Next (these automatically appear if there is more than one page in the edit form) Save and Cancel buttons. There is also a slot called ‘extra-buttons’ if you need to make any more buttons for your form, so you can make them in another template.

Whilst Archetypes does have a range of customization slots, one cannot make any easily reversible customizations to the schema as one might with a page template, as the files containing the schema are not stored on the zodb.

One is then left with the prospect of defining a new Archetype derived from your old one, either in a new product or as part of an existing one. Then in Extension/Install.py the portal_types tool can be manipulated to use the new type, or alternatively you can set that the old type can be just not globally allowed while the new type would be. Before you run into that course of action, there might be extra hooks for customization I havent found: for example, Villiam pointed out a post_validate hook for validators.

I am very grateful to Villiam Segeda, our resident Archetypes expert, for teaching me what little I know.

How do they do the navigation on the plone.org site?

Created January 25, 2007 by

When you visit the plone site (http://plone.org) you see that the side navigation bar (viewable at any page besides homepage) contains only the root folders, the item and its immediate ancestors. A very nice behaviour, and one I spent a while fiddling with navigation properties trying to make happen.

But actually the solution is much simpler. Every version of Plone since 2.1 comes packaged with two identical states ‘public draft’ and ‘published’ – items in either of these two states are available to the general public. Why two identical states? Well, it does enable the user to choose which items he wants public but not available in navigation by putting the items he wants available in navigation ‘published’ and the ones he doesn’t ‘public draft’, say. Then he can go to navigation properties in preferences, check filter workflow states, and put in published into the box below.

That’s what Plone have done on their site: in addition, only the folders at site root are published, and all other content is visible, so that it will only appear in navigation if the actual page is selected.

Hide email address from spammers

Created January 13, 2007 by

hide email

<p>Send your comments and questions Richard

<script language=javascript>

 <!--

 var contact = "Joe Blogs"

 var email = "joebloggs"

 var emailHost = "vasudevaservice.com"

 document.write("<a href=" + "mail" + "to:" + email + "@" + emailHost+ ">" + contact + "</a>" +   ".")

 //-->

</script>

</p>

NOte many plone sites have javascript automatically disenabled. to see what it looks like press more

Send your comments and questions Richard