Category: Operating System

  • วิธีการทดสอบเว็บไซต์ Responsive บน Smart phone ด้วย Chrome

    “ปัจจุบันกระแสการออกแบบเว็บเชิงตอบสนอง (Responsive design) ถูกนำมาใช้ในการออกแบบเว็บสมัยใหม่ เนืองจากสามารถดูได้ทั้งแบบผ่านเครื่องคอม แท็บเล็ต และมือถือ ได้โดยทันที”

    แต่ในระว่างการออกแบบ ถ้าผู้ออกแบบจะต้องมีการทดสอบบนอุปกรณ์แท็บเล็ต หรือมือถือ ต่างๆ ซึ่งมีความละเอียดของหน้าจอแตกต่างกันออกไป

    ซึ่งในส่วนที่ Chrome มีเครื่องมือที่ช่วยในการแสดงผลเว็บไซต์บนอุปกรณ์ Smart phone ได้ โดยไม่ต้องโหลดเพิ่ม แต่ประการใด !!! แถมวิธีการก็ง่ายแสนง่าย 

    ขั้นตอนที่ 1

    ให้ไปที่ More tools > Developer tools ดังภาพ

    01

    ขั้นตอนที่ 2

    เลือกที่รูปโทรศัพท์ ดังภาพ

    02

    ขั้นตอนที่ 3

    สังเกต ด้านซ้ายจะปรากฏหน้าจอมือถือขึ้นมา ให้ระบุ URL ที่เราต้องการดังภาพ

    06

    จากภาพ จะเห็นว่าหากเป็นเว็บที่ออกแบบด้วยหลักการออกแบบเว็บเชิงตอบสนอง (Responsive design) จะมีการจัดหน้าจอให้เหมาะสมกับอุปกรณ์

    ขั้นตอนที่ 4

    สังเกต ด้านบน เราสามารถเลือกรุ่นของ Smart Phone ได้หลายรุ่น แม้จะไม่มาก แต่ก็เป็นรุ่นหลักและหลากหลายความละเอียด หรือจะเลือกปรับขนาดเองก็ทำได้  และสามารถปรับให้แสดงแนวตั้งและแนวนอนได้อีกด้วย ดังภาพ

    07

    จะเห็นว่าเครื่องมือด้งกล่าวใช้งานไม่ยาก ทำให้สามารถดูหน้าจอในหลายๆ ความละเอียดได้อย่างรวดเร็ว 

  • ทดสอบการแสดงผลเว็บแอพพลิเคชันง่ายๆ บน Browser ต่างๆ ด้วยบริการของ Modern IE

    ในปัจจุบันเว็บแอพพลิเคชันที่มีการพัฒนาจะต้องรองรับ Browser และอุปกรณ์ที่แตกต่างกัน ซึ่งบางครั้งเป็นการยากที่เราจะทดสอบให้ครบได้

    จะดีไหมถ้าเราสามารถดูการแสดงผลเว็บแอพพลิเคชันที่พัฒนาว่า หน้าตาเป็นอย่างไรเมื่อแสดงผลบน Browser หรืออุปกรณ์อื่นๆ

    Microsoft ได้เปิดตัว Modern IE ขึ้น โดยมีบริการที่น่าสนใจที่เรียกว่า Browser screenshots !!

    ขั้นตอนที่ 1

    ไปยัง URL : https://dev.modern.ie/tools/screenshots/

    2

    ขั้นตอนที่ 2

    ใส่ URL ของเว็บแอพพลิเคชันของเราที่ต้องการ

    1

    ขั้นตอนที่ 3

    กดปุ่ม Enter หรือรูปแว่นขยาย เครื่องมือจะแสดงผลดังภาพ

    3 4

    จะเห็นว่าเจ้า Browser screenshots เป็นเครื่องมือที่ช่วยให้เราเห็นหน้าจอเว็บแอพพลิเคชันของเราในเบื้องต้นได้

    “หวังว่าจะมีประโยชน์ต่อนักพัฒนาหรือนักทดสอบระบบทุกท่านนะค่ะ”

  • วิธีแก้ปัญหาวินโดวส์บูตไม่ได้หลังจาก resize

    ผมต้องการขยายเนื้อที่ (resize) ให้กับ Windows โดยมีพื้นที่ data (linux partition EXT4) อยู่ที่ partition ที่ 1 และ Windows 8.1 อยู่ที่ partition ที่ 2 ผมจึงต้องการไปดึงส่วนท้ายของ partition ที่ 1 มาเพิ่มให้กับ Windows

    วิธีทำก็คือ ผมก็ resize เนื้อที่ partition ที่ 1 ให้เล็กลง 25 GB จากนั้นผมก็ resize เนื้อที่ partition ที่ 2 ขยายไปทางซ้ายเพื่อเอาพื้นที่ว่างที่ได้มารวมกับเนื้อที่ Windows เดิม จากนั้นทำการ save ในระหว่างนั้นมีคำแนะนำโผล่ขึ้นมาว่า ระวังนะการทำอย่างนี้ใน partition ที่มีส่วนที่เป็น boot ของ Windows จะเสียหายและจะต้องซ่อมแซมเป็นนะ ประมาณนั้น ผมก็ตอบ Yes เพื่อลองดู (ผมบูตแผ่น SystemRescueCd  และใช้โปรแกรม gparted ในการ resize)

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

    ผมจึงมาเล่าถึงวิธีที่ใช้ในการแก้ไขปัญหา

    1. บูตจากแผ่นติดตั้ง Windows 8

    2. เลือก Repair My Windows

    windows8repair01

    3. เลือก Troubleshoot

    windows8repair02

    4. เลือก Advanced options

    windows8repair03

    5. เลือก Command Prompt

    windows8repair04

    6. ทำคำสั่งเหล่านี้ทีละคำสั่งตามด้วยกด Enter
    bootrec.exe /FixMBR
    bootrec.exe /FixBoot
    bootrec.exe /RebuildBcd
    exit

    windows8repair05

    7. เลือก Turn off your PC

    8. เปิดเครื่องเพื่อดูผลลัพธ์

    ผมก็เลยนำมาเล่าสู่กันฟังครับ หวังว่าทุกท่านจะไม่ต้องทำขั้นตอนเหล่านี้นะ

    Reference:
    http://www.sevenforums.com/backup-restore/372700-windows-wont-boot-after-resize-windows-partition.html

  • ตั้งค่าให้ใช้ IPv6 ที่ Firefox web browser

    เรื่องนี้สืบเนื่องมาจากผมใช้ Linux Mint และจะทดสอบว่า network ที่ทำงานสามารถใช้งานเว็บไซต์ที่รองรับ IPv6 แล้วได้หรือไม่ พบว่า ไม่สามารถเข้าถึงได้

    ff-linuxmint-02

    ลองทดสอบกับ Firefox บน Windows อ้าว ใช้งานได้  และในขณะเดียวกัน Google Chome ใช้ได้ทั้งบน Linux และ Windows

    ค้นหาดูใน google search ได้คำตอบว่าหากจะใช้งาน IPv6 ให้ตั้งค่า network.dns.disableIPv6 เป็น false โดยเข้าไปตรวจสอบหรือแก้ไขที่ URL about:config

    จึงตรวจสอบดู พบว่า Firefox บน Linux Mint ตั้งค่าตัวเลือก network.dns.disableIPv6 เป็น true ในขณะที่ Firefox บน Windows เป็นค่า false ซึ่ง ค่า false ทำให้ใช้งานเว็บไซต์ที่เป็น IPv6 ได้

    ff-linuxmint-01

    แก้ไขตั้งค่า network.dns.disableIPv6 เป็น false ทำให้ใช้งานเว็บไซต์ที่เป็น IPv6 ได้

    ff-linuxmint-04

    ผมยังหาคำตอบไม่ได้ว่าทำไมค่า default จึงตั้งไว้อย่างนั้น ซึ่งแตกต่างกันระหว่าง Firefox บน Linux Mint กับ Firefox บน Windows ส่วน Google Chome นั้นไม่มีให้เลือก จึงใช้งานได้ทันทีที่ network ที่ใช้งานรองรับ IPv6

    การทดสอบว่าเครื่องเราใช้งาน IPv6 ได้ สามารถทดสอบได้กับเว็บไซต์
    http://www.v6.psu.ac.th
    http://www.kame.net
    http://whatismyipv6address.com/
    http://test-ipv6.com/

    ff-linuxmint-06

    See also:
    http://techglimpse.com/disable-enable-ipv6-firefox-chrome-browser/
    http://ask.xmodulo.com/disable-ipv6-linux.html

  • แบ็กอัพ Windows OS ขึ้นเป็น virtual machine ด้วย disk2vhd

    ต้องการสำรอง Windows XP เครื่อง PC เก่า แต่ยังใช้ได้ ซึ่งมีโปรแกรมที่จำเป็น เช่น โปรแกรมสำหรับพิมพ์ปกแผ่น CD/DVD เป็นต้น เผื่อฮาร์ดดิสก์เจ๊ง หรือ เครื่องมันไม่ทำงาน อาจมีสักวัน

    คิดว่าจะใช้วิธีไหนนี้ ก็ค้นหาดูใน google มีคนพูดถึง disk2vhd จึงลองทำตาม ได้ผลน่าพอใจ เมื่อนำไฟล์ .vhd ไปเปิดด้วย Oracle VM VirtualBox บน notebook ของผม ผมสามารถทำงานโปรแกรมบน XP นั้นได้เหมือนเดิม

    วิธีการทำคือ
    1. ที่เครื่องเดิม ลงโปรแกรม Disk2vhd.zip

    disk2vhd01

    2. เปิดโปรแกรม

    disk2vhd02e

    3. ตั้งค่า ตัวเลือกแค่ Use Volume Shadow Copy อย่างเดียว และเลือก Drive C: อย่างเดียว ขนาด 14.29 GB

    disk2vhd03e

    4. ตั้ง VHD File name: ที่ Drive อีกอันที่เป็นชนิด ntfs เช่น e:\RD536.vhd

    5. รอจนเสร็จ

    6. นำไฟล์ไปที่เครื่อง notebook ที่มีโปรแกรม Oracle VM VirtualBox

    7. สร้าง New VM เลือก Use an existing virtual hard disk file และ คลิก Create

    disk2vhd04

    8. ในตอนแรก มันเปิด Windows XP ไม่ได้ จึงค้นหา มีคำตอบว่า ให้ติ๊กเลือก Enable I/O APIC ในหน้า System Motherboard ด้วย

    disk2vhd05

    9. เปิดใช้งาน VM windowsxp

    disk2vhd06

    รูปนี้เป็นเครื่อง notebook ที่เปิด VM Windows XP จากไฟล์ RD536.vhd

    disk2vhd07

    10. เมื่อจะใช้เครื่องพิมพ์ ให้ต่อสาย USB ของเครื่องพิมพ์เข้ากับ notebook แล้วเลือกเมนู Device > เลือก USB > เลือกที่ต้องการ

    disk2vhd08

    อ้างอิง:
    Disk2vhd v2.01 By Mark Russinovich Published: January 21, 2014
    https://technet.microsoft.com/en-us/sysinternals/ee656415.aspx

    Backup current Windows OS as a virtual machine
    http://techathlon.com/backup-current-windows-os-virtual-machine/

    VHD with XP cannot boot. What should I do?
    https://forums.virtualbox.org/viewtopic.php?f=2&t=48688#p221106

  • วิธีใช้งาน PSU Email ด้วยโปรแกรม Mozilla Thunderbird

    แสดงขั้นตอนการใช้ PSU Email ด้วยโปรแกรม Mozilla Thunderbird ทีละขั้นตอนตั้งแต่การดาวน์โหลดโปรแกรมรุ่นล่าสุดมาใช้ การตั้งค่าบัญชีผู้ใช้ การตั้งค่าการเชื่อมต่อกับเซิร์ฟเวอร์ และการตั้งค่าภาษาไทยที่ถูกต้อง

  • How to upgrade Windows 7 to Windows 10

    วิธีอัพเกรด Windows 7 เป็น Windows 10

    โดยปกติ Icon update เป็น Windows 10 จะไม่ปรากฏอยู่บน Taskbar ของ Windows 7 เหมือน Windows 8  ดังนี้หากเรามีความประสงค์จะอัพเกรดจาก Windows 7 ไปเป็น Windows 10 นั้น เราจำเป็นต้องใส่แผ่น DVD  Windows 10 และกดไฟล์ setup ในแผ่น  โดยเราสามารถปฏิบัติการได้ตอนที่เปิดเครื่องอยู่นั่นแหละ ไม่ต้อง restart เครื่องใหม่ โดยเราไม่สามารถจะอัพเกรด Windows ข้ามจาก 32 bit ไปเป็น 64 bit ได้ ถ้าของเดิมเป็น 32 เวลา upgrade ก็ต้องเป็น 32 bit เพราะผมลองใส่แผ่น 64 bit แล้ว ไม่ได้  ซึ่งใช้เวลาประมาณ เกือบชั่วโมง หากเลือกติดตั้งแบบอัพเดทอัตโนมัติ และเครื่องมันจะรีสตาร์ทหลายรอบมาก (เราไม่ต้องทำอะไร) แล้วผลจากการติดตั้งปรากฏว่า โปรแกรมที่ติดตั้งใน Drive C: รวมทั้งไฟล์บนหน้าจอ และใน Document ยังอยู่ครบเหมือนเดิมทุกอย่าง Driver ยังอยู่ครบ แต่ Serial ของพวก Office รวมถึง Windows เอง หายหมดเราต้องใส่ใหม่ครับ

    (ขออภัยที่ไม่มีภาพประกอบนะครับ แต่ทดลองแล้วเมื่อวานได้ผลตามนี้แหละครับ)

    จบปิ้ง.

     

     

  • สร้างโปรแกรมทดสอบเว็บแอพพลิเคชันอัตโนมัติด้วย Selenium WebDriver : ตอนที่ 1 การติดตั้ง Web Driver

    “Selenium” คือ ชุดเครื่องมือที่ใช้สำหรับทดสอบเว็บแอพพลิเคชันอัตโนมัติ โดยประกอบด้วยเครื่องมือ 4 เครื่องมือ การใช้งานจะขึ้นอยู่กับวัตถุประสงค์ของการทดสอบในแต่ละองค์กร ได้แก่

    • Selenium Integrated Development Environment (Selenium IDE)
    • Selenium Remote Control (RC)
    • WebDriver
    • Selenium Grid

    SeleniumSuite

    โดยในปัจจุบัน ในส่วนของ Selenium RC (Selenium 1.0) และ WebDriver ได้ร่วมเป็น Selenium ในเวอร์นที่ 2 ซึ่งในบทความนี้ ผู้เขียนจะขอเรียกว่า Selenium Web Driver เพื่อไม่ให้สับสนกับ Selenium ค่ะ ต่อไปก็ขออธิบายลงไปที่ Selenium Web Driver ต่อไปเลยค่ะ 

    Selenium Web Driver เป็นเครื่องมือที่ช่วยให้เราสามารถสร้างโปรแกรมในการทดสอบเว็บแอพพลิเคชันกับ Web browser ได้หลายตัว ซึ่งถือเป็นคุณสมบัติเด่นที่ดีกว่า Selenium IDE ค่ะ (Selenium IDE จะใช้งานได้เฉพาะ firefox เท่านั้น) โดยจะมี Web Driver เป็นตัวกลางที่มีไลบารีที่ช่วยในเราติดต่อกับ Web browser ได้ดังรูปค่ะ

    WebDriver_and_Browsers(1)

    โดยใช้การเขียนโปรแกรมในภาษาต่างๆ ที่เราคุ้นเคยกัน ไม่ว่าจะเป็น JAVA, .Net (VB/C#), Ruby ติดต่อกับไลบารีของ WebDriver เพื่อเข้าถึงคอนโทรลที่แสดงผ่าน Web browser ได้ ทำให้เราสามารถสร้างโปรแกรมการทดสอบได้หลากหลายมากขึ้น เช่น

    • ดึงข้อมูลที่ใช้สำหรับกรอกข้อมูลบนฟอร์ม จากฐานข้อมูลได้
    • สามารถใช้ทดสอบหลายๆ กรณี ได้อย่างต่อเนื่อง

    เริ่มเห็นประโยชน์กันบ้างยังค่ะ ต่อไปเพื่อไม่ให้เป็นการเสียเวลาและเพื่อให้เห็นภาพมากยิ่งขึ้น เราก็มาเริ่มการติดตั้งเลย โดยบทความนี้จะใช้ WebDriver ของ Firefox และภาษา C# ในการพัฒนา

    ขั้นตอนที่ 1 : โหลด Selenium Client และ WebDriver
    ไปยัง URL : http://www.seleniumhq.org/download/
    Selenium Client คือ ไลบาลีที่ใช้ติดต่อกับ WebDriver ซึ่งขึ้นอยู่กับภาษาที่ใช้ในการพัฒนา

    11

    12

    (จากรูปด้านบน เลือกตามภาษาที่ใช้ในการพัฒนา)

    WebDriver คือ ไลบารีที่ใช้ติดต่อกับ Web brower ซึ่งในส่วนของ firefox จะติดมากับไลบารีของ Selenium Client อยู่แล้ว แต่ในส่วนของ IE , Chrome หรือ Safari ต้องโหลดแยกต่างหาก โดยในส่วนของเว็บ Selenium ก็มีให้โหลดเรียบร้อยแล้ว 

    13

    14

    (จากรูปบน เป็น Webdriver ของ Chrome เลือกตามระบบปฎิบัติการใช้งาน)

    15

    (จากรูปบน เป็นไฟล์ Webdriver ของ Chrome โดยเราจะเรียกใช้โดยการอ้างอิงจากพาร์ธ)

    ขั้นตอนที่ 2 : การติดตั้งไลบารีกับ Visual Studio

    เมื่อดาวน์โหลดมาเรียบร้อย ทำการแตกไฟล์จะได้โฟลเดอร์ตามรูป โดยเลือกใช้งานตาม .Net Framework ที่ใช้ในการพัฒนา

    16

    จากนั้นทำการสร้าง Project และทำการ Add Referrence

    1

    2

    ขั้นตอนที่ 3 : Hello World !!

    ขั้นตอนนี้ทำการเขียนโปรแกรม โดยการกดปุ่มจากฟอร์มและโปรแกรมทำการเปิดเว็บเพจ google ค้นหาคำว่า Hello World

    18

    3

    (จากรูปบน เป็นส่วนของการประกาศใช้งานไลบารีของ Selenium ซึ่งในกรณีนี้อยู่ที่ว่าจะใช้เรียกเว็บ browser อะไรก็เรียกใช้ไลบารีตัวดังกล่าว จากตัวอย่างผู้เขียนจะเรียกใช้ Firefox กับ Chrome)

    5

    (จากรูปบน เป็นการสร้างตัวแปรคลาส driver ของ Firefox)

    4

    (จากรูปบน เป็นการสร้างตัวแปรคลาส driver ของ Chrome โดยจะแตกต่างจากของ Firefox ตรงที่ต้องมีการระบุตำแหน่งของ driver ซึ่งในขั้นตอนที่ 2 ได้ทำการโหลดมา)

    6

    (จากรูปบน เป็นการเขียนโปรแกรมให้เว็บของ google ค้นหาว่า Hello World!!! คำอธิบายตาม comment เลยจร้า  โดยรูปแบบการค้นหายังมีอีกหลายวิธี ซึ่งอธิบายในตอนต่อไป  )

    เขียนเสร็จเรียบร้อย ลอง run ดูจะได้ผลลัพธ์ตามข้างล่าง ไป Hello World กัน !!! 

    17

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

    อ้างอิง :

    www.seleniumhq.org  
    www.guru99.com/selenium-tutorial.html