ลย ณฑ 2552 - Silpakorn University · ยามว างที่หลากหลายทั้ านงานอดงดิเรกกิจกรรมเพื่อสังคม
Wordpress & Server2GoWordpress & Server2Go บเลิศ อร พู ลย น ว าการ...
Transcript of Wordpress & Server2GoWordpress & Server2Go บเลิศ อร พู ลย น ว าการ...
1
Wordpress & Server2Go
บุญเลิศ อรุณพิบูลยนักวิชาการ
ศูนยบริการความรูทางวิทยาศาสตรและเทคโนโลยีสํานักงานพัฒนาวิทยาศาสตรและเทคโนโลยีแหงชาติ (สวทช.)
[email protected]://stks.or.th
http://slideshare.net/boonlerthttp://facebook.com/boonlert.aroonpiboon
2
บุญเลิศ อรณุพิบูลย
� 2536 – 2551� NECTEC
� เจาหนาที่ระบบคอมพิวเตอร� วิทยากร ศูนยฝกอบรม
คอมพิวเตอรเนคเทค� รักษาการหัวหนางานสนับสนุน
ทางเทคนิค� รักษาการหัวหนางานวิชาการ� รักษาการหัวหนางานพัฒนาสื่อ
สาระดิจิทัล� นักวิชาการ
� 2551 – ปจจุบัน � STKS / NSTDA
� นักวิชาการ� รักษาการหัวหนางานพัฒนาและ
บริการสื่อสาระดิจิทัล
3
Wordpress� ซอฟตแวร/ฟรีบริการในกลุมโอเพนซอรส (Open Source Software)
ที่ทําหนาที่บริการจัดการเนื้อหาสําหรับเว็บ (CMS – Content Management System)
� รูปแบบการนําเสนอเนื้อหาเว็บเปนแบบ Blog � weB + Log� การนําเสนอเนื้อหาที่เรียงตามวัน/ที่เวลาที่เผยแพรผลงาน� เนื้อหาลาสดุ แสดงเปนลําดับแรก� จัดกลุมเนื้อหาตามวันที/่เวลา, หมวดหมู (Category) และปายกํากับ
(Tag)� สามารถประยุกตใชงานไดหลากหลาย
� เว็บสวนตัว/หนวยงาน/กิจกรรม� เว็บแลกเปลี่ยนเรียนรูผานชุมชนนักปฏิบัติ (CoP) เพื่อการจัดการความรู� เว็บไซตบริการวิชาการ ความรู – Online Learning� เว็บเพื่อการคาขาย/พาณิชยอิเล็กทรอนิกส (e-Commerce)
4
เหตุผลที่เลือกใช Wordpress
� ฟรี� ได Source Code และปรับแตงแกไขได� มีผูใชงานและนักพัฒนาจํานวนมาก
� เกิด Community ผูใชและผูพฒันา� ประยุกตใชงานไดหลากหลาย� มีโปรแกรมเสริมความสามารถหลากหลาย และฟรี� เปนมิตรที่ดีกับ Google (Search Engine Friendly
& SEO – Search Engine Optimizer)� สอดรับกับเทคโนโลยีเว็บ 2.0 (Web 2.0)
6
Web 2.0
� ทุกคน (ตามเงื่อนไข/ขอกําหนด) มีสิทธิ์จัดการเนื้อหาในเว็บ� ไมใชผูชมเว็บแตเพียงอยางเดยีว� ควรใหความสําคัญกับ พรบ.การกระทําความผดิทางคอมพิวเตอร,
พรบ.ลิขสิทธิ์ และ พรบ. อื่นๆ ที่เกี่ยวของดวย
� เนื้อหาเปนมากกวาขอความ – รูปภาพ ภาพเคลื่อนไหว Flash Animation Online Slide i-Paper Sound/Audio Video …
� ทํางานกันเปนชุมชน (Communities) ผสานเทคโนโลยีรวมกัน (Mash-up)
� ไมถูกจํากัดดวยอุปกรณ� ติดตาม ศึกษา วิเคราะหพฤติกรรมผูชมเว็บไดมากขึ้น
10
การใหบริการของ Wordpress
� http://www.wordpress.com� บริการฟรีออนไลน
� http://www.wordpress.org� บริการดาวนโหลดซอฟตแวรตนฉบับ Wordpress เพื่อ
การติดตัง้บนเครื่องแมขายเว็บของตนเอง/หนวยงาน
� http://mu.wordpress.org/� บริการดาวนโหลดซอฟตแวรตนฉบับ Wordpress Mu
เพื่อการตดิตั้งบนเครื่องแมขายเว็บของตนเอง/หนวยงาน� มีลักษณะการทํางานแบบกลุม Blog
14
ใชจริง ทําอยางไร
องคกร� เตรียม Server
� ติดตั้ง Linux� ฐานขอมูล MySQL� โปรแกรมภาษา PHP
� สิทธิ์ในการเขาถึง Server
สวนตัว� หนวยงานเตรียมพื้นที่ให
� สิทธิ์ในการเขาถึง Server
� เชาพืน้ที่ ISP
16
Server2Go
� ซอฟตแวรจาํลองเครื่องแมขายเว็บ (Web Server) แบบพกพา� Apache� PHP� MySQL� PHPMyAdmin� Perl
� ไมตองเสียเวลาตดิตัง้� ดาวนโหลด แลว unzip ก็ใชงานไดทันที
� คัดลอก (Copy) ระบบที่พัฒนาใส Thumb Drive & CD-ROM ไปใชงานที่ใดก็ได
20
สรางตารางขอมูล MySQL # 2
� คลิกในรายการ “สรางฐานขอมูลใหม”� ปอนชื่อ เชน wordpress� เลือกตัวเลอืกถัดไปเปน utf8_unicode_ci� จากนั้นคลิกปุม “สราง”
1 2 3
4
24
ติดตั้ง Wordpress # 4
� ปอนขอมูลการติดตั้งดังนี้� Database Name : wordpress� User Name : root� Password : ไมตองระบุ� Database Host : localhost� Table Prefix : wp_� คลิกปุม submit
25
ติดตั้ง Wordpress # 5
� หากโปรแกรมตรวจสอบแลวขอมูลตามขั้นตอนที่ 4 ถูกตอง จะปรากฎขอมูลดังภาพ ใหคลิกปุม Run the install
26
ติดตั้ง Wordpress # 6
� ปอนขอมูลเกี่ยวกับเว็บไซต� Site Title: ชื่อเว็บไซต� User name: บัญชชีื่อผูควบคมุเว็บ
เชน admin� Password: รหัสผานของ
ผูควบคุมเว็บ� Your e-Mail: e-Mail Address
ของผูควบคุมเว็บ� จากนั้นคลิกปุม
Install WordPress
27
ขอแนะนําการสรางรหัสผาน
� กําหนดเกณฑการสรางรหัสผานใหตนเอง� ใหความสําคญักับการสรางรหัสผาน� หมั่นเปลี่ยนรหัสผาน
� เชน กําหนดอักขระพิเศษใหสระ หรือปดทายดวย #� A $� E +� I ^� O @� U !
kampaengsaen
k$mp$+ngs$+nKamPaengSaen#
31
การเขาสูระบบเว็บไซต – Log in
� เขาสูเว็บไซต เลื่อนหาคําสั่ง Log in จากกลุมรายการ Meta
� ปอนบัญชี Admin เพื่อเขาสูระบบ
34
ปรับแตงระบบเว็บไซต - Config
� Site Title� ชื่อเว็บไซตควรเปนภาษาอังกฤษ ตามดวยภาษาไทยได มีความหมาย
ชดัเจน ผูใชนึกถึงไดงาย (คําคน) มีความยาวรวมไมเกิน 64 ตัวอักษร
� Tagline� สโลแกนของเว็บ
� Membership� อนุญาตใหผูชมเว็บสมัครสมาชกิไดหรือไม
� Time Zone� ใหเลือกเปน UTC+7
� คลิกปุม Save Change
35
หนาควบคุมหลัก – Dashboard
� เมื่อปรับแตง/ทํางานใด สามารถกลบัสูหนาควบคุมหลักไดโดยคลิกคําสั่ง Dashboard
1
43
เปลี่ยนกราฟกหัวเรื่องเว็บ # 4
� สามารถนําภาพที่สราง/จัดเตรียมเปนภาพหัวเรื่องเว็บไดโดยคลิกปุม Browse แลวเลือกภาพ จากนั้นคลิกปุม Upload
� โปรแกรมจะใหตัดสวนของภาพตามขนาดที่โปรแกรมกําหนด แลวคลิกปุม Crop and Publish
44
ใสรายละเอียดเว็บ – About # 1
� Wordpress เตรียมเมนูควบคุมหลักให 2 เมนู ไดแก� Home สําหรับการกลับสูหนาหลัก� About สําหรับนําเสนอรายละเอียดของเว็บ
� ในแตละเว็บควรมีการแสดงรายละเอียดตางๆ ของเว็บ ที่เหมาะสมโดยปรับแกไขไดดังนี้� ทํางานในโหมด Dashboard� เลือกเมนู Pages
Page เปนเนื้อหาประเภทหนึ่ง
ของ Wordpressมักจะเรียกวา
Static Content
45
ใสรายละเอียดเว็บ – About # 2
� คลิกที่ชื่อหนา About เพื่อเขาสูการแกไข� เมื่อแกไขแลวใหคลิกปุม Update เพื่อปรับปรุงขอมูล
47
คัดลอกเนื้อหาจากแหลงอื่นๆ
� ไมควรคัดลอก (Copy) เนื้อหาจาก Word หรือแหลงอื่นๆ มาวางใน Editor ของ Wordpress เพราะจะสงผลใหเกิดปญหาการแสดงผลที่ผิดพลาด ปรับแกไขยาก� เพราะมี special code จากโปรแกรมตนทางสงมายัง Editor ของ
Wordpress
� หากจําเปนตองคดัลอกขอมูล ใหนําขอมูลดงักลาวไปวาง (Paste) บน NotePad กอนแลวจงึคัดลอกจาก NotePad มาวางใน Editor ของ Wordpress
48
นําเขารูปภาพ # 1
� รูปภาพที่นํามาประกอบเนื้อหาของ Wordpress จะตองเตรียมดังนี้� กําหนดชื่อแฟมภาพ (File name) ใหเปนภาษาอังกฤษ และ/หรือผสม
ตัวเลข หามใชภาษาไทย� ฟอรแมตภาพ
� .gif สําหรับภาพวาด ภาพลายเสน ภาพที่มีสีไมมาก� .jpg/.png สําหรับภาพสีมาก� .png สําหรับภาพสีมากที่ตองการพื้นโปรงใส (Transparent)
� ควรยอภาพใหมีขนาดที่เหมาะสม และ/หรือลดความละเอียดของภาพ (Resolution) ระหวาง 72 – 96 dpi
� รูปภาพ/แบบอักษร/ขอความไมควรละเมิดลิขสิทธิ์� http://openclipart.org� คนหาภาพจาก Google, Flickr ดวยเงื่อนไข CreativeCommons
� ระบุ Metadata ของภาพใหเหมาะสมในระดับดิจิทัล
50
Progressive & InterlacedProgressive & Interlaced
���������� �������ก��
ก���� ������� Interlacedก���� ������� Progressive
60
นําเขารูปภาพ # 2
� จากหนาจอสราง/แกไขเนื้อหา คลกิเมาส ณ ตาํแหนงที่ตองการวางภาพ คลิกปุม ใสรูปภาพ
� คลิกเลือกภาพจากปุม Select Files
61
นําเขารูปภาพ # 3
� ปอนชื่อภาพในรายการ Title ใชภาษาไทยได
� ปอนคําบรรยายภาพในรายการ Caption/Descriptions
� หากตองการใหคลิกทีภ่าพเพื่อคลิกไปยังภาพขนาดตนฉบับ ใหคลิกปุม File URL แตถาไมตองการใหคลิกภาพ คลิกปุมNone
� กําหนดตําแหนงการวางภาพจากรายการ Alignment
� กําหนดขนาดภาพจาก Size� คลิก Insert into Post
62
การสรางหนาใหม (New Page)
� การสรางหนาใหม ทําได 2 วิธี � คลิกคําสั่ง Pages, Add New� คลิกรายการ New Page
63
การสรางหนาใหม (New Page)
1) ปอนชื่อเรื่อง
2) พิมพเนื้อหา
4) เลือกรูปแบบและลําดับการนําเสนอ
5) Publish
3) เลือกเงื่อนไข Comment
64
ปรับแตงคาควบคุมของ Page
� อนุญาต/ไมอนุญาตการแสดงความคิดเห็น
� การแสดงผล Page
ปรับเปลี่ยนลําดับดวยคา Order
65
การเผยแพรเนื้อหาแบบ Blog
� การเผยแพรเนื้อหาแบบ Blog จะมีลักษณะที่ควบคุมดวยวันที่/เวลาที่เผยแพร (Published Date) โดยเรียกเนื้อหาลักษณะนี้วา Post� สามารถระบุหมวดหมู (Category) และปายกํากับ (Tag) ได
� การทํางานกับ Post ทําไดโดยเลอืกคําสั่ง Posts
1
66
การลบ Post
� เลือกคําสั่ง Posts จาก Dashboard� นําเมาสชีท้ี่รายการ Post ที่ตองการลบ คลิกคําสั่ง
Trash
1
2
68
1) ปอนชื่อเรื่อง
2) พิมพเนื้อหา
3) พิมพเนื้อหาสรุป4) สราง/เลือกหมวดหมู
5) พิมพปายกํากับ
6) ระบุ URL เพื่ออางอิง
7) กําหนดเงื่อนไขการเผยแพรและ Publish
69
การแสดงผล Post
� Post ที่เผยแพรแลวจะแสดงผลผานหนาแรกของเว็บ� Post ที่สรางลาสุด จะแสดงบนสุด� แตละ Post จะถูกจัดกลุมดวย
� วันที่/เวลาเผยแพร (Archives)� หมวดหมู (Categories)� ปายกํากับ (Tagged)
70
เขียนอะไร/อยางไร
� เรื่องราวใกลตัว ที่ชอบและถนัด� เขียนแบบเบาๆ� เลาเรื่อง� นําเสนอภาพ พรอมเรื่องประกอบ� เรียนรูรวมกัน� เขียนตามเปาหมายที่วางไว
71
Slideshare ผาน Wordpress
� Slideshare.net เปนแหลงรวมสไลด/เอกสารแหลงใหญบนโลกอินเทอรเน็ต� นํา PPT, PDF, DOC ไปจัดเก็บและแปลงเปน Online Slide,
i-Paper อัตโนมัติในรูปแบบ Flash-based
� คนสื่อจาก slideshare.net แลวคลิกเลือกสื่อที่ตองการ� คลิกรายการ Embed� คัดลอกคําสั่งจากรายการ Embed this presentation มาวางใน Post
ผานโหมดการทํางาน HTML
79
ติดตั้ง Plug-ins # 1
� เลือก Dashboard, Plugins, Add New, Upload� Browse เลือกไฟล (.zip) แลว Install Now
1
2
3
4
5 6
80
ติดตั้ง Plug-ins # 2
� การติดตัง้เสร็จสมบรูณ� คลิกรายการ Activate Plugin เพื่อให Plug-in ที่ติดตัง้
ทํางาน
1
82
การจัดการตาราง (Table) # 1
� ติดตัง้ Plug-in ชื่อ WP-Table� สรางแมแบบตารางจากคําสั่ง Dashboard, Posts, Tables
83
การจัดการตาราง (Table) # 2
� เมื่อสรางแมแบบตารางแลว สามารถเขาไปแกไขรูปแบบการแสดงผลโดยคลิก Edit
� ปอนขอมูล ปรับแตงรูปแบบการแสดงผล แลว Updated� ปอนคําสั่ง [table=ลําดับที่ของตาราง] ใน Post เพื่อใชงาน
85
ใช Wordpress ใหเต็มประสิทธิภาพตองเตรียมพรอมอยางไร
Server& Security
การติดตั้งปรับแตงโปรแกรม เนื้อหา
System Administratorการบริหารจัดการ Server ระบบรักษาความปลอดภัย การจัดการฐานขอมูลการจัดการ Log file การจัดการสิทธิ์ของการเขาถึงระบบ
- Web Master การติดตั้งและปรับแตง การจัดการสมาชิกการจัดการหมวดเนื้อหา การติดตั้ง Plug-ins และเปดใชงาน การแกไขแมแบบเว็บไซตดวยเทคนิคแทนที่
- Web Master การแกไข CSS, HTML, PHP ระดับที่ 1- Web Master & Web Programmer การแกไข CSS, HTML, PHP ระดับสูง- Web Programmer การพัฒนาตอยอดดวย web programming ตางๆ
ทุกคน ภายใตขอกําหนดรวมกัน(มาตรฐานสื่อดิจิทัลตางๆ)