เขาเรียกผมว่า เว็บมาสเตอร์

Archive for the ‘เว็บไซต์’ Category

ทำ XHTML บน Dreamweaver แต่ Validate HTML ไม่ผ่าน

Friday, April 11th, 2008 |

หากคนไหนที่เคยนั่งลองทำเว็บไซต์ XHTML แบบไร้ที่ติแบบว่าถูกต้องตามหลักของ W3C ทุกประการน่าจะพอรู้ว่ามันช่างลำบากยากเข็นซะจริงๆ ซึ่งสำหรับ Mocyc.com เวอร์ชั่นใหม่ที่ผมจะทำ ผมจะ “บ้าพลัง” จะ Validate ให้ผ่านทั้ง HTML และ CSS เอาให้มันรู้กันไปว่ามันจะใช้เวลานานแค่ไหน พอดีเมื่อคืนนั่งทำที่บ้านใช้ Dreamweaver CS3 ทำครับ ส่วนอื่นๆทำผ่านหมดฉลุย Validate ผ่านหมด

มางงเอาที่ Flash ครับ เพราะทำจากใน Dreamweaver โดย Create เป็น XHTML 1.0 Transitional แล้ว แต่เมื่อเอาไป Validate ที่
http://validator.w3.org/
กลับไม่ผ่านครับ โค๊ดที่ทำจาก Dreamweaver ออกมาแบบนี้

พอ Validate มันบอก Error เพียบเลย
Failed validation, 7 Errors
นี่ขนาดในหน้าที่ผมลองไม่มีไรสักอย่างเลยนะมีแต่ดึง Flash มาแปะอันเดียว แต่ Error ตั้ง 7 จุดแหน่ะ
ขนาดดูๆแล้วมันก็ไม่น่ามีปัญหาอะไร เพราะเปิดเว็บมา Flash ก็ออกตามปกติ

จากนั้นทำไงหล่ะ ผมจะบ้าพลังสักหน่อยจะมาติดที่ตรงนี้ได้ไงไม่ยอมๆ

และแล้วก็พบทางสว่างจาก
http://www.alistapart.com/articles/flashsatay/

ก็ปรับเปลี่ยนโค๊ดใหม่เป็น

สั้นกว่าเดิมด้วยซ้ำไป และเอาไป Validate และแล้วก็
This Page Is Valid XHTML 1.0 Transitional!

สำหรับ CSS ก็ผ่านฉลุยครับ เอาไป validate ได้ที่
http://jigsaw.w3.org/css-validator/

ลองทำกันดูครับ

Posted in มีสาระ, เว็บไซต์ | 2 Comments »

ทำระบบ support ด้วย MSN ผ่านเว็บไซต์

Friday, April 4th, 2008 |

ฟังจากชื่อแล้วอาจจะแปลกๆว่ามันยังไง ก็คือหากคุณทำเว็บอะไรที่ต้องมีระบบ Support ลูกค้าเช่น ต้องมีระบบ chat ไว้คุยกับลูกค้า แต่ปัญหามันอยู่ที่ว่า คุณไม่อยากจะเปิดหน้าเว็บไว้ทั้งวัน เพราะส่วนตัวผมเองก็ออนไลน์ MSN ทั้งวันอยู่แล้ว ดังนั้นเราก็ควรที่จะใช้ MSN ให้เป็นประโยชน์จะดีกว่า ก็เอาให้ลูกค้าคุย MSN กับเราซะเลยง่ายดีครับ

วิธีทำก็ไม่ได้ยากเลย ให้ไปที่

http://settings.messenger.live.com/Applications/Default.aspx

จากนั้นก็ login ด้วย MSN account ของคุณซะ

แล้วก็ไปที่เมนู การตั้งค่าเว็บ แล้วจัดการคลิ๊ก อนุญาตให้เว็บไซต์สามารถมองเห็นสถานะของ Messenger ของคุณ และส่งข้อความถึงคุณได้ แล้วก็ บันทึก ซะ

จากนั้นก็ไปที่ สร้าง HTML ครับ จัดการปรับค่าต่างๆเองได้เลย ไม่ว่าจะขนาด สี ต่างๆ รวมถึงจะวางแบบเป็นคุยได้ทันที หรือ เป็นสถานะของเราเอง

หน้าตาเวลาคนเข้าหน้าเว็บ

คนที่จะติดต่อเราก็จะใส่ชื่อของเขาเอง จากนั้นระบบจะมีให้ยืนยันด้วยตัวอักษรอีกทีหนึ่ง จากนั้นก็คุยกันโลด…

หน้าต่างในเว็บไซต์

หน้าต่าง MSN ในเครื่องผมครับ

ไงลองดูนะครับ

Posted in มีสาระ, เว็บไซต์ | No Comments »

HTML 5 มีไว้เพื่อใคร?

Friday, March 21st, 2008 |

พอดีผมได้รู้ข่าวของ HTML 5 ตั้งแต่เมื่อปีก่อน แต่ก็ยังไม่ได้อ่านรายละเอียดไรมาก เลยยังหาข้อสรุปอะไรมากเกี่ยวกับ HTML 5 ไม่ได้มากนัก บังเอิญได้ไปอ่านบทความของคุณ อภิศิลป์ ตรุงกานนท์ แล้วคิดว่ามีประโยชน์สำหรับคนที่สงสัยเกี่ยวกับ HTML 5 ซึ่งมีเนื้อหาดังนี้

ช่วงนี้มีข่าวเรื่อง HTML 5 ออกมาให้นักพัฒนาเว็บได้ติดตามกัน มีแท็กใหม่ๆ เกิดขึ้นหลายแท็ก จนหลายคนอาจจะเริ่มสงสัยว่าแท็กพวกนี้มันจะมีไปทำไมเนี่ย?

จริงๆ แล้วเรื่องนี้เป็นเรื่องของสิทธิและความเท่าเทียมกันของมนุษยชาติเลยครับ

ก่อนอื่นจะขอสรุปว่า HTML 5 มีแท็กอะไรใหม่บ้าง คงไม่อธิบายครบทุกแท็กนะครับ จะยกมาเฉพาะที่น่าสนใจเท่านั้น โดยผมสรุปจากเว็บ A Preview of HTML 5 by Lachlan Hunt และ X/HTML 5 Versus XHTML 2

แท็กชุดแรกเป็นเรื่องของโครงสร้างหน้าเว็บที่อยู่ภายใต้ <body> ได้แก่ <header> <nav> <article> <section> <aside> และ <footer> ซึ่งในยุคของ HTML 4 เรามักจะใช้แท็ก <div> ในการวางโครงสร้างของหน้าเว็บ โดยกำหนดพารามิเตอร์ id และ class ซึ่งมีการตั้งชื่อตามแต่คนออกแบบเว็บจะตั้ง ไม่ได้มีมาตรฐานอะไรมากำหนด

แต่ในยุค HTML 5 จะมีแท็กที่ใช้แทนที่ <div> ทั้งหมดนี้ได้

คงไม่ต้องอธิบายวิธีการใช้งานแต่ละแท็กนะครับ คิดว่ารูปน่าจะอธิบายได้ดีอยู่แล้ว อย่างเช่น <nav> เอาไว้ครอบพวกเมนูที่อยู่ด้านบน (ถ้าเป็นบล็อกผมก็คือเมนู หน้าแรก รู้จักเจ้าของบล็อก เผยแพร่ความรู้ สั่งซื้อหนังสือ พันธมิตร) หรือแท็ก <aside> เอาไว้ครอบคอลัมน์ที่อยู่ด้านข้างคอลัมน์หลัก (ในบล็อกของผมก็คือคอลัมน์ด้านขวาที่มีลิงก์รกๆ เต็มไปหมด)

ทีนี้เราจะเอาแท็กพวกนี้ไปครอบไว้ทำไมล่ะ? เหตุผลก็คือเพื่อทำให้เนื้อหาในหน้าเว็บของเรามีความหมาย (Semantic) สำหรับคอมพิวเตอร์ จากเดิมที่คอมพิวเตอร์แยกไม่ออกว่าเนื้อหาในหน้าเว็บของเรามันอยู่ในส่วนไหนบ้าง มันรู้แค่ว่าอะไรคือข้อความธรรมดา อะไรคือลิงก์ แต่มันไม่รู้ว่าข้อความอยู่ในส่วน header, article หรือ footer

แล้วเนื้อหาที่มีความหมายมันมีประโยชน์ยังไงล่ะ? ประโยชน์ข้อแรกก็คือเรื่องของ SEO ครับ จากตำราด้าน SEO ที่บอกว่า Search Engine ให้ความสำคัญกับคีย์เวิร์ดที่อยู่ใน <title> <h1> และคีย์เวิร์ดที่อยู่ตำแหน่งแรกๆ ของหน้าเว็บ แต่อีกหน่อย Search Engine จะฉลาดมากขึ้นอีก มันจะให้ความสำคัญกับคีย์เวิร์ดที่อยู่ใน <article> มากกว่า <nav> หรือ <aside> เพราะผู้ใช้ค้นหาคีย์เวิร์ดเพราะต้องการพบเอกสารที่เกี่ยวข้องกับคีย์เวิร์ดนั้น ไม่ได้ต้องการพบว่าคีย์เวิร์ดนั้นเป็นเพียงลิงก์ที่อยู่ในเมนู แต่ในเนื้อความกลับไม่มีอะไรเกี่ยวข้องเลย

ประโยชน์อีกข้อหนึ่งซึ่งเป็นเรื่องที่ผมจั่วหัวไว้ก็คือเรื่องความเท่าเทียมกันของคนในสังคม ซึ่งในที่นี้หมายถึงคนที่มีปัญหาด้านการมองเห็น ทุกวันนี้คนตาบอดสามารถเล่นเว็บได้โดยอาศัยซอฟต์แวร์อ่านหน้าจอช่วย เมื่อคนตาบอดเข้าเว็บ ซอฟต์แวร์จะแปลงข้อความในเว็บให้เป็นเสียงพูดโดยไล่ตั้งแต่บนลงล่าง ทีนี้ลองนึกภาพดูว่าถ้าเว็บที่เขาใช้อยู่มีข้อความในส่วน <header> และ <nav> อยู่เยอะมาก รวมถึงถ้าเว็บนั้นเอาส่วน <aside> มาอยู่ฝั่งซ้ายมือ ซึ่งซอฟต์แวร์จะต้องอ่านข้อความในส่วนนี้ก่อนถึงจะเข้าไปอ่านใน <article> ได้ คนตาบอดก็จะต้องเสียเวลาฟังข้อความที่เขาไม่สนใจนานมาก และพอคลิกไปดูที่หน้าอื่นก็จะต้องเจอเหตุการณ์เดียวกันนี้ซ้ำอีก

แต่การที่เรามีแท็กโครงสร้างที่บ่งบอกว่าเนื้อหาที่เป็นใจความอยู่ตรงส่วนไหนของหน้าเว็บ ช่วยให้ซอฟต์แวร์อ่านข้อความสามารถ “กระโดดข้าม” ส่วนที่ไม่ใช่สาระสำคัญได้ ให้นึกภาพว่าคนตาบอดกดปุ่ม shortcut แล้วซอฟต์แวร์กระโดดไปที่ส่วน <article> ได้ทันที ไม่ต้องมาเสียเวลาฟังพวก <header> <nav> หรือ <aside> ยาวๆ

นอกจากนี้แล้ว HTML 5 ยังมีแท็กน่าสนใจอื่นๆ อีกเช่น

<m> ใช้สำหรับบ่งบอกว่าข้อความที่อยู่ภายใต้แท็กนี้ถูกมาร์คหรือไฮไลท์ไว้ ซึ่งมักจะถูกใช้เวลาที่มีการค้นหาคีย์เวิร์ดในเว็บของเรา และต้องการแสดงสีเพื่อไฮไลท์คีย์เวิร์ดที่ค้นพบ เช่น ถ้าผู้ใช้ค้นหาคำว่า barcamp ก็จะพบกับข้อความแบบนี้

<p>เมื่อวันเสาร์ที่ 26 มกราคม 2551 ผมมีโอกาสไปร่วมงาน <m>Barcamp</m> Bangkok ที่จัดโดย geek และมี geek มากกว่า 160 คนเข้าร่วมงาน</p>

<dialog> ใช้บ่งบอกว่าเนื้อหาที่อยู่ภายใต้แท็กนี้เป็นบทสนทนา โดยระบุผู้พูดไว้ภายใต้ <dt> และข้อความของผู้พูดไว้ภายใต้ <dd> เช่น

<dialog>
<dt>สมัคร</dt>
   <dd>ถ้ามีคนมากล่าวหาสยามรัฐในทางเสียหายคุณจะตอบว่าอย่างไร </dd>
   <dt>ผู้สื่อข่าว</dt>
   <dd>ต้องให้ผู้บริหารชี้แจง ท่านเองก็เป็นผู้บริหารพรรคก็ต้องชี้แจง เพราะประชาชนต้องการรับฟัง และท่านเป็นก็เป็นหัวหน้าพรรคการเมืองของประชาชน</dd>
   <dt>สมัคร</dt>
   <dd>ถ้าผมถามกลับว่า อย่าหาว่าหยาบคายนะ เมื่อคืนคุณไปร่วมเมถุนกับใครหรือไม่</dd>
   <dt>ผู้สื่อข่าว</dt>
   <dd>ไม่ได้ร่วม</dd>
</dialog>

<figure> ใช้บ่งบอกว่าเนื้อหาที่อยู่ภายใต้แท็กนี้คือมีเดีย เช่น รูปภาพ กราฟ โดยมีแท็กลูกคือ <legend> ที่ใช้ระบุข้อความประกอบภาพ เช่น

<figure>
<img src=”google-maps-book-cover-front-small.png” mce_src=”google-maps-book-cover-front-small.png” alt=”Google Maps มหัศจรรย์แผนที่ออนไลน์” />
<legend>Google Maps มหัศจรรย์แผนที่ออนไลน์ สารพัดวิธีใช้งานสุดยอดแผนที่ของ Google เพื่อความสะดวกสบายและการใช้งานทางธุรกิจ พร้อมลายเซ็นผู้เขียนและบริการจัดส่งฟรี</legend>
</figure>

จะเห็นได้ว่าแท็กเหล่านี้ช่วยให้ข้อความต่างๆ ในเว็บของเรามีความหมายมากขึ้น เราจะค้นหารูปภาพได้ดีขึ้นเพราะ Search Engine จะนำข้อความในแท็ก <legend> ไปทำดัชนีสำหรับรูปภาพ และเราจะค้นหาคำพูดของบุคคลสำคัญต่างๆ ได้ง่ายขึ้นเพราะ Search Engine รู้ว่าใครพูดข้อความอะไรไว้

อย่างไรก็ตาม สิ่งเหล่านี้จะเกิดขึ้นได้ก็เมื่อ HTML 5 กลายเป็นมาตรฐานที่ได้รับการยอมรับในวงกว้าง และยังต้องมีการ take action อย่างเป็นรูปธรรมด้วย ทั้งจากผู้พัฒนาเว็บบราวเซอร์ ผู้พัฒนา Search Engine และนักพัฒนาเว็บ

Posted in มีสาระ, เว็บไซต์ | 2 Comments »

ออกแบบเว็บด้วย Screen resolutions เท่าไหร่ดี ?

Wednesday, March 12th, 2008 |

มีการถกเถียงกันอยู่เสมอว่าในปัจจุบันหากจะออกแบบเว็บไซต์นั้นต้องออกแบบด้วย Screen resolutions เท่าไหร่ดี สมัยก่อนคงมีการเถียงกันมากระหว่าง 800×600 กับ 1024×768 นะครับ เมื่อราวๆ2-3 ปีก่อน 800×600 อาจจะได้ชัยชนะไปนะครับ เพราะเมื่อก่อนผมก็ออกแบบบน 800×600 เพราะตอนนี้เว็บ Mocyc.com ผมเองก็ยังเป็นเว็บไซต์ที่อยู่บนฐานของ 800×600 แต่ผมใช้โฆษณาด้านข้างเพื่อให้มันแสดงผลใน 1024×768 ได้อย่างลงตัวมาอีกนิด

แต่ในปัจจุบันด้วยความก้าวหน้าทางเทคโนโลยี ราคา ต่างๆ เรื่องของจอคอมพิวเตอร์ มันก็มีมาเยอะแยะซะจริงๆ 3-4 ปีก่อนมีแค่ 800×600 กะ 1024×768 เท่านั้นแหล่ะ แต่มาตอนนี้สิจอ LCD ก็มี ทั้งแบบธรรมดาและ wild screen ตั้งค่าหน้าจอได้ไม่รู้จะกี่รูปแบบ

เอ้า…แล้วแบบนี้จะออกแบบขนาดไหนดีเนี่ย

อิอิ ลองมาดูกราฟกัน นี่เป็นกราฟสถิติที่คนเข้าชมเว็บ Mocyc.com นะครับ

จะเห็นว่าขนาดที่ฮอตสุดก็คือ 1024 x 768 นี่คือขนาดที่เมืองไทยนิยมมากที่สุดนะครับ แล้วลองมาดูของเมืองนอกดูบ้างว่าของเขาเป็นยังไง

สถิติของ hobo-web.co.uk

ลองสังเกตุดูดีๆนะครับ สำหรับความต่างของเว็บไทยกะเว็บเมืองนอก ดูกันที่ขนาด 1024 x 768 ครับ ของไทยมี % สูงมาก แต่ของต่างประเทศ 1024 x 768 จะสูสีกับ 1280 x 1024 มากครับเพราะว่าอะไรรู้ไหม

เพราะเมืองนอกตอนนี้เขาใช้ LCD สูงกกว่าบ้านเรามากครับ บ้านเรายังเป็นจอ CRT ขนาด 17 นิ้วซะเป็นส่วนมาก สำหรับต่างประเทศนั้นที่เขาใช้ LCD ก็เพราะ มันกินไฟน้อยกว่าครับทำให้ประหยัดไฟฟ้าได้เยอะเลย (เยอะมาก) สังเกตุตอนเปิดคอม หากใช้จอ CRT บางทีหลอดไฟในบ้านยังวูบเลย ก็เพราะจอ CRT กินไฟประมาณ 100 วัตต์ ส่วน LCD กินเพียง 30-40 วัตต์เท่านั้นเอง

ไปเรื่องไฟฟ้าจนได้ กลับมาเรื่องการทำเว็บเราควรเลือกแบบไหนดี ผมแนะนำ 1024 x 768 เพราะมันสามารถเปิดได้บนจอขนาด 1280 x 1024 ได้ แต่หากออกแบบขนาด 1280 x 1024 เวลาเปิดบน 1024 x 768 มันจะมีสกรอบาร์เลื่อนซึ่งไม่สวยเลยครับ แต่หากจะเอาในส่วนของอนาคตข้างหน้า (เมืองไทยคงอีกนาน) ก็ออกแบบที่ 1280 x 1024 ครับ

แต่จะให้ดีก็ออกแบบเว็บแบบที่ขยายอัตโนมัติครับ ซึ่งคงเป็นเว็บ layout ออกแนว Web 2.0 แต่หากเป้นเว็บเน้นดีไซน์ที่จัดวาง layout เป็นสัดส่วน หรือขนาดที่จำกัดขนาดไว้แล้วก็พึงระลึกถึงการออกแบบบน 1024 x 768 จะดีกว่าครับ ^_^

Posted in มีสาระ, เว็บไซต์ | No Comments »

20 icons สวยๆที่ไม่ควรพลาด

Thursday, March 6th, 2008 |

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

XP iCandy 3.1: 17 icons.