Актуальные технологии программирования сайтов

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

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

Для самого простого сайта надо знать HTML, CSS и, желательно, JavaScript.

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

Чтобы стало более понятно, давайте разберемся, что же всё это такое и как всё это развивается с течением времени.

HTML и CSS

HTML (от англ. HyperText Markup Language – язык разметки гипертекста; произносится эйч-ти-эм-эл) – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML или XHTML. Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме (http://ru.wikipedia.org/wiki/HTML).

Пример HTML-кода:

<p class="menu">
<ul>
    <li><a href="/index.php?module=catalog&amp;op=cat&amp;catid=5">SPA</a></li>
    <br />
    <li><a href="/index.php?module=catalog&amp;op=cat&amp;catid=27">SPA ванны</a></li>
    <br />
    <li><a href="/index.php?module=catalog&amp;op=cat&amp;catid=3">Уход за волосами</a></li>
    <br />
    <li><a href="/index.php?module=catalog&amp;op=cat&amp;catid=1">Уход за лицом</a></li>
    <br />
    <li><a href="/index.php?module=catalog&amp;op=cat&amp;catid=4">Уход за руками/ногами</a></li>
    <br />
    <li><a href="/index.php?module=catalog&amp;op=cat&amp;catid=2">Уход за телом</a></li>
</ul>
</p>

Этот «тарабарский» текст отображает на сайте отмеченную область:

Рис. 1. Отображение HTML-кода

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

Пример CSS-кода:

.header ul {list-style:none; position:absolute; right:14px; top:0}
.header ul li {float:left; padding:0 5px 0 0}
.header ul li a {display:block; color:#fff; text-decoration:none; line-height:14px; width:120px; text-align:center}

В нем речь идет о том, каким цветом и в какой части страницы надо отобразить то самое меню, отмеченное на рисунке 1.

Как и всякая технология или язык, HTML развивается. Версия HTML 4.01 стала стандартом в 1999 году и господствует уже более 10 лет. Но ее очень скоро потеснит HTML 5.0 – новая версия языка гипертекстовой разметки.

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

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

РНР и MySQL

Таких языков много, но наиболее популярным на территории России является РНР. Именно на этом языке написано подавляющее большинство российских сайтов. Как HTML идет рука об руку с CSS, так и РНР лучше всего работает совместно с MySQL.

PHP (англ. PHP: Hypertext Preprocessor – препроцессор гипертекста; первоначально Personal Home Page Tools – инструменты для создания персональных веб-страниц; произносится пи-эйч-пи) – скриптовый язык программирования общего назначения, интенсивно применяемый для разработки веб-приложений. В настоящее время поддерживается подавляющим большинством хостинг-провайдеров и является одним из лидеров среди языков программирования, применяющихся для создания динамических веб-сайтов (http://ru.wikipedia.org/wiki/PHP).

MySQL (МФА: [maɪ ˌɛskjuːˈɛl]) – свободная реляционная система управления базами данных (http://ru.wikipedia.org/wiki/MySQL).

Как развитие РНР и MySQL влияет на владельцев сайтов?

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

Единственное, что радует в такой ситуации, – современные реалии требуют принципиального обновления сайта раз в 2–3 года, а это значит, что, скорее всего, и система администрирования тоже обновится, а следовательно, сайт будет работать на новых версиях РНР.

AJAX

Еще одно понятие, которое стало очень популярно в последнее время, – AJAX.

AJAX (ˈeɪdʒæks, от англ. Asynchronous Javascript and XML – асинхронный JavaScript и XML) – подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью и веб-приложения становятся быстрее и удобнее (http://ru.wikipedia.org/wiki/AJAX).

Ничего принципиально нового в элементах, составляющих эту технологию, нет. Новшество состоит в подходе использования. Благодаря нестандартному подходу, реализуемому в AJAX, сайты приобрели большую степень интерактивности. Такие вещи, как динамические фильтры, контент, подгружаемый «на лету», слайдеры… Все это кажется уже совсем привычным и родным, но вошло в нашу виртуальную жизнь совсем недавно.

Посмотрите примеры использования современных технологий на сайтах:

http://www.joe-san.com/
http://minhabencao.com.br
http://boutique.brigitte-bardot.fr

Еще примеры вы можете найти на http://www.awwwards.com

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

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

Существует великое множество систем администрирования, которые распространяются как на бесплатной, так и на платной основе. Все они имеют свои преимущества и недостатки.

Один из самых популярных вопросов, которые я, как разработчик, слышу от владельцев салонов: «Какую систему администрирования выбрать?»

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

Вывод

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