Создание каркаса сайта

Пример воображаемого сайта

Этот воображаемый сайт принадлежит компании, которая создает свободно распространяемый (Open Source) код для wiki, и в среднем в неделю они создают не менее трех новых вариантов кода. Так как код является бесплатным для использования и модификации, то владельцы сайта хотят монетизировать сайт (получать от него деньги) через пожертвования, размещение рекламы и дополнительные услуги, предлагаемые программистами. Название сайта "Wiki Whatevers" и имя домена были выбраны. Контент был разработан, и он содержит фрагменты кода, каталоги которые надо создать, статьи и биографии некоторых программистов, участвующих в этом проекте. Web-хост обеспечивает доступность базы данных MySQL (http://www.mysql.com/), и может обеспечить самые большие всплески трафика без простоя. Теперь пора собрать вместе все объекты, которые будут использоваться на сайте:

1. Для применения существующего логотипа компании необходимо подготовить его цифровую копию для использования на Web-сайте клиента. Для этого требуется сканер для сканирования изображения в графической программе, такой как Photoshop (http://www.adobe.com/products/photoshop/index.html) или Gimp (http://www.gimp.org/). Размер логотипа я определю позже, когда будет определена компоновка. Я сохраняю изображение с разрешением 72 dpi (dot per inch), что позволит получить более быстрое время загрузки. Возможно, что этот логотип будет использоваться также для пункта #4 ниже.
2. Фотографии программистов будут использоваться на странице персонала (или странице "About"), поэтому для этого проекта необходимо получить их цифровые изображения. Они могут либо предоставить фотографии для сканирования или прислать цифровые изображения. Если они присылают цифровые изображения, то желательно иметь размер больше планируемого, поэтому подходящим будет изображение 300 dpi, или полноразмерное изображение, которое можно будет уменьшить потом до требуемого размера.
3. Клиент решил использовать блог, так как они уже имеют достаточно контента для поддержания этого блога в активном состоянии в течение нескольких следующих месяцев. К счастью, клиент выбрал провайдера Web-хостинга, который знаком с блогами и имеет необходимые возможности для работы с базами данных и высоким трафиком — включая пиковые нагрузки трафика. Этот хост предоставляет также несколько решений для расширения, отличное предложение, если клиент захочет развиваться. Если рабочее время хоста гарантировано, то клиенту будет удобнее оставаться с тем же хостом в течение всей фазы роста. Эта возможность оставаться с поставщиком хост-услуг в течение ряда лет существенно облегчает жизнь.
4. С помощью FTP (на рынке существует несколько вариантов для выбора, свободно доступные продукты, такие как Filezilla (http://filezilla-project.org/), или fireftp (http://fireftp.mozdev.org/) для Firefox, или коммерческие клиенты, такие как CuteFTP (http://www.cuteftp.com/)), я загружаю статическую страницу, которая объявляет о скором появлении сайта.. "Under Construction" является ужасной фразой, которую иногда используют, так как посетители сайта могут не вернуться, если они не будут знать дату "открытия". Вместо этого используйте страницу, которая содержит название компании, что они собираются предложить, дату, когда сайт станет активным, и контактную информацию (адрес e-mail отлично подходит — если компания имеет стандартный офис, используйте также почтовый адрес и номер телефона). Еще лучше использовать форму e-mail, которую посетители могут использовать, чтобы получить уведомление, когда сайт заработает. Последнее предложение создает для клиента потенциальных заказчиков, даже еще до того, как сайт будет готов к работе.
5. Используя информацию о контенте/структуре, полученную от клиента, и тот факт, что они хотят, чтобы рекламное пространство было встроено во все страницы, я создаю архитектуру для сайта и планирую средства перемещения и текстовые ссылки. Я использую также эту копию для планирования ключевых слов для SEO сайта.
6. Используя цвета логотипа, я выберу две или три цветовые схемы для представления клиенту для утверждения.
7. Затем я выберу другие фотографии или иллюстрации в базе данных фотоматериалов, такой как iStock (http://www.istockphoto.com/index.php) или Comstock (http://www.comstock.com/web/default.asp). Но обязательно поищите различные варианты, так как некоторые компании фотоматериалов предлагают распродажи и другие выгодные сделки, от которых бывает трудно отказаться. Использование баз данных фотоматериалов не так дорого, и избавляет от проблем, связанных с вопросами авторских прав (http://www.templetons.com/brad/copymyths.html). Мне понадобятся также любые изображения, созданные компанией — или которые они создадут — чтобы сопроводить какой-либо код, статьи "как сделать", и записи блога.

Логотип

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

Владельцы компании Wiki Whatevers учились в Технологическом институте Джорджии (Georgia Tech), поэтому они использовали цвета своего института - золотой и черный - в дизайне логотипа. Но, хотя логотип и является упрощенным, по крайней мере, с ним можно легко работать с точки зрения цветов и компоновки. Рисунок 9.1 показывает логотип:

Рис. 9.1. Логотип компании Wiki Whatevers

Проблема здесь состоит в том, что я просто отсканировала печатный логотип, собираясь использовать тот же самый логотип в сети. Печатные цвета, которые являются CMYK (http://desktoppub.about.com/cs/basic/g/cmyk.htm) (Cyan, Magenta, Yellow и Key, или Black - черный), не будут совпадать с цветами Web, которые состоят из RGB (Red, Green, Blue). Поэтому мне нужно попробовать сделать небольшую подгонку цветов, чтобы цвета Web соответствовали логотипу как можно ближе. Существует три способа выполнить эту задачу:

1. Связаться с печатником и выяснить, какие цвета использовались при печати логотипа Wiki Whatevers на напечатанных ранее материалах. Обычно печатники используют цвета Pantone (http://www.pantone.com/pages/pantone/index.aspx), и компания Pantone предоставляет инструменты, которые помогают дизайнерам согласовать цвета печати с цветами Web. Эта система согласования цветов Pantone Colour Matching может находиться у печатника под рукой, поэтому печатник может помочь согласовать цвета печати с соответствующими подходящими цветами Web, позволяя избежать затрат на приобретение инструментов Pantone.
2. Так как владельцы Wiki Whatevers используют цвета Georgia Tech, можно посетить сайт Georgia Tech, чтобы проверить, нельзя ли подобрать цвета из Web. Можно использовать графическую программу для извлечения цвета с сайта Web, делая снимок с экрана (http://www.iopus.com/guides/screenshot.htm) и перенося это изображение в графическую программу для использования "пипетки" или другого инструмента для согласования цветов.
3. Внимательно сравните печатные материалы с цветами Web, чтобы попробовать подобрать как можно более близкие. В некоторых случаях цвета могут существенно отличаться. В других случаях цвета могут казаться слишком похожими, чтобы беспокоиться об изменении.
4. Отсканируйте печатное изображение программой сканирования, которая воспринимает CMYK и использует Pantone Colour Swatches программы Photoshop для как можно более точного согласования. Это последнее решение работает только в том случае, если сканер воспринимает CMYK и вы имеете программу Photoshop.

В данном случае можно было бы подобрать золотой цвет для точного соответствия по изображению талисмана на сайте Georgia Tech Athletic (http://ramblinwreck.cstv.com/). Золотой имеет код #eab200, а черный, он и есть черный ( #000000 ). Фон, который имеет темно-зелено-синий цвет ( #002123 ) использовался для отбрасывания тени на логотипе. Поэтому трудная проблема разрешилась легко с помощью простого талисмана с изображением шмеля, показанного на рисунке 9.2.

Рис. 9.2. Часть талисмана Georgia Tech, использованная для подбора цветов логотипа