Widgeturi web. Widgetul și funcțiile sale. Mediu de suport unic

Utilizatorii activi ai internetului, computerelor și dispozitivelor mobile pun adesea întrebarea: „Ce sunt widget-urile?” Mulți, fără să știe, îi întâlnesc de multe ori pe zi. Când vizitați site-uri web, puteți vedea adesea blocuri mici pe monitorul computerului dvs. care conțin informații despre vreme, cursuri de schimb și multe altele. Mini-aplicații similare pot fi instalate pe ecranele diferitelor dispozitive.

Ce vrei să spui prin widget-uri?

Conceptul de „widget” este folosit incorect în multe cazuri: se referă la barele laterale obișnuite de pe resursele web. În timp ce programele aparținând categoriei de widget-uri se numesc gadgeturi sau altceva. Ambele provoacă confuzie. Chiar dacă cuvântul „widget” sună modern, a fost folosit pentru prima dată în 1926. La început era într-adevăr sinonim cu gadget și însemna un fel de dispozitiv, dar astăzi nu mai este asociat cu niciun dispozitiv.

Ce este un widget în sensul modern?

În prezent, acest cuvânt se referă la o anumită categorie de aplicații auxiliare care au dimensiuni reduse și au un set mic de funcții. Acţionează ca module grafice şi sunt plasate în zona de lucru a principalelor programe: browsere, sisteme de operare, motoare de căutare etc. Pot fi folosite pentru a rezolva problemele de zi cu zi, pot oferi acces rapid la informații utile, fii distractiv sau pur și simplu decora ecranul. Unele widget-uri funcționează numai atunci când internetul este conectat, în timp ce altele funcționează offline.

Principalele tipuri de widget-uri

Aplicațiile descrise pot fi proiectate pentru desktop (widget-uri desktop) sau pentru pagini de Internet (widgeturi web). Datorită capacității de a utiliza widget-uri în browserele de internet și direct în sistemele de operare, perspectivele pentru implementarea lor în viața de zi cu zi a programatorilor și utilizatorii obișnuiți. Dezvoltatorul poate plasa aplicații vizuale pe paginile de resurse. Și utilizatorul trebuie să interacționeze cu ei. Pe lângă cele grafice, există widget-uri simple de text care sunt pur informaționale.

Ce tip de aplicație arată?

Widgetul poate lua diferite forme:

• Yandex vă permite să instalați aplicații care afișează un ceas, flux de știri, informații despre trafic și o bară de căutare. Sunt susținute de populare sisteme de operareși browsere.
• ÎN Versiuni anterioare Widgeturi Windows sunt situate pe desktop, iar în „opt” există o zonă specială pentru ei. Pot exista ceasuri, calendare, mini-jocuri, link-uri către știri sau resurse personalizate de utilizator.
• Unele sisteme de operare Apple au un strat separat pentru widget-uri, numit tablou de bord. Acesta devine vizibil când apăsați F12.
• Browserul Opera a parcurs un drum lung: widget-urile bazate pe acesta sunt plasate pe desktop și funcționează pe orice dispozitiv echipat cu un browser desktop sau mobil de la acest dezvoltator.

Aflați mai multe despre widget-urile desktop

O mini-aplicație care poate fi lansată de pe ecranul principal pe un anumit platforma de operare, și se numește widget pentru desktop. Pot fi instalate din diverse surse: gasite intr-o sectiune speciala aplicații preinstalate sau descărcați din rețea. Adesea, widget-urile pot fi mutate pe ecran, dimensiunea lor poate fi ajustată și designul lor poate fi schimbat. De exemplu, în „șapte” și în alte sisteme există un widget cu ceas: este plasat pe desktop cu un singur clic și afișează ora sistemului. O aplicație de prognoză meteo pe orice sistem va funcționa corect numai atunci când rețeaua este conectată. Ce este un widget din punct de vedere al funcționalității? În cele mai multe cazuri, servește la primire rapidă informații fără a deschide un browser sau o anumită secțiune de pe computer, dar pot fi reprezentate și printr-un mini-joc.

Caracteristici ale widgeturilor web

O mini-aplicație care este încorporată într-o pagină de site se numește widget web. Poate fi o fereastră care duce la un alt serviciu: în acest caz, zona widget va fi încărcată pagină separată. Astfel, funcționalitatea maximă este atinsă în cadrul unei singure pagini web prin combinarea mai multor opțiuni și chiar resurse diferite. Widgeturile web sunt adesea numite gadgeturi, module, fragmente, iar extensiile de browser sunt uneori incluse în categoria lor.

Ce sunt widget-urile web?

Mini-aplicațiile de browser sunt împărțite în două grupuri:

1. Interactiv - permițându-vă să interacționați cu dvs., de exemplu, introduceți informații despre traseul dorit pe hartă sau trimiteți un mesaj scurt.
2. Non-interactiv (informatori) - care conține conținut care este afișat indiferent de activitatea utilizatorului. Sub forma unui astfel de widget, de exemplu, informații despre tarifele curente valute

Instalarea unui widget de browser

De regulă, instalarea unei aplicații grafice nu este o problemă și se poate face în câteva clicuri. Acest proces arată aproximativ astfel (folosind widget-urile Opera ca exemplu):

1. Descărcați și instalați un browser care acceptă widget-uri. Ar putea fi Opera, începând cu versiunea 9 beta, sau unul dintre browserele alternative moderne de internet.
2. Browserul pornește, apăsând F4 se deschide panoul de acces la widget-uri, marcaje și note. Această caracteristică facilitează gestionarea mini-aplicațiilor.
3. Făcând clic pe Widgeturi, se încarcă o listă de widget-uri disponibile pentru instalare.
4. Făcând clic pe Adăugare, se deschide o listă de aplicații disponibile cu descrieri și ilustrații.
5. După ce ați ales widgetul care vă place, trebuie să îl adăugați și să așteptați câteva secunde până la finalizarea instalării.

Widgeturi utile pentru Chrome

ÎN browser Chrome Widgeturile sunt adesea asociate cu extensii, deoarece butoanele lor de acces sunt situate pe bara de instrumente și pot fi utilizate în timp ce vizualizați orice pagină. Exemple de extensii utile:

• Chrome Nanny - ajută la combaterea timpului pierdut online. Setările vă permit să interziceți accesul la anumite site-uri în timpul orelor de lucru, să vă limitați șederea pe VKontakte la 15-20 de minute etc.
• Zoomy - optimizează textul pentru ecranul utilizatorului, întinzându-l la distanța necesară.
• Torrent Turbo Search - vă ajută să căutați materialele necesare pe serviciile de găzduire a fișierelor și în directoarele torrent. Acoperă multe resurse, inclusiv The Pirate Bay. Există o opțiune care vă permite să căutați numai pe resurse în limba rusă.
• iReader - cu un singur clic pe un buton, deschide o nouă fereastră care conține doar textul din pagina încărcată. Publicitatea și alte detalii care distrag atenția sunt complet absente.
• Loomnit - vă permite să partajați linkuri, texte, imagini și fișiere fără a părăsi browserul. Un clic deschide o fereastră în care este adăugat conținutul selectat, iar un al doilea clic oferă un link scurt pentru partajare.

Dezvoltarea propriilor widget-uri

Ce este un widget din punctul de vedere al unui dezvoltator? Acest aplicare normală, care este scris în HTML, JavaScript sau un API JavaScript mai avansat care vă permite să gestionați și să salvați parametrii. Widgetul poate fi scris în oricare dintre limbile server-side care produc HTML (de exemplu, limbaj PHP). Programatorii clasifică aceste aplicații în felul lor, făcând distincție între ele de sine stătătoare și cele bazate pe server. Prima categorie presupune plasarea aplicației într-un singur fișier XHTML, permițând în același timp utilizarea stilurilor și scripturilor din resurse terțe. Al doilea grup include widget-uri ale căror corpuri sunt complet încărcate din resurse terțe. Secțiunea widget-ului serverului este goală; în schimb, adresa de la care are loc descărcarea este scrisă în proprietatea src. Widgetul poate fi creat de la zero sau puteți folosi un șablon special (constructor).

Mulți proprietari instalează diverse informatoare terțe sau widget-uri pe acesta pentru a-și îmbunătăți site-ul. Un informator este un „informator” care este conceput pentru a transmite informații suplimentare vizitatorului.

De regulă, toate CMS-urile vă permit să plasați informatori pe site-ul dvs. web.

Informatorii sunt butoane sau blocuri mici, care actualizează automat, al căror cod îl instalați pe site-ul dvs. web. Capacitățile grafice ale informatorului vă permit să-l personalizați în conformitate cu stilul resursei dvs.

De obicei, informatorii sunt furnizați gratuit în schimbul instalării unei legături înapoi. Link-ul face parte din informator.

Informatorii îndeplinesc două funcții principale pe site. În primul rând, vă permit să diversificați conținutul text al site-ului, acesta devenind mai dinamic și mai practic. A doua funcție este că pe multe site-uri informațiile sunt actualizate foarte rar, iar widget-urile se vor actualiza automat, oferind vizitatorului site-ului cu proaspete, Informatii utile care l-ar putea interesa.
Pentru a instala informatorul pe o resursă web, trebuie să îl selectați dintr-o sursă de încredere, să îl configurați în funcție de cerințele dvs. și de designul site-ului, să salvați codul html propus și să-l inserați în pagina site-ului.

Reguli pentru instalarea informatorului:

Este de dorit ca informatorul să coincidă cu tema site-ului și să o completeze, mai degrabă decât „întreruperea”. De exemplu, dacă vindeți mărfuri importate, ar fi indicat să plasați un informator „curs de schimb”, iar dacă sunteți un centru turistic sau un hotel, atunci un informator meteo pe site nu ar strica.

Aveți încredere doar în surse de încredere de informatori, deoarece informatorii din surse neverificate pot conține viruși.

Nu supraîncărcați site-ul cu informatori - există pericolul de a ne concentra atenția vizitatorilor și de a le distrage atenția de la informațiile principale. O supraabundență de informatori poate încetini încărcarea conținutului principal.

Tipuri de informatori:

Temele widget-urilor sunt foarte diverse: contorul de vizitatori ai site-ului, data și ora, consultant online, blocajele de trafic, fluxuri de știri, ghiduri de programe, widget-ul cursului de schimb, vremea etc. Când alegeți un widget de informații pentru resursa dvs. web, amintiți-vă că acesta , poate afecta popularitatea site-ului dvs. în rândul anumitor vizitatori care vor fi interesați de aceste informații.

Informatorii cursului de schimb și widget-uri

Informatorul cursului valutar va fi util companiilor ale căror prețuri pentru servicii sau bunuri sunt legate de cursul de schimb. Astfel de widget-uri pot oferi informații despre cotațiile de pe burse și fluctuațiile prețurilor. Informatorii valutar pot fi obținuți de la investing.com, ExDex sau forex-informers.

Informatori meteo și widget-uri

Informatorul meteo ar trebui să fie plasat pe site de către companiile care furnizează servicii de turism, pescuit, vânătoare și cazare pentru oaspeți, cum ar fi campinguri, pensiuni și hoteluri. Poate că astfel de informatori vor fi potriviti și pentru magazinele care vând articole sezoniere, cum ar fi echipamente pentru sporturile de iarnă. Puteți utiliza serviciile Gismeteo sau Yandex.Weather. Gismeteo. Sunt detaliate și scurte. Acestea oferă informații despre vremea actuală și o prognoză pentru câteva zile.

Informatori și widget-uri de știri

Informatorul de știri de pe site va fi util pentru site-urile tematice, deși ar trebui să publicați numai fluxuri de știri pe aceleași subiecte sau similare cu site-ul dvs. Aproape toate widget-urile de știri vă permit să postați știri din anumite categorii: politică, finanțe, cultură, sport etc. Puteți găsi cu ușurință un informator de știri potrivit pentru tema site-ului dvs. De exemplu, Yandex.News sau New2world.

Informator Yandex.Programe

Informatoare și widget-uri de calendar

Informatorul de calendar pentru site va fi convenabil pentru vizitatorii site-ului dacă au nevoie să vadă anumite date, de exemplu, începutul unui tur, o excursie sau începutul/sfârșitul acceptării oricăror documente. Foarte convenabil serviciu de calendar sugerează Google. ele descriu instrucțiuni pentru plasarea unui informator de calendar pe site Există, de asemenea, următoarele servicii: chasikov.net.ru, calendar.yuretz.ru.

Informatorii ghișeului de prezență

Contoarele de trafic au și informatori, reflectă date despre traficul site-ului, de obicei sunt amplasate în coloanele laterale ale site-ului sau în subsol.

Cel mai adesea, acestea sunt instalate pentru potențialii agenți de publicitate, astfel încât aceștia să poată vedea informații despre numărul de vizitatori ai site-ului și afișările de pagină. Widgeturile indicatoare TIC și PR sunt, de asemenea, comune, care notifică despre popularitatea și citarea unei resurse. Merită să înțelegeți că, deschizând aceste date tuturor, concurenții dvs. le vor vedea și ei.

Informatoare și widget-uri pentru rețelele sociale

Widgeturi grupuri socialeși comunitățile le spun vizitatorilor site-ului că aveți o comunitate și comunicați cu vizitatorii prin intermediul rețelelor sociale, acest lucru poate fi util și pentru afaceri, deoarece dacă un vizitator își vede prietenii printre membrii grupului, încrederea lui în site-ul și compania dvs. se va îmbunătăți și el va fi mai dispus să devină clientul tău.

Uneori trebuie să evaluezi și să afli atitudinea vizitatorilor site-ului tău față de un anumit subiect, să afli părerea generală a cititorilor sau pur și simplu ai nevoie de sfaturi în legătură cu ceva. Toate acestea pot fi aflate printr-un sondaj pe care îl poți plasa cu ușurință pe pagina ta. Sondajele sunt folosite nu doar ca sursă de date privind opiniile vizitatorilor, ci joacă și un rol important în creșterea nivelului de interacțiune, ceea ce are un efect pozitiv asupra cititorilor, permițându-le să-și exprime opiniile.

Puteți plasa cu ușurință un sondaj pe o pagină cu puține cunoștințe de programare și folosind serviciile disponibile care în prezent vă permit să dezvoltați sondaje în stilul dorit, care să se potrivească cu aspectul general al site-ului dvs. În acest articol, am colectat 10 servicii online care vă vor ajuta să creați și să integrați sondaje gratuite în site-ul sau blogul dvs.

Prin utilizarea Cod de sondaj Vă puteți crea propriile sondaje fără să vă înregistrați, dar dacă aveți nevoie de unele dintre caracteristicile speciale ale sondajului, procesul de înregistrare nu va dura mai mult de câteva secunde. Serviciul vă permite să editați aspectul (puteți alege fontul, culorile și designul dorit) astfel încât să se potrivească cu șablonul site-ului dvs.
Serviciul este complet gratuit, dar condiția de utilizare este ca reclamele să fie afișate în rezultatele sondajului dvs. (vizibile doar după ce cineva votează sau vede rezultatele sondajului). Nu va fi postat un singur anunț pe site-ul propriu-zis, ci doar un link înapoi către Pollcode.com.

ProProfs prezintă posibilitatea realizării unor chestionare simple. Versiune gratuită vă permite să creați un număr infinit de sondaje, dar după 7 zile vor apărea reclame pe acestea. Prin utilizarea a acestui serviciu, puteți crea și edita cu ușurință sondaje, precum și să le completați cu caracteristici unice. Aceste caracteristici vă vor ajuta să evitați frauda de rating (verificarea se poate face chiar pe baza stabilirii locației geografice a fiecărui alegător), și veți avea, de asemenea, posibilitatea de a posta imagini sau fișiere video și de a integra sondajul cu MySpace, Facebook și alte rețele sociale. retelelor.

Sondaj rapid oferă posibilitatea simplă şi creație rapidă sondaje. Nu veți petrece mai mult de câteva minute pentru instalare. Aveți posibilitatea de a edita culoarea, aspectul și aspectul sondajului pentru a se potrivi cu șablonul site-ului dvs. Nu trebuie să vă înregistrați sau să faceți contribuții financiare - aplicația este absolut gratuită. Singurul aspect al acordului bidirecțional este că nu veți încerca să evitați afișarea reclamelor.

Serviciu gratuit (necesar backlink). Modpoll a fost deja folosit pentru a crea chestionare pe site-uri precum marieclaire.com, facebook.com, huffingtonpost.com, ning.com și blogger.com. Puteți crea câte sondaje aveți nevoie și apoi le puteți adăuga pe blogul sau paginile de pe propriul site. De asemenea, este posibil să publicați un sondaj în popular în rețelele sociale precum Twitter, Facebook, MySpace, FriendFeed, Digg, Gmail, AOL Mail, Yahoo Mail, Hotmail, Blogger, Tumblr, TypePad, LiveJournal, AIM, Yahoo Messenger și multe altele.

MicroPoll oferă cea mai simplă oportunitate de a crea sondaje online. Folosind instrumente ultra-simple aceasta aplicație, vă puteți proiecta cu ușurință sondajul exact așa cum doriți. Este posibil să creați un sondaj cu butoane radio, casete de selectare sau meniuri derulante și există, de asemenea selecție uriașă teme de design pre-preparate.

Prin utilizarea Vizu, utilizatorii pot crea sondaje în doar câteva minute. Instrumentul vă permite să monitorizați starea curentă a sondajului, să primiți notificări prin intermediul E-mail, iar utilizatorii pot lăsa comentarii direct în sondaj.
Serviciul este absolut gratuit, dar tot ce trebuie să faci este să postezi un link înapoi către Vizu.

BlogPolls permite utilizatorilor să conceapă sondaje pe baza aspect relevante pentru site-ul lor. Serviciul este gratuit, dar trebuie să postați un link înapoi către BlogPolls.

Formular cu întrebări reprezintă Unealtă puternică despre crearea de sondaje cu o interfață asemănătoare desktopului. Puteți pur și simplu să glisați și să plasați întrebări pentru a le crea sau edita. Serviciul oferă, de asemenea, multe funcții diferite, cum ar fi: urmărirea răspunsurilor repetate prin cookie-uri, notificări în timp real, exportarea datelor către Microsoft Excel, XML sau orice alt tip de document (CSV sau TSV).
QuestionForm este plătit, dar aveți opțiunea de a crea două sondaje gratuite.

09.
Sondaj Tati este probabil cel mai puternic și profesionist serviciu de creare a sondajelor prezentate în selecția noastră. Un serviciu de creare de sondaje online colectează toate informațiile dvs. și le transformă într-un sistem complet de raportare, permițându-vă să creați un sondaj mai atent. De asemenea, puteți utiliza șabloane personalizate proiectați și CSS, schimbați limbile, exportați date în XML, CSV și primiți rezultate prin e-mail sau RSS și puteți alege dintre 11 tipuri de întrebări.
PollDaddy este și el serviciu cu plată cu opțiuni gratuite, inclusiv posibilitatea de a crea sondaje cu 10 opțiuni de răspuns, 100 de voturi per sondaj și un link înapoi la PollDaddy.

E simplu! În mai puțin de 5 minute, vă puteți actualiza site-ul sau blogul cu un ceas interactiv, făcându-l mai vibrant și mai ușor de utilizat

De ce un generator de widget de ceas de pe un site web?

1. Widgeturile noastre html5 nu încetinesc paginile dvs. web
2. Sunt prietenoși cu dispozitive mobile
3. Ceasul nostru minunat nu folosește deloc FLASH, ceea ce înseamnă că site-ul sau blogul tău nu vor primi puncte de penalizare de la Google
4. Puteți plasa cu ușurință până la 10 widget-uri la rând pe o pagină.

FAQ

Pot posta mai multe vizionare pe pagina/site-ul meu? Da, puteți plasa câte ceasuri doriți pe o pagină sau pe un site web. Pot schimba codul widget-ului? În general, nu permitem să fie aduse modificări codului pe care îl oferim. Este posibil ca ceasul să nu funcționeze corect dacă se fac modificări, așa că vă sfătuim să lipiți pur și simplu codul „ca atare”. Cu toate acestea, dacă sunteți familiarizat cu html - puteți modifica următoarele: culoarea, dimensiunea, alinierea și evidențierea textului, efectuați mici modificări textului ceas digital. Alte modificări, în special eliminarea hyperlink-urilor, nu sunt permise. Copia dvs. a ceasului poate fi blocată în orice moment după ce au fost făcute modificări. Orașul pentru care am nevoie de ceas folosește ora de vară. Ceasul va arăta ora corectă după trecerea la ora de iarnă? Da sigur! Ceasurile noastre țin cont de schimbările asociate cu tranzițiile orarelor de vară/iarnă din întreaga lume!

21 mai , 2016

De fiecare dată când vă conectați pe site-urile dvs soluție gata făcută de la servicii precum disqus sau google analytics, sunt surprins de ușurința de integrare a funcționalității destul de complexe. Am pus 3 linii de cod javascript în cod - și aveți deja un bloc cu comentarii. Încă 2 rânduri - și analize de la Google sau Yandex sunt disponibile. Desigur, nu se întâmplă nicio magie, din aceleași 3 linii de cod sunt extrase server la distanta toate codul necesarși, în esență, implementați o mică aplicație web pe paginile site-ului dvs. Dar cum funcționează în interior și cum poți să o faci singur? A fost destul de interesant să-mi dau seama și, în cele din urmă, am primit un mic widget care funcționează exact conform acestei scheme de încorporare simplă și, în același timp, face câteva lucruri utile. Mai multe detalii.

De ce avem nevoie de widget-uri?

Iframe-urile sunt potrivite pentru acest scop. Acestea sunt de fapt pagini html separate care sunt încorporate în alte pagini fără a avea acces la „părintele” lor. Adică, putem încorpora aplicația noastră web într-un iframe, care își va face treaba în liniște fără a interfera cu site-ul principal. Și ce anume va face widget-ul tău, construi un sistem de comentarii pe pagină, arată o jucărie cool sau desenează un banner publicitar interactiv - este în întregime o chestiune de gust și imaginație.

În acest articol, nu ne vom concentra pe jucărie, ci ne vom uita la modul de a crea un widget încorporat pentru a determina vremea. Desigur, există multe servicii meteorologice diferite pentru aceasta, dar nu suntem interesați să folosim o soluție gata făcută. Aș dori să creez un widget simplu cu propriile mele mâini pentru a înțelege cum funcționează în general și, în viitor, să aplic cunoștințele pentru unele lucruri utile. În același timp, ne vom reîmprospăta cunoștințele despre javascript nativ și php pe parcurs.

Ce facem?

Vom crea un widget care desenează o formă cu prognoza meteo pentru mâine. Să luăm ca exemplu doar temperatura, dar după cum veți vedea mai departe, va fi ușor să adăugați alte date. Widgetul va conține informații despre temperatură pentru mâine, o listă derulantă cu posibilitatea de a selecta un oraș. Butonul Actualizare va trimite o solicitare către server, care la rândul său contactează un serviciu terță parte pentru a determina vremea și ne returnează informațiile necesare. Prelucrăm aceste date și le returnăm browserului clientului. Unde partea client a widget-ului interceptează informații și le afișează utilizatorului.

Aici vedem o pagină unde se spune că se presupune că știm să determinăm vremea. Și le arătăm vizitatorilor noștri un formular pentru ca aceștia să se convingă că vremea chiar poate fi aflată chiar aici.

Nu m-am distrat cu aspectul formularului, nu acesta este scopul articolului. În lumea reală, desigur, am crea o formă drăguță care ar atrage atenția.

Deci să ne întoarcem. Oamenii verifică vremea, poate fără să-și dea seama că folosesc de fapt un alt serviciu. Dar toată lumea este mulțumită și fericită, obțineți vizitatori pe site-ul dvs., clienți - informațiile necesare.

Este nevoie de o mică clarificare aici: scopul widget-urilor este de a oferi funcționalități unice, convenabile, interesante. Nu oferim nicio informație specială în exemplul nostru. Puteți verifica vremea oriunde. Dar, în scopuri educaționale, din moment ce nu știm încă să facem nimic singuri, vom prelua date meteo din Prognoza meteo din Rusia și serviciul CSI. Ei furnizează cu amabilitate un API gratuit, pe care îl vom folosi.

Prin tehnologie

Nimic complicat nici. Deja am lăsat-o să scape despre iframe. Vom scrie cod javascript în vanillaJS, fără o singură bibliotecă suplimentară. Chiar și fără jQuery pentru manipularea DOM. Scopul nostru este, de asemenea, să ne asigurăm că widgetul rezultat este cât mai ușor posibil și nu are rost să trageți un sac de biblioteci suplimentare în browserul utilizatorului pentru a ne ușura munca. Prin urmare, să ne amintim cum să lucrăm cu DOM și să trimitem cereri ajax în javascript nativ, iar clienții noștri ne vor mulțumi. Partea serverului- câteva zeci de linii de cod în PHP.

Scriem cod. Crearea unei pagini de bază

Pagina pe care va fi localizat viitorul nostru widget. Să scriem acolo câteva rânduri de text despre cât de grozavi suntem în ceea ce privește capacitatea noastră de a prezice vremea pentru mâine. Acesta va fi fișierul index.html - o pagină html obișnuită. În secțiunea de cap vom scrie asta:

Webdevkin. Demonstrație a widget-ului Meteo

În secțiunea corpului, așa:

Ce este interesant aici? Vom stoca stiluri pentru pagină (nu pentru widget!) în fișierul css/style.css. Și în locul potrivit creăm un iframe..html. Îi eliminăm chenarul și capacitatea de a derula și a seta manual dimensiunile widget-ului. Desigur, este mai interesant să creați unul adaptiv, dar vom ajunge la asta mai târziu.

Stiluri pentru pagină, fără bibelouri speciale:

Body ( font-family: Arial; font-size: 14px; ) .wrapper ( lățime: 960px; margine: 0 auto; ) .weather-widget-container (marja: 30px 0; )

Gol pentru widget

Widgetul este un document HTML obișnuit. Care este diferența? În primul rând, nu ne vom deranja cu metaetichete inutile, deoarece motoarele de căutare nu au nevoie de widget-ul nostru. Și în al doilea rând, vom scrie atât stilurile, cât și codul js direct în codul paginii html. Avem nevoie de acest lucru pentru ca widgetul să se încarce cât mai repede posibil, iar reducerea numărului de solicitări către serverul web ne va ajuta în acest sens. Vom încărca tot ce aveți nevoie într-un singur fișier.

În secțiunea head vom avea următorul cod:

În secțiunea caroserie:

Să ne uităm la aceste blocuri mai detaliat.

Markup widget

Temperatură pentru mâine °C

Iată forma obișnuită. Deasupra este un mic panou unde vom afișa temperatura. Apoi selectați cu alegerea orașului. Valorile valorice pentru orașe sunt preluate din serviciul meteoservice.ru, vă voi spune unde exact mai târziu, în secțiunea în care vom primi direct date meteo. Și la sfârșit există un buton Actualizare. Vom avea layout-ul făcut în clase; numerele de identificare vor fi atribuite acelor elemente care necesită acces din codul javascript. Prefixul wbd- (de la webdevkin) este folosit pentru comoditate, pentru a nu confunda markupul widget-ului și pagina principală.

Stiluri widget

html, corp, corp * ( margine: 0; umplutură: 0; ) .wbd-widget, .wbd-widget * ( dimensiunea casetei: border-box; font-family: Ubuntu; ) .wbd-widget ( chenar: solid 1px #333; umplutură: 20px; culoare: negru; ) .wbd-widget__info (culoare: steelblue; dimensiunea fontului: 16px; text-align: center; ) .wbd-widget__form-label ( display: block; line-height: 30px;)

Stilurile pentru widget sunt cât se poate de simple - le puteți scrie după cum doriți, după cum doriți. Nu uitați că am pus stilurile direct în fișierul html al widget-ului în secțiunea head - style.

cod javascript widget.

Să scriem o clasă care va avea metode pentru inițializare, legarea evenimentelor și primirea datelor de la server. Nu uitați că vom scrie codul în js nativ, deoarece nu vrem să împovărăm utilizatorii cu o încărcătură inutilă de biblioteci.

Var WeatherWidget = (funcție() ( // Pentru a efectua cereri ajax var XHR = ("încărcare" în noul XMLHttpRequest()) ? XMLHttpRequest: XDomainRequest; // Funcția de constructor widget Widget() ( this..php"; this. ui = ( updateBtn: null, citySelect: null, temperatureSpan: null ); this.init(); ) // Actualizați datele meteo Widget.prototype._updateData = function(e) ( // Trimiteți o cerere ajax către server ) / / Inițializarea componentelor ui 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"); ) // Legarea evenimentelor Widget.prototype._bindHandlers = function() ( this.ui.updateBtn.addEventListener("click", Widget. prototip) ._updateData.bind(this)); ) // Inițializează widget-ul Widget.prototype.init = function() ( this._initUI(); this._bindHandlers(); this._updateData(); ) // Returnează clasa de widget returnează Widget; ))(); nou WeatherWidget();

Ce se petrece aici? Cream un modul bazat pe inchiderea WeatherWidget, in interiorul lui scriem clasa Widget, in prototipul caruia adaugam metodele necesare si o returnam din inchidere. Ultima linie creăm o instanță a widget-ului - new WeatherWidget();

Variabila XHR este necesară pentru a efectua cereri ajax. În constructor, inițializam proprietatea url, de la care vom primi date meteo. Există, de asemenea, un obiect ui care stochează 3 câmpuri - chiar elementele DOM la care avem nevoie de acces din codul js. Acestea sunt inițializate ulterior, în metoda _initUI(). Metoda init() face ca interfața de utilizare să fie inițializată, evenimentele să fie legate și datele să fie actualizate de pe server (dorim ca utilizatorul să vadă imediat vremea atunci când redă widgetul fără a face clic pe Refresh). În _bindHandlers, metoda _updateData este legată de un clic pe butonul Actualizare. Aceasta este singura parte „interactivă” a widget-ului nostru.

Acordați atenție construcției Widget.prototype._updateData.bind(this). Aici legăm în mod explicit contextul - avem nevoie de acest lucru pentru a indica întotdeauna o instanță a clasei Widget în metoda _updateData. Acum va fi clar de ce - să ne uităm la codul metodei _updateData

Primirea datelor de la server, metoda _updateData

// Actualizați datele meteo 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(date); xhr.onreadystatechange = function() ( if (this.readyState != 4) return; if (this.status != 200) ( console.log("Solicitare eroare"); return; ) resp = JSON.parse(this.responseText); temperatureSpan.innerHTML = resp.temperature; ) )

Vă rugăm să rețineți că trecem proprietatea e (eveniment) parametrilor metodei. Este necesar să faceți preventDefault chiar de la început, pentru a nu reîncărca widgetul nostru (în caz contrar, trimiterea formularului va funcționa).
Dar o facem cu această linie
e && e.preventDefault();
Această verificare suplimentară pentru prezența parametrului e este necesară deoarece atunci când apelăm this._updateData(), parametrul e va fi nedefinit și, în consecință, e.preventDefault() va arunca o excepție.

După aceasta, creăm variabilele necesare, un obiect pentru cererea Ajax, orașul selectat și un element DOM în care afișăm valoarea temperaturii primite de la server. datele vor fi trimise într-o cerere ajax, respectiv răspunsul de la server. Apoi deschidem conexiunea și trimitem date către server. Așteptăm un răspuns de 200 de la server și afișăm temperatura rezultată în interval. Să fim de acord că un șir json vine de la server în formatul ("cod": "succes", "temperature": "interval de temperatură"). În mod tradițional, voi lăsa gestionarea erorilor în seama conștiinței tale; fiecare o face diferit. În cele din urmă, trebuie să aflăm cum să obținem date meteo de pe serverul nostru.

Cum să afli vremea?

Recomand să utilizați acest serviciu cu prudență. Când articolul era aproape gata, formatul răspunsului la o solicitare despre vreme s-a schimbat brusc. Ieșirea prognozei în funcție de oră, pe care am vrut inițial să o demonstrez în widget, a fost întreruptă. A trebuit să rescriu parțial codul și să reduc funcționalitatea widget-ului, ceea ce nu m-a făcut fericit. Nu știu cât de des se întâmplă astfel de lucruri cu ei, dar nu recomand să folosești serviciul într-o aplicație reală.

Scrierea codului php pentru a obține informații despre vreme

Este deja clar cum să preluăm datele, algoritmul este simplu: scoatem parametrul oraș din $_POST - orașul selectat și creăm un șir precum http://xml.meteoservice.ru/export/gismeteo/point/$ cityId.xml. Aceasta este calea către fișierul meteo. Îi trimitem o solicitare de obținere folosind curl. Analizăm răspunsul primit și extragem din acesta parametrii necesari: temperaturi minime și maxime. Trimitem numerele rezultate dintr-un obiect json înapoi în browser.

$cityId = (int)$_POST["oraș"]; $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); $rezultat = curl_exec($curl); curl_close($curl); $xml = simplexml_load_string ($rezultat); $obiect = $xml->RAPORT->ORAȘ->PROVIZZA->TEMPERATURĂ; $temperatura = $obiect["min"] . "-" . $object["max"]; ) echo json_encode( array("code" => "succes", "temperature" => $temperature));

Permiteți-mi să vă explic despre simplexml_load_string - această funcție creează un obiect xml pe care îl putem analiza deja. Și un obiect este creat din șirul xml pe care îl primim de la serviciul meteo.
RAPORT->ORĂS->PROVIZIUNE->TEMPERATURA - aceasta este calea prin nodurile xml pentru a ajunge la valorile de temperatură dorite. Urmați link-ul de mai sus ( vremea la Moscova ) și veți vedea clar aceste poteci.
Dacă ceva nu este clar, întrebați în comentarii.

Total

Și asta este tot! Am creat un widget simplu pentru a obține informații despre vreme. Caracteristica sa principală este că este foarte ușor de încorporat pe orice site, trebuie doar să inserați următoarele rânduri în codul html

Cred că există multe opțiuni pentru utilizarea unor astfel de widget-uri, de la colecție diverse informatii la bannere publicitare. Aveți vreo idee unde poate fi aplicat acest lucru? Distribuie in comentarii!