miniatura|Exemple de navegació per pestanyes a Mozilla Firefox La navegació per pestanyes és una característica que permet navegar per diferents aplicacions o per diferents pàgines web alhora, mantenint-ho tot dins d'una sola finestra, facilitant la navegació entre elles i consumint menys recursos del sistema.
El nom és una metàfora que utilitza el terme pestanya en anglès, "tab", per raó de les diferents pestanyes que tenen les diferents pàgines que es mostren amb una pestanya a la part superior, que precisament, són les que permeten triar quina es vol mostrar.
Història Inicialment adoptat l'any 1994 per Opera segons la Multiple document interface (interfície de múltiples documents) , mentrestant va ser provat per InternetWorks de BookLink Technologies l'any 1994. El mètode que s'adopta actualment és el de múltiples pàgines web obertes simultàniament i seleccionables a través d'una pestanya situada a la part superior del navegador i, posteriorment, per al públic i OS19 l'any següent per Opera i després per altres com Mozilla Firefox, Konqueror, Safari i Internet Explorer (a partir de la versió 7). Anteriorment (abans d'aquesta tecnologia), s'obria una finestra dedicada per a cada lloc (adreça IP). Aleshores, les finestres es podrien superposar horitzontalment o verticalment.
Característiques El concepte de sessió d'ordinador va lligat a la introducció de les pestanyes. La sessió es pot considerar com un conjunt de pestanyes. Per a la navegació fora de línia és necessari desar les pàgines individuals obertes; Navegant amb pestanyes, podeu desar la sessió, és a dir, s'obren totes les pàgines a la finestra del navegador que utilitzeu. Si passeu el ratolí per sobre de la pestanya, es mostra l'adreça completa, en cas que no hi hagi prou espai disponible. Tenir moltes pestanyes obertes alhora crea un altre inconvenient: per trobar un lloc en concret, cal desplaçar-se per totes les pestanyes, o per les pestanyes de la part superior, i comprovar l'adreça. Alguns connectors solucionen aquest problema.
Una extensió de Firefox, Showcase, mostra un resum de totes les pàgines que heu obert durant la sessió en una sola pestanya. Opera té una característica similar, que us permet crear una pestanya amb un enllaç a un lloc web i una vista prèvia desada localment. Tanmateix, aquesta és una pàgina estàtica, no generada automàticament com la de Firefox-Mozilla. A Opera, Firefox i Internet Explorer (gràcies al connector IE7Pro ) és possible definir ordres personalitzades vinculades als moviments del ratolí : entre aquestes, es pot configurar el desplaçament d'una pestanya a la següent amb un determinat moviment del ratolí (botó dret, botó esquerre, roda, etc.).
Internet Explorer (obsolet a favor de Microsoft Edge que també admet la navegació per pestanyes ) permet gestionar grups de pestanyes o carpetes de pestanyes, amb la possibilitat de desar, actualitzar o eliminar totes les pestanyes d'un mateix grup en una sola operació. Una opció similar està present a Opera, a partir de la versió 11.5.7, a més de la possibilitat d'ajustar la longitud i l'amplada de les previsualitzacions, recuperar pestanyes tancades per error, bloquejar el tancament d'una pestanya.
Google Chrome, nascut l'any 2008, va ser el primer programari que va utilitzar pestanyes com a processos independents de Windows. Si l'obertura d'una pàgina web alenteix la connexió, està bloquejada pel tallafoc o l'antivirus, l'usuari pot tancar la pàgina única, mantenint les altres obertes amb Chrome obert. Anteriorment, era inevitable que es perdés tota la sessió, ja que el navegador era un únic procés informàtic. En prémer CTRL+ALT+SUP l'usuari veu obertes les pestanyes individuals amb Chrome, mentre que amb altres programes només apareix el nom del programari.
Entre les característiques presents en diversos navegadors relacionades amb la navegació per pestanyes:
execució d'instruccions en una selecció múltiple de pestanyes no seqüencials: obrir en una finestra separada, imprimir, desar, afegir als preferits; executar macros i tasques programades, com ara l'actualització automàtica; comparació entre la darrera versió actual de la pestanya i una anterior desada localment; vista prèvia del lloc visible en format "miniatura"; notificació de canvis o actualitzacions a una pàgina web; desar la sessió actual, amb totes les pestanyes obertes; llistes de salt a parts específiques del lloc que visiteu amb freqüència; navegació fora de línia (amb obertura d'enllaços entre pàgines desades localment); organització de pestanyes en carpetes i subcarpetes, exportables o imprimibles.
Exemples alt=Esempio di navigazione a schede sul web. Da una scheda all'altra l'utente non cambia pagina ne URL|miniatura|310x310px| Exemple de navegació per pestanyes a l'entorn web. D'una pestanya a una altra l'usuari no canvia de pàgina ni d'URL alt=Form web compilabile con navigazione a schede. Ogni scheda contiene un pezzo di form da compilare.|miniatura|310x310px| Formulari web compilable amb navegació per pestanyes. Cada pestanya conté un formulari per omplir. Només podeu accedir a la pestanya següent després de completar l'anterior alt=Confronto tra un layout a tutta pagina leggendo i contenuti tramite scrolling, tramite navigazione a schede e tramite pagine differenti|miniatura|334x334px| Comparació entre un disseny de pàgina sencera llegint els continguts mitjançant el desplaçament, la navegació per pestanyes i diferents pàgines alt=Navigazione a schede (Leggi, Modifica,...) su Wikipedia quando si attiva l'opzione di modifica di una pagina|miniatura|310x310px| Navegació per pestanyes (Llegir, Editar,...) a la Viquipèdia quan activeu l'opció d'edició d'una pàgina
HTML i CSS <div class="tab"> <button class="tablinks" onclick="openCity(event, 'London')">Londra</button> <button class="tablinks" onclick="openCity(event, 'Paris')">Parigi</button> <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button> </div>
<div id="London" class="tabcontent"> <h3>London</h3> <p>Londra è la capitale dell'Inghilterra</p> </div>
<div id="Paris" class="tabcontent"> <h3>Paris</h3> <p>Parigi è la capitale della Francia</p> </div>
<div id="Tokyo" class="tabcontent"> <h3>Tokyo</h3> <p>Tokyo è la capitale del Giappone</p> </div>.tab { overflow: hidden; border: 1px solid #ccd; background-color: #f3f3f3; } .tab button { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 18px 22px; transition: 0.2s; } .tab button:hover { background-color: #dcc; } .tab button.active { background-color: #ccd; } .tabcontent { display: none; padding: 8px 14px; border: 1px solid #ccd; border-top: none; }
AJAX HTML :<ul id="nav"> <li><a href="Pagina_1.html">Pagina 1</a></li> <li><a href="Pagina_2.html">Pagina 2</a></li> <li><a href="Pagina_3.html">Pagina 3</a></li> </ul>
<div id="ajax-content">Testo di default</div>JavaScript :$(document).ready(function() { $("#nav li a").click(function() {
$("#ajax-content").empty().append("<div id='loading'><img src='images/loading.gif' alt='Loading' /></div>"); $("#nav li a").removeClass('current'); $(this).addClass('current');
$.ajax({ url: this.href, success: function(html) { $("#ajax-content").empty().append(html); } }); return false; }); }); alt=Esempio di navigazione a schede "accordion"|miniatura|Exemple de navegació amb pestanyes "acordió".
Acordió L'acordió és un element de control gràfic que comprèn una llista d'elements apilats verticalment, com ara etiquetes o miniatures. Cada element es pot "ampliar" o "replegar" per revelar el contingut associat amb aquest Aquest és un tipus de navegació per pestanyes
El terme és una metàfora basada en l'acordió musical en el qual les seccions de manxa es poden expandir estirant cap a fora
Exemple
HTML:<button class="accordion">Sezione 1</button> <div class="panel"> <p>Lorem ipsum...</p> </div>
<button class="accordion">Sezione 2</button> <div class="panel"> <p>Lorem ipsum...</p> </div>
<button class="accordion">Sezione 3</button> <div class="panel"> <p>Lorem ipsum...</p> </div>CSS:.accordion { background-color: #fef; color: #454; cursor: pointer; padding: 20px; width: 100%; text-align: left; border: none; outline: none; transition: 0.3s; } .active, .accordion:hover { background-color: #ccd; } .panel { padding: 0 28px; background-color: white; display: none; overflow: hidden; }JavaScript:var acc = document.getElementsByClassName("accordion"); var i;
for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); }
Pros i contres A favor La navegació per pestanyes permet presentar més contingut a l'usuari en un espai limitat. Útil per a dispositius mòbils on no teniu gaire espai a la pantalla. Als navegadors d'escriptori, tan bon punt es recupera el contingut de la pestanya activa del servidor, es pot mostrar a l'usuari. La resta de cartes es poden carregar sota demanda mitjançant Ajax. Això proporciona una bona experiència d'usuari, ja que les dades estan disponibles ràpidament per a l'usuari.
En contra El contingut de pestanyes diferents no es pot mostrar al mateix temps. La navegació per pestanyes no s'ha d'utilitzar mai quan hi ha un cas d'ús en què l'usuari hagi de veure/comparar dades de diverses pestanyes. Un altre problema important és que les pestanyes són processos que s'interfereixen entre si, provocant inestabilitat del programa; això succeeix la totalitat dels programes que incorporen aquesta funció; una solució és gestionar les pestanyes com a processos separats, Google Chrome és el primer navegador amb aquesta funció, en cas que la pestanya es "pengi" no afecta a les altres, aquesta innovació és molt important, ja ha estat implementada a Apple Safari i és possible que sigui implementada a la resta dels navegadors.
Referències
Enllaços externs
Categoria:Interacció persona-ordinador Categoria:Navegadors web