Структура веб: Html/Структура веб-страницы — Викиверситет – Создание веб-сайта. Курс молодого бойца / Habr

Содержание

Раздел 2. Основы сайтостроения.

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

2.1. Содержание, структура и дизайн web-сайта.

При создании web-сайта основное внимание должно быть уделено таким его составляющим как содержание (контент), структура (навигация) и дизайн (оформление).

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

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

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

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

  • Развлекательные, т.е. содержащие информацию развлекательного характера – игры, картинки, гороскопы и т.п.

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

Структура (навигационная схема) создаваемого web-сайта зависит от того, как связаны между собой его страницы. Различают следующие варианты структуры.

  • Линейная, при которой осуществляется последовательный переход от одной web-страницы к другой.

  • Иерархическая, при которой осуществляются переходы по ветвям древовидной структуры, в соответствии с логикой.

  • “Каждая к каждой” при которой с любой web-страницы можно перейти на любую другую. Приобретает в Интернет все большую популярность.

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

Выбор структуры web-сайта зависит от его функционального назначения, числа страниц и того, насколько легко пользователи могут получить нужную информацию. За счет рационального выбора схемы навигации можно исключить ситуации, при которых посетитель сайта “запутывается” в его страницах.

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

GIF (Graphic Interchange Format) – формат графического обмена. GIF-файлы – это файлы растровых изображений. При сохранении изображения в этом формате количество используемых цветов не должно превышать 256 (иначе говоря, глубина цвета до 8 бит на пиксель ). Графическая информация при сохранении GIF-файла сжимается при помощи специальных алгоритмов сжатия с минимальными потерями информации. Этот формат может содержать несколько изображений в одном файле и используется для создания прозрачной и анимированной графики. Обычно этот формат используют для небольших изображений, содержащих области однородной окраски с четкими границами.

JPEG (Joint Photographic Experts Group) – объединенная группа экспертов в фотографии. JPEG – файлы представляют собой растровые изображения, в которых может быть использовано до 16.7 млн. цветов. При сохранении JPEG-файла происходит сжатие информации, которое сопровождается потерями информации. Т.е. при каждом сохранении такого файла качество изображения ухудшается. Обычно используется для сохранения фотографий, карт и других изображений с тонкими цветовыми переходами.

PNG (Portable Network Graphics) – переносимая сетевая графика. PNG (произносится «Пинг») – растровый формат, предназначенный для хранения и передачи растровых изображений: черно-белых и альфа данных – до 16 бит, а цветных – до 48 бит (truecolor). Он использует прогрессивный метод сжатия без потерь, позволяет сохранять в файле палитру, текстовую информацию и обеспечивает возможность задания степени прозрачности от нулевой до 100% для каждой точки изображения. Формат PNG не поддерживается устаревшими браузерами.

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

При разработке web-сайта рекомендуется.

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

  • Ограничивать длину страниц 3-4 экранами, первая страница — 1 экран.

  • При необходимости со страниц содержащих основную информацию организовывать ссылки на страницы с более подробной информацией.

  • На всех страницах сайта иметь ссылку на титульную страницу.

  • Оформлять все страницы в едином стиле (если сайт очень большой, то придерживаться одного стиля в каждом разделе).

  • Не загружать страницы графикой. При размещении на сайте графического файла большого объема, организовывать на него гиперссылку с указанием размера.

Выделяют следующие этапы разработки web-сайта:

Планирование. На этом этапе должны быть получены ответы на следующие вопросы: цель создания web-сайта, аудитория, на которую он рассчитан, какая информация будет размещена. Целесообразно познакомиться с сайтами, тематика которых близка к тематике создаваемого web-сайта, с тем, чтобы избежать ошибок или поучиться на положительных примерах. Определяются категории, подразделы сайта, количество страниц в каждом разделе, подразделе. Разрабатывается структурная (навигационная) схема сайта.

Реализация. На этом этапе проводится подготовка текстового и графического материала (печать, сканирование, оптимизация). Материал разбивается по файлам в соответствии со структурой. Организовываются ссылки между web-страницами сайта. Разрабатывается дизайн. На этом этапе определяются: фон, на котором будет расположена информация, цвет текста, цвет гипертекстовых ссылок, знаки навигации, выделение разделов графикой или текстовыми ссылками, представление фотографического материала.

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

Публикация. Размещение сайта в Internet. Для этого необходимо разместить все файлы web-сайта на web-сервере, предоставляющем такие услуги.

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

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

НОУ ИНТУИТ | Лекция | Принципы работы и структура Web-приложений на основе ASP.NET

Аннотация: Рассматривается архитектура современных Web-приложений, взаимодействие клиентской и серверной частей таких приложений, принципы их организации в среде ASP.NET

Цель лекции: познакомиться с архитектурой и особенностями организации Web-приложений, особенностями архитектуры ASP.NET и .NET Framework, принципами взаимодействия клиента и сервера при выполнении Web-приложения на основе ASP.NET.

Архитектура Web-приложений

Web-приложения представляют собой особый тип программ, построенных по архитектуре «клиент-сервер». Особенность их заключается в том, что само Web-приложение находится и выполняется на сервере — клиент при этом получает только результаты работы. Работа приложения основывается на получении запросов от пользователя (клиента), их обработке и выдачи результата. Передача запросов и результатов их обработки происходит через Интернет ( рис. 1.1).


Рис. 1.1.
Архитектура Web-приложения

Отображением результатов запросов, а также приемом данных от клиента и их передачей на сервер обычно занимается специальное приложение — браузер (Internet Explorer, Mozilla, Opera и т. д.). Как известно, одной из функций браузера является отображение данных, полученных из Интернета, в виде страницы, описанной на языке HTML, следовательно, результат, передаваемый сервером клиенту, должен быть представлен на этом языке.

На стороне сервера Web-приложение выполняется специальным программным обеспечением (Web-сервером), который и принимает запросы клиентов, обрабатывает их, формирует ответ в виде страницы, описанной на языке HTML, и передает его клиенту. Одним из таких Web-серверов является Internet Information Services (IIS) компании Microsoft. Это единственный Web-сервер, который способен выполнять Web-приложения, созданные с использованием технологии ASP.NET.

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

За счет наличия исполняемой части, Web-приложения способны выполнять практически те же операции, что и обычные Windows-приложения, с тем лишь ограничением, что код исполняется на сервере, в качестве интерфейса системы выступает браузер, а в качестве среды, посредством которой происходит обмен данными, — Интернет. К наиболее типичным операциям, выполняемым Web-приложениями, относятся:

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

Как разработать дизайн и код персонального веб-сайта / Habr

Привет, Хабр! представляю вашему вниманию перевод статьи «How to Design and Code a Personal Website» автора Ryan Smith.

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


Зачем проектировать самостоятельно?


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

1. Выделяться из общей массы

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

2. Практикуйтесь в своем мастерстве
  • Разработка поможет вам применить на практике алгоритмы, принципы разработки, инструменты, HTML и CSS. Вам будет удобнее разрабатывать пользовательские интерфейсы и выводить их в Интернет.

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

4. Развивать профессиональные навыки
  • В роли веб-разработчика вам, возможно, не придется реализовывать весь дизайн сайта с нуля, но вы должны быть в состоянии сделать достойный внешний вид интерфейса, который соответствует существующим дизайнам. Быть «полнофункциональным разработчиком» часто означает владеть внутренним языком или фреймворком JavaScript, одновременно имея возможность работать с дизайном, HTML и CSS. В итоге, работа выполняется, но результат может не быть эстетически привлекательным, и может быть несовместимым с остальными приложениями или быть недоступным на некоторых устройствах. Полнофункциональные разработчики должны обладать некоторыми базовыми знаниями в области проектирования и суметь обучить пользователя.

5. Это может быть весело
  • Создание того, чем вы гордитесь, — это полезный опыт. Это доставит удовольствие, если вы найдете достаточно времени для практики. Вам не обязательно быть художником, чтобы получать от этого удовлетворение.

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

Создание каркаса модели


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

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

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

Применяйте визуальный дизайн


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

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

Добавление разделов и содержимого хранилища

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

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

Обновление графики

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

Добавьте цвет

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

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

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

После того, как вы добавили цвет, переходите к обзору общего дизайна и внесению изменений.

Уточнение

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

— Выглядит тесновато?

  • Увеличьте отступы и поля

— Трудно читать текст?
  • Выберите более четкий шрифт или увеличьте его размер
  • Увеличьте цветовой контраст между фоном и передним планом

— Трудно разобрать содержимое?
  • Добавьте заголовки с более крупным шрифтом
  • Добавьте больше интервалов между заголовками и абзацами

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

Как только вы закончите разработку дизайна, вы можете начать переводить его в код.

Создание HTML–структуры


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

Стилизуйте его с помощью CSS


Поскольку HTML-документы добавляются сверху вниз, вы можете начать с верхней части документа и работать вниз. Используя созданный вами дизайн, постарайтесь скопировать его как можно ближе в HTML & CSS.

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

Расположение секций и элементов

Я рекомендую сконцентрироваться на компоновке элементов и сохранить эстетические аспекты на более поздний срок. Если вы расставляете и стилизуете элементы одновременно, это может привести к метанию вперед и назад, что может приостановить ваш прогресс. Примером может служить раскладка навигационной панели при попытке задать тип и размеры шрифтов. Возможно, у вас все удобно скомпоновано, но затем настройка шрифта все сбрасывает. Это может заставить вас изменить панель навигации, чтобы она снова подошла по размеру. Но что если навигационная панель теперь слишком высокая? Вы можете изменять это несколько раз, что может привести к огорчению. Вместо этого я рекомендую в первую очередь сконцентрироваться на компоновке элементов и попытаться заставить их работать с различными размерами контента. Это может потребовать метод проб и ошибок в CSS, но чтобы убедиться, что ваши элементы имеют достаточную ширину, для удобного добавления в него содержимого.

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

Добавьте визуальные стили

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

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

Когда ваш проект реализован, все готово! Теперь вы можете решить, что хотите с ним делать.

Следующие шаги


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

Заключение


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

Структура веб-сайтов, разновидности веб-страниц. Размещение сайта на сервере хостинга

Тип урока: урок усвоения новых знаний

Цели:

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

Дидактические материалы: инструкционные листы с заданиями

Программное обеспечение: браузер, пакет «Denver», СМS «Kandidat»

Структура урока

I.            Организационный момент
II.           Актуализация опорных знаний
III.          Сообщение темы и целей урока
IV.           Изучение теоретического материала
V.            Закрепление материала учащимися
VI.           Подведение итогов
VII.          Домашнее задание

Ход урока

I.            Организационный момент
II.           Актуализация.

  1. Что представляет собой сайт и каково его назначение?
  2. Какая служба в Интернет отвечает за веб-сайты?
  3. Что означает доменное имя сайта?
  4. С чего начать создание собственного сайта и какие технологии использовать?

III.            Сообщение темы и целей урока
IV.            Изучение теоретического материала

    Структура веб-сайтов

    Структура веб-сайта – это его каркас, определяющий порядок навигации.

    Базовые структуры веб-сайтов можно разделить на три группы: линейная, древовидная, решетчатая.

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

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

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

    Разновидности веб-страниц

    Веб-сайты различных структур в основном включают в себя четыре типа страниц:

    • главная страница,
    • страницы категорий,
    • конечные страницы,
    • служебные страницы.

    Главная страница должна давать обобщенные сведения о сайте в целом и указывать направления по основным категориям.

    Страницы категорий предназначены для отображения анонсов или списков статей, а также ссылок на родственные категории.

    Конечные страницы содержат в себе основные материалы сайта – статьи, изображения, видео. Именно эти страницы представляют наибольший интерес для пользователя.

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

    Выбор хостинга и доменного имени

    Хо?стинг — это услуга по предоставлению вычислительных мощностей для физического размещения сайта на сервере, постоянно подключенном к компьютерной сети (в данном случае Интернет).

    Хостинговая компания (хостинг-провайдер) — организация,  предоставлением услуг размещения оборудования, данных и web-сайтов на своих серверах.

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

    Создание сайта с помощью СМС

    В настоящее время сайты, как правило, создаются с помощью специальных программ, именуемых системами управления сайтом (СМS). Часто используется термин «Конструктор сайтов», который по сути является также CMS. Система управления сайтом предназначена для автоматизированного создания сайта, а также для управления контентом (содержимым). Другими словами, СМС позволяет на основе шаблона определенного типа создать сайт, задать его структуру и наполнить информацией даже человеку, слабо владеющему HTML.  Ряд  хостингов имеют встроенные CMS: в частности, популярный ucoz.ru.

    Несмотря на многообразие CMS, принципы их работы одинаковы. Для отработки приемов работы  с ней целесообразно на свой локальный компьютер установить пакет программ «Denver», который позволяет смоделировать работу сервера. С помощью данного пакета можно использовать разнообразные СМС, создавая сайты непосредственно на локальном компьютере. Овладев основными приемами работы с сайтом, можно уверенно приступать к регистрации на сервере хостинг-провайдера.

    Технология Веб 2.0

    Следует упомянуть современное направление в принципах web-разработок, называемое web 2.0

    Веб 2.0 является методикой проектирования сайтов, которые путём взаимодействия с пользователями становятся тем совершеннее, чем больше людей ими пользуются. Эта методика подразумевает участие пользователей в развитии web-проекта (примером является «Википедия»), а если точнее, в наполнении информацией. Хотя Веб 2.0 именуется технологией, далеко не все специалисты с этим согласны, поскольку речь не идет о каком-то особом методе web-дизайна.

    V.            Закрепление материала учащимися (Создание сайта на локальном сервере)

    Размещение сайта на сервере-работа с CMS

    1. Запустить на выполнение программу «Start Denver»
    2. В адресную строку браузера ввести доменное имя, указанное в инструкционной карте (например, http://school24.ua). Ознакомиться с шаблоном сайта, предложенного по умолчанию.
    3. Открыть административную панель сайта: http://school24.ua/admin
    4. Указать логин и пароль (admin, admin)
    5. В разделе “Навигация” выбрать пункт Настройки, задать название сайта, выбрать шаблон, соответствующий теме сайта
    6. В разделе “Навигация” выбрать пункт Начало. Создать нужное количество категорий (Ссылка «Добавить категорию»–Указать название категории–Установить переключатель Включить ссылку страницы в меню в положение «Да»–Кнопка Добавить категорию)
    7. При необходимости откорректировать меню сайта (В разделе “Навигация” выбрать пункт «Редакция меню»)
    8. Проверить созданный сайт (Ссылка «Перейти на сайт»)

    VI.            Подведение  итогов.

    1. Домашнее задание: зарегистрироваться на одном из бесплатных хостингов со встроенной CMS, получить доменное имя сайта, создать сайт (без наполнения контентом).

    Комментариев пока нет!

    Структура веб-приложения | Labaka.ru

    Давайте для простоты будем пока считать, что веб-приложение и веб-сайт — одно и то же. Не всегда веб-приложение является сайтом, и наоборот, но пока нет задачи вдаваться в подробности, поскольку рассматривать будем самый простой вариант.

    Чаще всего веб-приложения состоят как минимум из трёх основных компонентов:

    • Клиентская часть веб приложения — это графический интерфейс. Это то, что вы видите на странице. Графический интерфейс отображается в браузере. Пользователь взаимодействует с веб-приложением именно через браузер, кликая по ссылкам и кнопкам.
       
    • Серверная часть веб-приложения — это программа или скрипт на сервере, обрабатывающая запросы пользователя (точнее, запросы браузера). Чаще всего серверная часть веб-приложения программируется на PHP. При каждом переходе пользователя по ссылке браузер отправляет запрос к серверу. Сервер обрабатывает этот запрос, вызывая некоторый PHP-скрипт, который формирует веб-страничку, описанную языком HTML, и отсылает клиенту по сети. Браузер тут же отображает полученный результат в виде очередной веб-страницы.
       
    • База данных (БД, или система управления баазми данных, СУБД) — программное обеспечение на сервере, занимающееся хранением данных и их выдачей в нужный момент. В случае форума или блога, хранимые в БД данные — это посты, комментарии, новости, и так далее. База данных располагается на сервере. Серверная часть веб-приложения (то есть, PHP скрипт) обращается к базе данных, извлекая данные, которые необходимы для формирования страницы, запрошенной пользователем.

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

    • Браузер через Интернет отсылает HTTP-запросы веб-серверу
    • Веб-сервер вызывает PHP-скрипт, написанный разработчиком веб-приложения
    • PHP-скрипт обращается к базе данных, если это нужно
    • В результате PHP-cкрипт возвращает клиенту веб-страницу, которую и отображает браузер.

    Язык программирования для серверной части

    Для программирования серверной части веб приложения может использоваться язык PHP, как в описанном примере, но не обязательно он. Для разработки веб-приложений можно использовать практически любые современные языки программирования:

    • PHP, Perl
    • Ruby
    • Java
    • платформа .NET (языки VB.NET, C# и другие, поддерживаемые .NET)
    • С/C++

    Независимо от языка, на котором написана серверная часть веб-приложения, способы обработки запросов и взаимодействия с пользователем остаются те же.

    В дальнейшем в ходе освоения веб-технологий будем опираться на язык PHP, поскольку он является самым распространённым и самым простым среди всех перечисленных. Конфигурация сервера, включающая себя операционную систему Linux, язык программирования PHP, веб-сервер Apache и СУБД MySQL считается стандартом де-факто для среднестатистического сервера и даже носит название LAMP (от сокращения Linux, Apache, MySQL, PHP).

    Язык программирования клиентской части

    Основной язык, которым описывается графический интерфейс веб-приложения — это HTML. Этот язык описывает структуру веб-страницы. Художественное оформление веб страниц описывается таблицами стилей — CSS.

    Для «оживления» графического интерфейса используются дополнительные технологии: скрипты JavaScript, а также встроенные в веб-страницу компоненты, созданные на Flash, Java или Silverlight. Все эти элементы веб-страницы могут взаимодействовать между собой: программа, написанная на JavaScript и выполняющаяся на веб-странице, может управлять встроенными в страницу компонентами, тем самым реализуя пользовательский интерфейс с богатыми возможностями.

    Рябинин Виктор — Обзор средств создания интерфейсов веб-приложений на языке Java

    Обзор средств создания интерфейсов веб-приложений на языке Java

    Рябинин В. А.

    Інформаційні управляючі системи та комп’ютерний моніторинг (ІУС КМ — 2013) / Збірка матеріалів IV Всеукраїнської науково-технічної конференції студентів, аспірантів та молодих вчених. — Донецьк, ДонНТУ — 2013, Том 2, с. 303-307.

    Очень часто возникают ситуации, когда большому количеству пользователей необходимо предоставить доступ к некоторым данным, дать им возможность их получения и редактирования. Эти данные являются общими для всех пользователей и не могут располагаться на каждой клиентской машине. Для решения задач такого рода применяются веб-приложения Web-приложения, Web-application) — программные средства, предназначенные для автоматизированного выполнения действий на Web- серверах. При этом данные хранятся на сервере, там же при необходимости выполняется их программная обработка. По запросу необходимые данные предоставляются клиенту. Для обеспечения диалога с пользователем в веб- приложениях используются Web-браузеры. С одной стороны это представляет ряд преимуществ, с другой – накладывает определённые условия при выборе средств разработки интерфейсов таких приложений. В данной статье дан обзор технологий, позволяющих упростить создание веб-интерфейсов и их связывания с логической частью приложений.

    Проведен анализ общих требований к проектированию интерфейсов [1]. В указанной в списке источников книге выделен ряд рекомендаций для создания «дружелюбного» к пользователю интерфейса. Можно выделить следующие из них: вместо создания отдельной страницы для редактирования данных предоставлять возможность их редактирования по месту; не требовать перезагрузки страницы при каждом действии пользователя, использовать контекстные инструменты.

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

    Веб-приложения создаются в различных вариантах архитектуры клиент-сервер. В таком случае клиентом выступает браузер, а сервером — веб-сервер.

    Логика веб-приложения распределена между сервером и клиентом, хранение и обработка данных осуществляется, преимущественно, на сервере, её представление в удобном для пользователя виде — в браузере. Обмен информацией происходит по сети. Общая структура веб-приложения приведена на рисунке 1.

    Рисунок 1 – Общая структура веб-приложения

    Таким образом, чаще всего веб-приложения состоят как минимум из трёх основных компонентов.

    Серверная часть веб-приложения — это программа или скрипт на сервере, обрабатывающая запросы пользователя (точнее, запросы браузера). Для программирования серверной части веб-приложения могут использоваться различные языки программирования: Java, PHP, Perl, Ruby, платформа .NET (языки VB.NET, C# и другие, поддерживаемые .NET). В рамках данной статьи предполагается, что серверная часть написана на языке Java. При каждом переходе пользователя по ссылке браузер отправляет запрос серверу. Сервер обрабатывает данный запрос, запуская некоторый скрипт, который формирует веб-страницу, описанную на языке HTML, и отсылает клиенту по сети. Браузер тут же отображает полученный в виде очередной веб-страницы результат.

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

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

    Основной язык, которым описывается графический интерфейс веб-приложения — это HTML. Данный язык описывает структуру веб-страницы, размещение на ней компонентов. Оформление веб-страниц, их стиль и цветовая схема описываются в таблицах стилей — CSS. Для «оживления» графического интерфейса, придания ему динамичности, используются дополнительные технологии: скрипты JavaScript, а также встроенные в веб-страницу компоненты, созданные на Flash, Java или Silverlight. Все эти элементы веб-страницы могут взаимодействовать между собой: программа, написанная на JavaScript и выполняющаяся на веб- странице, может управлять встроенными в страницу компонентами, тем самым реализуя пользовательский интерфейс с богатыми возможностями.

    Отсутствие необходимости полностью перезагружать страницу после каждого получения данных от сервера может существенно ускорить работу веб-приложения. Такая концепция имеет название Asynchronous JavaScript and XML (асинхронный JavaScript и XML, Ajax). При использовании данного подхода динамические запросы к серверу происходят без видимой перезагрузки веб-страницы: пользователь не замечает, когда его браузер запрашивает данные.

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

    Google Web Toolkit (GWT) — это фреймворк с открытым исходным кодом, который позволяет Java разработчикам легко разрабатывать веб-приложения на Ajax без углубленного изучения JavaScript и браузерной разработки.

    GWT предоставляет разработчику специальное Java API и позволяет разрабатывать графические пользовательские интерфейсы (GUI), избегая работы с JavaScript и абстрагируясь от протокола HTTP и DOM моделей, лежащих в основе браузеров. Все это достигается использованием GWT компилятора, который генерирует JavaScript из написанного на Java кода интерфейса. Таким образом, скомпилированное GWT приложение состоит из фрагментов HTML, XML и JavaScript. Для связи клиентской части приложения с веб-сервером в арсенале GWT есть Remote Procedure Call (RPC) – механизм удаленного вызова процедур, который осуществляет простой обмен Java- объектами между клиентом и сервером в обе стороны.

    GWT также позволяет разработчикам эффективно тестировать и отлаживать приложения без необходимости преобразования приложений в JavaScript и развертывания их на веб-сервере. GWT позволяет приложениям быть запущенными в так называемом «Хостинг режиме» (“Hosted Mode”), при этом JVM исполняет код GWT приложения в виде Java байт-кода внутри встроенного браузера. После проверки и тестирования GWT приложений в «Хостинг режиме», можно скомпилировать исходный код Java в JavaScript и развернуть приложение. GWT приложения, которые были развернуты, называются запущенными в «Веб-режиме»(“Web Mode”).

    Таким образом, и клиентская и серверная части веб-приложения пишутся на Java. Затем GWT компилятор преобразует клиентские Java классы в совместимые с браузером JavaScript и HTML. После чего появляется возможность развернуть эти JavaScript и HTML на веб-серверах, так что конечные пользователи будут видеть только веб-версию приложения, в то время как классы серверной стороны могут быть развернуты на Tomcat, Jetty или каком-либо ином сервлет-контейнере

    Vaadin – это платформа веб-приложений с открытым исходным кодом для создания полнофункциональных интернет приложений. В противоположность библиотекам JavaScript и решениям на основе браузеров/подключаемых модулей, в ее состав входит архитектура на стороне сервера, что означает выполнение большей части программной логики на серверах. Технология Ajax используется на стороне браузера для обеспечения функционально насыщенного и интерактивного интерфейса пользователя. На стороне клиента Vaadin строится на основе GWT и может быть расширена с ее помощью.

    Основным элементом Vaadin является библиотека Java, рассчитанная на упрощение создания и обслуживания высококачественных веб-интерфейсов пользователей. Основная идея сервероцентричной модели программирования Vaadin состоит в том, что она позволяет забыть о сети и программировать интерфейсы пользователей точно так же, как программируются все настольные приложения Java, то есть с помощью обычных наборов средств, таких как AWT, Swing или SWT – только еще проще. Сервероцентричная модель программирования позволяет Vaadin взять на себя управление пользовательским интерфейсом в браузере и связь Ajax между браузером и сервером. Естественно, подход Vaadin позволяет не тратить силы на изучение и отладку технологий на стороне браузеров, таких как HTML или JavaScript.

    Библиотека Vaadin четко отделяет представление пользовательского интерфейса от логики и позволяет разрабатывать их по отдельности. Подход Vaadin состоит в использовании тем, определяющих внешний вид приложений. Темы контролируют внешний вид интерфейсов пользователей посредством шаблонов CSS и (при желании) HTML. Vaadin предоставляет темы по умолчанию, но при необходимости можно создавать свои собственные. В серверной части Vaadin используется Google Web Toolkit (GWT) для визуализации интерфейса пользователя в браузере. GWT идеально подходит для реализации дополнительных компонентов интерфейса и логики взаимодействия в браузере, тогда как Vaadin обрабатывает логику самого приложения на сервере. Платформа Vaadin разработана с расчетом на расширяемость и позволяет легко использовать любые компоненты GWT от сторонних производителей в дополнение к компонентам, предлагаемым в Vaadin

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

    1. Скотт Б., Нейл Т. Проектирование веб-интерфейсов. – Пер. с англ. – СПб.: Символ-Плюс, 2010. 352 с., ил.

    2. Материалы с сайта https://vaadin.com/

    3. Материалы с сайта http://ru.wikipedia.org/

    4. Введение в веб-платформу Vaadin/ Интернет-ресурс. — Режим доступа: www/ URL: https://netbeans.org/kb/70/web/quickstart-webapps-vaadin_ru.html

    5. Introduction to GWT – Tutorial/ Интернет-ресурс. — Режим доступа: www/ URL: http://developerlife.com/tutorials/?p=80

    УДК 004.912

    Тема 3. Проектирование структуры веб-сайта

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

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

    Внутренняя и внешняя структура

    Структуризация представляемой на сайте информации выполняется на двух уровнях: внутреннем и внешнем.

    Внутренняя структура определяет логические связи между веб-страницами, то, что в SEO называется внутренней перелинковкой. Продуманная внутренняя структура позволяет избежать ситуаций, когда, например, на сайте появляются страницы, доступные более чем в 3-х кликах от стартовой или в поисковую выдачу попадают приватные страницы или множественные дубли. С другой стороны, под внутренней структурой сайта иногда подразумевают размещение файлов и каталогов в файловой системе веб-сервера. Хороший пример — размещение всех изображений в каталоге images, а скачиваемых файлов — в каталоге download. Внутренняя структура может частично или полностью отображаться во внешнюю структуру.

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

    Типовые структуры

    Линейная структура

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

    Рис. 1. Сайт с линейной структурой

    Иерархия

    Такая структура предполагает размещение информации в несколько уровней (рис. 2). Страницы нижнего уровня являются подразделами страниц более высокого уровня. Корнем иерархии является стартовая страница сайта, ссылки с которой ведут на разделы и/или страницы 2-го уровня. Иерархическая структура используется во всевозможных сайтах-каталогах.

    Рис. 2. Иерархическая структура веб-сайта

    «Паутина»

    «Паутина» — это структура, практически идентичная концепции сервиса WWW, но в масштабах отдельно взятого сайта (рис. 3). Она основана на установлении таких связей между страницами, которые позволяют быстро перемещаться между ними, минуя какие-либо промежуточные страницы (стартовую или страницы разделов). Подобная структура избыточна, управление ей сильно затрудняется с ростом числа страниц, а пользователь может элементарно «увязнуть» на страницах такого сайта.

    Рис. 3. Сайт со структурой типа «паутина»

    БОльший порядок на сайте можно навести, если установить связи между страницами по принципу «решетки» (рис. 4)

    Рис. 4. Структура типа «решетка»



    Дата добавления: 2016-06-18; просмотров: 3343;


    Похожие статьи:

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *