naparat.h – CoP PSU IT Blog

ปรับขนาดและสีของ Mouse Cursor / Mouse Pointer บน Windows 10 /Windows 11 ให้ชัดๆ ปังๆ ตามสไตล์สายมูเตลู

February 10, 2023 17:51

ด้วยอายุอานามของผู้เขียนที่ปาเข้าไปหลายหลักสิบ เวลามองอะไรที่เล็กๆ ก็ออกจะขัดใจและไม่สบายตาไปซะแล้ว อย่าง Mouse Cursor ก็เช่นกัน ผู้เขียนเลยถือโอกาสนี้มาแชร์วิธีการปรับขนาด ของ Mouse Cursor บน Windows 10 และ 11 ให้ดูง่ายขึ้น ซึ่งนอกจากจะช่วยให้สบายตาแล้ว สายมูเตลูอย่างผู้เขียนก็ไม่พลาดเพราะสีสันมีอิทธิพลต่อชีวิตของเรา จึงขอแชร์วิธีการปรับสีของ Mouse Cursor ด้วยซะเลย ไม่เชื่อก็ต้องเชื่อ Mouse Cursor ที่ชี้ไปชี้มา ก็พาปังและราบรื่นได้นะ อิอิ สำหรับสายมูเตลูอยากปรับสี Mouse Cursor ให้ปังและราบรื่น ขอเชิญเลื่อนหน้าจอไปด้านล่างสุดกันก่อนนะคะ จะได้ทราบว่าเราจะใช้สีอะไร ส่วนใครไม่ใช่สายมู ก็ดูวิธีการต่อจากนี้ได้เลยค่า ซึ่งเราจะต้องรู้ก่อนว่า Microsoft Windows ที่เราใช้งานกันอยู่นั้น เป็นเวอร์ชัน 10 หรือ 11 จะได้เข้าไปตั้งค่ากันถูกค่ะ การจะรู้ได้อย่างไรว่า Microsoft Windows ที่เราใช้งานกันอยู่นั้น เป็นเวอร์ชัน อะไร ? ให้เลือก เริ่มต้น > การตั้งค่า > ระบบ > เกี่ยวกับ เท่านี้เราก็จะทราบแล้วค่ะ ว่าใช้งาน Microsoft Windows เวอร์ชัน 10 หรือ 11 เอาละ ถ้าทราบกันแล้วว่าเราใช้งาน Microsoft Windows เวอร์ชัน 10 หรือ 11 ก็มาดูวิธีการปรับขนาดและสีของ Mouse Cursor ตามแต่ละ Windows กันเลยค่า การตั้งค่าขนาดและสีของ Mouse Cursor / Mouse Pointer บน Window 10 /Windows 11 มีวิธีการดังนี้ ขั้นที่ 1 : คลิกไอคอน Search ของ Window พิมพ์คำว่า Mouse แล้วเลือก Mouse Settings Microsoft Window 11 Microsoft Window 10 ขั้นที่ 2 : คลิกเลือก Adjust mouse & cursor size สำหรับ Window 10 หรือเลือก Mouse Pointer สำหรับ Window 11 เพื่อเข้าไปปรับขนาดและสีของ Mouse Cursor/Mouse Pointer กันค่า Microsoft Window 11 Microsoft Window 10 ขั้นที่ 3 : ตั้งค่า Mouse Cursor /Mouse Pointer โดยปรับขนาดและสีของ Mouse Cursor/Mouse Pointer ตามที่ต้องการ อธิบาย ดังนี้ Change pointer size /size – ปรับขนาดของ Mouse Cursor ให้ใหญ่-เล็ก โดยให้คลิกลากแถบขนาดเพื่อปรับขนาดของ Mouse Cursor ส่วนสายมูเตลูอยากปรับสีด้วย ในส่วนของ Change pointer colors /Mouse poitter Style ซึ่งเป็นการปรับสีของ Mouse Cursor ก็คลิกคลิกเลือก icon ชาร์ทสี/Mouse สีเขียว และคลิกเลือกสีตามปีเกิดที่ต้องการได้เลยค่ะ แต่หากต้องการเลือกสีอื่นหรือสีปังๆ ตามปีเกิดซึ่งไม่มีในสีที่แนะนำ ให้คลิกเลือก Pick a custom pointer color /Choose another color แล้วทำการเลือกสีที่ต้องการ เมื่อเลือกสีที่ต้องการเรียบร้อยแล้ว กดปุ่ม Done คร่าาาา Microsoft Window 11

วิธีใช้งานเว็บไซต์เก่าๆ ที่รองรับแค่ IE ด้วยโหมด Internet Explorer Compatibility บน Microsoft Edge

August 1, 2022 15:26

หลักจากที่ทาง Microsoft ได้ประกาศหยุดบริการ Internet Explorer (IE) อย่างถาวร เมื่อวันที่ 15 มิถุนายน 2565 ก็ทำให้กระทบกับการใช้งานบางเว็บไซต์ (เก่าๆ) หลายเว็บไซต์ ที่ออกแบบหรือพัฒนาให้ใช้งานได้ดีบน IE แต่ต้องหันไปใช้งานบราวเซอร์อื่น เช่น กดเมนูไม่ได้บ้าง กดปุ่มแล้วไม่ทำงานบ้าง เป็นต้น ซึ่งเราจะหันไปใช้บราวเซอร์อื่นแทนก็ไม่สามารถใช้งานเว็บไซต์ที่เก่าๆ นั้นได้อย่างราบรื่นหรือสมบูรณ์อยู่ดี พอจะใช้ Microsoft edge ก็พบปัญหาแบบเดียวกัน ก็….เว็บไซต์มันเก่าแล้วอ่ะเธอออออ แต่ Microsoft ก็ไม่ทอดทิ้งอะไรที่ว่าเก่าๆ แบบไม่ใยดีผู้ใช้ขนาดนั้นนะคะ เพราะจริงๆ เรายังสามารถเปิดใช้งานเว็บไซต์ที่ว่าเก่าๆ นั้น (ย้ำจังเลย) ใน IE Compatibility View เพื่อให้ใช้งานในมุมมองดังกล่าวได้ผ่าน Microsoft Edge แต่ฟีเจอร์นี้สามารถใช้ได้อีก 7 ปี (ถึงปี 2029) เท่านั้นนะคะ ซึ่งวันนี้ผู้เขียนได้รวบรวมขั้นตอนเพื่อให้สามารถใช้งานเว็บไซต์ในโหมด IE Compatibility View บน Microsoft Edge มาแนะนำกันค่า ก่อนอื่นเลย ตั้งค่าเพื่อเปิดใช้งานคุณสมบัตินี้ให้กับ Microsoft Edge กันก่อน 1. เปิด Microsoft Edge ขึ้นมาแล้ว กดคีย์ลัด Alt + F แล้วเลือก เมนู Settings ดังรูป (หรือไป ที่ edge://settings/defaultbrowser) 2. ในหน้าจอ Settings ที่แถบด้ายนซ้ายให้เลือกเมนู “Default browser” จะแสดงส่วนของการตั้งค่า Internet Explorer Compatibility ให้กดเลือก Allow ในหัวข้อ “Allow sites to be reloaded in Internet Explorer mode (IE mode)” เพื่ออนุญาตให้สามารถโหลดเว็บไซต์ในโหมด Internet Explorer Compatibility ตอนใช้งานได้หลังจากที่ได้ตั้งค่าเรียบร้อยแล้ว ****อย่าลืมปิดและเปิดบราวเซอร์ขึ้นมาใหม่นะคะ มาดูวิธีการโหลดใช้งานเว็บไซต์ในโหมด Internet Explorer Compatibility กันค่าเมื่อเปิดเว็บไซต์ขึ้นมา ให้กดคีย์ลัด Alt + F แล้วเลือก “Reload in Internet Explorer mode” โลดดด ถ้าไม่เจอ Reload …. อนุญาตให้ตกใจนิดหน่อย แต่ ไม่เห็นไม่เจอใช่ว่าจะม่ายยยยมีน่ะ เพราะถ้าหากใช้ Microsoft Edge เวอร์ชั่น 92 หรือเก่ากว่านี้ ก็ให้เลือก More tools ก็จะพบกับ Reload in Internet Explorer Mode คร่าาา เท่านี้ก็ใช้งานเว็บไซต์ในโหมด Internet Explorer Compatibility ได้แล้วละค่า (หากต้องการปิดการใช้งานในโหมดนี้ ก็กดคีย์ลัด Alt + F แล้วเลือก Exit in Internet Explorer mode ) โดย เป็นยังไงกันบ้างค่า เว็บไซต์เก่าๆ ที่รองรับการใช้งานด้วย IE นั้น เราก็ไม่ต้องกังวลกันจะใช้งานกันไม่ได้ เพียงแค่ทำตามวิธีข้างต้นค่ะ 🙂 บางอย่างเก่าแต่ยังเก๋าอยู่น่ะ(ลาก่อนและขอบคุณน่ะ Internet Explorer) ขอขอบคุณ : https://www.addictivetips.com/windows-tips/compatibility-view-settings-edge/https://droidsans.com/how-to-use-ie-mode-on-microsoft-edge/Internet Explorer mode in Microsoft Edge

เพิ่มสีสันให้กับ Picklist Field ของ Work item บน Azure DevOps ด้วย Color picklist control

July 8, 2022 14:46

สำหรับบล๊อกนี้ เราจะมาเพิ่มสีสันให้กับ ฟิลด์รายการ (Picklist Field) ของ Work item บน Azure DevOps กันค่า เพราะสีสันเป็นสิ่งที่มีอิทธิพลต่ออารมณ์และความรู้สึกของเรา (และ “มิตรภาพที่ดีก็เหมือนสีที่ติดแน่น ไม่จางหาย” อ่ะไปนั่นนน >,<) Color picklist control ที่นำมาใช้นั้น จะช่วย ระบุความสำคัญของไอเท็ม สร้าง visual language (ภาษาภาพ หรือสิ่งที่มองเห็น) ให้กับ ฟิลด์ (field) เพื่อแทนความหมายที่ต้องการจะสื่อสาร มาเริ่มกันเลยค่า 1. ไปที่ Work Item (ที่ต้องการปรับแต่ง Picklist Field) โดยคลิกเพิ่มเติม … แล้วเลือก “Cuztomize” ดังรูป 3. หน้าต่าง Add a custom control จะแสดงขึ้นมา ให้กดเลือก Control ชื่อ Color picklist control (Microsoft DevLabs) (ซึ่งเราได้ Add ไว้ใช้งานเรียบร้อยแล้ว) แล้วก็กดปุ่ม “OK” Let’s it goooo ดังรูป 4. เมื่อเลือก control เรียบร้อยแล้ว ไปที่แท๊ป Option เพื่อเข้าไปกำหนดสี และ Label ให้กับค่าต่างๆ ของ filed โดยให้ทำการเลือก Picklist Filed ที่ต้องการ แล้วระบุ label แล้วทำการกำหนดสี ให้กับแต่ละค่าของรายการใน filed ดังรูป –> ในตัวอย่าง ผู้เขียนได้กำหนดสี และ Label ให้กับ filed > State ซึ่งมีทั้งหมด 4 ค่า คือ Active;Closed;Proposed ;Resovled และกำหนดสีดังนี้ Blue;Green;Grey;Orange (ในการกำหนดค่าให้ใช้ ; คั้นระหว่างค่าข้อมูล) 5. ไปที่แท๊ป Label กันซักหน่อย เพื่อกำหนด Label ของ Field ที่ต้องการให้แสดง ดังรูป ตัวอย่าง ผู้เขียนตั้งชื่อว่า State แล้วกดปุ่ม “OK” ก็เป็นอันเสร็จเรียบร้อยแล้วละค่า มาดูหน้าตาหลังดำเนินการกันเรียบร้อยแล้วค่ะ และในส่วนของหน้าจอกรอกข้อมูล … พอมีสีสันขึ้นมา อู้วววว ดีงามมากเลยค่า 🙂 อ้างอิง : https://marketplace.visualstudio.com/items?itemName=ms-devlabs.color-form-control&ssr=false#overviewhttps://azure.microsoft.com/en-us/services/devops/#overviewhttps://www.altv.tv/content/altv-news/623742784e62cb7e583a80a3

Figma: Scrolling with overflow behavior (Horizontal Scrolling)

May 17, 2022 17:15

บล๊อกนี้ผู้เขียนจะมาแนะนำวิธีการตั้งค่า Mobile App Prototype ที่เราได้พัฒนาขึ้นมา (ด้วย figma) เพื่อให้ผู้ใช้สามารถเลื่อน (Scrolling) ส่วนของเนื้อหาที่มีมากจนเกินขนาดของอุปกรณ์ได้ โดยใน figma นั้น สามารถทำ Scrolling เพื่อให้รองรับกับพฤติกรรมของผู้ใช้ได้ 3 แบบ ดังนี้ค่ะ แบบที่ 1 Horizontal Scrolling คือ การเลื่อนในแนวนอน ซ้ายและขวาภายในเฟรม โดยยังคงตำแหน่งแนวตั้งไว้ เช่น ภาพสินค้า , แกลอรี่ภาพ แบบที่ 2 Vertical Scrolling คือ การเลื่อนในแนวตั้ง ขึ้นและลงภายในเฟรม เช่น เลื่อนดูเว็บไซต์ที่มีขนาดยาว หรือเนื้อหาที่อยู่ภายในแอป แบบที่ 3 Horizontal & Vertical Scrolling คือ การเลื่อนในแนวนอนและแนวตั้ง ผู้ใช้สามารถเลื่อนไปในทิศทางใดก็ได้ภายในเฟรม เช่น การดูแผนที่ สำหรับบล๊อกนี้นั้น ผู้เขียนขอยกเอา Horizontal Scrolling มาแนะนำกันก่อนนะคะ ขั้นตอนหลักๆของการทำ Scrolling ก็มีตามนี้ค่าาาาา กดเลือก frame ที่ต้องการทำ Scrolling (ต้องเป็น Frame นะคะ จึงจะกำหนด Scrolling ได้) เปิด panel Prototype ที่แถบด้านขวา เลือก overflow behavior ตามที่ต้องการ ซึ่งมี 4 ตัวเลือกนะคะ คือ No Scrolling Horizontal Scrolling ** Vertical Scrolling Horizontal & Vertical Scrolling Horizontal Scrolling ผู้ใช้เลื่อน content ซ้ายและขวาภายใน frame วิธีการดูในคลิปได้เลยค่า ในคลิปวินาทีที่ 0:00:11 ทำ Group ให้เป็น frame (คลิกขวาบน Group แล้วเลือก Frame Selection) อย่างที่บอกกันข้างต้น เนื่องจากหากไม่ใช่ frame จะกำหนด Scrolling ไม่ได้วินาทีที่ 0:00:11 ปรับขนาดของ frame และ ซ่อนเนื้อหาที่เกินกรอบ โดยติ๊กถูกที่ Clip Contentวินาทีที่ 0:00:25 ไปที่ prototype panel แล้วกำหนด Overflow scrolling แบบ Horizontal scrollingวินาทีที่ 0:00:34 กด Present ลองดูผลลัพธ์กัน 😉 Ref : https://help.figma.com/hc/en-us/articles/360039818734-Prototype-scrolling-with-overflow-behavior

คูล ๆ รู้ค่าสีด้วย ColorPick Eyedropper

March 28, 2022 14:34

วันนี้เราจะมารู้จักและใช้งานส่วนขยายของบราวเซอร์เพิ่มกันอีกซักตัวนะคะ โดยส่วนขยายที่จะมานำเสนอในวันนี้นั้น เป็นส่วนขยายที่จะช่วยให้สายออกแบบ/กราฟฟิก สวย ๆ คูล ๆ อย่างพวกคุณ รู้ได้อย่างง่ายดายเลยว่าสีที่สนใจบนเว็บนั้น มีค่าสีอะไร เพียงแค่ชี้ไปบริเวณที่ต้องการ ค่าสีก็จะโผล่ขึ้นมาให้ทราบเลยค่า โดยระบบสีได้ที่มาจะเป็นแบบ RGB นะคะ ซึ่งเป็นระบบสีที่เค้าศึกษากันมาแล้วว่าเหมาะสมกับการใช้แสดงผลบนหน้าจอคอมพิวเตอร์และสื่อดิจิตอลต่าง ๆ ค่ะ RGB คืออะไร RGB ย่อมาจากสีพื้นฐาน ได้แก่ สีแดง (Red) เขียว (Green) และน้ำเงิน (Blue) พอผสมสีทั้งสามในสัดส่วนต่างๆ จะได้เฉดสีอีกมากมายที่มีความสวยสดใสบนหน้าจอถึงประมาณ 16.8 ล้านเฉดกันเลยทีเดียว อ่ะ ไปติดตั้ง ColorPick Eyedropper ให้กับ Google Chrome ของเรากันดีกว่าค่ะ ซึ่ง Blog นี้ขอรวบรัดวิธีการติดตั้งกันเลยนะคะ ไปที่ https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg แล้วกดปุ่ม “เพิ่มใน Chrome” ค่ะ เท่านี้ ต้าวก้อนสี โผล่ขึ้นมาแบบนี้ก็เป็นอันติดตั้งเรียบร้อยแล้วละค่า วิธีการใช้งาน ก็คลิกบน ต้าวก้อนนนสี แล้วก็ นำเมาส์ไปจิ้มตรงบริเวณที่ต้องการ เท่านี้ ค่าสีก็จะโผล่มาให้เราทราบค่ะ ขอบคุณความรู้ดีดีจาก :https://www.octopus.co.th/blogs/how-to/rgb-vs-cmykhttps://www.nupress.grad.nu.ac.th/cmyk-and-rgb/