ғаламтор

CSS көмегімен жауап беретін толық фондық кескін. Веб қолданбалары және динамикалық веб-беттер дегеніміз не. Енгізілген веб-фон

Веб-сайттардың фонындағы үлкен бейнелер веб-дизайндағы өте танымал тренд болып табылады. Шебер қолданылған бейнелер веб-сайтты пайдаланушылар үшін драмалық және тартымды ете алады.

Бұған қоса, бейне фон жасалған фонға қарағанда біркелкі және «тежегішсіз» ойнатылуы мүмкін JavaScriptпайдаланушы анимация нәтижесін көрмес бұрын белгілі бір код пен кескіндердің жүктелуін талап етеді.

Powerhouse немесе Adidas сияқты компаниялар бар, мысалы, пайдаланушыға жеткізу үшін сайттың фоны ретінде бейнені пайдаланады. нақты хабарламанемесе өнім немесе қызмет туралы әңгіме.

Бейне фонын жасаудың ең танымал әдісі HTML5 пайдалану болып табылады бейнекейбір CSS опцияларымен бірге тег, сіз де назар аударуыңыз керек балама көздер YouTube сияқты бейнелер. Бұл жағдайда сервердің баяу жауабы туралы алаңдамаудың қажеті жоқ, себебі сұрау тікелей YouTube сайтына жіберіледі.

Бұл мақалада мен сізге YouTube бейнесін фон ретінде пайдаланатын керемет веб-сайтты қалай жасауға болатынын көрсетемін. Біз бейненің көрінісін өңдеу және басқару үшін jQuery.mb.YTPlayer.js пайдаланамыз. Ендеше, бастайық!

Дереккөздерді жүктеп алу
Демо

Саған қажет болады:

//Үлкен фондық мазмұн осында

//Бөлім мазмұны туралы мұнда //Шағын фондық бөлім мазмұны осында

Енді әрбір бөлімді мазмұнмен толтыру керек. Үлкен фондық және кіші фон бөлімдерінде сыныпты қойыңыз үлгі,бейнемізде жеңіл текстураны жасау үшін. Сондай-ақ h1, h2, абзац пен түймені қосу керек.

YOUTUBE

Фондық бейне

Мен мұны үйренгім келеді

Кез келген YouTube бейнесін сайттың фонына қойыңыз

Сіздің сайтыңыздың фонына бейнені қалай қосуға болатынын білгіңіз келе ме?
Бұл бұрынғыдан да оңай! jQuery MB.YTPlayer көмегімен jQuery плагині арқылы кез келген YouTube бейнесін сайтыңыздың фонына ендіруге болады.
Кез келген бейнені оңай айналдыра аласыз HTML фоны. Бетті жүктеуде және серверді жүктеуде кідіріс жоқ!

Плагинді қазір жүктеп алыңыз

Біз әлеуметтік желілермен біргеміз

Мен бөлімдегі әлеуметтік белгішелер үшін Font Awesome қолдандым шағын фондық бөлім. Содан кейін плагин арқылы бейнеге үлгі қосамыз jQuery.mb.YTPlayer. Келесі кодты бірден орналастырыңыз .

Міне, біз бейнені орнату үшін пайдаланғанымыз:

сынып ойыншы- бұл класс плагинмен пайдаланылады mb.YTPlayer
videoURL- бейнеге сілтеме
ұстау – CSS селекторыбейнені ойнату үшін
авто ойнату- бейнені автоматты түрде ойнату
дыбыссыз- дыбыстың болуы
басталуы- бейнені ойнатуды бастағыңыз келетін уақыт
мөлдірлік- бейне мөлдірлігі

css

Сайтымызға стильдер қосайық. Алдымен анықтап алайық сыртқы түрі html, денесі, абзац тегтері және маркерленген тізім.

Html ( биіктігі: 100% ) корпус ( шрифт: 15px/23px "Raleway",sans-serif; маржа:0; толтыру:0; биіктік:100%; ені:100%; -webkit-font-тегістеу: антиализленген; - webkit-text-size-adjust:100% ) p ( font-size:20px; line-height:140%; text-align:center ) ul li (дисплей:inline-блок; тізім стилі:жоқ; толтыру-оң жақ : 10px; )

Қаптама (z-индекс:600; орын:салыстырмалы ) .үлгі (фон-сурет:url(../images/pattern.png); фон-қайталау: қайталау; фондық-тіркеме:жылжыту; ені:100%; биіктік: 100%; позиция: абсолютті; жоғарғы: 0; сол жақта: 0 ) .бөлгіш (фон-сурет:url(../images/divider.png); дисплей:блок; ені:300px; биіктік:35px; жиегі:10px авто ) #colorize ( color:#f1c40f; font-family:"Lato",sans-serif; font-size:40px )

Үлкен фондық бөлімді сәндеу уақыты келді. Орнатайық z-индексүстінде 550 және параметр толып кетужасырын. Бұл YouTube мазмұнының (субтитрлер, аннотациялар) біздің веб-сайтта көрсетілуін болдырмау үшін қажет. Қалған стильдер тақырыптарға, түймелерге және әдепкі кескінге арналған (бұл туралы кейінірек).

Үлкен фондық ( z-индекс: 550; мәтінді туралау: ортасына; биіктік: 100%; мин-биіктігі: 100%; орын: салыстырмалы; толып кету: жасырын ) .үлкен фондық .үлкен фондық-контейнер ( ені: 830px ; макс-ені: 100%; дисплей: кірістірілген блок; орын: абсолютті; жоғарғы: 50%; сол жақта: 50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate (-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%, -50%) ) .big-font-title ( font-family:"Raleway",sans-serif; font-size:78px; color:#fff; font-weight:300; text-transform:бас әріп; мәтінді туралау :center; margin-bottom:22px; padding-top:20px; display:inline-block; фон-қосымша:жылжыту; фон-қайталау:қайталау-x; фон-позиция:жоғарғы орталық ) font-family:"Lato", sans-serif; font-size: 13px; мәтінді түрлендіру: бас әріп; мәтінді безендіру: жоқ; түс: #fff; фон: мөлдір; жиек: 2 пиксель қатты #fff; толтыру: 10px 14px ;курсор: көрсеткіш; әріптер аралығы :2px; мәтінді туралау:ортаға; дисплей: кірістірілген блок; -webkit-өту:.4s фондық жеңілдігі; -moz-өту:.4s фондық жеңілдігі; -o-өту:.4s фондық жеңілдігі; өту: .4s фондық жеңілдігі; ) .big-background-btn:hover (түсі:#fff; фон:rgba(255,255,255,0.20) ) .big-фон-әдепкі-кескін (фон:url(../images/sunset.jpg); фондық-қайталау :қайталанбауы; фон-позициясы:орталық орта; фон өлшемі:мұқаба; ені:100%; биіктік:100%; z-индекс:0; артқы бет-көріну: жасырын )

Енді бөлімге көшейік бөлімі туралы. Параметрді орнатамыз фон түсіақ және төсеу 60px жоғарғы және төменгі және 20px сол және оң.

Бөлім туралы ( font-family:"Lato",sans-serif; түсі:#7f8c8d; фон:#fff; толтыру:60px 20px ) .about-section-container ( мәтінді туралау:орталық; толтыру-төменгі:50px ) .about-section-title ( font-family:"Raleway",sans-serif; font-size:40px; background:#fff; color:#3d566e; padding:0 35px; margin-bottom:22px; background-қосымша: айналдыру; фон-қайталау:қайталау-x; фон-позиция:орталық орталық;мәтін-түрлендіру:бас әріп ) a.about-section-btn ( font-family:"Lato",sans-serif; font-size:13px; мәтін -түрлендіру: бас әріп; мәтінді безендіру: жоқ; түс: #34495e; фон: мөлдір; жиек: 2 пиксель тұтас #34495e; толтырғыш: 10 пиксель 14 пиксель; курсор: меңзер; әріптер аралығы: 2 пиксель; мәтінді туралау: орталыққа; дисплей: кірістірілген блок; -webkit-өткізу: .4с фондық жеңіл; -moz-өту: .4с фондық жеңіл; -o-өту:.4с фондық жеңіл; өту:.4с фондық жеңіл; ) .about-section-btn:hover (түсі:#ffff; фон: #34495e; )

Төменгі деректеме ретінде қызмет ететін шағын фондық бөлім үшін біз ені 100% және параметрді тағайындаймыз толып кетужасырын. Біз де біраз қосамыз төсеубейнемізді көруге болатындай етіп жоғарғы және төменгі. Соңында, әлеуметтік медиа түймелері үшін стильдерді қосамыз.

Small-фон-бөлім ( font-family:"Raleway",sans-serif; толтыру:100px 0; позиция:салыстырмалы; ені:100%; толып кету:жасырын ) .small-фон-контейнер (позиция: салыстырмалы; мәтінді туралау :орталық ) .кіші фондық тақырып ( шрифт өлшемі: 40 пиксель; түс: #f1c40f; қаріп салмағы: 300; z-индекс: 10; дисплей: кірістірілген блок; мәтінді түрлендіру: бас әріп; жиек-төменгі: 20px ; жиек-жоғарғы: 20 пиксель; орын: салыстырмалы; фон-тіркеме: айналдыру; фон-қайталау: қайталау-x; фон-позиция: жоғарғы орталық ) .socials a (түс:#fff ) .socials a:hover ( түсі:# bdc3c7)

БАҚ сұраулары

Сайтымыз бейімделу үшін бірнеше медиа сұрауларды қосамыз.

@media экраны және (макс. ені: 768 пиксель) ( .about-section-title ( сызық биіктігі: 1 ) ) @media screen and (max-width: 480px) ( .big-font-title ( қаріп өлшемі: 58px) ) .small-background-title ( line-height:1 ) /*.player( дисплей: none;) -> Егер сіз плагинсіз белгілі бір көру портындағы бейне bg файлын жойғыңыз келсе*/ ) @media экраны және ( максимум-ені: 360px) ( .big-background-title,#colorize ( line-height:1 ) ) @media screen and (max-width: 320px) ( .small-background-title ( font-size:30px ) )

jQuery

Енді өзімізді іске қосайық YouTube бейне. Сыныпты шақырайық ойыншы jQuery кодының ішінде. Жабылатын негізгі тегтің алдына және тегтердің ішіне келесі кодты қойыңыз .
$(функция()( $(".ойыншы").mb_YTPlayer(); ));

Артық нұсқа

YouTube фондық бейнесі ойнатылмайды мобильді құрылғыларжәне планшеттер, өйткені YouTube ережелері бұған жол бермейді.

Дегенмен, біз қосу үшін jQuery пайдалана аламыз фондық суретәдепкі бойынша, егер браузер пайдаланушы сайтқа мобильді құрылғыдан кіргенін анықтаса.

Қолмен шешім

Пайдаланушының мобильді немесе планшеттік құрылғыдан кіргенін анықтау үшін біз белгілі бір экран өлшеміндегі элементті жасыра аламыз. Мысалы, біз ені 480 пиксель болатын экрандардағы бейне фонын жойғымыз келеді. Сізге жай ғана ойнатқыш элементіне display: none қосу керек:

@media экраны және (макс. ені: 480px) ( .player(дисплей: жоқ; ) )

jQuery-ге қатысты, мұнда біз айнымалы мәнді орнатамыз мобильдіжалған параметрмен. Содан кейін сыныпты тексеріңіз ойыншыдисплейі бар: жоқ. Олай болса, сыныпты қосыңыз үлкен-фон-әдепкі-кескінбөлімдерге үлкен фонжәне шағын фондық бөлімәдепкі фондық кескінді пайдалану үшін. Әйтпесе, ештеңе өзгермейді.

(функция($) ( $(құжат).ready(функция() ( var is_mobile = false; if($(".player").css("display")=="жоқ") ( is_mobile = true; ) if (is_mobile == true) (//Шартты сценарий мұнда $(".big-fon, .small-background-section").addClass("big-fon-default-image"); )else( $( ". player").mb_YTPlayer(); ) )); ))(jQuery);

jQuery плагинімен шешім

Әдепкі кескінді орнатудың тағы бір жолы - jQuery плагині. device.js(http://matthewhudson.me/projects/device.js/). Бұл мобильді құрылғылардың әртүрлі экран өлшемдері үшін шарттарды сипаттау процесін жеңілдетеді. Бұл плагинді пайдалану арқылы біз жай ғана келесі кодты жаза аламыз:

(функция($) ( $(document).ready(function() ( //Device.js оның планшет немесе ұялы екенін тексереді - http://matthewhudson.me/projects/device.js/ егер (!device. tablet() && !device.mobile()) ( $(".player").mb_YTPlayer(); ) else ( //jQuery $(".big-background, .small-" сыныбына әдепкі фон қосады. background-section").addClass("үлкен фондық-әдепкі сурет"); ))) ))(jQuery);

Мұнда мен әдістерді қолдандым device.mobile()және device.tablet()пайдаланушы кірген құрылғыны тексеру үшін. Егер шарт орындалса, сынып қосылады үлкен-фон-әдепкі-кескінбөлімге үлкен фонжәне шағын фондық бөлім. AT әйтпесеСынып ойыншыөзгеріссіз қалады және бейне ойнатылады.

Тәртіпке келтіру

Бейне – аудиторияға хабарлама жеткізудің тамаша тәсілі. Ол айналуы мүмкін қуатты құралСіздің сайтыңыз дұрыс пайдаланылған жағдайда.

Веб-дизайн дамып, жетілдіріліп жатқан сайын, одан да көп болатынына сенімдімін шығармашылық идеяларвеб-сайт дизайнында бейнені қолдану. Сіз бұл оқулықта бірдеңе білдіңіз деп үміттенемін. Түсініктемелерде өз ойларыңыз бен пікірлеріңізді жазыңыз.

Аудармашыдан.Аудармаға қатысты барлық тілектеріңіз бен пікірлеріңіз үшін маған жеке хабарлама жіберулеріңізді сұраймын. Рақмет сізге!

| 16.04.2015

Соңғы бір жылда веб-дизайнерлер сайтты көркейтудің өзіндік әдісін - бет фоны ретінде бейнені орнатуды жиі қолдана бастады. Қызықты сюжет немесе фондық «жанды» сурет тіпті қарапайым визитка сайтын безендіреді, пайдаланушыны қызықтырады және оларды сайтта ұзағырақ болуға шақырады. Бүгін біз сіздермен HTML5 және CSS көмегімен веб-сайтқа толық экранды бейне фонын орнату тәсілдерінің бірімен бөлісеміз.

Егер сіз сайтта фонға бейне орнатқыңыз келетініне сенімді болсаңыз, кейбір нюанстарды білуіңіз керек:

Біріншіден, бейненің айтарлықтай үлкен салмағы бар екенін есте ұстаған жөн. Бұл бетті жүктеу жылдамдығына теріс әсер етуі мүмкін, әсіресе пайдаланушыда интернет байланысы баяу болса. Сондықтан уақыт өте ұзақ емес бейнелерді таңдаңыз. Ұзақ бейнені пайдалану қажет болған жағдайда, оның салмағын азайтуға немесе аудиторияның бір бөлігін құрбан етуге дайын болыңыз.
Екіншіден, бейнелердегі дыбысты автоматты түрде ойнатудан аулақ болыңыз. Бейнелерді дыбыссыз пайдаланыңыз немесе қажет болса, пайдаланушыға дыбысты өзі қосу мүмкіндігін қосыңыз. Сайтты ашу кезінде дыбысты автоматты түрде ойнату өте нашар форма болып саналады.
Үшіншіден, сіз кросс-браузерлермен үйлесімділік пен бейнені барлық құрылғыларда дұрыс көрсету және ойнату туралы қамқорлық жасауыңыз керек, сондай-ақ бейнеге балама ұсынуыңыз керек (ол ойнатпайтын жағдайларда). Мұны қалай жасау керектігін төмендегі мысалда көрсетеміз.
Төртіншіден, сіз бейнетелефон орнатқыңыз келетін сайтқа сәйкес келетінін мұқият ойластырыңыз, өйткені бұл әрекеттің түпнұсқалығы мен пайдасыздығы арасындағы шекараны кесіп өту өте оңай. Ешбір жағдайда бейне пайдаланушыны сайтқа келген басты мақсатынан алшақтатпауы керек. Мәтін мазмұнының астына бейне фонын орнатқанда, мәтіннің қаншалықты оқылатынын тексеруді ұмытпаңыз. Мысалы, ол бейнені ойнатудың белгілі бір нүктесінде фонға түсіп кетуі мүмкін (ақ фонда ақ мәтін, қара фонда қара мәтін және т.б.).

1.HTML

Мысалы, біз рұқсаты 1920 × 1080, ұзақтығы 15 секунд және салмағы 3 МБ-тан сәл асатын бейне түсірдік. Блоктың ішінде

идентификаторы бар video-bg - бұл біздің фон:

Тег үшін

ені – бейнені ойнату аймағының ені;
биіктік – ауданның биіктігі;
autoplay - бейнені автоматты түрде ойнату;
цикл – бейнені циклдік қайталау;
постер – бейне жүктеліп жатқанда немесе қол жетімді емес кезде оның орнына көрсетілетін сурет.

Әрі қарай, бізде екі тег бар , мұнда бейне URL мекенжайлары әртүрлі пішімдерде - MP4 және WEBM. Неліктен бейнені бірнеше форматта қосу керек? Өйткені, барлық браузерлер бір бейне пішімін қолдамайды. Барлығы бейнені тани алатындай етіп заманауи браузерлер, кем дегенде осы екі пішімдегі файлды беруіңіз керек. Тиісті мәндері бар type атрибуты браузерге таңдауды тезірек жасауға көмектеседі.

2. CSS

Біздің фондық стильдер кестесі келесідей көрінеді:

#video-bg (позиция: бекітілген; жоғарғы: 0; оң: 0; төменгі: 0; сол: 0; толып: жасырын; z-индекс: 1; фон: url(bg/daisy-stock-poster.jpg) жоқ -қайталау #94a233; фон өлшемі: мұқаба; ) #video-bg > бейне (позиция: абсолютті; жоғарғы: 0; сол жақта: 0; мин-ені: 100%; мин-биіктігі: 100%; ені: авто; биіктік : auto; ) @supports (object-fit: cover) ( #video-bg > бейне (жоғарғы: 0; сол жақта: 0; ені: 100%; биіктік: 100%; нысанға сәйкестендіру: қақпақ; ) )

Кодтан көріп отырғаныңыздай, фон бүкіл бетке орнатылған, ал сурет (сол бейнедегі кадр) сақтық көшірме фон ретінде орнатылған. Ең төтенше жағдайда фон түсі #94a233 болады.

Сондай-ақ, кодта браузер нысанға сәйкестендіру сипатын қолдайтынын тексеретін @supports директивасы бар. Егер иә болса, онда фон жабуға орнатылады және әртүрлі экран өлшемдерінде пропорционалды түрде көрсетіледі.

caniuse.com сайтына сәйкес, нысанға сәйкестендіру сипатын қазіргі уақытта қоспағанда, барлық браузерлер қолдайды Internet Explorer, Firefox 31-35, Safari 7, iOS Safari 7.1 және Android браузері 4.1-4.4.

Жұмыс үстелінің мониторына сайтты қалай орнатуға болады?

Кез келген пайдаланушы шаршайтын бірінші нәрсе - жұмыс үстелінде орнатылған тұсқағаздарды қарау. Көптеген адамдар жүйе бірнеше рет қайта орнатылған болса да, бірнеше жылдар бойы әдепкі суретке үнемі қарайды. Барлық пайдаланушылар оны тез жалықтырады және олар жұмыс үстеліне қолайлы суреттерді іздейді. Кейбір пайдаланушылар анимациялық тұсқағаздарды қалайды. Сізге сүйікті сайттың негізгі бетін тұсқағаз ретінде орнатуды ұсынамын (әрине кез келген бет). Қазір, уақыттарда шексіз интернетбұл кейде кейбіреулер үшін өте ыңғайлы, әсіресе компьютер немесе ноутбук желіге үнемі қосылған кезде. Кез келген жағдайда бұл жақсы нұсқа. Бұл трюк Windows XP жүйесінде пайда болды. Әттең, сонда бітті. Интерактивті кестелер жойылды. Мен үшін он-лайн режимінде жаңалықтар сайттарының жаңаруын көру өте қызықты болды. Жұмыс үстеліндегі мұндай параметр көптеген пайдаланушылар үшін пайдалы болар еді. Бірақ, қайталап айтамын, жаңаны жасаушылар Windows нұсқаларыинтерактивті бетті көрсету мүмкіндігінсіз Жұмыс үстелінен кетуге шешім қабылдады. Шынымды айтсам, өте өкінішті. Жеке өзім үшін бұл мүмкіндік кейде өте жетіспейді.

Бірақ сөзден іске көшейік. Веб-бетті жұмыс үстеліне орнатыңыз

басыңыз оң жақ түймешікті басыңызкез келген үшін тінтуір бос орынжұмыс үстелінде

Жұмыс үстелінде пайда болатын қосымша мәзірде элементті таңдаңыз Қасиеттер.

Жұмыс үстелі қойындысын таңдап, шертеміз Жұмыс үстелін орнату...

Жұмыс үстелінің элементтері мәзірінен қойындыны таңдаңыз желісодан кейін түймені басыңыз Жасау... Ал, немесе элементті таңдаңыз Менің қазіргі басты бетім.Фон әдепкі шолғышта үй ретінде орнатылған сайт бетін көрсетеді.

Пайда болған терезеде браузердің мекенжай жолағынан сүйікті сайттың бұрын көшірілген мекенжайын енгізу жеткілікті.

Кезекті түрде жабыңыз ашық диалогтық терезелер, өзгертулермен келісіп, OK түймесін басыңыз. Енді қызықсыз суреттің орнына сізге ұнайтын веб-сайттың беті бар және жұмыс үстеліндегі сайтқа қарап, интерактивті түрде желідегі өзгерістерді бақылай аласыз.

Танымал Zadarma қызметін 1С-ке қосу енді бірнеше минуттың ісі. 1С және Задарманы біріктіру үшін дайын кеңейтімді қосу жеткілікті. Кез келген қызметкер орнатуды еш қиындықсыз орындай алады, тіпті тазалаушы Маша апай, тазалаушы маман.

Ең алдымен, біз белсенді пайдаланатын шағын бизнеске назар аудардық АТС Задармажәне конфигурация 1С: Шағын фирманы басқару 1.6.

Бұрынғыдай

Zadarma-мен біріктіру үшін сізге 1C ішіне орнатылған арнайы тергішті пайдалану керек болды - SIP фоны деп аталады. Бұл опция бірнеше «егер» арқылы қолайлы болды:

1С орнатылған болса жергілікті компьютер, терминал серверінің бір жерінде емес
егер пайдаланушы жұмыс үстелі телефонының орнына 1С тергішті пайдалануға келіссе

Жалпы, егер барлық «егер» келіссе, интеграция мүмкін болды.

Қазір қалай болып қалды

Енді 1С және Задарманы біріктіру үшін қоңыраулар үшін қандай соңғы құрылғы пайдаланылғаны маңызды емес. Бұл кез келген нәрсе болуы мүмкін:

үстел телефоны
ОЖ-да орнатылған бағдарламалық телефон
браузерде жұмыс істейтін веб-фон

Zadarma үшін 1C кеңейтімі терушімен емес, API интерфейсімен әрекеттеседі. Сондықтан, пайдаланушының нақты не шақыратыны маңызды емес.

Орнату оңай

Орнату 1 қадамнан тұрады. Сізге тек 2 скриншот көрсетіңіз.

Негізгі бетті орналастыру

Zadarma телефония тақтасы автоматты түрде пайда болады басты бет. Егер кенеттен пайдаланушыға бұл қажет болмаса, ол жай ғана мәзірден «Көру» - «Бастапқы бетті орнату» құсбелгісін алып тастай алады.

Орнату қарапайымдылығы

API кілттерін мына жерден алыңыз жеке шотЗадарма

және оларды 1С-қа салыңыз

Әрине, біз simplit.io сайтында тіркелгінің логин/паролін енгіземіз.

Міне, енді сіздің 1С Zadarma-ға қосылды.

1С-де басу арқылы қоңыраулар

«Телефон» белгішесін қай жерде көрсек те, оны басуға болады, сонда Задарма теруді бастайды.

Деректемелер» Байланыс ақпараты» көптеген құжаттар тізімдерінде, каталогтарда бар - енді қоңырау шалу үшін клиент картасына жүгірудің қажеті жоқ. Мысалы, тапсырыстар, шот-фактуралар, шығындар тізімінен тікелей қоңырау шалуға болады

Кіріс қоңырауға арналған тұтынушы картасы

1C және PBX біріктіру кезінде стандартты және міндетті болып табылатын функция. Айта кету керек, ол әрқашан сұранысқа ие емес, сондықтан оны телефония панелінің параметрлерінде өшіруге болады.

Қоңырауды оқиға құжатымен тіркеу

Сол сияқты, сіз құжатты автоматты түрде жасау қажеттілігін басқара аласыз «Оқиға- Телефон қоңырауы«. Бұл құжаттың көмегімен қоңырауға түсініктеме қалдыру ыңғайлы.

Ең бастысы, осы құжаттың негізінде сіз одан кейін Тапсырысты, Шот-фактураны енгізе аласыз, осылайша қоңырау мен сату арасындағы байланыс анық көрінеді.

Сіз телефон қоңырауы құжатына еске салғышты қоса аласыз, бұл қызметкер клиентке кейінірек қоңырау шалуға уәде берген жағдайда өте ыңғайлы.

PBX қоңыраулар тарихы

Қоңыраулар тарихы, әрине, өте маңызды нәрсе. 1C және Zadarma біріктіруге арналған кеңейтім тарихпен жұмыс істеудің бірнеше нұсқасын ұсынады.

Мысалы, пайдаланушы тарихты өзі көргісі келеді.Біздің соңғы қоңыраулар тізіміне ұқсас ұялы телефон. Бұл тарихты басты беттегі «Тарих» қойындысын ашу арқылы көруге болады.

Мен көбінесе белгілі бір клиенттің тарихын көргім келеді, байланыс тұлғасы немесе жеке адамға. Клиент жағдайында біз контрагенттің нөміріне де, оның барлық байланысқан адамдарының нөмірлеріне де қоңырауларды көруіміз керек.

Клиент таңдауы бар қоңыраулар тарихын оның картасында тікелей көруге болады. Тарих клиенттен және оның барлық контактілерінен қоңырауларды қамтиды. Нөмір контрагенттің өзіне тиесілі болған кезде «Байланыс» өрісі толтырылмайды.

Ескерту.

Dreamweaver CC және одан кейінгі нұсқаларында пайдаланушы интерфейсі жеңілдетілген. Нәтижесінде, осы мақалада сипатталған кейбір мүмкіндіктер Dreamweaver CC және одан кейінгі нұсқаларында қол жетімді болмауы мүмкін. қосымша ақпаратосы мақаланы қараңыз.

Веб-қосымшалар туралы

Веб қолданбасы – ішінара немесе толығымен өңделмеген мазмұн бар беттерді орналастыратын веб-сайт. Соңғы мазмұн сайтқа кіруші веб-серверден бетті сұрағаннан кейін ғана жасалады. Беттің соңғы мазмұны келушінің әрекеті негізінде жасалған сұранысқа байланысты болғандықтан, мұндай бет динамикалық деп аталады.

Веб-қосымшаларды қолдану спектрі өте кең. AT осы бөлімвеб-қосымшаларды пайдаланудың жалпы мәселелерін талқылайды, сонымен қатар қарапайым веб-қосымшаның мысалын береді.

Веб-қосымшалардың типтік қолданбасы

Веб-қосымшаларды пайдалану веб-сайтқа келушілерге де, веб-сайт әзірлеушілеріне де белгілі бір артықшылықтар әкеледі.

Веб-қосымшалар келушілерге ақпаратқа бай веб-сайттардан қажетті ақпаратты жылдам және оңай табуға мүмкіндік береді.

Веб-қолданбаның бұл түрі мазмұнды іздеуге, мазмұнды ұйымдастыруға және келушілерге ыңғайлы жолмен шарлауға мүмкіндік береді. Мұндай қолданбалардың мысалдары компаниялардың ішкі желілері болып табылады - Microsoft MSDN (www.msdn.microsoft.com) және Amazon.com (www.amazon.com).

Веб-қосымшалар сайтқа кірушілерден алынған деректерді жинауға, сақтауға және талдауға мүмкіндік береді.

Ұзақ уақыт бойы CGI қолданбалары немесе тағайындалған жұмысшылар өңдеу үшін HTML пішіндеріне енгізілген деректерді электрондық пошта хабарламалары түрінде жіберу әдісі қолданылды. Веб-қосымша деректерді тікелей дерекқорда сақтауға, сонымен қатар деректерді қабылдауға және талдау үшін алынған деректер негізінде есептерді шығаруға мүмкіндік береді. Мысалы интерактивті беттербанктер, тауарлық-материалдық құндылықтарды бақылау беттері, социологиялық зерттеулер мен сауалнамалар, сондай-ақ нысандар кері байланыспайдаланушылармен.

Веб-қосымшаны мазмұнды мезгіл-мезгіл өзгертетін веб-сайттарды жаңарту үшін пайдалануға болады.

Веб-қосымша веб-дизайнерді тораптың HTML беттерін үнемі жаңартып отырудың күнделікті жұмысынан босатады. Жаңалықтар редакторлары сияқты мазмұн провайдерлері жаңа мазмұнға жауапты, ал веб-бағдарлама бақылайды автоматты жаңартусайт. Мысалдарға The Economist (www.economist.com) веб-нұсқасы және CNN жаңалықтар қызметі (www.cnn.com) жатады.

Веб қолданбасының үлгісі

Светлана веб-дизайнер және Dreamweaver бағдарламасын өз жұмысында көптен бері пайдаланып келеді. Оның міндеттеріне 1000-ға жуық қызметкері бар орта компанияның ішкі корпоративтік веб-сайты мен интернет-сайтын жүргізу кіреді. Бір күні оған кадр бөлімінің қызметкері Сергей өз мәселесімен жүгінді. Адам ресурстары бөлімі қызметкерлердің сауықтыру бағдарламасын бақылайды. Осы бағдарлама аясында қызметкерлерге жаяу, жүгіру немесе велосипедпен жүріп өткен әрбір шақырым үшін арнайы ұпайлар беріледі. Айдың соңында әрбір қызметкер Сергейге электрондық пошта арқылы километрлердің жалпы санын көрсететін есеп жібереді. Осыдан кейін Сергей келіп түскен хаттар бойынша қызметкерлерді жинаған ұпайларына қарай шағын ақшалай сыйлықтармен марапаттайды.

Мәселе мынада, сауықтыру бағдарламасы өте танымал болды. AT осы сәтбұл бағдарламаға қатысушылардың санының өскені сонша, айдың соңында Сергейдің барлық ақпаратты өңдеуге уақыты жоқ. электрондық пошта. Сондықтан ол Светланаға бұл мәселені веб-технологиялар арқылы шешу мүмкіндігі туралы сұрақпен жүгінді.

Бұған жауап ретінде Светлана келесі міндеттерді шешетін веб-қосымшаны құруды ұсынды.

Қызметкерлер өздерінің спорттық жетістіктері туралы деректерді қарапайым HTML пішініне енгізеді.

Алынған деректер дерекқорда сақталады.

Алынған деректер негізінде ұпайлар беріледі.

Әрбір қызметкер өз нәтижелері туралы мәліметтерді ала алады.

Әр айдың соңында Сергейдің барлық соңғы нәтижелерді алуға мүмкіндігі бар.

Мүмкіндігінше қысқа мерзімде Светлана қажетті қосымшаны жасап, іске қосты, өйткені Dreamweaver-те бәрі бар қажетті құралдаржылдам және қарапайым құрумұндай қолданбалар.

Кез келген веб-бағдарлама – бұл статикалық және динамикалық веб-беттер жиынтығы. Статикалық веб-бет- бұл әрқашан пайдаланушы алдында өзгеріссіз көрсетілетін бет. Веб-сервер бетті веб-браузер сұрағандай ешбір өзгертусіз жібереді. Керісінше, сервер өзгертулер енгізеді динамикалық веб-бетбраузерге жібермес бұрын. Бет өзгеретіндіктен ол динамикалық деп аталады.

Мысалы, сауықтыру бағдарламасының нәтижелерін көрсететін бетті жасауға болады. Бұл жағдайда кейбір ақпарат (мысалы, қызметкердің аты-жөні және оның нәтижелері) бетті қызметкер сұраған кезде анықталады.

Келесі бөлімде веб-қосымшалар қалай жұмыс істейтіні толығырақ қарастырылады.

Статикалық веб-беттерді өңдеу

Статикалық веб-сайт веб-сервер орнатылған компьютерде орналастырылған қатысты HTML беттері мен файлдар жинағын қамтиды.

Веб-сервер бұл бағдарламалық қамтамасыз етуВеб-браузерлердің сұрауларына жауап ретінде веб-беттерді қамтамасыз ететін A. Әдетте, бет сұрауы веб-беттегі сілтемені басқанда, браузерде бетбелгіні таңдағанда немесе URL мекенжайын енгізгенде жасалады. мекенжай жолағыбраузер.

Статикалық веб-беттің соңғы мазмұнын әзірлеуші анықтайды және бетті сұрау процесі кезінде өзгеріссіз қалады. Мысалы:

Trio Motors ақпарат беті

Trio Motors туралы

Барлық HTML кодын әзірлеуші бет серверде орналастырылғанға дейін жасайды. HTML коды бет серверде жарияланғаннан кейін өзгермейтіндіктен, бұл бет статикалық деп аталады.

Ескерту.

Қатаң айтқанда, «статикалық» бет шын мәнінде біреу болмауы мүмкін. Мысалы, толтырғыш кескіні немесе Flash мазмұны (SWF файлы түрінде) тұрақты бетті жандыра алады. Дегенмен, бұл контексте бет статикалық болып табылады, өйткені ол браузерге өзгеріссіз жіберіледі.

Веб-сервер статикалық бетке қызмет көрсету сұрауын алған кезде, сұрауды талдаудан кейін сервер қалаған бетжәне оны төменде көрсетілгендей браузерге жібереді.

А.Веб-шолғыш статикалық бетті сұрайды. б.Веб-сервер бетті табады. C.Веб-сервер бетті сұраған браузерге жібереді.

Веб-қосымшалар жағдайында бетке кіруші сұрағанша бет кодының кейбір бөлімдері жоқ. Жетіспейтін код қандай да бір механизм арқылы жасалады, содан кейін ғана бетті браузерге жіберуге болады. Бұл кодты генерациялау механизмі келесі бөлімде талқыланады.

Веб-сервер статикалық веб-бетке сұрауды қабылдағанда, ол бетті тікелей шолғышқа жібереді. Дегенмен, динамикалық бет сұралғанда, веб-сервердің әрекеттері соншалықты қарапайым емес. Сервер бетті жібереді арнайы бағдарлама, ол соңғы бетті құрайды. Мұндай программа қолданбалы сервер деп аталады.

Бағдарлама сервері беттегі кодты оқиды, оқыған код негізінде соңғы бетті көрсетеді, содан кейін оны беттен жояды. Барлық осы операциялардың нәтижесінде веб-серверге жіберілетін статикалық бет алынады, ол өз кезегінде оны клиенттік браузерге жібереді. Браузер алатын барлық беттер тек HTML кодын қамтиды. Процестің схемалық көрінісі:

А. б. C.Қолданба сервері нұсқауларды алу үшін бетті қарап, оны жасауды жүзеге асырады. D.Қолданба сервері көрсетілген бетті веб-серверге қайтарады. Е.

Мазмұнды дерекқорда сақтау веб-сайттың көрінісі мен сезімін пайдаланушылар көретін мазмұннан ажыратады. Барлық беттерді бөлек HTML файлдары ретінде жасаудың орнына ұсынылатын ақпараттың әрбір түрі үшін тек бет үлгілері жазылады. Содан кейін мазмұн дерекқорға жүктеледі, содан кейін веб-сайт оны пайдаланушылар сұраған кезде шығарып алады. Оған қоса, ақпаратты бір көзде жаңартып, әр бетті қолмен өңдемей-ақ сол өзгерісті бүкіл веб-сайтта қайталай аласыз. Adobe Dreamweaver бағдарламасы дерекқорға ақпаратты кірістіру, жаңарту және жою үшін веб-пішіндерді жасауға мүмкіндік береді.

Мәліметтер қорынан мәліметтерді алуға арналған программалық нұсқау деп аталады дерекқор сұрауы. Сұрау SQL (Structured Query Language) деп аталатын дерекқор тілі арқылы көрсетілген іздеу шарттарынан тұрады. SQL сұрауының мәтіні сервер жағындағы бет сценарийлерінде немесе тегтерде орналасқан.

Қолданба сервері дерекқордан деректерді тікелей ала алмайды, себебі дерекқорлар арнайы деректерді сақтау пішімдерін пайдаланады, нәтижесінде мұндай деректерді алу әрекеті ашу әрекетіне ұқсайды. Microsoft құжатыСөзді қолдану мәтіндік редакторБлокнот немесе BBEdit. Сондықтан қолданбалы сервер дерекқорға қосылу үшін делдалды, дерекқор драйверін пайдаланады. Мәліметтер базасының драйвері қолданбалы сервер мен мәліметтер қоры арасында байланысты орнататын бағдарламалық модуль болып табылады.

Драйвер қосылымды орнатқаннан кейін мәліметтер базасына сұраныс жасалады, нәтижесінде жазбалар жинағы қалыптасады. Жазбалар жинағыбір немесе бірнеше дерекқор кестелерінен алынған деректер жиынтығы. Жазбалар жинағы бетті қалыптастыру үшін алынған деректерді пайдаланатын қолданба серверіне қайтарылады.

Төменде қарапайым SQL дерекқор сұрауының мысалы келтірілген.

Қызметкерлерден тегі, аты, сәйкес нүктелерін ТАҢДАҢЫЗ

Келесі мысал дерекқор сұрауын жасау және алынған деректерді шолғышқа қайтару процесін көрсетеді.

А.Веб-шолғыш динамикалық бетті сұрайды. б.Веб-сервер бетті тауып, оны қолданбалы серверге жібереді. C.Қолданба сервері нұсқаулар үшін бетті сканерлейді және оны дайындайды. D.Бағдарлама сервері дерекқор драйверіне сұраныс жібереді. Е.Драйвер дерекқорға қарсы сұрауды орындайды. Ф.Жазбалар жинағы жүргізушіге қайтарылады. Г.Драйвер жазбалар жинағын қолданба серверіне жібереді. Х.Бағдарлама сервері деректерді бетке енгізеді және бетті веб-серверге жібереді. I.Веб-сервер көрсетілген бетті оны сұраған шолғышқа жібереді.

Серверде сәйкес дерекқор драйвері орнатылған болса, кез келген дерекқор веб-қосымшада пайдалануға жарамды.

Төмен бюджеттік қолданбаларды жасау үшін файлға негізделген дерекқорды пайдалана аласыз, мысалы, көмегімен жасалған дерекқор Microsoft Access. Сенімді кәсіпорын қолданбаларын жасауды жоспарласаңыз, мысалы, негізіндегі дерекқорды пайдалану ұсынылады Microsoft серверлері SQL сервері, Oracle 9i немесе MySQL.

Деректер базасы мен веб-сервер орналасқан болса әртүрлі компьютерлер, сіз жүйелер арасындағы жоғары жылдамдықты байланысты қамтамасыз етуіңіз керек, өйткені бүкіл веб-қосымшаның тиімділігі мен жылдамдығы осыған байланысты болады.

Динамикалық беттерді әзірлеу

Даму процесі динамикалық беттернегізгі HTML кодын жазудан және одан кейін бетті динамикалық ететін серверлік сценарийлерді немесе HTML бет тегтерін жасаудан тұрады. Соңғы кодқа қарап, сценарий тілі беттің HTML кодына енгізілгенін көруге болады. Тиісінше, мұндай сценарий тілдері HTML енгізілген тілдер деп аталады. Келесі мысал ColdFusion белгілеу тілін (CFML) пайдаланады.

Ескерту. Dreamweaver CC және одан кейінгі нұсқалары CFML-ге қолдау көрсетпейді.

Trio Motors ақпарат беті

Trio Motors туралы

Trio Motors - жетекші автомобиль өндірушісі.

Біздің #бөлім# парақшамызға міндетті түрде кіріңіз.

Енгізілген осы бетнұсқаулар келесі әрекеттерді орындайды.

Атау арқылы айнымалы құрылады бөлім, одан кейін оған жол мәні тағайындалады «Сату» .

«Сату» мәні HTML кодында орналастырылған.

Бағдарлама сервері веб-серверге келесі бетті қайтарады:

Trio Motors ақпарат беті

Trio Motors туралы

Trio Motors - жетекші автомобиль өндірушісі.

Сатылымдар бетіне міндетті түрде кіріңіз.

Веб-сервер бетті браузерге жібереді, ол келесідей көрсетеді.

Trio Motors туралы

Trio Motors жетекші автомобиль өндірушілердің бірі болып табылады.

Біздің сатылым парағына кіруді ұмытпаңыз.

Сценарий тілін немесе тегтерге негізделген тілді таңдау пайдаланылатын сервер технологияларына байланысты. Төменде ең жиі қолданылатын тілдердің тізімі берілген серверлік технологиялар Dreamweaver қолдау көрсетеді.

Сервер технологиясы
	ColdFusion белгілеу тілі (CFML)
ASP беттері

Dreamweaver сервер сценарийлерін немесе беттерге қажетті тегтерді жасай алады немесе әзірлеуші Dreamweaver кодтау ортасын пайдаланып қажетті кодты жаза алады.

Веб қолданбалы терминология

Бұл бөлім веб-қосымшаларға қатысты жиі қолданылатын терминдердің анықтамаларын береді.

Қолданбалар сервері

Веб-сервер сервер жағындағы сценарийлерді немесе тегтерді қамтитын веб-беттерді өңдеу үшін пайдаланатын бағдарламалық құрал. Мұндай беттер сұралғанда, веб-сервер алдымен өңдеу үшін қолданбалы серверге жібереді, содан кейін оларды клиент браузеріне жібереді. Қосымша ақпарат алу үшін Веб қолданбалары қалай жұмыс істейді бөлімін қараңыз.

Ең көп таралған қолданба серверлері ColdFusion және PHP тілдерін қолдайды.