Технологии web программирования

Инструменты и технологии WEB-программирования

Известно немало технологий Web-программирования. Мы рассмотрим самые популярные из тех, на которых основывается подавляющая часть сайтов. Впрочем, простота этих технологий отнюдь не свидетельствует о их несовершенстве. Но сначала приведём основные термины, применяемые в Web-программировании.

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

Сервер — мощный компьютер в сети, который обрабатывает запросы от персональных компьютеров, соединённых с ним линиями связи.

Web-хостинг — сервис для Web-программистов. Суть его такова: программист создаёт текстовые файлы с расширением *.html, *.php или другие и размешивает их на компьютере в сети (такой компьютер называется сервером) по договору с владельцем данного сервера (что называется хостер). Хостер (владелец сервера) присваивает директории на сервере, предоставленной им для этого программиста, доменное имя, по которому каждый пользователь Интернет может просматривать эти файлы путём набора доменного имени в адресной строке Web-браузера.

Web-сервер — это приложение, установленное на компьютере в сети (на сервере), который анализирует код файла, написанного Web-программистом и размещённого в одной из папок этого сервера. На основании анализа Web-сервер формирует код, который отправляет по сети Web-браузера. Существует немало видов Web-серверов, но мы рассмотрим самый популярный из них: Apache.

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

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

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

Языки сценариев. Это языки программирования, не требующие компилятора кода, нужен только интерпретатор, который обрабатывает код и выдаёт ту же HTML-страницу. Существуют серверные (интерпретатор языка установлен на сервере) и клиентские языки сценариев. Интерпретатора клиентского языка как самостоятельной единицы не существует, он встроен в Web-браузер. Мы рассмотрим наиболее мощные, популярные и простые языки сценариев: клиентский javascript и серверный язык РНР. javascript служит для повышения динамичности Web-страниц. РНР обеспечивает обмен данными между клиентским Web-браузером и Web-сервером, обработку запросов, присланных браузером, на сервере и выдачу данных по запросу браузера.

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

Система управления базами данных (СУБД) — приложение, предназначенное для создания баз данных (БД) и операций над этими данными. Как правило, СУБД устанавливают на одном сервере с Web-сервером и интерпретатором языка сценариев (но не обязательно). Мы рассмотрим СУБД MySql.

MySql – язык запросов. Это весьма просто язык, который предусматривает небольшой список операторов для работы с БД.

Система доступа владельца сайта к БД, размещённого на сервере хостера — приложение, предназначенное для доступа (управления) администратора (владельца) сайта своими базами данных на хостинге через Интернет. Устанавливают её на сервере хостера.

Ещё 10 лет назад создание качественных Web-страниц в большинстве случаев не требовало практически ничего, кроме совершенного владения языком разметки гипертекста (Hypertext Markup Language, HTML). HTML является простым языком форматирования текстов. С его помощью путём набора тегов (tags) создаётся документ, который можно просматривать специальной программой просмотра (браузер). Так, HTML-код создаёт простую Web-страницу.

Пример 1. Исходный код простой Web-страницы:

My First Web Page

JIacKaB0 прошу на мою першу Web-сторінку!

HTML — это не язык программирования, как С++ или Visual Basic; он больше похож на средство форматирования документов с использованием управляющих последовательностей форматом. Кодирование на HTML часто сравнивают с созданием документа в формате Microsoft Word введением кода форматирования прямо в Notepad. Очевидно, что функциональность здесь крайне ограничена.

У HTML очень ограниченные возможности для взаимодействия. Стандартный HTML удовлетворяется статическими Web-страницами с текстом, рисунками и ссылками на другие страницы. Разумеется, HTML обеспечивает определённую интерактивность с помощью встроенных элементов управления (intrinsic controls) — тех самых полей ввода, которые обычно присутствуют в HTML-формах. Простые формы можно создать, например, с помощью тега . Ter предусматривает применение текстовых полей (text boxes), флажков (check boxes), переключателей (radio buttons) и кнопок (buttons).

Пример 2. Исходный код HTML-формы, которая содержит текстовые поля ввода для имени, номера телефона и адреса электронной почты:

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

HTML является обычным текстом, поэтому поначалу большинство разработчиков писали свои программы непосредственно в текстовых редакторах, таких как Notepad. С течением времени разработчики предложили графические средства разработки, например, Microsoft FrontPage, позволяющий создавать Web-страницы без особого знания HTML. Эти графические редакторы позволяют непосредственно макетировать Web-страницы без лишних хлопот с тегами. К сожалению, использование таких графических редакторов имеет серьёзный недостаток: у разработчиков создаётся впечатление, будто им не надо изучать синтаксис и теги HTML. Если вы даже ничего больше не вынесете из этого краткого введения в HTML, то запомните хоть одно: чтобы быть настоящим Web-разработчиком, вы должны знать HTML! Навыки редактирования страницы непосредственно в виде исходного текста дают возможность достижения желаемого эффекта независимо от того, поддерживает ли его ваш любимый графический редактор. Кроме того, код, созданный вручную, всегда более компактный и аккуратный, что в значительное степени влияет на скорость загрузки страницы.

В Web-программировании используют следующие технологии: HTML, XML, DHTML, CSS, OLE/COM, ACTIVEX, DCOM, COM+, COM.NET, Corba, WAP, J2EE, SQL, ADO, ADO.Net, ADOCE, ADOX .Net Compact Framework, языки программирования: C, C ++, ASP, ASP.NET, VB.Net, C #, PHP, Perl, ColdFusion, Python, CGI, javascript, VBScript, JScript, ActiveScript (Flash), базы данных: MS SQL Server, MS Access, MYSQL, POSTGRESQL, Oracle, Informix, DB2, Sybase, Paradox, InterBase, LotusNotes, DBase, FoxPro, FoxBase, Clarion и Web-серверы: MS Internet Information Server (MS IIS), Apache, WebSphere, Tomcat Apache.

В области языков Web-программирования есть две важнейшие категории:

1. языки, выполняемые непосредственно на Web-сервере. Это, в частности, PHP, Perl;
2. языки, выполняемые на стороне клиента (браузером пользователя сети Интернет и интерпретаторами на компьютере пользователя). Это такие языки, как javascript.

Как видно из названия, клиентские языки обрабатываются на стороне пользователя. Отсюда и недостаток — обработки скрипта зависит от браузера пользователя, и пользователь имеет полномочия строить свой браузер так, чтобы он вообще игнорировал написанные вами скрипты. Если браузер устарел, он может не поддерживать тот или иной язык или его часть, на которую вы опираетесь. С современными браузерами таких проблем возникать не должно, к тому же языки программирования не так уж часто кардинально обновляются (раз в несколько лет) и лучшие из них давно известны. Код клиентского скрипта может посмотреть каждый, выбрав в меню «Вид» своего браузера вкладку «Исходный код» или нажав комбинацию клавиш «CTRL+U».

Преимущество клиентского языка заключается в том, что обработку запросов можно выполнять без отправки документа на сервер. Это легко объяснить на примере: скажем, вам нужно проверить, правильно ли пользователь ввёл e-mail (т. е. проверить наличие «@»); чтобы это сделать, пользователю пришлось бы отправить форму с заполненными данными, потом дождаться, пока она будет обработана, и только после этого получить сообщение об ошибке (если она, конечно, присутствует). Процесс очень долгий. Зато с клиентским языком программа сразу проверит правильное заполнение формы перед отправкой, и если необходимо, выведет ошибку. Отсюда вытекает и то ограничение, что с помощью клиентской языка программирования ничто не может быть записано на сервер, то есть, например, с её помощью можно нельзя сделать гостевую книгу, потому что тогда придётся записывать сообщения в какой-то файл на сервере.

Необходимо также понимать разницу между языком программирования и фреймворком. Язык программирования — это просто определённый базовый синтаксис (возможно, со стандартными библиотеками), с помощью которого можно создавать приложения. Фреймворк обеспечивает программиста различными библиотеками, что значительно упрощают создание программ и сайтов. Некоторые языки и фреймворки есть неразрывным целым (например, ASP.NET и JSP). Другие языки могут использоваться без фреймворка (PHP и Perl).

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

Самым распространённым клиентской языком является javascript, разработчиками которого является компания Netscape совместно с компанией SunMicrosystems. Другой вариант клиентского языка – Visual Basic Script (VBS).

Другие популярные клиентские языки, а точнее, фреймворки — это Adobe Flash (язык ActionScript) и SilverLight. Adobe Flash применяется Web-мастерами очень давно. Главное применение этой технологии — интерактивные сайты и сервисы, онлайновые игры, мультимедийный контент и реклама. SilverLight – это относительно новая технология, разработанная компанией Microsoft, которая призвана заменить Adobe Flash. Хотя с помощью Adobe Flash или SilverLight можно построить весь сайт целиком, так делать не следует (за редким исключением). Дело в том, что поисковики пока не умеют индексировать ни Adobe Flash, ни SilverLight.

Как стать веб-разработчиком с нуля

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

Текст подготовлен на основе вебинара «Как стать веб-разработчиком с нуля за3 месяца» с участием Михаила Овчинникова из компании Badoo.

Ситуация на рынке

Рассматривая общую картину рынка, можно выделить наиболее востребованные направления в IT-сфере:

1. Frontend — самая «громкая» и быстроразвивающаяся отрасль, в которой постоянно меняются тренды. Опирается на язык программирования JavaScript и его фреймворки, такие как Angular.js, React.js, Vue.js и другие, а также язык разметки гипертекста HTML и таблицы стилей CSS.

2. Web-development, а именно backend-разработка с использованием различных языков, например, PHP, Ruby и Python.

3. Android/iOS-development — разработка под мобильные устройства на языках Java, Swift, Objective-C, C# (Xamarin), JavaScript (React Native) и других.

4. .NET-development — разработка как десктопных приложений под операционную систему Windows на языке C#, так и серверных программ, в том числе веб-сайтов, с использованием технологии ASP.NET.

5. Java-development — разработка кросс-платформенных приложений на языке Java, а также крупных высокопроизводительных систем с использованием технологии Java EE. Ее выбирают, когда нужны надежность, масштабируемость и гибкость.

6. Game development — разработка игр под различные платформы.

7. UI/UX — проектирование пользовательских интерфейсов.

8. QA — обеспечение качества программного обеспечения и его тестирование.

9. Embedded development — разработка программного обеспечения под «железо»: автомобили, бытовую технику и различные устройства с использованием низкоуровневых языков, таких как C и C++ со вставками ассемблера соответствующего процессора.

Почему стоит идти в веб

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

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

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

Сколько зарабатывает веб-разработчик

Изучив сайты поиска работы, можно увидеть весь диапазон зарплат веб-разработчиков. Новичок, у которого меньше полугода опыта, может зарабатывать от30 000 до60 000 рублей. Средний специалист с хорошим стажем получает80 000–150000 рублей. Доход профессионала составляет150 000–250000 рублей. Вдобавок, многое зависит от страны, региона, выбранного языка и компании, предлагающей вакансию.

Что нужно знать веб-разработчику

Про веб-разработку и программирование бытует множество слухов и стереотипов. Мы поговорим в том числе и о них.

Что веб-разработчику не требуется:

1. Знать математику — большинству программистов, которые профессионально занимаются созданием сайтов и веб-сервисов, достаточно знаний на уровне5 класса.
2. Иметь глубокие знания английского языка. Полсотни слов может вполне хватить.
3. Учиться несколько лет и заканчивать институт, чтобы освоить базовую веб-разработку. На деле ее освоение займет два-три месяца обучения.

Что понадобится для успешного старта:

1. Изучить базовые технологии создания сайтов — HTML и CSS — и понять принципы построения структуры сайтов. На это уйдет несколько недель.
2. Освоить сопутствующие технологии: редакторы кода либо IDE (интегрированные среды разработки), например Notepad++, Sublime Text, Brackets, WebStorm, PHPStorm. Эти инструменты сильно ускорят процесс разработки.
3. Знать о существовании фреймворков и готовых решений, которые упрощают и улучшают код. Например, для frontend-разработчика это фреймворк для верстки Bootstrap, библиотека языка JavaScript — JQuery, с помощью которой написано множество других полезных и нужных библиотек, и Simfony — PHP-фреймворк общего назначения, который облегчает взаимодействие с базой данных, задачи формирования HTML-кода и задачи принятия данных из запроса.
4. Не менее важно и умение правильно составлять поисковые запросы, пользоваться качественными и проверенными источниками информации.

Структура веб-сайта

Для начала давайте выясним что такое сайт и из чего он состоит.

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

Например, если бы наш сайт имел домен mysite123.com, то и папка, в которой он лежит, называлась бы так же и имела примерно такую структуру:

Когда в адресной строке браузера мы вводим адрес, например, yandex.ru, браузер обращается к серверу соответствующего сайта. Это то, с чего начинается взаимодействие с любой страницей в сети.

В ответ на этот запрос на сервере yandex.ru начинают работать backend-технологии, например, PHP и MySQL. Они делают свою «серверную магию» и в ответ на запрос «покажи мне главную страницу» отдают обратно браузеру искомую страницу в виде HTML, CSS и JavaScript-кода. Браузер умеет распознавать этот код и в результате выводит в своем окне красивую, работающую «Главную».

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

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

HTML и CSS:

• htmlbook.ru — самоучитель по HTML4, а также введение в HTML5, самоучитель CSS, введение в CSS3;
• htmlacademy.ru — интерактивный курс по HTML5, основы CSS, множество бесплатных уроков;
• webref.ru — самоучитель HTML, основы CSS, блочная модель CSS, текст в CSS, позиционирование в CSS, продвинутый CSS;
• «Погружение в HTML5» Марка Пилгрима.

JavaScript:

• learn.javascript.ru — самый современный самоучитель по JavaScript;
• «JavaScript. Подробное руководство» Дэвида Флэнагана.

После освоения этих технологий рекомендуется также изучить JQuery — самую популярную библиотеку JavaScript. В дальнейшем стоит познакомиться и с такими полезными библиотеками, как Slick, Owl Carousel, Magniffic Popup, Velosity.js, Tree.js и другими.

Для ускорения написания кода и удобной работы с ним советуем использовать текстовые редакторы, такие как Sublime Text с плагином Emmet, редактором Notepad++, Brackets, IDE WEBStorm, PHPStorm и другими полезными инструментами.

Для ускорения написания CSS-кода полезно будет научиться работать с препроцессорами CSS, такими как Scss, Sass, Less.

Создаем простую веб-страницу

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

Воспользуемся текстовым редактором Sublime Text3 и создадим в нем новый файл index.html.

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

Добавим несколько элементов. Для каждого из них есть свой тег. Для начала создадим заголовок и дополним его текстом и кнопкой.

Для добавления заголовка используется тег

, для параграфа текста — тег

, а для кнопки — тег . Поместим эти элементы внутри блока с тегом .

Языки программирования и технологии для веб-разработки

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

В последние годы, когда сеть продолжает развиваться, появилось несколько различных потоков веб-разработки:

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

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

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

CSS / HTML

Рука об руку с JavaScript идут CSS и HTML — вместе они составляют святую троицу разработки веб-интерфейса. HTML (Hyper Text Mark Up Language) — это язык веб-браузеров — с помощью которых сделаны сайты. CSS (каскадные таблицы стилей) заставляет их выглядеть стильно и со вкусом — гораздо лучше, чем те ужасные сайты, действующие с первых дней работы в Интернете. Для разработчиков веб-интерфейсов очень важно знать эти инструменты от и до. Они также окажутся полезными для backend разработчиков: вы сможете понять, как изменения вашей серверной части влияют на конечного пользователя.

PHP — это скриптовый язык, используемый для быстрого создания динамических веб-страниц. Отличный выбор для frontend и backend разработчиков, чтобы добавить их в арсенал (но особенно для последних), он стоит за такими веб-гигантами, как WordPress и Facebook. PHP позволяет быстро и легко расширять веб-приложения и запускать веб-сайты с повторяющимися серверными задачами (например, обновлять новостные ленты). Он имеет открытый исходный код и очень популярен в среде начинающих компаний, медиа-агентств и электронной коммерции — таких людей, которые часто нанимают новых веб-разработчиков. А ещё, это любимый язык программирования автора этого блога, и да, у нас вы можете изучить PHP бесплатно!

Для full stack разработчиков и на стороне сервера SQL (Structured Query Language) — это вишня на торте вашего разрабатываемого инструментария. SQL является важной частью веб-разработки, что позволяет получать конкретные данные из больших, сложных баз данных. Он пользуется большим спросом среди крупных компаний, таких как Microsoft, поэтому это умный выбор для любого разработчика с высокими амбициями или необходимость, если вы работаете с базами данных на регулярной основе. На нашем сайте вы также можете найти бесплатный курс MySQL для начинающих.

JavaScript

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

Python

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

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

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

Масштабируемая, простая и сверхбыстрая, Ruby и Ruby on Rails — это дуэт мечты, который предлагает язык full stack, а также рамки для быстрого создания полных программ. Любимый среди предпринимателей и начинающих, Ruby имеет широкий выбор сторонних «драгоценных камней» (надстроек), которые могут заставить его делать практически все, что вам нужно. Twitter и Basecamp используют Ruby — неплохой показатель, не так ли?

Главная цель, правильно поставленная и действующая с 1979 года, C ++ — объектно-ориентированный, очень технический язык. Чрезвычайно мощный и с обширными библиотеками, это один из краеугольных языков backend развития. С++ особенно полезен для высокопроизводительных программ и программ с большим количеством шаблонов. Если вы уже знаете C (или если вы изучили C ++ и хотите повернуть свою голову на C), вы уже находитесь на правильном пути.

Подобно C++, C — старый школьный язык, легко скомпилированный. Это часто используемая платформа программирования, которая предлагает элементы построения для других языков, таких как C ++, Python и Java. Фактически, многие из этих языков основаны на C. Отличный вариант для full stack и тех, кто хочет добавить новое измерение в свой набор навыков (или метафорическое силовое упражнение в свою панель инструментов программирования). Он лучше всего подходит для написания системного программного обеспечения и приложений, гарантируя удобный язык для разработчиков, на котором все привыкли работать.

polyblog

Технологии и дзен

Веб-технологии для чайников

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

Браузеры

То, что многие люди ошибочно называют «интернет», на самом деле интернетом не является. Если вы думаете что синий ярлычок с буковкой «e» на рабочем столе — это интернет, то вы ошибаетесь. На самом деле эта программа называется «браузер» (browser). На сегодняшний день самыми популярными браузерами для ПК являются «Internet Explorer», «Google Chrome», «Mozilla Firefox» и очень популярная в России и нигде более — «Opera». На компьютерах разработанных компанией Apple преобладает их собственный браузер «Safari», разработанный на том же движке, что и «Google Chrome», под названием «Webkit».

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

Интернет

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

Веб-Сервер

Это слово знакомо многим, но не все знают что это такое. По сути веб-сервером является компьютер, который соответствующим образом настроен и на котором установлена специальная программа: тоже веб-сервер. На данный момент самыми популярными программами веб-серверами являются «Apache», «nginx» и «IIS» от компании Microsoft.

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

На серверах как раз лежат те самые сайты, по которым мы с вами «ходим». Сайт — это просто набор файлов, программа, которая написана на веб-языках программирования.

Клиент

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

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

Доменное имя

Доменное имя, это тот адрес, который вы вводите в адресную строку браузера, чтобы попасть на сайт. Она располагается наверху. Чтобы проще было понять, считайте что домен — это имя сайта. Выглядит оно примерно так: trali-vali.example.ru, где «ru» — это домен 1го уровня, «example» — домен 2го уровня, а «trali-vali» — домен 3го уровня. Все уровни разделены точками. Уровней может быть сколько угодно.

Основные сайты, как правило, располагаются на доменах 2го уровня (yandex.ru). А их «дочерние» сайты находятся на субдоменах, на доменах 3го уровня (mail.yandex.ru).

Так же этот блог располагается на субдомене сайта веб-студии polycreative.ru.

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

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

Правила CSS подключаются к сайту с помощью специальных тэгов в HTML в виде отдельных файлов или прописываются напрямую в структуре странички.

JavaScript

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

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

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

PHP, Python, Ruby, Perl и другие серверные языки

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

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

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

Так же все серверные языки умеют общаться с Базами Данных.

Базы Данных

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

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

Дизайн

Ну и напоследок про дизайн. Ни один сайт не обходится без дизайна. Дизайнеры рисуют свои макеты в Photoshop или где им удобно, а затем отправляют эти файлы верстальщикам, которые с помощью HTML и CSS эти макеты верстают, предварительно нарезав в том же Photoshop. Затем подключаются серверные и клиентские программисты (back-end и front-end соответственно). Серверные разработчики пишут логику каким образом будут формироваться сверстанные верстальщиком макеты, а клиентские — как они будет вести себя в браузере.

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