Slider[Style1]

Style2

Style3[OneLeft]

Style3[OneRight]

Style4

Style5[ImagesOnly]

Style6

jQuery Mobile ตอนที่ 1 jQuery Mobile Framework คืออะไร+แนะนำแหล่งเรียนด้วยตัวเอง

jQuery Mobile ตอนที่ 1 jQuery Mobile Framework คืออะไร+แนะนำแหล่งเรียนด้วยตัวเอง

ในช่วง 2-3 ปีหลังมานี้ กระแสเรื่อง Mobile หรืออุปกรณ์โทรศัพท์ Smartphone และ Tablet Phonelet กำลังมาแรง ราคาไม่กี่พัน ก็ซื้อหามาใช้งานได้แล้ว และเพราะตอนนี้มีคนใช้อุปกรณ์จอเล็กๆ แบบนี้มากขึ้น

คนทำเว็บแบบผมก็ต้องปรับตัวให้ทันกระแส จะได้ไม่ตกยุคมากจนเกินไป

แต่เดิมการทำเว้บก็ทำเพื่อหน้าจอคอมพิวเตอร์ปกติ ความละเอียดก็ตั้งแต่ 1024×768 ไล่ไปจนถึงระดับ HD อย่างทุกวันนี้ การเขียนโปรแกรมก็ง่ายขึ้นมากกว่าแต่ก่อน เพราะมีเครื่องมือง่ายๆ แบบ Dreamweaver ให้ใช้ ช่วยประหยัดเวลาเขียนโค้ดได้เยอะ

ทีนี้ผมเอง ถึงจะไม่ได้รับเขียนเว้บเป็นอาชีพหลัก แต่ก้เริ่มสนใจการเขียน web ให้ไปแสดงได้บน smartphone เอามากๆ

จริงๆ แล้วต้องเริ่มจากการเขียน App Android ก่อน ซึ่งผมเองก็ไม่ค่อยมีหัวเรื่อง Java, OOP สักเท่าไหร่ เลยคิดว่าถ้าจะเอาเป็น Native App ก็คงยาก ต้องมาเรียนตั้งแต่เริ่มกว่าจะเสร็จคงนาน

อีกวิธีคือ เปลี่ยนมาใช้ jQuery Mobile Framework

Framework คือ การรวมเอาโค้ด ฟังก์ชั่นต่างๆ ไว้ในที่เดียวกัน เวลาใช้งานก็จัง่ายเพราะไม่ต้องเขียนเอง แต่ต้องเรียนรู้วิธีเรียกใช้อีกทีหนึ่ง

jQuery Mobile คือ การรวมกันระหว่าง HTML CSS Javascript ที่เหมาะกับการทำเว้บบน Mobile โดยเฉพาะ

พอเอา jQuery Mobile + Framework ก็ได้ว่า ชุดคำสั่งสำเร็จรูปสำหรับสร้างเว้บสำหรับอุปกรณ์ Mobile

ข้อดี (เท่าที่รู้ตอนนี้)

– เขียนง่าย เพราะเป้นการเขียนเว็บเหมือนการเขียนเว้บทั่วไป

– ใช้งานกับ Dreamweaver ได้ (แนะนำว่าควรเป้น CS6)

– หลังจากทำเสร็จ ถ้าอยากได้เป้นไฟล์ app เช่น apk ของ android ก็ส่งไฟล์เข้าไปที่ phonegap แล้วจะได้ไฟล์ออกมาเลย (รายละเอีดยลึกๆจะมาเล่ากันทีหลัง)

ข้อเสีย (เปรียบเทียบกับ Native App)

– ทำงานช้ากว่า

ตัวอย่างงาน(กำลังทดสอบ) บน PC

jQuery Mobile ตอนที่ 1 jQuery Mobile Framework คืออะไร+แนะนำแหล่งเรียนด้วยตัวเอง jQuery Mobile ตอนที่ 1 jQuery Mobile Framework คืออะไร+แนะนำแหล่งเรียนด้วยตัวเอง

ตัวอย่างงาน(กำลังทดสอบ) บน Android

jQuery Mobile ตอนที่ 1 jQuery Mobile Framework คืออะไร+แนะนำแหล่งเรียนด้วยตัวเอง jQuery Mobile ตอนที่ 1 jQuery Mobile Framework คืออะไร+แนะนำแหล่งเรียนด้วยตัวเอง

เรื่องความเร็ว ผมลองทดสอบดูแล้ว ใน Mobile จะทำงานช้ากว่า PC อยู่มากโข

และเพราะว่าผมฝึกเอง งมเอง ทำเอง ความรู้ที่ได้เลยไม่ประติดประต่ออะไรมาก แต่ก็พอจะแนะนำให้คนที่เริ่มต้นได้บ้างครับ

แหล่งความรู้ที่ผมแนะนำก็มีตามนี้เลย สำหรับมือใหม่ ที่มีความรู้เรื่องการเขียนโปรแกรม Web มาบ้างแล้ว

1. สร้างเว็บ Mobile Application ด้วย Dreamweaver CS6

เริ่มต้นง่ายๆ ยังไม่ถึงกับเขียนโค้ด แต่เป้นการมองภาพรวมว่า jQuery Mobile และ Dreamweaver ทำอะไรได้บ้าง

jQuery Mobile ตอนที่ 1 jQuery Mobile Framework คืออะไร+แนะนำแหล่งเรียนด้วยตัวเอง

2. แหล่งวิดีโอสอนการใช้งาน jQuery Mobile ภาษาอังกฤษ

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

jQuery Mobile Essential Training

jQuery Mobile Web Applications

Building Android and iOS Apps with Dreamweaver

TutsPlus – Go Portable With jQuery Mobile (Youtube)

TutsPlus – Simple Development with jQuery Mobile

ไฟล์ที่ว่าจะทยอยอัพโหลดไปเรื่อยๆครับ

สำหรับตอนต่อๆไป ผมจะเน้นเทคนิคบางเรื่องของ jQuery ที่ไม่มีในหนังสือครับ

Credit : http://www.daydev.com/2012/jquery-mobile.html

บันทึก vBulletin ตอนที่ 3 การติดตั้ง vBulletin Theme

บันทึก vBulletin ตอนที่ 3 การติดตั้ง vBulletin Theme

วันนี้เป็นเรื่องการติดตั้ง Theme ใน vbulletin ที่จะซับซ้อนกว่าเว็บบอร์ดทั่วไปเล็กน้อยครับ

สมมุติว่ามีไฟล์ theme ที่แตกไฟล์ออกมาแล้ว

ไฟล์และโฟลเดอร์สำคัญคือ
โฟลเดอร์เก็บไฟล์ภาพต่างๆ จะชื่อเดียวกับ theme ในรูปคือ primus
ไฟล์ xml ตัวโครงร่างของ theme เก็บไว้ใน Primus XMLS

บันทึก vBulletin ตอนที่ 3 การติดตั้ง vBulletin Theme

1. อัพโหลดไฟลเดอร์ primus ไปไว้ใน /localhost/images
ก็จะได้เป็น  /localhost/images/primus

บันทึก vBulletin ตอนที่ 3 การติดตั้ง vBulletin Theme
2. เจ้าหน้าหลังบ้าน ไปที่ Styles & Templates >> Download/Upload Styles

บันทึก vBulletin ตอนที่ 3 การติดตั้ง vBulletin Theme

3. ในส่วน Import Style XML File ช่องแรกให้ Browse เลือกไฟล์ xml
ถ้า theme นั้นมีหลายไฟล์ให้อัพโหลดไฟล์ที่ลงท้ายว่า forum.xml ไว้ก่อน
เพราะไฟลืนี้จะเป็นไฟล์พื้นฐานของ theme
และถ้าจะลง theme สีต่างๆ ก็ให้อัพโหลด xml ที่เป้นไฟล์อื่นๆเพิ่มเข้ามาทีหลัง
เสร็จแล้วกด Import

บันทึก vBulletin ตอนที่ 3 การติดตั้ง vBulletin Theme

ถ้าเจอหน้าเว้บแบบนี้ก็แสดงว่าลง Theme เสร็จแล้ว

บันทึก vBulletin ตอนที่ 3 การติดตั้ง vBulletin Theme

4. วิธีการใช้งาน Theme ให้ไปที่ Styles & Templates >> Style Manager
กดเลือกชื่อ Theme ที่จะใช้งานเป็นอันเสร็จครับ

บันทึก vBulletin ตอนที่ 3 การติดตั้ง vBulletin Theme

บันทึก vBulletin ตอนที่ 3 การติดตั้ง vBulletin Theme

Credit : http://www.vbulletin.org/forum/showthread.php?threadid=202933

บันทึก vBulletin ตอนที่ 2 การติดตั้งภาษาไทยใน vBulletin 4.2.0


บันทึก vBulletin ตอนที่ 2 การติดตั้งภาษาไทยใน vBulletin 4.2.0

หลังจากเสร็จเรื่องการติดตั้ง vbulletim 4.2.0 ไปแล้ว ต่อมาก็เรื่องภาษาไทยที่ใช้แสดงผลทั้งหน้าเว้บและหลังบ้าน

ภาษาไทยที่ผมมีตัวนี้แปลข้อความบางส่วนเท่านั้นครับ แล้วก็จำไม่ได้ด้วยว่าไปโหลดมาจากที่ไหน (ใครรู้ที่มาบอกด้วย เพราะผมหาไม่เจอเลย)

>>ดาวน์โหลดไฟล์ภาษาไทยสำหรับ vbulletin 4.2.0 <<

บันทึก vBulletin ตอนที่ 2 การติดตั้งภาษาไทยใน vBulletin 4.2.0

1. เข้าหลังร้าน เมนูซ้ายมือ เข้าไปที่ Language & Phrases >> Download/Upload Languages

บันทึก vBulletin ตอนที่ 2 การติดตั้งภาษาไทยใน vBulletin 4.2.0

2. ทางขวาที่ส่วน Import Language XML File
ช่องแรกให้ browse ไฟล์ .xml ที่ได้จากการแตกไฟล์ของไฟล์ภาษาตาม link ดาวน์โหลดด้านบน

ติ๊กเลือก Ignore Language Version

และกด Import

บันทึก vBulletin ตอนที่ 2 การติดตั้งภาษาไทยใน vBulletin 4.2.0

3. พอลงเสร้จแล้วให้เข้าไปที่ Language & Phrases >> Language Manager
กด Set Default ที่ภาษาไทย

บันทึก vBulletin ตอนที่ 2 การติดตั้งภาษาไทยใน vBulletin 4.2.0

4. ทดลองเข้าหน้าเว็บดูผลที่ได้ ภาษาไทยของ vbulletin ใช้ข้าม theme ได้ครับ ทดสอบแล้วหลายตัว

บันทึก vBulletin ตอนที่ 2 การติดตั้งภาษาไทยใน vBulletin 4.2.0

Credit : http://hot-th.com/thread-986-1-1.html

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

ถ้าพูดถึง Script สำหรับสร้างเว็บบอร์ดแล้ว จะมีทั้งของฟรีและเสียเงิน แต่ส่วนมากจะใช้ของฟรีอย่างเช่น SMF , Discuz กันมากกว่า

แต่สำหรับฝั่งเสียเงิน ที่ผมเห้นหน้าตาบ่อยๆ ก็จะเป้นตัวนี้ vBulletin เว็บดังๆในบ้านเราเช่น notebookspec, jokergame ก็ใช้ตัวนี้กัน

ข้อดี ที่เขาว่ากันคือ คือระบบดีกว่า ความสามารถมากกว่า และราคาที่แพงกว่า ถึงหลักหมื่น

ผมเลยสงสัย อยากจะลองใช้งานดูเริ่มจาก Localhost ก่อน เพราะเว้บจริงยังไม่รู้ว่าจะเอาไปใช้ทำอะไรดี

การติดตั้ง vBulletin 4.2.0
1. แตกไฟล์ zip และอัพโหลดขึ้นเว็บ, สร้าง database เปล่าๆ มา 1 ตัว
ในตัวอย่างผมทดลองบน localhost/vbulletin และใชื่อ db คือ vbulletin

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

2. ไปตั้งค่าในไฟล์ /includes/ config.php.new แล้วแก้ไขค่าตามนี้

$config[‘Database’][‘dbname’] = ‘ ชื่อฐานข้อมูล ‘;
$config[‘MasterServer’][‘username’] = ‘ ชื่อผู้ใช้ phpmyadmin';
$config[‘MasterServer’][‘password’] = ‘ รหัส ‘;

ในตัวอย่างนี้คือ

$config[‘Database’][‘dbname’] = ‘vbulletin';
$config[‘MasterServer’][‘username’] = ‘ root';
$config[‘MasterServer’][‘password’] = ‘1q2w3e4r';

เสร็จแล้ว save และแก้ชื่อไฟล์จาก /includes/ config.php.new ให้เป้น /includes/ config.php

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

3. เปิดเว็บ localhost/vbulletin เริ่มการติดตั้ง กด Begin Install

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

4. เราก็รอไปเรื่อยๆ ระบบจะติดตั้งให้เอง

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

5. ระหว่างที่ติดตั้งจะมีหน้าต่างให้ตั้งค่าตามความต้องการของเราเอง เช่น ชื่อ รหัส ชื่อเว้บ ก็ให้ไปใส่ลงไป

ตั้งชื่อ title เว็บและ url

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

ตั้งค่า cookie ให้กด ok ข้ามไปได้เลย

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

ส่วนสำคัญชื่อและรหัสของ admin

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

รอจนเสร็จครบทุกขั้นตอน (ใช้เวลานานพอสมควร)
จะมี popup แจ้งตามรูป ให้กด go to Admin CP เพื่อเข้าระบบหลังบ้าน

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

แต่พอกดไปแล้วจะเจอหน้าเว็บเตือนว่ามีไฟล์ install ค้างอยู่

ก็ให้กลับไปลบโฟลเดอร์ install ทิ้ง

6. เข้าเว็บ localhost/vbulletin/admincp แล้ว log in ดู

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

ถ้าเข้าถึงหน้าหลังบ้านโดยที่ไม่ติดปัญหาอื่น ก็ถือว่าเรียบร้อย

บันทึก vBulletin ตอนที่ 1 การติดตั้ง vBulletin 4.2.0

Credit : http://hot-th.com/thread-628-1-1.html