วันอาทิตย์ที่ 29 พฤษภาคม พ.ศ. 2559

โครงสร้างของHTML



การเขียนโฮมเพจด้วยภาษา HTML นั้น เอกสาร HTML จะประกอบด้วยส่วนประกอบ2 ส่วน ดังนี้



1. ส่วน Head คือส่วนที่จะเป็นหัว (Header) ของหน้าเอกสารทั่วไป หรือส่วนชื่อเรื่อง(Title) ของหน้าต่างการทำงานในระบบ Windows
2. ส่วน Body จะเป็นส่วนเนื้อหาของเอกสารนั้น ๆ ซึ่งจะประกอบด้วย Tag คำสั่งในการจัดรูปแบบ หรือตกแต่งเอกสาร HTML


ในทั้งสองส่วนนี้จะอยู่ภายใน Tag <HTML>…</HTML> ดังนี้

<html>


<head> <title> ส่วนชื่อเอกสาร </title> </head>




<body>


tag คำสั่ง




</body>


</html>

คำสั่ง หรือ Tag ที่ใช้ในภาษา HTML ประกอบไปด้วยเครื่องหมายน้อยกว่า"<" ตามด้วย ชื่อคำสั่งและปิดท้ายด้วยเครื่องหมายมากกว่า ">" เป็นส่วนที่ทำหน้าที่ตกแต่งข้อความ เพื่อ การแสดงผลข้อมูล โดยทั่วไปคำสั่งของ HTML ส่วนใหญ่จะอยู่เป็นคู่ มีเพียงบาง คำสั่งเท่านั้น ที่มีรูปแบบคำสั่งอยู่เพียงตัวเดียว ในแต่ละคำสั่ง จะมีคำสั่งเปิดและปิด คำสั่งปิดของแต่ละ คำสั่งจะมี รูปแบบเหมือนคำสั่งเปิด เพียงแต่จะเพิ่ม "/" (Slash) นำหน้าคำสั่ง ปิดให้ดู แตกต่าง เท่านั้น และในคำสั่งเปิดบางคำสั่ง อาจมีส่วนขยายอื่นผสมอยู่ด้วย

ในการเขียนคำสั่งภาษา HTML สามารถเขียน ด้วยตัวอักษร เล็กหรือใหญ่ ทั้งหมดหรือเขียนคละกันได้ เช่น <HTML> หรือ <Html> หรือ <html> ซึ่งจะให้ผลเหมือนกัน


คำสั่งเริ่มต้นของเอกสาร 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>


ในบทเรียนนี้ได้ทำการจัดเนื้อหาสำหรับการสร้างโฮมเพจด้วยภาษา HTMLสำหรับกลุ่มคำสั่งได้ดังนี้

1. กลุ่มคำสั่งจัดรูปแบบตัวอักษร
2. กลุ่มคำสั่งการจัดรูปแบบเอกสาร
3. กลุ่มคำสั่งจัดการรูปภาพ

4. กลุ่มคำสั่งการจัดรูปแบบฉากหลัง
5. กลุ่มคำสั่งจัดการตาราง
6. กลุ่มคำสั่งเกี่ยวกับการเชื่อมโยง





สรุป





<HTML>....</HTML> คำสั่งเริ่มต้น คำสั่ง html เป็นคำสั่งเริ่มการเขียน
<HEAD>....</HEAD> เป็นส่วนหัวของเว็บเพจ บอกคุณสมบัติของเว็บเพจ

<TITLE>....</TITLE> ใช้บอกชื่อของเว็บเพจ

<BODY>....</BODY> เป็นส่วนสำคัญที่สุด เพราะเป็นส่วนที่แสดงเนื้อหา

ทั้งหมด อาจรวมถึง ข้อความ รูปภาพ ตาราง



การเชื่อมโยง
เขียนโดย ที่ ไม่มีความคิดเห็น:

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

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

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


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

2. ซอฟต์แวร์

3. ข้อมูล

4. บุคลากร

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



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

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

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

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



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

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

วันอาทิตย์ที่ 22 พฤษภาคม พ.ศ. 2559

Responsive Web Design คืออะไร??



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






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





ก่อนที่จะมี Responsive Web Design เค้าทำเว็บอย่างไรให้แสดงบนมือถือได้?


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





แล้ว Responsive Web Design มันคืออะไรหล่ะ มันทำอะไรได้บ้าง?


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





Responsive Web Design ทำได้อย่างไร?


Responsive Web Design ไม่ได้เป็นภาษาหรือเทคโนโลยีอะไรหรอกครับ แต่มันเป็นการนำเทคนิคหลายๆอย่างมารวมกัน ซึ่งแต่ละเทคนิคถ้าพูดถึง ชาว Web Design ก็จะรู้จักกันเป็นอย่างดีเลยหล่ะครับนั่นก็คือ CSS, HTML และ JavaScript ครับมารวมๆกันจนเกิดเป้น Responsive Web Design





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