Veb-saytlar fonida katta hajmdagi videolar veb-dizayndagi juda mashhur tendentsiyadir. Agar mohirona foydalanilsa, videolar veb-saytni yanada dramatik va foydalanuvchilar uchun qiziqarli qiladi.

Bundan tashqari, foydalanuvchi animatsiya natijasini ko‘rishdan oldin ma’lum kod va tasvirlarni yuklashni talab qiluvchi JavaScript yordamida yaratilgan fonlardan farqli o‘laroq, video fonlar muammosiz va kechikishlarsiz ijro etilishi mumkin.

Powerhouse yoki Adidas kabi kompaniyalar mavjudki, ular foydalanuvchiga mahsulot yoki xizmat haqida ma'lum bir xabar yoki hikoyani etkazish uchun sayt fonida videodan foydalanadilar.

Video fonini yaratishning eng mashhur usuli HTML5 video tegidan foydalanish bo'lsa-da CSS parametrlari, shuningdek, YouTube kabi muqobil video manbalariga e'tibor qaratish lozim. Bunday holda, serverning sekin javob berishi haqida tashvishlanishingiz shart emas, chunki so‘rov to‘g‘ridan-to‘g‘ri YouTube’ga yuboriladi.

Ushbu maqolada men sizga fon sifatida YouTube videolaridan foydalangan holda qanday qilib ajoyib veb-sayt yaratishingiz mumkinligini ko'rsataman. Videomizning ko'rinishini tahrirlash va nazorat qilish uchun jQuery.mb.YTPlayer.js dan foydalanamiz. Shunday ekan, boshlaylik!

Yuklab olish manbalari
Namoyish

Sizga kerak bo'ladi:

//Katta fon mazmuni bu yerda //Bo‘lim mazmuni haqida bu yerda //Kichik fon bo‘limi mazmuni bu yerda

Endi siz har bir bo'limni tarkib bilan to'ldirishingiz kerak. Katta fon va kichik fon bo'limida videomizda nozik tekstura yaratish uchun naqsh sinfini joylashtiring. Bundan tashqari, h1, h2, paragraf va tugmani qo'shishingiz kerak.

FORMDAGI YOUTUBE VIDEO Men buni qanday qilishni o'rganmoqchiman YouTube'dan istalgan videoni sayt foniga joylashtiring

Qanday qilib veb-saytingiz foniga video qo'shishni bilmoqchimisiz?
Bu osonroq bo'lishi mumkin emas! BILAN jQuery yordamida MB.YTPlayer, jQuery plagini, siz istalgan YouTube videosini sayt foniga qo'yishingiz mumkin.
Har qanday videoni osongina aylantirishingiz mumkin HTML fon. Sahifani yuklashda kechikishlar va serverlarga yuklanish yo'q!

Plaginni hozir yuklab oling Biz bilanmiz ijtimoiy tarmoqlarda

Kichik fon qismida joylashgan ijtimoiy piktogrammalar uchun Font Awesome shriftidan foydalandim. Keyin jQuery.mb.YTPlayer plaginidan foydalangan holda videomiz uchun shablonni qo'shamiz. dan so'ng darhol quyidagi kodni joylashtiring.

Mana biz videoni o'rnatish uchun foydalanganmiz:

• sinf o'yinchisi - bu sinf mb.YTPlayer plagini tomonidan ishlatiladi
• videoURL - video havolasi
• ushlab turish CSS selektori, unda siz videoni o'ynatmoqchisiz
• autoPlay - videoni avtomatik ijro etish
• ovozsiz - tovush mavjudligi
• startAt - videoni o'ynashni boshlamoqchi bo'lgan vaqt
• shaffoflik - video shaffofligi

CSS Saytimizga uslublar qo'shamiz. Avvalo, aniqlaymiz tashqi ko'rinish html, tana, paragraf teglari va markirovka qilingan ro'yxat.

Html (balandlik:100% ) tanasi (shrift:15px/23px "Raleway", sans-serif; chekka: 0; toʻldirish:0; balandlik: 100%; kenglik: 100%; -webkit-shrift-tekislash: antializatsiyalangan; - webkit-text-size-adjust:100% ) p (shrift-size:20px; line-height:140%; text-align:center ) ul li (displey:inline-blok; ro‘yxat uslubi:yo‘q; to‘ldirish-o‘ng : 10px;

Oʻram (z-index:600; joy:nisbiy ) .pattern (fon-tasvir:url(../images/pattern.png); fon-takrorlash: takrorlash; fon-ilova: aylanib oʻtish; kenglik:100%; balandlik: 100%; joy: mutlaq; 0; chap: 0 ) .divider (fon rasmi:url(../images/divider.png); displey:blok; width:300px; balandlik:35px; marj: 10px ) #colorize (rang:#f1c40f; font-family:"Lato",sans-serif; font-size:40px )

Katta fonli qismni uslublash vaqti keldi. Z-indeksini 550 ga va to'lib ketish parametrini yashiringa o'rnating. Bu bizning veb-saytimizda YouTube kontenti (subtitrlar, izohlar) ko'rsatilmasligini ta'minlash uchun zarur. Qolgan uslublar sarlavhalar, tugmalar va standart tasvir uchun (bu haqda keyinroq).

Katta fon ( z-index:550; matnni tekislash:markaz; balandlik:100%; min-balandlik:100%; joylashuv:nisbiy; to‘lib-toshgan:yashirin ) .katta fon .katta fon-konteyner ( kengligi:830px max-width:100%; -webkit-transform(-50%,-50%); %,-50%); -o-transform:translate(-50%,-50%) ) .big-background-title ( font-family:"Raleway",sans-serif; font-size :78px; font-weight:300; Lato", sans-serif; matnni o'zgartirish: katta harf; rang: #fff; chegara: 2px qattiq #fff; ; kursor: ko'rsatgich; harflar oralig'i: 2px; displey:inline-blok; -webkit-o'tish:.4s fon qulayligi; -moz-o'tish:.4s fon qulayligi; -o-o'tish:.4s fon qulayligi; o'tish:.4s fon qulayligi; ) .big-fon-btn:hover (rang:#fff; fon:rgba(255,255,255,0.20) ) .big-fon-standart-tasvir (fon:url(../images/sunset.jpg); fon-takrorlash :repeat-size:cover:100% backface-visibility;

Endi to'g'risida bo'limga o'tamiz. Keling, fon rangini oq rangga o'rnatamiz va to'ldirishni tepada va pastda 60 pikselga, chap va o'ngda 20 pikselga o'rnatamiz.

Haqida-qism (shrift-family:"Lato",sans-serif; rang:#7f8c8d; fon:#fff; to'ldirish:60px 20px ) .bo'lim haqida-konteyner (matnni tekislash: markaz; to'ldirish-pastki: 50px ) .about-section-title ( font-family:"Raleway",sans-serif; font-size:40px; background:#fff; color:#3d566e; padding:0 35px; margin-bottom:22px; fon-ilova: scroll fon-takror:repeat-x; -transform:katta;rang:#34495e;border: padding:10px;letter-spacing: 2px; -webkit-o'tish:.4s fon qulayligi; o-o'tish:.4s fon qulayligi (rang:#fff; fon: #34495e; )

Altbilgi sifatida ham xizmat qiladigan kichik fon bo'limi uchun biz kenglikni 100% ga, to'lib ketishni esa yashirin qilib belgilaymiz. Videomiz ko‘rinadigan bo‘lishi uchun tepaga va pastki qismga biroz to‘ldirish qo‘shamiz. Va nihoyat, ijtimoiy media tugmalari uchun uslublarni qo'shamiz.

Kichik fon-qism ( shrift-oila:"Raleway",sans-serif; to'ldirish:100px 0; joylashuv:nisbiy; kenglik:100%; to'ldirish:yashirin ) .kichik fon-konteyner (joylashuv:nisbiy; matnni tekislash :markaz ) .kichik fon sarlavhasi (shrift o‘lchami:40px; rang:#f1c40f; shrift og‘irligi:300; z-index:10; displey:inline-blok; matnni o‘zgartirish:katta harf; chekka-pastki:20px ;margin-top: 20px fon-ilova: fon-takrorlash-x;

Media so'rovlari Saytimizni sezgir qilish uchun ba'zi media so'rovlarini qo'shamiz.

@media ekrani va (maksimal kenglik: 768px) ( .about-section-title ( line-height:1 ) ) @media screen and (max-width: 480px) ( .big-fon-title ( shrift hajmi:58px) ) .small-background-title ( line-height:1 ) /*.player( displey: none;) -> Agar siz ma'lum bir ko'rish oynasida plaginsiz*/ videoni olib tashlamoqchi bo'lsangiz ) @media ekrani va ( max-width: 360px) ( .big-fon-title,#colorize ( line-height:1 ) ) @media screen and (max-width: 320px) ( .small-fon-title (shrift-size:30px ) )

jQuery Endi bizni yoqaylik YouTube video. Keling, o'yinchi sinfini ichkariga chaqiraylik jQuery kodi. Quyidagi kodni yopilish tanasi tegidan oldin va ichiga joylashtiring.
$(funksiya())( $(".player").mb_YTPlayer(); )); Qayta tiklash: YouTube fonidagi video ijro etilmaydi mobil qurilmalar va planshetlar, chunki YouTube qoidalari bunga ruxsat bermaydi.

Biroq, qo'shish uchun jQuery dan foydalanishimiz mumkin fon tasviri sukut bo'yicha, agar brauzer foydalanuvchining saytga mobil qurilmadan kirganligini aniqlasa.

Qo'lda yechim

Foydalanuvchining mobil qurilma yoki planshetdan tashrif buyurishini aniqlash uchun biz ma'lum bir ekran o'lchamidagi elementni yashirishimiz mumkin. Masalan, biz kengligi 480 piksel bo'lgan ekranlardagi video fonni olib tashlamoqchimiz. Siz shunchaki o'yinchi elementiga displey: none qo'shishingiz kerak:

@media ekrani va (maksimal kenglik: 480px) ( .player(displey: yoʻq; ) )

JQuery-ga kelsak, bu erda biz is_mobile o'zgaruvchisini false parametri bilan o'rnatamiz. Keyin, o'yinchi sinfida displey borligiga ishonch hosil qiling: yo'q. Agar shunday bo'lsa, biz standart fon tasviridan foydalanish uchun katta fon va kichik fon bo'limlari bo'limlariga katta fon-standart-tasvir sinfini qo'shamiz. Aks holda, hech narsa o'zgarmaydi.

(funksiya($) ( $(hujjat).ready(function() ( var is_mobile = false; if($(".player").css("display")=="hech") ( is_mobile = rost; ) if (is_mobile == true) (//Shartli skript bu yerda $(".katta fon, .kichik fon-bo'lim").addClass("katta fon-default-image"); )else( $( ". player").mb_YTPlayer( ) ))(jQuery);

jQuery plaginidan foydalangan holda yechim Standart tasvirni o'rnatishning yana bir yo'li jQuery plagini device.js (http://matthewhudson.me/projects/device.js/) dan foydalanishdir. Bu mobil qurilmalarning turli ekran o'lchamlari uchun sharoitlarni tavsiflash jarayonini soddalashtiradi. Ushbu plagin yordamida biz oddiygina quyidagi kodni yozishimiz mumkin:

(funksiya($) ( $(hujjat).ready(function() ( //Device.js uning planshet yoki mobil ekanligini tekshiradi - http://matthewhudson.me/projects/device.js/ agar (!device. tablet() && !device.mobile()) ( $(".player").mb_YTPlayer(); ) else ( //jQuery $(".big-fon, .small-" uchun afzal qilingan sinfga standart fonni qo'shadi. background-section").addClass("katta fon-standart-tasvir"); ))) ))(jQuery);

Bu yerda men foydalanuvchi tizimga kirgan qurilmani tekshirish uchun device.mobile() va device.tablet() usullaridan foydalanganman. Agar shart bajarilsa, katta fon-standart-tasvir sinfi katta fon va kichik fon-bo'lim bo'limlariga qo'shiladi. Aks holda, o'yinchi sinfi o'zgarishsiz qoladi va video o'ynaydi.

Buni to'g'ri qabul qilish videosi - bu xabarni tomoshabinlarga etkazishning ajoyib usuli. To'g'ri ishlatilsa, veb-saytingiz uchun kuchli vosita bo'lishi mumkin.

Ishonchim komilki, veb-dizayn rivojlanib, takomillashgan sari, veb-sayt dizaynida videodan foydalanish bo'yicha ko'proq ijodiy g'oyalar paydo bo'ladi. Umid qilamanki, siz ushbu qo'llanmadan nimanidir o'rgandingiz. Fikr va mulohazalaringizni izohlarda yozing.

Tarjimondan. Tarjima bilan bog'liq barcha istak va mulohazalaringiz bilan men bilan shaxsiy xabar orqali bog'laning. Rahmat!

| 16.04.2015

O'tgan yil davomida veb-dizaynerlar saytni jonlantirishning o'ziga xos usulini - sahifaning foni sifatida videoni o'rnatishni tobora ko'proq foydalana boshladilar. Qiziqarli syujet yoki fonda shunchaki "jonli" rasm hatto oddiy tashrif qog'ozi veb-saytini bezatadi, foydalanuvchini qiziqtiradi va uni saytda uzoqroq qolishga undaydi. Bugun biz siz bilan HTML5 va CSS-dan foydalangan holda veb-sayt uchun to'liq ekranli video fonni o'rnatish usullaridan birini baham ko'ramiz.

Agar siz saytdagi fon uchun video o'rnatmoqchi ekanligingizga qat'iy ishonchingiz komil bo'lsa, ba'zi nuanslarni bilishingiz kerak:

Birinchidan, video juda katta vaznga ega ekanligini yodda tutishingiz kerak. Bu sahifani yuklash tezligiga salbiy ta'sir ko'rsatishi mumkin, ayniqsa foydalanuvchi Sekin internet. Shuning uchun, juda uzun bo'lmagan videolarni tanlang. Agar siz juda uzun videodan foydalanishingiz kerak bo'lsa, uning vaznini kamaytirish uchun ishlashga yoki tomoshabinlaringizning bir qismini qurbon qilishga tayyor bo'ling.

Ikkinchidan, videolardan audio avtomatik ijro etishdan saqlaning. Audiosiz videolardan foydalaning yoki agar kerak bo'lsa, foydalanuvchi ovozni o'zi yoqish qobiliyatini qo'shing. Veb-saytni ochishda ovozni avtomatik ravishda ijro etish juda yomon shakl hisoblanadi.

Uchinchidan, siz o'zaro brauzer mosligi va videoni barcha qurilmalarda to'g'ri ko'rsatish va o'ynatish haqida g'amxo'rlik qilishingiz kerak, shuningdek videoga muqobil taqdim etishingiz kerak (agar u o'ynamasa). Quyida bizning misolimizda buni qanday qilishni ko'rsatamiz.

Va to'rtinchidan, siz o'rnatmoqchi bo'lgan saytga videotelefon mos keladimi yoki yo'qligini yaxshilab o'ylab ko'rishingiz kerak, chunki bu g'oyaning o'ziga xosligi va foydasizligi o'rtasidagi chegarani kesib o'tish juda oson. Video hech qanday holatda foydalanuvchini saytga kelgan asosiy maqsadidan chalg'itmasligi kerak. Matn mazmuni ostida video fonni o'rnatayotganda, matn qanchalik o'qilishi mumkinligini tekshiring. Masalan, u fonda birlashishi mumkin ma'lum bir daqiqa videoni o'ynatish (oq fonda oq matn, qora rangda qora va boshqalar).

1. HTML

Bizning misolimiz uchun biz 1920x1080 o'lchamdagi, 15 soniya davom etgan va og'irligi 3 MB dan sal ko'proq bo'lgan videoni oldik. Video-bg identifikatorli blokning ichida bizning fonimiz mavjud:

Teg quyidagi atributlarga ega:

• eni - videoni o'ynash uchun maydonning kengligi;
• balandlik - maydonning balandligi;
• autoplay - videoni avtomatik ijro etish;
• loop - videoning tsiklik takrorlanishi;
• afisha - video yuklanayotganda yoki mavjud bo'lmaganda o'rniga ko'rsatiladigan rasm.

Keyinchalik, biz ikkita teg yozdik, ular turli formatdagi video URL manzillarini ko'rsatadi - MP4 va WEBM. Nega videoni bir nechta formatga kiritish kerak? Gap shundaki, barcha brauzerlar faqat bitta video formatini qo'llab-quvvatlamaydi. Videoni hamma tanishi uchun zamonaviy brauzerlar, faylni kamida shu ikki formatda taqdim etishingiz kerak. Tegishli qiymatlarga ega type atributi brauzerga tezroq tanlov qilishga yordam beradi.

2.CSS

Bizning fon uslublarimiz jadvali quyidagicha ko'rinadi:

#video-bg (pozitsiya: belgilangan; tepa: 0; o‘ng: 0; pastki: 0; chap: 0; to‘lib-toshgan: yashirin; z-indeks: 1; fon: url(bg/daisy-stock-poster.jpg) yo‘q -takrorlash #94a233; fon o'lchami: qopqoq; : auto; ) @supports (object-fit: cover) ( #video-bg > video (yuqori: 0; chap: 0; eni: 100%; balandlik: 100%; ob'ektga moslash: qopqoq; ) )

Koddan ko'rinib turibdiki, fon butun sahifaga o'rnatiladi va tasvir (xuddi shu videodan olingan ramka) zaxira fon sifatida o'rnatiladi. Eng yomon stsenariyda fon rangi #94a233 bo'ladi.

Brauzer ob'ektga moslashish xususiyatini qo'llab-quvvatlashini tekshiradigan kodda @supports direktivasi ham mavjud. Ha bo'lsa, fon qiymat qopqog'ini oladi va qachon proportsional ravishda ko'rsatiladi turli o'lchamlar ekran.

Caniuse.com ma'lumotlariga ko'ra, ob'ektga moslash xususiyati hozirda barcha brauzerlar tomonidan qo'llab-quvvatlanadi Internet Explorer, Firefox 31-35, Safari 7, iOS Safari 7.1 va Android Brauzer 4.1-4.4.

Eslatma.

Dreamweaver CC va keyingi versiyalarida foydalanuvchi interfeysi soddalashdi. Natijada, ushbu maqolada tasvirlangan ba'zi xususiyatlar Dreamweaver CC va keyingi versiyalarida mavjud bo'lmasligi mumkin. Qo'shimcha ma'lumot olish uchun ushbu maqolaga qarang.

Veb ilovalar haqida

Veb-ilova - bu qisman yoki to'liq yaratilmagan tarkibga ega sahifalarni joylashtiradigan veb-sayt. Yakuniy tarkib saytga tashrif buyuruvchi veb-serverdan sahifani so'ragandan keyingina yaratiladi. Sahifaning yakuniy mazmuni tashrif buyuruvchining harakatlari asosida yaratilgan so'rovga bog'liq bo'lganligi sababli, sahifa dinamik deb ataladi.

Veb-ilovalardan foydalanish doirasi juda keng. Ushbu bo'lim veb-ilovalar bilan bog'liq umumiy masalalarni o'z ichiga oladi va oddiy veb-ilovaga misol keltiradi.

Veb-ilovalardan odatiy foydalanish

Veb-ilovalardan foydalanish veb-saytga tashrif buyuruvchilarga ham, veb-saytlarni ishlab chiquvchilarga ham ma'lum foyda keltiradi.

Veb-ilovalar tashrif buyuruvchilarga ma'lumotlarga boy veb-saytlarda kerakli ma'lumotlarni tez va oson topish imkonini beradi.

Ushbu turdagi veb-ilovalar kontentni qidirish, tarkibni tartibga solish va tashrif buyuruvchilar uchun qulay bo'lgan tarzda harakat qilish imkonini beradi. Bunday ilovalarga misollar kiradi ichki tarmoqlar kompaniyalar - Microsoft MSDN (www.msdn.microsoft.com) va Amazon.com (www.amazon.com).

Veb-ilovalar sizga saytga tashrif buyuruvchilardan olingan ma'lumotlarni to'plash, saqlash va tahlil qilish imkonini beradi.

Uzoq vaqt davomida HTML shakllariga kiritilgan ma'lumotlar qayta ishlash uchun CGI ilovalariga yoki maxsus tayinlangan ishchilarga elektron pochta xabarlari ko'rinishida yuborilgan usul ishlatilgan. Veb-ilova ma'lumotlarni to'g'ridan-to'g'ri ma'lumotlar bazasida saqlash, shuningdek, tahlil qilish uchun olingan ma'lumotlar asosida ma'lumotlarni olish va hisobotlarni yaratish imkonini beradi. Masalan, banklarning interaktiv sahifalari, inventarizatsiyani nazorat qilish sahifalari, sotsiologik tadqiqotlar va so'rovlar, shuningdek, blankalar. fikr-mulohaza foydalanuvchilar bilan.

Veb-ilovadan veb-saytlarni vaqti-vaqti bilan o'zgarib turadigan tarkib bilan yangilash uchun foydalanish mumkin.

Veb-ilova veb-dizaynerni saytning HTML-sahifalarini doimiy ravishda yangilash kabi muntazam ishdan ozod qiladi. Yangilik muharrirlari kabi kontent provayderlari materialning yangiligi uchun mas'uldirlar va veb-ilova ma'lumotlarni kuzatib boradi. avtomatik yangilash sayt. Masalan, The Economist jurnalining veb-versiyasi (www.economist.com) va CNN yangiliklar xizmati (www.cnn.com).

Misol veb-ilova

Svetlana veb-dizayner sifatida ishlaydi va allaqachon mavjud uzoq vaqt o‘z ishida Dreamweaver’dan foydalanadi. Uning mas'uliyatiga 1000 ga yaqin xodimi bo'lgan o'rta kompaniyaning ichki korporativ veb-sayti va Internet saytining ishlashini ta'minlash kiradi. Bir kuni kadrlar bo'limi xodimi Sergey unga muammosi bilan murojaat qildi. Kadrlar bo'limi xodimlarni sog'lomlashtirish dasturini nazorat qiladi. Dastur xodimlarni piyoda yurish, yugurish yoki velosipedda yurish uchun har bir kilometr uchun maxsus ball bilan taqdirlaydi. Oyning oxirida har bir xodim Sergeyga elektron pochta orqali umumiy kilometrlar sonini ko'rsatuvchi hisobot yuboradi. Shundan so'ng, Sergey olingan ma'lumotlarga asoslanib elektron pochta xabarlari xodimlarni to‘plagan ballariga qarab kichik pul mukofotlari bilan taqdirlaydi.

Muammo shundaki, sog'lomlashtirish dasturi juda mashhur bo'ldi. IN bu daqiqa ushbu dastur ishtirokchilari soni shu darajada oshdiki, oy oxirida Sergey unga kelgan barcha ma'lumotlarni qayta ishlashga ulgurmaydi. elektron pochta. Shuning uchun u Svetlanaga veb-texnologiyalar yordamida ushbu muammoni hal qilish imkoniyati haqida savol bilan murojaat qildi.

Bunga javoban Svetlana quyidagi muammolarni hal qiladigan veb-ilovani yaratishni taklif qildi.

Xodimlar o'zlarining sport yutuqlari haqidagi ma'lumotlarni oddiy HTML shaklida kiritadilar.

Qabul qilingan ma'lumotlar ma'lumotlar bazasida saqlanadi.

Olingan ma'lumotlar asosida ballar beriladi.

Har bir xodim o'z natijalari to'g'risida ma'lumot olishi mumkin.

Har oyning oxirida Sergey barcha yakuniy natijalarni olish imkoniyatiga ega.

Eng qisqa vaqt ichida Svetlana kerakli dasturni yaratdi va ishga tushirdi, chunki Dreamweaver-da hamma narsa bor zarur vositalar tez va uchun oson yaratish bu turdagi dastur.

Har qanday veb-ilova statik va dinamik veb-sahifalar to'plamidir. Statik veb-sahifa foydalanuvchiga doimo o'zgarmagan holda ko'rsatiladigan sahifadir. Veb-server veb-brauzer talab qilgan sahifani hech qanday o'zgartirishlarsiz yuboradi. Bundan farqli o'laroq, server o'zgarishlar kiritadi dinamik veb-sahifa brauzerga yuborishdan oldin. Sahifaning o'zgarishi sababli u dinamik deb ataladi.

Masalan, siz sog'lomlashtirish dasturingiz natijalarini ko'rsatadigan sahifa yaratishingiz mumkin. Biroq, ba'zi ma'lumotlar (masalan, xodimning ismi va uning natijalari) xodim sahifani so'ragan paytda aniqlanadi.

Keyingi bo'lim veb-ilovalar qanday ishlashini batafsil ko'rib chiqadi.

Statik veb-sahifalarni qayta ishlash

Statik veb-sayt veb-server o'rnatilgan kompyuterda joylashtirilgan tegishli HTML sahifalar va fayllar to'plamini o'z ichiga oladi.

Veb-server bu dasturiy ta'minot, bu veb-brauzerlarning so'rovlariga javoban veb-sahifalarga xizmat qiladi. Odatda, veb-sahifadagi havolani bosganingizda, brauzeringizda xatcho'pni tanlaganingizda yoki URL manzilini kiritganingizda sahifa so'rovi amalga oshiriladi. manzil satri brauzer.

Statik veb-sahifaning yakuniy tarkibi ishlab chiquvchi tomonidan belgilanadi va sahifa so'rovi jarayonida o'zgarishsiz qoladi. Misol:

Trio Motors Trio Motors haqida ma'lumot sahifasi

Barcha HTML kodlar sahifa serverda joylashtirilgunga qadar dasturchi tomonidan yaratiladi. Sahifa serverda joylashtirilganidan keyin HTML kod o'zgarmasligi sababli sahifa statik deb ataladi.

Eslatma.

To'g'ri aytganda, "statik" sahifa aslida bitta bo'lmasligi mumkin. Masalan, to'ldiruvchi tasvir yoki Flash kontenti (SWF fayli ko'rinishida) statik sahifani jonlantirishi mumkin. Biroq, bu kontekstda sahifa statikdir, chunki u o'zgartirilmasdan brauzerga yuboriladi.

Veb-server statik sahifaga xizmat ko'rsatish so'rovini qabul qilganda, so'rovni tahlil qilgandan so'ng, server kerakli sahifani topadi va quyida ko'rsatilganidek, uni brauzerga yuboradi.

A. Veb-brauzer statik sahifani so'raydi. B. Veb-server sahifani topadi. C. Veb-server sahifani so'ragan brauzerga yuboradi.

Veb-ilovalar bo'lsa, tashrif buyuruvchi sahifani so'ramaguncha sahifa kodining ba'zi qismlari yo'qoladi. Yo'qolgan kod ba'zi mexanizm yordamida yaratiladi va shundan keyingina sahifa brauzerga yuborilishi mumkin. Ushbu kod yaratish mexanizmi keyingi bo'limda muhokama qilinadi.

Veb-server statik veb-sahifaga xizmat ko'rsatish so'rovini qabul qilganda, u sahifani to'g'ridan-to'g'ri brauzerga yuboradi. Biroq, dinamik sahifa so'ralganda, veb-serverning harakatlari unchalik aniq emas. Server sahifani yuboradi maxsus dastur, bu yakuniy sahifani tashkil qiladi. Bunday dastur dastur serveri deb ataladi.

Ilova serveri sahifadagi kodni o'qiydi, o'qilgan kodga muvofiq yakuniy sahifani yaratadi va keyin uni sahifadan olib tashlaydi. Ushbu barcha operatsiyalarning natijasi veb-serverga yuboriladigan statik sahifa bo'lib, u o'z navbatida uni mijoz brauzeriga yuboradi. Brauzer qabul qiladigan barcha sahifalar faqat HTML kodini o'z ichiga oladi. Jarayonning sxematik ko'rinishi:

A. B. C. Ilova serveri ko'rsatmalar uchun sahifani skanerlaydi va uni yaratishda davom etadi. D. Ilova serveri tayyorlangan sahifani web serverga qaytaradi. E.

Kontentni ma'lumotlar bazasida saqlash veb-saytingiz dizaynini foydalanuvchilar ko'radigan tarkibdan ajratish imkonini beradi. Barcha sahifalarni alohida HTML-fayllar sifatida yaratish o'rniga, taqdim etilgan ma'lumotlarning har bir turi uchun faqat sahifa shablonlari yoziladi. Keyin kontent ma'lumotlar bazasiga yuklanadi, shundan so'ng veb-sayt foydalanuvchilar so'raganida uni oladi. Bundan tashqari, siz ma'lumotni bitta manbada yangilashingiz va har bir sahifani qo'lda tahrirlamasdan butun veb-saytingizda o'zgarishlarni takrorlashingiz mumkin. Adobe Dreamweaver ma'lumotlar bazasiga ma'lumotlarni kiritish, yangilash va o'chirish uchun veb-shakllarni yaratish imkonini beradi.

Ma'lumotlar bazasidan ma'lumotlarni olish uchun mo'ljallangan dastur ko'rsatmasi deyiladi ma'lumotlar bazasi so'rovi. So'rov SQL (Structured Query Language) deb nomlangan ma'lumotlar bazasi tili yordamida ifodalangan qidiruv mezonlaridan iborat. SQL so'rovining matni server tomonidagi sahifa skriptlarida yoki teglarda joylashgan.

Ilova serveri ma'lumotlar bazasidan ma'lumotlarni to'g'ridan-to'g'ri qabul qila olmaydi, chunki ma'lumotlar bazalari ma'lum ma'lumotlarni saqlash formatlaridan foydalanadi, buning natijasida bunday ma'lumotlarni olishga urinish hujjatni ochishga urinishga o'xshaydi. Microsoft Word yordamida matn muharriri Bloknot yoki BBEdit. Shuning uchun ma'lumotlar bazasiga ulanish uchun dastur serveri vositachi - ma'lumotlar bazasi drayveridan foydalanadi. Ma'lumotlar bazasi drayveri dastur serveri va ma'lumotlar bazasi o'rtasidagi o'zaro aloqani o'rnatadigan dasturiy moduldir.

Drayv ulanishni o'rnatgandan so'ng, ma'lumotlar bazasiga so'rov yuboriladi, natijada yozuvlar to'plami paydo bo'ladi. Rekordlar to'plami bir yoki bir nechta ma'lumotlar bazasi jadvallaridan olingan ma'lumotlar to'plamini ifodalaydi. Yozuvlar to'plami sahifani yaratish uchun olingan ma'lumotlardan foydalanadigan dastur serveriga qaytariladi.

Quyida SQL-da oddiy ma'lumotlar bazasi so'roviga misol keltirilgan.

Xodimlardan familiya, ism, mos nuqtalarni tanlang

Quyidagi misolda ma'lumotlar bazasi so'rovini bajarish va olingan ma'lumotlarni brauzerga qaytarish jarayoni ko'rsatilgan.

A. Veb-brauzer dinamik sahifani so'raydi. B. Veb-server sahifani topadi va dastur serveriga uzatadi. C. Ilova serveri ko'rsatmalar uchun sahifani skanerlaydi va uni tayyorlaydi. D. Ilova serveri ma'lumotlar bazasi drayveriga so'rov yuboradi. E. Drayv ma'lumotlar bazasida so'rovni bajaradi. F. Yozuvlar to'plami haydovchiga qaytariladi. G. Drayv dastur serveriga yozuvlar to'plamini uzatadi. H. Ilova serveri sahifaga ma’lumotlarni kiritadi va sahifani veb-serverga topshiradi. I. Veb-server tayyorlangan sahifani so'ragan brauzerga yuboradi.

Har qanday ma'lumotlar bazasi veb-ilovada foydalanish uchun mos keladi, agar serverda tegishli ma'lumotlar bazasi drayveri o'rnatilgan bo'lsa.

Arzon narxlardagi ilovalarni yaratish uchun siz yaratilgan ma'lumotlar bazasi kabi fayl ma'lumotlar bazasidan foydalanishingiz mumkin Microsoft Access. Agar siz ishonchli korporativ ilovalarni yaratishni rejalashtirmoqchi bo'lsangiz, masalan, Microsoft serverlariga asoslangan server ma'lumotlar bazasidan foydalanish tavsiya etiladi SQL Server, Oracle 9i yoki MySQL.

Agar ma'lumotlar bazasi va veb-server joylashgan bo'lsa turli xil kompyuterlar, tizimlar o'rtasida yuqori tezlikdagi ulanishni ta'minlashingiz kerak, chunki butun veb-ilovaning samaradorligi va tezligi bunga bog'liq bo'ladi.

Dinamik sahifalarni ishlab chiqish

Dinamik sahifalarni ishlab chiqish jarayoni asosiy HTML kodini yozish va keyin sahifani dinamik qiladigan server tomonidagi skriptlar yoki HTML sahifa teglarini yaratishdan iborat. Agar siz yakuniy kodga qarasangiz, skript tili sahifaning HTML-ga o'rnatilganligini ko'rishingiz mumkin. Shunga ko'ra, bunday skript tillari HTML o'rnatilgan tillar deb ataladi. Quyidagi misol ColdFusion Markup Language (CFML) dan foydalanadi.

Eslatma: Dreamweaver CC va keyingi versiyalari CFML ni qo'llab-quvvatlamaydi.

Trio Motors Trio Motors haqida ma'lumot sahifasi

Trio Motors yetakchi avtomobil ishlab chiqaruvchisi hisoblanadi.

Bizning #bo'lim# sahifamizga tashrif buyuring.

Ushbu sahifaga o'rnatilgan ko'rsatmalar quyidagilarni amalga oshiradi:

Nomi bilan o'zgaruvchi yaratiladi Bo'lim, shundan so'ng unga "Sotish" satr qiymati beriladi.

"Sotish" qiymati HTML kodiga joylashtirilgan.

Ilova serveri veb-serverga quyidagi sahifani qaytaradi:

Trio Motors Trio Motors haqida ma'lumot sahifasi

Trio Motors yetakchi avtomobil ishlab chiqaruvchisi hisoblanadi.

Sotish sahifamizga tashrif buyurganingizga ishonch hosil qiling.

Veb-server sahifani brauzerga yuboradi, bu esa uni quyidagicha ko'rsatadi.

Trio Motors haqida

Trio Motors yetakchi avtomobil ishlab chiqaruvchilardan biridir.

Savdo sahifamizga tashrif buyurishni unutmang.

Skript tilini yoki tegga asoslangan tilni tanlash ishlatiladigan server texnologiyalariga bog'liq. Quyida eng ko'p ishlatiladigan tillar ro'yxati keltirilgan server texnologiyalari, Dreamweaver tomonidan qo'llab-quvvatlanadi.

Server texnologiyasi

	ColdFusion belgilash tili (CFML)
ASP sahifalari

Dreamweaver server tomonidagi skriptlarni yoki sahifalar uchun kerakli teglarni yaratishi mumkin yoki dasturchi Dreamweaver kodlash muhiti yordamida kerakli kodni o'zi yozishi mumkin.

Veb-ilovalar terminologiyasi

Ushbu bo'limda veb-ilovalar bilan bog'liq tez-tez ishlatiladigan atamalarning ta'riflari keltirilgan.

Ilovalar serveri

Veb-server tomonidan server tomonidagi skriptlar yoki teglarni o'z ichiga olgan veb-sahifalarni qayta ishlash uchun ishlatiladigan dasturiy ta'minot. Bunday sahifalar so'ralganda, veb-server ularni qayta ishlash uchun avval dastur serveriga o'tkazadi va keyin ularni mijoz brauzeriga yuboradi. Qo'shimcha ma'lumot olish uchun veb-ilovalar qanday ishlashiga qarang.

Eng keng tarqalgan dastur serverlari ColdFusion va PHP ni qo'llab-quvvatlaydi.

Mashhur Zadarma xizmatini 1C ga ulash endi bir necha daqiqada. 1C va Zadarmani integratsiya qilish uchun tayyor kengaytmani ulash kifoya. Har qanday xodim hech qanday muammosiz o'rnatishni amalga oshirishi mumkin, hatto tozalovchi Masha xola, tozalash bo'yicha mutaxassis.

Biz birinchi navbatda Zadarma ATS va 1C: Menejment konfiguratsiyasidan faol foydalanadigan kichik korxonalarga e'tibor qaratdik. kichik kompaniya 1.6.

Avvalgidek

Zadarma bilan integratsiya qilish uchun siz 1C ichiga o'rnatilgan maxsus teruvchidan - SIP telefonidan foydalanishingiz kerak edi. Ushbu parametr bir nechta "agar" bilan mos edi:

• agar 1C o'rnatilgan bo'lsa mahalliy kompyuter, va terminal serverining biror joyida emas
• agar foydalanuvchi stol telefoni o'rniga 1C teruvchisidan foydalanishga rozi bo'lsa

Umuman olganda, agar barcha "agar" birlashgan bo'lsa, unda integratsiya mumkin edi.

Hozir qanday

Endi, 1C va Zadarma integratsiyasi uchun qo'ng'iroqlar uchun qaysi oxirgi qurilma ishlatilishi muhim emas. Bu har qanday bo'lishi mumkin:

• stol telefoni
• OS da o'rnatilgan dasturiy ta'minot
• brauzerda ishlaydigan veb-fon

Zadarma uchun 1C kengaytmasi teruvchi bilan emas, balki API bilan ishlaydi. Shuning uchun, foydalanuvchi aniq nima bilan qo'ng'iroq qilishi muhim emas.

O'rnatish oson

O'rnatish 1 bosqichdan iborat. Sizga faqat ikkita skrinshotni ko'rsatamiz.

Bosh sahifada joylashtirish

Zadarma telefon paneli avtomatik ravishda bosh sahifada paydo bo'ladi. Agar foydalanuvchi to'satdan bunga muhtoj bo'lmasa, u shunchaki "Ko'rish" menyusidagi katakchani olib tashlashi mumkin - "Bosh sahifani sozlash".

Sozlash oson

Biz API kalitlarini olamiz shaxsiy hisob Zadarma

va ularni 1C ga joylashtiring

Va, albatta, simplit.io saytida hisobingiz uchun login/parolni kiriting.

Hammasi, endi sizning 1C Zadarma-ga ulangan.

1C-da qo'ng'iroq qilish uchun bosing

"Telefon" belgisini qaerda ko'rsak, uni bosishingiz mumkin va Zadarma raqamni terishni boshlaydi.

"Kontakt ma'lumotlari" ma'lumotlari ko'plab hujjatlar ro'yxati va ma'lumotnomalarda mavjud - endi qo'ng'iroq qilish uchun mijoz kartangizga yugurishingiz shart emas. Masalan, buyurtmalar, hisob-fakturalar, xarajatlar ro'yxatidan to'g'ridan-to'g'ri qo'ng'iroq qilishingiz mumkin

Mijoz kartasi: kiruvchi qo'ng'iroq

1C va PBXni integratsiyalashganda aslida standart va majburiy bo'lgan funksiya. Shuni ta'kidlash kerakki, u har doim ham talabga ega emas, shuning uchun uni Telefon paneli sozlamalarida o'chirib qo'yishingiz mumkin.

Voqealar hujjati yordamida qo'ng'iroqni ro'yxatdan o'tkazish

Xuddi shunday, siz ehtiyojni nazorat qilishingiz mumkin avtomatik yaratish hujjat "Voqea- Telefon qo'ng'irog'i" Ushbu hujjatdan foydalanib, qo'ng'iroqqa sharh qoldirish qulay.

Va eng muhimi shundaki, ushbu hujjatga asoslanib, siz keyin Buyurtma, Hisob-fakturani kiritishingiz mumkin va shu bilan qo'ng'iroq va savdo o'rtasidagi munosabatlar aniq ko'rinadi.

Telefon qo'ng'irog'i hujjatiga eslatma qo'shishingiz mumkin, agar xodim mijozga keyinroq qo'ng'iroq qilishni va'da qilgan bo'lsa, bu juda qulay.

PBX qo'ng'iroqlar tarixi

Qo'ng'iroqlar tarixi, albatta, juda muhim narsa. 1C va Zadarma-ni integratsiyalash uchun kengaytma tarix bilan ishlashning bir nechta variantlarini taqdim etadi.

Misol uchun, foydalanuvchi o'zi haqidagi hikoyani ko'rishni xohlaydi. Bizning so'nggi qo'ng'iroqlar ro'yxatiga o'xshash Mobil telefon. Ushbu tarixni bosh sahifadagi "Tarix" yorlig'ini ochish orqali ko'rish mumkin.

Ko'pincha siz ma'lum bir mijozning, aloqada bo'lgan shaxsning yoki tarixini ko'rishni xohlaysiz shaxsga. Mijoz bo'lsa, biz ikkala qo'ng'iroqni ham kontragentning o'zi va uning barcha aloqa xodimlarining raqamlariga ko'rishimiz kerak.

Mijoz tomonidan tanlangan qo'ng'iroqlar tarixini bevosita uning kartasida ko'rish mumkin. Tarix mijozdan va uning barcha kontaktlaridan qo'ng'iroqlarni o'z ichiga oladi. Raqam kontragentning o'ziga tegishli bo'lsa, "Aloqa" maydoni to'ldirilmaydi.