Основы информационного дизайна

Методы внешней поисковой оптимизации:

· Регистрация в самостоятельных каталогах. Она может осуществляться вручную, либо с помощью специальных ресурсов;

· Регистрация в каталогах поисковых систем таких как: Яндекс.каталог, Рамблер/Топ100, каталог DMOZ (AOL), каталог Mail.ru, каталог Yahoo и другие;

· Обмен ссылками. Существуют несколько способов обмена -- прямой, кольцевой, односторонний (покупка ссылок);

· Регистрация в сервисах: Google Мой Бизнес и Яндекс. Справочник;

· Размещение статей («гостевые посты», публикация в СМИ);

· Социальные сети;

Пресс-релизы;

Крауд-маркетинг;

Создание и ведение блогов.

· Создание сети сайтов («саттелиты»), используемых для увеличения количества упоминаний и ссылок в поисковой выдаче.

Лицо, проводящее работу по оптимизации веб-сайтов, называется оптимизатор или SEO-специалист.

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

К факторам, понижающим рейтинг сайта, относятся:

1. неуникальный контент (статьи, новости и т. д.);

2. технологии, которые поисковые машины рассматривают как спам;

3. избыточное число внешних ссылок, как результат неестественного прироста ссылочной массы;

4. накрутки поведенческих факторов (Google не учитывает);

5. в структуре ссылочного профиля для nofollow -- ссылок меньше 10 процентов;

6. некорректная вёрстка;

7. тяжёлый «замусоренный» код;

8. большой вес страницы (HTML-кода, картинок, JS-скриптов, CSS-стилей и пр.);

9. некорректные ответы сервера.

Белая оптимизация

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

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

Серая оптимизация

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

сначала в подборе ключевых запросов для конкретной веб-страницы, определении размера целевого «SEO-текста» и необходимой частоты ключевых слов в нём, а затем в формулировании предложений и фраз, содержащих в себе ключевые запросы определённое количество фраз в разных падежах, единственном и множественном числе, при разных формах глаголов. Эти параметры могут потом корректироваться по результатам выдачи поисковых систем. При этом задача SEO-копирайтера -- написать оригинальный текст таким образом, чтобы подобная оптимизация была как можно менее заметна «живому» читателю. Широко применяется также включение ключевого запроса HTML-теги title, meta description, h1, alt, атрибут meta keywords.

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

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

Чёрная оптимизация

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

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

Ключевые слова (англ.- Keywords) представляют собой слова (или их набор), которые описывают тему сайта или текст, и используются поисковыми системами для обеспечения точного соответствия (релевантности) результатов поиска».

Другими словами, именно при помощи ключевых слов вы должны описать свой сайт, а поисковые машины Google, Yandex, Bing и др. на основании такого

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

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

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

кухня под заказ в Одессе

мебель для кухни

кухня Одесса

Численность вариантов ограничивается лишь вашей фантазией. Обратите внимание, что ключевое слово может состоять из нескольких слов. Как правило, 3-4 слова в запросе являются золотой серединой при подготовке ключей.

Удобные сервисы для подбора ключевых слов предлагают наиболее распространенные у нас Google и Яндекс. С их помощью вы легко получите реальную статистику первоначально составленных запросов и узнаете, насколько высока их конкуренция.

У поисковой системы Google есть бесплатный сервис подбора ключевых слов (Планировщик ключевых слов AdWords), с помощью которого можно собрать слова. Для того чтобы зайти в сервис необходимо быть зарегистрированным в Google, чтобы была возможность выгружать ключевые слова в excel. Сначала мы вводим нужную нам ключевую фразу, например,: «раскрутка сайта», дальше смотрим варианты слов, и выбираем самые подходящие. После того как мы это сделали, смотрим точное значение этих слов

Где нужно использовать ключевые слова?

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

1. Заголовки и описание сайта (и каждой страницы в отдельности)

2. Подзаголовки H1

3. Содержимое

4. Внутренние и внешние ссылки

5. Текстовые описания к изображениям

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

Почему нельзя перенасыщать сайт ключевыми словами?

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

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

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

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

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

Семантическое ядро - является необходимой частью seo. Этап создания семантического ядра делится на 3 основные части:

-- определяем основные направления

-- подбираем ключевые слова

-- распределяем их по сайту

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

Если в техническом быть плотность ключей, Превышение 7-8% порога задании вам помните, что может привести не указали, какова должна оптимальной считается 5-7%. к негативным последствиям.

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

Лекция 8. Добавление медиа-контента

1. Добавление изображений Тег <img>

Чтобы добавить изображения на страницу мы используем строчный элемент <img>. Для работы <img> должен быть включен атрибут src со значением, указывающим исходник изображения - URL, обычно относительно сервера, на котором размещён сайт.

Наряду с атрибутом src долженможет быть применён атрибут alt или title (альтернативный текст). Альтернативный текст будет отображаться вместо изображения, если по какой-то причине изображение не доступно.

<img src="dog.jpg" alt="Изображение о собаке" title="Изображение о собаке">

Favicon (сокр. от англ. FAVorite ICON -- «значок для избранного») -- значок веб-страницы. Отображается браузером во вкладке перед названием страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса.

Традиционно использовались изображения размера 16Ч16 пикселей формата ICO, под именем favicon.ico

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

Рис. Отображение иконки в строке браузера (без и с использованием favicon)

Adobe Photoshop не понимает формат ICO и не сохраняет в нем рисунки, так что для этой цели требуется дополнительный плагин. Но формат рисунка не обязательно должен быть ICO, также допускается использование GIF и PNG (многие браузеры показывают favicon и в формате JPG). Прописывается следующим образом:

<head>

<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon">

</head>

ИЛИ

<head>

<link rel="shortcut icon" href="/images/favicon.png" type="image/png">

</head>

Увеличение (зумирование изображений)

Способ 1. Увеличение изображения при наведении со смещением блоков.

Разметка в html:

<img src="images/image.jpg" class="zoom"> <!--Применяем класс zoom -увеличение, значения которого пропишем в css->

Разметка в css:

.zoom:hover { zoom: 3.0; } /* Число с плавающей запятой, значение 1.0 соответствует normal. Значения больше 1.0 увеличивают масштаб объекта, значения меньше 1.0 уменьшают масштаб. */

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

Способ 2. Увеличение изображения при наведении без смещения блоков.

Разметка в html:

<div class="image"><img src="Pict/img1.jpg"></div>

Разметка в css:

.image img {

transition: all 0.5s ease-out; /* Устанавливает эффект перехода между двумя состояниями элемента - статическим и с использованием псевдокласса :hover*/

}

.image img:hover{

transform: scale(3.0); /* преобразовывает элемент при наведении курсора*/

}

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

Значения transition:

all - все свойства будут трансформироваться, используется по умолчанию.

0.5s - задаёт время в секундах, сколько должна длиться анимация перехода до её завершения (в данном случае установлено 0,5 секунды).

ease-out - анимация начинается быстро, к концу замедляется.

ease-in - анимация медленно начинается, к концу ускоряется.

ease - анимация начинается медленно, затем ускоряется и к концу движения опять замедляется.

ease-in-out - анимация начинается и заканчивается медленно.

linear - одинаковая скорость от начала и до конца.

Значения transform:

scale - масштаб элемента по горизонтали и вертикали. Значение больше 1 увеличивает масштаб элемента, меньше 1 -- уменьшает масштаб

Целесообразно прописать свойста transition и transform для видимости во всех браузерах, используя нестандартные свойства -ms-, -webkit-, -o-, -moz-:

Chrome до версии 26.0, Safari, Android и iOS	Internet Explorer 9 поддерживает
поддерживают нестандартное свойство -	нестандартное свойство -ms-transform.
webkit-transition.	Chrome, Safari, Android и iOS поддерживают
Opera до версии 12.10 поддерживает	нестандартное свойство -webkit-transform.
нестандартное свойство -o-transition.	Opera до версии 12.10 поддерживает
Firefox до версии 16.0 поддерживает	нестандартное свойство -o-transform.
нестандартное свойство -moz-transition.	Firefox до версии 16.0 поддерживает
	нестандартное свойство -moz-transform.

2. Добавление аудио-файлов

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

Список поддерживаемых браузерами кодеков ограничен и приведен в табл. 1.

Для универсального воспроизведения в указанных браузерах аудио кодируют с помощью разных кодеков и добавляют файлы одновременно через тег <source>.

Синтаксис

<audio src="URL"></audio>

<audio>

<source src="URL">

</audio>

Атрибуты

autoplay Звук начинает играть сразу после загрузки страницы.

controls Добавляет панель управления к аудиофайлу.

loop Повторяет воспроизведение звука с начала после его завершения. preload Используется для загрузки файла вместе с загрузкой веб-

страницы.

src Указывает путь к воспроизводимому файлу.

Пример

<!DOCTYPE html>

<html>

<head>

<title>audio</title>

</head>

<body>

<p>Исполнитель - Название</p>

<audio controls>

<source src="audio/music.ogg" type="audio/ogg"> <source src="audio/music.mp3" type="audio/mpeg">

</audio>

</body>

</html>

3. Добавление видео-файлов

Тег <video> встраивает цифровое видео на веб-страницу. Как и в случае с <audio>, элемент <video> может иметь атрибут src, указывающий URL-адрес видеофайла: <video src="video/file.mp4" controls></video>

В настоящее время, существует 3 поддерживаемых видео формата для элемента <video>: MP4, WebM и Ogg.

	Браузер		MP4		WebM		Ogg
	Internet Explorer 9 или выше		да		нет		нет
	Firefox 4.0 или выше		нет		да		да
	Google Chrome 6 или выше		да		да		да
	Apple Safari 5 или выше		да		нет		нет
	Opera 10.6 или выше		нет		да		да

Элемент <video> также может содержать один или несколько элементов <source>, которые будут указывать на файлы разных форматов:

<!DOCTYPE html>

<html>

<head>

<title>Видео</title>

</head>

<body>

<video width="320" height="240" controls="controls"> <source src="1.ogg" type="video/ogg"> <source src="1.m4v" type="video/mp4">

</video>

</body>

</html>



Размещение видео с ресурса youtube

Вставка кода фрейма с Youtube - является наиболее легким методом реализации. Подходит для ретрансляции своего или чужого тематического видео с этого хостинга у себя на сайте. Код для вставки в html можно найти на страничке видеоролика в Youtube. Он находится сразу под окном плеера во вкладке «HTML-код»:

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/3jT_q7dt-cM"

frameborder="0" allowfullscreen>

</iframe>

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

Атрибуты тега <iframe>:

· width - задается длина окна фрейма;

· height - устанавливается высота окна плавающего фрейма;

· src - путь к файлу, содержимое которого будет воспроизводиться;

· frameborder - устанавливает отображение рамки вокруг фрейма. Поддерживаются значения yes или no, 1 или 0 (нет);

· allowfullscreen - разрешение на полноэкранное отображение видео.

Google-карта на сайте

При создании и разработке веб-сайтов все чаще необходимо указать адрес и местоположение на странице «Контакты». Рассмотрим, как указать необходимые данные с помощью сервиса Карты Google (Google Maps)

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

Откройте Google Карты - https://maps.google.com/

1. Найдите нужную карту, панораму в Просмотре улиц или маршрут.

2. Нажмите на значок меню в левом верхнем углу экрана.

3. Выберите Ссылка/код.

4. В верхней части появившегося окна откройте вкладку Код.

5. Выберите размер карты. Затем скопируйте текст в поле и вставьте его в код своего сайта.

Пример:

Самостоятельно

Создание слайдера

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



Слайдер с анимированным переключением кадров с помощью кнопок

В html прописываем количество слайдов, которые будет использовать слайдер. В данном случае используется 4 слайда (количество может быть любое):

<div class='sliderA'>

<input type="radio" name="slider1" id="slider1_1" checked="checked">

<label for="slider1_1"></label>

<div></div>

<input type="radio" name="slider1" id="slider1_2"> <label for="slider1_2"></label> <div></div>

<input type="radio" name="slider1" id="slider1_3"> <label for="slider1_3"></label> <div></div>

<input type="radio" name="slider1" id="slider1_4"> <label for="slider1_4"></label> <div></div>

</div>

Контейнер слайдера -- div с классом sliderA. Каждый кадр слайдера описывается трёмя тегами:

· Радиокнопкой (input type="radio"), отвечающей за состояние данного кадра (видно / не видно)

· Меткой label, отвечающей за отображение кнопки перехода на данный слайдер.

· Тегом div в котором находится содержимое кадра.

Радиокнопки внутри одного слайдера должны иметь одинаковое имя name. Также, все радиокнопки должны иметь уникальные (различные) идентификаторы id. Метка в поле for должна содержать значение id соответствующей радиокнопки.

Начинаем работать над стилями css. Контейнер:

.sliderA {

width: 400px;

height: 250px;

border: 1px solid #888;

position: relative;

text-align: center; }

Задаём фиксированные размеры контейнера. Установим их равными размеру изображений, которые будут использоваться. Свойство position: relative необходимо, чтобы задать новую точку отсчёта позиций вложенных контейнеров. Свойство text-align: center чтобы выровнять по центру полосу меток-кнопок, которые будут позиционироваться как inline-элементы.

Отображение радиокнопок не нужно, скрываем их:

.sliderA > input {

display: none;

}

Оформляем метки-кнопки.

.sliderA > input + label {

display: inline-block;

width: 10px;

height: 10px;

border-radius: 8px;

background: rgba(90, 90, 90, 0.8);

border: 2px solid rgba(190, 190, 190, 0.8);

cursor: pointer;

z-index: 100;

position: relative;

margin-right: 4px;

top: 90%;

transition: background 0.8s ease-out 0s;

}

.sliderA > input + label:hover {

background: rgba(250, 250, 250, 0.8);

}

.sliderA > input:checked + label {

background: rgba(220, 220, 220, 0.8);

}

Свойство display: inline-block позволит разместить метки одной строкой и выровнять их по центру как строчные элементы, и вместе с тем задать им фиксированные размеры как блокам. Затем нужно задать ширину и высоту, а также радиус скругления углов, цвет фона и цвет границы. Всё это приводит к тому, что метки будут отображаться в виде маленьких круглых кнопок (указано, как пример).

Свойство cursor позволяет задать внешний вид курсора мыши при наведении на кнопку. Установленное значение pointer, т.е. вид указателя мыши будет такой же, как при наведении на ссылку («указательный палец»).

Свойство z-index необходимо для того, чтобы метки-кнопки лежали поверх кадров слайдера. Для этого же установлено свойство position: relative -- иначе z-index не будет работать.

margin-right добавляет отступы между кнопками, а top: 90% сдвигает их в нижнюю часть контейнера. Можно было задать вертикальную позицию кнопок.

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

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



Добавляем стили для блоков, в которых будет находиться содержимое кадра:

.sliderA > div {

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

z-index: 0; }

Все кадры будут занимать одно и то же положение. position: absolute. top, left, right, bottom задают координаты кадра таким образом, что кадр занимает весь контейнер слайдера целиком. z-index отправляет кадры под кнопки переключения кадров.

Теперь самая главная часть слайдера -- показ и скрытие кадров в зависимости от нажатой кнопки. Традиционный подход скрытия элементов страницы с использованием свойства display: none не совсем подходит. Ведь для слайдера хотелось бы сделать плавное переключение кадров, но CSS не позволяет задать анимацию значения display при помощи правил transition.

Для плавного скрытия и появления кадров нам понадобятся два свойства: opacity иvisibility; а также transition.

Свойство opacity позволяет в виде десятичной дроби задать уровень прозрачности элемента страницы, от 0 (полностью прозрачный) до 1 (полностью непрозрачный).

Например, opacity: 0.5 -- прозрачность 50%.

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

Чтобы полностью отключить элемент и сделать его прозрачным для щелчков мышью, понадобится второе свойство: visibility: hidden. Однако visibility не позволяет задать частичную прозрачность. Элемент либо виден, либо нет.

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

· Когда пользователь переключает кадр, новый кадр появляется с visibility: visible, но с

opacity: 0.

· Затем происходит анимация значения opacity у обоих кадров. У старого кадра она плавно опускается до нуля, а у нового -- плавно поднимается до единицы.

· После завершения анимации, visibility старого кадра устанавливается в значение hidden, чтобы он не мешал щелчкам мышью по новому кадру.

Добавляем следующую часть кода:

.sliderA > div {

visibility: hidden;

opacity: 0;

transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0.9s; }

.sliderA > input:checked + label + div {

visibility: visible;

opacity: 1;

transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0s; }

Можно добавить правило для тега p внутри кадра, чтобы сделать подписи к картинкам:

.sliderA > div > p {

position: absolute;

top: 0px;

left: 0px;

right: 0px;

text-align: center;

color: #fff;

text-shadow: 1px 1px 2px #000; }

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

<input type="radio" name="slider1" id="slider1_1" checked="checked">

<label for="slider1_1"></label>

<div> <p>Надпись слайда 1</p>

<img src="Pict/image.jpg">

</div>

Важно также установить размер изображений согласно стилевым описаниям контейнера слайдера. Размерность должна быть в чётком соответствии.

Пример выполненной работы:



Слайдер с анимированным переключением кадров с помощью кнопок и нажатием на изображение

Основой данного слайдера является предыдущий слайдер с анимированным переключением кадров с помощью кнопок. Все стилевые описания остаются прежними с некоторыми добавлениями в коде.

В шаблон слайдера в html добавляется по еще одной метке для каждого кадра:

<div class='sliderA' >

<input type="radio" name="slider2" id="slider2_1" checked="checked"> <label for="slider2_1"></label>

<div></div>

<label for="slider2_2"></label>

<input type="radio" name="slider2" id="slider2_2"> <label for="slider2_2"></label>

<div></div>

<label for="slider2_3"></label>

<input type="radio" name="slider2" id="slider2_3"> <label for="slider2_3"></label>

<div></div>

<label for="slider2_4"></label>

<input type="radio" name="slider2" id="slider2_4"> <label for="slider2_4"></label>

<div></div>

<label for="slider2_1"></label>

</div>

Метка, идущая после первого кадра, активирует второй кадр. Метка, расположенная после второго кадра, активирует третий кадр; после третьего -- четвертый. Последняя метка активирует первый кадр.

Метки расположены так, чтобы они перекрывали весь слайдер и были выше изображения, но ниже полосы кнопок. Метки прозрачные, поэтому сквозь них видно содержимое кадра. При показе кадра номер N вместе с ним отображается метка для перехода на кадр N + 1. (Для последнего кадра -- метка перехода на первый кадр.)

.sliderA > input + label + div + label {

display: none; }

.sliderA > input:checked + label + div + label {

display: block;

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

z-index: 50; }

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

Слайдер на CSS с кнопками «вперёд» и «назад»

Примечание. Для ознакомления предоставляется вёрстка кнопки. В коде слайдера она прописана.

Код HTML для вёрстки кнопки:

<div id='button-example'>

<div></div>

<div></div>

</div>

CSS для вёрстки кнопки:

#button-example {

width: 400px;

height: 250px;

border: 1px solid #888;

position: relative;

overflow: hidden;

}

#button-example > div {

width: 80px;

height: 80px;

border-radius: 40px;

background-color: rgba(220, 220, 220, 0.4);

position: absolute;

top: 50%;

transform: translateY(-50%);

}

#button-example > div:after {

font-size: 30px;

color: #fff;

display: block;

position: absolute;

top: 0px;

bottom: 0px;

line-height: 80px;

}

#button-example > div:first-child {

left: -40px;

}

#button-example > div:first-child:after {

content: '?';

left: 55%;

}

#button-example > div:last-child {

right: -40px;

}

#button-example > div:last-child:after {

content: '?';

right: 55%;

}

Задаём для кнопки квадратный блок (ширина и высота 80 пикселей) и при помощи свойства border-radius превращаем его в круг. Позиционируем его абсолютно таким образом, чтобы половина блока ушла за границу контейнера. Благодаря свойству overflow: hidden контейнера, всё, что вышло за его границы, обрезается. Таким образом, мы получаем два полукруга.

Чтобы отцентрировать кнопки по высоте, используем следующий приём. Выставляем кнопке top: 50%. Таким образом, верхняя граница кнопки будет находиться посередине контейнера. Также указываем трансформацию -- сдвиг по высоте на 50%: transform: translateY(-50%). Проценты, указанные в трансформации, отсчитываются не от размера родительского элемента (контейнера), а от размера самого блока. Таким образом, блок смещается на половину высоты вверх. В результате центр блока совмещен с центром контейнера.

Далее внутри кнопок надо нарисовать стрелку влево и стрелку вправо. Используем для этого псевдоэлементы :after, и стрелки рисуем в виде соответствующих символов Unicode.

Отцентрировать стрелку по высоте, используем еще один приём вертикального выравнивания: задаем высоту строки равной высоте контейнера (line-height: 80px).

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

Отдельные пары кнопок будут использоваться для каждого кадра слайдера. В первом кадре кнопка «Назад» активирует последний кадр, а кнопка «Вперёд» -- второй кадр. Во втором кадре кнопка «Назад» активирует первый кадр, а кнопка «Вперёд» -- третий кадр.

Код HTML для вёрстки слайдера:

<div class='sliderB'>

<input type="radio" name="slider1" id="slider1_1" checked="checked"> <div>

<p>Надпись для слайда 1</p>

<img src=”image.jpg”>

</div>

<label for="slider1_4"></label> <!--прописывается кнопка «Назад», которая возвращает первый слайд к последнему слайду -->

<label for="slider1_2"></label> <!--прописывается кнопка «Вперёд», которая возвращает к следующему слайду -->

<input type="radio" name="slider1" id="slider1_2"> <div>

<p>Надпись для слайда 2</p>

<img src=”image.jpg”>

</div>

<label for="slider1_1"></label> <!--прописывается кнопка «Назад», которая возвращает к предыдущему слайду -->

<label for="slider1_3"></label> <!--прописывается кнопка «Вперёд», которая возвращает к

следующему слайду. Если это кнопка последнего слайда, то должна возвращать первый

слайд -->

<!--таким образом прописываем следующие слайды, их количество - не менее 3-х-->

</div>

Из таблиц стилей от предыдущего слайдера мудаляем всё, что связано со старыми кнопками и добавляем оформление новых кнопок:

.sliderB {

width: 400px;

height: 250px;

border: 1px solid #888;

position: relative;

overflow: hidden;

}

.sliderB > input {

display: none;

}

.sliderB > label {

display: none;

}

.sliderB > input:checked + div + label,

.sliderB > input:checked + div + label + label {

display: block;

width: 80px;

height: 80px;

border-radius: 40px;

background-color: rgba(220, 220, 220, 0.4);

cursor: pointer;

position: absolute;

top: 50%;

transform: translateY(-50%);

z-index: 100;

}

.sliderB > input:checked + div + label:after,

.sliderB > input:checked + div + label + label:after { font-size: 30px;

color: #fff;

display: block;

position: absolute;

top: 0px;

bottom: 0px;

line-height: 80px;

}

.sliderB > input:checked + div + label {

left: -40px;

}

.sliderB > input:checked + div + label:after {

content: '?';

left: 55%;

}

.sliderB > input:checked + div + label + label {

right: -40px;

}

.sliderB > input:checked + div + label + label:after { content: '?';

right: 55%;

}

.sliderB > div {

position: absolute;

top: 0px;

left: 0px;

right: 0px;

bottom: 0px;

z-index: 0;

}

.sliderB > div {

visibility: hidden;

opacity: 0;

transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0.9s;

}

.sliderB > input:checked + div {

visibility: visible;

opacity: 1;

transition: opacity 0.8s ease-out 0.1s, visibility 0.1s ease-out 0s;

}

.sliderB > div > p {

position: absolute;

top: 0px;

left: 0px;

right: 0px;

text-align: center;

color: #fff;

text-shadow: 1px 1px 2px #000;

}

Пример выполненной работы:

Лекция 9. Целевая страница

Англ. landing page, также «посадочная страница») -- веб-страница, основной задачей которой является сбор контактных данных целевой аудитории. Используется для усиления эффективности рекламы, увеличения аудитории. Целевая страница обычно содержит информацию о товаре или услуге.

Переход на целевые страницы часто осуществляется из социальных медиа, email-рассылок и рекламных кампаний в поисковых системах.

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

В интернет сфере подобные странице имеют различные названия, в частности, их называют: страницами приземления, посадочные страницы, страницами захвата, одностраничными сайтами, landing page и т.д.

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

Особенности landing page

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

u На странице -- landing page не должна размещаться реклама, она и так является рекламой ваших услуг и товаров.

u На лендинг пейдж не должна размещаться лишняя информация, которая не относится к продаваемому товару или услуги.

u Посадочная страница должна иметь определенную структуру: рекламный текст, картинки, минимальная навигация страницы, отзывы и т.д. Таким образом отличить «лендинг» от другой обычной страницы сайта очень легко.

Как должен выглядеть лендинг и что должен содержать

- заголовок в верхней части страницы

- подробное описание услуги или продукта

- фотографии (картинки), видеоролики, которые относятся к продаваемому товару или услуге

- выгоды покупки (акции и т.д.)

- отзывы покупателей

- продающий рекламный текст

- тригеры

- призывы к действию (подписка, покупка и т.д.)

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



Лекция 10. Системма управлемния содержиммым(контемнтом)

Англ. Content management system, CMS) -- информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления содержимым (контентом ).

Основные функции CMS:

· Создание -- разработчик получает универсальный инструмент по созданию контента.

· Управление -- возможность ограничивать доступ к информации, добавлять, редактировать, удалять и многое другое.

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

· Представление -- можно менять цветовую палитру, расположение и многое другое любого элемента на вашем сайте.

Большинство современных CMS имеют модульную архитектуру, что позволяет администратору самому выбирать и настраивать те компоненты, которые ему необходимы.

Типичные модули:

динамическое меню,

блог,

новости,

опросы,

поиск по сайту,

статистика посещений,

гостевая книга и т. д.

Список популярных систем управления.

WordPress бесплатная система. Изначально создавалась для сайтов блогов. Благодаря простоте и функциональности приобрела свою популярность. Теперь эту систему используют для сайтов различных типов.

Joomla -- бесплатная CMS. Яркая и удобная, практичная и функциональная. Обладает понятным интерфейсом и разработчик предоставляет постоянные обновления.

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

· MODx -- одна из последних разработок. и продуктивная позволяет быстро и качественно настроить работу сайта.

· 1С Битрикс платный модуль. Создавалась программа от разработчиков известной 1С. На современном рынке представлена различными редакциями. Стоимость может значительно изменятся от функционального наполнения программного обеспечения.

WordPress -- система управления содержимым сайта с открытым исходным кодом; написана на PHP; сервер базы данных -- MySQL. Сфера применения -- от блогов до достаточно сложных новостных ресурсов и интернет-магазинов. Встроенная система «тем» и «плагинов» вместе с удачной архитектурой позволяет конструировать проекты широкой функциональной сложности.

Ссылки для CMS WordPress

O ru.wordpress.org - информация о программе

O https://wordpress.com/start/design-type - создать сайт

O https://название созданного сайта/wp-admin/options-general.php

Рекомендации по работе в WordPress

CMS WordPress устанавливается на сервер. Но есть и он-лайн версия программы.

Для выбора настроек для будущего сайта переходим по ссылке:

https://wordpress.com/start/design-type

1. Шаг 1

Выбираем «Создать сайт»

Шаг 2



Шаг «2» пропускаем. Тему для сайта выберем в настройках

3. Шаг 1

Вводим английскими буквами название будущего сайта.

Выбираем бесплатный хостинг.

4. Шаг 4



После заполнения форм осуществляется переход на сайт. Сайт представлен в виде стандартного шаблона. Для выбора «темы» для сайта открываем вкладку «Мои сайты».

Выбираем пункт «Темы».

Выбираем «Бесплатно». Из представленных шаблонов выбираем понравившийся.



Активируем стиль

Выбираем «Изменить дизайн»

Осуществляем настройку сайта:

Виджеты - это интерактивные блоки или баннеры, которые будут отображены на сайте.



После настроек цветовой схемы, виджетов и т.д. сохраняем новую версию сайта.

Для возвращения к настройкам выбираем .

Выбор данного элемента возможен при просмотре сайта

и выборе

Просмотр страниц осуществляется выбором вкладки «Мои сайты» - Страницы.

Редактирование осуществляется выбором троеточия в строке названия страницы.



После выбора редактирования открывается система управления страницей.

Работа с текстом достаточна проста. Также можно:

Для вставки изображений выбираем «Добавить медиафайл»



Ещё больше возможностей возможно при работе в полном меню для редактирования. Для входа в адресной строке вводим URL : /wp-admin/options-general.php https://название созданного сайта/wp-admin/options-general.php

Размещено на Allbest.ru