Веб проектирование: Веб разработка | Web разработка

alexxlab

Содержание

Веб разработка | Web разработка

  1. Проектирование, включающее создание ТЗ.
  2. Работа над креативной концепцией сайта.
  3. Макеты страниц.
  4. Дизайн-концепция.
  5. Мультимедиа, flash-элементы.
  6. Непосредственно верстка.
  7. Программирование серверной и клиентской части.
  8. Тестирование на соответствие ожиданиям заказчика.
  9. Публикация на хостинге.
  10. Обслуживание проекта.

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

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

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

Таким образом, над проектом работают специалисты разных направлений:

  • информационные архитекторы;
  • веб-дизайнеры;
  • верстальщики;
  • программисты;
  • тестировщики;
  • SEO;
  • копирайтеры;
  • контент-менеджеры.

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

Технологии фронтенд: html, css. Javasript. Технологии бэкенд: python, react.js, php и прочие. Остановимся на этом подробнее.

Frontend

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

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

Backend

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

Бэкендеры работают на python, php, node.js. Также необходимо освоить системы управления базами данных — MySQL, например. Backend для тех, кто любит работать с данными.

Верстка

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

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

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

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

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

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

Программирование

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

JS — браузерный язык программирования, а самый популярный представитель серверных языков — PHP. Код PHP внедряется в HTML.

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

Как и JS, PHP относительно несложен, но знать его недостаточно. Раскрыть возможности этого серверного языка помогут другие технологии. Так, необходима работа с MySQL или другими базами данных.

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

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

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

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

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

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

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

(en-US), чтобы показать, что изменилось.

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

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

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

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

Веб-дизайн | Техническая степень

Отпечатано 18.07.2023

  • Доступность программы
  • Ориентировочная стоимость
  • Прием
  • Результаты программы

Доступность программы *

Веб-дизайн

Адреса Лето 2023 Осень 2023 Весна 2024 Лето 2024

Эпплтон

Онлайн

Некоторые курсы могут быть доступны в нескольких местах.

Ключ