Рассылка отдела "Компьютерные технологии" сайта KURSI.NM.RU
"Профессиональный WEB-дизайн. Знать что? Уметь что? Иметь что?"
Выпуск 1
Сегодня у нас самый первый выпуск. Его целесообразно посвятить выяснению общих вопросов, чтобы, как говорил В.И.Л., потом не возвращаться к ним бесконечное количество раз.
Постараемся очертить направления и темы, которые в дальнейших выпусках будут подлежать более тщательному рассмотрению.
Авторы пристрастны и выражают собственное мнение, которое в ряде случаев может сильно не совпадать с общеинтернетовским.

Полезные ссылки:


Спецификация языка гипертекстовой разметки (eng)



Софт-сервер
(в том числе - бесплатных программ) - softmail.ru



Демонстрационные учебные страницы по темам нашей рассылки


Содержание :
Введение в сайтостроение.
Создание удовлетворительного профессионального сайта: что для этого нужно ЗНАТЬ, УМЕТЬ, ИМЕТЬ.


1. Уточнение понятий: Что считать удовлетворительным профессиональным сайтом?

2. Знать.

3. Уметь.

4. Иметь.

 
  • Д О П О Л Н И Т Е Л Ь Н О:
    см. описание графических
    программ на soft-серверах
    (soft.mail.ru, softportal.ru, kraft.narod.ru, пр.); большая
    часть   программ - free,
    т. е. бесплатные; можете
    их скачать на свой HDD
    - см. там же описание
    упомянутых в рассылке
    текстовых редакторов

Какого уровня на сегодня достигла теория и практика сайтостроения?

ОТВЕТ: Теория еще долго будет объяснять что происходило и почему, опаздывая при этом несусветно. А практика, пожалуй, достигла уровня близкого к апогею, и развиваться дальше будет, по разным причинам, не семимильными шагами, как это происходило в предыдущие годы, а прирастая качественно по единицам и долям процентов. Примерно так, как совершенствовался телевизор с конца 60-х - основные качественные характеристики "ящика" тогда и сейчас, фактически, одни и те же.


1. Что считать удовлетворительным профессиональным сайтом?

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

С позиции дизайнерской эстетики качественный профессиональный сайт - это одно, с позиции отраслевой эффективности (раскрута) - другое.

Расхожие интернетовские оценки сайтов, вряд ли, можно воспринимать всерьез.

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

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


2. ЗНАТЬ.

Во-первых, HTML.
Во-вторых, специфику работы нескольких простых, сложных и "автоматических" (WYSIWYG) кодовых редакторов.
В-третьих, графические редакторы. Высококлассных интегрированных программ тут несколько десятков; широко известных - пять-семь.
В-четвертых, - скрипты: фактор неоднозначный. Должен вэб-мастер уметь сам писать интерпретируемые (транслируемые) программы, или достаточно умелого использования имеющейся в изобилии чужой продукции?
В-пятых, - серверные программы и серверные интерфейсы. Фактор тоже неоднозначный.
В-шестых, локальные программы и утилиты. Имеются в виду: "кнопочники", утилиты перекодировки, средства автоматизации многочисленных однородных изменений в страницы сайта, интерфейсы просмотра "картинки" при разных разрешениях монитора, удобные для вэб-среды программы проверки орфографии, анализаторы контента, пр. п.

    В части HTML и CSS признанными основными подразделами знаний есть такие:
  • структура гипертекстового документа;
  • теги структуры;
  • атрибуты тегов структуры;
  • собственно каскадные таблицы стилей;
  • мета-теги;
  • протоколы, интернет-адреса;
  • форматирование текста;
  • гиперссылки;
  • графические вставки;
  • фреймы;
  • формы;
  • свободное позиционирование;
  • вставка скриптов и апплетов.

Из них, на мой взгляд, наиболее актуальными для начинающего вэб-мастера являются только подразделы:
- теги и атрибуты структуры;
- форматирование текста (в том числе, посредством встроенных стилей);
- гиперссылки ( в том числе c image, <button>, map);
- графические вставки.

Темы "Таблицы каскадных стилей" и "Мета-теги" не относятся к числу самых актуальных.

Без CSS можно вообще обойтись. Особенно владельцам малых и средних сайтов.

Мета-теги приобретают важность на этапе активного раскрута сайта. Хотя и здесь, следует отметить: слухи о том, что за счет популярных и давно известных ( многочисленные хиты-наставления конца 90-х на эту тему бродят по сети до сих пор) способов оптимизации мета-тегов под поисковики можно существенно увеличить посещаемость сайта, сильно преувеличены.

Фреймы - это веха в сайтостроении, пройденная к концу 90-х годов. Ныне это и не модно, и не практично (поисковики с трудом находят и читают фреймы).

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

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


3. УМЕТЬ.

Просто перечислю с минимумом комментариев:

  • быстро, не задумываясь над интерфейсами, работать ( главным образом, с кодом) в простых текстовых редакторах (Блокнот, Word Pad, Bred2, ZeEditSyM1, MacroHTML, др.);

  • аналогичным образом работать с различными мелкими подсобными программами (редакторами CSS, "кнопочниками", просмотрщиками, перекодировщиками, программами, проверяющими правописание, ...)

  • хорошо владеть хотя бы одним большим графическим редактором, например вечно модным Phоtoshop-ом (необходимость явно не первого порядка, но это нужно хотя бы для того, чтобы не испытывать комплекса неполноценности); все остальные - факультативно.
    Мощные графические пакеты, во всем размахе своих возможностей - как-то: трехмерные студии, Adobe Illustrator, Corel, Ulead PhotoImpact, т.п. - это для гурманов, энциклопедистов и специализирующихся на вэб-графике. Большинству же вэб-мастеров требуется лишь время от времени произвести обрезку рисунка под нужный геометрический размер да конвертировать графический файл из одного формата в другой (большинство серверов беспроблемно воспринимают только два вида графических расширений, .gif и .jpg).

  • быстро, не задумываясь над интерфейсами, манипулировать с двумя-тремя визуальными редакторами.
    Распространенное в Интернет мнение, что визуальные редакторы вэб-сайтов и вэб-страниц, так называемые WYSIWYG, не способны удовлетворить серьезного мастера - верно лишь на 50%.

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

    Список удобных и лицензионно-доступных WYSIWYG-ов перечислю в следующем параграфе; здесь упомяну лишь о полу-автомате, полу-WYSIWYG-е - Dreamweaver, который дает возможность вполне комфортно писать код вручную и в то же время автоматизировать многие рутинные операции (такие, как оформление точек вызова почтового сервиса, вставка ссылок, форматирование текста и объектов, выравнивание текста и объектов, пр.). Набор сервисов Dreamweaver имеет много пробелов, в том числе по тривиальным, часто встречающимся операциям, поэтому даже тому приверженцу Dreamweaver, кто захочет совсем отказаться от работы непосредственно с кодом, неизбежно придется этим заниматься.


4. ИМЕТЬ.

1. Компьютер с двумя, а лучше с тремя раздельными системными дисками. Диски могут быть разделены физически, т.е. это будут отдельные винчестеры, - делать это , вряд ли, целесообразно; или же это будут специальным образом обособленные разделы на одном винчестере. Осуществить это можно при помощи программы Partition Magic; начиная с пятой версии, она многофункциональна, удобна и надежна.

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

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

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

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

 

2. Полуавтомат Macromedia Dreamweaver, установленный во все разделы и одинаково конфигурированный.

3. Два-три простых кодовых HTML-редактора в каждом разделе. Например, Bred2, ZeEditSyM1, Квикер (см. каталог Редакторы на soft.mail.ru)

4. Один большой WYSIWYG. Например, NetObject Fusion ( официальный конструктор сайтов бесплатного англоязычного портала netfirms.com; его открытое использование не приведет к конфликту авторских прав), WebSite Complete Deluxe Edition, WebShop XL Boomerang, Satecraft. Скачать их бесплатно из сети почти невозможно из-за большого объема. Они есть в продаже на широко распространенных тематических дисках. Все конструкторы, кроме Satecraft, достаточно сложны и капризны в применении.

5. Графические пакеты. Рекомендую Adobe Illustrator, Adobe Photoshop, Ulead PhotoImpact, Macromedia Fire Works. Два из них мне не нравятся, но в них есть отдельные уникальные опции, которые именно e у них удобны, как нигде.

6. "Кнопочники". Например, Liatro, Button Magic.

7. Home Site - для дублирования пробелов в Dreamweaver и замены по отдельным операциям простых кодовых HTML-редакторов.

8. Пакеты (программы осмысленного программирования или автогенераторы) для изготовления и корректирования апплетов и скриптов на языках php, javascript, perl.

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

10. ...

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

100. Не могу не высказаться относительно главного интернетовского фетиша - различного рода бесплатностей. Следует помнить, что все в этой части предельно лимитировано: никто не будет учить бесплатно и даже за несколько долларов тому, как заработать миллион долларов, никто не выставит в бесплатный soft-каталог действительно ценную программу - все бесплатные программы и сервисы есть либо тренировочные, либо второразрядные, а чтобы быстро победить надо пользоваться перворазрядными возможностями. Не возможно в разумный срок всерьез научиться чему-либо с нуля по самоучителям, не обучаясь в платных школах, на курсах, на факультетах переподготовки...
Для успешной работы в сфере вэб-дизайна и сайтостроения очень не помешал бы индивидуальный расчетный счет, открытый вэб-мастером в одной из систем электронных платежей ( например, в системе Webmoney или Яндекс. Деньги). Оттуда без каких-либо пограничных и таможенных проблем (оформлений) можно мгновенно перечислять деньги в любую точку мира и быстро получать истинно полезную информацию, высокоэффективное программное обеспечение, срочно необходимый сервис.

  Евгений Потто

 



Практические занятия с не очень опытными WEB-дизайнерами:

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

Сейчас там есть уже порядка десяти страниц.

- Тренировочная страница по изобразительным и функциональным возможностям CSS.
  До массированного применения CSS.

- Тренировочная страница по изобразительным и функциональным возможностям CSS.
   После "массированного" применения CSS.

Примечание: Замена на вэб-странице одних объектов и параметров CSS на другие способно кардинально поменять ее цветовые характеристики, геометрические размеры, некоторые функциональные качества. В образце это сделано относительно параметров ссылок и окон типовой почтовой формы. Код страницы и и таблицу каскадных стилей можно при желании просмотреть и копировать.

- Образец простого каркаса WEB-страницы с "жесткой" конструкцией

Примечание:
"Жесткая" конструкция - это когда внешние габаритные размеры вэб-страницы (ширина) заданы в абсолютных физических единицах, пикселях, сантиметрах, дюймах, т.п.
Страница не изменяет свои размеры в зависимости от ширины окна браузера и разрешения экрана.
Например, внешние размеры вэб-страницы заданы равными 810 пиксель.
При просмотре в мониторе с разрешением 800 на 600 страница немного не поместится в экран, и появится горизонтальная полоса прокрутки с малым диапазоном действия. В мониторе с разрешением 640 на 480 уже почти одна четверть изо будет за экраном, и появится горизонтальная полоса прокрутки с большим диапазоном регулировки.

- Образец простого каркаса WEB-страницы с "жесткой" конструкцией-код HTML

- Образец простого каркаса WEB-страницы с "мягкой" конструкцией

Примечание:
"Мягкая" конструкция - это когда внешние габаритные размеры вэб-страницы (ширина) заданы в относительных единицах (процентах) в сравнении с материнским объектом (окном браузера).
Страница изменяет свои размеры в зависимости от ширины окна браузера и разрешения экрана. Страницу постоянно видно полностью; полоса горизонтальной прокрутки не появляется

- Образец простого каркаса WEB-страницы с "мягкой" конструкцией-код HTML

- Др.

 

 

Заходите на наш сайт kursi.nm.ru.
Раздел Компьютерные технологии находится в стадии становления; в него будут постоянно добавляться новые статьи (наших и сторонних авторов), справочная информация по вэб-дизайну, материалы для скачивания.

 

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

Здесь можно также скачать бесплатные электронные книги по интернет-технологиям бизнеса и успеха , подписаться на другие наши рассылки.


ВОПРОС:

ОТВЕТ:

Вопросы и ответы присылайте на E-mail:
vzlett@yandex.ru


Присылайте нам свои статьи, информационные материалы. Мы их с благодарностью опубликуем на сайте с указанием всех ваших реквизитов и ссылок E-mail:
vzlett@yandex.ru


Hosted by uCoz