Blog ด้วย Wordpress.com

4,832 views
4,859 views

Published on

การพัฒนาเว็บไซต์ Blog ด้วย Wordpress.com

Published in: Technology
3 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
4,832
On SlideShare
0
From Embeds
0
Number of Embeds
2,638
Actions
Shares
0
Downloads
210
Comments
3
Likes
2
Embeds 0
No embeds

No notes for slide

Blog ด้วย Wordpress.com

  1. 1. การพฒนาเวบไซตในรปแบบ Blog ดวย Wordpress.com บ&ญเล)ศ อร&ณพ)บลย ศนยบร)การความรทางว)ทยาศาสตรและเทคโนโลย4 ส5านกงานพฒนาว)ทยาศาสตรและเทคโนโลย4แห7งชาต) (สวทช.) http://stks.or.th/ boonlert@nstda.or.th http://facebook.com/boonlert.aroonpiboon 1
  2. 2. บญเลศ อรณพบลย  2536 – 2551  2551 – ปVจจ&บน  NECTEC  STKS / NSTDA  เจาหนาท4ระบบคอมพ)วเตอร Q  นกว)ชาการ  ว)ทยากร ศนยฝSกอบรม  รกษาการหวหนางานพฒนาและ คอมพ)วเตอรเนคเทค บร)การสUQอสาระด)จ)ทล  รกษาการหวหนางานสนบสน&น ทางเทคน)ค  รกษาการหวหนางานว)ชาการ  รกษาการหวหนางานพฒนาสUQอ สาระด)จ)ทล  นกว)ชาการ 2
  3. 3. คลงความร KM ดวย ICT 3
  4. 4. คลงผลงานวจยระบบเป#ด 4
  5. 5. KM website 5
  6. 6. Gotoknow.org 6
  7. 7. 7
  8. 8. Wikipedia 8
  9. 9. 9
  10. 10. http://stks.or.th/botany/wiki 10
  11. 11. Web, Blog, Wiki  Web  HTML editor  HTML Generator  Macromedia Dreamweaver, MS FrontPage, Adobe GoLive  CMS – Content Management System  Joomla, Drupal, PHPNuke, Xoops  Blog - weB + Log  Wordpress, b2evolution, Wordpress MU  Wiki  MediaWiki, Dokuwiki, TWiki 11
  12. 12. KM กาวส>ความส?าเร@จ Embedded 12
  13. 13. เทคโนโลย4 2.0  เทคโนโลย4ตามแนวค)ดของการพฒนาเวบไซต 2.0 (Web 2.0)  ย&คใหม7ของการพฒนาเวบไซต  รปแบบการพฒนาเวบไซตท4Qใหความส5าคญกบ “ผใชเวบ” มากกว7า “ผพฒนา” หรUอ “เจาของเวบไซต”  แนวค)ดการพฒนาเวบท4Qใหความส5าคญกบการปฏ)สมพนธการท5างาน ร7วมกน การผสานความร7วมมUอทrงโครงสรางพUrนฐาน ระบบ ซอฟตแวร และเนUrอหาเวบ  การปรบเวบไซตจากการใหขอมลเพ4ยงทางเด4ยว เปuนการใหบร)การ และขอมลท4Q “ผใช” เขาถwงไดง7ายและร7วมสราง แกไข 13
  14. 14. Slide Share 14
  15. 15. เรBมตนกบ Web 2.0 - Blog  Blog == weB Log  Blog เวบความร7วมมUอท4Qง7าย ไม7ซบซอน  เครUQองมUอเชUQอมความสมพนธระหว7างบ&คคลไดเปuนอย7างด4  สUQอสารไดง7าย ทนใจ อน&ท)นช4วต/การงานฉบบออนไลน )  จ&ดเด7น หมวดเนUrอหาและ Tag  ม4ใหเลUอกทrงซอฟตแวรในกล&7ม Open Source, Commercial และ Free Web Hosting 15
  16. 16. เครUQองมUอท4QถกเลUอกใชประกอบการจดการความร (KM Tools) การมGสวนร>วม > (Participation) คLอ หวใจ ส?าคญ 16
  17. 17. วธGเรBมตนกบ 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/ 17
  18. 18. 18
  19. 19. 19
  20. 20. เขGยนอะไร/อย>างไร  เรUQองราวใกลตว ท4Qชอบและถนด  เข4ยนตามเป~า/จ&ดประสงคท4Qวาง  เข4ยนแบบเบาๆ ไว  เล7าเรUQอง  สร&ปการฝSกงาน  น5าเสนอภาพ พรอมเรUQองประกอบ  เกบขอมลว)ทยาน)พนธ/ รายงาน  เร4ยนรร7วมกน  จดหมายเหต&สวนบ&คคล 7  จดการความร (ส7วนบ&คคล) 20
  21. 21. http://stanglibrary.wordpress.com/ 21
  22. 22. http://stks.or.th/ling/attawfikiahschool/ 22
  23. 23. http://stks.or.th/wg/dmslib/ 23
  24. 24. http://nuttakorn2548.wordpress.com/ 24
  25. 25. http://thailandhandmadebuu.wordpress.com 25
  26. 26. Wordpress  ซอฟตแวรจดการบลอกท4ม4ใหเลUอกใชทrงท4เปuน Q Q  Free Web Hosting : www.wordpress.com  Open Source Application  www.wordpress.org  mu.wordpress.org  ท5างานไดด4กบ Google – Google Friendly  ระบบน5าเขา/เผยแพร7เนUอหาง7าย r  รองรบการผสานเทคโนโลย4กบเวบ 2.0 อUQนๆ (Mashup) 26
  27. 27. การใชบรการ Wordpress.com 27
  28. 28. 28
  29. 29. ประเด@นส?าคญการสมครสมาชก  เลUอกใชอ4เมล hotmail, yahoo mail, gmail  User name ท4Qระบ&จะตองเปuนภาษาองกฤษ ตวพ)มพเลก ม4ความยาวพอสมควร และหามใส7เครUQองหมายพ)เศษใด รวมทrงช7องว7าง  User name ท4Qระบ&คUอ  รหสผ7าน ควรม4ความยาวไม7นอยกว7า 8 ตวอกษร และควร ผสมอกขระพ)เศษสก 1 ตวเช7น # @ $ %  จะตองจ5ารหสผ7านใหได รหสผ7าน ท4ระบ&คUอ Q  เมUQอสมครผ7านแลว จะตองเชคเมลท4ใชสมคร เพUQอยUนยน Q การสมครดวยท&กครrง 29
  30. 30. ขอแนะน?าการสรางรหสผ>าน  ก5าหนดเกณฑการสรางรหสผ7านใหตนเอง  ใหความส5าคญกบการสรางรหสผ7าน  เช7น ก5าหนดอกขระพ)เศษใหสระ ป…ดทายดวย #  A $  E + kampaengsaen  I ^  O @  U ! k$mp$+ngs$+n# 30
  31. 31. ก?าหนดชLBอ Blog เลUอกภาษาไทย 31
  32. 32. ยLนยนการสมคร 32
  33. 33. ยLนยนการสมคร เป…ดเมลแลวคล)ก Link น4ดวย r 33
  34. 34. URL ของเว@บไซต Wordpress ของตนเอง  http://บญช4ท4Qสมคร.wordpress.com  เช7น เวบของครนอง - krungnong  URL คUอ http://krungnong.wordpress.com 34
  35. 35. โครงสรางของหนาเว@บ ชUQอเวบไซต สโลแกนเวบ เมนจาก Pages เนUrอเรUอง (Post) Q กล&มว)ตเจต 7 35
  36. 36. Login เขาส>ระบบ www.wordpress.com 36
  37. 37. Dashboard ส>วนส?าคญของการใชงาน 37
  38. 38. Dashboard ส>วนส?าคญของการใชงาน 38
  39. 39. เปลGยนระบบภาษา B  ไทย - > English  หนาหลก, ตrงค7า, General, ภาษา  English - > ไทย  Dashboard, Settings, General, Language 39
  40. 40. 40
  41. 41. ปรบแกไขขอมลผใช/สมาชก 1 2 41
  42. 42. 42
  43. 43. ดหนาเว@บ  http://..ชUอท4Qสมคร...wordpress.com Q  หรUอ คล)กชUอเวบ Q 43
  44. 44. ดหนาเว@บ กลบไปส7หนาจดการ Dashboard ดวยค5าสQง ผควบค&มเวบ หรUอ 44
  45. 45. ประเภทเนLcอหา  Post – เรUQอง  Page – หนา  Dynamic Content  Static Content  น5าเสนอเร4ยงตามวนท4Q/เวลา  น5าเสนอดวย Menu, Widget  จดเกบตามวนท4Q/เวลา (Archives)  จดกล&7มตามหมวดหม7 (Category)  จดกล&7มตามป~ายก5ากบ (Tag)  มกแสดงผลหนาแรกของเวบ Blog 45
  46. 46. ปรบแกไขขอมลเกGยวกบเว@บ – About B  หนาหลก, หนา  คล)กหนา About เพUQอเขาไปแกไขขอมล 46
  47. 47. ปรบแกไขขอมลเกGยวกบเว@บ – About B 1) ป~อนชUQอเรUQอง 5) อปเดต 2) ป~อนเนUrอหา 4) ระบ&ล5าดบการแสดงผล 3) เลUอกเงUQอนไข การแสดงความค)ดเหน 47
  48. 48. เครLBองมLอจดการขอความ/สLBอ 48
  49. 49. คดลอกเนLcอหาจากแหล>งอLBนๆ  ไม7ควรคดลอก (Copy) เนUrอหาจาก Word หรUอแหล7งอUQนๆ มาวางใน Editor ของ Wordpress เพราะจะส7งผลใหเก)ด ปVญหาการแสดงผลท4Qผ)ดพลาด ปรบแกไขยาก  เพราะม4 special code จากโปรแกรมตนทางส7งมายง Editor ของ Wordpress  หากจ5าเปuนตองคดลอกขอมล ใหน5าขอมลดงกล7าวไปวาง (Paste) บน NotePad ก7อนแลวจwงคดลอกจาก NotePad มาวางใน Editor ของ Wordpress 49
  50. 50. URL ทGBดGส?าหรบเว@บ  Wordpress.com ก5าหนดให URL ของแต7ละเนUอหาเปuนม)ตรกบ r Search Engine – Search Engine Friendly รวมทrงกบคน  URL Friendly จะไม7รองรบภาษาไทย  แต7ส7วนประกอบของ URL มาจากชUอเรUQอง Q  หากใชชUQอเรUQองภาษาไทย จะตองเปล4ยน Permalink ของเรUQองให Q เปuนภาษาองกฤษ 50
  51. 51. สรางหนา (Page) ใหม>  หนาหลก, หนา, เข4ยนหนาใหม7 (หนาใหม7) 51
  52. 52. ปรบแกไขกราฟ#กของ Themes  บาง Themes อน&ญาตใหปรบแกไขกราฟ…กได  เลUอกค5าสQง หนาหลก, รปแบบบลอก, ส7วนหว (หากม4)  จะตองเตร4ยมภาพตองขอก5าหนด หรUอใชเทคน)ค Crop ภาพดวยเครUQองมUอ ของ Wordpress 52
  53. 53. 53
  54. 54. กราฟ#กของ Themes ทGปรบเปลGBยน B 54
  55. 55. เปล4Qยนรปแบบเวบ (Themes)  หนาหลก, รปแบบบลอก, Themes 55
  56. 56. เปล4Qยนรปแบบเวบ (Themes) คล)ก “ใชงาน” ธ4มท4Qตองการ 56
  57. 57. Widget  ว)ดเจต (Widget) คUอ  จดการว)ดเจตไดดวยค5าสQง โปรแกรมท4Qเพ)Qมความ หนาหลก, รปแบบบลอก, สามารถใหบลอก Widgets  ล)งกไปท4Qต7าง ๆ  แสดงสถ)ตเย4Qยมชม )  แสดงหวขอเรUQอง  แสดงข7าวสารจาก twitter 57
  58. 58. ว)ดเจต ลากจาก ซายไปขวา  Widget จ5าเปuน  Meta  คนหา  ปฏ)ทน )  สถ)ตบลอก )  หมวดหม7 จ5านวน Sidebar ขwrนอย7กบ Themes ท4QเลUอก 58
  59. 59. น?าเขารปภาพ # 1  รปภาพท4Qน5ามาประกอบเนUrอหาของ Wordpress จะตองเตร4ยมดงน4r  ก5าหนดชUQอแฟ~มภาพ (File name) ใหเปuนภาษาองกฤษ และ/หรUอผสม ตวเลข หามใชภาษาไทย  ฟอรแมตภาพ  .gif ส5าหรบภาพวาด ภาพลายเสน ภาพท4ม4ส4ไม7มาก Q  .jpg/.png ส5าหรบภาพส4มาก  .png ส5าหรบภาพส4มากท4ตองการพUrนโปร7งใส (Transparent) Q  ควรย7อภาพใหม4ขนาดท4Qเหมาะสม และ/หรUอลดความละเอ4ยดของภาพ (Resolution) ระหว7าง 72 – 96 dpi  รปภาพ/แบบอกษร/ขอความไม7ควรละเม)ดล)ขส)ทธ)•  http://openclipart.org  คนหาภาพจาก Google, Flickr ดวยเงUQอนไข CreativeCommons  ระบ& Metadata ของภาพใหเหมาะสมในระดบด)จ)ทล 59
  60. 60. ตวอย7างการเลUอกฟอรแมตภาพท4ไม7เหมาะสม Q ภาพดานซายส4แตก ไม7สมQ5าเสมอ 60
  61. 61. Progressive & Interlaced รปภาพทแสดงในโหมดปกต การแสดงผลภาพ การแสดงผลภาพแบบ Interlaced แบบ Progressive 61
  62. 62. PNG & GIF Transparent 62
  63. 63. ปnญหาลขสทธoของเมLองไทย  Software, Content, Image/Clipart, Font 63
  64. 64. 64
  65. 65. (cc) 65
  66. 66. การสLบคนภาพทGBเปpน (cc) (cc) 66
  67. 67. ภาพทGBปลอดภย  www.openclipart.org  ภาพท4Qระบ&สทธ)•การใชท4Qชดเจน และน5ามาใชอย7าง ) เหมาะสม  ภาพท4Qสรางสรรคเอง 67
  68. 68. วน/เวลากลองถ>ายภาพดจทล/อปกรณดจทล  พรบ.การกระท5าความผ)ดทางคอมพ)วเตอร 68
  69. 69. 69
  70. 70. Image Metadata : EXIF : IPTC 70
  71. 71. 71
  72. 72. น?าเขารปภาพ # 2  จากหนาจอสราง/แกไขเนUrอหา คล)กเมาส ณ ต5าแหน7งท4Qตองการ วางภาพ คล)กป&•ม Add an Image  คล)กเลUอกภาพจากป&•ม Browse 72
  73. 73. น?าเขารปภาพ # 3  ป~อนชUQอภาพในรายการหวขอ ใชภาษาไทยได  ป~อนค5าบรรยายภาพใน รายการค5าอธ)บายสลบหรUอ ค5าขยายความ  หากตองการใหคล)กท4Qภาพ เพUอคล)กไปยงภาพขนาดตนฉบบ Q ใหคล)กป&•ม URL ของไฟล แต7ถา ไม7ตองการใหคล)กภาพ คล)กป&•มไม7ม4  ก5าหนดต5าแหน7งการวางภาพ จากรายการจดแถว  ก5าหนดขนาดภาพจากขนาด  คล)กป&•มใส7เขาในเรUQอง 73
  74. 74. การจดการ/เขGยนเรLBอง (Post)  หนาหลก, เรUQอง  หนาหลก, เรUQอง, เข4ยนเรUQองใหม7 (เรUQองใหม7) 74
  75. 75.  ระบ&ชUQอเรUQอง  เข4ยนเรUQอง  ใส7เนUrอหาย7อในรายการ ตดทอน  ระบ& URL อางอ)งใน รายการ ส7ง Trackbacks ใช , คQนหากม4หลาย URL  เงUQอนไขการแสดงความค)ด เหนจากรายการ สนทนา  เลUอกชUQอผเข4ยน จาก รายการ ผเข4ยน  ก5าหนดหมวดหม7จาก Categories  ก5าหนดป~ายก5ากบจาก Post Tags  ระบ&เงUQอนไขการเผยแพร7 จาก เผยแพร7 75
  76. 76. ปuายก?ากบ - Tags  ค5าคน  แสดงปร)มาณเนUอหา r  กรองขอมลตามป~ายท4QเลUอก 76
  77. 77. ตวอย>างการใส>เนLcอหา  เนUอหาท4Qเปuนขอความ r  เนUอหาพรอมภาพ r  เนUอหาพรอมแนบไฟลเอกสาร r  เนUอหา Online slide จาก Slideshare r  เนUอหา Video จาก Youtube r 77
  78. 78. Slideshare ผ>าน Wordpress  Slideshare.net เปuนแหล7งรวมสไลด/เอกสารแหล7งใหญ7บนโลก อ)นเทอรเนต  น5า PPT, PDF, DOC ไปจดเกบและแปลงเปuน Online Slide, i-Paper อตโนมต)ในรปแบบ Flash-based  คนสUอจาก slideshare.net แลวคล)กเลUอกสUอท4Qตองการ Q Q  คล)กรายการ Embed  คดลอกค5าสQงจากรายการ Embed this presentation มาวางใน Post ผ7านโหมดการท5างาน HTML 78
  79. 79. Code ของ Slideshare 1 2 79
  80. 80. Slideshare ผ>าน Wordpress 1 2 80
  81. 81. Slideshare ผ>าน Wordpress 1 81
  82. 82. Youtube ผ>าน Slideshare 1 2 3 4 82
  83. 83. Youtube ผ>าน Slideshare 1 2 83
  84. 84. การแสดงความเห@น  กรณ4ผชมทQวไป  ตองป~อนขอมลส7วนตว  ผลจะไม7ปรากฎทนท4  กรณ4สมาช)ก  ใส7เฉพาะความเหน  ความเหนท4Qเผยแพร7ตอง ผ7านการอน&มต)จากผดแลก7อน 84
  85. 85. การอนมตความเห@น  จากหนาหลก จะปรากฎส7วนควบค&ม “เนUrอเรUQอง” แสดงว7าม4 4 ความเหน รอพ)จารณา 3 ความเหน อาจจะเปuน Spam 85
  86. 86. การอนมตความเห@น 86
  87. 87. สรางลงกเขาในเว@บ  หนาหลก, ล)งก, Add New  ควรสรางหมวดหม7ล)งกก7อน ดวยค5าสQงหนาหลก, ล)งก, ล)งกหมวดหม7  การแสดงผลล)งกใน หนาเวบใหก5าหนดดวย Widgets ชUQอ ล)งก 87
  88. 88. แบบส?ารวจ (Poll)  หนาหลก, โพลล 88
  89. 89. เผยแพร>โพลล  สรางเรUQองใหม7 New Post คล)กป&•ม Add Poll แลว เลUอกโพลลท4Qตองการเผยแพร7 89
  90. 90. ตอบโพลล 90
  91. 91. ร>วมเปpนสมาชกกบ Blog ทGBมGอย>แลว  ต)ดต7อเจาของ Blog ใหเพ)มบญช4 Q  Login เขาส7ระบบ  ป~อนขอมล 91
  92. 92. ตcงค>าการเขGยน 92
  93. 93. ตcงค>า การอ>าน 93
  94. 94. 94
  95. 95. 95
  96. 96. ตcงค>าสLอ B 96
  97. 97. การท?างานร>วมกบ Web 2.0 อLBนๆ  ท5างานผ7าน Widgets  ก5าหนดค7า Widgets แตกต7าง ตามบร)การ Web 2.0  อาจจะตองเปuนสมาช)ก บร)การ Web 2.0 ท4Qตองการก7อน 97
  98. 98. เทคนคน>าร # 1  ใช Wordpress เพUอบนทwกค5าพด ขอความ Q เนUอหา ภาพ สUQอรปแบบต7างๆ เพUQอใชเปuน r คลงขอมลส7วนบ&คคล หรUอเพUอใชประกอบ Q การท5าว)จย การท5ารายงาน พรอมระบ&แหล7งท4Qมา ดวย Zotero  ควรล)งกแหล7งท4Qมา Online ผ7าน Trackbacks 98
  99. 99. เทคนคน>าร # 2 – Post via e-Mail  ก5าหนด e-Mail Address ของ Wordpress.com  หนาหลก, บลอกของฉน  คล)ก “ใชงาน” จากรายการ โพสตผ7านอ4เมล 1 99
  100. 100. เทคนคน>าร # 3  ปรบแกไขค7า Timestamps ของแต7ละเรUQองใหถก ตองตามจร)ง  สรางคลงจดหมายเหต&ส7วนตว  น5าเขาเนUrอหาในอด4ต  ท5าตารางก)จกรรมในอนาคต 100
  101. 101. เทคนคน>าร # 4  ศwกษา/เลUอกใช Shortcode ของ Wordpress เพUอการใชงานท4Qเตมประส)ทธ)ภาพ Q  http://en.support.wordpress.com/shortcodes/ 101
  102. 102. แหล>งขอมล  http://stks.or.th/wiki  http://slideshare.net/boonlert 102

×