Из чего состоит сайт

Для тех, кто хочет разобраться всерьёз

Кажется, сегодня уже все знают, из чего состоит сайт. И всё же некоторые люди по-прежнему задают нам вопросы на эту тему. Например:

‒ вы делаете сайты? Ой, это так сложно, наверное. Вам же приходится покупать все эти…порталы!
‒ все эти «что»?
‒ ну…порталы…даже не знаю, как объяснить. Но вы поняли, да?

Или:

‒ а интернет-магазин сколько стоит? Ведь там всё так устроено, что вам надо платить за каждый клик! И за содержание магазина!
‒ платить должны мы или нам?
‒ вам конечно!

Или:

‒ нужен сайт из 5-6 страниц, ничего особенного не надо, никаких наворотов, дизайн простой.
‒ редактировать содержимое будете вы?
‒ ну конечно я!
‒ а вообще, управление сайтом нужно? Например, если вы захотите изменить название сайта…
‒ думаю, что не захочу. Главное, чтобы тексты можно было править.
‒ ОК, а тексты у вас есть?
‒ нет, но мне в прошлый раз делали сайт, и тексты тоже написали.

........................................................................................................................................................................

Последний пример – самый интересный. Человек немного запутался в понятиях «дизайн», «наполнение сайта», «программная часть», «управление сайтом». Да и как не запутаться? Ведь мало кто даёт заказчику полную информацию об устройстве сайта, пока он не будет заказан. Вот тогда уже можно поговорить и об админке, и о вёрстке, и о хостинге, и о доминирующих цветах и концепциях, которые будут использоваться при разработке дизайна – короче говоря, обо всех составляющих сайта.

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

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

Для многих людей дизайн сайта – это макет, изображение, на котором показано, как будут расположены «элементы» на сайте. Есть группа людей, считающих, что дизайн сайта – это уже и есть сайт. «Ладно, картинка нам нравится, а где наш сайт в Интернете?». Но вполне очевидно, что JPEG-изображение не может вдруг ожить и стать веб-сайтом. Что-то тут не так.

Отождествлять дизайн с макетом теоретически можно, но не стоит этим увлекаться. Макет – это единичное изображение, на нём можно увидеть только тот материал, который поместил туда дизайнер. Кто знает, что там будет в будущем?

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

Пример: интернет-магазин может содержать страницу «категория товаров», страницу «товар», страницу «корзина» и ещё много других страниц. Понятно, что при разработке «корзины» будут стоять несколько иные задачи, чем при разработке страницы «товар». Корзина обычно служит для удобства и быстроты покупки. А страница отдельного товара – для полного ознакомления, для сравнения данного товара с другими. И хотя все эти страницы объединены общей идеей «продать», всё же логика будет отличаться.

Вёрстка.
Вёрстка – это процесс написания специального кода, который понимают браузеры. Свёрстанный макет похож на свой графический прототип. Как правило, это файл, имеющий расширение «html» и отображаемый браузерами. По поводу вёрстки замечаний не очень много, но всё же они есть:

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

‒ лучше всего, чтобы свёрстанный макет одинаково отображался всеми современными браузерами (Internet Explorer, Mozilla Firefox, Opera, Google Chrome, Safari). Большое отличие при отображении разными браузерами является уважительной причиной, чтобы потребовать доработки.

‒ если у вас есть свой дизайн или своё видение сайта, верстальщик имеет право внести в него коррективы. Если это профессионал, он доходчиво объяснит, почему хочет внести их.

‒ вопрос более принципиальный для верстальщика, чем для заказчика: свёрстанный макет должен соответствовать спецификации того языка, на котором он реализован. Например: HTML 4.01 или XHTML 1.0.

Программирование.
Рассуждая о том, из чего состоит сайт, невозможно обойти вопрос создание программой части. Программирование зачастую занимает 70-80% работы по сайту. К сожалению, эта часть статьи сложнее для понимания, чем другие. Мы просим извинить нас за это. Однако, если вы внимательно прочтёте и разберётесь в том, что же такое программная часть сайта, пользы от этого будет много.

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

А если, скажем, сайт состоит из 100 страниц, которые отличаются только содержанием, а дизайн один и тот же? Снова программирование! Верстать 100 почти одинаковых страниц – долго и нерационально. Выходит, что программа, используя один и тот же дизайн, генерирует разное содержимое. И надо сказать, что этот приём сильно отличается от программирования визуальных эффектов и подсказок по заполнению форм. Попробуем разобраться, в чём разница.

«Серверная часть». Введём одно определение. Оно может показаться сложным, но, прочитав разъяснения, вы, возможно, поймёте, что уже знаете его.

Определение: веб-сервер – это компьютер и установленное на нём программное обеспечение, которое в режиме реального времени отвечает на запросы веб-клиента. Иными словами, веб-сервер работает постоянно.

В роли веб-клиента обычно выступает браузер (Internet Explorer, Mozilla Firefox, Opera, Google Chrome, Safari). В строке браузера вы набираете адрес, по которому хотите перейти (например, http://www.example.com/index/), и нажимаете «Enter».

Браузер посылает серверу запрос, в котором говорится, что вы хотели бы увидеть определённую страницу (http://www.example.com/index/ - это она и есть). Сервер смотрит, может ли он выдать нужную вам страницу. Если может – вы получаете к ней доступ, если нет – то нет. Все страницы сайта, которые можно посмотреть с помощью браузера, хранятся на сервере либо создаются им динамически.

Чтобы вы могли увидеть нужную веб-страницу, браузер должен получить от сервера код HTML (или XHTML), а также всю необходимую графику и код Java, JavaScript и ActionScript для обеспечения визуальных (и прочих) эффектов. Затем браузер распознаёт этот код, и выдаёт результат в виде готовой веб-страницы.

Как уже говорилось, код может храниться в отдельных файлах на сервере, а может генерироваться динамически. Динамическая генерация HTML и прочего кода позволяет существенно сократить затраты по его написанию. Для этого используются такие средства как PHP, ASP, Perl, Python и другие. Программы, написанные на этих языках, выполняются на сервере, а результат выполнения вы видите в окне браузера. Совокупность всех таких программ, обеспечивающих функционирование сайта, можно назвать «серверной частью» программирования.

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

«Клиентская часть». По сути, клиентская программная часть сайта – это код, который вы загрузили вместе с кодом HTML, и который выполняется у вас на компьютере. Когда сервер выдаёт нужную страницу в браузер, вместе с кодом HTML может загружаться код Java, JavaScript и ActionScript. Если такой код присутствует на странице, значит, разработчик и заказчик сочли нужным его туда поместить, значит, они посчитали, что он даст дополнительные возможности. Что же такое Java, JavaScript и ActionScript?

Java – язык программирования. Программы на Java транслируются и выполняются специальным программным обеспечением, которое называется «виртуальная машина Java». Код Java довольно редко встречается на веб-сайтах. Но если он всё-таки встретился, для его выполнения потребуется установить на ваш компьютер виртуальную машину Java. Как правило, на Java пишутся программы, придающие веб-страницам динамичность и интерактивность.

JavaScript – язык программирования, программы на котором выполняются средствами браузеров. JavaScript встречается очень часто. Бывает так, что сайт состоит из кода Javascript процентов на 80. Разные браузеры немного по-разному понимают код JavaScript, поэтому, если вы заказали сайт с таким кодом, нужно проверить его работу разными браузерами. В последнее время стали очень популярны технологии jQuery и AJAX, основанные на JavaScript.

ActionScript – язык программирования, ориентированный на работу с Flash-приложениями, придающий им интерактивность. По секрету скажем, что сайт может полностью состоять из Flash и ActionScript. Возможен также вариант, когда основой будет HTML, но на сайте будут присутствовать Flash-компоненты. Например, проигрыватель mp3. ActionScript, подобно Java, выполняется виртуальной машиной, которая устанавливается на ваш компьютер. Помните, в самом начале работы вас просили скачать и установить Adobe Flash Player? Это она и есть.

Имея в своём распоряжении квалифицированных программистов Java, JavaScript и ActionScript, вы можете сделать веб-сайт динамичным, интерактивным и отлично оформленным. Однако если сильно увлечься применением данных технологий, могут возникнуть проблемы с загрузкой страниц. Более того, скажем честно: многие пользователи не любят слишком «красивую» Flash-анимацию за то, что она раздражает зрение и рассеивает внимание. Всё хорошо в меру.

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

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

Системы управления содержимым (CMS).
Сайт конечно не состоит из CMS, но об этом тоже можно поговорить. CMS - это системы, написанные всё на тех же языках PHP, ASP, Perl или Python. Количество кода у них впечатляющее. Основная задача CMS – обеспечить как можно более гибкое управление всеми элементами сайта. Причём управление это должно осуществляться без ведома разработчика. По большей части оно осуществляется через закрытую административную часть.

Сейчас на рынке есть много хорошо зарекомендовавших себя CMS. Для интернет-магазинов это OsCommerce, Magento, Prestashop, для блогов – Wordpress. Если же говорить о CMS широкого применения, то это Drupal, Joomla, TYPO3. Кстати, для этих систем написано много полезного кода JavaScript и ActionScript, что делает их привлекательными и удобными в использовании.

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

Доменное имя и хостинг.
Доменное имя – это имя вашего сайта во всемирной сети (например, www.mycompany.com.ua). Хостинг – это аренда места на сервере для размещения сайта. Наличие доменного имени и размещение на подходящем хостинге – гарантия того, что ваш сайт будет стабильно виден пользователям Интернета. Как правило, разработчики сайтов владеют информацией о том, у кого лучше купить доменное имя и хостинг. На всякий случай – список уполномоченных регистраторов украинских доменов: http://www.hostmaster.ua/?registrars.

Надеемся, мы смогли объяснить, из чего состоит сайт. Местами объяснение было сложным для понимания. Но сайты - это вообще непростая вещь, поэтому, если хотите иметь свой сайт (или научиться создавать качественные сайты) - читайте, перечитывайте, разбирайтесь и запоминайте. Удачи вам! :)