Get Adobe Flash player

pamok.r

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