Crea ‘destacados’ sin duplicar texto

ByLuis

Entendemos destacados como esa parte de un artículo de especial interés que se repite en otra parte del artículo y que se resalta. Quizás otra alguien de periodismo lo podría definir de otra forma o llamarlo de distinta manera, pero creo que con la imagen siguiente nos entenderemos todos.
destacados.png
En 456 Barea Street nos ofrecen un javascript para realizarlo directamente sin necesidad de duplicar el texto.

La forma de realizarlo es sencillo, marcas el texto que quieres resaltar entre un elemento span, que tenga un estilo específico. Después tan solo tenemos que obtener esta etiqueta, hacer una copia de su contenido, crearnos una capa que tenga el estilo float con valor left, incluir la capa nueva antes del padre del texto original, y ya está, tenemos el texto destacado resaltado sobre el texto normal.

Automatic pullquotes with JavaScript and CSS

Vía / Site Point

Similar Posts

Bitnami: simplificación del open source

ByLuis

Bitnami es una web que pretende simplificar el uso de las aplicaciones web open source. Para ello lo que hace es recopilar aplicaciones y agruparlas en paquetes (stacks) de fácil instalación para Linux, Windows y Mac.
bitnami.png
Además también agrupa los contenidos en aplicaciones para documentar, blogs, CMS o Wiki. Por ello podemos instalar aplicaciones como Joomla!, Drupal, Mediawiki y WordPress de forma muy sencilla. Además nos da la posibilidad de conocer algunas que nos pueden ser útiles y porder elegirlas por plataforma o licencia gracias al sistema de tags.
Los stacks son independientes a otras aplicaciones instaladas, completos, y pueden ser instalados en el directorio que se quiera, por lo que puede haber diferentes instancias del mismo stack. Algo bueno es que hasta que no se pulsa el botón finalizar, no se empieza con la instalación, evitando así instalaciones incompletas.
BitNami
Vía / dzone

Diferencias entre un buen diseñador y un gran diseñador

ByLuis

Estando a la espera de que nos cuenten las diferencias entre un mal diseñador y un buen diseñador, que sería algo que necesitamos algunos, nos quedamos con un buen artículo que nos explica las diferencias entre un buen diseñador y un gran diseñador.

Se trata del típico post que todo el mundo referencia y que uno se da cuenta que se entera de las cosas el último, por eso voy a referenciar donde lo he visto originalmente, donde lo he leido en español y por su puesto el original.

Entre las cosas que más me han gustado destaco lo siguiente:

Mientras un buen diseñador dispone de ciertos elementos y los organiza de manera estética, un gran diseñador se preocupa además porque el mensaje que expresa su diseño llegue a destino.

…los artistas crean problemas, los diseñadores los solucionan. Pero un gran diseñador se adelanta a un problema potencial, tiene visión.

La conclusión a estas ideas nos lleva nuevamente a la razón de ser del trabajo de diseño, que es justamnente lo que diferencia además a un diseñador de un artista: las necesidades y problemas que atiende el diseño suelen ser -por lo general- ajenas al diseñador. El diseñador no es más que un instrumento comunicativo en esencia.

Nine skills that separate good and great designers

9 habilidades que separan buenos y grandes diseñadores

Vía / Criterion

QueryPath: maneja HTML con PHP como si fuera jQuery

ByLuis

QueryPath es una librería PHP que permite trabajar con HTML, XML o web services de forma muy sencilla y parecida a la que se usa en jQuery, permitiendo usar métodos encadenados.

Puede usarse para importar documentos XML en una base de datos SQL, o pasar los resultados del SQL a un XML o HTML. Se pueden escribir documentos en HTML o convertir XML en HTML. Abrir documentos y buscar mediante selectores CSS3 o XPath.

qp('sample.html')->find('title')->text('Hello World')->writeHTML();

QueryPath

Vía / Developer Works

|

El rendimiento de Google Instant Previews

ByLuis

Algunas veces no nos paramos a pensar en los cambios que añade una web, en este caso Google, los problemas que pueden aparecer en tema de rendimiento. Y estos problemas suelen ser fundamentales a la hora de la impresión que se lleva un usuario de la web, claro, que Google no se caracteriza por problemas de rendimiento y los expertos que están trabajando allá deben ser de lo mejorcito que existe.

Después de este rollo introductorio, me gustaría apuntar los 3 aspectos que utiliza Google para mejorar el rendimiento que se centran sobre todo en la reducción del número de peticiones HTTP:

  • Compilación de Javascript: mediante Closure Compiler, consigue reducir el tamaño de los ficheros js, reutilizar variables, …
  • JSONP bajo demando: JSONP permite envolver la respuesta JSON con una llamada Javascript. Se realizan llamadas directas al script en vez de usar Ajax, lo cual permite hacer llamadas crossdomain y que el navegador lo cachee perfectamente. El problema es que si se añade la llamada con un createElement, el navegador se queda cargando, por lo que es mejor meterlo entre un setTimeout.
  • DATA URIs: es un método de añadir contenido en URLs usando base64, el problema es que IE8 sólo admite DATA URIs de 32k, por lo que dividen las imagenes en trozos y los “empalman” con etiquetas IMG. También han comprobado que aunque base64 añade hasta un 33% del tamaño, como lo devuelven en gzip, el tamaño final es más o menos el mismo.

Está claro que hay que aprender de los que saben.

Instant Previews: Under the hood

Vía / High Scalability

Integra las licencias Creative Commons en tu HTML con ccRel

ByLuis

ccREL es una forma de añadir la licencia Creative Commons a nuestros contenidos web. Su uso es muy sencillo, aunque a mi no me ha validado el HTML, si alguien sabe como conseguir que valide que lo diga:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:cc="http://creativecommons.org/ns">
<head>
<title>Judith Myerson's Stuff</title>
</head>
<body>
<div about="">
This page, by
<a property="cc:attributionName" rel="cc:attributionURL" href="http://jmyerson.org/">
Judith Myerson
</a>,
is licensed under a
<a rel="license" href="http://creativecommons.org/licenses/by/3.0/">
CC Attribution License
</a>.
</div>
</body>
</html>

ccREL

Vía / IBM Developer Works

|

Recursos: BLUE VERTIGO

ByLuis

blue-vertigo.gif Con el paso de los años nos vamos acomodando y tendemos a confiar cuando buscamos material para el desarrollo de sitios en algunos pocos recursos de confianza ignorando un mar de posibilidades. Si estás en esta fase bien por vaguete o por desconocimiento de a dónde acudir…
Desde Argentina, directorio de fuentes y stock de imágenes organizadas por tipo y licencias, vectoriales, sonidos para usar en Flash, photoshop brushes, y mucho más:
BLUE VERTIGO