Dacă ați încercat vreodată să creați un site web adaptat... dispozitive mobile, sau conversia unui site web pentru computere desktop într-unul responsive, atunci probabil știți că una dintre cele mai mari probleme cu un astfel de aspect este afișarea corectă a tabelelor. De obicei, tabelele nu se adaptează bine la ecranele mici și, prin urmare, dacă site-ul dvs. nu se poate descurca fără ele, atunci trebuie să găsiți o modalitate de a le afișa convenabil pentru utilizator.

Creatorii de site-uri web au venit cu mai mult de o modalitate de a face acest lucru. CU folosind CSSși JavaScript, puteți aranja celulele pe ecrane mici într-o coloană, puteți ascunde coloane cu date nu foarte importante și chiar puteți transforma tabelul într-o diagramă circulară. Toate aceste metode au fost descrise de mai multe ori în engleză și rusă și puteți citi cu ușurință despre ele pe Internet. În articolul meu, aș dori să vorbesc despre cum să alegi dintre aceste soluții pe cea de care ai nevoie și în mod specific pentru site-ul tău.

Înainte de a alege metoda potrivită, trebuie să-ți pui câteva întrebări cu privire la conținutul din tabel.

Vor compara oamenii datele în coloane sau rânduri?

Exemplul 1: oamenii nu vor compara datele.

Mai întâi, să ne uităm la un exemplu de tabel în care utilizatorii nu trebuie să compare datele. Un exemplu de astfel de tabel este o listă de filme. În acest tabel, filmele sunt aranjate în funcție de rating.

Pe ecran mare Este convenabil să vizualizați aceste date sub forma unui tabel, dar este puțin probabil să fie vital pentru cineva să compare un regizor cu altul. Prin urmare, coloanele acestui tabel de pe ecrane mici pot fi transformate în siguranță într-una singură.

Este exact ceea ce au făcut creatorii site-ului JQuery Mobile.

Exemplul 2: oamenii vor compara datele pe rând sau pe coloană

Dacă aveți în tabel, de exemplu, o listă de date identice pentru diferite companii, atunci este evident că utilizatorul le va compara pentru a alege singur. cea mai buna varianta. Putem vedea un exemplu de astfel de tabel în imagine.

Orez. 3. Tabel cu datele de comparat

În acest caz, avem nevoie de o soluție care să permită utilizatorului să compare serii. Una dintre opțiunile prezentate este atunci când pe ecranele mici tabelul este răsturnat în așa fel încât datele să fie rearanjate de la o poziție orizontală la una verticală. Astfel, rândul de sus - titlurile tabelului - a devenit acum coloana din stânga, iar utilizatorul poate derula coloanele cu date, dacă este necesar, pe orizontală.

Orez. 4. Tabel cu date pe ecranul telefonului mobil

O altă opțiune este de a permite utilizatorului să aleagă ce coloane să afișeze și care nu. Acest lucru a fost implementat. Pe ecranele înguste, coloanele cu date nu foarte importante sunt ascunse, dar dacă cineva dorește să le vadă, poate activa aceste coloane.

Orez. 5. Tabel cu date în versiunea completă site-ul

Orez. 6 și 7. Același tabel în versiunea mobilă. Rămân doar cele mai importante coloane, dar le puteți include pe toate celelalte dacă este necesar.

Ce informații sunt importante?

Dacă decideți să ascundeți unele informații pe ecranele mici, atunci se pune firesc întrebarea: ce informații sunt importante? Într-o astfel de situație, poate fi util să vă puneți următoarele întrebări:

• De ce informații au cel mai mult nevoie oamenii?
• Care coloane sunt cele mai importante pentru înțelegerea informațiilor pe care le oferă tabelul?
• Ce difuzoare au cel mai probabil nevoie de oameni?

Vor putea utilizatorii să distingă o parte a tabelului de alta?

Pe măsură ce utilizatorul scanează tabelul, rând cu rând, căutând informatiile necesare cum poate distinge rapid un rând de altul? Acest lucru este deosebit de important atunci când tabelele sunt utilizate în interfața aplicațiilor web.

În versiunea completă a site-ului, putem pune orice dorim în tabel. Dar pentru versiunea mobilă este necesar să lași cele mai necesare informații și să fii sigur că utilizatorul nu va confunda o dată cu alta.

Trebuie să fie totul pe ecran în același timp sau puteți adăuga elemente suplimentare dacă este necesar?

Cel mai dificil lucru de a crea tabele receptive este de obicei atunci când dezvoltatorul site-ului încearcă să potrivească tot ceea ce este pe un ecran mare pe unul mic. În cele mai complexe cazuri, acest lucru cauzează probleme majore cu afișarea tabelului.

Mulți oameni fac greșeala de a crede că designul responsive înseamnă să arăți totul pe pagină, indiferent de dimensiunea ecranului. De fapt, este mai bine să puneți doar cele mai importante lucruri pe un ecran îngust și să adăugați restul pe măsură ce măriți.

Interesant este că cel mai adesea atunci când începem un design cu o versiune full-screen și vedem un tabel uriaș cu mult conținut, ne este greu să acceptăm că pe un ecran îngust va pierde o parte din acest conținut. Dar atunci când acționăm pe principiul „în primul rând mobil”, astfel de probleme nu apar.

Deci, ce contează când vine vorba de mese design receptiv?

• Utilizatorii vor înțelege sensul tabelului, chiar dacă este aspect se va schimba?
• Vor reuși cumva să obțină toate informațiile din tabel?
• Sunteți sigur că toate adresele URL sunt accesibile indiferent de dispozitiv?

Dacă puteți răspunde „da” la toate cele trei întrebări, atunci nu există probleme cu tabelele de pe site-ul dvs.

Conținutul tău îți va spune ce să faci cel mai bine cu mesele tale.

Există multe în diverse moduri plasați mesele în design responsive. Cu timpul vor fi și mai mulți. Dar cum să alegi metoda potrivită? Nu poate exista decât un singur răspuns.

Conținutul tău îți va spune ce să faci cel mai bine cu mesele tale. Sarcina ta este să o analizezi corect.

Site-urile web adaptive au încetat de mult să mai fie o curiozitate și devin din ce în ce mai comune. Având în vedere ultimele știri cu clasamente motoarele de căutare(dacă cineva nu știe, atunci când caută pe un dispozitiv mobil, se acordă prioritate site-urilor receptive), numărul acestor site-uri va continua să crească. Poți fi împotriva adaptării pentru dispozitivele mobile sau în favoarea, dar adevărul rămâne: din ce în ce mai mult, clienții cer ca site-ul lor să fie adaptabil, iar webmasterii trebuie să o facă.

Una dintre principalele probleme la adaptarea unui site la diferite rezoluții sunt tabelele. Mai ales dacă conțin o mulțime de date. Să ne uităm la două moduri de a dispune un tabel receptiv.

Mai întâi, să vedem cum arată tabelul:

Să fim sinceri: un astfel de tabel nu poate fi numit cu adevărat adaptativ. Arată bine pe mobil, nimic nu iese în evidență nicăieri și aspectul site-ului nu „curge”. Această metodă este potrivită dacă tabelele sunt rare pe site-ul dvs. și nu are rost să conectați un plugin și să scrieți stiluri suplimentare din cauza lor. Această metodă este folosită de Bootstrap. Deci, cum funcționează asta?

Este simplu: masa este înfășurată într-un div, care este setat la o lățime maximă de 100% și overflow: auto.

Dacă masa este lungă, puteți, de asemenea, să setați înălțimea maximă și să fixați antetul mesei.

Rezultatul, ca exemplul următor, poate fi vizualizat pe această pagină.

Dacă aveți adesea tabele pe site-ul dvs., este logic să utilizați pluginul Footable.

Mai întâi trebuie să conectați pluginul (descărcați-l pe GitHub sau conectați-l de la un CDN) și, de asemenea, să îl inițializați:

$(function() ( $(".table").footable(); ));

Aici trebuie să clarificăm ceva: dintr-un motiv oarecare, scriptul nu numără lățimea ferestrei de vizualizare, ci lățimea tabelului. Pentru a remedia acest lucru, trebuie să „modernizați” ușor scriptul:

JQuery(funcție () ( jQuery(".table").footable(( calculateWidthOverride: function() ( return (lățime: jQuery(window).width()); ) )); ))

La inițializare, specificăm clasa tabelului sau doar eticheta tabelului dacă dorim ca toate tabelele de pe site să fie adaptive.

Ce înseamnă toate acestea? Pe tablete, coloanele „RAM”, „Diagonală”, „PPI” și „Baterie” vor fi ascunse. Când se reduce la telefoane, li se va alătura și coloana „Preț”.

Punctele de control pot fi specificate în inițializare:

JQuery(funcție () ( jQuery(".table").footable(( calculateWidthOverride: function() ( return (lățime: jQuery(window).width()); ), puncte de întrerupere: ( mobil: 0, tabletă: 720, desktop: 1024 ) ));

Aceasta înseamnă că în intervalul 0-720 regula se aplică pentru mobil, 720-1024 pentru tabletă și peste 1024 pentru desktop. Nimic nu vă împiedică să creați și mai multe reguli dacă este necesar.

De asemenea, vă puteți asigura că o anumită coloană este extinsă în mod implicit. Pentru a face acest lucru, specificați atributul de date data-expanded="true"

Capacitățile pluginului nu se termină aici, ci de a crea tabele adaptive asta este destul. Vom analiza alte posibilități data viitoare.

În Aspro: În continuare, începând cu versiunea 1.1.7, puteți adapta tabelele pentru versiunea mobilă. Trebuie făcute modificări la cod sursă pagini - adăugați o clasă care este responsabilă pentru adaptabilitatea tabelelor.

Un tabel simplu în versiunea mobilă trece dincolo de pagină.

Pentru a face tabelul receptiv, accesați pagina în care a fost adăugat tabelul. Apoi accesați modul de editare a codului sursă.

Înainte de eticheta de deschidere

După eticheta de închidere

Salvați modificările.

Acum masa se derulează și nu depășește cadrul.

La derularea orizontală, tabelul nu depășește cadrul, dar la derularea spre dreapta în versiunea mobilă se deschide un meniu lateral. Pentru a vă asigura că meniul nu interferează cu lucrul cu tabelul, trebuie să faceți modificări codului paginii.

Trebuie să adăugăm clasa „swipeignore” la eticheta pe care am adăugat-o mai devreme. Ca urmare, înainte de etichetă

Salvați modificările.

Acum, când derulați tabelul la dreapta, meniul lateral nu se deschide, ceea ce a interferat cu lucrul cu tabelul.

Puteți ascunde meniul lateral când derulați spre dreapta și pe alte pagini. Trebuie să adăugați clasa „swipeignore” la eticheta de bloc pentru care doriți să eliminați afișarea meniului lateral. Dacă eticheta nu a avut o clasă specificată, va lua forma . Dacă eticheta are deja clase adăugate, atunci scrieți „swipeignore” separat de un spațiu, de exemplu .

Windows : Internet Explorer 10.0+, Firefox 1.5+, Google Chrome, Opera 9.5+, Safari 3.1+, SeaMonkey 1.0+ [1].

Linux: Firefox 1.5+, Google Chrome/Chromium, Opera 9.5+, SeaMonkey 1.0+ [2].

Dacă un tabel HTML conține prea multe date, acesta devine mai larg decât spațiul disponibil pe pagină și începe să depășească. Pentru a remedia situația, puteți adăuga derulare orizontală la tabel. Exemplu:

HTML/XHTML. Cod:

1

2

3

4

5

6

7

8

9

10

Tabel_date_1

Tabel_date_2

Tabel_date_3

Tabel_date_4

Tabel_date_5

Tabel_date_6

Tabel_date_7

Tabel_date_8

Tabel_date_9

Tabel_date_10

tabel (afișare: bloc; overflow-x: auto;)

/* CSS suplimentar, doar pentru a da exemplului un aspect: */

tabel (border-collapse: collapse;)

tabel td,th (padding: 10px; chenar: 1px #000 solid;)

Nota: proprietate CSS display: block face ca tabelul să ocupe doar atâta lățime cât are nevoie pentru a găzdui datele fără distorsiuni vizuale. Nu mai mult, fără a se întinde pe toată lățimea spațiului disponibil pe pagină. Chiar dacă lățimea: 100% este adăugat la codul CSS. Exemplu:

Aliosc subditos et theme

Sunt destul de multe servicii online pentru a crea sitemap.xml. Cu toate acestea, o puteți face singur pe computer folosind browser-ul lynx și mai multe utilitare linie de comandă Linux. Următorul este un exemplu de script bash numit „sitemap.sh” care le folosește. Scriptul Bash care creează fișierul sitemap.xml: #!/bin/bash cd /home/me/sitemap/www/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://www.compmiscellanea.com/ > / dev /null cd /home/me/sitemap/www2/ lynx -crawl -traversal -accept_all_cookies -connect_timeout=30 http://compmiscellanea.com/ > /dev/null cat /home/me/sitemap/www2/traverse.dat > > /home/me/sitemap/www/traverse.dat cat /home/me/sitemap/www/traverse.dat | sed -e "s/\\.//g" | sortare | uniq > /home/me/sitemap/sitemap/sitemap.xml sed -i "s/\&/\&\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/ \&apos\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/"/\"\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i " s/>/\>\;/g" /home/me/sitemap/sitemap/sitemap.xml sed -i "s/