การพัฒนาเว็บไซตในรูปแบบการพัฒนาเว็บไซตในรูปแบบ BlogBlog ดวยดวย Wordpress.comWordpress.com

บุญเลิศ อรุณพิบูลย ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยี สํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ (สวทช .) http:// stks.or.th / [email protected] http:// facebook.com/boonlert.aroonpiboon บุญเลิศบุญเลิศ อรุณพิบูลยอรุณพิบูลย

 2536 – 2551  2551 – ปจจุบัน  NECTEC  STKS / NSTDA  เจาหนาที่ระบบคอมพิวเตอร  นักวิชาการ  วิทยากร ศูนยฝกอบรม  รักษาการหัวหนางานพัฒนาและ คอมพิวเตอรเนคเทค บริการสื่อสาระดิจิทัล  รักษาการหัวหนางานสนับสนุน ทางเทคนิค  รักษาการหัวหนางานวิชาการ  รักษาการหัวหนางานพัฒนาสื่อ สาระดิจิทัล  นักวิชาการ Web,Web, ,Blog, WikiWiki

 Web  HTML editor  HTML Generator  Macromedia Dreamweaver, MS FrontPage, Adobe GoLive  CMS – Content Management System  , , PHPNuke, Xoops  Blog  Wordpress, b2evolution, Wordpress MU  Wiki  MediaWiki, Dokuwiki, TWiki เทคโนโลยีเทคโนโลยี 2.02.0

 เทคโนโลยีตามแนวคิดของการพัฒนาเว็บไซต 2.0 (Web 2.0)  ยุคใหมของการพัฒนาเว็บไซต  รูปแบบการพัฒนาเว็บไซตที่ใหความสําคัญกับ “ผูใชเว็บ” มากกวา “ผูพัฒนา” หรือ “เจาของเว็บไซต”  แนวคิดการพัฒนาเว็บที่ใหความสําคัญกับการปฏิสัมพันธ การทํางานรวมกัน การผสานความรวมมือทั้งโครงสรางพื้นฐาน ระบบ ซอฟตแวร และเนื้อหาเว็บ  การปรับเว็บไซตจากการใหขอมูลเพียงทางเดียว เปนการใหบริการและขอมูล ที่ “ผูใช” เขาถึงไดงายและรวมสราง แกไข

GoogleGoogle && SearchSearch EngineEngine FriendlyFriendly MashMashupup

Blog RSS Google

HTML CMS

Web Programming เริ่มตนกับเริ่มตนกับ WebWeb 2.02.0 BlogBlog

 Blog == weB Log  Blog เว็บความรวมมือที่งาย ไมซับซอน  เครื่องมือเชื่อมความสัมพันธระหวางบุคคล ไดเปนอยางดี  สื่อสารไดงาย ทันใจ อนุทินชีวิต/การงาน ฉบับออนไลน  จุดเดน หมวดเนื้อหาและ Tag เครื่องมือที่ถูกเลือกใชประกอบการจัดการความรู (KM Tools)

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

คือคือ หัวใจหัวใจ สําคัญสําคัญ วิธีเริ่มตนกับวิธีเริ่มตนกับ WebWeb 2.02.0 BlogBlog

 Free Services  http://www.wordpress.com  http://www.blog.com  http://gotoknow.org  http://www.ning.com   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  ติดตั้งบนเครื่องแมขายสํานักงาน/สวนตัว เริ่มดวยตองมีเริ่มดวยตองมี eeMailMail

 www.gmail.com  mail.yahoo.com  www.hotmail.com การใชบริการการใชบริการ Wordpress.comWordpress.com

ประเด็นสําคัญการสมัครสมาชิกประเด็นสําคัญการสมัครสมาชิก

 เลือกใชอีเมล hotmail, yahoo mail, gmail  User name ที่ระบุจะตองเปนภาษาอังกฤษ ตัวพิมพเล็ก มีความยาวพอสมควร และหามใสเครื่องหมายพิเศษใด รวมทั้งชองวาง  User name ที่ระบุคือ  รหัสผาน ควรมีความยาวไมนอยกวา 8 ตัวอักษร และควร ผสมอักขระพิเศษสัก 1 ตัวเชน # @ $ %  จะตองจํารหัสผานใหได รหัสผาน ที่ระบุคือ  เมื่อสมัครผานแลว จะตองเช็คเมลที่ใชสมัคร เพื่อยืนยัน การสมัครดวยทุกครั้ง ขอแนะนําการสรางรหัสผานขอแนะนําการสรางรหัสผาน

 กําหนดเกณฑการสรางรหัสผานใหตนเอง  ใหความสําคัญกับการสรางรหัสผาน  เชน กําหนดอักขระพิเศษใหสระ ปดทายดวย #  A $  E + kampaengsaen  I ^  O@  U! k$mp$+ngs$+n# กําหนดชื่อกําหนดชื่อ BlogBlog

เลือกภาษาไทย ยืนยันการสมัครยืนยันการสมัคร ยืนยันการสมัครยืนยันการสมัคร

เปดเมลแลวคลิก Link นี้ดวย ณณ ขณะนี้ทุกทานจะมีบัญชีการใชงานขณะนี้ทุกทานจะมีบัญชีการใชงาน 22 ชุดชุด

 eMail  Wordpress.com  User name คือ  User name คือ

 Password คือ  Password คือ URLURL ของเว็บไซตของเว็บไซต WordpressWordpress ของตนเองของตนเอง

 http://บัญชีที่สมัคร.wordpress.com  เชน เว็บของครูนอง URL คือ  http://krungnongjb.wordpress.com  User name คือ  Password คือ โครงสรางของหนาเว็บโครงสรางของหนาเว็บ

ชื่อเว็บไซต สโลแกนเว็บ

เมนูจาก Pages

เนื้อเรื่อง (Post)

กลุมวิตเจ็ต LoginLogin เขาสูระบบเขาสูระบบ www.wordpress.comwww.wordpress.com DashboardDashboard สวนสําคัญของการใชงานสวนสําคัญของการใชงาน DashboardDashboard สวนสําคัญของการใชงานสวนสําคัญของการใชงาน เปลี่ยนระบบภาษาเปลี่ยนระบบภาษา

 ไทย > English  หนาหลัก, ตั้งคา, General, ภาษา  English > ไทย  Dashboard, Settings, General, Language

เมนูคําสั่งนี้ยังควบคุมการตั้งคาของเว็บ Web Configuration

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

1

2

เปลี่ยนรูปแบบเว็บเปลี่ยนรูปแบบเว็บ (Themes)(Themes)

 หนาหลัก, รูปแบบบล็อก, Themes เปลี่ยนรูปแบบเว็บเปลี่ยนรูปแบบเว็บ (Themes)(Themes)

คลิก “ใชงาน” ธีมที่ตองการ ดูหนาเว็บดูหนาเว็บ

 http://..ชื่อที่สมัคร...wordpress.com  หรือ คลิกชื่อเว็บ ดูหนาเว็บดูหนาเว็บ

กลับไปสูหนาจัดการ Dashboard ดวยคําสั่ง ผูควบคุมเว็บ หรือ ปรับแกไขกราฟกของปรับแกไขกราฟกของ ThemesThemes

 บาง Themes อนุญาตใหปรับแกไขกราฟกได  เลือกคําสั่ง หนาหลัก, รูปแบบบล็อก, สวนหัว (หากมี)  จะตองเตรียมภาพตองขอกําหนด หรือใชเทคนิค Crop ภาพดวยเครื่องมือ ของ Wordpress

กราฟกของกราฟกของ ThemesThemes ที่ปรับเปลี่ยนที่ปรับเปลี่ยน WidgetWidget

 วิดเจ็ต (Widget) คือ  จัดการวิดเจ็ตไดดวยคําสั่ง โปรแกรมที่เพิ่ม หนาหลัก, รูปแบบบล็อก, ความสามารถใหบล็อก Widgets  ลิงกไปที่ตาง ๆ  แสดงสถิติเยี่ยมชม  แสดงหัวขอเรื่อง  แสดงขาวสารจาก วิดเจ็ตวิดเจ็ต

ลากจาก ซายไปขวา  Widget จําเปน  Meta  คนหา  ปฏิทิน  สถิติบล็อก  หมวดหมู จํานวน Sidebar ขึ้นอยูกับ Themes ที่เลือก ประเภทเนื้อหาประเภทเนื้อหา

 Post – เรื่อง  Page – หนา  Dynamic Content  Static Content  นําเสนอเรียงตามวันที่/เวลา  นําเสนอดวย Menu, Widget  จัดเก็บตามวันที่/เวลา (Archives)  จัดกลุมตามหมวดหมู (Category)  จัดกลุมตามปายกํากับ (Tag)  มักแสดงผลหนาแรกของเว็บ Blog ปรับแกไขขอมูลเกี่ยวกับเว็บปรับแกไขขอมูลเกี่ยวกับเว็บ –– AboutAbout

 หนาหลัก, หนา

 คลิกหนา About เพื่อเขาไปแกไขขอมูล ปรับแกไขขอมูลเกี่ยวกับเว็บปรับแกไขขอมูลเกี่ยวกับเว็บ –– AboutAbout

1) ปอนชื่อเรื่อง

5) อัปเดต

2) ปอนเนื้อหา

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

3) เลือกเงื่อนไข การแสดงความคิดเห็น URLURL ที่ดีสําหรับเว็บที่ดีสําหรับเว็บ

 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 เครื่องมือจัดการขอความเครื่องมือจัดการขอความ//สื่อสื่อ นําเขารูปภาพนําเขารูปภาพ ## 11

 รูปภาพที่นํามาประกอบเนื้อหาของ Wordpress จะตองเตรียมดังนี้  กําหนดชื่อแฟมภาพ (File name) ใหเปนภาษาอังกฤษ และ/หรือผสม ตัวเลข หามใชภาษาไทย  ฟอรแมตภาพ  .gif สําหรับภาพวาด ภาพลายเสน ภาพที่มีสีไมมาก  .jpg/.png สําหรับภาพสีมาก  .png สําหรับภาพสีมากที่ตองการพื้นโปรงใส (Transparent)  ควรยอภาพใหมีขนาดที่เหมาะสม และ/หรือลดความละเอียดของภาพ (Resolution) ระหวาง 72 – 96 dpi  รูปภาพ/แบบอักษร/ขอความไมควรละเมิดลิขสิทธิ์  http://openclipart.org  คนหาภาพจาก Google, Flickr ดวยเงื่อนไข CreativeCommons  ระบุ Metadata ของภาพใหเหมาะสมในระดับดิจิทัล ตัวอยางการเลือกฟอรแมตภาพที่ไมเหมาะสม ภาพดานซายสีแตก ไมสม่ําเสมอ ProgressiveProgressive && InterlacedInterlaced

ก

ก ก Interlaced Progressive PNGPNG && GIFGIF TransparentTransparent ปญหาลิขสิทธิ์ของเมืองไทยปญหาลิขสิทธิ์ของเมืองไทย

(cc)(cc) การสืบคนภาพที่เปนการสืบคนภาพที่เปน (cc)(cc)

(cc) วันวัน//เวลากลองถายภาพดิจิทัลเวลากลองถายภาพดิจิทัล//อุปกรณดิจิทัลอุปกรณดิจิทัล

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

ImageImage MetadataMetadata :: EXIFEXIF :: IPTCIPTC

นําเขารูปภาพนําเขารูปภาพ ## 22

 จากหนาจอสราง/แกไขเนื้อหา คลิกเมาส ณ ตําแหนงที่ตองการ วางภาพ คลิกปุม Add an Image

 คลิกเลือกภาพจากปุม Browse นําเขารูปภาพนําเขารูปภาพ ## 33

 ปอนชื่อภาพในรายการหัวขอ ใชภาษาไทยได  ปอนคําบรรยายภาพใน รายการคําอธิบายสลับหรือ คําขยายความ  หากตองการใหคลิกที่ภาพ เพื่อคลิกไปยังภาพขนาดตนฉบับ ใหคลิกปุม URL ของไฟล แตถา ไมตองการใหคลิกภาพ คลิกปุมไมมี  กําหนดตําแหนงการวางภาพ จากรายการจัดแถว  กําหนดขนาดภาพจากขนาด  คลิกปุมใสเขาในเรื่อง สรางหนาสรางหนา (Page)(Page) ใหมใหม

 หนาหลัก, หนา, เขียนหนาใหม (หนาใหม) การจัดการการจัดการ//เขียนเรื่องเขียนเรื่อง (Post)(Post)

 หนาหลัก, เรื่อง

 หนาหลัก, เรื่อง, เขียนเรื่องใหม (เรื่องใหม)  ระบุชื่อเรื่อง  เขียนเรื่อง  ใสเนื้อหายอในรายการ ตัดทอน  ระบุ URL อางอิงใน รายการ สง Trackbacks ใช , คั่นหากมีหลาย URL  เงื่อนไขการแสดงความ คิดเห็นจากรายการ สนทนา  เลือกชื่อผูเขียน จาก รายการ ผูเขียน  กําหนดหมวดหมูจาก Categories  กําหนดปายกํากับจาก Post Tags  ระบุเงื่อนไขการเผยแพร จาก เผยแพร ปายกํากับปายกํากับ TagsTags

 คําคน  แสดงปริมาณเนื้อหา  กรองขอมูลตามปายที่เลือก ตัวอยางการใสเนื้อหาตัวอยางการใสเนื้อหา

 เนื้อหาที่เปนขอความ  เนื้อหาพรอมภาพ  เนื้อหาพรอมแนบไฟลเอกสาร  เนื้อหา Online slide จาก Slideshare  เนื้อหา Video จาก Youtube SlideshareSlideshare ผานผาน WordpressWordpress

 Slideshare.net เปนแหลงรวมสไลด/เอกสารแหลงใหญบนโลก อินเทอรเน็ต  นํา PPT, PDF, DOC ไปจัดเก็บและแปลงเปน Online Slide, iPaper อัตโนมัติในรูปแบบ Flashbased  คนสื่อจาก slideshare.net แลวคลิกเลือกสื่อที่ตองการ  คลิกรายการ Embed  คัดลอกคําสั่งจากรายการ Embed this presentation มาวางใน Post ผานโหมดการทํางาน HTML CodeCode ของของ SlideshareSlideshare

1

2 SlideshareSlideshare ผานผาน WordpressWordpress

1

2 SlideshareSlideshare ผานผาน WordpressWordpress YoutubeYoutube ผานผาน SlideshareSlideshare

1

2

3

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

 กรณีผูชมทั่วไป  ตองปอนขอมูลสวนตัว  ผลจะไมปรากฎทันที  กรณีสมาชิก  ใสเฉพาะความเห็น  ความเห็นที่เผยแพรตอง ผานการอนุมัติจากผูดูแลกอน การอนุมัติความเห็นการอนุมัติความเห็น

 จากหนาหลัก จะปรากฎสวนควบคุม “เนื้อเรื่อง”

แสดงวามี 4 ความเห็น รอพิจารณา 3 ความเห็น อาจจะเปน Spam การอนุมัติความเห็นการอนุมัติความเห็น สรางลิงกเขาในเว็บสรางลิงกเขาในเว็บ

 หนาหลัก, ลิงก, Add New  ควรสรางหมวดหมูลิงกกอน ดวยคําสั่งหนาหลัก, ลิงก, ลิงกหมวดหมู  การแสดงผลลิงกใน หนาเว็บใหกําหนดดวย Widgets ชื่อ ลิงก แบบสํารวจแบบสํารวจ (Poll)(Poll)

 หนาหลัก, โพลล เผยแพรโพลลเผยแพรโพลล

 สรางเรื่องใหม New Post คลิกปุม Add Poll แลว เลือกโพลลที่ตองการเผยแพร ตอบโพลลตอบโพลล รวมเปนสมาชิกกับรวมเปนสมาชิกกับ BlogBlog ที่มีอยูแลวที่มีอยูแลว

 ติดตอเจาของ Blog ใหเพิ่มบัญชี  Login เขาสูระบบ  ปอนขอมูล ตั้งคาการเขียนตั้งคาการเขียน ตั้งคาตั้งคา การอานการอาน

ตั้งคาสื่อตั้งคาสื่อ การทํางานรวมกับการทํางานรวมกับ WebWeb 2.02.0 อื่นๆอื่นๆ

 ทํางานผาน Widgets  กําหนดคา Widgets แตกตาง ตามบริการ Web 2.0  อาจจะตองเปนสมาชิก บริการ Web 2.0 ที่ตองการกอน eeCommerceCommerce ดวยดวย BlogBlog

 ขายอะไรดีผาน Blog  ประเด็นสําคัญ  สินคาราคาถูกกวาทองตลาด  อยาลืมประยุกตใช Web 2.0  สินคาเฉพาะกลุม Tools ใหเหมาะสม หลากหลาย  สินคา “ไม” ยอดนิยม  สินคาไมตองการเปดเผยตัวตน  มีปฏิสัมพันธกับผูชม ผูซื้อ ลูกคา  สินคามีลักษณะเฉพาะตัว อยางสม่ําเสมอ  สินคาที่มีน้ําหนักเบา  กําหนดกลุมเปาหมาย และ  สินคาที่ไมยุงยากในการจัดสง ลักษณะเฉพาะใหได  สินคาที่เลาเรื่องได  สินคาที่หายาก  Do it yourself – DIY แหลงขอมูลแหลงขอมูล

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