เรามักหลงลืมไปว่า เว็บสวยด้วยภาพถ่ายนะไอ้ทิด

phangngahappiness.com เว็บนี้ทำไว้น่าจะปีกว่าๆ เห็นจะได้ จำได้ว่าตอนได้โจทย์จากมหาวิทยาลัยธรรมศาสตร์ให้ช่วยทำเว็บเล็กๆ ตัวนี้สำหรับใช้ในโครงการพังงาแห่งความสุขก็พบว่าไม่ได้มีอะไรซับซ้อน เพียงพื้นที่ประกาศข่าวสารและให้ข้อมูลพื้นที่เล็กน้อยเท่านั้น แต่โจทย์ที่ผมต้องคิดต่ออีกสักหน่อยคือ พังงากำลังขายการท่องเที่ยวเชิงอนุรักษ์ ฉะนั้นคนย่อมคาดหวังว่าจะได้เห็นภาพความงามนั้นเป็นสำคัญ ซึ่งความคาดหวังนั้นไม่ได้ผิดเลยครับ โชคดีหน่อยที่ requirement อื่นๆ ไม่ซับซ้อน และโชคดีอีกขั้นคือ สถานที่เหล่านั้นผมไปเห็นกับตามาแล้ว ภาพที่ต้องใช้งานก็มาจากการลั่นไกชัตเตอร์ของผมเอง การเลือกใช้ภาพประกอบเว็บไซต์จึงเป็นอะไรที่บันเทิงมาก และเต็มไปด้วยความรู้สึกว่ารักพี่เสียดายน้อง อย่าหาว่ายกหางตัวเองเลยครับ ผมรู้สึกเช่นนั้นจริงๆ ว่าภาพนั้นก็ดี ภาพนี้ก็งาม แต่ครั้นจะยัดไปทั้งหมดก็จะรุงรัง จึงจัดวางเท่าที่เห็น text พร้อม ภาพพร้อม วาง layout อย่างง่าย และจบงานในระยะเวลาชั่วไม่นาน นี่คือเว็บที่ผมชอบที่สุดเว็บหนึ่งตั้งแต่เริ่มต้นจนจบกระบวนการ โดยเฉพาะผู้ว่าจ้างให้อิสระในการทำงานเต็มที่ชนิดที่ไม่มีแก้เลยก็ว่าได้ ที่เล่าเรื่องนี้เพราะผมเห็นว่า การทำเว็บไซต์จำนวนมากมักบอกว่าอยากได้เว็บสวย คลีน แต่พอเห็นภาพประกอบก็ต้องกลอกตามองบนพลันเอามือทาบอก คือความงามในดราฟต์แรกสามารถใช้ภาพ mockup จาก shutterstock, unsplash, pixels ฯลฯ ได้นะครับ แต่ถึงที่สุดก็ต้องเอาทิ้ง เพราะมันไม่ใช่ภาพจริงของงานนั้นๆ เว้นเสียแต่ฟลุ๊คใช่จริงๆ ก็โชคดีไป สิ่งที่ผมอยากแลกเปลี่ยนและบันทึกไว้สักหน่อยก็คือ ถ้าอยากให้ได้เว็บตรงตามวัตถุประสงค์ของผู้ว่าจ้าง พี่ๆ ควรเตรียมสิ่งเหล่านี้เอาไว้ให้หน่อยจะยอดเยี่ยมมาก เนื้อหา […]

ทำเว็บไซต์ให้ วสศ. เว็บลูกผสม Corporate+Magazine+Blog

งึกๆ งักๆ ค่อยๆ ปั้นโปรเจกต์นี้จนน่าจะเข้าท่า กับภารกิจรีดีไซน์และเพิ่มฟังก์ชั่นบางประการลงไป เช่น research กับ download ซึ่งขออนุญาตกราบนำเรียนในรายละเอียดดังนี้

เข้าใจพยากรณ์อากาศอย่างง่ายดายและแม่นยำด้วย windy.com

เคยฟังข่าวพยากรณ์อากาศแล้วหงุดหงิดกับการพูดถ้อยคำอะไรเทือกนี้ไหมครับ “ฝนตก 60% ของพื้นที่”“พายุอ่อนกำลังลงเป็นหย่อมความกดอากาศต่ำกำลังแรง”“ฝนตกหนักถึงหนักมาก บางแห่งมีลมแรง”“ลมตะวันตกเฉียงใต้ความเร็ว 15-35 กม./ชม. ทะเลมีคลื่นสูง 1-2 เมตร” ฯลฯ ประเทศไทยนี่เกิดภัยพิบัติทางธรรมชาติบ่อยมาก แต่วิธีการแจ้งเตือนของกรมอุตุนิยมวิทยานี่แทบไม่ไปไหนมาไหน ยังดีหน่อยที่หลายสำนักข่าวเอาวิธีการรายงานข่าวพยากรณ์อากาศด้วยการใส่สีสันลงไปให้คนดูเข้าใจง่าย ไม่งั้นการแจ้งเตือนภัยพิบัติกระทั่งการรับมือนี่คงแย่กว่านี้มาก แล้วกรุณาอย่าพูดถึงการแจ้งข่าวผ่านสถานีวิทยุกระจายเสียงแห่งประเทศไทยนะครับ โห… เรียกได้ว่า 30 ปีที่แล้วเคยรายงานยังไงก็ยังทำแบบนั้น รู้ทั้งรู้ว่าชาวบ้านฟังแล้วไม่เข้าใจแต่ก็ยังถูลู่ถูกังอ่านอยู่นั่นแหละ ถ้าไม่เหนือบ่ากว่าแรงแนะนำให้เข้าเว็บนี้ครับ www.windy.com หรือจะดาวน์โหลดแอพฯ ติดมือถือไว้ก็ไม่ผิดบาปประการใด เราจะสามารถเข้าใจพยากรณ์อากาศทั้งฝน ฟ้าคะนอง คลื่น เมฆ อุณหภูมิ สภาพอากาศ กระทั่งจุดศูนย์กลางของพายุ ที่สำคัญมันสอนให้เราเข้าใจทิศทางลมของโลกว่ามันเดินทางอย่างไร ถ้าเข้าใจทิศทางลมก็เข้าใจสถานการณ์ร้อนหนาวของโลกได้ไม่ยาก ส่วนเว็บไซต์กรมอุตุนิยมวิทยานี่ เข้าไปก็เสียเวลาเปล่าครับ ไม่ได้ช่วยให้ชีวิตปลอดภัยจากภัยพิบัติมากขึ้นนักหรอก เพราะจนถึงวันนี้พระอาทิตย์ขึ้นที่ผาชนะได-พระอาทิตย์ตกที่แหลมพรหมเทพเกี่ยวข้องอะไรกับชีวิตคนไทยหลายคนยังไม่รู้เลย

ผัดกะเพราอย่างไรให้ไม่อร่อย

กะเพราหลังบ้านต้นไม่งามแล้ว แม้หลายสัปดาห์ก่อนก้านใบดูน่าจับลงกระทะเสียเหลือเกิน แต่ตอนนั้นไม่ได้รู้สึกหิวอะไรเลยจึงปล่อยผ่านไปกระทั่งค่ำวานนี้

เขียน CSS เพื่อแสดง List แบบมีวงเล็บ เอาไว้ใช้ในการ display มาตรากฎหมาย

ปกติเวลาแสดง list ในเนื้อหาบทความ บางทีเราก็เลือกแบบง่ายๆ ไม่กี่แบบ คือ จะแสดง butllet หรือ list number ซึ่งก็น่าจะเพียงพอแล้วสำหรับการทำงาน แต่สำหรับเนื้อหาบางประเภท ลำพังการแสดง list แบบนั้นไม่เพียงพอ และไม่สอดคล้องกับการใช้งานจริง โดยเฉพาะพวกมาตรากฎหมายที่ต้องการระบุอย่างชัดเจน ดังที่เรามักจะได้ยินทั่น ส.ส. ผู้ทรงเกียรติกล่าวในสภาอยู่เนืองนิจว่า “ขออนุญาตกราบนำเรียนไปยังท่านประธานผ่านไปยังเพื่อนสมาชิกว่า ตามมาตรา 34 วรรค 2 วงเล็บ 3 ความว่า …” “วงเล็บ” เป็นการอ่านตามภาษากฎหมาย ซึ่งก็คงง่ายดีหากเอกสารนั้นๆ ถูกจัดบนไฟล์ MS Word แต่ข้อเท็จจริงคือ บ่อยครั้งเราก็นำข้อความเหล่านั้นมาวาง list กันแบบง่ายๆ ดังที่กราบนำเรียนมาแล้วในวรรคก่อนหน้า ซึ่งหากถามนักกฎหมายเขาก็จะอาจพอยอมรับได้ แต่จะดีกว่าถ้ามันแสดงผลตรงกันทั้งใน Word / PDF และ Text บนเว็บไซต์ โลกของ Developer กับ Lawyer ที่แท้ก็ใกล้กันนิดเดียว ระหว่างปั่นงานกองพะเนินเลยเลยแอบไปหาวิธีแสดง […]

เปลี่ยน Elementor เป็น Gutenberg ภารกิจ Redesign เว็บไซต์ให้ช่างภาพ Realframe.co

realframe เป็นกลุ่มช่างภาพสารคดีที่มีฝีมือเก่งกาจครับ หากจะอธิบายให้ชัดกว่านั้นคือ พวกเขาไม่ได้เป็นแค่ช่างภาพที่ถ่ายภาพสวย แต่เป็นคนที่เข้าใจ content ฉะนั้นคนที่เข้าใจเบื้องลึกเบื้องหลังของเรื่องราวยามต้องลั่นชัตเตอร์ พวกเขาใส่บางสิ่งลงไปในนั้น ผมเรียกมันว่า “รหัสความคิด” กล่าวคือ เมื่อมองภาพของ realframe แม้เพียงผิวเผิน เราจะเห็น message ที่อยู่ในเนื้องาน และเมื่อเรามองให้ลึกกว่านั้น จะเห็นความหมายแฝงทรงพลังที่ถูกฝังไว้ในภาพถ่ายนั้นด้วย นอกจากทำงานประจำ เป็นมือปืนรับจ้างให้กับหลายสำนักข่าว กลุ่มช่างภาพ realframe มีเว็บไซต์เป็นของตัวเองเพื่อเผยแพร่งานสู่สาธารณะคือ realframe.co โดยเว็บนี้เปิดใช้งานสักพักใหญ่ๆ แล้ว realframe.co เว็บเดิมช่างภาพในทีมนี้ลุยกันเองเลย ซึ่งก็นับว่าเก่งมากสำหรับการกระโดดข้ามทักษะที่คุ้นเคยมาทำงานก่อสร้างเว็บไซต์ด้วยตนเอง แต่เมื่อเนิ่นนานวันเข้าก็พบปัญหาคือ เว็บแสดงผลช้ามาก นั่นจึงนำมาสู่โจทย์ของการทำงานคือ อยากให้เว็บแสดงผลเร็วขึ้น และปรับหน้าตาของมันใหม่สักหน่อย ขนาดภาพมหึมา เมื่อเข้าไปดูหลังบ้านว่าเกิดอะไรขึ้น ผมพบว่าอาการแสดงผลช้าเกิดจากการใช้ภาพประกอบที่ใหญ่มาก ขนาดของไฟล์ไม่ได้ว่าด้วยภาพละ 1MB นะครับ แต่ใหญ่ถึง 25MB ต่อหนึ่งภาพ ฉะนั้นจึงไม่แปลกเลยที่เว็บจะโหลดช้าสุดๆ คือปกติเว็บที่ซีเรียสเรื่องความเร็วมากๆ เนี่ยพยายามทำภาพให้ต่ำกว่า 100KB ด้วยซ้ำ ฉะนั้นขนาดภาพที่พบจึงใหญ่กว่าที่ควรจะเป็นนับร้อยเท่า วิธีการคือแก้คือใช้ตั้งแต่การ manual แก้บางภาพด้วย photoshop แล้ว […]

เพิ่มความปลอดภัยให้ WordPress ด้วยปลั๊กอิน Two-Factor

ลำพังการตั้ง User และ Password ให้คาดเดายากก็อาจปลอดภัยไม่พอ เพราะตัวแปรของการสร้างเว็บจาก WordPress นั้นมีอีกหลายอย่างที่ต้องจัดการเพื่อให้มั่นใจได้ว่า “เอานะ สบายใจได้”