ช่วง 2 – 3 อาทิตย์ที่ผ่านมา ห้องงานเทคโนโลสีสารสนเทศทำการขยายห้องใหม่ มีการกันห้อง ยกพื้น ปูพรม ทั้งเสียงดังและกลิ่นสี แต่ว่าไม่มีปัญหา ทนได้เพื่อห้องใหม่
พี่ณัฐเก๊กซะ
สองหนุ่มหล่อ
สามหนุ่มสามมุม
chill chill
วันพุธที่ 29 กันยายน พ.ศ. 2553
CSS shorthand properties แบบต่าง ๆ
การใช้ CSS ที่ดีคือทำให้เวลาการโหลดสั้นที่สุด หนึ่งในวิธีที่นิยมคือการประกาศ property ของ css แบบสั้น (shorthand) นั่นเอง
Font
font: 1em/1.5em bold italic serif;
จากแบบเต็ม
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif;
Background
background: #fff url(image.gif) no-repeat top left;
จากแบบเต็ม
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
Lists
list-style: disc outside url(image.gif);
จากแบบเต็ม
list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif);
ความจริงมีมากกว่านี้ ทั้ง Border, Margin & Padding แต่ใช้บ่อยเลยไม่ได้ใส่
วันพฤหัสบดีที่ 23 กันยายน พ.ศ. 2553
CSS Selector แบบต่าง ๆ
selector ใน css มีหลายแบบ แต่จะแนะนำอันหลัก ๆ ดังนี้
- Descendant Selector
- Parent-Child Selector
- Adjacent Selector
- Attribute Selector
โดยจะขออธิบายทีละอย่าง เริ่มกันเลย
1. Descendant Selector
Descentdant แปลโดย พจนานุกรม Longdo แปลว่า "ซึ่งสืบทอดมา", "ผู้สืบสกุล", "ทายาท" ซึ่งก็คือ การสืบทอดนั่นเองโดยมีตัวอย่างการใช้ดังนี้
CSS:
li em {
color: green;
}แบบนี้จะเลือกทุก ๆ em ที่อยู่ภายใต้ li โดยเลือกทั้งหมดไม่ว่า em จะซ้อนด้วยแท็กอื่นอีกที ขอแค่ให้มี li ครอบอยู่ก่อนหน้านั้น
ใน HTML ข้างล่าง em ตัวแรกจะแสดงผลเป็นสีเขียว แต่ em ตัวที่สองจะเป็นสีปกติ
HTML:
<ul>
<li>Item One</li>
<li>Item <em>two</em></li>
</ul>
<p>An <em>italicized</em> words.</p>
2. Parent-Child Selector
มีตัวอย่างการใช้งาน ดังนี้
CSS:
body > p {
font-weight: bold;
}แบบนี้จะเลือกเฉพาะ p ที่เป็น element ลูกโดยตรงของ body ไม่นับพวกที่โดนซ้อนอยู่อีกโดย tag อื่น
จาก HTML ข้างล่าง p ตัวที่ไม่อยู่ใน block ของ element ในที่นี้คือ <p id="para2">จะแสดงผลเป็นตัวหนา เพราะอยู่ติดกับ body แต่ p ตัวที่สองจะเป็นเป็นขนาดปกติ
HTML:
<body>
<div class="sidebar">
<p id="para1">This is the sidebar.</p>
</div>
<p id="para2">Welcome to the web site! Here's a list</p>
<ul>
<li><p id="para3">This is the first paragraph in the list. It's also the last.</p>
</li>
</ul>
</body>
การใช้ Parent-Child Selector ไม่รองรับกับ Internet Explorer 6 ดังนั้นก็แล้วแต่เป้าหมายของผู้ชมกลุ่มเป้าหมายละกาน
3. Adjacent Selector
Adjacent Selector เป็น selector ที่ไม่ใช้การสืบทอดเหมือนกับ Descendant Selector แต่เป็นตัวที่ติดกันในโค๊ด HTML ดังตัวอย่างด้านล่าง
CSS:
h1+h2 {
margin-top: 11px;
}จากตัวอย่างเป็นการบอกให้ h2 ตัวแรกที่อยู่ติดกับ h1 มีช่องว่างด้านบน 11 px โดยดูตัวอย่างจาก HTML ดังนี้
<h1>This is important stuff!</h1>
<h2>First important item</h2>
<h2>Second important item</h2>
จาก HTML แท็ก h2 บรรทัดที่ 2 จะห่างจาก h1 ขนาด 11 px แต่จะไม่มีผลกับ h2 ในบรรทัดที่สาม
และอีกตามเคย ไม่ support Internet Explorer 6
4. Attribute Selectors
selector แบบที่ 4 นี้จะคล้ายกับการเขียนโปรแกรม โดยมีรูปแบบดังนี้
[attribute] จะเข้าเงื่อนไขคือกำหนด attribute ทั้งหมด
[attribute="value"] จะเข้าเงื่อนไขเมื่อมีการกำหนดค่าให้กับ attribute
[attribute~="value"] คือ attribute ใด ๆ ที่มีคำตรงกับค่าที่กำหนด จากการเว้นช่องว่าง
[attribute|="value"] คือ attribute ใด ๆ ที่มีคำตรงกับค่าที่กำหนด โดยใช้เครื่องหมายคำพูด
ตัวอย่างการใช้งาน ถ้าต้องการให้ textbox (<input type="text" />) มีตัวอักษรสีขาว และพื้นหลังเป็นสีดำ สามารถกำหนด CSS ดังนี้
input[type="text"] {
color: white;
background-color: black;
}อีกซักตัวอย่าง
CSS:
div[class~="advertisement"] {
background: rgb(220, 220, 220);
width: 74em;
border: solid 0.02em rgb(200, 200, 200);
margin: 0 auto;
min-height: 5em;
}HTML:
<div class="Advertisement promotion banner">
<p>Content goes here</p>
</div>
แค่นี้แหละ ขี้เกียจแระ
วันจันทร์ที่ 20 กันยายน พ.ศ. 2553
การทำ opacity โดยใช้ CSS
สำหรับ Internet Explorer
filter: alpha(opacity=60);
สำหรับ Firefox และอื่น ๆ ที่รองรับ CSS3
opacity: 0.6;
โดยแบบ CSS 3 จะเป็นจำนวนเท่า ถ้าจะให้ชัวร์ ก็ใส่ไปทั้ง 2 อันเลย
filter: alpha(opacity=60);
opacity: 0.6;
วันพฤหัสบดีที่ 17 มิถุนายน พ.ศ. 2553
การสร้าง 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
วันพุธที่ 10 กุมภาพันธ์ พ.ศ. 2553
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 แสดงในรูปด้านล่างนี้
วันพุธที่ 22 กรกฎาคม พ.ศ. 2552
การตั้งค่าไฟล์ php.ini
- หาไฟล์ชื่อ php.ini-dist ในโฟลเดอร์ php
- เปลี่ยนชื่อเป็น php.ini
- หาคำว่า "extension_dir" และใส่ว่า
extension_dir = "C:\web\php\ext"
โดย path ที่ใส่นั้นเป็นที่ตั้งของโฟลเดอร์ php - ลบเครื่องหมาย ";" ที่อยู่ในส่วน 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
- เมื่อเสร็จแล้วให้ย้ายไฟล์ php.ini ไปยัง C:\windows แล้วก็ restart เครื่อง เป็นอันเสร็จพิธี
สมัครสมาชิก:
บทความ (Atom)