Povezivanje popularne usluge Zadarma s 1C sada je pitanje nekoliko minuta. Dovoljno je spojiti gotov nastavak za integraciju 1C i Zadarme. Instalaciju može lako izvesti svaki zaposlenik, čak i čistačica, teta Maša, stručnjakinja za čišćenje.

Prije svega, usredotočili smo se na mala poduzeća koja aktivno koriste Zadarma PBX i konfiguraciju 1C: Upravljanje malom tvrtkom 1.6.

Kao i prije

Za integraciju sa Zadarmom trebali ste koristiti poseban brojčanik ugrađen u 1C - takozvanu SIP pozadinu. Ova je opcija bila prikladna za nekoliko "ako":

• ako je 1C instaliran na lokalnom računaru, a ne negdje na terminalnom poslužitelju
• ako korisnik pristane koristiti 1C brojčanik umjesto stolnog telefona

Općenito, ako su se svi „ako“ složili, tada je integracija bila moguća.

Kako je to sada postalo

Sada, za integraciju 1C -a i Zadarme, uopće nije važno koji se krajnji uređaj koristi za pozive. Može biti bilo šta:

• stolni telefon
• softfon instaliran u OS -u
• web pozadina pokrenuta u pregledniku

1C ekstenzija za Zadarmu stupa u interakciju s API -jem, a ne s brojčanikom. Stoga nije važno kako će tačno korisnik nazvati.

Lako se instalira

Instalacija se sastoji od 1 koraka. Pokažimo vam samo 2 snimke ekrana.

Postavljanje na početnu stranicu

Telefonska ploča Zadarma automatski se pojavljuje na početnoj stranici. Ako korisniku to odjednom ne treba, tada može jednostavno poništiti okvir u izborniku "Pogled" - "Prilagodba početne stranice".

Jednostavno postavljanje

API ključeve preuzimamo s osobnog računa Zadarma

i umetnite ih u 1C

I naravno, unosimo korisničko ime / lozinku računa na simplit.io.

To je to, sada je vaš 1C povezan sa Zadarmom.

Pozivi na klik u 1C

Gdje god vidimo ikonu „telefon“, možemo je kliknuti i Zadarma će početi birati broj.

Rekviziti "Podaci za kontakt" nalaze se na mnogim listama dokumenata, priručnicima - više ne morate trčati do kartice klijenta da biste uputili poziv. Na primjer, možete nazvati izravno s popisa narudžbi, računa, potrošnog materijala

Klijent kartica za dolazni poziv

Funkcija koja je zapravo postala standardna i obavezna pri integraciji 1C i PBX -a. Iako treba napomenuti da nije uvijek tražen, pa se može isključiti u postavkama panela Telefonija.

Registracija poziva sa dokumentom o događaju

Slično, možete kontrolirati potrebu za automatskim kreiranjem dokumenta "Događaj-telefonski poziv". Pomoću ovog dokumenta možete ostaviti komentare na poziv.

I što je najvažnije, na temelju ovog dokumenta možete unijeti narudžbu, fakturu i na taj način će odnos između poziva i prodaje biti jasno vidljiv.

Dokumentu telefonskog poziva možete priložiti podsjetnik, što je vrlo zgodno ako je zaposlenik obećao da će kasnije nazvati klijenta.

PBX istorija poziva

Historija poziva je, naravno, vrlo važna stvar. Proširenje za integraciju 1C -a i Zadarme pruža nekoliko mogućnosti za rad s poviješću.

Na primjer, korisnik želi sam pogledati priču. Slično popisu nedavnih poziva na našem mobilnom telefonu. Ovu historiju možete pogledati otvaranjem kartice Historija na početnoj stranici.

Vrlo često želim vidjeti povijest određenog klijenta, kontakt osoba ili pojedinac. U slučaju klijenta, moramo vidjeti kako pozive na brojeve same ugovorne strane, tako i na brojeve svih njegovih osoba za kontakt.

Historiju poziva sa odabirom klijenta možete pogledati direktno na njegovoj kartici. Istorija uključuje pozive klijenta i svih njegovih kontakata. Kada broj pripada drugoj ugovornoj strani, polje "Kontakt" nije ispunjeno.

Od autora: U ovom vodiču ćemo vas provesti kroz jednostavnu tehniku ​​za stvaranje pozadinske slike koja će se u potpunosti protezati po cijeloj širini okvira za preglednik. Za ovo nam je potrebno CSS svojstvo veličine pozadine; JavaScript nije potreban.

Primjeri responzivnih cijelih pozadinskih slika

Danas je postalo prilično popularno koristiti ogromnu fotografiju kao pozadinu koja zauzima cijelu web stranicu. Evo primjera nekoliko web lokacija koje imaju postavljene responzivne cijele pozadinske slike:

Ako želite postići sličan rezultat u svom sljedećem web projektu, onda je ovaj članak ono što vam treba.

Osnovni principi

Evo našeg plana akcije.

Upotrijebite svojstvo veličine pozadine da biste u potpunosti ispunili okvir za prikaz

CSS svojstvo veličine pozadine postavljeno je da pokrije. Naslovna vrijednost govori pregledniku da automatski i proporcionalno skalira širinu i visinu pozadinske slike tako da uvijek bude jednaka ili veća od širine / visine okvira za prikaz.

Koristite medijski upit za rukovanje malim pozadinskim slikama za mobilne uređaje

Da bismo poboljšali brzinu učitavanja stranica na malim ekranima, upotrijebit ćemo medijski upit za obradu manje verzije slike u pozadini. Nije obavezno. Ova tehnika će raditi i bez nje. Ali zašto je dobra ideja koristiti malu pozadinsku sliku za mobilne uređaje?

Slika koju sam koristio u demonstraciji je 5500x3600px. Ova rezolucija je dovoljna za većinu monitora za računare sa širokim ekranom koji su trenutno na tržištu. Ali za to morate obraditi datoteku od 1,7 MB.

Ovako veliko dodatno opterećenje samo radi postavljanja pozadinske fotografije ionako neće biti od koristi. I, naravno, to će biti izuzetno loše za veze koje koriste mobilni internet. A također je takva rezolucija nepotrebna za uređaje s malim ekranom (o tome kasnije). Pogledajmo cijeli proces.

Html

Za označavanje vam je potrebno samo ovo:

Elementu tijela dodijelit ćemo pozadinsku sliku tako da slika uvijek ispunjava cijeli okvir za preglednik.

Međutim, ova tehnika će također raditi za bilo koji element na razini bloka (poput div ili forme). Ako su širina i visina kutije fluidni, tada će se pozadinska slika uvijek skalirati tako da ispuni cijeli spremnik.

CSS

Za element body postavili smo sljedeće stilove:

body ( / * Put do slike * / background-image: url (images / background-photo.jpg); / * Pozadinska slika je uvijek centrirana okomito i vodoravno * / background-position: center center; / * Pozadinska slika se ne ponavlja * / background-repeat: no-repeat; / * Pozadinska slika je fiksirana u okviru za prikaz, pa se ne pomera kada je visina sadržaja veća od visine slike * / background-attachment: fixed; / * To omogućava pozadinska slika za prilagođavanje veličini spremnika * / background-size: cover; / * Postavlja boju pozadine koja će se prikazivati ​​dok se pozadinska slika učitava * / background-color: # 464646;)

Najvažniji par svojstva / vrijednosti na koji treba paziti:

veličina pozadine: omot;

Tu magija počinje. Ovaj par svojstva / vrijednosti govori pretraživaču da proporcionalno skalira pozadinsku sliku, tj. tako da su njegova širina i visina jednake ili veće od širine / visine elementa (u našem slučaju ovo je element tijela).

Međutim, ovaj par svojstva / vrijednosti ima jedan problem: ako je pozadinska slika manja od elementa tijela - što će se dogoditi na ekranima visoke rezolucije i / ili kada imate veliku količinu sadržaja na stranici - preglednik će se neizbježno zumirati na slici. I, kao što znamo, kada povećamo veličinu bitmape, kvaliteta slike se smanjuje (drugim riječima, dolazi do pikselacije).

Povećanje veličine slike od izvorne veličine utječe na kvalitetu slike. Imajte to na umu pri odabiru odgovarajuće slike. Demo koristi ogromnu fotografiju od 5500x3600px za monitore sa širokim ekranom, pa će biti potreban vrlo veliki ekran za kvalitetno izobličenje. Idemo dalje. Da bismo pozadinsku sliku zadržali u središtu prikaza, dodajemo:

pozadinski položaj: središte centra;

Ovaj unos postavlja pozadinu na koordinatnu os u središte prikaza. Zatim moramo definirati što se događa kada visina sadržaja prelazi vidljivu visinu okvira za prikaz. Kada se to dogodi, pojavljuje se traka za pomicanje.

U ovom slučaju moramo se pobrinuti da pozadinska slika ostane u izvornom položaju čak i kada se korisnik pomakne prema dolje. U ovoj situaciji, slika će se ili samo završiti pomicanjem, ili će se pomicati dok se pomiče (što može biti vrlo ometajuće za korisnika). Da bismo popravili pozadinu, svojstvo background-attachment postavili smo na fixed.

pozadina-prilog: fiksno;

U demonstraciji sam dodao funkciju "učitavanje sadržaja" tako da možete vidjeti šta se događa kada se traka za pomicanje pojavi u pregledniku kada je svojstvo pozadinskog privitka postavljeno na fiksno. Također možete preuzeti demo i igrati se sa vrijednostima svojstava pozicioniranja (na primjer, prilog u pozadini i položaj u pozadini) da vidite kako to utječe na pomicanje stranice i pozadinsku sliku. Ostatak vrijednosti imovine razumljiv je sam po sebi.

Stenografski CSS

Detaljno sam opisao pozadinska svojstva kako bih ih lakše objasnio. Skraćeni zapis takođe će biti ekvivalentan:

body (background: url (background-photo.jpg) centralni središnji poklopac bez ponavljanja;)

Sve što trebate učiniti je promijeniti vrijednost url -a tako da pokazuje put do vaše pozadinske slike.

Opcionalno: medijski upit za male ekrane

Za male ekrane koristio sam Photoshop za smanjivanje izvorne slike u pozadini proporcionalno na 768x505px, a također sam koristio i Smush.it za smanjenje veličine još malo. Time je veličina datoteke smanjena sa 1741 KB na 114 KB. One. veličina slike smanjena za 93%.

Nemojte me pogriješiti, 114KB je još uvijek dosta za čisto estetski element dizajna. S obzirom na dodatnih 114KB općih troškova, koristio bih takvu datoteku samo ako vidim priliku za značajno poboljšanje korisničkog iskustva (UX). u ovom trenutku značajan dio internetskog prometa dolazi iz pozadine mobilnih uređaja - image: url (slike / pozadina - foto - mobilni - uređaji. jpg);

Medijski upit ima ograničenje širine max-width: 767px, što znači da će se, ako je okvir za pregledanje veći od 767px, učitati velika pozadinska slika.

Nedostatak korištenja ovog medijskog upita je to što ako promijenite širinu prozora preglednika, na primjer, sa 1200px na 640px (ili obrnuto), odmah ćete vidjeti trenutak učitavanja male ili velike pozadinske slike.

Osim toga, zbog činjenice da neki uređaji s malim ekranom mogu prikazati više piksela - na primjer, iPhone 5 s retina ekranom može prikazati rezoluciju od 1136x640px - mala pozadinska slika bit će pikselizirana.

Summarizing

Najnoviju verziju izvornog koda možete pogledati iz ovog vodiča na GitHub-u. Mogu vas samo upozoriti na jedno: molimo vas da ovu tehniku ​​koristite oprezno, jer velike datoteke mogu ozbiljno oštetiti UX, posebno ako krajnji korisnik koristi sporu i nepouzdanu internetsku vezu. Ovo je još jedan razlog zašto biste trebali odabrati odgovarajuću boju pozadine kako bi korisnik mogao čitati sadržaj dok se slika pozadine učitava.

Veliki videozapisi u pozadini web stranica prilično su popularan trend u web dizajnu. Pametno primijenjeni videozapisi mogu web stranicu učiniti dramatičnijom i privlačnijom za korisnike.

Osim toga, video pozadine se mogu reproducirati glatko i bez "kočnica", za razliku od pozadina stvorenih JavaScriptom, koje zahtijevaju učitavanje određenog koda i slika prije nego što korisnik vidi rezultat animacije.

Postoje kompanije poput Powerhousea ili Adidasa koje koriste video kao pozadinu web stranice kako bi prenijele određenu poruku ili priču o proizvodu ili usluzi korisniku.

Iako je najpopularniji način stvaranja video pozadine korištenje HTML5 video tag, uz neke CSS parametre, trebali biste obratiti pažnju i na alternativne video izvore, na primjer, YouTube. U ovom slučaju ne morate brinuti o sporom odzivu servera, jer će zahtjev biti poslan direktno na YouTube.

U ovom članku ću vam pokazati kako možete izgraditi sjajnu web stranicu koja koristi YouTube videozapise kao pozadinu. Koristit ćemo jQuery.mb.YTPlayer.js za uređivanje i kontrolu izgleda našeg videozapisa. Pa krenimo!

Preuzmite izvore
Demo

Trebat će vam:

// Veliki pozadinski sadržaj ovdje

Sada morate popuniti svaki odjeljak sadržajem. U odjeljak velike pozadine i male pozadine postavite razred uzorak, kako bismo stvorili laganu teksturu u našem videu. Takođe morate dodati h1, h2, odlomak i dugme.