blog ด้วย wordpress.com

1

การพ�ฒนาเวบไซต�ในร�ปแบบ การพ�ฒนาเวบไซต�ในร�ปแบบ Blog Blog ด�วย ด�วย Wordpress.com Wordpress.com

บ&ญเล)ศ อร&ณพ)บ�ลย�บ&ญเล)ศ อร&ณพ)บ�ลย�ศ�นย�บร)การความร��ทางว)ทยาศาสตร�และเทคโนโลย4ศ�นย�บร)การความร��ทางว)ทยาศาสตร�และเทคโนโลย4

ส5าน�กงานพ�ฒนาว)ทยาศาสตร�และเทคโนโลย4แห7งชาต) ส5าน�กงานพ�ฒนาว)ทยาศาสตร�และเทคโนโลย4แห7งชาต) ((สวทชสวทช.).)http://stks.or.th/ [email protected]://stks.or.th/ [email protected]

http://facebook.com/boonlert.aroonpiboonhttp://facebook.com/boonlert.aroonpiboon

2

บ�ญเล�ศ อร�ณพ�บ ลย�บ�ญเล�ศ อร�ณพ�บ ลย�

2536 – 2551 NECTEC

เจ�าหน�าท4Qระบบคอมพ)วเตอร� ว)ทยากร ศ�นย�ฝSกอบรม

คอมพ)วเตอร�เนคเทค ร�กษาการห�วหน�างานสน�บสน&น

ทางเทคน)ค ร�กษาการห�วหน�างานว)ชาการ ร�กษาการห�วหน�างานพ�ฒนาสUQอ

สาระด)จ)ท�ล น�กว)ชาการ

2551 – ปVจจ&บ�น STKS / NSTDA

น�กว)ชาการ ร�กษาการห�วหน�างานพ�ฒนาและ

บร)การสUQอสาระด)จ)ท�ล

3

คล�งความร � คล�งความร � KM KM ด�วย ด�วย ICTICT

4

คล�งผลงานว�จ�ยระบบเป#ดคล�งผลงานว�จ�ยระบบเป#ด

5

KM websiteKM website

6

Gotoknow.orgGotoknow.org

8

WikipediaWikipedia

10

http://stks.or.th/botany/wikihttp://stks.or.th/botany/wiki

11

Web, Blog, WikiWeb, 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

12

KM KM ก�าวส >ความส?าเร@จก�าวส >ความส?าเร@จ

EmbeddedEmbedded

13

เทคโนโลย4 เทคโนโลย4 2.02.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วมสร�าง แก�ไข

14

Slide ShareSlide Share

15

เร�Bมต�นก�บ เร�Bมต�นก�บ Web 2.0 - BlogWeb 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

16

การมGส>วนร>วม การมGส>วนร>วม (Participation) (Participation)

คLอ ห�วใจ ส?าค�ญคLอ ห�วใจ ส?าค�ญ

เครUQองมUอท4Qถ�กเลUอกใช�ประกอบการจ�ดการความร��(KM Tools)

17

ว�ธGเร�Bมต�นก�บ ว�ธGเร�Bมต�นก�บ Web 2.0 - BlogWeb 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/

20

เขGยนอะไรเขGยนอะไร//อย>างไรอย>างไร

เรUQองราวใกล�ต�ว ท4Qชอบและถน�ด เข4ยนแบบเบาๆ เล7าเรUQอง น5าเสนอภาพ พร�อมเรUQองประกอบ เร4ยนร��ร7วมก�น

เข4ยนตามเป~า/จ&ดประสงค�ท4Qวางไว� สร&ปการฝSกงาน เกบข�อม�ลว)ทยาน)พนธ�/

รายงาน จดหมายเหต&ส7วนบ&คคล จ�ดการความร�� (ส7วนบ&คคล)

21

httphttp://://stanglibrarystanglibrary..wordpresswordpress..comcom//

22

httphttp://://stksstks..oror..thth//lingling//attawfikiahschoolattawfikiahschool//

23

httphttp://://stksstks..oror..thth//wgwg//dmslibdmslib//

24

httphttp://://nuttakorn2548nuttakorn2548..wordpresswordpress..comcom//

25

httphttp://://thailandhandmadebuuthailandhandmadebuu..wordpresswordpress..comcom

26

WordpressWordpress

ซอฟต�แวร�จ�ดการบลอกท4Qม4ให�เลUอกใช�ท�rงท4Qเปuน Free Web Hosting : www.wordpress.com Open Source Application

www.wordpress.org mu.wordpress.org

ท5างานได�ด4ก�บ Google – Google Friendly ระบบน5าเข�า/เผยแพร7เนUrอหาง7าย รองร�บการผสานเทคโนโลย4ก�บเวบ 2.0 อUQนๆ (Mashup)

27

การใช�บร�การ การใช�บร�การ Wordpress.comWordpress.com

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าน ท4Qระบ&คUอ เมUQอสม�ครผ7านแล�ว จะต�องเชคเมล�ท4Qใช�สม�คร เพUQอยUนย�น

การสม�ครด�วยท&กคร�rง

30

ข�อแนะน?าการสร�างรห�สผ>านข�อแนะน?าการสร�างรห�สผ>าน

ก5าหนดเกณฑ�การสร�างรห�สผ7านให�ตนเอง ให�ความส5าค�ญก�บการสร�างรห�สผ7าน

เช7น ก5าหนดอ�กขระพ)เศษให�สระ ป�ดท�ายด�วย # A $ E + I ^ O @ U !

kampaengsaen

k$mp$+ngs$+n#

31

ก?าหนดชLBอ ก?าหนดชLBอ BlogBlog

เลUอกภาษาไทย

32

ยLนย�นการสม�ครยLนย�นการสม�คร

33

ยLนย�นการสม�ครยLนย�นการสม�คร

เป�ดเมล�แล�วคล)ก Link น4rด�วย

34

URL URL ของเว@บไซต� ของเว@บไซต� Wordpress Wordpress ของตนเองของตนเอง

http://บ�ญช4ท4Qสม�คร.wordpress.com เช7น เวบของคร�น�อง - krungnong URL คUอ

http://krungnong.wordpress.com

35

ชUQอเวบไซต� สโลแกนเวบ

เมน�จาก Pages

เนUrอเรUQอง (Post)

กล&7มว)ตเจต

โครงสร�างของหน�าเว@บโครงสร�างของหน�าเว@บ

36

Login Login เข�าส >ระบบ เข�าส >ระบบ www.wordpress.comwww.wordpress.com

37

Dashboard Dashboard ส>วนส?าค�ญของการใช�งานส>วนส?าค�ญของการใช�งาน

38

Dashboard Dashboard ส>วนส?าค�ญของการใช�งานส>วนส?าค�ญของการใช�งาน

39

เปลGBยนระบบภาษาเปลGBยนระบบภาษา

ไทย - > English หน�าหล�ก, ต�rงค7า, General, ภาษา

English - > ไทย Dashboard, Settings, General, Language

41

ปร�บแก�ไขข�อม ลผ �ใช�ปร�บแก�ไขข�อม ลผ �ใช�//สมาช�กสมาช�ก

1

2

43

ด หน�าเว@บด หน�าเว@บ

http://..ชUQอท4Qสม�คร...wordpress.com หรUอ คล)กชUQอเวบ

44

ด หน�าเว@บด หน�าเว@บ

กล�บไปส�7หน�าจ�ดการ Dashboard ด�วยค5าส�Qง ผ��ควบค&มเวบหรUอ

45

ประเภทเนLcอหาประเภทเนLcอหา

Post – เรUQอง Dynamic Content น5าเสนอเร4ยงตามว�นท4Q/เวลา จ�ดเกบตามว�นท4Q/เวลา

(Archives) จ�ดกล&7มตามหมวดหม�7

(Category) จ�ดกล&7มตามป~ายก5าก�บ (Tag)

ม�กแสดงผลหน�าแรกของเวบ Blog

Page – หน�า Static Content น5าเสนอด�วย Menu, Widget

46

ปร�บแก�ไขข�อม ลเกGBยวก�บเว@บ ปร�บแก�ไขข�อม ลเกGBยวก�บเว@บ – – AboutAbout

หน�าหล�ก, หน�า

คล)กหน�า About เพUQอเข�าไปแก�ไขข�อม�ล

47

ปร�บแก�ไขข�อม ลเกGBยวก�บเว@บ ปร�บแก�ไขข�อม ลเกGBยวก�บเว@บ – – AboutAbout

1) ป~อนชUQอเรUQอง

2) ป~อนเนUrอหา

3) เลUอกเงUQอนไขการแสดงความค)ดเหน

4) ระบ&ล5าด�บการแสดงผล

5) อ�ปเดต

48

เครLBองมLอจ�ดการข�อความเครLBองมLอจ�ดการข�อความ//สLBอสLBอ

49

ค�ดลอกเนLcอหาจากแหล>งอLBนๆค�ดลอกเน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

50

URL URL ทGBดGส?าหร�บเว@บทGBดGส?าหร�บเว@บ

Wordpress.com ก5าหนดให� URL ของแต7ละเนUrอหาเปuนม)ตรก�บ Search Engine – Search Engine Friendly รวมท�rงก�บคน

URL Friendly จะไม7รองร�บภาษาไทย แต7ส7วนประกอบของ URL มาจากชUQอเรUQอง หากใช�ชUQอเรUQองภาษาไทย จะต�องเปล4Qยน Permalink ของเรUQองให�

เปuนภาษาอ�งกฤษ

51

สร�างหน�า สร�างหน�า (Page) (Page) ใหม>ใหม> หน�าหล�ก, หน�า, เข4ยนหน�าใหม7 (หน�าใหม7)

52

ปร�บแก�ไขกราฟ#กของ ปร�บแก�ไขกราฟ#กของ ThemesThemes

บาง Themes อน&ญาตให�ปร�บแก�ไขกราฟ�กได� เลUอกค5าส�Qง หน�าหล�ก, ร�ปแบบบลอก, ส7วนห�ว (หากม4)

จะต�องเตร4ยมภาพต�องข�อก5าหนด หรUอใช�เทคน)ค Crop ภาพด�วยเครUQองมUอของ Wordpress

54

กราฟ#กของ กราฟ#กของ Themes Themes ทGBปร�บเปลGBยนทGBปร�บเปลGBยน

55

เปล4Qยนร�ปแบบเวบ เปล4Qยนร�ปแบบเวบ (Themes)(Themes)

หน�าหล�ก, ร�ปแบบบลอก, Themes

56

เปล4Qยนร�ปแบบเวบ เปล4Qยนร�ปแบบเวบ (Themes)(Themes)

คล)ก “ใช�งาน” ธ4มท4Qต�องการ

57

WidgetWidget

ว)ดเจต (Widget) คUอ โปรแกรมท4Qเพ)Qมความสามารถให�บลอก ล)งก�ไปท4Qต7าง ๆ แสดงสถ)ต)เย4Qยมชม แสดงห�วข�อเรUQอง แสดงข7าวสารจาก twitter

จ�ดการว)ดเจตได�ด�วยค5าส�Qง หน�าหล�ก, ร�ปแบบบลอก, Widgets

58

Widget จ5าเปuน Meta ค�นหา ปฏ)ท)น สถ)ต)บลอก หมวดหม�7

ว)ดเจตว)ดเจตลากจาก

ซ�ายไปขวา

จ5านวน Sidebarขwrนอย�7ก�บ Themes

ท4QเลUอก

59

น?าเข�าร ปภาพ น?าเข�าร ปภาพ # 1# 1

ร�ปภาพท4Qน5ามาประกอบเนUrอหาของ Wordpress จะต�องเตร4ยมด�งน4r ก5าหนดชUQอแฟ~มภาพ (File name) ให�เปuนภาษาอ�งกฤษ และ/หรUอผสม

ต�วเลข ห�ามใช�ภาษาไทย ฟอร�แมตภาพ

.gif ส5าหร�บภาพวาด ภาพลายเส�น ภาพท4Qม4ส4ไม7มาก .jpg/.png ส5าหร�บภาพส4มาก .png ส5าหร�บภาพส4มากท4Qต�องการพUrนโปร7งใส (Transparent)

ควรย7อภาพให�ม4ขนาดท4Qเหมาะสม และ/หรUอลดความละเอ4ยดของภาพ (Resolution) ระหว7าง 72 – 96 dpi

ร�ปภาพ/แบบอ�กษร/ข�อความไม7ควรละเม)ดล)ขส)ทธ)� http://openclipart.org ค�นหาภาพจาก Google, Flickr ด�วยเงUQอนไข CreativeCommons

ระบ& Metadata ของภาพให�เหมาะสมในระด�บด)จ)ท�ล

60

ต�วอย7างการเลUอกฟอร�แมตภาพท4Qไม7เหมาะสมภาพด�านซ�ายส4แตก ไม7สมQ5าเสมอ

61

Progressive & InterlacedProgressive & Interlaced

ร�ปภาพท�แสดงในโหมดปกต�

การแสดงผลภาพแบบ Interlacedการแสดงผลภาพแบบ Progressive

62

PNG & GIF TransparentPNG & GIF Transparent

63

ปnญหาล�ขส�ทธ�oของเมLองไทยปnญหาล�ขส�ทธ�oของเมLองไทย

Software, Content, Image/Clipart, Font

65

(cc)(cc)

66

การสLบค�นภาพทGBเปpน การสLบค�นภาพทGBเปpน (cc)(cc)

(cc)

67

ภาพทGBปลอดภ�ยภาพทGBปลอดภ�ย

www.openclipart.org ภาพท4Qระบ&ส)ทธ)�การใช�ท4Qช�ดเจน และน5ามาใช�อย7าง

เหมาะสม ภาพท4Qสร�างสรรค�เอง

68

ว�นว�น//เวลากล�องถ>ายภาพด�จ�ท�ลเวลากล�องถ>ายภาพด�จ�ท�ล//อ�ปกรณ�ด�จ�ท�ลอ�ปกรณ�ด�จ�ท�ล

พรบ.การกระท5าความผ)ดทางคอมพ)วเตอร�

70

Image Image MetadataMetadata: EXIF: EXIF: IPTC: IPTC

72


จากหน�าจอสร�าง/แก�ไขเนUrอหา คล)กเมาส� ณ ต5าแหน7งท4Qต�องการวางภาพ คล)กป&�ม Add an Image

คล)กเลUอกภาพจากป&�ม Browse

73

ป~อนชUQอภาพในรายการห�วข�อใช�ภาษาไทยได�

ป~อนค5าบรรยายภาพในรายการค5าอธ)บายสล�บหรUอค5าขยายความ

หากต�องการให�คล)กท4QภาพเพUQอคล)กไปย�งภาพขนาดต�นฉบ�บ ให�คล)กป&�ม URL ของไฟล� แต7ถ�าไม7ต�องการให�คล)กภาพ คล)กป&�มไม7ม4

ก5าหนดต5าแหน7งการวางภาพจากรายการจ�ดแถว

ก5าหนดขนาดภาพจากขนาด คล)กป&�มใส7เข�าในเรUQอง


74

การจ�ดการการจ�ดการ//เขGยนเรLBอง เขGยนเรLBอง (Post)(Post)

หน�าหล�ก, เรUQอง

หน�าหล�ก, เรUQอง, เข4ยนเรUQองใหม7 (เรUQองใหม7)

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

76

ปuายก?าก�บ ปuายก?าก�บ - Tags- Tags

ค5าค�น แสดงปร)มาณเนUrอหา กรองข�อม�ลตามป~ายท4QเลUอก

77

ต�วอย>างการใส>เนLcอหาต�วอย>างการใส>เนLcอหา

เนUrอหาท4Qเปuนข�อความ เนUrอหาพร�อมภาพ เนUrอหาพร�อมแนบไฟล�เอกสาร เนUrอหา Online slide จาก Slideshare เนUrอหา Video จาก Youtube

78

Slideshare Slideshare ผ>าน ผ>าน WordpressWordpress

Slideshare.net เปuนแหล7งรวมสไลด�/เอกสารแหล7งใหญ7บนโลกอ)นเทอร�เนต น5า PPT, PDF, DOC ไปจ�ดเกบและแปลงเปuน Online Slide,

i-Paper อ�ตโนม�ต)ในร�ปแบบ Flash-based ค�นสUQอจาก slideshare.net แล�วคล)กเลUอกสUQอท4Qต�องการ คล)กรายการ Embed ค�ดลอกค5าส�Qงจากรายการ Embed this presentation มาวางใน

Post ผ7านโหมดการท5างาน HTML

79

Code Code ของ ของ SlideshareSlideshare

1

2

80


1

2

81


1

82

Youtube Youtube ผ>าน ผ>าน SlideshareSlideshare

1

2

3

4

83

Youtube Youtube ผ>าน ผ>าน SlideshareSlideshare

1

2

84

การแสดงความเห@นการแสดงความเห@น

กรณ4ผ��ชมท�Qวไป ต�องป~อนข�อม�ลส7วนต�ว ผลจะไม7ปรากฎท�นท4

กรณ4สมาช)ก ใส7เฉพาะความเหน

ความเหนท4Qเผยแพร7ต�องผ7านการอน&ม�ต)จากผ��ด�แลก7อน

85

การอน�ม�ต�ความเห@นการอน�ม�ต�ความเห@น

จากหน�าหล�ก จะปรากฎส7วนควบค&ม “เนUrอเรUQอง”

แสดงว7าม4 4 ความเหนรอพ)จารณา3 ความเหน

อาจจะเปuน Spam

86

การอน�ม�ต�ความเห@นการอน�ม�ต�ความเห@น

87

สร�างล�งก�เข�าในเว@บสร�างล�งก�เข�าในเว@บ

หน�าหล�ก, ล)งก�, Add New ควรสร�างหมวดหม�7ล)งก�ก7อน

ด�วยค5าส�Qงหน�าหล�ก, ล)งก�, ล)งก�หมวดหม�7

การแสดงผลล)งก�ในหน�าเวบให�ก5าหนดด�วย Widgets ชUQอ ล)งก�

88

แบบส?ารวจ แบบส?ารวจ (Poll)(Poll)

หน�าหล�ก, โพลล�

89

เผยแพร>โพลล�เผยแพร>โพลล�

สร�างเรUQองใหม7 New Post คล)กป&�ม Add Poll แล�วเลUอกโพลล�ท4Qต�องการเผยแพร7

90

ตอบโพลล�ตอบโพลล�

91

ร>วมเปpนสมาช�กก�บ ร>วมเปpนสมาช�กก�บ Blog Blog ทGBมGอย >แล�วทGBมGอย >แล�ว

ต)ดต7อเจ�าของ Blog ให�เพ)Qมบ�ญช4 Login เข�าส�7ระบบ ป~อนข�อม�ล

92

ต�cงค>าการเขGยนต�cงค>าการเขGยน

93

ต�cงค>าต�cงค>าการอ>านการอ>าน

96

ต�cงค>าสLBอต�cงค>าสLBอ

97

การท?างานร>วมก�บ การท?างานร>วมก�บ Web 2.0 Web 2.0 อLBนๆอLBนๆ

ท5างานผ7าน Widgets ก5าหนดค7า Widgets แตกต7าง

ตามบร)การ Web 2.0 อาจจะต�องเปuนสมาช)ก

บร)การ Web 2.0 ท4Qต�องการก7อน

98

เทคน�คน>าร � เทคน�คน>าร � # 1# 1

ใช� Wordpress เพUQอบ�นทwกค5าพ�ด ข�อความ เนUrอหา ภาพ สUQอร�ปแบบต7างๆ เพUQอใช�เปuนคล�งข�อม�ลส7วนบ&คคล หรUอเพUQอใช�ประกอบการท5าว)จ�ย การท5ารายงาน พร�อมระบ&แหล7งท4Qมาด�วย Zotero

ควรล)งก�แหล7งท4Qมา Online ผ7าน Trackbacks

99

เทคน�คน>าร � เทคน�คน>าร � # 2 – # 2 – Post via e-MailPost via e-Mail

ก5าหนด e-Mail Address ของ Wordpress.com หน�าหล�ก, บลอกของฉ�น คล)ก “ใช�งาน” จากรายการ โพสต�ผ7านอ4เมล

1

100


ปร�บแก�ไขค7า Timestamps ของแต7ละเรUQองให�ถ�กต�องตามจร)ง สร�างคล�งจดหมายเหต&ส7วนต�ว น5าเข�าเนUrอหาในอด4ต ท5าตารางก)จกรรมในอนาคต

101


ศwกษา/เลUอกใช� Shortcode ของ Wordpress เพUQอการใช�งานท4Qเตมประส)ทธ)ภาพ http://en.support.wordpress.com/shortcodes/

102

แหล>งข�อม ลแหล>งข�อม ล

http://stks.or.th/wiki http://slideshare.net/boonlert

blog ด้วย wordpress.com

Technology