CSS: The ‘Page’ Container with Header and Footer

Buy this book at Amazon.com! In typical Bryan fashion, I momentarily lost track of the obvious during my CSS Biggest Box strategizing. My definition of Biggest Box must be refined to include more detail about prose layouts—obvious details. My previous note, “CSS Blocks: Box, Column and Flow,” handles the concepts for composing within a fixed Biggest Box. Using my previous CSS layouts as a guide, the suffix Page is used to describe the Biggest Box containing prose flow.

The Page container is a Biggest Box that will have a variable vertical dimension because it contains prose flow. Its minimum height, however, should be that of the vertical dimension of the biggest box. This min-height setting is the only recognition of the vertical dimension of the Biggest Box. Once the Page container is unleashed in the design, its two companion Page ‘pieces’—the Header and the Footer—comes with the deal. Now I can summarize all of the block-level naming conventions:

Box The box container is a proportionate box with respect to the biggest box.
Column This container makes vertical slices in the biggest box. The width is usually two-thirds or one-third the biggest-box width. My design prefers no more than two columns.
Flow The Flow container works inside of Box or Column containers to handle typographic flow issues in relative em units.
Footer A Page container with a fixed relative or absolute vertical height, placed after a Page container with a flowing vertical dimension.
Header A Page container with a fixed relative or absolute vertical height, placed before a Page container with a flowing vertical dimension.
Page The Biggest Box with a flowing vertical dimension. Its minimum height is the Biggest Box height.

The ‘Page’ Compromise

The Page concept represents a compromise between the printable and screen-presentable—everyone will not be satisfied with such a compromise. The word “Page” of course refers to what you can print out on paper and hold in your hand. The Page CSS block is literally, then, defining a Web Page.

My design goal is to suggest that this Web “page” is a variation of the Web “box”—which implies, in my squalid little world, that the Web “box” is the wave the future. The Box concept has always been with us—from the days of interactive television, to the DVD menu and now with the NetFlix.com streaming video player and the iTunes LP.

This idea of the Web “page” essentially means that there is a “paging” concept available for interaction—this Web paging concept has been, predominantly, scrolling. I’ve never liked scrolling. Scrolling is just a little bit better than clicking. So it makes sense (to me) why I temporarily overlooked this necessary feature.

CSS Blocks: Box, Column and Flow

Buy this book at Amazon.com! With an established ‘Biggest Box’ strategy, more detail reveals the three kinds of block-level containers of my concern: Box, Column and Flow containers. These are composed within the biggest box—these names will serve as suffixes for a new naming convention used for CSS selectors.

Box Container: The box container is proportionate box to the biggest box. The box that is most useful to me is the one-third box—for my WSVGA convention, this is 341×200 ((1024/3.0) = 341.33333333333331). I see these boxes being used for holding the main navigation menu and displaying the results of AJAX calls.

Column Container: This container makes vertical slices in the biggest block. The width is usually two-thirds or one-third the biggest-box width. My design prefers no more than two columns.

Flow Container: While the Column and Box have exact, pixel-unit, proportionate dimensions, the Flow container works inside of Box or Column containers to handle typographic flow issues in relative em units. One unexpected variation here (for me) is to use flow containers for containing small, box containers. This idea comes to me from the “List View” concept in .NET client technologies.

Songhay.Data Status

The horrible news is the discovery that something converted all code files out of UTF-8 to ASCII. This was revealed to me when a possible employer could not compile my code for errors related to LatinGlyphs.cs. A PowerShell script is now in my toolset that converts text files. Nevertheless, each file had to be checked by hand for glyph loss.

I am almost sure that it was something running in Visual Studio—maybe that Team Foundation Server client crap—did this mass conversion. It is also possible that Visual Studio 2008 before or after some Service Pack did the dirty deed. This little problem could have cost me a job.

The next move here is to my update CodePlex.com projects with the new/old UTF-8 code. By the way, I do not connect to CodePlex.com directly from Visual Studio. I have a somewhat elaborate PowerShell script that copies by Visual Studio ‘live’ code to a staged ‘public’ project folder. The script also preserves/uses tf.exe commands to do the dirty work.

Songhay.Wcf.DataActivity

The NetNamedPipeBinding binding feature in WCF will be exploited to formalize the service orientation of the Data Activity Runner. Named pipes allow me to work with WCF without opening ports all over the place (a trivial psychological barrier but a barrier nonetheless).

I get the idea that WCF services should be controlled through WPF-based applications that minimize to the System Notification Area.

Other Issues

  • Songhay.Data.Activity.KinteWriteHits has to be redesigned to harmonize with advances in Songhay.Data.Ssrs.Log.
  • I’m almost certain that Songhay.Data.GenericWeb.Procedure.KinteSpace needs a shared (external?) resource file—which I assume can be shared with other projects. Using a shared Resource file should be better than ‘sharing’ individual resource items by linking.
  • Work on Songhay.Data.Linq.GenericWeb.* needs a revival…
  • By the way, it should be possible to build the namespace Songhay.Extensions.Xml and use XmlUtility stuff for extension methods. This looks like a graceful way to use .Net 3.0 features without needlessly deprecating the past.

Songhay System Zend Sample Online (Part 2)

The content of this message is used by the SonghaySystem.com sample “Zend Framework Sample: Default Application.” The content of this message comes from an AJAX call against a server running the Zend Framework. This message should be reached from a link in the content of another Blog post. The Zend Framework sample is intercepting links indexed in OPML and rewriting them for rerouting. This ‘interception’ is taking place within the AJAX/YUI Client—it overrides the default behavior of selected links (anchor elements) in this Blog content.

The selection of links to override is driven by a subset of OPML ‘index’ data passed to the Client. In this particular example, any link containing the base URI of the Blog site where this content originates will be overridden. This allows the SonghaySystem.com sample Client to link among any number of Blog posts—all within a single, custom, aggregating ‘view.’ Clicking on a link in the ‘Related Resources’ section below demonstrates this capability…

Related Resources

Songhay System Zend Sample Online

Buy this Book at Amazon.com! The content of this message is used by the SonghaySystem.com sample “Zend Framework Sample: Default Application.” The content of this message comes from an AJAX call against a server running the Zend Framework. The Zend_Feed_Rss class is used to read a WordPress news feed, containing this message—this Blog post. This feed class instantiates and object that contains one or more Zend_Feed_Entry_Rss objects.

Both the Zend_Feed_Rss class and the Zend_Feed_Entry_Rss class inherit from the Zend_Feed_Element class. The Zend_Feed_Element->saveXml() method can be used to return the raw XML of the item element in the RSS feed (conventionally stored in the PHP variable called $item).

For WordPress RSS 2.0 feeds, you should see the content:encoded element extending RSS in the ‘raw’ XML. The content of the message you are reading now is stored in this element. There are two of many ways to access this element directly from PHP. One is found in a Zend “bug” report called “Zend_Feed (RSS) Does Not Provide Access To <content:encoded>”—Kevin Golding in a comment refers to the $item->encoded() method.

The other way comes from the Zend documentation for Zend_Feed_Element->__get(). The documentation states that this method will “enable read access to content:encoded element.” An expression like $item->__get('content:encoded') should produce the expected results.

Related Resources