A népszerű Zadarma szolgáltatás csatlakoztatása az 1C-hez most néhány perc kérdése. Az 1C és a Zadarma integrációjához elegendő egy kész bővítményt csatlakoztatni. Bármely alkalmazott könnyedén elvégezheti a beszerelést, még a takarítónő, Mása néni, takarító szakember is.

Mindenekelőtt a Zadarma PBX-et ​​és az 1C konfigurációt aktívan használó kisvállalkozásokra összpontosítottunk: Egy kis cég vezetése 1.6.

Ahogy azelőtt volt

A Zadarmával való integrációhoz egy speciális 1C-be épített tárcsázót kellett használnia - az úgynevezett SIP-háttérrel. Ez az opció akkor volt megfelelő, ha több "ha" volt:

• ha az 1C helyi számítógépre van telepítve, és nem valahol egy terminálkiszolgálóra
• ha a felhasználó vállalja, hogy asztali telefon helyett 1C tárcsázót használ

Általánosságban elmondható, hogy ha minden „ha” egyetértett, akkor az integráció lehetséges volt.

Most milyen lett

Most az 1C és a Zadarma integrációja szempontjából egyáltalán nem mindegy, hogy melyik végkészüléket használják a hívásokhoz. Bármi lehet:

• asztali telefon
• az operációs rendszerbe telepített softphone
• böngészőben futó webes háttér

A Zadarma 1C bővítménye az API-val működik együtt, nem a tárcsázóval. Ezért nem mindegy, hogy a felhasználó pontosan mit fog hívni.

Könnyen telepíthető

A telepítés 1 lépésből áll. Mutassunk csak 2 képernyőképet.

Kezdőlap elhelyezése

A Zadarma telefonpanel automatikusan megjelenik a kezdőlapon. Ha hirtelen a felhasználónak nincs szüksége erre, akkor egyszerűen törölheti a "Nézet" menü - "Kezdőoldal beállításának" jelölését.

Könnyen beállítható

Az API-kulcsokat Zadarma személyes fiókjáról vesszük

és helyezze be őket az 1C-be

És természetesen megadjuk a fiók bejelentkezési nevét / jelszavát a simplit.io oldalon.

Ez az, most az 1C-je csatlakozik Zadarmához.

Hívások kattintással 1C-ben

Bárhol látjuk a „telefon” ikont, rákattinthatunk, és a Zadarma elkezdi tárcsázni a számot.

A „Kapcsolatfelvételi adatok” kellékek sok dokumentumlistában, segédkönyvben megtalálhatók – többé nem kell az ügyfél kártyájához futnia a hívás kezdeményezéséhez. Például közvetlenül a rendelések, számlák, fogyóeszközök listájából hívhat

Ügyfélkártya bejövő hívásokhoz

Egy olyan funkció, amely az 1C és a PBX integrálásakor tulajdonképpen szabványossá és kötelezővé vált. Bár meg kell jegyezni, hogy nem mindig van rá kereslet, ezért a Telephony panel beállításaiban kikapcsolható.

Hívásregisztráció eseménydokumentummal

Hasonlóképpen szabályozhatja az „Esemény-telefonhívás” dokumentum automatikus létrehozásának szükségességét. Ezzel a dokumentummal kényelmesen megjegyzéseket fűzhet a felhíváshoz.

És ami a legfontosabb, hogy ennek a dokumentumnak az alapján megadhatja a Megrendelést, Számlát és így jól látható lesz a kapcsolat a hívás és az eladás között.

A Telefonhívás dokumentumhoz emlékeztetőt is csatolhat, ami nagyon kényelmes, ha a munkavállaló megígérte, hogy később visszahívja az ügyfelet.

PBX hívástörténet

A hívástörténet természetesen nagyon fontos dolog. Az 1C és a Zadarma integrációjának kiterjesztése számos lehetőséget kínál a történelemmel való munkavégzéshez.

Például egy felhasználó egymaga szeretne megtekinteni egy történetet. Hasonló a legutóbbi hívások listájához a mobiltelefonunkon. Ezt az előzményt a kezdőlap Előzmények lapjának megnyitásával tekintheti meg.

Nagyon gyakran szeretném látni egy adott ügyfél történetét, kapcsolattartó vagy magánszemély. Ügyfél esetén látnunk kell mind a saját, mind az összes kapcsolattartójának hívását.

Az ügyfél által kiválasztott híváslista közvetlenül a kártyáján tekinthető meg. Az előzmények tartalmazzák az ügyféltől érkező hívásokat és az összes kapcsolattartóját. Ha a szám magához a partnerhez tartozik, a „Kapcsolat” mező nincs kitöltve.

A szerzőtől: Ebben az oktatóanyagban egy olyan egyszerű technikát mutatunk be, amellyel olyan háttérképet hozhatunk létre, amely teljes mértékben átnyúlik a böngésző nézetablakának teljes szélességében. Ehhez szükségünk van a background-size CSS tulajdonságra; JavaScript nem szükséges.

Példák reszponzív egész háttérképekre

Manapság már igencsak népszerűvé vált egy hatalmas fotót háttérként használni, ami egy egész weboldalt elfoglal. Íme néhány példa számos olyan webhelyre, amelyek teljes, reszponzív háttérképet tartalmaznak:

Ha hasonló eredményt szeretne elérni következő webprojektjében, akkor erre a cikkre van szüksége.

Alapelvek

Íme a cselekvési tervünk.

Használja a background-size tulajdonságot a nézetablak teljes kitöltéséhez

A háttér méretű CSS-tulajdonság a coverre van állítva. A borító érték arra utasítja a böngészőt, hogy automatikusan és arányosan méretezze meg a háttérkép szélességét és magasságát úgy, hogy az mindig egyenlő legyen a nézetablak szélességével/magasságával vagy annál nagyobb.

Használjon médialekérdezést a mobileszközök kis háttérképeinek kezelésére

Az oldalbetöltési sebesség javítása érdekében kis képernyőkön egy médialekérdezést használunk a háttérképünk kisebb verziójának feldolgozásához. Nem kötelező. Ez a technika enélkül is működik. De miért jó ötlet kis háttérképet használni mobileszközökhöz?

A demóban használt kép 5500x3600 képpont. Ez a felbontás elegendő a legtöbb jelenleg piacon lévő szélesvásznú számítógép-monitorhoz. Ehhez azonban egy 1,7 MB-os fájlt kell feldolgoznia.

Egy ilyen hatalmas plusz terhelés pusztán a háttérfotó elhelyezése miatt amúgy sem tesz jót. És ez természetesen rendkívül rossz lesz a mobilinternetet használó kapcsolatoknak. És az ilyen felbontás szükségtelen a kis képernyővel rendelkező készülékeknél (erről később). Vessünk egy pillantást az egész folyamatra.

HTML

A jelöléshez csak ez kell:

A törzselemhez háttérképet fogunk rendelni, így a kép mindig kitölti a böngésző teljes nézetét.

Ez a technika azonban minden blokk szintű elemhez (például div vagy form) is használható. Ha a doboz szélessége és magassága egyenletes, akkor a háttérkép mindig a teljes tartályt kitölti.

CSS

A következő stílusokat állítjuk be a body elemhez:

body (/ * A kép elérési útja * / background-image: url (images / background-photo.jpg); / * A háttérkép mindig függőlegesen és vízszintesen középre kerül * / háttér-pozíció: középen középen; / * A háttérkép nem ismétlődik * / background-repeat: no-repeat; / * A háttérkép rögzített a nézetablakban, így nem mozdul el, ha a tartalom magassága nagyobb, mint a kép magassága * / background-attachment: rögzített; / * Ez az, ami lehetővé teszi, hogy a háttérkép a tároló méretéhez igazodjon * / background-size: cover; / * Beállítja a háttérkép betöltése közben megjelenítendő háttérszínt * / background-color: # 464646;)

A legfontosabb tulajdonság/érték pár, amelyre figyelni kell:

háttér-méret: borító;

Itt kezdődik a varázslat. Ez a tulajdonság/érték pár utasítja a böngészőt, hogy arányosan méretezze a háttérképet, pl. úgy, hogy szélessége és magassága egyenlő vagy nagyobb legyen, mint az elem szélessége / magassága (esetünkben ez a test elem).

Ezzel a tulajdonság/érték párral azonban van egy probléma: ha a háttérkép kisebb, mint a törzs elem – ami nagy felbontású képernyőkön és/vagy ha nagy mennyiségű tartalom van az oldalon – a böngésző elkerülhetetlenül nagyítani fog. a képen. És mint tudjuk, ha növeljük a bitmap méretét, akkor a képminőség romlik (más szóval pixeláció lép fel).

A kép méretének az eredeti mérethez képesti növelése befolyásolja a képminőséget. Ezt tartsa szem előtt a megfelelő kép kiválasztásakor. A demó hatalmas, 5500x3600 képpontos fotót használ a szélesvásznú monitorokhoz, így nagyon nagy képernyő kellene a minőségi torzuláshoz. Menjünk tovább. Ahhoz, hogy a háttérkép a nézetablak közepén maradjon, a következőket adjuk hozzá:

háttér-pozíció: középen középen;

Ez a bejegyzés a hátteret a koordinátatengelyre helyezi a nézetablak közepén. Ezután meg kell határoznunk, hogy mi történik, ha a tartalom magassága meghaladja a nézetablak látható magasságát. Amikor ez megtörténik, megjelenik egy görgetősáv.

Ilyenkor ügyelnünk kell arra, hogy a háttérkép az eredeti helyén maradjon akkor is, amikor a felhasználó lefelé görget az oldalon. Ebben a helyzetben a kép vagy csak véget ér görgetéskor, vagy görgetés közben elmozdul (ami nagyon elvonhatja a felhasználó figyelmét). A háttér javításához a background-attachment tulajdonságot fix értékre állítjuk.

háttér-csatolás: rögzített;

A demóban hozzáadtam a "tartalom betöltése" funkciót, így láthatja, mi történik, ha a görgetősáv megjelenik a böngészőben, ha a háttér-csatolás tulajdonság fixre van állítva. Le is töltheti a demót, és játszhat a pozicionálási tulajdonságok értékeivel (például a háttér csatolása és a háttér pozíciója), hogy megtudja, hogyan befolyásolja ez az oldal görgetését és a háttérképet. A többi ingatlanérték eléggé magától értetődő.

Gyorsított CSS

A háttértulajdonságokat részleteztem, hogy könnyebben megmagyarázhatóak legyenek. A rövidített jelölés is egyenértékű lesz:

törzs (háttér: url (background-photo.jpg) középső középső borító ismétlés nélküli javítva;)

Mindössze annyit kell tennie, hogy módosítsa az url értéket, hogy az a háttérkép elérési útjára mutasson.

Nem kötelező: médialekérdezés kis képernyőkhöz

Kis képernyőknél Photoshop segítségével kicsinyítettem az eredeti háttérképet arányosan 768x505px-re, illetve a Smush.it segítségével még kicsinyítettem a méretet. Ezzel a fájl mérete 1741 KB-ról 114 KB-ra csökkent. Azok. A képméret 93%-kal csökkent.

Kérlek ne érts félre, a 114KB még mindig elég sok egy pusztán esztétikai dizájnelemnek. Tekintettel a további 114 KB-os rezsire, csak akkor használnék ilyen fájlt, ha lehetőséget látnék a felhasználói élmény (UX) jelentős javítására. jelenleg az internetes forgalom jelentős része mobil eszközökről érkezik háttér - kép: url (képek / háttér - fotó - mobil - eszközök. jpg);

A médialekérdezés maximális szélessége: 767 képpont, ami azt jelenti, hogy ha a böngésző nézetablakja nagyobb, mint 767 képpont, akkor egy nagy háttérkép töltődik be.

Ennek a médialekérdezésnek az a hátránya, hogy ha módosítja a böngészőablak szélességét, például 1200 képpontról 640 képpontra (vagy fordítva), azonnal látni fogja a kis vagy nagy háttérkép betöltésének pillanatát.

Ráadásul amiatt, hogy egyes kis képernyős készülékek több pixelt is képesek megjeleníteni – például a retina kijelzős iPhone 5 1136x640px felbontást képes megjeleníteni – a kis háttérkép pixeles lesz.

Összegzés

Megtekintheti a forráskód naprakészebb verzióját ebből az oktatóanyagból a GitHubon. Csak egy dologra figyelmeztethetem: kérjük, óvatosan használja ezt a technikát, mert a nagy fájlok súlyosan károsíthatják az UX-et, különösen, ha a végfelhasználó lassú és megbízhatatlan internetkapcsolatot használ. Ez egy másik ok, amiért érdemes megfelelő háttérszínt választani, hogy a felhasználó elolvashassa a tartalmat a háttérkép betöltése közben.

A nagyméretű videók a webhelyek hátterében a webdizájn igen népszerű trendje. Az okosan alkalmazott videók drámaibbá és vonzóbbá tehetik a webhelyet a felhasználók számára.

Ezenkívül a videó hátterek zökkenőmentesen és „fékek” nélkül játszhatók le, ellentétben a JavaScript-el készített hátterekkel, amelyekhez bizonyos kódok és képek betöltése szükséges, mielőtt a felhasználó látná az animáció eredményét.

Vannak olyan cégek, mint a Powerhouse vagy az Adidas, amelyek videót használnak a webhely háttereként, hogy egy termékkel vagy szolgáltatással kapcsolatos konkrét üzenetet vagy történetet közvetítsenek a felhasználó felé.

Bár a videóháttér létrehozásának legnépszerűbb módja a HTML5 videó- címkét néhány CSS-paraméterrel együtt, érdemes figyelni az alternatív videóforrásokra is, például a YouTube-ra. Ebben az esetben nem kell aggódnia a szerver lassú válaszadása miatt, mert a kérés közvetlenül a YouTube-ra kerül.

Ebben a cikkben megmutatom, hogyan készíthetsz egy nagyszerű webhelyet, amely YouTube-videókat használ háttérként. A jQuery.mb.YTPlayer.js fájlt fogjuk használni videónk megjelenésének szerkesztéséhez és szabályozásához. Tehát kezdjük!

Források letöltése
Demó

Szükséged lesz:

// Nagy háttértartalom itt

Most minden szakaszt meg kell töltenie tartalommal. A nagy háttér és a kis háttér szakaszba helyezze az osztályt minta, hogy könnyű textúrát hozzunk létre a videónkban. Ezenkívül hozzá kell adnia a h1-et, a h2-t, a bekezdést és a gombot.