Disculpas y... working

Gente, este post es más que nada para pedir disculpas.

Perdón por abandonar el blog, he estado muy ocupado con temas varios y los he abandonado.

Les comento que estoy trabajando para mudarme mi propia página y no depender de blogger :D

Me voy a basar en BlogEngine de .Net

Tengo pensado actualizarlos en Silverlight, XNA, y demás cosillas que tengo en el cajón.

Saludos gente (a todos los que lo lean)

Tips para mejorar tu sitio Web - Parte II

Hola gente!

Bueno, continúo con el post anterior para dejarle un par de pequeños tips más para optimizar su sitio web.

Ya vimos cómo optimizar el tema de estilos, datos y un par de consejos más.

Ahora sigo:

7-) Validar nuestro sitio

Algo que no muchos diseñadores hacen es validar su sitio. ¿A qué nos referimos con validar el sitio? Bueno, básicamente es asegurarnos que la codificación ha sido correcta, para que cada navegador lo interperte de la manera correcta.
Hoy acá les dejo dos formas de hacerlo, pero pueden encontrar algunas más.

La primera, y creo que muy importante, es validarlo a través de la W3C, nos ofrece su validador. Lo que debemos hacer es entrar en él e ingresar la url de nuestro sitio, para así recibir un informe en detalle con los errores y problemas de nuestra página.

Otra forma de validarlo es a través de los navegadores. En Internet Explorer 8 (el que yo uso) se puede hacer a través de la herramienta para desarrolladores, acá les dejo alguna info oficial. Se darán cuenta que es muy fácil de usar, pueden validar HTML, CSS, Links y además, depurar JavaScript. Para Mozilla Firefox vienen ciertos addons que nos pueden ayudar, acá les dejo el Web Developer y el Firebug.

8-) Alt y Title para imágenes

Este es un tip que trae bonus. Más adelante les contaré.
Es algo que ciertamente no se tiene muy en cuenta, y que no es fundamental para la visualización, pero sí ayuda a la validación del código. De nuevo, recalco otra ventaja con la que contamos los que trabajamos con tecnologías Microsoft, y es que Visual Studio nos lanza warnings si no le agregamos la propiedad alt a las etiquetas img.
Además, un dato para mí sumamente importante es la integración con personas con capacidades diferentes (blog recomendado). Los sistemas de navegación web para no-videntes utilizan estos atributos para dar una explicación del contenido del sitio. Así que a no olvidar!.
Otra propiedad que algunos navegadores suelen interpretar también es la title, por lo que nunca viene mal agregarla :)

NO!:
    <img src=”miimagen.png”>
SI!:
    <img src=”imagen.png” alt=”Mi imagen” title="Mi imagen">


Bueno, ahora le cuento el bonus de este tip:

Agregar esta info a las imágenes de nuestro sitio favorece al posicionamiento, ya que los motores de búsqueda leen esto, y nos da una ayuda extra :)


10-) Primer acto: CSS, Segundo Acto: Contenido, Tercer acto: JavaScript

Más allá del nombre que le he dado a este tip :P, es algo bastante serio.
Hace muy poco he descubierto esto. Algo ya sabido por mí, es lo de agregar el link a la hoja de estilo al comienzo del documento. La explicación: Esto nos asegura que los estilos se carguen junto con el contenido, y si el usuario detiene la carga o se le cae la conexión, pueda ver el documento estilizado. Imaginense que vea el html solo!! No queremos eso, ¿no?

<head>
<title>Mi sitio optimizado :)</title>
<link rel=”stylesheet” type=”text/css” href=”misestilos.css” media=”screen”>
</head>


Bueno, ahora paso a explicar el dato nuevo para mí. Poner el JavaScript al final del documento. Es recomendable, muchas veces, debido al tamaño (o peso) de las librerías JS, lo contrario a lo mencionado acerca del css.
¿Why? Porque es preferible presentarle el documento completo al usuario, para que ya comience a navegar, sin que tenga que esperar a que se cargue tooodo el JavaScript. Una vez que se ha mostrado el contenido, se puede cargar efectos, y demás aportes JS.

Ojo! Que hay casos, en los que el JS es esencial en la página, por lo que este tip no se aplicaría. Es un tanto relativo.

...

<script type=”text/javascript” src=”libreria.js”>
</body>
</html>


11-) Intercambio de links
Bueno, ya cerrando este tema de la optimización de un sitio web. Les dejo un úlitmo tip, que sin duda es el mayor consejo respecto a posicionamiento.
Lo óptimo para un buen posicionamiento es el intercambio de link. No podemos esperar figurar en los primeros resultados de los buscadores sin que la web sepa de nosotros!
Tampoco es de esperar que los sitios añadan referencias a nosotros sin nada a cambio, por lo que aquí entra en juego la cooperación.
Mientras más links mencionen nuestro contenido y/o tengan enlaces al nuestro, más posibilidades de hacernos conocidos por el mundo tenemos! Además es bueno, siempre, colocar la fuente de la cual obtenemos nuestra info, ya que la red de links siempre enriquece el tráfico hacia nuestro sitio.

Espero sinceramente que estos humildes tips les hayan servido de algo.

Éxitos con sus emprendimientos web!

Saludos

Tips para mejorar tu sitio Web - Parte I

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!