รู้จักกับ Inspector เครื่องมือช่วยคนทำเว็บ

Inspector (บางคนก็เรียก Debugger หรือ Developer Tools) เป็นเครื่องมือที่ช่วยให้เราสามารถดูและแก้ไข element ต่างๆ บนหน้าเว็บและดูผลลัพธ์ได้ทันที (แต่จะเป็นการแก้ไขชั่วคราว  รีเฟรชหน้าเว็บก็หาย  เหมาะกับการลองแก้เว็บ  ก่อนจะเอาไปลงไฟล์จริงๆ)  รวมทั้งใช้ตรวจสอบโค๊ดที่ผิดพลาดต่างๆ  การดูค่าของตัวแปรและวัตถุของจาวาสคริปท์   และยังมีฟีเจอร์อำนวยความสะดวกต่างๆ สำหรับคนทำเว็บอีกมากมาย

แต่ถึงกระนั้น  คนทำเว็บหลายๆ คนก็ยังไม่รู้จัก  หรือไม่เคยใช้งานเครื่องมือพวกนี้เลย  น่าเสียดายมากครับ  วันนี้ผมเลยหยิบมันมาแนะนำตัวให้รู้จักคร่าวๆ กันสักหน่อย

Inspector ในแต่ละเบราเซอร์

ปกติแล้วในแต่ละเบราเซอร์  ก็มักจะแถม Inspector ของตัวเองมาให้ใช้งานด้วยเช่นกัน (หรือถ้าเป็นเบราเซอร์ที่ใช้พื้นฐานมาจาก Chromium ก็จะแถม Developer tools ของ Chrome มาให้ใช้งาน)

Read More

รีวิว: พาทัวร์ Opera Next 15

เป็นเวลาสักพักใหญ่ๆ ที่ Opera ประกาศว่าจะเลิกใช้เอ็นจิน Presto ของตัวเอง  และหันไปพัฒนาโดยใช้ฐานจาก Chromium แทน  และเมื่อไม่นานมานี้ก็เพิ่งจะปล่อย Opera 14 for Android เบราเซอร์รุ่นมือถือที่มีฐานมาจาก Chromium ไป  จนถึงวันนี้  ก็ได้ปล่อย Opera Next 15 เบราเซอร์เดสก์ท็อปที่ใช้ฐานจาก Chromium มาให้ลองกันแล้วครับ

Opera Next 15 พัฒนาขึ้นมาโดยใช้ Chromium 28 เป็นฐาน  นั่นหมายความว่า Opera Next 15 จะได้เอ็นจินแสดงผล Blink มาด้วยนั่นเอง (Blink คือเอ็นจินที่ Google เอา WebKit มาแยกพัฒนาเอง  โดยลบโค๊ดที่ขยะทิ้งออกไป  ทำให้โดยรวมแล้ว Blink จะเบากว่า WebKit)  โดยใน Opera Next 15 ตัวแรกนี้  ยังพอร์ทเอาฟีเจอร์เก่าๆ กลับมาได้ไม่ครบ  หรือบางอันก็โดนถอดออกไปเสียอย่างนั้น  ดังนั้นในฐานะสาวก Opera จึงขอเขียนบล็อกรีวิวมันสักหน่อยแล้วกัน

สัมผัสแรกของ Opera Next 15

ในทีแรกที่ Opera 14 for Android ถูกปล่อยออกมา  ผมค่อนข้างหวั่นใจมากๆ ว่า Opera สำหรับ Desktop จะออกมาเป็นเหมือน Opera 14 for Android คือเปลี่ยนหน้าตาใหม่หมด  ฟีเจอร์หายเพียบ  และทำงานได้เชื่องช้าอืดอาด  แต่พอได้ลองใช้จริงๆ ก็พบว่ามันไม่ได้เปลี่ยนไปมากขนาดนั้น  โดยรวมหน้าตายังเหมือนเดิม  และการทำงานที่อาจจะเรียกว่าเร็วขึ้นด้วยซ้ำ

Read More

CSS Gradient แห่งสี่โลก

เรื่องแอบน่าเบื่อเล็กๆอย่างหนึ่งเวลาทำเว็บก็คืออารมณ์ที่อยากจะใช้พื้นหลังแบบไล่สี (หรือ gradient) ซึ่งหลายคน (ผมก็เคยเป็น) คงเลี่ยงไปใช้โปรแกรมอย่าง Photoshop ในการทำพื้นหลังแบบไล่สี แล้วค่อยเอามาใส่ลงในหน้าเว็บ ซึ่งวิธีนี้ ผลลัพท์คือหน้าเว็บหนักขึ้นจากภาพที่เอามาทำพื้นหลัง แน่นอน

วิธีแก้ปัญหานี้ง่ายมากครับ หันไปใช้ CSS ซะ ซึ่งเบราเซอร์หลักทั้ง 4 ค่าย (Opera, IE, Firefox, Chrome) ต่างรองรับการไล่สีด้วย CSS กันทั้งสิ้น

แต่เรื่องน่าปวดตับมันอยู่ที่ทั้งสี่ค่าย ใช้ CSS ต่างกันหมดเลย…

Read More

Opera Mobile 11 และ Opera Mini 6

บนโทรศัพท์มือถือ แม้จะไม่เห็นสงครามเบราเซอร์ที่ดุเดือดมากนักบนแพลตฟอร์มหนึ่งๆ แต่ว่าในแต่ละแพลตฟอร์มก็จะมีเบราเซอร์จากค่ายอื่นๆ มาให้เลือกใช้กันอยู๋ตลอด และหนึ่งในเบราเซอร์จาก 3rd party ที่อยู่มาอย่างยาวนาน นั่นคือ Opera ซึ่งตอนนี้ได้ออก Opera Mobile 11 และ Opera Mini 6 มาให้ใช้กันแล้วครับ

ในงานนี้ Opera ออกมาให้ใช้พร้อมกันถึง 7 แพลตฟอร์ม คือ Android, Symbian, BlackBerry, Windows 7, MeeGo, iOS (Opera Mini), และเวอร์ชั่น J2ME (Opera Mini นั่นแหละ)

การออกเวอร์ชั่นรอบนี้น่าสนใจครับ มีการปรับปรุง UI ใหม่เล็กน้อย มีการออกเวอร์ชั่นสำหรับ Tablet (มีของ Windows 7 Tablet ด้วย ซึ่งเอามาเล่นบน Windows XP ได้ปกติครับ) ซึ่งเดี๋ยวเราจะไปพูดกันตอนท้ายๆ ตอนนี้ไปดูฟีเจอร์ใหม่ใน Opera Mobile 11 และ Opera Mini 6 กันก่อนดีกว่า

Read More

ตั้ง MouseGesture ให้ Opera เพื่อเรียกใช้ Fit to Width

ก่อนที่จะบอกวิธีการเพิ่ม Gesture เนี่ย ผมจะอธิบายก่อนว่าไอ้ Fit to Width นี่มันคืออะไร สงสัยกันล่ะสิ

Fit to Width เป้นความสามารถหนึ่งของโอเปร่า ที่จะใช้จัดหน้าเว็บให้พอดีกับความกว้างที่กำหนดไว้ ซึ่งมันก็ไมไ่ด้พิเศษอะไรหรอก เพียงแต่ เราสามารถใช้ Fit to Width ช่วยในการตัดคำไทยได้ !

หากสงสัย ให้ดูรูปข้างล่างนี้ ด้านซ้ายคือหน้าเว็บปกติที่มีปัญหาเรื่องตัดคำไทย ส่วนด้านขวาคือหน้าที่เปิดใช้งาน Fit to Width

เห็นมั๊ยครับ นั่นแหละ Fit to Width ประโยชน์หลักๆของมันสำหรับเราๆท่านๆผู้ใช้ชาวไทยก็คือ ใช้ในการตัดคำไทยในเว็บที่พิมพืติดกันยาวเป็นพรืดนั่นเอง – -“

ทีนี้มารู้จัก Mouse Gestures กันต่อ หลายคนอาจจะรู้จัก Mouse Gestures ใน Maxthon หรือ Firefox แต่ของ Opera นี่ต้นฉบับของ Gestures ที่เบราเซอร์อื่นลอกไปกันเป็นแถบๆครับ กล่าวคือเวลาใช้เบราเซอร์ คุณสามารถควบคุมเบราเซอร์ได้ด้วยการลากเมาส์เป็นสเต็ป หรือคลิกตามสเต็ปที่ตั้งไว้

เช่น ลากเมาส์ไปไฟล์ คลิกหนึ่งที่ ลากลงมาที่ Exit เพื่อปิดโอเปร่า… ม่ายช่ายโว้ย -*-

อย่างเช่นคลิกขวาค้างแล้วลากไปทางซ้ายเพื่อ Back หรือคลิกขวาค้างแล้วลากไปทางขวาเพื่อ Forward (หรือคลิกซ้ายแล้วคลิกขวาเพื่อ Back) ลองไปดูเกสเจอร์อื่นๆในนี้แล้วกัน

มาเข้าเรื่องของเรากันต่อ การเพิ่ม Gestures ให้กับ Fit to Width…

Read More