Home

Byphunsanit
, ,

สร้างภาพโมเสค (mosaic) อย่างง่ายๆ

โปรแกรมที่สามารถนำเอาภาพเล็กๆ มาต่อกันแล้วมองเป็นภาพใหญ่ ซึ่งเลีอนแบบมาจากศิลปะที่นำแก้วสีต่างๆ มาต่อเป็นภาพตามที่เราเห็นในโบสถ์คริสต์ที่เรียกว่าโมเสค (mosaic) นั่นเองครับ มีให้เลือกหลายตัว แต่ขอแนะนำ andreamosaic เพราะใช้งานง่ายและแจกให้ใช้ฟรีครับ ก่อนอื่นไปดาวน์โหลดโปรแกรมที่ http://andreaplanet.com/andreamosaic เมื่อติดตั้งโปรแกรมเสร็จแล้วจะเห็น icon หรือไปที่ programfile> AndreaMosaic > AndreaMosaic Cinescope
การสร้างภาพ Mosaic

  1. เครื่องหมายบวกใต้ คำว่า original images เลือกภาพต้นแบบที่ต้องการ (ถ้ามีหลายภาพกด + ไปเรื่อยๆ ครับ) ปรับออปชั่นต่างๆ ตามความพอใจครับ
    • Mosaic size คือขนาดภาพที่ต้องการ
    • Mosaic resolution คือความละเอียดของภาพ ยิ่งมากภาพยิ่งคมชัด แต่ไฟล์จะใหญ่ขึ้นไปด้วย แนะนำให้ตั้งไว้ที่ 100 dpi (dot per inch)
    • Use same tile up to คือจำนวนครั้งที่ยอมให้ใช้ภาพประกอบเล็กๆ ภาพเดิมซ้ำ ตั้งเป็น unlimited times
    • Pattern คือรูปแบบพื้นที่ของภาพเล็กๆ เลือกตามความพอใจ
    • Tile variants คือจะยอมให้กลับภาพประกอบแนะนำให้ใช่ original ,mirror ,rotated 90°
  2. คลิกปุ่ม select tiles จะมีหน้าต่างใหม่ขึ้นมา
    1. คลิก add folder เลือกโฟลเดอร์ที่เก็บภาพประกอบไว้ เมื่อเลือกได้แล้ว คลิก ok (บนหน้าต่างที่เล็กที่สุด)
    2. ถ้าภาพมีน้อยอาจจะ add folder อีกครั้ง
    3. คลิก save Archive (เป็นไฟล์ข้อมูลของภาพประกอบ เราอาจจะเอามาใช้ได้อีก โดยไม่ต้อง add folder อีก)
    4. เราจะเห็นภาพเล็กๆ จำนวนมาก คลิก ok
  3. คลิก create mosaic รอซักครู่ โปรแกรมจะดำเนินการ
    1. จากนั้นจะมีหน้าต่างถามว่า Mosaic complete! Do you want to open the destination folder คือมันถามว่าเราจะเก็บผลลัพธ์ไว้ที่ไหน ตอบ yes
    2. เลือกโพล์เดอร์ไว้เก็บไฟล์ผลลัพธ์
    3. เสร็จแล้ว

นอกจากสร้าจากภาพแล้ว โปรแกรมนี้ยังสามาถสร้างจากไฟล์วิดีโอได้ด้วย ทดลองปรับแต่งดูครับสร้างภาพโมเสค (mosaic) อย่างง่ายๆRT:

Byphunsanit
,

Photoshop cs5 สีเว็บหายไปไหน

ใครที่ใช้ adobe photoshio cs5 สำหรับทำเว็บอาจจะงงว่าจะดูดค่าสี rgb แบบ hex สำหรับตัด css หายไปไหน ความจริงยังมีอยู่ครับแต่ โดนซ่อนเอาไว้คลิกลูกศรตรง window color จะเห็นว่ามี web color slider ให้เลือก หลังจากนั้นก็จะเก็บค่าสีได้เหมือนกับใน imagereadyสี rgb ใน photoshop cs5

Byphunsanit
,

ส่งอีเมล์จาก hotmail ในชื่ออื่น

ต่อจาก ใช้ hotmail รับจดหมายจากเมล์อื่น ถ้าเราต้องการให้อีเมล์ที่ติดต่อกับลูกค้าเป็นอีเมล์บริษัทไม่ใช้ hotmail (จะดูเป็นมืออาชีพขึ้น) ไปที่เดิมครับ

  1. login เข้าเว็บ Hotmail
  2. ไปที่ ตัวเลือก ด้านขวาบน ใต้ชื่อ นามสกุล กดที่เครื่องหมายลูกศร
  3. คลิกตัวเลือกเพิ่มเติม
  4. ไปที่ ส่งและรับจดหมายจากบัญชีอีเมลอื่น
  5. คลิก เพิ่มบัญชีอื่นที่ใช้ส่งจดหมาย
  6. กรอกอีเมล์ที่ต้องการให้แสดงเมื่อส่งจดหมายออกในช่อง เพิ่มอีเมลแอดเดรส ถ้าเป็นอีเมล์ที่คุณได้ตั้งให้รับจดหมายจากเมล์อื่น ไว้ปกติจะเสร็จสมบูรณ์ในขั้นตอนนี้ครับ ถ้าไม่คุณอาจต้องรออีเมล์ยืนยันที่ส่งมาจาก Hotmail จากนั้นให้คลิกลิงค์ที่ส่งมาครับ

ในการส่งอีเมล์ให้เลือกลูกศรหลังอีเมล์คุณ จะเห็นอีเมล์ที่คุณสามารถใช้เป็นผู้ส่งได้ครับRT: ใช้ hotmail รับจดหมายจากเมล์อื่น

Byphunsanit
,

ใช้ hotmail รับจดหมายจากเมล์อื่น

เข้ามาทำงานตอนเช้าสิ่งแรกที่หลายๆ คนต้องทำคือเช็คเมล์ดูว่ามีใครติดต่อมาบ้างเป็นกิจวัตร อย่างน้อยก็อีเมล์ของบริษัท หรืออีเมล์มหาวิทยาลัย บางที่ก็บังคับให้เช็คอย่างน้อยวันละสองครั้ง หรืออาจใช้ outlook ,outlook express รับอีเมล์แทน มันก็จะเตือนทุกครั้งที่มีอีเมล์เข้ามาใหม่
แต่ถ้าออกไปทำงานนอกบริษัท หรือให้หลายเครื่องอาจะไม่สะดวกนัก ลองใช้วิธีตั้งให้ Hotmail ดึงจดหมายมาเก็บแทน

  1. login เข้าเว็บ Hotmail
  2. ไปที่ ตัวเลือก ด้านขวาบน ใต้ชื่อ นามสกุล กดที่เครื่องหมายลูกศร
  3. คลิกตัวเลือกเพิ่มเติม
  4. ไปที่ ส่งและรับจดหมายจากบัญชีอีเมลอื่น
  5. คลิก เพิ่มบัญชีอีเมล
  6. คลิก ตัวเลือกขั้นสูง.ใส่ข้อมูล (เหมือนกับการตั้งค่า outlook ,outlook express ครับ)
    • อีเมลแอดเดรส (อีเมล์ที่คุณต้องการรับเพิ่มเติม)
    • ชื่อผู้ใช้ POP3 คือยูเซอร์เนมอีเมล์ที่ต้องการรับเพิ่มเติม
    • รหัสผ่าน อีเมล์ที่ต้องการรับเพิ่มเติม
    • เซิร์ฟเวอร์จดหมายขาเข้า ถามจากผู้ดูแลระบบ โดยมากมักจะเป็น mail.ชื่อเครื่องเซอร์เวอร์หลังเครื่องหมาย @ ของอีเมล์ของคุณ
    • พอร์ตปกติคือ 110 หรือ 995 (ถ้ามีการเข้ารหัสในการรับอีเมล์)
    • คลิก เซิร์ฟเวอร์นี้ต้องใช้การเชื่อมต่อที่ปลอดภัย ถ้าต้องการให้มีการเข้ารหัสในการรับอีเมล์
    • คลิก เก็บสำเนาข้อความของฉันไว้ที่เซิร์ฟเวอร์ ถ้าต้องการให้เก็บอีเมล์ไว้สองที่คือใน Hotmail และบนอีเมล์ของบริษัท โดยถ้าคุณลบอีเมล์ใน Hotmail จะยังมีอีกสำเนาเก็บไว้ที่อีเมล์ของบริษัท ดังนั้นบางครั้งคุณต้องเข้าอีเมล์บริษัทเพื่อเข้าไปลบอีเมล์ออกบ้าง
  7. เสร็จแล้วคลิก ถัดไป รอ ” กำลังตั้งค่าบัญชีของคุณ” ถ้าการตั้งค่าถูกต้อง จะเข้าหน้า ให้เลือกว่าจะเก็บจดหมายแยกไว้อีกกล่องหรือรวมไว้ในกล่องขาเข้า
  8. บันทึกเป็นอันเรียบร้อยครับ

ปล. ถ้าออกจากงานหรือลาออกแล้วอย่าลืมไข้าไปลบออกนะ ^_^

RT: ส่งอีเมล์จาก hotmail ในชื่ออื่น

Byphunsanit
, ,

เขียน PHP ให้ทำงานช้า

ปกติคุณจะเห็นบทความที่จะทำให้ php ที่ทำงานเร็วอยู่แล้วเร็วขึ้นไปอีก แต่วันนี้เราจะทำสิ่งตรงข้ามกับสามัญสำนึกครับ
ทำไม่ต้องเขียนให้ทำงานช้า?
บางครั้งเพื่อที่จะทดสอบการทำงานของระบบเช่น ถ้าเซิร์ฟเวอร์ทำงานช้า JavaScript หรือ Ajax จะทำงานโดยสมบูรณ์รึเปล่า เขียน ajax แบบมี preload บางคนอาจจะทดสอบโดยเขียนลูปจำนวนมากๆ หรือ ดึงข้อมูลจากดาต้าเบสจำนวนมาก มีวิธีที่ง่ายกว่านั้น และที่สำคัญคือ php มีฟังก์ชั่นไว้ให้แล้ว คือ ฟังก์ชั่น sleep (ให้กระต่ายอย่าง php นอนรอไปก่อน)

<?php
echo 'เริ่มต้นเวลา '.date('h:i:s')."n";
/* เวลางีบกลางวัน หน่วยเป็นวินาทีครับ */
sleep(30);
echo 'สิ้นสุดเวลา '.date('h:i:s')."n";
echo 'ช้าไปเท่าไหร่เนี่ย';
Byphunsanit
,

อยากรู้มัยเว็บคุณใครรู้จักบ้าง

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

  • เริ่มจากอันดับพี่ใหญ่ในตำนาน google http://www.google.com ที่ใครหลายคนขาดไม่ได้ในการหาข้อมูล เข้าไปเซิร์จโดยใช้ site:ยูอาร์เอลเว็บของคุณ เช่น site:plusmagic.wordpress.com พบ 78 รายการ
  • อันดับต่อมาแขมป์เก่า yahoo ไปที่ http://siteexplorer.search.yahoo.com พิมย์ยูอาร์เอลเว็บของคุณลงไป เว็บของผมพบ 4 หน้า 35 ลิงค์ (ขนาดรวมลิงค์ที่ไปเว็บอื่นแล้วนะ ทำไม่ต่างกันอย่างนี้)
  • ผู้ท้าชิงตลอดกาล bing (windows live search ) ของพี่ใหญ่บิลเกต์ครับ ไปที่ http://www.bing.com/ เข้าไปเซิร์จโดยใช้ site:ยูอาร์เอลเว็บของคุณ เช่น site:plusmagic.wordpress.com (copy google มารึเปล่าเนี่ย) 2 รายการครับ เอ๋อไปเลย เป็นหน้าแรก และหน้าที่เคยเขียนไว้นานมากแล้ว

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

Byphunsanit
, ,

ปริศนาสวนลับ

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

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

เรื่องราวถ่ายทอดผ่านชีวิตของผู้หญิงสามรุ่น และตัวละครที่มีมิติ แต่ละคนมีแรงขับการกระทำของตนในการกระทำต่างๆ ผลักดันตนเองไปสู่จุดทีหวัง ผลักไสคนอื่นๆ ไปโดยเจตนาหรือความหลง
เหมาะกับผู้ชื่นชอบนวนิยายสืบสวนแนวจิตวิทยาหรือรักในหนังสือที่ใช้ภาษาสละสลวย
ผู้แต่ง เคต มอร์ตัน (kate morton)
แปลโดย ศศมากา

Byphunsanit
,

ส่งข้อมูลแบบ Ajax ด้วย JQuery

ถ้าสมมุติว่าฟอร์มที่ส่งข้อมูลเดิมของเราเขียน

…

เราจะแปลงให้ส่งข้อมูลแบบ Ajax ได้โดย แก้เป็น

<form id="testF" method="post">…</form>
<script src="plus/jQuery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){
/*เริ่มทำงานเมื่อโหลดหน้าเสร็จ*/
	$('#testF').submit(function(){
/* ทำงานเมื่อฟอร์มไอดี testF โดนซับมิต*/
		data=$('#testF').serialize()
/*ดึงค่าจากฟอร์มไอดี testF ทั้งหมด*/
		$.post('jQueryAjax.php' ,data ,function(response){
/* รูปแบบคือ $.post(ไฟล์ปลายทาง ,ข้อมูล ,ฟังก์ชั่นที่จะทำเมื่อไฟล์ปลายทางตอบกลับมา)*/
			alert(response);
		});
		return false;
	});
})
</script>

ตัวอย่าง
บันทึกเป็นไฟล์ชื่อ jQueryAjax.php

<?php
if($_POST['iusername'] != ''){
	echo 'ได้รับ ค่า iusername = '.$_POST['iusername']."nipassword = ".$_POST['ipassword'];
	exit();
}else{
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ส่งข้อมุลแบบ post ด้วย jQuery</title>
<script src="plus/jQuery/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){alert('12');
	$('#testF').submit(function(){
		data=$('#testF').serialize()
		$.post('jQueryAjax.php' ,data ,function(response){
			alert(response);
		});
		return false;
	});
})
</script>
</head>
<body>
<form id="testF" method="post">
  <label for="iusername">รหัสผู้ใช้</label>
  <input type="text" name="iusername">
  <br />
  <label for="ipassword">รหัสผ่าน</label>
  <input type="password" name="ipassword">
  <input type="submit" name="isubmit" value="ส่งข้อมูล">
</form>
</body>
</html>
<?php
}
Byphunsanit
, , ,

การ post source code บน blogspot (blogger)

bloger ไม่มีระบบช่วยในการโพสซอร์ทโค้ทเหมือนเวิร์ดเพลส์ แต่ก็แก้ได้ไม่ยากครับ
ขั้นตอนติดตั้งเพิ่มเติม

  1. ล็อกอินแล้วเข้าไปที่ > การออกแบบ > แก้ไข HTML
  2. ใส่ 
    <!--SYNTAX HIGHLIGHTER BEGINS-->
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDjango.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf ='http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script><!--SYNTAX HIGHLIGHTER ENDS-->

    ลงไปก่อน เท็ก
    บันทึกข้อมูล

  3. ถ้าต้องการโพสภาษาอื่นๆ นอกจาก css ,javascript ,php ,sql ,xml ให้เพิ่มบรรทัด
    ดูได้จากเว็บ http://alexgorbatchev.com

จากนั้นเราก็สามารถไปเขียนบทความตามปกติเมื่อต้องการใส่โค้ท มีให้เลือก 2 วิธี

  1. <pre class="brush:ภาษาที่ใช้">
ซอร์ทโค้ท</pre>

    วิธีนี้ข้อดีคือเป็นมาตราฐานไม่มีปัญหากับ RSS readers แต่โค้ทภายในจะต้องใช้ html escaped โดยสามารถใช้ Quick Escape ช่วยแปลงให้

  2. <script type="syntaxhighlighter" class="brush:ภาษาที่ใช้"><![CDATA[
ซอร์ทโค้ท
]]></script>

    วิธีนี้ข้อดีคือไม่ต้องแปลง code ภายใน แต่อาจมีปัญหา

    • RSS readers อาจจะสับสน
    • บางบราวเซอร์์จะสับสนถ้ามีการใส่

การปรับแต่งสามารถทำได้เหมือนกับบนเวิร์ดเพลส์

ตัวแปร หน้าที่ ตัวเลือก ค่าตั้งต้น
autolinks ทำให้ Uri ภายในสามารถ คลิกได้ true/false true
class-name กำหนด class เอง ชื่อ css class ”
collapse จะยุบส่วนแสดง code เอาไว้ก่อน ต้องกดดูจึงจะเห็น true/false False.
firstline ตัวเลขบรรทัด ตัวเลข 1
gutter แสดงตัวเลขบรรทัด true/false True
highlight Highlight บรรทัดที่ต้องการ ตัวเลขบรรทัดคั่นด้วย ,
htmlscript Highlight ส่วนที่เป็น html มีประโยชน์เวลาเขียน html ปนกับภาษาอื่นๆ true/false False
smart-tabs เปิดใช้ smart-tabs true/false True
tab-size ระยะห่างของ tab ตัวเลข 4
toolbar แสดง toolbar true/false True

ตัวอย่าง

<pre class="brush: js; ruler: true; first-line: 10; highlight: [2, 4, 6]">...</pre>

เรื่องที่เกี่ยวข้อง การ post source code บน WordPress

Byphunsanit
, ,

ajax คืออะไร jQuery ทำไมใช่และไม่ใช่ ajax

มีคนเข้าใจผิดว่า การใช้ JQuery ในเว็บแล้วจะทำให้เว็บนั้นเป็น Ajax ไปด้วย หรือถ้าจะเขียน ajax ต้องใช้ jQuery การอธิบายต้องเริ่มจากวิวัตนาการของเว็บตั้งแต่เริ่มแรกครับ

  • ในยุคแรกเว็บแบบดังเดิมมีเพียงภาษา html เพื่อแสดงผลที่ทำสำเร็จรูปเอาไว้แล้วเท่านั้น ใครก็ตามที่เข้าไปอ่านข้อมูลจะพบกับข้อมูลเดียวกัน เหมือนหนังสือเล่มเดียวกันที่ทุกคนจะอ่านเนื้อหาเดียวกันเพราะว่าภาษา html มีต้นแบบมาจากการกำหนดในการทำต้นฉบับหนังสือ จึงเรียกเว็บแบบ static
  • ต่อมามีการนำภาษาฝั่งเว็บเซิร์ฟเวอร์ มาใช้เพื่อตอบสนองความต้องการเฉพาะบุคลขึ้นมาเป็นเว็บแบบ dynamic โดยเว็บเซิร์ฟเวอร สร้างหน้าเว็บจากต้นแบบ (โดยใช้ภาษาสำหรับเขียนเว็บบนเว็บเซิร์ฟเวอร เช่น php ,asp ,cgi คำนวณและส่งผลลัพธ์ออกมาเป็นภาษา html ) โดยเริ่มจากระบบเว็บเมล์ (คงไม่อยากให้ใครมาอ่านเมล์คุณเหมือนยุคที่ 1 นะครับ) การกระทำกิจกรรมแต่ละครั้ง เช่น login เข้าสู่ระบบจะมีขั้นตอน
    1. เข้าหน้าล็อกอิน
    2. โปรแกรมเว็บเบราว์เซอร์จะสร้างหน้าจาก html ที่ได้จาก server
    3. พิมพ์ข้อมูลและส่ง
    4. ส่งข้อมูลให้ server ถ้า net ช้าเราจะเห็นหน้าขาวๆ เพราะเว็บเบราว์เซอร์ไม่มีหน้าเว็บที่จะแสดง ระหว่างรอผลตอบกลับจาก server
    5. ถ้าชื่อผู้ใช้และรหัสผ่านถูกต้องก็จะเห็นหน้าต้อไป ถ้าไม่ก็จะโดนสั่งให้ไปหน้า login อีกครั้ง
    • เว็บยุคต่อมาเนื่องจากภาษา html ทำได้แค่แสดงหน้าตา ทำลิงค์และจัดข้อความเท่านั้นจึงมีการนำภาษา JavaScript ซึ่งทำงานบนเว็บเบราว์เซอรมาช่วย เรียกว่า dhtml (dynamic html) โดยมันใช้เพื่อ
      1. นำมาตรวจสอบข้อมูล เช่น ถ้าผู้ใช้ลืมใส่รหัสผ่านและกดปุ่ม login ระบบจำส่งข้อมูลไปตรวจสอบบนเว็บเซิร์ฟเวอร์ โดยผลลัพธ์แน่นอนว่าจะต้องโดนปฏิเสธไม่ให้เข้าระบบ JavaScript จะช่วยตรวจสอบเบื้องต้นเช่น ถ้าไม่ได้กรอกชื่อผู้ใช้หรือรหัสผ่าน ก็จะมีข้อความเตือนให้กรอกข้อมูลให้ครบก่อน การบังคับให้กรอกอีเมล์ ให้ใส่ได้เฉพาะตัวเลข ก่อนจะยอมให้ส่งข้อมูลไปตรวจสอบบนเว็บเซิร์ฟเวอร์ เมื่อข้อมูลทั้งหมดถูกต้อง
      2. ตกแต่งให้หน้าเว็บมีความน่าสนใจมากขึ้น มี animation เช่น ทำเป็นรูปตัวการ์ตูนวิ่งตามเมาส์ ตัวหนังสือวิ่ง ซ่อนบางส่วนไว้ไม่แสดงจนกว่าคลิกที่บางจุด
      3. คำนวณเล็กๆ น้อยๆ เช่นบวกราคาสินค้าที่ต้องจ่าย
      4. อำนวยความสะดวกมักจะเป็น ปุ่มเลือก / ทั้งหมดในอีเมล์เป็นต้น

      วิธีนี้มีข้อดีคือ

      1. เว็บเซิร์ฟเวอร์ทำงานน้อยลง เพราะบางส่วนจะทำที่เครื่องผู้ใช้
      2. ผู้ใช้ไม่ต้องเสียเวลารอและกรอกข้อมูลใหม่ทั้งหมด โอกาสที่จะรอการทำงาน ซึ่งเห็นเป็นหน้าขาวน้อยลง (ช่วยให้รู้สึกว่าเร็วขึ้น )
      3. ผู้ใช้ได้ใช้เว็บที่สวยงาม น่าสนใจใช้สะดวก
      4. นอกจากนี้ยังนำ JavaScript มาช่วยในการคำนวณเล็กๆน้อย เข่น บวกราคาสินค้าทั้งหมด
      • ต่อมา พ.ศ. 2545 บริษัทไมโครซอฟท์ได้ทำการคิดค้น XMLHttpRequest ขึ้นมาเป็นทางเลือกในการเขียนโปรแกรมบนเว็บเพจ เพื่อใช้ติดต่อกับเว็บเซิร์ฟเวอร์ ในการแลกเปลี่ยนข้อมูลโดยไม่ต้องส่งข้อมูลหน้าเว็บทั้งหมดมาใช้ใน Outlook Web Access ที่มาพร้อมกับ Microsoft Exchangeเว็บเซิร์ฟเวอร 2000 โดยต้องใช้กับ ไออี (อินเทอร์เน็ตเอกซ์พลอเรอ) เท่านั้นต่อมาเว็บเบราว์เซอร์อื่นๆ เช่นจาก มอซิลลา ไฟร์ฟอกซ์ได้นำแนวคิดของ XMLHttpRequest ไปใส่ในเบราว์เซอร์ของตนด้วยจนปัจจุบันได้กลายเป็นมาตรฐานที่ทุกเว็บเบราว์เซอร์ต้องมี เมื่อ กูเกิล ได้เปิดบริการจีเมล ซึ่งใช้ XMLHttpRequest จึงเริ่มทำให้มีการใช้อย่างกว้า
        งขวางขึ้น
        เทคนิคนี้ไม่มีชื่อเรียกอย่างเป็นทางการจน Jeese Jams Garett นั้นเป็นผู้ที่ได้บัญญัติคำว่า เอแจ็กซ์ ขึ้นเมื่อปีพ.ศ. 2548 ซึ่งนึกขึ้นได้ระหว่างที่เขากำลังอาบน้ำ เพื่อหาคำสั้นๆ สำหรับอธิบายให้ลูกค้าของเขาทราบเกี่ยวกับเทคโนโลยีต่างๆ ที่ต้องการจะนำเสนอ
        เอแจ็กซ์ (AJAX – Asynchronous JavaScript And XML) เป็นชื่อของเทคนิคที่จะเปลี่ยนแปลงบางส่วนของหน้าเว็บเท่าที่เปลี่ยนไปจริงๆ โดยไม่ต้องเปลี่ยนส่วนที่ไม่เกี่ยวข้อง
        หลักการทำงานคือ
        วิธีการทำงานของเว็บแอปพลิเคชันแบบดังเดิมนั้น โดยปกติแล้วเมื่อผู้ใช้ทำการร้องขอข้อมูลจากเซิร์ฟเวอร์ ตัวเว็บเบราว์เซอร์จะทำการส่งข้อมูลการร้องขอกับเว็บเซิร์ฟเวอร์ และที่เว็บเซิร์ฟเวอร์จะทำการประมวลผลจากการร้องขอที่ได้รับ และส่งผลลัพธ์เป็นหน้า HTML กลับไปให้ผู้ใช้ วิธีการข้างต้นเป็นวิธีการแบบการร้องขอและการตอบรับ (Request and Response) ซึ่งผู้ใช้จะต้องรอระหว่างที่เซิร์ฟเวอร์ประมวลผลอยู่ ซึ่งเป็นหลักการทำงานแบบ Synchronous
        แต่การทำงานของเว็บแอปพลิเคชันที่ใช้เทคนิคเอแจ็กซ์จะเป็นการทำงานแบบ Asynchronous หรือการติดต่อสื่อสารแบบไม่ต่อเนื่อง โดยเซิร์ฟเวอร์จะทำการส่งผลลัพธ์เป็นเว็บเพจให้ผู้ใช้ทันทีโดยไม่ต้องรอให้ ประมวลผลเสร็จก่อน หลังจากนั้นเว็บเพจที่ผู้ใช้ได้รับจะทำการดึงข้อมูลในส่วนต่างๆทีหลัง หรือจะดึงข้อมูลก็ต่อเมื่อผู้ใช้ต้องการเท่านั้น (ทำงานอยู่เบื้องหลัง)

      วิธีนี้มีข้อดีคือ

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

        เพราะว่า เว็บเบราว์เซอร์แต่ละตัวมีความแตกต่างกันมาก การเขียนโปรแกรมต้องคำนึงถึงความแตกต่างของแต่ละตัว โดยเฉพาะไออีต่างเวอร์ชั่นกันก็อาจจะเขียนต่างกันอย่างสิ้นเชิง จึงมีการเขียนไลบรารี่ (Library) มาช่วยแก้ปัญหานี้หลายตัว เช่น dojo ,ext และ JQuery เป็นหนึ่งในนั้น โดยเป็นไลบรารี่ที่สามารถใช้เขียนงานที่เป็น dhtml และ ajax

        สรุปคือ

        1. เป็น dhtml เมื่อใช้ javascript เช่นพวก accordion tab เปลี่ยนการแสดงผลหน้าเว็บ
        2. เป็น Ajax ถ้ามีการทำงานโดยแลกเปลี่ยนข้อมูลกับเว็บเซิร์ฟเวอร์ เฉพาะที่จำเป็นเท่านั้น เช่น ใช้คำสั่งส่งข้อมูลไปเว็บเซิร์ฟเวอร์และรับข้อมูลมาเปลี่ยนเฉพาะที่เปลี่ยนไปจริงๆ

        Proudly powered by WordPress | Theme: Appointment by Webriti