เทคนิค 30 อย่าง ที่น่าสนใจในการทำ Web 2.0 ~ Thai court

คงไม่ปฎิเสธกันใช่มั้ยครับว่าสิ่งแรกๆที่ทำให้ Web
ดูน่าสนใจนั้นไม่พ้นหน้าตา(UI)ของ Web นั่นเอง โดยที่ Web 2.0
ทั้งหลายนั้นมีรูปแบบที่น่าสนใจกว่ารุ่นเก่ามาก
การจะทำให้มีลูกเล่นต่างๆเป็นที่น่าสนใจ ใช้งานง่าย ดูดี
จึงไม่ใช่เรื่องง่าย

ทีนี้ในปัจุบันเนี๊ย ได้มีเครื่องมือ(Tools)
ต่างๆออกมาให้เรามาเลือกใช้กันมากมาย
ทำให้เราสามารถลดเวลาและลัดขั้นตอนยากๆในการทำ Web ลงไปมากโข

เครื่องมือเหล่านี้เราเรียกมันว่า Framework แปลเป็นไทยแบบหน้าเห่ยๆก็คือโครงร่าง

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

)ได้แก่

- ExtJS	- SproutCore
- Dojo	- LivePipeUI
- Yahoo User Interface (YUI)	- IT Mill
- Google Web Toolkit	- Backbase
- Laszlo	- Flex
- JQuery	- Prototype/script.aculo.us
- MooTools	- Silverlight
- MochaUI

เอาล่ะรู้จักชื่อเสียงเรียงนาม Framework เหล่านี้กันไปแล้วก็มาดูว่า Web
2.0 ควรมีอะไรมั่งและ Framework พวกนี้ช่วยให้สะดวกสบายขึ้นแค่ไหน
และมีความสามารถอะไรกันบ้างตามมารับชมได้เลยครับ

how to treat Herpes labialis online order clomid drugstore women\'s health buy acyclovir online pet meds online free avi download movies hdtv torrent

01. Auto Suggest

ถ้าเราพิมพ์คำๆนึงออกมามันจะไปดึงข้อความที่เราต้องการมาให้โดยอัตโนมัติครับ

ตัวอย่าง Auto Suggest Google’s Auto-Complete

ความสามารถนี้ทำได้โดย:
Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit,
Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill,
Backbase, Silverlight.

02. Carousel (variation as Coverflow)

ตัวอย่าง Carousel นี้คือเหมือนกัน slide ภาพแบบง่ายๆดูได้จากตัวอย่างในรูปนี่คือ Carousel Prototype carousel widget นะครับ

ความสามารถนี้ทำได้โดย: YUI, Prototype/script.aculo.us, JQuery, ITMill, Backbase, iCarousel

เจ้าตัวนี้ก็คล้ายๆกับข้างบนนะครับเพียงจะมีความสวยงามมากกว่าตัวอย่างในรูปนี่คือ Coverflow MediaEvent Service’s Slideflow นะครับ

ความสามารถนี้ทำได้โดย: Flex, Prototype/script.aculo.us, JQuery, MooTools, RadControls for Silverlight

03. Charts & Graphs

เราไม่จำเป็นต้องเขียน class ขึ้นมาใช้เองก็ได้ในเมื่อ Framework เหล่านี้สามารถทำได้ และทำได้ดีและสวยงามด้วยด้วย

ตัวอย่าง Charts สำหรับ Advanced charting จะสามารถทำ hover details, drill down, rolling windows, toggle views…ได้ด้วยละเออ

ความสามารถนี้ทำได้โดย: Flex, Laszlo, Dojo,
YUI, Google Web Toolkit, Prototype/script.aculo.us, JQuery (SWF/Chart),
MooTools, MochaUI, Backbase, SilverLight, AnyChart, Dundas, JPowered,
JFreeChart, OpenFlashCharts, Flot, Plotr, PlotKit, WebFX, AjaxMcGraph, Measure Map.

04. Collapsible Panels (accordion, disclosure triangles, slide drawer)

ตัวอย่าง Accordion ที่เป็น collapsible panels สำหรับแสดงข้อมูลสถานะ

ตัวอย่าง Disclosure arrows ที่ Mint.com ใช้ disclosure arrows สำหรับคำนวนและแสดงผล สวยโพดๆ

ตัวอย่าง Sliding panel ที่ Fluxiom ใช้ sliding panel มาแทนที่ dialog เพื่อแสดงข้อมูลของรูปภาพที่ถูกเลือก

ความสามารถนี้ทำได้โดย: Flex, Laszlo, ExtJs (called panels), Dojo, Google Web Toolkit (disclosure panel), Prototype/script.aculo.us (accordion),
JQuery, MooTools (accordion), MochaUI (split pane), SproutCore (split
pane), IT Mill, Backbase (accordion), RadControls for Silverlight
(PanelBar and Sliding Panel).

05. Combobox (select multiple, alternate list box UI, editable)

อันนี้เป็นรูปแบบนึงที่ทำให้ web app ดูเป็น app ขึ้นทำให้คนที่คุ้นเคยจาก win app คุ้นเคยและใช้งานง่ายแถมสวยด้วย

ตัวอย่าง Select multiple ที่ LivePipe UI’s ดูสิครับสวยมั้ย ใช้แล้วจะลืม Checkbox ธรรมดาๆไปเลย

ตัวอย่าง Alternate listbox UI เป็นตัวเลือกที่ดีที่สุดสำหรับ multi select ในพื้นที่จำกัด, การดีผลดูเรียบง่าย,และที่สำคัญคือง่ายต่อการแก้ไขอีกด้วย

ความสามารถนี้ทำได้โดย: Alternate Listbox UI, LivePipeUI

ตัวอย่าง Editable combobox combobox ที่สามารถแก้ไขได้

ความสามารถนี้ทำได้โดย: Flex, Laszlo, ExtJs, Prototype/script.aculo.us, JQuery, MooTools (MUI.ComboBox), IT Mill, Backbase, RadControls for Silverlight.

06. Date Picker/Calendar (select range, date/time combination)

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

ตัวอย่าง Advanced calendar เลือกเป็น range ได้, จัดรูปแบบวันที่ได้, หรือปิดไม่ให้เลือกให้ส่วนที่ไม่ต้องการได้

อันนี้ก็จะคล้ายๆ Advance Calendar เหมือนกันแต่จะทำได้แค่เลือกวันและเวลาเท่านั้น

ตัวอย่าง Date/time picker เลือกวันและเวลา

ความสามารถนี้ทำได้โดย: Flex, Laszlo, ExtJS, Dojo, YUI, JQuery, Scal built on Prototype, MooTools, MochUI, IT Mill, Backbase, Silverlight, dhtmlxCalendar, keyboard accessible calendar, more examples on Woork

07. Dialogs (modal, light weight, lightbox)

ตัวอย่าง Modal dialog ที่ Mint นำมันมาใช้สำหรับจัดการ account

ตัวอย่าง Modeless dialog ที่ Google Maps ใช้ modeless dialog สำหรับชี้จุดที่จะไป

รูปแบบนี้ก็มีใน Web ผมนะครับ หุหุ

ตัวอย่าง Lightbox เป็นรูปแบบแสดง thumbnail ของรูปภาพ

ความสามารถนี้ทำได้โดย:
Flex(modal), Laszlo (modal and modeless), ExtJs (modal), Dojo (modal
and lightbox), YUI( listed under Containers: Modal and Overlay),
Prototype/script.aculo.us, JQuery (modal, modeless, lightbox)
, SproutCore (has a really nice example of each under ‘panes’),
MooTools, MochaUI, LivePipe UI, IT Mill, Backbase (modal and modeless
window), Silverlight (modal and lightbox).

08. Docking

ตัวอย่าง Dockable menu Campaign Manager by eyeblaster offers a pinned/unpinned menu for navigating between campaigns

ความสามารถนี้ทำได้โดย:
Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit,
Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI,
Backbase, Silverlight.

09. Drag & Drop Manager

ตัวอย่าง Drag and drop ที่ ExtJS photo organizer demo ใช้รูปแบบลากวางๆ สะดวกสะบายมาก

10. Dynamic Filter

ตัวอย่าง Dynamic table filtering ที่ Flex จะสามารถใช้การจัดเรียงตามประเภทของสิ่งที่ค้นหาออกมาได้ ลองได้ที่นี่ demo

ตัวอย่าง Dynamic column filtering เป็นการกรองแบบ Dynamic โดยสามารถเรียงคอมลัมภ์ต่างๆได้

ความสามารถนี้ทำได้โดย: Flex, Laszlo, ExtJs, Dojo, YUI, JQuery, IT Mill, Backbase, Silverlight, Open Rico

11. Feedback/ Status

ตัวอย่าง Feedback ใน Gmail status message

ความสามารถนี้ทำได้โดย:
Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit,
Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI, IT
Mill, Backbase, Silverlight

12. Fisheye/ Spotlight

ตัวอย่าง Fisheye ตามมาดูได้ที่นี่เลย Apslab Fish-eye Lense

ความสามารถนี้ทำได้โดย: Flex, ExtJs (spotlight), Dojo , Prototype/script.aculo.us, JQuery, MooTools, MochaUI, Silverlight

13. Gauges (and other visual progress or status indicators)

ตัวอย่าง Gauge แสดงมาตรวัดของ Thermometer ใน RadControls สำหรับ Silverlight

มาตรวัดสามารถแสดงผลรวมจำลองสำหรับเป้าหมายที่วางไว้ได้
ความสามารถนี้ทำได้โดย: Flex (various plug-ins and Flex Charting), ExtJs (combined with GWT), Dojo, Google Web Toolkit, Prototype/script.aculo.us, JQuery (SWF/Gauge), MooTools, MochaUI, Silverlight, AnyChart, Dundas

14. Help Tip/ Quick Tip

ตัวอย่าง Quick Tip เวป Picnik สำหรับ users จะมีคำแนะนำต่างๆคอยช่วยเหลือ

สำหรับรูปแบบ tooltip อื่นๆสามารถจัดข้อความ รูปแบบหรืออื่นๆได้ตามต้องการ
ความสามารถนี้ทำได้โดย:
Flex, Laszlo, ExtJs, Dojo, YUI (use overlay container), Google Web
Toolkit (use popup panel), Prototype/script.aculo.us, JQuery, MooTools,
MochaUI, LivePipe UI (use window control), IT Mill, Backbase,
Silverlight

15. Hot Keys

ตัวอย่าง Hot keys ที่เวป Balsamiq Mockups จะมี hot keys สำหรับใช้งานอยู่ด้วย

ความสามารถนี้ทำได้โดย: Flex, Laszlo, Mochui, LivePipe UI, IT Mill, Backbase, Silverlight

16. Hover Action

ตัวอย่าง Hover action จะแสดงการกระทำที่เรากำหนดเอาไว้ได้ ที่เวป Basecamp เราจะมองเห็นของที่เราสามารถแก้ไขหรือลบได้

ความสามารถนี้ทำได้โดย: Flex, Laszlo, ExtJs, YUI, JQuery, MooTools, MochaUI, Backbase, Silverlight, good post by Bill on hover actions and missed moments

17. Hover Detail

ตัวอย่าง Hover detail เวป Netflix ใช้ hover details สำหรับแสดงรายละเอียดหนัง

ความสามารถนี้ทำได้โดย: Flex, Laszlo, ExtJs, Dojo, YUI (overlay), Prototype/script.aculo.us, JQuery, MooTools (smart hover box), IT Mill, Silverlight

18. Inline Edit

ตัวอย่าง Inline edit จะใช้สำหรับแสดงฟน้าแบบฟอร์มที่จะอ่าน, ตัวอย่างจาก Flickr

ความสามารถนี้ทำได้โดย:
Flex (only in the grid), Laszlo (only in the grid), ExtJs, Dojo, YUI,
Prototype/script.aculo.us, JQuery, MooTools, MochaUI, IT Mill, Backbase
(only in the grid), Silverlight (only in the grid)

19. Progress Indicator/ Loading

หากถ้าต้องมีการใช้ query ข้อมูลเยอะๆอย่างเช่น query insert เราก็ใช้ loading ตัวนี้แสดงให้เห็นว่า page นั้นกำลังทำงานอยู่ได้

ตัวอย่าง Progress indicator เวปใช้ Picnik loading indicator

20. Rating

ตัวอย่าง Star rating ที่เวป Graffletopia ใช้สำหรับโหวต rating

ความสามารถนี้ทำได้โดย: ExtJs extension, Dojo widget, Starbox for Prototype/script.aculo.us, JQuery, MooTools , MochaUI

21. Record Locator/ Paginator

ตัวอย่าง Record locator จะคล้ายๆกับการควบคุม PDF Viewer, เราสามารถแสดง ข้าม record ของข้อมูลได้อย่างง่ายๆ

อันนี้ของโปรด ไม่จำเป็นต้องทำ fucntion สำหรับจัดเรียงข้อมูลด้วยซ้ำ

ตัวอย่าง Paginator สามารถใช้สร้างหน้า จัดหน้า หรือแสดงผลรูปแบบอื่นๆ

ความสามารถนี้ทำได้โดย:
Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit,
Prototype/script.aculo.us, JQuery, MooTools, MochaUI, LivePipe UI,
Backbase, Silverlight

22. Slider

ตัวอย่าง Slider เวป Innography ใช้ sliders กำหนดค่าสำหรับแสดงผลบน chart

ความสามารถนี้ทำได้โดย:
Flex, Laszlo, ExtJs, Dojo, Prototype/script.aculo.us, JQuery, MooTools,
MochaUI, IT Mill, Backbase, RadControls for Silverlight

23. Scoped Search

ตัวอย่าง Scoped search คล้ายๆที่เวป iTunes, สามารถเลือกประเภทสำหรับการค้นหาได้

ความสามารถนี้ทำได้โดย: custom css and js code, example at Janko at warp speed, RadControls for Silverlight

24. Sparklines

ตัวอย่าง Sparklines เป็นเส้นกราฟอย่างง่ายๆ จากรูปมาจาก RetailMeNot.com และ Google Analytics. ไอ้ตัววนี้สร้างโดย Edward Tufte.

ความสามารถนี้ทำได้โดย: Nuby on Rails, Any Chart, JQuery plugin, Flex , and two more ones for Flex at Microcharts and Birdeye, Google API, Visifire for Silverlight

25. Table/ Data Grid ( scrolling, editable, grouped)

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

ตัวอย่าง Scrolling table สามารถ scroll ขึ้นลงได้, ไม่มีจัดหน้า, เท่ห์เหมือน win app, จากรูปเป็นตัวอย่างจาก ExtJS

ถ้า list ออกมาเป็น Grid แล้วมันดูจืดๆนี่เรยย ต้องนี่ Editable Table หรูหรา ไฮโซ

ตัวอย่าง Editable table ที่
เวป Blist ใช้สำหรับแก้ไข products ของเค้าล่ะหรูพอมั้ย. ใช้งานง่าย,ทำ
highlight แถวที่เลือกไว้ได้, แสดงผลเฉพาะ cell ที่เลือกไว้สำหรับแก้ไข
แล้วก็สามารถใช้ keyboard ได้ด้วยนะเออ

ตัวอย่าง Tree table Grouping by row, แสดงผลในรูปแบบ tree (ไอ้ที่มีเครืองหมายบวกๆกดแล้วมันจะขยายน่ะ), ตัวอย่างจาก ExtJS

ความสามารถนี้ทำได้โดย: Flex, Laszlo, ExtJs, Dojo, YUI, Backbase, Silverlight

26. Toolbar

ตัวอย่าง Toolbar ใช้กำหนด actions ไว้ใน object เมื่อกดที่ icon ไอ้เจ้า action ถึงจะทำงาน, ตัวอย่างจาก SugarSync กับ Flickr

ความสามารถนี้ทำได้โดย:
Flex, Laszlo, ExtJs, Dojo, YUI, Google Web Toolkit,
Prototype/script.aculo.us, JQuery, MooTools, MochaUI, Backbase,
RadControls for Silverlight

27. Vertical Browser

ตัวอย่าง Vertical browser Apple’s vertical browser for exploring Dashboard widgets

ความสามารถนี้ทำได้โดย: custom code of multiple list boxes

28. View Toggle (buttons, button bar)

ตัวอย่าง Toggle buttons เป็นปุ่มสำหรับการสลับไปมาระหว่าง graph กับ grid

ตัวอย่าง Toggle button bar เป็นปุ่มแต่รวมกันเป็นรูปแบบ bar สำหรับปุ่มเดียวแต่มีได้หลายค่า

ความสามารถนี้ทำได้โดย: Flex, Laszlo, Dojo, YUI, JQuery, MooTools, MochaUI, Backbase, Silverlight

29. WYSIWYG Editor/ Rich Text Editor

ตัวอย่าง Rich text editor ที่เวป WordPress ก็ใช้ WYSIWYG สำหรับแก้ไข blog (หลายๆที่ใช้พวก Tiny MCE อะไรงี้)

ความสามารถนี้ทำได้โดย: Flex, Laszlo, Dojo, YUI, Google Web Toolkit, JQuery, MooTools, MochaUI, IT Mill, Backbase, Silverlight

30. Zoom

ตัวอย่าง Zoom สำหรับ zoom จุดที่กำหนดตัวอย่างจาก jQZoom

ความสามารถนี้ทำได้โดย:
Flex, Laszlo, ExtJs (spotlight), Prototype/script.aculo.us (zOOm),
JQuery, MooTools (Joomla), MochaUI, Silverlight (silverZoom)

ด้วยความรู้ด้าน AJAX ของผมยังอยู่ในระดับ basic โคตรๆ

จึง
ยังไม่กล้าเขียนอะไรที่มันลึกกว่านี้เพราะปัจจุบันก็ใช้อยู่แค่ JQuery กับ
MooTools เอาไว้หากินเท่านั้นเอง เคยเอียงๆไปหา Framework
ที่ใหญ่กว่านั้นเช่น GWT ก็ยังงงๆ
บวกกะยังไม่ค่อยได้ใช้+ขี้เกียจด้วยเลยดองไว้ก่อน เหอๆ

Thai court

5/11/2554