Web page Technology

เทคโนโลยีเว็บเพจ (Web Pages)

ช่วงปลายปี 1989 ทีมงานจากห้องปฏิบัติการทางจุลภาคฟิสิกส์แห่ง
ยุโรป (EuropeanParticle Physics Labs)
ที่รู้จักกันในนาม CERN (Conseil European pour la Recherche Nucleaire) ประเทศสวิตเซอร์แลนด์
พัฒนาการนำเสนอข้อมูลในระบบ WWW (World Wide Web)
พัฒนาภาษาที่ใช้สนับสนุนการเผยแพร่เอกสารของนักวิจัย หรือเอกสารเว็บ (Web Document) คือ ภาษา HTML

ลักษณะเด่น

สามารถเชื่อมโยงข้อมูลไปยังจุดอื่นๆ บนหน้าเว็บ
ไม่ยึดติดกับระบบปฏิบัติการ (Cross Platform)
สามารถเผยแพร่ได้รวดเร็ว และกว้างไกล

ทำความรู้จักกับเอกสารเว็บ

เอกสารเว็บไฟล์ข้อความ (Text File)

ควบคุมการแสดงผลด้วยคำสั่ง
ภาษา HTML ที่เรียกว่า “แท็ก - Tag”
มีส่วนขยายเฉพาะ.html หรือ .htm
ทำงานได้ทุกระบบปฏิบัติการ
แสดงผลผ่านโปรแกรมเฉพาะ
เรียกว่า “เว็บเบราเซอร์”

ภาษา HTML

HTML หรือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์รูปแบบหนึ่ง
มีลักษณะเป็นภาษาในเชิงการบรรยายเอกสารไฮเปอร์มีเดีย
อาศัยตัวกำกับ เรียกว่า แท็ก (Tag) ควบคุมการแสดงผลของ
ข้อความ, รูปภาพหรือวัตถุอื่นๆ

เว็บเบราเซอร์ (Web Browser)

โปรแกรมแปลคำสั่ง HTML และแสดงผลบนจอภาพ
มีผู้พัฒนาหลายค่าย ได้แก่

-Microsoft พัฒนา Internet Explorer
-Netscape พัฒนา Netscape Navigator
-Mozilla FireFox
-Opera

เว็บเบราเซอร์แต่ละค่าย แต่ละรุ่น
รู้จักภาษา HTML ไม่เท่ากัน

การพัฒนาเว็บเพจ

ใช้ภาษา HTML

ป้อนคำสั่งภาษา HTML ด้วย
โปรแกรม Text Editor
เช่น NotePad
ใส่คำสั่งได้ตามต้องการ
ไม่เหมาะสำหรับผู้พัฒนา
ในระดับต้น

ใช้โปรแกรมช่วยในการลงรหัส HTML Editor
เช่นโปรแกรม Hot Dog
Professional,Home SiteX
มีปุ่มคำสั่งควบคุมรหัสคำสั่ง
HTM ใช้งานได้ง่ายและรวดเร็ว
จุดด้อยคือ โปรแกรมจะไม่รู้จัก
คำสั่ง HTML ใหม่ๆ

ใช้โปรแกรมสร้างเอกสารเว็บ (Web Generator)
เช่นโปรแกรม
Microsoft Office 2000,
Macromedia Dreamweaver
ไม่ต้องศึกษาภาษา HTML
จุดด้อยคือ โปรแกรมจะไม่รู้จักคำสั่ง HTML ใหม่ๆ

ใช้บริการ Content Management System (CMS)

ไม่ต้องผู้รู้ภาษา HTML
ไม่ต้องยุ่งยากเรื่องครุภัณฑ์/ค่าใช้จ่ายด้าน Server
ไม่ต้องมีความรู้ด้านเทคนิค
ไม่ต้องอาศัยทีมงานเฉพาะด้าน

เลือกเครื่องมือ?

ระดับต้น ควรใช้ HTML Generator/CMS
ระดับกลาง ศึกษาภาษา HTML แล้วใช้ผสมผสานกันระหว่าง HTML Generator กับ HTML Editor
ระดับสูง ศึกษาภาษา HTML และภาษา Script ต่างๆ ใช้เครื่องมือทุกประเภทผสมผสานกัน เพื่อให้การพัฒนาเป็นไปอย่างมีประสิทธิภาพ และรวดเร็ว

ขั้นตอนการพัฒนาเว็บเพจ

::วางแผน/กำหนดหัวข้อ และเนื้อหาที่จะนำเสนอ

::สร้างผังความสัมพันธ์ของข้อมูลแบบรากต้นไม้

::กำหนดชื่อไฟล์ของเอกสารเว็บ
ชื่อไฟล์และนามสกุลของไฟล์เอกสารเว็บ
    -จะถูกควบคุมจาก Web Administor
    -นามสกุลของไฟล์เอกสาร HTML มี 2 แบบคือ .htm, .html
    -ชื่อและนามสกุลที่ใช้ เป็นภาษาอังกฤษตัวพิมพ์เล็ก ไม่มีช่องว่าง
    -ห้ามใช้สัญลักษณ์พิเศษใดๆ ยกเว้นเครื่องหมาย “ขีด -”
    -ไฟล์แรกมักจะใช้ชื่อ index

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

ด้านพัฒนาเว็บ
HTML Editor, Generator แสดงผลภาษาไทย ?
HTML Editor, Generator เข้ารหัสภาษาไทย ?

ด้านเรียกดูเว็บ
ฟอนต์ ไม่ควรสร้างภาระให้กับผู้ใช้งาน
แสดงผลอักขระได้ถูกต้อง ทุก (เกือบทุก) platform

คอมพิวเตอร์เก็บข้อมูลโดยรหัสดิจิตอล 0 กับ 1
รหัส 1 ตัว เรียกว่าเป็น 1 bit,
รหัส 8 bit เรียกว่าเป็น 1 byte
พยัญชนะภาษาอังกฤษ มี 26 ตัว คิดแยกเป็นตัวใหญ่ตัวเล็ก รวมตัวเลขและอักษรพิเศษต่างๆ แล้ว ก็ยังมีจำนวนไม่มาก (ไม่มากคือประมาณ 100 ตัว)
ผู้ที่คิดค้นคอมพิวเตอร์ในยุคแรกๆ นั้นเป็นผู้ที่ใช้ภาษาอังกฤษ ดังน้นจึงคิดค้น ระบบการเก็บข้อมูลโดยใช้รหัสยาว 7 บิต (ASCII) สามารถเก็บอักขระต่างๆ ได้ แตกต่างกันทั้งหมด 2^7 ตัว = 128 ตัว นับว่าเพียงพอสำหรับการใช้งานทั่วไป เช่น ตัวอักษร A จะตรงกับรหัส ASCII 65 เขียนเป็นเลขฐาน 2 เรียงกัน 7 ตัวได้ดังนี้ 100 0001

Character set คืออะไร

ต่อมาคอมพิวเตอร์ได้แพร่หลายไปยังประเทศที่ไม่ได้ใช้แค่ภาษาอังกฤษ ได้มีวิธีการแก้ไขแบบเฉพาะหน้า โดยการเพิ่มความยาวของรหัสที่เก็บจาก 7 ตัว ให้เป็น 8 ตัว ก็จะสามารถเก็บอักษรได้ทั้งหมดเป็น 2^8 = 256 ตัว
ประเทศต่างๆ ก็สามารถใช้ส่วนที่เกินมาอีก 128 ตัวนั้น ใช้เก็บรหัสอักขระเพิ่มเติม ที่เป็นเฉพาะของภาษาตนเอง เช่น กลุ่มประเทศยุโรปแถบตะวันตก ก็จะใช้เก็บอักขระเช่น พวก ที่มีลักษณะคล้าย a, e, i แต่มันจุดหรือมีขีดอยู่บนตัวอักษรเหล่านั้น (ซึ่งใช้กันในภาษาของพวกเขา) ตัวอย่างเช่น รหัส 228 จะเป็นตัว a umlaut คือ a แล้วมีจุดอยู่ข้างบน 2 จุด ใช้กันในภาษาเยอรมันเป็นต้น
ประเทศไทยก็ได้ใช้ประโยชน์ของรหัส 128 ตัวที่เกินมานี้เช่นกัน เช่น เราเก็บรหัส ก ไก่ ไว้ที่หมายเลข 161, เราเก็บไม้มลาย "ไ" ไว้ที่รหัสหมายเลข 228 เป็นต้น

ดังที่กล่าวมาแล้วนั้น เราจำเป็นต้องมีตารางที่จะแสดงว่า หมายเลขอะไร หมายถึงตัวอักษรอะไร ตารางนี้ ก็จะแตกต่างกันไปในแต่ละภาษา ซึ่งมีอักขระซึ่งต่างๆ กัน
ดูๆ ไปแล้ว ก็ยังไม่เห็นว่าจะมีปัญหาอะไร ตราบใดที่ในเครื่องคอมพิวเตอร์ของท่าน มีใช้งาน แค่ 2 ภาษา เช่น ภาษาไทย กับ ภาษาอังกฤษ ถ้าท่านได้รับรหัสมามีค่า 228 ก็สรุปได้เลยว่าผู้ส่งต้องการจะส่งไม้มลาย มา
แต่หากท่านต้องการจะส่งข้อมูล ไปยังเครื่องคอมพิวเตอร์เครื่องอื่น หรือเปิด Web Site ให้ผู้คนจากทั่วโลกเข้ามาดู ที่ไม่ได้ใช้ภาษาไทย อยู่ด้วย ผู้คนเหล่านั้น จะเข้าใจได้อย่างไรว่า ท่านต้องการส่ง ไม้มลาย ซึ่งเป็นอักขระหนึ่งของภาษาไทย?
ถ้าคนเยอรมันได้รับรหัสนั้น ย่อมต้องแปลความหมายของรหัส 228 ที่ท่าน ส่งไปว่าเป็นอักขระ a umlaut ที่พวกเขาใช้กัน? เขาควรจะรู้ได้อย่างไรว่า เขาควรจะหยิบตารางที่ใช้แปลงค่ารหัสเป็นภาษาไทย แทนที่จะใช้ตารางของภาษาเยอรมัน?

วิธีแก้ปัญหานั้นก็ง่ายดาย เพียงแต่ระบุแปะหน้าไปว่าข้อมูลของท่านนั้น ขอให้ใช้ตารางสำหรับภาษาไทยในการถอดรหัส
สิ่งที่ระบุแปะหน้าไปนั้น ก็เป็นที่เรียกกันว่า character set

ประโยชน์ ของ Character set

Browser ที่เป็นที่นิยมใช้ในปัจจุบัน สามารถจะรับรู้ character-set ที่ท่านตั้งไว้ และเลือกแสดงเป็นภาษาไทยได้อย่างถูกต้องโดยที่ไม่ต้องติดตั้งค่าอะไรเพิ่มเติม
Search engine ที่มาค้นข้อมูลในเพจของท่าน สามารถจะแยกแยะได้ทันทีว่านี่คือภาษาไทย ไม้มลายในเพจของท่านจะมีความหมายไม้มลาย Search engine จะไม่คิดว่ามันเป็น a umlaut อย่างแน่นอน
ปัจจุบัน ในทุกระบบปฏิบัติการมีการใช้ฟอนต์แบบ Unicode (2 byte) กันอย่างแพร่หลาย ฟอนต์แบบ Unicode สามารถเก็บรหัสอักขระได้ถึง 2^16 = 65,536 ตัว เก็บได้เกือบทุกภาษาในโลก การใช้ฟอนต์ Unicode ในการแสดงผลนั้น จำเป็นอย่างยิ่งที่ จะต้องทราบว่า เอกสารนี้เป็นภาษาใด เพื่อจะ Browser จะได้เลือกส่วนภาษานั้นๆ จาก ฟอนต์ Unicode (ซึ่งมีหลายภาษามาก) ออกมาแสดงผล

TIS-620/Windows-874

ประเทศไทยมีมาตรฐานอักขระซึ่งกำหนดโดย สำนักงานมาตรฐานอุตสาหกรรม ดังที่เรียกกันโดยทั่วไปว่ารหัส สมอ. แต่รหัส สมอ. หรือที่มีชื่อทางการว่า มอก.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 ที่จดทะเบียนถูกต้อง เป็นที่รับรู้กันทั่วโลก ทุกระบบปฏิบัติการ (แม้แต่ระบบปฏิบัติการของไมโครซอฟต์เอง)

ขั้นตอนการพัฒนาเว็บเพจ

กำหนดชื่อไฟล์ของเอกสารเว็บ

โฟลเดอร์

เป็นสิ่งสำคัญสร้างโฟลเดอร์เฉพาะสำหรับเอกสารเว็บแต่ละชุด/เรื่อง
ในโฟลเดอร์ที่สร้าง สามารถสร้างโฟลเดอร์ย่อย เพื่อเก็บไฟล์ให้เป็นระบบระเบียบได้

ขั้นตอนการพัฒนาเว็บเพจ

จัดหาภาพ หรือสร้างภาพที่เกี่ยวข้องกับเนื้อหา
สร้างด้วยโปรแกรมกราฟิก เช่น Adobe PhotoShop
คัดเลือกจาก ClipArt for Web เช่น CD-ROM รวมภาพสำหรับเว็บ
ภาพที่เลือกใช้ทั้งหมด ต้องเก็บไว้ในโฟลเดอร์ที่สร้างไว้ก่อนแล้ว

รูปแบบการนำเสนอภาพ

Format

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

GIF

-Graphics Interlace File
-จำนวนสีและความละเอียดของภาพไม่สูงมากนัก
-ต้องการพื้นแบบโปร่งใส
-ต้องการแสดงผลแบบโครงร่างก่อน แล้วค่อยแสดงผลแบบละเอียด
-ต้องการนำเสนอภาพแบบภาพเคลื่อนไหว
-ส่วนขยายคือ .gif

Transparent GIFs

Animation GIF

JPEG File Format

*Joint Photographer's Experts Group
*เหมาะสมกับการนำเสนอทั้งระบบสื่อมัลติมีเดีย และเว็บไซต์
*สามารถกำหนดขนาดของไฟล์ได้ตามความเหมาะสม (File Compression)
*สามารถกำหนดคุณสมบัติการแสดงผลแบบหยาบ แล้วค่อยๆ ละเอียดเมื่อเวลาผ่านไป ที่เรียกว่าคุณสมบัติ Progressive
*ส่วนขยายของไฟล์รูปแบบนี้คือ .jpg หรือ .jpeg

PNG

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

TIFF

*Tagged-Image File Format
*รูปแบบที่ใช้เก็บภาพพร้อมรายละเอียดต่างๆ เช่น เลเยอร์ (Layer), Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนข้อมูลประกอบอื่นๆ ตามต้นฉบับเดิมของภาพ
*เหมาะสมต่อการเก็บบันทึกภาพต้นฉบับ และภาพสำหรับใช้ประกอบการสร้างสื่อสิ่งพิมพ์
*ส่วนขยายของไฟล์รูปแบบนี้คือ .tif

Pixel

Your eye perceives Continuity
dpi = dot per inch

สรุป

การเลือกใช้ฟอร์แมตภาพไฟล์สกุล GIF (Graphics Interlace File)
-ภาพที่ไม่ต้องการความคมชัดมากนัก
-ภาพที่ต้องการสีไม่มาก
-ต้องการพื้นโปร่งใส

ไฟล์สกุล JPG (Joint Photographer’s Experts Group)
-ภาพที่ต้องการความคมชัดสูง มีสีมาก

ไฟล์สกุล PNG (Portable Network Graphics)
-ภาพที่ต้องการความคมชัดสูง มีสีมากทำพื้นโปร่งใสได้

GIF - JPEG ?

45 เว็บกราฟิก

Pixel per inch: ppi

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

ขั้นตอนการพัฒนาเว็บเพจ

สร้างเอกสารเว็บ โดยการลงรหัส HTML หรือใช้โปรแกรมช่วย
ไฟล์เอกสาร HTML ทุกไฟล์จะต้องบันทึกไว้ในโฟลเดอร์ที่สร้างไว้ก่อน รวมกับรูปภาพที่จัดเตรียมไว้แล้ว

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

*หน้าเว็บที่เหมาะสม ไม่มีข้อกำหนดที่ชัดเจน ควรคำนึงถึง
กลุ่มเป้าหมาย (Personal/Business)

*ลักษณะของคอมพิวเตอร์ที่กลุ่มเป้าหมายใช้ (Screen Area ของจอภาพ)
Screen Area ที่เหมาะสมในปัจจุบัน คือ 800 x 600 pixels

*Web Area ที่เหมาะสมคือ
ความยาวไม่เกิน 780 pixel

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

Template & Layout Design

S:\PhotoStore\photo_market

http://www.asoke.info

ขั้นตอนการพัฒนาเว็บเพจตรวจสอบผลเอกสาร HTML ด้วยเว็บเบราเซอร์หลายค่าย หลายรุ่น
เว็บเบราเซอร์แต่ละค่าย แต่ละรุ่น รู้จักคำสั่ง HTML ไม่เท่ากัน

ขั้นตอนการพัฒนาเว็บเพจส่งข้อมูลขึ้นเครื่องแม่ข่าย (Server)
ตรวจสอบผลการเรียกดูจากเครื่องแม่ข่าย