มาสร้าง Pattern Input คล้ายๆ Android ด้วย jQuery Pattern Input Plug-in

Unknown 13:34 , , ไม่มีความคิดเห็น
jQuery Pattern Input Plug-in เป็น jQuery plug-in เพื่อสร้างหน้าจอป้อนข้อมูลรูปแบบคล้ายๆ หน้าจอ Passcode หรือ Pattern Log Screen ของ Android ในสมาร์ทโฟน แตกต่างเพียงแค่เรานำมาใช้งานบน Browser ปลั๊กอินนี้ไม่จำเป็นต้องมีการใช้งานรูปภาพ หรือ ทรัพยากรอื่นๆเลย (นอกเหนือจาก jQuery) และ CSS Plug-in ตัวนี้เราสามารถนำไปประยุกต์เป็นระบบการตรวจสอบก่อนการเข้าสู่ระบบ (Login) หรือ ใช้ป้องกันสแปม หรือป้องกันข้อมูลอื่นๆ ตามรหัสที่เราตั้งไว้

เบราว์เซอร์ที่รองรับ

Plug-in นี้ใช้ HTML5 Canvas ซึ่งจะไม่รองรับการแสดงผลใน Browser รุ่นเก่า เช่น IE6 - 8 อย่างไรก็ตาม Plug-in นี้มีการกำหนดเป้​​าหมายสำหรับการใช้กับอุปกรณ์ระบบสัมผัสพวก สมาร์ทโฟน และแท็บเล็ต ซึ่งส่วนใหญ่จะรองรับ HTML5 อยู่แล้ว

- IE9, IE10 ที่
- Chrome
- Firefox

การใช้งาน

การใช้งานก็ไม่มีอะไรมากครับ เราสามารถไปดาวน์โหลด Plug-in ตัวนี้ซึ่งจะมีไฟล์ Javascript และ CSS มาให้ก็ทำการ Include เข้าไปใช้ในหน้าของเราได้เลย


$("#patternPanel").patternInput();

จากข้างบนสามารถเรียกใช้งาน jQuery Pattern Input Plug-in แบบง่ายๆได้เลยซึ่งจะเป็นการใช้งานแบบ Default ซึ่งจะกำหนด Pattern ขนาด 3 x 3 มาให้ หากไม่ถูกใจเราสามารถปรับรูปแบบ jQuery Pattern Input Plug-in ได้ตามด้านล่าง

$("#patternPanel").patternInput({
    verticalDots: 4, //จำนวน จุด แนวตั้ง
    horizontalDots: 4, //จำนวน จุด แนวนอน
    width: 400, //ความกว้างของ Pattern
    height: 400, //ความสูงของ Pattern
    autoClear: false //สั่งให้เคลียร์ค่ากรณีลากจุดเสร็จ
});

สำหรับ Event สำหรับ jQuery Pattern Input Plug-in จะมี onChange (เมื่อเปลี่ยนแปลงจุด) และ onFinish (เมื่อลากจุดเสร็จ)

$("#patternPanel").patternInput({
    onChange: function(value) {
        alert("Change: "+value.join(",");
    },
    onFinish: function(value) {
        alert("Finish: "+value.join(",");
    }
});

ส่วน Option และ Method อื่นๆ ก็มีดังนี้

autoClear : boolean //True หรือ False

ถ้า autoClear = true เมื่อผู้ใช้ยกนิ้วออกจากหน้าจอเมื่อลากเสร็จ หน้าจอจะได้รับการล้างค่าทันที หากผิดพลาดข้อมูลจะยังคงอยู่ และจะถูกล้างค่าด้วย Method "Clear" ทันที

width : number

ความกว้างของ Pattern กำหนดเป็นตัวเลข

height : number

ความสูงของ Pattern กำหนดเป็นตัวเลข

border : number

ขนาดของขอบ

verticalDots : number

จำนวนคอลัมน์

horizontalDots : number

จำนวนแถว

dotSize : number

ขนาดของปุ่มกด

innerDotSize : number

ขนาดของปุ่มกด ด้านใน

pathSize : number

ขนาดเส้นที่เชื่อมจุด

pathColor : string

สีเส้นที่เชื่อมจุด

Methods

- clear() : void // ล้างค่าใน Pattern
- getLastSequence() : Array // รับค่าจากการลาก Pattern เป็น Array

เพิ่มเติม https://github.com/panitw/patternInput

ไม่มีความคิดเห็น :

แสดงความคิดเห็น

Lorem Ipsum (ลอเร็มอิปซัม) คืออะไร?

Unknown 13:33 , , ไม่มีความคิดเห็น
สำหรับนักออกแบบเว็บไซต์ นักเขียนบทความ หรืองานด้านสื่อสิ่งพิมพ์ต่างๆ หรือแม้แต่กระทั่งบุคคลทั่วๆไป ต้องเคยผ่านหูผ่านตากันมาบ้างใช่ไหมครับ เรามักจะพบข้อความเหล่านี้บนเว็บไซต์ที่เป็นตัว Demo (ทดสอบ) หรือในแผ่นพับ โบรชัวร์สินค้า การ์ด ต่างๆ เพราะปกติจะมีตัวอย่างบทความเหล่านี้อยู่ เป็น Content หรือ Description คร่าวๆ เพื่อรอบทความจากลูกค้าอีกที เพื่อจะได้ให้เห็นตัวอย่างที่สมจริงประมาณว่า ถ้าหากลูกค้าให้บทความหรือเนื้อหาที่แท้จริงมาแล้วจะแสดงผลยังไง มีลักษณะยังไง ซึ่งจำเป็นต่อการเลือกใช้บริการ หรือรูปแบบลักษณะที่ต้องการ เพื่อให้ตรงความต้องการ และถูกใจลูกค้าเป็นสำคัญ

Lorem Ipsum (ลอเร็มอิปซัม) คืออะไร?

โลเล็มอิปซัม (Lorem Ipsum) เป็นข้อความแทนที่ (placeholder text) ใช้เพื่อลดความสนใจต่อข้อความที่นำมาแสดง สำหรับการแสดงลักษณะของ ฟอนต์ การพิมพ์และการจัดหน้า
ข้อความโลเร็ม อิปซัมเป็นข้อความส่วนหนึ่งในภาษาละตินที่แต่งโดย ซิเซโร โดยมีการตัดต่อคำให้ดูเหมือนเป็นข้อความที่ไม่มีความหมาย และไม่ใช่ภาษาละตินที่ถูกต้อง
ในออกแบบต่างๆ ถ้าข้อความสามารถอ่านได้ ผู้ดูจะสนใจข้อความจนไม่สนใจ การจัดหน้าและรูปแบบ ดังนั้นผู้ออกแบบจึงควรใช้ข้อความโลเร็ม อิปซัมเพื่อให้ผู้ดูสนใจที่การออกแบบไม่ใช่ข้อความ

ทำไมถึงนำมาใช้?

Lorem Ipsum (ลอเร็มอิปซัม) เป็นเนื้อหาที่อ่านไม่รู้เรื่อง (ในที่นี้จะอ่านได้ยาก) ทำให้ผู้อ่านสนใจเฉพาะการออกแบบเลย์เอ้าท์ (Layout) มากกว่า และยังดีกว่าที่จะแทนจุดที่มีตัวหนังสือไปว่า "ตรงนี้มีตัวหนังสือ" จึงแทนที่ด้วยลอเร็มอิปซัมแทน

สำหรับท่านใดสนใจนำบทความ Lorem Ipsum มาใช้งาน สามารถเข้าไปดูได้ที่ http://www.lipsum.com/ หรือ สำหรับภาษาไทยสามารถเข้าไปดูได้ที่ http://th.lipsum.com/

หวังว่าจะมีประโยชน์กับหลายๆท่านนะครับ

ไม่มีความคิดเห็น :

แสดงความคิดเห็น

รู้จักกับ Penguin Google Algorithm

Unknown 13:32 ไม่มีความคิดเห็น
ก่อนจะทำความรู้จักกับเจ้าเพนกวิน หลายคนคงยังอาจจะสงสัย และติดใจกับ แพนด้า ที่แสนน่ารัก ที่ออกกฎให้เราไปวางแผน OnPage และ OffPage กันยกใหญ่ จะยังทำงานกับเราอยู่มั้ย จะช่วยส่งเสริม เว็บดีมีคุณภาพอยู่มั้ย บอกตามตรงว่า น้อง แพนด้า ยังอยู่กับเราครับ ยังทำหน้าที่ คัดกรองเว็บดีมีคุณภาพอยู่เหมือนเดิม อ้าวแล้ว เพนกวินล่ะ มายังไง มาทำอะไร เรามาทำความรู้จักกันเลยครับ

Penguin สายตรวจหน้าใหม่แห่ง Google


ครับอย่างที่ผมบอกครับ Google นั้นไม่ได้ตัดระบบ  Algorithm ของ แพนด้า ไปครับ ( น้องแพนด้าของทุกท่านยังทำงานอยู่เหมือนเดิม ) แต่แพนด้าจะเฉพาะเจาะจงยิ่งขึ้นกว่าเดิม ตรงที่จะรับหน้าที่เฉพาะ On Page อย่างเดียว ส่วนเพนกวิน จะรับหน้าที่สำหรับ Off Page ทั้งหลาย ทั้งปวง พูดกันง่ายๆ คือทำหน้าที่เหมือนกับสายตรวจ การจราจรของ Link  ต่างๆ ที่จะเข้ามาในเว็บว่าเป็นไปอย่างถูกต้อง ขาวสะอาดรึเปล่า

ก็เหมือนกันกับ Panda นี่จะแยกทำไม ?


ใช่ครับจริงๆ แล้วงานเดิมของแพนด้านั้นก็ทำหน้าที่นี้อยู่ด้วย ว่ากันง่ายๆ คือเมื่อก่อน แพนด้า ทำหน้าหี่ดูแลทั้ง On Page และ Off Page ซึ่งก็ทำหน้าที่ได้ดีมาก ตัดเว็บเนื้อหาไร้คุณภาพตกกระป๋องไปตามๆ กัน และในขณะเดียวกันก็ทำให้เว็บที่ดีมีคุณภาพทั้งหลายได้โอกาสที่จะ ยืนหยัดอยู่ในหน้าแรกของ Google กันได้มากขึ้น แต่สาเหตุที่ต้องแยกกันทำงาน ก็เหมือนกับการแบ่งเบาภาระ กันแหละครับ เหมือนกับ แม่ใช้ เราให้ กวาดหน้าบ้าน และ ในบ้าน ให้ดี เราก็ทำได้ แต่ถ้า แม่บอกว่า ให้เรากวาดบ้านนะ ส่วนหน้าบ้านให้ น้องเรากวาด สิ่งที่จะเกิดขึ้นคือ งานเรา ก็จะเบาลง และ หลังจากกวาดเสร็จแล้วเราก็ยังสามารถที่จะมีเวลาตรวจตราให้ดีให้ครบถี่ถ้วนว่ามีผุ่นหลบในซอกในหลืบอะไรมั้ย และที่สำคัญ ทั้งหน้าบ้านและ ในบ้านก็จะสะอาดในเวลาที่เร็วกว่าเดิม นี่ก็เหมือนกันครับ ระบบต่างๆ จะแบ่งแยกกันทำงานที่อย่างละเอียดถี่ถ้วน รอบคอบ และ รวดเร็วยิ่งขึ้น เพราะฉะนั้นหากคุณเป็นคนทีทำเว็บที่มีเนื้อหาของตัวเองไม่ได้ไป Copy ใครมาก็ไม่จำเป็นต้องกลัวในมุมของ Panda เหมือนเดิมแหละครับ

จอมปั่นเว็บระวังตัวให้ดี Penguin มาแล้ว


ลักษณะเว็บที่ Google บอกว่า เว็บจำพวกนี้แหละคือเว็บปั่น (Spin) หรือการทำ Black Hat Webspam ก็จะเป็นเว็บประมาณนี้นะครับ
link spam
ภาพตัวอย่าง Webspam
อย่างที่เห็นนะครับภาพนี้ผมเอามาจาก บล็อคของคุณ Matt Cutts เลยนะครับจะเห็นได้ว่า เว็บตัวอย่างนี้ไม่ได้มีเนื้อหาอะไรเกียวข้องกับ Pay day loan เลย แต่…อย่างที่เห็นครับ บทความในเว็บนี้ดันมี Link คำว่า Pay day loan มาซะอย่างนั้นนี่แหละครับคืองานหลักโดยตรงของ น้องหนู เพนกวิน รับหน้าที่จัดการเว็บพวกนี้โดยเฉพาะ ขาปั่นทั้งหลายน่าจะจำได้ว่าผมเคยเตือนไว้แล้วในบทความที่ว่าด้วยเรื่องของ Back Link และ ผมเข้าใจว่าหลายคนคงเข้าใจว่าคงอีกนานมั้ง กว่าจะมาจับภาษาไทยได้ ไม่ต้องกลัวครับคนไทยได้สิทธิ์นั้นทันที พี่ Matt Cutts บอกไว้แล้วว่า พร้อมใช้กับทุกภาษาทั่วโลกแล้ว (คิดว่าตอนนี้คงโดนกันพอสมควรแล้วมั้งครับ)
สุดท้ายโดยรวม ของสรุปจำพูดฝากเอาไว้ของ พี่ Matt Cutts เค้าขอร้องเราเอาไว้ นะครับว่า  ต้องการคือการจัดอันดับผลการค้นหาที่ดี ที่ตรง กับความต้องการของผู้ใช้งาน หรือผู้ค้นหา ให้ผู้ใช้งานได้บทความ ข้อมูล หรือเว็บไซต์ที่เป็นประโยชน์อย่างแท้จริง Google นั้นต้องการ "Good Guys" หรือคนดี มาทำเว็บไซด์ เนื้อหาคุณภาพดีๆ จริงๆ แล้ว ผมของเสริมคำพูดของคุณ Matt Cutts ซะหน่อยนะครับตรงที่ การต้องคนคนดีมา ทำเว็บที่มีเนื้อหาคุณภาพดีๆ ผมว่าทุกๆ วงการต้องการคนดีอยู่แล้วล่ะครับ และ หากใครตามบทความขอผมก็น่าจะรู้นะครับว่า ผมย้ำอยู่เสมอว่าให้ ยึด พระบัญญัติข้อ 8  ของพระเจ้า หรือ ศีลข้อ 2  ซึ่งตรงกันว่า "อย่าลักทรัพย์" คือ อย่าไปขโมยบทความ หรือเนื้อหาเว็บ ของคนอื่นเค้ามาใช้ ตอนนี้ผมข้อเพิ่มอีกนะครับว่า ให้ยึดพระบัญญัติข้อ 9 หรือ ศีลข้อ 4 ซึ่งก็คือ อย่าเป็นพยานเท็จ หรือ อย่าพูดเท็จ คืออะไร น่ะหรอครับ ก็คือการ ที่คุณมาทำเว็บปลอม Webspam เพื่อทำ Link อันไร้คุณภาพมาหาเว็บคุณไงล่ะครับ ทำเองหรือจ้างทำก็เป็นการหลอกลวง เหมือนกัน ถ้าทำเว็บ และ โปรโมทอย่างขาวสะอาดตามกฏ White hat SEO ล่ะก็ไม่มีอะไรต้องกลัวหรอกครับจริงมั้ย แล้วเจอกันใหม่บทความต่อไปนะครับ

ไม่มีความคิดเห็น :

แสดงความคิดเห็น

สมัครสมาชิก: บทความ ( Atom )