paint : แสงเงา by

31
Aug
0
sds

sds

ทำไฟล์ vector ธรรมดาๆ ให้กลายเป็นธงแบบพริ้วๆ by

31
Aug
0

วาดลายธง

Selection ไฟล์เอาไปไว้ใน Symbols

เสร็จแล้วทำการลบไฟล์ที่อยู่บน Artboards ทิ้งไป

วาดเส้นให้มีลักษณะโค้ง

แล้วไปที่ Effect > 3D > Extrude & Bevel

จากรูปด้านบน

1. ปรับองศา

2. ปรับขนาด

3.ทิศทางของแสง

4.คลิก Map Art

เลือกไฟล์ธงที่อยู่ใน Symbols

เราก็ได้ธงที่กำลังโบกพริ้วปลิวไสว…

Newrelic – Cloud Server Monitoring by

31
Aug
1

ผมได้เคยเขียนบทความเกี่ยวกับตัว Newrelic เครื่องมือสำหรับ monitor server บน Cloud ขั้นเทพ ไปเมื่อ 2 ปีที่แล้ว ซึ่งส่วนนั้นจะเน้นการ monitor ที่ตัว application level แต่ครั้งนี้เราจะมาดูที่ส่วนของ server ด้านหลังกันบ้างเช่น CPU, RAM, Disk I/O ต่างๆ ซึ่งเดี๋ยวนี้ Newrelic ก็ได้พัฒนาขึ้นไปมากกว่าเก่ามากแล้ว และผมเองก็ยังคงใช้งานมาอย่างต่อเนื่อง มาลองดู Feature ด้าน server กันบ้างซึ่งส่วนนี้เหมาะสำหรับ System Engineer ที่ปกตินั่งดูแต่ shell ดำๆ ซึ่งดูได้แค่ข้อมูลปัจจุบัน หากเกิดอะไรขึ้นขณะที่นอนอยู่ จะมาดูย้อนหลัง บางคนอาจเลือกที่จะติดตั้ง Cacti, MRTG, Zabbix แต่ก็จะยุ่งยากเพราะต้องมี server เอาไว้เก็บข้อมูล stat ย้อนหลังต่างๆ เอง ขั้นตอนการติดตั้งก็ต่างๆ กันไป วันนี้ลองมาดู Newrelic บ้าง อาจจะเปลี่ยนใจทำให้คุณชอบขึ้นมาบ้างก็ได้ :)

Newrelic ตอนนี้ขยายบริการใหญ่โตมาก แบ่งการ Monitor หลักๆ ได้ออกเป็น

  1. Web App Monitoring – ซึ่งมันคือบริการแรกเริ่มของ New Relic ที่ผม Review ไปเมื่อ 2 ปีที่แล้ว
  2. Mobile App Monitoring – ตรงนี้ผมยังไม่เคยใช้บริการ แต่เข้าใจว่าเน้นการ monitor ด้านข้อมูล Network ที่ส่งเข้าออกจากตัวมือถือ
  3. Server Monitoring – ตัวนี้คือที่ผมจะพูดถึงวันนี้

lvp1

สิ่งแรกที่ต้องมี แน่นอนคือ CPU และ Memory ที่ใช้งานไปของเครื่อง (ในรูปปรับให้แสดง 24 ชม. ซึ่งจริงๆ สามารถปรับเป็น 30 นาทีแล้วดูผลได้เกือบ Real time)

hello html by

30
Aug
0

หลังจากเขียนแต่ฝั่ง server มาสักระยะ ก็ต้องมาทำในส่วนของหน้าแสดงผลซึ้ง ตั้งใช้ความรู้ หลายเรื่องมากเช่น html css ajax jquery ซึ้งผก็ยังไม่มีความรู้เลย เลยต้องมาศึกษา เพิ่มหน่อย ตัวแรก ที่ต้องศึกษาเลย ก็คือ html เพราะเป็นพื้นฐานของอย่างอื่น ครับ งั้นเรามาทำความรู้จัก html แบบเร่งรัดกันครับ
html คือ HyperText Markup Language เป็นภาษาคอมพิวเตอร์ ที่มีลักษณะเป็นภาษาในเชิงการบรรยายเอกสารไฮเปอร์มีเดีย
(Hypermedia Document Description Language) เพื่อนำเสนอเอกสารนั้น เผยแพร่ในระบบเครือข่าย เว็บ นั้นเองครับ มันมีโครงสร้างการเขียน
ที่อาศัยตัวกำกับ เรียกว่า แท็ก (Tag) ควบคุมการแสดงผลของข้อความ, รูปภาพ หรือวัตถุอื่นๆ ผ่านโปรแกรมบราวเซอร์ (Browser)
Tag
Tag เป็นลักษณะเฉพาะของภาษา HTML ใช้ในการระบุรูปแบบคำสั่ง หรือการลงรหัสคำสั่ง HTML ภายในเครื่องหมาย less-than bracket ( < )
และ greater-than bracket ( > ) โดยที่ Tag HTML แบ่งได้ 2 อย่าง
เป็น tag เดี่ยว กับ tag เปิด /ปิด ดังนี้ครับ
tag เดี่ยว เป็น Tag ที่ไม่ต้องมีการปิดรหัส

Tag เปิด/ปิด เป็น Tag ที่ประกอบด้วย Tag เปิด และ Tag ปิด โดย Tag ปิด จะมีเครื่องหมาย slash (/) นำหน้าคำสั่งใน Tag นั้นๆ

**แต่ html 5 เปลี่ยนมาให้เขียนในรูปแบบ Tag เปิด/ปิด ทั้งหมด ครับ

ต่อไปเรามาเรียนรู้คำสั่งที่จำเป็นต้องใช้ของมันกันครับ

Tag คำอธิบาย
<!–…–> กำหนดแสดงความคิดเห็น หรือ คอมเม้นต์
<! DOCTYPE> กำหนดชนิดของเอกสาร
<a> กำหนดจุดยึด
<abbr> กำหนดคำย่อ
<acronym> กำหนดตัวย่อ
<address> ข้อมูลการติดต่อผู้เขียนกำหนดสำหรับเจ้าของ / ของเอกสาร
<b> กำหนดข้อความเป็นตัวหนา
<big> กำหนดตัวอักษรขนาดใหญ่
<blockquote> กำหนดคำพูดยาว
<body> ตัวกำหนดของเอกสาร
<br /> กำหนดตัวแบ่งบรรทัดเดียว
<button> กำหนดกดปุ่ม
<caption> กำหนดคำอธิบายตาราง
<center> เลิก. เป็นศูนย์กลางกำหนดข้อความ
<cite> กำหนดการอ้างอิง
<code> กำหนดข้อความรหัสคอมพิวเตอร์
<col /> คุณลักษณะที่กำหนดค่าสำหรับคอลัมน์อย่างน้อยหนึ่งในตาราง
<colgroup> กำหนดกลุ่มของคอลัมน์ในตารางสำหรับการจัดรูปแบบ
<dd> กำหนดรายละเอียดของคำในรายการคำจำกัดความ
<del> กำหนดลบข้อความ
<dfn> กำหนดคำนิยามคำ
<dir> เลิก. กำหนดรายการไดเรกทอรี
<div> ส่วนกำหนดในเอกสาร
<dl> กำหนดรายละเอียด
<dt> กำหนดระยะ (รายการ) ในรายการความละเอียด
<em> กำหนดในการเน้นข้อความ
<fieldset> กำหนดเส้นขอบรอบ ๆ องค์ประกอบในรูปแบบ
<font> เลิก. กำหนดตัวอักษรสีและขนาดของข้อความ
<form> กำหนดรูปแบบ HTML ในการเข้าของผู้ใช้
<frame /> กำหนดหน้าต่าง (กรอบ) ใน frameset
<frameset> กำหนดชุดของเฟรม
<h1>,<h2>,<h3>,<h4>,<h5>,<h6> HTML กำหนดหัวเรื่อง
<head> กำหนดข้อมูลเกี่ยวกับเอกสาร
<hr /> กำหนดเส้นแนวนอน
<html> กำหนดเอกสาร HTML
<i> กำหนดตัวเอียง
<iframe> กำหนดเฟรมแบบอินไลน์
<img /> กำหนดภาพ
<ins> กำหนดแทรกข้อความ
<isindex> เลิก. กำหนดดัชนีค้นหาที่เกี่ยวข้องกับเอกสาร
<label> กำหนดป้ายชื่อสำหรับองค์ประกอบเข้า
<li> กำหนดรายการ
<link /> กำหนดความสัมพันธ์ระหว่างเอกสารและทรัพยากรภายนอก
<meta /> กำหนดข้อมูลเมตาเกี่ยวกับเอกสาร HTML
<noframes> กำหนดเนื้อหาสำรองสำหรับผู้ใช้ที่ไม่สนับสนุนการใช้เฟรม
<noscript> กำหนดเนื้อหาสำรองสำหรับผู้ใช้ที่ไม่สนับสนุนสคริปต์ฝั่งไคลเอนต์
<object> กำหนดวัตถุฝังตัว
<optgroup> กำหนดกลุ่มของตัวเลือกที่เกี่ยวข้องกันในรายการให้เลือก
<option> กำหนดตัวเลือกในรายการเลือก
<p> กำหนดย่อหน้า
<param /> กำหนดพารามิเตอร์สำหรับวัตถุ
<pre> กำหนดจัดรูปแบบล่วงหน้าข้อความ
<q> กำหนดคำพูดสั้น ๆ
<s> เลิก. กำหนดตัวอักษรขีดทับ
<script> กำหนดสคริปต์ฝั่งไคลเอนต์
<select> กำหนดรายการเลือก (รายการแบบหล่นลง)
<small> กำหนดตัวอักษรขนาดเล็ก
<span> ส่วนกำหนดในเอกสาร
<strike> เลิก. กำหนดตัวอักษรขีดทับ
<strong> กำหนดข้อความที่แข็งแกร่ง
<style> ข้อมูลสำหรับกำหนดรูปแบบเอกสาร
<sub> กำหนด subscripted ข้อความ
<table> กำหนดตาราง
<tbody> กลุ่มเนื้อหาตัวในตาราง
<td> กำหนดเซลล์ในตาราง
<textarea> กำหนดหลายสายการควบคุมการป้อนข้อความ
<tfoot> กลุ่มเนื้อหาส่วนท้ายในตาราง
<th> กำหนดส่วนหัวของเซลล์ในตาราง
<thead> กลุ่มเนื้อหาส่วนหัวในตาราง
<title> กำหนดชื่อเรื่องของเอกสาร
<tr> กำหนดแถวในตาราง
<u> เลิก. กำหนดขีดเส้นใต้
<var> ส่วนกำหนดตัวแปรของข้อความ

ครับ ตอนนี้เราก็ทราบคำสั่งพื้นฐานของ html แล้วน่ะครับ

เริ่มต้นกับ After Effect by

29
Aug
0

เกริ่นนำ
Adobe After Effect เป็นโปรแกรมสำหรับการตัดต่อ vdo หน้าที่ของมันคือการเอาภาพ, Text, หรือ VDO และ เสียง มาจัดเรียงใหม่+ใส่effectต่างๆ (จริงๆมันทำอะไรได้เยอะกว่าีนี้แหละครับ แต่ผมพึ่งใช้ได้ไม่ถึงเดือน ก็ใช้เป็นแค่นี้แหละ) ส่วนการทำ Animation อื่นๆผมไปทำใน Adobe Flash แล้วค่อย import ไฟล์.swf เข้ามาครับ

สร้าง Composition
ขั้นตอนแรกเลยคือต้องสร้าง Composition ของ vdo เราก่อนครับ ตั้ง width, height, ระยะเวลา, Frame rate ใ้ห้เรียบร้อย ซึ่งถ้าท่านใช้วิธีการทำ Animation ใน Flash แบบผม width, height, Frame rate ต้องตรงกันกับไฟล์ Flash ของเรานะครับ

import ไฟล์ ต่างๆ
ง่ายๆครับ ลากไฟล์ต่างๆเข้ามาใส่ในหน้าต่าง AE ก็จบครับ จากนั้นไฟล์ทั้งหมดก็จะปรากฏในช่องดังรูป

จัดวาง Timeline
อันนี้ก็ไม่ยากครับ เลื่อนไปเลื่อนมาเฉยๆแล้วก็ดูจาก preview เอา เนื่องจากไฟล์ swf ต้นฉบับของผมบางไฟล์มันก็มียาวมากกว่าที่ผมต้องการ เราก็ลดความยาวที่ัมันจะแสดงได้จากใน AE ครับ

Preview
ปัญหาแรกที่ผมเจอเลยคือกด preview จากปุ่มนี้แล้วมันไม่มีเสียงออกมาครับ

ซึ่งตอนหลังผมเปลี่ยนมากดอีกปุ่มนึงคือ Ram Preview เสียงก็จะออกมาครับ

แต่ว่าก็ต้องรอให้โปรแกรม render ก่อนแปปนึง ซึ่งมันจะขึ้นเป็นแทบสีเขียวๆแบบนี้ตรงแถวๆ timeline ถ้ามันยังวิ่งๆอยู่แสดงว่ายัง render ไม่เสร็จครับ ระหว่างนั้นภาพใน composition มันก็จะวิ่งไปเรื่อยๆตามที่มัน render ครั้งแรกๆก็ทำผมงงเหมือนกัน สำหรับ Ram Preview มี hotkey อยู่ครับคือปุ่ม 0 จะหยุดก็กดซ้ำครับ

Render
AE สามารถ Render ไฟล์ได้หลายแบบครับ แต่ถ้า่ท่านต้องแค่ไฟล์ vdo ธรรมดาๆ เอาไปอัพขึ้น youtube ก็เลือก File > Export > Quicktime Movie แล้วกด ok ไปเลยแบบผมก็ได้ครับ


ผลงานที่เสร็จแล้วครับ

ข้อควรรู้

  1. รูปแบบของไฟล์ที่นำมาโยนไว้ใน AE เป็นลักษณะเดียวกันกับ illustrator คือมันจะอ้างไปยัง path ของไฟล์นั้นๆ ถ้าท่านทำการเปลี่ยนแปลงอะไรกับไฟล์นอกโปรแกรม เช่น edit, เปลี่ยนชื่อ, ลบไฟล์ิทิ้ง ข้างใน AE ก็จะได้รับผลกระทบไปด้วย
  2. หน่วยของเวลาใน timeline จะมี 4 หลัก 00:00:00:00 3อันแรกคือ ชม.:นาที:วินาที แน่นอนอยู่แล้วครับ แต่ว่าหลักสุดท้ายตอนแรกผมนึกว่ามันคือเสี้ยววิ ซึ่งต้องเป็นจำนวน 0-99 แต่ไม่ครับ มันคือ Frame ต่างหาก ซึ่งในกรณีของผม set Frame rate ไว้ที่ 24 มันก็จะเป็น 0-23 ครับ
กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ