• Портфолио
  • Услуги
  • Контакты
  • Блог
  • Вакансии

    • Записи по тегу 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