PageDesign: Difference between revisions

From Mark Twain in the German Language Press

Created page with "{{DISPLAYTITLE: Design Principles}} Category:Editorial Pages == Overview of page types and structures == === Content Page Types === ==== Structural Pages and Project Organisation Pages ==== free form depending on content and purpose; e.g. start page, introduction page, editorial principles page, etc. * '''URL''': short (e.g. “About”, “Design Principles”) * Begin page with: ** '''Category''': none OR as needed (e.g. “Editorial Pages”) ** '''Page Titl..."
 
mNo edit summary
Line 9: Line 9:
free form depending on content and purpose; e.g. start page, introduction page, editorial principles page, etc.
free form depending on content and purpose; e.g. start page, introduction page, editorial principles page, etc.


* '''URL''': short (e.g. “About”, “Design Principles”)
* '''URL''': short (e.g. “About”, “DesignPrinciples”)
* Begin page with:
* Begin page with:
** '''Category''': none OR as needed (e.g. “Editorial Pages”)
** '''Category''': none OR as needed (e.g. “Editorial Pages”)
Line 23: Line 23:
* Begin page with:
* Begin page with:
** '''Category''': “Overview Pages”
** '''Category''': “Overview Pages”
** '''Page Title''': changed from URL to be more readable with <nowiki>{{DISPLAYTITLE:xyz}}</nowiki> (e.g. “Overview of Newspaper Articles”)
** '''Page Title''': changed from URL to be more readable with <nowiki>{{DISPLAYTITLE:title}}</nowiki> (e.g. “Overview of Newspaper Articles” for “ArticleOverview”)
* Main content:
* Main content:
** use '''Template:OverviewPageNote''' for header section; use the variables:
** use [[Template:OverviewPageNote]] for header section; use the variables:
*** '''summary''' for introductory text (wikitext format)
*** '''summary''' for introductory text (wikitext format)
*** '''explanation''' for explanations regarding the table formatting, abbreviations, etc. (wikitext format; usually a list with bullet points)
*** '''explanation''' for explanations regarding the table formatting, abbreviations, etc. (wikitext format; usually a list with bullet points)
** Overview/table section can be one of the following:
** Overview/table section can be one of the following:
*** Static table with DT functionality; can be either html or wikitext table (example: [[ReferencesOverview]]):
*** Static table with DT functionality; either html or wikitext table (example: [[ReferencesOverview]]):
**** set class=“wikitable datatable hover”
**** set <code><nowiki><table class=“wikitable datatable hover”></nowiki></code>
**** set separate id if needed
**** set separate id if needed
**** other styling and DT parameters as needed (e.g. “data-page-length”, “data-order”, etc.)
**** other styling and DT parameters as needed (e.g. “data-page-length”, “data-order”, etc.)
*** Dynamic table using DPL3 with additional DT functionality (example: [[ArticleOverview]])
*** Dynamic table using DPL3 with additional DT functionality (example: [[ArticleOverview]])
**** use DPL3 “table” parameter
**** use DPL3 “table” parameter
**** set: class=“wikitable datatable hover”
**** set <code><nowiki><table class=“wikitable datatable hover”></nowiki></code>
**** if appropriate, initialise DT ''Custom Search Builder'' with the following DT styling parameters: <code><nowiki>data-layout=‘{“top1Start”:“searchBuilder”}’ data-language=‘<nowiki>{“searchPlaceholder”:” Quick Search”, “search”:““,”searchBuilder”:{“add”:“Add Search Condition”}}</nowiki>’</nowiki></code>
**** if appropriate, initialise DT ''Custom Search Builder'' with the following DT styling parameters: <pre><nowiki>data-layout=‘{“top1Start”:“searchBuilder”}’ data-language=‘<nowiki>{“searchPlaceholder”:” Quick Search”, “search”:““,”searchBuilder”:{“add”:“Add Search Condition”}}</nowiki>’</nowiki></pre>
**** use DPL3 “tablerow” parameter to style individual columns (width, font, etc.)
**** use DPL3 “tablerow” parameter to style individual columns (width, font, etc.)
*** Dynamic list using DPL3 (#dpl: statement) with styling as needed
*** Dynamic list using DPL3 with styling as needed; either table or custom formatting; without DT functionality (example: [[TopicsOverview]])




==== Newspaper Article Pages ====
==== Newspaper Article Pages ====


table design w/ 2 or 3 columns to display screenshot, transcript, and translation/original; links to Topic Pages (or to their sub-topic chapters)
table design w/ 2 or 3 columns to display screenshot, transcript, and translation/original; links to Topic Pages


* '''URL''': item ID
* '''URL''': item ID
* Begin page with:
* Begin page with:
** '''Template:ArticleInfo''' with variables corresponding to article metadata; the template automatically sets '''Category''' as “Article Pages” and generates a header section with metadata
** [[Template:ArticleInfo]] with variables corresponding to article metadata; the template automatically sets [[:Category:Article Pages]] and generates a header section with metadata
* Main content:
* Main content:
** '''Template:ArticleImage''' for screenshot
** [[Template:ArticleImage]] for screenshot
** optional: '''Template:ArticleNote''' OR '''Template:ArticleNoteTop''' with the variables:
** optional: [[Template:ArticleNote]] OR [[Template:ArticleNoteTop]] with the variables:
*** '''content''' for contextual information on the text (optional variable)
*** '''content''' for contextual information on the text (optional variable)
*** '''note''' to include the “Changes in Translation” color coding information
*** '''note''' to change the “Changes in Translation” color coding information which is displayed by default
**** don’t include variable to include the standard section
**** don’t declare variable to include the standard section
**** define variable with wikitext to include alternative text
**** define variable with wikitext as alternative text for the section
**** include variable but leave value empty to omit the “Changes in Translation” section entirely
**** declare variable but leave the value empty to omit the “Changes in Translation” section entirely
** '''table''' with transcription and translation
** '''table''' with transcription and translation
*** surround with <code><nowiki><div></nowiki></code> element
*** surround with <code><nowiki><div></div></nowiki></code> tags
**** set class="large-8 columns" for 3-column layout
**** set <code><nowiki><div class="large-8 columns"></nowiki></code> for 3-column layout
**** set class="row" for 2-column layout
**** set <code><nowiki><div class="row"></nowiki></code> for 2-column layout
***set: class=“wikitable translationTable” for styling
***set <code><nowiki><table class=“wikitable translationTable”></nowiki></code> for styling
***include annotation links to Topic Pages (or chapter headings of sub-topics) in the translation column (NOT in the transcription column)
***include annotation links to Topic Pages in the translation column (NOT in the transcription column)


===== 3-column design =====
===== 3-column design =====


<code>
<pre><nowiki>
'''Template:ArticleNoteTop''' (optional)
{{{Template:ArticleNoteTop}}} (optional)
{{{Template:ArticleImage|file=}}}
<div class="large-8 columns">
<table class="wikitable translationTable">
<tr>
<th>Transcription</th>
<th>English Translation</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
</div>
</nowiki></pre>


'''Template:ArticleImage'''
<nowiki>
<div class=&quot;large-8 columns&quot;>
</nowiki>
<nowiki>
<table class=&quot;wikitable translationTable&quot;><tr><th>Transcription</th><th>English Translation</th></tr><tr><td>text</td><td>text</td></tr></table>
</nowiki>
<nowiki>
</div>
</nowiki></code>


===== 2-column design =====
===== 2-column design =====


<code>
<pre><nowiki>
'''Template:ArticleImage'''
{{{Template:ArticleImage|file=}}}
 
{{{Template:ArticleNote}}} (optional)
'''Template:ArticleNote''' (optional)
<div class="row">
 
<table class="wikitable translationTable">
<nowiki>
<tr>
<div class=&quot;row&quot;>
<th>Transcription</th>
</nowiki>
<th>English Translation</th>
 
</tr>
<nowiki>
<tr>
<table class=&quot;wikitable translationTable&quot;><tr><th>Transcription</th><th>English Translation</th></tr><tr><td>text</td><td>text</td></tr></table>
<td>text</td>
</nowiki>
<td>text</td>
 
</tr>
<nowiki>
</table>
</div>
</div>
</nowiki></code>
</nowiki></pre>




Line 106: Line 107:
context and explanations for relevant key words on Article Pages
context and explanations for relevant key words on Article Pages


* '''URL''': short topic name (can include blank spaces), e.g. “Vienna” or “Anti-Imperialist League”
* '''URL''': short topic name, e.g. “Vienna” or “Anti-Imperialist League”
** exceptions:
** for '''subpages''':
*** for “Topic Person” pages use <code>Lastname • Firstname</code> in URL and reassign displaytitle with <code><nowiki>{{DISPLAYTITLE:Firstname Lastname}}</nowiki></code> at the bottom of the page (necessary for correct transclusion of Topic Pages and to correctly display entries in the Topic Overview)
*** use "main-topic/sub-topic" in URL
*** set displaytitle with <code><nowiki>{{DISPLAYTITLE:sub-topic}}</nowiki></code> at the bottom of the page (placement is necessary for the correct transclusion on Topic Pages)
*** e.g.: "Vienna/Visit to Parliament" with displaytitle "Visit to Parliament"
** '''exception''' for “Topic Person” pages:
*** use <code>Lastname • Firstname</code> in URL  
***reassign displaytitle with <code><nowiki>{{DISPLAYTITLE:Firstname Lastname}}</nowiki></code> at the bottom of the page (placement is necessary for the correct transclusion of Topic Pages and to correctly display entries in the Topic Overview)
* Main content:
* Main content:
** explanatory text including citations and pictures, can include chapters for sub-topics
** explanatory text including citations and pictures
** '''citations''' (for a more detailed explanation see chapter [[DesignPrinciples#Citations]]):
** '''citations''' (for a more detailed explanation see chapter [[DesignPrinciples#Citations|Citations]]):
*** MLA formatting
*** MLA formatting
*** short in-text citation with direct link to zotero bibliography
*** short in-text citation with direct link to zotero bibliography
Line 118: Line 124:
** '''pictures''':
** '''pictures''':
*** include content from Image Page as caption: <code><nowiki>{{File:''image-title''}}</nowiki></code>
*** include content from Image Page as caption: <code><nowiki>{{File:''image-title''}}</nowiki></code>
*** e.g.: <code><nowiki>[[File:Austrian_parliament_harpers_1897.jpg|thumb|right|350px|{{File:Austrian_parliament_harpers_1897.jpg}}]]</nowiki></code> on page [[Vienna]]
*** e.g. on page [[Vienna/Visit to Parliament]]: <pre><nowiki>[[File:Austrian_parliament_harpers_1897.jpg|thumb|right|350px|{{File:Austrian_parliament_harpers_1897.jpg}}]]</nowiki></pre>
** optional: '''Template:Link List''' to display a list of Article Pages which link to the topic or sub-topic chapter (place underneath the main text or at the end of the relevant chapter section)
** Topic Page has '''subpages''':
* set '''Category''' as “Topic Pages” AND chose additional category as needed (currently “Topic Place” or “Topic Person”) at the bottom of the page
*** yes: include [[Template:SubTopicList]] to display each subpage with heading, beginning of the text, and "continue reading" link (example [[Vienna]])
*** no: include [[Template:TopicLinkList]] to display a list of Article Pages which link to the Topic Page (example [[Vienna/Visit to Parliament]])
* set [[:Category:Topic Pages]] AND chose additional category if needed (currently [[:Category:Topic Place]] or [[:Category:Topic Person]]) at the bottom of the page




Line 130: Line 138:
* '''URL''': generated during upload as <code>File:item-ID.png</code>
* '''URL''': generated during upload as <code>File:item-ID.png</code>
* currently no page content
* currently no page content
* .PNG format is necessary for [[Template:ArticleImage]]




Line 139: Line 148:
** short '''description'''
** short '''description'''
** '''source''' with full citation
** '''source''' with full citation
** place <code><onlyinclude></code> tags around parts that should be visible in the caption on the Topic Page (example: [[:File:Austrian_parliament_harpers_1897.jpg]])
** place <code><nowiki><onlyinclude></onlyinclude></nowiki></code> tags around parts that should be visible in the caption on the Topic Page (example: [[:File:Austrian_parliament_harpers_1897.jpg]])
 
 
=== Template Pages ===
pre-formatted elements which can be easily re-used on many pages. For a current list of templates refer to [https://pressger.twainframe.org/Special:AllPages?namespace=10 Special:AllPages > Templates].
 
* '''URL''': short, recognizable for the Template's main purpose or content
* Begin page with:
** <code><nowiki>__NOTOC__</nowiki></code> so no table of contents will be genrated
* Main content:
** Use of this Template: information on what the template is for, where it is used, etc.:
*** current example page
*** short description of purpose and content
*** list of required variables
*** CSS-class used in the structure of the template
*** snippet to copy and paste the template invocation in <code><nowiki> <nowiki></nowiki></nowiki></code> tags
** Content of this Template: section with the same template contents in un-rendered and rendered format
*** as wikitext: in <code><nowiki><pre><nowiki></nowiki></code> tags
*** as rendered on this page: in <code><nowiki><onlyinclude></onlyinclude></nowiki></code> tags
 
==== full layout ====
<pre>
__NOTOC__
=== Use of this Template ===
* Current example page: [[title]]
* Include where to do what.
* Variables:
** variable1:
* CSS-class:
* Copy: <nowiki><nowiki>{{templatename}}</nowiki></nowiki>
 
 
=== Content of this Template ===
==== As Wikitext ====
copy template content
 
==== As Rendered On This Page ====
<onlyinclude>
copy template content
</onlyinclude>
</pre>
 
 


== Citations ==
== Citations ==

Revision as of 10:17, 22 August 2025

Overview of page types and structures

Content Page Types

Structural Pages and Project Organisation Pages

free form depending on content and purpose; e.g. start page, introduction page, editorial principles page, etc.

  • URL: short (e.g. “About”, “DesignPrinciples”)
  • Begin page with:
    • Category: none OR as needed (e.g. “Editorial Pages”)
    • Page Title: can be changed from URL to be more readable with {{DISPLAYTITLE:title}}
    • Show or hide TOC as needed


Overview Pages

overview of large amounts of data/pages via DataTables JavaScript library (DT) and DynamicPageList3 MediaWiki extension (DPL3)

  • URL: short, currently uses no blank spaces (e.g. “ArticleOverview”, “ReferencesOverview”)
  • Begin page with:
    • Category: “Overview Pages”
    • Page Title: changed from URL to be more readable with {{DISPLAYTITLE:title}} (e.g. “Overview of Newspaper Articles” for “ArticleOverview”)
  • Main content:
    • use Template:OverviewPageNote for header section; use the variables:
      • summary for introductory text (wikitext format)
      • explanation for explanations regarding the table formatting, abbreviations, etc. (wikitext format; usually a list with bullet points)
    • Overview/table section can be one of the following:
      • Static table with DT functionality; either html or wikitext table (example: Overview of Mark Twain's Writing and Speeches):
        • set <table class=“wikitable datatable hover”>
        • set separate id if needed
        • other styling and DT parameters as needed (e.g. “data-page-length”, “data-order”, etc.)
      • Dynamic table using DPL3 with additional DT functionality (example: Overview of Newspaper Articles)
        • use DPL3 “table” parameter
        • set <table class=“wikitable datatable hover”>
        • if appropriate, initialise DT Custom Search Builder with the following DT styling parameters:
          data-layout=‘{“top1Start”:“searchBuilder”}’ data-language=‘<nowiki>{“searchPlaceholder”:” Quick Search”, “search”:““,”searchBuilder”:{“add”:“Add Search Condition”}}’</nowiki>
        • use DPL3 “tablerow” parameter to style individual columns (width, font, etc.)
      • Dynamic list using DPL3 with styling as needed; either table or custom formatting; without DT functionality (example: Overview of Topics)


Newspaper Article Pages

table design w/ 2 or 3 columns to display screenshot, transcript, and translation/original; links to Topic Pages

  • URL: item ID
  • Begin page with:
  • Main content:
    • Template:ArticleImage for screenshot
    • optional: Template:ArticleNote OR Template:ArticleNoteTop with the variables:
      • content for contextual information on the text (optional variable)
      • note to change the “Changes in Translation” color coding information which is displayed by default
        • don’t declare variable to include the standard section
        • define variable with wikitext as alternative text for the section
        • declare variable but leave the value empty to omit the “Changes in Translation” section entirely
    • table with transcription and translation
      • surround with <div></div> tags
        • set <div class="large-8 columns"> for 3-column layout
        • set <div class="row"> for 2-column layout
      • set <table class=“wikitable translationTable”> for styling
      • include annotation links to Topic Pages in the translation column (NOT in the transcription column)
3-column design
{{{Template:ArticleNoteTop}}} (optional)
{{{Template:ArticleImage|file=}}}
<div class="large-8 columns">
<table class="wikitable translationTable">
<tr>
<th>Transcription</th>
<th>English Translation</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
</div>


2-column design
{{{Template:ArticleImage|file=}}}
{{{Template:ArticleNote}}} (optional)
<div class="row">
<table class="wikitable translationTable">
<tr>
<th>Transcription</th>
<th>English Translation</th>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
</div>


Topic Pages

context and explanations for relevant key words on Article Pages

  • URL: short topic name, e.g. “Vienna” or “Anti-Imperialist League”
    • for subpages:
      • use "main-topic/sub-topic" in URL
      • set displaytitle with {{DISPLAYTITLE:sub-topic}} at the bottom of the page (placement is necessary for the correct transclusion on Topic Pages)
      • e.g.: "Vienna/Visit to Parliament" with displaytitle "Visit to Parliament"
    • exception for “Topic Person” pages:
      • use Lastname • Firstname in URL
      • reassign displaytitle with {{DISPLAYTITLE:Firstname Lastname}} at the bottom of the page (placement is necessary for the correct transclusion of Topic Pages and to correctly display entries in the Topic Overview)
  • Main content:
    • explanatory text including citations and pictures
    • citations (for a more detailed explanation see chapter Citations):
      • MLA formatting
      • short in-text citation with direct link to zotero bibliography
      • newspaper articles (not part of the project collection): complete bibliographical data
      • newspaper articles (part of project collection): link to item page on scalar
    • pictures:
      • include content from Image Page as caption: {{File:''image-title''}}
      • e.g. on page Visit to Parliament:
        [[File:Austrian_parliament_harpers_1897.jpg|thumb|right|350px|{{File:Austrian_parliament_harpers_1897.jpg}}]]
    • Topic Page has subpages:
  • set Category:Topic Pages AND chose additional category if needed (currently Category:Topic Place or Category:Topic Person) at the bottom of the page


Image Page Types

Article Screenshots

  • URL: generated during upload as File:item-ID.png
  • currently no page content
  • .PNG format is necessary for Template:ArticleImage


Images for Topic Pages

  • URL: descriptive
  • Main content:
    • header (== Summary ==); auto-generated when file upload summary section is used
    • short description
    • source with full citation
    • place <onlyinclude></onlyinclude> tags around parts that should be visible in the caption on the Topic Page (example: File:Austrian_parliament_harpers_1897.jpg)


Template Pages

pre-formatted elements which can be easily re-used on many pages. For a current list of templates refer to Special:AllPages > Templates.

  • URL: short, recognizable for the Template's main purpose or content
  • Begin page with:
    • __NOTOC__ so no table of contents will be genrated
  • Main content:
    • Use of this Template: information on what the template is for, where it is used, etc.:
      • current example page
      • short description of purpose and content
      • list of required variables
      • CSS-class used in the structure of the template
      • snippet to copy and paste the template invocation in <nowiki></nowiki> tags
    • Content of this Template: section with the same template contents in un-rendered and rendered format
      • as wikitext: in <pre><nowiki> tags
      • as rendered on this page: in <onlyinclude></onlyinclude> tags

full layout

__NOTOC__
=== Use of this Template ===
* Current example page: [[title]]
* Include where to do what.
* Variables:
** variable1:
* CSS-class:
* Copy: <nowiki>{{templatename}}</nowiki>


=== Content of this Template ===
==== As Wikitext ====
copy template content

==== As Rendered On This Page ====
<onlyinclude>
copy template content
</onlyinclude>


Citations

all citations use MLA formatting

  • newspaper articles that are not part of the project collection:
  • newspaper articles that are part of the project collection:
    • link to item Article Page by referencing the title
    • inclusion of bibliographical data is not necessary, but might be useful depending on context
    • example: "The following text partially reproduces one such article entitled “Im Freundeskreise” published by the Illinois Staats-Zeitung on 14 March 1892".
  • all other sources (books, articles, letters, etc.):
    • short in-text citation
    • link to zotero bibliographic entry (avoid direct links to digital versions of the source, because these links will likely break over time; it’s easier to include and keep them updated in zotero),
    • example: "The original letters can be found in Mark Twain on Potholes and Politics (Scharnhorst, 48-62)".