Những cuộc chiến trình duyệt giữa iPhone và Android, Phần 1: WebKit đến cứu hộ

Xây dựng một ứng dụng giám sát mạng cho trình duyệt

Các thiết bị di động đóng vai trò ngày càng tăng trong cuộc sống hiện tại của chúng ta. Chúng ta sử dụng chúng để giao tiếp. Chúng ta sử dụng chúng để dẫn đường. Chúng ta thậm chí sử dụng chúng như một đèn pin tiện dụng. Khi mà các ứng dụng tùy chỉnh đang rất phổ biến cho các nền tảng iPhone và Android, thì đó là cơ hội trong các ứng dụng Web di động. Đây là bài viết đầu tiên trong loạt bài hai phần "Những cuộc chiến trình duyệt giữa iPhone và Android" về phát triển các ứng dụng dựa trên trình duyệt cho iPhone và Android. Trong bài này, chúng ta sẽ xây dựng một ứng dụng giám sát mạng đơn giản, chạy trong phạm vi các trình duyệt của máy tính để bàn và cả hai trình duyệt di động.

Frank Ableson, Thiết kế phần mềm

Sau khi sự nghiệp trong đội bóng rổ của trường cao đẳng kết thúc mà không có một hợp đồng dài hạn nhiều năm chơi cho đội LA Lakers, Frank Ableson đã chuyển chí hướng của mình sang thiết kế phần mềm máy tính. Ông thích giải quyết các vấn đề phức tạp, nhất là trong các lĩnh vực truyền thông và lập giao diện phần cứng. Khi không làm việc, ông dành thời gian với người vợ Nikki và con cái. Bạn có thể gặp Frank tại địa chỉ frank@cfgsolutions.com.



15 04 2011

Mở đầu

Tổng cộng, các nền tảng iPhone và Android có hơn 100.000 đầu ứng dụng có sẵn để tải về qua các cửa hàng ứng dụng tương ứng của chúng. Các ứng dụng được thiết kế riêng (native) là các ứng dụng được tạo ra bằng Bộ công cụ phát triển phần mềm (SDK: Software development kit) của nền tảng đó, sau đó được biên dịch và cài đặt vào thiết bị. Các ứng dụng được thiết kế riêng này truy cập đầy đủ đến các khả năng vốn có của thiết bị, bao gồm các tính năng như kết nối mạng không dây, Bluetooth, lưu trữ dữ liệu, đo gia tốc, la bàn và các tính năng ma thuật trên thiết bị khác làm cho các thiết bị ấy thành hấp dẫn đến thế. Khi các ứng dụng được thiết kế riêng hoặc tùy chỉnh đang rất phổ biến cho các nền tảng iPhone và Android, thì có một cơ hội to lớn cho các ứng dụng Web di động. Thiết bị di động đã đến tuổi trưởng thành — và cùng với nó là Web di động.

Bài viết này là bài đầu tiên trong một loạt bài hai phần về phát triển các ứng dụng dựa trên trình duyệt cho iPhone và Android, mục đích là để hỗ trợ bạn hướng đến việc phát triển các ứng dụng Web di động của chính bạn. Các ứng dụng Web di động có thể làm nhiều thứ hơn là biển hiện một trang Web trên thiết bị di động. Chúng ta sẽ xem xét một số các công nghệ lõi và các kỹ thuật làm cho việc phát triển Web di động thành một ngành hấp dẫn.

Web đã trở thành nền tảng được ưa chuộng vì nó giải quyết rất nhiều vấn đề thường quấy rầy các nhà quản trị hệ thống và các nhà phát triển ứng dụng thường đòi hỏi. Một số trong các giải pháp này là:

  • Các ứng dụng Web dễ triển khai — Chỉ cần cài đặt hoặc sao chép chúng vào máy chủ và yêu cầu khách hàng của bạn trỏ trình duyệt của họ vào đúng địa chỉ Web (URL).
  • Các ứng dụng Web dễ dàng mở rộng quy mô trên các nhóm máy chủ trong trung tâm dữ liệu hiệu năng cao và được phục vụ bởi các công cụ quản lý trang Web đãng có sẵn
  • Các ứng dụng Web tập trung hóa việc lưu trữ dữ liệu và do đó làm đơn giản hóa các phương án phục hồi sau thảm họa.
  • Sự kết hợp của HTML với CSS (Cascading Style Sheets - Các bảng định kiểu chồng nhau), với JavaScript và các hình ảnh đồ họa mang lại một trải nghiệm giao diện người dùng tuyệt vời vượt xa các khả năng của các Bộ công cụ phát triển phần mềm (SDK) được thiết kế riêng (không có một trải nghiệm chơi game nhập vai tổng lực) và hầu hết các trải nghiệm ứng dụng không đảm bảo một trải nghiệm chơi game hoặc trải nghiệm quầy hàng trực tuyến (N.D: nguyên văn là “kiosk experience” – nói về trải nghiệm sử dụng màn hình cảm ứng để mua hàng hay dịch vụ, không cần dùng chuột hay bàn phím).
  • Đa số các ứng dụng đòi hỏi các phần tử Giao diện người dùng (UI) dễ sử dụng để hướng dẫn người dùng thông qua một loạt các hoạt động hằng ngày.

Khía cạnh hấp dẫn nhất của mô hình phân phối ứng dụng Web là khả năng biến phần mềm thành một dịch vụ theo hướng thuê bao, thực sự là một giải pháp cả hai bên cùng thắng. Bạn sẽ hỏi "Như thế nào?". Chúng ta hãy thử điểm qua.

Các mô hình triển khai Web trao quyền cho khách hàng thử nghiệm trước khi họ mua với chi phí và rủi ro tối thiểu. Nếu khách hàng muốn dùng thử, có thể tiếp tục dịch vụ này ngay lập tức chỉ bằng một giao dịch thẻ tín dụng (hoặc PayPal). Các nhà cung cấp phần mềm được hưởng lợi vì việc nâng cấp hệ thống được đơn giản hóa, làm giảm chi phí hỗ trợ và cuối cùng làm giảm thiểu các chi phí chuyển giao cho khách hàng. Hơn nữa, mô hình phần mềm như một dịch vụ (SaaS) cho phép khách hàng có được ích lợi của phần mềm mà không cần phải đầu tư lớn trước— mang lại lợi nhuận đầu tư (ROI) tài chính ngay trong một tháng, thay vì đâu đó trong tương lai mù mờ.

Thật ấn tượng. Phải chăng cái đã đúng đối với Web thì cũng đúng cho thiết bị di động? Thế nhưng, trước khi iPhone xuất hiện, câu trả lời phần lớn là không. Tại sao vậy?

Sự thật là trải nghiệm của trình duyệt Web di động còn đang rất kém. Nhưng tất cả đã thay đổi, nhờ một công nghệ gọi là WebKit, công nghệ đã nổi danh nhờ di động phổ biến qua iPhone.

iPhone đã đi từ điểm khởi đầu đến lúc trở thành khách hàng Web di động số 1 trên thế giới trong thời gian rất ngắn, một vài năm. Tại sao vậy? bởi vì WebKit, cùng với kết nối Internet tin cậy, làm cho Web cũng làm việc được trên thiết bị di động — tốt hơn bất kỳ các tùy chọn trình duyệt nào khác cho đến nay. Phần còn lại của thị trường di động đã chú ý đến và đang sử dụng WebKit, đang suy ngẫm về nó, hoặc đang tự bào chữa cho mình.

Vậy WebKit là gì?


WebKit và HTML5

WebKit là máy trình duyệt mang lại sức mạnh cho trình duyệt Safari di động có trong iPhone, cũng như công nghệ đằng sau trình duyệt trong Android. WebKit cũng có chỗ của mình trong các thiết lập di động khác, mặc dù chúng ta sẽ hạn chế chỉ thảo luận về các nền tảng iPhone và Android.

WebKit là một dự án mã nguồn mở, có gốc rễ từ KDE (K Desktop Environment - Môi trường máy để bàn K). Dự án WebKit đã khai sinh ứng dụng Web hiện đại cho các thiết bị di động. Trong khi các khả năng của thiết bị và yếu tố hình dạng là cực kỳ quan trọng, thì người dùng thiết bị di động lại phát triển mạnh nhờ nội dung. Nếu nội dung duy nhất có sẵn dành cho người sử dụng thiết bị di động là một phần nhỏ của toàn bộ nội dung sẵn có trên Internet, thì trải nghiệm của người sử dụng sẽ chỉ xếp thứ hai là cao nhất.

Hầu hết chúng ta thích một cuộc sống gắn kết mật thiết — nếu chúng ta sử dụng một trang Web ở nhà trên máy tính xách tay của mình, thì chúng ta cũng muốn có thể truy cập cùng nội dung ấy khi ngồi trên tàu hỏa chúng ta cũng có thể truy cập vào cùng nội dung như vậy. Nội dung là ứng dụng sát thủ (killer application). Bất kể chúng ta đang ở đâu và chúng ta đang làm gì, chúng ta cũng muốn truy cập vào dữ liệu của mình. WebKit tạo khả năng có nội dung phong phú trên các nền tảng iPhone và Android.

Cần lưu ý rằng WebKit cũng được sử dụng trên các máy tính để bàn trong trình duyệt Safari, một trình duyệt mặc định trên nền tảng X của hệ điều hành Mac. Cho dù chúng ta đang nói về phiên bản máy tính để bàn hay máy trình duyệt trên iPhone hay Android, WebKit hiện đang đi đầu trong việc hỗ trợ tính năng của HTML và CSS. Thật vậy, WebKit hỗ trợ cho các kiểu dáng CSS mà các trình duyệt khác vẫn chưa chấp nhận — những tính năng đang được đặc tả kỹ thuật HTML5 xem xét đến.

Đặc tả kỹ thuật HTML 5 là một bộ sưu tập các dự thảo kỹ thuật bao trùm nhiều công nghệ dựa trên trình duyệt, bao gồm việc lưu trữ có hỗ trợ SQL, trung chuyển, chuyển đổi, dịch thuật phía máy khách và nhiều hơn nữa. HTML5 đã làm việc một thời gian rồi, và mặc dù chưa hoàn chỉnh, khi các tính năng của nó đã đứng vững với sự hỗ trợ của các nền tảng trình duyệt chủ yếu, thì buổi đầu khiêm tốn của các ứng dụng Web sẽ chỉ còn trong trí nhớ xa xăm. Việc phát triển các ứng dụng Web sẽ chiếm ưu thế — và không chỉ ở trong vùng hoạt động của trình duyệt máy tính để bàn truyền thống mà còn ở trong không gian di động. Di động sẽ là ý nghĩ đầu tiên chứ không phải là để sau.


Xem xét ứng dụng Web di động

Để áp dụng các công nghệ phát triển Web, người phát triển ứng dụng hiện nay có một vài sự lựa chọn có sẵn. Đầu tiên, ứng dụng có thể hoàn toàn được viết như các tệp HTML, CSS và JavaScript trên máy chủ. Tất nhiên, nội dung HTML có thể bắt nguồn từ các tệp HTML tĩnh hoặc được tạo ra động từ bất kỳ một trong số các công nghệ phía máy chủ nào, chẳng hạn như PHP, ASP.NET, Java Servlets, v.v. Tất cả các công nghệ này có thể gói gọn bằng thuật ngữ HTML cho đơn giản — vì thực sự nó không liên quan đến các thảo luận ở đây — và điều quan trọng nhất là trình duyệt được trang bị sức mạnh của WebKit thông dịch và biểu hiện HTML trên thiết bị di động.

Người dùng truy cập ứng dụng Web trên thiết bị di động (ví dụ, iPhone hay Android) bằng cách mở ứng dụng trình duyệt và nhập vào URL của máy chủ mong muốn: http://yourcompanyname.com/applicationurl.

Một ứng dụng Web cụ thể sẽ ở đâu đó trên một dải liên tục các ứng dụng, từ một trang Web chung đến một ứng dụng Web di động phụ thuộc nhiều vào nền tảng hệ thống cụ thể.

Biểu hiện trang Web chung

Máy biểu hiện trong WebKit, cùng với giao diện người dùng rất trực quan có trong các nền tảng iPhone và Android, cho phép xem trên thiết bị hầu như bất kỳ các trang Web dựa trên HTML nào. Các trang Web được biểu hiện đúng, không giống như trải nghiệm với trình duyệt di động xưa cũ với nội dung chồng lên nhau hoặc hoàn toàn không hiển thị. Khi nạp trang Web, nội dung sẽ thường được thu nhỏ liên tục sao cho có thể thấy toàn bộ trang, mặc dù ở kích cỡ rất nhỏ và nhiều khả năng là không thể đọc được, như trong Hình 1. Tuy nhiên trang Web có thể dễ dàng cuộn, quay, chia nhỏ và phóng to, thu nhỏ, mang lại khả năng truy cập vào toàn bộ nội dung. Theo mặc định, trình duyệt sử dụng một khung nhìn, hay đúng hơn là một kích thước lô gic, với chiều rộng 980 điểm ảnh.

Hình 1. Trang Web liên tục thu nhỏ lại lúc nạp
Nội dung thường được thu nhỏ theo mọi hướng để cho có thể nhìn thấy toàn bộ trang, cho dù rất nhỏ

Trong khi máy hiển thị này cung cấp sự truy cập toàn trang và là một cải tiến lớn so với kinh nghiệm Web di động có trong lịch sử, hơn nữa có thể được thực hiện để cải thiện kinh nghiệm di động.

Thân thiện với di động

Để tiến bước trong dải liên tục từ trang Web chung hướng tới trang Web thân thiện di động, có thể sửa đổi ứng dụng Web trong một vài lĩnh vực.

Mặc dù trang Web sẽ được biểu hiện đúng trong WebKit, vẫn có một số sự khác biệt giữa một thiết bị hướng đến dùng chuột, ví dụ như máy tính xách tay hoặc máy tính để bàn, so với một thiết bị hướng đến nhấn chạm, như điện thoại thông minh iPhone hay Android. Các lĩnh vực khác biệt chính gồm có: kích thước vật lý của các vùng "nhấn được"; không có "kiểu dáng khi di chuột" và một chuỗi sự kiện hoàn toàn khác nhau. Dưới đây là tóm tắt nhanh về các điều cần lưu ý khi thiết kế một trang Web cho những người dùng thiết bị di động xem:

  • Trình duyệt iPhone/Android sẽ biểu hiện màn hình rất dễ đọc — tốt hơn nhiều so với các trình duyệt di động điển hình — do đó, đừng vội vàng tạo ra một phiên bản di động giảm bớt tính năng của trang Web của bạn.
  • Các ngón tay to hơn các con trỏ chuột. Hãy ghi nhớ điều này khi thiết kế dẫn hướng nhấn chuột — không nên đặt các đường liên kết quá gần nhau vì người dùng sẽ không thể nhấn một liên kết mà không chạm vào đường liên kết bên cạnh nó.
  • Không có kiểu dáng khi di chuột vì bạn không "di" bằng các ngón tay của mình theo cùng cách vẫn làm với con trỏ chuột.
  • Các sự kiện chẳng hạn như di chuyển chuột lên, xuống v.v hoàn toàn khác trên các thiết bị dựa vào cảm ứng chạm. Một số trong các sự kiện nói trên sẽ kích hoạt, nhưng đừng mong đợi nó theo cùng trình tự như bạn thấy trên các trình duyệt của máy tính để bàn.

Các chi tiết này được nêu tỉ mỉ trong bài iPhone in Action (xem Tài nguyên). Với các mục đích của mình, chúng ta sẽ tập trung nhiều hơn vào những gì WebKit có thể làm, thay vì những gì nó không thể làm.

Hãy nhìn vào thách thức rõ ràng nhất trong việc tạo ra một trang Web thân thiện với một người truy cập bằng iPhone hoặc Android, đó là kích thước màn hình. Kích thước màn hình điện thoại di động thực tế đang sử dụng hiện nay là 320x480. Lưu ý rằng kích thước này cũng có thể là 480x320 khi người dùng có thể chọn để xem nội dung Web theo hướng nằm ngang. Như chúng ta đã chứng kiến trong Hình 1, WebKit sẽ hiển thị các trang Web định hướng cho máy tính để bàn khá tốt, mặc dù văn bản có thể là hơi nhỏ quá, khó đọc được nội dung nếu không làm một loạt thao tác chọn và phóng to. Vậy về việc này chúng ta có thể làm gì?

Cách trực tiếp đơn giản nhất, không dễ nhận thấy với máy tính để bàn, tiện lợi cho người dùng di động là thông qua việc sử dụng một siêu thẻ (metatag) đặc biệt: viewport (khung nhìn).

Siêu thẻ là một thẻ HTML được đặt trong phần tử head của một tài liệu HTML. Đây là một ví dụ đơn giản sử dụng thẻ viewport: <meta name="viewport" content="width=device-width" />. Khi siêu thẻ này được thêm vào một trang HTML, chúng ta thấy rằng trang này được định cỡ cho phù hợp hơn với thiết bị di động, như trong Hình 2. Thẻ này đơn giản là bị bỏ qua nếu trình duyệt không hỗ trợ nó.

Hình 2. Trang được định cỡ cho phù hợp hơn với các thiết bị di động
Khi siêu thẻ được thêm vào một trang HTML, chúng ta thấy rằng trang đó được định cỡ thích hợp hơn cho thiết bị di động

Trong một số trường hợp, có thể ta muốn định cỡ trước cho cửa sổ theo một giá trị cụ thể, như trong Hình 3.

Hình 3. Định cỡ trước cho cửa sổ
Mong muốn định cỡ trước cửa sổ tới một giá trị cụ thể

Để đặt một kích cỡ cụ thể, thuộc tính content của siêu thẻ viewport được gán một giá trị rõ: <meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=yes" />. Bằng cách thay đổi giá trị kích cỡ ban đầu, màn hình có thể được thu nhỏ hoặc phóng to như mong muốn. Đặt giá trị này bằng đâu đó giữa 1,0 và 1,3 là phù hợp cho các nền tảng iPhone và Android tương ứng. Siêu thẻ viewport cũng hỗ trợ đặt cỡ tối thiểu và tối đa, có thể được dùng để hạn chế người dùng điều chỉnh việc biểu hiện trang.

Mặc dù yếu tố hình dạng của iPhone không thay đổi kể từ lần ra mắt đầu tiên với cách bố trí 320x480, Android hứa hẹn ngày càng có nhiều đặc tính vật lý khác nhau khi nhiều thiết bị hơn đã thành công trên thị trường, mỗi thiết bị do các nhà sản xuất khác nhau, nhắm vào những cư dân sử dụng khác nhau. Những biến đổi tiềm năng này về kích thước màn hình, yếu tố hình dạng, và độ phân giải là cái cần ghi nhớ khi bạn phát triển các ứng dụng của mình nhằm vào các thiết bị di động như Android.

Ngoài những khác biệt về vật lý của các thiết bị Android khác nhau, kinh nghiệm đã cho thấy rằng phần mềm của Android đã kiểm soát nhiều hơn việc biểu hiện các trang Web bằng cách cài đặt trình duyệt trên thiết bị. Mặc dù đã ổn định, nền tảng Android cũng rất linh hoạt. Các giá trị cài đặt trên một thiết bị cụ thể nhiều khả năng khác với môi trường phát triển của bạn, tùy thuộc vào mức độ của Bộ công cụ phát triển phần mềm (SDK) và nhà sản xuất. Hình 4 cho thấy một ảnh chụp màn hình của trang cài đặt từ ứng dụng trình duyệt lấy từ phiên bản V1.6 của Trình mô phỏng thiết bị của Android (Android Emulator). Màn hình cài đặt cho phép người dùng đặt cấu hình một thiết bị ở một mức phóng to, thu nhỏ đã định trước (xa, gần, trung bình) hoặc yêu cầu thiết bị tự động điều chỉnh cho vừa với trang.

Hình 4. Trang cài đặt từ trình mô phỏng thiết bị Android
Hình ảnh cho thấy một ảnh chụp trang các giá trị cài đặt từ ứng dụng trình duyệt của phiên bản V1.6 của Android Emulator

Trong thế giới di động, sự thay đổi là cái không đổi lớn nhất, vì vậy điều này hứa hẹn một sự dịch chuyển bối cảnh chung. Ví dụ, các giá trị cài đặt cho trình duyệt Sprint Hero có một tập hợp các tùy chọn hoàn toàn khác về biểu hiện trang. Trình duyệt Hero được xây dựng trên Android V1.5 cộng với một loạt các cải tiến do HTC cung cấp. May mắn thay, các giá trị thiết đặt này sẽ bị ghi đè bởi siêu thẻ viewport, nếu chúng có mặt trong trang Web của bạn.

Như vậy cho đến nay, chúng ta đã thấy WebKit biểu hiện một trang Web bình thường khá tốt, mặc dù hơi nhỏ và hơi khó đọc một chút khi chưa phóng to lên. Tiếp theo, chúng ta cố gắng thực hiện điều khiển các trải nghiệm của người dùng bằng cách điều chỉnh cách xem trang Web trên thiết bị thông qua việc sử dụng siêu thẻ khung nhìn. Điều này làm các trang dễ đọc và dễ dẫn hướng hơn. Nhưng điều gì sẽ xảy ra nếu chúng ta muốn đi xa hơn và làm cho trang Web có dáng vẻ và cảm nhận như của một ứng dụng di động?

Dành cho di động

Bây giờ chúng ta hãy xem xét một chiến lược thiết kế khi nhắm vào nhóm người dùng di động. Với vai trò một trường hợp nghiên cứu nhanh, ta hãy xem xét trang đăng nhập của dịch vụ thư điện tử Gmail của Google.

Trước tiên, hãy xem trải nghiệm của trình duyệt máy tính để bàn trong Hình 5.

Hình 5. Trình duyệt của máy tính để bàn
Hình ảnh cho thấy trải nghiệm của trình duyệt máy tính để bàn

Màn hình máy tính để bàn có nội dung thông tin ở phía bên trái và một vùng đăng nhập ở phía bên phải. Hãy so sánh khung nhìn máy tính để bàn với khung nhìn đặc thù cho di động trong Hình 6, được chụp từ iPhone.

Hình 6. Khung nhìn đặc thù cho di động của iPhone
Ảnh chụp màn hình khung nhìn đặc thù cho di động của iPhone

Màn hình hiển thị trong Hình 6 chắc chắn nhằm vào người dùng di động. Người dùng trực tiếp thực hiện những gì cần thiết để đi tiếp với ứng dụng — không cần chia nhỏ, phóng to hoặc cuộn.

Tiếp theo, hãy nhìn vào chức năng của ứng dụng Gmail di động khi đọc một tin nhắn. Do không gian sẵn có để dùng với ứng dụng bị hạn chế, cửa sổ đọc tin nhắn có rất ít cơ hội quý giá để biểu thị các nút hoặc chuyển hướng. Bất kỳ khoảng không gian nào dành cho chuyển hướng sẽ lấy đi của phần đọc nội dung. Ngoài ra, chúng ta không muốn rơi vào cái bẫy có nhiều khung hoặc cuộn các phần tử div nếu chúng ta có thể tránh nó. GMail di động giải quyết vấn đề này bằng cách cung cấp một trình đơn nổi đơn giản xuất hiện bất cứ khi nào trang ngừng cuộn. Trình đơn này có ba nút: Archive (Lưu trữ), Delete (xóa) và More (Thêm nữa). Chọn nút More sẽ hiển thị thêm các mục trình đơn, như trong Hình 7.

Hình 7. Trình đơn nổi
Chọn nút ấn More hiển thị các mục trình đơn bổ sung thêm

Đây là một ứng dụng được dành cho thiết bị di động.

Một điều khác cần nhớ là chúng ta không muốn giảm bớt các trải nghiệm di động với người truy nhập đang chạy các trình duyệt có nhiều khả năng hơn, chẳng hạn như những trình duyệt có trên các nền tảng iPhone hoặc Android. Với mục đích này, ta hãy xem GMail hiển thị cái gì ở cuối trang trong Hình 8.

Hình 8. Để người dùng quyết định
Hình ảnh cho thấy các quyết định của người dùng

Nếu người dùng của bạn thích các chức năng thú vị hơn của phiên bản máy tính để bàn, hãy để cho anh ta sử dụng nó. Bất cứ nơi nào có thể, hãy để người dùng quyết định.

Bây giờ, giả sử rằng bạn muốn xây dựng một ứng dụng có sử dụng các công nghệ Web, nhưng thực sự trông giống như một ứng dụng được thiết kế riêng cho di động.

Nội dung nhằm vào nền tảng cụ thể

Bước tiếp theo hướng tới việc tạo nội dung nhằm vào nền tảng cụ thể bằng cách định dạng một trang trông gần giống hơn với dáng vẻ và cảm nhận được thiết kế riêng cho nền tảng được nhằm tới, hơn là một trang Web chung. Vậy dáng vẻ và cảm nhận được thiết kế riêng nghĩa là gì?

Trước khi đi sâu vào các chi tiết về việc làm thế nào để trang Web có dáng vẻ và cảm nhận như một ứng dụng được thiết kế riêng cho một nền tảng cụ thể, chúng ta hãy dành một chút thời gian cho những khác biệt hiển thị giữa iPhone và Android như là các nền tảng — tạm đặt sang một bên các mối quan hệ dựa trên trình duyệt rất mạnh của chúng vào lúc này.

iPhone có một dáng vẻ và cảm nhận khác biệt riêng của nó. Cho một người nào đó xem một ảnh chụp màn hình từ iPhone và trừ khi người ấy đang sống trong hang đá, có khá nhiều cơ hội là hình ảnh sẽ được nhận biết là của iPhone. Cho cùng người đó xem một ảnh chụp màn hình từ một thiết bị Android và kết quả nhiều khả năng sẽ khác. Tại sao vậy? Có một vài lý do khả dĩ cho sự khác nhau này. Lý do chính là iPhone đã có trên thị trường lâu hơn và nó có một thị phần những người đam mê không nhỏ. Hãy nhớ rằng những người đam mê đó xếp hàng hàng giờ liền, trả một đống đô la để mua một iPhone V1 tính năng khiêm tốn? Cho dù bạn có sở hữu một chiếc iPhone hay không, thì sản phẩm trí tuệ Apple là một biểu tượng trên thị trường hiện nay. Thế còn về Android?

Android là tương đối mới và trên nhiều mặt, là đối lại iPhone, vì nó ít nhiều theo ý tưởng cộng đồng mã nguồn mở. Android sẽ được sử dụng trên nhiều thiết bị (điện thoại và các thiết bị kiểu đồ dùng). Tạm thời, ta hãy tiếp tục thảo luận về điện thoại di động để cho mọi việc càng đơn giản càng tốt.

Với thời gian, số lượng thiết bị dùng Android nhiều khả năng sẽ vượt qua iPhone trên toàn thế giới. Đó là vì các thiết bị có trang bị Android đang được nhiều nhà sản xuất làm ra và sẽ sẵn dùng trên nhiều mạng truyền dẫn trên toàn thế giới. Với số lượng người chơi lớn hơn tham gia thị trường Android, chắc chắn sẽ có phân mảnh về dáng vẻ và cảm nhận. Chúng ta đã thấy điều này với giao diện SenseUI từ HTC. Dáng vẻ và cảm nhận hấp dẫn này không có sẵn trong SDK lõi của Android và không tương thích với mọi thiết bị. Motorola, Google và Verizon đã cùng hợp tác để tạo ra một thiết bị Android mới: Droid. Đây là thiết bị Android thương mại đầu tiên chạy trên nền 2.0.

Hãy so sánh tính đa dạng của Android với dáng vẻ nhất quán của iPhone. iPhone là sản phẩm ưu tú của Apple. Dáng vẻ của iPhone có thể tiến triển theo thời gian, nhưng nó rất ít khả năng bị phân mảnh như Android đã cho thấy từ lúc vẫn còn trong giai đoạn thiếu niên của nó.

Vậy ta tìm ở đâu cái dáng vẻ và cảm nhận riêng đó?

Vào thời gian trước khi có Web 2.0, đây sẽ là một thách thức thật sự. Các cố gắng ban đầu hỗ trợ cho nhiều trình duyệt khách (di động và không di động) bao gồm một loạt các kỹ thuật khác nhau, chẳng hạn như:

  • Các trang Web song song hoàn toàn.
  • Nội dung được tạo ra động dựa trên userAgent
  • Các máy chủ ủy nhiệm (Proxy server) có thể trích lọc nội dung xuống thiết bị; RIM đã làm cho cách tiếp cận này được áp dụng rộng rãi và thành công để hiển thị e-mail trên thiết bị

Những cách tiếp cận này có lẽ chấp nhận được cho các nhóm có nguồn tài chính lớn, nhưng với phần còn lại của thế giới thì sao? Chúng ta không có thời gian, tài năng hoặc kho báu dùng để đổi lấy các khả năng này. Và, như chúng ta đã dự kiến, Web di động của ngày hôm qua là chưa đủ, vì vậy dù sao đi nữa chúng ta không muốn làm thế.

Và may mắn thay, chúng ta không phải làm thế. Trong thời đại của WebKit và CSS, những khác biệt này có thể được điều chỉnh dễ dàng thông qua việc sử dụng các các bản định kiểu và các truy vấn truyền thông. Như đã giới thiệu ở trên, một truy vấn truyền thông là một kỹ thuật để có được thông tin về khách hàng. Theo truyền thống, các trình duyệt gửi đi một chuỗi userAgent, trong đó xác định trình duyệt và máy chủ phải thực hiện việc tìm ra những nội dung nào cần gửi đến thiết bị (theo như đã thảo luận ở trên). Với một truy vấn truyền thông, trình duyệt đưa ra quyết định dựa trên các khả năng của mình: <link rel="stylesheet" type="text/css" href="smartphone.css" media="only screen and (max-device-width: 480px)" />. Dưới đây là một ví dụ để nhận được một bảng định kiểu nhắm vào một máy điện thoại thông minh: <link rel="stylesheet" type="text/css" href="smartphone.css" media="only screen and (min-device-width: 481px)" />.

Internet Explorer V6

Tại thời điểm viết bài này, Internet Explorer V6 đang nắm giữ khoảng 20-30 phần trăm thị phần, nhưng sự thích nghi của IE V6 nằm ngoài phạm vi bài viết này.

Để tìm hiểu thêm về các truy vấn truyền thông, xin vui lòng xem đặc tả kỹ thuật dự thảo (xem Tài nguyên).

Hãy xem xét một ví dụ có sử dụng cách tiếp cận này trong bối cảnh của một ứng dụng mẫu có hiển thị tình trạng mạng.


Ứng dụng giám sát mạng

Mục đích của ứng dụng này là để giám sát nhiều máy chủ. Những nhà phát triển phần mềm độc lập thường thấy cần hỗ trợ cho nhiều ứng dụng trên nhiều máy chủ. Và nếu bạn đã từng chơi game trong một khoảng thời gian đáng kể nào đó, thì nhiều khả năng là kiểu máy chủ và kiểu ứng dụng sẽ thay đổi. Tất cả điều này chỉ để nói rằng không thể có một công cụ duy nhất nào có thể dễ dàng theo dõi mọi khía cạnh của mọi ứng dụng mà bạn cần phải giám sát. Đây là nơi mà ứng dụng di động Network Monitor (Netmon) làm việc. Nó không được thiết kế để rà soát hết, nhưng khá linh hoạt và thuận tiện trên thiết bị di động của bạn.

Ứng dụng Netmon chứa một danh sách các máy chủ cần quan tâm. Mỗi mục nhập sẽ hiển thị các chỉ báo hiệu năng chính (KPI: key performance indicator). Các chỉ báo KPI đã từ lâu là các yếu tố chính được các sinh viên MBA dùng để đo các khía cạnh quan trọng về sức khỏe của một doanh nghiệp. Trong lĩnh vực lưu trữ ứng dụng Web trên máy chủ, một số chỉ báo KPI quan trọng có thể là:

  • Số lượng giao dịch trong một khoảng thời gian gần đây:
    • Các đơn hàng.
    • Các yêu cầu danh mục.
    • Các thông báo thư điện tử E-mail.
    • Hiển thị trang.
  • Khoảng thời gian kể từ giao dịch cuối cùng:
    • Đơn hàng.
    • Tài liệu trao đổi dữ liệu điện tử (EDI: Electronic data interchange).
    • Thông báo của đối tác kinh doanh.
    • Tệp Giao thức truyền tải tệp (FTP: File transfer Protocol) từ nhà cung cấp.
  • Cơ sở dữ liệu đã sẵn sàng chưa?
  • Ngày sao lưu dự phòng cuối cùng được biết.
  • Số tiền đô la trung bình cho mỗi đơn hàng.
  • Dung lượng đĩa còn trống.
  • Băng thông đã truyền dẫn trong giờ, ngày, tháng qua.

Các mục này và một số mẩu dữ liệu hoạt động khác dùng để vẽ một bức tranh về sức khỏe của một hệ thống hoặc ứng dụng cụ thể. Trong kỳ nghỉ lễ, thực tế chúng ta nhìn vào số lượng các đơn đặt hàng được đặt trên một số trang Web của chúng ta. Nếu số lượng không tăng vọt từng giờ, ta cần xem xét kỹ hơn.

Do mỗi nhu cầu ứng dụng và các nguồn tài nguyên cần thiết là khác nhau, nên ứng dụng Netmon cần linh hoạt để thích nghi với đặc thù của từng ứng dụng. Để đáp ứng yêu cầu về tính linh hoạt này, chúng ta bắt đầu với một cấu trúc dữ liệu cơ bản nhất để thể hiện sức khỏe của một hệ thống cụ thể. Trong Phần 2, chúng ta sẽ quan tâm đến việc dữ liệu này đến từ đâu và nó nhận các bản cập nhật như thế nào. Bây giờ, chúng ta đang quan tâm đến những mảnh thông tin sau:

  • Tên của trang Web.
  • URL của trang Web (trang chủ).
  • URL để nhận được các bản cập nhật.
  • Tình trạng: Tốt hay không tốt?
  • Tóm tắt: Mô tả tóm tắt tình trạng sức khỏe; đây sẽ là OK hoặc là một chuỗi văn bản mô tả các vấn đề ưu tiên cao nhất.
  • Các mục: Đây là một bộ sưu tập các cặp tên/giá trị được sử dụng để chuyển tải các số liệu thống kê hoạt động hiện tại hoặc các chỉ số KPI cho trang Web.

Ứng dụng của chúng ta sẽ liệt kê các mục này theo cách dễ dẫn hướng nhất, sử dụng các khả năng của CSS, jQuery và WebKit để làm cho các mục nổi bật. Như đã nói ở trên, mục tiêu là để cho các ứng dụng này chạy trên iPhone, Android, cũng như trên một phiên bản máy tính để bàn của Safari.


Xây dựng ứng dụng

Ngày nay, các trang Web cần được tạo ra theo cách khai báo, chỉ cung cấp tổ chức và nội dung. Tất cả các việc về định vị trí và khuôn dạng được thực hiện thông qua các bản định kiểu chồng nhau (CSS) và thông thường có sự trợ giúp của JavaScript. Thực vậy, các thư viện JavaScript đã trở nên phổ biến đến mức chúng đang trở thành một chuẩn, chứ không phải là ngoại lệ. Trong ứng dụng mẫu của bài viết này, chúng ta sử dụng khung công tác jQuery Javascript phổ biến. Ứng dụng mẫu sẽ biểu hiện trên iPhone, Android, cũng như trên máy tính để bàn. Nội dung HTML cũng chính xác như nhau. Sự khác biệt là do các bản định kiểu đã chọn. Báo trước cho bạn: không quá nhiều tập trung vào vẻ ngoài của ứng dụng. Trong thực tế, các màu nền được dùng quá mức để làm rõ việc tổ chức bản định kiểu của ứng dụng. Chúng ta sẽ làm sáng sủa một chút vẻ ngoài trực quan của ứng dụng trong Phần 2. HTML được hiển thị trong Liệt kê 1.

Liệt kê 1. HTML cho ứng dụng
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="netmon.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="netmon.js"></script>

<script type="text/javascript">
   if (navigator.userAgent.indexOf('iPhone') != -1) {
      document.write('<link rel="stylesheet" href="iphone.css" 
type="text/css" />');
   } else if (navigator.userAgent.indexOf('Android') != -1) {
      document.write('<link rel="stylesheet" href="android.css" 
type="text/css" />');
   } else {
      document.write('<link rel="stylesheet" href="desktop.css" 
type="text/css" />');
   }

function setupTestData() {
   try {
      netmon.initialize();
      if (netmon.resources.length > 0) {
         jQuery.each(netmon.resources,function (index, value) {
            $("#mainContent").append(netmon.render(index,value));
         });
         $(".serverentry").click (function() {$(this).find(".serveritems").toggle();});
         $(".serveritems").hide();
      }
   } catch (e) {
      alert(e);
   }
}
   
</script>
   
<title>My Network Resources</title>
</head>
<body onload="setupTestData();">
<div id="mainContainer">
   <div id="header">
      <h1>My Servers</h1>
   </div>
   <div id="mainContent">
   </div>
   <a href="q.php">My User Agent</a>
</div> 
</body>
</html>

Xem qua HTML có một vài chú ý:

  • Có hai tệp JavaScript được nạp từ bên ngoài: một tệp dành cho thư viện jQuery và một tệp là các hàm phụ trợ cho ứng dụng của ta.
  • Có sử dụng siêu thẻ khung nhìn để điều chỉnh kích cỡ biểu hiện nội dung.
  • Một bản định kiểu chính được nạp: netmon.css.
  • Hỏi userAgent để xác định bản định kiểu bổ sung nào cần nạp: một cho iPhone, một cho Android và một cho máy tính để bàn.
  • Khi trang Web được nạp, dữ liệu được hiển thị thông qua sự giúp đỡ của jQuery và một hàm phụ trợ trong tệp netmon.js.
  • Sự cân đối của trang có chứa một vài thẻ div.
  • Cuối cùng, có một đường liên kết đến một trang để cho thấy chuỗi userAgent. Việc này chỉ để tiện trình diễn minh họa. Nó không có gì liên quan đến chính ứng dụng.

Trước khi đi sâu vào các bản định kiểu và tệp netmon.js, nơi mà tất cả mọi việc được thực hiện, ta hãy xem hình dạng hiện tại của ứng dụng. Hãy nhớ rằng chúng ta đang sử dụng ba bản định kiểu khác nhau để nhắm vào ba nền tảng được hỗ trợ. Mỗi bản định kiểu thiết lập với một màu nền khác nhau để hỗ trợ trong quá trình phát triển. Hình 9 cho thấy trình duyệt Safari cho máy tính để bàn với nền màu xanh.

Hình 9. Ứng dụng được hiển thị trong trình duyệt Safari trên máy tính để bàn
Ảnh chụp màn hình về trình duyệt Safari của máy tính để bàn có nền màu xanh dương

Hình 10 cho thấy ứng dụng được hiển thị trên trình duyệt Android có nền màu đỏ.

Hình 10. Ứng dụng trong trình duyệt Android
Ảnh chụp màn hình cho thấy ứng dụng hiển thị trên trình duyệt Android có nền màu đỏ

Hình 11 cho thấy ứng dụng được hiển thị trên trình duyệt iPhone có nền màu xanh lá cây.

Hình 11. Ứng dụng trên trình duyệt của iPhone
Ảnh chụp màn hình cho thấy ứng dụng hiển thị trên trình duyệt iPhone có nền màu xanh

Bản định kiểu chính ở trong tệp có tên netmon.js, được hiển thị trong Liệt kê 2.

Liệt kê 2. Bảng định kiểu chính
body {
   color: #888888;
   font-family: Helvetica;
   font-size:14px;
   margin: 0px;
   padding: 0;
}
.details {
   margin: 0px;
   padding: 0px;
   background-color: white;
   border: solid;
   border-width: 1px;

   -webkit-border-top-left-radius: 8px;
   -webkit-border-top-right-radius: 8px;
   -webkit-border-bottom-left-radius: 8px;
   -webkit-border-bottom-right-radius: 8px;
}
.OK {
   color: #000000;
}
.BAD {
   color: #ff0000;
}
.odd {
   background-image: -webkit-gradient(linear, left top, right bottom,from(#ccc) 
,to(#999));
}
.even {
   background-image: -webkit-gradient(linear, left top, right bottom,from(#999) 
,to(#ccc)); 
}
.serverentry a {
   float: right;
   color: #ffffff;
}
.serveritems{
   color: #000;
}

#header h1 {
   margin: 0;
   padding: 0;
   text-align: center;
   color: #000;
}

Các bản định kiểu riêng cho từng nền tảng sẽ thực hiện ba mục tiêu chính:

  1. Để thay đổi lược đồ màu sắc nhằm trình diễn tổng quát về tác động của bản định kiểu là gì và chứng tỏ việc một bảng định kiểu riêng nhắm vào một nền tảng cụ thể dựa trên userAgent dễ dàng như thế nào .
  2. Để điều chỉnh kích thước phông chữ giữa các nền tảng máy tính để bàn và di động.
  3. Để sử dụng các chức năng đặc thù WebKit. Điều này quan trọng nếu chúng ta đang nhắm vào một trình duyệt không có khả năng WebKit trên máy tính để bàn, chẳng hạn như Firefox.

Để làm ví dụ, tệp iphone.css được hiển thị trong Liệt kê 3.

Liệt kê 3. Tệp iphone.css
body {
   background-color: #00ff00;
}
.serverentry {
   -webkit-border-top-left-radius: 8px;
   -webkit-border-top-right-radius: 8px;
   -webkit-border-bottom-left-radius: 8px;
   -webkit-border-bottom-right-radius: 8px;
}
.name {
   font-size: 2em;
}
.summary{
   font-size: 1.5em;
}
.serverentry a {
   font-size: 1.5em;
}

Trong tệp này, chúng ta thấy rằng màu nền của thẻ body được đặt là màu xanh lá cây (# 00ff00) và chỉnh sửa một số kích cỡ phông chữ để làm cho các mục dễ đọc hơn trên thiết bị di động.

Cuối cùng, chúng ta hãy xem xét tệp netmon.js, trong đó có một danh sách các mục cùng với một hàm được thiết kế để hiển thị một mục, như trong Liệt kê 4. Một số dữ liệu đã được bỏ ra khỏi danh sách này cho ngắn gọn, mặc dù bản đầy đủ vẫn sẵn có (xem phần Tải về).

Liệt kê 4. Tệp netmon.js
var netmon = {
   initialize : function () {
   },
   resources : 
   [
      {
         name : 'msiservices.com',
         homeurl : 'http://msiservices.com',
         pingurl : 'http://msiservices.com/netmon.php',
         status : 'OK',
         summary : 'OK',
         items : 
         [
          {name : 'DiskSpace', value : '22.13 GB'},
          {name : 'Database Up?', value : 'Yes'}
         ]
      },
      {
         name : 'server 2',
         homeurl : 'http://someurl',
         pingurl : 'http://someurl/netmon.jsp',
         status : 'OK',
         summary : 'OK',
         items : 
         [
          {name : 'DiskSpace', value : '100.8 GB'},
          {name : 'Database Up?', value : 'Yes'}
         ]
      },
// additional entries clipped for brevity

   ],
   render : function(index,itm) {
      try {
         var ret = "";
         ret += "<div class='serverentry " + itm.status + " " + (index % 2 == 0 ? 
'even' : 'odd') + "'>";
         ret += "<span class='name'>" + itm.name + 
"</span>&nbsp;&nbsp;<a target='_blank' href='" + itm.homeurl + 
"'>Show</a><br />";
         if (itm.status != "OK") {
            ret += "<span class='summary'>-" + itm.summary + 
"</span><br />";
         }
         
         ret += "<div class='serveritems'>"; 
         jQuery.each(itm.items,function (j,itemdetail) {
            ret += ">>" + itemdetail.name + "=" + itemdetail.value + 
"<br />";
         });
         ret += "</div>";      
         ret += "</div>";
         return ret;
      } catch (e) {
            return "<div class='error'>Error rendering item [" + itm.name + "] 
" + e + "</div>";
      }
   }
};

Khi một mục nhập của máy chủ không ở trạng thái OK, nó được thể hiện bằng màu đỏ, nhờ có một định nghĩa lớp trong tệp CSS. Ngoài ra, khi tình trạng không OK, chúng ta hiển thị trường tóm tắt để cung cấp một cái nhìn lướt nhanh vấn đề là gì. Trong các hình 9-11, vấn đề với máy chủ 4 là sắp cạn dung lượng đĩa. Nếu gõ vào một mục, chúng ta có thể xem các thông tin chi tiết, như trong Hình 12.

Hình 12. Thông tin chi tiết từ máy chủ 4
Ảnh chụp màn hình cho thấy các thông tin chi tiết của máy chủ 4 khi gõ vào một mục

Bằng cách gõ vào đường liên kết show ở bên phải của mỗi mục, chúng ta khởi chạy trang chủ của mỗi máy chủ. Đây là một tính năng tiện dụng vì hai lý do. Thứ nhất, thật là khó chịu khi phải nhớ tất cả các URL của máy chủ cần quan tâm và thứ hai, còn khó chịu hơn nhiều khi phải gõ nhập một URL dài trên một thiết bị di động, bất kể bàn phím tốt thế nào chăng nữa.

Với Netmon chạy ngon lành trên thiết bị di động, việc hỗ trợ cho các máy chủ của chúng ta sẽ là một nhiệm vụ dễ dàng.

Trong Phần 2, chúng ta sẽ bổ sung thêm ứng dụng này sao cho chúng ta có thể yêu cầu thêm dữ liệu thời gian thực và thảo luận về một số cân nhắc phía máy chủ khi xây dựng một ứng dụng di động.

Trước khi kết thúc, chúng ta hãy điểm nhanh những gì cần thiết để làm cho ứng dụng sẵn sàng để tải về từ một kho ứng dụng.


Nhận một ứng dụng Web hoàn chỉnh

Hãy tưởng tượng rằng ứng dụng theo dõi mạng đã hoàn thành. Bạn cho một người bạn xem nó và anh ta khuyến khích bạn bán ứng dụng cho người khác để cho họ cũng có thể theo dõi tài nguyên trên mạng của họ bằng ứng dụng của bạn. Bạn có thể bán một ứng dụng Web được không? Một ứng dụng Web chắc chắn có thể được bán thông qua các thuê bao truyền thống hay mô hình SaaS, nhưng điều gì sẽ xảy ra nếu bạn muốn đóng gói "ứng dụng Web" của bạn và bán nó qua một thị trường ứng dụng, chẳng hạn như kho ứng dụng iTunes (iTunes App Store) hoặc Thị trường Google? Để làm được điều đó, ứng dụng phải được biên dịch như một ứng dụng được thiết kế riêng. May mắn thay, có một giải pháp cho vấn đề này.

Mỗi nền tảng di động lớn có một cách để nhúng trình duyệt vào trong một khung nhìn hoặc một biểu mẫu, một hoạt động. Mỗi nền tảng dùng những thuật ngữ khác nhau một chút, nhưng tất cả chúng đều làm việc theo cùng một cách tương tự nhau: một trình điều khiển trình duyệt được đặt trong các ứng dụng được thiết kế riêng và ứng dụng được thiết kế riêng này có thể tương tác với nó. Trong mô hình đơn giản nhất, việc điều khiển trình duyệt có thể chỉ là đi đến trang Web và lấy nội dung của nó. Một cách khác là, ứng dụng được thiết kế riêng có thể chặn các yêu cầu đường liên kết và cung cấp nội dung riêng của mình, qua đó chỉ sử dụng khung nhìn của trình duyệt để hiển thị. Hãy nhớ rằng, HTML và CSS là các thay thế hữu hiệu cho các tiện ích được thiết kế riêng, bất kể nguồn gốc nội dung của ứng dụng. Và một số ứng dụng sẽ là lai ghép của hai cách tiếp cận này. Ví dụ, một ứng dụng có thể nhận được hầu hết nội dung của nó từ trang Web, nhưng "phần được thiết kế riêng" của ứng dụng cung cấp khả năng truy cập tới nguồn tài nguyên nội bộ thông qua Bluetooth.

Có một vài công cụ có sẵn trên thị trường cho loại kiến trúc này ứng dụng này. PhoneGap và Appcelerator là hai công cụ hàng đầu trong lĩnh vực này (xem Tài nguyên).


Tóm tắt

Bài viết này được coi như là giới thiệu nhập môn về các ứng dụng Web cho iPhone và Android có trang bị sức mạnh của WebKit. Trong Phần 2, ứng dụng ví dụ này được mở rộng để kết hợp các bản cập nhật trang trực tiếp thông qua công nghệ thay đổi Web của Ajax.


Tải về

Mô tảTênKích thước
Network app source codeos-androidiphone1-browserwars1sourcecode.zip23KB

Tài nguyên

Học tập

Lấy sản phẩm và công nghệ

Thảo luận

Bình luận

developerWorks: Đăng nhập

Các trường được đánh dấu hoa thị là bắt buộc (*).


Bạn cần một ID của IBM?
Bạn quên định danh?


Bạn quên mật khẩu?
Đổi mật khẩu

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Ở lần bạn đăng nhập đầu tiên vào trang developerWorks, một hồ sơ cá nhân của bạn được tạo ra. Thông tin trong bản hồ sơ này (tên bạn, nước/vùng lãnh thổ, và tên cơ quan) sẽ được trưng ra cho mọi người và sẽ đi cùng các nội dung mà bạn đăng, trừ khi bạn chọn việc ẩn tên cơ quan của bạn. Bạn có thể cập nhật tài khoản trên trang IBM bất cứ khi nào.

Thông tin gửi đi được đảm bảo an toàn.

Chọn tên hiển thị của bạn



Lần đầu tiên bạn đăng nhập vào trang developerWorks, một bản trích ngang được tạo ra cho bạn, bạn cần phải chọn một tên để hiển thị. Tên hiển thị của bạn sẽ đi kèm theo các nội dung mà bạn đăng tải trên developerWorks.

Tên hiển thị cần có từ 3 đến 30 ký tự. Tên xuất hiện của bạn phải là duy nhất trên trang Cộng đồng developerWorks và vì lí do an ninh nó không phải là địa chỉ email của bạn.

Các trường được đánh dấu hoa thị là bắt buộc (*).

(Tên hiển thị cần có từ 3 đến 30 ký tự)

Bằng việc nhấn Gửi, bạn đã đồng ý với các điều khoản sử dụng developerWorks Điều khoản sử dụng.

 


Thông tin gửi đi được đảm bảo an toàn.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=647095
ArticleTitle=Những cuộc chiến trình duyệt giữa iPhone và Android, Phần 1: WebKit đến cứu hộ
publish-date=04152011