Руководство по разработке веб-сайтов для новичков.
Руководство по разработке веб-сайтов для новичков.
С 1990-х годов мало что оставалось вечным общественным достоянием, например Друзья, Покемон, Бритни Спирс и Интернет.
Шутки в сторону. Многое пришло и ушло, но эти ребята остались, выдержали удары 2000 года и интегрировались в наше общество. (
И все же ничто не говорит «Я здесь, чтобы остаться», как Интернет. От коммутируемого доступа и всего AOL до Chrome и Интернета
Изучение веб-разработки похоже на питье из пожарного шланга. Погуглите «кодирование», и вы включили шланг на полную мощность. Это руководство поможет вам познакомиться с миром веб-разработки и заинтриговать им. Это ни в коем случае не исчерпывающее руководство.
В этом руководстве мы рассмотрим самые простые основы веб-разработки, процесс создания веб-сайта и дополнительные ресурсы для тех, кто хочет узнать больше о разработке или стать разработчиком самостоятельно.
Продолжайте читать, чтобы погрузиться в разработку веб-, или используйте ссылки на главы, чтобы перейти к руководству.
Что такое разработка веб-?
Разработка веб-сайта относится к работе, которая идет на создание веб-сайта. Это может относиться к чему угодно, от создания единой веб-страницы с открытым текстом до разработки сложного веб-приложения или социальной сети.
Хотя веб-разработка обычно относится к веб-разметке и кодированию, она включает в себя все связанные задачи разработки, такие как сценарии на стороне клиента, сценарии на стороне сервера, настройка безопасности сервера и сети, разработка электронной коммерции и разработка системы управления контентом (CMS).
Почему важна веб-разработка?
Вы можете быть владельцем бизнеса, нанимающим разработчика-ера для создания вашего веб-сайта, маркетологом, который представляет свое видение вашей команде разработчиков, или студентом, изучающим развитие как профессию. Независимо от того, кто вы и почему вы читаете это руководство, понимание основ разработки веб- может быть полезным в этом мире, основанном на технологиях.
Интернет не уйдет в ближайшее время. Фактически, он стал порталом и основным методом исследования, связи, образования и развлечений в мире. По состоянию на 2019 год в мире насчитывается
Что общего у этих причин? Им нужен веб-сайт, и каждый веб-сайт требует квалифицированного веб-разработчика.
Веб-разработка – это также быстро развивающаяся отрасль. Ожидается, что с настоящего момента до 2028 года занятость веб-разработчиков
Основы веб-разработки
- Что такое веб-сайт
- Что такое IP-адрес
- Что означает HTTP
- Что такое кодирование
- Что означает Front-end
- Что означает Back-end
- Что такое CMS
- Что такое кибербезопасность
Теперь, когда мы определили веб-разработку, давайте рассмотрим некоторые основы веб-разработки, чтобы лучше познакомить вас с этой темой.
1 Что такое веб-сайт
Веб-сайты – это файлы, хранящиеся на серверах, которые представляют собой компьютеры, на которых размещаются (причудливый термин «хранить файлы для») веб-сайты. Эти серверы подключены к гигантской сети, называемой Интернетом… или Всемирной паутиной (если мы придерживаемся терминологии 90-х годов). Подробнее о серверах мы поговорим в следующем разделе.
Браузеры – это компьютерные программы, которые загружают веб-сайты через ваше интернет-соединение, например Google Chrome или Internet Explorer. Ваш компьютер также известен как клиент.
2 Что такое IP-адрес
Интернет-протокол – это набор стандартов, регулирующих взаимодействие в Интернете.
Чтобы получить доступ к веб-сайту, вам необходимо знать его IP-адрес. IP-адрес – это уникальная строка чисел. У каждого устройства есть IP-адрес, чтобы отличаться от миллиардов веб- и устройств, подключенных через Интернет.
IP-адрес для – 104.16.249.5. Вы можете найти IP-адрес любого веб-сайта, посетив такой сайт, как

Чтобы узнать IP-адрес вашего устройства, вы также можете ввести «какой у меня IP-адрес» в поисковом браузере.
Хотя вы можете получить доступ к веб-сайту, используя его IP-адрес, большинство пользователей Интернета предпочитают использовать доменные имена или использовать поисковые системы.
3 Что означает HTTP
Протокол передачи гипертекста (HTTP) связывает вас и запрос вашего веб-сайта с удаленным сервером, на котором хранятся все данные веб-сайта. Это набор правил (протокол), который определяет, как сообщения должны отправляться через Интернет. Он позволяет переключаться между страницами сайта и сайтами.
Когда вы вводите веб-сайт в свой веб-браузер или выполняете поиск чего-либо в поисковой системе, HTTP предоставляет структуру, позволяющую клиенту (компьютеру) и серверу говорить на одном языке, когда они отправляют запросы и отвечают друг другу через Интернет. По сути, это переводчик между вами и Интернетом – он читает запрос вашего веб-сайта, считывает код, отправленный обратно с сервера, и переводит его для вас в виде веб-сайта.
4 Что такое кодирование
Кодирование относится к написанию кода для серверов и приложений с использованием
Все программное обеспечение написано по крайней мере на одном языке кодирования, но языки различаются в зависимости от платформы, операционной системы и стиля. Существует много различных типов языков кодирования… все они делятся на две категории: интерфейсные и внутренние.
5 Что означает интерфейс
Front-end (или клиентская сторона) – это часть веб-сайта или программного обеспечения, которую вы видите и с которой взаимодействуете как пользователь Интернета. Когда информация веб-сайта передается с сервера в браузер, языки программирования внешнего интерфейса позволяют веб-сайту функционировать без необходимости постоянного «взаимодействия» с Интернетом.
Внешний код позволяет таким пользователям, как вы и я, взаимодействовать с веб-сайтом и воспроизводить видео, увеличивать или уменьшать изображения, выделять текст и многое другое. Веб-разработчики, которые работают над интерфейсным кодом, работают над разработкой на стороне клиента.
Мы расскажем больше о фронтенд-разработке в следующем разделе.
6 Что означает серверная часть
Back-end (или серверная сторона) – это сторона, которую вы не видите при использовании Интернета. Это цифровая инфраструктура, и для людей, не являющихся разработчиками, она выглядит как набор цифр, букв и символов.
Языков внутреннего кодирования больше, чем языков интерфейса. Это потому, что браузеры – в интерфейсе – понимают только Script, но сервер – в бэкенде – может быть настроен для понимания практически любого языка. Далее мы расскажем больше о внутренней разработке.
7 Что такое CMS
Система управления контентом (CMS) – это веб-приложение или серия программ, используемых для создания и управления веб-контентом. (Примечание: CMS – это не то же самое, что конструкторы
Хотя для создания веб-сайта это не требуется, использование CMS упрощает задачу. Он предоставляет строительные блоки (например,
8 Что такое кибербезопасность
Пока существует Интернет, будут пользователи, которые будут искать уязвимости на веб-сайтах для раскрытия частной информации, кражи данных и сбоев серверов. Практика кибербезопасности для защиты данных, сетей и компьютеров от этих угроз.
Методы, используемые хакерами, постоянно развиваются, как и меры безопасности, принимаемые для защиты от них. Неспособность понять, как ваш сайт может стать целью, может привести к катастрофе.
Итак, при изучении веб-разработки важно иметь хотя бы базовое понимание кибербезопасности – дополнительную информацию можно найти в нашем
Типы веб-разработки
- Front-end разработка
- Back-end разработка
- Разработка полного стека
- Разработка веб-
- Настольная разработка
- Мобильная разработка
- Разработка игр
- Встроенная разработка
- Развитие безопасности
Если вы хотите нанять веб-разработчика или стать им, вы должны понимать различные типы веб-разработки, которые могут освоить разработчики.
Эти различные типы веб – разработки, прежде всего, относятся к различным секторам профессии, в которой веб – разработки ERS может работать – мы ссылаются некоторые из них в разделах выше. Некоторые из этих различий пересекаются, и часто веб-разработчики овладевают несколькими типами веб-разработки.
1 Front-end разработка
Front-end разработчики работают с клиентской или пользовательской стороной веб-, программ и программного обеспечения – другими словами, над тем, что видят пользователи. Они проектируют и разрабатывают визуальные аспекты, включая макет, навигацию, графику и другую эстетику.
Основная задача этих разработчиков – создавать интерфейсы, которые помогают пользователям достигать своих целей, поэтому они также часто участвуют в
2 Back-end разработка
Если интерфейс – это то, что видят пользователи, то сервер – это то, что они не видят. Back-end веб-разработчики работают на серверах веб-, программ и программного обеспечения, чтобы убедиться, что все работает правильно за кулисами.
Эти разработчики работают в таких системах, как серверы, операционные системы,
3 Разработка полного стека
Поскольку разработчикам полного стека требуются годы работы в этой области, чтобы получить необходимый опыт, эта роль часто востребована. Их всесторонние знания помогают им оптимизировать производительность, выявлять проблемы до их возникновения и помогают членам команды понимать различные части веб-службы.
4 Разработка веб-
Разработчики веб- могут быть фронтенд-разработчиками, бэкэнд-разработчиками или разработчиками полного цикла. Однако эти профессионалы специализируются на создании веб-, в отличие от мобильных приложений, программного обеспечения для настольных компьютеров или видеоигр.
5 Разработка настольных компьютеров
Разработчики настольных компьютеров специализируются на создании программных приложений, которые запускаются локально на вашем устройстве, а не через Интернет в веб-браузере. Иногда набор навыков этих разработчиков совпадает с навыками веб-разработчиков, если приложение может работать как в сети, так и вне ее.
6 Мобильная разработка
Мобильные разработчики
7 Разработка игр
Разработчики игр специализируются на написании кода для видеоигр, как консольных (Xbox, PlayStation и т.д. ), Так и мобильных игр, что означает, что эта специальность частично перекликается с мобильной разработкой.
Однако разработчики игр специализируются на создании игрового опыта, что само по себе является совершенно другим набором навыков.
8 Встроенная разработка
Разработчики встроенных систем работают со всем оборудованием, кроме компьютера (или, по крайней мере, с тем, что большинство из нас представляет себе как «компьютеры», с клавиатурой и экраном). Сюда входят электронные интерфейсы, потребительские устройства, устройства Интернета , системы реального времени и многое другое.
В связи с недавним ростом количества взаимосвязанных устройств, таких как интеллектуальные устройства, технологии Bluetooth и виртуальные помощники, разработка встроенных устройств становится востребованной практикой.
9 Развитие безопасности
Разработчики безопасности устанавливают методы и процедуры безопасности программного обеспечения или веб-сайта. Эти разработчики обычно действуют как этические хакеры, пытаясь «взломать» веб-сайты, чтобы выявить уязвимости без намерения причинить вред. Они также создают системы, которые обнаруживают и устраняют риски безопасности.
Теперь давайте погрузимся в процесс веб-разработки (который включает многие из этих типов разработки).
Процесс разработки веб-сайта
Процесс создания веб-сайта не так прост, как 1-2-3. Каждый путь разработки отличается в зависимости от типа веб-сайта, и ресурсов.
Следующий раздел служит кратким обзором процесса веб-разработки и кратким введением в наиболее распространенные языки и опции CMS.
1 Составьте план.
Прежде чем прикладывать перо к бумаге или руки к клавиатуре, важно сначала связаться с командами и персоналом в вашей организации, чтобы разработать план для вашего веб-сайта.
Перед созданием первого черновика сайта следует рассмотреть несколько вопросов:
- Какова цель вашего сайта?
- Кто ваша аудитория, и хотите ли вы, чтобы они занимались на вашем сайте?
- Какой тип веб-сайта? (например, базовая информация, членство, интернет-магазин)
- Какой контент вы собираетесь публиковать и в каком объеме? Какова цель этого контента?
- Рассматривая общую картину, как вы структурируете свой веб-сайт для наилучшей навигации?
- Какой у вас бюджет?
Ответы на вопросы потребуют взаимодействия между вашими командами веб-разработки, маркетинга и финансов, чтобы делать информированные звонки. Отсюда вы можете перечислить свои приоритеты и составить расписание на время до обеда. Намного проще создать дорожную карту в начале процесса, чем откатить назад свой прогресс на препятствии.
2 Создайте каркас.
Все хорошие веб-сайты начинаются с проекта. Разработчики называют это каркасом или картой сайта (не путать с
Так же, как бизнес-план дает потенциальному инвестору понимание ваших целей и результатов, карта сайта дает разработчику представление о том, что вы изображаете, и информацию, необходимую для реализации вашего видения. Вы можете создать карту сайта самостоятельно или поработать со своим разработчиком (-ами).
Вот несколько вопросов, которые следует задать себе при планировании своего сайта:
- Какие отдельные страницы вам нужны? Какой контент будет на этих страницах?
- Как вы можете организовать эти страницы по категориям? (Эти категории могут представлять меню вашей домашней страницы – если это помогает думать об этом так.)
- Какова иерархия страниц на вашем сайте?
- Как страницы будут связаны друг с другом?
- Какие страницы и категории важны для вашего сайта и взаимодействия с пользователем, а какие можно удалить или объединить?
Опять же, рекомендуется проконсультироваться с другими командами в вашей организации. Если у вас есть команда SEO и / или контент-стратегии, их вклад будет иметь решающее значение для структуры ссылок и категоризации ваших страниц.
3 Напишите код вашего сайта.
Следующим шагом в процессе веб-разработки является написание кода.
Разработчики будут использовать разные языки программирования для внешнего и внутреннего интерфейса веб-, а также для различных функций сайта (таких как дизайн, интерактивность и т.д. ). Эти разные языки работают вместе для создания и запуска вашего сайта.
Начнем с
HTML
Ниже приведен HTML-
<button type="button" class"btn">Click Me</button> Такие языки, как CSS и Script, улучшают и изменяют базовую структуру сайта, созданную с помощью
CSS
CSS позволяет разработчикам преобразовать ваш веб-сайт в соответствии с эстетикой, которую вы задумали для своего сайта, и, как и HTML5, CSS совместим со всеми браузерами.
Вот фрагмент кода для настройки элемента jumbotron в
.jumbotron { background: #27a967; color: white; text-align: center; } .jumbotron p { color: white; font-size: 26px; } Script
Script – это вишенка на вершине . Созданный в середине 90-х, Script используется для добавления функциональности веб-сайтам. Разработчики используют его для добавления анимации, автоматизации задач на определенных страницах и добавления интерактивных функций, улучшающих взаимодействие с пользователем.
Script стремительно развивается. Когда-то считавшийся «игрушечным» языком, сейчас Script является наиболее широко используемым языком программирования в мире. С помощью Node.Js теперь это язык программирования серверной части. Это первый язык, который понимает браузер, и некоторые даже обсуждали применение к нему машинного обучения.
Ниже приведен фрагмент кода Script для

HTML, CSS, Script – это «большая тройка» веб-разработки. Практически каждый веб-сайт использует их в той или иной мере. Существует множество других языков, таких как серверные языки, такие как
4 Создайте внутреннюю часть своего веб-сайта.
Написание кода может быть одной из самых сложных частей веб-разработки, но далеко не единственным компонентом. Вам также необходимо создать внутреннюю и внешнюю структуры и дизайн сайта.
Начнем с бэкенда.
Серверная часть обрабатывает данные, которые обеспечивают функциональность клиентской части. Например, серверная часть Facebook хранит мои фотографии, так что интерфейс может позволить другим просматривать их. Он состоит из двух ключевых компонентов:
- Базы данных, отвечающие за хранение, организацию и обработку данных, чтобы их можно было получить по запросам сервера.
- Серверы – это оборудование и программное обеспечение, из которых состоит ваш компьютер. Серверы несут ответственность за отправку, обработку и получение запросов данных. Они являются посредником между базой данных и клиентом / браузером. Браузер, по сути, сообщит серверу «Мне нужна эта информация», и сервер будет знать, как получить эту информацию из базы данных и отправить ее клиенту.
Эти компоненты работают вместе, создавая основу для каждого веб-сайта.
Что касается создания вашего веб-сайта, backend-разработчики устанавливают три вещи.
- Код вашей логики, который, по сути, представляет собой набор правил, определяющих, как ваш сайт будет отвечать на определенные запросы и как будут взаимодействовать объекты вашего сайта.
- Управление вашей базой данных, то есть то, как ваш веб-сайт будет организовывать, управлять и извлекать свои данные.
- Ваша инфраструктура, на которой будет размещаться ваш сайт. Размещение собственного сайта даст вам больший контроль, но это намного дороже и требует от вас поддержания работоспособности и безопасности собственного сервера.
С этими компонентами и решениями ваш веб-сайт будет готов к интерфейсной разработке.
Примечание. Серверная часть немного связана с веб-разработкой, потому что она не всегда нужна, если вы не храните какие-либо данные. «Данные» в данном контексте означает любую введенную пользователем информацию, которую необходимо сохранить и сохранить. Подумайте о входе на сайт. Если у них нет серверной части, как они могут запомнить вашу регистрационную информацию? Или какие у тебя настройки профиля? Чтобы получить эту информацию, вам понадобится серверная часть.
Facebook, например, должен знать, какие люди есть в вашем списке друзей, к каким событиям вы присоединились, какие сообщения вы создали и многое другое. Это все «данные», которые хранятся в базе данных. Если бы у них не было серверной части с базой данных, ни одна из этих данных не была бы доступна для них.
С другой стороны, веб-сайт, который является чисто информационным и не требует от пользователей ввода каких-либо данных, не будет нуждаться в серверной части.
Итак, если у вас нет данных, вам не обязательно нужна внутренняя разработка. Но это не значит, что вам не следует изучать основы. Никогда не знаешь, когда это может понадобиться.
5 Создайте внешний вид своего веб-сайта.
Если вы когда-нибудь баловались ом или играли с веб-сайтом в , или
Внешний вид важен – это то, что видят ваши посетители, клиенты и пользователи и как они будут использовать ваш сайт.
Внешняя (или клиентская) разработка включает комбинацию Script, HTML и CSS. Он также управляет такими компонентами, как
По мере изменения технологий и предпочтений потребителей кодирование на стороне клиента имеет тенденцию устаревать… намного быстрее, чем это происходит при внутренней разработке. Здесь пригодятся ресурсы для кодирования (например, те, которые мы включили ниже).
6 (Необязательно) Работа с CMS.
Почему кто-то предпочтет CMS кодированию «вручную» или «с нуля»? Что ж, CMS проще в использовании (вам нужно писать меньше кода), и у нее часто есть инструменты для размещения сайта. С другой стороны, он менее гибкий и, следовательно, дает вам меньше контроля над интерфейсом.
Варианты CMS также часто включают , которые устраняют необходимость написания серверной части. Например, существуют для электронной коммерции, поэтому вместо создания сложной серверной части для списания средств с кредитных карт клиентов вы можете просто использовать существующий плагин и вообще избежать необходимости иметь дело с базами данных и серверным кодом.
Популярные системы управления контентом включают
7 Получите доменное имя.
На этом этапе у вашего сайта будет IP-адрес. Ему также необходимо
Возможно, вы слышали о таких сайтах, как
8 Запустите свой сайт.
После того, как вы настроили доменное имя и связали его со своим хостом, вы почти готовы представить свою работу в Интернете.
Но не так быстро – есть еще несколько
Ресурсы для разработки веб-
Хотите узнать больше о разработке и кодировании? Помимо связи и взаимодействия с другими разработчиками, есть множество ресурсов, к которым вы можете обратиться, чтобы углубить свое понимание или веб-разработку.
Курсы и классы веб-разработки
Если вы хотите изучить внутреннее, внешнее или полнофункциональное кодирование, вот несколько онлайн-курсов и классов, рекомендованных нашими собственными разработчиками .
Все материалы и ресурсы на
яйцеголовый
Согласно их веб-сайту, «
Ханская академия
Дом на дереве
Team
Сообщества веб-разработчиков
Веб-разработчики являются мастерами Интернета, поэтому есть смысл, чтобы они там зависали.
Согласно
- Актуальная информация и решение проблем
- Проницательные ответы, новые перспективы
- Советы и рекомендации для программистов любого уровня
- Ссылки на ресурсы, выступления и исследовательские работы
- Встреча с новыми друзьями, товарищами по программированию и потенциальными партнерами
Вот несколько онлайн-сообществ, рекомендованных нашими разработчиками .
Переполнение стека
– отличное место, где можно задать вопросы, потому что в большинстве случаев другие разработчики задают те же вопросы и отвечают на них. Форумы в позволяют поддерживать связь с другими разработчиками, а также держать вас в курсе.
Сеть разработчиков Mozilla
Погрузитесь в веб-разработку
Интернет никуда не денется. С каждым днем ситуация становится лучше, и веб-разработчики находятся на переднем крае этих нововведений и улучшений. От этого блога до вашей любимой социальной сети и приложений, которые вы используете на своем телефоне, – веб-разработка затрагивает практически каждую часть вашего дня – и вашего бизнеса.
Найдите время, чтобы понять кодирование и программирование, чтобы улучшить не только свою жизнь, но и жизнь ваших клиентов.
Примечание редактора: этот пост был первоначально опубликован в ноябре 2018 года и был обновлен для полноты.
Источник записи: