Web программирование и интернет технологии

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 соответственно). Серверные разработчики пишут логику каким образом будут формироваться сверстанные верстальщиком макеты, а клиентские — как они будет вести себя в браузере.

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

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

Профессия веб-разработчика — одна из самых востребованных на 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, отображаемый во вкладке браузера, но нет никакого наполнения.

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

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

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

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

Рабочая учебная программа по предмету «Web-программирование и интернет-технологии»

При пользовании «Инфоуроком» вам не нужно платить за интернет!

Минкомсвязь РФ: «Инфоурок» включен в перечень социально значимых ресурсов .

Министерство образования и науки Республики Казахстан

ГККП Высшая техническая школа, город Щучинск

Заместитель директора по учебной работе

Рабочая учебная программа

Web -программирование и интернет-технологии

техническое и профессиональное образование

1304000 Вычислительная техника и программное обеспечение (по видам) Квалификация 130404 3 Техник программист

Программа разработана Посметуховой К.Н., преподавателем Высшей технической школы, город Щучинск

Программа рассмотрена и одобрена на заседании методического объединения информационных дисциплин Высшей технической школы, г. Щучинск

Протокол № 1 от 04.09.2015

Рецензенты: Аманбаева А.Г.,

преподаватели Высшей технической школы, город Щучинск

Ответственный за выпуск: Жаманбаева К.М., методист

Рабочая учебная программа по предмету « Web -программирование и интернет-технологии» составлена в соответствии с государственным общеобязательным стандартом образования РК 4.05.046-2008 по специальности 1304000 «Вычислительная техника и программное обеспечение (по видам)», квалификация 1304043 – «Техник программист», типовым учебным планом, утвержденным МО и Н РК 30.12.2013, типовой учебной программой, утвержденной решением УМС Департамента Технического и профессионального образования МОН РК, протокол № 3 от 30.09.2013г. и рабочим учебным планом, утвержденным директором Высшей технической школы.

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

Программа базируется на знаниях студентов по предметам: «Математика», «Физика», «Основы алгоритмизации и программирования», «Операционные системы и пакеты прикладных программ», «Информатика» .

При изучении данной дисциплины реализуются межпредметные связи со следующими предметами: «Численные методы», «Основы высшей математики», «Операционные системы и пакеты прикладных программ», «Технология и разработка программного обеспечения», «Основы микропроцессорной техники», «Основы объектно-ориентированного программирования».

Предмет « Web -программирование и интернет-технологии» изучается в 5 семестре 3 курса. Всего часов 72, в том числе теоретических занятий 38 часов и практических занятий 34 часа. При изучении предмета студенты по итогам семестра сдают экзамен.

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

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

Обоснованное изменение в содержании программного материала, в распределении часов по темам (в пределах 25% общего объема времени, отводимого на изучение предмета), связанных с изучением новых материалов вносятся методическим объединением и утверждаются руководством Высшей технической школы.

Планируемые результаты изучения дисциплины

Результаты обучения, запланированные в Государственном общеобязательном стандарте образования Республики Казахстан по специальности 1304000

Результаты обучения, запланированные в образовательной учебной программе технического и профессионального образования или типовой учебной программе по специальности 1304000

Результаты обучения, запланированные в

рабочей учебной программе

Обучающийся должен обладать следующими компетенциями:

БК 1. Обновлять знания и навыки на уровне современных стандартов образования;

БК 2. Планировать собственные трудовые действия;

БК 3. Знать правовые нормы, регулировать отношения между людьми, к обществу, к окружающей среде;

БК 4. Анализировать социально-значимые проблемы и процессы в профессиональной и социальной деятельности;

БК 5. Оформлять документацию на государственном языке;

БК 6. Проводить экономический анализ профессиональной деятельности;

БК 7. Использовать современные технические средства;

БК 8. Владеть компьютерными методами сбора, хранения и обработки информации;

БК 9. Владеть информационными технологиями

ПК 1. Проводить трансляцию и отладку программы, управлять данными при решении задач;

ПК 2. Осуществлять решение задач из различных областей науки, техники, экономики и производства с применением математических методов и вычислительной техники на всех этапах от постановки до получения результата;

ПК 3. Составлять тесты и производить тестирование программ;

ПК 4. Построить автоматизированные системы обработки информации;

ПК 5. Применять методы и средства защиты программного продукта;

ПК 6. Применять Web -технологии

СК 1. Производить анализ, проектирование и программирование прикладных задач;

СК 2. Разрабатывать и внедрять Интернет-технологии;

СК 3. Моделировать производственные и экономические процессы, методы их решения и анализировать полученные результаты;

СК 4. Внедрять и сопровождать программы и программные средства;

СК 5. Тестировать программы и программные продукты;

СК 6. Выбирать правильные технологии на всех этапах разработки программ;

СК 7. Организовать защиту данных.

В результате изучения дисциплины обучающийся должен

Основные теги языка

Теги форматирования текста

Создание маркированных, нумерованных списков

Организационную структуру документов

Тег добавления изображений

Таблицу каскадных стилей

Область применения J ava Script.

Принципы и структуру J ava -скриптов

Функции и сценарии

Алгоритм работы операторов условия

Алгоритм работы циклов

Создавать структуру документа

Применять основные теги языка

Использовать теги для форматирования документа

Использовать элемент DIV

Создавать структуру сайта фиксированного дизайна

Создавать структуру сайта резинового дизайна

Подключать JS файлы

Применять функции и сценарии

Работать с операторами условий

Применять операторы цикла

Работать с массивами

В результате освоения дисциплины обучающийся должен

о языке разметки гипертекста HTML

общие сведения о клиентском языке программирования JavaScript

Каскадные таблицы стилей

Основные теги языка HTML

Синтаксис клиентского языка программирования JavaScript

Создавать HTML- страницы

Применять CSS- стили

Писать скрипты с помощью клиентского языка программирования JavaScript

Создания интерактивности web-страниц

Написания скриптов на клиентском языке программирования JavaScript

Наименование разделов и тем

Раздел 1. HTML. Язык разметки гипертекста

Основы HTML . Основные понятия, структура

Форматирование документа, символов, списки

ПР1. Создание HTML -страниц

Графика на web -странице, гиперссылки, таблицы

ПР2. Создание HTML -страниц

ПР3. Использование графики на web -странице, ссылки

Формы, основные элементы

ПР4. Создание форм

Раздел 2. Таблица каскадных стилей CSS

Основы CSS . Основные понятия

Форматирование шрифта, текста, отступы, рамки

ПР5. Применение CSS

Фон элемента, списки, псевдостили гиперссылок

ПР6. Div -ная верстка

ПР7. Div -ная верстка

Раздел 3. Клиентский язык программирования JavaScript

Основы JavaScript . Взаимодействие с пользователем

Переменные, типы данных, операторы. Преобразование типов данных

Инструменты и технологии 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.

10 современных веб-технологий, о которых вы должны знать

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

Web Components

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

На официальном сайте Web Components доступно множество практических примеров, но очень мало пояснений того, где они могут пригодиться.

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

Polymer

Когда вы познакомитесь с Web Components , вам может понадобиться библиотека Polymer . Этот проект с открытым исходным кодом запустил Google . Он предназначен для создания стандартизированных веб-компонентов.

Эта библиотека упрощает разработку, если вы работаете с Web Components API . С ее помощью вы получите встроенные элементы для добавления таких функций, как видео, слайдеры и даже виджеты Google Maps .

Целью Polymer является создание модульной структуры. Вот почему она позволяет создавать собственные виджеты на основе Web Components API . Таким образом появляется возможность добавить несколько виджетов на одну страницу без повторной записи кода.

Библиотека Polymer неразрывно связана с Web Components , и две эти технологии значительно изменяют методы модульной разработки сайтов.

Google всегда пытается улучшить интернет. Проект Accelerated Mobile Pages ( сокращенно AMP ) позволяет адаптировать любую веб-страницу для мобильных устройств по стандартному шаблону.

Нужно просто добавить небольшой код на свою страницу и позволить Google сделать все остальное. Если ваш сайт AMP-оптимизирован , он будет загружаться быстрее. Таким образом, сайт будет больше похож на оригинальное приложение.

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

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

TypeScript

Google недавно утвердил TypeScript в качестве предпочтительного языка для своего front-end фреймворка AngularJS . Это делает TS еще более привлекательным, потому что он помогает сэкономить время, как при написании общих скриптов, так и при разработке специализированных Angular-проектов .

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

Three.js

Если вы следите за тенденциями WebGL и 2D / 3D веб-графики , то должны знать о Three.js . Это самый мощный движок рендеринга на основе JS , который можно использовать для веб-графики.

Немногим сайтам нужна 2D или 3D графика. Но количество таких сайтов увеличивается, и это одна из лучших JavaScript-библиотек , которые можно использовать для создания элементов холста и диаграмм данных.

Лучшее в Three.js это то, что данная библиотека является бесплатным инструментом с открытым исходным кодом, поэтому она постоянно совершенствуется вместе с WebGL API .

Docker

С помощью контейнерной платформы Docker можно поддерживать полную виртуальную среду и легко переносить сайты на разные серверы. Виртуальные контейнеры содержат интерфейсы для простой передачи файлов с одного сервера на другой.

Если вы являетесь приверженцем IT / DevOps , тогда Docker — это обязательная для вас технология. В последнее время данная веб технология начала набирать популярность.

Ionic Framework

Это бесплатная платформа с открытым исходным кодом для разработки мобильных приложений под iOS и Android . Каждое приложение пишется на оптимизированном коде. Поэтому можно создавать программное обеспечение на JavaScript , но конечный результат будет выглядеть как оригинальное мобильное приложение Swift / Java .

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

Библиотеки Zurb

Фреймворк Foundation — невероятно мощный инструмент. В последнем релизе разработчики выделили веб-фреймворк из Foundation for Emails , который теперь поддерживает автоматизацию и шаблоны для email-разработки.

Но еще больше мне нравится их новый Motion UI , предназначенный для создания анимации « на лету ». Можно создавать анимацию с помощью онлайн-инструмента Zurb и включать библиотеку Motion UI в любой проект на Foundation .

Google Web Starter Kit

Google предлагает множество полезных технологий веб разработки, и одной из них является Web Starter Kit . Это библиотека полезных ресурсов для создания сайтов, модульного кода Sass / CSS , локальных HTTP-серверов и многого другого.

Предполагается, что Web Starter Kit предоставляет все основные компоненты, которые потребуются веб-разработчику. Это стартовый набор, который является отличным бесплатным решением для начинающих разработчиков.

Данная публикация представляет собой перевод статьи « 10 Modern Emerging Web Technologies You Should Know About » , подготовленной дружной командой проекта Интернет-технологии.ру