2010012 Wordpress Com Boonkiat
- 1. การพัฒนาเว็บไซต์ในรูปแบบ Blog ด้วย Wordpress.com บุญเกียรติ เจตจานงนุช ศูนย์บริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี สานักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ (สวทช.) http://stks.or.th/boonkiat
- 2. 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
- 3. เทคโนโลยี 2.0 เทคโนโลยีตามแนวคิดของการพัฒนาเว็บไซต์ 2.0 (Web 2.0) ยุคใหม่ของการพัฒนาเว็บไซต์ รูปแบบการพัฒนาเว็บไซต์ที่ให้ความสาคัญกับ “ผู้ใช้เว็บ” มากกว่า “ผู้พัฒนา” หรือ “เจ้าของเว็บไซต์” แนวคิดการพัฒนาเว็บที่ให้ความสาคัญกับการปฏิสัมพันธ์ การทางานร่วมกัน การผสานความร่วมมือทั้งโครงสร้างพื้นฐาน ระบบ ซอฟต์แวร์ และเนื้อหาเว็บ การปรับเว็บไซต์จากการให้ข้อมูลเพียงทางเดียว เป็นการให้บริการและข้อมูล ที่ “ผู้ใช้” เข้าถึงได้ง่ายและร่วมสร้าง แก้ไข
- 5. Google & Search Engine Friendly
- 6. Mash-up Blog RSS Google HTML CMS Web Programming
- 7. เริ่มต้นกับ Web 2.0 - Blog Blog == weB Log Blog เว็บความร่วมมือที่ง่าย ไม่ซับซ้อน เครื่องมือเชื่อมความสัมพันธ์ระหว่างบุคคล ได้เป็นอย่างดี สื่อสารได้ง่าย ทันใจ อนุทินชีวิต/การงาน ฉบับออนไลน์ จุดเด่น หมวดเนื้อหาและ Tag
- 8. เครื่องมือทีถูกเลือกใช้ประกอบการจัดการความรู้ ่ (KM Tools) การมีส่วนร่วม (Participation) คือ หัวใจ สาคัญ
- 9. วิธีเริ่มต้นกับ 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/
- 10. เขียนอย่างไร เรื่องราวใกล้ตัว ที่ชอบและถนัด เขียนแบบเบาๆ เล่าเรื่อง นาเสนอภาพ พร้อมเรื่องประกอบ เรียนรู้ร่วมกัน เขียนตามเป้า/จุดประสงค์ที่วางไว้
- 16. Wordpress ซอฟต์แวร์ในกลุ่ม Open Source พัฒนา Blog (weB + Log) เทคนิคการพัฒนาเว็บประเภทหนึ่งทีนาเสนอเนือหา ่ ้ โดยให้ความสาคัญกับวันที่/เวลาที่เผยแพร่เนื้อหา รูปแบบการใช้บริการ Wordpress Online Free Hosting : www.wordpress.com ติดตั้งบนเครื่องแม่ข่ายสานักงาน/ส่วนตัว
- 17. เริ่มด้วยต้องมี e-Mail www.gmail.com mail.yahoo.com www.hotmail.com
- 20. ประเด็นสาคัญการสมัครสมาชิก เลือกใช้อีเมล์ hotmail, yahoo mail, gmail User name ที่ระบุจะต้องเป็นภาษาอังกฤษ ตัวพิมพ์เล็ก มีความยาวพอสมควร และห้ามใส่เครื่องหมายพิเศษใด รวมทั้งช่องว่าง User name ทีระบุคือ ่ รหัสผ่าน ควรมีความยาวไม่น้อยกว่า 8 ตัวอักษร และควร ผสมอักขระพิเศษสัก 1 ตัวเช่น # @ $ % จะต้องจารหัสผ่านให้ได้ รหัสผ่าน ทีระบุคือ ่ เมื่อสมัครผ่านแล้ว จะต้องเช็คเมล์ที่ใช้สมัคร เพื่อยืนยัน การสมัครด้วยทุกครั้ง
- 21. ข้อแนะนาการสร้างรหัสผ่าน กาหนดเกณฑ์การสร้างรหัสผ่านให้ตนเอง ให้ความสาคัญกับการสร้างรหัสผ่าน เช่น กาหนดอักขระพิเศษให้สระ ปิดท้ายด้วย # A $ E + kampaengsaen I ^ O @ U ! k$mp$+ngs$+n#
- 22. กาหนดชื่อ Blog เลือกภาษาไทย
- 23. ยืนยันการสมัคร
- 24. ยืนยันการสมัคร เปิดเมล์แล้วคลิก Link นี้ด้วย
- 25. ณ ขณะนี้ทุกท่านจะมีบัญชีการใช้งาน 2 ชุด e-Mail Wordpress.com User name คือ User name คือ Password คือ Password คือ
- 26. URL ของเว็บไซต์ Wordpress ของตนเอง http://บัญชีที่สมัคร.wordpress.com เช่น เว็บของครูน้อง URL คือ http://krungnongjb.wordpress.com User name คือ Password คือ
- 27. โครงสร้างของหน้าเว็บ ชื่อเว็บไซต์ สโลแกนเว็บ เมนูจาก Pages เนื้อเรื่อง (Post) กลุ่มวิตเจ็ต
- 31. เปลี่ยนระบบภาษา ไทย - > English หน้าหลัก, ตั้งค่า, General, ภาษา English - > ไทย Dashboard, Settings, General, Language เมนูคาสั่งนี้ยังควบคุมการตั้งค่าของเว็บ Web Configuration
- 33. ปรับแก้ไขข้อมูลผู้ใช้/สมาชิก 1 2
- 35. เปลี่ยนรูปแบบเว็บ (Themes) หน้าหลัก, รูปแบบบล็อก, Themes
- 36. เปลี่ยนรูปแบบเว็บ (Themes) คลิก “ใช้งาน” ธีมที่ต้องการ
- 37. ดูหน้าเว็บ http://..ชื่อที่สมัคร...wordpress.com หรือ คลิกชื่อเว็บ
- 38. ดูหน้าเว็บ กลับไปสู่หน้าจัดการ Dashboard ด้วยคาสั่ง ผู้ควบคุมเว็บ หรือ
- 39. ปรับแก้ไขกราฟิกของ Themes บาง Themes อนุญาตให้ปรับแก้ไขกราฟิกได้ เลือกคาสั่ง หน้าหลัก, รูปแบบบล็อก, ส่วนหัว (หากมี) จะต้องเตรียมภาพต้องข้อกาหนด หรือใช้เทคนิค Crop ภาพด้วยเครื่องมือ ของ Wordpress
- 42. Widget วิดเจ็ต (Widget) คือ จัดการวิดเจ็ตได้ด้วยคาสั่ง โปรแกรมที่เพิ่ม หน้าหลัก, รูปแบบบล็อก, ความสามารถให้บล็อก Widgets ลิงก์ไปที่ต่าง ๆ แสดงสถิติเยี่ยมชม แสดงหัวข้อเรื่อง แสดงข่าวสารจาก twitter
- 43. วิดเจ็ต ลากจาก ซ้ายไปขวา Widget จาเป็น Meta ค้นหา ปฏิทิน สถิติบล็อก หมวดหมู่ จานวน Sidebar ขึ้นอยูกับ Themes ่ ที่เลือก
- 44. ประเภทเนื้อหา Post – เรื่อง Page – หน้า Dynamic Content Static Content นาเสนอเรียงตามวันที่/เวลา นาเสนอด้วย Menu, Widget จัดเก็บตามวันที่/เวลา (Archives) จัดกลุ่มตามหมวดหมู่ (Category) จัดกลุ่มตามป้ายกากับ (Tag) มักแสดงผลหน้าแรกของเว็บ Blog
- 45. ปรับแก้ไขข้อมูลเกี่ยวกับเว็บ – About หน้าหลัก, หน้า คลิกหน้า About เพื่อเข้าไปแก้ไขข้อมูล
- 46. ปรับแก้ไขข้อมูลเกี่ยวกับเว็บ – About 1) ป้อนชื่อเรื่อง 5) อัปเดต 2) ป้อนเนื้อหา 4) ระบุลาดับการแสดงผล 3) เลือกเงื่อนไข การแสดงความคิดเห็น
- 47. URL ที่ดีสาหรับเว็บ Wordpress.com กาหนดให้ URL ของแต่ละเนือหาเป็นมิตรกับ ้ Search Engine – Search Engine Friendly รวมทั้งกับคน URL Friendly จะไม่รองรับภาษาไทย แต่ส่วนประกอบของ URL มาจากชือเรื่อง ่ หากใช้ชื่อเรืองภาษาไทย จะต้องเปลี่ยน Permalink ของเรื่องให้ ่ เป็นภาษาอังกฤษ
- 48. คัดลอกเนื้อหาจากแหล่งอื่นๆ ไม่ควรคัดลอก (Copy) เนื้อหาจาก Word หรือแหล่งอืนๆ ่ มาวางใน Editor ของ Wordpress เพราะจะส่งผลให้เกิด ปัญหาการแสดงผลที่ผิดพลาด ปรับแก้ไขยาก เพราะมี special code จากโปรแกรมต้นทางส่งมายัง Editor ของ Wordpress หากจาเป็นต้องคัดลอกข้อมูล ให้นาข้อมูลดังกล่าวไปวาง (Paste) บน NotePad ก่อนแล้วจึงคัดลอกจาก NotePad มาวางใน Editor ของ Wordpress
- 50. นาเข้ารูปภาพ # 1 รูปภาพที่นามาประกอบเนื้อหาของ Wordpress จะต้องเตรียมดังนี้ กาหนดชื่อแฟ้มภาพ (File name) ให้เป็นภาษาอังกฤษ และ/หรือผสม ตัวเลข ห้ามใช้ภาษาไทย ฟอร์แมตภาพ .gif สาหรับภาพวาด ภาพลายเส้น ภาพที่มีสีไม่มาก .jpg/.png สาหรับภาพสีมาก .png สาหรับภาพสีมากที่ต้องการพื้นโปร่งใส (Transparent) ควรย่อภาพให้มีขนาดที่เหมาะสม และ/หรือลดความละเอียดของภาพ (Resolution) ระหว่าง 72 – 96 dpi รูปภาพ/แบบอักษร/ข้อความไม่ควรละเมิดลิขสิทธิ์ http://openclipart.org ค้นหาภาพจาก Google, Flickr ด้วยเงื่อนไข CreativeCommons ระบุ Metadata ของภาพให้เหมาะสมในระดับดิจิทัล
- 51. ตัวอย่างการเลือกฟอร์แมตภาพที่ไม่เหมาะสม ภาพด้านซ้ายสีแตก ไม่สม่าเสมอ
- 52. Progressive & Interlaced รูปภาพที่แสดงในโหมดปกติ การแสดงผลภาพ การแสดงผลภาพแบบ Interlaced แบบ Progressive
- 53. PNG & GIF Transparent
- 56. (cc)
- 57. การสืบค้นภาพที่เป็น (cc) (cc)
- 58. วัน/เวลากล้องถ่ายภาพดิจิทัล/อุปกรณ์ดิจิทัล พรบ.การกระทาความผิดทางคอมพิวเตอร์
- 62. นาเข้ารูปภาพ # 2 จากหน้าจอสร้าง/แก้ไขเนื้อหา คลิกเมาส์ ณ ตาแหน่งที่ตองการ ้ วางภาพ คลิกปุ่ม Add an Image คลิกเลือกภาพจากปุ่ม Browse
- 63. นาเข้ารูปภาพ # 3 ป้อนชื่อภาพในรายการหัวข้อ ใช้ภาษาไทยได้ ป้อนคาบรรยายภาพใน รายการคาอธิบายสลับหรือ คาขยายความ หากต้องการให้คลิกที่ภาพ เพื่อคลิกไปยังภาพขนาดต้นฉบับ ให้คลิกปุ่ม URL ของไฟล์ แต่ถ้า ไม่ต้องการให้คลิกภาพ คลิกปุ่มไม่มี กาหนดตาแหน่งการวางภาพ จากรายการจัดแถว กาหนดขนาดภาพจากขนาด คลิกปุ่มใส่เข้าในเรื่อง
- 64. สร้างหน้า (Page) ใหม่ หน้าหลัก, หน้า, เขียนหน้าใหม่ (หน้าใหม่)
- 65. การจัดการ/เขียนเรื่อง (Post) หน้าหลัก, เรื่อง หน้าหลัก, เรื่อง, เขียนเรืองใหม่ (เรื่องใหม่) ่
- 66. ระบุชื่อเรื่อง เขียนเรื่อง ใส่เนื้อหาย่อในรายการ ตัดทอน ระบุ URL อ้างอิงใน รายการ ส่ง Trackbacks ใช้ , คั่นหากมีหลาย URL เงื่อนไขการแสดงความ คิดเห็นจากรายการ สนทนา เลือกชื่อผู้เขียน จาก รายการ ผู้เขียน กาหนดหมวดหมู่จาก Categories กาหนดป้ายกากับจาก Post Tags ระบุเงื่อนไขการเผยแพร่ จาก เผยแพร่
- 67. ป้ายกากับ - Tags คาค้น แสดงปริมาณเนื้อหา กรองข้อมูลตามป้ายที่เลือก
- 68. ตัวอย่างการใส่เนื้อหา เนื้อหาที่เป็นข้อความ เนื้อหาพร้อมภาพ เนื้อหาพร้อมแนบไฟล์เอกสาร เนื้อหา Online slide จาก Slideshare เนื้อหา Video จาก Youtube
- 69. Slideshare ผ่าน Wordpress Slideshare.net เป็นแหล่งรวมสไลด์/เอกสารแหล่งใหญ่บนโลก อินเทอร์เน็ต นา PPT, PDF, DOC ไปจัดเก็บและแปลงเป็น Online Slide, i-Paper อัตโนมัติในรูปแบบ Flash-based ค้นสื่อจาก slideshare.net แล้วคลิกเลือกสื่อที่ต้องการ คลิกรายการ Embed คัดลอกคาสั่งจากรายการ Embed this presentation มาวางใน Post ผ่านโหมดการทางาน HTML
- 70. Code ของ Slideshare 1 2
- 71. Slideshare ผ่าน Wordpress 1 2
- 73. Youtube ผ่าน Slideshare 1 2 3 4
- 74. การแสดงความเห็น กรณีผู้ชมทั่วไป ต้องป้อนข้อมูลส่วนตัว ผลจะไม่ปรากฎทันที กรณีสมาชิก ใส่เฉพาะความเห็น ความเห็นที่เผยแพร่ต้อง ผ่านการอนุมัตจากผู้ดูแลก่อน ิ
- 75. การอนุมัติความเห็น จากหน้าหลัก จะปรากฎส่วนควบคุม “เนื้อเรื่อง” แสดงว่ามี 4 ความเห็น รอพิจารณา 3 ความเห็น อาจจะเป็น Spam
- 77. สร้างลิงก์เข้าในเว็บ หน้าหลัก, ลิงก์, Add New ควรสร้างหมวดหมู่ลิงก์ก่อน ด้วยคาสั่งหน้าหลัก, ลิงก์, ลิงก์หมวดหมู่ การแสดงผลลิงก์ใน หน้าเว็บให้กาหนดด้วย Widgets ชื่อ ลิงก์
- 78. แบบสารวจ (Poll) หน้าหลัก, โพลล์
- 79. เผยแพร่โพลล์ สร้างเรื่องใหม่ New Post คลิกปุ่ม Add Poll แล้ว เลือกโพลล์ที่ต้องการเผยแพร่
- 80. ตอบโพลล์
- 81. ร่วมเป็นสมาชิกกับ Blog ที่มีอยู่แล้ว ติดต่อเจ้าของ Blog ให้เพิ่มบัญชี Login เข้าสู่ระบบ ป้อนข้อมูล
- 82. ตั้งค่าการเขียน
- 83. ตั้งค่า การอ่าน
- 86. ตั้งค่าสื่อ
- 87. การทางานร่วมกับ Web 2.0 อื่นๆ ทางานผ่าน Widgets กาหนดค่า Widgets แตกต่าง ตามบริการ Web 2.0 อาจจะต้องเป็นสมาชิก บริการ Web 2.0 ที่ต้องการก่อน
- 88. e-Commerce ด้วย Blog ขายอะไรดีผ่าน Blog ประเด็นสาคัญ สินค้าราคาถูกกว่าท้องตลาด อย่าลืมประยุกต์ใช้ Web 2.0 สินค้าเฉพาะกลุ่ม สินค้า “ไม่” ยอดนิยม Tools ให้เหมาะสม หลากหลาย สินค้าไม่ต้องการเปิดเผยตัวตน มีปฏิสัมพันธ์กับผู้ชม ผู้ซื้อ ลูกค้า สินค้ามีลักษณะเฉพาะตัว อย่างสม่าเสมอ สินค้าที่มีน้าหนักเบา กาหนดกลุ่มเป้าหมาย และ สินค้าที่ไม่ยุ่งยากในการจัดส่ง ลักษณะเฉพาะให้ได้ สินค้าที่เล่าเรื่องได้ สินค้าที่หายาก Do it yourself – DIY
- 89. แหล่งข้อมูล http://stks.or.th/wiki http://slideshare.net/boonlert