Architected Futures™

Tools and strategies ... for boiling the ocean

Content Creation Guide

The following material provides rules and guidelines for creating content on the Architected Futures™ web site. It should be used to create guide books for members, authors, editors and admins.

These guides are in addition to the routine materials that might be found in the online Drupal documentation, module documentation, or in any one of the many books about Drupal. They try to incorporate a selected amount of that information, especially when the basic rules have been overridden. However, the real focus and intent of this guide is to provide an integrated set of instructions that bring together the basic Drupal techniques with the rules for content composition as a function of how various plugins have been configured to operate on this site.

Photoshop

  1. Cut/paste from VISIO or whatever to Photoshop - create new from clipboard
  2. Use "Save for Web" to create web images
  3. Adjust size based on intent and purpose of image - about 500-600px width works for "full size image" in book page or blog. Up to 960px for full size web page. About 100px for a 'concept picture' to act as lead in on a post.
    • General strategy is to compose an image in Photoshop as a web image at an appropriate size for "best viewing" of whatever the content may be.
    • After the image is uploaded and placed on the web site, images should normally be placed in content at a 500px width (or less) size. If needed, the 500px image can be created using the IMCE resize feature1. The full size image can then be linked using Lightbox. This allows normal page display of the image to function at the narrow-width automatic adaptive widths, yet the full size image can be viewed by the user by clicking on the image if needed, to be able to read small text, etc.
    • Small images used as context pictures can also be generated by IMCE as thumbnail images.
  4. Save as PNG-8 selective

Copyright Images

  • Copyright images are sourced from a 'Copyright' page in the AF_Metamodel Viso document
  • To make a new image (for a new year) copy and adjust an existing image on this page
  • Use process described above to cut/paste from Viso to Photoshop, save to web, save full size

Mapped Images

Mapped images are images where detail portions of the image are mapped as links to other content. A typical example of this is a house plan, where an image may be shown of a floor plan, but each room on the floor plan can be clicked as a link to a different page describing that room, or with detail pictures of the room. With out content another example, as used on the EATS Infrastructure Prototype Code Published blog post, is to make component items on a UML digram to be clickable.

A conflict that comes up with this strategy is the following. Normally we use reduced size images in our main post, and clicking on the image results in a Lightbox enlarged image to be displayed. Clicking on the enlarged image brings the user back to the original page display. Using clickable maps conflicts with this convention.

For clickable maps, we use "full size" images on the page. That eliminates the Lightbox behavior. Then, a map needs to be generated for the image indicating where the clickable target areas are within the image, and defining whatthe target for each area is. To create the maps, we are currently using the online image map utility at http://www.maschek.hu/imagemap. To use this facility:

  1. Create or copy a URL reference to the correctly sized image as it will appear in the web page.
  2. Use that URL to "feed" a copy of the image to the utility
  3. Use the utility to "map" segments of the image for targetting.
    1. For each area, block out the area using the approporaite tools (rectangle, square, circle, etc.)
    2. Supply the target URL as an HREF
    3. Supply an "ALT" label for the area
    4. Make a selection as to how the linked content is to appear (new window, etc.)
  4. When finished, generate the map as HTML
  5. Copy and past the HTML "map" into the source code for the page
  6. Edit the "map" content and supply "title" information for the map hot spots.
  7. PLace a usemap="#mapid" entry in the img tag data for the image. Be careful to include the "pound" or "hash" symbol or the map will not generate proper links using FireFox and IE web browsers.

Footnotes

Footnotes can be created in text by using the following technique:

  • At the point in the text where the footnote is to occur, use square brackets '[' and ']' to place footnote delimiters around the text of the footnote with the footnote opened by {fn} (square rather than curly), and closed by {/fn} (again, square rather than curly). The text of the footnote will be whatever appears between the open and close delimiter. (Technically, angle brackets '<' and '>' should also work, but they are problematic to create because when used with the WYSIWYG text editor. The text editor changes them to &lt; and &gt; in the text, and then they are not recognized by the footnote parser. Using the square bracket format eliminates this problem.)

Newspaper Column Format

Dynamic, auto-leveling, newspaper-style columns can be created for Chrome and Firefox browsers2 by using the following scheme:

  1. Create the content.
  2. Use the source button to view the HTML source code for the content.
  3. Insert a DIV around the content to be flowed into columns.
  4. Assign the DIV to class 'af-2-columns' for a 2 column layout, or 'af-3-columns' for a 3 column layout as in:

<div class="af-2-columns">content to be flowed into two columns</div>

<div class="af-3-columns">content to be flowed into three columns</div>

This is not done by default for any of the content types because it doesn't always look good. However, on selected items it does have a nice effect. For large pixel, wide layout desktop screen this will yield the number of columns specified. For narrower screens, the column count will automatically adjust. The column count will also automatically adjust if the browser window is narrowed by the user.

Normal layout desktop screens (including landscape mode on the Samsung Galaxy Tab 7"), this will yield 2 columns of newspaper style layout text for both the 2 column and 3 column specification. For narrow layout screens (including reduced width windows on desktops and portrait mode on the Samsung Galaxy) the text will revert to a single column. (This has not been tested on an iPhone, but I assume it will either behave like the Galaxy, or always result in single column text.) The number of columns is managed by the Omega theme's responsive mode and is a function of available pixel width of the browser window.

Headers in Column Format

In newspaper column format H1 and H2 headers will cause the column flow to break and start a new set of columns. That is to say, H1 and H2 headers will always span the full width of the page. H3-H6 do not have this property and will occur within the columnized text with a column break.

Multiple sections of columnized text can be formed by using H1 or H2 headings to break the text.

Headings within continuous flow of columnar text can be created by using H3-H6 level headers.

Right now HR and images are set to appear within continuous flow text. We'll see what kind of content we need to create to see if this should be adjusted. However, image sizing needs to take this into account.

HTML Tables

Zebra Striped Tables

Zebra-striped sortable HTML tables can be created by adjusting the class specifications for table elements. If you use the technique described below for Sortable tables, you should get Zebra striped tables. For non-sortable HTML tables, put a "class=even" specification on the even numbered rows to get them striped.

Sortable Tables

Sortable tables can be sorted on multiple columns. All sortable tables should follow the same general specification scheme for look-and-feel consistency across the website.

  1. Create the table in a normal manner using the WYSIWYG text editor, or manually using HTML.
  2. In the <table> HTML element, assign the following classes in a class="sortable-onload-x rowstyle-even colstyle-sorted no-arrow" assignment. This assignment can be made on the WYSIWYG table feature in the text editor on the advanced tab.
    • sortable-onload-x will sort the table when the page is loaded on column x, where column counts begin with column 0. To sort on the first column this would be changed to sortable-onload-0. To sort multiple columns, separate each specification with a hyphen, and list them in order. To sort descending, suffix an 'R' after the column. For example, sortable-onload-2R-0-5.
    • rowstyle-even will mark the alternate rows with an even class for zebra striping.
    • colstyle-sorted will mark the sort columns with a sorted class for background highlighting.
    • no-arrow will eliminate the up-arrow and down-arrow text from being generated on the sort columns. Instead, our standard CSS will generate png images.
  3. For each sortable column in the table, assign a class to the <th> element for that row, where the class assignment statement appears similar to class="sortable". Use of the "sortable" class is sufficient. However, to increase efficiency, the class should also specify the data type of the column:
    • sortable-numeric specifies a numeric column
    • sortable-currency specifies a currency column
    • sortable-text specifies a text column
    • sortable-date specifies a date column
    • sortable-date-dmy specifies a day-month-year format date column
    • sortable-keep specifies the column should be kept in its original order

Content Posting

  • All content should have a content classification category assigned to them. This is especially true if you wish to publish the post for visibility to the general public. Failure to identify the content as Public will stop it from being visible to visitors who are not logged in to the system.
  • The following scheme is something that we are working on, but it is NOT fully functional at this time.
    • If you wish to include private, member only material in a Public post use one of the shortcodes to enclose the private material. The lowest level shortcode that is appropriate is the one that should be used. Remember - shortcodes cannot be nested!

      [af-restricted-content]

      [/af-restricted-content]

      • af-member-content - can be used to encapsulate material that is to be restricted for member viewing only
      • af-premium-content - can be used to encapsulate material that is to be restricted for subscribers
      • af-restricted-content - can be used to encapsulate material that is to be restricted to administrative members
    • This scheme was implemented in WP, but has only started to be implemented in Drupal. It is accomplished via the AFCore module's text filter processing in function _AFCore_editorial_note_filter. Within that process, $user is available as a global variable. From $user, user roles are determined. We just need to think about this for awhile, and determine if we really want to do it. It may be over-the-top in terms of getting fancy for no purpose. As it is, we can always segment Drupal material into a separate node and then put access restrictions via TAC and group taxonomies on that node, so do we really need this?
    • In place of this, what we also implemented in WP, and something that may have value here, is the idea of author and editorial notes. Something along the lines of [editor-note]Editorial content.[/editor-note]. If an editor is viewing the content, they will see the editor and author notes. If the author (how to tell that?) is viewing the content, they would see author notes. Alternatively, either would see the notes when they look at the source, but the notes would disappear when viewed as a normal item.
    • Currently this 'editorial note' facility has been implemented to allow nodes with editorial notes to be made publically viewable - but with the editorial content restricted from public view.
      • ​The $user global variable makes roles available. These are the 'english name' role names
      • These role names are identified and translated to boolean variables
      • Content is then hidden or made viewable (with or without special annotation) based on the roles of the viewer.

​Hyperlinks

Hyperlinks specified as part of normal content in blog postings, book pages, regular pages, etc. may be specified as routine HTML link elements using the CKEditor link on the editor toolbar or they may be specified as Freelinking links using the Freelinking link syntax. The Freelinking syntax is preferred to generate links using a standardized syntax.

Content Embed

We have a facility to copy the content, or a summary of the content, of one node and to use it as partial content for another node. This is an elaborate variation on token substitution. It is used when we want to maintain full textual consistency between the same idea expressed in two different contexts. This is accomplished via the use of view embedding. (In the sample code below, replace the curly brace delimiters {...} with square bracket delimiters [...] for the actual syntax.) The forms which have been developed to date include the following:

  • Full Text Content Embed
    • This is used to embed the full text body of one node as (partial) content within another node.
    • Example: More than one node includes a version of some text. For example a tool description. Another node wants to also describe the tool as local text content, but wants to include additional factors. The text description from the tool description node can be included as part of the write-up in the second node by using this embed.

{view:embed_node_body=page=161}

  • Text Summary Embed
    • This is used to embed only the summary text of one node as content in another node.
    • Example: We have a table which summarizes the Drupal books published on the site. One row of the table wants to present an overview summary of each book. It uses this embed to pull the summary description from each book for inclusion in the table.

{view:embed_summary_content=page=161}

  • Text Summary Embed as Sidebar Data
    • This is used to embed the summary text of one node into another node and to present that embedded material as a teaser sidebar to the main content of the node. Material included includes the title, the summary, and a "read more" link as a teaser to visit the other node for more information.
    • Example: The EATS Product Concept page discusses the MetaModel scheme for EATS. This is based on the OMG MOF specification. Rather than provide a full explanation, or a simple link, a teaser to an article which explains MOF in included as part of the Product Concept page.

{view:embed_summary_as_sidebar=page=161}

  • 1. For further background on WYSIWYG, IMCE and Lightbox resizing see this blog post.
  • 2. IE, as of IE9, still does not format into multiple columns.

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.