Вы хотите продвинуть свой бизнес в сети Facebook, но у вас небольшой бюджет?

Стоит присмотреться к шагам, которые делают крупные корпорации, и не бояться действовать. Наталья Пискунова подготовила специально для вас, дорогие читатели, небольшую заметку.

• Во-первых, это вольный перевод с английского с доработками (советы от основателя сервиса ShortStack).
• Во-вторых, применять это стоит (с некоторыми оговорками) не только к Фейсбуку.

А теперь давайте закрепим те знания, которые вы приобрели к настоящему моменту, встроив хранилище в веб-приложение. По мере увеличения сложности приложений обработка как можно большего количества данных без взаимодействия с сервером становится все более актуальной. Локальное хранение данных на стороне клиента обеспечивает снижение сетевого трафика и улучшение интерактивных характеристик приложения, поскольку в этом случае данные не поступают от удаленного источника по сети, а извлекаются из локального хранилища на компьютере.

Первой и самой очевидной причиной использования кеша приложений является необходимость поддержки автономного режима. Потребность в автономных приложениях существует даже в наши дни, когда практически у каждого пользователя имеется возможность подключиться к сети. Но что делать в случае, если подключение к сети отсутствует? Прежде чем спешить заявлять, будто времена, когда постоянная связь с Интернетом была редкостью, давно канули в Лету, задумайтесь над следующим.

• Часто ли вам в авиаперелетах удавалось подключиться к бортовой сети Wi-Fi самолета?
• Идеально ли покрытие сети, к которой подключено ваше мобильное интернет-устройство (давно ли вы видели нулевую отметку сигнала)?
• Можете ли вы всегда рассчитывать на то, что во время презентации важного материала вам удастся беспрепятственно подключиться к Интернету?

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

Действуя в несвойственной ей манере, компания Microsoft уже опубликовала несколько предварительных обзоров, посвященных следующей модели своего браузера. Internet Explorer 9 (IE9) будет поддерживать некоторые важные возможности HTML5 и улучшения, направленные на ускорение работы приложений, поэтому если вы будуте искать где купить компьютер для фирмы , сразу узнавайте какая версия браузера будет установлена. Когда IE9 появится на рынке, базовые средства современных браузеров будут охватывать значительную часть предусмотренных в HTML5 возможностей, касающихся работы с мультимедиа, хранения данных и обмена сообщениями.

Сегодня многие разработчики по-прежнему стараются придерживаться принципа обратной совместимости, стремясь к тому, чтобы их приложения могли работать даже с устаревшими моделями браузеров. Internet Explorer 6 оказался самым "стойким" из всех старых браузеров, которые широко используются по состоянию на 2010 год.

Но даже для IE6 срок жизни ограничен, поскольку теперь все труднее подобрать операционную систему, которая бы его поддерживала. Пройдет время, и число компьютеров, на которых для работы с Интернетом используется IE6, сведется почти к нулю. Все больше и больше пользователей Internet Explorer обновляют браузер, устанавливая самые последние версии, что ведет к развитию Интернета. Устаревшие браузеры, заслуживающие нареканий, будут существовать всегда, но уровень требований постоянно повышается: на момент написания книги рыночная доля Internet Explorer 6 составляла 20% и продолжала падать. Большинство пользователей, обновляющих свои браузеры, сразу заменяют их современными версиями.

Программный интерфейс HTML5 Web Storage — один из простейших в HTML5. Нами уже рассмотрены как явный, так и неявный способы сохранения и извлечения данных в случае сеансового и локального хранилищ. Завершим наш обзор обсуждением полного набора доступных атрибутов и функций.

Объекты sessionStorage и localStorage можно получать с помощью объекта window документа, в котором они используются. Они обладают одинаковой функциональностью, если не считать различий в их именах и сроках существования. Оба они реализуют интерфейс Storage, представленный в листинге.

Интерфейс Storage

interface Storage 
{
readonly attribute unsigned long length; 
getter DOMString key(in unsigned long index); 
getter any getltem(in  DOMString key, in any data); 
deleter void  removeltem(in DOMString key);
void clear();
}

Как долго существуют сохраненные значения? В случае сеансового хранилища они будут существовать, пока не закроется окно (или вкладка). Как только пользователь закроет окно (или браузер), значения, сохраненные в объекте sessionStorage, пропадают. Такой способ сохранения значений чем-то напоминает стикеры для памятных записок. Значения, помещенные в сеансовое хранилище, долго не существуют, и поэтому в нем не следует сохранять критически важную информацию, ведь в нужный момент ее может не оказаться под рукой.

Перейдем к рассмотрению возможности сохранения сеансовых данных и посмотрим, как сохраняются и извлекаются простые значения на странице. Сохранение значения легко выполнить с помощью единственного оператора. Ниже приведен соответствующий пример, в котором используется длинная нотация,

window.sessionStorage.setItem('myFirstKey',  myFirstValue');

Относительно этой строки можно сделать три важных замечания.

1. Объект, реализующий интерфейс Web Storage, присоединяется к окну, и поэтому объект window. sessionStorage содержит все функции, которые вам требуется вызывать.
2. Вызываемой функцией является функция getItem (), принимающая строку ключа и строку значения в качестве аргументов . Несмотря на то что формат данных Web Storage поддерживает передачу значений, не являющихся строковыми, в текущих версиях браузеров набор поддерживаемых типов значений ограничен.

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

Листинг. Реализация фильтра кубического размытия в файле blur.js

function inRange(i, width, height) {
    return ((i>=0) && (i < width*height*4));
}

function averageNeighbors(imageData, width, height, i) {
    var v = imageData[i];

    // cardinal directions
    var north = inRange(i-width*4, width, height) ? imageData[i-width*4] : v;
    var south = inRange(i+width*4, width, height) ? imageData[i+width*4] : v;
    var west = inRange(i-4, width, height) ? imageData[i-4] : v;
    var east = inRange(i+4, width, height) ? imageData[i+4] : v;

    // diagonal neighbors
    var ne = inRange(i-width*4+4, width, height) ? imageData[i-width*4+4] : v;
    var nw = inRange(i-width*4-4, width, height) ? imageData[i-width*4-4] : v;
    var se = inRange(i+width*4+4, width, height) ? imageData[i+width*4+4] : v;
    var sw = inRange(i+width*4-4, width, height) ? imageData[i+width*4-4] : v;

    // average
    var newVal = Math.floor((north + south + east + west + se + sw + ne + nw + v)/9);

    if (isNaN(newVal)) {
        sendStatus("bad value " + i + " for height " + height);
        throw new Error("NaN");
    }
    return newVal;
}

function boxBlur(imageData, width, height) {
    var data = [];
    var val = 0;
    for (var i=0; i < width *height*4; i++) {
        val = averageNeighbors(imageData, width, height, i);
        data[i] = val;
    }

    return data;
}

До сих пор наше внимание было сосредоточено на использовании различных функций Web Worker API. Попробуем теперь оценить истинные возможности потоков выполнения Web Workers, создав полноценное приложение: веб-страницу, использующую фильтр размытия изображений, выполнение которой распараллелено между несколькими потоками. Работу этого приложения иллюстрирует рисунок.

Чтобы направлять сообщения из страницы в поток Web Workers, должен вызываться метод postMessage(), который осуществляет передачу необходимых данных. Для получения сообщений и кодов ошибок, отправляемых из потока в страницу, следует установить обработчик событий.

Чтобы организовать обмен сообщениями между основной страницей и потоком, прежде всего следует добавить вызов метода postMessage() на основную страницу, как показано ниже.

document.getElementByid("helloButton").onclick = function()
{
	worker.postMessage("Вот еще одно сообщение для вас");
}

В этом примере сообщение направляется потоку при выполнении щелчка на кнопке Отправить сообщение (Post a Message). Далее следует добавить на страницу обработчик, перехватывающий сообщения, направляемые потоком,