რა არის ვებ ფონი? ადაპტირებადი ფონის სურათები დამატებითი CSS-ის გამოყენებით. გამოიყენეთ ადაპტური მთლიანი ფონის სურათები

კავშირი პოპულარული სერვისი Zadarma მდე 1C – ახლა tse pitannya kіlkoh hvilin. ყველაფერი რაც თქვენ გჭირდებათ არის დააკავშიროთ მზა გაფართოება 1C-ისა და Zadarma-ს ინტეგრირებისთვის. ინსტალაციის დამონტაჟება შესაძლებელია უპრობლემოდ, იქნება ეს დასუფთავების სპეციალისტი თუ დასუფთავების სპეციალისტი, დეიდა მაშა.

დასაწყისში ჩვენ ორიენტირებული ვიყავით მცირე ბიზნესზე, რომელსაც აქტიურად უჭერს მხარს ATS Zadarma და 1C კონფიგურაცია: მცირე კომპანიის მართვა 1.6.

როგორი იყო ადრე

Zadarma-სთან ინტეგრაციისთვის დაგჭირდებათ სპეციალური აკრიფეს გამოყენება, რომელიც დამონტაჟებულია 1C-ის შუაში, სახელწოდებით SIP ტელეფონი. ეს ვარიანტი შესაფერისია მრავალი მიზეზის გამო:

• yakscho 1C ინსტალაციები ლოკალური კომპიუტერი, და არა აქ ტერმინალის სერვერზე
• როგორ შეუძლია მომხმარებელმა გამოიყენოს 1C აკრიფეთ სამაგიდო ტელეფონის ნაცვლად?

სხვათა შორის, თუ ყველა "რამ" ერთად გაერთიანდა, მაშინ ინტეგრაცია შესაძლებელი იყო.

როგორ გახდა ახლა

ახლა, 1C-ისა და Zadarma-ს ინტეგრირებისთვის, საერთოდ არ არის მნიშვნელოვანი, რომელი ბოლო მოწყობილობა გამოიყენება ზარებისთვის. Რა შეგიძლია:

• სამაგიდო ტელეფონი
• პროგრამული ტელეფონი, ინსტალაცია OS-ში
• ვებ ფონი, რომელიც მუშაობს ბრაუზერთან

1C გაფართოება Zadarma-სთვის ურთიერთქმედებს API-სთან და არა აკრიფეთთან. მისთვის არ აქვს მნიშვნელობა, როგორ უწოდებს თავად კორისტუვაჩი.

მარტივი ინსტალაცია

ინსტალაცია შედგება ერთი ეტაპისგან. ჩვენ უბრალოდ გაჩვენებთ 2 ეკრანის სურათს.

მოთავსებულია კობის მხარეს

Zadarma ტელეფონის პანელი ავტომატურად გამოჩნდება პირველ გვერდზე. თუ ამის გაკეთება არ გჭირდებათ, შეგიძლიათ უბრალოდ მონიშნოთ ველი "ნახვა" მენიუში - "პირის გვერდის მორგება".

დაყენების სიმარტივე

ჩვენ ვიღებთ API გასაღებებს სპეციალური Zadarma ანგარიშიდან

და ჩადეთ ისინი 1C ტემპერატურაზე

მე პირველად შევიყვან თქვენს მომხმარებლის სახელს/პაროლს simplit.io-ზე.

ესე იგი, ახლა თქვენი 1C დაკავშირებულია ზადარმასთან.

რეკავს თითო დაწკაპუნებაზე 1C-ში

აქ, სადაც ხედავთ ტელეფონის ხატულას, შეგიძლიათ დააჭიროთ მასზე და ისევ აკრიფოთ ნომერი.

„საკონტაქტო ინფორმაციის“ დეტალები ხელმისაწვდომია დოკუმენტებისა და მრჩევლების მდიდარი სიისთვის - თქვენ აღარ გჭირდებათ კლიენტის ბარათზე გაშვება დასარეკად. მაგალითად, შეგიძლიათ დარეკოთ პირდაპირ მოთხოვნების, ხარჯების, დანახარჯების სიიდან

მომხმარებლის ბარათი შესვლის ზარზე

ფუნქცია რეალურად გახდა სტანდარტული და სავალდებულო 1C და ATS-ის ინტეგრაციით. თუ გსურთ დარწმუნდეთ, რომ ის დიდი ხანია არ არის მოთხოვნილი, შეგიძლიათ აირჩიოთ ის ტელეფონის პანელის პარამეტრებში.

ზარის რეგისტრაცია დოკუმენტით

ანალოგიურად, თქვენ შეგიძლიათ ამოიღოთ დოკუმენტის „პოდია-ტელეფონური ზარის“ ავტომატური შექმნის აუცილებლობა. დამატებითი დოკუმენტებისთვის, გთხოვთ, წაშალოთ კომენტარები ზარის დარეკვამდე.

და რაც მთავარია, ამ დოკუმენტის საფუძველზე შეგიძლიათ შეიყვანოთ ხელშეკრულება, რახუნოკი და ამ გზით ზარსა და გაყიდვას შორის ურთიერთობა ნათლად გამოჩნდება.

სატელეფონო ზარი შეიძლება ასოცირებული იყოს გამოცნობასთან, რაც კიდევ უფრო ადვილია, თუ დაცვის თანამშრომელი დააპირებს კლიენტს მოგვიანებით დარეკვას.

PBX ზარების ისტორია

ძვინკის ისტორია, რა თქმა უნდა, ძალიან მნიშვნელოვანია. 1C-ისა და Zadarma-ს ინტეგრაციის გაფართოებები უზრუნველყოფს უამრავ სამუშაო ვარიანტს ისტორიასთან.

მაგალითად, უცხოელს სურს, თავისებურად გააოცოს ისტორია.ჩვენთან დარჩენილი ზარების სიის მსგავსი ძველი ტელეფონი. ამ ამბის ხელახლა ნახვა შესაძლებელია წინა გვერდზე „ისტორიის“ ჩანართის გახსნით.

ხშირად მინდა ვისწავლო მეტი კონკრეტული კლიენტის ისტორიის შესახებ., საკონტაქტო პირი ან ფიზიკური პირი. კლიენტთან ურთიერთობისას ჩვენ გვჭირდება ზარები თავად კონტრაგენტის ნომრებზე და ყველა სხვა კონტაქტის ნომრებზე.

კლიენტის მიერ შერჩევით ზარების ისტორია შეგიძლიათ ნახოთ თქვენი ბარათიდან. ისტორია მოიცავს კლიენტის და ყველა საკონტაქტო პირის ზარებს. თუ ნომერი ეკუთვნის თავად კონტრაგენტს, ველი „კონტაქტი“ არ შეივსება.

როგორ დავაყენოთ ვებ გვერდი თქვენს დესკტოპის მონიტორზე?

საოცარია, უპირველეს ყოვლისა, ის, რომ თუ მხატვარი ხარ, გაოცებული დარჩები სამუშაო მაგიდაზე დაყენებული სარდაფებით. ძნელია გაკვირვება კულისებში დაყენებული სურათით, რადგან სისტემა არაერთხელ იყო დაინსტალირებული. ყველა ფრილანსერი იწყებს სწრაფ დაწყებას და ისინი დაკავებულნი არიან დესკტოპისთვის საჭირო სურათების მოძიებით. მსახიობები შექმნიან ანიმაციურ ტრასებს. მე გირჩევთ, დააინსტალიროთ თქვენი საყვარელი საიტის მთავარი გვერდი, როგორც საყრდენი (თუნდაც ეს იყოს გვერდითი გვერდი, რა თქმა უნდა). ერთდროულად, საათებში შეუზღუდავი ინტერნეტიეს განსაკუთრებით ეხება მათ, ვინც მუშაობს, კიდევ უფრო მარტივად, განსაკუთრებით იმ შემთხვევაში, თუ კომპიუტერი ან ლეპტოპი მუდმივად არის დაკავშირებული ლიმიტთან. რაც არ უნდა იყოს, ეს ვარიანტი ცუდია. ეს ხრიკი გამოჩნდა Windows XP-ში. სამწუხაროდ, დასრულდა. ინტერაქტიული მაგიდები ამოიწურა. განსაკუთრებით მინდოდა თვალყური ადევნო ახალ საინფორმაციო საიტებს ონლაინ. სამუშაო მაგიდასთან ასეთი წყობა მდიდრებს გაამდიდრებდა. ალე, ვიმეორებ, ახლის შემქმნელები ვინდოუსის ვერსიებითქვენ გადაწყვიტეთ დეაქტივაციის დეაქტივაცია ინტერაქტიული გვერდის ჩვენების გარეშე. ფართოდ ერთი შეხედვით, კიდევ უფრო და უფრო უვნებლად. მითუმეტეს, ერთი საათის განმავლობაში არ მაქვს ასეთი შესაძლებლობა.

პირდაპირ საქმეზე გადავიდეთ. ვებსაიტის ინსტალაცია სამუშაო მაგიდაზე

• დააწკაპუნეთ მარჯვენა ღილაკიეკისრება სამუშაო მაგიდაზე კანის თავისუფალ სივრცეს

• დამატებით მენიუში სამუშაო მაგიდაზე გამოსაჩენად აირჩიეთ ელემენტი ძლიერი.

• მოდით ავირჩიოთ სამუშაო ცხრილის ჩანართი და დავაჭიროთ სამუშაო მაგიდის მორგება.

• დესკტოპის Elementi მენიუში აირჩიეთ ჩანართი ვებდა შემდეგ დააჭირეთ ღილაკს კრეატიულობა... კარგი, ჩი ვიბრატი წერტილი ჩემი ამჟამინდელი მთავარი გვერდი.ფონზე ნაჩვენები ვებსაიტის გვერდი არის დაინსტალირებული თქვენს მთავარ ბრაუზერში.

ფანჯარაში, რომელიც გამოჩნდება, უბრალოდ შეიყვანეთ თქვენი საყვარელი საიტის დაკოპირებული მისამართი თქვენი ბრაუზერის მისამართის ზოლიდან.

დახურეთ ღია დიალოგური ფანჯრები სათითაოდ ცვლილებების შეტანით და ღილაკზე OK დაჭერით. ახლა, შეგროვებული სურათების ნაცვლად, თქვენ იმყოფებით ვებსაიტის მხარეს, ასე რომ, თქვენს დესკტოპზე საიტის მონახულებით, შეგიძლიათ თვალი ადევნოთ ცვლილებებს ონლაინ რეჟიმში.

ავტორის შეხედულება:ამ თავდაპირველ სტატიაში ჩვენ განვიხილავთ ფონის სურათის შექმნის მარტივ ტექნიკას, რომელიც გადაჭიმულია ბრაუზერის ხედის მთელ სიგანეზე. რატომ გვჭირდება CSS power background-size; JavaScript არ არის საჭირო.

გამოიყენეთ ადაპტური მთლიანი ფონის სურათები

დღესდღეობით, ვიკორსტანი პოპულარული გახდა, როგორც შესანიშნავი ფოტოგრაფიის წყარო, რომელიც იკავებს მთელ ვებ გვერდს. მრავალი საიტის გამოყენების ღერძი, რომლებსაც აქვთ ადაპტური დანიშნულება ფონის სურათებისთვის:

თუ გსურთ მსგავსი შედეგის მიღწევა თქვენი მიმდინარე ვებპროექტით, მაშინ ეს არის ის, რაც გჭირდებათ.

Ძირითადი პრინციპები

ღერძი ჩვენი გეგმაა.

Vickory ძალაუფლების ფონის ზომა, რათა სრულად დაიმახსოვროთ ის, რისი ნახვაც შეგიძლიათ

ფონის ზომის CSS ძალა არის საფარის მნიშვნელობა. საფარის მნიშვნელობა აცნობებს ბრაუზერს, რომ მან ავტომატურად უნდა გააფართოვოს ფონის სურათის სიგანე და სიმაღლე პროპორციულად ისე, რომ ისინი ყოველთვის იყოს ტოლი ან უფრო დიდი ვიდრე ხედის სიგანე/სიმაღლე.

Vikorista მედია მოთხოვნა მცირე ფონის სურათების რედაქტირებისთვის მობილური მოწყობილობები

იმისათვის, რომ გვერდი უფრო ელასტიური გავხადოთ პატარა ეკრანებზე, ჩვენ გამოვიყენებთ მედია მოთხოვნებს ჩვენი ფონის სურათის შეცვლილი ვერსიის გამოსატანად. ეს არ არის აშკარა. ეს ტექნიკა შეიძლება გამოყენებულ იქნას ყოველგვარი მიზეზის გარეშე. რატომ არის ასეთი შესანიშნავი იდეა მობილური მოწყობილობებისთვის პატარა ფონის სურათის შექმნა?

სურათს, როგორც მე გამოვიყენე დემო მაგალითში, აქვს ცალკე ზომა 5500x3600 პიქსელი. რომლის ნებართვაც მოცემულია გასაყიდად ხელმისაწვდომი ფართოფორმატიანი კომპიუტერის მონიტორების უმეტესობის ჩვენებაზე. ამ მიზეზით, თქვენ უნდა შექმნათ ფაილი 1.7 მბ ზომით.

ასეთი დიდი დამატებითი აქცენტი მხოლოდ ფონის ფოტოს განსათავსებლად ყოველთვის კარგს არაფერს მოუტანს. და, სიგიჟეა, აბსოლუტურად დამპალია ვიკორიზმის მსგავს შეხვედრებზე გამოჩენა მობილური ინტერნეტი. და ეს ასევე შესაფერისია პატარა ეკრანის მქონე მოწყობილობებისთვის (ამის შესახებ მოხსენება მოგვიანებით). მოდით შევხედოთ მთელ პროცესს.

HTML

მარკირებისთვის დაგჭირდებათ შემდეგი:

ვაპირებთ ვაღიაროთ ფონის სურათისხეულის ელემენტისთვის, ისე, რომ სურათი ყოველთვის იკავებს ბრაუზერის მთელ ფანჯარას.

არანაკლებ, ეს ტექნიკა ასევე მუშაობს ნებისმიერი ბლოკის ელემენტისთვის (მაგალითად, div ან ფორმა). იმის გამო, რომ თქვენი ბლოკის ელემენტის სიგანე და სიმაღლე თანაბარია, ფონის სურათები უნდა იყოს მასშტაბირებული მთელი კონტეინერის შესავსებად.

CSS

დააყენეთ შემდეგი სტილები სხეულის ელემენტისთვის:

body ( /* გზა სურათისკენ */ ფონის სურათი: url(images/background-photo.jpg); /* ფონის სურათები ყოველთვის ცენტრშია ვერტიკალურად და ჰორიზონტალურად */ ფონის პოზიცია: ცენტრში; /* ფონის სურათები არ მეორდება * / ფონური გამეორება: არა-გამეორება;/* ფონის სურათი ფიქსირდება ხედვის პორტში, ასე რომ, ის არ გადაინაცვლებს, თუ შინაარსის სიმაღლე მეტია სურათის სიმაღლეზე */ ფონის დანართი: დაფიქსირებულია; ფონი- ზომა: საფარი;/* ჩანართები ფონის ფერი, რომელიც გამოჩნდება ფონის სურათის ჩვენებისას */ background-color: #464646; )

ყველაზე მნიშვნელოვანი წყვილია ძალა/მნიშვნელობა, პატივისცემის მოსაპოვებლად:

ფონის ზომა: საფარი;

ოჰ, სად იწყება სასწაული. ეს სიმძლავრე/მნიშვნელობის წყვილი ეუბნება ბრაუზერს, გააფართოვოს ფონის სურათი პროპორციულად. ისე, რომ მისი სიგანე და სიმაღლე თანაბარი ან დიდი იყოს, ელემენტის ქვედა სიგანე/სიმაღლე (ჩვენს ვერსიაში, სხეულის ელემენტი).

თუმცა, სიმძლავრის/მნიშვნელობის ამ წყვილს აქვს ერთი პრობლემა: თუ ფონის სურათი უფრო მცირეა, ვიდრე სხეულის ელემენტის ზომა, რა გამოჩნდება ეკრანებზე მაღალი კონტენტის სიმკვრივით და/ან თუ თქვენ გაქვთ დიდი რაოდენობით კონტენტი გვერდზე - ბრაუზერი აუცილებლად გაზრდის გამოსახულების მასშტაბს. მე, როგორც ვიცით, როცა ზომაში ვიმატებთ რასტრული გამოსახულება, გამოსახულების სიკაშკაშე მცირდება (სხვა სიტყვებით რომ ვთქვათ, ხდება პიქსელაცია).

გამომავალი ზომებზე დიდი სურათები მითითებულია სურათებად. გაითვალისწინეთ ეს სხვა სურათის არჩევისას. დემო აპლიკაციას აქვს დიდი ფოტო, ზომით 5500x3600 პიქსელი ფართოეკრანიანი მონიტორებისთვის, რაც მეტს მოითხოვს დიდი ეკრანი, რათა სიმწარე აღმოიფხვრას. მოდი დავიმსხვრიოთ. ისე, რომ ფონის სურათი ყოველთვის იყოს ფანჯრის ცენტრი, როდესაც ისევ ვუყურებ, ჩვენ დავწერთ:

ფონი-პოზიცია: ცენტრი ცენტრი;

ამ ჩანაწერს აქვს ფონი კოორდინატთა ღერძზე ხედის ფანჯრის ცენტრში. შემდეგი, ჩვენ უნდა განვსაზღვროთ რა მოხდება, თუ შინაარსის სიმაღლე გადააჭარბებს ხედვის აშკარა სიმაღლეს. როდესაც ეს მოხდება, ჩნდება გადახვევის ეფექტი.

ამ შემთხვევაში, ჩვენ უნდა ვიმუშაოთ ისე, რომ ფონის სურათი დაიკარგოს გამომავალ ადგილას, როდესაც მომხმარებელი გადადის გვერდის ქვემოთ. ამ სიტუაციაში, სურათი ან უბრალოდ მთავრდება გადახვევისას, ან მოძრაობს გადახვევის პროგრესირებასთან ერთად (რამაც შეიძლება მნიშვნელოვნად შეაწუხოს მომხმარებელი). ფონის დასაფიქსირებლად, ჩვენ დავაყენეთ ფონის დანართი fixed.

ფონი-დანართი: ფიქსირებული;

მე დავამატე დემო აპლიკაციაში „შიგთავსის გაძლიერების“ შესაძლებლობა, ასე რომ თქვენ ხედავთ რა ხდება, როდესაც ბრაუზერში გადახვევა გამოჩნდება, როდესაც ფონის დანართის მნიშვნელობა დაყენებულია დაფიქსირებული. თქვენ ასევე შეგიძლიათ გადახედოთ დემო ვერსიას და ითამაშოთ მნიშვნელოვანი კონტროლის საშუალებით, რომლებიც მიუთითებენ ელემენტების განთავსებაზე (მაგალითად, ფონის მიმაგრება და ფონის პოზიცია), რათა ნახოთ როგორ გამოიყურება გადახვევის გვერდი და ფონის სურათები. გასაგებია ხელისუფლების სხვა მნიშვნელობები უფლებამოსილებით.

მალსახმობი CSS ნოტაცია

მე ნათლად აღვწერე ფონური ძალები, რათა მათი ახსნა ადვილი იყოს. სტენოგრამის აღნიშვნა ექვივალენტური იქნება:

სხეული (ფონი: url(background-photo.jpg) ცენტრის ყდა, გამეორება არ არის დაფიქსირებული; )

ყველაფერი რაც თქვენ გჭირდებათ არის შეცვალოთ URL-ის მნიშვნელობა, რათა მიუთითოთ თქვენი ფონის სურათი.

Dodatkovo: მედია შეყვანა მცირე ეკრანებისთვის

პატარა ეკრანებისთვის მე ვიკორისტი ვარ Photoshop პროგრამა, პროპორციულად რომ შევცვალო ზომა 768x505 პიქსელზე და ასევე გამოვიყენე Smush.it სერვისი, რომ ზომა ოდნავ შემეცვალა. ახლა ფაილის ზომა შეიცვალა 1741 კბ-დან 114 კბ-მდე. ტობტო. სურათის ზომა 93%-ით შეიცვალა.

გთხოვთ, არასწორად არ გამიგოთ, 114 კბ მაინც საკმარისია წმინდა ესთეტიკური დიზაინის ელემენტისთვის. Vrahovuyuchi დამატებითი navantazhenya 114KB, დავიწყე vikoristovat ასეთი ფაილი, უბრალოდ გაზრდის უნარი მნიშვნელოვანი colorize ურთიერთქმედების კორესპონდენტსა და საიტს (UX), რადგან ვ დღევანდელი მომენტიინტერნეტ ტრაფიკის მნიშვნელოვანი ნაწილი იგზავნება მობილურ მოწყობილობებზე Back-image: url (images/background-photo-mobile-devices. jpg);

მედიის შეყვანა დაყენებულია მაქსიმალურ სიგანეზე: 767 პიქსელი, რაც ნიშნავს, რომ თუ 767 პიქსელზე დიდი ბრაუზერის ნახვა გაქვთ, საჭირო იქნება ფონის დიდი სურათი.

მედიის მოხმარების ერთ-ერთი უპირატესობა ის არის, რომ თუ შეცვლით თქვენი ბრაუზერის ფანჯრის სიგანეს, მაგალითად, 1200 პიქსელიდან 640 პიქსელამდე (ან იგივე), მაშინვე შექმნით გლამურულ მომენტს პატარა ან დიდ ფონის სურათზე.

გარდა ამისა, იმ მოწყობილობების საშუალებით, რომლებსაც აქვთ პატარა ეკრანი, შეიძლება უფრო დიდი რაოდენობის პიქსელების ჩვენება - მაგალითად, iPhone 5 ბადურის დისპლეით აჩვენებს ცალკეულ სურათს 1136x640 პიქსელით - პატარა ფონის სურათი გამოჩნდება Excellized.

მიწოდების ჩანთები

შეგიძლიათ მეტის ნახვა მოქმედი ვერსია გასასვლელი კოდი GitHub-ის ამ საწყისი სტატიიდან. ერთი რამის შესახებ შემიძლია გითხრათ: იყავით კეთილი, გამოიყენეთ ეს ტექნოლოგია სიფრთხილით, რადგან დიდმა ფაილებმა შეიძლება სერიოზულად დააზიანოს UX, მით უმეტეს, რომ Vikory-ის საბოლოო მომხმარებელი უფრო მიდრეკილია არასანდო ინტერნეტ კავშირებისკენ. კიდევ ერთი მიზეზი, რის გამოც უნდა აირჩიოთ ფერი, რომელიც ემთხვევა ფონს, არის ის, რომ მომხმარებელს შეუძლია წაიკითხოს შინაარსი ფონის სურათის ჩვენებისას.