Use bitweaver to build a web site that is very nice

Based on Andrew Wulf's article for thecodist.com, let's elaborate what bitweaver can do for you to follow his guidelines.

Created by: laetzer, Last modification: 21 Aug 2009 (15:53 UTC) by Tyler Bello
In his article 13 Ways to Avoid Building Web Applications That Are Not Very Nice ;) ... Andrew Wulf of thecodist.com writes how websites are not rocket science, yet he is "amazed at how companies with deep pockets manage to produce drecky sites. This is your public face, would you go on a date with mud on your face and spinach in your teeth?" Sooo, let's see how bitweaver helps you to:

1. Put javascript and css in their place

Bitweaver's Javascript and CSS files are kept in separate files and not embedded in every page. Your visitor's browser downloads them only once - just how it's supposed to be done since 2001 and has lots of advantages. At bitweaver.org, there is a whole documentation category on theming and styling.

2. Use compression

In bitweaver's admin panel, you find a checkbox to activate gzip compression. This very popular feature speeds up the web and is understood by virtually all servers and browsers. Bitweaver combines often used Javascript functions in one file bitweaver.js that is compressed to one third its size. Bitweaver uses a template engine called Smarty with features like caching. Upon installing bitweaver, it will be detected if the opcode caching applicaton eAccelarator is available on your server, and, if not, recommended. Bitweaver has also been succesfully tested with XCache, included in Ubuntu.

3. If you put a DocType in your page, validate against it

For me, poor HTML was the reason to leave Tikiwiki when bitweaver was forking from it in 2003. Bitweaver adapted the so called web-standards from day one. Using Joomla, Moodle, Tikiwiki, Drupal, Typo3 and many single-feature OSS applications, I learned that bitweaver has some top notch HTML code and a very useful, clean structure. There are not dozens of wrapper-DIVs, no faked portal-layout that forces you to design "around it", and certainly no layout tables. Making a custom style is so easy, it's fun. Techniques like Layout Gala and Tango Icon Project are incorporated into bitweaver. For the behaviour layer Mochikit and Prototype have been used by several packages. For WYSIWIG editing you can choose between TinyMCE and FCKeditor, both with their own knobs to tune validation.

4. Don't air your dirty laundry in public

Your bitweaver site won't throw exceptions and debugging information onto your users, if you don't want to. There is a switch for is live versus show errors, I'm debugging in /kernel/config_inc.php, and a checkbox to set this option during install. When your site has been live for a while and needs a break for maintainance, visit the admin panel to find an option to close the site completely, except for admins (or any other group). That being said, error pages do exist, of course, to indicate a page not found or a permission not granted. To avoid users running into "permission denied" pages, links to restricted content are only shown to users that have permission to enter.

5. Use modern web design

"Dreamweaver is your enemy", Andrew Wulf wrote, and that makes bitweaver your friend :) "Accessibility, usability and maintainability" is exactly what bitweaver is about. When you install bitweaver, you don't need a program to build your website, it is your website. Just like any of those web content management systems out there. But none takes flexibility as far as bitweaver. Choose only the packages that you want (blogs, wiki, image galleries, chat, forums, rating and many more). Use the database of your choice (MySQL, Postgres, Firebird, and others), use the database abstraction layer of your choice (AdoDB or Pear), choose an icon set that follows the Icon Naming Spec, choose out of 40 Layouts, choose between the included styles or make your own design easily. The only reason not to install bitweaver is when you don't like choices.

6. Support all modern browsers

For some of us, this is a ten year old topic. Today, it's Internet Explorer 6 that has to be "supported". For that, bitweaver has some code in place that takes care of CSS-based drop down menus (Suckerfish), PNG support through Dean Edward's IE7 scripts, and other details.

7. If your application has special needs, check up front

First of all, bitweaver's core and its admin panel work without Javascript, Flash, or even images. For some advanced packages like Gmap, Javascript has to be enabled. 3rd party software like the WYSIWYG-editors fall back to simple textareas if Javascript is disabled, the user can input either Wiki-Syntax or text (or handcode HTML). Cookies have to be enabled at least for a user to login. If the admin doesn't want that, there is an option to store session data in the database instead.

8. Test your application usability with real users

To test your site, you need the input of your users. Bitweaver offers community features like boards, which can be linked to any content, chat, shoutbox, comments, rating and recommending, and a contact form. For usage tracking, there is a statistics package. To monitor which bit has been tipped which way, see Liberty's action log.

9. Use a real database

"Use MySQL, or even better Postgres", says Andrew Wulf, and that's the recommendation of many bitweaver core developers. Furthermore Oracle, Firebird and Sybase are supported.

10. Don't use platform specific functionality

Bitweaver runs on Apache servers 1.3 or 2 on Unix, Linux, BSD, Solaris, Windows, and MacOS, and on Windows also on Microsoft's IIS. In the privacy of their homes, many users run bitweaver successfully in XAMP environments. With either AdoDB or PEAR, bitweaver supports already many different databases. Some free software products of world wide reputation are integrated into bitweaver: PHPMailer, HTMLPurifier, freeCap, GeShi, phpSniff, Graphviz, and several Javascript libraries have been known to be used by certain packages, like MochiKit, Prototype, Rico, Overlib, JSCalendar.

11. Realize your customers don't all have T3 lines

You can check your own bitweaver installation with services like websiteoptimization.com and webwait.com. Compared with the homepages of other web content management systems, bitweaver.org is one of the fastest (around 20 objects, page size under 80 Kilobyte, 3 to 4 seconds average load time). In bitweaver's admin panel you control various kinds of caches. In addition to the GZIP compression of pages, Javascript files are automatically compressed and stored stored in /temp/, so are icons. Each module can be cached seperately. Some more settings are in /kernel/config_ing.php. Bitweaver's main bridge for content, liberty, sports an additional multi-layer cache for fine grained control over each content particle.

12. Deal about accessibility and internationalization early

Choose between two types of Pretty URLs with Apache's Mod Rewrite feature. Through an interface you can add semantic, link-based navigation to your pages. Apart from the "usual" accessibility concepts (XHTML Strict + CSS, some access keys, use of label tags, forms that don't rely on Javascript), many features wait for you to be activated to improve your site's accessibility and usability. To mention a few: S5 lets users create a standards compliant slide show from your wiki pages, real time PDF-conversion, RSS feeds from almost any content, and to comfort the admin, Bitweaver comes with a very powerful and helpful installer. Bitweaver's languages package is heavy machinery. It gives you every possibility to tailor your site to an international audience. You can record untranslated strings, use an online interface to translate your site, base language selection on the browser's language, and let users select their language based on flag icons.

13. Test early, test often

During development, to make code changes appear after refreshing the page in your browser, flush all caches (templates, icons, languages, modules) via admin panel, or make Smarty recompile all templates via /kernel/config_inc.php. When writing PHP, you can use certain functions like vd() and bt() to get a visual feedback. If you're developing your own Style, use the Smarty function {debug} anywhere in your template to produce a popup window that tells you exactly which arrays and values are available to you.

Related Items

Documentation » Tutorials

Tutorials to help you work out how something in bitweaver is done

  •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •    •  Anonymous  •  Array  •  Array  •  Array

Comments

nice page

by xing, 02 May 2007 (08:04 UTC)

Great read!

by lugie, 04 May 2007 (11:09 UTC)

by WaterDragon, 23 May 2007 (20:06 UTC)