El objetivo de esta entrada es la de mostrar porque las páginas de introducción desde un punto de vista de usabilidad y SEO no son una buena idea.

Primero que todo, se tiene que tener claro el concepto de una página de introducción. La mayoría de las veces, es una página en la cual se presenta al usuario una información ‘previa’ a la página web como tal. El ejemplo típico, es una página con una introducción en flash, al finalizar la animación en esta página de introducción, se pasa al contenido del home, o se le presenta al  usuario un botón que dice “Entrar”

Otro ejemplo de este tipo de páginas ocurre en aquellos sitios donde el usuario debe realizar algún tipo de selección para poder ingresar a visualizar el contenido del sitio web.

Snickers, deportes extremos y de aventura

Página web de Snickers, Deportes extremos y deportes de aventura

En el ejemplo anterior, se puede ver cómo al ingresar a la página de snickers, el usuario inmediatamente debe realizar una selección extra, de acuerdo al país en el que esté interesado.

Relación con SEO

Este tipo de páginas no funciona muy bien con los motores de búsqueda debido a las siguiente razón:

  • Poco texto con palabras claves: Es típico que este tipo de páginas contengan poco texto, ya sea porque se presenta una imagen, o una animación en flash (que no es interpretada por los motores de búsqueda. Pueden leer más sobre SEO y Flash). De esta forma, no se le está indicando al motor de búsqueda sobre el contenido del sitio web, lo cual puede prejudicar su posicionamiento.

Relación con Usabilidad

Desde el punto de vista de usabilidad, estas páginas también cuentan con una gran importancia. Algunos estudios indican que un porcentaje considerable de personas simplemente abandonan un sitio web al momento de ver una página cn una introducción en flash.

Adicionalmente, los botones que se presentan en las páginas de introducción con mensajes como “Entre” o “Continue”, son extremadamente redundates, pues un usuario de hecho ya ingresó al sitio web, porque se le pregunta otra vez si quiere ingresar al sitio? … no tiene sentido.

Finalmente, una página de introducción va en contra de la premisa de minimizar la cantidad de pasos que un usuario debería tomar para llegar a la información que buscan

Algunas animaciones en flash pueden tardar mucho en cargar, y puede resultar en el abandono de visitas incluso antes de que se muestre la página, para los usuarios con conexiones lentas este problema puede ser mayor.

En conclusión, y por las razones expuestas en esta entrada, considero que en la mayoría de los casos es mejor evitar el uso de estas páginas de introducción. Aunque obviamente, pueden existir casos en los que el uso de este tipo de páginas sea un requisito.

Para los que inician en CSS, una de las principales dudas, o de las primeras cosas que se quisieran hacer para desarrollar una página web es cómo hacer para que ésta aparezca centrada.

En realidad no es para nada complicado y vamos a ver cómo con básicamente 2 reglas podemos obtener esto:

Primero que todo, en el código que vayamos a desarrollar, necesitaremos un contendor. Allí se incluirá todo el layout, que es lo que queremos centrar. Naturalmente, vamos a llamar a este contenedor … “contenedor”

El código sería algo así:

<body>
<div id=”contenedor”>
…layout…
</div>
</body>

Usando las siguientes reglas en CSS podremos hacer que todo se encuentre centrado:

body {
text-align: center;
}

#contenedor {
margin: 0 auto;
width: xxxpx;
}

Básicamente estamos diciendo que todo lo que se encuentra en el Body debe estar centrado, mientras le damos un ancho específico al contenedor (obviamente en el código hay que reemplazar el xxxpx, por un valor en pixeles, por ejemplo width: 980px;).  La otra regla importante dentro del contendedor es la de “margin: 0 auto;”. Allí se indica 0px arriba y abajo, mientras que a los lados se ajusta automáticamente.

Para alinear el texto de la página como tal a la izquierda, se debe añadir una regla:

#contenedor{
margin: 0 auto;
width: xxxpx;
text-align: left;
}

Allí, se indica que todo lo que esté dentro de #contenedor, va a estar alineado a la izquierda.

Para esta entrada, una imagen que encontré, y que me parece que muchos talvés de han sentido identificados:

1236213508617 Verificar un sitio en varios navegadores

La moraleja: Y por más que muchos “odiemos” a Internet Explorer, es que se debe verificar un sitio web en varios navegadores: Un lugar útil para lograr esto es: http://browsershots.org/

Premios 2wPara los interesados en consursos de diseño web, he encontrado un interesante concurso, organizado por la empresa 2W, acá está toda la información del concurso:

Cómo participar?

Desarrollar un microsite de 4 secciones (máximo)

Tema: CALENTAMIENTO GLOBAL
Jurado: EDUARDO SUAREZ - JULIAN MORA - FELIPE MAZABEL

Requisitos

  • El diseño (o el website) enviados deberán cumplir con los siguientes requisitos para ser aceptados y evaluados correctamente. 2W se reserva el derecho de rechazar diseños que no cumplan con ellas, o de interpretar estos requerimientos a su entender en el caso de que surgieran ambigüedades.
  • El diseño deberá ser desarrollado por los participantes sin colaboración externa.
  • El diseño deberá funcionar en cualquier plataforma· El diseño presentado deberá ser inédito (ni publicado ni distribuido comercialmente, ni puede haber obtenido premios en otros concursos).
  • Derechos de autor: El diseñador deberá ser el autor o contar con el copyright o permiso para usar las imágenes, personajes, escenarios, sonidos, música, herramientas, y cualquier otro material o instrumento usado para el desarrollo del diseño.
  • Lenguaje de Programación y Herramientas adicionales: Podrá estar hecho en cualquier lenguaje de programación.

Plazos de Entrega

Se aceptarán los diseños recibidos hasta las 18.00hs del día 8 de Mayo de 2009. No se aceptarán diseños recibidos luego de esa fecha y hora, aunque hayan sido enviados antes. 2W se reserva el derecho de cambiar el horario y fecha límites sin previo aviso.

Tema

Queremos que el resultado de lo que salga de los premios 2W tenga una mayor consecuencia, que vaya más allá de lo ganado y del reconocimiento hacia los diseñadores. El cuidado del medio ambiente y los problemas que se presentan actualmente en este sentido son de interés mundial y cada persona puede aportar soluciones desde diferentes frentes, uno de ellos es el diseño, concientizando a las personas desde lo grafico de lo que está pasando en el mundo. Con base en todo lo anterior y siendo Colombia el tercer país con mayor biodiversidad, es interesante trabajar sobre la protección del medio ambiente con un tema que por estos días está dando mucho de qué hablar “EL CALENTAMIENTO GLOBAL”.Se puede abordar de diferentes formas, mostrando el proceso, los antecedentes, las cosas que causan el daño, las consecuencias, el mundo al cabo de 100 años, en fin es un tema amplio y que dará mucho de qué hablar.

Premios

  1. Puesto: Mac 24
  2. Puesto: Ipod Touch
  3. Puesto: Ipod Nano

Entrega de premios 15 de mayo de 2009

El sitio oficial del concurso es: http://www.premios2w.com/

Campus Party ColombiaEste año, del 6 al 12 de Julio se llevará a cabo en corferias la segunda edición en Colombia del Campus Party.

El campus party es el evento de tecnología más grande del mundo, y es una gran oportunidad que se realice en Colombia por segunda vez. Las inscripciones para tener un puesto en sala ya están abiertas, en total se anuncian 2500 puestos en sala, de los cuales según la página ya se encuentran aproximadamente 700 puestos ocupados (fui el campusero inscrito con PC número 705 :D)… y faltan más de 3 meses para el evento, así que se podrán imaginar la acogida que ha tiene éste en Colombia.

Por mi parte, acabo de reservar mi puesto en sala para el evento! Así que espero estar cubriendo el evento y publicando lo más importante en el blog.

Sobre los valores, acabo de pagar $140,000 por el puesto en sala, más IVA de $22,400. Hasta hoy habían inscripciones a ese precio, según la página del campus party en Colombia es un pago promocional, así que se espera que el costo aumente a medida que se acerca el evento.

Las facilidades de pago son bastante amplias, ya que aceptan desde tarjetas de crédito hasta consignación a cuenta bancaria, lo cual es muy bueno para facilidades de los visitantes.

Campus Party se ha realizado en varios países como España y Brasil, entre muchos otros, y no hay que perder la oportunidad de asistir al Campus Party en Colombia 2009!

Las inscripciones al evento las pueden realizar siguiendo este enlace.

Otro evento que puede ser del interés de algunos es el Bogotech

 Primer Bogotech Meetup del 2009Primero que todo, que es el Bogotech? Es un espacio en el que se puede escuchar sobre nuesvas teconologías, emprendimientos, puntos de vista sobre temas relacionados con el mundo digital, etc.

Específicamente en el Meetup de ayer, se habló sobre:

  • Emprendimiento
  • Empresas Digitales
  • Marketing Online
  • Tecnología
  • Legislación digital

Es la segunda vez que tengo la oportunidad de asistir a un Meetup -la segunda vez fui como expositor con una presentación llamada “Introducción al SEO” - y me sirvió para darme cuenta que lo de exponer no es mi fuerte :D

En esta oportunidad, me parece que las presentaciones estuvieron bien. La organización del evento fue buena, la moderación de las presentaciones también fue la adecuada, respetando los tiempos para cada expositor.

En particular me gustó la presentación de Matías Jaramillo de Nullun, con su presentación llamada “Una Gesta llamada Trabajadorweb.com”. Mencionó muchos puntos con los cuales estoy totalmente de acuerdo sobre una realidad de los trabajadores web en Colombia y los que vivimos de este mundo digital.

Me quedé con la frase de Matías:  “A pesar de todo, es un buen momento para formar empresa” -o algo entre esas líneas.

Creo que por la longitud de cada presentación (10 - 12 minutos) pueden quedar temas incompletos. Esto se vio muy claramente en la presentación de Alejandro Delgado, donde al exponer sobre Legislación Digital, tuvo que pasar muchos temas “a las carreras”. Sugerencia: transmitir por la web?

Muy buena la iniciativa, y espero que siga creciendo la comunidad del bogotech. Según se anunció, se espera que el próximo meetup sea en 2 meses.

Ya anteriormente había mencionado algo sobre ventures, y su  iniciativa para estimular la creación de empresas competitivas en Colombia.

Resulta que la versión 2009 del concurso ya está disponible. Desde el pasado 2 de marzo, y hasta el 26 de abril, podrá registrar su idea de negocio y concursar por obtener un gran apoyo en el desarrollo de la misma.

Este año, ventures ha decidido ofrecer 2 concursos disponibles para los emprendedores en Colombia.

  • Concurso Nacional: Que a su vez se subdivide en General, social y negocios inclusivos.
  • Concurso Regional.

El valor? Solo $50,000 pesos. A mi parecer es un precio razonable por los beneficios que se pueden llegar a obtener en caso de salir beneficiado o seleccionado durante el concurso.

Si tienen una buena idea de negocio espero que la envíen a ventures, y nos cuenten la experiencia.

Muchas veces dentro del proceso de un emprendiemiento, la parte económica puede ser un gran dolor de cabeza. Pues muchos proyectos se quedan frenados, o se quedan en simples planes, ya que no se consigue el suficiente apoyo de inversionistas, que crean en nuestros emprendimientos.

Esta semana, me enteré de dos grupos inversionistas que pueden ser útiles para todos los emprendedores. El primero se trata de Inversionistas Angeles de los Andes.

Angeles de los Andes

Angeles de los Andes

Al revisar su página web, es muy interesante ver que inmediatamente que pueden ofrecer desde 100 millones hasta 500 millones de financiación.

El proceso para aplicar a estos financiamientos resultan a primera vista sencillo, pues según el sitio estan “dispuestos a escuchar” a iniciativas emprendedoras.

Este es un fragmento de algo así como los requesitos para aplicar a esto:

Los Ángeles de los Andes buscamos aplicaciones de fuertes equipos emprendedores con empresas en etapa temprana de desarrollo y con modelos de negocios rapidamente escalables. Nos interesan los atributos típicos de empresas ganadoras como su alto potencial de crecimiento (p.e. Un potencial de mercado lo suficientemente grande para crear un negocio de por lo menos mil a 10 mil millones de pesos en ventas anuales) ; una base de clientes nacional o internacional, con una adecuada estrategia bien articulada para capturar una participación significativa del mercado; un fuerte equipo gerencial con experiencia relevante, un historial exitoso, un deseo por asesoría y “coaching” y la voluntad de escuchar; una estrategía de salida entre los 3 a 7 años desde la inversión (p.e. adquisición, fusión o IPO); y que estén necesitando una inversión entre $100 - $500 millones de pesos de capital total por ronda y donde la inversión lleve a la compañía al siguiente nivel, materializando así su valoración. A pesar de ser los atributos que buscamos, no son requerimientos obligatorios que garanticen la inversión.

La segunda opción que estuve revisando es emprecol, sin embargo voy a dejar mis impresiones sobre esta segunda empresa en otra entrada :)

Programación orientada a objetos

Programación orientada a objetos

Entender lo que es la programación orienteada a objetos puede tomar mucho tiempo, de hecho existen libros completos dedicados exclusivamente a este tema. Es por esto que, simplemente voy a dar una pequeña introducción sobre lo que es la programación orientada a objetos.

La programación orientada a objetos es un enfoque hacia la programación que pretende motivar el desarrollo de aplicaciones bien estructuradas haciendo uso de técnicas como  herencia, modularidad, polimorfismo y encapsulamiento.

Una de las principales ventajas de este enfoque, sobre todo en las aplicaciones web usando PHP, es el reuso de código. Pues un pedazo de código bien escrito puede resolver un mismo problema en otros proyectos.

Clases:

Una clase es una plantilla de cualquier cosa, carros, productos, clientes: cualquier objeto que sea relevante a la aplicación. No se debe confundir una clase con un objeto. Una clase define los métodos (o comportamientos) y las propiedades (atributos o estado) de un objeto.

Por ejemplo, vamos a crear una clase llamada Parrafo, que simplemente imprimirá un párrafo en HTML.

La sintáxis es bastante sencilla en PHP, se inicia con la palabra clave class, seguido por el nombre de la clase, en este caso sería “Parrafo”, y luego se indica con llaves para delimitar en donde inicia y finaliza la clase.

<?php

class Parrafo

{

//Aca se declaran los métodos y propiedades de la clase

}

?>

Se pueden añadir los métodos que se quieran entre las llaves, éstos atributos van a estar disponibles para los objetos creados que utilicen esta clase. Adicionalmente, se pueden declarar variables que puedan ser requeridas para que los objetos funcionen correctamente. Por ejemplo, la clase Parrafo necesitaría una variable para almacenar el contenido del párrafo.

Los métodos, describen las acciones que los objetos pueden realizar. Los métodos de una clase contienen las instrucciones que los objetos necesitan para funcionar, por ejemplo, para la clase Parrafo se pueden crear los siguientes métodos.

class Parrafo

{

private $contenido;

public function __construct($contenido = ‘ ‘ )

{

$this->content = $content;

}

public function imprimir()

{

return ‘<p>’.$this->content.’</p>’;

{

}

?>

En este caso, se han añadido dos nuevos métodos a la clase Parrafo: __construct y Imprimir. El primer método, es un método especial que se encarga de inicializar los objetos, mientras que el segundo método, se encarga de imprimir un párrafo en HTML.

Este ejemplo es muy sencillo, y en la realidad hasta “inutil” pero sirve para ilustrar el uso básico de clases y objetos en PHP.

Otra forma de entender un método, es verlos como un canal de comunicación: Un objeto llama un método, u otro objeto y simplemente recibe una respuesta. En nuestro ejemplo, un objeto llama al método Imprimir() en un objeto creado a partir de la clase Parrafo, y lo que recibe es un elemento en HTML con el párrafo.

Los métodos de la clase son los que se encargan de “realizar todo el trabajo”.

Para finalizar, vamos a ver cómo se llama un objeto desde el código PHP:

$parrafo = new Parrafo(’Hola Mundo!’);

echo $parrafo->Imprimir();

La primera linea se encarga de crear el objeto, y en la segunda línea se llama a la funcion correspondiente para imprimir un párrafo. Por lo tanto, la respuesta de el fragmento de código anterior sería:

<p>Hola Mundo!</p>

Tips de usabilidad

En: Usabilidad

24 Mar 2009
Tips Usabilidad

Tips Usabilidad

La primera regla de usabilidad según Nielsen, es “No hacer pensar a las personas”.

Esta regla tan sencilla, parece ser olvidada por muchos diseñadores o desarrolladores web. En muchas ocasiones, los diseños web pueden llegar a ser confusos y complejos, y la información es dificil de encontrar, lo que hace que las personas no encuentren lo que buscan en un sitio web.

Las personas quieren encontrar la página correcta de forma rápida y eficiente.

  • Nombrar los enlaces claramente: De esta forma, los visitantes podrán encontrar lo que buscan de forma rápida y sin confundirse.

Otro factor importante a tener en cuenta, es que los humanos generalmente sacrifican tiempo por sacrificio, sin ser concientes de lo que hacen. Es decir, toman decisiones basados en lo que ven, sin explorar todas las opciones.

Muchos usuarios web hacen click en el primer enlace que pueda funcionar para ellos, sin revisar todas las opciones, este comportamiento se puede ver más claramente en audiencias más jóvenes.

  • Pensar cuidadosamente la forma en la que se presenta la información a los usuarios
  • Ubicar los enlaces y la información más importante en la parte superior de las páginas
  • Si quieres que las personas hagan click sobre un enlace con respecto a otro, debes poner el enlace al que quieres que hagan click primero en el código.

Estos son solo unos tips de usabilidad, que pueden ayudar a los visitantes a un sitio web tener una mejor experiencia, o que encuentren la información que están buscando.

Tener código HTML optimizado es una gran ventaja para el éxito de un sitio web, inicialmente desde dos puntos de vista: para los usuarios y para los motores de búsqueda. Aveces el desarrollo de un sitio web con tablas puede parecer un verdadero desorden!

Revisando varios sitios web, es increíble que no se preste atención a factores básicos de usabilidad o accesibilidad durante el proceso del desarrollo de un sitio, y aunque debo reconocer que últimamente sí se estan generando buenas propuestas de desarrollo web, al menos en Colombia, aún hay algunos desarrollos que dejan mucho que desear.

En este post, me voy a enfocar en solo un factor que es importante para tener un mejor sitio web: El uso de tablas vs uso de CSS.

Para los motores de búsqueda, al menos en mi experiencia, he notado que el uso de CSS ayuda tremendamente en comparación al uso de tablas. Ya que con un sitio web desarrollado en CSS se puede tener una mejor relación de contenido vs código, el código es más fácil escribirlo semánticamente, el peso de las páginas web serán más ligeras, etc. En general, es mejor CSS que tablas :)

Revisando varios sitios web, me encontré con uno en particular que ofrece servicios de deportes extremos en Colombia: dosis verde.

El sitio web es bueno, sin embargo, por alguna razón noté que tardaba mucho en cargar, por lo que lo primero que hice fue mirar el peso total de la página web:

peso dosis verde Evitar el uso excesivo de tablas!

135k ?! Me pareció algo exagerado, pero tras revisar el código del sitio web, me encontré con la -desagradable- razón.

El uso excesivo de tablas es realmente procupante, esto hace que el código no sea limpio, y que finalmente, la página web tarde más de lo normal en cargar.

He tratado de ilustrar la cantidad de tablas que se usan para mostrar el contenido de este sito web:

tablas dosis verde Evitar el uso excesivo de tablas!

Existe un plugin para firefox llamado “web developer” (que a propósito, recomiendo que lo tengan, es muy útil) que permite resaltar las tablas presentes en un sitio web.

En la figura anterior, cada cuadro, es el uso de una celda de una tabla, se ve que el uso es exagerado. Y esto sin lugar a dudas, no es bueno para el desarrollo web.

Para concluir, voy a listar otras razones adicionales por las que el uso de CSS es mejor al uso de tablas:

  • Las páginas cargan más rápido, como se mostró en el ejemplo anterior, el codigo de las páginas desarrolladas en tablas es por lo general más pesado que cuando se usa CSS
  • Rediseñar es más sencillo con el uso de CSS que con tablas: Las tablas son más dificiles de modificar, mientras que con CSS, simplemente se puede ir modificando la hoja de estilos.
  • Mover código más fácilmente con CSS: Para el posicionamiento web, es mejor tener código relevante al inicio de una página. Esto se puede lograr fácilemente con CSS, mientras que con tablas es casi imposible.
  • Mejor uso de etiquetas estándares como H1s, H2s. Aunque obviamente también se pueden usar con tablas, he notado que el uso de estas estiquetas es mayor cuando un sitio web está totalmente en CSS. (Esto es solo una observación personal :) )

Espero que los puntos anteriores sean útiles para resaltar las ventajas que tiene CSS con respecto al uso exesivo de tablas en el desarrollo de sitios web.

Sobre este blog ...

He abierto este blog para brindar información sobre desarrollo y diseño web principalmente. Espero que la información que les presente aquí les sea útil de alguna forma. Ah tengo cuenta de twitter en @alexanderv33

Fotos ...