Вступление Знакомство с основами веб-разработки

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

На самом деле, есть два основных типа «движков» - CMS и CMF:

Система управления содержимым (контентом) (англ. Content management system, CMS) - информационная система или компьютерная программа, используемая для обеспечения и организации совместного процесса создания, редактирования и управления контентом (то есть содержимым).

Content Management Framework (CMF) — это каркас (фреймворк программной системы) для проектирования систем управления контентом. На их основе создаются системы управления содержимым (CMS), а также веб-приложения.

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

Обратите внимание, что CMF/CMS могут быть как платные (1С-Битрикс, NetCat, UMI.CMS и т.д.), так и бесплатные (Joomla!, Drupal, WordPress, MODX и т.д.).

Вообще, в процессе обучения мы будем использовать только бесплатные программы.

Как вы уже, наверное, догадались, я буду учить работать с CMF MODX Evolution. Почему я выбрал именно этот движок? Это сложный вопрос, на который можно ответить примерно так: это любовь с первого взгляда. Уверен, эта CMF вам тоже понравится.

Вообще, в данный момент MODX представляет две независимые и несовместимые, хотя и очень похожие, ветки - Evolution и Revolution.

Revolution более молодая, более мощная, более соответствующая требованиям к CMF. Но и более требовательна к ресурсам хостинга. Эта ветка предпочтительна тем, кто знаком с программированием, в частности на php.

Evolution менее требовательна к ресурсам сервера, работает на серверах с ОС Linux или Windows с поддержкой PHP и MySQL, идеально подходит для 99% интернет-проектов. Легко осваивается. А большое количество готовых дополнений позволяет создавать сайты даже без знаний программирования. Предпочтительна для новичков.

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

В планах MODX выпуск нового продукта MODX3, который, надеемся, объединит в себе лучшие наработки из обеих веток и добавит новые возможности. Но, я уверен, что и тогда Evolution будет оставаться популярной и востребованной, как легкий и функциональный инструмент, практически на все случаи.

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

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста»; произносится эйч-ти-эм-эл) — стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки.

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

От профессионального веб-разработчика потребуются и знания PHP:

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

Но на начальном этапе это будет не нужно. Существует огромное количество готовых решений, которые вы сможете использовать в своих проектах. Как я уже говорил, MODX Evolution это CMF со свойствами CMS, т.е. вы сможете создавать проекты не занимаясь программированием. Ну до поры до времени :)

Локальный web-сервер - это комплекс программ (Apache, PHP, PHPMyAdmin, MySQL и т.д.), который устанавливается на локальный (домашний) компьютер позволяющий веб-разработчикам создавать сайты без необходимости выхода в Интернет. Локальный web-сервер аналогичен настоящему реальному серверу, расположенному у хостера.

Существует множество готовых решений для локального web-сервера: AMPPS, AppServ, Денвер, EasyPHP, NimpBox, Open Server, Server2Go, Uniform Server, USBWebserver, VertrigoServ, WampServer, Winginx, XAMPP, Endels. 

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

Open Server не требует установки, может работать с флешки и в комплекте у него имеется набор полезных программ, например, текстовый редактор Notepad++, о котором поговорим ниже.

Для редактирования HTML или CSS документов существуют различные редакторы, например, Notepad++ - текстовый редактор с подсветкой синтаксиса. Существуют и другие аналогичные редакторы, вы можете использовать любой из них. Но если у вас нет каких-то личных предпочтений, то Notepad++ будет в самый раз. Вы можете установить его отдельно, либо скачайте full версию Open Server, он там есть в комплекте.

Для каждого веб-мастера важно, чтобы его сайт правильно отображался в различных браузерах. Все современные браузеры отображают информацию более менее правильно, хоть и с незначительными отличаями, но считается, что существует большое количество пользователей, на компьютерах которых установлены еще старые браузеры, в частности IE6-IE9 (Internet Explorer 6-9 от компании Microsoft) — настоящая головная боль любого веб-разработчика. Но, радуйтесь, сейчас ситуация в корне поменялась и эти браузеры встречаются довольно редко. Но установить у себя Firefox, Opera, Chrome и Safari я настоятельно рекомендую, это пригодится для последующего тестирования ваших творений. Если у вас ОС Windows, то какая-то из версий IE уже установлена.

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

У Chrome есть свои аналогичные плагины, которые уже установлены. Но Firefox лично мне кажется удобнее и нагляднее. А, кстати, если вы фанат Opera, спешу разочаровать, разработчики официально отказались от поддержки этого браузера. Это означает, что в самой Опере сайт будет работать замечательно, но вот с административной панелью у Оперы могут быть нестыковки. Для работы с админкой используйте Chrome или Firefox.

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

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

В комплекте с Open Server тоже есть несколько полезных программ, в том числе по работе с графикой.

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

Доменное имя — это имя, служащее для идентификации областей — единиц административной автономии в сети Интернет — в составе вышестоящей по иерархии такой области. Каждая из таких областей называется доменом. Общее пространство имён Интернета функционирует благодаря DNS — системе доменных имён.

Доменое имя складывается из названий всех доменов, в которые оно входит, разделенные точкой. Например:

Соответственно, доменное имя выглядит так: yandex.ru.

Важно понимать и суть доменной зоны. В доменную зону yandex.ru входят все домены третьего уровня: mail.yandex.ru, music.yandex.ru и т.д. Другими словами, если вы приобрели домен второго уровня, то все домены третьего и т.д. уровней тоже принадлежат вам.

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

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