1. การพัฒนาเว็บไซต์ในรูปแบบ Blog ด้วย Wordpress.com บุญเลิศ อรุณพิบูลย์ ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี สำนักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ ( สวทช .) http://stks.or.th/ boonlert@nstda.or.th http://facebook.com/boonlert.aroonpiboon

2. บุญเลิศ อรุณพิบูลย์ 2536 – 2551 NECTEC เจ้าหน้าที่ระบบคอมพิวเตอร์ วิทยากร ศูนย์ฝึกอบรมคอมพิวเตอร์เนคเทค รักษาการหัวหน้างานสนับสนุนทางเทคนิค รักษาการหัวหน้างานวิชาการ รักษาการหัวหน้างานพัฒนาสื่อสาระดิจิทัล นักวิชาการ 2551 – ปัจจุบัน STKS / NSTDA นักวิชาการ รักษาการหัวหน้างานพัฒนาและบริการสื่อสาระดิจิทัล

3. Web, Blog, Wiki Web HTML editor HTML Generator Macromedia Dreamweaver, MS FrontPage, Adobe GoLive CMS – Content Management System Joomla, Drupal, PHPNuke, Xoops Blog Wordpress, b2evolution, Wordpress MU Wiki MediaWiki, Dokuwiki, TWiki

4. เทคโนโลยี 2.0 เทคโนโลยีตามแนวคิดของการพัฒนาเว็บไซต์ 2.0 (Web 2.0) ยุคใหม่ของการพัฒนาเว็บไซต์ รูปแบบการพัฒนาเว็บไซต์ที่ให้ความสำคัญกับ “ผู้ใช้เว็บ” มากกว่า “ผู้พัฒนา” หรือ “เจ้าของเว็บไซต์” แนวคิดการพัฒนาเว็บที่ให้ความสำคัญกับการปฏิสัมพันธ์ การทำงานร่วมกัน การผสานความร่วมมือทั้งโครงสร้างพื้นฐาน ระบบ ซอฟต์แวร์ และเนื้อหาเว็บ การปรับเว็บไซต์จากการให้ข้อมูลเพียงทางเดียว เป็นการให้บริการและข้อมูลที่ “ผู้ใช้” เข้าถึงได้ง่ายและร่วมสร้าง แก้ไข

6. Google & Search Engine Friendly

7. Mash-up

8. เริ่มต้นกับ Web 2.0 - Blog Blog == weB Log Blog เว็บความร่วมมือที่ง่าย ไม่ซับซ้อน เครื่องมือเชื่อมความสัมพันธ์ระหว่างบุคคล ได้เป็นอย่างดี สื่อสารได้ง่าย ทันใจ อนุทินชีวิต / การงาน ฉบับออนไลน์ จุดเด่น หมวดเนื้อหาและ Tag

9. การมีส่วนร่วม (Participation) คือ หัวใจ สำคัญ เครื่องมือที่ถูกเลือกใช้ประกอบการจัดการความรู้ (KM Tools)

10. วิธีเริ่มต้นกับ Web 2.0 - Blog Free Services http://www.wordpress.com http://www.blog.com http://gotoknow.org http://www.ning.com Free Software http://www.wordpress.org http :// www . weblogmatrix . org /

11. เขียนอย่างไร เรื่องราวใกล้ตัว ที่ชอบและถนัด เขียนแบบเบาๆ เล่าเรื่อง นำเสนอภาพ พร้อมเรื่องประกอบ เรียนรู้ร่วมกัน เขียนตามเป้า / จุดประสงค์ที่วางไว้

12. http :// stanglibrary . wordpress . com /

13. http :// stks . or . th / ling / attawfikiahschool /

14. http :// stks . or . th / wg / dmslib /

15. http :// nuttakorn2548 . wordpress . com /

16. http :// thailandhandmadebuu . wordpress . com

17. Wordpress ซอฟต์แวร์ในกลุ่ม Open Source พัฒนา Blog (weB + Log) เทคนิคการพัฒนาเว็บประเภทหนึ่งที่นำเสนอเนื้อหาโดยให้ความสำคัญกับวันที่ / เวลาที่เผยแพร่เนื้อหา รูปแบบการใช้บริการ Wordpress Online Free Hosting : www.wordpress.com ติดตั้งบนเครื่องแม่ข่ายสำนักงาน / ส่วนตัว

18. เริ่มด้วยต้องมี e-Mail www.gmail.com mail.yahoo.com www.hotmail.com

19. การใช้บริการ Wordpress.com

20. Wordpress.com --- thaiview http://thaiview.wordpress

22. ประเด็นสำคัญการสมัครสมาชิก เลือกใช้อีเมล์ hotmail, yahoo mail, gmail User name ที่ระบุจะต้องเป็นภาษาอังกฤษ ตัวพิมพ์เล็ก มีความยาวพอสมควร และห้ามใส่เครื่องหมายพิเศษใด รวมทั้งช่องว่าง User name ที่ระบุคือ รหัสผ่าน ควรมีความยาวไม่น้อยกว่า 8 ตัวอักษร และควรผสมอักขระพิเศษสัก 1 ตัวเช่น # @ $ % จะต้องจำรหัสผ่านให้ได้ รหัสผ่าน ที่ระบุคือ เมื่อสมัครผ่านแล้ว จะต้องเช็คเมล์ที่ใช้สมัคร เพื่อยืนยัน การสมัครด้วยทุกครั้ง

23. ข้อแนะนำการสร้างรหัสผ่าน กำหนดเกณฑ์การสร้างรหัสผ่านให้ตนเอง ให้ความสำคัญกับการสร้างรหัสผ่าน เช่น กำหนดอักขระพิเศษให้สระ ปิดท้ายด้วย # A $ E + I ^ O @ U ! kampaengsaen k$mp$+ngs$+n#

24. กำหนดชื่อ Blog เลือกภาษาไทย

25. ยืนยันการสมัคร

26. ยืนยันการสมัคร เปิดเมล์แล้วคลิก Link นี้ด้วย

27. ณ ขณะนี้ทุกท่านจะมีบัญชีการใช้งาน 2 ชุด e-Mail User name คือ Password คือ Wordpress.com User name คือ Password คือ

28. URL ของเว็บไซต์ Wordpress ของตนเอง http:// บัญชีที่สมัคร .wordpress.com เช่น เว็บของครูน้อง URL คือ http://krungnongjb.wordpress.com User name คือ Password คือ http://stks.wordpress.com

29. โครงสร้างของหน้าเว็บ ชื่อเว็บไซต์ สโลแกนเว็บ เมนูจาก Pages เนื้อเรื่อง (Post) กลุ่มวิตเจ็ต

30. Login เข้าสู่ระบบ www.wordpress.com

31. Dashboard ส่วนสำคัญของการใช้งาน

32. Dashboard ส่วนสำคัญของการใช้งาน

33. เปลี่ยนระบบภาษา ไทย - > English หน้าหลัก , ตั้งค่า , General, ภาษา English - > ไทย Dashboard, Settings, General, Language เมนูคำสั่งนี้ยังควบคุมการตั้งค่าของเว็บ Web Configuration

34. Site Title ควรเป็นภาษาอังกฤษนำ ตามด้วยภาษาไทย Apasiri Apartment อาภาสิริอพาร์ทเมนต์ อุบลราชธานี ควรเป็นคำที่ผู้ใช้นึกถึงบ่อยๆ คล้ายกับเป็น Keyword ความยาวรวมไม่เกิน 64 ตัวอักษร

36. ปรับแก้ไขข้อมูลผู้ใช้ / สมาชิก 1 2

38. เปลี่ยนรูปแบบเว็บ (Themes) หน้าหลัก , รูปแบบบล็อก , Themes

39. เปลี่ยนรูปแบบเว็บ (Themes) คลิก “ใช้งาน” ธีมที่ต้องการ

40. ดูหน้าเว็บ http:// .. ชื่อที่สมัคร ... wordpress.com หรือ คลิกชื่อเว็บ

41. ดูหน้าเว็บ กลับไปสู่หน้าจัดการ Dashboard ด้วยคำสั่ง ผู้ควบคุมเว็บ หรือ

42. ปรับแก้ไขกราฟิกของ Themes บาง Themes อนุญาตให้ปรับแก้ไขกราฟิกได้ เลือกคำสั่ง หน้าหลัก , รูปแบบบล็อก , ส่วนหัว ( หากมี ) จะต้องเตรียมภาพต้องข้อกำหนด หรือใช้เทคนิค Crop ภาพด้วยเครื่องมือของ Wordpress

44. กราฟิกของ Themes ที่ปรับเปลี่ยน

45. Widget วิดเจ็ต (Widget) คือ โปรแกรมที่เพิ่มความสามารถให้บล็อก ลิงก์ไปที่ต่าง ๆ แสดงสถิติเยี่ยมชม แสดงหัวข้อเรื่อง แสดงข่าวสารจาก twitter จัดการวิดเจ็ตได้ด้วยคำสั่ง หน้าหลัก , รูปแบบบล็อก , Widgets

46. วิดเจ็ต Widget จำเป็น Meta ค้นหา ปฏิทิน สถิติบล็อก หมวดหมู่ ลากจาก ซ้ายไปขวา จำนวน Sidebar ขึ้นอยู่กับ Themes ที่เลือก

47. ประเภทเนื้อหา Post – เรื่อง Dynamic Content นำเสนอเรียงตามวันที่ / เวลา จัดเก็บตามวันที่ / เวลา (Archives) จัดกลุ่มตามหมวดหมู่ (Category) จัดกลุ่มตามป้ายกำกับ (Tag) มักแสดงผลหน้าแรกของเว็บ Blog Page – หน้า Static Content นำเสนอด้วย Menu, Widget

48. ปรับแก้ไขข้อมูลเกี่ยวกับเว็บ – About หน้าหลัก , หน้า คลิกหน้า About เพื่อเข้าไปแก้ไขข้อมูล

49. ปรับแก้ไขข้อมูลเกี่ยวกับเว็บ – About 1) ป้อนชื่อเรื่อง 2) ป้อนเนื้อหา 3) เลือกเงื่อนไข การแสดงความคิดเห็น 4) ระบุลำดับการแสดงผล 5) อัปเดต

50. URL ที่ดีสำหรับเว็บ Wordpress.com กำหนดให้ URL ของแต่ละเนื้อหาเป็นมิตรกับ Search Engine – Search Engine Friendly รวมทั้งกับคน URL Friendly จะไม่รองรับภาษาไทย แต่ส่วนประกอบของ URL มาจากชื่อเรื่อง หากใช้ชื่อเรื่องภาษาไทย จะต้องเปลี่ยน Permalink ของเรื่องให้เป็นภาษาอังกฤษ

51. คัดลอกเนื้อหาจากแหล่งอื่นๆ ไม่ควรคัดลอก (Copy) เนื้อหาจาก Word หรือแหล่งอื่นๆ มาวางใน Editor ของ Wordpress เพราะจะส่งผลให้เกิดปัญหาการแสดงผลที่ผิดพลาด ปรับแก้ไขยาก เพราะมี special code จากโปรแกรมต้นทางส่งมายัง Editor ของ Wordpress หากจำเป็นต้องคัดลอกข้อมูล ให้นำข้อมูลดังกล่าวไปวาง (Paste) บน NotePad ก่อนแล้วจึงคัดลอกจาก NotePad มาวางใน Editor ของ Wordpress

52. เครื่องมือจัดการข้อความ / สื่อ

53. นำเข้ารูปภาพ # 1 รูปภาพที่นำมาประกอบเนื้อหาของ Wordpress จะต้องเตรียมดังนี้ กำหนดชื่อแฟ้มภาพ (File name) ให้เป็นภาษาอังกฤษ และ / หรือผสมตัวเลข ห้ามใช้ภาษาไทย ฟอร์แมตภาพ .gif สำหรับภาพวาด ภาพลายเส้น ภาพที่มีสีไม่มาก .jpg/.png สำหรับภาพสีมาก .png สำหรับภาพสีมากที่ต้องการพื้นโปร่งใส (Transparent) ควรย่อภาพให้มีขนาดที่เหมาะสม และ / หรือลดความละเอียดของภาพ (Resolution) ระหว่าง 72 – 96 dpi รูปภาพ / แบบอักษร / ข้อความไม่ควรละเมิดลิขสิทธิ์ http://openclipart.org ค้นหาภาพจาก Google, Flickr ด้วยเงื่อนไข CreativeCommons ระบุ Metadata ของภาพให้เหมาะสมในระดับดิจิทัล

54. ตัวอย่างการเลือกฟอร์แมตภาพที่ไม่เหมาะสม ภาพด้านซ้ายสีแตก ไม่สม่ำเสมอ

55. Progressive & Interlaced รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพแบบ Interlaced การแสดงผลภาพ แบบ Progressive

56. PNG & GIF Transparent

57. ปัญหาลิขสิทธิ์ของเมืองไทย

59. (cc)

60. การสืบค้นภาพที่เป็น (cc) (cc)

61. วัน / เวลากล้องถ่ายภาพดิจิทัล / อุปกรณ์ดิจิทัล พรบ . การกระทำความผิดทางคอมพิวเตอร์

63. Image Metadata : EXIF : IPTC

65. นำเข้ารูปภาพ # 2 จากหน้าจอสร้าง / แก้ไขเนื้อหา คลิกเมาส์ ณ ตำแหน่งที่ต้องการวางภาพ คลิกปุ่ม Add an Image คลิกเลือกภาพจากปุ่ม Browse

66. ป้อนชื่อภาพในรายการหัวข้อ ใช้ภาษาไทยได้ ป้อนคำบรรยายภาพใน รายการคำอธิบายสลับหรือ คำขยายความ หากต้องการให้คลิกที่ภาพ เพื่อคลิกไปยังภาพขนาดต้นฉบับ ให้คลิกปุ่ม URL ของไฟล์ แต่ถ้า ไม่ต้องการให้คลิกภาพ คลิกปุ่มไม่มี กำหนดตำแหน่งการวางภาพ จากรายการจัดแถว กำหนดขนาดภาพจากขนาด คลิกปุ่มใส่เข้าในเรื่อง นำเข้ารูปภาพ # 3

67. สร้างหน้า (Page) ใหม่ หน้าหลัก , หน้า , เขียนหน้าใหม่ ( หน้าใหม่ )

68. การจัดการ / เขียนเรื่อง (Post) หน้าหลัก , เรื่อง หน้าหลัก , เรื่อง , เขียนเรื่องใหม่ ( เรื่องใหม่ )

69. ระบุชื่อเรื่อง เขียนเรื่อง ใส่เนื้อหาย่อในรายการ ตัดทอน ระบุ URL อ้างอิงในรายการ ส่ง Trackbacks ใช้ , คั่นหากมีหลาย URL เงื่อนไขการแสดงความคิดเห็นจากรายการ สนทนา เลือกชื่อผู้เขียน จากรายการ ผู้เขียน กำหนดหมวดหมู่จาก Categories กำหนดป้ายกำกับจาก Post Tags ระบุเงื่อนไขการเผยแพร่จาก เผยแพร่

70. ป้ายกำกับ - Tags คำค้น แสดงปริมาณเนื้อหา กรองข้อมูลตามป้ายที่เลือก

71. ตัวอย่างการใส่เนื้อหา เนื้อหาที่เป็นข้อความ เนื้อหาพร้อมภาพ เนื้อหาพร้อมแนบไฟล์เอกสาร เนื้อหา Online slide จาก Slideshare เนื้อหา Video จาก Youtube

72. Slideshare ผ่าน Wordpress Slideshare.net เป็นแหล่งรวมสไลด์ / เอกสารแหล่งใหญ่บนโลกอินเทอร์เน็ต นำ PPT, PDF, DOC ไปจัดเก็บและแปลงเป็น Online Slide, i-Paper อัตโนมัติในรูปแบบ Flash-based ค้นสื่อจาก slideshare.net แล้วคลิกเลือกสื่อที่ต้องการ คลิกรายการ Embed คัดลอกคำสั่งจากรายการ Embed this presentation มาวางใน Post ผ่านโหมดการทำงาน HTML

73. Code ของ Slideshare 1 2

74. Slideshare ผ่าน Wordpress 1 2

75. Slideshare ผ่าน Wordpress

76. Youtube ผ่าน Slideshare 1 2 3 4

77. การแสดงความเห็น กรณีผู้ชมทั่วไป ต้องป้อนข้อมูลส่วนตัว ผลจะไม่ปรากฎทันที กรณีสมาชิก ใส่เฉพาะความเห็น ความเห็นที่เผยแพร่ต้อง ผ่านการอนุมัติจากผู้ดูแลก่อน

78. การอนุมัติความเห็น จากหน้าหลัก จะปรากฎส่วนควบคุม “เนื้อเรื่อง” แสดงว่ามี 4 ความเห็น รอพิจารณา 3 ความเห็น อาจจะเป็น Spam

79. การอนุมัติความเห็น

80. สร้างลิงก์เข้าในเว็บ หน้าหลัก , ลิงก์ , Add New ควรสร้างหมวดหมู่ลิงก์ก่อน ด้วยคำสั่งหน้าหลัก , ลิงก์ , ลิงก์หมวดหมู่ การแสดงผลลิงก์ใน หน้าเว็บให้กำหนดด้วย Widgets ชื่อ ลิงก์

81. แบบสำรวจ (Poll) หน้าหลัก , โพลล์

82. เผยแพร่โพลล์ สร้างเรื่องใหม่ New Post คลิกปุ่ม Add Poll แล้วเลือกโพลล์ที่ต้องการเผยแพร่

83. ตอบโพลล์

84. ร่วมเป็นสมาชิกกับ Blog ที่มีอยู่แล้ว ติดต่อเจ้าของ Blog ให้เพิ่มบัญชี Login เข้าสู่ระบบ ป้อนข้อมูล

85. ตั้งค่าการเขียน

86. ตั้งค่า การอ่าน

89. ตั้งค่าสื่อ

90. การทำงานร่วมกับ Web 2.0 อื่นๆ ทำงานผ่าน Widgets กำหนดค่า Widgets แตกต่าง ตามบริการ Web 2.0 อาจจะต้องเป็นสมาชิก บริการ Web 2.0 ที่ต้องการก่อน

91. e-Commerce ด้วย Blog ขายอะไรดีผ่าน Blog สินค้าราคาถูกกว่าท้องตลาด สินค้าเฉพาะกลุ่ม สินค้า “ ไม่ ” ยอดนิยม สินค้าไม่ต้องการเปิดเผยตัวตน สินค้ามีลักษณะเฉพาะตัว สินค้าที่มีน้ำหนักเบา สินค้าที่ไม่ยุ่งยากในการจัดส่ง สินค้าที่เล่าเรื่องได้ สินค้าที่หายาก Do it yourself – DIY ประเด็นสำคัญ อย่าลืมประยุกต์ใช้ Web 2.0 Tools ให้เหมาะสม หลากหลาย มีปฏิสัมพันธ์กับผู้ชม ผู้ซื้อ ลูกค้าอย่างสม่ำเสมอ กำหนดกลุ่มเป้าหมาย และลักษณะเฉพาะให้ได้

92. แหล่งข้อมูล http://stks.or.th/wiki http://slideshare.net/boonlert