aplicatii web moderne sunt complexe în design și dezvoltare. Având în vedere un set de instrumente uzate, instrumente de testare, biblioteci / plugins, procesul de dezvoltare devine mai complexă. Pe măsură ce cererea crește cu timpul, devine tot mai dificil să se mențină codul și să facă îmbunătățiri.
De exemplu, să ne uităm la interfața externă a mai multor site-uri populare:
Instrumentele Chrome pentru dezvoltatori nu pot reflecta pe deplin complexitatea codului sursă, dar cu siguranță oferă o idee despre structura complexă a unor aplicații web moderne DOM. Acest lucru se datorează în mare parte utilizarea excesivă a div (e) și durata (e) în markup care face codul mai greoaie. A fost o mulțime de discuții despre semnificația semantică a tag-uri HTML5, dar utilizarea lor extensivă este inadecvată din două motive:
- Pe paginile noastre web utilizează prea multe componente a căror muncă necesită procesare pentru a comunica cu structura semantică. Pentru a interacționa cu ei, vom folosi clase, atribute id.
- Lista existentă de etichete semantice nu acoperă toate componentele noastre, care sunt utilizate pe paginile. Ca urmare, ne întoarcem la tag-ul tradițional, cum ar fi un div sau interval.
Decizia problemelor semantice
W3C propune să rezolve această problemă prin utilizarea componentelor Web. Ele sunt un set de specificații care permit dezvoltatorilor să creeze componente reutilizabile. Web Components face să ne îndepărtăm de abordarea tradițională a web design, schimba în mod semnificativ modul în care ne construi și concepe aplicații web.
Fiecare componentă este situată în propria sa unitate la stilul logica corespunzătoare și comportamentul. Aceste componente pot fi utilizate nu numai într-o singură aplicație web, dar, de asemenea, extins la rețea pentru utilizarea de către alți dezvoltatori.
Ce este Polimer?
Nu toate browserele suporta posibilitatea de cele de mai sus. Cu toate acestea, din cauza Biblioteca Polymer, dezvoltat de Google, putem repara. Polimer oferă un set Polyfills, care ne permite să utilizați componentele Web pentru browsere incompatibile:
- Acesta vă permite să creați articole cu numele lor. Le puteți împărtăși cu alți dezvoltatori;
- Fiecare element are. șablon propriu;
- Acesta vă permite să utilizați un set de elemente de UI predefinite pentru utilizare în proiect.
Polimer de instalare
Recomandăm instalarea Polimer (v0.3.4) prin Bower. Bower este Package Manager pentru gestionarea dependențe de scripting.
Să presupunem că ați configurat un dosar de proiect folosind fișierul bower.json. Acum puteți instala cea mai recentă versiune a polimerului:
Acest lucru se va instala polimerul bibliotecii și platforma Polyfills din dosarul Pergole-componente.
Notă. parametrul --save adăuga pachetul ca o dependență în fișierul bower.json. Acest lucru este util atunci când doriți să faceți upgrade pachetele utilizate în proiect.
După instalarea Polymer, puteți începe să creați fișierul index.html în directorul rădăcină al proiectului.
Adăugați la platform.js
, și puteți folosi elementele personalizate în documentele dumneavoastră.Folosind propriile elemente
Folosind elemente de marcare proprii, implică de obicei următoarele etape:
- Descărcați pachetul prin Bower;
- Importul .html de fișier corespunzător;
- Utilizați element de marcaj, oriunde în document.
În acest exemplu, vom experimenta cu un element personalizat și să-l utilizați în pagina noastră HTML. Puteți seta hârtie de intrare direct prin Bower, și se va descărca în mod automat alte dependențe necesare.
Înainte de a folosi elementele de pe pagina dvs., trebuie să importați fișierul .html corespunzător:
Acum puteți folosi elementul hârtie de intrare oriunde în interiorul tag-ul
:Pe pagina Componentele are o listă completă de atribute, care pot fi utilizate cu hârtie de intrare.
Îmi place opțiunea plutitoare Label. Toate aceste mari oportunități introduse prin adăugarea unui atribut:
elemente de stilizare
De exemplu, pentru a procesa elementul din hârtie-input. putem folosi numele unei etichete ca un selector:
Sau titlul de clasă:
Varianta atunci când doriți să suprascrie stilurile elementului, dar selectorul nu funcționează. Asta pentru că marcajul este situat în umbra DOM-e, în cazul în care stilurile nu fac drumul lor.
Din fericire, Polimer oferă un element pseudo. umbră. sau / profundă / prin care putem lucra cu umbra DOM-lea.
De exemplu, doriți să înlocuiți culoarea albastru la verde.
Luați în considerare umbra DOM, și pentru a găsi clasa .focusedColor pentru a schimba culoarea.
Selector de hârtie de intrare :: umbra se va potrivi cu elementul # umbra-rădăcină în hârtie de intrare. astfel încât selectorul nostru va arăta astfel:
În mod similar, combinatorul / profundă / poate ignora complet toate limita umbra pentru a ajunge la celula țintă:
compatibilitatea browser-
Polimer are drept scop. pentru a sprijini browsere veșnic verzi (browsere care auto-actualizare).
Apple a eliminat Shadow DOM Safari, ceea ce înseamnă că, chiar și cu ajutorul. umbra și / adânc / nu se poate ajunge până la elementele de stilizare a acestora.
Cu toate acestea, cea mai recentă versiune a browserului Safari (v7.0.4) vă permite să acceseze elementele DOM ale Shadow la nivel extern, folosind selectoare CSS standard.
Prea multe cereri HTTP?
Este greu de imaginat că utilizarea unui element de simplu, cum ar fi hârtie de intrare va duce la un număr considerabil de cereri HTTP!
Toate din cauza principiilor de funcționare polimer, care încarcă multitudinea de module de lucru în mod independent.
Utilizarea acestor elemente în aplicații web pe scară largă poate reduce semnificativ performanța site-ul. Acesta este motivul pentru care creatorii Polimerilor a scris vulcanizarea. Vulcanizarea încorporări dependența de import HTML și optimizează ieșirile rezultatul, care utilizează mai puține solicitări.
Dar acestea fiind spuse, nu ar trebui să ne împiedice utilizarea elementelor Polymer în aplicațiile noastre bazate pe web.
5 lecții din ultima coloană „HTML și DHTML“
Când scrieți sau depanare scripturi PHP, folosim adesea var_dump () și print_r () pentru a afișa o serie de date și obiecte avansate. În acest post, aș dori să vă spun despre funcția var_export (), care poate converti o matrice într-un format adecvat pentru codul PHP.
Un cuplu de liber panoul de administrare template-uri.
Crearea unui șablon pentru scrierea nu este o chestiune simplă. Va oferim o selecție de 30 de site-uri unde puteți descărca aceste șabloane pentru a se potrivi toate gusturile.
De exemplu, aveți o casetă de căutare, care este procesat de fiecare dată când apăsați o tastă tastatură. Dacă cineva vrea să scrie cuvântul pentru Windows, cererea AJAX va fi trimis la următorul fragment: W, Wi, Win, vânt, Windo, ferestre, Ferestre. Problema?.
O selecție de 15 site-uri noi în cazul în care puteți descărca imagini gratuite pentru a umple site-urile lor.
Este mai ușor să învețe cum să optimizați codul, decât să învețe zeci de noi cârje suplimentare de la Google =) Acest articol nu este pentru incepatori cat si pentru proiecte mari, dar bătrânul a câștigat de multă vreme o bibliotecă personală
Aydar Avkhadiev
Prin obținerea de informații de la două canale (vedere si auz) eficacitatea instruirii de învățare departe superioare de cărți. O temele pentru acasă și teste on-line vă va permite să se gândească în mod constant în limba țintă și imediat verifica cunoștințele!
Dacă doriți o lungă perioadă de timp pentru a studia modul în HTML, mi-ai, pentru ai vesti bune!
Dacă ați învățat deja HTML și doresc să avanseze, următorul pas va fi de a studia tehnologia CSS.
Dacă doriți să înțeleagă conceptele de domeniu si hosting, învață cum să creeze o bază de date, încărca fișiere pe un site web prin intermediul unui server FTP, crea subdomenii, configurați cutiile poștale pentru site-ul și să monitorizeze participarea, acest curs este conceput special pentru tine!