การทำ opacity โดยใช้ CSS

สำหรับ Internet Explorer

filter: alpha(opacity=60);

สำหรับ Firefox และอื่น ๆ ที่รองรับ CSS3

opacity: 0.6;

โดยแบบ CSS 3 จะเป็นจำนวนเท่า ถ้าจะให้ชัวร์ ก็ใส่ไปทั้ง 2 อันเลย

filter: alpha(opacity=60);
opacity: 0.6;

การสร้าง link แบบ rollover image

การทำ link แบบ rollover image มีทั้งวิธีโดยใช้เทคนิค image เลื่อนขึ้นใน css2 หรือใช้ css3 เช่นพวก -webkit-transition (ใช้ใน Safari และ Chrome), -moz-transition (ใช้ใน Mozilla) หรือ -o-transition (ใช้กับ Opera)

แต่เนื่องจาก browser ที่ใช้ในปัจจุบันยังเป็น IE ซะส่วนใหญ่ พวก css3 เหล่านี้จึงยังไม่ support ซักเท่าไหร่ ดังนั้นทางออกที่ดีที่สุดคือใช้ css2 นั่นเอง

เริ่มจาก HTML โดยมี code ดังนี้

<div class="link"> 
  <a href="#">link</a> 
</div> 

ต่อมาคือส่วนของ css มีดังนี้

.link a {
    width: 100px; height:100px; 
    float: left;
    background: url(a.jpg) top left no-repeat;
    line-height: 100px;
    text-align: center;
    color: #ffff00;
}
.link a:hover {
    background-position: 0 -100px; 
    color: #000000;
}

จากตัวอย่าง css ในส่วนของ background รูปมีขนาด 100px x 200px โดยต้องมีการใช้ float ด้วย ไม่งั้นรูปจะขึ้นไม่เต็มภาพ โดยรูปมีลักษณะดังนี้

จะเห็นว่ารูปมี 2 ส่วน แต่ละส่วนมีความสูง (height) = 100px

ในส่วนการ hover นั้นเรามาทบทวนการจัดตำแหน่งของ css กันก่อน ค่าตัวแรกคือตำแหน่งทางแนวนอน ส่วนค่าตัวที่สองคือค่าในแนวตั้ง ดังนั้นเมื่อสั่ง hover ก็ให้เลื่อนขึ้นไป 100 px ซึ่งก็คือค่า -100px นั่นเอง

เมื่อทำการทดลอง เมื่อลองเอา cursor ไปวางบน link background ก็จะเลื่อนขึ้นเป็นสีที่เราต้องการ

การทำ image sprites คือเมื่อมีการ hover ภาพที่เป็น link ภาพจะเปลี่ยนเป็นอีกภาพ โดยมีวิธีง่าย ๆ ที่กำหนดใน css คือ

     
    margin-top: -100px;

เมื่อ hover ภาพจะเลื่อนขึ้นไป 100 pixels และเปลี่ยนเป็นอีกภาพที่เราต้องการ

credit: CSS Sprites w/out Using Background Images By Soh Tanaka

My first JAVA application

ความจริงก็ลองเขียนตั้งแต่ปี 2547 ก็ผ่านมาประมาณ 6 ปีแล้ว แบบลองแล้วก็ลืมมาเรื่อย ๆ ครั้งนี้ที่มาสนใจเขียนอีกครั้งเพราะกำลังพัฒนาระบบโดยใช้ PHP อยู่ พอทำ ๆ ไปก็รู้สึกว่า "ทำไมเราเขียนโค๊ดได้มั่วอย่างนี้ฟะ" หรืออาจเป็นเพราะภาษา PHP มันเป็นอย่างนี้ คือจะประกาศฟังก์ชันแล้วก็ใช้ได้เลย หรือจะ embed ไปใน HTML เลยก็ได้

เลยคิดว่าถ้าเราลองเขียนในรูปแบบ Object-Oriented Programming (OOP) ได้ก็คงจะดี ลองดูตัวอย่างการเขียน class จาก KILLERPHP ก็เห็นมันสร้าง class มี getter, setter เลยคิดว่าง่าย ก็เลยลองเขียนคลาสแล้วเรียกใช้ดู ก็ง่ายจริง ๆ แต่เรื่องฐานข้อมูลพอทำไปแล้วมันชักจะมั่วพิกล ต้องไปศึกษา Persistence Data Object อีก ซึ่งต้องเกี่ยวข้องกับ Design Pattern ของ GOF (Gang of Four) อีก ก็เลยคิดว่าน่าจะเริ่มจากศูนย์ใหม่อีกครั้ง โดยอ่านจากหนังสือจาวาของ ดร.วีระศักดิ์ ซึงถาวร (อ่านกี่ทีก็งงทุกที)

เอาล่ะ มาเริ่ม Hello World กันเลย

//Hello1.java
class Hello  {
    public static void main(String args[])  {
            System.out.println("Hello World");
    }
}

เปิด Command Prompt เปลี่ยน directory ไปที่ d:\MyJava\Ch1 และคอมไพล์ด้วย javac.exe โดยพิมพ์ที่ Command Prompt ดังนี้

javac Hello1.java

จะได้ไฟล์ Hello.class เป็นผลลัพธ์ ชื่อ class ได้มาจาก class ที่เราสร้างขึ้น ซึ่งปกติแล้วควรสร้าง 1 class ต่อ 1 ไฟล์ และควรตั้งชื่อ class ให้เหมือนกับชื่อไฟล์ แต่มีข้อยกเว้นคือ ถ้าไม่ได้ประกาศ class เป็น public ก็สามารถตั้งชื่อไฟล์ไม่เหมือนกับชื่อ class ได้

ทำงานโปรแกรม Hello.class ด้วย java.exe โดยพิมพ์ที่ Command Prompt ดังนี้

java Hello

จะได้ "Hello" พิมพ์ออกไปที่จอภาพ ขั้นตอนที่ 3 ถึง 4 แสดงในรูปด้านล่างนี้

การตั้งค่าไฟล์ php.ini

1. หาไฟล์ชื่อ php.ini-dist ในโฟลเดอร์ php
2. เปลี่ยนชื่อเป็น php.ini
3. หาคำว่า "extension_dir" และใส่ว่า

   extension_dir = "C:\web\php\ext"

   โดย path ที่ใส่นั้นเป็นที่ตั้งของโฟลเดอร์ php
4. ลบเครื่องหมาย ";" ที่อยู่ในส่วน Dynamic Extensions ดังนี้
   • extension=php_gd2.dll
   • extension=php_mbstring.dll
   • extension=php_mcrypt.dll
   • extension=php_mysql.dll
   • extension=php_mysqli.dll
   • extension=php_pdo.dll
   • extension=php_pdo_mysql.dll
   • extension=php_soap.dll
5. เมื่อเสร็จแล้วให้ย้ายไฟล์ php.ini ไปยัง C:\windows แล้วก็ restart เครื่อง เป็นอันเสร็จพิธี

การจัดวางตำแหน่งปุ่ม submit ให้อยู่กึ่งกลางด้วย CSS

สมมติว่าเรามี Code html ดังนี้

<form method="post" action="post">
...
...
...

<div>
<input type="submit" name="btnsubmit" id="btnsubmit" 
class="btn" value="ตกลง" />
<div>
</form>

การจะจัดกึ่งกลางปุ่ม submit นั้นมีหลักการดังนี้

• ต้องแสดงเป็น block (display: block;)



• จัดกึ่งกลาง (margin: 0 auto;)



• ต้องกำหนดความกว้าง (width: 150px;)

ดังนั้นเราสามารถกำหนดรูปแบบปุ่ม submit ให้อยู่ตรงกลางได้ดังนี้

input.btn  {
  width: 60px;
  margin: 0 auto;
  display: block;
}

เท่านี้ปุ่ม submit ก็จะอยู่กึ่งกลางสมใจ

ทดลองใน IE8 และ FF3.5 Work ครับ

ตั้งค่า Apache 2.2.11 ให้สามารถใช้งาน PHP ได้

ขั้นแรกต้องไปดาวน์โหลดตัวติดตั้ง Apache มาก่อน โดยปัจจุบัน http://windows.php.net/ แนะนำให้ใช้ Apache จาก http://www.apachelounge.com/download/ ซึ่งตอนนี้จากการลงใน Windows 8.1 64 bit ผมใช้แบบ win32 เพราะตัว php เองตัว 64 bit ยังเป็น experiment จึงรอให้เป็นตัวจริงค่อยนำมาใช้
หลังจาก download เสร็จสิ้นและตั้งค่าตาม readme.txt ที่แตกไฟล์แล้วให้ใส่บรรทัดล่างสุดของไฟล์ httpd.conf ซึ่งอยู่ใน folder "conf" ดังนี้

PHPIniDir "d:/web/php"
LoadFile "d:/web/php/php5ts.dll"
LoadModule php5_module "d:\web\php\php5apache2_4.dll"
AddType application/x-httpd-php .php 

ที่บรรทัดแรก (LoadModule php5_module) ให้อ้างถึง folder ที่ติดตั้ง php ไว้
จากหนังสือ BUILD YOUR OWN DATABASE DRIVEN WEB SITE USING PHP & MYSQL ของ sitepoint บอกวีธีการตั้งค่าอีกแบบไว้ดังนี้ (เลือกได้ทั้ง 2 แบบ)

LoadModule php5_module "C:\web\php\php5apache2_2.dll"
AddType application/x-httpd-php .php
PHPIniDir c:/web/php"

จากนั้นให้ search หาคำว่า DocumentRoot และให้แก้เป็นแฟ้มที่เก็บไฟล์ html

DocumentRoot "C:/web/www"

ต่อมาให้หาคำว่า Directory และแก้ดังนี้

<Directory "C:/web/www">

สุดท้ายแก้ไขส่วนที่ทำให้ apache รู้จักกับไฟล์ index.php

<IfModule dir_module>
    DirectoryIndex index.html
</IfModule>

ให้เพิ่ม "index.php" ดังนี้

<IfModule dir_module>
    DirectoryIndex index.html index.php
</IfModule>

เสร็จแล้วให้ restart Apache ก็เป็นอันเสร็จสิ้น

ขนาดรูปถ่ายติดบัตร

สั้นๆ ห้วนๆ

รูป 2 นิ้ว = 4.2 x 5.5 c.m.

รูป 1.5 นิ้ว = 3.5 x 4.2 c.m.

รูป 1 นิ้ว = 2.8 x 3.5 c.m.

credit: ตากล้อง ดอทคอม