Ключевые слова: сайт, Web – сайт, информация, глобальная сеть, информационные технологии, Интернет, страница, работа, ресурс.

Популярность службы WWW во многом определяется тем, что пользователи могут не только просматривать сайты, но и создавать собственные. Процесс создания и функционирования Web-сайта иллюстрируется схемой, изображенной на рис.2.

Любой WWW-документ может содержать стилизованный и форматированный текст, графику и гиперсвязи с различными ресурсами Интернет. Web-сайт это: Набор страниц, посвященных определенной тематике и связанных между собой гиперссылками. 

Чтобы реализовать все эти возможности, был разработан специальный язык описания WWW-документов, названный HyperText Markup Language (HTML), то есть, Язык Разметки Гипертекста.

Этапы разработки веб-сайта:

• Анализ и проектирование сайта
• Информационное наполнение сайта
• Креатив, или визуальная составляющая сайта
• Написание кода
• Тестирование
• Публикация
• Поддержка

Каждый веб-ресурс – это набор специальных тегов, скриптов, приложений и так далее. Так вот в обычном блокноте, который есть в каждой операционной системе можно написать эти теги и сохранить документ с расширением *.htm. 

У каждого сайта есть разработчик, который на своем компьютере готовит исходные материалы: графику, медиаданные (звук, анимация), используя соответствующие редакторы, и непосредственно разрабатывает сайт, применяя тот или иной HTML-редактор.

Web – сайт (от англ. website: web — «паутина», «сеть» и site — «место», букв. «место в сети») является сборником документов, страницей для краткости, содержит различную информацию, имеет главную страницу.  Выраженной чертой являются гиперссылки, которые выделяются особым типом шрифта или представляются с помощью изображения. Каждый сайт имеет свой адрес и место хранения в глобальной сети. Найти тот или иной web – сайт можно с помощью доменного имени.

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

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

В принципе вопросы разработки сайтов – предмет отдельной книги, мы же коснемся этой темы лишь в самом общем виде.

Следует отметить, что создать HTML-документ можно с использованием обычного текстового редактора. Например, с помощью входящей в Windows программы Notepad. В данном случае разработчик пишет HTML-код “с нуля”, не используя ни шаблонов, ни подсказок. Несмотря на то что текстовый редактор не предоставляет никаких вспомогательных средств, многие профессионалы утверждают, что используют в качестве HTML-редактора именно Notepad.

Особо следует отметить офисные приложения. Как уже говорилось, все приложения Microsoft Office позволяют сохранить результат работы в HTML-формате. Многие домашние пользователи выбирают Microsoft Word в качестве средства разработки простых Web-страниц. Правда, TML-код в этом случае не будет оптимальным.

Все имеющиеся на рынке HTML-редакторы можно разделить на две большие группы:

• программы, имеющие в своем составе визуальные редакторы (design-based editors) – средства, которые автоматически формируют необходимый HTML-код, позволяя разрабатывать Web-страницы в режиме WYSIWYG (What You See Is What You Get – что вижу, то и получаю);
• программы-редакторы, которые предоставляют редактор и вспомогательные средства для автоматизации написания кода (code-based editors).

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

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

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

Необходимо учитывать, что сегодня многие пользователи (разного уровня подготовки) занялись созданием собственных сайтов и нуждаются в различных по степени сложности продуктах. Одним пользователям требуется продукт “на вырост”, другие хотят создать двухстраничный персональный сайт и больше к этому не возвращаться.

Отметим, наконец, что существуют и компромиссные решения: например, уже упоминавшиеся Microsoft FrontPage и Macromedia Dreamweaver имеют не только визуальные средства, но и весьма развитые редакторы кода. В последней версии FrontPage 2003 реализован даже сдвоенный режим, в котором пользователь может наблюдать, как действия визуального редактора приводят к изменению кода.

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

На сегодняшний день существует ряд средств для создания web-сайтов, например JavaScript, PHP, HTML, CSS, FLASH, MySQL и другие.

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

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

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

– CSS формирует тексты физически, задает цвет и шрифт текста абзацев, цвета заголовков, рамки таблиц и т.д.

CSS позволяет создавать простые анимации без использования JavaScript.

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

 

Велосепидист. Реализован только с помощью CSS

Здесь столько всего происходит, что очень трудно поверить что всё это работает только благодаря HTML и CSS! Сочетание вращающейся анимации и множественных многослойных движений создают иллюзию того, что велосипедист и его велосипед сделаны из желе. Обратите внимание на умное использование БЭМ в классах.

 Сатурн и его Вращающиеся кольца

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

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

Отделение представления Web – страницы от ее структуры среди Web  -дизайнеров считается правилом хорошего тона. Каскадные таблицы стилей не динамичны, но свойства Web – страницы можно динамически менять с помощью языка JavaScript.

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

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

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

– поддержка слоев. Слои – фрагменты HTML, размещаемые на Web – странице путем наложения их друг на друга с точностью до пикселя.

– работа с формами

– отслеживание событий. Событие – действие пользователя или изменение состояния документа.

– создание новых окон

– определение даты и времени

– управление содержимым документа. Добавление любой информации в уже созданный документ и формирование нового документа производится через  метод write().

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

–  другие действия.

PHP. PHP – язык программирования для создания сайтов, автоматизирует работу с сайтом. PHP – скрипт – язык, встраивается в HTML, интерпретируется и выполняется на сервер, а клиенту передается только результат, он не выполняется в браузере. В PHP генерируются динамические страницы, обрабатываются данные из форм, посылаются и получаются сеансы – cookies. Благодаря поддержки баз данных написание Web – приложений с использованием баз данных считается крайне простым. Возможность простой работы с серверами баз данных – заметное достоинство. PHP – внедряемый язык сценариев. Он позволяет разработчикам создавать динамически генерируемые страницы.

MySQL. MySQL довольно мощная и быстрая система управления базами реляционных данных. Поддержку данной системы осуществляет корпорация Oracle и входит в состав таких серверов, как LAMP, AppServ и другие и сама используется как сервер, к которому обращаются удаленные или локальные клиенты. MySQL портирована на большое количество платформ, например Windows95, 98, NT, AIX, OpenServer, Linux, Tru64, HP – UX и другие. Процедуры запросов в СУБД написаны компилируемым языком С, что дает возможность высокой скорости выполнения. MySQL обеспечивает поддержку для ODBC.

AJAX. AJAX – асинхронный JavaScript и XML, является подходом к построению интерактивных пользовательских интерфейсов web – приложений. Он заключается в обмене данными браузера с web – сервером. Так же AJAX является компонентом концепции DHTML и обладает рядом преимуществ: динамически загружаемое содержимое недоступно для поисковиков, экономия трафика, ускорение реакции интерфейса, уменьшение нагрузки на сервер. AJAX не является самостоятельной технологией, а лишь занимает место концепции использования нескольких смежных технологий. И имеет ряд недостатков: плохое поведение на ненадежных соединениях, усложнение проекта, требуется включенный JavaScript в браузер, низкая скорость при грубом программировании, отсутствие интеграции со стандартными инструментами браузера и другие.

HTML, JavaScript и PHP – основа для изучения начинающих программистов.

Будущее сайтостроения остаётся за HTML5 +  CSS 3.

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