Современные технологии web дизайна

Современные технологии web дизайна

Аширбекова Р.Н. , Султанов М.А.

Южно-Казахстанский государственный университет им. М. Ауезова, Шымкент, Казахстан

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

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

На рынке доминируют два основных браузера: Netscape Navigator и Microsoft Internet Explorer . Вместе они, включая все их версии, представляет примерно 90% (или более) используемых сегодня браузеров. Эти два браузера конкурируют между собой за господство на рынке. Результатом их борьбы стала коллекция фирменных НТМ L -тегов, а также несовместимые реализации различных технологий (печально известный Dynamic HTML , а также JavaScript и Cascading Style Sheets — каскадные таблицы стилей). С другой стороны, конкуренция между Netscape и Microsoft в целом способствовала более быстрому развитию среды Web .

Большинство Web -авторов в своей работе ориентируются на Navigator и Internet Explorer , поскольку они занимают львиную долю рынка. Тем не менее, существует ряд других браузеров, которые вы можете принимать во внимание.

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

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

Несмотря на заявления Microsoft , что DHTML поддерживается всеми платформами, он особенно ненадежен на компьютерах платформы Macintosh .

Пользователи America Online ( AOL ) используют один из семи возможных браузеров (в зависимости от платформы и версии программного обеспечения AOL ), некоторые из них обеспечивают только самую минимальную поддержку HTML .

Последняя версия America Online для PC — это версия 3.0, использует адаптированную версию браузера Microsoft Internet Explorer 3.0. Тем не менее, не всегда можно полностью положиться на эту версию так же, как на стандартный вариант MS Internet Explorer 3.0. (Функциональность особенно ограничена для пользователей компьютеров Macintosh ). Многие разработчики Web не раз ужасались, увидев дизайн своего сайта (который великолепно работал в большинстве основных браузеров), после того как он был запущен в системе AOL и отображен одним из их браузеров.

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

Кроме того, некоторые технологии, такие как Java и Cascading Style Sheets (каскадные таблицы стилей), не доступны для пользователей Windows 3.0 (примерно 40% пользователей AOL ). Владельцы компьютеров Macintosh не смогут использовать Java Script и ряд других возможностей (примерно 8% пользователей).

К счастью, создан специальный сайт в помощь тем Web -дизайнерам, которые стремятся сделать свои страницы интересными и доступными для пользователей AOL . Особого внимания заслуживает таблица браузеров, где можно найти специальный список для каждого из браузеров (по версиям и платформам), перечень технологий и поддерживаемых функций, а также процент сбоев для каждого из браузеров[1]. WebTV приводит в наши квартиры Web через обыкновенный телевизор с пультом дистанционного управления (также, по желанию, можно использовать клавиатуру). Для просмотра Web -страниц WebTV использует собственный специализированный браузер. Он осуществляет синтаксический анализ в соответствии — со стандартом HTML 3.2, но не предоставляет возможностей отображения фреймов, Java , Java Script , ActiveX или любого другого формата, который требует встраиваемых приложений (за исключением встроенных Shockwave и RealAudio 3.0). Также создано много новых фирменных HTML -тегов, которые используются только в WebTV [2].

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

Opera — это маленький и простенький браузер, созданный норвежской компанией Opera Software в Осло. Этот браузер обладает исключительно малым временем загрузки и минимальными требованиями к объему диска. Достоинством Opera является полное соответствие стандартам HTML . Неточности в написании тегов (например, пропущенные закрывающие теги, неправильное вложение и т. д.), которые пропускают более солидные браузеры, не будут правильно отображаться этим браузером. Opera 5.0 поддерживает Java , каскадные таблицы стилей и DHTML [3].

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

Lynx — это распространяемый бесплатно браузер, обеспечивающий просмотр только текста, предлагает вам быстрый и надежный доступ в Web . Он заслужил известность как наименьший общий знаменатель стандарта, пригодный для тестирования Web -страницы по базовым функциональным характеристикам. Несмотря на простоту, этот браузер не устаревает. Lynx постоянно совершенствуется и модернизируется. Сейчас он обеспечивает поддержку таблиц, форм и даже JavaScript !

Пользователи действительно используют Lynx , поэтому не стоит удивляться, если клиент закажет разработку сайта для Lynx . Этот браузер также важен для инвалидов по зрению: они используют Lynx вместе с речевыми устройствами.

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

Отслеживающее программное обеспечение серверов обычно классифицирует посещения по браузерах, осуществляющих запросы. Поэтому, если только 20% посетителей создаваемого сайта используют версии браузеров 4.0, то, может быть, следует повременить с переходом на использование таблиц стилей[4].

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

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

Все предугадать невозможно, но на начальном этапе можно придерживаться следующих правил:

-если разрабатывается сайт научного или академического содержания, особое внимание следует обратить на то, как сайт работает в Lynx (или в другом неграфическом браузере);

— если сайт предназначен для потребителей — например, сайт, который предлагает обучающие игрушки для детей, — внимание обращается на скорость загрузки и внешний вид сайта для АО L — браузеров;

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

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

Рассмотрим современные тенденции развития в области web-дизайна. Одним из таких направлений является стиль дизайна WEB 2.0. Проанализировав несколько сайтов и зарубежных источников, также пытающихся разобраться в визуальном представлении WEB 2.0, можно составить список особенностей, которыми должен обладать претендующий на дизайн в стиле WEB 2.0 сайт. В этих сайтах присутствуют следующие схожие черты: элегантность и простота, округлые формы, тени, нежный градиент, шрифт без засечек (Sans Serif), пастельные цвета v2.0, нижний колонтитул (Footer), размер шрифта: больше обычного размера, «лакированные» элементы интерфейса, наглядный HTML (XML стиль).
При этом на этих сайтах о тсутствуют: j ava-апплеты , а нимированные GIF-рисунки, 100% Flash, видимые таблицы.

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

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

2. Основы Web -технологий. Храмцов П.Б., Брик С.А., Русак А.М.Спб. 2005.

3. Крамер. HTML : наглядный курс Web -дизайна. Спб. 2005.

4. Нидерст. Web -мастеринг для профессионалов, настольный справочник. М.: Высшая школа. 2004.

5. Кон Артур. Секреты Интернета. Серия «Учебный курс», Ростов Н /Д.: Феникс, 2000, — 320с.

Источник

Веб-технологии для дизайнеров — зачем и как

Меня зовут Антон Шеин. Иногда я выступаю с докладами про дизайн, прототипирование и систематизацию интерфейсов.

После каждого доклада, раз за разом мне задают два основных вопроса:

1. Должен ли дизайнер уметь работать с веб-технологиями?
2. С чего дизайнеру начать, если хочется с ними разобраться?

Постараюсь ответить на них в этой статье.

Должен ли дизайнер уметь работать с веб-технологиями?

Если отвечать коротко: нет, не должен.

Дело в том, что никто никому ничего не должен. Как минимум до тех пор, пока вы не подписали документов с банком или ещё с кем-нибудь.

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

Владение технологиями позволит вам:

1. Автоматизировать рутину. Те вещи, которые вы выполняете из раза в раз, может сделать за вас компьютер. Например, соблюдать гайдлайны в дизайне, делать по образцу одного элементы сотни похожих, проверять их на разных сочетаниях данных, менять сразу все элементы при изменении одного и т. п.
2. Прорабатывать дизайн сложных систем и масштабных продуктов.
3. Легче общаться с разработкой и быстрее внедрять свои работы в продукт. Макет, нарисованный в графическом редакторе, позволяет многие неудобные моменты замести под ковёр. С ними всё равно придётся столкнуться на этапе разработки, когда менять решение будет уже поздно. Если дизайнер проработает все тонкости заранее, то продукт на выходе получится более качественным и по пути возникнет меньше споров.
4. Проверять свои решения в жизни, не дожидаясь разработки. Да, есть куча приложений и сервисов, которые позволяют на основе картинок собрать кликабельный прототип. Но ни один из этих сервисов не позволит вам воспользоваться вашим продуктом и проверить его в жизни до того, как он будет реализован разработкой.
5. Самостоятельно делать первые версии своих личных проектов, а не жалеть о том, что нет знакомого разработчика. Рабочий прототип, пусть и очень простой, всегда является плюсом при продаже идеи.

При этом, веб-технологии лишь один и навыков, полезных для дизайнера. На них свет клином не сошёлся. Есть ещё типографика, умение работать с цветом, иллюстрация, сценарии, переговоры, редакторское мастерство, 3D-визуализация, анимация и т. п.

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

На что делать упор, каждый решает сам.

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

С чего начать изучение веб-технологий?

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

Так и здесь. Начать нужно с двух очень важных навыков:

1. Десятипальцевая слепая печать.
2. Базовое умение читать на английском.

Десятипальцевая слепая печать

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

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

1. В качестве тренажёра лучше использовать thetypingcat.com или klava.org. Остальные тренажёры — издевательство над психикой и от них больше вреда, чем пользы.
2. Начав тренироваться печатать вслепую, не поддавайтесь соблазну переключиться обратно на привычный метод. Даже если очень хочется — скорость обучения от этого будет стремиться к нулю, так устроен мозг.

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

Базовое умение читать на английском

При изучение кода у вас будет возникать много вопросов. Благодаря StackOverflow.com, на них есть ответы. Но они на английском. Кроме того, на английском огромное количество хороших туториалов и статей. Если вы сможете их читать, учиться вам будет гораздо проще.

При этом не нужно идти на курсы или открывать толстый учебник. Ваш мозг — нейросеть. И если вы просто заставите себя читать ответы и статьи на иностранном языке, ваш мозг сам приспособится. С каждой статьёй вам будет всё легче понимать прочитанное. Хорошим помощником в изучении будет плагин для браузера, который переводит слова при выделении.

Ещё один способ научиться читать на английском — заставить себя смотреть сериалы без дубляжа. Для этого есть, например, замечательный сервис Ororo.tv.

Лучше начать с простых сериалов, так как «Шерлока» или «Теорию Большого Взрыва» смотреть будет тяжело. Сам я сильно продвинулся в английском пока смотрел «Lost» во время тренировок. Там очень простой английский, а сюжет незамысловат настолько, что и без перевода понятно что происходит.

Онлайн-курсы

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

Я бы рекомендовал такой порядок занятий:

1. HTML и CSS
2. Основы JS
3. Работа с терминалом

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

Поэтому в следующем посте я расскажу о другом подходе к обучению: мы возьмём реальный полезный проект и будем препарировать его по кусочкам, попутно изучая что к чему. Если вам это интересно — следите за статьями. Следующая будет в понедельник. О всех новых статьях рассказываю в Твитере, там же публикую полезные находки.

Источник