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

Гипертекст - это текст, связанный при помощи ссылок (гиперссылок) с другими текстами.

Гиперссылка - это текст или рисунок, содержащий скрытый адрес, при нажатии происходит переход на другую Web-страницу

Сайт (Web-сайт, ресурс) – это место в интернете, которое определяется своим адресом (URL), имеет своего владельца и состоит из Web-страниц, которые воспринимаются как единое целое, то есть  совокупность тематически связанных между собой.

Web - страница - это отдельный комбинированный документ сети Internet, который может содержать текст, графику, анимацию, звуковые и другие объекты. Хранится в файле *.html.

Web-сайт хранится на Web-сервере - это компьютер в сети Internet, хранящий Web-страницы и соответствующее ПО,  для работы с ними.

Создание сайтов - составной процесс, состоящий из нескольких этапов:

1. разработка дизайна,

2. вёрстка,

3. программирование,

4. безопасность.

 

Сопровождение сайтов:

• это техническая поддержка сайта;

• помощь в обновлении контента;

• внесение корректировок в работу ресурса.

 

Методы создания и сопровождения сайтов:

•     вручную на языкe HTML (в БЛОКНОТе);

•     c помощью редакторов сайтов (HEFS, DreamWeaver и др.);

•     c помощью Конструктора сайтов на основе готового шаблона (ucoz.ru, narod.ru и др.);

•     с помощью систем управления сайтов (Joomla, 1С Битрикс и др.).

1. Разработка дизайна.

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

Разработка сайтов по системе front-end и back-end подразумевает иерархическое разделение процесса создания ресурса на две части, на разработку пользовательского интерфеса –(фронтэнда) и его программно-административной части (бэкэнда).

Front-end разработка – это работа по созданию публичной части сайта, с которой непосредственно контактирует пользователь и функционала который обычно обыгрывается на клиентской стороне (в браузере).

К аспектам фронтэнд разработки можно отнести создание дизайн-макета сайта, верстку сайтов и шаблонов для CMS, а также привязку к пользовательскому интерфейсу специальных скриптов, отвечающих за визуализацию и web-анимацию.

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

Back-end разработка – это процесс программирования сайта и наполнения его функционалом. Создание ядра сайта, разработка платформы сайта, наполнение его основным функционалом и создание административной зоны – это и есть бэкэнд разработка.

Бэкэнд производит обработку пользовательской информации полученной из front-офиса, и возвращает front-end’у результат в понятной ему форме.

Проще говоря, фронтэнд передает информацию и команды от пользователя в бэкэнд, а тот в свою очередь производит их обработку. Или если уж совсем просто, то - Front-end создается для посетителя сайта, а Back-end для его администратора.

При разработке дизайна сайта необходима структура сайта, но также знать из каких частей состоит веб-страница.

Основные элементы и их наполняемость:

•                   Title (тайтл) он же заголовок страницы, его можно увидеть в разных браузерах либо в самом верху страницы (в так называемом тайтл-баре), либо на панели закладок. Тут размещается собственно сам заголовок, иконка сайта (он же Favicon) и его название.

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

•                   Content (основная часть сайта, контентная часть, содержание). Как раз таки и является содержательной частью сайта, здесь размещаются сами статьи и записи. Располагается содержательная часть между шапкой и подвалом сверху и снизу соответственно. Содержимым могут быть: текст, изображения, видео, другие файлы, Flash. С чем можно спутать содержимое? С дизайном. Однако при разработке дизайна решается вопрос «как разместить», а не «что разместить». Если говорить совсем просто - то зачастую на страницах присутствуют элементы дизайнерского каркаса: шапка, подвал, правая колонка. А также способы отображения текстов, ссылок и прочего. Это в каком-то приближении можно назвать дизайном. Всё остальное - это содержимое, контент. Написать текст для сайта может почти каждый. Но гораздо более выгодным оказывается написание оптимизированных текстов. Этим занимается SEO-копирайтер. Он не просто пишет осмысленный текст, он помещает в него ключевые слова, состав и количество которых подбираются индивидуально. Это делается, чтобы поисковые машины давали сайту более высокую оценку при поиске по данным ключевым словам. И вообще - чтобы поисковики чётко понимали текст.

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

•                   Sidebar (сайдбар боковая панель). В боковой панели могут размещаться различные элементы навигации (чаще список статей или разделов), виджеты (Wordpress) и модули (Joomla). Нередко в сайдбаре размещают рекламные модули (баннерную или контекстную рекламу). Также здесь порой можно обнаружить формы подписки на рассылки и RSS, информеры и пузомерки, кнопки социальных сетей. Боковая панель может находиться как справа, так и слева от контентной части. Нередки случаи наличия сайдбаров с обеих сторон контентной части или же двойных сайдбаров.

 

2. Вёрстка (основные теги)

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

Hyper Text Markup Language (HTML) язык гипертекстовой разметки разработан специально для веба. Язык состоит из специальных блоков - весь этот код можно увидеть, открыв любую веб-страницу и посмотрев её исходный код. Язык сам по себе не тяжелый и легко изучается начинающими веб-мастерами, а также является основой, вокруг которой вращается весь веб. Именно код HTML передается в браузер, и уже из него по определенным правилам обработки тегов отрисовывается страница.

Операторы (команды) языка HTML называются тегами. Общий вид записи тега:

<Тег>Фрагмент страницы </Тег>

Тэг - элемент HTML, представляющий из себя текст, заключенный в угловые скобки <>.

Тэг является активным элементом, изменяющим представление следующей за ним информации.

Обычно используются два тэга - открывающий(<тэг>) и закрывающий (</тэг>).

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

 

3. Програмирование

Рассуждая о том, из чего состоит сайт, невозможно обойти вопрос создание программой части. Программирование зачастую занимает 50-70% работы по сайту. Программная часть сайта – очень широкое понятие. Если на сайте присутствуют визуальные эффекты, значит, их кто-то разработал, запрограммировал. Если при заполнении формы вам сообщают, что вы вводите неправильное значение, значит, кто-то запрограммировал и это. Когда сайт имеет большое количество веб-страниц, то управлять им  и изменять HTML файлов долгая и рутинная работа. Поэтому были придуманы языки програмирования, которые позволили автоматизировать процесс управления страницами. Лидером среди всех языков стал PHP. Поначалу сайт представлял собой нарезки HTML кода с вставками PHP кода, но сейчас это уже продвинулось далеко вперед. Для создания динамических элементов страницы используются языки программирования, такие как Java, JavaScript и ActionScript.

Java – язык программирования. Программы на Java транслируются и выполняются специальным программным обеспечением, которое называется «виртуальная машина Java». Код Java довольно редко встречается на Web-сайт ах. Но если он всё-таки встретился, для его выполнения потребуется установить на ваш компьютер виртуальную машину 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, вы можете сделать Web-сайт  динамичным, интерактивным и отлично оформленным. Однако если сильно увлечься применением данных технологий, могут возникнуть проблемы с загрузкой страниц. Более того, скажем честно: многие пользователи не любят слишком «красивую» Flash-анимацию за то, что она раздражает зрение и рассеивает внимание. Всё хорошо в меру.

Базы данных

Когда веб- сайт большой и имеет много страниц, информацию, из которой он состоит, проще хранить в базах данных.Можно, конечно, все это хранить и в отдельных файлах, но это приведет к ухудшению безопасности веб-сайта и создаст много проблем. А база данных позволяет манипулировать данными . В качестве системы управления базами данных используется MySgl, который отлично работает в паре с языком програмирования PHP. Так программные скрипты, которые изменяются только в процессе разработки, хранятся в файлах, а данные, которые постоянно добовляются, изменяются и редактируются, хранятся в базе данных.   Помимо этого в базах могут храниться данные о пользователях сайта, списки email-адресов для рассылки и много другой информации.

 

Доменное имя

Доменное имя, попросту говоря, — это адрес вашего сайта, оно указывает браузеру на то, где находится сайт, то есть за доменом закреплен определенный IP-адрес сервера, на котором будет размещен ваш сайт. Конечно, адрес можно изменять в том случае, если нужно перенести сайт на другой сервер – при этом название домена не изменится.

 

Хостинг

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

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

 

Взаимодействие всех элементов

Технология создания всех элементов предусматривает, что пользователь, открывая браузер (веб-клиента), вводит адрес сайта, то есть доменное имя. Доменное имя, в свою очередь, указывает браузеру, где находится сайт, и тот посылает на сервер хостинга(компьютер и установленное на нём программное обеспечение) который работает в режиме реального времени) запрос на выдачу сайта. Все страницы сайта, которые можно посмотреть с помощью браузера, хранятся на сервере либо создаются им динамически. Веб-сервер хостинга, встретив такой запрос, смотрит, на чем написан сайт, если это просто HTML файл, то он отдает его браузеру, если же он написан на языке программирования, начинается процесс формирования страницы. Дальше проверяется, на выдачу, какой страницы пришел запрос, берется HTML шаблон сайта и заполняется данными, вытянутыми с базы данных, которые соответствуют запрашиваемой странице. После того, как страница сформировалась, она отправляет браузеру, тот внимательно начинает ее разбирать и догружать картинки, файлы стилей, файлы Java Script и файлы Flash, если такие имеются на выгруженной странице, после чего идет отображение готовой страницы. Если пользователь переходит по ссылке на другую страницу сайта, то процесс  повторяется, но заполняется страница уже теми данными, которые ей отвечают.

 

4.  Безопасность

Web-сайт постоянно подвергается риску быть взломанным. Большинство взломов происходит не с целью украсть ваши данные или испортить web-сайт, а для того, чтобы использовать сайт для рассылки спама или производить какие-либо незаконные действия. Написано множество скриптов, которые бегают по Интернету в попытке найти сайты с известными проблемами безопасности. Ниже приводится 10 лучших советов, которые помогут сохранить ваш сайт в безопасности:

•        Регулярно обновляйте программное обеспечение

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

Об обновлении серверного программного обеспечения должна беспокоиться хостинг компания, так что вам, возможно, не стоит беспокоиться об этом.

Если вы используете программное обеспечение сторонних разработчиков, например, CMS, то вы должны убедиться, что версия актуальна на текущий момент. У большинства разработчиков есть RSS лента с описанием всех вопросов безопасности. WordPress и многие другие CMS уведомляют о доступных новых версиях системы.

•    SQL инъекции — атака, когда хакер использует поле web-формы или параметры URL строки с целью получения и манипулирования данными, хранящимися в базе данных. При использовании обычных SQL запросов можно вставить вредоносный код, который может изменить таблицы, получить информацию или удалить данные. Вы можете легко предотвратить это, если будете всегда использовать параметризованные запросы.

•  Cross Site Scripting — атака, в которой злоумышленник пытается запустить вредоносный код для посетителей сайта. Нужно убедиться, что вы всегда проверяете данные, кодируете, обрезаете или удаляете все сторонние HTML вставки.

       Сообщения об ошибках

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

       Проверки на стороне сервера, проверки в формах.

Проверка данных должны быть, как в браузере, так и на стороне сервера. В браузере можно отловить простые ошибки и выделить поля, в которых допущены ошибки. Например, проверить на пустоту или на ввод только цифр. Однако, эти проверки могут быть легко пропущены и на сервер могут отправиться непроверенные данные. Если сервер не будет проверять входные данные, то это может привести к нежелательным последствиям.

• Пароли

Каждый знает, что нужно использовать комплексные пароли, в которых содержаться и буквы и цифры. Это критично не только для паролей в администраторскую зону, но и для пользовательских профилей.

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

Пароль должен храниться в зашифрованном виде. Можно использовать такие алгоритмы, как SHA. Во время авторизации будут сравниваться только зашифрованные данные паролей. Для дополнительной безопасности можно добавлять «соль» в пароль. Для каждого пароля должна быть своя «соль».

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

К счастью, во многих CMS уже встроены эти функции безопасности, хотя в некоторых, возможно, понадобится дополнительный плагин, который будет добавлять «соль» к паролям.

•  Загрузка файлов

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

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

Так что можно сделать, чтобы предотвратить это? В конечном итоге мы хотим, чтобы пользователи не могли запустить файлы, которые они загружают. Не рекомендуется полагаться на расширение файлов. Нередки случаи, когда на сервер поступал файл image.jpg.php.

Можно переименовать загружаемый файл и поставить ему правильное расширение или поставить файлу права CHMOD 0666 (файл не сможет быть выполнен). Можно создать .htaccess файл, который предотвратит обращение к файлам с двойным расширением.

•  Безопасность сервера

Если вы сами настраиваете свой сервер, то необходимо знать некоторые вещи.

Убедитесь, что у вас установлен firewall и блокируются все несущественные порты. Если возможно, установите DMZ (демилитаризованная зона), обеспечивающую доступ к порту 80 и 443.

Для загрузки файлов на сервер, используйте только безопасные методы, такие как SFTP или SSH.

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

Наконец, не стоит забывать об ограничении физического доступа к серверу.

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

•  Средства безопасности

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

Есть много коммерческих и бесплатных продуктов, чтобы помочь вам в этом. Скрипты будут пытаться взломать ваш сайт, используя некоторые из предыдущих упомянутых методов, таких как SQL-инъекции.

Несколько бесплатных инструментов, которые стоит посмотреть:

·         Netsparker (Free Community Edition, доступна пробная версия). Хорошо подходит для тестирования SQL-инъекции и XSS.

·         OpenVAS. Хорошо подходит для тестирования известных уязвимостей, в настоящее время более 25 000. Но инструмент сложен в настройке и требует OpenVAS на сервере, который работает только на * Nix.

 

При получении результатов в первую очередь нужно сосредоточиться на важных вопросах.

Если вы хотите пойти дальше, можно вручную подвергнуть под угрозу ваш сайт путем изменения POST / GET значений.

Еще стоит попробовать протестировать формы, изменить значение POST, чтобы попытаться передать код для выполнения XSS или загрузить скрипт на стороне сервера.

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