10 Nov

การใช้ HTML , CSS ทำ Animation ฟองน้ำพร้อมใช้ JS ควบคุม ปุ่มหยุดและเล่น

บทความนี้จะนำเสนอการสร้าง  Animation ฟองน้ำ ในหน้าเว็บไซต์ และ สร้างปุ่มควบคุมการหยุดและเล่น
เนื่องจากในการทำเว็บที่มีการใส่ Animation สำหรับอุปกรณ์ ที่มีความเร็วก็คงไม่มีปัญหาแต่ถ้าอุปกรณ์ช้าหรืออยากประหยัดพลังงาน คงไม่ดีนักที่จะเปิดเว็บที่มี Animation มากๆ
ซึ่งใน Css จึงได้เพิ่ม prefers-reduced-motion media query เข้ามาเพื่อให้ควบคุมการเล่น Animation ได้
ตัวอย่างเช่นการทำปุ่มปิด หรือเปิด เพื่อให้ User เลือกได้เองเพื่อลดการทำงานของอุปกรณ์

เรามาดูตัวอย่างที่เสร็จแล้ว

1. การสร้างโครง HTML

 

<!--  html ส่วนฟองน้ำ มีทั้งหมด 10 อัน -->
<div id="background-wrap">
    <div class="bubble x1"></div>
    <div class="bubble x2"></div>
    <div class="bubble x3"></div>
    <div class="bubble x4"></div>
    <div class="bubble x5"></div>
    <div class="bubble x6"></div>
    <div class="bubble x7"></div>
    <div class="bubble x8"></div>
    <div class="bubble x9"></div>
    <div class="bubble x10"></div>
</div>
 <!--  html ส่วนปุ่มที่ควบคุมการหยุดหรือเล่น --> 
   <div class="box">
    <button data-toggle >ปิด Animation</button>
    </div>

 

2. ในส่วน CSS

/* ส่วน Body  */

body {
	background: #00b4ff url(background.jpg) no-repeat center center;
  background-size: cover;
	color: #333;

	height: 100vh;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}


@media (prefers-reduced-motion: no-preference) {
  body {
    --playState: play;
  }
}

#background-wrap {
    bottom: 0;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	z-index: -1;
}


/* ส่วน Animation  */
@-webkit-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-moz-keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@keyframes animateBubble {
    0% {
        margin-top: 1000px;
    }
    100% {
        margin-top: -100%;
    }
}

@-webkit-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@-moz-keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

@keyframes sideWays { 
    0% { 
        margin-left:0px;
    }
    100% { 
        margin-left:50px;
    }
}

/* ส่วน Animation แต่ละ Class ทั้ง 10 อัน  */

.x1 {
    -webkit-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 25s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: -5%;
	top: 5%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}

.x2 {
    -webkit-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 5%;
	top: 80%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.x3 {
    -webkit-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 28s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 10%;
	top: 40%;
	
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	transform: scale(0.7);
}

.x4 {
    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 20%;
	top: 0;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x5 {
    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 30%;
	top: 50%;
	
	-webkit-transform: scale(0.5);
	-moz-transform: scale(0.5);
	transform: scale(0.5);
}

.x6 {
    -webkit-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 21s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 50%;
	top: 0;
	
	-webkit-transform: scale(0.8);
	-moz-transform: scale(0.8);
	transform: scale(0.8);
}

.x7 {
    -webkit-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 20s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 65%;
	top: 70%;
	
	-webkit-transform: scale(0.4);
	-moz-transform: scale(0.4);
	transform: scale(0.4);
}

.x8 {
    -webkit-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	-moz-animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	animation: animateBubble 22s linear infinite, sideWays 3s ease-in-out infinite alternate;
	
	left: 80%;
	top: 10%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}

.x9 {
    -webkit-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	-moz-animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	animation: animateBubble 29s linear infinite, sideWays 4s ease-in-out infinite alternate;
	
	left: 90%;
	top: 50%;
	
	-webkit-transform: scale(0.6);
	-moz-transform: scale(0.6);
	transform: scale(0.6);
}

.x10 {
    -webkit-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	-moz-animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	animation: animateBubble 26s linear infinite, sideWays 2s ease-in-out infinite alternate;
	
	left: 80%;
	top: 80%;
	
	-webkit-transform: scale(0.3);
	-moz-transform: scale(0.3);
	transform: scale(0.3);
}


/* ส่วน ฟองน้ำหลัก  */
.bubble {
    -webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	-moz-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	box-shadow: 0 20px 30px rgba(0, 0, 0, 0.2), inset 0px 10px 30px 5px rgba(255, 255, 255, 1);
	
    height: 200px;
	position: absolute;
	width: 200px;
  animation-play-state: var(--playState, paused);
}

.bubble:after {
    background: -moz-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 70%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* IE10+ */
    background: radial-gradient(ellipse at center,  rgba(255,255,255,0.5) 0%,rgba(255,255,255,0) 70%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	
    -webkit-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
	-moz-box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
	box-shadow: inset 0 20px 30px rgba(255, 255, 255, 0.3);
	
	content: "";
    height: 180px;
	left: 10px;
	position: absolute;
	width: 180px;
  
  
}

3. js ในการควบคุม Animation

// Query ปุ่มมาเก็บไว้ในตัวแปร
const toggle = document.querySelector('[data-toggle]');


// ตัวแปรสำหรับ เช็ค ปิดหรือเปิด
let shouldPauseAnimation = false


// ใส่ Event ให้กับปุ่ม
toggle.addEventListener('click', () => {
  shouldPauseAnimation = !shouldPauseAnimation 
 
  
  if (shouldPauseAnimation) {
    // ถ้าค่าการปิด
    toggle.innerText = 'เปิด Animation' 
  document.body.style.setProperty('--playState', 'paused')
  } else {
    // ถ้าค่าการเปิด
    toggle.innerText = 'ปิด Animation'
    document.body.style.setProperty('--playState', 'running')
  }
})
11 Oct

การใช้ php ต่อกับ payment gateway ของ กสิกรไทย (ตัดบัตร)

ธนาคารกสิกรมีการอัพเดทระบบ payment gateway ใหม่ไม่แน่ใจว่าช่วงไหน ในคู่มือคือ 17/04/2019 ซึ่งก็ไม่มีตัวอย่างของ php มีแต่ java กับ บอกวิธีการทำงานการส่งค่าและรับค่าต่างๆ
ซึ่งในระบบใหม่นี้ สามารถชำระเงินได้ ทั้งแบบ ตัดบัตร และ qr code ซึ่งก็ช่วยให้การจ่ายเงินสำหรับลูกค้าในเว็บไซต์สะดวกขึ้น
การชำระเงินทั้ง 2 แบบนั้นมีความแต่ต่างกันในด้าน code ผมจึงทำเป็นของตัดบัตรมาก่อนในบทความนี้ และมีตัวอย่าง code ให้

เริ่มต้น

1. หลังจากที่เราสมัครของ payment gateway กับทางธนาคารสำเร็จ (อันนี้ต้องดูเงื่อนไขธนาคารนะครับ) เราจะได้ คู่มือ  ,key 2 อันคือ (Public key,Secret key  ซึ๋งจะมีทัั้งตัวจริงและตัวเทส เราจะใช้ตัวเทสก่อน เพื่อทดลองจ่ายเงินได้ด้วยเลขบัตรที่ธนาคารให้มา ) , user สำหรับเข้า dashboard

2 หลังจากนั้นเรามาดูเรื่อง server ของเรา สิ่งที่เราต้องมีคือ

-SSL Certificate ที่ออกโดย CA (Certificate Authority)

-TLS 1.2

– PHP CURL (บาง host ปิดไม่ให้ใช้)

ซึ่งไม่มีก็ใช้ไม่ได้ครับ

3. ในตัดบัตรนั้นจะมีอยู่ 2 แบบคือ

– 3D Secure มีการยืนยันตัวตนจากผู้ใช้

– Non 3D Secure ไม่มีการยืนยันตัวตน (ในคู่มือแจ้งว่าวิธีนี้ต้องทำสัญญาบางอย่างเพิ่มเติมเรื่องความรับผิดชอบ)

เริ่มกันเลย  

  1.  ไฟล์แรกคือ ไฟล์ config.php ภายในจะมีการตั้งค่า key ที่ได้จากธนาคารเพื่อใช้ในระบบ
    $path = '';  // url website  เช่น http://www.webunique.in.th/
    $publickey = '';   // public key ที่ได้จาก ธนาคาร
    $secretkey = ''; // secret key ที่ได้จาก ธนาคาร
  2.  ไฟล์ที่ 2 step1.php เป็นการสร้างปุ่มสำหรับจ่ายเงินซึ่งจะใส่ค่าต่างๆตาม Code
    <?php     require_once("config.php");
    
                              
    echo '
    <form method="POST" action="'.$path.'step2.php">  // ใส่ url เมื่อลูกค้าจ่ายเงินเสร็จแล้ว
    <script type="text/javascript"
    src="https://dev-kpaymentgateway.kasikornbank.com/ui/v2/kpayment.min.js"  // ui script ของทางธนาคารซึ่งเป็นตัวเทส   
    data-apikey=""'.$publickey.'"" // ใส่ public key 
    data-amount="2000.00" // จำนวนเงินตามรูปแบบทศนิยม 2 ตำแหน่ง
    data-currency="THB" // สกุลเงิน
    data-payment-methods="card" // วิธีชำระเงิน
    data-name="SHOPNAME"
    
    >
    </script>
    </form>'; ?>

    เมื่อเขารันก็จะได้ ปุ่มและเมื่อกดจ่ายก็จะได้หน้าตาแบบนี้ครับ

  3.  หลังจากใส่ข้อมูลบัตรทั้งหมดแล้วและกดปุ่ม Pay ระบบธนาคารจะทำการ post ข้อมูลกลับมาที่ step2.php ในเว็บของเรา  (ตามที่เราตั้งค่าไว้)  ข้อมูลที่ได้มาก็จะมี Token  แบบใช้ครั้งเดียว เราจะนำ token นี้ไปทำการเรียก Charge API ของธนาคารเพื่อทำการตัดบัตร แล้วธนาคารจะส่งค่าต่างๆกลับมา และค่า redirect_url ไว้สำหรับไปให้ลูกค้ายืนยันตัวตน
    <?php   require_once("config.php");
      
    
    
    
    if($_POST['token']!='' and isset($_POST['token']) ){
    
    $token = $_POST['token']; // รับค่า TOKEN จากระบบธนาคาร
    
    $url = 'https://dev-kpaymentgateway-services.kasikornbank.com/card/v2/charge'; // url เรียก Api test ในการส่งค่า Token
    $datasend = array(  // ค่าที่ต้องส่ง อันนี้อาจต้องดูในคู่มือว่าตัวไหนจำเป็นต้องใส่บ้าง
       "amount"=> "2000.00",   
       "currency"=> "THB",  
       "description" => "Awesome Product",
       "source_type" => "card",    
       "mode"=> "token",   
       "token"=> $token,
       "reference_order"=> "11251513" 
      
      
        
    );
          
               
    $ch = curl_init();
    
    
    
    $post_string = json_encode($datasend);  
    
    curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                                          
    	'Content-Type: application/json',              
    	'Cache-Control:no-cache',
      'x-api-key: '.$secretkey // ใส่ Secret Key
      )                                                                       
    );
     
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); 
    curl_setopt($ch, CURLOPT_POSTFIELDS, $post_string);
    curl_setopt($ch, CURLOPT_SSLVERSION, 0 );
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_VERBOSE, true);
    
    
    
    $data = curl_exec($ch);
    $response = json_decode($data);
    
    
    curl_close ($ch);
    
    $response = json_decode(json_encode($response), True);   // ค่าที่ได้รับกลับมาจะอยู่ในตัวแปรนี้จะมีค่าที่สำคัญคือ chrg id เอาไว้ยืนยันตอนสุดท้ายในขั้นตอนที่ 4 
    
    
    ob_clean();
    header('Location: '.$response['redirect_url']); // ทำการ Redirect ไปหน้ายื่นยันตัวตนลูกค้า
    
    
    
    
         }
        
    
    ?>     
    เมี่อไปตาม Redirect_url แล้ว ก็จะเป็นหน้าเว็บกสิกรไทยให้ยื่นยัน sms สำหรับลูกค้า 
    
    
    หลังจากลูกค้ายืนยันตัวตนเสร็จแล้ว ทางระบบธนาคารจะ ส่งค่ากลับมาที่เว็บเรา ตาม url callback ( ตรงนี้เราต้องเข้าไป set ใน Dashboard ของ kbank ซึ่งจะให้เราตอนสมัรว่าจะให้ไปที่ url อะไร ตามตัวอย่างคือไฟล์ step3.php )
  4. ระบบธนาคารส่งค่ากลับมาที่หน้าเว็บเราตาม url callback และส่งข้อมูล object_id เพื่อมาเช็คกับ chrg_id  ก่อนยืนยันผลการทำรายการ ร้านค้าต้องเรียก Charge API เพื่อ Inquiry Transaction เข้าไปอีกครั้งตาม code
    <?php       
    
     require_once("config.php");
    
    
    $url = 'https://dev-kpaymentgateway-services.kasikornbank.com/card/v2/charge';
    
          
              
    $ch = curl_init();
    
    
    
    $post_string = json_encode($datasend);  
    curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                                                       
    	'Cache-Control:no-cache',
       'x-api-key: '.$secretkey // ใส่ secretkey
      )                                                                       
    );                           
     
    curl_setopt($ch, CURLOPT_URL, $url."/?????"); // ใส่ chrg id (ต้องตรงกับ object_id ที่รับมา) ที่ได้รับตอน step2.php
    
    
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_VERBOSE, true);
    
    
    
    $data = curl_exec($ch);
    $response = json_decode($data);
    
    if (curl_errno($ch)){
        echo  curl_error($ch);
    }
    
    curl_close ($ch);
    
    $response = json_decode(json_encode($response), True);
    
    print_r($response); // รายละเอียดที่ธนาคารส่งกลับมาเว็บเรามีทั้ง สถานนะและรายละเอียดลูกค้า 
    
    
    ?>
    
    

    ค่าที่ได้มาก็จะเป็นแบบนี้ครับ

    เมื่อ status ที่ส่งกลับมาเป็น success ก็สำเร็จครับ

กด Download ไฟล์ตัวอย่าง

มีคำถามสงสัยหรือแนะนำได้ครับ

04 Oct

การใช้ css Border-Radius ทำลูกเล่นในเว็บ

คำสั่ง Border-Radius ใน css นั้นเป็นคำสั่งสำหรับกำหนดขอบรูปร่าง Element นั้นๆ ให้ขอข้างมีความโค้งเป็นวงกลม

โดยจะใส่ค่าตามรูปด้านล่าง


จะเป็นการใส่ค่าเดียว ที่ 30% ซึ่งอาจะใช้เป็น px ก็ได้ (ถ้าจะให้เป็นวงกลมใส่ 50%)

หรือเราสามารถใส่ 4 ค่าก็ได้ เพื่อให้เป็นวงกลมรูปร่างแปลกตา เช่น  border-radius:30% 70% 40% 60%; ตามตัวอย่างด้านล่าง

ซึ่ง border-radius สามารถใส่ค่าได้ละเอียดมากกว่านั้น คือ 8 ค่าเพื่อทำให้มีความเนียนมากขึ้น เช่น 59% 41% 65% 36% / 44% 45% 55% 56%  ผลจะออกมาตามตัวอย่างด้านล่าง

ซึ่งเราสามารถเอาความสามารถตรงนี้ไปรวมกับ Css animation ก็จะสามารถสร่าง Animation  เก๋ๆให้กับเว็บไซต์เราได้ ตามตัวอย่างด้านล่าง

 

สามารถดู SOURCE CODE ได้จาก jsfiddle ได้เลย

ส่วนค่าที่ใส่ทั้ง 8 ค่า ใน  border-radius  สามารถไปทำได้จากเว็บ  https://9elements.github.io/fancy-border-radius/full-control.html

หวังว่าคงเป็นประโยชน์กับนักทำเว็บไซต์ และนำไปใช้ในการออกแบบเว็บของตนเองครับ

 

 

 

20 Sep

การใช้ js ควบคุม css Variables (Custom Properties)

ก่อนอื่นเรามารู้จัก css variables คือ การสร้างตัวแปรใน css เพื่อใช้แทนค่าใน selector อื่นๆ ประโยชน์ก็คือสามารถเปลี่ยนข้อมูลในตัวแปลทีเดียว ก็จะเปลี่ยนทั้งหมด

(more…)

11 Sep

มาลองใช้ framwork7 ทำ application ลง android

มาทำความรู้จักกับ framework7 ซึ่งเป็น framework เป็น front end ทำ application ในมือถือ ทั้ง ios และ android ซึ่งมี component ต่างๆมากมาย และนอกจากใช้ js ปกติแล้วยังสามารถใช้ควบคู่กับ vue และ react ได้ด้วย บทความนี้จะมาลองทำตั้งแต่ install สร้างหน้าจอ  เขียนต่อ api แสดงผล ไปจนถึงการใช้ cordova build เป็น application ไว้ลองเล่นในโทรศัพท์กันครับ

(more…)

06 Jun

การใช้งาน javascript เรียก google page speed api ดึงข้อมูลรูป Thumbnail ของเว็บที่ต้องการ

google page speed insights เป็นเครื่องมือที่ใช้สำหรับตรวจสอบความเร็วเว็บไวต์ ซึ่งจะมี api ที่เปิดไว้ โดยไม่ต้องใส่ api key (ไม่แน่ใจถ้าคนใช้มากๆอาจจะปิดในอนาคต) ซึ่งเราสามารถเรียก api ได้ด้วย url อย่างง่ายๆ และจะได้ข้อมูลของเว็บไซต์นั้น รวมทั้ง รูปภาพ Screenshot หน้าเว็บมาด้วย ผมจึงลองใช้ javascript เรียก api และนำออกมาแสดงผล

(more…)

12 Mar

การใช้ Javascript อ่าน exif ของรูปภาพและใช้ร่วมกับ google map api

ในรูปภาพที่เราถ่านในปัจจุบันจะมี ข้อมูลต่างๆฝังอยู่ด้วยเช่น วันเวลา กล้องที่ใช้ โลเคชั่นและอื่นๆอีกมากมาย เรียกว่า Exif ซึ่งเป็น metadata วันนี้ผมจึงลองใช้ หา lib js สำหรับอ่านค่าข้อมูล exif มาชื่อว่า exif-js  เพื่ออ่านค่าและนำค่า Location มาทำการใส่ใน google map

(more…)

02 Mar

โปรแกรมสร้าง Gif Animation จาก vdo บนเว็บด้วย javascript

เนื่องจากมีความสงสัยว่า JavaScript นั้นสามารถ capture vdo และ สามารถสร้างไฟล์ gif animation ได้หรือไม่ จึงไปศึกษาหาข้อมูลมาดู สรุปคือสามารถทำได้ จึงมาลองเขียนเป็นโปรแกรมแบบง่ายๆเพื่อศึกษาและเขียนบทความเก็บไว้เผื่อมีงานทำเว็บที่ต้องใช้ในอนาคต

(more…)

21 Jan

เรียก API – ธนาคารแห่งประเทศไทย ด้วย jQuery

หลังจากที่ ธนาคารแห่งประเทศไทยเปิดให้มี api ได้ซักพัก ซึ่งมีอยู่ประมาณ 21 api เพื่อให้บริการข้อมูลต่างๆ ถือเป็นเรื่องดีที่ทำให้หน่วยงานอื่นๆ ได้เข้าถึงข้อมูลได้ง่ายและถูกต้องแม่นยำ ในวันนี้จะมาลองใช้ jQuery เรียก api ซึ่งเป็น java script

(more…)

03 Dec

การทำ bulk image(การย่อรูปหลายๆรูปในครั้งเดียว) โดยใช้ js

จริงๆแล้วในการย่อรูปมีโปรแกรมมากมายที่สามารถย่อรูปทีเดียวหลายๆไฟล์ได้ วันนี้เราจะมาลองใช้ javascript ย่อรูปตามสัดส่วนเป็นเปอร์เซ็นในทีเดียวหลายๆรูปซึ่งวิธีนี้มีข้อดีคือการย่อจะทำงานได้เร็วเพราะเป็นการทำงานฝั่ง client ไม่ต้องส่งไฟล์ไปให้กับ server

(more…)

19 Oct

การใช้ three.js สร้างโลก 3D ในเว็บไซต์

three.js เป็น js library สำหรับทำ 3D บนเว็บไซต์ บทความนี้จะนำเอาความสารถของ library ตัวนี้มาใช้กันครับ

(more…)

15 Sep

การใช้งาน Clarifai api เพื่อตรวจสอบรูปภาพ

ในสมัยก่อนการทำเว็บประกาศขายหรือที่สมาชิกสามารถใส่รูปภาพได้เองนั้น เป็นเรื่องยากที่ต้องตรวจสอบว่าเป็นรูปที่ต้องการจริงหรือเปล่า เช่นเป็นเว็บเกี่ยวกับประกาศขายรถแต่ใส่รูปของบ้านมาแทนทำให้ผู้ดูแลเว็บต้องปวดหัวมานั่งลบกันทุกวัน ปัจจะบันก็มี AI ที่จะเข้ามาช่วยทำงานแทนคนในส่วนนี้ ผมไปเจอ api ที่เป็น image recognition ชื่อ   https://www.clarifai.com/  แต่วันนี้ผมจะใช้ ่javascript จริงๆก็มีอีกหลายยี่ห้อ ทั้ง google,ibm,microsoft

(more…)

07 Sep

เริ่มต้นใช้งาน Instagram API.

Instagram ถือเป็น social media อีกหนึ่งเจ้าที่คนนิยมเล่นกัน ซึ่งทำให้งานเทำเว็บจำนวนมากต้องการเอารูปหรือโพสต์ล่าสุดมาแสดงในเว็บเพื่อให้เว็บมีการอัปเดทข้อมูลของเว็บไปด้วย  (more…)

19 Aug

การทำโปรแกรมคำนวณค่างวดรถด้วย Jquery

บทความนี้จะสอนเกี่ยวการใช้ jquery ในการทำแบบฟอร์มคำนวณหาค่่างวดรถต่อเดือนแบบง่ายๆ ใช้  html + css + js(jquery)

(more…)

09 Aug

การทำภาพ Mosaic ด้วย Css ให้กับเว็บไซต์

ภาพแบบ Mosaic คือการนำภาพเล็กหลายๆภาพมารวมกันให้เป็นรูปโดยมีภาพพื้นหลังเป็นหลัก วันนี้เราจะมาใช้ HTML,CSS แค่สองอย่าง

(more…)

24 Jun

การทำ animation ลากเส้นในเว็บโดยใช้ svg กับ css

เรามาเริ่มรู้จักกับ SVG ไฟล์กันก่อนว่ามันย่อมาจาก Scalable vector graphics  คือไฟล์รูปภาพสองมิติชนิดหนึ่ง ใช้วิธีการการจัดเก็บไฟล์จะเป็นรูปแบบ XML ซึ่ง web broswer ก็รองรับไฟล์ชนิดนี้และยังสามารถใช้ css หรือ javascript ในการควบคุมได้ด้วย จากความสามารถข้างต้นนี้ทำให้มีการใช้ svg ในการทำ animation ที่รูปภาพทั่วไปทำไม่ได้(ถึงจะใช้ gif ก็คุณภาพสู้ไม่ได้ หรือ flash ที่ยกเลิกไปแล้ว)
(more…)

08 Jun

การทำ Hybrid application ด้วย framework7 ดึง api จาก feed wordpress

WordPress เป็นหนึ่งใน cms ที่นิยมที่สุดในโลก และคนทำเว็บอย่างผมก็หนีไม่พ้นที่จะต้องใช้ทำงานให้ลูกค้าในบางครั้ง เช่นกันงานด้าน application สำหรับโทรศัพท์ก็มีมาซึ่งผมชอบ Framework 7 มากกว่อันอื่นเนื่องจาก ui ดูดีและวิธีการเขียนที่ไม่ค่อยซับซ้อนเท่าไหร่  เลยมีความคิดว่าจะลองทำ Blog feed application โดยใช้ทั้งสองมารวมกัน สามารถ download code ไปลองเล่นดูได้ครับ (more…)

18 May

การใช้ javascript ทำโปรแกรมคิดดอกเบี้ยแบบลดต้นลดดอก

หลายคนกู้บ้านกับธนาคารนั้น ธนาคารจะมีการคิดอัตราดอกเบี้ยบแบบลดต้นลดดอก ซึ่งจะมีโปรแกรมคำนวณ ว่าต้องจ่ายเดือนละเท่าไหร่ เป็นเงินต้นเท่าไหร่ ดอกเบี้ยเท่าไหร่ ซึ่งวันนี้ในฐานะคนที่ทำเว็บและก็กูธนาคารด้วยเลยคิดทำมาเล่นๆดู เป็นการฝึกทักษะการเขียนโปรแกรมไปในตัว

(more…)

15 May

การทำตัวนับอายุโดยการใส่วันเกิดและเวลา ด้วย javascript

เป็นการใช้ js ในการนับอายุโดยใส่ข้อมูล วัน เดือน ปี และ เวลาที่เกิด ลงไป และทำการคํานวณ ว่ามีอายุกี่ปี กี่วัน  เผื่อมีประโยชน์เอาไว้ใส่เว็บครับ

(more…)

04 Apr

การใช้ php ดึงราคาน้ำมันจาก webservice ของ ptt

ในการทำเว็บที่อยากให้มีการติดราคาน้ำมันในเว็บนั้นวิธีที่ง่ายๆที่สุดคือ การติดแบบ iframe แต่ก็จะประสบปัญหากับความไม่เข้ากันของ design  เว็บกับราคาน้ำมัน  จะเป็นการดีกว่าถ้าเราดึงข้อมูลแบบ web service มากรองเองและใส่ desing ที่เราต้องการเอง โดยใช้ CODE ไม่กี่บรรทัด

(more…)

01 Apr

การทำ Sprite ด้วย CSS

การทำ Sprite คือการทำ Animation จากรูปภาพหลายๆภาพเล่นต่อกันเพื่อให้เกินเป็นภาพเคลื่อนไหว ลองนึกภาพฟิมล์ภาพยนต์สมัยก่อนน่าจะพอนึกภาพออกครับ ซึ่งปัจจุบัน css เองสามารถทำ Animation เรี่ยงรูปแบบนี้ได้เองโดยไม่ต้องพึ่ง javascript ก็ได้

(more…)

21 Feb

การทำเว็บแบบ Single Page เบื้องต้น ด้วย Jquery (javascript)

บทความสอนการทำเมนูสำหรับเว็บ Single Page  หรือ One Page เมื่อกดที่เมนูแล้ว animation ไปตามเนื้อหาที่เรากำหนด เว็บแบบนี้เหมาะสำหรับทำเป็นเว็บส่วนบุคคล แสดงผลงานหรือประวัติส่วนบุคคลหรือเว็บที่มีข้อมูลไม่มาก
(more…)

25 Dec

การใช js face detect vdo

fdet

เนื่องจากเป็น app อย่าง snapchat , SNOW ซึ่งเป็นการใส่ลูกเล่นให้กับวีดีโอที่เราถ่าย  จึงเกิดความสงสัยว่าเขามีหลักการหรือวิธีการอย่างไร ในบทความนี้จะเป็นการทำแบบเบื้องต้น โดยการใช้ javascript + html canvas ครับ

(more…)

13 Dec

การทำเมาส์สกอร์ เอฟเฟค ให้กับเว็บด้วย javascript

mousescroll

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

(more…)

23 Nov

การแปลงรูปภาพข้อความเป็นข้อความที่แก้ไขได (OCR ) ด้วย js

txtocr

การอ่านตัวอักษรจากรูปภาพด้วย javascript library ชื่อว่า Tesseractjs ซึ่งสามารถอ่านได้ถึง 60 ภาษา (ทางผู้พัฒนาเขาคุยมาอย่างนั้นแต่เรื่องความแม่นยำอันนี้ต้องดูเอาแต่ละภาษาครับ)

(more…)

04 Nov

การทำ Responsive ให้กับ table ที่มีข้อมูลหลายคอลั่มน์ด้วย css

grid

ในการทำเว็บไซต์ให้เป็น responsive นั้นอีกหนึ่งปัญหาที่ค่อนข้างลำบากคือการทำให้ table grid ที่มีข้อมูลค่อนข้างมากหลายคอลั่มน์ยาวเกินหน้าจอสำหรับโมบายหรือหน้าจอเล็กก็เลยลองหาวิธีไปเจอมาหนึ่งวิธีที่ค่อนข้างดี โดยใช้ css เท่านั้น

(more…)

27 Aug

สร้างรูปภาพ 360 ใช้ในเว็บไซต์ด้วย three.js

360

บทความการทำรูป 360 องศาแบบ facebook หรือ google street view เพื่อเอามาใช้ในเว็บไซต์ของเรา เช่นเว็บโรงแรมที่ต้องการให้ลูกค้าเห็นห้องและสถานที่ เพื่อให้เว็บมีลูกเล่นที่หน้าสนใจ พร้อม source และวิธีการถ่ายภาพ

(more…)

02 Aug

การทำ LOGO 3D ในเว็บไซต์ ด้วย three.js

threelogo

การทำ 3d ในบทความนี้จะใช้ library  three.js ซึ่งเจะ render โดยใช้ css3 และ webgl  ( web gl เป็น 3d Graphic Library ที่ติดมากับเว็บ browser ใหม่ๆ  จริงๆ webgl ก็คือ opengl ที่จับยัดเข้ามาใน web browser นั้นเอง)

(more…)

28 Jul

การทำฝนตกในหน้าเว็บ ด้วย cavans

rain

เทคนิคการทำ effect ฝนตกในหน้าเว็บโดยใช้ HTML5 CAVANS + JAVA-SCRIPT เอาไว้แต่งเว็บให้มีความน่าสนใจมากขึ้น

(more…)

14 Jul

การออกแบบทำเสื้อยืดตัวอย่าง(ออนไลน์) อย่างง่ายๆ ด้วย fabric js

customize

ในการทำ Custom T-Shirts หรือการออกแบบลายเสื้อยืดออนไลน์ โดยใช้ fabrice js เป็น javascript canvas library ทำให้สามารถควบคุณ canvas ได้ง่ายมากกว่าแต่ก่อนมาก ทำให้ไม่ยากเหมือนแต่ก่อน มี sourcecode ให้ไปศึกษาครับ

(more…)

13 Jul

ทำการซูมหน้าเว็บด้วย zoom js

การทำซูม Element แบบง่ายๆ เอาไว้แต่งเว็บไซต์ให้มีความแตกต่าง โดย plugin ที่จะใช้ชื่อว่า zoom js ที่ค่อนข้างเล็กและไม่หนักมาก

(more…)

12 Jun

ใช้ js ทำ สกรีนแคปเจอร์ หน้าเว็บ และ บันทึกเป็นรูปภาพ

cap

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

(more…)

09 Jun

การทำ FACE DETECT โดยใช้ Jquery plugin

facex

การทำ face detect นั้น เป็นการทำ image processing สามารถดึงรูปหน้าคนจากภาพถ่ายออกมา ซึ่งความแม่นยำนั้นขึ้นอยู่กับอัลกอริทึมของไลบารี่นั้น วันนี้จะมาสอนการทำโดยการใช้ plugin free ของ jquery กันครับ (มี sorce code download)

(more…)

23 May

ทิปการทำ slide perspective แบบเก๋ๆ ให้เข้ากับเว็บไซต์

per

ในการทำเว็บไซต์มีการทำ slide show ในหลายๆแบบ การทำรูป perspective ให้เข้ากับรูป iPhone ที่วางอยู่จึงเป็นไอเดียอีกแบบที่สามารถนำไปใช้ในงานเว็บไซต์ของเราเพื่อให้งานออกมามีความแปลกใหม่ หรือเข้ากับ concept ของงานนั้นๆ ครับ (มี Code ตัวอย่าง)

(more…)

15 May

เทคนิคการสร้าง tooltip โดยใช้ css แบบง่ายๆ

tooltip

บทความนี้เป็นเทคนิคง่ายๆ ในการทำ tool tip โดยไม่ต้องพึ่ง js หรือ plugin อื่น ใช้เพียงแค่ css และ element ของ html เท่านั้น

(more…)