Upload
krittykrit
View
174
Download
2
Embed Size (px)
Citation preview
การพฒนาเวบไซตในรปแบบ การพฒนาเวบไซตในรปแบบ Blog Blog ดวย ดวย Wordpress.com Wordpress.com
บญเลศ อรณพบลยบญเลศ อรณพบลยศนยบรการความรทางวทยาศาสตรและเทคโนโลยศนยบรการความรทางวทยาศาสตรและเทคโนโลย
สำานกงานพฒนาวทยาศาสตรและเทคโนโลยแหงชาต สำานกงานพฒนาวทยาศาสตรและเทคโนโลยแหงชาต ((สวทชสวทช.).)http://stks.or.th/ [email protected]://stks.or.th/ [email protected]
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