More Related Content Similar to Blog ด้วย Wordpress.com (20) More from Boonlert Aroonpiboon (20) Blog ด้วย Wordpress.com1. การพฒนาเวบไซตในรปแบบ
Blog ดวย Wordpress.com
บ&ญเล)ศ อร&ณพ)บลย
ศนยบร)การความรทางว)ทยาศาสตรและเทคโนโลย4
ส5านกงานพฒนาว)ทยาศาสตรและเทคโนโลย4แห7งชาต) (สวทช.)
http://stks.or.th/ boonlert@nstda.or.th
http://facebook.com/boonlert.aroonpiboon
1
2. บญเลศ อรณพบลย
2536 – 2551 2551 – ปVจจ&บน
NECTEC STKS / NSTDA
เจาหนาท4ระบบคอมพ)วเตอร
Q นกว)ชาการ
ว)ทยากร ศนยฝSกอบรม รกษาการหวหนางานพฒนาและ
คอมพ)วเตอรเนคเทค บร)การสUQอสาระด)จ)ทล
รกษาการหวหนางานสนบสน&น
ทางเทคน)ค
รกษาการหวหนางานว)ชาการ
รกษาการหวหนางานพฒนาสUQอ
สาระด)จ)ทล
นกว)ชาการ
2
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
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
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
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
20. เขGยนอะไร/อย>างไร
เรUQองราวใกลตว ท4Qชอบและถนด เข4ยนตามเป~า/จ&ดประสงคท4Qวาง
เข4ยนแบบเบาๆ ไว
เล7าเรUQอง
สร&ปการฝSกงาน
น5าเสนอภาพ พรอมเรUQองประกอบ
เกบขอมลว)ทยาน)พนธ/
รายงาน
เร4ยนรร7วมกน
จดหมายเหต&สวนบ&คคล
7
จดการความร (ส7วนบ&คคล)
20
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
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. ขอแนะน?าการสรางรหสผ>าน
ก5าหนดเกณฑการสรางรหสผ7านใหตนเอง
ใหความส5าคญกบการสรางรหสผ7าน
เช7น ก5าหนดอกขระพ)เศษใหสระ ป…ดทายดวย #
A $
E + kampaengsaen
I ^
O @
U !
k$mp$+ngs$+n#
30
34. URL ของเว@บไซต Wordpress ของตนเอง
http://บญช4ท4Qสมคร.wordpress.com
เช7น เวบของครนอง - krungnong
URL คUอ
http://krungnong.wordpress.com
34
35. โครงสรางของหนาเว@บ
ชUQอเวบไซต สโลแกนเวบ
เมนจาก Pages
เนUrอเรUอง (Post)
Q
กล&มว)ตเจต
7
35
39. เปลGยนระบบภาษา
B
ไทย - > English
หนาหลก, ตrงค7า, General, ภาษา
English - > ไทย
Dashboard, Settings, General, Language
39
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
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. 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
52. ปรบแกไขกราฟ#กของ Themes
บาง Themes อน&ญาตใหปรบแกไขกราฟ…กได
เลUอกค5าสQง หนาหลก, รปแบบบลอก, ส7วนหว (หากม4)
จะตองเตร4ยมภาพตองขอก5าหนด หรUอใชเทคน)ค Crop ภาพดวยเครUQองมUอ
ของ Wordpress
52
57. Widget
ว)ดเจต
(Widget) คUอ จดการว)ดเจตไดดวยค5าสQง
โปรแกรมท4Qเพ)Qมความ หนาหลก, รปแบบบลอก,
สามารถใหบลอก Widgets
ล)งกไปท4Qต7าง ๆ
แสดงสถ)ตเย4Qยมชม
)
แสดงหวขอเรUQอง
แสดงข7าวสารจาก twitter
57
58. ว)ดเจต
ลากจาก
ซายไปขวา
Widget จ5าเปuน
Meta
คนหา
ปฏ)ทน )
สถ)ตบลอก
)
หมวดหม7 จ5านวน Sidebar
ขwrนอย7กบ Themes
ท4QเลUอก
58
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
72. น?าเขารปภาพ # 2
จากหนาจอสราง/แกไขเนUrอหา คล)กเมาส ณ ต5าแหน7งท4Qตองการ
วางภาพ คล)กป&•ม Add an Image
คล)กเลUอกภาพจากป&•ม Browse
72
73. น?าเขารปภาพ # 3
ป~อนชUQอภาพในรายการหวขอ
ใชภาษาไทยได
ป~อนค5าบรรยายภาพใน
รายการค5าอธ)บายสลบหรUอ
ค5าขยายความ
หากตองการใหคล)กท4Qภาพ
เพUอคล)กไปยงภาพขนาดตนฉบบ
Q
ใหคล)กป&•ม URL ของไฟล แต7ถา
ไม7ตองการใหคล)กภาพ
คล)กป&•มไม7ม4
ก5าหนดต5าแหน7งการวางภาพ
จากรายการจดแถว
ก5าหนดขนาดภาพจากขนาด
คล)กป&•มใส7เขาในเรUQอง
73
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
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
84. การแสดงความเห@น
กรณ4ผชมทQวไป
ตองป~อนขอมลส7วนตว
ผลจะไม7ปรากฎทนท4
กรณ4สมาช)ก
ใส7เฉพาะความเหน
ความเหนท4Qเผยแพร7ตอง
ผ7านการอน&มต)จากผดแลก7อน
84
85. การอนมตความเห@น
จากหนาหลก จะปรากฎส7วนควบค&ม “เนUrอเรUQอง”
แสดงว7าม4 4 ความเหน
รอพ)จารณา
3 ความเหน
อาจจะเปuน Spam
85
87. สรางลงกเขาในเว@บ
หนาหลก, ล)งก, Add New
ควรสรางหมวดหม7ล)งกก7อน
ดวยค5าสQงหนาหลก, ล)งก,
ล)งกหมวดหม7
การแสดงผลล)งกใน
หนาเวบใหก5าหนดดวย
Widgets ชUQอ ล)งก
87
89. เผยแพร>โพลล
สรางเรUQองใหม7 New Post คล)กป&•ม Add Poll แลว
เลUอกโพลลท4Qตองการเผยแพร7
89
97. การท?างานร>วมกบ Web 2.0 อLBนๆ
ท5างานผ7าน Widgets
ก5าหนดค7า Widgets แตกต7าง
ตามบร)การ Web 2.0
อาจจะตองเปuนสมาช)ก
บร)การ Web 2.0
ท4Qตองการก7อน
97
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. เทคนคน>าร # 2 – Post via e-Mail
ก5าหนด e-Mail Address ของ Wordpress.com
หนาหลก, บลอกของฉน
คล)ก “ใชงาน” จากรายการ โพสตผ7านอ4เมล
1
99
100. เทคนคน>าร # 3
ปรบแกไขค7า Timestamps ของแต7ละเรUQองใหถก
ตองตามจร)ง
สรางคลงจดหมายเหต&ส7วนตว
น5าเขาเนUrอหาในอด4ต
ท5าตารางก)จกรรมในอนาคต
100
101. เทคนคน>าร # 4
ศwกษา/เลUอกใช Shortcode ของ Wordpress
เพUอการใชงานท4Qเตมประส)ทธ)ภาพ
Q
http://en.support.wordpress.com/shortcodes/
101
102. แหล>งขอมล
http://stks.or.th/wiki
http://slideshare.net/boonlert
102