Hola gente.
Hoy, a diferencia de los otros post, les voy a dejar un contenido que no es exclusivo de .Net pero que, a mi parecer, es bastante útil para todos los diseñadores web.
Les voy a dar unos tips para optimizar nuestros sitios on-line. Espero que les venga bien. No se olviden de dejar sus comentarios por favor.
1-) Utilizar hojas de estilo, nunca estilizar etiquetas.
Es algo bastante básico en el diseño actual de sitios web, pero es un error que todavía muchas personas tienen al momento de hacer sus páginas.
Jamás se debe estilizar etiquetas! Siempre (siempre!) usar ojas de estilo.
Es fundamental tener separado la estructura del sitio de su diseño o estilo. Imaginemos que tenemos un sitio con estilización aplicada a las etiquetas, ¿qué hacemos cuando queramos modificar la interfaz? Vamos a tener que modificar cada una de nuestras páginas en el sitio, algo sin duda molesto y tedioso. En cambio al tener el estilo en nuestra hoja css, sólo basta con modificar el estilo que deseamos cambiar y listo. No es mucho más fácil?NO!:
<p style:=”color: black; font-family:Arial;”>Texto de párrafo con estilo en la etiqueta</p>
SI:
CSS:
.estilo1{
color:black;
font-family:Arial;
}
2-) Estilos para cada navegador
Continuando con el tip anterior, como para terminar de optimizar el tema de los estilos, cabe destacar que una buena práctica (tal vez un poco molesta para algunos, pero que vale la pena) es la de hacer hojas de estilo diferentes para cada navegador.
Muchos nos hemos pasado horas renegando con estilos que se ven bien en Internet Explorer pero no en Mozilla Firefox, y una vez que logramos que se vea bien en MFirefox, volvemos al IE y ya perdimos nuestro estilo :(
Una solución práctica a esto es la que acá propongo. Armar dos hojas de estilo e incluir el siguiente código:<!– [if lte IE 7]>
<link rel=”stylesheet” media=”screen” type=”text/css” href=”estiloparaIE7.css”>
<!– [endif]–>
Observemos el código que he dejado. La palabra lte significa Less Than or Equal (igual o menor a). Si en lugar de esto queremos aplicarlo sólo a versiones anterior, se la debe reemplazar por lt.
3-) Declarar el DocType.
Algo no muy aplicado por los diseñadores es la declaración del tipo de documento, y esto es clave para los navegadores, así pueden interpretar correctamente el contenido de nuestras páginas.
Aunque este tip es un poco relativo ya que la mayoría de los programas de diseño web actuales lo escriben automáticamente. Es una de las ventajas con las que contamos los programadores de .Net, ya que Visual Studio lo trae por defecto es las páginas aspx.
Igualmente para aquellos que no utilizan estas herramientas, este tip viene bien. A continuación los ejemplos más comunes: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3c.org/TR/html4/strict.dtd”>
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3c.org/TR/html4/loose.dtd”>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<!DOCTYPE html PUBLIC”-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3c.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
4-) Utilizar preferentemente PNGs
Esto tip es algo que he empezado a aplicar hace poco. Se habrán dado cuenta que cuando tenemos una conexión lenta, las imágenes se cargan desde arriba hacia abajo, quedando a veces a medias y no podemos comprender la imagen en cuestión. Esto se debe a las imágenes JPGs que son las más utilizadas, pero no por ellos las mejores.
El consejo acá es utilizar imágenes con extensión PNG. Este tipo de imágenes tiene un determinado entrelazado que hace que se carguen en capas, por lo que si el cliente tiene un ancho de banda reducido, la irá visualizando de a poco "del fondo hacia el frente" (por así decirlo), dando desde el principio una idea del contenido, aunque se vea pixelada.
5-) Tablas para datos, Divs para diseño
Recuerdo que uno de los primeros consejos que me dieron el primer día en Raona fue éste.
En otros tiempos era muy común, casi una regla, organizar el diseño en tablas y frames (Si!! Frames!! Jaja :P). Hoy en día, con la evolución del HTML esto es totalmente obsoleto.
La idea de este tip es utilizar bloques o divs para la organización del sitio, aplicándole estilo de posicionamiento a estos divs, y dejar las tablas para mostrar información tabular.
Imaginen que tenemos nuestro diseño basado en tablas. A la hora de cambiar el diseño, tendremos que reescribir nuestra página web (y a quién no le han sacado canas las tablas!), en cambio utilizando divs esto se solucionaría ya sea modificando el estilo que los afecta, o bien cambiarles la clase o id.NO!:
<table>
<tr>
<td>Superior izquierdo</td>
<td>Superior derecho</td>
</tr>
<tr>
<td>Inferior izquierdo</td>
<td>Inferior derecho</td>
</tr>
</table>
SI:
<div class="superiorizquierdo"></div>
<div class="superiorderecho"></div>
<div class="inferiorizquierdo"></div>
<div class="inferiorderecho"></div>
6-) Cerrar TODAS las etiquetas (bonus)
Al escribir el tip anterior, me acordé automáticamente de este, por lo que lo dejo de bonus :D.
Tal vez parezca algo tonto, pero muchas veces olvidamos cerrar alguna etiqueta html.
Esta es otra de las ventajas con las que contamos los desarrolladores .Net, ya que es algo que hace automáticamente Visual Studio (y también otros programas). Pero incluso utilizándolos, a veces, al modificar algo que ya escribimos no nos damos cuenta que hemos dejado una etiqueta sin cerrar.
Y esto, aunque a veces no lo notemos, es crucial para la validación de nuestro documento en el navegador.NO!:
<p>Párrafo 1
<p>Párrafo 2
<ul>
<li>Primer elemento
<li>Segundo elemento
<li>Tercer elemento
<li>Cuarto elemento
</ul>
SI:
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<ul>
<li>Primer elemento</li>
<li>Segundo elemento</li>
<li>Tercer elemento</li>
<li>Cuarto elemento</li>
</ul>
Bueno amigos míos, espero que esto les haya servido. Y les pido me dejen sus dudas o comentarios. Mucha gente pasa por aquí pero pocos son los comentarios.
Saludos!
Tips para mejorar tu sitio Web - Parte I
Publicadas por
Marcos
Suscribirse a:
Comentarios de la entrada (Atom)
2 comentarios:
Bien Ahi Marcos!! muy bueno tu post! espero la segunda parte
Muy bueno el material, me fue de gran ayuda para mejorar el rendimiento de mi web.
Publicar un comentario