Основы вебразработки Теперь, когда мы определились с вебразработкой, давайте рассмотрим некоторые основы вебразработки. Что такое вебсайт
 Скачать 25.14 Kb.
|
|
Разработка веб-сайта - это универсальный термин для обозначения работы, связанной с созданием веб-сайта. Это включает в себя все - от разметки и кодирования до написания скриптов, настройки сети и разработки CMS. В то время как веб-разработка обычно относится к веб-разметке и кодированию, разработка веб-сайта включает в себя все связанные с этим задачи разработки, такие как написание сценариев на стороне клиента, написание сценариев на стороне сервера, настройка безопасности сервера и сети, разработка электронной коммерции и разработка системы управления контентом (CMS). Почему важна веб-разработка? Интернет никуда не денется. Фактически, это стало порталом и основным методом исследования, установления связей, образования и развлечений во всем мире. По состоянию на 2021 год в мире насчитывалось 4,66 миллиарда пользователей Интернета — более половины населения земного шара. Учитывая быстро растущее число пользователей Интернета, неудивительно, что веб-разработка является быстро развивающейся отраслью. Ожидается, что в период с настоящего момента по 2030 год занятость веб-разработчиков вырастет на 13%, что намного быстрее, чем в большинстве других технологических профессий. Основы веб-разработки Теперь, когда мы определились с веб-разработкой, давайте рассмотрим некоторые основы веб-разработки. Что такое веб-сайт? Веб-сайты - это файлы, хранящиеся на серверах, которые представляют собой компьютеры, размещающие (причудливый термин для “хранения файлов для”) веб-сайты. Эти серверы подключены к гигантской сети, называемой Интернетом. Браузеры - это компьютерные программы, которые загружают веб-сайты через ваше интернет-соединение, такие как Google Chrome или Internet Explorer, в то время как компьютеры, используемые для доступа к этим веб-сайтам, известны как “клиенты”. Что такое IP-адрес? Чтобы получить доступ к веб-сайту, вам необходимо знать его адрес по интернет-протоколу (IP). IP-адрес - это уникальная строка цифр. Каждое устройство имеет IP-адрес, позволяющий отличать его от миллиардов веб-сайтов и устройств, подключенных через Интернет. Хотя вы можете получить доступ к веб-сайту, используя его IP-адрес, большинство пользователей Интернета предпочитают использовать доменные имена или использовать поисковые системы. Что означает HTTP? Протокол передачи гипертекста (HTTP) соединяет вас и ваш запрос на веб-сайт с удаленным сервером, на котором хранятся все данные веб-сайта. Это набор правил (протокол), который определяет, как сообщения должны отправляться через Интернет. Это позволяет вам переходить между страницами сайта и веб-сайтами. Когда вы вводите веб-сайт в свой веб-браузер или ищете что-либо через поисковую систему, HTTP предоставляет платформу, позволяющую клиенту (компьютеру) и серверу говорить на одном языке, когда они отправляют запросы и ответы друг другу через Интернет. По сути, это переводчик между вами и Интернетом — он считывает ваш запрос на веб-сайт, считывает код, отправленный обратно с сервера, и переводит его для вас в виде веб-сайта. Что такое программирование? Программирование относится к написанию кода для серверов и приложений с использованием языков программирования. Их называют “языками”, потому что они включают в себя словарный запас и грамматические правила для общения с компьютерами. Они также включают специальные команды, сокращения и знаки препинания, которые могут быть прочитаны только устройствами и программами. Все программное обеспечение написано по крайней мере на одном языке программирования, но языки различаются в зависимости от платформы, операционной системы и стиля. Все языки делятся на одну из двух категорий: интерфейсные и серверные. 5. Что означает фронтенд? Интерфейс (или клиентская часть) - это сторона веб-сайта или программного обеспечения, которую вы видите и с которой взаимодействуете как пользователь Интернета. Когда информация о веб-сайте передается с сервера в браузер, интерфейсные языки программирования позволяют веб-сайту функционировать без необходимости постоянного “общения” с Интернетом. Интерфейсный код позволяет пользователям взаимодействовать с веб-сайтом и воспроизводить видео, расширять или сворачивать изображения, выделять текст и многое другое. Веб-разработчики, которые работают над интерфейсным кодированием, занимаются разработкой на стороне клиента. 6. Что означает серверная часть? Внутренняя часть (или серверная часть) - это та сторона, которую вы не видите, когда пользуетесь Интернетом. Это цифровая инфраструктура, и для тех, кто не является разработчиком, она выглядит как набор цифр, букв и символов. Существует больше внутренних языков программирования, чем интерфейсных языков. Это потому, что браузеры — во внешнем интерфейсе - понимают только HTML, CSS и JavaScript, но сервер — во внутреннем интерфейсе — может быть настроен для понимания практически любого языка. 7. Что такое CMS? Система управления контентом (CMS) - это веб-приложение или серия программ, используемых для создания веб-контента и управления им. (Примечание: CMS - это не то же самое, что конструкторы сайтов, такие как Squarespace или Wix.) Хотя создание веб-сайта и не требуется, использование CMS упрощает задачу. Он предоставляет строительные блоки (например, плагины и дополнения) и позволяет вам создавать структуру с помощью вашего кода. CMS часто используются для электронной коммерции и ведения блогов, но они полезны для всех типов веб-сайтов. Виды веб-разработки 1. Клиентская разработка 2. Серверная разработка 3. Фуллстек разработка 1. Интерфейсная разработка Интерфейсные разработчики работают над клиентской или пользовательской частью веб-сайтов, программ и программного обеспечения - другими словами, над тем, что видят пользователи. Они проектируют и разрабатывают визуальные аспекты, включая макет, навигацию, графику и другую эстетику. Основная работа этих разработчиков заключается в создании интерфейсов, которые помогают пользователям достигать своих целей, именно поэтому они также часто принимают участие в аспекте пользовательского опыта своих проектов. Серверная разработка Если внешний интерфейс - это то, что видят пользователи, то внутренний - это то, чего они не видят. Серверные веб-разработчики работают на серверах веб-сайтов, программ и ПО, чтобы убедиться, что все работает должным образом за кулисами. Эти разработчики работают с такими системами, как серверы, операционные системы, API и базы данных, и управляют кодом для обеспечения безопасности, контента и архитектуры сайта. Они сотрудничают с интерфейсными разработчиками, чтобы донести свои продукты до пользователей. Фулл-стек разработка Фулл-стек разработчики работают как на интерфейсной, так и на серверной сторонах веб-сайта. Они могут создать веб-сайт, приложение или программное обеспечение от начала до конца. “Стек” относится к различным технологиям, которые управляют различными функциональными возможностями на одном и том же веб-сайте, такими как сервер, интерфейс и т.д. Поскольку разработчикам полного стека требуются годы работы в полевых условиях, чтобы накопить необходимый опыт, эта роль часто востребована. Их всесторонние знания помогают им оптимизировать производительность, выявлять проблемы до их возникновения и помогать членам команды разбираться в различных частях веб-сервиса. Процесс разработки веб-сайта Составьте план Вот несколько вопросов, которые следует рассмотреть перед созданием вашего первого проекта сайта: • Какова цель вашего веб-сайта? • Кто ваша аудитория и что вы хотите, чтобы они делали на вашем сайте? • Какой тип веб-сайта вы создаете? (например, базовый информационный, членский, интернет-магазин) • Какой контент вы планируете публиковать и в каком объеме? • Какова цель этого контента? • Как вы будете структурировать свой веб-сайт для обеспечения наилучшей навигации? • Каков ваш бюджет? Создайте каркас Все хорошие веб-сайты начинаются с чертежа. Разработчики называют это каркасом. Это не обязательно должен быть официальный документ; это просто видение вашего сайта, которое даст вам направление и с чего начать. Вы можете нарисовать его на доске или использовать такой инструмент, как Invision, Slickplan или Mindnode. Каркасы - это строго визуальные инструменты, которые помогут вам понять, где будут размещаться текст и изображения на отдельных веб-страницах. Вы можете использовать пустые поля и “фиктивный текст”, чтобы получить представление о том, как ваш контент будет отображаться во внешнем интерфейсе. Создайте карту сайта Далее пришло время создать карту сайта (не путать с sitemap.XML , представляющий собой XML-файл, который помогает поисковым системам сканировать и находить ваш сайт). Точно так же, как бизнес-план дает потенциальному инвестору представление о ваших целях и результатах, карта сайта предоставляет разработчику информацию, необходимую для реализации вашего видения. Вот несколько вопросов, которые следует задать себе при планировании вашего сайта: • Какие отдельные страницы вы хотите? • Какой контент будет на этих страницах? • Как вы можете упорядочить эти страницы по категориям? • Какова иерархия страниц на вашем сайте? • Как страницы будут связаны между собой? • Какие страницы и категории необходимы для вашего сайта и пользовательского опыта? • Какие страницы или категории можно было бы удалить или объединить. Напишите код вашего веб-сайта Следующим шагом в процессе веб-разработки является написание кода. Разработчики будут использовать разные языки программирования для интерфейса и серверной части веб-сайтов, а также для различных функциональных возможностей сайта (таких как дизайн, интерактивность и т.д.). Эти разные языки работают вместе для создания и запуска вашего сайта. HTML Язык разметки гипертекста (HTML) используется с 1990-х годов. Это основа всех веб-сайтов и представляет собой абсолютный минимум того, что необходимо для создания веб-сайта. Хотя можно создать веб-сайт только с использованием HTML, это выглядело бы не особенно привлекательно. Такие языки, как CSS и JavaScript, улучшают и модифицируют базовую структуру сайта, построенную с помощью HTML-кодов. HTML5 является самой последней версией и поддерживает кроссплатформенную функциональность браузера, что делает его популярным при разработке мобильных приложений. CSS Каскадные таблицы стилей (CSS) были разработаны в конце 1990-х годов. Он добавляет элементы дизайна, такие как типография, цвета и макеты, к веб-сайтам, чтобы улучшить общий “внешний вид” веб-сайтов. CSS позволяет разработчикам преобразовать ваш веб-сайт в соответствии с эстетикой, которую вы представляете для своего сайта, и, как и HTML5, CSS совместим со всеми браузерами. JavaScript JavaScript - это вишенка на торте среди языков программирования. Созданный в середине 90-х годов, JavaScript используется для добавления функциональности к веб-сайтам. Разработчики используют его для добавления анимации, автоматизации задач на определенных страницах и добавления интерактивных функций, улучшающих пользовательский опыт. JavaScript быстро развивается. Когда-то считавшийся “игрушечным” языком, JavaScript в настоящее время является наиболее широко используемым языком программирования в мире. С помощью Node.Js теперь это серверный язык программирования. Это первый язык, понятный браузерам, и некоторые даже обсуждали применение к нему машинного обучения. HTML, CSS, JavaScript - это “большая тройка” веб-разработки. Почти каждый веб-сайт использует их в том или ином качестве. Существует множество других языков, таких как серверные языки, такие как Java, C++, Python и SQL, но понимание этих трех является основополагающим для ваших знаний в области разработки веб-сайтов. Создайте серверную часть вашего веб-сайта Написание кода может быть одной из наиболее сложных частей веб-разработки, но вряд ли это единственный компонент. Вам также необходимо создать структуру и дизайн вашего внутреннего и интерфейсного сайтов. Давайте начнем с серверной части. Серверная часть обрабатывает данные, которые обеспечивают функциональность интерфейса. Например, серверная часть Facebook хранит мои фотографии, так что затем интерфейс может позволить другим просматривать их. Он состоит из двух ключевых компонентов: • Базы данных, которые отвечают за хранение, организацию и обработку данных таким образом, чтобы их можно было получить по запросам сервера. • Серверы, которые представляют собой аппаратное и программное обеспечение, составляющее ваш компьютер. Серверы отвечают за отправку, обработку и получение запросов на передачу данных. Они являются посредниками между базой данных и клиентом/браузером. Браузер, по сути, сообщит серверу "Мне нужна эта информация", и сервер будет знать, как получить эту информацию из базы данных и отправить ее клиенту. Эти компоненты работают вместе, создавая основу для каждого веб-сайта. Что касается создания вашего веб-сайта, разработчики серверной части установят три вещи. • Ваш логический код, который представляет собой набор правил для того, как ваш веб-сайт будет отвечать на определенные запросы и как объекты вашего веб-сайта будут взаимодействовать. • Управление вашей базой данных, то есть то, как ваш веб-сайт будет организовывать, управлять и извлекать свои данные. • Ваша инфраструктура, то есть то, как будет размещен ваш сайт. Размещение вашего собственного сайта даст вам больший контроль, но это намного дороже и требует от вас поддержания работоспособности и безопасности вашего собственного сервера. С внедрением этих компонентов и решений ваш веб-сайт будет готов к интерфейсной разработке. Примечание: Серверная часть немного связана с веб-разработкой, потому что вам не всегда нужен серверный интерфейс, если вы не храните никаких данных. “Данные” в данном контексте означают любую введенную пользователем информацию, которую вам необходимо сохранить. Подумайте о входе на веб-сайт. Если у них нет серверной части, как они могут запомнить вашу регистрационную информацию? Или каковы настройки вашего профиля? Чтобы получить эту информацию, вам нужен серверный интерфейс. Facebook, например, должен знать, какие люди есть в вашем списке друзей, к каким событиям вы присоединились, какие посты вы создали и многое другое. Это все "данные", которые хранятся в базе данных. Если бы у них не было серверной части с базой данных, ни одна из этих данных не была бы им доступна. С другой стороны, веб-сайт, который является чисто информационным и не требует от пользователей ввода каких-либо данных, не нуждается в серверной части. Создайте клиентскую часть вашего веб-сайта Интерфейс важен - это то, что видят ваши посетители, заказчики и юзеры, и как они будут использовать ваш веб—сайт. Интерфейсная (или клиентская) разработка включает в себя комбинацию JavaScript, HTML и CSS. Он также управляет такими компонентами, как типография и шрифты, навигация, позиционирование, а также совместимость с браузером и быстродействие. Эта часть будет в большей степени отражать ваше первоначальное видение сайта и то, что вы включили в свой каркас. По мере изменения технологий и потребительских предпочтений кодирование на стороне клиента, как правило, устаревает гораздо быстрее, чем серверная разработка. Вот где пригодятся ресурсы для кодирования (подобные тем, которые мы включили ниже). |