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

nope: ‘/javascripts/json2.js’

}

])

Этот умный кусочек JavaScript проверяет, есть ли у браузера свой «родной» анализатор (парсер) JSON. И туда, где его нет (у браузеров IE 6 и 7), он загружает скрипт /javascripts/json2.js, (полифилл[25] JSON).

Теперь, когда мы рассмотрели азы загрузок скрипта и поговорили о параллельной загрузке, самое время взглянуть на два новых атрибута в теге скрипта.

Первый – это асинхронный тег:

Асинхронный тег – это булевый атрибут, означающий, что его явное присутствие в браузере задает значение true, или «Да, пожалуйста, используйте этот функционал». Он велит браузеру выполнить application.js., как только оно будет доступно. Скрипты, которые загружаются асинхронно, выполняются, как только будут загружены, то есть не в порядке их появления в коде HTML

Передаем файлы быстрее

Стоит упомянуть, что нашим самым большим достижением стало уменьшение размеров скриптов в целом. Сначала мы добились этого, применив gzip-сжатие (как и для таблицы стилей, и HTML файлов). Чтобы добавить на сайт поддержку gzip, зайдите в репозиторий HTML5 Boilerplate на GitHub[26].

Если вы не знаете, как обслуживается ваш сайт, самое время ознакомиться с панелью инструментов для разработчика. На Webkit браузерах (Safari и Chrome) вы можете открыть ее, нажав Command + Option + I в системе Mac и Control + Shift + I в Windows.

Под панелью «Сеть» вы найдете список файлов, которые были загружены для текущей страницы. Можете проинспектировать запросы и заголовки ответов для каждого файла.

Рисунок 3.3. Панель инструментов для разработчика Safari отображает активность сети на Yepnope.

Рисунок 3.4. Файл был передан браузеру в предварительно сжатом виде

Второй совет, как улучшить производительность вашего сайта (вообще-то, лучший способ – это оптимизировать код), – объединить и сжать файлы.

Я советую вам применить компилятор UglifyJS[27].

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

Новые семантические теги и их использование

Так как мы говорим о версии HTML5, по сути, все эти разговоры о производительности и скриптах к нам вроде бы не относятся. Давайте рассмотрим новые семантические теги и разработаем стратегию их применения.

Прежде чем использовать какой-то новый тег, не забудьте о так называемом HTML5 Shiv. Этот скрипт важен для нас. Без него Internet Explorer 6, 7 и 8 не смогут распознать незнакомые стили (т. е. новые HTML5-теги, которых не было, когда создавались указанные версии IE).

Вы можете скопировать HTML5 Shiv из сервиса Google Code, где выложен этот проект[28].

Также вы можете получить HTML5 Shiv, используя js-библиотеку Modernizr[29]. В этом разделе мы не говорим об этом скрипте подробно, но тем не менее держите его на вооружении. Я использовал его на каждом сайте, созданном за последние два года.

Сброс HTML-стилей по умолчанию

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

Применяйте одну из новых версий CSS reset, поскольку старые версии не задают нормированный стиль элементам HTML5.

Очень советую познакомиться с Normalize.css[30] Николаса Галлахера[31] и Джонатана Нила[32].

Многие из старых сценариев сброса (классический пример – сброс от Эрика Мейера) тяжеловесны: они сбрасывают каждый элемент, а некоторые их изменения можно оспорить, например тег strong при установке не выделяется жирным шрифтом по умолчанию. Normalize.css сбрасывает элементы более изящно и сглаживает некоторые причуды браузеров. Это позволит вам максимально нивелировать различия между ними. Джон Нил и Николас Галлахер «раскладывают по полочкам» все, что делают скрипты. Изучите подробно прокомментированный код – он фантастичен!

Строим сайт заново

Дойдя до этого пункта, вы, наверное, подумали: «OK, пора начинать писать сайт, пользуясь самыми замечательными новейшими тегами!» Когда были установлены новые семантические теги, разработчикам пришлось потрудиться: проанализировать, какие классы иидентификаторы они будут применять для своих сайтов. Ничего экстраординарного они не обнаружили: на деле все они пользовались одними и теми же именованиями (иногда с небольшими перестановками).

Итак, возможно, имена новых тегов уже подходят для того, что мы делаем.

Тег SECTION

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