นักออกแบบ UI และ UX สองสาขาอาชีพมาแรงแห่งศตวรรษ

 Design

ในช่วงไม่กี่ปีให้หลังนี้ เมื่อมีการสำรวจอาชีพใหม่ๆ หรือตำแหน่งงานใหม่ๆ ที่มาแรง เรามักจะได้ยินคำว่า UI และ UX Designer กันอยู่เสมอ  อาชีพนักออกแบบในสาขานี้นับเป็นหนึ่งอาชีพที่มีอัตราการเติบโตสูงสุดเป็นอันดับแรกๆ  (จากสถิตตัวเลขในเว็บ LinkedIn ปี 2008 มีผู้ระบุว่าตนทำอาชีพนี้เป็นจำนวน 159 คน  ในขณะที่ปี 2016 มีจำนวนถีบตัวสูงขึ้นถึงราว 5 แสนคน - เพิ่มขึ้นร้อยกว่าเท่าในเวลาเพียงแปดปี  นอกจากนั้น ตำแหน่งงานที่ประกาศรับสมัคร UI และ UX Designer ในเว็บ Linkedin ก็มีสูงถึงราว 8 พันตำแหน่งเลยทีเดียว)
 
…บางคนอาจจะยังสงสัยว่า UI กับ UX นี้มันคืออะไร ? 
...แล้วอาชีพนักออกแบบ UI หรือ UX ต้องทำอะไรบ้าง ?  
…งานสองด้านนี้เหมือนหรือต่างกันแค่ไหนอย่างไร ?  

รู้จักนักออกแบบ UI

สำหรับ UI นั้น จริงๆ ก็คือตัวย่อของคำว่า ‘User Interface’ เป็นงานดีไซน์ที่เน้นหนักเรื่องการออกแบบ ‘หน้าจอ’  หรือแพลทฟอร์มต่างๆ ที่ธุรกิจทำไว้เพื่อติดต่อกับผู้ใช้ ยกตัวอย่างเช่น เว็บไซต์ แอพลิเคชั่น เกมส์ รวมไปถึงฮาร์ดแวร์ที่จับต้องได้เช่นอุปกรณ์จอทัชสกรีน ฯลฯ   สำหรับเนื้องานของนักออกแบบ UI นั้นก็จะต้องปรากฏให้เห็นเป็นรูปธรรมได้ เพื่อว่านักพัฒนาแอพฯ หรือโปรแกรมเมอร์ จะสามารถนำไปใช้ต่อยอดได้ทันที
  
ทักษะสำคัญของนักออกแบบ UI ไม่เพียงแต่จะต้องดีไซน์สิ่งที่สวยงามน่าใช้ แต่ยังต้องดูเป็นมิตร เข้าใจง่าย  (User-friendly) เช่น มีปุ่ม ไอคอน หรือสัญลักษณ์ต่างๆ ที่บ่งชี้ฟังก์ชั่นในตัวเอง มีภาษาภาพอันเป็นแนวทางมาตรฐานที่ผู้ใช้ในแต่ละยุคเข้าใจได้  ความท้าทายจึงอยู่ที่การออกแบบให้ลงตัวระหว่างความโดดเด่น มีบุคลิกแตกต่าง แต่ก็ต้องไม่ต่างจนเกินไป ลำบากถึงผู้ใช้ให้ต้องมาเรียนรู้ใหม่ด้วย
 


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

เข้าใจนักออกแบบ UX

UX ย่อมาจากคำว่า ‘User Experience’  งานออกแบบด้านนี้จะเกี่ยวข้องกับทุกกระบวนการที่สินค้าหรือบริการหนึ่งๆ มีปฏิสัมพันธ์กับผู้ใช้  โดยเน้นไปที่การนำสินค้าหรือบริการไปทดลองกับกลุ่มตัวอย่าง ทั้งนี้เพื่อจะเก็บข้อมูลและ ‘ฟีดแบค’ อย่างละเอียดกลับมาพัฒนาตัวสินค้าหรือบริการต่อไป  การทดสอบเรื่อง UX นี้ควรทำทั้งก่อนและหลังเปิดตัวสินค้า  โดยครอบคลุมทั้งสินค้า/บริการดิจิตอล และสินค้า/บริการทั่วไปด้วย

เชื่อมต่อเอกสารของเราด้วย hyperlink

HTML

hyperlink หรือเราเรียกกันสั้นว่า link ซึ่งเราจะเห็นอยู่ในทุกเว็บไซต์ ใช้เพื่อเปิดเว็บเพจอื่นๆใน เว็บไซต์ของเรา หรือเชื่อมโยงไปที่ web site หรือ เว็บเพจอื่นๆ ซึ่งมีความสำคัญมากในเว็บไซต์

เรามาลองสร้าง hyperlink กันง่ายๆดู

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.สร้าง hyperlink
    ในตัวอย่างจะใช้ตัวอักษรในการทำ hyperlink ซึ่งการลิงค์ในตัวอย่างจะมี 2 แบบคือ

        1.1. ลิงค์ภายในเว็บไซต์ด้วยกัน มีหลักการสร้าง hyperlink ดังรูปด้านล่าง



    รูปแบบของ hyperlink ภายใน directory เดียวกัน

<a href='ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

    รูปแบบของ hyperlink จาก directory ที่สูงกว่า

<a href='ชื่อ directory ที่เก็บไฟล์ไว้/ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

    รูปแบบของ hyperlink จาก directory ที่ต่ำกว่า 1 ขั้น

<a href='../ชื่อไฟล์ที่ต้องการลิงค์'> ตัวอักษรที่จะใช้แสดง </a>

        1.2. ลิงค์กับเว็บภายนอก

    รูปแบบของ hyperlink กับเว็บภายนอก

<a href='http://domain name'> ตัวอักษรที่จะใช้แสดง </a>

    2.สร้าง hyperlink ด้วยรูปภาพ
    ในตัวอย่างจะเป็นการสร้างลิงค์ด้วยรูปภาพ

    รูปแบบของการสร้าง hyperlink ด้วยรูปภาพ

<a href='หน้าที่ต้องการเชื่อมโยง'> <img border = '0' src ='ที่อยู่ภาพ/ชื่อภาพ'> </a>

    3.สร้าง hyperlink ในหน้าเดียวกัน
    ในหน้าที่มีบทความเยอะมากๆ เราต้องการสร้าง link เพื่อไปยังหัวข้อที่อยู่ในหน้าเดียวกันเพื่อความสะดวกในการอ่านบทความ โดยเราจะตั้งจุดที่เราต้องการจะ link ไปหาโดยใช้ <a name ='ชื่อ'> </a>

    รูปแบบของการสร้าง hyperlink ในหน้าเดียวกัน

    สร้างจุดที่ต้องการจะลิงค์ไป

<a name='ชื่อจุดลิงค์'> </a>

    สร้างลิงค์

<a href='#ชื่อจุดลิงค์'> ตัวอักษรที่ต้องการแสดง </a>

Attribute target เป้าหมายในการลิ้งค์

ตัวย่างที่ผ่านมา เวลาลิ้งค์จะลิ้งอยู่ที่บราวเซอร์เดิม แท็บเดิม แต่ในหลาย ๆ เว็บบางลิ้งอาจจะลิ้ง โดยเปิดบราวเซอร์ใหม่ อาจจะเปิดแท็บใหม่ โค้ดที่ใช้ในการกำหนดนั้นก็ แอททริบิว target ในแท็ก a 

โดยในแอททริบิว target จะมีค่าอยู่ด้วยกัน 4 ค่า นั่นก็คือ 

1. target="_blank" 
ตัวอย่างโค้ด : <a href="" target="_blank">_blank link 
เอาต์พุตที่ได้ : _blank link 
อธิบาย _blank : เปิดเอกสารในหน้าต่างใหม่ หรือแท็บใหม่ (Opens the linked document in a new window or tab) 

2. target="_parent" 
ตัวอย่างโค้ด : <a href="" target="_parent">_parent link 
เอาต์พุตที่ได้ : _parent link 
อธิบาย _parent : เปิดเอกสารในเฟรมเดียวกับที่ลิ้งค์ถูกคลิก ค่านี้จะเป็นค่าเริ่มต้น(Opens the linked document in the same frame as it was clicked (this is default)) 

3. target="_self" 
ตัวอย่างโค้ด : <a href="" target="_self">_self link 
เอาต์พุตที่ได้ : _self link 
อธิบาย _self : เปิดเอกสารในเฟรมหลัก (Opens the linked document in the parent frame) 

4. target="_top" 
ตัวอย่างโค้ด : <a href="" target="_top">_top link 
เอาต์พุตที่ได้ : _top link 
อธิบาย _top : เปิดเอกสารในส่วน body ของวินโดว(Opens the linked document in the full body of the window)

คำสั่งในการกำหนดลักษณะตัวอักษร และแสดงสัญลักษณ์ต่างๆ

HTML

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

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.คำสั่งที่ใช้ในการจัดลักษณะตัวอักษร
    ในหัวข้อนี้จะเป็นคำสั่งที่ใช้ในการจัดรูปแบบทั่วไปเช่นตัวเอียง ตัวหนา

    คำสั่งเราจะแบ่งได้เป็น 2 พวกดังนี้

    1.แบ่งตามลักษณะที่ปรากฏ เช่นตัวเอียง ตัวหนา

<B> <I> <S> <Sub> <Sup> <U>

ตัวอักษรแบบตัวหนา (bold) ตัวอักษรแบบตัวเอน (italic) ตัวอักษรแบบตัวขีดฆ่า (strike) ตัวอักษรแบบตัวห้อย (subscripted) ตัวอักษรแบบตัวยก (superscripted) ตัวอักษรแบบขีดเส้นใต้ (underline)

    2.แบ่งตามการใช้งาน เช่น ใช้กับคำพูดหรือวลี ใช้กับข้อความที่สำคัญมาก

<Em> <Stong> <Ins> <Del> <Code> <Address>

ใช้เน้นข้อความ คำพูดหรือวลี (emphasized) ใช้เน้นข้อความที่สำคัญมากๆ (strong) ใช้เน้นข้อความที่แก้ไขเพิ่มเติม (inserted) ใช้บอกว่าข้อความนี้ถูกลบไปแล้ว (deleted) ใช้บอกว่าข้อความที่เป็นโปรแกรม (computer code) ใช้บอกว่าข้อความที่เป็นที่อยู่ (computer code)

    ซึ่งจริงแล้วนั้น ผลลัพธ์ออกมาก็เหมือนกัน เช่น B ให้ผลลัพธ์เหมือนกับ Strong เราจะเลือกใช้แบบใดก็ได้ แต่เราแยกเพื่อความสะดวกในการใช้งานมากกว่า

    2.คำสั่งที่ทำให้รูปแบบตัวอักษรใน soure code เหมือนกับที่แสดงผล
    Pre tag จะมีประโยชน์มากในการที่เราจะแสดงบทความที่มีเนื้อหามาก หรือ คัดลอกเนื้อหาจากที่อื่นมาทำให้เราไม่ต้องขึ้นบรรทัดใหม่ด้วยคำสั่ง br และใช้ในการแสดง source code ได้ดีอีกด้วย

    รูปแบบของ Pre tag

<pre> ..... </pre>

    3.คำสั่งแสดงสัญลักษณ์พิเศษต่างๆ
    สัญลักษณ์พิเศษบางตัวเช่น เครื่องหมายมากว่า (>) หรือ เครื่องหมายน้อยกว่า (<) ซึ่งเครื่องหมายเหล่านี้ใช้ในภาษา HTML ด้วยทำให้ตัวอักษรที่อยู่ในเครื่องหมายเหล่านี้กลายเป็น Tag หมด หรือเครื่องหมายที่ไม่มีบนคีบอร์ด แต่ถ้าเราต้องการแสดงเครื่องหมายเหล่านี้เราต้องใช้ Entity Name แทน ตามแบบด้านล่าง

คำสั่งในการจัดหน้า

HTML

ในบทความนี้จะเป็นเนื้อหาของคำสั่งที่ใช้ในส่วนของ body section ทั้งหมดโดยจะเป็นคำสั่งในส่วนของการจัดหน้า

ซึ่งการเรียนรู้ที่ดีที่สุดคือการลองพิมพ์ดู ดังนั้น Hellomyweb.com จึงได้ทำ text editor และหน้าจอแสดงผลไว้ด้วยกันให้คุณลองพิมพ์ลองแก้ไขกันดู โดยคลิกที่ลิงก์ที่หัวข้อได้เลย

ลองพิมพ์ดูง่ายนิดเดียว คลิกที่หัวข้อเพื่อทดลองพิมพ์

    1.คำสั่งที่ใช้ในการจัดย่อหน้า
    คำสั่ง P นี้จะเพิ่มบรรทัดว่างก่อนและหลังตัวอักษรที่เราพิมพ์ไปโดยอัตโนมัติ ตามที่แสดงในตัวอย่าง

รูปแบบ p tag

<p> ย่อหน้าที่ 1 </p> <p> ย่อหน้าที่ 2 </p> <p> ย่อหน้าที่ 3 </p>

    2.คำสั่งที่ใช้ในการขึ้นบรรทัดใหม่
    การตัดบรรทัดใหม่นั้นปรกติ web browser จะทำการตัดให้อยู่แล้ว แต่การตัดคำของ web browser จะตัดเมื่อแสดงผลไม่ได้ แต่ถ้าเราใส่คำสั้ง <br> เข้าไป web browser จะตัดให้ทันที ซึ่งคุณอาจจำเป็นที่จะต้องตัดคำเป็นบรรทัดสั้นๆเช่น การเขียนกลอนดังตัวอย่าง

รูปแบบ br tag

บรรทัดที่ 1 <br> บรรทัดที่ 2 <br> บรรทัดที่ 3 <br>

    3.คำสั่งที่ใช้กับข้อความที่เป็นหัวเรื่อง
    คำสั่ง h จะมีทั้งหมด 6 ลำดับด้วยกัน ไล่ตั้งแต่ h1,h2,h3,h4,h5,h6 ซึ่งขนาดของ h1 จะใหญ่ที่สุดดังตัวอย่างที่แสดง โดยเราจะใช้กับตัวอักษรที่ต้องการให้เป็นหัวเรื่องเพื่อให้อักษรนั้นโดดเด่น ขึ้นมา จะสังเกตุได้ว่าเมื่อใช้ h tag จะตัดตัวอักษรที่ต่อจาก h tag เป็นบรรทัดใหม่อัตโนมัติ

รูปแบบ h tag

<h1>head 1</h1> <h2>head 2</h2> <h3>head 3</h3> <h4>head 4</h4> <h5>head 5</h5> <h6>head 6</h6>

    4. คำสั่งที่ใช้ในการขึดเส้นคั่น
    คำสั่งที่ใช้ในการขีดเส้นคั่น

รูปแบบ hr

<p>เนื้อหาบทที่ 1</p> <hr> <p>เนื้อหาบทที่ 2</p> <hr>

    5.คำสั่งที่ใช้ในการจัดตัวอักษรชิดซ้าย ชิดขวา หรือกึ่งกลาง
    การจัดให้ตัวอักษรให้ชิดซ้าย ขวา หรือกึ่งกลาง เราจะใช้ Attributes ให้รายละเอียดของ tag โดยเราจะใช้ aling เพื่อบอกว่าให้ชิดซ้าย (align = 'left') ชิดขวา (align = 'right') และ จัดกึ่งกลาง (align = 'center')

รูปแบบ align

<h3 align = 'left'>ชิดซ้าย</h3> <h3 align = 'right'>ชิดขวา</h3> <h3 align = 'center'>จัดเข้ากลาง</h3>

    6. คำสั่งที่ใช้ในการเปลี่ยนสีพื้นหลัง
    bgcolor เป็น Attributes อย่างหนึงเหมือนกันที่ใช้กำหนดสี คุณอาจเปลี่ยนจาก สีเขียว(green) เป็น เหลือง(yellow) หรือสีอื่นๆก็ได้

รูปแบบ bgcolor

<body bgcolor ='green'> <h1> ดูสีพื้นหลัง </h1> </body>

    7. การเขียนคำบรรยาย soure code
    ในส่วนของคำบรรยาย soure code นั้นจะไม่แสดงที่ web browser เราเขียนเพื่อบรรยายว่า sorce code ส่วนนี้ใช้ทำอะไร เพื่อความสะดวกเมื่อกลับมาแก้ไข sorce code ในภายหลังเพราะเราอาจจำไม่ได้ว่าเราเขียนส่วนนี้ไว้เพื่ออะไร เพราะว่าจริงๆแล้ว soure code ที่เราใช้งานจริงนั้นจะมีมากมายหลายร้อยบรรทัด ถ้าเราไม่เขียนบรรยายไว้ก็ทำให้เสียเวลาในการหาส่วนที่เราต้องการจะแก้ไข

รูปแบบการเขียนคำบรรยาย source code

<!-- คำบรรยาย source code --!>

โครงสร้างคำสั่งของ 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)

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

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

ในบทต่อไปจะเป็นคำสั่งที่อยู่ในส่วนของ Body section ทั้งหมด

HTML

    ต้นกำเนิดของภาษา HTML เกิดจาก เมื่อปี 1989 นักฟิสิกส์ชื่อ Tim Berners-Lee แห่งสถาบันวิจัย CERN เสนองานวิจัยเรื่อง prototyped ENQUIRE และ Hypertext system ใช้สำหรับนักวิจัยของสถาบันเพื่อแบ่งข้อมูลกัน และถูกพัฒนามาเรื่อยๆจนถึงปัจจุบัน

    HTML     เป็นตัวย่อมาจาก Hypertext Markup Language เป็นภาษาหลักที่ใช้ในการแสดงผลบนเว็บ บราวเซอร์ในอินเตอร์ โดยสามารถนำเสนอข้อมูลตัวอักษร รวมทั้งเชื่อมต่อเพื่อ แสดงภาพ , เสียง และไฟล์ในรูปแบบอื่นๆ

ภาษา HTML จะแบ่งออกเป็น 2 ส่วน คือ

1. ส่วนของคำสั่ง (tag) เป็นส่วนที่กำหนดรูปแบบของข้อความที่แสดง ซึ่งเราเรียกว่า Tag โดยจะอยู่ในเครื่องหมาย < ... >

2. ส่วนของบทความทั่วๆไป เป็นส่วนของข้อความที่เราต้องการแสดงผล



ตัวอย่างการใช้งานภาษา HTML

คุณอาจลองพิมพ์ตามตัวอักษรด้านล่างนี้ ใน Text editer ของคุณเช่น Notepad

<html>     <head>         <title> หัวข้อเรื่อง ของหน้านี้ </title>     </head>     <body>             เนื้อหาที่จะแสดงใน web browser     </body> </html>

เมื่อคุณพิมพ์เสร็จก็ให้ save ในชื่อ mypage.html และลองใช้ web browser อย่าง internet explorer หรือ fire fox เปิดดูก็จะเห็นผลตามรูปด้านล่าง

การทำงานของ code ด้านบน

1. <html> ...... </html> ในการใช้งาน HTML เราจะต้องเริ่มด้วย <html> และปิดด้วย </html> เสมอ

2. <head> ...... </head> เป็นส่วนที่ใช้ให้รายละเอียดเกี่ยวกับ เว็บเพจหน้านี้ ซึ่งจะไม่แสดงให้เห็นในส่วนของการแสดงผลของ web browser แต่จะมีผลกับส่วนอื่นๆ เช่น การหาของ search engine (google,yahoo) การใช้งานก็จะมีคำสั่งย่อยเพื่อบรรยายรายละเอียด เช่น <title> .... </title> , <meta> และอื่นอีกมากมาย

3. <title> .......... </title> ในส่วนตัวอักษรที่อยู่ในคำสั่งนี้จะอยู่ใน title bar ของ web page

4. <body> .......... </body> ตัวอักษรที่อยู่ในคำสั่งนี้จะแสดงส่วนแสดงผลของ web browser

ในบทต่อไปเราจะอธิบายรายละเอียดของ คำสั่ง (tag) ให้ละเอียดขึ้น

ซอฟต์แวร์แนะนำสำหรับองค์กร

ซอฟต์แวร์แนะนำสำหรับองค์กร
Apache เป็นโปรแกรมที่ใช้ทำเว็บเซิร์ฟเวอร์ยอดนิยมในปัจจุบัน (ดูจากสถิติการใช้งานในเว็บไซต์ http://news.netcraft.com/archives/web_server_survey.html) ดูรายละเอียดของ Apache HTTP Server Project ได้ที่ http://httpd.apache.org
Vsftpd เป็นโปรแกรมใช้ทำเอฟทีพีเซิร์ฟเวอร์ สำหรับส่งถ่ายไฟล์ ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.proftpd.org
VSFTPd เป็นโปรแกรมใช้ทำเอฟทีพีเซิร์ฟเวอร์สำหรับส่งถ่ายไฟล์ ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://vsftpd.beasts.org
Sendmail เป็นโปรแกรมใช้ทำเมลเซิร์ฟเวอร์ (MTA) ที่นิยมในอดีตจนถึงปัจจุบัน โดยที่ Sendmail ได้ถูกนำเป็นต้นแบบในการพัฒนาระบบเมล์ค่ายอื่นๆ อีกหลายๆ ค่าย ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.sendmail.org
Postfix เป็นโปรแกรมใช้ทำเมลเซิร์ฟเวอร์ (MTA) คาดว่าจะมาแทนที่ Sendmail ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.postfix.org
Dovecot เป็นโปรแกรม POP3/IMAP Server (MTA) ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.dovecot.org
BIND9 เป็นโปรแกรมใช้ทำดีเอ็นเอสเซิร์ฟเวอร์ สำหรับบริการโดเมนเนมใช้งานในหน่วยงาน ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ https://www.isc.org
MySQL เป็นโปรแกรมใช้ทำดาต้าเบสเซิร์ฟเวอร์ ปัจจุบันบริษัท Sun Microsystem ได้ซื้อไปแล้วแต่ยังคงมีในส่วนของการพัฒนาส่วน Open Source อยู่ ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.mysql.com
PostgreSQL เป็นโปรแกรมใช้ทำดาต้าเบสเซิร์ฟเวอร์ ที่มีความแข็งแกร่งสูง ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.postgresql.org
PHP เป็นภาษาที่ใช้พัฒนาเว็บไซต์ที่ได้รับความนิยมสูงสุดในปัจจุบัน ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.php.net
Python เป็นภาษาที่ใช้แอพลิเคชั่นได้ทั้งแบบออนไลน์และอ๊อฟไลน์ ที่กำลังมาแรงมาก เน้นพัฒนาไปในแนว OOP ปัจจุบันภาษา Python ถูกนำมาพัฒนาแอพลิเคชันชื่อดังหลายตัว อาทิ Google Apps ,Plone CMF, Mailman, รวมทั้งถูกนำไปพัฒนาใช้งานในองค์กรอวกาศ NASA เป็นต้น ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.python.org
SquirrelMail เป็นโปรแกรมที่ใช้ทำเว็บเบสอีเมล ที่ได้รับความนิยมสุดในปัจจุบัน สามารถใช้งานได้ทั้งบนระบบวินโดวส์และลีนุกซ์ ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.squirrelmail.org
IPTABLES เป็นโปรแกรมที่ใช้ทำไฟล์วอลสำหรับกรองแพ็กเกจต่างๆ ทั้งภายในและภายนอกระบบ ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์http://www.netfilter.org
Squid เป็นโปรแกรมใช้ทำพร็อกซี่เซิร์ฟเวอร์ ที่เป็นที่นิยมใช้งานอย่างมาก ส่วนใหญ่จะใช้คู่กับโปรแกรม IPTABLES และ DHCP เพื่อทำเป็นระบบ NAT หรือ DMZ สำหรับควบคุมเครื่องลูกข่ายในองค์กร ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.squid-cache.org
MRTG เป็นโปรแกรมใช้วิเคราะห์การจราจรบนระบบเครือข่าย
ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://oss.oetiker.ch/mrtg/
NMAP ย่อมาจาก Network Mapper เป็นโปรแกรมใช้ตรวจสอบติดตามการใช้งานระบบเครือข่าย สามารถใช้ตรวจสอบการใช้งานเครือข่าย รวมทั้งใช้ตรวจสอบซอฟต์แวร์ผิดกฎหมาย ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.nmap.org
Webalizer เป็นโปรแกรมใช้วัดสถิติการใช้งานเว็บไซต์โดยการเก็บ Log ของเว็บเซิร์ฟเวอร์มาตรวจสอบ ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.webalizer.org
Snort เป็นโปรแกรม IDS / IPS ใช้สำหรับตรวจสอบ เตือนก่อนผู้บุกรุกเข้าระบบ ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.snort.org
OpenSSL เป็นโปรแกรมสำหรับเซ็ตให้ระบบมีความปลอดภัยมากขึ้นโดยการใช้คีย์พิเศษ ทำผ่านโปรโตคอล SSL ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.openssl.org
Spamsession เป็นโปรแกรมใช้สำหรับกันสแปมเมล์ ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://spamassassin.apache.org/
ClamAV เป็นโปรแกรม Clam AntiVirus ที่ได้รับความนิยมค่อนข้างสูงสำหรับติดตั้งใช้งานบนเซิร์ฟเวอร์ สำหรับผู้ที่ใช้งานบนเครื่องเดสทอปจะมีโปรแกรมที่ชื่อว่า ClamWin ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.clamav.net
Samba เป็นโปรแกรมใช้ทำ File Server หรือ Pinter Server สามารถนำมาทำเป็นระบบแชร์ไฟล์ร่วมกับระบบวินโดวส์ที่มีอยู่เดิม ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.samba.org
FreeRADIUS เป็นโปรแกรมใช้ในการตรวจสอบสิทธ์ของผู้ใช้งาน โดยการรวบรวมแอคเคาน์หลายเซิร์ฟเวอร์มาตรวจสอบไว้ในที่ๆ เดียวกัน ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://freeradius.org
Webmin เป็นโปรแกรมใช้บริหารเซิร์ฟเวอร์ผ่านหน้าเว็บไซต์ ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.webmin.com
ISPConfig เป็น Control Panel สำหรับบริหารจัดการเซิร์ฟเวอร์ ผ่านหน้าเว็บไซต์ ทำให้การใช้งานต่างๆ ง่ายเป็นอย่างมาก ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.ispconfig.org
VHCS เป็น Control Panel สำหรับบริหารจัดการเซิร์ฟเวอร์ ผ่านหน้าเว็บไซต์ ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://vhcs.net
OpenSCE ใช้ในการทำระบบ Cluster ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.opensce.org
OpenMosix ใช้ในการทำระบบ Cluster ดูรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://openmosix.sourceforge.net

ระบบปฏิบัติการเซิร์ฟเวอร์ CentOS Linux ?

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

  ในปัจจุบันซอฟต์แวร์สำหรับใช้ทำเป็นระบบ Intranet หรือ Internet Server ขององค์กรมีให้เลือกใช้งานหลายตัวด้วยกัน อาทิ เช่น Windows Server (Windows Server 2003, Windows Server 2008), Linux Server (RedHat, Fedora, CentOS, Ubuntu, Debian, Slackware, SuSE, Mandriva, OpenNA, IPCop, Linux-SIS), BSD Server (FreeBSD, OpenBSD, NetBSD), Solaris (Sun Solaris, OpenSolaris) เป็นต้น การที่จะเลือกระบบปฏิบัติการตัวใดมาทำเซิร์ฟเวอร์ใช้งานในองค์กรนั้น สำหรับ Admin มือเก๋าไม่น่าเป็นปัญหามากนักเพราะได้ทดสอบลองผิดลองถูกมาพอสมควร จะว่าไปแล้วในอดีตใครที่ติดตั้ง Linux และทำการคอนฟิกให้ระบบใช้งานผ่านได้ก็ถือว่าเก่งพอสมควร รวมทั้งหลังการติดตั้งเสร็จก็สามารถเปิดใช้งานได้ตามปกติ น้อยครั้งนักที่ระบบจะโดนแฮกซ์ แต่หากเป็น Admin น้องใหม่ในปัจจุบันการลองผิดลองถูกคงเป็นการยากแล้ว เนื่องจากปัจจุบันมีแฮกเกอร์ทั่วบ้านทั่วเมืองใครๆ ก็สามารถเรียนรู้วิธีการแฮกซ์ระบบเซิร์ฟเวอร์ผ่านเว็บ Google สำหรับ Admin น้องใหม่กว่าจะทดลองสำเร็จบางครั้งระบบโดนเจาะไปเรียบร้อยแล้ว

   CentOS ย่อมาจาก Community ENTerprise Operating System เป็นลีนุกซ์ที่พัฒนามาจากต้นฉบับ RedHat Enterprise Linux (RHEL) โดยที่ CentOS ได้ นำเอาซอร์สโค้ดต้นฉบับของ RedHat มาทำการคอมไพล์ใหม่โดยการพัฒนายังเน้นพัฒนาเป็นซอฟต์แวร์ Open Source ที่ถือลิขสิทธิ์แบบ GNU General Public License ในปัจจุบัน CentOS Linux ถูกนำมาใช้ในการทำ Web Hosting กันอย่างกว้างขวางเนื่องจากเป็นระบบปฏิบัติการที่มีต้นแบบจาก RedHat ที่มีความแข็งแกร่งสูง (ปัจจุบันเน้นพัฒนาในเชิงการค้า) การติดตั้งแพ็กเกจย่อยภายในสามารถใช้ได้ทั้ง RPM, TAR, APT หรือใช้คำสั่ง YUM ในการอัปเดทซอฟต์แวร์แบบอัตโนมัติ สามารถอ่านรายละเอียดเพิ่มเติมได้ที่เว็บไซต์ http://www.centos.org

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

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

2. เพื่อนำมาทำเซิร์ฟเวอร์บริการงานต่างๆ ในองค์กร ซึ่งภายใน CentOS มี แพ็กเกจย่อยที่นำมาใช้ทำเซิร์ฟเวอร์สำหรับใช้งานในองค์กรจำนวนมาก อาทิ เช่น Web Server(Apache), FTP Server(ProFTPd/VSFTPd), Mail Server(Sendmail/Postfix/Dovecot), Database Server(MySQL/PostgreSQL), File and Printer Server(Samba), Proxy Server(Squid), DNS Server(BIND), DHCP Server(DHCPd), Antivirus Server(ClamAV), Streaming Server, RADIUS Server(FreeRADIUS), Control Panel(ISPConfig) เป็นต้น

3. เพื่อนำมาทำเป็นระบบเซิร์ฟเวอร์สำหรับจ่ายไอพีปลอม (Private IP Address) ไปเลี้ยงเครื่องลูกข่ายในองค์กร รวมทั้งตั้งเป็นระบบเก็บ Log Files ผู้ใช้งาน เพื่อให้สอดคล้องกับพระราชบัญญัตว่าด้วยการกระทำความผิดเกี่ยวกับ คอมพิวเตอร์ปี 2550

แพ็กเกจยอดนิยมสำหรับใช้งานบนระบบ CentOS
สำหรับในแผ่น CD ของ CentOS มีแพ็กเกจที่สามารถนำมาติด ตั้งใช้งานได้ทันทีจำนวนมาก โดยสามารถนำมาติดตั้งใช้งานได้ทันที สำหรับแพ็กเกจที่ไม่มีอยู่ในแผ่น CD สามารถเข้าไปดาวน์โหลดได้ที่เว็บไซต์ http://www.rpmfind.net หรือ http://www.freshrpms.net คิดว่าคงเพียงพอต่อการใช้งาน สำหรับบทความตอนต่อๆ ไปผู้เขียนจะแนะนำการติดตั้งใช้งานซอฟต์แวร์เหล่านี้กัน โดยจะเน้นเป็นภาคปฏิบัติ เพื่อให้ผู้อ่านสามารถทดสอบหรือทดลองทำตามได้ เพื่อที่จะเป็นการยกระดับหรือพัฒนาความรู้ ความสามารถในวงการ Admin ไทย

จะหาดาวน์โหลดตัวติดตั้ง CentOS ได้ที่ไหน
สำหรับตัวติดตั้ง CentOS ผู้อ่านสามารถดาวน์โหลดตัวติดตั้งแบบ image file แล้วมาทำการเขียนแผ่น CD/DVD ใช้งานเอง แนะนำให้ไปดาวน์โหลดจากเว็บไซต์ http://isoredirect.centos.org/centos/5/isos/i386/ หรือไม่ก็ลองหาซื้อแผ่นที่เขาวางขายแถวพันทิพย์หรือฟอร์จูนดู

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

1.การติดตั้งระบบ Linux แยกกับระบบ Windows
การติดตั้งลักษณะนี้ในฮาร์ดดิก์สหนึ่งก้อนจะทำการติดตั้งระบบปฏิบัติการแยก กันระหว่างระบบ Linux กับระบบ Windows โดยติดตั้งระบบ Windows ได้ที่ไดร์ฟหลัก (C:) และติดตั้งตั้งระบบ Linux ไว้ที่ไดร์ฟรอง สำหรับไดร์ฟที่ทำการติดตั้งระบบลีนุกซ์ต้องแบ่งอย่างน้อยสองพาร์ติชั่น คือ Linux Native สำหรับไว้เก็บข้อมูล และ Linux Swap สำหรับเป็นสว๊อพพาร์ติชั่น ในการแบ่งพาร์ติชั่นสามารถใช้ Fdisk แบ่งก่อนการติดตั้งระบบวินโดวส์ หรือใช้โปรแกรม Partition Magic แบ่งหลังการติดตั้งวินโดวส์ ผู้ติดตั้งสามารถเลือกวิธีการแบ่งพื้นที่ฮาร์ดดิสก์ได้ว่าจะใช้เก็บระบบ วินโดวส์กี่เปอร์เซ็นต์และใช้เก็บระบบลีนุกซ์กี่เปอร์เซ็นต์

2.การติดตั้งระบบ Linux ผ่านทางโปรแกรม Virtualization
การติดตั้งวิธีนี้ผู้ติดตั้งสามารถเลือกได้ว่าจะติดตั้งระบบปฏิบัติการตัวใด ลงไปก่อน หลังจากติดตั้งระบบปฏิบัติการเสร็จก็ทำการติดตั้งโปรแกรม Virtualization อาทิ เช่น VMWare, VirtualBox หรือ Microsoft Virtual PC ภายหลัง เสร็จแล้วก็ทำการติดตั้งระบบ Windows Server หรือ Linux Server ผ่านทางโปรแกรม Virtualization อีกครั้งหนึ่ง การติดตั้งวิธีนี้ระบบจะทำการหั่นพื้นที่ส่วนหนึ่งของฮาร์ดดิสก์มาติดตั้ง ระบบ โดยไม่ไปทำลายระบบวินโดวส์/ลีนุกซ์ กล่าวคือหากระบบปฏิบัติการภายในโปรแกรม Virtualization พัง จะไม่ส่งผลกระทบต่อระบบปฏิบัติการที่ใช้งานอยู่ การติดตั้งตามแนววิธีนี้เหมาะสำหรับห้อง LAB ในสถาบันการศึกษา สถาบันฝึกอบรมหลักสูตรคอมพิวเตอร์ นักเรียน นักศึกษา หรือผู้สนใจทั่วไปที่ต้องการทดสอบใช้งานลีนุกซ์
- 2.1 ติดตั้ง Linux ผ่านทางโปรแกรม Virtualization ในระบบ Windows
- 2.2 ติดตั้ง Windows ผ่านทางโปรแกรม Virtualization ในระบบ Linux

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

3.1 การแบ่งฮาร์ดดิสก์เป็น 2 พาร์ติชั่น
3.1.1 พาร์ติชั่นแรกแบ่งเป็น Linux Swap (Swap) โดยแบ่งเป็น 2 เท่าของ RAM ที่ใช้งานอยู่ ตัวอย่างเช่นกรณีมี RAM อยู่ 512 MB ก็กำหนดเป็น 512 x 2 = 1024 MB
3.1.2 พาร์ติชั่นที่สองแบ่งเป็น Linux Native (Ext3) สำหรับเก็บข้อมูลโดยใชพื้นที่ดิสก์ที่เหลืออยู่

3.2 การแบ่งฮาร์ดดิสก์โดยแบ่งพาร์ติชั่นแบบแยกอิสระ
การแบ่งวิธีนี้ผู้ติดตั้งต้องมีการจัดสรรพื้นที่ฮาร์ดดิสก์ใช้งานตามความ ต้องการ อาทิ แบ่งพื้นที่ห้อง /home ไว้สำหรับเก็บเว็บไซต์ผู้ใช้งาน/ลูกค้า, ห้อง /usr สำหรับใช้ติดตั้งแพ็กเกจต่างๆ ห้อง /var สำหรับเก็บล็อกไฟล์, ห้อง /tmp สำหรับเก็บไฟล์ชั่วคราว, ห้อง /cache สำหรับเก็บบันทึกเหตุการณ์ต่างๆ ของโปรแกรมพร็อกซี่เซิร์ฟเวอร์, ห้อง/สำหรับตั้งเป็นรู๊ทพาร์ติชั่น, ห้อง swap สำหรับทำสว๊อพพาร์ติชั่น เป็นต้น

VPN (เครือข่ายส่วนตัวเสมือน) คืออะไร ??

เครือข่ายส่วนตัวเสมือน

ตัวอย่างการเชื่อมโยงเครือข่ายส่วนตัวเสมือน

เครือข่ายส่วนตัวเสมือน (อังกฤษ: Virtual Private Network: VPN) คือ เครือข่ายเสมือนที่ยอมให้กลุ่มของ site สามารถสื่อสารกันได้. นโยบายในการใช้งานใน VPN ถูกกำหนดโดยชุดของ admin policies ที่จุดทำขึ้นโดยสมาชิกในกลุ่มนั้น หรือถูกกำหนดอย่างเบ็ดเสร็จโดย Service Provider (SP) site ดังกล่าวอาจอยู่ภายในองค์กรเดียวกันหรือต่างองค์กรก็ได้ หรือ VPN อาจเป็น intranet หรือ extranet site ดังกล่าวอาจอยู่ในมากกว่าหนึ่ง VPN ก็ได้หรือ VPN อาจทับกัน, ทุก site ไม่จำเป็นต้องอยู่ภายใต้ SP เดียวกัน, VPN อาจกระจายอยู่หลาย SP

การส่งข้อมูลที่เป็นเครือข่ายส่วนตัว (Private Network) จะมีการเข้ารหัสแพ็กเก็ตก่อนการส่ง เพื่อสร้างความปลอดภัยให้กับข้อมูล และส่งข้อมูลไปตามเส้นทางที่สร้างขึ้นเสมือนกับอุโมงค์ที่อยู่ภายในเครือข่ายสาธารณะ (Public Network) นั่นก็คือเครือข่าย อินเทอร์เน็ต นั่นเอง เครือข่ายส่วนตัวเสมือนสามารถเชื่อมต่อเครือข่ายจากเครือข่ายหนึ่งไปยังอีกเครือข่ายหนึ่งได้ VPN จะช่วยให้คุณสามารถส่งข้อมูลระหว่างเครื่องคอมพิวเตอร์ โดยผ่านระบบอินเทอร์เน็ต ทำให้ได้รับความสะดวกและรวดเร็วในการส่งข้อมูลในแต่ละครั้ง

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

ส่วนเครือข่ายสาธารณะ (Public Data Network) เป็นเครือข่ายที่รวมเอาเครือข่ายระบบต่างๆ ไว้ด้วยกันและสามารถแลกเปลี่ยนข้อมูลได้อย่างอิสระ เหมาะสำหรับบุคคลหรือองค์กรที่ไม่ต้องการวางเครือข่ายเอง โดยการไปเช่าช่องทางของเครือข่ายสาธารณะซึ่งองค์กรที่ได้รับสัมปทานจัดตั้งขึ้น สามารถใช้งานได้ทันทีและค่าใช้จ่ายต่ำกว่าการจัดตั้งระบบเครือข่ายส่วนตัว
ลักษณะการทำงาน

ลักษณะการทำงานของเครือข่ายส่วนตัวเสมือน (Virtual Private Network) เป็นเครือข่ายที่มีเส้นทางทำงานอยู่ในเครือข่ายสาธารณะ ดังนั้นเรื่องความปลอดภัยของข้อมูลในเครือข่ายส่วนตัวจึงเป็นเรื่องที่ต้องคำนึงถึงเป็นอย่างมาก เครือข่ายส่วนตัวเสมือนจะมีการส่งข้อมูลในรูปแบบแพ็กเก็ตออกมาที่เครือข่ายอินเทอร์เน็ต โดยมีการเข้ารหัสข้อมูล (Data Encryption) ก่อนการส่งข้อมูลเพื่อสร้างความปลอดภัยให้กับข้อมูลและส่งข้อมูลผ่านอุโมงค์ (Tunneling) ซึ่งจะถูกสร้างขึ้นจากจุดต้นทางไปถึงปลายทางระหว่างผู้ให้บริการ VPN กับผู้ใช้บริการการเข้ารหัสข้อมูลนี้เอง เป็นการไม่อณุญาตให้บุคคลอื่นที่ไม่เกี่ยวข้องกับข้อมูล สามารถอ่านข้อมูลได้จนสามารถที่จะส่งไปถึงปลายทาง และมีเพียงผู้รับปลายทางเท่านั้นที่สามารถถอดรหัสข้อมูลและนำข้อมูลไปใช้ได้

การทำงานของระบบเครือข่ายส่วนตัว

Authentication VPN

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

Encryption

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

Tunneling

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

Firewall

หรือระบบรักษาความปลอดภัย มีหน้าที่ในการให้อนุญาตและไม่อนุญาตผู้ที่ต้องการเข้ามาใช้งานในระบบเครือข่าย

รูปแบบการให้บริการของ VPN

ตัวอย่างรูปแบบการให้บริการของ Intranet

ตัวอย่างรูปแบบการให้บริการของ Remote Access

Intranet VPN

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

Extranet VPN

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

Remote Access VPN

เป็นรูปแบบการเข้าถึงเครือข่ายระยะไกลจากอุปกรณ์เคลื่อนที่ต่าง ๆ ซึ่งสามารถเข้าถึงเครือข่ายได้ใน 2 ลักษณะ ลักษณะแรก เป็นการเข้าถึงจากไคลเอ็นต์ทั่วไป ไคลเอ็นต์จะอาศัยผู้ให้บริการอินเทอร์เน็ตเป็นตัวกลางในการติดต่อและเข้ารหัสการส่งสัญญาณจากไคลเอ็นต์ไปยังเครื่องไอเอสพีและลักษณะที่สองเป็นการเข้าถึงจากเครื่องแอ็กเซสเซิร์ฟเวอร์ (Network Access Server-Nas)

รูปแบบการใช้งานของ VPN

Software-Based VPN

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

Firewall-Based VPN

องค์กรส่วนใหญ่ที่เชื่อมต่อกับอินเทอร์เน็ตมีไฟร์วอลล์อยู่แล้วเพียงแค่เพิ่มซอฟต์แวร์ที่เกี่ยวกับการเข้ารหัสข้อมูลและซอฟต์แวร์ที่เกี่ยวข้องเข้าไปยังตัวไฟร์วอลล์ก็สามารถดำเนินงานได้ทันที Firewall-Based VPN มีส่วนคล้ายกับรูปแบบของซอฟต์แวร์และมีการเพิ่มประสิทธิภาพเข้าไปในไฟร์วอลล์ แต่ประสิทธิภาพก็ยังด้อยกว่าฮาร์ดแวร์ เป็นรูปแบบ VPN ที่นิยมใช้แพร่หลายมากที่สุด แต่ก็ไม่ได้เป็นรูปแบบที่ดีที่สุด สนับสนุนการทำงานบนระบบปฏิบัติการที่หลากหลาย บางผลิตภัณฑ์สนับสนุน Load Balancing รวมทั้ง IPsec

Router-Based VPN

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

Black Box-Based VPN

คือรูปแบบของฮาร์ดแวร์ VPN ที่มีลักษณะคล้ายกับเครื่องคอมพิวเตอร์ เป็นรูปแบบของ Hardware Base VPN อีกหนึ่งชนิด

ข้อดีและข้อเสียของการใช้งาน VPN

สถาปัตยกรรม	ข้อดี	ข้อเสีย
Software-Based VPN	สามารถนำอุปกรณ์เดิมมาประยุกต์ ใช้กับเทคโนโลยี VPN ได้ ทำงานได้ บนระบบปฏิบัติการที่หลากหลาย การติดตั้งง่าย	ความสามารถในการเข้ารหัส (Encryption) และการทำ Tunneling ต่ำ
Firewall-Based VPN	สามารถใช้ได้กับอุปกรณ์ที่มีอยู่เดิม และทำงานได้บนระบบปฏิบัติการที่ หลากหลายเช่นเดียวกับ Software-Based VPN	มีปัญหาคล้ายคลึงกับแบบ Software-Based VPN และอาจมีปัญหาเกี่ยวกับระบบ ความปลอดภัย
Router-Based VPN	เพิ่มเทคโนโลยีของ VPN เข้าไปในอุปกรณ์ Router ที่มีอยู่ ได้ทำให้ไม่จำเป็นต้องเปลี่ยน อุปกรณ์ ลดต้นทุน	อาจมีปัญหาในเรื่องของ ประสิทธิภาพเนื่องจากมี ความต้องการเพิ่มการ์ดอินเตอร์เฟส ในบางผลิตภัณฑ์
Black Box-Based VPN	ทำงานได้อย่างรวดเร็ว โดยจะ สร้างอุโมงค์ได้หลายอุโมงค์ และ มีการเข้ารหัสและถอดรหัสที่รวดเร็ว	การทำงานจำเป็นต้องใช้คอมพิวเตอร์ อีกเครื่อง เนื่องจาก Black Box ไม่ มีระบบบริหารจัดการโดยตรง

การทำ Tunnel

Tunneling คือการสร้างอุโมงค์เสมือนเพื่อส่งข้อมูลผ่านอุโมงค์นี้เพื่อออกสู่เน็ตเวิร์คมี 2 แบบ

Voluntary Tunneling

เป็นการทำงานของ VPN Client ซึ่งมีหน้าที่ในการติดต่อเข้าไปยัง ISP หลังจากนั้นจึงสร้าง Tunnel เชื่อมต่อไปยัง VPN Server โดยจะเป็นการติดต่อกันโดยตรง (live connection)

Compulsory Tunneling

การเชื่อมต่อ VPN ในวิธีนี้จะเป็นหน้าที่ของ ISP คือเมื่อมีผู้ใช้เชื่อมต่อเข้ามายัง ISP ISP ก็จะจะทำการตรวจสอบจนเสร็จ จากนั้นก็จะทำการเชื่อมต่อเครื่องของผู้ใช้เข้ากับเครือข่าย VPN ของผู้ใช้

รูปแบบโพรโทคอลของการทำ Tunnel

PPTP

PPTP ย่อมาจาก Point - to - Point Tunneling Protocol เป็นโพรโทคอลที่ผลิตและ ติดมากับระบบปฏิบัติการของ Microsoft ซึ่งร่วมกับบริษัทอื่นๆ 3 บริษัท พัฒนาขึ้น PPTP เป็นส่วนต่อเติมของโพรโทคอล PPP ดังนั้นจึงสนับสนุนเฉพาะการเชื่อมต่อแบบPoint-To-Point แต่ไม่สนับสนุนการเชื่อมต่อแบบ Point-To-Multipoint PPTP มีข้อได้เปรียบตรงที่สนับสนุนทั้งไคลเอ็นต์ และทันแนลเซิร์ฟเวอร์และยังได้รับการพัฒนาเพื่อให้เพิ่มประสิทธิภาพในด้านต่างๆขึ้นมาอีก ข้อดีคือสามารถใช้ได้กับทุกระบบปฏิบัติการ ใช้งานผ่าน NAT ได้ สะดวกในการติดตั้ง

L2F

L2F ย่อมาจาก Layer 2 Forwarding protocolพัฒนาโดยบริษัท CISCO System เป็นโพรโทคอลที่ทำงานบนเลเยอร์ที่ 2 โดยใช้พวกเฟรมรีเลย์หรือ ATM รวมถึง X.25 ในการทำทันแนล PPTP สามารถใช้เป็นแบบ client-initiated (ซึ่งทรานส์พาเรนต์สำหรับ ISP) หรือใช้เป็นแบบ client-transparent ก็ได้ L2F ต้องการการสนับสนุนในแอคเซสเซิร์ฟเวอร์และในเราท์เตอร์ ระบบการป้องกันของ L2F มีการจัดเตรียมบางอย่างที่ PPTP ไม่มีเช่นการ Authentication ของปลายทั้ง 2 ข้างของทันแนล

L2TP

L2TP ย่อมาจาก Layer 2 Tunneling Protocol การทำงานคล้ายๆกับ PPTP ต่างกันตรง L2TP จะใช้ User Datagram Protocol (UDP) ในการตกลงรายละเอียดในการรับส่งข้อมูลและสร้าง Tunnel ซึ่งเป็นการนำเอาข้อดีของทั้งสองโพรโทคอลมารวมไว้ด้วยกัน โดยนำโพรโทคอลในระดับ Layer 2 หรือ PPP มาหุ้มแพ็กเก็ตใน Layer 3 ก่อนที่จะหุ้มด้วย IP Packet อีกชั้น ดังนั้นจึงใช้วิธีพิสูจน์แบบ PPP L2TP ยังสนับสนุนการทำ Tunnel พร้อมกันหลายๆ อันบนไคลเอ็นต์เพียงตัวเดียว

IPSec

IPSec หรือ IP Security เป็นการรวม Protocol หลายๆอันมาไว้ด้วยกัน ประกอบด้วยการรักษาความปลอดภัยในการเข้ารหัส การตรวจสอบตัวตนและความถูกต้องของข้อมูล โดยมีการเข้ารหัส 2 แบบด้วยกัน คือ การเข้ารหัสเฉพาะส่วนของข้อมูลจะไม่มีการเข้ารหัส Header เรียกว่า Transport mode และวิธีที่ 2 คือ การเข้ารัหสทั้งส่วนของข้อมูลและ Header เรียกว่า Tunnel mode ซึ่งวิธีนี้จะทำให้ข้อมูลมีความปลอดภัยขึ้น

OPEN VPN

OPENVPN พัฒนาจาก SSL หรือ HTTPS ซึ่ง มีความปลอดภัยสูงมาก มีต้นกำเนิดมาจากระบบ LINUX ทำให้การใช้งาน จะต้องมี SERVER เป็น LINUX เข้ามาร่วมด้วย ในปัจจุบัน ADSL ROUTER สามารถ เปลี่ยน FIRMWARE เป็น LINUX แบบ OPEN SOURCE ได้เช่น DD-WRT (ADSL ROUTER ที่ขายทั่วไปใช้ LINUX แต่ ไม่ OPEN SOURCE) ทำให้สามารถใช้งาน OPEN VPN ได้ ง่ายๆ ไม่ต้องมี SERVER LINUX ความปลอดภัยที่มากขึ้น มาจากการ GEN CODE ของ KEY CA ขึ้นมา เพื่อใช้ในการ ตรวจสอบตัวตน และ มีการแก้ไข ปรับปรุงจาก VPN แบบ PPTP หรือ IPSEC เช่นการกำหนด PORT เปลี่ยนแปลง ได้โดยง่าย หรือ สามารถใช้งาน หลายๆ PORT ได้พร้อมๆ กัน ทำให้ OPEN VPN มีทั้งความปลอดภัย ความสะดวกในการติดตั้ง ปรับปรุง แต่ เพราะมีระบบ LINUX ทำให้ ผู้ใช้ (คนไทย) ยังกลัว ๆ กันอยู่

ข้อดีและข้อเสียของระบบ VPN

ข้อดีของระบบ VPN

• สามารถขยายการเชื่อมต่อเครือข่ายได้แม้ว่าเครือข่ายนั้นจะอยู่สถานที่ต่างกัน
• มีความยืดหยุ่นสูงเพราะสามารถใช้ VPN ที่ใดก็ได้ และยังสามารถขยาย Bandwidth ในการใช้งานได้ง่ายดาย โดยเฉพาะในการทำ Remote Access ให้ผู้ใช้ติดต่อเข้ามาใช้งานเครือข่ายได้จากสถานที่อื่น
• สามารถเชื่อมโยงเครือข่ายและแลกเปลี่ยนข้อมูลออกภายนอกองค์กรได้อย่างปลอดภัย โดยใช้มาตรการระบบเปิดและมีการเข้ารหัสข้อมูลก่อนการส่งข้อมูลทุกครั้ง
• สามารถลดค่าใช้จ่ายในการเชื่อมต่อ ง่ายต่อการดูแลรักษาการใช้งานและการเชื่อมต่อ

ข้อเสียของระบบ VPN

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

Responsive Design

Responsive Design

ถ้าใครอยากจะทำ Responsive Web แล้วล่ะก็ Bootstrap ได้เตรียม features รองรับไว้แล้วครับ ให้เรา enable responsive features ด้วยการเพิ่มโค้ดด้านล่างนี้ไว้ที่ <head>

<meta name="viewport" content="width=device-width, initial-scale=1.0"> . . . <link href="css/bootstrap-responsive.min.css" rel="stylesheet">

1 2 3 4 5

<meta name="viewport" content="width=device-width, initial-scale=1.0"> . . .  <link href="css/bootstrap-responsive.min.css" rel="stylesheet">

สไตล์ ชีท “bootstrap-responsive.min.css” จะเข้ามาช่วยเราจัดการในเรื่องของ responsive แบบอัตโนมัติครับ ไม่ว่าจะเป็นขนาดของ margin และ padding รวมไปถึงการเรียงกันของ grid ที่ viewport ขนาดต่างๆ หรือถ้าเราอยากให้ html elements ซ่อน/แสดง บน devices ไหน เราก็สามารถทำได้ง่ายๆ ด้วยการเพิ่ม class ที่ Bootstrap เตรียมไว้ให้ตามตารางนี้ครับ

Class	Phones (767px and below)	Tablets (979px to 768px)	Desktops (Default)
.visible-phone	Visible	Hidden	Hidden
.visible-tablet	Hidden	Visible	Hidden
.visible-desktop	Hidden	Hidden	Visible
.hidden-phone	Hidden	Visible	Visible
.hidden-tablet	Visible	Hidden	Visible
.hidden-desktop	Visible	Visible	Hidden

ตาราง ด้านบนจะแสดง class ต่างๆ ที่เอาไว้ ซ่อน/แสดง content ต่างๆ ในแต่ละ devices การใช้งานก็ง่ายๆ เพียงแค่เราเพิ่ม class เข้าไปที่ html element ที่ต้องการจะ ซ่อน/แสดง แบบนี้ครับ

<div class="row"> <div class="span3"> Secondary</div> <div class="span6"> Primary</div> <div class="span3 visible-desktop"> Sidebar</div> </div>

1 2 3 4 5

<div class="row">     <div class="span3">Secondary</div>     <div class="span6">Primary</div>     <div class="span3 visible-desktop">Sidebar</div>  </div>

จากตัวอย่างนี้จะได้ว่า คอลัมน์ “Sidebar” จะแสดงต่อเมื่อเป็นเคส Desktop เท่านั้น ในขณะที่คอลัมน์อื่นๆ จะแสดงในทุกๆ devices ครับ