DOM: intoducción
September 4, 2009
Aprovechando que todavía falta algunos días para que sea martes, el día que he escogido para liberar los artículos sobre ajax, y que nada me impide publicar algo que no sea ajax durante los demás días, me voy a tomar el tiempo para dar una breve introducción al DOM.
El DOM, o Document Object Model, no es más que una interfaz independiente o neutral al lenguaje y la plataforma que nos da la oportunidad de acceder y modificar documentos, específicamente aquellos que han sido tratados con algún lenguaje de enmarcado como lo es (X)HTML.
Este famoso DOM nos permite acceder de forma estructural el contenido de nuestros documentos de forma dinámica. Algunos tienen la idea que el DOM es exclusivo de HTML o de Javascript. La verdad no podría ser más diferente. El DOM no es exclusivo de HTML y mucho menos de Javascript. Si bien es cierto que por un lado los documentos HTML, todos, contienen un DOM, por el otro lado, los documentos Javascript no. De hecho, la única relación entre Javascript y el DOM es la que se mantiene mediante la API de DOM de Javascript. Esta API nos permite el acceso al DOM y se conforma de métodos como getElementById() y getElementsByTagName().
Es el DOM un leguaje de programación?
No. El DOM es simplemente un modelo, un maqueta de la estructura de nuestro documento; de ahí su nombre. El DOM se representa generalmente como un árbol genealógico, con el elemento HTML a la cabeza, ya que este elemento es el antecesor de todos. No hay otro elemento más arriba de HTML (esto hablando aquí exclusivamente de documentos HTML). Analicemos un ejemplo:
<html>
<head>
<!-- Contenido de head -->
</head>
<body>
<!-- Contenido de body -->
</body>
</html>
Como puedes ver en ese código, el elemento html es que contiene a todos los demás (head y body junto con sus elemento internos no mostrados aquí). A cada uno de estos elementos dentro del DOM se les conoce como nodos. Todos los nodos, excepto por html, son hijos de otro nodo. En nuestro ejemplo, los nodos head y bodoy son hijos de html.
Interactuando con el DOM.
Dependiendo del lenguaje que escojas, la forma de interactuar con el DOM puede variar. Nosotros escogeremos Javascript, ya que este blog es principalmente sobre Javascript. Como ya mencioné anteriormente, Javascript nos ofrece una API (Application Programing Interface) para el uso del DOM. Una API no es más que una serie de métodos que se hacen disponibles para poder interactuar con una aplicación. De hecho, dependiendo de con quien hables, puede ser que algunos no consideren lo métodos que ofrece Javascript para interactuar con el DOM como una API ya que el DOM no es una aplicación, sino una representación del documento. Sin embargo, yo, por comodidad, he decidido llamar a este conjunto de funciones API.
Esta API se conforma de métodos como los ya mencionados getElementById() y getElementsByTagName(). Curiosamente javascript no contiene un método getElementsByClassName(), lo cual es curioso considerando que las clases son una buena forma de agrupar elementos que en determinado momento nos gustaría poder manejar todos de una sola vez. Sin embargo, Javascript si nos ofrece otra serie de métodos como appendChild() y removeChild() que sirven para agregar y remover nodos respectivamente. No voy a entrar en detalles ni a listar todos los métodos para el manejo de DOM ofrecidos por Javascript ya que solo pretendo dar una breve introducción al DOM y no al API de Javascript para el uso del DOM. En su momento ya habrá tiempo para tratar ese tema.
Los tipos de Nodos
Ya mencioné que cada elemento en HTML es representado por un nodo en el DOM. Veamos ahora los distintos tipos de nodos que hay. Específicamente tenemos:
El nodo document que es la representación de todo el documento.
Nodos de elemento, que representan un elemento como puede ser <p></p>
Nodos de texto, que representan texto como puede ser “mi texto”
Nodos de atributo, que representan un atributo como title=”hola mundo”
Nodos de comentario, que representan un comentario <!– comentario –>
Es necesario entender los diferentes tipos de nodo ya que cada uno tiene sus peculiaridades. Algo en lo que muchos novatos caen, es pensar en elementos como entidades globales, es decir que en:
<p>Mi parrafo</p>Muchos ven a “Mi parrafo” como el valor de <p></p>. La verdad no puede estar más lejos. “Mi parrafo” no es el valor de <p></p>, más bien es un nodo completamente distinto y hasta cierto punto “independiente”. En un articulo futuro estaré hablando más sobre el DOM y explicando con código estas leves confusiones. Como dije hace un momento, mi único objetivo por ahora es poder explicar lo que el DOM es.
Por último, voy a decir que el DOM es una de las mejores cosas que le pudo pasar al mundo de la web. A través de DOM es posible modificar dinámicamente y en tiempo real muchos aspectos de una página web. En un futuro me gustaría hablar sobre DOM scripting y sobre uso responsable, amigable y degradable del DOM, pero por ahora esto es el fin de esta breve introducción.
Cuando encuentres un problema en una app, arreglalo.
June 28, 2009
Uf, esto va a ser como un record de errores que he aprendido a la mala. Han sido un montón, pero apenas pensé en iniciar esta serie. Ayer estaba muy tranquilo esperando que se llegara la hora de ir al trabajo. De repente me puse a pensar el cual sería la razón por la que una de mis amigas a quien invite a mi nuevo proyecto, el xismografo, no había escrito uno a pesar de haber contestado el mio sin demora. Era una de dos, o no lo había hecho, o no me había invitado a contestarlo. Ambas eran muy improbables. Decidí ir y revisar los últimos ximografos y me di cuenta que en efecto si había creado un xismografo. Entonces pensé, por que no me invito. Revise la lista de invitados y me di cuenta que sí había intentado invitarme. El problema es que todos los correos los había encerrado en un paréntesis. Por ejemplo, (uncorreo@unsitio.com). La parte de la app que envía los correos simplemente envió las invitaciones a las direcciones tal y como estaban, con paréntesis. Como es de esperarse, esas invitaciones no son validas, y aun que lo fueran, no son las correctas.
Me tocó modificar manualmente una de las tablas en mi base de dato, algo que nunca debe hacerse, pero que esta vez no tenía otra opción. Lo peor de todo es que esa posibilidad de error yo ya la había pensado, pero preferí confiar en que el usuario haría bien las cosas.
Modificar manualmente las bases de datos me trajo otro problema que aun estoy tratando de resolver. El problema no es grabe y es solo con uno de los registros anteriores. Podría decirse que puedo simplemente olvidarme del problema y que no me afectara realmente mucho, pero esa no es una opción cuando quieres que un proyecto tenga éxito.
Otro de los problemas en lo que ya había pensado, pero que también, tontamente, preferí confiar en el usuario, es que a la hora de presionar enter en un formulario, este se envía automáticamente. Por muchos tiempo estuve pensando en cancelar esa acción por que me podría causar resultados no deseados. Por ejemplo el envío de un formulario cuando aun no está completo. Me he dado cuenta que eso fue lo que le pasó a mi amiga.
Estos dos errores me parecieron poco probables que aparecieran, pero al final son los dos errores que presenta la primera persona que intenta crear un xismografo y distribuirlo. Por eso cuando piense en una posibilidad de error en algún sitio o app en la que estés trabajando. O cuando estés organizando cualquier cosa, no te dejes convencer por ti mismo pensando que es muy poco probable que pase. Mejor ponte a trabajar en prevenir y asegurar que efectivamente no pase. Generalmente soy un programador muy negativo. Siempre pensando que mis usuarios van a tratar de hackearme el sitio, que no van a saber ni como prender una compu, que no van a tener javascript activado, que no van a tener imágenes disponibles o css disponible. Trato de prevenir cualquier disfuncionalidad en mis proyectos, pero esta ves simplemente me dejé llevar por el conformismo y un poco de flojera y ahora he tenido que pagar el precio.
La web verde.
January 19, 2009
En los últimos años ha habido un chispazo en el movimiento ecologista. Cada vez más gente se une a este movimiento y empieza a cambiar el rumbo que llevamos en el tema ecológico. Hemos llegado al punto en que es necesario estar conscientes de que nuestros actos afecta el medio ambiente de una forma positiva o negativa y que hasta la fecha, el efecto ha sido mayormente negativo. Curiosamente, durante años hemos estado tratando de salvar el medio ambiente si darnos cuenta que realmente quienes están en peligro somos nosotros mismos, los seres humanos. El medio ambiente seguirá estando aun cuando nosotros nos hayamos extinguido y muy seguramente la tierra podrá regenerarse y curarse a sí misma cuando nosotros ya no estemos.
Durante mucho tiempo la raza humana fue la raza dominante de este planeta, pero ahora nos hemos convertido en una enfermedad. El planeta tierra está enfermo, y su enfermedad se llama humanidad. Sin embargo, es esa misma enfermedad la que podría empezar la recuperación de nuestro único hogar. Somos nosotros quienes tenemos la llave hacia un nuevo futuro que promete un ambiente más natural y menos contaminado.
Que tiene que ver esto con la web? no mucho al primer vistazo, pero cuando miras más adentro te das cuenta que hay mucha relación, no tanto con el problema como con la solución. Todo aquel que se dedique al desarrollo web tiene entre sus manos un poder enorme de comunicación el cual puede usar para bien o para mal. No se trata de comenzar a crear sitios web dedicados al cuidado de la naturaleza y la protección ambiental. La web verde es más acerca de enviar un mensaje de forma sutil, de desarrollar sitios que consuman menos recursos, sitios que requieran menos tiempo para el logro de objetivos de modo que el tiempo de conexión sea reducido, reduciendo así el consumo de energía. La web verde es sobre el diseño de logotipos e interfaces basados en los elementos naturales. Tomemos por ejemplo el logotipo de apple, una manzana. Independientemente de que la empresa haya sido “castigada” por Greenpeace*, el mensaje, muy probablemente inconsciente, de su logotipo es totalmente orgánico. Imagina una web en la que cada sitio envía un mensaje de este tipo al usuario. Esa sería sin duda una de las contribuciones más nobles de los desarrolladores web.
Es claro que sería necesario hacer una investigación profunda sobre el impacto que la parte visual de un sitio web tiene en el subconsciente del visitante, pero no hace falta ser un experto para darte cuenta que al entrar en un sitio web en el que la primer imagen que vez es un bosque verde con toda su biodiversidad expuesta tu forma de ver la vida cambia por un instante. Un instante parece no ser mucho, pero la vida está hecha de instantes y el cambio se hace con pequeños actos conectados el uno con el otro por un corto tiempo. Es decir, pequeños instantes de buenas acciones seguidos uno tras otros.
Como un ejercicio mental, ve google y concentrate en su favicon. Ahora piensa en lo que ese favicon te sugiere. Chances hay de que a tu mente vengan imágenes relacionadas con la naturaleza. Ese es el impacto que las imágenes tienen en nuestro subconsciente. Ahora imagina una web plagada de mensajes del mismo tipo.
Alguien me dijo en un foro que muchas veces mis mensajes son utopías. Me gusta pensar que soy un soñador y tener sueños como el da la web verde porque en toda la historia los únicos que fueron capaces de dejar huella y lograr algo fueron aquellos que tuvieron un sueño. Me gustaría que te unieras a mi sueño y que la siguiente vez que estés desarrollando un sitio web lo hagas de forma más consciente sobre el mensaje que envías con tus imágenes logotipos y demás y que pensaras en reducir el tiempo necesario para el logro de objetivos así como el consumo de recursos requeridos para lograr dichos objetivos. Usemos nuestro talento y conocimiento para un fin menos egoísta que mero hecho de ganarnos la vida y empecemos a pensar en preservar la vida. No solo la nuestra, sino la de los demás seres con quienes compartimos el planeta y la de las futuras generaciones.
*http://ecomundo.servital.es/apple-apoya-la-ecologia-%C2%BF-estrategia-o-compromiso/
Productividad web
January 18, 2009
Como mides el nivel de productividad de tus sitios web? Muchos piensan que entre más visitas más productividad, pero no se fijan en el tiempo que los usuarios pasa en su sitio web. Esto es importante porque el tiempo que un usuario pasa en nuestro sitio web nos da una idea de que tan interesante y útil les pareció. Muchos pueden decir que para eso basta con revisar el número de usuarios que regresan, es decir, no basarse solo en las visitas únicas sino ver y tomar en cuenta el numero de visitantes recurrentes; esto cierto, pero solo a medias. La verdad es que muchos de ellos solo regresan por que tu sitio web aparece continuamente en los buscadores. Eso no necesariamente quiere decir que estos usuarios encontraron tu contenido interesante, simplemente quiere decir que tienes un buen trabajo de SEO tras tu sitio. Muchos de esos usuarios quizá piensan “otra vez este sitio” y se vallan al instante.
Entonces, como medir realmente la productividad de tu sitio? Eso depende mucho del sitio que tienes. Por ejemplo, si tienes un sitio de comercio electrónico, bastará con ver las ganancias que te está generando. Sin embargo, la cosa se vuelve un poco más complicada con sitios más personales como los blogs. Una forma fácil de medir la productividad es mediante los suscriptores de tus feeds (RSS, atom, etc.) Debido a que los suscriptores demuestran interés en seguir leyendo tu contenido, puedes asegurarte que cada suscriptor es una muestra de la productividad de tu sitio. Otro método es el uso de comentarios, aun que claro tanto estos como los feeds tienen la desventaja de que son realmente muy pocos los usuarios que hacen uso de ellos. Tomemos por ejemplo este blog que lees ahora, a pesar de tener un numero de visitas mas o menos constante, la cantidad de comentarios es mínima en comparación con esas visitas. Lo que sucede es que los usuarios no están acostumbrados a comentar, pero si lo hicieran ayudarían mucho a mejorar la calidad de los blogs. Pero que hay de otros sitios como los portafolios en linea?
Ese es otro tema aparte. Para medir la productividad de tu portafolio necesitas tomar en cuenta no el número de visitas o de comentarios, sino la cantidad de clientes que obtienes a través de tu sitio web. En este tipo de sitios el posicionamiento en buscadores juega un papel muy importante, pero es más importante aun el medio de propaganda más antiguo, el que se hace de boca en boca. Por tal motivo me atrevo a decir que lo que realmente le da fuerza a tu portafolio en linea no es el portafolio en sí o el SEO, sino más bien la calidad de tu trabajo.
Este último punto es realmente el motor de todo buen sitio -Calidad- La calidad lo es todo. Un sitio que regularmente actualiza su contenido pero no solo para ocupar espacio sino para presentar contenidos de calidad, es un sitio que esta “condenado” al éxito.
La productividad web puede ser medida de distintas maneras, y todo depende del objetivo final que pretendes lograr con tu sitio web, pero sin duda, el número de visitas no lo es todo y un número alto no demuestra un buen nivel de productividad. Para lograr ser más efectivo se necesitan contenidos de calidad orientados a un mercado especifico de consumidores que son quienes le darán a tu sitio web el posicionamiento. Mi consejo es, antes de empezar a preocuparte demasiado por tu puesto en google, preocúpate por la calidad de tu contenido, pues es esté a fin de cuentas el que determinará el nivel de productividad de tu web.
Eres lo que escribes
November 21, 2008
Con pena y desagrado veo como la tradición escrita se degrada todos los días. Es deprimente encontrar mensajes del tipo:
hla, cmostas
xo ak
nms psndo pr t blg….
Incluso en algunos sitios que se supone son de contenido serio y redactados por personas serias, se puede ver una redacción muy pobre. Yo personalmente estoy en una lucha constante por mejorar lo que escribo, pues me he dado cuenta que en Internet uno es lo que escribe.
En un inicio, cuando empecé a hacer presencia en Internet, escribía de forma tal que recibí varias críticas en cuanto a mi ortografía, que es lo primero en que se fijan los usuarios. En aquel entonces me excusaba diciendo, “uso una mac con el OS y el teclado en inglés, por lo que carezco de ‘ñ’ y acentos”. Pero claro, eso no justificaba el por que escribía “caresen” o cosas por el estilo.
Después de lo que yo consideré como demasiadas críticas que solo me causaban incomodidad, decidí empezar a usar un corrector de ortografía. Estuve contento durante un tiempo, hasta que me di cuenta que muchas veces escribía “ingles” cuando en realidad quería decir “inglés”, y como ambas palabras son correctas, el corrector ortográfico no me marcaba error alguno, pero el error si existía.
En ese momento me di cuenta que el corrector ortográfico no era suficiente y que era necesario hacer un chequeo “manualmente”. De modo que empecé corrigiendo todas los errores que el corrector me mostraba y después revisaba el contenido buscando por palabras, que si bien no estaban ortográficamente incorrectas, si lo estaban contextualmente. De ese modo logré un punto extra en mis escritos.
Últimamente estoy preocupándome por la redacción de mis textos. Razón por la cual me lleva unos días terminar de revisar un articulo. Mis escritos esta aun muy lejos de la perfección. Pero ya han mejorado bastante desde mis comienzos.
