Upload File to Google Drive

Google Drive
Google Drive
Google Drive

เชื่อว่า หลายๆ คน คงรู้จัก Google กันเป็นอย่างดีอยู่แล้ว ในฐานะ Search Engine แล้วก็น่าจะมีไม่น้อยที่รู้ว่า Google เขาก็ให้บริการพื้นที่เก็บข้อมูลฟรี ในผลิตภัณฑ์ที่ชื่อว่า Google Drive ซึ่งใน Google Drive นั้นสามารถเก็บข้อมูลได้หลากหลายรูปแบบมาก รวมถึงการใช้งานโปรแกรม Word Processing ต่างๆ เช่น Document, Spreadsheet, Form, Presentation, Drawing และเรายังสามารถ Install Apps จาก PlayStore ที่ใช้งานบน Google Drive ได้อีกด้วย

เอาล่ะ กลับมาเรื่องของ Google Drive กันต่อ… เมื่อช่วงเดือนก่อน ผมรับโจทย์มา 1 ข้อ คือ หาวิธีทำฟอร์มอัพโหลดไฟล์ขึ้นไปเก็บไว้ใน Google Drive ให้ได้ เนื่องจากเดิมทีนั้น เขาเก็บไฟล์ต่างๆ ทั้งเว็บไซต์ อีเมล รวมไปถึงไฟล์งานต่างๆ ไว้บนโฮสติ้งรวมกันหมด ทีนี้ มันก็แชร์ แบ่งพื้นที่กันไปมา ทำให้พื้นที่ไม่พอ ก็เลยต้องหาทางกระจายไฟล์ต่างๆ ไปเก็บไว้ในที่ต่างๆ ซึ่ง 1 ในตัวเลือกนั้นก็คือ Google Drive เพราะว่าเขาให้พื้นที่เราเก็บข้อมูลมากถึง 15GB

แต่ปัญหาก็คือ เราจะเชื่อมต่อ แบบฟอร์ม html บนหน้าเว็บไซต์ของเรา ให้ส่งไฟล์เข้าไปเก็บที่ Google Drive ยังไง ???

ทุกปัญหามีทางแก้ไขครับ..

Continue reading “Upload File to Google Drive”

CSS Box Shadow

วันนี้มาดูการทำให้เว็บของเราดูน่าสนใจขึ้นด้วยการใส่เงา (Shadow) ลงไปให้กับวัตถุกัน ซึ่งเทคนิคนี้ ผมชอบใช้นะ มันดูมีมิติดี..

โค้ด css ก็ไม่มีอะไรมาก ตามนี้

ค่าต่างๆ จะประกอบด้วย

  1. The horizontal offset : ขนาดของเงาตามแนวนอน
  2. The vertical offset : ขนาดของเงาตามแนวตั้ง
  3. The blur radius : ค่าความเบลอของเงา
  4. The spread radius : ค่าความฟุ้งกระจาย ถ้าค่าเป็นบวกมากๆ ก็จะเข้มขึ้นเรื่อยๆ โดยค่าเริ่มต้นคือ 0px (ศูนย์)
  5. Color : ค่าสี ใช้ได้ทั้งชื่อสีโดยตรง หรือ hex code หรือ rgb value ก็ได้ทั้งนั้น อ้อ ใส่ alpha ไปด้วยก็ไม่ผิดกติกานะ
  6. ถ้าอยากให้มีเงาเกิดขึ้นด้านใน ก็ใส่ค่า inset ลงไปนะ แบบนี้ box-shadow: 3px 3px 5px 6px #ccc inset;

 

สำหรับ Internet Explorer จะพิเศษหน่อย

 

 

ไปดูเพิ่มได้ที่บล็อกของนาย Chris Coyier ได้ที่นี่ http://css-tricks.com/snippets/css/css-box-shadow/

หรือลองสร้าง css เองเลยที่นี่ http://css3gen.com/box-shadow/

MVC

MVC ในภาษาโปรแกรมมิ่ง ประกอบไปด้วย

M = Model = ส่วนที่ใช้ติดต่อฐานข้อมูล

V = View = ส่วนที่ทำหน้าที่แสดงผล

C = Controller = ส่วนที่ใช้ควบคุมการทำงานทั้งหมด

เขียน htaccess ให้แสดง www

เวลาเราจะเข้าเว็บไซต์ใดๆ สักเว็บนึง คำแรกที่เราจะพิมพ์กันก่อน ก็น่าจะเป็น www. ซึ่งเป็นตัวบ่งบอกว่า ฉันจะลิงก์ไปหาเว็บนั้น เว็บนี้นะ แต่ความเป็นจริงแล้ว บางครั้ง เราก็เข้าเว็บไปเลยโดยไม่ต้องพิมพ์ www. ก็ได้ ซึ่งก็จะเกิดความแตกต่างกันขึ้น ดังนั้นหากเราต้องการป้องกันการสับสนในส่วนนี้ เราก็ต้องอาศัยเครื่องมือที่เรียกว่า .htaccess ซึ่งจะมาช่วยเราได้ ดังนี้

  1. ไฟล์ htaccess นั้นจะทำงานได้บน linux, unix server เท่านั้นนะครับ และรันบน apache ซึ่งถ้า server ไหนเป็น windows server ก็อาจจะต้องหาวิธีการอื่นๆ กันต่อไป
  2. เข้าไปที่ file manager ของ hosting ของเรา จากหน้าเว็บก็ได้ หรือจาก ftp software ก็ได้
  3. สร้างไฟล์เปล่าๆ ขึ้นมาไฟล์นึง ชื่อ .htaccess … ** ไม่ต้องมีชื่อไฟล์หน้า จุด (dot)
  4. edit file นี้ โดยเขียนโค้ดด้านล่างนี้ลงไป
  5. save file เป็นอันจบพิธี..

ต่อไปเวลาเราเข้าเว็บเช่น http://chatchawan.net มันก็จะเปลี่ยนให้เราเป็น http://www.chatchawan.net แบบอัตโนมัติ

อ้อ.. อย่าลืมเปิดการใช้งาน mod_rewrite ก่อนด้วยนะ..

วิธีเอาฟอนท์มาใช้งานบนเว็บไซต์ ผ่าน @font-face

ในบรรดาคนทำเว็บไซต์ด้วยกันแล้ว คงจะมีไม่น้อยที่มีปัญหากับการใช้ฟอนท์บนเว็บไซต์ เนื่องจากเว็บไซต์เป็นอะไรที่เป็นสื่อสาธารณะ และมีมาตรฐานอยู่ระดับนึง ดังนั้นการใช้ฟอนท์พิสดาร หรือฟอนท์สวยๆ บนเว็บไซต์นั้น เป็นไปได้ค่อนข้างยาก และลำบากมาก หากจะใช้วิธีการอ้างชื่อฟอนท์นั้นๆ โดยตรงเลย เช่น

ชื่อฟอนท์ “TH SarabunPSK” เป็นฟอนท์จาก สำนักงานส่งเสริมอุตสาหกรรมซอฟต์แวร์แห่งชาติ(องค์การมหาชน) จากโครงการ 13 ฟอนท์แห่งชาติ ซึ่งเผยแพร่ และแจกฟรีให้ประชาชน และหน่วยงานต่างๆ ได้ใช้ ตามมติ ครม. (อ้างอิง: http://www.sipa.or.th/ewt_news.php?nid=481&filename=index)

แต่ปัญหาก็คือ ฟอนท์ TH SarabunPSK นั้น ไม่ได้รับการติดตั้งไว้ในเครื่องคอมพิวเตอร์โดยทั่วไป ทั้งในประเทศไทย และทั่วโลก ซึ่งหากมีคนเปิดเว็บไซต์ของเรา แล้วในเครื่องคอมพิวเตอร์ของเขาไม่มีฟอนท์นี้อยู่ ตัวโปรแกรม Web Browser จะเลือกฟอนท์มาตรฐานขึ้นมาใช้งานโดยอัตโนมัติ เช่น Arial หรือ Tahoma เป็นต้น

ทีนี้จะทำยังไงดีล่ะ ? เรามีวิธีการผนึกฟอนท์สวยๆ ของเราให้แสดงผลได้อย่างถูกต้อง และเหมือนกันไม่ว่าคุณจะเปิดเว็บไซต์จากที่ใดๆ ก็ตาม ดังนี้

Continue reading “วิธีเอาฟอนท์มาใช้งานบนเว็บไซต์ ผ่าน @font-face”

ซ่อน Context Menu เวลาคลิกขวาบนหน้าเว็บ

How to hidden the context menu when right clicking on web pages. วิธีการซ่อนเมนู เมื่อคลิกขวาบนหน้าเว็บไซต์

ป้องกันการ Copy Paste ข้อความ

How to prevent user to copy and paste content from your web pages. วิธีการป้องกันไม่ให้ user ทำการ copy paste ข้อความบนหน้าเว็บไซต์