Archive for the ‘web 2.0’ Category
CSS Page Break
วันนี้นั่งนึกว่า จะทำยังงัยให้ Print ข้อมูลออกมา โดยแยกเป็นแต่ละหน้าไปเลย
ก้อนั่งจัดอยู่ตั้งนาน เว้นระยะให้มันขึ้นหน้าใหม่ เวลา Print จะได้แยกเป็นแต่ละหน้า แล้วมันก้อไม่ได้ -”-
จนไปเจอ CSS : page-break-after แค่บรรทัดเดียวจบ
<div style=”page-break-after:always;”></div>
หรือจะเขียนแบบ Javascript ก้อ
object.style.pageBreakAfter=”always”
Property Values ยังมีอีกหลายตัว เข้าไปดูที่นี่ได้เลยจ้า http://www.w3schools.com/CSS/pr_print_pageba.asp
Browser VS HTML5
วันนี้มานั่งๆ เล่น HTML 5 เพราะว่าสนใจอยู่ เห็นมีแต่คนติดตามก็เลย เห่อกับเค้าบ้าง ได้มาเล่นในส่วนของ canvas เพราะ ถูกใจเป็นพิเศษ
หลังจากได้นั่งหาๆ ไปพัก ไม่เจอ tutotial ที่ใหน แต่กลับไปเเจอที่ mozzila ซะงั้น โอ้ เทพเจ้าหมาไฟของผมมม
เรื่องราวของ canvas ใน mozzila รู้สึกว่าจะมีมากพักนึงแล้ว ผมเลยกลายเป็นคนยกยุคไปซะอย่างนั้น แต่ก็ยังรู้สึกดีว่า แบบนี้แหละยังมีให้เห็นหน่อย
ล่างๆ ของ content จะมี content นึงชื่อ Drawing Graphics with Canvas เป็นการสอนวาดรูปใน canvas จะได้เขียนเป็น ตอนแรกๆ ก็งง ว่าเราจะเขียนรูปลงไปยังไงหว่า ตอนหลังๆ มารู้ อ่อ มันสร้าง element ไว้แล้วให้ javascript เป็นคนเขียนนี่เอง รู้แล้ว ว่าทำไมต้องมี js engine แรงๆ เพื่อรับมือกับมัน
มีเกมหลายเกมอยู่ที่เขียนขึ้นมาด้วย canvas แล้ว แต่ขอ present game นี้แล้วกัน เพราะสนุกกับมันไปพักนึงเลย นั่นคือ oooze ออกเสียงว่า อูซี่มั้ง เกมง่ายๆ แต่เขียนได้เทพดี เอา code ไปศึกษาได้
หลังจากนั่งๆเขียนอยู่ แล้วก็ศึกษาการวาดรูปไปพลางๆ สังเกตได้ว่า การสาดรูป เหมือนๆ กับ post script มาก และ @mossila ยังบอกอีกว่า มันเหมือน Java QT, c GTK อีกด้วย (เคยเขียนมาแต่ลืมหมดแล้ว ติดใจ post script อย่างเดียว Mr. John เขี้ยวเข็นให้วาดรูป Godzilla ให้ได้)
ลองไปลองมาเลยแอบไปลองกับ Browser อื่นๆ ว่าอะไรรันได้บ้าง คำตอบออกมาง่ายมาก คือ Chrome 4, FF 3.6.3, Safari 4.0.5, Opera 10.53 รันได้ อย่างไม่มีปัญหา มีอยู่อันเดียวยที่มีปัญหาคือ IE 8 เจ้าเดิม (เคยทำอะไรออกมาก่อนโม้บ้างเนี่ย)
speed/validity selectors test for frameworks.
วันนี้มี video ทดสอบ speed ของ google chrome ออกมาว่า google chrome เร็วว่ามันฝรั่งบิน 555 แปลตรงตัวเกินไปแล้ววว
เค้าหมายถึงยิงมันฝรั่งนะ หลายๆ คนคงได้ดูกันแล้ว เป็นการทดสอบที่ถือว่าลงทุนมากพอสมควรเลย เพราะเอาของเร็วๆมาแข่ง เช่น น้ำที่กระฉอกด้วยเสียงจากลำโพง หรือ สายฟ้า (ใครที่ยังไม่ได้ดูก็กดไปดูแล้วกัน)
จากนั้นอ่านไปอ่านมาก็เจอ เค้าเอา java framework มา test กัน ซึ่งเป็นอะไรที่น่าสนใจมาก โดยเค้า test กันที่บทความนี้ google-chrome-javascript-speed-test จะออกแนวแข่งกับ google chrome มากกว่า แต่ที่เราจะ test กันวันนี้ มีถึง 5 Browser ด้วยกันคือ Google Chrome, Firefox, IE, Safari และ Opera
โดย script ที่ใช้งานในครั้งนี้คือ slickspeed เป็นหน้าสำหรับ test framework กันเลยทีเดียว
แค่เพียงรอโหลดหน้าให้เสร็จแล้วกด Start tests แค่นั้นก็ teste กันได้เลยทีเดียว. จากนั้นรอให้ test จนเสร็จ เราก็จะได้เวลารวมของการ test แต่ละ browser ออกมา
ทีนี้ไปดูกราฟของแต่ละ browser กันเลยคร๊าบบบบ
ใน google chrome นั้นไม่เกิด error จากทุกๆ framework เลย
ใน firefox นั้นเกิด 3 error จาก Dojo และ 2 different returned elements
ใน IE 8 นั้น มีปัญหากับ Dojo ทั้งหมด (ใน IE7 ไม่มีปัญหา test ได้)
ใน Opera นั้นเกิด 3 error จาก Dojo และ 2 different returned elements เหมือนกับ Firefox
จากกราฟทั้งหมดก็ถึงช่วงเวลาแห่งการเปรียบเทียบของทุกอันรวมกันผมได้ตามนี้
จากข้อสรูป คือ jQuery และ Dojo นั้นทำง่านได้ดีกว่าในทุกๆ Browser
Dojo ทำงานเร็วกว่า jQuery มากใน Safari และ Opera
Prototype และ YUI ส่วนใหญ่จะช้ากว่า jQuery และ Dojo
จากเวลาโดยรวมแล้ว Google Chrome, Safari และ Opera จะใช้เวลาไกล้เคียงกัน
จากเวลาโดยรวมแล้ว IE ห่วยแตกสุด อีกทั้งยังรัน Dojo ไม่ได้ (อันนี้ไม่รู้ว่าเกิดจากอะไร ขอสืบก่อน)
จากที่สรุปก็ได้ประมาณนี้ล่ะครับ
การทำ Mod Rewrite (url friendly)
Mod_Rewrite คืออะไร?
Mod_Rewrite คือการแปลง URL ที่ดูยากให้อยู่ในรูปแบบที่เราต้องการ เพื่อประโยชน์หลายด้าน (ซึ่งจะกล่าวถึงต่อไป) และการแปลงเพื่อประโยชน์ด้าน SEO ก็เป็นอีกอันนึงที่มีการนำเอา Mod_Rewrite มาใช้ เพราะเรารู้กันดีว่า Search Engine ไม่ค่อยชอบ pages ที่เป็น dynamic ที่มี query string ยาวเฟื๊อย
อ้างถึง
ตัวอย่าง URL ที่ยาว และซับซ้อน
โค้ด:
http://www.site.com/viewcatalog.asp?category=hats&prodID=53
เมื่อผ่านการแปลง เราสามารถทำให้สั้นลงได้ดังนี้
โค้ด:
http://www.site.com/catalog/hats/53/
เริ่มทำ Mod_Rewrite
บาง Server ไม่สามารถจะทำ Mod_Rewrite ได้เนื่องจากไม่ได้ติดตั้ง Module Mod_Rewrite ดังนั้นถ้าเราจำเป็นต้องใช้ Mod_Rewrite ก็ต้องตรวจสอบดีๆก่อนเช่า host
.htaccess ไฟล์สำคัญในการทำ Mod_Rewrite
เราจะใช้ไฟล์นี้ในการกำหนด Rule ของการทำ Mod_Rewrite
เริ่มต้นด้วยคำสั่ง
RewriteEngine on
เพื่อเปิดการทำงาน เขียนไว้ในบรรทัดแรกสุดของไฟล์
ต่อไปจะเป็นการนำเอา Mod_Rewrite ไปให้งาน ซึ่งผมจะเริ่มด้วยตัวอย่างง่ายๆ และเขียน Rewrite Rule ง่ายก่อน แล้วก็ยกตัวอย่างต่อไปเรื่อยๆนะครับ
ใช้ Mod_Rewrite ในการทำ Redirects
ถ้าเราต้องการเปลี่ยน location เก่า ไปที่ Location ใหม่แบบถาวร
RewriteEngine on
RewriteRule ^old\.html$ new.html
ถ้าเราเขียนแบบนี้ เมื่อมีการใส่ url เป็น old.html มันก็จะถูกส่งไปที่ไพล์ new.html แต่ผู้เยี่ยมชมยังเห็น URL บน browser เป็น old.html อยู่เหมือนเดิม
อาจจะดูงงๆ อธิบายเพิ่มเติมดังนี้ RewriteRule จะประกอบด้วยกัน 3 ส่วน
1. Call to action RewriteRule ขึ้นต้นบรรทัด กำหนดว่าบรรทัดนี้เป็น Rewrite Rule
2. Pattern ^old\.html$ เป็นการตรวจสอบ URL ที่ใส่เข้ามาทาง Location Bar ของ Browser ซึ่งจะใช้ regex (Regular Expression) ในการตรวจสอบ (จะอธิบายเพิ่มเติมต่อไป)
3. Rewrite new.html เป็น URL ที่เราต้องการให้แปลงเป็นอันใหม่
หมายเหตุ: จริงๆมี 4 ส่วน แต่ในตัวอย่างเราใช้ 3 ส่วน
ขออธิบายในส่วนที่ 2 (Pattern) เพิ่มเติมดังนี้ ในส่วนนี้ประกอบด้วยเครื่องหมายสำคัญ 3 อย่างคือ
^old\.html$
- เครื่องหมาย The caret หรือ ^ เป็นการกำหนดจุดเริ่มต้น URL ที่อยู่ภายใต้ direcory ปัจจุบันที่เราจะตรวจสอบ ซึ่งก็คือ directory เดียวกับไฟล์ .htaccess
- เครื่องหมาย The dollar sign หรือ $ ซึ่งบอกจุดสิ้นสุดของการตรวจสอบ Pattern
- อีกเครื่องหมายนึงก็คือ The period หรือ . จุด ที่อยู่ข้างหน้านามสกุล html ซึ่งเครื่องหมาย จุด นั้นเป็นอักขระพิเศษ ใน regular expressions ซึ่งจะมีความหมายว่า แทนด้วยตัวอักษรใดๆ 1 ตัว (ดูเพิ่มเติมใน regular expressions ต่อจากนี้) แต่ในนี้เราจะตรวจสอบว่า ถ้า Pattern เป็น old.html หรือไม่ เราจึงต้องใส่ \ ซึ่งเป็น escape charactor ไว้ด้วย
เมื่อเราเขียนตามนี้ เมื่อผู้เยี่ยมชมเว็บกรอกมาเป็น old.html server ก็จะทำ transparently redirect ไปที่ new.html โดยที่ผู้เยี่ยมชมเว็บไม่รู้ตัวว่าเป็นข้อมูลอันใหม่แล้ว เพราะ URL บน browser เป็น old.html อยู่เหมือนเดิม
แต่ถ้าเราต้องการให้ URL ที่ปรากฏบน browser เป็น new.html ด้วย เราก็เพียงแต่เติม [R] เข้าไปต่อท้ายบรรทัด ดังนี้
RewriteRule ^old\.html$ new.html [R]
ซึ่ง [R] ก็คือ ส่วนที่ 4 ที่ผมบอกไว้ข้างบน
4. Command Flag [R] ซึ่งจะเป็นคำสั่งพิเศษกำหนดเงื่อนไขไว้ มีหลายคำสั่งซึ่งจะบอกไว้ตอนท้าย
การใช้ Regular Expressions
จะบอกว่า เป็นส่วนสำคัญที่สุดในการทำ Rewrite และมันก็ทำความความเข้าใจได้ยากพอควร ไม่ต้องห่วงครับ เดี๋ยวผมจะอธิบายเป็นขั้นตอน และยกตัวอย่างประกอบไปเรื่อยๆนะครับ
ตัวอย่างแรก
RewriteRule ^products/([0-9][0-9])/$ productinfo.php?prodID=$1
จะเปลี่ยนจาก
productinfo.php?prodID=11 หรือ productinfo.php?prodID=99
ให้เป็น
products/11/ หรือ products/99/
ดูที่ Pattern จะมีส่วนของที่อยู่ในปีกกาเหลี่ยม [ ] เราเรียกว่า ranges
ในตัวอย่างจะเป็น [0-9] ซึ่งจะใช้ตรวจสอบว่าเป็นตัวอักษรที่อยู่ในช่วง 0-9 ใดๆ
เราสามารถตรวจสอบ ranges อื่นได้ เช่น [A-Z] ตรวจสอบว่าเป็นตัวอักษรตัวใหญ่ตั้งแต่ A-Z
[a-z] ก็เป็นการตรวสอบตัวเล็ก, ถ้า [A-Za-z] ก็ตรวจสอบว่าเป็นทั้งตัวใหญ่และตัวเล็ก เป็นต้น
และใน Pattern ก็จะมีส่วนที่อยู่ในวงเล็บ ( ) เป็นการเก็บค่าที่เราตรวจสอบพบ และตรงตามเงื่อนไข ซึ่งเราสามารถเอาค่านี้ ส่งไปให้ PHP ในส่วนของ Query String ได้ เราเรียกค่าที่ได้จากวงเล็บนี่ว่า back-reference
เราสามารถตรวจสอบและแยก back-reference ออกได้หลายๆอันใน URL อันเดียว (ดูตัวอย่างต่อๆไป) ซึ่ง back-reference ในวงเล็บแรก เวลาเราอ้างถึงเราก็จะใช้ $1 ส่วนลำดับต่อๆไป ก็จะเป็น $2, $3 ไปเรื่อยๆ
ดังนั้นผู้เยี่ยมชมเว็บ(หรือ bot ก็ได้)ก็จะเห็น url เป็น products/11/ หรือ products/99/ ซึ่ง สั้นและกระชับ โดยหารู้ไม่ว่า เราได้ซ่อน URL ที่ไม่ค่อยสวยงามและอ่านยากไว้เบื้องหลัง
ใส่ / ต่อท้าย
บางครั้งผู้เยี่ยมชมเว็บ อาจจะพิมพ์ URL แค่ products/12 ซึ่งเมื่อเข้าไปตรวจสอบใน Pattern ด้านบน ก็จะไม่ตรง เพราะ Pattern ด้านบนจะต้องมี / ต่อท้ายด้วย มันจึงไม่ทำ transparently redirect ให้เรา
เราก็มีวิธีแก้เหตุการณ์แบบนี้ ซึ่งเราก็จะเขียน Rule ใหม่เพิ่มเข้าไปดังนี้
RewriteRule ^products/([0-9][0-9])$ products/$1/ [R]
RewriteRule ^products/([0-9][0-9])/$ productinfo.php?prodID=$1
ดังนั้น เมื่อ Server ตรวจเจอ products/12 ก็จะเปลี่ยน URL เป็น products/12/ และแสดง URL ให้บน Browser ด้วย เพราะเราใส่ [R] ไว้ด้วย เมื่อเจอเงื่อนไขบรรทัดที่ 2 ก็เลยไม่มีปัญหาใดๆ ซึ่งมันก็จะส่งเป็น transparently redirect ไปที่ productinfo.php?prodID=12 ตามความต้องการของเรา
การใช้ Match Quantifiers
จะเป็นว่าตัวอย่างข้างบน เรากำหนดเป็น ^products/([0-9][0-9])$ นั่นหมายความว่า ตัวเลขที่ตามหลัง products/xx ต้องมี 2 ตัวเท่านั้น ซึ่งก็จะเป็นไปได้สูงสุดแค่ 99 แล้วกรณี productinfo.php?prodID=100 ล่ะจะทำอย่างไร?
ในกรณีนี้ เราสามารถใช้ Quantifiers เป็นตัวกำหนดได้ (Quantifiers มีหลายตัว จะอธิบายต่อไปเรื่อยๆ) ดังตัวอย่าง
RewriteRule ^products/([0-9]+)$ products/$1/ [R]
เครื่องหมายบวก + แทนอักษรตั้งแต่ 1 ตัว ถึง n ตัว (ตั้งแต่ 1 ตัวขึ้นไป) ดังนั้น [0-9]+ ก็หมายความว่า เป็นตัวเลข 0-9 ตั้งแต่ 1 หลักขึ้นไป ถ้าเราใส่ products/1 หรือ products/1000 ก็สามารถ Match case นี้ได้แล้วครับ
ข้อมูลเพิ่มเติมของ Rewrite Rule
RewriteRule
Regular expressions
Some hints about the syntax of regular expressions:
Text:
. Any single character
[chars] One of chars
[^chars] None of chars
text1|text2 text1 or text2Quantifiers:
? 0 or 1 of the preceding text
* 0 or N of the preceding text (N > 0)
+ 1 or N of the preceding text (N > 1)Grouping:
(text) Grouping of textAnchors:
^ Start of line anchor
$ End of line anchorEscaping:
\ char escape that particular charPattern Matching metacharacter Definitions
\ Use before any of the following characters to escape or null the meaning or it. \* \. \$ \+ \[ \]
^ Start matching at this point
$ End point of the match
. Any character
[] Starts a range
| Starts alternative match this|that would mean match this or that
() starts a back reference point
? match 0 or 1 time Quantifier
+ match atleast 1 or more times Quantifier
* match 0 to infinite times Quantifier
{} match minimum to maximum Quantifier {0,3} match up to 3 timesRange Definitions []
^ Negates the class. [^A-Z]+ means don?t match any uppercases
\ Use before any of the following characters to escape or null the meaning or it. [\+]+
- Range for matching [0-9]+ [a-zA-Z]+Command Flag
[R] Redirect you can add an =301 or =302 to change the type.
[F] Forces the url to be forbidden. 403 header
[G] Forces the url to be gone 401 header
[L] Last rule. (You should use this on all your rules that don?t link together)
[N] Next round. Rerun the rules again from the start
[C] Chains a rewrite rule together with the next rule.
[T] use T=MIME-type to force the file to be a mime type
[NS] Use if no sub request is requested
[NC] Makes the rule case INsensitive
[QSA] Query String Append use to add to an existing query string
[NE] Turns of normal escapes that are default in the rewriterule
[PT] Pass through to the handler (together with mod alias)
Skip the next rule S=3 skips the next 3 rules
[E] E=var sets an enviromental variable that can be called by other rules?
LINK:
http://www.askapache.com/htaccess/mod_rewrite-tips-and-tricks.html#default-mod-rewrite-hint
QR codes ด้วย Google Chart
Google เองมีบริการและโปรเจคเยอะมากนะครับ Google Chart เองก็เป็นบริการหนึ่งที่ ฟรี อิอิ และใช้งานได้ดีด้วยครับ
Google Chart คือบริการสำหรับสร้างกราฟ ตามชื่อเลยครับ เพียงเราส่ง agument ลงไป ให้ถูกต้องเราก็จะได้เป็น image ที่สวยงามกลับมาเลยทีเดียว ถึงจะไม่หวือหวามากแบบ flash แต่นี่ก็ดีถมไปแล้ว
Chart ที่มีตอนนี้ (Today = 12/5/2552) มีทั้งหมด 9 แบบ นะครับคือ
- Line charts
- Bar charts
- Pie charts Updated!
- Venn diagrams
- Scatter plots
- Radar charts
- Maps
- Google-o-meters
- QR codes
ที่เราจะสนใจวันนี้คือ QR codes ครับผม QR code ก็คือ barcode 2D หรือ barcode 2 มิติ นั่นเอง ซึ่งเริ่มมีการใช้งานมากขึ้นแล้วในไทยด้วย เช่นผมซื้อสินค้า nokia เมื่อวันก่อนเป็นหูฟัง ก็มี barcode แบบนี้อยู่ซึ่งมีนก็มีประโยชน์หลายอย่างเลยทีเดียว
ทีนี้เรามาดูวิธีการสร้าง QR codes barcode 2 มิติ นี้ด้วย google chart กันดีกว่า อย่างแรกเลยคือ Hello World ที่ google chart สร้างไว้เป็นตัวอย่างคือ
http://chart.apis.google.com/chart?chs=150×150&cht=qr&chl=Hello%20world&choe=UTF-8
ถ้าสังเกตุดีๆ ก็ส่ง parameter เข้าไปใน google chart แค่นี้เองก็ได้แล้ว อิอิ
มาดู parameter กันดีกว่าครับ
chs ก็คือ ขนาด ในที่นี้ก็คือ 150 x 150 px
cht ก็คือ รูปแบบกราฟ ในที่นี้คือ qr เพราะเราจะสร้าง QR codes
chl ก็คือ <text to encode> หมายถึงข้อมูลที่จะทำการ encode นั่นเอง
choe ก็คือ <output encoding> เวลาที่ ถอดรหัสออกมาให้เป็น encode แบบใหน จากตัวอย่างคือ UTF-8
ทีนี้ลองนี้บ้างครับ
555 link ของเว็บผมไงล่ะครับ
อ้างอิงจาก http://code.google.com/apis/chart/types.html#qrcodes
