Google Maps Image APIs คือบริการสร้างรูปภาพแผนที่จากตำแหน่ง Latitude และ Longitude ที่เราส่งเข้าไปใน API เราสามารถกำหนดขนาดของรูปภาพ ระยะการ Zoom ได้ ใส่ Marker เข้าไปเองได้ นอกจากนั้น ยังสามารถแสดงมุมของของแผนที่ในแบบ Street View ได้อีกด้วย ข้อดีของ Google Maps Image APIs คือ เราสามารถ save รูปภาพที่ได้จากการเรียกใช้ API แล้วนำมาวางไว้บน Server ของเราเอง ทำให้สามารถแสดงผลได้รวดเร็วกว่าการใช้ Google Maps แบบปกติ แต่ข้อเสียก็คือ ไม่สามารถ Zoom หรือโต้ตอบใดๆกับแผนที่ได้ เนื่องจากแผนที่ที่เราจะได้ออกมาจะเป็นเพียงรูปภาพธรรมดาเท่านั้น แต่สำหรับผู้ที่ต้องการเพียงแค่แสดงภาพแผนที่ เพียงเท่านี้ก็เพียงพอกับความต้องการแล้วครับ ลองดูตัวอย่างการใช้งานเบื้องต้นดังนี้ครับ
แบบแรก เรียกว่า Static Map Image API เป็นการแสดงแผนที่ในมุมมองปกติ (Terrain or Sattellite)
<img src="http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-47.91378&zoom=11&size=200x200&sensor=false">
แบบที่สอง เรียกว่า Street View Image API เป็นการแสดงแผนที่ในมุมมองแบบ Street View
<img src="http://maps.googleapis.com/maps/api/streetview?size=200x200&location=40.720032,%20-73.988354&heading=235&sensor=false">
สำหรับผู้ที่สนใจ สามารถศึกษารายละเอียดเพิ่มเติมได้ที่นี่ครับ http://bit.ly/Y8NcJo
Showing posts with label How To. Show all posts
Showing posts with label How To. Show all posts
Thursday, 29 November 2012
Tuesday, 27 November 2012
How to output image in PHP
จากบทความก่อนหน้านี้ที่เคยแนะนำเกี่ยวกับการ Resize Image ใน PHP ไปแล้ว สำหรับบทความนี้ผมอยากจะมาแนะนำวิธีการ Output Image ใน PHP ดังนี้คือ เริ่มต้นจากการเตรียม Image File ก่อน (โดยอาจจะเป็น Image File ที่เตรียมไว้ล่วงหน้า หรือมาจากการ Resize) จากนั้นเราจะใช้คำสั่ง readfile เพื่ออ่าน content ที่อยู่ใน file พร้อมกับ output ออกมา แต่เนื่องจาก readfile จะส่งแค่ content ที่อยู่ใน file เท่านั้น ไม่ได้ส่ง header ตามมาตรฐาน HTTP ทำให้ browser ไม่รู้จัก ดังนั้นเราจะต้องสร้าง HTTP Header ขึ้นมาเอง โดยใช้คำสั่ง header โดยในที่นี้เราจะส่ง header 2 ตัว ซึ่งได้แก่ Content-Type และ Content-Length ไปพร้อมกับ Image เดี๋ยวลองดูในส่วนของ coding กันนะครับ
$file = 'images/todd_64x64.jpg';
header('Content-Type: image/jpg');
header('Content-Length: '.filesize($fle));
readfile($file);
ใน code ไม่มีอะไรยาก คงไม่ต้องอธิบายอะไรมาก ก็เริ่มจากการเตรียมตัวแปร จะนั้นก็สร้าง HTTP Header และใช้คำสั่ง readfile เพื่ออ่าน content ที่อยู่ใน file และส่งกลับคืนไป
หากใช้เทคนิคนี้ร่วมกับการ Resize Image จะช่วยให้เราไม่ต้องเตรียม Image สำหรับหน้าจอหลายขนาด เพียงแค่เตรียมภาพสำหรับขนาดหน้าจอใหญ่สุดที่จะรองรับ แล้วเราค่อย Resize โดยการ Scale Down ลง จะทำให้ภาพไม่เสียคุณภาพไปมาก
$file = 'images/todd_64x64.jpg';
header('Content-Type: image/jpg');
header('Content-Length: '.filesize($fle));
readfile($file);
ใน code ไม่มีอะไรยาก คงไม่ต้องอธิบายอะไรมาก ก็เริ่มจากการเตรียมตัวแปร จะนั้นก็สร้าง HTTP Header และใช้คำสั่ง readfile เพื่ออ่าน content ที่อยู่ใน file และส่งกลับคืนไป
หากใช้เทคนิคนี้ร่วมกับการ Resize Image จะช่วยให้เราไม่ต้องเตรียม Image สำหรับหน้าจอหลายขนาด เพียงแค่เตรียมภาพสำหรับขนาดหน้าจอใหญ่สุดที่จะรองรับ แล้วเราค่อย Resize โดยการ Scale Down ลง จะทำให้ภาพไม่เสียคุณภาพไปมาก
Sunday, 25 November 2012
Open CUE file บน WinAmp v.5.6 ด้วย CUE Player Plugin
ปกติผมชอบฟังเพลงจากแผ่น Audio CD แต่ตอนนี้เครื่องเล่น CD ของผมเสียอยู่ ก็เลยต้องเปลี่ยนมาฟังจากไฟล์ที่ RIP เก็บเอาไว้ใน Hard Disk แทน ปกติผมมักจะใช้ WinAmp เป็น Player ซึ่งโดยทั่วไปก็สามารถเปิดเล่นไฟล์ต่างๆทั่วไปได้ไม่มีปัญหา แต่มาติดที่ไฟล์ที่ผมเก็บเอาไว้ ซึ่งส่วนมากจะเป็น FLAC ซึ่งเป็น compression ในแบบ Lossless (ซึ่งจะให้คุณภาพเสียงคงเดิม หรือใกล้เคียงต้นฉบับมากที่สุด) ซึ่งในเวลา RIP จากแผ่น Audio ผมมักจะชอบ RIP ออกมาเป็น FLAC ไฟล์ใหญ่ๆเพียงแค่ไฟล์เดียว โดยที่จะมี CUE ไฟล์เป็นตัวคอยระบุ Track ที่อยู่ใน FLAC อีกที ซึ่ง Player หลายๆตัวที่ไม่รู้จัก CUE ก็จะไม่สามารถเปิดอ่านไฟล์ CUE ได้ ทำให้ไม่นำข้อมูลของแต่ละ Track ขึ้นมาแสดงให้ดูได้ (แต่สามารถเล่น FLAC ไฟล์นะครับ ยังฟังเพลงได้ตามปกติ เพียงแต่จะไม่สามารถเลือก Track ที่ต้องการได้) ซึ่งใครที่ใช้ WinAmp v.5.6 เหมือนกับผม และอยากจะทำให้ WinAmp สามารถเปิดไฟล์ CUE ได้ วันนี้ผมมีวิธีมาแนะนำครับ ให้ไป download CUE Player Plugin สำหรับ WinAmp (แต่ต้องดูด้วยนะครับ ว่ารองรับ WinAmp version ไหน) สำหรับตัวที่ผมจะมาแนะนำ จะเป็นตัวที่สามารถใช้งานได้กับ WinAmp v.5.6 เริ่มต้นโดยเข้าไป download ไฟล์ Plugin จากใน Blog นี้ก่อนครับ http://bit.ly/UlJVCz จะได้เป็นไฟล์ ZIP มา จากนั้นให้เปิดไฟล์ ZIP ออกมา จะพบไฟล์ .dll อยู่ในนั้น 2 ไฟล์ ให้ copy ทั้ง 2 ไฟล์ เอาไปวางไว้ใน puglins folder ของ WinAmp จากนั้นให้ปิดแล้วเปิด WinAmp ใหม่ ก็จะสามารถเปิดไฟล์ CUE และสามารถมองเห็น Track ต่างๆได้แล้วครับ
Saturday, 24 November 2012
Resize Image using PHP
การพัฒนาเว็บในปัจจุบันจำเป็นที่ต้องแสดงผลบนหลาย screen ที่มีขนาดแตกต่างกัน ไม่ว่าจะเป็น Desktop, Tablet หรือ Smartphone ดังนั้นการ Resize Image ให้เหมาะสำหรับการแสดงผลในแต่ละ screen จึงเป็นสิ่งที่จำเป็น สำหรับในบทความนี้ ผมอยากจะมาแนะนำ PHP Script สำหรับใช้ในการ Resize Image ซึ่งเขียนขึ้นโดย Simon Jarvis สามารถ Resize รูปได้หลายแบบ ไม่ว่าจะเป็นการ Resize โดยยึดจากความสูงเป็นหลัก หรือจะยึดจากความกว้างเป็นหลักก็สามารถทำได้ สำหรับตัว Script มีการใช้ GD Library เป็น Graphic Engine สำหรับทำงานเกี่ยวกับรูปภาพ สำหรับผู้ที่่สนใจ สามารถเข้าไปอ่านบทความ พร้อมทั้ง download script ไปใช้งานได้ที่นี่ครับ http://bit.ly/TUT8x2
เทคนิคการสร้าง Unique Array ใน JavaScript
สำหรับบทความนี้ผมจะมานำเสนอเทคนิคในการสร้าง Unique Array (คือ Array ที่มีค่า Value ไม่ซ้ำกัน) สำหรับเทคนิคที่จะนำมาใช้งานเป็นการปรับปรุงความสามารถของ Class Array ผ่านทาง Prototype ลองดูตัวอย่างนะครับ
Array.prototype.getUnique = function(){
var u = {}, a = [];
for(var i = 0, l = this.length; i < l; ++i){
if(u.hasOwnProperty(this[i])) {
continue;
}
a.push(this[i]);
u[this[i]] = 1;
}
return a;
}
เมื่อเราปรับปรุงความสามารถของ Array เรียบร้อยแล้ว เราก็จะมาลองใช้งานดูดังนี้ โดยเริ่มจากการประกาศ Array ขึ้นมาก่อน โดยเราจะลองทำให้ Array มีค่าซ้ำๆกันอยู่ ดังนี้ครับ
var arr = [1,2,3,3]; // สังเกตุว่า มี 3 ซ้ำกันอยู่ 2 ตัว
alert(arr.getUnique()); // ค่าที่ Alert ออกมาจะเป็น [1,2,3] สังเกตุว่าค่าที่ซ้ำจะถูกกำจัดออกไปแล้ว
แหล่งที่มา : http://bit.ly/TbfHie
Array.prototype.getUnique = function(){
var u = {}, a = [];
for(var i = 0, l = this.length; i < l; ++i){
if(u.hasOwnProperty(this[i])) {
continue;
}
a.push(this[i]);
u[this[i]] = 1;
}
return a;
}
เมื่อเราปรับปรุงความสามารถของ Array เรียบร้อยแล้ว เราก็จะมาลองใช้งานดูดังนี้ โดยเริ่มจากการประกาศ Array ขึ้นมาก่อน โดยเราจะลองทำให้ Array มีค่าซ้ำๆกันอยู่ ดังนี้ครับ
var arr = [1,2,3,3]; // สังเกตุว่า มี 3 ซ้ำกันอยู่ 2 ตัว
alert(arr.getUnique()); // ค่าที่ Alert ออกมาจะเป็น [1,2,3] สังเกตุว่าค่าที่ซ้ำจะถูกกำจัดออกไปแล้ว
แหล่งที่มา : http://bit.ly/TbfHie
Thursday, 22 November 2012
วิธีการเรียกใช้งาน Controller จาก Script ภายนอก ใน Angular.js
โดยปกติเราสามารถเรียกใช้งาน Controller ได้โดยผ่านการ Binding แต่สำหรับในกรณีที่เรามีความจำเป็นต้องเรียกใช้งาน property หรือ method ที่อยู่ภายใน Controller จาก Script ที่อยู่ภายนอก ซึ่งเราไม่สามารถใช้วิธีการ binding ได้ เราสามารถทำโดยการเรียกใช้งานผ่าน scope โดยตรง ซึ่ง โดยปกติ Angular จะสร้าง scope Object ไว้กับ Element ที่เราประกาศให้เป็น Controller ซึ่งเราสามารถดึงเอา Scope Object ออกมาใช้งานได้ดังต่อไปนี้
ตัวอย่างของ Code ในส่วนของ Controller
function HelloCtrl($scope){
$scope.title = 'Hello!';
$scope.test = function(){
alert('xxx');
}
}
สมมุติว่า ประกาศ controller ไว้ที่ body tag ดังนี้
<html ng-app>
<body ng-controller="HelloCtrl">
</body>
</html>
เราสามารถดึง scope object ออกมาจาก body tag ได้ดังนี้
var scope = angular.element($('body')).scope();
จากนั้น เมื่อเราได้ scope object ออกมาแล้ว เราก็จะสามารถเรียกใช้งาน property และ method ที่อยู่ภายใน controller ได้ตามปกติ ยกตัวอย่างเช่น
alert(scope.title); // เรียกใช้งาน property ที่ชื่อว่า title
scope.test(); // เรียกใช้งาน method ที่ชื่อว่า test
ตัวอย่างของ Code ในส่วนของ Controller
function HelloCtrl($scope){
$scope.title = 'Hello!';
$scope.test = function(){
alert('xxx');
}
}
สมมุติว่า ประกาศ controller ไว้ที่ body tag ดังนี้
<html ng-app>
<body ng-controller="HelloCtrl">
</body>
</html>
เราสามารถดึง scope object ออกมาจาก body tag ได้ดังนี้
var scope = angular.element($('body')).scope();
จากนั้น เมื่อเราได้ scope object ออกมาแล้ว เราก็จะสามารถเรียกใช้งาน property และ method ที่อยู่ภายใน controller ได้ตามปกติ ยกตัวอย่างเช่น
alert(scope.title); // เรียกใช้งาน property ที่ชื่อว่า title
scope.test(); // เรียกใช้งาน method ที่ชื่อว่า test
เทคนิคการ Share Data ระหว่าง Controller ใน Angular.js
สำหรับเทคนิคต่อไปนี้ เป็นการใช้ข้อมูลร่วมกันระหว่าง Controller โดยใช้วิธีการ bind Service ลองดูตามตัวอย่างดังต่อไปนี้ครับ
<!doctype html>
<html ng-app="project">
<head>
<title>Angular: Service example</title>
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script>
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, theService) {
$scope.someThing = theService.thing;
$scope.name = "Second Controller!";
}
</script>
</head>
<body>
<div ng-controller="FirstCtrl">
<h2>{{name}}</h2>
<input ng-model="thing.x"/>
</div>
<div ng-controller="SecondCtrl">
<h2>{{name}}</h2>
<input ng-model="someThing.x"/>
</div>
</body>
</html>
จากตัวอย่าง เมื่อเรามีการ update ข้อมูลใน Service จะส่งผลให้ Controller ที่ Bind เอาไว้กับข้อมูลใน Service มีการเปลี่ยนแปลงตามไปด้วย
<!doctype html>
<html ng-app="project">
<head>
<title>Angular: Service example</title>
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<script>
var projectModule = angular.module('project',[]);
projectModule.factory('theService', function() {
return {
thing : {
x : 100
}
};
});
function FirstCtrl($scope, theService) {
$scope.thing = theService.thing;
$scope.name = "First Controller";
}
function SecondCtrl($scope, theService) {
$scope.someThing = theService.thing;
$scope.name = "Second Controller!";
}
</script>
</head>
<body>
<div ng-controller="FirstCtrl">
<h2>{{name}}</h2>
<input ng-model="thing.x"/>
</div>
<div ng-controller="SecondCtrl">
<h2>{{name}}</h2>
<input ng-model="someThing.x"/>
</div>
</body>
</html>
จากตัวอย่าง เมื่อเรามีการ update ข้อมูลใน Service จะส่งผลให้ Controller ที่ Bind เอาไว้กับข้อมูลใน Service มีการเปลี่ยนแปลงตามไปด้วย
วิธีการ Communicate ข้าม Controller ใน Angular.js
สำหรับผู้ที่ใช้ Angular.js และมีการสร้าง Controller ไว้มากกว่า 1 ตัว สามารถสื่อสารข้ามกันระหว่าง Controller ได้ โดยอาศัยการใช้ Message ดังต่อไปนี้
แหล่งที่มา : http://stackoverflow.com/questions/9293423/can-one-controller-call-another-in-angularjs
function FirstController($scope) {
$scope.$on('someEvent', function() {});
// another controller or even directive
}
function SecondController($scope) {
$scope.$emit('someEvent', args);
} แหล่งที่มา : http://stackoverflow.com/questions/9293423/can-one-controller-call-another-in-angularjs
เทคนิคการ Remove Item ออกจาก Array ใน JavaScript
สมมุติว่าเราประกาศ Array ไว้ดังต่อไปนี้
var myArray = ['a','b','c','d','e'];
แล้วเราต้องการลบ item ตัวที่ 1 (index เท่ากับ 0) ออกจาก myArray ด้วยการใช้คำสั่ง delete ดังต่อไปนี้
delete myArray[0];
สิ่งที่เกิดขึ้นก็คือ JavaScript จะไม่ได้ทำการลบ item นั้นออกจาก Array จริงๆ แต่เป็นการไปแทนที่ข้อมูลในตำแหน่งนั้นๆด้วย undefined ซึ่งถ้าเรา debug ดูใน Firebug เราจะเห็นว่าข้อมูลใน myArray เป็นดังต่อไปนี้
[undefined,'b','c','d','e'];
ซึ่งไม่เป็นไปอย่างที่เราต้องการ แต่มีวิธีแก้ครับ โดยนำ Script ที่เขียนไว้โดย John Resig ซึ่งเขียนเพิ่มคำสั่ง remove เข้าไปใน Array มาใช้งานดังนี้ครับ
ตอนนี้ หากเราอยากลบ item ที่ 1 เราก็เพียงใช้คำสั่ง
myArray.remove(0); // item ที่ 1 จะมีค่า index = 0
หรือหากอยากจะลบ item ลำดับที่ 2 จากตำแหน่งท้ายสุดของ Array ก็สามารถทำได้ดังนี้
myArray.remove(-2);
หรือหากอยากจะลบหลายๆ item พร้อมๆ กัน ก็สามารถทำได้ โดยการส่งค่า index ที่ต้องการลบเข้าไป ดังนี้
myArray.remove(1,3); // จะเป็นการลบ item ในตำแหน่งที่ 2 และ 4 ตามลำดับ
แหล่งที่มา : http://stackoverflow.com/questions/500606/javascript-array-delete-elements
var myArray = ['a','b','c','d','e'];
แล้วเราต้องการลบ item ตัวที่ 1 (index เท่ากับ 0) ออกจาก myArray ด้วยการใช้คำสั่ง delete ดังต่อไปนี้
delete myArray[0];
สิ่งที่เกิดขึ้นก็คือ JavaScript จะไม่ได้ทำการลบ item นั้นออกจาก Array จริงๆ แต่เป็นการไปแทนที่ข้อมูลในตำแหน่งนั้นๆด้วย undefined ซึ่งถ้าเรา debug ดูใน Firebug เราจะเห็นว่าข้อมูลใน myArray เป็นดังต่อไปนี้
[undefined,'b','c','d','e'];
ซึ่งไม่เป็นไปอย่างที่เราต้องการ แต่มีวิธีแก้ครับ โดยนำ Script ที่เขียนไว้โดย John Resig ซึ่งเขียนเพิ่มคำสั่ง remove เข้าไปใน Array มาใช้งานดังนี้ครับ
// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};ตอนนี้ หากเราอยากลบ item ที่ 1 เราก็เพียงใช้คำสั่ง
myArray.remove(0); // item ที่ 1 จะมีค่า index = 0
หรือหากอยากจะลบ item ลำดับที่ 2 จากตำแหน่งท้ายสุดของ Array ก็สามารถทำได้ดังนี้
myArray.remove(-2);
หรือหากอยากจะลบหลายๆ item พร้อมๆ กัน ก็สามารถทำได้ โดยการส่งค่า index ที่ต้องการลบเข้าไป ดังนี้
myArray.remove(1,3); // จะเป็นการลบ item ในตำแหน่งที่ 2 และ 4 ตามลำดับ
แหล่งที่มา : http://stackoverflow.com/questions/500606/javascript-array-delete-elements
Monday, 12 November 2012
เรียกใช้งาน JavaScript ในแบบ Modular โดยใช้ Require.js
สำหรับบทความนี้ผมอยากจะมาแนะนำเกี่ยวกับเทคนิคในการเรียกใช้งาน JavaScript ในแบบ Modular โดยใช้ Require.js ประโยชน์ของการใช้ Require.js คือ จะช่วยให้เราสามารถเรียกใช้งาน JavaScript ในแบบ Asynchronous (คือความสามารถในการ load หลายๆ file ได้พร้อมๆกัน) ทำให้สามารถ load เสร็จได้เร็วขึ้นกว่าการ load โดยใช้ script tag แบบปกติ แต่เป้าหมายจริงๆ ของ Require.js อยู่ที่การแบ่ง coding ออกให้เป็นสัดส่วน หรือเราเรียกว่า module แต่ละ module จะมีหน้าที่เฉพาะของตัวเอง หากเราต้องการใช้ เราก็ค่อยเรียกมาใช้งาน ซึ่งทำให้การเรียกใช้งานมีความยืดหยุ่น เรียกใช้งานได้รวดเร็ว และสามารถ maintain ได้ง่ายอีกด้วย นอกจากนั้น Require.js ยังมีความสามารถในเรื่องของการ load dependency ที่จำเป็นก่อนการเรียกใช้งานแต่ละ module ได้อีกด้วย เดี๋ยวเราลองมาดูวิธีการใช้งานแบบง่ายๆก่อนนะครับ ขั้นแรกเลย ก็ต้องไป download "require.js" มาก่อน (โดยเข้าไป download ได้จาก http://requirejs.org) จากนั้น วิธีการเรียกใช้งาน ให้เรียกใช้งานดังต่อไปนี้ครับ
<script data-main="scripts/main.js" src="scripts/require.js"></script>
วิธีการเรียกใช้งาน require.js ก็เหมือนกับการเรียกใช้งาน JavaScript อื่นๆโดยทั่วไป แต่ให้สังเกตุ attribute ที่ชื่อว่า data-main ซึ่งมีไว้เพื่อให้เรากำหนด JavaScript ที่ใช้เป็น file หลัก สำหรับที่เราจะเรียกใช้งาน module อื่นๆต่อไป (JavaScript ที่เรากำหนดไว้ใน data-main จะถูกเรียกใช้งานหลังจากที่ "require.js" ถูกโหลดเสร็จเรียบร้อย)
ต่อไป เราจะมาดู script ในส่วนของ main.js (จะตั้งชื่อเป็นอย่างอื่นก็ได้ แต่ถ้าตั้งเป็นชื่ออื่น ก็ต้องกำหนดค่าใน data-main ให้สัมพันธ์กันด้วย แค่นั้นเอง) หน้าที่ของ main.js ก็คือ เป็นไฟล์หลักที่ใช้สำหรับ load module อื่นๆ จะสังเกตุว่า ผมใช้คำว่า module จะไม่ใช้คำว่า script เพราะ Require.js พยายามให้เรามอง JavaScript เป็น module เดี๋ยวมาลองดูตัวอย่างกันก่อนแล้วกันนะครับ
main.js
======
require(["helper/util"], function(util) {
util.hello();
});
ใน main.js เราเรียกใช้งาน function ที่ชื่อว่า require เพื่อ load "helper/util" module (ให้สังเกตุว่า ไม่ต้องใส่ .js เข้าไป เดี๋ยว require.js จะเติมให้เองโดยอัตโมมัติ) ส่วน path ในการเรียกใช้งาน ก็จะ relative จาก file ที่เรากำหนดให้เป็น file หลัก ซึ่งในที่นี้ก็คือ main.js นั่นเอง (เราสามารถกำหนดได้ว่า จะให้ require.js ไปมองหา module จากที่ไหน โดยการกำหนดค่า config ซึ่งในที่นี้ไม่อธิบายแล้วกันนะครับ เพราะมันจะยาวไป หากสนใจจริงๆ ก็เข้าไปอ่านได้ที่ http://requirejs.org/docs/api.html)
parameter ตัวแรก คือ array ของชื่อ module ที่เราต้องการ load ส่วน parameter ตัวที่สองคือ call function ที่จะถูกเรียกใช้งานเมื่อ module ที่เราต้องการถูก load ขึ้นมาเรียบร้อยแล้วนั่นเอง ให้สังเกตุว่ามีการส่งค่า util เข้าไปที่ function ด้วย นั่นหมายความว่า module ที่เรา load ในขณะนี้จะถูกส่งมาในตัวแปรที่ชื่อว่า util นั่นเองครับ ซึ่งภายใน function นี้ เราสามารถเรียกใช้งาน util.hello() ได้แล้วครับ
ส่วนต่อไป เดี๋ยวเราจะมาลองดูกันต่อใน script ส่วนที่เป็นการ define module ซึ่งจากตัวอย่างในที่นี้ก็คือ util.js ครับ
util.js
=====
define(function(){
var m = {};
m.hello = function(){
alert('Hello!');
}
return m;
});
ในส่วนของ util.js เราสร้าง Anonymous Function ขึ้นมา ซึ่งภายจะกำหนดค่าต่างๆ หรือจะทำอะไรก็แล้วแต่ แต่สุดท้ายจะต้องคืนค่า module กลับมา สำหรับในตัวอย่างนี้เราประกาศตัวแปรที่ชื่อว่า m เอาไว้สำหรับเก็บ namespace ที่เราสร้างขึ้นมาใหม่ โดยใช้ {} และภายใน namespace นี้ เราก็ประกาศ function ชื่อว่า hello() เอาไว้ เมื่อทุกอย่างเสร็จเรียบร้อย เราจะคืนค่า m กลับออกไป
สำหรับตัวอย่างที่ยกมาให้ดู อาจจะดูไม่ค่อยมีประโยชน์ในการนำไปใช้งานจริงๆสักเท่าไหร่ แต่มันได้ concept ครับ ลองคิดดูแบบง่ายๆ แทนที่จะต้องเขียน Framework ตัวใหญ่ๆ ถ้าหากเราสามารถแบ่ง Framework ออกเป็นส่วนๆ แล้วค่อยๆเรียกใช้งานเท่าที่จำเป็น เราก็ไม่จำเป็นต้อง load JavaScript ตัวใหญ่ๆทีเดียวแบบเมื่อก่อนแล้วครับ และยังช่วยให้เรา extend ความสามารถเพิ่มเติมต่อไปได้ง่ายอีกด้วยครับ เพราะมีการแยก module ออกจากกันอย่างชัดเจน ช่วยให้เราทำงานง่ายขึ้น และก็แก้ไขก็ง่ายดีด้วยครับ
ที่จริงแล้วเทคนิคนี้มันมีชื่อเรียก ชื่ออย่างเป็นทางการมันเรียกว่า Modular Pattern เป็น Best Practice รปแบบหนึ่ง ซึ่งผมเห็นว่ามันมีประโยชน์ดี แล้วสามารถนำไปใช้งานได้จริงครับ ก็คิดว่าบทความนี้น่าจะพอจุดประกายให้ใครอีกหลายคนนำไปประยุกต์ใช้งานกันต่อไปนะครับ หากนำไปใช้งานแล้วได้ผลดี ก็อาจช่วยเขียนบทความเป็นวิทยาทานให้คนอื่นๆต่อไปแล้วกันนะครับ
แหล่งที่มา : http://requirejs.org
<script data-main="scripts/main.js" src="scripts/require.js"></script>
วิธีการเรียกใช้งาน require.js ก็เหมือนกับการเรียกใช้งาน JavaScript อื่นๆโดยทั่วไป แต่ให้สังเกตุ attribute ที่ชื่อว่า data-main ซึ่งมีไว้เพื่อให้เรากำหนด JavaScript ที่ใช้เป็น file หลัก สำหรับที่เราจะเรียกใช้งาน module อื่นๆต่อไป (JavaScript ที่เรากำหนดไว้ใน data-main จะถูกเรียกใช้งานหลังจากที่ "require.js" ถูกโหลดเสร็จเรียบร้อย)
ต่อไป เราจะมาดู script ในส่วนของ main.js (จะตั้งชื่อเป็นอย่างอื่นก็ได้ แต่ถ้าตั้งเป็นชื่ออื่น ก็ต้องกำหนดค่าใน data-main ให้สัมพันธ์กันด้วย แค่นั้นเอง) หน้าที่ของ main.js ก็คือ เป็นไฟล์หลักที่ใช้สำหรับ load module อื่นๆ จะสังเกตุว่า ผมใช้คำว่า module จะไม่ใช้คำว่า script เพราะ Require.js พยายามให้เรามอง JavaScript เป็น module เดี๋ยวมาลองดูตัวอย่างกันก่อนแล้วกันนะครับ
main.js
======
require(["helper/util"], function(util) {
util.hello();
});
ใน main.js เราเรียกใช้งาน function ที่ชื่อว่า require เพื่อ load "helper/util" module (ให้สังเกตุว่า ไม่ต้องใส่ .js เข้าไป เดี๋ยว require.js จะเติมให้เองโดยอัตโมมัติ) ส่วน path ในการเรียกใช้งาน ก็จะ relative จาก file ที่เรากำหนดให้เป็น file หลัก ซึ่งในที่นี้ก็คือ main.js นั่นเอง (เราสามารถกำหนดได้ว่า จะให้ require.js ไปมองหา module จากที่ไหน โดยการกำหนดค่า config ซึ่งในที่นี้ไม่อธิบายแล้วกันนะครับ เพราะมันจะยาวไป หากสนใจจริงๆ ก็เข้าไปอ่านได้ที่ http://requirejs.org/docs/api.html)
parameter ตัวแรก คือ array ของชื่อ module ที่เราต้องการ load ส่วน parameter ตัวที่สองคือ call function ที่จะถูกเรียกใช้งานเมื่อ module ที่เราต้องการถูก load ขึ้นมาเรียบร้อยแล้วนั่นเอง ให้สังเกตุว่ามีการส่งค่า util เข้าไปที่ function ด้วย นั่นหมายความว่า module ที่เรา load ในขณะนี้จะถูกส่งมาในตัวแปรที่ชื่อว่า util นั่นเองครับ ซึ่งภายใน function นี้ เราสามารถเรียกใช้งาน util.hello() ได้แล้วครับ
ส่วนต่อไป เดี๋ยวเราจะมาลองดูกันต่อใน script ส่วนที่เป็นการ define module ซึ่งจากตัวอย่างในที่นี้ก็คือ util.js ครับ
util.js
=====
define(function(){
var m = {};
m.hello = function(){
alert('Hello!');
}
return m;
});
ในส่วนของ util.js เราสร้าง Anonymous Function ขึ้นมา ซึ่งภายจะกำหนดค่าต่างๆ หรือจะทำอะไรก็แล้วแต่ แต่สุดท้ายจะต้องคืนค่า module กลับมา สำหรับในตัวอย่างนี้เราประกาศตัวแปรที่ชื่อว่า m เอาไว้สำหรับเก็บ namespace ที่เราสร้างขึ้นมาใหม่ โดยใช้ {} และภายใน namespace นี้ เราก็ประกาศ function ชื่อว่า hello() เอาไว้ เมื่อทุกอย่างเสร็จเรียบร้อย เราจะคืนค่า m กลับออกไป
สำหรับตัวอย่างที่ยกมาให้ดู อาจจะดูไม่ค่อยมีประโยชน์ในการนำไปใช้งานจริงๆสักเท่าไหร่ แต่มันได้ concept ครับ ลองคิดดูแบบง่ายๆ แทนที่จะต้องเขียน Framework ตัวใหญ่ๆ ถ้าหากเราสามารถแบ่ง Framework ออกเป็นส่วนๆ แล้วค่อยๆเรียกใช้งานเท่าที่จำเป็น เราก็ไม่จำเป็นต้อง load JavaScript ตัวใหญ่ๆทีเดียวแบบเมื่อก่อนแล้วครับ และยังช่วยให้เรา extend ความสามารถเพิ่มเติมต่อไปได้ง่ายอีกด้วยครับ เพราะมีการแยก module ออกจากกันอย่างชัดเจน ช่วยให้เราทำงานง่ายขึ้น และก็แก้ไขก็ง่ายดีด้วยครับ
ที่จริงแล้วเทคนิคนี้มันมีชื่อเรียก ชื่ออย่างเป็นทางการมันเรียกว่า Modular Pattern เป็น Best Practice รปแบบหนึ่ง ซึ่งผมเห็นว่ามันมีประโยชน์ดี แล้วสามารถนำไปใช้งานได้จริงครับ ก็คิดว่าบทความนี้น่าจะพอจุดประกายให้ใครอีกหลายคนนำไปประยุกต์ใช้งานกันต่อไปนะครับ หากนำไปใช้งานแล้วได้ผลดี ก็อาจช่วยเขียนบทความเป็นวิทยาทานให้คนอื่นๆต่อไปแล้วกันนะครับ
แหล่งที่มา : http://requirejs.org
วิธีการ Select DOM Element โดยไม่ใช้ jQuery
โดยส่วนมากเวลาที่เราต้องการ select DOM element เรามักจะนึกถึง jQuery เพราะใช้ง่าย และแทบจะเป็น library มาตรฐานสำหรับการพัฒนา web ในปัจจุบันไปแล้ว สำหรับบทความนี้ ผมอยากจะมาแนะนำการ select DOM element โดยไม่ใช้ jQuery (อาจจะด้วยเหตุผลใดก็ตาม) เมื่อก่อน เวลาเราจะ select DOM element เราก็มักจะนึกถึง methods ที่ชื่อว่า getElementById() กับ getElementByTagName() ซึ่งการใช้งานค่อนข้างจำกัด ไม่หลากหลายเท่าการใช้ CSS Selector เหมือนใน jQuery ซึ่งเป็นหนึ่งในเหตุผลว่าทำไม jQuery ถึงได้รับความนิยม หลายๆคน (รวมทั้งผมด้วย) ใช้ jQuery กันจนเคยชิน จนไม่รู้เลยว่าเดี๋ยวนี้ DOM selector APIs ได้รับการพัฒนาขึ้นจากเมื่อก่อนมาก ซึ่งในปัจจุบันรองรับการใช้งาน CSS selector แล้วด้วย ผ่านทาง APIs ที่ชื่อว่า querySelector() และ querySelectorAll() ทั้ง 2 APIs รองรับการใช้งาน CSS selector โดยมีความแตกต่างกันที่ querySelector() จะ return DOM element เพียงแค่ตัวเดียว ในขณะที่ querySelectorAll() จะ return DOM elements ทั้งหมดที่ตรงตามเงื่อนไข ส่วนวิธีการเรียกใช้งาน ดูตามตัวอย่างข้างล่างนี่เลยครับ
document.querySelector('#myheader') //returns the element with ID="myheader"
document.querySelector('p.description') //returns the P with class="description" element
document.querySelectorAll('.mygroup') //returns all elements with class="mygroup"
document.querySelectorAll('#biography, #gallery') //returns both elements "#biography" and "#gallery" (inclusive)
แหล่งที่มา : http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml
document.querySelector('#myheader') //returns the element with ID="myheader"
document.querySelector('p.description') //returns the P with class="description" element
document.querySelectorAll('.mygroup') //returns all elements with class="mygroup"
document.querySelectorAll('#biography, #gallery') //returns both elements "#biography" and "#gallery" (inclusive)
แหล่งที่มา : http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml
Thursday, 1 November 2012
เทคนิคการเขียน Copywriting ให้น่าสนใจ
สำหรับผู้สร้างเว็บไซต์ เนื้อหาเป็นสิ่งที่สำคัญ เนื้อหาที่ดีจะทำให็เว็บไซต์น่าสนใจและชวนติดตาม และยังทำให้ผู้ที่เข้ามาเยี่ยมชมสนใจที่จะอ่านข้อมูลในหน้าต่อๆไป บทความนี้ผมจะมาแนะนำเกี่ยวกับเทคนิคในการเขียน Copywriting ให้ดูน่าสนใจ (เนื้อหาต่อไปนี้นำมาจากเว็บไซต์ http://www.seotools.net/)
แต่ก่อนที่จะเรียนรู้เทคนิคการเขียนข้อมูลให้น่าสนใจ เราควรจะเข้าใจก่อนว่า หากเว็บไซต์ของเรามีเนื้อหาที่ไม่สนใจ หรือมีเทคนิคการเขียนที่ไม่ดี จะส่งผลอย่างไร ? ซึ่งหลายๆคนอาจคิดว่าไม่สำคัญ แต่มันสำคัญครับ เพราะมันจะส่งผลกระทบกับค่า SEO ของเว็บไซต์ของคุณ คือ หากผู้ใช้ค้นหาเราเจอจาก Search Engine แต่เมื่อเข้ามาแล้วพบว่าเนื้อหาของเว็บไซต์ ไม่ตรงกับที่ต้องการ หรือไม่น่าสนใจ เค้าก็จะคลิ้กที่ปุ่ม Back เพื่อกลับไปเลือก "ผลลัพธ์" อื่นๆที่น่าสนใจกว่า ซึ่งตรงจุดนี้เองที่ Google จะทำการปรับลดค่า SEO ของเว็บไซต์ของคุณลง ดังนั้นคุณจึงพอจะเริ่มเห็นแล้ว่า การเขียนเนื้อหา มีความสำคัญอย่างไรสำหรับการสร้างเว็บไซต์ในปัจจุบัน
การเขียน "Copywriting" มีความแตกต่างจากการบอกเล่าทั่วไป คือ การเขียน "Copywriting" มีวัตถุประสงค์เพื่อให้เกิด Transaction บางอย่าง อย่างเช่น กระตุ้นให้เกิดการสมัครใช้บริการ หรือการซื้อสินค้าเป็นต้น "Copywriting" ส่วนมากจะพูดถึงผลประโยชน์ที่ผู้ใช้บริการจะได้รับ เพราะความจริงคือว่า ผู้ที่เข้ามาเยี่ยมชมเว็บไซต์ของคุณ แท้ที่จริงแล้วเค้าไม่ได้สนใจว่าสินค้าของคุณจะเป็นอย่างไร แต่สนใจเพียงแค่ว่าเค้าจะได้รับประโยชน์อย่างไรจากสินค้าและบริการของคุณเท่านั้น!
ต่อไปเราจะมาดูวิธีการวางโครงสร้างข้อมูลบนเว็บไซต์
1. Headline
ส่วนนี้เป็นส่วนที่เด่นที่สุด และเป็นส่วนที่สำคัญที่สุด เป็นส่วนแรกที่จะตัดสินว่าผู้ชมจะอ่านข้อมูลต่อ หรือว่าจากไป Headline มีความสำคัญในแง่ของ SEO เพราะ เมื่อผู้ใช้คลิ้ก link ของคุณจาก Search Engine ผู้ใช้มีความคาดหวังว่าจะได้เห็น Headline ในเรื่องที่เกี่ยวข้องกับ link ที่คลิ้กมาจาก Search Engine ซึ่งแน่นอนว่าถ้าผู้ใช้กำลังหาข้อมูลเกี่ยวกับภาพยนตร์เรื่องหนึ่ง แต่เมื่อคลิ้กเข้ามา เว็บไซต์ของคุณเป็นเว็บไซต์เพลง ผู้ใช้ก็คงไม่รีรอที่จะคลิ้กปุ่ม Back เพื่อไปดูข้อมูลจากเว็บไซต์อื่นแทน ดังนั้น Headline จึงมีความสำคัญอย่างยิ่งในแง่ของ SEO
เทคนิคการเขียน Headline ที่ดี ต้องคำนึงถึงข้อเท็จจริงที่ว่า ผู้ใช้ไม่ได้สนใจเว็บไซต์ของคุณหรือสินค้าของคุณ ผู้ใช้สนใจเพียงแค่ตัวเองเท่านั้น ดังนั้นเราต้องทำให้ผู้ใช้รู้สึกว่าได้อะไรบางอย่างกลับไป ซึ่งเทคนิคก็คือ ให้เขียนในเรื่องดังต่อไปนี้
- Outline Benefits คือ แสดงให้เห็นถึงประโยชน์ที่ผู้ใช้จะได้รับ
- Make Offer คือ เสนอผลประโยชน์ให้ อย่างเช่น ซื้อ 1 แถม 1
- Provide News คือ ให้ข้อมูลข่าวสาร ผู้ใช้ทั่วไปชอบที่จะรับรู้ข้อมูลข่าวสาร โดยเฉพาะข่าวสารที่น่าสนใจ
เดี๋ยวเรามาลองดูเทคนิคในการ Outline Benefits กัน "Benefits" คือ สิ่งที่สินค้าและบริการเข้ามาช่วยในชิวิตของผู้ใช้ดีขึ้น ยกตัวอย่างเช่น โฆษณาของ iphone ดังต่อไปนี้ "holds the internet in your pocket" โดยทั่วไปการเขียนถึง "Benefits" จะเริ่มต้นด้วย "verbs" เราต้องแยกแยะให้ออกระหว่าง Features และ Benefits ยกตัวอย่างเช่น “the iPhone’s slim shape makes it easy to fit in your pocket” ในตัวอย่างนี้จะเห็นว่า "Features" คือ "slim shape" ส่ว่น "Benefits" คือ "easy to fit in your pocket"
"Features" เป็นการบรรยายคุณสมบัติของสินค้า ยกตัวอย่างเช่น "24 Hr Battery Life" ส่วน "Benefits" คือ สิ่งที่ Feature เข้ามาช่วยทำให้ชีวิตของผู้ใช้ดีขึ้น สำหรับในกรณีนี้คือ "“you can go all day without plugging the phone into a charger”
มาถึงตรงนี้ อยากจะเน้นย้ำอีกครั้งว่า "ผู้ใช้ไม่ได้ให้ความสนใจเกี่ยวกับสินค้าของคุณ" (หรือให้ความสนใจน้อยมาก) แต่ผู้ใช้มีความสนใจว่าสินค้าหรือบริการของคุณให้อะไรแก่เค้า (ซึ่งข้อมูลของคุณควรเน้นในจุดนี้)
เราต้องพยายามเน้นในเรื่องของ "Benefits" ในเนื้อหาของเรา ซึ่งวิธีการที่ง่ายที่สุด คือ ทำรายการของ Feature ออกมาก่อน แล้วค่อยมาดูว่า แต่ละ Feature ให้ประโยชน์อะไรแก่ผู้ใช้ ยกตัวอย่างเช่น
Feature: 24 Hour Battery Life , Benefit : You can go all day without recharge
Feature: Run Fat Tires , Benefit : You don't have to change a tire if you get a puncture
สูตรง่ายๆในการเขียน Headline ให้น่าสนใจ คือ "เริ่มด้วย Verb"! ยกตัวอย่างเช่น
- Drive all day without getting tired
- Clean dishes in half the time it usually takes, using half the water
หาก Headling มีความน่าสนใจ ก็เป็นไปได้อย่างยิ่งว่า ผู้ที่เข้ามาเยี่ยมชมเว็บไซต์จะ click เพื่ออ่านข้อมูลเพิ่มเติมอื่นๆต่อไป ในแง่ของ SEO การใส่ Keyword เข้าไปใน Headline ถือว่าเป็นสิ่งที่ดี แต่ทั้งนี้ต้องไม่ทำให้ Headline สูญเสียความน่าสนใจ เพราะการทำ SEO เรายังมีโอกาสทำในจุดอื่นๆได้อีก แต่ Headline คือ โอกาสเดียวที่จะดึงความสนใจให้ผู้ที่เข้ามายังเว็บไซต์ของเราอ่านข้อมูลอื่นๆต่อไป
Benefits สามารถ "มองได้หลายมุม" ยกตัวอย่างเช่น "Opportunities to reduce pain" ก็ถือว่าเป็น "Benefit" ยกตัวอย่างเช่น “Clean a window in ten seconds using MicroClean technology” ซึ่ง "pain" ในที่นี้คือ "ปกติเราต้องใช้เวลามากกว่านี้ในการทำความสะอาดหน้าต่าง" ในตัวอย่างนี้ มีการประยุกต์ใช้ "proof" ซึ่งก็คือ "MicroClean Technology" ซึ่ง ผู้อ่านอาจยังไม่รู้ว่าคืออะไร ซึ่งเป็นการเปิดโอกาสให้เราได้อธิบายในบริเวณส่วนที่เป็นเนื้อหาต่อไป
ต่อไปเราลองมาดูเทคนิคการ Make Offer กันนะครับ สำหรับเทคนิคนี้ เราน่าจะคุ้นเคยกันดีอยู่แล้ว อย่างเช่น โฆษณาที่มักจะเขียนว่า ซื้อ 1 แถม 1 การใช้ Offer กับ Headline ช่วยดึงดูดความสนใจได้ดี การใช้ Offer เหมาะสำหรับในกรณีที่ผู้อ่านมีความคุ้นเคยกับสินค้าของคุณอยู่แล้ว หากสินค้าของคุณไม่เป็นที่รู้จัก หรือจำเป็นต้องอธิบาย การนำ Offer มาใช้ใน Headline อาจไม่มีประโยชน์มากนัก
2. Body
วัตถุประสงค์ของการเขียน Headline มีอยู่เพียงข้อเดียวคือ เพื่อดึงดูดความสนใจให้ผู้อ่านติดตามอ่านต่อในส่วนของ Body ในแต่ละบรรทัดของ Body มีวัตถุประสงค์เพื่อให้ผู้อ่านติดตามอ่านในบรรทัดต่อไป
สิ่งที่เราเขียนไว้ใน Headline ควรได้รับการอธิบายในส่วนของ Body ยกตัวอย่างเช่น หากคุณเริ่ม Headline ด้วย “Drive all day without getting tired“ ในบรรทัดแรกของ Body ก็ควรจะอธิบายว่า จะขับรถทั้งวันโดยที่ไม่เหนื่อยล้าได้อย่างไร ? ยกตัวอย่างเช่น “when you drive long distances, your body aches. You get tired. But there’s now a great way to avoid those aches and strains, with contour car seat covers that gently massage your pressure points”
เทคนิคในการเขียน Body แบบหนึ่งที่เป็นที่นิยมคือ "Three Steps Body Copy" คือ ประกอบด้วย Beginning, Middle และ Ending เหตุผลอย่างหนึ่งที่ทำให้วิธีการนี้ได้รับความนิยม คือ มันเป็นรูปแบบของ "Story" ซึ่ง Story เป็นวิธีการสื่อสารที่มีประสิทธิภาพมาก
การเขียน Body จะเริ่มเล่าเกี่ยวกับปัญหาก่อนในส่วนของ Beginning จากนั้นจะพูดถึงวิธีการแก้ปัญหาในส่วนของ Middle ในส่วน Endding เราจะสรุปใจความสำคัญ และบอกถึง Action ที่หากทำแล้ว จะสามารถช่วยแก้ปัญหาได้ อย่างเช่น โทรหาเราวันนี้! ลงทะเบียนวันนี้! เป็นต้น
3 The Close
ในบริเวณส่วนปิดท้าย ควร เน้นย้ำถึง Offers หรือ Benefits อีกครั้งหนึ่ง และควรจะบอกผู้อ่านให้ชัดเจนด้วยว่า ผู้อ่านจะต้องทำอย่างไร เพื่อที่จะได้ Offers อย่างเช่น โทรมาที่ หมายเลข xxxxx หรือส่ง mail มาที่ yyyyy เป็นต้น หากเว็บไซต์ของคุณเป็นเว็บไซต์ E-Commerce ผู้ใช้บริการอาจลังเลที่จะใช้บริการ ดังนั้นในบริเวณนี้ ควรสร้างความมั่นใจกับผู้เข้ามาเยี่ยมชม โดยการแสดง Safty Badge หรือ แสดงทะเบียนการค้า เพื่อสร้างความมั่นใจให้กับผู้ใช้บริการ ผู้ใช้บริการมักมีความกังวลในเรื่องของการโฆษณาเกินจริง ซึ่งหากเป็นไปได้ เราอาจมีการเสนอ Free Trial หรือ Money Back Guarantee สำหรับในกรณีที่ผู้เยี่ยมชมอ่านข้อมูลแล้ว แต่ยังลังเลที่จะ take action ใดๆ การเสนอ Offer แบบ Time Limited อาจสามารถช่วยได้ เพราะความเสียดายโอกาสจะช่วยเป็นแรงผลักดันให้เกิดการ Take Action
แหล่งที่มา : http://www.seotools.net/
Advertisment
8columns ให้บริการออกแบบเว็บไซต์สำหรับธุรกิจขนาดเล็ก ใช้ง่าย สวยงาม ราคาประหยัด รองรับ Smartphone และ Tablet สามารถดูสถิติผู้เยี่ยมชมได้ผ่าน Google Analytics ระบบแก้ไขข้อมูลใช้งานง่าย สามารถแก้ไขข้อมูลผ่านเว็บไซต์ได้โดยตรง แก้เสร็จแล้วสามารถเห็นการเปลี่ยนแปลงได้ทันที มีเว็บไซต์ตัวอย่างให้ทดลองก่อนตัดสินใจ สามารถดูข้อมูลเพิ่มเติมได้ที่ www.8columns.com หรือสอบถามข้อมูลได้ที่ http://www.facebook.com/8columns
Tags: ออกแบบเว็บไซต์, ออกแบบเว็บ, รับออกแบบเว็บไซต์, รับออกแบบเว็บ, ทำเว็บไซต์, รับทำเว็บไซต์, ทำเว็บ, รับทำเว็บ
แต่ก่อนที่จะเรียนรู้เทคนิคการเขียนข้อมูลให้น่าสนใจ เราควรจะเข้าใจก่อนว่า หากเว็บไซต์ของเรามีเนื้อหาที่ไม่สนใจ หรือมีเทคนิคการเขียนที่ไม่ดี จะส่งผลอย่างไร ? ซึ่งหลายๆคนอาจคิดว่าไม่สำคัญ แต่มันสำคัญครับ เพราะมันจะส่งผลกระทบกับค่า SEO ของเว็บไซต์ของคุณ คือ หากผู้ใช้ค้นหาเราเจอจาก Search Engine แต่เมื่อเข้ามาแล้วพบว่าเนื้อหาของเว็บไซต์ ไม่ตรงกับที่ต้องการ หรือไม่น่าสนใจ เค้าก็จะคลิ้กที่ปุ่ม Back เพื่อกลับไปเลือก "ผลลัพธ์" อื่นๆที่น่าสนใจกว่า ซึ่งตรงจุดนี้เองที่ Google จะทำการปรับลดค่า SEO ของเว็บไซต์ของคุณลง ดังนั้นคุณจึงพอจะเริ่มเห็นแล้ว่า การเขียนเนื้อหา มีความสำคัญอย่างไรสำหรับการสร้างเว็บไซต์ในปัจจุบัน
การเขียน "Copywriting" มีความแตกต่างจากการบอกเล่าทั่วไป คือ การเขียน "Copywriting" มีวัตถุประสงค์เพื่อให้เกิด Transaction บางอย่าง อย่างเช่น กระตุ้นให้เกิดการสมัครใช้บริการ หรือการซื้อสินค้าเป็นต้น "Copywriting" ส่วนมากจะพูดถึงผลประโยชน์ที่ผู้ใช้บริการจะได้รับ เพราะความจริงคือว่า ผู้ที่เข้ามาเยี่ยมชมเว็บไซต์ของคุณ แท้ที่จริงแล้วเค้าไม่ได้สนใจว่าสินค้าของคุณจะเป็นอย่างไร แต่สนใจเพียงแค่ว่าเค้าจะได้รับประโยชน์อย่างไรจากสินค้าและบริการของคุณเท่านั้น!
ต่อไปเราจะมาดูวิธีการวางโครงสร้างข้อมูลบนเว็บไซต์
1. Headline
ส่วนนี้เป็นส่วนที่เด่นที่สุด และเป็นส่วนที่สำคัญที่สุด เป็นส่วนแรกที่จะตัดสินว่าผู้ชมจะอ่านข้อมูลต่อ หรือว่าจากไป Headline มีความสำคัญในแง่ของ SEO เพราะ เมื่อผู้ใช้คลิ้ก link ของคุณจาก Search Engine ผู้ใช้มีความคาดหวังว่าจะได้เห็น Headline ในเรื่องที่เกี่ยวข้องกับ link ที่คลิ้กมาจาก Search Engine ซึ่งแน่นอนว่าถ้าผู้ใช้กำลังหาข้อมูลเกี่ยวกับภาพยนตร์เรื่องหนึ่ง แต่เมื่อคลิ้กเข้ามา เว็บไซต์ของคุณเป็นเว็บไซต์เพลง ผู้ใช้ก็คงไม่รีรอที่จะคลิ้กปุ่ม Back เพื่อไปดูข้อมูลจากเว็บไซต์อื่นแทน ดังนั้น Headline จึงมีความสำคัญอย่างยิ่งในแง่ของ SEO
เทคนิคการเขียน Headline ที่ดี ต้องคำนึงถึงข้อเท็จจริงที่ว่า ผู้ใช้ไม่ได้สนใจเว็บไซต์ของคุณหรือสินค้าของคุณ ผู้ใช้สนใจเพียงแค่ตัวเองเท่านั้น ดังนั้นเราต้องทำให้ผู้ใช้รู้สึกว่าได้อะไรบางอย่างกลับไป ซึ่งเทคนิคก็คือ ให้เขียนในเรื่องดังต่อไปนี้
- Outline Benefits คือ แสดงให้เห็นถึงประโยชน์ที่ผู้ใช้จะได้รับ
- Make Offer คือ เสนอผลประโยชน์ให้ อย่างเช่น ซื้อ 1 แถม 1
- Provide News คือ ให้ข้อมูลข่าวสาร ผู้ใช้ทั่วไปชอบที่จะรับรู้ข้อมูลข่าวสาร โดยเฉพาะข่าวสารที่น่าสนใจ
เดี๋ยวเรามาลองดูเทคนิคในการ Outline Benefits กัน "Benefits" คือ สิ่งที่สินค้าและบริการเข้ามาช่วยในชิวิตของผู้ใช้ดีขึ้น ยกตัวอย่างเช่น โฆษณาของ iphone ดังต่อไปนี้ "holds the internet in your pocket" โดยทั่วไปการเขียนถึง "Benefits" จะเริ่มต้นด้วย "verbs" เราต้องแยกแยะให้ออกระหว่าง Features และ Benefits ยกตัวอย่างเช่น “the iPhone’s slim shape makes it easy to fit in your pocket” ในตัวอย่างนี้จะเห็นว่า "Features" คือ "slim shape" ส่ว่น "Benefits" คือ "easy to fit in your pocket"
"Features" เป็นการบรรยายคุณสมบัติของสินค้า ยกตัวอย่างเช่น "24 Hr Battery Life" ส่วน "Benefits" คือ สิ่งที่ Feature เข้ามาช่วยทำให้ชีวิตของผู้ใช้ดีขึ้น สำหรับในกรณีนี้คือ "“you can go all day without plugging the phone into a charger”
มาถึงตรงนี้ อยากจะเน้นย้ำอีกครั้งว่า "ผู้ใช้ไม่ได้ให้ความสนใจเกี่ยวกับสินค้าของคุณ" (หรือให้ความสนใจน้อยมาก) แต่ผู้ใช้มีความสนใจว่าสินค้าหรือบริการของคุณให้อะไรแก่เค้า (ซึ่งข้อมูลของคุณควรเน้นในจุดนี้)
เราต้องพยายามเน้นในเรื่องของ "Benefits" ในเนื้อหาของเรา ซึ่งวิธีการที่ง่ายที่สุด คือ ทำรายการของ Feature ออกมาก่อน แล้วค่อยมาดูว่า แต่ละ Feature ให้ประโยชน์อะไรแก่ผู้ใช้ ยกตัวอย่างเช่น
Feature: 24 Hour Battery Life , Benefit : You can go all day without recharge
Feature: Run Fat Tires , Benefit : You don't have to change a tire if you get a puncture
สูตรง่ายๆในการเขียน Headline ให้น่าสนใจ คือ "เริ่มด้วย Verb"! ยกตัวอย่างเช่น
- Drive all day without getting tired
- Clean dishes in half the time it usually takes, using half the water
หาก Headling มีความน่าสนใจ ก็เป็นไปได้อย่างยิ่งว่า ผู้ที่เข้ามาเยี่ยมชมเว็บไซต์จะ click เพื่ออ่านข้อมูลเพิ่มเติมอื่นๆต่อไป ในแง่ของ SEO การใส่ Keyword เข้าไปใน Headline ถือว่าเป็นสิ่งที่ดี แต่ทั้งนี้ต้องไม่ทำให้ Headline สูญเสียความน่าสนใจ เพราะการทำ SEO เรายังมีโอกาสทำในจุดอื่นๆได้อีก แต่ Headline คือ โอกาสเดียวที่จะดึงความสนใจให้ผู้ที่เข้ามายังเว็บไซต์ของเราอ่านข้อมูลอื่นๆต่อไป
Benefits สามารถ "มองได้หลายมุม" ยกตัวอย่างเช่น "Opportunities to reduce pain" ก็ถือว่าเป็น "Benefit" ยกตัวอย่างเช่น “Clean a window in ten seconds using MicroClean technology” ซึ่ง "pain" ในที่นี้คือ "ปกติเราต้องใช้เวลามากกว่านี้ในการทำความสะอาดหน้าต่าง" ในตัวอย่างนี้ มีการประยุกต์ใช้ "proof" ซึ่งก็คือ "MicroClean Technology" ซึ่ง ผู้อ่านอาจยังไม่รู้ว่าคืออะไร ซึ่งเป็นการเปิดโอกาสให้เราได้อธิบายในบริเวณส่วนที่เป็นเนื้อหาต่อไป
ต่อไปเราลองมาดูเทคนิคการ Make Offer กันนะครับ สำหรับเทคนิคนี้ เราน่าจะคุ้นเคยกันดีอยู่แล้ว อย่างเช่น โฆษณาที่มักจะเขียนว่า ซื้อ 1 แถม 1 การใช้ Offer กับ Headline ช่วยดึงดูดความสนใจได้ดี การใช้ Offer เหมาะสำหรับในกรณีที่ผู้อ่านมีความคุ้นเคยกับสินค้าของคุณอยู่แล้ว หากสินค้าของคุณไม่เป็นที่รู้จัก หรือจำเป็นต้องอธิบาย การนำ Offer มาใช้ใน Headline อาจไม่มีประโยชน์มากนัก
2. Body
วัตถุประสงค์ของการเขียน Headline มีอยู่เพียงข้อเดียวคือ เพื่อดึงดูดความสนใจให้ผู้อ่านติดตามอ่านต่อในส่วนของ Body ในแต่ละบรรทัดของ Body มีวัตถุประสงค์เพื่อให้ผู้อ่านติดตามอ่านในบรรทัดต่อไป
สิ่งที่เราเขียนไว้ใน Headline ควรได้รับการอธิบายในส่วนของ Body ยกตัวอย่างเช่น หากคุณเริ่ม Headline ด้วย “Drive all day without getting tired“ ในบรรทัดแรกของ Body ก็ควรจะอธิบายว่า จะขับรถทั้งวันโดยที่ไม่เหนื่อยล้าได้อย่างไร ? ยกตัวอย่างเช่น “when you drive long distances, your body aches. You get tired. But there’s now a great way to avoid those aches and strains, with contour car seat covers that gently massage your pressure points”
เทคนิคในการเขียน Body แบบหนึ่งที่เป็นที่นิยมคือ "Three Steps Body Copy" คือ ประกอบด้วย Beginning, Middle และ Ending เหตุผลอย่างหนึ่งที่ทำให้วิธีการนี้ได้รับความนิยม คือ มันเป็นรูปแบบของ "Story" ซึ่ง Story เป็นวิธีการสื่อสารที่มีประสิทธิภาพมาก
การเขียน Body จะเริ่มเล่าเกี่ยวกับปัญหาก่อนในส่วนของ Beginning จากนั้นจะพูดถึงวิธีการแก้ปัญหาในส่วนของ Middle ในส่วน Endding เราจะสรุปใจความสำคัญ และบอกถึง Action ที่หากทำแล้ว จะสามารถช่วยแก้ปัญหาได้ อย่างเช่น โทรหาเราวันนี้! ลงทะเบียนวันนี้! เป็นต้น
3 The Close
ในบริเวณส่วนปิดท้าย ควร เน้นย้ำถึง Offers หรือ Benefits อีกครั้งหนึ่ง และควรจะบอกผู้อ่านให้ชัดเจนด้วยว่า ผู้อ่านจะต้องทำอย่างไร เพื่อที่จะได้ Offers อย่างเช่น โทรมาที่ หมายเลข xxxxx หรือส่ง mail มาที่ yyyyy เป็นต้น หากเว็บไซต์ของคุณเป็นเว็บไซต์ E-Commerce ผู้ใช้บริการอาจลังเลที่จะใช้บริการ ดังนั้นในบริเวณนี้ ควรสร้างความมั่นใจกับผู้เข้ามาเยี่ยมชม โดยการแสดง Safty Badge หรือ แสดงทะเบียนการค้า เพื่อสร้างความมั่นใจให้กับผู้ใช้บริการ ผู้ใช้บริการมักมีความกังวลในเรื่องของการโฆษณาเกินจริง ซึ่งหากเป็นไปได้ เราอาจมีการเสนอ Free Trial หรือ Money Back Guarantee สำหรับในกรณีที่ผู้เยี่ยมชมอ่านข้อมูลแล้ว แต่ยังลังเลที่จะ take action ใดๆ การเสนอ Offer แบบ Time Limited อาจสามารถช่วยได้ เพราะความเสียดายโอกาสจะช่วยเป็นแรงผลักดันให้เกิดการ Take Action
แหล่งที่มา : http://www.seotools.net/
Advertisment
8columns ให้บริการออกแบบเว็บไซต์สำหรับธุรกิจขนาดเล็ก ใช้ง่าย สวยงาม ราคาประหยัด รองรับ Smartphone และ Tablet สามารถดูสถิติผู้เยี่ยมชมได้ผ่าน Google Analytics ระบบแก้ไขข้อมูลใช้งานง่าย สามารถแก้ไขข้อมูลผ่านเว็บไซต์ได้โดยตรง แก้เสร็จแล้วสามารถเห็นการเปลี่ยนแปลงได้ทันที มีเว็บไซต์ตัวอย่างให้ทดลองก่อนตัดสินใจ สามารถดูข้อมูลเพิ่มเติมได้ที่ www.8columns.com หรือสอบถามข้อมูลได้ที่ http://www.facebook.com/8columns
Tags: ออกแบบเว็บไซต์, ออกแบบเว็บ, รับออกแบบเว็บไซต์, รับออกแบบเว็บ, ทำเว็บไซต์, รับทำเว็บไซต์, ทำเว็บ, รับทำเว็บ
Subscribe to:
Posts (Atom)