I video di grandi dimensioni sullo sfondo dei siti Web sono una tendenza abbastanza popolare nel web design. I video abilmente applicati possono rendere un sito Web più drammatico e attraente per gli utenti.
Inoltre, gli sfondi video possono essere riprodotti in modo fluido e senza "freni" a differenza degli sfondi creati con javascript che richiedono il caricamento di determinati codici e immagini prima che l'utente veda il risultato dell'animazione.
Ci sono aziende come Powerhouse o Adidas che utilizzano il video come sfondo di un sito per trasmettere all'utente un messaggio specifico o una storia su un prodotto o servizio.
Mentre il modo più popolare per creare uno sfondo video è utilizzare il tag video HTML5 insieme ad alcuni opzioni CSS, dovresti anche prestare attenzione a fonti video alternative, come YouTube. In questo caso, non devi preoccuparti di una risposta lenta del server perché la richiesta andrà direttamente a YouTube.
In questo articolo, ti mostrerò come creare un fantastico sito Web che utilizzi un video di YouTube come sfondo. Useremo jQuery.mb.YTPlayer.js per modificare e controllare l'aspetto del nostro video. Quindi iniziamo!
Scarica fonti
Demo
Avrai bisogno:
//Grande contenuto di sfondo qui //Informazioni sul contenuto della sezione qui //Piccolo contenuto di sfondo della sezione qui
Ora devi riempire ogni sezione con il contenuto. Nelle sezioni big-background e small-background, posiziona la classe pattern per creare una texture leggera sul nostro video. Devi anche aggiungere h1, h2, paragrafo e pulsante.
VIDEO DI YOUTUBE IN BACKGROUND Voglio imparare a mettere qualsiasi video di YouTube in background nel sito
Ti stai chiedendo come aggiungere video allo sfondo del tuo sito?
È più facile che mai! Con jQuery MB.YTPlayer, un plug-in jQuery, puoi incorporare qualsiasi video di YouTube sullo sfondo del tuo sito.
Puoi facilmente trasformare qualsiasi video in Sfondo HTML. Nessun ritardo nel caricamento della pagina e nel caricamento del server!
Ecco cosa abbiamo usato per impostare il video:
Html ( altezza:100% ) corpo ( font:15px/23px "Raleway",sans-serif; margine:0; padding:0; altezza:100%; larghezza: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 )
È ora di dare uno stile alla sezione del grande sfondo. Imposta z-index su 550 e overflow su nascosto. Ciò è necessario per evitare che i contenuti di YouTube (sottotitoli, annotazioni) vengano visualizzati sul nostro sito web. Il resto degli stili sono per le intestazioni, i pulsanti e l'immagine predefinita (ne parleremo più avanti).
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 ) 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;allineamento del testo:centro; display: blocco in linea; -webkit-transition:.4s background facilitato; -moz-transition:.4s background facilitato; -o-transition:.4s background facilitato; transizione: facilità di sfondo .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 :no-repeat; background-position:center center; background-size:cover; width:100%; height:100%; z-index:0; backface-visibility:hidden )
Ora passiamo alla sezione about . Imposta il colore di sfondo su bianco e il padding su 60px in alto e in basso e 20px a sinistra ea destra.
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: maiuscolo; decorazione-testo:nessuna; colore:#34495e; sfondo:trasparente; bordo:2px solido #34495e; riempimento:10px 14px; cursore:puntatore; spaziatura lettera:2px; allineamento testo:centro; display: inline-block; -webkit-transition:.4s facilità di sfondo; -moz-transition:.4s facilità di sfondo; -o-transition:.4s facilità di sfondo; transition:.4s facilità di sfondo; ) .about-section-btn:hover ( colore:#ffff; sfondo: #34495e; )
Per la piccola sezione di sfondo, che funge anche da piè di pagina, imposteremo la larghezza al 100% e l'overflow a nascosto. Aggiungeremo anche del padding in alto e in basso per rendere visibile il nostro video. Infine, aggiungiamo gli stili per i pulsanti dei social media.
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 query Affinché il nostro sito sia adattivo, aggiungiamo alcune media query.@media screen e (max-width: 768px) ( .about-section-title ( line-height:1 ) ) @media screen e (max-width: 480px) ( .big-background-title ( font-size:58px ) .small-background-title ( line-height:1 ) /*.player( display: none;) -> Se vuoi rimuovere il video bg su un viewport specifico senza plugin*/ ) @media screen e ( max-width: 360px) ( .big-background-title,#colorize ( line-height:1 ) ) @media screen e (max-width: 320px) ( .small-background-title ( font-size:30px ) )
jQuery Ora includiamo il nostro Video Youtube. Chiamiamo la classe del giocatore all'interno codice jQuery. Inserisci il seguente codice prima del tag body di chiusura e all'interno dei tag.Tuttavia, possiamo usare jQuery per aggiungere immagine di sfondo per impostazione predefinita, se il browser determina che l'utente ha effettuato l'accesso al sito da un dispositivo mobile.
Soluzione manuale
Per determinare se l'utente ha effettuato l'accesso da un dispositivo mobile o tablet, possiamo nascondere l'elemento a una dimensione dello schermo specifica. Ad esempio, vogliamo rimuovere lo sfondo del video su schermi larghi 480 px. Devi solo aggiungere display: none all'elemento player:
Schermo @media e (larghezza massima: 480px) ( .player( display: none; ) )
Per quanto riguarda jQuery, qui imposteremo la variabile is_mobile a false. Successivamente, assicurati che la classe del giocatore abbia un display: nessuno parametro. In tal caso, aggiungi la classe big-background-default-image alle sezioni big-background e small-background per utilizzare l'immagine di sfondo predefinita. Altrimenti non cambierà nulla.
(function($) ( $(document).ready(function() ( var is_mobile = false; if($(".player").css("display")=="none") ( is_mobile = true; ) if (is_mobile == true) ( //Script condizionale qui $(".big-background, .small-background-section").addClass("big-background-default-image"); )else( $( ". player").mb_YTPlayer(); ) )); ))(jQuery);
La soluzione del plug-in jQuery Un altro modo per impostare l'immagine predefinita è con il plug-in jQuery device.js (http://matthewhudson.me/projects/device.js/). Ciò semplificherà il processo di descrizione delle condizioni per le diverse dimensioni dello schermo dei dispositivi mobili. Usando questo plugin, possiamo semplicemente scrivere il seguente codice:(function($) ( $(document).ready(function() ( //Device.js controllerà se è Tablet o Mobile - http://matthewhudson.me/projects/device.js/ if (!device. tablet() && !device.mobile()) ( $(".player").mb_YTPlayer(); ) else ( //jQuery aggiungerà lo sfondo predefinito alla classe preferita $(".big-background, .small- background-section").addClass("big-background-default-image"); ) )); ))(jQuery);
Qui ho utilizzato i metodi device.mobile() e device.tablet() per controllare il dispositivo da cui l'utente ha effettuato l'accesso. Se la condizione è soddisfatta, la classe big-background-default-image viene aggiunta alle sezioni big-background e small-background-section. In caso contrario, la classe del giocatore rimarrà invariata e il video verrà riprodotto.
Tidying Up Video è un ottimo modo per trasmettere un messaggio a un pubblico. Può essere uno strumento potente per il tuo sito web se usato correttamente.Sono sicuro che man mano che il web design si sviluppa e migliora, emergeranno sempre più idee creative per l'utilizzo dei video nella progettazione di siti web. Spero che tu abbia imparato qualcosa in questo tutorial. Scrivi i tuoi pensieri e commenti nei commenti.
Da un traduttore. Con tutti i desideri e i commenti relativi alla traduzione, contattatemi in privato. Grazie!
| 16.04.2015
Nell'ultimo anno, i web designer hanno iniziato a utilizzare sempre più un modo originale per ravvivare un sito: l'installazione di un video come sfondo della pagina. Una trama interessante o semplicemente un'immagine "dal vivo" sullo sfondo decorerà anche un normale sito di biglietti da visita, interesserà l'utente e lo incoraggerà a rimanere più a lungo sul sito. Oggi condivideremo con te uno dei modi per impostare uno sfondo video a schermo intero per un sito Web utilizzando HTML5 e CSS.
Se sei fermamente convinto di voler impostare un video per lo sfondo del sito, devi conoscere alcune sfumature:
Per il nostro esempio, abbiamo preso un video con una risoluzione di 1920×1080, una durata di 15 secondi e un peso di poco superiore ai 3 MB. All'interno del blocco con l'identificatore video-bg c'è il nostro background:
Il tag ha i seguenti attributi:
Successivamente, abbiamo scritto due tag, in cui sono indicati gli URL del video in diversi formati: MP4 e WEBM. Perché includere un video in più formati? Il fatto è che non tutti i browser supportano un singolo formato video. In modo che tutti possano riconoscere il video browser moderni, devi fornire un file in almeno questi due formati. E l'attributo type con i valori appropriati aiuta il browser a fare una scelta più velocemente.
2. CSSIl nostro foglio di stile di sfondo ha questo aspetto:
#video-bg ( posizione: fissa; alto: 0; destra: 0; basso: 0; sinistra: 0; overflow: nascosto; z-index: 1; sfondo: 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; ) )
Come puoi vedere dal codice, lo sfondo è impostato sull'intera pagina e l'immagine (un fotogramma dello stesso video) è impostata come sfondo di backup. Nel caso più estremo, il colore di sfondo sarà #94a233 .
C'è anche una direttiva @supports nel codice che controlla se il browser supporta la proprietà object-fit. In caso affermativo, lo sfondo è impostato per coprire e viene visualizzato proporzionalmente a diverse dimensioni dello schermo.
Secondo caniuse.com, la proprietà object-fit è attualmente supportata da tutti i browser tranne Internet Explorer, Firefox 31-35, Safari 7, iOS Safari 7.1 e browser Android 4.1-4.4.
Nota.
L'interfaccia utente in Dreamweaver CC e versioni successive è stata semplificata. Di conseguenza, alcune delle funzionalità descritte in questo articolo potrebbero non essere disponibili in Dreamweaver CC e versioni successive. Vedere questo articolo per ulteriori informazioni.
Informazioni sulle applicazioni webUn'applicazione Web è un sito Web che ospita pagine con contenuto parzialmente o completamente non elaborato. Il contenuto finale viene generato solo dopo che il visitatore del sito richiede la pagina dal server web. A causa del fatto che il contenuto finale della pagina dipende dalla richiesta creata in base alle azioni del visitatore, tale pagina è chiamata dinamica.
Lo spettro di utilizzo delle applicazioni web è molto ampio. Questa sezione riguarda l'utilizzo generale delle applicazioni web e fornisce un esempio di una semplice applicazione web.
Applicazione tipica delle applicazioni webL'uso di applicazioni Web offre alcuni vantaggi sia ai visitatori del sito Web che agli sviluppatori di siti Web.
Le applicazioni Web consentono ai visitatori di trovare rapidamente e facilmente le informazioni di cui hanno bisogno su siti Web ricchi di informazioni.
Questo tipo di applicazione web ti consente di cercare contenuti, organizzarli e navigarli in un modo conveniente per i tuoi visitatori. Esempi di tali applicazioni sono le reti interne delle aziende: Microsoft MSDN (www.msdn.microsoft.com) e Amazon.com (www.amazon.com).
Le applicazioni Web consentono di raccogliere, archiviare e analizzare i dati ricevuti dai visitatori del sito.
Per molto tempo, il metodo utilizzato è stato quello di inviare i dati inseriti in moduli HTML per l'elaborazione da parte di applicazioni CGI o lavoratori designati sotto forma di messaggi di posta elettronica. L'applicazione Web consente di archiviare i dati direttamente nel database, nonché di ricevere dati e generare report basati sui dati ricevuti per l'analisi. Gli esempi includono pagine bancarie interattive, pagine di controllo dell'inventario, studi di casi e sondaggi e moduli per feedback con gli utenti.
L'applicazione Web può essere utilizzata per aggiornare i siti Web con contenuti che cambiano periodicamente.
L'applicazione web libera il web designer dal lavoro di routine di aggiornare costantemente le pagine HTML del sito. I fornitori di contenuti, come i redattori di notizie, sono responsabili dei nuovi contenuti, mentre l'applicazione web monitora aggiornamento automatico luogo. Gli esempi includono la versione web di The Economist (www.economist.com) e il servizio di notizie della CNN (www.cnn.com).
Svetlana lavora come web designer e già per molto tempo usa Dreamweaver nel suo lavoro. Le sue responsabilità includono la manutenzione del sito web aziendale interno e del sito Internet di un'azienda di medie dimensioni con circa 1.000 dipendenti. Un giorno, un impiegato del dipartimento del personale, Sergey, si rivolse a lei con il suo problema. Il dipartimento delle risorse umane sovrintende al programma di benessere dei dipendenti. Nell'ambito di questo programma, i dipendenti ricevono punti speciali per ogni chilometro percorso camminando, correndo o andando in bicicletta. Alla fine del mese, ogni dipendente invia un rapporto via e-mail a Sergey indicando il numero totale di chilometri. Successivamente, Sergey, in base a quanto ottenuto messaggi elettronici premia i dipendenti con piccoli premi in denaro a seconda dei punti ottenuti.
Il problema è che il programma benessere è diventato molto popolare. IN questo momento il numero di partecipanti a questo programma è cresciuto a tal punto che alla fine del mese Sergey non ha il tempo di elaborare tutti i e-mail. Pertanto, si è rivolto a Svetlana con una domanda sulla possibilità di risolvere questo problema utilizzando le tecnologie web.
In risposta a ciò, Svetlana ha suggerito di creare un'applicazione Web che risolvesse le seguenti attività.
I dipendenti inseriranno i dati sui loro risultati sportivi in un semplice modulo HTML.
I dati ricevuti verranno archiviati nel database.
I punti verranno assegnati in base ai dati ricevuti.
Ogni dipendente può ricevere dati sui propri risultati.
Alla fine di ogni mese, Sergey ha l'opportunità di ottenere tutti i risultati finali.
Nel più breve tempo possibile, Svetlana ha creato e lanciato l'applicazione richiesta, poiché Dreamweaver ha tutto strumenti necessari per veloce e creazione semplice questo tipo di applicazioni.
Qualsiasi applicazione Web è un insieme di pagine Web statiche e dinamiche. Pagina web statica- questa è una pagina che viene sempre visualizzata davanti all'utente invariata. Il server Web invia la pagina come richiesto dal browser Web senza alcuna modifica. Al contrario, il server apporta modifiche a pagina web dinamica prima di inviarlo al browser. Poiché la pagina cambia, si chiama dinamica.
Ad esempio, puoi creare una pagina che mostri i risultati di un programma benessere. In questo caso, alcune informazioni (ad esempio, il nome del dipendente e i suoi risultati) verranno determinate nel momento in cui la pagina viene richiesta dal dipendente.
La sezione successiva illustra in modo più dettagliato il funzionamento delle applicazioni Web.
Gestione di pagine Web staticheUn sito Web statico contiene un insieme di pagine e file HTML correlati ospitati sul computer in cui è installato il server Web.
Il server web è Software A che fornisce pagine Web in risposta alle richieste dei browser Web. In genere, viene creata una richiesta di pagina quando si fa clic su un collegamento in una pagina Web, si seleziona un segnalibro nel browser o si immette un URL in barra degli indirizzi navigatore.
Il contenuto finale di una pagina Web statica è determinato dallo sviluppatore e rimane invariato durante il processo di richiesta della pagina. Esempio:
Trio Motors Pagina informativa sui motori Trio
Tutto il codice HTML viene creato dallo sviluppatore prima che la pagina sia ospitata sul server. Poiché il codice HTML non cambia dopo che la pagina è stata pubblicata sul server, questa pagina è chiamata statica.
Nota.
A rigor di termini, una pagina "statica" potrebbe non esserlo effettivamente. Ad esempio, un'immagine segnaposto o un contenuto Flash (sotto forma di file SWF) può dare vita a una pagina statica. Tuttavia, in questo contesto, la pagina è statica, poiché viene inviata al browser senza modifiche.
Quando un server Web riceve una richiesta per servire una pagina statica, dopo aver analizzato la richiesta, il server trova la pagina richiesta e la invia al browser, come mostrato di seguito.
Nel caso delle applicazioni web, alcune sezioni del codice della pagina mancano fino a quando la pagina non viene richiesta da un visitatore. Il codice mancante viene generato da qualche meccanismo e solo dopo la pagina può essere inviata al browser. Questo meccanismo di generazione del codice è discusso nella sezione successiva.
Quando un server Web riceve una richiesta per una pagina Web statica, invia la pagina direttamente al browser. Tuttavia, quando viene richiesta una pagina dinamica, le azioni del server Web non sono così semplici. Il server invia la pagina programma speciale, che forma la pagina finale. Tale programma è chiamato un server delle applicazioni.
Il server delle applicazioni legge il codice sulla pagina, esegue il rendering della pagina finale in base al codice letto e quindi la rimuove dalla pagina. Come risultato di tutte queste operazioni si ottiene una pagina statica, che viene trasmessa al server web, che a sua volta la invia al browser del client. Tutte le pagine che il browser riceve contengono solo codice HTML. Rappresentazione schematica del processo:
L'archiviazione del contenuto in un database separa l'aspetto grafico di un sito Web dal contenuto che gli utenti vedranno. Invece di creare tutte le pagine come file HTML separati, vengono scritti solo i modelli di pagina per ogni tipo di informazione da presentare. Il contenuto viene quindi caricato nel database, dopodiché il sito Web lo recupererà quando gli utenti lo richiedono. Inoltre, puoi aggiornare le informazioni in un'unica fonte e replicare tale modifica nell'intero sito Web senza modificare manualmente ogni pagina. Adobe Dreamweaver consente di creare moduli Web per l'inserimento, l'aggiornamento e l'eliminazione di informazioni in un database.
Viene chiamata l'istruzione del programma per il recupero dei dati da un database interrogazione della banca dati. Una query è costituita da criteri di ricerca espressi utilizzando un linguaggio di database chiamato SQL (Structured Query Language). Il testo della query SQL si trova negli script di pagina sul lato server o nei tag.
Il server delle applicazioni non può recuperare direttamente i dati dal database, poiché i database utilizzano formati specifici per l'archiviazione dei dati, per cui un tentativo di ottenere tali dati assomiglierà a un tentativo di aprire un documento Microsoft Word usando editor di testo Blocco note o BBEdit. Pertanto, il server delle applicazioni utilizza un intermediario, il driver del database, per connettersi al database. Il driver del database è un modulo software che stabilisce la comunicazione tra il server delle applicazioni e il database.
Dopo che il driver ha stabilito una connessione, viene effettuata una query al database, a seguito della quale viene formato un set di record. Set di recordè un insieme di dati recuperati da una o più tabelle di database. Il recordset viene restituito al server delle applicazioni, che utilizza i dati ricevuti per formare la pagina.
Di seguito è riportato un esempio di una semplice query del database SQL.
SELEZIONA cognome, nome, fitpoint DA dipendenti
L'esempio seguente mostra il processo di esecuzione di una query sul database e la restituzione dei dati risultanti al browser.
Qualsiasi database è adatto per l'uso in un'applicazione Web, a condizione che sul server sia installato il driver del database appropriato.
Per creare applicazioni a basso budget, puoi utilizzare un database basato su file, ad esempio un database creato con accesso Microsoft. Se si prevede di creare applicazioni aziendali affidabili, si consiglia di utilizzare un database back-end, ad esempio basato su server Microsoft server SQL, Oracle 9i o MySQL.
Se il database e il server Web si trovano su computer diversi, dovresti garantire una connessione ad alta velocità tra i sistemi, poiché l'efficienza e la velocità dell'intera applicazione web dipenderanno da questo.
Sviluppo di pagine dinamicheIl processo di sviluppo di pagine dinamiche consiste nella scrittura di codice HTML di base e quindi nella creazione di script lato server o tag di pagina HTML che rendono dinamica la pagina. Guardando il codice finale, puoi vedere che il linguaggio di scripting è incorporato nel codice HTML della pagina. Di conseguenza, tali linguaggi di scripting sono chiamati linguaggi incorporati in HTML. L'esempio seguente utilizza ColdFusion Markup Language (CFML).
Nota. Dreamweaver CC e versioni successive non supportano CFML.
Trio Motors Pagina informativa sui motori Trio
Trio Motors è un produttore automobilistico leader.
Assicurati di visitare la nostra pagina #dipartimento#.
Le istruzioni incorporate in questa pagina fanno quanto segue:
Viene creata una variabile con il nome Dipartimento, dopo di che viene assegnato il valore di stringa "Sales" .
Il valore "Sales" viene inserito nel codice HTML.
Il server delle applicazioni restituisce la seguente pagina al server Web:
Trio Motors Pagina informativa sui motori Trio
Trio Motors è un produttore automobilistico leader.
Assicurati di visitare la nostra pagina di vendita.
Il server Web invia la pagina al browser, che la visualizza come segue.
A proposito di Trio Motors
Trio Motors è una delle principali case automobilistiche.
Non dimenticare di visitare la nostra pagina di vendita.
La scelta di un linguaggio di scripting o di un linguaggio basato su tag dipende dalle tecnologie server utilizzate. Di seguito è riportato un elenco delle lingue più comunemente utilizzate tecnologie server supportato da Dreamweaver.
Linguaggio di marcatura ColdFusion (CFML) |
|
Pagine ASP |
|
Dreamweaver può generare gli script del server oi tag necessari per le pagine oppure lo sviluppatore può scrivere il codice richiesto utilizzando l'ambiente di codifica di Dreamweaver.
Terminologia delle applicazioni WebQuesta sezione fornisce le definizioni dei termini comunemente usati relativi alle applicazioni web.
Server delle applicazioni
Software utilizzato da un server Web per elaborare pagine Web che contengono script o tag lato server. Quando vengono richieste tali pagine, il server Web le passa prima al server delle applicazioni per l'elaborazione, quindi le invia al browser client. Per ulteriori informazioni, vedere Come funzionano le applicazioni Web.
I server delle applicazioni più comuni supportano ColdFusion e PHP.
Collegare il popolare servizio Zadarma a 1C è ormai questione di pochi minuti. È sufficiente collegare un'estensione già pronta per l'integrazione di 1C e Zadarma. Qualsiasi dipendente può eseguire l'installazione senza problemi, anche la donna delle pulizie zia Masha, specialista delle pulizie.
Prima di tutto, ci siamo concentrati sulle piccole imprese che utilizzano attivamente il PBX Zadarma e la configurazione 1C: Small Business Management 1.6.
Come era primaPer l'integrazione con Zadarma, è stato necessario utilizzare uno speciale dialer integrato in 1C, il cosiddetto sfondo SIP. Questa opzione era adatta, con diversi "se":
In generale, se tutti i "se" concordavano, l'integrazione era possibile.
Com'è diventato adessoOra, per l'integrazione di 1C e Zadarma, non importa quale dispositivo finale viene utilizzato per le chiamate. Potrebbe essere qualsiasi cosa:
L'estensione 1C per Zadarma interagisce con l'API, non con il dialer. Pertanto, non importa cosa chiamerà esattamente l'utente.
Facile da installareL'installazione consiste in 1 passaggio. Ti mostro solo 2 screenshot.
Posizionamento in home pageIl pannello di telefonia Zadarma appare automaticamente nella home page. Se improvvisamente l'utente non ne ha bisogno, può semplicemente deselezionare il menu "Visualizza" - "Impostazione della pagina iniziale".
Ottieni le chiavi API da account personale Zadarma
e inserirli in 1C
E, naturalmente, inseriamo il nome utente / password dell'account su simplet.io.
Ecco fatto, ora il tuo 1C è connesso a Zadarma.
Chiamate al clic in 1COvunque vediamo l'icona del "telefono", puoi fare clic su di essa e Zadarma inizierà a comporre.
Dettagli Le "informazioni di contatto" si trovano in molti elenchi di documenti, elenchi: non è più necessario correre alla scheda cliente per chiamare. Ad esempio, puoi chiamare direttamente dall'elenco di ordini, fatture, spese
Una funzione che è diventata di fatto standard e obbligatoria quando si integrano 1C e PBX. Anche se va notato che è tutt'altro che sempre richiesto, quindi può essere disattivato nelle impostazioni del pannello di telefonia.
Allo stesso modo, puoi gestire la necessità creazione automatica documento "Evento- Telefonata". Con l'aiuto di questo documento, è conveniente lasciare commenti sulla chiamata.
E soprattutto, sulla base di questo documento, potrai poi inserire l'Ordine, la Fattura, e così sarà chiaramente visibile il rapporto tra la chiamata e la vendita.
Puoi allegare un promemoria al documento Telefonata, il che è molto comodo se il dipendente ha promesso di richiamare il cliente in un secondo momento.
Cronologia chiamate PBXLa cronologia delle chiamate è, ovviamente, una cosa molto importante. L'estensione per l'integrazione di 1C e Zadarma offre diverse opzioni per lavorare con la cronologia.
Ad esempio, un utente desidera visualizzare la cronologia da solo. Simile all'elenco delle chiamate recenti nel nostro cellulare. Questa cronologia può essere visualizzata aprendo la scheda "Cronologia" nella home page.
Molto spesso vuoi vedere la storia di un cliente specifico, persona di contatto o a un individuo. Nel caso di un cliente, dobbiamo vedere sia le chiamate ai numeri della controparte stessa, sia i numeri di tutti i suoi referenti.
Lo storico delle chiamate con selezione per cliente è visualizzabile direttamente nella sua scheda. La cronologia include le chiamate del cliente e tutti i suoi contatti. Quando il numero appartiene alla controparte stessa, il campo "Contatto" non viene compilato.
