ฝึกปฏิบัติการออกแบบเว็บไซต์ด้วย Joomla3 ที่รองรับการแสดงผลผ่านอุปกรณ์ที่หลากหลาย

1. Joomla3 + XAMPP Portable ฝึกปฏิบัติการออกแบบเว็บไซต์ด้วย Joomla3 ที่รองรับการแสดงผลผ่านอุปกรณ์ที่หลากหลาย
บุญเลิศ อรุณพิบูลย์
รองผู้อานวยการฝ่ายบริการความรู้ทางวิทยาศาสตร์และเทคโนโลยี
สานักงานพัฒนาวิทยาศาสตร์และเทคโนโลยีแห่งชาติ
boonlerta@gmail.com
http://www.thailibrary.in.th
http://facebook.com/boonlert.aroonpiboon

2. เทคโนโลยีการพัฒนาเว็บไซต์
เผยแพร่ เนื้อหา
เพิ่มลูกเล่น
ระบบสมาชิก ระบบสืบค้น ระบบจัดการเนื้อหา แบบฟอร์มต่างๆ
CMS
HTML
* Edit Plus
HTML
* Generator
* Dreamweaver
* Front Page
JavaScript
HTML
JavaScript
PHP/ASP
Database
* MS Access
* MySQL
* Microsoft SQL
* Oracle
* PostgreSQL
* DB2
CSS

3. CMS คือ ?
•Content Management System
•ระบบบริหารจัดการเนื้อหาสาหรับเว็บ • ลดทรัพยากร ใน การพัฒนา (Development) และ บริหาร (Management) เว็บไซต์ ที่ ใช้ ใน การสร้าง และ ควบคุมดู แลไซต์
– กา ลังคน
– ระยะ เวลา
–เงินทอง
•มัก จะ นา เอา ภาษาเว็บโปรแกรมมิ่ง ต่างๆ มา พัฒนา

4. CMS ที่คุ้นเคย
•PostNuke
•PHP-Nuke
•MyPHPNuke
•Mambo
•eNvolution
•MD-Pro
•XOOPs
•OpenCMS
•Plone
•JBoss
•Drupal
http://www.cmsmatrix.org/

5. http://cmsmatrix.org/

6. http://cmsmatrix.org

7. http://trends.google.com/

8. Joomla คือหนึ่งทางเลือก
•สนับสนุน Web Accessibility
•สนับสนุนการแสดงผลบนอุปกรณ์ที่หลากหลาย
•สนับสนุนการค้นคืน
–Metadata กลาง
–Metadata กากับหน้าเอกสาร
http://www.joomla.org/

9. CMS - Joomla
•ไม่ใช่ CMS ที่เหมาะสมกับการออกแบบสร้างเว็บทุกความ ต้องการ
–สารวจความต้องการของท่าน
–นามาเปรียบเทียบกับ CMS อื่นๆ ด้วย http://www.cmsmatrix.org
–นา CMS ที่ได้มาดูความนิยมด้วย http://trends.google.com
•ทาไมถึง “ดัง” ในช่วงนี้
–ง่าย เมื่อเทียบกับ CMS อื่นๆ
–มีเอกสารเผยแพร่เยอะ
–พูดปากต่อปาก
–มีกลุ่มผู้พัฒนาที่ยังทางานอยู่
–มีเครื่องมือให้เลือกใช้เฉพาะ ทั้งฟรีและต้องจ่ายเงิน

10. ระดับความรู้การใช้งาน Joomla
Server
& Security
การติดตั้ง
ปรับแต่งโปรแกรม
เนื้อหา
System Administrator
การบริหารจัดการ Server ระบบรักษาความปลอดภัย การจัดการฐานข้อมูล
การจัดการ Log file การจัดการสิทธิ์ของการเข้าถึงระบบ
- Web Master การติดตั้งและปรับแต่ง Joomla การจัดการสมาชิก Joomla
การจัดการหมวดเนื้อหา Joomla การติดตั้ง Extension และเปิดใช้งาน
การแก้ไขแม่แบบเว็บไซต์ด้วยเทคนิคแทนที่
- Web Master การแก้ไข CSS, HTML, PHP ระดับที่ 1
- Web Master & Web Programmer การแก้ไข CSS, HTML, PHP ระดับสูง
- Web Programmer การพัฒนา Joomla ด้วย web programming ต่างๆ
ทุกคน ภายใต้ข้อกาหนดร่วมกัน (มาตรฐานสื่อดิจิทัลต่างๆ)

11. ใช้จริง ทาอย่างไร
•องค์กร
–เตรียม Server
•ติดตั้ง Linux
•ฐานข้อมูล MySQL
•โปรแกรมภาษา PHP –สิทธิ์ในการเข้าถึง Server
•ส่วนตัว
–หน่วยงานเตรียมพื้นที่ให้ •สิทธิ์ในการเข้าถึง Server –เช่าพื้นที่ ISP หรือ Data Provider อื่นๆ
•ฝึกหัด –ใช้ซอฟต์แวร์จาลอง Server
•Server2Go
•XAMPP
•AppServ

12. XAMPP Portable
•โปรแกรมจาลอง เครื่องแม่ข่ายเว็บแบบพกพา
•Apache + MySQL + PHP

13. XAMPP Control Panel

15. การเตรียมโฟลเดอร์สาหรับ Joomla
•server-portablehtdocs
ชื่อโฟลเดอร์ ภาษาอังกฤษตัวพิมพ์เล็ก ผสมตัวเลข สั้น กระชับ สื่อความหมาย ห้ามเว้นวรรค ห้ามใช้อักขระพิเศษ ยกเว้น - ตัวอย่าง joomla3

16. การติดตั้ง Joomla 3
ส่วนประกอบ URL ตรงกับชื่อโฟลเดอร์

17. ส่วนแรกของ การติดตั้ง
Site Name: ชื่อเว็บไซต์ ใช้ตามไวยากรณ์ที่ถูกต้อง ใช้ภาษาไทยได้ (ควรอยู่ หลังภาษาอังกฤษ) ไม่ยาว มากเกินไป สื่อความหมาย ชัดเจน ไม่มีอักขระพิเศษ ผสม Description: ข้อความ อธิบายเว็บไซต์ เป็นส่วน ให้ข้อมูลกับ Google

18. ตัวอย่าง Site name & Description

19. ส่วนแรกของ การติดตั้ง
Admin Email: อีเมลของ ผู้ดูแลเว็บ Admin Username: ชื่อ บัญชีของผู้ดูแลเว็บ (ตัวอย่าง admin) Admin Password: รหัสผ่านของผู้ดูแลเว็บ (ตัวอย่าง 123456 ทั้งนี้เป็นตัวอย่างที่ ไม่สมควรทา)

20. รหัสผ่านของคุณแข็งแรงพอหรือไม่ ?
http://www.passwordmeter.com/

21. ข้อแนะนาการสร้างรหัสผ่าน
•มีความยาวพอสมควร ไม่น้อยกว่า 8 อักขระ
•ผสมทั้งอักขระตัวพิมพ์ใหญ่ ตัวพิมพ์เล็ก อักขระพิเศษ
กาหนดเกณฑ์การสร้างรหัสผ่านให้ตนเอง
ให้ความสาคัญกับการสร้างรหัสผ่าน
เช่น กาหนดอักขระพิเศษให้สระ ปิดท้ายด้วย #
A $
E +
I ^
O @
U !
kampaengsaen k$mp$+ngs$+n#

22. ส่วนกำหนดระบบฐำนข้อมูล
เลือก Database Type เป็น MySql
ระบุชื่อบัญชี Username ของฐานข้อมูล กรณีนี้คือ root
ระบุรหัสผ่านของฐานข้อมูล
กรณีนี้คือ ไม่ต้องระบุ
ระบุชื่อฐานข้อมูล แนะนาให้ระบุตรงกับชื่อ โฟลเดอร์

23. เลือกประเภทของข้อมูลตัวอย่าง หรือไม่ต้องการติดตั้งข้อมูล ตัวอย่าง
สถานภาพค่าติดตั้งต่างๆ

24. เพื่อความปลอดภัย จะต้องลบโฟลเดอร์ installation ออกจากระบบ

25. การติดตั้ง Joomla 3 เสร็จสมบูรณ์
คลิกปุ่ม Site เพื่อแสดงหน้าเว็บ

26. หน้ำเว็บพร้อมข้อมูลตัวอย่ำง

27. การตรวจสอบการแสดงผลผ่าน Smart Phone/Tablet
•Start, Run, CMD
IPv4 Address … xx.xx.xx.xx
เป็นการตรวจสอบผ่านระบบจาลองผ่านเครือข่ายวงเดียวกัน

28. หน้าเว็บบนพีซี
หน้าเว็บบน Smart Phone

29. การเข้าสู่ระบบผู้ดูแลเว็บ

30. หน้าควบคุมของผู้ดูแลเว็บ

31. หน้ำเว็บแบบไม่ติดตั้งข้อมูลตัวอย่ำง

32. การปรับแต่งระบบ

33. ประเภทบทความของ Joomla
•Static Article
–Add New Article
•Uncategorized
•Dynamic Article
–สร้าง Category –สร้างบทความ โดยระบุให้ตรงกับ Category ที่ ต้องการ

34. Category/Article
Website
ข่าว
ข่าว ประชาสัมพันธ์
งานวันครู
สัมมนา วิชาการ
ข่าวจัดซื้อจัด จ้าง
จัดซื้อ คอมพิวเตอร์
จัดซื้อ Server
สาระความรู้
วิทยาศาสตร์
การสอน
ประวัติ
ติดต่อสอบถาม

35. การสร้างเนื้อหาใน Joomla

36. ตัวอย่างกาหนดรายละเอียดเกี่ยวกับเนื้อหา

37. Joomla Article Manager

38. การสร้างเมนูแสดงเนื้อหา

39. การสร้างรายการเมนู

40. การสร้างรายการเมนู

41. ตัวอย่างการสร้างรายการเมนู

42. ตัวอย่างรายการเมนู

43. การสร้างเนื้อหาแบบหมวดหมู่
•Control Panel, Category Manager

44. การสร้างหมวดหมู่เนื้อหา

45. การสร้างเนื้อหาตามหมวดหมู่

46. การแสดงเนื้อหาในหน้าแรกของเว็บ