Conectarea popularului serviciu Zadarma la 1C este acum o chestiune de câteva minute. Este suficient să conectați o extensie gata făcută pentru integrarea 1C și Zadarma. Orice angajat poate efectua cu ușurință instalarea, chiar și doamna de curățenie, mătușa Masha, specialist în curățenie.

În primul rând, ne-am concentrat asupra întreprinderilor mici care utilizează activ Zadarma PBX și configurația 1C: Managementul unei firme mici 1.6.

Așa cum a fost înainte

Pentru a vă integra cu Zadarma, a trebuit să utilizați un dialer special încorporat în 1C - așa-numitul fundal SIP. Această opțiune era potrivită pentru mai multe „ifs”:

• dacă 1C este instalat pe un computer local și nu undeva pe un server terminal
• dacă utilizatorul este de acord să utilizeze un apelator 1C în locul unui telefon de birou

În general, dacă toate „if-urile” au fost de acord, atunci integrarea a fost posibilă.

Cum a devenit acum

Acum, pentru integrarea 1C și Zadarma, nu mai contează deloc ce dispozitiv final este utilizat pentru apeluri. Poate fi orice:

• telefon de birou
• softphone instalat în sistemul de operare
• fundal web care rulează în browser

Extensia 1C pentru Zadarma interacționează cu API-ul, nu cu apelatorul. Prin urmare, nu contează ce anume va apela utilizatorul.

Ușor de instalat

Instalarea constă din 1 pas. Să vă arătăm doar 2 capturi de ecran.

Plasarea pe pagina principală

Panoul de telefonie Zadarma apare automat pe pagina de pornire. Dacă dintr-o dată utilizatorul nu are nevoie de acest lucru, poate pur și simplu debifa caseta din meniul „Vizualizare” - „Personalizați pagina de start”.

Ușor de configurat

Luăm cheile API din contul personal Zadarma

și introduceți-le în 1C

Și, desigur, introducem datele de conectare / parola contului pe simplit.io.

Gata, acum 1C este conectat la Zadarma.

Apeluri la clic în 1C

Oriunde vedem pictograma „telefon”, putem face clic pe ea și Zadarma va începe să formeze numărul.

Cerințe „Informații de contact” se află în multe liste de documente, cărți de referință - nu mai trebuie să rulați pe cardul clientului pentru a efectua un apel. De exemplu, puteți apela direct din lista comenzilor, facturilor, consumabilelor

Card client pentru un apel primit

O funcție care a devenit de fapt standard și obligatorie la integrarea 1C și PBX. Deși trebuie remarcat faptul că nu este întotdeauna solicitat, deci poate fi oprit în setările panoului Telefonie.

Înregistrați apelul cu documentul evenimentului

La fel, puteți controla necesitatea creării automate a documentului „Eveniment-apel telefonic”. Folosind acest document, este convenabil să lăsați comentarii la apel.

Și cel mai important, pe baza acestui document, puteți introduce apoi Comanda, Factura și astfel relația dintre apel și vânzare va fi clar vizibilă.

Puteți atașa un memento la documentul de apel telefonic, ceea ce este foarte convenabil dacă angajatul a promis că va suna clientul mai târziu.

Istoricul apelurilor PBX

Istoricul apelurilor este, desigur, un lucru foarte important. Extensia pentru integrarea 1C și Zadarma oferă mai multe opțiuni pentru lucrul cu istoria.

De exemplu, un utilizator dorește să vizioneze singur o poveste. Similar cu lista apelurilor recente din telefonul nostru mobil. Acest istoric poate fi vizualizat deschizând fila Istoric de pe pagina principală.

Foarte des vreau să văd istoricul unui anumit client, persoană de contact sau persoană fizică. În cazul unui client, trebuie să vedem atât apelurile către numerele omologului însuși, cât și numerele tuturor persoanelor sale de contact.

Istoricul apelurilor cu selecție de către client poate fi vizualizat direct în cardul său. Istoricul include apeluri de la client și de la toate contactele acestuia. Când numărul aparține contrapartidei în sine, câmpul „Contact” nu este completat.

De la autor:În acest tutorial, vă vom prezenta o tehnică simplă pentru crearea unei imagini de fundal care se va întinde pe toată lățimea ecranului browserului. Pentru aceasta avem nevoie de proprietatea CSS de dimensiuni de fundal; JavaScript nu este necesar.

Exemple de imagini de fundal sensibile

În zilele noastre, a devenit destul de populară utilizarea unei fotografii uriașe ca fundal, care ocupă o pagină web întreagă. Iată câteva exemple de mai multe site-uri care au seturi complete de imagini de fundal receptive:

Dacă doriți să obțineți un rezultat similar în următorul dvs. proiect web, atunci acest articol este ceea ce aveți nevoie.

Principii de baza

Iată planul nostru de acțiune.

Utilizați proprietatea de dimensiuni de fundal pentru a umple complet fereastra de vizualizare

Proprietatea CSS de dimensiuni de fundal este setată să acopere. Valoarea de copertă îi spune browserului să scaleze automat și proporțional lățimea și înălțimea imaginii de fundal, astfel încât să fie întotdeauna egală sau mai mare decât lățimea / înălțimea ferestrei.

Utilizați o interogare media pentru a gestiona imagini de fundal mici pentru dispozitive mobile

Pentru a îmbunătăți viteza de încărcare a paginii pe ecrane mici, vom folosi o interogare media pentru a procesa o versiune mai mică a imaginii noastre de fundal. Nu este obligatoriu. Această tehnică va funcționa fără ea. Dar de ce este o idee bună să folosiți o imagine de fundal mică pentru dispozitivele mobile?

Imaginea pe care am folosit-o în demonstrație este de 5500x3600px. Această rezoluție este suficientă pentru majoritatea monitoarelor cu ecran lat de pe piață. Dar pentru aceasta trebuie să procesați un fișier de 1,7 MB.

O astfel de încărcare suplimentară uriașă doar pentru a plasa o fotografie de fundal nu va face niciun bine oricum. Și, desigur, acest lucru va fi extrem de rău pentru conexiunile care utilizează internetul mobil. Și, de asemenea, o astfel de rezoluție nu este necesară pentru dispozitivele cu un ecran mic (mai multe despre aceasta mai târziu). Să aruncăm o privire asupra întregului proces.

HTML

Pentru marcare, aveți nevoie doar de acest lucru:

Vom atribui o imagine de fundal elementului corp, astfel încât imaginea să umple întotdeauna întreaga fereastră a browserului.

Cu toate acestea, această tehnică va funcționa și pentru orice element la nivel de bloc (cum ar fi un div sau un formular). Dacă lățimea și înălțimea elementului bloc sunt fluide, atunci imaginea de fundal va fi întotdeauna scalată pentru a umple întregul container.

CSS

Setăm următoarele stiluri pentru elementul corp:

corp (/ * Calea către imagine * / background-image: url (images / background-photo.jpg); / * Imaginea de fundal este întotdeauna centrată vertical și orizontal * / background-position: centru centru; / * Imaginea de fundal nu se repetă * / background-repeat: no-repeat; / * Imaginea de fundal este fixată în fereastra de vizualizare, deci nu se schimbă atunci când înălțimea conținutului este mai mare decât înălțimea imaginii * / background-attachment: fixed; / * Acesta este ceea ce permite imaginea de fundal pentru a se ajusta la dimensiunea containerului * / background-size: cover; / * Setează culoarea de fundal care să fie afișată în timp ce imaginea de fundal se încarcă * / background-color: # 464646;)

Cea mai importantă pereche proprietate / valoare de care trebuie să fii atent:

fundal-dimensiune: coperta;

Aici începe magia. Această pereche proprietate / valoare îi spune browserului să scaleze proporțional imaginea de fundal, adică astfel încât lățimea și înălțimea sa să fie egale sau mai mari decât lățimea / înălțimea elementului (în cazul nostru, acesta este elementul corpului).

Cu toate acestea, această pereche proprietate / valoare are o problemă: dacă imaginea de fundal este mai mică decât elementul corp - ceea ce se întâmplă pe ecranele de înaltă rezoluție și / sau când aveți o cantitate mare de conținut pe pagină - browserul va mări inevitabil pe imagine. Și, după cum știm, atunci când creștem dimensiunea bitmap-ului, calitatea imaginii scade (cu alte cuvinte, apare pixelarea).

Mărirea dimensiunii imaginii de la dimensiunea inițială afectează calitatea imaginii. Rețineți acest lucru atunci când alegeți o imagine potrivită. Demo-ul folosește o fotografie imensă de 5500x3600px pentru monitoarele cu ecran lat, deci ar fi nevoie de un ecran foarte mare pentru ca distorsiunea de calitate să apară. Să mergem mai departe. Pentru a păstra imaginea de fundal în centrul ferestrei, adăugăm:

fundal-poziție: centru centru;

Această intrare plasează fundalul pe axa coordonatelor în centrul ferestrei. În continuare, trebuie să definim ce se întâmplă atunci când înălțimea conținutului depășește înălțimea vizibilă a ferestrei. Când se întâmplă acest lucru, apare o bară de derulare.

În acest caz, trebuie să ne asigurăm că imaginea de fundal rămâne în poziția inițială chiar și atunci când utilizatorul derulează pagina în jos. În această situație, imaginea fie se va termina la derulare, fie se va mișca în timp ce derulează (ceea ce poate distrage atenția utilizatorului). Pentru a remedia fundalul, setăm proprietatea background-attachment la fix.

background-attachment: fix;

În demonstrație, am adăugat funcția „încărcați conținutul”, astfel încât să puteți vedea ce se întâmplă când bara de derulare apare în browser când proprietatea atașamentului de fundal este setată la fix. De asemenea, puteți descărca demo-ul și puteți juca cu valorile proprietăților de poziționare (de exemplu, atașamentul de fundal și poziția de fundal) pentru a vedea cum afectează acest lucru derularea paginii și imaginea de fundal. Restul valorilor proprietății se explică de la sine.

Stenografie CSS

Am detaliat proprietățile de fundal pentru a le explica mai ușor. Notarea prescurtată va fi, de asemenea, echivalentă:

corp (fundal: url (background-photo.jpg) capac central centru fără repetare fix;)

Tot ce trebuie să faceți este să modificați valoarea adresei URL pentru a indica calea către imaginea de fundal.

Opțional: interogare media pentru ecrane mici

Pentru ecrane mici, am folosit Photoshop pentru a reduce imaginea de fundal originală proporțional cu 768x505px și am folosit și Smush.it pentru a reduce dimensiunea puțin mai departe. Acest lucru a redus dimensiunea fișierului de la 1741 KB la 114 KB. Acestea. dimensiunea imaginii redusă cu 93%.

Vă rog să nu mă înțelegeți greșit, 114KB este încă destul de mult pentru un element de design pur estetic. Având în vedere cheltuielile suplimentare de 114 KB, aș folosi un astfel de fișier numai dacă aș vedea o oportunitate de a îmbunătăți semnificativ experiența utilizatorului (UX). în acest moment o proporție semnificativă a traficului pe internet provine din fundalul dispozitivelor mobile - imagine: url (imagini / fundal - foto - mobil - dispozitive. jpg);

Interogarea media are o lățime maximă: limita de lățime de 767 px, ceea ce înseamnă că, dacă fereastra de vizualizare a browserului este mai mare de 767 px, se va încărca o imagine de fundal mare.

Dezavantajul utilizării acestei interogări media este că, dacă schimbați lățimea ferestrei browserului, de exemplu, de la 1200px la 640px (sau invers), veți vedea imediat momentul în care se încarcă o imagine de fundal mică sau mare.

În plus, datorită faptului că unele dispozitive cu un ecran mic pot afișa mai mulți pixeli - de exemplu, iPhone 5 cu afișaj retină este capabil să afișeze o rezoluție de 1136x640px - imaginea de fundal mică va fi pixelată.

Rezumând

Puteți vizualiza o versiune mai actualizată a codului sursă din acest tutorial pe GitHub. Nu vă pot avertiza decât despre un singur lucru: vă rugăm să folosiți această tehnică cu prudență, deoarece fișierele mari pot deteriora grav UX-ul, mai ales dacă utilizatorul final folosește o conexiune la internet lentă și nesigură. Acesta este un alt motiv pentru care ar trebui să alegeți o culoare de fundal adecvată, astfel încât utilizatorul să poată citi conținutul în timp ce imaginea de fundal se încarcă.

Videoclipurile mari în fundalul site-urilor web sunt o tendință destul de populară în designul web. Videoclipurile aplicate inteligent pot face un site web mai dramatic și mai atrăgător pentru utilizatori.

În plus, fundalurile video pot fi redate fără probleme și fără „frâne”, spre deosebire de fundalurile create cu JavaScript, care necesită încărcarea anumitor coduri și imagini înainte ca utilizatorul să vadă rezultatul animației.

Există companii precum Powerhouse sau Adidas care folosesc video ca fundal al unui site web pentru a transmite utilizatorului un mesaj sau o poveste specifică despre un produs sau serviciu.

Deși cel mai popular mod de a crea un fundal video este utilizarea HTML5 video etichetă împreună cu câțiva parametri CSS, ar trebui să acordați atenție și surselor video alternative, de exemplu, YouTube. În acest caz, nu trebuie să vă faceți griji cu privire la răspunsul lent al serverului, deoarece solicitarea va fi trimisă direct la YouTube.

În acest articol, vă voi arăta cum puteți crea un site web interesant, care utilizează videoclipuri YouTube ca fundal. Vom folosi jQuery.mb.YTPlayer.js pentru a edita și controla aspectul videoclipului nostru. Deci sa începem!

Descărcați sursele
Demo

Vei avea nevoie:

// Conținut mare de fundal aici

Acum trebuie să completați fiecare secțiune cu conținut. În secțiunea fundal mare și fundal mic, plasați clasa model, pentru a crea o textură ușoară în videoclipul nostru. De asemenea, trebuie să adăugați h1, h2, paragraf și buton.