วันพุธที่ 25 พฤษภาคม พ.ศ. 2559

องค์ประกอบสารสนเทศ


 
องค์ประกอบของระบบสารสนเทศ
  • องค์ประกอบของระบบสารสนเทศ

    ระบบสารสนเทศเป็นงานที่ต้องใช้ส่วนประกอบหลายอย่าง ในการทำให้เกิดเป็นกลไกในการนำข้อมูลมาใช้ให้เกิดประโยชน์ได้

    นักเรียนลองนึกดูว่า ถ้าต้องการประมวลผลรายงานการเรียนของนักเรียนได้อย่าง ถูกต้อง รวดเร็ว ทันการ ระบบการจัดการสารสนเทศนั้น เกี่ยวข้องกับอะไรบ้าง ประการแรกคือ บุคลากรหรืออาจารย์ประจำชั้นที่เป็นผู้รับผิดชอบ หรืออาจารย์ผู้สอนแต่ละรายวิชา ประการที่สอง คือ หากมีการบันทึก ข้อมูลก็ต้องมีขั้นตอนการปฏิบัติงานของอาจารย์เป็นขั้นตอนที่กำหนดไว้ว่าจะต้องทำอะไรบ้าง เมื่อไร อย่างไร ประการที่สาม คือ เครื่องคอมพิวเตอร์ เป็นเครื่องช่วยให้การทำงานให้ผลรวดเร็ว และคำนวณได้แม่นยำถูกต้อง ประการที่สี่ คือ ซอฟต์แวร์ที่ใช้กับเครื่องคอมพิวเตอร์ช่วยทำให้คอมพิวเตอร์ทำงาน ตามที่ต้องการได้ ประการสุดท้ายคือ ตัวข้อมูลที่เป็นเสมือนวัตถุดิบที่จะได้รับการเปลี่ยนแปลงให้เป็นสารสนเทศตามที่ต้องการ

ส่วนประกอบที่สำคัญของระบบสารสนเทศมี 5 ส่วนคือ 

1. ฮาร์ดแวร์(เครื่องจักรอุปกรณ)์

2. ซอฟต์แวร์

3. ข้อมูล

4. บุคลากร

5.ขั้นตอนการปฏิบัติงาน



ส่วนประกอบทั้งห้าส่วนนี้ทำให้เกิดสารสนเทศได้ หากขาดส่วนประกอบใด หรือส่วนประกอบใดไม่สมบูรณ์ ก็อาจทำให้ระบบสารสนเทศ ไม่สมบูรณ์ เช่น ใช้เครื่องคอมพิวเตอร์ไม่เหมาะสมกับงาน ก็จะทำให้งานล่าช้า ไม่ทันต่อการใช้งาน การดำเนินการระบบสารสนเทศจึงต้องให้ความสำคัญ กับส่วนประกอบทั้งห้านี้



บุคลากร
 เป็นส่วนประกอบที่สำคัญ เพราะบุคลากรที่มีความรู้ ความสามารถ และเข้าใจวิธีการให้ได้มาซึ่งสารสนเทศ จะเป็นผู้ดำเนินการ ในการทำงานทั้งหมด บุคลากรจึงต้องมีความรู้ความเข้าใจในการใช้เทคโนโลยีสารสนเทศ บุคลากรภายในองค์กรเป็นส่วนประกอบที่จะทำให้เกิด ระบบสารสนเทศด้วยกันทุกคน เช่น ร้านขายสินค้าแห่งหนึ่ง บุคลากรที่ดำเนินการในร้านค้าทุกคน ตั้งแต่ผู้จัดการถึงพนักงานขาย เป็นส่วนประกอบที่จะทำให้เกิดสารสนเทศได้

ขั้นตอนการปฏิบัติ
 เป็นระเบียบวิธีการปฏิบัติงานในการจัดเก็บรักษาข้อมูลให้อยู่ในรูปแบบที่จะทำให้เป็นสารสนเทศได้ เช่น กำหนดให้ มีการป้อนข้อมูลทุกวัน ป้อนข้อมูลให้ทันตามกำหนดเวลา มีการแก้ไขข้อมูลให้ถูกต้องอยู่เสมอ กำหนดเวลาในการประมวลผล การทำรายงาน การดำเนินการ ต่าง ๆ ต้องมีขั้นตอน หากขั้นตอนใดมีปัญหาระบบก็จะมีปัญหาด้วย เพราะทุกขั้นตอนมีผลต่อระบบสารสนเทศ

เครื่องคอมพิวเตอร์ 
เป็นเครื่องมือที่ช่วยในการจัดการสารสนเทศ คอมพิวเตอร์ช่วยประมวลผล คัดเลือก คำนวณ หรือพิมพ์รายงาน ผลตามที่ต้องการ คอมพิวเตอร์เป็นอุปกรณ์ที่ทำงานได้รวดเร็ว มีความแม่นยำในการทำงาน และทำงานได้ต่อเนื่อง คอมพิวเตอร์และอุปกรณ์ต่าง ๆ จึงเป็นองค์ประกอบหนึ่งของระบบสารสนเทศ

ซอฟต์แวร์ 
คือลำดับขั้นตอนคำสั่งให้เครื่องคอมพิวเตอร์ ทำงานตามวัตถุประสงค์ที่วางไว้ ซอฟต์แวร์ จึงหมายถึงชุดคำสั่งที่เรียง เป็นลำดับขั้นตอนสั่งให้คอมพิวเตอร์ทำงานตามต้องการ และประมวลผลเพื่อให้ได้สารสนเทศที่ต้องการ


ข้อมูล 
เป็นวัตถุดิบที่ทำให้เกิดสารสนเทศ ข้อมูลที่เป็นวัตถุดิบจะต่างกัน ขึ้นกับสารสนเทศที่ต้องการ เช่น ในสถานศึกษามักจะต้องการ สารสนเทศที่เกี่ยวข้องกับข้อมูลนักเรียน ข้อมูลผลการเรียน ข้อมูลอาจารย์ ข้อมูลการใช้จ่ายต่าง ๆ ข้อมูลเป็นสิ่งที่สำคัญประการหนึ่งที่มีบทบาทต่อการให้เกิด สารสนเทศ

HTML

HTML คืออะไร

HTML(Hyper Text Markup Language) เป็นภาษาหลักในการทำเว็บไซค์
เอกสาร HTML อธิบายเว็บเพจ เอกสาร HTML กำหนด HTML Tags เอกสาร HTML กำหนดลักษณะแบบอักษร
เราอาจเรียกได้ว่า เอกสาร HTML ก็คือ เว็บเพจนั่นเอง

HTML คืออะไร

HTML ย่อมาจาก Hyper Text Markup Language
HTML ไม่ใช่ภาษาโปรแกรม แต่เป็น markup language
markup language คือกลุ่มที่อยู่ใน markup tags
HTML จะใช้ markup tags ในการอธิบายหน้าเว็บเพจ

HTML Tags

HTML markup tags มักจะถูกเรียกว่า HTML Tags
HTML Tags เป็นคำที่ถูกล้อมรอบด้วยวงเล็บเหลี่ยม เช่น <html>
HTML Tags มักจะเป็นคู่เปิด กับคู่ปิด เช่น <b> และ </b>
ใน HTML Tags คู่หนึ่ง Tags แรกมักจะถูกเรียกว่า แท็กเปิด Tags สุดท้ายมักจะถูกเรียกว่า แท็กปิด

วัตถุประสงค์ของเว็บบราวเซอร์(web browser) เช่น Internet Explorer, Mozilla Firefox, Chrome และอื่น ๆ ก็คือการอ่านเอกสาร HTML แล้วแสดงออกมาในรูปแบบของเว็บเพจ เว็บบราวเซอร์จะไม่แสดง HTML Tags แต่จะใช้แท็กเหล่านั้นอธิบายและกำหนดสิ่งต่าง ๆ สำหรับเว็บเพจ

ส่วนประกอบของ HTML Document

เอกสาร HTML แบ่งออกเป็นสองส่วน นั่นคือส่วน head กับส่วน body
เอกสาร HTML จะต้องประกอบไปด้วยแท็กที่สำคํญด้วยกันอยู่ 3 แท็ก นั่นคือ html, head และ body มีการวางรูปแบบแท็กดังนี้
<html>
 <head>
 </head>
 
 <body>
 </body>
</html>

แท็ก html บ่งบอกว่าเอกสารนี้เป็นเอกสาร HTML
แท็ก head เป็นส่วนที่ทำงานเกี่ยวกับส่วนหัวของเอกสารการกำหนดค่าต่าง ๆ และจะต้องอยู่ภายในแท็ก html เพื่อบ่งบอกว่าอยู่ภายในเอกสาร html
แท็ก body เป็นส่วนที่ทำงานเกี่ยวกับตัวของเอกสารที่จะแสดงในหน้าเว็บเพจ และจะต้องอยู่ภายในแท็ก html และอยู่หลังแท็ก head

การสร้างเอกสาร HTML

ในการสร้างเอกสาร HTML สามารถสร้างได้ง่ายดายโดยใช้ Notepad, Dreamweaver, Editplus หรืออื่น ๆ ในที่นี้ผมขอยกตัวอย่างการสร้างโดยทั้งสามโปรแกรมให้ดูคับเริ่มจาก Notepad กันก่อนเลย

การสร้างเว็จเพจโดย Notepad

ก่อนอื่นก็เปิด Notepad ขึ้นแล้วแล้วทำการกรอกโค้ดเหล่านี้ไปดังรูป



เสร็จแล้วทำการเซฟ โดยใช้นามสกุล .html หรือ .htm ก็ได้ดังรูป โดยเปลี่ยน Save as type เป็น All File



เมื่อเซฟเสร็จเราก็จะได้เอกสาร HTML แล้วง่ายไหมละคับ คราวนี้เราลองมาเปิดดูกันว่าผลลัพธ์จะออกมายังไง



นี่คือผลลัพธ์จากการทำเอกสาร HTML ของเราเมื่อกี้

การสร้างเว็จเพจโดย Editplus

ทำการเปิดโปรแกรม Editplus ขี้นแล้วแล้วไปที่ File => New => HTML Page ดังรูป



จะเห็นว่าเมื่อสร้างแล้วจะมีโค้ดมาให้เองโดยอัตโนมัติให้ทำการเปลี่ยนเป็นโค้ดเหมือนรูปด้านล่างก็จะได้เว็บเพจที่แสดงเหมือนกันกับการสร้างด้วย Notepad แล้ว ส่วนโค้ดในส่วนอื่น ๆ ดังแสดงในรูป เช่น doctype, meta tage ไว้ผมจะมาอธิบายใหม่ในวันหลังนะคับ



เมื่อเสร็จแล้วก็ทำการเซฟ เราก็จะได้เอกสาร HTML อย่างง่าย ๆ แล้วละคับ

การสร้างเว็จเพจโดย Dreamweaver

สร้างเอกสารโดยไปที่ File => New หรือกด Ctrl + N จะได้ดังรูปให้เลือก HTML



เสร็จแล้วกด Creat จะมีโค้ดมาให้ทำการแก้ไขใหม่ดังรูป



เสร็จแล้วก็ทำการเซฟไฟล์ เราก็จะได้เอกสาร HTML หรือที่เรียกกันว่าเว็บเพจแล้ว

วันพุธที่ 18 พฤษภาคม พ.ศ. 2559

Responsive Web คืออะไร?

                                                     
Responsive Web Design 
Responsive Web Design คือ การออกแบบ Web Page ให้แสดงผลออกมาให้เหมาะสมกับขนาดหน้าจออุปกรณ์ซึ่งปัจจุบันมีขนาดที่แตกต่างกันออกไปเช่น คอมพิวเตอร์ มือถือ แท็บเล็ต เครื่องเล่นเกมพกพา เป็นต้นซึ่งปัจจุบัน Browser ได้พัฒนาให้สามารถใช้ได้กับหลากหลายอุปกรณ์ แต่ที่เราเจอกันจะพบปัญหาการแสดงผลหน้าเว็บที่ไม่ตรงกับอุปกรณ์เช่น ขนาดตัวหนังสือเล็กไป, ปุ่มต่างๆก็เล็กลง หรือแม้กระทั่งการแสดงผลข้อมูลไม่ครบถ้วน เป็นต้น



หลักการของ Responsive Web Design
การจะทำ Responsive Web Design มักใช้เทคนิคหลายๆ อย่าง ร่วมกัน ไม่ว่าจะเป็น Fluid Grid, Flexible Images และ CSS3 Media Queries
เริ่มแรกคือการทำ Fluid Grid ซึ่งก็คือการออกแบบ Grid ให้เป็นแบบ Relative ซึ่งก็คือการที่ไม่ได้กำหนดขนาดของ Grid แบบตายตัว แต่จะกำหนดให้สัมพันธ์กับสิ่งอื่นๆ เช่น กำหนดความกว้างแบบเป็น % หรือการใช้ font-size หน่วยเป็น em เป็นต้น
ต่อมาคือการทำ Flexible Images หรือการกำหนดขนาดของ Images ต่างๆ ให้มีความสัมพันธ์กับขนาดของหน้าจอแสดงผล หากรูปต้นฉบับมีขนาดใหญ่มาก เวลาแสดงในมือถือที่มีจอขนาดเล็ก ก็ควรลดขนาดลงมา เพื่อให้แสดงผลได้อย่างสวยงาม เป็นต้น
สุดท้ายคือการใช้ CSS3 Media Queries ซึ่งจะช่วยให้เราสามารถกำหนด style sheets สำหรับ Devices ต่างๆ ได้ โดยส่วนใหญ่ เราจะเขียน style sheets พื้นฐานเอาไว้ ซึ่งกลุ่มนี้ จะไม่ขึ้นอยู่กับ Devices ใดๆ หลังจากนั้นให้เราเขียน style sheets สำหรับ Devices ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย

RESPONSIVE WEB DESIGN ทำอย่างไร

เวลาพูดถึง Responsive Web Design เนี่ย เราพูดถึง เทคนิคต่าง ๆ ที่ช่วยให้หน้าเว็บปรับเปลี่ยนการแสดงผลตามขนาดหน้าจอ ครับ
เพราะฉะนั้นมันจะแยกย่อยเป็นเทคนิคสำหรับการแก้ปัญหาต่าง ๆ เช่น เทคนิคแสดงรูปแบบ Low Resolution บนมือถือ (เพื่อให้โหลดเร็วขึ้น เพราะอินเตอร์เน็ตมือถือ เช่น EDGE จะช้ากว่าเน็ตในคอม) หรือ เทคนิคซ่อนเนื้อหาบางส่วนในเว็บบนมือถือ
วันนี้จะมาแนะนำเทคนิคหลักของ Responsive Web Design ซึ่งถ้าเข้าใจเรื่องนี้จะสามารถนำไปทำ Responsive Web Design ได้ 80% แล้วครับ (อีก 20% คือเก็บรายละเอียดอื่น ๆ ที่อาจต้องใช้เทคนิคอื่นมาช่วย) นั่นก็คือ Media Query !!

  • ประโยชน์ของการออกแบบเว็บไซต์แบบ Responsive

    • 1
      แสดงผลได้สวยงาม บนขนาดหน้าจอที่แตกต่าง
    • 2
      ออกแบบเพียงครั้งเดียว แต่สามารถใช้ได้กับขนาดหน้าจอที่หลากหลาย
    • 3
      มี Experience ในการใช้งานที่ดีกว่า ดูข้อมูลได้ง่าย โดยไม่ต้อง Zoom
    • 4
      ประหยัดเวลา และ ค่าใช้จ่ายได้มากกว่าการทำ 2 เว็บไซต์
    • 5
      ช่วยในเรื่องของการทำ SEO (Search Engine Optimization)
    • เว็บไซต์และบทความเกี่ยวกับ RESPONSIVE

      เว็บไซต์พวกนี้คือเว็บที่แอดมินอ่าน รวมถึงนำโค้ดตัวอย่างบางส่วนมานะครับผม ผู้อ่านท่านใดถนัดภาษาอังกฤษสามารถเข้าไปอ่านหาความรู้เพิ่มเติมได้ครับ