7/24/2555

วิธีทำสไลด์ข่าวเลื่อนๆ หน้าเว็บง่ายๆ ด้วย jQuery

เห็นสไลด์ข่าวหน้าแรกในโซนไอทีไหมครับ
ที่เลื่อนๆวนไปวนมา

ผมไปเจอมาครับ ชื่อเครื่องมือว่า jQuery Plugin Easy Slider Version 1.7
ติดตั้งและใช้งานง่ายดีครับ มีให้เลือก 3 แบบด้วยกัน ดูตัวอย่างได้ ลิงค์ด้านล่างครับ

http://cssglobe.com/lab/easyslider1.7/01.html
http://cssglobe.com/lab/easyslider1.7/02.html
http://cssglobe.com/lab/easyslider1.7/03.html


ดาวน์โหลด และศึกษาวิธีการใช้ได้ที่
http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider

อยากให้ลองศึกษาดูด้วยตนเองก่อนนะครับ ผมรับรองว่าไม่ยาก หากติดตรงไหนสอบถามได้ที่กระทู้นี้เลย ว่างๆผมจะมาตอบให้



ดูตัวอย่างจริง ที่ผมเอาไปใช้ครับ
http://youngsoft.nu.ac.th/

ปล.ไม่ได้เข้าโซนไอทีนานเหมือนกัน แหะ

Easy Slider 1.7 - Numeric Navigation jQuery Slider

 

I got a lot of emails and feedback about my easySlider plugin, thank you all for that. However, I have to apologize to all of you who sent emails asking for a little help with implementation or small bug fixes. I simply don't have the time to answer all of your emails. I wish I do.
What I am presenting you today is an easySlider update with 2 new features. When going through your feedback I noticed 2 feature suggestions appearing very often:
  • numeric navigation (as an alternative to next/previous buttons)
  • continuous scroll instead of jumping to the first (or last) slide
So, that's what I implemented in this new version. Now you have the option to choose between classic previous/next navigation or to use a numeric "pagination" style navigation.
Also, your suggestion about continuous scroll made most sense, it is kind of annoying when you have many slides and have to wait for all of them to scroll back to the first one. I had to include it in this version.
I suggest that you read about previous versions in order to understand better how it works:

Options

So, let's go through all of the options. For your convenience I have written the options from previous version of this plugin, so you can have it all in one place. Here they are with their default values:
prevId:   'prevBtn',
prevText:   'Previous',
nextId:   'nextBtn', 
nextText:   'Next',
controlsShow:  true,
controlsBefore: '',
controlsAfter:  '', 
controlsFade:  true,
firstId:   'firstBtn',
firstText:   'First',
firstShow:  false,
lastId:   'lastBtn', 
lastText:   'Last',
lastShow:  false,    
vertical:  false,
speed:   800,
auto:   false,
pause:   2000,
continuous:  false, 
numeric:   false,
numericId:   'controls'

prevId

Id attribute for "previous" button. Default value is "prevBtn".

prevText

Inner text for "previous" button. Default value is "Previous".

nextId

Id attribute for "next" button. Default value is "nextBtn".

nextText

Inner text for "next" button. Default value is "Next".

orientation

Sliding can be horizontal or vertical. Horizontal is default and if you want vertical set this to 'vertical'.

speed

Animation speed in milliseconds, default value is 800.

controlsShow

By default set to true, but if set to false it will not add any controls. It can be used with auto scroll when you want to disable user interaction.

controlsBefore and controlsAfter

In case you want to add some additional markup to gain more control over buttons you can do so by using these parameters. Check out the demo where I use these options.

controlsFade

By default set to true. If set to false it will disable button hiding when slider reaches the end.

firstShow and lastShow

These parameters hide (or show) "go to first" and "go to last" buttons.

auto

This option enables automatic sliding. If you set it to true the sliding will automatically start and continue to perform untill user clicks one of the buttons.

pause

This option is set in milliseconds and it represent the duration of each slide when plugin is set to auto sliding.

continuous

If set to true clicking the next button when the slider reached the end will simply continue showing all of the slides again with continuous motion. Combining this option with auto (both set to true) you'll get endless animation.

numeric (NEW!)

If you set this option to true you will get numeric navigation instead of next/prev buttons. Plugin will create an ordered list just after the slider div. Ordered list will have the exact number of elements as the slider. Clicking on each of the number will make the animation jump to a certain slide.

numericId (NEW!)

This option defines id attribute for the ordered list. You should use this id to select and style the list with CSS.

Demos

I have 3 new demos here:
Here you go. If you have any more suggestions, please send them to me and I will consider of implementing them in the next plugin version!

7/18/2555

การ tunneling VNC ผ่าน Putty

VNC นับเป็นโปรแกรม Remote Control ที่ดีมากๆ ตัวหนึ่ง   โดยจะประกอบไปด้วยสองส่วน  ส่วนที่ทำหน้าที่เป็น Server และส่วนที่ทำหน้าที่ Client  ส่วนที่ทำหน้าที่ Server จะทำการรับข้อมูลเกี่ยวกับการจัดการคีย์บอร์ดและเมาส์จากทางฝั่ง Client และมากระทำการบนส่วนบริการ GUI ของเครื่อง ซึ่งอาจจะเป็นการใช้งานร่วมกันกับ GUI หลักของระบบ (เช่นในระบบปฏิบัติการวินโดวส์ทุกรุ่น) หรืออาจจะมีการจำลอง GUI เฉพาะกิจขึ้นมา (เช่นในระบบปฏิบัติการยูนิกซ์ และลินุกซ์ ที่จะมีการจำลองตนเอง เป็น X เซอร์เวอร์ที่สามารถเชื่อมต่อกับตัว viewer ได้โดยตรง) สำหรับส่วน Client จะทำหน้าที่รับการกดคีย์บอร์ดและการจัดการเมาส์  เมื่อผู้ใช้ใช้งานกับหน้าต่างของ VNCViewer  เพื่อส่งไปยังเซอร์เวอร์  และทำหน้าที่รับชุดคำสั่งจากทาง Server เพื่อนำมาทำการวาดภาพบน VNCViewer ต่อไป  จุดเด่นที่ผู้ใช้งาน VNC ต่างติดอกติดใจก็คือ  VNC นั้นมีตัว Server และ Viewer อยู่เกือบจะทุกแฟลตฟอร์ม  นับตั้งแต่วินโดส์ทุกตระกูล  ลินูกซ์  ไปจนถึงยูนิกซ์  และทุกแฟลตฟอร์มสามารถใช้งานข้ามกันได้หมด (เช่น เปิด server ที่ ลินุกซ์ เพื่อมา View และทำงานบน XP เป็นต้น) นอกจากนี้ ยังเหมาะสมกว่าการใช้ XTerminal สำหรับลินุกซ์และยูนิกซ์ โดยเฉพาะบนเครือข่ายที่อาจจะมีการหลุดได้ตลอดเวลาอย่างอินเทอร์เน็ต  เพราะการเชื่อมต่อระหว่าง server กับ client ของ VNC สามารถที่จะตัดการเชื่อมต่อ และเชื่อมต่อเข้ากันใหม่ได้ตลอดเวลา ดังนั้นเราสามารถปิดหน้าต่าง VNCViewer เมื่อใดก็ได้ แล้วไปเปิดใหม่ ณ อีกเครื่องที่อาจจะอยู่คนละมุมโลก โดยที่ซอฟต์แวร์ต่างๆ ที่รันจะไม่ได้รู้สึกถึงผลดังกล่าวเลย

แต่ VNC มีข้อเสียที่ร้ายแรงอยู่ตรงที่ข้อมูลที่ส่งไปกลับระหว่าง server กับ client นั้นไม่ได้มีการเข้ารหัส  การพิมพ์ข้อความใดๆ จะส่งไปในลักษณะที่ถูกดักจับและวิเคราะห์ได้ง่าย  นี่จึงเป็นที่มาของแนวทางการนำเอาข้อมูลที่ส่งไปมาของ VNC มาผ่านช่องทางของ Secure shell ในลักษณะของการทำ tunnelling

ขั้นตอนต่อไปนี้เป็นขบวนการเซ็ต Putty ซึ่งเป็น text terminal โปรแกรมที่นิยมใช้กันมาก  ในลักษณะของการทำ tunnelling พอร์ตของ VNC ให้มาผ่าน SSH  โดย VNCserver รันอยู่บนเครื่องที่ใช้ระบบปฏิบัติการลินุกซ์ (หรืออื่นใด) แต่ VNCViewer รันอยู่บนเครื่องที่ใช้ระบบปฏิบัติการวินโดวส์  ซึ่งผู้ใช้ส่วนมากมักจะใช้ลินุกซ์หรือยูนิกซ์เป็นเครื่องรีโมต  และทำงานทั่วไปบนเครื่องที่ใช้ระบบปฏิบัติการวินโดวส์  ขบวนการเซ็ตมีดังนี้ครับ


1. เปิดหน้าต่าง PuTTY Configuration ขึ้นมา จากนั้นเลือก Connection/SSH/Tunnels


เติมพอร์ตที่ต้องการทำ Tunnelling ผ่าน SSH ลงไป  ในที่นี้เราต้องการ tunnel พอร์ตของตัว VNC ผ่าน SSH ซึ่ง VNC นั้นใช้หมายเลขพอร์ต 5900 เป็นต้นไป โดยที่พอร์ต 5900 จะตรงกันกับเทอร์มินัลที่ 0 5901 ตรงกับเทอร์มินัลที่ 1 เรียงเช่นนี้เรื่อยไป  ในที่นี้เราติดตั้ง vncserver บนเครื่องลินุกซ์ ซึ่งในกรณีของระบบปฏิบัติการลินุกซ์และยูนิกซ์  ตัว VNCserver จะทำการเปิด Xterminal ตัวใหม่ขึ้นที่บนเซอร์เวอร์และทำการเชื่อมต่อเข้ากับ VNCserver (สำหรับคนที่ไม่คุ้นเคยกับ VNCserver บนลินุกซ์ เรายังสามารถเซ็ตตัว GUI เป็นตัวอะไรก็ได้ตามต้องการ อย่างกรณีนี้ผมแก้ไฟล์ ~ยูสเซอร์/.vnc/xstartup ในบรรทัดที่เรียก twm & ให้เป็น /bin/bash /bin/startkde & ซึ่งมันจะทำการโหลด KDE ขึ้นมาแทนตัว twm)  จากตัวอย่างข้างบน ผมกรอกค่าพอร์ตที่ต้องการ tunnel เป็น 5901(ของเครื่องที่เราทำการใช้อยู่ ณ ปัจจุบันโดย PuTTY) ซึ่งจะมีจุดหมายปลายทางที่เครื่อง thanwa.cpe.mut.ac.th ที่พอร์ต 5901 เช่นกัน  (เครื่อง thanwa.cpe.mut.ac.th เป็นเครื่องที่ผมใช้รันตัวเซอร์เวอร์)

เมื่อผมกด Add ก็จะได้ดังนี้




2. หลังจากนั้นผมเลือกที่ Connecttion/SSH เพื่อทำการเปิดโหมด compression โดยจะยอมให้มีการบีบอัดข้อมูลก่อนที่จะส่งผ่าน SSH ด้วย 


อนึ่ง ขั้นตอนนี้ไม่จำเป็นสำหรับการทำงานครับ  คุณสามารถข้ามไปได้   แต่ถ้าคุณเลือกให้มีการบีบอัด ก็จะเห็นว่าใช้งาน VNC โดยรวมจะมีการหน่วงช้าลง (เพราะข้อมูลรับส่งนั้นมีน้อยลง เป็นผลจากการบีบอัด)

3. กลับมาที่ Session  เพื่อความสะดวก ผมว่าเราน่าจะเก็บค่าการเซ็ตนี้เอาไว้เสียหน่อย



เรากรอก IP หรือโดเมนของเครื่องปลายทาง (ที่รัน VNCServer) และเลือกโหมดการติดต่อเป็น SSH (พอร์ต 22) โดยการกดเลือกที่ radio button  SSH
จากนั้นตั้งชื่อ Session เสียหน่อยครับ แล้วกด Save  เป็นอันเสร็จพิธี

4. เวลาเราจะใช้งาน  เมื่อเปิดโปรแกรม PuTTy เราก็เพียงแต่โหลด session ที่เราเก็บไว้ขึ้นมา  แล้วก็ล็อกอินเข้าไปใน text terminal ตามปกติครับ   ซึ่งเราจะต้องคงการเชื่อมต่อ text terminal ใน SSH โหมดนี้ไว้ตลอดเวลาที่เราใช้งาน VNCViewer ครับ (ถ้าเราล็อกเอาต์มาขณะที่ VNCViewer ทำงาน หน้าจอ text terminal จะยังคงค้างเติ่งอยู่ จนกว่าเราจะปิด VNCViewer


5.จากนั้น  เรารัน VNCViewer แต่เวลาที่เราจะใส่ IP ของตัว VNCserver เราจะใส่ localhost หรือ 127.0.0.1 แทนครับ โดยค่าหมายเลขเทอร์มินัลจะเป็นไปตามพอร์ตที่เรา tunnel ไว้ตามที่กำหนดที่ Source port  ในที่นี้เป็น 5901 ซึ่งตรงกับ localhost:1




ถ้า VNCserver ได้ทำงานบนเครื่องเซอร์เวอร์อย่างถูกต้อง  เราก็จะเห็นหน้าจอพาสเวิร์ด  ก็พิมพ์ไปตามเดิมครับ

6. เป็นอันเรียบร้อย VNCviewer เริ่มทำงาน อย่างในที่นี้ ผมได้เซ็ตให้ Xterminal ตัวที่ 1 (ตัวที่รันบนคอนโซลเป็นตัวที่ 0) รันตัว KDE ถ้าคุณเพิ่งรัน VNCserver ก่อนหน้าที่จะรัน VNCViewer เพียงเล็กน้อย คุณก็จะได้เห็นหน้าจอในขณะที่ KDE กำลังตรวจสอบและติดตั้งการทำงานต่างๆ ด้วยครับ



อ้อ... สำหรับคนที่ไม่คุ้นกับ VNC  เนื่องจาก VNCserver ไม่ได้จัดการส่งข้อมูลเสียง และการจัดการระบบไฟล์ต่างๆ มายังเครื่อง client ดังนั้น KDE อาจจะเตือนว่า ไม่มีระบบเสียงอยู่  ซึ่งเราก็เพียงแต่ปิดไปครับ  นั่นคือ KDE อีกตัวนี้จะไม่มีการติดต่อกับซาวน์การ์ดแบบตัวที่อยู่บน Xterminal หมายเลข 0 ครับ 

วิธีติดตั้งโปรแกรม FileZilla - File Transfer (Open Source/Freeware)

FileZilla - File Transfer (Open Source/Freeware)

FileZilla เป็นโปรแกรมที่ใช้ติดต่อกับ FTP server เพื่อดาวน์โหลดหรืออัปโหลดไฟล์ โดยเฉพาะกับเว็บไซต์ ทำให้เหมาะสำหรับนักออกแบบเว็บ นอกจากนี้ FileZilla ยังรองรับการถ่ายไฟล์อย่างปลอดภัยผ่าน SSH (SFTP) อีกด้วย FileZilla รองรับการกลับมาถ่ายไฟล์ต่อในกรณีที่อัปโหลดหรือดาวน์โหลดล้มเหลว และทำงานได้ดีผ่านไฟร์วอลและพรอกซี FileZilla มีวิธีใช้งานที่สะดวก แบ่งวินโดว์ออกเป็นสองส่วนคือแสดงฝั่ง local กับ remote จากนั้นคุณก็สามารถ drag and drop ไฟล์ระหว่างสองฝั่งเพื่ออัปโหลดหรือดาวน์โหลดได้ทันที คุณสามารถ login อย่างรวดเร็วโดยป้อนข้อมูลของไซต์คือที่อยู่ ผู้ใช้ และรหัสผ่าน ได้บนทูลบาร์เลยทันที นอกจากนี้ FileZilla ยังมี host manager ที่เก็บรายละเอียดของ เซิร์ฟเวอร์ที่คุณใช้เป็นประจำ เพื่อให้คุณเชื่อมต่อได้อย่างง่ายและรวดเร็ว... FileZilla ทำงานได้เฉพาะระบบ Windows เท่านั้น


วิธีติดตั้งโปรแกรม FileZilla

ก่อนทำการติดตั้ง กรุณา Download โปรแกรม FileZilla  ก่อนนะคะ



http://filezilla-project.org/download.php/
1. หลังจากที่ได้ทำการ Download FileZilla มาเรียบร้อยแล้ว ให้ Double Click ที่ไฟล์ FileZilla_2_2_14b_setup.exe ก็จะพบกับหน้า License Agreement ดังต่อไปนี้






2. คลิกที่ปุ่ม I Agree จะพบกับหน้า Choose Components (แนะนำให้เลือกแบบ Standard) ให้คลิกที่ปุ่ม Next





3. กำหนด Folder ที่จะใช้ในการ Install โปรแกรม FileZilla ให้คลิกที่ปุ่ม Next





4. กำหนด Folder บน Start Menu จากนั้นให้คลิกที่ปุ่ม Next





5. กำหนดค่า Configure ของโปรแกรม (แนะนำว่าไม่ต้องเปลี่ยนค่าใดๆ) จากนั้นให้คลิกปุ่ม Install





6. โปรแกรมจะเริ่มทำการ Install กรุณาสักครู่เมื่อเสร็จแล้วให้คลิกที่ปุ่ม Close







วิธีการใช้งาน โปรแกรม FileZilla

7/17/2555

Issuu มาทำ online page flip ง่ายๆกัน

จากโจทย์ออกแบบสังคม
พี่แอนกับเดือนคิดกันว่าอยากช่วยกันเผยแพร่ผลงาน
โดยที่ทำง่ายๆและดี
ทีนี้เลยมองว่า Issuu.com น่าจะเป็นตัวเลือก
เพราะเป็นเว็บบริการ Online page flip
ทำเสร็จ ใครอยาก download ก็ download เป็น PDF ได้โดยที่เราไม่ต้องทำอะำไรเลย
เรียกได้ว่าแค่เราคลิกไม่กี่คลิก ที่เหลือ เว็บนี้จัดการให้ทั้งหมด

แอนลองทำมาแล้ว ง่ายมากๆ ทุกคนก็ทำได้
มาดูกันเลยว่าต้องทำอะไรบ้าง

ขั้นตอนทั้งหมด จริงๆก็มีแค่นี้เองล่ะ  เจ๋ง
1 เตรียมไฟล์เป็นหน้าๆขนาดเท่าๆกันไว้โดยเตรียมเป็นหน้าเดี่ยว
2 รวมไฟล์ทั้งหมดเป็น PDF
3 สมัครสมาชิกเว็บ www.issuu.com
4 Upload ไฟล์ PDF ขึ้นเว็บ Issuu
5 เอา link ไปเผยแพร่ต่อได้เลย

 1 เตรียมไฟล์เป็นหน้าๆขนาดเท่าๆกันไว้โดยเตรียมเป็นหน้าเดี่ยว
ที่แอนทำคือเตรียมไฟล์รูป.jpg ขนาดเท่าๆกันไว้ประมาณ 20 รูป (20 หน้าพอดี)
จริงๆแล้วจะเป็นไฟล์ word หรืออะไรก็ได้นะที่สามารถแปลงเป็น PDF ได้

2 รวมไฟล์ทั้งหมดเป็น PDF
อันนี้จะใช้โปรแกรมอะำไรก็ได้ค่ะ ใครมี freeware แนะนำมั้ย  อ๊าง~

3 สมัครสมาชิกเว็บ www.issuu.com
ตรงนี้ข้ามเนอะ เหมือนการสมัครสมาชิกเว็บทั่วไป

4 Upload ไฟล์ PDF ขึ้นเว็บ Issuu
4.1 คลิกที่ Upload document


4.2 เลือกไฟล์ด้วยการคลิกปุ่ม browse -> ใส่รายละเอียดของไฟล์ลงไป -> คลิก upload


ถ้า upload เรียบร้อย flip book ของเราก็จะไปอยู่บนชั้น (My Library)

5 เอา link ไปเผยแพร่ต่อได้เลย
5.1 คลิกที่หนังสือของเราจะมีคำว่า Open พอคลิกที่ Open แล้วจะขึ้นอีกหน้าจอเปิดหนังสือเราขึ้นมา


เช่น แบบนี้ http://issuu.com/annkemon/docs/photobook

5.2 ถ้าจะเอาไปใส่บนเว็บเราก็คลิกที่ Embed
เลือก option ข้างล่าง
(ถ้า click ที่ more theme จะมีพื้นหลังให้เลือกเพิ่มอีกล่ะ)
แล้ว copy code ในช่อง Embed ไปใช้ได้เลย


เช่น แบบนี้ http://annkemon.multiply.com/journal/item/4/Online_Flip_Book

ถ้าคนสนใจดาวน์โหลดหนังสือของเรา
ก็สามารถคลิกที่ download แล้วจะได้ไฟล์เป็น PDF มาเลยล่ะ  เจ๋ง

จบแล้ว สั้นมาก