Get Adobe Flash player

การจัดการความรู้ KM

CSS Effect zoom รูปภาพเพื่อเพิ่ม Interaction กับผู้ใช้

จากตัวอย่างใน Video เมื่อ hover ที่รูปใดใน Gallery รูปนั้นจะถูกซูมเพื่อให้ผู้ใช้ทราบว่ากำลังชี้ที่รูปใดอยู่ สามารถทำได้ดังนี้

HTML

 

CSS

ใน Class gallery-item สามารถนำ overflow: hidden; ออก เวลาที่ Hover ภาพจะขยายใหญ่เกินกรอบ ก็เป็นอีกทางเลือกหนึ่ง

การใช้ Plugin Content Views

Plugin Content Views

 

ปลั๊กอิน Content Views นั้นสามารถจัดการแบ่ง Grid และการโชว์ Posts ของเรื่องหรือหน้าแต่ละหน้าได้

 

1) เราสามารถกำหนดหัวข้อของหน้า

2) กำหนดเลือกเรื่องหรือหน้าที่จะนำมาแสดง

3) จำกัดการโชว์โพสต์ข้อแต่ละหน้า

 

 

 

สามารถเลือกหมวดหมู่เฉพาะ หรือ ป้ายกำกับ ในการแสดงโพสต์

 

 

 

 

 

หน้า Display จะเป็นการตั้งค่าการแบ่ง Grid และ List รายการโชว์โพสต์

การจำกัดการโชว์ตัวอักษร , หัวข้อโพสต์ และ ขนาดรูปของโพสต์ต่างๆ

และสามารถตั้งค่าการจำกัดการแสดงโพสต์แล้วขึ้นหน้าใหม่ได้โดยการติ๊กที่ Pagination ให้เป็น Enable

 

โดยการใช้งานนั้นสามารถนำ ShortCode  ไปวางในหน้าที่ต้องการแสดงโชว์

 

 

 

การสร้าง Brush ใช้เองบน Photoshop

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

 

1. เลือกรูปที่ต้องการนำมาทำเป็น brush โดยทำการ crop รูปให้ได้ขนาดตามต้องการ

2. กดเลือกคำสั่งที่เมนู Edit > Define Brush Preset

3. ทำการตั้งชื่อ brush จากนั้นกด OK

4. brush ที่สร้างขึ้นเองจะถูกเพิ่มเข้าไป
ซึ่งจะดูได้จากรูปแบบของ brush เวลาที่กดใช้ (ส่วนที่เพิ่มใหม่จะอยู่ล่างสุด)

หรือสามารถดูได้จาก brush preset จากเมนู Window > Brush Preset (ส่วนที่เพิ่มใหม่จะอยู่ล่างสุด เช่นกัน)

 

หลังจากสร้างแล้ว เมื่อทดลองใช้ ก็จะได้ brush ในลวดลายตามที่ผู้ใช้ต้องการ

การ Upload รายชื่อ User Email Google

  • Click เข้าไปที่ผู้ใช้งาน

  • จากนั้นเข้าไปที่ Bulk upload users

  • ดาว์นโหลด CSV template จากนั้นเปิดไฟล์ที่ดาวน์โหลดมา

  • กรอกข้อมูลต่างๆของ user โดยข้อมูลที่จำเป็นต้องกรอกจะใส่ [required] ตามหลัง

เมื่อกรอกข้อมูลเสร็จแล้วให้กลับไปที่หน้าเมนู Bulk upload users

  • คลิก ATTACH CSV เพื่ออัพโหลดไฟล์ที่มีข้อมูลของ user

  • ซึ่งถ้าข้อมูลในไฟล์ที่ upload ไปนั้นมีปัญหาเราสามารถ Download Log มาเพื่อตรวจสอบได้

Download Log จะมีการแจ้งข้อผิดพลาดของข้อมูลอยู่

 

Smart Slider 3 WordPress Plugin สำหรับทำ slide ที่ฟรีและดีที่สุดในตอนนี้

โดยปกติ theme wordpress ส่วนใหญ่จะมีระบบ slide ติดมาด้วยเสมอเป็นของคู่กัน แต่ส่วนมากถ้าเป็น theme ฟรีมักจะแถม slide ที่มีตัวเลือกไม่เยอะ ปรับแต่งอะไรมากไม่ได้ ดังนั้นการเลือกใช้ plugin เสริมเพื่อทำหน้าที่แสดง slide จึงเป็นอีกทางเลือกที่หน้าสนใจ

ซึ่งในปัจจุบันถ้าเราค้นหา slide plugin จะพบว่า MetaSlideer มีผู้ใช้งานมากที่สุด (9 แสนเว็บไซต์) แต่เท่าที่ลองใช้ยังเป็นการทำ slide แบบเก่า และมีตัวเลือกน้อย จึงแนะนำให้ใช้ slide plugin Smart Slider 3 แทน ซึ่งมีผู้ใช้งานเป็นอันดับสอง (2 แสนเว็บไซต์) ดังภาพ

 

คุณสมบัติเด่นของ Smart Slider 3

  1. มีตัวเลือกเยอะมาก แม้ว่าจะเป็น Free version
  2. ไม่จำกัดจำนวน slide (แต่ไม่ควรใส่เยอะ 4 slide ถือว่าเยอะพอสมควรแล้ว)
  3. รองรับสีพื้นหลัง (background-color) ทั้งแบบสีเดียว และแบบไล่เฉดสี (gradient)
  4. รองรับ รูปภาพ, วิดีโอ,  post (สามารถกำหนด opacity ของรูปภาพได้)
  5. สามารถแทรก layer ได้หลาย layer
  6. ในแต่ละ layer รองรับทั้งข้อความ รูปภาพ ปุ่มกด รวมทั้งการกำหนด CSS หรือ Style ได้ค่อนข้างอิสระ
  7. สามารถจัด layout ของ layer ได้ด้วย

จากคุณสมบัติเด่นทั้งหมดที่ยกมา จะเห็นว่าเพียงพอต่อการทำ slide ดีๆ สวยๆ มีคุณภาพได้ไม่ยาก โดยไม่ต้องใช้เงินซื้อรุ่น pro

การใช้งาน Modal Bootstrap

การใช้ Modal Bootstap

เพิ่ม script ไว้ในหน้า html ในส่วนล่างของ </body>

สามารถเลือก version ได้จากเว็บไซต์ด้านล่าง

 

 

โค้ดในส่วนนี้เป็นการเพิ่มปุ่ม Button ที่คลิกให้ฟังก์ชั่น Modal ทำงาน

 

โค้ดในส่วนนี้เป็นส่วนกำหนดส่วนต่างๆของ Modal

 

 

 

 

 

 

AngularJS วิธี setDirty และ setTouched กับ required input ที่ผู้ใช้ไม่ได้กรอก

ปกติเมื่อใช้ AngularJS จะมีการ Validate Form ให้อัตโนมัติโดยปกติจะมีเงื่อนไขในการแสดงข้อความแจ้งเตือนให้กรอกข้อมูลดังนี้

  1. Invalid คือ Input ที่ไม่ถูกต้อง เช่น ต้องกรอก (required) แต่ไม่กรอก หรือ กรอกข้อมูลผิด format / ผิดประเภท
  2. Dirty คือ Input มีการคีย์ข้อมูล หรือเลือกข้อมูลแล้ว
  3. Touched คือ Input ที่เคยถูกคลิกเลือก หรือแตะเพื่อจะคีย์  (Focus)

แต่ก็มีปัญหาอยู่ว่า ถ้า require input ที่ยังไม่ได้กรอก หรือยังไม่ได้แตะต้องเลย จะไม่มี Dirty หรือ Touched พอผู้ใช้กด Submit Form ก็จะไม่เห็นการแจ้งเตือน จึงจำเป็นที่จะต้องมีการสั่ง Set Dirty และ Touched เพื่อให้ข้อความแจ้งเตือนในแต่ละ input ที่ Invalid แสดง โดยใช้ Code ดังนี้

อย่างไรก็ตาม Code นี้สามารถรองรับเมื่อมีการใช้ Sub Form ด้วย

CSS Order List แบบหลายระดับเช่นข้อ 1. มีข้อย่อยเป็น 1.1 ย่อยอีกเป็น 1.1.1.

โดยปกติการใช้ HTML Order List แบบหลายระดับดังภาพ

จะมีการแสดงผลในแต่ละข้อเพียงระดับเดียว เช่น ข้อ 1. มีข้อย่อยก็จะเป็น 1. ดังภาพ

ถ้าหากเราต้องการให้แสดงแบบหลายระดับ เช่น ข้อ 1. มีข้อย่อยเป็น 1.1 ย่อยอีกเป็น 1.1.1. สามารถกำหนด CSS โดยใช้ counter ดังนี้

ผลลัพธ์ที่ได้

วิธี Setup FTP Service บน Windows server

 

เข้าไปที่ Server Manager 

 

เลือก Add roles and features

 

 

 

 

 

เลือก Service ที่ต้องการจะติดตั้ง

 

เมื่อทำการ Install Service เสร็จเรียบร้อยแล้ว ไปยัง Tools > Internet Information Services (IIS) manager

 

 

คลิกขวา Sites > Add FTP Sites

 

ตั้งชื่อ FTP และ Path Files ของ ftp

 

เลือก IP Address และ Port ที่ต้องการทำ FTP 

 

ขั้นตอนการเพิ่ม การชี้ที่อยู่ของ Directory Folder

 

จากนั้นไปที่  FTP Authentication ที่เราสร้าง เพื่อทำการ Enable Group ของผู้ใช้

 

เมื่อทำงานตั้งค่าเสร็จเรียบร้อย

ให้ทดลองใช้ FTP โดยตัวอย่างจะใช้ Filezila

โดย Password นั้นจะเป็น Password ที่remote ไปยังเครื่อง Server

 

CSS : การเน้น text input เวลาทำการกรอกข้อมูล

ปกติเมื่อมีการใช้งาน text input หากไม่มีการตกแต่งใดๆ ในขณะที่ทำการที่กรอกข้อมูลลงไป textbox input ก็จะมีรูปลักษณ์ไม่ต่างไปจากตอนที่ไม่ได้กรอกข้อมูล แต่ถ้าหากต้องการเพิ่มลูกเล่นให้ text input มีการเน้นจุดที่ทำการกรอกข้อมูล ก็สามารถทำได้โดยกำหนดค่า input ภายใต้ <style>…</style> แล้วใช้โค้ดนี้

input[type=ประเภทtextbox]:focus {
ลักษณะ text input ที่ต้องการ เช่น สี สีขอบ ความหนาของขอบ ฯลฯ;
}

 

ตัวอย่างการใช้งาน (สมมติกำหนดให้ input 2 ประเภทแสดงผลต่างกัน)

 

จะได้ผลลัพธ์ดังนี้

– เมื่อทำการกรอกส่วนที่เป็นประเภท text
ส่วนที่ทำการกรอกข้อมูลจะขึ้นขอบสีดำหนารอบตัว text input ตามที่ตั้งค่าไว้ว่า border: 3px solid #555

– เมื่อทำการกรอกส่วนที่เป็นประเภท password
ส่วนที่ทำการกรอกข้อมูลจะมีพื้นหลังสีเหลืองอ่อนภายใน text input ตามที่ตั้งค่าไว้ว่า background-color: lightyellow

จะเห็นได้ว่า สิ่งที่ทำให้ text input ทั้งสองประเภทแสดงผลลัพธ์ต่างกัน อยู่ที่คำสั่งภาย :focus ของ input แต่ละชนิดนั่นเอง
ซึ่งการกำหนด input[type=???]:focus ก็ต้องสอดคล้องกับ type=”???”  ที่เซตบนตัว input ด้วย