Web widgeti. Widget i njegove funkcije. Okruženje podrške na jednom mjestu

Aktivni korisnici interneta, računala i mobilnih uređaja često postavljaju pitanje: "Što su widgeti?" Mnogi se s njima, i ne znajući, susreću više puta dnevno. Kada posjećujete web stranice, često možete vidjeti male blokove na monitoru vašeg računala koji sadrže informacije o vremenu, tečaju i još mnogo toga. Slične mini-aplikacije mogu se instalirati na zaslone različitih uređaja.

Što mislite pod widgetima?

Koncept "widget" se u mnogim slučajevima pogrešno koristi: odnosi se na obične bočne trake na web resursima. Dok se programi koji pripadaju kategoriji widgeta nazivaju gadgeti ili nekako drugačije. I jedno i drugo izaziva zabunu. Iako riječ "widget" zvuči moderno, prvi put je korištena davne 1926. godine. U početku je doista bio sinonim za gadget i označavao je neku vrstu uređaja, ali danas se više ne povezuje ni s jednim uređajem.

Što je widget u modernom smislu?

Danas se ova riječ odnosi na određenu kategoriju pomoćnih aplikacija koje su male veličine i imaju mali skup funkcija. Djeluju kao grafički moduli i smješteni su u radnom području glavnih programa: preglednika, operativnih sustava, tražilica itd. Mogu se koristiti za rješavanje svakodnevnih problema, pružanje brz pristup do korisnih informacija, biti zabavni ili jednostavno ukrasiti zaslon. Neki widgeti rade samo kada je spojen na internet, dok drugi rade izvan mreže.

Glavne vrste widgeta

Opisane aplikacije mogu biti dizajnirane za desktop (desktop widgeti) ili za internet stranice (web widgeti). Zahvaljujući mogućnosti korištenja widgeta u internetskim preglednicima i izravno u operativnim sustavima, izgledi za njihovu implementaciju u svakodnevnom životu programera i obični korisnici. Programer može postaviti vizualne aplikacije na stranice resursa. I korisnik mora komunicirati s njima. Osim grafičkih, postoje jednostavni tekstualni widgeti koji su čisto informativni.

Kakva aplikacija izgleda?

Widget može imati različite oblike:

• Yandex vam omogućuje instaliranje aplikacija koje prikazuju sat, feed vijesti, prometne informacije i traku za pretraživanje. Podržavaju ih popularni operativni sustavi i preglednici.
• U prethodne verzije Windows widgeti nalaze se na radnoj površini, au "osam" postoji posebna zona za njih. Mogu postojati satovi, kalendari, mini igrice, poveznice na vijesti ili resursi prilagođeni korisniku.
• Neki Apple OS-ovi imaju zaseban sloj za widgete, koji se naziva nadzorna ploča. Postaje vidljiv kada pritisnete F12.
• Preglednik Opera prešao je dug put: widgeti koji se temelje na njemu postavljaju se na radnu površinu i funkcioniraju na bilo kojem uređaju opremljenom stolnim ili mobilnim preglednikom ovog programera.

Saznajte više o widgetima za radnu površinu

Mini-aplikacija koja se može pokrenuti s glavnog zaslona na određenom operativna platforma, a naziva se widget za radnu površinu. Mogu se instalirati iz raznih izvora: nalaze se u posebnom odjeljku unaprijed instalirane aplikacije ili preuzeti s mreže. Često se widgeti mogu pomicati po zaslonu, njihova veličina se može prilagoditi, a dizajn im se može promijeniti. Na primjer, u "sedam" i nekim drugim sustavima postoji widget za sat: postavlja se na radnu površinu jednim klikom i prikazuje vrijeme sustava. Aplikacija vremenske prognoze na bilo kojem sustavu ispravno će raditi samo kada je mreža povezana. Što je widget u smislu funkcionalnosti? U većini slučajeva služi za brzo primanje informacija bez otvaranja preglednika ili nekog odjeljka na računalu, ali se može predstaviti i mini igrom.

Značajke web widgeta

Mini-aplikacija koja je ugrađena u web stranicu naziva se web widget. To može biti prozor koji vodi do druge usluge: u ovom slučaju će se učitati područje widgeta zasebna stranica. Tako se maksimalna funkcionalnost postiže unutar jedne web stranice kombiniranjem nekoliko opcija, pa čak i različitih resursa. Web widgeti se često nazivaju gadgetima, moduli, isječci, a proširenja preglednika ponekad su uključena u njihovu kategoriju.

Što su web widgeti?

Mini-aplikacije preglednika podijeljene su u dvije skupine:

1. Interaktivan - omogućuje vam interakciju sa samim sobom, na primjer, unos informacija o željenoj ruti na karti ili slanje kratke poruke.
2. Neinteraktivni (informatori) - sadrže sadržaj koji se prikazuje bez obzira na aktivnost korisnika. U obliku takvog widgeta, na primjer, informacije o trenutne stope valute

Instaliranje widgeta preglednika

Instalacija grafičke aplikacije u pravilu nije problem i može se izvršiti u nekoliko klikova. Ovaj proces otprilike izgleda ovako (na primjeru Opera widgeta):

1. Preuzmite i instalirajte preglednik koji podržava widgete. To može biti Opera, počevši od verzije 9 beta, ili neki od modernih alternativnih internetskih preglednika.
2. Preglednik se pokreće, pritiskom na F4 otvara se pristupna ploča za widgete, oznake i bilješke. Ova značajka olakšava upravljanje mini-aplikacijama.
3. Klikom na Widgets učitava se popis widgeta dostupnih za instalaciju.
4. Klikom na Dodaj otvara se popis dostupnih aplikacija s opisima i ilustracijama.
5. Nakon što ste odabrali widget koji vam se sviđa, trebate ga dodati i pričekati nekoliko sekundi dok instalacija ne završi.

Korisni widgeti za Chrome

U Chrome preglednik Widgeti se često povezuju s proširenjima jer se njihovi gumbi za pristup nalaze na alatnoj traci i mogu se koristiti tijekom pregledavanja bilo koje stranice. Primjeri korisnih proširenja:

• Chrome Nanny - pomaže u borbi protiv izgubljenog vremena na internetu. Postavke vam omogućuju da zabranite pristup određenim stranicama tijekom radnog vremena, ograničite svoj boravak na VKontakteu na 15-20 minuta itd.
• Zoomy - optimizira tekst za zaslon korisnika, rastežući ga na potrebnu udaljenost.
• Torrent Turbo Search - pomaže vam u traženju potrebnih materijala na uslugama za hosting datoteka iu torrent direktorijima. Pokriva mnoge resurse, uključujući The Pirate Bay. Postoji opcija koja vam omogućuje pretraživanje samo na resursima na ruskom jeziku.
• iReader - jednim pritiskom na gumb otvara novi prozor koji sadrži samo tekst s učitane stranice. Oglašavanje i drugi detalji koji odvlače pozornost potpuno su odsutni.
• Loomnit - omogućuje dijeljenje poveznica, tekstova, slika i datoteka bez napuštanja preglednika. Jednim klikom otvara se prozor u koji se dodaje odabrani sadržaj, a drugim klikom daje se kratka poveznica za dijeljenje.

Razvijanje vlastitih widgeta

Što je widget sa stajališta programera? Ovaj normalna primjena, koji je napisan u HTML-u, JavaScriptu ili naprednijem JavaScript API-ju koji vam omogućuje upravljanje i spremanje parametara. Widget se može napisati na bilo kojem od poslužiteljskih jezika koji proizvode HTML (na primjer, PHP jezik). Programeri klasificiraju ove aplikacije na svoj način, razlikuju ih kao samostalne i temeljene na poslužitelju. Prva kategorija uključuje postavljanje aplikacije u jednu XHTML datoteku, dok se dopušta korištenje stilova i skripti iz izvora trećih strana. Druga skupina uključuje widgete čija su tijela u potpunosti učitana iz izvora trećih strana. Odjeljak widgeta poslužitelja je prazan; umjesto toga, adresa s koje dolazi do preuzimanja zapisana je u svojstvu src. Widget se može izraditi od nule ili možete koristiti poseban predložak (konstruktor).

Mnogi vlasnici na njega instaliraju razne informatore ili widgete trećih strana kako bi poboljšali svoje web mjesto. Informator je “informator” koji je dizajniran da posjetitelju prenese dodatne informacije.

U pravilu, svi CMS-ovi omogućuju postavljanje informatora na vašu web stranicu.

Informatori su mali gumbi ili blokovi koji se automatski ažuriraju, čiji kod instalirate na svoju web stranicu. Grafičke mogućnosti informatora omogućuju vam da ga prilagodite u skladu sa stilom vašeg izvora.

Obično se informatori daju besplatno u zamjenu za instaliranje povratne veze. Link je dio informatora.

Informatori na stranici obavljaju dvije glavne funkcije. Prvo, omogućuju vam diverzifikaciju tekstualnog sadržaja stranice, postaje dinamičnija i praktičnija. Druga funkcija je da se na mnogim web-mjestima informacije ažuriraju vrlo rijetko, a widgeti će se automatski ažurirati, pružajući posjetitelju web-mjesta svježu, korisna informacija to bi ga moglo zanimati.
Da biste instalirali informator na web-resurs, morate ga odabrati iz pouzdanog izvora, konfigurirati prema svojim zahtjevima i dizajnu web-mjesta, spremiti predloženi html kod i zalijepiti ga na stranicu web-mjesta.

Pravila za instaliranje informatora:

Poželjno je da se informator podudara s temom stranice i da je nadopunjuje, a ne da "ometa". Na primjer, ako prodajete uvoznu robu, bilo bi prikladno postaviti informator o "tečaju", a ako ste turističko središte ili hotel, informator o vremenu na web mjestu ne bi škodio.

Vjerujte samo pouzdanim izvorima doušnika, jer doušnici iz neprovjerenih izvora mogu sadržavati viruse.

Nemojte preopteretiti svoje web mjesto informatorima - postoji opasnost od odvraćanja pozornosti posjetitelja i odvraćanja od glavnih informacija. Preobilje informatora može usporiti učitavanje glavnog sadržaja.

Vrste doušnika:

Teme widgeta su vrlo raznolike: brojač posjetitelja stranice, datum i vrijeme, internetski savjetnik, prometne gužve, izvori vijesti, programski vodiči, widget tečaja, vremenska prognoza, itd. Prilikom odabira widgeta s informacijama za svoj web resurs, imajte na umu da , može utjecati na popularnost vaše stranice među određenim posjetiteljima koje će te informacije zanimati.

Tečajni informatori i widgeti

Informator o tečaju bit će koristan tvrtkama čije su cijene usluga ili robe vezane uz tečaj. Takvi widgeti mogu pružiti informacije o kotacijama na burzama i fluktuacijama cijena. Valutni informatori mogu se dobiti od investing.com, ExDex ili forex-informers.

Vremenski informatori i widgeti

Informator o vremenskoj prognozi trebaju na web stranici postaviti tvrtke koje pružaju usluge turizma, ribolova, lova i smještaja gostiju, kao što su kampovi, pansioni i hoteli. Možda će takvi informatori biti prikladni i za trgovine koje prodaju sezonske artikle, poput opreme za zimske sportove. Možete koristiti usluge Gismeteo ili Yandex.Weather. Gismeteo. Detaljni su i kratki. Daju informacije o trenutnom vremenu i prognozi za nekoliko dana.

Informatori i widgeti za vijesti

Informator vijesti na stranici bit će koristan za tematske stranice, iako biste trebali objavljivati ​​samo feedove vijesti o istim ili sličnim temama kao vaša stranica. Gotovo svi widgeti za vijesti omogućuju vam objavljivanje vijesti određenih kategorija: politika, financije, kultura, sport itd. Lako možete pronaći informator vijesti koji odgovara temi vaše stranice. Na primjer, Yandex.News ili New2world.

Informer Yandex.Rasporedi

Informatori i widgeti kalendara

Kalendarski informator za web mjesto bit će prikladan za posjetitelje web mjesta ako trebaju vidjeti neke datume, na primjer, početak turneje, ekskurzije ili početak/kraj prihvaćanja bilo kakvih dokumenata. Vrlo povoljno servis kalendara predlaže Google. opisuju upute za postavljanje informatora kalendara na stranicu.Također postoje sljedeće usluge: chasikov.net.ru, calendar.yuretz.ru.

Informatori brojača posjećenosti

Brojači posjećenosti također imaju informatore, oni odražavaju podatke o posjećenosti stranice, obično se nalaze u bočnim stupcima stranice ili u podnožju.

Najčešće se instaliraju za potencijalne oglašivače kako bi mogli vidjeti podatke o broju posjetitelja stranice i pregledima stranica. Widgeti indikatora TIC i PR također su uobičajeni, koji obavještavaju o popularnosti i citiranosti izvora. Vrijedno je razumjeti da će ih, otvaranjem ovih podataka svima, vidjeti i vaši konkurenti.

Informeri i widgeti za društvene mreže

Widgeti društvene grupe i zajednice govore posjetiteljima stranice da imate zajednicu i da s posjetiteljima komunicirate putem društvenih mreža, to može biti korisno i za posao, jer ako posjetitelj među članovima grupe vidi svoje prijatelje, njegovo povjerenje u vašu stranicu i tvrtku će se povećati, a bit će spremniji postati vaš klijent.

Ponekad je potrebno procijeniti i saznati stav posjetitelja vaše web stranice prema određenoj temi, saznati opće mišljenje čitatelja ili jednostavno trebate savjet o nečemu. Sve to možete doznati kroz anketu koju jednostavno možete postaviti na svoju stranicu. Ankete se koriste ne samo kao izvor podataka o mišljenjima posjetitelja, već imaju i važnu ulogu u povećanju razine interakcije, što pozitivno utječe na čitatelje omogućujući im da izraze svoje mišljenje.

Anketu možete jednostavno postaviti na stranicu uz malo programerskog znanja i korištenjem dostupnih servisa koji vam u današnje vrijeme omogućuju izradu anketa u željenom stilu koji odgovara cjelokupnom izgledu vaše stranice. U ovom smo članku prikupili 10 online usluga koje će vam pomoći u izradi i integraciji besplatnih anketa na vašu web stranicu ili blog.

Pomoću Pollcode Možete izraditi vlastite ankete čak i bez registracije, ali ako trebate neke od posebnih značajki ankete, postupak registracije neće trajati više od nekoliko sekundi. Usluga vam omogućuje uređivanje izgleda (možete odabrati željeni font, boje i dizajn) tako da odgovara predlošku vaše web stranice.
Usluga je potpuno besplatna za korištenje, no uvjet korištenja je da se u rezultatima vaše ankete prikazuju reklame (vidljive tek nakon što netko glasa ili pogleda rezultate ankete). Na samoj web stranici neće biti objavljen niti jedan oglas, samo poveznica na Pollcode.com.

ProProfs predstavlja mogućnost izrade jednostavnih upitnika. Besplatna verzija omogućuje kreiranje beskonačnog broja anketa, ali će se nakon 7 dana na njima pojaviti oglasi. Pomoću ove usluge, možete jednostavno kreirati i uređivati ​​ankete, kao i ispuniti ih jedinstvenim značajkama. Ove značajke pomoći će vam da izbjegnete prijevaru s ocjenama (provjera se čak može napraviti na temelju određivanja geografske lokacije svakog glasača), a također ćete imati priliku objavljivati ​​slike ili videodatoteke te integrirati anketu s MySpaceom, Facebookom i drugim društvenim mrežama mreže.

Snap anketa nudi mogućnost jednostavnog i brzo stvaranje anketama. Na instalaciju nećete potrošiti više od nekoliko minuta. Imate mogućnost uređivanja boje, izgleda i izgleda ankete kako bi odgovarala predlošku vaše web stranice. Ne morate se registrirati niti davati bilo kakve financijske priloge - aplikacija je potpuno besplatna. Jedini aspekt dvosmjernog sporazuma je da nećete pokušavati izbjeći prikazivanje reklama.

Besplatna (potrebna povratna veza) usluga Modpoll već je korišten za izradu upitnika na stranicama kao što su marieclaire.com, facebook.com, huffingtonpost.com, ning.com i blogger.com. Možete izraditi onoliko anketa koliko vam je potrebno, a zatim ih dodati na svoj blog ili stranice na vlastitoj web stranici. Također je moguće objaviti anketu u popularnom u društvenim mrežama kao što su Twitter, Facebook, MySpace, FriendFeed, Digg, Gmail, AOL Mail, Yahoo Mail, Hotmail, Blogger, Tumblr, TypePad, LiveJournal, AIM, Yahoo Messenger i mnogi drugi.

MicroPoll pruža najjednostavniju priliku za izradu online anketa. Korištenje ultra-jednostavnih alata ovu aplikaciju, možete jednostavno dizajnirati svoju anketu točno onako kako želite. Moguće je izraditi anketu s radio gumbima, potvrdnim okvirima ili padajućim izbornicima, a postoji i veliki izbor unaprijed pripremljene teme dizajna.

Pomoću Vizu, korisnici mogu izraditi ankete u samo nekoliko minuta. Alat vam omogućuje praćenje trenutnog statusa ankete, primanje obavijesti putem E-mail, a korisnici mogu ostaviti i komentare izravno u anketi.
Usluga je potpuno besplatna, ali sve što trebate učiniti je postaviti vezu natrag na Vizu.

BlogPolls omogućuje korisnicima da dizajniraju ankete na temelju izgled relevantne za njihovu web stranicu. Usluga je besplatna, ali morate postaviti poveznicu natrag na BlogPolls.

QuestionForm predstavlja moćan alat o izradi anketa sa sučeljem sličnim desktopu. Pitanja možete jednostavno povući i ispustiti da biste ih izradili ili uredili. Usluga također nudi mnoge različite funkcije, kao što su: praćenje ponovljenih odgovora putem kolačića, obavijesti u stvarnom vremenu, izvoz podataka u Microsoft Excel, XML ili bilo koja druga vrsta dokumenta (CSV ili TSV).
QuestionForm se plaća, ali imate mogućnost izrade dvije besplatne ankete.

09.
PollDaddy je vjerojatno najmoćniji i najprofesionalniji servis za izradu anketa predstavljen u našem izboru. Usluga za izradu online anketa prikuplja sve vaše podatke i pretvara ih u potpuni sustav izvješćivanja, omogućujući vam da izradite promišljeniju anketu. Također možete koristiti prilagođeni predlošci dizajn i CSS, mijenjanje jezika, izvoz podataka u XML, CSV i primanje rezultata putem e-maila ili RSS-a, a možete birati između 11 vrsta pitanja.
PollDaddy također plaćena usluga s besplatnim opcijama, uključujući mogućnost izrade anketa s 10 opcija odgovora, 100 glasova po anketi i povratnom vezom na PollDaddy.

Jednostavno je! U manje od 5 minuta možete ažurirati svoje web mjesto ili blog interaktivnim satom, čineći ga živahnijim i lakšim za korištenje

Zašto generator widgeta za sat s web stranice?

1. Naši html5 widgeti ne usporavaju vaše web stranice
2. Prijateljski su raspoloženi prema Mobilni uredaji
3. Naš prekrasni sat uopće ne koristi FLASH, što znači da vaša web stranica ili blog neće dobiti kaznene bodove od Googlea
4. Možete jednostavno postaviti do 10 widgeta u nizu na stranici.

Pitanja

Mogu li objaviti više od jednog sata na svojoj stranici/siteu? Da, možete postaviti koliko god želite satova na stranicu ili web mjesto. Mogu li promijeniti kod widgeta? Općenito, ne dopuštamo izmjene koda koji pružamo. Sat možda neće raditi ispravno ako se naprave promjene, stoga vam savjetujemo da jednostavno zalijepite kod "kakav jest". No, ako ste upoznati s html - možete promijeniti sljedeće: boju, veličinu, poravnanje i označavanje teksta, napraviti male izmjene u tekstu digitalni sat. Ostale izmjene, posebice uklanjanje hiperveza, nisu dopuštene. Vaša kopija sata može biti blokirana u bilo kojem trenutku nakon što su napravljene promjene. Grad za koji trebam sat koristi ljetno računanje vremena. Hoće li sat pokazivati ​​točno vrijeme nakon prelaska na zimsko računanje vremena? Da naravno! Naši satovi uzimaju u obzir promjene povezane s ljetnim/zimskim prijelazom vremena diljem svijeta!

21. svibnja , 2016

Svaki put kada se povežete na svojim stranicama gotovo rješenje od usluga kao što su disqus ili google analytics, iznenađen sam lakoćom integracije prilično složene funkcionalnosti. Stavio sam 3 retka javascript koda u kod - i već imate blok s komentarima. Još 2 retka - i dostupna je analitika s Googlea ili Yandexa. Naravno, ne događa se nikakva magija, izvlače se te iste 3 linije koda udaljeni poslužitelj svi potreban kod, i u biti postavite malu web aplikaciju na stranice svoje web stranice. Ali kako to funkcionira iznutra i kako to možete učiniti sami? Bilo je vrlo zanimljivo ovo shvatiti, i na kraju sam dobio mali widget koji radi točno prema ovoj jednostavnoj shemi ugrađivanja, a istovremeno radi neke korisne stvari. Daljni detalji.

Zašto su nam potrebni widgeti?

Iframe su vrlo prikladni za ovu svrhu. To su zapravo zasebne html stranice koje su ugrađene u druge stranice bez pristupa svom "roditelju". Odnosno, našu web aplikaciju možemo ugraditi u iframe, koja će tiho raditi svoj posao bez ometanja glavne stranice. A što će točno vaš widget učiniti, izgraditi sustav komentara na stranici, pokazati cool igračku ili nacrtati interaktivni reklamni banner - potpuno je stvar vašeg ukusa i mašte.

U ovom se članku nećemo fokusirati na igračku, već ćemo pogledati kako izraditi ugrađeni widget za određivanje vremena. Naravno, postoji mnogo različitih vremenskih usluga za to, ali mi nismo zainteresirani za korištenje gotovog rješenja. Želio bih izraditi jednostavan widget vlastitim rukama kako bih razumio kako općenito funkcionira i u budućnosti primijenio znanje za neke korisne stvari. Istodobno, usput ćemo osvježiti svoje znanje o izvornom javascriptu i php-u.

Što nam je činiti?

Napravit ćemo widget koji crta oblik s vremenskom prognozom za sutra. Uzmimo samo temperaturu kao primjer, ali kao što ćete vidjeti dalje, bit će lako dodati druge podatke. Widget će sadržavati informacije o temperaturi za sutra, padajući popis s mogućnošću odabira grada. Gumb Ažuriraj će poslati zahtjev poslužitelju, koji zauzvrat kontaktira uslugu treće strane za određivanje vremena i vraća nam potrebne informacije. Te podatke obrađujemo i vraćamo klijentovom pregledniku. Gdje klijentski dio widgeta presreće informacije i prikazuje ih korisniku.

Ovdje vidimo neku stranicu gdje se kaže da mi navodno znamo odrediti vrijeme. A našim posjetiteljima pokazujemo obrazac kako bi se uvjerili da se vrijeme zaista može saznati upravo ovdje.

Nisam se zabavio izgledom forme, nije to svrha članka. U stvarnom svijetu, naravno, stvorili bismo slatki oblik koji bi privukao pozornost.

Pa da se vratimo. Ljudi provjeravaju vremensku prognozu, možda čak i ne shvaćajući da zapravo koriste drugu uslugu. Ali svi su zadovoljni i sretni, dobivate posjetitelje na svoju stranicu, klijente - potrebne informacije.

Ovdje je potrebno malo pojašnjenje: svrha widgeta je pružiti jedinstvenu, praktičnu, zanimljivu funkcionalnost. U našem primjeru ne dajemo nikakve posebne informacije. Vrijeme možete provjeriti bilo gdje. Ali u obrazovne svrhe, budući da još ne znamo ništa učiniti sami, uzet ćemo podatke o vremenu iz vremenske prognoze u Rusiji i usluge CIS. Oni ljubazno daju besplatan API, koji ćemo mi koristiti.

Po tehnologiji

Također ništa komplicirano. Već sam promašio oko iframea. Napisat ćemo javascript kod u vanillaJS, bez ijedne dodatne biblioteke. Čak i bez jQueryja za DOM manipulaciju. Naš je cilj također osigurati da dobiveni widget bude što lakši i nema smisla povlačiti torbu dodatnih biblioteka u preglednik korisnika kako bismo olakšali rad. Stoga, prisjetimo se kako raditi s DOM-om i slati ajax zahtjeve u izvornom javascriptu, a naši će nam klijenti biti zahvalni. Serverski dio- nekoliko desetaka linija koda u PHP-u.

Mi pišemo kod. Izrada osnovne stranice

Stranica na kojoj će se nalaziti naš budući widget. Napišimo tamo nekoliko redaka teksta o tome koliko smo sjajni u smislu naše sposobnosti predviđanja vremena za sutra. Ovo će biti datoteka index.html - obična html stranica. U dijelu glave ćemo napisati ovo:

Webdevkin. Demonstracija widgeta za vrijeme

U odjeljku tijela ovako:

Što je ovdje zanimljivo? Pohranit ćemo stilove za stranicu (ne za widget!) u datoteci css/style.css. I na pravom mjestu kreiramo iframe..html. Uklanjamo njegovu granicu i mogućnost ručnog pomicanja i postavljanja dimenzija widgeta. Naravno, zanimljivije je stvoriti adaptivnu, ali na to ćemo doći kasnije.

Stilovi za stranicu, bez ikakvih posebnih ukrasa:

Body (font-family: Arial; font-size: 14px; ) .wrapper (width: 960px; margin: 0 auto; ) .weather-widget-container ( margin: 30px 0; )

Prazno za widget

Widget je običan html dokument. Koja je razlika? Prvo, nećemo se zamarati nepotrebnim meta oznakama, jer tražilice ne trebaju naš widget. I drugo, napisat ćemo i stilove i js kod izravno u kodu html stranice. Ovo nam je potrebno kako bi se widget učitao što je brže moguće, a smanjenje broja zahtjeva prema web poslužitelju pomoći će nam u tome. Učitat ćemo sve što trebate u jednoj datoteci.

U odjeljku head imat ćemo sljedeći kod:

U dijelu tijela:

Pogledajmo ove blokove detaljnije.

Označavanje widgeta

Temperatura za sutra °C

Ovdje je uobičajeni obrazac. Na vrhu se nalazi mala ploča na kojoj ćemo prikazati temperaturu. Zatim odaberite s izborom grada. Vrijednosti vrijednosti za gradove preuzete su iz usluge meteoservice.ru, kasnije ću vam reći gdje točno, u odjeljku gdje ćemo izravno primati vremenske podatke. I na kraju je gumb Ažuriraj. Izgled ćemo napraviti u klasama; ID brojevi će biti dodijeljeni onim elementima kojima je potreban pristup iz javascript koda. Prefiks wbd- (od webdevkin) koristi se radi praktičnosti, kako ne bi došlo do brkanja označavanja widgeta i glavne stranice.

Stilovi widgeta

html, tijelo, tijelo * ( margina: 0; padding: 0; ) .wbd-widget, .wbd-widget * ( box-sizing: border-box; font-family: Ubuntu; ) .wbd-widget ( border: solid 1px #333; padding: 20px; color: black; ) .wbd-widget__info (boja: steelblue; font-size: 16px; text-align: center; ) .wbd-widget__form-label ( display: block; line-height: 30px; )

Stilovi za widget su što je moguće jednostavniji - možete ih napisati kako god želite. Ne zaboravite da stilove stavljamo izravno u html datoteku widgeta u odjeljku head - style.

widget javascript kod.

Napišimo klasu koja će imati metode za inicijalizaciju, vezivanje događaja i primanje podataka s poslužitelja. Ne zaboravite da ćemo kod napisati u izvornom js-u jer ne želimo opteretiti korisnike nepotrebnim opterećenjem biblioteka.

Var WeatherWidget = (function() ( // Za izvođenje ajax zahtjeva var XHR = ("onload" u novom XMLHttpRequest()) ? XMLHttpRequest: XDomainRequest; // Widget konstruktor funkcija Widget() ( this..php"; this. ui = ( updateBtn: null, citySelect: null, temperatureSpan: null ); this.init(); ) // Ažuriraj vremenske podatke Widget.prototype._updateData = function(e) ( // Pošalji ajax zahtjev poslužitelju ) / / Inicijalizacija komponenti korisničkog sučelja Widget.prototype._initUI = function() ( this.ui.updateBtn = document.getElementById("wbd-widget-update"); this.ui.citySelect = document.getElementById("wbd-widget-city" ) ; this.ui.temperatureSpan = document.getElementById("wbd-widget-temperature"); ) // Povezivanje događaja Widget.prototype._bindHandlers = function() ( this.ui.updateBtn.addEventListener("click", Widget. prototype ._updateData.bind(this)); ) // Inicijaliziraj widget Widget.prototype.init = function() ( this._initUI(); this._bindHandlers(); this._updateData(); ) // Vrati klasu widgeta povratak Widget; ))(); novi WeatherWidget();

Što se ovdje događa? Kreiramo modul temeljen na zatvaranju WeatherWidget, unutar njega upisujemo klasu Widget, u čiji prototip dodajemo potrebne metode i vraćamo ga iz zatvaranja. Zadnji redak stvaramo instancu widgeta - new WeatherWidget();

XHR varijabla je potrebna za izvođenje ajax zahtjeva. U konstruktoru inicijaliziramo svojstvo url s kojeg ćemo primati vremenske podatke. Tu je i ui objekt koji pohranjuje 3 polja - same DOM elemente kojima trebamo pristupiti iz js koda. Inicijaliziraju se kasnije, u metodi _initUI(). Metoda init() uzrokuje inicijalizaciju korisničkog sučelja, vezanje događaja i ažuriranje podataka s poslužitelja (želimo da korisnik odmah vidi vremensku prognozu prilikom renderiranja widgeta bez klikanja Osvježi). U _bindHandlers, metoda _updateData vezana je za klik na gumb Ažuriraj. Ovo je jedini "interaktivni" dio našeg widgeta.

Obratite pozornost na konstrukciju Widget.prototype._updateData.bind(this). Ovdje eksplicitno vežemo kontekst - to nam je potrebno da uvijek pokazuje na instancu klase Widget u metodi _updateData. Sada će biti jasno zašto - pogledajmo kod metode _updateData

Primanje podataka s poslužitelja, metoda _updateData

// Ažuriranje vremenskih podataka Widget.prototype._updateData = function(e) ( e && e.preventDefault(); var xhr = new XHR(), city = this.ui.citySelect.value, temperatureSpan = this.ui.temperatureSpan, data = "city=" + city, resp; xhr.open("POST", this.url, true); xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr .send(data); xhr.onreadystatechange = function() ( if (this.readyState != 4) return; if (this.status != 200) ( console.log("Request error"); return; ) resp = JSON.parse(this.responseText); temperatureSpan.innerHTML = resp.temperature; ) )

Imajte na umu da svojstvo e (event) prosljeđujemo parametrima metode. Potrebno je napraviti preventDefault na samom početku, kako ne bi ponovo učitavali naš widget (inače će slanje obrasca raditi).
Ali mi to radimo s ovom linijom
e && e.preventDefault();
Ova dodatna provjera prisutnosti e parametra je neophodna jer kada pozovemo this._updateData(), e parametar će biti nedefiniran, i sukladno tome e.preventDefault() će baciti iznimku.

Nakon toga kreiramo potrebne varijable, objekt za Ajax zahtjev, odabrani grad i DOM element u koji ispisujemo vrijednost temperature dobivenu sa servera. podaci će biti poslani u ajax zahtjevu, odnosno odgovor poslužitelja. Zatim otvaramo vezu i šaljemo podatke na poslužitelj. Čekamo odgovor od 200 s poslužitelja i prikazujemo rezultirajuću temperaturu u rasponu. Složimo se da json niz dolazi s poslužitelja u formatu ("code": "uspjeh", "temperatura": "temperaturni raspon"). Tradicionalno, rješavanje pogrešaka ostavljam vašoj savjesti; svatko to radi drugačije. Konačno, moramo saznati kako dobiti vremenske podatke s našeg poslužitelja.

Kako saznati vrijeme?

Preporučujem korištenje ove usluge s oprezom. Kad je članak bio gotovo spreman, format odgovora na upit o vremenu iznenada se promijenio. Ispis prognoze po dobu dana, koji sam u početku želio pokazati u widgetu, bio je odsječen. Morao sam djelomično prepisati kod i smanjiti funkcionalnost widgeta, što me nije usrećilo. Ne znam koliko im se često takve stvari događaju, ali ne preporučujem korištenje usluge u stvarnoj aplikaciji.

Pisanje php koda za dobivanje informacija o vremenu

Već je jasno kako uzeti podatke, algoritam je jednostavan: izvučemo parametar grada iz $_POST - odabranog grada i kreiramo niz poput http://xml.meteoservice.ru/export/gismeteo/point/$ cityId.xml. Ovo je put do vremenske datoteke. Šaljemo mu zahtjev za dobivanje koristeći curl. Analiziramo primljeni odgovor i iz njega izdvajamo potrebne parametre: minimalne i maksimalne temperature. Dobivene brojeve u json objektu šaljemo natrag u preglednik.

$cityId = (int)$_POST["grad"]; $url = "http://xml.meteoservice.ru/export/gismeteo/point/$cityId.xml"; $temperatura = ""; if ($curl = curl_init()) ( curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_RETURNTRANSFER, true); $result = curl_exec($curl); curl_close($curl); $xml = simplexml_load_string ($result); $object = $xml->REPORT->TOWN->FORECAST->TEMPERATURE; $temperature = $object["min"] . "-" . $object["max"]; ) echo json_encode( array("code" => "uspjeh", "temperature" => $temperature));

Dopustite mi da objasnim o simplexml_load_string - ova funkcija stvara xml objekt koji već možemo analizirati. A objekt se stvara iz xml niza koji primamo od vremenske službe.
IZVJEŠĆE->GRAD->PROGNOZA->TEMPERATURA - ovo je put kroz xml čvorove do željenih temperaturnih vrijednosti. Slijedite gornju vezu (vrijeme u Moskvi) i jasno ćete vidjeti ove staze.
Ako vam nešto nije jasno, pitajte u komentarima.

Ukupno

I to je sve! Napravili smo jednostavan widget za dobivanje informacija o vremenu. Njegova glavna značajka je da ga je vrlo lako ugraditi na bilo koje web mjesto, samo trebate umetnuti sljedeće retke u html kod

Vjerujem da postoji mnogo opcija za korištenje takvih widgeta, od skupljanja razne informacije na reklamne bannere. Imate li kakvu ideju gdje bi se to moglo primijeniti? Podijelite u komentarima!