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

Мы не можем говорить о среде разработки, не упомянув о контроле версий. Даже если вы работаете в одиночку, вы должны его использовать. И это всегда полезно для тех, кто работает в команде. Ее члены смогут править файлы и не волноваться о том, что они «затирают» файлы друг друга. Вы всегда сможете вернуться к прежней версии, если что-то пойдет не так.

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

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

Рисунок 2.8. Beanstalk сервис для контроля версий

Существует несколько систем управления версиями. Вы, наверное, слышали о таких, как Subversion и Git. Обычно каждый выбирает, кому что нравится. Так как для выполнения работы вы можете менять сервер, то используя такие веб-сервисы, как GitHub или Beanstalk, вы можете быстро приступать к работе. Beanstalk имеет отличное руководство по управлению версиями на своем сайте[19]19
  Beanstalk, «An Introduction to Version Control» / smashed.by/version-control.


[Закрыть].

Перенос вашего сайта

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

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

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

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

Избегайте предварительного просмотра сайта с тильдой (~) или с вашим именем пользователя, иначе пути и ссылки побьются.

Если вы работаете на приложениях не от Microsoft, то, скорее всего, вы используете MySQL. MySQL – это база данных, используемая для большинства приложений с открытыми «исходниками». Ее любят разработчики, которые работают с PHP, Python и Ruby on Rails.

Первое, что вы должны знать при работе с такой базой данных, как MySQL, это то, что в ней нет файла данных для скачивания и пересылки. База хранится внутри MySQL сервера. Чтобы получить данные, вам надо будет подключиться к нему. Многие серверы устанавливаются с PHPMyAdmin – веб-приложением, которое позволяет управлять базами данных через браузер.

Вы также сами можете загрузить и установить PHPMyAdmin. С ним вам будет удобно переносить базу данных MySQL между локальным, вспомогательным и рабочим серверами.

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

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

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

В этом случае я проверяю сайт на копии базы данных и затем перемещаю базу непосредственно перед сменой доменных имен. Мне надо точно знать, что я перенес большую часть обновленного контента. Если посетители добавляют данные в базу (например, они делают заказы в онлайн-магазине), тогда вам ни в коем случае нельзя терять их при перемещении. Самый надежный способ – временно выключить сайт и разместить на нем страницу, с уведомлением, что идут технические работы.

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

Если это ваш случай, то попросите вашего хостинг-провайдера (и разработчика, если он у вас есть) сделать все лучшим образом.

Куда дальше?

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

Вспомните слова Пола Боуга из первого раздела: прежде чем «нырнуть с головой» в какое-то решение, сделайте домашнюю работу! Есть много способов достичь всего того, что вы хотите. А CMS или структура, которую вам пытаются продать, не всегда лучшее из того, что нужно вашему проекту. Всегда обращайтесь к своим исследованиям, бизнес-требованиям, имеющимся ресурсам и ограничениям. Тогда мудрое решение придет само собой! Все, что тщательно продумано, позволит сайту расти и развиваться.

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

Об авторе

* * *

Рейчел Эндрю – веб-разработчик с навыками как в серверных языках, так и в верстке и разработке интерфейсов. Она написала множество книг, в том числе «Антология CSS: 101 основной совет, хитрость и уловка» (The CSS Anthology: 101 Essential Tips, Tricks & Hacks), четвертое издание которого было опубликовано в марте 2012 года. Рэйчел – основатель и управляющий директор edgeofmyseat.com (компания, занятая разработкой программного обеспечения), участвовала в создании «Пирч» (Perch), «действительно маленькой системы управления контентом». У Рэйчел есть личный сайт rachelandrew.co.uk, где она пишет о многих вещах, в том числе вебе и ведении бизнеса. Еще ее можно найти в Twitter под ником @rachelandrew.

О рецензентах

* * *

Харли Финкельштейн (р. 1983) – канадский гражданин, родившийся в Монреале, там же он получил ученую степень в области экономики. Также у него есть степень магистра в области права Университета Оттавы, города, где он живет сейчас. Он описывает Оттаву как холодный город с атмосферой провинции и радостью столицы. Помимо Интернета, он любит горные лыжи, бокс, готовить суши, диджеинг и красный цвет. Харли основал свою первую компанию в возрасте 17 и с тех пор работает в этой сфере. Сегодня он занимает должность руководителя платформы на Shopif, ведущей платформы электронной коммерции. На протяжении своей карьеры, Харли научился следовать за своими увлечениями и практиковать их каждый день. Его личный совет читателям: «Действуй энергично и находи изящные решения».

*****

* * *

Райан Карсон – американец, живущий в Великобритании, отец семейства. Окончив Университет штата Колорадо со степенью в области компьютерных наук, он переехал в Великобританию в 2000 году. Он любит веб-технологии, кофе и фильмы. (Смотреть «Матрицу» в кино семь раз – это неправильно?) Он любит вовлекать и вдохновлять людей, и именно поэтому он увлеченно работает над мероприятиями для веб-сообщества. Он успешно построил и продал две компании и в настоящее время работает над третьей, Treehouse.

Погружение в HTML5
Автор: Бен Шварц
Рецензент: Рас Уикли

Если бы вы попросили меня рассказать вам о HTML5, я, пожалуй, начал бы с того, что сейчас ваша роль как веб-разработчика сильно изменилась по сравнению с тем, что было раньше.

Я буду обращаться к вам как к эксперту в области HTML (языка разметки), CSS (и всех ее вариаций в разных браузерах), JavaScript (и едва уловимой разницы между его воспроизведением в браузерах). Потом я перейду к теории дизайна, анимации, 3D, серверным технологиям и обработке звука.

Вы наверняка захотите узнать, зачем так много технологий собрано «под крышу» HTML, и, очевидно, удивитесь, почему вы решили взяться в первую очередь за веб.

HTML5 (как спецификация) «разбит» на мелкие кусочки, разбросанные по разным специализированным областям. Постарайтесь не раздражаться из-за этого.

Получив твердые базовые знания HTML, CSS и JavaScript вы сможете продолжить совершенствоваться самостоятельно и развить такие спецнавыки, которые другим и не снились. В сущности, когда вы овладеете не только узкоспециализированными, но и непрофильными навыками, вы станете просто бесценным и незаменимым для компании и коллег.

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

Ниже представлены, в частности, бета-версии так называемой «Большой пятерки» браузеров:

• У Google Chrome три версии релизов: «Beta» (для разработчиков) «Dev channel» (для разработчиков, которые хотят использовать возможности, созданные в течение последней недели) и «Canary» (так называемый ночной выпуск, полностью неопробованный). Вы можете скачать их по адресу smashed.by/chromedev.

• У браузера Safari одна версия: Webkit (webkit.org).

• У Opera – версия «Next»: smashed.by/operadev.

• Firefox имеет «ночную» версию (smashed.by/ffndev) и пре-бета сборку

• Aurora (smashed.by/ffadev).

• Последний по списку, но не последний по значимости: версия Internet Explorer от Microsoft выходит в ручном режиме (и поэтому не является «ночной» сборкой): smashed.by/iedev.

Поддержка браузерами новых свойств выпускается в модульном порядке. А с производителями браузеров (такими как Google и Mozilla), выпускающими новую версию каждые 6–8 месяцев, номер версии теперь несет значительно меньше смысла, чем ранее.

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

Так как веб-технологии постоянно развиваются, мы должны иметь представление об их прошлом. К счастью, эту цель преследуют оба комитета по стандартам языка HTML. Так что расслабьтесь и дышите ровно, HTML5 не отдалит от вас пользователей и не обременит работой. Какой бы DOCTYPE вы ни использовали, браузер пользователя отрендерит сайт в самом лучшем виде, насколько это возможно. Если вы используете новый элемент HTML5 вместе со старым DOCTYPE, все равно он будет отрендерен верно.

Здесь мы не будем говорить о WebGL, аудио и видео, устройстве API, Web sockets или SVG. На каждую тему уйдет по разделу, поэтому оставлю их вам на откуп. Вместо этого я расскажу вам все с самого начала. Мы разберем все важные базовые моменты, прежде чем двигаться дальше, к более сложным темам.

Мы откуда и куда?

HTML5 – это уйма всего. Мы уже далеко ушли от последней основной «версии» HTML. Сообщество по развитию гипертекстовых технологий (WHATWG) ссылается на нее как на «HTML: Живой стандарт» (от упоминания числа 5 отказались). А это значит, что у HTML нет версий. Как мы говорили, производители браузеров выбирают лучшие свойства для рендера, поэтому и отличается поддержка разных элементов разными браузерами.

Может быть, вы слышали о Всемирном консорциуме Сети (W3C). Мы уже упомянули о сообществе WHATWG. Оно было основано производителями браузеров Apple, Mozilla и Opera. Обеспокоенные тем, что W3C недостаточно занимается развитием HTML, они решили организовать свою группу.

Большая часть работы группы WHATWG пересекается с W3C, а в лицензии на спецификацию говорится, что «вам предоставляется лицензия на использование, воспроизведение и создание производных этого документа».

W3C в самом деле помогает в работе. Организация не разрабатывает стандарты, но охотно дает рекомендации. И хотя W3C финансируют большие компании – производители компьютеров и браузеров, она тем не менее специализируется на открытых стандартах, которые не ставят во главе угла какую-либо одну компанию.

Что же, как разработчик, вы можете быть уверены, что все новые разработки в HTML (особенно в области веб-приложений) создаются при значительной финансовой поддержке производителей браузеров (Webkit, Gecko и Opera) и со временем одобряются W3C.

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

Рисунок 3.1. Сайт Caniuse (smashed.by/ciu) демонстрирует, в каких случаях вы можете или должны использовать возможности HTML5

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

Только маги и чародеи могут знать, насколько широко поддерживается какая-либо заданная функция. Если вы не относитесь к их числу, возьмите себе в помощь сайт When Can I Use[20]20
  smashed.by/wcai.


[Закрыть]. На нем находится список возможностей, которые поддерживаются в современных версиях всеми основными настольными и мобильными браузерами, а также перечень возможностей, которые будут представлены в будущих версиях. Он доступен для поиска и даже подключается к Google Analytics, чтобы показать вам, какие браузеры использует ваша аудитория. А теперь давайте погрузимся и посмотрим повнимательнее на основы HTML.

[21]21
  Тег <!DOCTYPE> служит для указания типа текущего документа – DTD (document type definition, описание типа документа). Необходим, чтобы браузер понимал, как следует интерпретировать страницу, поскольку HTML существует в нескольких версиях. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу, и нужно в первой строке кода задавать <!DOCTYPE>. – Примеч. науч. ред.


[Закрыть]

Поройтесь в кладовой своей памяти. Можете припомнить полный DOCTYPE для HTML 4.01 (или для XHTML, коли на то пошло)? Не думаю. Давайте я покажу вам DOCTYPE для HTML5:

<!doctype html>

Вот и все! Можно печатать и заглавными, и строчными буквами. Этого вам достаточно, чтобы перевести браузер в режим соблюдения стандартов. Спрашивается, зачем нам нужно все время копировать и вставлять верхние строки документа HTML? Конечно же, мы захламляли наш HTML кучей других важных тегов на протяжении нескольких лет. Давайте посмотрим, что еще упростилось.

<meta http-equiv="Content-Type" content="text/html;

charset=utf-8">

Ох, что за бардак! Этот метатег очень важный и его надо добавлять до тега title, чтобы убедиться, что браузер правильно установил кодировку символов. К счастью, его сделали легко запоминаемым:

<meta charset="utf-8">

У некоторых парсеров XML есть проблемы с тегами, которые не являются самозакрывающимися. Вот поэтому разработчики выбирают самозакрывающиеся теги (т. е. XHTML стиль). Конечно, вам решать, но мы все же советуем оставлять теги открытыми.

Атрибут type можно задать и через ссылку на таблицу стилей <link rel=”stylesheet” href=”layout.css”>, и в теге script.

В прежние времена атрибут type мог использоваться в теге script, если вы хотели применить VBScript вместо JavaScript, но сегодня это уже не актуально.

Вообще, когда ты опускаешь детали, которые «раздувают» и усложняют код, то чувствуешь себя просто великолепно. Но мы прошлись только по верхам. Давайте немного доработаем тег script.

Сначала о том, как браузер загружает файлы. После того как браузер загрузил и проанализировал HTML, он составляет список project assets, категорий[22]22
  Общие части страниц (группы элементов), которые кочуют из страницы в страницу называются project assets.


[Закрыть] (изображения, CSS, JavaScripts и т. п.) и расставляет приоритетность их загрузки в порядке появления.

Раньше мы подключались к Интернету через телефонную сеть, которая слабо справлялась с несколькими одновременными подключениями. Сейчас пропускные способности значительно варьируются (особенно с учетом мобильных устройств). Поэтому сегодня браузеры ограничены в одновременной загрузке файлов с домена верхнего уровня. Вот почему некоторые разработчики используют сети доставки и дистрибуции контента или размещают файлы на поддомене (таком как assets.example.com); использование нескольких доменов дает разработчику больше слотов загрузки для скриптов, таблиц стилей, изображений и фреймов.

Рисунок 3.2. Yepnope: условный скриптовой загрузчик

Когда браузеры качают файлы JavaScript, они загружают по одному скрипту за раз, что позволяет им анализировать код и предзапускать магические оптимизации. Теперь, вместо того чтобы полагаться на удачу, мы можем использовать загрузчики скриптов (такие как LABjs, Yepnope, RequireJS и многие другие), чтобы одновременно загружать множество скриптов, устанавливать зависимости и определять, нужен ли вообще какой-то определенный скрипт.

Имеет смысл улучшить производительность страниц везде, где возможно. Компания Amazon утверждает, что увеличение времени загрузки страницы на 100 миллисекунд уменьшает количество продаж на 1 %[23]23
  smashed.by/amzspeed.


[Закрыть].

Вооружившись этими сведениями, поговорим о моем любимом скриптовом загрузчике, Yepnope[24]24
  smashed.by/yepnope.


[Закрыть].

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

Для примера:

yepnope([

{

test: window.JSON,

nope: ‘/javascripts/json2.js’

}

])

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


[Закрыть] JSON).

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

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

<scriptsrc=”/javascripts/application.js” async></script>

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

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


[Закрыть].

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

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

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

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

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

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


[Закрыть].

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