Web Ofebia contents

การทำ multiple backgrounds ด้วย CSS3 เพื่อทำให้สามารถใช้รูปภาพเป็นพื้นหลังได้หลายๆรูป

2012-02-05T15:24:09Z

ปัจจุบันนี้ CSS3 กำลังเป็นที่นิยมเพิ่มขึ้นในหมู่นักพัฒนาเว็บไซต์ เนื่องด้วยความสามารถใหม่ที่ CSS3 สามารถทำได้นั้น ทำให้ผู้ ที่พัฒนาเว็บไซต์นั้นสามารถเพิ่มลูกเล่น หรือทำงานต่างๆที่ต้องอาศัยความพยายามมากได้ง่ายขึ้น

วันนี้เลยเอาเรื่องการทำ Multiple Backgrounds ซึ่งเป็นการเขียนกำหนดค่าให้กับตัว background โดยความสามารถของเจ้า CSS3 ตรงส่วนนี้คือ สามารถทำให้หนึ่ง element มีพื้นหลังที่เป็นรูปภาพได้หลายอัน ดูวิธีทำตามตัวอย่างข้างล่าง

CSS3

.background:url(background-1.png) center 90% no-repeat,
                   url(background-2.jpg) top left no-repeat;

ผลลัพธ์

จากโค้ด CSS3 จะเห็นว่าใช้โค้ดเดิมก็คือ background แต่ใช้ comma เพื่อแยกค่าของทั้ง 2 รูปออกจากกัน โดยจะเรียงลำดับตามไปเรื่อยๆ ถ้ามีหลายรูปก็ใช้ comma กั้น เพื่อจะกำหนดค่าของพื้นหลังอันใหม่ โดยการเขียนโค้ดจะเรียงลำดับตามรูป ภาพพื้นหลังที่อยู่หน้าสุดไปยังพื้นหลังที่อยู่หลังสุด จากรูปจะเห็นว่าโลโก้ favicon ของ web.ofebia จะอยู่หน้าสุด ซึ่งในโค้ดของคลาส background ก็ต้องเขียนไว้เป็นอันดับแรก นั่นก็คือ background-1.png และเมื่อกำหนดค่าหมดแล้วก็คั่นด้วย comma เพื่อที่จะกำหนดค่าพื้นหลังอันที่สอง และอื่นๆต่อไป

ตัวอย่างโค้ดที่ใช้ทำรูปผลลัพธ์

HTML

<div class="background">
<p>ทดสอบการใช้ Multiple Backgrounds ของ CSS3</p>
</div>

CSS3

.background{ 	
width:580px; 	
height:330px; 	
padding:0; 	
margin:0; 	
background:url(background-1.png) center 90% no-  repeat, 			   
                  url(background-2.jpg) top left   no-repeat; 
}
.background p{ 	
margin:0; 	
padding:30px 0 0 0; 	
text-align:center; 	
color:#fff; 	
font:bold 16px/18px Tahoma, Geneva, sans-serif; 
}

Browser ที่สามารถแสดงผลได้ ได้แก่ IE9+, Firefox 3.6+, Chrome 4+, Safari 3.1+, Opera 10.5+

ขอบคุณพื้นหลัง Typographic Background ของ parkzizz ^^

CSS3 Click Chart

2012-02-05T14:04:57Z

เว็บไซต์ที่สอนเกี่ยวกับตัว Systax ของ CSS3 ที่น่าสนใจมากเว็บไซต์หนึ่ง ซึ่งตัวเว็บไซต์เองก็ใช้งานง่ายและวิธิการสอนก็ไม่ยาก มีตัวอย่างและโคดให้ดูทำให้สามารถเข้าใจการทำงานของ CSS3 ได้ง่ายดาย

สร้างสุริยุปราคาในอวกาศด้วย Photoshop

2012-02-04T14:21:48Z

สวัสดี วันนี้มีวิธีสร้างสุริยุปราคาในอวกาศด้วย Photoshop มาฝาก

1. สร้างเอกสารใหม่ กำหนดสี Foreground เป็น #500000 และสี Background เป็นสีดำ #000000 จากนั้นให้ไปที่ Filter > Render > Clouds จะได้ดังรูป

2. เลือก Edit in Quick Mask Mode (Q) แล้วเลือกเครื่องมือ Gradient แบบ Linear Gradient โดยลากจากด้านล่างไปด้านบน จะได้ดังรูป

จากนั้นเลือกกลับสู่ Standard Mode (Q) จะเห็นว่ามี Selection ด้านล่างของรูป

3. ต่อไปจะเปลี่ยนสีให้กับส่วนที่เลือกไว้ โดยไปที่ Image > Adjustment > Hue/Saturation กำหนดให้ Edit = Master, Hue = -155, Saturation = -30, Lightness = -10 ดังรูป

จะได้ดังรูป

กดปุ่ม Ctrl + D เพื่อยกเลิก Selection

4. สร้าง Layer ใหม่ และเติมสีดำลงไป จากนั้นให้ไปที่ Filter > Noise > Add Noise กำหนดค่า Amount = 26%, Distribution = Gaussian และเลือก Monochromatic ดังรูป

เปลี่ยน Layer style เป็น Screen จากนั้นไปที่ Image > Adjustment > Levels กำหนดค่าดังรูป

จะได้ดังรูป

5. ต่อไปให้เลือกเครื่องมือ Eraser Tool เลือกหัวแปรงแบบนุ่ม แล้วนำมาลบลงบนชิ้นงานเป็นหย่อมๆ จะได้ดังรูป

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

ใช้เครื่องมือ Elliptical Marquee สร้างครึ่งวงกลม ที่พื้นผิวของแมกมา จะได้ดังรูป

จากนั้นให้ไปที่ Select > Inverse เพื่อเลือกในส่วนที่ตรงกันข้ามกับที่เลือกไว้ แล้วกดปุ่ม Delete จะได้ดังรูป

กดปุ่ม Ctrl + D เพื่อยกเลิก Selection ต่อไปให้คัดลอก Layer ดวงอาทิตย์ โดยกดปุ่ม Ctrl + J เสร็จแล้วกลับไปเลือก Layer ดวงอาทิตย์ต้นฉบับ แล้วไปที่ Filter > Blur > Gaussian Blur ให้ตั้งค่า Radius = 14.1 pixels ดังรูป

จะได้ดังรูป

ต่อไปให้กำหนดค่า Layer Style โดยคลิกเลือกที่ Color Overlay แล้วตั้งค่าดังรูป

จะได้ดังรูป

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

7. ขั้นตอนต่อไปให้กลับไปที่ Layer ของดวงอาทิตย์ที่ได้คัดลอกไว้ ให้กดปุ่ม Ctrl + คลิกที่ Thumbnail ของ Layer จะได้ Selection ขึ้นมา ดังรูป

จากนั้นไปที่ Filter > Distort > Spherize ตั้งค่าตามรูปด้านล่าง

กดปุ่ม Ctrl + D เพื่อยกเลิก Selection จะได้ดังรูป

8. กำหนดค่า Layer Style เริ่มจาก Inner Shadow ตั้งค่าดังรูป

Outer Glow

Inner Glow

Color Overlay

จะได้ดังรูป

9. ขั้นตอนต่อไป ให้สร้าง Layer ใหม่ ใช้เครื่องมือ Elliptical Marquee เพื่อสร้างรูปครึ่งวงกลมและเติมสีดำลงไปดังรูปด้านล่าง

กดปุ่ม Ctrl + D เพื่อยกเลิก Selection แล้วไปที่ Filter > Blur > Gaussian Blur ตั้งค่า Radius = 14.1 pixels ดังรูป

จะได้

10. ขั้นตอนสุดท้าย ให้สร้าง Layer ใหม่ เติมสีดำลงไป แล้วเปลี่ยน Layer Mode เป็นแบบ Screen จากนั้นไปที่ Filter > Render > Lens Flare กำหนดค่า Brightness = 100% ค่า Lens Type = 50-300mm Zoom และกำหนดตำแหน่ง Flare Center ดังรูป

เสร็จแล้ว

ทดสอบ HTML5 Web Storage

2012-01-30T22:04:39Z

การใช้งาน HTML 5 หากไม่ได้ทดสอบคุณสมบัติสำคัญในส่วนของการจัดเก็บข้อมูล คงจะใช้งาน HTML5 ได้ไม่เต็มที่ จาก W3School มีเอกสารเรื่อง HTML5 Web Storage สอนการใช้งาน localStorage Object และ sessionStorage Object ให้ได้ทดลองทำตาม โดยที่ localStorage Object นั้นเป็นการเก็บข้อมูลคล้ายกับคุกกี้ที่เรารู้จักกันดี แต่สามารถเก็บข้อมูลที่มีขนาดใหญ่กว่าคุกกี้ได้ และสามารถใช้งานค่าต่างๆ ร่วมกันจากหลายๆ แท็บได้ภายใต้เบราว์เซอร์เดียวกัน ส่วน sessionStorage จะสามารถเก็บข้อมูลได้จนกว่าจะปิดเบราว์เซอร์นั้นๆ และข้อมูลจะไม่สูญหายไปในขณะที่เรารีเฟรชเบราว์เซอร์

การใช้งาน web storage เราสามารถใช้งานได้จากผ่านอ็อบเจกต์ localStorage และ sessionStorage โดยที่เราสามารถกำหนดค่าลงไปในอ็อบเจกต์ทั้งสองได้ทันที แต่ข้อมูลที่เก็บไว้ในทั้งสองอ็อบเจกต์นี้เป็นสตริงเท่านั้น

ทดลองใช้งานโดยใช้ตัวตัวอย่างจาก w3school มาปรับปรุง

<!DOCTYPE html>
<html>
    <head>
        <title>Test Object Storing</title>
    </head>
    <body>
        <script type="text/javascript">
            if (sessionStorage.pagecount) {
                sessionStorage.pagecount = Number(sessionStorage.pagecount) +1;
             }
            else {
                sessionStorage.pagecount=1;
            }
           
            document.write("<p>Refresh: "+sessionStorage.pagecount+" time(s) this session.<p>");
             
            if (Number(sessionStorage.pagecount) == 1) {
                if(localStorage.getItem("pagehistory")) {
                    var count = 0;
                    var pageHistory = JSON.parse(localStorage.getItem("pagehistory"));

                    for (obj in pageHistory)  
                        ++count;

                     ++count; 
                    var date = new Date(); 
                    var data = {"count":"1", "open":date.toString(), "last":date.toString()};               
                    pageHistory[count.toString()] = data; 
                    localStorage.setItem("pagehistory", JSON.stringify(pageHistory));

                    sessionStorage.currentIndex = count; 
                } 
                else{ 
                    var date = new Date(); 
                    var data = {"1":{"count":"1", "open":date.toString(), "last":date.toString()}};
                    localStorage.setItem("pagehistory", JSON.stringify(data));
                    sessionStorage.currentIndex = 1; 
                } 
            } 
            else { 
                var date = new Date(); 
                var pageHistory = JSON.parse(localStorage.getItem("pagehistory"));
                pageHistory[sessionStorage.currentIndex]["count"] = sessionStorage.pagecount;
                pageHistory[sessionStorage.currentIndex]["last"] = date.toString();
                localStorage.setItem("pagehistory", JSON.stringify(pageHistory)); 
           }
 
            document.write("<p><strong>Page History</strong></p>"); 
            document.write("<ul>"); 
            var pageHistory = JSON.parse(localStorage.getItem("pagehistory")); 
            for (obj in pageHistory) { 
                index = obj.toString(); 
                document.write("<li>Open: " + index + " Refresh: <span style='width:50px; display:inline-block; text-align:right;'>"  
                + pageHistory[index]["count"] + "</span> time(s). Open: " 
                + pageHistory[index]["open"] + " Last:" + pageHistory[index]["last"] + " </li>"); 
            } 
             document.write("</ul>");

             function clear_memory() { 
                localStorage.removeItem("pagehistory");
                sessionStorage.removeItem("pagecount"); 
                location.reload(true); 
            } 
        </script> 

         <p>Refresh the page to see the counter increase.</p>
         <p>Close the browser window, and try again, and what the counter.</p> 
        <button onclick="javascript:location.reload(true);">Refresh</button> 
        <button onclick="clear_memory()">Clear</button> 
    </body>
</html>

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

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

html5demos.com: HTML 5 Demos and Examples

2012-01-09T21:55:46Z

การพัฒนาเว็บไซต์ด้วย HTML 5 กำลังได้รับความนิยมจากนักพัฒนาเว็บไซต์ อีกทั้งมีความสามารถด้านมัลติมีเดียหลากหลายแม้กระทั้งสามารถพัฒนาเกมส์ที่สามารถทำงานอยู่บนเว็บบราวเซอร์ได้อย่างน่าอัศจรรย์ มีหลายเว็บไซท์ที่แนะนำการใช้งาน หรือนำเสนอกรอบการทำงานในแบบเฉพาะของตัวเอง แต่ในบทความนี้จะแนะนำเว็บไซท์หนึ่งชื่อว่า http://html5demos.com

เว็บไซท์นี้พัฒนาโดยคุณ Bruce Lawson และคุณ Remy Sharp ภายใต้สัญญาอนุญาต ครีเอทีฟคอมมอนส์ CC BY-SA 2.0 ภายในเว็บไซท์ประกอบไปด้วยตัวอย่างการใช้งาน HTML 5 ในรูปแบบต่างๆ มากมาย อีกทั้งโค้ดที่อยู่ภายในเว็บไซต์จะเป็นการใช้งาน HTML 5 โดยไม่ผ่านไลบรารี่เพิ่มเติม ช่วยให้เราเห็นตัวอย่างการเขียนโค้ด HTML 5 แบบดั้งเดิม ง่ายต่อการเรียนรู้ของผู้เริ่มต้น นอกจากนี้ยังแบ่งโค้ดที่เขียนขึ้นให้เลือกดูได้ตามเว็บบราวเซอร์ที่ต้องการ ซึ่งมีทั้ง FireFox IE Opera Safari และ Google Chrome ตัวอย่างที่มีให้ครอบคลุมเกือบทุกคุณสมบัติของ HTML 5

หากใครสนใจ HTML 5 เว็บไซต์นี้ไม่ควรพลาดครับ

Free and Premium Photoshop Brushes

2012-01-04T11:23:56Z

แนะนำเว็บสำหรับโหลด Brushe สำหรับ Photoshop มีทั้งแบบฟรี และเสียเงินซื้อ ลองแวะเข้าไปชมกันได้ที่ brushlovers

Brushe

วิธีทำให้รูปภาพและบทความอยู่ด้วยกันภายใต้ div เดียวกัน

2012-01-03T12:56:11Z

ช่วงนี้การสร้างเว็บไซต์ด้วย CSS กำลังได้รับความนิยมมาก และเดียวนี้ก็มี CSS3 และ HTML5 ก็กำลังมาแรงในหมู่นักพัฒนาเว็บไซต์ ช่วงนี้เว็บไซต์ web.ofebia ของกลุ่มเรากำลังเปลี่ยนหน้า html ใหม่ให้เป็นโคด HTML5 ทั้งหมด และเปลี่ยนรูปร่างหน้าเว็บไซต์ใหม่คล้ายๆกับรูปแบบของบล็อก

ซึ่งต้องการให้แสดงรูปภาพกับบทความอยู่ภายใต้ div เดียวกัน เหมือนกับรูปแบบบล็อกในเว็บไซต์สำเร็จรูปอย่างพวก CMS ต่างๆ ถ้าใครเคยใช้น่าจะรู้ว่ารูปร่างเป็นอย่างไร ช่วงนี้ก็ลืมเกี่ยวกับ CSS ไปเยอะแล้ว เลยไปรื้อความรู้มาใหม่ และก็เอามาแบ่งปันให้คนที่สนใจอยากที่จะรู้และนำไปใช้มาให้ทราบกัน ซึ่งวิธีทำก็ง่ายมากและไม่ยุ่งยากด้วย

HTML

<div class="entry">
    <img src="#" alt="Test" />
    <p>ข้อความในบทความ 1</p>
    <p>ข้อความในบทความ 2</p>
</div>

CSS

.entry{    width:600px;
height:auto;
padding:0;
margin:0;
float:left;
display:block;
text-align:justify;
}

.entry img{
width:100px;
height:100px;
padding:1px;
margin:0 10px 0 0;
float:left;
border:1px solid #ccc;
}

.entry p{
padding:0;
margin:0 0 5px 0;
text-align:left;
display:block;
}

ผลลัพธ์ดังรูป

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

รู้สึกว่ากล่องบทความจะค้นๆ นะ เหมือนกับเว็บไซต์อะไรแล้ว สงสัยจะอ่านเว็บไซต์นั้นมากไป ^^

วิธีการทำให้โคด HTML5 สามารถแสดงผลบน IE ได้

2011-12-22T14:34:45Z

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

1. ดาวน์โหลดไฟล์ html5.js ไปใส่ไว้ในโฟลเดอร์ที่เก็บงานเอาไว้

2. นำเอาประโยคข้างล่างไปใส่ไว้ภายใต้ tag ของ <head>

3. ลองทดสอบเปิดกับ IE ดูว่าได้ผลอย่างไร และอย่าลืมกด Allow ActiveX ด้วยนะ (ตัว IE ที่ผู้เขียนใช้เปิดทดสอบคือ IE8 จ๊ะ)

ภาพก่อนใช้โคดทำให้ html5 สามารถแสดงผลได้บน IE

ภาพหลังใช้โคดทำให้ html5 สามารถแสดงผลได้บน IE

สร้างเครื่องคอมพิวเตอร์เสมือนด้วย KVM

2011-12-19T13:41:29Z

กระแสคลาวด์คอมพิวติง (Cloud Computing) กำลังมาแรงในช่วงนี้วันนี้เนื่องจากเป็นเทคโนโลยีที่นำมาประยุกต์ใช้กับอุปกรณ์เครื่องที่อย่างสมาร์ทโฟนกันมาก เทคโนโลยีหนึ่งที่ถือได้ว่าเป็นเทคโนโลยีที่ผลักดันคลาวด์คอมพิวติงให้เป็นรูปเป็นร่างได้นั้นก็คือเทคนิคเครื่องคอมพิวเตอร์เสมือน (virtual machine) นั้นเอง สำหรับในบทความนี้จึงอยากเสนอวิธีการสร้างเครื่องเสมือนด้วย KVM (Kernel-based Virtual Machine) ให้รู้จักกัน

หากท่านทั้งหลายรู้จัก VirtualBox หรือ VMware แล้ว ก็บอกได้เลยว่า KVM ก็เป็นซอฟท์แวร์ตระกูลนั้นเหมือนกัน เรามาทดลองสร้างอิมเมจสำหรับ KVM กันเลยดีกว่า อย่างแรกเลยคือติดตั้งเพกเกจ kvm และดาวน์โหลดอิมเมจสำหรับติดตั้งระบบปฎิบัตการมาเก็บไว้ก่อน (ในตัวอย่างจะเป็นกาารติดตั้งระบบปฏิบัติการ linux โดยใช้ debian)

$ sudo aptitude install kvm

เริ่มการติดตั้งกันเลย ในขั้นแรกต้องสร้างอิมเมจขึ้นมาก่อน

$ kvm-img create -f raw debian-test.img 5G
W: /usr/bin/kvm-img: this binary is deprecated, use qemu-img instead
Formatting 'debian-test.img', fmt=raw size=5368709120

debian-test.img เป็นชื่ออิมเมจที่ต้องการ 5G จะเป็นขนาดอิมเมจที่ต้องการ(ขนาดอาร์ดดิสก์) หลังจากนั้นเริมการติดตั้งด้วยคำสั่ง

$ kvm -m 512 -cdrom debian-testing-amd64-businesscard.iso \
-drive file=debian-test.img,if=scsi,index=0 -boot once=d -net nic -net user

จากคำสั่งด้านบนเป็นการสร้างเครื่องสมือนขึ้นมาโดยให้มีขนาดหน่วยความจำเป็น 512 (-m 512) cdrom เปิดที่ไฟล์ (-cdrom debian-testing-amd64-businesscard.iso) ฮาร์ดิสก์คือ debian-test.img ซึ่งเป็นอิมเมจที่เราสร้างไว้ก่อนหน้านี้ ซึ่งก็มีออฟชันต่างๆ ดังแสดง ่สนการ boot .sh boot จาก cd (-boot once=d ตัวอักษร d หมายถึง cdrom ตังอักษร c หมายถึงฮาร์ดดิสก์ลูกแรก นอกจากนี้ยังสามารถ boot ผ่านเน็ทเวิร์กได้เช่นกัน) ส่วนเน็ทเวิร์กก็ใช้แบบ nic หรือ networ interface card ใน user mode เมื่อรันคำสั่งได้จะปรากฎหน้าต่างให้เราได้ติดตั้งเหมือนการติดตั้งปรกติ

เราก็สรามารถติดตั้งระบบปฏิบัติการได้ตามปรกติ หากเราคลิกที่หน้าต่างแล้วเมาส์หายไป ไม่ต้องตกใจ เนื่องจากเมาส์ของเราได้ถูก หน้าต่างติดตั้งยึดเอาไปแล้ว เราสามารถเอาเมส์กลับมาได้โดยกดปุ่ม Ctrl + Alt ที่หน้าต่างติดตั้ง เมาส์ก็จะกลับคืนมาเอง เมื่อติดตั้งเสร็จแล้วก็ทดลองใช้งานดูโดยใช้คำสั่ง

$ kvm -m 512 debian-test.img -boot once=d -net nic -net user

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

WowFlightThailand

2011-12-02T11:34:31Z

เว็บไซต์ใช้สำหรับค้นหา และเปรียบเทียบราคาตั๋วเครื่องบินภายในประเทศไทย

วาดวงกลมแบบสุ่มอัตโนมัติบน HTML5

2011-10-31T20:54:15Z

หลังจากเรียนรู้การใช้งาน canvas เบื้องต้นกันไปแล้วใน รู้จัก Canvas ภาพกราฟฟิกฉบับ HTML5 และมีตัวอย่างเล็กๆ น้อย โดยการวาดวงกลมแบบสุ่มแต่ต้องกดปุ่มอยู่ สำรับบทความนี้จึงเสนอการวาดวงกลมแบบสุ่มโดยอัตโนมัติกันบ้าง ตัวอย่างของโคดมีดังด้านล่าง

<!DOCTYPE html>
<html>
<body onload="init()">
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.    
    </canvas>
    <script type="text/javascript">
        var cxt;
        var animate;
        
        function drawCircle(){
            cxt.fillStyle="#FF0000";
            var x = Math.floor(Math.random()*1000) % 300;
            var y = Math.floor(Math.random()*1000) % 300;
            var r = 0;
            while(r < 3){
                r = Math.floor(Math.random()*11) % 15;
            }
            cxt.beginPath();
            cxt.arc(x,y,r,0,Math.PI*2,true);
            cxt.closePath();
            cxt.fill();
       }
       
        function stop() {
            clearInterval(animate);
            var b = document.getElementById("action_button");
            b.value = "start";
            b.innerText = "Start";
       }
       
       function reset() {
            stop();
            var c = document.getElementById("myCanvas");
            cxt = c.getContext("2d");
            cxt.clearRect(0, 0, 300, 300);
            start();
       }
       
       function start() {
            animate = setInterval(drawCircle, 200);
            var b = document.getElementById("action_button");
            b.value = "stop";
            b.innerText = "Stop";
       }

       function action_handler(){
            var b = document.getElementById("action_button");
            if (b.value == "start")
                start();
            else
                stop();
       }
       
       function init() {
            var c = document.getElementById("myCanvas");
            cxt = c.getContext("2d");
            start();
       }
    
    </script>
    <br />
    <button type="button" id="action_button" value="stop" onclick="action_handler()" />
    <button type="button" id="reset" name="Reset" onclick="reset()">Reset</button>
</body>
</html>

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

สิ่งที่ทำให้เกิดการเคลื่อนไหวในการวาดภาพไม่ได้มีสิ่งอื่นไดเลยนองจากฟังก์ชัน setInterval ที่ถูกเรียกใช้ในฟังก์ชัน start() นั้นเองซึ่งฟังก์ชันนี้ก็มีอยู่เดิมแล้วใน ่JavaScript ปรกติ ซึ่งฟังก์ชันนี้จะเรียกฟังก์ชัน drawCircle ทุกๆ 200 ms นั้นเอง

รู้จัก Canvas ภาพกราฟฟิกฉบับ HTML5

2011-10-08T20:28:03Z

Canvas element เป็นอีลีเมนท์หนึ่งของ HTML5 เราสามารถใช้ JavaScript เพื่อวาดรูปลงไปในเว็บเพจได้ canvas ทำให้เราสามารถสร้าง application ที่สามารถใช้งานแทน Flash กันได้เลยทีเดียว มีคนใช้ canvas ในการสร้างเกมส์ด้วย

การเรียนรู้การใช้งาน canvas นั้นไม่ยากสามารถศึกษาได้จาก HTML5 Canvas แต่การจะวาดรูปให้สวยงามนั้นเราต้องรู้จักฟังก์ชันของ JavaScript ด้วย มีเว็บไซต์ที่สอนการใช้งาน canvas อยู่เว็บไซต์หนีงที่คิดว่าน่าจะมีประโยชน์นั้นคือ http://www.html5canvastutorials.com ได้รวบรวม กรณีศึกษาเกี่ยวกับ canvas ไว้มากมายทดลองใช้งานดูนะครับ

สำหรับวันนี้ขอแนะนำวิธีทำง่ายๆ สักหนึ่งวิธีนะครับ จาก Example - Circle

โคดตัวอย่างคือ

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" 
               style="border:1px solid #c3c3c3;">
    Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.fillStyle="#FF0000";
    cxt.beginPath();
    cxt.arc(70,18,15,0,Math.PI*2,true);
    cxt.closePath();
    cxt.fill();
</script>
</body>
</html>

จะได้รูปตัวอย่างดังนี้

ทดลองใส่ความคิดสร้างสรรค์ลงไปเล็กน้อย

<!DOCTYPE html>
<html>
<body onload="drawCircle()">
    <canvas id="myCanvas" width="300" height="300" 
                  style="border:1px solid #c3c3c3;">
        Your browser does not support the canvas element.
    </canvas>
    
    <script type="text/javascript">
        function drawCircle(){
            var c=document.getElementById("myCanvas");
            var cxt=c.getContext("2d");
            cxt.fillStyle="#FF0000";

            var x = Math.floor(Math.random()*1000) % 300;
            var y = Math.floor(Math.random()*1000) % 300;
            var r = 0;
            while(r < 3){
                r = Math.floor(Math.random()*11) % 15;
            }

            cxt.beginPath();
            cxt.arc(x,y,r,0,Math.PI*2,true);
            cxt.closePath();
            cxt.fill();
       }
    </script>
    <br />
    <button type="button" onclick="drawCircle()">Draw Circle</button>
</body>
</html>

เราก็จะได้รูปดังข้างล่าง

คลิกปุ่ม Draw Circle สัก 5 ครั้ง

กดสัก 20 ครั้ง

นี่เป็นตัวอย่างเล็กๆ น้อย หากอยากดูอะไรเพิ่มเติมฉบับภาษาไทยสามารถดูได้ที่ http://www.html5.in.th

Html5CanvasTutorials

2011-10-08T20:06:24Z

เว็บไซต์สอนการใช้งาน canvas

กลุ่มผู้ใช้งาน MongoDB ในสยามประเทศ

2011-10-08T18:02:32Z

ชุมชนผู้ใช้งาน MongoDB ในสยามประเทศ พึ่งเริ่มก่อตั้งได้ไม่นานแต่น่าจะมีประโยชน์สำหรับผู้ใช้งานนะครับ

สัญญาอนุญาตสำหรับการเผยแพร่

2011-10-08T17:23:13Z

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

เรื่องราวของ Web.Ofebia

2011-10-08T16:56:48Z

ประวัติและที่มา

Web.Ofebia เป็นหนึ่งในเครือเว็บไซต์ Ofebia.com เป็นแหล่งรวบรวมข้อมูลเกี่ยวกับการทำเว็บไซต์ เกิดขึ้นเนื่องจากสมาชิกต้องการมีเว็บไซต์ที่รวบรวมข้อมูลต่างๆ ในการพัฒนาเว็บไซต์ที่เกิดจากประสบการณ์ของตัวผู้เขียนเอง โดยมีทีมงานดังนี้ sdayu jakizdoo parkzz tanit และ jirarak

ใหนๆ ก็อยากมีเว็บไซต์แล้วจึงอยากจะพัฒนาเว็บไซตืขึ้นเองแทนการใช้งาน CMS โดยที่ครั้งแรกที่พัฒนาโดยใช้ JAVA เปลี่ยนเป็น PHP แล้วเปลี่ยนมาเป็น Python ตามลำดับ ผู้พัฒนาแบ่งงานออกเป็น sdayu tanit และ jirarak เป็นคนเขียนโปรแกรม parkzz ออกแบบ jakizdoo สร้าง CSS และ layout

ลำดับเวลา

2551
- 18 พ.ย. 2551 - จดโดเมน
2552
- 1 ม.ค. 2552 - ออนไลน์เว็บไซต์ครั้งแรก โดยใช้บริการเว็บโฮสติงของ JaideeHosting.com โดยพัฒนาเว็บไซต์โดยใช้ spring และ ้hibernate และฐานข้อมูล Mysql ออกแบบกราฟฟิกเว็บไซต์โดย parkzz และพัฒนาโครงสร้างหน้าเว็บด้วย CSS โดย jakizdoo ใช้ชื่อว่า Alpha H 0.1
- 20 มี.ค. 2552 - เปลี่ยนการพัฒนาจาก JAVA มาเป็น PHP โดยใช้ Codeigniter เนื่องจาก หาโฮสติงที่ให้บริการ JAVA ลำบากและมีราคาแพง โดยมี tanit เป็นผู้พัฒนาหลัก
- 18 พ.ค. 2552 แยกส่วนการจัดการสมาชิกไปไว้ที่ Member.Ofebia เนื่องจากต้องการให้สมาชิกสามารถใช้งานเว็บไซต์ในเครือได้ง่ายโดยไม่ต้องสมัครสมาชิกใหม่หลายครั้งโดยใช้เว็บเซอร์วิส
- 4 ต.ค. 2552 - เปลี่ยนมาใช้บริการเว็บโฮสติง clnox.com
2553
- 24 พฤศจิกายน 2553 - เปลี่ยนการพัฒนาเว็บไซต์ด้วยภาษา PHP มาเป็น Python ด้วย Pylons Framework โดยใช้ชื่อโปรเจ็กว่า Makalee และเปลี่ยนโฮสติงมาใช้งาน VPS ของ webbynode.com โดย sdayu
2554
- 26 เมษายน 2554 เปลี่ยนการใช้งาน VPS เป็นบริการของ virpus.com
- 5 มิถุนายน 2554 - เปลี่ยนการพัฒนาจาก Pylons Framework มาเป็น Pyramid Framework เนื่องจากทีมงาน Pylons Framework ประกาศพัฒนา Pyramid Framework แทน
- 26 มิถุนายน 2554 - เปลี่ยนฐานข้อมูลจาก Mysql มาเป็น PostgreSQL

ติดต่อเรา

2011-10-08T16:11:35Z

หากท่านมีปัญหาในการใช้งาน หรือมีข้อเสนอแนะอันเป็นประโยชน์ต่อการพัฒนาเว็บท่านสามารถติดต่อได้ที่ web.ofebia@gmail.com

เกี่ยวกับ Web.Ofebia

2011-10-08T13:52:58Z

Web.Ofebia เป็นหนึ่งในเครือเว็บไซต์ Ofebia.com เป็นแหล่งรวบรวมข้อมูลเกี่ยวกับการทำเว็บไซต์ มีทั้ง การแสดงวิธีทำ บทความความรู้ รวบรวมเว็บไซต์ที่มีประโยชน์สำหรับการทำเว็บไซต์ โดยแบ่งออกเป็นสี่เรื่องหลักคือ

Web.Ofebia แบ่งบทความต่างๆ ออกเป็นสามระดับคือ พื้นฐาน ระดับกลาง และขั้นสูง เพื่อให้เหมาะสมกับผู้อ่านในระดับต่างๆ

การจัดเรียงลำดับข้อมูลภาษาไทยบนฐานข้อมูล PostgreSQL

2011-10-01T23:50:52Z

หลังจากเริ่มใช้งานฐานข้อมูล PostgreSQL การใช้งานฐานข้อมูลที่ใช้กันบ่อยๆ คือการจัดเรียงข้อมูล (sorting) แต่ปัญหาหนึ่งที่เจอคือ การจะจัดเรียงข้อมูลบนฐานข้อมูล PostgreSQL ได้นั้น ในขั้นตอนที่เริ่มสร้างฐานข้อมูลจะต้องระบุ Encoding Collation และ Character Type ให้ถูกต้องกับภาษาที่จะจัดเรียงด้วย ในที่นี่เราต้องการจัดเรียงภาษาไทยในชุดของ UTF-8 ดังนั้น Encoding ที่ต้องการคือ th_TH.UTF-8 แต่หากเป็นเซิร์ฟเวอร์โดยปรกติแล้วจะไม่มีการปรับแต่ง locales นี้ไว้ จึงไม่สามารถสร้างฐานข้อมูลที่พารามิเตอร์ดังกล่าวได้ แต่ก่อนที่เราจะเริ่มสร้างฐานข้อมูลได้เราต้องปรับแต่ง locales ก่อนโดยวิธีการปรับแต่งบน Debian มีดังนี้

# dpkg-reconfigure locales

โปรแกรมจะเริ่มเข้าสู้หน้าต่างปรับดังรูปด้านล่าง

หากต้องการติดตั้งภาษาไทยตามรหัสของ UTF-8 ก็สามารถเลือก th_TH.UTF-8 หรือหากต้องการ Encoding แบบเดิมของภาษาไทยก็ให้เลือก th_TH หรือ TIS-620 นั้นเอง เราสามารถเลือก Encoding ได้โดยเลือนเคอร์เซอร์ไปยังบรรทัดที่ต้องการแล้วกดปุ่ม Space จะปรากฏเครื่องหมาย '*' แสดงว่าได้เลือกเรียบร้อยแล้ว หากไม่ต้องการก็ให้กดปุ่ม Space อีกครั้งเครื่องหมาย '*' ก็จะหายไป ตอบตกลงโดยกดปุ่ม แท็บ ให้เคอร์เซอร์เลื่อนไปยังปุ่ม <Ok> แล้วกดปุ่ม Enter เพื่อไปยังขั้นตอนต่อไป

โปรแกรมจะถามว่าจะเลือกภาษาใดเป็นภาษาปริยาย สามารถเลือกได้ตามต้องการ จากนั้นโปรแกรมจะเริ่มปรับแต่งค่า

Generating locales (this might take a while)...  
  en_US.UTF-8... done  
  th_TH.TIS-620... done
  th_TH.UTF-8... done
Generation complete.

เป็นอันเสร็จเรียบร้อย จากนั้นเริ่มสร้างฐานข้อมูลจะแสดงให้ดูบน phpPgAdmin

เพียงเท่านี้เราก็สามารถจัดเรียงข้อมูลภาษาไทยได้แล้ว

ตรวจสอบพื้นที่บนฮาร์ดดิสก์ด้ว du และ df

2011-07-31T11:49:54Z

การบริหารพื้นที่เก็บข้อมูลบนฮาร์ดดิสก์ หากเราใช้ GUI tool ทั่วไปอาจจะกระทำได้ง่ายเพียงแค่คลิก สำหรับเครื่องเซิร์ฟเวอร์แล้วการติดตั้งสภาพแวดล้อมแบบ GUI นั้นไม่เป็นที่นิยมนัก อีกทั้งยังสิ้นเปลืองทรัพยากรโดยไม่จำเป็น สำหรับบทความนี้จะแนะนำคำสั่งสำหรับการตรวจสอบพื้นที่บนฮาร์ดดิสก์สองคำสั่งด้วยกันคือ du และ df โดยที่ทั้งสองคำสั่งมีนิยามดังต่อไปนี้

du - estimate file space usage
df - report file system disk space usage

สรุปง่ายๆ ว่า df ไว้ดูพื้นที่ว่าง du ไว้ดูว่าแต่ละไฟล์ใช้ข้อมูลไปเท่าไหร่ ทั้งสองมีออฟชันหลายออฟชันด้วยกันแต่ที่อยากแนะนำคือ h หรือ human-readable นั้นคือแสดงผลให้มนุษย์อ่านได้ง่าย ดังเช่น 1K 234M 2G เป็นต้น

ทดลองให้งาน df

$ df -hFilesystem            Size  Used Avail Use% Mounted on
/dev/sda1              21G  5.7G   14G  30% /
tmpfs                 5.0M     0  5.0M   0% /lib/init/rw
tmpfs                 397M  664K  396M   1% /run
udev                  2.0G     0  2.0G   0% /dev
tmpfs                 794M  1.5M  792M   1% /run/shm
/dev/sda2             266G  198G   55G  79% /home

โปรแกรมจะบอกว่าฮาร์ดดิสก์ในแต่ละส่วนใช้ไปเท่าไหร่เหลือให้ใช้งานอีกเท่าไหร่ ส่วนต่อมาคือ du จะบอกว่าในไดเรกทอรีปัจจุบันและลึกลงไปแต่ละไดเร็กทอรีมีไฟล์รวมขนาดเท่าไหร่เช่น

$ du -h
36K ./Makalee.egg-info
48K ./makalee/templates/welcome
20K ./makalee/templates/showcase
32K ./makalee/templates/image_album
84K ./makalee/templates/content
40K ./makalee/templates/bookmark
32K ./makalee/templates/base
12K ./makalee/templates/account
20K ./makalee/templates/tag
292K ./makalee/templates
76K ./makalee/view
36K ./makalee/model/form
60K ./makalee/model
12K ./makalee/lib/auth/ofebia
24K ./makalee/lib/auth
24K ./makalee/lib/ofebia
56K ./makalee/lib
504K ./makalee
572K .

นอกจากนี้เรายังสามารถระบุได้ว่าต้องการให้แสดงลึกลงไปกี่ลำดับชั้นเช่น

$ du -h --max-depth=2
36K ./Makalee.egg-info
292K ./makalee/templates
76K ./makalee/view
60K ./makalee/model
56K ./makalee/lib
504K ./makalee
572K .

หรือต้องการแค่ดูขนาดอย่างเดียวก็สามารถทำได้

$ du -hs
572K .

เวลาที่มีการแก้ไขครั้งสุดท้าย

$ du --time
36 2011-07-02 07:38 ./Makalee.egg-info
48 2011-07-02 07:38 ./makalee/templates/welcome
20 2011-07-02 07:38 ./makalee/templates/showcase
32 2011-07-02 07:38 ./makalee/templates/image_album
84 2011-07-02 07:38 ./makalee/templates/content
40 2011-07-02 07:38 ./makalee/templates/bookmark
32 2011-07-02 07:38 ./makalee/templates/base
12 2011-07-02 07:38 ./makalee/templates/account
20 2011-07-02 07:38 ./makalee/templates/tag
292 2011-07-02 07:38 ./makalee/templates
76 2011-07-31 04:44 ./makalee/view
36 2011-07-02 07:38 ./makalee/model/form
60 2011-07-02 07:38 ./makalee/model
12 2011-07-02 07:38 ./makalee/lib/auth/ofebia
24 2011-07-02 07:38 ./makalee/lib/auth
24 2011-07-02 07:38 ./makalee/lib/ofebia
56 2011-07-02 07:38 ./makalee/lib
504 2011-07-31 04:44 ./makalee
572 2011-07-31 04:44 .

นอกจากนี้ยังมีแีกหลายออฟชันที่น่าสนใจสามารถทดสอบได้ด้วยตัวเองครับ