วันอังคารที่ 31 พฤษภาคม พ.ศ. 2559

HTML

HTML

HTML คือ ภาษาหลักที่ใช้ในการเขียนเว็บเพจ โดยใช้ Tag ในการกำหนดการแสดงผล HTML ย่อมาจากคำว่า Hypertext Markup Language โดย Hypertext หมายถึงข้อความที่เชื่อมต่อกันผ่านลิงค์ (Hyperlink) Markup language หมายถึงภาษาที่ใช้ Tag ในการกำหนดการแสดงผลสิ่งต่างๆที่แสดงอยู่บนเว็บเพจ ดังนั้น HTML จึงหมายถึง ภาษาที่ใช้Tag ในการกำหนดการแสดงผลเว็บเพจที่ต่างก็เชื่อมถึงกันใน Hyperspace ผ่าน Hyperlinkนั่นเอง

- การใช้งาน

1. คำสั่ง หรือ Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสHTML ภายในเครื่องหมาย less-than bracket ( < ) และ greater-than bracket ( > ) โดยที่Tag HTML แบ่งได้ 2 ลักษณะ คือ
1.Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, เป็นต้น
2.Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่
<tag>เราเรียกว่า tag เปิด
</tag>เราเรียกว่า tag ปิด
2. Attributes

Attributes เป็นตัวบอกรายละเอียดของ tag นั้นเช่น ... เป็นการบอกว่าให้อักษรที่อยู่ใน tag นี้ชิดซ้าย

3. not case sensitive
หมายถึง คุณจะพิมพ์ หรือ ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน

- โครงสร้งหลักของ HTML

โครงสร้างหลักของ HTML ก็จะเริ่มด้วย <html> และจบด้วย</html> เสมอ ซึ่งชุดคำสั่งที่ใช้จะแยกเป็น 2 ส่วนคือ

1. head คำสั่งที่อยู่ในส่วนนี้จะใช้บรรยายรายละเอียดเกี่ยวกับ web page ซึ่งจะไม่แสดงผลที่ web page โดยตรง

2. body คำสั่งที่อยู่ในส่วนนี้จะใช้ในการจัดรูปแบบตัวอักษร จัดหน้า ใส่รูปภาพ ซึ่งตัวอักษรในส่วนนี้จะแสดงที่ web brower โดยตรง

- คำสั่งเริ่มต้นของเอกสาร HTML

<HTML>..........</HTML>
คำสั่ง <HTML> เป็นคำสั่งเริ่มต้นในการเขียนโปรแกรมและคำสั่ง </HTML> เป็นการสิ้นสุดโปรแกรม HTML คำสั่งนี้จะไม่แสดงผลในโปรแกรมเว็บเบราเซอร์ แต่ต้องเขียนเพื่อให้เกิดความเป็นระบบของงาน และเพื่อจะให้รู้ว่าเอกสารนี้เป็นเอกสารของภาษา HTML ส่วนหัวเรื่องเอกสารเว็บ (Head Section)

<HEAD>..........</HEAD>

Head Section เป็นส่วนที่ใช้อธิบายเกี่ยวกับข้อมูลเฉพาะของหน้าเว็บนั้น ๆ เช่น ชื่อเรื่องของหน้าเว็บ (Title), ชื่อผู้จัดทำเว็บ(Author), คีย์เวิร์ดสำหรับการค้นหา (Keyword) โดยมี Tag สำคัญ คือ

<TITLE>..........</TITLE >

ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษะพิเศษ เช่น ตัวหนา เอียง หรือสี และควรใช้ภาษาที่มีความหมายครอบคลุม ถึงเนื้อหาของเว็บเพจ นั้น หรือเป็นคำสำคัญในการค้นหา (Keyword)

<BODY>..........</BODY>

Body Section เป็นส่วนเนื้อหาหลักของหน้าเว็บ ซึ่งการแสดงผลจะต้องใช้ Tag จำนวนมาก ขึ้นอยู่กับลักษณะของข้อมูล เช่น ข้อความ, รูปภาพ, เสียง, วีดิโอ หรือไฟล์ต่างๆส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่ส่วนใหญ่จะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> … </BODY>

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

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

  2.ซอฟต์แวร์
  ซอฟต์แวร์หรือโปรแกรมคอมพิวเตอร์เป็นองค์ประกอบที่สำคัญประการที่สอง คือ ลำดับขั้นตอนของชุดคำสั่งที่สั่งงานให้ฮาร์ดแวร์ทำงาน เพื่อประมวลผลข้อมูลให้ได้ผลลัพธ์ตามความต้องการของการใช้งาน ในปัจจุบันมีซอฟต์แวร์ควบคุมระบบงาน ซอฟต์แวร์สำเร็จทำให้การใช้งานคอมพิวเตอร์ในระดับบุคคลเป็นไปอย่างกว้างขวาง และส่งเสริมการทำงานของกลุ่มมากขึ้น ส่วนงานในระดับองค์กร ส่วนใหญ่มักจะมีการพัฒนาระบบตามความต้องการ โดยการว่าจ้างบริษัทที่รับพัฒนาซอฟต์แวร์ หรือโดยนักคอมพิวเตอร์ที่อยู่ในฝ่ายคอมพิวเตอร์ขององค์กร เป็นต้น

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

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

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

วันอังคารที่ 24 พฤษภาคม พ.ศ. 2559

Responsive

RESPONSIVE

WEB DESIGN

ความหมายเเละความสำคัญ
ความสำคัญ : ปัจจุบัน Mobile Internet Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว และมีแนวโน้มที่จะแซง Desktop Internet Users ในปี 2013 อีกด้วย ซึ่ง Mobile Devices นั้นมีความหลากหลายมาก ไม่ว่าจะเป็น ขนาดและความละเอียดของหน้าจอแสดงผล(screen size andresolution) แนวของการแสดงผล(orientation) หรือแม้แต่ระบบปฏิบัติการ(OS) ถ้าเป็นสมัยก่อน เราต้องทำเว็บไซต์ออกมาหลายๆ version เช่น Desktop version กับ Mobileversion เพื่อให้เว็บไซต์ของเรา สามารถแสดงผลได้อย่างเหมาะสมกับ Device นั้นๆ ซึ่งวิธีนี้จะทำให้ต้นทุนเพิ่มขึ้น ทั้งในด้านเวลาและค่าจ้างในการพัฒนา

ความหมาย : Responsive Design คือ แนวคิดการออกแบบที่เรียกว่า One Size Fit All คือ ออกแบบเพียงครั้งเดียว แต่สามารถใช้ได้กับทุกขนาดของหน้าจอ โดยเว็บไซต์จะสามารถตรวจจับขนาดของหน้าจอ และปรับขนาด และ Layout ให้เหมาะสม ตามขนาดของหน้าจอโดยอัตโนมัติ โดยอาศัยการทำงานร่วมกันระหว่างเทคโนต่างๆ ดังต่อไปนี้ คือ Layout ของเว็บแบบ Flexible Grid, รูปภาพแบบ Flexible Image และ CSS3Media Query

หลักการใช้
การจะทำ Responsive Web Design มักใช้เทคนิคหลายๆ อย่างร่วมกัน ไม่ว่าจะเป็น Fluid Grid, FlexibleImages และ 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 ที่มีขนาดหน้าจอที่เล็กสุด เพิ่มขึ้นไปเรื่อยๆ จนถึงขนาดใหญ่สุด ซึ่งการเขียนแบบนี้ จะช่วยลดความซ้ำซ้อนของโค้ด และยังทำให้การแก้โค้ดในภายหลังทำได้ง่ายอีกด้วย

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

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

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

ข้อเสีย
  - ไม่สามารถรองรับการทำงานพวก flash หรือพวก Javascript หรือรูปภาพที่มีขนาดใหญ่ได้
  - เนื่องจากอุปกรณ์มือถือแสดงหน้าจอขนาดเล็ก ผู้พัฒนาอาจจะต้องมีการตัดเมนูบางส่วนที่ไม่จำเป็นสำหรับผู้ใช้ออก
  - ในการออกแบบต้องมีการจัดวางโครงสร้างให้ดี เช่น html5 css ให้เหมาะสม
  - การปรับปรุงโครงสร้าง ภายหลังจะแก้ไขยาก อาจจะทำให้โครงสร้างการแสดงผลบ้างส่วนมีปัญหาได้

เว็บไซต์ที่ออกแบบมาตามปกติ โดยไม่ได้ใช้เทคนิค Responsive เวลาแสดงผลบน Mobile Device จะเป็นเพียงแค่การ ย่อ ขนาด เพื่อให้สามารถแสดงผลได้บนหน้าจอเท่านั้น แต่จะไม่สามารถปรับรูปแบบ หรือ Layout ให้เหมาะสมตามขนาดหน้าจอ ในขณะนี้เว็บที่ได้รับการออกแบบมาโดยใช้เทคนิคการออกแบบเว็บไซต์แบบ Responsive จะสามารถปรับ Layout และ ขนาดของรูปภาพ ให้เหมาะสม ตามขนาดของหน้าจอ ทำให้มี User Experience ที่ดีกว่า