2010012 Wordpress Com Boonkiat

1,398 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,398
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×