What's New?

Text Effect: วิธีทำตัวอักษรเย็บมาจากผ้าด้วย Photoshop

วันนี้เราจะทำตัวอักษรให้เหมือนเย็บมาจากผ้าด้วยโปรแกรม Photoshop 1. ให้ดาว์นโหลด และเพิ่ม pattern "fabric pattern sample pack" ไปในโปรแกรม Photoshop ก่อนสำหรับขั้นตอนการเพิ่ม Pattern

Tutorial : Graphic

สร้างอนิเมชันง่ายๆด้วย CSS3

CSS กับการทำอนิเมชัน ถ้าเมื่อก่อนอาจทำไม่ได้ถ้าไม่มีตัวช่วยอย่างพวก jQuery หรืออื่นๆ ซึ่งคงเป็นเรื่องยากสำหรับผู้ที่ไม่สามารถเขียนโค้ดได้  แต่เมื่อ CSS3 เปิดตัว ทำให้การใช้งานของตัว CSS สามารถทำได้มากขึ้นไม่ใช่เพียงแต่การสร้างเว็บไซต์อย่างเดียว แต่ยังสามารถทำอย่างอื่นได้อีกด้วย ถ้าศึกษาดูจากเว็บไซต์ W3School และนำตัวอย่างโค้ดมาฝึกเขียนดูก็จะทำให้สามารถพํฒนาโค้ดตัวอย่างไปเป็นอนิเมชันรูปแบบต่างๆ อย่างง่ายๆได้ โดยต้องศึกษาคำสั่งและคุณลักษณะต่างๆให้เข้าใจแล้วจะสามารถนำมาปรับและทำอื่นๆ ได้อีกมาก   โดยวันนี้จะมาลองทำตัว animation ใน CSS3 ดู โดยจะมีคำสั่งที่เกี่ยวข้องอยู่ 2 ตัว คือ animation และ @keyframe ซึ่งตัวบราวเซอร์ที่สามารถแสดงผลได้ก็มี Internet Explorer 10 Firefox และ Opera ส่วนใน Safari และ Chrome ต้องเพิ่ม -webkit-animation เพื่อจะให้แสดงผลได้โดยตัว animation จะมีการกำหนดค่าดังนี้ animation: name duration timing-function delay iteration-count direction; name: ชื่อของอนิเมชัน duration: ระยะเวลาในการแสดงอนิเมชันตั้งแต่ต้นจนจบ time-function:

อ่านต่อ

สร้างเส้นขอบให้เป็นรูปภาพด้วย CSS3

สร้างเส้นขอบให้เป็นรูปภาพด้วย CSS3

การทำขอบของกล่องข้อความนั้นส่วนมากมักจะทำเป็นลายเส้นไม่ว่าจะเป็นเส้นทึบหรือเส้นประหรือจุด แล้วแต่ความชอบของแต่ละบุคคล โดยใช้ CSS เข้ามาช่วยในการกำหนดค่ารูปแบบต่างๆ แต่ตอนนี้ CSS3 กำลังเป็นที่สนใจอยู่มากในปัจจุบัน ด้วยคำสั่งใหม่ๆที่เพิ่มลูกเล่นให้การทำเว็บไซต์ง่ายและสะดวกขึ้น และการนำรูปภาพมาทำขอบก็เป็นอีกอย่างนึงที่ CSS3 สามารถทำให้เว็บไซต์ของคุณดูน่าสนใจมากขึ้น และวิธีทำก็ไม่อยากมากนักเริ่มด้วยการทำขอบรูปภาพตามต้องการดังรูป รูปภาพนำมาจากตัวอย่างในเว็บไซต์ของ w3school css3 border-image properties  โดยตัวคำสั่งที่ใช้ในการใส่รูปให้เส้นขอบนั้นคือ border-image นั่นเอง โดยการตั้งค่าต่างๆดังนี้ border-image: source slice width outset repeat; ตัวอย่างเช่น   border-image:url(border.png) 30 30 round;   source ก็คือที่อยู่ของรูปภาพที่เราต้องการใช้มาเป็นขอบ ซึ่งนั้นก็ขึ้นอยู่ว่าเก็บภาพไว้ที่ไหนจากตัวอย่างคือส่วนที่เป็น url(border.png)   slice, width, outset ซึ่งจะแบ่งออกเป็น 9 ช่องเล็กๆเท่าๆกัน โดยค่าเหล่านี้จะกำหนดขนาดของรูปที่อยู่ในช่องทั้ง 9 อัน

อ่านต่อ

สร้างเงาให้ตัวอักษรด้วย CSS3

เมื่อก่อนถ้าต้องการสร้างเงาให้ตัวอักษรก็ใช้วิธีไม่ยากแต่หลายขั้นตอนหน่อยแล้วแต่ละวิธีของคนเขียน CSS แต่ละคน ซึ่งแตกต่างกันออกไป หรือไม่ก็เอา jQuery เข้ามาช่วย แต่ CSS3 มีวิธีที่ทำง่ายกว่า และเร็วขึ้นโดยใช้โค้ดของ CSS3 คือ text-shadow โดยจะมีการกำหนดค่าให้กับตัว systax ดังต่อไปนี้ X-Offset หรือ เงาในแนวนอน เป็นการกำหนดค่าระยะห่างของเงาในแกน X หรือแนวนอน Y-Offset หรือ เงาในแนวตั้ง เป็นการกำหนดค่าระยะห่างของเงาในแกน Y หรือแนวตั้ง Blur กำหนดความเข้มของเงา Color สีของเงาที่ต้องการ ตัวอย่าง text-shadow: X-Offset Y-Offset Blur Color;text-shadow: 0 1px 0 #000; ผลลัพธ์ โค้ดตัวอย่างHTML <p class="textshadow">Web.Ofebia - เว็บไซต์เพื่อคนทำเว็บ :)</p> CSS .textshadow{  font-size: 20px;  color: #ADD878; text-shadow:2px 2px 1px

อ่านต่อ

Pyramid 1.4 has been released

ในวันที่ 18 ธันวาคม ที่ผ่านมาทางทีมงาน Pylons Project ได้ประกาศออกรุ่น Pyramid เวอร์ชัน 1.4 อย่างเป็นทางการ หลังจากปล่อยรุ่นทดสอบมาพักใหญ่ โดยมีคุณสมบัติเด่นๆ ดังประกาศไว้ที่ What’s New In Pyramid 1.4 ต่อไปนี้  สามารถเพิ่ม predicate ได้เอง โดยปรกติแล้ว Pyramid จะต้องกำหนดชื่อ route name ของแต่ละ view จากนั้นต้องระบุว่า route name นั้นจะทำงานเมื่ออ้างถึง URL อะไร แต่การเพิ่มขึ้นในส่วนนี้ เราสามารถละเว้นการกำหนดชื่อ route name ไว้ได้ โดยสามารถระบุไว้่ว่าจะให้ request ที่มีคุณลักษณะอย่างไร ทำงานที่ view ไหนแทน เช่นการระบุ request method หรือ ลักษณะของ Content-Type เป็นต้น ปรับเปลี่ยน JSON Serialization ได้ง่ายขึ้น Pyramid สามารถเลือกได้ว่าจะใช้อะไรเป็น renderer เช่น Mako Chameleon Jinja2 หรือแม้กระทั่ง JSON แต่เนื่องจาก JSON ที่เตรียมไว้ให้นั้นไม่สามารถเปลี่ยนทุกรูปแบบเป็น JSON ได้ เนื่องจากไม่ได้ระบุไว้ในมาตฐานของ JSON เช่น วัน หรือ เวลา (datetime) เพื่อช่วยให้สามารถจัดการกับรูปแบบที่เหล่านั้นได้ตามต้องการ จึงเพิ่มส่วนนี้เข้ามา ส่งผลให้การสร้าง

อ่านต่อ

Eclipse SDK 4.2

Eclipse SDK 4.2

Eclipse SDK เป็นอีกหนึ่ง IDE ยอดนิยมที่สามารถใช้เขียนโปรแกรมได้หลายภาษา ไม่ว่าจะเป็น JAVA C/C++ Ruby Python PHP ฯลฯ  ถึงแม้ว่าปัจจุบันทางโครงการ Eclipse จะออกรุ่นซอฟต์แวร์ปัจจุบันที่รุ่น 3.7.2 (ข้อมูล ณ วันที่ 18 มิ.ย. 2555) รหัส Indigo ซึ่งออกรุ่นไปตั้งแต่วันที่ 22 มิ.ย. 2554 โดยทีื Indigo นั้นใช้รูปแบบเดิมที่เราเห็นมาอย่างยาวนาน โครงการ Eclipse ได้พัฒนา Eclipse แพลตฟอร์มใหม่ภายใต้รหัส Juno ซึ่งจะออกรุ่นภายในเดือนนี้ (มิ.ย. 2555) โดยใช้รูปแบบอินเตอร์เฟสโปรแกรมแบบใหม่ซึ่งใช้ CSS ในการแสดงคุณลักษณะ และมีการพัฒนาอยู่บนฐานของ OSGI แต่ยังคงความสามารถในการใช้งานส่วนเสริม (plug-in) แบบเดิมเอาไว้ จากการทดสอบกับส่วนเสริม C/C++ Pydev EGit กับ Juno สามารถทำงานได้ดีแบบเดิม ตัวอย่าง Eclipse 3.7 ตัวอย่าง Eclipse

อ่านต่อ

สร้างคอลัมน์มากกว่าหนึ่งคอลัมน์ (multiple columns) บนเว็บไซต์ด้วย CSS3

สร้างคอลัมน์มากกว่าหนึ่งคอลัมน์ (multiple columns) บนเว็บไซต์ด้วย CSS3

การทำ multiple columns แบ่งการแบ่งข้อความในเว็บไซตืให้เป็นคอลัมน์เหมือนในหนังสือพิมพ์ โดยไม่ต้องแบ่งคอลัมน์เนื้อหาเอง ซึ่งทำได้โดยการกำหนดความกว้างของแต่ละคอลัมน์ และจำนวนคอลัมน์ที่ต้องการ ทำให้ง่ายต่อการจัดโครงสร้างของเว็บไซต์ในรูปแบบที่เหมือนกับหนังสือพิมพ์ ซึ่งการจัดรูปแบบเนื้อหานั้นจะเป็นแบบอัตโนมัติ คือ เมื่อข้อความเกินขอบเขตที่กำหนดมันก็จะขึ้นไปคอลัมน์ถัดไปเอง ดังรูป ซึ่งตัว element ตัวนี้ สามารถแสดงผลบน Browser รุ่นต่างๆของ IE10+, Opera 11.1, Firefox 2+, Chrome 4+, Safari 3.1+  (-o-, -moz-, -webkit- ตามลำดับ) โดยการทำ multiple culumns นั้นมีมีการกำหนดคุณสมบัติ ดังนี้ column-count - จำนวนคอลัมน์ที่ต้องการ column-width - ความกว้างของคอลัมน์ column-gap - ระยะห่างระว่างคอลัมน์กับตัวกั้นระหว่างคอลัมน์ เป็นส่วนที่ระบายสีแดง มีผลลัพธ์คล้ายกับ padding เพียงแต่ไม่ต้องตั้งค่าทั้ง 4 ทิศ ดังรูป column-rule - กำหนดลักษณะเส้นกั้นระหว่างคอลัมน์ โดยตัว element ตัวนี้อาจเหมาะสมกับข้อความ หรือเว็บไซต์ หรือองค์ประกอบของเว็บไซต์ที่เน้นข้อความเป็นหลัก

อ่านต่อ

การนำข้อมูลเข้าและออกจาก MongoDB

หากใครเคยใช้งาน MySQL หรือ PostgreSQL คงจะรู้จักวิธีนำข้อมูลทั้งฐานข้อมูลเข้าหรือนำข้อมูลออกจากระบบจัดการฐานข้อมูล (Database Management System) โดยใช้ mysqldump หรือ pg_dump กันดี สำหรับ MongoDB แล้วก็มีคำสั่งใกล้เคียงกับคำสั่ง mysqldump หรือ pg_dump เช่นกัน โดยแยกออกเป็นสองคำสั่งหลักคือ mongodump และ mongorestore  วิธีการนำข้อมูลออกอย่างง่ายสามารถใช้คำสั่ง mongodump -d <ชื่อฐานข้อมูล> $ mongodump -d ofebia connected to: 127.0.0.1DATABASE: ofebia to dump/ofebia ofebia.system.indexes to dump/ofebia/system.indexes.bson      19 objects  ofebia.fs.chunks to dump/ofebia/fs.chunks.bson      0 objects ofebia.user_groups to dump/ofebia/user_groups.bson      2 objects ofebia.users to dump/ofebia/users.bson      2 objects  ofebia.reserved_username to dump/ofebia/reserved_username.bson      3 objects  ofebia.categories to

อ่านต่อ

เพิ่มบัญชีผู้ใช้ให้ PostgreSQL ง่ายกว่าที่คิด

จากบทความ เริ่มต้นใช้งาน PostgreSQL ที่เขียนไว้นานมาแล้ว การเพิ่มบัญชีผู้ใช้งานให้กับ PostgreSQL จะต้องเพิ่มผ่านทางคำสั่ง SQL ซึ่งบางครั้งการใช้คำสั่ง SQL ที่ไม่ค่อยได้ใช้งานบ่อยๆ อย่าง CREATE USER อยากสร้างความหนักใจได้เหมือนกัน (อย่างน้อยก็ผม) หากท่านใช้งานระบบปฏิบัติการ Linux อยู่ และต้องการเพิ่มบัญชีผู้ใช้ให้กับ PostgreSQL ได้อย่างง่ายๆ ด้วยคำสั่ง createuser กัน  # su postgres$ createuser -P test Enter password for new role: Enter it again: Shall the new role be a superuser? (y/n) y เริ่มต้นด้วยการเปลี่ยนไปเป็นผู้ใช้ postgres แล้วพิมพ์คำสั่ง createuser -P ตามด้วยชื่อบัญชีผู้ใช้ จากนั้นโปรแกรมจะถามรหัสลับสองครั้ง และต้องการให้บัญชีผู้ใช้เป็นผู้ดูแลระบบหรือไม่ ถ้าใช่ก็ตอบ y ไม่ก็ตอบ n หากต้องการลบบัญชีผู้ใช้ก็ง่ายๆเพียงแค่ใช้คำสั่ง dropuser $ dropuser test ง่ายๆ เพียงแค่นี้ไม่ต้องใช้ SQL

อ่านต่อ
 

2011 Ofebia. Creative Commons Attribution 3.0 License