Tools – Page 2 – CoP PSU IT Blog

เช็คฟอนต์สวย ด้วย WhatFont ~ Extension

June 19, 2019 11:09

อะ แฮ่ม และแล้วก็เดินมาถึง Blog สุดท้ายในรอบ TOR ของปีนี้จนได้ แต่กว่าจะได้ฤกษ์เขียนได้ก็ปาเข้าไปกลางปีกันเลยทีเดียว (55+) มาๆๆ เรามาเข้าเรื่องกันเลยดีกว่า ต้องบอกว่าหลายครั้งที่เราได้เข้าเว็บไซต์นู้นนั่นนี่ แล้วเห็น font สวยๆ แต่ไม่รู้ว่านั่นน่ะมันคือ font อะไร ชนิดไหน … วันนี้ทางผู้เขียนขอนำเสนอ Chrome Extension (อีกแล้วเหรอ !) ที่เรียบง่ายแต่ใช้งานได้จริง นั่นคือ * WhatFont * WhatFont คืออะไร ??? WhatFont เป็นหนึ่งในส่วนขยายของ Google Chrome ซึ่งเป็นเครื่องมือที่ใช้ในการดูได้ว่า Font ที่ใช้หรือแสดงอยู่ในหน้าเว็บไซต์ต่างๆ นั้น คือ Font ชนิดอะไร ขนาดเท่าไหร่ และมีค่าสี เป็นอะไร อ๊ะๆ ยังไม่หมดนะ มันสามารถระบุได้แม้กระทั่งความหนา ความบาง ของ Font นั้นๆ กันเลยทีเดียว เพียงแค่เรานำเมาส์ไปวางบนตัวอักษรที่เราต้องการจะดูรายละเอียดเท่านั้นเอง วิธีการติดตั้ง ดาวน์โหลดได้จาก Chrome เว็บสโตร์ คลิก จากนั้นให้คลิกปุ่ม “เพิ่มใน CHROME” หรือ Add to Chrome ระบบจะแสดง pop up ขึ้นมาให้คลิกเลือก “เพิ่มส่วนขยาย” เมื่อเราติดตั้งเรียบร้อยแล้ว หน้าจอก็จะแสดง pop up ขึ้นมาแจ้งให้เราทราบว่าได้ติดตั้งเสร็จเรียบร้อยแล้ว สำหรับวิธีการใช้งาน ให้เข้าเว็บที่เราต้องการ จากนั้นให้คลิกที่ Icon ที่มุมบนด้านขวาของ Browser ให้นำเมาส์ไปวางไว้บนข้อความ / ตัวอักษร ที่เราต้องการจะรู้ว่าเป็น font อะไร และหากต้องการจะดูรายละเอียดเพิ่มเติม เช่น ขนาด สี ความหนา ความบาง ก็ให้คลิกเลือกบนข้อความดังกล่าว จากนั้นจะมีส่วนแสดงข้อมูลเพิ่มเติมขึ้นมาให้เราได้ดูกัน เป็นยังไงกันบ้างเอ่ย ข้อมูลอันนี้นี่พอจะช่วยผู้อ่านได้บ้างมั้ย ?? ยังไงก็แล้วแต่ทางผู้เขียนอยากแนะนำให้ทุกคนไปลองใช้กันดูนะ ง่ายดี ฟรีด้วย แทนที่เรา จะมานั่งคาดเดา หรือมโน กันเองว่า เอ๊ ! ตัวนี้นี่มันเป็น font อะไรแล้วน๊าา แบบนั้นมันล้าสมัยไปแล้ว เสียเวลาเปล่าๆ ติดตั้งตัวนี้กันเลย ง่าย ครบ จบในตัวเดียว 55+ อย่าลืมลองเล่นกันดูนะ ไว้ปีหน้าฟ้าใหม่ เราจะมาเจอกันอีกใน Blog ถัดๆ ไปเน้ออออ ขอบคุณแหล่งอ้างอิง http://photoloose.com/what-font-chrome-extension/

ทดสอบเว็บบน Browser ทุกตัวง่ายนิดเดียว

January 13, 2017 15:14

ทดสอบเว็บผ่าน Browser หลังจากที่ได้มีการพัฒนาหรือสร้างเว็บขึ้นมาเรียบร้อยแล้วนั้น สิ่งแรกๆ ที่ต้องทำคือทดสอบเว็บของเราว่าสามารถที่จะแสดงผลผ่าน Browser ได้ดีหรือไม่ และแสดงผลได้ดีกับทุก Browser หรือไม่ เช่น Google Chrome , Firefox หรือจะเป็น Internet Explorer ซึ่ง Browser แต่ละตัวนั้นก็มีหลากหลายเวอร์ชันมาก และที่เราต้องพยายามทดสอบให้ได้มากที่สุดก็เพราะว่า เราไม่สามารถรู้ได้เลย ว่าลูกค้าหรือผู้ใช้เว็บของเรานั้นจะใช้เครื่องมือ หรือ Browser ตัวไหนเป็นหลัง ดังนั้นการทดสอบเว็บบน Browser ทุกตัวไม่ใช่เรื่องง่ายเลยจริงๆ ทำอย่างไรให้การทดสอบผ่าน Browser ทุกตัวเป็นเรื่องง่าย สำหรับครั้งนี้ผู้เขียนจะขอแนะนำเครื่องมือช่วยทดสอบการแสดงผลเว็บผ่าน Browser ทุกรุ่นทุกยี่ห้อ เพื่อให้เป็นเกร็ดความรู้เบื้องต้นเล็กๆ น้อยๆ เพื่อแก้ไขปัญหาการที่ต้องลงๆ ถอนๆ Browser ในเครื่องจนอาจจะปวดหัวเอาได้ หลักๆ จากที่ศึกษาค้นคว้าเบื้องต้นพบว่าปัจจุบันมี Cloud Browser เปิดให้บริการมากมาย เช่น Saucelab, BrowserStack, Browserling, Ghostlab หรือ CrossBrowserTesting เป็นต้น สำหรับวันนี้จะขอนำเสนอหน้าตาของ BrowserStack กันก่อนละกัน เราจะต้องสมัครสมาชิกกันก่อน โดยจะมีแบบ Free trial ให้เราทดลองใช้งาน สมัครเสร็จแล้วก็ Login เข้าไปทดลองใช้งานกันได้เลย หลังจากสมัครสมาชิกทดลองใช้ฟรีกันเรียบร้อยแล้ว ก็จะพบกับหน้าตาของเจ้า BrowserStack แบบนี้ เราสามารถเลือกได้เลยว่าจะทดสอบเว็บกับระบบปฏิบัติการไน และ Browser อะไร ตัวอย่างเช่นเลือก ระบบปฏิบัติการ Mac OS X Mavericks และ Browser Safari 7.1 ก็จะได้ตัวอย่างหน้าจอ แบบด้านล่าง ในหน้าจอที่เรากำลังทดสอบก็จะมี Tool เล็กๆ ให้เราสามารถจัดการหน้าจอได้ เช่นสามารถ Switch เพื่อเปลี่ยนเป็นระบบปฏิบัติการ หรือ Browser อื่นๆ สามารถปรับ Resolutions ของหน้าจอได้ สามารถ Create a bug สามารถสร้าง Issue Tracker สามารถตั้งค่าอื่นๆ หรือตรวจสอบ Features ของตัว BrowserStack ได้ เป็นต้น สุดท้ายแล้วสำหรับเพื่อนๆ หรือใครที่มีปัญหายุ่งยากในการทดสอบเว็บให้ครบทุก Browser ก็สามารถลองเอาเจ้าตัว BrowserStack ไปใช้งานกันดู เผื่อบางทีอาจจะช่วยระยะเวลา หรือปัญหาต่างๆ ได้บ้างไม่มากก็น้อย ^ ^ แหล่งความรู้อ้างอิง – http://soraya.in.th/2013/04/08/browserstack-ie/ – https://medium.com/tag/browserstack – https://chittakorn.com/do-you-know/browser-testing/ – http://www.designil.com/free-internet-explorer-mac.html

Short Note on Workshop “Web Application Development Workflow”

March 26, 2014 22:33

ผมชวนเพื่อนๆ CoP PSU IT ซึ่งเป็นรุ่นน้องชื่อคุณราชศักดิ์ บูรณะพาณิชย์กิจ และพัฒนาวดี ศิวติณฑุโก อยู่ที่คณะวิศวกรรมศาสตร์ มาจัด Workshop ใช้เวลา 1 วัน เรื่อง Web Application Development Workflow วิทยากรเตรียม slide ที่นี้ครับ http://bratchasak.github.io/slide/ คร่าวๆ คือ แนะว่า Web Application Development Workflow คืออะไร อธิบายว่าขั้นตอนของการพัฒนาและเครื่องมือที่ใช้ในการทำงาน ก็คือ Chrome Browser และ Sublime Text และติดตั้งโปรแกรม Git ใช้งานแบบ command line และ github for Windows แบบ GUI และสมัครบริการที่จำเป็นต้องใช้ก็คือ GitHub web เครื่องมือทั้งหมดนี้ก็จะสร้างระบบ Version control สำหรับการพัฒนาด้วย Git ได้แล้ว การเตรียมเครื่องมือสำหรับทำงาน 1.เกี่ยวกับ Chrome Browser (google chrome) ต้องลงชื่อเข้าใช้ google เพื่อทำงานได้ครบทุก Feature เข้าเว็บหน้านี้ https://www.google.com/intl/th/chrome/browser/ จะเห็นตัวอย่างชัดๆในการตรวจสอบด้วย Developper Tools เปิดหน้าต่าง Developper Tool ด้วย Ctrl+Shift+i คลิกเลือกไอคอน แว่นขยาย เพื่อส่องดูโค้ดได้ นอกจากนี้ก็มีแท็บน่าสนใจคือ แท็บ Console สำหรับ debug และ แท็บ Network สำหรับดู latency load time เปิดดูการทำงาน เมนูที่ใช้ใน workshop คือ คลิกปุ่มกำหนดค่าและควบคุม (มุมบนขวา) > เครื่องมือ > ตัวจัดการงาน ติดตั้งส่วนขยาย LiveReload www.google.com > search คำว่า livereload > เลือก Chrome Web Store – LiveReload คลิกปุ่มกำหนดค่าและควบคุม (มุมบนขวา) > เครื่องมือ > ส่วนขยาย > เลือกตัวเลือก อนุญาตให้เข้าถึงไฟล์ URL 2. ติดตั้งโปรแกรม Sublime Text 3 for Windows www.google.com > search คำว่า sublime เลือกเวอร์ชั่นให้ตรงกับ Windows OS ที่ใช้ ตาม slide หน้านี้ http://bratchasak.github.io/slide/#sublimetext_package ติดตั้ง package เพิ่มลงใน Sublime กดแป้น Ctrl+Shift+p > search คำว่า package > เลือก Package Control: Install Package > search คำว่า emmet > คลิกเลือก emmet > search คำว่า livereload > คลิกเลือก LiveReload > search คำว่า syntax คลิกเลือก Syntax Manager ต่อมา วิทยากรอธิบาย Software configuration management ว่ามี 3 model คือ Local data model, Client-server model และ Distributed

pixlr online photo editor ใช้แทน photoshop

November 9, 2012 21:56

มีคำถามว่าหากไม่ต้องการจ่ายเงินซื้อโปรแกรมตกแต่ง แก้ไข ภาพถ่าย ที่นิยมที่สุดคือ photoshop เราจะใช้โปรแกรมอะไรดี ก็ลองมองดูที่โอเพนซอร์ส ชื่อ Gimp แต่ก็ดูเหมือนว่าจะไม่ได้รับความนิยมเนื่องด้วย user interface ใช้งานไม่ถูกใจชาวกราฟิกดีไซน์เลยทีเดียว ผมก็เจอตัวที่คิดว่าน่าใช้งาน คือ pixlr เป็น online photo editor และมีเวอร์ชั่นติดตั้งบนสมาร์ทโฟนด้วย ผมให้กราฟิกดีไซเนอร์คนหนึ่งทดสอบใช้งานดู ก็ได้รับคำตอบว่า ใช้ได้ ง่ายดี พวกเราลองอ่านในบล็อกของเขา จะเห็นว่ามีการแนะนำวิธีการใช้งานผ่านบล็อกน่าอ่านมาก ที่ http://blog.pixlr.com/