А интересен он тем, что не использует PHP и базы данных и полностью построен на HTML и JavaScript. Весь код выполняется не на сервере, а на клиенте — это дает возможность использовать самый простой (и даже бесплатный) хостинг.
Рассмотрим сначала основные возможности движка, а потом будем разбираться как он устроен.
Каталог товаров. Движок позволяет организовать не ограниченный каталог товаров. Имеется возможность настраивать отображение товаров: значки, список, товар с описанием. Так же можно настраивать сортировку по цене, наименованию, новизне и артиклу.
Корзина и форма заказа. Корзина очень простая: она отображает перечень покупаемых товаров и общий итог по цене. Можно изменять количество товаров. Также на странице корзины расположена форма заказа, где можно выбрать вариант доставки и оплаты.
Платежные системы. В движок уже интегрированы платежные системы/ Такие как: банковские карты, Яндекс.Деньги, Webmoney, QIWI, оплата с мобильного. Оплата идет через платежный агрегатор PayAnyWay и чтобы начать его использовать, нужно будет заключить договор с этим агрегатором.
Импорт / экспорт. На данный момент имеется возможность импорта товаров из файлов формата xls, csv, json. Имеется возможность выгрузки в Яндекс.Маркет. Интеграция с программами 1С находится на стадии разработки.
При работе с обычными скриптами информация о товарах, заказах и т.д. хранится в базе данных. Администратор заносит информацию в базу данных через админку движка, а в витрине отображаются результаты запросов к базе данных.
А теперь разберем как работает HEEG.HTML. Где хранится информация о товарах, если он не использует базу данных хостинга? Как отображаются товары и на чем построена логика приложения, если не используется PHP?
Устроено все вот как: CMS HEEG.HTML разработана на базе движка нелинейных заметок tiddlywiki. Суть его в том, что вся информация интернет-магазина хранится в одном html файле, а удобный просмотр информации о товарах осуществляется с помощью логики JavaScript.
Т.е. весь ваш интернет магазин будет размещен на одной html странице. Никакой базы данных, никакого обмена между клиентом и сервером — только одна страница, которая целиком загружается на компьютер клиента и дальнейшая обработка информация идет на компьютере клиента.
Самое удивительное, что благодаря асинхронной загрузке страницы магазин будет шустро работать с тысячью и более товаров. Несмотря на то, что страница одна, у каждого товара и раздела есть свой собственный url адрес, поэтому клиент, как и в обычном магазине, сможет осуществлять удобную навигацию и делиться ссылками на понравившийся товар.
Информация по заказам сохраняется в таблицы Google. Отправка письма о совершенном заказе также осуществляется средствами Google. Файл с заказами выглядит примерно так:
При таком подходе есть как свои плюсы, так и минусы. Сейчас попробуем сделать свой магазин на этом движке, а затем рассмотрим плюсы и минусы этого движка.
Давайте попробуем сделать небольшой интернет-магазин на движке HEEG.HTML, чтобы понять как все таки он работает и чтобы увидеть сильные и слабые его стороны.
Шаг 1. Скачивание.
Этот шаг стандартный. Как и в случае с любой бесплатной CMS, просто заходим на сайт разработчика в раздел загрузок и скачиваем.
Шаг 2. Настройка и наполнение товарами.
Вот тут уже интереснее. Мы пропускаем шаг установка на хостинг и сразу приступаем к настройке. Все это возможно потому, что HEEG.HTML-это просто html страница. Работать с ней мы можем прямо со своего компьютера.
Это будет несомненным плюсом для новичков, у которых еще не куплен хостинг: просто скачай скрипт и начинай делать свой интернет-магазин, а когда придет время — купишь хостинг.
Приступаем к настройке. Для начала вам нужно разархивировать скаченный архив «heeg5.1.1.zip». После распаковки вы увидите такую структуру папок и файлов:
Чтобы войти в магазин, вам нужно запустить файл heeg.html обычным браузером, например Google Chrome.
Откроется главное окно вашего интернет-магазина:
Как видите, уже есть товары и категории, т.е. у нас в распоряжении уже наполненный тестовыми товарами и настроенный магазин. Все что нам остается — это наполнить его своими товарами.
Добавление, удаление, клонирование товаров и разделов происходит через меню «галочка» в правом верхнем углу. Если вам нужно очистить магазин от базовых товаров и разделов, сделать это можно через настройки на вкладке «удалить»
Давайте посмотрим как происходит редактирование товара. Для этого раскроем какой нибудь товар, например «Розовые розы» и нажмем пиктограмму «Редактировать заметку».
Откроется окно редактирования товара:
Надо признать, что на первый взгляд редактор выглядит немного пугающе, но если разобраться, то вполне можно привыкнуть. Даже удобно — все на одной странице.
За принадлежность к категории отвечают метки (кроме того их можно использовать для задания таких свойств как «Новинка»). Правда категории (как и коды товаров) обозначаются не русскими буквами, но при этом вовсе необязательно держать в голове соответствие русским названиям. Дело в том, что метка раздела присваивается автоматически в зависимости от того, в какой раздел вы добавляете новый товар или подраздел.
Новые свойства товаров тоже можно добавить прямо на странице редактирования товара. Как становится понятно из видеоуроков, значения свойств- это НЕ просто строка, они сохраняются во встроенной базе данных. То есть вы можете добавить новое свойство товару, например цвет или размер L XL , ссылаться на эти поля в описании товара при помощи вики-разметки вида {{!!color}} или {{!!size}} и как в обычной базе данных, осуществлять поиск и делать выборки по этим полям. Например, показать все красные куртки размера XL не дороже 1000 рублей.
Шаг 3. Разделение файла.
Вот такой шаг при установке других CMS мы еще не встречали. Суть его в том, что вся информация на данный момент хранится в одном файле heeg.html, а это не очень хорошо для индексирования. Поэтому перед заливкой на хостинг мы разобьем наш единственный файл на много маленьких, с помощью утилиты Node.js. Ее мы скачиваем, запустив ярлык «Node.js» из папки с нашим движком.
После скачивания на вашем компьютере появится файл «node-v4.4.2-x64.msi». Установите эту программу. Затем в папке с движком запустите файл «startWiki.bat». Затем в этой же папке запустите «static_site.bat». Откроется черное окошко, потом закроется и у вас в папке с движком появится папка «output», а в ней папка «static». Содержимое папки static и есть ваш сайт. Его нужно будет залить на хостинг.
Теперь если вы захотите внести изменения на сайт и вам нужно, чтобы поисковики заметили эти изменения, то необходимо снова запустить файл «static_site.bat», чтобы снова сформировать файлы в папке static. Эти файлы нужно будет перезалить на хостинг.
Непривычно, правда? Получается редактор сайта, т.е. админка будет находиться на вашем компьюторе. Конечно, необязательно каждый раз при перенастройках нарезать и перезаливать весь сайт целиком, магазин heeg.html будет отлично работать и без этой нарезки, поэтому на этапах настройки будет достаточно перезаливать только этот один файлик heeg.html и новые картинки. НО для правильной индексации нарезка в статику обязательна. Если просто переименовать фаил heeg.html в index.html, магазин будет работать, но поисковики его не увидят.
Шаг 4. Заливка на хостинг.
Вот тут все просто: нужно файлы из папки static загрузить на хостинг. Никакой базы данных, никакой установки — просто скопировать и все. Как всегда мы все протестировали на хостинге beget.ru. Вот такой сайт получился после заливки и распаковки архива: http://ufaweb.bget.ru/.
Технология, которая используется в движке HEEG.HTML, непривычна. При таком подходе, когда вся информация хранится в файлах, а не в базе данных, есть ряд ограничений, но так же есть и свои плюсы. Давайте проанализируем хорошие и плохие стороны и попробуем понять для каких случаев выгодно использовать этот движок.
После детального анализа плюсов и минусов мнение об этом движке складываются противоречивые. Давайте попытаемся понять в каких же случаях следует использовать эту CMS .
Во первых, HEEG.HTML благодаря простоте конструкции станет незаменимым помощником, когда нужно быстро развернуть небольшой магазин.
Во вторых, HEEG.HTML удобен когда нужно встроить интернет — магазин в уже имеющийся сайт. Причем его можно будет встроить в абсолютно любой сайт.
В третьих, HEEG.HTML удобен когда нужен переносной магазин: ведь магазин на этой CMS — это просто html-файл, который можно даже отправить электронным письмом.
Если вам нужно быстро запустить небольшой интернет-магазин на бесплатном или дешевом хостинге, то HEEG.HTML-это то что вам нужно. Он бесплатен, не имеет ограничений по количеству товара и, главное, он полностью готов для организации торговли в России: расчет доставки, оплата, интеграция с 1С (скоро) — все это уже есть и работает.
В процессе работы с движком начинаешь понимать, что этот самый простой движок не такой уж и простой. В нем использованы все самые современные технологии сайтостроения. Некоторые моменты вызывают полный восторг, другие недоумение. Например, момент привязки гугл- формы к магазину больше похож на языческий танец с бубном, а заливка тысячи товаров через таблицы EXCEL похожа на хождение по минному полю, при котором даже одна лишняя кавычка приводит к невозможности заливки на сайт базы товаров. К счастью, у движка есть форум и отзывчивая бесплатная техническая поддержка (которая обещает все поправить в следующих версиях). На сегодняшний момент движок (с некоторыми оговорками и неудобствами) может справиться со всеми задачами крупного магазина. Хороший он или плохой-решать конечно Вам. Если по каким-то причинам нужно будет перенести магазин на другой PHP-движок, вы всегда это сможете сделать через выгрузку или табличку Excel.
На сегодняшний день довольно просто найти в интернете веб-сайты, основанные на технологии HTML5, но гораздо сложнее организовать поиск подобных сайтов по категориям. Коммерческие сайты, использующие 5-е поколение технологии на полную катушку, способны всему миру продемонстрировать её потенциал, и поэтому мы решили собрать для вас лучшие примеры реализации веб-сайтов с использованием HTML5.
Для обычных пользователей, кто не знаком с последними разработками, рассказываем, что HTML5 представляет собой последнее поколение стандарта HTML. Данная технология предлагает нам гораздо более быструю загрузку страниц, более высокий уровень взаимодействия, а также новые способы отображения контента.
HTML5 предлагает нам многое новых синтактических свойств, включая элементы «video», «audio», «canvas», «section», «article» и «header». Элемент canvas может быть использован для генерирования визуализация без использования плагинов для воспроизведения видео, а также исключает необходимость интеграции Adobe Quick Time и Flash.
Интернет-магазины, использующие HTML5
Так как все больше и больше браузеров начинают поддерживать HTML5, все больше и больше дизайнеров и разработчиков применяют данную технологию в своих коммерческих проектах Она предлагает впечатляющие возможности для торговли в интернете, в результате чего мы видим стремительное увеличение числа интуитивных веб-сайтов со встроенными видео и визуальными презентациями.
Все представленные ниже интернет-магазины были разработаны с помощью технологии HTML5 на том или ином техническом уровне сложности. Все эти веб-сайты можно отнести к категории сайтов с очень высоким качеством дизайна. Эффекты, разработанные при помощи HTML5, лишь подчеркивают качество.
Вдохновение для дизайнеров коммерческих проектов!
G-Force – это модный спортивный магазин в Нидерландах, на сайте которого используется как Flash, так и HTML5. Здесь используются фотографии и вертикальное каскадное навигационное меню, которое позволяет пользователям просматривать бренды и осуществлять взаимодействия с магазином.
Некоторые приемы уже были рассмотрены в различных статьях. Однако у меня возникло желание объединить их и проиллюстрировать отдельными демо. Надеюсь, в таком виде наработки окажутся полезны верстальщикам, которым часто приходится работать над интернет-магазинами.
В качестве примера мы будем верстать список товаров для интернет-магазина комнатных растений. Демо готового каталога можно посмотреть по ссылке . В результате должен получиться список растений с фото, описаниями и всплывающими кнопками. Кроме того, вид списка можно будет переключать: товары будут выглядеть либо как плитка, либо как таблица.
Итак, начнем с создания адаптивных плиток - будущих карточек товаров. У нас будет 8 комнатных растений:
Оберткой для товаров послужат блоки, занимающие 100% ширины родителя на мобильных устройствах.
Теперь используем медиа-запросы, чтобы разместить по две, три и четыре плитки в ряд при больших разрешениях монитора.
И зададим стили карточек товаров.
Из-за того, что карточки имеют margin-right равный 20px , весь список имеет нежелательный отступ справа.
Исправим это с помощью отрицательного значения margin-right у родителя.
Теперь все в порядке. Посмотреть на получившуюся сетку можно на страничке демо . Для наглядности блокам в демо задана фиксированная высота.
Следующим интересным моментом является верстка блоков с фотографиями растений. Разметка в данном случае будет такой:
Сделаем родителя тега img квадратом с помощью свойства padding-bottom со значением 100%. Вот все стили для данного блока.
В указанном блоке расположим картинку таким образом, чтобы при любых размерах она не выходила за пределы родителя, и отцентрируем ее горизонтально и вертикально.
Осталось немного увеличивать фото при наведении.
Как все это работает можно посмотреть на примере демо .
Нам нужно, во-первых, задать описанию товара высоту в четыре строки, а во-вторых, сделать конец последней строки слегка размытым.Первую задачу можно решить, задав высоту параграфа с описанием, равную четырем line-heigth .
Product p {
position: relative;
margin: 0;
font-size: 1em;
line-height: 1.4em;
height: 5.6em;
overflow: hidden;
}
А эффекта размытия последних букв четвертой строки мы добьемся с помощью псевдоэлемента:after с линейным градиентом в качестве фона.
Чтобы перечеркнуть цену линией отличной по цвету от текста, задаем блоку с ценой значение color равное #ff3535 и text-decoration - line-through . При этом устанавливаем для вложенных элементов серый цвет текста.
Что касается кнопки «Быстрый просмотр», ее реализация сравнительно проста. Кнопка абсолютно позиционирована относительно блока с классом.product-photo , скрыта с помощью opacity: 0 и немного сдвинута вниз за счет transition: translateY(2em) . При наведении курсора на карточку товара стили кнопки меняются следующим образом.
Несколько сложнее дело обстоит с кнопками «В корзину» и «Купить в 1 клик». Здесь внешний контейнер.product-buttons-wrap абсолютно позиционирован в блоке.product и равен родителю по ширине и высоте.
Теперь можно добавить собственно контент - кнопки, размещенные в блоке.buttons .
Благодаря правилу float: left у псевдоэлемента.product-buttons-wrap:before , кнопки расположены ниже основного контента, и блок.buttons занимает всю площадь карточки.
Чтобы лучше разобраться с кнопками, можно посмотреть это демо .
Для переключения между плиткой и табличным видом каталога мы создаем две кнопки.
По клику на кнопки у списка товаров удаляется и добавляется класс.table-layout .
Таким образом, прописав стили для карточек-дочерних элементов блока ul.table-layout , мы можем «превратить» список в таблицу только с помощью CSS, без перезагрузки страницы. Для этого задается ширина карточек равная 100%. А вложенные блоки теперь займут только часть ширины карточки, например:
В современном мире порой иметь собственный сайт также важно, как например, наличие номера телефона или адреса электронной почты. К сожалению, не каждый самостоятельно может сделать себе красивый профессиональный сайт, а порой даже и кривой не получается. Заказывать у программистов тоже не идеальный выход, так как не всем это по карману.
Из такой ситуации помогут выйти бесплатные HTML шаблоны сайтов. HTML шаблон сайта – это набор уже готовых статических страниц для сайта определенной тематики. С помощью такого шаблона, создать простой сайт можно буквально за пару часов, при наличии базового знания HTML разметки. В разделе HTML Вы получите эти знания, если потратите еще пару часов на изучения, а если не пожалеете время на раздел CSS, то сможете полностью управлять дизайном HTML шаблонов сайтов и настраивать их полностью под свои нужды.
Еще одним неоспоримым плюсом шаблонов сайтов является, то что их пишут в большинстве случаев профессионалы. Под профессиональным шаблоном сайтом понимается не только красивый и современный дизайн, но и так как написан код. Поисковые системы смотрят, как у Вас написан сайт, SEO оптимизирован код или нет, на основании этого понижают или повышают Ваши позиции в выдаче. Поэтому хороший сайт должен быть не только красивый и современный, что немаловажно, но и грамотно написан в плане кода.
Скачивайте бесплатные HTML шаблоны сайта и создавайте свои проекты в кратчайшие сроки.
