Avisar de contenido inadecuado
Expand

Coda: editor de código todo-en-uno para Mac

10699-11708.jpg

Coda es un editor de texto orientado al desarrollo web que integra, además, un completo gestor de sites, funciones de un cliente FTP, un cliente SSH, un editor visual de hojas de estilo, opciones de previsualización incorporadas, funciones de autocompletado para HTML, CSS, PHP, SQL... Vamos, un todo-en-uno en toda regla, y con la solvencia de haber sido desarrollado por la gente de Panic.

10699-11707.jpg Lo conocí esta misma semana a través de una de estas webs que recopilan diseños interesantes: CSSRemix, CSSMania... no recuerdo cuál. Debo reconocer que en nuestra primera toma de contacto me quedé sólo con lo atractivo del diseño de su página y pensé que no sería si no "otro más" de esos programas que intentan sin mucho éxito combinar demasiadas cosas bajo un único interface. Sin embargo, el viernes Eric, uno de los compañeros de la oficina, me lo recomendó, así que hoy he decidido darle una oportunidad usándolo durante toda la tarde para llevar a cabo algunos cambios a OboLog.

La verdad es que supera con creces la prueba. Tanto, que me estoy planteando sustituir mi actual editor de texto, TextMate, por éste.

  • El interface es cómodo e intuitivo, consigue conjugar todas las 'caras' de la aplicación sin saturar al usuario con miles de opciones.
  • 10699-11709.jpgEl editor de texto, como comentaba más arriba, incorpora auto-completion para los lenguages más habituales, así como coloreado automático del código.
  • Organiza los archivos abiertos en pestañas, en vez de abrir nuevas ventanas para cada uno.
  • Trabaja de forma fluida aunque los archivos se encuentren en red ( uno de los temas que más problemas me daban con TextMate ).

En mi caso la verdad es que poco partido le saco al cliente FTP. Si tuviera integrado un cliente para Subversion o similar sería ya El Editor Definitivo, pero será una carencia que perdonaremos, ya que con el cliente SSH en la misma interfaz podemos, en un momento dado, lanzar los commits en local o los updates en el servidor cuando haga falta.

En definitiva, toda una opción a tener en cuenta. Posiblemente siga usando CSSEdit 2 para la creación y edición de hojas de estilo, puesto que en ese aspecto es mucho más completo que Coda, pero creo que ambos van a formar un buen equipo. El precio, por otra parte, no es desorbitado: $79.

Actualización 2 de Mayo: Panic ofrece una actualización desde su web a Coda 1.0.1, en la que han añadido soporte para JPS-HTML y ActionScript, la posibilidad de trabajar con plantillas Smarty, y la opción de definir una URL local para lanzar las previsualizaciones mientras estemos desarrollando (release notes de la nueva versión). 

{
}
Expand

Todos los capítulos de "Getting Real" en castellano

Getting Real es el libro sobre desarrollo de proyectos web en el que 37 Signals ha tratado de plasmar su filosofía de trabajo. A lo largo de 16 capítulos hablan de varios temas que van desde gestión del tiempo y de prioridades en el desarrollo de proyectos, de diseño de interfaces o producción de código, hasta cómo promocionar tu negocio o tu aplicación web.

Getting Real is about skipping all the stuff that represents real (charts, graphs, boxes, arrows, schematics, wireframes, etc.) and actually building the real thing.

Getting real is less. Less mass, less software, less features, less paperwork, less of everything that's not essential (and most of what you think is essential actually isn't).

Getting Real is staying small and being agile.

Hace unos meses empezaron a ofrecer su libro de forma gratuíta, para su lectura online, y empezaron a traducirlo a diferentes idiomas, entre ellos, el castellano. Si tu relación con la lengua de Shakespeare no es todo lo buena que debiera, ahora dispones de una versión en castellano del manual de "buenas prácticas" de 37 Signals: Getting Real en castellano.

Como apunte: a poco que puedas, te recomiendo leer la versión en inglés. La traducción en algunos puntos deja bastante que desear...

Corrección 08.05.07: Joselo nos avisa de que no todos los capítulos han sido traducidos. Aún quedan algunos capítulos centrales en inglés . Nos alegramos demasiado pronto... ¿Alguien se anima a echarles una mano y terminar la traducción que empezaron hace ya más de 7 meses? 

Web oficial | Getting Real

Expand

Cómo evitar problemas con la cache del navegador

En esta ocasión veremos como evitar un problema con el que seguro os habréis topado en más de una ocasión: El navegador no detecta un cambio que hemos realizado en un archivos estático ( CSS / Javascript / imagen ) y usa la copia cacheada en disco, impidiendo que la web muestre los estilos correctos, actualizados, o lanzando un error Javascript por el uso de una función no existente, hasta que forzamos una actualización con Ctrl-F5.

El caché de los navegadores actúa en el 90% de las ocasiones como nuestro aliado. Permite que determinados archivos estáticos se carguen una única vez por usuario, y se lean desde el disco en sucesivas visitas, reduciendo drásticamente los tiempos de carga.

De todas formas, el caché también puede jugar en nuestra contra en determinadas ocasiones: Si hemos realizado modificaciones a un archivo estático en un intervalo corto de tiempo, y además estas modificaciones han hecho variar muy poco el tamaño de nuestro archivo, es muy probable que el navegador no detecte que existe una nueva versión, y en vez de descargar el fichero más actual, haga uso de la copia que guarda en el disco para montar la página.

Como apuntábamos al principio, las consecuencias de esto suelen ser desastrosas: webs descuadradas o errores javascript por culpa de funciones que "deberían estar", pero que el navegador no ha cargado. Y, claro , el Ctrl-F5 sirve para mostrar la página al compañero de mesa o para tranquilizar al jefe que ha pegado un bote en la silla al ver el resultado, pero el usuario no tiene ni idea... va a verlo todo descuadrado hasta que expire la caché o le dé por forzar la recarga ( cosa poco probable ).

La solución a este problema es sencillamente añadir un parámetro a la llamada que hagamos al archivo estático. Los hay que optan por usar una fecha, y otros simplemente un valor numérico. Yo soy de estos últimos: como suelo usar Subversion para el control de versiones, lo que hago es actualizar el valor con el nº de versión correspondiente. De esta forma puedo saber, además, cuándo se hizo la última modificacion "sensible" a la hoja de estilos, echando un vistazo al showlog.

<link rel="stylesheet" type="text/css" href="/css/estilos.css?id=393" />

Cada vez que cambiamos el parámetro que hemos añadido a la llamada al CSS ( o Javascript, o imagen... ), lo que estamos haciendo es forzar al navegador a descargar de nuevo el archivo, retomando de esta forma el control sobre cuándo cachear y cuándo no.

Expand

¿Qué significa la "K" de CMYK?

CMYK son las siglas del modelo de color que se usa normalmente en impresión. CMYK hace uso de 4 colores básicos ( Cyan, Magenta, Amarillo y Negro ) para reproducir toda la gama de colores.

Hasta ahora yo, igual que Jorge de bloGrafico , estaba convencido de que "K" correspondía al último color, blacK, pero no. Al parecer corresponde a la palabra Key ( Cyan Magenta Yellow Key-plate ) . La Key-Plate correspondía a la plancha negra, y se llamaba así porque dicha plancha contenía la mayor parte de la información de la imagen. Curioso.

9632-10937.jpg

Por otra parte, es interesante también el motivo por el cual se incluye el negro en este modelo de color, aún pudiendo ser reproducido simplemente por la mezcla de los otros tres:

  • Por meras limitaciones técnicas: conseguir el color negro supondría una mezcla del 100% de los otros 3 colores, resultando una capa de tinta que tardaría mucho en secar o incluso podría romper un papel fino.
  • La mayoría de textos se imprimen en negro, y mediante la superposición de las 3 tintas algunos detalles de los caracteres serían complicados de conseguir.
  • La tinta negra es la más barata. Si hubiera que mezclar las 3 tintas cada vez que se tuviera que imprimir en negro... iba a salir por un ojo de la cara.
En soportes multimedia, en cambio, no aplica ninguna de estas limitaciones, por lo que se hace innecesario el uso del "cuarto elemento": se usa el modelo RGB ( RedGreenBlue )
{
}
Expand

Hojas de estilo para impresión

Hoy vamos a hablar sobre cómo, mediante hojas de estilo, podemos optimizar nuestras páginas para ser impresas.

Aún a dia de hoy es habitual encontrar muchos sites que ofrecen a sus lectores versiones "imprimibles" de sus páginas, enlaces que nos envían a una nueva página en la que se han eliminado algunos elementos y se han formateado los contenidos de forma que encajen y se visualicen correctamente en papel.

Dejando un lado el trabajo extra que esto supone, crear páginas específicas para impresión duplicando contenido del documento principal puede acarrear daños colaterales tales como penalizaciones en el posicionamiento de nuestra web, por contenido duplicado en Google. Aún existiendo técnicas para evitar esto ( NOINDEX ), no tenemos porqué arriesgarnos ni realizar ese esfuerzo extra de duplicación.

Mediante el atributo "media " de CSS, podemos enlazar a una hoja de estilos que actuará exclusivamente cuando el usuario trate de imprimir una página.

En esta nueva hoja de estilos trataremos de conseguir lo siguiente:

1. Eliminar contenidos no deseados

Posiblemente no sean necesarias ni la cabecera completa del site, ni las opciones de navegación principales, el breadcrumb, ni, si las hubiera, las columnas laterales con información adicional, ¡o la publicidad!. Al usuario le interesa el contenido principal de la página.

#navigation, #breadcrumb, #sidebar, #footer { display: none }

2. Formatear la página

Desde asegurarnos que los elementos van a encajar en la página correctamente ( nada de floats ni margins, todos los anchos porcentuales... ) hasta revisar el formato visual de los elementos ( lo que en la versión online enfatizamos usando el color rojo, quizás valga la pena enfatizarlo con negrita o subrayado en la versión impresa: el usuario posiblemente imprima en blanco y negro ).

También, para rizar el rizo, podemos tratar de añadir a los enlaces algo de información adicional, indicando a qué URL apunta cada uno, o recopilándolos todos al final de la página. Os recomiendo la lectura del artículo que trata precisamente sobre esto en A List Apart .

3. Tener especial cuidado con las imágenes

Es habitual, a la hora de maquetar una página mediante CSS, el uso de imágenes de fondo para conseguir ciertos efectos, delimitar contenedores, etc... Hay que tener en cuenta que, por defecto, la mayoría de navegadores no imprimen las imágenes de fondo, con lo que, por ejemplo, si el logotipo de la página está como fondo de una capa que contiene el nombre la misma... no se verá en la versión impresa.

Una forma de evitar esto sería usar un logo optimizado para impresión ( B/N ), incluído dentro del propio HTML de la página, pero oculto por CSS para la versión de pantalla, pero visible para la versión impresa

online.css

#print_logo { display:none; }

print.css

#print_logo { display:block; }

html

Expand

DED|Chain, YUI al estilo JQuery

Si te has tenido que pelear con AJAX y efectos dinámicos javascript, es posible que hayas usado ya, o al menos conozcas, las librerías Yahoo User Interface (YUI) y Jquery.

Pues bien... ¿Te imaginas la potencia y la estabilidad de la librería de Yahoo con simplicidad y la sencillez de uso de JQuery?

¡Existe! Su nombre es DED|Chain, y hoy la comentaban en el blog de YUI , y publicaban una entrevista a su creador, Dustin Diaz.

¿Habrá que probar, no?

Expand

CSSEdit y las hojas de estilo bien organizadas

CSSEdit Releía esta mañana CSS Crib Sheet , un artículo de Dave Shea que podéis encontrar traducido al castellano gracias a la gente de Armonía y pensaba, mientras repasaba de nuevo los consejos que Dave da a los diseñadores que trabajan con CSS, en el ahorro de tiempo que supone la automatización de algunos de los puntos de la lista mediante el software adecuado.

En mi caso llevo algunos meses trabajando con CSSEdit ( sólo Mac OsX ), un editor de hojas de estilo realmente genial.

Entre sus muchas virtudes destacaría:

  • Dispone de una vista "preview", una ventana donde podemos ver en tiempo real el efecto de todas las propiedades que vamos añadiendo y modificando.
  • Podemos extraer y modificar el CSS de cualquier página web, mediante la ventana de preview.
  • Mediante una sintaxis propia, usando simplemente comentarios en la hoja de estilos, nos permite agrupar propiedades e ids, traduciéndose esa organización en un listado jerárquico, a modo de un explorador de archivos, en la propia ventana de edición de código. Esto me parece especialmente útil, cuando se trabaja con hojas de estilo medianamente grandes. Dado que muchas veces mantener un orden adecuado es esencial para el correcto funcionamiento de la cascada y en formato jerárquico propiedades e IDs me parece genial.
  • Mezcla funcionalidades de autocompletar con una barra de herramientas lateral dónde podemos escoger mediante clics las propiedades y los valores que queremos asignar a cada clase o ID. Acaba sirviéndonos de cheatsheet a la vez que de barra de herramientas.
  • Dispone de un validador CSS integrado en la propia aplicación
  • Permite gestionar versiones de nuestras hojas de estilos

CSSEdit screenshot En definitiva... "¡por qué no te habré conocido antes!", como decía el amigo Jesús Puente. Además, como punto a favor, el precio acompaña bastante: sólo $29.95.

Otras opciones similares, como StyleMaster ( Win & MacOsX ) cuestan casi tres veces más.

Expand

Buffete libre de Cheatsheets: Sírvase usted mismo

Si eres desarrollador o trabajas en esto del diseño web estarás conmigo en lo útil que resulta en ocasiones disponer de pequeñas chuletas donde apuntar los patrones más comunes al contruir una query, o los diferentes selectores soportados por CSS2, o un listado con funciones de tratamiento de cadenas de texto para PHP...

A estos efectos, los Cheat Sheets de ilovejackdaniels.com son bastante prácticos ( yo tengo 3 copias plastificadas en el escritorio ) y cubren diferentes áreas o tecnologías. Lo mejor: que van al grano. No pretenden ser pequeños manuales , sino guias de consulta rápida para aquellos que ya tienen ciertos conocimientos ( de hecho suelen ocupar una sóla hoja ).

De momento hay disponibles para:

Y si con estos no tienes suficiente o no encuentras lo que buscabas, puedes probar en este exhaustivo listado que han elaborado en Smashing Magazine.

Via | Obokaman  

Expand

Limpieza de floats en Internet Explorer 7

 Durante los últimos meses, Microsoft nos ha tenido en vilo ( sobretodo a los desarrolladores web ), pendientes del soporte a la especificación de CSS que tendría su nuevo navegador, Internet Explorer 7 . Después de unos 5 años sin publicar una nueva versión, parecía que la cosa iba a salir "fina": El modelo de caja se ha implementado correctamente, se soportan propiedades tan útiles como min/max-width, ... ¿¡Se acabaron las reglas sólo para IE!? No...

Por poner un ejemplo, no se han implementado los pseudo-elementos :before y :after. ¿Trivial? Para nada. Entre otros muchos usos, como la inclusión de elementos que afecten a la presentación de ciertos bloques ( comillas antes y después de elementos cite, pipelines después de listas de enlaces horizontales... ) o la limpieza de floats a través del easy clearing method quedan totalmente inutilizada.

El antiguo hack para explorer es ignorado por el nuevo IE y además, al carecer éste de soporte para :before, tampoco la regla genérica funciona. Esto se traduce en un montón de sitios descuajeringados: el anterior método permitía que aquellos contenedores que tuvieran hijos flotantes obtuvieran una altura correcta, correspondiente a su hijo más alto.

Cuando ya había perdido toda esperanza de disponer, de nuevo, de un método lo más genérico posible que permitiera disponer de un marcado "limpio" para conseguir el deseado efecto... me encontré con el artículo de Roger Johansson, New clearing method needed for IE7?, en que justo se plantea esto mismo, y en el que, a través de la discusión generada por sus lectores, consigue llegar a una versión funcional para IE y que hace uso exclusivamente de CSS.

La solución:

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */

Con un pequeño añadido para IE 6, que se podría implementar de esta forma:

* html .clearfix {height:1px;}

Información adicional: