![Đóng [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Các thư viện như jQuery đã cách mạng hóa con đường mà các nhà phát triển tạo các trang web, thúc đẩy sự phát triển của một bộ sưu tập lớn các kịch bản lệnh sẵn sàng-để-chạy và bạn có thể chỉ thêm chúng vào các trang HTML. Microdata có tiềm năng để thúc đẩy cuộc cách mạng này tiến một bước xa hơn, làm cho việc tạo các kịch bản lệnh làm việc liên tục trên bất kỳ trang web nào dễ dàng hơn, không quan tâm đến các biến thể trong các khuôn mẫu HTML.
Ví dụ, để hiển thị các sự kiện có kế hoạch trên một bản đồ, các trình cắm thêm jQuery tích hợp với các bản đồ Google và giúp cho việc tạo một bản đồ tương tác trên trang web của bạn dễ dàng. Nỗ lực duy nhất cần thiết trong phần việc của bạn là tạo ra một tệp theo một định dạng có cấu trúc, như JSON hoặc CSV, có chứa các địa điểm. Mặc dù, việc có dữ liệu này theo một định dạng có cấu trúc riêng biệt có thể là một vấn đề, nếu bạn cũng muốn hiển thị thông tin theo HTML trên trang web. Để duy trì các nội dung trong cả hai HTML và tệp dữ liệu hoặc bạn phải viết một kịch bản lệnh chuyển dịch giữa HTML trên trang đó và tệp dữ liệu hoặc bạn phải nhân đôi nỗ lực của mình. Cách tiếp cận này có thể dẫn đến HTML và các tệp dữ liệu mất đồng bộ rất nhanh.
Việc duy trì các tệp đồng bộ là một trong những lợi thế chính về việc sử dụng các định dạng dữ liệu HTML như microdata và RDFa — bạn có thể viết HTML như bạn vẫn thường làm rồi thêm một vài thuộc tính vào các thẻ HTML để tăng nó lên gấp đôi khi lưu trữ dữ liệu của bạn. Vì các định dạng dữ liệu HTML này là các tiêu chuẩn web được phát triển và được phê chuẩn bởi WHATWG và W3C, những người đã xây dựng các công cụ biết cách trích xuất dữ liệu từ HTML và bạn có thể dễ dàng sử dụng lại các công cụ này trên trang web của bạn.
Do microdata chỉ mới bắt đầu đạt được kết quả đáng kể gần đây, nên chỉ có một vài trình cắm thêm đã được phát hành có hỗ trợ. Một ví dụ là trình cắm thêm UI Map (Bản đồ giao diện người dùng) của jQuery, cung cấp loại bản đồ đã mô tả ở trên.
Tạo một bản đồ sự kiện có sẵn cho Rich Snippet
Bạn có thể sử dụng một đoạn mã HTML ngắn để lấy cả hai một bản đồ sự kiện tương tác và tối ưu hóa máy tìm kiếm (SEO) tốt hơn.
Như đã mô tả trong một bài trước (xem Tài nguyên để có một liên kết), có thể sử dụng microdata với các thuật ngữ trong bảng từ vựng Schema.org để giúp các máy tìm kiếm hiểu rõ hơn nội dung của bạn. Cách tiếp cận này cho phép các máy tìm kiếm hiển thị Rich Snippets, đưa thông tin quan trọng nhất về trang web đó vào chính kết quả tìm kiếm.
Các chú thích mà bạn thêm vào để lấy Rich Snippets có thể làm tăng gấp đôi nhiệm vụ. Ngoài các kết quả tìm kiếm tốt hơn, bạn cũng có thể sử dụng chúng trên trang riêng của mình để cung cấp một hiển thị tốt hơn.
Bạn sẽ sử dụng một trình cắm thêm jQuery để làm điều này. Tôi đưa các tệp có liên quan vào phần tải về của mã ví dụ, bao gồm một phiên bản trình cắm thêm có chỉnh sửa một chút.
Hãy tạo một bản liệt kê các sự kiện DrupalCamp trên toàn thế giới. Để bắt đầu, hãy tạo một trang HTML có hai sự kiện như trong Liệt kê 1.
Liệt kê 1. Hai sự kiện liệt kê HTML cơ bản
<!DOCTYPE html>
<head>
<title>Upcoming DrupalCamps</title>
</head>
<body id="doc">
<h1>Upcoming DrupalCamps</h1>
<!-- Event 1: DrupalCamp Toulouse -->
<div>
<h2><a href="http://example.com/drupalcamp_fr">DrupalCamp Toulouse 2011</a></h2>
<img src='images/drupalicon_fr.png' />
<p>Vous l’attendiez tous, le DrupalCamp Toulouse aura bien lieu,
réuni avec 2 autres événements sous la bannière
"Capitole du Libre": le DrupalCamp, une Ubuntu Party, une Akademy
(évènement KDE).</p>
<div>
ENSEEIHT, Toulouse, Haute-Garonne, FR
</div>
<div>
<time datetime="2011-11-26T09:00:00+01:00">November 26, 10:00am</time> –
<time datetime="2011-11-27T17:00:00+01:00">November 27, 6:00pm</time>
</div>
</div>
<!-- Event 2: DrupalCamp Ohio -->
<div>
<h2><a href="http://example.com/drupalcampohio">Drupalcamp Ohio 2011</a></h2>
<img src='images/drupalicon_oh.png' />
<p>The Central Ohio Drupal User Group (CODUG) is proud to announce
Ohio’s first Drupalcamp. On Saturday, December 3rd, we’ll hold an
all-day camp with keynote speaker, breakout sessions and Birds of Feather groups at The
Ohio State University’s Nationwide and Ohio Farm Bureau 4-H Center.</p>
<div>
The Ohio State University, Columbus, Ohio, US
</div>
<div>
<time datetime="2011-12-03T09:00:00-05:00">December 3, 9:00am</time> –
<time datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
</div>
</div>
</body>
</html>
|
Lưu ý rằng bạn đã đánh dấu ngày tháng bằng một phần tử đặc biệt. Đây là phần tử time (thời gian) mới, là một phần của tiêu chuẩn cốt lõi của HTML5. Nó cho phép bạn thêm thời gian chính xác vào các trang sao cho các ứng dụng có thể dễ dàng phân tích cú pháp và sử dụng chúng. Trong ví dụ này, Google sử dụng các phần tử thời gian này để chọn ba sự kiện tiếp theo từ trang web đó để hiển thị trong Rich Snippets. Lưu ý rằng tại thời điểm xuất bản, có cuộc bàn luận về liệu có thay đổi phần tử thời gian đó với một phần tử dữ liệu chung chung hơn không. Nếu điều này xảy ra, "time" (thời gian) sẽ được thay thế bằng "data" (dữ liệu) và "datetime" sẽ được thay thế bằng "value " (giá trị) trong đoạn mã dưới đây.
Datetime được hình thành bắt đầu với ngày theo định dạng YYYY-MM-DD (4 số năm - 2 số tháng - 2 số ngày. Tiếp theo, một chữ "T" phân biệt ngày với thời gian, được đưa ra theo định dạng HH: MM: SS (2 số giờ: 2 số phút: 2 số giây). Sau đó là độ lệch thời gian so với Giờ phối hợp quốc tế (UTC). Ví dụ vào mùa đông ở nước Pháp là 1 giờ trước giờ UTC, vì thế độ lệch thời gian thêm '+01:00' vào cuối cùng của chuỗi datetime. Ohio là 5 giờ sau giờ UTC vào mùa đông, do đó, độ lệch thời gian thêm '-05:00' vào cuối cùng của chuỗi datetime. Giá trị thêm vào này đưa đến giá trị dễ đọc bằng máy "2011-12-03T09:00:00-05:00" cho Giờ chuẩn trung tâm là 9 giờ sáng ngày 03 tháng 12 năm 2011.
Lưu tệp này vào thư mục jquery-ui-map/demos trên máy chủ web của bạn và nạp nó vào trình duyệt của bạn. Hình 1 cho thấy các chi tiết cho cả hai sự kiện được mô tả trong Liệt kê 1.
Hình 1. Trang cơ bản liệt kê hai sự kiện
Làm cho các sự kiện trở thành Rich Snippet có sẵn
Trang có phần tử thời gian bao gồm một ít thông tin dễ hiểu bằng máy. Bây giờ hãy xem liệu việc thêm vào này có làm thay đổi cách Google hiển thị kết quả không. Chuyển tới Công cụ thử nghiệm Rich Snippets của Google và nhập URL cho trang của bạn (xem Hình 2). Bạn thấy các lỗi tạo chức năng xem trước là trang đó không có đánh dấu nguồn tác giả, đánh dấu đoạn thông tin phong phú, thông tin nguồn tác giả, thay cho các chi tiết sự kiện.
Hình 2. Không có kết quả nào cho HTML cơ bản trong công cụ thử nghiệm Rich Snippets
Mặc dù Google biết rằng trang web của bạn liệt kê các thời gian, nhưng nó không biết rằng các thời gian này là thời gian bắt đầu và kết thúc cho các sự kiện. Để giúp Google hiểu điều này, bạn cần thêm một vài thuật ngữ Schema.org (xem Liệt kê 2). Việc xuất bản đánh dấu Schema.org với microdata được trình bày chi tiết hơn trong một bài viết trước đây (xem Tài nguyên để có một liên kết).
Liệt kê 2. Làm cho <div> của mỗi sự kiện thành một mục Event (Sự kiện)
<!-- Event 1: DrupalCamp Toulouse --> <div itemscope itemtype="http://schema.org/Event"> ... </div> <!-- Event 2: DrupalCamp Ohio --> <div itemscope itemtype="http://schema.org/Event"> ... </div> |
Tiếp theo hãy thêm các đặc tính url và tên cho sự kiện này. Lưu ý rằng bạn
thêm một phần tử <span> xung quanh tên để có một chỗ để thêm thuộc
tính itemprop vào. Bạn cũng thêm đặc tính image
(hình ảnh). Bạn không cần hình ảnh cho Rich Snippet này, nhưng bạn sẽ sử
dụng đặc tính đó về sau này.
Liệt kê 3. Thêm các đặc tính url và tên cho sự kiện
<!-- Event 1: DrupalCamp Toulouse --> <div itemscope itemtype="http://schema.org/Event"> <h2><a href="http://example.com/drupalcamp_fr" itemprop="url"><span itemprop="name">DrupalCamp Toulouse 2011</span></a></h2> <img itemprop="image" src='images/drupalicon_fr.png' /> ... </div> <!-- Event 2: DrupalCamp Ohio --> <div itemscope itemtype="http://schema.org/Event"> <h2><a href="http://example.com/drupalcampohio" itemprop="url"><span itemprop="name">Drupalcamp Ohio 2011</span></a></h2> <img itemprop="image" src='images/drupalicon_oh.png' /> ... </div> |
Bây giờ bạn có thể thêm một thời gian bắt đầu và (theo tùy chọn) một thời gian kết thúc. Do bạn đã sử dụng phần tử thời gian, bạn đã có một giá trị dễ đọc bằng máy cho các thời gian bắt đầu và kết thúc. Bạn chỉ cần thêm các thuật ngữ Schema.org để cho Google biết đó là cái nào (xem Liệt kê 4).
Liệt kê 4. Thêm các đặc tính startdate và enddate trên các phần tử thời gian
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
...
<div>
<time itemprop="startDate" datetime="2011-11-26T09:00:00+01:00">November 26,
10:00am</time> –
<time itemprop="endDate" datetime="2011-11-27T17:00:00+01:00">November 27,
6:00pm</time>
</div>
</div>
<!-- Event 2: DrupalCamp Ohio -->
<div itemscope itemtype="http://schema.org/Event">
...
<div>
<time itemprop="startDate" datetime="2011-12-03T09:00:00-05:00">December 3,
9:00am</time> –
<time itemprop="endDate"
datetime="2011-12-03T17:00:00-05:00">5:00pm</time>
</div>
</div>
|
Thử nghiệm lại trang này bằng Công cụ kiểm tra. Do các URL trỏ đến một miền khác với URL cơ bản, bạn sẽ thấy các cảnh báo ngăn không cho Rich Snippet hiển thị (Hình 3).
Hình 3. Cảnh báo ngăn không cho hiển thị Rich Snippet
Google yêu cầu các liên kết đến các sự kiện trỏ tới các trang trong cùng một miền. Yêu cầu này được thiết kế để ngăn chặn các hoạt động gửi thư rác. Nếu bạn tìm kiếm và thay thế example.com bằng tên miền của bạn và thử nghiệm lại, bạn sẽ thấy hiển thị của Rich Snippet như trong Hình 4.
Hình 4. Rich Snippet hiển thị cả hai sự kiện với các ngày bắt đầu của chúng
Lưu ý rằng ngay cả khi công cụ thử nghiệm cho bạn thấy một Rich Snippet, bạn không được đảm bảo sẽ có các hiển thị Rich Snippet trong kết quả tìm kiếm thực tế. Bạn phải đặt yêu cầu cho Google để trang web của bạn được xem xét lại trước khi Google sẽ cho phép kết quả đầu ra Rich Snippet cho các trang của bạn trong các kết quả tìm kiếm. Để biết thêm thông tin về điều này, xem Các câu hỏi thường gặp (FAQ).
Thêm bản đồ giao diện người dùng jQuery
Vì DrupalCamps được tổ chức trên khắp thế giới, các khách truy cập của bạn sẽ cần một bản đồ hiển thị các sự kiện nào ở trong một khoảng cách di chuyển hợp lý. Để có được một bản đồ, chỉ cần thêm một vài mẩu thông tin.
Đầu tiên, thiết lập bản đồ để hiển thị. Thêm một <div> trong tài liệu để đặt bản đồ bên dưới tiêu đề trang và trên các liệt kê sự kiện (Liệt kê 5).
Liệt kê 5. Thêm bản đồ <div>.
<body id="doc">
<h1>Upcoming DrupalCamps</h1>
<div>
<div id="map_canvas"></div>
</div>
<!-- Event 1: DrupalCamp Toulouse -->
|
Bạn cần phải thêm một số tệp JavaScript để chuyển <div> này thành
một bản đồ tương tác. Ngoài ra thêm một số tệp CSS, cung cấp một chiều cao
cho #map_canvas <div> sao cho bạn có thể
nhìn thấy nó. Các tệp cục bộ được đưa vào trong mã nguồn (xem Tải về).
Liệt kê 6. Thêm CSS ngoài, các thư viện JavaScript và jQuery nội tuyến
<head> <title>Upcoming DrupalCamps</title> <!-- External Stylesheets --> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssbase/base-min.css" /> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssfonts/fonts-min.css" /> <link rel="stylesheet" type="text/css" href="css/main.css" /> <!-- Google Maps API and jQuery, served by Google --> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> <!-- jQuery UI Maps files for placing markers and for parsing Microdata --> <script type="text/javascript" src="../web/jquery.fn.gmap.js"></script> <script type="text/javascript" src="../ui/jquery.ui.map.services.js"></script> <script type="text/javascript" src="../ui/jquery.ui.map.microdata.js"></script> ... |
Sau đó, thêm một khối jQuery để lấy #map_canvas
khi trang web khởi tạo và chuyển nó thành một bản đồ (xem Liệt kê 7). Bạn sẽ thêm nhiều hơn nữa cho chức năng này sau.
Liệt kê 7. Khởi tạo bản đồ
...
<!-- Grab the #map_canvas div and turn it into a map -->
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
});
});
</script>
</head>
|
Khi bạn tải lại trang, bạn sẽ thấy bản đồ (trong Hình 5). Nó vẫn chưa có bất kỳ sự kiện nào được đánh dấu; bạn vẫn cần thêm một ít thông tin về các sự kiện đó để hiển thị.
Hình 5. Một bản đồ cơ bản chưa có bất kỳ điểm dấu nào
Thêm các địa điểm bằng microdata
Bạn cần phải thêm các địa điểm của các sự kiện bằng microdata trước khi bạn có thể thêm các điểm dấu vào bản đồ. Bây giờ, hãy xử lý từng địa chỉ như là một chuỗi duy nhất. Tuy nhiên, các địa chỉ có nhiều phần riêng biệt và bạn muốn thể hiện cấu trúc này bằng microdata để nhận được các giá trị đúng dễ dàng và nhất quán, ngay cả khi bạn thay đổi cấu trúc HTML sau này.
Đầu tiên, thêm đặc tính location (địa điểm), lấy một Place (vị trí) làm giá trị của nó (xem Liệt kê 8).
Liệt kê 8. Thêm đặc tính location cho sự kiện
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
...
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
ENSEEIHT, Toulouse, Haute-Garonne, FR
</div>
...
</div>
|
Giá trị place có thể có một tên và một địa chỉ bưu chính. Một địa chỉ bưu
chính là một mục có các đặc tính riêng của nó, như địa chỉ đường phố,
thành phố (addressLocality), bang
(addressRegion) và
addressCountry, là mã quốc gia alpha-2 ISO
3166-1 hai chữ cái. Liệt kê 9 ngắt các đặc tính này
ra bằng cách sử dụng các thẻ span.
Liệt kê 9. Sử dụng các thẻ span
<!-- Event 1: DrupalCamp Toulouse -->
<div itemscope itemtype="http://schema.org/Event">
...
<div itemprop="location" itemscope itemtype="http://schema.org/Place">
<span itemprop="name">ENSEEIHT</span><br />
<span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">Rue Sylvain Dauriac</span><br />
<span itemprop="addressLocality">Toulouse</span>,
<span itemprop="addressRegion">Haute-Garonne</span>,
<span itemprop="addressCountry">FR</span>
</span>
</div>
...
</div>
|
Bạn có thể định dạng địa chỉ cho các sự kiện khác theo cách tương tự.
Bạn đã sẵn sàng để thêm các điểm dấu vào bản đồ. Đầu tiên, phân tích cú
pháp microdata trên trang đó thành một đối tượng mà bạn có thể sử dụng. Để
làm điều này, hãy chỉ rõ kiểu mục mức cao nhất nào là nguồn dữ liệu mà bạn
cần. Các mục mức cao nhất trong microdata có thể được coi là các mục gốc;
chúng là các mục không phải là một đặc tính của bất kỳ mục khác nào nhưng
có các đặc tính riêng của mình. Chỉ rõ
http://schema.org/Event. Địa chỉ này trả về một
đối tượng cho mỗi sự kiện (xem Liệt kê 10).
Liệt kê 10. Phân tích cú pháp microdata thành một đối tượng
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
window.console.log(result);
});
});
});
</script>
|
Bạn có thể thấy đối tượng này được tạo ra từ microdata trong giao diện điều khiển JavaScript trong các trình duyệt như Firefox và Chrome. Mỗi mục trong microdata được chuyển dịch thành một đối tượng với đối tượng các đặc tính riêng của nó có chứa bất kỳ các giá trị itemprop nào từ mục đó. Vì các đặc tính trong microdata có thể có nhiều giá trị, nên các giá trị itemprop được xử lý như các mảng (xem Hình 6).
Hình 6. Kiểm tra đối tượng trong giao diện điều khiển JavaScript của Chrome
Đối tượng này có tất cả các đặc tính mà bạn cần để nhận được các tọa độ địa lý của địa điểm này, nơi bạn cần đặt các điểm dấu cho sự kiện. Để có được thông tin này, hãy trích xuất các phần của địa chỉ đối tượng đó và kết hợp chúng thành một chuỗi địa chỉ mà Google sẽ hiểu. Sau đó, bạn có thể sử dụng Geocoder (trình mã hóa địa lý) của Google để lấy các tọa độ cho địa chỉ này. Thư viện bản đồ giao diện người dùng jQuery cung cấp một chức năng trình bao mà bạn có thể sử dụng nó để chạy yêu cầu của Geocoder.
Lưu ý rằng nếu bạn nhận được một lỗi không xác định, hãy kiểm tra hai lần để chắc chắn rằng bạn có tất cả các đặc tính cần thiết trên tất cả các sự kiện được liệt kê (xem Liệt kê 11).
Liệt kê 11. Chạy yêu cầu của Geocoder cho địa chỉ này
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the Microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
// Traverse from the Event to the Place and from the Place to the
// Address to get the properties.
var placeName = result.properties.location[0].properties.name[0];
var streetAddress =
result.properties.location[0].properties.address[0].properties.streetAddress[0];
var city =
result.properties.location[0].properties.address[0].properties.addressLocality[0];
var state =
result.properties.location[0].properties.address[0].properties.addressRegion[0];
var country =
result.properties.location[0].properties.address[0].properties.addressCountry[0];
// Join the address parts into a comma-separated string.
var address = [placeName, city, state, country].join(', ')
// Run the Geocoder request for the address.
map.gmap('search', {'address': address } , function(result, status) {
window.console.log(result);
// We will place the marker here.
});
});
});
});
</script>
|
Nếu bạn xem xét kết quả trong giao diện điều khiển, bạn sẽ thấy rằng dịch vụ đã trả về một hoặc nhiều địa điểm phù hợp với địa chỉ của bạn. Bạn sẽ chỉ sử dụng một địa chỉ đầu tiên vì đây là địa chỉ phù hợp tốt nhất. Đối tượng này có một đặc tính geometry (hình học) có chứa các thông tin về tọa độ địa lý mà bạn cần (xem Liệt kê 12).
Liệt kê 12. Đặt điểm dấu
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the Microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
// Traverse from the Event to the Place and from the Place to the
// Address to get the properties.
var placeName = result.properties.location[0].properties.name[0];
var streetAddress =
result.properties.location[0].properties.address[0].properties.streetAddress[0];
var city =
result.properties.location[0].properties.address[0].properties.addressLocality[0];
var state =
result.properties.location[0].properties.address[0].properties.addressRegion[0];
var country =
result.properties.location[0].properties.address[0].properties.addressCountry[0];
// Join the address parts into a comma-separated string.
var address = [placeName, city, state, country].join(', ')
// Run the Geocoder request for the address.
map.gmap('search', {'address': address } , function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Create a LatLng object.
var lat = result[0].geometry.location.lat();
var lng = result[0].geometry.location.lng();
var latlng = new google.maps.LatLng(lat, lng);
// Place the marker.
var markerOptions = {
'bounds':true,
'position': latlng
};
map.gmap('addMarker', markerOptions);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
});
});
});
</script>
|
Khi bạn tải lại trang, bạn sẽ thấy các điểm dấu như trong Hình 7.
Hình 7. Các điểm dấu được đặt trên bản đồ
Bản đồ có ích hơn nếu người dùng có thể nhấn vào điểm dấu để lấy được các thông tin chi tiết sự kiện, như ngày và một liên kết đến sự kiện này. Không khó thêm vào chức năng này.
Đầu tiên, hãy trích xuất thông tin bổ sung mà bạn muốn về sự kiện đó từ microdata đã phân tích cú pháp (xem Liệt kê 13).
Liệt kê 13. Lấy thông tin bổ sung
<script type="text/javascript">
$(function() {
map = $('#map_canvas');
map.gmap().bind('init', function () {
// Process the Microdata for each Event into an object.
map.gmap('microdata', 'http://schema.org/Event', function(result, item, index) {
var eventName = result.properties.name[0];
var logo = result.properties.image[0];
var url = result.properties.url[0];
var start = result.properties.startDate[0];
...
});
});
</script>
|
Trước khi bạn thêm điểm dấu vào bản đồ, hãy tạo một khối HTML với các thông tin chi tiết sự kiện (xem Liệt kê 14).
Liệt kê 14. Tạo HTML cho cửa sổ thông tin
// Run the Geocoder request for the address.
map.gmap('search', {'address': address } , function(result, status) {
if (status == google.maps.GeocoderStatus.OK) {
// Create a LatLng object.
var lat = result[0].geometry.location.lat();
var lng = result[0].geometry.location.lng();
var latlng = new google.maps.LatLng(lat, lng);
var eventDetails = '';
eventDetails += '<div class="iw">';
eventDetails += '<img src="'+logo+'"></img>';
eventDetails += '<h2><a href="'+url+'">'+eventName+'</a></h2>';
eventDetails += new Date(start).toDateString();
eventDetails += '</div>';
// Place the marker.
...
|
Sau đó, thêm các thông tin chi tiết sự kiện cho điểm dấu bạn đang tạo ra.
Sử dụng .click của jQuery để nói bạn muốn chạy
chức năng nào khi ai đó nhấn vào điểm dấu đó. Trong chức năng này, hãy sử
dụng chức năng của trình trợ giúp
openInfoWindow do thư viện UI Maps của jQuery
cung cấp để xây dựng cửa sổ và chỉ cần chuyển HTML của bạn làm nội dung
cho cửa sổ đó (xem Liệt kê 15).
Liệt kê 15. Thêm Info Window (Cửa sổ Thông tin) như là một sự kiện nhấn chuột
// Place the marker.
...
map.gmap('addMarker', markerOptions).click( function() {
map.gmap('openInfoWindow', { 'content': eventDetails }, this );
});
|
Hãy nạp lại sau khi nhiệm vụ này được thực hiện rồi nhấn vào điểm dấu. Bạn sẽ thấy cửa sổ hiện lên với các thông tin chi tiết sự kiện (xem Hình 8).
Hình 8. Nhấn vào sự kiện trên điểm dấu
Để cải thiện dáng vẻ bề ngoài, hãy thêm một vài quy tắc CSS. Tôi đã thêm các quy tắc này vào mã ví dụ (xem Tải về). Cuối cùng, bản đồ của bạn tương tự như Hình 9.
Hình 9. Bản đồ cuối cùng
Microdata giúp việc sử dụng dữ liệu trên trang của bạn theo các cách động dễ dàng hơn, như trên bản đồ của Google, khi sử dụng các trình cắm thêm của jQuery. Đặc tả microdata nói về các kịch bản lệnh chung mà bạn có thể sử dụng làm các trình cắm thêm trên các trang web không liên quan, khác nhau. Microdata cũng giúp kết hợp dữ liệu từ nhiều trang web khác nhau để tạo ra các ứng dụng mới dễ dàng hơn. Trong phần tiếp theo của loạt bài này, tôi sẽ giải thích cách bạn có thể sử dụng Drupal để tạo ra một ứng dụng như vậy.
| Mô tả | Tên | Kích thước | Phương thức tải |
|---|---|---|---|
| Article source code | jquerymicrodatapt1_source.zip | 464KB | HTTP |
Học tập
- ISO 3166-1
(Wikipedia): Tìm hai chữ cái mã quốc gia alpha-2.
- Schema.org: Tìm hiểu thêm về bộ sưu tập này về các lược đồ là các thẻ
HTML mà những người chủ web có thể sử dụng để đánh dấu các trang của họ
theo các cách được ghi nhận bởi các nhà cung cấp dịch vụ tìm kiếm chủ
yếu.
- Bắt
đầu với schema.org: Trong các hướng dẫn này, hãy tìm hiểu cách đặt
các thuật ngữ schema.org trên trang schema.org.
- Itemtype
URL: Tìm các đặc tính mà bạn có thể sử dụng trên một mục
schema.org bằng cách truy cập vào itemtype URL (ví dụ,
http://schema.org/Movie).
- Web ngữ nghĩa, Dữ liệu liên kết và Drupal, Phần 1: Trưng ra dữ liệu
của bạn bằng cách sử dụng RDF (Lin Clark, developerWorks,
04.2011): Làm cho dữ liệu web của bạn tương thích hơn và chia sẻ dữ liệu
của bạn hiệu quả hơn. Một ví dụ cho thấy cách sử dụng Drupal 7 để xuất bản
Dữ liệu liên kết bằng cách trưng ra nội dung với RDF.
- Web ngữ nghĩa, Dữ liệu liên kết và Drupal Phần 2: Kết hợp các bộ dữ
liệu liên kết với Drupal 7 và SPARQL Views (Stéphane
Corlosquet và Lin Clark, developerWorks, 05.2011): Tìm hiểu cách sử dụng
Dữ liệu liên kết hiện hành có sẵn hiện nay trên trang web dữ liệu và cách
làm phong phú thêm một trang web Drupal 7 với dữ liệu đến từ thiết bị đầu
cuối khác nhau.
- Bài
viết Scientific American trên web ngữ nghĩa: Đọc bài viết chuyên
đề này của Tim Berners-Lee, James Hendler và Ora Lassila.
- Dữ liệu liên kết: Đọc bài phỏng vấn ReadWriteWeb về dữ liệu liên
kết với Tim Berners-Lee.
- Các vấn đề Thiết
kế Dữ liệu liên kết: Tìm hiểu thêm về dữ liệu liên kết từ Tim
Berners-Lee.
- Rich snippets (microdata, các microformat và RDFa) – Sự trợ giúp của
Các công cụ Webmaster: Tìm hiểu thêm về Rich snippets (các đoạn
thông tin phong phú) của Google và cách gắn nhãn cho nội dung trang web
của bạn để chỉ rõ kiểu dữ liệu, như một tên nhà hàng, một địa chỉ, hoặc
một đánh giá.
- Thực hiện các tiêu chuẩn web ngữ nghĩa trong trang Web của bạn
(Rob Crowther, developerWorks, 05.2008): Tạo một trang mạng xã hội đơn
giản bằng cách sử dụng PHP và MySQL để thực hiện các tiêu chuẩn web ngữ
nghĩa như hCard và Friend of a Friend (FOAF) như là một phần của một lược
đồ URI (Trình định danh tài nguyên thông nhất) ngữ nghĩa.
- Đặc
tả bảng từ vựng FOAF 0.98: Khám phá ngôn ngữ FOAF, được định nghĩa
như là một từ điển về các đặc tính và các lớp đặt tên bằng cách sử dụng
công nghệ RDF của W3C.
- Sáng kiến siêu dữ
liệu Dublin Core (DCMI): Tìm hiểu về tổ chức mở này đã tham gia
vào sự phát triển các tiêu chuẩn siêu dữ liệu tương thích có hỗ trợ một
loạt các mục đích và các mô hình kinh doanh.
- Đặc
tả mô hình dữ liệu lõi của SIOC (Semantically-Interlinked Online
Communities): Tìm hiểu các khái niệm và các đặc tính chính cần
thiết để mô tả thông tin từ các cộng đồng trực tuyến (như các bảng thông
báo, các wiki hoặc các nhật ký web) trên web ngữ nghĩa.
- SPARQL Explorer cho http://dbpedia.org/sparql: Hãy dùng thử một
giao diện truy vấn trình diễn có sẵn trên web.
- Vùng phát triển Web của
developerWorks: Tìm các bài viết trình bày các giải pháp dựa trên
web khác nhau.
-
Bạn mới đến với XML
phải không? Lấy tài nguyên bạn cần để tìm hiểu XML.
- Vùng XML trên
developerWorks: Tìm tài nguyên bạn cần để nâng cao các kỹ năng của
bạn trong trường XML, bao gồm các DTD, các lược đồ và XSLT. Xem thư
viện kỹ thuật XML để biết một loạt các bài báo kỹ thuật và các lời
khuyên, các bài hướng dẫn, các tiêu chuẩn và các sách Đỏ của
IBM.
- Chứng chỉ
XML của IBM: Tìm hiểu cách bạn có thể trở thành một nhà phát triển
có chứng chỉ IBM trong công nghệ XML và các công nghệ liên
quan.
- Các sự kiện kỹ
thuật và webcasts của developerWorks: Theo sát với công nghệ trong
các phiên này.
- developerWorks trên
Twitter: Tham gia hôm nay để theo dõi các mẫu tin tweet trên
developerWorks.
- Podcasts của developerWorks: Nghe các cuộc phỏng vấn và các cuộc
thảo luận thú vị dành cho các nhà phát triển phần mềm.
- Các trình diễn theo
yêu cầu của developerWorks: Xem các trình diễn trải rộng từ cài
đặt và thiết lập sản phẩm cho những người mới bắt đầu đến chức năng tiên
tiến cho các nhà phát triển có kinh nghiệm.
Lấy sản phẩm và công nghệ
- jQuery UI
Map: Tải về phiên bản mới nhất và sử dụng các sự kiện nhấp chuột
jQuery trên một bản đồ và các điểm dấu để điền một bản đồ các microformat,
RDFa hoặc microdata trên trang web của bạn.
- Công cụ thử
nghiệm Rich Snippets của Google: Thử nghiệm Rich
Snippets.
-
Công cụ thử
nghiệm Rich Snippets của Google: Thử nghiệm đánh dấu của
schema.org của bạn.
- Công cụ thử nghiệm
Microdata trực tiếp: Lấy một công cụ khác, do nhà phát triển Opera
Philip Jägenstedt tạo ra, để thử nghiệm microdata.
- Các phiên bản đánh
giá sản phẩm của IBM: Tải về hoặc khám
phá các bản dùng thử trực tuyến trong Sandbox SOA của IBM và lấy
các công cụ phát triển ứng dụng thực hành của bạn và các phần mềm trung
gian từ DB2®, Lotus®, Rational®, Tivoli® và
WebSphere®.
Thảo luận
- Hồ sơ developerWorks: Tạo hồ sơ của bạn hôm nay và thiết lập một danh sách theo dõi.
- Các
diễn đàn thảo luận vùng XML: Tham gia vào bất kỳ trong một số cuộc
thảo luận liên quan đến XML.
- Cộng đồng
developerWorks: Kết nối với những người dùng developerWorks khác
trong khi khám phá các blog, các diễn đàn, các nhóm và các wiki hướng nhà
phát triển.
Lin Clark là một nhà phát triển Drupal chuyên về Dữ liệu liên kết. Cô là người bảo trì nhiều mô-đun Drupal, như Microdata và SPARQL Views và là một người tham gia tích cực trong Lực lượng đặc nhiệm dữ liệu HTML của W3C và sáng kiến HTML5 của Drupal. Cô đã học tại trường Đại học Carnegie Mellon và sắp làm xong bằng thạc sĩ nghiên cứu tại Viện Nghiên cứu doanh nghiệp số tại NUI Galway. Nhiều thông tin có sẵn tại địa chỉ lin-clark.com.
