การพัฒนาเว็บไซต์ในรูปแบบ
 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




    Blog                    RSS
           Google


           HTML          CMS

                Web Programming
เริ่มต้นกับ Web 2.0 - Blog

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


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

คือ         หัวใจ             สาคัญ
วิธีเริ่มต้นกับ 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      +                     kampaengsaen
       I      ^
       O      @
       U      !
                                    k$mp$+ngs$+n#
กาหนดชื่อ Blog




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


           เปิดเมล์แล้วคลิก Link นี้ด้วย
ณ ขณะนี้ทุกท่านจะมีบัญชีการใช้งาน 2 ชุด


   e-Mail                 Wordpress.com
       User name คือ          User name คือ



       Password คือ           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) คือ                 จัดการวิดเจ็ตได้ด้วยคาสั่ง
 โปรแกรมที่เพิ่ม                    หน้าหลัก, รูปแบบบล็อก,
 ความสามารถให้บล็อก                 Widgets
      ลิงก์ไปที่ต่าง ๆ
      แสดงสถิติเยี่ยมชม
      แสดงหัวข้อเรื่อง
      แสดงข่าวสารจาก twitter
วิดเจ็ต
                      ลากจาก
                     ซ้ายไปขวา
   Widget จาเป็น
       Meta
       ค้นหา
       ปฏิทิน
       สถิติบล็อก
       หมวดหมู่           จานวน Sidebar
                          ขึ้นอยูกับ Themes
                                 ่
                                ที่เลือก
ประเภทเนื้อหา
   Post – เรื่อง                       Page – หน้า
       Dynamic Content                     Static Content
       นาเสนอเรียงตามวันที่/เวลา           นาเสนอด้วย Menu, Widget
       จัดเก็บตามวันที่/เวลา
        (Archives)
       จัดกลุ่มตามหมวดหมู่
        (Category)
       จัดกลุ่มตามป้ายกากับ (Tag)
   มักแสดงผลหน้าแรกของเว็บ
    Blog
ปรับแก้ไขข้อมูลเกี่ยวกับเว็บ – About

   หน้าหลัก, หน้า




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


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


                                                 5) อัปเดต




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


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

                      3) เลือกเงื่อนไข
                    การแสดงความคิดเห็น
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
นาเข้ารูปภาพ # 3
   ป้อนชื่อภาพในรายการหัวข้อ
    ใช้ภาษาไทยได้
   ป้อนคาบรรยายภาพใน
    รายการคาอธิบายสลับหรือ
    คาขยายความ
   หากต้องการให้คลิกที่ภาพ
    เพื่อคลิกไปยังภาพขนาดต้นฉบับ
    ให้คลิกปุ่ม URL ของไฟล์ แต่ถ้า
    ไม่ต้องการให้คลิกภาพ
    คลิกปุ่มไม่มี
   กาหนดตาแหน่งการวางภาพ
    จากรายการจัดแถว
   กาหนดขนาดภาพจากขนาด
   คลิกปุ่มใส่เข้าในเรื่อง
สร้างหน้า (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                       ประเด็นสาคัญ
        สินค้าราคาถูกกว่าท้องตลาด
                                                 อย่าลืมประยุกต์ใช้ Web 2.0
        สินค้าเฉพาะกลุ่ม
        สินค้า “ไม่” ยอดนิยม
                                                  Tools ให้เหมาะสม หลากหลาย
        สินค้าไม่ต้องการเปิดเผยตัวตน            มีปฏิสัมพันธ์กับผู้ชม ผู้ซื้อ ลูกค้า
        สินค้ามีลักษณะเฉพาะตัว                   อย่างสม่าเสมอ
        สินค้าที่มีน้าหนักเบา                   กาหนดกลุ่มเป้าหมาย และ
        สินค้าที่ไม่ยุ่งยากในการจัดส่ง           ลักษณะเฉพาะให้ได้
        สินค้าที่เล่าเรื่องได้
        สินค้าที่หายาก
        Do it yourself – DIY
แหล่งข้อมูล
   http://stks.or.th/wiki
   http://slideshare.net/boonlert

2010012 Wordpress Com Boonkiat