Разработка веб-сайтов
Веб-программирование (или веб-дизайн) – способ представления информации в электронном виде, доступной к просмотру через браузеры. Проектировать веб-сайты можно при помощи HTML, широко распространенного языка веб-программирования. Основы веб-дизайна сводятся к осознанию структуры HTML-документа. И если понять, как именно строятся веб-документы, можно будет начать создавать свои собственные проекты.
Для разработки веб-сайтов могут быть полезны (1) текстовый и графический редактор, (2) навыки редактирования (вёрстки) веб-страниц и (3) установка свежих версий наиболее популярных браузеров. В том же случае, если вы не планируете заниматься самостоятельной разработкой, а желаете заказать сайт в профессиональной веб-студии, всё, что вам предстоит,– убедиться в работоспособности готового продукта.
Но с течением времени может потребоваться изменить некоторые данные (контент) на сайте. Например, обновить сведения о контактной информации. Либо закрыть один из разделов сайта, а вместо него создать новый. И если на сайте была предусмотрена Система управления, то внести все необходимые изменения не составит особого труда. Но если подобная Система отсутствует, то всякий раз, когда нужно будет совершать редактирование сайта, придётся обращаться за помощью к специалистам. И вряд ли подобные услуги будут оказываться безвозмездно!
Следовательно, для оказания услуг по сопровождению веб-проекта не помешал бы штатный программист. Но если вы изначально нацелены на минимизацию расходов, сопровождение своего сайта можно попытаться осуществлять самостоятельно. Для этого необходимо получить хотя бы поверхностные знания о веб-дизайне (см. HTML).
Для более полного представления о веб-разработке ознакомьтесь с лайфхаками нашего информационного партнёра Мазаяки! |
||
Процесс изменения данных веб-страниц происходит в текстовом редакторе. На эту роль может претендовать как специализированная программа (к примеру, Dreamweaver или FrontPage), так и обычный текстовый редактор, инсталлированный в ОС. И если вы используете операционную систему Windows, в качестве программы для редактирования может подойти простой встроенный Блокнот.
В случае если вы занимаетесь самостоятельной разработкой сайтов либо желаете проверить работоспособность приобретенного проекта, вам может пригодиться установка на компьютер популярных интернет-обозревателей. На сегодняшний день наиболее популярны веб-браузеры на движке Chromium типа Google Chrome, а также Safari и Mozilla Firefox.
Кроме того, если существует такая возможность, было бы полезно проверить ещё и то, как выглядит ваш сайт в различных браузерах на различных ОС. По некоторым сведениям среди интернет-пользователей наибольшей популярностью пользуются Microsoft Windows7 / Windows10, MacOS, Linux и другие
При разработке веб-сайта следует учитывать и разрешение экрана пользовательского устройства. Возможны различные варианты разрешения дисплея: 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.
В противном случае правый элемент может быть принудительно перенесен браузером на следующую строку. Если же вы желаете использовать описанную пару элементов вместе в одной строке, можно зафиксировать ширину либо воспользоваться специальным контейнером
Для вычисления доступного вертикального значения в соответствии с разрешением 1024x768 все обстоит несколько сложнее. Следует учитывать (1) высоту панели задач, если таковая присутствует в ОС пользовательского устройства; (2) высоту строки состояния (или панели дополнений) браузера, расположенной в нижней части окна обозревателя; а также (3) высоту верхней панели браузера, включающей заголовок, различные панели инструментов, навигации, меню, закладки и др. И если суммарную высоту всех описанных элементов вычесть из рассматриваемых 768px, может получиться около 600px.
Приведенный пример наглядно демонстрирует, что обладая монитором с разрешающей способностью в 1024x768 пикселей, при посещении сайта пользователю будет доступно окно лишь приблизительно в 1000x600 от общего пространства. А остальная часть экрана будет занята системными панелями навигации и т.п. Но если вы размещаете на сайте преимущественно текстовую информацию, найденные значения для вас не должны быть принципиальны. Поскольку в случае с большим разрешением экрана текст просто будет растянут. А в случае с меньшим разрешением, текст будет сжат.
Ориентируясь в том числе и на пользователей небольших портативных устройств, весьма профессиональным шагом могло бы стать создание отдельного сайта, разработанного специально для компактных размеров телефонов или планшетов. Если же вы не хотите усложнять себе жизнь или считаете, что среди вашей целевой аудитории не будет пользователей мобильных устройств, вместо мобильной версии сайта дополнительно можно создать, так называемую,
Не смотря на то, что браузеры мобильных телефонов и/или портативных устройств способны преобразовывать веб-страницы в компактный вид самостоятельно, наличие Lite-версии могло бы существенно облегчить данный процесс. Особенно это касается проектов, на страницах которых в большом количестве представлены различные изображения. И особенно это касается изображений большого размера.
Разумеется, на сегодняшний день существуют сети 3G или Wi-Fi, способные значительно ускорить загрузку данных по сравнению с устаревшими возможностями EDGE/GPRS. Но если на сайте представлены изображения размером по несколько мегабайт (МБ), или сам сайт создан с использованием FLASH-технологии, то веб-страницы такого проекта могут грузиться на портативных устройствах очень и очень долго.
В связи с тем, что высокоскоростной Интернет доступен не всем пользователям, при проектировании сайтов довольно-таки часто создаются отдельные лёгкие версии с минимальным набором функций. Подобные lite-версии нацелены на посетителей, которые по тем или иным причинам используют Интернет с низкой скоростью доступа. А также lite-версии могут притись по вкусу любителям минимализма, которых раздражает перегрузка страниц веб-сайта избыточными и ненужными на их взгляд элементами дизайна и т.п. Поскольку, по большому счету, сайты создаются для хранения и передачи информации определенного рода. И основная роль сайта донести до конечного пользователя ту информацию в полном объёме, необходимом для ее восприятия. Собственно, по этой причине для некоторых посетителей сайта дизайн не играет основной роли.
И чтобы не отпугнуть ни ценителей стильного дизайна, ни любителей минимализма, при проектировании своего проекта было бы целесообразно разрабатывать две разные версии. Причём, для второй (дополнительной) версии вовсе не обязательно регистрировать отдельный домен. К примеру, если основная версия вашего сайта будет доступна по адресу www.MySite.ru, то другую версию можно сделать доступной по адресу
Но создавать ли отдельные поддомены, проектировать ли сайт с дополнительными внутренними разделами, или же не делать ничего подобного, ограничившись лишь единой основной версией,– решать владельцу сайта придётся самостоятельно. А при выборе подходящего варианта следует руководствоваться привычками и вкусом целевой аудитории вашего проекта, узнать о которых можно при помощи самого обычного опроса. И если ваш проект подразумевает ведение Форума, всегда можно провести соцопрос и узнать общественное мнение. Кроме того, если вам придётся экспериментировать с оформлением сайта или с манерой изложения текстовой информации и т.п., будет полезно знать мнение постоянных посетителей по каждому проведенному изменению в отдельности!
Создание мобильной или lite-версии для веб-сайта не является единственно возможным решением, нацеленным на удовлетворение разнообразных потребностей взыскательного посетителя. В дополнение к данному способу либо вместо него существует возможность внедрения в проект ещё и альтернативных Тем оформления.
Допустим, один из посетителей безумно любит сериал «Star Trek». Другой не упускает ни единой возможности полюбоваться Египетскими Пирамидами. Третий благосклонно относится к автомобилям и т.д… Так почему бы не угодить им всем, предоставив каждому пользователю выбор того стиля оформления, который придётся по вкусу именно ему!?
Реализовать данную опцию достаточно просто. Самым сложным моментом, пожалуй, может стать подборка тех самых тематических вариантов оформления. А как только вы определитесь с количеством предлагаемых Тем, можно будет смело приступать к реализации. Для чего вам понадобятся новые изображения и придётся написать отдельный Скрипт, содержащий необходимые инструкции для подключения различных настроек. Такой скрипт можно написать, например, при помощи языка PHP. Кроме того, в рамках создания данной опции, обязательно следует продумать место хранения пользовательских настроек.
Если ваш интернет-проект предусматривает возможность регистрации пользовательского профиля (аккаунта), то все настройки, связанные с оформлением, можно хранить прямо на сервере, к примеру, в базе данных MySQL. Если же ваш ресурс не предоставляет регистрации, пользовательские настройки можно подключать при помощи специальных Cookie-файлов. Такие файлы могут храниться в течение нескольких лет. И каждый раз, как пользователь с установленным cookie-файлом будет заходить на ваш сайт, ему будет сразу же предлагаться тот вариант оформления, который он ранее сам и выбрал. Разумеется, если вы предварительно предусмотрите подобную опцию в специальном скрипте.
Но если на пользовательском устройстве отключена поддержка файлов cookie, а заводить отдельную базу данных для настроек посетителей вы не намереваетесь, предоставить выбор стилей оформления может оказаться несколько проблематично. В этом случае могут помочь, так называемые, «Сеансы». По сути это те же куки-файлы, но с минимально допустимым сроком годности. И даже в том случае, если у посетителя будет выставлен высокий уровень безопасности в его браузере и заблокирован прием файлов cookie, поддержка Сеансов может осуществляться.
Сеансовые cookie позволяют хранить пользовательские настройки на время лишь одного сеанса. Но в следующий раз, когда тот же посетитель зайдёт на ваш сайт, ему вновь будет предложен стандартный стиль оформления, используемый по умолчанию. И пользователю снова придётся настраивать сайт по своему вкусу. Во избежание подобной ситуации можно попытаться объяснить посетителям, что файлы cookie нужны в первую очередь им самим. И что вы не намереваетесь использовать cookie для каких-либо предосудительных действий. Безусловно, если вы действительно не имеете злого умысла!
Также следует упомянуть о том, что если ваш сайт использует внешние модули (например, PHP-скрипты), то в зависимости от ОС вам может понадобиться установить на компьютер веб-сервер (к примеру, Apache). Можно сказать, что данное программное средство имитирует работу веб-сайта на пользовательском компьютере, как если бы этот сайт находился в сети Интернет. Также веб-сервер позволяет выполнять внешне подключаемые дополнительные модули на сайте. Но для реализации этой возможности может потребоваться установка библиотек PHP и MySQL. Если же ваш сайт не содержит сторонних скриптов и включает в себя лишь HTML-страницы вида «index.html» и/или «default.htm», в таком случае устанавливать веб-сервер вовсе не обязательно.
Предположим, на вашем проекте есть страница вида
Таким образом, чтобы эмулировать полноценную работу веб-сайта на своем компьютере, может потребоваться установка специализированного программного обеспечения (ПО). А для стабильной работы сайта вам придётся ещё и провести настройку данного ПО. Если же вы не планируете профессионально заниматься программированием веб-страниц, нет необходимости вникать во все тонкости процесса настройки веб-сервера. Хотя подобные навыки вам бы не помешали! Но для новичков, не способных провести самостоятельную установку и настройку веб-сервера, существует, так называемый, джентльменский пакет Denwer с уже сконфигурированным веб-сервером в комплекте.
Итак, дабы начинающим веб-разработчикам было легче усвоить предложенный материал, ещё раз перечислим основные моменты. Для программирования веб-сайта вам пригодятся
Кроме того, существует ещё один момент, заслуживающий отдельного внимания. Точнее, таких моментов даже два. Речь идёт