Библиотека программиста

Все, что необходимо начинающему и опытному программисту

Урок 2. Языки и браузеры в дизайне

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

Языки разметки: HTML, XHTML, XML, CSS и др. Это единственная категория, которую при создании веб-страниц нельзя обойти в принципе. Стоит отметить, что, если HTML одновременно отвечает и за содержание, и за оформление, то современная тенденция — корректное использование (X)HTML и XML для передачи семантики веб-страницы, а CSS — для оформления.

Языки активных сценариев, исполняемые на стороне сервера, в самом браузере, а результат выполнения выводящие на экран: JavaScript, JScript (все вместе и в ногу со временем — ECMAScript), VBScript.

Языки серверных сценариев, код которых выполняется на сервере (и не виден конечному пользователю), а результат формирует окончательную страницу и выдает в браузер посетителя: PHP, Perl, ASP, JSP, Parser, ColdFusion и другие. Собственно, ЯСС не работают без специализированных серверов, например, Apache и IIS. Часто они работают в сочетании с базами данных — изначально упорядоченными массивами текстовой информации (MySQL, PostgreSQL, SQLite, Oracle, MSSQL, Firebird и др.), для обращения к которым используются разновидности языка SQL.

Смешанная клиентско-серверная технология AJAX, при использовании которой клиент (браузер) и сервер обмениваются данными без перезагрузки страницы (в отличие от языков серверных сценариев), что ускоряет работу.

Встраиваемая растровая графика. Современные браузеры воспринимают изображения в форматах JPG, GIF и PNG. Поддержка формата BMP, похоже, ушла в прошлое. Сочетание (X)HTML и CSS-разметок с графикой и составляет основу верстки и дизайна большинства страниц.

Технология Flash (+ язык ActionScript). Используется как для анимированных векторных графических вставок в отдельных фрагментах веб-страниц, так и для построения целых сайтов. (Когда готовилась книга, компания Microsoft выпустила функционально подобную технологию Silverlight.) Собственно векторная графика на сайтах (например, формат SVG) поддерживается ограниченно.

Технология апплетов Java. Была популярной, поскольку позволяла создавать интересные визуальные эффекты. Ныне используется редко, например, для интерактивных карт.

Программы, исполняемые на сервере в помощь серверным языкам. Например, модули сервера для выполнения сценариев по времени (cron). Или программа по обработке графики, которая делает уменьшенные копии изображений по запросу сценария.

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

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

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

Делать сайт целиком на AJAX’е, чтобы навигация по нему была ужасной. Флэшролики (только последней версии Flash) делать не меньше двух мегабайтов только ради того, чтобы по экрану изредка проезжал автомобиль. Наконец, ставить на компьютер посетителя вредоносные программы.

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

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

Для написания кода существует, наверное, наибольшее количество редакторов. Среди общеизвестных монстров — Adobe GoLive, Microsoft FrontPage, Macromedia Dreamweaver и Homesite (все коммерческого типа). Общий их плюс для начинающих творцов и одновременно общий минус в том, что они автоматически генерируют код, являясь редакторами визуального типа (или типа WYSIWYG, сокращение от «What you see is what you get» — «Что видишь, то и получаешь»).

Текстовые блоки, иллюстрации и иные компоненты веб-страницы можно перетаскивать по рабочей области, работая, как в графическом редакторе. Как результат — автоматически генерируется код, чаще всего пригодный для очень ограниченного набора браузеров (так, сложная верстка в Microsoft FrontPage позволяет генерировать код, корректно обрабатываемый только браузером Microsoft же Internet Explorer).

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

В этом случае кодер получает намного больше контроля за конечным результатом, поскольку программа не «решает» за него. Отличие таких редакторов «блокнотного типа» от визуальных не только в том, что основной компонент программы — это поле для ввода текста, но и в том, что в них нет встроенного интерпретатора кода.
Например, Homesite и Dreamwever генерируют внешний вид страницы, основываясь на внутренних интерпретаторах (средствах отрисовки страниц), а текстовый редактор EditPlus Text Editor (тоже коммерческий) при установке в систему позволяет открывать написанные страницы в тех браузерах, которые пользователь укажет в настройках.

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

Различий больше.
Визуальный и текстовый типы — это базовое разделение (хотя все визуальные редакторы позволяют редактировать код и вручную, а есть текстовые редакторы с зачаточными средствами визуального редактирования).
Остальные различия кроются в наборах функций.

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

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

Cool Page обладает большим количеством встроенных шаблонов. А вот захотите ли вы пользоваться симпатичным и простым, но функциональным Kiss HTML Editor’ом, если узнаете, что его название никак не связано с романтикой поцелуев, а расшифровывается как Keep It Simple Stupid («Делай проще, глупый»)?

Из бесплатных популярных редакторов текстового и смешанного типа стоит также отметить CoffeCup Free HTML Editor («сайт за чашкой кофе») и 1st Page («первая страница»).
Из менее известных визуальных редакторов можно отметить, например, Namu6, PersonalWebKit, Web Office и MoreMotion Web Express (по описанию — редактор, позволяющий разрабатывать сайты и их страницы даже тем пользователям, которые не знакомы с HTML, что уже нонсенс).

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

Шаблоны веб-страниц в этих программах аккуратны, но слишком просты и годятся только для непритязательных разработчиков и их заказчиков. Чаще всего подобные редакторы, кроме чисто визуальных, способны работать с несколькими языками (зачастую в одном файле). Однако есть редакторы, предназначенные только для создания и редактирования таблиц стилей (CSS, например, Top Style или CSS Magic) или обработки XML-документов (к примеру, Microsoft XML Notepad). С одной стороны, удобно работать с минимальным набором многофункциональных инструментов, не загромождая рабочее пространство, с другой — если во главу угла ставится, к примеру, только программирование на PHP, то, возможно, стоит установить специализированный редактор именно для работы с этим языком.

Отдельно стоит отметить, что редакторы не со встроенными браузерами удобны более корректной работой с активными сценариями.

Дело в том, что у каждого браузера достаточно много особенностей в интерпретации сценариев на JavaScript, а язык VBScript поддерживается преимущественно одним браузером — Internet Explorer. Таким образом, если разработчик хочет, чтобы сценарии были совместимы со всеми распространенными браузерами, ему нельзя полагаться на встроенный интерпретатор какой-либо программы.

Логичным выводом является необходимое условие: «зоопарк браузеров» на компьютере разработчика (помимо собственно редакторов). О конфликтах браузеров и их производителей будет рассказано в следующих главах. Если редактор кода веб-мастер волен выбирать по своему вкусу, то браузеры для тестов выбирать не приходится: выбирают пользователи. А поскольку разработчик только в очень редких случаях может предугадать, какими программами просмотра будут пользоваться посетители сайта, ему нужно тестировать страницы во всех возможных браузерах.

<< Назад         В начало         Далее >>

Библиотека программиста. 2009.
Администратор: admin@programmer-lib.ru