|

View Source Chart: extensión de Firefox para el código HTML

ByLuis

Gracias a Hugo y a otro amigo anónimo vía formulario de contacto, nos ha llegado esta extensión, que si bien podía llevar mucho tiempo, yo desconocía.

Se trata de View Source Chart, una extensión que nos devuelve el código HTML que se genera después de las modificaciones que hace el javascript del DOM.

viewcodechart.png
Por ejemplo, escribimos el siguiente código HTML:

document.write("Hola Mundo");

Nos mostrará el siguiente código HTML:

<script>
...
</script>
Hola Mundo

Muy útil para ver el código real que nos muestra el navegador, y no tener que ir destripando el javascript para saber que saca.

View Source Chart

Similar Posts

|

InfiniteGraph Use Case: Modeling Stackoverflow

ByLuis

InfiniteGraph Use Case: Modeling Stackoverflow: I didn’t hear much about InfiniteGraph after its 1.0 release, except this post that uses Stackoverflow data as input to demo some features of graph databases: The vertices in the graph are represented as the Users, Questions and Answers above while the edges are represented as the interactions between …

Post original

API de Open Graph de Facebook

ByLuis

Si el otro día salía Open Graph de Facebook, ahora hay que ponerse a hacer aplicaciones para hacer uso de esta API, porque nos guste o no, Facebook nos puede aportar mucho a nuestra aplicación.

La verdad es que la API es muy sencilla: llamada http que devuelve JSON. Siendo la URL de la llamada de esta forma:

https://graph.facebook.com/ID[/CONNECTION_TYPE]

Lo bueno es que el ID puede ser cualquiera: un usuario, una página, un status, una aplicación, … Y luego se le puede añadir el tipo de conexión para obtener los amigos, los vídeos, … de un usuario.

Facebook Graph API

Diferentes técnicas de cacheado

ByLuis

Otro interesante artículo sobre caché y los distintos modos de poder llevarlo a cabo. Para aquellos que quieran añadir caché a su sistema y ahorrar recursos y no sepan qué hacer, puede venirles muy bien este wiki y el listado de tipos de cache que hay:

  • Caching Proxy Servers
  • Content Delivery Networks
  • Cachear páginas completas
  • Cachear páginas parciales
  • Cabeceras HTTP
  • Memoria compartida (memcache, APC)
  • Cache en la BD

Web application/Caching

Vía / DZone

Comparativas de licencias opensource

ByLuis

Seguro que a alguno le pasa como a mí que se pierde entre tanta licencia. Si formas parte de mi grupo, te vendrá bien esta comparativa sobre licencias opensource que se basa en 4 preguntas:

  • ¿Puedo darle mi nombre al trabajo derivado?
  • ¿Debería el trabajo derivado continuar siendo opensource?
  • ¿Puedo cambiar el tipo de licencia del trabajo derivado?
  • ¿Puedo vender el trabajo derivado?

Los tipos de licencia que comenta son:

Open Source licenses comparison table

Consejos para diseñar emails

ByLuis

A la hora de diseñar los emails en formato HTML que nuestras aplicaciones enviarán a los usuarios, hay que tener en cuenta varios puntos que nos ayudarán a un diseño más correcto:

  • Olvidarse del tableless: si, aunque sea duro, es mejor volver a las tablas y olvidarse del posicionamiento y la maquetación vía CSS.
  • Usar los estilos dentro de las etiquetas: la mayoría de los lectores de correo online ignoran lo que hay entre la cabecera del HTML, por eso es conveniente usar los estilos dentro de las etiquetas.
  • No uses imágenes de fondo: aunque para un buen diseño puede ser esencial, hay algunos lectores que no mostrarán los background, por lo que es mejor no usarlos para asegurarnos de que todo el mundo vea correctamente el correo.
  • Considera las imágenes bloqueadas por defecto: por seguridad los clientes de correo bloquean las imágenes por defecto, por lo que no es conveniente usarlas para indicar el contenido del mensaje.
  • Usa el atributo alt en las imágenes: como estarán bloqueadas por defecto, es necesario indicar la mayor información posible en ese atributo.
  • Usa paths absolutos: ya que el mail se leerá en otro servidor es necesario indicar la ruta completa para que los contenidos se vean correctamente.
  • Ten cuidado con el tamaño de los archivos: a parte de que el usuario no debe esperar para poder leer el correo, algunas veces los correos con archivos pesados son considerados spam.
  • Evita flash y similares: evita el uso de flash u otros contenidos multimedia que puede que no se vean en el cliente.
  • Diseña para espacios pequeños: aunque se trate de un HTML no siempre el espacio donde se ve es amplio, piensa en dimensiones pequeñas a la hora de diseñar.

9 best practices for email design

Vía / CSS Globe

|

Protolize: listado de herramientas web

ByLuis

protolize.pngProtolize es una lista con herramientas web, algunas imprescindibles y otras que nos pueden ser bastante útiles. Organizada en categorías y algunas separadas en grupos: aplicaciones en general: herramientas como Type Navigator, Web Developer Extension y Color Scheme Generator, y recursos como The Web Developer’s Handbook, Design Melt Down y A List Apart; CMS (Modx, WordPress, Drupal); herramientas CSS como CSS Photo Gallery, Background Image Maker y Nifty Corners Cube, y sitios para inspirarse como CSS Mania, CSS Import y CSS Beauty; Javascript (Script.aculo.us, Prototype, Image Reflection); AJAX (Ajaxload, Ajax Downloadables, Lightbox); PHP (Hot Scripts, Php Freaks, Pear); Flash (Fuse Kit, Zigo Tween Engine, MC Tween).
Protolize | Essential web tools in one place
Vía / Digg