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

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

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

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

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

2536 – 2551 NECTEC

เจาหนาทระบบคอมพวเตอร วทยากร ศนยฝกอบรม

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

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

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

2551 – ปจจบน STKS / NSTDA

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

บรการสอสาระดจทล

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 Wordpress, b2evolution, Wordpress MU

Wiki MediaWiki, Dokuwiki, TWiki

เทคโนโลย เทคโนโลย 2.02.0

เทคโนโลยตามแนวคดของการพฒนาเวบไซต 2.0 (Web 2.0) ยคใหมของการพฒนาเวบไซต รปแบบการพฒนาเวบไซตทใหความสำาคญกบ “ผใชเวบ” มากกวา “ผ

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

การทำางานรวมกน การผสานความรวมมอทงโครงสรางพนฐาน ระบบ ซอฟตแวร และเนอหาเวบ

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

Google & Search Engine FriendlyGoogle & Search Engine Friendly

Mash-upMash-up

เ ว บ ห ล ก

เ ว บ ห น ว ย ง า น

พ ฒ น า ด ว ย H T M L

พ ฒ น า ด ว ย W e b P r o g r a m m i n g

พ ฒ น า ด ว ย C M S

B l o g ส ร ป เ น อ ห า ส น จ า ก เ ว บ ห ล ก ส ง อ อ ก เ ป น R S Sผ ล ก า ร ส บ ค น เ ร ว ด ว ย G o o g l e

เรมตนกบ เรมตนกบ Web 2.0 - BlogWeb 2.0 - Blog

Blog == weB Log Blog เวบความรวมมอทงาย ไมซบซอน เครองมอเชอมความสมพนธระหวางบคคล

ไดเปนอยางด สอสารไดงาย ทนใจ อนทนชวต/การงาน

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

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

คอ หวใจ สำาคญคอ หวใจ สำาคญ

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

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

เขยนอยางไรเขยนอยางไร

เรองราวใกลตว ทชอบและถนด เขยนแบบเบาๆ เลาเรอง นำาเสนอภาพ พรอมเรองประกอบ เรยนรรวมกน เขยนตามเปา/จดประสงคทวางไว

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

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

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

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

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

WordpressWordpress

ซอฟตแวรในกลม Open Source พฒนา Blog (weB + Log)

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

รปแบบการใชบรการ Wordpress Online Free Hosting : www.wordpress.com ตดตงบนเครองแมขายสำานกงาน/สวนตว

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

www.gmail.com mail.yahoo.com www.hotmail.com

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

Wordpress.com --- thaiviewWordpress.com --- thaiview

http://thaiview.wordpress

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

เลอกใชอเมล hotmail, yahoo mail, gmail User name ทระบจะตองเปนภาษาองกฤษ ตวพมพเลก

มความยาวพอสมควร และหามใสเครองหมายพเศษใด รวมทงชองวาง User name ทระบคอ

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

การสมครดวยทกครง

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

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

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

kampaengsaen

k$mp$+ngs$+n#

กำาหนดชอ กำาหนดชอ BlogBlog

เลอกภาษาไทย

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

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

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

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

e-Mail User name คอ

Password คอ

Wordpress.com User name คอ

Password คอ

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

http://บญชทสมคร.wordpress.com เชน เวบของครนอง URL คอ http://krungnongjb.wordpress.com

User name คอ Password คอ

http://stks.wordpress.com

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

เมนจาก Pages

เนอเรอง (Post)

กลมวตเจต

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

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

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

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

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

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

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

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

Site TitleSite Title

ควรเปนภาษาองกฤษนำา ตามดวยภาษาไทย Apasiri Apartment อาภาสรอพารทเมนต

อบลราชธาน ควรเปนคำาทผใชนกถงบอยๆ คลายกบเปน

Keyword ความยาวรวมไมเกน 64 ตวอกษร

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

1

2

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

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

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

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

ดหนาเวบดหนาเวบ

http://..ชอทสมคร...wordpress.com หรอ คลกชอเวบ

ดหนาเวบดหนาเวบ

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

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

บาง Themes อนญาตใหปรบแกไขกราฟกได เลอกคำาสง หนาหลก, รปแบบบลอก, สวนหว (หากม)

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

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

WidgetWidget

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

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

Widget จำาเปน Meta คนหา ปฏทน สถตบลอก หมวดหม

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

ซายไปขวา

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

ทเลอก

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

Post – เรอง Dynamic Content นำาเสนอเรยงตามวนท/เวลา จดเกบตามวนท/เวลา

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

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

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

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

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

หนาหลก, หนา

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

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

1) ปอนชอเรอง

2) ปอนเนอหา

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

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

5) อปเดต

URL 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# 1

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

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

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

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

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

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

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

Progressive & InterlacedProgressive & Interlaced

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

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

PNG & GIF TransparentPNG & GIF Transparent

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

(cc)(cc)

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

(cc)

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

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

Image Image MetadataMetadata: EXIF: EXIF: IPTC: IPTC

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

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

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

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

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

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

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

กำาหนดขนาดภาพจากขนาด คลกปมใสเขาในเรอง

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

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

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

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

หนาหลก, เรอง

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

ระบชอเรอง เขยนเรอง ใสเนอหายอในรายการ

ตดทอน ระบ URL อางองใน

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

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

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

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

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

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

ปายกำากบ ปายกำากบ - Tags- Tags

คำาคน แสดงปรมาณเนอหา กรองขอมลตามปายทเลอก

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

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

Slideshare Slideshare ผาน ผาน WordpressWordpress

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

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

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

Code Code ของ ของ SlideshareSlideshare

1

2

Slideshare Slideshare ผาน ผาน WordpressWordpress

1

2

Slideshare Slideshare ผาน ผาน WordpressWordpress

Youtube Youtube ผาน ผาน SlideshareSlideshare

1

2

3

4

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

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

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

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

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

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

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

อาจจะเปน Spam

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

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

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

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

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

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

หนาหลก, โพลล

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

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

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

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

ตดตอเจาของ Blog ใหเพมบญช Login เขาสระบบ ปอนขอมล

ตงคาการเขยนตงคาการเขยน

ตงคาตงคาการอานการอาน

ตงคาสอตงคาสอ

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

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

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

บรการ Web 2.0 ทตองการกอน

e-Commerce e-Commerce ดวย ดวย BlogBlog

ขายอะไรดผาน Blog สนคาราคาถกกวาทองตลาด สนคาเฉพาะกลม สนคา “ไม” ยอดนยม สนคาไมตองการเปดเผยตวตน สนคามลกษณะเฉพาะตว สนคาทมนำาหนกเบา สนคาทไมยงยากในการจดสง สนคาทเลาเรองได สนคาทหายาก Do it yourself – DIY

ประเดนสำาคญ อยาลมประยกตใช Web 2.0

Tools ใหเหมาะสม หลากหลาย มปฏสมพนธกบผชม ผซอ

ลกคาอยางสมำาเสมอ กำาหนดกลมเปาหมาย และ

ลกษณะเฉพาะใหได

แหลงขอมลแหลงขอมล

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