Новые материалы
Web-документы и программы для работы с ними
Интернет представляет собой гигантский набор информации, основанной на гипертекстовых документах. Любой гипертекстовый документ представляет собой обычный текстовый файл в формате ANSI ASCII (или другой кодировке, например, UTF), содержащий собственно текст и специальные теги для его разметки, а также ссылки на другие подобные документы, графические изображения и любые иные файлы. Когда браузер — программа просмотра гипертекста — загружает подобный файл, все теги обрабатываются и содержимое файла форматируется для отображения. Теги задаются в файле и обрабатываются браузером в соответствии с правилами специального языка — HTML (Hyper Text Markup Language — язык разметки гипертекста).
Следует отметить, что HTML, вопреки распространенному заблуждению, ни в коей мере не является языком программирования. HTML — это типичный язык разметки, т.е. с его помощью можно оформлять документы, создавать ссылки, но никак не писать программы. Даже специальные эффекты, которые можно увидеть на web-страницах, создаются не с помощью HTML, а с использованием дополнительных средств — например, встроенных в документ программ на языке JavaScript, или с использованием Flash-роликов.
ВЕБ-ИНТЕРФЕЙС ЗА 15 МИНУТ | Как сделать графический интерфейс для программы на Python / JS
Путешествуя по сети, вы, вероятно, уже не раз задавались вопросом: а как созданы все эти страницы? Любой браузер позволяет просмотреть исходный текст HTML-документа. Для MSIE это команда «Просмотр HTML-кода» из меню «Вид», в других браузерах так же предусмотрены подобные команды, более того, во всех Mozilla-браузерах для этих целей имеется сочетание «горячих клавиш» Ctrl+U.
Например, исходный текст HTML-документа, изображенного на рис. 1.1 показан на рис. 1.2. Таким образом, если вам приглянулась та или иная страница, вы всегда можете просмотреть, как она сделана.
Сразу хочу оговориться, что если вы видите в заголовке страницы что-либо вроде «Microsoft FrontPage», смело закрывайте окно просмотра источника: скорее всего, ничего полезного извлечь все равно не удастся. Автоматические генераторы HTML составляют код страниц так, как это им удобно, и никакой структуры документа за мешаниной тегов вы не увидите. Не намного лучше обстоят дела и у CMS — систем управления сайтом, зачастую генерирующим такой же мусорный код.
Из доступности исходных текстов страниц следует сделать два вывода: во-первых, вы всегда можете воспользоваться чужим опытом; во-вторых, все ваше творчество также будет доступно в исходном виде для всех посетителей ваших страниц. Хорошо это или плохо, но так все устроено, и ничего изменить мы не в силах.
Возможно, если вы посмотрите на исходный текст сейчас, то ничего не поймете, но, уже прочитав только первую часть книги, вам будет совершенно ясно что и для чего используется, а изучив книгу до конца, вы сами сможете создавать практически сколь угодно сложные и интересные страницы.
Учим HTML и CSS за 7 часов! Уроки по созданию сайтов Полный курс HTML и CSS с нуля до профессионала
Рис. 1.1. Внешний вид HTML-страницы в браузере Mozilla Firefox
Рис. 1.2. Исходный текст документа при просмотре в Mozilla Firefox
Действительные документы HTML
Возможно, вы будете удивлены, если узнаете, что большинство документов, находящихся в сети, не являются действительными документами HTML 4.0. Это объясняется тем, что браузеры весьма снисходительно относятся к неточностям в разметке документов. Кроме того, большинство из существующих редакторов по-прежнему используют устаревшие и отмененные в HTML 4.0 атрибуты тегов для форматирования документов.
Такая ситуация изначально была вызвана проблемами совместимости различных версий браузеров с теми или иными стандартами HTML. Например, Netscape и MSIE до версии 3.0 включительно не поддерживали таблицы стилей, а более новые версии допускали ряд ошибок при их обработке. Кроме того, разные браузеры стремились отобразить одну и ту же страницу каждый по-своему. Впрочем, к настоящему моменту пользователей, все еще использующих столь старые программы уже не осталось, поэтому, разрабатывая современные страницы для интернета, следует придерживаться существующих стандартов. Для документов WWW таковым в настоящий момент является HTML 4.01, а так же два его «наследника» — языки XHTML 1.0 и HTML 5.
Даже в не самых современных браузерах, включая MSIE 6.0 и, особенно, Mozilla (имеется ввиду ранние версии вроде Firefox 1.x, в версиях 3.0 и выше поддержка действительно полная), поддержка HTML 4 обеспечена практически на все 100%. Браузер Opera так же очень корректно обрабатывает HTML 4. Что касается XHTML, то этот язык как таковой поддерживается лишь браузерами Mozilla, однако все остальные браузеры прекрасно понимают написанные по правилам XHTML страницы, интерпретируя их с точки зрения «обычного» HTML.
ПРИМЕЧАНИЕ
Следует отметить, что язык XHTML 1.0, на самом деле является лишь определением HTML в качестве подмножества XML (расширяемого языка разметки). Фактически, документ, написанный на XHTML должен соответствовать по синтаксису XML. И любая программа, поддерживающая XML, может вывести XHTML-документ, основываясь на DTD (Document Type Definition — определение типа документа), принятом для XHTML.
Вместе с тем, стандарт — стандартом, а реальные пользователи используют реальные программы просмотра. Поэтому не следует всецело полагаться на описанные стандарты — необходимо также регулярно просматривать результаты работы хотя бы двумя-тремя наиболее популярными на текущий момент браузерами. На ближайшее время можно порекомендовать Internet Explorer 6.0 и 8.0, Firefox 3.х, одну из версий Opera и Chrome. Следование данным правилам сделает ваши страницы более привлекательными для посетителей.
Проверить любой документ на соответствие действующему стандарту можно при помощи специального сервиса, предоставляемого всем желающим консорциумом по стандартизации интернета — W3C (www.w3.org). По адресу validator.w3.org, находится W3C Markup Validation Service — служба проверки web-документов на соответствие стандартам. Указав там адрес проверяемой страницы, и подождав секунду-другую, вы увидите подробный список всех ошибок и несоответствий. Если таковых не имеется, то получите сообщение вроде «This document is valid XHTML 1.0 Transitional».
Вообще, данный ресурс (www.w3.org) является неисчерпаемым источником информации по всему, что связано с сетью. На нем вы найдете специальные документы — RFC, в которых описываются все принятые и разрабатываемые стандарты по языкам разметки, сетевым протоколам, и всему, что имеет отношение к интернету. Единственное, но, возможно, критичное ограничение для российских пользователей — это то, что вся информация приводится на английском языке.
Версии браузеров
В предыдущих абзацах уже не раз прозвучали замечания о различиях в различных программах просмотра, их версиях и т.д. Поскольку их дальнейшее перечисление хотелось бы свести к минимуму, то следует определиться с этими самыми версиями заранее.
Итак, прежде всего, разберемся с MS Internet Explorer. В настоящее время самой популярной является его последняя, 6-я версия (к слову, вышедшая еще в 2001 году). За ней, с большим отставанием идет версия 5.0 (та, что была в Windows 98 SE и 2000), и замыкает тройку «промежуточная» версия 5.5. Что касается 4-й версии MSIE, то ей уже практически никто не пользуется.
Вместе с тем, с точки зрения вебмастера, версия 5.5 ближе к 6.0, в то время как механизм построения страниц у MSIE 5.0 почти не отличается от такового у 4-й версии. Таким образом, можно упростить себе задачу, сгруппировав браузеры Microsoft в две категории: MSIE 4/5 и MSIE 5.5/6. Если же взглянуть еще шире, то все версии MSIE, начиная с 4-й, согласно «внутренней» нумерации, относятся к одной категории — Mozilla/4.0.
Несколько сложнее дело обстоит с браузером Mozilla, так как новые версии выходят регулярно, и, кроме того, на том же самом движке, известным как «Gecko», выходят еще два продукта — SeaMonkey и Firefox, а ранее был еще и Netscape. Здесь мы будем вынуждены прибегнуть к помощи таблицы, чтобы наглядно представить себе соотношение всех версий этих программ. Версия Gecko и версия Mozilla Suite всегда совпадали (выпуск Mozilla Suite прекратился на этапе подготовки к выходу версии 1.8, вместо него вышел SeaMonkey 1.0).
| Mozilla 1.0 | Netscape 7.0 | — |
| Mozilla 1.4 | Netscape 7.1 | — |
| Mozilla 1.6 | — | Firefox 0.8 |
| Mozilla 1.7 | Netscape 7.2 | Firefox 0.9/1.0 |
| Mozilla 1.8 | SeaMonkey 1.0 | Firefox 1.5 |
| Mozilla 1.8.1 | SeaMonkey 1.1 | Firefox 2.0 |
| Mozilla 1.9 | — | Firefox 3.0 |
| Mozilla 1.9.1 | SeaMonkey 2.0 | Firefox 3.5 |
| Mozilla 1.9.2 | — | Firefox 3.6 |
| Mozilla 2.0 | SeaMonkey 2.1 | Firefox 4.0 |
Основные отличия между разными версиями Mozilla заключаются в последовательном улучшении поддержки различных стандартов, борьбе с ошибками и улучшении пользовательского интерфейса. Все перечисленные версии Mozilla относятся к пятому поколению браузеров и имеют внутренний идентификатор Mozilla/5.0.
Что касается браузера Opera, то новые версии этой программы выходят достаточно часто, однако изменения носят скорее косметический характер. Основные вехи — это версии 8.50 — первая бесплатная и 11.10, в которой появилась поддержка аппаратного ускорения — по ним можно ориентироваться на возможности этого браузера.
Что касается собственного определения, то последние версии Opera определяются точно как же, как MSIE 6.0 (и все последующие версии Explorer-а), хотя на практике Opera 7, а тем более — Opera 8, можно смело относить к 5-му поколению браузеров, подобно Mozilla. Впрочем, во многом этим требованиям соответствует даже MSIE 6.
Проверить, каким образом браузер заявляет о себе сайту очень просто — для этого достаточно ввести в строке адреса URL сайта, предоставляющего подобный сервис (например, http://insert-title.com/browser.asp). А по ходу ознакомления с этой книгой мы узнаем, как получить идентификационную строку браузера средствами JavaScript.
Типы HTML-редакторов
Теперь перейдем непосредственно к творчеству. Для создания любого файла нужна какая-нибудь программа. Если, как в нашем случае, речь идет о текстовом файле, то нам нужен текстовый редактор. Теперь ознакомимся, что предлагают разработчики на рынке редакторов HTML.
Прежде всего, следует отметить, что все HTML-редакторы подразделяются на два типа — редакторы тегов и WYSWYG-редакторы. Первые предполагают, что пользователь знаком с языком разметки (HTML), и предоставляют пользователю возможность самому вводить теги, а вторые подобны обычному текстовому процессору, например, программе Microsoft Word. Следует отметить, что сам Word, начиная с версии 8.0 (97), по существу, тоже является WYSWYG-редактором, поскольку позволяет сохранять отформатированный документ в виде HTML-файла.
Рассмотрим подробнее вторую группу. Прежде всего, если у вас установлен браузер SeaMonkey, то у вас имеется программа для редактирования web-страниц — Composer. Microsoft, в свою очередь, предлагает программу Front Page входящую в поставку некоторых версий пакета Office. Существуют, конечно, и другие, но эти две — самые распространенные.
К достоинствам Composer следует отнести достаточно простой и удобный интерфейс, а Front Page — средства поддержки проекта (сервера). Среди недостатков у Composer — это неэффективный способ работы с сайтом в целом, а у Front Page — как правило, безликие и серые страницы. Последнее обусловлено тем, что масса шаблонов и мастеров создания документов, на самом деле, ограничивают фантазию разработчика и навязывают ему «штампованный» дизайн.
ПРИМЕЧАНИЕ
Самым мощным WYSWYG-редактором, к тому же генерирующим вменяемый HTML-код, принято считать Adobe Dreamweaver. Следует только учитывать, что эта программа далеко не бесплатная и стоит порядка 500$.
В любом случае, работая с подобными редакторами, очень трудно создать что-нибудь оригинальное и эффектно смотрящееся, поскольку ваша фантазия всегда будет ограничена рамками поддерживаемых конкретной программой средств. Более того, практически все WYSWYG-редакторы «оптимизированы» под конкретный браузер, и создают страницы, которые могут неадекватно восприниматься конкурирующими программами просмотра.
В противоположность им, редакторы тегов не ставят никаких ограничений. Автор страниц волен использовать любые теги, применяя самые новые возможности HTML, не дожидаясь, пока выйдет новая версия редактора, которая их поддерживает. Как правило, подобные программы создаются небольшими фирмами, или пишутся отдельными программистами.
Среди них есть весьма простые — например, имеющийся на прилагаемом компакт-диске MetaProducts LightPad. Такие программы позволяют быстро создавать заготовку документа, вставлять наиболее распространенные теги по нажатию сочетания горячих клавиш, и вызывать браузер для просмотра редактируемого документа подобным образом.
Некоторые, например, тот же LightPad поддерживают подсветку синтаксиса (выделение ключевых слов языка шрифтом или цветом). Есть и более мощные, например HomeSite фирмы Macromedia (ныне тоже Adobe), или Visual Workshop от MetaProducts. При помощи этих программ можно не только использовать специальные мастера для создания наиболее сложных элементов (например, таблиц), но и работать над проектами — набором взаимосвязанных файлов, образующих сайт. Так, Visual Workshop позволяет автоматически конвертировать все документы в нужную кодировку при отправке на сервер, производить поиск и замену сразу по всем файлам проекта, создавать ссылки между файлами одним движением мышки, следить за изменениями сайта, выгружать файлы по FTP и т.д.
Между тем, в качестве редактора тегов можно использовать и простейшую программу, входящую в поставку Windows. Имя ей — notepad, или блокнот. К сожалению, отсутствие горячих клавиш и ограничения на размер файла (в версии для Windows 98) или крайне медленная работа с объемным текстом (в Windows XP и выше) не добавляют этому редактору достоинств, но, тем не менее, его использование вполне может быть оправдано, когда надо быстро подправить 1-2 строчки в небольшом файле.
Редактор LightPad
Перед тем, как приступить собственно к изучению web-технологий, рассмотрим редактор LightPad. Для его установки достаточно запустить файл lpsetup.exe, находящийся в каталоге Soft на прилагаемом компакт-диске (либо здесь можно скачать LightPad). В процессе установки программа запросит установочный каталог, а также спросит, надо ли создавать ярлык на рабочем столе (опция «Add shortcut to Desktop»), и надо ли назначать LightPad стандартным средством просмотра исходного кода HTML для браузера MSIE (опция «Set as default HTML source viewer»).
Наверное, первое, что следует сделать отечественному пользователю после установки и первого запуска программы, так это изменить язык интерфейса. Для этого зайдите в меню «View», найдите в нем подменю «Language» и выберите пункт «Russian». Теперь можно исследовать настройки программы — для этого зайдите в меню «Сервис» и выберите пункт «Настройки».
Все настройки LightPad разделены на 4 категории — «Пользователь», «Редактор», «Расположение программ» и «Команды». Наибольший интерес представляет категория «Редактор», где можно установить тип создаваемого при запуске программы файла (скорее всего, следует выбрать «Текст HTML»), а также его имя и расположение на диске. Здесь же задается шрифт, а также включается или отключается подсветка синтаксиса. При помощи кнопки «Настроить» можно открыть дополнительное окно настроек программы, в котором задаются правила подсветки для всех поддерживаемых редактором типов файлов.
Вообще подсветка синтаксиса — это очень полезная вещь, особенно для начинающих авторов. Ее суть сводится к тому, что языковые синтаксические конструкции выделяются другим цветом и (или) начертанием шрифта. Скажем, применительно к HTML теги в LightPad изначально выводятся темно-синим полужирным шрифтом, их атрибуты — пурпурным, а значения атрибутов — бирюзовым.
Для других элементов (например, комментариев) также предусмотрено выделение шрифтом или цветом. Кроме того, можно сделать так, чтобы неправильно набранные (скажем точнее — неизвестные программе) теги выделялись другим цветом, например, красным. Все это позволяет, во-первых, проще ориентироваться в документе — при грамотно составленной цветовой схеме сразу видно где HTML-код, а где собственно текстовое содержимое, а во-вторых, снижает число возможных ошибок и опечаток.
Но собственно для проверки ошибок HTML-синтаксиса в LightPad предусмотрен отдельный инструмент — проверка кода HTML (меню «Сервис», пункт «Проверить HTML», или F6). Воспользовавшись этим сервисом, можно получить список всех найденных ошибок и недочетов в коде HTML-документа. Этот список будет выведен в специальную область внизу основного окна программы. А двойной щелчок по строке с описанием ошибке приводит к тому, что редактор прокручивает текст до нужного места и устанавливает курсор в начало проблемного места.
ПРИМЕЧАНИЕ
Помимо проверки кода HTML, LightPad может проверять и правописание русского и английского языков. Правда, чтобы эта опция стала доступной, вам потребуется установить еще и его «большого брата» — редактор Visual Workshop.
Наконец, в LightPad имеется еще одна полезная и крайне востребованная функция — возможность немедленного просмотра документа в любом браузере, включая встроенный. В качестве «движка» для встроенного просмотра используется браузер MS Internet Explorer, а в качестве внешнего средства просмотра может использоваться любая программа. При чем изначально LightPad проверяет систему на наличие браузеров, и автоматически добавляет их свою инструментальную панель (а также и в меню «Сервис/Открыть в»). Более того, при каждом запуске будет производиться проверка на предмет изменения доступных средств просмотра, по крайней мере до тех пор, пока вы сами не зайдете в раздел «Расположение программ» настроек LightPad и не измените список вручную.
Помимо рассмотренных особенностей, в LightPad имеются и другие — такие, как окно «Text Clips», из которого можно вставлять теги, и в котором можно хранить часто применяемые «куски» текста. Есть и возможность создания собственных кнопок меню («Настройки» — «Команды»). Кроме того, через меню «Сервис» доступны функции перекодирования документа между разными кириллическими кодовыми страницами, а в меню «Правка» можно найти такие интересные и полезные функции, как изменение регистра символов или «очистка» текста от тегов HTML.
2011-04-29 // Есть вопросы, предложения, замечания? Вы можете обсудить это на форуме !
Источник: www.snkey.net
Качество документов HTML
Творческий характер создания документов HTML сродни программированию, так что при этом возможны ошибки, которые могут привести к трудностям или даже полной невозможности прочитать созданный документ в Интернете. Кроме того, огромное разнообразие компьютеров, подключенных к Интернету, приводит к тому, что заранее невозможно предсказать, как именно будет выглядеть документ на экране конкретного пользователя.
Web-страницы предназначаются для широкой аудитории, так что при подготовке документов HTML следует иметь в виду эти особенности. Чтобы создать хороший документ HTML, следует придерживаться ряда достаточно простых правил.
2. Содержание Web-страницы или группы Web-страниц должно быть связанным логически. Хорошо продуманная система ссылок должна позволять переходить от страницы к странице и возвращаться назад практически без использования кнопок навигации Вперед и Назад на панели инструментов броузера.
3. Для того чтобы документ HTML был доступен самой широкой аудитории, следует «отставать на один шаг» от последних достижений в развитии языка HTML. Последние нововведения не всегда сразу реализуются в броузерах, а новым версиям требуется время на то, чтобы достичь большинства пользователей. Документы с использованием самых свежих новшеств доступны лишь ограниченной аудитории.
4. Ошибка, которую часто делают новички, состоит в злоупотреблении элементами оформления, особенно разнообразными цветами и шрифтами. Такая страница в лучшем случае будет выглядеть кричащей. В худшем случае, текст вообще нельзя будет прочесть на компьютерах с нестандартной цветовой схемой или при отсутствии необходимых шрифтов.
5. Не следует злоупотреблять графическими изображениями и мультимедийными файлами. При изобилии таких объектов загрузка страницы может затянуться и читатель может утратить к ней интерес еще до того, как получит возможность что-то прочесть.
6. Так как создание документов HTML сродни программированию, процесс поиска и исправления ошибок, известный в программировании как отладка, необходим и при создании Web-страницы. Большинство, если не все сделанные ошибки можно обнаружить еще до того, как страница станет доступна посторонним читателям. В число ошибок, которые надо исправлять, входят также грамматические ошибки и опечатки.
7. Если собственной фантазии недостаточно, чтобы придумать способ оформления Web-страницы, можно воспользоваться службой World Wide Web как справочником. Интернет содержит миллионы Web-страниц, способных предложить идеи оформления, которыми можно пользоваться. Достоинство этого подхода состоит еще и в том, что таким способом можно увидеть, не только что сделано, но и как сделано, если обратиться к исходному тексту Web-страницы.
8. Фреймы — очень мощное, но и очень опасное средство оформления Web-страниц. С помощью фреймов создано гораздо больше неудачных Web-страниц, чем удачных. Единственный критерий грамотности применения фреймов — удобство пользователя. Если благодаря фреймам страница становится во много раз красивее, но чуть-чуть менее удобной, от фреймов надо отказываться не задумываясь. Ничего, кроме раздражения, у читателей она не вызовет.
Люди ценят заботу и внимание. Размещение самой важной информации в верхней части страницы позволяет им с пользой проводить время, в течение которого происходит загрузка документа. Сопровождение иллюстраций альтернативным текстом не стоит больших трудов, но высоко ценится. Наличие большого количества полезных гиперссылок на странице не только помогает людям плодотворно путешествовать по просторам Интернета, но и побуждает их раз за разом возвращаться на страницу, предоставившую им такую возможность.
Закрепление пройденного
Ø Web-документы создают с помощью специального языка разметки гипертекста — HTML.
Ø Коды языка HTML называются тегами.
Ø Теги HTML — это специальные последовательности символов, заключенные в угловые скобки (о).
Ø Web-документ представляет из себя исходный текст с имплантированными в него тегами. Таким образом, Web-документ представляет собой обычный текст и, тем самым, может создаваться и редактироваться средствами обычных текстовых редакторов.
Ø Основная особенность создания Web-документов состоит в том, что автору документа неизвестно, на какой модели компьютера, в какой операционной системе и какими программами этот документ будет отображаться на экране пользователя. Этот «уровень незнания» не позволяет жестко задавать параметры форматирования Web-документа.
Ø Форматирование Web-документов отличается от форматирования документов в обычных текстовых процессорах тем, что является функциональным. Так, например, коды HTML не должны точно задавать параметры шрифта, строки и абзаца (хотя в некоторой степени они позволяют это делать). Вместо этого они определяют назначение заголовка или абзаца, а программа пользователя, выполняющая просмотр Web-документа (броузер) сама «принимает решение» о том, как отобразить данный текстовый элемент на экране.
Ø Используя коды HTML, можно выполнять следующие действия:
• выделять заголовки разных уровней и управлять их выравниванием на экране;
• разбивать текст на абзацы, использовать простейшие элементы оформления для разделения абзацев и других частей документа;
• встраивать в текст гипертекстовые ссылки на другие Web-документы или на другие разделы данного документа;
• встраивать в текст рисунки; управлять параметрами обтекания рисунков текстом, управлять размерами рисунков, вводить альтернативный текст, который отображается броузером при невозможности отобразить рисунок;
• управлять цветом, размером и гарнитурой шрифта;
• оформлять смысловые выделения в исходном тексте;
• создавать несколько различных видов списков;
• размещать несколько документов на одной Web-странице;
• встраивать в текстовый документ мультимедийные объекты;
• и многое другое.
Ø Процесс создания Web-документов — это творческая работа, успех которой зависит как от личных талантов и способностей автора, так и от его уровня опыта.
Ø HTML-код всех Web-страниц Интернета открыт для просмотра с помощью обычных броузеров. Исследование кода готовых Web-страниц обычно является хорошей школой при изучении тегов HTML и при разработке новых приемов оформления Web-страниц.
Контрольные вопросы
1. Почему для разработки Web-страниц используется специальный язык разметки гипертекста? Мы знаем, что с помощью текстового процессора Word вполне можно получать представительные документы. Почему нельзя использовать этот удобный и мощный текстовый процессор для разработки Web-документов?
2. Как вы понимаете, что такое тег HTML?
3. С помощью каких известных вам программ можно создавать Web-документы в коде HTML?
4. С помощью каких известных вам программ можно просматривать Web-документы?
5. В языке HTML нет тега, с помощью которого можно было бы создать абзац текста фиксированной ширины, например 800 пикселов. Почему нет таких тегов?
6. Несмотря на отсутствие тегов для создания текста фиксированной ширины, управлять шириной текста все-таки можно. С помощью какого средства можно создать текст, расположенный в трех (например) колонках заданной ширины?
7. Что такое альтернативный текст? Зачем он нужен и когда используется?
8. Чем отличаются текстовые и графические гиперссылки?
10. Какие виды списков вы знаете? Какими средствами создают списки на Web-страницах? Что такое вложенные списки?
Источник: poisk-ru.ru
Удобные редакторы кода и их особенности для веб-разработчиков
Веб-разработка и верстка сайтов только кажется простой кому-то или очень сложной для других. Но в действительности существует огромное количество инструментария, которые одновременно упрощает работу с кодом и ускоряют её. Это все равно, что сравнить с веб-дизайном, для которого также существуют и отдельные приложения, наподобие Photoshop, и дополнительные сервисы по подбору шрифтов, иконок, картинок, той же цветовой палитры. И, разумеется, что редакторы кода являются одними из важнейших таких инструментов для веб-разработчиков.
Некоторых новичков одно только название способно ввести в «тихий ужас», и они уже боятся углубляться в тематику веб-верстки и работы с кодом. Да, сложные интегрированные среды разработки (IDE) действительно слишком крупные, широкие и большие, тогда как для верстки зачастую приходится решать куда более «мелкие» задачи по сравнению, например, с …. написанием кода нового графического редактора. С другой стороны, некоторые разработчики отдают предпочтение старым добрым приложениям «Блокнот» в Windows или TextEdit на macOS или Notepad++. Но их обычно недостаточно для задач по работе с кодом, слишком много необходимых функций отсутствует, что делает эти приложения неудобными для верстки.
В этом материале мы рассмотрим особенности, плюсы и минусы некоторых известных кросс-платформенных редакторов кода для веб-разработчиков. Все они работают на трех основных операционных системах Windows, Linux и OS X. Функции каждого, которые могут быть необходимы разработчику, в основном будут зависеть от стиля работы, имеющихся знаний кодирования и вида работы.
Смысл редакторов кода для frontend-разработчика
Прошли те времена, когда frontend-разработчикам просто нужно было знать HTML, CSS и DOM-манипуляции. Кажется, никто уже не пишет «ванильный» CSS в наши дни. Но между тем, ES6 привнес легкость и интуитивность jQuery в «обычный JavaScript», который теперь является одним из самых популярных языков программирования в мире.
Чтобы быть веб-разработчиком и верстальщиком в современности, JavaScript, jQuery, JSON и AJAX – требования, а знание библиотек и фреймворков, таких как Ionic, Ember, React и TypeScript частенько требуют особых навыков. Более того, разработчикам интерфейсов для сайтов или мобильных приложений также необходимо знать о системах контроля версий, таких как Git. Много всего? Но добавим, что новые библиотеки JS иногда появляются очень и очень часто, а потому у верстальщиков и веб-разработчиков желание учиться возникает также нередко. Направление Frontend развивается быстрыми темпами и часто проникает в другие области мобильных и backend-разработок и нужно идти в ногу с этим.
Вот поэтому и рассмотрим некоторые приложения для работы с программным кодом, с кодом верстки дизайна, программирования интерфейсов.
Angular
Angular – платформа, упрощающая сбор приложений. С его помощью разработчики получают возможность создавать приложения, которые могут «жить» в интернете в десктопных и мобильных вариантах. Разработанное Google приложение предназначено для создания одностраничных сайтов, в которых один документ HTML является контейнером для всех прочих подгружаемых модулей. В его возможностях – внедрение зависимостей, предоставление разного инструментария, методы отладки, множественные шаблоны.
Может использоваться для создания кросс-платформенных гибридных мобильных приложений с использованием Ionic или NativeScript, может создавать приложения для систем Mac и Linux, поддерживает TypeScript, позволяет создавать самые совершенные и прогрессивные веб-приложения.
Visual Studio Code
Наиболее полнофункциональный и хорошо созданный редактор от Microsoft на базе Atom представляет собой приложение с открытым исходным кодом (бесплатное). И именно этот редактор наиболее ярко представляет то, какой должна быть среда IDE. Он надежный, но медленно запускаемый. Хотя уже после запуска работает достаточно шустро, обрабатывает несколько задач одновременно.
Еще есть интеграция с Git (встроенная), сортировка данных по папкам и так далее. Но если сравнить с тем же Atom’ом, он гораздо и гораздо шустрее и при запуске, и в работе, и функции их разнятся намного.
Так как приложение представляет собой open-source software, то и расширений, дополнений для него очень много, а пользовательская база растет и растет. Также имеется встроенная функция IntelliSense – помогающая автозавершить код, представляет информацию о параметрах, переменных. Еще из плюсов отметим встроенный отладчик для Node.js, TypeScript и JavaScript, интеграцию с TypeScript, полную настраиваемость.
И самое главное – ничего общего с общеизвестным Visual Studio это приложение не имеет. Вообще. Никак. Кроме разработчика.
Минусы, конечно, и у него есть. Иногда он просто очень медленно осуществляет поиск по проектам. Не говоря о медленном запуске в целом.
Brackets
Эту платформу разработали уже в Adobe специально для веб-дизайнеров и frontend-разработчиков. Если вы работаете в основном только с HTML, CSS, JavaScript, то этот редактор может стать для вас основным и главным, поскольку его основная особенность – возможность установки связи с Google Chrome в режиме реального времени. Таким образом, разработчик может сразу видеть, как все изменения в проекте будут представлены в браузере.
Кроме того, в Brackets есть удобный редактор встроенных функций. Например, вы выбираете какой-то параметр CSS мышкой и нажимаете Ctrl + E (на Windows) или Cmd + E (на Mac), открывается редактор. В нем будут представлены все селекторы данного CSS ID и работать с кодом станет гораздо проще. Существует также и поддержка Sass и LESS, и все это может работать вместе с интеграцией предпросмотра.
Его легко настроить через меню, тогда как многие прочие приложение требуют отдельного редактирования файла конфигурации. Представляет интерес и дизайнерское решение, поскольку здесь нет вкладок для открытых файлов. Скорее, это отдельное меню файлов в левом верхнем углу над деревом файлов.
Например, тот же VS Code использует аналогичное меню открытых файлов, но еще обладает и вкладками.
Если говорить о минусах Brackets , то он выглядит запутанным, у него мало расширений, меньше чем предлагают любые другие на рынке редакторы кода и он совершенно не подходит для работы с «серверными языками» (PHP, Python, Ruby, и для WordPress).
Atom
Дошла очередь и до него. Он представляет собой тоже платформу с open-source code и создавался на GitHub. Изначально, он был вообще внутренним редактором исходного кода самого GitHub, но в 2014 году было решено представить его как отдельный пакет для общественности. И… он стал самым популярным для работы с кодом именно потому, что обладает большим набором функций.
Например, его интерфейс можно разделить на разные панели и сравнивать в них разные файлы. Среди функций есть встроенный пакет мессенджеров, функции автозавершения кода, работа с файловой системой, поиск и замена функций и прочее. В нем также есть интеграция с Git, множественные настройки.
И поскольку это open-source-приложение, то и для него есть множество расширений и надстроек от иных разработчиков. Например, Teletype предлагает возможность в режиме реального времени нескольким разработчикам работать одновременно над одним проектом. Но любят его (Atom) также и за то, что создан он был с помощью HTML, JavaScript, CSS и Node.js.
Из минусов нельзя не сказать про очень медленную загрузку и разворачивание при запуске, иногда у некоторых пользователей случаются проблемы с производительностью (редкие). Но в целом это удобный и мощный редактор.
Sublime Text
Если точнее, то речь идет уже о третьем основном выпуске Sublime Text 3, который является тоже очень популярным редакторам для веб-разработки. И в отличие от прочих продуктов, он платный с бесплатным пробным периодом. Хотя, если бесплатный период закончится, вы сможете в нем работать и дальше, просто время от времени будет появляться всплывающее окошко с запросом на приобретение лицензии.
Итак… самая привлекательная особенность Sublime Text это – Goto Anything, то есть вызов всех команд при нажатии клавиш Ctrl+P. Затем можно быстро открыть нужные файлы или перейти к нужным словам, строчкам, символам. У редактора есть и командная панель, с помощью которой можно получить доступ к различным функциям (проверка клавиш, цветовое оформление).
Sublime Text позволяет разделять экран редактирования кода и работать с каждыми частями по отдельности, существует поддержка множественного выбора (выделить несколько значений и все их заменить на одно общее, а не каждое выделять по отдельности и менять) и, конечно, большой пакет расширений. Редактор славится также очень высокой производительностью, гораздо более высокой, чем у всех прочих редакторов. В общем и целом, это весьма отзывчивый редактор.
Единственным минусом можно назвать сложность и кропотливость его интеграции с Git, но расширения уже есть и их много.
Light Table
И еще один редактор, мимо которого совершенно не хочется проходить. Это Light Table, относительно молодой и еще развивающийся редактор, впервые появившийся на Kickstarter в 2012 году. Он работает на трех платформах, но для OS X могут потребоваться дополнительные действия. Если говорить об интерфейсе, то он необычен, хотя есть поисковая строка и команда меню для настройки. Тем не менее, он поддерживает работу с HTML, CSS, JavaScript, Python, Clojure и ClojureScript.
Важная особенность редактора – функция Watches, которая позволяет отслеживать нужные вам значения в коде. Например, вы ставите маячок на какой-то кусочек кода, а затем все изменения будут передаваться в редактор в режиме реального времени. Также приложение распространяется с открытым кодом, а потому для него также создано много расширений и плагинов, а в самом Light Table есть встроенный менеджер.
Чем он интересен помимо функций?…Он быстр, настраиваем, бесплатен. Но минусы могут кому-то и не понравиться, так как до сих пор нет поддержки PHP, а, значит, разработки для WordPress (как минимум) вести в нем очень затруднительно. Но есть для этого плагин.
Обобщая вышесказанное
Так выглядят основные и самые популярные редакторы по работе с кодом для верстальщиков. У каждого есть свои преимущества, свои особенности и сказать, что: «Вот, писать код нужно только в чем-то одном» – не совсем верная мысль. Многие веб-разработчики используют несколько приложений и даже онлайн-ресурсы для удобства.
В то же время, несмотря на такую похожесть и одновременно различие всех редакторов друг от/на друга, каждый из них можно охарактеризовать несколькими словами, которые, возможно, немного обобщат и систематизируют все то, что мы пытались донести вам, читатели, в этом материале.
- Sublime Text 3 – самый стабильный и быстрый редактор с пользовательским интерфейсом.
- Visual Studio Code – самый полнофункциональный, хорошо скомпилированный и проработанный редактор.
- Atom – бесплатная версия Sublime Text с более дружественным интерфейсом.
- Adobe Brackets – самый простой редактор для новичков в верстке и программировании.
- Light Table – простота и лаконичность, скорость и интересности.
- Angular – самый нужный для приложений и любителей работать (анализировать) с данными.
Между тем, стоит отметить, что не менее важными бывают и такие ресурсы как PhpStorm, WebStorm, знакомый уже нашим читателям по материалу о CSS – CodePen, всемирная «звезда» Notepad ++ и другие. И о некоторых мы еще поговорим в других материалах.
Завершение
Выбор редактора кода может стать очень сложной задачей. Возможно, что самое главное здесь – помнить, что вы уже знаете, с чем уже умеете работать, а с чем конкретно нет, и оно вам, возможно, и не нужно в данный момент. Стоит подумать над нужными функциями, горячими клавишами, интерфейсом, скоростью и стабильность, вариантами выделения синтаксиса. Для некоторых разработчиков последние пункты, порой, бывают важнее прочих.
Но, как и в случае, когда мы рассматривали преимущества Photoshop для веб-дизайна, также и для вёрстки с программированием нужно определить, что хочет верстальщик/разработчик, чтобы редактор мог для него сделать. Как вам удобнее взаимодействовать с Git, нравится автозаполнение имен функций или автоматические закрывающие скобки или теги. Еще одно важно – выделите время и изучите возможности каждого редактора и хотя бы в общем возможности расширений. Тогда сложится более целостная картина того, что вам нужно, и в чем было бы удобно написать и собрать весь код.
Заглядывая в будущее, все языки программирования, библиотеки, скрипты будут развиваться и развиваться. А значит и редакторы эти тоже будут востребованы всегда, обновляться и улучшаться, совершенствоваться, получать новый функционал.
Источник: wayup.in