Không có câu hỏi, HTML5 là một chủ đề nóng cho các nhà phát triển. Nếu bạn cần một khóa học sụp đổ để nhanh chóng hiểu những nguyên tắc cơ bản của chức năng HTML5, bạn đang ở đúng nơi.
Tôi sẽ bao gồm các đánh dấu ngữ nghĩa mới, vải để vẽ và hình ảnh động, âm thanh và video hỗ trợ, và làm thế nào để sử dụng HTML5 với các trình duyệt cũ. Có thể nhiều hơn một chút so với năm phút, nhưng tôi hứa tôi sẽ giữ nó nhanh chóng. Gắn bó với tôi ... nó sẽ được giá trị nó!
Giao diện và đánh dấu trang ngữ nghĩa
Có một câu chuyện tuyệt vời về một đại học , khi xây dựng khuôn viên của họ, không tạo ra bất kỳ con đường đi bộ . Họ chỉ trồng cỏ và chờ đợi.
Một năm sau, cỏ đã được tất cả các mòn nơi người ta đi bộ thường xuyên nhất. Vì vậy, đó là nơi mà các trường đại học mở vỉa hè thực tế .
Nó làm cho cảm giác hoàn hảo ! Vỉa hè là chính xác nơi mà người dân thực sự bước đi.
HTML5 yếu tố ngữ nghĩa mới được dựa trên đó cùng một logic chính xác (xem hướng dẫn thiết kế W3C để " Pave các Cowpaths " ) .
Các yếu tố ngữ nghĩa mô tả ý nghĩa hay mục đích của họ rõ ràng để trình duyệt và các nhà phát triển . Ngược lại rằng với (ví dụ) các thẻ <div> . Các thẻ <div> định nghĩa một bộ phận hoặc một phần trong một tài liệu HTML , nhưng nó không cho chúng tôi bất cứ điều gì về nội dung của nó hoặc truyền tải bất kỳ ý nghĩa rõ ràng.
Các nhà phát triển thường sử dụng ID và / hoặc tên lớp với các thẻ <div>. Điều này truyền tải ý nghĩa hơn để các nhà phát triển , nhưng không may, nó không giúp trình duyệt lấy được mục đích đánh dấu đó.
Trong HTML5, có những yếu tố ngữ nghĩa phong phú mới có thể truyền đạt mục đích của các yếu tố để cả hai nhà phát triển và các trình duyệt .
W3C khai thác hàng tỷ trang web hiện có để khám phá các ID và tên lớp các nhà phát triển đã được sử dụng . Một khi họ đã ném ra div1 , div2 , vv, họ đã đưa ra một danh sách các yếu tố mô tả phong phú đã được đã được sử dụng , và thực hiện những tiêu chuẩn.
Dưới đây là một vài trong số các yếu tố ngữ nghĩa mới trong HTML5 :
bài viết
sang một bên
figcaption
con số
chân
tiêu đề
hgroup
đánh dấu
nav
phần
thời gian
Vì sự phong phú ngữ nghĩa, bạn có thể đoán những gì hầu hết các yếu tố làm .
Nhưng chỉ trong trường hợp , đây là một hình dung :
Đầu và cuối trang là tự giải thích và nav tạo ra một chuyển hướng hoặc thanh menu . Bạn có thể sử dụng các phần và các nhóm nội dung của bạn . Cuối cùng, các yếu tố ngoài có thể được sử dụng cho nội dung thứ cấp , ví dụ, như một bên của các liên kết có liên quan.
Đây là một ví dụ đơn giản của một số mã có sử dụng các yếu tố này .
Tôi nên gọi ra một vài yếu tố mới khác trong mã này ...
Bạn có nhận thấy các yếu tố hgroup , mà nhóm lại với nhau h1 của tôi và các tiêu đề h2 ?
Các yếu tố đánh dấu cho phép tôi để làm nổi bật hoặc đánh dấu một số văn bản quan trọng. Cuối cùng, các yếu tố hình và figcaption chỉ định một con số trong nội dung của tôi ( như một hình ảnh, sơ đồ , hình ảnh, đoạn mã , vv) và hãy để tôi kết hợp một chú thích với con số tương ứng .
Đây là những gì trang web đó sẽ như thế nào khi kết hợp với một số CSS. (Chú ý: . Tôi mượn CSS này từ đồng đội tài năng của tôi Brandon Satrom của TechEd nói chuyện , nhưng hiệu quả cuối ít hơn, đẹp là tất cả tôi )
Bây giờ , hãy tưởng tượng này trong tay của một người nào đó thực sự tốt ở CSS ( mà tôi không ) . Kết quả là khá mạnh mẽ . Các descriptiveness của HTML làm cho nó siêu dễ dàng để làm việc với.
Cuối cùng, nếu bạn đang cố gắng để làm theo cùng trong Visual Studio nhưng bạn nhìn thấy dòng nguệch ngoạc ở khắp mọi nơi mà VS không hiểu các yếu tố HTML5, chắc chắn rằng bạn có Visual Studio2010 SP1installed .
Sau đó , trong menu Visual Studio, hãy vào Tools , Options. Trong cửa sổ chuyển hướng bên trái , mở rộng Text Editor , HTML, và sau đó nhấp vào Xác Nhận. Từ trình đơn thả xuống mục tiêu , chọn HTML5. Điều này sẽ cung cấp cho bạn hỗ trợ HTML5 IntelliSense . Phù!
Lặn sâu hơn vào yếu tố ngữ nghĩa , hãy kiểm tra :
Làm thế nào để Kích hoạt tính năng hỗ trợ chuẩn HTML5
Phần ngữ nghĩa của các đặc điểm kỹ thuật W3C HTML5
Nhảy vào HTML5 chương về ngữ nghĩa mang tên " What Does It All nghĩa là gì? "
Vẽ trong HTML5 sử dụng phần tử Canvas
Một yếu tố mới trong HTML5 là thẻ < vải > . Nó chỉ là những gì nó giống như âm thanh - một bề mặt trống để vẽ . Bạn cần phải sử dụng JavaScript để thao tác và vẽ trên vải.
Bạn có thể muốn cung cấp cho canvas của bạn một thuộc tính id để bạn lập trình có thể truy cập nó từ mã JavaScript của bạn (hoặc nếu bạn đang sử dụng jQuery và đó là vải chỉ trên trang web, bạn có thể truy cập nó bằng cách sử dụng $ (' vải' ) mà không cần phải đặt tên cho nó ) .
Bạn cũng có thể (tùy chọn) chỉ định một chiều cao và chiều rộng cho khung hình. Giữa <canvas> và </ canvas >, bạn có thể chỉ định một số văn bản để hiển thị trong các trình duyệt không hỗ trợ canvas .
Đây là một ví dụ đơn giản của việc sử dụng vải để vẽ . ( Tôi đang cố gắng để vẽ lá cờ của Scotland. Hãy tha thứ cho bất kỳ sự thiếu chính xác . )
Đây là những gì các mã sản xuất :
Bây giờ chúng ta hãy đi bộ qua các mã.
Trước tiên, tôi tạo ra bức tranh thực tế và cung cấp cho nó một ID của " myCanvas " . Nếu mã này đã được xem trong một trình duyệt không hỗ trợ canvas HTML5, nó sẽ hiển thị " Trình duyệt của bạn không hỗ trợ thẻ canvas " thay vì vẽ lá cờ.
Tiếp theo, tôi có một kịch bản . Nhớ , thẻ vải chỉ là một container cho đồ họa ; bạn phải sử dụng Javascript để thực sự thu hút và làm đồ họa trên nó . Trước tiên, tôi lấy một tham chiếu đến vải bằng cách sử dụng " myCanvas " ID , và sau đó nhận được bối cảnh của vải cung cấp phương pháp / tài sản cho các bản vẽ và thao tác đồ họa trên vải. Tôi đã chỉ định " 2d " sử dụng một bối cảnh 2 chiều để vẽ trên trang.
Sau đó, tôi vẽ hình chữ nhật màu xanh . Tôi sử dụng fillStyle để xác định màu xanh. Tôi sử dụng fillRect để vẽ hình chữ nhật , xác định kích thước và vị trí. Gọi fillRect (0, 0 , 125, 75 ) có nghĩa là : bắt đầu từ vị trí (0, 0 ) - góc trên bên trái - vẽ một hình chữ nhật với chiều rộng = 125 pixel và chiều cao = 75 pixel.
Cuối cùng, tôi vẽ X màu trắng trên lá cờ . Đầu tiên tôi gọi beginPath để bắt đầu quá trình vẽ một con đường. Tôi chỉ định một linewidth 15 pixel ( bằng cách sử dụng phương pháp đoán và kiểm tra cố gắng giá trị khác nhau cho đến khi nó nhìn chính xác ) và một strokeStyle của "trắng" để làm cho màu sắc của đường trắng . Sau đó, tôi theo dõi các đường dẫn sử dụng moveTo và lineTo . Các phương pháp xác định vị trí một " con trỏ" cho bạn để vẽ ; sự khác biệt là moveTo di chuyển con trỏ mà không cần vẽ một đường và lineTo vẽ một đường thẳng trong khi di chuyển . Tôi bắt đầu bằng cách di chuyển đến vị trí (0, 0 ) - góc trên bên trái - và sau đó vẽ một đường để ( 125 , 75 ) - góc dưới bên phải . Sau đó, tôi chuyển sang vị trí ( 125 , 0) - góc trên bên phải - và vẽ một đường để (0 , 75 ) - góc dưới bên trái . Cuối cùng , phương pháp đột quỵ thực sự làm cho những đột quỵ.
So sánh nhanh Canvas vs SVG
Scalable Vector Graphics (SVG) là một tiêu chuẩn trước đó cho các bản vẽ trong một cửa sổ trình duyệt . Với việc phát hành của vải HTML5 , nhiều người đang tự hỏi làm thế nào họ so sánh .
Trong mắt tôi , sự khác biệt lớn nhất là vải sử dụng chế độ dựng hình ngay lập tức và sử dụng SVG dựng chế độ giữ lại. Điều này có nghĩa rằng vải trực tiếp gây ra cung cấp đồ họa để hiển thị. Trong mã của tôi ở trên , một khi lá cờ được rút ra, nó bị lãng quên bởi hệ thống và không có nhà nước được giữ lại. Làm cho một sự thay đổi sẽ đòi hỏi một vẽ lại đầy đủ. Ngược lại, SVG giữ lại một mô hình hoàn chỉnh của các đối tượng để được trả lại. Để thực hiện một sự thay đổi , bạn chỉ có thể thay đổi (ví dụ) vị trí của hình chữ nhật , và trình duyệt sẽ xác định làm thế nào để tái làm cho nó . Đây là công việc ít hơn cho các nhà phát triển , nhưng cũng nặng hơn để duy trì một mô hình .
Khả năng phong cách SVG qua CSS ngoài JavaScript đáng gọi điện thoại ra như một yếu tố nữa . Một bức tranh có thể được thao tác thông qua chỉ JavaScript.
Đây là một tổng quan cấp cao của sự khác biệt khác :
vải SVG
Trừu tượng Pixel dựa trên ( bitmap động) Hình dạng dựa trên
Yếu tố yếu tố đơn HTML Nhiều yếu tố đồ họa mà trở thành một phần của Document Object Model (DOM)
Lái xe thay đổi thông qua Script chỉ thay đổi thông qua Script và CSS
Sự kiện mẫu Tương tác người dùng là dạng hạt ( x, y) Tương tác người dùng là trừu tượng ( rect , đường dẫn)
Thành tích tốt hơn với bề mặt nhỏ hơn và / hoặc số lượng lớn hơn của các đối tượng là hiệu suất tốt hơn với số lượng nhỏ hơn của các đối tượng và / hoặc bề mặt lớn hơn
Để so sánh chi tiết hơn , tôi muốn chỉ cho bạn một vài phiên ( mà từ đó tôi kéo bàn tuyệt vời này , với sự cho phép ) :
" Suy nghĩ về Khi sử dụng SVG và Canvas " Patrick Dengler của
"Deep Dive Into HTML5 Canvas " Jatinder Mann
John Bristowe của " Giới thiệu về HTML5 Canvas "
Âm thanh và video Hỗ trợ
Một trong những tính năng lớn đó là mới trong HTML5 là khả năng hỗ trợ chơi âm thanh và video. Trước khi HTML5, bạn cần một plug-in như Silverlight hay Flash cho chức năng này. Trong HTML5, bạn có thể nhúng âm thanh và video bằng cách sử dụng <audio> mới và các thẻ <video> .
Từ góc độ mã hóa, các yếu tố âm thanh và video rất đơn giản để sử dụng . (Tôi sẽ cung cấp cho bạn một cái nhìn sâu sắc hơn vào các thuộc tính của họ dưới đây . ) Các yếu tố âm thanh và video cũng được hỗ trợ trong tất cả các trình duyệt chính ( phiên bản mới nhất của Internet Explorer, Firefox , Chrome, Opera , và Safari ) . Tuy nhiên , một phần khó khăn là bạn cần codec để chơi âm thanh và video , và các trình duyệt khác nhau hỗ trợ codec khác nhau . ( Đối với một tuyệt vời trong chiều sâu lời giải thích của các thùng chứa video và codec, đọc http://diveintohtml5.org/video.html . )
May mắn thay, đây không phải là một show-stopper . Sự hỗ trợ cho âm thanh và video được thực hiện trong một cách tuyệt vời , nơi có sự hỗ trợ để cố gắng định dạng tập tin khác nhau ( trình duyệt sẽ cố gắng mỗi và sau đó thả xuống tiếp theo nếu nó không thể chơi nó ) .
Như một thực hành tốt nhất , bạn nên cung cấp nhiều nguồn âm thanh và video để chứa các trình duyệt khác nhau. Bạn cũng có thể dự phòng để Silverlight hay Flash. Cuối cùng, bất kỳ văn bản giữa mở và đóng thẻ (như <audio> và < / audio > ) sẽ được hiển thị trong các trình duyệt không hỗ trợ âm thanh hay yếu tố video.
Ví dụ :
Với mã này , đầu tiên trình duyệt sẽ cố gắng để chơi các tập tin laughter.mp3 . Nếu nó không có các codec bên phải để chơi nó, nó sẽ cố gắng tiếp theo để chơi các tập tin laughter.ogg . Nếu các yếu tố âm thanh không được công nhận ở tất cả các trình duyệt, nó sẽ hiển thị văn bản " Trình duyệt của bạn không hỗ trợ các yếu tố âm thanh ", nơi điều khiển âm thanh nên được.
Một báo trước cho âm thanh và video : không có được xây dựng trong quản lý quyền kỹ thuật số (DRM) hỗ trợ ; bạn phải thực hiện chính mình này như các nhà phát triển . Xem liên kết này từ W3C điều này giải thích vị trí của họ . (Nếu bạn có nhu cầu cho nội dung DRM , cũng xem tài liệu Silverlight DRM , mà có thể là một giải pháp dễ dàng hơn. )
Bây giờ chúng ta hãy đi sâu vào từng yếu tố mới .
âm thanh
Trước tiên, hãy nhìn vào <audio> chi tiết hơn .
Chúng tôi đã thảo luận về tác dụng dự phòng cố gắng từng nguồn cho đến khi nó hy vọng tìm thấy một có thể chơi được .
Lưu ý rằng có một thuộc tính điều khiển . Điều này sẽ hiển thị các điều khiển phát lại âm thanh bao gồm một nút play / tạm dừng , thời gian, một nút tắt tiếng , và điều khiển âm lượng . Trong hầu hết các tình huống , rất tốt để hiển thị điều khiển âm thanh cho người sử dụng ; Tôi ghét thăm một trang web với âm thanh và không thể ngăn chặn nó, tắt nó, hoặc biến nó xuống . Phải không?
Đây là những gì các điều khiển âm thanh như thế nào trong Internet Explorer:
Các điều khiển tìm kiếm khác nhau trong các trình duyệt khác nhau. Dưới đây là những gì họ trông giống như trong Chrome ( với một bài hát đang chơi ) . Khối lượng thả xuống bật xuống khi bạn di chuột qua biểu tượng âm thanh trên bên phải.
Dưới đây là các điều khiển trong Firefox ( với một bài hát tạm dừng) . Như Chrome, nó cũng có một điều khiển âm lượng pop-up (không hiển thị ) khi bạn di chuột qua biểu tượng âm thanh trên bên phải.
Thuộc tính thú vị khác trên các yếu tố âm thanh bao gồm:
Giá trị thuộc tính có thể Mô tả
autoplay autoplay Bắt đầu chơi âm thanh ngay khi nó sẵn sàng
điều khiển điều khiển hiển thị các điều khiển phát lại âm thanh trên trang
vòng lặp Nguyên nhân âm thanh lặp lại và chơi lại mỗi khi nó kết thúc
tự động tải trước , siêu dữ liệu, không Xác định xem để tải các âm thanh khi trang web được tải . Giá trị sẽ tự động tải các âm thanh, siêu dữ liệu sẽ được tải chỉ siêu dữ liệu liên quan đến tập tin âm thanh , và không ai sẽ không tải trước âm thanh. ( Thuộc tính này sẽ bị bỏ qua nếu autoplay được chỉ định. )
src (một số URL ) Chỉ định URL của tập tin âm thanh để chơi
Vì vậy, mẫu mã này sẽ không chỉ hiển thị các điều khiển phát lại âm thanh , nhưng cũng bắt đầu âm thanh chơi ngay lập tức và lặp lại nó hơn và hơn trong vòng một.
Nếu bạn muốn chơi xung quanh với các yếu tố <audio> mình trong trình duyệt của bạn, có một "tuyệt vời TryIt Editor" trên http://w3schools.com cho phép bạn chỉnh sửa một số mẫu mã và xem những gì sẽ xảy ra . Hoặc thử Làm thế nào để thêm một máy nghe nhạc âm thanh HTML5 cho bài viết trang web của bạn .
video
Bây giờ, chúng ta hãy xem xét các yếu tố <video> .
Như chúng ta đã thảo luận ở trên , các yếu tố video có hỗ trợ nhiều nguồn, trong đó nó sẽ cố gắng để và sau đó rơi xuống tùy chọn tiếp theo .
Như âm thanh, video có một thuộc tính điều khiển . Đây là một ảnh chụp màn hình của các điều khiển video trong Internet Explorer:
Thuộc tính thú vị khác của các yếu tố video bao gồm :
Giá trị thuộc tính có thể Mô tả
Bộ tắt âm thanh trạng thái mặc định của âm thanh (hiện tại , " tắt tiếng " là lựa chọn duy nhất )
autoplay autoplay Khởi động chơi video ngay sau khi nó đã sẵn sàng
điều khiển điều khiển hiển thị các điều khiển phát lại video trên trang
chiều cao ( giá trị tính bằng điểm) Thiết lập chiều cao của máy nghe nhạc video
vòng lặp Nguyên nhân video để lặp lại và chơi lại mỗi khi nó kết thúc
poster ( một số URL ) Chỉ định URL của một hình ảnh đại diện cho video khi không có dữ liệu video hiện có sẵn
tự động tải trước , siêu dữ liệu, không Xác định xem để tải các video khi trang web được tải . Giá trị sẽ tự động tải các video, siêu dữ liệu sẽ được tải chỉ siêu dữ liệu liên quan đến các tập tin video, và không ai sẽ không tải trước video. ( Thuộc tính này sẽ bị bỏ qua nếu autoplay được chỉ định. )
src (một số URL ) Chỉ định URL của tập tin video để chơi
chiều rộng ( giá trị tính bằng điểm) Thiết lập độ rộng của máy nghe nhạc video
Một lần nữa, để chơi xung quanh với các yếu tố <video> mình , sử dụng " TryIt Editor" từ http://w3schools.com cho phép bạn chỉnh sửa một số mẫu mã và xem những gì sẽ xảy ra .
Để tìm hiểu thêm về video và âm thanh , kiểm tra :
5 điều bạn cần biết để bắt đầu sử dụng <audio> và <video> hôm nay
Làm thế nào để thêm một máy nghe nhạc âm thanh HTML5 để trang web của bạn
W3C trường video HTML5
Phát triển với HTML5 trong khi giữ lại hỗ trợ cho các trình duyệt cũ
Chúng tôi đã thảo luận rất nhiều chức năng mới mát mẻ trong HTML5 , bao gồm các yếu tố mới ngữ nghĩa, các thẻ canvas để vẽ, và sự hỗ trợ âm thanh và video .
Bạn có thể nghĩ rằng công cụ này là thực sự mát mẻ , nhưng bạn có thể không có thể áp dụng HTML5 khi nhiều người dùng của bạn không có trình duyệt HTML5 tương thích nào . Không đề cập đến các trình duyệt hỗ trợ HTML5 DO hỗ trợ phần khác nhau của nó ; không phải tất cả các chức năng HTML5 mới được hỗ trợ trong tất cả các trình duyệt và các tính năng khác nhau có thể được thực hiện khác nhau.
Nhưng có một cách để sử dụng các tính năng mới mà không vi phạm trang web của bạn cho người dùng với các trình duyệt cũ . Bạn có thể sử dụng polyfills .
Theo Paul Ailen , một polyfill là " một shim bắt chước một API tương lai , cung cấp chức năng dự phòng cho các trình duyệt cũ hơn. " Một polyfill lấp đầy những khoảng trống trong các trình duyệt cũ không hỗ trợ các chức năng HTML5 trong trang web của bạn . Học tập để sử dụng polyfills sẽ cho phép bạn sử dụng HTML5 hôm nay mà không để lại người sử dụng các trình duyệt cũ .
Một cách để nhận được hỗ trợ polyfill là thư viện JavaScript Modernizr ( nhưng có nhiều polyfills có sẵn ) . Modernizr cho biết thêm khả năng phát hiện tính năng để bạn có thể kiểm tra đặc biệt cho dù trình duyệt hỗ trợ (ví dụ) các yếu tố vải và cung cấp một tùy chọn sao lưu nếu nó không.
Chúng ta hãy đi bộ qua một ví dụ. Hãy nhớ rằng các mẫu mã mà tôi sử dụng khi giới thiệu các yếu tố ngữ nghĩa và cách bố trí trang ? Ở đây nó là một lần nữa:
Mã này có chứa một số yếu tố HTML5 mới không được hỗ trợ trong các trình duyệt cũ . Hãy nhớ rằng, trong Internet Explorer 9, nó trông như thế này :
Chúng ta có thể sử dụng các công cụ phát triển Internet Explorer để xem những gì này sẽ như thế nào trong phiên bản cũ của IE . Trong Internet Explorer, bấm F12 để truy cập vào các công cụ phát triển .
Lưu ý rằng các chế độ trình duyệt ( trên thanh menu màu xám trên đầu trang ) hiện đang đặt IE9. Nhấp chuột vào các chế độ trình duyệt , và từ trình đơn thả xuống hiện ra, chọn " Internet Explorer 8 " (mà không có hỗ trợ HTML5 ) .
Sau khi tôi thực hiện thay đổi và chuyển sang một trình duyệt không tương thích HTML5 , đây là những gì trang web của tôi hình như:
Mặc dù điều này có vẻ như một vấn đề quái vật để sửa chữa , nó không thực sự là xấu. Lý do mà điều này không làm việc là IE8 không công nhận các yếu tố HTML5 mới mà tôi đang sử dụng , vì vậy nó không thêm chúng vào DOM , vì vậy bạn không thể tạo kiểu họ sử dụng CSS .
Tuy nhiên , chỉ cần thêm một tham chiếu đến Modernizr ( mà không thực hiện bất kỳ thay đổi mã khác ) sẽ brute- buộc các yếu tố này vào DOM . Tải về từ http://www.modernizr.com/download/ và thêm một tham chiếu trong phần <head> như vậy:
Tôi bổ sung thêm hai tài liệu tham khảo kịch bản, một cho jQuery và một Modernizr . Tôi không thực sự cần tài liệu tham khảo jQuery vào thời điểm này , nhưng chúng tôi sẽ cần nó cho kịch bản tiếp theo , vì vậy tôi thêm nó bây giờ.
Chỉ cần thay đổi đơn giản này bây giờ được trang web của tôi để trạng thái này trong Internet Explorer 8:
Nó không hoàn hảo , nhưng đó là khá gần với phiên bản gốc mà chúng ta thấy trong Internet Explorer 9. Modernizr thêm những yếu tố HTML5 mới IE8 không hiểu vào DOM , khi họ còn ở trong DOM , chúng ta có thể phong cách họ sử dụng CSS.
Nhưng Modernizr làm nhiều hơn thế! Chú ý rằng một trong những sự khác biệt giữa IE8 và IE9 phiên bản của chúng tôi của trang web là phiên bản IE9 có góc tròn đẹp trên hai bài báo và các con số, và các phiên bản IE8 thì không. Chúng tôi cũng có thể sử dụng Modernizr để sửa lỗi này .
Trong kịch bản này, chúng tôi đang kiểm tra các đối tượng Modernizr để xem nếu có sự hỗ trợ cho " borderradius " (một tính năng CSS3 ) . Nếu không , tôi sử dụng một kịch bản jQuery được gọi là jquery.corner.js ( trong đó có sẵn để tải về tại http://jquery.malsup.com/corner/ và đòi hỏi thêm tài liệu tham khảo để jQuery mà tôi đã thực hiện trước đó). Sau đó, tôi chỉ đơn giản gọi phương thức góc từ kịch bản trên các bài báo và số liệu của tôi để cung cấp cho họ các góc tròn .
OR, bạn có thể làm điều này một cách hơi khác nhau . Modernizr có một bộ nạp tùy chọn ( không bao gồm) điều kiện nguồn lực được gọi là Modernizr.load ( ), dựa trên Yepnope.js . Điều này cho phép bạn tải các kịch bản polyfilling rằng người dùng của bạn cần, và nó tải các kịch bản không đồng bộ và song song mà đôi khi có thể cung cấp một tăng hiệu suất . Để có được Modernizr.load , bạn phải bao gồm nó trong một tùy chỉnh xây dựng của Modernizr mà bạn có để tạo ra tại http://www.modernizr.com/download/ ; nó không được bao gồm trong phiên bản phát triển . Với Modernizr.load , chúng ta có thể viết một kịch bản như thế này :
Trong ngắn hạn, điều này thực hiện các chức năng tương tự như kịch bản trước đó của chúng tôi . Modernizr.load đầu tiên kiểm tra tài sản " Modernizr.borderradius " Boolean để xem nếu nó được hỗ trợ. Sau đó , nope xác định các nguồn lực để tải nếu kiểm tra là sai. Kể từ khi IE8 không hỗ trợ tài sản CSS3 " borderradius ", nó sẽ tải các kịch bản jquery.corner.js . Cuối cùng, gọi lại xác định một chức năng để chạy bất cứ khi nào kịch bản được thực hiện tải , vì vậy chúng tôi sẽ gọi phương thức " góc " trên các bài báo và số liệu của tôi như chúng tôi đã làm trước đây. Có một hướng dẫn ngắn gọn về Modernizr.load tại http://www.modernizr.com/docs/ # tải nếu bạn muốn tìm hiểu sâu hơn .
Bây giờ, bằng cách sử dụng một trong những kịch bản , Internet Explorer 8 phiên bản của chúng tôi ( mà không hỗ trợ HTML5 ) trông như thế này :
Vì vậy, sử dụng các công cụ như polyfills và Modernizr cho phép bạn sử dụng chức năng HTML5 mới và vẫn cung cấp một kinh nghiệm tốt trên các trình duyệt cũ là tốt. Để biết thêm thông tin , hãy kiểm tra http://diveintohtml5.info/ trong đó mô tả chi tiết cách Modernizr phát hiện các tính năng HTML5 .
Tóm tắt
Trong này giới thiệu về HTML5, chúng ta đã đánh dấu ngữ nghĩa , vải, âm thanh và video , và sử dụng HTML5 trong khi giữ lại hỗ trợ cho các trình duyệt cũ . Nhưng cũng lưu ý rằng có rất nhiều chúng tôi đã không bao gồm: dữ liệu vĩ mô , lưu trữ, CSS3, vv Đây là một vài nguồn lực để tiếp tục tìm hiểu về HTML5 :
IE Test Drive - ngay cả khi bạn không sử dụng Internet Explorer , đây là một trang web tuyệt vời . Nó chứa một tấn demo : Tốc độ Demo , HTML5 Demo , đồ họa Demo , và trình duyệt Demo . Thử chúng trong trình duyệt yêu thích của bạn ! Trang web này cũng có liên kết đến các nguồn lực khác , quá .
Vẻ đẹp của Web - giới thiệu các trang web tốt nhất trên web mà tận dụng lợi thế của HTML5 và tăng tốc phần cứng ghim tính năng với trình duyệt Internet Explorer 9
BuildMyPinnedSite - tất cả các mã , ý tưởng và mẫu bạn cần phải sử dụng ghim và Windows tích hợp
HTML5 Labs - Trang web này là nơi mà Microsoft nguyên mẫu đầu và thông số kỹ thuật không ổn định từ các tiêu chuẩn web cơ quan như W3C. Bạn có thể chơi với nguyên mẫu như IndexedDB , WebSockets , FileAPI , và Media Capture API.
video
" Phát triển ứng dụng với HTML5 " Brandon Satrom của nói chuyện tại TechEd 2011 - đây là một kéo dài một giờ nói chuyện tuyệt vời mà móng tay những gì bạn cần biết để làm phát triển HTML5
HTML5 nói từ MIX 2011 - một sự giàu có của các phiên HTML5
công cụ
Nhiều công cụ phát triển hỗ trợ HTML5 đã . Thử này:
Visual Studio 2010 SP1 - SP1 thêm HTML5 và CSS3 cơ bản IntelliSense và xác nhận. Để biết thêm thông tin, xem http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx.
Cập nhật tiêu chuẩn web cho Microsoft Visual Studio 2010 SP1 - đây là một phần mở rộng Visual Studio cho biết thêm cập nhật HTML5 và CSS3 IntelliSense và xác nhận để Visual Studio 2010 SP1 , dựa trên các đặc điểm kỹ thuật W3C hiện tại .
WebMatrix - HTML5 được hỗ trợ theo mặc định ra khỏi hộp ( thêm một trang HTML mới sử dụng loại tài liệu được mặc định HTML5 và mẫu mã )
ASP.NET MVC 3 công cụ cập nhật
o Hộp thoại New Project bao gồm một phiên bản HTML5 hộp kiểm cho phép các mẫu dự án.
o Các mẫu đòn bẩy Modernizr 1.7 hỗ trợ khả năng tương thích cho HTML5 và CSS3 trong các trình duyệt xuống cấp .
Expression Web 4 SP1
o HTML5 IntelliSense và hỗ trợ trong Code Editor và Design View
o Richer chỉnh sửa phong cách CSS3 và IntelliSense
o SuperPreview Trang Chế độ tương tác và Dịch vụ trực tuyến ( các trình duyệt từ xa bao gồm Chrome, IE8, IE9 và Safari 4 và 5 trên Windows và Mac )
Ngoài ra công cụ phát triển , đừng quên :
Windows Phone " Mango" có Internet Explorer 9 , hỗ trợ các trang web HTML5.
Internet Explorer 10 Platform Xem trước đã hỗ trợ cho nhiều CSS3 mới và các tính năng HTML5 ; danh sách đầy đủ là http://msdn.microsoft.com/en-us/ie/gg192966.aspx .
HTML5 là ở đây. Đi ra và phát triển trang web tuyệt vời !
Không có nhận xét nào:
Đăng nhận xét