La Web A Viviendo en la era digital

Hace rato que quería postear sobre este tema. Primero, por la valiosa ayuda que significa contar con buenas herramientas de desarrollo y, segundo, porque Firefox es un tópico que me trae hartas visitas. Además, justo ahora me sirve para secundar un post de Darcy referente a una conversación que tuvimos sobre lo extraño que nos parece el temor que sienten algunas empresas por el hecho de que sus ideas sean copiadas… Uff! Si es la mejor forma de liderar en Internet. Por ejemplo, ayer investigaba nuevamente sobre las Conversaciones Distribuidas -un tema que me obsesiona- y llegué a la wiki de Microsiervos sobre el tema. Wow! Hace dos años todo estaba muy en pañales, pero ahora ya hay tres sitios que capitalizaron la idea y aún así la pelota sigue dando botes. ¡Qué enseñanza, no?

Aunque este es un tema bastante menor en comparación al ejemplo citado, espero sirva de base para una conversación interesante entre dearrolladores y bloggers sobre la materia. El caso es que en AV todos los sitios que producimos son testeados en Safari, Explorer 6/7, Opera, Firefox y Konqueror, no obstante el grueso del desarrollo se hace usando Firefox. No es casualidad, pues resulta que este browser cuenta una ventaja enorme para el desarrollo web, debido a la gran cantidad de extensiones que tiene para este efecto.

Finalmente, las 7 extensiones imperdibles para un desarrollador web son la siguientes:

1. Web Developer Toolbar
Es imperdonable si eres desarrollador y no la usas. Su utilidad sobrepasa todo lo que pueda decir de ella. Tal vez lo único que le falta es un cuentagotas, pero sólo por sus atajos de teclado para ver el código fuente o para pillar ese nodo html que necesitas para darle style o manipularlo vía Ajax es el “number one” de esta lista.

2. FireBug
Otra extensión obligatoria si desarrollas. Debo confesar que la uso desde hace poco, pero me ha sacado de apuros con javascript más de una vez. Aunque su utilidad se extiende también a CSS y HTML.

3. FireFTP
Es un cliente FTP que no tiene nada que envidiar a niguno de los más populares como CuteFTP o WSFTP. Soporta SFTP, conexiones pasivas y activas, sincronización entre la carpeta locales y del servidor.

4. Dom Inspector
Dependiendo de las opciones que selecciones, se instala junto con Firefox. Tremendamente útil para trabajar con Ajax, sobre todo, cuando te peleas con Explorer o Safari.

5. Tab MixPlus
Imperdible cada vez que instalo Firefox. Tal vez no es tan útil como las anteriores, pero me permite configurar las pesetañas, el comportamiento del mouse y la sesiones a mi antojo.

6. Colorzilla
Es el cuenta gotas que le falta a Web Developer, muy útil para trabajar en CSS y diseño en general.

7. Del.icio.us Bookmarks by Yahoo Inc.
Constantemente navego buscado tutoriales y guías que si no fuera por Del.icio.us y esta extensión se perderían en el olvido. Lo mejor es que tanto en mi casa como en mi trabajo tengo los mismos bookmarks. Si los necesito en otra parte, además los tengo integrados a mis blogs y a mi facebook.

Entonces ¿qué extensiones utilizas tú?

Como idea Magento realmente no constituye nada nuevo. Podríamos decir que se trata de un sistema de comercio electrónico desarrollado en PHP y Mysql que surge como alternativa a Oscommerce para montar tu tienda virtual online y liberado bajo open source por la empresa Varien, pero con la gracia de que ha sido desarrollado utilizando Zend Framework.

Algunas de las características que se pueden destacar respecto de otras soluciones similares son:

• arquitectura escalable
• facilidad para integrar aplicaciones de terceros
• optimizado para SEO
• soporte Ajax para Web 2.0
• uso de tags
• soporte multidivisa y multi-lenguaje

Ver la lista completa de opciones

Magento Commerce está disponible en su versión 0.6 Beta, y se presenta como seria alternativa a OsCommerce debido a que tiene una gráfica y un código mucho más profesional que su rival.

No me gusta simplemente copiar y pegar, pero he encontrado dos textos más que interesantes que me gustaría enlazar para quien esté interesado.

El primero es sobre Arquitectura de Software y Usabilidad. A modo de resumen, la A.S. sería la encargada de:

• Definir los módulos principales
• Definir las responsabilidades que tendrá cada uno de estos módulos
• Definir la interacción que existirá entre dichos módulos:
• Control y flujo de datos
• Secuenciación de la información
• Protocolos de interacción y comunicación
• Ubicación en el hardware

Entre otras cosas hacer esta planificación correctamente serviría para evitar el típico “esto no es posible en esta plataforma” y lo que es peor, tener que implementar, a última hora y contra el tiempo, módulos que en un principio no fueron pensados como parte de un programa, algo que no debería ser tan dramático si se hubiese programado pensando en escalablilidad.

El segundo enlace es precisamente sobre escalabilidad. Realmente no es un texto sino una serie de reseñas sobre las plataformas usadas por sitios como Flickr, Digg o YouTube. En palabras sencillas, se trata de fichas técnicas con los lenguajes, bases de datos, servidores web, sistemas operativos y frameworks utilizados por estos sitios.

Sólo como comentario debo decir que me llama mucho la atención la ventaja abrumadora del conjunto Linux, Apache, MySQL y PHP, sobre otros entornos similares.

¡Uff, al fin este fin de semana lanzamos el beta público Descorchados! Ayer escribí un post para anunciarlo, pero se me pegó el tarro. y, resumiendo, se hizo tarde.

Hasta ayer sentía incertidumbre. Hoy sigo con cautela todo el proceso, pero confirmo que desde el inicio del proyecto hasta ahora ha habido un progreso y aprendizaje enorme por parte de todos los que particiamos del proyecto.

En fin, es el fin de una etapa y el comienzo de otra. Por lo que puedo adelantar, pronto soportará tracbacks (la meta es una API). También estamos trabajando para que se pueda integrar con flickr, además de que los usuarios puedan crear grupos o minicomunidades.

Mientras el mundo del open source está en medio de una polémica por el borrador de lo que será la nueva licencia GPL, Microsoft alega que el kernel de Linux viola 65 de sus patentes, OpenOffice.org infringe 45 y otros programas open source 83.

“Según Microsoft, si el software libre tiene esa calidad es porque viola las patentes, que en algunos casos es de forma intencionada. Y más claro lo tiene aún en el tema de su uso, si quieren usar sus patentes, que paguen los royalties.”

Para Eben Moglen, abogado de la Free Software Foundation, el software es un algoritmo matemático y como tal no puede tener patente y aunque Microsoft posea estas patentes, no sirven para nada. Afortunadamente para esta fundación, la Corte Suprema de Estados Unidos nunca ha expresado ninguna ley sobre ello.

Como sea, nada de esto se puede comprobar hata que Microsoft muestre su código fuente, algo a lo que se han negado rotundamente. A mi me huele que los que copian son ellos, y para peor, lo hacen mal, sino usen OSX y compárenlo con Vista.
Ver más: Report: Microsoft says open source violates 235 patents

Aunque ya está algo repetido, nunca está mal darle un vistazo a estas 20 reglas para crear sitios web exitosos y tenerlos en cuenta (algunos más, algunos menos).

El texto es una traducción de 20 Rules Of Smart And Successful Web-development de Vitaly Friedman, archiconocido por The Web-Developer�€™s Handbook.

El enlace

recursos

Simplemente quiero compartir esta lectura, pues me ha parecido muy ilustrativa para quienes no están muy al tanto del CopyLeft o iniciativas similares como Creative Commons. Además también da tema para hablar sobre cosas como la importancia de sitios como digg y menéame en esta sociedad de recargada de información.

216 Segundos De Mirada
La justificación económica del copyleft.
Por José Cervera

En la Biblioteca de Babel lo valioso son los ojos que te miran.

Cuando los libros sobran lo que falta son mentes que los lean y entiendan. Cuando la información intoxica por exceso lo escaso es una mente que la mire y comprenda. Lo escaso es valioso. Luego la moneda del futuro es la atención.

Tanto tienes, tanto vales; el proverbio siempre se ha cumplido con certidumbre. Hoy la atención manda. Seas periódico internacional o weblog, nodo corporativo o diario íntimo, cibertienda o publicidad, el principal problema de cualquier presencia en Internet es conseguir atraer unas migajas de atención.

Read the rest of this entry »

No es que no me guste Firefox, no es que esté descontento con Firefox, de hecho lo adoro, pero desde un tiempo a esta parte he notado que tiene un pequeño problema de consumo de memoria… No importa, puedo soportarlo.

El asunto es que me vi en la obligación de instalar Opera para asegurarme de que los sitios web en los que estoy trabajando fuesen compatible con la mayoría de los navegadores, cumpliendo a la vez con los estándares de la W3C.

Para mi sorpresa Opera is such a web browser! Ya saben, más rápido que ninguno y muy suave al la vista y al mouse, no como las primeras versiones que se sentían durísimas y que además requerían Java.

Además, según me enteré, de los navegadores que corren en Windows es el que más respeta a la W3C (de hecho voy a tener que corregir algunas fallas en mis hojas de estilos). Tal vez, la única desventaja, es que no tiene extensiones como Firefox. Una lastima, por que si fuese así, me cambiaba ya mismo.

Este es el mejor título para la novela de encuentros y desencuentros entre Firefox, Internet Explorer, las hojas de estilo y yo. Una novela que comenzó cuando quise hacer una plantilla a tres bandas, al modo de Alt1040 o FayerWayer. En el primer capítulo me bajé un par de plantillas de tres columnas para estudiarlas un poco. No se veía nada complicado, pero un par de “position: absolute” me incomodaron un poco y decidí seguir investigando para buscar una solución más estándar y flexible. Una vez que tuve lo que necesitaba: la etiqueta “float”, el resto se veía fácil.

La estructura de WordPress divide el contenido en una cabecera, la sección de los post (el loop), el sidebar o barra lateral y el footer. Por lo que simplemente había que dividir el sidebar en dos. Fue pan comido.

.sidebar_derecha{
float: left;
width: 44%;
padding: 0px;
}
.sidebar_izquierda{
float: right;
width: 44%;
padding: 0px;
}

Así todo lo que quisera poner en el lado derecho del sidebar simplemente lo encerraba entre <div class=”sidebar_derecha”> y los mismo para el lado izquierdo <div class=”sidebar_izquierda”>. Aunque realmente no funcionó a la primera, debido a que tenía un error en los anchos de la página, de la cabecera y del sidebar. Pero una vez ajustado todo milimétricamente, el diseño comenzó a cuadrar como quería. Claro, hasta que dejóde gustarme como se veían alguna secciones del sidebar en un espacio de 130px de ancho. La idea entonces fue que la parte superior del sidebar tuviese un ancho de 300px y a continuación poner las dos columnas más angostas.

Ahí comenzó la batalla, porque por razones que habría que consultar a Gates, los resultados de Firefox distaban mucho de los conseguidos en Internet Explorer. Si en Explorer se veía bien en Firefox no, o a la inversa. Después de un par de horas (cerca de las 2:00 am) llegué a esto para el loop:

.narrowcolumn {
float: left;
padding: 0px;
margin: 0px;
width: 600px;
\width: 600px;
w\idth: 600px;
}

.widecolumn {
float: left;
padding: 0px;
margin: 0px;
width: 600px;
\width: 600px;
w\idth: 600px;
}

y para el sidebar:

#sidebar{
float: right;
width: 300px;
\width: 300px;
w\idth: 255px;
margin: 30px 30px 0 0;
padding: 0px;
}

En realidad es algo extraño y parece que no es una solución completamente ajustada a las reglas. Pero funciona. Lo que haces es ajustar un ancho de 255 para Explorer y uno de 300 para Safari y Firefox. Pero lo más extraño de todo es que para Explorer 255px valgan lo mismo que 300px de Firefiox (según me he enterado después, firefox cuenta los bordes y padding para asignar el ancho, Explorer no lo hace).

Pero para complicar más aún el asunto se me ocurrió que sería genial romper un poco el esquema y luego de las dos columnas angostas volver con una ancha donde poner un miniblog. Definitivamente fue lo más complicado, pues ni Firefox ni Explorer funcionaron como esperaba.

El problema es que si el sidebar izquierdo es más largo que el derecho, el float izquierdo se come cualquier elemento que uno ponga en la parte inferior. Es decir lo ajusta a su derecha, en el espacio que sobra bajo el float derecho.

La primera solución que intenté fue meter el float izquierdo y el derecho dentro de una especie de contenerdor entre divs, esto solucionó el problema en Explorer, pero en Firefox no produjo ningún cambio. La solución final fue esta

/* for Mozilla/Safari/Opera */
*>.contenedor {
margin: 0 0 1000px 0;
padding: 0px;
}

/* for IE, with IE5/Mac backslash filter \*/
* html .contenedor {
height: 880px;
}

Ya sé, no es la solución más correcta pero de momento es lo mejor que he encontrado y que funciona.

Actualización: Ismael, webmaster de estadobeta.com, me sugirió usar una clase llamada clearfix, que al parecer es bastante conocida en el medio del diseño web y ha funcionado genial:

/* Este es de positioniseverything.com
Y evita que colapsen los contenedores de floats */

.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Para usarla correctamente la etiqueta div debe ir como en este ejemplo:

<div class=”clearfix” id=”contenedor_o_cuchara”>

siendo en el id “contenedor_o_cuchara” se ajustan en realidad los colores, fuentes, anchos, etc. de la sección X

#contenedor_o_cuchara{
width: 300px;
margin: 0px;
padding: 0px;
}

WordPress es simplemente de lo más cool que he visto en CMS. Tiene prácticamente de todo, aunque he hechado en falta alguna extensión de Firefox tipo blogthis! para blogger. Pero estoy cierto que sólo es cosa de buscar con más paciencia.

De momento ya le he agarrado la mano al tema de las plantillas y al asunto de los plugins, sólo por falta de tiempo no he instalado todas las cosillas geeks que quisiera en el sidebar. Por lo demás, me falta comprender mejor cómo va eso de “WordPress bookmarklet” y “Post slug”. Si alguien se maneja en estos temas que me deje un comentario, POR FAVOR.

Y yo que me sentía orgulloso de mi CMS. Bueno, tampoco es para tirarlo tan para abajo, después de todo cumplía su función, no tenía mal aspecto y era altamente adaptable. Le faltaban cosas como los trackbacks y mejor soporte para las plantillas, aunque en este tema era a prueba de tontos (se manejaba con hojas de estilo y un panel de administración para la disposición de los bloques laterales según el peso de cada módulo, eso evitaba editar las plantillas manualmente).

De todas formas compararlo con WordPress es una locura, sobre todo porque mi antiguo CMS era como una isla perdida e incomunicada del resto de la blogósfera. Por eso, aunque con cierta pena, cambiarme a WordPress fue una excelente decisión. Realmente lo que me da pena es todo el tiempo y trabajo dedicado, sin embargo también sé que no fue en vano: aprendí y mucho.

Ahora sólo resta comenzar la fiesta.