SmartBoY
วันพุธที่ 29 กันยายน พ.ศ. 2553
Back TO Blogger :))
หลังจากการใช้บล๊อกสำหรับการเรียนวิชา WBI
ต่อไป จะมาอัพเดทเรื่องราวต่างๆ ทั้งการท่องเที่ยว
การเรียน การฝึกสอน รวมทั้งประสบการณ์ดีดี ผ่านทางนี้นะครับ
วันอังคารที่ 2 กุมภาพันธ์ พ.ศ. 2553
Learning Log Week 09
ได้นำเสนองาน Joomla ของตนเองครั้งที่ 1 โดยประกอบด้วย
- Site Structure
- วัตถุประสงค์ กลุ่มเป้าหมาย และ เนื้อหา
- Home Page
- และนำเสนอตัวเว็บจริง ซึ่งทำไว้แล้วประมาณ 60%
นอกจากนี้ ยังได้เรียนรู้ถึงการอัพโหลด Joomla ขึ้น Server โดยมีขั้นตอน คือ
((เว็บที่เพื่อนแนะนำในการอัพโหลด joomla คือ http://www.thport.com/ ))
1. ดู server ที่เราจะนำไปฝากไว้ครับว่าเขารองรับ CMS Joomla หรือป่าว
2. แบ็คอัพเว็บไซต์เราก่อน เพื่อความปลอดภัย
3.Export ไฟล์ฐานข้อมูลของเว็บไซต์ออกมา
4. แก้ไข ไฟล์ configuration.php หลักการของขั้นตอนนี้ก็คือ ทุกเว็บไซต์ที่สร้างด้วย Joomla รายละเอียดการทำงานของเว็บไซต์ จะถูกบันทึกเก็บเป็นค่าไว้ในไฟล์ configuration.php และไฟล์นี้จะอยู่ที่ไดเรกทอรีรากของเว็บไซต์ ในไฟล์นี้มีส่วนหลักๆที่เราต้องแก้ก็ เช่น ชื่อโฮสต์ของเว็บเซิร์ฟเวอร์ ชื่อผู้ใช้ฐานข้อมูล รหัสผ่านใหม่ สำหรับเข้าใช้ฐานข้อมูล ชื่อผู้ใช้งาน FTP เป็นต้น
เมื่อแก้ไขทั้งหมดแล้ว ก็ให้ทำการ SAVE ไว้ที่เดิม
5. อัพโหลดทุกไฟล์ไปยังเว็บเซิร์ฟเวอร์ที่ใหม่โดยใช้ FTP
6.Import ฐานข้อมูลของเราขึ้นไปยังเว็บเซิร์ฟเวอร์ โดยผ่าน phpmyadmin
7. ทดลองเข้าเว็บไซต์ของเรา เป็นอันจบขั้นตอน
ทั้งนี้ ในขณะเพื่อนบรรยา ขาพเจ้าทำตามไม่ทันในหลายๆขั้นตอน เวลาจริงอาจต้องให้เพื่อนมาสอนอีกครั้ง
สิ่งที่ต้องเตรียมมา
- อาทิตย์หน้าหยุด เพื่อให้ทำ Joomla ให้สมบูรณ์ และสวยงาม
- ทำเอกสารให้เสร็จโดยเร็วพลัน เพราะมีงานอีกมา รอเราอยู่
ข้อเสนอแนะ
วันนี้ ไม่เครียดดีครับ ได้เรียนแบบชิลๆ สบายๆ
เตรียมนำเสนองานของตัวเอง แอบดูงานเพื่อนๆ
และก็ ได้รับคอมเม้นจากอาจารย์ เพื่อนำมาปรับแก้ได้ดี
ถือว่าคาบท้ายๆ ที่ผมชอบมากๆเลยครับ
วันจันทร์ที่ 18 มกราคม พ.ศ. 2553
Learning Log Week 08
สิ่งทีได้เรียนรู้
เนื่องด้วยผมติดธุระกับครอบครัว ทำให้ไม่สามารถมาเรียนได้ในเวลาเรียนของวิชานี้
แต่อาทิตย์ที่ผ่านมา ผมได้ลองทำ Joomla ตามเอกสารที่อาจารย์ได้ให้มา
บางส่วนผมก็เข้าใจ บางส่วนยังงงๆ ไม่ค่อยเข้าใจมาก เลยต้องถามเพื่อน อย่าง อวิรุทธ์ครับ
หลังจากวันเวลาเรียนดังกล่าว เพื่อนก็บอกว่า งานที่ให้ทำในห้องก็คือ ให้โพส เทคนิค Joomla
ซึ่งผมได้ทำไปตั้งแต่อาทิตย์ก่อนแล้ว และที่เหลือก็เรียนตามในเอกสาร ครับผม
สิ่งที่ต้องเตรียมมา
- ทำ Site Structure และ Page design เหมือนกับ การทำ Webquest เพื่อมาส่งในอาทิตย์หน้า
ข้อเสนอแนะ
ขอไม่ออกความเห็น เพราะไมได้มาเรียนครับ...........................
วันอาทิตย์ที่ 3 มกราคม พ.ศ. 2553
Learning Log Week 07
สิ่งที่ได้เรียนรู้
CMS : Content Management System
* ระบบที่นำมาช่วยในการสร้างและบริหารเว็บไซต์แบบสำเร็จรูป
* ผู้ใช้งานแทบไม่ต้องมีความรู้ในด้านการเขียนโปรแกรม
ประกอบด้วยระบบย่อยต่างๆ เช่น
- ระบบจัดการบทความและข่าวาร
- ระบบจัดการบทวิจารณ์
- ระบบจัดการสมาชิก
- ระบบสืบค้นข้อมูล
- ระบบจัดการไฟล์ดาวน์โหลด เป็นต้น
Wordpress ได้รับความนิยม เพราะยืดหยุ่นได้ดี มีผู้สร้าง Plug-in โปรแกรมเสริมต่างๆมาก
ตัวอย่างเช่น เว็บไซต์ของ CNN
Drupal อยู่ในรูปแบบไดนามิก เนื้อหาจะแสดงและสามารถคอมเม้นได้ Lay out มี 3 คอลัมน์หลัก คือ Content ตรงกลางและ Site bar ทั้งซ้ายและขวา
Google Sites ปรับแต่งรูปแบบได้ไม่มากนัก ใช้งานง่าย ไม่มีความรู้ก็สร้างได้ง่ายดายเหมือนสร้าง Blog
Mambo คล้ายกับ Joomla
Joomla ได้รับความนิยมมากที่สุดในปัจจุบัน ปรับแต่งได้ตามความต้องการ สร้างโครงและเทมเพลสได้เยอะ
LMS : Learning Management System
* ระบบที่นำเสนอความรู้ จัดเก็บข้อมูล เพื่อติดตามสิ่งต่างๆที่เกิดขึ้น และสนับสนุนการจัดการเรียนการสอน
อีเลิร์นนิ่ง ให้ดำเนินไปด้วยความเรียบร้อย โดยเป็นสภาพแวดล้อมการเรียนการสอน เช่น
- การสร้างบทเรียน การสร้างกิจกรรมออนไลน์
- การสร้างแบบทดสอบออนไลน์
- การจัดประเมินออนไลน์
- การตรวจสอบเวลาเรียนของผู้เรียน
- การตรวจสอบการทำกิจกรรม ให้คะแนนผู้เรียน
Blackboard จุฬาฯใช้ เป็นลายเส้น LMS ให้ผู้เรียนส่งงาน ทำแบบทดสอบ ทำแบบประเมินออนไลน์ เป็นต้น เป็น Software ลิขสิทธิ์ เสียค่าใช้จ่าย และเปลี่ยนแปลงได้ยาก
TCU-LMS ตัวอย่างเช่น เว็บมหาวิทยาลัยไซเบอร์ไทย
Sakai Project ในต่างประเทศ เป็นสื่อกลางสนับสนุนการเรียนการสอน
A-Tutor ออกแบบได้ตามต้องการ ผู้สอนสามารถพัฒนาต่อได้
Moodle ได้รับความนิยมมากที่สุดในปัจจุบัน ใช้สร้างแบบทดสอบ สร้างบทเรียน
ตัวอย่างเช่น http://www.project1.etc-chula.com/
การติดตั้ง AppServ เพื่อทดสอบ Joomla ในเครื่อง
- เริ่มต้นด้วยการดับเบิ้ลคลิกที่ตัวติดตั้ง
- หน้าต่างจะขึ้นมา คลิกปุ่ม Next และ I agree
- คลิกปุ่ม Next ไปเรื่อยๆ
- ในช่อง Server Name ให้ใส่ Localhost
- ในช่อง Administrator ใส่ E-mail ของเราเอง
- จากนั้นใส่รหัสผ่าน และ ใส่อีกครั้ง จากนั้น คลิก Install และ Next สุดท้ายคลิกปุ่ม Finish
จากนั้นให้ไปยัง Folder Joomla คลิก Copy แล้วนำไปวางใน Folder www ซึ่งจะอยู่ใน Folder Appserv ใน ไดร์ฟ C เป็นอันเสร็จสิ้น
ขั้นตอนการติดตั้ง Joomla
- พิมพ์ที่อยู่เว็บไซต์ กรณีทดสอบระบบในเครื่องให้ใช้ http://localhost/ชื่อโฟลเดอร์ ในที่นี้คือ Joomla
- จากนั้นเลือกภาษาที่ต้องการในที่นี้ Th - thai แล้วคลิปปุ่มถัดไป 2 ครั้ง อ่านข้อตกลงและลิขสิทธิ์และคลิกถัดไปอีกรอบ
- ในหน้าฐานข้อมูล
ชนิดฐานข้อมูล : mysql ชื่อโฮสต์ : Localhost
ชื่อผู้ใช้ฐานข้อมูล : root รหัสผ่าน : ของเรา ชื่อฐานข้อมูล : Joomla
และคลิกปุ่มถัดไปอีก 2 ครั้ง
- ในหน้าตั้งค่าระบบ
ชื่อเว็บไซต์ : ใส่ My Website E-mail รหัสและการยืนยัน ตามข้อมูลของเรา
จากนั้นคลิกปุ่มถัดไปและตกลง และคลิกปุ่มดูหน้าเว็บไซต์ เพื่อดูตัวอย่าง
- เพื่อให้การติดตั้งสมบูรณ์ อย่าลืมลบหรือเปลี่ยนชื่อ Folder Installation ไปเป็นชื่ออื่น จึงจะดูได้
- ลองดูตัวอย่างเว็บไซต์อีกครั้ง จะปรากฎหน้าเว็บไซต์ Joomla ว่างๆที่เราสร้างขึ้นมา
Front-end กับ Back- End
* Front- End
- ให้เข้า http://localhost/joomla
- ในหน้าเว็บไซต์จะประกอบด้วยองค์ประกอบย่อยๆหลายส่วน ซึ่งเรียกว่า Module เช่น Latest News, Search เป็นต้น
*Back-End
- ให้เข้า http://localhost/joomla/administrator คือส่วนของผู้ดูแลระบบ
-Site: การจัดการข้อมูลต่างๆของเว็บไซต์
-Menues:จัดการเกี่ยวกับเมนูและลิงค์
-Content: จัดการกลุ่มของบทความต่างๆ
-Components: ปรับตั้งค่าการทำงานของ Component
-Extension: ใช้ install และลบ extension ต่างๆ
-Tools: รวบรวมเครื่องมือสนับสนุนการทำงานระบบต่างๆ
-Helps: รวบรวมข้อมูลให้ความช่วยเหลือต่างๆ
**Extension Template
สำหรับการทำงานของระบบ Joomla นั้นจะแบ่งโดยอาศัยการแบ่งแยกข้อมูลในเว็บไซต์และการแสดงผลออกจากกัน นั้นหมายความว่า เมื่อต้องการเปลี่ยนหน้าตาของเว็บไซต์ ก็เพียงแต่เปลี่ยน Template ของเว็บไซต์ใหม่เท่านั้น
Template คือ รูปร่างหน้าตาของเว็บไซต์ทั้งหมดที่แสดงผลทางเว็บไซต์ ซึ่งสามารถนำไปใช้ร่วมกันในทุกๆหน้าของเว็บไซต์ มีความเป็นเอกภาพและความเหมือนกันทั้งเว็บไซต์ โดยในแต่ละ Template จะประกอบด้วยไฟล์หลายประเภท ทั้งไฟล์ภาษาPHP ไฟล์ภาพ โดยในTemplate นั้น จะมีทั้ง Freeware และ commercial ให้เลือกดาวน์โหลดกัน
นอกจากนั้นยังได้เรียนรู้การปรับแต่ง Joomla ของเราทั้งการสร้างเมนู ใส่ Article ปรับแต่ง Template แก้ภาษา เป็นต้นครับ
สิ่งที่จะต้องค้นคว้าเพิ่มเติม/ต้องเตรียมมาครั้งหน้า
* สัปดาห์หน้า วันที่ 11 มกราคม เตรียมพรีเซน WebQuest ของตัวเอง เรียนห้อง 403 อาคาร 4
* ให้ลองคิดดูว่า Project ต่อไปจะทำงานกลุ่มหรือเดี่ยวดีกว่ากัน ??
ข้อคิดเห็นอื่นๆ
* แอบเสียดาย อยากพรีเซน งานมากเลยครับ แฮะๆ
* ปีใหม่ หยุดก็เหมือนไม่ได้หยุดอะครับอาจารย์ งานก็มีเยอะอยู่ดี วันนี้เลยเหนื่อยๆหน่อยครับ
* ผมว่าทำงานกลุ่ม แล้วให้พรีเซนงาน ก็น่าจะแสดงให้เห็นได้ว่าเข้าใจหรือไม่เข้าใจนะครับอาจารย์
ไม่อยากให้มีสอบปลายภาคเลยครับ
วันจันทร์ที่ 14 ธันวาคม พ.ศ. 2552
Learning Log Week 06
(14 ธันวาคม 2552)
วันจันทร์ที่ 30 พฤศจิกายน พ.ศ. 2552
Learning Log Week 05
(30 พฤศจิกายน 2552)
สิ่งที่ได้เรียนรู้
หัวข้อ การสร้าง Animation อย่างง่ายโดย Image Ready ในที่นี้ใช้ VER.CS2
· เปิดโปรแกรม เลือกเมนู File เลือกคำสั่ง Import จากนั้นเลือก Folder as Frames
· ที่คำสั่ง Browse For Folder เลือก Folder ที่เก็บภาพที่ต้องการทำแอนิเมชันเอาไว้ กด OK
ภาพทั้งหมดจะปรากฏ สามารถปรับเวลาในการแสดงผลได้
· ถ้าต้องการเลือกปรับภาพหลายภาพพร้อมกันให้กดปุ่ม Shift สำหรับเลือกภาพแบบต่อเนื่อง หรือกด Ctrl สำหรับเลือกภาพแบบไม่ต่อเนื่อง จากนั้นลองตรวจสอบ
· จากนั้นก็บันทึกภาพ โดยไปที่เมนู File เลือกคำสั่ง Save optimized As….
· ประเภทของไฟล์ เลือก .GIF คลิกปุ่ม Save และทดลองเล่นไฟล์
Lesson 1 ขั้นตอนการตั้งค่าไซต์
· เปิดโปรแกรม Dreamweaver Ver.8 เลือกเมนู Site แล้วเลือก Manage Sites…
· จากนั้นคลิกปุ่ม New เลือกคำสั่ง Site จากนั้นระบุชื่อไซต์ที่ต้องการ แล้วคลิกปุ่ม Next แล้วเลือก No,I do not…… เพราะเราต้องการสร้างเว็บไซต์ธรรมดา คลิกปุ่ม Next
· หน้าต่อมา ให้ระบุตำแหน่งที่ใช้ในการเก็บไฟล์ คลิกปุ่ม Next ตั้งค่า Remote Server ในที่นี้ให้เลือก None เพราะเราต้องการสร้างเว็บ HTML ธรรมดา คลิกปุ่ม Next และ Done ตามลำดับ
· จากนั้นจะกลับมาหน้า Manage Sites.. ให้เลือกที่ไฟล์ที่สร้าง แล้วคลิกปุ่ม Done
· ให้ลองสร้างเว็บเพจสักเว็บ แล้วลองบันทึกดู โดยไปที่ File ….Save as
· จะเห็นว่าไฟล์ที่ทำ จะถูกบันทึกไว้ที่โฟลเดอร์ที่เราตั้งไว้แต่ตอนแรก
Lesson 2 ขั้นตอนการตั้งค่าภาษา
· เลือกปุ่ม Page Properties ทางด้านล่าง ในช่อง Category เลือก Title/Encoding
· ในช่อง Encoding เลือกเป็น Unicode (UTF-8) จากนั้นคลิกปุ่ม OK
Lesson 3 การตั้งค่าเว็บเพจเบื้องต้น
· เลือกปุ่ม Page Properties ทางด้านล่าง ในช่อง Category
· Appearance : ค่าแสดงผลทั่วไปของเว็ป
· Link : ตัวเชื่องโยงในเว็บเพจ เช่น ตัวอักษร สี
· Heading : กำหนดรูปแบบหัวข้อเอาไว้ใช้ในเว็บเพจ
· Title/Encoding : เป็นการตั้งชื่อให้หัวของเว็บเพจ และการตั้งค่าภาษา
· Tracing image : เป็นการนำเอาภาพมาวางในหน้าเว็บไซส์ เป็นเหมือนแผ่นใส
· ปรับค่าหมดแล้ว สามารถเปลี่ยนหัวของเว็บเพจได้ ที่ด้านบนของหน้าต่างการทำงาน
Lesson 4 การสร้างตาราง
· เลือกเมนู Insert แล้วเลือกคำสั่ง Table สร้างตาราง (ในที่นี้ให้สร้าง 2 แถวและ 2 คอลัมน์) ปรับขนาดตามต้องการ
· ควรเลือกเป็น ไฟล์ Pixels เพื่อจะได้คงที่เสมอตามค่าที่ระบุไว้ Border หรือเส้นขอบตาราง เลือก 0 แล้วกด OK
· คลิกช่องตารางด้านล่างซ้าย แทรกตาราง 1 คอลัมน์ 6 แถว เพื่อจัดรูปแบบเมนู
· ย่อตารางให้เล็กลงทั้งย่อยและหลัก จากนั้นด้านล่างคลิกแถบ Align เลือก Center
Lesson 5 การใช้ตารางช่วยจัดองค์ประกอบของเว็บเพจ
· ให้นำภาพที่ต้องการไปใส่ใน Folder อันทำ Site จากนั้นเลือกเมนู Insert แล้วเลือกคำสั่ง Image
· จะขึ้นหน้าต่าง ระบุให้ใส่ข้อความลำดับภาพ ตั้งค่า กด OK จะเห็นว่าภาพจะขนาดใหญ่กว่าตาราง
· ฉะนั้นจึงสามารถรวมตารางสองอันบนได้ โดยกด Shift จากนั้นคลิกขวา เลือกเมนู Table เลือกคำสั่ง Merge Cells จะเห็นว่า ตารางกับภาพไม่ตรงกัน ไม่เท่ากัน
· ฉะนั้นให้ปรับ โดยเลือก Make all Widths Consistent เพื่อทำให้ตารางมีขนาดเท่ากับภาพได้
· จากนั้นก็ลากภาพมาใส่ในช่องที่เราตั้งไว้ ถ้าตารางไม่พอให้แก้ที่แถบ Table ด้านล่าง เพื่อเพิ่มแถว
· สามารถปรับสีในช่องได้ โดยเลือกช่องตารางด้านขวาที่ว่าง ปรับ BG ที่คำสั่งด้านล่าง หรืออาจจะใส่ภาพเป็นพื้นหลังได้อีกด้วย ที่คำสั่งหลังช่อง BG ครับ
Lesson 6 การสร้าง Template เพื่อให้หน้าเว็บไซต์เหมือนกัน
· บันทึกเว็บเพจ เป็น Template โดยเลือกเมนู File คำสั่ง Save asTemplate ตั้งชื่อ Template ช่องล่างสุด แล้วกด Save จากนั้นกด YES
· จากนั้นคลิกเลือกช่องตารางทางด้านขวา เลือก TOP ที่ช่อง Vertical.. สร้างตารางขนาด 1x1 ลงไป ที่ช่องตารางด้านขวา
· จากนั้นเลือกเมนู Insert เลือกคำสั่ง Template Objects แล้วเลือก Editable Region เพื่อให้ตารางที่นำมาสามารถปรับแก้ไขได้ ตั้งชื่อพื้นที่ และคลิกปุ่ม OK บันทึก Webpage โดยไปที่ Save as
· จากนั้นไปที่คำสั่ง New เลือกชนิดของ เว็บเพจแล้วกดปุ่ม Create
· จากนั้นเลือกไปที่เมนู Modify เลือก Templates และเลือก Apply Template to Page.. เลือก Template ที่ต้องการแล้วกดปุ่ม Select
· Template ที่สร้างจะปรากฏขึ้น และจะสามารถแก้ไขได้เฉพาะส่วย ที่มี Edit region เท่านั้น ซึ่งจะส่งผลให้เปลี่ยนแปลงทั้งหมด โดยการ Save ปรับแก้ไข ทำให้สามารถจัดการเว็บไซต์ได้สะดวกขึ้น
Lesson 7 ตัวอย่างเทคนิคการสร้าง Rollover Button
· เปิดไฟล์ Index.html ที่ทำไว้ เลือกพื้นที่สำหรับใส่วัตถุ แล้วปรับตำแหน่งการจัดวางเป็นจัดกึ่งกลาง
· คลิกที่ลูกศร ด้านข้าง เครื่องมือรูปภาพ เลือกคำสั่ง Rollorver image
· จากนั้น ระบุภาพที่จะแสดงเริ่มต้น ระบุภาพที่จะแสดงเมื่อเมาส์ไปอยู่ด้านบน ระบุข้อความกำกับภาพ และระบุ URL ที่จะให้เชื่อมโยงไปเมื่อคลิกเมาส์
· ลองพรีวิว เว็บเพจเพื่อทดสอบผลลัพท์ที่ได้ โดยต้องบันทึกไฟล์ก่อนที่จะทำการพรีวิว คลิก YES
นอกจากนี้ยังได้เรียนการทำลิ้งค์ต่างๆ เพิ่มเติม เพื่อให้งานมีความน่าสนใจ และนำไปใช้กับการทำเว็บเควสต่างได้อีกด้วย
สิ่งที่จะต้องค้นคว้าเพิ่มเติม/ต้องเตรียมมาครั้งหน้า
เตรียมการนำเสนอและอภิปรายขั้นตอนการทำ Project (ทั้งภาคทฤษฎีและปฏิบัติ) และ project ต้องเสร็จประมาณ 70% มีหน้าหลักและหน้าย่อยครบทุกหน้า
เรื่องของโปรแกรม Dreamweaver ต้องศึกษาเพิ่มเติม เพื่อจะได้เข้าใจการใช้งานมากยิ่งขึ้น รวมทั้งต้องศึกษาเทคนิคต่างๆ เพี่อให้งานของเรามีอะไรที่แปลกใหม่และน่าสนใจเพิ่มขึ้นด้วย
ทบทวนบทเรียนทั้งหมด เพื่อเตรียมตัวสำหรับการสอบ Midterm Examination
ข้อคิดเห็นอื่นๆ
ผมอยากให้เน้นภาคปฏิบัติมากกว่าภาคทฤษฏีครับ เรียนแบบออนไลน์ แล้วสมาธิ ไม่ค่อยมี งงกับขั้นตอนบางขั้นตอนครับ
อยากให้มีงานหรือกิจกรรมในห้องน้อยลงกว่านี้หน่อยครับ เพราะจำได้ไม่หมด สับสนมากครับ
เรื่องของการส่งงานออกแบบที่เป็นเพาเวอร์พอย งานคู่อะครับ ที่ผมส่งช้าไป 2 ชั่วโมง ไม่อยากให้หักคะแนนนะครับอาจารย์ เนื่องจากเกิดข้อผิดพลาดทางเทคนิคเล็กน้อยนะครับ
วันจันทร์ที่ 23 พฤศจิกายน พ.ศ. 2552
Learning Log Week 04
(23 พฤศจิกายน 2552)
สิ่งที่ได้เรียนรู้
กิจกรรมแรกคือการนำเสนอผลงานของตนเองที่ออกแบบและนำเสนอผ่านโปรแกรมเพาเวอร์พอยท์ ซึ่งทำให้ผมได้เห็นแนวคิดและแบบอย่างการออกแบบของเพื่อนแต่ละคน ว่ามีมุมมองและแนวคิด รวมไปถึงจินตนาการมากน้อยเพียงใด อีกทั้งยังได้เห็นถึงตัวอย่างที่ดีที่สุด ตัวอย่างที่ถูกต้อง และควรนำไปปฏิบัติตามอีกด้วย Site structure : ควรลงรายละเอียดให้เห็นจริง สีที่ใช้ก็ต้องมีความเหมาะสมกับกลุ่มเป้าหมายกิจกรรมที่ทำนั้น ต้องชัดเจน มี Feedback ด้วยจะดีมาก ทำให้ได้รับประโยชน์เป็นอย่างมาก ในการออกแบบงานของตัวเองใหม่ ในฐานะของงานคู่ครับ
ทั้งนี้กลุ่มของผม มีนายอวิรุทธิ์ กลั่นสุวรรณ ซึ่งคิดในเรื่องของ ระบบสุริยะ ส่วนของผมเองทำเรื่อง Photoshop ซึ่งก็ได้ตกลงกันว่า จะทำ เรื่องของ Photoshop ครับ
ต่อมาในส่วนของการเรียนผ่านระบบเครือข่าย
หัวข้อที่ 1 การใช้ Slice ในการสร้างงานเว็บ
· เปิดไฟล์ที่เตรียมไว้ให้ ชื่อ Mangrove.png
· เรียกไม้บรรทัดขึ้นมา โดยเลือกเมนู View เลือกคำสั่ง Rulers แถบไม้บรรทัดจะปรากฏ
· จากนั้น ดึงเส้น Guides โดยใช้เครื่องมือ Move tool เพื่อทำให้ทำงาน Slice ได้ง่ายขึ้น
· จากนั้น เลือกเครื่องมือ Slice tool เพื่อทำการ Slice จากนั้นก็ Slice ภาพออกเป็นส่วนตามต้องการ
· เลือกเมนู File แล้วเลือก Save as… โดยเลือกนามสกุลไฟล์ .PSD เพื่อจะแก้ไขได้ในภายหลัง
· ถ้าต้องการซ้อน เส้น Guides ให้เลือกเมนู View เลือกคำสั่ง Show เลือก Guides
· คลิกขวาที่ Slice ที่ต้องการการเชื่อมโยง เลือกคำสั่ง Edit Slice Options…
· ระบุที่อยู่เว็บที่ต้องการเชื่อมโยง ที่ช่อง URL เช่น home.html
· ระบุรูปแบบการเชื่องโยง ที่ช่อง Target เช่น _self
· ระบุข้อความที่แสดงเมื่อเมาส์อยู่เหนือในช่อง Message Text เช่น หน้าหลัก
· ระบุข้อความกำกับภาพในช่อง Alt Tag จากนั้นคลิก OK
หัวข้อที่ 2 วิธีการกำหนดการเชื่อมโยงให้กับ Slice
· คลิกขวาที่ Slice ที่ต้องการการเชื่อมโยง เลือกคำสั่ง Edit Slice Options…
· ระบุที่อยู่เว็บที่ต้องการเชื่อมโยง ที่ช่อง URL เช่น home.html
· ระบุรูปแบบการเชื่องโยง ที่ช่อง Target เช่น _self
· ระบุข้อความที่แสดงเมื่อเมาส์อยู่เหนือในช่อง Message Text เช่น หน้าหลัก
· ระบุข้อความกำกับภาพในช่อง Alt Tag จากนั้นคลิก OK
หัวข้อที่ 3 การบันทึก Slice เป็นเว็บเพจ
· เลือกเมนู File เลือกคำสั่ง Save for web จากนั้นกดปุ่ม Save
· เลือกคำสั่งไฟล์เป็น HTML and Images ไฟล์ที่ได้จะเป็นไฟล์ .html จากนั้นกดปุ่ม Save
· ตรวจสอบไฟล์ จากนั้นลองไปเปิด Folder สังเกตว่าไฟล์ภาพจะมีการแบ่งเป็นหลายภาพ
· เมื่อลองดูผลลัพธ์ใน Web Browser ภาพยังคงเป็นภาพเหมือนก่อนที่ถูกตัดแบ่ง และบริเวณที่ถูกเชื่องโยงไว้ ก็สามารถกดได้
นอกจากนี้ การที่ได้ทำการ Workshop ยังทำให้เราสามารถทำจริง ได้เอง และยังทำให้จดจำวิธีการได้ดียิ่งขึ้นครับ
สิ่งที่จะต้องค้นคว้าเพิ่มเติม/ต้องเตรียมมาครั้งหน้า
๑. ออกแบบเว็บใหม่ในฐานะของงานคู่ โดยทำตามตัวอย่างที่ถูกต้องและน่าสนใจจากที่ดูของเพื่อนๆ และจัดทำในรูปแบบเพาเวอร์พอยท์ โพสขึ้นเว็บภายในวันอาทิตย์ก่อน 18.00 น.
๒. ศึกษาเรื่อง การสร้าง Animation อย่างง่ายโดย Image Ready ล่วงหน้าครับ
๓. ศึกษากระบวนการทำเว็บเควสที่ถูกวิธี จากงานของเพื่อน และสื่ออื่นๆที่เผยแพร่ทางอินเตอร์เน็ต เพื่อเพิ่มความเข้าใจ และสามารถออกแบบงานของตนเองได้ดียิ่งขึ้น
ข้อคิดเห็นอื่นๆ
๑. ในส่วนของการรายงานหน้าชั้นของเพื่อน ผมว่า ตัวอย่างของอันที่ดี ยังเห็นไม่ชัดมาก อยากให้อาจารย์ยกตัวอย่างให้ดู เพื่อจะได้มีหลักเกณฑ์ที่ถูกต้อง และสมบูรณ์ที่สุดครับ
๒. งานชิ้นนี้เป็นงานยากครับอาจารย์ ในการออกแบบครั้งแรก ที่นำเสนอในวันนี้ ยังไม่อยากให้คิดเป็นคะแนนครับ เพราะว่า ยังไม่ค่อยเข้าใจเท่าไหร่ ถึงสิ่งที่ต้องการเสนอและรูปแบบด้วย อยากให้คะแนนครั้งนี้เก็บไปรวมกับงานที่จะออกแบบใหม่ เพื่อจะได้เป็นคะแนนที่ยุติธรรมครับ