PlaceboCMS — идея, рассуждение на тему того, как можно было бы создать CMS без БД, без PHP, но с поддержкой динамики и разделения контента и оформления.
Этап 0. Создание структуры папок и файлов. Ибо я отказался от PHP, MySQL, и вообще веб-сервера как такового, нужно продумать, как хорошо организовать систему хранения данных. Я сделал вот так:
public_html — основная папка (ну или www, кому как удобнее) |→ pages = хранит html файлы страниц |→ style = тут стилевое оформление |→ style.css = основной css файл |→ img = картинки для CSS |→ templ = два файла html расширения |→ web.html — шаблон для WEB (расположение эл-тов) |→ pda.html — шаблон для мобильных устройств |→ java — хранилище js функций (захотелось назвать java) |→ my.js — функции JS |→ images — Тут будут картинки какие-нибудь
Этап 1. Создание шаблона.
За основу был взят простой HTML5 шаблон статической страницы. т.к. дизайн я делаю адаптивный (для всех экранов), то надо сделать обработку на JS, поэтому первоначально пишу функциональную примочку для работы с размером экрана. Скажу сразу — IE я не учитываю, как браузер, вообще, так как все мои проекты ориентированы на Linux, где его и в помине нет.
Задал я объект device, параметром width который отдает размер экрана. Тут появилась проблема, в мобильных браузерах есть возможность принудительного масштабирования, что означает, что использовать clientWidth для определения ширины становится бессмысленным. НО! Если человек с компа, то screen.width будет явно шире, чем окно самого браузера, последнее вообще можно растягивать как душе угодно.
Пошел на компромис и взял наименьшее из двух. И это помогло! Потому что в мобилках при масштабировании clientWidth возвращается больше, чем screen.width, вот такой вот парадокс Нужно мне это для того, чтобы js выводил нужный шаблон в зависимости от ширины, доступной для размещения контента.
Этап 2. Создание шаблона второго уровня.
Сейчас поясню. Есть шаблон первого уровня — это шаблон определяющий поведение всего сайта в целом, определяет, поддерживает ли браузер AJAX, и обрабатывает ли он js в реальном времени. Пример: Opera Mini обрабатывает js на своем сервере и отдает пользователю отрендеренную страничку, в которой js как такового и нет вовсе. В новых версиях примерно так же.
Именно для этого наш js должен уметь работать и с таким браузером тоже. В нашем случае — шаблон второго уровня задает поведение самих страничек (их загрузки в AJAX либо же их открытия посредством обычных URL).
Это были этапы планирования. Теперь переходим к реализации.
Этап 1. Рвём на части HTML шаблон!
Создавать с нуля шаблон (оформление) мне не очень улыбается… посему я решил воспользоваться готовым решением. Скачал в интернетах несложный шаблон. Мне сейчас оттуда нужны CSS стили, картинки, чтобы с нуля не рисовать, и каркас. Нашел очень хороший шаблон, вот такой:
Сойдет! Идем дальше. Этот шаблон я буду использовать как WEB тему для сайта, значит его нужно запихать в файл style/templ/web.html и убрать из него все лишнее.
Я убрал из шаблона все лишнее, оставив только то, что было между . Но потерялись стили CSS! Решение пришло простое: динамически подгружать стили, когда потребуется. Придем к этому потом. Теперь нужно отделить меню от контента. Я подумал, что лучше хранить меню в js файле в виде строки, хотя был вариант использовать AJAX для загрузки, а CSS для позиционирования, либо же iframe, но решил оставить в js.
В итоге от шаблона осталось только следующее:
Это и есть весь шаблон WEB версии сайта.
Так же подправил CSS стили, убрав оттуда все лишние элементы оставив только самые нужные.
Теперь немного о структуре (не HTML) шаблона. Все данные я буду присваивать посредством изменения innerHTML объекта, отсюда я присвоил следующие id:
mySite — заголовк сайта
mySlogan — слоган сайта
myData — основной текст страницы, в который будет грузиться шаблон.
Пока всё. Остальное решу потом.
Этап 2. Создаем основной шаблон.
Так как я не использую PHP, то тут надо хорошо подумать над тем, как удет выглядеть сайт извне. Я не ориентировался на поисковики, проект внутренний, поэтому сделаю простейший шаблон html:
И опять же:
myCss — файл стиля для подключения
myScript — скрипт для подключения функций
myTitle — тот заголовок, что видно в окне браузера
myBody — то хорошее место, куда будем грузить наш шаблон
Файл получился более, чем миниатюрный, однако от этого не менее функциональный!
Этап 3. my.js
Вот это самая сложная часть, с точки зрения времязатратности. Я на написание этого файла потратил почти 4 часа!
Список функций, которые я написал для дальнейшей работы:
$() — получение DOM объекта по id
$$() — получение DOM объекта по name
hScreen() — высота экрана юзера
wScreen() — ширина
whMonitor() — ширина/высота экрана (не браузера)
showhide() — скрывает/открывает объект
hide() – скрывает объект
show() — открывает
startajax() вернет объект для работы с AJAX потоком
setCookie() — устанавливает cookie запись в браузер
getCookie() — соответственно, вернет их
i() — аналог parseInt
bottomObj() — располагает объект под объектом, принимает id объектов и две переменные смещения вверх/влево
fDown() — прижмет объект в низ экрана (position: fixed;)
fRight() — прижмет к правому краю
Обе функции не чувствительны к скроллингу
goURLA() — переходит по ссылке в асинхронном режиме
reLoad() — переходит по ссылке в асинхронном режиме, только если пользователь нажмет на навигационные кнопки (назад/вперед)
loadTempl() — функция загрузки шаблона
getPageName() — возвращает название файла страницы из URL адреса
pdaAd() — позиционирует объекты, в случае, если экран слишком узкий (меньше 800px)
allLinkToClick() — функция пробегает по всем ссылкам и делает асинхронными, если поддерживает браузер, иначе не пробегает.
placebo_start() — та самая функция в onload тела документа (объект «body»). Она подгружает шаблон, стили, и пробегает по ссылкам при возможности.
Вот и все. Расписывать сами функции не буду, при желании можно заглянуть в исходник.
Работает в Chrome и Opera и Mozilla новых версий, на старых не тестировал, и тем более не тестировал на IE, ибо на него вообще пофигу. Будет у кого желание, проверьте! Ссылка на демо в конце статьи.
Теперь про переменные, которые я описал в JS:
showhide_arr — массив состояний для объектов (функции show/hide/showhide)
page — массив данных о текущей странице,
site — массив данных с инфой о сайте
menu — массив нашего меню, который рендерится юзеру при загрузке шаблона
device — хранит высоту / ширину клиента
Этап 4. Обработка ссылок. (ёп-ёп-ёп)
Это отдельный этап работы. Я ведь полностью отказался от серверной части работы, значит все делаем через JS. Функция для перехода по ссылке:
function goURLA(pageName, func) < var ajax= startajax(); // создаем объект для работы с AJAX ajax.open(‘GET’, site.domain+’pages/’+pageName+’.html’); // посылаем запрос бедному серверу, который даже не в курсе, что творится ajax.onreadystatechange = function () < if(ajax.readyState == 4) // если загрузка окончена < if (ajax.status != 404) // и если это не 404 ответ от сервера < $(‘myData’).innerHTML= ajax.responseText; // рисуем юзеру страницу $(‘myTitle’).innerHTML= $(‘myH2′).innerHTML; // рисуем браузера зуголовок window.history.pushState(null, null, site.domain+’index.html?’ +pageName); // добавляем запись в историю браузера, что мы перешли на новую страницу и заодно меняем строку адреса >else < $(‘myData’).innerHTML= ‘Ошибка загрузки! Код ошибки: 404’; > // на тот случай, если сервер не нашел страницу, которую нам надо if (func) func(); // если была функция, выполняем ее > else < $(‘myData’).innerHTML= ‘Ошибка загрузки! Код ошибки: 500