Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

2010012 Wordpress Com Boonkiat

1,431 views

Published on

  • Be the first to comment

2010012 Wordpress Com Boonkiat

  1. 1. การพัฒนาเว็บไซต์ในรูปแบบ Blog ด้วย Wordpress.com บุญเกียรติ เจตจานงนุช ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี สานักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ (สวทช.) http://stks.or.th/boonkiat
  2. 2. 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
  3. 3. เทคโนโลยี 2.0  เทคโนโลยีตามแนวคิดของการพัฒนาเว็บไซต์ 2.0 (Web 2.0)  ยุคใหม่ของการพัฒนาเว็บไซต์  รูปแบบการพัฒนาเว็บไซต์ที่ให้ความสาคัญกับ “ผู้ใช้เว็บ” มากกว่า “ผู้พัฒนา” หรือ “เจ้าของเว็บไซต์”  แนวคิดการพัฒนาเว็บที่ให้ความสาคัญกับการปฏิสัมพันธ์ การทางานร่วมกัน การผสานความร่วมมือทั้งโครงสร้างพื้นฐาน ระบบ ซอฟต์แวร์ และเนื้อหาเว็บ  การปรับเว็บไซต์จากการให้ข้อมูลเพียงทางเดียว เป็นการให้บริการและข้อมูล ที่ “ผู้ใช้” เข้าถึงได้ง่ายและร่วมสร้าง แก้ไข
  4. 4. Google & Search Engine Friendly
  5. 5. Mash-up Blog RSS Google HTML CMS Web Programming
  6. 6. เริ่มต้นกับ Web 2.0 - Blog  Blog == weB Log  Blog เว็บความร่วมมือที่ง่าย ไม่ซับซ้อน  เครื่องมือเชื่อมความสัมพันธ์ระหว่างบุคคล ได้เป็นอย่างดี  สื่อสารได้ง่าย ทันใจ อนุทินชีวิต/การงาน ฉบับออนไลน์  จุดเด่น หมวดเนื้อหาและ Tag
  7. 7. เครื่องมือทีถูกเลือกใช้ประกอบการจัดการความรู้ ่ (KM Tools) การมีส่วนร่วม (Participation) คือ หัวใจ สาคัญ
  8. 8. วิธีเริ่มต้นกับ 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/
  9. 9. เขียนอย่างไร  เรื่องราวใกล้ตัว ที่ชอบและถนัด  เขียนแบบเบาๆ  เล่าเรื่อง  นาเสนอภาพ พร้อมเรื่องประกอบ  เรียนรู้ร่วมกัน  เขียนตามเป้า/จุดประสงค์ที่วางไว้
  10. 10. http://stanglibrary.wordpress.com/
  11. 11. http://stks.or.th/ling/attawfikiahschool/
  12. 12. http://stks.or.th/wg/dmslib/
  13. 13. http://nuttakorn2548.wordpress.com/
  14. 14. http://thailandhandmadebuu.wordpress.com
  15. 15. Wordpress  ซอฟต์แวร์ในกลุ่ม Open Source  พัฒนา Blog (weB + Log)  เทคนิคการพัฒนาเว็บประเภทหนึ่งทีนาเสนอเนือหา ่ ้ โดยให้ความสาคัญกับวันที่/เวลาที่เผยแพร่เนื้อหา  รูปแบบการใช้บริการ Wordpress  Online Free Hosting : www.wordpress.com  ติดตั้งบนเครื่องแม่ข่ายสานักงาน/ส่วนตัว
  16. 16. เริ่มด้วยต้องมี e-Mail  www.gmail.com  mail.yahoo.com  www.hotmail.com
  17. 17. การใช้บริการ Wordpress.com
  18. 18. ประเด็นสาคัญการสมัครสมาชิก  เลือกใช้อีเมล์ hotmail, yahoo mail, gmail  User name ที่ระบุจะต้องเป็นภาษาอังกฤษ ตัวพิมพ์เล็ก มีความยาวพอสมควร และห้ามใส่เครื่องหมายพิเศษใด รวมทั้งช่องว่าง  User name ทีระบุคือ ่  รหัสผ่าน ควรมีความยาวไม่น้อยกว่า 8 ตัวอักษร และควร ผสมอักขระพิเศษสัก 1 ตัวเช่น # @ $ %  จะต้องจารหัสผ่านให้ได้ รหัสผ่าน ทีระบุคือ ่  เมื่อสมัครผ่านแล้ว จะต้องเช็คเมล์ที่ใช้สมัคร เพื่อยืนยัน การสมัครด้วยทุกครั้ง
  19. 19. ข้อแนะนาการสร้างรหัสผ่าน  กาหนดเกณฑ์การสร้างรหัสผ่านให้ตนเอง  ให้ความสาคัญกับการสร้างรหัสผ่าน  เช่น กาหนดอักขระพิเศษให้สระ ปิดท้ายด้วย #  A $  E + kampaengsaen  I ^  O @  U ! k$mp$+ngs$+n#
  20. 20. กาหนดชื่อ Blog เลือกภาษาไทย
  21. 21. ยืนยันการสมัคร
  22. 22. ยืนยันการสมัคร เปิดเมล์แล้วคลิก Link นี้ด้วย
  23. 23. ณ ขณะนี้ทุกท่านจะมีบัญชีการใช้งาน 2 ชุด  e-Mail  Wordpress.com  User name คือ  User name คือ  Password คือ  Password คือ
  24. 24. URL ของเว็บไซต์ Wordpress ของตนเอง  http://บัญชีที่สมัคร.wordpress.com  เช่น เว็บของครูน้อง URL คือ  http://krungnongjb.wordpress.com  User name คือ  Password คือ
  25. 25. โครงสร้างของหน้าเว็บ ชื่อเว็บไซต์ สโลแกนเว็บ เมนูจาก Pages เนื้อเรื่อง (Post) กลุ่มวิตเจ็ต
  26. 26. Login เข้าสู่ระบบ www.wordpress.com
  27. 27. Dashboard ส่วนสาคัญของการใช้งาน
  28. 28. Dashboard ส่วนสาคัญของการใช้งาน
  29. 29. เปลี่ยนระบบภาษา  ไทย - > English  หน้าหลัก, ตั้งค่า, General, ภาษา  English - > ไทย  Dashboard, Settings, General, Language เมนูคาสั่งนี้ยังควบคุมการตั้งค่าของเว็บ Web Configuration
  30. 30. ปรับแก้ไขข้อมูลผู้ใช้/สมาชิก 1 2
  31. 31. เปลี่ยนรูปแบบเว็บ (Themes)  หน้าหลัก, รูปแบบบล็อก, Themes
  32. 32. เปลี่ยนรูปแบบเว็บ (Themes) คลิก “ใช้งาน” ธีมที่ต้องการ
  33. 33. ดูหน้าเว็บ  http://..ชื่อที่สมัคร...wordpress.com  หรือ คลิกชื่อเว็บ
  34. 34. ดูหน้าเว็บ กลับไปสู่หน้าจัดการ Dashboard ด้วยคาสั่ง ผู้ควบคุมเว็บ หรือ
  35. 35. ปรับแก้ไขกราฟิกของ Themes  บาง Themes อนุญาตให้ปรับแก้ไขกราฟิกได้  เลือกคาสั่ง หน้าหลัก, รูปแบบบล็อก, ส่วนหัว (หากมี)  จะต้องเตรียมภาพต้องข้อกาหนด หรือใช้เทคนิค Crop ภาพด้วยเครื่องมือ ของ Wordpress
  36. 36. กราฟิกของ Themes ที่ปรับเปลี่ยน
  37. 37. Widget  วิดเจ็ต (Widget) คือ  จัดการวิดเจ็ตได้ด้วยคาสั่ง โปรแกรมที่เพิ่ม หน้าหลัก, รูปแบบบล็อก, ความสามารถให้บล็อก Widgets  ลิงก์ไปที่ต่าง ๆ  แสดงสถิติเยี่ยมชม  แสดงหัวข้อเรื่อง  แสดงข่าวสารจาก twitter
  38. 38. วิดเจ็ต ลากจาก ซ้ายไปขวา  Widget จาเป็น  Meta  ค้นหา  ปฏิทิน  สถิติบล็อก  หมวดหมู่ จานวน Sidebar ขึ้นอยูกับ Themes ่ ที่เลือก
  39. 39. ประเภทเนื้อหา  Post – เรื่อง  Page – หน้า  Dynamic Content  Static Content  นาเสนอเรียงตามวันที่/เวลา  นาเสนอด้วย Menu, Widget  จัดเก็บตามวันที่/เวลา (Archives)  จัดกลุ่มตามหมวดหมู่ (Category)  จัดกลุ่มตามป้ายกากับ (Tag)  มักแสดงผลหน้าแรกของเว็บ Blog
  40. 40. ปรับแก้ไขข้อมูลเกี่ยวกับเว็บ – About  หน้าหลัก, หน้า  คลิกหน้า About เพื่อเข้าไปแก้ไขข้อมูล
  41. 41. ปรับแก้ไขข้อมูลเกี่ยวกับเว็บ – About 1) ป้อนชื่อเรื่อง 5) อัปเดต 2) ป้อนเนื้อหา 4) ระบุลาดับการแสดงผล 3) เลือกเงื่อนไข การแสดงความคิดเห็น
  42. 42. URL ที่ดีสาหรับเว็บ  Wordpress.com กาหนดให้ URL ของแต่ละเนือหาเป็นมิตรกับ ้ Search Engine – Search Engine Friendly รวมทั้งกับคน  URL Friendly จะไม่รองรับภาษาไทย  แต่ส่วนประกอบของ URL มาจากชือเรื่อง ่  หากใช้ชื่อเรืองภาษาไทย จะต้องเปลี่ยน Permalink ของเรื่องให้ ่ เป็นภาษาอังกฤษ
  43. 43. คัดลอกเนื้อหาจากแหล่งอื่นๆ  ไม่ควรคัดลอก (Copy) เนื้อหาจาก Word หรือแหล่งอืนๆ ่ มาวางใน Editor ของ Wordpress เพราะจะส่งผลให้เกิด ปัญหาการแสดงผลที่ผิดพลาด ปรับแก้ไขยาก  เพราะมี special code จากโปรแกรมต้นทางส่งมายัง Editor ของ Wordpress  หากจาเป็นต้องคัดลอกข้อมูล ให้นาข้อมูลดังกล่าวไปวาง (Paste) บน NotePad ก่อนแล้วจึงคัดลอกจาก NotePad มาวางใน Editor ของ Wordpress
  44. 44. เครื่องมือจัดการข้อความ/สื่อ
  45. 45. นาเข้ารูปภาพ # 1  รูปภาพที่นามาประกอบเนื้อหาของ Wordpress จะต้องเตรียมดังนี้  กาหนดชื่อแฟ้มภาพ (File name) ให้เป็นภาษาอังกฤษ และ/หรือผสม ตัวเลข ห้ามใช้ภาษาไทย  ฟอร์แมตภาพ  .gif สาหรับภาพวาด ภาพลายเส้น ภาพที่มีสีไม่มาก  .jpg/.png สาหรับภาพสีมาก  .png สาหรับภาพสีมากที่ต้องการพื้นโปร่งใส (Transparent)  ควรย่อภาพให้มีขนาดที่เหมาะสม และ/หรือลดความละเอียดของภาพ (Resolution) ระหว่าง 72 – 96 dpi  รูปภาพ/แบบอักษร/ข้อความไม่ควรละเมิดลิขสิทธิ์  http://openclipart.org  ค้นหาภาพจาก Google, Flickr ด้วยเงื่อนไข CreativeCommons  ระบุ Metadata ของภาพให้เหมาะสมในระดับดิจิทัล
  46. 46. ตัวอย่างการเลือกฟอร์แมตภาพที่ไม่เหมาะสม ภาพด้านซ้ายสีแตก ไม่สม่าเสมอ
  47. 47. Progressive & Interlaced รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพ การแสดงผลภาพแบบ Interlaced แบบ Progressive
  48. 48. PNG & GIF Transparent
  49. 49. ปัญหาลิขสิทธิ์ของเมืองไทย
  50. 50. (cc)
  51. 51. การสืบค้นภาพที่เป็น (cc) (cc)
  52. 52. วัน/เวลากล้องถ่ายภาพดิจิทัล/อุปกรณ์ดิจิทัล  พรบ.การกระทาความผิดทางคอมพิวเตอร์
  53. 53. Image Metadata : EXIF : IPTC
  54. 54. นาเข้ารูปภาพ # 2  จากหน้าจอสร้าง/แก้ไขเนื้อหา คลิกเมาส์ ณ ตาแหน่งที่ตองการ ้ วางภาพ คลิกปุ่ม Add an Image  คลิกเลือกภาพจากปุ่ม Browse
  55. 55. นาเข้ารูปภาพ # 3  ป้อนชื่อภาพในรายการหัวข้อ ใช้ภาษาไทยได้  ป้อนคาบรรยายภาพใน รายการคาอธิบายสลับหรือ คาขยายความ  หากต้องการให้คลิกที่ภาพ เพื่อคลิกไปยังภาพขนาดต้นฉบับ ให้คลิกปุ่ม URL ของไฟล์ แต่ถ้า ไม่ต้องการให้คลิกภาพ คลิกปุ่มไม่มี  กาหนดตาแหน่งการวางภาพ จากรายการจัดแถว  กาหนดขนาดภาพจากขนาด  คลิกปุ่มใส่เข้าในเรื่อง
  56. 56. สร้างหน้า (Page) ใหม่  หน้าหลัก, หน้า, เขียนหน้าใหม่ (หน้าใหม่)
  57. 57. การจัดการ/เขียนเรื่อง (Post)  หน้าหลัก, เรื่อง  หน้าหลัก, เรื่อง, เขียนเรืองใหม่ (เรื่องใหม่) ่
  58. 58.  ระบุชื่อเรื่อง  เขียนเรื่อง  ใส่เนื้อหาย่อในรายการ ตัดทอน  ระบุ URL อ้างอิงใน รายการ ส่ง Trackbacks ใช้ , คั่นหากมีหลาย URL  เงื่อนไขการแสดงความ คิดเห็นจากรายการ สนทนา  เลือกชื่อผู้เขียน จาก รายการ ผู้เขียน  กาหนดหมวดหมู่จาก Categories  กาหนดป้ายกากับจาก Post Tags  ระบุเงื่อนไขการเผยแพร่ จาก เผยแพร่
  59. 59. ป้ายกากับ - Tags  คาค้น  แสดงปริมาณเนื้อหา  กรองข้อมูลตามป้ายที่เลือก
  60. 60. ตัวอย่างการใส่เนื้อหา  เนื้อหาที่เป็นข้อความ  เนื้อหาพร้อมภาพ  เนื้อหาพร้อมแนบไฟล์เอกสาร  เนื้อหา Online slide จาก Slideshare  เนื้อหา Video จาก Youtube
  61. 61. Slideshare ผ่าน Wordpress  Slideshare.net เป็นแหล่งรวมสไลด์/เอกสารแหล่งใหญ่บนโลก อินเทอร์เน็ต  นา PPT, PDF, DOC ไปจัดเก็บและแปลงเป็น Online Slide, i-Paper อัตโนมัติในรูปแบบ Flash-based  ค้นสื่อจาก slideshare.net แล้วคลิกเลือกสื่อที่ต้องการ  คลิกรายการ Embed  คัดลอกคาสั่งจากรายการ Embed this presentation มาวางใน Post ผ่านโหมดการทางาน HTML
  62. 62. Code ของ Slideshare 1 2
  63. 63. Slideshare ผ่าน Wordpress 1 2
  64. 64. Slideshare ผ่าน Wordpress
  65. 65. Youtube ผ่าน Slideshare 1 2 3 4
  66. 66. การแสดงความเห็น  กรณีผู้ชมทั่วไป  ต้องป้อนข้อมูลส่วนตัว  ผลจะไม่ปรากฎทันที  กรณีสมาชิก  ใส่เฉพาะความเห็น  ความเห็นที่เผยแพร่ต้อง ผ่านการอนุมัตจากผู้ดูแลก่อน ิ
  67. 67. การอนุมัติความเห็น  จากหน้าหลัก จะปรากฎส่วนควบคุม “เนื้อเรื่อง” แสดงว่ามี 4 ความเห็น รอพิจารณา 3 ความเห็น อาจจะเป็น Spam
  68. 68. การอนุมัติความเห็น
  69. 69. สร้างลิงก์เข้าในเว็บ  หน้าหลัก, ลิงก์, Add New  ควรสร้างหมวดหมู่ลิงก์ก่อน ด้วยคาสั่งหน้าหลัก, ลิงก์, ลิงก์หมวดหมู่  การแสดงผลลิงก์ใน หน้าเว็บให้กาหนดด้วย Widgets ชื่อ ลิงก์
  70. 70. แบบสารวจ (Poll)  หน้าหลัก, โพลล์
  71. 71. เผยแพร่โพลล์  สร้างเรื่องใหม่ New Post คลิกปุ่ม Add Poll แล้ว เลือกโพลล์ที่ต้องการเผยแพร่
  72. 72. ตอบโพลล์
  73. 73. ร่วมเป็นสมาชิกกับ Blog ที่มีอยู่แล้ว  ติดต่อเจ้าของ Blog ให้เพิ่มบัญชี  Login เข้าสู่ระบบ  ป้อนข้อมูล
  74. 74. ตั้งค่าการเขียน
  75. 75. ตั้งค่า การอ่าน
  76. 76. ตั้งค่าสื่อ
  77. 77. การทางานร่วมกับ Web 2.0 อื่นๆ  ทางานผ่าน Widgets  กาหนดค่า Widgets แตกต่าง ตามบริการ Web 2.0  อาจจะต้องเป็นสมาชิก บริการ Web 2.0 ที่ต้องการก่อน
  78. 78. e-Commerce ด้วย Blog  ขายอะไรดีผ่าน Blog  ประเด็นสาคัญ  สินค้าราคาถูกกว่าท้องตลาด  อย่าลืมประยุกต์ใช้ Web 2.0  สินค้าเฉพาะกลุ่ม  สินค้า “ไม่” ยอดนิยม Tools ให้เหมาะสม หลากหลาย  สินค้าไม่ต้องการเปิดเผยตัวตน  มีปฏิสัมพันธ์กับผู้ชม ผู้ซื้อ ลูกค้า  สินค้ามีลักษณะเฉพาะตัว อย่างสม่าเสมอ  สินค้าที่มีน้าหนักเบา  กาหนดกลุ่มเป้าหมาย และ  สินค้าที่ไม่ยุ่งยากในการจัดส่ง ลักษณะเฉพาะให้ได้  สินค้าที่เล่าเรื่องได้  สินค้าที่หายาก  Do it yourself – DIY
  79. 79. แหล่งข้อมูล  http://stks.or.th/wiki  http://slideshare.net/boonlert

×