I adapt many of the technologies I'm currently writing about into use at this site.
These technologies include XHTML, CSS, RDF, Ajax (dynamic HTML with JavaScript), PHP (for server-side functionality), SVG, the canvas element, and so on.
The site is focused at supporting released specifications, rather than supporting specific browsers. As such, I don't incorporate workarounds for browsers that can't manage certain released specifications, such as XHTML. RealTech isn't just about the writing–the entire site reflects my ongoing technology experimentation. This may make the site difficult to access, from time to time, with one browser or another.
Current State of RealTech technology
- RealTech is served up as XHTML 1.1.
- The CSS is valid CSS 2.1.
- I make heavy use of SVG 1.1.
- I use JavaScript (ECMAScript), but the site should still be fully accessible.
- I use RDF and microformats to mark semantic data.
- Images will be JPEGs or PNGs.
- The site is maintained using Wordpress.
The following screenshots point out some of the technical specializations currently implemented at the site. All of my ideas are GPL, which means you can use, but would appreciate attribution. The specializations are:
- I use the the built-in GD functions to sample the color at five points in my header image, and use this to dynamically change my CSS. Among the changes are the current main point title, and five stripes (created using empty DIV elements) that border the image. My current implementation of the file that generates the CSS is photographs.php
- This same file also randomly pulls up a different header file from a group of files with a "jpeg" extension currently in my theme directory.
- The analog clock in my sidebar is a customization of a simple SVG clock created by Jason Davis. I altered the clock to provide more distinctive tick movement, as well as adding much of the color and shading.
- Only the main post in the page is opened when the page loads. The other posts are collapsed, with only the title showing. I created the 'accordion' script that implements this effect, which is dependent on elements being assigned a given class in order to work. I'll link a how-to to this page when it's finished.
- The metadata for a post is displayed in the header in a DIV element. I use true CSS opacity to set the opacity of this element: not a filter, not a moz-opacity or other proprietary approach.
- Another use for my sampled colors is to create an SVG gradient, which is then used to 'cap' each comment.
- I provide comment editing, both a full page non-script enabled approach (for accessibility), and an Ajax in-page approach.
- Another SVG element is a fixed sidebar item. Currently it's implemented as a separate file, but I will eventually incorporate directly into the page.
- Preview is currently set up to be Ajax-enabled.
- I have main categories for my writings, but I also assign tags to each. I added a tag 'cloud' to my footer listing all of the tags linked to my various writings.
