Después de tantos meses sin publicar nada qué mejor que recordar, aunque sea un poco, el sabor de la libertad. Que puedes ser escuchado. Que tus ideas puedes ser oídas. En definitiva, participar de verdad en como te gustaría que fuera lo que usas.

Canonical nos ofrece un nuevo servicio a disposición de la comunidad de Ubuntu y derivados. La prueba definitiva del poder de decisión de la gente normal: de tú y de mi. Hablo de Ubuntu Brainstorm.

Ubuntu Brainstorm fue dado a conocer por Canonical a principios de Marzo. Una versión bastante simple si la comparamos con la actual. Este servicio de Canonical intenta acercar todavía más el Software Libre a la comunidad dándoles la posibilidad de exponer sus ideas y ser votadas, juzgadas y, si son viables, llevarlas a cabo.

El servicio, que está basado en Ideastorm de DELL, ha conseguido una mejora brutal en pocos meses. De vez en cuando se puede ver todavía alguna nueva idea en portada para mejorar la propia web. Gracias a esto, en sus inicios ayudó a evolucionar de forma exponencial el desarrollo de Brainstorm y convertirlo en lo que es hoy en día.

Brainstorm nos ofrece la posibilidad de registrarnos de forma gratuita y rápida. Nuestras ideas serán votadas y revisadas por personas normales y desarrolladores. Estos segundos pueden incluso poner anotaciones sobre la viabilidad y comentarios técnicos de la misma. Si la idea resulta lo suficiente interesante por la comunidad y desarrolladores se puede enlazar a una entrada de Blueprints del launchpad o incluso con la sección de bugs o UbuntuForums para que pueda ser adaptada a las diferentes plataformas de Canonical (Ubuntu, Kubuntu, las webs de Canonical, etc…). Al fin y al cabo… el Software Libre lo hacemos entre todos, ¿no?

Actualmente hay enlaces a las secciones más importantes: “Ideas más importantes de hoy (actual portada); de esta semana; de este mes; desde siempre; etc…”. Aconsejo revisar de vez en cuando las ideas en portada porque muchas de ellas llegan a ser muy buenas y, por supuesto, votarlas.

Aunque no todo es color de rosa. Hay gente que no acaba de comprender lo que es un brainstorm: Un portal que sirve para enviar ideas y que estas sean votadas. Han habido algunas absurdas que se proclamaban como “Linux debe parecerse a Windows” o “Linux tiene que adoptar el theme de XP”. Como veréis, no aportan demasiado (por decir algo). En fin. Recordad sin embargo, sin menospreciar ese intento por halludar, antes de enviar vuestra idea buscad por las antiguas y evitad de este modo que sea duplicada.

Registraros y enviad vuestras ideas!, sin vergüenza.

Enlace a Ubuntu Brainstorm

Este post me ha dado una idea para una próxima entrada. ¿Qué os parecería un pequeño resumen sobre lo que hemos conseguido “gracias” a Canonical (lo que nos ofrece, sus servicios, portales, labs, etc…)?

Para volver a la carga este verano, me gustaría comenzar presentando esta genial aplicación para todo amante de la música en directo.

Nvivo es un portal donde conocer artistas y salas, y donde estar al tanto de todos sus conciertos. Con el lema de “No vuelvas a perderte un concierto” ofrece servicios para que estés siempre informado de lo que te interesa.

Además podemos decir que pertenece al territorio 2.0, porque cuenta con una comunidad abierta, y permite a los usuarios tomar el control de toda la información (bajo supervisión de 13 editores)

Considero que este tipo de iniciativas son muy positivas para lo que los internautas concebimos como el futuro de la cultura musical, un futuro lleno de tags, donde encontramos a los artistas que nos gustan y estos conseguen la auténtica visibilidad que merecen, promocionándose y vendiendo su auténtico producto: la música en directo.

Os invito a todos y todas a que os registréis y os dejéis llevar por la magia que esconde Nvivo y su comunidad.

Enfrentarse a crear una plantilla de diseño desde cero puede ser muy duro y desmoralizante. Por eso he reunido una serie de trucos que conviene tener a mano, para agilizar el proceso, y hacerlo algo más agradable.

Las tres reglas de oro

Lo primero y principal antes de empezar a escribir la plantilla, es definir estas tres reglas de oro del CSS. Se colocan al principio del archivo CSS, y sirven para evitar las discrepancias principales entre navegadores. Así nos evitamos más de un susto al comprobar si se ve igual en todos los navegadores.

Lo que hacen es inicializar todos los márgenes internos y externos a cero (de TODOS los elementos), prefijar un tamaño de letra uniforme para todos los navegadores, y eliminar el borde de las imágenes.

Conocer más sobre las tres reglas de oro del CSS.

Suelo añadir esta cuarta regla, que evita que salga un recuadro alrrededor de los enlaces al pulsarlos.

(más info)

Centrar contenedores (elementos div) en CSS

Para centrar un contenedor en CSS, además de definir un ancho determinado, debemos asignar el valor auto al margen izquierdo y derecho del contenedor. Esto no da resultado en Internet Explorer, que requiere de la propiedad text-align: center. Si usamos las dos, nos aseguramos la victoria.
HTML:

CSS:

(más info)

Hacer columnas con CSS

Para crear varias columnas en un skin, debemos colocar elementos de bloque (div, ul, form…) que las representen, de forma contigua (uno al lado de otro) en nuestro HTML. A continuación, en el CSS usaremos la propiedad float, que “flota” un elemento a la izquierda o a la derecha, sacándolo del flujo de contenido.

Hay varias formas de aprovechar la propiedad float para crear columnas, algunos ejemplos:

Las flechas indican si se ha flotado a izquierda o a derecha, aúnque resulta bastante obvio.

Ejemplo, el código CSS para hacer que todos los elementos li de una lista, esté flotados a la izquierda, con un tamaño de 100×100 px:

Evitar solapamiento en la propiedad Float

Da definicion en el estándar de CSS, hace que la propiedad float saque al elemento del flujo, y provoca que el resto de elementos “lo ignoren” en muchos aspectos, como que el elemento que lo contiene no adapta su ancho para incluirlo.

Lo que quiero:

Lo que ocurre:

Esto lo podemos solventar muy fácilmente.

Si queremos que un elemento que va a continuación de un float, no se vea afectado, le podemos dar la propiedad clear: both

Pero si el problema es que tenemos elementos “flotados”, y queremos que el contenedor los envuelva, nada más fácil que aplicar al contenedor la propiedad overflow: hidden. La explicación la encontraréis aquí

Todas las propiedades a mano

Es muy importante tener siempre las propiedades a mano, y sobretodo conocer las 95 propiedades del CSS 2.1 para conocer las herramientas de que disponemos. Podéis encontrar un agradable listado, muy bien explicado (en inglés) en CulturedCode CSS 2.1 Reference (es un recurso alucinante, muy muy útil)

Usar estructuras prefabricadas

Podremos ahorrarnos tiempo, si partimos de estructuras prefabricadas en CSS y HTML.

• Layout Gala contiene muchas estructuras combinando tres elementos principales, cabecera y pié de página.
• Css Easy te ofrece las principales configuraciones para skins, listas para descargar y manipular.
• En Listmatic encontraréis muchos tipos de lista, para aplicar a menús, o a lo que queráis.
• En CSS Showcase podréis encontrar muchos ejemplos de barras de navegación.

Plantillas ya elaboradas

Otro recurso es acudir a skins completamente elaborados, y extraer lo que nos interese de ellos. Algunos enlaces:
OpenSourceWebDesigns, FreeCssTemplates, Free-css-templates, TheStyleArchive, TemplateWorld

O recurrir a sitios donde muestran plantillas únicamente para inspirarte:
Inspirational CSS, CSSBeauty, Elegant Desighns

Por último, en del.icio.us (tag: css) podéis encontrar muchos recursos interesantes de CSS, y en Webéame (categoria diseño) otros tantos.

Hace ya más de cuatro meses que lancé uno de mis últimos proyectos: recolectar la información de los internautas, para mostrarla públicamente.

He de reconocer que no me esperaba la acogida tan grande que tuvo. Ahora mantiene una recogida de datos constante, desde unas 50 webs muy distintas en temáticas, más de 3.000 registros diarios.

GStat fue una de tantas ideas que se me habian ocurrido, y me llevó cerca de una semana su desarrollo. Por supuesto tengo que revisarlo diariamente para corregir cosas, y comprobar que todo marcha bien.

Sin embargo, creo que tiene mucho más potencial, y he reunido fuerzas de nuevo para avanzar significativamente en el desarrollo de GStat. Tanto es así, que este proyecto va a pasar a llamarse genStats.

Este nuevo proyecto contará con muchas gráficas nuevas, interactivas y personalizables. Además, la interfaz va a ser mucho más cómoda, atractiva y manejable.

Surgen problemas cuando la base de datos roza el millón de datos, y quiero trabajar en complicadas estadísticas. Por eso, la optimización es uno de los puntos fuertes en los que estoy trabajando. He pedido consejo a algunos expertos, y estoy empollando enormes manuales de SQL. Ya he conseguido que gráficas que tardaban más de 10 segundos en ser representadas, tarden 0.2 segundos.

A medida que vaya haciendo importantes avances en la materia, iré comentándolos en este blog. Por ahora podéis apreciar el aspecto que van tomando las gráficas:

Registros totales diarios
Las 4 webs que más han aportado (excluyendo microsiervos.com, porque tiene unos números excesivamente grandes…)
[Añadido] Porcentaje de participación sobre el total de las 4 webs con más aporte (incluyendo microsiervos.com)

Puede observarse que originalmente se recolectaron TODOS los usuarios, y posteriormente se limitó la aportación de cada web.

¿Nunca te has preguntado que grandes empresas actuales, casi previas a la invención de internet, fueron capaces de tener una mentalidad hacia el futuro pensando en internet?

Apple, IBM, INTEL, Sun, HP entre otras sí lo tuvieron y por eso muchos de sus dominios se incluyen entre los 100 primeros dominios registrados (.com) del mundo.

La entidad gestora de los dominios, DNS, fue creada en 1984 y en 1985 ya ofrecía diferentes dominios para ser alquilados. Se destaca entre todo los COM, aunque los ORG, EDU, GOV, MIL y ccTLD fueron los primeros.

Como comentan en todos lados, Microsoft NO está incluida en estos primeros dominios… con lo que se demuestra que Microsoft, ni si quiera en sus comienzos, tenía visión de futuro. Como dicen en un comentario de The Amariller…

“Pero cómo?, a mi me dijeron q Bill Gates inventó la interné y también la computadora y la informática fácil”
Aunque suene ridículo es lo que la mayoría de la gente piensa. El mito de que Billy hizo grandes avances a la informática es uno de los más extendidos y falsos que existen. Mucho más importante fue el papel de Xerox y Apple, pero alguien se acuerda de ellos? Pocos…

Poco más puedo añadir más que decir que “tiene razón”. Microsoft NUNCA ha hecho nada por avanzar en la informática, aunque haya parecido que sí. Os parecerá que la ha acercado… pero no ha hecho otra cosa más que atrasarla, sobretodo a nivel económico.

Por cierto, hablando de empresas conocidas que aparezcan… además de las que ya he comentado más arriba podríamos nombrar a XEROX, ATT, ¿¿STARGATE??, BOEING, ADOBE, 3COM, y… un montón, podéis ver la lista de los 100 primeros dominios COM registrados del mundo vosotros mismo

Trabajar en JavaScript ha tenido siempre una gran dificultad, y es que se trata de un lenguaje no estándar, interpretado por el cliente. Esto provoca desigualdades en los resultados, dependiendo sobretodo de los distintos navegadores, y sus respectivas versiones.

En el caso de los eventos de teclado este desmadre tiene un especial énfasis, y viene a demostrarse en este documento (en inglés) que paso a resumiros.

Eventos keyup keydown y keypress

Estos eventos son disparados en momentos distintos, dependiendo del navegador. Por ejemplo el mantener pulsada la tecla “Alt”, o el pulsar un caracter durante varios segundos, producen resultados distintos en cuanto al disparo de eventos, en cada navegador.

Interpretación de la tecla pulsada

Llegados al punto de que el usuario ha pulsado una tecla, querremos saber cuál de ellas ha pulsado. Pues el resultado también difiere entre navegadores (como era de esperar).

Para complicarnos la vida a los programadores, la codificación es distinta entre los principales navegadores. Aúnque en los caracteres normales (numeros y letras) hay una cierta uniformidad, la diferenciación del lugar donde se pulsan los números (hay dos series de números en un teclado normal), y la mayoría de los signos, adquieren claves distintas que los identifican.

Echa un vistazo a la tabla de códigos más abajo.

Tablas clarificadoras

Recomiendo leer la fuente original (inglés).

Estás pensando en hacer una web en flash? Piénsatelo dos veces!

Via Barrapunto encuentro este interesante apunte con cinco razones para no usar Flash. Son:

• Pérdida de visitas (estrepitosa), por problemas en la indexación
• Problemas con buscadores, por no haber un código accesible y marcado.
• Problemas de visualización, por incompatibilidad de un software específico
• Problemas de navegación, causados por un lenguaje no accesible para el navegador
• Problemas de gestión y actualización, porque suele ser complicado unir un lenguaje de lado servidor con Flash

Recomiendo echar un buen vistazo, sobretodo a quienes aún no estén convencidos de las enormes desventajas de flash para crear toda una web.

Recibimos desde El vol de l’home ocell un meme, consistente en otorgar siete premios a los que, a nuestro juicio, sean blogs solidarios. Conque manos a la obra.

El primero de todos va derecho a El Cinturón de Hipólita. Este blog de mi ex-instituto nació como un capricho del profesor de Latín, y ha conseguido convertirse en toda una referencia en la blogosfera de la Cultura Clásica, gracias a la enorme dedicación de Salva, el magister, y en parte gracias a las colaboraciones de personalidades como Mercedes Madrid, reconocida experta en el tema.

El segundo, y metiéndonos en temática de programación web (mi rollo), no podría olvidar Anieto2k. Web de referencia donde las haya, actualización contínua, y contenidos frescos e interesantes. Le estoy enormemente agradecido por haber promocionado algunos de mis proyectos en su web.

El tercero va para Alzado, cuya web, aúnque no actualiza de forma muy constante, tiene contenido de muy buena calidad. La temática suele moverse por el márqueting típicamente orientado a la red, pero divaga en muchos otros aspectos.

El cuarto lo envío a mi gran colega de Viciao2k3. Un apasionado de la programación web, con muchas tablas, ha creado una gran variedad de servicios de lo más 2.0. En su blog trata cualquier cosa que le inquiete, mucho código y mucho sentido del humor.

El quinto premio va derechito a La Webera. Su autora muestra a través de sus posts trucos y técnicas para llevar una buena web.

El sexto lo otorgo a HacheMuda, una web que trata todo lo circundante a Linux, junto a alguna curiosidad que otra. Creativo y defensor a ultranza de Ubuntu.

El último de los 7 lo voy a dar a Metal.Ize, web de diseño y maquetación fundamentalmente. Una importante referencia para el buen estilo.

Seguro que me he dejado muchas webs que ofrezcan material de calidad de forma altruista, estas son las 7 que subjetivamente destacaría.

Sólo queda agradecer a Joan que nos haya otorgado el premio. En el mes y medio que llevamos online lo hemos dado todo, y pensamos seguir así mucho tiempo.

Via del.icio.us descubro esta imágen que transmite de una forma muy acertada todo lo que un buen documento HTML debe contener.

Me gustaría transcribir y traducir este interesante recurso a continuación para todos vosotros:

Doctype declarado correctamente

Parece un galimatías, pero los DOCTYPE son importantes. No sólo hace que tu código sea válido, sinó que dicen a tu navegador detalles de cómo debe renderizar tu página.

Encabezado ordenado

Que conste de título, conjunto de caracteres, enlace a hojas de estilo (incluida la de impresión!) y scripts (enlazados, que NO incluidos).
Los archivos externos (CSS o JavaScript) en carpetas propias (css/ y script/ por ejemplo).

ID para Body

El ponerle una id a la etiqueta body te permite crear propiedades CSS específicas para una página en concreto. Por ejemplo diferenciar los h2 del homepage, con un código similar a #home h2 {}, y así no afectar a ningún otro h2.

Div principal para todo el contenido de la página

El poner un div que contenga todo el contenido nos permite mantener el control del diseño sobre la página en su conjunto. Por ejemplo podemos determinar un ancho fijo de toda la página.

Menú limpio semánticamente

Un menú debe tener este aspecto:

Incluir el contenido repetido

Mucho contenido es común entre página y página. Menús, barras laterales, piés de página, etc. Este tipo de contenido debería ser incluido dinámicamente. Esto puede conseguirse con una simple instrucción de PHP.

Contenido importante primero

Es apropiado que incluyas tus contenidos más importantes al principio, como noticias, eventos, que pueden ser listadas al principio del HTML. Si tu barra lateral es sólo para navegación o cosas menos relevantes incluso, deberías ponerla al final del HTML.

Código tabulado

Si cada sección de código se presenta tabulada como un conjunto, la estructura del código queda mucho más comprensible. Cuando un código está completamente alineado a la izquierda es prácticamente imposible de comprender.

Sin estilo!

Tu HTML debe estar completamente orientado a la estructura y al contenido, no al estilo! Deja que el CSS se encargue de todo lo relacionado con el estilo, y por supuesto olvida la etiqueta font

Contenido, contenido, contenido

Aquí has de insertar todo tu contenido, así que manos a la obra. No olvides separar los distintos párrafos con la etiqueta p. Utiliza listas dónde sea apropiado. Utiliza códigos para los símbolos (& copy; & iacute; etc). No abuses de los hr para el salto de línea.

Etiquetas de cierre

Empezaste con fuerza, ahora acaba con fuerza. No seas perezos@ y cierra todas las etiquetas que lo requieran, incluso si la página se renderiza bien sin ellas!

Para aquellos que cuenten con CURL en su servidor, sabrán que esta biblioteca ofrece increíbles ventajas. Sin embargo en ocasiones no contamos con esta herramienta en el servidor, o necesitamos trabajar a un nivel más bajo; es decir, sin que CURL nos lo de todo masticadito.

Este nivel es el de interactuación entre máquinas a través de un protocolo (usualmente HTTP).

Voy a centrarme en el uso de la función fsockopen() y en las cabeceras HTTP. Aúnque estas conexiones abarcan más materia, estos puntos resultan más útiles y sencillos de entender.

Para iniciar una conexión con otro dominio de internet, crearemos un puntero mediante fsockopen. Este puntero referencia a la conexión que hemos establecido con el archivo de ese otro dominio, y podremos usar las funciones típicas de un puntero de archivo (fgets() y fputs() principalmente)

La función requiere de un parámetro obligatorio (el archivo remoto) y otros opcionales, que son:

• Puerto: Cualquier máquina consta de diversos puertos. El 80 (ó 8080 en ocasiones) es el de HTTP (transferencia de documentos web), el que más nos interesa.
• Error numérico: Número entero que identifica un error ocurrido. 0 si ha habido éxito
• Error descriptivo: Define en lenguaje natural el error.
• Tiempo de espera: Puedes indicarle el tiempo para que la conexión expire. Para tener mayor control de este tiempo, puedes usar también stream_set_timeout()

Un ejemplo de conexión usando esta técnica puede ser este:

Como podemos observar, nos permite enviar las cabeceras HTTP que creamos oportunas, aúnque para hacer una conexión simple basta con las tres instrucciones indicadas en el ejemplo.

Para chequear el contenido de cualquier URL, sin pararse a personalizar cabeceras se puede emplear este simple script:

Ver en ejecución | Descargar:

El funcionamiento básico de los sockets es algo más complejo que CURL, pero si nuestro servidor no admite esta librería, este script nos vendrá de perlas en más de una ocasión.