Me están pirateando el manual de XHTML
Permalink | Archivado en: Alma Geek, CSS, Cafeína, Cultura libre, Diseño y Desarrollo Web, Tutoriales, XHTML, Yo, Yo me quejo
Tiene narices que para una vez que actualizo el blog, tenga que ser por una cosa como esta. Ayer andaba buscando yo referencias a ver quién enlazaba a mi manual, y me encontré con esto:
Sí, así de surrealista: un tío coge mi manual de XHTML y CSS y se pone a venderlo en Lulu (un servicio de impresión bajo demanda).
Y lo peor es que lleva haciéndolo desde el 2007 y yo no me he dado cuenta hasta ahora…
Y no os perdáis, que además de venderlo en papel, también cobra por descargar el PDF.
Me he puesto en contacto con Lulu a ver qué me dicen. Tampoco creo que el pirata se haya hecho de oro, ni mucho menos, pero me cabrea mucho que alguien se aproveche así de mi esfuerzo desinteresado (recordemos que mi manual está bajo una licencia Creative Commons que permite la distribución, pero prohíbe el uso comercial).
En fin, según vaya teniendo noticias de esto iré actualizando este post.
[Actualización: 16 de mayo] Ya está solucionado el tema. En Lulu han retirado el libro y me han dado un recuento de copias vendidas. El número es lo bastante pequeño como para considerar meterme en más berenjenales. ¡Gracias a todos por el apoyo!
Stencil Kit de Yahoo!
Permalink | Archivado en: Alma Geek, Diseño y Desarrollo Web, Programación
Si hay algo que me gusta, son los diagramas bonitos. Estos días estoy diseñando la interfaz de una aplicación para unas prácticas de una asignatura y he tenido la suerte de toparme con el kit de plantillas de diseño de Yahoo!.
El kit contiene plantillas de los elementos más comunes usados en interfaces gráficas: campos de formularios, tablas, botones, menús, rejillas, calendarios, etc. También incluye plantillas para diseñar interfaces para el iPhone y otros teléfonos móviles. La calidad gráfica es muy buena, y al ser los controles más o menos genéricos, sirven tanto para desarrollar aplicaciones web como de escritorio.
Aquí está una de las pantallas que he diseñado:
El kit lo podéis descargar aquí, e incluye versiones para los siguientes formatos: OmniGraffle, Visio, PDF, PNG y SVG.
¡Me ha encantado! 
Nuevo curso… y quizás último
Permalink | Archivado en: Alma Geek, CSS, Diseño y Desarrollo Web, Programación, Ruby on Rails, XHTML, Yo
Pues sí, tras muchos años de cursos factoriales, este es mi primer curso en el que tengo la oportunidad de acabar la carrera.
El curso pasado fue durísimo, pero he logrado aprobarlas todas, incluyendo “cocos” como AIC, PL, IS2, etc. Así que este año sólo me quedan el proyecto de fin de carrera, SOR y optativas.
El PFC aún no lo he empezado, pero he hablado con dos profesores del DCCIA para que me tutoricen mi propuesta de proyecto: una aventura gráfica 2D (con su parser). Según cómo esté de ganas de dibujar a lo largo del curso me centraré más en la aventura o el parser. Mucho curro, pero prefiero currarme el proyecto con algo que me guste y me motive, antes que dedicarle muchas horas a algo fácil pero aburrido.
Por cierto, aún no sé que librería/s gráficas/multimedia usar. Implementarlo yo todo desde cero, con OpenGL y SDL es una opción, pero es que eso sería casi un proyecto por sí mismo, y ya tengo mucho trabajo por hacer. Gosu me encanta, tiene versión para C++ (que es el lenguaje que voy a utilizar), pero todavía está en fase beta y tiene fallitos. He pensado en Irrlitch, que tiene funcionalidades para el dibujo 2D, pero he visto el código de ejemplo del tutorial que hay para sprites y es bastante… engorroso. ¿Alguien me aconseja alguna librería? Gracias 
En cuanto a SOR, me han dicho que la teoría no es muy difícil, que lo más duro de esta asignatura es la práctica. La práctica consiste en la implementación de un sistema distribuido, que se irá programando a lo largo de todo el curso (los grupos de práctica son de cuatro personas). Acabamos de empezar, y yo la semana pasada le dediqué a esta asignatura 16 horas de mi tiempo, y en esta ya llevo gastadas 10, así que las voy a pasar canutas.
Optativas tengo un puñado, ya que contando créditos de optativas y de libre elección me harían falta siete asignaturas y me he matriculado de diez, por si las moscas. Las de este cuatrimestre no tiene ninguna examen de teoría, pero he de asistir a todas las clases, lo cual es un poco mosqueante…
En resumen, que casi no tengo libre y cuando empiece el proyecto aún voy a tener menos, pero la posibilidad de acabar este año motiva un montón. ¡Y el no tener que repetir AIC motiva aún más!
En otro orden de cosas, hace poco fue el 3r concurso de mash-up’s y movilidad, y hemos logrado el tercer premio. Esta vez, además de ir con Ernesto, hemos formado equipo con su compañero de trabajo David García, que se lo curró muchísimo. Podéis echarle un vistazo al proyecto presentado: básicamente consiste en un mash-up capaz de recibir vídeos por videollamada, los cuales sube a YouTube y geolocaliza en un mapa de Google.
Nanoc: CMS de páginas estáticas
Permalink | Archivado en: Alma Geek, Diseño y Desarrollo Web, Linux y software libre
Estos días he descubierto nanoc, un CMS que genera sitios estáticos, esto es, directamente archivos HTML en lugar de montar la página dinámicamente con cada acceso de un visitante (como hace Wordpress, por ejemplo).
¿Cuál es la ventaja de un CMS estático? La mayor de todas es que ahorramos tiempo de procesamiento en el servidor. Como desventaja, cada vez que queramos reflejar un cambio, tendremos que regenerar las páginas estáticas. Para sitios pequeños y/o que no cambien mucho, usar un CMS estático puede ser recomendable.
La gracia de nanoc es que es tremendamente sencillo, está hecho en Ruby, y es muy extensible mediante plugins. Con nanoc definimos por un lado las plantillas del sitio (con el mismo sistema de plantillas que usa Ruby on Rails) y el contenido del sitio por otro lado. No sólo eso, sino que además cada página puede tener metadatos, que van en un ficherito aparte. Para escribir el contenido, no necesitamos usar HTML a pelo, sino que podemos usar un sistema de marcado como Markdown o Textile.
Nanoc es software libre (licencia MIT) y se puede instalar directamente con las Rubygems. Podéis echarle un vistazo a este tutorial en castellano para tener una idea de cómo funciona. Ya veréis que es muy simple
Chibi Icons bajo CC-BY
Permalink | Archivado en: Diseño y Desarrollo Web
¿Os acordáis de mi antiguo set de iconos? He pensado que realmente serían más útiles con una licencia más permisiva, así que aquí los tenéis bajo la licencia Creative Commons Reconocimiento 3.0, para que hagáis con ellos lo que os dé la gana.
El set Chibi Icons contiene 17 iconos en formato PNG y con un tamaño de 10×10 píxeles o inferior. Perfectos para interfaces web o barras de herramientas pequeñas.
Ideas para conseguir más visitas en tu web
Permalink | Archivado en: Diseño y Desarrollo Web
Este es un post algo extraño. Hoy he soñado que hablaba con una amiga que tenía un portfolio online de videojuegos flash y me pedía consejos para poder atraer visitas a su web. Esto es más o menos lo que le dije:
Cómprate un dominio
Un dominio quizás no te consiga más visitas, pero evitará que las pierdas si decides desmontar el chiringuito y mudarte a otro hosting. Sé que no descubro América con esto, pero es que es realmente importante. Un dominio cuesta más o menos lo mismo que un menú en McDonald’s: seguramente puedes permitírtelo.
Monta un blog o sindica el contenido
La gente quiere contenidos nuevos. Un blog normalmente tiende a actualizarse más que las webs “tradicionales”, así que si metes el blog dentro de tu web principal (o en un subdominio), podrás canalizar más visitas a lo que realmente te interesa.
Si no tienes tiempo o ganas para un blog, una buena alternativa es sindicar tu contenido con un feed. Por ejemplo, si tienes un portfolio con tus ilustraciones, puedes sindicar las imágenes. De este modo, las personas que quieran estar al tanto de las novedades, podrán suscribirse al feed y sabrán casi al instante que has subido una imagen nueva. La tira cómica de xkcd, por ejemplo, está hospedada en LiveJournal y ofrece gracias a esta plataforma un feed RSS. Lo mismo ocurre con DeviantArt. Tanto LJ como DA ofrecen cuentas gratuitas y de pago (a un precio razonable), así que según el contenido de tu web pueden ser alternativas considerables a comprarte tu propio hosting.
Pon una sección de afiliados
Los afiliados son unos links que están en un lugar “bueno” (entendido como “visible”) de la web. Son tus “links con cariño”, por decirlo de alguna manera. La idea es contactar con otros webmasters que tengan webs similares a la tuya y ofrecerles un intercambio de banners/links.
Cuanto más popular sea tu web, más afiliados “populares” tendrás, lo cual lleva a más visitas. Es un poco la pescadilla que se muerde la cola, pero hay webmasters con muchas visitas que, si realmente les gusta tu web, te incluirán en su sección de links o afiliados sin importar las visitas que recibas. Merece la pena intentarlo.
Organiza un concurso
Los concursos molan porque son divertidos y la gente suele hablar de ellos. ¿Cómo conseguir mucho ruido y muchos participantes? Haz que el concurso realmente sea interesante y ofrece un premio. El premio no tiene por qué ser en metálico. Si andas escaso de dinero, siempre puedes ofrecer premios acordes a tu web:
- Un dibujo dedicado
- Un avatar especial para un foro
- La inclusión en tu sección de afiliados (si tienes una web realmente con muchas visitas)
- Un logo para un blog
- Una review de su página web
- Una cuenta de pago en flickr
Por ejemplo, en esta comunidad de Los Sims 2, dan de premio en los concursos que hacen ¡un objeto especial que puedes utilizar en el propio juego! Es algo realmente original.
Eso es todo por ahora. No os olvidéis de compartir otros secretos oscuros en los comentarios 
Checklist para analizar blogs (o cómo poner a parir un diseño con buenos argumentos)
Permalink | Archivado en: Blogosfera, Blogs, Cafeína, Diseño y Desarrollo Web, Tutoriales
El otro día, diseñando un theme para un nuevo blog (sorpresa), me hice una lista con las cosas que debía tener en cuenta (que no impidió que acabara haciendo lo que me dio la gana) sobre el diseño y la arquitectura de información del blog. La comparto con vosotros por si estáis pensando en un resideño, y de paso analizo el theme actual de demasiada Cafeína.
RoR con Cafeína III: Vistas y layouts
Permalink | Archivado en: Diseño y Desarrollo Web, Ruby on Rails, Tutoriales
Ahora que ya tenemos nuestro modelo funcionando, vamos a personalizar las vistas, esto es, el código XHTML+CSS generado por Rails.
Rails utiliza un sistema de plantillas, los archivos RHTML. Básicamente es código XHTML normal, con fragmentos de código de Ruby incrustados, entre <% y %>. Hay fragmentos que añaden un signo = al tag de apertura. Esto significa que el código Ruby devuelve una string, y se imprimirá directamente.
Ahora disponemos de cuatro vistas situadas en el directorio app/views/strips: edit.rhtml, index.rhtml, new.rhtml, show.rhtml; que se corresponden a las acciones edit, index, new y show respectivamente (estas acciones están definidas en el controlador).
Paso 4: Personalizar el layout común
Además, tenemos un layout común que comparten estas vistas: strips.rhtml, situado en app/views/layouts. Lo primero que haremos será enlazar este layout con nuestra propia hoja de estilos, cambiando el enlace que hay por defecto a scaffold.css:
RoR con Cafeína II: REST scaffolding
Permalink | Archivado en: Diseño y Desarrollo Web, Ruby on Rails, Tutoriales
REST
Ya hemos dicho que los controladores pueden tener acciones. En nuestro caso, tendríamos una acción new dentro del controlador de strips. Esa acción la podemos ejecutar invocándola desde código o también accediendo a esta URL: http://www.algo.com/strips/new.
Sin embargo, en Rails podemos además usar la programación REST. Yo no estaba muy convencida, pero Ernesto me aseguró que “es igual de fácil” y que “luego hacer los feeds RSS es muy sencillo”.
En la práctica, el REST consiste que para llamar a una acción, además de pasarle una URL, le pasamos un verbo al protocolo HTTP. Seguramente ya os sonarán los “métodos” GET y POST, pero hay más: PUT y DELETE. La acción show la asociaríamos con el verbo GET, update con PUT, etc.
Si queréis más info de REST (creedme: la queréis), os recomiendo que le echéis un vistazo a The Basics of REST in Rails.
RoR con Cafeína I: MVC y migraciones
Permalink | Archivado en: Diseño y Desarrollo Web, Ruby on Rails, Tutoriales
Esta es la segunda entrega de la serie de tutoriales sobre Ruby on Rails. Si aún no has leído la primera parte, ahora es un buen momento para hacerlo.
Modelo-Vista-Controlador (MVC)
la veremos en El patrón MVC es uno de los pilares básicos de Rails. El modelo representa a información de nuestro dominio. En este caso, tendríamos el modelo Strip (en castellano, “tira”). El modelo contiene los atributos, las restricciones y la lógica de negocio (por ejemplo, “Todas las tiras tienen que tener un título” sería una regla que iría en el modelo). Además, en Rails los modelos son Active Records. Esto significa que los atributos en el modelo tienen una correspondencia directa con los campos en nuestra base de datos (por ejemplo, si tenemos en nuestro modelo Strip un campo de tipo string llamado title, tendremos en la base de datos una tabla llamada strips, que contendrá el atributo title y será de tipo varchar). En RoR los modelos se guardan en el directorio app/models.
RoR con Cafeína 0: let’s rock!
Permalink | Archivado en: Diseño y Desarrollo Web, Ruby on Rails, Tutoriales
Esta es la primera entrega de una serie de tutoriales sobre cómo crear una pequeña aplicación con Ruby on Rails. Se asumen conocimientos básicos de programación en general, así como de XHTML y CSS. También se asume que tienes instalado RoR en tu ordenador. Desde aquí dar nuevamente las gracias a Ernesto por su ayuda y paciencia.
Disclaimer: Aunque no soy nueva en desarrollar aplicaciones web, sí soy n00b desarrollando con Ruby on Rails. De hecho, este tutorial no es más que una excusa para ir afianzando mis conocimientos.
¿Qué vamos a hacer?
Vamos a recrear paso a paso cómo hacer una página dinámica para una tira cómica (en concreto, la mía). Características:
- Upload (creación) mediante formulario de las tiras y sus datos por parte del administrador
- El administrador ha de poder eliminar y editar las tiras existentes
- Listado de todas las tiras (archivo)
- Navegación entre tiras
- Feed RSS
Giiiks on Rails
Permalink | Archivado en: Alma Geek, Diseño y Desarrollo Web, Orgullo Friki, Tira cómica
Me hacía mucha ilusión tener una tira cómica, con su propia página, independiente del blog. Y ya que la sacaba de aquí, pues en inglés y que llegue a cuanta más gente mejor.
No sabía que CMS utilizar, los dos que conozco más (Wordpress y TextPattern) parecían mucho bicho para tan poca cosa, así que le pregunté a Ernesto y me aconsejó que programara yo misma la aplicación en Ruby on Rails (los que le conocéis, seguro que no os extrañáis de nada ). Mi experiencia en Ruby on Rails hasta el momento era bastante escasa, apenas unos trasteos una tarde, así que no estaba yo muy convencida. Pero como se ofreció a echarme un cable, me puse manos a la obra.
Así que, he aquí cómo se pone un proyecto en marcha en un fin de semana.
El diseño y la maquetación de la web los hice la mañana del sábado. Premisas de estilo: web 2.0 (por aquello de es “cool”) y minimalista (por aquello de que soy vaga). Diseño oscuro (me he cansado del blanco), un logo en blanco y rojo, una tagline molona, botones grandes… XHTML + CSS y ya estaba la maqueta hecha en un par de horas.
A la tarde tocó turno Ruby on Rails. ¿Qué era lo que a mí me hacía falta? Algo para poder subir tiras, ponerles título, un archivo de tiras y un feed RSS, junto con algún sistema sencillito de autenticación para proteger la parte de administración. Todo esto parece mucho, pero en realidad es sólo una tablita en la base de datos (lo que se traduce a un modelo en Rails). Gracias a la ayuda de Ernesto, antes de irme a dormir ya tenía una versión más o menos funcional de la web.
El domingo por la mañana tocó arreglar bugs y acabar el sistema de feeds. Por la tarde, el despliegue en Dreamhost… que no habría sido problemático si hubiera sabido que para “refrescar” los cambios en el database.yml tenía que matar el proceso dispatch.cgi. Y, ta-dah! Tira cómica funcionando.
Hoy por la mañana me tocó cambiarle el título a la tira porque “Friiiks” ya lo utilizaban unos alemanes para su cómic. ¿El siguiente de la lista? Giiiks.
Recapitulando un poco:
- Ruby on Rails mola
- Ruby on Rails te permite transformar tus pensamientos en realidad en muy poco tiempo…
- …siempre y cuando conozcas cómo funciona.
- Ernesto tiene paciencia infinita+1
Se admiten opiniones sobre el diseño y las tiras en sí mismas
XHTML+CSS: nueva versión
Permalink | Archivado en: CSS, Diseño y Desarrollo Web, Tutoriales, XHTML
Aprovechando este concurso de Maestros del Web, he terminado una nueva versión del manual de XHTML y CSS: revisión de erratas, incorporación de algunos posts de Cafeína y un par de capítulos nuevos.
Podéis descargar el PDF (750KB, aproximadamente). Recordad que está distribuido bajo la licencia Creative Commons Attribution – Non Commercial – Share Alike (como el blog), así que compartidlo, traducidlo, añadidle cosillas, y demás
CSS-Sésamo I: Layout tableless a dos columnas
Permalink | Archivado en: CSS, Diseño y Desarrollo Web, Tutoriales
Esto no es un fallo en Matrix. Simplemente creo que es mejor y más cómodo tener el primer capítulo de CSS-Sésamo en “formato post”.
Hola, soy Coco y os voy a enseñar paso a paso cómo hacer un layout tableless (sin tablas) con dos columnas, a base de XHTML y CSS. Son necesarios conocimientos básicos de XHTML y CSS, aunque no gran cosa.
El layout que veremos en este primer capítulo de CSS-Sésamo es uno muy típico en blogs:
- Anchura fija
- Centrado
- Dos columnas (una más estrecha a modo de sidebar)
- Cabecera (header)
- Pie (footer)
Podéis echarle una ojeada aquí.
Por qué en IE se ve “bien” y en Firefox se ve “mal”
Permalink | Archivado en: CSS, Destacados, Diseño y Desarrollo Web, XHTML
El otro día una amiga me comentó que una compañera suya estaba haciendo una web, y que “en el Explorer se ve bien y en Firefox mal”, y me preguntó que a qué podría ser debido. Le di una respuesta deprisa y corriendo y creo que no expresé bien, así que aquí va la full version. La comparto con vosotros porque seguramente nos esperen muchas más preguntas de este estilo.
La clave para entenderlo bien es darle la vuelta a la tortilla. La realidad es que en IE se ve “mal”, y en el resto de los navegadores (no sólo Firefox) se ve “bien”. Pongo “bien” y “mal” porque son apreciaciones que hacemos los humanos, subjetivas.
Los navegadores no son adivinos con bolas de cristal que se conectan a la mente del maquetador web e interpretan su voluntad. El maquetador tiene que dejar escrito, detalladamente, el contenido y apariencia de la página web: esto se consigue con los lenguajes (X)HTML y CSS.
Estos lenguajes se encuentran bien definidos cómo estándar, en el WWW Consortium (viene a ser algo así como la RAE). Este organismo se encarga de describir con precisión cómo deben interpretar el (X)HTML y el CSS los navegadores.
Ahora bien, los navegadores no siempre cumplen a pies juntillas lo que dice el W3C. Es más, cierto navegador no hace ni puto caso.
