|

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

|

phpWebSite: CMS para creación de webs

ByLuis

phpWebSite es un CMS que nos facilita la creación de webs. Que con la ayuda de una administración web podremos mantener y gestionar nuestra web de forma sencilla.

Además el diseño puede ser cambiado gracias a un layout flexible. La contenido está organizado mediante categorías y puede ser ampliado mediante comentarios de otros usuarios.

Existe muchas caracterís y el desarrollo crece rápidamente mediante la creación de nuevos módulos.

phpWebSite

Vía / International PHP Magazine

Web of Data

ByLuis

Interesante artículo sobre el futuro de la web y el cambio de pensamiento entre la WWW como una web de ficheros y la Web of Data, como una web de datos y relaciones.
El concepto es sencillo de entender, mientras que la WWW se basa en ficheros y enlaces entre unos y otros, la Web of Data, basada en Graph Database (diferentes a las base de datos relacionales ya que se basan en nodos, propiedades y relaciones entre nodos), donde los datos se almacenan en nodos, y estos puede relacionarse de forma muy variada y sencilla entre ellos.
www_vs_web_data.png
Viendo que las aplicaciones sociales (Twitter, Facebook, …) se basan en datos (usuarios, mensajes) y sus relaciones (updates, followers, …), es lógico pensar en este tipo de base de datos (Graph DB) que en la base de datos relacional. Aunque claro, al ser algo un tanto nuevo, quizás no existan alternativas potentes y el problema está en el escalado y el rendimiento.
La presentación es muy interesante y las bases de datos que indican (neo4j…) pueden estar muy bien para organizar estructura tipo nodo (yo ya tengo un ejemplo para probar).
Graph Databases and the Future of Large-Scale Knowledge Management
Vía / High Scalability

| | | |

Nueva versión de FireBug

ByLuis

firebug2.pngYa hablamos en su día de FireBug, una extensión que nos permite depurar nuestras aplicaciones web. La nueva versión tiene una gran novedad, “debuguear” Javascript. Ahora es posible poner puntos de ruptura, ejecutar el código paso a paso, inspeccionar variables, comprobar código, … Si antes ya era indispensable, ahora es totalmente obligatorio para cualquier desarrollador (vale, quizás me he pasado). A parte de el debugger hay otra serie de cambios que no dejan de tener importancia.
FireBug
Vía / SitePoint

|

20 consejos para ser un gran diseñador web

ByLuis

Según cuenta el autor, dice que hay una diferencia entre ser un buen diseñador web y un gran diseñador web, que es tomar atajos para hacer más sencillo tu trabajo sin que repercuta en la calidad. Por eso nos da una serie de consejos o trucos a seguir:

  • Planificación: aunque parece algo obvio, suele ser algo que no se lleva a cabo.
  • Hazlo a mano: yo no podría estar más de acuerdo con este consejo. Existen aplicaciones muy buenas que te crean el código HTML sin tener que escribirlo uno, pero hacerlo tú mismo es algo que te va a dar mayor control sobre el diseño. Con un editor normal que te coloree el código debe ser más que suficiente.
  • Hojas de estilo, enlazar o importar: hay dos formas de importar un CSS y no todos los navegadores reconocen las dos formas, por ello se puede usar ambas para que navegadores modernos y antiguos carguen el CSS.
<link rel="stylesheet" href="simple. css" type="text/css" media="screen">
<style type="text/css" media="screen">
@import url(simple.css);
</style>
  • Usar gradientes como fondo con cuidado: el uso de imágenes como fondo de pantalla es algo sobre lo que se puede y debe tener mucho control, se puede hacer un degradado vertical de ancho 1px y luego repetirlo solo en el eje x, y que el color de fondo sea el color en que finaliza el gradiente. Yo añadiría que cuidado con los gradientes, ahora están muy de moda, pero tampoco se debe abusar de ellos.
  • Comentarios: imprescindibles para cualquier tipo de desarrollo, ya sea para una aplicación en .NET o para una página web. Otra cosa es que lo hagamos siempre.
  • Usa simples scripts PHP: no es necesario ser un experto en PHP, pero si tu servidor lo admite, úsalo, sobre todo para incluir trozos de HTML que sean muy utilizados, como por ejemplo el código que crea el menú.
  • Dimensiona las fuentes con em: a los diseñadores les suele gustar usar px porque se ajusta exactamente al tamaño que quieren, pero el problema es que, por ejemplo, IE no redimensiona las fuentes definidas con px con el consiguiente problema de accesibilidad para los lectores con discapacidad.
  • Hack en IE del modelo de caja: quizás no os haya pasado, pero IE tiene un bug con el tamaño de una capa cuando se usa width y margin, padding o border. Esto se soluciona usando el guión bajo delante del estilo (_margin), que IE reconocerá como el propio estilo, mientras que los otros navegadores lo ignorarán. No recomiendo seguir haciendo esto, porque con la nueva versión de IE podríais tener problemas ya que se ajusta más a los estándares.
  • Espacio en los formularios: los form aunque no se vean tienen márgenes, cuando crees uno, no olvides quitarles el margen superior e inferior.
  • Testea: imprescindible, sobre todo para intentar conseguir que funcione en casi todos los navegadores.
  • Formato de imágenes: usa GIF para imágenes con colores planos y JPEG para imagenes tipo fotografía, aunque deberías usar PNG en ambos casos, ya que funciona tanto para colores planos como para tipo fotografia, el problema es que IE no admite el canal alpha, hay que esperar a IE7 para que lo podamos usar.
  • Atributos alt y title: para que la descripción de las imágenes o enlaces aparezcan correctamente en los dispositivos móviles.
  • Orden de las pseudoclases: como ya explicamos en esta entrada.
  • Lenguaje semántico: separa el contenido de la apariencia, si eliminamos la css de una página se debería ver correctamente.
  • Favicons: los iconos que aparecen en los favoritos o en las pestañas, algo sencillo que representa a nuestra web.
  • Usa máyusculas mediante CSS: cuando quieras escribir un texto completamente en mayúsculas usa text-transform en vez de escribirlo tú directamente en mayúsculas.
  • Escribe el texto alrededor de las imagenes: algo ya comentado en esta entrada.
  • Usa UTF-8: no todo el mundo tiene tu idioma o tu juego de caracteres, vuelve a leer esta entrada para obtener más información.
  • Estilos para impresora: crea estilos específicos para impresoras (media=”print”)
  • Aprende de otros: para eso nada mejore que CSSMania.

20 pro tips

Vía / Digg

Estadísticas de uso de Twitter

ByLuis

El otro día me dio por pensar cuantos updates debería tener Twitter cada segundo viendo el número de actualizaciones que había por lo de #manifiesto. Para intentar calcularlo creé un script que cada 10 minutos escribiera un tweet en una cuenta guarra de Twitter. Guardé los datos en una BD de SQLite para luego trabajar con los datos obtenidos.

twitter_t.png

Pues los datos que obtuve durante 1 semana es que cada 10 minutos hay una media de 230.000 updates, cada segundo una media de 380 updates, cada hora 1.380.000 updates. Incluso se puede ver una caída en el servicio.