ชัญญานุช ประจง

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

HTML

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

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

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

 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>

 <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)

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

กลุ่มคำสั่งอื่นๆ

ที่มา http://www.hellomyweb.com/index.php/main/content/12

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

Responsive Web คืออะไร

Responsive Web คือ เว็บไซต์ที่สามารถรองรับการทำงานบนหน้าจออุปกรณ์เครือข่ายได้อุปกรณ์ เช่น Desktop Internet , Mobile Internet ( ipad ,iphone, android , windows mobile อื่น ๆ ) ซึ่งอุปกรณ์เหล่านี้จะมีหน้าจอแตกต่างกันไป ตามขนาดความกว้างของเครื่อง
ทำให้หน้าต่างเว็บไซต์ที่ออกแบบให้ดูผ่านหน้าจอคอมพิวเตอร์อย่างเดียว มีปัญหาการทำงานเมื่อใช้งานผ่านอุปกรณ์ที่มีหน้าจอขนาดเล็กว่า เช่น Mobile Internet Users อุปกรณ์มือถือ เพราะเนื่องจากปัจจุบันนี้ การใช้งานผ่าน Mobile Internet มีการเจริญเติบโตสูง และมีแนวโน้มที่จะแซง Desktop Internet Users ทำให้บุคคลทั่วไปสามารถเข้าชมเว็บไซต์ได้ตลอดเวลา

อดีต : การออกแบบจะทำหลาย ๆ เวอร์ชั่น เพื่อที่จะรองรับการทำงานที่แตกต่างกันไป เช่น เวอร์ชั่นสำหรับอุปกรณ์มือถือ เวอร์ชั่นสำหรับคอมพิวเตอร์ทั่วไป

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

ข้อดีของ Responsive Web Design

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

ข้อเสียของ Responsive Web Design

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

ที่มา http://itgenius.co.th/webboard/index.php?topic=293.0

วันศุกร์ที่ 24 กรกฎาคม พ.ศ. 2558

13.ชนิดของข้อมูลและตัวแปรในภาษาซี

13. ชนิดของข้อมูลและตัวแปรในภาษาซี

ชนิดของข้อมูล (data type) ในการเขียนโปรแกรมหนึ่งๆ จะมีข้อมูลต่างๆ เข้ามาเกี่ยวข้องเช่น
การนับจำนวนรอบ (loop) ของการทำงานโดยใช้ข้อมูลชนิดจำนวนเต็ม หรือการแสดงข้อความโดยใช้ข้อมูลชนิดตัวอักษร จะเห็นว่าข้อมูลต่างๆ ถูกแบ่งออกเป็นหลายชนิดตามจุดประสงค์ของการใช้งาน นอกจากนี้ข้อมูลแต่ละชนิด ยังใช้เนื้อที่หน่วยความจำ (memory) ไม่เท่ากันจึงมีการแบ่งชนิดของข้อมูล
จึงมีความซับซ้อน ไม่สะดวกต่อการเขียนโปรแกรม จึงมีการเรียกหน่วยความจำ ในตำแหน่งที่สนใจผ่านตัวแปร
การประกาศตัวแปร (variable declaration) คือการจองเนื้อที่ในหน่วยความจำสำหรับเก็บค่าบางอย่าง
พร้อมทั้งกำหนดชื่อเรียกแทนหน่วยความจำในตำแหน่งนั้นเพื่อให้ผู้เขียนโปรแกรมมีความสะดวกในการเข้าถึง
ค่าที่เก็บอยู่ในหน่วยความจำดังกล่าว
variable-name คือชื่อของตัวแปร (ควรตั้งชื่อให้มีความหมายสอดคล้องกับการใช้งานและจำง่าย)
ตัวอย่างการประกาศตัวแปรแบบต่างๆ
float x;
char grade, sex; /*ประกาศตัวแปรชนิิดอักขระ ชื่อ grade และ sex (ประกาศพร้อมกันในบรรทัดเดียว)*/
char c = "A", t = "B"; /*ประกาศตัวแปรชนิดอักขระสองตัว พร้อมกำหนดค่าให้แต่ละตัว*/
int oct = 0555; /*ประกาศตัวแปรชนิดจำนวนเต็มชื่อ num พร้อมกำหนดค่าคือ 555 (เป็นเลขฐานแปดเพราะมี 0 นำหน้า)*/
int hex = 0x88; /*ประกาศตัวแปรชนิดจำนวนเต็มชื่อ hex พร้อมกำหนดค่าคือ 88 (เป็นเลขฐาน 16 เพราะมี 0x นำหน้า)*/

ตัวแปร (variable) เนื่องจากข้อมูลถูกเก็บอยู่ในหน่วยความจำ การอ้างถึงตำแหน่งของข้อมูลนี้

รูปแบบการประกาศตัวแปร

type variable-name;

โดย

type คือชนิดของตัวแปร (ตามตารางด้านล่าง)

int num; /*ประกาศตัวแปรชนิิดจำนวนเต็ม ชื่อ num*/

float temp = 123.45; /*ประกาศตัวแปรชนิดเลขทศนิยมพร้อมกำหนดค่า 123.45*/

12.ฟังก์ชันในภาษา C

12. ฟังก์ชันในภาษา C

ในการทำงานบางอย่างจำเป็นต้องใช้คำสั่งมากกว่า 1 คำสั่งเพื่อทำงานนั้นให้สำเร็จ ซึ่งคำสั่งที่เขียนรวมกันไว้ใช้งานจะเรียกว่าฟังก์ชัน (Function) โครงสร้างของโปรแกรมที่เขียนด้วยภาษา C ภายในโปรแกรมจะประกอบด้วยฟังก์ชันต่างๆ อย่างน้อยหนึ่งฟังก์ชันเสมอนั่นคือ
ฟังก์ชัน main() ซึ่งเป็นฟังก์ชันหลักที่โปรแกรมภาษา C จะเริ่มทำงานจากจุดนี้ โดยฟังก์ชัน main() อาจจะมีการใช้ฟังก์ชันย่อยๆ ต่อไปอีก

11.ผังงาน (Flowchart Diagram)

ผังงาน (Flowchart Diagram)

ความหมายของผังงาน

ผังงาน (Flowchart) คือ รูปภาพ (Image) หรือสัญลักษณ์(Symbol) ที่ใช้เขียนแทนขั้นตอน คำอธิบาย ข้อความ หรือคำพูด ที่ใช้ในอัลกอริทึม (Algorithm) เพราะการนำเสนอขั้นตอนของงานให้เข้าใจตรงกัน ระหว่างผู้เกี่ยวข้อง ด้วยคำพูด หรือข้อความทำได้ยากกว่า

ผังงานแบ่งได้ 2 ประเภท

1. ผังงานระบบ (System Flowchart)คือ ผังงานที่แสดงขั้นตอนการทำงานในระบบอย่างกว้าง ๆ แต่ไม่เจาะลงในระบบงานย่อย
2. ผังงานโปรแกรม (Program Flowchart)คือ ผังงานที่แสดงถึงขั้นตอนในการทำงานของโปรแกรม ตั้งแต่รับข้อมูล คำนวณ จนถึงแสดงผลลัพธ์

10.โปรแกรมออกแบบบ้าน 3 มิติ สร้างโมเดล 3 มิติ

โปรแกรมออกแบบบ้าน 3 มิติ สร้างโมเดล 3 มิติ

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

9.โปรแกรมออกแบบ โปรแกรมวาดแบบ 2 มิติ

LibreCAD (โปรแกรมออกแบบ โปรแกรมวาดแบบ 2 มิติ)

โปรแกรมออกแบบ LibreCAD เป็น โปรแกรมออกแบบ 2 มิติ หรือที่เรียกว่า CAD 2D (Computer-Aided Design Program) ที่อยู่ในโปรเจคโอเพ่นซอร์ส (Open-Source) หากได้ยินชื่อนี้เมื่อไหร่ พึงระลึกเอาไว้เลยว่า แจกฟรี แน่นอน เพราะเป็นการพัฒนาที่เกิดขึ้นจากนักพัฒนาโปรแกรมฝีมือดีจากทั่วโลก ที่มีความเชี่ยวชาญด้าน โปรแกรมออกแบบ ตรงนี้ได้เป็นพื้นที่ ที่จะมาร่วมออกแบบแลัพัฒนาร่วมกัน โดย โปรแกรมออกแบบ ตัวนี้สามารถออกแบบวัตถุต่างๆ ได้ 2 มิติ (2D) เท่านั้น ซึ่งสามารถใช้ออกแบบวัตถุ สื่งของ หรืออะไรก็ได้ที่ง่ายๆ อาทิเช่น กลไกของเครื่องจักรกล วิศวกรออกแบบสิ่งก่อสร้างต่างๆ เช่น เป็น โปรแกรมออกแบบบ้าน ได้ดี หรือจะไปใช้ ออกแบบครัวเรือน ออกแบบตึก ออกแบบอาคาร ออกแบบห้อง เพื่อใช้สอยในกิจการ หรือ สถานการณ์ ต่างๆ รวมไปถึงการ ออกแบบถุงพลาสติก ออกแบบเสื้อผ้า ด้านหน้าด้านหลัง ได้เป็นอย่างดี