Oct 11

เริ่มต้นเรื่องแนว Comp. Only ในเว็บนี้กันด้วยประสบการณ์แก้ CSS แล้วกัน

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

ความสนุกเริ่มขึ้นเมื่อหนึ่งใน Requirement ที่ได้รับมาคือเมนู Drop-Down ซึ่งแน่นอนว่าผมไม่มีปัญญาทำเองครับ ยังดีที่มีคนทำโมดูล Nice Menus มาให้เรียบร้อยแล้ว แม้จะบอกว่าอยู่ในระดับ Experimental แต่ยังไงคงดีกว่าเขียนใหม่เองแน่นอน ว่าแล้วก็ไม่รอช้า ติดตั้งในทันใด

กระบวนการต่อจากนั้นเป็นการ Customize ให้เมนูนั้นเข้ากับตัวเว็บครับ ซึ่งก็สนุกสนานดีเพราะสุดท้ายแล้วมีบางส่วนต้องใช้ jQuery มาเพื่อนำ DOM Parser ของมันมาใช้ในการทำสวยงามด้วย ตลอดกระบวนการนั้นได้รับความช่วยเหลือจาก Firebug เป็นอย่างดี รอดตายมาได้หลายต่อหลายครั้งก็เพราะมัน

สุดท้ายมาอับจนปัญญาเอาตรงนี้ครับ

จริงๆ ก็ไม่มีอะไรมาก แค่มีการกำหนดสี Background เอาไว้เมื่อมีเมาส์ Hover ไปตรงลิงก์ แค่หา CSS ที่เกี่ยวข้องแล้วแก้ออกก็น่าจะหายไป ปัญหาคือผมไม่ได้กำหนด และผมไม่รู้ว่ามีใครไปกำหนดไว้ตรงไหน

ถ้าได้ศึกษา CSS มาบ้างจะรู้ว่ามันมีสิ่งที่เรียกว่า Pseudo Class เช่น “class_name:hover” ใน CSS ที่เอาไว้ทำหน้าที่กำหนดสีแบบนี้โดยเฉพาะ ความลำบากมันบังเกิดเมื่อผมพบว่า Firebug มันไม่รองรับ Pseudo Class เลยงานนี้เลยต้องนั่งงมกันเองว่าเจ้า CSS ที่ว่านี้มันมาจากตรงไหนกัน

วิธีการแก้ปัญหาแรกที่คิดออกเลยคือเอา jQuery มายิงสี Background ตอนทำ Hover ให้เปลี่ยนสีไปก่อนเลย เป็นการซ่อนปัญหาไว้ใต้พรมที่ดูน่าจะได้ผลดีที่สุดแล้ว แม้จะรู้ว่าไม่ใช่การแก้ปัญหาที่ดี แต่ผมก็ไม่รอช้าที่จะลอง แต่ถ้ามันเวิร์คคงรอไปอีกนานที่จะกลับมาแก้… :P

$(".menu-parent-id-2 li").hover(function(){ $(this).css(background:"#8FAF0F"); },function(){ $(this).css(background:"#000000"); }

งานนี้ลองเสร็จเว็บก็เละในทันที….

กลับไปนอนคิดอีกคืน ผลที่ได้คือในเมื่อ Firebug มันบอกไม่ได้ว่าสีนี้มาจากไหนก็ไม่ต้องรอมันบอก หาเองโลด เลยต้องหาที่พึ่งใหม่นั่นคือ

ColorZilla นั่นเอง…. ความสนุกยังไม่จบลงแค่นั้น หลังจากที่ลง ColorZilla แล้ว เมื่อลองใช้งานดูก็พบว่า

มันใช้ไม่ได้ครับพี่น้อง…. สุดท้ายก็มีแต่ The GIMP ที่เข้าใจเรา

เมื่อได้ค่าสีแล้วก็พบว่าสีแบบนี้มีใช้ในธีม Stylized Beauty ที่มุกเอามาใช้เป็น Base ในการสร้างธีม ก็ลบบรรทัดนั้นออกไปก็เป็นอันเรียบร้อย

และแล้วเมนูก็เสร็จตาม Requirement…..

written by lewcpe \\ tags: , , ,

Mar 12

written by lewcpe \\ tags: ,

Feb 10

BBC ถือว่าเข้าหาโลกเทคโนโลยีได้ค่อนข้างเร็วมากในช่วงหลัง มีการพัฒนาอย่างต่อเนื่องไม่ว่าจะเป็นรายการวิทยุที่ทำเป็น Podcast อย่างจริงจัง หรือการแจกซอฟต์แวร์โอเพนซอร์สออกมาเนืองๆ พอดีช่วงนี้มีโครงการ BBC2.0 สิ่งหนึ่งที่เกิดขึ้นคือมีการเตรียมการล้างบางเว็บกันยกใหญ่ พนักงานคนหนึ่งใช้นามปากกาว่า Tomski เลยมาเขียนแนวทางการปรับปรุงเว็บไว้ในบล็อกของเขา จำนวน 15 ข้อ แปลมาคร่าวๆ แล้วกัน (จริงๆ เขาก็เขียนคร่าวๆ อยู่แล้ว)

  1. สร้างเว็บให้เข้ากับความต้องการของคนเข้าชม
  2. สร้างเว็บให่้มีจุดขายหลักอย่างหนึ่งที่เจ๋งมากๆ
  3. อย่ารวมทุกอย่างไว้ในเว็บ ถ้าทำอะไรได้มีดีให้เว็บที่ทำหน้าที่ได้ดีกว่ารับไปแทน
  4. ทดลองเยอะๆ ยกเลิกสิ่งที่ล้มเหลว ผลักดันสิ่งที่สำเร็จ
  5. ใส่ความสร้างสรรให้กับภาพรวมเว็บ
  6. พูดคุย ยอมรับความผิดพลาด
  7. ทั้งเว็บมีคุณภาพเท่ากับหน้าที่แย่ที่สุดของเว็บ
  8. ทำให้ทุกหน้าของเว็บมีทางเข้าถึงตลอดไป…
  9. ใส่ใจคนทีี่ไม่เข้าในเทคโนโลยีเสมอ
  10. สร้างทางเข้าถึงเนื้อหาให้เยอะเข้าไว้ จำแนกเนื้อหาตามบุคคล ตามเรื่องราว เวลา และหมวดหมู่อื่นๆ
  11. การทำเว็บให้มีแนวทางการเข้าถึงชัดเจนไม่ได้หมายถึงการทำให้ทุกหน้าเหมือนกัน แต่ต้องมั่นใจว่าผู้ใช้จะไม่หลงทาง
  12. ทำเว็บให้ทุกคนเข้าถึงได้เสมอ
  13. สนับสนุนให้คนเข้าใช้ข้อมูลบนเว็บของคุณ อย่าลืมให้เขาลิงก์กลับมาที่เว็บคุณด้วย
  14. ลิงก์ไปยังเว็บสนทนาแทนการวางไว้ในเว็บโดยตรง
  15. การปรับค่าตามบุคคลเข้าเรียบง่าย และเคารพต่อความเป็นส่วนตัว

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

ข่าวดีคือสื่อในไทยยังตามหลังแนวคิดพวกนี้อยู่สองสามก้าว ดังนั้นใครจะทำอะไรในไทยช่วงนี้รีบๆ ทำนะ

written by lewcpe \\ tags: ,

Feb 01
Java never became mainstream for RIAs. Bruce Eckel

written by lewcpe \\ tags: , , ,