Sunday, August 22, 2010

Mosweb intranet goes live on Struturo

MOSAID Technologies Incorporated is one of the world's leading intellectual property (IP) companies, focused on the licensing and development of semiconductor and communications technologies.

Mosaid asked LavaTech to create an intranet for them using Struturo. Their primary focus was creating something to manage a lot of content and streamline the content creation along the way. This was a conversion from a PHP website but with many enhancements.

Using several Domino backend databases, we were able to display a lot of information through one coherent web interface and one overriding Struturo database. This way they could manage the navigation elements around individual areas of the site in one place.

This was our biggest intranet rollout to date and it included many modules including:

A file manager (mostly pdfs)
A printable company directory from the website pulling data from Domino Directory
A menu manager for cafeteria items with web editable capability
Photo gallery
Live updating weather widget and stock ticker
Event calendar

Mosweb (Intranet for Mosaid)

Monday, May 3, 2010

Struturo v1.79 Released

Features

Auto generation of sitemap.xml for use in SEO.
Added a new field to the theme document to allow someone to choose to incorporate a block into their header div. Allows for custom logins or lookups to other databases to show their results in the header area of a website.

Enhancements

Hide any form tags in the header div when a document is being edited or created. This prevents a collision with the Domino generated form tags.
New block list by category display type:Dates,Titles (without abstract).
Added a field to distinguish from a UI edit/save from an agent running or pasting a page. Helps with the sitemap.xml to keep the actual mod date of a page.
Error trap when opening a page and the DB Conguration repid doesn't match the database repid. Previously the user would just get a prompt for servers when this happened.
Added class="title" to the h1 tag for 404 error so easier to style like the other pages.
Added a trim to the lookup key for a dynamic block in the content area after a customer reported no results but they were passing a trailing space inside the dynablock tag. Also passed a comment to the browser reporting the error doing the lookup.
Added capability for secondary databases to correctly compute breadcrumb navigation.
Added a block type for dates to show in yyyy-mm-dd format for foreign language sites.
Added capability for secondary databases to set the list item to "current" on the left/right columns if the current url matches the link.
Add a check in the DB configuration document (if RSS setup) that walks existing pages looking for whether they have the correct value for their link.

Bug Fixes

Fixed a bug where a dynamic hostname setting in the DB configuration caused the web edit of a page to display without any style.
Modified the Image to show in blocks area by modifying the image picker to account for multiple images in one file document. Previously, choosing a file document for images imported all the image links in that file.
Fixed a bug where section security was only acting on pages and not subpages.
Fixed a bug where if the last tab was highlighted and had a submenu, the highlight class wasn't being passed.
Fixed a bug where if blocks had the same block ID ending (e.g. blk-assembly & de-blk-assembly), there were duplicate titles showing in the pick list for blocks in the section definition.
Fixed a bug where a user sorting pages ascending or descending and setting the date created for those pages to the format yyyy/dd/mm was causing an incorrect sort.

Monday, April 19, 2010

Advartia.eu goes live on Struturo

Another multilingual site (English/Greek) goes live on Struturo. As of today, only Greek side is live but English coming soon.

Using section definitions, it's possible to have 2 sites in one by displaying the English pages in English sections and the Greek pages in Greek sections.

Quote

"I have used the images and abstracts option and it looks really great. I am loving Struturo more every day...."
- Vassilis Papaeconomou (customer)

Advartia.eu

Wednesday, March 31, 2010

Ewab Engineering Group goes live on Struturo

www.ewab.com

Today, Ewab Engineering Group's website went live running on Struturo.

Some of the core features are a nice image rotator and a tabbed table interface using JQuery Tools. Additionally, there is a link at the top to translate the pages using Google Translate.

Friday, February 26, 2010

Struturo v1.78 Released

Features

Added the ability to choose whether or not to notify about web errors caused by web robots.
Added the ability to override the global theme at the section level.
Added capability to launch to a different hostname depending on the server when they 'Preview in Web Browser' from within a page. For cases where customer replicates between test server and production.

Enhancements

Modified the way the theme document is pass into HTML. Now, if the theme document title doesn't end with .css, one is added automatically. Previously, a theme document was passed out as CSS but without the .css ending. The reason for this is to make the expires header easily added in the internet site document.
Default new pages' abstract_date to @date(@created). This is to aid in the cases where someone includes a page in a block sorted by date but after copying/pasting, the date changes from the original creation date to the new pasted date. This will work on new documents. Existing pages will still need their date set manually if they have copied/pasted and didn't have an existing abstract_date value.
Trim the registration key of spaces after someone had a space after the key which was causing the registration key to fail.
Made the configuration document's theme choice field into standard keyword to accommodate longer theme names.
When a page is shown on the web with a missing section, a nice error page displays informing the viewer of the exact problem and how to fix it (namely, which section is missing).

Bug Fixes

Fixed a bug where showing a page on another section was showing breadcrumbs list if the original section was showing breadcrumbs.
Fixed a bug where showing a page on another section was showing html above the content if the original section was showing html above content.
Fixed a bug where showing a page on another section was showing the footer override from the previous section.
Fixed a bug where an existing section that originally had a block that was now deleted was causing an error about CurrentList_Titles in the dialog picker.
Fixed a bug where a comma in the title of a block was dividing into two values in the dialog for managing section navigation.
Fixed a bug where a new page without a custom base HREF would give an error trying to insert an image file.
Fixed a bug where a previous version whose parent document was deleted was still showing on the website if you navigated to that URL.

Monday, February 15, 2010

A sneak peak at the new web enabled section editor

The latest version of Struturo (v1.77) only allows editing a section via the Notes client. In a version coming soon, you will be able to easily edit sections using just your browser.

In existing versions of Struturo, you can edit and create pages using your browser, you will now be able to edit and create sections using only your browser. And the nice thing about this interface is that it's drag/drop enabled which enables you to add/remove/move blocks and tabs around really quickly.

Check it out

Friday, October 23, 2009

Struturo v1.77 Released

Enhancements

Added more inline help to the page definition.
Added information to the 'help about this database' document regarding Struturo page architecture.
Modified the field on the File form that computes the path to a file attachment to replace "&" with "& amp;" for web validation.
Replace space with "%20" and "&" with "& amp;" when inserting images into HTML on blocks and pages.
Removed the expand/collapse buttons as irrelevant in the sections view.
Changed to a column # lookup for the web footer formula to speed the footer lookup (slightly) for pages.
Ability for older versions (pre-v1.0) of Struturo to display their images correctly when they upgrade to a newer version.
Allow for 4 css files on a section definition.
Modified the view column in the Sections view to show name of the tab + ID. Previously ID only.
Removed the part of the paste agent that created a new tab id for any tabs that were pasted. This was causing problems when copying/pasting from other Struturo databases.
Added the database title to the top of the Theme document. Helps when copying from one theme in one database to a theme in another database.

Features

Ability to view a page in another section if the page URL is /ID/?open§ion;=othersection. The reason for this is to accommodate customer requests to show one page a different way depending on how they came to that page.
Ability to copy blocks (both,left or right) from one section to one or multiple others.
Added ability to implement a footer formula on a per section basis to override the db configuration footer.

Bug Fixes

Fixed a bug causing blank category blocks on the site when they had "&" in the category value.
When checking for duplicate ID's on pages, resolved an issue where a duplicate ID alert was generated incorrectly for a previous version of the page that was saved.
Fixed a bug where if the configuration document had the Hostname type as dynamic and the user chose to create or open a section definition on a local replica, a popup came up asking what server to use.
Fixed a bug where and error was returned if a section had not tabs (or only 1 tab) defined.

Thursday, October 22, 2009

Rebranded SeaburyGroup.com goes live on Struturo

Yesterday, October 21, 2009, the Seabury Group expanded their website presence on Struturo. They added a portal interface to the front to allow separate business units to have individualized sites.

Thursday, October 22, 2009

Rebranded SGIAviation.com goes live on Struturo

Yesterday, October 21, 2009, the SGI Aviation expanded their website presence on Struturo. They added a portal interface to the front to allow separate business units to have individualized sites.

Sunday, October 18, 2009

New Feature in v1.77: Show a page in another section

On occasion, customers have asked to be able to show the same page in different ways depending on which link was clicked on by a user. In order to avoid creating duplicate pages, one way to handle this is to pass an "&Section;=x" where x is the section name.

Example:

For example, if this customer wanted to show this page on the EN\Home section, they could do so by adding "?Open&Section;=EN%5CHome" to the end of the URL. Notice that the %5C is simply the escape character for \ (backslash). Because it's in the URL you have to escape any unique values. You can replace spaces with a + or %20.

//ID/home-de?open&Section;=EN%5CHome

Wednesday, October 7, 2009

New Feature: Modify the footer by section

A new feature has been added to Struturo v1.77 to modify a footer for each section. So each section can now override (if necessary) the global footer set in the DB Configuration document.

It is located under Advanced\HTML in the Section Definition document.

Monday, September 21, 2009

Delta Global Logistics goes live on Struturo

Simple website but has a couple of nice techniques including the Cufon text replacement technique.

Friday, September 11, 2009

When it comes to HTML, thin is in!

On occasion, customers come to us with an existing website on the Domino content management system. For that matter, when they come to us with existing content on some other system and we must migrate it. Part of our job is stripping out extraneous HTML.

When customers are reviewing Struturo versus other content management systems, especially those and Domino, we tell people to read our source code from the browser. Any styling tags should be put into the stylesheet. They should never be in the HTML itself.

Just today, we were working on a page and copying the table from the existing Domino content management system source code into Struturo. It had in-line fonts defined, table alignment specs, spam tags with in-line styles etc. We stripped all of that out to just bare-bones tables and cut the HTML at least in half.

It's not just bandwidth savings that's important. It's the fact that in-line styles are used in spite of the stylesheet. So if a customer changes their styles down the road they end up having to edit the HTML content instead of the simple task of editing the stylesheet itself.

When it comes to HTML and Struturo output, thin is in!

Friday, July 3, 2009

Struturo v1.75 Released

with hierarchical pages!

Bug Fixes

Fixed a bug where a page with override section and use column2 defaults was causing the twocols div to not display.
Fixed a bug in the HTML output for JavaScript files in the theme document if the theme name had a space in it.

Enhancements

Search Results now show HTML above content in section definition.
New agent allowing bulk way to hide pages from the sitemap.
Add the id="twocols" wrapper div even if no left column.
Added a check for whether an error was generated by a web robot in the notification email.

Features

Subpages. Ability to have a hierarchical list of pages. Hiearchical admin view on web.
Ability to add additional JavaScript/CSS to individual sections.
Added a new category sort "Alphabetical (reverse)" which is a descending sort.
Create a dynamic sitemap (/sitemap?readform).

Thursday, May 28, 2009

Text replacement using Cufon in Struturo

Friday, April 3, 2009

Struturo HTML Layout

The best feature of Struturo is the simple architecture. It's making the least change possible to affect the largest number of pages.

Architecture

Sections

The section document controls which tabs show and which blocks show on the columns. Because unlimited numbers of pages can belong to a section, any change to the section (add/remove a block) impacts all those pages in that section immediately.

Example section document

Blocks

Think of blocks as little blurbs of code or lists of links etc. The nice thing about blocks is once defined, they can be added to sections or even inserted into a content area. They can be @formulas, lists of links, lists of pages by category, or HTML (including widgets).

Monday, February 23, 2009

SeaburyOCI.com goes live on Struturo

Another in the list of Seabury sites...

Tuesday, February 3, 2009

Starby Hotel website goes live on Struturo

www.starbyhotell.se

Multi-lingual Site

This site incorporates 3 languages into one Struturo framework. Using individual language sections enabled us to create distinct areas for 3 languages (Swedish, English, German).

Thursday, January 22, 2009

Struturo v1.71 Released

Bug Fixes

Made a change to account for someone putting pass-thru HTML in the title of a block which was causing a problem with the output HTML for that block.
Fixed a bug where base href server hostname set to "Fixed" in the db configuration wasn't updating the HTML to set the base href to a static value. If you entered the site using another hostname, that hostname was what showed up in the base href.
Fixed a bug where opening the home page via the ID view was showing the edit link for anonymous users. This is a rare case that only happened when root level redirection was enabled on the internet site document. Looks like it only affected 1 customer.
Fixed a bug where Titles & Abstracts dynamic block was showing duplicates for alphabetical sort.

Enhancements

Updated the file definition window title to remove the colon which doesn't make sense now that there is no file name. This made more sense when there was only one file per file definition.
Added validation to the theme name to make it required to save the theme document.
Allow for inserting HTML above the tabs by section.
Allow blocks to have up to 20 links in list of links option.

Features

Modified the theme document to allow for JS URL's (not just files). e.g. ajax.googleapis.com or another CDN (content delivery network).

Tuesday, December 23, 2008

Seabury APG website goes live on Struturo

Another in a series of Seabury websites

www.seaburyapg.com

This site went up quickly because we leverages the same theme as the previous sites. Another advantage of Struturo is that you can produce several sites quickly once the first theme is done.

Monday, December 22, 2008

Struturo v1.70 released

Bug Fixes

Fixed a bug where the html above the content on the section was showing below the title and subtitle on pages.
There was a glitch where a temp document (used for versioning) was not converted to child page and because there was no form associated, the website was giving an error for that page.
Fixed a bug where user opens at /ID level which should open the "home" page but was showing no content.
Fixed a bug where a block by category had an & in the title and wasn't showing on the output in pages with dynamic blocks.
Fixed a bug where if the last tab had a submenu, the output HTML had both class="submenu" and class="last submenu".
Fixed a bug that occurred when versioning was enabled. The search results contained previous versioned docs.
Fixed a bug where if a page had multiple ID's, and that page was returned in search results, the results had a comma in them.
Fixed a problem where the image browser didn't work right on the web editor if the custom base href didn't contain a .nsf.
Fixed a bug where if files documents had multiple files, they weren't sorting in the image browser in the web editor.

Enhancements

Removed span tags from submenu elements in the tabs. They are extraneous.
Set the default for Files, Feedback, and Administration to collapsed.
Added the section title to the definition at the top of the form. Helps when you have multiple sections open at the same time to distinguish one from another.
In the all by form and the trash admin views, show previous version pages. Helpful when you need to remove the previous versions in bulk.
Modified the theme document window title to include the word "Theme:" so it stands out in the tabs.
In the section definition, the tab dialog had text about Column 1 instead of tabs to display. Fixed.
In the section definition, added a queryclose event to the tab dialog to capture the case where a user doesn't choose any tabs and tries to close the dialog or chooses some tabs but doesn't add them to the list.
Submenu picker in the tab definition only shows the main ID for the pages if there are duplicate ID's.
When inserting HTML on pages and blocks using the action bar buttons, don't put any leading new lines but put 1 trailing new line.
Accounted for "&" in the ID - was causing validation failure in the edit link when logged in. Wherever possible, making the output code XHTML transitional valid.
Recomputed the base href formula for custom base href's. Previously, the hostname had to be hardcoded into the base href formula for custom. Now, the path only can be placed into the custom base href field allowing for multiple domains with a custom base. Backward compatible for previous versions if hostname is in the base href, it is retained.
The Insert HTML\List(unordered) action bar button on pages and blocks will replace the "* " with null to allow for copying/pasting a list from the web.
In sections, added a 'remove all' button to the tab edit dialog.
Accounting for & in the title and subtitle of pages.

Features

New view files by filename. Especially helpful if you have multiple files per document.
New action for pages and blocks to insert a simple table (empty) into the HTML area.
Added the tab id for the tab picker in sections to show the ID. This helps in cases where the tab names match (like in a multilingual site).
When a new file document is saved, a check is done to make sure none of the attached files are duplicates with other file documents.
When saving a page, check for duplicate ID's.
Updated the defaults for the web editor to include pastetext and pasteword which are paste from text and paste from Word buttons. Otherwise, pasting from Word inserts a lot of extraneous HTML from the web editor.

Wednesday, December 10, 2008

MedTech Group website goes live on Struturo

Yesterday, www.medtech-grp.com went live on Struturo.

This was a conversion project. The company was happy with their design but was unhappy with the implementation. The drop down tabs didn't work on any browser but Internet Explorer. There were inconsistent fonts throughout. The HTML source was bloated. And the content was difficult to update.

Friday, December 5, 2008

Ridewell Corporation Website Goes Live

www.ridewellcorp.com went live yesterday.

By adding Struturo and a new theme, we vastly improved the look and feel of the website, making it look more professional as well as easier for end users to navigate. We also added a search capability and an easy way for them to add new products and have the product lists automatically update using the signature dynamic block capability of Struturo. And the entire site is XHTML transitionally valid.

Thursday, September 18, 2008

Seaburygroup.com goes live on Struturo

We are pleased to announce another beautiful site goes live on Struturo. Specialty features are JavaScript and Flash components. Used jquery extensively (but unobtrusively) on this site.

Friday, August 8, 2008

Tip: Use backgrounds and borders to find the edges in your CSS blocks

CSS layouts can drive you nuts

One of the most confusing things about CSS layouts are the use of floats. So I'm passing on a tip that helps me visualize where the backgrounds and edges are of blocks during the styling. Comes in handy during cross-browser testing.

By adding in some backgrounds, I can start to see the blocks and where the browser thinks the edges are. Also, if I put a border on and it collapses to the top, I know that I have to float that element to get it to wrap around the inner floats. Read up on CSS floats for more info.

Here's an example I'm doing today

Adding these colors let me easily get all the sizes and floats in place and was able to have 4 major browsers up and make sure each one fit well.

And the result

So now, it's easy on the web to see the exact location of the blocks. Obviously, once things are lined up, remove the colors and you get a perfect result.

One more thing

Be careful with border because if you have an exact pixel sized width block, it will add 2px to the width of that block.

Tuesday, August 5, 2008

Struturo v1.68 released

Bug Fixes

Fixed a bug where a dynamic block that was not a Formula type or a Category type was not displaying in the content area.

Enhancements

Added check for Anonymous or ACL access < author when determining who to show edit link.
If you open the db at the .nsf level, it opens the home page (ID=home)
Stopped showing duplicate sections in the page section picker if a section definition document had a conflict.
Modified the text that passes out for the tabs to change "&" to "&" to make valid HTML.
Added ability to pick from multiple files when doing the HTML\Image button inside a page on the Notes client.
Made the interface for overriding section navigators in pages more user friendly.
Improved the insert HTML\paragraph(s) button on pages. Previously, there was a low limit on the amount of text you could insert as paragraphs.
Section picker button on page to account for the case where a section is created while the page is still in edit mode.
If links block has "&" in link title, pass through to the link as "&".
Default for selected tab in section definition is none.
Fixed an issue where a customer had really long ID values causing the admin views of pages to squeeze in and not fit the page.
If someone opens the ID view from the web, it opens the "home" page.
Upgraded web editor to Tiny MCE v3.1.0.1.

Features

Ability to add HTML above content area in pages in a section to the section definition.
Capture the case when a block is being saved with the same ID as existing block.
New dialog for adding unordered list as HTML to pages.
New HTML type "Link to a File" in the pages in Notes client.
Added capability to disable web editing for text and html content types.
Ability to submit a search and have the results display in a specific section. Allows for multiple search blocks in various sections of the site.

Wednesday, July 30, 2008

Seacappartners.com goes live

Wednesday, July 30, 2008

New Feature in v1.68: Ability to disallow web editing for certain pages.

We have certain pages for customers that go outside the norm in the type of HTML. For example, one customer wanted a sub-tab interface on the home page. The problem is that when the users edit from the web, some of the classes or id's can get lost in the edit. This causes the tabbed interface to stop working correctly.

Example of more complex HTML page

To alleviate the problem for those pages that really are easier to edit carefully from the Notes client, we added a feature to disallow web editing capability for specific pages.

On the web where a person who is logged in and capable of editing a page, they would normally see this:

Instead, they see this when the page is disabled from web editing.

Tuesday, July 29, 2008

HLNand.com site redesign on Struturo goes live

Attention paid to javascript compressed files and caching.

Monday, June 16, 2008

Add HTML to the content area of all pages in a section

A customer requested an image to appear at the top of every page in the section. So at first we started putting the img code at the top of each page in that section. But then we decided that it would be a great feature to allow customers to insert some HTML at the top of the content area of every page in a section.

The advantage of this approach is that if the image changes, we can change it in one place. Also, it's a good example of how the simple architecture of Struturo can accommodate a new feature like this easily. There is a lot of power in making one section definition change and updating potentially hundreds of pages immediately.

Custom HTML inserted in each page in the section

Put this image in every page in the section using section definition

Tuesday, February 26, 2008

Searching Struturo

There is a specific search form and view for results built into Struturo. This allows you to easily add a search block to a column and get formatted results when doing searches.

Create a block

The easiest way to get started is to create an HTML block. This block will submit 2 fields to the backend form: "Category" and "Query". If you don't want to search by Category, just leave the category input field value equal to null or don't include it in the form submit. "Query" will be the field the user is filling in.

In this example, the category field is "Press Release" always so it is hidden (type=hidden) from the HTML.

Here's the code if you need to copy

You could use a submit button instead of the arrow graphic in your implementation. And don't pass a category value unless relevant in your search.

<form method="post" action="Search?CreateDocument" name="Search">
<input name="Query" value="" />
<input name="Category" value="News Release" type="hidden" />
<a href="" onclick="document.Search.submit();return false;">
<img src="Files/button_arrow_14x18.jpg/$file/button_arrow_14x18.jpg" 
alt="search" width="14" height="18" border="0" />
</a>
</form>

Style the block accordingly

We have this as a blue background with an arrow for the submit. If we had it to do again, would probably just do a standard form submit with the validation added later to the page using JavaScript. Don't typically recommend this approach in case someone has JavaScript disabled.

HTML Output is just a table

So you can style it the way you like in your theme document. Note the thead and tbody are in there in case you want to use JavaScript to make the search results sortable.

End result can be very pretty

In this case, we actually added hover and click features using JQuery but you could style this table any way you need.

Make sure to create a Section titled "Search Results"

The output view is going to show as the section called "Search Results" so make sure you have a section with the correct columns and tabs to make sure the results look like they are on a decent looking page.

Standard Domino Search

The end result of submitting the page is just a typical search view format so you can just search the view called "SearchPages" so whatever means you need to get to that URL is fine. Note in this example that the result has been URLencoded so you see %20 for space, etc.

/SearchPages?SearchView&Query;=%5BCategory%5D%20contains%20%22Press%20Release%22%20AND%20(aviation)

Friday, February 1, 2008

New feature: Override Section

The whole purpose of sections in Struturo is to simplify management of navigation elements. So if you want to change a navigator element for an entire section, all you do is modify one section definition document. Every page in that section would then have the change.

So recently, a customer wanted an individual image to display on individual pages in a section. But they still wanted the same layout for all the pages. So rather than create separate section definitions for each page, we added the capability to the page to override a particular section navigator.

When you click on the override section checkbox, the section defaults are already filled in for you. So it's easy to make a minor change specifically for that page, yet retain the power of the section definition control.

This new feature will be in version 1.60 coming out soon.

Monday, January 28, 2008

My graphical bullets won't print!

We all love graphics. So naturally, when your customer wants to display a bullet list, they are not satisfied with a black circle or square. They want a fancy triangle or colored circle.

Style sheet to the rescue

A style sheet can accomplish this very easily by adding a background graphic to the list item and setting the list-style to none.

Uh oh...

The downside to this approach is that the default setting for many browsers is to hide background graphics. So in this case the user loses the bullets when printing.

This is easily solved in Struturo by taking advantage of the print tab in the theme document. All you have to do is set the list style for the ul tag to something other than none and reset the left margin and padding.

New print preview

Wednesday, January 9, 2008

Adding pizazz to a title

Browsing various web templates, you might notice a technique often used for titles where the last word of the title is a different color than the rest of the title.

It's a minor change, but it does add some interest to those titles.

Because it's irrelevant to the core HTML, we do not like to modify the HTML directly to add something like this.

Instead, we use the concept of unobtrusive JavaScript which can update the page on loading (actually a little bit before loading) with extraneous HTML like this.

We prefer to use JQuery as our library of choice for JavaScript. It's a small sized JavaScript library and very nice in its approach to DOM navigation. You can reference elements in the same way you would in the stylesheet. But I don't want to get into all that, you can read about JQuery on your own.

So by adding the JQuery JavaScript file to the theme document and also a short JavaScript to do the work, you can have this technique enabled on your site.

If this is the only JavaScript you are going to use on your entire site, you may make the determination that this little feature is not worth loading two JavaScript files. But on the other hand, if you want a little pizazz, it's not a bad thing to do.

Tuesday, January 8, 2008

Great technique for graphical tabs

Struturo creates tabs as a list of links in an unordered list. Then you use is the CSS theme document to style those tabs. So there are a lot of options about how the tabs will look.

But what if you want to use graphical tabs as opposed to text tabs?

Well, a high performance way of doing it is to create one tall graphic as opposed to multiple smaller graphics. With one tall graphic you can display the tab itself and its hover state simply by changing the background position. This saves the HTML from multiple grabs to the server per image.

Also you can account for a user who does not have CSS enabled by simply showing the standard link text.

There is a technique for putting padding enough to shove the link text outside the visible area and replace it with the graphic. This is also a nice technique to maintain accessibility. You can search for text replacement on the web to find the technique so I won't go into it here.

Here is the original HTML:

Here is the CSS two support the graphics and the hover state.

ul#tabs { margin:0; padding:0; list-style:none; float:left; position:absolute; top:97px; }

ul#tabs li { margin:0; padding:0; float:left; height:21px; }

ul#tabs li a { margin:0; padding:21px 0 0 0; overflow:hidden; display:block; height: 0px !important; /* for most browsers */ height /**/:21px; /* for IE5.5's bad box model */ background-image:url(../Files/bg_tabstack_160x210.gif/$file/bg_tabstack_160x210.gif); }

ul#tabs li#idtab-training a { width:97px; background-position:0 0; }

ul#tabs li#idtab-training a:hover { background-position:0 -21px; }

ul#tabs li#idtab-techservices a { margin-left:-1px; width:158px; background-position:0 -42px; }

ul#tabs li#idtab-techservices a:hover { background-position:0 -63px; }

ul#tabs li#idtab-assetmgmt a { margin-left:-1px; width:160px; background-position:0 -84px; }

ul#tabs li#idtab-assetmgmt a:hover { background-position:0 -105px; }

ul#tabs li#idtab-solutions a { margin-left:-1px; width:101px; background-position:0 -126px; }

ul#tabs li#idtab-solutions a:hover { background-position:0 -147px; }

ul#tabs li#idtab-consulting a { margin-left:-1px; width:107px; background-position:0 -168px; }

ul#tabs li#idtab-consulting a:hover { background-position:0 -189px; }

Sunday, January 6, 2008

2008 Copyright on Footer

Have you noticed websites' footers still in 2007?

That's why we made the footer formula able to accept @formulas. This way, when you create your footer on Struturo, you can set the year as @text(@year(@today)) so that it will automatically switch years for you.

You can do other fancy things like show the login name, etc. but when we build sites for clients, we generally make sure that the year formula is in there as computed so there is no need to edit HTML after the new year.

Wednesday, December 12, 2007

Show a custom favicon.ico in Struturo

Without having to add the file to your Domino server

Don't use the orange logo you see on most Domino sites

Instead you can use a custom favicon very easily in Struturo. Simply open the DB configuration document and go to the favicon tab and add your custom icon. This will now appear in the URL block and if you use Firefox, it will appear on the tab.

If you need some help creating one from a logo, here are a couple nice sites that you can use to do just that:

Friday, December 7, 2007

Coming Soon: Web Editing of Pages

Most clients have Lotus Notes so they create the content from the Notes side. But there is a push from some customers to edit from a web browser.

It also helps keep the HTML pure because the web editor can be set to disallow some bad HTML that might otherwise come in from a Notes client. Also, we believe we might be able to make an easier experience to manage content from the web.

Note our work in progress

Tuesday, December 4, 2007

How to add a form to Struturo

Submitting forms to other existing Domino databases

Many of our customers have existing Lotus Notes databases with Web forms for submission. They want to put those forms into Struturo. Here's how to do it.

Overall Approach

The basic approach is to just take the form tags and inputs and put them into a page which will just submit to the current location.

One fairly easy way to do this is to just open the existing form on the web, view the source code, and copy everything from the beginning form tag to the ending form tag and paste it into a page. I say fairly easy because you might have to strip now a lot of the extra information that Domino passes through including font tags and breaks and keyword refreshes. You can add any JavaScript that you need such as for validation or showing and hiding fields using traditional JavaScript methods which I won't cover in this article.

Real World Example

So here we have a traditional Domino Web form for contacting this company.

Copy source and paste into a new page (as HTML)

Customize form tag

You will also have to customize the beginning form tag to do a create document. See the screenshot for details but make sure the action points to the full URL including http and also set the action to create document. FYI - Javascript is disabled at the database level in Struturo.

Clean-up the HTML

Remove any font tags, put ending slashes on input tags and break tags, remove table widths, remove table borders unless you want them, remove keyword refreshes. Our goal is to represent the actions and the look and feel using style sheets and JavaScript, not in-line HTML as Domino typically spits out.

Add a submit button

Because we have disabled JavaScript in a database properties, there is no need to complete Domino's inherent form tag because it won't exist in this scenario. Therefore in most cases you can put a simple submit button at the bottom of your page content.

Modify the $$Return value in the original Domino database to point to a thank you page in Struturo

The thank you page is just a standard page that you would create in Struturo. Simply point to the URL of that page using standard $$Return from the original Notes database.

Add in any Javascript validation as you need

For simplicity, not discussing how to do that in this article. Contact us for support if you need it.

That's it

Your form should submit as usual to the original Notes database you had that collected this form in the first place.

Friday, November 30, 2007

Trust-Factory.com goes live running on Struturo

Our warmest congratulations go out to Trust-Factory.com. They are the makers of the famous DNA Network Analysis product for IBM Lotus Domino. Their new website just launched and is running on the latest version of Struturo^TM. Visit them at www.trust-factory.com.

Wednesday, November 28, 2007

Add Meta Tags to your pages

The simple tags like title description keywords can be added simply by entering those values into the various fields. For additional meta tags, there is a free-form field on the pages allowing you to enter tags such as site owner necessary for Google's site maps.

Simply go to the advanced tab on the page and you will find access to the meta tags.

Sunday, November 11, 2007

New Youtube.com video added

Thursday, November 8, 2007

Making your Struturo pages print nicely

Printer friendly is nice but what's even nicer is producing a good result even if the user just chooses File\Print from the menu while viewing a page.

Here's a tip that we use that works really well across browsers. Using style sheets for page layout is great but doing so typically requires fixed width layout to look nice on screen. The problem is that most of the time the page is set to a width that looks nice on the screen but when printing it's too wide.

This article describes a page that only has one navigator column on the left and a content area on the right. But you can take this concept to a three column page as well.

Use percentages that match your column width ratios

The simplest way to produce a nice printed result is to create the print styles with percentages that match closely to the pixel widths defined in the screen version. So, for example, if your left column is 250 pixels and your main column content column is 700 pixels for a total of 950 pixels then you can make an assumption that the left column is approximately 25% of the entire width. You don't have to be perfect here. So, in your print styles, you would specify that column1 (#col1) is 25% with in the main column (#main) is 75% width.

Editing the theme document for print styles

FYI - Not showing all the print CSS. We cut it down to focus on the point of the article.

Easy. Works well cross-browser.

What's nice about this solution is depending on what browser the user's have, the maximum width in pixels varies. So it's hard to be 100% sure that if you set a fixed pixel width overall that you're going to get a decent result across those browsers.

Tip: Exclude background graphics

The other thing that we like to do is exclude background graphics from printing, so if column 1 has a background graphic on it we would typically set the background to white and similarly with the main column (if it has background graphics). Also if there is any content pushed down to account for that graphic, you have to adjust the margin or padding on the top to make a print nicely without the graphic.

Here's what it looks like on the screen

Here's an example that we were working on today. The logo is blurred now because this site is yet to be announced. Also, note the content is totally fake right now. Just copied what was in the template file for now until they get the real content in there.

Print preview in Firefox

A bit blurry because this is the screen capture from the print preview. But looks nice.

Saturday, August 4, 2007

Customizing a section using the 'body tag' feature

Easy way to make one section unique without having to add more HTML content to the page.

Suppose you have a section that requires each H2 tag to have more space above it than all the other pages in the site? Rather than edit every H2 tag in that section by adding a class, wouldn't it be much easier to just add a class to the body tag of that section?

Well this is easy to do in Struturo^TM. Simply edit the section document for those pages and add a word into the "Body Class" field. This will put a class tag onto the body tag on all HTML pages in that section.

For example, in the gallery section, it was necessary to space each screenshot header tag slightly differently than the rest of the site. So what we did was add a class called gallery to the Gallery section. So now when you are on the Gallery page, the H2 tag has taller margins than the other H2 tags in the rest of the site.

The CSS is as follows:

body.gallery div#main h2 {margin-top:20px;}

The result is that the Gallery section is easily styled differently than the rest of the site without making any changes to code or HTML. This is a very powerful feature of CSS and results in less coding of content.