เทคนิคการทำเว็บ
เว็บนี้ใช้ระบบจัดการข้อมูลของ wordpress ครับ ซึ่งเป็น wordpress ทีมีการโมดิฟายด์อย่างอุตลุดโดยทีมงานไทเกอร์ไอเดียเลยทีเดียว
หน้าตาหลังบ้านของเว็บ ช่วยชาติ.com
ในหน้าโครงการ เป็นการใช้ custom fields เยอะมากเลยครับ เพราะตัดข้อมูลกันตามใจฉันเลย (เรื่อง Custom Field จริงๆ จะจัดระเบียบให้สวยกว่านี้ก็ได้ ด้วยปลั๊กอิน Custom Field Template
แต่ท่ันเม่นดันยุ่งเกินไป เลยยังไม่ได้ทำให้ )
custom field จำนวนมากสำหรับหน้าโครงการ
ระบบ Search ภายในเว็บนั้นไม่ธรรมดาด้วยปลั๊กอินของ WordPress ชื่อ Live Search Popup
ระบบ search ในเว็บไซท์มีไกด์ไลน์ให้
ระบบแสดงวีดีโอ โดย JW FLV
VDO รวดเร็วกว่า youtube สำหรับผู้อยู่ในไทย
ระบบช่วงเวลาดำเนินการ (Timeline) โดยใช้ SIMILE Widgets และมีการปรับแต่ง CSS โดยทั่นเม่น นอกจากนั้นยังมีการปรับแต่งการแสดงเนื้อหาและระบบวันที่ภาษาไทยรวมทั้งสร้างปุ่ม next/backโดยท่ันจ๋ง
timeline สำหรับเว็บช่วยชาติ
หน้า ประชาชนได้อะไร เขียนด้วย flash เอาใจคณะทำงานรัฐบาล 
โดยน้องปลาเทพ flash
หน้า ประชาชนได้อะไร ใช้ flash ครับ
จริงๆแล้วหน้านี้ มีการแบ่งลงไปถึงแต่ละจังหวัดด้วย แต่บังเอิญคณะทำงานรวบรวมข้อมูลได้ไม่พร้อมครับ (มีจังหวัด ชุมพร จังหวัดเดียวที่คลิกได้ลองทดสอบดูได้ที่หน้า ประชาชนได้อะไรในแต่ละจังหวัด )
ประชาชนได้อะไร-ระดับจังหวัด ทำด้วย flash เช่นกัน
หน้า ความคืบหน้าโครงการ จะเห็นว่ามี bar เล็กๆในแต่ละโครงการคล้ายๆพลังชีวิตในเกมส์ อันบนเป็น %ความคืบหน้าของการเบิกจ่าย อันล่างเป็น %ความคืบหน้าของโครงการ โดยจะมีสีเขียวคือทันตามกำหนดและสีแดงคือทำไม่ทันตามกำหนด อันนี้ทั่นจ๋งได้นำค่าจาก custom field ใน wordpress มาและมาเขียนโปรแกรมแสดงผลอีกทีหนึ่ง (ทั่นจ๋งกำหนดให้ใส่เป็นตัวเลขได้เลยและถ้ามีเครื่องหมายลบนำหน้าตัวเลข บาร์จะเปลี่ยนเป็นสีแดงเอง)
progress ของโครงการ เขียนโปรแกรมโดยคุณจ๋ง ส่วนด้านหลังเป็น custom field wordpress ตามปกติ
หน้า แบ่งปันเรื่องราว ใช้ระบบเขียนเองของท่ันจ๋ง เพราะจะได้ Import – Export ข้อมูล/รูปได้สะดวกกว่า
ระบบส่งข้อมูลและรูปภาพโดยทั่นจ๋ง
หน้า ติดต่อเรา ใช้ Contact Form 7ปลั๊กอินสุดฮิตของ WordPress
contact us เป็น plugin จาก wordpress
ส่วนระบบเอกสาร ท่ันเม่นอยากให้ใช้ของ issuu.com ทั้งหมด แต่เนื่องจากยังตกลงไม่ลงตัว เลยต้องพักไว้ก่อน (ลองดูตัวอย่างเอกสารได้ที่ ต้นกล้าอาชีพ )
การนำเสนอรูปแบบเอกสารลักษณะเป็นหนังสือ
ด้านการออกแบบเว็บ
ทีมงานออกแบบนำโดยคุณเม่นได้จัดทำอย่างละเอียดว่ากันเป็น pixel เลยทีเดียวครับ มั่นใจได้เรื่องขอบที่คมและต่อกันสนิท ตัวอักษรชัดเจน ระยะห่างมีความพอดี และมีความอ่านง่ายแบบเว็บ 2.0 คุณเม่นได้เขียนเรื่อง pixel perfect ไว้ที่นี่ครับ
ตกแต่งเชียะคมสไตล์ TiGERiDEA (pixel-perfect)
ในครั้งแรกนั้นทั่นเม่นได้ออกแบบโดยวางชิ้นงานต่างๆ ในระบบกริดที่ชื่อ 960 Grid System ซึ่งทำให้ออกแบบได้ง่าย เร็ว และไม่มีบั๊ก IE6 มากวนใจ แต่ไปๆมาๆทีมงานมี requirement เยอะมากจนต้องเปลี่ยนมาทำแบบอื่นตามความเหมาะสม
ออกแบบโดยวางชิ้นงานต่างๆ ในระบบกริดที่ชื่อ 960 Grid System
การทำเว็บครั้งนี้ ต้องใช้พลังอย่างมากในการพยายามให้ลูกค้าเข้าใจดีไซน์ที่ทีมงานต้องการครับ เพราะไม่อยากให้สุดท้ายเว็บไซท์กลายเป็นเว็บรัฐบาลทั่วไป (เว็บรัฐบาลทั่วไป หน้าแรกจะต้องมีทุกอย่างพร้อม เปรียบเสมือนเปิดประตูบ้านมาแล้วเจอห้องครัว ห้องรับแขก ห้องน้ำ ห้องนอน บันไดขึ้นชั้นสอง ห้องเก็บของ ที่จอดรถ ภายในทีเดียวทำให้ดูแล้วค่อนข้าง…เยอะไป) โชคดีที่ทีมงานมีความทันสมัยและชื่นชอบผลิตภัณฑ์ของ Apple อยู่จึง Tune กันได้บ้างครับ ผมยกตัวอย่างรสนิยมที่มองได้ชัดเจนของทีมรัฐบาลก็คือ รูปต้องมีอะไรเยอะๆ ไม่สามารถมีรูปเดี่ยวๆได้ที่เป็น iCon ได้ เพราะมักไม่สื่อเพียงพอ
รูป iCon ต่างๆในครั้งแรก ที่เป็น object แบบชิ้นเดียว
ทำให้ทีมงานจำเป็นต้องปรับเป็น iCon ที่มีรูปซ้อนกันเยอะๆแบบในปัจจุบัน
icon แบบมีรายละเอียดเยอะๆถูกใจรัฐบาล
สำหรับ Template รูปอื่นๆที่ใช้ในเว็บอย่างหน้า แบ่งปันเรื่องราวนั้นทางทีมงานก็ยังยึดคอนเซ็บ opensource อย่างเหนียวแน่นด้วยการใช้รูปฟรีที่ SXC
stock photo จาก SXC
ขอจบแต่เพียงเท่านี้ก่อนนะครับ สำหรับเฟสต่อไปคือ iPhone Version !
รวมบทความเว็บช่วยชาติ.com ช่วงเดือนกว่าๆที่ผ่านมา
เว็บไซต์ ช่วยชาติ.com เป็นเว็บไซต์ที่แสดงข้อมูลและความคืบหน้าของแผนการกระตุ้นเศรษฐกิจ เพือความโปร่งใสและให้ประชาชนมีส่วนร่วม เนื้อหาในเว็บไซต์นี้ ใช้สัญญาอนุญาตแบบ Creative Commons แสดงที่มา 3.0 สามารถนำไปเผยแพร่ต่อได้โดยไม่ต้องขออนุญาต ตราบเท่าที่ระบุว่ามาจากเว็บไซต์ของโครงการ • ระบบจัดการข้อมูลโดย เวิร์ดเพรส ออกแบบและพัฒนาโดย ไทเกอร์ ไอเดีย ซึ่่งมีทีมงานสำคัญคือ คุณเม่น คุณจ๋ง และผมเอง
ทำเว็บรัฐบาล ตอนที่ 0 : Proposal และ Quotation
ทำเว็บรัฐบาล ตอนที่ 1 ( recovery.go.th )
ทำเว็บรัฐบาล ตอนที่ 2 ( recovery.go.th )
ทำเว็บรัฐบาล ตอนที่ 3 Hosting ที่ไหนดี?
ทำเว็บรัฐบาล ตอนที่ 4 ประชุมใหญ่มาก
ทำเว็บรัฐบาล ตอนที่ 5 ( chuaichart.com ) ม็อบปิดทำเนียบ
ทำเว็บรัฐบาล ตอนที่ 6 : แดงทั้งแผ่นดินแล้วผมจะได้เงินมั้ยเนี่ย
ทำเว็บรัฐบาล ตอนที่ 7 : เว็บช่วยชาติสมบูรณ์ นายกเปิดตัว
โฆษณา
วงดนตรี งานแต่งงาน
(2 votes, average: 5.00 out of 5)
Loading ...
[...] บันทึกของคุณพัชร [...]
ยอดเยี่ยมครับ ขอชื่นชมจากใจ
@iannnnn
ขอบคุณมากๆครับ แหมตัวลอย
แวะมาเยี่ยม ได้ความรู้เพิ่มมากเลย ขอบคุณครับ…
เยี่ยมเลยครับ
ถามหน่อยครับ ฝ่ายที่คอยอับเดตข้อมูลเนี่ยเป็นใครครับ
ไม่อยากให้ตกม้าตายเรื่องข้อมูลครับ
ชอบ ๆ ใช้ Mac เหมือนกันครับ
[...] เว็บไซต์ของคุณ พัชร และ กลุ่มไทเกอร์ไอเดีย [...]
ว้าว………ถ้าไม่บอกใครจะรู้ว่าใช้ WordPress สุดยอดมากครับ เรียบง่าย แต่สวยแบบคลาสสิคมาก
เจ๋งครับ เผยขั้นตอนการทำงานใหญ่(จริงๆ) ให้ใครๆ ได้ศึกษา
เป็น case study ที่ทำให้ใครๆ รู้ว่า WordPress ไม่ได้ใช้เขียน blog อย่างเดียวนะ
[...] บันทึกของคุณพัชร [...]
ชอบมากเลยครับ โมได้เยี่ยมเลยครับ
รบกวนช่วยตรวจสอบการสะกดคำในเว็บด้วยครับ
เว็บไซต์ น่าจะใช้ ต นะครับ
ดูดีมากเลย ^^
หลังจากอ่านจบก็ add feed โดนพลัน
ชอบการเขียนขั้นตอนการทำเว็บมากเลยครับ อ่านสนุก ได้ความรู้ เยี่ยมมากๆ เลย
เพิ่ม bookmark หน้านี้ไปเรียบร้อย ขอบคุณสำหรับหลายละเอียดในการทำ เพื่อจะได้นำเทคนิคเหล่านี้ไปฝึกยุทธพีธีบ้าง
เวปดู ไม่รกตาดีครับ
เทคนิคที่สอนเป้นประโยชน์มากครับ Thank you so much
ผมเองได้ข้อมูล เห็นการทำงานต่างๆของทีมงานไทเกอร์ไอเดีย
ยอมรับในความเป็นมืออาชีพจริงๆครับ ความรับผิดชอบที่ผมต้องเอาเป็นตัวอย่างเลย
หวังว่าคงจะมีโอกาสได้พัฒนาฝีมือตัวเองบ้างครับ
จากเทคนิคต่างๆที่เอามาเผยแพร่เป็นวิทยาทาน อันนี้ต้องขอบคุณมากๆเลยฮะ
แล้วจะไว้ติดตามผลงานต่อไป
สู้ๆครับ
(อ้อ ผม 15 ปีครับ)
สุดยอดมากเลยครับ
ชอบมากมาย ให้เต็ม 10 เลยครับ
วันนี้ได้ผ่านเข้าไปชมมาเล็กน้อย
เพิ่งทราบว่าเป็นฝีมือคุณนี่เอง
ยอดเยี่ยมมากครับ สวยงาม และดูดีจริงๆ
เจ๋งมากครับคุณพัชร ชื่นชมทีมงานสุดๆ จากใจจริง ^^
ชื่นชมในผลงานครับ ทำหลายคนเลยออกมาดีครับ
เป็นการยืนยันว่าโปร่งใสทุกขั้นตอนครับ 555 ติดตามอ่านมาจนจบ เป็นประโยชน์มากครับ เทคนิคในการทำเว็บให้หน่วยงานราชการ
เก็บตังค์ได้เลยหรือเปล่าคะ ? ใส้แห้งกันหมดแล้ววว
ผมอยากให้รัฐช่วยช้างไทยด้วย ณปัจจุบันช้างไทยต้องมาเดินขอทานและมีการค้าช้างซึ่งมีใบสั่งที่ผิดกฎหมาย และจะทำให้เสียภาพพจน์ของประเทศชาติ ซึ่งอดีดเป็นช้างที่กอบกูประเทศชาติ และเป็นสัญญาลักษ์ประจำชาติไทย โปรดช่วยด้วยครับ
[...] ทำเว็บรัฐบาล ตอนที่ 8 : เทคนิคต่างๆ ใน… [...]
สดๆ
[...] ทำเว็บรัฐบาล ตอนที่ 8 : เทคนิคต่างๆ ใน… [...]
[...] ทำเว็บรัฐบาล ตอนที่ 8 : เทคนิคต่างๆ ใน… [...]
[...] icon หรือ บางเว็บที่ซับซ้อนอย่างเว็บ ช่วยชาติ.com นั้นจะมี custom field [...]
[...] 7 : เว็บช่วยชาติสมบูรณ์ นายกเปิดตัว ทำเว็บรัฐบาล ตอนที่ 8 : เทคนิคต่างๆ ใน… ทำเว็บรัฐบาล ตอนที่ 9 : Feedback [...]
ตอนแรกไม่คิดว่า wordpress จะทำได้ทุกอย่างแบบนี้ ต้องบอกว่ามีการดึงความสามารถของ wordpress ออกมาได้อย่างเต็มประสิทธิภาพเลยทีเดียวนะคะ ขอชื่นชมมากๆ เพราะตอนแรกคิดว่าถ้ามีโจทย์มาให้ทำเว็บประมาณนี้คงต้องใช้ Drupal แน่ๆเลยถึงจะโอเค แต่นี้เป็นการยืนยันอย่างดีเลยว่า WordPress ก็ไม่น้อยหน้าเค้าเหมือนกัน
อยากทราบความคืบหน้าครับ เวอร์ชั่น iPhone ได้ทำต่อมั้ยครับ
[...] เทคนิคการทำเว็บ ช่วยชาติ Share and [...]
A company proposal is created to reflect the professionalism of your organisation and is there to persuade a buyer that your goods or services are valuable to them. Along with any other collateral it’s the proposition that you are giving towards the customer and what will hopefully win more function for that business.
สุดยอดเลยครับ เดี๋ยวจะมาขอสูบความรู้ดีๆ อีกนะครับ