1. TEI 工作坊 TEI and Images October 2008

2. 1. The Concept

3. The Problem ● |TEXT| 文本exists in many forms. ● 自然語言 – 無文字:口述文本 – 有文字:寫本,印本,電子本 ● 人工語言 (程式語言,摩斯電報電碼,公式) ● 圖像 (2D) ● 文物 (3D) ● 儀式 (4D)...

4. ● In the process of encoding, ie. adapting |text| for human–machine interaction, we have to find ways to encode any form of |text|. ● How can we markup or at least annotate an image? ● First, let’s have a look at the most common formats for digital images.

5. Image Formats 1 ● JPEG (.jpg) (Joint Photographic Experts Group). = Compression Standard (ISO). Up to 16,7 mio colors. Widely used. No animation. Lossy compression! ● GIF (Graphics Interchange Format). Good (but proprietary) compression format. 16 to 256 colors. Can be animated. Good for graphics with little color-depth.

6. Image Formats 2 ● PNG (Portable Network Graphics). W3C standard. Flexible format allows inclusion of text description. No animation. Lossless compression. ● TIFF (Tagged Image File Format). Highly flexible tagsets. Allows for user meta-data in private tags. Proprietary standard (Adobe). No support for vector graphics. Wide range of different compression schemes and color spaces ( Grayscale, RGB, CMYK a.o.). Good for scientific data. Lossless compression.

7. Image Formats 3 ● SVG (Scalable Vector Graphics). Used to define vector (向量)-based graphics for the Web. Graphics defined in XML format. Lossless zooming or resizing. Can be animated. SVG is a World Wide Web Consortium (W3C) recommendation.

8. 2. Images in TEI

9. Figure 1: TEI Logo How to embed this?

10. Images in TEI 1 ● contains a block containing graphics ● indicates the location of an inline graphic, illustration, or figure (like and SRC in HTML) ● contains a brief prose description of a graphic figure, for use when documenting an image without displaying it (like the ALT attribute in HTML) ● can contain the caption of a image

11. Images in TEI 2

12. Exercise 1 ● Check out "1exImage.xml" ● 用 "2styles.xsl" 把它轉成 HTML ● has not been treated. Reasons? ● 你能不能把背景顏色變成紅色?

13. Exercise 2 ● Create a TEI document that embeds the images "biang.jpg" and “biangNoodles.jpg” ● You might want to add another or so.. ● "styles.xsl" supports only the few elements in the example, but you could get a more comprehensive one from the TEI website....

14. 3. Annotating Images with TEI Using the Image Markup Tool

15. ● Have a look at how the Image Markup Tool (IMT) by Martin Holmes can deal with this. ● (0.9版有中文的界面) ● The newest version is at (http://www.tapor.uvic.ca/~mholmes/image_ markup/) ● IMT 以 namespaces命名空間再TEI文件裡包 含SVG 圖像.

16. name...what? ● namespace 命名空間/名稱空間 ● Namespaces are a way to use different xml- vocabularies in one document. ● This is important for data integration & metadata management.

17. 命名空間宣告1 ● 命名空間必須被宣告 xmlns : pf = "http://mypf.org/pffffffff" 就這樣 prefix ( 前綴 ) 自己選 URI: universal resource identifier

18. 命名空間宣告2 ● There are a number of rules how to declare namespaces. 記得以下三個重點: ● 簡單的方法: 把所有的命名空間宣告在根元素 ● 前綴(prefix)是無所謂的, 重點是宣告中的URI ● 屬性也能屬於一個命名空間,但它們未被宣告 時它們等於 namespace neutral (不屬於任何 命名空間).

19. Tutorial ● If there is time let’s do the 1 st part of the Zvon tutorial in Chinese. ● Let me show you how to markup a image file with the IMT

21. ● Now it’s your turn... ● Use IMT 0.9, 加中文界面檔chinese.gui.xml再 translations資料夾 ● Have look at this image

23. ● Todays project: ● 用IMT 標記 “wheelOfLife.jpg” 加註解 (perhaps from “sanDuWuQu.txt”) 以及建立 web檢視 Exercise 1

24. Exercise 2 ● See how the IMT (in version 0.9) creates four files: – one XML/TEI file where the data is kept – one XSLT file that let’s the browser transform the XML into HTML – one CSS for nice HTML – one JavaScript file to provide for a more interactive Web view

25. Exercise 3 ● 編輯output的TEI header ● 了解: namespaces have a validation problem ● Go to ROMA and get a TEI (Relax NG) schema for SVG use. ● 小修小補...tinker with your output.xml until you can validate it.

26. marcus bingenheimer 2006