วันเสาร์ที่ 28 พฤษภาคม พ.ศ. 2559

HTML












HTMLการใช้งาน

          ในบทที่แล้วเราได้ลองเขียน HTML กันดูบ้างแล้ว ในบทนี้เราจะลงรายละเอียดคำสั่งของ HTML โดยการใช้งานหลักจะมีดังนี้

1. คำสั่ง หรือ Tag

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

Tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส เช่น <HR>, <BR> เป็นต้น

 Tag เปิด/ปิด รูปแบบของ tag นี้จะเป็นแบบ <tag> .... </tag> โดยที่

<tag> เราเรียกว่า tag เปิด

 </tag> เราเรียกว่า tag ปิด

2. Attributes

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

3. not case sensitive

หมายถึง คุณจะพิมพ์ <BR> หรือ <br> ก็ได้ ผลลัพธ์ออกมาไม่ต่างกัน

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

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

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

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

     <head>

              คำสั่งในหัวข้อของ head

     </head>

     <body>

              คำสั่งในหัวข้อของ body ในส่วนนี้จะเป็นส่วนที่ใช้แสดงผล

     </body>

 </html>
1. คำสั่งในหัวข้อของ head (Head Section)

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

             <TITLE>ข้อความอธิบายชื่อเรื่องของเว็บ</TITLE>

             <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

             <META NAME="Author" CONTENT="ชื่อผู้พัฒนาเว็บ">

             <META NAME="KeyWords" CONTENT="ข้อความ 1, ข้อความ 2 ">

 </HEAD>
TITLE

 ข้อความที่ใช้เป็น TITLE ไม่ควรพิมพ์เกิน 64 ตัวอักษร, ไม่ต้องใส่ลักษณะพิเศษ เช่น ตัวหนา, เอียง หรือสี โดยข้อความในส่วนนี้จะแสดงผลใน title bar ของ web browser

META

 Tag META จะไม่ปรากฏผลบนเบราเซอร์ แต่จะเป็นส่วนสำคัญ ในการจัดอันดับบัญชีเว็บ สำหรับผู้ให้บริการสืบค้นเว็บ (Search Engine เช่น google , yahoo)

charset=TIS-620 ใช้บอกว่าใช้ชุดตัวอักษรแบบใดในการแสดงผล ภาษาไทยเราใช้ charset=TIS-620 หรืออาจเป็น charset=windows-874 ก็ได้ ตอนนี้แนะนำให้ใช้เป็น charset=utf-8

keyword ดังภาพด้านบนจะเห็นว่าเราสามารถใช่ keywords มากกว่า 1 คำได้โดยใช้เครื่องหมาย (,) ในการคั่นระหว่างคำ

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



2. คำสั่งในส่วนของ (Body Section)

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

ส่วนเนื้อหาเอกสารเว็บ เป็นส่วนการทำงานหลักของหน้าเว็บ ประกอบด้วย Tag มากมายตามลักษณะของข้อมูล ที่ต้องการนำเสนอ การป้อนคำสั่งในส่วนนี้ ไม่มีข้อจำกัดสามารถป้อนติดกัน หรือ 1 บรรทัดต่อ 1 คำสั่งก็ได้ แต่มักจะยึดรูปแบบที่อ่านง่าย คือ การทำย่อหน้าในชุดคำสั่งที่เกี่ยวข้องกัน ทั้งนี้ให้ป้อนคำสั่งทั้งหมดภายใต้ Tag <BODY> </BODY> และแบ่งกลุ่มคำสั่งได้ดังนี้

กลุ่มคำสั่งเกี่ยวกับการจัดรูปแบบเอกสาร
กลุ่มคำสั่งจัดแต่ง/ควบคุมรูปแบบตัวอักษร

กลุ่มคำสั่งการทำเอกสารแบบรายการ (List)

กลุ่มคำสั่งเกี่ยวกับการทำลิงค์

กลุ่มคำสั่งจัดการรูปภาพ

กลุ่มคำสั่งจัดการตาราง (Table)

กลุ่มคำสั่งควบคุมเฟรม

กลุ่มคำสั่งอื่นๆ
เขียนโดย ที่ ไม่มีความคิดเห็น:

วันพฤหัสบดีที่ 26 พฤษภาคม พ.ศ. 2559

ระบบสารสนเทศ


ระบบสารสนเทศ




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

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

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

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

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

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






เขียนโดย ที่ ไม่มีความคิดเห็น:

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

Responsive Web Design

 Responsive Web Design


ผลการค้นหารูปภาพสำหรับ Responsive Web Design

ความหมาย และ ความสำคัญ ของ Responsive Web Design
          ในปัจจุบัน Mobile Internet Users ได้มีจำนวนเพิ่มขึ้นอย่างรวดเร็ว และมีแนวโน้มที่จะแซง Desktop Internet Users ในปี 2013 อีกด้วย ซึ่ง Mobile Devices นั้นมีความหลากหลายมาก ไม่ว่าจะเป็น ขนาดและความละเอียดของหน้าจอแสดงผล(screen size and resolution) แนวของการแสดงผล(orientation) หรือแม้แต่ระบบปฏิบัติการ(OS)

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

           Responsive Web Design คือ การออกแบบเว็บไซต์ด้วยแนวคิดใหม่ ที่จะทำให้เว็บไซต์ สามารถแสดงผลได้อย่างเหมาะสม บนอุปกรณ์ที่แตกต่างกัน โดยใช้ โค้ดร่วมกัน URL เดียวกัน เพื่อแก้ปัญหาดังกล่าว


หลักการของ 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
          เนื่องจากการเขียนโค้ดเดียว ให้รองรับหลายๆ Devices จึงอาจทำให้เกิดปัญหา เช่น โทรศัพท์มือถือที่มีหน้าจอขนาดเล็ก ถึงแม้เราจะซ่อนเนื้อหาบางส่วนที่ไม่จำเป็นเอาไว้ เช่น โฆษณา แต่ในบางเว็บบราวเซอร์ ข้อมูลเหล่านี้ยังจะถูกโหลดเข้ามาอยู่ รวมไปถึงเรื่องของ Image Resizing ที่เราไม่ได้ไปลด File Size ของตัว Image จริงๆ ทำให้โทรศัพท์มือถือจำเป็นต้องโหลดรูปเดียวกับรูปที่ใช้แสดงบน Desktop ทำให้เสียเวลาโดยไม่จำเป็น
เขียนโดย ที่ ไม่มีความคิดเห็น:
สมัครสมาชิก: ความคิดเห็น (Atom)