Web authoring system: Difference between revisions

The educational technology and digital learning wiki
Jump to navigation Jump to search
 
(24 intermediate revisions by the same user not shown)
Line 3: Line 3:
== Definition ==
== Definition ==


A '''web authoring system''' is software to produce webcontents. They range from simple HTML editors to fairly sophisticated integrated development environments.
A '''web authoring system''' is software to produce web contents. They range from simple HTML editors to fairly sophisticated integrated development environments. Today, most web contents are not produced with web authoring systems, but with [[portalware]] of various kinds (and that include [[content management system]]s, [[wiki]]s, [[learning management system]]s. In other words, you don't necessarily need a web authoring tool for producing web contents. The advantage of web sites made with static web contents is that they last (e.g. tecfa.unige.ch has been around since 1994. In addition, they are fast.
 
Today, a lot of web contents are not produced with web authoring systems, but with [[portalware]] of various kinds (and that include [[learning management system]]s


See also: [[Text editor]] (for more technically minded people)
See also: [[Text editor]] (for more technically minded people)
Line 13: Line 11:
Specific tools for web programming are not included here.  
Specific tools for web programming are not included here.  


=== Free HTML structure editors ===
=== Free structure editors ===


There are dozens of available systems. We don't have time to evaluate these.  
There are dozens of available systems. They usually offer support for editing HTML and CSS. Some also support scripting languages. We don't have time to evaluate these. You should look out for features like:
* Syntax high-lighting
* Code formatting
* Code completion
* Validation


See also [[XML editor]]s to edit XHTML, SVG etc.
See also [[XML editor]]s to edit XHTML, SVG etc.


Windows:
* [http://www.fookes.com/notetab/index.php NoteTab] light
* [http://www.fookes.com/notetab/index.php NoteTab] light
* [http://www.chami.com/html-kit/ HTML Kit]
* [http://www.chami.com/html-kit/ HTML Kit]
* [http://software.visicommedia.com/en/products/acehtmlfreeware/ AceHTML] (HTML only)
[[User:Daniel K. Schneider|Daniel K. Schneider]] can recommend these systems, i.e. they do a job, but prefers to use a programming editor, e.g. (X)Emacs.


[[User:Daniel K. Schneider|Daniel K. Schneider]] can recommend both these systems, but prefers to use a programming editor, e.g. (X)Emacs.
=== Cheap structure editors ===


* [http://software.visicommedia.com/en/products/acehtmlfreeware/ AceHTML] (HTML only)
For the Mac:
* [http://www.tacosw.com/ Taco HTML Edit for Mac OS X] ($25, trial available)
* [http://www.peterborgapps.com/smultron/ Smultron] ($5)


=== Programmer's editors with HTML support ===
=== Programmer's editors with HTML support ===
Programming editors also offer support to a wide ranger of other languages. Other than that, they should be no different to structure editors.


There are lots of [[text editor]]s with HTML support, e.g.
There are lots of [[text editor]]s with HTML support, e.g.
Line 39: Line 49:
** This is a more complex editor than PSPad or similar, ok for programmers.
** This is a more complex editor than PSPad or similar, ok for programmers.
* [http://web.barebones.com/products/bbedit/bbedit.html BBEdit] (commercial) is popular with Mac users. The free [http://www.barebones.com/products/textwrangler/ TextWrangler] has some HTML support.
* [http://web.barebones.com/products/bbedit/bbedit.html BBEdit] (commercial) is popular with Mac users. The free [http://www.barebones.com/products/textwrangler/ TextWrangler] has some HTML support.
* [http://www.aptana.com/ Aptana] (Mac)
* [http://brackets.io/ Brackets] by Adobe (multi-platform)


See the [[text editor]] article for more information about text editors.
See the [[text editor]] article for more information about text editors.


=== Free HTML WYSIWYG Web Editors ===
=== Free HTML WYSIWYG Editors ===


* [http://www.kompozer.net/ Kompozer] (formerly NVU). A fairly nice editor. Good for beginners.
* [http://www.kompozer.net/ Kompozer] (formerly NVU). A fairly nice editor, HTML4 and XHTML only (!). Good for beginners.
* [http://www.mozilla.org/projects/seamonkey/ Mozilla SeaMonkey Suite] (a followup from the earlier Mozilla browser that includes a navigator, a composer and an email client).
* [http://www.mozilla.org/projects/seamonkey/ Mozilla SeaMonkey Suite] (a followup from the earlier Mozilla browser that includes a navigator, includes a composer and an email client). HTML4 only ?
* [http://www.w3.org/Amaya/Amaya.html Amaya], The W3C sponsored test browser and editor.
* [http://www.w3.org/Amaya/Amaya.html Amaya], The W3C sponsored test browser and editor.
* [http://bluegriffon.org/ BlueGriffon] HTML 5 editor
* [http://bluefish.openoffice.nl/ BlueFish]
* [https://panic.com/coda/ Coda] (MAC)


Wikipedia has a list of some [http://en.wikipedia.org/wiki/Category:Free_HTML_editors Free HTML editors]
Wikipedia has a list of some [http://en.wikipedia.org/wiki/Category:Free_HTML_editors Free HTML editors]
Line 52: Line 67:
=== Through the web editors ===
=== Through the web editors ===


See [http://edutechwiki.unige.ch/en/JavaScript_links JavaScript links]. These systems usually are installed on some web page with a server-side connection (e.g. in a [[CMS]]. But nothing prohibits someone to use them client side only (and copy/paste the HTML code)
See also [http://edutechwiki.unige.ch/en/JavaScript_links JavaScript links]. These systems work with JavaScript and usually are installed on some web page with a server-side connection (e.g. in a [[CMS]]. But nothing prohibits someone to use them client side only (and copy/paste the HTML code)
 
* [http://www.aloha-editor.org/index.php Alhoa Editor], HTML 5 editor
* [https://www.raptor-editor.com/ Raptor editor], HTML 5 editor
* [https://www.mockofun.com/ Mockofun] (Online Graphic Designer Tool)


=== Commercial Mid or High End tools ===
=== Commercial Mid or High End tools ===
Line 58: Line 77:
* Microsoft FrontPage
* Microsoft FrontPage
* [http://www.adobe.com/products/golive/ GoLive] is a dead product since April 2008. See Dreamweaver.
* [http://www.adobe.com/products/golive/ GoLive] is a dead product since April 2008. See Dreamweaver.
* [http://www.adobe.com/products/dreamweaver/ Dreamweaver]
* [http://www.adobe.com/products/dreamweaver/ Dreamweaver] (Adobe's flagship web authoring tool, students can get substantial discounts).
* [http://www.macrabbit.com/ Espresso by MacRabbit]. A lean but yet powerful tool.


=== Other editing software ===
=== Other editing software ===


* Some word processors like [[Adobe FrameMaker]] can be configure for single source HTML/XML/PDF production.
* Some word processors like [[Adobe FrameMaker]] can be configured for single source HTML/XML/PDF production.
* (future?) versions of Office XP.
* Word can export HTML (although the code is pretty non-standard and may require cleanup)
* Open Office
* Open Office / [[Libre Office]] also can export html (and also to word)
* [[Presentation software]] can export to HTMLweb authoring
* [[Presentation software]] can export to HTMLweb authoring


See also [[document standard]], since one can produce HTML from any reasonbly well defined document format.
For both Word and Libre/Open Office, you should try out the various options, i.e. make sure to save as "pure" HTML.
 
== Useful browser extensions ==
 
Most tools don't provide you with enough information about what you are doing.
Browser extensions, in particular for Firefox, can help.
 
=== Firefox ===
 
* [http://users.skynet.be/mgueury/mozilla/index.html  HTML VALIDATOR] is a Mozilla extension that adds HTML validation inside Firefox and Mozilla. The number of errors of a HTML page is seen on the form of  an icon in the status bar when browsing. The details of the errors are seen when looking the HTML source of the page.
** [https://addons.mozilla.org/en-US/firefox/addon/249 related Firefox (en_US) page]
 
* [http://www.getfirebug.com/ FireBug] integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. There also is a light version based on [[JavaScript]] that you can use with any browser.
** [https://addons.mozilla.org/en-US/firefox/addon/1843 related Firefox (en_US) page].
** [http://www.getfirebug.com/keyboard.html Firebug Keyboard Shortcuts]
 
* [https://addons.mozilla.org/en-US/firefox/addon/748 Greasemonkey] A quite spectacular extension that allows you to customize the way a webpage displays using small bits of JavaScript. Hundreds of scripts, for a wide variety of popular sites, are already available at [http://userscripts.org UserScripts.org]
 
* [http://chrispederick.com/work/web-developer/ Web Developer]. Tells you most everything about your HTML page.
* Important: To install the DOM Inspector you must reinstall the browser choosing the 'Custom' and 'Developer Tools' options (if not already done so). You won't loose any personal settings, just do it :)
** [https://addons.mozilla.org/en-US/firefox/addon/60 Firefox page].


* [https://addons.mozilla.org/en-US/firefox/addon/2897 XML Developer Toolbar]. For XML development. Schema and DTD Generation, Various validation, XSLT on the fly.  
See also [[document standard]], since one can produce HTML from any reasonably well defined document format.


Find more through the Tools/add-ons menu of the Firefox browser.
=== Static web site generators ===


=== IE ===
As we said in the introduction, most of today's website are built with some kind of [[content management system]]. However static web sites do have advantages: They are not hackable and they decay much slowlier. Therefore, it is not surprising to find various CMS-like tools that allow creating and maintaining a static web site. E.g. read [http://www.oreilly.com/web-platform/free/files/static-site-generators.pdf Static Site Generators], Modern Tools for Static Website Development by Brian Rinaldi.


* [http://www.microsoft.com/downloads/details.aspx?familyid=e59c3964-672d-4511-bb3e-2d5e1db91038&displaylang=en Web Developer Toolbar]
Examples:
* [http://jekyllrb.com/ Jekill]
* [https://github.com/jnordberg/wintersmith Wintersmith]


Find more through the IE Tools/extensions menu...
== Useful browser extensions and browser tools ==


Note: IE is not well know for extensions, but there are some other useful extensions for other purposes (e.g. videodownloads). Some are payware.
Many authoring tools don't provide you with enough information about what you are doing.


=== Opera ===
(1) Browser extensions, in particular for Firefox, can help. E.g. if you develop web page,  [http://chrispederick.com/work/web-developer/ Web Developer] is a '''must have'''.
* Read more in the [[browser extension]] article !


Get at least the developer console and DOM snapshot from  [http://dev.opera.com/tools/ the Opera tools page]. Installing add-ons with Opera is really easy.
(2) Most modern browser also include built-in development tools. For the moment, read:
* [http://www.andismith.com/blog/2011/11/25-dev-tool-secrets/ 25 Secrets of the Browser Developer Tools] by Andy Smith, nov 2011.
* [http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/ A Re-introduction to the Chrome Developer Tools] by Paul Irish, May 2011.


== Software of particular interest to education ==
== Software of particular interest to education ==
Line 111: Line 116:
; Commercial
; Commercial


* Adobe Dreamweaver (with the free [[CourseBuilder]] extension)
* Adobe Dreamweaver (with the free [[CourseBuilder]] extension, iff still available)
 
; Free stand-alone
 
* [[eXe]], is an HTML or IMS CP/SCORM 1.2 generation tool


; Free
; Free server-based


* [[eXe]]
* [http://www.docendo.org/ Docendo] (a free server-based solution to produce [[SCORM 1.2]] packs or HTML zip files, needs a JAVA servlet engine such as Tomcat)


== Links ==
== Links ==


; Editors
* [http://www.thefreecountry.com/webmaster/htmleditors.shtml Free HTML Editors, Web Editors, and WYSIWYG Web Editors and Site Builders]
* [http://www.thefreecountry.com/webmaster/htmleditors.shtml Free HTML Editors, Web Editors, and WYSIWYG Web Editors and Site Builders]
* [http://freshmeat.net/search/?section=projects&q=%2Bhtml+%2Beditor Sourceforge search for HTML + Editor]
* [http://freshmeat.net/search/?section=projects&q=%2Bhtml+%2Beditor Sourceforge search for HTML + Editor]


 
; Browser tools
[[Category:Educational technologies]]  
* [[browser extension]]
* [http://www.andismith.com/blog/2011/11/25-dev-tool-secrets/ 25 Secrets of the Browser Developer Tools] by Andy Smith, nov 2011.
* [http://paulirish.com/2011/a-re-introduction-to-the-chrome-developer-tools/ A Re-introduction to the Chrome Developer Tools] by Paul Irish, May 2011.
[[Category:E-learning tools]]
[[Category:E-learning tools]]
[[Category: Authoring tools]]
[[Category: Authoring tools]]
[[Category: Web authoring]]
[[Category: Web authoring]]

Latest revision as of 12:31, 7 January 2020

Draft

Definition

A web authoring system is software to produce web contents. They range from simple HTML editors to fairly sophisticated integrated development environments. Today, most web contents are not produced with web authoring systems, but with portalware of various kinds (and that include content management systems, wikis, learning management systems. In other words, you don't necessarily need a web authoring tool for producing web contents. The advantage of web sites made with static web contents is that they last (e.g. tecfa.unige.ch has been around since 1994. In addition, they are fast.

See also: Text editor (for more technically minded people)

List of editing software

Specific tools for web programming are not included here.

Free structure editors

There are dozens of available systems. They usually offer support for editing HTML and CSS. Some also support scripting languages. We don't have time to evaluate these. You should look out for features like:

  • Syntax high-lighting
  • Code formatting
  • Code completion
  • Validation

See also XML editors to edit XHTML, SVG etc.

Windows:

Daniel K. Schneider can recommend these systems, i.e. they do a job, but prefers to use a programming editor, e.g. (X)Emacs.

Cheap structure editors

For the Mac:

Programmer's editors with HTML support

Programming editors also offer support to a wide ranger of other languages. Other than that, they should be no different to structure editors.

There are lots of text editors with HTML support, e.g.

  • Notepad++ (Windows)
    • Lightweight and easy to use, does good syntax highlightning but no indentation
    • Has a rather large library of plugins.
  • PSPad (Windows).
    • Lightweight and easy to use, does syntax highlighting, but no indentation (too bad !)
    • Only thing you need to know is: "CTRL-space" will open a popup for contextual code completion
  • (X)Emacs (Most systems, that's what I prefer, but young people have trouble with this.)
  • JEdit (Most systems)
    • This is a more complex editor than PSPad or similar, ok for programmers.
  • BBEdit (commercial) is popular with Mac users. The free TextWrangler has some HTML support.
  • Aptana (Mac)
  • Brackets by Adobe (multi-platform)

See the text editor article for more information about text editors.

Free HTML WYSIWYG Editors

  • Kompozer (formerly NVU). A fairly nice editor, HTML4 and XHTML only (!). Good for beginners.
  • Mozilla SeaMonkey Suite (a followup from the earlier Mozilla browser that includes a navigator, includes a composer and an email client). HTML4 only ?
  • Amaya, The W3C sponsored test browser and editor.
  • BlueGriffon HTML 5 editor
  • BlueFish
  • Coda (MAC)

Wikipedia has a list of some Free HTML editors

Through the web editors

See also JavaScript links. These systems work with JavaScript and usually are installed on some web page with a server-side connection (e.g. in a CMS. But nothing prohibits someone to use them client side only (and copy/paste the HTML code)

Commercial Mid or High End tools

  • Microsoft FrontPage
  • GoLive is a dead product since April 2008. See Dreamweaver.
  • Dreamweaver (Adobe's flagship web authoring tool, students can get substantial discounts).
  • Espresso by MacRabbit. A lean but yet powerful tool.

Other editing software

  • Some word processors like Adobe FrameMaker can be configured for single source HTML/XML/PDF production.
  • Word can export HTML (although the code is pretty non-standard and may require cleanup)
  • Open Office / Libre Office also can export html (and also to word)
  • Presentation software can export to HTMLweb authoring

For both Word and Libre/Open Office, you should try out the various options, i.e. make sure to save as "pure" HTML.

See also document standard, since one can produce HTML from any reasonably well defined document format.

Static web site generators

As we said in the introduction, most of today's website are built with some kind of content management system. However static web sites do have advantages: They are not hackable and they decay much slowlier. Therefore, it is not surprising to find various CMS-like tools that allow creating and maintaining a static web site. E.g. read Static Site Generators, Modern Tools for Static Website Development by Brian Rinaldi.

Examples:

Useful browser extensions and browser tools

Many authoring tools don't provide you with enough information about what you are doing.

(1) Browser extensions, in particular for Firefox, can help. E.g. if you develop web page, Web Developer is a must have.

(2) Most modern browser also include built-in development tools. For the moment, read:

Software of particular interest to education

These systems offer additional functionality, e.g. can export to IMS Content Packaging.

Commercial
  • Adobe Dreamweaver (with the free CourseBuilder extension, iff still available)
Free stand-alone
  • eXe, is an HTML or IMS CP/SCORM 1.2 generation tool
Free server-based
  • Docendo (a free server-based solution to produce SCORM 1.2 packs or HTML zip files, needs a JAVA servlet engine such as Tomcat)

Links

Editors
Browser tools