El evento cuenta con 6 conferencistas internacionales, incluyendo a:

• Tom Preston, cofundador de GitHub
• Obie Fernandez, autor del libro The Rails Way
• Paul Irish, Front-end Developer y diseñador de UX. Es parte del equipo de Relaciones de Google Chrome, al igual que el de jQuery. Miembro de yayQuery, un Podcast sobre JavaScript.
• Edgar González, CTO enHasManyDevelopers.com
• Sebastian Delmont, Cofundador y CTO de StreetEasy.com en New York. Sebastian es bastante activo en las comunidades de desarrollo tanto de Ruby como de Android.

Se discutirán diferentes temas sobre desarrollo Web y Movil, en diferentes lenguajes. Retos para el desarrollo y emprendimiento en Colombia dentro del marco global y después del evento tendremos un after-party, patrocinado por GitHub donde los asistentes podrán interactuar con los conferencistas y panelistas.

Fecha de la conferencia BogotaConf

• 7am – 4pm, 31 de Octúbre, 2011.
• Bogotá, Colombia.

¿Cuánto cuesta?

Estudiantes - 50 cupos (Quedan 25), (Nota: Articulo escrito el Octubre 21, 2011)

• $90,000 hasta el 30 de Oct.
• Entradas de estudiante a la venta ya aquí

Profesionales - 100 cupos (Quedan 28)

• $150,000 hasta el 30 de Oct.
• Entradas profesionales a la venta ya aquí

Para más información pueden visitar la página web del evento: http://bogotaconf.co/ o pueden escribir a hola [a] bogotaconf.co

Sin duda es una de las representaciones visuales más interesantes que he visto.

En el globo se pueden visualizar las búsquedas en un día, y muestra el lenguaje de cada búsqueda en diferentes colores.

Globo de visualización de búsquedas de Google:

Enlace para ver la visualización de búsquedas de Google. El código y mayor información sobre el desarrollo está disponible en esta dirección.

Es realmente irónico que una organización con un sitio web tan pobre y con tantas falencias se de el lujo de realizar y organizar un premio donde se escogen a los “mejores” sitios web en Colombia.

En serio, son tantas las cosas malas que ví en el sitio oficial del concurso, que no se por donde empezar!

Dios, otro sitio con maquetación en tablas, y con una profundidad de 7 tablas … es decir, existen partes del código donde una tabla se encuentra dentro de otras 6 tablas … muy poco óptimo desde mi punto de vista:

Eso por una parte, por otra parte corrí una prueba de accesibilidad y adivinen … no, tampoco pasó, y por muchas razones, no es que se tratara de una o dos cosas, son varios los factores de accesibilidad que este sitio no cumple.

Acá está el enlace de la prueba de factores de accesibilidad del sitio de la CCIT

Las cosas más básicas como ponerle el atributo ALT a una imagen, o hacer uso de encabezados no se cumplen. Esto da a entender que estos factores definitivamente no son tenidos en cuenta por la CCIT como criterios de evaluación al momento de escoger a “los mejores” sitios web en Colombia.

En cuanto a usabilidad el sitio también presenta sus falencias:

• El menu de navegación no es claro
• Las páginas no tienen títulos
• Los enlaces se abren casi siempre en ventanas nuevas, lo que hace que el usuario se pueda confundir entre tantas ventanas

Un tema especial en la usabilidad del sitio es que es dificil (al menos a mí me costó ) encontrar el enlace donde me pueda registrar a participar en tan magno concurso. Se supone que ese debe ser el objetivo principal de la página, y lo que los usuarios “deberían” realizar.

Sin embargo, el enlace se encuentra, a mi parecer, muy escondido:

Lo más chistoso es que cuando finalmente encontré el enlace me aparece esta página:

Otro paso más para que el usuario llegue al objetivo de la página. Esto es una falla para la usabilidad del sitio. Otra cosa que me llamó la atención es que hay un enlace en la navegación principal del sitio que se llama “PMFS”. Al revisar este enlace se trata de las “Preguntas Frecuentes”.

Falta ver, creo que desde que se inició con este premio, desde ya hace bastante tiempo, se ha criticado que los sitios ganadores no son en realidad muy buenos. Con toda la prensa y patrocinadores que tiene este premio, creo que se puede hacer algo muchísimo mejor y que en realidad sea una competencia y un honor tener un premio como “el mejor sitio de Internet en Colombia” en X categoría.

Esperemos que en esta edición mejoren los premios como tal, más allá de todas las fallas que tiene la página oficial del concurso. Ah, en la página de la CCIT tampoco se pueden ver los inscritos hasta el momento :s …

Para los que les interese, se reciben inscripciones hasta el Viernes 24 de julio de 2009 antes del medio día. La premiación se realizará el 14 de Octubre. El formulario de inscripción está en esta dirección.

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.

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.

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/

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 )… 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

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>

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:

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:

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.

La plataforma como tal todavía no se ha lanzado, pero ya cuenta con varios usuarios registrados, como por ejemplo matiasjajaja

Sin lugar a dudas, un sitio por el que vale la pena pasarse y recorrer un rato.

Por ahora, las principales funcionalidades del sitio web son:

• Blog, donde hay temas como bolsa de empleo o eventos relevantes a la “industria”
• Wiki
• Directorio
• Recursos

Espero que la gran comunidad de desarrolladores web colombianos logren unirse, y organizarse gracias a iniciativas como estas.

1. Declarar el DOCTYPE correctamente: Declarar esta parte del código HTML correctamente permite que la página sea valdidada, y adicionalemente le indica a los motores de búsqueda cómo deben mostrar la página web. Algo que una simple etiqueta <html> no consigue.

<! DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>

2. Ubicar un ID para la etiqueta Body: Ubicar un ID para la etiqueta Body permite crear propiedades CSS que sean únicas para una página en particular. Por ejemplo, si yo quiero que la etiqueta H2 sea diferente en mi página principal que en las páginas interiores del sitio, yo puedo definir en el archivo CSS lo siguiente: #home h2 {} para lograr esto y no afectar la forma en la que se visualizan las etiquetas H2 en el resto del sitio.

<body id=”home”>

3. Ubicar un DIV principal para todo el contenido. Ubicar todo el contenido en un ID principal da un control todal sobre la forma en la que se quiera manejar el aspecto de una página web.

<body id=”home”>

<div id=”contenedor”>

4. Una sección Head corta: Establecer el título de la página, enlazar los archivos externos al sitio. No empezar a ubicar código innecesario en esta etiqueta.

<head>
<title>Desarrollo y Diseño web en Colombia</title>
<meta http-equiv=”Content-type” content=”text/html; charset=UTF-8″ />
<link rel=”stylesheet” type=”text/css” href=”css/print.css” media=”print” />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” media=”screen, projection” />
</head>

5. Menú declarado semánticamente:

<div id=”menu” >
<ul>
<li><a href=”index.php” >Home</a></li>
<li><a href=”productos.php” >Productos</a></li>
<li><a href=”contacto.php” >Contacto</a></li>
</ul>
</div>

Si se quiere tener un poco más organizado el código HTML, se puede declarar en un archivo html aparte el menu, e incluirlo en el archivo principal con la función include_once de php:

<?php include_once(“menu.html”) ?>

6. Ubicar el contenido más importante al inicio. Es recomendable que el contenido html más importante esté primero que el resto del contenido. por ejemplo:

<?php include_once(“noticias_principales.html”) ?>

7. Uso de CSS y no tablas. El código CSS y el uso de hojas de estilos permite que el código HTML sea más ligero, y más entendible por los motoeres de búsqueda. Adicionalmente, es mucho más sencillo de actualizar y de realizar cambios.

8. No usar estilos directamente en el código. Se debe hacer uso de una hoja de estilos única y externa al archivo html. Es decir, se debe evitar a toda costa el uso e etiquetas con estilos como por ejemplo: <h1 style=”padding-top:20px;” />.