Get Adobe Flash player

pamok.r

วิธีการนับจำนวน User บน Microsoft Active Directory แยกตาม OU โดยใช้ PowerShell

เริ่มต้นด้วยการ Login (ด้วย User ที่มีสิทธิเพียงพอเช่น User ในกลุ่ม Admin Domain) เข้าสู่เครื่องที่เป็น Domain Controller บนระบบ Microsoft Active Directory จากนั้นให้ทำการเปิด Windows PowerShell

จากในให้ใช้คำสั่ง Get-ADUser ในชุดคำสั่ง Active Directory Cmdlets ดังนี้

ผลลัพธ์ที่ได้จะเป็นจำนวน User แยกตาม OU ทั้งหมด

ในกรณีที่ต้องการระบุเฉพาะ OU ที่ต้องการสามารใส่คำสั่ง -SearchBase และใส่ BaseDN เพิ่มเข้าไปได้ดังตัวอย่าง

 

HTML5 picture element เพื่อทำ responsive image ที่ดีกว่า

ในปัจจุบันเป็นที่รู้กันว่าเราต้องทำเว็บไซต์ให้รองรับกับหน้าจอหลาย ๆ ขนาด (responsive web) รวมทั้งรูปภาพที่ใช้ในเว็บด้วย โดยวิธีที่ใช้กันมากคือการกำหนด CSS ให้ที่ทำให้รูปภาพมีความกว้างตามขนาดพื้นที่ที่มี เช่น

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

 

ซึ่งในจุดนี้ HTML5 picture element จะเข้ามาช่วยได้ โดยการยอมให้เราเตรียมรูปภาพหลากหลายขนาดที่เหมาะสมกับหน้าจอขนาดต่าง ๆ และ picture element จะสั่งให้ web browser โหลดเฉพาะไฟล์ขนาดที่เหมาะสมตามที่เราตั้งค่าไว้  (เงื่อนไขเหมือนกับ media screen ของ CSS) โดยมีตัวอย่างดังนี้

ถ้าหน้าจอขนาด 600px ก็จะโหลดรูป img_pink_flowers แทน img_orange_flowers ทำให้ใช้ปริมาณเครือข่ายเท่าที่จำเป็น คือหน้าจอขนาดใหญ่โหลดภาพขนาดใหญ่ แต่ถ้าเป็นหน้าจอขนาดเล็กก็โหลดภาพขนาดเล็ก ดังภาพ

credit: https://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images–cms-21015

Favicon Best Practice 2017 ฉบับภาษาไทย

ในอดีดเราสามารถใช้ไฟล์ favicon.ico ขนาด 16×16 pixels ไฟล์เดียววางไว้บน root directory ของเว็บไซต์ เพื่อให้ Web Browser สามารถนำ Icon มาแสดงไว้หน้า Web Title ซึ่งก็ยังคงใช้งานได้จนถึงทุกวันนี้บนเว็บไซต์ แต่ในปัจจุบันเว็บไซต์ถูกนำไปเปิดบนหลากหลายอุปกรณ์ซึ่งมีความละเอียดของหน้าจอแตกต่างกัน นอกจากนั้นหากผู้ใช้ Add Website เป็น Bookmark หรือเพิ่มลงใน Home Screen ของโทรศัพท์ก็จะต้องใช้ Icon ขนาดใหญ่กว่าเดิม จึงทำให้ใน HTML5 มีคุณสมบัติใหม่เพิ่มเพื่อช่วยแก้ไขปัญหาเหล่านี้

Favicon ใน link (HTML5) จะมีคุณสมบัติเพิ่มขึ้นใหม่ประกอบด้วย

  1. รองรับไฟล์ชนิด png และ svg เพิ่ม นอกเหนือจาก ico (แต่รองรับไม่ครบทุก Web Browser)
  2. Attribute ใหม่คือ size ใช้กำหนดขนาดของ Icon เพื่อให้ Web Browser เลือกใช้ตามความเหมาะสม

ตัวอย่าง

ถ้าต้องการให้ Favicon ของเรารองรับทุก ๆ หน้าจอและอุปกรณ์จะต้องใส่ไฟล์ครบทุกขนาดตามตารางนี้

Size Name Purpose
32×32 favicon-32.png Standard for most desktop browsers
57×57 favicon-57.png Standard iOS home screen (iPod Touch, iPhone first generation to 3G)
76×76 favicon-76.png iPad home screen icon
96×96 favicon-96.png GoogleTV icon
120×120 favicon-120.png iPhone retina touch icon (Change for iOS 7: up from 114×114)
128×128 favicon-128.png Chrome Web Store icon & Small Windows 8 Star Screen Icon*
144×144 favicon-144.png IE10 Metro tile for pinned site*
152×152 favicon-152.png iPad touch icon (Change for iOS 7: up from 144×144)
167×167 favicon-167.png iPad Retina touch icon
(change for iOS 10: up from 152×152, not in action. iOS 10 will use 152×152)
180×180 favicon-180.png iPhone 6 plus
195×195 favicon-195.png Opera Speed Dial icon
(Not working in Opera 15 and later)
196×196 favicon-196.png Chrome for Android home screen icon
228×228 favicon-228.png Opera Coast icon

* Microsoft ต้องการ Meta tag msapplication-TileColor และ msapplication-TileImage สำหรับ IE10 บน Windows 8 และ Windows10 IE11 ขึ้นไปต้องการ browserconfig.xml.

จะเห็นว่าหากต้องการให้ Favicon สามารถรองรับแบบ Cross platform ได้เราจะต้องเหนื่อยมากในการเตรียมไฟล์และ Config ดังนั้นอาจจะพิจารณาเพื่อตัดตัวเลือกที่ไม่จำเป็นทิ้ง หรือใช้บริการเว็บไซต์ https://www.favicon-generator.org/ เพียงแค่ Upload ไฟล์ icon ที่มีขนาดมากกว่า 228×228 pixels จากนั้นระบบจะ generate ไฟล์ icon และ confg ที่จำเป็นทั้งหมด โดยมีขั้นตอนดังนี้

1) เลือกไฟล์ icon ที่ต้องการและเลือก Generate icons for Web, Androidm Microsoft and iOS

2) คลิกปุ่ม Create Favicon ระบบจะให้ Download ไฟล์สามารถ Extract ได้รายการไฟล์ดังนี้

3) จากนั้นให้นำไฟล์ทั้งหมด Upload เข้าสู่เว็บไซต์ และแทรก Script ด้านล่างนี้ไว้ใน Tag head สามารถแก้ไข path ให้ตรงกับที่อยู่ของไฟล์ได้ตามสะดวก

 

Angular-materialize Plugin สำหรับการใช้งาน AngularJS ร่วมกับ Materialize CSS

จากการแนะนำ CSS Framework ที่ออกแบบตามหลักการของ Material Design ที่ผ่านมา http://info.arit.rmutp.ac.th/2017/07/31/materialize/ หากต้องนำมาใช้ร่วมกับ AngularJs (version 1) ควรจะใช้ Plugin นี้เพื่อมาช่วยให้ทำงานร่วมกันได้ เพราะด้วยตัว Materialize CSS มี JavaScript เป็นของตัวเอง

การแนบไฟล์ JavaScript และ CSS ที่ต้องใช้

การเรียกใช้ Module ชื่อ ‘ui.materialize’

จากนั้น Form Input ต่าง ๆ ที่ถูก apply โดย Materialize CSS ไม่ว่าจะเป็น Text, Date และ Time จะถูกผูกค่ากับ ng-model ของ AngularJs ดังตัวอย่างต่อไปนี้

Input-date

HTML

JavaScript ใน Controller

อ่านรายละเอียดเพิ่มเติมได้ที่ https://krescruz.github.io/angular-materialize/

แนะนำ Materialize CSS Framework ใหม่สำหรับพัฒนา Web App

เป็นอีกทางเลือกหนึ่งสำหรับผู้ที่ต้องการพัฒนา Web App ให้มีหน้าตาที่ทันสมัยถูกหลักการของ Material Design ของ Google โดย Materialize CSS นั้นเป็นอีกหนึ่งใน Framework ที่ได้พัฒนาโดยอิงตามหลักการของ Material Design มาทั้งหมด

คุณลักษณะที่สำคัญเมื่อเทียบกับ Bootstrap

Grid System

ทั้ง Materialize ใช้หลักการแบ่ง Column แบบเดียวกับ Bootstrap โดยการแบ่งเป็น 12 Column ใช้งานง่ายทั้งคู่แต่ Materialize ใช้ชื่อ Class ในระบบ Grid system ได้สั้นและดูง่ายกว่า ดังภาพ

Grid System (Materialize CSS)

Grid System (Materialize CSS)

Grid System (Bootstrap)

Grid System (Bootstrap)

ในเรื่องความละเอียดของระดับหน้าจอ Materialize และ Bootstrap แบ่งหน้าจอเป็น 4 ขนาดประกอบด้วยตารางด้านล่าง

Screen Size (Materialize CSS)

 

Screen Size (Bootstrap)

 

Container System

Container System คือ Layout หรือกรอบรอบนอกสุดที่ทำหน้าที่บรรจุดเนื้อหาของเว็บไซต์ทั้งหมด โดย Container ของ Bootstrap นั้นจะแบ่งเป็น 2 แบบคือแบบ Fix จะมีความกว้างไม่เกิน 1170px (ดูได้จากรูป Screen Size Bootstrap) และแบบ Fluid คือจะกว้างเต็มตามขนาดหน้าจอ แต่ในขณะเดียวกัน Materialize CSS นั้นใช้หลักการ Material Design จาก Google ซึ่งมองว่าเนื้อหาของเว็บไซต์ควรจะรวมอยู่กึ่งกลางเพื่อให้ผู้ใช้ดูง่าย ดังนั้น Container ของ Materialize CSS จึงมีความกว้างประมาณ 70% ของหน้าจอขนาดใหญ่ (ดูได้จากรูป Screen Size Material CSS)

ดูเพิ่มเติม: http://materializecss.com/

การใช้ PowerShell ในการจัดดาร License บน Microsoft Office 365

จะต้องเตรียมเครื่องด้วยการติดตั้ง Plugin และ Module สำหรับเชื่อมต่อไปยัง Office 365 ดังนี้

  1. Microsoft Online Services Sign-In Assistant for IT Professionals RTW
  2. Azure Active Directory Module for Windows PowerShell (64-bit version)

เมื่อติดตั้งเสร็จแล้วให้เปิด Azure Active Directory PowerShell ขึ้นมาและใช้คำสั่ง “connect-msolservice” เพื่อเชื่อมต่อไปยังบริการ Office 365 โดยระบบจะแจ้งให้ทำการ Login

ตรวจสอบยอดการใช้งาน License ของหน่วยงานด้วยคำสั่ง “Get-MsolAccountSku”

เมื่อตรวจเสร็จแล้วให้ใช้คำสั่ง

เมื่อรันคำสั่งแล้วจะใช้เวลาทำงานประมาณครึ่งวัน หรืออาจเร็วกว่านั้นขึ้นอยู่กับปริมาณ User บน Office 365

แนะนำ Plupload เป็น Library สำหรับการ Upload file บนเว็บไซต์

ที่ผ่านมา Library สำหรับช่วยในการ Upload file (เช่น Uplodidy) จะใช้ Flash ช่วยในการ Browse และ Upload ไฟล์ เพื่อให้ผู้ใช้สามารถ Browse ไฟล์ได้หลายไฟล์พร้อม ๆ กัน รวมทั้งการ Upload แบบ Asynchronous แต่อย่างไรก็ตามเวลาผ่านไป Flash กลายเป็นเทคโนโลยีที่ตายแล้ว Web Browser สมัยใหม่ปิดกั้นการทำงานของ Flash เป็นค่าเริ่มต้น ผลกระทบที่ตามมาคือ Library Upload file จึงไม่สามารถทำงานได้ตามปกติ

ดังนั้นหากต้องการพัฒนา Web App ที่สามารถ Upload file โดยการ Browse ไฟล์พร้อม ๆ กัน รองรับการทำงานแบบ Asynchronous หรือพูดง่าย ๆ ว่า Library ทางเลือกที่สามารถใช้แทน Uplodify ได้โดยที่ไม่กระทบต่อโครงสร้าง Code เดิมของ Web App มากนัก ขอแนะนำให้ใช้ Plupload

Plupload มีดีอย่างไรบ้าง

  • มี Runtime หลากหลายตั้งแต่ HTML5, HTML4, Flash และ SilverLight
  • รองรับการ Drag and drop
  • เมื่อเป็น HTML5 จึงสามารถเปิดตัวอย่างไฟล์มาแสดงได้บนฝั่ง Client เช่น Browse ไฟล์รูป แล้วนำรูปที่ Browse ขึ้นมาแสดงบนหน้าจอ โดยไม่ต้องทำการ Upload
  • กรณีที่เป็นรูปภาพสามารถ ตัดต่อ หรือ ย่อรูปภาพได้บนฝั่ง Client
  • สามารถแบ่งส่วนไฟล์ในการ Upload เช่นไฟล์เต็ม 10Mb สามารถแบ่งเป็นส่วนละ 1Mb แล้วค่อย Upload ทำให้สามารถ Upload ไฟล์ใหญ่กว่าขนาดที่ Server กำหนดได้
  • มีการแปลมากกว่า 30 ภาษา
  • รองรับใช้งานร่วมกับ jQuery

ตัวอย่างการใช้ Plupload

Download Plupload ได้ที่เว็บไซต์ http://www.plupload.com/

เรียกใช้งานงาน Script ของ Library ถ้าต้องการใช้เป็น method jQuery ต้องเรียกใช้ไฟล์ CSS, Js ของ jQuery เพิ่มเติม (ผู้พัฒนา Plupload เตรียมไฟล์ให้แล้วใช้ชุดที่ Download มา)

การกำหนด Element บน HTML ในตำแหน่งที่ต้องการให้เป็นปุ่ม Browse และ Upload

การตั้งค่า Plupload

 

วิธี Export User จาก Active Directory โดยใช้ PowerShell

การ Export User จาก Microsoft Active Directory สามารถทำได้โดยใช้คำสั่ง Get-ADUser ในชุดคำสั่ง Active Directory Cmdlets ดูเพิ่มเติมได้ที่ https://technet.microsoft.com/en-us/library/ee617195.aspx การใช้คำสั่ง Get-AdUser จะถูกบังคับให้ใช้ Parameter Filter พร้อมกันเสมอ โดยการรันคำสั่งต่าง ๆ จะใช้ PowerShell เป็นตัวรับคำสั่ง ตัวอย่างเช่น

แสดงรายชื่อ User ทั้งหมด แต่จะแสดงไม่เกิน 1000 รายการ (ถ้ามี Username จำนวนมากควรระบุ Filter)

เมื่อต้องการรายชื่อที่ขึ้นต้นด้วยคำว่า nop จะใช้คำสั่ง (ใช้ -eq (equal) แทนเมื่อต้องการค้นชื่อเต็ม)

กรณีที่ต้องการเลือก OU สามารถใช้ Paremeter -SearchBase เพื่อระบุ base dn

จากนั้นเราสามารถจัดรูปแบบการแสดงผลในรูปแบบตารางได้ด้วยคำสั่ง Select-Object แล้วตามด้วย Attribute ที่ต้องการแสดงผล

หาก Attribute ที่ต้องการไม่มีอยู่ในค่าเริ่มต้น จะต้องใช้ Parameter -Properties เพื่อขอดู Attribute เพิ่มเติม เช่น ต้องการ Title และ Department มาแสดงด้วย

และสุดท้ายการ Export เป็นไฟล์ CSV สามารถทำได้โดยใช้คำสั่ง Export-Csv พร้อม Paremeter -Encoding “UTF8”  เพื่อให้แสดงผลเป็นภาษาไทยอย่างถูกต้อง

 

Protected: วิธีติดตั้งแบบสอบถามความพึงพอใจ xQuiz

There is no excerpt because this is a protected post.

แนะนำ Plugin Query Monitor สำหรับตรวจสอบการทำงานของ WordPress

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

จึงเป็นที่มาของ Plugin Query Monitor สามารถ Install ได้ผ่านระบบจัดการของ WordPress โดย Query Monitor เมื่อ Active ใช้งานแล้วจะทำการ Capture การทำงานทั้งหมดตั้งแต่มีการเรียกหน้าเว็บไซต์ ไม่ว่าจะเป็น HTTP Request, Query ฐานข้อมูล และการโหลด Script ต่าง ๆ ดังภาพ

screenshot-11

screenshot-41

จะเห็นว่ารายงานของ Query Monitor จะแสดงให้ผู้ดูแลเว็บไซต์สามารถตรวจสอบได้ว่าอะไรคือสาเหตุที่ทำให้เว็บไซต์โหลดช้า

รายละเอียดเพิ่มเติม https://wordpress.org/plugins/query-monitor/