Saltar al contenido

Categoría: Desarrollo web

Extensiones de Firefox recomendadas para el desarrollo web

Soy usuario de Firefox desde sus inicios y cuando empecé a trabajar como desarrollador web en Caniatech, descubrí una gran cantidad de extensiones (la mayoría gracias a su lista de complementos favoritos) que permiten transformar este navegador en una maravillosa herramienta indispensable para cuando se está creando páginas/sistemas web (si fanáticos de Chrome, se que se puede hacer lo mismo con ese navegador). Así que aquí les dejo una lista de las extensiones que recomiendo instalar si trabajan en el desarrollo  (y tal vez un poco de diseño) web.

  • Firebug: para mi es el complemento mas importante e indispensable de esta lista. Esta herramienta permite: excelente análisis y modificación en tiempo real del: código HTML, clases de estilos, permite ver y correr paso a paso (debug) del código Javascript, mostrar la cantidad de errores JS, entre otros.
  • FireQuery: agrega compatibilidad entre jQuery y Firebug, se pueden observar funciones asignadas a ciertos elementos del markup, entre otros.
  • FirePHP: agrega compatibilidad con php  y permite a los desarrolladores imprimir datos en la consola de Firebug, muy útil cuando se esta creando aplicaciones con Ajax.
  • PixelPerfect: otro complemento compatible con Firebug, el mismo, permite sobreponer imágenes en cualquier página, con la idea de comparar el sitio que se está desarrollando respecto al diseño original,útil cuando se estan escribiendo las clases de estilos y se desea lograr una apariencia exacta al diseño dado.
Firebug dentro de Firefox con el plugin de jQuery
  • Html Validator: permite chequear si las páginas web cumplen el estándar XHTML/HTML, necesario para comprobar que tenemos un buen markup Html, evitando futuros problemas de renderizado y permitiendo obtener un mejor SEO.
  • Messure it!: agrega una regla virtual al navegador para medir la distancia exacta (en pixels) de una distancia o área, muy usada en la etapa de diseño y escritura del CSS (sobre todo si se combina con PixelPerfect.
  • Dummy Lipsum: permite generar extractos del texto Lorem ipsum e insertarlo en cualquier campo de un formulario, pues como todo profesional de desarrollo web, sabemos lo feo el uso de texto al azar para probar campos de texto.
  • Lazarus Form: evita la pérdida de los datos dentro de un formulario, útil cuando estamos probando un formulario, rellenamos cada uno de los campos pero algo sale mal y se pierde esa info, pues con este complemento no volverá a suceder lo mismo.
  • Wappalyzer: excelente complemento que informa sobre las tecnologías usadas en un sitio, cuando entras a una página, muestra unos íconos en la barra de estado de los programas o librerías usadas (ejem, jQuery, WordPress, Google Analytics, etc)
Greasemonkey, Html Validator (icono verde) y observer como muestra para este blog las tecnologías que uso: WordPress, Google Analytics y Jquery
  • Web Developer: un gran conjunto de herramientas y opciones a utilizar cuando se desarrolla un sitio web, permite ver errores de javascript, activar o desactivar: estilos, plugins, javascript. Posee una barra acceder a las herramientas rápidamente, permite ocultar/mostrar tablas, imagenes, fondos, etc. Indispensable para cualquier desarrollador web.
  • ColorZilla: permite obtener el color de cualquier pixel de la página, útil para tener el color en hexadecimal de una imagen y escribirlo en el CSS.

Bueno, estos son los complementos mas utilizados por mi cuando creo páginas, si creen que faltan alguno y desean recomendarlo, no duden en comentar. Ademas, si les interesa que complementos uso a diario, pueden ver mi lista.

Deja un comentario

Excelentes 30 tips de desarrollo web para principiantes

NetTus+ publicó un artículo muy interesante sobre 30 consejos que se deben seguir para el desarrollo web, todos son excelentes y altamente recomendados para cualquier persona interesada en esta área o que ya lleve muchos años trabajando en ella. Estos consejos estan dirigido principalmente a principiantes para que desde los inicios lleven a cabo buenas prácticas, sin embargo, recomiendo a cualquiera leerlos porque aquellos que tenemos tiempo en el desarrollo web, aún conservamos malas prácticas (después de este artículo pienso eliminar casi todas) y es recomendable conocer cuales son.

El artículo está en inglés en el siguiente enlace: 30 HTML Best Practices for Beginners

Deja un comentario

Facebook libera su propio entorno de ejecución para PHP

Hoy salió a la luz una noticia importante para todos aquellos desarrolladores de PHP, pues Facebook acaba de mostrar su entorno de ejecución de PHP con el fin de optimizar hasta un 50% o más (dependiendo de los casos) la ejecución de scripts en este lenguaje. Tal vez le parezca un poco de optimización pero cuando eres una empresa grande como Facebook que cuenta con 50000 servidores aproximadamente y sirve a 300000000 de usuarios, un 50% mas de rendimiento por el mismo hardware, es bastaste.

Lo que hizo esta gente es crear un traductor de PHP a C++, donde luego se compila a lenguaje de máquina utilizando G++ (el compilador GNU de C++), permitiendo «migrar» aplicaciones PHP a lenguaje de máquina y ejecutarse con mayor velocidad, obviamente se pierde las voluntades del lenguaje dinámico e interpretado  junto a la eliminacion de algunos comandos que no se pueden adaptar a C++, como el caso de eval() que evalúa código PHP en tiempo de ejecución, el uso de $$ y otras funciones mas.

En el screencast del lanzamiento su creador comentó que este proyecto no busca sustuir el entorno de ejecución de PHP ni hacer que la gente compile todo a C++, sino que en ambientes de alta demanda, utilizar PHP con servidores web tradicionales en el momento de desarrollo y luego cuando se esté listo para producción compilarlo en C++ y obtener mayor rendimiento.

Cabe destacar que HipHop PHP también es un servidor web para servir estas páginas generadas y que se esta trabajando en un interprete para PHP, sin embargo es muy temprano para dar opiniones ya que apenas hoy se hizo el anuncio y liberación del codigo en Github , esperemos a ver que ofrece el futuro del proyecto de código abierto.

Mas informacion: https://developers.facebook.com/blog/post/2010/02/02/hiphop-for-php–move-fast/

Deja un comentario

jQuery Archive List Widget

Para los lectores / amigos que me leen, saben que siempre en las vacaciones suelo programar algo por diversión como: el resolvedor de sudokus, el cheater para Word Challenge, el Skate or Dice para el PSP. Pues esta vez realicé un widget para WordPress utilizando la librerí­a jQuery, el cual consiste en mostrar los archivos de los artí­culos en una lista contraida, al hacer clic en cada uno de los items se despliega el contenido con un efecto de acordeón o de desvanecimiento tal como se puede observar en la sección de Archivos en la parte izquierda de esta página.

Entre las principales caracterí­sticas que posee son:

  • Utiliza el script de jQuery de WordPress por lo que no sobrecarga las páginas.
  • Sencillo y fácil de configurar.
  • Permite mostrar o no la cantidad de artí­culos por año o mes.
  • Permite mostrar o no los artí­culos que hay en cada mes.
  • Permite seleccionar el formato del mes a mostrar.
  • Se puede utilizar dentro de páginas o artículos.
  • Seleccionar efectos de jQuery.
  • Carga el script en un archivo separado para mejor ejecución y permitir guardarlo en caché.
  • Permite seleccionar el sí­mbolo de la viñeta.

Sé que es sencillo y no ofrece mucho, pero dependiendo del uso y si pueden colaborar con donaciones podré dedicarle mas tiempo con el fin de agregar mas caracterí­sticas configurables. Por ahora, pues descárguenlo e instálenlo, cualquier sugerencia o corrección pueden hacerlo por mensaje privado y/o un comentario en esta entrada.

La licencia del mismo es GPL2 y pueden descargarlo desde el siguiente enlace:

https://wordpress.org/extend/plugins/jquery-archive-list-widget/

Si les gustó mucho el widget y desean colaborar con el desarrollo de futuras versiones pueden ayudar con una donación libre usando el siguiente botón.

Cambios en las versiones: Leer los cambios de esta versión

Contribuye con la creación de este plugin

5 comentarios