Hiển thị các bài đăng có nhãn HTML5. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn HTML5. Hiển thị tất cả bài đăng

Thứ Tư, 26 tháng 6, 2013

Intel trình diễn dự án cho phép lập trình ngôi nhà thông minh một cách dễ dàng

Intel_ngoi_nha_thong_minh

Bộ phận nghiên cứu của Intel mới đây đã trình diễn một hệ thống giúp người dùng điều khiển thiết bị gia dụng thông minh một cách đơn giản. Hệ thống này có khả năng giao tiếp với hầu hết các bo mạch điều khiển hiện có trên thị trường (như Arduino, Beagle Boards,...) thông qua nhiều loại kết nối không dây khác nhau (Wi-Fi, Bluetooth, Zigbee...). Nó sẽ cho phép một người dùng bình thường lập trình cho những thứ như bóng đèn Wi-Fi, máy chơi nhạc, camera, máy điều hòa thông minh, ổ khóa thông minh mà không cần nhiều kiến thức về máy tính hay điện tử.

Intel cho biết trong hệ thống này sẽ có một "lớp trung gian" để các phần cứng trao đổi thông tin theo giao thức ngang hàng. Ví dụ, khi một chiếc webcam phát hiện em bé đang khóc, nó sẽ ra lệnh cho một đầu chơi nhạc gần đó phát ra bài hát thiếu nhi, còn nếu em bé thức dậy thì camera sẽ chụp một bức ảnh rồi chia sẻ nó lên Twitter. Tất cả những hành động như trên đều được thiết lập thông qua một môi trường mở dựa trên HTML5, đi kèm theo đó là giao diện đồ họa đơn giản để lập trình. Trong video bên dưới, bạn sẽ thấy một app chạy trên Android và người dùng chỉ cần kéo thả để thiết lập chuỗi công việc cho từng thiết bị đang có mặt trong hệ thống. Các nhà sản xuất cũng có thể tạo ra những module dành riêng cho phần cứng của mình để người dùng tải về và sử dụng theo tùy theo ý muốn.

Ngoài việc dễ dùng, một lợi điểm khác của hệ thống này đó là nó không cần đến máy chủ do phần cứng đều giao tiếp bằng giao thức ngang hàng, do đó nếu Internet có vấn đề thì các thiết bị vẫn có thể nói chuyện với nhau một cách bình thường. Hiện dự án này vẫn tiếp tục được Intel phát triển, chưa rõ bao giờ thì nó mới chính thức đi vào thương mại hóa.



Thứ Hai, 27 tháng 5, 2013

Tìm hiểu về Firefox OS, hệ điều hành di động xây dựng trên các chuẩn web mở

Firefox_OS

Hiện nay chúng ta đã quá quen thuộc với những cái tên như iOS, Windows Phone, Android, Symbian. Chúng là những hệ điều hành có mặt trên hầu hết các mẫu smartphone và tablet đang có mặt trên thị trường, trên tất cả các phân khúc từ bình dân cho đến cao cấp. Đến đầu năm nay, chúng ta có thêm một thành viên mới gia nhập vào lĩnh vực này, đó chính là Firefox OS. Đây là một OS nguồn mở được Mozilla, nhà phát triển của trình duyệt Firefox, xây dựng riêng cho những điện thoại thông minh cũng như máy tính bảng. Điểm đặc biệt của Firefox OS đó là nó hoạt động dựa trên các chuẩn web mở như HTML5, JavaScript, còn phần cứng thì chạy trên các chip của Qualcomm sản xuất. Trong bài viết này mình sẽ chia sẻ với các bạn vài thông tin về lịch sử cũng như đặc điểm và tiềm năng của Firefox OS trong thế giới di động hiện tại.

1. Lịch sử ra đời và những thiết bị đầu tiên chạy Firefox OS

Vào ngày 25/7/2011, Tiến sĩ Andreas Gal, giám đốc bộ phân nghiên cứu của Mozilla giới thiệu đến một số lập trình viên về dự án "Boot to Gecko" (B2G) mà hãng đang phát triển. Bản nháp của dự án này nằm là nhằm "theo đuổi mục tiêu xây dựng một hệ điều hành hoàn chỉnh và độc lập cho thế giới web mở". Hệ điều hành này phải giúp lập trình viên có thể xây dựng được các ứng dụng nền web tốt như những ứng dụng nội tại (native app, vốn là những phần mềm mà các bạn thường sử dụng trên BlackBerry 10, iOS, Android hay Windows Phone). Tất nhiên, vì Boot to Gecko nhắm đến các thiết bị di động nên nó phải hỗ trợ những tính năng mà người dùng mong muốn ở một sản phẩm hiện đại, ví dụ như khả năng nghe gọi, nhắn tin, chụp ảnh, quay phim, kết nối 3G/Wi-Fi, GPS.

Kể từ đó, Mozilla đặt ra mục tiêu xây dựng Boot to Gecko với những trọng tâm gồm có:
  • Web API: những hàm lập trình giúp ứng dụng nền web truy cập được những chức năng của thiết bị và hệ điều hành, ví dụ như camera, chipset, bộ thu phát sóng không dây, bộ quản lí nguồn,…
  • Một mô hình phân quyền cho phép thư viện API có thể được sử dụng một cách an toàn bởi các ứng dụng nền web.
  • Những dòng mã ở cấp thấp nhất thì chịu trách nhiệm thiết lập nên một nền tảng cơ bản, đồng thời giúp Boot to Gecko có thể khởi động được khi hoạt động trên những phần cứng của thiết bị Android.
Boot_To_Gecko_GAIA_giao_dien
Một số nguyên mẫu về giao diện của Boot to Gecko thuở sơ khai
Đến ngày 2/7/2012, Mozilla ra quyết định đổi tên Boot to Gecko thành Firefox OS. Đến đây thì chắc các bạn đã cảm thấy quen thuộc hơn vì Firefox chính là trình duyệt nổi tiếng cũng do Mozilla phát triển. Ngay từ thời điểm trứng nước này, Firefox OS đã đón nhận sự hỗ trợ khá tốt từ phía các nhà mạng trên thế giới như Deutsche Telekom, Smart, Sprint, Telecom Italia, Telefonica và Telenor. Riêng Telefonica và phòng nghiên cứu Innovation Labs của Deutsche Telekom đã công bố hỗ trợ cho dự án kể từ trước đó khá lâu. Cũng trong dịp 2/7, Mozilla cho biết các thiết bị đầu tiên sử dụng Firefox OS sẽ được sản xuất bởi TCL Communication Technology/Alcatel One Touch và ZTE, tất cả đều chạy trên vi xử lý Snapdragon của Qualcomm.

firefox-phone

Mười tám ngày sau đó, tức 20/7/2012, Mozilla đang tải phiên bản nightly (bản thử nghiệm rất sơ khai" của Firefox lên mạng, đồng thờ cung cấp một phần mềm giả lập để cho phép các nhà phát triển dùng thử hệ điều hành này trên Windows, OS X và Linux. Ngay lập tức những hình ảnh về giao diện của Firefox OS được truyền đi khắp Internet và nó gây được ấn tượng bởi sự đơn giản trong thiết kế nhưng vẫn sinh động và bắt mắt. Và tất nhiên, tất cả những ứng dụng dành cho Firefox OS đều được thiết kế và lập trình bằng HTML5, JavaScript cùng nhiều chuẩn web mở khác, vốn đang được sử dụng trên rất rất nhiều website trên toàn thế giới.

Đến tháng 9 năm 2012, hàng loạt tin tức rò rỉ về Firefox OS rò rỉ trên mạng. Đầu tiên là hình ảnh Firefox Marketplace, kho ứng dụng của Firefox OS, sau đó đến lượt các ảnh rò rỉ Firefox OS trên thiết bị thực tế. Ngay cả một hãng thông tấn lớn như Wall Street Journal cũng dẫn nguồn đáng tin cậy để tiết lộ ngày ra mắt của Firefox OS cùng với các thiết bị dùng chip Qualcomm.

Tới cuối tháng 9, Mozilla lên tiếng chia sẻ về những triết lý thiết kế mà hãng đã áp dụng cho đứa con của mình. Trên blog của hãng, nhà thiết kế Patryk Adamczyk đã đưa ra chi tiết về cách thức mà nhóm phát triển tạo ra giao diện cho hệ điều hành, cách sử dụng icon, phương pháp phối hợp chữ với nhau cũng như các thành phần âm thanh đã được sử dụng để làm Firefox OS trở nên hiện đại và đẹp hơn. Mozilla cũng có nhắc đến việc chọn màu nền, trong đó gam màu tối chủ yếu được dùng cho những ứng dụng giải trí để mang lại trải nghiệm "như đang xem cine", còn màu sáng thì dành cho các tiện ích nhằm "tạo cảm giác như đang trong văn phòng". Việc chọn màu cho icon cũng giống như thế, trong đó những biểu tượng cho ứng dụng có liên quan đến điện thoại sẽ có màu xanh lá, phần mềm giải trí thì xanh dương, công cụ làm việc thì màu cam, còn phần cài đặt và tiện ích khác là màu xám.

500px

Đến ngày 12/12/2012, Mozilla chính thức ra mắt phiên bản 1.0 của công cụ giả lập Firefox OS. Đến thời điểm này, người ta đã có cái nhìn rất chi tiết về hệ điều hành mà Mozilla ấp ủ bấy lâu nay. So với bản nightly, giao diện được cải tiến khá nhiều, chủ yếu theo hướng dễ nhìn hơn và đơn giản hơn nhưng vẫn giữ lại vẻ sinh động vốn có. Vì việc cài đặt bộ giả lập này rất dễ dàng, do đó người dùng bình thường cũng có thể thử trải nghiệm xem Firefox trông ra sao, cách hoạt động như thế nào.

Ngày 22/1/2013, Mozilla công bố PeakKeon, hai smartphone chạy Firefox OS được thiết kế chủ yếu nhắm đến các nhà phát triển và lập trình viên. Thực tế, hai chiếc điện thoại này đơn giản chỉ là thiết bị phần cứng được Mozilla dùng để đặt hệ điều hành vào bên trong - tương tự như những gì RIM đã thực hiện với chiếc BlackBerry Dev Alpha của hãng. Tuy nhiên khác với Dev Alpha, hai smartphone này có tích hợp chip 2G/3G, vì vậy nó có thể thực hiện các tính năng thoại, tin nhắn như thông thường.

firefoxphone

Về cấu hình phần cứng, đầu tiên là Keon, máy được trang bị màn hình 3,5", độ phân giải HVGA (480 x 320), CPU Snapdragon S1, xung nhịp 1GHz, RAM 512 MB, camera 3MP. Trong khi đó, Peak, như đã nói ở trên có phần cao cấp hơn khi có màn hình 4,3", qHD, CPU Snapdragon S4 lõi kép, xung nhịp 1,2GHz. Ngoài ra, pin của Peak cũng có dung lượng cao hơn Keon (1800 mAh so với 1580 mAh).

Ngày 25/3/2013, thời điểm quan trong cuối cùng cũng đã đến. Tại triển lãm MWC 2013, Mozilla đã cùng hai đối tác là ZTE và Alcatel giới thiệu hai sản phẩm thương mại đầu tiên chạy Firefox OS: ZTE OpenAlcatel One Touch Fire. Cả hai đều được thiết kế dựa trên thiết bị tham chiếu Keon. ZTE Open sử dụng màn hình 3,5" độ phân giải 320 x 480, CPU một nhân Cortex-A5 1GHz, RAM 256MB, bộ nhớ trong 512MB, hỗ trợ mở rộng bằng thẻ microSD. Open sở hữu máy ảnh phía sau 3,2 megapixel, kết nối Wi-Fi, Bluetooth, GPS và pin 1200mAh. Chiếc One Touch Fire của hãng Alcatel cũng có cấu hình tương tự như trên, chỉ khác là pin được nâng lên 1400 mAh. Open và One Touch Fire sẽ nhắm vào phân khúc tầm thấp và có nhiều tùy chọn màu sắc khác nhau.

ZTE_Open_Alcatel_One_Touch_Fire

Với sự xuất hiện của hai thiết bị này, Mozilla đã một lần nữa nhấn mạnh lại rằng Firefox OS sẽ không đối đầu trực tiếp với các nền tảng cao cấp hiện hữu như iOS, Android hay Windows Phone. Thay vào đó, hệ điều hành của Mozilla sẽ đánh vào phân khúc điện thoại giá rẻ nhằm đưa trải nghiệm sử dụng smartphone đến người dùng tại các thị trường mới nổi trên thế giới. Đó chính là lý do mà chúng ta thấy được cấu hình thấp của hai chiếc Open và One Touch Fire.

2. Đối tác phần cứng

Như chúng ta đã biết, Mozilla là bên chịu trách nhiệm phát triển phần mềm và nền tảng, còn muốn đưa được thiết bị đến người tiêu dùng thì không thể không kể đến các hãng làm phần cứng. Ở MWC 2013, Mozilla thông báo rằng ngoài ZTE và Alcatel, hãng cũng sẽ bắt tay với LG và Huawei. Sony cũng có một động thái khiến giới công nghệ bất ngờ khi tuyên bố nhảy vào mảng Firefox OS. Bob Ishida, quyền CEO và trưởng bộ phận sản phẩm của Sony Mobile, cho biết các kĩ sư của hãng "hiện đang làm việc với Firefox OS và HTML5, những công nghệ đang tiến hóa và có tiềm năng lớn". Sony kì vọng thiết bị đầu tiên sẽ được đưa ra thị trường trong năm 2014. Ishida nói thêm rằng Firefox OS sẽ tạo cơ hội để Sony tiếp cận với các phân khúc mới, đồng thời mang đến cho khách hàng nhiều sự lựa chọn hơn với những thiết bị "cao cấp" của Sony.

doi_tac_cung
Một số đối tác phần cứng và nhà mạng hợp tác với Mozilla trong việc phát triển Firefox OS

Được biết những thiết bị đầu tiên chạy Firefox OS sẽ được ra mắt vào khoảng giữa năm nay, có thể là vào tháng 6 hoặc tháng 7 tùy vùng miền. Nơi đầu tiên được phân phối các máy Firefox OS sẽ là Nam Mỹ, sau đó đến lượt Châu Á và Châu Âu. Mỹ cũng sẽ có máy Firefox OS nhưng phải đến tận năm 2014 các hãng mới mang sản phẩm của mình đến nơi này.

3. Vi xử lí Qualcomm và vai trò đối với Firefox OS

Ngoài những bên trực tiếp sản xuất thiết bị, Mozilla còn hợp tác riêng với Qualcomm để tối ưu hóa hệ điều hành của mình cho những vi xử lí Snapdragon. Qualcomm nói rằng "với Firefox OS, các lập trình viên có thể tận dụng sức mạnh của Snapdragon bằng cách sử dụng HTML5 để truy cập đến từng tính năng của thiết bị". Chúng ta có thể lấy ví dụ hai chiếc ZTE OpenAlcatel One Touch Fire, cả hai đều sử dụng chip Qualcomm MSM7225A một nhân Cortex-A5 với xung nhịp 1GHz, đi kèm theo đó là bộ xử lí đồ họa Adreno 200. Chip này chỉ thuộc dòng Snapdragon S1, tuy nhiên nó vẫn đủ sức mạnh để vận hành một nền tảng mở chủ yếu dựa trên các chuẩn web thông dụng và hơn hết là không yêu cầu phần cứng quá mạnh mẽ. Qualcomm MSM7225A có khả năng cung cấp những tài nguyên cần thiết cho hệ thống một cách hợp lí nhưng vẫn đảm bảo được hiệu quả sử dụng năng lượng. Nói cách khác, việc Firefox OS kết hợp cùng chip Qualcomm hứa hẹn sẽ mang lại thời gian sử dụng pin dài cho người dùng.
QSnap_Logo_Vert_RGB_PNG
Ở thời điểm hiện tại, chúng ta khó có thể kì vọng những SoC cao cấp của Qualcomm như Snapdragon S4 Pro, Snapdragon 600, Snapdragon 800 sẽ xuất hiện trên các máy Firefox OS bởi chi phí còn khá cao, trong khi mục tiêu của Firefox OS là những thị trường mới nổi, nơi người ta cần một chiếc máy rẻ và đủ tính năng. Qualcomm nói họ sẽ tiếp tục làm việc với Mozilla để "giúp Firefox OS hoạt động mượt mà trên một số vi xử lí Snapdragon mới. Hi vọng trong tương lai chúng ta sẽ được thấy Snapdragon S2, S3, S4 Play, thậm chí là Snapdragon 200/400 xuất hiện cùng với Firefox OS.

qualcomm-snapdragon

Mozilla cũng không loại trừ khả năng họ sẽ ........ các phân khúc tầm trung và tầm thấp trong tương lai không xa. Có lẽ khi đó thì chúng ta mới thấy được các SoC "đỉnh" của Qualcomm được tích hợp vào các thiết bị Firefox OS. Còn bây giờ, Mozilla và Qualcomm sẽ tập trung khai thác phân khúc bình dân.

4. Các công nghệ web sử dụng trong Firefox OS và kiến trúc hệ điều hành

Như đã nói ở trên, Firefox OS được xây dựng dựa trên rất nhiều chuẩn web mở nhằm tạo sự tương thích giữa ứng dụng dụng với hệ điều hành, đồng thời cho phép hiệu năng hoạt động của web app có thể sánh với native app. Để phục vụ cho điều đó, Firefox OS có ba lớp phần mềm chính, tất cả đều được dựng trên nền Linux.

Gonk (còn gọi là lớp hạ tầng)

Lớp này bao gồm nhân Linux, các driver, modem firmware và một thành phần nhỏ bên trong gọi là lớp giả lập phần cứng (Hardware Abstraction Layer - HAL, có nhiệm vụ như một "driver của mainboard" để ẩn đi sự khác biệt về phần cứng đối với kernel của OS. Nhờ có HAL mà người ta sẽ không phải viết lại kernel mỗi khi đổi sang dùng phần cứng mới).

Gonk còn bao gồm nhiều thư viện phổ biến từ những dự án mã nguồn mở như BlueZ (bộ giao thức để dùng Bluetooth với Linux), libusb (thư viện để kiểm soát việc trao đổi dữ liệu qua cổng USB), tập lệnh kiểm soát đèn LED và các nút cứng, màn hình cảm ứng, âm thanh, hình ảnh, kiểm soát năng lượng,… Riêng HAL thì chia sẻ nhiều thành phần với HAL của Android, chủ yếu để ẩn đi sự khác biệt giữa các bộ thu phát GPS, camera và nhiều thứ khác. Chúng ta có thể xem Gonk như một bản distro Linux cực kì đơn giản và nó cho phép truy cập thẳng đến phần cứng, điều mà không nhiều hệ điều hành di động khác có thể làm được.

Gecko Runtime

Gecko là một môi trường chạy ứng dụng dành cho Boot to Gecko, và giờ là cho Firefox. Gecko được tích hợp các chuẩn mở như HTML, CSS, JavaScript, vốn là những công cụ hết sức quen thuộc để xây dựng nên hầu hết trang web trên thế giới. Ví dụ như Tinh tế chẳng hạn, nó được viết ra bằng HTML5 (xây dựng bộ khung và các thành phần chính), CSS3 (dùng để dàn bố cục, trang trí web) và JavaScript (lập trình sự kiện, tác vụ,…). Gecko còn mang trong mình các bộ giao thức về mạng, đồ họa, dàn trang web, máy ảo (dùng cho JavaScript) cũng như các cổng giao tiếp.

Gaia

Gaia là tên của giao diện người dùng trên Firefox OS, nó kiểm soát mọi thứ được vẽ ra trên màn hình. Gaia có màn hình khóa, màn hình chủ, trình gọi điện, trình nhắn tin, ứng dụng camera, đồng hồ và tất cả những ứng dụng bạn mong chờ ở một smartphone hiện đại. Ngoài ra Gaia cũng chứa một kho ứng dụng trực tuyến mang tên Firefox Marketplace, nơi người dùng có thể lên đến tải về và cài đặt phần mềm vào thiết bị của mình, tương như BlackBerry App World, Apple App Store, Google Play... Gaia được viết hoàn toàn bằng các chuẩn web mở mà mình đã nói đến ở trên. Được biết lớp này giao tiếp với hệ điều hành thông qua các hàm Open Web API, vốn được tích hợp trong Gecko. Mozilla cho nói rằng các ứng dụng của bên thứ ba có thể được cài song song với Gaia.

Sau đây là sơ đồ của toàn bộ kiến trúc của Firefox OS
Ghi chú: mũi tên chỉ hướng trao đổi dữ liệu giữa các lớp

Kien_truc_FirefoxOS

5. Những đối thủ cạnh tranh với Firefox OS

Hiện tại, hệ điều hành Android của Google đang giữ ví trí thống trị trong làng smartphone với thị phần xấp xỉ 70% theo số liệu từ công ty nghiên cứu IDC. So với chỉ một năm trước đó, Android đã có mức tăng trưởng cực kì ấn tượng, lên đến 101%, tức là tăng gần gấp đôi số thiết bị có mặt trên thị trường. Theo sau đó là iOS của Apple với thị phần 18,8%. Cả Android lẫn iOS đều được chống lưng bởi hai công ty lớn trong lĩnh vực công nghệ, họ lại có nhiều năm kinh nghiệm trong việc phát triển mobile OS, đồng thời đã xây dựng được mối quan hệ dài lâu với các hãng làm điện thoại, phần cứng nổi tiếng. Do đó, trong tương lai gần, Firefox OS rất khó giành được vị trí của Android và iOS.

Vậy còn vị trí sau đó thì sao? Hiện tại hạng ba đang thuộc về BlackBerry, theo sau đó là Symbian rồi đến Windows Phone. Lại một lần nữa, ba OS này đều được hỗ trợ bởi những tập đoàn khổng lồ là BlackBerry, Nokia, Microsoft, tuy nhiên xu hướng và sở thích của người tiêu dùng thì không nghiên nhiều về phía ba OS này nếu so với Android và iOS. Nếu muốn chen chân vào một trong ba chỗ này, Firefox OS sẽ cần phải làm nhiều việc hơn là chỉ nhắm đến thị trường giá rẻ. Chúng ta được biết rằng Firefox OS rồi cũng sẽ ........ phân khúc trung và cao cấp, tuy nhiên đây chỉ là kế hoạch dài hạn của Mozilla mà thôi.

Không thể không kể đến hàng loạt hệ điều hành di động đã, đang và sắp ra mắt trong thời gian tới. Ví dụ, cuối năm nay chúng ta sẽ có thêm Tizen, một OS di động phát triển bởi Samsung và Intel. Ngoài ra còn có Ubuntu, một bản distro Linux đã quá nổi tiếng trên PC do Canonical xây dựng. Bada, Jolla, Aliyun hay thậm chí là các thiết bị Asha của Nokia cũng có thể được xem là những đối thủ của Firefox OS trong phân khúc tầm thấp.

6. Lợi thế của Firefox OS

Trước tiên, như đã nói ở trên, nhu cầu của người tiêu dùng đối với các hệ điều hành di động khác Android/iOS không phải là một con số quá lớn, thậm chí một số còn đang có xu hướng giảm sút. Đây là một lợi thế mà nếu tận dụng tốt, Firefox OS có thể nhanh chóng khẳng định chỗ đứng của mình trên lĩnh vực smartphone. Không loại trừ khả năng hãng có thể vươn lên hạng ba nếu Mozilla đề ra được những chiến lược đúng đắn, cả trong ngắn hạn và dài hạn.

Việc nhắm đến phân khúc giá rẻ trong những bước đi đầu tiên cũng là một quyết định đúng đắn của Firefox OS. Theo lời CEO của Mozilla, Gary Kovacs, hệ điều hành mà công ty của ông đang phát triển có khả năng thu hút được khoảng 2 tỉ người smartphone, trong đó hầu hết là các tầng lớp không có hầu bao dư dả để nhiều đầu tiên vào điện thoại. "Liệu một người nông dân ở miền quê Ấn Độ có cùng nhu cầu và điều kiện với một luật sư ngồi ở New York?".

Ở trên là các vấn đề về thị trường, ngoài ra những đặc tính kĩ thuật của bản thân Firefox OS cũng góp phần tạo nên lợi thế cạnh tranh cho nó. Firefox OS là một hệ điều hành mã nguồn mở, do đó về lý thuyết thì các hãng sản xuất phần cứng sẽ không phải chi tiền (hoặc chi quá nhiều tiền) để tích hợp Firefox OS lên các thiết bị, nhờ vậy mà giá thành cũng được giảm xuống. Mục tiêu tiếp cận giới bình dân của Mozilla được củng cố.
edge_code_htmlcssjs
Bộ ba quyền lực làm nền tảng cho ứng dụng web

Không thể không kể đến những nền tảng web mở như HTML, CSS, JavaScript vốn đang được sử dụng rất rộng rãi trên toàn thế giới. Chính sự phổ biến này và mở sẽ thu hút lập trình viên đến với Firefox, từ đó xây dựng nên một hệ sinh thái ứng dụng phong phú. Mozilla cũng từng hứa rằng Firefox "sẽ không bị giới hạn bởi những điều lệ và chính sách như những các nền tảng độc quyền hiện tại". Lập trình viên, nhất là những người đã quen làm việc với Mozilla và Firefox, có thể tận dụng các "bộ ba quyền lực" HTML5, CSS3 và JavaScript để nhanh chóng biến trang web của mình thành một ứng dụng nền web rồi đem phân phối lên Firefox Marketplace. Kinh nghiệm nhiều năm của Mozilla trên thế giới web cũng sẽ giúp đỡ rất nhiều trong quá trình Firefox OS lớn lên. Hiện đã có một số đối tác lớn cam kết làm app cho Firefox OS, chẳng hạn như Twitter, Facebook, Box, EA Games, Disney, eBay...

doi_tac_mem

Theo dự kiến, mùa hè năm nay sẽ là thời điểm những thiết bị Firefox OS được bán ra thị trường. Đến lúc đó, chúng ta sẽ biết phản hồi của người dùng với hệ điều hành này ra sao, tiềm năng của nó có thể mở rộng thêm đến mức nào. Với những lợi thế từ bên trong kiến trúc của mình cộng với các thay đổi trong thế giới smartphone hiện đại, Firefox OS hoàn toàn có khả năng trở thành một hệ điều hành thay thế cho những ai không đủ điều kiện sắm máy iOS/Android. Hi vọng Firefox OS sẽ thành công.


Thứ Sáu, 24 tháng 5, 2013

Responsive Web Design là gì và nó giúp ích như thế nào cho việc duyệt web trên thiết bị di động

Responsive_Web_Tinhte_500px

Năm 2010, trang web A List Apart cho đăng tải một bài viết với tiêu đề "Responsive Web Design" (tạm dịch: "thiết kế web có độ phản hồi cao"). Bài viết này nói về việc áp dụng nhiều bố cục trang web cho các loại kích cỡ màn hình khác nhau chứ không chỉ thiết kế một giao diện cố định như người ta vẫn thường làm trước đó. Kể từ đây, giới lập trình web bắt đầu để ý hơn đến responsive web design (RWD). Cộng với sự phát triển của các chuẩn HTML5CSS3, RWD đã trở thành một thứ quan trọng mà quản trị viên hay chủ sỡ hữu website cần phải nghĩ tới trong bối cảnh ngày càng nhiều thiết bị di động với đủ các kích cỡ, đủ loại độ phân giải màn hình khác nhau được tung ra thị trường. Vậy RWD là gì và ảnh hưởng của nó đến chúng ta như thế? Trong bài viết này mình xin chia sẻ một ít thông tin với các bạn.

Người ta bố cục trang web như thế nào?

Để biết được RWD, trước tiên chúng ta hãy cùng tìm hiểu xem người ta làm như thế nào để có được một website hoàn chỉnh với đủ màu sắc, hình ảnh chứ không phải là hàng nghìn dòng chữ khô khan.

Trước hết, để viết ra được một trang web, người ta sẽ dùng đến ngôn ngữ HTML (Hyper Text Markup Language) và lưu tập tin dưới dạng *.html. File này thực chất chỉ là một tập tin văn bản, tuy nhiên nó bao gồm rất nhiều "thẻ" (tag) được chuẩn hóa để khi trình duyệt đọc vào nó biết phải làm gì với tag. Tag thường được viết theo một cặp, tức là tag mở và tag đóng. Ví dụ, chúng ta có tag <p> để bắt đầu một đoạn văn bản mới, sau khi viết văn bản xong thì sẽ đóng lại bằng </p>.

Trong số những tag của HTML có một cặp tag đặc biệt là <div></div> (div là division, tức là "chia cắt"). Nó dùng để chia trang web thành nhiều phần khác nhau, và mỗi phần sẽ đại diện cho một bộ phận của web. Lấy ví dụ ở Tinh tế, chúng ta có một div để hiển thị phần đầu trang (chỗ có logo tinhte), một div nữa nằm bên dưới để hiển thị menu, một div khác để hiển thị nội dung và div cuối cùng dành cho việc hiển thị sơ đồ trang. Các div còn có thể lồng vào nhau nữa.

div_tinhte
Các div mà Tinh tế dùng, nhiều ha mấy bạn

Một thứ ngôn ngữ thứ hai được sử dụng trong thiết kế web là CSS (Cascading Style Sheet). CSS có thể nhúng như là một phần của file HTML hoặc nằm trong file riêng. Người ta sẽ dùng CSS để viết ra những dòng mã quy định kích thước các div, màu nền, ảnh nền, khung viền, nói chung là để trang trí các thành phần đồ họa trên web. Ngoài ra, CSS còn dùng để bố cục trang (layout), tức sắp xếp vị trí các div lại tùy theo mục đích của người thiết kế. Ví dụ, bạn có thể dùng CSS để bảo một div phải nằm ép sát vào cạnh phải của trình duyệt, div còn lại nằm kế bên và cả hai kéo dài đến cuối trang chứ không nằm cạnh nhau một cách vô trật tự như khi chưa xài CSS.

Nhận biết các loại thiết bị khác nhau và áp dụng RWD

Để nhận biết thiết bị nào đang truy cập vào trang web, người ta có rất nhiều cách. Thứ nhất, mỗi trình duyệt đều có một chuỗi kí tự cũ thể để xác định tên, bộ nguồn dựng trang của chính nó. Các website được phép đọc chuỗi này để biết được rằng người dùng đang dùng trình duyệt nào, thậm chí là thiết bị nào, tên gì để vào web. Ví dụ, UserAgent của IE 10.0
còn của Safari trên iPad
Khi biết được máy nào đang truy cập website, người ta có thể dễ dàng xác định kích cỡ màn hình và nhiều thông tin khác liên quan đến thiết bị, từ đó dùng mã tinh chỉnh lại bố cục web ngay khi người dùng mới truy cập vào. Khi bạn truy cập vào một số trang web nhất định, nó cũng dùng UserAgent để biết bạn đang dùng máy nào và đưa ra đề xuất tương ứng (ví dụ, vào https://www.google.com/intl/en/chrome/browser/ bằng máy Mac thì nút download là dành cho Mac, vào bằng máy Windows thì nút dowload lại cho phép tải file exe của Windows).

Ngoài ra, việc nhận biết thiết bị để RWD còn có thể được tích hợp vào ngay trong file CSS và đây là cách mà người ta thường dùng. Nhà thiết kế web có thể đặt ra các "luật", ví dụ như nếu thiết bị truy cập vào web có độ phân giải chiều ngang thấp hơn 700px thì không tải thành phần A, sắp xếp lại thành phần B và C. Còn nếu thiết bị có màn hình từ 700px trở lên, thành phần A sẽ xuất hiện, B và C giữ nguyên vị trí ban đầu. Ngoài ra lập trình viên còn có kết hợp thêm một số yếu tố khác như hướng xoay của màn hình, tỉ lệ dài:ngang nữa.

Bạn hãy thử lấy điện thoại của mình vào Tinh tế xem, phần bài viết nổi bật, banner quảng cáo ở trên đầu và loạt quảng cáo ở bên tay phải sẽ biến mất, nội dung vừa khít với màn hình của bạn. Còn khi chuyển qua dùng PC hay máy tính bảng, tự nhiên những thành phần đó lại xuất hiện ra. Một trong những "luật" mà các anh kĩ thuật của Tinh tế đặt ra đó là nếu chiều dài màn hình nhỏ hơn 700 pixel thì hiển thị thao giao diện mobile, còn trên 700 pixel thì hiển thị kiểu đầy đủ. Ngoài ra Tinh tế còn kết hợp thêm một số yếu tố khác để bố cục nên khi bạn dùng một chiếc smartphone Full-HD (1080 x 1920) duyệt thì vẫn thấy giao diện mobile của Tinh tế.

Responsive_Web_Tinhte
Tinh tế sẽ phản hồi lại với các kích thước màn hình/trình duyệt khác nhau bằng những bố cục khác nhau. Hai cái bên trái là giao diện mobile, cái bên phải là giao diện chuẩn

Một số giải pháp khác cũng được sử dụng cho mục đích RWD bao gồm bố cục dạng "lỏng" (các thành phần sẽ tự "chảy" tùy theo kích thước màn hình), hình ảnh linh hoạt (flexible image, một phần hoặc toàn bộ hình ảnh sẽ hiển thị), JavaScript hoặc xác định kích thước các đối tượng đồ họa bằng phần trăm. Twitter cũng có cung cấp một bộ khung để phát triển giao diện website với tên gọi Bootstrap (http://twitter.github.io/bootstrap/) và nó cũng hỗ trợ thao đổi giao diện web tùy vào kích thước màn hình.

Lợi ích của Responsive Web Design

Như đã nói ở trên, RWD dùng để bố cục lại giao diện trang web cho tương thích với nhiều loại kích cỡ màn hình khác nhau. Hãy thử tưởng tượng xem, nếu màn hình trên điện thoại của bạn đã hẹp, diện tích rất hạn chế rồi mà bạn còn phải thấy một đống quảng cáo trên Tinh tế thì sẽ thế nào? Nếu là mình, mình sẽ phát điên lên. May mắn là mấy anh kĩ thuật đã làm RWD nên chúng ta không cảm thấy phiền phức.

Hoặc bạn cũng có thể nghĩ đến tình huống như thế này: giờ đây các trình duyệt web di động đều đã hỗ trợ HTML và CSS đầy đủ chứ không còn cùi bắp như xưa, do đó toàn bộ trang web có thể hiển thị một cách đầy đủ trên màn hình di động. Tuy nhiên, nếu không áp dụng RWD, trang web khi xem trên thiết bị di động sẽ trở nên nhỏ xíu, bạn bắt buộc phải dùng kính lúp, còn không thì phải zoom vào và kéo qua lại, lên xuống liên tục để đọc nội dung. Đây là trải nghiệm tiêu cực và nó khiến bạn nghĩ xấu về website, và điều tất nhiên là bạn chẳng thèm quay lại web đó nữa.

Nói tóm lại, RWD là một xu hướng thiết kế hoàn toàn có lợi bởi nó đảm bảo bạn sẽ luôn luôn có những trải nghiệm tốt nhất, đẹp nhất khi xem trang web dù bạn có đang dùng thiết bị nào đi nữa. Nó giúp nhà lập trình web tận dụng tối đa không gian để trình diễn những nội dung cho chúng ta xem theo cách thoải mái và thích thú nhất có thể.

Hiệu năng web của RWD

Năm ngoái, Guy Podjarny, trưởng nhóm kiến trúc sản phẩm của công ty Akamai (một đơn vị chuyên nghiên cứu và tối ưu hóa tốc độ cho các giải pháp điện toán) đã thử nghiệm 347 trang web RWD được trình diễn trên http://mediaqueri.es bằng cách dùng Chrome trên nhiều thiết bị khác nhau, cộng với công cụ WebPageTest. Podjarny nhận thấy rằng kích thước tải về cũng như tốc độ load của các trang web này không khác mấy khi sử dụng trên nhiều thiết bị khác nhau và màn hình với độ phân giải khác nhau. Sau đó Podjarny đã trình bày phát hiện của mình tại một hội nghị chuyên về thiết kế.

Vậy thử nghiệm trên có ý nghĩa gì? Nó cho thấy rằng mặc dù trang web đã phản hồi lại với kích thước màn hình bằng cách thu gọn nội dung, ẩn bớt những thành phần không cần thiết, thu nhỏ cỡ ảnh... nhưng điều đó không đồng nghĩa với chuyện web sẽ tải nhanh hơn. Nó cũng không đảm bảo rằng dung lượng tải về sẽ nhỏ hơn, ít chiếm băng thông hơn. Việc tối ưu hóa này hoàn toàn nằm trong tay lập trình viên và nhà thiết kế web.

So_sanh
Ghi chú: HTTP Request là những yêu cầu mà trình duyệt gửi đến máy chủ để tải hoặc làm một thứ gì đó. Máy chủ sẽ trả lời (response) lại tương ứng với request. Ví dụ: máy tính của bạn request để tải một trang web, server sẽ trả lời lại: "Đây, đây là file mà anh cần". Ngoài ra còn có request để tải ảnh, tải file XML,... Có thể thấy ở kết quả trên, số HTTP khác nhau giữa hai loại giao diện chỉ là 1 request, không đáng kể.

Còn bên dưới là biểu đồ so sánh về kích thước trang của các web RWD trên hai loại độ phân giải do Akamai thực hiện. Đến 86% trang web khi tải giữa hai loại màn hình không cho thấy sự khác biệt rõ rệt về dung lượng trang, tức là chúng ta chỉ tiết kiệm được một khoảng dung lượng không đáng kể khi duyệt web bằng mobile.

bieudo

Có thể bạn sẽ nói rằng "Trời ơi lo gì, bây giờ kết nối Internet trên di động đã nhanh lắm rồi!". Đúng là kết nối 3G, 4G ngày càng nhanh hơn, nhưng nó vẫn còn ở khoảng cách rất xa so với mạng Internet băng thông rộng. Hiện tại, việc tải một trang web ở trên máy tính vẫn nhanh hơn nhiều so với thiết bị di động, nhất là các trang có nhiều hình ảnh. Theo một nghiên cứu của Google, người dùng "mong đợi tốc độ tải web trên di động cũng nhanh như khi tải trên máy tính", và đó là điều mà lập trình viên phải nghĩ đến khi làm RWD.

Độ phức tạp

Thật ra trước đây các lập trình viên cũng có nghĩ đến một biện pháp khác khi mà RWD chưa phổ biến, đó là xây dựng một phiên bản di động dành cho web (ví dụ: m.tinhte.vn). Cách này cũng tốt, tác dụng gần như tương đương với RWD. Tuy nhiên, nó là một trang tập tin HTML riêng, một file CSS riêng được viết riêng cho thiết bị di động, hình ảnh cũng được thiết lập với kích thước nhỏ hơn. Và mặc dù tốn công hơn nhưng các trang web m. đơn giản hơn việc tích hợp RWD vào chung với trang web chính. Một số cuộc thảo luận trên mạng cũng có nói rằng ngay cả một website tối ưu hóa cực kì tốt với RWD cũng tải chưa nhanh bằng trang web mobile riêng.

Ngoài ra, một số dịch vụ online cũng có hỗ trợ chuyển RSS thành một trang web riêng biệt. Lập trình viên có thể tận dụng điều này để thiết kế web cho thiết bị di động mà không phải đầu tư quá nhiều công sức. Họ chỉ cần làm cho RSS của mình đầy đủ nhất có thể là xong. Người dùng truy cập từ các smartphone, tablet sẽ không thấy giao diện chính mà chỉ thấy các dòng cập nhật mới nhất, tin tức mới nhất. Như vậy cũng đã đủ đối với một số trang web rồi.

Responsive web design thì ngược lại, nó vốn dĩ là phức tạp hơn bởi nhà thiết kế web đang cố gắng nhiều trải nghiệm xem khác nhau chứ không nhắm đến một loại thiết bị cụ thể nào cả. Điều đó có nghĩa là trình duyệt trên máy mobile phải đảm đương một file HTML lớn, một tập tin CSS cũng lớn không kém. Nếu không được tích hợp tốt, RWD có thể làm cho việc duyệt web di động trở nên chậm chạp hơn mặc dù bố cục rất tốt.


Thứ Sáu, 10 tháng 5, 2013

Mozilla tặng miễn phí điện thoại chạy Firefox OS cho lập trình viên để khyến khích xây dựng app

geeksphone

Mozilla mới đây đã công bố chương trình tặng điện thoại Geeksphone Keon chạy Firefox OS cho lập trình viên nhằm khuyến khích việc xây dựng app dựa trên HTML5 cho hệ điều hành này. Để tham gia, lập trình viên sẽ phải gửi một hồ sơ cho Mozilla, trong đó nói rõ chi tiết về ứng dụng mà lập trình viên đang dự tính viết hoặc chuyển thể từ một OS khác sang Firefox OS. Nếu hồ sơ đủ tốt và được chấp thuận, người viết sẽ được nhận một máy Geeksphone Keon miễn phí với màn hình 3,5" độ phân giải 480 x 320, vi xử lí Snapdragon S1 xung nhịp 1GHz, RAM 512MB, máy ảnh 3 megapixel. Mozilla cho biết họ sẽ bắt đầu nhận hồ sơ từ nay đến cuối tháng và khi số lượng máy cạn dần, người nào gửi tài liệu trước sẽ được ưu tiên. Nếu quan tâm, bạn có thể xem thêm chi tiết ở liên kết nguồn.