Хозяину на заметку
$63.84
€70.7
22 Ноября 2019
Хочу научиться делать сайты! Часть 3 Что нужно знать и уметь и перечень работ при разработке сайтов.

Хочу научиться делать сайты! Часть 3 Что нужно знать и уметь и перечень работ при разработке сайтов.

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

Для остальных, кто по-прежнему хочет иметь на 100% управляемый сайт и зависеть от минимума факторов (а точнее, только от хостинга и квалификации разработчика) я продолжу. Если под разработчиком сайта вы имеете ввиду себя, а выбранная вами компания-хостер входит в топ 10, то вы идёте правильным курсом.

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

Что нужно знать для разработки сайта?

Вы должны знать язык гипертекстовой разметки – HTML, именно он является тем каркасом, на котором «держится» ваш сайт. Помимо HTML нужно уметь пользоваться каскадной таблицей стилей – CSS, которая отвечает за визуальное оформление страниц всего сайта и связана с HTML. Для реализации некоторых логических и визуальных эффектов на станицах сайта нужно понимание JavaScript и в частности библиотеки jQuery.

JQuery

Ну и в завершении, для решения различных задач по выводу информации на сайте может понадобиться знание серверного языка программирования PHP. Это четыре кита, необходимые для разработки абсолютно любого сайта: HTML, CSS, jQuery и PHP. Дополнительно может возникнуть необходимость разбираться в базах данных MySQL, ведь все движки сайта работают именно с базой данных и умение, при необходимости, написать правильный запрос в базу может быть очень востребовано.

html5 и css3

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

С чего начать разработку сайта?

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

А теперь давайте по порядку разберёмся в последовательности прежде чем приступить непосредственно к разработке сайта.

  1. Отвечаем на вопрос: для чего и для кого мы делаем сайт?
  2. Продумываем структуру сайта, подразделы и типы материалов (контент), которые будут в каждом разделе.
  3. Создаём дизайн сайта (главную и все остальные страницы сайта, включая версии для планшетов и мобильных телефонов);
  4. Создаём на основе дизайна шаблоны всех страниц сайты;
  5. Выбираем систему управления контентом (CMS);
  6. Выбираем хостинг;
  7. Покупаем доменное имя;
  8. Устанавливаем CMS на хостинг;
  9. Интегрируем шаблоны в систему управления контентом;
  10. Настраиваем CMS и автоматизируем динамический показ контента;
  11. Подключаем или программируем дополнительные модули и скрипты для отображения динамического контента на страницах (формы регистрации, поиск, показ рекламы и пр.);
  12. Тестируем отображение всех страниц и работу модулей и скриптов во всех браузерах;
  13. Наполняем сайт контентом;
  14. Тестируем сайт на реальном контенте;
  15. Исправляем ошибки;
  16. Проводим работы по поисковой оптимизации;

Вот такой, не малый и разношёрстный объём работ нам предстоит выполнить. Долго, трудно, нудно, но было бы желание. Часть этапов мы постараемся упростить, например, мы не станем рисовать шаблон сайта, а возьмём готовый и бесплатный. Это избавит нас от изучения Photoshop или других программ в которых можно создавать дизайн-макеты страниц. Но на примере этого шаблона мы разберём основные тэги HTML и поймём для чего они нужны. Так же, я за вас решу пункт первый. Мы будем делать персональный сайт-блог. Это один из самых востребованных и распространённых типов сайтов и его формат позволяет реализовать вывод большинства популярных типов контента, таких как фото, видео и текст.

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

Адаптивный html 5 шаблон для сайта

Этот шаблон я нашёл тут https://www.styleshout.com. Он содержит 9 страниц, а это значит, что нам нужно интегрировать в движок сайта целых 9 шаблонов страниц, переименовать пункты меню, если нужно, то поменять шрифт на тот, который поддерживает кириллицу и возможно подправить и адаптировать уже внедрённые в шаблон скрипты. Этот шаблон адаптивный, а значит у нас не будет проблем с корректным отображением сайта на различных устройствах. Скачиваем шаблон (внизу страницы есть кнопка "Download") или по прямой ссылке отсюда.

Система управления сайтом Evolution

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

Evolution CMS

Спорить о правильности выбора движка для сайта можно долго, у каждого из них есть свои плюсы и минусы, о которых я рассказывал во второй части. Одним из важнейших, на мой взгляд, преимуществ данной системы является лёгкость интеграции любого шаблона HTML. И не важно, создали ли мы шаблон сами или купили готовый HTML5 шаблон – его легко можно интегрировать в Evolution. Вторым несомненным плюсом является лёгкость интеграции любых слайдеров и галерей, а точнее любых скриптов, которые работают на JQuery без специальной их адаптации под конкретный движок. Т.е. скрипт можно брать прямо с сайта разработчика и вставлять на сайт. Аналогично скриптам легко интегрируется и любой PHP код с помощью которого мы можем осуществить доступ к базе данных, для этого в системе есть все необходимые инструменты, а нам остаётся только познакомиться с философией самой системы и разобраться с настройками, тонкостями и нюансами её работы.

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

Для работы с сайтом нам потребуется установить на компьютер одну программу – FTP клиент. Таких программ много, а я рекомендую лёгкую, быструю и простую - FileZilla. Скачайте эту небольшую программку, которая обеспечит прямой доступ к файловой системе вашего сайта прямо на сервере хостинга. С помощью неё можно копировать, перемещать и переименовывать файлы на сервере, создавать и удалять папки и назначать к ним права доступа. Используя текстовый редактор, вы также можете редактировать содержимое любых файлов.

Теперь пришло время скачать дистрибутив нашей CMS – Evolution. На момент написания этой статьи последняя актуальная версия 1.4.9. Несмотря на то, что на сайте доступна для скачивания уже версия 2.0 она пока является тестовой и в ней возможны различные ошибки хотя и добавлены новые возможности, в частности поддержка фреймворка Laravel и всех его компонентов.

На этом все подготовительные мероприятия закончены, у нас есть шаблон, дистрибутив движка и удобный FTP клиент. Теперь самое время, если вы ещё этого не сделали, подобрать и купить доменное имя и услуги хостинга.

В следующей части мы приступим непосредственно к установке CMS на хостинг.

Комментарии (показать/скрыть)

Maxim.Zone

Ещё статьи по теме "Интернет"