Tenho certeza de que a maioria de nós já foi a um carnaval, parque de diversões ou feira de rua onde um artista faz caricaturas. São desenhos engraçados que exageram características da sua cabeça, como olhos, orelhas ou estilo de cabelo. Normalmente, a cabeça da pessoa é desenhada muito grande e seu corpo muito pequeno, muito desproporcional. Eles são muito divertidos e pretendem fazer você rir de si mesmo.
Como Eu reviso as muitas coisas que mudaram com a web moderna e percebi como a marcação da minha página inicial típica mudou. Muito parecido com aqueles desenhos engraçados, o conteúdo da minha tag HEAD aumentou dramaticamente, enquanto o conteúdo da minha tag BODY foi reduzido a quase nada. É claro que hoje em dia eu construo aplicativos dinâmicos de página única com desempenho como um requisito de recurso de primeira classe. Como esses dois requisitos se tornaram proeminentes, o conteúdo do meu BODY ficou extremamente espartano.
Enquanto eu estava olhando para a resposta do meu blog, o que você está lendo, esta manhã notei minha marcação no BODY tinha 30 linhas (incluindo linhas em branco) de HTML e o HEAD era composto de 74 linhas! Uau, mais do que o dobro do tamanho do meu CORPO. Que CABEÇA grande eu tenho, LOL.
Love2Dev
Claro que o site é construído dinamicamente, então no final, dependendo do conteúdo da URL, o conteúdo do BODY se expandirá conforme necessário. Mas quando você solicita meu Blog com uma solicitação preparada, você só obtém a marcação acima no elemento BODY. Para registro, a primeira vez que você solicitar qualquer URL em meu blog, muitas tags retornarão contendo a marcação’principal’para cada visualização e, claro, os modelos de conteúdo.
De volta ao HEAD, ele realmente cresceu em tamanho , principalmente com tags META direcionando diferentes navegadores. As primeiras tags META e TITLE cobrem as coisas básicas que qualquer site deveria ter incluído nos últimos 20 anos, título, descrição, etc.
Depois disso, fica tudo móvel/moderno pela web. Primeiro, a tag ViewPort META, que direciona o navegador como renderizar o conteúdo em dispositivos móveis. Honestamente, à medida que mais e mais tablets e outras telas sensíveis ao toque são comprados, a porta de visualização é uma necessidade absoluta para qualquer site da web incluir. Para obter mais informações sobre o ViewPort META tag leia este excelente artigo da equipe do Internet Explorer .
Em seguida, falo com o Safari para celular, o navegador em todos os dispositivos iOS. Existem duas seções importantes aqui, ícones e como o aplicativo da web deve ser renderizado quando fixado na tela inicial. Conforme a Apple aumentou a resolução da tela em seus dispositivos iOS, o tamanho do ícone associado aos aplicativos também mudou. Eu nem me preocupo mais com a versão mais antiga (57×57), mas incluo imagens dedicadas para imagens de resolução mais alta.
Depois das diretivas de ícone do aplicativo da web, digo ao Safari que o aplicativo é compatível com o aplicativo da web, o que significa que pode ser executado diretamente da tela inicial e não usar o cromo do Safari. Basicamente, faz meu aplicativo da web parecer e se comportar como um aplicativo iOS nativo, sem algumas APIs de dispositivos muito desejadas. A última tag META do iOS informa ao sistema operacional qual deve ser a cor da barra de status na parte superior da tela; preto, cinza ou transparente.
Agora, no Internet Explorer, maravilhe-se com muitas coisas boas aqui. Primeiro, em vez de usar a marca TITLE, o Windows permite que você forneça um nome de aplicativo. A princípio você provavelmente perguntará por que não usar o TITLE? Minha resposta é que você deve ter um título específico de URL, mas o aplicativo deve ter um nome dedicado que seja independente de URL e, claro, se encaixe perfeitamente em um bloco dinâmico.
Em seguida, vem uma série de tags META que conduzem o site fixo do Internet Explorer e as experiências de blocos dinâmicos. Não vou entrar em detalhes aqui sobre essas tags hoje, mas você pode ler sobre as metatags de sites fixos, Http://msdn.microsoft.com/en-us/library/ie/dn255024 (v=vs.85).aspx. Apenas algumas notas rápidas. Verifique se os caminhos do logotipo fazem parte do domínio, eles não podem ser hospedados em um subdomínio, descobri da maneira mais difícil. Além disso, ainda não consegui ativar as atualizações de blocos ativos para este blog.
Em seguida, notei a tag META http-equiv e disse, o quê ???? Não achei nada neste até agora. Sei que puxei do Projeto HTML5 Mobile Boilerplate . Meu palpite é que força fontes claras e acho que é alguma coisa legado do IE6/7 dias e possivelmente um problema em alguns smartphones mais antigos.
Finalmente, adiciono uma referência à minha folha de estilo e ao script do Google Analytics. Normalmente, eu diria que não há SCRIPTs no HEAD, mas o Google Analytics se comporta bem e carrega de forma assíncrona, o que significa que não carregará o script até que a página seja renderizada.
É isso, uma revisão rápida do conteúdo HEAD de um aplicativo da web moderno típico. É um conjunto muito maior de diretivas do que era comum alguns anos atrás, mas realmente conduz algumas experiências de usuário muito melhores com blocos ativos e aplicativos da web da tela inicial. A sua CABEÇA é maior do que o seu CORPO? Talvez devesse ser.
