Практика разработки Web-страниц

Практика разработки Web-страниц

Если вы используете программы веб-дизайна, такие как FrontPage или Dreamweaver, вы сможете решить многие проблемы с помощью функций этих программ. Когда что-то не работает, проверьте, допускают ли установленные параметры выполнение нужного вам действия. Например, во FrontPage большинство элементов страницы имеет диалоговое окно свойств, в котором можно изменить параметры и решить проблему. Не стесняйтесь использовать службы и сайты поддержки. Вы удивитесь, как много распространенных проблем обсуждаются на сайтах в разделах <Часто задаваемые вопросы> (FAQ).
Если вы не можете заставить программу делать то, что вы хотите, переключитесь в режим HTML и посмотрите, что происходит.

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

GIF анимация не работает с броузером
Используя программное обеспечение для работы с графикой GIF, такое, как Adobe Image Ready или Macromedia Fireworks, вы можете создавать GIF анимацию, которая представляет собой небольшие ролики, проигрываемые броузером. GIF анимация выглядит и работает как обычная GIF графика, но, будучи правильно сделанной, она оживает на странице.

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

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

Гиперссылки не работают
Обычно гиперссылка не работает, если в ней неправильно указаны адрес или имя файла, или если указанный файл был перемещен или удален. В таком случае говорят, что гиперссылка нарушена. Вы и сами наверняка знаете, как неприятно столкнуться с неработающей гиперссылкой. Когда пользователь щелкает на нарушенной гиперссылке, броузер пытается найти адрес, а потом выдает сообщение об ошибке, например "Page not found".

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

Сайту не хватает рисунков
Говорят, что лучше один раз увидеть, чем сто раз услышать. Возможно, самое сложное при создании веб-страницы – это создать или найти изображения, которые помогут понять вашу информацию. Но от каких изображений останется хорошее впечатление? И где их можно найти? Как и большинство веб-дизайнеров, вы, возможно, хотите использовать комбинацию собственных изображений и изображений, взятых из Internet. Сборка графической веб-страницы чем-то похожа на создание коллажа из журнальных вырезок – вы собираете кусочки из различных источников, затем вырезаете, наклеиваете и добавляете текст для получения желаемого эффекта.

Веб-страница не отображается на экране полностью
Основное содержание вы обычно видите на странице без прокручивания, оно как бы находится "выше сгиба страницы" (above the fold) – это термин газетных редакторов, обозначающий то, что вы видите на титульном листе до того, как откроете газету. Когда при открытии страницы появляется содержание, всегда более вероятно, что оно будет замечено и прочитано. Всю важную информацию – вашу эмблему, информацию по перемещению по сайту, первичное сообщение или резюме страницы – поместите выше сгиба. Проблема состоит в том, что люди используют экраны разных размеров.

На страницах, созданных в FrontPage, не работают звук или видео
FrontPage может помочь вам добавить звук или видео на ваши страницы – например, вы можете задать мелодию, которая будет играть при открытии страницы. FrontPage позволяет включать видео и звук в нескольких форматах. К сожалению, вам, вероятно, придется обходиться без некоторых удобных свойств FrontPage для большинства мультимедиа – или потому, что они не поддерживают нужный вам аудио или видео формат, или потому, что они создают страницы, работающие только в Internet Explorer.

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

При публикации или дополнениях на страницах появляется сообщение об ошибке
Создав и протестировав веб-страницы, вы решили опубликовать их на сервере. (А если ваш сайт часто обновляется, вы будете публиковать страницы все время.) Редакторы веб-страниц, такие как HomeSite или Dreamweaver, могут публиковать ваши файлы автоматически, изменяя только те из них, которые изменились с последней публикации. Вы можете публиковать свои страницы вручную – либо в Интернет, с помощью FTP

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

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

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

Неправильный шрифт в таблице
Когда вы устанавливаете начертание или размер текста, используя тэг или стиль, то рассчитываете, что ваши настройки будут влиять на весь текст, которому присвоен данный стиль. Однако так получается не всегда. В зависимости от броузера пользователя, текст внутри таблицы может отображаться не тем шрифтом или не того размера, которые вы определили вне таблицы. Особенно этим отличается Netscape 4.

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

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

Форма размещается неверно
Чтобы привести форму в порядок, есть две возможности. Первая – использовать преформатированный текст (preformatted text), с которым броузер использует моношириные шрифты, показывает разбивку и разрывы строки в точности так, как показано в вашем HTML.

Фреймы не работают
Чтобы отображать фреймы, вам необходимы три вещи: страница, устанавливающая фреймсет (frameset) – общую структуру страницы, отдельные страницы, появляющиеся во фреймах, и броузер, способный отображать фреймы. Если какой-либо из этих элементов отсутствует, броузер отобразит пустую страницу, страницу с ошибкой или просто одну страницу без сделанных вами фреймов.

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

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

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

Основная структура страницы HTML
Страница HTML – это текстовый файл со следуюшей основной структурой:
Page Title
Первая строка является необязательной, но она сообщает HTML программам подтверждения, какую версию HTML вы собираетесь использовать на своей странице.

Правила формата стиля
Одним из правил каскадированной таблицы является селектор – тэг HTML, сопровождаемый параметрами CSS в скобках, отделенный точкой с запятой.

Особо важные адреса


Вебсервер в домашних условиях

Данная статья написана мной по мотивам частых вопросов службе поддержки хостинг-провайдера RunWeb.Ru (к которой я имею непосредственное отношение) по тестированию скриптов и настроек Apache на домашнем компьютере. Первоначально этот материал публиковался на сервере RunWeb.Ru и в рассылке "PHP для начинающих". Постепенно он расширялся по мере поступления вопросов от наших пользователей. Когда же набралось достаточно информации, я собрал ее в отдельную статью и решил, что она может быть полезна не только нашим пользователям хостинга, но и остальным жителям сети.
Поводом для статьи послужило желание создать единое руководство для пользователей, которое помогло бы им тестировать скрипты в домашних условиях, а также использовать возможности настроек Apache для дальнейшего использования на нашем сервере.

Продолжение

Раскрутка сайта в сети

На самом деле, про рекламные сети я слышал давно, все как-то руки не доходили разобраться с ними. Однако - дошли.
Если честно, не очень мне нравится этот способ раскручивать узлы. Может быть от того, что рисовать я с детства не умею, может - от неприязни к излишней графике на Вебе вообще... Ну да ладно, последние мои изыскания в этой области показали, что игра стоит свеч. Поиграв в рекламные сети, я добился 10% увеличения трафика на своем сервере.
Попробовал я несколько сетей, в итоге остановился на одной - reklama.ru. Почему именно эта - потому, что она изначально рассчитана на участников с большим траффиком. Flamingo мне не понравилась из-за того, что суммарное число показов маловато, InterReklama - крупнейшая баннерная сеть, но в ней нужно регистрить каждую свою страницу и для каждой - свой код, а у меня их больше четырех тысяч, да и порнография через нее слишком часто прет. Sputnik.Ru умирает, WebList умер (правда, есть слухи, что снова начнет работать).

Рекламные сети
Баннер

Управление сценариями просмотра Web-страниц

Современные гипертекстовые информационные системы условно можно представить в виде совокупности нескольких компонентов: систем хранения гипертекстовых объектов, систем отображения гипертекстовых объектов, систем подготовки гипертекстовых объектов и систем программирования просмотра совокупности гипертекстовых объектов. С этой точки зрения, технология World Wide Web только к 1996 году получила законченный, функционально полный вид. Первыми были разработаны системы хранения и просмотра (1989-1991), которые продолжают развиваться и в настоящее время. После 1990 года стали появляться первые системы подготовки документов. Наконец, в 1995 году были предложены первые языки управления сценариями просмотра. В данной статье речь пойдет как раз об одном из них - JavaScript.
Программирование процедуры просмотра гипертекстовой базы данных не является изобретением Netscape, Microsoft или Sun. Практически все локальные гипертекстовые системы в той или иной степени имеют программные средства манипулирования гипертекстовыми объектам

Стеки гипертекстовых ссылок

Тестирование web-приложений на скриптовых языках

Как уже было отмечено ранее, при работе с Web-приложением пользователь непосредственно взаимодействует с посредником в виде Web-браузера. Браузер, в свою очередь, взаимодействует с Web-сервером, на котором работает приложение, по протоколу HTTP (конечно, возможно использование других посредников и других протоколов, однако они применяются достаточно редко, и здесь мы их рассматривать не будем). Для передачи данных Web-браузера серверу протоколом HTTP [11] предусмотрено несколько методов передачи параметров, из которых в большинстве Web-приложений используются два — GET и POST. Параметры GET — это параметры, передаваемые непосредственно в адресной строке Web-браузера. Параметры POST передаются вместе с пакетами данных (и используются, как правило, либо для передачи больших объемов данных, поскольку не имеют ограничений на размер, либо чтобы не загромождать адресную строку браузера).
Чтобы протестировать приложение, необходимо знать, какие имена параметров оно ожидает увидеть в запросе и какие значения должны принимать эти параметры, чтобы выполнилась та или иная часть программы. Для выполнения этих задач необходим анализ потока данных в приложении. В общем случае эта задача нетривиальна и требует использования методов статического анализа кода; однако для каждого конкретного приложения с большой вероятностью такой анализ может быть достаточно простым. Тем более что при создании тестов не обязательно задаваться целью проанализировать все возможные варианты поведения приложения в зависимости от входных данных — следует исходить из желаемого соотношения качества тестов ко времени и ресурсам, необходимым для их разработки. Сложность создания инструмента для анализа потока данных зависит от структуры исходного кода приложения. Как будет показано ниже, во многих случаях за короткое время можно создать инструмент, производящий достаточно подробный разбор потока данных.

Извлечение имен параметров и их значений

XTML-справочник

Коротко о справочнике Это не перевод скучной спецификации и не попытка написать учебник. Задача справочника ? коротко и ясно описать действие всех элементов языка HTML, которые вы можете без опаски использовать при создании Internet-страниц, не боясь, что какая-то версия какого-либо браузера сделает вам неприятный сюрприз.
Иначе говоря, здесь представлен "классический" HTML, употребляемый профессиональными web-разработчиками. И ничего лишнего.
Все теги, не описанные в этом справочнике, можете смело выбросить в помойку.
Как устроен справочник
Очень просто. Эталоном построения справочника стали классические брошюры по всевозможным языкам программирования, описывающие элементы языка парой "элемент ? описание".

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

BODY
Указывает начало иконец тела HTML-документа. Между начальным иконечным тегами содержится текст документа, изображения итаблицы. Одним словом, все HTML-элементы, отвечающие заотображение документа, управление им игипертекстовые ссылки. Элемент BODY должен встречаться вдокументе неболее одного раза

FORM
Используется для создания заполяемой формы. Необходимо присутствие начального иконечного тегов. Внутри элемента FORM разрешается использовать большинство HTML-элементов

FRAME
Определяет фрейм иего свойства внутри FRAMESET-структуры. (см. элемент FRAMESET)

BASE
Указывает базовый адрес текущего документа (URL), который станет отправной точкой для расчета относительных адресов внутри документа. Элемент неимеет конечного тега. Обязательно присутствие хотя бы одного из атрибутов.

Заголовок HTML-документа
Создается спомощью элемента HEAD, между тегами которого размещаются элементы, содержащие техническую информацию о документе. Заголовок обычно располагается дотела документа (см. структуру HTML-документа).

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

Таблица базовых цветов
Это основные цвета, используемые вHTML. Именно эти цвета используются дизайнерами для создания страниц поисковых систем, атакже вдизайне сайтов согромной аудиторией, то есть используются там, где нужна максимальная совместимость. Все они прекрасно отображаются даже в256-цветном режиме работы видеокарты. Несомненно, для оригинального цветового дизайна обычных сайтов их маловато.

Definition Description
Открывает и закрывает список определений (терминов иих описаний). Определения задаются спомощью элементов DT иDD.

AREA
Создает область карты, определенной спомощью элемента MAP. Элемент должен располагаться между начальным иконечным тегами элемента MAP. Не имеет конечного тега.

APPLET
Имеет начальный иконечный теги. Используется для вставки вHTML-страницу Java-апплетов ? программ наязыке Java, исполняемых браузером навашем компьютере. Java-апплет исполняется вспециально отведенном для него месте, отображаясь вдокументе наподобие картинки. Поэтому многие атрибуты элемента APPLET сходны сатрибутами элемента IMG.

NOSCRIPT
Определяет текст, который будет отображен, если браузер покакой-либо причине неработает со скриптами.

CAPTION
Задает заголовок таблицы. Содержание заголовка должно состоять только из текста. Использование блочных элементов вэтом случае недопустимо.

ADDRESS
Находящийся между начальным иконечным тегами текст оформляется какпочтовый адрес. Чаще всего оформление выражается ввыделении строки адреса курсивом.

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

На работе и дома
Практически каждый сайт в той или иной мере страдает эгоизмом. А выражается этот эгоизм, как правило, в лени его создателя. Сейчас дизайнеру лень добиваться того, чтобы его сайт нормально смотрелся на браузерах, которые почему-то неустановлены на рабочем компьютере дизайнера. "Третий Нетскейп? Вы шутите! Им уже давно никто непользуется, посмотрите статистику!" ? вот его основной аргумент.