Auto Resize รูปภาพด้วย CSS

ปัจจุบันคนหันมาใช้ tablet, smartphone ท่องเว็บกันเยอะขึ้น บางทีการทำเว็บให้สามารถแสดงผลได้หลากหลายขนาดหน้าจอก็เป็นสิ่งจำเป็น วันนี้มาลองทำ resize รูปเองเวลาหน้าต่าง browser เราเล็กลงด้วย css ตัวอย่าง CSS <style type=”text/css”> img { max-width:100%; } </style> ตัวอย่าง http://demo.il8ze.com/css/auto-resize-photo.html

สร้าง Event เช็ค URL กด Like ของ Facebook

หลังจากบทความที่แล้วได้สร้าง Event เพื่อตรวจจับเมื่อกดปุ่ม Like ของ Facebook กันแล้ว สร้าง Event ให้กับปุ่ม Like ของ Facebook ครั้งนี้จะมาเช็ค URL ที่กด จะมีประโยชน์เมื่อเรานำปุ่ม Like มาใส่หลายปุ่มเป็น dynamic เพื่อไม่ให้ Event ทำงานชนกัน ตัวอย่าง FB.Event.subscribe(‘edge.create’, function(href) { if(href==”http://blog.il8ze.com”) { alert(“user liked blog il8ze”); } else { alert(“user liked other”); } }); ลองเอาไปประยุกค์ใช้งานดูนะครับ

แต่งเว็บให้มีมิติด้วย jQuery zLayer

zLayer เป็น jQuery ที่จะทำให้การออกแบบเว็บมีมิติขึ้น โดยใช้การซ้อน layer ของภาพให้มีการขยับที่มิมิตินั่นเอง ลองดูตัวอย่าง http://www.devinrolsen.com/jquery-zlayers-parallax-plugin/ สิ่งที่จำเป็นต้องใช้งานคือไฟล์จาวาสคริป 2 ไฟล์ คือ jquery และ zlayer โหลดไฟล์ jquery.zlayer.min.js (461bytes) โหลดเสร็จแล้วก็มาเริ่มทำกันเลยครับ เริ่มแรกก็เรียกใช้งานจาวาสคริปก่อนเลยครับ <script src=”http://code.jquery.com/jquery-latest.js”></script> <script type=”text/javascript” src=”js/jquery.zlayer.min.js”></script> เตรียมรูปภาพ ในตัวอย่างผมใช้รูป logo โดยกำหนดขนาดที่ต่างกัน และ ตั้งชื่อ class แตกต่างกันไป <div id=”zLayer”> <img src=”img/logo.png” class=”logoSmall” width=”200″/> <img src=”img/logo.png” class=”logoMedium” width=”300″/> <img src=”img/logo.png” class=”logoLarge”/> </div>   จากนั้นก็มากำหนด css  z-index กำหนด index margin-left กำหนดให้ห่างจากขอบซ้าย margin-top กำหนดให้ห่างจากขอบบน position กำหนดตำแหน่ง [...]

ทำ mod rewrite ใน CodeIgniter

พูดถึง mod rewrite บางคนอาจจะไม่รู้จักมันคืออะไร อยากรู้ละเอียดไป search หาเอานะครับ ผมอธิบายง่ายแบบบ้านๆ mod rewrite คือการสร้าง url ยาวๆมีตัวเลขรหัสอะไรเยอะแยะมากมาย ให้สั้นและกระชับลง ตัวอย่าง Url ที่ไม่ได้ทำ mod rewrite http://blog.il8ze.com/index.php?category=50&topic=145 ตัวอย่าง Url ที่ทำ mod rewrite แล้ว http://blog.il8ze.com/50/145/ http://blog.il8ze.com/php/mod-rewrite/ เห็นได้ว่า Url สั้นลงอย่างเห็นได้ชัด แถมยังทำให้มีผลทาง search engine อีกด้วย   สำหรับทำ mod rewrite ใน CodeIgniter ก็ทำได้ไม่ยากครับ (ในที่นี้ผมใช้ appserv) ซึ่งการทำ mod rewite ต้องอาศัยไฟล์ htaccess ในการจัดการกับ url ครับ เปิด Notepad แล้วใส่โค๊ดข้างล่างนี้ [...]

มาทำความรู้จัก CodeIgniter

คำถามแรกสำหรับคนที่ไม่รู้จักเลยมันคืออะไร ? CodeIgniter เป็น Framework ที่ใช้พัฒนาเว็บนั่นเองครับ หรือว่าง่ายๆมันเป็นตัวช่วยให้เราพัฒนาเว็บได้ง่าย มีประสิทธิภาพมากขึ้น และสามารถทำงานร่วมกันเป็นทีมได้ดีขึ้นครับ ซึ่งผมเองก็เป็นคนที่เขียน php ดิบๆมาก่อนเหมือนกัน แต่พอมารู้จัก CodeIgniter จากพี่คนนึงที่บริษัทผมก็ได้ลองมาศึกษาดู โอ้ว!!! มันช่วยให้เราสร้างเว็บขึ้นมาได้ง่ายขึ้นอย่างเห็นได้ชัด เราจะมาศึกษาไปพร้อมกันครับอาจจะเกิดประโยชน์กับพี่น้องชาวไทย ให้ไม่แพ้ชาติใดในโลก (เว่อๆ) ก่อนอื่นเลยก็เข้าไปโหลด CodeIgniter ที่เว็บ http://codeigniter.com/ เวอร์ชั่นปัจจุบันที่เขียนบทความนี้คือ เวอร์ชั่น 2.0.3 เมื่อแตก zip จะได้ Folder และ ไฟล์ดังนี้ ในไฟล์ที่แตกมาจะมี user guide ให้ด้วยครับ เมื่อเข้าไปรันหน้า index.html แล้วกดที่ปุ่ม TABLE OF CONTENTS บนขวา ก็จะมีหัวข้อให้เราศึกษาเกี่ยววิธีกาติดตั้ง, ตั้งค่า และวิธีการเขียน เมื่อลองรัน index.php ที่แตกมาจะเห็นหน้าตาเริ่มต้นของ CodeIgniter ในที่นี้ผมรันโดยใช้ appserv นะครับ

Auto Resize รูปภาพด้วย CSS

ปัจจุบันคนหันมาใช้ tablet, smartphone ท่องเว็บกันเยอะขึ้น บางทีการทำเว็บให้สามารถแสดงผลได้หลากหลายขนาดหน้าจอก็เป็นสิ่งจำเป็น วันนี้มาลองทำ resize รูปเองเวลาหน้าต่าง browser เราเล็กลงด้วย css ตัวอย่าง CSS <style type=”text/css”> img { max-width:100%; } </style> ตัวอย่าง http://demo.il8ze.com/css/auto-resize-photo.html

ใส่ effect ตัวหนังสือให้งามด้วย CSS3

เดี๋ยวนี้เวลาเข้าเว็บเคยสังเกตรึป่าวครับ แต่ละเว็บมีตัวหนังสือแปลกๆ สวยๆ เยอะแยะเต็มไปหมด มีงงมีเงา ตัวหนา เบลอ มีสีขอบ อะไรประมาณนี้ ทั้งหมดทั้งปวงเป็นความสามารถของ CSS3 ซึ่งจะทำให้ตัวหนังสือสวยงามดั่งใจนึก ง่ายๆเพียงกำหนด style เพียงนิดเดียว ตัวหนังสือของสวยงามเหมือนชาวบ้านแล้ว พระเอกของงานคือ text-shadow  ที่จะกำหนดให้ตัวหนังสือหล่อขึ้นมาได้ สำหรับกำหนดค่าอะไรตรงไหนบ้างดูจากภาพข้างล่างเลยครับ ตัวอย่าง <style type=”text/css”> .effect1{ color: #000; font: 80px Times New Roman, Times, serif; text-shadow: 3px 3px 0 #999; } </script>   <style type=”text/css”> .effect3 { color: #000; font: 80px Times New Roman, Times, serif; text-shadow: [...]

สร้างเว็บอัลบั้มรูปง่ายๆด้วย SimpleViewer Gallery

ในปัจจุบันมีเว็บสร้าง Gallery มากมาย แต่ถ้าเราอยากจะได้ Gallery  สวยๆใส่ในเว็บตัวเองแต่ทำไม่เป็น หรือทำไม่เก่ง ไม่สวยพอ วันนี้ผมเสนอทางเลือกโดยใช้ SimpleViewer ช่วยเสกเว็บอัลบั้มขึ้นมาให้ ไม่ใช่แค่เสกขึ้นมาอย่างเดียว เสริมสวยมาให้เรียบร้อย แถมตั้งค่าได้หลากหลายพอสมควรครับ   ก่อนอื่นต้องโหลดโปรแกรมกันก่อน ที่นี่ >> http://www.simpleviewer.net/downloads/simpleviewer.zip โปรแกรม SimpleViewer จำเป้นต้องใช้ Adobe AIR โหลดได้ที่นี่ http://get.adobe.com/air/ โหลดเสร็จแล้วติดตั้ง Adobe AIR แล้วก็ติดตั้ง svBuilder ที่ได้จากแตกไฟล์ simpleviewer   เมื่อติดตั้งเรียบร้อยหมดแล้วก็เปิดโปรแกรม svBuilder ขึ้นมา ก็จะมีให้เลือกว่าจะสร้าง Gallery ใหม่ หรือ เปิดอันเก่าที่เคยทำไว้แล้ว ในที่นี้เราจะสร้างใหม่ก็กด New Gallery เลยครับ   เมื่อกด New Gallery เข้ามาแล้ว ก็จะมีเมนูให้เราเลือกแบ่งเป็น 3 ส่วนด้วยกัน ส่วนแรก [...]

ล็อกอิน LINE PC ผ่าน QRCode

สำหรับ LINE เวอร์ชั่น PC ที่ช่วยให้สามารถเล่น LINE ในเครื่่องคอมพิวเตอร์ได้ สามารถ login ผ่านการแสกน QRCode จาก iphone ได้โดยที่ไม่ต้องไป Email Registration ของ LIINE ใน iphone สำหรับใครที่ยังไม่เคยใช้ LINE PC Version สามารถเข้าไปโหลดได้ที่นี่ http://line.naver.jp/en/ เปิดโปรแกรม แล้วเข้าไปที่ QRCode Login จะเห็นรูป QRCode เข้าไปที่ Add Friends > QR Code  จากนั้นก็เอากล้องไปส่องที่ QRCode ใน LINE PC  หรือจะเอาจากรูป QRCode ในเครื่องก็ได้ครับ พอแสกน QRCode สำเร็จก็จะขึ้นให้กด login    หลังจากที่กด Login โปรแกรม LINE PC [...]

วิธีแก้ปัญหาอัพเดท LINE แล้วเด้ง ใน iPhone

หลังจากที่ LINE ปล่อยเวอร์ชั่น 2.2.0 ออกมาก็มีคนอัพเดทแล้วใช้งานไม่ได้ เด้งออกตลอด ซึ่งปัญหานี้น่าจะเกิดจากไปปิดการใช้งานในส่วนของ In-App Purchase ไว้ ในส่วนของ Restrictions ทำให้อัพเดท LINE แล้วใช้งานไม่ได้ (  โดยปกติในส่วนของ Restrictions จะปิดใช้งานไว้อยู่แล้ว ) ปัญหานี้ได้วิธีแก้มาจากฝ่าย support ของ LINE เอง วิธีแก้ 1. เข้าไปที่ Setting 2. เลือก General 3. เลือก Restrictions  4. สำหรับคนที่เปิดใช้งาน Restrictions ไว้ให้เปิดใช้งาน In-App Purchases เป็น ON   หรือปิดใช้งาน Restrictions ไปเลยก็ได้ พอเข้า LINE ใช้งานได้แล้วค่อยกลับมาปิดใช้งาน In-App Purchases   เครดิต  Ariya [...]

แก้ไขปุ่ม Home ของ iphone กดติดยาก

สำหรับคนที่ใช้ iPhone, iPad, iPod อาจจะเคยเจอปัญหากดปุ่ม Home ติดยาก ต้องกดหลายครั้ง ย้ำๆๆๆ ลองมาแก้ไขโดยการรีเซ็ตค่าต่างๆปุ่มhome ให้เหมือนแกะกล่องเลยด้วยวิธีง่ายๆ 3 ขั้นตอน วิธีแก้ไข – เปิด app ที่ติดมากับเครื่องในวิดีโอเปิด Weather – กดปิดเครื่อง จนมีคำว่า “Slide to Power off”   – แล้วก็กดปุ่ม Home ค้างไว้จนกว่าจะกลับมาหน้าจอปกติ   ลองเก็บไปใช้งานดูนะครับ