Skip to content

Введение в веб-технологии

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

Создание сайта

Разработка веб-приложения, на примере веб-сайта включает в себя ряд взаимосвязанных этапов:

  1. Планирование и прототипирование
  2. Разработку дизайна (веб-дизайн страниц)
  3. Верстку с дизайн-макетов
  4. Веб-программирование
  5. Настройку веб-сервера и тестирование

Если выполняется только верстка и сайт представляет из себя набор страниц формата .html, то такой веб-сайт принято называть — статический. Но если в страницы добавлено программирование на каком-нибудь серверном языке, то этот сайт уже является — динамический.

Так какая разница между статичным и динамичным сайтом?

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

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

Да! Достаточно только язык разметки HTML и для художественной свободы в оформлении дизайна — технологии CSS.

HTML — язык разметки информации на страницы по средствам тегов — специальных символов, которые понимает браузер (веб-обозреватель) и при рендере (отрисовке, построении) страницы и поведение этих элементов зависит строго от применяемых тегов согласно спецификации W3. Это справедливо и для технологии CSS, которая дополняет HTML и позволяет задавать правила для каждого элемента на страницы.

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

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

Назначение интернета

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

Если вам необходимо как то обозначить свой товар или услугу в сети, то совсем не обязательно использовать для этого дорогой хостинг и «напичканную» , ресурсозатратную CMS. Если вы владеете HTML, CSS, то этих знаний будет достаточно для создания полноценного Landing Page — страницы на которой вы сможете представить свой товар или услугу. Не стоит забывать и о бесплатных возможностях, таких, например, как сервис wix.ru , wordpress.com .

Серверные языки программирования

PHP

 

Python

На самом деле серверных языков программирование приличное количество, которое не ограничивается языком PHP на котором собственно и написана CMC WordPress. Одни из самых популярных это:

  • PHP
  • Python
  • .NET
  • Ruby
  • Perl

При хорошем знании и навыке использования языка, а на это уйдет несколько лет, перед вами открывается возможность построения веб-приложений. Часто функционал приложения чем то схож с уже подобным функционалом, который задействован на других ресурсах, ну например публикация страниц на сайте через интерфейс, или регистрация и роли пользователей, или рубрикация на сайте и создание меню. Согласитесь, что писать функционал с нуля для каждого сайта это бесконечная груда работы, повторяющихся действий… вот именно поэтому вы однажды задумаетесь о неких заготовках функций, которые будет удобно применять в последующих разработках, верно? Радуйтесь! Об этом уже подумали, на эти «грабли» наступили уже до вас!

FRAMEWORK (каркас)

В мире веб-разработки существует достаточно большое количество этих самых заготовок, которые экономят ваши силы, нервы и время 🙂

django-logo-positive

 

Ruby_on_Rails-logo

 

ZendFramework-logo

Одни из самых популярных в мире PHP (написаны на нем) являются:

  • Yii
  • Kohana
  • CodeIgniter
  • Zend Framework
  • CakePHP
  • Symfony

Например, язык «Phyton» представляет «Django», «Ruby» — популярный фреймворк «Ruby on Rails».

Чем сложней в конструкциях и развертывании приложения фреймворк, тем естественнее будет дороже на нем разработка, в силу определенного дефицита специалистов. А вот уже, например, из фреймворка мы можем получить готовый продукт, например, CMS. Вот и добрались мы до этой аббревиатуры!

Друпал

 

ВордПресс

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

Но что если наша CMS имеет в себе еще ряд заготовленных функций для ее расширения? К таким продуктам смело можно отнести «Drupal» и «WordPress», в обеих CMS есть в арсенале прекрасная документация для разработчиков, то следовательно справедливо добавить к аббревиатуре CMS, аббревиатуру — CMF (Content Management Framework). Поэтому как CMS WordPress, так и CMS Drupal имеют полное право использовать двойную аббревиатуру — CMS/CMF, наличие второй предполагает смысл того, что оба продукта уже выступают в роли системы управления содержимым сайта, а так же могут с помощью своей документации расширяться под нужды разработчика.

Контрольные вопросы

  1. Какая разница между статическим и динамическим сайтами?
  2. Для чего нужен HTML, CSS?
  3. Приведите пример серверного языка программирования, его отличие от HTML?
  4. Что такое FRAMEWORK? Примеры фреймворков.
  5. Чем отличается аббревиатура продукта CMS от CMF? 
Логотип компании Axoft
Логотип компании Timeweb
Логотип компании Ozon
Логотип компании Nethouse
Логотип компании CreativeMarket
Логотип хостинг-компании Pressjitsu