Введение в атомный веб-дизайн. Введение в Web-дизайн Введение в web дизайн
HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. Дронов Владимир
ГЛАВА 1 Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц
Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц
Всемирная паутина, WWW, Web-дизайн, Web-сайт, Web-страница - все знают, что это такое. Но что такое современная Всемирная паутина, современный Web- дизайн и современная Web-страница? Именно с ответов на все эти вопросы начнется данная книга. Далее мы немного по- говорим о принципах функционирования Интернета, Web-страницах и Web-сайтах, создадим нашу первую Web-страницу, начнем изучать язык HTML 5 и подберем программы, которые будем использовать в работе. Так сказать, с места в карьер…
Современный Web-дизайн. Концепция Web 2.0
Раньше доступ в Интернет можно было получить только с компьютеров. Потом в Интернет стали выходить с мобильных телефонов. Сейчас к Сети подключились мультимедийные плееры, устройства чтения электронных книг и телевизоры. А завтра - кто знает; может быть, мы будем выходить на Web-сайты с утюга или пылесоса…
"Я буду везде", - заявляет Интернет. - "Я стану вездесущим. Все готовьтесь к моему приходу!"
Что требуется от современного Web-сайта
Будем готовиться… Но что нам, как будущим Web-дизайнерам, для этого следует сделать? Соблюсти три несложных правила.
1. Строго соблюдать все интернет-стандарты.
2. Тщательно продумать наполнение Web-страниц.
3. Позаботиться о доступности Web-страниц.
Рассмотрим их подробнее.
Интернет грозится прийти на самые разные устройства, которые могут быть основаны на разных аппаратных и программных платформах, зачастую сильно отличающихся друг от друга. Так, персональные компьютеры построены на аппаратной платформе Intel и программной платформе Microsoft Windows (по крайней мере, большинство). Мобильный телефон автора основан на аппаратно-программной платформе Samsung. А на чем будет работать интернет-пылесос, сейчас не может сказать никто.
Одно объединяет все это аппаратно-программное многообразие - соответствие интернет-стандартам. Иначе устройства в лучшем случае будут отображать Web- страницы неправильно, в худшем - вообще не будут работать.
Из этого следует первое правило из перечисленных ранее - Web-дизайнеры при создании Web-страниц обязаны строго придерживаться современных интернет-стандартов, чтобы их творения одинаково (ну, или почти одинаково) отображались на всех устройствах.
Первое правило также требует отказа от устаревших и закрытых, фирменных интернет-технологий. С устаревшими технологиями все понятно: старье - не помощник новому. Закрытые же технологии неудобны тем, что зачастую контролируются единственной фирмой, которая единолично "заказывает музыку" и далеко не всегда прислушивается к мнению интернет-сообщества. К таким технологиям относятся, в частности, Adobe Flash и Microsoft ActiveX.
Открытыми интернет-стандартами, в том числе и Web-стандартами, занимается организация World Wide Web Consortium (Консорциум Всемирной паутины), или сокращенно W3C. Она разрабатывает стандарты, согласует их с требованиями участников рынка и публикует на своем Web-сайте http://www.w3.org . Все опубликованные там стандарты обязательны к применению.
Интернет когда-то начинался как сеть ученых, которым было нужно обмениваться результатами исследований. А что представляли собой эти результаты? В основ- ном, текст, возможно, с иллюстрациями. Ученые - публика в этом смысле невзыскательная, им вполне хватало скромных возможностей тогдашнего WWW.
Теперь же абсолютное большинство пользователей Интернета - обычные обыватели. Им мало простого текста с парой картинок, им подавай хорошо оформленный текст, музыку и видео. Они требовательнее первых обитателей Сети.
Отсюда вытекает второе правило - Web-дизайнеры должны заботиться о полноте и удобстве наполнения Web-страниц.
Структура Web-страниц должна быть хорошо продумана, чтобы посетитель сразу смог найти на них все, что ему нужно.
К важным материалам желательно привлечь внимание посетителя, а маловажные скрыть. В этом могут помочь динамические элементы: раскрывающиеся при щелчке мышью абзацы, гиперссылки, выделяющиеся при наведении курсора мыши, и пр.
Если Web-сайт посвящен музыке или видео, все это должно быть доступно для воспроизведения прямо на его Web-страницах, без загрузки.
Одним словом - все для удобства посетителя! (Пожалуй, это правило следовало бы поставить в начале списка…)
Интернет грозится прийти на самые разные устройства с различными характеристиками: быстродействием процессора, объемом памяти, разрешением экрана, скоростью доступа к Сети. Но все они должны обеспечивать единообразный вывод Web-страниц. Как этого достигнуть?
Вот и третье правило - Web-дизайнеры должны заботиться о доступности страниц.
Web-страницы следует делать как можно более компактными. Чем компактнее файл, тем быстрее он загружается по сети - это аксиома.
Web-страницы не должны быть чересчур сложными. Чем сложнее Web- страница, тем больше времени и системных ресурсов требует ее обработка и вы- вод.
Web-страницы не должны требовать для отображения никакого дополнительно- го программного обеспечения. В идеале для их вывода достаточно только Web- обозревателя.
Но как эти правила реализуются на практике? Давайте откроем какой-нибудь со- временный Web-сайт, например, принадлежащий организации W3C (рис. 1.1). Как мы помним, его можно найти по интернет-адресу http://www.w3.org .
Рис. 1.1. Главная Web-страница Web-сайта организации W3C
Рис. 1.1. Главная Web-страница Web-сайта организации W3C
Что же мы здесь видим?
Web-сайт создан с учетом всех современных интернет-стандартов. Он отображается во всех Web-обозревателях практически одинаково.
Web-сайт не использует ни устаревших, ни закрытых интернет-технологий.
Структура Web-страниц исключительно ясна - мы можем без проблем найти все, что нужно. Слева находится набор гиперссылок, ведущих на другие Web- страницы Web-сайта, посередине - список новостей и гиперссылки на избранные статьи, справа - гиперссылки на дополнительные материалы.
Web-страница прекрасно читается. Тонкий шрифт без засечек, спокойная серо- голубая цветовая гамма, тонкие рамочки со скругленными углами, минимум графики - ничто не бросается в глаза.
Есть даже видеоролик!
Web-страница быстро загружается и мгновенно выводится на экран.
Web-страница ничего не требует для своего вывода, кроме Web-обозревателя. Налицо и соблюдение стандартов, и наполнение, и доступность. Три из трех!
Именно такие Web-страницы мы и будем учиться создавать в данной книге.
Из книги Adobe InDesign CS3 автора Завгородний ВладимирСоздание шаблонов страниц Прежде всего, нам потребуется выбрать (указать) формат страницы, создать новый документ и хотя бы предварительно оформить мастер-страницы.Предположим, что наша книга будет формата 60 ? 90/16. Как мы знаем из первой части книги, без консультации в
Из книги Microsoft Windows SharePoint Services 3.0. Русская версия. Главы 9-16 автора Лондер ОльгаСоздание библиотеки вики-страниц Хотя на базе служб SharePoint можно создавать узлы, используя в качестве основы шаблон вики-узла, применение вики-технологии не ограничивается такими узлами. Вики-узлы можно использовать на любом узле группы, создав библиотеку вики-страниц.
Из книги Искусство оформления сайта. Практическое пособие автора Бердышев Сергей НиколаевичГлава 2. Веб-дизайн как технология
Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов ВладимирГЛАВА 1 Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц Всемирная паутина, WWW, Web-дизайн, Web-сайт, Web-страница - все знают, что это такое. Но что такое современная Всемирная паутина, современный Web- дизайн и современная Web-страница? Именно с ответов на все эти вопросы
Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир Из книги XSLT автора Хольцнер Стивен Из книги Веб-Самоделкин. Как самому создать сайт быстро и профессионально автора Гладкий Алексей АнатольевичГЛАВА 16. Создание интерактивных Web-страниц В предыдущей главе мы изучили библиотеку Ext Core. От обилия объектов, свойств, методов и событий голова идет кругом… Как же применить все это богатство на практике?Этому будет целиком посвящена данная глава. Мы научимся создавать
Из книги Знакомьтесь, информационные технологии автора Воловник Аркадий АвральевичСовременный Web-дизайн. Концепция Web 2.0 Раньше доступ в Интернет можно было получить только с компьютеров. Потом в Интернет стали выходить с мобильных телефонов. Сейчас к Сети подключились мультимедийные плееры, устройства чтения электронных книг и телевизоры. А завтра -
Из книги Access 2002: Самоучитель автора Дубнов Павел ЮрьевичГЛАВА 10. Контейнерный Web-дизайн В предыдущей главе мы рассматривали атрибуты стиля CSS, задающие параметры абзацев и отображения. Их было совсем немного, и глава получилась небольшой.Теперь мы займемся Web-дизайном. Согласитесь - наши Web-странички, несмотря на созданное
Из книги Цифровой журнал «Компьютерра» № 195 автора Журнал «Компьютерра»ГЛАВА 16. Создание интерактивных Web-страниц В предыдущей главе мы изучили библиотеку Ext Core. От обилия объектов, свойств, методов и событий голова идет кругом… Как же применить все это богатство на практике?Этому будет целиком посвящена данная глава. Мы научимся
Из книги автораСоздание последовательностей страниц:
Создание номеров страниц:
Создание, открытие и сохранение веб-страниц С помощью программы вы можете создавать новые веб-страницы, а также редактировать созданные ранее.Чтобы создать новую веб-страницу, нужно выполнить команду главного меню Файл?
Из книги автораГлава 1 Современный мир. Эра информационных технологий Одним из парадоксов развития человечества является то, что на протяжении всего своего развития человек использовал, накапливал, передавал информацию, не понимая и даже не задумываясь о ней.Реальная цивилизация
Из книги автораГлава 6 Создание страниц доступа к данным Страница доступа к данным – файл особого типа, предназначенный для просмотра и работы через Internet или intranet с данными, хранящимися в базах данных Microsoft Access или Microsoft SQL Server. Страница доступа к данным загружается в базу данных Access 2002
М.: СОЛОН-ПРЕСС, 2008. - 192 с. (Серия "Библиотека студента")
Пособие может использоваться для стационарного и дистанционного обучения при изучении следующих дисциплин: Программирование на языке высокого уровня, Человеко-машинное взаимодействие, Объектно-ориентированное программирование.
Основное внимание в пособии уделено языку программирования HTML, технологии CSS, языку программирования JavaScript, графическому редактору Adobe Photoshop, технологии мультимедиа.
К учебному пособию прилагается электронный учебник
на компакт-диске, который содержит теоретический материал, примеры реализации
различных задач (учебный сайт) и практическую часть (задания, контрольные
вопросы и методические указания на выполнение лабораторных работ). Кроме того,
на диске находится тестирующая программа, с помощью которой преподаватель может
быстро и объективно оценить степень усвоения материала.
Любопытной особенностью электронного учебника является то, что каждый раздел
сопровождается спокойной инструментальной музыкой, создающей хорошее настроение.
Данное учебное пособие предназначено для студентов
специальности 220400 (230105) - Программное обеспечение вычислительной техники и
автоматизированных систем. Наличие электронного учебника позволяет педагогам
просто решить проблему тиражирования методических указаний.
Книга незаменима для всех начинающих изучать Web-дизайн.
Формат: djvu
Размер: 5 ,7 Мб
Скачать: yandex.disk
СОДЕРЖАНИЕ
1. Глобальные вычислительные сети 6
2. Способы подключения к Internet 11I
3. Коммутация каналов, сообщений и пакетов. 13
4. Протоколы, службы, услуги 15
5. Браузеры 18
6. Поисковые системы и каталоги. 24
7. Основные понятия Web-дизайна 31
8. Структура Web-страницы 37
9. Сетевые технологии Web-дизайна 39
10. Язык HTML 46
10.1. Форматирование текста 51
10.2. Таблицы.. 55
10.3. Графика 61
10.4. Гиперссылки 67
10.5. Метатеги 71
10.6. Карты-ссылки 73
10.7. Мультимедиа 77
10.8. Фреймы 81
10.9. Каскадные таблицы стилей CSS 85
11. Язык JavaScript 91
11.1. Порядок запуска скриптов 95
11.2. Методы ввода информации 98
11.2.1. Ввод информации с помощью метода соп-firmO 99
11.2.2. Ввод информации с помощью метода promt().. 101
11.2.3. Ввод информации с помощью текстового поля 103
11.2.4. Ввод и вывод информации с помощью тексто¬вой области textarca 106
11.2.5. Интерактивные формы 108
11.3. Методы вывода информации 124
11.3.1. Вывод информации с помощью метода alert() 125
11.3.2. Вывод информации с помощью метода write() 126
11.3.3. Вывод информации с помощью текстового поля 127
11.3.4 Вывод информации с помощью созданных окон 129
11.4. События 132
11.5. Арифметические операции., 141
11.6. Логические операции и операции сдвига 143
11.7. Операции со строковыми переменными. 147
11.7.1. Перевод чисел из одной системы счисления в другую 150
11.8. Математические функции и константы 152
11.9. Регулярные циклы 158
11.10 Операторы условной передачи управления if-else(cond) Hswitch(x) 160
11.11 Примеры скриптов 167
11.11.1 Анимация в строке-заголовке браузера 168
11.11.2 Кнопка с подсветкой 169
11.11.3 Реализация итерационных циклов 171
Приложение 1: Перечень лабораторных работ и заданий, размещенных на оптическом диске 174
Приложение 2: Порядок запуска тестирующей программы 176
Приложение 3: Сайт «Самара сия - сама Россия»
Заключение 180
Список литературы 181
Модульность, возможность многократного использования и масштабируемость – это не только концепции программирования и разработки. Их также можно использовать при создании оптимизированных систем дизайна.
Атомный дизайн – это новая методология построения эффективных снизу вверх, построенная на аналогии с химией.
Вместо разработки коллекции веб-страниц, в концепции атомного дизайна сначала создаются простейшие компоненты интерфейса – атомы (кнопки, пункты меню и т.д.). Дополняется UI на четырех последующих этапах: молекулы, организмы, шаблоны и страницы .
Методология была разработана дизайнером Брэдом Фростом для создания успешных UI систем. Ей посвящена книга автора.
Атомный дизайн предлагает совершенно новый взгляд на дизайн интерфейса. В сегодняшней статье мы рассмотрим основы этой интересной концепции, чтобы вы могли составить о ней общее представление.
Иерархия атомного дизайна
Атомный дизайн – это ментальная модель восприятия веб-страниц как иерархии многократно используемых компонентов.
В нее входит пять стадий, каждая из которых состоит из групп компонентов предыдущей стадии: атомы, молекулы, организмы, шаблоны и страницы . Все они создают понятную и логичную систему дизайна интерфейсов.
Ниже мы рассмотрим каждую из стадий более подробно.
1. Атомы
Так же как и в химии, атомы – наименьшие неделимые частицы дизайна. Это базовые HTML элементы: кнопки, ярлыки, поля форм.
Конечно, не все HTML элементы являются атомами. Например, article и section не могут быть мельчайшими элементами веб-страницы.К атомам относятся и такие элементы, как , цвета, разрешения и другие CSS правила. По словам автора концепции “атомы наглядно демонстрируют все базовые стили”.
Пример
2. Молекулы
Молекулы состоят из группы атомов. Это следующая стадия иерархии атомного дизайна.
К молекулам относятся простейшие UI элементы, которые состоят из нескольких HTML компонентов: строка поиска или рекомендованные посты в правой панели.
Организация в молекулы дает атомам определенную цель. В группе они поддерживают и дополняют друг друга.
Например, заголовок (один атом) должен быть более заметным (иметь более крупный размер и толщину шрифта), чем имя автора (другой атом) в блоке с рекомендованными постами. В этом случае два атома работают сообща, “в команде”.
Пример
3. Организмы
Организмы состоят из групп молекул, атомов и иногда других организмов. В веб-дизайне организмы – это более сложные UI компоненты, которые представляют собой определенные секции страницы: хедер, боковая панель.
Организмы могут состоять из разных типов молекул. Например, боковая панель может состоять из строки поиска и различных виджетов. Или из одной и той же повторяющейся молекулы – к примеру, блоков постов. Также возможна комбинация этих вариантов.
Пример
4. Шаблоны
Следующая стадия иерархии атомного дизайна – шаблон. Здесь аналогия с химией заканчивается, чтобы сделать концепцию более доступной.
Шаблоны состоят из организмов. Это элементы страницы без финального контента. Цель шаблона – представить структуру будущего контента.
Шаблоны отражают взаимодействие атомов, молекул и организмов в контексте разметки. Это своеобразный скелет страницы.
Пример
Пример шаблона – дизайн домашней страницы со стандартными изображениями и блоками текста lorem ipsum. Атомы, молекулы и организмы находятся на своих местах, но со схематическим контентом.
5. Страницы
Страницы – последняя стадия иерархии атомного дизайна. На этом этапе шаблоны заполняются реальным контентом (текстом, изображениями, видео) и приобретают вид конечного UI.
Страницы позволяют дизайнерам тестировать готовый интерфейс, чтобы оценить его эффективность с точки зрения , доступности и других метрик.
Еще одна цель стадии страниц – создание вариантов шаблонов. При этом базовый шаблон остается прежним, но контент немного отличается. Например, если вы хотите показать разный контент разным группам пользователей (зарегистрированным и незарегистрированным) или один из заголовков гораздо длиннее других.
Использование вариантов шаблонов важно для создания последовательного и устойчивого пользовательского интерфейса. Все базовые элементы (атомы, молекулы, организмы) должны корректно и эффективно функционировать в разных сценариях.
Например, кнопка должна выглядеть кликабельной в любом окружении. Если она не кажется интерактивным элементом в конкретной версии, необходимо изменить дизайн этого атома и сделать его подходящим для всех версий.
Пример
Ниже представлен пример стадии страницы для сайта из предыдущего пункта. Выглядит совсем по-другому.
Чтобы создать эффективный UI, дизайнеры должны продумать все возможные изменения в реальном сайте. Также необходимо протестировать дизайн по разным вариантам шаблона.
Концепция атомного дизайна подразумевает создание интерфейса снизу вверх. Сначала прорабатываются простейшие элементы, на каждом последующем этапе они формируются в более крупные и сложные группы. В результате должна получиться целая система, состоящая из идеально организованных и связанных между собой элементов, – эффективный интерфейс.
Отправить свою хорошую работу в базу знаний просто. Используйте форму, расположенную ниже
Студенты, аспиранты, молодые ученые, использующие базу знаний в своей учебе и работе, будут вам очень благодарны.
Подобные документы
Выбор инструментальных и программных средств для создания сайта. Структура программного продукта. Создание сайта при помощи программы WordPress. Тестирование разработанной программы. Разработка структуры и дизайна сайта. Наполнение сайта контентом.
курсовая работа , добавлен 09.01.2014
Этапы развития веб-дизайна. Виды и типы веб-сайтов, теоретические аспекты их создания. Структура веб-сайта и его страниц. Процесс и результат разработки веб-дизайна. Создание сайта факультета архитектуры и дизайна Кубанского государственного университета.
дипломная работа , добавлен 10.11.2015
Подготовительный этап работы над корпоративным сайтом. Оценка его дизайна. Структура корпоративного сайта. Конвертирование посещений в сделку как задача целевой страницы. Преимущества и виды веб-сайтов. Основные правила, необходимые для PR-специалиста.
курсовая работа , добавлен 08.10.2013
Понятие web-страницы, классификация. Принципы создания и основные элементы. Пример контента сайта "Академия детства". Стандарты разработки дизайна для сайтов дошкольных учреждений. Шаблон главной страницы. Программный инструментарий по разработке.
курсовая работа , добавлен 13.01.2014
Практическая значимость создания сайта. Язык программирования JavaScript. Основные области использования языка JavaScript при создании интерактивных HTML-страниц. Язык программирования PHP. Программная основа сайта. Создание оформления дизайна сайта.
дипломная работа , добавлен 05.03.2013
Язык разметки гипертекстовых страниц HTML. Обеспечение доступности Web-страницы, представление текста и графики. Основные правила и этапы создания сайта, выбор структуры страницы. Оценка экономической целесообразности использования HTML-редакторов.
дипломная работа , добавлен 25.03.2013
Особенности создания сайта интернет-магазина для частных лиц и организаций. Анализ финансовой и технико-экономической деятельности фирмы. Создание информационной модели сайта, ее базовые элементы. Выбор программного и аппаратного обеспечения сайта.
дипломная работа , добавлен 08.12.2013
Введение
Первый в мире сайт info.cern.chпоявился в 1990 году, далее сайты развивались, и появилась необходимость оформления сайтов, с целью приятного визуального восприятия его пользователем.
В данной работе мы постараемся изучить основные понятия компьютерной графики, дизайна web-страниц а также основы построения композиции и подбора цвета. Распишем достоинства и недостатки как растровой, так и векторной графики, так же узнаем с каким программным обеспечением лучше всего работать для создания графического оформления, рассмотрим цветовые модели, укажем плюсы и минусы каждой модели. Опишем форматы графических изображений, которые используются в web-дизайне.
web дизайн компьютерный графика
Понятие web-дизайна
Понятие web-дизайна
Веб-дизайн (от англ. webdesign) -- это визуальное оформление веб-страниц. Он играет такую же роль для сайта, как полиграфический дизайн и вёрстка для бумажного издания. Часто «веб-дизайном» называют веб-разработку, то есть дело создания сайта вообще: проектирование структуры, навигации и иногда даже движков сайта.
С первого взгляда может показаться, что ответить на этот вопрос совсем несложно. Первое, что приходит в голову - это графическое оформление. Однако сегодня в это понятие вкладывается гораздо большее по широте охвата значение. Возможно, это не совсем верно, но на сегодняшний день, говоря «веб-дизайн», подразумевают не только профессиональное графическое оформление сайта.
В этом понятии собрано несколько вполне самостоятельных направлений, которые и складываются в итоге в то, что мы называем «веб-дизайн». Это и графический интерфейс сайта, который мы видим сразу после того, как страница загрузилась в браузере, и проектирование системы навигации, и контент-проект сайта, то есть - его информационное наполнение, которое также должно учитываться при создании нового сайта. Дружелюбность и понятность интерфейса, который мы видим на экране и многое другое.
Фактически, собственно графика, внешний вид и оформление сайта не являются главным моментом и отправной точкой в проектировании Интернет-страницы.
Веб-дизайн сегодня превратился в самостоятельное явление просто потому, что для занятия дизайном в Интернет недостаточно одного знания программ, предназначенных для работы с графикой и художественных способностей. Конечно, собственно программированием, особенно решением сложных задач, занимаются профессиональные программисты. Но и работа дизайнера невозможна без чёткого представления технологий Интернет. Дизайнер должен чётко представлять, какими путями можно решить поставленную задачу или воплотить в действующую модель свои идеи, что влечёт за собой необходимость разбираться и в языках программирования, и в некоторых тонкостях серверных технологий. Он должен представлять себе, каким образом осуществляется передача данных в сети, как и в каком виде его разработки достигнут своего конечного пользователя - посетителя разрабатываемого сайта.
В конечном итоге, простая с первого взгляда задача «рисования» обрастает огромным количеством дополнительных требований, в основном - технического характера, имеющими с художественной стороной мало общего. В итоге можно сказать, что веб-дизайн - это именно и есть создание сайта. Сочетание художественных способностей и широких знаний современных компьютерных технологий позволяют создавать сайты, которые запоминаются и заставляют посетителя возвращаться на них вновь.
Основные принципы web-дизайна
Целью большинства веб- дизайнеров является создание привлекательных, легкодоступных и функциональных сайтов, которые могут воздействовать на посетителя с целью выполнения какого-то действия. Подобный веб-проект требует хорошего графического дизайна сайта, простой и интуитивно понятной навигации по сайту, логически выверенную структуру сайта и надежное копирование. Хороший веб-дизайн сайта должен представлять собой, сочетание здравого смысла и хорошего планирования. Сайт должен быть привлекательным и простым в использовании, и самое главное предоставлять пользователю информацию или услуги, которые его интересуют.
