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

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

Здравствуйте, дорогой владелец сайта!

Знаете ли вы, что:

  • На данный момент 30% пользователей заходят на сайты с мобильных устройств. И если ваш сайт не умеет адаптироваться под мобильные устройства, то вы теряете этих посетителей и продажи, которые они могли бы совершить.
  • К концу 2013 года количество мобильных пользователей будет 50%. Т.е. для уменьшения прибыли в 2 раза достаточно просто ничего не менять в своем сайте.
  • Google сейчас отдает предпочтения сайтам с отзывчивым дизайном. При прочих равных условиях сайты с отзывчивым дизайном получают более высокие позиции, чем сайты с устаревшим дизайном.

 

Большинство крупных компаний уже перешли на отзывчивый дизайн. Из мировой практики -это Microsoft, Disney, Cisco, Sturbucs, Sony, Time, British Vogue и многие другие.

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

 

Что может дать вам отзывчивый дизайн?

  1. Если вы - автор или владелец сайта.


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

    Увеличится количество заказов, благодаря пользователям, которые пользуются интернетом с мобильных устройств (рост продаж до 30%).

    У вашего сайта будет уникальный внешний вид, а это грамотная отстройка от клонов-конкурентов и брэнд

  1. Если вы - будущий или уже сейчас признанный мастер Joomla.


    Вы перейдет на следующий уровень в работе с сайтами

    научитесь верстать шаблоны для Joomla с отзывчивым дизайном, используя фреймворк Twitter Bootstrap.

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

  1. Если вы - фрилансер


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

    Вы можете зарабатывать по 12-15 тыс.руб. за 1 шаблон (7-10 дней работы).



Если вы не хотите:


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


А наоборот,
хотите

Тогда вы просто обязаны освоить современную верстку шаблона и использовать на своем сайте шаблон с отзывчивым дизайном.

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

Представьте себе, исчезли все компьютеры и отныне доступ к сайту только с телефона и планшетного компьтера. Удобно ли пользоваться вашим сайтом с телефона?

 

Что такое отзывчивый дизайн?

Отзывчивый дизайн - дизайн, который подстраивается под все разрешения экрана.

Т.е. сайт отлично отображается и удобно пользоватеься на всех мобильных устройствах.

За последние несколько лет мобильные технологии плотно вошли в нашу жизнь. Сейчас, по статистике, 30% пользователей заходят на сайты с мобильных браузеров. И если ваш сайт плохо отображается на мобильных телефонах и планшетах, то вы теряете 30% посетителей.


 

Характеристики отзывчивого дизайна:

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

 

Почему Google рекомендует отзывчивый дизайн?

В начале июня 2012 года на официальном блоге Google была высказана окончательная позиция Google по оптимизации сайтов для смартфонов.

Из всех предложенных вариантов Google выявил один тип в качестве предпочтительного решения - отзывчивый дизайн.

Google отдает предпочтение сайтам, которые:


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


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

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


Вот как будет выглядеть сайт с отзывчивым дизайном на различных устройствах.


 


Мировые брэнды выбрали
отзывчивый дизайн.


Большое количество сайтов на западе перешло на отзывчивый дизайн. Отзывчивый дизайн становится уже не интересной опцией, а важным условием для жизни сайта и компании.

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

  • http://sony.com

    Sony

  • Microsoft

  • Nokia

  • Time

  • British Vogue

  • Engadget

  • Sturbuks

  • Skinny Ties

  • Disney

  • Harvard University

  • Cisco

  • ISO

 

Это маленькая толика известных компаний, которые уже используют отзывчивый дизайн. Все сайты с отзывчивым дизйном перечислить просто невозможно. Это тоже самое, что перечислять людей, у которых есть квартира или дом.

 

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

Как сделать шаблон с отзывчивым дизайном?

Сегодня, чтобы сделать отзывчивый дизайн для сайта у нас есть два варианта:

1 Самостоятельно прописывать медиа-запросы в css и прописывать стили для сетки. Это вариант для профи.

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

Всю самую сложную работу за нас уже проделали, сэкономив нам большое количество времени.

 

На сегодняшний день лучшим инструментом для создания отзывчивого дизайна является фреймворк под названием Twitter Bootstrap.

 

Twitter Bootstrap - лучшее решение для отзывчивого дизайна


Что такое Twitter Bootstrap?

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

В Twitter Bootstrap прописаны все необходимые стили и java-скрипты для оформления современного сайта. Нам остается только наслаждаться версткой шаблона.

 

Характеристики Twitter Bootstrap:

  • 12-ти колоночный динамический дизайн и сетка, позволяющая сделать отзывчивый дизайн.
  • более 100 вариантов современного оформления текста, форм, кнопок, картинок, таблиц и прочих элементов контента.
  • более 100 компонентов для оформления навигации, списков, групп иконок, лейблов и системных сообщений.
  • встроенные java скрипты: модальные окна, табы, подсказки, алерты, меню, аккордионы, карусели и прочие.
  • чистый и быстрый код, корректно работающий во всех браузерах (вплоть до IE7).

  • Для получения богатого арсенала Твиттер Бутстрап нам нужно его подключить и начать использовать его возможности.


    Отныне профессиональная верстка шаблона с отзывчивым дизайном доступна для новичков!

    Благодаря Twitter Bootstrap мы экономим колоссальное количество времени на верстке, при этом получаем красивый отзывчивый шаблон.

    Давайте рассмотрим из каких этапов состоит верстка шаблона с отзывчивым дизайном.


    7 ключевых моментов в верстке шаблона
    1. Знакомимся с макетом дизайна. Определяем какие элементы нам нужно нарезать, а какие можем сверстать, используя css.
    1. Нарезаем шаблон определенным образом.
    1. Создаем каркас шаблона с минимально необходимыми файлами.
    1. Подключаем Twitter Bootstrap и ставим "нулевой шаблон" на Joomla.
    1. Верстаем шаблон по шагам: шапка, основная часть, модули, футер.
    1. Параллельно с версткой адаптируем сайт под различные устройства: изменяем меню, удаляем или перемещаем блоки в зависимости от разрешения.
    1. Сверстанный шаблон проверяем на кроссбраузерность. Исправляем ошибки.

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

     

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

    Важные детали в процессе верстки шаблона

    • Как убрать модули и растянуть текст по всей ширине экрана, если в модулях ничего не выводится?
    • Как быстро найти ошибку в коде, если в результате что-то отображается некорректно?
    • Как правильно использовать возможности, которые предоставляет TwitterBootstrap?
    • В чем разница в верстке под Джумла 2.5 и Джумла 3-ей серии?
    • Как задать различные варианты оформления для модулей, используя суффиксы?
    • Как сделать оформление контента в соответствии с дизайном, который предоставил дизайнер?
    • Как сформировать установочный файл шаблона?
    • Как задать параметры шаблона, которые можно изменять в админке?
    • Как сделать шаблон кроссбраузерным?
    • Как разобраться с наследованием родительских стилей?
    • Как решить вопрос ломки макета при изменении размера окна? Важно!
    • Как решить проблему со шрифтами, когда текст отображается квадратиками?
    • Как избежать наложения элементов друг на друга при изменении размера окна?
    • Как при изменении размера экрана заставить текст находится внутри своего элемента, а не вылазить за границы?
    • Как решить проблему с позиционированием элементов в браузере относительно друг друга.
    • Как решить проблему большого трафика для пользователей мобильных устройств?
    • Как исключить ненужные блоки сайта для пользователей мобильных устройств.
    • Как быстро решать ошибки, подводные камни, которые появляются в процессе разработки шаблона.
    • Как сделать грамотную верстку, без лишнего кода?
    • Как переопределить шаблоны для стандартный компонентов?
    • Как задать условия для вывода модулей?
    • Как заставить твиттер бутстрап корректно работать на Joomla 2.5?

    Плюс еще десятки вопросов, на которые, к сожалению в сети вы не найдете подробного ответа.


    Где взять информацию по созданию отзывчивого шаблона для Joomla?

     

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

    Давайте посмотрим на сайт amazon.com (крупнейший в мире интернет-магазин). Менее чем за год на прилавках этого магазина появилось более 30 книг по отзывчивому дизайну.

    За это же время на русском языке вышла (была переведена) всего одна книга, автор Итан Маркот "Отзывчивый дизайн".

    Но данная книга носит всего лишь общий характер и имеет ценность только для суперпрофи.

     

    Поэтому мы решили проделать серьезную работу.

    Мы разобрали процесс создания отзывчивого шаблона по косточкам:

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

    "Создание успешного шаблона на Joomla"

    "Подробный курс Александра Куртеева и Маршалец Дмитрия
    по новейшей технологии верстки шаблонов

    С помощью данного курса вы сможете профессионально сверстать свой шаблон для Joomla по современным стандартам. Т.е. сможете превратить картинку с макетом в одежду для вашего сайта, которая будет правильно отображаться под всеми устройствами (телефоны, планшеты, нетбуки, ноутбуки, мониторы с различными разрешениями экрана).


    А именно:

  • 1. Мы расскажем вам все секреты верстки шаблонов по современным технологиям, используя самый популярный фреймворк Twitter Bootstrap.
  • 2. Выполняя домашние задания, вы шаг за шагом сверстает свой шаблон.
  • 3. Закрепите навык и с легкостью сможете править и верстать с нуля новые шаблоны.
  • Формат: видеокурс + поддержка на закрытом форуме.
    Вам не нужно никуда ехать. Можно просто сидеть дома в наушниках перед компьютером и создавать великолепные шаблоны для своего сайта, а также делать их на заказ, зарабатывая при этом хорошие деньги.

    Версия Joomla: Мы верстаем шаблон для Joomla 2.5 и 3.х.

    Ваш уровень подготовки. От вас требуются только базовые знания самой Joomla. Знания верстки и языков программирования не требуется. Все, что нужно мы рассказываем в курсе.

    Процесс: Мы верстаем шаблон с нуля. Изначально у нас имеется картинка-макет, которую мы превращаем в профессиональный отзывчивый шаблон для Joomla.


    Авторы курса

    Авторы:

    Александр Куртеев – заказ дизайна, структура курса, план уроков, проработка деталей, контроль, озвучка бонусов.

    Дмитрий Маршалец – верстка шаблона, структура курса, озвучка основных модулей.


    Чтобы процесс верстки шаблона в курсе был похож на реальную жизненную ситуацию мы разделили ключевые сферы дизайна и верстки.

    1. Я, Александр Куртеев, составил техническое задание для фрилансера, провел конкурс, отобрал лучшего дизайнера и принял у него дизайн для будущего сайта.

    2. Дмитрий получил готовый макет и стал его верстать, используя Твиттер Бутстрап.

    3.
    Вместе

    мы рассмотрели все подводные камни на которые вы можете наступить,

    разобрали процесс верстки по косточкам,

    разработали пошаговую систему, позволяющую новичкам верстать профессиональные шаблоны,

    и записали детальный видеокурс, применимый для верстки любого шаблона для Joomla 2.5 и 3.х.

     

    Даже если вы не знаете языков верстки и программирования, используя нашу систему вы легко сможете сверстать профессиональный шаблон с нуля.


    Александр Куртеев – успешный интернет-предприниматель, автор 16 обучающих курсов по созданию и развитию сайтов на Joomla. Профессионально занимается обучением работе с CMS Joomla и разработкой сайтов на заказ с 2007 года.

    База подписчиков: 51259 чел.
    Количество клиентов: 9821 чел.


    Дмитрий Маршалец – профессионал в сфере создания сайтов на Joomla. С 2010 года работает в Центре Обучения Joomla в отделе решения технических вопросов по Joomla. За все время работы накопил большой опыт в создании мощных сайтов и решения проблем с кодом.


    Курс "Создание успешного шаблона для Joomla"
    состоит из 4 модулей.

    1 модуль. Html и CSS для новичков


    Для того, чтобы сверстать свой шаблон нужно обладать знаниями html и css. Поэтому первый модуль курса мы посвятили закреплению основ.

     

    Структура курса


    По окончанию данного модуля вы сможете:

    • Легко читать html код и при необходимости править его.
    • Задавать оформление через css.
    • Использовать возможности html и css в повседневной работе с сайтами.


    В комплект входит:

    • Рабочая тетрадь по HTML.
    • Рабочая тетрадь по CSS.
    • Необходимые программы.


    Итого:
    26 уроков (13 уроков по HTML, 13 уроков по CSS).

    Продолжительность: 3 часа 29 минут.

    2 модуль. Верстка шаблона из картинки


     

    Основной курс.

    В этом курсе мы шаг за шагом превращаем нашу картинку в шаблон для Joomla. Мы верстаем шаблон, используя TwitterBootstrap.

    В результате мы получаем отзывчивый шаблон, который отлично отображается на всех мобильных устройствах (ipad, iphone, ноутбуки, нетбуки, мониторы с большой диагональю).

     

    Структура курса:



    Вы пройдете все шаги верстки шаблона под руководством профессионалов.

    • 1 шаг. Знакомимся с макетом дизайна и определяем, какие элементы нам нужно нарезать, а какие можем сверстать, используя css.

    1 урок. Виды шаблонов

    В данном уроке мы узнаем, что такое шаблон, какие виды шаблонов бывают и варианты получения шаблонов.

    2 урок. Подготовка макета

    В данном уроке мы рассмотрим макет, который будем использовать при создании
    шаблона.

    Домашнее задание.

    Изучить учебный макет.
    Рассмотреть из каких элементов и слоев состоит данный макет.

    • 2 шаг. Нарезаем шаблон определенным образом.

    3 урок. Нарезка макета.

    В данном уроке мы рассмотрим, какие элементы необходимо нарезать, а так же три
    способа нарезки макета.

    Домашнее задание.

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

    • 3 шаг. Создаем каркас шаблона с минимально необходимыми файлами.

    4 урок. Структура шаблона

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

    Домашнее задание.

    В папку для шаблона поместить обязательные элементы шаблона.

    • 4 шаг. Подключаем Bootstrap и ставим "нулевой шаблон" на Joomla.

    5 урок. Тэги Joomla

    В данном уроке мы рассматриваем общий синтаксис тегов Joomla и какие теги бывают.

    Домашнее задание.

    Самостоятельно записать несколько тегов и атрибутов для них.


    6 урок. Файл index.php

    В данном уроке мы рассматриваем обязательные элементы файла index.php и создаем скелет для будущего шаблона

    Домашнее задание.

    Создать скелет шаблона в файле index.php.


    7 урок. Создаем файл templatedetails.php

    В данном уроке мы рассматриваем синтаксис файла templateDetails.xml и создаем свой файл для шаблона.

    Домашнее задание.

    Создать файл templateDetails.xml.


    8 урок. Установка на сайт

    В данном уроке мы подготовим архив шаблона для установки на сайт и установим наш шаблон

    Домашнее задание.

    Создать архив шаблона.

    Установить шаблон на сайт.

    • 5 шаг. Верстаем шаблон по шагам: шапка, основная часть, модули, футер.
    • 6 шаг. Параллельно с версткой адаптируем сайт под различные устройства: изменяем меню, удаляем или перемещаем блоки в зависимости от разрешения.

    9 урок. Основы верстки с помощью bootstrap

    В данном уроке мы рассматриваем какие бывают виды верстки с помощью bootstrap, знакомимся с сеткой шаблона и размещаем сетку в index.php.

    Домашнее задание.

    Разместить контейнер и строку в index.php как показано в уроке.


    10 урок. Переменные и условия при создании шаблона

    В данном уроке мы знакомимся с понятием переменной и условием. Учимся применять переменные и условия при верстке шаблонов.

    Домашнее задание.

    Создать любой дополнительный параметр.

    Посмотреть, как он выводится в админке шаблона.

    Прописать языковые переменные для данного параметра в языковом файле.


    11 урок. Верстка для различных устройств.

    В данном уроке мы рассматриваем какие устройства бывают, и какие классы bootstrap отвечают за вывод на данных устройствах.

    Домашнее задание.

    Ознакомиться с таблицей классов для устройств в документации bootstrap.


    12 урок. Верстка шапки. Часть 1

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

    Домашнее задание.

    На основе данных урока создать верхнюю часть шапки для альтернативного цвета в файле orange.css.


    13 урок. Верстка шапки. Часть 2

    В данном уроке мы верстаем промо-блок и нижнюю часть шапки.

    Домашнее задание.

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


    14 урок. Верстка шапки. Часть 3

    В данном уроке мы изменяем внешний вид верхнего меню и заканчиваем верстку шапки.

    Домашнее задание.

    На основе данных урока закончить верстку шапки для альтернативного цвета в файле orange.css.

    Сверить получившийся результат с макетом.


    15 урок. Верстка шапки для мобильных устройств.

    В данном уроке мы изучаем синтаксис плагина collapse и применяем его относительно верхнего меню для мобильных устройств.

    Домашнее задание.

    Скрыть промо-блок от показа на сотовых телефонах.


    16 урок. Верстка основной части сайта. Часть 1

    В данном уроке мы изучаем вывод различных позиций в зависимости от наличия в них модулей. Выводим контент в основной части сайта.

    Домашнее задание.

    Расположить позиции в основной части как показано в уроке.


    17 урок. Верстка основной части сайта. Часть 2

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

    Домашнее задание.

    Повторить действия как показано в уроке.


    18 урок. Верстка основной части сайта. Часть 3

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

    Домашнее задание.

    Повторить действия как показано в уроке


    19 урок. Внешний вид контента

    В данном уроке мы оформляем внешний вид контента в соответствии с макетом.

    Домашнее задание.

    Повторить действия как показано в уроке.

    Заменить стрелку пагинации на свою из макета.

    Создать внешний вид контента для альтернативного цвета


    20 урок. Внешний вид модуля по умолчанию

    В данном уроке мы оформляем внешний вид модуля в соответствии с макетом.

    Домашнее задание.

    Повторить действия как показано в уроке.

    Создать внешний вид модуля для альтернативного цвета


    21 урок. Суффикс класса модуля

    В данном уроке мы знакомимся с понятием суффикса класса модуля и меняем внешний вид через суффикс.

    Домашнее задание.

    Повторить действия как показано в уроке.

    Создать внешний вид модуля для альтернативного цвета.


    22 урок. Изменение внешнего вида стандартных компонентов. Часть 1

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

    Домашнее задание.

    Повторить действия как показано в уроке.


    23 урок. Изменение внешнего вида стандартных компонентов. Часть 2

    В данном уроке изменяем внешний вид формы контактов и всплывающих подсказок tooltip.

    Домашнее задание.

    Повторить действия как показано в уроке.


    24 урок. Внешний вид навигации

    В данном уроке знакомимся с классами навигации bootstrap и меняем внешний вид навигации.

    Домашнее задание.

    Повторить действия как показано в уроке.


    25 урок. Верстка футера

    В данном уроке мы создаем футер по аналогии с созданием шапки. А так же размещаем кнопку поднятия наверх сайта.

    Домашнее задание.

    Повторить действия как показано в уроке.

    Создать футер для альтернативного цвета

    • 7 шаг. Сверстанный шаблон проверяем на кроссбраузерность. Исправляем ошибки.

    26 урок. Финальная проверка готового шаблона

    В данном уроке мы проверяем готовый шаблон на наличие ошибок отображения элементов под разными браузерами и устройствами.

    Домашнее задание.

    Проверить шаблон как показано в уроке.

    Исправить обнаруженные ошибки.

    Для удобства работы прилагается рабочая тетрадь со справочными материлами и домашними заданиями.

    Верстая шаблон, вы параллельно:

    1. Прокачаете на практике использование html и css в профессиональном виде.
    2. Наработаете опыт разбора шаблона по косточкам для изменения определенных элементов.
    3. Научитесь быстро решать проблемы с кодом, которые заставляют новичков кричать SOS на всех форумах.
    4. Не заметно для себя станете мастером в верстке шаблонов.

     

    В результате у вас получится вот такой шаблон.


     

    Характеристики шаблона, который вы создадите в процессе освоения курса:

    • Шаблон для Joomla 2.5 и 3.1.
    • Адаптивная верстка на Twitter Bootstrap (сайт отлично выглядит на всех разрешениях экрана, на всех устройствах).
    • Шаблон кроссбразуерный, т.е. правильно отображается во всех браузерах.
    • 6 позиций модулей с условиями (при желании сможете добавить сколько угодно позиций).
    • 9 вариантов оформления модулей (оформление через суффиксы, т.е. изменять внешний вид любого модуля можно через админку).
    • 2 фона и 2 цветовые палитры сайта (можно изменять в админке).
    • Переопределены шаблоны для стандартных компонентов и модулей (материал, список материалов, материал в форме блога, контакты, поиск, авторизация, регистрация и прочее).
    • У вашего шаблона будет самый богатый набор типографики для оформления контента. Более 100 готовых стилей для различных элементов.
    • Чистый и правильный код. Правильности вашего шаблона позавидует 90% фрилансеров.



    Для вашего удобства к курсу "Верстка шаблона из макета" прилагаются:

  • Нулевой шаблон. Это шаблон с минимальной структурой и подключенным бутстрапом, который можно установить на Джумла и верстать свой проект. Благодаря нулевому шаблону вы экономите время при создании шаблона с нуля.
  • Готовый шаблон. Вы можете использовать готовый шаблон, который мы создаем в курсе, для обучения, для просмотра кода. А также данный шаблон можно использовать как основу для верстки своих шаблонов.
  • Исходник макета шаблона в формате psd со слоями.
  • Комплект нарезанной графики (для проверки).
  • Переписанные стандартные шаблоны, которые сможете использовать на своих сайтах.
  • Рабочая тетрадь со справочными материалами и домашними заданиями.
  •  

    Итого: 26 уроков.

    Продолжительность: 5 часов 45 минут.

     

    3 модуль. Создание шаблона Joomla из html-шаблона

     

    Бывают ситуации, когда приходит пора переводить старый сайт из статичного html формата на систему управления контентом.

    Иногда при переносе хочется сохранить дизайн старого сайта.

    В этом курсе мы покажем, как из шаблона сайта на HTML сделать шаблон, который можно установить на Joomla.

    Итого: 2 урока.

    Продолжительность: 18 минут.

     

    4 модуль. Обновление шаблона с Joomla 1.5 до Joomla 2.5/3.x

     

    Если у вас сайт на Joomla 1.5 и вы хотите сохранить его дизайн при переходе на новую версию Joomla, то посмотрев эти уроки вы легко обновите шаблон с Joomla 1.5 до 2.5/3.х.

    Итого: 2 урока.

    Продолжительность: 13 минут.

     

     

    Что вы получаете?


    1. Курс "HTML и CSS для начинающих" (26 уроков)
    13 видеуроков по HTML для начинающих
    Рабочая тетрадь со справочными материалами и домашними заданиями по HTML
    13 видеоуроков по CSS для начинающих
    Рабочая тетрадь со справочными материалами и домашними заданиями по CSS
    2. Курс "Верстка шаблона для Joomla 2.5 / 3.х (26 уроков)
    26 видеоуроков по верстке отзывчивого шаблона с нуля до готового шаблона.
    Полный комплект инструментов для верстки шаблона
    Нулевой шаблон - чистый шаблон полностью подготовленный для начала верстки
    Шаблоны для вывода стандартных компонентов и модулей, сверстанные
    на bootstrap (скопировал и готово).
    Макет шаблона (psd со слоями) + готовый шаблон для проверки
    Рабочая тетрадь со справочными материалами и домашними заданиями.
    3. Курс "Создание шаблона Joomla из HTML-шаблона" (2 урока)
    Комплект из 2-х видеоуроков.
    Рабочая тетрадь со справочными материалами и домашними заданиями.
    4. Курс "Обновление шаблона с Joomla 1.5 до 2.5 / 3.х (2 урока)
    Комплект из 2-х видеоуроков.
    Рабочая тетрадь со справочными материалами и домашними заданиями.
    5. Бонусы (в описании не анонсированы)
    Бонус 1: Главный элемент дизайна вашего сайта (1 урок)
    Бонус 2: Отзывчивый контент (4 урока)
    Бонус 3: Два профессиональных psd - макета для практики верстки
    6. Гарантированная поддержка по курсу на нашем закрытом форуме
    Помощь в работе с курсом и ответы профессионалов на вопросы по верстке вашего шаблона.
    В результате

    1. Вы СОЗДАДИТЕ ПРОФЕССИОНАЛЬНЫЙ ШАБЛОН ДЛЯ JOOMLA с отзывчивым дизайном, используя лучшее решение - фреймворк Twitter Bootstrap.
    2. Вы будете знать ваш шаблон от и до. Как следствие сможете легко его дорабатывать под ваши нужды.
    3. Вы сэкономите деньги и нервы на разработе шаблона фрилансерами. Вам не нужно больше по несколько раз объяснять что делать, пинать, ругаться, а потом еще и платать за каждую доработку шаблона.
    4. Кроме этого вы сами сможете монетизировать навык верстки шаблона и зарабатывать примерно по 10000-15000 руб. за шаблон, это 7-10 дней работы.
      Причем, вы будете вне конкуренции, предлагая заказчикам современные качественные шаблоны.
      Большинство доморощенных фрилансеров до сих пор верстают шаблоны «по старинке».

    Пройдя курс вы станете мастером и перейдете на следующий уровень в работе с сайтами. Отныне вы легко сможете верстать потрясающие шаблоны.

     

    Создайте свой шаблон для Joomla качественнее и дешевле в 3,5 раза, чем фрилансеры и веб-студии

    • Курс "HTML и CSS для начинающих"
      Стоимость: 900 руб.
    • Курс "Верстка шаблона для Joomla"
      Стоимость: 2991 руб.
    • Курс "Обновление шаблона с Joomla 1.5 до 2.5/3.х
      Стоимость: 650 руб.
    • Курс "Превращаем HTML-шаблон в шаблон Joomla"
      Стоимость: 850 руб.
    • Поддержка на закрытом форуме
    • Бонусы
      Ценность: 950 руб.
    • Skype-консультация
      (3 часа)
      Стоимость: 3000 руб
    • Cтоимость комплекта при покупке по элементам

    • Cтоимость комплекта для вас

    БАЗОВЫЙ













    • 3744 руб.

    3120 руб.

    Электронная версия

    СКАЧАТЬ
    HOT

    ПРОФИ











    • 4464 руб.

    3720 руб.

    Электронная версия

    СКАЧАТЬ

    Получить наложенным платежом / курьером

    ПОЛУЧИТЬ

    ГУРУ











    • 9396 руб.

    7830 руб.

    Электронная версия

    СКАЧАТЬ
    Приобретая курс вы экономите деньги на:

    • Разработке шаблона (фрилансеры за верстку шаблон просят 10-15 тыс.руб., экономия в 3-5 раз).
    • Доработке шаблона (как правило после сдачи шаблона заказчику приходят гениальные мысли по улучшению и эти доработки заказчик оплачивает из своего кармана).
    • А так же вы инвестируете деньги в свои знания. Один шаблон, созданный вами на заказ сразу несколько раз окупает все затраты на курс.

    Варианты доставки

    1. Электронная версия

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

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

    Электронная версия предоставляется к каждому тарифу.

    Размер курса.
    Базовый комплект: 1.1 Гб. Профи и Гуру: 2.1 Гб.

     

    2. Наложенный платеж по России, Украине, Казахстану

    Удобный вариант доставки, который позволяет оплатить диск при получении на почте.

    Срок доставки: 7-14 дней.

     

    3. Курьерская доставка по России, Украине, Казахстану

    Доставка курса прямо к вашей двери. Оплата наличными курьеру.

    Курьерская доставка осуществляется в России (67 городов, 4-9 дней), Украине (все города), Казахстан (18 городов, 1-5 дней)

     

    Наложенным платежом и курьером можно заказать курс только в комплектации "Профи".

    Стоимость курса наложенным платежом и курьером дороже на 350 руб.

    Варианты оплаты

    1. Электронные платежные системы

    Вы можете оплатить курс почти любой электронной валютой.

    Мы принимаем: Webmoney, Яндекс.Деньги, Paypal, Рбк-мани, Qiwi-кошелек, Moneymail, Единый кошелек, Liqpay, Деньги@mail.ru.

    Время зачисления платежа: 1-3 минуты.

    2. Банковские платежи

    Варианты:

    • Оплата банковской картой (Visa / Mastercard).
      Время зачисления платежа: 1-3 минуты.
    • Оплата через Интернет-банк (Альфа-клик, Телебанк и прочее).
      Время зачисления платежа: 1-3 минуты.
    • Оплата по квитанции в отделении банка.
      Время зачисления: 2-3 рабочих дня.

    3. Терминалы оплат и наличными

    Варианты: Qiwi, Элекснет, Кассира нет.
    Время зачисления: 12-24 часа.

    4. Международные переводы

    Переводы по системам Контакт и Юнистрим.
    Время зачисления: 12-24 часа.

    5. Оплата с расчетного счета организации

    Если вы хотите оплатить с расчетного счета организации, напишите нам в чате комплектацию курса и реквизиты. И мы выставим счет для оплаты.
    Время зачисления: 1 день.

    6. Прочие варианты оплат

    Варианты: в салонах Евросети и Связного, СМС с операторов МТС и Билайн.

    А так же, если выбрали доставку наложенным платежом или курьером, то можно оплатить наличными курьеру или на почте при получении посылки.

     

    Если выбрана электронная доставка, то сразу после зачисления оплаты ссылки на курс будут отправлены вам на почту.

    Выбрать вариант оплаты вы сможете на странице заказа.



    С нашими гарантиями вы полностью защищены от финансовых рисков и потери времени.

    Мы предоставляем следующие гарантии:

    1. Гарантия доставки


    Поддержка

    Мы занимаемся обучением в формате видеокурсов уже более 5 лет. Все механизмы по доставе тщательно отлажены.

    1. Электронная версия курса.

    Вы получаете электронную версию курса автоматически после зачисления оплаты. Для вашего удобства мы предоставляем 3 варианта ссылок для скачивания: iso образ, архив диска, а так же архив диска разбитый по 500 Мб для удобства скачивания при медленном интернете.

    Все файлы хранятся на выделенных серверах компании amazon.com. Это гарантирует постоянную доступность и самую высокую скорость передачи. Вы сможете быстро скачать курс.


    2. Физическая версия курса.

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

    Отправкой наших дисков наложенным платежом и курьером занимается компания USEND. Это крупная компания, которая более 4-х лет занимается логистикой. Все диски надежно упакованы и даже Почта России не в силах помешать доставить вам диск в идеальной целости.

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

    2. 100% гарантия на возврат денег в течении 60 дней


    Гарантия

    Мы более 1.5 лет работали над записью этого курса. В данном курсе мы вам предоставляем самые современные инструменты для создания успешных шаблонов. Мы уверены в качестве нашего курса.

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

    Мы гарантируем вам возврат денег за курс без лишних разговоров, если вы захотите вернуть нам курс после покупки. Чтобы воспользоваться гарантией вам достаточно написать нам в службу поддержки и выслать диск по обратному адресу (если заказывали физический диск).

    Срок гарантии 60 дней. В течении этого времени вы можете отказаться от покупки и вернуть свои деньги.


    3. Гарантия надежной поддержки


    Поддержка

    Мы гарантируем оказывать вам поддержку по работе с курсом и верстке вашего шаблона на специальном закрытом форуме для обучения.

    Максимальное время ответа - 24 часа с момента написания вопроса (с понедельника по пятницу).

    Если наш специалист превысит лимит времени на ответ хотя бы на минуту, то мы вам выплатим 300 руб. Ответы предоставляются с понедельника по пятницу.

    Данные для доступа на Форум поддержки будут высланы вам автоматически после покупки курса.

    Срок поддержки: 2 года с момента покупки курса.





    Ответы на вопросы


    Удобные варианты оплаты для жителей Украины:

    + Банковской картой.

    + Liqpay.

    + Наложенным платежом или Курьером (очень быстрая доставка по Украине).

    Доставка через интернет, т.е. ссылки для скачивания.

    Сразу после зачисления оплаты вам на почту придет 4 письма:

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

    Активация курса происходит в автоматическом режиме. Вы можете активировать курс на 5 своих компьютерах.

    Курс запускается под Windows (любой версии) и Mas OS.

    Куре не работает под Linux и на бытовых DVD-плеерах.
    В курсе мы делаем шаблон для Joomla 2.5 и Joomla 3.x.
    Не устареет.

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

    Joomla 3-ей серии полностью работает на Twitter Bootstrap.



    Посмотрите отзывы на другие курсы нашей команды.

    Отзывы на ДРУГИЕ наши курсы:

    Азамат Ушанов

    http://azamatushanov.com



    Сергей Мамистов

    http://way2dream.ru



    Игорь Костулян

    http://newpenta.ru






    P.S. На данный момент имея сайт без отзывчивого дизайна вы теряете 30% клиентов. К концу 2013 года эта цифра будет больше 50%, т.к. по прогнозам статистиков мобильный трафик обгонит компьютерный.

    Если ничего не изменять, то в ближайшее время можно потерять до 50% прибыли.

     

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