Web-программирование #1

Август 20, 2022

Главная
Информатика
Web-программирование #1

Содержание

2. Что такое структура сайта? Структура сайта – это логическая разметка и физическая связка страниц сайта, а
3. Виды структур сайта В современном интернете, существует огромное количество сайтов с разнообразной структурой, однако из всего
4. Линейная структура Линейная структура. Элементарная логика – каждая страница ссылается на другую страницу и на главную.
5. Линейная структура
6. Линейная структура с ответвлениями Линейная с ответвлениями. Принцип тот же, но здесь вы можете использовать несколько
7. Линейная структура с ответвлениями
8. Блочная структура Блочная структура. Здесь все страницы ссылаются на несколько других, которые равнозначны между собой. Такую
9. Блочная структура
10. Древовидная структура Древовидная структура. Именно древовидная структура является наиболее универсальным вариантом и именно ее вы будете
11. Древовидная структура
12. Древовидная структура В URL: site.ru/divani/ site.ru/divani/tkani.html site.ru/divani/kozha.html site.ru/pyfiki/ site.ru/stylya/ site.ru/stylya/derevo.html site.ru/stylya/plastic.html site.ru/stylya/rotang.html site.ru/stylya/metall.html
13. Как создать структуру своего сайта? Мы определились с видом структуры, который будем использовать. Теперь нужно понять,
14. Сайт «Визитка» Стандартная структура сайта-визитки обычно проста и состоит всего из двух уровней: главная остальные страницы
15. Коммерческий сайт Здесь уже сложнее – нужно будет внедрять дополнительные уровни страниц. Какие? Это будет понятно
16. Коммерческий сайт
17. Информационный сайт и блог Структура информационного сайта похожа на структуру коммерческого, с той лишь разницей, что
18. Информационный сайт и блог
19. Информационный сайт и блог На страницах коммерческих сайтов такого обычно нет (попасть на под страницу можно
21. Интернет-магазин Это уже совершенно иной уровень организации сайта. Чтобы охватить все возможные запросы, которые могут ввести
22. Интернет-магазин Хотя, если ваша фишка – это разноцветные диваны, то будет лучше разделить их по цветам,
24. Внешняя структура сайта Говорить о внешней структуре сайта можно очень долго, юзабилити, удобство пользователей, красочность дизайна
25. Внешняя структура сайта
26. Внешняя структура сайта Давайте по порядку, рассмотрим базовое размещение элементов на сайте: Голова, шапка, хедер все
27. Внешняя структура сайта Центральный блок, самый главный, это та информация или сервис, ради которого посетитель пришел
28. Внешняя структура сайта Примерно так выглядит 99% всех существующих сайтов в интернете, дважды, нет трижды подумайте
29. Проектирование структуры сайта Чтобы пришло понимание, как выделять разные уровни страниц, я покажу, как это делается
31. Проектирование структуры сайта Теперь нужно продумать, какие группы можно выделить. Чтобы это сделать, включаем логику. Разнесем
34. Проектирование структуры сайта Итак, СЯ кластеризовали. Что делать дальше? Начинаем создавать структуру продающего сайта. Учитываем, что
37. Скачать презентацию

Слайд 2

Что такое структура сайта?
Структура сайта – это логическая разметка и физическая

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

Слайд 3

Виды структур сайта
В современном интернете, существует огромное количество сайтов с разнообразной

структурой, однако из всего этого многообразия возможно выявить наиболее часто встречающиеся структуры:
Линейная структура
Блочная структура
Древовидная структура

Слайд 4

Линейная структура
Линейная структура. Элементарная логика – каждая страница ссылается на другую

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

Слайд 5

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

Слайд 6

Линейная структура с ответвлениями
Линейная с ответвлениями. Принцип тот же, но здесь

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

Слайд 7

Линейная структура с ответвлениями

Слайд 8

Блочная структура
Блочная структура. Здесь все страницы ссылаются на несколько других, которые

равнозначны между собой. Такую структуру неплохо применять для конкретного продукта, когда каждую страницу можно использовать, как описание какого-то отдельного свойства/достоинства и их совокупностей. С распределением веса здесь все вполне неплохо, страницы уже перелинкованы и отдают свой вес на главную, что позволяет продвигать ее более эффективно. Но такая структура весьма специфична и применять ее можно далеко не везде. Пример структуры сайта:

Слайд 9

Блочная структура

Слайд 10

Древовидная структура
Древовидная структура. Именно древовидная структура является наиболее универсальным вариантом и

именно ее вы будете применять в 99% случаев. Смысл в том, что для каждого направления у вас будет своя ветка, для каждой услуги или товара у вас будет отдельное ответвление. То есть, те самые привычные нам разделы и подразделы. Эта структура позволяет передавать дополнительный вес как на главную, так и на разделы (каждая страница раздела будет ссылаться не только на главную, но и на свой раздел, достаточно настроить хлебные крошки.

Слайд 11

Древовидная структура

Слайд 12

Древовидная структура
В URL:
site.ru/divani/
site.ru/divani/tkani.html
site.ru/divani/kozha.html
site.ru/pyfiki/
site.ru/stylya/
site.ru/stylya/derevo.html
site.ru/stylya/plastic.html
site.ru/stylya/rotang.html
site.ru/stylya/metall.html

Слайд 13

Как создать структуру своего сайта?
Мы определились с видом структуры, который будем

использовать. Теперь нужно понять, какой она должна быть именно у вашего сайта: как будут организованы страницы, разделы, подразделы и прочее. Здесь все зависит от вида и назначения сайта. Сразу скажу, что здесь представлены именно логические структуры сайтов. Расположение блоков на видимой части сайта – той, что вы видите на экране монитора (кнопочки, меню и т.д.), – может быть любым, главное, чтобы оно казалось вам правильным.

Слайд 14

Сайт «Визитка»
Стандартная структура сайта-визитки обычно проста и состоит всего из двух

уровней:
главная
остальные страницы

Слайд 15

Коммерческий сайт
Здесь уже сложнее – нужно будет внедрять дополнительные уровни страниц.

Какие? Это будет понятно из семантического ядра. Немного ниже я расскажу, как формировать структуру для коммерческого сайта. Если вкратце, то основными страницами будут главные направления вашей деятельности, страницами второго уровня – их разновидности. Такое решение идеально для сайтов услуг и любых других коммерческих сайтов без функций интернет-магазина. Структура продающего сайта:

Слайд 16

Коммерческий сайт

Слайд 17

Информационный сайт и блог
Структура информационного сайта похожа на структуру коммерческого, с

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

Слайд 18

Информационный сайт и блог

Слайд 19

Информационный сайт и блог
На страницах коммерческих сайтов такого обычно нет (попасть

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

Слайд 20

Слайд 21

Интернет-магазин
Это уже совершенно иной уровень организации сайта. Чтобы охватить все возможные

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

Слайд 22

Интернет-магазин
Хотя, если ваша фишка – это разноцветные диваны, то будет лучше

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

Слайд 23

Слайд 24

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

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

Слайд 25

Внешняя структура сайта

Слайд 26

Внешняя структура сайта
Давайте по порядку, рассмотрим базовое размещение элементов на сайте:
Голова,

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

Слайд 27

Внешняя структура сайта
Центральный блок, самый главный, это та информация или сервис,

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

Слайд 28

Внешняя структура сайта
Примерно так выглядит 99% всех существующих сайтов в интернете,

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

Слайд 29

Проектирование структуры сайта
Чтобы пришло понимание, как выделять разные уровни страниц, я

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

Слайд 30

Слайд 31

Проектирование структуры сайта
Теперь нужно продумать, какие группы можно выделить. Чтобы это

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

Слайд 32

Слайд 33

Слайд 34

Проектирование структуры сайта
Итак, СЯ кластеризовали. Что делать дальше? Начинаем создавать структуру

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

Слайд 35

Web-программирование #1

Содержание

Что такое структура сайта?Структура сайта – это логическая разметка и физическая

Виды структур сайтаВ современном интернете, существует огромное количество сайтов с разнообразной

Линейная структураЛинейная структура. Элементарная логика – каждая страница ссылается на другую

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

Линейная структура с ответвлениямиЛинейная с ответвлениями. Принцип тот же, но здесь

Линейная структура с ответвлениями

Блочная структураБлочная структура. Здесь все страницы ссылаются на несколько других, которые

Блочная структура

Древовидная структураДревовидная структура. Именно древовидная структура является наиболее универсальным вариантом и

Древовидная структура

Древовидная структураВ URL:site.ru/divani/site.ru/divani/tkani.htmlsite.ru/divani/kozha.htmlsite.ru/pyfiki/site.ru/stylya/site.ru/stylya/derevo.htmlsite.ru/stylya/plastic.htmlsite.ru/stylya/rotang.htmlsite.ru/stylya/metall.html

Как создать структуру своего сайта?Мы определились с видом структуры, который будем

Сайт «Визитка»Стандартная структура сайта-визитки обычно проста и состоит всего из двух

Коммерческий сайтЗдесь уже сложнее – нужно будет внедрять дополнительные уровни страниц.

Коммерческий сайт

Информационный сайт и блогСтруктура информационного сайта похожа на структуру коммерческого, с

Информационный сайт и блог

Информационный сайт и блогНа страницах коммерческих сайтов такого обычно нет (попасть

Интернет-магазинЭто уже совершенно иной уровень организации сайта. Чтобы охватить все возможные

Интернет-магазинХотя, если ваша фишка – это разноцветные диваны, то будет лучше

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