wEb

นานๆจะ update สักที มาคราวนี้มาเพื่อเขียนถึงเว็บใหม่ที่เพิ่งทำเสร็จไปหยกๆ มันคือ twitjj.com นั่นเอง ผ่างๆๆ!!

ไอ้เจ้า Twitjj.com เนี่ย จริงๆ ผมไม่ตั้งใจจะมาเขียนถึงหรือบอกเล่าอะไรในภาษาไทยและกับคนไทยมากนัก ณ ตอนที่เปิดใหม่ๆ เพราะตั้งใจอยากจะ go inter จึงทำเว็บเป็นภาษาอังกฤษ แล้วก็จะไปโปรโมทตามเว็บฝรั่งอีกต่างหาก แต่ไหนๆ ก็ไหนๆ แล้ว ลุยมันไปทั้งสองทางนั่นแหละ จึงจำเป็นต้องเขียน Blog เล่าเป็นภาษาไทยนิดนึง เพื่อโปรโมท (ทำเหมือนคนจะอ่านเยอะเนอะ ฮ่าๆ)

เข้าเรื่องดีกว่า ตัว Twitjj หรือ http://twitjj.com เนี่ย ผมตั้งใจเรียกมันเป็น Twitter Classifieds หรือ Tweet Classifieds แต่บังเอิญว่าเห็นฝรั่งมันใช้เรียก Service คล้ายๆกันนี้ว่า Social Classifieds ซึ่ง ช่างมัน จะเรียกอะไรก็ได้ ความหมายเดียวกัน ซึ่งก็คือ การใช้ Twitter มาทำการซื้อ ขาย  แลก เปลี่ยน หรือจะแจกฟรี วิจารย์ สินค้า อาหาร สถานที่ ที่พัก อะไรก็ว่าไป ตามแต่ใจจะอยาก

ผมค่อนข้างเป็นคนติด Twitter ไปไหน ทำอะไรก็จะถ่ายรูป วิจารย์ และพูดถึงบ่อยๆ ดังนั้น เว็บนี้เรียกได้ว่าเพื่อสนองตัณหาตนเองพอสมควร เพราะเวลาผมเคย tweet อะไรไว้ แล้วเมื่อมีคนมาถามย้อนหลัง ผมเจอปัญหาที่ว่าหา tweet เก่าๆไม่ค่อยเจอ หรือจะส่งรูปความน่าอร่อยของอาหารไปให้เพื่อน ก็แสนจะหายากเย็น จะบอกว่าร้านอยู่ตรงไหน ก็บอกยากอีก พูดง่ายๆ

ผมเลยคิดว่า ถ้ามี service อะไรบางอย่างที่ manage tweet ได้ ขอแค่ filter ตาม hash tag ได้ (เช่นพวก #food #ก๋วยเตี๋ยว) มันก็คงดีไม่น้อย โดยที่ผม tweet หรือ Check-in FourSquare ปุ๊บ มาทั้งรูป ทั้ง map และ detail ให้เลย พอเพื่อนถาม ก็โยนหน้าเว็บ profile ให้มันดู โดยมีแต่ของที่เราอยากบอก ไม่ต้องมาเจอเรื่องส่วนตัวเรื่องอื่นๆของกรูด้วย, และนี่เอง คือที่มาของ twitjj ครับ

มาถึงตรงนี้ อ่านดูเหมือนมันมีไว้วิจารณ์ (Review) มากกว่า Classifieds แต่ส่วนตัวผม ทั้งคู่มันต่างกันเพียงแค่เส้นบางๆ โดย Review คือการช่วยเขาขายดี หรืออาจจะช่วยเขาให้ดับ ส่วนการ Classifieds คือการซื้อ ขาย ด้วยตัวเราเอง, ดังนั้น ผมเลยมองภาพเป็น Classifieds มากกว่า

นอกจากจะเก็บข้อมูล tweet ให้ผมแล้ว ผมยังอยากเปิดช่องให้คนที่เข้ามาเจอ ไม่ว่าจะทาง Google หรือ Search Engine อื่นๆ ได้เข้ามา Share ไปยัง Facebook, Twitter, Digg หรือโหวตให้คะแนนได้ด้วย เพื่อให้คนอื่นๆมายืนยันสิ่งที่ผม ซื้อ ขาย หรือวิจารณ์

และแน่นอนครับ บางคนอยากรู้ลึกไปกว่านั้น รวมถึงเป็นความต้องการของผมอีกเช่นกัน นั่นคือใคร retweet ข้อความผมบ้าง หรือมีใครมากดดู link ไปแล้วกี่ครั้ง ผมจึงเพิ่มในส่วนข้อมูลเหล่านี้ไปด้วย และเรียกมันว่าเป็น Marketing Analyst เพราะค่อนข้างเป็น Tools ตัวหนึ่งไว้วิเคราห์มากกว่าที่คนปกติทั่วไปจะอยากรู้

นี่แหละครับ ความต้องการของผมและสิ่งที่ผมให้ Twitjj มันสนองตัณหาตัวผมเอง และผมก็มีความเข้าใจว่า คนอื่นๆก็น่าจะมีตัณหาแบบเดียวกับที่ผมมีด้วยเช่นกัน

อ้อ ก่อนจบ ลืมบอกที่มาของชื่อครับ โดยว่าคำว่า Twit มาจาก Twitter, ส่วน jj มันก็คือ Jatujak หรือ จตุจักร นั่นเอง ฮ่าๆๆ แต่ทำเป็นเล่นไปนะครับ จตุจักร มันสื่อความหมายให้คนไทยและคนต่างชาติที่เคยมาไทย รู้ว่านี่คือตลาดนัดกลางแจ้งที่ใหญ่ที่สุดในภูมิภาคเอเชียเลยทีเดียว

ใครอยากรู้รายละเอียดมากกว่านี้ อ่านได้ที่ About us ครับ

วิธีใช้งาน

ไม่ยากครับ

1. แค่คุณมี Twitter Account แล้วเข้ามา Sign-in ที่ระบบ Twitjj เพื่อให้เราเก็บชื่อของคุณไว้ว่าคุณเป็นสมาชิกกับเรา (หากไม่มี Account Twitter สมัครที่นี่ครับ http://twitter.com )

2. เวลาถ่ายรูป หรือ Tweet แค่ข้อความ ให้ใส่คำว่า #jj เข้าไปด้วย แล้วระบบจะรู้ได้เองว่า ข้อความอะไร ราคาเท่าไร รูปอะไร สถานที่ไหน และทำการดูดเข้ามาในระบบเพื่อแสดงบน Twitjj.com ครับ (Twitter Account บางคนอาจจะใช้งานไม่ได้โดยเฉพาะที่สมัครใหม่ และ Tweet น้อยๆไม่เกิน 100 ครับ)

ส่วนใครอยากรู้วิธีใช้งานโดยละเอียด และดูว่า Twitjj Support เว็บรูปอะไรบ้าง หรือการใส่ราคาทำอย่างไร สามารถดูได้ที่ How to use ครับ

จบการ Hard Sale เว็บตัวเองไว้เท่านี้ ฮ่าๆๆ ขอให้ใช้กันเยอะๆ นะครับ ;D

 

HTML 5 and Web Standards

posted on 06 Jun 2009 23:24 by ifew in wEb

จริงๆ ผมเริ่มอินเรื่องของ Web Standards เมื่อตอนไปงาน Thailand Next Web Apps 2008 ช่วงกลางปีที่ผ่านมานี่เอง ตั้งแต่นั้นมาก็เริ่มหาหนังสือและคู่มืออ้างอิง จนพบว่า หัวใจมันคือ ใช้ tag ให้ถูกต้องตามหน้าที่ของมัน และ แยกส่วนให้เป็นระบบ ระหว่าง Structure (HTML) / Stylesheets (CSS) / Script (Javascript)

หรือแม้แต่เรื่องของ SEO (Search Engine Optimize) ที่ผมมองว่า มันก็คือ ทำเว็บให้ตรงตาม  Standards พร้อมกับสร้างข้อมูลที่ดี แค่นี้เอง มีหรือที่ Search Engine จะไม่หลงรักและจดจำไปจนวันตาย (ส่วน Search Engine จะทำการเก็บข้อมูลได้ช้าหรือเร็วนั้น อยู่ที่ การทำ E-Marketing ของคุณ)

นะยะหลังมานี้ผมใช้ PHP Framework ชื่อ Codeigniter เป็นตัวพัฒนาเว็บไซต์ และมันเป็นหลักการของ MVC ซึ่งแยกระหว่าง Model (เช่น พวก คำสั่ง Database) / View (เช่น พวก Template ไว้เก็บ HTML แสดงผล) / Controller (ตัวประมวลผลจาก Model ส่งไปยัง View) ออกจากกัน ผมพบว่าถ้าพัฒนาในส่วนของ View ด้วย Web Standards มันทำให้การพัฒนางานง่ายมากขึ้น ทั้งผม (Developer) และเพื่อน (Designer)


หลักๆ มันทำให้ผมสะดวกได้ดังนี้

1. ผม Developer ไม่ต้องรอเพื่อน Designer ออกแบบเว็บไซต์ก่อน ซึ่ง ผมแค่คุยกันคราวๆ ในส่วนของ layout ว่า จะมีข้อมูลอะไรบ้าง และไว้ตรงตำแหน่งไหน เพราะ CSS กับ HTML ผมแยกจากกัน

2. ผมสามารถเขียน HTML Structure โดยเรียงลำดับความสำคัญของข้อมูลที่ผมต้องการให้ search engine เจอก่อนได้ เช่น ผมอาจจะเอา เมนู (navigator) ไว้ล่างสุด เพื่อให้ search engine เจอบทความของผมก่อน ซึ่งเพื่อนผมสามารถใช้ CSS มาจัดระเบียบรูปแบบการแสดงภายหลังได้

3. ผมสามารถแสดงผลข้อมูลออกมาดิบๆ ทั้งหมด และใช้ AJAX เป็นตัวเรียกข้อมูลและทำการกำหนดเลือกให้ว่าข้อมูลที่เราใช้งานคือตัวไหน และอยู่ใน id หรือ class ใด ของ tag HTML ซึ่งทำให้ผมไม่ต้องนำ PHP มาเขียนไว้ใน View เพื่อ if else แสดงข้อมูลที่ถูกเลือกให้วุ่นวายแก่ เพื่อนที่เป็น Designer มากนัก รวมทั้งโค้ดผมสะอาดขึ้น

4. เวลาเพื่อน Designer ต้องการแก้ไข Style หรือผม  Deveoper ทำระบบเปลี่ยน Template ผมสามารถให้เพื่อนสร้างจาก CSS เพียงไฟล์เดียว

เอาหละครับ นี่เป็นเพียงข้อดีของ Web Standards ที่ผมได้ประสบพบมากับตัว ซึ่งแค่ 4 ข้อ ก็ทำให้ การทำงานผม (Deveoper ) และเพื่อน (Designer) สะดวกมากขึ้น แต่จริงๆ แล้วเพื่อนผมมันคงต้องไป Optimize เรื่องของ Javascript กับ CSS อีกทีตามความเหมาะสมของ design ที่มันออกแบบมา

มาดูเรื่องของ HTML กันบ้าง ซึ่งปัจจุบันที่เราใช้อยู่คือ HTML 4.01 ครับ มันมี tag หลายตัวที่เรา (รวมถึงผม) ไม่เคยรู้และไม่เคยใช้มาก่อน เพราะเรามัวไปติดรูปแบบของ HTML แบบเก่า เช่น จะสร้างตารางสักชุด เราอาจรู้จักแค่ <table>, <td>, <tr> แต่เราไม่รู้ว่ามันมี <thead>, <tbody>, <tfoot> ด้วย

แต่ถามว่าเขียนแบบนั้นแล้วแสดงผลได้ไหม? ตอบว่าได้ครับ! แต่ไม่มีความเป็น Semantic

ซึ่งเจ้า <thead>, <tbody>, <tfoot> เป็นตัวบอกครับ ว่าตารางที่เราสร้างนั้น แถวไหนคือส่วนหัวแถว ส่วนข้อมูล และส่วนท้ายแถว มันจึทำให้การค้นหาข้อมูลของ Search Engine ทำงานได้ดีขึ้น จึงเป็นการทำ SEO ไปในตัวเลยทีเดียว

หรือแม้แต่การใส่ที่อยู่บริษัทในเว็บไซต์ ถ้าเป็นคนรู้ จะใช้ <address> แต่ถ้าไม่รู้(หรือรู้แต่อาจจะไม่ใช้) ก็สารพัด tag เช่น <b>,<i>,<div>

ซึ่งในอนาคต (แต่ผมคิดว่าปัจจุบัน) ความเป็น Semantic ของเว็บจะเป็นส่วนสำคัญมาก ในการบ่งบอกข้อมูลให้แก่ผู้ใช้ที่เป็นคอมพิวเตอร์ อย่าง search engine ที่เราเข้าใจกัน และมนุษย์แบบเราๆ ท่านๆ เช่น..


วันหนึ่งคนตาบอดเล่นเว็บคุณ อยากได้ที่อยู่บริษัทคุณ พอเอาเม้าชี้กวาดไปในเว็บบริษัท พอถึงตำแหน่งแสดงที่อยู่ และคุณใช้ <address> คอมพิวเตอร์ก็จะบอกได้ว่า บรรทัดนี้คือที่อยู่และสั่งให้พูดประโยคนั้นได้ทันที แต่ถ้าเว็บคุณยังใช้แบบเก่า เช่น <b>, <i> คนตาบอดคงต้องนั่งฟังข้อความทั้งหมดในเว็บของคุณก็เป็นได้ เพราะแยกไม่ออกว่าข้อความนี้คืออะไร

นี่เป็นเพียงตัวอย่างของ HTML 4.01

ใช่ครับ สิ่งที่ผมเล่ามาทั้งหมด มันกำลังเป็นอดีต

ที่ผมต้องเกริ่นเสียยาว ก็เพื่อให้ทุกท่านตระหนักครับ ว่า Web Standards สำคัญมากในปัจจุบันและอนาคต เพราะตอนนี้ HTML 5 มันใกล้เรามากขึ้นเรื่อยๆ ถ้าแค่ HTML 4.01 และ Web Standards เราไม่เข้าใจและไม่ใช้ประสิทธิภาพของมัน ในอนาคตเว็บไซต์เรา search engine อาจจะไม่รู้ตัก เว็บเราอาจจะตาย และเราอาจจะต้องเสียเงินมากมาย หรือเสียเวลามากมาย เพื่อปรับปรุงระบบใหม่

ฮ่าๆ เขียนมายาว ทำท่าจะจบหลายรอบ แต่ยังครับ ยังไม่จบๆ

ในเรื่องของ 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 ซึ่งมีการตั้งชื่อตามแต่คนออกแบบเว็บจะตั้ง ไม่ได้มีมาตรฐานอะไรมากำหนด

การกำหนดโครงสร้างหน้าเว็บโดยใช้ <div>

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

การกำหนดโครงสร้างหน้าเว็บโดยใช้แท็กของ HTML 5

คงไม่ต้องอธิบายวิธีการใช้งานแต่ละแท็กนะครับ คิดว่ารูปน่าจะอธิบายได้ดีอยู่แล้ว อย่างเช่น <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 และนักพัฒนาเว็บ

อ้างอิง