Artigo Introdução de wulin.com (www.vevb.com): Qual a profundidade da água na página front-end?
Qualquer um que trabalhe na Internet basicamente escreve algumas linhas de HTML. As pessoas que usaram o Word também podem fazer páginas regulares com o Dreamweaver, para que a maioria das pessoas pense naturalmente que o desenvolvimento de páginas não possui muito conteúdo técnico e é muito simples. Não apenas esse entendimento comum, mas também há muitas dúvidas para os profissionais: não há problema em implementar a página front-end; compatibilidade, casos pequenos; Integração da imagem e tem sido usada o tempo todo ... que outros problemas podem ser encontrados? Gargões, tetos, transformações e maneiras de sair são amplamente discutidos entre os profissionais. Não há realmente nenhum problema? O Centro de Tecnologia do Front-End Net Email foi estabelecido por vários anos, e parece que existem tópicos infinitos a serem discutidos, e muitas vezes há novas idéias para animar todos. Então, quais são os requisitos para o desenvolvimento da página e o que mais fazer e a profundidade da água aqui, vamos pegá -la.A percepção da extremidade frontal da página parece variar em momentos diferentes. Nos primeiros dias da Internet, os carros pequenos ainda eram mais caros que as casas, e bolos de gergelim e vermicelli eram usados apenas para comer, e os crisântemos eram usados apenas para fazer chá. Naquela época, o estilo de design da página era relativamente único e os requisitos de página correspondentes eram relativamente simples. O navegador naquela época era basicamente o mundo do IE6. O JavaScript era apenas sinônimo de efeitos especiais da página da web. A página HTML em si não atraiu muita atenção. Parecia que, desde que você possa usar o DIV ou até a tabela para adicionar CSS ao posicionamento auxiliar da imagem, seria bom reservar o conteúdo da página e esse conceito existia por um longo tempo. Com o enriquecimento do conteúdo da página, o desenvolvimento do estilo de design, o aumento da complexidade da interação, a aplicação do AJAX e a atualização dos navegadores fizeram com que todos prestem atenção à própria página mais básica novamente. Então o que é discutido muito é a compatibilidade do navegador. Ao encontrar problemas, o mais apaixonado é procurar hacks na Internet e depois repreender o IE6 e 7 ... depois de fazer tudo isso, parece que encontrei um gargalo novamente e comecei a encontrar uma saída. Vamos começar com este estágio.
Implementar renderizações é o trabalho mais básico
O rascunho visual é expresso através do código da página, que inclui duas demandas básicas: 1. Ele pode realmente refletir o rascunho visual; 2. Pode ser compatível através do navegador. Para alcançar essas duas demandas, precisamos ter uma atitude de detalhe e um certo grau de habilidades de página. Se pudermos concluir esses dois conteúdos, podemos entrar nas fileiras dos profissionais na extremidade frontal da página, mas isso significa que podemos ser competentes para o desenvolvimento de páginas? Não, está apenas começando!
Comunicação com designers e participação do projeto
A comunicação é importante. Deixe-me fazer algumas perguntas primeiro: discutimos com os designers que alguns efeitos têm um impacto maior na eficiência da renderização dos navegadores de baixo custo? Você já discutiu alguns efeitos que podem ser implementados no CSS3 para tornar a estrutura mais concisa e clara? Você já perseguiu o equilíbrio em código e visão? O desenvolvimento do front-end da página é para usuários básicos, e o código escrito também é aplicado diretamente ao navegador. Somos obrigados a ser responsáveis pela estabilidade e eficiência da página. Também geralmente encontramos o design do projeto sob a pressão geral do progresso e o design é realizado simultaneamente com o desenvolvimento front-end da página. Neste momento, é mais necessário obter o máximo de informações do projeto e entender o que precisamos fazer. Isso pode nos ajudar a considerar completamente a expansão de reutilização e estrutura.
Boa estrutura de página
A redação da estrutura da página é como construir uma base de construção. A qualidade do código CSS, desenvolvimento JS, desenvolvimento de fundo e expansão futura de páginas, iteração e ajuste de página. Depois de receber o rascunho visual, não esteja ocupado começando, observe e pense mais. Primeiro, analise o layout, divida a estrutura, depois planeje a estrutura e escreva o código. Especialmente em projetos em larga escala, o uso racional do desenvolvimento modular tem benefícios consideráveis, seja realizado na manutenção geral ou expandida.
Sobre Hack
Muitos estudantes pesquisam mais on -line por hacks ao desenvolver páginas. Quer confiemos inteiramente em hacks para alcançar a compatibilidade da página, a resposta é não. As pessoas costumam descrever o IE6 dizendo que nos deram uma mentira, mas temos que contar mais centenas de mentiras para cumprir essa mentira. Não negar que o IE6 geralmente nos faz vomitar sangue em nossas bocas, mas isso não significa que podemos sentir -se à vontade usando mais mentiras para compensar isso. Na maioria dos casos, você pode ajustar a estrutura HTML alterando suas idéias ou usar alguns CSs inexplicáveis, mas relativamente seguros para matar hacks. Ninguém pode prever quando o uso do hack nos levará a cair em um grande golpe. Por exemplo, acionar layout ou posição: parente pode ajudar a resolver muitos problemas do IE6.
Belo código
Atualmente, muitos projetos da Web têm funções complexas e sua escala de código se tornará enorme. Como melhor desenvolvimento e manutenção colaborativa é um problema que enfrentamos. Precisamos considerar melhorar o planejamento unificado e devemos desenvolver bons hábitos de desenvolvimento de código para ficar à vontade ao enfrentar várias situações. Olhando através do código da página, ver o uso razoável da etiqueta, boas anotações, estrutura clara de código e CSS precisa não apenas como apreciar uma obra de arte, mas também reduzir os custos de comunicação para o desenvolvimento a jusante e o desenvolvimento colaborativo. Que razão temos que não fazer isso? Para dar um exemplo negativo: o abuso de div é um problema típico agora. Conte para ver quantas tags você usa? Diferentes semânticas devem usar o código de tag correspondente, especialmente o HTML5 fornece tags semânticas mais ricas. Todos estão esperando a acusação no campo de batalha. Vamos libertá -los!
Desenvolvimento de página acessível
Acessibilidade e facilidade de uso são coisas muito subjetivas e amigas. As páginas que as pessoas comuns parecem perfeitamente apresentadas podem não parecer necessariamente tão atenciosas entre os grupos especiais. Devemos nos sentir culpados quando as pessoas cegas usam o software de leitura de tela para entrar em um loop dentro de uma determinada área da página. Só se pode dizer que os sites domésticos atualmente prestam muito menos atenção a isso, o que exige que trabalhemos juntos para permitir que mais pessoas sintam nosso entusiasmo. >
Garantir eficiência
Como uma parte relativamente fronteiriça do desenvolvimento do projeto, o desenvolvimento de páginas pode precisar ser concluído o mais cedo possível para ganhar tempo para o projeto, o que exige que melhoremos a eficiência o máximo possível. Se você quiser fazer isso bem, primeiro afie suas ferramentas. Além da formação de experiência prática e hábitos de código que podem nos ajudar a melhorar a eficiência, se você deseja melhorar sua capacidade de controlar o progresso de seu próprio desenvolvimento, existem muitas ferramentas auxiliares que podem nos ajudar a desenvolver páginas. Por exemplo, o uso de menos ou SASS pode nos ajudar a expandir e organizar o CSS, melhorando bastante a eficiência da escrita do CSS e aumentando a manutenção. Por exemplo, você pode usar os blocos automáticos de conclusão e código personalizados da Zen Coding para permitir que você aponte sua espada como se estivesse voando. Eu até vi palavras -chave de bloco de código que melhoram a velocidade de desenvolvimento através de métodos de entrada personalizados. Se você explorar mais, definitivamente encontrará a ferramenta mais adequada para si mesmo.
Otimização para servidores
O desenvolvimento da página também requer a compreensão da otimização do servidor e a minimização da carga no servidor. Por exemplo, o CSS Sprite é um exemplo típico de redução do número de solicitações do servidor. No desenvolvimento do front-end da página de e-mail da NetEase, estamos constantemente fazendo várias otimizações, como buscar constantemente um equilíbrio entre o tamanho do arquivo e o número da solicitação do servidor; Para melhorar a utilização do cache o máximo possível, foram adotadas atualizações de patches; Os nomes das classes foram ofuscados e compactados para evitar nomes excessivamente longos; Base64 foi usado para reduzir o número de solicitações e outras medidas. Esses são os resultados de trade-offs abrangentes e otimizações gerais precisam ser consideradas em todos os aspectos. Porque quando o número de visitas à página atinge uma certa ordem de magnitude, mesmo a menor otimização alcançará resultados consideráveis, e até o menor problema pode formar um grande desastre.
Abrace html5
Esta é uma era cheia de oportunidades. O advento da era HTML5 criou maiores oportunidades com a ascensão da Internet móvel, e há tantas coisas que valem a pena aprender e descobrir. O HTML5 fornece uma rica interface API JS, que precisamos estudar; O esplendor do CSS3 atraiu atenção suficiente, que precisamos estudar; Como desenvolver páginas mais adaptáveis em dispositivos móveis exige que estudamos ...
Continue com fome continue tolo
Quanto mais eu peguei a água, descobri que o fundo ainda estava profundo e o fundo não estava de fundo. Quanto mais eu estudava o conteúdo acima, mais descobri que mais montanhas e rios precisavam ser escalados. Fique com fome, use os olhos para descobrir e descobrir e enriquecer constantemente suas habilidades para encontrar a posição e romper gargalos. Como diz o ditado, apenas construindo uma casa de alto nível, você pode obter resultados naturais. Este artigo foi formado porque discuti o problema do gargalo com meus colegas antes. Eu queria encontrar o posicionamento para mim e para os alunos na extremidade frontal da página para resolver minhas idéias. Receba uma frase do discurso do CEO da Apple em Stanford, fique com fome e fique tolo e compartilhe com todos.