Norwescon.org: Difference between revisions

From Norwescon Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 105: Line 105:


[[Category: Website]]
[[Category: Website]]
== Updates ==
The update process for website information is:
1. The department or volunteer overseeing an area that needs a content update or requesting a blog post sends their requested text or changes to [[Publications]].
2. The Publications editorial team reviews the content for clarity, grammatical correctness, and other editorial concerns.
3. The editorial team passes the finalized content to the webmaster.
4. The webmaster updates the relevant page(s) on the website and notifies Publications and the original requester that the update is live.
=== Requested Information ===
==== Page Content Updates ====
For updates to existing content, it is ideal if the entire page content is provided, with changes highlighted or marked in some way (for instance, using Word's "Track Changes" feature to redline removed content and greenline added content. When only a sub-section of content is provided, the webmaster must use their best judgement as to whether other sections of the page need to be updated or removed, or take time to contact the original requester for clarification.
If any graphics (photos, diagrams, etc.) are required, it is requested that those be provided to the webmaster with the update request, rather than assuming that the webmaster will be able to acquire/create them. Supplied graphics should also be legally available to use and not covered by copyright unless permission from the original creator has been granted for their use.
==== Weblog Posts ====
Blog post requests should include the following items:
* Title
* Post content
* Excerpt (a one-to-three sentence summary of the post content; this is automatically picked up by many social media sites when sharing links to posts and pages)
* Graphics (optional, but as above, should be provided and legal to post)
If any of the above items are not included, the webmaster may create them as needed.
== Page Editing ==
=== General-Purpose Pages ===
Most pages are built using the WPBakery Page Builder near-WYSIWYG layout builder plugin. This allows for multiple rows of content with varying column settings and has different "blocks" that can be used for text, images, and special-purpose items such as maps, "call to action" boxes, and so on.
While a full explanation of how to use the layout capabilities is beyond the scope of this document, one specific capability regularly in use is the ability to designate content rows as "disabled". By disabling a content row, content blocks that are placed in this row will not be displayed when the page is rendered. This allows the webmaster to save content that may be useful in the future by moving it to a disabled row rather than simply deleting it outright and having to re-create it later. When that content is useful again, it can be moved back up into an active row and edited as necessary for current needs.
To mark a row as "disabled", click on the pencil tab in the tab group at the top right of a row. In the Row Settings box that appears, scroll down and enable the "Disable Row" checkbox and click the "Save changes" button. That row and any content blocks it contains now appears greyed out in the editing interface and (once the page is saved) will not appear when the page is loaded.
=== Special Pages ===
Some pages on the site have specific requirements that must be followed to ensure changes appear correctly.
==== Text Editing Requirements ====
A few pages on the site use particular HTML or CSS functions that can be lost when using the standard Wordpress WYSIWYG editor, and should have their text content edited in the plain text editing mode.
These special pages are:
* [http://www.norwescon.org/about/faq-frequently-asked-questions/ FAQ (Frequently Asked Questions)] (HTML functions)
* [http://www.norwescon.org/con/program/workshops/writers-workshop/ Norwescon Writers Workshop] (HTML functions)
* All daily schedule pages (CSS functions; currently not live)
===== HTML Functions =====
In order to add in-page links, both the FAQ and the Writers Workshop pages use HTML anchors in the header tags. While the overall structure of the pages is created using the WYSIWYG layout system, the text content of each individual text box should be edited using the plain text editor instead of the Visual text editor.
To do this, after clicking on the pencil icon to open the text box editor, click on the "Text" tab next to the "Visual" tab at the top right of the text editor. When in the text editor, it is possible to see that the headers have <code>id</code> arguments applied. For example, the HTML code for the first two lines of the FAQ table of contents are:
<nowiki>1. <a href="#1">Norwescon (general questions)</a>
1.1. <a href="#1.1">What is Norwescon?</a></nowiki>
And (not at all coincidentally), the HTML code for the first two lines of the content following the table of contents are:
<nowiki><h1 id="1">1. Norwescon (general questions)</h1>
<h2 id="1.1">1.1. What is Norwescon?</h2></nowiki>
This links the text in the table of contents to the content lower on the page. However, in order to ensure that the Visual editor doesn't remove the <code>id</code> tags from the header tags, all text content must be edited in Text mode.
===== CSS Functions =====
In order to present a clean and easy to read version of the schedule of events, custom CSS is used in any schedule page, and the HTML for the event items declares the custom CSS classes.
Custom CSS is added to the schedule pages by clicking on the gear icon at the top right of the WPBakery Page Editor box (when custom CSS has been added, this gear displays with a yellow "CSS" box overlay).
The custom CSS varies slightly for the games and workshop schedule pages. For the primary schedule pages, this is the custom CSS:
<nowiki>.ptitle {
font-weight: bold;
border-top: 2px solid #000;
line-height: 20px;
margin-right: 25%;
}
.psched {
font-weight: bold;
text-align: right;
position: relative;
top: 0px;
border-top: 2px solid #000;
border-bottom: 1px solid #ccc;
margin-top: -22px;
margin-bottom: -8px;
line-height: 20px;
}
.pdesc {
margin-top: 5px;
}
.ppros {
font-style: italic;
margin-left: 10px;
margin-bottom: 15px;
}</nowiki>
And here is a sample schedule item from Norwescon 42 showing how the CSS classes are applied in the HTML code:
<nowiki><div class="ptitle">Loved It!</div>
<div class="psched">Cascade 9
1–2 p.m.</div>
<div class="pdesc">It’s easy to laugh, it’s easy to hate, but it takes guts to be gentle and kind. This panel will take audience-submitted suggestions for so-bad-they’re-good (and so-bad-they’re-terrible) movies and TV shows. Our panelists must find something nice to say about them. Prepare to have your heart warmed!</div>
<div class="ppros">Berlynn Wohl (M), Jasmine Silvera, Chris Wiswell</div></nowiki>
As may be guessed, the class names are related to the related data: <code>ptitle</code> = program title, <code>psched</code> = program schedule, <code>pdesc</code> = program description, and <code>ppros</code> = program pros.
As with the above section, while the overall page layout for schedule pages uses the WYSIWYG layout system, all edits to the content in text boxes should be done in the Text editor rather than the Visual editor to ensure the CSS classes aren't lost.
==== Theme-Specific Requirements ====
'''Note:''' This is specific to the theme currently in use, and likely will not be applicable if a different site theme is chosen.
A few pages on the site use special layout features that are provided by the current theme. Because of this, these pages should not be edited through the standard Wordpress page editor, and instead, must be edited by choosing the "Customize" item in the top menu bar while on that page, then choosing the appropriate page settings from the left-hand customization side bar.
These special pages are:
* [http://www.norwescon.org The "front page"] (site root/homepage)
* [http://www.norwescon.org/con/guests-of-honor/ The Guests of Honor page] (called "Speaker Page" settings in the customization side bar)

Revision as of 10:06, 8 November 2019

The norwescon.org website is the primary repository for disseminating information to prospective members, current members, and ConCom staff.

The webmaster's primary responsibility is backend administration and adding/removing/updating content as requested by the various departments within Norwescon. This role may (and often does) also include some amount of content creation (text and graphic elements).

Backend

The site is built using the Wordpress CMS with a commercial theme and several plugins to expand functionality. Which theme and plugins are used may change from year to year.

Theme

Wordpress themes define the overall look of the website. The design may be changed when transitioning from one year to the next, either by altering the options of the current theme or switching to another theme entirely, but should not undergo major changes otherwise.

The site currently uses the The Conference Pro theme.

Plugins

Currently active plugins (not including any theme-specific plugins) are:

  • Akismet Anti-Spam: Provides spam filtering for the various forms used across the site. Historically also provided spam protection for comments, but comment functionality is currently disabled.
  • Classic Editor: Restores the "classic" WordPress editing interface as an alternative to the recently-released (but in some ways less functional) Block Editor.
  • Duplicate Post: Adds one-click duplication of posts and pages for easy re-use.
  • Gravity Forms: Adds complex form creation and management. Used in several locations across the site.
  • Jetpack: Adds various security, performance, and site management features.
  • Last Modified Timestamp: Adds a "last modified" shortcode that can be used in any post or page.
  • Maintenance: Adds the ability to put the site in "maintenance mode" with a placeholder page while larger-scale content or design changes are in process.
  • Page Excerpt: Adds an "excerpt" field to pages as well as posts so that when pages are linked on social media a hand-written excerpt can be extracted for preview text rather than the first few lines of text.
  • Redirection: Allows creation and management of 301 redirects so when a page is moved, visitors are automatically sent to the new page rather than receiving a 404 error.
  • WPBakery Page Builder: Adds drag-and-drop near-WYSIWYG layout editing.

Organization

The front page of the website should always display the most pertinent information about the convention (what are people most likely to be looking for?):

  • The name of the convention.
  • When is it?
  • Where is it?
  • Who and what will be featured?
  • Pricing for and how to get convention memberships and hotel reservations.

Other information can be included as desired and as appropriate for the design and time of year.

Internal pages are organized into four main sections. Each section has a top-bar menu item with several sub-items.

About: General information about the convention Norwescon (year): Information about the upcoming convention. Items and sub-items may vary from year to year, the following is a snapshot and not a comprehensive list. Get Involved: Information about how members can be more involved with the convention beyond just attending. Media: Covers both information for media (papers, blogs, etc.) and media (photos, posters, banners) related to the con.
  • Mission Statement
  • Contact Info
    • Org Chart
  • Outreach
  • FAQ (Frequently Asked Questions)
  • History
  • Blog
  • Guests of Honor
  • Memberships
  • Hotel
  • Schedule of Events
    • Thursday Schedule
    • Friday Schedule
    • Saturday Schedule
    • Sunday Schedule
  • Philip K. Dick Award
  • Programming
    • Attending Pros
      • Becoming a Panelist
    • Workshops
      • Norwescon Writers Workshop
      • Hands-On Workshops
      • Writing Classes and Lectures
    • Youth Programming
    • Panel Suggestion
  • Special Events
    • Guest of Honor Banquet
    • Games
    • Masquerade
    • Dances
    • Concerts
    • Single Pattern Contest
    • Prop Contest
    • Scavenger Hunt
  • Exhibitors
    • Art Show
    • Art in Action
    • Dealers' Room
    • Club Tables
  • Policies and Guidelines
    • Harassment Policy
    • Accessibility
    • Weapons Policy
    • Photography Guidelines
  • Volunteer
    • Open Volunteer Positions
  • Socialize
  • Ways to Donate
  • ConCom Staff Updates
  • Advertising at Norwescon
  • Photo and Video
  • Posters and Banners

Updates

The update process for website information is:

1. The department or volunteer overseeing an area that needs a content update or requesting a blog post sends their requested text or changes to Publications. 2. The Publications editorial team reviews the content for clarity, grammatical correctness, and other editorial concerns. 3. The editorial team passes the finalized content to the webmaster. 4. The webmaster updates the relevant page(s) on the website and notifies Publications and the original requester that the update is live.

Requested Information

Page Content Updates

For updates to existing content, it is ideal if the entire page content is provided, with changes highlighted or marked in some way (for instance, using Word's "Track Changes" feature to redline removed content and greenline added content. When only a sub-section of content is provided, the webmaster must use their best judgement as to whether other sections of the page need to be updated or removed, or take time to contact the original requester for clarification.

If any graphics (photos, diagrams, etc.) are required, it is requested that those be provided to the webmaster with the update request, rather than assuming that the webmaster will be able to acquire/create them. Supplied graphics should also be legally available to use and not covered by copyright unless permission from the original creator has been granted for their use.

Weblog Posts

Blog post requests should include the following items:

  • Title
  • Post content
  • Excerpt (a one-to-three sentence summary of the post content; this is automatically picked up by many social media sites when sharing links to posts and pages)
  • Graphics (optional, but as above, should be provided and legal to post)

If any of the above items are not included, the webmaster may create them as needed.

Page Editing

General-Purpose Pages

Most pages are built using the WPBakery Page Builder near-WYSIWYG layout builder plugin. This allows for multiple rows of content with varying column settings and has different "blocks" that can be used for text, images, and special-purpose items such as maps, "call to action" boxes, and so on.

While a full explanation of how to use the layout capabilities is beyond the scope of this document, one specific capability regularly in use is the ability to designate content rows as "disabled". By disabling a content row, content blocks that are placed in this row will not be displayed when the page is rendered. This allows the webmaster to save content that may be useful in the future by moving it to a disabled row rather than simply deleting it outright and having to re-create it later. When that content is useful again, it can be moved back up into an active row and edited as necessary for current needs.

To mark a row as "disabled", click on the pencil tab in the tab group at the top right of a row. In the Row Settings box that appears, scroll down and enable the "Disable Row" checkbox and click the "Save changes" button. That row and any content blocks it contains now appears greyed out in the editing interface and (once the page is saved) will not appear when the page is loaded.

Special Pages

Some pages on the site have specific requirements that must be followed to ensure changes appear correctly.

Text Editing Requirements

A few pages on the site use particular HTML or CSS functions that can be lost when using the standard Wordpress WYSIWYG editor, and should have their text content edited in the plain text editing mode.

These special pages are:

HTML Functions

In order to add in-page links, both the FAQ and the Writers Workshop pages use HTML anchors in the header tags. While the overall structure of the pages is created using the WYSIWYG layout system, the text content of each individual text box should be edited using the plain text editor instead of the Visual text editor.

To do this, after clicking on the pencil icon to open the text box editor, click on the "Text" tab next to the "Visual" tab at the top right of the text editor. When in the text editor, it is possible to see that the headers have id arguments applied. For example, the HTML code for the first two lines of the FAQ table of contents are:

1. <a href="#1">Norwescon (general questions)</a>
1.1. <a href="#1.1">What is Norwescon?</a>

And (not at all coincidentally), the HTML code for the first two lines of the content following the table of contents are:

<h1 id="1">1. Norwescon (general questions)</h1>
<h2 id="1.1">1.1. What is Norwescon?</h2>

This links the text in the table of contents to the content lower on the page. However, in order to ensure that the Visual editor doesn't remove the id tags from the header tags, all text content must be edited in Text mode.

CSS Functions

In order to present a clean and easy to read version of the schedule of events, custom CSS is used in any schedule page, and the HTML for the event items declares the custom CSS classes.

Custom CSS is added to the schedule pages by clicking on the gear icon at the top right of the WPBakery Page Editor box (when custom CSS has been added, this gear displays with a yellow "CSS" box overlay).

The custom CSS varies slightly for the games and workshop schedule pages. For the primary schedule pages, this is the custom CSS:

.ptitle {
	font-weight: bold;
	border-top: 2px solid #000;
	line-height: 20px;
	margin-right: 25%;
	}
.psched {
	font-weight: bold;
	text-align: right;
	position: relative;
	top: 0px;
	border-top: 2px solid #000;
	border-bottom: 1px solid #ccc;
	margin-top: -22px;
	margin-bottom: -8px;
	line-height: 20px;
	}
.pdesc {
	margin-top: 5px;
	}
.ppros {
	font-style: italic;
	margin-left: 10px;
	margin-bottom: 15px;
	}

And here is a sample schedule item from Norwescon 42 showing how the CSS classes are applied in the HTML code:

<div class="ptitle">Loved It!</div>
<div class="psched">Cascade 9
1–2 p.m.</div>
<div class="pdesc">It’s easy to laugh, it’s easy to hate, but it takes guts to be gentle and kind. This panel will take audience-submitted suggestions for so-bad-they’re-good (and so-bad-they’re-terrible) movies and TV shows. Our panelists must find something nice to say about them. Prepare to have your heart warmed!</div>
<div class="ppros">Berlynn Wohl (M), Jasmine Silvera, Chris Wiswell</div>

As may be guessed, the class names are related to the related data: ptitle = program title, psched = program schedule, pdesc = program description, and ppros = program pros.

As with the above section, while the overall page layout for schedule pages uses the WYSIWYG layout system, all edits to the content in text boxes should be done in the Text editor rather than the Visual editor to ensure the CSS classes aren't lost.

Theme-Specific Requirements

Note: This is specific to the theme currently in use, and likely will not be applicable if a different site theme is chosen.

A few pages on the site use special layout features that are provided by the current theme. Because of this, these pages should not be edited through the standard Wordpress page editor, and instead, must be edited by choosing the "Customize" item in the top menu bar while on that page, then choosing the appropriate page settings from the left-hand customization side bar.

These special pages are: