Адаптивное целое фоновое изображение с помощью CSS. Что такое веб-приложения и динамические веб-страницы Сокращенная запись CSS

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

Кроме того видео-фоны могут воспроизводиться плавно и без «тормозов» в отличие от фонов, созданны с помощью JavaScript, которые требуют загрузить определенный код и изображения прежде чем пользователь увидит результат анимации.

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

Хотя и наиболее популярным способом создания видео-фона является использование HTML5 видео тега вместе с некоторыми параметрами CSS, стоит также обратить внимание на альтернативные источники видео, например, YouTube. В этом случае, вам не придется переживать о медленном ответе сервера, потому что запрос будет отправляться напрямик в YouTube.

В этой статье, я покажу вам, как можно построить клевый сайт, использующий видео с YouTube в качестве фона. Мы будем использовать jQuery.mb.YTPlayer.js для редактирования и управления внешним видом нашего видео. Итак, приступим!

Скачать исходники
Демо

Вам понадобятся:

//Big Background Content here //About Section Content here //Small Background Section Content here

Теперь необходимо наполнить каждую секцию содержимым. В секции big-background и small-background-section, поместите класс pattern, чтобы создать легкую текстуру на нашем видео. Также нужно добавить h1, h2, параграф и кнопку.

YOUTUBE ВИДЕО НА ЗАДНЕМ ПЛАНЕ Хочу научиться этому Ставьте любое видео с YouTube на фон сайта

Хотите знать, как добавить видео на задний план вашего сайта?
Это проще простого! С помощью jQuery MB.YTPlayer, плагина jQuery, вы можете вставлять любое видео с YouTube на фон сайта.
Вы с легкостью сможете превратить любое видео в HTML фон. Никаких задержек в загрузке страницы и нагрузки на сервера!

Скачать плагин сейчас Мы с социальных сетях

Я использовал шрифт Font Awesome для социальных иконок, которые располагаются в секции small-background-section . Затем мы добавим шаблон для нашего видео, используя плагин jQuery.mb.YTPlayer . Поместите следующий код сразу же за .

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

class player – этот класс используется плагином mb.YTPlayer
videoURL – ссылка на видео
containment – селектор CSS, в котором нужно воспроизвести видео
autoPlay – авто-воспроизведение видео
mute – наличие звука
startAt – время, с которого нужно начать воспроизведение видео
opacity – прозрачность видео

CSS Добавим стили к нашему сайту. Прежде всего определим внешний вид html, body, тегов параграфов и маркированного списка.

Html { height:100% } body { font:15px/23px "Raleway",sans-serif; margin:0; padding:0; height:100%; width:100%; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100% } p { font-size:20px; line-height:140%; text-align:center } ul li { display:inline-block; list-style:none; padding-right: 10px; }

Wrapper { z-index:600; position:relative } .pattern { background-image:url(../images/pattern.png); background-repeat: repeat; background-attachment:scroll; width:100%; height:100%; position:absolute; top:0; left:0 } .divider { background-image:url(../images/divider.png); display:block; width:300px; height:35px; margin:10px auto } #colorize { color:#f1c40f; font-family:"Lato",sans-serif; font-size:40px }

Настало время стилей секции big-background. Установим z-index на 550 и параметр overflow на hidden. Это необходимо для того, чтобы контент YouTube (субтитры, аннотации) не отображались на нашем сайте. Остальные стили нужны для заголовков, кнопок и изображения по умолчанию (об этом чуть позже).

Big-background { z-index:550; text-align:center; height:100%; min-height:100%; position:relative; overflow:hidden } .big-background .big-background-container { width:830px; max-width:100%; display:inline-block; position:absolute; top:50%; left:50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%) } .big-background-title { font-family:"Raleway",sans-serif; font-size:78px; color:#fff; font-weight:300; text-transform:uppercase; text-align:center; margin-bottom:22px; padding-top:20px; display:inline-block; background-attachment:scroll; background-repeat:repeat-x; background-position:top center } a.big-background-btn { font-family:"Lato",sans-serif; font-size:13px; text-transform:uppercase; text-decoration:none; color:#fff; background:transparent; border:2px solid #fff; padding:10px 14px; cursor:pointer; letter-spacing:2px; text-align:center; display:inline-block; -webkit-transition:.4s background ease; -moz-transition:.4s background ease; -o-transition:.4s background ease; transition:.4s background ease; } .big-background-btn:hover { color:#fff; background:rgba(255,255,255,0.20) } .big-background-default-image { background:url(../images/sunset.jpg); background-repeat:no-repeat; background-position:center center; background-size:cover; width:100%; height:100%; z-index:0; backface-visibility:hidden }

Теперь перейдем к секции about-section . Настроим параметр background-color на white и padding на 60px сверху и снизу и 20px слева и справа.

About-section { font-family:"Lato",sans-serif; color:#7f8c8d; background:#fff; padding:60px 20px } .about-section-container { text-align:center; padding-bottom:50px } .about-section-title { font-family:"Raleway",sans-serif; font-size:40px; background:#fff; color:#3d566e; padding:0 35px; margin-bottom:22px; background-attachment:scroll; background-repeat:repeat-x; background-position:center center; text-transform:uppercase } a.about-section-btn { font-family:"Lato",sans-serif; font-size:13px; text-transform:uppercase; text-decoration:none; color:#34495e; background:transparent; border:2px solid #34495e; padding:10px 14px; cursor:pointer; letter-spacing:2px; text-align:center; display:inline-block; -webkit-transition:.4s background ease; -moz-transition:.4s background ease; -o-transition:.4s background ease; transition:.4s background ease; } .about-section-btn:hover { color:#fff; background: #34495e; }

Для секции small-background-section, которая также служит подвалом, мы назначим ширину 100% и параметр overflow на hidden. Мы также добавим немного padding сверху и снизу для того, чтобы было видно наше видео. И наконец добавим стили для кнопок социальных сетей.

Small-background-section { font-family:"Raleway",sans-serif; padding:100px 0; position:relative; width:100%; overflow:hidden } .small-background-container { position:relative; text-align:center } .small-background-title { font-size:40px; color:#f1c40f; font-weight:300; z-index:10; display:inline-block; text-transform:uppercase; margin-bottom:20px; margin-top: 20px; position:relative; background-attachment:scroll; background-repeat:repeat-x; background-position:top center } .socials a { color:#fff } .socials a:hover { color:#bdc3c7 }

Media queries Для того, чтобы наш сайт был адаптивным, добавим немного media queries.

@media screen and (max-width: 768px) { .about-section-title { line-height:1 } } @media screen and (max-width: 480px) { .big-background-title { font-size:58px } .small-background-title { line-height:1 } /*.player{ display: none;} -> If you want to remove the video bg on a specific viewport w/o plugin*/ } @media screen and (max-width: 360px) { .big-background-title,#colorize { line-height:1 } } @media screen and (max-width: 320px) { .small-background-title { font-size:30px } }

jQuery Теперь включим наше YouTube видео. Вызовем класс player внутри кода jQuery. Поместите следующий код перед закрывающимся тегом body и внутрь тегов .
$(function(){ $(".player").mb_YTPlayer(); }); Запасной вариант Фоновое видео с YouTube не будет воспроизводиться на мобильных устройствах и планшетах, так как правила YouTube этого не позволяют.

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

Ручное решение

Чтобы определить, что пользователь зашел с мобильного устройства или планшета, мы можем спрятать элемент на определенном размере экрана. Например, мы хотим убрать видео-фон на экранах шириной 480px. Нужно просто добавить display: none к элементу player:

@media screen and (max-width: 480px) { .player{ display: none; } }

Что касается jQuery, здесь мы установим переменную is_mobile с параметром false. Затем убедимся, что класс player обладает параметрм display: none. Если это так, то добавим класс big-background-default-image к секциям big-background и small-background-section для использования фонового изображения по умолчанию. В обратном случае ничего не изменится.

Решение с помощью плагина jQuery Другой способ установки изображения по умолчанию осуществляется с помощью jQuery плагина device.js (http://matthewhudson.me/projects/device.js/). Это упростит процесс описания условий под различные размеры экранов мобильных устройств. Используя этот плагин, мы можем просто прописать следующий код:

Здесь я использовал методы device.mobile() и device.tablet() для проверки устройства, с которого зашел пользователь. Если условие выполняется, что добавляется класс big-background-default-image к секции big-background и small-background-section . В противном случае класс player останется неизменным и видео будет воспроизводиться.

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

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

От переводчика. Со всеми пожеланиями и замечаниями по поводу перевода прошу обращаться ко мне в личку. Спасибо!

| 16.04.2015

На протяжении прошлого года веб-дизайнеры все чаще стали использовать оригинальный способ оживить сайт – установка видеоролика в качестве фона страницы. Интересный сюжет или просто «живая» картинка на фоне украсит даже обычный сайт-визитку, заинтересует пользователя и подвигнет дольше задержаться на сайте. Сегодня мы поделимся с вами одним из способов установить полноэкранный видео-фон для сайта на HTML5 и CSS.

Если вы твердо убеждены, что хотите установить видео для фона на сайте, необходимо знать кое-какие нюансы:

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

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

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

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

1. HTML

Для нашего примера взят видеоролик с разрешением 1920×1080, продолжительностью 15 секунд и весом чуть больше 3 МБ. Внутри блока с идентификатором video-bg находится наш фон:

Для тега указаны следующие атрибуты:

width – ширина области для воспроизведения ролика;
height – высота области;
autoplay – автоматическое воспроизведение видео;
loop – циклическое повторение видео;
poster – изображение, которое отображается вместо видео, пока оно загружается либо недоступно.

Далее у нас записано два тега , где указаны URL-адреса видео в разных форматах – MP4 и WEBM. Зачем подключать ролик в нескольких форматах? Дело в том, что не все браузеры поддерживают один-единственный формат видео. Чтобы видео смогли распознать все современные браузеры, необходимо предоставить файл хотя бы в этих двух форматах. А атрибут type с соответствующими значениями помогает браузеру быстрее определиться с выбором.

2. CSS

Наша таблица стилей для фона выглядит следующим образом:

#video-bg { position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; z-index: 1; background: url(bg/daisy-stock-poster.jpg) no-repeat #94a233; background-size: cover; } #video-bg > video { position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; } @supports (object-fit: cover) { #video-bg > video { top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } }

Как видно из кода, фон установлен на всю страницу, а в качестве запасного фона задано изображение (кадр из этого же видео). В самом крайнем случае будет задействован цвет фона #94a233 .

Также в коде есть директива @supports , которая проверяет, поддерживает ли браузер свойство object-fit . Если да, то фон принимает значение cover и пропорционально отображается при разных размерах экрана.

Согласно данным с сайта caniuse.com , на сегодняшний день свойство object-fit поддерживается всеми браузерами, кроме Internet Explorer, Firefox 31-35, safari 7, iOS Safari 7.1 и Android Browser 4.1-4.4.

Примечание.

Пользовательский интерфейс в Dreamweaver СС и более поздних версиях стал проще. В результате этого некоторые функции, описанные в этой статье, могут отсутствовать в Dreamweaver CC и более поздних версиях. Дополнительные сведения см. в этой статье .

О веб-приложениях

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

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

Типичное применение веб-приложений

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

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

Данный вид веб-приложений позволяет осуществлять поиск в содержимом, упорядочивать содержимое и перемещаться по нему удобным для посетителей способом. Примерами таких приложений могут служить внутренние сети компаний - Microsoft MSDN (www.msdn.microsoft.com) и Amazon.com (www.amazon.com).

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

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

Веб-приложение может использоваться для обновления веб-сайтов с периодически меняющимся содержимым.

Веб-приложение освобождает веб-дизайнера от рутинной работы постоянного обновления HTML-страниц сайта. Поставщики содержимого, например редакторы новостей, отвечают за наличие свежего материала, а веб-приложение следит за автоматическим обновлением сайта. В качестве примера можно привести веб-версию журнала «The Economist» (www.economist.com) и службы новостей CNN (www.cnn.com).

Пример веб-приложения

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

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

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

Данные о своих спортивных достижениях сотрудники будут вносить в простую HTML-форму.

Полученные данные будут сохраняться в базе данных.

Начисление баллов будет выполняться на основе полученных данных.

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

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

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

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

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

В следующем разделе более подробно рассматриваются вопросы работы веб-приложений.

Обработка статических веб-страниц

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

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

Окончательное содержимое статической веб-страницы определяется разработчиком и остается неизменным в процессе запроса страницы. Пример:

Trio Motors Information Page About Trio Motors

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

Примечание.

Если подходить строго, «статическая» страница может на самом деле таковой не являться. Например, замещающее изображение либо Flash-содержимое (в виде SWF-файла) позволяет «оживить» статическую страницу. Однако в данном контексте страница является статической, поскольку отсылается браузеру без изменений.

Когда веб-сервер получает запрос на выдачу статической страницы, то, после анализа запроса, сервер находит нужную страницу и отправляет ее браузеру, как показано ниже.

A. Веб-браузер запрашивает статическую страницу. B. Веб-сервер находит страницу. C. Веб-сервер отправляет страницу запросившему ее браузеру.

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

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

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

A. B. C. Сервер приложений просматривает страницу на наличие инструкций и выполняет ее создание. D. Сервер приложений возвращает подготовленную страницу на веб-сервер. E.

Хранение содержимого в базе данных позволяет отделить оформление веб-сайта от содержимого, которое будут видеть пользователи. Вместо того чтобы создавать все страницы в виде отдельных HTML-файлов, пишутся только шаблоны страниц для каждого вида представляемой информации. Затем содержимое загружается в базу данных, после чего веб-сайт будет извлекать его при запросах пользователей. Кроме того, можно обновить информацию в одном источнике и продублировать это изменение на всем веб-сайте без редактирования каждой страницы вручную. Adobe Dreamweaver позволяет создавать веб-формы для вставки, обновления и удаления информации в базе данных.

Программная инструкция, предназначенная для получения данных из базы данных, называется запросом к базе данных . Запрос состоит из критериев поиска, выраженных с помощью языка баз данных, называемого SQL (язык структурированных запросов). Текст SQL-запроса располагается в сценариях страниц на стороне сервера либо в тегах.

Сервер приложений не может непосредственно получить данные из базы, поскольку базы данных используют специфические форматы хранения данных, в результате чего попытка получения таких данных будет напоминать попытку открытия документа Microsoft Word с помощью текстового редактора Notepad или BBEdit. Поэтому для подключения к базе данных сервер приложений использует посредника - драйвер базы данных. Драйвер базы данных представляет собой программный модуль, с помощью которого устанавливается взаимодействие между сервером приложений и базой данных.

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

Ниже приводится пример простого запроса к базе данных на языке SQL.

SELECT lastname, firstname, fitpoints FROM employees

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

A. Веб-браузер запрашивает динамическую страницу. B. Веб-сервер находит страницу и передает ее серверу приложений. C. Сервер приложений просматривает страницу на наличие инструкций и выполняет ее подготовку. D. Сервер приложений отправляет запрос драйверу базы данных. E. Драйвер выполняет запрос в базе данных. F. Драйверу возвращается набор записей. G. Драйвер передает набор записей серверу приложений. H. Сервер приложений вставляет данные в страницу и передает страницу веб-серверу. I. Веб-сервер отправляет подготовленную страницу запросившему ее браузеру.

Для использования в веб-приложении пригодна любая база данных при условии, что на сервере установлен соответствующий драйвер базы данных.

Для создания малобюджетных приложений можно использовать файловую базу данных, например базу данных, созданную с помощью Microsoft Access. Если планируется создание надежных корпоративных приложений, рекомендуется использовать серверную базу данных, например, на основе серверов Microsoft SQL Server, Oracle 9i или MySQL.

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

Разработка динамических страниц

Процесс разработки динамических страниц состоит из написания базового HTML-кода и последующего создания серверных сценариев или тегов HTML-страницы, с помощью которых страница становится динамической. Если взглянуть на окончательный код, видно, что язык сценариев встроен в HTML-код страницы. Соответственно, такие языки сценариев называют языками, встроенными в HTML. В следующем примере используется язык разметки ColdFusion Markup Language (CFML).

Примечание . В Dreamweaver CC и более поздних версиях поддержка CFML отсутствует.

Trio Motors Information Page About Trio Motors

Trio Motors is a leading automobile manufacturer.

Be sure to visit our #department# page.

Встроенные в данную страницу инструкции выполняют следующие действия.

Создается переменная с именем department , после чего ей присваивается строковое значение «Sales» .

Значение «Sales» помещается в HTML-код.

Сервер приложений возвращает следующую страницу на веб-сервер:

Trio Motors Information Page About Trio Motors

Trio Motors is a leading automobile manufacturer.

Be sure to visit our Sales page.

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

О компании Trio Motors

Компания Trio Motors является одним из ведущих производителей автомобилей.

Не забудьте посетить страницу нашего отдела продаж.

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

Серверная технология

	ColdFusion Markup Language (CFML)
Страницы ASP

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

Терминология веб-приложений

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

Сервер приложений

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

Наиболее распространенные серверы приложений поддерживают языки ColdFusion и PHP.

Подключение популярного сервиса Zadarma к 1С — теперь это вопрос нескольких минут. Достаточно подключить готовое расширение для интеграции 1С и Zadarma. Установку без проблем сможет выполнить любой сотрудник, даже уборщица тетя Маша специалист по клинингу.

В первую очередь, мы ориентировались на малый бизнес, который активно использует АТС Zadarma и конфигурацию 1С:Управление небольшой фирмой 1.6.

Как было раньше

Для интеграции с Zadarma вам нужно было использовать специальную звонилку, встроенную внутрь 1С — так называемый SIP-фон. Этот вариант подходил, при нескольких «если»:

если 1С установлен на локальном компьютере, а не где-то на терминальном сервере
если пользователь согласен использовать 1С-звонилку вместо настольного телефона

В общем, если сошлись все «если», тогда интеграция была возможной.

Как стало сейчас

Теперь, для интеграции 1С и Zadarma совершенно не важно какое именно конечное устройство используется для звонков. Это может быть что угодно:

настольный телефон
софтфон, установленный в ОС
веб-фон, работающий в браузере

Расширение 1С для Zadarma взаимодействует с API, а не со звонилкой. Поэтому, не важно чем именно пользователь будет звонить.

Простота установки

Установка состоит из 1-го действия. Просто покажем вам 2 скрина.

Размещение на начальной странице

Панель телефонии Zadarma автоматически появляется на начальной странице. Если вдруг пользователю это не нужно, тогда он может просто снять галочку в меню «Вид» — «Настройка начальной страницы».

Простота настройки

Берем ключи API из личного кабинета Zadarma

и вставляем их в 1С

И конечно же вводим логин/пароль учетки на simplit.io.

Все, теперь ваша 1С подключена к Zadarma.

Звонки по клику в 1С

Всюду, где мы видим пиктограмму «телефон», по нему можно кликнуть и Zadarma начнет набор номера.

Реквизиты «Контактная информация» есть во многих списках документов, справочников — больше не нужно бежать в карточку клиента, чтобы позвонить. Например, можно позвонить прямо из списка заказов, счетов, расходных

Карточка клиента при входящем звонке

Функция, которая фактически стала стандартной и обязательной при интеграции 1С и АТС. Хотя следует отметить, что востребована она далеко не всегда, поэтому в настройках Панели телефонии ее можно выключать.

Регистрация звонка документом Событие

Аналогично, можно управлять необходимостью автоматического создания документа «Событие-Телефонный звонок». С помощью этого документа удобно оставлять комментарии к звонку.

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

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

История звонков АТС

История звонков — это конечно же, вещь очень важная. Расширение для интеграции 1С и Zadarma дает несколько вариантов работы с историей.

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

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

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

Тематические материалы: