Web технологии: Что такое WEB-технологии? Как работают сайты?

Содержание

Что такое WEB-технологии? Как работают сайты?

Информация о материале: Категория: Статьи; Опубликовано: 24.01.2020, 13:57; Автор: Super Roman; Просмотров: 11812

Под «веб-технологиями» обычно подразумеваются языки разметки, языки программирования, базы данных, системы и платформы CMS и другие технологии, которые позволяют создавать веб-сайты, приложения и магазины. Люди, которые делают это, называются веб-разработчиками или веб-мастерами.
Есть два типа веб-технологий. Первый, так называемый front-end — это тот, который отвечают за внешний вид сайта, и виден в браузере пользователя. Такие технологии включают HTML, CSS, JavaScript. Второй тип веб-технологий — back-end, который работает на сервере и используется для обработки данных. Их действие обычно невидимо для пользователя, видны только введенные данные или действия, выполненные на веб-сайте, и результат этих данных или действий.

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

Что такое сервер?

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

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

Back-End

В то время как HTML, CSS и JavaScript практически всегда используются во внешнем интерфейсе, во внутреннем интерфейсе гораздо больше свободы выбора. Самым популярным на сегодняшний день языком программирования является PHP, который был создан специально для использования на веб-сайтах. Однако ничто не мешает использовать другие, гораздо более универсальные языки — Python, Java, C #, C ++ — популярные варианты.

Серверная часть также включает в себя базы данных, которые, как следует из названия, позволяют хранить различные типы данных. Данные можно вводить и читать, используя язык запроса, который всегда является SQL. Управление базой данных осуществляется с использованием специальных систем, таких как MySQL или MariaDB.

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

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

Если это так — скрипт позволяет пользователю войти в систему. Если нет — отобразится информация о том, что имя или пароль неверны.

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

Веб-технологии для разработчиков | MDN

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

Основы веб разработки

HTML: Язык гипертекстовой разметки — это язык, используемый для определения структуры и описания содержания веб-страницы в структурированной форме.
CSS: Каскадные таблицы стилей используются для описания внешнего вида веб-контента.
HTTP: HyperText Transfer Protocol (HTTP) — это протокол, по которому доставляются HTML и прочие медиа-документы.

Написание сценариев

JavaScript

JavaScript — язык программирования, широко используемый для реализации взаимодействия пользователя с веб-сайтами и приложениями.

Веб API (en-US)

Данный раздел включает справочные материалы по каждому из отдельно взятых API, содержащих огромные возможности для создания веб-сценариев, включая DOM (en-US) и все связанные с ним API, которые вы можете использовать для построения веб-контента и приложений.

Справочник по веб API содержит все интерфейсы в алфавитном порядке.
WebAPI (en-US) — данная страница содержит перечень API для взаимодействия с устройствами и другие API не менее полезные для приложений.

Справка по событиям содержит список событий, которые возникают на веб-странице или в веб-приложении.

Веб Компоненты

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

Графика

Canvas: <canvas> элемент предоставляет API для рисования 2D-графики, с использованием JavaScript.
SVG: SVG (Scalable Vector Graphics — масштабируемая векторная графика) — позволяет вам описать изображение в виде линий, кривых и других геометрических фигур. Благодаря этому можно масштабировать рисунок без потери качества.
WebGL: WebGL — это JavaScript API, позволяющее рисовать 3D или 2D изображения используя HTML-элемент <canvas>. Эта технология позволяет использовать стандарт OpenGL ES в Web-содержимом.
Аудио, видео и мультимедиа
Web медиа-технологии: Список связанного с медиа API, со ссылками на документацию для каждого из них.
Media capture and streams API: Справочник для API, используемого для потоковой передачи, записи и управления данным как локально, так и по сети. Также включает в себя инструменты для использования локальных камер и микрофонов для захвата видео, аудио и статичных изображений.
Использование HTML аудио и видео: Включение видео и\или аудио в веб-страницу и управление их воспроизведением.
WebRTC: RTC в WebRTC означает Real-Time Communications (связь в реальном времени) — технологию, обеспечивающую поток аудио или видео и обмен данным между одноранговыми клиентами браузера.

Прочее

MathML: Математический язык разметки предоставляет возможность показа комплексных математических уравнений и синтаксиса.
XSLT: Extensible Stylesheet Language Transformations (XSLT) позволяет преобразовать XML-документ в человекочитаемый HTML.
EXSLT: Функциональное расширение, которое предоставляет дополнительные возможности для XSLT.
XPath: XPath позволяет вам выбрать DOM-узел в документе, используя более мощный синтаксис, чем предоставляется обычными CSS selectors.

Руководство веб-разработчика: Руководство веб-разработчика предоставляет полезные пошаговые материалы, которые помогут вам в полной мере использовать веб-технологии для выполнения ваших задач и реализации ваших идей.
Учебные материалы для веб-разработчиков: Перечень учебных материалов позволит вам пошагово изучить API, технологии и расширить свой кругозор в области веб-технологий.
Справочные материалы (en-US): На данной странице будут представлены ссылки на всю справочную информацию, имеющуюся в MDN; а пока можно использовать ссылки на веб-технологии из левой части данной страницы.

Центр приложений (en-US): Содержит документацию для разработчиков веб-приложений. При помощи данных материалов можно научиться создавать приложения для мобильных устройств, персональных компьютеров и Firefox OS.
Общедоступность: Общедоступность (доступность, accessibility) в веб-разработке означает предоставление возможности использования веб-сайтов максимально возможному числу людей, даже если эти люди имеют некоторые физиологические ограничения. Этот раздел содержит информацию о разработке наиболее доступного веб-контента для таких людей.
Безопасность: Этот раздел уделяет внимание вопросам безопасности веб-сайтов и веб-приложений.

Руководства Web-разработчика | MDN

Эти статьи помогут изучить веб-технологии и интерфейсы API.

Изучение HTML: руководства и уроки

Язык гипертекстовой разметки HTML (HyperText Markup Language) — это основной язык практически для всего веб-контента. Многое из того, что вы видите в окне браузера, описано с помощью HTML.

Изучение CSS

Каскадные таблицы стилей CSS (Cascading Style Sheets) — язык стилей, используемый для описания внешнего вида документа HTML.

Доставка аудио и видео контента

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

Обработка аудио и видео

Веб-технологии примечательны тем, что они позволяют использовать различные инструменты в совокупности. Например, можно проводить манипуляции над имеющимися в браузере аудио и видео потоками с помощью <canvas>, WebGL или Web Audio API: напрямую изменять аудио и видео, т.

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

Руководство разработчика событий (en-US)

События связаны с:

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

AJAX

Это не технология сама по себе, а термин, который описывает «новый» подход к использованию существующих технологий вместе. AJAX включает: HTML или XHTML, CSS, JavaScript, DOM, XML, XSLT, и объект XMLHttpRequest. Когда эти технологии объединяются в модель AJAX, web-приложения способны делать быстрые дополняющие обновления интерфейса пользователя без необходимости полной перезагрузки страницы браузером. Приложения работают быстрее и становятся более отзывчивыми к действиям пользователей.

Графика для Web

Современным веб-сайтам и веб-приложениям часто требуется отображать графику.

Уроки по Web API

Список всех веб-API и как они работают.

JavaScript

Мощный скриптовый язык для создания приложений в Web.

Локализация и кодировка символов

По умолчанию браузер обрабатывает текст в кодировке Юникод (Unicode). При этом, при передаче информации через сеть (network) к браузеру символы кодируются байтами. Стандартом HTML рекомендуется использовать кодировку UTF-8 (так как она может представить любой Unicode символ) и обязательно объявлять, какая кодировка используется в документе.

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

На этой странице даётся обзор основных методов разработки веб-сайтов, корректно работающих на мобильных устройствах. Смотрите также: Firefox для Android.

Прогрессивные веб-приложения: Прогрессивные веб-приложения используют современные веб-API вкупе со стратегией прогрессивного улучшения для создания кросс-платформенных приложений. Такие приложения запускаются везде и обладают рядом характеристик, обеспечивающих пользователей преимуществами, аналогичными тем, что доступны в нативных решениях.
Оптимизация и производительность: Создаваемые вами современные веб-приложения и сайты должны иметь хорошую производительность — работать быстро и эффективно, как на персональных компьютерах (десктоп), так и на менее мощных мобильных устройствах.
Прямая и обратная обработка XML: Различные методы обработки XML с помощью web платформы.
The Web Open Font Format (WOFF): WOFF — бесплатный файловый формат шрифтов.
Алгоритм обработки текста двусторонней направленности (Unicode Bidirectional Text Algorithm): Алгоритм является частью стандарта Юникод. Он описывает в каком порядке выставляет символы браузер при обработке текста Unicode. Руководство поможет при создании международного веб-контента.
Использование объектов FormData: Объект FormData позволяет создать набор пар ключ/значение и передать их, используя XMLHttpRequest. Объект FormData предназначен для передачи данных форм, однако может быть использован для передачи пар ключ/значение независимо от форм. Данные передаются в том же формате, как и данные, передаваемые методом submit() формы, с установленной кодировкой enctype="multipart/form-data".
Пользовательский ввод и управление: Это руководство содержит рекомендации по обработке пользовательского ввода и внедрению управляющих элементов в веб-приложения. Также здесь вы найдёте соответствующие FAQs, живые примеры, ссылки на более подробные разборы близлежащих технологий.
Глоссарий (глоссарий терминов): Определения и аббревиатуры в мире Web и Internet.

JavaScript | MDN

Эта часть сайта посвящена самому языку JavaScript, и она не затрагивает тонкостей, связанных с веб-страницами или окружением, в котором исполняется JavaScript. Информация об API, относящихся к веб-страницам, находится в разделах, посвящённых Веб-API и DOM (en-US).

Стандартом языка JavaScript является ECMAScript. По состоянию на 2012, все современные браузеры полностью поддерживают ECMAScript 5. 1. Старые версии браузеров поддерживают по крайней мере — ECMAScript 3. 17 июня 2015 года состоялся выпуск шестой версии ECMAScript. Эта версия официально называется ECMAScript 2015, которую чаще всего называют ECMAScript 2015 или просто ES2015. С недавнего времени стандарты ECMAScript выпускаются ежегодно. Эта документация относится к последней версии черновика, которой является ECMAScript 2018.

Не следует путать JavaScript c языком программирования Java. И «Java», и «JavaScript» являются торговыми марками или зарегистрированными торговыми марками Oracle в США и других странах. Однако, у обоих языков различный синтаксис, семантика и применение.

Научитесь программировать на JavaScript вместе с нашим руководством.

Для абсолютных новичков

Загляните в наш Учебный План, если вам хочется изучить JavaScript, но у вас нет опыта в JavaScript или программировании. Доступные разделы:

Первые шаги в JavaScript: Отвечаем на такие вопросы, как «что такое JavaScript?», «как он выглядит?», «и что он может делать?», а также обсуждаем основные возможности JavaScript, такие, как переменные, строки, числа и массивы.
Структурные элементы JavaScript: Продолжаем наше изучение главных возможностей JavaScript, обращаем наше внимание на самые часто встречающиеся блоки кода, такие, как условные выражения, циклы, функции и события.

Введение в объекты JavaScript: Объектно-ориентированная природа JavaScript важна для понимания, если вы хотите углубить знание языка и писать более эффективный код. Поэтому мы подготовили модуль, который поможет вам в этом.
Асинхронный JavaScript: Обсуждение асинхронного JavaScript: почему это так важно, как эта возможность языка может использована для обработки потенциальных блокирующих операций, как, например получение данных с сервера.
Клиентские (браузерные) веб-API: Когда вы пишите клиент веб-сайтов или приложений на JavaScript, вы не далеко уйдёте без использования API – интерфейсов для взаимодействия с браузером и операционной системой, на которой запущен сайт, или даже для операций с данными, полученными от других веб-сайтов и сервисов. В этом цикле статей мы разбираемся, что такое API и как использовать некоторые самые распространённые API, которые вам встретятся при разработке.

Руководство по JavaScript

Руководство по JavaScript: Более подробное руководство по языку программирования JavaScript, нацеленное на тех, кто уже имеет опыт программирования на JavaScript или на любом другом языке.

Средний уровень

Понимание JavaScript-фреймворков для фронтенда

JavaScript-ффреймворки являются неотъемлемой частью современной веб-разработки,

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

инструменты для создания масштабируемых и интерактивных веб-приложений. Многие

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

Повторное введение в JavaScript

Обзор для тех, кто думает, что знает JavaScript.

Структуры данных JavaScript

Обзор существующих структур данных в JavaScript.

Операторы сравнения и тождественности

JavaScript предоставляет три различных оператора сравнения значений: строгое равенство ===, с приведением типов == и метод Object.is().

Замыкания

Замыкания это сочетание функции и лексического окружения в котором она была определена.

Продвинутый уровень

Наследование и цепочка прототипов: Статья разъясняет бытующие заблуждения и недооцененность наследования, основанного на прототипах.
Строгий режим — «use strict»: Строгий режим говорит о том, что вы не можете использовать какую-либо переменную до её объявления. Это ограниченный вариант ECMAScript 5, для более быстрой производительности и простой отладки.
Типизированные массивы: Типизированные массивы предоставляют механизм для работы с необработанными двоичными данными в JavaScript.
Управление памятью: Жизненный цикл памяти и сборка мусора в JavaScript.
Модель параллелизма (мультипоточности) и цикл событий: В JavaScript есть модель параллелизма, основанная на «цикле событий».
Введение в использование XPath в JavaScript (en-US): Этот документ описывает интерфейс для использования XPath в JavaScript на прямую, внутри расширений и на веб-сайтах.

Подробный справочник по JavaScript.

Стандартные встроенные объекты: Узнайте о стандартных встроенных объектах Array, Boolean, Date, Error, Function, JSON, Math, Number, Object, RegExp, String, Map, Set, WeakMap , WeakSet и других.
Выражения и операторы: Узнайте о поведении таких операторов в JavaScript, как instanceof, typeof, new, this, приоритете операторов и многом другом.
Инструкции и объявления: Узнайте о do-while, for-in, for-of, try-catch, let, var, const, if-else, switch и многих других выражениях и ключевых словах в JavaScript.
Функции: Узнайте, как работать с функциями в JavaScript, чтобы разрабатывать свои приложения.

Полезные инструменты для написания и отладки вашего JavaScript кода.

Инструменты разработчика Firefox: Простой редактор JavaScript, Веб-консоль, JavaScript Профайлер (en-US), Отладчик и другие.
JavaScript шеллы: JavaScript шеллы позволяют быстро проверять фрагменты JavaScript-кода.
TogetherJS: Объединение усилий стало проще. Добавляя TogetherJS на вашу веб-страницу, ваши пользователи могут помочь другу-другу в реальном времени!
Stack Overflow: Вопросы по JavaScript на Stack Overflow.
Версии JavaScript и информация о релизах: Просмотрите историю возможностей JavaScript и их статус.
JSFiddle: Редактируйте JavaScript, CSS, HTML и получайте живые результаты. Используйте экспериментальные ресурсы и взаимодействуйте с вашей командой онлайн.

Plunker: Plunker — это онлайн-сообщество для создания, обмена и совместной работы над идеями, касающимися веб-разработки. Редактируйте ваши JavaScript, CSS, HTML файлы, смотрите результат их выполнения и организуйте их в файловую структуру.
JSBin: JS Bin это инструмент с открытым исходным кодом для отладки и совместной разработки.
Codepen: Codepen ещё одна платформа для совместной веб-разработки, дающие результат в реальном-времени.
StackBlitz: StackBlitz — это «песочница»/инструмент отладки, где вы можете размещать полновесные приложения написанные на React, Angular, т др.

HTML | MDN

HTML (HyperText Markup Language — «язык гипертекстовой разметки») — самый базовый строительный блок Веба. Он определяет содержание и структуру веб-контента. Другие технологии, помимо HTML, обычно используются для описания внешнего вида/представления (CSS) или функциональности/поведения (JavaScript) веб-страницы.

Под гипертекстом («hypertext») понимаются ссылки, которые соединяют веб-страницы друг с другом либо в пределах одного веб-сайта, либо между веб-сайтами. Ссылки являются фундаментальным аспектом Веба. Загружая контент в Интернет и связывая его со страницами, созданными другими людьми, вы становитесь активным участником Всемирной паутины.

HTML использует разметку («markup») для отображения текста, изображений и другого контента в веб-браузере. HTML-разметка включает в себя специальные «элементы», такие как <head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>, <aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <video> и многие другие.

HTML-элемент выделяется из прочего текста в документе с помощью «тегов», которые состоят из имени элемента окружённого «<» и «>«. Имя элемента внутри тега не чувствительно к регистру. То есть, оно может быть написано в верхнем или нижнем регистре, или смешано. Например, тег <title> может быть записан как <Title>, <TITLE>, или любым другим способом.

Статьи, представленные ниже, могут помочь вам больше узнать о HTML.

Введение в HTML
Если вы новичок в веб-разработке, обязательно прочитайте нашу статью «Основы HTML», чтобы узнать, что такое HTML и как его использовать.
Руководства по HTML
Статьи о том, как использовать HTML, а также обучающие материалы и исчерпывающие примеры можно найти в разделе «Пространство изучения HTML».
Справка по HTML
В нашем обширном разделе «Справка по HTML» вы найдёте подробности о каждом элементе и атрибуте в HTML.

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

Введение в HTML: Этот модуль закладывает основу, знакомя вас с важными понятиями и синтаксисом, такими как применение HTML к тексту, создание гиперссылок и использование HTML для построения веб-страницы.
Мультимедиа и встраивание: В этом модуле рассматривается, как использовать HTML для добавления мультимедиа на ваши веб-страницы, включая различные способы вставки изображений, а также для встраивания видео, аудио, и даже других веб-страниц целиком.
HTML-таблицы: Представление табличных данных на веб-странице в понятной, доступной форме может быть проблемой. Этот модуль охватывает базовую разметку таблиц, а также более сложные особенности, такие как добавление заголовков и описаний.
HTML-формы: Формы являются очень важной частью Веба — они предоставляют большую часть функциональности, необходимого для взаимодействия с веб-сайтами, например регистрация и вход в систему, отправка отзывов, покупка товаров, и многое другое. Этот модуль познакомит вас с созданием клиентских (client-side/front-end) частей форм.
Используйте HTML для решения распространённых задач.: Содержит ссылки на разделы, объясняющие как использовать HTML для решения самых распространённых задач при создании веб-страницы: работа с заголовками, добавление изображений или видео, выделение контента, создание простой формы и т.д.

Продвинутые темы

CORS: включённые изображения: Атрибут crossorigin в сочетании с соответствующим заголовком CORS, позволяет загружать изображения, определённые элементом <img>, из внешних источников и использовать в элементе <canvas>, как если бы они были загружены из текущего источника.
CORS: Настройки атрибутов: Некоторые HTML-элементы, предоставляющие поддержку CORS, такие как <img> или <video>, имеют атрибут crossorigin (свойство crossOrigin), который позволяет вам настраивать CORS-запросы для получаемых элементом данных.
Управление фокусом в HTML: DOM-Атрибут activeElement и DOM-метод hasFocus() помогают отслеживать и контролировать взаимодействие пользователя с элементами на веб-странице.
Предварительная загрузка контента с помощью rel=»preload» (en-US): Значение preload атрибута rel элемента <link> позволяет писать декларативные fetch-запросы в HTML <head>, указывая ресурсы, которые потребуются вашим страницам сразу после загрузки и, следовательно, которые вы хотите начать предварительно загружать на раннем этапе жизненного цикла страницы, прежде чем браузером запустится основной механизм рендеринга (отрисовки). Это гарантирует, что они станут доступными раньше и с меньшей вероятностью заблокируют первый рендеринг страницы, что приведёт к улучшению производительности. В этой статье приведено начальное руководство по работе с preload (предзагрузкой).

Справочники

Справка по HTML: HTML состоит из элементов, каждый из которых может быть изменён некоторым количеством атрибутов. HTML-документы связаны между собой ссылками.
Справка по HTML-элементам: Просмотр списка всех элементов HTML.
Справка по HTML-атрибутам: У элементов в HTML есть атрибуты. Это дополнительные величины, которые настраивают элементы или управляют их поведением различными способами.
Глобальные атрибуты: Глобальные атрибуты могут быть указаны для всех элементов HTML, даже тех, которые не указаны в стандарте. Это означает, что любые нестандартные элементы обязаны по-прежнему разрешать эти атрибуты, даже если эти элементы делают документ несовместимым с HTML5.
Строчные и блочные элементы: Элементы HTML являются обычно «строчными» или «блочными». Строчный элемент занимает только пространство, ограниченное тегами, которые его определяют. Блочный элемент занимает все пространство своего родительского элемента (контейнера), тем самым создавая «блок».
Типы ссылок: В HTML различные типы ссылок могут использоваться для установления и определения связи между двумя документами. Элементы-ссылки, типы которых могут быть заданы, включают в себя <a>, <area> и <link>.
Поддержка медиа-форматов с помощью HTML-элементов audio и video: Элементы <audio> и <video> позволяют вам воспроизводить аудио и видео. Эти элементы предоставляют браузерную альтернативу аналогичным возможностям, которые есть в Adobe Flash и других плагинах.
Виды HTML-контента: HTML состоит из нескольких видов контента, каждый из которых разрешено использовать в определённых контекстах и запрещено в других. Так же, у каждого есть набор других категорий контента, которые они могут содержать, и элементы, которые могут или не могут использоваться в них. Это руководство по таким категориям.
Режим совместимости и стандартный режим: Историческая справка по режиму совместимости и стандартному режиму.

CSS | MDN

Cascading Style Sheets (CSS) — это язык иерархических правил (таблиц стилей (en-US)), используемый для представления внешнего вида документа, написанного на HTML или XML (en-US) (включая различные языки XML, такие как SVG (en-US) и XHTML). CSS описывает, каким образом элемент должен отображаться на экране, на бумаге, голосом или с использованием других медиа средств.

CSS является одним из основных языков свободной веб-разработки, который стандартизован спецификацией W3C. Стандарт CSS делится на уровни: CSS1 в настоящее время устарел, CSS2.1 — рекомендован для применения, а CSS3, разбитый на более мелкие модули, развивается на пути стандартизации.

Справочник по CSS
Исчерпывающий справочник для опытных веб-разработчиков, описывающий каждое свойство и понятие CSS.
Самоучитель по CSS
Пошаговое руководство для помощи начинающим программистам CSS. Содержит все необходимые основы.
Примеры CSS3
Набор примеров представляющий новейшие технологии CSS в действии: толчок к креативности.

Ключевые понятия CSS: Описание синтаксиса и внешнего вида языка (en-US) и введение в фундаментальные понятия такие как специфичность (en-US), наследование(каскадирование) (en-US), блочная модель(box-model) и схлопывание отступов(margin-collapse (en-US)), наложение (en-US) и контекст форматирования(Block formatting context (en-US)), начальное(initial (en-US)), вычисленное(computed (en-US)), используемое(used (en-US)) и актуальное(actual (en-US)) значения. Кроме того, описана краткая форма записи (en-US) свойств CSS.

Руководство разработчика CSS (en-US): Статьи, которые помогут вам узнать все: начиная от основ организации стилей в HTML, заканчивая различными методами языка CSS, чтобы сделать свой контент сияющим.
Распространённые вопросы по CSS: Ответы на часто возникающие вопросы о CSS.

Веб-технологии | WebReference

Рекомендуем!

AngularJS. Рецепты программирования

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

Сложность: средняя

Рекомендуем!

Глубокое погружение в Canvas

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

Сложность: высокая

Рекомендуем!

Знакомство с JavaScript

Эта книга научит вас основам программирования и JavaScript. Независимо от того, опытный вы программист или нет, книга предназначена для всех, кто хочет изучить язык программирования JavaScript.

Сложность: начальная

Рекомендуем!

Основы jQuery

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

Сложность: начальная

Рекомендуем!

Приступая к работе с Grunt

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

Сложность: начальная

Рекомендуем!

Сборка с Gulp

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

Сложность: средняя

Для управления зависимостями приложений в PHP есть Composer, в Ruby есть Bundler, а для Node.js есть npm. Независимо от среды, эти инструменты значительно улучшают рабочий процесс разработки.

Когда речь заходит о веб-разработке, то инструмент Gulp помогает выполнять разные задачи и часто используется для следующего: запуск веб-сервера; автоматическая перезагрузка браузера при каждом сохранении файла; использование препроцессоров, таких как Sass или LESS; оптимизация CSS, JavaScript и изображений.

Что за шум вокруг Node.js? Почему так много людей говорит о нём? Следуйте за мной в этом руководстве, которое поможет понять процесс создания Node-проекта с нуля.

Посмотрите, что вы можете автоматически делать с помощью Gulp: минимизировать CSS и JavaScript; сжимать и оптимизировать изображения; компилировать файлы Sass, CoffeeScript, Jade; автоматически перезагружать браузер, вместо обновления вручную через F5.

JSON (JavaScript Object Notation, Нотация объектов JavaScript) — это человекочитаемый текстовый формат, который облегчает обмен данными между различными языками программирования.

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

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

Фронтенд-разработчики, которые хорошо знакомы с JavaScript, могут легко расширить свои знания чтобы познакомиться с бэкенд-программированием на стороне сервера.

Jekyll является наиболее популярным генератором статичного сайта. Он берёт исходные файлы и создаёт сайт из статичных страниц, готовых обслуживать пользователей напрямую. Это отличается от того, как работают традиционные CMS, вроде WordPress.

9 веб-технологий, которые должен знать каждый веб-разработчик в 2021 году

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

Разработка приложения или веб-сайта обычно сводится к знанию 3 основных языков: JavaScript, CSS и HTML. И хотя это звучит довольно сложно, когда вы знаете, что делаете, понимание веб-технологий и принципов их работы становится значительно проще.

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

Мы представляем вам введение в веб-технологии и список новейших веб-технологий, надеясь, что это хоть немного облегчит вам жизнь. Теперь давайте посмотрим.

Что такое веб-технологии?

Вы, наверное, уже слышали термин «технологии веб-разработки», но задумывались ли вы когда-нибудь о том, что он на самом деле означает?

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

1. Браузеры

Браузеры запрашивают информацию, а затем показывают ее так, как мы можем ее понять. Думайте о них как о интерпретаторах сети. Вот самые популярные:

Google Chrome — в настоящее время самый популярный браузер, предлагаемый Google

Safari — веб-браузер Apple

Firefox — браузер с открытым исходным кодом, поддерживаемый Mozilla Foundation

Internet Explorer — браузер Microsoft

2.HTML и CSS

HTML является одним из первых, которые вы должны изучить. Благодаря HTML веб-браузеры знают, что показывать после получения запроса. Если вы хотите лучше понять, как работает HTML, вам также необходимо знать, что такое CSS.

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

Если вы совсем новичок, этот курс по основам HTML и CSS от Джеймса Уильямсона поможет вам быстро начать работу с этими технологиями.

3. Платформы веб-разработки

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

Угловой

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

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

Если вы хотите начать использовать Angular или просто быстро оценить, будет ли этот фреймворк подходящим решением для ваших проектов, вы можете ознакомиться с этим трехчасовым обучением, опубликованным в июне 2019 года Джастином Шварценбергером, экспертом Google Developer. Этот курс охватывает все, что необходимо для начала использования Angular, от базовой архитектуры, работы с DOM, привязки данных, маршрутизации и компонентов до более сложных тем, таких как директивы и каналы.

Руби на рельсах

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

Популярные веб-сайты, написанные на Ruby, включают Basecamp, Ask.fm, GitHub, 500px и многие другие.

Вот все, что вам нужно знать о Ruby on Rails.

Если вы заинтересованы в более глубоком обучении инфраструктуре Ruby on Rails, этот 10-часовой курс Кевина Скоглунда, старшего разработчика Ruby, может быть подходящим ресурсом для начала. Он охватывает полный цикл обучения, от самых основ до более продвинутых тем, таких как макеты, партиалы и помощники представлений, параллельно давая довольно много практических задач.

YII

Yii — это среда разработки веб-приложений с открытым исходным кодом, построенная на PHP5. Он оптимизирован для производительности и поставляется с рядом отличных инструментов для отладки и тестирования приложений. Еще один плюс в том, что он довольно прост и удобен в использовании.

Метеор JS

Meteor JS написан на Node.js и позволяет создавать веб-приложения в реальном времени для разных платформ. Фреймворк для создания простых веб-сайтов для личного использования действительно выделяется благодаря Meteor JS.

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

Этот онлайн-видеокурс дает интересный практический пример объединения MeteorJS и React для создания веб-приложения.

Express.js

Разработанная в Node. js, Express.js — это сеть разработки веб-приложений, которая отлично подходит для тех, кому нужно разрабатывать приложения и API как можно быстрее.Многие замечательные функции предоставляются с помощью плагинов.

Этот курс дает хорошее представление о расширенном использовании Express.js в сочетании с MongoDB и Mongoose и показывает различные способы развертывания приложения Express и его запуска в рабочей среде.

Зенд

Zend — это платформа с открытым исходным кодом, основанная на PHP, ориентированная на создание более безопасных и надежных веб-приложений и сервисов. Это один из первых фреймворков MVC корпоративного уровня, который появился до современных суперхитов, таких как Laravel или Symfony, и многие популярные движки PHP, такие как Magento, были созданы в Zend.

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

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

Джанго

Django — один из самых популярных фреймворков, написанных на Python и использующий архитектуру MVC. Это значительно упрощает процесс разработки приложений благодаря своей простоте.

Django значительно упрощает использование Python и предоставляет несколько инструментов, облегчающих жизнь разработчика веб-приложений. ORM, модели, администратор Django, шаблоны и т. д. Этот 1,5-часовой видеокурс может помочь любому разработчику, даже новичку, начать разработку приложений Python/Django за пару дней.

Ознакомьтесь с более популярными платформами Python.

Ларавель

Laravel — это среда разработки PHP, идеально подходящая для небольших веб-сайтов. Он поставляется с рядом полезных функций, включая поддержку MVC, объектно-ориентированные библиотеки, Artisan, метод авторизации, миграцию базы данных и т. д.В настоящее время это одна из наиболее поддерживаемых и разрабатываемых сообществом платформ, и, учитывая, что у PHP одно из самых больших сообществ, Laravel — отличный инструмент, поддерживающий как небольшие веб-сайты, так и крупномасштабные веб-приложения B2B, управляющие миллионами транзакций. ежедневно.

Чтобы начать работу с Laravel менее чем за 3 часа, посмотрите этот видеокурс Бернандо Пинеды, старшего DevOps и инженера с более чем 15-летним опытом разработки программного обеспечения.

Это один из наших любимых фреймворков PHP.

4. Языки программирования

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

Javascript — используется всеми веб-браузерами, Meteor и многими другими фреймворками

CoffeeScript — «диалект» JavaScript. Он считается более простым, но преобразуется обратно в JavaScript

Python — используется фреймворком Django, а также в большинстве математических вычислений

Ruby — используется фреймворком Ruby on Rails

PHP — используется WordPress для создания тех WYSIWYG-редакторов, которые сейчас все используют.Он также используется Facebook, Wikipedia и другими крупными сайтами

Go — новый язык, созданный для скорости

Swift — новейший язык программирования Apple

Java — используется Android и многими настольными приложениями.

Итак, давайте поговорим о самых популярных из них немного подробнее.

JavaScript

Согласно ежегодному опросу StackOverflow, JavaScript является самым популярным языком программирования: 62,5% респондентов утверждают, что используют его.

Это одна из основных веб-технологий, и если вы хотите узнать о ней больше, вы можете начать с этого необходимого обучения, которое охватывает все основы, работу с функциями и объектами, взаимодействие с DOM и т. д. Этот курс недавно — от Апрель 2019 г. — Javascript быстро развивается, поэтому он позволяет вам использовать новейшие языковые «плюшки» по мере изучения.

Рубин

Разработчики любят Ruby — и не зря. Разработанный, чтобы быть удобным и очень простым в использовании, неудивительно, что этот язык программирования часто называют «лучшим другом программиста».

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

Если вы новичок в мире веб-разработки, Ruby будет отличным выбором в качестве первого языка программирования для изучения. Хорошо написанный код Ruby может быть почти таким же читаемым, как и предложение на простом английском языке.

Но настоящая причина, по которой большинство людей используют Ruby, — это популярный фреймворк — Ruby on Rails, о котором мы упоминали ранее в тексте. Высокая производительность, достигнутая с помощью Rails, делает его обычным выбором для стартапов, стремящихся к быстрому старту.

Эликсир Эликсир

появился еще в 2011 году и практически сразу завоевал популярность. Он был вдохновлен Erlang, языком, разработанным еще в 80-х годах компанией Ericsson. Сам автор Elixir Хосе Валим сказал, что ему нравится Erlang, но он также заметил некоторые вещи, которые можно немного улучшить.

Скала

Scala означает масштабируемый язык и является одной из многих попыток «переписать Java», и он скомпилирован для работы на виртуальной машине Java (JVM).Можно с уверенностью сказать, что этот язык программирования оказался довольно успешным, учитывая, что такие компании, как LinkedIn, Twitter и The Guardian, используют его в своих кодовых базах. Scala известен как сложный язык, но его стоит изучать.

Это важное трехчасовое обучение может стать хорошим началом вашего пути к Scala.

5. Протоколы

Инструкции по обмену информацией между компьютерами и устройствами широко известны как протоколы.

HTTP

Благодаря этому протоколу каждый сайт может попасть в браузер. Протокол запрашивает веб-сайт с сервера Google, а затем получает ответ с HTML, CSS и JavaScript веб-сайта.

ДДП

Использует WebSockets для создания согласованного соединения между клиентом и сервером. В результате вы получаете обновления веб-сайта в режиме реального времени без необходимости обновлять браузер.

ОТДЫХ

Используемый в основном для API, этот протокол имеет стандартные методы, такие как GET, POST и PUT, которые позволяют обмениваться информацией между приложениями.

6. API

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

Конечные точки предоставляются разработчиками, в то время как API может управлять доступом с помощью ключа API. Примерами хорошо сделанных API являются API, созданные Facebook, Twitter и Google для своих веб-сервисов.

7. Форматы данных

Данные хранятся в структуре, называемой форматом данных.

JSON — нотация объектов JavaScript — это синтаксис для хранения и обмена данными (точно так же, как XML). В настоящее время он становится самым популярным форматом данных.

XML — в основном используется системами Microsoft, раньше он был самым популярным форматом данных

CSV – данные отформатированы запятыми; например данные Excel

8. Клиент (или на стороне клиента)

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

9. Сервер (или на стороне сервера)

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

Завершение размышлений о новейших веб-технологиях

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

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

Если вам понравилась эта статья о веб-технологиях, вам стоит прочитать и эту о разработке веб-приложений.

Мы также писали о нескольких связанных темах, таких как тенденции веб-разработки и тестирование веб-приложений.

Веб-технологии для разработчиков | MDN

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

Руководство веб-разработчика: Руководство веб-разработчика содержит полезные практические материалы, которые помогут вам использовать веб-технологии для того, чтобы делать то, что вы хотите или должны делать.
Учебники для веб-разработчиков: Список руководств, которые помогут вам шаг за шагом изучить API, технологии или обширные темы.
Прогрессивные веб-приложения (PWA): Прогрессивные веб-приложения — это веб-приложения, которые используют новые API-интерфейсы и функции веб-браузера, а также традиционную стратегию прогрессивного улучшения, чтобы привнести в кроссплатформенные веб-приложения пользовательский интерфейс, аналогичный родному.

Веб-API: Справочный материал для каждого из отдельных API-интерфейсов, которые включают в себя мощные возможности создания сценариев в Интернете, включая модель DOM и все связанные API-интерфейсы и интерфейсы, которые можно использовать для создания веб-контента и приложений.
HTML: Язык гипертекстовой разметки — это язык, используемый для описания и определения содержимого веб-страницы.
УСБ: Каскадные таблицы стилей
используются для описания внешнего вида веб-контента.
JavaScript: JavaScript — это язык программирования, используемый для добавления интерактивности на веб-сайт.
События: События — это действия или события, происходящие в системе, которую вы программируете, о которых система сообщает вам, чтобы ваш код мог реагировать на них.
СВГ: Масштабируемая векторная графика позволяет описывать изображения как наборы векторов и форм, чтобы обеспечить их плавное масштабирование независимо от размера, в котором они нарисованы.
MathML: Язык математической разметки позволяет отображать сложные математические уравнения и синтаксис.
Веб-компоненты: Веб-компоненты — это настраиваемые элементы, которые вы можете определить и повторно использовать в своих приложениях.

Что такое веб-технология? — Определение и тенденции — Видео и стенограмма урока

Примеры

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

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

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

Тенденции

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

Краткий обзор урока

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

Руководство по различным веб-технологиям и их взаимосвязи | Эрик Энгхейм

Разработчик настольных компьютеров пытается разобраться в огромной веб-экосистеме

Фото Шахадата Рахмана из Unsplash

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

Истории по теме:

Веб-браузер, такой как Explorer, Firefox или Chrome, отобразит веб-страницу на основе описания, найденного в файле, написанном в формате HTML . HTML, такой как Markdown и Latex, описывает только структуру и семантику документа. Он не описывает внешний вид. Файлы CSS описывают, как должны выглядеть различные элементы в HTML-документе.

HTTP , напротив, представляет собой коммуникационный протокол, построенный поверх TCP/IP. Это то, что веб-браузер использует для фактического хранения файлов HTML и CSS. HTTP определяет такие вещи, как URL-адреса. URL-адреса определяют своего рода путь к ресурсу в Интернете. С этими URL-адресами HTTP связывает набор операций, таких как GET, POST, UPDATE и DELETE. Когда вы пишете URL-адрес в поле адреса вашего веб-браузера, вы фактически заставляете браузер выполнять запрос GET. Когда вы заполняете форму на веб-странице и нажимаете кнопку «Отправить», это обычно вызывает выполнение POST.Это собирает ваш ввод и отправляет на сервер.

REST означает раскрытие службы внешнему миру с точки зрения словаря протокола HTTP . Это звучит немного абстрактно, поэтому позвольте мне уточнить: если у вас есть программа, работающая на сервере, с набором функций, которые вы хотите, чтобы другие люди могли использовать. Есть много способов сделать это доступным извне. Когда-то они использовали CORBA, который был способом создать впечатление, что у вас есть объекты в сети, для которых вы можете вызывать методы.У вас будут ссылки на объекты, и вы можете отправить эти ссылки в качестве аргументов. Это был бинарный протокол. Позже появились такие вещи, как XML-RPC и Soap, которые пытались представить вызовы методов и ссылки на объекты в виде XML-текста. По сути, это была расширенная версия CORBA.

REST был отказом от этой сложности, и люди говорили: вместо доступа к функциональности с точки зрения объектов с вызовами методов, почему бы нам просто не использовать принципы, уже найденные в протоколе HTTP? Попробуйте представить функциональность с точки зрения URL-адресов, для которых вы выполняете GET, POST, UPDATE и DELETE.

JavaScript — это простой скриптовый язык, который был создан для того, чтобы предлагать некоторую интерактивность HTML-страницам. Из-за повсеместного распространения JavaScript стало популярным представлять данные в синтаксисе JavaScript, поэтому родился JSON . JSON — это просто синтаксис JavaScript для строк, массивов, чисел и словарей. Синтаксис циклов, если операторы и функции были исключены.

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

Сокеты существуют на уровне TCP/IP. Но вы также можете создать, например. Сокеты UDP, а не сокеты TCP.Напротив, WebSockets на самом деле вовсе не сокеты, а просто протокол, построенный поверх HTTP. Разница в том, что типичный HTTP настроен так, что веб-браузер создает обычное соединение сокета Unix для получения веб-страницы или другого ресурса. Как только он получен, он закрывает сокетное соединение. Таким образом, обычный HTTP плохо подходит для непрерывного обмена данными. Вы можете рассматривать WebSockets как постоянный канал связи, построенный на обычных сокетах, который сервер и клиент могут использовать для обмена данными между собой.

Таким образом, WebSockets можно использовать как альтернативу или дополнение к REST. Вы можете использовать REST для доступа к функциям на сервере, а затем настроить соединение WebSocket для получения непрерывных обновлений или событий с сервера.

Еще больше усложняет ситуацию то, что WebSockets — не единственный способ для веб-страницы получать данные за пределами обычного HTTP-запроса. Существует также более старая технология под названием AJAX. Насколько я понимаю, это в основном для выполнения обычных HTTP-запросов, но без загрузки новой страницы.Таким образом, вы можете запросить дополнительную информацию о странице после ее загрузки.

Однако это основано на запросе/ответе. Соединения закрываются так же, как обычный HTTP. Вы не можете использовать его, сохраняя открытое соединение, такое как WebSockets, где, например. сервер может отправлять данные, когда происходит какое-то событие без запроса браузера.

Как настольный разработчик я привык создавать новые классы и собирать объекты для создания все более крупных повторно используемых частей, которые я могу комбинировать в еще более крупные части.

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

В Интернете создание многоразовых деталей работает совсем по-другому. В основе Интернета лежит поиск способов эффективного создания текстовых документов (HTML).

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

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

Вот пример шаблонизатора Mustache. Приведенный ниже код не является полностью допустимым HTML, так как он состоит из частей, окруженных {{ }} .

 {{header}}
 
 {{#bug}} 
 {{/bug}}  {{#items}} 
 {{#first}} 
 
{ {name}}
 
 {{/first}} 
 {{#link}} 
 {{name}}
 
 {{/link}} 
 {{/items}} 
  {{#empty}} 
 
Список пуст. 
 
 {{/empty}}

Шаблонизатор принимает на вход этот шаблон, а также данные в виде словаря JSON:

 { 
 "header": "Цвета", 
 "items": [ 
 {"name": "red", "first ": true, "url": "#Red"}, 
 {"name": "green", "link": true, "url": "#Green"}, 
 {"name": "blue", «ссылка»: true, «url»: «#Blue»} 
 ], 
 «пусто»: false 
 }

При запуске выдается действительный HTML-код, который вы можете отправить в веб-браузер:

 Цвета
 
 красный
 
 зеленый
 
  синий

Создание шаблонов может происходить как на сервере, и отправляются клиенту веб-браузера, а также на самом клиенте с использованием JavaScript.Таким образом, существуют как JavaScript, так и серверные шаблонизаторы.

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

HTML является подмножеством XML, но в нем определенные теги имеют особое значение, относящееся к веб-страницам. Когда вы анализируете документ XML, вы обычно получаете дерево DOM (дерево объектной модели документа). Это древовидная структура с узлами, описывающими HTML-страницу.Это предоставляется веб-браузеру вместе с CSS для визуализации веб-страницы.

Однако вы не ограничены созданием HTML-страницы для создания такого дерева. Вы также можете создать его с нуля, чтобы манипулировать созданным HTML-страницей с помощью JavaScript. С помощью встроенного JavaScript API вы можете изменять DOM, добавляя, удаляя или перемещая узлы, чтобы изменить внешний вид вашей веб-страницы.

jQuery изначально возникла как сторонняя библиотека JavaScript. Это дало возможность находить и манипулировать узлами в дереве DOM более простым способом, чем позволял встроенный API.Это также упростило другие вещи, такие как вызовы AJAX. Однако в современных веб-браузерах он менее необходим, поэтому о нем меньше говорят. Причина в том, что встроенный API JavaScript для управления DOM использует множество функций jQuery.

Вот пример поиска тега с идентификатором myID .

 // jQuery 
 $("#myID")  // Современный Javascript 
 document.querySelector("#myID")

Вот пример создания анимации на вашей веб-странице.Это включало перемещение элемента (тега) с идентификатором myID на 200 пикселей влево.

 // jQuery 
 $("#myID").animate({left: '200px'})  // Современный простой CSS 
 #myID { анимация: myMove 1s;} 
 @keyframes myMove { 
 from {left: 0px;} 
 to {left: 200px;} 
 }

Обширные примеры того, почему вам больше не нужен jQuery в современном JavaScript здесь.

jQuery иногда противопоставляют библиотекам/фреймворкам JavaScript: React , Angular и Vue.JS. Однако, хотя функциональные возможности частично совпадают, последний существует на более высоком уровне абстракции.

Их можно рассматривать как то, что разработчик рабочего стола назвал бы библиотекой графического интерфейса, такой как Qt, Swing или Cocoa. Однако, поскольку это Интернет, все работает немного по-другому, как я объяснял в разделе о механизмах шаблонов. Они предназначены для того, что люди называют одностраничными веб-приложениями. Менее интерактивные веб-страницы могут не нуждаться в этих платформах, поскольку на сервере выполняется больше функций.

Эти библиотеки/фреймворки связаны со своими собственными механизмами шаблонов для определения многократно используемых частей графического интерфейса. Однако механизмы шаблонов не добавляют поведение повторно используемым частям. Нам нужен JavaScript и CSS, чтобы получить поведение. Эти библиотеки/фреймворки позволяют нам объединять логические блоки, состоящие из HTML, CSS и JavaScript, описывающие один компонент пользовательского интерфейса.

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

React создан Facebook, а Angular — Google. Это означает, что оба действительно большие и популярные. Vue.js меньше по размеру и менее известен (у него нет крупной корпоративной поддержки), однако, похоже, он был разработан на основе того, что было извлечено из React и Angular, с учетом хороших идей обоих.

Я начал заниматься веб-разработкой, пытаясь изучить Angular, но, похоже, это преждевременно.Это много, чтобы пережевывать. Angular, в отличие от React и Vue, считается фреймворком. Это целая кухонная раковина. Он предоставляет все необходимое для создания интерактивного веб-приложения. С React и Vue вам нужно добавить свои собственные библиотеки для вещей, не связанных с графическим интерфейсом.

Оба являются просто библиотеками пользовательского интерфейса, что ускоряет их изучение. Концептуально Vue.js больше похож на подход, используемый Angular. React изобрел своего рода язык шаблонов на стероидах под названием JSX, который смешивает JavaScript и HTML в один язык.

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

Моя нынешняя идея состоит в том, чтобы использовать Vue.js, а не Angular, так как это кажется меньшей кривой обучения.

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

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

Пример XPath: Выбирает первый элемент book, который является дочерним элементом элемента bookstore.

 /bookstore/book[1]

Вот эквивалент с использованием селекторов CSS:

 bookstore > p:nth-child(1)

Многие люди устали писать на JavaScript на веб-странице (внешний интерфейс). ) и Java, Python или Ruby на стороне сервера (внутренняя часть). Они хотели использовать один и тот же язык в обоих местах, и поэтому был изобретен Node.js . По сути, это JavaScript, работающий за пределами браузера.

Это дало новые возможности для создания настольных приложений с использованием JavaScript, и так родился Electron .Что они сделали, так это удалили ядро из браузера Chrome, используемого для рендеринга HTML, и соединили его с Node.js.

Для меня, как для настольного разработчика, лучший способ сравнить это с известной мне технологией — это сравнить это с игровым движком, таким как Unity3D. В игровом движке вы обычно запускаете приложение C++, которое выполняет тяжелую работу по рендерингу 3D-графики, проверке столкновений и т. д. Однако указание макета игрового уровня, поведения персонажа и т. д. лучше выполнять на гибком языке сценариев.Следовательно, движок может запускать сценарии для управления своим поведением. Я думаю об Электроне так же. Это своего рода высокопроизводительный движок, который может читать сценарии, написанные на JavaScript, совместимом с Node.js. Я имею в виду, что у него есть доступ к аналогичным библиотекам и тот же юридический синтаксис. Поскольку Node.js может получить доступ к большему количеству функций на платформе, он предлагает больше гибкости в создании приложений, чем чистый Интернет. JavaScript в браузере, по сути, изолирован и не может легко получить доступ к файлам на собственной платформе.

Если вы, как и я, ненавидите JavaScript, то серьезным препятствием на пути к Интернету является использование JavaScript. К счастью, язык развивается и становится лучше, но долгое время он был довольно неуклюжим языком.

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

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

Основным недостатком JavaScript является то, что он очень слабо типизирован. Это было нормально для того, для чего был разработан JavaScript. Он был разработан, чтобы на веб-странице было всего 20–50 строк кода. Однако когда приложения начинают содержать десятки тысяч строк кода, эта слабая типизация становится проблемой.

Таким образом, одним из первых транспиляторов был TypeScript , который представляет собой просто JavaScript с добавленной информацией о типе. Затем транспилятор может проверить, что вы не не соответствуете типам.

Клон Python?

Другие транспиляторы пытались сделать более приятный синтаксис, например CoffeScript , который кажется немного вдохновленным Python. Он более активно использует пробелы для обозначения блоков кода.

Клоны Haskell?

Другой язык, вдохновивший создателей Transpilers, — Haskell.Haskell — очень строго и статически типизированный функциональный язык. Это означает, что во время компиляции выявляется больше ошибок за счет более сложной системы типов. И Elm, и PureScript были вдохновлены Haskell.

Elm кажется прагматичным подходом, в то время как PureScript кажется более целенаправленной попыткой создать клон Haskell. Я подозреваю, что те, кто готов инвестировать в изучение любого из этих языков, увидят большие преимущества при создании более крупных веб-приложений. Строгая типизация поможет избежать многих ошибок.

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

Клон LISP/Clojure?

Другим популярным, но динамически типизированным функциональным языком является LISP/Scheme, который вдохновил создание Clojure, работающего на платформе Java. Clojure вдохновил на создание ClojureScript, который компилируется в JavaScript. Цепочка инструментов, используемая с ClojureScript и библиотеками, по существу такая же, как и в Clojure.

ClojureScript кажется мне несколько затрудненным из-за его зависимости от большой экосистемы Java.Другие могут увидеть в этом преимущество. Положительный потенциал, как я его вижу, заключается в том, что LISP очень хорошо подходит для разработки языков, специфичных для предметной области. Таким образом, создание абстракций для выражения CSS и HTML должно быть более элегантным на этом языке, чем на альтернативах.

Клон Java?

Однако для многих разработчиков Haskell и Clojure являются достаточно чуждыми языками. Есть ли что-то более мейнстримное? Dart, разработанный Google, действительно выглядит как такой язык. Это выглядит как довольно стандартный статически типизированный ООП-язык, с которым знакомы пользователи C#, C++ и Java.

Как большой поклонник Go от Google, я надеялся на что-то такое же простое и легкое в использовании. Дарт, похоже, совсем не такой. На самом деле он довольно сложен и заставляет меня больше думать о C++, чем о Go. Если вы хотите быстро заняться веб-разработкой, избегая при этом JavaScript, Dart не подходит.

ИМХО, он выглядит очень хорошо спроектированным, однако быстро этому не научишься.И если вам нужна лучшая Java/C#/C++, то, честно говоря, я думаю, что Swift — гораздо лучший выбор. Конечно, Swift не работает в браузере.

Множественные цели: Nim и Haxe

Менее известные альтернативы — Nim и Haxe. Это не просто транспиляторы JavaScript, поскольку они разработаны как многоцелевые языки, которые также могут компилироваться в собственный код.

Nim можно использовать, например, как системный язык. Мне Nim кажется чем-то вроде смеси Swift, Kotlin, Dart и Python. По сути, это современный статически типизированный язык с красивым выразительным синтаксисом. У Nim много поклонников, и он кажется очень хорошо разработанным языком.

Проблема в том, что у Нима нет такой крупной компании, как Facebook, Google, Apple или даже Mozilla. Что лично мне кажется интересным, так это то, что он должен иметь хорошо спроектированные средства метапрограммирования. Как любитель LISP и Julia, мне очень нравится иметь это в языке.

Haxe, честно говоря плохо знаю.Его часто сравнивают с Nim, он имеет большую корпоративную поддержку и, возможно, больше ориентирован на Интернет. Однако, кажется, никто не видит такого энтузиазма по этому поводу, как Ним.

Высокопроизводительные системные языки: WebAssembly

В конечном счете, не нужно компилировать в javascript для запуска другого языка в браузере. Это то, что WebAssembly пытается решить. Он определяет своего рода язык ассемблера для веб-браузера. Несколько веб-браузеров уже поддерживают его.

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

 (модуль 
 (импорт "math" "exp" (функция $exp (параметр f64) (результат f64))) 
 (функция (экспорт "doubleExp") (парам $0 f64) (результат f64) 
 (f64.mul 
 (вызов $exp 
 (get_local $0) 
 ) 
 (f64.const 2) 
 ) 
 ) 
 )

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

Веб-сборка позволяет нам компилировать код C++ в сборку, которую можно запустить в веб-браузере. Это полезно, например, для игры.

На данный момент утилита WebAssembly ограничена, так как не поддерживает сборку мусора и не может манипулировать деревом DOM. Однако предполагается, что эти функции будут добавлены позже.Это означает, что для обычного веб-программирования он еще не является полной заменой JavaScript.

Это означает, что мы не можем компилировать языки со сборщиком мусора, такие как Java, Go, Python и Ruby, в Web Assembly.

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

Общие клиентские веб-технологии | Документы Майкрософт

Статья
16.12.2021
12 минут на чтение

Полезна ли эта страница?

Пожалуйста, оцените свой опыт

да Нет

Любая дополнительная обратная связь?

Отзыв будет отправлен в Microsoft: при нажатии кнопки отправки ваш отзыв будет использован для улучшения продуктов и услуг Microsoft. Политика конфиденциальности.

Представлять на рассмотрение

В этой статье

«Веб-сайты должны хорошо выглядеть как внутри, так и снаружи». — Пол Куксон

Приложения ASP.NET Core — это веб-приложения, которые обычно основаны на клиентских веб-технологиях, таких как HTML, CSS и JavaScript. Отделяя содержимое страницы (HTML) от ее макета и стиля (CSS) и ее поведения (через JavaScript), сложные веб-приложения могут использовать принцип разделения интересов.Будущие изменения в структуре, дизайне или поведении приложения могут быть внесены легче, если эти проблемы не переплетены.

В то время как HTML и CSS относительно стабильны, JavaScript с помощью фреймворков приложений и утилит, с которыми разработчики работают для создания веб-приложений, развивается с головокружительной скоростью. В этой главе рассматриваются несколько способов использования JavaScript веб-разработчиками и дается общий обзор клиентских библиотек Angular и React.

Примечание

Blazor предоставляет альтернативу платформам JavaScript для создания многофункциональных интерактивных клиентских пользовательских интерфейсов.

HTML

HTML — это стандартный язык разметки, используемый для создания веб-страниц и веб-приложений. Его элементы образуют строительные блоки страниц, представляя форматированный текст, изображения, вводимые данные и другие структуры. Когда браузер делает запрос к URL-адресу, будь то страница или приложение, первое, что возвращается, — это HTML-документ.Этот HTML-документ может ссылаться или включать дополнительную информацию о его внешнем виде и макете в форме CSS или о поведении в форме JavaScript.

УСБ

CSS (каскадные таблицы стилей) используются для управления внешним видом и расположением элементов HTML. Стили CSS можно применять непосредственно к элементу HTML, определять отдельно на той же странице или определять в отдельном файле и ссылаться на страницу. Стили каскадируются в зависимости от того, как они используются для выбора данного элемента HTML. Например, стиль может применяться ко всему документу, но будет переопределен стилем, применяемым к определенному элементу.Точно так же стиль, специфичный для элемента, будет переопределен стилем, примененным к классу CSS, который был применен к элементу, который, в свою очередь, будет переопределен стилем, нацеленным на конкретный экземпляр этого элемента (через его идентификатор). Рисунок 6-1

Рис. 6-1. Правила специфичности CSS, по порядку.

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

Препроцессоры CSS

В таблицах стилей

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

Самыми популярными препроцессорами CSS являются Sass и LESS. Оба расширяют CSS и обратно совместимы с ним, что означает, что простой файл CSS является допустимым файлом Sass или LESS. Sass основан на Ruby, а LESS — на JavaScript, и оба они обычно запускаются как часть локального процесса разработки. Оба имеют доступные инструменты командной строки, а также встроенную поддержку в Visual Studio для их запуска с использованием задач Gulp или Grunt.

JavaScript

JavaScript — это динамический интерпретируемый язык программирования, стандартизированный в спецификации языка ECMAScript. Это язык программирования для Интернета. Как и CSS, JavaScript можно определить как атрибуты внутри элементов HTML, как блоки скрипта на странице или в отдельных файлах. Как и в случае с CSS, рекомендуется организовывать JavaScript в отдельные файлы, максимально отделяя его от HTML-кода, который можно найти на отдельных веб-страницах или в представлениях приложений.

При работе с JavaScript в вашем веб-приложении есть несколько задач, которые вам обычно необходимо выполнить:

Выбор элемента HTML и получение и/или обновление его значения.
Запрос данных к веб-API.
Отправка команды в веб-API (и ответ на обратный вызов с его результатом).
Выполнение проверки.

Все эти задачи можно выполнять только с помощью JavaScript, но существует множество библиотек, облегчающих эти задачи.Одной из первых и наиболее успешных таких библиотек является jQuery, которая по-прежнему остается популярным выбором для упрощения этих задач на веб-страницах. Для одностраничных приложений (SPA) jQuery не предоставляет многих желаемых функций, которые предлагают Angular и React.

Устаревшие веб-приложения с jQuery

Несмотря на то, что библиотека jQuery устарела по стандартам фреймворка JavaScript, она продолжает оставаться широко используемой библиотекой для работы с HTML/CSS и создания приложений, которые выполняют вызовы AJAX к веб-API.Однако jQuery работает на уровне объектной модели документа браузера (DOM) и по умолчанию предлагает только императивную, а не декларативную модель.

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

jQuery и SPA Framework

Коэффициент	jQuery	Угловой
Рефераты ДОМ	Да	Да
Поддержка AJAX	Да	Да
Декларативное связывание данных	№	Да
Маршрутизация в стиле MVC	№	Да
Шаблоны	№	Да
Маршрутизация Deep Link	№	Да

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

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

Угловые SPA

Angular остается одним из самых популярных в мире фреймворков JavaScript. Начиная с Angular 2, команда перестроила фреймворк с нуля (используя TypeScript) и переименовала оригинальное имя AngularJS в angular. Спустя несколько лет переработанный Angular продолжает оставаться надежной основой для создания одностраничных приложений.

Приложения Angular создаются из компонентов. Компоненты объединяют шаблоны HTML со специальными объектами и управляют частью страницы.Здесь показан простой компонент из документации Angular:

  import { Component } from '@angular/core';

@Компонент({
    селектор: 'мое-приложение',
    шаблон: ` Привет, {{name}} `
})

экспортный класс AppComponent { name = 'Angular'; }

Компоненты определяются с помощью функции декоратора @Component, которая принимает метаданные о компоненте. Свойство selector идентифицирует идентификатор элемента на странице, где будет отображаться этот компонент. Свойство шаблона — это простой HTML-шаблон, который включает заполнитель, соответствующий свойству имени компонента, определенному в последней строке.

Работая с компонентами и шаблонами, а не с элементами DOM, приложения Angular могут работать на более высоком уровне абстракции и с меньшим объемом кода, чем приложения, написанные с использованием только JavaScript (также называемого «ванильным JS») или jQuery. Angular также накладывает некоторый порядок на то, как вы организуете файлы скриптов на стороне клиента. По соглашению приложения Angular используют общую структуру папок с файлами сценариев модулей и компонентов, расположенными в папке приложения. Сценарии Angular, связанные со сборкой, развертыванием и тестированием приложения, обычно находятся в папке более высокого уровня.

Вы можете разрабатывать приложения Angular с помощью интерфейса командной строки. Начало работы с Angular-разработкой локально (при условии, что у вас уже установлены git и npm) состоит из простого клонирования репозитория с GitHub и запуска npm install и npm start . Помимо этого, Angular поставляет свой собственный интерфейс командной строки, который может создавать проекты, добавлять файлы и помогать с задачами тестирования, объединения и развертывания. Эта дружественность к CLI делает Angular особенно совместимым с ASP.NET Core, который также имеет отличную поддержку CLI.

Microsoft разработала эталонное приложение eShopOnContainers, которое включает реализацию Angular SPA. Это приложение включает в себя модули Angular для управления корзиной покупок интернет-магазина, загрузки и отображения товаров из его каталога и обработки создания заказов. Вы можете просмотреть и загрузить пример приложения с GitHub.

Реагировать

В отличие от Angular, который предлагает полную реализацию шаблона Model-View-Controller, React работает только с представлениями. Это не фреймворк, а просто библиотека, поэтому для создания SPA вам понадобятся дополнительные библиотеки.Существует ряд библиотек, предназначенных для использования с React для создания многофункциональных одностраничных приложений.

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

React также необычен в том, как он работает с HTML.Вместо того, чтобы иметь строгое разделение между кодом и разметкой (с ссылками на JavaScript, появившись в атрибутах HTML), реагируйте добавляют HTML непосредственно в его код JavaScript в качестве JSX. JSX является HTML-подобным синтаксисом, который может компилировать вниз до чистого JavaScript. Например:

  <ул>
{ авторы. карта(автор =>
    {автор.имя}
)}

Если вы уже знаете JavaScript, изучение React должно быть легким. Там не так много обучения или специального синтаксиса, как с Angular или другими популярными библиотеками.

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

Вью

Из руководства по началу работы: «Vue — это прогрессивная платформа для создания пользовательских интерфейсов. В отличие от других монолитных платформ, Vue с самого начала разработана так, чтобы ее можно было внедрять поэтапно. Основная библиотека ориентирована только на уровень представления, и ее легко подобрать и интегрировать с другими библиотеками или существующими проектами.С другой стороны, Vue прекрасно подходит для работы сложных одностраничных приложений при использовании в сочетании с современными инструментами и вспомогательными библиотеками.»

Для начала работы с Vue просто необходимо включить его скрипт в файл HTML:

После добавления фреймворка вы можете декларативно отображать данные в DOM, используя простой синтаксис шаблонов Vue:

  <дел>
  {{ сообщение }}

, а затем добавить следующий скрипт:

  var app = новый Vue({
  эль: '#приложение',
  данные: {
    сообщение: «Привет, Вью!»
  }
})

Этого достаточно, чтобы отобразить «Hello Vue!» на странице. Обратите внимание, однако, что Vue не просто отображает сообщение в div один раз. Он поддерживает привязку данных и динамические обновления, так что если значение сообщения изменяется, значение в

немедленно обновляется, чтобы отразить это.

Конечно, это лишь малая часть того, на что способен Vue. За последние несколько лет он приобрел большую популярность и имеет большое сообщество. Существует огромный и растущий список вспомогательных компонентов и библиотек, которые также работают с Vue для его расширения.Если вы хотите добавить поведение на стороне клиента в свое веб-приложение или планируете создать полноценный SPA, стоит изучить Vue.

Блазор WebAssembly

В отличие от других платформ JavaScript, Blazor WebAssembly — это платформа одностраничных приложений (SPA) для создания интерактивных веб-приложений на стороне клиента с помощью .NET. Blazor WebAssembly использует открытые веб-стандарты без подключаемых модулей или перекомпиляции кода на другие языки. Blazor WebAssembly работает во всех современных веб-браузерах, включая мобильные браузеры.

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

Код

WebAssembly может получить доступ ко всем функциям браузера через JavaScript, что называется интероперабельностью JavaScript, часто сокращаемой до взаимодействия JavaScript или взаимодействия JS. Код .NET, выполняемый через WebAssembly в браузере, запускается в изолированной программной среде JavaScript браузера с защитой, которую песочница обеспечивает от вредоносных действий на клиентском компьютере.

Дополнительные сведения см. в разделе Введение в ASP.NET Core Blazor.

Выбор платформы SPA

При рассмотрении того, какой вариант лучше всего подойдет для поддержки вашего SPA, имейте в виду следующие соображения:

Знакома ли ваша команда с фреймворком и его зависимостями (в некоторых случаях включая TypeScript)?
Насколько упряма инфраструктура, и согласны ли вы с тем, как она работает по умолчанию?
Включает ли она (или сопутствующая библиотека) все функции, необходимые вашему приложению?
Хорошо ли это задокументировано?
Насколько активно его сообщество? Строятся ли с ним новые проекты?
Насколько активна основная команда? Решаются ли проблемы и регулярно ли выпускаются новые версии?

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

Ссылки – клиентские веб-технологии

Топ-10 лучших технологий веб-разработки для использования в 2021 году | ИШИР

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

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

Ваша платформа должна быть легко адаптируемой и отраслевой
Платформа должна быть популярной при сильной поддержке сообщества
Платформа должна быть востребована на существующем рынке труда
Вы не должны выбирать устаревшую платформу

Google создал Angular после провала AngularJS в 2016 году. Некоторые из общих функций Angular включают грязную проверку, двустороннюю привязку данных и т. д. Кроме того, вы должны знать, что Angular использует TypeScript в качестве основного языка программирования. Для предприятий, которые ищут надежные инновации, Angular может стать подходящей средой веб-разработки.

Характеристики

Angular — это простой в использовании клиентский фреймворк с очень сложной кривой обучения.
Это полностью защищенная клиентская веб-инфраструктура с лучшими функциями, такими как очистка DOM.
Angular помогает разработчикам с различными режимами разработки приложений, включая Интернет, Мобильный Интернет и Native Desktop, Native Mobile и т. д.
Angular широко распространен в отрасли, поскольку он был разработан Google.

Когда следует использовать Angular?

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

Когда не следует использовать Angular?

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

Интересно прочитать: 15 главных тенденций веб-дизайна и разработки в 2020 году, от которых невозможно скрыться

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

Характеристики

React.js реализует уровень представления для пользовательского интерфейса. Вы также можете использовать его для сквозной разработки приложений.
React.js разрабатывает приложения для всех типов пользовательских интерфейсов, включая Интернет, мобильные устройства, настольные компьютеры и Smart TV.
React предлагает первоклассный рендеринг на стороне сервера с исключительной поддержкой SEO.
В настоящее время функции React.js тестируются на 2,7 миллиардах пользователей Facebook, чтобы не отставать от отраслевых тенденций.
React.js — одна из самых инновационных платформ с некоторыми из самых крутых функций, таких как односторонняя привязка данных и декларативное программирование.

Когда следует использовать React.js?

Если ваши разработчики имеют опыт работы с JavaScript
Если вы планируете создать высокоинтерактивное приложение
Если вы все настроены на использование одной и той же платформы для разных платформ

Когда не следует использовать Reactjs?

Разработчикам не нравится JavaScript
Разработка должна быть завершена быстрее
Платформа, которую вы планируете создать, не обязательно должна быть очень интерактивной

Эван Ю разработал Vue.js еще в 2014 году. Vue.js представляет собой комбинацию функций AngularJS (как View Layer) и React.js (как Virtual DOM). В настоящее время это один из самых популярных фреймворков с очень сильной поддержкой сообщества.

Характеристики

Vue. js предлагает сквозную функциональность разработки приложений, которая очень похожа на Angular, а также поддержку внешнего потока данных и управления состоянием.
Vue.js предлагает документацию высшего качества с разработкой внешнего интерфейса на основе JavaScript.
Vue.js, возможно, является лучшей средой веб-разработки, доступной для прогрессивной разработки веб-приложений.
Vue.js предлагает двустороннюю привязку данных с функциями Virtual DOM и Event Sourcing, как и Angular.

Когда следует использовать Vue.js?

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

Когда не следует использовать Vue. js?

Если организация ищет одну и ту же платформу веб-разработки для разных платформ

4. Пружина

Следующее имя в нашем списке — Весна. Spring был создан еще в 2002 году. С тех пор Spring прошел несколько этапов разработки и является одним из лучших вариантов для фреймворка на основе Java. Когда дело доходит до превращения Java в подходящую платформу для облачных вычислений, вряд ли найдется другая инфраструктура лучше, чем Spring.

Характеристики

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

Когда следует использовать Spring?

Если вы работаете над проектом разработки корпоративного программного обеспечения, а предпочтительным языком является JVM
Когда вы собираетесь создать крупномасштабное приложение, интенсивно использующее ЦП

Когда не следует использовать Spring?

Если вы пытаетесь разработать фундаментальное и простое программное обеспечение

Если вы используете бессерверные вычисления, Spring не должен быть вашим первым выбором

5.Express.js

Express.js — это серверная веб-инфраструктура Model-View-Controller (MVC). TJ Holowaychuk создал Express. js в 2010 году как первую стабильную версию. На это сильно повлиял минималистичный фреймворк Sinatra, который предлагает минималистическую функциональность для облегченного программного обеспечения.

Характеристики

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

Когда следует использовать Express.js?

Если ваша команда веб-разработчиков владеет JavaScript и отлично справляется с серверной разработкой на основе Node.js
Если бессерверные вычисления — ваша сильная сторона

Когда не следует использовать Express. js?

Вы планируете создать масштабируемое приложение

6. Колба

Еще одна минималистичная технология веб-разработки в нашем списке — Flask. Flask, разработанный еще в 2010 году Армином Ронахером, представляет собой микро-веб-фреймворк на основе Python.Поскольку Python в настоящее время является самым эффективным языком программирования во всем мире, популярность Flask сильно растет.

Характеристики

Flask не является комплексной средой веб-разработки
Flask использует Jinja2 в качестве механизма шаблонов и Werkzeug для обработки HTTP
Flask обрабатывается на стороне сервера и представляет собой микровеб-фреймворк

Когда следует использовать Flask?

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

Когда не следует использовать Flask?

Крупные предприятия, планирующие разработку сложных приложений
Команда веб-разработчиков не освоила Python

Если вы слышали о Ruby on Rails, вы также можете знать о прорывных функциях этой среды веб-разработки. Дэвид Хайнемайер Ханссон — разработчик этого современного фреймворка, поддерживающего язык программирования Ruby.

Характеристики

Ruby on Rail — одна из тех редких сред веб-разработки, в которых соглашение важнее конфигурации. Он также поддерживает архитектуру MVC.
Ruby on Rail может быть вашим набором инструментов для работы с приложениями с такими функциями, как ORM, промежуточное ПО, безопасность, обучение и т. д.
Возможно, это самая первая среда веб-разработки, в которой большое внимание уделяется пользовательскому опыту разработчиков.

Когда следует использовать Ruby on Rails?

Если вам нужен высокоскоростной процесс разработки
Команда разработчиков владеет языком Ruby или хочет его изучить

Когда не следует использовать Ruby on Rails?

Если у команды разработчиков нет опыта работы с Ruby
Если вам необходимо разработать масштабируемую среду веб-разработки для крупного предприятия

Laravel — это среда разработки на основе PHP, созданная в 2011 году. Тейлор Отвелл разработал эту платформу, которая является серверной и поддерживает архитектуру MVC. На самом деле, Laravel в значительной степени верит в фреймворк Ruby on Rails и делает упор на опыт разработчиков при разработке приложений.

Характеристики

Laravel — это платформа с поддержкой MVC, обеспечивающая высокоскоростную веб-разработку
Эта комплексная среда разработки поставляется с различными функциями, такими как промежуточное ПО, ORM, управление сеансами и т. д.
Laravel прост в использовании и помогает ускорить процесс веб-разработки
Если вы ищете высокопроизводительное веб-приложение, Laravel — лучший вариант.

Когда следует использовать Laravel?

В корпоративной среде со сложными приложениями
В крупных компаниях, которым требуются масштабируемые приложения

Когда не следует использовать Laravel?

Если вы ищете фундаментальное и простое приложение
Вы планируете работать в бессерверной среде
Разработчики не являются экспертами в PHP

9.

Джанго
Django был разработан еще в 2005 году Адрианом Головатым и Саймоном Уиллисоном. Это еще один Python-зависимый фреймворк в нашем списке, который наиболее удобен для архитектурного шаблона MTV. В последнее время Python становится все более популярным. Это основная причина, по которой Django используется многими разработчиками по всему миру.

Характеристики
Django — это хорошо масштабируемая среда разработки для крупных предприятий, поддерживающая архитектуру MTV.
Скорость разработки в Django высока
Django полностью совместим с Python

Когда следует использовать Laravel?
В крупных организациях, где скорость любого процесса веб-разработки является важным аспектом
Команда разработчиков хорошо знает Python

Когда не следует использовать Laravel?
Разработчики не знакомы с языком программирования Python
Приложение в вашей повестке дня является базовым и не требует дополнительных функций

Microsoft — один из тех мировых технологических брендов, который последовательно разрабатывает свои продукты, следуя отраслевым тенденциям. ASP.NET Core исходит от Microsoft и был выпущен в 2016 году с некоторыми из последних функций. Эта бесшовная и передовая среда веб-разработки высоко оценена разработчиками по всему миру.

Характеристики
Это платформа корпоративного уровня, поддерживающая архитектуру MVC.
ASP.NET Core может без проблем работать на нескольких платформах, таких как Windows, Linux, MacOS.
ASP.NET особенно подходит для крупных предприятий, разрабатывающих сложные приложения

Когда следует использовать ASP.НЕТ ядро?
Если вы разрабатываете высокопроизводительное приложение с интенсивным использованием ЦП, ASP.NET должен быть вашим первым выбором
Если вы планируете создавать гибкие и проверенные приложения

Когда не следует использовать ASP.NET Core?
Для простых приложений ASP. NET Core не работает
Если разработчики не разбираются в C# и F#

Заключительные слова

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

У вас есть вопросы по этому поводу? Дайте нам знать в комментариях, и мы свяжемся.
Использовать стандартные веб-технологии | Цифровая доступность
HTML, CSS и JavaScript вместе обеспечивают стабильную платформу для доступного веб-контента и разработки приложений, если эти технологии используются в соответствии со стандартами.Соблюдение стандартов гарантирует, что вспомогательные технологии и браузеры вместе имеют наилучшие шансы отображать контент доступным и осмысленным способом.
Используйте HTML, CSS и JavaScript в соответствии со спецификациями. Используйте собственную разметку HTML для определения структуры и значения контента. Используйте CSS для управления визуальным отображением, в том числе при разных разрешениях экрана и в разных средах, например, при печати страницы. Используйте JavaScript для управления интерактивностью, когда HTML не может сделать это самостоятельно.Действительная разметка сама по себе не обеспечивает доступности, но важно свести к минимуму проблемы проверки, проверяя код с помощью инструмента проверки.
Используйте другие веб-технологии с осторожностью и при необходимости. Другие веб-технологии и форматы документов, такие как Flash и PDF, имеют разную степень поддержки специальных возможностей и разные уровни сложности предоставления доступных документов. Если вам необходимо использовать альтернативный формат, убедитесь, что вы предоставили все доступные специальные возможности.
Тестовый код для ряда комбинаций вспомогательных технологий и браузеров. Поскольку браузеры имеют небольшие различия в том, как они поддерживают функции HTML и CSS, то же самое относится и к вспомогательным технологиям, особенно программам чтения с экрана. В результате взаимодействие с пользователем может незначительно отличаться в зависимости от предоставленной интерактивности и способа ее создания. В качестве основы протестируйте контент и функциональность, используя часто используемые платформы, например:
В Windows JAWS с Internet Explorer и Firefox и NVDA с Firefox
В Mac OS X VoiceOver с Safari
Тестирование
Проверьте HTML с помощью инструмента проверки.
Все ли элементы правильно помечены и вложены?
Предоставляются ли обязательные атрибуты для элемента при его использовании?
Присваиваются ли атрибутам id уникальные значения?
Ресурсы
.
Добавить комментарий Отменить ответ
Ваш адрес email не будет опубликован. Обязательные поля помечены *
Комментарий *
Имя *
Email *
Сайт

Web технологии: Что такое WEB-технологии? Как работают сайты?

Что такое WEB-технологии? Как работают сайты?

Веб-технологии для разработчиков | MDN

Основы веб разработки

Написание сценариев

Графика

Аудио, видео и мультимедиа

Прочее

Руководства Web-разработчика | MDN

JavaScript | MDN

Для абсолютных новичков

Руководство по JavaScript

Средний уровень

Продвинутый уровень

HTML | MDN

Продвинутые темы

Справочники

Похожие темы

CSS | MDN

Веб-технологии | WebReference

AngularJS. Рецепты программирования

Глубокое погружение в Canvas

Знакомство с JavaScript

Основы jQuery

Приступая к работе с Grunt

Сборка с Gulp

9 веб-технологий, которые должен знать каждый веб-разработчик в 2021 году

Угловой

Руби на рельсах

YII

Метеор JS

Express.js

Зенд

Джанго

Ларавель

JavaScript

HTTP

ДДП

ОТДЫХ

Веб-технологии для разработчиков | MDN

Что такое веб-технология? — Определение и тенденции — Видео и стенограмма урока

Примеры

Тенденции

Краткий обзор урока

Руководство по различным веб-технологиям и их взаимосвязи | Эрик Энгхейм

Разработчик настольных компьютеров пытается разобраться в огромной веб-экосистеме

{{header}}

Цвета

Клон Python?

Клоны Haskell?

Клон LISP/Clojure?

Клон Java?

Множественные цели: Nim и Haxe

Высокопроизводительные системные языки: WebAssembly

Общие клиентские веб-технологии | Документы Майкрософт

Пожалуйста, оцените свой опыт

В этой статье

HTML

УСБ

Препроцессоры CSS

JavaScript

Устаревшие веб-приложения с jQuery

jQuery и SPA Framework

Угловые SPA

Привет, {{name}}

Реагировать

Вью

Блазор WebAssembly

Выбор платформы SPA

Ссылки – клиентские веб-технологии

Топ-10 лучших технологий веб-разработки для использования в 2021 году | ИШИР

Интересно прочитать: 15 главных тенденций веб-дизайна и разработки в 2020 году, от которых невозможно скрыться

4. Пружина

5.Express.js

6. Колба

9.

Заключительные слова

Использовать стандартные веб-технологии | Цифровая доступность​

Тестирование

Ресурсы

Использовать стандартные веб-технологии | Цифровая доступность