четверг, 21 марта 2019 г.

Объект document

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

Фамилия, имя	Оценка
Попович, Пюрко	10
Воронина. Машир	11
Мельник	10
Лижанкова, Скороход	7
Вакуленко, Белов	8
Шкуренко, Крячик	10
Зацаренко, Хотинь	10
Игнатьева, Галайда	9
Динец, Луценко	11
Гусак, Замякин	11
Хохлов,Гаража	11
Поставной, Якимец	11

Пройдите курс "Знакомство с JavaScript" на сайте HtmlAcademy

Заготовки к практической работе "Морфей"

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

Анализируя свойства объекта document, сценарий JavaScript может определить значения различных параметров документа HTML. Кроме того, сценарию доступны локальные метки, формы и связи документа как элементы соответствующих массивов, а также информация из заголовка документа.

Свойства объекта document

Ниже перечислены свойства объекта document, доступные сценарию JavaScript:

Свойство	Описание
alinkColor	Цвет ссылок, выбранных пользователем
anchors	Массив локальных меток, размещенных в документе. Эти метки применяются для организации ссылок внутри документа
applets	Массив объектов, соответствующих аплетам Java, расположенным в документе HTML
bgColor	Цвет фона документа
cookie	Значение cookie для текущего документа
fgColor	Цвет текста
forms	Массив, содержащий в виде объектов все формы, расположенные в документе HTML
images	Массив растровых изображений, включенных в документ
lastModified	Дата последнего изменения документа HTML
linkColor	Цвет ссылок, размещенных в документе и еще не посещенных пользователем
links	Массив, содержащий все ссылки в документе HTML
location	Полный адрес URL документа HTML
referrer	Адрес URL вызывающего документа HTML
title	Заголовок документа, заданный с помощью оператора
URL	Полный адрес URL документа HTML
vlinkColor	Цвет ссылок, размещенных в документе и уже посещенных пользователем

Объект document может содержать в себе другие объекты, доступные как свойства:

Свойство	Описание
anchor	Локальная метка, определенная в документе HTML с помощью тэга <A>
form	Форма, определяемая в документе HTML с помощью оператора <FORM>
history	Список адресов URL, посещенных пользователем
link	Текст или изображение, играющее роль гипертекстовой ссылки. Создается с помощью оператора языка HTML <A>, в котором дополнительно задаются обработчики событий onClick и onMouseOver

Методы объекта document

Сценарии JavaScript могут вызывать следующие пять методов, определенных в объекте document:

Метод	Описание
clear	Удаление содержимого документа из окна просмотра
close	Закрытие потока данных, открытого для документа методом open. В окне будут отображены все изменения содержимого документа, сделанные сценарием после открытия потока
open	Открытие выходного потока для записи в документ HTML данных типа MIME при помощи методов write и writeln
write	Запись в документ произвольной конструкции языка HTML
writeln	Аналогично предыдущему, но в конце строки добавляется символ новой строки

Сценарии, работающие с объектом document

Цветовое оформление документа

Большинство свойств объекта objects доступно сценарию JavaScript как для чтения, так и для записи. В данном примере попробуем динамически изменить цветовое оформление документа HTML.

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

<HTML>

<HEAD>

<TITLE>Color Links</TITLE>

<SCRIPT LANGUAGE="JavaScript">

<!--

document.bgColor = "#00FF80";

document.fgColor = "#800080";

document.linkColor = "#000000";

document.alinkColor = "#FF0000";

document.vlinkColor = "#4000FF";

// -->

</SCRIPT>

</HEAD>

<BODY BGCOLOR=white>

<H1>Изменение цветового оформления</H1>

<P>Посетите эти серверы:

<P><A HREF="http://www.glasnet.ru/~frolov/index.html">Наша домашняя страница</A>

<P><A HREF="http://www.auramedia.ru">Каталог программ Auramedia</A>

<P><A HREF="http://www.microsoft.com/java/">Страница сервера Microsoft про Java</A>

<P><A HREF="#Локальный раздел">Локальный раздел</A>

<HR>

<H1><A NAME="Локальный раздел">Локальный раздел</A></H1>

<P>Этот локальный раздел вы можете просмотреть, даже если ваш компьютер не подключен к Internet

</BODY>

</HTML>

Обратите внимание, что наш сценарий переопределяет цвет фона, заданный параметром BGCOLOR в операторе <BODY>:

document.bgColor = "#00FF80";

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

Ссылки и метки в документе

Как известно, для того чтобы вставить в документ HTML ссылку или локальную метку, необходимо использовать тэг <A>. В общем виде этот оператор представлен ниже:

<A HREF=Адрес URL или локальная метка NAME="Имя локальной метки"

TARGET="Имя окна" onClick="Обработчик события: щелчок по ссылке"

onMouseOver="Обработчик события: курсор над ссылкой"> Текст ссылки </A>

Для каждой ссылки, размещенной в документе HTML, создается отдельный объект. Все такие объекты находятся в объекте документа Document как элементы массива links. Сценарий JavaScript может определить свойства каждой ссылки, расположенной в документе HTML, анализируя элементы объекта links.

Вот список этих свойств:

Свойство	Описание
hash	Имя локальной ссылки, если она определена в адресе URL
host	Имя узла и порт, указанные в адресе URL
hostname	Имя узла и доменное имя узла сети. Если доменное имя недоступно, вместо него указывается адрес IP
href	Полный адрес URL
pathname	Путь к объекту, указанный в адресе URL
port	Номер порта, используемого для передачи данных с сервером, указанным в данной ссылке
protocol	Строка названия протокола передачи данных (включающая символ "двоеточие"), указанного в ссылке
search	Строка запроса, указанная в адресе URL после символа "?"
target	Значение параметра TARGET, заданное в ссылке
length	Количество элементов в массиве links, то есть количество ссылок в текущем документе HTML

Основы JavaScript

Пройдите курс "Знакомство с JavaScript" на сайте HtmlAcademy

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

Язык сценариев JavaScript был создан на основе объектно – ориентированного языка Java. Технология скриптов позволяет странице динамически реагировать на поведение пользователя, но при этом не создает нагрузку на сеть. JavaScript работает только в составе HTML – страницы, и написанный скрипт начинает работать только тогда, когда страница загружена в браузер.

Возможности JavaScript:

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

Скрипты размещаются внутри тега <SCRIPT></SCRIPT>

Операторы разделяются знаком ;
Переменные типизировать не обязательно
Операция равенства записывается как в С++: ==
Несколько операций объединяются с помощью фигурных скобок {}
Язык чувствителен к регистру, то есть различает большие и маленькие буквы

Пример простейшего скрипта, выводящего на экран текстовое сообщение:

<html>
<body><script type="text/javascript">alert(«Первый скрипт!");</script>
</body>
</html>

В скриптах используются такие операторы управления:

FOR
WHILE
IF … ELSE
?

Для вывода используется оператор writeln().

Главная идея JavaScript – дать возможность пользователю изменять страницу в процессе просмотра. Для реализации этой идеи была предложена объектная модель документа

Суть модели – в том, что каждый элемент HTML – это объект, характеризующийся тремя показателями:

СВОЙСТВА
МЕТОДЫ
СОБЫТИЯ

Синтаксис объектной модели:

Объект.свойство
Объект.метод (список параметров)
Объект1.объект2.свойство

Свойства

Большинство тегов имеют атрибуты. Например, атрибут HREF тега A:

Если рассматривать элемент<A..>…</A> ак объект, то атрибут HREF будет задавать свойство гиперссылки

DOCUMENT.LINKS[0].HREF=“KUKU.HTM”;

Методы

Методы объекта определяют функции изменения его свойств. Например, с объектом document связаны методы open() write() close()

Пример скрипта, создающего новый документ и открывающего его в новом окне:

<html><body>
<script>
id=window.open("");
id.focus();
id.document.write("hello!");
</script>
</body></html>

События

Суть программирования скриптов состоит в написании подпрограмм обработки событий, которые могут происходить с объектами.

Пример: с объектом BUTTON(задается тегом <input type=button> - кнопка формы) может произойти событие «click» - то есть на кнопку могут нажать.

В этом примере скрипта при нажатии на кнопку появляется текстовое сообщение:

<html>
<head>
<script>
function cl() {alert("Я же просил – не кликайте!");
}</script></head><body><form><INPUT TYPE=BUTTON VALUE="Не кликайте тут" OnClick="cl()";>
</form>
</body>
</html>

В JavaScript есть три метода ввода информации пользователем или вывода ее на экран.

Метод Alert

Этот метод позволяет выводить окно сообщения с кнопкой ОК.

alert("Параметр_1")

Метод Confirm

Выводит окно сообщения с кнопками ОК и Cancel. Возвращает True, если нажата кнопка ОК, и False, если нажата кнопка Cancel.

confirm ("Параметр_1")

Метод Prompt

Если нажата кнопка ОК, возвращается напечатанный в поле текст, если нажата кнопка Cancel— возвращается False.

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

Prompt("Параметр_1", “Параметр_2“)

Пример скрипта с вопросами теста:

<html>
<body>
<script>
var s, i=0;
s=confirm("2+2=4?");
if (s==true) {alert("Good!"); i++;}
else alert("No!")
</script>
</body></html>

пятница, 15 марта 2019 г.

Реклама на веб-страницах

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

Скороход Лижанкова	9
Воронина и Машир	10
пономаренко пюрко	9
Мельник и Попович	10
Вакуленко . Белов	10
Шкуренко, Крячик	12
Поставной Литвишко	8

Динец Луценко	10
Гусак и Замякин	???
Хохлов Гаража	10
Якимец Рабковская	10
Игнатьева Галайда	10
Зацаренко и Хотинь	12

Что такое баннер?

Баннер - графическое изображение рекламного характера.

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

Рекламный баннер на странице Яндекса

Когда появились баннеры?

Своим появлением баннер обязан американской компании AT&T, предоставлявшей телефонные услуги. Именно эта фирма разместила на интернет-ресурсе hotwired.wired.com первый во всей истории баннер. Конечно, он был совсем простым. Имея размеры 648 на 60 пикселей, баннер, не мудрствуя лукаво, призывал кликнуть на него. Надпись на нём гласила: «Have you ever clicked your mouse right here? You will», что в переводе звучит как «Вы еще не кликали СЮДА? А придется».

Баннер компании AT&T

На Hotwired почти одновременно появились сразу несколько баннеров. Журналу в рамках первой кампании удалось привлечь таких крупных игроков, как MCI и Volvo. Впрочем, «привлечь» – не лучшее слово. Онлайновую рекламу клиенты получали в довесок к обычной, а часто и не знали о том, что размещаются в Интернете.

Завоевать доверие к новым медиа оказалось нелегко, хотя доля кликов по баннерам была совершенно невероятной – она достигала 78 процентов. Сейчас, через много лет, и один процент считается очень хорошим показателем.

Удивительно, но первая реклама в cети появилась всего через 12 дней после того, как был выпущен первый официальный браузер – Mosaic Netscape 0.9. Уже эту быстроту можно считать провозвестницей огромного успеха интернет-рекламы.

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

В первой половине 2009 года на так называемую поисковую рекламу, представляющую собой в основном текстовые объявления, пришлось 5,1 миллиарда долларов. На дисплейную же рекламу, к которой относятся и баннеры, – лишь 3,8 миллиарда долларов. Активно растет лишь сектор видеорекламы, но он слишком мал, чтобы его было заметно на фоне 10,9 миллиарда долларов – именно столько тратят за полгода в Интернете американские рекламодатели.

Баннеры постепенно уходят со сцены. Согласно данным компании ComScore, доля американских интернетчиков, хотя бы раз в месяц кликающих по баннеру, за период с июля 2007 по март 2009 года сократилась вдвое – с 32 до 16 процентов. При этом половина из них совершает 85 процентов кликов. Таким образом, по баннерам активно щелкают только те, кто любит их всей душой.

Какими должны быть размеры баннера?

Для каждой баннерообменной сети или портала установлены свои собственные требования к баннерам, как по стандартным размерам, так и по их объёму в килобайтах.

Наиболее распространёнными размерами считаются следующие:

88х31,
120х60,
100х100,
200х200,
250х250,
300х250,
336х280,
240х350,
240х400,
468х60,
728х90,
120х600,
160х600 (пикселей)

Этот же список, но в более удобном виде:

Стандарные размеры баннеров

Классификация баннеров

Баннеры делятся по виду на:

статичные - обычные картинки, в основном это логотипы.
анимационные - настоящие рекламные баннеры.

Различают также:

имиджевые
кликовые
информационные баннеры.

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

Баннеры могут также отличаться технологией изготовления.

Самый распространенный формат – GIF. Он подходит для неанимированных или несложных анимированных баннеров. При использовании GIF-формата размер его очень мал, и это хорошо, поскольку тогда повышается вероятность того, что пользователь загрузит баннер до конца. Баннеры формата GIF рисуются в различных растровых или векторных графических редакторах. Для этих целей используются специальные программы типа Ulead GIF Animator или Adobe ImegeReady.

Пример GIF-баннера

Особой популярностью несколько лет пользуются Flash – баннеры, созданные в программе Macromedia Flash. Преимущества по сравнению с GIF-баннерами:

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

Существует также третий, самый редкий стандарт, так называемый интерактивный баннер. Такие баннеры создаются с использованием технологии CGI, Java или VBS, а также элементов HTML и Flash-анимации.

среда, 13 марта 2019 г.

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

Результаты практической работы "Выбор хостинга для интернет-магазина":

Фамилия, имя	Оценка
Динец, Луценко	8
Зацаренко,Хотинь	11
Мельник	10
Гусак, Попович	10
Лижанкова, Пономаренко	9
Пюрко	11

Откройте таблицу "Выбор хостинга для интернет-магазина" и загрузите себе копию.

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

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

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

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

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

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

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

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

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

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

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

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

Рейтинг хостинг-провайдеров «Tophosting»

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

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

среда, 6 марта 2019 г.

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

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

Фамилия, имя	Оценка
Якимец, Рабковская	11
Шкуренко, Крячик	11
Скороход Лижанкова	10
Поставной Литвишко	10
Пономаренко Пюрко	12
Луценко и Динец	8
Игнатьева Галайда	12
Гусак и Замякин	9
Гаража Хохлов	11
MelnikValeria	11
Попович и Машир	?
Вакуленко Белов	?

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

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

Пример заготовки логотипа для сайта 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. Заключительный вариант логотипа.

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

А вот так он выглядит на самом сайте:

четверг, 21 марта 2019 г.