Wordpress & Server2Go

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

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

3. Wordpress • ซอฟต์แวร์/ฟรีบริการในกลุ่มโอเพนซอร์ส (Open Source Software) ที่ทำหน้าที่บริการจัดการเนื้อหาสำหรับเว็บ (CMS – Content Management System) • รูปแบบการนำเสนอเนื้อหาเว็บเป็นแบบ Blog • weB + Log • การนำเสนอเนื้อหาที่เรียงตามวัน/ที่เวลาที่เผยแพร่ผลงาน • เนื้อหาล่าสุด แสดงเป็นลำดับแรก • จัดกลุ่มเนื้อหาตามวันที่/เวลา, หมวดหมู่ (Category) และป้ายกำกับ (Tag) • สามารถประยุกต์ใช้งานได้หลากหลาย • เว็บส่วนตัว/หน่วยงาน/กิจกรรม • เว็บแลกเปลี่ยนเรียนรู้ผ่านชุมชนนักปฏิบัติ (CoP) เพื่อการจัดการความรู้ • เว็บไซต์บริการวิชาการ ความรู้ – Online Learning • เว็บเพื่อการค้าขาย/พาณิชย์อิเล็กทรอนิกส์ (e-Commerce)

4. เหตุผลที่เลือกใช้ Wordpress • ฟรี • ได้ Source Code และปรับแต่งแก้ไขได้ • มีผู้ใช้งานและนักพัฒนาจำนวนมาก • เกิด Community ผู้ใช้และผู้พัฒนา • ประยุกต์ใช้งานได้หลากหลาย • มีโปรแกรมเสริมความสามารถหลากหลาย และฟรี • เป็นมิตรที่ดีกับ Google (Search Engine Friendly & SEO – Search Engine Optimizer) • สอดรับกับเทคโนโลยีเว็บ 2.0 (Web 2.0)

5. http://trends.google.com

6. http://cmsmatrix.org

7. Web 2.0 • ทุกคน (ตามเงื่อนไข/ข้อกำหนด) มีสิทธิ์จัดการเนื้อหาในเว็บ • ไม่ใช่ผู้ชมเว็บแต่เพียงอย่างเดียว • ควรให้ความสำคัญกับ พรบ.การกระทำความผิดทางคอมพิวเตอร์, พรบ.ลิขสิทธิ์ และ พรบ. อื่นๆ ที่เกี่ยวข้องด้วย • เนื้อหาเป็นมากกว่าข้อความ – รูปภาพ ภาพเคลื่อนไหว Flash Animation Online Slide i-Paper Sound/Audio Video … • ทำงานกันเป็นชุมชน (Communities) ผสานเทคโนโลยีร่วมกัน (Mash-up) • ไม่ถูกจำกัดด้วยอุปกรณ์ • ติดตาม ศึกษา วิเคราะห์พฤติกรรมผู้ชมเว็บได้มากขึ้น

8. Mash-up

9. SEO sharing WIKI Podcasting rss Folksonomy design Ajax Video WEB 2.0 Pay per Click CSS Blogs Social Media Usability PARTICIPATION XML SEM Joy of Use The Long Tail Audio

10. ความสำคัญของ Web 2.0 การมีส่วนร่วม (Participation) คือ หัวใจ สำคัญ

11. การให้บริการของ Wordpress • http://www.wordpress.com • บริการฟรีออนไลน์ • http://www.wordpress.org • บริการดาวน์โหลดซอฟต์แวร์ต้นฉบับ Wordpress เพื่อการติดตั้งบนเครื่องแม่ข่ายเว็บของตนเอง/หน่วยงาน • http://mu.wordpress.org/ • บริการดาวน์โหลดซอฟต์แวร์ต้นฉบับ Wordpress Mu เพื่อการติดตั้งบนเครื่องแม่ข่ายเว็บของตนเอง/หน่วยงาน • มีลักษณะการทำงานแบบกลุ่ม Blog

12. http://www.wordpress.com

13. http://www.wordpress.org

14. http://mu.wordpress.org/

15. องค์กร เตรียม Server ติดตั้ง Linux ฐานข้อมูล MySQL โปรแกรมภาษา PHP สิทธิ์ในการเข้าถึง Server ส่วนตัว หน่วยงานเตรียมพื้นที่ให้ สิทธิ์ในการเข้าถึง Server เช่าพื้นที่ ISP ใช้จริง ทำอย่างไร

17. Server2Go • ซอฟต์แวร์จำลองเครื่องแม่ข่ายเว็บ (Web Server) แบบพกพา • Apache • PHP • MySQL • PHPMyAdmin • Perl • ไม่ต้องเสียเวลาติดตั้ง • ดาวน์โหลด แล้ว unzip ก็ใช้งานได้ทันที • คัดลอก (Copy) ระบบที่พัฒนาใส่ Thumb Drive & CD-ROM ไปใช้งานที่ใดก็ได้

18. http://www.server2go-web.de

19. การเรียกใช้งาน Server2Go ดับเบิลคลิกไอคอน Serve2Go.exe รอสักครู่ โปรแกรมจะเปิด IEWeb Browser

20. สร้างตารางข้อมูล MySQL # 1 • พิมพ์ http://127.0.0.1:4001/phpmyadmin

21. สร้างตารางข้อมูล MySQL # 2 • คลิกในรายการ “สร้างฐานข้อมูลใหม่” • ป้อนชื่อ เช่น wordpress • เลือกตัวเลือกถัดไปเป็น utf8_unicode_ci • จากนั้นคลิกปุ่ม “สร้าง” 4 1 2 3

22. ติดตั้ง Wordpress # 1 • พิมพ์ URL http://127.0.0.1:4001/

23. ติดตั้ง Wordpress # 2 • คลิกปุ่ม Create a Configuration File 1

24. ติดตั้ง Wordpress # 3 • เข้าสู่จอภาพเริ่มต้นการติดตั้ง คลิกปุ่ม Let’s go! 1

25. ติดตั้ง Wordpress # 4 • ป้อนข้อมูลการติดตั้งดังนี้ • Database Name : wordpress • User Name : root • Password : ไม่ต้องระบุ • Database Host : localhost • Table Prefix : wp_ • คลิกปุ่ม submit

26. ติดตั้ง Wordpress # 5 • หากโปรแกรมตรวจสอบแล้วข้อมูลตามขั้นตอนที่ 4 ถูกต้อง จะปรากฎข้อมูลดังภาพ ให้คลิกปุ่ม Run the install

27. ติดตั้ง Wordpress # 6 • ป้อนข้อมูลเกี่ยวกับเว็บไซต์ • Site Title: ชื่อเว็บไซต์ • User name: บัญชีชื่อผู้ควบคุมเว็บ เช่น admin • Password: รหัสผ่านของผู้ควบคุมเว็บ • Your e-Mail: e-Mail Address ของผู้ควบคุมเว็บ • จากนั้นคลิกปุ่ม Install WordPress

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

29. ติดตั้ง Wordpress # 7 • การติดตั้งสมบูรณ์

30. การเรียกชมเว็บไซต์ • เปิดใช้งาน Server2Go

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

32. การเข้าสู่ระบบเว็บไซต์ – Log in • เข้าสู่เว็บไซต์ เลื่อนหาคำสั่ง Log in จากกลุ่มรายการ Meta • ป้อนบัญชี Admin เพื่อเข้าสู่ระบบ

33. จอภาพในส่วนควบคุมระบบจอภาพในส่วนควบคุมระบบ

34. ปรับแต่งระบบเว็บไซต์ - Config • คลิกคำสั่ง Settings จากรายการเมนูด้านซ้าย 1

35. ปรับแต่งระบบเว็บไซต์ - Config • Site Title • ชื่อเว็บไซต์ควรเป็นภาษาอังกฤษ ตามด้วยภาษาไทยได้ มีความหมายชัดเจน ผู้ใช้นึกถึงได้ง่าย (คำค้น) มีความยาวรวมไม่เกิน 64 ตัวอักษร • Tagline • สโลแกนของเว็บ • Membership • อนุญาตให้ผู้ชมเว็บสมัครสมาชิกได้หรือไม่ • Time Zone • ให้เลือกเป็น UTC+7 • คลิกปุ่ม Save Change

36. หน้าควบคุมหลัก – Dashboard • เมื่อปรับแต่ง/ทำงานใด สามารถกลับสู่หน้าควบคุมหลักได้โดยคลิกคำสั่ง Dashboard 1

37. ปรับแก้ไขข้อมูลสมาชิกปรับแก้ไขข้อมูลสมาชิก • คลิกที่ชื่อสมาชิก (user name) ที่มุมบนขวาของจอภาพ 1

38. ปรับแก้ไขข้อมูลสมาชิกปรับแก้ไขข้อมูลสมาชิก

39. ชมเว็บไซต์ที่ปรับแต่งชมเว็บไซต์ที่ปรับแต่ง • เมื่อปรับแต่ง/ทำงานใด สามารถชมหน้าเว็บได้โดยคลิกที่ชื่อเว็บไซต์ 1

40. จากหน้าเว็บสู่หน้าควบคุมจากหน้าเว็บสู่หน้าควบคุม • จากหน้าเว็บกลับสู่หน้าควบคุมได้โดย • Log in ใหม่ หรือคลิกคำสั่ง Site Admin

41. เปลี่ยนกราฟิกหัวเรื่องเว็บ # 1

42. เปลี่ยนกราฟิกหัวเรื่องเว็บ # 2 • เข้าสู่ส่วนทำงาน Dashboard • คลิกคำสั่ง Appearance, Header

43. เปลี่ยนกราฟิกหัวเรื่องเว็บ # 3 • เลือกรูปแบบกราฟิกที่ต้องการ แล้ว Save Change

44. เปลี่ยนกราฟิกหัวเรื่องเว็บ # 4 • สามารถนำภาพที่สร้าง/จัดเตรียมเป็นภาพหัวเรื่องเว็บได้โดยคลิกปุ่ม Browse แล้วเลือกภาพ จากนั้นคลิกปุ่ม Upload • โปรแกรมจะให้ตัดส่วนของภาพตามขนาดที่โปรแกรมกำหนด แล้วคลิกปุ่ม Crop and Publish

45. ใส่รายละเอียดเว็บ – About # 1 • Wordpress เตรียมเมนูควบคุมหลักให้ 2 เมนู ได้แก่ • Home สำหรับการกลับสู่หน้าหลัก • About สำหรับนำเสนอรายละเอียดของเว็บ • ในแต่ละเว็บควรมีการแสดงรายละเอียดต่างๆ ของเว็บ ที่เหมาะสมโดยปรับแก้ไขได้ดังนี้ • ทำงานในโหมด Dashboard • เลือกเมนู Pages Page เป็นเนื้อหาประเภทหนึ่ง ของ Wordpress มักจะเรียกว่า Static Content

46. ใส่รายละเอียดเว็บ – About # 2 • คลิกที่ชื่อหน้า About เพื่อเข้าสู่การแก้ไข • เมื่อแก้ไขแล้วให้คลิกปุ่ม Update เพื่อปรับปรุงข้อมูล

47. เครื่องมือแก้ไขเนื้อหาเครื่องมือแก้ไขเนื้อหา

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

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