Archive for the ‘Ajax’ Category

ใช้ประโยชน์จาก Google Translate ดีกว่า

Tuesday, February 17th, 2009 |

     จากที่เคยเล่าไปในครั้งก่อนว่าตอนนี้ Google Translate ได้มีภาษาไทยแล้วนั้น ก็ไปนึกถึงการใช้งาน Google API เพื่อจัดการแปลข้อความบนหน้าเว็บของเราเองเมื่อก่อนตอนที่ยังไม่มีภาษาไทย ตอนนี้ก็มีภาษาไทยมาแล้วก็ต้องเอามาทดสอบกันแล้ว เพราะคิดว่ามันจะมีประโยชน์เหมือนกันหากนำมาใช้งานในการแปลข้อความ (ถึงมันจะแปลแบบตลกๆไปบ้างก็ยังดีกว่าที่ไม่มีใช้)

     สำหรับการใช้แบบง่ายที่สุดก็มาลองเขียนโค๊ดแบบนี้ดูเลยครับ

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
    <title>Google Translate</title>
    <script type=”text/javascript” src=”http://www.google.com/jsapi” mce_src=”http://www.google.com/jsapi”></script>
    <script type=”text/javascript”>

    google.load(”language”, “1″);

    function initialize() {
      google.language.translate(’Hello’, “en”, “th”, function(result) {
        if (!result.error) {
          var container = document.getElementById(”translation“);
          container.innerHTML = result.translation;
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>
</head>

<body>
<div id=”translation”></div>
</body>
</html>

เมื่อแสดงผลก็จะแสดงออกมาดังนี้

translate_api-001.jpg
จะแสดงผลคำว่า สวัสดี ออกมาแทนที่จะแสดงคำว่า Hello

     โดยที่โค๊ด google.language.translate(’Hello’, “en”, “th”, function(result) จะเป็นตัวกำหนดว่าจะให้แปลจากภาษาอะไร ไปยังภาษาอะไรนะครับ แต่เวลาใช้งานจริงๆคงไม่มีใครเอาข้อความที่จะแปลไปไว้ในสคริป (ตรงสีแดง) แบบนี้แน่นอน ดังนั้นการใช้งานจริงๆเราต้องทำการกำหนด div id มาตัวหนึ่งเพื่อเก็บข้อความที่ต้องการแปลทั้งหมดไว้ แล้วจึงค่อยนำข้อความทั้งหมดนั้นมาใช้งานครับ ดังนี้

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
  <head>
    <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
    <title>Google Translate</title>
    <script type=”text/javascript” src=”http://www.google.com/jsapi” mce_src=”http://www.google.com/jsapi”></script>
    <script type=”text/javascript”>

    google.load(”language”, “1″);

    function initialize() {
      var text = document.getElementById(”text“).innerHTML;
      google.language.translate(text, “en”, “th”, function(result) {

        if (!result.error) {
          var container = document.getElementById(”translation“);
          container.innerHTML = result.translation;
        }
      });
    }
    google.setOnLoadCallback(initialize);

    </script>
</head>

<body>
<div id=”text”>Hello<br><br>Who are you? <br />What’s your name?</div>
<br /><br />
<div id=”translation”></div>
</body>
</html>

     เพียงเท่านี้ก็จะได้การแสดงผลดังนี้

translate_api-002.jpg
คำง่ายๆก็แปลได้ถูก แต่บางทีเจอประโยคยากๆ ก็งงเอาเหมือนกัน 555+

     ก็เป็นอีกหนึ่งทางเลือกที่จะนำไปใช้ในเว็บไซต์ได้ ไอเดียก็คือ อาจจะทำเป็นปุ่มไว้หลังเนื้อหา แล้วเมื่อคลิ๊กที่ปุ่มก็อาจจะเปิด POPUP แปลออกมาแสดงก็ได้ ซึ่งก็คงเป็นอีกไอเดียหนึ่งที่สามารถนำไปใช้งานได้ครับ หรือจะทำเป็นเว็บไซต์แปลภาษาเหมือน Google Translate ก็ไม่ว่ากัน เหอๆๆๆ

อ่านเพิ่มเติมได้ที่
http://code.google.com/apis/ajaxlanguage/documentation/

AJAX ชื่อนี้ใครๆก็อยากทำเป็น

Wednesday, February 20th, 2008 |

สวัสดีเพื่อนๆที่เข้ามาอ่าน Blog บ้าๆบ่นๆของผม ซึ่งผมก็เขียนเรื่อยเปื่อยอ่ะนะไม่ว่าจะมีสาระ หรือ ไร้ซึ่งสาระ จริงบ้าง หลอกบ้าง (ฮา….) ก็อย่าว่ากัน เอาเป็นว่า หากท่านไปมันมีประโยชน์ก็บอกต่อๆกันไป หากไร้ประโยชน์ก็มองข้ามมันไปซะนะ

วันนี้เขียนไรดีหว่า เพราะอยากนั่งเขียนทุกวันนะ เพราะปีนึงผมก็จะมีข้อความที่ผมเขียนไป 365 ข้อความ ซึ่งเยอะเหมือนกันนะเนี่ย เอาเป็นว่าวันไหนที่ผมไม่ได้เขียนผมก็จะมาเขียนในวันหลังแทน อิอิ

วันนี้ผมขอแนะนำเจ้า AJAX ละกันว่ามันคืออะไร?

มีหลายๆคนคลั่งใคล้และอยากศึกษาเจ้า AJAX เป็นอย่างมาก มีอยู่ช่วงหนึ่งที่มีคนบ้าและอยากศึกษา AJAX เป็นอย่างมาก เรียกได้ว่าช่วงนั้นใครไม่พูดถึง AJAX นี่ถือว่า เชย สุดๆเลยก็ว่าได้ สำหรับ Ajax นั้นดังในปี 2005 โดย Google ครับ โดย Google ได้ทำที่ Google Suggest
http://www.google.com/webhp?complete=1&hl=en

ajax001.jpg 

จากรูปจะเห็นว่าเพียงแค่ผมพิมพ์ mocy  มันมี list ออกมาให้เลือกเลยครับว่าแต่ละ keyword มีผลที่จะค้นหาได้กี่อัน เจ๋งดีไหมครับ

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

สำหรับใครที่อยากจะศึกษา AJAX ควรจะรู้อะไรบ้าง
- HTML / XHTML
- JavaScript
- เขียน web application เป็น เช่น php , asp , perl หรือภาษาอื่นๆ

AJAX = Asynchronous JavaScript and XML
Ajax ไม่ได้เป็นโปรแกรมใหม่เลยครับ มันเป็นเทคนิคในการสร้างยังไงให้ดีที่สุด ไวที่สุด และสร้างเว็บให้ interactive ให้มากที่สุด โดยที่ Ajax นั้นใช้หลักการของ XMLHttpRequest ของ JavaScript มาทำงานครับ ตัว Ajax นั้นทำงานบน Web Standards มีอะไรบ้างนะเหรอ ก็มี
- JavaScript
- XML
- HTML
- CSS

ajax002.jpg 

โดยที่ Ajax นั้นสนับสนุนทุกบราวเซอร์เลยก็ว่าได้ครับ เพราะใช้ได้ทั้ง Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, และ Netscape 7 โอ้เยี่ยมจริงๆ

สำหรับรายละเอียดมากกว่านี้ลองไปอ่านเพิ่มที่
http://www.thaimisc.com/r/view.php?id=581
ก็แล้วกันนะครับ แค่แนะนำแค่นี้ก็พอ

Editor's Talk!

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

นายแม็ค

ค้นหา :