Get Adobe Flash player

pamok.r

การจัด Layout บนหน้าเว็บไซต์แบบอิสระโดยใช้ CSS Relative+Absolute

ในบางครั้งเราต้องการวาง Element ไว้บนตำแหน่งที่ไม่ชิดซ้าย ไม่ชิดขวา และไม่อยู่กึ่งกลางของพื้นที่ ซึ่งอาจจะเป็นตำแหน่งเยื้องขวาบนเล็กน้อยแต่ไม่สุด การใช้ CSS ในการกำหนดให้ Element ที่ต้องการอยู่ในตำแหน่งนั้นพอดีโดยใช้เทคนิค Relative+Absolute จะช่วยให้เราจัดตำแหน่งในกรณีนี้ได้ง่าย

CSS Relative+Absolute คือการกำหนดคุณสมบัติ Position ของ Element โดยกำหนดให้ Element แม่มี Position เป็น Relative ส่วน Element ลูกมี Position เป็น Absolute จากนั้นใช้การกำหนด Element ลูก ให้มีระยะห่างจากขอบตามต้องการโดยใช้คุณสมบัติ top, left, right หรือ bottom ดังตัวอย่างนี้

css-re-ab1

ดังในตัวอย่าง Element ลูกกำหนด top เป็น 80px คือเว้นระยะจากด้านบนลงมา 80px และ right เป็น 0 คือชิดขอบขวาผลที่ได้ Element จะอยู่ในตำแน่งดังภาพ

css-re-ab2

สามารถศึกษาคุณสมบัติอื่น ๆ ของ CSS Position เพิ่มเติมได้ที่ http://www.w3schools.com/css/css_positioning.asp

Atom/Emmet Bug

Open File -> Keymap…

การใช้ CSS3 @font-face Rule เพื่อนำฟอนต์ประจำมหาวิทยาลัยมาแสดงบนเว็บไซต์

ใน CSS3 (Version 3) สามารถนำฟอนต์ที่ไม่ใช่ฟอนต์มาตรฐานบนเว็บไซต์ (CSS Web Safe Font Combinations) มาใช้บนเว็บไซต์ได้ด้วยการใช้ @font-face Rule

โดยเริ่มต้นจากการดาวน์โหลดไฟล์ฟอนต์ประจำมหาวิทยาลัย fonts.zip

ซึ่งแต่ละ Web Browser จะสนับสนุนชนิดของไฟล์ฟอนต์ที่แตกต่างกัน ดังนี้

font-face-support

จากนั้นใส่ CSS3 @font-face Rule เพื่อเรียกใช้ไฟล์ฟอนต์ ที่ประกอบด้วยฟอนต์ตัวอักษรปกติ (db_chidlom_xregular) และฟอนต์ตัวอักษรแบบหนา (db_chidlom_xbold) ให้พิจารณาที่อยู่ของไฟล์ฟอนต์ให้ถูกต้อง ตรงกับที่อยู่ไฟล์ฟอนต์จริงบนเว็บไซต์

สำหรับการเรียกใช้ฟอนต์ประจำมหาวิทยาลัยสามารถเรียกใช้ได้โดยตรงเช่น

<h3 style=”font-family:’db_chidlom_xbold’, sans-serif, Arial”>หัวข้อฟอนต์มหาวิทยาลัย</h3>

หรือการกำหนดผ่าน Id หรือ Class ผ่าน CSS เช่น

ตัวอย่างผลลัพธ์จากการใช้ฟอนต์ประจำมหาวิทยาลัย

แนะนำ jQuery plugin Thailand Province Set v.1.0

Thailand Province Set เป็น jQuery Plugin สำหรับช่วยในการเชื่อมโยงตัวเลือกระหว่าง จังหวัด (Province), เขต/อำเภอ (District), แขวง/ตำบล (SubDistrict) และ รหัสไปรษณีย์ (Zipcode) โดยที่ผู้ใช้ไม่จำเป็นต้องบันทึกด้วยตัวเองทุกตัวเลือก โดยอาศัยข้อมูลความสัมพันธ์ระหว่างจังหวัด เขต และแขวงที่มีอยู่ ดังภาพ

Dropdown จังหวัด เขต แขวง

Dropdown จังหวัด เขต แขวง

เมื่อผู้ใช้เลือกจังหวัด เขต/อำเภอ เปลี่ยนเป็นของจังหวัดนั้น และถ้าเลือก เขต/อำเภอ แขวง/ตำบล ก็จะเปลี่ยนตาม และเมื่อผู้ใช้เลือก แขวง/ตำบล ก็จะแสดงรหัสไปรษณีย์

Download

jquery.thprovinceset.1.0.js

การใช้งาน

แนบไฟล์ jQuery และ Plugin “jquery.thprovinceset.1.0.js” ไว้ภายใน <head></head>

HTML ฟอร์มใส่ select รวมทั้ง id เพื่ออ้างอิง ประกอบด้วย จังหวัด เขต/อำเภอ แขวง/ตำบล และรหัสไปรษณีย์

การตั้งค่า plugin ควรแนบไว้ก่อนปิด </body>

ไฟล์ฉบับเต็ม

การเขียน Trigger บน Microsoft SQL Server

Trigger ในที่นี้หมายถึง Database Trigger ซึ่งก็คือคำสั่งพิเศษ หรือ Stored procedure ของ SQL ที่จะเริ่มทำงานเมื่อมีเหตุการณ์ใด เหตุการณ์หนึ่งเกิดขึ้น Database หรือ Table  ยกตัวอย่างเช่น เมื่อมีการ Insert, Update และ Delete ข้อมูลใน Table

ตัวอย่างสถานการณ์ที่จะนำ Trigger มาใช้ประโยชน์

ณ บริษัทเอกชนแห่งหนึ่งมีฐานข้อมูลบุคลากร (HR) ดูแลโดยฝ่ายบุคคล และฐานข้อมูลผู้ใช้ระบบ (Single Sign On) ดูแลโดยฝ่าย IT เมื่อมีพนักงานใหม่ หรือพนักงานลาออก ฝ่ายบุคคลก็จะเข้าไปบันทึกข้อมูลลงฐานข้อมูล HR และยังต้องแจ้งให้ฝ่าย IT ทราบด้วย เพื่อให้ฝ่าย IT ทำการเพิ่มและลบผู้ใช้งานในฐานข้อมูล SSO

เพื่อลดขั้นตอนของงานเราจะสร้าง Trigger ที่จะทำงานเมื่อมีการ Insert, Update หรือ Delete ข้อมูล Table บุคลากรใน HR โดยให้ส่งข้อมูลไปยังฐานข้อมูล SSO โดยตรง เมื่อมีพนักงานใหม่ หรือพนักงานลาออก ฝ่ายบุคคลก็จะเข้าไปบันทึกข้อมูลลงฐานข้อมูล HR ตามปกติ แต่ Trigger จะทำงาน และส่งข้อมูลใหม่ไปยังฐานข้อมูล SSO ด้วย

ตัวอย่าง Trigger

คำสั่ง Trigger นี้จะผูกติดกับ Table ชื่อ Employee ในฐานข้อมูล HR ซึ่งจะทำงานหลังจากเกิดเหตุการณ์ Insert โดยการนำข้อมูลไป Insert ลงใน Table ชื่อ UserLogon ในฐานข้อมูล SSO ผ่านทาง Table ที่ชื่อว่า inserted ซึ่ง inserted คือ Table ที่จะเก็บ Row ของข้อมูลที่ถูก Insert ในตาราง Employee

ส่วน SSO_Server นั้นเกิดจากการทำ Linked Server สามารถศึกษาเพิ่มเติมได้ที่ https://msdn.microsoft.com/en-us/ms188279.aspx

รายละเอียดเพิ่มเติมเกี่ยวกับ Trigger ศึกษาเพิ่มเติมได้ที่ https://msdn.microsoft.com/en-us/library/ms189799.aspx

Google จัดอันดับเว็บไซต์โดยใช้ Algorithm ใหม่เริ่ม 21 เม.ย. นี้

google-logo[1]

ทุกวันนี้เราใช้โทรศัพท์มือถือในการเข้าถึงเว็บไซต์ ค้นหาข้อมูล ใช้งาน Application ต่าง ๆ เพื่ออำนวยความสะดวกสบายให้แก่เราในการทำงาน การใช้ชีวิต หรือเพื่อความบันเทิงจนเป็นกิจวัตร และถ้าหากพูดถึงเรื่อการเข้าถึงเว็บไซต์ และการค้นหาข้อมูล หลาย ๆ คนอาจจะเคยเจอปัญหาเมื่อเราค้นหาข้อมูลใด ๆ บน Google ซึ่งถือ Search Engine ยอดนิยม เราอาจจะพบว่าเว็บไซต์แรก ๆ ของผลการค้นหากลายเป็นเว็บไซต์ที่ไม่รองรับการเข้าถึงด้วยโทรศัพท์มือถือ หรือที่เรียกกันว่าไม่มีคุณสมบัติ Mobile-Friendly ทำให้เราต้องรอนานกว่า 3G ความเร็วสูงเราจะดาวน์โหลดเนื้อหา รูปภาพ บนเว็บไซต์นั้นเสร็จ นอกจากนั้นการใช้งานเมนู (โดยเฉพาะเมนูแบบ Mouse Hover) การเลื่อนอ่านข้อความ การดูรูปภาพ จากขนาดหน้าเว็บไซต์ที่ไม่พอดีกับมือถืออาจจะมีปัญหา ไม่สะดวกเท่ากับเข้าใช้บนคอมพิวเตอร์ปกติ เนื่องจากเจ้าของเว็บไซต์ไม่ได้คำนึงถึงผู้ใช้ที่เข้าผ่านโทรศัพท์มือถือ

Google ตระหนักในเรื่องนี้จึงทำให้มีการเปลี่ยนแปลง Algorithm ที่ใช้ในกระบวนการค้นหาใหม่ เมื่อเราค้นหาข้อมูลด้วยโทรศัทพ์มือถือ Google จะนำคุณสมบัติของ Mobile-Friendly มาร่วมคำนวนใน Algorithm ด้วย นั่นหมายความว่าเว็บไซต์ที่มีคุณสมบัติ Mobile-Friendly จะมีโอกาสอยู่ในผลลัพธ์อันดับต้น ๆ ในการค้นหามากกว่า ซึ่งการเปลี่ยนแปลง Algorithm ในการจัดอันดับเว็บไซต์จะเริ่มใช้ในวันที่ 21 เมษายน 2558 นี้เป็นต้นไป (ที่มา Finding more mobile-friendly search results)

การจัดทำเว็บไซต์ให้มีคุณสมบัติ Mobile-Friendly มี 2 วิธีที่เป็นที่นิยมได้แก่

  1. Responsive Web Design (RWD)
    คือการปรับ Layout ของเว็บไซต์ให้มีความกว้างตามขนาดหน้าจอ และการจัดวาง column ต่าง ๆ ให้เหมาะกับขนาดของหน้าจอนั้น ๆ ตัวอย่างเช่น เมื่อเปิดดูในหน้าจอปกติเว็บไซต์จะแสดง 2 column ประกอบด้วย content และ sidebar อยู่ด้านข้าง แต่ถ้าดูในโทรศัพท์มือถือเว็บไซต์จะแสดงเพียง column เดียวโดยวาง content ไว้ด้านบนและ sidebar ไว้ด้านล่าง (สามารถศึกษา RWD ได้ที่ HTML Responsive Web Design)
  2. Mobile Website
    คือการทำเว็บไซต์อีกเว็บหรือเวอร์ชันไปเลย โดยการตรวจสอบขนาดหน้าจอหรือ Device ที่เข้าถึงเว็บไซต์ ถ้าตรวจพบว่าเป็นโทรศัพท์มือถือก็จะ Redirect ไปยัง Mobile Website ซึ่ง Mobile Website ส่วนมากจะใช้วิธีการจด Domain ใหม่เช่นเว็บไซต์ปกติเป็น abc.com ส่วน Mobile Website เป็น m.abc.com หรือ abc.com/m

เว็บไซต์ มทร.พระนคร มีการเตรียมพร้อมรับมือ Algorithm ใหม่ของ Google อย่างไร ?

เนื่องจากทางมหาวิทยาลัยมีนโยายในการปรับปรุงการประชาสัมพันธ์ในช่องทางต่าง ๆ ให้มีประสิทธิภาพมากขึ้น ทางสำนักวิทยบริการและเทคโนโลยีสารสนเทศจึงใช้โอกาสนี้ในการปรับปรุงเว็บไซต์ มทร.พระนคร .ให้มีคุณสมบัติ Mobile-Friendly โดยใช้วิธี Responsive Web Design เพื่อรองรับการใช้งานของผู้ใช้ผ่านโทรศํพท์มือถือที่เพิ่มมากขึ้นในปัจจุบัน ดังจะเห็นได้จากการทดสอบด้วยบริการ Mobile-Friendly Test ซึ่งจัดทำโดย Google

เว็บไซต์ มทร.พระนครเดิมซึ่งจัดทำไว้ตั้งแต่ปี พ.ศ. 2553

Capture

เว็บไซต์ มทร. พระนครใหม่จะนำไปใช้งานแทนเว็บไซต์เดิมในเร็ว ๆ นี้

Capture

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