Expresando TI

El reciclaje es palabra de moda y en el desarrollo Web significa que no es diferente. Se conserva la energía, en términos de esfuerzo!

En los últimos años de la escritura y la creación de HTML CSS a partir de diseños, que han seguido una serie de prácticas recomendadas, en la búsqueda de ahorro de tiempo y energía en lo que generalmente llamamos "re-inventar la rueda". Una y otra vez, me he dicho que tengo que crear unas cuantas plantillas, algún estándar reutilizables CSS que iba a usar fuera de la caja en mi trabajo futuro. Aunque no por completo, pero me las arreglé para conseguir algunos de los objetivos.

En la promoción, re-uso de CSS, he echado un vistazo a los pocos marcos de CSS que están comúnmente disponibles para nosotros y decidió ponerlas en práctica, ya que estos son de probada eficacia y creado por los desarrolladores experimentados tanto, que yo mismo. Más importante aún "Evite volver a inventar".

Aunque el conocimiento común a los veteranos, he tratado de pluma algunos de los principales conceptos y mejores prácticas y pensamientos que ha pasado en la creación de estos marcos de referencia, para hacer reciclaje de CSS es posible. Espero que esto ayudará a que algunos desarrolladores de CSS que están a punto de y, recientemente, abordaron el tren CSS!

Teclas de ciclismo Re de CSS:

Utilice Convenciones de nomenclatura

Esto tiene que ser el factor más importante en la toma de la CSS / HTML reutilizable. Dar nombres consistentes en elementos de página permite la reutilización de los componentes de la página y sus estilos con poca o modificaciones. En línea con este argumento, HTML5 Incluso, en un cambio importante cambio respecto a sus predecesores, es decir introducir algunas etiquetas estructural. <article>, <sección>, <header>, <aside> y <nav> [ ¿Qué va a aportar HTML5? ]. Incluso con HTML 4 (o inferior), lo mejor es llamar a las secciones habituales de la página consistanly como en el ejemplo sencillo a continuación ...

Recuerde, la mayoría páginas de su proyecto, llegar a tener los elementos básicos estructurales mismas. Identificar los elementos básicos comunes página ....

  <div id="contenedor">
    <div id="cabecera"> ... </ div>
    <div id="nav"> ... </ div>
    <div id="sidebar"> ... </ div>
    <div id="footer"> ... </ div>
   </ Div> 

Restablecer estilos predeterminados Restablece (CSS): Si usted utiliza un marco o escribir el suyo propio, debe proporcionar Restablece CSS [ ¿Cuáles son Restablece CSS? ], ya que reducir o eliminar las incoherencias a veces visuales que se producen entre distintos navegadores. En palabras simples, el mecanismo de restablecimiento CSS establece los estilos de elemento HTML en los valores de cero o nula, reemplazando así los valores por defecto del navegador pueden plantea. Esto proporciona un borrón y cuenta nueva para establecer las propiedades de estos elementos sin efecto de los impagos User-Agent [ Agente de usuario CSS2.1 predeterminados de hojas de estilo ]. Todos los marcos de la CSS no tiene mecanismo de restablecimiento. Si va a escribir usted el propietario de Restablece CSS, una palabra de advertencia es que si te olvidas de restablecer una propiedad clave, y podría conducir a problemas de cross-browser, que son muy difíciles de depurar. Recuerde, mantenga una copia de los estilos de reinicio y colóquelos en cada proyecto nuevo que cree.

  cuerpo, div, dl, dt, dd, ul, ol, li,
  h1, h2, h3, h4, h5, h6,
  antes, la forma, fieldset, de entrada, selección, área de texto,
  p, blockquote, mesa, th, td
  {
    border: 0px;
    margin: 0;
    padding: 0;
  } 

Establecer valores predeterminados (Estilos de línea de base) a los elementos:

Después de haber establecido (en cero o nulo) los valores por defecto de ciertos atributos de ciertos elementos de HTML, es necesario aplicar algunos de los estilos a través de todas las instancias de estos elementos. Estos ajustes por defecto puede variar según el diseño o de acuerdo con las mejores prácticas que siguen.

La mayoría de los marcos de CSS, siempre introduce algunos nuevos valores por defecto, además de restablecer los estilos predeterminados del navegador.
Estos valores por defecto es vacío de los valores predeterminados de User-Agent (despojado por el restablecimiento CSS), estos serán en todos los navegadores.

Recuerde, los estilos de línea de base se utilizan para definir los estilos que van ser utilizados en todo el diseño. por ejemplo.

  html {font-size: 77%; font-family: Arial, sans-serif;}
 fuerte, h1, h2, h3, h4, h5, h6 {font-weight: bold;} 

Estilos Resumen de componentes comunes de HTML y clases comunes:

La mayor parte del proyecto que consta de varias páginas se tienen en común los elementos HTML utilizados en todo el sitio, por ejemplo, algún tipo de formularios, alertas y los errores, ventanas emergentes personalizados, Mesas de luz, etc Dado que tales componentes se utilizan de nuevo a través de proyectos, que serán útiles para proporcionar una un conjunto de clases asociadas con estilos predefinidos para estos componentes y usted puede ahorrar mucho tiempo.

Aparte de la definición de las definiciones de estilos reutilizables para los componentes comunes de HTML, podríamos clases de estilos abstractos relacionados con la tipografía, el color o el diseño, incluso. Yo mismo tiendo a usar ... las clases comunes como Clearfix, Font08, FontGrey, AlignL, etc DisplayB

  formulario de entrada {border: 0px; background: # ffffff; padding: 0px 10px; _padding: 0px 0px; altura: 26px; color: # 000000; line-height: 30px; font-size: 1.1em;}
 forma textarea {border: 0px; background: # ffffff; color: # 000000; font-size: .9 em, line-height: 1.5em; overflow: visible;}
 . Fbold {font-weight: bold; color: # cccccc;}
 . Fgrey {color: # 666666;}
 . Flightgrey {color: # bbbbbb;}
 . Clearfix {clear: both;}
 . Divisor de {border-top: 1px solid # 647B06; border-bottom: 1px solid # 9CC00A; altura: 0px;}
 . Displayb {display: block;}. Displayn {display: none;}
 . Alignr {text-align: right}. Alignc {text-align: center}
 . Floatr {float: right;}. Floatl {float: left;} 

Soluciones a errores comunes peculiaridades navegador

Diversos navegadores poner en práctica el código CSS y proporcionar diferente nivel de apoyo a las especificaciones de CSS. El resultado de esta .... "Caprichos del navegador", que los desarrolladores se dejan de abordar. Sobre todo, persigue a los codificadores de la mayoría de IE6 CSS con un plazo que cumplir. La buena noticia es que la experiencia ha reunido a las posibles soluciones reutilizables para estas cuestiones (a menudo denominado como hacks CSS ).

Recuerde, mantenga estos hacks / correcciones a mano

  / * El zoom lo siguiente: 1 regla es específicamente para IE6 + IE7.  * /
    * Html. Clearfix,
    *:. First-child + html {clearfix
           zoom: 1;
      } 

Siga ajustando su CSS

• El hábito de reciclaje, no vendrá a ti en el día. Tiene que desarrollado. Así que el plan de su reciclaje. Téngalo en cuenta que usted podría defecto estilos abstractos, las definiciones de la tipografía, diseños, estilos de elementos HTML, etc Trate de pensar en el futuro.
• También mirar hacia atrás en sus proyectos anteriores, le ayudará a identificar los estilos que tienden a utilizar con frecuencia a través porjects. Resumen ella.
• Retire todos los estilos no utilizados. Esta práctica se mantendrá el marco de CSS de un síntoma común que se llama "Hinchazón" -
• Quitar estilos repetitivos.
• Construir un conjunto de estilos que son lo suficientemente flexibles como para transportarlo a través de proyectos.

Una mirada a los marcos CSS

Por último. Si está inspirado y va a utilizar uno o más de los marcos de CSS, Heres es una lista rápida de algunos de los más populares ....

• 960 Grid System : El sistema de cuadrícula 960 es un esfuerzo para racionalizar el flujo de trabajo de desarrollo web, proporcionando las dimensiones de uso común, sobre la base de un ancho de 960 píxeles. Existen tres variantes: 12, 16 y columnas 24, que pueden ser utilizados por separado o en tándem. Nada de pensamiento que no se puede crear uno para su propia facilidad, El marco proporciona plantillas de la red para la impresión en formato PDF, que se puede utilizar para trazar su designs.Bet página, se haría una impresión profesional, si usted lleva unas cuantas hojas cuando usted va a un cliente para la recogida de requisitos de interfaz de usuario. También ofrece plantillas básicas de red para el software de diseño popular como Fireworks, Flash, InDesign, Illustrator, Photoshop, Visio, etc proporcionar un "Starter for Ten" para comenzar su trabajo de diseño.
• Blueprint : Blueprint proporciona claramente clasificados para el restablecimiento de los archivos CSS, rejillas, formularios, impresión, tipografía, Plugins para los botones, pestañas y sprites, etc También proporciona soporte para IE como por separado incluyen.
• SenCSs : A diferencia de los dos anteriores, SenCSs (pronunciado sentido), no tiene definiciones CSS para la maquetación. Se incluye fuentes, rellenos, márgenes, tablas, listas, encabezados, Tabulaciones, formas y mucho más.
• BlueTrip : Su demanda principal a la fama fue eso, fue una combinación de las mejores características proporcionadas por otros marcos de otros como Blue oli de impresión, de viaje ... de ahí su nombre. Su conjunto de características incluye 24-columna de la cuadrícula, los estilos de tipografía, estilos de ORM, de impresión, botones, etc
• Rejillas de YUI : Presentado a usted por la red de desarrolladores Yahooo, soporta ancho de líquido (100%), así como los diseños preestablecidos diseños de ancho fijo en 750px, 950px, 974px, y, y la posibilidad de personalizar fácilmente a cualquier número. Como se puede ver, su punto de vista técnico sólo los componentes de diseño. YUI también proporcionó HTML / CSS para los conjuntos de elementos de página
• YAML (Sin embargo, otro diseño de varias columnas)
• Emastic

Recuerda que el uso de marcos CSS no implica que usted es perezoso para crear uno propio ... Esto implica que usted es inteligente para aprender de la experiencia de otros y errores, ahorrar tiempo y aumentan la productividad!!

Con mi limitado conjunto de habilidades con herramientas como Photoshop e Illustrator, honestamente puedo confesar que soy un desarrollador mejor que yo soy un diseñador. Pero mi experiencia con el núcleo (del lado del servidor) de desarrollo con Java / PHP / COBOL, ha sido una influencia muy positiva en mis habilidades de desarrollo de interfaz de usuario. Lo que quiero decir es, al mismo tiempo la creación de mis diseños, es decir, cada vez que hago el diseño, pienso en cómo el diseño puede ser la mejor convertida en HTML-CSS y mientras se hace el código HTML, CSS, le doy un pensamiento acerca de la tecnología back-end y hacer razonablemente seguro que el HTML se puede implementar fácilmente en el XSL bucles o fragmentos de código PHP, etc

En los últimos años, he sido arrojado a la cabeza en los diseños de los diseñadores de la interfaz de usuario que probablemente donot tienen ni idea de lo que es HTML o CSS. Todos estos años he estado pensando que iba a pedir demasiado, si tan sólo esperan que el diseñador, que está tratando de shov su "imposible de código de" diseño por mi garganta, para entender un poco lo que su diseño se convertiría en. Eso ayudaría a la derecha?

Entonces, me encontré con este post de hoy ... los diseñadores web que no se puede codificar ... Gracias Señor! Yo soy sólo uno de muchos que sienten lo mismo ... El artitle anterior es un poco un largo aliento .. pero vale la pena la lectura, cada palabra de ella.

Gracias Elliot Jay Stocks ... Me siento aliviada!

Aquí hay algunos extractos de artículo de Elliot .

Wow, qué día! Todo comenzó con un tweet poco y terminó con una discusión que parecía extenderse por toda la comunidad de diseño web entera. Al parecer, hay algunas opiniones muy fuertes celebradas sobre el tema de si los diseñadores web deberían ser capaces de código.
...
Por lo tanto, antes de entrar en esto, permítanme recapitular rápidamente lo que he dicho esta mañana en Twitter:

Honestamente, estoy sorprendido de que en 2010 todavía estoy cruzando los diseñadores de páginas web de los que no se puede codificar sus propios diseños. No hay excusa.

... Que debería haber sido un poco más específico en mi tweet. Yo estaba hablando de los diseñadores que no tienen ni el más básico de HTML y CSS habilidades para convertir un diseño plano en un sitio real. No es la gente que intencionalmente no opten por el código, los que no se puede. Y también me refiero sólo al código de front-end de aquí, por supuesto, es ridículo pensar que los diseñadores también deben ser increíbles back-end de los programadores ...

Nos 'web' diseños enviados en Illustrator, 300dpi, imposibles de código, sin consistencia / facilidad de uso.
~ Amy Mahón

Se está haciendo tarde y tengo que terminar con esto de alguna manera. Sé que habrá muchos que no están de acuerdo conmigo, y mi intención no es ofender ni molestar a nadie que no puede codificar, pero espero que algo de lo que he dicho refleja algunos de los puntos que siempre surgen cuando ahondar en este debate.

Al final del día, no me quita el sueño, que puede codificar y quién no. Estoy realmente sorprendido de encontrar tantos diseñadores que carecen de las habilidades de front-end, como yo pensaba que esto era una cosa del pasado.

También lea los comentarios, hubo alrededor de 320 comentarios, mientras escribo ... que vale la pena una lectura.
Por favor, leer el post completo aquí .. Elliot diseñadores web que no se puede codificar

Ayer, después de que el tema me encontré con la CSS Reinicia en Google Chrome ... Pensé en cavar un poco más en el área de hojas de estilo del agente ...
Se han encontrado esta tabla de valores por defecto de las hojas de estilo CSS 2.1 User Agent ... (Para los que desconocen de lo que "Hojas de Estilo en User Agent" es seguir ¿Qué es el usuario las hojas de estilo del Agente (especificación) .

Para obtener una lista completa de CSS 2.1 User Agent Hojas de estilo por defecto , haga clic aquí

Ayer, como todos los demás "Día de la Marmota", yo estaba trabajando en algunos diseños de CSS / sin tablas. Todo iba bien en IE 7, 3 FF y Chrome, hasta las de repente, vi a unos márgenes de las Naciones Unidas-ignorable visto sólo en Google Chrome. Aunque es muy extraño y preocupando, era un tema nuevo bug / que yo había venido cruzando, no fue finalmente un poco de especia en mi trabajo mundano. Es triste (pero agradable) que lo arreglaron a los pocos minutos de la sonda ...

Básicamente, parecía que Google Chrome ignoró mi Restablece CSS (margin: 0px). En realidad, fue causado por la hoja de estilo del usuario (-webkit-padding-inicio: 40px). Así que la solución consistía en restablecer este estilo mediante el establecimiento de padding: 0 los elementos se portan mal.
Una buena manera de evitar que este problema ocurra a cualquier elemento es utilizar un mundial resto CSS de la siguiente manera

* {Margin: 0; padding: 0;}

¿Qué es el usuario las hojas de estilo del Agente (especificación)?
El siguiente fragmento está tomado de http://meiert.com/en/blog/20070922/user-agent-style-sheets/ enlace, seguimiento a leer más información sobre hojas de estilo del Agente

CSS 1 introduce la idea al afirmar que cada Agente de Usuario (UA, a menudo un "navegador web" o "cliente web") tendrá una hoja de estilo por defecto que presenta los documentos en un tiempo razonable - pero sin duda lo mundano - forma. CSS 2 dice que los agentes de usuario conformes deben solicitar una hoja de estilo por defecto (o comportarse como si lo hicieron) y que la hoja de un agente de usuario de estilo por defecto debe presentar los elementos del lenguaje del documento de manera que satisfaga las expectativas generales de presentación del lenguaje del documento; CSS 3 es probable que sea de la misma opinión.

Dado que las especificaciones de CSS dejar en manos de las implementaciones de la posibilidad de utilizar una "verdadera" hoja de estilos para la visualización predeterminada o no, no es sorprendente que usted no encuentra una hoja de estilo por defecto en la carpeta de instalación de cada navegador. A diferencia de Internet Explorer de Microsoft, así como la Opera, por ejemplo (y hasta donde yo sé), los navegadores Gecko, como Firefox y Netscape Navigator (busque "html.css"), sino también de Konqueror hacen bastante fácil de comprender su estilo predeterminado.

Ni yo soy muy nuevo en la interfaz de usuario (UI) de desarrollo, ni soy un veterano y como yo siempre lo ponía, me encajan en el perfil de la interfaz de usuario desarrollador más que el de un diseñador, sin remordimientos. Oh Well! ¿Qué estaba escribiendo? Durante un tiempo ... (debe ser en los años no por ello menos) Ahora, de vez en cuando, cuando me pongo en un poco de diseño de interfaz de usuario (cuando el diseñador profesional ha ido en un día de fiesta), me detengo siempre puedo pensar si mi diseño debe estar debidamente complient o no (sinceramente no, que yo podía achive 100% cumplimiento de las normas, si yo quería también). Entonces me digo, ¿qué mierda! ... El diseño debe ser sencillo, agradable y sobre todo parece útil, no debe hacer que los visitantes de huir ... o rebote (como técnico). ¿De qué serviría un bonito diseño sin tablas CSS es para el visitante, que es ajeno a todo el inteligente El hipertexto y la Hoja de estilo en cascada bajo la piel de su página web ... Zilch!
Debe tener un aspecto agradable y fácil de usar ... luego viene la materia todas las normas.

Yo stumbbled cruzando esta entrada del blog de ​​Jason Fried de 37 Signals (Para aquellos que no son conscientes de las señales de 37 son los onces que han creado algunas aplicaciones web como Basecamp impresionantes, etc Campfire) que escribieron algo similar en 2004 y, créeme, casi 5 años y no ha cambiado mucho desde que ... yo estaba feliz de leer su mensaje, ya que estoy totalmente de acuerdo con lo que tiene que decir y también el hecho, ella no está segura sobre lo que está diciendo acerca de su su solo instinto y por lo tanto es mío

Jason Fried: "No hay manera de habla demasiado de CSS y XHTML y Normas y de accesibilidad y no es suficiente hablar de la gente. CSS y el código de Cumplimiento de normas son sólo herramientas - usted tiene que saber qué construir con estas herramientas. Genial, me alegro de que la interfaz de usuario no utiliza tablas. Entonces, ¿qué? A quién le importa si es que todavía no permite que las personas a alcanzar sus metas. Los estándares web son grandes, pero las normas propias de la gente son las cosas se hagan (y que todavía es muy difícil de hacer en línea).

Los diseñadores de la interfaz de usuario está haciendo la misma vieja fundamental "olvidando al ser humano en el otro lado" errores - excepto que esta vez su código se ve mejor. Los seres humanos-no validadores de código - interfaces de uso ".

Artículo completo Pedido Jason Fried

DISCALIMER: Esto no quiere decir que no hay que preocuparse por las normas en absoluto. Las normas son bien tener y se adhieren a ellos tanto como sea posible. Sólo tenemos que entender que el diseño de interfaz de usuario bien no siempre significa que el 100% complience normas o viceversa ....

Desde mi lista de mis lecciones aprendidas, que siguen un diseño de interfaz de usuario de unos pocos y Desarrollo Reglas de oro ... Heres el TOP 10 ... no es que usted tiene que seguir también ...

1. Tenga cuidado de sus usuarios. Los usuarios pueden hacer o deshacer a su sitio. DONOT hacer ver como un usuario idoit total, absolutamente incapaz de usar su sitio web. Eso es malo!

2. Mantenga la simplicidad y facilidad de uso de sus guidlines primarias. Demasiadas cosas en la pantalla, mayor será la probabilidad de que un usuario se confunde, o distraído de su tarea original.

3. Estar en los límites ... DONOT caer demasiado en Usabilidad, Accesibilidad y Estándares. El uso de una forma eficaz y hacer que entiende que el equipo. Esto asegurará consistencia adecuada en el producto

4. Prototype el requisito. Dado que, en estos días las interfaces de uso son ricos, Prototipos siempre es mejor que simplemente hacer wireframes sencillos y el segundo carece de interacciones decentes, que dejaría de proporcionar al cliente una imagen clara del producto final que se está desarrollando. Siempre es más fácil para convertir los prototipos en productos finales. También! con la creación de prototipos los problemas de interacción pueden ser subsanadas antes del ciclo de desarrollo.

5. La consistencia en el diseño y la interacción es muy importante. Hable de confundir al usuario con las interacciones impredecibles y artefactos.

6. Comprender su "Declaración de la Misión de diseño". Llevar centrarse en la acción principal de la beign página diseñada. Además, haga una lista de sus acciones seconday en la página, y dar prioridad a ellos.

7. Proporcionar retroalimentación adecuada a los usuarios del sitio. Con la mayoría de los sitios web diseñados en torno a AJAX, proporcionan pistas visuales para el usuario sobre los cambios en la página. El usuario tiene que dar un reconocimiento de la realización de cualquier tarea que realiza. Hable de que el usuario espera y supongo que, por ejemplo. establecer indicadores de progreso para uplaods de archivos.

8. Utilice los controles de forma adecuada. Para uso por ejemplo, seleccione la lista desplegable para listas pequeñas solamente, nose permitir al usuario elegir una de las 200 ciudades con cuadros de selección. Entender la diferencia entre un botón y un enlace. Un enlace y el botón tienen propósitos diferentes, nose usar uno para el otro. Proporcionar el control de la derecha para hacer la interacción con una página más fácil. Evite el uso de los menús, que son más que dos niveles de profundidad. No reinventar la rueda. Utilice los controles estándar, personalizarlos sólo si es muy necesario. Defina los controles personalizados necesarios para la mano el primer sitio, de modo que pudieran ser creado y probado de forma independiente, listo para el uso del sitio cruzando.

9. Donot ITERATE demasiado en el diseño. ¡Recuerde! El producto entero consiste más que el diseño solo. Construir líneas de tiempo apropiados en la programación del proyecto para las iteraciones de diseño y se adhieren a ella. Iteración nos ayuda a averiguar lo que funciona y lo que no, elegir los puntos más conflictivos. Como una buena interfaz requiere tiempo, dar tiempo para las iteraciones en el comienzo del ciclo de desarrollo, de modo que las iteraciones de diseño doesnot directa equivale a reelaborar. Demasiado reelaborar mucho podría jeopradize plazos.

10. Siéntese y pensar como un usuario veces.

¿Has visto animoto.com? Bueno! esto no es un anuncio, me gustó mucho! y es el beso de interfaz de usuario realmente ASS

Me encontré con este sitio hace unas semanas. Vio la primera página, DINT molestó mucho. Para mí, era sólo un sitio con cierto contenido de Flash ricos, permitiendo a los usuarios subir imágenes, elegir alguna pista y convertirla en una presentación de diapositivas de imagen agradable. Descargar FLV, y ponerlo en cualquier sitio de su elección (YouTube, Metacafe, Facebook y similares) ... y punto.

Ayer cuando vi a las páginas de flujo interno, que tuvo el usuario mediante la creación de esta slideshow .... Fui Oh wow! Cuando me di cuenta de que no había utilizado poco de FLASH. Era en efecto una rica interfaz de usuario. Todos los desarrolladores de la interfaz de usuario debe aspirar a crear o al menos ser parte del equipo que ha hecho esta interfaz .... Absolutamente brillante! Y inspirador!

TIENE UNA MIRADA ... http://animoto.com/ ... y registrar y jugar con él ... sólo entonces se puede apreciar el genio.

Cuando leí este artículo en A List Apart " Posicionamiento absoluto Faux
por Eric Sol ", que era nada menos que impresionado. Estaba deprimida también mayormente, porque, sinceramente me pregunto, ¿por qué no puedo yo llegar a algo fabuloso como este.

Por lo general, cuando creamos diseños de CSS, usamos el término "posición" o "flota", o una combinación muy mala de ambos. Eric Sol y su equipo junto a definir una técnica perfecta de un nuevo tipo de técnica de diseño CSS, que han bautizado como "Posicionamiento absoluto Faux" después de la técnica de columnas falso que simula la presencia de una columna.

Usted sabe que el problema de todos nosotros, los desarrolladores de CSS tienen con los diseños de desintegración (Los cambios en los contenidos inesperados que causan las columnas enteras para envolver, cuando se utilizan diseños flotantes) ... Bueno! Parece que la historia!!
Esta técnica de diseño es aún muy joven, y tiene que destrozaron a cabo por todos los gurús de CSS por ahí, antes de convertirse en un estándar de la ONU por escrito. Estoy feliz de hacerlo ahora! ... Y ya estoy en medio de la conversión de mis anteriores problemáticas / flotante innecesariamente diseños en un diseño de la FAP ya ... y me alegro de decir que el "ya estamos utilizando la posición absoluta de imitación de este blog, así" ... GO probarlo, ¡AHORA!

Felicidades Eric!

Más los elementos DOM de la página, más lento se hace, más lento es el acceso a DOM en JavaScript. Un gran número de elementos DOM puede ser el diseño por el diseño malo. Por ejemplo, las tablas anidadas podría haber sido utilizado para fines de diseño. Utilizar cualquier etiqueta HTML en el que se tiene sentido semántico. Por ejemplo, las mesas de uso DONOT para los diseños, pero DONOT dudan en utilizarlos donde usted tiene que mostrar los datos tabulares, y por lo tanto utilizará reducir los elementos DOM, en comparación, a una estructura similar creada con DIVs sólo ..

Para comprobar el número de elementos DOM en la página HTML, sólo tienes que escribir lo siguiente en la consola de Firebug: document.getElementsByTagName('*').length

No hay ninguna norma establecida en cuanto a cuántos elementos DOM son demasiados. Compruebe otras páginas similares que tienen markup.Eg buena. Página principal de Yahoo! es una página muy ocupado y todavía menos de 700 elementos (etiquetas HTML).

Usar GET para las peticiones AJAX

Se ha encontrado que cuando se utiliza XMLHttpRequest, POST está implementado en los navegadores como un proceso en dos etapas: el envío de las cabeceras primero, entonces el envío de datos. Así que lo mejor es utilizar GET, que sólo se necesita un paquete TCP a enviar (a menos que tengas un montón de galletas). La longitud máxima de URL en Internet Explorer es 2K, así que si envías más de los datos de 2K que podría no ser capaz de utilizar GET.
Un efecto secundario interesante es que la POST sin llegar a publicar cualquier dato se comporta como GET. GET es para la recuperación de información, así que tiene sentido (semánticamente) para utilizar GET cuando sólo se solicitan datos, en comparación con el envío de datos que se almacenan en el servidor.

Evite sincrónicas llamadas AJAX

Al hacer "Ajax" las solicitudes, que podrán elegir entre el modo de sincronización o async. Async modo ejecuta la solicitud en el fondo mientras que otras actividades navegador puede continuar con la tramitación. El modo de sincronización esperará a que la solicitud de devolución antes de continuar.
Las solicitudes realizadas con el modo de sincronización debe ser evitado. Estas peticiones que el navegador se bloquee para el usuario hasta que regrese la solicitud. En los casos en que el servidor está ocupado, y la respuesta tarda un rato, el navegador del usuario (y tal vez OS) no permitirá que nada más que hacer. En los casos en que una respuesta no se recibe correctamente, el navegador puede seguir bloqueará hasta que la solicitud se ha agotado el tiempo.
Si usted piensa que su situación requiere el modo de sincronización, es el momento más probabilidades de volver a pensar en su diseño. Situaciones muy pocos (si alguno) realmente requieren las peticiones Ajax en el modo de sincronización.

Optimizar imágenes

Optimización simplemente significa mantener el tamaño de la pequeña imagen de mantenimiento de la calidad de la imagen hasta el nivel requerido. Hay un montón de procedimientos que una vez que puedan llevar a cabo para optimizar las imágenes antes de que se cargan en el servidor para la entrega. Las herramientas que utilizamos para la creación de estas imágenes (Photoshop, Fireworks, etc) suelen tener herramientas que permiten a los usuarios optimizar la imagen para uso en la web.
• Compruebe la del GIF para ver si está utilizando un tamaño de la paleta correspondiente al número de colores en la imagen. Cuando una imagen se utiliza 4 colores y una paleta de 256 colores, la imagen podría estar más optimizado

• Convertir GIF a PNG, donde sea posible y ver si hay un ahorro. Más a menudo que no, no lo es. No dude en ponerse en uso de Papua Nueva Guinea, ya que son totalmente compatibles con la mayoría de los navegadores de uso común. Esperar de las capacidades de animación en formato PNG pueden hacer lo que hace un GIF, incluida la transparencia.

• Para las imágenes utilizadas en sprites CSS, organiza las imágenes en el sprite en horizontal en lugar de verticalmente por lo general resulta en un tamaño de archivo más pequeño. Además, combinar imágenes con colores similares en un sprite. Esto le ayuda a mantener el número de color de baja densidad, lo ideal sería en 256 colores por lo que caben en un PNG8.

• Si usted está usando un favicon.ico, que sea pequeña, de preferencia bajo 1K.

Utilice la escala apropiada / cambiar el tamaño de la imagen.

Siempre tratar de utilizar las imágenes redimensionadas, es decir, no utilice una imagen más grande de lo que necesita sólo porque se puede establecer la anchura y la altura en HTML. Si usted necesita para mostrar una imagen de 100px X 100px en la página, no utilice una imagen reducida 200x200px.

Use imágenes progresivas

Un navegador web que ya hace que las imágenes de forma progresiva. Para hacerlo aún mejor, sólo tiene que guardar su GIF o PNG imágenes con el "entrelazado" opción, o las imágenes JPEG con el "progresista" opción.

Existe un debate permanente entre los usuarios de la web en cuanto a si el uso de la imagen progresiva es una bendición o un obstáculo. También una imagen progresista pesa aproximadamente un 20% más que su homólogo no progresiva. Así pues, si usted piensa que el diseño utiliza imágenes que no obstaculizan la experiencia del usuario por el mismo ser progresista, no dude en hacerlo.