5/29/2559

full background video ด้วย html และ css

20:32    No comments

full background ของเว็บไซต์เป็นส่วนสำคัญเพราะจำเป็นเหมือนกรอบที่แสดงข้อมูลของทั้งเว็บ ผ่านทาง เบื้องหน้าของพื้นหลัง ถ้าเป็นพื้นหลัง background แบบรูปภาพหรือ photo image ต่างๆคงจะคุ้นชินกันมาแล้วสำหรับวิธีการทำ แต่ถ้าพูดถึงการนำวิดีโอมาใช้เป็นพื้นหลังส่วนใหญ่จะเห็นใช้กันแต่ plugin ซึ่งก็ง่ายและรวดเร็วดี แต่วันนี้จะพามาดูวิธีการเขียน code ด้วย html และ css เพื่อให้ได้พื้นหลังแบบเป็นวิดีโอมาใช้งานกัน

full background video with html and css

มาดูวิธีการทำวิดีโอเป็นพื้นหลังกัน ด้วยวิธีนี้เราอาจจะเขียนแบบเพียงเบื้องต้นนะครับ ไม่ได้จัดเต็มแบบทุก option เพราะหากจะใช้เต็มสูบแบบนั้นจริงๆเราอาจจะใช้วิธีใช้ plugin ง่ายและรวดเร็วกว่าแต่อันนี้ผมจะทำเพียงแต่นำวิดีโอมาเป็น background แล้วก็ใส่ข้อความโตๆเอาไว้ให้เห็น และเพิ่มปุ่มสำหรับคลิกเล่น หยุด ง่ายๆเอาไว้หน่อย คิดว่าวิธีนี้ใช้แค่ HTML, CSS และ javascript แบบเบื้องต้นง่ายๆเลยน่าจะพอ เรามาลองทำกันไปพร้อมๆดูครับ

หาวิดีโอกันก่อน

เริ่มต้นกันก่อนเลยผมขอแบบพื้นฐานจริงๆคือ เราไปหาวิดีโอสำหรับมาทำเป็นพื้นหลังแบบ free ไม่มีลิขสิทธิ์กันก่อน ไม่ขอใช้แบบเป็น youtube นะครับเพราะอยากให้เล็งไปที่ codeing กันก่อน เว็บที่เราจะเข้าไปหาวิดีโอสำหรับมาทำเป็นพื้นหลังอันที่จริงก็มีอยู่เยอะ มากนะครับ อารมณ์มันจะคล้ายๆกับ photo stock นั้นแหละมีคนถ่ายความละเอียดสูงๆเข้ามาแล้วมาทำเป็นคลิปสั้นๆแบบ….สั้นมากๆ ไว้ ส่วนใหญ่ความคมชัดจะสูง ขนาดไฟล์จะเล็กอยู่แล้ว เราสามารถค้นหาได้ด้วยคำว่า video stock หรือ footage stock นะครับ
  • http://www.istockphoto.com/footage อันนี้เป็นเว็บรูปภาพขนาดใหญ่มีเงื่อนไขในการใช้นะครับ แต่เห็นมีส่วนที่เป็นวิดีโอด้วย
  • https://www.shutterstock.com/video/ อันนี้ก็เว็ยรูปภาพขนาดใหญ่เหมือนกัน มีวิดีโอให้ด้วยนะครับ ดูเรื่องสิทธิ์ให้ดีนะ ราคาเอาเรื่องอยู่
  • http://www.motionelements.com/th/free/stock-footage อันนี้จะเป็นแบบขายเหมือนกัน แต่มีฟรีบ้าง
  • https://vimeo.com/groups/freehd/ อันนี้เป็น group ใน vimeo สวยดีอยู่ฟรีด้วยครับ
  • http://www.free-hd-footage.com/ อันนี้แบบ free เลยแต่ผมว่าวิดีโอไม่ค่อยสวยเท่าไหร่
  • https://videos.pexels.com/ อันนี้ free นะครับ load มาใช้งานกันได้มีทั้งรูปทั้งวิดีโอครบเลย
ทีนี้สมมุติว่าผมเลือกได้มาแล้วอันหนึ่งเป็นตัวอย่างสำหรับทำ tutorial ให้ดูกันเฉยๆเลยเอาแบบติดลิขสิทธิ์มาใช้แล้วกัน ขอยืมวิดีโอรูปบ่อปลาคาร์ฟมาจาก istockphoto
Koi Carps Fish Japanese swimming for full background tutorial
Koi Carps Fish Japanese swimming for full background tutorial
ทีนี้เราได้วิดีโอสำหรับทำงานมาแล้ว มาเริ่มต้นสร้างหน้าเพจกันเลย โดยผมจะขอเริ่มจากการสร้าง folder ชื่อ videobg ก่อนเพื่อเก็บงานนี้กัน จากนั้นจะสร้างไฟล์ที่ชื่อ  index.php สำหรับเขียน code เพื่อสร้างวิดีโอเป็นพื้นหลังแบบเต็มหน้า และผมจะสร้างไฟล์ style.css สำหรับเขียน css แยกกันไว้อีกไฟล์ และสุดท้ายเป็นไฟล์ bg.js สำหรับเขียน javascript เพื่อกำหนดปุ่ม play ง่ายๆ (การเขียน javascript ควรไว้แยกในไฟล์สกุล .js เสมอ)
coding file in this tutorial
coding file in this tutorial
จากนั้นเพื่อเพิ่มการลดทอนปัญหาจากกรณีที่วิดีโอเราไม่มีคุณภาพมากพอหรอ ลดความคมชัดและความโดดเด่นของตัว video ที่ควรจะเป็นแค่เพียงพื้นหลังลงไปเราควรใส่รุปภาพขึ้นมาเพื่อขวางหน้าชั้นบน สุด เล็กๆอาจจะเป็นเพียง noise เล็กๆก็ได้หรือจะใช้เป็นเส้นขวางๆก็ได้ตามสะดวก ตรงนี้เราเรียกมันว่า pattern overlays ลองเข้าไปใช้ของ http://html5backgroundvideos.com/pattern-overlays/ ก็ได้นะครับ
pattern overlay
pattern overlay
งานนี้ผมเลือกใช้รูปที่เป็นจุดเล็กๆแล้วเอามาเรียงต่อกันแทนแล้วกันครับ โหลดลงไปไว้ใน folder ได้เลย จากนั้นเราก็จะมาสร้างโครงสร้างของ HTML กัน
?
ตัวอย่าง
01
02
03
04
05
06
07
08
09
10
<html>
<head>
<title>Full Background Video</title>
<link rel="stylesheet" href="style.css">
<script src="bg.js"></script>
</head>
<body>
 
</body>
</html>
ผมเรียกไฟล์ css และไฟล์ javascript ขึ้นมาเตรียมไว้เลยนะครับจะได้ไว ทีนี้ผมก็จะไปสร้างตัวดึงวิดีโอโดยใช้ tag วิดีโอของ html5 ง่ายๆดูตัวอย่างได้จาก w3school เลยนะครับ จากนั้นก็มาวางกันเลย
?
ตัวอย่าง
01
02
03
<video autoplay id="video-background" muted>
<source src="http://i.tstocking.com/video_passthrough/63735697/153/63735697.mp4" type="video/mp4">
</video>
ทีนี้เราก็จะได้วิดีโอสำหรับแสดงขึ้นมาบนหน้าจอแล้ว
first video
first video
งดงามมาก… แต่มันเพิ่งเริ่มต้นเองนะครับ ยังไม่จบ มาครับมา มาต่อกันตอนนี้เราได้วิดีโอมาวางที่หน้าเว็บแล้ว แบบเป็นวิดีโอเพียวๆไม่เอาเสียง เพราะผมใช้ mute ปิดเสียงวิดีโอเอาไว้เป็นพื้นหลังไม่จำเป็นต้องมี sound ก็ได้น่า… และจะเห็นว่า ผมไม่ได้เรียกส่วนของ controls ขึ้นมาเพราะมันไม่เหมาะสำหรับทำพื้นหลัง แล้วเดี๋ยวเราค่อยทำปุ่มกันเอง ถัดมาผมจะกำหนดค่าของวิดีโอนี้ให้มันเต็มจอ ไปเลยนะครับ เราจะใช้ความสามาถของ css เข้ามาช่วยงานเรากันหน่อย
?
ตัวอย่าง
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
body {
    margin: 0;
    padding: 0;
    background-attachment: fixed;
    background-size: cover;
}
 
#video-background {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
 
}
ตรงนี้มันเยอะมากอธิบายคร่าวๆก็แล้วกันนะครับ ก็คือตัว body ผมกำหนดให้ไม่ต้องมี padding และ margin อะไรเลยและ fixed รูปภาพด้วยและทำให้ค่ามันเป็นแบบ cover หากรูปไม่ได้ขนาดเต็มจอ ส่วนใน selector ที่เป็น video นั้นผมก็ให้ fix เหมือนกัน กำหนด width และ height เป็น 100% เต็มด้วย
full video
full video
เรียบร้อย เท่านี้เราก็ได้วิดีโอเต็มจอแล้ว แต่ยังไม่เสร็จงานของเรากันครับ ตามที่เราวางแผนกันเอาไว้คือต้องมีจุดเล็กๆขึ้นมาเพื่อกันเรื่องคุณภาพของ วิดีโอกันด้วย งั้นเราจะมาใส่ overlay กัน
?
ตัวอย่าง
01
<div class="overlay"></div>
?
ตัวอย่าง
01
02
03
04
05
06
07
08
09
10
11
.overlay {
    position: absolute;
    z-index: 0.5;
    opacity: 0.5;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-image: url('bg.png');
    background-repeat: repeat;
}
ตรงนี้คือเราวางจุดเล็กๆของเราให้เต็มหน้าจอเรียงกัน แล้วจับ repeat ให้เต็มหน้าจอ ตรงนี้ผมทำให้มันจางๆจะได้เห็นไม่ชัดเท่าไหร่แบบใสๆหน่อยโดยใส่ opacity ลงไปแล้วบังคับให้มันอยู่หน้า layer video ของเราด้วย z-index นะครับ
overlay
overlay
อาจจะมองไม่ค่อยเห็นเท่าไหร่ ขอถัดไปเลยแล้วกันนะครับ เราจะใส่ หัวข้อทีเ่ป็น Title ใหญ่ๆไว้ตรงกลางเพื่อเป็นข้อความบอกเนื้อหาหน่อย ผมจะใช้เป็น h1 แล้วกัน
?
ตัวอย่าง
01
<h1>Video Background From HTML+CSS!!</h1>
?
ตัวอย่าง
01
02
03
04
05
06
07
08
09
10
11
h1 {
    position: absolute;
    top: 40%;
    width: 100%;
    font-size: 50px;
    letter-spacing: 5px;
    color: #fff;
    font-family: 'Yanone Kaffeesatz', sans-serif;
    text-align: center;
    text-shadow: 2px 2px #000;
}
คือตัวหนังสืออยู่เหนือรูปภาพหรือวิดีโอ นี่ยังไงก็อย่าลืมใส่เงาเอาไว้หน่อยนะครับ ไม่งั้นมองข้อความลำบากแน่ๆเลย แล้วก็จะขอใช้ font จาก google font api เพื่อเติมแต่งอีกนิด แล้วก็ต้องหยิบขึ้นมาอยู่เหนือ layer ของ overlay ด้วย z-index ด้วยนะครับ
Yanone Kaffeesatz
Yanone Kaffeesatz
ลองมาดูผลงานกันหน่อยนะครับ
title
title
เรียบร้อย…ทีนี้เรายังขาดปุ่มสำหรับกด play หรือ pause เพราะเราไม่ได้สั่งให้ video มันวน loop ไปเรื่อยๆ อันที่จริงเราไม่จำเป็นต้อง loop วิดีโอพื้นหลังก็ได้นะครับ บางทีคนที่เข้ามาใช้อาจจะไม้ต้องการดูหรือไม่ต้องการให้มันวนหลายๆรอบ เราก็สามารถเสนอทางเลือกอย่างการใช้ปุ่มหยุดได้ครับ โดยที่ผมจะใช้เป็นข้อความแล้วก็ใช้ความสามารถของ javascript เข้ามาช่วย
?
ตัวอย่าง
01
<h2 onclick="playPause()">Play / Pause</h2>
?
ตัวอย่าง
01
02
03
04
05
06
07
08
var vd = document.getElementById("video-background");
 
function playPause() {
if (vd.paused) {
vd.play();
} else {
vd.pause();
}
?
ตัวอย่าง
01
02
03
</pre>
<script src="bg.js"></script>
<pre>
ตัว javascript นี่ต้องเอามาไว้ด้านล่างนะครับมันถึงจะทำงานได้ถูกต้อง ส่วนตัว play() function และ pause() เป็นของ HTML5 นะครับลองไปค้นเล่นกันได้ อันนี้คือพอมีคนคลิกเข้ามาที่ข้อความ play ละก็ให้ทำการเรียก call function ที่ชื่อ playPause() ได้เลย เพียงเท่านี้เราก็จะได้ปุ่มง่ายๆสำหรับควบคุมแล้วนะครับ
Full Preview
Full Preview
แค่นี้เราก็สามารถทำวิดีโอเป็นพื้นหลัง ง่ายๆได้แล้ว แต่ใครที่คิดว่ายังไม่ค่อยเข้าใจหรือไม่อยากเสียเวลาทำเอง สำหรับคนที่อยากได้เว็บไซต์ที่มีวิดีโอเป็นพื้นหลังหรือมีเว็บอยู่แล้วแต่ อยากเพิ่มส่วนที่มีวิดีโอเป็นพื้นหลังก็ติดต่อเข้ามาได้นะครับ ผมดูแลให้เอง

Line : teerapuch
Mail : teerapuch [@] hotmail.com

ข้อมูลอ้างอิง w3Schools

Read More

5/27/2559

Enable root account ใน ubuntu กันหน่อยไหม

00:07    No comments

สำหรับหลายๆ คนที่เคยใช้ linux ตระกูล redhat หรือสำหรับผู้ที่เคยใช้ FreeBSD มาก่อน เวลาเปลี่ยนมือมาใช้ ubuntu ก็คงจะขัดตะขวงนิดหน่อย เพราะว่าไม่สามารถ login เข้าระบบด้วย user root ได้หรือแม้แต่จะ su root เราก็ไม่รู้ว่าจะใส่ password อะไร จะทำอะไรแต่ละทีก็ต้อง sudo ทั้งนั้น วันนี้มาดูวิธีการ enable root account ของ ubuntu กันบ้าง อาจจะช่วยมือใหม่ ubuntu อย่างเราได้บ้าง 🙂

เมื่อ login เข้าไปด้วย account ของเราแล้วก็สั่ง sudo passwd root เพื่อเปลี่ยน password ของ root กันก่อนเลย
1

#sudo passwd root
จากนั้นใส่ password ของ account ของเราลงไปก่อน

ต่อไปก็ทำการใส่ password ใหม่ของ account root ได้เลย (เอาจำยากๆๆหน่อยนะ เพื่อความปลอดภัย)

ระบบจะแจ้งว่าทำการ update password เรียบร้อย

ต่อไปสั่ง su root เพื่อทำการ change account ไปเป็น root ได้เลยครับ เพียงเท่านี้เราก็เป็น root ของระบบแล้ว ต่อไปจะติดตั้งโปรแกรมหรือสั่ง command อะไรที่ต้องใช้สิทธิของ root เราก็ไม่ต้องใช้ sudo แย้ววว
1

#su root

เพียงเท่านี้เรายังไม่สามารถใช้ account root ในการ login เข้าสู่ระบบได้ ต้องมีแก้อีกนิดหนึ่ง
ให้เข้าไปที่ System -> Administrator -> Login Window

จา่กนั้นเลือกที่ tab security และติ๊กที่ Allow local system administrator login เพื่อกำหนดให้ root มีสิทธิที่จะทำการ login เข้าระบบได้โดยตรง

จากนั้นทำการ restart เครื่อง เมื่อขึ้นหน้าจอ login ให้ใส่ user เราก็ใส่ root ลงไป

จากนั้นก็ใส่ password

ระบบจะแจ้งเตือนเรื่องความปลอดภัยและแนะนำให้เราทำการ login ด้วย account ของ user ธรรมดา แต่ว่าเราต้องการใช้งานในสิทธิของ root นี้หว่า
คลิก Continue เพื่อทำงานต่อไปเลยครับ

เท่านี้เราก็ login เข้าระบบด้วย account root ได้แล้วครับ

Read More

5/26/2559

แนะนำ Vesta Control Panel ของฟรีที่ใช้งานสะดวก

01:56    No comments

vestacp

วันนี้เรามาทดสอบ Vesta Control Panel ซึ่งเป็น control panel ที่ช่วยให้การดูแล cloud server หรือ dedicated server ของเราง่ายขึ้นมาก โดยไม่ต้องทำด้วยมืออีกต่อไป ที่สำคัญยังเป็นฟรีซอฟท์แวร์คุณภาพ ยิ่งน่าสนใจขึ้นไปอีก
คุณสมบัติเด่นๆ
  • ติดตั้งลง cloud server หรือ server ที่เพิ่งสร้างเสร็จได้โดยใช้เพียง 2-3 คำสั่ง
  • ลงซอฟท์แวร์ระบบ (LEMP stack) ให้โดยอัตโนมัติ ประกอบด้วย Web Server (nginx + apache), DNS server, Database Server (MySQL), Mail Server (exim), FTP Server เป็นต้น
  • มี PhpMyAdmin มาพร้อมสำหรับจัดการ Database
  • มีระบบ Webmail มาในตัว
  • สามารถกำหนดและสร้าง Package สำหรับการใช้งานในแต่ละ User account ได้
  • ในขั้นตอนของการสร้าง Package สามารถเลือกใช้ DNS Template ของ Gmail ได้ โดยไม่ต้องตั้งค่าเอง
  • สามารถ Suspend และ Unsuspend ได้ในทุกส่วนการใช้งาน เช่น User account, Web server, DNS Domain, Email Account, Database เป็นต้น
  • เพิ่ม IP, จัดการ cron job  ผ่าน Vesta ได้
  • สามารถสร้าง Backup file ของแต่ละ User account ได้
อย่างไรก็ตาม Vesta เป็นระบบ control panel ที่พัฒนายังไม่ถึงที่สุด และมีข้อจำกัดอยู่บ้าง เช่น
ข้อจำกัดของ Vesta
  • สามารถเชื่อมกับระบบ Billing ได้เพียง WHMCS เท่านั้น
  • Account ที่ถูกสร้างขึ้นจะเป็นการสร้าง เพื่อใช้งานภายใต้ user: Admin เท่านั้น ไม่สามารถสร้างในลักษณะ Reseller ได้
  • การอัพโหลดข้อมูลสามารถดำเนินการผ่าน FTP Client เท่านั้น ไม่สามารถ FTP ผ่าน Panel ได้
  • ไม่สามารถจำกัดจำนวนการส่งอีเมล์ออกได้ (Maximum Hourly Email)
  • ผู้ใช้งานควรมีความความเข้าใจพื้นฐาน ในการจัดการของ Web Server, DNS server, Database Server, Mail Server รวมทั้ง Linux command ด้วย
ระบบปฏิบัติการที่รองรับ
  • RHEL 5, RHEL 6
  • CentOS 5, CentOS 6
  • Debian 7
  • Ubuntu 12.04, Ubuntu 12.10, Ubuntu 13.04, Ubuntu 13.10, Ubuntu 14.04
ขั้นตอนการติดตั้ง
เมื่อพร้อมแล้ว เรามาทดลองติดตั้ง Vesta ลงบน cloud server หรือ dedicated server กัน โดยการ ssh เข้าไปยังระบบ เป็น root จากนั้นโหลด installer มา พร้อมเรียกให้ installer ทำงาน ตัวอย่าง

Vesta เหมาะกับการลงในระบบ OS ที่เป็น minimal install คือยังไม่มี packages อะไรเกะกะอยู่ข้างใน
เมื่อรันคำสั่งแล้ว รอให้ระบบดำเนินการติดตั้งจนสำเร็จ จะได้ข้อมูลรายละเอียดในการเข้าใช้งาน พร้อมขึ้นข้อความว่า Congratulations, you have successfully installed Vesta Control Panel. ถือเป็นอันเสร็จสิ้นขั้นตอนการติดตั้ง Vesta
จากนั้นสามารถเข้าใช้งาน Vesta ผ่านทาง https://ip_address:8083





04_service_screen

มีกราฟให้ดูการทำงานต่างๆ ด้วย


Vesta เป็น control panel ที่มีการพัฒนาเร็วมาก มีข้อมูลที่น่าสนใจในการใช้งานและปรับแต่งระบบ เช่นการเปลี่ยนตัว DB server การติดตั้งระบบกันไวรัสและสแปม ฯลฯ ซึ่งหาอ่านได้จาก http://vestacp.com/docs/

Read More

การติดตั้ง Java Web Server บน Ubuntu Server

01:54    No comments

ใน Ubuntu Linux Server นอกจากจะสามารถใช้ภาษา PHP ในการพัฒนา Web Server ก็ยังสามารถทำ Web Server ที่พัฒนาด้วยภาษา Java ได้ด้วยครับ เรามักจะเรียกว่า Apache Tomcat
โดยเราสามารถใช้คำสั่งดังนี้
sudo apt-get install tomcat7
จากนั้นก็ติดตั้งชุดคำสั่งสำหรับ Java โดยสั่ง
sudo apt-get install default-jdk
จากนั้นก็ Restart เครื่องโดยใช้คำสั่ง
sudo shutdown now -r
จากนั้นก็ให้เราพิมพ์หมายเลข IP ของเครื่อง Server ของเราตามด้วย port 8080 ก็จะปรากฎว่ามีข้อความปรากฎดังรูป ก็แสดงว่าเราสามารถสร้าง Apache Tomcat สำเร็จแล้ว
ซึ่ง IP เครื่อง Server นั้นอาจจะแตกต่างกันไปในแต่ละเครื่อง ก็ขอให้เราตรวจว่า IP ของเราหมายเลขอะไร ยกตัวอย่างเช่นเครื่องผมใช้ IP 192.168.1.65 ก็จะต้องพิมพ์
http://192.168.1.65:8080/

หลังจากนั้น ถ้าหากเราจะต้องการทดสอบว่า Web Application ของเราใช้ได้จริงให้เราทดลองโหลดโปรแกรมตัวอย่างมาติดตั้งโดยสั่ง ดังนี้
cd /var/lib/tomcat7/webapps
wget https://tomcat.apache.org/tomcat-7.0-doc/appdev/sample/sample.war
จากนั้นถ้าหากเราเรียกหน้าเว็บของตัว sample ซึ่งเครื่องผมจะต้องสั่ง http://192.168.1.65:8080/sample ก็จะปรากฎดังรูปด้านล่าง หรือถ้ายังไม่ขึ้นก็ให้พยายามกด Refresh ก็จะปรากฎมาเช่นกัน

ซึ่งถ้าหากเราสามารถหาไฟล์ที่เป็นนามสกุล .war ที่ compile ด้วย Java ตัวอื่นๆ มาติดตั้งลงบน Apache Tomcat ที่เป็น Java Web Server ของเรา มันก็สามารถทำงานได้เช่นกันครับ
อ้างอิงจาก
http://www.jguru.com/faq/view.jsp?EID=123229
https://www.digitalocean.com/community/tutorials/how-to-install-apache-t...

Read More
สมัครสมาชิก: บทความ (Atom)