2008 15 de maio de 2008

Mellores Prácticas: Traballando con JavaScript

Incluír JavaScript na parte inferior do documento HTML

Se non ten document.write (ou calquera xeración dinámica de contidos da páxina usando javascripts) para inserir parte dos contidos da páxina nos seus scripts, mover o script include para a parte inferior da páxina, antes do final da etiqueta BODY.
A especificación HTTP/1.1 suxire que os navegadores non baixar máis de dúas compoñentes en paralelo por nome de máquina. Se servir súas imaxes a partir de nomes de hosts múltiples, pode obter máis de dous descargas que apoian en paralelo. Mentres un script está baixo, con todo, o seu navegador non pode iniciar ningún descarga outros, mesmo nos nomes de máquinas diferentes.
Existen tamén as formas para crear dinámicamente nós script e cargar scripts remotos despois da páxina cargar usando AJAX.

Externalizar vostede JavaScript

Empregando arquivos JavaScript externos vai producir máis rápido carga das páxinas, xa que os arquivos Javascript se almacenan en cache polo navegador. 'Inline JavaScript en documentos HTML son baixadas sempre que o documento HTML é solicitada. Isto pode efectivamente reducir o número de solicitudes HTTP feitas pero posteriormente aumenta o tamaño do documento HTML. Externo Javascript se almacenan en cache polo navegador, o tamaño do documento HTML é reducido sen aumentar o número de solicitudes HTTP.
Teña en conta que, se os usuarios do seu sitio web ten varias exhibicións de páxina por sesión e moitas das súas páxinas reutilizar os mesmos guións e follas de estilo, hai un beneficio maior potencial de caché de ficheiros externos.

Abale seus arquivos JavaScript

En caso de JavaScripts, ao contrario do CSS, os arquivos poden crunched usando algúns algoritmos estándar que daría un tamaño de arquivo menor que a simple eliminación de espazos ou tabulacións. Un exemplo de javascript embalaxe se pode atopar aquí http://dean.edwards.name/packer/

Librar-se de calquera scripts duplicados

É moi raro que os scripts enteiros poden ser duplicados, pero unha revisión dos dez principais sitios de Estados Unidos web demostra que dous deles conteñen un script duplicado. Duplicar scripts, pero, obviamente, reduce o rendemento a través da creación de solicitudes innecesarias de HTTP e desperdiçar a execución de JavaScript.
Ademais, en moitos casos, aínda que os nomes scripts son diferentes, hai unha probabilidade de scripts duplicados na mesma páxina debido ao tamaño do equipo eo número de scripts.

Minimizar acceso a elementos DOM, sempre que sexa posible

Acceder elementos DOM con JavaScript é tan lento, a fin de ter unha páxina máis interactiva, ten que:
• As referencias a elementos de caché populares
Nós • Actualizar "offline" e, a continuación, engadila los á árbore
• Evite fixar esquema con JavaScript

Comportamento separado de contido e Presentación

Así coma nós Presentación separado (CSS / XSLT) de contido (XHTML / XML), tamén debemos separar Comportamento (JavaScript). Isto chámase Javascript discreto. Así como obrigar á arquivos CSS externos, debemos obrigar á arquivos externos Javascript.

En vez de codificación comportamento duro ao contido (por exemplo, onmouseover, onclick, etc), o comportamento debe ser dinamicamente engadidos elementos, clases e elementos únicos (IDS), usando o DOM. O documento fundamental, o contido, debe conter somente XHTML / XML e non javascript.
Javascript debe aumentar o contido, engadindo comportamento. O contido debe permanecer útil e utilizable sen javascript (ou sen soporte javascript completo).


2008 07 de maio de 2008

Mellores Prácticas: Teña en conta o peso da páxina

Eu salvei este artigo idades de volta, So Sorry! Eu non lembro a fonte ... mais pareceu útil, para nós, que temos que ser conscientes sobre o público para o que nós realizamos o sitio para ... iso aquí é i

Peso de páxina pode ser usado para determinar o tempo de descarga para unha páxina dunha variedade de velocidades de conexión de Internet. Por exemplo, o cadro seguinte mostra os tempos de transferencia para tres páxinas diferentes nun número de velocidades de conexión populares.

Páxina de Descargas Peso

Velocidade da conexión

20 Page Kb

40 Page Kb

100 Páxina 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 seg

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

Beneficios da redución de peso páxina?

O impacto positivo da redución dos beneficios de peso páxina propietarios tanto no sitio web e consumidores. Os beneficios potenciais inclúen:

  1. Cargar páxinas máis rápido. O impacto máis evidente de diminuír o peso da páxina é que as páxinas do seu sitio web ha cargar máis rápido para os visitantes, sexa cal sexa a súa velocidade de conexión.
  2. Menores tempos de carga das páxinas crear os visitantes máis cómodos. Os visitantes son menos propensos a facer-se frustrados e ir a outro lugar, se as súas páxinas cargar rapidamente. Por outra banda, a lentitude de carga de páxinas son unha das formas máis seguras para perder visitantes e potenciais clientes.
  3. Máis rápidas de carga veces vai contribuír á conversión aumentada. Máis visitantes permanecerán no seu sitio web por máis tempo. Máis deles vai acabar facendo compras, inscribíndose para o seu boletín, ou libro reserva do seu sitio.
  4. A súa percepción da marca será reforzada. Clientes de retorno e por primeira vez visitantes tamén estará máis inclinado para describir o seu sitio (e negocios), como "profesional" se as súas páxinas cargar rapidamente.
  5. Páxinas con código limpo e sólido, moitas veces, ser indexado de forma máis eficaz polos buscadores naturais.
  6. Páxinas optimizadas para peso realmente gardar carga de ancho de banda de alto tráfico sitios. 100.000 páxinas cada un pesando 150 Kb esixe o dobre de ancho de banda do seu proveedor de 100.000 páxinas cada peso de 75 Kb. Para provedores que cobran por ancho de banda utilizada ou excedentes, esta redución pode crear economías significativas en custos de ancho de banda.

Considero os seguintes datos, publicados nun informe

Abandono visitante

Tempo de carga páxina

Por cento dos usuarios
Seguir esperando

10 segundos

84%

15 segundos

51%

20 segundos

26%

30 segundos

5%


2008 24 de abril de 2008

Mellores Prácticas: Traballando con CSS

Pon Stylesheets na parte superior

Se queres unha páxina para subir progresivamente, é dicir, queremos que o navegador para amosar calquera contido ten o máis breve posible, engada o CSS do principio da páxina dentro da cabeceira do documento. Isto fai que as páxinas parecen ser máis rápido carga, como esta facilita procesamento progresiva da páxina. Isto é especialmente importante para as páxinas con moito contido e para os usuarios en conexións máis lentas.

É un feito documentado que para mellorar a experiencia xeral do usuario, é importante para proporcionar indicadores de progreso e feedbacks visuais. Para evitar ter que redeseñar os elementos da páxina, no seu caso, a súa mudanza de estilo, algúns navegadores, incluíndo o IE, bloques de renderización da páxina ata a CSS está totalmente cargada. Debido a iso, o usuario é pode ver unha páxina en branco.

Os W3 especificacións de HTML dos tamén afirma que a CSS que me incluír na sección HEAD da páxina HTML. at the bottom of the page, so it's best not to use it. Teña en conta que, no IE @import se comporta o mesmo que usar <link> na parte inferior da páxina, polo que é mellor non usalo.

Evite utilizar características específicas do navegador

Filtros: uso do filtro aumenta o consumo de memoria e é aplicado por elemento, non por imaxe, entón o problema é multiplicado. Ademais, os filtros son IE Propietario, así que non vai funcionar conforme o esperado en outros navegadores. Se queres fondos transparentes ou gradiente, usa 1pixel con imaxes.
Expressions: expresións de CSS son un bo recurso para ter en CSS, senón que é característica específica do IE. Ademais, é importante ter en conta que, estas expresións son valorada cando a páxina é procesada e redimensionadas, rodado e mesmo cando o usuario move o rato sobre a páxina. Nin que dicir ten que isto podería afectar o desempeño da súa páxina. Así, en palabras simples, evite utilizar expresións CSS, a menos que sente os seus pros "pesa máis do que os seus contras '

Externalizar vostede CSS

Usando CSS externo ha producir unha subida máis rápido de páxinas porque os arquivos Javascript e CSS se almacenan en cache polo navegador. CSS liña en documentos HTML son baixadas sempre que o documento HTML é solicitada. Isto pode efectivamente reducir o número de solicitudes HTTP feitas pero posteriormente aumenta o tamaño do documento HTML. CSS externo se almacenan en cache polo navegador, o tamaño do documento HTML é reducido sen aumentar o número de solicitudes HTTP.

Teña en conta que, se os usuarios do seu sitio web ten varias exhibicións de páxina por sesión e moitas das súas páxinas reutilizar os mesmos guións e follas de estilo, hai un beneficio maior potencial de caché de ficheiros externos.

Abale seu arquivo CSS

Embalaxe ou esmaga CSS é a práctica de retirar caracteres innecesarios do código para reducir o seu tamaño, así, mellorar os tempos de carga.

O CSS me pode esmagar, eliminando todos os comentarios e ningún carácter non desexados, como espazos en branco, novas liñas etc


2008 14 de marzo de 2008

Mellores prácticas para un creador de interface de usuario

Por idades, teño que pensar para consolidar todas as prácticas, fun ler de cando en vez. Finalmente! Eu tiven ata poñelo a pluma. Podo entender que vai ser tarefa xigantesca de crear este documento mamut, entón eu decidir dedicar toda unha categoría para el, para que eu puidese continuar a engadir cousas sobre as mellores prácticas de como e cando atopalos ...

Ben! o contido aquí será unha amálgama das miñas prácticas UI persoais mellores desenvolvemento con aqueles escritos polos desenvolvedores do estándar, como Yahoo, Google etc etc

Assist a este espazo e manter browing a mellor categoría Prácticas


2007 15 de setembro de 2007

Cales son DOCTYPES? Cales son peculiaridades navegador e xeito estrito?

Fala simple (para quen nunca escoitou falar sobre doctype antes de hoxe)! DOCTYPE é a declaración nun documento HTML que vén antes da etiqueta <HTML>, que é algo así (pegado a partir do código fonte desta páxina moi)

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


Por que empregar o doctype?
Todo comezou cando os patróns do navegador foron introducidas polo W3C. Os desenvolvedores web CSS anteriores desenvolver de acordo cos desexos dos navegadores, para que as páxinas procesadas correctamente con eles e tiña a maioría dos sitios CSS que non combinan moi ben esas especificacións ou normas.

Polo tanto solución a este problema foi

  • permitir que os desenvolvedores web que coñecían os seus patróns para escoller o modo de usar.
  • seguir mostrando páxinas antigas segundo o vello (quirks) regras.

E DOCTYPE naceu.

Entón, dependendo se páxina foi deseñada para os patróns ou non, escolle o doctype apropiado.


Relación entre os modos de Doctype & Browser
Doctype é a declaración que informa ao navegador que xeito debe renderizar a páxina HTML ou mellor, para ser máis preciso como é que o navegador interpreta CSS en; Quirks Mode ou modo Strict.

Vellas páxinas escritas antes de estas normas foron introducidas non ten un doctype. Polo tanto, cando non hai ningún DOCTYPE no seu HTML, a continuación, o navegador está en modo quirks.
Pero se o DOCTYPE é definido como un dos seguintes, a continuación, o navegador se di estar en modo restrinxido.

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


NDK casa | Expresando IT | Palate expresando | Penmenship expresando | AWE expresando | expresar o meu