Your SlideShare is downloading. ×
0
มาตรฐานการออกแบบ
   พัฒนาเว็บไซต
บุญเลิศ อรุณพิบูลย
• นักวิชาการ 1
• ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี (STKS)
• สํานักงานพัฒนาวิทยาศาสตรและเทค...
มาตรฐานเว็บไซต

• ดานเทคโนโลยี
• ดานการใช
• ดานการเขาถึง
มาตรฐานเว็บไซต

       รองรับ
      การเขาถึง
สวย                คนได

         เร็ว
ดานเทคโนโลยี
• การแสดงผลบน     • การนําเสนอดวย
  เบราวเซอร       เสียงการนําเสนอ
• ระบบปฏิบติการ
           ั        ด...
ดานการใช
• ความสม่ําเสมอเกี่ยวกับขอความ และสื่อ
  ประกอบตางๆ
• ความสม่ําเสมอในสวน Interface
  – Layout
  – Navigator
...
ดานการเขาถึง

• การเขาถึงที่ไมจํากัดดวยความ
  แตกตางเรือง
            ่
  –เวลา
  –สถานที่
  –อุปกรณ
  –กายภาพของผู...
ความเขาใจผิดบางประการ
•   ควรทําหรือไม
•   สินเปลืองงบประมาณ
      ้
•   เสียเวลา
•   ไมคมคา
         ุ
    Accessibi...
Server & Client
             upload           WindowsXP
                                  IE
                             ...
Server & Client
             upload            Text Browser



                                คนพิการ
 พัฒนาเว็บดวย
 HTM...
มาตรฐานที่เกี่ยวของ
• มาตรฐานการตั้งชื่อไฟลและ Directory
• มาตรฐานทางดานเนื้อหา
• มาตรฐานทางดานรูปแบบการใชภาษา
  บนเว...
การตั้งชื่อไฟลและ
               Directory
•   สื่อความหมาย-เขาใจตรงกัน
•   สั้นกระชับ
•   ไมเกิดความสับสน
•   ชวยให ...
การตั้งชื่อไฟลและ
               Directory
• ภาษาอังกฤษ ผสมตัวเลข




• ใชเครื่องหมายเฉพาะ –
• ไมควรมีชองวาง
         ...
แบบอักษร (Fonts)

• เลือกใชฟอนตมาตรฐาน
  – Tahoma
  – Tahoma, MS Sans Serif, Thonburi
  – ตระกูล NEW
Tahoma & MS Sans
      Serif
ภาษาไทย กับการพัฒนา
             เว็บเพจ
• ดานพัฒนาเว็บ
  – HTML Editor, Generator แสดงผลภาษาไทย ?
  – HTML Editor, Gener...
HTML Editor
กับการเขารหัสภาษาไทย
กรณีศึกษา Macromedia
    Dreamweaver
กรณีศึกษา Macromedia
    Dreamweaver
Decoding ภาษาไทย
        ถูกตองหรือไม
  <meta http-equiv=“content-type”
content=“text/html; charset=………..”>
TIS-620/Windows-874
• ประเทศไทยมีมาตรฐานอักขระซึ่งกําหนดโดย สํานักงาน
  มาตรฐานอุตสาหกรรม ดังที่เรียกกันโดยทั่วไปวารหัส ส...
TIS-620/Windows-874/UTF-
                8
• windows-874 เปน character Set ที่ใชภายใน
  ระบบปฏิบัติการทีผลิตโดยบริษัท ไม...
ฐานขอมูลกับภาษาไทย
• ตองรู Character Set ของฐานขอมูล
Format
• รูปแบบของไฟลภาพที่ใชในการจัดเก็บภาพ
• การเลือกรูปแบบที่เหมาะสมตอการนําเสนอ
  จะชวยใหภาพมีขนาด (File Size) เล...
เว็บกราฟก


รูปภาพที่แสดงในโหมดปกติ




  การแสดงผลภาพ              การแสดงผลภาพแบบ Interlaced
  แบบ Progressive
Interlaced GIF
JPEG Quality &
                Progressive
• ภาพฟอรแมต JPG คา Quality
  ไมควรต่า หรือสูงเกินไป
          ํ
• กําหนดรูปแ...
GIF
• Graphics Interlace File
• จํานวนสีและความละเอียดของภาพไมสูงมาก
  นัก
• ตองการพื้นแบบโปรงใส
• ตองการแสดงผลแบบโครง...
Bit depth drastically
                affects file size




                                 8 bit
    24 bit        8 bit...
Transparent GIFs
Animation GIF
JPEG
• Joint Photographer's Experts Group
• เหมาะสมกับการนําเสนอทั้งระบบสือมัลติมีเดีย และ
                               ...
JPEG File Format




JPEG - 60K         JPEG - 19K
Max Quality        Low Quality
PNG
• Portable Network Graphics
• รูปแบบลาสุดในการนําเสนอภาพผานเครือขาย
  อินเทอรเน็ต
• สามารถแสดงผลไดในระบบสีเต็มพิก...
GIF Transparent
PNG Transparent
TIFF
• Tagged-Image File Format
• รูปแบบทีใชเก็บภาพพรอมรายละเอียดตางๆ เชน เล
           ่
  เยอร (Layer), Annotation,...
สรุปการเลือกใชฟอรแมต
                 ภาพ
• ไฟลสกุล GIF (Graphics Interlace File)
  – ภาพทีไมตองการความคมชัดมากนัก สี...
GIF / JPEG
GIF or JPEG?
72-ppi and 300-ppi
Color Mode
• A color mode determines the color
  model used to display and print images.
• Common models include
  – RGB (...
RGB model
• RGB model used for lighting, video, and
  monitors
• So, computer’s monitor only has 3 colors

               ...
CMYK model
• The CMYK model is based on the light-
  absorbing quality of ink printed on
  paper.
ลักษณะของหนาเว็บที่
              เหมาะสม
• หนาเว็บที่เหมาะสม ไมมขอกําหนดที่ชดเจน
                         ี          ...
Truehits.net
ลักษณะของหนาเว็บที่
Screen Area 600 pixel        เหมาะสม


                            Web Area 980 pixel

              ...
Template & Layout
               Design

               TITLE

Menu
History
 Duty
Project
Template & Layout
               Design

                  TITLE

History    Duty   Project
Template & Layout
     Design

     TITLE

             History
                Duty
                 Project
Template & Layout
               Design

                  TITLE




History    Duty   Project
Metadata
• Data about data           •   Subject Metadata
• ขอมูลแสดงคุณสมบัติของ    •   Title Metadata
  ไฟล หรือวัตถุต...
บัตรรายการหนังสือ
613 สาทิศ อินทรกําแหง
ส762ช ชีวจิต : การใชชีวิตอยางเขาใจธรรมชาติ/
สาทิศ อินทรกําแหง. –พิมพครั้งที่ 1...
การกําหนดคุณสมบัติของ
                 เอกสาร
• MS – Office
  – File, Properties..
• OpenOffice.org
  – File, Properties…
...
ประโยชนของ Metadata
• เพิ่มประสิทธิภาพการสืบคนเอกสาร
• เปนขอมูลใหกับ Search Engine ตางๆ
• การเผยแพรในระบบอินเทอรเน...
Web Metadata
• Web Title            • Meta Tag
• URL :Uniform           – Description
  Resource Locator          • เนื้อห...
Web Title



<head>
      <title>NECTEC : Thailand : National Electronics and
      Computer Technology Center</title>
</h...
Web Title & Google
ไมระบุ Web Title
allintitle:tiac
URL
• Uniform Resource Locator
• ตําแหนงที่อยูของเว็บไซต
                
• http://www.nectec.or.th/courseware/index.ht...
allinurl:tiac
Meta tag: Description




<head>
   <META NAME="Description" CONTENT="มหาวิทยาลัยเกษตรศาสตรเปนสถาบันอุดมศึกษาที่
   เปด...
Meta tag: Description
• กรณีที่ไมไดระบุ Description Meta Tag
  โปรแกรมจะดึงขอความ 1 – 2 KB จาก
  เว็บไซตมาแสดงผลแทน
Meta tag อื่นๆ
•   Authors, Creator
•   Keyword
•   Generator
•   Robot
    – จะระบุไวใน Head Section ของเอกสารเว็บ
    –...
Author & Keyword
<META NAME="Author" CONTENT="Kasetsart
University, Thailand, Bangkok">

<META NAME="Keywords"
CONTENT="Ka...
Web Meta Tags
• บรรจุไวใน Head
• รูปแบบทั่วไป
  <META NAME=“dataname”
 CONTENT=“datavalue”>
http://www.submitexpress.com/analyze
                 r/
Image Search
 • Google คนหาภาพไดจาก
    –   คําที่อยูใกลภาพ/ขางเคียงภาพ (adjacent)
    –   Image Caption
    –   Link...
XNView
         Image Metadata
• Exchangeable Image File Format (Exif)
  Metadata
   – ระบุอตโนมัติเมื่อมีการถายภาพดวยกล...
Exif Metadata
           โปรแกรมกราฟกตางๆ
           สามารถเปดดูได เชน ACDSee,
           XnView โดยคลิกปุมขวาแลว
 ...
IPTC Metadata
          โปรแกรมกราฟกตางๆ
          อนุญาตใหเพิ่มขอมูลตางๆ ได
          เชน ACDSee, XnView
ตัวอยางการตรวจสอบ Metadata ของเอกสารฟอรแมตตางๆ ทั้ง .doc, .ppt, .pdf,
                  และรูปภาพ .jpg ดวยโปรแกรม Cata...
CSS : Standard Web Solution
• เว็บเบราวเซอรแตละคายกําหนดคําสั่ง HTML และ Attribute
  แตกตางกันออกไป
• เกิดปญหาในการส...
What is CSS?
• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles are normally st...
CSS syntax
selector {property: value}

• Selector เปนไดทั้งแท็กคําสั่ง HTML หรือเปนชือที่
                             ...
CSS syntax
• คั่นระหวาง Property และ value ดวยเครื่องหมาย
  colon
• และลอมรอบดวย { } curly braces



               bo...
CSS syntax
• ถา value ประกอบดวยคําหลายคํา (มีชองวาง
                                        
  ระหวางคํา) ตองใสเครื...
CSS syntax
• สามารถระบุ property ไดมากกวา 1 โดยใชเครืองหมาย
                                             ่
  semi-colon...
CSS syntax
• สามารถจัดกลุม Selector หลายๆ ตัว เมือมี
               
  Property เดียวกัน ดวยเครื่องหมาย comma

         ...
Class Selector
• แท็ก HTMl แตละ Tag สามารถกําหนดรูปแบบการ
  แสดงแตกตางกันได โดยการสราง Class selector
  ดังนี้

p.righ...
Class Selector
• การใชงาน

<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph...
Class Selector
• กรณีท่ี Attribute เดียวกัน และตองการประกาศใช
  กับทุก Tag สามารถกําหนด Certain Class ไดดังนี้



.cent...
Class Selector
• การใช Certain Class มีรปแบบดังนี้
                          ู

<h1 class="center">
This heading will be ...
ID Selector
• Selector ทีไมใชแท็กคําสั่งของ HTML เรียกวา ID Selector
             ่
• ประกาศขึ้นตนดวยเครื่องหมาย #
• ...
ID Selector
• กรณีท่ตองการประกาศเปน Attribute ใหมของ
        ี
  HTML Tag จะใชรูปแบบ ดังนี้

p#para1
{
text-align: cen...
External Style Sheet
•   สราง text file
•   ปอนคําสั่ง css
•   บันทึกดวยนามสกุล .css
•   ประกาศใช css ใน html file ดว...
Web Accessibility
• เว็บไซตที่รองรับความสามารถในการเขาถึงได
  ในทุกรูปแบบที่เปนมาตรฐาน
• เพื่อเปนหลักประกันไดวาขอม...
ผลที่ไดจาก Web Accessibility
• กลุมผูใชผานเครื่อง PDA หรืออุปกรณ
  Mobile
• กลุมคนพิการ
   – บกพรองทางการเห็น
   –...
กลุมผูพิการ
                
• ผูพิการทางการเห็น
  – โปรแกรมชวยอานหนาจอ – เสียง (TTS), Braille
  – โปรแกรมขยายหนาจอ...
กลุมผูพิการทางการเห็น
       
• ตัวอยางโปรแกรมขยายหนาจอ
Alternate Text
Alternate Text
• <IMG SRC=“ชื่อไฟลภาพ”
  ALT=“คําอธิบายภาพ”>
• คําอธิบายภาพควรสื่อความหมายชัดเจน
  – Firefox ไมแสดงคําอธ...
1. "Image of George Washington"
2. "George Washington, the first
  president of the United States"
3. An empty alt attribu...
1. An empty alt attribute (alt="") will
  suffice.
2. "Wikipedia entry for George
  Washington"
3. "Read More"
4. "George ...
1. "George Washington"
2. "Painting of George Washington"
3. "Painting of George Washington crossing the
   Delaware River...
1. "Employment Application"
2. "PDF File"
3. "PDF icon"
4. The content of the image is presented
  in context, so (alt="")...
1.    "decorative line"
2.   "Beginning of footer"
3.   "separator"
4.   alt="" will suffice
สิ่งที่ไมควรทํา


1. "next"
2. "next page"
3. "George Washington's Presidency"
4. "Continue to George Washington's
  Pres...
Empty Alt (alt=“”)
• ภาพที่ไมสื่อความหมาย
• ภาพที่ถูกตัดเปนหลายชิ้น แตไมมีผลตอการ
  ทํางาน
• ภาพ Background
Long Description
  • คําอธิบายแบบยาว
     – เพิ่ม Attribute LONGDESC=“ชื่อไฟลคําอธิบาย.txt”
     – ใหพิมพดวย Notepad
 ...
คําอธิบายแบบยาว Long
      Description
Alt สําหรับ Flash
• ระบุ Alt
• Description & Shortcut
สีนั้นสําคัญไฉน ?
• ใชสีพื้นและสีตัวอักษรที่แตกตางกัน
สีนั้นสําคัญไฉน ?
http://www.accesskeys.org/tools/color-contrast.html
การลงรหัสทีไมถกตอง
               ่ ไม ู
<p><font size=“+3”><b>This is a
 heading</b></font></p>
  <p>Blah blah blah</p...
การลงรหัสทีถกตอง
                    ่ ู
Use markup and style sheets and do so properly
<h1>This is a heading</h1> Outlin...
สรางเอกสาร HTML ที่ได
                 มาตรฐาน
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
  4.01 Transitional//EN"
  "http:...
ระบุภาษาใหชัดเจน
<p>เมือวานมีชาวตางชาติพูดกับฉันวา<span
      ่
 lang=“en”>I love you</span></p>

และระบุภาษาหลักในแท็ก...
กํากับคํายอ
<acronym title="World Wide Web
 Consortium">W3C</acronym>
<abbr title="World Wide Web
 Consortium">W3C</abbr>
ระบุ id ใหกับหัวเรื่องตาราง
<tr>
   <th   id="t1">ชื่อ</th>
   <th   id="t2">อายุ</th>
   <th   id="t3">สถานที่เกิด</th>
   <th   id="t4">สถานที่ทํางา...
กลุมผูพิการทางการไดยิน
      
• สามารถอานหนังสือได
• เขาใจเนื้อหาจากการอาน ?
Captions
• สราง caption ให Movie
  Movie



  Caption
ระบุ Shortcut Key
ลําดับการเลื่อนในแบบฟอรม
PDF Security Document
Watermark
• ขอมูลแสดงลิขสิทธิหรือคุณสมบัติของไฟล
                    ์
• แสดงความเปนเจาของ
• แบงไดเปน
  – Text Embe...
Text Embedded
             Watermark
• มีลักษณะเปนขอความทีผนวกกับไฟลภาพ
                       ่
• สามารถระบุไดจากโปรแ...
Image Embedded
           Watermark
• มีลักษณะเปนภาพทีผนวกกับไฟลภาพ
                   ่
• อาจจะเปนภาพโลโกของหนวยงาน,...
Watermark Processing
• Encoding   การเขารหัส
• Decoding/Detect การตรวจสอบรหัส
  – ระบบ Detect สามารถกระทําไดกับภาพที่มกา...
The Watermark Embedding
         Process
The Watermark Detection
        Process
แหลงอางอิง
• http://stks.or.th
• http://stks.or.th/elearning
• http://webxact.watchfire.com
Web Standard
Web Standard
Web Standard
Web Standard
Web Standard
Web Standard
Upcoming SlideShare
Loading in...5
×

Web Standard

1,833

Published on

มาตรฐานการออกแบบพัฒนาเว็บไซต์

Published in: Education, Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,833
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
78
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Web Standard"

  1. 1. มาตรฐานการออกแบบ พัฒนาเว็บไซต
  2. 2. บุญเลิศ อรุณพิบูลย • นักวิชาการ 1 • ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี (STKS) • สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ (สวทช.) • ประวัติการทํางาน – ศูนยเทคโนโลยีอิเล็กทรอนิกสและคอมพิวเตอรแหงชาติ (เนคเทค) • เจาหนาที่ระบบคอมพิวเตอร 3 • หัวหนางานพัฒนาเนื้อหาสาระดิจิทัล • หัวหนางานวิชาการ, หัวหนางานเทคนิค – หนวยปฏิบัติการวิจัยและพัฒนาวิศวกรรมเทคโนโลยีซอฟตแวร – งานพัฒนาเนื้อหาสาระดิจิทัล – ศูนยฝกอบรมคอมพิวเตอรเนคเทค
  3. 3. มาตรฐานเว็บไซต • ดานเทคโนโลยี • ดานการใช • ดานการเขาถึง
  4. 4. มาตรฐานเว็บไซต รองรับ การเขาถึง สวย คนได เร็ว
  5. 5. ดานเทคโนโลยี • การแสดงผลบน • การนําเสนอดวย เบราวเซอร เสียงการนําเสนอ • ระบบปฏิบติการ ั ดวยวีดิทัศน • ความเร็วในการ • ความตองการ โอนถายขอมูล Plug-ins • ฮารดแวร
  6. 6. ดานการใช • ความสม่ําเสมอเกี่ยวกับขอความ และสื่อ ประกอบตางๆ • ความสม่ําเสมอในสวน Interface – Layout – Navigator – Icon & Symbol • ความสม่ําเสมอในการติดตอสื่อสาร
  7. 7. ดานการเขาถึง • การเขาถึงที่ไมจํากัดดวยความ แตกตางเรือง ่ –เวลา –สถานที่ –อุปกรณ –กายภาพของผูเขาชม
  8. 8. ความเขาใจผิดบางประการ • ควรทําหรือไม • สินเปลืองงบประมาณ ้ • เสียเวลา • ไมคมคา ุ Accessibility ไมไดเนนเฉพาะผูที่มีความบกพรองตางๆ เทานั้น แตหมายถึงโอกาสในการเขาถึงของทุกคน (All users)
  9. 9. Server & Client upload WindowsXP IE Windows2000 IE พัฒนาเว็บดวย HTML Editor, HTML Generator Server : Windows98 บน Unix/NT Netscape Windows Macintosh
  10. 10. Server & Client upload Text Browser คนพิการ พัฒนาเว็บดวย HTML Editor, HTML Generator Server : Unix/NT PDA บน Windows Mobile Phone
  11. 11. มาตรฐานที่เกี่ยวของ • มาตรฐานการตั้งชื่อไฟลและ Directory • มาตรฐานทางดานเนื้อหา • มาตรฐานทางดานรูปแบบการใชภาษา บนเว็บ • มาตรฐานทางดานเทคนิค • มาตรฐานการรักษาความปลอดภัย
  12. 12. การตั้งชื่อไฟลและ Directory • สื่อความหมาย-เขาใจตรงกัน • สั้นกระชับ • ไมเกิดความสับสน • ชวยให Search engine ใหคา ความสําคัญของเว็บไซตสงสุด ู หากคําสําคัญพบเปนชื่อไฟลและชื่อ Directory โดยตรง
  13. 13. การตั้งชื่อไฟลและ Directory • ภาษาอังกฤษ ผสมตัวเลข • ใชเครื่องหมายเฉพาะ – • ไมควรมีชองวาง  • ไมควรยาวมากเกินไป
  14. 14. แบบอักษร (Fonts) • เลือกใชฟอนตมาตรฐาน – Tahoma – Tahoma, MS Sans Serif, Thonburi – ตระกูล NEW
  15. 15. Tahoma & MS Sans Serif
  16. 16. ภาษาไทย กับการพัฒนา เว็บเพจ • ดานพัฒนาเว็บ – HTML Editor, Generator แสดงผลภาษาไทย ? – HTML Editor, Generator เขารหัสภาษาไทย ? • ดานเรียกดูเว็บ – ฟอนต ไมควรสรางภาระใหกบผูใชงาน ั – แสดงผลอักขระไดถูกตอง ทุก (เกือบทุก) platform
  17. 17. HTML Editor กับการเขารหัสภาษาไทย
  18. 18. กรณีศึกษา Macromedia Dreamweaver
  19. 19. กรณีศึกษา Macromedia Dreamweaver
  20. 20. Decoding ภาษาไทย ถูกตองหรือไม <meta http-equiv=“content-type” content=“text/html; charset=………..”>
  21. 21. TIS-620/Windows-874 • ประเทศไทยมีมาตรฐานอักขระซึ่งกําหนดโดย สํานักงาน มาตรฐานอุตสาหกรรม ดังที่เรียกกันโดยทั่วไปวารหัส สมอ. แตรหัส สมอ. หรือที่มชอทางการวา มอก.620 หรือ TIS- ี ื่ 620 นี้ เปนมาตรฐานของประเทศไทย ซึ่งเมื่อนําไปใชบน เครือขายอินเทอรเน็ต ก็อาจเกิดความเขาใจไมตรงกันได ดังนันจึงมีความพยายามที่จะจดทะเบียน รหัส สมอ. ที่ ้ Internet Assigned Numbers Authority (IANA) ซึ่งเปนผู ควบคุมมาตรฐานของเครือขายอินเทอรเน็ต และได ดําเนินการจดทะเบียนจนสําเร็จ เมื่อวันที่ 22 กันยายน 2541
  22. 22. TIS-620/Windows-874/UTF- 8 • windows-874 เปน character Set ที่ใชภายใน ระบบปฏิบัติการทีผลิตโดยบริษัท ไมโครซอฟต เทานัน ่ ้ ไมไดเปน character Set ที่ใชในการแลกเปลี่ยนขอมูล ระหวางเครื่อง – มีสวนขยายเพื่อการแสดงผล เชน bullet, smart quote, dash ฯลฯ • tis-620 เปน character Set ทีจดทะเบียนถูกตอง เปนทีรับรู ่ ่ กันทัวโลก ทุกระบบปฏิบัติการ (แมแตระบบปฏิบัตการของ ่ ิ ไมโครซอฟตเอง)
  23. 23. ฐานขอมูลกับภาษาไทย • ตองรู Character Set ของฐานขอมูล
  24. 24. Format • รูปแบบของไฟลภาพที่ใชในการจัดเก็บภาพ • การเลือกรูปแบบที่เหมาะสมตอการนําเสนอ จะชวยใหภาพมีขนาด (File Size) เล็กลง โดยคงความคมชัดไวในระดับดี • เปนการประหยัดพื้นที่ของสื่อบันทึกขอมูลได เปนอยางดี
  25. 25. เว็บกราฟก รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพ การแสดงผลภาพแบบ Interlaced แบบ Progressive
  26. 26. Interlaced GIF
  27. 27. JPEG Quality & Progressive • ภาพฟอรแมต JPG คา Quality ไมควรต่า หรือสูงเกินไป ํ • กําหนดรูปแบบการแสดงผล เปนแบบ Progressive ดวย สําหรับภาพที่มีขนาดโต
  28. 28. GIF • Graphics Interlace File • จํานวนสีและความละเอียดของภาพไมสูงมาก นัก • ตองการพื้นแบบโปรงใส • ตองการแสดงผลแบบโครงรางกอน แลวคอย แสดงผลแบบละเอียด • ตองการนําเสนอภาพแบบภาพเคลื่อนไหว • สวนขยายคือ .gif
  29. 29. Bit depth drastically affects file size 8 bit 24 bit 8 bit 1 bit color gray color dithered scale 16 million 256 image colors 256 shades colors 64k of gray 1.55 MB 518k 518k
  30. 30. Transparent GIFs
  31. 31. Animation GIF
  32. 32. JPEG • Joint Photographer's Experts Group • เหมาะสมกับการนําเสนอทั้งระบบสือมัลติมีเดีย และ ่ เว็บไซต • สามารถกําหนดขนาดของไฟลไดตามความ เหมาะสม (File Compression) • สามารถกําหนดคุณสมบัตการแสดงผลแบบหยาบ ิ แลวคอยๆ ละเอียดเมือเวลาผานไป ที่เรียกวา ่ คุณสมบัติ Progressive • สวนขยายของไฟลรูปแบบนี้คือ .jpg หรือ .jpeg
  33. 33. JPEG File Format JPEG - 60K JPEG - 19K Max Quality Low Quality
  34. 34. PNG • Portable Network Graphics • รูปแบบลาสุดในการนําเสนอภาพผานเครือขาย อินเทอรเน็ต • สามารถแสดงผลไดในระบบสีเต็มพิกัด (True Color), มีขนาดไฟลเล็ก และควบคุมคุณภาพได ตามที่ตองการ มีการกําหนดใหพื้นภาพเปนพืน ้ โปรงใสได (Transparent) รวมทั้งการแสดงผล แบบหยาบสูละเอียด (Interlaced) • สวนขยายของไฟลรูปแบบนี้คือ .png
  35. 35. GIF Transparent
  36. 36. PNG Transparent
  37. 37. TIFF • Tagged-Image File Format • รูปแบบทีใชเก็บภาพพรอมรายละเอียดตางๆ เชน เล ่ เยอร (Layer), Annotation, โหมดภาพทั้งระบบ CMYK, RGB, Lab Color ตลอดจนขอมูลประกอบ อื่นๆ ตามตนฉบับเดิมของภาพ • เหมาะสมตอการเก็บบันทึกภาพตนฉบับ และภาพ สําหรับใชประกอบการสรางสื่อสิ่งพิมพ • สวนขยายของไฟลรูปแบบนี้คอ .tif ื
  38. 38. สรุปการเลือกใชฟอรแมต ภาพ • ไฟลสกุล GIF (Graphics Interlace File) – ภาพทีไมตองการความคมชัดมากนัก สีไมมาก ่ – มีลักษณะพื้นโปรงใส • ไฟลสกุล JPG (Joint Photographer’s Experts Group) – ภาพทีตองการความคมชัดสูง มีสีมาก ่ • ไฟลสกุล PNG (Portable Network Graphics) – ภาพทีตองการความคมชัดสูง มีสีมากทําพืนโปรงใสได ่ ้
  39. 39. GIF / JPEG
  40. 40. GIF or JPEG?
  41. 41. 72-ppi and 300-ppi
  42. 42. 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) –…
  43. 43. RGB model • RGB model used for lighting, video, and monitors • So, computer’s monitor only has 3 colors Red Green Blue
  44. 44. CMYK model • The CMYK model is based on the light- absorbing quality of ink printed on paper.
  45. 45. ลักษณะของหนาเว็บที่ เหมาะสม • หนาเว็บที่เหมาะสม ไมมขอกําหนดที่ชดเจน ี ั ควรคํานึงถึง – กลุมเปาหมาย (Personal/Business) – ลักษณะของคอมพิวเตอรทกลุมเปาหมายใช (Screen ี่ Area ของจอภาพ) • Screen Area ที่เหมาะสมในปจจุบัน คือ 1024 x 768 pixels • Web Area ทีเหมาะสมคือ ่ – ความยาวไมเกิน 980 pixel – ความสูงไมมีขอกําหนดตายตัว แตสวน Header ของเว็บ  ไมควรเกินครึ่งหนึ่งของพื้นทีที่เหลือ ่
  46. 46. Truehits.net
  47. 47. ลักษณะของหนาเว็บที่ Screen Area 600 pixel เหมาะสม Web Area 980 pixel web Area
  48. 48. Template & Layout Design TITLE Menu History Duty Project
  49. 49. Template & Layout Design TITLE History Duty Project
  50. 50. Template & Layout Design TITLE History Duty Project
  51. 51. Template & Layout Design TITLE History Duty Project
  52. 52. Metadata • Data about data • Subject Metadata • ขอมูลแสดงคุณสมบัติของ • Title Metadata ไฟล หรือวัตถุตางๆ • Category Metadata • Keyword Metadata • แสดงขอมูลสรุปเกี่ยวกับ • Author Metadata รายละเอียดของไฟล • Description Metadata • แสดงลิขสิทธิ์ความเปน • Publisher Metadata เจาของ • Resource Metadata • แยกกลุมไดตามประเภท ของไฟลหรือวัตถุ
  53. 53. บัตรรายการหนังสือ 613 สาทิศ อินทรกําแหง ส762ช ชีวจิต : การใชชีวิตอยางเขาใจธรรมชาติ/ สาทิศ อินทรกําแหง. –พิมพครั้งที่ 10.– กรุงเทพฯ: คลินิกบานและสวน, 2541. 130 หนา ; 21 ซม. ISBN 974-8368-42-4 1. สุขศาสตร. 2. อาหารธรรมชาติ. 3. ชื่อเรื่อง.
  54. 54. การกําหนดคุณสมบัติของ เอกสาร • MS – Office – File, Properties.. • OpenOffice.org – File, Properties… • Acrobat Professional – File, Document Properties…
  55. 55. ประโยชนของ Metadata • เพิ่มประสิทธิภาพการสืบคนเอกสาร • เปนขอมูลใหกับ Search Engine ตางๆ • การเผยแพรในระบบอินเทอรเน็ต เปนไป อยางรวดเร็ว
  56. 56. Web Metadata • Web Title • Meta Tag • URL :Uniform – Description Resource Locator • เนื้อหา 1 – 2 Kb ของ เอกสารเว็บ • H1, H2, H3 Tag – Authors • Contents – Keyword • Alternate Text for – Generator Image/Multimedia
  57. 57. Web Title <head> <title>NECTEC : Thailand : National Electronics and Computer Technology Center</title> </head> เปดดูดวยคําสั่ง View, Source
  58. 58. Web Title & Google
  59. 59. ไมระบุ Web Title
  60. 60. allintitle:tiac
  61. 61. URL • Uniform Resource Locator • ตําแหนงที่อยูของเว็บไซต  • http://www.nectec.or.th/courseware/index.ht ml Protocol Domain-name Directory Path File
  62. 62. allinurl:tiac
  63. 63. Meta tag: Description <head> <META NAME="Description" CONTENT="มหาวิทยาลัยเกษตรศาสตรเปนสถาบันอุดมศึกษาที่ เปดสอนหลักสูตรทางการเกษตรแหงแรกของประเทศไทย ถือกําเนิดมาจากโรงเรียนฝกหัดครู ประถมกสิกรรม เมื่อ พ.ศ. 2460 ตอมาไดขยายและยกฐานะขึนเปนวิทยาลัยเกษตรศาสตรและ ้ พัฒนาจนกระทั่งกอตั้งเปนมหาวิทยาลัยเกษตรศาสตร โดยพระราชบัญญัติ มหาวิทยาลัยเกษตรศาสตร เมื่อวันที่ 2 กุมภาพันธ พ.ศ. 2486 ปจจุบันมหาวิทยาลัยเกษตรศาสตร ประกอบดวยวิทยาเขตที่เปดเรียนแลว 5 วิทยาเขต และโครงการ จัดตั้ง 2 วิทยาเขต"> </head> เปดดูดวยคําสั่ง View, Source
  64. 64. Meta tag: Description • กรณีที่ไมไดระบุ Description Meta Tag โปรแกรมจะดึงขอความ 1 – 2 KB จาก เว็บไซตมาแสดงผลแทน
  65. 65. Meta tag อื่นๆ • Authors, Creator • Keyword • Generator • Robot – จะระบุไวใน Head Section ของเอกสารเว็บ – ไมปรากฏบนเว็บเบราวเซอรหรือในเอกสาร – Search Engine เขาถึงได
  66. 66. Author & Keyword <META NAME="Author" CONTENT="Kasetsart University, Thailand, Bangkok"> <META NAME="Keywords" CONTENT="Kasetsart University, Thailand, University, Bangkok, Higher Education, Equality in Education, Colleges, School, Campuses, Faculty, มหาวิทยาลัยเกษตรศาสตร, เกษตรศาสตร ศาสตรของแผนดิน">
  67. 67. Web Meta Tags • บรรจุไวใน Head • รูปแบบทั่วไป <META NAME=“dataname” CONTENT=“datavalue”>
  68. 68. http://www.submitexpress.com/analyze r/
  69. 69. Image Search • Google คนหาภาพไดจาก – คําที่อยูใกลภาพ/ขางเคียงภาพ (adjacent) – Image Caption – Links – Alt Attribute ของ Image Tag – Embedded Metadata <img src=“aaa.jpg” alt=“Computer System”>
  70. 70. XNView Image Metadata • Exchangeable Image File Format (Exif) Metadata – ระบุอตโนมัติเมื่อมีการถายภาพดวยกลองดิจิทัล ั – พัฒนาโดย Japan Electronic Industries Development Association (JEIDA) • International Press Telecommunications Council (IPTC) Metadata – Metadata ที่ผูใชสามารถบันทึกเพิ่มเติมได – พัฒนาโดย International Press Telecommunications Council
  71. 71. Exif Metadata โปรแกรมกราฟกตางๆ สามารถเปดดูได เชน ACDSee, XnView โดยคลิกปุมขวาแลว เลือกคําสั่ง Properties…
  72. 72. IPTC Metadata โปรแกรมกราฟกตางๆ อนุญาตใหเพิ่มขอมูลตางๆ ได เชน ACDSee, XnView
  73. 73. ตัวอยางการตรวจสอบ Metadata ของเอกสารฟอรแมตตางๆ ทั้ง .doc, .ppt, .pdf, และรูปภาพ .jpg ดวยโปรแกรม Catalogue http://www.download.com/Catalogue/3000-7241_4-10260395.html?tag=lst-0-4
  74. 74. CSS : Standard Web Solution • เว็บเบราวเซอรแตละคายกําหนดคําสั่ง HTML และ Attribute แตกตางกันออกไป • เกิดปญหาในการสรางเอกสารเว็บที่สนับสนุนกับ ทุกเบราวเซอร • เกิดปญหาในการปรับแกไขเอกสารเว็บ • การควบคุมการแสดงผล Tag หรือ Attribute ดวย CSS จึง เปนทางออกที่ W3C แนะนํา
  75. 75. What is CSS? • CSS stands for Cascading Style Sheets • Styles define how to display HTML elements • Styles are normally stored in Style Sheets • External Style Sheets can save you a lot of work • External Style Sheets are stored in CSS files • Multiple style definitions will cascade into one
  76. 76. CSS syntax selector {property: value} • Selector เปนไดทั้งแท็กคําสั่ง HTML หรือเปนชือที่ ่ กําหนดมาใหม ก็ได • Property คือ Attribute ที่ตองการแสดงผล • แตละ Property จะตองระบุคาการแสดงผล (Value) 
  77. 77. CSS syntax • คั่นระหวาง Property และ value ดวยเครื่องหมาย colon • และลอมรอบดวย { } curly braces body {color: black}
  78. 78. CSS syntax • ถา value ประกอบดวยคําหลายคํา (มีชองวาง  ระหวางคํา) ตองใสเครื่องหมายคําพูดกํากับ (quotes) p {font-family: "sans serif"} p {font-family: tahoma}
  79. 79. CSS syntax • สามารถระบุ property ไดมากกวา 1 โดยใชเครืองหมาย ่ semi-colon แบง p {text-align : center ; color:red} เพือใหอานไดสะดวกควรเปลียนรูปแบบเปน p{ text-align : center ; color:red }
  80. 80. CSS syntax • สามารถจัดกลุม Selector หลายๆ ตัว เมือมี  Property เดียวกัน ดวยเครื่องหมาย comma h1 { color: green} h2 { color: green } h1,h2,h3,h4,h5,h6 h3 { color: green } { h4 { color: green } h5 { color: green } color: green h6 { color: green } }
  81. 81. Class Selector • แท็ก HTMl แตละ Tag สามารถกําหนดรูปแบบการ แสดงแตกตางกันได โดยการสราง Class selector ดังนี้ p.right {text-align: right} p.center {text-align: center} • ขึ้นตนดวย Tag ตามดวยจุด และตอดวย Attribute • ไมอนุญาตใหขึ้นตนชือ class ดวยตัวเลข ่
  82. 82. Class Selector • การใชงาน <p class="right"> This paragraph will be right-aligned. </p> <p class="center"> This paragraph will be center-aligned. </p>
  83. 83. Class Selector • กรณีท่ี Attribute เดียวกัน และตองการประกาศใช กับทุก Tag สามารถกําหนด Certain Class ไดดังนี้ .center {text-align: center}
  84. 84. Class Selector • การใช Certain Class มีรปแบบดังนี้ ู <h1 class="center"> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center-aligned. </p>
  85. 85. ID Selector • Selector ทีไมใชแท็กคําสั่งของ HTML เรียกวา ID Selector ่ • ประกาศขึ้นตนดวยเครื่องหมาย # • หามใชตัวเลขขึ้นตนชือ ่ #green {color: green} <h1 id="green">Some text</h1> <p id="green">Some text</p>
  86. 86. ID Selector • กรณีท่ตองการประกาศเปน Attribute ใหมของ ี HTML Tag จะใชรูปแบบ ดังนี้ p#para1 { text-align: center; color: red }
  87. 87. External Style Sheet • สราง text file • ปอนคําสั่ง css • บันทึกดวยนามสกุล .css • ประกาศใช css ใน html file ดวยคําสั่ง <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
  88. 88. Web Accessibility • เว็บไซตที่รองรับความสามารถในการเขาถึงได ในทุกรูปแบบที่เปนมาตรฐาน • เพื่อเปนหลักประกันไดวาขอมูลสารสนเทศที่ เผยแพรนั้น ทุกคนสามารถเขาถึงไดอยางเทา เทียมกัน • ใชเทคโนโลยีที่เปนมาตรฐานสากล HTML, XHTML, CSS, XML, DOM เปนตน
  89. 89. ผลที่ไดจาก Web Accessibility • กลุมผูใชผานเครื่อง PDA หรืออุปกรณ Mobile • กลุมคนพิการ – บกพรองทางการเห็น – บกพรองทางการไดยิน – บกพรองทางการเคลื่อนไหว • กลุมผูใช Browser ที่แตกตางกัน • กลุมผูใชอินเทอรเน็ตความเร็วต่ํา
  90. 90. กลุมผูพิการ  • ผูพิการทางการเห็น – โปรแกรมชวยอานหนาจอ – เสียง (TTS), Braille – โปรแกรมขยายหนาจอ – โปรแกรม Web Browser
  91. 91. กลุมผูพิการทางการเห็น  • ตัวอยางโปรแกรมขยายหนาจอ
  92. 92. Alternate Text
  93. 93. Alternate Text • <IMG SRC=“ชื่อไฟลภาพ” ALT=“คําอธิบายภาพ”> • คําอธิบายภาพควรสื่อความหมายชัดเจน – Firefox ไมแสดงคําอธิบายภาพ แตทํางานกับ Attribute TITLEฃ
  94. 94. 1. "Image of George Washington" 2. "George Washington, the first president of the United States" 3. An empty alt attribute (alt="") will suffice. 4. "George Washington"
  95. 95. 1. An empty alt attribute (alt="") will suffice. 2. "Wikipedia entry for George Washington" 3. "Read More" 4. "George Washington"
  96. 96. 1. "George Washington" 2. "Painting of George Washington" 3. "Painting of George Washington crossing the Delaware River" 4. "Painting of George Washington crossing the Delaware River. Swirling waves surround the boat where the majestic George Washington looks forward out of the storm and into the rays of light across the river as he leads his wary troops to battle "
  97. 97. 1. "Employment Application" 2. "PDF File" 3. "PDF icon" 4. The content of the image is presented in context, so (alt="") is appropriate.
  98. 98. 1. "decorative line" 2. "Beginning of footer" 3. "separator" 4. alt="" will suffice
  99. 99. สิ่งที่ไมควรทํา 1. "next" 2. "next page" 3. "George Washington's Presidency" 4. "Continue to George Washington's Presidency"
  100. 100. Empty Alt (alt=“”) • ภาพที่ไมสื่อความหมาย • ภาพที่ถูกตัดเปนหลายชิ้น แตไมมีผลตอการ ทํางาน • ภาพ Background
  101. 101. Long Description • คําอธิบายแบบยาว – เพิ่ม Attribute LONGDESC=“ชื่อไฟลคําอธิบาย.txt” – ใหพิมพดวย Notepad แลวบันทึกเปน .txt คํานึงถึง Thai Encoding & Decoding ดวย
  102. 102. คําอธิบายแบบยาว Long Description
  103. 103. Alt สําหรับ Flash • ระบุ Alt • Description & Shortcut
  104. 104. สีนั้นสําคัญไฉน ? • ใชสีพื้นและสีตัวอักษรที่แตกตางกัน
  105. 105. สีนั้นสําคัญไฉน ? http://www.accesskeys.org/tools/color-contrast.html
  106. 106. การลงรหัสทีไมถกตอง ่ ไม ู <p><font size=“+3”><b>This is a heading</b></font></p> <p>Blah blah blah</p> <p><font size=“+3”><b>This is another heading</b></font></p> <p>Blah blah blah</p> <p><font size=“+2”><b>A sub- section</b></font></p> <p>Blah blah blah</p>
  107. 107. การลงรหัสทีถกตอง ่ ู Use markup and style sheets and do so properly <h1>This is a heading</h1> Outline: <p>Blah blah blah</p> <h1>This is another heading</h1>a heading •This is •This is another heading <p>Blah blah blah</p> –A sub-section <h2>A sub-section</h2> <p>Blah blah blah</p>
  108. 108. สรางเอกสาร HTML ที่ได มาตรฐาน <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  109. 109. ระบุภาษาใหชัดเจน <p>เมือวานมีชาวตางชาติพูดกับฉันวา<span ่ lang=“en”>I love you</span></p> และระบุภาษาหลักในแท็ก <HTML> <html lang="th">
  110. 110. กํากับคํายอ <acronym title="World Wide Web Consortium">W3C</acronym> <abbr title="World Wide Web Consortium">W3C</abbr>
  111. 111. ระบุ id ใหกับหัวเรื่องตาราง
  112. 112. <tr> <th id="t1">ชื่อ</th> <th id="t2">อายุ</th> <th id="t3">สถานที่เกิด</th> <th id="t4">สถานที่ทํางาน</th> </tr> <tr> <td headers="t1">น้ําหนึ่ง</td> <td headers="t2">29</td> <td headers="t3">กรุงเทพฯ</td> <td headers="t4">เนคเทค</td> </tr> <tr> <td headers="t1">ยุทธการ</td> <td headers="t2">28</td> <td headers="t3">หนองคาย</td> <td headers="t4">เนคเทค</td> </tr>
  113. 113. กลุมผูพิการทางการไดยิน  • สามารถอานหนังสือได • เขาใจเนื้อหาจากการอาน ?
  114. 114. Captions • สราง caption ให Movie Movie Caption
  115. 115. ระบุ Shortcut Key
  116. 116. ลําดับการเลื่อนในแบบฟอรม
  117. 117. PDF Security Document
  118. 118. Watermark • ขอมูลแสดงลิขสิทธิหรือคุณสมบัติของไฟล ์ • แสดงความเปนเจาของ • แบงไดเปน – Text Embedded Watermark – Image Embedded Watermark • มีประโยชนอยางสูงสําหรับ Digital Library, Digital Archive, E-Commerce
  119. 119. Text Embedded Watermark • มีลักษณะเปนขอความทีผนวกกับไฟลภาพ ่ • สามารถระบุไดจากโปรแกรม Adobe PhotoShop จากคําสั่ง File, File info, Copyright & URL • สามารถคนหาไดจากคําสั่ง Search/Find ของ Windows
  120. 120. Image Embedded Watermark • มีลักษณะเปนภาพทีผนวกกับไฟลภาพ ่ • อาจจะเปนภาพโลโกของหนวยงาน, ภาพ ขอความลิขสิทธิ์ • สามารถระบุไดจากซอฟตแวรประเภท Watermarking Software
  121. 121. Watermark Processing • Encoding การเขารหัส • Decoding/Detect การตรวจสอบรหัส – ระบบ Detect สามารถกระทําไดกับภาพที่มการ ี ลง Watermark และสั่งพิมพบนกระดาษ โดยนํา ภาพดังกลาวมาสแกน แลวใช Detecting Watermark Software ทําการตรวจสอบ
  122. 122. The Watermark Embedding Process
  123. 123. The Watermark Detection Process
  124. 124. แหลงอางอิง • http://stks.or.th • http://stks.or.th/elearning • http://webxact.watchfire.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×