Элиот Стокс - Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки

Интерфейс localStorage– чрезвычайно полезная штука. Допустим, вы создаете Twitter-клиент и хотите, чтобы он мог делать следующее:

• Использоваться в вашем интернет-браузере для настольных компьютеров и на мобильном устройстве.

• Отображать в режиме онлайн сообщения с вашего последнего сеанса.

• В режиме офлайн ставить сообщения в очередь и отправлять их позже.

Рисунок 3.6. Инспектор хранилища в браузере Safari

С localStorageвсе это возможно. Пример ниже наглядно демонстрирует это. (Он чисто гипотетический, поэтому не обращайте внимание на мелочи.)

postTweet = function(tweetText) {

// Проверяем, в онлайне ли мы

if(navigator.onLine) {

// Привет, мы – онлайн! Отправь это сообщение, крошка!

} else {

// Хм, мы сейчас не в Сети. Лучше сохраните это для другого случая.

localStorage.setItem(“queue-” + +new Date(), tweetText)}

}

Несложно, правда? Чтобы увидеть все эти элементы в localStorage, мы должны повторить код и создать массив:

for (item in localStorage) { console.debug(item) }

Это выведет список всех ключей элементов, которые вы сохранили. Вы хотите вывести на экран твит, поставленный в очередь? Посмотрите, как это можно сделать:

for (item in localStorage) { console.debug(localStorage[item]) }

API localStorageи sessionStorageможно найти во всех современных браузерах (включая версию IE 8+). Итак, нет ни одной причины, мешающей вам создавать свои собственные приложения или просто начать экспериментировать с этим в клиентских приложениях.

Прежде чем заменить все разметки на вашем текущем сайте, найдите время, чтобы изучить роли стандарта ARIA и производительности браузеров. Узнайте в общих чертах, как создавать код. Пробуйте новые теги, это гарантированно поднимет вам настроение. А использование стандарта ARIA и вовсе дело благородное – это поможет многим пользователям с ограниченными возможностями свободно использовать ваш сайт. Звучит почти поэтично, но на самом деле все гораздо проще: это – ваша работа.

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

Не существует «режима HTML5», так что смело ныряйте!

Это всего лишь апробация платформы, которую мы называем HTML5. Мы могли бы говорить о ней еще несколько дней, но лучше дадим вам несколько полезных ссылок:

• HTML5 Please, html5please.usХотите знать, когда вам пора «латать» старые браузеры? Или определять, когда суперновые теги не совсем готовы к прайм-тайму? Этот сайт даст вам основу для того, чтобы подняться на ступеньку выше.

• HTML5: Техническая спецификация для веб-разработчиков, smashed.by/whatwgЭто руководство – сокращенная версия полной спецификации HTML5. Из нее убраны все те бестолковые детали, которые нужны поставщикам браузеров для их создания. В ней есть поиск, она работает на мобильных устройствах (даже офлайн) и, к слову, была создана вашим покорным слугой.

• HTML5 Rocks, html5rocks.comЭтот сайт поддерживается сотрудниками Google, почти каждая статья не просто познавательная, но и увлекательная.

• HTML5 Doctor, html5doctor.comПомимо того, что сайт создан компанией классных парней, HTML5 Doctor проник на такую глубину, на которую осмелится не каждый. Прекрасный источник знаний!

Я здорово горжусь тем, что знаком с известными людьми! По всему разделу я то и дело «вворачивал» их имена при каждом удобном случае. Но тому есть оправдание. Люди и сайты, о которых я говорил, – лидеры в этой индустрии.

Очень советую примкнуть к ним на Twitter или Google+, подписаться на их блоги, да просто купить им пива. Ничто не даст вам больше знаний и опыта в вебе, чем помощь в создании крепкого онлайн-сообщества. Засим я вас оставлю, а вы начинайте переделывать свой сайт. Желаю удачи!

Бен Шварц вкладывает свою любовь к хорошей еде (дома) и саке (в барах), разрабатывая сложные веб-приложения на технологиях, основанных на стандартах. Больше всего на свете им движет маниакальное желание производить не только элегантный код, но и красивое программное обеспечение для своих пользователей. Он также член комитета Руби (Австралия) и присоединился к рабочей группе W3C CSS (World Wide Web Consortium) в качестве «приглашенного эксперта» в декабре 2011 года.

Рас Уэкли (р. 1965) родился в Сиднее (Австралия), живет в Западном Чатсвуде, зеленом пригороде на севере Сиднея. Имеет диплом в изобразительном искусстве и графическом дизайне и работы по пользователеориентированному веб-дизайну, разметке и программированию, управлению проектами, опыту пользовательского взаимодействия, доступности и обучению. Он работает с Интернетом с 1995 года. У Раса двое маленьких детей, поэтому у него нет времени на хобби. Раньше у него было три собаки, но с тех пор как они умерли, он не завел ни одной. Любимый цвет Раса – черный. Важный урок, который он получил за время своей карьеры, – «Это тоже пройдет», что относится ко всему в жизни, включая бизнес. Его личное послание читателям: «Займись делом!»

К этому моменту мы все уже в курсе, что веб-стандарты являются фундаментальной базой в нашей работе, а семантический язык HTML – это мировая вещь. Мы создаем шаблоны без таблиц и боремся за правильную семантику. Однако многие из нас все еще пишут код по методам, популярным среди разработчиков в первые годы появления стандартов, – некоторые из них состоят из чрезмерно усложненных разметок и неприятных «причесываний» CSS, если не сказать больше.

Хотя эти приемы не являются неверными сами по себе, они уже не оптимальны и порой тянут нас назад, не давая нам развиваться как разработчикам в лучшую и эффективную сторону.

В предыдущем разделе мы научились переписывать разметку, чтобы она стала более изящной, семантической и современной. В этом мы узнаем, как с помощью изменения CSS сократить количество изображений, HTTP-запросов, кода на JavaScript для функций представления и оберточных тегов div, чтобы создать более гибкий и легкий в поддержке стиль.

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