Элементы Ресурсы
:
x
0
 

Интернет-проекты

ПРАНДИТ
Инфонетекс
Автоспорт
Кулинарния
Эзотерика
Урлинки
Все проекты
Обратная связь Игры Настройки
  Партнёры Каталог
 

Партнёры

Золотой Гуру   Мазаяки Проджект   Регистратор доменов Webnames.ru
 

Содержание

Реклама и PR
IT-системы
Веб-дизайн
Домены
Хостинг
HTML
HTML-теги
Спецсимволы
CSS
CSS-параметры
Термины
Приёмная
Регламент
Настройки
Онлайн-игры
Вебмастерская
Партнёры Карта сайта
Все проекты
 

Веб-дизайн

Проектирование веб-сайтов

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

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

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

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

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

x

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

Кроме того, если существует такая возможность, было бы полезно проверить еще и то, как выглядит Ваш сайт в различных Браузерах на различных ОС. По некоторым сведениям среди Интернет-пользователей наибольшей популярностью пользуются Windows XP, Windows7, MacOS, Unix (и другие *nix-подобные системы; как то Linux, Debian и т.п.). А также было бы весьма профессионально проверить, как будет смотреться Ваш сайт на платформах для портативных устройств (PDA, мобильных телефонах, планшетах типа iPAD и т.д.). К таким платформам можно отнести операционные системы Android, Symbian, iOS, Windows Mobile...

x

При разработке веб-сайта следует учитывать и разрешение экрана монитора потенциального посетителя. Возможны различные варианты разрешения дисплея: 1920x1200, 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>", запрещающим разрыв строки (см. Теги). Но в случае если ширина содержимого сайта превысит допустимые 1000px, в окне браузера появится нижняя полоса прокрутки. И посетителю будет "предложено" самостоятельно управлять просмотром содержимого экрана в горизонтальной плоскости, что является определенным "моветоном" (дурным тоном) в Веб-дизайне.

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

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

x

Ориентируясь в том числе и на пользователей небольших портативных устройств, весьма профессиональным шагом могло бы стать создание отдельного сайта, разработанного специально для компактных размеров телефонов или планшетов. Если же Вы не хотите усложнять себе жизнь или считаете, что среди Вашей целевой аудитории не будет пользователей мобильных устройств, вместо "мобильной" версии сайта дополнительно можно создать, так называемую, «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" (см. Домены).

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

x

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

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

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

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

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

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

x

Также следует упомянуть о том, что если Ваш сайт использует внешние модули (например, PHP-скрипты), то в зависимости от ОС Вам может понадобиться установить на компьютер Веб-сервер (к примеру, Apache). Можно сказать, что данное программное средство имитирует работу веб-сайта на пользовательском компьютере, как если бы этот сайт находился в сети Интернет. Также Веб-сервер позволяет выполнять внешне подключаемые дополнительные модули на сайте. Но для реализации этой возможности может потребоваться установка библиотек PHP и MySQL. Если же Ваш сайт не содержит сторонних скриптов и включает в себя лишь HTML-страницы вида "index.html" и/или "default.htm", в таком случае устанавливать Веб-сервер вовсе не обязательно.

Предположим, на Вашем проекте есть страница вида www.SiteNo1.ru/mail.php, на которой любой посетитель может отправить письмо Администрации сайта. Чтобы проверить работоспособность PHP-модуля "mail.php", нужен интерпретатор PHP. А если при отправке пользовательского сообщение, оно не удаляется бесследно, а записывается в Базу данных, необходимо еще и наличие библиотек MySQL.

Таким образом, чтобы эмулировать полноценную работу веб-сайта на своем компьютере, может потребоваться установка специализированного программного обеспечения (ПО). А для стабильной работы сайта Вам придется еще и провести настройку данного ПО. Если же Вы не планируете профессионально заниматься программированием веб-страниц, нет необходимости вникать во все тонкости процесса настройки Веб-сервера. Хотя подобные навыки Вам бы не помешали! Но для новичков, не способных провести самостоятельную установку и настройку Веб-сервера, существует, так называемый, "джентльменский пакет" Denwer с уже сконфигурированным Веб-сервером в комплекте.

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

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

x
A
 

Социальные Медиа

Мы в соцсетях:
Поделиться с друзьями: