интернет-журнал о бизнесе, карьере и образовании
3 .. 5
  • Курсы ЦБ РФ
  • $ 65.31
  • 75.37
спецпроект
Vzmakh-30

Афиша

воскресенье, 26 сентября

Все о сайтостроительстве - 2

 

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

Текст: ВЕБ

 

Раскроем сразу основную интригу этой статьи. Ключевое слово (оно же — новый термин) — кроссбраузерность. Что это за зверь?

Вспоминаем, что такое браузер — это тоже есть в прошлом материале. Это программа, которая позволяет открывать сайты (Internet Explorer, Mozilla Firefox, Safari, Google Chrome, Opera). Так вот, интрига в том, что браузеры открывают сайты по-разному. У них есть разные предпочтения. Они имеют разные особенности. И сайты могут отличаться в разных браузерах, причем, если не были проведены работы по проверке кроссбраузерности, то весьма существенно. Нередко случается, что, скажем, «выпадающее» меню на сайте отлично работает в одном браузере, а в другом «не выпадает» вовсе. И пользователи не могут попасть в некоторые разделы сайта. Или картинка разъезжается в одном браузере, притом, что в другом — все хорошо.

 

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

Своеобразным мемом в среде интернет-интегрированных людей является браузер Internet Explorer версии 6.0, корректировку для которого некоторые компании отказываются производить, вставляя соответствующий пункт в договор, поскольку это не всегда возможно физически. Тем не менее во многих госучреждениях этот браузер установлен как основной, а часто — и как единственный. Грешат ошибками в кроссбраузерности и другие браузеры, правда, в меньшей степени.

Соответственно, чтобы избежать таких ошибок, необходимо, во-первых, знать об их существовании, во-вторых, работать с опытными исполнителями и, в-третьих, контролировать и проверять их работу.

 

Итак, дизайн

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

 

Вариант № 1. Взять готовый сверстанный шаблон. Такие шаблоны есть в интернете, и они представляют собой уже сверстанные, то есть переведенные на язык HTML варианты дизайна сайта. Основным плюсом этого варианта является его дешевизна и скорость. Тут надо учитывать, что некоторые системы администрирования имеют собственный багаж шаблонов дизайна, и если находится подходящий вариант, то плюсы этого выбора возводятся в квадрат, и новый вариант дизайна, найденный под конкретную систему администрирования, устанавливается за 15–20 минут. Для примера вы можете ввести в поисковую систему запрос «шаблоны для wordpress» и ознакомиться с разнообразием готовых решений для этой системы.

 

Основных минусов у такого варианта два.

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

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

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

 

Вариант № 2. Разработка дизайна с нуля.

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

Чтобы от фразы: «Хочу, чтобы фотка увеличивалась и выплывала, а остальное затемнялось...» перейти к пункту ТЗ: «Подключить библиотеку такую-то для увеличения фото».

 

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

 

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

2. Лучше не рассчитывать на шрифтовое разнообразие. Можно долго перечислять, какие шрифты стоит использовать, а какие нет, но я бы рекомендовал пойти более простым путем. А именно: посоветоваться со специалистом, который будет осуществлять HTML-верстку, но на всякий случай весь дизайн просмотреть с шрифтом Arial, который чаще всего ставится по умолчанию в том случае, если шрифт не поддерживается конкретным браузером. В целом по шрифтам — будьте скромнее.

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

 

Вообще, современный девиз сайтостроения — «Простота, краткость, исключительная понятность».

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

 

Взаимодействие с верстальщиком полезно строить по принципу: «Контролируй все, что доступно».

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

 

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

Следить за комментариями этой записи   
Войдите с помощью или , чтобы оставить комментарий

Ещё по теме:

Между строчек

Между строчек

Интервью с «архитектором шрифтов» и преподавателем авторских курсов Сергеем Рассказовым...

10 апреля 2014 0 829
Компания, живущая в сети

Компания, живущая в сети

Часовые пояса, дни без интернета и «бутылочное горлышко» — как со всем справиться?

27 января 2016 0 522
Rutracker.org ничего не потерял от «вечной» блокировки

Rutracker.org ничего не потерял от «вечной» блокировки

Посещаемость Rutracker.org, который провайдеры начали блокировать 25 января, за два дня изменилась только на 13%

28 января 2016 0 621

Свежие статьи

Звезды футбола, которые красиво завершили свою игровую карьеру

Звезды футбола, которые красиво завершили свою игровую карьеру

Кто из топ футболистов нашел в себе силы красиво завершить карьеру.

1 декабря 2020 0 257
В Preply.com рассказали, как «прокачать» английский

В Preply.com рассказали, как «прокачать» английский

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

26 ноября 2020 0 295
Они жаждут крови: самые жестокие бойцы ММА

Они жаждут крови: самые жестокие бойцы ММА

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

25 ноября 2020 0 268