Information Technology Seminar II

2022年 9月28日

How to Make Slides with XHTML and Amaya

https://www.sw.it.aoyama.ac.jp/2022/Seminar2/XHTMLamaya.html

Martin J. Dürst

duerst@it.aoyama.ac.jp

Overview

XHTML
Amaya
Slides

Preparation: Download Amaya and Opera

Amaya: http://www.w3.org/Amaya/Distribution/amaya-WinXP-11.4.7.exe

Opera Opera 12.17 (or 12.18, not a later version!): Windows (Mac/Linux: ask me)

Download this presentation with stylesheets

HTML

The format for Web pages
XHTML 1.0: Cleanup of HTML 4.0 based on XML
See also lecture 1 of Projects in Information Technology II
File start and end:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC
 "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 ...
</html>

Elements (要素)

Mark up document contents (内容) to indicate its function/meaning
Start with start tag (開始タグ):
<element-name>
End with end tag (終了タグ):
</element-name>
Or: empty tag: <element-name />
Examples: html, body, div, p, a,...
Always properly nested. WRONG:
<i>This is a <b>bad</i> example.</b>

Attributes (属性)

Additional information for elements
Attribute name (属性名) and attribute value (属性値) in element's start tag:
<element attr-name='attr-value' attr2="value2">
No duplication of attributes.
WRONG: <e a='x' a='y'>
Order is irrelevant
Attribute value is always quoted with:
- Single quotes (一重引用符), or
- Double quotes (二重引用符)
Examples: href on a, src on img, class/lang on all elements,...

[For XML basics, see also プログラミング基礎 I, lecture2]

HTML Structure

Overall HTML structure:

<html>
  <head>...</head>
  <body>...</body>
</html>

<head>: Information about the document

Most important element in <head>:

<title>情報テクノロジー輪講 II:
   How to make slides with
   XHTML and Amaya</title>

Visual vs. Structural Markup

Visual markup (WRONG!):
- Use of formatting elements: <i> (italic, 斜体), <b> (bold, 太字),...
- Misuse of structural elements: <h1> (heading1, 大見出し) for very large, <table> (表) for page layout,...
Structural markup:
- Paragraphs (段落): <p>...</p>
- Headings: <h1> (大見出し), <h2> (中見出し), <h3> (小見出し),...
- Emphasis: This is <strong>really</strong> <em>important</em>!
- more: <var> (変数), <code> (コード), <cite> (引用), <abbr>, <acronym> (略語)

Generic Markup

What to do when a desired element is not available in XHTML

Block level: <div> (division): Chapters (章), sections (節), paragraph-like blocks
Inline: <span>
class attribute: indicate class or category
<code class='example wrong'>Wrong example.</code>
id attribute: Uniquely identify element
lang/xml:lang attribute: indicate language
<p xml:lang='en'>Japanese <span xml:lang='ja'>日本語</span></p>

[For more information on XHTML, see also プログラミング基礎 I, lectures 7-9]

How to Look Good

Not markup, but styling
CSS in XHTML, to use in this order;
1. <link> element for external stylesheets
2. <style> element in <head> for inline styles
3. style attribute for element-level style
Important for presentations: CSS media
- media='screen': PC screen, usual browsing
- media='print': printing style
- media='projection': slide presentations
- media='aural': for screen readers,...
- media='braille': braille (点字) devices
Keep fine-tuning to a particular device to a minimum

[For more information on CSS, see also プログラミング基礎 I, lectures 3-5]

Working by Hand

Needed for HTML5 and new technology (use Amaya first, then edit by hand)
Use a good plain text editor (notepad2, many others,...)
For this seminar, always use UTF-8 for documents, WITHOUT signature/BOM
Always validate your documents with the W3C Markup Validation Service:
- Use File Upload
- Choose/Select file
- Validate with the [Check] button
- Validation is successful if you see: This document was successfully checked as XHTML 1.0 Strict!
  (or a similar message for other types of HTML)
- Also use http://validator.w3.org/nu/ for HTML5
Use development tools in browsers and lists of implemented features (e.g. Can I use?)

Amaya Basics

WYSIWYG editor/browser for (X)HTML
Download from http://www.w3.org/Amaya/Distribution/amaya-WinXP-11.4.7.exe
Japanese localization by students from Software Lab
Set character encoding for new documents to UTF-8 in Editing-Preferences-Publishing
If desired, set language to Japanese, then restart

Amaya Overview

Two functions:
- Browsing: Use double click to follow links
- Editing: Just edit and save (even over network). No need for Wikis!
Main goal is structured editing, not visual layout
Different views: Structured view, alternate view (text browser), source view, link view, heading view
Transforms (e.g. from paragraphs to numbered list,...)

Amaya Hints and Tips

Amaya is not commercial software: Save often! Reload!
If (part of) the screen turns black, try scrolling or reload
Use XML mode, not text mode (bottom right)
Document structure is shown at bottom left
(e.g. html > body > ul > li)
[Enter] means one more of the same
or next higher hierarchy level
[F2] and [Esc] mean select next higher hierarchy level
Often, more than one [Enter] or [F2] are useful. Try it!
Adding some dummy characters to an empty element may help
For HTML5, use Amaya first, then add elements/attributes that Amaya doesn't know

Slide Structure

One presentation, one Web page: Ideal for editing
- Specific element (usually <h1>) to start new slide (used in this presentation), or
- <div> with specific class for each slide
One slide, one Web page: best for very old browsers
Diagrams, animation, or everything in SVG

Showing Slides with Opera

Important: Use Opera Opera 12.17 (or 12.18, not a later version!)
Use <p class="slidesonly"> </p> between slides to show all text
Press F11 to switch to projection mode (and F11 again to switch back)
Press Page Down/Page Up to move between slides
Use another browser for demos of new technology

Slide frameworks/systems

CSS projection media type (Opera, F11): no scripts
W3C slide tools: slidy, B5 (Javascript), slidemaker (perl batch script)
S5 by Eric Meyer
XSlidy: XSLT-based (including incremental show/animation)
Marp: Markdown to HTML slide creater (uses JavaScript)
Rabbit: Popular at Ruby Kaigi,...
many more

Colophon

(how this presentation was made)

Created with Amaya
For CSS projection media type (Opera, F11)
Stylesheets used for this talk (originally from Bert Bos)