Los videos grandes en el fondo de los sitios web son una tendencia bastante popular en el diseño web. Los videos hábilmente aplicados pueden hacer que un sitio web sea más dramático y atractivo para los usuarios.
Además, los fondos de video se pueden reproducir sin problemas y sin "frenos" a diferencia de los fondos creados con JavaScript que requieren que se cargue cierto código e imágenes antes de que el usuario vea el resultado de la animación.
Hay empresas como Powerhouse o Adidas que utilizan el vídeo como telón de fondo de un sitio para transmitir al usuario un mensaje específico o una historia sobre un producto o servicio.
Si bien la forma más popular de crear un fondo de video es usar la etiqueta de video HTML5 junto con algunos opciones css, también debe prestar atención a fuentes de video alternativas, como YouTube. En este caso, no tienes que preocuparte por una respuesta lenta del servidor porque la solicitud irá directamente a YouTube.
En este artículo, te mostraré cómo puedes crear un sitio web genial que use un video de YouTube como fondo. Usaremos jQuery.mb.YTPlayer.js para editar y controlar la apariencia de nuestro video. ¡Entonces empecemos!
Fuentes de descarga
Manifestación
Necesitará:
//Gran contenido de fondo aquí //Acerca del contenido de la sección aquí //Pequeño contenido de la sección de fondo aquí
Ahora necesita llenar cada sección con contenido. En las secciones de fondo grande y fondo pequeño, coloque la clase de patrón para crear una textura ligera en nuestro video. También necesita agregar h1, h2, párrafo y botón.
VIDEO DE YOUTUBE EN EL FONDO Quiero aprender a poner cualquier video de YouTube en el fondo del sitio
¿Se pregunta cómo agregar video al fondo de su sitio web?
¡Es más fácil que nunca! Con jQuery MB.YTPlayer, un complemento de jQuery, puede incrustar cualquier video de YouTube en el fondo de su sitio.
Puede convertir fácilmente cualquier video en Fondo HTML. ¡Sin demoras en la carga de la página y la carga del servidor!
Esto es lo que usamos para configurar el video:
Html ( altura: 100 % ) cuerpo ( fuente: 15 px/23 px "Raleway", sans-serif; margen: 0; relleno: 0; altura: 100 %; ancho: 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 : 10 píxeles; )
Envoltura ( índice z: 600; posición: relativa ) . patrón ( imagen de fondo: url (../imágenes/patrón.png); repetición de fondo: repetición; archivo adjunto de fondo: desplazamiento; ancho: 100%; altura: 100 %; posición: absoluta; arriba: 0; izquierda: 0 ) .divider (imagen de fondo: url (../images/divider.png); pantalla: bloque; ancho: 300 px; altura: 35 px; margen: 10 px automático ) #colorize (color:#f1c40f; familia de fuentes:"Lato",sans-serif; tamaño de fuente:40px)
Es hora de diseñar la sección de fondo grande. Establezca el índice z en 550 y el desbordamiento en oculto. Esto es necesario para evitar que el contenido de YouTube (subtítulos, anotaciones) se muestre en nuestro sitio web. El resto de los estilos son para los encabezados, los botones y la imagen predeterminada (más sobre eso más adelante).
Fondo grande (índice z: 550; alineación de texto: centro; altura: 100%; altura mínima: 100%; posición: relativa; desbordamiento: oculto) .fondo grande .fondo grande-contenedor ( ancho: 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%). :center; margin-bottom:22px; padding-top:20px; display:inline-block; background-attachment:scroll; background-repeat:repeat-x; background-position:top center ) font-family:"Lato", sans-serif; tamaño de fuente: 13 px; transformación de texto: mayúsculas; decoración de texto: ninguna; color: #fff; fondo: transparente; borde: 2 px sólido #fff; relleno: 10 px 14 px; cursor: puntero; espaciado entre letras :2px;alineación de texto:centro; pantalla: bloque en línea; -webkit-transition: facilidad de fondo .4s; -moz-transition: .4s facilidad de fondo; -o-transición: facilidad de fondo de .4s; transición: facilidad de fondo .4s; ) .big-background-btn:hover ( color:#fff; background:rgba(255,255,255,0.20) ) .big-background-default-image ( background:url(../images/sunset.jpg); background-repeat :sin repetición; posición de fondo:centro centro; tamaño de fondo:cubierta; ancho:100 %; alto:100 %; índice z:0; visibilidad de cara posterior:oculto )
Ahora pasemos a la sección acerca de. Establezca el color de fondo en blanco y el relleno en 60 px arriba y abajo y 20 px a la izquierda y a la derecha.
Acerca de la sección (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; fondo-repetir:repetir-x; posición-fondo:centro centro; texto-transformar:mayúsculas) a.about-section-btn ( font-family:"Lato",sans-serif; font-size:13px; text -transformar: mayúsculas; decoración de texto: ninguno; color: #34495e; fondo: transparente; borde: 2px sólido #34495e; relleno: 10px 14px; cursor: puntero; espaciado entre letras: 2px; alineación de texto: centro; visualización: inline-block; -webkit-transition: facilidad de fondo .4s; -moz-transition: facilidad de fondo .4s; -o-transition: facilidad de fondo .4s; transición: facilidad de fondo .4s; ) .about-section-btn: hover ( color:#ffff; fondo: #34495e; )
Para la sección de fondo pequeño, que también sirve como pie de página, estableceremos el ancho en 100 % y el desbordamiento en oculto. También agregaremos algo de relleno en la parte superior e inferior para que nuestro video sea visible. Finalmente, agreguemos estilos para los botones de redes sociales.
Sección de fondo pequeño (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 (tamaño de fuente:40px; color:#f1c40f; font-weight:300; z-index:10; display:inline-block; text-transform:mayúsculas; 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)
Consultas de medios Para que nuestro sitio sea adaptable, agreguemos algunas consultas de medios.Pantalla @media y (ancho máximo: 768 px) ( .about-section-title ( altura de línea: 1 ) ) Pantalla @media y (ancho máximo: 480 px) ( .big-background-title ( tamaño de fuente: 58 px ) .small-background-title ( line-height:1 ) /*.player( display: none;) -> Si desea eliminar el fondo de video en una ventana específica sin complemento*/ ) @media screen y ( max-width: 360px) ( .big-background-title,#colorize ( line-height:1 ) ) @media pantalla y (max-width: 320px) ( .small-background-title ( font-size:30px ) )
jQuery Ahora incluyamos nuestro Video de Youtube. Llamemos a la clase de jugador dentro código jQuery. Coloque el siguiente código antes de la etiqueta del cuerpo de cierre y dentro de las etiquetas.Sin embargo, podemos usar jQuery para agregar imagen de fondo por defecto, si el navegador determina que el usuario accedió al sitio desde un dispositivo móvil.
solución manual
Para determinar si el usuario ha iniciado sesión desde un dispositivo móvil o tableta, podemos ocultar el elemento en un tamaño de pantalla específico. Por ejemplo, queremos eliminar el fondo del video en pantallas de 480 px de ancho. Solo necesita agregar display: none al elemento del jugador:
Pantalla @media y (ancho máximo: 480 px) ( .player( pantalla: ninguno; ) )
En lo que respecta a jQuery, aquí estableceremos la variable is_mobile en falso. A continuación, asegúrese de que la clase de jugador tenga un parámetro display: none. Si es así, agregue la clase de imagen predeterminada de fondo grande a las secciones de fondo grande y fondo pequeño para usar la imagen de fondo predeterminada. De lo contrario, nada cambiará.
(función($) ( $(documento).ready(función() ( var is_mobile = false; if($(".player").css("display")=="none") ( is_mobile = true; ) if (is_mobile == true) ( // Script condicional aquí $(".big-background, .small-background-section").addClass("big-background-default-image"); )else( $( ". reproductor").mb_YTPlayer(); ) )); ))(jQuery);
La solución del complemento jQuery Otra forma de configurar la imagen predeterminada es con el complemento jQuery device.js (http://matthewhudson.me/projects/device.js/). Esto simplificará el proceso de descripción de las condiciones para los diferentes tamaños de pantalla de los dispositivos móviles. Usando este complemento, simplemente podemos escribir el siguiente código:(function($) ( $(document).ready(function() ( //Device.js comprobará si es una tableta o un móvil: http://matthewhudson.me/projects/device.js/ if (!device. tablet() && !device.mobile()) ( $(".player").mb_YTPlayer(); ) else ( //jQuery agregará el fondo predeterminado a la clase preferida $(".big-background, .small- background-section").addClass("big-background-default-image"); ) )); ))(jQuery);
Aquí usé los métodos device.mobile() y device.tablet() para verificar el dispositivo desde el que el usuario inició sesión. Si se cumple la condición, se agrega la clase de imagen predeterminada de fondo grande a las secciones de fondo grande y sección de fondo pequeño. De lo contrario, la clase de jugador permanecerá sin cambios y el video se reproducirá.
Tidying Up Video es una excelente manera de transmitir un mensaje a una audiencia. Puede ser una herramienta poderosa para su sitio web si se usa correctamente.Estoy seguro de que a medida que el diseño web se desarrolle y mejore, surgirán más y más ideas creativas para usar videos en el diseño de sitios web. Espero que hayas aprendido algo en este tutorial. Escriba sus pensamientos y comentarios en los comentarios.
De un traductor. Con todos los deseos y comentarios con respecto a la traducción, por favor contácteme en forma personal. ¡Gracias!
| 16.04.2015
Durante el año pasado, los diseñadores web comenzaron a utilizar cada vez más una forma original de darle vida a un sitio: instalar un video como fondo de página. Una trama interesante o simplemente una imagen "en vivo" en el fondo decorará incluso un sitio de tarjeta de presentación común, interesará al usuario y lo alentará a permanecer más tiempo en el sitio. Hoy compartiremos con ustedes una de las formas de configurar un fondo de video de pantalla completa para un sitio web usando HTML5 y CSS.
Si está firmemente convencido de que desea configurar un video para el fondo del sitio, debe conocer algunos matices:
Para nuestro ejemplo tomamos un vídeo con una resolución de 1920×1080, una duración de 15 segundos y un peso de poco más de 3 MB. Dentro del bloque con el identificador video-bg está nuestro fondo:
La etiqueta tiene los siguientes atributos:
A continuación, tenemos dos etiquetas escritas, donde se indican las URL del video en diferentes formatos: MP4 y WEBM. ¿Por qué incluir un vídeo en múltiples formatos? El hecho es que no todos los navegadores admiten un solo formato de video. Para que todos puedan reconocer el video. navegadores modernos, debe proporcionar un archivo en al menos estos dos formatos. Y el atributo de tipo con los valores apropiados ayuda al navegador a elegir más rápido.
2. CSSNuestra hoja de estilo de fondo se ve así:
#video-bg (posición: fija; arriba: 0; derecha: 0; abajo: 0; izquierda: 0; desbordamiento: oculto; índice z: 1; fondo: url (bg/daisy-stock-poster.jpg) no -repetir #94a233; tamaño de fondo: portada; ) #video-bg > video (posición: absoluta; arriba: 0; izquierda: 0; ancho mínimo: 100 %; alto mínimo: 100 %; ancho: automático; alto : automático; ) @supports (ajuste de objeto: portada) ( #video-bg > video ( arriba: 0; izquierda: 0; ancho: 100 %; altura: 100 %; ajuste de objeto: portada; ) )
Como puede ver en el código, el fondo se establece en toda la página y la imagen (un cuadro del mismo video) se establece como fondo de respaldo. En el caso más extremo, el color de fondo será #94a233.
También hay una directiva @supports en el código que verifica si el navegador admite la propiedad de ajuste de objeto. En caso afirmativo, el fondo se configura para cubrir y se muestra proporcionalmente en diferentes tamaños de pantalla.
Según caniuse.com, la propiedad de ajuste de objeto actualmente es compatible con todos los navegadores excepto explorador de Internet, Firefox 31-35, safari 7, iOS Safari 7.1 y navegador Android 4.1-4.4.
Nota.
La interfaz de usuario en Dreamweaver CC y versiones posteriores se ha simplificado. Como resultado, es posible que algunas de las funciones descritas en este artículo no estén disponibles en Dreamweaver CC y versiones posteriores. Consulte este artículo para obtener más información.
Acerca de las aplicaciones webUna aplicación web es un sitio web que aloja páginas con contenido total o parcialmente sin procesar. El contenido final se genera solo después de que el visitante del sitio solicita la página del servidor web. Debido al hecho de que el contenido final de la página depende de la solicitud creada en función de las acciones del visitante, dicha página se llama dinámica.
El espectro de uso de las aplicaciones web es muy amplio. Esta sección cubre el uso general de las aplicaciones web y proporciona un ejemplo de una aplicación web simple.
Aplicación típica de las aplicaciones webEl uso de aplicaciones web trae ciertos beneficios tanto para los visitantes del sitio web como para los desarrolladores de sitios web.
Las aplicaciones web permiten a los visitantes encontrar rápida y fácilmente la información que necesitan en sitios web ricos en información.
Este tipo de aplicación web le permite buscar contenido, organizarlo y navegarlo de una manera conveniente para sus visitantes. Ejemplos de tales aplicaciones son las redes internas de empresas: Microsoft MSDN (www.msdn.microsoft.com) y Amazon.com (www.amazon.com).
Las aplicaciones web le permiten recopilar, almacenar y analizar los datos recibidos de los visitantes del sitio.
Durante mucho tiempo, el método utilizado fue enviar datos introducidos en formularios HTML para su procesamiento por parte de aplicaciones CGI o trabajadores designados en forma de mensajes de correo electrónico. La aplicación web le permite almacenar datos directamente en la base de datos, así como recibir datos y generar informes basados en los datos recibidos para su análisis. Los ejemplos incluyen páginas bancarias interactivas, páginas de control de inventario, estudios de casos y encuestas, y formularios para comentario con los usuarios
La aplicación web se puede utilizar para actualizar sitios web con contenido que cambia periódicamente.
La aplicación web libera al diseñador web del trabajo rutinario de actualizar constantemente las páginas HTML del sitio. Los proveedores de contenido, como los editores de noticias, son responsables del contenido nuevo, mientras que la aplicación web supervisa Actualización automática sitio. Los ejemplos incluyen la versión web de The Economist (www.economist.com) y el servicio de noticias CNN (www.cnn.com).
Svetlana trabaja como diseñadora web y ya por mucho tiempo utiliza Dreamweaver en su trabajo. Sus responsabilidades incluyen el mantenimiento del sitio web corporativo interno y el sitio de Internet de una empresa mediana con alrededor de 1000 empleados. Un día, un empleado del departamento de personal, Sergey, se dirigió a ella con su problema. El Departamento de Recursos Humanos supervisa el programa de bienestar de los empleados. Como parte de este programa, los empleados reciben puntos especiales por cada kilómetro recorrido caminando, corriendo o andando en bicicleta. Al final del mes, cada empleado envía un informe por correo electrónico a Sergey indicando el número total de kilómetros. Después de eso, Sergey, basado en lo obtenido mensajes electronicos recompensa a los empleados con pequeños premios en efectivo según los puntos obtenidos.
El problema es que el programa de bienestar se ha vuelto muy popular. EN este momento el número de participantes en este programa ha crecido a tal punto que a fin de mes Sergey no tiene tiempo para procesar todos los correo electrónico. Por lo tanto, se dirigió a Svetlana con una pregunta sobre la posibilidad de resolver este problema utilizando tecnologías web.
En respuesta a esto, Svetlana sugirió crear una aplicación web que resolvería las siguientes tareas.
Los empleados ingresarán datos sobre sus logros deportivos en un formulario HTML simple.
Los datos recibidos se almacenarán en la base de datos.
Los puntos se otorgarán en función de los datos recibidos.
Cada empleado puede recibir datos sobre sus resultados.
Al final de cada mes, Sergey tiene la oportunidad de obtener todos los resultados finales.
En el menor tiempo posible, Svetlana creó y lanzó la aplicación requerida, ya que Dreamweaver lo tiene todo. herramientas necesarias para rápido y creación sencilla este tipo de aplicaciones.
Cualquier aplicación web es un conjunto de páginas web estáticas y dinámicas. página web estática- esta es una página que siempre se muestra frente al usuario sin cambios. El servidor web envía la página solicitada por el navegador web sin ninguna modificación. Por el contrario, el servidor realiza cambios en página web dinámica antes de enviarlo al navegador. Debido a que la página cambia, se llama dinámica.
Por ejemplo, puede crear una página que muestre los resultados de un programa de bienestar. En este caso, alguna información (por ejemplo, el nombre del empleado y sus resultados) se determinará en el momento en que el empleado solicite la página.
La siguiente sección analiza cómo funcionan las aplicaciones web con más detalle.
Manejo de páginas web estáticasUn sitio web estático contiene un conjunto de páginas y archivos HTML relacionados alojados en la computadora donde está instalado el servidor web.
El servidor web es software Una que proporciona páginas web en respuesta a las solicitudes de los navegadores web. Por lo general, una solicitud de página se crea cuando hace clic en un enlace en una página web, selecciona un marcador en su navegador o ingresa una URL en Barra de dirección navegador.
El desarrollador determina el contenido final de una página web estática y permanece sin cambios durante el proceso de solicitud de la página. Ejemplo:
Página de información de Trio Motors Acerca de Trio Motors
El desarrollador crea todo el código HTML antes de que la página se aloje en el servidor. Dado que el código HTML no cambia después de publicar la página en el servidor, esta página se denomina estática.
Nota.
Estrictamente hablando, una página "estática" puede no serlo. Por ejemplo, una imagen de marcador de posición o contenido Flash (en forma de archivo SWF) puede dar vida a una página estática. Sin embargo, en este contexto, la página es estática, ya que se envía al navegador sin cambios.
Cuando un servidor web recibe una solicitud para servir una página estática, después de analizar la solicitud, el servidor encuentra la página requerida y la envía al navegador, como se muestra a continuación.
En el caso de las aplicaciones web, faltan algunas secciones del código de la página hasta que un visitante solicita la página. El código que falta se genera mediante algún mecanismo, y solo después de eso, la página se puede enviar al navegador. Este mecanismo de generación de código se analiza en la siguiente sección.
Cuando un servidor web recibe una solicitud de una página web estática, envía la página directamente al navegador. Sin embargo, cuando se solicita una página dinámica, las acciones del servidor web no son tan sencillas. El servidor envía la página. programa especial, que forma la página final. Este programa se denomina servidor de aplicaciones.
El servidor de aplicaciones lee el código en la página, presenta la página final en función del código que leyó y luego lo elimina de la página. Como resultado de todas estas operaciones se obtiene una página estática, que se transmite al servidor web, que a su vez la envía al navegador del cliente. Todas las páginas que recibe el navegador contienen solo código HTML. Representación esquemática del proceso:
El almacenamiento de contenido en una base de datos separa la apariencia de un sitio web del contenido que verán los usuarios. En lugar de crear todas las páginas como archivos HTML separados, solo se escriben plantillas de página para cada tipo de información que se va a presentar. Luego, el contenido se carga en la base de datos, después de lo cual el sitio web lo recuperará cuando los usuarios lo soliciten. Además, puede actualizar la información en una fuente y replicar ese cambio en todo el sitio web sin editar manualmente cada página. Adobe Dreamweaver le permite crear formularios web para insertar, actualizar y eliminar información en una base de datos.
La instrucción del programa para recuperar datos de una base de datos se llama consulta de base de datos. Una consulta consta de criterios de búsqueda expresados mediante un lenguaje de base de datos llamado SQL (Lenguaje de consulta estructurado). El texto de la consulta SQL se encuentra en scripts de página en el lado del servidor o en etiquetas.
El servidor de aplicaciones no puede recuperar datos directamente de la base de datos, porque las bases de datos utilizan formatos específicos para almacenar datos, por lo que un intento de obtener dichos datos se parecerá a un intento de abrir un documento. Microsoft Word mediante el uso editor de texto Bloc de notas o BBEdit. Por lo tanto, el servidor de aplicaciones utiliza un intermediario, el controlador de la base de datos, para conectarse a la base de datos. El controlador de la base de datos es un módulo de software que establece la comunicación entre el servidor de aplicaciones y la base de datos.
Después de que el controlador establece una conexión, se realiza una consulta a la base de datos, como resultado de lo cual se forma un conjunto de registros. conjunto de registros es un conjunto de datos recuperados de una o más tablas de base de datos. El conjunto de registros se devuelve al servidor de aplicaciones, que utiliza los datos recibidos para formar la página.
El siguiente es un ejemplo de una consulta de base de datos SQL simple.
SELECCIONE apellido, nombre, puntos de ajuste DE empleados
El siguiente ejemplo demuestra el proceso de realizar una consulta a la base de datos y devolver los datos resultantes al navegador.
Cualquier base de datos es adecuada para su uso en una aplicación web, siempre que el controlador de base de datos adecuado esté instalado en el servidor.
Para crear aplicaciones de bajo presupuesto, puede usar una base de datos basada en archivos, como una base de datos creada con acceso Microsoft. Si planea crear aplicaciones empresariales confiables, se recomienda utilizar una base de datos de back-end, por ejemplo, basada en servidores de Microsoft. servidor SQL, Oracle 9i o MySQL.
Si la base de datos y el servidor web están ubicados en diferentes computadoras, deberás asegurar una conexión de alta velocidad entre sistemas, ya que de esto dependerá la eficiencia y velocidad de toda la aplicación web.
Desarrollo de paginas dinamicasEl proceso de desarrollo de páginas dinámicas consiste en escribir código HTML básico y luego crear secuencias de comandos del lado del servidor o etiquetas de página HTML que hacen que la página sea dinámica. Si observa el código final, puede ver que el lenguaje de secuencias de comandos está incrustado en el código HTML de la página. En consecuencia, dichos lenguajes de secuencias de comandos se denominan lenguajes integrados en HTML. El siguiente ejemplo utiliza el lenguaje de marcado ColdFusion (CFML).
Nota. Dreamweaver CC y versiones posteriores no son compatibles con CFML.
Página de información de Trio Motors Acerca de Trio Motors
Trio Motors es un fabricante líder de automóviles.
Asegúrese de visitar nuestra página de #departamento#.
Las instrucciones incluidas en esta página hacen lo siguiente:
Se crea una variable con el nombre departamento, después de lo cual se le asigna el valor de cadena "Ventas".
El valor "Ventas" se coloca en el código HTML.
El servidor de aplicaciones devuelve la siguiente página al servidor web:
Página de información de Trio Motors Acerca de Trio Motors
Trio Motors es un fabricante líder de automóviles.
Asegúrese de visitar nuestra página de Ventas.
El servidor web envía la página al navegador, que la muestra de la siguiente manera.
Acerca de Trio Motors
Trio Motors es uno de los principales fabricantes de automóviles.
No olvides visitar nuestra página de ventas.
La elección de un lenguaje de secuencias de comandos o un lenguaje basado en etiquetas depende de las tecnologías de servidor utilizadas. La siguiente es una lista de los idiomas que se usan más comúnmente en tecnologías de servidor apoyado por Dreamweaver.
Lenguaje de marcado ColdFusion (CFML) |
|
Páginas ASP |
|
Dreamweaver puede generar las secuencias de comandos del servidor o las etiquetas necesarias para las páginas, o el desarrollador puede escribir el código necesario mediante el entorno de codificación de Dreamweaver.
Terminología de aplicaciones webEsta sección proporciona definiciones de términos de uso común relacionados con las aplicaciones web.
servidor de aplicaciones
Software que utiliza un servidor web para procesar páginas web que contienen secuencias de comandos o etiquetas del lado del servidor. Cuando se solicitan tales páginas, el servidor web primero las pasa al servidor de aplicaciones para su procesamiento y luego las envía al navegador del cliente. Para obtener más información, consulte Cómo funcionan las aplicaciones web.
Los servidores de aplicaciones más comunes son compatibles con ColdFusion y PHP.
Conectar el popular servicio de Zadarma a 1C ahora es cuestión de unos minutos. Basta con conectar una extensión preparada para la integración de 1C y Zadarma. Cualquier empleado puede realizar la instalación sin ningún problema, incluso la limpiadora Tía Masha, especialista en limpieza.
En primer lugar, nos centramos en las pequeñas empresas que utilizan activamente la centralita de Zadarma y la configuración 1C: Small Business Management 1.6.
como era antesPara integrarse con Zadarma, tenía que usar un marcador especial integrado en 1C, el llamado fondo SIP. Esta opción era adecuada, con varios "si":
En general, si todos los "si" estaban de acuerdo, entonces la integración era posible.
¿Cómo se ha vuelto ahora?Ahora, para la integración de 1C y Zadarma, no importa en absoluto qué terminal se utilice para las llamadas. Podría ser cualquier cosa:
La extensión 1C para Zadarma interactúa con la API, no con el marcador. Por lo tanto, no importa cómo llamará exactamente el usuario.
Fácil de instalarLa instalación consta de 1 paso. Solo mostrarte 2 capturas de pantalla.
Ubicación de la página de inicioEl panel de telefonía de Zadarma aparece automáticamente en la página de inicio. Si de repente el usuario no necesita esto, simplemente puede desmarcar el menú "Ver" - "Configuración de la página inicial".
Obtener claves API de cuenta personal Zadarma
e insértelos en 1C
Y por supuesto, ingresamos el nombre de usuario/contraseña de la cuenta en simplit.io.
Eso es todo, ahora tu 1C está conectado a Zadarma.
Llamadas al hacer clic en 1CDondequiera que veamos el icono de “teléfono”, puedes hacer clic en él y Zadarma comenzará a marcar.
Los detalles "Información de contacto" se encuentran en muchas listas de documentos, directorios; ya no es necesario que ejecute la tarjeta de cliente para llamar. Por ejemplo, puede llamar directamente desde la lista de pedidos, facturas, gastos
Una función que de hecho se ha convertido en estándar y obligatoria al integrar 1C y PBX. Aunque debe tenerse en cuenta que está lejos de estar siempre en demanda, por lo tanto, se puede desactivar en la configuración del Panel de telefonía.
Del mismo modo, puede gestionar la necesidad creación automática documento "Evento- Llamada telefónica". Con la ayuda de este documento, es conveniente dejar comentarios en la llamada.
Y lo más importante, sobre la base de este documento, puede ingresar el Pedido, la Factura y, por lo tanto, la relación entre la llamada y la venta será claramente visible.
Puede adjuntar un recordatorio al documento de Llamada telefónica, lo cual es muy conveniente si el empleado prometió volver a llamar al cliente más tarde.
Historial de llamadas de la centralitaEl historial de llamadas es, por supuesto, algo muy importante. La extensión para integrar 1C y Zadarma ofrece varias opciones para trabajar con el historial.
Por ejemplo, un usuario quiere ver el historial por sí mismo. Similar a la lista de llamadas recientes en nuestro Teléfono móvil. Este historial se puede ver abriendo la pestaña "Historial" en la página de inicio.
Muy a menudo desea ver el historial de un cliente específico, persona de contacto o a un individuo. En el caso de un cliente, necesitamos ver tanto las llamadas a los números de la propia contraparte como a los números de todas sus personas de contacto.
El historial de llamadas con selección por cliente se puede visualizar directamente en su tarjeta. El historial incluye llamadas del cliente y todos sus contactos. Cuando el número pertenece a la propia contraparte, el campo "Contacto" no se rellena.
