Responsive web design

ห่างหายจากการทำเว็บไปนาน ยุคนี้ต้องเน้นให้เปิดเว็บบนโทรศัพท์ก็อ่านง่าย ผมใช้ wordpress ก็เลยง่ายเพราะเป็น Responsive web design อยู่แล้วแต่ต้องเปลี่ยน theme ใหม่ เพราะว่า theme เดิมที่ใช้โชว์ menu เต็มอยู่ด้านบนของเว็บ ซึ่งเมนูกินเนื้อที่ไปเยอะกว่าจะเห็นเนื้อหา เลยใช้ theme นี้ที่ยุบ menu มารวมกัน

จากนั้นก็มาปรับเรื่อง sidebar ให้ซ่อนที่ 909px ตัวเลขนี้ผมไม่แน่ใจว่าแต่ละ theme เหมือนกันหรือเปล่า แต่ theme ที่ผมใช้ 909px คือขนาดที่ sidebar ไม่หล่นไปอยู่ข้างล่าง และไม่เจอพื้นที่โล่งกว้างๆ ด้านขวามือ

Responsive web design ก็คือเว็บที่ปรับขนาดตัวเองอัตโนมัติ ให้เหมาะสมกับหน้าจอของอุปกรณ์ที่เข้ามาใช้งาน เพื่อให้อ่านง่ายไม่ว่าจะใช้โทรศัพท์, tablet หรือ PC

ผมทดสอบกับ iPAD, Tablet Android และ โทรศัพท์ Android แสดงผลได้ดี อ่านง่ายทุกอุปกรณ์ รวมทั้ง Windows Snap Assist ที่แบ่งหน้าจอ Windows ก็แสดงผลได้ดีทั้ง Chrome และ Firefox

แสดงผลเต็มจอ Full HD
ความกว้างน้อยที่สุดที่เห็น sidebar
เมื่อหน้าจอแคบที่สุด ก็ลดจำนวน column รูปภาพลง
เมื่อ sidebar โดนซ่อนจะเห็นว่าเนื้อหามีขนาดใหญ่ขึ้น

Move Host Webserver

ผมฝากเว็บไว้ที่ Hosting ในประเทศเพื่อความเร็วในการใช้งาน แต่ปัญหาที่เจอคือ PHP เป็นเวอร์ชั่น 5.xx ตัว WordPress แจ้งว่าไม่ Support ตั้งแต่ปีก่อน

ก็เลยติดต่อไปให้ทาง hosting ย้ายไฟเฟสที่มี PHP เวอร์ชั่นใหม่กว่านี้ เค้าก็ตอบกลับมาใช้เวลา 18 ชั่วโมง หลังจากย้ายเสร็จจะ Copy ส่วนต่างให้อีกครั้ง ip ของเว็บเปลี่ยน เสร็จแล้วให้ผมไปแก้ nameserver ให้ชี้ไปที่ใหม่ก็คือ IP ของ Server ที่ย้ายไป

ผมมีเว็บอยู่ 2 แบบคือชี้ Nameserver ไปที่ Hosting เพื่อจัดการ DNS ที่ Hosting กับจัดการ DNS บนเว็บที่จดโดเมนเลย

ผมชอบจัดการ DNS บนเว็บที่จดโดนเมน เพราะเวลาเปลี่ยน Hosting ก็แค่มาเปลี่ยน IP ไม่ต้องไปแก้ Nameserver ซึ่งคิดว่าจะใช้เวลานาน แต่ผลกลับผิดคาดเว็บที่ผมเปลี่ยน Nameserver กลับอัพเดตข้อมูลเร็วกว่าเว็บที่เปลี่ยน ip แต่ก็ไม่ต้องกังวลเวลาไม่ได้ต่างกันมาก ไม่ถึง 30 นาทีข้อมูลก็อัพเดตแล้ว

ผมใช้ 1.1.1.1 เป็น dns บนเครื่อง

ไม่ได้อัพเดตเว็บ 5 ปี

ช่วงหลังจะไปอัพเดตข้อมูลบน Facebook เป็นหลัก (link facebook) แต่เดี๋ยวมีเวลาจะเข้ามาอัพเดตบนเว็บด้วย

ตอนนี้ที่ทำไปแล้วก็อัพเดต WordPress, Plugin, Theme แล้วก็หน้าสินค้าเพิ่ม Fortigate กับ VEEAM เข้ามาแต่ก็มีสินค้าอีกหลายอย่างที่ยังไม่ได้เพิ่ม แก้ไขเบอร์โทรและที่อยู่เป็นปัจจุบันแล้วครับ

ปรับ Layout เว็บด้วย Chrome

วันนี้ระหว่างที่ผมนั่งเปิดเว็บอยู่เจอโพสต์อันหนึ่งที่รูปภาพใหญ่กว่าเนื้อที่แสดงผลของเว็บทำให้เห็นภาพไม่เต็ม เว็บทั่วไปจะกำหนดความกว้างของหน้าแบบคงที่เพื่อไม่ให้เว็บแสดงผลผิดเพี้ยนไปตามขนาดหน้าจอ ส่วนใหญ่ก็จะตั้งไว้ให้รองรับหน้าจอความกว้าง 1024px แต่ผมใช้จอที่มีความกว้าง 1920px ผมเลยใช้ Chrome Developer Tools ปรับ Layout ของเว็บนี้ให้ใหญ่ขึ้นเพื่อที่ผมจะได้เห็นรูปแบบเต็มๆ

ก่อนปรับแต่งจะเห็นว่าเห็นรูปแค่บางส่วน
im-0006.jpg

กด F12 คลิกหาบรรทัดที่ทำให้เนื้อหาส่วนที่ต้องการเป็นสีฟ้า สังเกตุที่ด้านขวาจะมีบรรทัดที่เขียนว่า width: 950px; นี่คือ CSS ที่บีบความกว้างของเว็บนี้เอาไว้
im-0007.jpg

คลิกที่ CSS บรรทัดที่ต้องการเพื่อเพิ่มความกว้าง หรือยกเลิกก็ได้ จะเห็นว่าเห็นรูปเต็มทั้งรูปแล้ว
im-0008.jpg

กด F12 อีกครั้งเพื่อปิด Developer Tools ตอนนี้ก็ดูเว็บแบบเต็มจอได้แล้ว
im-0009.jpg

นี่เป็นแค่ตัวอย่างง่ายๆ ในการใช้ Developer Tools ถ้าคุณใช้ CSS เป็นคุณก็ปรับรูปแบบเว็บต่างๆ ได้ตามที่ต้องการเลยครับ

ลบประวัติการค้นหาจากกูเกิล

ปกติถ้าเรา Login Gmail หรือบริการอื่นๆ ของ Google ทิ้งไว้ เวลาเราใช้ Google Search ทาง Google จะเก็บประวัติการค้นหาของเราไว้ด้วย ซึ่งเราเข้าไปดูย้อนหลัง หรือเข้าไปลบบางคำค้นหรือจะลบทั้งหมดก็ได้ ดูวิธีตามรูปข้างล่างได้เลย ง่ายๆ ครับ

SNAG-0019.jpg
SNAG-0021.jpg
SNAG-0022.jpg
SNAG-0023.jpg