Veľké videá na pozadí webových stránok sú pomerne populárnym trendom vo webdizajne. Pri šikovnom použití môžu videá urobiť web dramatickejším a pútavejším pre používateľov.
Okrem toho sa video pozadia môžu prehrávať plynulo a bez oneskorenia, na rozdiel od pozadí vytvorených pomocou JavaScriptu, ktoré vyžadujú načítanie určitého kódu a obrázkov predtým, ako používateľ uvidí výsledok animácie.
Existujú spoločnosti, ako napríklad Powerhouse alebo Adidas, ktoré používajú video na pozadí stránky na sprostredkovanie konkrétnej správy alebo príbehu o produkte alebo službe používateľovi.
Hoci najpopulárnejším spôsobom vytvorenia pozadia videa je použitie značky videa HTML5 spolu s niektorými CSS parametre, tiež stojí za to venovať pozornosť alternatívnym zdrojom videa, ako je napríklad YouTube. V tomto prípade sa nebudete musieť obávať pomalej odozvy servera, pretože požiadavka bude odoslaná priamo do služby YouTube.
V tomto článku vám ukážem, ako si môžete vytvoriť skvelú webovú stránku pomocou videí YouTube ako pozadia. Na úpravu a kontrolu vzhľadu nášho videa použijeme jQuery.mb.YTPlayer.js. Tak poďme na to!
Stiahnite si zdroje
Demo
Budete potrebovať:
//Veľký obsah na pozadí tu //O obsahu sekcie tu //Obsah malej sekcie na pozadí tu
Teraz musíte každú sekciu naplniť obsahom. V sekcii veľké pozadie a malé pozadie umiestnite triedu vzorov na vytvorenie jemnej textúry na našom videu. Musíte tiež pridať h1, h2, odsek a tlačidlo.
VIDEÁ Z YOUTUBE NA POZADÍ Chcem sa naučiť, ako na to Umiestnite akékoľvek video z YouTube na pozadie stránky
Zaujíma vás, ako pridať video na pozadie vášho webu?
Jednoduchšie to už nemôže byť! S pomocou jQuery MB.YTPlayer, plugin jQuery, môžete na pozadie stránky vložiť akékoľvek video z YouTube.
Akékoľvek video ľahko premeníte na HTML pozadie. Žiadne oneskorenia pri načítaní stránky a žiadne zaťaženie serverov!
Tu je to, čo sme použili na nastavenie videa:
Html ( výška:100% ) telo ( font:15px/23px "Raleway",sans-serif; margin:0; padding:0; výška:100%; šírka: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%; pozícia:absolútne hore:0 vľavo ) #colorize ( color:#f1c40f; font-family:"Lato",sans-serif; font-size:40px )
Je čas upraviť sekciu s veľkým pozadím. Nastavte z-index na 550 a parameter pretečenia na skrytý. Je to potrebné, aby sa obsah YouTube (titulky, anotácie) nezobrazoval na našej webovej stránke. Zostávajúce štýly sú pre hlavičky, tlačidlá a predvolený obrázok (o tom neskôr).
Veľké pozadie ( 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% vľavo: -webkit-transform(-50%,-50%); %,-50%); -o-transform:translate(-50%,-50%) ) .big-background-title ( font-family:"Raleway",sans-serif; font-size; :78px farba:#fff:300 text-zarovnanie textu :vyplnenie-nahor:20px pozadie-poloha:nahor ) font-family:"; Lato",sans-serif; text-transform:veľké písmená; farba:#fff; border:2px plné #fff; ; kurzor:ukazovateľ; medzera medzi písmenami:2px;
displej:inline-block;
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-repeat:repeat-x; background-position:centre text-transform:uppercase ) a.about-section-btn ( font-family:"Lato",sans-serif; font-size:13px; text; -transform:uppercase;color:#34495e;border:2px solid;padding:10px;letter-block:2px -webkit-transition:.4s background easy:.4s background easy; o-prechod:.4s zľahčenie pozadia ( farba:#fff; pozadie: #34495e; )
Pre sekciu s malým pozadím, ktorá slúži aj ako päta, nastavíme šírku na 100 % a prekrytie na skryté. Na vrchnú a spodnú stranu tiež pridáme výplň, aby bolo naše video viditeľné. Nakoniec pridáme štýly pre tlačidlá sociálnych médií.
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 background-repeat:repeat-x;
Dopyty na médiá Aby bola naša stránka responzívna, pridajte niekoľko mediálnych dopytov.@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;) -> Ak chcete odstrániť video z konkrétneho zobrazovacieho poľa bez doplnku*/ ) @media screen a ( max-width: 360px) ( .big-background-title,#colorize (line-height:1) ) @media screen a (max-width: 320px) ( .small-background-title ( font-size:30px) )
jQuery Teraz povoľme náš YouTube video. Zavolajme triedu hráčov vnútri kód jQuery. Umiestnite nasledujúci kód pred koncovú značku tela a do .ach a tablety, keďže pravidlá YouTube to nedovoľujú. Na pridanie však môžeme použiť jQuery obrázok na pozadí
štandardne, ak prehliadač zistí, že používateľ pristúpil na stránku z mobilného zariadenia.
Manuálne riešenie
Aby sme určili, že používateľ navštevuje z mobilného zariadenia alebo tabletu, môžeme skryť prvok na určitej veľkosti obrazovky. Napríklad chceme odstrániť pozadie videa na obrazovkách so šírkou 480px. Do prvku prehrávača stačí pridať display: none:
@media screen and (max-width: 480px) ( .player( display: none; ) )
Čo sa týka jQuery, tu nastavíme premennú is_mobile na hodnotu false. Ďalej sa uistite, že trieda prehrávača má display: none. Ak áno, pridáme triedu big-background-default-image do sekcií big-background a small-background, aby sme použili predvolený obrázok na pozadí. Inak sa nič nezmení.
(function($) ( $(document).ready(function() ( var is_mobile = false; if($(".player") ).css("display")=="none") ( is_mobile = true; ) if (is_mobile == true) ( //Podmienený skript tu $(".big-background, .small-background-section").addClass("big-background-default-image"); )else( $( ". player").mb_YTPlayer() ));))(jQuery);Riešenie pomocou doplnku jQuery Ďalším spôsobom, ako nastaviť predvolený obrázok, je použitie pluginu jQuery device.js (http://matthewhudson.me/projects/device.js/). Tým sa zjednoduší proces opisu podmienok pre rôzne veľkosti obrazoviek mobilných zariadení. Pomocou tohto pluginu môžeme jednoducho napísať nasledujúci kód:
Tu som použil metódy device.mobile() a device.tablet() na kontrolu zariadenia, z ktorého je používateľ prihlásený. Ak je podmienka splnená, do sekcií veľké pozadie a malé pozadie sa pridá trieda big-background-default-image. V opačnom prípade zostane trieda prehrávača nezmenená a video sa prehrá.
Getting It Right Video je vynikajúci spôsob, ako odovzdať posolstvo vášmu publiku. Ak sa správne používa, môže to byť výkonný nástroj pre váš web.Som si istý, že s vývojom a zdokonaľovaním webdizajnu sa bude objavovať stále viac a viac kreatívnych nápadov na využitie videa pri tvorbe web stránok. Dúfam, že ste sa z tohto návodu niečo naučili. Svoje myšlienky a pripomienky píšte do komentárov.
Od prekladateľa. So všetkými vašimi prianiami a pripomienkami ohľadom prekladu ma prosím kontaktujte v osobnej správe. dakujem!
| 16.04.2015
Za posledný rok začali webdizajnéri čoraz viac využívať originálny spôsob oživenia stránky – inštaláciu videa ako pozadia stránky. Zaujímavý dej alebo len „živý“ obrázok na pozadí ozdobí aj obyčajnú webovú stránku vizitky, zaujme používateľa a povzbudí ho, aby na stránke zostal dlhšie. Dnes sa s vami podelíme o jeden zo spôsobov, ako nastaviť celoobrazovkové video pozadie pre webovú stránku pomocou HTML5 a CSS.
Ak ste pevne presvedčení, že chcete na webe nastaviť video na pozadí, musíte poznať niektoré nuansy:
Pre náš príklad sme nasnímali video s rozlíšením 1920 x 1080, trvaním 15 sekúnd a hmotnosťou tesne nad 3 MB. Vo vnútri bloku s identifikátorom video-bg je naše pozadie:
Značka má nasledujúce atribúty:
Ďalej sme napísali dve značky, ktoré označujú adresy URL videí v rôznych formátoch – MP4 a WEBM. Prečo zahrnúť video v niekoľkých formátoch? Faktom je, že nie všetky prehliadače podporujú len jeden formát videa. Aby každý rozpoznal video moderné prehliadače, musíte poskytnúť súbor aspoň v týchto dvoch formátoch. A atribút type s príslušnými hodnotami pomáha prehliadaču rýchlejšie sa rozhodnúť.
2.CSSNaša šablóna štýlov pre pozadie vyzerá takto:
#video-bg ( pozícia: pevná; hore: 0; vpravo: 0; dole: 0; vľavo: 0; pretečenie: skryté; z-index: 1; pozadie: url(bg/daisy-stock-poster.jpg) nie -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 (prispôsobenie objektu: obal) ( #video-bg > video ( hore: 0; vľavo: 0; šírka: 100 %; výška: 100 %; prispôsobenie objektu: obal; ) )
Ako vidíte z kódu, pozadie je nastavené na celú stránku a obrázok (snímka z toho istého videa) je nastavený ako záložné pozadie. V najhoršom prípade bude farba pozadia #94a233 .
V kóde je aj direktíva @supports, ktorá kontroluje, či prehliadač podporuje vlastnosť object-fit. Ak áno, potom pozadie prevezme hodnotu a zobrazí sa proporcionálne rôzne veľkosti obrazovke.
Podľa caniuse.com vlastnosť object-fit v súčasnosti podporujú všetky prehliadače okrem Internet Explorer, Firefox 31-35, Safari 7, iOS Safari 7.1 a Android Browser 4.1-4.4.
Poznámka.
Používateľské rozhranie v aplikácii Dreamweaver CC a novších verziách sa zjednodušilo. V dôsledku toho niektoré funkcie opísané v tomto článku nemusia byť dostupné v aplikácii Dreamweaver CC a novších verziách. Viac informácií nájdete v tomto článku.
O webových aplikáciáchWebová aplikácia je webová stránka, ktorá hosťuje stránky s čiastočne alebo úplne nesformovaným obsahom. Konečný obsah sa vygeneruje až potom, čo návštevník stránky požiada o stránku z webového servera. Pretože konečný obsah stránky závisí od dopytu vygenerovaného na základe akcií návštevníka, stránka sa nazýva dynamická.
Rozsah použitia webových aplikácií je veľmi široký. Táto časť sa zaoberá všeobecnými problémami s webovými aplikáciami a poskytuje príklad jednoduchej webovej aplikácie.
Typické použitie webových aplikáciíPoužívanie webových aplikácií prináša určité výhody návštevníkom webových stránok aj vývojárom webových stránok.
Webové aplikácie umožňujú návštevníkom rýchlo a jednoducho nájsť informácie, ktoré potrebujú, na webových stránkach bohatých na informácie.
Tento typ webovej aplikácie vám umožňuje vyhľadávať obsah, organizovať obsah a pohybovať sa v ňom spôsobom, ktorý je pre návštevníkov pohodlný. Príklady takýchto aplikácií zahŕňajú interné siete spoločnosti - Microsoft MSDN (www.msdn.microsoft.com) a Amazon.com (www.amazon.com).
Webové aplikácie vám umožňujú zhromažďovať, ukladať a analyzovať údaje prijaté od návštevníkov stránok.
Dlho sa používala metóda, pri ktorej sa údaje zadané do HTML formulárov odosielali do CGI aplikácií alebo špeciálne určených pracovníkov vo forme emailových správ na spracovanie. Webová aplikácia umožňuje ukladať údaje priamo do databázy, ako aj získavať údaje a vytvárať zostavy na základe prijatých údajov na analýzu. Príkladom sú interaktívne stránky bánk, stránky na kontrolu zásob, sociologické štúdie a prieskumy, ako aj formuláre pre spätná väzba s používateľmi.
Webovú aplikáciu možno použiť na aktualizáciu webových stránok s pravidelne sa meniacim obsahom.
Webová aplikácia oslobodzuje web dizajnéra od rutinnej práce neustálej aktualizácie HTML stránok lokality. Poskytovatelia obsahu, ako sú redaktori správ, sú zodpovední za udržiavanie aktuálnosti materiálu a webová aplikácia ich sleduje automatická aktualizácia stránky. Príklady zahŕňajú webovú verziu časopisu The Economist (www.economist.com) a spravodajskú službu CNN (www.cnn.com).
Svetlana pracuje ako webdizajnér a už aj má na dlhú dobu vo svojej práci používa Dreamweaver. Medzi jej povinnosti patrí zabezpečenie prevádzky internej firemnej webovej stránky a internetovej stránky stredne veľkej firmy s cca 1000 zamestnancami. Jedného dňa sa na ňu obrátil zamestnanec HR Sergej so svojím problémom. Personálne oddelenie dohliada na wellness program zamestnancov. Program odmeňuje zamestnancov špeciálnymi bodmi za každý kilometer, ktorý prejdú, zabehnú alebo na bicykli. Na konci mesiaca každý zamestnanec pošle správu e-mailom Sergeyovi s uvedením celkového počtu kilometrov. Potom Sergej na základe prijatých e-maily odmeňuje zamestnancov malými peňažnými cenami v závislosti od získaných bodov.
Problémom je, že wellness program sa stal veľmi populárnym. IN momentálne počet účastníkov tohto programu sa zvýšil do takej miery, že na konci mesiaca Sergey nemá čas spracovať všetky informácie, ktoré k nemu prichádzajú e-mailom. Preto sa obrátil na Svetlanu s otázkou o možnosti riešenia tohto problému pomocou webových technológií.
Svetlana v reakcii na to navrhla vytvorenie webovej aplikácie, ktorá by vyriešila nasledujúce problémy.
Zamestnanci budú zadávať údaje o svojich športových úspechoch v jednoduchom HTML formulári.
Prijaté údaje sa uložia do databázy.
Body budú udelené na základe získaných údajov.
Každý zamestnanec môže získať údaje o svojich výsledkoch.
Na konci každého mesiaca má Sergey možnosť získať všetky konečné výsledky.
Svetlana v čo najkratšom čase vytvorila a spustila požadovanú aplikáciu, keďže Dreamweaver má všetko potrebné nástroje pre rýchle a ľahká tvorba tento druh aplikácie.
Akákoľvek webová aplikácia je kolekcia statických a dynamických webových stránok. Statická webová stránka je stránka, ktorá sa používateľovi zobrazuje vždy nezmenená. Webový server odošle stránku podľa požiadavky webového prehliadača bez akejkoľvek úpravy. Na rozdiel od toho server robí zmeny dynamická webová stránka pred odoslaním do prehliadača. Pretože sa stránka mení, nazýva sa dynamická.
Môžete napríklad vytvoriť stránku, ktorá zobrazuje výsledky vášho wellness programu. Niektoré informácie (napríklad meno zamestnanca a jeho výsledky) však budú určené v čase, keď zamestnanec požiada o stránku.
V ďalšej časti sa bližšie pozrieme na to, ako fungujú webové aplikácie.
Spracovanie statických webových stránokStatická webová lokalita obsahuje kolekciu zodpovedajúcich stránok HTML a súborov hostených na počítači, na ktorom je nainštalovaný webový server.
Webový server je softvér, ktorá obsluhuje webové stránky v reakcii na požiadavky z webových prehliadačov. Žiadosť o stránku sa zvyčajne odošle, keď kliknete na odkaz na webovej stránke, vyberiete záložku v prehliadači alebo zadáte adresu URL do adresný riadok prehliadač.
Konečný obsah statickej webovej stránky určuje vývojár a zostáva nezmenený počas procesu žiadosti o stránku. Príklad:
Informačná stránka Trio Motors O Trio Motors
Všetok kód HTML vytvára vývojár pred umiestnením stránky na server. Pretože kód HTML sa po umiestnení stránky na server nemení, stránka sa nazýva statická.
Poznámka.
Presne povedané, „statická“ stránka v skutočnosti nemusí byť. Napríklad zástupný obrázok alebo obsah Flash (vo forme súboru SWF) môže oživiť statickú stránku. V tomto kontexte je však stránka statická, pretože je odosielaná do prehliadača bez úprav.
Keď webový server dostane požiadavku na zobrazenie statickej stránky, po analýze požiadavky server nájde požadovanú stránku a odošle ju do prehliadača, ako je uvedené nižšie.
V prípade webových aplikácií chýbajú niektoré časti kódu stránky, kým si návštevník stránku nevyžiada. Chýbajúci kód je vygenerovaný pomocou nejakého mechanizmu a až potom môže byť stránka odoslaná do prehliadača. Tento mechanizmus generovania kódu je diskutovaný v ďalšej časti.
Keď webový server dostane požiadavku na zobrazenie statickej webovej stránky, odošle stránku priamo do prehliadača. Keď sa však požaduje dynamická stránka, akcie webového servera nie sú také jasné. Server odošle stránku špeciálny program, ktorý tvorí záverečnú stránku. Takýto program sa nazýva aplikačný server.
Aplikačný server načíta kód na stránke, vygeneruje konečnú stránku podľa prečítaného kódu a potom ju zo stránky odstráni. Výsledkom všetkých týchto operácií je statická stránka, ktorá sa odošle na webový server, ktorý ju následne odošle do klientskeho prehliadača. Všetky stránky, ktoré prehliadač dostane, obsahujú iba HTML kód. Schematické znázornenie procesu:
Ukladanie obsahu do databázy vám umožňuje oddeliť dizajn vášho webu od obsahu, ktorý uvidia používatelia. Namiesto vytvárania všetkých stránok ako samostatných súborov HTML sú pre každý typ prezentovaných informácií napísané iba šablóny stránok. Obsah sa potom načíta do databázy, po ktorej ho webová lokalita načíta, keď o to používatelia požiadajú. Okrem toho môžete aktualizovať informácie v jednom zdroji a replikovať túto zmenu na celej svojej webovej lokalite bez manuálnej úpravy každej stránky. Adobe Dreamweaver vám umožňuje vytvárať webové formuláre na vkladanie, aktualizáciu a odstraňovanie informácií v databáze.
Zavolá sa inštrukcia programu určená na získanie údajov z databázy databázový dotaz. Dotaz pozostáva z kritérií vyhľadávania vyjadrených pomocou databázového jazyka nazývaného SQL (Structured Query Language). Text SQL dotazu sa nachádza v skriptoch stránky na strane servera alebo v značkách.
Aplikačný server nemôže priamo získať údaje z databázy, pretože databázy používajú špecifické formáty ukladania údajov, čo znamená, že pokus o získanie takýchto údajov bude pripomínať pokus o otvorenie dokumentu. Microsoft Word používaním textový editor Poznámkový blok alebo BBEdit. Preto na pripojenie k databáze používa aplikačný server sprostredkovateľa - databázový ovládač. Databázový ovládač je softvérový modul, ktorý vytvára interakciu medzi aplikačným serverom a databázou.
Keď ovládač vytvorí spojenie, vykoná sa dotaz do databázy, výsledkom čoho je súbor záznamov. Sada záznamov predstavuje množinu údajov získaných z jednej alebo viacerých databázových tabuliek. Sada záznamov sa vráti na aplikačný server, ktorý použije prijaté údaje na vygenerovanie stránky.
Nižšie je uvedený príklad jednoduchého databázového dotazu v SQL.
VYBERTE priezvisko, meno, fitpointy FROM zamestnancov
Nasledujúci príklad demonštruje proces vykonania databázového dotazu a vrátenia výsledných údajov do prehliadača.
Akákoľvek databáza je vhodná na použitie vo webovej aplikácii za predpokladu, že je na serveri nainštalovaný príslušný databázový ovládač.
Na vytváranie lacných aplikácií môžete použiť databázu súborov, ako je databáza vytvorená pomocou Microsoft Access. Ak plánujete vytvárať spoľahlivé podnikové aplikácie, odporúča sa použiť serverovú databázu, napríklad založenú na serveroch spoločnosti Microsoft SQL Server, Oracle 9i alebo MySQL.
Ak sa databáza a webový server nachádzajú na rôzne počítače, mali by ste zabezpečiť vysokorýchlostné spojenie medzi systémami, pretože od toho bude závisieť efektívnosť a rýchlosť celej webovej aplikácie.
Vývoj dynamických stránokProces vývoja dynamických stránok pozostáva z napísania základného kódu HTML a následného vytvorenia skriptov na strane servera alebo značiek stránky HTML, vďaka ktorým je stránka dynamická. Ak sa pozriete na konečný kód, môžete vidieť, že skriptovací jazyk je zabudovaný do HTML stránky. Preto sa takéto skriptovacie jazyky nazývajú jazyky vložené do HTML. Nasledujúci príklad používa jazyk ColdFusion Markup Language (CFML).
Poznámka: Dreamweaver CC a novšie verzie nepodporujú CFML.
Informačná stránka Trio Motors O Trio Motors
Trio Motors je popredným výrobcom automobilov.
Nezabudnite navštíviť našu stránku #oddelenie#.
Pokyny vložené na tejto stránke robia nasledovné:
Vytvorí sa premenná s názvom oddelenie, za ktorým je priradená hodnota reťazca „Predaj“.
Hodnota "Predaj" je umiestnená v kóde HTML.
Aplikačný server vráti webovému serveru nasledujúcu stránku:
Informačná stránka Trio Motors O Trio Motors
Trio Motors je popredným výrobcom automobilov.
Nezabudnite navštíviť našu stránku Predaj.
Webový server odošle stránku prehliadaču, ktorý ju vykreslí nasledovne.
O spoločnosti Trio Motors
Trio Motors je jedným z popredných výrobcov automobilov.
Nezabudnite navštíviť našu predajnú stránku.
Výber skriptovacieho jazyka alebo jazyka založeného na značkách závisí od použitých serverových technológií. Nižšie je uvedený zoznam jazykov, ktoré sa najčastejšie používajú serverové technológie, podporované spoločnosťou Dreamweaver.
ColdFusion Markup Language (CFML) |
|
Stránky ASP |
|
Dreamweaver môže vytvoriť skripty na strane servera alebo požadované značky pre stránky, alebo môže vývojár napísať požadovaný kód sám pomocou kódovacieho prostredia Dreamweaver.
Terminológia webových aplikáciíTáto časť poskytuje definície bežne používaných výrazov súvisiacich s webovými aplikáciami.
Aplikačný server
Softvér, ktorý používa webový server na spracovanie webových stránok obsahujúcich skripty alebo značky na strane servera. Keď sú takéto stránky vyžiadané, webový server ich najprv odovzdá aplikačnému serveru na spracovanie a potom ich odošle do klientskeho prehliadača. Ďalšie informácie nájdete v téme Ako fungujú webové aplikácie.
Najbežnejšie aplikačné servery podporujú ColdFusion a PHP.
Prepojenie obľúbenej služby Zadarma s 1C je teraz otázkou niekoľkých minút. Stačí pripojiť hotové rozšírenie na integráciu 1C a Zadarmy. Inštaláciu zvládne bez problémov každý zamestnanec, dokonca aj upratovačka teta Máša, špecialistka na upratovanie.
V prvom rade sme sa zamerali na malé podniky, ktoré aktívne využívajú konfiguráciu PBX Zadarma a 1C:Management malá firma 1.6.
Ako to bolo predtýmNa integráciu so Zadarmou ste potrebovali použiť špeciálny dialer zabudovaný vo vnútri 1C – takzvaný SIP telefón. Táto možnosť bola vhodná s niekoľkými „ak“:
Vo všeobecnosti, ak sa všetky „ak“ spojili, integrácia bola možná.
Ako je to terazTeraz pre integráciu 1C a Zadarmy vôbec nezáleží na tom, ktoré koncové zariadenie sa používa na hovory. Môže to byť čokoľvek:
Rozšírenie 1C pre Zadarmu interaguje s API, nie s dialerom. Nezáleží teda na tom, s čím presne bude používateľ volať.
Jednoduchá inštaláciaInštalácia pozostáva z 1 kroku. Ukážeme vám len 2 snímky obrazovky.
Umiestnenie na domovskej stránkeNa domovskej stránke sa automaticky zobrazí telefónny panel Zadarma. Ak to používateľ zrazu nepotrebuje, môže jednoducho zrušiť začiarknutie políčka v ponuke „Zobraziť“ - „Nastavenie domovskej stránky“.
Kľúče API berieme z osobný účet Zadarma
a vložte ich do 1C
A samozrejme zadajte prihlasovacie meno/heslo k svojmu účtu na simplit.io.
To je všetko, teraz je váš 1C pripojený k Zadarme.
Hovory typu click-to-call v 1CKdekoľvek vidíme ikonu „telefón“, môžete na ňu kliknúť a Zadarma začne vytáčať číslo.
Podrobnosti o „kontaktných údajoch“ sú v mnohých zoznamoch dokumentov a referenčných kníh – už nemusíte bežať na svoju klientsku kartu, aby ste mohli volať. Volať môžete napríklad priamo zo zoznamu objednávok, faktúr, výdajok
Funkcia, ktorá sa stala štandardnou a povinnou pri integrácii 1C a PBX. Aj keď je potrebné poznamenať, že nie je vždy žiadaný, takže ho môžete vypnúť v nastaveniach Telephony Panel.
Rovnako tak môžete kontrolovať potrebu automatické vytváranie dokument "Udalosť- Telefonický hovor" Pomocou tohto dokumentu je vhodné zanechať komentár k hovoru.
A najdôležitejšie je, že na základe tohto dokladu potom môžete zadať Objednávku, Faktúru a tým bude jasne viditeľný vzťah medzi hovorom a predajom.
K dokumentu Telefonický hovor môžete pripojiť pripomienku, čo je veľmi výhodné, ak pracovník sľúbil, že klientovi zavolá neskôr.
História hovorov PBXHistória hovorov je, samozrejme, veľmi dôležitá vec. Rozšírenie pre integráciu 1C a Zadarmy poskytuje niekoľko možností práce s históriou.
Používateľ chce napríklad vidieť príbeh o sebe. Podobne ako v zozname posledných hovorov v našom mobilný telefón. Túto históriu je možné zobraziť otvorením karty „História“ na domovskej stránke.
Veľmi často chcete vidieť históriu konkrétneho klienta, kontaktnej osoby resp jednotlivcovi. V prípade klienta potrebujeme vidieť hovory na čísla samotnej protistrany, ako aj na čísla všetkých jeho kontaktných osôb.
Históriu hovorov s výberom podľa klienta je možné zobraziť priamo v jeho karte. História zahŕňa hovory od klienta a všetkých jeho kontaktov. Ak číslo patrí samotnej protistrane, pole „Kontakt“ nie je vyplnené.
