Mozilla Thailand Community

ทดสอบเว็บ Responsive ง่ายๆ ฟรีๆ กับ Firefox

ก.ค. 19 2013

ช่วงนี้กระแสการออกแบบเว็บเชิงตอบสนอง (Responsive design) กำลังเป็นกระแสการออกแบบเว็บสมัยใหม่เนืองจากกการออกแบบแบบนี้ ออกแบบครั้งเดียว สามารถดูได้ทั้งแบบ desktop แท็บเล็ท และมือถือ แต่ระหว่างการออกแบบอยู่เราจะทดสอบได้ยังไงล่ะว่า ถ้าความละเอียดแบบ 800×600 มันเป็นยังไง ความละเอียด 320×240 หน้าตาจะเป็นแบบไหน

ซึ่ง Firefox 15 ขึ้นไป มีเครื่องมือที่ชื่อว่ามุมมองการออกแบบเชิงตอบสนองหรือ Responsive Design View มาให้ในตัวโดยไม่ต้องโหลดเพิ่มมาแต่ประการใด วิธีการเปิดก็ง่าๆ แค่ คลิกที่ปุ่ม Firefox -> นักพัฒนาเว็บ -> มุมมองการออกแบบเชิงตอบสนอง หรือ ถ้าเราเปิดแถบเครื่องมืออยู่แล้วก็คลิกที่ปุ่มได้เลย

เปิดเอาจากปุ่ม Firefox

คลิกที่ปุ่มในแถบเครื่องมือนักพัฒนาเว็บก็ได้

คลิกปุ๊บหน้าตาก็เป็นแบบนี้ ยืดหดหรือเพิ่ม preset ได้ตามสบายเลย ง่ายๆ ไม่มีอะไรยาก

7Digital เปิดร้านขายเพลงเป็นเจ้าแรกใน Firefox OS แล้วหลังจากที่มือถือเปิดตัวได้แค่วันเดียว

ก.ค. 4 2013

Chengings

No responses yet

7Digital Music Store บน Firefox Marketplace ใน Firefox OS

หลังจากที่ ZTE Open มือถือที่ใช้ระบบปฏิบัติการ Firefox OS ตัวแรก วางขายอย่างเป็นทางการในเสปนได้แค่วันเดียว บริการซื้อขายเพลงที่ชื่อว่า 7Digital ก็ได้เปิดตัวแอพร้านขายเพลง (Music Store) ใน Firefox Marketplace แล้วพร้อมทั้งแปลตัวแอพให้เป็นภาษาในยุโรปทั้งหมด

7 Digital Music Store จุดเด่นของแอพตัวนี้คือ ซื้อเพลงและฟังตัวอย่างเพลงได้ในตัว แถมเป็นเว็บแอพเมื่อเราซื้อเพลงใน Firefox OS เพลงที่เราซื้อก็เก็บอยู่ในคลาวด์และสามารถเข้าถึงได้จากทุกอุปกรณ์ที่มีเว็บเบราว์เซอร์และเข้าถึงอินเทอร์เน็ต ซึ่งแตกต่างจาก iTunes โดยสิ้นเชิงที่ต้องใช้ผลิตภัณฑ์ของแอปเปิลเท่านั้นในการทำธุรกรรม

นี้คือจุดเด่นของ Firefox OS ที่มีแอพเป็นเว็บ แค่คุณมีบริการหรือไอเดีย (จะเขียนแอพใช้เองคนเดียวก็ได้) คุณก็สามารถทำแอพที่เข้ากันกับ Firefox OS ได้ทันทีโดยใช้เวลาที่่สั้นมากๆ และทำครั้งเดียวก็ใช้ได้กับทุกอุปกรณ์ที่มีอินเทอร์เน็ต ถ้าไม่รู้ว่าจะเริ่มกับ Firefox OS ยังไงลองอ่าน Firefox OS for Developers ดูครับ

หมายเหตุ: 7Digiatal เป็นบริการขายเพลงแบบเดียวกันกับ iTunes Music Store มีเพลงอยู่ในคลังประมาณ 25 ล้านเพลง บริษัทแม่อยู่ในลอนดอน มีแอพอยู่แล้วใน Android iOS Blackberry และ Windows Phone แถมมีพาร์ทเนอร์ดังมาร่วมด้วยเช่น Toshiba, HP, Acer, T-Mobile US, Ubuntu, Shazam, Pure, Universal Music, EMI, Warner Music และ Sony

ที่มา – The Next Web

Firefox OS คืออะไร?

ก.ค. 2 2013

Chengings

3 responses

เกริ่น

Firefox OS ชื่อเดิมคือ Boot to Gecko หรือที่เรียกสั้น ๆ ง่าย ๆ ว่า B2G เป็นระบบปฏิบัติการบนอุปกรณ์เคลื่อนที่อย่างมือถือและแท็บเล็ต และเมื่อเป็นซอฟต์แวร์ที่ออกภายในรังของ Mozilla แล้วก็ต้องเป็นระบบเปิด (open source) มาตั้งแต่กำเนิด

โดยแกนกลางของระบบปฏิบัติการเป็น Linux โดยมีส่วนติดต่อผู้ใช้ (UI) ที่ชื่อว่า Gaia ถ้าเป็นแฟน ๆ ผู้ใช้ Firefox มาก่อนแล้วล่ะก็คงเข้าใจความยืดหยุ่นของ Firefox ที่จะแปะโน้น ย้ายนี้ ทำอะไรก็ได้ ฉันใดก็ฉันนั้น ผู้ผลิตหรือจะเป็นเราก็ทำอะไรกับ Gaia ก็ได้ สามารถเปลี่ยนแปลงส่วนติดต่อผู้ใช้นี้ได้เองตามที่ใจต้องการ

สามารถปรับแต่งได้ตามใจต้องการเช่นหน้าแอพหรือหน้ารับสาย

แล้วแอพฯ ในเครื่องเขียนด้วยภาษาอะไร?

แค่เขียนเว็บเป็นก็สามารถเขียนแอพใน Firefox OS ได้เพราะตัวแอพฯ นั้นเขียนด้วย HTML5 + CSS + JavaScript ได้เลยเหมือนกับ webOS และ Tizen อีกทั้งถ้าต้องการเข้าถึงในส่วนของระบบปฏิบัติการหรือฮาร์ดแวร์ของโทรศัพท์ก็ยังมี WebAPI เป็นตัวกลางที่เชื่อมระหว่างเว็บกับ Native API มาให้ใช้ (อ่าน Introducing WebAPI สำหรับข้อมูลเพิ่มเติม) ผู้พัฒนาแอพจะได้ไม่ต้องมาเสียเวลาในการทำความเข้าใจ Native API อีกต่อนึง แถม WebAPI ตัวนี้ Mozilla ยังพยายามผลักดันเข้า W3C เพื่อให้เป็นมาตรฐานเว็บอีกด้วย

บางคนอาจกังวลว่าขึ้นชื่อว่าเว็บแอพอาจจะต้องต่อเน็ตตลอด แต่ก็ไม่ต้องกังวลไปใน HTML5 ก็มี Application Cache ทำให้เราใช้เว็บแอพในโหมดออฟไลน์ได้

Firefox OS มีชั้นของฮาร์ดแวร์ที่ไม่ซ้บซ้อน เว็บสามารถสื่อสารกับอุปกรณ์ได้โดยตรง

แล้วมือถือตัวจริงล่ะ?

ล่าสุดฝั่งยุโรปอย่างที่เสปนก็ได้รับการเปิดตัวสดๆ ร้อนๆ เมื่อวันที่ 1 กรกฎาคมที่ผ่านมาอย่างเป็นทางการแล้วคือ ZTE Open ในราคา €69 หรือ 2800 บาท ถ้าเทียบเป็นเงินไทย และจะทยอยเปิดตัวอีกหลายประเทศในประเทศยุโรบและอเมริกาใต้

ZTE Open: มือถือสำหรับผู้บริโภคตัวแรกในราคา 2800 บาท ขายวันนี้ที่เสปน

Alcatel One Touch Fire: มีหลายสีให้เลือก มาภายในปีนี้ แต่ยังไม่รู้ว่าจะไปเปิดตัวทีไหน

ส่วนนักพัฒนาชาวไทยถ้าอยากจะลองใช้ ณ ตอนนี้ก็มีมือถือรุ่นนักพัฒนาออกมาอย่าง Keon และ Peak ของ Geeksphone ให้นักพัฒนาที่สนใจกับมันซื้อไปทดสอบและพัฒนแอพกันได้ (มือถือตัวนี้อาจจะค้างหรือเกิดเหตุไม่คาดฝันได้เสมอ เพราะมันไม่ใช่มือถือของผู้บริโภค (consumer))

มีคนไทยสั่งซื้อมาแล้วพร้อมค่าใช้จ่ายทั้งหมด ลองอ่านรีวิวก็ได้ที่ รีวิว Geeksphone Keon

Keon ที่ทางกลุ่ม Mozilla Thailand Community ได้รับมาทดสอบ

โหลดและติดตั้งแอพได้จากไหน?

การใช้งานแอพทำได้อยู่สองทางคือ

Firefox Marketplace: ศูนย์รวมแอพของ Firefox OS หน้าต่างก็ไม่ต่างจากเจ้าอื่นอย่าง iTunes Store กับ Google Play Store ดาวน์โหลดและติดตั้งได้ทันที
Firefox Marketplace ที่นัดพบของนักพัฒนาและผู้ใช้ Firefox OS
Adaptive App Search: แค่ค้นหาจากช่องค้นหาเช่น “ปาล์มมี่” “ผัดไทย” หรือ “พี่มาก” ลงไป Firefox OS ก็จะไปค้นหาเว็บที่มีคำค้นนี้อยู่เช่น เมนูในเว็บอาหาร ร้านอาหารในเว็บของนักชิม ทวีตในทวิตเตอร์ บทความในวิกิพีเดีย เอ็มวีในยูทูบ หรือเพลงใน Grooveshark
ค่อนข้างฉลาด – พอค้นหาคำว่า ผัดไทย มันก็รู้ว่าเป็นอาหารและจะหาเว็บที่เกี่ยวข้องให้

เจาะตลาดกลุ่มไหน?

Firefox OS ไม่ได้เกิดมาเพื่อแข่งกับ Android รุ่นบนๆ หรือ iOS แน่นอน แต่เกิดมาเพื่อโลก (ที่สาม) ที่ยังต้องการสมาร์ทโฟนราคาถูกแค่ไม่กี่พันบาทแต่ก็สามารถทำได้หลาย ๆ อย่างที่สมาร์ทโฟนรุ่นบนทำได้ และดีกว่าฟีเจอร์โฟน โดยมีหัวใจคือเว็บแอพฯ ที่พัฒนาได้ง่ายกว่าและพัฒนารอบเดียวเสร็จ ไม่ยึดติดอยู่กับระบบปฏิบัติการอย่างใดอย่างหนึ่ง เข้าถึงได้ตลอดเวลาที่มีอินเทอร์เน็ต

กับภาษาไทยล่ะ?

เบื้องต้นส่วนติดต่อผู้ใช้สามารถใช้ภาษาไทยและการตัดคำในเบราว์เซอร์ได้ไม่มีปัญหา เพราะตัวเรนเดอร์ก็คือ Gecko อยู่แล้วจึงไม่มีปัญหาภาษาไทยนัก แต่ตอนนี้ตัว Firefox OS ยังไม่สามาถป้อนข้อมูลเป็นภาษาไทยได้ เพราะเรื่องการป้อนข้อมูล (input method) เป็นเรื่องที่ค่อนข้างใหญ่มาก ต้องใช้คนที่มีความรู้ทางด้านนี้เข้ามาช่วยกันคิด ถ้าใครพอจะมีแรงเหลือในเรื่องนี้แนะนำให้เข้ากลุ่ม Mozilla Thailand Community ใน facebook เพื่อมาช่วยกันคิดช่วนกันแก้ไขปัญหาครับ

แหล่งข้อมูลอ้างอิง

โลโก้ Firefox ถูกขัดเกลาใหม่ ให้ต้อนรับกับยุคสมัยที่กำลังจะมาถึง

มิ.ย. 28 2013

Chengings

3 responses

Firefox Logo 2013+: หมาใช้แพนทีนขนข้างหลังจึงเรียบเสมอกัน

โลโก้ Firefox ถูกปรับดีไซน์ครั้งล่าสุดเมื่อปี 2009 ซึ่งนั้นก็ 4 ปีมาแล้ว (ทำไมเวลามันเร็วจัง) ตอนนี้วงรอบของการออกแบบแบบ flat กำลังเป็นเทรนด์ในทศวรรษนี้ โดย 3 บริษัทยักษ์ใหญ่อย่าง Microsoft เป็นผู้เริ่มแนวทางนี้ใน Windows Phone 7 ต่อมาก็เป็น Google ผลิตภัณฑ์ทั้งตัวเว็บและ Android รวมถึง Chrome ที่ถูกปรับโลโก้ตั้งแต่ปี 2011 ก็เป็นแนวทางนี้หมดแล้ว ยักษ์ตัวสุดท้าย ศิลปินเอกผู้ยิ่งผยองอย่าง Apple ก็ล้างไพ่เปลี่ยน UI ของตัวเองทั้งหมดให้เป็น flat ใน iOS7 และ OS X (บางส่วน แต่เชื่อว่ารุ่นถัดๆ ไปจะโดนเปลี่ยนหมด) เพื่อความเป็นอันหนึ่งอันเดียวกันกับผลิตภัณฑ์ของตัวเอง ไม่เยอะเหมือนสมัย Steve Jobs และ Scott Forstall (ผมเกลียดหน้าตาของ Reminder และ Calendar มาก)

ซึ่งใน Firefox OS เองก็ใช้แนวทางนี้มาตั้งแต่ต้นและตอนนี้ทาง Mozilla ก็ให้ความสำคัญกับตัว Firefox OS ค่อนข้างเยอะ จึงไม่แปลกอะไรที่ฝ่าย desktop จะถูกขัดเกลาให้เข้ากับตัว Firefox OS บ้าง

เห็นไหมว่าโลโก้ Firefox ใน Firefox OS 1.0 ก็โดนเปลี่ยนรายละเอียดบางจุดไปแล้ว

โลโก้สมัยปี 2009 เป็นโลโก้ที่ผมว่าค่อนข้างสวยพอตัว แต่ตัวสีและความเข้ากันได้กับไฟล์ SVG (ไฟล์เวกเตอร์แบบเปิด) นั้นค่อนข้างต่ำเพราะว่ามีรายละเอียดที่ค่อนข้างเยอะเกินไป และเรากำลังเข้าสู่ยุคโมบายล์ที่ Mozilla ค่อนข้างให้ความสำคัญ หน้าจอเองมีความหลากหลาย ทางทีมออกแบบเลยตระหนักถึงข้อนี้เลยทำให้มันดูง่ายขึ้นและลดรายละเอียดลงโดยยังคงเอกลักษณ์ไว้เหมือนเดิม โดยโลโก้ยุค 2013+ ก็ถูกปรับตามนี้

เอาการสะท้อนแสงของลูกโลกออก พื้นทวีปมีรายละเอียดเพิ่มขึ้นเช่น หมู่เกาะ ใส่การไล่สีแบบทึม ๆ ลงไป
รายละเอียดตั้งแต่หู แขน ถึงขนหลังหายไปเกือบหมด เปลี่ยนไปใช้การไล่สีแบบง่าย ๆ (สงสัยใช้ครีมนวด 😀 )
หางถูดตัดทอนรายละเอียดลงนิดหน่อย แต่ก็ยังดูเด่นเป็นสง่าเหมือนเดิม

ถ้าเราเก็บรหัสผ่านไว้ในเบราว์เซอร์ มันจะปลอดภัยไหม?

มิ.ย. 27 2013

Chengings

4 responses

พอดีเจอบทความ How Browsers Store Your Passwords (and Why You Shouldn’t Let Them) ที่อธิบายถึงความปลอดภัยของการบันทึกรหัสผ่านไว้ในเบราว์เซอร์ ซึ่งจากการทดลองก็พอสรุปได้ดังนี้ (เฉพาะ Windows)

Chrome 27: [เจาะง่าย] ใช้ API ของ Windows ที่ชื่อว่า CryptProtectData ผู้ใช้ต่างบัญชีจะเข้าถึงไม่ได้แต่ถ้าล็อกออนอยู่แล้วเจอมัลแวร์เข้าไปก็ได้รหัสผ่านมาง่าย ๆ (ในบทความเขียนสคริปต์ python ไม่กี่บรรทัดก็ได้แล้ว)
IE 10: [เจาะง่าย] สถาณการณ์เดียวกันกับ Chrome แค่เขียนสคริปต์ C# ก็เจาะได้แล้ว
Firefox 21: [เจาะยาก] Firefox มีไลบารี่ Network Security Services (NSS) เป็นของตัวเองทำให้เจาะยากขึ้นแต่ก็ยังพอทำได้อยู่ สถานการณ์จะพลิกก็ต่อเมื่อใช้รหัสผ่านหลัก (Master Password) ซึ่งรหัสผ่านหลักจะทำหน้าที่เป็น global salt ทำให้การจะเอารหัสผ่านที่มีรหัสผ่านหลักครอบอีกชั้นหนึ่งนั้นเข้าขั้นยากมาก

ถ้าจะเก็บรหัสผ่านไว้ในเครื่องก็ทำให้แน่ใจว่าเครื่องเราต้องปลอดภัยจากมัลแวร์และไวรัส หรือถ้าเป็นคอมพิวเตอร์ที่คนเข้าถึงได้ง่ายเช่นที่ออฟฟิศ ก็ควรจะตั้งรหัสผ่านในระบบปฏิบัติการด้วย เพราะสคิรปต์แค่ไม่กี่บรรทัดก็สามารถเก็บรหัสผ่านไปได้หมดแล้ว ถ้าใช้ Firefox ก็ตั้งรหัสผ่านหลักด้วยจะทำให้รหัสผ่านที่เก็บไว้นั้นปลอดภัยมาก ๆ หรือถ้าจะไว้ใจ cloud ก็ใช้ตัวจัดการรหัสผ่านอย่าง LastPass หรือ 1Password อาจจะเป็นโปรแกรมจัดเก็บบนเครื่องอย่าง KeePass ก็ได้เช่นกัน

วิธีตั้งค่า https://support.mozilla.org/en-US/kb/use-master-password-protect-stored-logins

แต่สำหรับตัวผมเอง ก็ให้ Firefox จำให้เหมือนกันแต่เป็นพวกเว็บที่ไม่สำคัญ เช่นเว็บข่าว ฯลฯ ถ้าเป็นเว็บที่สำคัญ ๆ อย่างเว็บธนาคาร หรืออีเมล จะไม่ใช้ตัวช่วยเด็ดขาด (หน่วยงานด้านความมั่นคงอย่าง NSA สามารถเข้าถึงข้อมูลเว็บดัง ๆ ได้ตลอดเวลา จะเกิดอะไรขึ้นถ้าเขาขอเข้าเว็บเก็บรหัสผ่าน?) โดยจะมีการสร้างรหัสผ่านที่แตกต่างกันไปแต่ละไซต์ ไม่ยากและง่ายต่อการจำ (ส่วนตัวเชื่อว่าจำบ่อยๆ จะทำให้สมองมีการใช้งานตลอดเวลา) เช่น

เว็บ mhafai ก็ทำรหัสผ่าน 123456@iafahM ซึ่ง 123456 ก็มาจากความยาวตัวอักษรของคำว่า mhafai ใส่อักขระพิเศษอย่าง @ แล้วย้อนคำของคำว่า mhafai เป็น iafahM ใช้ M ใหญ่ในท้ายประโยค ก็ทำให้ได้รหัสผ่านที่มีทั้งอักขระพิเศษ ตัวเลข และตัวพิมพ์เล็กพิมพใหญ่ในรหัสเดียว แถมไม่ยากต่อการจำด้วย อันนี้แค่เป็นแนวทาง (รหัสผ่านผมเองซับซ้อนกว่านี้) ยังมีวิธีคิดได้อีกเยอะครับ เช่นเปลี่ยนจาก @ เป็น * อะไรประมาณนี้ก็ได้

ที่่มา – RaiderSec

Firefox 22 มาพร้อมเทอร์โบ asm.js และคุยกันแบบเห็นหน้าผ่าน WebRTC

มิ.ย. 26 2013

Chengings

1 response

ดาวน์โหลด Firefox 22 ได้ที่

รุ่น Desktop ธรรมดาและรุ่น Android

เจอกันอีกแล้วสำหรับ Firefox รุ่นใหม่ที่ออกทุกๆ 6 สัปดาห์ สำหรับใครที่สงสัยว่าทำไม Firefox ปรับรุ่นบ่อยจัง นั้นก็เพราะว่าเทคโนโลยีด้านเว็บมันมีการเคลื่อนไหวอยู่ตลอดเวลา บางมาตรฐานก็มีการปรับปรุงหรือออกรุ่นใหม่อย่างรวดเร็ว เพราะฉะนั้น Firefox จึงต้องมีความรวดเร็วในการรองรับเทคโนโลยีใหม่ และผลประโยชน์ของการปรับรุ่นบ่อยๆ นั้นก็ส่งผลดีไปถึงผู้ใช้อย่างพวกเราโดยตรง

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

มี asm.js เข้ามา ช่วยประมวลผลจาวาสคริปต์ด้านคณิตศาสตร์ดีขึ้นมาก ๆ และในหลายกรณีก็ทำให้เกมที่ใช้การคำนวณฟิสิกส์เยอะก็เร็วขึ้นเหมือนติดเทอร์โบ เหมือนผลการทดสอบอันนี้ ที่ fps ดีขึ้นมาเกือบติดเพดาน 60 fps ใครอยากลองความเล่นเกมสามมิติผ่านเว็บก็ไปได้ที่ Epic Citadel หรือไม่ก็ BananaBread ที่สามารถเล่นระบบ multiplayer ผ่าน WebRTC ได้อีกด้วย

เพิ่มตัวจัดการ”บริการ”เข้ามา (เช่น Messenger for Firefox) เข้ามาให้แล้ว ช่วยให้เราปรับแต่ง ปิด/เปิด ได้ง่ายขึ้น

ตัดบรรทัดล้นในไฟล์ข้อความเปล่าได้แล้ว

ในการเล่นวิดีโอ/เสียงใน HTML5 สามารถปรับความเร็วในการเล่นได้แล้ว

ส่วนอื่นก็มี

[Windows] ถ้าเราปรับให้ระบบปฏิบัติการแสดงผลตัวอักษรที่ใหญ่ขึ้น Firefox ก็จะสืบทอดค่านั้นมาใช้กับตัวอักษรด้วย
[OS X] มีแถบบอกความคืบหน้าของการดาวน์โหลดใน dock แล้ว
WebGL รองรับ Async Canvas
CSS3 Flexbox ถูกเปิดใช้งานเป็นค่าปริยายแล้ว
Web Notifications API ก็ถูกใส่เข้ามาแล้วเป็นที่เรียบร้อย
มี <data> and <time> ตามมาตรฐาน HTML5
มีตัวตรวจสอบแบบอักษร (Inspector: ดูส่วนประกอบเว็บทั้งหมดได้แค่เพียงคลิกขวา)

ในแอนดรอยด์นอกจากจะคุณสมบัติตามที่ว่ามาข้างบน ที่เพิ่มมาก็มีเรื่องที่แท็บเล็ตขนาดเล็กก็ได้ UI แบบแท็บเล็ตแล้ว

รายละเอียดอื่นๆ สามารถอ่านเพิ่มเติมได้ที่

Inspector: ดูส่วนประกอบเว็บทั้งหมดได้แค่เพียงคลิกขวา

มิ.ย. 19 2013

Chengings

2 responses

Inspector หรือ ตัวตรวจสอบ(หน้าเว็บ) เป็นเครื่องมือพื้นฐานสำหรับการทำเว็บเลยก็ว่าได้ โดยเครื่องตัวนี้เอาไว้จิ้มหาชิ้นส่วนใน HTML ทีเราต้องการจะตรวจสอบว่า กว้าง ยาว สูง มีคุณสมบัติของ CSS อะไรบ้าง และรวมถึงการเพิ่ม/ปรับเปลี่ยน/ลบคุณสมบัตินั้น ๆ ด้วย วิธีเปิดใช้งานนั้นมี 3 วิธี แต่จะแนะนำ 2 วิธีที่ง่ายที่สุดก็คือ

กด Ctrl + Shift + I (ไอ)
คลิกขวาที่หน้าเว็บแล้วกด “ตรวจดูส่วนประกอบ”

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

พอเปิด ตัวตรวจสอบ ปุ๊บมันก็จะมีหน้าตาเป็นอย่างนี้ เราจะเห็นโครงสร้างของ HTML ทั้งหมดเหมือนกับการดูซอร์สโค้ด สมมติว่า ถ้าเราอยากรู้ว่า element ของ h2 มีอะไรบ้างก็แค่ไปดูที่ส่วนของ กฎ (Rules) ก็จะเห็น

มาลองเพิ่มคุณสมบัติ css กันแบบ inline กันหน่อย… ก็ทำได้สด ๆ ดูได้ทันที

ในส่วนของ คำนวณ (Computed) ก็จะเห็นว่า element ที่สืบทอด (inherit) มามีอะไรบ้าง ถ้าเราติ๊กตรงเบราว์เซอร์สไตล์มาก็จะโชว์คุณสมบัติที่เบราว์เซอร์กำหนดมาเป็นค่าเริ่มต้นให้ดูด้วย

(Firefox 22 ขึ้นไป) อันนี้เป็นคุณสมบัติใหม่และเป็นคุณสมบัติที่ชอบมาก ๆ ตามปกติในช่อง กฎ ก็จะมีบอก font-family ว่าใช้ตัวไหนบ้าง แต่เราก็ไม่รู้ว่าเบราว์เซอร์นะมันใช้ฟอนต์อะไรในกรณีที่เรากำหนดฟอนต์หลายตัวและระบบปฏิบัติการมันมีฟอนต์ที่ css กำหนดหรือเปล่า? แต่ใน แบบอักษร สามารถดูได้ว่า element ที่เราจิ้มดูอยู่ใช้ฟอนต์ตระกูลอะไร ถ้ามีการใช้ @font-face ก็จะมีการบอก url และโครงสร้าง css มาให้ดูด้วย มีประโยชน์และดูง่ายมาก ๆ

Box Model ก็เอาไว้ดูว่า element ที่เราจิ้มมี width, height, border, margin และ padding อยู่ที่เท่าไหร่บ้าง

ในกรณีที่เราอยากดูว่า css ในช่วง :hover :focus หรือ :active เนี่ยมันมีคุณสมบัติอะไร เราก็แค่จิ้มที่ป๊อปอัพของ ตัวตรวจสอบ ที่อยู่ด้านบนแล้วเลือกช่วงที่เราอยากตรวจสอบ ที่ผมมักจะเจอบ่อย ๆ ก็เช่น :hover ก็จิ้มเลือกซะ เราก็จะเห็นมันปรากฏที่หน้าเว็บและคอนโซลของ ตัวตรวจสอบ เสมือนเราเอาเมาส์ไปจ่ออยู่ ซึ่งแต่ก่อนผมก็ไม่รู้ว่าจะทำยังไงเพราะเราต้องเอาเมาส์ออกมาดูเลื่อนดูคุณสมบัติในช่อง ไม้บรรทัด แทน แต่มันจะใช้ไม่ได้ในกรณีที่ใช้ javascript ในการจับ event จะใช้วิธีนี้ได้ก็ต่อเมื่อเขียนเป็น pure css เท่านั้น (ผมเพิ่งรู้เมื่อวานจากคนรอบข้างที่ผมเพิ่งแนะนำเครื่องมือพัฒนาเว็บใน Firefox ว่ามันทำอย่างนี้ได้ด้วย)

ขอจบบทความของ ตัวตรวจสอบ ไว้เพียงเท่านี้ ถ้าใครพบเจออะไรแล้วอยากให้เพิ่ม แสดงความคิดเห็นไว้ข้างล่างได้เลยครับ หรือถ้าจะไปเพิ่มข้อมูลภาษาไทยใน Mozilla Developer Network ก็จะยินดีมาก ๆๆๆๆๆ

เปลี่ยน Firefox ให้เป็นตัวอ่าน PDF

มิ.ย. 17 2013

Chengings

No responses yet

เคล็ดลับวันนี้ค่อนข้างง่ายมาก ๆ ในการเปลี่ยน Firefox ให้เป็นตัวอ่าน PDF

สมมติว่าบังเอิญเครื่องที่เราใช้งานอยู่นั้นไม่ได้ติดตั้ง Adobe Reader เอาไว้หรือว่าติดตั้งไม่ได้ แต่พอดีเครื่องนั้นมี Firefox ติดตั้งอยู่ เราก็สามารถทำให้ Firefox นั้นเป็นตัวอ่านไฟล์ PDF ได้โดย

มีไฟล์ PDF อยู่แต่เปิดไม่ได้ ทำไงดี

ก็แค่ลากไฟล์ไปที่ไอคอน PDF ไปที่ Firefox หรือลากลงหน้าต่างของ Firefox ก็ได้

เราก็สามารถเปิดอ่าน PDF ได้แล้ว! แถมอ่านภาษาไทยได้ปกติด้วย

เพียงแค่ใช้ Firefox รุ่นที่ไม่ต่ำกว่า 19 ก็ใช้ได้แล้ว แถมถ้าใครใช้ Chrome อยู่ก็ใช้วิธีนี้ได้เช่นกัน…

ปัน+แนะให้ผู้อื่นรู้:

Like this:

ปัน+แนะให้ผู้อื่นรู้:

Like this:

ปัน+แนะให้ผู้อื่นรู้:

Like this:

ปัน+แนะให้ผู้อื่นรู้:

Like this:

เกริ่น

แล้วแอพฯ ในเครื่องเขียนด้วยภาษาอะไร?

แล้วมือถือตัวจริงล่ะ?

โหลดและติดตั้งแอพได้จากไหน?

เจาะตลาดกลุ่มไหน?

กับภาษาไทยล่ะ?

ปัน+แนะให้ผู้อื่นรู้:

Like this:

ปัน+แนะให้ผู้อื่นรู้:

Like this:

ปัน+แนะให้ผู้อื่นรู้:

Like this:

ปัน+แนะให้ผู้อื่นรู้:

Like this:

ปัน+แนะให้ผู้อื่นรู้:

Like this:

ปัน+แนะให้ผู้อื่นรู้:

Like this: