WEB-дизайн и программы для создания web-страниц

Размещено на http://www.allbest.ru/

Направление подготовки: Прикладная информатика

Курсовая работа

WEB-дизайн и программы для создания web-страниц

СОДЕРЖАНИЕ

ВВЕДЕНИЕ

ГЛАВА 1. Всемирная паутина (WWW) и Web-дизайн

1.1 Языки разметки

1.2 Этапы проектирования

ГЛАВА 2. Программы для создания Web-дизайна

2.1 Текстовые редакторы

2.2 Стандартные средства разработки для Unix систем и их замена

2.3 Профессиональные среды разработки и их ответвления

2.4 Визуальные редакторы для разработчиков WEB

ЗАКЛЮЧЕНИЕ

СПИСОК ЛИТЕРАТУРЫ

ПРИЛОЖЕНИЕ

ВВЕДЕНИЕ

Актуальность проблемы исследования. Вследствие стремительного роста сети WWW (World Wide Web - Всемирная паутина) появилась новая область информационных технологий - web-дизайн, один из перспективных видов деятельности, дающий новые возможности для воплощения творческих идей художников, дизайнеров и специалистов в области информационных технологий. В результате обучение web-дизайну является в настоящее время важнейшим компонентом образования.

Объект исследования - современный web-дизайн и новейшие программы

Предмет исследования - особенности отличий вертски веб-дизайна

Цель исследования - изучения всемирной паутины

Задачи исследования:

1. Произвести теоретический анализ современных интернет технологий.

2. Рассмотреть WWW (Всемирную паутину)

3. Проанализировать программы по созданию веб дизайна

4. Сделать выводы по результатам исследования

Методы исследования:

- теоретический анализ литературы по проблеме исследования;

- системный (комплексный) анализ проблемы;

- наблюдение.

Практическая значимость исследования. Материалы данной работы могут быть исследованы в практической деятельности специалистов в области прикладной информатики.

1. Всемирная паутина (WWW) и Web-дизайн

Всемирная паутина (англ. World Wide Web) -- распределённая система, предоставляющая доступ к связанным между собой документам, расположенным на различных компьютерах, подключенных к Интернету. Для обозначения Всемирной паутины также используют слово веб (англ. web «паутина») и аббревиатуру WWW.

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

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

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

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

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

Веб-страница (англ. Web page) -- документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера.

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

Информация на веб-странице может быть представлена в различных формах:

· текст

· статические и анимированные графические изображения

· аудио

· видео

· апплеты

язык проектирование текстовый редактор

1.1 Языки разметки

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

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

HTML (от англ. HyperText Markup Language -- «язык разметки гипертекста») - разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986--1991 годах в стенах Европейского Центра ядерных исследований в Женеве (Швейцария). HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки. HTML успешно справлялся с проблемой сложности SGML путём определения небольшого набора структурных и семантических элементов -- дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой, но красиво оформленный документ. Помимо упрощения структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже.

Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (отображения). В идеале, текст с разметкой HTML должен был без стилистических и структурных искажений воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или устройства и программы голосового воспроизведения текстов). Однако современное применение HTML очень далеко от его изначальной задачи. Например, тег <TABLE>, несколько раз использованный для форматирования страницы, предназначен для создания в документах самых обычных таблиц. С течением времени основная идея платформ независимости языка HTML была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.

XML (англ. eXtensible Markup Language -- расширяемый язык разметки; произносится [экс-эм-эмл]) -- рекомендованный Консорциумом Всемирной паутины (W3C) язык разметки. Спецификация XML описывает XML-документы и частично описывает поведение XML-процессоров (программ, читающих XML-документы и обеспечивающих доступ к их содержимому). XML разрабатывался как язык с простым формальным синтаксисом, удобный для создания и обработки документов программами и одновременно удобный для чтения и создания документов человеком, с подчёркиванием нацеленности на использование в Интернете. Язык называется расширяемым, поскольку он не фиксирует разметку, используемую в документах: разработчик волен создать разметку в соответствии с потребностями к конкретной области, будучи ограниченным лишь синтаксическими правилами языка. Сочетание простого формального синтаксиса, удобства для человека, расширяемости, а также базирование на кодировках Юникод для представления содержания документов привело к широкому использованию как собственно XML, так и множества производных специализированных языков на базе XML в самых разнообразных программных средствах.

XHTML (англ. Extensible Hypertext Markup Language -- расширяемый язык разметки гипертекста) -- семейство языков разметки веб-страниц на основе XML, повторяющих и расширяющих возможности HTML 4. Спецификации XHTML 1.0 и XHTML 1.1 являются рекомендациями консорциума Всемирной паутины, однако на данный момент его развитие остановлено с рекомендацией использовать HTML. Новые версии XHTML не выпускаются.

Главное отличие XHTML от HTML заключается в обработке документа. Документы XHTML обрабатываются своим модулем (парсером) аналогично документам XML. В процессе этой обработки ошибки, допущенные разработчиками, не исправляются.

XHTML соответствует спецификации SGML, поскольку XML является её подмножеством. HTML обладает множеством особенностей в процессе обработки и фактически перестал относиться к семейству SGML, что и закреплено в черновике спецификации HTML 5.

Браузер выбирает парсер для обработки документа на основании заголовка content-type, полученного от сервера:

· HTML - text/html

· XHTML - application/xhtml+xml

· Для локального просмотра на клиенте выбор основывается на расширении файла.

· В Internet Explorer вплоть до 8-й версии парсер обработки XHTML-документов отсутствует.

WML (англ. Wireless Markup Language -- «язык беспроводной разметки») -- язык разметки документов для использования в сотовых телефонах и других мобильных устройствах по стандарту WAP.

По структуре напоминает несколько упрощённый HTML, но есть и ключевые отличия, поскольку WML ориентирован на устройства, не обладающие возможностями персональных компьютеров (небольшой экран, не все устройства могут отображать графику, небольшой размер памяти и т. д.): вся информация в WML содержится в так называемых «деках» (англ. deck). Дек -- это минимальный блок данных, который может быть передан сервером. В деках находятся «карточки» (card) (каждая карта ограничена тегами <card> и </card>). В одном деке всегда должна быть хоть одна карточка, но может быть и несколько. При этом на экране устройства в каждый момент времени отображается только одна карточка, а пользователь может переключаться между ними, переходя по ссылкам -- это сделано для сокращения числа обращений за информацией к серверу; в то же время размер WML-страниц не должен превышать 1--4 килобайт.

VML (англ. Vector Markup Language -- язык векторной разметки) разработан фирмой Microsoft для описания векторной графики. VML был представлен W3C в 1998 году компаниями Microsoft, Macromedia и др. Примерно в то же время Adobe, Sun и несколько других компаний подали на рассмотрение документы о языке PGML. Оба эти языка позднее стали основой для SVG.

PGML (Precision Graphics Markup Language, в вольном переводе на русский -- «язык разметки прецизионной графики» ) -- основанный на XML язык разметки, служащий для описания векторной графики на веб-странице (диаграмм, отдельных элементов интерфейса) в виде текста в формате XML, использует модель построения изображения, схожую с PDF и PostScript. Был представлен W3C консорциуму компаниями Adobe Systems, IBM, Netscape Communications и Sun Microsystems в 1998 году, однако не был принят, как рекомендованный. Почти одновременно компания Microsoft подала к рассмотрению свой проект VML, через год был разработан более совершенный язык SVG, основанный на идее двух технологий. SVG получил рекомендацию W3C и стал основным форматом для описания векторной графики на веб-странице.

SVG (от англ. Scalable Vector Graphics -- масштабируемая векторная графика) -- язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторной/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику -- или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов. Это открытый стандарт, который является рекомендацией консорциума W3C -- организации, разработавшей такие стандарты, как HTML и XHTML. В основу SVG легли языки разметки VML и PGML. Разрабатывается с 1999 года.

XBRL (англ. eXtensible Business Reporting Language, букв. «Расширяемый язык деловой отчетности») -- открытый стандарт для представления финансовой отчетности в электронном виде. Формат XBRL основан на расширяемом языке разметки XML. XBRL используется синтаксис XML, а также относящиеся к XML технологии, такие как пространство имен XML, XML Schema, XLink и XPath. Одно из назначений XBRL состоит в представлении и обмене финансовой информацией, такой как финансовая отчетность компаний. Спецификация языка XBRL разрабатывается и публикуется независимой международной организацией XBRL International, Inc.

Для улучшения визуального восприятия веба стала широко применяться технология CSS, которая позволяет задавать единые стили оформления для множества веб-страниц. Ещё одно нововведение, на которое стоит обратить внимание, -- система обозначения ресурсов URN (англ. Uniform Resource Name).

Популярная концепция развития Всемирной паутины -- создание семантической паутины. Семантическая паутина -- это надстройка над существующей Всемирной паутиной, которая призвана сделать размещённую в сети информацию более понятной для компьютеров. Семантическая паутина -- это концепция сети, в которой каждый ресурс на человеческом языке был бы снабжён описанием, понятным компьютеру. Семантическая паутина открывает доступ к чётко структурированной информации для любых приложений, независимо от платформы и независимо от языков программирования. Программы смогут сами находить нужные ресурсы, обрабатывать информацию, классифицировать данные, выявлять логические связи, делать выводы и даже принимать решения на основе этих выводов. При широком распространении и грамотном внедрении семантическая паутина может вызвать революцию в Интернете. Для создания понятного компьютеру описания ресурса, в семантической паутине используется формат RDF (англ. Resource Description Framework), который основан на синтаксисе XML и использует идентификаторы URI для обозначения ресурсов. Новинки в этой области -- это RDFS (англ. RDF Schema) и SPARQL (англ. Protocol And RDF Query Language) новый язык запросов для быстрого доступа к данным RDF.

1.2 Этапы проектирования

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

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

Дизайн основной и типовых страниц сайта.

Начинается работа с создания дизайна, обычно в графическом редакторе. Дизайнер создаёт один или несколько вариантов дизайна, в соответствии с техническим заданием. При этом отдельно создаётся дизайн главной страницы, и дизайны типовых страниц (например: статьи, новости, каталог продукции). Собственно «дизайн страницы» представляет собой графический файл, слоеный рисунок, состоящий из наиболее мелких картинок-слоев элементов общего рисунка.

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

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

HTML-верстка.

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

В небольших студиях html-кодированием занимается дизайнер, создавший макет сайта.

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

Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS -- системы управления сайтом. Веб-разработчики часто называют CMS «движком».

В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт, состоящий из заменяемых частей. «Программист» -- в данном случае правильно будет назвать его просто специалистом по CMS -- должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «веб-дизайна».

При программировании сайта специалисту назначаются контрольные точки сроков.

Завершающим этапом разработки сайта под ключ является конечно же тестирование.

Верстка с помощью слоев

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

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

Верстка с помощью таблиц.

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

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

Кроме того, использование таблиц для целей оформления не соответствует концепции семантичной вёрстки, подразумевающей использование элементов (тегов) в соответствии с их смыслом, семантическим значением. Элемент <table> и сопутствующие (<tr>, <th>, <td> и др.) предназначены для разметки табличной информации (т. е. такой, в которой имеется смысловая связь между элементами, принадлежащими одному столбцу или одной строке). W3C, как разработчик языка HTML, призывает использовать HTML для логической разметки информации, а оформление (в т. ч. позиционирование различных блоков) описывать отдельно от (X)HTML-разметки (с помощью CSS, например).

Распорки.

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

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

Валидность HTML-верстки -- это её соответствие стандартам организации The World Wide Web Consortium (W3C). Отсутствие ошибок в вёрстке документа -- один из основных показателей качества вёрстки. Автоматическая проверка вёрстки на ошибки может быть проведена как с помощью онлайн сервиса W3C, так и различными программами «валидаторами». Разные версии спецификации HTML предполагают различный синтаксис, поэтому тест верстки на валидность должен обязательно учитывать её Document Type.

2. Программы для создания Web-дизайнов

Веб-редактор (web-редактор) -- программа, использующаяся для редактирования HTML документов.

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

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

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

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

Текстовыми редакторами для Web разработки принято называть те программы, которые впитали в себя лучшие качества работы с кодом и подсветкой синтаксиса на различных языках. Для программирования приложений в интернет применяются специальные средства разработчиков, которые умеют работать с данными HTML, CSS, PHP, JavaScript.

WYSIWYG (What You See Is What You Get) --вид программ, имеющий дело с представлениями результатов работы программного кода на экране в графическом виде, который применяется разработчиками интернет-приложений. Эти редакторы позволяют отображать результаты работы кода на экране в удобном для пользователей виде.

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

2.1 Текстовые редакторы

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

Notepad++ (Windows, Linux, Mac)

Эта программа -- одна из недооценённых программ с точки зрения отзывов о ней.

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

· Подсветка и сегментация синтаксиса;

· Пользовательские настройки подсветки и сегментации программного кода;

· Совместимые с языком Perl регулярные выражения для поиска и замены кода;

· Опциональный интерфейс программы: свёртывание, наличие вкладок с кнопкой закрыть, панель вкладок, вертикальные вкладки и вертикальный список документов;

· Карта документов;

· Автозаполнение и выпадающий список параметров функций;

· Много опциальных возможностей выделения фрагментов кода;

· Многооконный интерфейс с вкладками;

· Функция открытия нескольких вкладок в одном окне одновременно;

· WYSIWYG;

· Приближение и удаление;

· Многоязыковой интерфейс;

· Закладки;

· Запись и воспроизведение макросов;

· Запуск программы с аргументами;

· Поддержка проверки правописания на множестве языков с помощью Aspel;

· Проверка html кода tidy;

· Поиск и замена сразу в группе файлов.

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

PsPad (Windows)

PsPad -- приятно порадовала универсальность данного редактора. Он поддерживает множество языков, и проверку орфографии. Он может быть использован в качестве замены стандартному блокноту, с некоторыми дополнительными функциями. Есть версии для самых старинных версий windows, что говорит о том, что редактор существует уже давно и развивается вместе с пользователями. Что касается использования этого редактора для редактирования кода программ интернет, он оборудован примерто тем же арсеналом, что и Komodo, но отличается не столь удобным интерфейсом, на мой взгляд, от notepad++. Выглядит довольно громоздко. Весь функционал, выведенный на различных панелях, вводит в ступор при первом ознакомлении с программой:

· Программа работает с синтаксисом популярных языков программирования;

· Программа имеет возможность автозаполнения;

· В арсенале есть множество готовых шаблонов для множества различных языков;

· Есть функции автозамены;

· Есть запись макросов;

· Окно проектов, закладок в интернете и встроенный FTP клиент;

· Многооконный интерфейс с возможностью удобной группировки окон;

· Пользовательская подсветка синтаксиса;

· Проверка правописания с помощью встроенной программы и словарей с сайта.

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

PHPeditor

Простенький продукт, для работы с HTML и PHP.

· Главным плюсом данной программы является мощная функция поиска и замены сразу по нескольким файлам, которая работает очень быстро;

· Программа имеет возможность подсветки синтаксиса HTML, PHP;

· Есть инспектор кода HTML и PHP;

· Включён встроенный сервер, для проверки серверных приложений;

· Многовкладочный интерфейс;

· Функции вставки;

· Поддержка макросов;

· Запись шаблонов кода с небольшим первоначальным набором.

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

2.2 Стандартные средства разработки для Unix систем и их замена

Vim (Windows, Mac, Linux)

В сущности - это весьма удобная программа для консоли linux, которая просто незаменима у системных администраторов. Основам владения Vim учат на специальных курсах. Так что тема обсуждения этого редактора просто бесконечная. Это тема скорее разработки самого приложения для разработки, чем его функционала.

Всего многообразия функционала Vim с применением плагинов не перечислить.

Gedit (Windows, Mac, Linux)

Gedit -- более совершенный редактор, по сравнению с Vim, созданный специально для оконного менеджера Gnome в Linux, после перекочевавший на другие ОС.

Из коробки присутствуют возможности для Web разработчиков:

· Подсветка синтаксиса;

· Браузер;

· Красная строка.

Дополнительные плагины, которые можно найти в интернете:

· Закрытие тегов автоматически;

· Инспектор кода HTML;

· Генератор основного текста;

· Регулярные выражения для поиска и автозамены;

· Интеграция передачи кода в браузер.

Для пользователей windows - несколько непривычное решение, но для любителей ОС linux, это привычный инструмент.

Fraise (Mac)

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

· Подсветка синтаксиса;

· Удобная работа с блоками;

· Поиск и замена;

· Блоки для быстрого ввода тегов HTML и CSS;

· Встроенный браузер с функцией автоматического обновления при замене стилей;

· Закрытие тэгов нажатием одной кнопки;

· Инспектор HTML.

Этот редактор создан специально для Mac и является хорошей заменой стандартному текстовому редактору. Он является приложением Smultron, по этой причине он работает только в поздних версиях ОС Mac, либо, при установленном Smultron.

TextWrangler (Mac)

Текстовый редактор TextWrangler, для Mac, наподобие gedit для linux. Функций в данном редакторе не много, но он отлично подходит для выполнения основных задач:

· Подсветка CSS, JavaScript, HTML синтаксиса;

· Поиск и замена по регулярным выражениям;

· Удобная навигация в коде;

· Встроенные функции работы по FTP;

· AppleScript.

Обычный текстовый редактор для Unix - подобных систем.

2.3 Профессиональные среды разработки и их ответвления

Komodo Edit (Windows, Linux, Mac)

Функционал этой программы позаимствован в параллельном коммерческом проекте и расширяется с помощью дополнительных плагинов, что делает его практически неограниченным. Но что нужно нам от идеального редактора для разработки приложений Web? Здесь есть всё необходимое для комфортной работы с любым программным кодом. Производители не предусмотрели возможность просматривать код сразу в двух окнах. Это делает работу с кодом не столь комфортным

Возможности Komodo Edit ограничиваются в свободной версии, достаточно скромным функционалом по сравнению с Komodo IDE, но что конкретного может предложить нам Komodo Edit:

· Поддержка подсветки синтаксиса на большинстве языков программирования для интернета;

· Автозаполнение и закрытие тегов;

· Файловый менеджер и менеджер проектов;

· FTP - клиент, работающий по разным протоколам;

· Встроенный браузер для просмотра результатов работы;

· Функции поиска и замены с регулярными выражениями;

· Многооконный интерфейс с вкладками;

· Проверка html кода tidy.

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

Bluefish Editor (Windows, Linux)

Bluefish Editor -- возможно так же существует аналог для Mac. Пожалуй единственное решение для Linux в плане разработки, которое годится для решения любых задач. В целом функционал программы аналогичен, функциям Aptana Studio. Эта программа для профессионалов. Весь её функционал не перечислить. Поэтому настройка её требует определённых навыков. Главным недостатком этого редактора, является, на мой взгляд, медлительность и неповоротливость.

Aptana Studie (Windows, Linux, Mac)

Aptana Studio -- эта программа обеспечивает полный спектр сервисов для разработки в целом. Комплексная реализация, по мнению некоторых пользователей делает эту программу отпугивающей для непрофессионалов и несколько медлительной. Дополнительным плюсом использования этого продукта является наличие встроенного Web сервера, который позволяет просматривать динамические страница, с кодом выполняющимся на стороне сервера. Это придётся по вкусу программистам на PHP и других подобных языках, выполняемых на сервере.

· Поддержка HTML, CSS, JavaScript в виде подсветки, вставки готовых конструкций и подстановки;

· Менеджер проектов с клиентом для работы по протоколам ftp;

· Встроенный дебагер, для инспектирования кода html, JavaScript, Rubby&Rails;

· Поддержка Git (распределённое управление версиями), которая может потребоваться профессиональным программистам;

· Поддерживается встроенный терминал;

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

2.4 Визуальные редакторы для разработчиков WEB

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

Macromedia Dreamweaver MX

Macromedia Dreamweaver MX -- полный функционал этой программы не известен, наверное, даже самим разработчикам. Недаром так много сказано об этом в книгах, которые вы можете найти на прилавках книжных магазинов об этой программе. Она работает практически с любыми данными мультимедиа.

AdobeGolive и Adobe LiveMotion.

Неограниченный функционал при разработке, вёрстке, и нарезке страниц. Многие считают функционал AdobeGolive недостаточным, но комплексное использование программного обеспечения Adobe вне конкуренции. Эта тема не для короткой статьи, а для многотомных трудов по Adobe.

Microsoft Front Page

Это удобная, простая в использовании, визуальная среда разработки. Не отличается чистотой кода на выходе. Но в то же время она позволяет работать с различными мультимедийными данными и не требует знания особых навыков, помимо знания Ms Word. Может загружать готовые страницы по ftp, На данный момент Front Page в пакетах Microsoft Office заменен на Microsoft Expression Web и Microsoft Office SharePoint Designer.

Существует (1997 бесплатная версия FrontPage Express, которая делает достаточно чистый код, который, впрочем, уже не соответствует стандартам HTML. Но если вам на скорую руку надо сверстать сложную таблицу - это именно то, что вам надо. Дистрибутива у FrontPage Express нет, работает без установки.

COFFECUP HTML Editor

Достаточно неплохой визуальный редактор, снабжённый самыми простыми функциями работы с визуальной информацией. Помимо простенького визуального представления, Coffecup Html Editor способен работать с сырым кодом.

· В программе присутствует множество готовых блоков с html кодом, который можно использовать на своё усмотрение, а так же несколько шаблонов кода для CSS, в которые можно подставлять свои параметры. Шаблонов довольно много;

· Из коробки присутствует менеджер проектов;

· Можно работать с сайтами по ftp;

· Полный функционал обычных текстовых редакторов для интернет-разработки;

· Возможность просмотра фрагментов кода параллельно с отображением результата работы данного отрезка/

В целом реализация неплохая, присутствует встроенный браузер. Что не понравилось в этой программе, Coffecup работает не очень стабильно.

COFFECUP Visual Site Designer

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

Nvu

NVU -- тут не будет звучать лишних слов, по поводу особого функционала программы. Работает стабильнее и быстрее. Фрагментов кода в Nvu немножечко поменьше, поэтому каких-то особенных эффектов или CSS скриптов в нём не найдётся. Существует возможность редактирования файлов на ftp, что тоже весьма полезно при работе со статиками. Как визуальный редактор для создания Веб-страниц Nvu весьма ограничен.

WYSIWYG WEB Builder

WYSIWYG WEB Builder -- условно бесплатная программа, которая предоставляет пользователям весь спектр возможностей для построения сайтов, без знания специальных языков и кодов. Можно набросать готовый сайт в считанные минуты, просто кликая мышкой на понравившихся элементах и перетаскивая их на страницу сайта. Тем не менее в программе присутствуют так же инструменты для создания сложных форм, стилей и внедрения различных объектов из интернета и проекта сайта.

В свет вышла программа для разработки сайтов по WYSIWYG технологии WYSIWYG WEB Builder 8.5.1 Программа поставляется в режиме shareware. В этой версии, по сравнению с предыдущим релизом представлено 50 дополнений и 150 новых функций, заявленных производителем. Всего в этом релизе присутствует порядка 250 готовых решений, множество готовых шаблонов и даже собственная CMS, которая работает из сети. Для тестирования сайта же, не понадобиться ничего кроме самого редактора, всё необходимое встроено в этот продукт фирмы Pablo Software Solutions.

· Поддержка HTML5/CSS3;

· Встроенная система управления контентом (CMS) ;

· Менеджер тем с поддержкой JQuery;

· Новые функции навигации и т.д.

ЗАКЛЮЧЕНИЕ

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

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

Ни одна программа не способна создать качественное новое приложение для интернета самостоятельно, без доработки. Идеальная вёрстка возможно только тогда, когда программист использует свои знания, а не доверяет программам.

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

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

Для профессиональных дизайнеров подойдёт решение от Adobe в комплексе с другими программами этого производителя.

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

СПИСОК ЛИТЕРАТУРЫ

1. Лазаро Исси Коэн, Джозеф Исси Коэн «Полный справочник по HTML, CSS и JavaScript»/ Ред.: ЭКОМ Паблишерз, 2007

2. Круг С. «Веб-дизайн: 2-е издание» / Ред.: Символ-Плюс, 2008

3. Леонтьев В., «Новейший самоучитель. Компьютер + Интернет 2011»/ Ред.: ОлмаМедиаГрупп, 2011

4. Сырых Ю.А. «Современный веб-дизайн. Эпоха Веб 3.0»/ Ред.; Вильямс, 2013 - 368 с.

5. Итан М., «Отзывчивый веб-дизайн»/ Ред.; Манн, Иванов и Фербер, 2012 - 172 с.

6. Уолтэр А. «Эмоциональный Веб-дизайн»/ Ред.; Манн, Иванов и Фербер, 2012 - 144 с.

7. Берд Джейсон «Веб-дизайн: Руководство разработчика»/ Ред.; Питер, 2012 - 224 с.

8. Фельке-Моррис Терри «Большая книга веб-дизайна»/ Ред.; Эксмо, 2012 - 608 с.

Статьи в Интернете

9. Стандартный язык разметки документов в WWW

(http://ru.wikipedia.org/wiki/Html)

10. Adobe dreamweaver и Flash MX (программа для анимации основанной на Flash)

(http://www.adobe.com/ru/products/dreamweaver)

11. Продукты Microsoft office

(http://office.microsoft.com/ru-ru/products/?CTT=97)

Приложение

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

MacOS - Macintosh Operating System -- семейство проприетарных операционных систем с графическим интерфейсом

NTFS- New Technology File System - файловая система

ОС- Операционная система

Windows - Microsoft Windows - семейство проприетарных операционных систем корпорации Microsoft, ориентированных на применение графического интерфейса при управлении

Консорциум Всемирной паутины (World Wide Web Consortium, W3C) -- организация, разрабатывающая и внедряющая технологические стандарты для Всемирной паутины. Консорциум возглавляет Тим Бернерс-Ли, изобретатель HTTP, HTML, URI, и автор множества других разработок в области информационных технологий.

Размещено на Allbest.ru