Digital Content for Web

Digital Content for Web บุญเลิศ อรุณพิบูลย์ นักวิชาการ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ [email_address] http://www.stks.or.th

ด้วยระบบอินเทอร์เน็ต คอมพิวเตอร์ทุกเครื่อง ทุกระบบ สามารถติดต่อสื่อสารกันได้

Server & Client WindowsXP IE Windows2000 IE Macintosh Windows98 Netscape พัฒนาเว็บด้วย HTML Editor, HTML Generator บน Windows Server : Unix/NT upload

ปัญหา

การแสดงผลภาษา

การแสดงผล Web Layout

ความเร็วการโหลดวัตถุบนเว็บ

การสืบค้น

การละเมิดลิขสิทธิ์

File name

ภาษาอังกฤษ ผสมตัวเลข

ใช้เครื่องหมายเฉพาะ –

ไม่ควรมีช่องว่าง

ไม่ควรยาวมากเกินไป

แบบอักษร (Fonts)

เลือกใช้ฟอนต์มาตรฐาน

Tahoma

Tahoma, “MS Sans Serif”, Thonburi

ตระกูล NEW

ภาษาไทย กับการพัฒนาเว็บเพจ

ด้านพัฒนาเว็บ

HTML Editor, Generator แสดงผลภาษาไทย ?

HTML Editor, Generator เข้ารหัสภาษาไทย ?

ด้านเรียกดูเว็บ

ฟอนต์ ไม่ควรสร้างภาระให้กับผู้ใช้งาน

แสดงผลอักขระได้ถูกต้อง ทุก ( เกือบทุก ) platform

ภาษาไทย กับการพัฒนาเว็บเพจ

Thai Encoding

ประเทศไทยมีมาตรฐานอักขระซึ่งกำหนดโดย สำนักงานมาตรฐานอุตสาหกรรม ดังที่เรียกกันโดยทั่วไปว่ารหัส สมอ . แต่รหัส สมอ . หรือที่มีชื่อทางการว่า มอก . 620 หรือ TIS-620 นี้ เป็นมาตรฐานของประเทศไทย ซึ่งเมื่อนำไปใช้บนเครือข่ายอินเทอร์เน็ต ก็อาจเกิดความเข้าใจไม่ตรงกันได้ ดังนั้นจึงมีความพยายามที่จะจดทะเบียน รหัส สมอ . ที่ Internet Assigned Numbers Authority ( IANA ) ซึ่งเป็นผู้ควบคุมมาตรฐานของเครือข่ายอินเทอร์เน็ต และได้ดำเนินการจดทะเบียนจนสำเร็จ เมื่อวันที่ 22 กันยายน 2541

TIS-620/Windows-874

windows-874 เป็น character Set ที่ใช้ภายในระบบปฏิบัติการที่ผลิตโดยบริษัท ไมโครซอฟต์ เท่านั้น ไม่ได้เป็น character Set ที่ใช้ในการแลกเปลี่ยนข้อมูลระหว่างเครื่อง

มีส่วนขยายเพื่อการแสดงผล เช่น bullet, smart quote, dash ฯลฯ

tis-620 เป็น character Set ที่จดทะเบียนถูกต้อง เป็นที่รับรู้กันทั่วโลก ทุกระบบปฏิบัติการ ( แม้แต่ระบบปฏิบัติการของไมโครซอฟต์เอง )

ภาษาไทย กับการพัฒนาเว็บเพจ <meta http-equiv=“content-type” content=“text/html; charset=………..”>

สรุป Thai Encoding ในปัจจุบัน

UTF-8

TIS-620

Windows-874

ลักษณะของหน้าเว็บที่เหมาะสม

หน้าเว็บที่เหมาะสม ไม่มีข้อกำหนดที่ชัดเจน ควรคำนึงถึง

กลุ่มเป้าหมาย (Personal/Business)

ลักษณะของคอมพิวเตอร์ที่กลุ่มเป้าหมายใช้ (Screen Area ของจอภาพ )

Screen Area ที่เหมาะสมในปัจจุบัน คือ 1024 x 768 pixels

Web Area ที่เหมาะสมคือ

ความยาวไม่เกิน 98 0 pixel

ความสูงไม่มีข้อกำหนดตายตัว แต่ส่วน Header ของเว็บไม่ควรเกินครึ่งหนึ่งของพื้นที่ที่เหลือ

Truehits.net

ลักษณะของหน้าเว็บที่เหมาะสม Web Area 980 pixel Screen Area 600 pixel web Area

Template & Layout Design TITLE Menu History Duty Project

Template & Layout Design TITLE History Duty Project

มาตรฐานรูปแบบการนำเสนอภาพ  100  100 pixels  300  250 pixels  300  250 pixels Up to 1024  768 pixels Up to 1024  768 pixels Up to 1840  1232 pixels Up to 1840  1232 pixels Size 72 dpi 72 dpi 72 dpi 72 dpi 72 dpi Up to 350 dpi Up to 350 dpi Resolution GIF JPG PNG GIF JPG PNG TIF JPEG JPEG JPEG TIFF JPEG, TIFF Format Preview Website Database Presentation ภาพสำหรับ Digital Archive ภาพ สื่อสิ่งพิมพ์ ภาพต้นฉบับ

Format

รูปแบบของไฟล์ภาพที่ใช้ในการจัดเก็บภาพ

การเลือกรูปแบบที่เหมาะสมต่อการนำเสนอจะช่วยให้ภาพมีขนาด ( File Size ) เล็กลง โดยคงความคมชัดไว้ในระดับดี

เป็นการประหยัดพื้นที่ของสื่อบันทึกข้อมูลได้เป็นอย่างดี

เว็บกราฟิก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive

Interlaced GIF

JPEG Quality & Progressive

ภาพฟอร์แมต JPG ค่า Quality ไม่ควรต่ำ หรือสูงเกินไป

กำหนดรูปแบบการแสดงผล เป็นแบบ Progressive ด้วย สำหรับภาพที่มีขนาดโต

GIF

Graphics Interlace File

จำนวนสีและความละเอียดของภาพไม่สูงมากนัก

ต้องการพื้นแบบโปร่งใส

ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบละเอียด

ต้องการนำเสนอภาพแบบภาพเคลื่อนไหว

ส่วนขยายคือ .gif

Bit depth drastically affects file size 24 bit color 16 million colors 1.55 MB 8 bit color 256 colors 518k 8 bit gray scale 256 shades of gray 518k 1 bit dithered image 64k

Transparent GIFs

Animation GIF

JPEG

Joint Photographer's Experts Group

เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต์

สามารถกำหนดขนาดของไฟล์ได้ตามความเหมาะสม ( File Compression )

สามารถกำหนดคุณสมบัติการแสดงผลแบบหยาบ แล้วค่อยๆ ละเอียดเมื่อเวลาผ่านไป ที่เรียกว่าคุณสมบัติ Progressive

ส่วนขยายของไฟล์รูปแบบนี้คือ . jpg หรือ . jpeg

JPEG File Format JPEG - 19K Low Quality JPEG - 60K Max Quality

PNG

Portable Network Graphics

รูปแบบล่าสุดในการนำเสนอภาพผ่านเครือข่ายอินเทอร์เน็ต

สามารถแสดงผลได้ในระบบสีเต็มพิกัด ( True Color ) , มีขนาดไฟล์เล็ก และควบคุมคุณภาพได้ตามที่ต้องการ มีการกำหนดให้พื้นภาพเป็นพื้นโปร่งใสได้ ( Transparent ) รวมทั้งการแสดงผลแบบหยาบสู่ละเอียด ( Interlaced )

ส่วนขยายของไฟล์รูปแบบนี้คือ . png

TIFF

Tagged - Image File Format

รูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น เลเยอร์ ( Layer ) , Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนข้อมูลประกอบอื่นๆ ตามต้นฉบับเดิมของภาพ

เหมาะสมต่อการเก็บบันทึกภาพต้นฉบับ และ ภาพสำหรับใช้ประกอบการสร้างสื่อสิ่งพิมพ์

ส่วนขยายของไฟล์รูปแบบนี้คือ . tif

สรุปการเลือกใช้ฟอร์แมตภาพ

ไฟล์สกุล GIF (Graphics Interlace File)

ภาพที่ไม่ต้องการความคมชัดมากนัก สีไม่มาก

มีลักษณะพื้นโปร่งใส

ไฟล์สกุล JPG (Joint Photographer’s Experts Group)

ภาพที่ต้องการความคมชัดสูง มีสีมาก

ไฟล์สกุล PNG (Portable Network Graphics)

ภาพที่ต้องการความคมชัดสูง มีสีมากทำพื้นโปร่งใส แบบสมบูรณ์

GIF / JPEG

GIF or JPEG?

72-ppi and 300-ppi

72 ppi = 72 pixels high x 72 pixels wide = 5184 pixels in a square inch

300 ppi = 300 pixels high x 300 pixels wide = 90,000 pixels in a square inch

Color Mode

A color mode determines the color model used to display and print images.

Common models include

RGB (red, green, blue)

CMYK (cyan, magenta, yellow, black)

…

RGB model

RGB model used for lighting, video, and monitors

So, computer’s monitor only has 3 colors

Red Green Blue

CMYK model

The CMYK model is based on the light-absorbing quality of ink printed on paper.

Sound : PCM

.wav

8-bit or 16-bit sound data

Mono Preprocessing

Sample Rate

5 kHz is barely acceptable for speech.

11 kHz is the lowest recommended quality for a short segment of music and is one-quarter of the standard CD rate.

22 kHz is a popular choice for Web playback and is half the standard CD rate.

44 kHz is the standard CD audio rate

Sound : MP3

Bit Rate

8 Kbps through 160 Kbps CBR (constant bit rate).

16 Kbps or higher for the best results

Mono Preprocessing

Quality

Fast yields faster compression but lower sound quality.

Medium yields somewhat slower compression but higher sound quality.

Best yields the slowest compression and the highest sound quality.

VDO formats

.MOV Quicktime, an Apple standard. It is playable on Macintosh and Windows machines.

.AVI Microsoft standard that is playable on Windows and Macintosh machines.

.RM Real streaming. They are playable on Windows, MacOS, and Unix computers.

.ASF Microsoft streaming format, and play on Windows, MacOS, and Solaris.

.WMA/.WMV Microsoft format used in Microsoft MovieMaker

.flv Macromedia Flash Video

PDF Format

Portable Document Format

เอกสารเสมือนจริง

Metadata

Data about data

ข้อมูลแสดงคุณสมบัติของไฟล์ หรือวัตถุต่างๆ

แสดงข้อมูลสรุปเกี่ยวกับรายละเอียดของไฟล์

แสดงลิขสิทธิ์ความเป็นเจ้าของ

แยกกลุ่มได้ตามประเภทของไฟล์หรือวัตถุ

Subject Metadata

Title Metadata

Category Metadata

Keyword Metadata

Author Metadata

Description Metadata

Publisher Metadata

Resource Metadata

การกำหนดคุณสมบัติของเอกสาร

MS – Office

File, Properties..

ประโยชน์ของ Metadata

เพิ่มประสิทธิภาพการสืบค้นเอกสาร

เป็นข้อมูลให้กับ Search Engine ต่างๆ

การเผยแพร่ในระบบอินเทอร์เน็ต เป็นไปอย่างรวดเร็ว

Meta Tags

Metadata สำหรับการนำเสนอบนเว็บ

บรรจุไว้ใน Head

รูปแบบทั่วไป

<META NAME=“dataname” CONTENT=“datavalue”>

ตัวอย่าง

<head> <title>Meta Tags-Metadata Elements</title>

<meta name="description" content=“meta tags."> <meta name="keywords" content="meta data, metadata, meta tag, meta-tag, search-engine"> <meta name="author" content="Keith Brooke">

</head>

Meta Analyst

http://www.submitexpress.com/analyzer/

มาตรฐาน Image Metadata

สนับสนุนระบบค้นคืนภาพ และการป้องกันลิขสิทธิ์ของภาพ

Image Metadata ระบบ XMP ( eXtensible Metadata Platform )

พัฒนาโดย The Newspaper Association of America ( NAA ) และ The International Press Telecommunications Council ( IPTC )

ใช้งานได้กับโปรแกรม Adobe PhotoShop 7.0 และสามารถนำเสนอข้อมูลต่างๆ เกี่ยวกับรูปภาพ เช่น Title, Author, Position, Caption, Copyright, URL, Keyword, Categories, Detail of org.

PDF Security Document

Watermark