No campo atual da Internet, o termo padrão WEB está se tornando cada vez mais popular nos conceitos de usuários e desenvolvedores web. No entanto, o conceito de padrões WEB é muito geral e as pessoas têm opiniões diferentes sobre o que é exatamente um padrão WEB e o que ele contém. No fórum do concurso de modelos ShopEx "E-Dong Cup", patrocinado pela China E-Dong.com, os concorrentes e revisores falaram com entusiasmo sobre o que são os padrões WEB e as "técnicas de expressão" de códigos de modelo. Este artigo explica a opinião do autor sobre os padrões WEB. Para que todos possam compreender os conceitos geralmente referidos pelos padrões WEB.
Não existem os chamados “padrões”, apenas sugestões
Em primeiro lugar, você deve entender que não existem padrões WEB reais. O que realmente existem são algumas organizações que promovem a padronização, como os padrões ISO e Ecma. Quando a maioria das pessoas se refere aos padrões WEB, na verdade estão se referindo a algo do W3C. Mas o W3C não estabelece realmente padrões, apenas fornece recomendações. Nas suas próprias palavras: “Uma recomendação do W3C é uma especificação ou conjunto de diretrizes que, após extensa construção de consenso, recebeu o endosso dos membros do W3C e do Diretor. O W3C recomenda a ampla implantação de suas recomendações.”
O significado dos padrões WEB
De modo geral, os padrões WEB são compostos pelas seguintes partes:
• HTML/XHTML válido
•A semântica do código é clara
•Separação de conteúdo (HTML/XHTML) apresentação (CSS) e interação (Javascript)
Para algumas pessoas, os padrões da web significam tudo isso, enquanto para outras podem ser apenas um pouco disso. Mas o mais importante é que essas três partes são essenciais para a construção de um ótimo site.
HTML/XHTML válido
Vamos começar com o primeiro ponto: o código válido é o primeiro passo em direção aos padrões WEB. Para a maioria das pessoas, válido significa apenas código HTML/XHTML, mas não se esqueça que também existe validação CSS. Verificar a validade do seu código HTML/XHTML significa basicamente se o código da sua página da web está em conformidade com o tipo de documento selecionado.
Escolher o tipo de documento correto é importante, pois determina como o código HTML/XHTML é interpretado e como o layout difere em diferentes navegadores. O código verificado pode ser bem exibido em diferentes navegadores sem a necessidade de considerar muita compatibilidade do navegador. Ao validar, você pode descobrir códigos potencialmente afetadores na página, corrigi-los para tornar o processo de desenvolvimento mais eficiente e reduzir custos de manutenção futuros.
Ferramenta de verificação de código
• Serviço de validação de marcação W3C
• Serviço de validação CSS W3C
• Complemento Validador HTML do Firefox
• Barra de ferramentas do desenvolvedor do Internet Explorer
A semântica do código é clara
Cada elemento que existe na página deve ter seu significado e ser capaz de expressá-lo com precisão. Simplificando, significa escolher os elementos apropriados com base no contexto. Os exemplos são os seguintes
Este código não está claro
| A seguir está o conteúdo citado: <div class="page-heading">Título da página</div> <a class="menu-item" href="/item-1">Item 1 do menu</a> |
Com o mesmo desempenho, a semântica fica muito mais clara
| A seguir está o conteúdo citado: <h1>Título da página</h1> <ul class="menu"> |
Na verdade, é muito simples deixar clara a semântica do código. Use h1-h6 para definir o título, use p para definir o parágrafo do artigo, use ul, ol, etc. . . Isso ajudará você a encontrar facilmente as partes do código desejadas e poderá reduzir significativamente o tempo de carregamento da página, pois reduz a quantidade de código. E não se esqueça, isso também é útil para SEO. Uma semântica clara pode ajudar o Google e outros mecanismos de pesquisa a indexar melhor o seu site.
Separação de conteúdo (HTML/XHTML) apresentação (CSS) e interação (Javascript)
Há muitas razões pelas quais é crucial separar a apresentação do conteúdo (HTML/XHTML), a apresentação (CSS) e a interatividade (Javascript). Eles têm diferentes divisões de trabalho e a forma de usá-los razoavelmente requer uma consideração cuidadosa.
Razões para separação
Desempenho: Arquivos externos como css e js serão salvos no cache do usuário após o primeiro carregamento, o que economiza tempo de carregamento subsequente e melhora a experiência.
Geral: Você sempre pode encontrar os códigos e colocá-los com precisão.
Usabilidade: você sempre pode referenciar facilmente o código e reutilizá-lo em todo o seu site.
Manutenção: Todos os códigos relacionados ao desempenho e interação são armazenados centralmente para fácil manutenção.
Como se aproximar dos usuários?
Algumas pessoas dizem que leva mais tempo para tornar um site mais próximo dos usuários, mas na verdade, contanto que você cumpra os três pontos mencionados no artigo, você já deu um grande passo no caminho para se tornar mais próximo de Usuários.
O código correto e eficaz tornará mais fácil encontrar conteúdo incorreto na página. Código com semântica clara pode suportar melhor dispositivos portáteis e também tornar o site mais navegado pelos usuários sem modificação de CSS. A separação entre estrutura, desempenho e interação permite que o site mantenha funções básicas mesmo sem suporte a JavaScript. É claro que você pode aprimorar a experiência do site adicionando uma camada de JavaScript, mas essa definitivamente não é a parte mais básica da operação de um site.