Еще в самом начале, когда веб-сайты были преимущественно текстовыми и о дизайне, как таковом, не было и речи, веб-среда уже представляла собой сложную систему со множеством специфических терминов и обозначений. Что и говорить о сегодняшнем дне, когда новые понятия и словечки появляются чуть ли не каждый день!
Дизайнеры, а в особенности веб-дизайнеры, пристально следят за трендами и новыми терминами в своей профессиональной области. В этой статье мы собрали 10 самых интересных и необходимых терминов веб-дизайна, которые обязательно пригодятся вам в работе. Зная эти понятия, вы будете общаться на одном языке. Притом неважно занимаетесь ли вы сами веб-дизайном, или хотите заказать разработку сайта профессионалам.
01. HTML 5, CSS & JavaScript
HTML5
HTML5 (англ. HyperText Markup Language, version 5) — язык для структурирования и представления содержимого всемирной паутины.
Несмотря на схожесть названий, HTML5 не является продолжением предыдущих версий HTML. Скорее речь идёт о новом языке Web Applications 1.0, который в маркетинговых целях назван знакомой аббревиатурой и построен на базе HTML.
Официально стандарт HTML5 ещё не завершён, но современные браузеры уже умеют частично с ним работать. Какие возможности предлагает HTML5?
● Поддержка геолокации — определение местоположения пользователя на карте и использование этой информации для вычисления маршрута его движения, вывода близлежащих магазинов, кинотеатров, кафе и других данных.
● Воспроизведение видеороликов.
● Воспроизведение аудиофайлов.
● Локальное хранилище — позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже.
● Фоновые вычисления — стандартный способ запуска JavaScript в браузере в фоновом режиме.
● Оффлайновые приложения — страницы, которые могут работать при отключении Интернета.
● Рисование — внутри тега (canvas) с помощью JavaScript можно рисовать фигуры, линии, создавать градиенты и трансформировать объекты на лету.
● Новые элементы форм: для даты, времени, поиска, чисел, выбора цвета и др.
CSS
CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.
Чтобы сделать красивую веб-страницу одного HTML не достаточно. Каскадные таблицы стилей (CSS) позволяют дизайнерам создавать визуальный набор правил, определяющих порядок в котором различные элементы веб-страницы будут отображаться в браузере.
CSS используется для задания цветов, шрифтов, расположения отдельных блоков и других аспектов представления внешнего вида этих веб-страниц. Основной целью разработки CSS являлось разделение описания логической структуры веб-страницы (которое производится с помощью HTML или других языков разметки) от описания внешнего вида этой веб-страницы (которое теперь производится с помощью формального языка CSS). Такое разделение может увеличить доступность документа, предоставить большую гибкость и возможность управления его представлением, а также уменьшить сложность и повторяемость в структурном содержимом.
JavaScript
JavaScript — прототипно-ориентированный сценарный язык программирования. Он обычно используется как встраиваемый язык для программного доступа к объектам приложений. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Основные архитектурные черты: динамическая типизация, слабая типизация, автоматическое управление памятью, прототипное программирование, функции как объекты первого класса. Следует отметить, что, несмотря на свое название, JavaScript не имеет никакого отношения к языку программирования Java.
02. Responsive design (Адаптивный веб—дизайн)
Чем больше разных устройств получают доступ в интернет, тем популярнее становится адаптивный веб-дизайн. В последние годы эта тенденция стала настолько модной, что клиенты стали требовать адаптивные сайты часто даже не зная, что же это значит.
Адаптивный веб-дизайн (англ. Responsive web design) — дизайн веб-страниц, обеспечивающий корректное (красивое) отображение сайта на различных устройствах, подключённых к интернету.
Целью адаптивного веб-дизайна является универсальность веб-сайта для различных устройств. Для того чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии адаптивного веб-дизайна не нужно создавать отдельные версии веб-сайта для разных видов устройств. Один сайт может работать на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет.
03. Semantic markup (Семантическая разметка)
Семантическая разметка – это метод верстки документов, при котором каждый структурный элемент языка разметки гипертекста выбирается не на основе того, как он выглядит в браузере, а на основе его семантического предназначения.
Содержание страниц сайта теоретически понятно читающим их людям, однако поисковым системам сложно определить, о чем идет речь. Добавляя специальные теги к HTML-коду своих страниц, вы как бы подсказываете поисковой системе, что вот здесь, например, описывается такой-то фильм (место, человек, видеоролик). Тем самым вы помогаете поисковым системам и другим приложениям лучше понимать ваш контент и отображать его подходящим образом.
04. SaaS
SaaS (от англ. Software as a Service – Программное обеспечение как услуга) — это выгодная альтернатива приобретению программного обеспечения. SaaS позволяет получать программное обеспечение как услугу, а не покупать дорогостоящие лицензионные программы.
Поставщики услуги, совместно с разработчиками SaaS приложений берут на себя разработку программ, их размещение, внедрение, обновление, техническую поддержку, а заказчик оплачивает только доступ к этому приложению через интернет. Таким образом, в отличие от обычной схемы приобретения лицензионного программного обеспечения, заказчик платит только за услугу (право пользования данной программой), то есть только за то, что ему необходимо.
Чаще всего SaaS дает доступ к приложениям, которые потребовали бы от заказчика приобретения дополнительных аппаратных мощностей, найма высококвалифицированных специалистов, разработке технического задания и внедрения (почтовый сервер, безопасность, телефония и т.д.).
05. A/B Testing (A/B тестирование)
A/B тестирование, также известное под названием «сплит-тестирование» – это один из наиболее эффективных способов измерить и оптимизировать (научным образом) эффективность веб-страницы. Суть тестирования заключается в том, что берутся две версии определенного материала, например, целевой страницы сайта, и одновременно запускаются перед одинаковыми по размеру аудиториями. Затем результаты автоматически сравниваются, и становится понятно, какая из версий функционирует успешней. A/B тестирование популярно и вызывает доверие у маркетологов благодаря тому, что при его выполнении должным образом, вы получаете точную информацию о том, какие изменения нужно внести, чтобы ваша компания стала успешней.
06. ARIA
WAI-ARIA (Web Accessibility Initiative — Accessible Rich Internet Applications) — стандарт доступности активных Интернет-приложений, который определяет подходы к тому, чтобы сделать содержимое сайтов и интернет-приложений более доступными для людей с ограниченными возможностями.
Применение стандарта особенно эффективно для сайтов с динамическим содержимым и развитыми элементами управления пользовательским интерфейсом, разработанными с использованием Ajax, HTML, JavaScript, и связанных с ними технологий. В настоящее время, некоторые функциональные возможности веб-сайтов недоступны для части пользователей с ограниченными физическими возможностями, особенно для людей, полагающихся на программы, читающие с экрана и для тех людей, которые не могут использовать мышь. WAI-ARIA задает новые пути предоставления функциональных возможностей программами-помощниками. С помощью WAI-ARIA разработчики могут создавать прогрессивные веб-приложения, доступные и удобные для всех пользователей.
07. Information Architecture (информационная архитектура)
Информационная архитектура (IA) это все, что касается организации сайта. IA — обобщенное понятие, используемое для описания семантической структуры информации веб-сайта: организации контента, путей перехода и взаимосвязи страниц сайта. Основная задача AI организовать информацию таким образом, чтобы пользователям (а не поисковикам) было удобно с ней работать. Как следствие, это влияет на повышение конверсии и уровень удовлетворенности пользователей.
08. Server-side scripting (серверные сценарии)
Серверный сценарий — это небольшая программа, которая хранится на сервере и запускается в результате определенных действий в браузере. Подобные сценарии можно писать на различных языках, в том числе Perl, PHP и Microsoft ASP.NET. В отличие от клиентских сценариев, таких как JavaScript, серверные сценарии запускаются на сервере до отображения веб-страницы в обозревателе. Примерами приложений серверных сценариев могут служить торговые карты, динамические меню и опросы.
Есть два подхода по обеспечению функциональности приложений на веб-сайте:
1. Через клиента, когда алгоритмом и обработкой данных занимается непосредственно браузер, используя JavaScript
2. Серверный, когда все манипуляции с данными производятся на сервере.
Большинство веб-приложений комбинируют оба этих подхода, так что пользователю кажется, что все происходит в браузере, но на самом деле данные отправляются на сервер для хранения, генерирования или обработки. Это позволяет снижать нагрузку на браузер и заметно улучшает производительность.
09. Visual hierarchy (визуальная иерархия)
Визуальная иерархия – это последовательность (порядок), в которой человеческий глаз воспринимает увиденную информацию. Так устроено природой, что человек сначала обращает внимание на наиболее контрастные блоки. Благодаря продуманной иерархии визуальных элементов на странице можно направлять внимание пользователей туда, куда вам нужно. Кроме этого гармоничная визуальная иерархия – это залог красивого макета. Есть определенные принципы, согласно которым нужно распределять информационные и мультимедийные блоки на веб-странице. Их выбор зависит от ваших целей и задач.
10. Infinite/parallax scrolling (бесконечная прокрутка и эффект параллакса)
Сайты с эффектом параллакса или бесконечной прокруткой переживают пик популярности. Во многом это объясняется тем, что прокрутка – это интересный способ ознакомления пользователя с содержимым сайта без нудного перехода с одной страницы на другую. Все представлено, так сказать, одной строкой. А если добавить еще и эффект параллакса, вообще получится красота.
Параллакс – это эффект псевдотрехмерного пространства. Он создается путем наложения нескольких фоновых слоев с различными текстурами, которые во время прокрутки двигаются с разной скоростью.
Дайте нам знать в комментариях, если вы считаете, что мы пропустили что-то важное!
Источник: creativebloq.com
