Using The Site Editor
Teachers Network is a content authoring and collaboration site focused on the educational community. At the core of almost everything we do is content creation, editing, and modification. The site editor is the tool that is commonly used most of the time. It is a rich text editor very similar in appearance and overall capabilities to many of the popular desktop publishing applications (Word, Libre Office and others). Unlike its desktop cousins, it is tailored for web content creation and maintenance. This guide gives an overview of the editor and many common techniques used to create good looking content that will render well across a wide range of devices. It is not a complete tutorial on how to use the editor, however links to several well written tutorials are provided at the end.
Site Editor Overview
The site editor is used everywhere there is a need for members to create rich content. By ‘rich’ we mean content that contains document formatting (layout, fonts, headings, etc), and can optionally incorporate multimedia elements (images, video, etc). Common applications include the creation and maintenance of blogs, static pages, comments, the document system, and private messaging.
User Interface
The user interface should be familiar to users of most desktop tools such as Word, Libre Office, and others. Creating bold, italic, and underlined text is similar as is paragraph justification (right, center, left) and header selection. Please check out the links below for detailed tutorials on how to use each of these and other editor capabilities.
Comparison With Other Tools
While the user interface should be familiar to most, there are some important differences between desktop publishing environments and the Teachers Network online editor. Desktop environments are usually more capable in terms of fine tuning the look and layout of individual documents. One reason for this is desktop environments store documents differently with individual document formatting and styles embedded in each file. The online editor on the other hand uses web standards such as HTML and CSS for the creation and storage of content. Styles and templates supporting site-specific layout and look and feel are usually external to the document (CSS). Desktop environments tend to be more flexible in the creation of many different styles of documents. Web publishing environments are more focused on the simple creation of a uniform look and feel to documents.
The online editor is intended to be used by members of all ages and abilities to produce professional looking documents and web pages with minimal training (short learning curve). No web design or HTML/CSS skills are presumed. The trade-offs are universal access and ease of use (online) vs access to some of the more sophisticated publishing capabilities (desktop tools).
Note: if you have a need for a different document format, the file sharing system allows the sharing of arbitrary file types, including DOCX, PDF, and others. This can be used to share external documents between members, however many of the collaboration and co-authoring capabilities will be lost.
Use The Right Tool For The Job
The Teachers Network platform works across a wide range of devices ranging in size from the smallest cellphones to full HD capable desktop displays. We have found that for casual browsing and simple interactions small devices such as cellphones are great because of their convenience and ability to connect from anywhere. For more involved reading and browsing of content, as well as social interaction between members, our favorite devices are the 10-inch and larger tablets. They are simple to hold, quite portable and are great devices for reading long passages from.
For simple content creation, where the text is reasonably short and not much formatting is required, most devices will do just fine. If, on the other hand, you need to create a more sophisticated document requiring layouting and professional looking formatting, the best tool is a device with a larger screen, keyboard, and mouse. This usually translates to a traditional desktop environment. The ability to easily select text, copy and paste, perform layout with images and other multimedia objects is much easier (and faster) on a desktop rather than a device that was not designed for publishing (cellphones and tablets).
Some of our members use tablets and phones for content creation but the process is slow. If you’re creating a reasonable size document and have a lot of time ahead of you in writing, do yourself a favor and use a larger device with a keyboard and mouse. The amount of time you will save is huge!
Font Weight, Size, Type and Color Selection
The Teachers Network platform was designed to work on devices ranging from small cellphones to large HD displays. This ‘responsive’ design strategy is why it is possible to switch between environments without loosing the ability to properly view content. For this to work, the content and the styling or rendering instructions for it have been separated. Different styling is applied depending on what kind and size of a device is accessing the site.
This both simplifies and complicates a few things. Overall this is a very good thing as content can be created without care for what kind of device it will be displayed on. One way this device independence can run into problems though is when content writers explicitly use different font weights, sizes, types and color controls in the online editor. There are times to do this, but they are rare. When used, the editor creates HTML code that bypasses the system style sheets, potentially damaging how a page may render on a given device.
When using the online editor try not to use it the same way you would a desktop tool. Be aware of how some editor features (fonts for example) may actually create inconsistent results across devices. For font related actions, try to use the basic header and paragraph types (they have backend style sheet support), and reserve specific font customization for the very few isolated situations where they are really needed.
Text and Visual Modes
At the top right corner of the editor are two tabs labelled VISUAL and TEXT. For most users the VISUAL tab is where all of their work should be done. The TEXT tab is for advanced designers with HTML and CSS background who wish to fine tune how their content is stored and displayed. If you are not comfortable working with HTML and CSS most everything you need to do should be possible using the VISUAL interface.
Editor Document Rendering
Due to technical issues related to how web pages are rendered (displayed), the display of rich content in the site editor will not exactly match what is displayed once the document has been stored. The reasons have to do with the way the editor and site CSS are setup. Hopefully in time we’ll get the editor rendering to be more accurate. In the meantime the current best practice when creating static pages or blogs is to open a new tab in your browser with one tab open to the editing session, and the other to the actual page that is being edited. Occasionally be sure to save your work (this is good advice regardless) and you can check the final formatting by refreshing the other browser window.
Tutorials
The Teachers Network site is built on top of the WordPress content management system. Many good tutorials exist for what is referred to the “Classic Editor.” A few references are included below. We believe these are adequate in order to get started, however if you come across other good tutorials please let us know and we’ll include them in this list as well.
- The WordPress Editor – wp101.com (video)
This tutorial video takes a brief tour of all the buttons and functions in the WordPress editor, which is used for editing posts, pages, and other types of content in WordPress. - How to Create a Blog Post in the WordPress Classic Editor – wordx.press
This is a good step by step introduction to the use of the classic editor. - How to create and edit a page/post using the classic editor – moduet.com
Another good tutorial introduction to the classic editor. -
How to edit pages in WordPress – kaydee.net
Good tutorial on the editor. It is safe to ignore the first part of the article that focuses on WordPress issues and go directly to the editor tutorial.
