Разное

Справочник по web разработке: Справочник по веб-разработке

Содержание

Руководства 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.
  • Справочник по веб-технологиям (en-US)

Last modified: , by MDN contributors

Изучение веб-разработки | MDN

Добро пожаловать в обучающий раздел MDN. Эта серия статей направлена на то, чтобы предоставить начинающим с нуля в веб-программировании всё необходимое для того, чтобы начать разрабатывать сайты.

Задача этого раздела не перевести вас из «новичка» в «эксперта», а перевести вас из «новичка» в «уверенного». Это должно дать вам возможность начать строить свой путь, изучая остальные материалы MDN и другие средние и продвинутые материалы, предполагающие существенные начальные знания.

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

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

Если у вас есть предложения о добавлении тем, которые вы хотели бы увидеть или которых, как вы считаете, не хватает, напишите нам на нашем форуме Discourse.

Хотите стать фронтенд-разработчиком?

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

Начать

  • Я новичок Если вы совсем новичок в веб-разработке, мы рекомендуем вам начать работу со статьи «Начало работы с вебом», которая представляет собой практическое вступление в веб-разработку.
  • Уже что-то знаю Если у вас уже есть какой-то набор знаний, то следующим шагом будет изучение HTML и CSS во всех подробностях: начните с нашей статьи «Введение в HTML», а затем загляните в статью «Вступление в CSS».
  • Погружаемся в программирование Если вы уже чувствуете себя комфортно с HTML и CSS или в основном интересуетесь кодингом, то вы захотите погрузиться в JavaScript или разработку на стороне сервера. Загляните в разделы «Первые шаги в JavaScript» и «Первые шаги в программировании веб-сайтов на стороне сервера».
  • Фреймворки и инструменты Освоив основы ванильного HTML, CSS и JavaScript, стоит приступить к изучению инструментов веб-разработки на стороне клиента, а затем углубиться в JavaScript-фреймворки для фронтенда и программирование веб-сайтов на стороне сервера.

Примечание: в нашем глоссарии вы можете найти термины и их определения. Кроме того, если у вас есть конкретный вопрос по веб-разработке, возможно, ответ найдётся в разделе «Распространённые вопросы».

Ниже приводится список всех тем, которые мы рассматриваем в обучающем разделе MDN.

Начало работы с вебом
Практическое введение в веб-разработку для начинающих.
Изучение HTML: руководства и уроки
HTML — это язык, который мы используем для структурирования различных частей контента и определения их значения или цели. В этой теме подробно рассматривается HTML.
CSS: стилизация веб-страниц
CSS — это язык, который мы можем использовать для стилизации и разметки веб-контента, а также для описания такого поведения, как анимация. В этой теме подробно рассматривается CSS.
JavaScript: разработка клиентских скриптов для динамических веб-страниц
JavaScript — это язык сценариев, используемый для добавления динамической функциональности на веб-страницы. В этой теме рассказывается обо всём необходимом для того, чтобы научиться писать на JavaScript и понимать его.
Веб-формы: работа с пользовательскими данными
Веб-формы — мощный инструмент для взаимодействия с пользователями. Чаще всего они используются для сбора данных от пользователей или для управления пользовательским интерфейсом. В статьях, перечисленных ниже, мы рассмотрим все важные аспекты структурирования, стилизации и взаимодействия с веб-формами.
Доступность: сделаем интернет доступным для всех
Доступность — это практика предоставления доступа к веб-контенту как можно большему количеству людей, независимо от ограниченных возможностей здоровья, используемого устройства, региона или других отличительных факторов. В этой теме вы найдёте все, что вам нужно знать.
Производительность веб-приложений: делаем сайты быстрыми и отзывчивыми
Веб-производительность — это искусство обеспечения быстрой загрузки веб-приложений и их реагирования на действия пользователя, независимо от скорости соединения пользователя, размера экрана, сети или возможностей устройства.
Инструменты и тестирование
В этой теме рассматриваются инструменты, которые разработчики используют для оптимизации своей работы, например: инструменты для кросс-браузерного тестирования, линтеры, средства форматирования, инструменты преобразования, системы контроля версий, инструменты развёртывания и клиентские JavaScript-фреймворки.
Серверное программирование веб-сайтов
Даже если вы преимущественно интересуетесь фронтенд-разработкой, всё равно полезно знать, как работают серверы и функции, написанные на серверном коде. В этой теме представлены общие сведения о том, как работает серверная часть, и подробные руководства по созданию серверного приложения с использованием двух популярных фреймворков: Django (Python) и Express (Node.
js).

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

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

  1. Установите Git на свой компьютер. Это основное программное обеспечение системы контроля версий, разрабатываемое компанией GitHub.
  2. Откройте командную строку (Windows) или терминал (Linux, macOS).
  3. Чтобы скопировать репозиторий обучающего раздела в папку с именем learning-area в текущем местоположении, на которое указывает ваша командная строка / терминал, используйте следующую команду:
    git clone https://github.com/mdn/learning-area
  4. Теперь вы можете войти в директорию и найти нужные вам файлы (с помощью Finder/проводника либо команды cd).

Вы можете обновить репозиторий learning-area и добавить любые изменения, внесённые в основную версию на GitHub, выполнив следующие действия:

  1. В командной строке / терминале войдите в директорию learning-area командой cd. Например, если вы в родительском каталоге:
    cd learning-area
  2. Обновите репозиторий, выполнив следующую команду:
    git pull

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

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

Codecademy
Крутой интерактивный сайт для изучения языков программирования с нуля.
Code.org
Базовая теория кода и практика, нацеленная в основном на детей или совсем новичков.
EXLskills
бесплатный и открытые курсы для обучения техническим навыкам, с наставничеством и обучением на основе проектов
Карта веб-грамотности
Структура веб-грамотности начального уровня и навыков 21 века, которая предоставляет доступ к преподавательской деятельности, отсортированной по категориям.
Преподавательская деятельность
Серия материалов для обучения (и изучения), созданная Mozilla Foundation, покрывающая всё от базовой веб-грамотности и приватности JavaScript до взлома Minecraft.
Edabit
Тысячи интерактивных задач JavaScript.

Last modified: , by MDN contributors

Научитесь стилизовать HTML с помощью CSS — Изучение веб-разработки

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

Хотите стать frontend-разработчиком?

Мы составили курс, который содержит всю необходимую информацию для достижения этой цели.

Начать изучение курса

Прежде чем браться за CSS, вам стоит разобраться с основами HTML. Мы рекомендуем сначала изучить модуль Введение в HTML

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

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

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

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

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

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

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

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

В разделе Использование CSS для решения общих проблем даны ссылки на разделы, объясняющие, как следует использовать CSS для решения самых распространённых проблем при создании веб-страницы.

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

CSS иначе, чем большинство языков программирования и инструментов для дизайна, с которыми вы можете столкнуться. Почему это работает именно так? В следующем видео, Мириам Сюзанна дает объяснение того, почему CSS работает так, как он работает, и почему он так развивался:

CSS на MDN
Основная точка входа для CSS документации на MDN, где вы найдете вы найдете справочную информацию по функциям языка CSS. Хотите знать все значения, которые может принимать какое-либо свойство? Тогда вам сюда

Last modified: , by MDN contributors

Руководство для начинающих по разработке веб-сайтов

Что такое разработка веб-сайтов?

Разработка веб-сайта — это общий термин для работы, связанной с созданием веб-сайта. Это включает в себя все, от разметки и кодирования до сценариев, настройки сети и разработки CMS.

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

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

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

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

  2. Типы веб-разработки

  3. Процесс веб-разработки

  4. Ресурсы веб-разработки

Почему важна веб-разработка?

Интернет никуда не денется. Фактически, он стал порталом и основным методом исследования, связи, образования и развлечения в мире. По состоянию на 2021 год во всем мире насчитывалось 4,66 миллиарда пользователей Интернета — более половины населения мира.

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

Узнайте, почему тысячи клиентов используют CMS Hub для создания оптимизированного веб-сайта, который интегрируется с данными HubSpot CRM и полным маркетинговым пакетом.

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

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

  1. Что такое веб-сайт?
  2. Что такое IP-адрес?
  3. Что означает HTTP?
  4. Что такое кодирование?
  5. Что означает интерфейс?
  6. Что означает серверная часть?
  7. Что такое CMS?
  8. Что такое кибербезопасность?

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

1. Что такое веб-сайт?

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

Браузеры — это компьютерные программы, загружающие веб-сайты через подключение к Интернету, такие как Google Chrome или Internet Explorer, а компьютеры, используемые для доступа к этим веб-сайтам, называются «клиентами».

2. Что такое IP-адрес?

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

IP-адрес HubSpot — 104.16.249.5. Вы можете узнать IP-адрес любого веб-сайта, посетив такой сайт, как Site 24×7, или используя командную строку в Windows или сетевую утилиту > Traceroute на MacBook.

Чтобы найти IP-адрес вашего устройства, вы также можете ввести «какой у меня IP-адрес» в поисковом браузере.

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

3. Что означает HTTP?

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

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

4. Что такое кодирование?

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

Все программное обеспечение написано как минимум на одном языке кодирования, но языки различаются в зависимости от платформы, операционной системы и стиля. Все языки попадают в одну из двух категорий: front-end и back-end.

5. Что означает интерфейс?

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

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

6. Что означает серверная часть?

Back-end (или серверная часть) — это сторона, которую вы не видите при использовании Интернета. Это цифровая инфраструктура, и для неразработчиков она выглядит как набор цифр, букв и символов.

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

7. Что такое CMS?

Система управления контентом (CMS) — это веб-приложение или набор программ, используемых для создания веб-контента и управления им. (Примечание: CMS — это не то же самое, что конструкторы сайтов, такие как Squarespace или Wix.)

Узнайте, почему тысячи клиентов используют CMS Hub для создания оптимизированного веб-сайта, который интегрируется с их данными HubSpot CRM и полным маркетинговым пакетом.

Хотя создание веб-сайта не требуется, использование CMS упрощает задачу. Он предоставляет строительные блоки (например, плагины и надстройки) и позволяет создавать структуру с помощью вашего кода. CMS часто используются для электронной коммерции и ведения блогов, но они полезны для всех типов веб-сайтов.

8. Что такое кибербезопасность?

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

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

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

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

  • Бэкенд-разработка
  • Полная разработка стека
  • Разработка веб-сайта
  • Разработка рабочего стола
  • Мобильная разработка
  • Разработка игр
  • Встроенная разработка
  • Развитие безопасности

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

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

    1. Начальная разработка

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

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

    2. Back-end разработка

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

    Эти разработчики работают с такими системами, как серверы, операционные системы, API и базы данных, и управляют кодом для обеспечения безопасности, контента и архитектуры сайта. Они сотрудничают с фронтенд-разработчиками, чтобы донести свои продукты до пользователей.

    3. Разработка полного стека

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

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

    4. Разработка веб-сайтов

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

    5. Разработка для настольных компьютеров

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

    6. Разработка мобильных приложений

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

    7. Разработка игр

    Разработчики игр специализируются на написании кода для видеоигр, включая игры для консолей (Xbox, PlayStation и т. д.), игры для ПК и мобильные игры, что означает, что эта специальность частично совпадает с разработкой для мобильных устройств.

    8. Разработка встраиваемых систем

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

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

    9. Разработка безопасности

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

    Теперь давайте углубимся в процесс веб-разработки.

    Процесс разработки веб-сайта

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

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

    1. Составьте план.

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

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

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

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

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

    2. Создайте каркас.

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

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

    3. Составьте карту сайта.

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

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

    • Какие отдельные страницы вам нужны?
    • Какой контент будет на этих страницах?
    • Как организовать эти страницы по категориям?
    • Какова иерархия страниц на вашем сайте?
    • Как страницы будут связаны друг с другом?
    • Какие страницы и категории важны для вашего сайта и взаимодействия с пользователем?
    • Какие страницы или категории можно удалить или объединить?

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

    3. Напишите код вашего сайта.

    Следующим шагом в процессе веб-разработки является написание кода.

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

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

    HTML

    Язык гипертекстовой разметки (HTML) используется с 1990-х годов. Это основа всех веб-сайтов и представляет собой минимум того, что необходимо для создания веб-сайта. Хотя можно создать веб-сайт только с помощью HTML, он не будет выглядеть особенно привлекательным.

    Ниже приведен HTML-код основной кнопки Bootstrap.

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

    CSS

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

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

    Вот фрагмент кода для настройки элемента jumbotron в Bootstrap CSS.

     
      .jumbotron { 
     background: #27a967; 
     цвет: белый; 
     выравнивание текста: по центру; 
     }      
     
     .jumbotron p { 
     цвет: белый; 
     размер шрифта: 26px; 
     }
    JavaScript

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

    JavaScript быстро развивается. Когда-то считавшийся «игрушечным» языком, сейчас JavaScript является наиболее широко используемым языком кодирования в мире. С помощью Node.Js это теперь внутренний язык кодирования. Это первый язык, понятный браузерам, и некоторые даже обсуждали возможность применения к нему машинного обучения.

    Ниже приведен фрагмент кода JavaScript для автоматического открытия ссылок в новом окне в WordPress.

    HTML, CSS, JavaScript — «большая тройка» веб-разработки. Почти каждый веб-сайт использует их в той или иной степени. Существует множество других языков, таких как серверные языки, такие как Java, C++, Python и SQL, но понимание этих трех является основополагающим для ваших знаний о разработке веб-сайтов.

    4. Создайте серверную часть вашего веб-сайта.

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

    Начнем с задней части.

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

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

    Вместе эти компоненты составляют основу каждого веб-сайта.

    Что касается создания вашего веб-сайта, бэкенд-разработчики установят три вещи.

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

    С этими компонентами и решениями ваш веб-сайт будет готов к разработке внешнего интерфейса.

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

    Facebook, например, необходимо знать, какие люди есть в вашем списке друзей, к каким мероприятиям вы присоединились, какие публикации создали и т. д. Это все «данные», которые хранятся в базе данных. Если бы у них не было серверной части с базой данных, ни одна из этих данных не была бы им доступна.

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

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

    5.

    Создайте интерфейс своего веб-сайта.

    Если вы когда-либо пробовали себя в веб-дизайне или разрабатывали веб-сайты на WordPress, Squarespace или Google Sites, вы касались веб-разработки переднего плана.

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

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

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

    6. (Необязательно) Работа с CMS.

    Зачем кому-то выбирать CMS, а не кодирование «вручную» или «с нуля»? Это правда, что CMS менее гибкая и, следовательно, дает вам меньше контроля над интерфейсом. Однако CMS проще в использовании (вам нужно писать меньше кода), и в ней часто есть инструменты для размещения сайта, хранения информации о пользователях, создания блога, публикации целевых страниц, сбора лидов и даже создания списка адресов электронной почты. В результате вы сможете сделать свой сайт более прибыльным, выполнив менее половины работы.

    Узнайте, почему тысячи клиентов используют CMS HubSpot для создания оптимизированного веб-сайта, который интегрируется с данными HubSpot CRM и полным маркетинговым набором.

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

    Популярные системы управления контентом включают HubSpot, Joomla, Magento и WordPress, доля рынка которых превышает 65%. (В данном случае мы говорим о программном обеспечении WordPress с открытым исходным кодом, а не о конструкторе сайтов WordPress.)

    7. Приобретите доменное имя.

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

    Возможно, вы слышали о таких сайтах, как GoDaddy и Hover. Эти услуги помогут вам приобрести доменное имя и зарегистрироваться в ICANN (Интернет-корпорация по присвоению имен и номеров). Большинство регистраций доменов действительны в течение года, прежде чем вам потребуется продлить их.

    Разработчики веб-сайтов и услуги хостинга, такие как WordPress и Squarespace, также позволяют вам приобрести доменное имя.

    8. Запустите свой сайт.

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

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

    Ресурсы для разработки веб-сайтов

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

    Курсы и классы по веб-разработке

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

    УчебникиПункт

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

    умник

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

    Пользователи могут проходить курсы, слушать подкасты или брать уроки по широкому кругу тем веб-разработки.

    Академия Хана

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

    SiteSaga

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

    freeCodeCamp

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

    Team Treehouse

    Team Treehouse — это программа онлайн-обучения на основе подписки. Пользователи вносят ежемесячную плату и получают доступ к сотням курсов по более чем 20 различным темам. От JavaScript до Python и PHP, Treehouse может научить вас всему, что вам нужно знать о веб-разработке.

    Сообщества веб-разработчиков

    Веб-разработчики — мастера Интернета, поэтому вполне логично, что они общаются и общаются в интернет-сообществах.

    Согласно Code Condo, разработчики присоединяются к этим сообществам для:

    • Актуальной информации и решения проблем
    • Проницательные ответы, новые перспективы
    • Советы и рекомендации для программистов всех уровней
    • Ссылки на ресурсы, доклады и исследовательские работы
    • Встреча с новыми друзьями, приятелями по коду и потенциальными партнерами

    Вот несколько интернет-сообществ, рекомендованных нашими разработчиками HubSpot.

    Stack Overflow

    Stack Overflow появился почти 15 лет назад и с тех пор стал одним из самых популярных сообществ программистов в мире. По словам соучредителя Джеффа Этвуда, «[Stack Overflow] создан программистами для программистов с конечной целью коллективного увеличения общей суммы хороших знаний в области программирования в мире».

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

    Mozilla Development Network

    Mozilla Development Network (MDN), как известно, является более подробным и точным, чем другие онлайн-ресурсы. Это не столько сообщество, сколько всеобъемлющий ресурс и библиотека документов для языков кодирования. MDN полезен, когда вы изучаете, как работают определенные функции, и следите за последними новостями в области кодирования и разработки.

    Reddit

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

    Погрузитесь в веб-разработку

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

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

    Примечание редактора. Этот пост был первоначально опубликован в ноябре 2018 года и обновлен для полноты.

     

    Темы: Разработка сайта

    Не забудьте поделиться этим постом!

    Изучите веб-разработку | MDN

    Добро пожаловать в раздел обучения MDN. Этот набор статей направлен на то, чтобы помочь новичкам в веб-разработке со всем, что им нужно, чтобы начать кодировать веб-сайты.

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

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

    Хотите стать веб-разработчиком?

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

    Начало работы

    Полный новичок

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

    Помимо основ

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

    Переходим к сценариям

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

    Каркасы и инструменты

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

    Примечание: Наш глоссарий содержит определения терминов. Кроме того, если у вас есть конкретный вопрос о веб-разработке, наш раздел «Общие вопросы» может помочь вам.

    Ниже приведен список всех тем, которые мы рассматриваем в области обучения MDN.

    Начало работы в Интернете

    Практическое введение в веб-разработку для начинающих.

    HTML — структурирование сети

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

    CSS — веб-стилизация

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

    JavaScript — динамические сценарии на стороне клиента

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

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

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

    Доступность — сделайте Интернет доступным для всех

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

    Web Performance — делаем веб-сайты быстрыми и отзывчивыми

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

    MathML

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

    Инструменты и испытания

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

    Программирование веб-сайта на стороне сервера

    Даже если вы занимаетесь веб-разработкой на стороне клиента, все равно полезно знать, как работают серверы и функции серверного кода. В этом разделе представлены общие сведения о том, как работает серверная часть, и подробные руководства, показывающие, как создать серверное приложение с использованием двух популярных платформ: Django (Python) и Express (Node. js).

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

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

    1. Установите Git на свой компьютер. Это базовое программное обеспечение системы контроля версий, над которым работает GitHub.
    2. Откройте командную строку вашего компьютера (Windows) или терминал (Linux, macOS).
    3. Чтобы скопировать репозиторий области обучения в папку с именем Learning-Area в текущем местоположении, на которое указывает ваша командная строка/терминал, используйте следующую команду: клон
       git https://github.com/mdn/learning-area
    4. Теперь вы можете войти в каталог и найти файлы, которые вам нужны (используя Finder/File Explorer или команду cd ).

    Вы можете обновить репозиторий Learning-Area любыми изменениями, внесенными в основную версию на GitHub, выполнив следующие действия:

    1. В командной строке/терминале перейдите в каталог Learning-Area , используя cd . Например, если вы были в родительском каталоге:
       cd учебная зона
    2. Обновите репозиторий с помощью следующей команды:
       git тянуть

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

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

    Информационный бюллетень для разработчиков Mozilla

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

    Изучите JavaScript

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

    Сеть демистифицирует

    Отличная серия видеороликов, объясняющих основы веб-разработки, предназначенных для абсолютных новичков в веб-разработке. Создано Жереми Патонье.

    Codecademy

    Отличный интерактивный сайт для изучения языков программирования с нуля.

    Битовая степень

    Базовая теория кодирования с игровым процессом обучения. Ориентирован в основном на новичков.

    Code.org

    Базовая теория и практика кодирования, в первую очередь предназначенная для детей/полных новичков.

    EXLSkills

    Бесплатные и открытые курсы для обучения техническим навыкам с наставничеством и проектным обучением.

    freeCodeCamp.org

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

    Карта веб-грамотности

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

    Эдабит

    Тысячи интерактивных задач JavaScript.

    Последнее изменение: , авторы MDN

    Веб-формы — Работа с пользовательскими данными — Обучение веб-разработке

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

    Хотите стать веб-разработчиком?

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

    Начало работы

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

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

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

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

    Ваша первая форма

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

    Как структурировать веб-форму

    Избавившись от основ, мы теперь более подробно рассмотрим элементы, используемые для придания структуры и значения различным частям формы.

    Базовые собственные элементы управления формой

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

    Типы ввода HTML5

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

    Прочие формы контроля

    Далее мы рассмотрим все не- элементы управления формы и связанные с ними инструменты, такие как