2008 15 de maio de 2008

Melhores Práticas: Trabalhando com JavaScript

Incluir JavaScript está no fundo do documento HTML

Se você não tem document.write (ou qualquer geração dinâmica de conteúdo da página usando javascripts) para inserir parte do conteúdo da página em seus scripts, mover o script include para o fundo da página, antes do final da tag BODY.
A especificação HTTP/1.1 sugere que os navegadores não baixar mais de dois componentes em paralelo por hostname. Se você servir suas imagens a partir de nomes de hosts múltiplos, você pode obter mais de dois downloads para ocorrer em paralelo. Enquanto um script está baixando, no entanto, o navegador não será iniciado qualquer outros downloads, até mesmo em nomes de máquinas diferentes.
Existem também as formas para criar dinamicamente nós SCRIPT e carregar scripts remotos após a página ser carregada usando AJAX.

Externalizar você JavaScript

Usando arquivos externos JavaScript irá resultar em mais rápido carregamento das páginas porque os arquivos JavaScript são armazenados em cache pelo navegador. 'Inline JavaScript em documentos HTML são baixadas sempre que o documento HTML é solicitada. Isso pode realmente reduzir o número de solicitações HTTP feitas, mas, posteriormente, aumenta o tamanho do documento HTML. JavaScript externos são armazenados em cache pelo browser, o tamanho do documento HTML é reduzido, sem aumentar o número de solicitações HTTP.
Por favor note que, se os usuários do seu site tem várias exibições de página por sessão e muitas das suas páginas reutilizar os mesmos scripts e folhas de estilo, há um maior benefício potencial da cache de arquivos externos.

Pacote de seus arquivos de Javascript

Em caso de JavaScripts, ao contrário do CSS, os arquivos poderiam crunched usando alguns algoritmos padrão que daria um tamanho de arquivo reduzido do que simplesmente remover espaços ou tabulações. Um exemplo de javascript empacotador pode ser encontrada aqui http://dean.edwards.name/packer/

Se livrar de qualquer Scripts Duplicate

É muito incomum que scripts inteiro pode ser duplicado, mas uma revisão dos dez principais sites web EUA mostra que dois deles contêm um script duplicado. Duplicate scripts mas, obviamente, reduz o desempenho, criando solicitações HTTP desnecessário e um desperdício de execução de JavaScript.
Além disso, em muitos casos, embora os nomes scripts são diferentes, há uma probabilidade de scripts duplicados dentro da mesma página devido ao tamanho da equipe e número de scripts.

Minimizar acessar elementos DOM, sempre que possível

Acessando elementos DOM com JavaScript é lento por isso, para ter uma página mais ágil, você deve:
• Cache referências a elementos acessada
• Atualização de nós "offline" e, em seguida, adicioná-los à árvore
• Evite fixar layout com JavaScript

Comportamento separado de Conteúdo e Apresentação

Assim como nós Apresentação separado (CSS / XSLT) de conteúdo (XHTML / XML), também devemos separar Comportamento (Javascript). Isso é chamado de Javascript discretos. Da mesma forma que apontam para arquivos CSS externos, devemos apontam para arquivos externos javascript.

Em vez de comportamento rígido na codificação de conteúdo (por exemplo, onmouseover, onclick, etc), o comportamento deve ser dinamicamente adicionados elementos, classes e elementos únicos (IDs), utilizando o DOM. O documento fundamental, o conteúdo, deve conter apenas XHTML / XML e não javascript.
Javascript deve aumentar o conteúdo, adicionando comportamento. O conteúdo deve permanecer útil e utilizável sem javascript (ou sem suporte javascript completa).


2008 07 de maio de 2008

Melhores Práticas: Esteja ciente do peso da página

Eu salvei este artigo idades de volta, então Sorry! Eu não lembro a fonte ... mas pareceu útil, para nós, que tem que estar ciente sobre o público para o qual nós desenvolvemos o site para ... isso aqui é i

Peso página pode ser usada para determinar o tempo de download para uma determinada página em uma variedade de velocidades de conexão Internet. A título de exemplo, a tabela a seguir mostra os tempos de download de três páginas diferentes em um número de velocidades de conexão popular.

Página de Downloads Peso

Velocidade da conexão

20 Page Kb

40 Page Kb

100 Page Kb

14.4 Kbps

12 seg

25 seg

62 sec

28.8 Kbps

6 seg

12 seg

31 seg

33,3 Kbps

5 seg

10 sec

26 seg

56 Kbps (V.90)

2 seg

5 seg

13 seg

64 Kbps (ISDN)

2 seg

4 seg

12 seg

128 Kbps (DSL / Cable)

1 seg

2 seg

6 seg

256 Kbps (DSL / Cable)

<1 seg

1 seg

3 seg

Benefícios da redução do peso da página?

O impacto positivo da redução dos benefícios de peso página proprietários de website e consumidores. Benefícios potenciais incluem:

  1. Páginas carregam mais rápido. O impacto mais óbvio de reduzir o peso da página é que as páginas do seu site irá carregar mais rápido para os visitantes, independentemente da sua velocidade de conexão.
  2. Vezes menor carregamento da página criar visitantes mais confortáveis. Visitantes são menos propensos a tornar-se frustrados e ir para outro lugar, se suas páginas carregam rapidamente. Por outro lado, o carregamento lento páginas são uma das maneiras mais seguras de perder visitantes e potenciais clientes.
  3. Carregamento mais rápido dos tempos irá contribuir para a conversão aumentou. Mais visitantes permanecerão no seu site por mais tempo. Mais deles vai acabar fazendo compras, se inscrever para a sua newsletter, ou livro-marcação do seu site.
  4. Sua percepção de marca será reforçada. Clientes de retorno e pela primeira vez visitantes estarão mais inclinados para descrever o seu site (e negócios) como "profissionais" se suas páginas carregam rapidamente.
  5. Páginas com código limpo e sólido, muitas vezes, ser indexados de forma mais eficaz pelos motores de busca natural.
  6. Páginas optimizadas para peso pode realmente salvar acusações largura de banda em sites de alto tráfego. 100.000 páginas cada um pesando 150 Kb exigirá o dobro de largura de banda de seu provedor de 100.000 páginas de cada peso, 75 Kb. Para ISPs que cobrar por largura de banda utilizada ou por sobrecarga, essa redução pode criar uma poupança significativa em custos de banda.

Considere os seguintes dados, publicados em um relatório

Abandono visitante

Página Tempo de carga

Por cento dos usuários
Continuar a esperar

10 segundo

84%

15 segundo

51%

20 segundo

26%

30 segundo

5%


2008 24 de abril de 2008

Melhores Práticas: Trabalhando com CSS

Coloque Stylesheets at the Top

Se você quiser uma página para carregar progressivamente, ou seja, queremos que o navegador para exibir qualquer conteúdo ele tem o mais rapidamente possível, coloque o CSS no topo da página dentro do HEAD do documento. Isso faz com que as páginas parecem estar carregando mais rápido, pois isso facilita a renderização progressiva da página. Isto é especialmente importante para as páginas com muito conteúdo e para os usuários em conexões lentas à Internet.

É um fato documentado que para melhorar a experiência geral do usuário, é importante para fornecer indicadores de progresso e feedbacks visual. Para evitar ter que redesenhar elementos da página, no caso, se a sua mudança de estilos, alguns browsers, incluindo o IE, blocos de renderização da página até que o CSS está totalmente carregada. Devido a isso, o usuário consegue ver uma página em branco.

A W3 especificações HTML "também afirma que a CSS deve me incluir na seção HEAD da página HTML. at the bottom of the page, so it's best not to use it. Observe também que, no IE @import se comporta o mesmo que usar <link> na parte inferior da página, por isso é melhor não usá-lo.

Evitar o uso de recursos específicos de navegador

Filtros: O uso de filtro aumenta o consumo de memória e é aplicado por elemento, não por imagem, então o problema é multiplicado. Além disso, os filtros são IE Proprietário, portanto, não funcionará como desejado em outros navegadores. Se você quiser fundos transparentes ou gradiente, use 1pixel com imagens.
Expressões: expressões CSS são um bom recurso para ter em CSS, mas ainda é característica específica IE. Além disso, é importante notar que, estas expressões são avaliada quando a página é processada e redimensionadas, rolado e mesmo quando o usuário move o mouse sobre a página. Escusado será dizer que isso poderia afetar o desempenho da sua página. Daí em palavras simples, Evite o uso de expressões CSS, a menos que você sente seus prós "pesa mais que a sua cons '

Externalizar você CSS

Utilizando CSS externo irá resultar em um carregamento mais rápido de páginas porque os arquivos JavaScript e CSS são armazenados em cache pelo navegador. CSS inline em documentos HTML são baixadas sempre que o documento HTML é solicitada. Isso pode realmente reduzir o número de solicitações HTTP feitas, mas, posteriormente, aumenta o tamanho do documento HTML. CSS externos são armazenados em cache pelo browser, o tamanho do documento HTML é reduzido, sem aumentar o número de solicitações HTTP.

Por favor note que, se os usuários do seu site tem várias exibições de página por sessão e muitas das suas páginas reutilizar os mesmos scripts e folhas de estilo, há um maior benefício potencial da cache de arquivos externos.

Pacote de seu arquivo CSS

Embalagem ou esmaga o CSS é a prática de retirar caracteres desnecessários do código para reduzir seu tamanho, assim, melhorar os tempos de carga.

O CSS pode me crunched, removendo todos os comentários e quaisquer caracteres indesejados, como espaços em branco, newlines etc


2008 14 de março de 2008

Best Practices for um desenvolvedor de interface do usuário

Por idades, eu tenho o pensamento de consolidar todas as melhores práticas, eu tenho lido de vez em quando. Finalmente! Eu fiz começar a colocá-lo para caneta. Percebi que Ele vai ser tarefa gigantesca de criar este documento mamute, então eu decidi dedicar toda uma categoria para ele, para que eu pudesse continuar a acrescentar coisas sobre as melhores práticas como e quando eu encontrá-los ...

Bem! o conteúdo aqui será uma amálgama de minhas práticas pessoais UI Melhor desenvolvimento com aqueles escritos pelos desenvolvedores do padrão, como Yahoo, Google etc

Assista a este espaço e manter browing a melhor categoria Práticas


2007 15 de setembro de 2007

Quais são DOCTYPE? Quais são as peculiaridades BROWSER & modo estrito?

Falando simples (para quem nunca ouviu falar sobre doctype antes de hoje)! DOCTYPE é a declaração em um documento HTML que vem antes da tag <HTML>, que é algo como isto (colado a partir do código fonte desta página muito)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


Por que usar o doctype?
Tudo começou quando os padrões do navegador foram introduzidas pelo W3C. Os desenvolvedores web implementado anteriormente CSS de acordo com os desejos dos navegadores, as páginas de ter processado corretamente com eles e tinha a maioria dos sites CSS que não combinam muito bem essas especificações / padrões.

Portanto, solução para este problema foi a

  • permitem que os desenvolvedores web que conhecia os seus padrões para escolher o modo de usar.
  • continue exibindo páginas antigas de acordo com a idade (quirks) regras.

DOCTYPE e nasceu.

Assim, com base em se você página foi concebida para os padrões ou não, você escolhe o doctype apropriado.


Relação entre Doctype e modos de navegador
Doctype é a afirmação que diz que o seu browser de modo que deve processar a página HTML em ou melhor, para ser mais preciso como deve o browser interpretar o CSS em; Quirks Mode ou modo Strict.

Velhas páginas escritas antes de essas normas foram introduzidas não têm um doctype. Portanto, quando não há DOCTYPE em seu HTML em seguida, o navegador está em modo quirks.
Mas se o DOCTYPE é definido como um dos seguintes, então o browser está a ser dito no modo estrito.

<DOCTYPE html PUBLIC "- / / W3C / / DTD HTML 4.01 Transitional / / EN" "http://www.w3.org/TR/html4/loose.dtd">


NDK casa | Expressando IT | Palate Expressando | penmenship Expressando | Awe Expressando | me expressar