Программирование.

Создание: CGI, Javascript, Java, формы, датабазы
HTML: кодирование
Валидация: содержания, грамматических ошибок, работы линков
Тестирование в различных браузерах.

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

Несколько советов:

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

2. Рассортируйте ваши графические файлы по классам в зависимости от их размера. Старайтесь держать количество таких классов минимальным. Например: заголовки, подзаголовки, "ноготки", полная графика и т.д. Графические размеры от 1 до 5.

3. Подберите оптимальную палитру для графики в одном отдельно взятом классе и используйте ее на всех файлах данного класса. Работая над большим сайтом удобно использoвать DeBabelizer (http://www.equilibrium.com), сценарии которого позволяют очень быстро и точно процессить большое кол-во файлов. Так же, он, в отличие от Photoshop (http://www.adobe.com), не сдвигает цвета "безопасной веб-палитры" в сторону при оптимизации.

4. Используйте  в своем коде, оставляя пояснения для программистов и создателей текстов.

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

6. Если на странице очень много текста и других материалов, удалите все "возвраты каретки" и коменты из кода, что существенно снизит размер файла.

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

8. Делайте копии (Back up?) того, что сделали каждый день по окончанию работы.

9. Проверяйте свою работу на разных браузерах и основных ОС. Поменяйте настройки в браузерах выставив большие или маленькие размеры шрифтов, изменив цветовые настройки, откройте все меню и бары которые имеются.

10. Проверяйте:

- Грамматику

- - Правильное название файлов

- - Работу линков

- - Название страниц в поле Титул

- - Фоновые цвета

- - Целостность и тегов

- - Визуальное выравнивание

- - Что получится при изменении размеров окна браузера, шрифтов, цветов?

- - Различия резолюций. А как оно будет смотреться в монохроме?

11. Тестируйте, тестируйте и еще раз тестируйте. Подключайте как можно больше людей к этому процессу. Для заказчика это отличная возможность "поучаствовать" в проекте. Если есть возможность проверить на будущих посетителях, не упускайте ее. Внимательно следите как люди со свежим взглядом на сайт реагируют на вашу навигацию и систему наименований. Не пытайтесь помочь им "найти" что-либо, но попросите комментировать каждый шаг. Например, куда они ожидают попасть при клике на ту или иную кнопку? Часто бывает очень удобно распечатать весь сайт на бумаге и проверять стилистические и грамматические ошибки таким образом.

Сравнительная таблица популярности браузеров (по данным StatMarket за Январь 2001)

Microsoft68.94%

Netscape29.09%

Other1.96

Публикация и Маркетинг.

Публикация:

Выбор хост-провайдера, покупка или регистрация имени домейна
FTP веб-сайта на сервер: создание дерикторий, установка permissions
Последние проверки и валидации

Маркетинг:

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

Последние работы над сайтом могут включать следующее:

- Создание банеров/заголовков про запас

- - Добaвление последнего контекста

- - Запуск CGI сценариев

- - обновление линков (старайтесь всегда давать условные пути к документам, а не полный URL. К примеру, ../images/dot.gif вместо http://www.yoursite.ru/images/dot.gif Таким образом вам не придется менять данные во всех ссылках при переносе сайта на сервер нового провайдера, если в будущем возникнет подобная необходимость.)

- - написание мета-тегов

- - добавление авторских прав и предупреждений

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

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

- Краткость и Простота. Короткие адреса легче запоминаются, в них сложнее сделать ошибку: Gazeta.ru, Pupkin.com

- - Описание. Хорошо, когда по адресу можно догадаться о содержании сайта. Имя компании не всегда является достаточным пояснением: beerclub.com тумана не напустит

- Запоминаемость. Лучшие адреса добавляют к простоте элемент интереса - частенько игру слов, как в www.anekdotov.net - который поможет посетителям помнить это название через часы, дни и месяцы. Идеально, когда адрес можно запомнить, услышав в разговоре или по радио. Скопируйте структуру сайта со своей машины на сервер заказчика и еще раз протестируйте каждую страничку в брaузере. Конфигурация чужого сервера может потребовать изменений в сценариях или расширениях файлов (htm вместо html). Убедитесь все работает так, как вы предполагали.

Проведите хорошую рекламную компанию своему сайту.

14. Веб-страницы и веб-приложения.

Классификация веб-объектов.

Спецификация DTD. Понятие ортогональности и методы ее реализации.

Согласно спецификации W3C минимальный html-документ обязательно должен содержать всего два тега, без которых вообще не является никаким документом. Это теги !DOCTYPE (DTD) и TITLE. Почему настолько важен тег содержащий DTD? Именно тег !DOCTYPE определяет то, что документ является HTML, а не, например, XML-файлом.

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"

"http://www.w3.org/TR/REC-html40/strict.dtd">

DTD – Document Type Definition – определяет тип и принадлежность документа, а так же его версия и некоторые другие параметры, как например, в спецификации DTD полностью описаны все теги HTML 4.2 менее чем на 20 страницах.

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

Веб-страницы. Языки разметки. (HTML, XML)

Основы HTML

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

HTML-документ имеет достаточно строго структурирован:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<title>Untitled</title>

</head>

<body>

…

</body>

</html>

СПИСОК ЭЛЕМЕНТОВ HTML

базисные элементы (все документы на HTML должны содержать их)
определение структуры (вид задается параметрами программы-просмотрщика)
внешний вид (автор определяет внешний вид текста)
ссылки и графика
разделители
списки
фон и цвета
специальные символы
формы
таблицы
фреймы (frames)
язык Java
разное

Внимание: Если вам не ясна разница между HTML 2.0, HTML 3.0, HTML 3.2, и дополнениями Netscape, я советую прочитать комментарии W3C о развитии языка HTML.

УПОТРЕБЛЯЕМЫЕ СИМВОЛЫ

URL URL (адрес) внешнего файла (или просто имя файла в том же каталоге)

? Любое число (т.е. <H?> значит <H1>, <H2>, <H3>, и т.д.)

% Любой процент (т.е. <hr align=left width="%>" значит <hr align=left width="50%>", и т.д.)

*** Любой текст (т.е. ALT="***" значит заполните текст)

$$$$$$ Любое 16ричное число (т.е. BGCOLOR="#$$$$$$" значит BGCOLOR="#00FF1C", и т.д.)