วันพุธที่ 11 เมษายน พ.ศ. 2561

เทคโนโลยีความเป็นจริงขยาย Extended Reality: XR


เทคโนโลยีความเป็นจริงขยาย
Extended Reality: XR

ณัฐภัทร แก้วรัตนภัทร์
nutthapat.ke@ssru.ac.th

ประสบการณ์ที่ดื่มด่ำ คือ การเปลี่ยนแปลงการเชื่อมโยงระหว่างมนุษย์กับสารสนเทศ ประสบการณ์ และอื่น ๆ โดยเทคโนโลยีที่พยายามเสริมประสบการณ์ให้ดื่มด่ำ เช่น เทคโนโลยีความเป็นจริงเสริม (Augmented Reality: AR) หรือ เทคโนโลยีความเป็นจริงเสมือน (Virtual Reality: VR) แต่ทั้งสองเทคโนโลยีนี้ยังเกิดรอยต่อระหว่างมนุษย์หรือโลกความเป็นจริง (Real World) กับโลกเสมือน (Virtual World)

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

เทคโนโลยีความเป็นจริงเสมือน (Virtual Reality: VR) คือ เทคโนโลยีที่นำผู้ใช้งานออกจากสภาพแวดล้อมของโลกจริงไปสู่สภาพแวดล้อมของโลกเสมือน โดยทั่วไปจะประกอบไปด้วยเครื่องสวมใส่ศีรษะที่มีลักษณะเป็นแว่นขนาดใหญ่และอาจมีหูฟัง รวมถึงมีเครื่องควบคุมแบบมือจับเพื่อนำทางในโลกเสมือน

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

เทคโนโลยีความเป็นจริงขยาย (Extended Reality: XR) คือ เทคโนโลยีที่มุ่งเน้นในเรื่องของแถบประสบการณ์ (Spectrum of Experience) ของมนุษย์ โดยใช้วิธีลดรอยต่อระหว่างโลกความเป็นจริงกับโลกเสมือนเพื่อขยายความสมจริงให้สูงขึ้น ทำให้มนุษย์เกิดประสบการณ์ที่ดื่มด่ำมากขึ้น โดยเทคโนโลยีความเป็นจริงขยายจะผสมผสานเทคโนโลยีความเป็นจริงเสมือน (VR) เข้ากับเทคโนโลยีความเป็นจริงเสริม (AR) และทำการพัฒนาเพิ่มขึ้นโดยมีการปรับปรุงมุมมองการแสดงผลให้สมจริงยิ่งขึ้น และมีการนำเทคโนโลยีที่เกี่ยวกับการส่งกลิ่นและรับรู้เกี่ยวกับจมูก (Olfactory) และเทคโนโลยีที่เป็นตัวชี้นำความรู้สึก (Haptic Cues) เช่น ระดับการสั่นสะเทือน (Vibration) ระดับความร้อน ระดับความเย็น มาใช้ร่วมกันนั่นเอง





วันอังคารที่ 6 ธันวาคม พ.ศ. 2559

การใช้สไตล์ชีทในการกำหนดคุณลักษณะของตัวอักษร ตอนที่ 2

2. การกำหนดสกุลอักษรจากภายนอก (@Font-Face Rule)

  • @font-face rule ช่วยให้สามารถนำ Font จากภายนอกแสดงผลบนเว็บเบราเซอร์ได้ 
  • คุณสมบัติของ font-face ช่วยให้สามารถกำหนดชื่อสกุลและตำแหน่งสกุลอักษรได้ โดยสกุลอักษรที่จะนำมาใช้นั้น จะต้องเป็นนามสกุลTrueType format (TTF)


วันจันทร์ที่ 5 ธันวาคม พ.ศ. 2559

การใช้สไตล์ชีทในการกำหนดคุณลักษณะของตัวอักษร ตอนที่ 1

Using the CSS Font Properties (Part 1)

1. การกำหนดสกุลอักษร (Specifying Font Family)

    ในการให้เว็บเพจแสดงผลตัวอักษรให้มีลักษณะเป็นไปตามที่ผู้ออกแบบได้ออกแบบไว้นั้น จำต้องมีการกำหนดสกุลให้แก่อักษร เพื่อทราบว่าลักษณะอักษรนั้นจะมีรูปแบบอย่างไร การกำหนดสกุลอักษร (font family) มีรูปแบบพื้นฐาน ดังนี้
font-family: sans-serif;
    หาก font family มีชื่อหลายคำ ให้กำหนด “” ครอบ เช่น “Times New Roman” และ หากมีการกำหนด font family ลำดับรอง ให้ขั้นด้วย เครื่องหมาย Comma
font-family: “Times New Roman”, sans-serif;
    การกำหนดสกุลอักษร โดยใช้ชื่อสกุลสามัญ (generic names) ซึ่งชื่อสกุลสามัญ คือ font family ที่สามารถนำมาใช้ได้ทันที และเป็นที่ทราบโดยทั่วกันว่าจะสามารถแสดงผลบนเว็บเบราเซอร์ได้หลากหลาย
font-family: serif;
font-family: sans-serif; 
font-family: cursive;
font-family: fantasy;
font-family: monospace; 
    Serif แปลว่า เส้นเล็กๆ ของตัวพิมพ์ที่ทำให้เด่นชัด
    Sans แปลว่า ปราศจาก
    Sans-Serif แปลว่า ปราศจากเส้นเล็กๆของตัวพิมพ์

    Font Family ในสกุล Sans-Serif มีอีกหลายลักษณะ เช่น สกุล Arial และ สกุล Helvetica ดังตัวอย่างในภาพ

















ตัวอย่าง
การกำหนดสกุลอักษรสามัญ Generic Font Families
p { font-family: sans-serif; }

การระบุเจาะจงสกุลอักษรด้วย “”  Specific Font Families
p { font-family: "lucida console"; }

การระบุสกุลอักษรแบบลำดับ  Font Fallbacks
p { font-family: arial, helvetica; }

ข้อควรระวัง
ในการกำหนดสกุลอักษรนั้น เมื่อแสดงผลบนเว็บเบราเซอร์แต่ละยี่ห้ออาจให้ลักษณะของตัวอักษรที่แตกต่างกัน ดังภาพ


SELECTOR IN CASCADING STYLE SHEET: CSS [Part1]

SELECTOR IN CASCADING STYLE SHEET: CSS
ตัวเลือกสำหรับการกำหนดสไตล์

Selector คือ ตัวเลือกสำหรับการกำหนดไสตล์ โดย Selector เป็นการเลือก element ที่สอดคล้องกับเงื่อนไข เพื่อแสดงผลตามที่ Selector นั้นๆ กำหนดไว้เฉพาะนั่นเอง โดย Selector มีโครงสร้างดังนี้


Selector {
          Property: Value;}

โดยที่
          Selector คือ ชื่อของตัวเลือกสำหรับการกำหนดสไตล์
          Property คือ คุณสมบัติที่ต้องการกำหนดการแสดงผล
          Value คือ ค่าของคุณสมบัติ (Property)
          เครื่องหมาย { } คือ ขอบเขตของ Selector นั้นๆ
          เครื่องหมาย : คือ การกำหนดค่าของ Property
          เครื่องหมาย ; คือ การจบการกำหนดค่าของ Property
          ชุดของ Property: Value; เรียกว่า Declaration

Selector นั้นมีหลากหลายแบบ โดยสามารถจำแนกเป็น 6 ประเภทใหญ่ๆ คือ
          1. ตัวเลือกอเนกประสงค์ (Universal Selector)
          2. ตัวเลือกชนิดอีลิเมนท์ (Element Selector)
          3. ตัวเลือกชนิดไอดี (ID Selector)
          4. ตัวเลือกชนิดคลาส (Class Selector)
          5. ตัวเลือกชนิดแอ็ตทริบิวท์ (Attribute Selector)
          6. ตัวเลือกเทียม (Pseudo-Selector)