Решение задач на тему: Всемирная паутина WWW и Wеb-дизайн. Языки разметки. Этапы проектирования

Введение

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

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

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

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

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

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

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

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

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

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

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

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

наблюдение.

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

Всемирная паутина (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. В процессе этой обработки ошибки, допущенные разработчиками, не исправляются.соответствует спецификации SGML, поскольку XML является её подмножеством. HTML обладает множеством особенностей в процессе обработки и фактически перестал относиться к семейству SGML, что и закреплено в черновике спецификации HTML 5.

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

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

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

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

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

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

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

При этом дизайнер должен учитывать ограничения стандартов 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 или С, редакторы кода страниц интернет впитали возможность подсветки синтаксиса и подстановки элементов кода.

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

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

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

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

Оглавление

- Введение

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

- Этапы проектирования ГЛАВА 2. Программы для создания Web-дизайна

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

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

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

- Визуальные редакторы для разработчиков WEB ЗАКЛЮЧЕНИЕ

- Список литературы

- Приложение

Заключение

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

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

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

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

Список литературы

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

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

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

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

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

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

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

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

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

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

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

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