หมายเหต ภาพประกอบไม่เกี่ยวกับบทความนี้แต่อย่างใด ที่มา www.thaimarch.com/index.php?topic=13479.15

การทำโปรเจ็คเว็บไซต์ขนาดใหญ่ จ้างคนอื่นทำอย่างเดียวเจ๊ง ต้องมี in house ด้วย

ที่ผ่านมาทางทีมงานได้ order หลากหลายจากลูกค้า โดยมีลูกค้าบางกลุ่มมีโมเดล business ทาง internet ในใจเช่นบางคนอยากเป็นศูนย์กลางการ​ซื้อขายของเฉพาะด้าน (Classified) หรือบางคนต้องการทำ
ร้านค้าออนไลน์ครบวงจร (e-commerce) บางคนต้องการเป็นตลาด และมี social network ในตัวด้วย

จากนั้นลูกค้าก็จะเรียกบริษัททำระบบและทำเว็บเข้าไปคุย บางบริษัทก็เสนอราคาเป็นโปรเจ็ค บางบริษัทก็อาจเสนอราคาเป็น manday ซึ่งการเสนอราคาอย่างหลัง มักไม่ค่อยได้รับการจ้างเพราะลูกค้าเองไม่แน่ใจว่าตนเองจะต้องจ่ายรวมแล้วเท่าไหร่ แต่ท้ายที่สุด ลูกค้าที่เลือกจ่ายเป็นโปรเจ็คกลับมัปัญหาระหว่างผู้รับจ้างและผู้จ้างมากกว่าเพราะ requirement งอกออกมา ( การทำเว็บใหญ่แล้ว requirement เพิ่มขึ้นไม่แปลก มันเป็นกฎซะด้วยซ้ำ )

ในขณะที่การจ้างทำโปรเจ็คใหญ่โดยที่ตัวลูกค้าเองนั้นมีเพียงไอเดีย และไม่มี business ที่เป็นจุดแข็งอยู่แล้วและต้องการนำ internet มาต่อยอด โครงการจะเจ๊งทุกรายครับ

เว็บไซต์เหมือนองค์กร ต้องพัฒนาต่อเนื่อง ต้องรื้อและทำใหม่ ไม่สามารถทำครั้งเดียวเสร็จ

Business Model ที่ให้คนอื่นสร้างให้ยากที่จะประสบความสำเร็จได้ครับ เพราะ IDEA นั้นไม่สำคัญ แต่สำคัญที่ Implementation ต่างหาก ( วาทะ Guy Kawasaki ข้อ 8 ) หลายอย่างเกิดขึ้นโดยความบังเอิญ เช่นใครจะรู้ว่า Flickr ไม่ได้ต้องการเป็นเว็บ community ด้านรูปภาพ แต่กำเนิดจากการตั้งใจจะทำเกมส์ต่างหาก แต่ฟังก์ชั่นเก็บรูปได้รับความนิยมมากจึงถูกพัฒนาขึ้นมา (อ้างอิง @Jakrapong)

การทำเว็บไซต์ขนาดใหญ่จึงไม่เหมาะแก่การจ้างเป็นโปรเจ็คสำเร็จรูป

การ implementation สำคัญเพราะเราจะไม่มีทางรู้ภาพรวมเลยว่า เว็บเราจะได้รับความนิยมหรือไม่? user friendly ที่ดีมาจากการ research และรับ feedback จากลูกค้าไปเรื่อยๆ ปรับปรุงไปเรื่อยๆ แม้แต่ facebook ก็ยังปรับเปลี่ยนรูปแบบมาเรื่อยๆ ดังนั้นลักษณะการทำเว็บไซต์ขนาดใหญ่จึงไม่เหมาะแก่การจ้างเป็นโปรเจ็คสำเร็จรูป คุณอาจเถียงว่าเว็บราชการก็จ้างเป็นโปรเจ็คสำเร็จรูปนี่นา แต่ผมก็ถามกลับได้ว่ามีเว็บราชการไหนที่ Work และมีคนใช้จำนวนมากตั้งแต่การสร้างครั้งแรกเสร็จเรียบร้อยบ้าง?

แล้วจะแก้ไขหรือพัฒนาเว็บอย่างไรดี?

1. ธุรกิจของคุณ หรือตัวคุณต้องมีจุดแข็งสักอย่างก่อน

ค้นหาจุดแข็ง แล้วพัฒนาให้จุดแข็งของคุณนั้นสามารถที่จะต่อเชื่อมกับ Model Business ของคุณได้ อย่าเล็งผลเลิศจากการสร้างระบบออนไลน์เพียงอย่างเดียว กรีณีนี้ผมเคยเขียนไว้ในบล็อก One2Car ระบบต้องมาควบคู่กับการสร้างมาตรฐานการบริการ จะเห็นว่า one2car มีจุดแข็งที่”ช่างกล้องและการบริการจัดระเบียบถ่ายรูปรถ” และ การสร้างตลาด เริ่มด้วยการสร้าง Demand อาจง่ายกว่าเริ่มด้วยระบบ

2. ควรลงทุนกับพนักงานประจำเมื่อต้องทำโครงการใหญ่

ลองพิจารณาการทำโครงการให้ประสบความสำเร็จเพียง phase ที่ 1 อาจใช้ manday มากมายตั้งแต่ Art Director, System Analyst, Designer, Programmer ราคาก็แน่นอนว่าถ้าให้ถูกต้องตาม Business Model ของคนทำเว็บราคาน่าจะ 300,000 บาทขึ้นไปแน่นอนครับ และในจำนวน manday ที่แพงเหล่านี้ มีบางตำแหน่งที่เราใช้เค้าเพียงครั้งเดียวเช่น Art Diector ส่วนที่เราจะใช้ไปตลอดเพื่อปรับปรุงแก้ไขก็คือ Programmer

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

3. การจ้างงานเป็น phase

เพื่อแบ่งเบาภาระค่าใช้จ่าย และเกิดการดีลกับ Supplier ได้ง่ายขึ้น phase แรกควรเป็น phase แห่งการเรียนรู้ของคุณเอง ตัวอย่างที่ทำได้ง่ายมากเช่นการติดตั้ง blog เพื่อเพิ่มมูลค่าให้กับ domain name ของคุณเอง เป็นการตัดการเสียโอกาสในการรอเว็บไหญ่ที่ไม่รู้จะเกิดขึ้นหรือเปล่าด้วยการทำให้ website มีตัวตน ส่งผลด้าน SEO ที่ดี ณ วันที่ระบบใหญ่ถูกติดตั้ง

และเมื่อคุณได้ค้นคว้า Content ลึกลงไปใน keyword field ที่คุณเองต้องการทำธุรกิจ Community เล็กๆจะเกิดขึ้น และความเป็นตัวจริงของเราก็จะตามมาทั้งในมุมมองของคนภายนอก และตัวเราเองจริงๆครับ

ส่วน phase ต่อมาอาจเป็นการลง plugin สำเร็จรูปเพื่อทดลอง และหากลุ่มตัวอย่างหรือหน้าม้ามาอัด Content , การซื้อขายจำลองในเว็บไซต์เข้าไปเพื่อเรียก traffic ฯลฯ ก่อนจะรื้อและทำระบบที่ใกล้เคียงความต้องการมากขึ้นเรื่อยๆต่อไป ตามหลักการทำงานทางธุรกิจ เราควรจะลงทุนต่อยอดจากรายได้ที่เริ่มเข้ามา มากกว่าลงทุนตูมเดียวก้อนใหญ่ในครั้งแรก เพราะถ้า resource ไม่จำกัด model business ที่ถูกต้องจะไม่เกิด

สำหรับไทเกอร์ไอเดียนั้น มีให้บริการการทำงานสำหรับโปรเจ็คใหญ่ๆอยู่สองแบบครับคือ Design & CSS editting ซึ่งขั้นตอนนี้ทางทีมงานจะวิเคราะห์ Business Model ก่อนหาระบบและ System Architecture ที่เหมาะสมให้พร้อมทั้ง Design โดยใช้ประสบการณ์ของ Art Director อย่าง @iMenn เป็นผู้ design first draft ก่อนจะแจกจ่ายให้ Designer และให้ @rabbitinblack ซึ่งเป็นผู้เชียวชาญ CSS editting เป็นผู้ทำงานต่อจาก phase design ก่อนจะประสานงานกับ Programmer ฝั่งลูกค้าในการติดตั้งและ implementation ปรับปรุงต่อไปด้วยตนเองได้ ลองดูงานที่ผ่านมาใน http://www.ipattt.com/tag/tigeridea/
และ rate ราคาแบบ manday ของไทเกอร์ไอเดีย
อย่างไรก็ตาม ผู้เชี่ยวชาญด้าน Information Architecture ในไทยนั้นมีน้อยมากครับ ผมแนะนำ @malimali หรือที่ blog http://iamia.wordpress.com/

ตัวอย่างขั้นตอนการทำงานโครงการเว็บไซต์ขนาดใหญ่

1. Website WireFrame โดย @malimali team ร่วมกับลูกค้าเจ้าของไอเดีย
2. Web Design โดย TiGERiDEA
3. CSS Editing โดย TiGERiDEA
4. Systems Integration โดย in house ของลูกค้าเอง (ภายใต้การให้คำปรึกษาของไทเกอร์ไอเดีย)
5. Review and Improvement

สำหรับเว็บไซต์ที่ลูกค้าล้วนมี in house programmer อยู่แล้วและเคยทำงานร่วมกับ TiGERiDEA ได้แก่ Thailand YellowPages, Prakard Property , One2Car , digital2home และ painaidii

1. อย่าสับสนกับ “กฏสามคลิก”

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

ส่วนกฎสามคลิกที่พูดถึงนั้นมีความหมาย”คนละแบบกัน” คือถ้า User ไม่สามารถค้นหาข้อมูลได้เข้าใจภายในสามคลิก เขาจะละทิ้งเว็บนั้นไปเลย ดังนั้นอย่าเข้าใจผิดและพยายามทำให้คลิกน้อยแต่ทำให้การใช้งานง่ายและน่าคลิกหาสิ่งที่น่าสนใจจะตรงประเด็นมากกว่า

จำนวนคลิกที่มาก ไม่ได้มีความสัมพันธ์กับความที่ผู้ใช้สามารถพบสิ่งที่เค้าต้องการ

ที่มา user interface engineer

2. สร้างคอนเท้นท์ที่น่าอ่านในรูปแบบตัวอักษร F

จากผลการวิจัยวิธีอ่านของผู้ใช้เว็บ 50 คน พบว่า จุดที่ผู้ใช้เว็บสนใจมากที่สุดอยู่ที่มุมบนด้านซ้าย และกวาดตาเป็นรูปตัวอักษร F ดังนั้นเป็นสิ่งสำคัญที่ต้องรู้สำหรับ Copy writer และผู้วางคอนเท้นท์ที่สำคัญที่จะทำให้สื่อสารได้เร็วที่สุด

F shape pattern บริเวณสีแดงคือบริเวณที่ตาของผู้ใช้กวาดไปและให้ความสำคัญมากที่สุด

ผลการทดลองจาก AlertBox

google golden triangle

ผลการทดลองจาก Nielsen’s independent research

3. เร่งความเร็วเว็บไซต์ อย่าให้ผู้ใช้ต้องรอ

ผู้ใช้เว็บปัจจุบันเกลียดการรอคอยเนื่องจากมีทางเลือกเยอะแยะ มีผลการทดสอบด้านประสิทธิผลของเว็บกับเวลาในการรอคอยการแสดงผลด้วยเช่นกัน

Bing ได้ทำการทดสอบและพบว่า ถ้าเว็บไซต์แสดงผลช้าขึ้นเพียง 2วินาที จะทำให้ ความพึงพอใจผู้ใช้ลด 3.8% และทำให้สูญเสียรายได้ (revenue per user) 4.3% และลดการคลิกลง 4.3% ซึ่งในฐานะบริษัทอย่างไมโครซอฟท์ 4.5% หมายถึงกำไรหายไปหลายล้านดอลล่าห์เลยทีเดียว

ผลการทดลอง bing เวลาที่เพิ่มขึ้นทำให้กำไรหดหายชัดเจน

นอกจากนี้ Google ยังให้ความสำคัญกับ speed และอันดับของเว็บด้วยตามลิงก์ Google now factors page speed in their search ranking

สำหรับเรื่องความเร็วลองดู 15 เครื่องมือที่ทำให้พัฒนาหน้าเว็บที่เร็วขึ้น และลองใช้ CSS Sprites เพื่อทำให้ความเร็วมากขึ้น

4. ทำให้คอนเท้นท์อ่านง่าย มีตัวอักษรเท่าที่จำเป็น

มีผลการทดลองว่า คนส่วนใหญ่อ่านตัวอักษรบนหน้าเว็บเพียง 28% เท่านั้น และจะยิ่งอ่านน้อยลงไปอีกถ้ามีตัวอักษรมากกว่านั้น

เปอร์เซ็นของการอ่าน กับจำนวนตัวอักษร

ที่มา การทดลองโดย Dr Nielsen

ดังนั้น ถ้าอยากให้ผู้ชมเว็บอ่านทุกอย่างในเว็บ ต้องทำให้อ่านง่าย ไฮไลท์คีย์เวิร์ด ใช้ heading เขียนย่อหน้าให้สั้น และปรับปรุงลิสต์

5. การ scroll ไม่ได้ทำให้ผู้ใช้รำคาญการอ่านเว็บ

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

เปอร์เซ็นของการ scroll web ต่อความสูงของเว็บเป็น pixel จะเห็นว่าไม่มีความสัมพันธ์กัน

นอกจากนี้ยังมีผลการวิจัยอีกว่า ถ้าหน้าเพจด้านบนมี content อยู่น้อย จะสามารถดึงดูดให้ผู้ใช้ scroll เว็บลงมาด้านล่างเพื่อดูคอนเท้นท์อื่นๆได้ด้วย

ถ้าด้านบนของเว็บมีคอนเท้นท์น้อย จะสามารถดึงดูดให้ผู้ใช้เลื่อนลงมาดูด้านล่างได้

ที่มา Why we don’t worry about the fold : CXpartner

สิ่งที่จะสื่อในเรื่องนี้คือ ไม่จำเป็นต้องอัดสิ่งที่น่าสนใจไว้ด้านบนของเว็บทั้งหมดนั้นเอง

6. เอาของสำคัญไว้ด้านซ้าย

อันนี้ก็คล้ายๆกับ F shape ข้างต้นครับ มีผลการทดลองว่าคนจะใช้เวลาดูคอนเท้นท์ด้านซ้าย 69% ของการใช้เวลาทั้งหมด

บริเวณจำนวน pixel ที่ 300-400 นับจากด้านซ้ายของเว็บเพจจะใช้เวลาดูมากสุด

ที่มา Jakob Nielsen s Alertbox

อย่างไรก็ตาม ผลนี้ขึ้นอยู่กับภาษาที่ใช้ แต่ภาษาส่วนใหญ่ในโลกก็อ่านจากด้านซ้ายจึงเป็นการดีที่จะคำนึงด้านซ้ายไว้ก่อนครับ

7. พื้นที่ว่าง มีผลต่อการอ่านตัวอักษรและเวลาในการรับรู้ข้อความนั้น

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

ระยะวรรคและช่องไฟ มีผลต่อการอ่านได้เร็ว กับอ่านได้เข้าใจและรู้ประเด็น

ที่มา Software Usability Research Laboratory

ผลการวิจัยนี้ชี้ให้เห็นว่า ทุกยอ่างที่ประกอบกันเป็นเว็บ ทั้งระยะห่าง สีตัวอักษร เล้น มีผลต่อประสบการณ์การใช้งานของผู้ใช้ทั้งสิ้น บทความที่น่าสนใจเพิ่มเติมเช่นการเลือกใช้ฟ้อนท์ และการจัดการพื้นที่ว่างของเว็บที่ไม่ดี

8. รายละเอียดเล็กๆน้อย อาจสร้างความแตกต่างในการใช้งานได่้มาก

ในการทำเว็บใหญ่ๆ เรามักจะละเลยสิ่งเล็กน้อยในการใช้งานไป

มีเคสของการนำปุ่มออก และใส่คำอธิบายเกี่ยวกับ error ให้ชัดเจน เพื่อป้องกันปัญหา user error ในขั้นตอนเช็คเอ้าท์ ปรากฎว่าเว็บสามารถทำรายได้เพิ่มขึ้นถึง $300 ล้าน ซึ่งเพิ่มขึ้นถึง 45% จากยอดขายปกติในเดือนแรกที่มีการเปลี่ยนแปลง

แทนที่ error 404 ด้วยคำเช่น Sorry และให้คำแนะนำต่อผู้ใช้

ด้านบนคือผลการปรับปรุงเว็บโดย flowinteractive ซึ่งเปลี่ยนคำว่า Error occured: 404 – not found โดยใส่คำว่า “We’re sorry, we’ve had a problem processing your order. Your card hasn’t been charged yet. Please click checkout to try again.” ผลปรากฎว่า transaction รายเดือนสูงขึ้น

9. navigation ที่ดี สำคัญกว่าระบบ Search ในเว็บมาก

มีการทดสอบให้ทำ task test บนเว็บ และพบว่า 70% ของอาสาสมัครทำการคลิกลิงก์เพื่อทำภารกิจให้ลุล่วง มากกว่าจะไป Search ภายในเว็บ

นอกจากนี้ยังมีผลทดสอบจาก UIE ว่าผู้ใช้เว็บหากไม่สามารถหาลิงก์ไปถึงจุดที่เค้าต้องการในเว็บ เค้าจะไปพึ่ง Search engine ข้างนอกเว็บมากกว่า (และลูกค้ารายนั้นอาจจะหลุดไปเว็บอื่นเลย)

ผลสรุปก็คือ การจัดการคอนเท้นท์ให้ดีและหาง่าย มีโครงสร้างที่ดี ให้ผลที่ดีกว่าการไปพึ่งระบบ Search ภายในเว็บ

10. Homepage ไม่ได้สำคัญอย่างที่คุณคิดนะ

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

จากผลการวิเคราะห์ของ Gerry McGovern และ The decline of homepage แสดงให้เห็นว่า การเข้าไปยัง page อื่นของเว็บโดยผ่านหน้าแรกของเว็บนั้นลดลงอย่างมาก ในปี 2003 นั้นคนเข้าเว็บจากหน้าแรก 39% แต่ปัจจุบันเข้าหน้าแรกเพียง 2% ! โดยในปี 2009-2011 ลดลงถึงปีละครึ่งหนึ่ง

ข้อมูลนี้บอกได้ว่าปัจจุบันเรามีทางเข้าถึงข้อมูลโดยตรงมากมายทั้ง Search engine และ Social media ดังนั้นควรไปโฟกัสที่ landing page มากกว่า Home page จะได้ผลตอบแทนที่คุ้มค่ากว่ามากครับ

ช่วงโฆษณา

วงดนตรี งานแต่งงาน

หากเห็นว่าเป็นประโยชน์ โปรดให้กำลังใจด้วยการกด Like ที่หน้า facebook page ผมนะครับ

follow @ipattt

สำหรับงานดังกล่าวจัดพร้อมกันในหลายประเทศ โดยมีวิทยากรเข้าร่วมจากที่ต่างๆกัน เลยทำให้การเข้าร่วมของไทยกลายเป็นเวลา สี่ทุ่มถึงเจ็ดโมงเช้า -_-” เรียกว่าถ้าไม่อึดจริงก็คงจะแย่ แต่ @rabbitinblack ของเราอึดอยู่แล้วครับ

ภาพบรรยากาศ CSSsummit ที่บ้าน @iannnnn

ผู้บรรยายโชว์ css 3d animation มี Perspective ด้วย พวกเราประสานเสียง เหยดดด

ขนม นม เนย เพียบบ

heineken สนับสนุน ซะเมื่อไหร่

บรรยากาศการเสวนา จอ LCD ของ @iannnnn เจ๋งมาก

ความหวังของนักพัฒนาไทย อยู่ในมือเจ้าแล้ว

ผู้ให้กำลังใจ ไม่รู้ @iannnnn ไปตบมาจากไหน

ระบบการสัมมนาของ CSS Summit นั้นค่อนข้างดี โดยระบบทุกอย่างอยู่บนเว็บหมด

ตัวระบบมีปุ่มให้ยกมือถามได้ และนี่คือ Chat ด้านข้างของการเสวนา บิ๊กพูดภาษาไทยไปมีฝรั่งเล่นมุกตอบมา

สนุกสนาน

@rabbitinblack กำลังตั้งใจเต็มที่

รายละเอียดการทวิต CSS Summit ของ @Rabbitinblack และ @iannnnn

• RT @Rabbitinblack
• Now Start Session : CSS3 Transitions & Transforms #CSSSummit
• เว็บสำหรับแปลง CSS3 ใช้มี Prefix สำหรับทุก Browser http://j.mp/idJnxP
• Slide ของ CSS3 : Keyframe http://j.mp/r7at8X
• jQuery : เล่นแสงเงากันแบบนี้เลย http://j.mp/q5HdVC #WebinBlack
• http://bit.ly/qmCsXH Slide หัวข้อ CSS3 VS jQuery
• jQuery Validator http://t.co/5uNnBpI
• เมื่อนำ jQuery มาทำ animation กับ background ของเรา http://t.co/HwAhODJ #CSSSummit
• ใช้ CSS3 ทำเป็น Slot Machine http://t.co/z3EFzrX
• jQuery : ใช้สำหรับจัดเรียงกล่องข้อความ รูปภาพเราให้เป็นสัดส่วน ลองเข้าไปดูตัวอย่าง http://t.co/whJLQNa
• ใช้ CSS HTML มาเขียนเกมโดยไม่ต้องใช้ Script http://t.co/L0KPOxJ #CSSSummit
• หัวข้อต่อไป พูดถึงเรื่อง Sass เป็นการเขียน css ในรูปแบบใหม่ #csssummit
• ผู้บรรยายบอกว่า css เหมือนสำหรับ designer แต่ sass เหมือนสำหรับ developer #csssummit
• แต่ปัจจุบัน css นั้นเขียนโดย developer จึงมีการพัฒนา sass มาเพื่อตัว developer #csssummit
• อย่างเช่นใน css เราต้องการแก้สีแดงของเว็บ เราก็ต้องหาเพื่อแก้สีในทุกตัว แต่ sass แก้ปัญหาโดยการกำหนดตัวแปรเพื่อเก็บค่าสีนั้น #csssummit
• การเปลี่ยนแปลงค่าสี โดยใช้ % หรือใช้คำสั่งในการเปลี่ยนแปลงค่าสีที่ตัว sassมีมาให้ #csssummit
• สำหรับคนที่อยากลองเขียน sass สามารถลองใช้งานด้วย http://t.co/9qhpBWV ได้ #csssummit
• Slide สำหรับหัวข้อนี้ http://j.mp/ojBbMz #CSSSummit
• ที่ชอบสำหรับ sass คือ nested selectors เช่น .abc .def {} เราสามารถเขียนเป็น .abc { .def {}}
• แก้ปัญหา cross browser ของ css3 ตอนนี้ด้วย compass css3 http://t.co/02FMdkH #csssummit
• ระหว่างที่รอผู้บรรยายท่านต่อมา ก็ฟังเพลงที่เค้าเปิด และท่าประจำของพิธีกร http://twitpic.com/5wqmjb ชักจะชอบท่าประจำของแกแล้วดิ #CSSSummit
• หัวข้อต่อมาเป็นเรื่อง eCSStender #csssummit
• Slide สำหรับหัวข้อนี้ http://t.co/sHkZ70h css-ecsstender #csssummit
• หนังสือแนะนำเกี่ยวกับ Responsive Web Design http://j.mp/hAlGYp #CSSSummit
• จากที่ดู + ฟัง #CSSSummit มา 1 ในสิ่งที่หลาย ๆ ท่านให้ความสนใจจะเป็นเรื่องของ Media Queries ซึ่งก็เกี่ยวโยงกับ Responsive Web Design
• เว็บตัวอย่างของการที่รูปสามารถขยาย และย่อตามขนาดของหน้าต่าง http://j.mp/hbNhFs #CSSSummit
• และเว็บนี้ http://j.mp/4cJBCQ เป็นตัวอย่างของเว็บที่ขนาดวิดีโอย่อ ขยายตามขนาดของหน้าต่าง #CSSSummit
• เว็บนี้สำหรับแปลงจาก px ไปเป็น em http://j.mp/D6Jop #CSSSummit
• หัวข้อต่อไปที่กำลังจะบรรยายคือหัวข้อ CSS Tools #CSSSummit
• Slide สำหรับหัวข้อ CSS Tools นะครับ http://j.mp/nNWRfB #CSSSummit
• ข้อแนะนำสำหรับ CSS ไม่ควรมีขนาดเกิน 18 kB โดยประมาณ ด้วยเหตุของเวลาในการเรนเดอร์หน้าเว็บ #CSSSummit
• คำแนะนำของผู้บรรยาย สำหรับการเขียน CSS ที่บางคนเขียนออกมาแล้วมีการประกาศค่าที่ไม่เป็นระเบียบ คือการใช้ CSS Framework
• การมองโครงสร้างของเว็บที่เราจะเขียน CSS จะทำให้ CSS ของเราเป็นระเบียบ และลดการเขียน CSS ที่มันจะทับซ้อนกัน
• การตั้งชื่อ ID กับ Class ให้สั้นกระชับก็มีผลให้ขนาดของเว็บเล็กลง แต่บางครั้งการตั้งชื่อให้สั้นเกินไป ก็ทำให้การอ่าน Code เข้าใจลำบากขึ้น
• Code สำหรับเปลี่ยน PNG ให้กลายเป็น CSS http://j.mp/ejrMn7 #CSSSummit
• อีกอย่างคือ การที่เราแปลง PNG เป็น CSS แล้ว ไม่ควรให้ขนาดของ CSS มีขนาดใหญ่กว่า PNG ไม่อย่างนั้นก็ใช้ PNG ไปเถอะ
• A Fluid Grid Calculator : http://j.mp/imjUeI ใส่ค่าลงไป เว็บจะแปลงมาเป็น CSS ให้
• การ Validate CSS เป็นการช่วยเช็ค CSS ของเราว่าถูกต้องหรือเปล่า แต่ไม่ได้ช่วยให้มันมีขนาดเล็กลง ถ้าอยากให้มีขนาดเล็กลงให้ลองใช้ CSS Lint
• หัวข้อต่อไปเป็นเรื่อง CSS Performance #CSSSummit แหม ผู้บรรยายคนนี้หล่อเชียว 555
• Slide หัวข้อ CSS Performance นะครับ goo.gl/o40Zz #CSSSummit
• เว็บนี้ก็ให้อัพโหลดรูปไปเพื่อแปลงเป็น CSS : http://j.mp/j6kB6N #CSSSummit
• ตัวอย่าง Box Shadow 39 แบบ http://j.mp/hNAv4y #CSSSummit
• บทความเกี่ยวกับ Box Shadow http://j.mp/hZskIn #CSSSummit
• Flux Gallery http://j.mp/jAKwoi Gallery สวย ๆ แนะนำ
• http://j.mp/mCGrYf ส่วนอันนี้เป็น Slideshow Effect งามมาก
• Faster HTML and CSS: Layout Engine Internals for Web Developers http://t.co/jXigHV1 #CSSSummit
• ส่วนเว็บนี้ลองกดเมนูดู http://j.mp/eZrXiV #CSSSummit
• อยากให้ IE ใช้ CSS3 ได้เหรอ ลองอันนี้ http://j.mp/diwNVf #CSSSummit
• บทความแนะนำการเขียน CSS ให้มีประสิทธิภาพ http://j.mp/qofc7 #CSSSummit
• เปรียบเทียบว่า Browser เก่า ๆ เป็นทีวีขาวดำ Browser ใหม่ ๆ เป็น LCD จอ Wide เราไม่เห็นต้องทำให้มันมองเห็นเหมือนกันเลย
• หัวข้อสุดท้ายของงาน CSS & Pseudo Elements #CSSSummit
• Slide สำหรับหัวข้อสุดท้าย http://j.mp/qVxdKp CSS & Pseudo Elements #CSSSummit
• คนบรรยายคนสุดท้าย บรรยายอยู่ในโรงรถ เย้
• บทความเกี่ยวกับ Pseudo Elements http://j.mp/qXMfjf #CSSSummit
• การใส่ :before หรือ :after มันไม่ได้เกิดขึ้นนอก Elements แต่เป็นการเกิดขึ้นใน Elements #CSSSummit
• การใช้ :before :after อย่าใช้ในการใส่ content ให้กับ element เปล่า ๆ เพราะ search ต่าง ๆ จะไม่ได้เห็นข้อความที่เรากำหนดใน CSS นะ #CSSSummit
• สิ่งที่ใส่ใน content ได้นั้น มี 1.Text 2.Image 3.Attribute 4.Counter 5.ไม่ใส่อะไรลงไปเลย แต่เราไม่สามารถใส่เป็น tag html ได้ #CSSSummit
• @iannnnn สำหรับ Attribute ยกตัวอย่างคือ
• 123456
• แบบนี้ Output ก็จะออกไปเป็น 123456 แต่ถ้าเราเขียนใน CSS ว่า
• @iannnnn h1:before { content:attr(text); } Output ที่ออกมาก็จะกลายเป็น abc123456 แทน
• @iannnnn text อันนี้ไม่ได้แปลว่าข้อความ สงสัยกำหนดให้กำกวมไปหน่อย คือ ถ้าดูทวิตก่อนหน้านั้น จะเห็น tag h1 มี attribute ที่ชื่อ text อยู่อะ
• @iannnnn แต่ถ้าเราเขียน CSS ไปว่า
• ul {counter-reset:item;}
• ul li:before {content:counter(item) “.”; counter-increment:item;} เราก็จะได้ Output ออกมาเป็นแบบนี้ http://yfrog.com/h4g6cqqwj
• ซึ่ง CSS ธรรมดา พวก list-style ก็ออกมาแบบนี้ได้เหมือนกัน แต่ถ้าจำไม่ผิด ใน list-style มันไม่มีให้ออกมาเป็น 4a. ดังนั้นก็เปลี่ยนมา เขียน CSS แบบนี้ http://yfrog.com/h8lk3efj Output ที่เราได้ก็จะเป็นแบบนี้ http://yfrog.com/kkqn2wdj

ทวิต @iannnnn

• ขณะนี้ข้าพเจ้ากำลังดูสัมมนา CSS โลกครับ เขาจัดให้ชมออนไลน์แบบเสียตังค์ที่บ้าน โดยเจ้ามือคือ #TiGERiDEA @iPattt @warong @Rabbitinblack @iMenn
• @Rabbitinblack http://t.co/ZGMuKic สไลด์ของเจ๊ที่กำลังพูดอยู่ตอนนี้ #CSSsummit
• เว็บนี้เอาไว้พ่นโค้ด CSS3 ไล่สี แต่งเงา มุมมนสารพัดได้ โดยหน้าตาเครื่องมือเมือน Photoshop Layer เป๊ะๆ http://t.co/XyQbarZ #CSSsummit
• ในโลกมีฟอนต์เป็นแสนเป็นล้าน แต่ที่ใช้ในเว็บจริงๆ มีแค่ 5 ฟอนต์ ที่ Support ทุกแพลตฟอร์ม กากไหมครับ #CSSsummit
• แต่ถ้าว่ากันจริงๆ มีอยู่ 182 ฟอนต์ที่เรียกได้ว่าเป็น Web Safe Fonts (นั่นคือเปิดในเบราว์เซอร์วินโดวส์กะแมคได้ก็สบายใจได้หน่อยละ) #CSSsummit
• http://yfrog.com/khr4smmj ข่าวดีก็คือตั้งแต่ปี 2009 เป็นต้นมา เบราว์เซอร์ทุกยี่ห้อหลักๆ สนับสนุน web fonts แล้วครับ
• แล้วอะไรล่ะคือ web font? (คำว่า web font มีเว้นวรรคด้วยนะครับ) #CSSsummit
• #CSSsummit ดูสไลด์สดเรื่อง Web Typography ได้ที่นี่ครับ http://t.co/hFUVk1u (จริงๆ ต้องเสียตังค์ดูนะ แต่ไหนๆ ก็ไหนๆ แจกเลยดีกั่ว )
• ปัจจุบันนี้พวกเบราว์เซอร์บนมือถือเนี่ย สนับสนุน web font แบบ TTF/OTF เป็นมาตรฐานแล้ว สบายใจได้ ไม่ต้องเสียเวลามานั่ง Convert #CSSsummit
• #CSSsummit ปัจจัยพิจารณาในการใช้ Web font คือ ความเร็วเซิฟเวอร์(เพราะฟอนต์ไฟล์ใหญ่), ลิขสิทธิ์ฟอนต์, ข้อจำกัดในการแสดงผลหน้าจอเรา
• http://yfrog.com/kfazoimj การเลือกใช้ฟอนต์ให้เหมาะกับเว็บ #CSSsummit
• การเลือกใช้ฟอนต์ให้เหมาะกับสถานการณ์ #CSSsummit http://yfrog.com/kjcxdjhj (กูจะฆ่ามึงละน้า ♡)
• #CSSsummit เรื่อง web font จบแล้วจ้ะ สัมมนาออนไลน์นี้มีสองวัน ตั้งแต่สามทุ่มยันเจ็ดโมงเช้าตามเวลาประเทศไทย ครอกกกก ˘0˘
• ตอนนี้วิทยากร #CSSsummit กำลังเปิดหัวข้อเรื่อง Media Queries ครับ ว่าด้วยการตั้งค่า CSS ให้เปิดเว็บเราสวยในทุกอุปกรณ์ http://t.co/l9buZRs
• http://yfrog.com/hsxvioxj เหยด นี่คือรายชื่อคุณสมบัติที่สามารถกำหนด CSS เป็นแบบต่างๆ ได้ในอุปกรณ์พกพาครับ #CSSsummit
• มีคนถามใน #CSSsummit ว่าในอุปกรณ์พกพาเนี่ย ปุ่มสำหรับนิ้วกดควรใหญ่เท่าไหร่ มีคนตอบว่า 40px ครับ ส่วนอีกคนบอกว่ามาตรฐานที่แอปเปิลใช้คือ 44px
• พักเที่ยง 1 ชั่วโมงครับ (เที่ยงของฝรั่งนะ) #CSSsummit ส่วนคนไทยดึกแล้ว มีใครตามอ่านมั่งเปล่าวะ 555 ก็ดันไม่หื่นนี่นา
• เริ่ม #CSSsummit ภาคบ่าย(ของฝรั่ง)แล้วครับ สำหรับคนไทยคงไม่มีใครตื่นฟัง/อ่านแท็กนี้แล้วมั้ง 555 งวดนี้เป็นเรื่อง CSS Transition ครับ ยาก T-T
• #CSSsummit ปรากฏว่าเรื่อง CSS Transition นั้นไม่ยากเท่าไหร่ครับ นึกภาพตอน :hover เราก็บอกแค่ div:hover {scale(2);} มันก็ x2 จากขนาดเดิมละ
• #CSSsummit แต่ก็อย่างว่า ปัญหาที่ทุกเบราว์เซอร์ Support ไม่เท่ากัน ทำให้ต้องเขียน -browserprefix กันไว้ก่อนเพื่อรอสักวันจะได้เขียนเพียวๆซะที
• http://t.co/S8BWHHD เว็บเมพ ถ้าไม่รู้จะใส่ CSS Prefix ยังไงก็เขียนกลางๆ ไว้แล้วโยนโค้ดลงไป มันจะ gen prefix มาให้ทุกเบราว์เซอร์ล่ะ
• #CSSsummit ตอนนี้วิทยากรกำลังบรรยายเรื่องคุณสมบัติ CSS Transform แบบต่างๆ ครับ รอให้เขาปล่อย PDF ก่อนจะเอามาแจก 〈 ≥ .. ≤ 〉หาในกูเกิลก็ได้นะ
• จะบอกว่า เรื่อง CSS Transform เนี่ยไม่ยากครับ ใครมีพื้นการเขียน ActionScript Animation อะไรแนวนี้มาก่อน เห็นศัพท์แล้วจะเก็ตทันที #CSSsummit
• #CSSsummit วิทยากรที่กำลังบรรยาย กำลังสาธิตโดยใช้ Dreamweaver ครับ!!!! มีผู้ชมคนนึงบอกว่า “สวัสดีดรีมฯ ไม่ได้เจอกันนานแล้วนะ” 555
• ความมันส์มาถึงแล้วครับ #CSSsummit กำลังพูดเรื่อง CSS Transitions (เมื่อกี้ Transform เฉยๆ แต่อันนี้เริ่มวื้บๆ ละ)
• #CSSsummit ความเฮงซวยก็คือ เราต้องรอให้ชาวบ้านบ้านเราใช้ IE10 ขึ้นไปกันก่อนถึงจะสนุกกับ CSS Transitions ได้ .. ก็อีกสิบปีละมั้งครับ
• http://yfrog.com/h379549745j ตารางนี้บอกว่า CSS Properties ตัวไหนบ้างที่เอามา Animate ได้บ้าง #CSSSummit
• การเขียน CSS Transitions นั้นต้องประกาศคลุมไว้ก่อนครับว่าจะใช้กับ properties ไหนบ้าง ถ้าขี้เกียจก็ประกาศ all ไว้ก่อน แล้วค่อยเลือกจิ้มเอาได้
• ชอบตรงมันกำหนดเวลาเป็นหน่วยวินาทีได้ เป็นธรรมชาติมนุษย์ดี หลักการคือบอก CSS ว่าจะขยับอะไรเป็นเวลาเท่าไหร่ (หาศัพท์กันเอาเองนะ) #CSSsummit
• #CSSsummit เอา Transition มารวมกะ Media Queries เบรกที่แล้วแล้วจะโคตรเมพครับ นึกภาพตอนเราค่อยๆ ย่อขนาดเบราว์เซอร์ แล้ววัตถุข้างในก็ไหลวื้บๆ!
• #CSSsummit เหยด! มี transition-timing ด้วยครับ คือกำหนดค่าความหน่วง (ease:ความหยุ่นอะไรงี้) ได้ด้วย! นี่มัน ActionScript ชัดๆ
• http://yfrog.com/kf82ukaj เหยด นี่คือตัวอย่างโค้ดเวลาเอามาใช้ครับ ลองแกะไปเล่นหนุกๆ ได้นะ #CSSSummit
• #CSSsummit โดยปกติแล้วไอ้พวก Transition เนี่ยมันจะเกิดขึ้นทันที แต่เราสั่งดีเลย์มันได้ด้วยนะครับ (ดูโค้ดจากทวีตที่แล้ว)
• ตะกี้ @warong ชวนคุยเรื่อง”แล้วมันจะไม่ตีกับ jQuery เหรอ” เลยได้ข้อสรุปว่า CSS มันจบที่”ดีไซน์”ครับ ไม่รวมถึงพฤติกรรมแบบ Ajax ที่เกิดกะวัตถุ
• ดูตัวอย่างของ CSS Transitions ง่ายๆ แต่แม่งเจ๋งน้ำตาไหลที่นี่ครับ http://t.co/SuJfUfg เลื่อนไปดูตรง Footer นะ #CSSsummit
• แล้วยังมี pseudo-class ชื่อ :target ที่เอาไว้… เอาไว้ทำไรวะ ห่า รีบพูดจริงอีฝรั่งจรวด T-T ใครรู้ช่วยหน่อยครับ แบ่งๆ กัน #CSSsummit
• http://yfrog.com/gy57qfwj เหยด ทีนี้เป็น 3D Transform ครับ และนี่คือตาราง Browser Compatible (IE10 เหมือนเดิม)
• เรื่อง CSS Transform แบบ 3D นี่ไม่ไหวจริงๆ ครับ สมองไม่รับเลย แค่ดูจอก็จะอ้วกแล้ว ใครมาจ้างทำเราก็หาจ้างคนอื่นต่อละกัน -_- #CSSsummit
• #CSSsummit ต่อไป CSS Animation ครับ! กรุณาเปิดเพลงแสตมป์!
• (ในห้องตอนนี้) @Rabbitinblack: “โห CSS นี่มันเป็นศิลปะจริงๆ T-T” @warong: “ไม่ใช่หรอก เราย่อศิลปะลงมาเป็น CSS ต่างหาก” เหยดดดด #CSSsummit
• ไอ้เหี้ยยยยยยยย ใช้ CSS ทำกล่องเพจเกจ 3D หมุนได้ เป็น Perspective เหยดดดดดดดดดดด #CSSsummit (ตอนนี้เหยดพร้อมกันห้าคนเลยครับ)
• @iPattt http://twitpic.com/5w7l84 – บรรยากาศในห้อง(ฟัง)สัมมนา #CSSSummit ครับ ที่บ้านลาร์ทพลาเค้าท์
• วิทยากร #CSSsummit อีตา Greg แกพูดเกินเวลาครับ โดนดูดเสียงเลย 555
• http://yfrog.com/h33beaej หนึ่งคอมเมนต์จากผู้ชมชาวไทยครับ #CSSSummit
• พี่ @iPattt บอกว่าอยากไปเช่าที่ห้องประชุมแบบ CS Loxinfo แล้วเก็บตังค์คนเขาดู #CSSsummit จังเลย คือมันคุ้มค่าในการฟลัดไทม์ไลน์จริงๆ นะครับ
• ต่อไปเป็นเรื่อง KeyFrame Animation ครับ บรรยายโดยวิทยากรสาว คุณ Weyl #CSSsummit (วิทยากรวันนี้มีผู้หญิงกับผู้ชายเท่าๆ กันเลยครับ)
• ตอนนี้เจ๊วิทยากรกำลังสาธิตการทำ CSS Keyframe Animation ด้วยการ…​ทำเว็บที่มีหิมะโปรยปรายให้ดูครับ -..- นี่มันยุค พ.ศ.2544 รึไง!!!!
• ขอบคุณครับ สรุปโน้ตที่ทวีต #CSSsummit ไว้ “@cyberwakeup: @iannnnn คงได้เท่านี้ล่ะครับ นอนละครับ ง่วงกลิ้ง ล่ะ ครับ http://t.co/wSeEF82 ”
• #CSSsummit เรื่อง Keyframes ขอไม่เกาะละกันนะครับ เว้นไว้อีกเรื่องละกันเพราะมันยิบไป ดูไปจดไปไม่ทันจริงๆ หาอ่านเอาง่ายกว่าจ้ะ
• #CSSsummit เจ๊คนตะกี้เพิ่งจบครับ ที่เป็นเรื่อง Keyframe Animation (ไม่สนุก) ต่อไปเป็นเรื่อง W3c Conversions
• #CSSsummit ว่าด้วยเรื่องความสามารถใหม่และการปรับตัวเพื่อใช้ CSS3 (เช่น background-position เปลี่ยนเป็นระบุได้ 4 พิกัดงี้)
• #CSSsummit ใน CSS3 นั้นกำหนด background-repeat: repeat no-repeat; ได้ (ตัวแรกเป็นแกน x ตัวสองเป็นแกน y)
• #CSSsummit background-clip กำหนดการซ่อนขอบของ background(image) ได้ เช่นจะซ่อนตรงนอกขอบ ในขอบ หรือแสดงแค่ตรงตำแหน่งเนื้อหาก็ได้
• #CSSsummit background-size กำหนดค่าเป็น pixels หรือ percent ได้ แถมมี cover (เบียดเต็มขอบ) หรือจะ contain) แสดงเต็มภาพแบบร้านอัดรูป) ได้ด้วย
• #CSSsummit ถ้าจะใช้ background-size เป็น cover/content กับให้ตั้งความสูงเป็น 100% ด้วย
• #CSSsummit ความสามารถใหม่ ใส่ภาพพื้นหลังได้เยอะๆ → background-image: url(‘img1.jpg’), url(‘img2.jpg’); ระบุตำแหน่ง,การซ้ำ คั่นด้วยลูกน้ำได้
• #CSSsummit เราสามารถใส่ background ซ้อนกันได้หลายรูป,แบบ ทั้งรูปภาพ การไล่สี กำหนดพิกัดและการซ้ำเอาเองนะ
• #CSSsummit เรื่อง border ก็กำหนด border-radius ได้นั่นแหละ อันนี้รู้กันอยู่แล้ว
• http://yfrog.com/kkjp4yfj ใช้ความรู้เรื่องขอบใน CSS3 มาวาดรูปสามเหลี่ยมก็ได้นะ ดังภาพ #CSSSummit
• http://yfrog.com/kim43fij โห อันนี้เป็นการใส่ภาพลงไปแล้วยืดเป็นพื้นหลังของวัตถุพอดี #CSSSummit
• http://yfrog.com/h3cl8zgj โค้ดมึนหน่อย แต่นี่คือการกำหนดขอบภาพแบบล้ำ และสวยด้วยภาพ #CSSSummit
• #CSSsummit ต่อไป box-shadow: x y blur spread color; อันนี้คงได้ใช้กันบ่อยละ ประยุกต์ไว้ทำอะไรเรืองแสงได้สนุกดี
• #CSSsummit ถ้าเราใช้สีแบบ RGBA (มีความใสนิดนึง) แล้วเงาจะสวยสมจริงมากขึ้น เดี๋ยวเอาไว้ลอง
• #CSSsummit โอ๊ะ เขาบอกว่า box-shadow สามารถใส่หลายๆ ค่าในวัตถุก้อนเดียวกันได้โดยคั่นลูกน้ำครับ ประยุกต์ทำกรอบภาพหลายชั้นได้เลย! ยังไม่เคยลอง
• http://yfrog.com/h3wrlysj ตัวอย่างการใช้ box-shadow ซ้อนกันหลายชั้นเป็นกรอบรูปสวยมาก #CSSSummit
• ส่วนเรื่อง Alpha Mask นี่งงครับ พอเข้าใจคอนเซปต์จาก Photoshop นะ แต่เอาไว้จะใช้ค่อยอ่านอีกทีละกัน (ตัวอย่างของวิทยากรไม่ค่อยสวย) #CSSsummit
• #CSSsummit โอ้ จริงๆ เรื่อง CSS Image Mask นี่น่าสนใจมากๆ เลยนะครับ เอามาประยุกต์ทำอะไรแว้บๆ คล้ายๆ ภาพไอคอนเวกเตอร์เงาวาวๆ ได้เลย ไว้หาอ่าน
• http://yfrog.com/kk522hvj ตัวอย่างการเอาไอคอนสีเดียวมา mask กับฉากหลังไล่สี #CSSSummit
• #CSSsummit ต่อไปเป็นเรื่อง CSS Regions โดยสรุปคือการ Wrap ก้อนย่อหน้าตัวอักษรให้อยู่ในกรอบ shape ที่เราต้องการ ส่วน CSS Exclusions ก็ตรงข้าม
• #CSSsummit วิทยากรกำลังสาธิตการใช้งาน CSS Framework หลายๆ เจ้าครับ (ขอข้ามไปนะ) เท่าที่ดู ช่วงนี้สาระแน่นเอี้ยดมาก เสียดายที่เริ่มง่วงแล้ว
• ง่วงแล้ว นอนละครับ ทีแรกว่าจะอยู่ยันเช้า แต่เดี๋ยวทำงานไม่ไหว ขอบคุณที่ติดตามและไม่ติดตามแต่ทนรำคาญยามดึกไหวครับ 555 #CSSsummit
• สัมมนา #CSSSummit วันสุดท้ายเริ่มแล้วครับ ไม่รู้คืนนี้จะโต้รุ่งแบบเมื่อวานได้หรือเปล่า เพราะเมื่อเช้าได้นอนหน่อยเดียวเอง -_-
• เสียดายเปิด session แรกของคืนนี้เกือบไม่ทัน [การแก้ปัญหา CSS!!!] เพราะป้าวิทยากรแกพูดจะจบแล้ว งั้นดูนี่ละกัน http://t.co/wWp7WHm #CSSsummit
• #CSSsummit หัวข้อต่อไปเป็นเรื่อง CSS3+jQuery ครับ หากสนใจลองแว้บๆ มามองแท็กนี้เอาเด้อ
• #CSSsummit หัวข้อ jQuery+CSS3 กำลังมาครับ บรรยายโดยท่านเซียน @snookca (แค่ชื่อก็สนุกแล้วค่า)
• http://yfrog.com/gyggnbulj ภาพนี้เป็นตัวแทน jQuery+CSS บทที่หนึ่งครับ #CSSSummit
• #CSSsummit คุณสนุกเขาโชว์ Slot Machine ที่ทำจาก CSS+jQuery Animation ครับ เชิญชม http://t.co/a1UZiM2
• พอเข้าช่วง jQuery Animation แล้วลายตาครับ พื้นฐานไม่แน่น บรรยายต่อไม่ถูก งั้นขอนั่งดูภาพรวมไปละกัน T-T #CSSsummit
• อ้าว ไหงหัวข้อไม่ใช่การโกง CSS แล้วครับ แต่เป็นเรื่อง The Future of StyleSheet (ถึงว่าสิมันซ้ำกับป้าเมื่อสามทุ่ม สงสัยเขาขอสลับ) #CSSsummit
• #CSSsummit วิทยากรท่านนี้กำลังบรรยายสรรพคุณความเมพของ SASS ครับ http://t.co/ldoqTHS มันคือตัวเพิ่มพลัง CSS ให้มีตัวแปร, ฯลฯลฯ ได้
• #CSSsummit เขียน CSS แบบ Nested นี่เจ๋งจริงๆ ครับ แก้ความยุ่งยากได้เยอะเลย ทำไมเขาไม่ผลักให้เป็นมาตรฐานหว่
• #CSSsummit ต่อไปเป็นเรื่อง CSS & eCSStender ครับ พอเข้าโหมดโปรแกรมเมอร์ 3 คาบติดๆ กันผมก็เริ่มง่วงแล้ว สงสัยคืนนี้ไม่ไหวจริงๆ T-T เตรียมนอน

ขอแถมทวิต @warong ด้วยครับ

• http://t.co/bIlQzeE ลองดูครับว่า css3 มันงามงดแค่ไหน #csssummit
• ผมว่าพลังอย่างนึงของ CSS3 น่าจะเป็นการทำให้ขั้นตอนการทำเว็บสามารถเป็นไปได้โดยไม่ต้องพึ่งพาแรงงาน Photoshop ในการทำให้ดีไซน์ปรากฏเป็นรูปร่าง
• พลังอีกอย่างของ CSS3 น่าจะสนับสนุนพลังการทำธีมกึ่งสำเร็จรูปมากขึ้น ทำให้การผู้ผลิตธีมสามารถสร้างธีม Customize ได้เองทรงพลังกว่าเดิม
• หาก CSS3 ไปได้ไกลและมี Browser รับรองมากกว่านี้ แรงงาน Photoshop จะจำเป็นน้อยลงในการทำเว็บ โปรแกรมเมอร์อาจทำเว็บได้เอง ดีไซเนอร์จะลดแรงงานลง

สภาพกลืนไม่เข้าคายไม่ออกเมื่อโปรเจ็คไม่จบสักทีและไม่มีเงินมาทำต่อ

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

อย่างไรก็ตามเว็บองค์กรจะมี Mind set ที่ต้องการทำจบแล้วจบเลยอยู่ แต่เราสามารถนำวิธีคิดเบื้องต้นไป Convince ให้ลูกค้าเปลี่ยนเป็นเว็บรายเดือนแทนครับ ไทเกอร์ไอเดียมีความตั้งใจในการทำเว็บรายเดือนมาระยะหนึ่งจากบล็อก Rate ราคา manday ไทเกอร์ไอเดียที่เขียนมาระยะหนึ่งและเมื่อมีลูกค้ารายใหม่เข้ามา ผมจะส่งให้ลูกค้าดูก่อนเสมอ และตัวอย่างลูกค้าบริษัทใหญ่ (แต่เว็บไม่ใหญ่) อย่าง SCG ได้ทำมาแล้ว

ปัญหาของการทำเว็บแบบเหมาโปรเจ็คคือคาดเวลาจบงานได้ยากในทางปฎิบัติ

ที่ผ่านมาคนที่รับทำเว็บไซต์หรือระบบต่างๆน่าจะเคยประสบปัญหากันคือเรื่อง cash flow หรือกระแสเงินสดครับ เนื่องจากการทำเว็บบางทีไม่สามารถกำหนดวันเสร็จได้อย่างชัดเจนเหมือนกับงานสิ่งพิมพ์หรืองาน presentation เพราะเว็บเปรียบเสมือนองค์กรที่ต้องมีการปรับปรุงแก้ไขให้มีชีวิตอยู่ตลอดเวลา ดังนั้นการวางแผนกระแสเงินสดในบริษัทจะทำใด้ยากและมักมีปัญหาตามมา

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

การทำเว็บรายเดือน สามารถแก้ไขปัญหานี้ได้

เมื่อลูกค้ามีความต้องการมากขึ้นในภายหลัง หรือพูดง่ายๆว่า requirement เพิ่มเติมในภายหลัง หนทางที่ fair ที่สุดในการดีลงานคือเค้าควรจะจ่ายเพิ่มให้เราด้วยเช่นกันครับ ดังนั้นการทำเว็บรายเดือนจึงตอบปัญหาในจุดนี้ได้และการ์ตูนล้อ Web Designer ตัวนี้คงไม่เจ็บปวดขนาดนั้นเพราะ designer อย่างน้อยยังได้เงินตลอด ข้อแลกเปลี่ยนคือ การทำงานของบริษัทที่รับทำเว็บรายเดือน ต้องมีแผนการทำงานที่ชัดเจนและต้องสามารถทำได้ตามแผนนั้น หากลูกค้ามีความต้องการที่จะจ่ายน้อยและงานเสร็จเร็ว ตัวลูกค้าเองต้องมีความชัดเจนตั้งแต่แรก แต่หากลูกค้าไม่ชัดเจน เค้าสามารถจ่ายเพิ่มภายหลังได้เช่นกันเพื่อพัฒนาเว็บจนกว่าเค้าจะพอใจครับ

สำหรับกรณี SCG ทั้งสองเว็บที่ทำอยู่ ลูกค้าเลยเตรียมตัวเรื่องข้อมูลกันดีมากๆเพราะไม่อยากเสียเวลาไปกับการตัดสินใจระหว่างการทำเอง เพราะถ้าลูกค้าตัดสินใจนาน ผลเสียจะตกอยู่ที่ลูกค้าเองตรงที่เวลา Man day นั้นเดินไปเรื่อยๆครับ

ทำอย่างไรลูกค้าจึงจะตัดสินใจเลือกทำเว็บรายเดือน ?

อันดับแรกคือ เว็บรายเดือนมีสิทธิที่จะจบงานได้ด้วยราคาที่ถูก

สาเหตเพราะเราไม่ต้องคิดเผื่อ ต้นทุนความเสี่ยงจากการทำงานที่ไม่เสร็จสักที กับต้นทุนการหมุนกระแสเงินสดครับ ทำให้คิดราคาได้ถูกลงมากโดยสามารถคิดได้จากค่าแรงของพนักงานคูณกับตัวแปรด้านโสหุ้ยตรงๆนั่นเอง สมมติว่าทำเว็บรายเดือนๆละ 30,000 บาท ถ้าสามารถทำให้จบได้ในเดือนเดียวก็จะมีราคาเพียง 30,000 บาทเท่านั้น

ตัวอย่าง (จริงๆ) ที่กำลังทำอยู่ขณะนี้คือลูกค้าบริษัทมหาชนเจ้าหนึ่งต้องการทำเว็บให้องค์กรมหาชนของเขา ซึ่งมีเว็บ cataloque อยู่ด้วย ( เว็บนี้ซับซ้อนกว่าของ SCG ) จึงให้หัวหน้าฝ่าย IT ติดต่อทาง TiGERiDEA เพื่อประเมินราคาร่วมกับบริษัทอื่นๆ ในครั้งแรกผมเองได้เสนอ Solution เว็บรายเดือนไปแต่ทางบริษัทยังยอมรับได้ยากเพราะผู้บริหารใช้เหตผลที่ว่า ” บริษัทของเขาจะแน่ใจได้อย่างไรว่าเราจะทำเสร็จตามกำหนดจริงๆภายใต้คุณภาพที่เขาพอใจ” ดังนั้นผมจึงเสนอไปสองราคาดังนี้ครับ

• Quotation ตัวที่ 1 เสนอราคาเหมาทั้งโปรเจ็คที่ 300,000 บาท ใช้เวลาทำงานไม่เกิน 3 เดือน
• Quotation ตัวที่ 2 เสนอราคารายเดือน เดือนละ 40,000 บาท ใช้เวลาทำงานตาม requirement ประมาณให้ 4 เดือน ( รวมสี่เดือน 160,000 บาท )

จากราคาทำให้ Quotation ตัวที่ 2 มีความโดดเด่นเหนือบริษัทที่มาร่วม pitch งานด้วยกันอย่างมากและราคาถูกกว่า Quotation ตัวที่ 1 ครึ่งหนึ่งเลยทีเดียวครับ ทำให้ทีมงานต้องกลับมาพิจารณา ถึงแม้งานจะยังไม่เสร็จ ก็ไม่น่าจะเลทเกิน 1 เดือนรวมแล้ว 200,000 และเมื่อดูความคุ้มค่าแล้วจึงตัดสินใจทำเว็บด้วย Quotation ตัวที่สอง

อันดับที่สอง ทำอย่างไรจะให้ลูกค้าแน่ใจว่าเราจะทำเสร็จจริงๆ

ตัวอย่างแผนอย่างง่ายที่ @muenue วางให้ลูกค้า

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

• Wireframe หรือโครงร่างหลักของเว็บ เป็นขั้นตอนการรวบรวมลำดับความสำคัญในการนำเสนอเว็บไซต์ ตัว wireframe จะไม่มีสีสันใดๆมารบกวนทำให้การมองโครงสร้างของเว็บและ User interface นั้นตรงไปตรงมามากขึ้น สำหรับเว็บองค์กรโดยทั่วไปอาจใช้เวลาไม่ถึงเดือน แต่ถ้าเป็นเว็บ e-commerce หรือเว็บ social deal อาจจะใช้เวลานานมากหลายเดือนถ้าลูกค้ายังไม่ชัดเจนเรื่อง function การทำงานในแต่ละหน้า
• Design ทำการ design mood and tone ตาม requirement และ reference ของลุกค้า ผมมีข้อแนะนำว่าอย่าใช้วิธีคิดเชิง Agency มากเกินไปในการดีไซน์เว็บเพราะเว็บมีความ Dynamics มากกว่าสื่อสิ่งพิมพ์หรือ presentation ที่เราสามารถกำหนด environment ได้ โดยของไทเกอร์ไอเดียจะดีไซน์หน้าแรกก่อน เมื่อ Approve แล้วจึงเริ่มดีไซน์หน้าต่อไป
• จากนั้นจึงเป็นขั้นตอน Architecture ตัด CSS , HTML, testing ฯลฯ ตามลำดับซึ่งแล้วแต่นโยบายการเผื่อ Man day ของแต่ละบริษัทครับ

เว็บรายเดือน กับการเผื่อเวลา error และ delay

การวางแผนข้างต้นควรมีเผื่อเวลา Approve กับลูกค้าไว้ด้วยครับ( แล้วแต่ policy ) โดยอาจบอกลูกค้าไว้ก่อนว่าใช้เวลา Approve ไม่เกิน 1 วันและเราทำเสร็จก่อนหน้านั้น ของไทเกอร์ไอเดียเองช่วงเวลาทั้งหมดที่ Plan ไว้กับการดีไซน์จะเผื่อแก้ไขด้วยประมาณ 2-3 revision แต่ถ้าหากลูกค้าจะแก้เกินกว่านั้น ทางเราจะบอกลูกค้าว่าการแก้ไขจะกระทบเวลารวมของโปรเจ็ค และลูกค้าอาจต้องจ่ายเงินซื้อเวลาเพิ่มเติมในเดือนต่อไปครับ

เว็บรายเดือนกับความเข้าใจเรื่อง Man day เป็นเรื่องสำคัญ : กรณีศึกษาที่ล้มเหลว

ในช่วงแรกๆที่ไทเกอร์ทำงานแบบรายเดือน (ประมาณปีก่อน) ก็มีลูกค้าไม่พอใจอยู่บ้างเช่นกันถึงขั้นทางไทเกอร์คืนเงินลูกค้า ซึ่งความผิดพลาดของไทเกอร์คือการวางแผนที่ไม่ได้เผื่อเวลา error และเมื่อมีการแก้ไขทำให้ทำงานไม่ได้ตามแผน นอกจากนี้ Customer support ของไทเกอร์ยังไม่มีมาตรฐานเพียงพอที่จะ Service ได้อย่างใจลูกค้าในขณะนั้น

ในแง่ลูกค้าหากลูกค้าไม่เข้าใจเรื่อง Man day ก็อาจมีปัญหาเช่นกัน ลูกค้าหลายเจ้าอยู่บริษัทใหญ่ที่มี Agency ซึ่งได้ Agency fee หลายแสนหลายล้านบาทต่อเดือนและมีการบริการที่ดีมากเนื่องจาก Agency เหล่านั้นได้บวก Man day ไว้ใน Agency Fee แล้ว แต่พอมาทำเว็บราคาไม่แพงก็ยังต้องการบริการแบบเดียวกันเช่นกันทำให้บางคน โทรศัพท์หา AE ของไทเกอร์ทั้งวัน หรือใช้เวลาตอบเมล์แบบลงดีเทลลึกมากโดย AE ต้องใช้เวลาตอบเมล์นึงถึงครึ่งวัน ดังนั้นหากพบลูกค้าดังกล่าวทางบริษัทควรทำ Package การบริการที่ต่างกันให้เลือกตั้งแต่แรก และการจัด package จะทำให้ลูกค้าเข้าใจโดยธรรมชาติครับ

ตัวอย่างการจัด Package ให้ลูกค้าแบบทำแล้วจบงานเลย

• Package ที่ 1 ทำงานเดือนละ 25,000 ต่อเดือน ตาม requirement เริ่มแรก น่าจะทำเสร็จใน 4 เดือน และโทรศัพท์ติดต่อได้ในวันธรรมดาเวลา 13:00-14:30 เท่านั้น
• Package ที่ 2 ทำงานเดือนละ 40000 บาทต่อเดือน (โปรเจ็คเดียวกัน) ตาม requirement เริ่มแรก น่าจะทำเสร็จใน 2 เดือน โทรศัพท์ติดต่อได้ทั้งวัน เป็นต้น

ซึ่งลูกค้าเห็นราคาแล้วจะเข้าใจทันทีว่า ที่ Package ที่ 1 ราคาถูกกว่าเพราะเราจัด Man day ให้โปรเจ็คน้อยกว่าจึงทำให้เสร็จช้ากว่า

ตัวอย่างการจัด Package ให้ลูกค้าแบบทำเว็บเสร็จบริหาร Content ต่อ

• เดือนที่ 1-2 Wireframe and Design
• เดือนที่ 3 CSS HTML
• เดือนที่ 4 – 12 Blog and Social Media implementation

โปรเจ็คใหญ่มากก็สามารถคิดแบบรายเดือนได้

โปรเจ็คประเภทเว็บ System หรือ Social Commerce ขนาดใหญ่ก็สามารถทำเว็บรายเดือนได้เช่นกัน โดยเป็นลักษณะการจัดสรร Resource ตาม Rate Card ที่ลูกค้าซื้อครับ ลองดูที่ Rate ราคา manday ไทเกอร์ไอเดีย ด้านล่างสมมติว่าลูกค้าซื้อเวลาทั้งหมด 60000 บาทต่อเดือน จะสามารถจัดสรร System Analyst, Programmer, Art Director ลงไปได้ตามส่วนครับ และเดือนต่อๆไปก็สามารถนำเวลาทั้ง 60000 บาทไปลงกับ Content Copywriter แทนได้เช่นกัน

ทำไมผมถึงนำวิธีการทำเว็บรายเดือนมาแชร์ ?

เพราะว่าผมเองคิดว่า วิธีการทำงานแบบนี้มีประสิทธิภาพที่สูงกว่า และเป็นธรรมกับทุกฝ่ายทั้งลูกค้าและบริษัททำเว็บครับ Business การทำเว็บและการบริหารข้อมูล เป็น Business แบบพิเศษจริงๆ การทำงานแบบดั้งเดิมเองผมคิดว่าเป็นวิธีที่ไม่ค่อยเหมาะสมกับงานที่ Dynamics และต้องก้าวไปข้างหน้าตลอดเวลาของเว็บไซต์ เลยอยากให้เพื่อนๆบริษัททำเว็บและฟรีแลนส์ ลองพิจารณาดูเพื่อร่วมสร้างมาตรฐานใหม่กันครับ

การทำเว็บไซต์กลุ่มผลิตภัณฑ์กระดาษของ SCG ถือว่าเป็นมิติใหม่ของการทำเว็บองค์กร

เว็บไซต์ SCG TUPI คลิกที่รูปเข้าชมเว็บ

ที่ต้องยก case study เรื่องนี้มาเพราะว่าต้องถือว่าการดีลทำเว็บไซต์ที่ไม่ซับซ้อนให้แก่องค์กรขนาดใหญ่ที่มีมาตรฐานสูงอย่าง SCG ด้วยโปรเจ็ครายเดือน และราคาที่ถือว่า “ต่ำมากสำหรับเว็บในองค์กรระดับนี้” ( ประมาณ 80,000 บาท ) และยังถือว่า “ทำเสร็จได้เร็ว” ต้องถือว่าเป็นมิติใหม่จริงๆในหลายเรื่องครับ ต้องยอมรับทีมงานและผู้บริหารที่เปิดกว้างในเรื่องนี้อย่างมากในหลายเรื่องเช่นกัน

• มีการเตรียมความพร้อมด้านเนื้อหาอย่างสมบูรณ์มากก่อน Kick off project ทีมงานแบ่ง text และรูปลง folder ที่ตั้งชื่อตามเมนูของ site map อย่างชัดเจนก่อนส่งให้ TiGERiDEA
• ด้านการดีไซน์ มีการดีไซน์คร่าวๆผ่าน powerpoint เพื่อให้ผู้บริหารอนุมัติ mood and tone ก่อน 1 ครั้ง ก่อนที่จะส่งให้ TIGERiDEA ดีไซน์
• เปิดโอกาสให้ TIGERiDEA ได้ใช้ hosting นอกองค์กรที่มีสเป็คที่เปิดกว้างกว่า และใช้ WordPress ในการบริหารข้อมูลทั้งหมด

ลูกค้าประทับใจในวิธีการทำงานแบบเว็บรายเดือน

ขออนุญาต โฆษณาบริษัทเล็กน้อยด้วยคลิปรีวิวนี้ครับ

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

คุณสัญญา คุณากร พรีเซ้นเตอร์ TMB

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

TIGERiDEA เองก็มีโอกาสได้ทำโปรเจ็ค TMB ในช่วง Rebranding นี้พอดีเช่นกัน โดยการดีไซน์เว็บในส่วนหนึ่งของคุณเม่นถือได้ว่า “นำร่อง” หรือทำก่อนโมดูลอื่นๆอยู่เป็นระยะหนึ่ง และมีการปรับให้เข้ากับเว็บใหญ่ระหว่างที่ทำครับ ถึงแม้ว่าการจบโปรเจ็คจะยากพอสมควรแต่ก็จะได้เล่าในโอกาสต่อไป

template module by TiGERiDEA

สำหรับเว็บ tmb เอง การใช้ชื่อ tmbbank.com ก็ถือว่าเป็นการตัดสินใจที่ดี ธนาคารทหารไทยตั้งมาโดยจอมพลสฤษดิ์ซึ่งมีประวัติที่น่าสนใจ โดยเบื้องต้นเป็นธนาคารที่ตั้งเพื่ออำนวยความสะดวกในการให้บริหารทางการเงินแก่หน่วยงานทหาร ต่อมาจึงได้ขยายเป็นธนาคารรองรับลูกค้ามาตรฐาน

ด้านล่างเป็นหน้าเว็บ TMB ปัจจุบัน มีหลายคนได้ลองไปใช้ ebanking ของ TMB ก็มีคนชอบพอสมควรเลยนะครับ

หน้าเว็บ TMB ปัจจุบัน

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

แคมเปญ TMB Social Marketing

“Make THE Difference – พลังในตัวคุณ เปลี่ยนโลกให้ดีขึ้น”

ตามที่ผมได้ศึกษามา TMB ขยายแนวคิดมาจาก key หลักคือ “Make THE Difference – พลังในตัวคุณ เปลี่ยนโลกให้ดีขึ้น” และแนวคิดการบริหารโดยลูกค้าเป็นศูนย์กลางหรือ ” Cutomer Centric” ทำให้ธนาคารต้องพยายามจะสร้างความแตกต่างในทุกอย่างที่ลูกค้าได้เข้าไปสัมผัส

Theme : การนำเสนอของธนาคารเป็นการสร้างแรงบันดาลใจในการ กล้าที่จะคิดและทำสิ่งที่ แตกต่าง สู่การเปลี่ยนแปลงที่ยิ่งใหญ่ และหลุดออกจากกรอบของความคิด เปลี่ยนคำว่าเป็นไปไม่ได้ ให้มีแต่คำว่า เป็นไปได้ อยู่เสมอ จากจุดเปลี่ยนความคิดเพียงเท่านี้ ทุกคนก็จะสามารถเปลี่ยนโลกไปในทางที่ดีขึ้นได้

การพยายามสร้างความแตกต่างสื่อลงไปในโฆษณาด้วย เช่นโฆษณาที่ต้องดูด้วยแว่น 3D

นำเสนอเว็บ makeTHEdifference.org

จากความคิดเบื้องต้น เนื่องจากธนาคารเองไม่สามารถทำได้ในเว็บที่เป็นทางการของธนาคาร เลยพยายามนำเสนอเว็บ www.makeTHEdifference.org และสร้าง campaign ให้คนแชร์เรื่องราวของนักบอลกลุ่มนี้ (หลายๆคนคงเคยเห็นบนทีวีใน BTS) ให้มากสุด ใครแชร์มากสุดได้รางวัล ( รับตั๋วบินรอบโลก มูลค่า 500,000 บาท หมดเขต 31 มีนาคม นี้ ) แน่นอนว่าการตลาดเป็นแบบ Intrusive พอควรครับ แต่ก็ขึ้นกับการตัดสินใจของผู้บริโภคกับเพื่อนๆของผู้บริโภคนะ

กิจกรรมบน fanpage และ twitter

มี fanpage แชร์เรื่องราวที่สร้างแรงบันดาลใจ และคำคมต่างๆ ที่ http://www.facebook.com/TMBMakeTHEDifference และยังมีกิจกรรมร่วมรับรางวัลจากเมเจอร์ซีนีเพล็คถ้า RT @TMB_MTD อีกด้วย และปิดท้ายด้วย hashtag ยาววว อย่าง #MakeTHEDifference ซึ่งถ้าทวีตโดยมี hashtag นี้ก็ยังมีรางวัลให้วันละ 3 รางวัลอีกด้วย

@TMB_MTD แจกรางวัลด้วยแฮะ ลองเซิร์ทดูครับ

VDO บน YouTube และรูปบน Flickr

VDO ตัวนี้เป็น series ให้คนติดตามครับ ดูแล้วบางคนก็เกิดความรู้สึกที่ดีได้เช่นกัน ( ในแบบไทยๆนะ ) ซึ่งส่วนตัวผมคิดว่าบางทีจะตอบโจทย์กลุ่มเป้าหมายที่พอมีอายุนิดหน่อย แต่ทุกครั้งที่ฉายคนก็ดูสนใจดีแบบไม่ถูกกระตุ้นให้เหนื่อยมากเกินไป

ตอนที่1 ปั้นฝัน

ตอนที่2 ปลุกพลัง

ตอนที่3 เป็นไปได้

ตอนที่ 4 เปลี่ยนโลก

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

และยังมีช่องทาง Flickr สำหรับคนอยากดูหรือโหลดรูปได้ด้วย ถึงแม้ว่า Flickr จะไม่ถึงกับได้รับความนิยมมากในไทยแต่ก็เรียกว่าทำไว้ครอบคลุมทั้งหมดได้ดีครับ http://www.flickr.com/tmbmakethedifference

บทสรุป TMB แคมเปญครั้งนี้

การพัฒนาองค์กรและภาพลักษณืระดับนี้ค่อนข้างจำเป็นที่จะต้องพัฒนาหลายๆส่วนพร้อมกัน รวมทั้งองค์กรภายในด้วย ( ซึ่งองค์กรภายในน่าจะทำได้ยากกว่ามาก ) ในส่วนของการทำ Campaign นั้นมีพื้นฐานวิธีคิดจากเอเจนซี่ในแบบคลาสสิคและมีตัว Content หลักที่ไปในทางช่วยให้แรงบันดาลใจซึ่งค่อนข้างจัดว่า ” นุ่มนวล ” สำหรับสังคมไทย อาจทำให้การ Viral ไม่ถึงกับแรงมากในกลุ่มผู้ใช้ Social ทีเดียวนัก ( เพราะพวกนี้ถูกกระตุ้นทุกวันจนเริ่มชิน ) แต่น่าจะไป impact ในกลุ่มที่เสพสื่อกระแสหลักมากกว่า

ในส่วนของ Social Media นั้น ความจริงการใช้วิธีทาง Social ในลักษณะ intrusive มีกระแสวิพากย์วิจารณ์กันพอสมควรในช่วงที่ผ่านมาก แต่กระแสของ TMB ยังไม่ถึงกับแรงมาก ซึ่งก็แลกมาด้วยความนุ่มนวลของความรู้สึกของ influencer และอาจจะส่งผลต่อความรู้สึกดีของกลุ่มเป้าหมายได้บ้างครับ

การตลาดในยุคปัจจบันค่อนข้างซับซ้อนขึ้น ผู้บริโภคสื่อ Social เป็นผู้ที่แสดงความไม่พอใจได้ง่ายและ Sensitive มากขึ้น แต่จาก Campaign ที่ผ่านมาก็ยอมรับครับว่าธนาคารทหารไทยมีภาพลักษณ์ที่ต่างไปจากเดิมบ้างแล้ว

กดเข้าสู่เว็บไซต์ WPdevNight

หรือกดที่ หน้า FB WPdevNight ช่วย Like หน่อยนะจ๊ะ

ความเป็นมา

เรื่อง #WPdevNight เริ่มมาพร้อมๆกันระหว่างที่มี CrisisCamp ในช่วงที่มีวิฤติน้ำท่วม @iWhale เองอยากให้มีการ meeting WordPress หรือ meeting ” Blogger กู้โลก ” ในช่วงนั้นครับ ( เว่อร์ไปมะเนี่ย ) แต่ปัญหาคือ @iWhale กิจกรรมเยอะมากจนไม่มีเวลา ผมปรึกษา @iMenn แล้วคิดว่าน่าจะจัดเองเพราะ @iMenn ก็คิดอยากจัดอยู่เหมือนกัน จากนั้นทีมเราก็เริ่มหาสถานที่โดยน้อง @muenue วิ่งหาและส่วนใหญ่สถานที่จะมีค่าใช้จ่ายค่อนข้างสูงซึ่งไม่สามารถทำได้ถ้าไม่มีสปอนเซอร์ ประกอบกับคนใน TiGERiDEA เองก็ยุ่งกันทุกคน หรือจะให้ไปหมุนเงินเป็นแสนก็ไม่ไหวครับ ( คราวก่อนที่ @iWhale จัดนั้นหมุนเงินไปเป็นหลายแสนเพราะ Sponser บางรายโดยเฉพาะทางราชการต้องทำเรื่องหลายชั้นตอน )

ในที่สุด @imenn ก็คิดว่าอยากให้ตัวงานเกิดอะไรขึ้นมากกว่าที่จะไปนั่งฟังวิทยากรเฉยๆโดยน่าจะมีรูปแบบของการระดมสมอง งานจึงควรจะเริ่มที่ จำนวนคนไม่มาก เพราะแต่พอคิดอยากทำที่จำนวนคนไม่มาก ก็เลยคิดว่าหัวเรื่องที่จะร่วมกันทำมันก็น่าจะต้องจำกัดไม่ให้ Mass เกินไป เลยตัดสินใจเปลี่ยนจาก WordCamp มาเป็น WordPress Developer Day ก่อน ด้วยหัวข้อก็คิดว่าน่าจะทำให้ต้องมีคนที่พอมีผลงานอยู่บ้างมาร่วม Contribute ได้ครับ

ผมและ @muenue เลยไปติดต่อขอความอนุเคราะห์จากพี่จิรัฎฐ์ ( @Jitara ) และคุณจูน ซึ่งย้ายไปพัฒนาวาวีสาขาเอกมัยสาขาใหม่เอื่ยมอยู่ ( อย่าไปผิดนะครับ ท่องไว้ วาวีสาขา “เอกมัย” ไม่ใช่อารีย์เจ้าเก่านะ ) พี่จิรัฎฐ์และคุณจูนให้ความอนุเคราะสถานที่มาอย่างใจดีสุดๆ และผมคิดว่าน่าจะถือโอกาสให้คนที่ไปได้รู้จักกับวาวีสาขานี้เป็นทางอ้อมด้วยครับ สถานที่นั้นจัดว่าอบอุ่นทีเดียว ถ้ามีคนมาเกินอาจจะต้องยืนหรือผลัดกันนั่งบ้าง ด้วยน้ำจิตน้ำใจของชาว IT ก็เชื่อว่าคงไม่ลำบากจนเกินไปครับ

ส่วนที่เปลี่ยนจาก Day เป็น Night เพราะว่าจะได้ไปกินเบียร์แถวเอกมัยทองหล่อนวดต่อที่พระรามเก้ากัน เอ้ย  ไม่ใช่ ! เป็นเพราะว่าอยากจัดให้แปลกไปบ้าง และวาวีช่วงวันเสาร์กลางคืนก็คนจะลดลงนิดหน่อยทำให้รบกวนร้านน้อยลงครับ อีกอย่างเวลากลางคืนก็เป็นเวลาของชาว Developer กันอยู่แล้วนี่นะ

หลักการและเหตผล

WordPress เป็น CMS ที่มีชื่อเสียงมาระยะหนึ่งแล้ว ในยุคของ Social Media และยุคของการโฟกัสที่คอนเท้นท์นั้น WordPress เองมีจุดแข็งอยู่ที่ความง่ายในการที่ทุกคนจะบริหารสื่อของพวกเขาเองได้ ดังนั้นในฐานะผู้ร่วมจัดจึงต้องการสร้าง framework ของการร่วมแชร์ประสบการณ์และร่วมกันทำงานในเครือข่าย Developer ให้มากขึ้นเพื่อสนับสนุนโลกของ Publisher เหล่านั้น

ลองอ่าน WordPress ไม่ได้ใช้แค่ทำบล็อกนะสาดดดด!

รายละเอียดร้านกาแฟ วาวี สาขา เอกมัย

ด้านหน้าของวาวี สาขา Park land เอกมัย เดินจาก BTS เอกมัยได้ครับ ภาพโดยคุณ A จาก AC104 webmaster

ภายในไม่ใหญ่มาก ของวาวีเอกมัย ภาพโดยคุณ A จาก AC104 webmaster

ลองคลิกดูรูปเพิ่มเติม วาวี สาขาเอกมัย ได้ที่นี่

#WPdevNight

5 กพ 2554

เวลา 18:00น.

ณ #wawee #Akamai ( รับได้ 30 คนเท่านั้น )

“เอกมัย” นะคร้าบบบบ อย่าไปผิดที่ !

รายละเอียดเพิ่มเติมและแผนที่ดูที่เว็บ http://www.wpdevnight.com/

WPdevNight.com Credit

1. background จาก http://en.blog.wordpress.com/2009/12/22/holiday-wallpaper/

2. พยายามใช้ css3 สำหรับ Modern Browser

• gradient
• border radius
• drop shadow
• font face (ใช้ตัว Gen จาก http://www.fontsquirrel.com/fontface/generator )

3. font ที่ใช้เป็นเมนู และ heading เป็น font RSU ฟรี ! สวย ! ของ http://www2.rsu.ac.th/content.aspx?p=downloads-logo

4. ใช้ Theme Framework ซึ่งกำลังพัฒนาเพื่อแจกฟรีเร็วๆ นี้ ( พัฒนาโดย TiGER iDEA ร่วมกับ VaivaiSoft )

ปล. ธีมนี้เป็น Child Theme ของ Theme Framework ที่จะแจก และแจกฟรีในงานอีกเช่นกันจ้า !!

5. ออกแบบโดย @imenn ตัดโดย @rabbitinblack โค้ดโดย @warong จ้า

ประกาศรับสมัครงาน ทำงานแบบ Virtual Office ณ วันที่ 6 พย 2553

1. รับสมัคร พนักงาน Admin

- เพศ หญิง
- วุฒิ ปวส – ปริญญาตรี
- ประสบการณ์ 0-2 ปี
- มีความรู้ทางคอมพิวเตอร์และงานเอกสารทั่วไป
- มีความละเอียดรอบคอบ เป็นระเบียบ รับผิดชอบ
- มีความพยายามแก้ไขปัญหาได้ดี
- มีทักษะในการสื่อสารที่ดี

ลักษณะงาน จัดการด้านบัญชี, ออกเอกสาร, ทำโปรแกรมภาษี
เงินเดือน 7000 -10000 บาท

2. รับสมัคร AE

ตำแหน่งนี้ปิดรับสมัครแล้วครับ เหลือแต่ Admin ด้านบน
คุณสมบัติ

- จบปริญญาตรี
- มี Blog ส่วนตัวที่ Active หรือมี Account twitter ที่ Active
- มีความรับผิดชอบ มีความสามารถด้านการจัดระเบียบข้อมูล
- สามารถทำงานหลายชิ้นได้ดี คล่องตัว
- รักการเรียนรู้
- มีทักษะในการติดต่อสื่อสารที่ดี ชอบการติดต่อสื่อสาร ควบคุมอารมณ์ได้ดี
- เงินเดือน ตามความเหมาะสม

ลักษณะงาน ติดต่อลูกค้าและบริหารโครงการด้านเว็บไซต์ จัดการข้อมูลจากลูกค้า จัด Schedule การส่งมอบ ให้คำแนะนำลูกค้าด้าน Technics ต่างๆ

ข้อมูลเพิ่มเติมเกี่ยวกับบริษัท

- TiGERiDEA เป็นบริษัททำเว็บไซต์และโครงการระบบเว็บไซต์เป็นหลัก บริษัทกำลังย่างเข้าปีที่ 7
ดูโครงการต่างๆได้ที่ www.tigeridea.com , http://www.ipattt.com/tag/tigeridea/
- เป็นบริษัทขนาดเล็กก่อตั้งโดยคุณเม่น @iMenn บริหารงานทั่วไป,sale&marketing โดยผมเอง ( @iPattt ) และ R&D โดยคุณเม่น มีพนักงานทั้งหมด 5-6 คน
- อาจมีการทำงานในลักษณะ Virtual Office โดยผ่านระบบ internet จากบ้าน แต่สำหรับสถานที่ตั้งอยู่ตึกชาญอิสสระ 1 เดินทางสะดวกด้วย MRT สีลม
- มี Project Partner เช่นบริษัท Marvelic Engine ( @joomlacorner ) และ 7 Republic ( @hunt ) และ @warong
- เริ่มงาน พย. 2553 แต่อาจเข้ามาดูงานก่อน

ติดต่อสมัครงานโดยส่งประวัติ และ Portfolio ได้ที่ support[@]tigeridea.com ทางผมจะโทรนัดมาสัมภาษณ์ครับ และหากรับสมัครได้แล้วจะแจ้งให้ทราบใน Blog นี้ครับ