NEW DESIGN: New Site Design, ideas and implementation

Finally I got my hands on design of this site. The main idea of the new design was: it should support content editing in our BlockNote WYSIWYG HTML editor. Even though that I know HTML and accompanying technologies pretty well I feel myself more comfortable writing structured text in WYSIWYG environment rather than in raw HTML text.

Any modern web site has system of web pages. Each of them contains pretty much static "frame" (header, sidebar and footer) and the content area(s). I have decided to follow this design template.
BlockNote as an HTML Word Processor can produce only static HTML pages but I don't want to include to each HTML file on the server these common headers and sidebars.  So I had to invent some mechanism allowing me to "wrap" linear content given as .html file into "frame" common for all documents on the server.

After two days of experiments with PHP and our Apache server settings I came up with the following:

  • Apache settings have been changed to reroute all requests to .htm files on this server to the index.php;
  • index.php file has got HTML definition of the "frame" and code. PHP code in index.php opens requested html resource and injects it into output stream in the "content place". So my index.php behave as classical CGI module;
  • I designed CSS style to transform pure HTML produced by BlockNote into styled text which fits in my visual schema.

Therefore when you are requesting HTML resource on this server you are getting original .htm file wrapped into frame common for all other pages. And I can use BlockNote to edit pages on the server without touching their source code. See content source of this page.

Thus and so I can use Made with BlockNote logo here. Image of sailor ("Crimson sails", romantic novel) on the right top of the page I have drawn in half an hour by myself (acrylic, 6*4 inches). Positioning and tweaking of styles took one hour more. And this is it. Done.

published by Andrew Fedoniouk.