Chuyển đến nôi dung chính

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 (tiếng Anh).

Khi bạn đăng ký với trang developerWorks lần đầu tiên, một tiểu sử của của bạn được tạo ra. Chọn các thông tin về tiểu sử của bạn (tên, nước/vùng, và nơi làm việc) đã được hiện lên màn hình, thông tin này sẽ được hiện kèm với nội dung mà bạn đăng tải. Bạn có thể cập nhật thông tin này bất kỳ lúc nào.

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

  • Đóng [x]

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.

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 (tiếng Anh).

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

  • Đóng [x]

Chọn ngôn ngữ:

  • Đóng [x]
  • Đóng [x]

Tạo các ứng dụng Web di động với HTML 5, Phần 5: Phát triển các tính năng giao diện người dùng trực quan mới trong HTML 5

Thêm Canvas, CSS3, và nhiều phần tử ngữ nghĩa hơn nữa cho các ứng dụng Web di động

Michael Galpin, Kiến trúc sư phần mềm, Ludi Labs
Michael Galpin đã phát triển phần mềm Java một cách chuyên nghiệp từ năm 1998. Ông hiện đang làm việc cho eBay. Ông đã có bằng về toán học của Viện Công nghệ California.

Tóm tắt:  HTML 5 đi kèm với rất nhiều tính năng mới cho các ứng dụng Web di động, bao gồm cả những tính năng hình ảnh thường tạo ra tác động nhất. Canvas (Khung nền ảnh) dễ gây chú ý nhất trong các khả năng giao diện người dùng mới, cung cấp đầy đủ đồ họa 2-D trong trình duyệt. Trong bài viết này, bạn học cách sử dụng Canvas cũng như một số trong các phần tử hình ảnh mới khác trong HTML 5 huyền ảo hơn nhưng lại tạo ra sự khác biệt lớn cho người dùng di động.

Xem thêm bài trong loạt bài này

Ngày:  18 06 2011
Mức độ:  Trung bình
Bản gốc tiếng Anh  tại đây
Hoạt động:  2736 lần đọc
Góp ý kiến:  


Giới thiệu về loạt bài này

Các bài viết khác trong loạt bài này

HTML 5 là một công nghệ được quảng cáo thổi phồng rất nhiều, nhưng có lý do chính đáng. Nó hứa hẹn sẽ là một điểm bùng phát công nghệ để mang các khả năng ứng dụng của máy tính để bàn đến cho trình duyệt. Do có triển vọng đối với các trình duyệt truyền thống, nên nó thậm chí còn có nhiều tiềm năng hơn cho các trình duyệt di động. Hơn nữa, các trình duyệt di động phổ biến nhất đã chấp nhận và triển khai thực hiện nhiều phần quan trọng của đặc tả HTML 5. Trong loạt bài năm phần này, bạn sẽ xem xét kỹ hơn về một số những công nghệ mới, là một phần của HTML 5, có thể có tác động rất lớn trong việc phát triển ứng dụng Web di động. Trong mỗi phần, bạn sẽ phát triển một ứng dụng Web di động đang làm việc để giới thiệu một tính năng của HTML 5, có thể được sử dụng trên các trình duyệt Web di động hiện đại giống như các trình duyệt đã thấy trên các thiết bị iPhone và các thiết bị dựa vào-Android.

Về đầu trang

Các điều kiện cần trước

Trong bài viết này, bạn sẽ phát triển các ứng dụng Web bằng các công nghệ Web mới nhất. Hầu hết các mã có ở đây chỉ là HTML, JavaScript và CSS — các công nghệ lõi của nhà phát triển Web bất kỳ. Điều quan trọng nhất mà bạn sẽ cần là các trình duyệt để thử nghiệm các ứng dụng. Hầu hết mã trong bài viết này sẽ chạy trên các trình duyệt mới nhất, với một số trường hợp ngoại lệ cần lưu ý. Tất nhiên bạn cũng phải thử nghiệm trên các trình duyệt di động, và bạn sẽ cần có các bản iPhone SDK và Android SKD mới nhất cho các trình duyệt đó. Trong bài viết này có sử dụng iPhone SDK 3.1.3 và Android SDK 2.1. Xem phần Tài nguyên để biết các liên kết.

Về đầu trang

Đồ họa với Canvas

Các từ viết tắt thông dụng

  • Ajax: JavaScript không đồng bộ + XML
  • API: Giao diện lập trình ứng dụng
  • CSS: Bảng định kiểu xếp chồng
  • DOM: Mô hình đối tượng tài liệu
  • HTML: Ngôn ngữ đánh dấu siêu văn bản
  • SDK: Bộ công cụ cho nhà phát triển phần mềm
  • UI: Giao diện người dùng
  • XML: Ngôn ngữ đánh dấu mở rộng

Suốt nhiều năm, các nhà phát triển Web đã phàn nàn về Canvas (Khung nền ảnh). Bây giờ tại sao mọi người lại phàn nàn về một API vẽ nguyên gốc trong trình duyệt? Cuối cùng, API này cho phép bạn tạo ra một số loại các giao diện đồ họa mà nếu không thì các giao diện đồ họa này đòi hỏi một số loại trình cắm thêm (plugin) của trình duyệt (và như tất cả các nhà phát triển Web di động biết, các trình cắm thêm thường không có sẵn trên các trình duyệt di động phổ biến nhất). Lý do mà các nhà phát triển Web đã phàn nàn về Canvas là ở chỗ, trong khi hiện nay nó đã có sẵn trên trình duyệt Firefox và Safari trong nhiều năm, nó chưa bao giờ được hỗ trợ trong trình duyệt của máy tính để bàn phổ biến nhất, Microsoft®Internet Explorer®. Ngay cả những phiên bản đầu tiên của Internet Explorer 9 cũng không hỗ trợ Canvas. Vì vậy, trong nhiều năm, Canvas đã là vấn đề hóc búa cuối cùng về công nghệ này. Bạn có thể tìm thấy các mẫu Canvas tuyệt vời này trên Internet, nhưng bạn không thể sử dụng nó cho hầu hết các ứng dụng Web vì Internet Explorer đã không hỗ trợ cho nó. May mắn cho các nhà phát triển Web di động, Canvas không có các hạn chế như vậy. Tất cả các trình duyệt dựa trên Webkit mà bạn nhắm tới có thể thực hiện Canvas và tối ưu hóa hiệu năng của nó rất nhiều.

Canvas API là một API mức thấp để vẽ. Nó cho phép bạn tạo các đường nét, các đường cong, các hình đa giác, và các hình tròn và tô chúng bằng các màu sắc, các gradient, và v.v.. Bạn có thể tạo văn bản và bạn có thể thực hiện nhiều kiểu chuyển đổi hình học cho bất cứ thứ gì trên Canvas. Như bạn có thể tưởng tượng, một API như vậy có vô số cách sử dụng. Hãy xem xét một ứng dụng tạo một báo cáo đồ họa bằng Canvas. Hình 1 cho thấy một ảnh chụp màn hình của ứng dụng này, một đồ thị thanh về kết quả hàng năm.


Hình 1. Ứng dụng các báo cáo dựa trên Canvas đang chạy trên trình duyệt Android
Ảnh chụp màn hình của ứng dụng các báo cáo dựa trên đang chạy trên trình duyệt Android

Những gì bạn thấy trong Hình 1 không phải là một hình ảnh tĩnh trong trình duyệt này. Đồ họa báo cáo này được tạo ra trong lúc đang chạy bằng cách sử dụng Canvas API. Liệt kê 1 cho thấy mã HTML dùng để tạo báo cáo này.


Liệt kê 1. HTML của báo cáo

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; 
        maximum-scale=1.0; user-scalable=0;"/>
    <meta name="apple-touch-fullscreen" content="YES" />
    <title>HTML 5 Reports</title>
    <script type="text/javascript">
        function init(){
            var data = [{year : "2007",sales : 49},
                {year : "2008",sales : 131},
                {year : "2009",sales : 294}, 
                {year : "2010",sales : 405}];
            var report = {x : "year",
                    y : "sales",
                    values : data};
            graph(report, 350, 300);
        }
    </script>
</head>
<body onload="init()">
    <canvas id="graph"></canvas>
</body>
</html>

Liệt kê này cho thấy cấu trúc HTML cơ bản. Phần thân của tài liệu chỉ có một thẻ canvas. Trong hàm init, được gọi khi phần thân của tài liệu được tải, bạn định nghĩa dữ liệu tĩnh (dữ liệu báo cáo) và chuyển nó đến hàm graph (đồ thị). Trong khi bạn đã xác định báo cáo này làm dữ liệu tĩnh ở đây, thật dễ dàng để tưởng tượng điều này đang được tải về động qua mạng bằng cách sử dụng Ajax. Hàm report (báo cáo) có chứa tất cả mã quan trọng, vì vậy chúng ta hãy xem xét nó trong Liệt kê 2.


Liệt kê 2. Hàm graph 

function graph(report, maxWidth, maxHeight){
    var data = report.values;
    var canvas = document.getElementById("graph");
    var axisBuffer = 20;
    canvas.height = maxHeight + 100;
    canvas.width = maxWidth;
    var ctx = canvas.getContext("2d");

    var width = 50;
    var buffer = 20;
    var i = 0;
    var x = buffer + axisBuffer;
    ctx.font = "bold 12px sans-serif";
    ctx.textAlign = "start";
    for (i=0;i<data.length;i++){
        ctx.fillStyle = "rgba(0, 0, 200, 0.9)";
        ctx.fillRect(x, maxHeight - (data[i][report.y] / 2), 
                 width, (data[i][report.y] / 2));
        ctx.fillStyle = "rgba(0, 0, 0, 0.9)";
        ctx.fillText(data[i][report.x], x + (width / 4), maxHeight + 15);
        x += width + buffer;
    }

    // draw the horizontal axis
    ctx.moveTo(axisBuffer, maxHeight);
    ctx.lineTo(axisBuffer+maxWidth, maxHeight);
    ctx.strokeStyle = "black";
    ctx.stroke();

    // draw the vertical axis
    ctx.moveTo(axisBuffer,0);
    ctx.lineTo(axisBuffer,maxHeight);
    ctx.stroke();

    // draw gridlines
    var lineSpacing = 50;
    var numLines = maxHeight/lineSpacing;
    var y = lineSpacing;
    ctx.font = "10px sans-serif";
    ctx.textBaseline = "middle";
    for (i=0;i<numLines;i++){
        ctx.strokeStyle = "rgba(0,0,0,0.25)";
        ctx.moveTo(axisBuffer, y);
        ctx.lineTo(axisBuffer + maxWidth,y);
        ctx.stroke();
        ctx.fillStyle = "rgba(0,0,0, 0.75)";
        ctx.fillText(""+(2*(maxHeight -y)), 0, y);
        y += lineSpacing; 
    }
}

Trong phần đầu tiên của hàm này, bạn thiết lập các đối tượng cần thiết để tạo báo cáo, như là chiều rộng và chiều cao của canvas, và các biến đệm (padding). Bạn cũng tạo đối tượng ngữ cảnh canvas, vì đây là đối tượng mà bạn sử dụng để thực hiện tất cả bản vẽ thực tế. Sau đó bạn vẽ các đồ thị thanh đã thấy trong Hình 1, bằng cách lặp lại qua dữ liệu báo cáo. Trước tiên, bạn thiết lập đặc tính fillStyle. Việc này có thể đơn giản như việc thiết lập một màu, có lẽ giống như bạn làm để sử dụng CSS. Trong trường hợp này, sử dụng ký hiệu rgba để thiết lập không chỉ màu sắc, mà còn cả giá trị alpha. (Việc này là trong suốt về màu sắc, và bạn sẽ thấy điều này một lần nữa sau này khi tôi thảo luận về tính năng CSS 3.0 trong HTML 5.) Sau khi thiết lập đặc tính fillStyle bạn tạo đồ thị thanh cho điểm dữ liệu bằng cách sử dụng API fillRect.Ở đây, bạn chỉ rõ các điểm bắt đầu (x, y) của hình chữ nhật và chiều rộng và chiều cao của nó. Tiếp theo, bạn định nghĩa lại fillStyle vì bạn muốn in một số văn bản như là một phần của báo cáo này. Bạn sử dụng API fillText để đưa văn bản lên canvas. API này lấy ra điểm đầu (x, y) và văn bản. Bạn làm việc này với từng điểm dữ liệu, tạo ra một đồ thị thanh với một nhãn bên dưới mỗi điểm.

Tiếp theo, bạn cần phải vẽ các phần khác của đồ thị — các trục và các đường lưới. Đầu tiên, bạn vẽ các trục ngang và dọc. Đối với mỗi trục, sử dụng API moveTo để thiết lập điểm đầu để từ đó bạn sẽ bắt đầu vẽ một đường kẻ. Sau đó, việc sử dụng API lineTo để vẽ một đường thẳng từ điểm đầu đến điểm cuối đã trở thành một bộ phận của cuộc gọi lineTo. Lưu ý rằng việc này không thực sự vẽ một đường thẳng, để thay thế, bạn gọi API stroke (nét) để vẽ đường này. Sau khi vẽ cả hai trục, bạn vẽ các đường lưới cùng với các nhãn của chúng bằng cách đặt chúng cách đều nhau rồi vẽ các đường bằng cách sử dụng cách kết hợp tương tự của moveTo, lineTo, và stroke.

Đây là toàn bộ mã mà bạn cần để tạo các đồ họa báo cáo theo lập trình. Bạn đã thấy nhiều canvas API thường dùng quan trọng nhất và phổ biến nhất trong ví dụ này, nhưng có một số API khác (chẳng hạn như để vẽ các đường cong). Bạn có thể làm một số điều khá thú vị bằng các API này, và bạn có thể thực hiện chúng trên bất kỳ các trình duyệt dựa trên Webkit nào không có ở đó. Nếu đồ họa không phải là vấn đề của bạn, thì HTML 5 vẫn còn có rất nhiều cách trang trí mới cho bạn trong biểu mẫu của CSS 3.0.

Về đầu trang

Thế giới tuyệt vời của CSS3

Khi bạn nói về HTML 5, có lẽ ngay lập tức bạn nghĩ về các thẻ HTML. Tất nhiên, HTML 5 chắc chắn bao gồm các thẻ mới, và bạn sẽ xem xét một số các thẻ đó trong phần tiếp theo. Trong phần trước, bạn đã thấy cách sử dụng một thẻ <canvas> để tạo ra một đối tượng canvas bên trong DOM. Tuy nhiên, phần lớn mã này là JavaScript. HTML chỉ là một phần của câu chuyện về HTML 5 — JavaScript và CSS là các phần quan trọng như nhau của nó. Nhiều phần tử giao diện người dùng mới trong HTML 5 được cung cấp theo bản hiệu chỉnh mới nhất của chuẩn CSS, CSS phiên bản 3.0. Trong Hình 2, một trang Web đang sử dụng một số kỹ thuật CSS 3.0 mới xuất hiện trên một điện thoại dựa trên Android và trên iPhone.


Hình 2. Các khả năng CSS mới của các thiết bị di động
So sánh ảnh chụp màn hình về các khả năng CSS mới của các thiết bị di động Android và iPhone

Hình 2 cho thấy nhiều tính năng mới của CSS trên cả hai thiết bị dựa trên Android và iPhone. Hình ảnh bên trái là của một thiết bị dựa trên Android. Lý do hình ảnh to hơn là do lấy từ một Motorola Droid, với một màn hình có độ phân giải cao hơn so với iPhone 3GS được sử dụng cho hình ảnh ở bên phải. Do đó, bạn cũng nhìn thấy nhiều trang hơn trên Droid. Tuy nhiên, bạn có thể thấy mục "Gettysburg Address" (Địa chỉ Gettysburg) có một sự phản chiếu làm mờ dần dần trên iPhone nhưng không mờ dần dần và khắc phục việc che khuất mục tiếp theo trên Droid. Đây chỉ là một cách nhắc nhở nhẹ nhàng mặc dù cả hai thiết bị dựa trên Android và iPhone đều có các trình duyệt dựa trên Webkit, nhưng có sự khác biệt tinh tế giữa chúng, và bạn phải kiên trì trong việc thử nghiệm của mình. Bây giờ hãy xem xét mã (trong Liệt kê 3) tạo ra trang ấn tượng này, bắt đầu với phần trên cùng của trang này.


Liệt kê 3. Mã cho nửa trên cùng của trang

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript">
        function $(id){
            return document.getElementById(id);
        }
        function init(){
            var i=0;
            var row = {};
            var cell = {};
            var topics = ["nth-child", "gradients", "alpha", "text effects", 
                          "reflections", "transformations"];
            for (i=0;i<topics.length;i++){
                row = document.createElement("tr");
                cell = document.createElement("td");
                cell.appendChild(document.createTextNode(topics[i]));
                row.appendChild(cell);
                $("dtable").appendChild(row);
            }
        }
    </script>
    <style type="text/css">
        header > h1{
            color: yellow;
            background: -webkit-gradient(linear, left top, left bottom, 
                             from(blue), to(white))
        }
        tr:nth-child(4n+1) { color: navy; }
        tr:nth-child(4n+2) { color: green; }
        tr:nth-child(4n+3) { color: maroon; }
        tr:nth-child(4n+4) { color: purple; }

        input[type="text"]{
            background: rgba(150, 30, 30, 0.5);
        }
    </style>
</head>
<body onload="init()">
    <header>
        <h1>The World of CSS3</h1>
        <div>What kind of CSS3 does your browser support?</div>
    </header>
    <table id="dtable"></table>
    <div id="formSection">
        <label for="name">What's your name?</label>
        <input type="text" id="name"></input>
        <button id="rtBtn" onclick="rotate()">Rotate</button>
    </div>
</body>
</html>

Mã trong Liệt kê 3 đưa ra tất cả các giao diện người dùng trên mục "Địa chỉ Gettysburg". Bạn sẽ thấy mã cho phần dưới cùng của trang rất ngắn gọn.

Điều đầu tiên mà bạn sẽ thấy là tiêu đề trên trang này. Nếu bạn xem xét phần thân của trang HTML ở gần dưới cùng của danh sách, bạn sẽ thấy rằng tiêu đề này đúng là ở trong một thẻ header — một trong các phần tử HTML mới trong HTML 5.

Bây giờ hãy xem xét phần tử style (kiểu dáng) (trên phần thân HTML trong Liệt kê 3). Văn bản được định kiểu bằng cách sử dụng CSS với bộ chọn header > h1. Quy tắc này làm cho văn bản có màu vàng, nhưng nó cũng cung cấp cho nó một nền màu xanh dương và trắng. Nền này có một gradient áp dụng cho nó. Đây là ví dụ đầu tiên mà bạn sẽ thấy các tính năng CSS có tiền tố là -webkit. Như bạn có thể dự đoán, tiền tố này tạo ra quyền sở hữu CSS này cho các trình duyệt dựa trên Webkit. Tuy nhiên, trong nhiều trường hợp, có một phần của tiêu chuẩn CSS 3.0, nhưng chúng rơi vào các vùng ở đó chuẩn này vẫn cần một chút thay đổi. Trong hầu hết các trường hợp, cả hai các trình duyệt WebKit và các trình duyệt dựa trên Mozilla Firefox đều đã thực hiện các tính năng này. Hơn nữa nếu bạn cần nhắm vào các trình duyệt Mozilla (giống như phiên bản di động của Firefox, được gọi là Fennec, nhanh chóng được yêu thích trên các máy điện thoại thông minh Nokia ở Châu Âu), thì bạn có thể luôn thay đổi tiền tố -webkit thành -moz.

Việc tiếp theo bạn làm là hiển thị một danh sách các chủ đề bằng cách sử dụng bảng có tên là dtable. Như bạn có thể thấy trong Hình 2, màu sắc thay đổi từ dòng này sang dòng khác khi bạn hiển thị các nội dung của bảng này. Bạn thực hiện điều này bằng cách sử dụng các phần tiếp theo của CSS, các khai báo tr:nth-child. Bạn có thể sử dụng khai báo nth-child trên bất kỳ phần tử lặp lại nào. Bạn thông qua một công thức được dùng làm một biến vị ngữ để xem nó có là một quy luật hợp lệ cho phần tử này không. Trong trường hợp này, bạn nói rằng các số hàng của biểu mẫu là 4n+1 (1, 5, 9 và v.v..) có màu xanh nước biển, các số hàng của biểu mẫu 4n+2 (2, 6, 10 và v.v..) có màu xanh lá cây, và sau đó tương tự, là màu nâu sậm và tím. Có nhiều khả năng mà bạn đã phải thực hiện các cách xử lý hình ảnh tương tự cho các bảng, các danh sách, và những thứ khác trong quá khứ, nhưng thường là thông qua JavaScript tẻ nhạt.

Các phần tử hình ảnh mới nhất là trường văn bản màu đỏ có nhãn là What's your name? (Tên của bạn là gì?) và một nút Rotate (Quay tròn). Việc tạo màu đỏ cho trường văn bản này được thực hiện bằng cách sử dụng một bộ chọn đầu vào có kiểu cụ thể. Nói cách khác, đây là một quy tắc CSS sẽ chỉ áp dụng với các phần tử đầu vào có kiểu text. Bây giờ có lẽ bạn đang tự hỏi nút Rotate dùng làm gì. Bạn có thể thấy từ đoạn mã trong Liệt kê 4 để gọi một hàm có tên là rotate.


Liệt kê 4. Hàm quay tròn của JavaScript khi sử dụng CSS

function rotate(){
    $("formSection").style["-webkit-transform"] = "rotateZ(-5deg)";
    $("formSection").style["-webkit-transition"] = 
          "-webkit-transform 2s ease-in-out";
    $("rtBtn").innerHTML = "Undo";
    $("rtBtn").onclick = function() {
        $("formSection").style["-webkit-transform"] = "";
        $("rtBtn").innerHTML = "Rotate";
        $("rtBtn").setAttribute("onclick", "rotate()");
    }
}

Hàm rotation này sử dụng JavaScript để thay đổi CSS được áp dụng cho div có tên là formSection. (Lưu ý: bạn đang sử dụng $() làm một bí danh cho document.getElementById().) Để quay tròn div, bạn thiết lập kiểu dáng -webkit-transform của nó thành rotateZ(-5deg), theo đó quay nó năm độ ngược chiều kim đồng. Tiếp theo, bạn thiết lập kiểu dáng -webkit-transform thành -webkit-transform 2s ease-in-out. Việc này làm cho việc quay tròn mất hai giây, bắt đầu từ từ, tăng tốc lên, rồi lại chậm dần ở cuối. Trong Hình 3, phía bên trái cho thấy vị trí không quay vòng, ban đầu của trường What's your name? Phía bên phải cho thấy hiệu ứng hình ảnh của trường được quay một phần và nút Undo của nó.


Hình 3. Quay các phần tử HTML
Ảnh chụp màn hình của các phần tử HTML quay tròn trên các thiết bị di động

Xem liên kết trong phần Tài nguyên để thấy hiệu ứng này đang hoạt động trên một trình duyệt tương thích HTML 5 như là Chrome, Safari 4, và Opera.

Bây giờ chúng ta hãy di chuyển đến nửa dưới của trang trong Hình 2. Ở đây bạn thấy một số ví dụ thú vị về các hiệu ứng hình ảnh và văn bản, cũng như các cách bố trí. Mã cho ví dụ này có trong Liệt kê 5.


Liệt kê 5. Mã cho phần nửa dưới của Hình 2

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        h2 {
            -webkit-text-fill-color: blue;
            -webkit-text-stroke-color: yellow;
            -webkit-text-stroke-width: 1.5px;
            background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), 
to(#000));
            -webkit-box-reflect:below 5px -webkit-gradient(linear, left top, left 
bottom, from(transparent), color-stop(0.5, transparent), to(white));
        }
        h3{
            color: rgba(0,0,255,0.75);
            background: rgba(255,255,0,0.5);
        }
        .xyz{
            text-shadow: #6374AB 4px -4px 2px;
            white-space: nowrap;
            width: 14em; 
            height: 2em; 
            overflow: hidden;
            text-overflow: ellipsis; 
            border: 1px solid #bbb; 
            border-radius: 9px;             
            background-color: #fff;
        }
        .abc {
            border: 1px solid #000;
            border-radius: 9px;        
            -webkit-column-count:4;
            -webkit-column-rule: 1px solid #a00;
            -webkit-column-gap: 0.75em;
        }
    </style>
</head>
<body onload="init()">
    <h2>The Gettysburg Address</h2>
    <h3>Abraham Lincoln, Gettysburg, PA. November 19, 1863</h3>
    <div class="xyz">
        Four score and seven years ago our fathers brought forth on this 
        continent a new nation, conceived in liberty, and dedicated to 
            the proposition that all men are created equal.
    </div>
    <div class="abc">
        Now we are engaged in a great civil war, testing whether that 
            nation, or any nation, so conceived and so dedicated, can long 
            endure. We are met on a great battle-field of that war. We have 
            come to dedicate a portion of that field, as a final resting 
            place for those who here gave their lives that that nation might 
            live. It is altogether fitting and proper that we should do this.
    </div>
</body>
</html>

Chúng ta hãy đi từ phần tử sang phần tử khác thông qua mã này. Đầu tiên, bạn tạo một mục cho "The Gettysburg Address" và định kiểu này theo một số cách.

  1. Bạn sử dụng các kiểu dáng -webkit-text-fill-color, -webkit-text-stroke-color, và -webkit-text-stroke-width để tạo hiệu ứng màu xanh dương bên trong màu vàng.
  2. Đặt một nền màu đỏ và đen phía sau văn bản bằng cách thiết lập kiểu dáng nền -webkit-gradient. Lưu ý rằng đây là một gradient xuyên tâm, trong khi ở trên bạn đã thấy một gradient tuyến tính. Cả hai đều làm việc tốt như nhau trên các máy điện thoại thông minh.
  3. Bạn áp dụng sự phản chiếu cho mục này bằng cách thiết lập kiểu dáng -webkit-box-reflect. Kiểu dáng này được thiết lập để phản chiếu đề mục năm pixel bên dưới nó, với một hiệu ứng gradient được áp dụng cho phản chiếu. Hiệu ứng gradient ở đây làm cho sự phản chiếu mờ dần đi. Nếu bạn quay trở lại Hình 2, bạn sẽ thấy rằng đây là sự kết hợp về áp dụng một gradient này với phản chiếu mà trình duyệt Android không thực hiện: nó chỉ trình diễn sự phản chiếu mà không có bất kỳ gradient nào.

Chuyển tới mục tiếp theo, bạn áp dụng một kiểu dáng rất đơn giản cho nó. Nó chỉ có một màu cho văn bản, và một màu riêng cho nền. Cả hai trong số các màu này đều sử dụng hàm rgba để xác định các giá trị màu đỏ-xanh lá cây-xanh da trời, cộng với một giá trị alpha trong suốt. Giá trị l.0 là hoàn toàn mờ đục và giá trị 0.0 là trong suốt.

Tiếp theo trong Liệt kê 5 là mã cho đoạn đầu tiên của đoạn văn này. Văn bản này có một đường viền xung quanh nó và bạn sử dụng kiểu border-radius (đường viền-vòng tròn) mới để nhận được các góc tròn. Bạn thấy tất cả các loại góc này được sử dụng trên trang Web hiện nay, và chúng thường được thực hiện bằng cách sử dụng các hình ảnh. Điều đó có vẻ hết sức thô sơ so với cách chúng được thực hiện dễ dàng với CSS 3.0. Bạn áp dụng một hình bóng cho văn bản của đoạn văn này bằng cách sử dụng kiểu text-shadow (hình bóng văn bản). Cuối cùng, lưu ý rằng vùng cho đoạn văn bản này bị ràng buộc bằng cách thiết lập chiều cao và chiều rộng của phần tử div cha mẹ, và văn bản này quá lớn. Thay vì chỉ cắt bớt văn bản như bạn đã thấy trong các trình duyệt cũ, bạn sẽ nhận được một hiệu ứng các dấu chấm lửng (...) thú vị bằng cách thiết lập kiểu dáng text-overflow (tràn văn bản).

Cuối cùng, bạn đi đến phần cuối của văn bản. Nó cũng có một đường viền xung quanh, nhưng lưu ý rằng nó xuất hiện trong bốn cột với các bộ chia tách cột. Để làm điều này, hãy thiết lập kiểu -webkit-column-count, và thiết lập kiểu -webkit-column-rule đi kèm để nhận được các bộ chia tách. Bạn có thể tưởng tượng sẽ tẻ nhạt đến đâu nếu văn bản theo định dạng như thế này mà không có các tính năng CSS 3.0 mới. Đây cũng có thể là một tính năng có ích khi bạn tạo các tiêu đề và các chân trang đơn giản, cả hai đều là những phần tử mới trong HTML 5. Hãy xem xét chúng và một số cách đánh dấu mới khác nữa được HTML 5 giới thiệu

Về đầu trang

Các ngữ nghĩa mới

HTML 5 thêm nhiều phần tử mới vào món súp đánh dấu HTML. Một số các phần tử này sẽ làm cho các trình duyệt đưa ra các cách xử lý hiển thị mới. Các phần tử khác sẽ thêm các tính năng bổ sung mà sau này trở nên có sẵn thông qua JavaScript. Tuy nhiên, một số phần tử trong số đó sẽ không làm như vậy. Chúng sẽ trông giống nhau và có cùng các giao diện lập trình như <span>, <div>, và <p>. Tuy nhiên, chúng sẽ thêm ý nghĩa ngữ nghĩa bổ sung. Các ngữ nghĩa mới này không chỉ quan trọng cho người sử dụng trang không có hình ảnh (bao gồm cả bất cứ ai đang sử dụng các công nghệ trợ giúp như các trình đọc màn hình) mà còn quan trọng cho các chương trình máy tính giống như các trình duyệt của máy tìm kiếm. Các thẻ mới này cũng cung cấp các dấu móc cho các nhà phát triển để viết các bộ chọn CSS ý nghĩa hơn. Hình 4 cho thấy một trang Web đang sử dụng một số các phần tử ngữ nghĩa mới.


Hình 4. Các phần tử HTML 5 mới trên iPhone
Ảnh chụp màn hình của các phần tử HTML 5 mới header, nav, article, và section, and aside trên iPhone

Ví dụ trong Hình 4 có một phần tử header (tiêu đề), cũng như các phần tử nav, một phần tử article (bài viết), một phần tử section (phần), và một phần tử aside (nhận xét). Các phần tử này không gây ra bất kỳ sự diễn tả đặc biệt nào. Chúng chỉ thêm giá trị ngữ nghĩa, và bạn có thể sử dụng chúng để viết CSS nhằm cung cấp cho chúng các cách xử lý hình ảnh trực quan cho phù hợp với giá trị ngữ nghĩa đó. Mã dùng cho trang được hiển thị ở Hình 4 có trong Liệt kê 6.


Liệt kê 6. Các phần tử ngữ nghĩa mới trong HTML 5

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width; initial-scale=1.0; 
        maximum-scale=1.0; user-scalable=0;"/>
    <meta name="apple-touch-fullscreen" content="YES" />
<title>Get the latest markup</title>
</head>
<body>
    <header style="border: 1px dotted #000;border-radius: 3px;">
        <hgroup align="center">
            <h1>Real documents have headers</h1>
            <h2>Even if they don't say so</h2>
        </hgroup>
        <hgroup>
        <nav style="-webkit-column-count:3;-webkit-column-rule: 1px solid #a00;">
            <a href="new-css.html">CSS3</a><br/>
            <a href="report.html">Canvas</a><br/>
            <a href="elements.html">Markup</a>
        </nav>
        </hgroup>
    </header>
    <article>
       <h1>There are a lot of new markup elements in HTML5</h1>
       <time datetime="2010-05-16" pubdate>Sunday, May 16</time>
       <section>Did you notice that we just had two H1's? 
       But it's cool!</section>
       <aside style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis;" >
            If this page was really popular, I'd put an ad here and make some
            serious cash
        </aside>
    </article>
</body>
</html>

Bạn có thể thấy một số các phần tử mới được đề cập trước đây. Lưu ý rằng bạn cũng đã áp dụng một số các kiểu dáng CSS mới để tạo ra một hộp với có các góc tròn xung quanh header và để tạo các bộ chia tách cho nav. Bạn cũng đã sử dụng định kiểu tràn văn bản trên aside. Vấn đề ở đây là bạn có thể tạo cách đánh dấu nhiều ý nghĩa hơn không có công việc bổ sung nào, rồi bạn có thể làm cho nó xuất hiện như khi bạn đã sử dụng <div> và <span>. Để xem một ví dụ về các phần tử mới HTML 5 có tác động lập trình và trực quan hơn, hãy xem Hình 5. (Xem một phiên bản chỉ gồm văn bản của Hình 5.)


Hình 5. Các biểu mẫu được tạo bằng HTML 5 trên iPhone
Ảnh chụp màn hình của các biểu mẫu được tạo bằng HTML 5 từ các phần tử iPhone

Màn hình trong Hình 5 sử dụng nhiều phần tử biểu mẫu mới có sẵn trong HTML 5. Trong nhiều trường hợp, chúng trông như các phần tử hiện có, nhưng bạn có thể hy vọng các trình duyệt có thêm vào các biểu diễn hình ảnh tốt hơn của các phần tử biểu mẫu phong phú hơn này. Để xem lướt qua, hãy xem xét phần trên trong trình duyệt máy tính để bàn Opera trong Hình 6. (Xem một phiên bản chỉ gồm văn bản của Hình 6.)


Hình 6. Các phần tử biểu mẫu HTML 5 trên Opera
Ảnh chụp màn hình của một số biểu mẫu được tạo bằng HTML 5 từ các phần trử trên Opera

Opera đã là một trình duyệt hàng đầu trong việc thực hiện các tính năng HTML 5, và điều này đặc biệt đúng đối với các phần tử biểu mẫu mới. Bây giờ xem xét mã đã tạo Liệt kê 4 và Liệt kê 5 để bạn có thể hiểu tốt hơn lý do tại sao Opera đưa ra mọi thứ theo cách nó đã làm Liệt kê 7 cho thấy mã này


Liệt kê 7. Các phần tử biểu mẫu HTML 5 theo mã

<form id="settings">
<fieldset id="inputs" style="border: 1px solid #000;border-radius: 6px;">
    <legend>Settings</legend>
    <label for="name">Username</label>
    <input id="name" name="name" type="text" required autofocus /><br/>
    <label for="name">Name</label>
    <input id="name" name="name" type="text" 
          placeholder="First and last name" required /><br/>
    <label for="email">Email</label>
    <input id="email" name="email" type="email"           
           placeholder="example@domain.com" required /><br/>
    <label for="phone">Phone</label>
    <input id="phone" name="phone" type="tel" 
          placeholder="Eg. +447500000000" required /><br/>
    <label for="dob">Date of birth</label>
    <input id="dob" name="dob" type="date" required/>
    <fieldset style="border: 1px dotted #000; border-radius: 6px">
        <legend>Preferred Contact Method</legend>
        <ol>
            <li>
                <input id="emailMeth" name="contactMethod" 
                            type="radio">
                <label for="emailMeth">Email</label>
            </li>
            <li>
                <input id="phoneMeth" name="contactMethod" 
                            type="radio">
                <label for="phoneMeth">Phone</label>
            </li>
        </ol>
    </fieldset>
    <label for="climate">Preferred external temperature</label>
    <input id="climate" name="climate" type="range" min="50" 
          max="100" step="5" value="70"/><br/>
    <label for="color">Favorite color</label>
    <input id="color" name="color" type="color"/><br/>
    <label for="referrer">Where'd you hear about us?</label>
    <input type="url" name="refUrl" id="referrer" list="urls"/>
    <datalist id="urls">
        <option label="TechCrunch" value="http://www.techcrunch.com/">
        <option label="ReadWrite Web" value="http://www.readwriteweb.com/">
        <option label="Engadget" value="http://www.engadget.com/">
        <option label="Ajaxian" value="http://www.ajaxian.com/">
    </datalist><br/>
    <button type="button" onclick="checkInputs()">Save</button>
</fieldset>
</form>

Các phần tử form (biểu mẫu) trong Liệt kê 7 cho thấy nhiều tính năng mới của HTML 5. Hãy lưu ý hai thuộc tính mới là, required và autofocus. Thuộc tính required được sử dụng trong việc xác nhận hợp lệ biểu mẫu (có nhiều hơn về điều đó ở dưới đây) và thuộc tính autofocus (trọng tâm tự động) cho phép bạn chọn phần tử trên trang Web để tập trung vào. Cũng lưu ý rằng một số các phần tử có văn bản placeholder (giữ chỗ). Đây là một mô hình mà nhiều trang Web đã sử dụng trong nhiều năm — đặt một số ví dụ hoặc văn bản giải thích bên trong hộp văn bản — nhưng các nhà phát triển luôn đã phải đối mặt với mã này. Bạn có thể thấy iPhone triển khai thực hiện mã này độc đáo như thế nào trong Hình 4.

Sau đó, bạn bắt đầu nhìn thấy một số các kiểu mới được phép cho các phần tử đầu vào, như email, phone, date, range, color, và url. Tất cả các kiểu này được đưa ra như là các trường văn bản trên các trình duyệt iPhone và Android hiện nay, nhưng chúng sẽ trông như thế nào nếu chúng được tạo ra bằng cách sử dụng HTML 4.0 có ít ngữ nghĩa chính xác hơn. Trong Hình 5, bạn có thể thấy chúng có lẽ trông như thế nào trong tương lai. Đầu vào date phải được tập trung vào trước khi nó cho thấy giao diện người dùng mới của nó (một lịch hiện lên) trên Opera. Điều này cũng đúng cho đầu vào url trongHình 7, nhưng đó không phải vì nó là đầu vào url. Đó là vì nó có một thuộc tính list (danh sách). Điều này chỉ rõ phần tử datalist có chứa các giá trị được phép cho trường đó. Khi bạn tập trung vào trường này, bạn có thể thấy các giá trị có thể (trong trường hợp này là một số URL) từ datalist, tương tự như các trường đề xuất tự động kiểu dáng của Ajax đang thịnh hành. Bạn có thể thấy cả hai ngày và các tính năng datalist trong Hình 7.


Hình 7. Đầu vào HTML 5 với các ngày tháng và các datalist
Ảnh chụp màn hình của đầu vào HTML 5 với dates và datalists

Bạn có thể hy vọng rằng nhiều kiểu đầu vào sẽ cho phép các biểu diễn hình ảnh có ích hơn khi Webkit tiếp tục phát triển nhanh. Opera cung cấp cho bạn một cái nhìn về tương lai tốt. Nhiều trường đầu vào này cũng cung cấp xác nhận hợp lệ, và HTML 5 có một tập đầy đủ các API xác nhận hợp lệ mới. Những tính năng này vẫn chưa làm việc trên các thiết bị iPhone hoặc trên các thiết bị dựa trên Android, nhưng chúng đã làm việc trong các thiết bị máy tính để bàn tương đương, vì vậy bạn có thể hy vọng chúng sẽ cung cấp tài liệu trên các trình duyệt di động. Hãy xem xét cách sử dụng các API xác nhận hợp lệ mới trong Liệt kê 8.


Liệt kê 8. Các API xác nhận hợp lệ HTML 5 đang hoạt động

function checkInputs(){
    var inputs = document.getElementById("inputs").childNodes;
    var len = inputs.length;
    var i = 0;
    var input = null;
    var errors = [];
    for (i=0;i<len;i++){
        input = inputs.item(i);
        if (input.nodeName == "INPUT"){
            if (input.validity){
                if (!input.checkValidity()){
                    errors.push(input.validationMessage);
                }
            }
        }
    }
    var errMsg = "There are " + errors.length + " errors";
    var notify = function(){
        var notification = 
            webkitNotifications.createNotification(null, "Errors!", errMsg);
        notification.show();
    };
    if (window.webkitNotifications){
        if (webkitNotifications.checkPermission()){
            webkitNotifications.requestPermission(notify);
        } else {
            notify();
        }
    } else {
        alert(errMsg);
    }
}

Mỗi phần tử đầu vào đều có một đặc tính validity (xác nhận hợp lệ). Bạn có thể sử dụng đặc tính này hoặc bạn cũng có thể sử dụng hàm checkValidity() để trả về đúng hay sai, và sử dụng đặc tính validationMessage để nhận được một thông báo lỗi đã khoanh vùng. Tại thời điểm viết bài này, các trình duyệt máy tính để bàn gần đây nhất không trả về bất cứ điều gì nhất quán hoặc chuẩn cho validationMessage, vì vậy nó thường sử dụng hạn chế. Có thể sử dụng đối tượng validity để xác nhận hợp lệ cho các kiểu lỗi khác nhau, như valueMissing, rangeOverflow, rangeUnderflow, patternMismatch và tooLong. Ví dụ, nếu phần tử này có một thuộc tính bắt buộc nhưng người sử dụng để trống nó, thì validity.valueMissing sẽ đúng.

Cuối cùng, trong Liệt kê 8 cần lưu ý rằng sau khi bạn tìm hiểu tất cả các lỗi xác nhận hợp lệ, sau đó bạn cố gắng sử dụng webkitNotifications. Các webkitNotification này giống như các thông báo hệ thống trên máy tính để bàn của bạn, và chúng có sẵn trong phiên bản mới nhất của Chrome. Vì vậy bạn lại có thể hy vọng rằng chúng sẽ đến sớm với các trình duyệt iPhone và Android. Sử dụng API là đơn giản. Phần rắc rối duy nhất là bạn cần kiểm tra xem người sở hữu đã cấp phép cho trang Web của bạn sử dụng API này chưa. Nếu chưa, bạn phải yêu cầu cấp phép, nhận lấy hàm mà bạn muốn được gọi nếu người sở hữu cho phép.

Về đầu trang

Tóm tắt

Các bài viết khác trong loạt bài này

Trong bài viết này, bạn có một chuyến đi ngắn qua nhiều tính năng liên quan đến giao diện người dùng mới trong HTML 5, từ các phần tử mới đến kiểu dáng mới cho canvas. Các tính năng này (ngoại trừ một vài trường hợp ngoại lệ cần chú ý ở cuối) đều có sẵn cho bạn sử dụng trên các trình duyệt dựa trên Webkit được tìm thấy trên các thiết bị iPhone và các thiết bị dựa trên Android. Các nền tảng phổ biến khác như các máy điện thoại thông minh Blackberry và Nokia đang nhận được nhiều trình duyệt mạnh cũng sử dụng các công nghệ giống như bạn đã xem xét trong bài viết này. Là nhà phát triển Web di động, bạn có cơ hội để nhắm vào một nhóm người dùng rộng rãi với các tính năng hình ảnh mạnh mẽ hơn bất cứ thứ gì mà bạn đã từng có quyền truy cập vào bằng HTML, CSS và JavaScript trên các trình duyệt máy tính để bàn. Trong bốn phần trước của loạt bài này, bạn đã biết về nhiều công nghệ mới khác (như định vị địa lý và các Web Worker) có sẵn cho bạn trên các trình duyệt di động mới tuyệt vời này. Web di động không phải là một phiên bản Web yếu hơn mà bạn đã lập trình trong nhiều năm qua. Nó là một phiên bản mạnh mẽ có đầy đủ các khả năng.


Về đầu trang

Tải về

Mô tảTênKích thướcPhương thức tải
Article source codeui.zip5KBHTTP

Thông tin về phương thức tải


Tài nguyên

Học tập

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

Thảo luận

Đôi nét về tác giả

Michael Galpin đã phát triển phần mềm Java một cách chuyên nghiệp từ năm 1998. Ông hiện đang làm việc cho eBay. Ông đã có bằng về toán học của Viện Công nghệ California.

Đóng [x]

Hướng dẫn về "Phản ánh nội dung không thích hợp

Phản ánh về nội dung không thích hợp

Cám ơn. Nhận xét này sẽ được báo cho người chủ mục tin.

Đóng [x]

Hướng dẫn về "Phản ánh nội dung không thích hợp

Phản ánh về nội dung không thích hợp

Gửi phản ánh bị lỗi. Làm ơn thử lại sau.

Đóng [x]

developerWorks: Đăng nhập


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 (tiếng Anh).

 

Khi bạn đăng nhập lần đầu tiên, một bản trích ngang trên developerWorks sẽ được tạo ra. Chọn các thông tin trong trích ngang của developerWorks để hiển thị công khai, bạn có thể sửa lại thông tin này bất cứ lúc nào. Tên, họ và tên hiển thị sẽ đi kèm với nội dung mà bạn gửi lên.

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

Đóng [x]

Choose your display name

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.

(Độ dài phải từ 3 đến 31 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 (tiếng Anh).

 

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

Chấm điểm bài này

Bình luận

Về đầu trang

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=70
Zone=Nguồn mở
ArticleID=775555
ArticleTitle=Tạo các ứng dụng Web di động với HTML 5, Phần 5: Phát triển các tính năng giao diện người dùng trực quan mới trong HTML 5
publish-date=06182011

Mục lục

Chia sẻ trang này:

  • Đóng [x]
  • Đóng [x]