ads compdd

วันอังคารที่ 28 กรกฎาคม พ.ศ. 2558

How Silver Nanowire Technology Is Improving Touchscreen Capability

By Sri Peruvemba

Demand for new electronic applications is driving opportunities for transparent conductors—and the need for a cost-effective material that conforms to bends and curves, is flexible, and foldable.

Using silver nanowire coatings is one possibility being explored to achieve those curves. Silver nanowires have significantly higher optical and electrical conductivity than currently used materials such as indium tin oxide (ITO) and other transparent conductors.

Applying it to transparent conductors based on silver nanowires, manufacturers can turn strange and varied surfaces— even bendable, transparent surfaces like a piece of plastic—into touch-sensitive surfaces for computing device human interfaces. 

Evolving touchscreen requirements

Currently, device makers prefer conductivity below 100/sq, making their touchscreens more responsive and noticeably improving the user's experience.

For larger-area touchscreens such as 20-inch monitors, higher conductivity is essential for faster response times and detecting 10-finger touch. In mobile devices, including laptops and smartphones, film-based transparent conductors enable significantly thinner, lighter, and shatterproof touchscreens.

Flexible displays demand transparent conductors that can be bent or rolled. Most importantly, transparent conductor prices must be low enough to enable mass production and mass adoption of touch in new products.

Silver nanowires are being adopted as the transparent-conductor of choice by leading industry heavyweights including Hitachi, LG, TPK, Nissha, 3M, Okura, and many others. 

Silver nanowire conductors also deliver improved light transmission and can be patterned using lasers where there are no consumables (like etchants) thus reducing processing costs. 

Further manufacturing advantages includes capital equipment to make silver nanowire-based transparent conductors at a fraction of what it costs for ITO. Silver nanowires are available in cost-effective, high production volumes. And true single-layer sensors are possible with silver nanowires that reduce total material used and further lowers costs. 

The flexibility factor

In customer tests, silver-nanowire-coated films withstood bending greater than 100,000 turns around a 3mm radius, clearly demonstrating their fit for flexible electronic devices. It enables flexible/transparent devices, whereas the incumbent ceramic material is brittle and will break. 

Additionally, silver nanowires simplify touchscreen manufacturing processes and improve end-product performance in consumer electronics designs beyond legacy technologies. There isn't a downside. Overall, silver-nanowire-based touchscreen costs range from slightly less to significantly less than the cost of equivalent ITO, film-based solutions. The material is cost-effectively accelerating the transition to flexible and wearable devices.

Looking ahead

This hot sector potential is reinforced by IDTechEx, which noted that wearable technology requires new form factors, and printed, organic and flexible electronics can lead to products that can be priced to generate healthy margins.

Flexible OLED display shipments alone are expected to reach 86.2 million units globally in 2020, up from only sample volumes in 2015, according to a recent IDTechEx report entitled “OLED Display Forecast 2015-2025: the Rise of Plastic and Flexible Displays“.  The report projects that market revenue for flexible displays will grow to $7.3 billion during the same five-year period.

To bring wearable technology to the forefront, the human interface must radically evolve. Brittle glass is out and flexible film is in.

Flexibility provides enhanced portability and durability, and allows virtually unlimited design freedom. Flexible displays essentially equate to superior ergonomics. Imagine unbreakable phone screens that flex instead of shattering when dropped. Consider folding a seven-inch tablet so it slips into your pocket. How about a display that wraps around your arm, or a large public display wrapping around a pillar or a building? 

Moving toward products like these creates increased demand for flexible, bendable, and rollable touchscreens. As more product designers become aware of silver nanowire-based touch displays, we'll be seeing great new products.

Boosting user experience

As expectations for low-cost, high-performance touchscreens increase so does demand for higher quality touch screens. Meeting today’s advanced standards means touchscreens must be thin, light, visible in various ambient light conditions, highly responsive, and of course low-cost. Fast-responding transparent touchscreens are essential to the desired user experience. This result can only be achieved with highly transparent conductors not visible to the eye. An essential enabler of these important benefits is silver nanowire conductor technology.

Sri Peruvemba is a vice president at Cambrios Technologies Corp. Cambrios provides innovative solutions using nanotechnology. Its silver nanowire-based transparent conductors simplify electronics manufacturing and improve end-product cost and performance for electronic devices. Cambrios is headquartered in Silicon Valley.

Native Apps vs. HTML5/Responsive Design: A diversion of sorts

Ray Kahn
SEP 06, 2013 14:00 PM

Today I am taking a break from writing about Cloudera and Hadoop. Next week I will continue with that discussion.

Recently I was asked whether it is better to develop a native app, iOS based, or does it make sense to use a mobile web application based on HTML5 and Responsive Design. As I was contemplating this question I searched the internet and realized that this is a question which is being asked very frequently. It seems that no matter what one decides to do, it is important to have a mobile strategy that takes into account your customers' needs, resources at your  disposal (human and financial), your organization's monetization strategy and the type of user experience you would like to provide.

What follows is a short presentation which I put together to compare and contrast the 2 platforms. After doing my research I had a change of heart: originally I was of the opinion the differences between the two platforms do not warrant the extra cost for a native app development, but, as someone who is responsible for user experience and functionality, now I lean more toward native apps. But my requirements may be very different than yours:

  • Rich user experience
  • Security
  • Accessibility

As a starting point I suggest you have a clearly defined mobile strategy aligned with your organization’s overall vision and goals.

What follows is my presentation verbatim. I am not making any changes or add any new verbiage as I think each section is self-explanatory.

Native Apps – An Overview

  • The one issue historically with native apps has been around discovery.
  • For the majority of smaller app developers – being able to be found is key to their success.
  • As of mid-2013, Apple's App Store had over 1,000,000 apps.
  • Producing a brilliant app is only half the job done – next battle is how to tell people about the app.

Native Apps: The Good

  • Users spending huge amounts of time in native apps, almost now as much as TV in a single day.
  • Native apps are better than HTML5 executions on using function of the device itself, including the accelerometer, camera, calendar, GPS, microphone etc.
  • Example: the RR Evoque allows users to use the iPhone/iPad accelerometer to looking 360 degrees around the interior of the car –only possible in an app environment.

Native Apps: The Bad

  • App stores mean parting with 30% to Apple or 20% to Google of your revenue (if transactional).
  • On average, developers only actively retain 4% of the users who downloaded their app after a year.
  • Updates through App stores: long approval times and risk of failing the process and pushing back the update.

Native Apps: Conclusion

  • Consumers love native apps, as they offer an overall excellent user experience, speedy performance, and advanced security features.
  • Use for retaining customers once you've acquired them.

HTML 5: The Good

  • Mobile web experience tends to be more functional.
  • Fast favorite among enterprise platforms.
  • Developers love them because HTML is a familiar language.
  • Advantage of working across all mobile operating systems.
  • Cost-effective: designing a single app for multiple platforms and no-approval-necessary distribution.

HTML 5: The Bad

  • HTML5 is not yet mature enough: Missing APIs, weaker UI compared to native apps and difficulty routing ads onto HTML5 sites.
  • No access to certain device events and services.
  • Network dependence: dependent on network coverage, an HTML 5 app can become inaccessible to consumers who cannot access any kind of network. 
  • Slower user interaction: web runtime barrier.
  • Can’t use GPU acceleration and multithreading.

HTML 5: Conclusion

  • A more cost effective approach.
  • Use mobile web as a means of acquiring new customers.

Bottom Line

  • Native apps currently dominate the market.
  • Native can do more.
  • Native runs faster.
  • Native fits platform look-and-feel.
  • HTML5 is often easier to develop.
  • HTML5 continues to evolve and improve in the coming years.

What’s next?

Next week I will return to my unfinished discussion on Cloudera and Hadoop. Now that we have a development platform up and running the fun is just about to start.

If you or your company is interested in more information on this topic and other topics, be sure to keep reading my blog.  

Also, as I am with the IEEE Computer Society,  I should mention there are technology resources available 24/7 and specific training on custom topics available. Here is the IEEE CS program link if you are interested, TechLeader Training Partner Program, http://www.computer.org/portal/web/Corporate-Programs.

Silver Nanowire Conductors: Not Your Grand Dad's Touchscreen

Sri Peruvemba
JUL 16, 2015 12:31 PM

While there seems to be a constant stream of technical breakthroughs in computing systems, particularly in processors, memory and faster interfaces, revolutionary changes are also occurring in display and touch technology.

To wit: greater touch sensitivity, enhanced luminance, bendable touchscreens, wraparound screens and dramatically lower cost, environmentally-sustainable manufacturing of silver nanowire-based touch screens.  All are factors pushing indium tin oxide (ITO) to the side. Like dial up modems, manual transmissions and wired LANs, ITO's limitations don't work for ‘what's next.’

What Is Next?

New materials are triggering a wave of innovation in personal electronics. Driving these changes are incredibly small, highly-integrated and far easier to program microcontrollers and flexible circuit boards combined with silver nanowire-based touch screen technology. 

And now touch screen displays no longer have to be flat. Flat and rigid are out. Curved and flexible are in. Additionally, most touchscreens require high-quality transparent conductors to provide a rich user experience. These features are being applied to products that will make today's tablet computers appear as dated as desktops and help push portable computing into entirely new sectors and price points. Kiosks, gaming machines, point-of-sale devices, automobile displays and medical devices are a few key categories ripe for adoption. 

Flexible displays definitely equate to improved ergonomics. Imagine unbreakable phone screens that flex instead of shattering when dropped. Consider folding a tablet so it slips into your pocket like a mobile phone. How about a display that wraps around your wrist, or a huge public display wrapping around a pillar or the corner of a building like neon lighting does? We are driving toward products like these and they are creating increasing demand for flexible, bendable and rollable displays using silver nanowires. 

Some likely next products include but aren't limited to: curved, shaped smartphones, flexible tablets as well as wearable smart bracelets and watches. Such products are specifically enabled by flexible device technology. 

What are Silver Nanowires (SNW)?

They are highly conductive single crystal silver nanowires suspended in a fluid/ink. These silver nanowires have a diameter of a few tens of nanometers and length of a few tens of micrometers, giving them a high (1000:1) aspect ratio. The ink is a mixture of highly conductive silver nanowires and other materials to enable the ink to be coated on all kinds of surfaces particularly plastic film. Using this ink to cover a screen creates a touch surface that is the most responsive as silver is the best electrical conductor in the world. Silver nanowire based touch sensors can work in touch screens on a wrist watch to touch screens on a large signage display.

SNW ink is also particularly transparent, has very good clarity and very little haze, making it ideal for displays requiring sharp, crisp images. Also, screen resistance can be customized to suit the specifications of individual OEMs and designers which allows for variable response times. Touchscreens can be used for devices, such as phones and tablets or big touch screen TVs or even exterior electronic signage. Perhaps most interestingly they can also be used in applications requiring round surfaces or conformity to angles, giving them a clear edge over conventional material which cannot bend.

Who's Using Silver Nanowire-based touch screens?

As reported in MIT Technology Review and elsewhere, SNW inks are being used in all-in-one computers and monitors made by LG, Lenovo, Dell, HP, and others. The material is also found in mobile phones and tablets made by NEC in Japan, Karbonn in India and Huawei in China. According to electronics research firm, IDTechEx, worldwide shipments of touch screen panels will double in area from 2014 to 2025 (see figure 2). Silver nanowires are also being adopted as the transparent-conductor-of-choice by leading industry heavyweights including Hitachi, LG, TPK, Nissha, 3M, Okura, CNI and others. 

Figure 1

Figure 1: Touchscreen growth by surface area. Data courtesy- Dr. Khasha Ghaffarzadeh, IDTechEx Research

For emerging touchscreen applications, including large-area signage and monitors, as well as miniature, flexible, wearable displays, silver nanowires offer significant advantages both in cost and performance. The material is already being used in several consumer electronics products. Roll-to-roll processed silver nanowire transparent conductors are the clear choice for new factories needing high throughput, fewer consumables and easy processing. They're also on target for CE OEMs needing a thin, light, bright, flexible material delivering high performance for their next killer application.

Sri Peruvemba is a Vice President at Cambrios Technologies Corp. Cambrios provides innovative solutions using nanotechnology. Its silver nanowire-based transparent conductors simplify electronics manufacturing and improve end-product cost and performance for electronic devices. Cambrios is headquartered in Silicon Valley.

วันอาทิตย์ที่ 12 กรกฎาคม พ.ศ. 2558

รู้จักกับ HTML5 - ภาคหนึ่ง HTML5 คืออะไร?

บทความชุดนี้จะแนะนำข้อมูลเบื้องต้น (ย้ำว่า "เบื้องต้น") ของเทคโนโลยีใหม่ที่ทุกคนจับตาอย่าง HTML5 เพื่อเตรียมความพร้อมและปูพื้นฐานของ HTML5 ให้กับนักพัฒนาเว็บในประเทศไทย
ภาคแรกของบทความนี้จะกล่าวถึงข้อมูลของ HTML5 ในภาพรวม ว่ามันคืออะไร มันทำอะไรได้บ้าง ก่อนจะเข้าสู่รายละเอียดของเทคโนโลยีบางตัวที่สำคัญในภาคต่อๆ ไป

อะไรคือ HTML5

ผู้อ่าน Blognone คงได้ยินชื่อ HTML5 กันมาเยอะ แต่ว่าแท้จริงแล้วมันคืออะไรกันแน่?
ความหมายทั่วไปของคำว่า HTML5 มีสองนัยยะที่เหลื่อมซ้อนกันอยู่ครับ
ความหมายในมุมแคบ มันคือ สเปกของภาษา HTML รุ่นที่ 5 ซึ่งต่อจาก HTML4 ที่เราใช้กันทุกวันนี้ โดยปัจจุบันสเปกยังร่างไม่เสร็จ (ดูได้จากเอกสารของ W3C) เนื้อหาจะครอบคลุมลักษณะ ฟีเจอร์ และ syntax ของ HTML เท่านั้น
ความหมายในมุมที่กว้างขึ้น มันคือ ชุดของเทคโนโลยีเว็บสมัยใหม่ อันประกอบไปด้วย
  • ภาษา HTML5 ตามข้อแรก
  • CSS3
  • API อีกชุดหนึ่งที่อยู่นอกสเปก HTML5 แต่ออกแบบมาให้ใช้งานร่วมกัน เช่น Geolocation, IndexedDB, File API ที่กำลังเป็นร่างมาตรฐานของ W3C แยกมาอีกชุดหนึ่ง
  • เทคโนโลยีประกอบอื่นๆ ที่เป็นมาตรฐานของ W3C อยู่แล้ว และนำมาใช้ร่วมกับ HTML (ซึ่งจะเป็น HTML4 หรือ HTML5 ก็ได้) เช่น SVG หรือ MathML
HTML5 ในที่นี้เราจะหมายถึงความหมายอย่างที่สอง ก็คือเทคโนโลยีเว็บรุ่นใหม่แบบรวมๆ นะครับ

ทำไมต้องมี HTML5

จะว่าไปแล้ว เทคโนโลยีใน HTML5 แทบไม่มีอะไรใหม่ในโลกไอทีเลย เพราะเกือบทุกอย่างที่ HTML5 ทำได้ อยู่ในกระบวนการพัฒนาโปรแกรมแบบ native มาช้านานแล้ว เช่น การทำงานแบบออฟไลน์ หรือ การวาดกราฟิก
เพียงแต่ HTML5 นำเทคโนโลยีที่เคยอยู่ในโลก native ย้ายเข้ามาสู่โลกของเว็บ ทำให้มันมีข้อดีของทั้งสองโลก คือ ฟีเจอร์อันรุ่มรวยและประสิทธิภาพในการทำงานจากโลก native มาผสานกับความคล่องตัว เข้าถึงได้จากทุกที่ของเว็บ
เดิมที ภาษาตระกูล HTML/SGML เป็นภาษาที่ออกแบบมาเพื่อ "อธิบาย" หรือ "นิยาม" การแสดงผลข้อมูล เช่น ตัวหนา ตัวเอียง หัวเรื่อง ลิงก์ ซึ่งการใช้งานก็คือเอาไว้ทำเอกสารที่เชื่อมโยงกัน (ตัวอย่างคือ Help ของวินโดวส์)
พอมีอินเทอร์เน็ต HTML ก็ทำหน้าที่สร้าง "โบรชัวร์อิเล็กทรอนิกส์" ที่สามารถดูได้จากระยะไกล ถึงแม้ตอนแรกจะมีแต่ข้อความ แต่ระยะต่อๆ มาเทคโนโลยีเว็บก็พัฒนามากขึ้น สามารถใส่ภาพ เสียง วิดีโอ (ผ่านปลั๊กอิน) มีแนวคิดเชิงโปรแกรมอย่างจาวาสคริปต์เข้ามา (จริงๆ มี VBScript ด้วยแต่ดังสู้ไม่ได้) ในยุคของ HTML3
พอเป็นยุคของ HTML4 เราเริ่มเห็นเว็บแบบที่ตอบโต้ได้ มีความเป็นอินเตอร์แอคทีฟมากขึ้น ซึ่งเกิดจากเทคโนโลยีอย่าง AJAX, XMLHttpRequest ทำให้เว็บมีความใกล้เคียงกับ "แอพ" แบบดั้งเดิมมากขึ้น อย่างไรก็ตาม มันยังสู้แอพแบบ native ไม่ได้ เพราะยังขาดฟีเจอร์สำคัญๆ อีกหลายอย่าง เช่น การทำงานออฟไลน์ กราฟิกสามมิติ ฯลฯ นั่นเอง
สุดท้ายแล้ว HTML5 จะช่วยให้เรานำเทคโนโลยีจากโลกของเว็บ มาสร้างแอพที่มีลักษณะใกล้เคียงกับแอพแบบ native (ไม่ว่าจะบนพีซีหรือมือถือได้) ตัวอย่างที่ชัดเจนที่สุดในตอนนี้คือ PhoneGap ซึ่งเป็นเครื่องมือพัฒนาแอพมือถือด้วย HTML5

HTML5 มีความสามารถอะไรบ้าง

เกริ่นกันมานานก็เริ่มเข้าเรื่องกันสักทีนะครับ ส่วนประกอบของ HTML5 มีหลายอย่างมาก เราอาจไม่จำเป็นต้องใช้ทุกฟีเจอร์
ส่วนการอธิบายส่วนประกอบของ HTML5 ก็ขึ้นกับว่าเราจะจัดหมวดหมู่มันอย่างไร มีหลายตำราให้เลือก ในบทความนี้ผมขอเลือกตาม W3C ที่อุตส่าห์ออกแบบโลโก้-ไอคอนของ HTML5 เพื่อแสดงสัญลักษณ์ของเทคโนโลยีเว็บแขนงต่างๆ เพื่อให้เข้าใจง่ายและแยกหมวดหมู่ตามกัน
W3C แบ่งเทคโนโลยีในชุด HTML5 ออกเป็น 8 หมวด พร้อมไอคอนประกอบทุกหมวด ขอใช้ชื่อตามนั้น และเรียงลำดับกันไปเช่นเดียวกับเว็บ W3C HTML5 Logo

1. Semantics

HTML5 Semantic
เทคโนโลยีกลุ่ม Semantics คือตัว syntax ของภาษา HTML5 ที่แน่นอนว่าเปลี่ยนไปจาก HTML4 ซึ่งมีแท็กใหม่ๆ และคุณสมบัติ (atrribute) ใหม่ๆ เพิ่มขึ้นอีกพอสมควร
โดยโครงสร้างของภาษาแล้ว HTML5 ยังเหมือนกับ HTML ที่เราคุ้นเคย แต่เพิ่มแท็กใหม่ ตัดแท็กเก่า และเปลี่ยนวิธีใช้แท็กเก่าบางตัวออกไป รายละเอียดอ่านได้จาก HTML5 differences from HTML4 ของ W3C
ยกมาเป็นตัวอย่างพอให้เห็นภาพ
แท็กใหม่
แท็กกลุ่มนี้จะช่วยบ่งบอกความหมายของวัตถุในเว็บเพจได้ดีขึ้น เช่น จากเดิมเราใช้
ตัวอย่าง
  • section - บ่งบอกเซคชันของเนื้อหา
  • article - กำหนดขอบเขตของตัวเนื้อบทความ
  • aside - กำหนดขอบเขตของเนื้อหาเสริม (ล้อมกรอบ)
  • header - กำหนดขอบเขตของส่วนเริ่มต้นหรือส่วนหัวของเว็บไซต์ (อย่าสับสนกับ )
  • footer - กำหนดขอบเขตของส่วนท้ายของเว็บไซต์ พวกข้อความกำหนดสิทธิ์ต่างๆ
  • nav - บอกว่ามันเป็นส่วนนำทางของเว็บไซต์
  • figure - บอกว่าเป็นภาพหรือวิดีโอประกอบเนื้อหา (ข้างในสามารถซ้อนแท็ก img หรือ video พร้อมคำอธิบายได้อีกชั้น)
นอกจากนี้ส่วนของฟิลด์ยังมี attribute ใหม่อีกกลุ่มสำหรับ input type ที่เจาะจงกว่าเดิม เช่น จากเดิมเราใช้ ก็เปลี่ยนเป็น แทน
  • tel - เบอร์โทร
  • search - ช่องค้นหา
  • url
  • email
  • datetime
  • date
  • time
  • color
แท็กที่ถูกตัดออก
ส่วนใหญ่เป็นแท็กเก่าที่ทำหน้าที่กำหนดฟอร์แมตการแสดงผล ซึ่งย้ายไปใช้ CSS แทนหมดแล้ว นอกจากนี้ยังเอาแท็กที่เกี่ยวกับเฟรมทั้งหมดออกไป เพราะล้าสมัยแล้ว และแท็กที่ไม่ค่อยมีคนใช้อย่าง acronym (ใช้ abbr แทน) หรือ applet (ใช้ object แทน)
  • big
  • center
  • font
  • strike
  • frame
  • frameset
  • noframes
  • acronym
  • object
แท็กที่ถูกเปลี่ยนวิธีใช้
แท็กเก่าแต่เปลี่ยนความหมาย-วิธีใช้งาน
  • i - ไม่ได้หมายถึงการทำตัวเอียง (เพราะอยู่ใน CSS) แต่หมายถึงโทนเสียงของตัวข้อความที่เปลี่ยนแปลง
  • small - หมายถึงข้อความหรือคอมเมนต์ประกอบเนื้อหาหลัก ที่ควรจะแสดงด้วยตัวเล็กกว่าปกติ
  • strong - หมายถึงข้อความสำคัญ ไม่ใช่การเน้นด้วยตัวเข้ม
  • u - เป็นการบ่งชี้ว่าข้อความจุดนี้มีการแสดงผลแบบพิเศษ เช่น จงใจเขียนให้ผิดเพื่อเป็นตัวอย่าง หรือ ชื่อในภาษาจีน เป็นต้น
นอกจากแท็กหลักที่เปลี่ยนแปลงแล้ว เทคโนโลยีในหมวดนี้ยังรวมไปถึงเทคโนโลยีเว็บหลายๆ ชนิดที่มีอยู่แล้วในปัจจุบัน เช่น RDFa, Microdata, Microformats ที่ช่วยกำหนดความหมายให้กับเนื้อหา เพื่อนำไปประมวลผลต่อได้ง่ายขึ้นครับ
จะเห็นว่าในภาพรวมแล้ว HTML5 หมวด semantics จะช่วยให้ตัวโครงสร้างของเว็บเพจมีความหมาย (ในเชิงของ semantic web) มากขึ้น
รายละเอียดเพิ่มเติมอ่านได้จาก HTML5 Semantics - Smashing Magazine

2. Offline & Storage

HTML5 Offline & Storage
เทคโนโลยีในหมวดนี้ก็ตรงตามชื่อหมวด นั่นคือช่วยให้เว็บสามารถทำงานแบบออฟไลน์ได้ และเก็บข้อมูลไว้ใช้งานบนเครื่องของผู้ชมเว็บได้
ผมเคยเขียนเนื้อหาในหมวดนี้ไปแล้วครั้งหนึ่งในบทความ รู้จักกับวิธีการเก็บข้อมูล Local Storage ของ HTML5 ก็ขอเอามารียูสเพราะเนื้อหาเหมือนกันทุกประการ
Web Storage
เทคโนโลยีแรกคือ Web Storage ซึ่งเป็นการเก็บข้อมูลแบบง่ายๆ ในรูป key-value (ภาษาโปรแกรมบางภาษาเรียก dictionary) ซึ่งแยกย่อยได้อีก 2 อย่าง คือ
  • Session storage เก็บข้อมูลเฉพาะเซสชันการท่องเว็บนั้นๆ ปิดแท็บเมื่อไรข้อมูลก็หายไป ใช้ออบเจคต์ชนิด sessionStorage อันนี้ไม่ซับซ้อน
  • Local storage เก็บข้อมูลระยะยาว (persistence) โดยใช้ออบเจคต์ชื่อ localStorage ซึ่งจะซับซ้อนขึ้น เพราะเราสามารถเปิดเว็บเพจเดียวกันใน 2 แท็บหรือมากกว่า ซึ่งมันจะแชร์ข้อมูลก้อนเดียวกัน
ฟีเจอร์ Web Storage จะคล้ายกับ Google Gears เมื่อ 3-4 ปีก่อนหน้านี้ เพียงแต่ Web Storage รวมมากับ HTML5 เลย ไม่ต้องลงปลั๊กอินเพิ่มเองแบบ Gears
ฐานข้อมูล
การเก็บข้อมูลง่ายๆ แบบ key-value อาจไม่เพียงพอต่อความต้องการของนักพัฒนา HTML5 จึงเพิ่มวิธีการเก็บข้อมูลที่ซับซ้อนขึ้นมา ซึ่งก็คือฐานข้อมูลแบบที่เราคุ้นเคยนั่นเอง
ปัญหาของฐานข้อมูลใน HTML5 ก็คือมาตรฐานที่แยกเป็นสองทาง
  • Web SQL Database มันคือการนำ SQL มายัดใส่เบราว์เซอร์ (ส่วนมากนิยม SQLite) ตอนนี้ใช้ได้แค่เบราว์เซอร์ตระกูล WebKit และ Opera แนวทางนี้มีข้อเสียตรงความซับซ้อนของ SQL และเริ่มหมดความนิยมแล้ว (ทั้งที่มาตรฐานยังไม่เสร็จ)
  • IndexedDB แนวทางใหม่ที่สร้างขึ้นในภายหลัง ไม่ใช้ SQL แต่เก็บข้อมูลแบบ key-value เหมือนกับ Web Storage เพียงแต่เพิ่มการทำดัชนี (index) ช่วยให้หาข้อมูลได้รวดเร็วขึ้น และเพิ่มเรื่อง transactions เพื่อความปลอดภัยของข้อมูลมาด้วย
Blognone เคยลงเรื่อง Web SQL vs IndexedDB ไปครั้งหนึ่งแล้ว ย้อนอ่านรายละเอียดได้ในตอนเก่าครับ
File API
เราพูดถึงการเก็บข้อมูลแบบง่ายๆ และการเก็บลงฐานข้อมูลไปแล้ว ลำดับถัดไปคือการจัดการกับ "ไฟล์" นั่นเอง HTML5 มี API มาให้เราสองตัวคือ FileReader กับ FileWriter หน้าที่ก็ตามชื่อครับ
ปัญหาของ FileReader ที่จะต้องสนใจคือความแตกต่างระหว่างไฟล์ที่อยู่ในเครื่อง กับไฟล์ที่อยู่บนเว็บ ซึ่งกำลังพัฒนากันอยู่
ส่วน FileWriter มีข้อกังวลเรื่องความปลอดภัย เพราะต่อจากนี้ไปเว็บเพจจะสามารถเขียนไฟล์ในเครื่องเราได้ มาตรการแก้ไขจุดอ่อนนี้ก็ต้องพัฒนากันต่อไป
แคชสำหรับเวลาออฟไลน์ (App Cache)
เมื่อเว็บแอพพลิเคชันไม่ได้ต่อเน็ต ก็ต้องมีวิธีจัดการกับข้อมูลที่เกิดขึ้นระหว่างนั้น ซึ่งเป็นหน้าที่ของ AppCaching API ที่บอกว่าเว็บแอพพลิเคชันจะถูกเก็บไว้บนเครื่องนานแค่ไหน ทำให้เว็บแอพมีลักษณะคล้ายๆ กับแอพที่ติดตั้งแบบปกติมากขึ้น

3. Device Access

HTML5 Device Access
เทคโนโลยีหมวดที่สามจะเน้นความเชื่อมโยงกับฟีเจอร์ของฮาร์ดแวร์ (โดยเฉพาะฮาร์ดแวร์แบบพกพา) เช่น
  • Geolocation API เพื่อขอข้อมูลเชิงพิกัดของอุปกรณ์
  • เข้าถึงไมโครโฟนและกล้องถ่ายภาพของอุปกรณ์
  • เข้าถึงข้อมูลภายในตัวอุปกรณ์ เช่น สมุดที่อยู่ หรือข้อมูลการเอียงเครื่อง (tilt orientation)
ฟีเจอร์ในกลุ่มนี้จะไม่ได้อยู่ในรูปของแท็ก HTML โดยตรง แต่จะเป็น API ที่ฝั่งเบราว์เซอร์ต้องเตรียมไว้ให้ แล้วเว็บเพจค่อยเรียกใช้ผ่านจาวาสคริปต์อีกทีหนึ่ง
ในการใช้งานจริงๆ เราคงใช้ผ่านเฟรมเวิร์คจาวาสคริปต์ที่เตรียมเรื่องพวกนี้ไว้ให้แล้วมากกว่า เช่น jQuery Mobile, Sencha Touch หรือ SproutCore เป็นต้น

4. Connectivity

HTML5 Connectivity
เทคโนโลยีกลุ่มที่สี่เน้นการเชื่อมต่อกับเครือข่ายที่ดีขึ้น มี 2 อย่างที่สำคัญ
WebSockets
WebSockets เป็น API ที่ออกมาเพื่อต่อยอดแนวทางของ AJAX ในอดีต อธิบายง่ายๆ มันคือการ push ข้อมูลจากเซิร์ฟเวอร์มายังไคลเอนต์ (แบบเดียวกับ push mail ที่เรารู้จักกัน)
ในแง่เทคนิค การส่งข้อมูลแบบ HTTP แบบดั้งเดิมจะเปิดการเชื่อมต่อกับเซิร์ฟเวอร์เพื่อส่งข้อมูล แล้วตัดการเชื่อมต่อเมื่อใช้เสร็จ ดังนั้นการขอข้อมูลจากเซิร์ฟเวอร์เป็นระยะจึงทำได้ยาก เพราะต้องดึงข้อมูลจากเซิร์ฟเวอร์ (polling) เป็นระยะ ซึ่งเปลืองโหลดของเซิร์ฟเวอร์ไม่น้อย โดยเฉพาะกรณีที่ต้องเปิดการเชื่อมต่อ HTTP ค้างเอาไว้ (Long polling หรือ COMET)
WebSockets เกิดมาเพื่อแก้ปัญหานี้ โดยสร้างการเชื่อมต่อแบบ (เกือบ) ถาวรระหว่างเซิร์ฟเวอร์กับไคลเอนต์ เพื่อให้สองฝั่งส่งข้อมูลกันได้ตลอด ทั้งหมดรันอยู่บนโพรโตคอล TCP อีกชั้นหนึ่ง และไม่ได้วิ่งบนโพรโตคอล HTTP เพื่อประหยัดโหลดของ HTTP ครับ
ในการใช้งานเราจะเรียก WebSockets ด้วย
ws://
หรือถ้าต้องการการเชื่อมต่อแบบปลอดภัย
wss://
ข้อดีคือเบากว่า HTTP แต่ข้อเสียคือทั้งสองฝั่ง (โดยเฉพาะเซิร์ฟเวอร์) ต้องรองรับ WebSockets ด้วย จึงอาจจะใช้ไม่ได้ในทุกกรณี
ปัจจุบัน WebSockets เป็นมาตรฐานที่รับรองโดย IETF และกำลังผ่านกระบวนการเข้าเป็นมาตรฐานของ W3C
ข้อมูลเพิ่มเติม: WikipediaW3Cสอนการใช้งานที่ HTML5 Rocks
Server-sent Events (SSE)
WebSockets เป็นการส่งข้อมูลแบบสองทาง แต่ถ้าเราต้องการส่งข้อมูลทางเดียวจากเซิร์ฟเวอร์มายังไคลเอนต์ (เช่น notification ของ Facebook/Twitter) เราสามารถใช้เทคโนโลยีอีกตัวชื่อ Server-sent Events (SSE) แทนได้
SSE ถูกออกแบบมาเพื่อแก้ปัญหา polling ของ AJAX เช่นเดียวกับ WebSockets หลักการทำงานของ SSE คือเซิร์ฟเวอร์สามารถส่งข้อมูลไปยังไคลเอนต์ได้โดยตรง โดยที่ไคลเอนต์ไม่ต้องร้องขอ (GET Request) ก่อน
ความต่างของ SSE กับ WebSockets นอกจากจะเป็นเรื่องการส่งข้อมูลแบบทางเดียว/สองทางแล้ว ยังต่างกันที่ตัวโพรโตคอล เพราะ SSE จะรันอยู่บน HTTP ตามปกติ ทำให้สามารถใช้กับเซิร์ฟเวอร์ในปัจจุบันได้ทันที
ในการใช้งานจริง เราอาจเลือกได้ระหว่าง
  • การส่งข้อมูลด้วย WebSockets ทั้งสองทาง (บน WebSockets)
  • การรับข้อมูลจากเซิร์ฟเวอร์ด้วย SSE แล้วส่งกลับด้วย XMLHttpRequest (บน HTTP)
ข้อมูลเพิ่มเติม: WikipediaW3Cสอนการใช้งานที่ HTML5 Rocks

5. Multimedia

HTML5 Multimedia
เรื่องนี้เราพูดกันมาเยอะมาก และเริ่มใช้งานจริงกันแล้ว คงไม่ต้องลงลึกในบทความตอนนี้
อธิบายแบบสั้นๆ คือเดิมที่ HTML4 ขึ้นไปไม่สามารถแสดงผลเสียง-วิดีโอได้โดยตรง ต้องใช้วิธีฝัง แล้วติดตั้งปลั๊กอินเพื่อช่วยเล่นมัลติมีเดีย ซึ่งทำงานได้ตามนั้นแต่ก็มีปัญหายิบย่อยมากมายตามมาเช่นกัน
แต่พอเป็น HTML5 ได้กำหนดให้ HTML ต้องเล่นไฟล์เสียงและวิดีโอได้ในตัว จึงเป็นที่มาของแท็กใหม่
อย่างไรก็ตาม เรื่องมัลติมีเดียของ HTML5 กลับมีปัญหาประการใหม่เพิ่มเข้ามา นั่นคือ "สงคราม codec" ระหว่างเบราว์เซอร์สองค่ายใหญ่ ดังที่เราเห็นจากข่าว WebM+Ogg (สนับสนุนโดย Chrome/Firefox/Opera) vs H.264 (สนับสนุนโดย IE/Safari) นั่นเอง
(ดูข่าวหมวด codec ประกอบ)

6. 3D, Graphics & Effects

HTML5 - 3D, Graphics & Effects
หมวดที่หกเกี่ยวกับเรื่องกราฟิก แบ่งเป็น 4 ประการย่อยๆ
SVG (Scalable Vector Graphics)
เป็นภาษาตระกูล XML ที่ออกแบบมาสำหรับการวาดกราฟิกแบบเวกเตอร์ (พอเทียบเคียงได้กับ SWF ของ Adobe หรือ XAML ของไมโครซอฟท์) เทคโนโลยีนี้มีมานานพอสมควรแล้ว คงไม่ต้องลงรายละเอียดนะครับ
Canvas
แท็ก ถือเป็นของใหม่ที่สำคัญใน HTML5 เพราะมันช่วยเปลี่ยนลูกเล่นการแสดงผลของเว็บเพจไปอีกมาก
เดิมที HTML เป็นการวาดออบเจคต์ (เช่น ข้อความ รูป กล่องข้อความ ฯลฯ) ขึ้นมาเป็นหน้าจอ และสามารถตกแต่งออบเจคต์แต่ละตัวได้ในระดับหนึ่งผ่าน CSS (เช่น ใส่สีพื้น วาดเส้นขอบ ทำมุมโค้ง) แต่ในภาพรวม HTML ยังไม่สามารถแสดงกราฟิกแบบราสเตอร์ (raster) ได้ด้วยตัวมันเอง ต้องทำภาพมาแปะอีกทอดหนึ่ง
แท็ก canvas ที่ถูกเพิ่มเข้ามาช่วยให้เราสามารถ "วาดภาพ" ลงบนเว็บเพจได้โดยตรง (กำหนด canvas ในเพจ แต่สั่งวาดด้วยจาวาสคริปต์นะครับ) โดยขอบเขตของภาพที่วาดก็จะอยู่ในออบเจคต์ชื่อ canvas นั่นเอง
สิ่งที่เราสามารถใส่ลงไปในกรอบ canvas ได้แก่
  • รูปทรงพื้นฐาน สี่เหลี่ยม วงกลม เส้นตรง เส้นโค้ง พาธ (รูปทรงมีไม่เยอะเท่ากับ SVG)
  • ไฟล์รูปภาพ จะซ้อนกันกี่ชั้นก็ได้ตามสะดวก
  • แอนิเมชัน กำหนดให้วัตถุต่างๆ เคลื่อนไหว
  • แปลงสภาพวัตถุ (transformation) จะกำหนดให้หมุน เอียง บิดเบี้ยว ได้เหมือนกัน
  • ประกอบ-ซ้อนภาพวัตถุ (composition) เช่น นำสี่เหลี่ยมกับสามเหลี่ยมมา intersect เพื่อสร้างวัตถุแบบใหม่
ความต่างที่สำคัญของ SVG กับ canvas คือ
  • SVG ได้ผลลัพธ์เป็นเวกเตอร์ ส่วน canvas ได้ผลลัพธ์เป็นราสเตอร์ (ภายในกรอบวัตถุ canvas)
  • SVG สั่งวาดด้วยแท็กแบบ markup (ซับเซ็ตของ XML) ส่วน canvas สั่งวาดด้วยจาวาสคริปต์
รายละเอียดดูได้จาก WikipediaCanvas tutorial - Mozilla Developer NetworkW3Schools HTML5 Canvas
WebGL
โดยทั่วไปแล้ว การวาดภาพ-แสดงผลใน canvas เรามักใช้กับภาพ 2 มิติเป็นหลัก แต่ถ้าต้องการวาดภาพ 3 มิติ เราจะใช้ส่วนขยายของ canvas ที่เรียกว่า WebGL (Web-based Graphics Library)
WebGL เป็นไลบรารีกราฟิกที่พัฒนาอยู่บน OpenGL ES 2.0 ซึ่งเป็นไลบรารีกราฟิก 3 มิติมาตรฐานของวงการไอที แต่ดัดแปลงให้เรนเดอร์ภาพออกมาบนออบเจคต์ canvas ภายในเบราว์เซอร์ และสั่งงานได้ผ่านจาวาสคริปต์ ตอนเรนเดอร์ก็ทำผ่าน GPU ตามปกติ (ดูข่าวเก่าหมวด WebGL ประกอบ)
ขั้นตอนการวาดภาพ 3 มิติบน WebGL แทบไม่ต่างอะไรกับ canvas ปกติ เพราะเราต้องกำหนดบริเวณที่เป็น canvas ในเว็บเพจขึ้นมาก่อน เพียงแต่ตอนวาดในจาวาสคริปต์ เราจะสร้างออบเจคต์ชนิด WebGL ขึ้นมาแทน canvas ปกติ
ส่วนหลักการวาดวัตถุ 3 มิติคงไม่ต่างอะไรกับ OpenGL ครับ ใครเคยเขียนโปรแกรมกับ OpenGL คงใช้ WebGL ได้แทบจะทันที
สถานะตอนนี้ของ WebGL คือเบราว์เซอร์ทุกค่ายสนับสนุนแล้ว ยังเหลือฝั่งไมโครซอฟท์ที่ยังไม่ยอมสนับสนุน (เหตุผลหนึ่งเพราะอยู่บน OpenGL ไม่ใช่ DirectX)
ข้อมูลเพิ่มเติม Getting started with WebGL - Mozilla Developer Network
CSS3 3D
CSS3 นั้นต่างไปจาก CSS2 มาก เพราะมันไม่ใช่มาตรฐานเดี่ยวๆ แต่ประกอบด้วยมาตรฐานย่อยๆ จำนวน "หลายสิบ" ชนิด ซึ่งหนึ่งในนั้นคือ CSS3 3D Transforms ที่สามารถแปลงสภาพวัตถุบนเว็บเพจในแบบต่างๆ เช่น ขยายขนาด หมุนเอียงตามแกน xyz
ดูตัวอย่างได้ที่ WebKit (ต้องใช้ WebKit เข้าด้วยนะครับ) หรือ The Web Rocks (Gecko/WebKit)

7. Performance & Integration

HTML5 - Performance & Integration
หมวดที่เจ็ดเป็นการปรับปรุงประสิทธิภาพการทำงานของเว็บแอพ แบ่งออกเป็น 2 ส่วนใหญ่ๆ
Web Worker
อธิบายง่ายๆ Web Worker คือจาวาสคริปต์ที่ทำงานแบบมัลติเธร็ด เพื่อให้สคริปต์สามารถทำงานเบื้องหลังได้หลายๆ งานพร้อมกัน
การใช้งานเราสามารถสั่งได้ที่ตัวโค้ดจาวาสคริปต์โดยตรง โดยสร้างตัวแปรชนิด worker ขึ้นมาบอกเบราว์เซอร์ว่า โค้ดจาวาสคริปต์ส่วนนี้ ขอให้ทำงานแบบ Web Worker เพื่อประสิทธิภาพที่ดีขึ้น
รายละเอียดอ่านเพิ่มที่ WikipediaW3CMozillaHTML5 Rocks
XMLHttpRequest Level 2
ผมถือว่าผู้อ่าน Blognone คงรู้จัก XMLHttpRequest (XHR) ที่เป็นเทคโนโลยีพื้นฐานของ AJAX กันพอสมควรแล้ว อธิบายสั้นๆ สำหรับคนไม่รู้ XHR เป็นวิธีการโหลดข้อมูลเฉพาะบางส่วนของเว็บเพจ (ไม่ใช่ทั้งหน้า) ช่วยให้เราสามารถปรับปรุงข้อมูลบางส่วนของเพจได้ โดยไม่ต้องโหลดใหม่ทั้งหน้า ผลคือเว็บเพจที่อินเตอร์แอคทีฟมากขึ้นนั่นเอง
XMLHttpRequest Level 2 เป็นความพยายามของ W3C ที่จะพัฒนา XMLHttpRequest รุ่นแรกให้มีประสิทธิภาพ-ความสามารถมากขึ้น แบ่งได้ง่ายๆ 3 อย่าง ได้แก่
  • การแยกแยะเหตุการณ์ (event) แต่ละชนิดออกจากกัน ช่วยให้โปรแกรมเมอร์ติดตามและควบคุมการส่งข้อมูลได้ง่ายขึ้น
  • รองรับการอัพโหลดไฟล์จากฝั่งไคลเอนต์ (เดิมที่ไม่รองรับการส่งไฟล์) ซึ่งจะใช้ควบคู่กับ File API ในหัวข้อก่อน
  • ส่งข้อมูลแบบข้ามหลายโดเมน ซึ่งรุ่นก่อนเรียกได้เฉพาะโดเมนเดียวกัน
รายละเอียดอ่านได้จาก AJAX 2: What is coming with XMLHttpRequest Level 2? - JS Classes blog

8. CSS3

HTML5 - CSS3
CSS3 มีความสามารถเพิ่มขึ้นจาก CSS2 ในปัจจุบันมาก เพิ่มฟีเจอร์ของแวดวงสิ่งพิมพ์ที่เกี่ยวข้องกับการจัดหน้า การควบคุมการไหลของข้อความ และฟอนต์เข้ามาอีกมาก แต่ก็ยังมีเรื่องอื่นๆ เช่น 3D, เสียงพูด, แอนิเมชัน ฯลฯ (ดูข่าวเก่าเรื่อง CSS3 Regions ประกอบ)
เทคโนโลยีอีกตัวที่เกี่ยวข้องกันคือ Web Open Font Format (WOFF) ที่ช่วยให้เราฝังฟอนต์เข้ามาในเว็บเพจได้ด้วย
รายการของชุดเทคโนโลยีใน CSS3 ทั้งหมดดูได้จาก CSS3.info

สถานะการรองรับ HTML5 ของเบราว์เซอร์ต่างๆ

เทคโนโลยีทั้ง 8 หมวดเป็นตัวแทนของเทคโนโลยีเว็บรุ่นใหม่ อย่างไรก็ตาม เทคโนโลยีเยอะขนาดนี้ซับซ้อนมาก และต้องใช้เวลาอีกนานกว่าจะทำเสร็จ อย่างไรก็ตาม เบราว์เซอร์ในปัจจุบันก็เริ่มรองรับมาตรฐาน "ฉบับร่าง" ในบางประเด็นแล้ว และเว็บดังๆ บางแห่งก็เริ่มใช้ฟีเจอร์ HTML5 กับงานจริงแล้วเช่นกัน
เพื่อให้ติดตามได้ง่ายว่าเบราว์เซอร์ตัวไหนรองรับฟีเจอร์อะไรบ้าง ก็มีเว็บไซต์หลายแห่งทำตาราง-แผนภาพเปรียบเทียบให้ดูง่ายๆ เช่น
  • Wikipedia ข้อมูลละเอียดพร้อมลิงก์อ้างอิง
  • Can I Use ทำตารางเปรียบเทียบว่าคุณสมบัติใดใช้ได้บนเบราว์เซอร์ยี่ห้อไหน รุ่นไหนได้บ้าง
  • FindmebyIP.com ทำตารางเปรียบเทียบแบบดูง่ายๆ ภายในเว็บเพจหน้าเดียว
  • HTML5Test.com ทดสอบกับเบราว์เซอร์ที่เราใช้อยู่ในขณะนั้น และได้ผลลัพธ์ออกมาเป็นคะแนนรวม
  • HTML5 Readiness ทำเป็นแผนภาพ infographic แบบครึ่งวงกลม แยกตามมาตรฐานแต่ละส่วน (ใช้ข้อมูลจาก Can I Use อีกทีหนึ่ง)

ข้อมูลเพิ่มเติม

คัดมาเฉพาะอันที่เจ๋งๆ นะครับ ตามไปอ่านกันต่อได้
เว็บไซต์ของผู้ผลิตเบราว์เซอร์
  • HTML5 Rocks ของกูเกิล มีทั้งเอกสาร tutorial และโค้ดสำหรับทดสอบ-สาธิตการทำงาน
  • หน้าแนะนำ HTML5 ของ Mozilla Developer Network รวมข้อมูลเชิงเทคนิคไว้ครบถ้วน
  • HTML5 Labs เว็บไซต์สำหรับนักพัฒนา HTML5 ของไมโครซอฟท์
  • HTML5 Please แนะนำโดยคุณ @pittaya
เดโม
เอกสารอื่นๆ
  • HTML5 for Web Developers สเปก HTML5 แบบอ่านง่าย เหมาะสำหรับนักพัฒนาเว็บ ตัดส่วนที่ไม่สำคัญในสเปกของ W3C ออกไป
  • W3Schools HTML5 Tutorial เป็น online reference/tutorial แบบสั้นๆ ตามสไตล์ของ W3Schools
  • เอกสารของ InfoWorld เป็น PDF ที่เขียนโดยนิตยสาร InfoWorld ต้องสมัครสมาชิกก่อนจึงจะโหลดได้ (โหลดฟรี) ข้อมูลละเอียดและเนื้อหาอัพเดต
  • Dive Into HTML5 หนังสือแจกฟรีของ Mark Pilgrim (แนะนำโดยคุณ j03w)

    ขอบคุณเว็บ : www.blognone.com/news/29947/รู้จักกับ-html5-ภาคหนึ่ง-html5-คืออะไร