Hello Kitty, Bad Badtz-Maru

Tech&Tip

วิธีสร้าง QR-Code ได้เองแบบฟรี
  

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

QR-Code สามารถอ่านอะไรได้บ้าง
ในช่วงเริ่มแรก QR Code สามารถอ่านได้เขียน ข้อมูล text , url ,email ,เบอร์โทรศัพท์ แต่ปัจจุบัน QR Codeพัฒนาให้สามารถอ่าน ข้อมูลรูปแบบอื่นๆได้มากขึ้น เช่น VCard, Email Address, Event Calendar และ WiFi Network และยังสามารถปรับตกแต่งสีของ QR Code ได้ตามใจชอบอีกด้วย เอาละครับเราพอจะรู้เรื่อง QR Code พอคราวๆ วันนี้ผมจะเสนอ เว็บไซต์ที่บริการ สร้าง QR Code ขึ้นมาฟรีๆโดยมีทั้งเว็บไซต์บริการ ของประเทศไทย ซึ่งทำให้เราสามารถเข้าใจได้ง่ายขึ้นผมของยกตัวอย่างมาสัก 4 เว็บไซต์
ตัวอย่างเว็บไซต์บริการสร้าง QR Code ฟรี!!


http://qrcode.ais.co.th/php/newqr-th.php (ของ Ais ประเทศไทย)   http://qrcode.thaiguild.com/ (ของไทยเช่นกัน)   http://zxing.appspot.com/generator/http://qrcode.kaywa.com/ Note: QR-Code จะมีเส้นจำนวนมากหากเราใส่ข้อมูลมาก และอาจจะส่งผลให้การอ่าน QR-Code ทำงานช้าลง และอาจจะอ่านไม่ได้เลย QR-Code ที่ถูกอ่านไปยัง URL จึงเป็นที่นิยมมากที่สุด   http://qrcode.ais.co.th/php/newqr-th.php (ของ Aisประเทศไทย)









การทำภาพสไลด์

1. การทำภาพสไลด์ต้องอาศัย โค้ดสองส่วนด้วยกันคือ java script ซึ่งเป็นส่วนควบการทำงานหลักของการสไลด์ภาพ และ CSS เป็นส่วนของการจัดรูปแบบในการนำเสนอภาพให้มีความสวยงามเหมาะสมตรงตามความต้องการที่ผู้จัดทำต้องการนำเสนอ


2. เตรียมรูปภาพที่ต้องการนำไปทำสไลด์  รูปภาพที่เราจะนำไปทำสไลด์นั้นควรมีขนาดของรูปภาพเท่ากันทุกรูป สิ่งนี้จำเป็นเพราะจะทำให้ภาพที่สไลด์ออกมานั้นมีความสวยงามสม่ำเสมอ และอีกอย่างที่จะต้องเตรียมก่อนทำภาพสไลด์นี้ก็คือ ไฟล์ ที่ควบคุมการทำงาน(Java Script) จำนวน 2 ไฟล์(jquery.js,easySlider1.7.js) และไฟล์ css 1 ไฟล์(screen.css)

3. เมื่อเตรียมสิ่งที่กล่าวมาในข้างต้นเรียบร้อยแล้ว เราก็ลงมือเขียนโค้ดได้เลย และในส่วนของการเขียนโค้ดลงไปนั้นจะมีอยู่สองส่วนด้วยกันคือ
                               3.1 เขียนโค้ดลงไปในส่วนของ Head (<Head> ...โค้ด... </Head>)ซึ่งเป็นส่วนของการกำหนดค่าการทำงานต่างๆ โดยโค้ดที่จะต้องนำไปเขียนไว้ในส่วนนี้ก็คือ
                               การ import ไฟล์ CSS เข้ามา
<link href="../css/screen.css" rel="stylesheet"type="text/css" media="screen" />
                                 การ import ไฟล์ java script ที่เตรียมไว้เข้ามาใช้
<script type="text/javascript" src="../js/jquery.js"></script>
<scripttype="text/javascript"src="../js/easySlider1.7.js"></script>
·                              เขียนโค้ด java script เพิ่มเติมเพื่อสั่งให้มีการทำงาน โดยพิมพ์ตามด้านล่างนี้
<script type="text/javascript">
                              $(document).ready(function(){            
                                $("#slider").easySlider({
                                 auto: true, //ภาพสไลด์เองอัตโนมัติ(True)
                              continuous: true,//การกำหนดให้มีการวนภาพซ้ำ(Repeat)
                              numeric: true//เมื่อกดตัวเลขภาพจะสไลด์ตามลำดับตัวเลขนั้น
                                          });
                           });           
</script>
3.2 เขียนโค้ดลงไปในส่วนของ body(<body>...โค้ด...</body>)เพื่อให้แสดงผล(ให้เขียนโค้ดตรงตำแหน่งตามที่ต้องการให้แสดงผล) โค้ดดังกล่าวดูไปจากด้านล่างนี้
<div id="container">

<div id="header">//กำหนดส่วนหัวของรูป
<h1>ข้อความที่เป็นห้วข้อของรูปที่สไลด์</h1>
 </div>
                                <div id="content">
 <div id="slider">//ส่วนของภาพที่นำไปทำสไลด์
                             <ul>                                                     
                            <li><a href="#ลิงค์"><img src="รูปที่1(image1.jpg)" alt="คำอธิบายแทนภาพ" /></a></li>

<li><a href="#ลิงค์"><img src="รูปที่2(image2.jpg)" alt="คำอธิบายแทนภาพ" /></a></li>                            .
                            </ul>
                           </div>
               </div>
</div>


การทำ counter แบบตัวอักษร

 การทำ counter แบบตัวอักษร ที่สามารถแยกนับแต่ละหน้าเว็บได้ สำหรับผู้ที่ทำเว็บเพจ การใช้ counter ฟรีที่มีให้บริการตามที่ต่าง ๆ ก็ดูสวยดี แต่หากต้องการที่จะทำการนับ จำนวนผู้ที่เข้าชม เว็บเพจของเราในแต่ละหน้าแยกจำนวนออกจากกัน จะทำอย่างไร พอดีไปเจอ CGI ทำ counter แบบง่าย ๆ และเห็นว่าน่าใช้งานดี เลยถือโอกาสนี้ นำมาฝากกัน ก็สำหรับผู้ที่ใช้โฮสต์แบบที่รองรับ CGI เช่น Hypermart.net เท่านั้นนะครับ โดยผมได้นำมาจากhttp://www.utilmind.com ซึ่งมีความสามารถพิเศษคือ เป็น counter แบบตัวเลขที่ทำงานโดยการเรียก CGI โดยไม่ต้องระบุอะไรมากนัก โปรแกรมจะทำการตรวจสอบชื่อของไฟล์ html ที่เรียกและสร้างฐานข้อมูลสำหรับการนับ พร้อมทั้งแสดงผลเป็นตัวเลขได้ทันที ดูตัวอย่างการทำงานได้ จากการนับ จำนวนผู้เข้าชม ในแต่ละหน้าที่ด้านล่างขวามือ นี่แหละครับ การใช้งานและติดตั้งก็ง่ายมาก ๆ โดยทำตามขั้นตอนต่อไปนี้
1. ดาวน์โหลด source code และทำการ unzip เก็บไว้ในโฟล์เดอร์ /cgi-bin/counter/

2. ไฟล์ข้างในจะประกอบด้วย
counter.cgi คือไฟล์ที่เป็น cgi สำหรับรัน
counter.txt คือไฟล์สำหรับเก็บข้อมูลการนับ

index.html คือตัวอย่างการใส่ code สำหรับการเรียก counter.cgi

3. ทำการ upload ทั้งหมดไปเก็บไว้ที่ Server ของ hypermart โดยใช้ FTP Program

4. ไฟล์ counter.cgi ขณะที่ Upload ต้องเลือก mode แบบ ASCII ด้วยและเปลี่ยน mode เป็น 755 ก่อน

5. ที่หน้าเว็บเพจไหน หากต้องการทำการนับจำนวน ให้หาที่ว่าง ๆ ใส่ code นี้ลงไป
จำนวนผู้เข้าชม <!--#Include virtual="/cgi-bin/counter/counter.cgi"--> ครั้ง
หรือดูตัวอย่างจากไฟล์ index.html ที่ดาวน์โหลดไปก็ได้

6. ตรวจสอบใน source code ของไฟล์ html ก่อนนะครับว่าไม่มีสัญญลักษณ์ต่าง ๆ ปะปนอยู่ด้วย

7. หลังจากนั้น โปรแกรมจะทำงานโดยอัตโนมัติเมื่อมีผู้เรียกดูหน้าเว็บเพจ โดยที่เราไม่ต้องระบุชื่อไฟล์ html               เลย

8. สามารถตรวจสอบจำนวนของ counter ได้โดยการเรียกดูไฟล์ /cgi-bin/counter/counter.txt 



ไม่มีความคิดเห็น:

แสดงความคิดเห็น

สมัครสมาชิก: ความคิดเห็น (Atom)