Web 2.0 HotMonitor Blog

Етикети:google maps web 2.0 микроформати презентация семантичен уеб

Въведение:
Как да публикуваме бизнес информация посредством микроформати и jQuery върху GoogleMaps и да създадем web 2.0 приложение с вграден семантичен HTML? Отговор на този въпрос дава тази публикация. Това е една практична презентация за реалните ползи от интеграцията на микроформати и възможностите за тяхното използуване в бизнеса и Enterprise Web 2.0.

Микроформати
Подробна информация за използуването на микроформати може да намерите на следния адрес. В случая ще използуваме hCard микроформат за публикуване на бизнес информация върху Google Maps.
Ето и кода за публикуване на hCard който се прочита (парсва) чрез jQuery JavaScript който върши чудесна работа за извличане на специфичните тагове на микроформати от HTML. На практика това дава нов живот на статичния HTML и го прави по разбираем за компютъра. Това е началото на Семантичния HTML който в крайна сметка ще доведе и до появата на Семантичния уеб (OWL, RDF, SPARQL)

<li class="vcard">

        <h3><a class="fn org url" href="http://www.hotmonitor.org/">HotMonitor Sofia</a></h3>
        <div class="adr">
            <p class="street-address">Narodno Sabranie 3</p>
            <p><span class="locality">Sofia</span>,
            <abbr class="country-name" title="Bulgaria">BG</abbr></p>
            <p class="postal-code">1433</p>
        </div>

        <p>Telephone: <span class="tel">+359 (02)998 8999</span></p>
        <p>E-mail: <a href="mailto:hotmonitor@gmail.com" class="email">hotmonitor@gmail.com</a></p>
        <p class="geo">Lat/Lon:
            <span class="latitude">42.710543</span>,
            <span class="longitude"> 23.323827</span>
        </p>

    </li>

Демо:
Активирайте червените маркери във widget за да видите, че демо примера работи дори и във Wordpress. Елегантно съчетание на GoogleMaps, микроформати, widget, блог, jQuery за създаване на web 2.o приложение. Дори са публикувани Picasa GeoRSS изображения (сините маркери). Ако сте с FireFox браузер 2.0 up може да си свалите адреса директно. Още една директна полза от употребата на микроформати. В следващи публикации ще покажем как може да използуваме семантичния уеб (semantic web) за създаване на елегентни enterprise web 2.0 приложения.

Екосистема
Microformats - jQuery - GoogleMaps- HTML -Widget - Wordpress

Етикети:google maps jQuery web 2.0 микроформати семантичен уеб

Въведение

Инсталиране
Свалете jQuery от уеб адрес. Вземете Google API key за вашия домeйн. Кординатите ан картата може да вземете от Getlatlon.com. Поставете HTML код във web 2.0 приложението където искате да се вузуализра географската карта.

Code

(function($){
  $('#map').jmap('init', {mapCenter:[55.958858,-3.162302]}, function(el, options){
    $(’.submit’).click(function(){
      $(el).jmap(”searchDirections”, {fromAddress: $(’#from’).val(), toAddress: $(’#to’).val(), directionsPanel:”directions”});
    });
  });
})(jQuery);

Приложение
За ефективно измерване разстояние между географски точки във web 2.0 приложение или мобилен телeфон;
За създаване на атрактивни web 2.0 приложения;
Предимства
Лесна инсталация и малък код 6 kb за създаване на web 2.0 географска карта;
Ефектна jQuery библиотека с отворен код и интеграция на микроформати;
Интеграция на динамични обекти в Google Maps (маркери, полигони, линии);
web 2.0 : Google Maps
API key: Google API Maps
Координати: Getlatlon.com
jQuery: Документация
RSS : GeoRSS

Етикети:google maps GSM jQuery web 2.0 микроформати