LearningApps: Логин stu10b72 Пароль sonne61

вторник, 28 февраля 2017 г.

Логотип и фавикон

Результаты создания логотипа фитнес -клуба:

Фамилия, имя
Оценка
Антоненко
6
Демиденко
9
Барабаш
10
Калениченко, Гуливатая
8
Пушкеля, Денисенко
11
Тимочко,Зосим
11
Поддубная
8
Губа и Ткаченко
8
Шаховая,Злуницына
10










 




Что такое логотип?

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

Логотипы бывают трех типов:

         Текстовые. Как правило, в этом случае в качестве лого используется графическое начертание названия
         Символьные. В качестве logo выступает какая-то картинка или изображение, а порой и какой-нибудь зверек (котенок, собака и т.д.). Также в некоторых случаях логотипом может стать «оживший» предмет (например, как в ворде – скрепка-помощник с глазами)
         Комбинированные. В этом случае logo комбинированный, он состоит и из графического текста, и из символа

Требования к логотипу:

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

Что такое фавикон?

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

Как создать фавикон?

         Использовать генератор фавиконов (например, http://favicon.by/)
         Создать в графическом редакторе изображение размера 16×16 пикселей формата ICO, поместить в корневой каталог сайта под именем favicon.ico.

Примеры фавиконов в заголовке закладки браузера

Подключается фавикон с помощью тега 


<link rel=«icon» href=» http://путь к файлу с favicon.ico»>

Этапы создания лого:

1. Дизайнерские предпочтения

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

2. Исследование конкурентов

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

3.   Рисование эскизов и концептуализация

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

4. Воплощение на компьютере



У автора эскизов, которые вы можете видеть выше была идея использовать буквы U и P в логотипе и составить из них фигуру человека прыгающего или парящего в воздухе. После того как был выбран один наиболее подходящий эскиз автор экспериментировал создавая разные его варианты в  Adobe Illustrator. Ниже вы можете видеть шесть вариантов созданных авторам во время экспериментов. В результате был выбран левый нижний вариант. Данный логотип изображает абстрактного человека прыгающего или парящего в воздухе, символизирующего энергию, хорошее здоровье, жизненный баланс, подвижность, что соответствует тематике сайта.

5.   Выбор шрифта

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


6.   Цвет

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


7.   Заключительный вариант логотипа.


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



среда, 15 февраля 2017 г.

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

Откройте карту памяти и добавьте на нее новый блок с описанием вашей проблемы:
Логин:lja2010k@gmail.com
Пароль: student2016



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


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

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

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

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

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

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

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

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

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





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

Результаты теста "Теги МЕТА":

Фамилия, имя
Оценка
Кириченко
8
Антоненко
6
Калениченко
11
Гуливатая
9
Радченко
10
Барабаш
11
Демиденко
10
Сектименко
8
Белоус
8
Секретнюк
9
Батраченко
9
Кучеренко
10
Губа,Лончук
7
Зосим, Тимочко
11
Кононова ,Поддубная
9
Кривенец Никита, Валерий Буркацкий
10
Денисенко, Пушкеля
12


Поисковая оптимизация (search engine optimization, SEO) — комплекс мер по внутренней и внешней оптимизации для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей с целью увеличения сетевого трафика (для информационных ресурсов) и потенциальных клиентов (для коммерческих ресурсов) и последующей монетизации (получения дохода) этого трафика.

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


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

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

Основное предназначение метатегов - представить несколькими словами содержание всего вашего сайта. Метатеги облегчают поиск поисковым машинам.


META-теги имеют два возможных атрибута:

  • <META HTTP-EQUIV="имя" CONTENT="содержимое">
  • <META NAME="имя" CONTENT="содержимое">

META-теги должны находиться в заголовке HTML-документа между <HEAD> и </HEAD> (особенно это важно для документов, использующих фреймы).

Стандартом HTML 4.01 значения и имена мета-тегов НЕ оговариваются, поэтому мы будем рассматривать те значения, которые уже устоялись в интернете и используются чаще других. 


Параметры атрибута 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="..."> . Подписи к графическим элементам.
Откройте форму "Теги META" и выполните задание.

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



вторник, 14 февраля 2017 г.

Хостинг и продвижение сайта


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

Этапы создания веб-сайта:

  • Определение целей и функций сайта
  • Создание структуры (схемы) сайта
  • Подбор аппаратных и программных средств, необходимых для реализации сайта
  • Создание отдельных страниц
  • Тестирование
  • Публикация страниц на сервере
  • Реклама сайта
  • Поддержка и развитие сайта

На начальном этапе создания определяются:

  • Цель создания
  • Потенциальная аудитория
  • Функции сайта

На этапе подбора аппаратных и программных средств определяются:

  • Виды материального обеспечения (сервер) и прикладных программ для сайта (поисковые системы, интерфейс и т.д.)
  • Регистрация доменного имени
  • Выбор технологии доступа к базам данных (PHP, CGI  и т.д.)
  • Выбор инструментов написания HTML-кода
  • Выбор инструментов создания графики и анимации

Этап публикации страниц на сервере включает:

  • Перенос html-файлов, графики, анимации и т.д. на сервер
  • Создание структуры базы данных на сервере
  • Тестирование работы веб-сайта на сервере
  • Оценка скорости загрузки в различных режимах
  • Этап рекламы и продвижения сайта включает:
  • Регистрацию сайта в поисковых системах
  • Регистрацию в баннерных системах обмена. Для коммерческих ресурсов-  покупка баннерной рекламы
  • Обновление содержимого, модернизация графики, отслеживание посещаемости сайта

 Анализ серверов платного и бесплатного хостинга:


Платный хостинг
Бесплатный хостинг
Доменное имя 2-го уровня Sitename.ru
Доменное имя 3-го уровня Sitename.hostingname.ru
Надежный сервер
Возможны неполадки с серверов
Невозможно удаления сайта клиента из базы данных
Возможно удаление сайта клиента без объяснения причины
Оперативная служба поддержки
Медленная служба поддержки
Поддержка технологий PHP, MySQL, CGI и т.д.
Эти технологии поддерживаются не всегда


Здесь вы можете ознакомиться с рейтингами и обзорами самых популярных хостингов Украины, России и Европы:


Бесплатный хостинг с PHP и MySQL


Обзор 7 лучших бесплатных хостингов для своего сайта с PHP и MySQL

среда, 8 февраля 2017 г.

Цвета в web-дизайне

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

Цветовая теория: основные принципы. Умение сочетать цвета


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

Рассмотрим цветовой круг.



Цветовой круг является непременным атрибутом многих дизайнеров и художников по всему миру. Это идеальное доказательства теории, что гениальное всегда просто. Круг позволяет вам выбрать цвета, которые гармонировали бы вместе. Он состоит из 6 основных цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый и дополнительных цветов.

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

Основные цвета

Есть три основных цвета: красный (# ff0000 в HTML или # F00 в CSS), желтый (# FFFF00 в HTML или # ff0 в CSS) и голубой (# 0000FF в HTML или # 00f в CSS). Нельзя их получить путем смешивания других цветов. Дополнительные цвета могут быть сформированы путем объединения этих трех цветов.

Составные цвета

Есть также три основных: оранжевый (# ff9900 в HTML или # F90 в CSS), зеленый (# 00FF00 в HTML или # 0f0 в CSS) и фиолетовый (# FF00FF в HTML или # f0f в CSS). Вы можете получить их путем смешивания красного и желтого(оранжевого), желтого и синего (зеленый) и синего и красного (фиолетовый).

Третичные цвета

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

Дополнительные цвета

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

Аналогичные цвета

Эти цвета расположены рядом друг с другом на цветовом круге. Они обычно смотрят очень хорошо вместе. Использование таких цветовых сочетаний вызывает чувство комфортa у посетителей Вашего сайта.
Значение цветов

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

Красный


В основном связан с азартом, смелостью и желанием. Красный цвет любви, силы, энергии, лидерства и волнения. Это сильный цвет, и вы должны знать о некоторых его негативных эмоциях: опасность, тревога.

Голубой



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




Желтый


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


Оранжевый


Бодрость и творчество. Ассоциируется с дружелюбием, уверенностью, игривостью, мужеством, стойкостью.



Фиолетовый



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



Зеленый

Цвет гармонии, природы, исцеления, жизни, питания и здоровья. Кроме того, часто связан с деньгами.





Коричневый.

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




Серый




Вызывает чувство серьезности, консерватизма и традиционализма. Возбуждает ощущение чистоты и невинности.

 

Розовый

Выражает нежность, романтичность, женственность, пассивность, привязанность, воспитание, слабость.


Черный

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



Белый


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




Если вы хотите, чтобы текстовое содержимое было легко читаемым, выбирайте контрастные цвета.

Оптимальное количество цветов. Не делайте из вашего сайта цирк.

Используйте необходимое количество цветов. Минимальное количество цветов может способствовать серости вашего сайта.

Если вам нужно привлечь посетителя, применяйте интенсивные цвета.


Полезные ссылки по теме: