Колективний блог 11Б класу ліцею НІТ: февраля 2019

четверг, 28 февраля 2019 г.

Теги META. Поисковая оптимизация

Результаты практической работы "Метатеги":

Кобзева Ксения	10
Кучерявенко Ермакова	11
Андриенко , Терещенко, Познанский	10
Болгарова и Капуста	8
Зима, Кудряшова	10
Ростовцева, Савенкова	11

Откройте форму "Теги META" и выполните задание.

Параметры атрибута NAME

Параметр	Назначение	Пример	Комментарий
Description	Текстовое описание (краткая аннотация) конкретной страницы вашего сайта. Не стоит создавать слишком длинное и подробное описание вашего сайта, рекомендуется ограничиться текстом до 100 символов, поскольку поисковые машины, в большинстве случаев, имеют ограничение на количество индексируемых символов.	<META NAME="description" CONTENT="Сайт содержит информацию для любителей старинных автомобилей, на нем вы можете найти описание с фотографиями редких и эксклюзивных автомобилей">	Самый широко используемый тег. Практически все поисковые системы учитывают его при индексации. Значение этого тега очень важно для раскрутки сайта, практически все поисковые системы опираются на этот тег и выводят содержимое этого тега в результатах поиска (Google).
Keywords	Список ключевых слов, как правило, через запятую, соответствующих содержимому Вашего сайта. Это те слова, которые ваши клиенты могут использовать в поисковом запросе. Здесь также рекомендуется ограничиться списком до 30 слов. Можно поместить и наиболее частые опечатки ключевых слов. Также вы можете здесь записать и английские слова, соответствующие содержимому сайта.	<META NAME="keywords" CONTENT="реклама, дизайн, полиграфия">	Учитывается большинством поисковых систем.
Author	Автор, создатель сайта. Вряд ли используется поисковыми системами, и нужен скорее всего чтобы можно было показать что сайт сделан именно определенной персоной или фирмой.	<META NAME="AUTHOR" CONTENT="www.neo-systems.ru">

К группе метатегов относят и не имеющие обозначения "meta" стандартные теги и некоторые атрибуты web-документов:

<title>...</title> . Название документа (сайта, раздела, страницы). Допускается использование от 60 до 100 символов.
<img src=“”...alt="..."> . Подписи к графическим элементам.

Также рекомендую вам статью "Десять SEO-ошибок":

среда, 27 февраля 2019 г.

Графика в веб-дизайне

Результаты практической работы "Макет и верстка веб-страницы":

Фамилия, имя	Оценка за макет	Оценка за сайт
Кобзева, Куприенко	12	10
Зима, Кудряшова	11	9
Ермакова, Кучерявенко	11	10
Капуста, Болгарова	11	10
Савенкова, Ростовцева	10	10
Горбатенко, Ужва, Шилкова	7	8
Куц, Листопад, Лисняк	11	9
Андриенко, Познанский, Терещенко	9	10

Задание для практической работы

Загрузите текст веб-страницы "Антарктида" и нарисуйте ее макет от руки.

Затем создайте папку на рабочем столе, создайте в ней веб-страницу и папку с картинками.

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

Сверстайте веб-страницу (можно использовать заготовку "Сайт фотографа").

Сервисы для выбора фото и картинок:

GettyImages - американское фото-агентство, владеет одним из крупнейших в мире банком изображений: около 70 млн фотографий. Изображения предоставляются клиентам на основе как платного, так и бесплатного лицензирования

https://thenounproject.com/ - сервис для создания и выбора пиктограмм

Free Digital Photos — большая база, разбитая по категориям. Все изображения можно использовать для образовательных, личных или предпринимательских целей

Unsplash.com - бесплатный банк качественных фото

Free Images — большая галерея из более чем 35 тысяч снимков, разбитых по категориям и доступных для тематического поиска. Для скачивания понадобится авторизация.

http://lenagold.ru/ - коллекция бесплатных клипартов, в том числе с прозрачным фоном

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

Designers Pics — сайт, собирающий бесплатные фотографии в высоком разрешении. Есть общая лента обновлений и отдельный раздел, где снимки разбиты по категориям.

Freepik -www.freepik.com. Один из самых больших веб-сайтов, который предлагает сотни новых векторных изображений для личного и для коммерческого использования.

Vecteezy - www.vecteezy.com. Огромный «дом» векторной графики, изображений и всевозможных паттернов. Помимо бесплатных, есть доступные наборы только премиум-пользователям.

четверг, 21 февраля 2019 г.

Обработка фотографий и картинок в Photoshop

Как убрать белый фон?

Способ 1. Убрать белый фон у изображения можно инструментом Волшебный ластик.

Это один из самых простых и быстрых способов выполнения такого рода операции. Выбрав ластик на панели инструментов, щелкните им по белому фону.

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

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

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

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

Полезная команда для удаления каймы: Слой — Обработка краев — Убрать кайму.

Способ 2 Выделение фона при помощи инструмента Волшебная палочка.

Самое важное — не забыть разблокировать фоновый слой.

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

Теперь, выбрав Волшебную палочку, сделайте клик по фону. Остается лишь нажать клавишу Backspace. Появится вновь шахматный фон.

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

Как обрезать часть фото?

Кадрирование — это отсечение фрагментов фотографии с целью фокусирования или улучшения компоновки. Используйте инструмент «Рамка» для кадрирования и выравнивания фотографий в Photoshop. Инструмент «Рамка» является неразрушающим. После кадрирования можно восстановить часть обрезанного изображения, чтобы подобрать наилучшие границы кадра. Инструмент «Рамка» также предоставляет интуитивные методы выравнивания фотографии при кадрировании.

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

Кадрирование фотографии

Выберите инструмент «Рамка» на панели инструментов. По краям фотографии появятся границы кадра.
Нарисуйте новую область кадрирования или перетащите ручки угла и краев кадра на фотографии.
(Необязательно) Укажите параметры инструмента «Рамка» на панели «Управление».

Размер и пропорции

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

Параметры наложения

Выберите вид направляющих, задающих границы кадра изображения. Доступны следующие виды направляющих: «Правило 1/3», «Сетка» и «Золотое сечение». Чтобы просмотреть все параметры, нажмите «O».

Параметры инструмента «Рамка»

Выберите меню «Настройки» (значок шестеренки), чтобы указать дополнительные параметры инструмента «Рамка».

Использовать классический режим

Включите эту настройку, чтобы инструмент «Рамка» работал, как в предыдущих версиях Photoshop (CS5 и более ранних).

Просмотр автоматического центрирования

Включите эту настройку, чтобы поместить просматриваемое изображение в центр холста.

Показать отсеченную область

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

Включить экран кадрирования

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

Удаление обрезанных пикселов

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

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

4. Нажмите клавишу Enter (в Windows), чтобы выполнить кадрирование фотографии.

Как уменьшить размер фотографии?

Размер файла изображения — это физический размер файла, в котором хранится изображение. Он измеряется в килобайтах (КБ), мегабайтах (МБ) или гигабайтах (ГБ). Размер файла пропорционален размерам изображения в пикселах. Чем больше количество пикселов, тем детальнее изображение, получаемое при печати.

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

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

Photoshop поддерживает максимальные размеры изображения в пикселах, равные 300 000 по горизонтали и вертикали. Это ограничение определяет предельно допустимые размеры и разрешение изображения на экране и при печати.

Изменение размера изображения в пикселях

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

Выберите команду «Изображение» > «Размер изображения». Для сохранения текущего соотношения между высотой и шириной в пикселах выберите «Сохранить пропорции». Эта функция автоматически изменяет ширину при изменении высоты и наоборот.
В полях «Размерность» введите значения для ширины и высоты. Для ввода значений в процентах от текущих размеров выберите в качестве единицы измерения проценты. Новый размер файла изображения появляется в верхней части диалогового окна «Размер изображения» (старый размер указывается в скобках).

Сохранение в формате JPEG

Kоманду «Сохранить как...» можно использовать для уменьшения размера изображений в формате JPEG (*.jpg). JPEG обеспечивает уменьшение размера файла путем выборочного удаления данных. С помощью команды Файл > Экспорт > Сохранить для Web (старая версия) изображение можно также сохранить как один или несколько JPEG-файлов.

Вызовите команду Файл -Сохранить как... и выберите «JPEG» в меню «Тип файлов».

В диалоговом окне «Параметры JPEG» выберите желаемые параметры и нажмите кнопку «ОК».

Параметры изображения

Задает качество изображения. Выберите параметр в меню «Качество», передвиньте всплывающий ползунок «Качество» или введите значение от 0 до 12 в текстовое поле «Качество».

Параметры формата

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

вторник, 12 февраля 2019 г.

Таблицы в HTML

Результаты работы с тестом:

Фамилия, имя	Оценка
Кобзева, Куприенко	10
Кучерявенко и Ермакова	10
Ростовцева Савенкова	11
Зима, Кудряшова	10
Терещенко,Андриенко,познанский	9
Болгарова и Капуста	10
Шилкова, Горбатенко	4
Куц, Листопад	9
Лисняк и Мажара	8
Ищенко и Искендеров	11

Пройдите тест "Основные теги HTML":

Пройдите курс "Знакомство с таблицами" на сайте HTML Академии под руководством Инструктора Кекса.

четверг, 28 февраля 2019 г.