ใช้ Open Graph ของ facebook ในเว็บตัวเองโดยใช้ readygraph by nandanai

Open Graph เป็น feature ของ facebook ที่ทำให้ผู้ใช้สามารถทำกริยาได้หลายอย่างมากกว่าการกด like ซึ่งอยู่ที่เราจะตั้ง ไม่ว่าจะเป็น listen,cook หรือจะเป็นอะไรก็ได้

โดยเริ่มต้นเราต้องสร้าง application เป็นของตัวเองขึ้นมาก่อน สามารถอ่านขั้นตอนได้ที่ http://blog.levelup.in.th/2012/04/28/%E0%B8%A1%E0%B8%B2%E0%B9%80%E0%B8%9B%E0%B9%87%E0%B8%99-developer-%E0%B8%82%E0%B8%AD%E0%B8%87-facebook-%E0%B8%81%E0%B8%B1%E0%B8%99%E0%B9%80%E0%B8%96%E0%B8%AD%E0%B8%B0/

1. จากนั้นไปที่ http://www.readygraph.com แล้วกด sign in เพื่อเชื่อมต่อกับ facebook ที่เรากำลังล็อคอินอยู่

2. ไปตรงแถบ customize ทำตามขั้นตอนเพื่อเชื่อมต่อกับ app ของเรา

3. ไปที่ connect my own app เพื่อใส่ key ของ app เราตามที่ระบุไว้

4. เราจะสามารถสร้าง action ของเราได้ที่ + New Action ตามภาพ โดยควรใส่เป็นตัวพิมพ์เล็กทั้งหมด

5. จากนั้นไปเพิ่ม action และ object ใน open graph ของ facebook ในหน้า developer ให้เหมือนกับที่เราเพิ่มใน readygraph

6. ถ้าเราทำถูกขั้นตอน จะมี code ขึ้นมาให้เรา copy ไปวางใน code ของเราเพื่อใช้โดยแก้ตามช่อง title ต่างๆ ได้แล้วครับ แต่ถ้าจะให้คนอื่นเห็น action ต้องทำการ submit action ใน opengraph ให้เรียบร้อยด้วย

การปรับเปลี่ยนขนาดของรูปโดยใช้ photoshop by nandanai

ขั้นแรกเปิดโปรแกรม photoshop ขึ้นมาแล้วโยนรูปที่เราจะแก้ไขใส่ลงไปถ้าเป็นไฟล์ .gif ให้แก้นามสกุลไฟล์เป็น .png ก่อน

ถ้าจะเปลี่ยนขนาดของรูปโดยให้รูปนั้นมีลักษณะคงเดิมไม่โดน crop ทิ้ง ให้ไปที่ image->image size หรือกด ctrl+alt+I ก็ได้

โดยจะมีให้ปรับขนาด จะใช้เป็น pixel หรือจะเปลี่ยนไปตาม percent นับจากรูปเดิมก็ได้ ในตัวอย่างจะเปลี่ยนให้อยู่ในขนาด width 200 px height 200 px จากขนาดเดิม 120 x120

ถ้าเราจะเปลี่ยนขนาดรูป โดยที่เราไม่อยากให้รูปที่อยู่ด้านในขยายหรือหดตามให้เราปรับที่ canvas โดยไปที่ image->canvas size หรือกด ctrl+atl+C ก็ได้

โดยจะมีให้ปรับ width กับ height เหมือนเดิม แต่ถ้าเราเลือกขนาดที่เล็กลง อาจมีบางส่วนของภาพหายไป ในตัวอย่างจะปรับรูปจาก 200 x 200 ให้เป็น 150 x150

เมื่อเสร็จแล้วเราก็กด save ออกมาเพื่อนำไปใช้โดยการกด crtl+alt+shift+S หรือกด save for web แล้วเลือกเป็นไฟล์ png-24 ครับ

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

เครื่องมือเขียน blog แบบคนขี้เกียจ by nandanai

การเขียน blog นั้นสิ่งที่มีส่วนให้ผู้อ่านเข้าใจในสิ่งที่เราเขียนง่ายขึ้นก็คือรูปประกอบ

ซึ่งถ้าเราเขียนอะไรซักอย่างซึ่งมีวิธีทำเป็นขั้นตอนนั้น ถ้าไม่มีรูปประกอบนี่คนอ่านอาจจะทำตามขั้นตอนแบบมั่วๆไม่รู้ว่าตัวเองตอนนี้ถึงขั้นไหนแล้วก็เป็นได้

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

ส่วนวิธ๊ capture รูปจากหน้าจอนั้นก็มีหลายวิธี อาจจะกดปุ่ม printscreen หรือจะควักกล้องตัวเองออกมาถ่ายรูป (อันนี้ไม่แนะนำ) ก็เป็นวิธีส่วนหนึ่ง

แต่วันนี้เราจะใช้โปรแกรมที่ชื่อว่า Greenshot ซึ่งหาโหลดได้ที่

http://getgreenshot.org/downloads/

โปรแกรมนี้มี feature ที่มีประโยชน์หลายอย่างเช่น ใช้ capture รูปทั้งหน้าจอ capture เฉพาะส่วนของจอ และยังสามารถนำรูปมาแต่งเพื่อใช้ชี้จุดต่างๆได้ด้วย

เมื่อเราลงโปรแกรมเสร็จแล้ว สามารถเรียกใช้งานได้จาก notification icon ที่อยู่ด้านขวาล่างโดยการคลิกขวาที่ icon Greenshot

คำสั่งหลักๆก็จะมี

Capture region จะเป็นการ capture เฉพาะส่วนพื้นที่ ที่เราลากคลุมไป

Capture last region เป็นการ capture พื้นที่ล่าสุดที่เราใช้ในคำสั่ง Capture region

Capture window เป็นการ captue หน้าต่างที่เราเลือก ในตัวอย่างคือเลือกหน้าต่างของ chrome มา

Capture full screen จะ capture ทั้งหน้าจอมาเลย

4 คำสั่งนี้เป็นการ capture หน้าจอในแบบต่างๆ

ต่อมาเราจะมาแต่งรูปโดยใช้ greenshot โดยเครื่องมือต่างๆจะอยู่แถบซ้าย

ไล่ตามลำดับลงมาจะเป็นเครื่องมือวาดต่างๆ ซึ่งในตัวอย่างจะใช้เครื่องมือวาดรูปสี่เหลี่ยม

เครื่องมือที่น่าสนใจที่อยากแนะนำคือ obfuscate ซึ่งสามารถเบลอภาพเฉพาะส่วนได้

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

ทั้งหมดนี้ก็เป้นเพียงส่วนหนึ่งของโปรแกรม Greenshot ที่เราสามารถนำมาใช้เพื่อช่วยในการเขียน blog แบบง่ายๆกันนะครับ

ที่สำคัญโปรแกรมนี้สามารถใช้ได้ฟรีครับ ใครหาโปรแกรมประเภทนี้อยู่ก็ลองโหลดมาใช้กันได้

การโชว์รูปให้เป็นแบบ slide show โดยใช้ javascript by nandanai

ขั้นแรกเราต้องไปโหลด ไฟล์ .js ที่ชื่อว่า jquery มาก่อน โดยในตัวอย่างนี้จะใช้ jquery-1-4-2.min.js

และในไฟล์ของเราจะเขียนฟังก์ชั่นดังนี้

<script type=”text/javascript”>

var position = 1; // ตำแหน่งของรูปเริ่มต้นว่าจะให้รูปแรกโชว์รูปที่เท่าไร

var count = 3; //จำนวนรูปทั้งหมดที่จะให้โชว์(โชว์ทีละรูปแต่กดเลื่อนไปมา)

function slide_banner(dir) // dir จะเป็นตัวกำหนดว่าเลื่อนไปทางซ้ายหรือขวา( +1 ขวา, -1 ซ้าย)

{

position += dir;

if(position == 0){

position = count;

}

if(position == count+1){

position = 1;

}

$(‘#frame’).stop().animate({marginLeft:-(615*(position-1))+’px’}, 1000); //frame คือ id ของ div ที่ครอบรูปทั้งหมดไว้โดยเลข 615 นั่นคือความกว้างของ div ที่มีรูปหนึ่งรูปนั่นเอง(div ที่อยู่ใน div ที่ครอปรูปทั้งหมด) และเลข 1000 คือเวลาที่ใช้ในการทำ animation จนเสร็จ(ms)

}

</script>

และในไฟล์ .css ของเราจะเป็น

.frame{

height: 76px;

width: 300%; //จำนวน % จะคิดจากจำนวนรูปทั้งหมด x100 ซึ่งในตัวอย่างคือ 3 รูป

}

.frame .image{

height: 76px;

width: 615px;

float: left;

}

แบ่งหน้าที่ยาวๆออกเป็นหลายหน้าด้วย pagination class Codeigniter by nandanai

pagination คือตัวช่วยที่ทำให้เราสามารถแบ่งหน้าที่มีอยู่ออกเป็นหลายๆหน้าโดยจะทำลิ้งค์ให้อัตโนมัติประมาณนี้

< 1 2 3 4 5 >

ส่วนวิธีการใช้เราสามารถเซ็ทค่าผ่าน controller ได้เลยดังนี้

$this->load->library(‘pagination’);

$config['base_url'] = site_url(“test/index/”);   -   url ของหน้าที่เราจะแบ่ง
$config['total_rows'] = 20;   -   จำนวนอะไรบางอย่างทั้งหมดของเราโดยปกติจะใช้การนับจำนวนใน database เอา
$config['per_page'] = 5   -   จำนวนอะไรบางอย่างของเราต่อหนึ่งหน้า ซึ่งจะได้จำนวนหน้าทั้งหมดเท่ากับ total_rows/per_page
$config['uri_segment'] = 3;   -
$this->pagination->initialize($config);

ซึ่งการ config ทั้งหมดจะถูกเก็บไว้ในไฟล์ config/pagination.php

การนำไปใช้ก็ต้องส่งค่าไปที่ view โดยตั้งชื่อตัวแปรไว้ประมาณนี้

$a_data['s_pagination'] = $this->pagination->create_links();

$this->load->view(‘pages/test’, $a_data);

จากนั้นเราจะสามารถใช้ได้โดยเรียกตัวแปร $s_pagination ในส่วนของ html ได้ทันที โดยจะมีจำนวนหน้าตามที่เราเซ็ทไว้

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

ได้โดยการรับไปใน function นั้นๆ ตามปกติดังเช่นตัวอย่าง

function index($page)

{

$this->load->library(‘pagination’);

$config['base_url'] = site_url(“test/index/”);   -   url ของหน้าที่เราจะแบ่ง
$config['total_rows'] = 20;   -   จำนวนอะไรบางอย่างทั้งหมดของเราโดยปกติจะใช้การนับจำนวนใน database เอา
$config['per_page'] = 5   -   จำนวนอะไรบางอย่างของเราต่อหนึ่งหน้า ซึ่งจะได้จำนวนหน้าทั้งหมดเท่ากับ total_rows/per_page
$config['uri_segment'] = 3;   -
$this->pagination->initialize($config);

$a_data['s_pagination'] = $this->pagination->create_links();

$a_data['page'] = $page;

$this->load->view(‘pages/test’, $a_data);

}

ทำให้เราเรียกใช้ตัวแปร $page ในหน้า view ของเราได้ตามนั้น