Information Technology Seminar II

2013年10月 2日

How to Make Slides with XHTML and Amaya

http://www.sw.it.aoyama.ac.jp/2013/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 12.16 (not a later version!): Windows/Mac/Linux

Download this presentation with stylesheets

XHTML

The format for Web pages
XHTML 1.0: Cleanup of HTML 4.0 based on XML
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>

XML 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 />
Always properly nested. WRONG:
<i>This is a <b>bad</i> example.</b>

XML 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 qotes (二重引用符)

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

XHTML Structure

Overall XHTML 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 (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!
- Also use http://validator.w3.org/nu/ for HTML5

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! Report bugs!
Use XML mode, not text mode (bottom right)
Document structure 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
Caution: Amaya does not (yet) support HTML5

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 older browsers
Diagrams, animation, or everything in SVG