РЭДЛАЙН
Лучшие решения для Вас и Вашего бизнеса!
На нашем сайте вы можете получить информацию о веб-разработке, обслуживании и продвижении сайта. Интернет-маркетинге. SEO (поисковой оптимизации). Контекстной и медийной рекламе в Интернете. SMM. Регистрации доменов и хостинговых услугах. И современном дизайне сайтов. Вообщем того что касается веб-разработки, а также много другой полезной информации из мира интернета, бизнеса и интернет-технологий...
Создаем доступные и современные сайты, которые работают! Обслуживаем и эффективно продвигаем интернет-проекты с 2006 года!
Главная Web-мастеру Что нового в jQuery Mobile 1.3


Что нового в jQuery Mobile 1.3

jQuery Mobile - это удобный JavaScript фрэймворк, который облегчает работу над созданием мобильных веб-приложений и сайтов, адаптированных под мобильные устройства. На прошлой неделе вышел jQuery Mobile 1.3. По сравнению с версией 1.2, нас ждёт большое количество усовершенствований и новых фишек. В этой статье вы узнаете о самых важных изменениях, и узнаете, как использовать jQuery Mobile 1.3, для того чтобы улучшить ваши сайты и веб-приложения.

Мы рассмотрим следующие темы:

  • Улучшение “отзывчивого” дизайна
  • Использование “сеток”
  • Два вида таблиц для отображения данных
  • Новый виджет панели
  • Улучшения поля выбора диапазона и других элементов форм
  • Новый метод navigate для более гибкого управления историей
  • Новый простой способ создания поля с автозаполнением
  • Новые настройки для диалоговых и всплывающих окон
  • Новый иконки
  • Различные усовершенствования самого фрэймворка и документации

Начнём мы с разбора понятия “отзывчивый” дизайн и рассмотрим, как jQuery Mobile 1.3 может помочь нам в создании подобных веб-страниц.

Улучшение “отзывчивого” дизайна

Начиная с версии 1.3, jQuery Mobile больше направлен на создание “отзывчивого” дизайна. Благодаря этой технике, вы сможете создать веб-страницы, которые смогут адаптироваться к разным устройствам и браузерам. К примеру, при просмотре вашего сайта с простого PC монитора, вы можете отображать колонку с контентом с левой стороны, а боковую панель - с правой. Открыв ту же страницу на мобильном устройстве, боковая колонка должна переместиться под колонку с основным контентом, для того чтобы та расширилась и заполнила всю ширину экрана мобильного устройства.

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

В следующей секции вы увидите несколько способов использования jQuery Mobile для реализации подобных задач. Начнём мы с разбора некоторых основ, где вы узнаете такое понятие, как контрольные точки, которые являются ключевыми элементами в построении “отзывчивого” дизайна.

Новые статьи в документации

Участники команды jQuery Mobile добавили новую статью, которая называется Going Responsive. В ней рассматриваются 3 ключевых элемента построения “отзывчивого” дизайна:

  • Медиа запросы
  • “Отзывчивый” макет, сетка
  • Гибкие изображения и другие элементы

В этой статье довольно-таки хорошим образом описаны “первые” шаги по построению “отзывчивого” дизайна.

Контрольные точки

Контрольные точки - это ключевое понятие в “отзывчивом” дизайне. По сути, это определённая ширина браузера (обычно заданная в px или em), достигнув которой дизайн меняется. Для обычных экранов используются одни контрольные точки, которые отображают дизайн в одном виде, для широких - другие. Таким образом, один и тот же дизайн, как правило, содержит от 1 до 3 контрольных точек.

Для создания контрольной точки необходимо воспользоваться CSS медиа запросом, задав значения min-width и max-width. Для jQuery Mobile размеры лучше писать в em, чем в px; В следующих секциях вы увидите примеры создания контрольных точек.

Использование сеток

В jQuery Mobile заложена простая система создания сеточного макета. Для её применения просто создайте какой-то контейнер и задайте ему класс ui-grid-*. Всем внутренним элементам выставите класс ui-block-*.

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

<div class="ui-grid-b myGrid">
  <div class="ui-block-a">Block A</div>
  <div class="ui-block-b">Block B</div>
  <div class="ui-block-c">Block C</div>
</div>

… а вот и медиа запрос, который установит контрольную точку со значением 50 em, для того чтобы сделать этот макет “отзывчивым”:

@media all and (max-width: 50em) {
  .myGrid .ui-block-a,
  .myGrid .ui-block-b,
  .myGrid .ui-block-c,
  .myGrid .ui-block-d,
  .myGrid .ui-block-e {
    width: 100%;
    float: none;
  }
}

Опробуйте данный пример. Измените размер вашего браузера, и вы увидите, как меняется расположение элементов после того, как ширина сократится до 50 em:

 

“Отзывчивая” сетка в действии. Если экран узкий, то элементы помещаются друг под другом, если же широкий, то выстраиваются в линию.

“Отзывчивые” таблицы

“Отзывчивые” таблицы - это новая фишка в jQuery Mobile 1.3. Данная техника удобным для чтения образом отображает большое количество табличных данных на разных устройствах и мониторах.

“Отзывчивые” таблицы делятся на 2 типа: reflow (перетекание) и column toggle (переключение колонок).

Режим “reflow” (перетекание)

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

Следующий пример демонстрирует, как выстраиваются ячейки в каждой строке при применении jQuery Mobile:

<table data-role="table" id="bookList" class="table-stroke table-stripe">
 
  <thead>
    <tr>
      <th>Title</th>
      <th>Author</th>
      <th><abbr title="Year of Publication">Year</abbr></th>
    </tr>
  </thead>
 
  <tbody>
    <tr>
      <th>The Grapes of Wrath</th>
      <td>John Steinbeck</td>
      <td>1939</td>
    </tr>
    <tr>
      <th>The Trial</th>
      <td>Franz Kafka</td>
      <td>1925</td>
    </tr>
    <tr>
      <th>The Hobbit</th>
      <td>J. R. R. Tolkien</td>
      <td>1937</td>
    </tr>
    <tr>
      <th>A Tale of Two Cities</th>
      <td>Charles Dickens</td>
      <td>1859</td>
    </tr>
  </tbody>
 
</table>

Добавим медиа запрос, чтобы оживить #bookList. К примеру, укажем, что ячейки нужно отображать вертикально, если контрольная точка не превышает 30 em. Если же ширина браузера больше 30 em, то отобразим таблицу в обычном виде:

@media all and ( min-width: 30em ) {
 
  /* Show the table header rows and set all cells to display: table-cell */
  #bookList td,
  #bookList th,
  #bookList tbody th,
  #bookList tbody td,
  #bookList thead td,
  #bookList thead th {
    display: table-cell;
    margin: 0;
  }
 
  /* Hide the labels in each cell */
  #bookList td .ui-table-cell-label,
  #bookList th .ui-table-cell-label {
    display: none;
  }
}

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


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

Режим “column toggle” (переключение колонок)

Работа данного режима кардинально отличается от предыдущего. На этот раз при создании таблицы нам необходимо указать специальный атрибут data-mode="columntoggle". Затем каждому элементу th мы можем задать приоритет в атрибуте data-priority (1 высший, 6 низший). После этого jQuery Mobile отобразит колонки таблице в зависимости от заданного нами приоритета и в зависимости от ширины экрана. На широких мониторах будут отображаться все колонки, а на узких - только самые важные.

В добавок к этому, jQuery Mobile добавляет специальную кнопку “Columns...”, для того чтобы пользователь сам смог выбрать какие колонки он хочет видеть, а какие нет.

Если атрибут data-priority не задан, то колонка будет отображаться при любом раскладе.

После того как мы создали “column toggle” таблицу, нам необходимо создать CSS медиа запрос, который будет отображать или не отображать колонки в зависимости от размера экрана пользователя.

А вот и код:

<table data-role="table" id="bookList" data-mode="columntoggle" class="table-stroke table-stripe" >
 
  <thead>
    <tr>
      <th>Title</th>
      <th data-priority="1">Author</th>
      <th data-priority="3"><abbr title="Year of Publication">Year</abbr></th>
      <th data-priority="2">Price</th>
    </tr>
  </thead>
 
  <tbody>
 
    <tr>
      <th>The Grapes of Wrath</th>
      <td>John Steinbeck</td>
      <td>1939</td>
      <td>$14.99</td>
    </tr>
    <tr>
      <th>The Trial</th>
      <td>Franz Kafka</td>
      <td>1925</td>
      <td>$7.99</td>
    </tr>
    <tr>
      <th>The Hobbit</th>
      <td>J. R. R. Tolkien</td>
      <td>1937</td>
      <td>$6.99</td>
    </tr>
    <tr>
      <th>A Tale of Two Cities</th>
      <td>Charles Dickens</td>
      <td>1859</td>
      <td>$9.99</td>
    </tr>
 
  </tbody>
 
</table>

Итак, только что мы создали таблицу с id #bookList и задали атрибут data-mode=”columntoggle”. Далее трём колонкам задали приоритет в атрибуте data-priority. Колонка title будет отображаться всегда. Если же экран пользователя будет расширяться, то тогда постепенно появятся колонки author, price и year.

Давайте создадим соответствующий медиа запрос и укажем, при каком размере экрана каким колонкам отображаться:

/* Show priority 1 at 25em */
@media screen and (min-width: 25em) {
   #bookList th.ui-table-priority-1,
   #bookList td.ui-table-priority-1 {
     display: table-cell;
   }
}
 
/* Show priority 2 at 35em */
@media screen and (min-width: 35em) {
   #bookList  th.ui-table-priority-2,
   #bookList td.ui-table-priority-2 {
     display: table-cell;
   }
}
 
/* Show priority 3 at 45em */
@media screen and (min-width: 45em) {
   #bookList  th.ui-table-priority-3,
   #bookList td.ui-table-priority-3 {
     display: table-cell;
   }
}
 
/* Manually hidden */
#bookList th.ui-table-cell-hidden,
#bookList td.ui-table-cell-hidden {
  display: none;
}
 
/* Manually shown */
#bookList th.ui-table-cell-visible,
#bookList td.ui-table-cell-visible {
   display: table-cell;
}

Вкратце наши медиа запросы настроены так: если ширина экрана 25 em и выше, то отобразится колонка с приоритетом 1; если 35 em и выше, то появятся колонки с приоритетом 2; ну и если 45 и выше, то отобразится колонка с приоритетом 3. Также в приведённом коде есть ещё несколько медиа запросов, которые направлены на отображение кнопки “Columns...” для выбора отображаемых колонок.

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


Демонстрация режима таблицы “toggle column”. При малых размерах экранов отображаются колонки с наибольшим приоритетом (1 и выше); на более широких экранах с наименьшим приоритетом (6 и ниже).

Новый виджет панели

В jQuery Mobile 1.3 появился совершенно новый элемент панели. Он очень прост в использовании, и его легко настроить так, чтоб он появлялся с левой или правой стороны экрана. Пользователь может скрыть эту панель, если нажмёт за пределы панели или клавишу Esc.

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

Настройка панели:

  1. Для создания панели нам потребуется div с атрибутом data-role=”panel”. Данная панель должна располагаться в контейнере с атрибутом data-role="page" до или после div-ов с заголовком, контентом и футером.
  2. Для создания кнопки, открывающей панель, просто сошлитесь на id панели и задайте соответствующую роль. Пример: ....

Для контроля способа появления панели добавьте атрибут data-display:

data-display="reveal" помещает панель под страницу. Для её появления используется эффект слайда. Используется по умолчанию.

data-display="overlay" панель выплывает с верхней части страницы.

data-display="push" опять применяется эффект слайда, но на странице и панели одновременно.

Также мы можем контролировать, с какой стороны будет появляться панель, добавив атрибуты data-position="left" или data-position="right". По умолчанию панель возникает с левой стороны.

Следующий код содержит фрагмент создания панели и кнопки для её появления:

<div data-role="page">
 
  <div data-role="panel" data-display="overlay" data-theme="d" id="choosePet">
    <ul data-role="listview" data-theme="d">
      <li data-role="list-divider">Select Your Pet:</li>
      <li><a href="#" data-rel="close">Cat</a></li>
      <li><a href="#" data-rel="close">Dog</a></li>
      <li><a href="#" data-rel="close">Rabbit</a></li>
      <li><a href="#" data-rel="close">Guinea Pig</a></li>
      <li><a href="#" data-rel="close">Parrot</a></li>
      <li data-theme="d" data-rel="close">Cancel</li>
    </ul>
  </div>
 
  <div data-role="header" data-position="fixed">
    <h1>jQuery Mobile 1.3: Panels</h1>
  </div>
 
  <div data-role="content">
    <h1>jQuery Mobile 1.3: Panels</h1>
    <a href="#choosePet" data-role="button">Pets</a>
  </div>
 
</div>

Для создания кнопки закрытия панели также можно создать свой элемент, задав ему атрибут data-rel="close".

Теперь давайте посмотрим пример работы панели. Нажмите на кнопку “Pets” для появления панели и попробуйте различные способы её сокрытия.


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

Улучшения поля выбора диапазона и других элементов форм

С момента выхода новой версии был улучшен элемент выбора диапазона значений. Для добавления элемента диапазона с минимальным и максимальным значением вам необходимо создать два элемента <input type="range">. Затем их нужно поместить в div с атрибутом data-role="rangeslider".

Также не забудьте для каждого input элемента добавить label. Отображаемый текст может быть одним и тем же (jQuery Mobile воспользуется первым).

Вот и пример работы слайдера с минимальным и максимальным значениями (двусторонний):

<form>
  <div data-role="rangeslider">
    <label for="priceMin">Price Range ($):</label>
    <input type="range" name="priceMin" id="priceMin" min="0" max="1000" value="0">
    <label for="priceMax">Price Range ($):</label>
    <input type="range" name="priceMax" id="priceMax" min="0" max="1000" value="1000">
  </div>
</form>

Не забудьте глянуть демо работы слайдера:


jQuery Mobile теперь поддерживает слайдер для выбора определённого диапазона в заданных рамках.

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

Новое событие и метод navigate

jQuery Mobile использует Ajax запросы для обеспечения навигации по сайту, т.е. страницы полностью не перезагружаются. Для отслеживания текущей страницы в адресной строке фрэймворк использует метод history.replaceState(), а также событие popstate в новых браузерах, или добавляя хэш url и использование события hashchange на более старых версиях браузеров.

Если вам самим требуется работать с историей навигации, то с таким подходом будет сложно разобраться. К счастью, в jQuery Mobile 1.3 есть новое событие и метод event, которые могут помочь нам в этих задачах:

С помощью метода navigate() мы можем перенаправиться по нужному нам адресу и, в зависимости от желания, записать данные, связанные с URL. В новых браузерах jQuery Mobile воспользуется методом replaceState(), а в более старых - хэшами:

$.mobile.navigate( "#wonderWidget", dataObject );

Для отслеживания изменения URL адреса мы можем воспользоваться событием navigate:

$( window ).on( "navigate", function( event, dataObject ) {
  // Do something with dataObject
} );

Возвращаемый объект также содержит объект state, в котором хранятся такие полезные опции, как url (текущий), hash (текущего url) и direction, направление (forward или back).

Больше о методе и событии navigate вы сможете найти в официальной документации.

Простой способ создания автозаполнения

В jQuery Mobile 1.2 было введено новое событие listviewbeforefilter, благодаря которому мы могли создать “авто заполнение” для текстового элемента формы. Источник данных мог быть как локальным, так и удалённым (данные приходили через ajax запрос). Пример вы можете найти в документации.

В jQuery Mobile 1.3 разработчики пошли ещё дальше и создали специальный атрибут data-filter-reveal, который предназначен для упрощения создания авто заполнения из локальных данных:

  1. Как обычно, создаём список из нужных значений.
  2. Добавляем к элементу атрибуты data-filter="true" и data-filter-reveal="true".

data-filter-reveal="true" сообщит фрэймворку, что тот должен скрыть все возможные варианты ответов. Когда же вы начнёте набирать текст, то форма отобразит вам все возможные варианты.

Пример:

<ul data-role="listview" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Find a pet..." data-inset="true">
  <li><a href="#" data-rel="close">Cat</a></li>
  <li><a href="#" data-rel="close">Dog</a></li>
  <li><a href="#" data-rel="close">Rabbit</a></li>
  <li><a href="#" data-rel="close">Guinea Pig</a></li>
  <li><a href="#" data-rel="close">Parrot</a></li>
</ul>

А вот и демо данного примера. Обратите внимание, что поначалу не отображён ни один из вариантов. jQuery Mobile отобразит их только тогда, когда вы начнёте вводить свой текст.


Используя атрибут data-filter-reveal, вы можете просто и быстро создать авто заполнение для ваших текстовых полей.

Ещё больше примеров вы можете найти в документации.

Диалоговые и всплывающие окна

К диалоговым окнам теперь можно прикрепить атрибут data-close-btn для добавления в заголовке кнопки закрытия диалога. data-close-btn="right" - для размещения кнопки с правой стороны, data-close-btn="none" - чтоб скрыть кнопку. Для удаления закруглённых углов можете воспользоваться атрибутом data-corners="false".

Для всплывающих окон был добавлен атрибут data-dismissible. Если задать ему значение false, то окно исчезнет, когда пользователь кликнет за его пределы (данный атрибут также можно использовать при работе с панелями).

 

Новые атрибуты data-close-btn и data-corners позволяют более гибким образом настроить отображение диалоговых и всплывающих окон.

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

 

Улучшение элементов форм

Также jQuery Mobile 1.3 несёт собой некоторые изменения для элементов форм:

Теперь у любого текстового поля есть кнопка “стирания” текста.
Теперь у каждого текстового элемента доступна кнопка стирания текста (“X”). Для её активации воспользуйтесь атрибутом data-clear-btn="true" в input элементе. Также вы можете назначить скрытый текст с помощью data-clear-btn-text. В конце концов, если данная кнопка вам не нужна, вы можете её убрать следующим образом: data-clear-btn="false".

Новая стилизация элемента загрузки файла.
На данный момент многие мобильные браузеры поддерживают элемент формы для загрузки файла <input type="file">. С новой версии jQuery Mobile использует одну и ту же стилизацию для всех элементов форм.

Другие небольшие изменения.
Теперь input поля лучше смотрятся в IE9 и Windows Phone; Элементы textarea расширяются автоматически при вставке большого количества текста; также input поля теперь отлично взаимодействуют с многобайтовыми кодировками (пр. utf8).

 

Пример добавления кнопки (‘X’) для удаления всего текста из поля.

Улучшение иконок

jQuery Mobile 1.3 предоставляет нам 2 новые иконки в добавок к уже существующим:

  • data-icon="bars" представляет собой три горизонтальные линии. Удобен для обозначения меню.
  • data-icon="edit" отображает карандаш. Удобен для обозначения кнопки редактирования.

Также мы можем настроить отображение уже существующих иконок. Для окраски иконки по умолчанию в чёрный цвет воспользуйтесь CSS классом ui-icon-alt. Для удаления диска вокруг иконки воспользуйтесь классом ui-icon-nodisc.

 

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

Другие улучшения

Помимо всего, что было рассмотрено в данной статье, обновление jQuery Mobile 1.3 содержит и менее значимые улучшения. Вот некоторые из них:

data-corners атрибут для “складываемых” блоков
Теперь вы можете добавить атрибут data-corners="false" к элементам с атрибутами data-role="collapsible" или data-role="collapsible-set", для того чтобы убрать округлённые уголки с различного рода “складываемых” виджетов.

Улучшение панели инструментов
Насколько вы знаете, блоки заголовка и подвала (header и footer) остаются неподвижными во время прокрутки страницы. До сих пор это вызывает некоторые ошибки отображения элементов (особенно в с старых версиях браузеров). В jQuery 1.3 данный глюк был исправлен за счёт использования расширения fixedToolbar.workarounds.js. В результате, размер библиотеки немного увеличился. Если вас не беспокоит правильность отображения элементов в старых браузерах, то данный компонент можно удалить.

Расширяемость события swipe
Теперь у нас есть возможность пользоваться тремя методами, связанными с событием swipe: start, stop, handleSwipe. Это даёт нам возможность более гибким образом обрабатывать событие swipe. Для более подробной информации смотрите Swipe API.

Новый центр демо примеров и документация
С выходом jQuery 1.3 документация была разбита на два сайта. На сайте API вы сможете найти подробную информацию о каждом виджете, его свойствах и методах, глобальных событиях и многое другое. В то же время на сайте центра демо примеров вы сможете найти огромное количество демонстрационных представлений работы jQuery Mobile..

Итог

Обновление jQuery Mobile 1.3 - это как раз то, чего так давно не хватало для настоящего мобильного фрэймворка:

  • Ещё больше внимания уделено процессу создания “отзывчивого” веб дизайна.
  • Была улучшена сетка для построения адаптивных макетов.
  • Были введены 2 новых режима создания “отзывчивых” таблиц.
  • Добавлен новый виджет панели, которую можно отобразить как с правой стороны, так и с левой.
  • Улучшен слайдер выбора диапазона значений.
  • Был введён новый метод и событие navigate() для создания кросс браузерной Ajax навигации.
  • Был введён новый атрибут data-filter-reveal для создания авто заполнения.
  • Предоставлена возможность добавления кнопки закрытия модальных окон.
  • Добавлен атрибут data-dismissible для возможности закрыть всплывающее окно, кликнув за его пределами.
  • Улучшены элементы форм путём добавления кнопки очистки текста, а также стандартизации отображения элементов.
  • Были добавлены две новые иконки и возможность управления их отображением.
  • Добавлена возможность включать или отключать закругленные углы у “складываемых” виджетов.
  • Теперь мы более гибким образом можем обрабатывать событие swipe.
  • И наконец последнее, был открыт центр демо примеров и новый сайт документации по API.

jQuery Mobile 1.3 - это серьёзное и очень важное обновление. Оно также открывает дорогу к релизу jQuery Mobile 1.4, где будет намного легче применять JavaScript и CSS код; появится возможность использовать SVG иконки; появится новый виджет tab, будет ещё больше улучшена работа фрэймворка и многое другое!

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/vkcsg0mxwIs/lessons.php

Что нового в jQuery Mobile 1.3 | | 2013-04-05 23:22:34 | | Статьи Web-мастеру | | jQuery Mobile - это удобный JavaScript фрэймворк, который облегчает работу над созданием мобильных веб-приложений и сайтов, адаптированных под мобильные устройства. На прошлой неделе вышел jQuery | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Дайджест новых статей по интернет-маркетингу на ваш email
Подписаться

Продающие сайты "под ключ"!

Наши сайты зарабытывают вам деньги. Landing-page. Эффективные продающие сайты точно в срок и под ключ! Всего от 14700 рублей
Подробнее...

Интернет-магазины и каталоги "под ключ"!

Эффективные и удобные инструменты торговли (электронной торговли) "под ключ". Продают, даже когда вы спите! Всего от 33800 рублей
Подробнее...

Комплексный интернет-маркетинг и продвижение сайтов

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

Реклама в Yandex и Google

Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров. Всего от 8000 рублей в месяц
Подробнее...

Social media marketing (SMM) — продвижение в социальных медиа

Реклама в Однокласcниках и на Mail.ru Создание, ведение и раскрутка групп и реклама ВКонтакте и Facebook. Всего от 8000 рублей в месяц
Подробнее...

Приглашаем к сотрудничеству рекламные агентства и веб-студии!

Внимание Акция! Приглашаем к сотрудничеству рекламные агентства и различные веб-студии России! Индивидуальные и взаимовыгодные условия сотрудничества.
Подробнее...

Ускоренная разработка любого сайта от 5 дней!

Внимание Акция! Ускоренная разработка любого сайта! Ваш сайт будет готов за 5-10 дней. Вы можете заказать разработку любого сайта "под ключ" за 5-10 рабочих дней, с доплатой всего 30% от его стоимости!
Подробнее...

Ждем новых друзей!

Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
Подробнее...

Приведи друга и получи скидку!

Внимание Акция! Приведи друга и получи скидку! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта, если клиент заказавший наши услуги, пришел по Вашей рекомендации.
Подробнее...

1 2 3 4 5 6 7 8 9

Новые статьи и публикации



Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!

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

Заявка
Позвоните или оставьте заявку на сайте.


Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!


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


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


Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Остались еще вопросы? Просто позвоните и задайте их специалистам
с 2:30 до 11:30 по Мск, звонок бесплатный
Или напишите нам в WhatsApp
с 9:30 до 18:30 по Хабаровску
Или напишите нам в WhatsApp
Веб-студия и агентство комплексного интернет-маркетинга «РЭДЛАЙН» © 2006 - 2024

Профессиональная Веб-разработка. Создание сайтов и магазинов "под ключ" , а также по всей России и зарубежью. Продвижение и реклама. Веб-дизайн. Приложения. Сопровождение. Модернизация. Интеграции. Консалтинг. Продвижение и реклама. Комплексный Интернет-маркетинг.

Оставьте заявку / Задайте вопрос

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услугу

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Обратный звонок

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Подписка на дайджест новостей

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услуги со скидкой \ Бесплатная консультация







КАКИЕ УСЛУГИ ВАС ИНТЕРЕСУЮТ?

КАКИЕ ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ ПОТРЕБУЮТСЯ?

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

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

Что нужно сделать, чтобы заказать создание сайта у нас?

Ну для начала вам нужно представлять (хотя бы в общих чертах), что вы хотите получить от сайта и возможно каким вы хотите его видеть. А дальше все просто. Позвоните нам или оставьте заявку нашим менеджерам, чтобы они связались с Вами, проконсультировали и помогли определиться с подходящим именно Вам сайтом по цене, сроку, дизайну или функционалу. Если вы все ещё не уверены, какой сайт вам нужен, просто обратитесь к нам! Мы вместе проанализируем вашу ситуацию и определим максимально эффективный для вас вариант.

Быстрый заказ \ Консультация

Для всех тарифных планов на создание и размещение сайтов включено:

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

Комплексная раскрутка работает в рамках стратегии развития вашего бизнеса в сети и направлена

Быстрый заказ \ Консультация

ЭФФЕКТИВНОЕ СОПРОВОЖДЕНИЕ (ПОДДЕРЖКА, ОБСЛУЖИВАНИЕ) САЙТОВ

Полный комплекс услуг по сопровождению сайтаМы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.

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

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

Быстрый заказ \ Консультация

Редизайн сайта и Адаптивный веб дизайн

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

Редизайн сайта — создание нового дизайна сайта с целью улучшения внешнего вида, функциональности и удобства использования. Редизайн сайта – это способ преобразовать проект к извлечению из него максимальной отдачи и средств. В современном мире задачами редизайна является поднятие существующего сайта на новый уровень для внедрения новых технологий, при этом сохраняя многолетний сформировавшийся опыт и успешные решения компаний.

Адаптивный дизайн сайтов и веб-приложений

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

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

Быстрый заказ \ Консультация

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

Реклама в поисковых системах Яндекс и Google. Профессиональная настройка рекламы и отслеживание эффективности!

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

Быстрый заказ \ Консультация

Скидка

1500 руб.
Заинтересовались услугами создания, обслуживания или продвижения вашей компании в Интернете?!
Получите 1500 руб.
за он-лайн заявку
Предложение ограничено.

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