Quadro (World Wide Web)
No contexto de um navegador da Web , um quadro é uma parte de uma página da Web ou janela do navegador que exibe conteúdo independente de seu contêiner, com a capacidade de carregar conteúdo de forma independente. Os elementos HTML ou de mídia mostrados em um frame podem vir de um site diferente dos outros elementos de conteúdo exibidos, embora essa prática, conhecida como framing , [1] seja hoje frequentemente considerada uma violação da política de mesma origem e tenha foi considerado uma forma de violação de direitos autorais .
Em HTML , um conjunto de quadros é um grupo de quadros nomeados para os quais as páginas da Web e a mídia podem ser direcionadas; um iframe fornece um quadro para ser colocado dentro do corpo de um documento.
Desde o início dos anos 2000, o uso de conjuntos de quadros foi considerado obsoleto devido a questões de usabilidade e acessibilidade, e o recurso foi removido do padrão HTML5 .
Tags e atributos
Os quadros em HTML são criados usando o <frameset></frameset>
par de tags. A <frameset>
tag é uma tag de contêiner para todas as outras tags usadas para criar quadros. A <frameset>
tag substitui a <body>
tag nos documentos do conjunto de quadros. A <frameset>
tag define como dividir a janela em quadros.
Cada conjunto de quadros define um conjunto de linhas ou colunas. Se o usuário definir os quadros usando o rows
atributo, os quadros horizontais serão criados. Se o usuário definir os quadros usando cols
, os quadros verticais serão criados.
O <noframes>
elemento pode ser incluído para que navegadores com frames desabilitados (ou navegadores que não suportam frames) possam exibir algo para o usuário, como neste exemplo:
< frameset cols = "85%, 15%" >
< frame src = "http://www.example.com/frame_1.html" name = "frame_1" >
< frame src = "http://alt.example. com/frame_2.html" name = "frame_2" >
< noframes >
O seu navegador não suporta frames.
< a href = "http://www.example.com/frame_1.html" > Clique aqui </ a > para visualizar o quadro 1.
< a href = "http://alt.example.com/frame_2.html" > Clique aqui </ a > para o quadro 2.
</ noframes >
</ frameset >
Os conjuntos de quadros têm um border
atributo. Se definido como um inteiro maior que 0, o usuário pode redimensionar os quadros arrastando essa borda, a menos que um noresize
atributo esteja presente em um elemento de quadro. Se a borda for definida como 0, nenhuma borda será exibida e o conteúdo em diferentes quadros se aproximará sem delimitação.
O iframe
elemento é usado inline dentro de um corpo HTML normal e define o conteúdo inicial e o nome de forma semelhante ao frame
elemento. Qualquer texto dentro de um <iframe></iframe>
par de tags será exibido em navegadores que não entendem a tag iframe.
< iframe src = "http://www.example.com/frame_1.html" height = "480" width = "640" >
Seu navegador não suporta iframes. < a href = "http://www.example.com/frame_1.html" > Clique aqui </ a > para visualizar o conteúdo.
</ iframe >
História
O Netscape Navigator 2.0 introduziu os elementos usados para quadros em março de 1996. Outros fornecedores de navegadores, como a Apple com Cyberdog , seguiram no final daquele ano. [2] Naquela época, a Netscape propôs quadros ao World Wide Web Consortium (W3C) para inclusão no padrão HTML 3.0. [3]
Os frames foram usados para exibir e navegar nas primeiras revistas online e aplicativos da web , como serviços de webmail e sites de bate -papo na web . Os quadros tinham a vantagem de permitir que os elementos fossem exibidos em todo o site sem exigir recursos do servidor, como inclusões do lado do servidor ou suporte CGI . Esses recursos não eram comuns nos primeiros servidores da Web acessíveis ao público.
Os primeiros sites costumavam usar um quadro no topo para exibir um banner que não podia ser rolado. Esses quadros de banner às vezes incluíam o logotipo do site, bem como publicidade. [4]
XHTML , planejado como um sucessor do HTML 4, removeu todos os quadros na versão 1.1. A eventual substituição pretendida foi XFrames , [5] que tenta resolver o problema de endereçar um conjunto de quadros preenchido por meio de URIs compostos .
O padrão HTML5 posterior , que adotou uma abordagem diferente do HTML 4, também remove conjuntos de quadros. [6] O iframe
elemento, no entanto, permanece, com várias opções de "sandboxing" destinadas ao compartilhamento de conteúdo entre sites. [7]
Vantagens
Ao permitir que o conteúdo fosse carregado e navegado de forma independente, os frames ofereciam várias vantagens sobre o HTML simples em uso quando foram desenvolvidos pela primeira vez:
- Simplificando a manutenção do conteúdo compartilhado em todas ou na maioria das páginas, como dados de navegação. [8] Se um item precisa ser adicionado a um menu de navegação da barra lateral, o autor da página da Web precisa alterar apenas um arquivo de página da Web, enquanto cada página individual em um site tradicional sem frames teria que ser editada se o menu da barra lateral aparecesse em todos eles.
- Reduzindo a quantidade de largura de banda necessária ao não baixar novamente as partes da página que não foram alteradas.
- Permitindo que várias informações sejam visualizadas lado a lado, com a capacidade de cada seção ser rolada de forma independente. Isso pode incluir a comparação lado a lado de duas fotos ou vídeos, ou duas maneiras diferentes de entender algo, como uma página de texto de rolagem independente ao lado de vídeo, imagens, animação, objetos giratórios 3D etc.
- Permitir que notas de rodapé ou digressões apareçam em uma seção dedicada da página quando vinculada, para que o leitor não perca seu lugar no texto principal.
Críticas
A prática de enquadrar conteúdo HTML levou a inúmeras críticas, a maioria centrada em questões de usabilidade e acessibilidade . Esses incluem:
- O enquadramento quebra a identidade entre o conteúdo e o URL conforme exibido no navegador, dificultando o link ou o marcador de um item específico de conteúdo dentro do conjunto de quadros [9]
- A implementação de frames é inconsistente em diferentes navegadores [9]
- Os navegadores que renderizam o material linearmente não lidam bem com os quadros. [10]
- Programas de leitura de tela
- navegadores de texto ou áudio
- Navegadores de e- mail como o Agora [11]
- Navegadores móveis
- O enquadramento complica a indexação da web e pode ser prejudicial para a otimização do mecanismo de pesquisa . [12]
- O enquadramento confunde os limites entre o conteúdo em diferentes servidores, [13] o que levanta questões de violação de direitos autorais [14]
- Os visitantes que chegam de mecanismos de pesquisa podem chegar a uma página destinada a exibição em um quadro, resultando na impossibilidade de o visitante navegar para o restante do site [15]
- Os quadros alteram o comportamento do botão Voltar. [15]
- Os usuários geralmente não esperam que os navegadores imprimam quadros da maneira que eles fazem. [14]
- Links externos em páginas da Web que usam quadros podem fazer com que outras páginas apareçam no conjunto de quadros, pois o comportamento padrão de um link é carregar no quadro atual se o autor não especificar o contrário. Isso pode ser usado por webmasters sem escrúpulos para fazer parecer que o conteúdo de outro site era realmente parte do site que hospeda o conjunto de quadros.
- Se a resolução da tela ou o tamanho da janela do navegador for muito baixo, cada quadro terá barras de rolagem que podem parecer confusas e ocupam espaço já limitado. Esse comportamento geralmente resultava mais do design ruim do site (layouts fixos em vez de layouts fluidos), em que nem todos os recursos do conjunto de quadros foram colocados em uso adequado.
Esse comportamento pode ser mitigado por:- desabilitar a rolagem para quadros menores que normalmente não exigem uma barra de rolagem;
- usando características de design fluido em páginas de destino em vez de designs fixos, para que o conteúdo não cause barras de rolagem horizontais em primeiro lugar.
Alternativas
À medida que a tecnologia da web se desenvolveu, muitos dos propósitos para os quais os frames eram usados tornaram-se possíveis de forma a evitar os problemas identificados com os frames.
- Cascading Style Sheets (CSS) permitia que os elementos de uma página fossem rolados independentemente (usando a
overflow
propriedade) ou mantidos na tela enquanto outro conteúdo era rolado (usandoposition:fixed
) - Lado do servidor Inclui conteúdo compartilhado permitido para ser editado uma vez e entregue automaticamente ao cliente como parte de uma página finalizada; à medida que a CPU do servidor e as velocidades de conexão aumentavam, o trabalho extra necessário para fazer isso rapidamente se tornava uma consideração menor.
- CGI e linguagens de script orientadas para a web e estruturas de desenvolvimento da web , como PHP e Active Server Pages , bem como sistemas de gerenciamento de conteúdo com suporte de banco de dados , como WordPress , forneceram opções muito mais ricas para manter o conteúdo e fornecer navegação.
- O script do lado do cliente e o HTML dinâmico permitiam que partes de uma página fossem substituídas visualmente com base nas ações de um usuário. Isso permitiu muito mais flexibilidade para mostrar conteúdo "lateral", como notas de rodapé ou instruções, pois agora eles podem ser exibidos e ocultos em qualquer lugar da página, em vez de exigir um quadro predefinido.
- O AJAX permite a exibição dinâmica dentro de uma página de conteúdo mesmo quando ela precisa ser buscada no servidor, por exemplo, com base no usuário conectado ou eventos em outro lugar.
Nem todos os problemas identificados com conjuntos de quadros são eliminados usando essas abordagens alternativas; por exemplo, problemas com navegação Voltar/Avançar, bookmarking e indexação permanecem em muitos sites que fazem uso pesado de navegação DHTML/AJAX.
Veja também
- Aspectos de direitos autorais de hiperlinks e enquadramentos
- Quadros
- Vinculação em linha
- Links diretos
- Framekiller
- Web design sem mesa
Referências
- ^ "Conectando-se a outros sites" . 2 de abril de 2013.
O que diferencia o enquadramento é que, em vez de levar o usuário ao site vinculado, as informações desse site são importadas para a página original e exibidas em um "quadro" especial. Tecnicamente, quando você está visualizando informações enquadradas, seu computador está conectado ao site que está fazendo o enquadramento, não ao site cuja página aparece no quadro.
- ^ Garaffa, Dave (23 de dezembro de 1996). "Um presente da Apple: Cyberdog 2.0a1" (comunicado de imprensa). Internet . com . Arquivado a partir do original em 17 de agosto de 2000 . Recuperado em 14 de abril de 2011 .
- ^ Ladd, Eric. "Usando HTML 3.2, Java 1.1 e CGI; Ch. 13, Frames" . Arquivado a partir do original em 30 de outubro de 2007.
- ^ Shafer, Dan (1996). Magia de JavaScript e Netscape . Scottsdale, AZ: Coriolis Group Books. pág. 31 . ISBN 978-1-883577-86-5.
- ^ "Rascunho de trabalho XFrames" . W3C.
- ^ Diferenças entre HTML 5 e HTML 4 : "Os seguintes elementos não estão em HTML 5 porque seu uso afetou a usabilidade e acessibilidade para o usuário final de forma negativa: frame, frameset, noframes"
- ^ Diferenças entre HTML 5 e HTML 4 : "novos recursos de sandboxing para iframe"
- ^ "Conjuntos de quadros" .
- ^ a b Nielsen, Jakob (dezembro de 1996). "Quadros são péssimos na maioria das vezes" .
- ^ "Você deve usar quadros?" . Curso de código HTML.
- ^ "Como fazer apenas sobre qualquer coisa do GEBoyd por e-mail - Parte 1" . GeoCidades . 11 de agosto de 2000. Arquivado a partir do original em 17 de agosto de 2000 . Recuperado em 24 de junho de 2010 .
- ^ Moore-Eded, Piers. "Fundamentos de SEO 1" . Lewes SEO . Recuperado em 25 de fevereiro de 2012 .
- ^ "Eu odeio o clube de quadros" .
- ^ a b "Por que os quadros são tão maus?" .
- ^ a b "Os prós e contras dos quadros em páginas da Web" .