Объяснительная записка
Перебирал “бумаги в столе” и обнаружил предлагаемый текст –
тезисы к курсу повышения квалификации специалистов привлекаемых к дистанционному
обучению. Перечитал и увидел полезность, как мне показалось, его размещения
в inet-e. Фрагментарность изложения обусловлена изъятием некоторых тем и
практических занятий, на которых отрабатывали применение основных тегов. Надеюсь,
что текст найдет своего читателя. Иногда полезно после "гроссбухов" почитать
чей-либо конспект.
Введение
Предлагаемый курс (фрагменты) основан на практическом опыте
разработки элементов дистанционного обучения и консультирования, оформленном
в виде Intranet ресурса “Информационные службы”. Основная направленность – изучение
технологии подготовки методического материала для публикации в Internet, минимально
необходимое изучение некоторых языков программирования, понимание особенностей
взаимодействия с Internet серверами.
Курс ориентирован на подготовленных пользователей, в том числе:
преподавателей, знающих ИТ;
лаборантов кафедр, ориентированных на ДО;
специалистов информационных подразделений.
Тема 1.2 Разработка модулей ДО (типографский, электронный).
Подчеркнуть неравнозначность типографской и электронной реализации
модуля. Типографский самодостаточен сам по себе, но может служить основой для
разработки электронной версии. Последний должен обладать большей интерактивностью,
обеспечивать гипертекстовое оформление материала, возможность использования
мультимедийных средств.
Простой пример: замена (дополнение) списка литературы ссылками
на источники в Inet, хотя это (ссылки) уже является хорошим тоном и для материалов,
издаваемых типографским способом.
Помнить тезисы:
Лучше (полезней, приятней) читать книгу, но искать информацию (справку)
проще, быстрей в электронной версии.
Самотестирование по печатному варианту сродни мазохизму – знать, где находятся
ответы и удерживать себя от подглядывания.
Раздел 2. Язык HTML
Тема 2.1 Назначение языка. Инструментарий.
- Гипертекст – документ с системой ссылок из видимой части
на другие самостоятельные фрагменты информации, которые могут находиться
в любой точке глобальной сети.
-Internet основан на модели клиент/сервер.
-Клиенты называются браузерами (навигаторами и т.д.).
-Сервер - принимает запросы от клиентов и предоставляет копии запрашиваемых
документов (сообщения об ошибках).
-Сервер не сохраняет предысторию сеанса: никакой информации о предыдущих
запросах (организация взаимодействия с пользователем - задача программиста).
-Организация взаимодействия с пользователем может реализовываться на стороне
сервера и, частично, на стороне клиента (Perl, PHP, VBSCRIPT, Java, JavaScript
и другие языки программирования сценариев).
- Способы описания текста (текстовые форматы, кодировка);
- Провести сравнение DOS файл, Win файл, HTML файл.
- Назначение HTML.
- Способ описания документа.
Инструментарий
Любой текстовый редактор, но сохранять как текст.
Word – громоздкий, Notepad – лучший инструмент для отладки (пояснить через
вызов из IE), Far – удобен как инструмент окончательного редактирования, изменения
кодировки и отправки на сервер (FTP клиент).
Интегрированные инструменты разработчика – поддерживают WYSIWYG, удобны
и замечательны во всех отношениях, но не самый экономный код.
Лирическое отступление
Проблемы последней мили и скорость.
“Тяжелый” и “легкий” сайт (код).
Лучший инструмент web мастера – “сделано ручками”.
Тема 2.3 Основные теги. Элементы дизайна
HTML документ – мультимедийный документ, т.е. одновременно могут быть включены
текст, графика, звук, видео и пр.
При разработке HTML документа учитываются правила оформления файла, синтаксис
элементов HTML, способы (и правила) управления элементами, способы и правила
оформления (внешний вид, дизайн) документа.
Все элементы в виде тегов, могут быть открывающие и закрывающие, вариант
– без закрывающего тега, некоторые допускают вложенность.
Структура файла.
<HTML>
<HEAD>
Заголовок
<TITLE>
Название
</TITLE>
<SCRIPT LANGUAGE=JavaScript>
</SCRIPT>
</HEAD>
<BODY>
Основная часть
<!-- Комментарий -->
</BODY>
</HTML>
Тег можно воспринимать как объект (в терминах ООП) со своими свойствами
(атрибуты), методами и событиями, например
<HR ALIGN=LEFT SIZE=3 WIDTH=50%>
На практическом занятии отработали только текст и элемент дизайна – разделительная
линия.
Без применения элементов разметки – все элементы один за другим, подряд,
по границам окна IE.
Универсальный способ разметка документа - использование таблиц.
Далее основные атрибуты <Table>
|
Тег
|
Назначение тега
|
| <TABLE>…</TABLE> |
- Таблица |
| <TR>…</TR> |
- Строка таблицы (Table Row) |
| <TD>…</TD> |
- Ячейка таблицы (Table Data - данные таблицы |
| ALIGN= тип |
- Тип горизонтального выравнивания: LEFT, CENTER, RIGHT |
| BACKGROUND=URL |
- URL файла, используемого в качестве фона таблицы |
| BGCOLOR=цвет |
- Цвет фона всей таблицы |
| BORDER= толщина |
- Толщина рамки таблицы (по умолчанию - 0 пикселей) |
| COLSPAN= число |
- Сколько столбцов объединить общей ячейкой |
| COLS= число |
- Количество колонок таблицы |
| ID |
- Идентификатор таблицы |
| ROWSPAN= число |
- Сколько строк объединить общей ячейкой |
| WIDHT= n |
- Ширина таблицы (в пикселях или процентах) |
Тема 2.5 Основы навигации
Как уже отмечалось, гипертекст – документ с системой ссылок на фрагменты
информации, которые могут находиться в любой точке глобальной сети.
Принципиально два объекта: кнопка навигации (что кликнуть) и ссылка (куда
пойдем).
Один тег <A> (ANCHOR – якорь, нечто прикрепляющее, удерживающее).
С помощью атрибута NAME делается метка в тексте
<A NAME=”glava1”></A>Глава1. Привет из Севастополя
С помощью атрибута HREF делается ссылка и элемент навигации, например, переход
внутри документа
<A HREF=”#glava1”>Переход к 1-й главе</A>
Слова “Переход к 1-й главе” будут подчеркнуты.
Переход на другой файл
<A HREF=”file2.htm”> Переход на “file2.htm”> </A>
Переход на метку вo втором файле (документе)
<A HREF=”file2#glava1”> Переход на “file2.htm, метка
“глава1” </A>
Ссылка на сторонние ресурсы
<A HREF=”http://www.ripka.ru/infoserv/index.htm>Инфослужбы
РИПКА </A>
- В ссылке, как всегда, указываем путь к документу, возможен полный и относительный.
Правила формирования – вспомним MS-DOS, но слэш прямой.
- Помнить!!! Имена файлов, язык ссылок – надежнее пользоваться правилами MS-DOS;
Вы будете размещать контент на сервере, а не на своей локальной машине – в
этом опасность полного пути, который будет предложен некоторыми инструментами.
Особенность разработки и отладки страниц на Web сервере intranet – тема отдельного
разговора.
Раздел 3. Форматирование текста
Тема 3.1 Элементы дизайна. Конвертация файлов Word.
Часто звучит слово “документ” - воздействует на восприятие. Возможно, “Inet
страница” будет вызывать иные ассоциации. Попробуйте на вкус – дизайн документа
и дизайн Inet страницы.
Еще один, относительно модный, термин – “контент”. Но помнить, работа программиста
связана с проектированием деятельности пользователя. Программист определяет
интерфейс человек- машина, т.е. частично внешнее представление, элементы интерактивности
(взаимодействия), способы взаимодействия.
Учебно - методический материал в ДО не есть учебник или методическое пособие
в привычном понимании. Всегда помнить, что чтение с экрана – удовольствие
небольшое. Необходимо каким-то образом преодолеть (компенсировать) это неудобство,
предоставить новые сервисы, уменьшить время доступа к необходимой информации.
Все это и определяет важность структурирования информации, требования к дизайну
и сервисам.
Лирическое отступление – культура поведения в Inete. Провоцирующее воздействие
гиперссылок, ссылки на сторонние ресурсы могут увести пользователя очень далеко
от предлагаемого материала (напомнить Избранное, Новое окно, поисковые серверы).
Другая сторона – преемственность материала, наличие контента (не структурированного
материала или структурированного применительно к другому “интерфейсу”).
…Итак… Элементы дизайна. Списки маркированные, нумерованные, словарные.
Изменение шрифтов
<FONT FASE=”Arial” SIZE=8 COLOR=”FF0000” >
<I>…</I> (курсив), <B>…</B> (полужирный
шрифт)
<STRIKE>… </STRIKE> (Перечеркнутый шрифт),
Использование наработок – конвертация в HTML. Возможны стандартные методы
– через буфер обмена в Dreamweaver, можно попытаться импортировать. Приемлемые
результаты получаются при сохранении из Word97 в HTML или, если сохранить
только текст, с дальнейшим форматированием “ручками”. Вся проблема заключается
в избыточности получаемого кода (отвратительные результаты дает конвертация
из Word2000).
Современные стандарты HTML предоставили новые возможности web мастеру -
каскадные таблицы стилей CSS (Cascading Style Sheets), слои и т.д., однако
существует проблема несовместимости (ограниченной совместимости) браузеров,
поэтому требуется проверка страниц на разных браузерах.
Тема 3.4 Фрейм, как элемент структуры и дизайна.
Существует проблема при работе с Inet сервером – происходит полное обновление
информации на стороне клиента (сервер не сохраняет информацию о сеансе обмена).
Разрешение ситуации – многооконный интерфейс, где окна независимы, каждое
отображает свою страничку. Это позволяет, с одной стороны, производить обновление
информации избирательно, а с другой – обеспечивает новые возможности в структурировании
информации и ее оформлении.
Синтаксис
<FRAMEASET COLS=”30%, 70%”> разделение на два окна,
далее заполняем окна (пример на 4 окна)
<FRAMESET COLS=”30%, 70%” ROWS=”40%, 60%”>
<FRAME SRC=”file1.htm” >
<FRAME SRC=”file2.htm” SCROLLING=”yes”>
<FRAME SRC=”file3.htm” >
<FRAME SRC=”file4.htm” >
</FRAMESET>
Все фреймы принадлежат главному окну, поэтому обращение к ним осуществляется,
например: parent.frames [1].document.write…
Информация может поступать в окна из разных ресурсов, но межфреймовое взаимодействие
допустимо только для информации одного домена.
Возможны различные комбинации фреймов
<FRAMESET ROWS="90,*" >
<FRAME SRC="Control.htm" SCROLLING=NO>
<FRAMESET COLS="250,*">
<FRAME SRC="javascript: self.Consol">
<FRAME NAME="quest" SRC="javascript: self.History">
</FRAMESET>
</FRAMESET>,
где: * остальная часть основного окна
Размер может быть нулевым.
Не приветствуется увлечение фреймами (Web-мастера ссылаются на “корявость”
дизайна?).
Раздел 4. Взаимодействие с сервером Inet
Тема 4.1 Формы ввода, объекты формы.
До сих пор взаимодействие с сервером ограничивалось выдачей новых страниц
(фрагментов документа) по ссылке. Этот механизм позволяет регулировать процесс
доступа к информации, но крайне непроизводителен как с точки зрения объемов
передачи, так и в связи с необходимостью подготовки и хранения всех вариаций
контента (пример баз данных “…” , “…”, в которых количество файлов…).
Повышение уровня интерактивности – предоставление возможности пользователю
формировать запросы к серверу, влиять на порядок и состав выдаваемой информации.
Реализация – формы ввода информации (бланк сбора…) для стороны клиента и обработка
запросов на стороне сервера с помощью Common Gateway Interface (CGI), который
является стандартом интерфейса (связи) внешней прикладной программы (браузера)
с Web сервером.
Но прежде вспомним логику работы сервера.…Повторить, напомнить, что получаем
копию документа, фактически мы указываем сетевой путь документа в ссылке,
… прямые слэши.
Рассмотрим структуру сервера на примере Apache, причем это наиболее распространенный
в мире сервер… Катологи htdocs и cgi-bin, назначение.
Программа обработки запроса на стороне сервера теоретически может быть
любой – иполняемый файл (*.exe), *.dll, набор команд операционной системы,
но чаще всего интерпретируемый файл, например, на языках Perl, PHP или байт-код
Java - сервлеты.
Обращение к обработчику, в данном случае к серверному сценарию, - просто
указание в ссылке пути к данной программе. В htdocs лежат статические страницы,
по умолчанию это “текущий каталог”. При обращении к сценарию необходимо
указывать его каталог, например cgi-bin для сервера Apache.
Обращение без параметров приведет к обработке по умолчанию, что равнозначно
получению статической странички. Для формирования условий запроса (параметров)
на стороне клиента и служит форма, элементы формы, например
<FORM METHOD=GET ACTION=”cgi-bin/zadan8.pl”>
Атрибут METHOD может принимать значения GET, POST (существуют и другие),
дать подробности, символ “?”, атрибут ACTION - путь к сценарию на сервере.
Форма содержит элементы для ввода и управления информацией
<INPUT TYPE="text" NAME="User name" SIZE="50" MAXLENGTH="99">
Типы INPUT – Checkbox, Hidden, Image, Password, Radio, Reset, Submit, Text.
Кроме того, например
<BUTTTON STYLE=”font-family: Arial; font-size: 14 pt; color: red”>…
или
<SELECT NAME="kurs" SIZE=4 MULTIPLE>
<OPTION SELECTED> “JavaScript” </OPTION>
<OPTION> “VBScript”</OPTION>
или
<TEXTAREA NAME="kurs" ROWS="9" COLS="50"> </TEXTAREA>
<MAP NAME=”карта изображения”>
<AREA SHAPE=Rect COORDS=”0, 0, 396, 133” HREF=file1.htm>
<AREA SHAPE=Circle COORDS=”392, 251, 114” HREF=file2.htm>
<AREA SHAPE=Polygon COORDS=”160, 140, 280, 220, 136, 381, 15, 200, 160,
140” HREF=file3.htm>
</MAP> и т.д., слишком много вариантов.
Кнопка “Submit” отправляет данные в соответствии с METHOD и ACTION, но это
не есть оптимальное решение: возможны ошибки, незавершенность данных при заполнении
формы, - все это приведет к дополнительным сеансам обмена с сервером. Обработку
части данных можно возложить на сторону клиента, т.е. некое подобие распределенной
обработки данных.
Сценарии на стороне клиента пишутся на языках сценариев, чаще всего используются
языки VBSCRIPT, JAVASCRIPT, изредка и PerlScript. Понятно, что браузер должен
поддерживать интерпретацию выбранного языка. В нашем курсе мы будем рассматривать
JAVASCRIPT.
Тема 3.5 Основные понятия языка JavaScript.
JavaScript – интерпретируемый объектный язык программирования. Работает
непосредственно в браузере (интерпретатор браузера). Провести сравнение с
Java.
JavaScript не является строго типизированным (свободно типизированный)
языком, т.е. после определения переменной и присвоения значения определенного
типа, допустимо присвоения другого типа
var probe1 = “Привет из Севастополя”;
probe1= 33;
Кстати, язык Java - строго типизирован.
В выражениях, включающие числовые и строковые значения, JavaScript преобразовывает
числовые значения в строковые.
для управления строковыми и числовыми значениями функции:
- eval вычисляет строку, преобразовывая ее в число.
- parseInt преобразовывает строку в целое число в указанном основании системы
счисления, если возможно.
- parseFloat преобразовывает строку в число с плавающей точкой, если возможно.
распознает следующие типы:
- Числа (шестнадцетиричные – 0х, восьмеричные начинать с 0)
- Логические (Булевы), значения true или false
- Строки, типа "Привет из Новочеркасска!"
- Пустой указатель, специальное ключевое слово
Операторы и выражения исчерпывающе рассмотрены в литературе, но обратите
внимание на типичную ошибку –> оператор = присваивает значение левому
операнду, а == …
Probe1=33; но if (Probe1==33){…
5.2 Язык Perl
Perl - интерпретируемый язык, приспособленный для обработки произвольных
текстовых файлов, извлечения из них необходимой информации и выдачи сообщений.
Этот язык весьма эффективен, но про него трудно сказать, что он элегантен.
Язык получил большое распространение (второе рождение) как инструмент создания
сценариев WWW-сервера, инструмент взаимодействия с базами
данных на стороне сервера. Здесь отступление по PHP…, но документов, готовых
решений, примеров пока представлено больше в Perl. Хотя…
Переменные
$day простая переменная day
$day[28] 29 элемент массива day
$day{'Feb'} значение 'Feb' из хэша %day
Простой массив начинается со знака @:
@day массив day - ($day[1],$day[2],...)
@day[3,4,5] то же, что и @day[3..5]
Скалярные переменные могут содержать различные типы данных, такие как числа,
строки или ссылки. Числа, например
12345 12345.67 .23E-10 0xffff шестнадцатеричная запись; 0377 восьмеричная
запись; 1_234_567_890 или
бэкслэш-последовательности \t табуляция \n перевод строки
Ассоциативный массив (хэш) начинается со знака процент %:
%day (key1, val1, key2, val2, ...)
Синтаксис для блока, например
for ($i = 1; $i < 10; $i++;) {
...
}
Возможны простые операторы.
Существуют зарезервированные переменные, мощные встроенные функции, вплоть
до сетевой работы и т.д. Если продолжать описывать язык, то … можно сформировать
отвращение к нему.
Если рассматривать язык только как инструмент CGI и ориентироваться на готовые
решения, то все становится проще и прозрачней (возможные опасности…)
5.4 Особенности применения Perl скриптов
Для использования конфигурационных настроек (каталог…) установить на диск С.
Файл начинается с указания пути к интерпретатору Perl, для наших примеров
#!c:\perl\bin\perl , если хостинг на Unix подобных, то, возможно, #!/usr/local/bin/perl
– необходимо уточнить у провайдера (напомнить о кодировке). После этого должен
работать, если…
К сожалению, в готовых решениях встречаются команды, не работающие в Win9X,
например flock и некоторые другие. Предпочтительно использовать примеры специально
ориентированные на Win9X, но их не так и много.
Задача существенно упрощается, если использовать стандартный модуль CGI.pm
или библиотеку cgi-lib.pl, для этого их необходимо включить в сценарий следующим
образом require "cgi-lib.pl";
Не будем разбираться с особенностями, но перейдем к рассмотрению некоторых
решений.
|
