Записи по тегу html5

Анастасия

Web-приложения offline

HTML5 позволяет сайтам работать в оффлайне.
Поддержка offlina в браузерах - все, кроме Oper'ы: Chrome, Firefox, Safari, iPhone, Android.

Offline-web-приложения настраиваются в файле cache.manifest. Этот файл должен быть указан на каждой странице web-приложения:

 <!DOCTYPE HTML>
<html manifest="/cache.manifest">

В .htaccess надо добавить content-type:

AddType text/cache-manifest .manifest

Пример кэш-манифеста:

CACHE MANIFEST
NETWORK:
/counter.pl
CACHE:
/style.css
/app.js
/app.jpg

Манифест всегда начинается со строки CACHE MANIFEST. В разделе NETWORK перечисляются ресурсы, которые никогда не надо кэшировать, например, счетчик посещаемости. В разделе CACHE - ресурсы, которые надо кэшировать.

Еще может быть секция FALLBACK. В ней перечисляются замены для ресурсов, которые не могут быть доступны в offlin'e. Например, можно сделать страницу offline.html с контактами организации, которая показывается вместо страниц сайта, когда сайт недоступен.

CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
*

При разработке offline приложений необходимо учитывать некоторые особенности. Страницы, сохраненные в кэше не обновляются до тех пор, пока не будет изменен файл cache.manifest. Поэтому, если один из файлов, перечисленных в манифесте изменился, необходимо изменить файл манифеста. Можно написать что-нибудь в комментарии (# вот так обозначается комментарий).

В качестве примера можно посмотреть как устроен gmail :)

Теги: html5
Анастасия

Хранение данных web-приложения у пользователя

В html5 появилась возможность, называемая html5 storage, хранить в браузере данные вэб-приложений ввиде пар ключ-значение. В отличии от cookie они не передаются с каждым запросом и размер их ограничивается 5мб. Данные хранятся ввиде строк, что необходимо учитывать при работе с числами.
Поддержка в браузерах: IE 8, Chrome 4, Opera 10.5, iPhone 2, Android 2, Safari 4.
Как с этим работать:

if (Modernizr.localstorage) {
   // storage работает в этом браузере
   // восстановить значение
   var savedValue = localStorage["key"];
   // сохранить значение
   localStorage["key"] = newValue;
   // удалить
   localStorage.removeItem("key");
} else {
   // старый браузер, придется использовать dojox.storage 
}

При сохранении, удалении или изменении значений в localStorage вызывается событие storage.

Теги: html5,javascript
Анастасия

HTML5 geolocation

В html5 появилась возможность запросить у пользователя его местоположение. Сайт может получить доступ к этой информации только, если пользователь разрешит браузеру передать свое местоположение.
Если требуется узнать, где примерно находится пользователь, например из какого он города для статистики посещаемости, то лучше пользоваться базами ip-адресов, например http://www.maxmind.com/download/geoip/database/GeoLiteCity.dat.gz.
В общем в html5 появилась Geolocation API, которую IE не поддерживает, поэтому приходится пользоваться GoogleGears. Но еще лучше использовать библиотеку http://code.google.com/p/geo-location-javascript/, которая объединает в одном интерфейсе Geolocation API, Gears API, и разные платформенные api конкретных моделей мобильных устройств.
Пример кода. В head надо подключить скрипты, которые скачиваются тут: gears_init.js, geo.js.

  <script src="gears_init.js"></script>
  <script src="geo.js"></script>
  //если как-нибудь можно определить местоположение
  if (geo_position_js.init()) { 
    //спросить разрешение у пользователя
    geo_position_js.getCurrentPosition(geo_success, geo_error);
  }

  //определили
  function geo_success(loc) {
    alert("Широта " + loc.coords.latitude +", долгота " + loc.coords.longitude);

    //показать на карте Google Map
    $("#geo-wrapper").css({'width':'320px','height':'350px'});
    var map = new GMap2(document.getElementById("geo-wrapper"));
    var center = new GLatLng(loc.coords.latitude, loc.coords.longitude);
    map.setCenter(center, 14);
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.addOverlay(new GMarker(center, {draggable: false, title: "Вы где-то рядом"}));

  }
//не определили function geo_error() { alert("не знаю, где вы!"); }
Теги: html5
Анастасия

Конспект по формам в html5

1. placeholder - текст, поясняющий значение поля. Показывается, если поле пустое и без фокуса:

  <input name="searchtext" placeholder="поиск по сайту">

2. autofocus - после загрузки страницы фокус будет на этом поле:

  <input name="searchtext" autofocus placeholder="поиск по сайту">

3.

  <input type="email">

4.

  <input type="url">

5. Целое число

  <input type="number"
min="0"
max="10"
step="2"
value="6">

Javascript:

var n=1;
input.stepUp(n);
input.stepDown(n);
n=input.valueAsNumber;

6. Дата (пока только в Opera 9)

<input type="date">

Кроме date может быть: type="month", type="week", type="time", type="datetime", type="datetime-local".

7. Поиск:

<input type="search">

8. Цвет (пока не поддерживается)

<input type="color">
Теги: html5
Анастасия

Microdata в HTML5

Microdata позволяют описать информацию в удобном для поисковой системе виде. Например, можно описать, что на странице размещена информация о компании, продукции, человеке или это обзор какого-то продукта и т.д. В результатах поиска эта страница может быть оформлена специальным образом, в зависимости от текста запроса. Например, если человек ищет "отзывы о creocms", то ссылка на отзыв будет содержать оценку, основной вывод, имя автора отзыва. Пока это работает только для Google. Но, думаю, остальные скоро присоединятся.
И так, немного кода с примерами использования.

Передача информации об организации.
 
Информация, которую можно передавать об организации описана в словаре http://www.data-vocabulary.org/Organization/, поэтому тег, содержащий все контакты и описания, должен иметь два параметра:
itemscope - обозначает, что данный тег является контейнером для данных из словаря, определенного в атрибуте itemtype,
itemtype - адрес словаря:

  <article itemscope itemtype="http://data-vocabulary.org/Organization">
  <h1 itemprop="name">Студия "Креограф"</h1> 
    <a  title="Посмотреть на карте" href="http://maps.google.com/maps?..."> 
            посмотреть на карте
    </a>
    <p itemprop="address" itemscope 
       itemtype="http://data-vocabulary.org/Address"> 
      <span itemprop="street-address">пр.Победы 105</span><br> 
      <span itemprop="locality">Челябинск</span>,
      <span itemprop="region">УрФО</span> 
      <span itemprop="postal-code">454014</span> 
      <span itemprop="country-name">Россия</span> 
    </p> 
    <p itemprop="tel">+7 906 891-7-591</p> 
    <p><a itemprop="url" href="http://creograf.ru/">creograf.ru</a></p> 
    <span itemprop="geo" itemscope itemtype="http://data-vocabulary.org/Geo"> 
      <meta itemprop="latitude" content="широта" />
      <meta itemprop="longitude" content="долгота" /> 
    </span> 
 </article> 

Аналогично, незаметным для пользователя способом, передается информация о продуктах, семинарах, презентациях, выставках и так далее. Должно быть полезно для продвижения сайта.

Что еще почитать:
1. http://www.google.com/support/webmasters/bin/answer.py?answer=99170.
2. Описания форматов http://www.data-vocabulary.org.

 

Теги: html5
© 2002-2016 Креограф. Все права защищены законом РФ
 Русский /  English