情報テクノロジー輪講
II
第二回 (2009年10月
7日)
How to Make Slides with XHTML and Amaya
http://www.sw.it.aoyama.ac.jp/2009/Seminar2/XHTMLamaya.html
Martin J. Dürst
duerst@it.aoyama.ac.jp
O 棟 529号室
© 2006-9 Martin
J. Dürst 青山学院大学
Overview
Preparation: Download Amaya and Opera
Amaya:
http://www.w3.org/Amaya/Distribution/amaya-WinXP-11.2.exe
(don't use the snapshot!)
Opera:
Download from http://www.opera.com
XHTML
<?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 (二重引用符)
XHTML Structure: <head>
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>
(小見出し), <h4>, <h5>,
<h6>
- 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 elementlang/xml:lang attribute: indicate language
<p xml:lang='en'>Japanese <span
xml:lang='ja'>日本語</span></p>
How to Look Good
- Not markup, but styling
- CSS in XHTML, to use in this
order;
<link> element for external stylesheets<style> element in <head> for
inline stylesstyle attribute for element-level style
- Important for presentations: CSS media
media='screen': PC screen, usual browsingmedia='print': printing stylemedia='projection': slide presentationsmedia='aural': for screen readers,...media='braille': braille (点字) devices
- Keep fine-tuning to a particular device to a minimum
Working by Hand
- Use a good plain text editor (notepad2, EmEditor (free
version),...)
- 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 with Options
- Choose/Select file
- Set [Encoding] to [utf-8 (Unicode, worldwide)]
- Validate with the [Check] button
- Validation is successful if at the end of the result page, it says in
big letters [This
Page Is Tentatively Valid]. Ignore warning messages
such as Missing "charset" attribute for "text/html"
document.
Amaya Basics
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 one higher hierarchy level
- [F2] and [Esc] mean select one higher hierarchy
level
- Often, more than one [Enter] or [F2] are useful. Try it!
- Adding some dummy characters to an empty element helps
Slide Structure
- One presentation, one Web page: Ideal for editing
- Specific element (usually
<h1>) to start new
slide, or
<div> with specific class for each slide
- One slide, one Web page: best for older browsers
- Diagrams, animation, or everything in SVG
Slide frameworks/systems
Colophon
(how this presentation was made)