A weboldalak hátterében elhelyezett nagyméretű videók meglehetősen népszerű trendek a webdizájnban. Az ügyesen 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 vele készített hátterekkel JavaScript amelyek bizonyos kódot és képeket igényelnek, mielőtt a felhasználó látná az animáció eredményét.

Vannak olyan cégek, mint például 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é.

Míg a videóháttér létrehozásának legnépszerűbb módja a HTML5 videocímke használata néhány címkével együtt css opciók, érdemes figyelni az alternatív videóforrásokra is, például a YouTube-ra. Ebben az esetben nem kell tartania a szerver lassú válaszától, mert a kérés közvetlenül a YouTube-ra érkezik.

Ebben a cikkben megmutatom, hogyan készíthetsz egy remek webhelyet, amely egy YouTube-videót 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:

//A nagy háttértartalom itt //A szakasz tartalmáról itt //A kis háttérszakasz tartalma itt

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

YOUTUBE VIDEÓ A HÁTTÉRBEN Meg akarom tanulni, hogyan helyezhetek el bármilyen YouTube-videót a webhely hátterébe

Kíváncsi, hogyan adhat hozzá videót webhelye hátteréhez?
Ez könnyebb, mint valaha! A jQuery MB.YTPlayer jQuery beépülő modullal bármilyen YouTube-videót beágyazhat webhelye hátterébe.
Bármilyen videót könnyedén alakíthatsz HTML háttér. Nincs késés az oldalbetöltésben és a szerver betöltésében!

Töltse le most a bővítményt a közösségi hálózatokon

A Font Awesome-ot használtam a közösségi ikonokhoz a kis háttérrel rendelkező részben. Ezután a jQuery.mb.YTPlayer bővítmény segítségével sablont adunk a videónkhoz. Helyezze el a következő kódot közvetlenül a .

A videó beállításához a következőket használtuk:

• osztályú lejátszó – ezt az osztályt az mb.YTPlayer bővítmény használja
• videoURL - link a videóra
• elzárás- CSS-választó amelyben lejátszhatja a videót
• autoPlay - videó automatikus lejátszása
• némítás - a hang jelenléte
• startAt – az az időpont, amikortól el szeretné kezdeni a videó lejátszását
• opacitás – videó átlátszósága

CSS Adjunk stílusokat oldalunkhoz. Először is határozzuk meg kinézet html, törzs, bekezdéscímkék és felsorolásjeles lista.

Html (magasság:100% ) törzs ( font:15px/23px "Raleway",sans-serif; margó:0; kitöltés:0; magasság:100%; szélesség:100%; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100% align; line4 (font2:p-xsize) pheight1; center ) ul li ( display:inline-block; list-style:none; padding-right: 10px; )

Burkolat ( z-index:600; pozíció:relatív ) .pattern ( background-image:url(../images/pattern.png); background-repeat: ismétlés; background-attachment:scroll; szélesség:100%; magasság:100%; pozíció:abszolút; felső:0; balra:0 (háttérben) .d.image:pividerurng blokk; szélesség: 300 képpont; magasság: 35 képpont; margó: 10 képpont automatikus ) #colorize ( color:#f1c40f; font-family:"Lato",sans-serif; font-size:40px )

Ideje stílusossá tenni a nagy hátterű részt. Állítsa a z-indexet 550-re, a túlcsordulást pedig rejtettre. Erre azért van szükség, hogy megakadályozzuk a YouTube-tartalom (feliratok, kommentárok) megjelenítését a weboldalunkon. A többi stílus a fejlécekre, gombokra és az alapértelmezett képre vonatkozik (erről később).

Nagy háttér ( z-index: 550; szöveg igazítása: középre; magasság: 100%; min-magasság: 100%; pozíció: relatív; túlcsordulás: rejtett ) (-50%, -50%); -moz-transform:translate (-50%, -50%); -ms-transform:translate (-50%,-50%); -ms-transform:translate (-50%,-50%); -ms-transform:translate (-50%,-50%): -translate5% 0%,-50%) ) .big-background-title ( font-family:"Raleway",sans-serif; font-size:78px; color:# fff; font-weight:300; text-transform:uppercase; text-align:center; margin-bottom:22px; padding-top: backgrounds-cttttach; háttér :repeat-x; háttérpozíció:felső középső ) kis- és nagybetű; szövegdekoráció:nincs; szín:#fff; háttér: átlátszó; szegély: 2px tömör #fff; kitöltés: 10px 14px; kurzor:mutató; betűköz: 2px; szövegigazítás:közép; kijelző:inline-block; -webkit-transition:.4s háttér könnyű; -moz-transition:.4s háttér könnyű; -o-transition:.4s háttér könnyű; átmenet:.4s háttér könnyű; ) .big-background-btn:hover ( color:#fff; background:rgba(255,255,255,0.20) ) dex:0; backface-visibility:hidden )

Most pedig térjünk át a róluk szóló részre. Állítsa a háttérszínt fehérre, a kitöltést pedig 60 képpontra felül és alul, valamint 20 képpontot balra és jobbra.

About-section ( font-family:"Lato",sans-serif; color:#7f8c8d; background:#fff; padding:60px 20px ) a.about-section-btn ( font-family:"Lato",sans-serif; font-size:13px; text-size: background3:uppercase;4 text-deppercase; transzparens; keret: 2px szilárd #34495e; kitöltés: 10px 14px; kurzor:mutató; betűköz: 2px; text-align:center; display:inline-block; -webkit-transition:.4s background easy; -moz-transition:.4s background easy; -o-transition;.4s background easy; -o-transition;.-out) n:hover ( szín:#fff; háttér: #34495e; )

A kis hátterű résznél, amely láblécként is szolgál, a szélességet 100%-ra, a túlcsordulást pedig rejtettre állítjuk. A tetején és az alján is párnázunk, hogy láthatóvá tegyük videónkat. Végül adjunk hozzá stílusokat a közösségi média gombokhoz.

Kis háttér-szakasz ( font-family:"Raleway",sans-serif; padding:100px 0; position:relative; width:100%; overflow:hidden ) 0; display:inline-block; text-transform:uppercase; margin-bottom:20px; margin-top: 20px; margin-top: 20px -x; background-position:top center ) .socials a ( color:#fff ) .socials a:hover ( color:#bdc3c7 )

Médialekérdezések Annak érdekében, hogy oldalunk adaptív legyen, adjunk hozzá néhány médialekérdezést.

@média képernyő és (max. szélesség: 768px) ( .about-section-title ( line-height:1 ) ) @media screen and (max-width: 480px) ( .big-background-title ( font-size:58px ) .small-background-title if -he.neer1)(line:background-ight-title) szeretné eltávolítani a videobg-t egy adott nézetablakban plugin nélkül* / ) @media képernyő és (max. szélesség: 360 képpont) ( .big-background-title,#colorize ( line-height:1 ) ) @media screen and (max-width: 320px) (.small-ground-px-tiizet)3 font

jQuery Most vegyük bele a mi Youtube videó. Hívjuk a játékososztályt bent jQuery kódot. Helyezze el a következő kódot a záró body címke elé és a címkék belsejébe.
$(function()( $(.player").mb_YTPlayer(; )); A tartalék YouTube háttérvideót nem lehet lejátszani mobil eszközök ja és táblagépek, mivel a YouTube szabályai ezt nem teszik lehetővé.

A hozzáadáshoz azonban használhatjuk a jQuery-t háttérkép alapértelmezés szerint, ha a böngésző megállapítja, hogy a felhasználó mobileszközről érte el a webhelyet.

Manuális megoldás

Annak megállapítására, hogy a felhasználó mobilról vagy táblagépről van-e bejelentkezve, elrejthetjük az elemet egy adott képernyőméretnél. Például el akarjuk távolítani a videó hátterét a 480 képpont széles képernyőkön. Csak hozzá kell adnia a display: none-t a lejátszó elemhez:

@média képernyő és (max. szélesség: 480 képpont) ( .player( kijelző: nincs; ) )

Ami a jQuery-t illeti, itt az is_mobile változót false értékre állítjuk. Ezután győződjön meg arról, hogy a játékososztály rendelkezik egy display: none paraméterrel. Ha igen, akkor az alapértelmezett háttérkép használatához adja hozzá a nagy háttér-alapértelmezett kép osztályt a nagy háttér és a kis háttér részhez. Ellenkező esetben semmi sem fog változni.

(function($) ( $(document).ready(function() ( var is_mobile = false; if($(".player").css("display")=="none") ( is_mobile = true; ) if (is_mobile == true) (//Feltételes szkript itt $(".big-background, .big-smaction-backgrounds"-fa). ge"); )else( $(". player").mb_YTPlayer(); ) )); ))(jQuery);

A jQuery beépülő modul megoldása Az alapértelmezett kép beállításának másik módja a device.js jQuery bővítmény (http://matthewhudson.me/projects/device.js/). Ez leegyszerűsíti a feltételek leírását a mobileszközök különböző képernyőméreteihez. Ezzel a beépülő modullal egyszerűen megírhatjuk a következő kódot:

(function($) ( $(document).ready(function() ( //Device.js ellenőrzi, hogy táblagépről vagy mobilról van-e szó - http://matthewhudson.me/projects/device.js/ if (!device.tablet() && !device.mobile()) ( $(.player").mb_YTPlayer(); .small-background -section").addClass("nagy-háttér-alapértelmezett-kép"); ) )); ))(jQuery);

Itt a device.mobile() és device.tablet() metódusokkal ellenőriztem, hogy a felhasználó melyik eszközről van bejelentkezve. Ha a feltétel teljesül, akkor a nagy-háttér-alapértelmezett képosztály hozzáadódik a nagy háttér és a kis háttér-szakasz részekhez. Ellenkező esetben a játékososztály változatlan marad, és a videó lejátszásra kerül.

A Tidying Up Video nagyszerű módja annak, hogy üzenetet közvetítsen a közönséghez. Helyes használat esetén hatékony eszköz lehet webhelye számára.

Biztos vagyok benne, hogy ahogy a webdizájn fejlődik és javul, egyre több kreatív ötlet fog megjelenni a videók weboldaltervezésben való felhasználására. Remélem, tanult valamit ebből az oktatóanyagból. Írja meg gondolatait és megjegyzéseit a megjegyzésekben.

Egy fordítótól. A fordítással kapcsolatos minden kívánságával és észrevételével forduljon hozzám személyesen. Köszönöm!

| 16.04.2015

Az elmúlt évben a webdesignerek egyre gyakrabban kezdtek el eredeti módszert használni a webhelyek felpörgetésére: videót telepítettek oldal háttereként. Egy érdekes cselekmény vagy csak egy „élő” kép a háttérben még egy közönséges névjegykártya-oldalt is díszít, érdekli a felhasználót, és arra ösztönzi őket, hogy hosszabb ideig maradjanak az oldalon. Ma megosztjuk veled a teljes képernyős videóháttér beállításának egyik módját egy webhelyhez HTML5 és CSS használatával.

Ha határozottan meg van győződve arról, hogy videót szeretne beállítani a webhely hátterére, ismernie kell néhány árnyalatot:

Először is emlékeznie kell arra, hogy a videónak meglehetősen nagy súlya van. Ez negatívan befolyásolhatja az oldal betöltési sebességét, különösen, ha a felhasználónak lassú az internetkapcsolata. Ezért olyan videókat válassz, amelyek időben nem túl hosszúak. Abban az esetben, ha egy meglehetősen hosszú videót szeretne használni, készüljön fel arra, hogy vagy a súlycsökkentésen dolgozik, vagy fel kell áldoznia a közönség egy részét.

Másodszor, kerülje a videók automatikus lejátszását. Használjon hang nélküli videókat, vagy adja hozzá azt a lehetőséget, hogy a felhasználó maga kapcsolja be a hangot, ha szüksége van rá. A hang automatikus lejátszása egy webhely megnyitásakor nagyon rossz formának minősül.

Harmadszor, gondoskodnia kell a böngészők közötti kompatibilitásról, valamint a videó megfelelő megjelenítéséről és lejátszásáról az összes eszközön, valamint alternatívát kell biztosítania a videóhoz (olyan esetekben, amikor nem játssza le). Az alábbi példánkban megmutatjuk, hogyan kell ezt megtenni.

Negyedszer pedig alaposan át kell gondolni, hogy megfelelő-e a videotelefon azon a helyen, ahová telepíteni szeretné, hiszen nagyon könnyű átlépni a határvonalat az eredetiség és a haszontalanság között. A videó semmilyen esetben sem vonhatja el a felhasználó figyelmét a fő céljától, amely miatt az oldalra érkezett. Ha videó hátteret állít be a szöveges tartalom alá, ne felejtse el ellenőrizni, mennyire olvasható a szöveg. Például beleolvadhat a háttérbe bizonyos pillanatban videolejátszás (fehér szöveg fehér alapon, fekete feketén stb.).

1.HTML

Példánkban egy 1920 × 1080 felbontású, 15 másodperces időtartamú és valamivel több mint 3 MB tömegű videót készítettünk. A video-bg azonosítójú blokkon belül található a hátterünk:

A címke a következő attribútumokkal rendelkezik:

• szélesség - a videó lejátszási területének szélessége;
• magasság - a terület magassága;
• automatikus lejátszás - automatikus videolejátszás;
• hurok - a videó ciklikus ismétlése;
• A poszter egy kép, amely a videó helyén jelenik meg, miközben az betöltődik, vagy nem érhető el.

Ezután két címkét írtunk, ahol a videó URL-jei különböző formátumokban vannak feltüntetve - MP4 és WEBM. Miért kell egy videót több formátumban elhelyezni? Az a tény, hogy nem minden böngésző támogat egyetlen videóformátumot. Hogy mindenki felismerje a videót modern böngészők, meg kell adnia egy fájlt legalább ebben a két formátumban. A megfelelő értékekkel rendelkező type attribútum pedig segít a böngészőnek a gyorsabb választásban.

2. CSS

Háttérstíluslapunk így néz ki:

#video-bg ( pozíció: rögzített; felül: 0; jobb: 0; lent: 0; bal: 0; túlcsordulás: rejtett; z-index: 1; háttér: url(bg/daisy-stock-poster.jpg) no-repeat #94a233; háttér-méret: borító; ) #video-bg: 0.: balra -magasság: 100%; szélesség: automatikus; magasság: automatikus; ) @támaszok (objektum-illesztés: borító) ( #video-bg > videó (fent: 0; bal: 0; szélesség: 100%; magasság: 100%; objektum-illesztés: borító; ) )

Ahogy a kódból is látszik, a háttér az egész oldalra van beállítva, a kép (ugyanabból a videóból származó képkocka) pedig tartalék háttérként. A legszélsőségesebb esetben a háttérszín #94a233 lesz.

A kódban található egy @supports direktíva is, amely ellenőrzi, hogy a böngésző támogatja-e az objektum-illesztés tulajdonságot. Ha igen, akkor a háttér úgy van beállítva, hogy takarjon, és arányosan jelenik meg a különböző képernyőméreteken.

A caniuse.com szerint az objektum-illesztés tulajdonságot jelenleg minden böngésző támogatja, kivéve internet böngésző, Firefox 31-35, safari 7, iOS Safari 7.1 és Android Browser 4.1-4.4.

Jegyzet.

A Dreamweaver CC és újabb verzióiban a felhasználói felület egyszerűsödött. Emiatt előfordulhat, hogy a cikkben ismertetett szolgáltatások némelyike ​​nem érhető el a Dreamweaver CC és újabb verzióiban. További információért tekintse meg ezt a cikket.

A webes alkalmazásokról

A webalkalmazás olyan webhely, amely részben vagy teljesen nyers tartalommal rendelkező oldalakat tartalmaz. A végső tartalom csak azután jön létre, hogy az oldal látogatója lekéri az oldalt a webszervertől. Tekintettel arra, hogy az oldal végső tartalma a látogató tevékenysége alapján létrehozott kéréstől függ, az ilyen oldalt dinamikusnak nevezzük.

A webalkalmazások felhasználási spektruma igen széles. Ez a rész a webalkalmazások általános használatát ismerteti, és példát mutat egy egyszerű webalkalmazásra.

Webes alkalmazások tipikus alkalmazása

A webes alkalmazások használata bizonyos előnyökkel jár mind a weboldal látogatói, mind a weboldal fejlesztői számára.

A webes alkalmazások lehetővé teszik a látogatók számára, hogy gyorsan és egyszerűen megtalálják a szükséges információkat az információban gazdag webhelyeken.

Ez a fajta webalkalmazás lehetővé teszi a tartalom keresését, a tartalom rendszerezését és a látogatók számára kényelmes módon történő navigálást. Ilyen alkalmazások például a vállalatok belső hálózatai – a Microsoft MSDN (www.msdn.microsoft.com) és az Amazon.com (www.amazon.com).

A webes alkalmazások lehetővé teszik a webhely látogatóitól kapott adatok gyűjtését, tárolását és elemzését.

Sokáig az volt a módszer, hogy a HTML-űrlapokba bevitt adatokat e-mail üzenetek formájában küldték el feldolgozásra a CGI-alkalmazások vagy a kijelölt dolgozók által. A webalkalmazás lehetővé teszi az adatok közvetlen adatbázisban történő tárolását, valamint adatok fogadását és a beérkezett adatok alapján elemzések készítését. Ilyenek például az interaktív banki oldalak, a készletellenőrző oldalak, az esettanulmányok és felmérések, valamint az ehhez szükséges űrlapok Visszacsatolás felhasználókkal.

A webalkalmazás segítségével frissíthetők az időszakosan változó tartalommal rendelkező webhelyek.

A webalkalmazás megszabadítja a webdesignert az oldal HTML oldalainak folyamatos frissítésének rutinmunkájától. A tartalomszolgáltatók, például a hírszerkesztők felelősek a friss tartalomért, míg a webalkalmazás figyeli automatikus frissítés webhely. Ilyen például a The Economist webes verziója (www.economist.com) és a CNN hírszolgálata (www.cnn.com).

Minta webalkalmazás

Svetlana webdesignerként dolgozik és már hosszú ideje munkájában a Dreamweavert használja. Feladatai közé tartozik egy körülbelül 1000 főt foglalkoztató középvállalat belső vállalati weboldalának és internetes oldalának karbantartása. Egy napon a személyzeti osztály egyik alkalmazottja, Szergej fordult hozzá problémájával. Az Emberi Erőforrás Osztály felügyeli az alkalmazottak wellness-programját. A program részeként a munkavállalók minden gyaloglással, futással vagy kerékpárral megtett kilométerért külön pontokat kapnak. A hónap végén minden alkalmazott e-mailben jelentést küld Szergejnek, amelyben feltünteti a kilométerek teljes számát. Ezt követően Szergej a kapott adatok alapján elektronikus üzenetek a megszerzett pontok függvényében kis pénzjutalomban részesíti a dolgozókat.

A probléma az, hogy a wellness program nagyon népszerűvé vált. BAN BEN Ebben a pillanatban a program résztvevőinek száma olyan mértékben megnőtt, hogy a hónap végén Szergejnek nem volt ideje feldolgozni az összes email. Ezért Svetlanához fordult azzal a kérdéssel, hogy a probléma webes technológiák segítségével megoldható-e.

Erre válaszul Svetlana egy webalkalmazás létrehozását javasolta, amely a következő feladatokat oldja meg.

Az alkalmazottak egy egyszerű HTML űrlapba írják be a sporteredményeik adatait.

A kapott adatokat az adatbázisban tároljuk.

A kapott adatok alapján pontokat adunk.

Minden alkalmazott kaphat adatokat az eredményeiről.

Minden hónap végén Szergejnek lehetősége van megszerezni az összes végső eredményt.

Svetlana a lehető legrövidebb időn belül létrehozta és elindította a szükséges alkalmazást, mivel a Dreamweaverben minden megtalálható szükséges eszközöket a gyors és egyszerű alkotás ilyen jellegű alkalmazások.

Bármely webalkalmazás statikus és dinamikus weboldalak halmaza. Statikus weboldal- ez egy olyan oldal, amely mindig változatlan formában jelenik meg a felhasználó előtt. A webszerver változtatás nélkül elküldi az oldalt a böngésző kérésének megfelelően. Ezzel szemben a szerver módosítja a dinamikus weboldal mielőtt elküldi a böngészőnek. Mivel az oldal változik, dinamikusnak nevezik.

Például létrehozhat egy oldalt, amely egy wellness program eredményeit jeleníti meg. Ebben az esetben bizonyos információk (például a munkavállaló neve és eredményei) meghatározásra kerülnek, amikor az oldalt a munkavállaló kéri.

A következő rész részletesebben tárgyalja a webalkalmazások működését.

Statikus weboldalak kezelése

A statikus webhely kapcsolódó HTML-oldalak és fájlok készletét tartalmazza azon a számítógépen, amelyen a webszerver telepítve van.

A webszerver az szoftver A, amely weboldalakat biztosít a webböngészőktől érkező kérésekre. Az oldalkérelem általában akkor jön létre, amikor rákattint egy hivatkozásra egy weboldalon, kiválaszt egy könyvjelzőt a böngészőben, vagy beír egy URL-t a címsor böngésző.

A statikus weboldal végső tartalmát a fejlesztő határozza meg, és az változatlan marad az oldalkérési folyamat során. Példa:

A Trio Motors információs oldala a Trio Motorsról

Az összes HTML-kódot a fejlesztő hozza létre, mielőtt az oldalt a szerveren tárolná. Mivel a HTML-kód nem változik, miután az oldal felkerült a szerverre, ezt az oldalt statikusnak nevezzük.

Jegyzet.

Szigorúan véve egy „statikus” oldal nem biztos, hogy az. Például egy helyőrző kép vagy Flash-tartalom (SWF-fájl formájában) életre kelthet egy statikus oldalt. Ebben az összefüggésben azonban az oldal statikus, mivel változatlan formában kerül a böngészőbe.

Amikor egy webszerver egy statikus oldal kiszolgálására irányuló kérést kap, a kérés elemzése után a szerver megtalálja a kívánt oldalt, és elküldi a böngészőnek, az alábbiak szerint.

V. A webböngésző statikus oldalt kér. B. A webszerver megtalálja az oldalt. C. A webszerver elküldi az oldalt annak a böngészőnek, amelyik kérte.

Webes alkalmazások esetén az oldal kódjának egyes részei hiányoznak mindaddig, amíg egy látogató nem kéri az oldalt. A hiányzó kódot valamilyen mechanizmus generálja, és csak ezután kerülhet az oldal a böngészőbe. Ezt a kódgeneráló mechanizmust a következő részben tárgyaljuk.

Amikor egy webszerver statikus weboldalra vonatkozó kérést kap, az oldalt közvetlenül a böngészőnek küldi el. Ha azonban dinamikus oldalt kérünk, a webszerver műveletei nem ilyen egyszerűek. A szerver elküldi az oldalt speciális program, amely az utolsó oldalt képezi. Az ilyen programot alkalmazásszervernek nevezzük.

Az alkalmazásszerver beolvassa az oldalon található kódot, az olvasott kód alapján rendereli az utolsó oldalt, majd eltávolítja az oldalról. Mindezen műveletek eredményeként egy statikus oldal jön létre, amelyet továbbít a webszervernek, amely elküldi azt a kliens böngészőjének. A böngésző által fogadott összes oldal csak HTML kódot tartalmaz. A folyamat sematikus ábrázolása:

A.B.C. Az alkalmazásszerver utasításokat keres az oldalon, és végrehajtja annak létrehozását. D. Az alkalmazásszerver visszaküldi a megjelenített oldalt a webszervernek. E.

A tartalom adatbázisban való tárolása elválasztja a webhely megjelenését és hangulatát a felhasználók által látott tartalomtól. Ahelyett, hogy az összes oldalt külön HTML-fájlként hozná létre, csak oldalsablonokat írnak az egyes megjelenítendő információkhoz. A tartalom ezután betöltődik az adatbázisba, majd a webhely lekéri, amikor a felhasználók kérik. Ezenkívül frissítheti az információkat egy forrásból, és replikálhatja a változásokat a teljes webhelyen anélkül, hogy minden oldalt manuálisan szerkesztene. Az Adobe Dreamweaver lehetővé teszi webes űrlapok létrehozását az adatok adatbázisba történő beillesztéséhez, frissítéséhez és törléséhez.

Az adatok adatbázisból való lekérésére szolgáló programutasítás meghívásra kerül adatbázis lekérdezés. A lekérdezés az SQL (Structured Query Language) nevű adatbázisnyelv használatával kifejezett keresési feltételekből áll. Az SQL lekérdezés szövege oldalszkriptekben vagy címkékben található a szerver oldalon.

Az alkalmazásszerver nem tud közvetlenül lekérni adatokat az adatbázisból, mert az adatbázisok meghatározott formátumokat használnak az adatok tárolására, aminek következtében az ilyen adatok megszerzésére irányuló kísérlet egy dokumentum megnyitására fog hasonlítani. Microsoft Word használva szöveg szerkesztő Jegyzettömb vagy BBEdit. Ezért az alkalmazáskiszolgáló egy közvetítőt, az adatbázis-illesztőprogramot használ az adatbázishoz való csatlakozáshoz. Az adatbázis-illesztőprogram egy szoftvermodul, amely kommunikációt hoz létre az alkalmazáskiszolgáló és az adatbázis között.

Miután az illesztőprogram kapcsolatot létesített, lekérdezés történik az adatbázisban, melynek eredményeként létrejön egy rekordkészlet. Rekordkészlet egy vagy több adatbázistáblából visszakeresett adatok halmaza. A rekordkészlet visszakerül az alkalmazásszerverhez, amely a kapott adatokat használja az oldal létrehozásához.

A következő példa egy egyszerű SQL adatbázis-lekérdezésre.

SELECT vezetéknév, keresztnév, fitpoints FROM alkalmazottaktól

A következő példa bemutatja az adatbázis lekérdezésének folyamatát, és az eredményül kapott adatokat visszaküldi a böngészőnek.

V. A webböngésző dinamikus oldalt kér. B. A webszerver megtalálja az oldalt, és továbbítja az alkalmazásszervernek. C. Az alkalmazásszerver megnézi az oldalt utasításokért, és előkészíti azt. D. Az alkalmazásszerver kérést küld az adatbázis-illesztőprogramnak. E. Az illesztőprogram lekérdezést hajt végre az adatbázisban. F. Egy rekordkészlet visszakerül a vezetőnek. G. Az illesztőprogram átadja a rekordkészletet az alkalmazáskiszolgálónak. H. Az alkalmazásszerver beilleszti az adatokat az oldalba, és továbbítja az oldalt a webszervernek. I. A webszerver elküldi a megjelenített oldalt annak a böngészőnek, amelyik kérte.

Bármely adatbázis alkalmas webalkalmazásban való használatra, amennyiben a megfelelő adatbázis-illesztőprogram telepítve van a szerveren.

Alacsony költségvetésű alkalmazások létrehozásához használhat fájl alapú adatbázist, például egy olyan adatbázist, amelyet azzal készítettek Microsoft Access. Ha megbízható vállalati alkalmazások létrehozását tervezi, akkor ajánlott háttéradatbázist használni, például Microsoft szervereken. SQL szerver, Oracle 9i vagy MySQL.

Ha az adatbázis és a webszerver a különböző számítógépek, nagy sebességű kapcsolatot kell biztosítania a rendszerek között, hiszen ezen múlik az egész webalkalmazás hatékonysága és sebessége.

Dinamikus oldalak fejlesztése

A dinamikus oldalak fejlesztésének folyamata alapvető HTML-kód írásából, majd szerveroldali szkriptek vagy HTML-oldalcímkék létrehozásából áll, amelyek dinamikussá teszik az oldalt. A végső kódot nézve láthatja, hogy a szkriptnyelv be van ágyazva az oldal HTML-kódjába. Ennek megfelelően az ilyen szkriptnyelveket HTML-beágyazott nyelveknek nevezik. A következő példa a ColdFusion Markup Language (CFML) nyelvet használja.

Jegyzet. A Dreamweaver CC és újabb verziói nem támogatják a CFML-t.

A Trio Motors információs oldala a Trio Motorsról

A Trio Motors vezető autógyártó.

Feltétlenül látogassa meg #részleg# oldalunkat.

Az ezen az oldalon beágyazott utasítások a következőket teszik:

A névvel egy változó jön létre osztály, amely után hozzá van rendelve a "Sales" karakterlánc érték.

A „Sales” érték a HTML-kódban kerül elhelyezésre.

Az alkalmazásszerver a következő oldalt adja vissza a webszervernek:

A Trio Motors információs oldala a Trio Motorsról

A Trio Motors vezető autógyártó.

Feltétlenül látogassa meg értékesítési oldalunkat.

A webszerver elküldi az oldalt a böngészőnek, amely az alábbiak szerint jeleníti meg.

A Trio Motorsról

A Trio Motors az egyik vezető autógyártó.

Ne felejtse el ellátogatni értékesítési oldalunkra.

A szkriptnyelv vagy a címkealapú nyelv kiválasztása a használt szervertechnológiától függ. Az alábbiakban felsoroljuk a leggyakrabban használt nyelveket szerver technológiák a Dreamweaver támogatásával.

Szerver technológia

	ColdFusion Markup Language (CFML)
ASP oldalak

A Dreamweaver generálhatja a szerver szkripteket vagy a szükséges címkéket az oldalakhoz, vagy a fejlesztő megírhatja a szükséges kódot a Dreamweaver kódoló környezet segítségével.

Webalkalmazás terminológia

Ez a rész a webalkalmazásokkal kapcsolatos, gyakran használt kifejezések definícióit tartalmazza.

Alkalmazások szervere

Szoftver, amelyet egy webszerver használ szerveroldali szkripteket vagy címkéket tartalmazó weboldalak feldolgozására. Amikor ilyen oldalakat kérnek, a webszerver először továbbítja azokat az alkalmazásszervernek feldolgozásra, majd elküldi az ügyfélböngészőnek. További információkért lásd: Hogyan működnek a webalkalmazások.

A leggyakoribb alkalmazásszerverek támogatják a ColdFusiont és a PHP-t.

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ármelyik alkalmazott gond nélkül elvégezheti a telepítést, még a takarító Mása néni, takarítási szakember is.

Mindenekelőtt azokra a kisvállalkozásokra összpontosítottunk, amelyek aktívan használják a Zadarma PBX-et ​​és az 1C: Small Business Management 1.6 konfigurációt.

Ahogy azelőtt volt

A Zadarmával való integrációhoz egy speciális 1C-be épített tárcsázót kellett használni - az úgynevezett SIP hátteret. Ez a lehetőség megfelelő volt, több "ha"-val:

• ha 1C-re van állítva helyi számítógép, nem valahol a terminálkiszolgálón
• 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ért, akkor lehetséges volt az integráció.

Hogy lett ez most

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
• 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. Csak mutass 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" - "A kezdeti oldal beállítása" menü jelölését.

Könnyű beállítás

API-kulcsok beszerzése innen személyes fiók Zadarma

és helyezze be őket az 1C-be

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

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

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

Bárhol látjuk a „telefon” ikont, rákattinthat, és a Zadarma elkezd tárcsázni.

Részletek A "Kapcsolatfelvétel" számos dokumentumlistában, telefonkönyvben megtalálható - többé nem kell az ügyfélkártyához futnia a híváshoz. Például közvetlenül hívhat a rendelések, számlák, költségek listájából

ügyfélkártya címen Bejövő hívás

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 messze nem mindig van rá igény, ezért a Telephony Panel beállításaiban kikapcsolható.

Hívás regisztrálása eseménydokumentummal

Hasonlóképpen kezelheti a szükségletet automatikus létrehozás dokumentum "Esemény- Telefon hívás". Ennek a dokumentumnak a segítségével kényelmes megjegyzéseket tenni a felhíváshoz.

És ami a legfontosabb, 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álására szolgáló bővítmény számos lehetőséget kínál a történelemmel való munkavégzéshez.

Például egy felhasználó saját maga szeretné megtekinteni az előzményeket. Hasonló a legutóbbi hívások listájához mobiltelefon. Ez az előzmény a kezdőlap "Előzmények" fülének megnyitásával tekinthető meg.

Nagyon gyakran szeretné látni egy adott ügyfél, kapcsolattartó, ill egy egyénnek. Ügyfél esetén látnunk kell mind magának a partnernek a számát, mind az összes kapcsolattartóját.

Az ügyfél által kiválasztott hívások előzményei közvetlenül a kártyáján tekinthetők 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.