Transcript ภาพนิ่ง 1 - Pirun Web Server

1


ในอดีตมนุษย์ได้ มีการใช้ ข้อความหรื อตัวอักษรเป็ นภาษาสื่อกลางติดต่อระหว่างกัน
โดยผ่านทางการอ่านหรื อบันทึกเรื่ องราวต่างๆ
ต่อมาได้ มีการนาตัวอักษรมาประยุกต์ใช้ ร่วมกับคอมพิวเตอร์ ด้วยกระบวนการเรี ยบ
เรี ยง ประมวลผล จัดเก็บและนามาใช้ งาน ซึง่ ได้ ก่อให้ เกิดประโยชน์ในทุกแวดวงธุรกิจ
หรื อแม้ แต่การสื่อสารด้ วยข้ อความที่เป็ นเท็กซ์ (Text Messaging)
2

จนกระทัง่ ได้ มีการเริ่ มนาตัวอักษรมาใช้ และเผยแพร่ผา่ นช่องทางการสือ่ สารบน
ระบบเครื อข่ายอินเทอร์ เน็ตในรูปแบบภาษา Html (Hypertext
Markup Language) ซึง่ ปั จจุบนั กาลังได้ รับความนิยมใช้ งานกันอย่าง
แพร่หลาย
3
ข้ อความภาษาเอชทีเอ็มแอลในโปรแกรมโน้ ตแพด
4

มาตรฐานตัวอักษรแบ่งออกเป็ น 2 ชนิด คือ
◦ แอสกี (Ascii)
◦ ยูนโิ ค ้ด (Unicode)

เป็ นรหัสขนาด 7 บิต รองรับได ้ 128 รหัส

ต่อมาได ้รับการพัฒนามาเป็ นมาตรฐาน ISO 646

้
้
ในการเก็บข ้อมูล 1 ไบต์ จะมีการใชงานขนาด
8 บิต แต่รหัสแอสกีจะใชงาน
เพียง 7 บิต ทาให ้สามารถทางานได ้กีร่ หัส ...................

้
ซงึ่ ต่อมาได ้มีการพัฒนาการใชงานรหั
สแบบ 8 บิตนี้ โดยแบ่งเป็ น 2 กลุม
่
กลุม
่ แรก (0-127) ยังคงเป็ นรหัสแอสกีแบบเดิม กลุม
่ ทีส
่ อง (128-25
5

มาตรฐานรหัส 8 บิต ในช่วงปี ค.ศ. 1980 จะมีการใช้ มาตรฐาน ISO 8859 โดยแยกตามกลุม่
ของภาษาในกลุม่ แรกจะเป็ นมาตรฐาน ISO 8859-1 เป็ นการอ้ างถึงภาษาในกลุม่ ISO Latin1
และครอบคลุมรวมไปถึงภาษาของประเทศทางตะวันตกของยุโรป (Western European) ส่วน
มาตรฐาน ISO 8859 สาหรับภาษาของประเทศทางตะวันออกของยุโรป เช่น Czech, Slovak
และ Croatian จะใช้ มาตรบาน ISO 8859-2 หรื อ Latin2 โดยแต่ละประเทศจะมีมาตรฐานของ
ภาษาที่แตกต่างกัน เช่น Cyrillic จะใช้ มาตรฐาน ISO 8856-5 Greek จะใช้ มาตรฐาน ISO
8859-7 และ Hebrew จะใช้ มาตรฐาน ISO 8859-8 เป็ นต้ น

จากข้ อบกพร่องของมาตรฐาน ISO 8859 ที่ถกู แบ่งออกเป็ นหลายประเภทดังกล่าวข้ างต้ นและ
มาตรฐานนี ้ไม่สนับสนุนระบบปฏิบตั ิการและซอฟต์แวร์ ต่างๆ อย่างครอบคลุม เป็ นผลให้
มาตรฐาน ISO 8859 ไม่สามารถใช้ งานได้ อย่างทัว่ ถึงและไม่เพียงพอที่จะรองรับกับรหัสของทุก
ชาติทกุ ภาษาได้ ดังนันเพื
้ ่อแก้ ไขปั ญหาจึงได้ มีการพัฒนาพื ้นที่ในการเก็บตัวอักษรเป็ น 16 บิต
(65536 รหัส) โดยมีการจัดกลุม่ ของรหัสแบบ 8 บิตออกเป็ น 256 กลุม่ ในทานองเดียวกันเมื่อ
จัดกลุม่ ของรหัสแบบ 16 บิตออกเป็ น 256 กลุม่ จะได้ รหัสแบบ 24 บิต จากนัน้ จัดกลุม่ รหัส
แบบ 24 บิต เพิ่มอีก 256 กลุม่ ก็จะพัฒนาไปสู่ ISO 10646 หรื อ รหัสแบบ 32 บิต
6
ตัวอย่างตารางรหัสแอสกี (ASCII)
7

เป็ นรหัสขนาด 16 บิต จึงสามารถ
รองรับตัวอักษรได ้มากถึง 65,536
(รหัส) ในรูปแบบของ “Code Point”
แสดงยูนิโค้ ด (Unicode) ของตัวอักษรภาษาไทย
8
แสดงยูนิโค้ ด (Unicode) ของตัวอักษรภาษาไทย
9

ปั จจุบน
ั ในหลายๆ ประเทศได ้มีการ
้
นาเอายูนโิ ค ้ดมาใชประโยชน์
รว่ มกัน
โดยการสร ้างมาตรฐานของตนเอง
่ มาตรฐาน “ซ ี
ขึน
้ มา ตัวอย่างเชน
เจเค (CJK)” ซงึ่ เกิดขึน
้ จากการ
รวมตัวของ 3ประเทศ ได ้แก่ จีน
(Chinese) ญีป
่ น
ุ่ (Japan) และ
เกาหลี (Korean)
ตัวอย่างรหัสยูนิโคดของซีเจเค
10


ในการนารหัส ISO 10646 มาใช้ งานให้ สามารถส่งข้ อมูลผ่านระบบเครื อข่าย (ในระบบเครื อข่ายส่งข้ อมูลได้ ครัง้
ละ 8 บิต) จะต้ องทาการเข้ ารหัส (Encoding) ตัวอักษรซึง่ การเข้ ารหัสแบบนี ้ จะรู้จกั กันในชื่อ “ยูซีเอส
(UCS)” แบ่งออกเป็ น UCS-2 และ UCS-4 จากนั ้นรหัสยูนิโค้ ดจะนาไปใช้ ในการแปลงเป็ นรูปแบบของ
UCS (UCS Transformation Formats : UTS-8 จะใช้ สาหรับเข้ ารหัส UCS-2 เป็ น
ต้ น
สาหรับภาษาที่ยนู ิโค้ ดสามารถรองรับได้ มีดงั นี ้ Latin, Greek, Cyrillic, American,
Hebrew, Arabic, Devanagari, Bengali, Gurmukhi, Gujarati,
Oriya, Tamil, Telugu, Kannada, Malayalam, Thai, Lao,
Georgian, Tibetan, Chinese, Japanese และ Korean
11
 รู ปแบบตัวอักษร (Fonts)
สามารถจัดแบ่งประเภทตัวอักษร
ออกเป็ นหมวดหมูไ่ ด้ 3 ระดับ ได้ แก่
◦ ประเภท (Category)
◦ ตระกูล (Family)
◦ ชื่อเฉพาะ (Face)
12

เป็ นที่รวมของตระกูล (Family) และชื่อเฉพาะ (Face) ของแต่ละตัวอักษร (Font)
สามารถแบ่งออกได้ ดงั นี ้
◦ Serif: เป็ นแบบอักษรที่ใช้ เป็ นมาตรฐาน ในแต่ละตัวอักษรจะมีเส้ นคล้ ายๆ ขีดเหลี่ยม
◦ Sans-Serif: เป็ นแบบอักษรที่ค้ นุ เคยมากกว่า Serif เพราะเป็ นที่นิยมของผู้เขียน
เว็บ มีรูปร่างมนกลม และดูสวยงาม
◦ Monospaced: เป็ นแบบอักษรที่มีขนาดความกว้ างของทุกตัวอักษรเท่ากันหมด
บางทีเรี ยกว่า Typewriter Font เนื่องจากมีลกั ษณะคล้ ายตัวอักษรที่ได้ จาก
เครื่ องพิมพ์ดีด
◦ Script: เป็ นแหล่งรวมของแบบอักษรทุกชนิด ที่มีลกั ษณะพิเศษต่างๆ เช่น มีจดุ มีหาง
เป็ นต้ น และมีลกั ษณะของตัวอักษรที่คล้ ายกับลายมือ
13

เป็ นหมวดทีย
่ อ
่ ยลงไปจาก
Category แต่ตวั อักษรทีอ
่ ยูใ่ น
ตระกูลเดียวกันจะมีบรรพบุรษ
ุ
ร่วมกัน
Category
Family
Sarif
Times, Century
Schoolbook, Garamond
Sans-Serif
Helvetica, Arial, Verdana
Monospaced Courier, Courier New
Decorative
Whimsy, Arribal, Bergell
ั พันธ์ระหว่าง Category และ Family
•ตารางแสดงความสม
14

เป็ นตัวอักษรทีย
่ อ
่ ยลงไปจาก
Family
Family
Face
Times Roman Regular, Italic
Arial
Regular, Bold, Italic
Courier
Regular, Oblique
Whimsy
Regular, Bold
ั พันธ์ระหว่าง Family และ Face
ตารางแสดงความสม
15

ตัวอักษรมีให้ เลือกใช้ มากมายหลายรูปแบบ เช่น รูปแบบอักษรที่เหมาะสาหรับข้ อความ
ภาษาไทย / อังกฤษ ได้ แก่ MS Sans Serif, Microsoft Sans
Serif, Thonburi เป็ นต้ น ส่วนรูปแบบอักษรที่เหมาะสาหรับข้ อความ
ภาษาอังกฤษได้ แก่ Arial, Helvetica, Sans-Serif เป็ นต้ น โดย
สามารถแสดงรูปแบบของตัวอักษรเป็ น AngsanaUPC ที่มีลกั ษณะเป็ น
ตัวอักษรธรรมดา ตัวอักษรหนา ตัวอักษรเอียง ตัวอักษรธรรมดาขีดเส้ นใต้ ตัวอักษรหนา
ขีดเส้ นใต้ ตัวอักษรเอียงหนา และตัวอักษรเอียงหนาขีดเส้ นใต้ และมีขนาดของตัวอักษร
ให้ เลือกใช้ ตงแต่
ั ้ 8-72 จุดต่อหนึง่ ตัวอักษร (หนึ่งจุดเท่ากับ 0.138 นิ ้ว)
16
ตัวอักษรธรรมดา ตัวอักษรหนา ตัวอักษรเอียง ตัวอักษรธรรมดาขีดเส้ นใต้
แสดงตัวอักษร Cordia New ลักษณะต่างๆ
17
ขนาด 66 จุด
ขนาด 12 จุด
ขนาด 14 จุด
ขนาด 16 จุด
ขนาด 72 จุด
ขนาด 60 จุด
ขนาด 18 จุด
ขนาด 20 จุด
ขนาด 54 จุด
ขนาด 24 จุด
ขนาด 28 จุด
ขนาด 48 จุด
ขนาด 32 จุด
ขนาด 44 จุด
ขนาด 36 จุด ขนาด 40 จุด
แสดงตัวอักษรขนาดต่างๆ
18
แสดงโครงสร้ างของตัวอักษรภาษาอังกฤษ










Serif คือ เส้ นที่กาหนดส่วนบนสุดของตัวอักษร
Mean Lineคือ เส้ นที่กาหนดความสูงของอักษรตัวพิมพ์เล็ก
Base Lineคือ เส้ นที่กาหนดขอบล่างของตัวอักษร
Point Sizeคือ ช่วงความสูงทังหมดที
้
่ตวั อักษรต้ องใช้
Cap Heightคือ ความสูงของตัวอักษรตัวพิมพ์ใหญ่
Shoulderคือ ช่องว่างที่เผื่อไว้ สาหรับเว้ นบรรทัด
Set Widthคือ ความกว้ างของตัวอักษร
X - Height คือ ความสูงของตัวอักษรพิมพ์เล็ก
Ascender คือ ส่วนที่เลยเส้ น Mean Line ขึ ้นไปด้ านบน ใช้ กบั อักษรตัวพิมพ์เล็ก
Descender คือ ส่วนที่เลยเส้ น Baseline ลงมาด้ านล่าง ใช้ กบั อักษรตัวพิมพ์เล็กเช่นกัน
19







ในการใช้ ตวั อักษรที่มีขนาดเล็กจะต้ องชัดเจนและอ่านง่าย
ข้ อความที่ต้องการจะเน้ นควรจะมีลกั ษณะที่แตกต่างจากข้ อความธรรมดา เช่น มีการขีดเส้ นใต้
ทาเป็ นอักษรตัวเอียง หรื อตัวหนา เป็ นต้ น
จัดช่องว่างของบรรทัดให้ เหมาะสมและอ่านง่าย
จัดขนาดของตัวอักษรตามความสาคัญของข้ อความ
หัวข้ อที่ใช้ ตวั อักษรขนาดใหญ่ควรมีระยะช่องไฟของตัวอักษรที่ให้ ความรู้สกึ ที่ดี ไม่ติด หรื อห่าง
กันเกินไป
จัดสีของข้ อความให้ อ่านง่าย มีความแตกต่างจากสีของพื ้นหลัง เช่น ตัวอักษรสีดาบนพื ้นขาว
ควรใช้ วิธีการ Anti-Aliasing กับหัวข้ อที่เป็ นอักษรกราฟิ กขนาดใหญ่ (อักษรกราฟิ ก
ขนาดใหญ่จะมีรอยหยักบริ เวณขอบของตัวอักษรเกิดขึ ้น การปรับรอยหยักดังกล่าวให้ เรี ยบดู
สวยงามเรี ยกว่า Anti-Aliasing
20
ตัวอักษรแบบธรรมดา
ตัวอักษรที่ใช้ การขจัดรอยหยัก
ความแตกต่างระหว่างตัวอักษรแบบธรรมดากับตัวอักษรที่ใช้ การขจัดรอยหยัก
21







หากต้ องการจัดข้ อความให้ อยู่กึ่งกลางบรรทัด ไม่ควรทาติดต่อกันหลายบรรทัดจะดูไม่สวยงาม
ในภาษาอังกฤษควรใช้ อกั ษรพิมพ์ใหญ่ และพิมพ์เล็กอย่างเหมาะสม
เน้ นความน่าสนใจของข้ อความด้ วยการใส่แสงเงาให้ ตวั อักษร หรื อวางหัวข้ อหลักๆ บนพื ้นที่ว่าง
ซึง่ เป็ นจุดสนใจที่มองเห็นได้ อย่างชัดเจน
สรรหาข้ อคิด คาเสนอแนะ หรื อคาติชมจากหลายๆ ความคิดมาสรุปเพื่อเลือกใช้ ตวั อักษรที่
เหมาะสมที่สดุ กับข้ อความที่ต้องการ
ใช้ คาศัพท์ที่มีความหมายน่าสนใจและเข้ าใจง่าย เพื่อเชื่อมโยงหัวข้ อกับเนื ้อความเข้ าด้ วยกัน
ข้ อความสาหรับเชื่อมโยงบนหน้ าเว็บเพ็จ (Text Link) ควรมีลกั ษณะตัวอักษรที่เน้ น
ข้ อความ เช่น ใส่สีสนั ขีดเส้ นใต้ ข้อความ และควรหลีกเลี่ยงการเน้ นด้ วยสีเขียวบนพื ้นสีแดง
เพราะจะทาให้ ตวั อักษรมีสีสนั ที่ไม่น่าอ่าน
เน้ นเนื ้อความที่เป็ นจุดสาคัญด้ วยการทาแถบสีที่ข้อความนันๆ
้ แต่ไม่ควรให้ เหมือน Text
Link หรื อข้ อความบนปุ่ มกด (Button)
22




จัดวางข ้อความสาคัญๆ แต่ละหัวข ้อให ้อยูบ
่ นจอภาพเดียวกัน
แบ่งเนือ
้ ความอธิบายเป็ นสว่ นๆ แยกย่อยกันไปในแต่ละย่อหน ้า
ใชตั้ วอักษรทีอ
่ า่ นง่าย และมีขนาดของตัวอักษรไม่ใหญ่หรือเล็ก
จนเกินไป
ื่ มโยงความสม
ั พันธ์ของข ้อความให ้ง่ายต่อการเข ้าถึงข ้อมูลที่
เชอ
ต ้องการได ้อย่างรวดเร็ว
23

สัญลักษณ์ (Symbols) เป็ นการสร้ างภาพแทนข้ อความต่างๆ เพื่อบ่งบอกการทางานของ
คอมพิวเตอร์ ในขณะนันหรื
้ อใช้ เตือนเพื่อบอกสิ่งที่ควรกระทา ตัวอย่างเช่น เมื่อมีรูปนาฬิกาทราย
ปรากฏบนจอภาพคอมพิวเตอร์

สาหรับงานด้ านมัลติมีเดียมักจะใช้ สญ
ั ลักษณ์ร่วมกับข้ อความ เพื่อบอกความหมายของ
สัญลักษณ์นนๆ
ั ้ ส่วน “ไอคอน (Icon)” หมายถึงภาพสัญลักษณ์ที่ใช้ ใส่คอมพิวเตอร์ เช่น รูป
ถังขยะ และรูปนาฬิกาทราย เป็ นต้ น

สัญลักษณ์ในงานด้ านมัลติมีเดียจะมีรูปแบบและความหมายประจาตัว ซึง่ บางสัญลักษณ์มีการ
ใช้ กนั อย่างแพร่หลายจนทุกคนเข้ าใจความหมายได้ เป็ นอย่างดี
24
แสดงสัญลักษณ์และภาพสัญลักษณ์ (ไอคอน) ที่ใช้ ทวั่ ไป
แสดงสัญลักษณ์ 12 ราศี
25

งานด้ านมัลติมีเดีย
ยังมีการใช้ งาน
สัญลักษณ์ไม่มาก
นัก ซึง่ สัญลักษณ์ที่
ถูกนาไปใช้ สว่ น
ใหญ่จะมี
ความหมายเป็ น
สากล ดังตัวอย่าง
ในตารางแสดงให้
เห็นถึงสัญลักษณ์
ในรูปแบบต่างๆ
ตามแต่
วัตถุประสงค์ของ
การใช้ งาน
วัตถุประสงค์ของการใช้ งาน
สัญลักษณ์
การติดต่อสื่อสารระหว่างกันบนระบบเครื อข่าย
:-)
ยิ ้มธรรมดา
;-)
ยิ ้มและขยิบตาหนึง่ ข้ าง
:-|
แสดงอาการไม่สนใจ
:->
อาการกรี๊ ดอย่างแรง
:-(
กาลังหน้ าบึ ้ง
8-)
แสดงอาการตื่นเต้ น
:-D
อาการประหลาดใจ
:-/
อาการงง ฉงน

เล่นเพลง

หยุด

นาแผ่นออก

เล่นเพลงถัดไป

เล่นเพลงก่อนหน้ า

กรอไปข้ างหน้ า

กรอกลับ
การเล่นชมวีดทิ ศั น์
ความหมาย
26

้
เครือ
่ งมือทีใ่ ชในการสร
้างรูปแบบและลักษณะของ
ตัวอักษรนั น
้ จะใชส้ าหรับสร ้างลักษณะพิเศษทีเ่ ป็ น
เอกลักษณ์เฉพาะของแต่ละงานทีผ
่ ลิตหรือสร ้าง
่
เครือ
่ งหมายการค ้า ซงึ่ มีมากมายหลายโปรแกรม เชน
ResEdit, Fontographer และ FontMonger เป็ น
้
ต ้น สาหรับใชงานบนเครื
อ
่ งแมคอินทอช Type้
Designer สาหรับใชงานบนวิ
นโดว์ และ
้
FontChameleon ทีส
่ ามารถใชงานบนเครื
อ
่ งแมคอิน
ทอชและระบบปฏิบต
ั ก
ิ ารวินโดว์ได ้
27
การออกแบบตัวอักษรด้ วยโปรแกรม Fontographer
28


ในการสร้ างตัวอักษรให้ สวยงาม จะต้ องใช้ เครื่ องมือที่มีความสามารถในการย่อขยาย ปรับเฉดสี
ปรับแสงเงา และสามารถปรับขอบของตัวอักษรให้ เรี ยบ ซึง่ การสร้ างตัวอักษรด้ วยโปรแกรม
กราฟิ กต่างๆ สามารถเลือกเอารูปแบบอักษรที่โปรแกรมได้ จดั เตรี ยมไว้ มาดัดแปลงใช้ งานและ
ปรับปรุงเป็ นตัวอักษรกราฟิ กที่สวยงามได้
โปรแกรมเกี่ยวกับงานทางด้ านกราฟิ กมากมาย ตัวอย่างเช่น โปรแกรม Photoshop
สาหรับใช้ สร้ างและปรับแต่งตัวอักษรให้ เกิดความสวยงามได้ อย่างง่ายดาย ไม่วา่ จะเป็ นเรื่ อง
ของการจัดแต่งรูปลักษณ์ แสงเงา หรื อแม้ แต่เฉดสีบนพื ้นต่างๆ
29
การปรับแต่งข้ อความด้ วยโปรแกรม Photoshopและ Cool 3D
30

ยังมีโปรแกรมสาหรับออกแบบอีกประเภทหนึง่ ทีสามารถทาให้ ตวั อักษรมีความลึก และมุมมอง
กระทบของแสงได้ หลายทิศทางในลักษณะของภาพ 3 มิติ ได้ แก่โปรแกรม
Broderbund’s TypeStyler, RayDream’s Adddepth 2,
Cool 3d, Vertigo 3d และ Plug-Ins ของโปรแกรม Photoshop
เป็ นต้ น ซึง่ โปรแกรมเหล่านี ้นอกจากจะมีคณ
ุ สมบัติในการปรับแต่งข้ อความหรื อตัวอักษรให้ เกิด
ความสวยงามและน่าสนใจมากยิ่งขึ ้นแล้ วยังได้ เพิ่มขีดความสามารถในการปรับแต่งพื ้นผิว เฉด
สี แสงตกกระทบ และการหมุนรอบได้ ทวั่ ทิศทางได้ อีกด้ วย เหมาะสาหรับการนาเสนอชิ ้นงานที่
ต้ องการความละเอียดสูงด้ านการโฆษณาสินค้ าและบริ การ หรื อจัดทาเป็ นสื่อการเรี ยนการสอน
ในลักษณะเสมือนจริ ง (Virtual Reality)
31
หาเว็บไซต์ที่ใช้ ข้อความแปลกๆ สวยงาม
ให้ สร้ างข้ อความแปลกๆ เป็ นชื่อตัวเอง เลขที่ เอก หมู่ ด้ วย
โปรแกรม Photoshop
ให้ สร้ างข้ อความเหมือนตัวอย่างด้ านขวามือ เป็ นชื่อตัวเอง
ด้ วย WordArt ของโปรแกรม Word
1.
2.
3.
◦
◦
◦
ทำลงไมโครซอฟต์เวิร์ด พิมพ์เลขที่และชื่อตนเองไว้บรรทัดแรก ตั้งชื่อ
ไฟล์วำ่ (เลขท้ำยรหัส นศ.4 ตัว)(ชื่อ) เช่น 1023สมชำย
ส่งอีเมล์แนบไฟล์เวิร์ดไปที่ [email protected] ในหัวเรื่ อง “งำน2”
ผูใ้ ดไม่ทำตำมนี ้ จะไม่ตรวจให้
32