Easy CSS Styler, arma un CSS básico de manera visual

css-styler
Easy CSS Styler

Cuando armamos un sitio en HTML, por más básico que sea, hay que darle un poco de estilo a las partes principales mediante CSS, es algo simple, pero que es aburrido hacerlo «manualmente». Hoy encontré Easy CSS Styler , una herramienta excelente, especial para los que nos gusta hacer las cosas lo más rápido posible y con el menor esfuerzo.

Con Easy CSS Styler podemos crear la parte básica de un estilo de manera visual, algo así como un editor WYSIWYG para CSS. Navegando por las diferentes pestañas, body, h1, h2, etc., podemos ir cambiando solores, tipografías, y demás configuraciones de manera visual, y viendo cómo queda en una previsualización a la izquierda.

Una vez que terminamos con la edición visual, sólo queda descargar el archivo con el CSS en formato texto, listo para que lo subamos a nuestro diseño. Me parece una herramienta muy útil, no debe faltar en nuestros favoritos.

Visto en FeedMyApp

Adobe BrowserLab, testea un sitio web en varios navegadores

adobe-browserlab
Adobe BrowserLab

Los amigos de Adobe vienen a full con los lanzamientos en estos días, hoy le toca el turno a BrowserLab, una herramienta, basada en Flex (si no me fallan los cálculos), que te permite previsualizar cómo se vería un sitio web en diferentes navegadores. No es nada innovador en cuanto al concepto, en Punto Geek ya les hemos comentado varias alternativas para esto, sin embargo es interesante comentar este lanzamiento de Adobe.

Sin dudas, esta herramienta de Adobe es más avanzada que las que hemos comentado, simplemente por el desarrollo que tiene detrás, es una herramienta simple, pero a la vez completa. Tiene soporte para atajos de teclado, podemos ir cambiando entre los navegadores, el estilo de la vista, haciendo zoom, y demás tareas, con sólo presionar una tecla.

Podemos elegir entre varios navegadores, pero sólo en Windows XP y Mac OS X, creo que ahí le erraron, me parece que no se dieron cuenta que también existe Linux, pero bueno, es lo que normalmente les pasa a los usuarios del Pingüino.

Visto en GoogleOS

Entity Code, códigos HTML para insertar símbolos

entitycode
Entity Code es un sitio donde podemos encontrar los códigos HTML para insertar símbolos en los diseños, no estoy seguro de la definición correcta de éstos códigos, es más, no sé si hay alguna forma de decirlo en español, pero lo de Entity Code no me simpatiza, resumamos en que son los códigos para insertar símbolos en HTML.

Podemos encontrar todos los cógidos organizados por utilidad, ya sea desde símbolos de navegación como flechas, símbolos de moneda, matemáticos, lo más utilizados por los webmasters, etc. Es interesante tenerlo a mano para cuando queremos insertar un símbolo y no conocemos el código correcto.

Visto en Maestro Alberto

Web Page Analyzer, genera un informe con los tiempos de carga de tu sitio

statsWeb Page Analyzer es una herramienta orientada a webmasters donde, ingresando la URL de un sitio web, podemos obtener un completo informe sobre las velocidades de carga de la web. Pudiendo leer el análisis que nos generan para tratar de optimizar esos valores tocando un poco del sitio.

Lo que tienen que hacer es introducir la URL sitio que quieren analizar, o bien directamente pegar el código XHTML si es que así lo prefieren, y luego el sistema generará el informe con los datos obtenidos.

Entre la información que obtenemos, encontramos la cantidad de peticiones HTTP, el tamaño total del sitio, los objetos cargados (JavaScript, CSS, HTML, y demás cosas), ya sea cargados desde el sitio o remotamente, tiempos de carga con distintas conexiones, etc.

Aparte, a lo último, podemos ver una especie de resumen del análisos con recomendaciones de cómo mejorar el sitio en cuanto a performance. Los puntos marcados en verde son los que tenemos bien, los marcados en amarillo son los que tenemos que prestar atención, y por último, los que están marcados en rojo, son los que tenemos que tratar de solucionar lo antes posible, siempre dependiendo del uso que le demos al sitio.

Ya que estamos, les dejo el enlace al post que publiqué hoy, con tips para optimizar y acelerar la carga de WordPress.

Generador de menúes en Flash

flashvortex-menu

FlashVortex es un sitio que ofrece una herramienta para generar menúes en Flash, es una especie de «editor WYSIWYG de menúes en Flash», especial para los que no sabemos nada de diseño y queremos algo rápido. Podemos elegir entre varios estilos de diseños predefinidos y luego modificarlos a gusto, obviamente agregando los textos personalizados, enlaces de destino, cambiando íconos, colores de los botones y fondo, etc.

Una vez que terminamos la personalización del menú podemos descargar el archivo para instalarlo «manualmente», quedense tranquilos que viene con instrucciones, pero si prefieren la vía fácil pueden copiar y pegar un código, que no es más que un script que embebe el menú desde los servidores de FlashVortex.

Es una excelente alternativa para los que no saben de diseño y quieren algo rápido, si bien no es de lo mejor del mundo, me parece que puede servirle a más de uno. Una aclaración importante es que a los menúes les agrega una leyenda de que ha sido creada con dicha herramienta.

Widerbug, el Firebug para monitores widescreen

Uno de los problemas que tenemos los usuarios de Firebug con monitores grandes es que este despliega su interfaz en la parte inferior de la pantalla, lo cual nos resulta muy incómodo y poco productivo, ya que nos queda mucho espacio «a los costados» que en cierto modo es desaprovechado. Pero hoy en Acceso Directo encontré la solución de la mano de Widerbug, la versión de Firebug, pero para los que utilizamos monitores widescreen.

Widerbug, como dije, es lo mismo que Firebug pero optimizado para que el parovechamiento del espacio en los monitores grandes sea lo mejor posible. A mí por ejemplo, con el monitor de 22″ y el Firebug abajo se me hace muy molesto trabajar, pero como van a ver en las siguientes imágenes, con Widerbug la distribución de las cosas aumenta bastante la productividad.

Interfaz de Firebug

firebug

Interfaz de Widerbug

widerbug

Si les queda la duda de cómo instalarlo, lo único que tienen que hacer es desisntalar la versión de Firebug e instalar Widerbug. Y para los que todavía no saben de qué se trata esto, son extensiones de Firefox orientadas a webmasters, ya sean desarrolladores y diseñadores, ya que podemos editar código de un sitio sin que «surta efecto» realmente, es para previsualizar cambios, muy recomendables por cierto.

Monitorear el uptime de tu servidor, una inversión necesaria

Cuando uno se dedica full time a trabajar con sitios en internet llega un momento en el que es importantísimo no dejar que los mismos estén caídos, primero porque no es beneficioso para las visitas, y lo más importante, si es nuestro negocio, que estamos perdiendo dinero mientras el mismo no está online. Por eso creo que es importante que consideren contratar un serivicio de monitoreo de servidores para concoer el uptime de sus sitios y actuar al instante en el caso de que se caigan.

Yo por ejemplo, hace un par de meses que contraté el servicio de Pingdom por un año, aprovechando que estaban de promoción por fin de año, creo que pagué 50% off, y ahora, al ser chequeado cada minuto me notifican si el servidor está caído, ya sea por correo electrónico o a través de un SMS. Varias veces me ha pasado que me llega un SMS avisando que el sitio está abajo y desde el mismo iPhone me encargo de levantarlo sin problemas, sólo es necesaria una conexión a internet.

Obviamente esto lo podemos hacer los que tenemos servidores dedicados o VPS’s, la gente que tiene hosting compartido depende de otros factores, pero es una buena opción que hay que tener en cuenta, si nuestro sitio se cae podemos llamar lo más rápido posible al proveedor de hosting para que tome cartas en el asunto y arregle el problema enseguida.

Redondeando, contratar uno de esos servicios no es un gasto, a la larga termina siendo una inversión que se amortiza con creces, ya sea desde el puto de vista monetario, como el del prestigio que genera un sitio que no está nunca caído.

Les recomiendo que le echen una mirada a la recopilación de 5 servicios para monitorear el uptime de tu hosting.

Ecoder, avanzado editor HTML online

ecoderAcabo de encontrar un excelente y avanzado editor HTML online llamado Ecoder. Es una herramienta interesantísima para esos momentos en los cuales no estamos en nuestra propia computadora y necesitamos editar algún documento con un editor avanzado, no con el Notepad de Windows. Obviamente también sirve para los que no se quieren bajar e instalar alguna aplicación para tal fin, las aplicaciones online siempre nos terminan salvando la vida.

Ecoder es una herramienta totalmente gratuita y liviana que carga al instante, además es, dentro de lo básico, muy avanzado, ya que tiene características como reconcoer la sintaxis y control completo por atajos de teclado. Además se puede instalar en nuestro propio servidor para ofrecer un edito basado en web, lo bueno es que nos deja guardar los documentos en carpetas alojadas en nuestro propio servidor.

ecoder2
Ecoder

Visto en Gekissimo

IPlocals, te dice quién es tu vecino de hosting

iplocals

Si te interesa saber quiénes son tus vecinos de hosting esta herramienta te va a interesar; se trata de IPlocals, donde al ingresar la URL del un sitio web hace un reverse IP para ver qué otros sitios web están compartiendo tu mismo servidor. A la derecha se puede ver la lista de sitios vecinos, y al pinchar en cualquiera de ellos se cargará un preview del mismo.

Visto en FeedMyApp

Cuwhois, excelente combo de herramientas SEO

cuwhoisCuwhois es un sitio que posee una gran cantidad de herramientas de análisis SEO, en su gran mayoría, totalmente gratuitas. Con sólo ingresar el dominio en cuestión el sistema analiza el sitio y nos brinda información muy interesante que nos puede ayudar a optimizar y mejorar nuestra web. La principal funcionalidad es la de generar un informe SEO general de un sitio, sin embargo tiene otras herramienats como:

  • Calcular el precio mínimo de un sitio o proyecto web
  • Encriptar el código fuente de un sitio web para evitar que te lo roben
  • Detección de páginas duplicadas
  • Previsualización de anuncios de AdSense
  • Generador de typos para un dominio
  • IP reverse, para saber qué otros sitios comparten tu servidor
  • Y un largo etcétera