Разработка веб-сайтов

Процесс изменения данных веб-страниц происходит в текстовом редакторе. На эту роль может претендовать как специализированная программа (к примеру, Dreamweaver или FrontPage), так и обычный текстовый редактор, инсталлированный в ОС. И если вы используете операционную систему Windows, в качестве программы для редактирования может подойти простой встроенный Блокнот.

В случае если вы занимаетесь самостоятельной разработкой сайтов либо желаете проверить работоспособность приобретенного проекта, вам может пригодиться установка на компьютер популярных интернет-обозревателей. На сегодняшний день наиболее популярны веб-браузеры на движке Chromium типа Google Chrome, а также Safari и Mozilla Firefox.

Кроме того, если существует такая возможность, было бы полезно проверить ещё и то, как выглядит ваш сайт в различных браузерах на различных ОС. По некоторым сведениям среди интернет-пользователей наибольшей популярностью пользуются Microsoft Windows7 / Windows10, MacOS, Linux и другие Unix-подобные системы (Debian, Ubuntu и т.п.). А также было бы весьма профессионально проверить, как будет смотреться ваш сайт на платформах для портативных устройств (PDA, мобильных телефонах, планшетах типа iPAD и т.д.). К таким платформам можно отнести операционные системы Android, iOS, Windows Phone…

При разработке веб-сайта следует учитывать и разрешение экрана пользовательского устройства. Возможны различные варианты разрешения дисплея: 1920x1200, 1920x1080, 1680x1050, 1600x1200, 1440x900, 1366x768, 1280x1024, 1024x768 и др. Но ориентироваться можно на следующие три разрешения: 1366x768, 1280x1024 и 1024x768. Данное трио можно считать наиболее часто используемым среди сёрферов сети Интернет.

А если взять во внимание ещё и тот факт, что в настоящее время большая часть компьютерных пользователей благоволит компактным ноутбукам с диагональю 15.6", то за основное разрешение экрана можно принять 1366x768. Данные числа характеризуют тот объём видимой части экрана, который можно будет занять какой-либо информацией (контентом).

Дело в том, что при проектировании сайта содержимое веб-страниц можно представить двумя способами. Всю информацию можно представить (1) в виде блока с фиксированной шириной либо (2) во весь экран, т.е. масштабируемо. Во втором случае разрешение не играет особой роли, поскольку масштабируемые веб-страницы отображают контент на весь доступный браузеру экран. И в этом случае следует учесть лишь минимально возможное разрешение на пользовательском устройстве.

Несомненно, если брать во внимание различные мобильные телефоны, то минимальным разрешением может стать, например, 240x320 или 640x480. Но для компьютеров подобные небольшие значения слишком малы. И можно разрабатывать свой сайт для минимального значения, к примеру, в 1024 x 768 пикселей (px). Фактически это означает, что при разработке сайта для его содержимого можно задействовать 1024px по горизонтали и 768px по вертикали видимого пространства окна браузера. В реальности же данные значения несколько меньше, поскольку следует учитывать ряд дополнительных ограничений, создаваемых операционной системой или браузером.

Таким образом, в случае с рассматриваемым разрешением экрана 1024x768, для содержимого сайта по ширине будет доступно не 1024px, а данное значение за вычетом границ окна браузера и боковой полосы прокрутки. Итого, в зависимости от типа браузера, при разрешении экрана пользовательского устройства в 1024px по ширине, для контента на сайте будет доступно около 1000px или менее того. Данное число свидетельствует о том, что если, например, вы намерены использовать на веб-странице сайта два соседствующих элемента в одной строке, то их суммарная ширина должна быть строго меньше 1000px.

В противном случае правый элемент может быть принудительно перенесен браузером на следующую строку. Если же вы желаете использовать описанную пару элементов вместе в одной строке, можно зафиксировать ширину либо воспользоваться специальным контейнером <nobr>…</nobr>, запрещающим разрыв строки (см. HTML-теги). Но в случае если ширина содержимого сайта превысит допустимые 1000px, в окне браузера появится нижняя полоса прокрутки. И посетителю будет предложено самостоятельно управлять просмотром содержимого экрана в горизонтальной плоскости, что является определенным моветоном (дурным тоном) в веб-дизайне.

Для вычисления доступного вертикального значения в соответствии с разрешением 1024x768 все обстоит несколько сложнее. Следует учитывать (1) высоту панели задач, если таковая присутствует в ОС пользовательского устройства; (2) высоту строки состояния (или панели дополнений) браузера, расположенной в нижней части окна обозревателя; а также (3) высоту верхней панели браузера, включающей заголовок, различные панели инструментов, навигации, меню, закладки и др. И если суммарную высоту всех описанных элементов вычесть из рассматриваемых 768px, может получиться около 600px.

Приведенный пример наглядно демонстрирует, что обладая монитором с разрешающей способностью в 1024x768 пикселей, при посещении сайта пользователю будет доступно окно лишь приблизительно в 1000x600 от общего пространства. А остальная часть экрана будет занята системными панелями навигации и т.п. Но если вы размещаете на сайте преимущественно текстовую информацию, найденные значения для вас не должны быть принципиальны. Поскольку в случае с большим разрешением экрана текст просто будет растянут. А в случае с меньшим разрешением, текст будет сжат.

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

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

Разумеется, на сегодняшний день существуют сети 3G или Wi-Fi, способные значительно ускорить загрузку данных по сравнению с устаревшими возможностями EDGE/GPRS. Но если на сайте представлены изображения размером по несколько мегабайт (МБ), или сам сайт создан с использованием FLASH-технологии, то веб-страницы такого проекта могут грузиться на портативных устройствах очень и очень долго.

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

И чтобы не отпугнуть ни ценителей стильного дизайна, ни любителей минимализма, при проектировании своего проекта было бы целесообразно разрабатывать две разные версии. Причём, для второй (дополнительной) версии вовсе не обязательно регистрировать отдельный домен. К примеру, если основная версия вашего сайта будет доступна по адресу www.MySite.ru, то другую версию можно сделать доступной по адресу www.MySite.ru/pda, www.MySite.ru/m или www.MySite.ru/lite. Хотя более изящно могла бы выглядеть конструкция вида m.MySite.ru или 0.MySite.ru. Для чего все же пришлось бы регистрировать дополнительный субдомен вашего домена «MySite.ru» (см. Домены).

Но создавать ли отдельные поддомены, проектировать ли сайт с дополнительными внутренними разделами, или же не делать ничего подобного, ограничившись лишь единой основной версией,– решать владельцу сайта придётся самостоятельно. А при выборе подходящего варианта следует руководствоваться привычками и вкусом целевой аудитории вашего проекта, узнать о которых можно при помощи самого обычного опроса. И если ваш проект подразумевает ведение Форума, всегда можно провести соцопрос и узнать общественное мнение. Кроме того, если вам придётся экспериментировать с оформлением сайта или с манерой изложения текстовой информации и т.п., будет полезно знать мнение постоянных посетителей по каждому проведенному изменению в отдельности!

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

Допустим, один из посетителей безумно любит сериал «Star Trek». Другой не упускает ни единой возможности полюбоваться Египетскими Пирамидами. Третий благосклонно относится к автомобилям и т.д… Так почему бы не угодить им всем, предоставив каждому пользователю выбор того стиля оформления, который придётся по вкусу именно ему!?

Реализовать данную опцию достаточно просто. Самым сложным моментом, пожалуй, может стать подборка тех самых тематических вариантов оформления. А как только вы определитесь с количеством предлагаемых Тем, можно будет смело приступать к реализации. Для чего вам понадобятся новые изображения и придётся написать отдельный Скрипт, содержащий необходимые инструкции для подключения различных настроек. Такой скрипт можно написать, например, при помощи языка PHP. Кроме того, в рамках создания данной опции, обязательно следует продумать место хранения пользовательских настроек.

Если ваш интернет-проект предусматривает возможность регистрации пользовательского профиля (аккаунта), то все настройки, связанные с оформлением, можно хранить прямо на сервере, к примеру, в базе данных MySQL. Если же ваш ресурс не предоставляет регистрации, пользовательские настройки можно подключать при помощи специальных Cookie-файлов. Такие файлы могут храниться в течение нескольких лет. И каждый раз, как пользователь с установленным cookie-файлом будет заходить на ваш сайт, ему будет сразу же предлагаться тот вариант оформления, который он ранее сам и выбрал. Разумеется, если вы предварительно предусмотрите подобную опцию в специальном скрипте.

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

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

Итак, дабы начинающим веб-разработчикам было легче усвоить предложенный материал, ещё раз перечислим основные моменты. Для программирования веб-сайта вам пригодятся (1) знание языка HTML; (2) текстовый редактор для записи и правки программного кода (например, Блокнот или Dreamweaver); (3) графический редактор для создания и редактирования изображений (например, Photoshop); (4) веб-сервер для запуска сайта (например, Apache или пакет Denwer); (5) новые версии популярных браузеров (например, MS IE или Edge, Mozilla Firefox, Safari, Google Chrome, Opera, Яндекс.Браузер); а также (6) немного терпения и мастерства!

Кроме того, существует ещё один момент, заслуживающий отдельного внимания. Точнее, таких моментов даже два. Речь идёт (7) о выборе и регистрации Доменного имени для своего веб-сайта, а также (8) о выборе Хостинг-компании, которая будет предоставлять место для хранения сайта…