รับทำเว็บไซต์ครบวงจร
เลือกภาษา Thai English     facebook


ติดต่อทำเว็บไซต์ โทร : O89-l79-O7l4 (ทุกวัน 24 ชั่วโมง)

รายการหลัก



บทความ


Page Ranking Tool

เครื่องมือทดสอบ Responsive Web Design.


สอน HTML5
> เครื่องมือทดสอบ Responsive Web Design.


สวัสดีครับ ก้าวสู่ยุค smart phone เต็มรูปแบบ จะแสดงเว็บแค่บนเครื่อง Computer Desktop อย่างเดียวคงไม่ได้สมัยนี้ผู้คนใช้มือถือ Smart Phone ,Android,iPhone, iPad ,หรือ Tablet เข้าเว็บเยอะขึ้น ถ้าเว็บเพิ่งเปิดใหม่ๆเน้นเนื้อหาเป็นหลักจะเข้าทีต้องลากนิ้วซูมเข้าซูมออกเสียเวลา ยังไม่รวมถึงเมนูที่ขาดๆหายๆ ลองคิดดูถ้าคนเข้าเว็บมาเจอแบบนี้แล้วเนื้อหาเราไม่เด็ดมีประโยชน์จริงเชื่อเถอะว่าคนที่เข้ามาปิดแล้วออกจากเว็บเราภายในไม่กี่วินาทีแน่นอนครับ ทีนี้เว็บโปรแกรมเมอร์อย่างผมก็คงต้องปรับตัวตามและนั่นคือที่มาของ Responsive Web Design คือ เว็บที่มีความสามารถยืดหยุ่นในโครงสร้างการแสดงหน้าตาของเว็บบนทุกอุปกรณ์ตั้งแต่ Computer Desktop , Notebook , Tablet จนถึง Smart Phone เช่นเดิมแสดงหน้าเว็บ 3 คอลัมน์ พอเปิดจากมือถือจอเล็กยุบไปเหลือ 1 คอลัมน์ รวมทั้งเมนูที่ต้องกดง่ายด้วย ลองดูตามภาพตัวอย่างด้านล่างครับ

รับทำเว็บ  webUB.com

credit : http://www.thesearchagents.com/

วิธีการพัฒนา Responsive Web Design นั้นก็อาศัย CSS3,HTML5 และอาจจะใช้ jQuery เป็นตัวขับเคลื่อน ปัจจุบันสะดวกหน่อยเพราะมี CSS Framework หลายตัวที่เข้ามาช่วยให้เราไม่ต้องเขียน CSS เองทั้งหมดทุ่นแรงประหยัดเวลาไปได้เยอะ อย่างเช่นดังๆอันดับต้นๆก็ Bootstrap และ Foundation เป็นต้น ลองไปเล่นกันดูครับ มาถึงเครื่องมือทดสอบ (Responsive web design testing tool) ผมเน้นที่ฟรีติดตั้งง่ายหรือไม่ต้องติดตั้งซึ่งที่ตอบโจทย์คือที่รันบน web browser อย่างเช่น firefox และ chrome ซึ่งผมใช้หลักๆมีแค่ 2 ตัวนี้ครับ

1. Firefox Developer Tools


หน้าตาการใช้งานก็ตามรูปด้านล่างครับ โดยจะมีปุ่มควบคุมด้านบน อธิบายการทำงานของแต่ละปุ่มจากซ้ายไปขวาดังนี้ครับ

ปุ่มปิดกลับไปยังหน้าจอปกติ
ตัวเลือกขนาดหน้าจอ
ตัวเลือกแสดงหน้าจอแบบแนวตั้งแนวนอน
จำลองการสัมผัสแบบ smart phone เมาส์จิ้มค้างแล้วลากขึ้นลง (อันนี้ผมใช้ไม่ได้แฮะ)
จับภาพ screenshot หน้าจอ เผื่อจะส่งเมล์ตัวอย่างหน้าจอให้ลูกค้าดู

รับทำเว็บ  webUB.com

credit: http://developer.mozilla.org

รับทำเว็บ  webUB.com


วิธีใช้งานไม่ยากครับสำหรับ Windows เปิด Firefox เข้าเว็บที่ต้องการทดสอบจากนั้น กดปุ่ม Ctrl+Shift+M พร้อมกันครับ จะแสดงหน้าจอมาให้เราใช้ เวลาออกก็กดแบบเดิมซ้ำ

2. Dimensions Chrome Extensions


ตัวนี้ผมเจอหลังจากใช้ Firefox Developer Tools อยู่พักนึงลองไปค้นหาดูใน Chrome Extensions บ้างซิน่าจะมีคนทำไว้แล้วแล้วก็เจอกับ “Dimensions” เริ่มแรกเปิด Chrome แล้วเข้า https://chrome.google.com/webstore/category/apps ค้นหาคำว่า “Dimensions” โลโก้สีส้มๆ กดปุ่มติดตั้งได้เลยครับ

รับทำเว็บ  webUB.com

Credit:https://chrome.google.com/

เปิดมาหน้าตาอลังการทีเดียวมีแถมวัดเหมือนไม้บรรทัดและชื่ออุปกรณ์พวก phone , wide phone ,tablet ,wide tablet,desktop บอกไว้ด้วย เวลาใช้งานก็กรอก URL ช่องด้านบนและกดปุ่ม TEST ครับ ทีนี้ถ้าจะเลือกขนาดก็คลิกที่ชื่ออุปกรณ์ด้านแถบหมายเลขวัดขนาดได้เลยครับ หรือจะคลิกค้างด้านข้างเพื่อลากย่อขยายขนาดเองก็ได้ครับ

รับทำเว็บ  webUB.com

Credit: http://dimensionsapp.com

สังเกตจะมีปุ่มด้านขวา “PREVIEW MODE” อันนี้จะแสดงเป็นหน้าตาอุปกรณ์มาให้เราด้วยครับสามารถเลือกอุปกรณ์ได้เช่น iPhone , Android หรือจะหมุนสลับแนวตั้งแนวนอน

รับทำเว็บ  webUB.com

http://dimensionsapp.com

Trick การใช้ App ของ Chrome


มี Trick เล็กๆสำหรับการใช้ App ของ Chrome นะครับ อันนี้ผมใช้เองแล้วสะดวกดีเลยมาแนะนำนิดนึงหลายคนอาจจะไม่รู้ว่า App นั้นมันสามารถ Create Shortcuts ไปวางบนหน้า Desktop , Start Menu หรือจะ Pin ไว้ที่ Taskbar เพื่อเวลาใช้งานจะได้ไม่ต้องเปิด Chrome ใหเสียเวลา กด Icon กันตรงๆเลยว่างั้น เริ่มต้นก็คือ

เปิด แล้วพิมพ์ที่ช่อง URL ว่า “chrome://apps/” เคาะ Enter
จะแสดงรายการ App ที่เราติดตั้งทั้งหมด เลือก App ที่ต้องการคลิกขวา >> เลือกเมนู “Create Shortcus…” ด้านล่างสุดครับ
จะแสดงหน้าจอ Create Shortcuts วางบนหน้า Desktop , Start Menu และ Pin to Taskbar ก็เลือกได้ตามต้องการครับ
หวังว่าบทความนี้คงมีประโยชน์สำหรับทุกท่านไม่มากก็น้อยนะจ๊ะ

refer: http://www.memo8.com/responsive-web-design-testing-tool/

Short URL click!
<< กลับคืน : เข้าชม 3,176 ครั้ง : ขึ้นไปด้านบน

รับทำเว็บไซต์ รับสร้างเว็บไซต์ รับออกแบบเว็บ รับเขียนเว็บ รับสอนทำเว็บ รับเช่า hosting รับเช่าพื้นที่เว็บไซต์ จดชื่อเว็บ รับโปรโมทเว็บไซต์ รับดูแลเว็บ SiteMap
สปริงเกอร์http://www.xn--22c2c4blb9n.xn--o3cw4h/