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

บญเกยรต เจตจ านงนชศนยบรการความรทางวทยาศาสตรและเทคโนโลย

ส านกงานพฒนาวทยาศาสตรและเทคโนโลยแหงชาต (สวทช.)http://stks.or.th/boonkiat

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

เทคโนโลย 2.0

เทคโนโลยตามแนวคดของการพฒนาเวบไซต 2.0 (Web 2.0) ยคใหมของการพฒนาเวบไซต

รปแบบการพฒนาเวบไซตทใหความส าคญกบ “ผใชเวบ” มากกวา “ผพฒนา” หรอ “เจาของเวบไซต”

แนวคดการพฒนาเวบทใหความส าคญกบการปฏสมพนธ การท างานรวมกน การผสานความรวมมอทงโครงสรางพนฐาน ระบบ ซอฟตแวร และเนอหาเวบ

การปรบเวบไซตจากการใหขอมลเพยงทางเดยว เปนการใหบรการและขอมลท “ผใช” เขาถงไดงายและรวมสราง แกไข

Google & Search Engine Friendly

Mash-up

HTML

Web Programming

CMS

Blog RSSGoogle

เรมตนกบ Web 2.0 - Blog

Blog == weB Log

Blog เวบความรวมมอทงาย ไมซบซอน

เครองมอเชอมความสมพนธระหวางบคคลไดเปนอยางด

สอสารไดงาย ทนใจ อนทนชวต/การงานฉบบออนไลน

จดเดน หมวดเนอหาและ Tag

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

คอ หวใจ ส าคญ

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

วธเรมตนกบ 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/

เขยนอยางไร

เรองราวใกลตว ทชอบและถนด

เขยนแบบเบาๆ

เลาเรอง

น าเสนอภาพ พรอมเรองประกอบ

เรยนรรวมกน

เขยนตามเปา/จดประสงคทวางไว

http://stanglibrary.wordpress.com/

http://stks.or.th/ling/attawfikiahschool/

http://stks.or.th/wg/dmslib/

http://nuttakorn2548.wordpress.com/

http://thailandhandmadebuu.wordpress.com

Wordpress

ซอฟตแวรในกลม Open Source

พฒนา Blog (weB + Log)

เทคนคการพฒนาเวบประเภทหนงทน าเสนอเนอหาโดยใหความส าคญกบวนท/เวลาทเผยแพรเนอหา

รปแบบการใชบรการ Wordpress

Online Free Hosting : www.wordpress.com

ตดตงบนเครองแมขายส านกงาน/สวนตว

เรมดวยตองม e-Mail

www.gmail.com

mail.yahoo.com

www.hotmail.com

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

ประเดนส าคญการสมครสมาชก

เลอกใชอเมล hotmail, yahoo mail, gmail

User name ทระบจะตองเปนภาษาองกฤษ ตวพมพเลก มความยาวพอสมควร และหามใสเครองหมายพเศษใด รวมทงชองวาง User name ทระบคอ

รหสผาน ควรมความยาวไมนอยกวา 8 ตวอกษร และควรผสมอกขระพเศษสก 1 ตวเชน # @ $ % จะตองจ ารหสผานใหได รหสผาน ทระบคอ

เมอสมครผานแลว จะตองเชคเมลทใชสมคร เพอยนยนการสมครดวยทกครง

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

ก าหนดเกณฑการสรางรหสผานใหตนเอง

ใหความส าคญกบการสรางรหสผาน

เชน ก าหนดอกขระพเศษใหสระ ปดทายดวย #

A $

E +

I ^

O @

U !

kampaengsaen

k$mp$+ngs$+n#

ก าหนดชอ Blog

เลอกภาษาไทย

ยนยนการสมคร

ยนยนการสมคร

เปดเมลแลวคลก Link นดวย

ณ ขณะนทกทานจะมบญชการใชงาน 2 ชด

e-Mail

User name คอ

Password คอ

Wordpress.com

User name คอ

Password คอ

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

http://บญชทสมคร.wordpress.com

เชน เวบของครนอง URL คอ

http://krungnongjb.wordpress.com

User name คอ

Password คอ

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

เมนจาก Pages

เนอเรอง (Post)

กลมวตเจต

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

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

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

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

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

ไทย - > English

หนาหลก, ตงคา, General, ภาษา

English - > ไทย

Dashboard, Settings, General, Language

เมนค าสงนยงควบคมการตงคาของเวบWeb Configuration

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

1

2

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

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

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

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

ดหนาเวบ

http://..ชอทสมคร...wordpress.com

หรอ คลกชอเวบ

ดหนาเวบ

กลบไปสหนาจดการ Dashboard ดวยค าสง ผควบคมเวบหรอ

ปรบแกไขกราฟกของ Themes

บาง Themes อนญาตใหปรบแกไขกราฟกได

เลอกค าสง หนาหลก, รปแบบบลอก, สวนหว (หากม)

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

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

Widget

วดเจต (Widget) คอ โปรแกรมทเพมความสามารถใหบลอก ลงกไปทตาง ๆ

แสดงสถตเยยมชม

แสดงหวขอเรอง

แสดงขาวสารจาก twitter

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

Widget จ าเปน

Meta

คนหา

ปฏทน

สถตบลอก

หมวดหม

วดเจต

ลากจากซายไปขวา

จ านวน Sidebarขนอยกบ Themes

ทเลอก

ประเภทเนอหา

Post – เรอง

Dynamic Content

น าเสนอเรยงตามวนท/เวลา

จดเกบตามวนท/เวลา (Archives)

จดกลมตามหมวดหม (Category)

จดกลมตามปายก ากบ (Tag)

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

Page – หนา

Static Content

น าเสนอดวย Menu, Widget

ปรบแกไขขอมลเกยวกบเวบ – About

หนาหลก, หนา

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

ปรบแกไขขอมลเกยวกบเวบ – About

1) ปอนชอเรอง

2) ปอนเนอหา

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

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

5) อปเดต

URL ทดส าหรบเวบ

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

URL Friendly จะไมรองรบภาษาไทย

แตสวนประกอบของ URL มาจากชอเรอง

หากใชชอเรองภาษาไทย จะตองเปลยน Permalink ของเรองใหเปนภาษาองกฤษ

คดลอกเนอหาจากแหลงอนๆ

ไมควรคดลอก (Copy) เนอหาจาก Word หรอแหลงอนๆ มาวางใน Editor ของ Wordpress เพราะจะสงผลใหเกดปญหาการแสดงผลทผดพลาด ปรบแกไขยาก

เพราะม special code จากโปรแกรมตนทางสงมายง Editor ของ Wordpress

หากจ าเปนตองคดลอกขอมล ใหน าขอมลดงกลาวไปวาง (Paste) บน NotePad กอนแลวจงคดลอกจาก NotePad มาวางใน Editor ของ Wordpress

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

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

รปภาพทน ามาประกอบเนอหาของ Wordpress จะตองเตรยมดงน

ก าหนดชอแฟมภาพ (File name) ใหเปนภาษาองกฤษ และ/หรอผสมตวเลข หามใชภาษาไทย

ฟอรแมตภาพ .gif ส าหรบภาพวาด ภาพลายเสน ภาพทมสไมมาก

.jpg/.png ส าหรบภาพสมาก

.png ส าหรบภาพสมากทตองการพนโปรงใส (Transparent)

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

รปภาพ/แบบอกษร/ขอความไมควรละเมดลขสทธ

http://openclipart.org

คนหาภาพจาก Google, Flickr ดวยเงอนไข CreativeCommons

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

ตวอยางการเลอกฟอรแมตภาพทไมเหมาะสมภาพดานซายสแตก ไมสม าเสมอ

Progressive & Interlaced

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

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

PNG & GIF Transparent

ปญหาลขสทธของเมองไทย

(cc)

การสบคนภาพทเปน (cc)

(cc)

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

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

Image Metadata: EXIF: IPTC

น าเขารปภาพ # 2

จากหนาจอสราง/แกไขเนอหา คลกเมาส ณ ต าแหนงทตองการวางภาพ คลกปม Add an Image

คลกเลอกภาพจากปม Browse

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

ปอนค าบรรยายภาพในรายการค าอธบายสลบหรอค าขยายความ

หากตองการใหคลกทภาพเพอคลกไปยงภาพขนาดตนฉบบ ใหคลกปม URL ของไฟล แตถาไมตองการใหคลกภาพ คลกปมไมม

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

ก าหนดขนาดภาพจากขนาด

คลกปมใสเขาในเรอง

น าเขารปภาพ # 3

สรางหนา (Page) ใหม

หนาหลก, หนา, เขยนหนาใหม (หนาใหม)

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

หนาหลก, เรอง

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

ระบชอเรอง

เขยนเรอง

ใสเนอหายอในรายการ ตดทอน

ระบ URL อางองในรายการ สง Trackbacks ใช , คนหากมหลาย URL

เงอนไขการแสดงความคดเหนจากรายการ สนทนา

เลอกชอผเขยน จากรายการ ผเขยน

ก าหนดหมวดหมจาก Categories

ก าหนดปายก ากบจาก Post Tags

ระบเงอนไขการเผยแพรจาก เผยแพร

ปายก ากบ - Tags

ค าคน

แสดงปรมาณเนอหา

กรองขอมลตามปายทเลอก

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

เนอหาทเปนขอความ

เนอหาพรอมภาพ

เนอหาพรอมแนบไฟลเอกสาร

เนอหา Online slide จาก Slideshare

เนอหา Video จาก Youtube

Slideshare ผาน Wordpress

Slideshare.net เปนแหลงรวมสไลด/เอกสารแหลงใหญบนโลกอนเทอรเนต

น า PPT, PDF, DOC ไปจดเกบและแปลงเปน Online Slide, i-Paper อตโนมตในรปแบบ Flash-based

คนสอจาก slideshare.net แลวคลกเลอกสอทตองการ

คลกรายการ Embed

คดลอกค าสงจากรายการ Embed this presentation มาวางใน Post ผานโหมดการท างาน HTML

Code ของ Slideshare

1

2

Slideshare ผาน Wordpress

1

2

Slideshare ผาน Wordpress

Youtube ผาน Slideshare

1

2

3

4

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

กรณผชมทวไป

ตองปอนขอมลสวนตว

ผลจะไมปรากฎทนท

กรณสมาชก

ใสเฉพาะความเหน

ความเหนทเผยแพรตองผานการอนมตจากผดแลกอน

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

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

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

อาจจะเปน Spam

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

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

หนาหลก, ลงก, Add New

ควรสรางหมวดหมลงกกอนดวยค าสงหนาหลก, ลงก, ลงกหมวดหม

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

แบบส ารวจ (Poll)

หนาหลก, โพลล

เผยแพรโพลล

สรางเรองใหม New Post คลกปม Add Poll แลวเลอกโพลลทตองการเผยแพร

ตอบโพลล

รวมเปนสมาชกกบ Blog ทมอยแลว

ตดตอเจาของ Blog ใหเพมบญช

Login เขาสระบบ

ปอนขอมล

ตงคาการเขยน

ตงคาการอาน

ตงคาสอ

การท างานรวมกบ Web 2.0 อนๆ

ท างานผาน Widgets

ก าหนดคา Widgets แตกตางตามบรการ Web 2.0

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

e-Commerce ดวย Blog

ขายอะไรดผาน Blog

สนคาราคาถกกวาทองตลาด

สนคาเฉพาะกลม

สนคา “ไม” ยอดนยม

สนคาไมตองการเปดเผยตวตน

สนคามลกษณะเฉพาะตว

สนคาทมน าหนกเบา

สนคาทไมยงยากในการจดสง

สนคาทเลาเรองได

สนคาทหายาก

Do it yourself – DIY

ประเดนส าคญ

อยาลมประยกตใช Web 2.0 Tools ใหเหมาะสม หลากหลาย

มปฏสมพนธกบผชม ผซอ ลกคาอยางสม าเสมอ

ก าหนดกลมเปาหมาย และลกษณะเฉพาะใหได

แหลงขอมล

http://stks.or.th/wiki

http://slideshare.net/boonlert