情報テクノロジー輪講
II
第二回 (2006年10月
4日)
How to Make Slides with XHTML and Amaya
http://www.sw.it.aoyama.ac.jp/2006/Seminar2/XHTMLamaya.html
Martin J. Dürst
duerst@it.aoyama.ac.jp
O 棟 529号室
© 2006 Martin
J. Dürst 青山学院大学
Overview
Preparation: Download Amaya
http://www.w3.org/Amaya/Distribution/amaya-WinXP-9.51.exe
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>!
- Variables:
O(
<var>n</var>2)
- more:
<code> (コード),
<cite> (引用), <abbr>,
<acronym> (略語), <kbd>
(キーボード入力)
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 classes or categories of
markup
<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 presetations: 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 Extended
File Upload (http://validator.w3.org/file-upload.html)
- Select file
- Set [Encoding] to [utf-8 (Unicode, worldwide)]
- Validate with [Validate this file] button
- Validation is successful if at the end of the result page, it says
in big letters [This
Page Is Tentatively Valid]. Ignore error messages
such as Missing "charset" attribute for "text/html"
document.
Interlude: Install Amaya
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!
- Bar at bottom gives document structure, inside-out (e.g. Text / li / ul
/ body / html)
- [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
<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)