วิธีการแปลงไฟล์จาก PDF เป็น Word แบบบ้าน ๆ โดยใช้ Google Drive

วิธีการแปลงไฟล์จาก PDF เป็น Word มีหลากหลายวิธี ซึ่งส่วนใหญ่จะมีเว็บไซต์ หรือโปรแกรมต่าง ๆ ที่ใช้สำหรับแปลงไฟล์กัน แต่…สำหรับคนที่ไม่ต้องการให้เอกสารของเราไปอัปโหลดเพื่อแปลงไฟล์กับเว็บไซต์ที่ไม่รู้จัก หรือไม่มีโปรแกรมลิขสิทธิ์ที่สามารถแปลงไฟล์ได้ ลองมาดูวิธีนี้กันนะคะ คิดว่าทุกคนสามารถทำได้อย่างง่ายดายค่ะ ในตัวอย่างวันนี้จะมีวิธีการแปลงไฟล์ PDF เป็น Word วิธีเดียวเท่านั้นแต่….จะทดลองทำให้ดูกับ 2 ไฟล์ ได้แก่ แบบที่ 1 : ไฟล์ PDF ที่เกิดจากการแปลงจาก Word มาโดยตรง ซึ่งการแปลงไฟล์ PDF มาเป็น Word สิ่งที่คิด คือ ข้อความในเอกสารส่วนใหญ่ จะถูกต้องครบถ้วน และสวยงาม แบบที่ 2 : ไฟล์ PDF ที่เกิดจากการสแกน หรือเป็นรูปถ่าย การแปลงไฟล์ PDF มาเป็น Word สิ่งที่คิด คือ ข้อความจะมีลักษณะไม่เหมือนกับต้นฉบับ อาจจะมีสระหรือวรรณยุกต์ที่ไม่ครบถ้วน แต่สามารถนำไปปรับปรุงต่อให้สวยงามได้ค่ะ มาดูวิธีการกันเลย และจะเปรียบเทียบทั้ง 2 แบบเอกสารให้ดูนะคะ แบบที่ 1 : เป็นเอกสารที่เกิดจากการแปลงมาจากเอกสาร Word เมื่อเปิดไฟล์ในรูปแบบ PDF วิธีการคือคลิกที่ไฟล์ที่ต้องการแปลงไฟล์จาก PDF เป็น Word (1) คลิกเลือก Open with (2) คลิกเลือก Google Docs ดังรูป รอระบบทำการแปลงไฟล์ ดังรูป เมื่อแปลงไฟล์เรียบร้อยจะแสดงเอกสาร Word มาให้ ดังรูป แบบที่ 2 : เป็นเอกสารที่เกิดจากการแปลงมาจากเอกสารที่ผ่านการสแกน เมื่อเปิดไฟล์ในรูปแบบ PDF เมื่อแปลงไฟล์เรียบร้อยจะแสดงเอกสาร Word มาให้ ดังรูป สรุปผลการแปลงไฟล์ทั้ง 2 รูปแบบ แบบที่ 1 : ไฟล์ PDF ที่เกิดจากการแปลงจาก Word มาโดยตรง ซึ่งการแปลงไฟล์ PDF มาเป็น Word           สิ่งได้ คือ มีตัวสระที่ยังไม่ถูกต้องนัก อาจจะเป็นเพราะรูปแบบตัวอักษรที่แปลงมา แต่ภาพรวมก็ถือว่าดีมากแล้ว แบบที่ 2 : ไฟล์ PDF ที่เกิดจากการสแกน หรือเป็นรูปถ่าย การแปลงไฟล์ PDF มาเป็น Word           สิ่งได้ คือ ว๊าวมากค่ะ ไม่คิดว่าตัวอักษรที่ออกมาจาะครบถ้วนสมบูรณ์ขนาดนี้ แต่ต้องปรับนิดหน่อยให้สวยงาน *** นี่เป็นทางเลือกอีกทางหนึ่งสำหรับคนที่ต้องการแปลงไฟล์จาก PDF มาเป็น Word โดยไม่ต้องง้อโปรแกรมหรือเว็บไซต์ออนไลน์ทั่วไปเลยค่ะ ขอบคุณผู้อ่านที่รักทุกท่านค่ะ ^^

Read More »

upgrade crystal report version 10 ไปเป็น version 13

เนื่องด้วยตอนนี้ crystal report version 10 มันเก่ามากแล้วทางผู้เขียนเลยอยากจะ upgrade crystal report version 10 ไปเป็น version 13 ดังนั้นจึงสรุปขั้นตอนไว้เพื่อเป็นแนวทางการทำงานของคนที่มีปัญหาเดียวกัน ดังนี้ ขั้นตอนที่ 1 แก้ web.config ใน project web application โดยเปลี่ยนเลข version จาก 10.2.3600.0 เป็น 13.0.2000.0 ขั้นตอนที่ 2 copy folder crystalreportviewers13 ใส่ไว้ที่ project web application ขั้นตอนที่ 3 แก้ page ที่เรียกใช้ crystal report โดยเปลี่ยนเลข version จาก 10.2.3600.0 เป็น 13.0.2000.0 ขั้นตอนที่ 4 แก้ page ที่เรียกใช้ crystal report โดยเพิ่มการเรียก JavaScript ในส่วนของ tag head ขั้นตอนที่ 5 ลองเรียกใช้ page ที่มี crystal report ได้ผลลัพธ์ดังรูป ทางผู้เขียนหวังว่าจะมีประโยชน์ในการ upgrade crystal report version 10 ไปเป็น version 13 ใน source code ที่เรียกใช้ version เก่านะคะ

Read More »

สร้าง UI หน้าเว็บแบบ Timeline ด้วย HTML+CSS

เนื่องจากระบบที่กำลังพัฒนาอยู่ มีความต้องการแสดงผลข้อมูลในรูปแบบ Timeline ดังรูป เมื่อลองหาแนวทางดูพบว่ามี how to ที่เว็บไซต์ https://www.w3schools.com/howto/howto_css_timeline.asp ลองนำมาประยุกต์ใช้ โดยปรับสี เพิ่มเงา และส่วนแสดงผลรูป และไอคอนเข้าไป โดยใช้ https://getbootstrap.com/ เวอร์ชัน 5 เพื่อช่วยในการจัดตำแหน่งเนื้อหาด้านใน ก็จะได้ CSS และ HTML สำหรับนำไปใช้ในเว็บไซต์ดังนี้ HTML โดยในตัวอย่างได้นำโครงสร้าง html page และ ส่วนแสดงอีโมไอคอนออกเพื่อให้อ่านง่าย เห็นโครงสร้าง html ของ timeline ชัดเจน และต้องมีรูปอยู่ที่โฟลเดอร์ images (ภาพประกอบเนื้อหาของท่านเอง) ก็จะได้หน้าเว็บใกล้เคียงความต้องการ ดังรูปตัวอย่างนะครับ สามารถนำไปปรับใช้ โดยการปรับแก้ css และเพิ่มเติมส่วนแสดงผลอื่นๆได้ตามต้องการ

Read More »

UX Design Processes

สวัสดีครับ วันนี้เราจะมาว่ากันด้วยเรื่องของ การออกแบบสินค้าและบริการที่ตอบโจทย์และดีต่อผู้ใช้ การสร้างสินค้าและบริการจะต้องประกอบไปด้วยการออกแบบทางด้านประสบการณ์ของผู้ใช้ หรือ UX เพราะทุกสิ่งที่ถูกคิดค้นหรือสร้างขึ้นล้วนต้องผ่านการคิด วิเคราะห์ สร้างเพื่ออะไร ทำไปทำไม ตอบโจทย์อะไรกับผู้ใช้ ซึ่งการออกแบบมีด้วยกัน 6 ขั้นตอนหลักๆดังนี้ Step 1 : Understanding Environment (Discovery phase) เป็น phase แห่งการทำความเข้าใจ การทำความเข้าใจในที่นี้หมายถึง การที่เราเข้าใจผู้ใช้, เข้าใจ brand, เข้าใจในเงื่อนไขต่างๆ เพื่อที่จะเอามาเป็นแนวทางในการทำ research ให้ phase ถัดไป User การทำความเข้าใจผู้ใช้งานระบบ -> Pain Point discovery การค้นหา Pain point ของผู้ใช้ เราต้องเข้าใจว่าปัญหาของผู้ใช้คืออะไรบ้าง เราคิดว่าจะแก้ไขปัญหาให้กับผู้ใช้ได้อย่างไรบ้าง Brand เป้าหมาย/จุดประสงค์ขององค์กร เราต้องรู้โปรเจคนี้มีความเกี่ยวข้องกับภารกิจหรือเป้าหมายขององค์กรเราอย่างไร ต้องพยายามยึดติดอยู่กับเป้าหมายขององค์กรเพราะมันจะเป็นสิ่งที่ทำให้องค์กรประสบความสำเร็จได้ Clear Needs & Conditions ความต้องการและเงื่อนไขที่ชัดเจน เราจะทำอะไร เราต้องทำภายใต้เงื่อนไขอะไรบ้าง Step 2 : Research (Infomation Gathering, Hypothesis phase) เมื่อเราทราบถึงเป้าหมายของการสร้างหรือพัฒนาสินค้าและทราบถึงปัญหาของผู้ใช้แล้ว ขั้นต่อไปคือการค้นหาข้อมูลเพิ่มเติม phase นี้จึงเป็น phase แห่งการค้นคว้า เก็บข้อมูลตั้งต้นเพื่อที่จะนำมาวิเคราะห์ในขั้นตอนต่อไป การ research มีด้วยกันหลายวิธี Interview การสัมภาษณ์ 1:1 Interview การสัมภาษณ์ตัวต่อตัวกับผู้ใช้ จะเป็นเหมือนการพูดคุยทั่วไปถึงเรื่องการใช้งานระบบ เคยเจอปัญหาอะไรมาบ้าง ยังคงติดปัญหาในจุดไหนอยู่ไหม ในการใช้งานระบบเขามองหาอะไรอยู่ การสัมภาษณ์แบบตัวต่อตัวทำให้ทราบถึงความจริงใจและอารมณ์ของผู้ใช้ สามารถนำมาเป็นตัววัดความเที่ยงตรง เชื่อถือได้ของข้อมูลชุดนั้น การสัมภาษณ์แบบนี้สามารถทำแบบพูดคุยตัวต่อตัวหรือทาง meeting/conference/telephone ก็ได้ Group Interview การสัมภาษณ์แบบกลุ่ม เป็นวิธีการที่ให้ข้อมูลได้แบบไม่ค่อยละเอียด แต่ได้จุดที่สำคัญ มีการกรองกันจากการพูดคุยภายในกลุ่ม ลักษณะการถามก็จะเป็นเหมือนการสัมภาษณ์แบบตัวต่อตัว การสัมภาษณ์ด้วยวิธีนี้อาจจะต้องนำข้อมูลมาวิเคราะห์ค่าเฉลี่ยเพิ่มขึ้นมา กลุ่มของผู้ใช้ 3-5 คนก็เพียงพอไม่จำเป็นต้องไปเก็บจากผู้ใช้ 100-1000 คน (Rule of thumb) Surveys การทำแบบสอบถาม ในการสร้างแบบสอบถามขึ้นมา เราต้องรู้ถึงปัญหาของผู้ใช้ ปัญหานี้เกิดในผู้ใช้กลุ่มไหน แล้วนำข้อมูลนั้นมาวิเคราะห์ออกมาเป็นสมมติฐาน หลักการสร้างแบบสอบถาม แยกปัญหาออกมา โดยดูความสำคัญว่า ปัญหาอันไหนสามารถวัดและทำ Testing ได้แล้วนำมาทำให้เป็นคำถามแบบที่ Interactive ได้ พยายามตั้งคำถามปลายเปิดแต่ยังสามารถทำให้เรามองเห็นคำตอบได้ *ไม่ควรตั้งคำถาม Yes/No, Rating เนื่องจากไม่สามารถนำข้อมูลมาพัฒนาต่อได้ ตัวอย่างของการทำ survey ที่ดี Hypothesis: สงสัยว่าหน้าแรกของระบบมันไม่จูงใจผู้ใช้ ทำให้ผู้ใช้ออก (nothing grabs user’s attention) วิธีถาม: 5seconds test นำหน้าเว็ปจริงๆมาและใช้ Heat map ในการวิเคราะห์โดยกำหนดโจทย์ว่า ให้ผู้ประเมินคลิกจุดแรกที่ผู้ใช้สนใจภายใน 5วินาที คำตอบ: Heat map result ผู้ใช้สนใจตรงไหนมากที่สุด สามารถนำข้อมูลมาวิเคราะห์ต่อได้ Hypothesis: ข้อสงสัยที่คิดว่าลูกค้าไม่เข้าใจว่าเค้าทำอะไรได้บ้างบนเว็ปไซต์ของเขา วิธีถาม: 5seconds test ดูหน้าเว็ปแล้วถามว่า คิดว่าหน้านี้เขาสามารถทำอะไรได้บ้าง คำตอบ: ลำดับของความชัดเจนว่า ผู้ใช้สนใจอะไรเป็นอันดับแรก และอันดับตามๆมา Hypothesis: สงสัยว่า content มันน่าจะไม่ดึงดูดผู้ใช้แน่ๆ วิธีถาม: นำเว็ปไซต์คู่แข่งมาเปิดคู่กันกับเว็ปไซต์เราและทำในลักษณะของ A/B testing โดยทำ hot spot test ให้ผู้ประเมินเลือก section ของเว็ปตัวอย่าง 3 ชิ้นที่คิดว่าจำเป็นสำหรับเขา คำตอบ: section ที่เขามองหาแต่เราไม่มี หรือจุดไหนที่มีเหมือนกัน หรือจุดไหนที่เรามีแต่คนอื่นไม่มี ข้อดี:: Scale ได้, รวดเร็ว, วิเคราะห์ง่าย ข้อเสีย:: คำตอบอาจจะมีการเอนเอียงได้ (Bias) ไม่สามารถอธิบายแทนสิ่งที่ผู้ใช้เจอมาได้ทั้งหมด คำตอบที่ได้ไม่หลากหลาย และมีความเสี่ยงต่อการสูญเสียข้อมูลจากผู้ใช้ ถ้ามีการออกแบบแบบสอบถามไม่ดี ทำให้เกิดการพลาดโอกาส Usability Testing การสำรวจการใช้งานในกลุ่มเป้าหมาย การทำ

Read More »

Figma: Scrolling  with overflow behavior (Horizontal Scrolling)

บล๊อกนี้ผู้เขียนจะมาแนะนำวิธีการตั้งค่า 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

Read More »