Webmaster Libre

Desarrollo Web con Software Libre

CSS Orientado a Objetos

Si hay algo que reprocharle a las hojas de estilo en cascada (CSS) es que cada uno las escribimos de la forma que mejor nos conviene y no siempre las optimizamos, tanto en peso como en reutilización de elementos.

Nicolle Sullivan hace una aproximación a las CSS orientadas a objetos (OOCSS), de manera que se generen una serie de modulos reutilizables y seamos capaces de crear hojas de estilo ligeras y manejables incluso para sitios grandes.

Además de presentarnos la idea mediante la metáfora de crear piezas de lego con las que ir construyendo nuestros sitios, de manera que mantengamos la consistencia en el diseño, el respeto por los estándares, la semántica (separando los contenedores del contenido y el código del diseño) y el peso de los archivos de estilos bajo control, nos deja su código fuente liberado con licencia libre en GitHub.

El concepto me parece muy interesante, sobre todo desde el punto de vista de la facilidad de legar el código a otros desarrolladores y permitir crear nuevas páginas de un sitio con rapidez, sin duplicar elementos y manteniendo la consistencia a lo largo de todo el sitio, independientemente de quien haya tocado.

¿Qué os parece a vosotros?

Vía Ajaxian

CSS

2 Comentarios

SEO con sentido común

A pesar de que el SEO es una disciplina que requiere conocimientos hay una serie de aspectos, de puro sentido común, que están al alcance de todos los que publicamos para web y queremos aparecer bien posicionados en los buscadores.

Chris Coyier recopila una lista de cosas que cualquiera de nosotros podemos comprobar y que ayudarán a que nuestros sitios aparezcan más arriba en los buscadores.

  1. ¿Tiene mi página una buena cantidad de información útil?
  2. ¿Está bien estructurada esta información en el código fuente?
  3. La página no usa trucos baratos
  4. ¿La URL de la página es clara y relevante?
  5. Si estuvieras investigando sobre ese tema ¿te resultaría útil la página? ¿La enlazarías?
  6. ¿Es una fuente fiable de información?

Como véis es un listado de cosas que están al alcance de todos, puede que no consigan que seamos número 1 en dos días pero seguro que nos ayuda a mejorar, no sólo nuestros rankings si no también la experiencia de los usuarios que nos visiten.

Si quieres leer la explicación de cada uno de los puntos puedes hacerlo en: Common Sense SEO Checklist

SEO y SEM

3 Comentarios

Chevereto, crea tu propio hosting de imágenes

chevereto

Si estabas buscando la forma de ofrecer un servicio de alojamiento de imágenes sencillo pero potente y completo Chevereto es justo lo que buscabas.

Chevereto es un script php liberado con licencia libre que podrás instalar en tu servidor y que te ofrece todas las características que podrías desear en un servicio así: subir imágenes desde tu disco duro o desde una dirección web, redimensionarlas y crear enlaces cortos a tus fotos gracias a su integración con TinyURL.

Chevereto es fácil de instalar y configurar, personalizable 100% y, de serie, viene con una interfaz de usuario más que agradable. Todo de la mano de Rodolfo Berrios.

Chevereto: http://chevereto.com/
Demo: http://demo.chevereto.com/

Vía Xyberneticos

PHP, Scripts

3 Comentarios

AJAX Fancy Captcha, un sistema antispam visual

Nos gusten más o menos, de momento parece que no podemos librarnos de los Captcha. En lo personal me desagradan terriblemente, sobre todo cuando son extremadamente complicados o no especifican si son sensibles a las diferencias entre mayúsculas y minúsculas y tengo que rellenarlos varias veces para saberlo…

AJAX Fancy Captcha

AJAX Fancy Captcha es un script creado con PHP y jQuery que pretende hacer más visual la tarea de determinar si alguien es o no humano.

Para ello nos presenta una serie de iconos y nos pide que arrastremos a la zona especificada uno en concreto de ellos.

Sin dudas es una alternativa muy vistosa y seguramente agradable para los usuarios que navegan con las CSS, los Javascript y el ratón activados. Supongo que accesible no debe ser demasiado (se basa en imágenes, precisa el uso del ratón etc.) y en la web del autor no se habla de como degradará si no hay javascript, CSS, ratón o si se usa un lector de pantalla. Una pena, ya que una solución así pero accesible sería una buena forma de librarnos de esos galimatías de letras y números que suelen amenizarnos los formularios.

AJAX Fancy Captcha: http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin

AJAX

4 Comentarios

Maquetación con tablas CSS, ¿si o no?

Una de las novedades más esperadas de CSS 3 es la posibilidad de definir que cualquier elemento de una página se comporte como parte de una tabla. Con esto podremos hacer que un div pueda tener algunas caracteristicas muy deseadas que ya poseían las celdas de una tabla (sobre todo el centrado vertical, por lo menos en mi caso).

Con esta nueva característica han surgido voces que han empezado a hablar de una nueva forma de componer estructuras de página, sin flotes, sin tantos jaleos, otorgándole a nuestros divs esas cualidades de tabla pero sin llegar a volver a maquetar con tablas.

Es un lío, desde mi punto de vista suena raro ya desde el mismo principio. Salimos en desbandada de las estructuras montadas sobre tablas para volver a algo igual pero puede que incluso más complicado.

Puede que gracias a una inteligente estrategia de marketing, el libro editado por Sitepoint “Everything you know about CSS is wrong” (del que podéis leer un capítulo en Digital Web Magazine, en inglés) se ha extendido como la pólvora la idea de que el futuro está en esta maquetación con pseudo-tablas.

Hasta ahora no había leído más que piropos a esta aproximación y me había reservado mi opinión (no me gusta la idea) para cuando pudiera trabajar más con la idea, siempre pensando que al no haberla probado demasiado no podía juzgar. Pero hoy me entero vía CSS Tricks de que gente tan importante como Eric Meyer pone en entredicho esta idea por poco semántica y por volver a dejarnos atados al orden dentro del código fuente para mostrar los elementos. Por no hablar de la falta de compatibilidad hacia atrás (y si, sé que todo el mundo debería llevar el navegador en la última versión pero también sé que es utópico creer que sucederá).

Como ya digo, para mí la idea es una locura. Prefiero seguir peleandome con los elementos flotados que empezar a falsear elementos y tener que editar el HTML cada vez que quiera cambiar algo de sitio (¿no era esa una de las ventajas de dar estilo con CSS?), pero ¿y vosotros? Maquetación con tablas CSS ¿si o no?

CSS

15 Comentarios

jBreadCrumb: “migas de pan” inteligentes

jBreadCrumb

En sitios donde la navegación profundiza bastante en páginas internas es siempre interesante facilitar al usuario la vida indicándole en todo momento donde se encuentra dentro de la jerarquía del sitio.

El método más empleado y práctico es el de las “migas de pan” o breadcrumbs (en inglés), con las que vamos indicando al usuario el camino y donde se encuentra con respecto a la home del sitio.

A veces, sobre todo si nuestras páginas tienen títulos largos, nos encontramos con el problema de encajar estas migas de pan en la estructura de la web. Para solucionarlo muchas veces recurrimos a limitar el número de pasos que mostramos pero esto no siempre es lo más cómodo para el usuario.

jBreadCrumb es un plugin para jQuery con el que podremos crear “migas de pan” que se colapsarán cuando sean muy largas o contengan muchos elementos, de esta manera el usuario seguirá disponiendo de la información pero sin molestarle demasiado visualmente.

Poner en marcha el plugin es tan simple como insertar el siguiente código:

jQuery(document).ready(function()
{
	jQuery("#breadCrumb").jBreadCrumb();
})

Podremos configurar varios efectos para cuando el usuario pase el ratón por encima de los elementos colapsados.

Para que funcione necesitaremos incluir en nuestras páginas la librería jQuery y el plugin easing.

jBreadCrumb: http://www.comparenetworks.com/developers/jqueryplugins/jbreadcrumb.html

Javascript

2 Comentarios

Todo mi apoyo a Christian Van Der Henst

Supongo que a estas horas a casi nadie se le escapa la pesadilla que está viviendo cvander, fundador de Maestros del Web y Foros del Web (no enlazo, por si a alguien se le va el dedo y le hace un click a la publicidad de los cabrones que le han robado).

Por si acaso, os hago un resumen aunque otros lo han hecho ya y seguro que están mejor enterados que yo que estoy medio en mi mundo: a Christian le han robado los dominios (forosdelweb.com y maestrosdelweb.com), la cuenta de gmail y la de facebook (hasta donde yo sé), parece que su flickr y su twitter siguen bajo su control…

Parece que los robos pudieran provenir de uno de los viajes de Christian en el que, por una avería en su ordenador, se vio forzado a acceder a internet desde algunos cibercafés… Algo que, si lo pensamos friamente, nos podría pasar a cualquiera (dios no lo quiera).

Menos mal que la web 2.0 de marras puede servir para cosas útiles y la cantidad de apoyo que cvander ha recibido vía twitter parece que está consiguiendo que los de GoDaddy empiecen a darle más bola (hasta ahora le andaban con rodeos y tonterías, por no variar).

Christian pretende restaurar tanto la web como los foros en otros dominios temporales, actualizaré este post en cuanto sepa las direcciones.

Lo dicho, fuerza y apoyo para Christian que no debe estar pasándolo muy bien.

General

7 Comentarios

Móviles y cooperación al desarrollo

Cómo ya sabéis, la semana pasada me la pase casi entera asistiendo al II Encuentro Internacional TIC para la Cooperación al Desarrollo. Seguro que, si os resultaba interesante el tema os habéis pasado por el blog que he ido escribiendo para el periódico El Comercio pero, como se que muchos no tenéis tanto tiempo para ir de blog en blog, me permito traeros una pequeña reflexión sobre la que, para mí, fue la ponencia más interesante (al menos desde el punto de vista de una persona dedicada a desarrollar para web).

De la mano de Stephane Boyera, director del equipo de independencia de dispositivo del W3C, nos adentramos en las posibilidades de los teléfonos móviles para ayudar a difundir conocimiento en los países empobrecidos.

Para empezar, os dejo la presentación que ha sido subida gentilmente por parte de la organización a Slideshare:

Antes de esta conferencia no podía imaginarme el papel de la telefonía móvil en estos países en vías de desarrollo. Desde la perspectiva egoista de alguien del hemisferio norte me planteaba el desarrollo para móviles como algo que añadir a la lista de “algún día quizá” gracias al afán recaudatorio de las operadoras móviles y, ¿por qué no reconocerlo?, porque tenemos ordenadores por todas partes.

Ahora ya sé que, antes que ordenadores, habrá móviles poblando la faz de la tierra y, por eso, es importante que nos esforcemos en conseguir crear un blog y servicios que funcionen en estos teléfonos.

¿Tenéis alguna experiencia desarrollando para móviles? ¿Soléis acceder a internet mediante vuestros teléfonos? Yo no demasiado por eso os pregunto ¿es satisfactoria la experiencia?.

Si queréis profundizar un poco en esta conferencia podéis echarle un vistazo a mis conclusiones, tomadas en vivo desde la sala de conferencias en: Teléfonos móviles para el desarrollo humano

Web Móvil

3 Comentarios

Estaré en el II Encuentro Internacional TIC para la cooperación al desarrollo

Desde hoy y hasta el jueves estaré asistiendo a las conferencias y talleres del II Encuentro Internacional TIC para la cooperación al desarrollo que se llevan a cabo en la Universidad Laboral de Gijón.

Estare blogueando en vivo desde las conferencias y podréis seguirme en http://proyectos.elcomerciodigital.com/blogs/cooperacionydesarrollo/

General

Comenta

HTML-Ipsum, texto de relleno más a mano que nunca

HTML-Ipsum

A la hora de copiar y pegar texto de relleno para nuestros trabajos contamos con un montón de alternativas, tanto en el web como en muchos programas y widgets.

No obstante, HTML-Ipsum ha conseguido en poco tiempo superar a todas y convertirse en un sitio de referencia. En primer lugar porque no nos ofrece simplemente el texto sin formatear. Podemos copiar listas ordenadas, desordenadas, parrafos largos, cortos, estructuras de tabla etc.

Pero, por si fuera poco Chris Coyier nos sorprende, con la ayuda de algunos de sus lectores, y nos ofrece una nueva gama de aplicaciones y archivos para incorporar HTML-Ipsum a nuestro flujo de trabajo:

  • Una aplicacion para OS X para nuestra barra de menú.
  • Una aplicación para Windows que descansará en la bandeja de sistema.
  • Enlaces para OS X para agregar los snippets directamente a Coda y Textmate
  • Un fichero para importarlos en Gedit en Linux

Sin lugar a dudas un recurso importante para ahorrarnos tiempo a la hora de introducir texto de muestra.

Tenéis más información sobre estas nuevas características en CSS Tricks.

HTML-Ipsum: http://html-ipsum.com/

(x)HTML, Herramientas Online

4 Comentarios

Información:

Webmaster Libre