คู่มือ CodeIgniter และ Backbone.js แบบ epub mobi epub

  ช่วงนี้กำลังศึกษา CodeIgniter กับ Backbone.js อยู่ ลองหาหนังสือเพื่ออ่านบน Kindle ก็เจอที่โหลดอยู่สองเว็บใครสนใจลองไปโหลดอ่านดู เป็นคู่มือภาษาอังกฤษ

CodeIgniter User Guide in epub, mobi and PDF format
Backbone Tutorials

สุดท้ายฝากเฟรมเวิร์คอีกอัน ใหม่หน่อย Laravel เพิ่มเจอ อ่านคร่าวๆแล้วน่าสนใจดี แต่ยังไม่ได้ลอง ใครสนใจลองติดตามข้อมูลแบบภาษาไทยได้ที่ laravel.in.th

ทำภาพเคลื่อนไหวแบบโครงกระดูก (2D Skeletal Animation)

 หลายคนคงเคยเห็นภาพเคลื่อนไหวแบบสองมิติ โดยใช้โครงกระดูกเป็นตัวอ้างอิง (2D Skeletal Animation) ตัวอย่างเช่นเกม Ragnarok Battle offline, Crimson Legend
โดยการทำภาพเคลื่อนไหวแบบนี้ จะมีหลักการคือ
1. สร้างชิ้นส่วนของตัวละครแต่ละส่วนแตกเป็นชิ้นส่วนที่เราต้องการให้ขยับได้
2. สร้างโครงสร้างกระดูกที่ต้องการให้ขยับ และออกแบบการเคลื่อนไหว

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

สำหรับเครื่องมือที่ใช้ทำก็เช่น

Spriter Beta

Demina

Pivot Animator

 

Tradnux2dAnimator

 

แสดงภาพหน้าจอของเครื่องที่รัน Android บนจอภาพคอมพิวเตอร์

 ปกติแล้วเวลาที่ต้องการนำเสนอหรือ แสดงภาพหน้าจอของเครื่องที่รัน Android เราสามารถที่จะแสดงผ่านพอร์ตเช่น HDMI ได้ แต่ในกรณีที่เครื่องนั้นไม่มีพอร์ตเชื่อมต่อในการแสดงภาพ หรือต้องการให้เครื่องแสดงภาพบนคอมพิวเตอร์โดยตรง เราต้องมีการใช้โปรแกรมอื่นเข้ามาช่วยด้วย ซึ่งโปรแกรมที่ผมจะนำมาเสนอครั้งนี้ก็คือ

Droid@Screen จับภาพได้ทั้งภาพนิ่ง และภาพต่อเนื่อง
androidscreencast จับภาพนิ่ง วิดีโอ(mov) ควบคุมผ่านคอม(ต้อง root เครื่องก่อน)

โดยทั้งสองโปรแกรมจำเป็นที่จะต้องใช้งานผ่าน adb (Android Debug Bridge) โดยมีขั้นตอนง่ายๆ คือ

เชื่อมต่อตรงผ่าน USB
1.ติดตั้ง Android SDK จาวารันทาม JRE
2.ติดตั้งไดรเวอร์ของเครื่องที่รัน Android
3.ต่อเครื่องทิ้งไว้ทดสอบว่าเชื่อมต่อได้แล้ว โดยใช้คำสั่ง adb devices ผ่าน command prompt ซึ่งถ้าเชื่อมต่อได้ จะมีการแสดงรายชื่อเครื่องที่เชื่อมต่อให้เห็น
4.เปิดโปรแกรม Droid@Screen หรือ Androidscreencast

เชื่อมผ่าน WiFi
1.ติดตั้ง Android SDK จาวารันทาม JRE
2.ทำการ root เครื่องที่รัน Android และติดตั้ง WiFi ADB จาก PlayStore
3.ทำการเปิด WiFi ADB ให้ทำงาน
4.เชื่อมต่อเครื่องโดยพิมพ์คำสั่งตามที่ปรากฏในโปรแกรม WiFi ADB เช่น adb connect 192.168.1.3:5555
5.ต่อเครื่องทิ้งไว้ทดสอบว่าเชื่อมต่อได้แล้ว โดยใช้คำสั่ง adb devices ผ่าน command prompt ซึ่งถ้าเชื่อมต่อได้ จะมีการแสดงรายชื่อเครื่องที่เชื่อมต่อให้เห็น
6.เปิดโปรแกรม Droid@Screen หรือ Androidscreencast

รูปประกอบ เชื่อมต่อผ่าน WiFi ทดสอบผ่าน Samsung Galaxy mini

รูปจากโปรแกรม Droid@Screen

รูปจาก Androidscreencast

หวังว่าโปรแกรมทั้งสองจะเป็นประโยชน์กับผู้ที่สนใจทุกท่านนะครับ

ข้อมูลเครื่อง otpc ที่แจกนักเรียน

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

ลองเล่นเครื่อง otpc

ได้มีโอกาสลองเล่นเครื่อง otpc ซึ่งเป็นเครื่องที่แจกให้ศึกษานิเทศได้ทดสอบใช้งาน ก็เลยขอยืมนำมาทดสอบพอประมาณเพื่อดูขีดจำกัดของมัน เพื่อถ้าใครต้องการเขียนโปรแกรมบนเครื่องนี้ ก็ควรจะได้รู้เอาไว้

ดูภาพถ่ายภายนอกแล้วลองนึกดูว่ามันคืออะไรบ้าง

Fujitsu T4220 มือสอง

   ตั้งแต่ต้นเดือนสิงหาคมที่ผ่านมาที่ได้สั่งซื้อเครื่อง Fujitsu T4220 มือสอง แต่กว่าจะได้ใช้งานจริงๆ ก็ปาเข้าไปเกือบครึ่งเดือน เนื่องจากไปรณีย์ส่งของช้า ติดวันหยุด และเครื่องครั้งแรกที่ได้ ไม่ค่อยสมบูรณ์ในจุดสำคัญที่ต้องการคือ การใช้งานปากกาเขียนหน้าจอ ไม่สามารถเขียนตรงกลางจอภาพได้ จึงส่งเปลี่ยน กว่าจะได้ใช้งานรวมระยะเวลาทั้งหมด 2 อาทิตย์ สำหรับเครื่องซื้อมาจาก eqthailand ในราคา 6150 บาทรวมค่าขนส่ง EMS

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

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

Native Resolution กับ Intel VGA driver

พอดีว่าที่บ้านมีโน๊ตบุค Fujitsu T4220 ( อยู่เครื่องหนึ่งและมักจะมีมีปัญหาเวลาที่ต้องต่อเข้าจอภาพภายนอกผ่าน VGA พอร์ต ก็คือมันไม่เห็นความละเอียดสูงสุดของจอภาพ (Native Resolution) สำหรับจอที่ผมใช้ต่อก็คือ LG FLATRON W1942T ที่มีความละเอียดสูงสุด 1440x900@60Hz แต่เวลาต่อกับเครื่องโน๊ตบุคที่ใช้กราฟฟิกการ์ด GMAX3100 (GM965) กลับเห็นความละเอียดสูงสุดหลายขนาดคือ  1400x1050,1600x1200 ก็พยายามหาวิธีแก้จนไปเจอกับ Intel GFX driver resolution fix ก็เลยถึงบางอ้อ เป็นวิธีแก้ง่ายๆ คือเพิ่มความละเอียดที่ต้องการไปในไฟล์ Setup Information (.inf) โดยไฟล์นี้อาจมีชื่อต่างกันไป ซึ่งในส่วนของผมเองเป็นไดร์เวอร์จากเวอร์ Fujitsu เองก็ไปแก้ที่ไฟล์ชื่อ kit18814.inf

โดยมีข้อสังเกตคือไฟล์นั้นจะมีบรรทัดที่พิมพ์ว่า
[NonEDIDMode_AddSwSettings]

โดยเปลี่ยนจาก
HKR,, TotalDTDCount, %REG_DWORD%, 0
เป็น
HKR,, TotalDTDCount, %REG_DWORD%, 5

เพื่อเปิดใช้งานความละเอียดหน้าจออันที่ 5 ที่เรากำลังจะกำหนดเอง (4 อันแรกมีการกำนดไว้แล้ว) โดยเปลี่ยนบรรทัดที่ห้าเดิมเป็น ความละเอียด 1440x900@60Hz ก็คือ

HKR,, DTD_5,%REG_BINARY%, 97,29,A0,D0,51,84,20,30,50,98,13,00,00,00,00,00,00,1C,37,01   

จากนั้นจึงติดตั้งไดรเวร์ที่แก้ไขไฟล์แล้ว ลงไปใหม่เราก็จะสามารถเลือกความละเอียดที่เราต้องการได้แล้ว

ปล. ควรรู้ว่าหน้าจอของเราความละเอียดสูงสุดเท่าใด ที่ความถี่เท่าใด ก่อนค่า Hex สำหรับความละเอียดต่างๆ นั้น ให้ลองค้นจาก google เองครับ    

แก้ปัญหา FlashDevelop กรณีลง Java SDK หลายเวอร์ชั่น

พอดีใช้ FlashDevelop แต่ในเครื่อลง Java SDK หลายเวอร์ชั่นทำให้มี JRE หลายเวอร์ชั่นตาม แต่ตัวของ FlexSDK นั้นต้องการ JRE 1.6 ในการคอมไพล์ เมื่อเราสั่งให้ FlashDevelop ทำการคอมไพล์โปรแกรมที่เขียนขึ้น ผลลัพธ์ที่ตามมาก็คือ Error !
วิธีแก้
1. ให้ไปแก้ในไฟล์ flexsdk\bin\jvm.config เปลี่ยน java.home=C:\Program Files\Java\jre6 <-- ตำแหน่งที่ติดตั้ง JRE 1.6

2. จากนั้นแก้ปัญหา
Debugger startup error: System.TypeInitializationException: The type initializer for 'net.sf.jni4net.jni.JNI' threw an exception. ---> System.DllNotFoundException: Unable to load DLL 'jvm.dll': The specified module could not be found. (Exception from HRESULT: 0x8007007E) at net.sf.jni4net.jni.JNI.Dll.JNI_GetDefaultJavaVMInitArgs(JavaVMInitArgs* args) at net.sf.jni4net.jni.JNI.Init() at net.sf.jni4net.jni.JNI..cctor() --- End of inner exception stack trace --- at net.sf.jni4net.jni.JNI.CreateJavaVM(JavaVM& jvm, JNIEnv& env, Boolean attachIfExists, String[] options) at net.sf.jni4net.Bridge.CreateJVM() at net.sf.jni4net.Bridge.CreateJVM(BridgeSetup setup) at FlashDebugger.DebuggerManager.Start() [Capturing traces with FDB]

ด้วยการคัดลอกไฟล์ชื่อ msvcr71.dll จาก C:\Program Files\Java\jre6\bin ไปที่โฟลเดอร์ของ FlashDevelop ที่มีไฟล์ FlashDevelop.exe อยู่เป็นอันเสร็จ

ปล.  เท่าที่สังเกต JAVA 1.6 ยังคงนิยมใช้กันมากกว่าเวอร์ชั่นอื่นๆ

Nintendo 3DS ทำไมเราจึงเห็นเป็นภาพสามมิติ ?

หลักการของจอภาพ Nintendo 3DS ซึ่งผลิตขึ้นโดย Sharp จะต่างจากจอปกติตรงที่จอปกติ แสงจะที่ปรากฏจากจอภาพจะพุ่งตรงเข้ามาที่ตาทั้งสองข้างเหมือนกัน แต่จอของ 3DS จะยิงแสงของภาพจากด้านซ้ายเข้าที่ตาขวา และภาพด้านขวาเข้าตาซ้าย เมื่ออยู่ในระยะโฟกัสที่พอดี ซึ่งเป็นลักษณะการมองภาพแบบ Stereographic แต่ผู้มองไม่จำเป็นต้องบังคับให้ตาซ้ายมองภาพขวา ตาขวามองภาพซ้าย แต่จอภาพเป็นตัวจัดการให้แทน ทำให้เราเห็นเกิดเป็นภาพสามมิติขึ้น

ดูวิดีโอประกอบการอธิบาย

แนะนำโปรแกรมฟรี ใช้ทำงานกราฟฟิกของญี่ปุ่น

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

ข้อเสีย

• ตัวโปรแกรมโดยมากมีแต่เวอร์ชั่นภาษาญี่ปุ่น อย่างเดียว
• หลายโปรแกรม มีการอัพเดตช้ามาก (โดยเฉพาะโปรแกรมฟรี)
• ใช้ระบบไฟล์ในการบันทึกงาน ที่เฉพาะตัวทำให้นำไปใช้งานต่อได้ยาก .mqo .mkm .6ks .rok
• คำอธิบาย ตัวช่วย หรือการสนับสนุน เป็นภาษาญี่ปุ่น เป็นส่วนมาก
• บางโปรแกรมไม่อัพเดดจึง ทำงานกับระบบปฏิบัติการรุ่นใหม่ๆไม่ค่อยดี

ข้อดี

• เป็นโปรแกรมฟรีเยอะมาก
• ขนาดเล็ก ทำงานไว
• ใช้ง่าย ถ้าคุณเข้าใจแล้ว
• โปรแกรมที่ขาย ก็ราคาถูก

 โปรแกรมส่วนมากเท่าที่ติดตาม มักจะเริ่มจากโปรแกรมฟรี จนเริ่มเป็นที่นิยมถึงมีเวอร์ชั่นขาย และเวอร์ชั่นภาษาอังกฤษ ส่วนโปรแกรมฟรีเวอร์ชั่นเก่าๆ และโปรแกรมฟรีที่ไม่นิยมเท่าไหร่ ก็มักจะถูกแฟนต่างประเทศที่ชื่นชมนำมาแปล ให้สามารถใช้งานได้เข้าใจขึ้น ดังที่จะแนะนำต่อไปนี้

โปรแกรมทำงาน 2D
ทำ Pixel art
 D-Pixed 
GraphicsGale

วาดภาพปกติ
openCanvas 1.1b72 เป็นเวอร์ชั่นฟรีก่อนที่จะขาย
AzDrawing 2.02 เอาไว้ลงเส้น วาดลายเส้น ขนาดไฟล์ < 1MB
AzPainter 2.12 (JPN)   เอาไว้ลงสีภาพ ขนาดไฟล์ < 1MB
AzPainter 2.12 (ENG)

โปรแกรมอื่นๆ เวอร์ชั่นญี่ปุ่น
Gaim ทำ GIF Animation
ParaFla ทำ Flash
ตัวอย่างการใช้งาน


โปรแกรมทำงาน 3D
Hexagreat 3D 5.25
3DAce 2.72
Cube Kingdom 2.0 
MetasequoiaLE R2.4a (เวอร์ขายอัพเดตใหญ่ ล่าสุดปี 2012 จาก 12ปีที่แล้ว :o )
Mikoto

สำหรับโปรแกรมที่ขายลองดูรายชื่อและการแนะนำทางนี้

ลดความร้อนให้ Acer AO 522 C58KK/8010

ผ่านมาแล้วหนึ่งปีกับ Acer AO 522 C58KK/8010 (รีวิวเก่า) นับว่าทนทีเดียวกับการใช้งานเพราะมันยังไม่พัง โดยสรุปแล้วข้อดีข้อเสียก็ดังนี้

ข้อดี

• แบตยังดีอยู่ใช้งานได้เกิน 6 ชั่วโมง เสื่อม 19% (Wear level)
•  ใช้งานได้ปกติ

ข้อเสีย

• ร้อน
• ศูนย์บริการ (เชียงใหม่) ไม่ค่อยดีเท่าไหร่ เคยเอาเข้าศูนย์เพราะปัญหา เกิด Flickering บนจอ กลับมาแล้วมีขนตาตกอยู่ในจอภาพด้านใน (ไม่รู้ว่าจากจีนหรือ เชียงใหม่แน่) จากนั้นก็ถอดเอาออก แล้วประกอบเองไม่เคยเอาเข้าศูนย์อีกเลย
• ปัญหาเกิด Flickering หรือ Noise บนจอ (FAQ จาก ACER) ปัญหาที่เขาว่าเกิดจากการ Sync ระหว่าง จอภาพ LCD กับการ์ดจอ ที่อาจเหลื่อมกันทางเวลา แก้ได้โดยใช้ Driver ใหม่ๆ อัพไบออสใหม่ ตอนนี้ไม่เจออีกเลย ถ้ารู้ตั้งแต่แรกคงไม่เอาเข้าศูนย์ 

สรุปก็คือปัญหาเหลือแต่มันร้อนเวลาใช้งาน ซึ่งตัวผมเองแก้ตามนี้คือ แกะเครื่อง ทำความสะอาด เพิ่มซิลิโคนเชื่อม thermal pad แล้วใช้ BrazosTweaker กดแรงดันไฟเลี้ยง CPU ให้ต่ำลง

ผลที่ได้ลองดูตามภาพ

แกะเครื่องไปถึงข้างใน ฝุ่นเพียบ

หนังสือฟรีจากไมโครซอฟท์ มีทั้ง pdf,epub,mobi

ไมโครซอฟท์ใจดีแจกหนังสือฟรี   ได้แก่ Deploying Windows 7, Windows Phone 7 (2010), Visual Studio 2010, Windows Server 2008 R2, SQL Server 2012, SQL Server 2008 R2, Virtualization Solutions,  Office 2010  และ Office 365 สามารถตามไปโหลดและอ่านได้ฟรีแล้ว ตามลิงค์นี้ Free ebooks: Great content from Microsoft Press that won’t cost you a penny

Framework and tool for flash game

 แนะนำเกี่ยวกับเฟรมเวิร์ค และเครื่องมือสำหรับการสร้างเกมบน Flash Platform ซึ่งจะแนะนำเฉพาะที่ผมเคยใช้งานนะครับ
 เฟรมเวิร์ค
 FlashPunk เฟรมเวิร์คในการสร้างเกมเรียนรู้ง่าย มีบทเรียนสอนการใช้งานที่เข้าใจง่าย เขียนลง AIR รันบน android ได้ดี
Starling เฟรมเวิร์คสร้างเกมที่ทำงานบน Molehill (Stage 3D) ของ Flash 11 เขียนง่าย ทำงานเร็วถ้ากราฟิคการ์ดสนับสนุน และยังใช้เขียน Angrybird บน Flash อีกด้วย

เครื่องมือ
Alferd Spritesheet Unpacker เครื่องที่เหมาะสำหรับ ถอด Spritesheet อันใหญ่ๆ ออกมาเป็นชิ้นๆ เหมาะสำหรับ ผู้ที่ต้องการดู หรือใช้ Spritesheet ของผู้อื่นเป็นแบบ
TexturePacker ตรงข้ามกับเครื่องมือด้านบน คือ ประกอบภาพเล็กที่ต้องการใช้หลายๆ ภาพให้เป็นภาพเดียว
Sound and Music Tool เครื่องมือทำเสียงประกอบ สำหรับเกม (รันโปรแกรมบน windows 7 ได้บ้างเป็นบางเครื่อง ไม่ทราบสาเหตุ)

Inkscape 0.48.2 บั๊ก บันทึกไฟล์ไม่ได้

 เรื่องตลกของบั๊กใน Inkscape 0.48.2 ซึ่งอาจจะดูไม่ตลกถ้าเจอกับตัว เพราะมันคาดไม่ถึงจริง เรื่องของเรื่องคือ เวลาออกแบบงานโดยใช้ Inkscape บางครั้ง รีบๆอยู่ ก็จะบันทึกไฟล์ลง ไดร์ที่เก็บงานเลย (รูทไดเรกเทอรี D:\ ,E:\) ไม่ได้บันทึกแยกลง โฟลเดอร์หรือไดเรกเทอรี ซึ่งถ้าบันทึกไปแล้วและโปรแกรมมันจำตำแหน่งเก็บงานเอาไว้ บั๊กเกิดทันทีครับ คือ

• ถ้าเปิดไฟล์ในรูทไดเรกเทอรี จะบันทึกเป็นชื่ออื่นไม่ได้ (Save as) ไม่ได้
• ถ้าโปรแกรมจำตำหน่งงานเดิม(รูทไดเรกเทอรี่) สร้างงานมาใหม่มาก็บันทึก (Save) ไม่ได้ 

 วิธีแก้

• ถ้างานอยู่ใน รูทไดเรกเทอรี ย้ายเข้าโฟลเดอร์หรือไดเรกเทอรี ก่อนเปิดใช้งาน
• ถ้าทำงานอยู่แล้วบันทึกไม่ได้ หาไฟล์เก่าที่อยู่ในโฟลเดอร์หรือไดเรกเทอรีเปิดขึ้นมา คัดลอกภาพที่สร้างขึ้น มายังไฟล์นี้แล้วบันทึก
• อย่าบันทึกไฟล์ลง รูทไดเรกเทอรีของไดร์ต่างๆอีก

ปล
ตอนแรกนึกว่าเป็นที่เครื่อง ลงใหม่หลายรอบ จนค้นไปเจอว่าฝรั่งก็เจอเหมือนกัน มันเป็นบั๊ก รอแก้ในเวอร์ชั่น 0.48.3 (ออกปีเนี้ย ไม่รู้เมื่อไหร่)

ทดสอบเล็กๆ กับ Backbone.js

   บทความนี้ มีต้นแบบมาจากวีดีสอนการใช้งาน Backbone ของ PeepCode โดยนำมาปรับแต่งให้เข้าใจง่ายที่สุด ตามความเข้าใจของผู้เขียนบทความเอง

ถ้าพูดถึงความแตกต่างระหว่าง Pure JQuery Apps กับ Backbone Apps

JQuery

ส่วนของข้อมูล และส่วนแสดงผลอยู่ปะปนกัน

งานหลายอย่างที่ต้องทำเกี่ยวข้องกับการจัดการกับ DOM

Backbone

ผู้ใช้เป็นผู้ปรับปรุงข้อมูล (Data) เช่น เพิ่ม ลบ แก้ไข

ส่วนแสดงผล (Views) ปรับปรุงการแสดงผลเอง ตามข้อมูล (Data-Driven)

การเรียกใช้ Backbone

เตรียมพร้อมเรียกใช้ JavaScript ไลบรารี underscore, jquery , backbone

<script src=" jquery-1.5.1.min.js"></script>
<script src=" underscore.js"></script>
<script src=" backbone.js"></script>

พื้นฐานการใช้งาน jQuery ตอนที่ 5 AJAX

ใช้งาน AJAX
การตั้งค่าใช้งานทั่วไปที่มักใช้บ่อยสำหรับการใช้งาน $.ajax()
    data บอกว่าข้อมูลที่ส่งเป็นแบบไหนเช่น query string (key1=val1&key2=val2) หรือ JSON ({"key1":"val1","key2":"val2"})
    dataFilter(data,type) กรองข้อมูลที่ได้รับ
    dataType บอกชนิดข้อมูลที่ต้องการจากการร้องขอเช่น xml html script json jsonp text
    error(XMLHttpRequest, textStatus, errorThrow) เรียกเมื่อเกิดข้อผิพลาด
    success(data, textStatus, XMLHttpRequest) เรียกเมื่อทำสำเร็จ
    type ชนิดการร้องขอ ปกติคือ GET
    url ตำแหน่งที่ต้องการส่ง

ใช้งานพื้นฐาน
$.ajax({
    "type":"POST",
    "url":"jq.php",
    "data":"var1=var1&var2=var2",
    "success":function(data){
        $("#p1")
        .css("background","gold")
        .html(data);
    }   
});

พื้นฐานการใช้งาน jQuery ตอนที่ 4 effect,event,methode

ทำให้เคลื่อนไหว และใส่เอฟเฟค
แสดงและซ่อน ส่วนที่เลือก
$("p").show();
$("p").hide();

หน่วงเวลา และ callback
$("p").hide(2000,function(){
$(this).show(2000)
})

ทำการเลือนภาพ
$("p").fadeOut(2000,function(){
    console.log("Fade Out")
}).fadeIn(2000,function(){
    console.log("Fade In")
});

$("p").fadeTo(2000,0.5,function(){
    console.log("Fade To 50% ")
});

พื้นฐานการใช้งาน jQuery ตอนที่ 3 สร้าง DOM

สร้างส่วนของ DOM ขึ้นมาใหม่
แบบที่ 1 สร้างง่ายๆโดยสร้าง tag ส่วนที่ต้องการ
    $("<p>");
    $('<p class="blue">New Paragraph</p>')
แบบที่ 2 สร้างโดยผ่านตัวแปร JSON
    $("<p>",{
        "class":"blue",
        "text":"New Paragraph"
});

ใส่ส่วนที่สร้างขึ้นลงใน DOM ส่วนที่เลือก
ใส่ตรง ๆ ให้ส่วนที่เลือก
$('#p4').append('New text');   
$('#p4').prepend('<span class="blue">New span</span>');
$('<span class="blue">New span</span>').prependTo("#p1");
$('<span class="blue">New span</span>').appendTo("#p1");

นำส่วนที่สร้างไว้แล้วมาใส่ให้ส่วนที่เลือก
var el1 = $('<p class="blue">New Paragraph</p>');
var el2 = $("<p>",{"class":"blue","text":"New Paragraph"});

$("#next").append(el1);
$("#next").append(el2);

el1.prependTo("#child");
el2.appendTo("#child");

พื้นฐานการใช้งาน jQuery ตอนที่ 2 คำสั่งพื้นฐาน

การใช้งานพื้นฐานคำสั่ง
เมื่อเลือกส่วนที่ต้องการแล้ว การทำงานจะทำตามคำสั่งจะเป็นลูกโซ่ ถัดต่อไปเรื่อยๆ เช่น
$("p").addClass("box").text("Hello World").appendTo("body");
การใช้งาน jQuery นั้นสามารถทำได้คือ
•    เลือกส่วนต่างๆ (DOM) ในหน้า HTML
•    ท่องเข้าไปใน DOM และแก้ไข
•    จัดการ event เช่น click , mouse-over
•    เข้าถึงคุณสมบัติ(attribute,css styling) ในส่วนต่างๆ และแก้ไขเปลี่ยนแปลง
•    เพิ่มความหน้าสนใจ การเคลื่อนไหวและเอฟเฟค
•    ควบคุม AJAX เบื้องต้น

ท่องไปใน DOM ผ่านคำสั่ง
เลือกตามลำดับ
$("p").eq(1);

พื้นฐานการใช้งาน jQuery ตอนที่ 1 การเลือก Selector

  การเรียกใช้ jquery เริ่มจากเรียกผ่านการใช้เครื่องหมาย $ เพื่อเลือก ส่วนต่างๆบนหน้าเอกสาร HTML หรือคุณสมบัติต่างๆ แล้วจัดการผ่านทางแมธอดที่มีมาให้ใช้ สำหรับการวิธีการศึกษาเบื้องต้น สามารถทำได้โดยเขียนไฟล์ HTML ที่เรียกใช้งานไลบรารี jQuery และพิมพ์คำสั่งทดสอบผ่านทาง console ของเบราเซอร์ ถ้า Firefox ใช้ firebug หรือ Opera ผ่าน develop tool ที่เรียกว่า Opera Dragonfly
  ในบทความนี้ผมใช้คำว่า “ส่วนที่เลือก” ซึ่งมาจากคำว่า Selector แทนที่จะให้คำว่าเลือกแท็ก(tag) เนื่องจากการให้ jQuery นั้นสามารถเลือกส่วนที่ต้องการทำงานด้วย ได้หลายแบบทั้ง HTML tag, css, properties และอื่นๆอีก
การเรียกใช้ jquery
วีธีที่ 1 เรียกใช้งาน jquery ในบรรทัดของโค้ด (inline code)
<!doctype html>
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>     
    <script src="jquery-1.5.1.min.js"></script>   
  </head>
  <body>
        <p onclick="$(this).hide();">Hello</p>     
  </body>
</html>

วีธีที่ 2 เรียกใช้งาน jquery จากไฟล์ภายนอก
<!doctype html>
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>     
   
  </head>
  <body>
        <p>Hello World</p>
  </body>
<script src="jquery-1.5.1.min.js"></script>    
<script src="myCodeHere.js"></script>    
</html>

การเลือกส่วนต่างๆ (DOM) บนหน้าเอกสาร HTML

Color e-Reader

  หลังจากที่งาน CES ตั้งแต่ปี 2010 ที่มีการเปิดตัวเทคโนโลยีจอภาพสำหรับเครื่องอ่านหนังสือ ซึ่งมีเทคโนโลยีตัวหลักๆจากสองบริษัทใหญ่ คือ Qualcomm และ Eink ประมาณต้นปีที่ผ่านมานี้เทคโนโลยีที่ว่าก็เริ่มถูกนำมาจำหน่ายเป็นผลิตภัณฑ์ในตลาด ซึ่งก็ได้รับความสนใจจากคนที่ชอบอ่านหนังสือ รวมถึงผู้สนใจเทคโนโลยีใหม่ๆเป็นจำนวนมาก ดังนั้นบทความนี้ก็ขออธิบายคร่าวๆ ไว้ให้กับผู้อ่านที่สนใจดังต่อไปนี้ครับ
  จอภาพ Mirasol จาก Qualcomm ให้เทคโนโลยี MEMs ในการบังคับแสง ให้สะท้อนแสงที่มากระทบบนจอภาพ โดยมีส่วนบังคับการสะท้อน แสงสามสี R G B เป็นหนึ่ง Pixel หรือจุดภาพ ลองดูจากวิดีโอ สำหรับการทำงาน

สำหรับเทคโนโลยี MEMS "Micro-Electro-Mechanical System" ที่ถูกใช้ใน Mirasol นั้นกล่าวให้เข้าใจง่าย ก็คืออุปกรณ์ขนาดเล็กที่สามารถบังคับการเคลื่อนไหว ด้วยไฟฟ้า และถ้าถามว่าเล็กขนาดไหนประมาณ 1-100 micron ซึ่งสามารถทำได้เล็กกว่าเส้นผมอีก( เส้นผมปกติ > 60 micron  ) สำหรับผู้ที่สนใจเทคโนโลยีนี้ก็ลองตามไปดูในวีดีโอนี้ Introduction to MEMS "Micro-Electro-Mechanical System"

  สำหรับเครื่องที่ให้เทคโนโลยีจอภาพ Mirasol ที่ขายในปัจจุบันนี้ก็คือ KYOBO eReader ดูภาพการใช้งานตามวิดีโอครับ

โดยส่วนตัวแล้วผมคิดว่า มันก็คือ Android 2.3 ที่มีความพิเศษคือจอ Mirasol ครับ นอกเหนือจากนั้น ก็คือมีโปรแกรมที่แถมมาให้ ดังนั้นต้องดูของจริง หรือจับตัวเป็นๆกันก่อน ถึงจะบอกได้ถึงความต่าง แต่สังเกตเห็นอย่างหนึ่งคือ ส่วนกรอบที่ครอบจอมีความมันเงามาก ทำให้สะท้อนแสงมากถ้าตั้งฉากกับแหล่งกำเนิดแสง

แก้ปัญหา Kindle รีสตาร์ทไม่หยุด

สำหรับใครที่ใช้ Kindle แล้ว เกิดปัญหา Kindle รีสตาร์ทไม่หยุด ให้ลองแก้ปัญหาตามนี้ ก่อนที่จะเอาไปเคลม เพื่อหายครับ ทั้งหมดรวบรวมมาจากอินเตอร์เนตและ ประสบการส่วนตัว

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

  สำหรับปัจจุบันที่บ้านมีเครื่อง Kindle ทั้งหมด 5 เครื่องแบ่งกันใช้ในบ้านคือ KindleDx,Kindle 3G,Kindle 3 WiFi สามเครื่อง ดังนั้นถ้ามีข้อสงสัยอะไรฝากคำถามได้คับ

ถ่าน แบตเตอรี่ (Battery)

  เคยสงสัยกันไหมครับว่า ถ่านหรือแบตเตอรี่ ที่เราใช้กันและมักเรียกลักษณะนามของมันว่า "ก้อน" นั้นมันมีขนาดตามมาตรฐานกี่แบบ และเลขหรือรหัสที่ติดอยู่บน ตัวถังนั้นมันคืออะไร วันนี้ก็หาลิงค์มาฝาก ก็ลองเอาไปเปิดดูเป็นความรู้ กันนะครับ
  ตารางขนาดแบตเตอรี่ จาก Wiki
  Lithium battery

ส่วนภาพต่อไปนี้ คือตัวอย่างของแบตเตอรี่กระดุม ที่อยู่บน Mainboard คอมพิวเตอร์ เรียกติดปากว่า "ถ่านไบออส"

และถ่านกระดุมอีกแบบที่อยู่ในนาฬิกา Casio



ความแตกต่างของถ่านทั้งสองก้อนนี้ เราสามารถบอกได้โดยการอ่านรหัสที่อยู่บนตัวถ่าน คือ
  รหัสตัวอักษรสองตัวแรก XXXXXX คือชนิดของสารที่อยู่ในตัวถ่าน
  BR = Li-(CF)_x
  CR = Li-MnO₂
  รหัสตัวอักษรสองตัวกลาง XXXXXX คือขนาดเส้นผ่านศูนย์กลาง * 1.0 มิลลิเมตร
  รหัสตัวอักษรสองตัวกลาง XXXXXX คือความสูงหรือความหนาของถ่าน * 0.1 มิลลิเมตร
 
  ดังนั้น CR2032 คือแบตเตอรี่ที่ผลิตด้วย Li-MnO₂  เส้นผ่านศูนย์กลาง 20 มิลลิเมตร หนา 3.2 มิลลิเมตร แบตเตอรี่แบบนี้นิยมใช้ในงานทั่วไป (80% ของตลาด) เพราะใช้วัสดุผลิตที่ไม่แพง
  ส่วน BR2020 คือแบตเตอรี่ที่ผลิตด้วย Li-(CF)_x เส้นผ่านศูนย์กลาง 20 มิลลิเมตร หนา 2.0 มิลลิเมตร นิยมใช้ในงานเป็นแหล่งจ่ายพลังงานให้อุปกรณ์ บันทึกข้อมูลและนาฬิกา รวมถึงใช้ในอุปกรณ์ด้านการทหาร อายุการใช้งาน 7 ปี