unijimpe » Firefox

Controlar el redimensionado de textarea con CSS

unijimpe — Mon, 26 Sep 2011 03:19:38 +0000

Los navegadores actuales (Safari, Chrome, Firefox) están implementando nuevas funcionalidades para facilitar al usuario la interacción con el contenido. Una de estas características es la habilidad de redimensionar de los áreas de texto o textarea. Ahora veremos como controlar estar características utilizando CSS.

CSS para controlar el redimensionado

El control del redimensionado de los textarea se puede hacer utilizando la propiedad CSS3 llamada resize la cual tiene las siguientes opciones: both, none, vertical, horizontal.

textarea { resize:both; } /* reescalado horizontal y vertical */
textarea { resize:none; } /* desactiva el reescalado */
textarea { resize:vertical; } /* reescalado solo vertical */
textarea { resize:horizontal; } /* reescaldo solo horizontal */

Adicionalmente se podría limitar las dimensiones del reescalado utilizando las propiedades: max-width, min-width, max-height y min-width.

Por ejemplo si deseamos que nuestro campo de texto solo se pueda redimensionar la altura y con un mínimo de 60px y un máximo de 300px de alto.

textarea {
resize: vertical;
min-height: 60px;
max-height: 300px;
}

Esta propiedad esta disponible en las ultimas versiones de Safari, Chrome y Firefox.

© 2006 - 2011 unijimpe - Utiliza este feed solo para uso personal, partes de este feed pueden ser utilizados mencionando al autor, no esta permitido publicar enteramente este feed para uso comercial sin permiso del autor.

Depurar Flash con Firebug

unijimpe — Mon, 16 May 2011 04:57:20 +0000

Depurar flash en el ambiente de desarrollo es sencillo a través del método trace que muestra un texto de forma semejante a la función alert de javascript. El problema radica cuando tenemos que depurar los SWFs ya publicados en una pagina pues trace solo funciona en el Flash IDE.

Creando un trace personalizado

La solución es sencilla, para ello vamos a crear una función en flash llamada tracer que además de hacer el trace normal utilice la función console.log de Firebug con lo cual podemos imprimir el resultado de cualquier parámetro en el navegador.

import flash.external.ExternalInterface;
function tracer(msg:String) {
trace(msg);
ExternalInterface.call( "console.log" , msg);
}

Utilizar esta función es sencilla, tiene la misma sintaxis de la función trace. Por ejemplo si deseamos imprimir un texto tendríamos:

tracer("Start...");

También se puede utilizar dentro de bucles o estructuras condicionales:

for (var i=0; i<10; i++) {
tracer("-> " + i);
}

Otra forma de depurar Flash en el navegador es utilizando la extensión para Firefox llamada Flashbug pero necesita tener instalado la versión Debug de Flash Player, mientras que la versión que hemos presentado es mucho mas sencilla y no requiere instalar extensiones ni otra versión del player. También funciona en Safari pues este soporta el comando console.log().

Depurar Javascript utilizando console.log()

unijimpe — Fri, 13 May 2011 05:14:59 +0000

Tradicionalmente para depurar Javascript se hace uso de la función alert con la cual muestra un texto que contiene el valor de una determinada variable. Pero este método tiene un inconveniente: detiene la ejecución del script hasta que el usuario acepte esta alerta.

Javascript Console

Safari y Firefox con Firebug instalado ofrecen un comando para facilitar la depuración de Javascript, se trata de console el cual imprime el mensaje en el panel de console como se muestra en la imagen que acompaña este artículo.

Existen varios tipos de mensajes que se pueden mostrar:

console.log() muestra un mensaje en la consola.
console.debug() muestra un mensaje y ademas nuestra el número de línea donde se encuentra.
console.warn() muestra un mensaje de alerta con un icono y fondo amarillo para identificarlo.
console.error() muestra un mensaje de error con un icono y fondo en color rojo.

Para mostrar un mensaje se le pasa la cadena de texto que deseamos imprimir:

console.log("-> log");
console.debug('-> debug');
console.warn('-> warm');
console.error('-> error');

También se pueden pasar mas parámetros al estilo de printf y sprintf de PHP, por ejemplo:

var total = 12;
var consulta = "Google";
console.log("Total: %s para '%s'", total, consulta);
// Total: 12 para 'Google'

Utilizando console.log() en otros Navegadores

Ya que console solo esta disponible para Safari y Firefox con Firebug, si pruebas tu desarrollo en Internet Explorer u Opera te generará un error puesta la sentencia console.log() no existe. Para ello se ha propuesto en KeeKim un script para reemplazarlo por opera.portError() en el caso de Opera y alert() en el caso de Internet Explorer.

if (!window.console) {
var log = window.opera ? window.opera.postError : alert;
window.console = { log: function(str) { log(str) } };
}

Más Información

YSlow plugin para Firebug

unijimpe — Tue, 06 May 2008 05:25:39 +0000

YSlow es un plugin para Firebug el cual es una de las mas populares extensiones de Firefox para los desarrolladores web, fue creada por los desarrolladores de Yahoo y tiene como objetivo analizar detalladamente el rendimiento de una página web basado en las Reglas de Rendimiento Web que recomienda Yahoo.

El principal resultado es un análisis del rendimiento de la pagina y luego hace un reporte detallado ademas de recomendaciones necesarias para optimizar adecuadamente nuestros Javascript, CSS y HTML, entre las reglas que aplica para calcular el rendimiento se tienen:

Reducción de peticiones HTTP.
Uso de una Red de Distribución de Contenidos (CDN)
Agregar headers indicando expiración de los elementos.
Utilizar compresión Gzip.
Colocar los CSS al inicio del html (header).
Colocar los Javascript al final del HTML.
Reducir busqueda en los DNS.
Minimizar los archivos Javascript.
Evitar las redirecciones.
Eliminar llamadas a scripts duplicaddos.
Configurar ETags.

Además de ello tiene una opción para ver las estadísticas de rendimiento y una opción para visualizar todos los componentes cargados mediante la pagina. En definitiva con este complemento Firebug se convierte en una potente herramienta de análisis para el desarrollo de paginas web.

FireUploader: Upload en Firefox

unijimpe — Thu, 26 Jul 2007 15:07:02 +0000

FireUploader es una extensión para Firefox que te permitirá subir/descargar archivos directamente a los mas populares servicios de alojamiento. Entre los servicios que puedes manejar se tiene: Box.net, Flickr, Picasa, Youtube, Facebook, Webshots, OmniDrive.

Esta extensión permite subir vídeos a Youtube, subir, descargar y organizar fotos en Picasa, Flickr y Box.net. Esto te facilitará organizar tus archivos con una interfaz muy intuitiva al estilo de un explorador de archivos. Entre las características que presenta este extensión se tiene:

Subir simultáneamente varios archivos.
Visualizar información del progreso de las transferencias.
Muestra los archivos locales y remotos permitiendo subir archivos con un click.
Subir archivos a múltiples servicios con una sola interface.
Soporte para agregar múltiples usuarios para subir archivos independientemente.
Soporte para características de cada servicio.

ColorZilla: ColorPicker Firefox

unijimpe — Wed, 11 Jul 2007 16:03:28 +0000

ColorZilla es una extensión para Firefox que permite tomar cualquier color de un determinado web. Esta extensión agregar un Cuentagotas o ColorPicker al estilo de Photoshop para capturar el color de cualquier elemento de una página web.

Esta interesante extensión te ahorrará el trabajo de tomar un screenshot de la página deseada y abrirla con un editor de imágenes para capturar un determinado color. Luego de instalado el plugin se agregará en la parte inferior izquierda de Firefox un cuentagotas. Al seleccionar un determinado color, los detalles del mismo se muestran en formato RGB, Hexadecimal, muestra el elemento HTML seleccionado. Al hacer click derecho sobre el icono del cuentagotas se podrá copiar el color al portapapeles en el formato deseado, adicionalmente se tienen mas opciones como un zoom.

El punto en contra de este plugin es que no toma los colores de películas Flash. Para instalarlo directamente a tu Firefox debes seguir el siguiente enlace: ColorZilla y tendrás a la mano un muy practica herramienta. Si aun no utilizas Firefox, que esperas a instalarlo, es uno de los mejores Browsers existentes y con los plugins necesarios verás que no lo podrás dejar de utilizar.

FlashTracer: Trace en Firefox

unijimpe — Thu, 21 Jun 2007 15:15:11 +0000

FlashTracer es un plugin para Firefox que permite visualizar los trace hechos en flash. Esto permite depurar de manera sencilla aplicaciones flash que tengan acceso a datos o visualizar si es que se están ejecutando determinadas rutinas en flash. Los textos trazados desde flash se mostrarán en un panel lateral y si lo deseas pueden aparecer en una ventana flotante.

Para el correcto funcionamiento de este plugin se necesita la versión Debug Flash Player el cual tiene funciones adicionales para depuración de archivos flash.

Instalación
Para instalar este plugin, debes acceder a FlashTracer en donde encontrarás un enlace para descargar e instalarlo. Luego de instalarlo reinicias tu Firefox y esta listo para su funcionamiento.

Finalmente hay que comentar que si estas utilizando la versión 9.0.28 o superior de flash player debes cambiar el parámetro outputfile en el panel de opciones de FlashTracer.

Si utilizas Windows la ruta es de la forma:
C:\Documents and Settings\{user}\Application Data\Macromedia\Flash Player\Logs\flashlog.txt

Si utilizas MAC la ruta tendrá la forma:
username:Library:Preferences:Macromedia:Flash Player:Logs:flashlog.txt

Plugins Firefox para Desarrollo

unijimpe — Wed, 14 Mar 2007 06:59:19 +0000

En el proceso del desarrollo web se utilizan diversas herramientas, entre ellas Firefox es parte importante en este proceso pues con algunos plugins adicionales se convierte en una poderosa herramienta de análisis y depuración.

DOM Inspector
El inpector DOM que viene incluido con Firefox es la herramienta básica pero poderosa con la cual se puede buscar y leer el contenido generado por nuestros scripts ya sean de servidor (PHP, ASP, etc) o del lado del cliente (Ajax, Javascript). Con esto podemos analizar a detalle todas las entidades que se pueden utilizar para HTML, Javascript o CSS.

Web Developer Extension
Web Developer Extension es uno de mis preferidos, este plugin permite analizar de forma visual todo el contenido de nuestra web, desde tablas, divs, css, imágenes, etc. Además de ello te permite activar o desactivar CSS para verificar el funcionamiento de las mismas. Visualizar directamente las zonas de los divs, tablas. Ver los detalles del formulario incluso los campos ocultos.

Firebug
Firebug es otra de mis herramientas favoritas, tiene la particularidad de analizar el tráfico de peticiones XMLHttpRequest que son las peticiones hechas en Ajax, además de ello te analiza los javascripts y te muestra si hay errores y es posible hasta visualizar la línea de código donde se encuentra el error. Viene como un analizador DOM, asi mismo te permite analizar errores XML así como de CSS.

Flash Switcher
Otra herramienta es Flash Switcher el cual te permite tener varias versiones de Flash Player instalado y cambiarlos rápidamente, esto para verificar el funcionamiento de las aplicaciones flash en diferentes versiones del player.

Hay algunos otros plugins que utilizo pero en menor medida por ejemplo Charles Web Debugging Proxy el cual junto a otro programa te permite analizar todo el trafico HTTP que tiene tu Firefox, con ello puedes detectar exactamente a que archivos esta llamando cada aplicación.

Nuevo Firefox 2.0

unijimpe — Fri, 27 Oct 2006 09:20:57 +0000

Despues de un periodo de pruebas y correcciones de bugs se acaba de lanzar el Firefox 2.0, esta nuevo versión con muchas nuevas opciones viene a superar todas las muy buenas opciones que actualmente tiene Firefox.

Entre las principales características de esta nueva versión tenemos:

Nuevo diseño mas elaborado y con iconos mas estilizados.
Incluye Phishing Protection con el cual se puede reportar páginas maliciosas.
Capacidades de búsqueda mejoradas, ahora el buscador te sugerirá términos que deseas encontrar.
Navegación por Tabs, ahora adios a las múltiples ventanas, los enlaces externos ahora se abren en nuevo tab.
Guardar tu sesión de navegación, ahora puedes navegar y guardar tus preferencias para luego acceder a tus tabs, formularios y páginas tal cual las dejaste.
Previsualización y suscripción de Feeds.
Corrector ortográfico en linea.
JavaScript 1.7, con soporte para las nuevas propiedades y métodos de la nueva versión de javascript.
Búsqueda de plugins y administrador de plugins mejorado.
Nuevo instalador y actualización al sistema de actualizaciones.

Definitivamente opciones que muchos esperábamos y además como la mayoría de plugins con compatibles podremos seguir usando las mejores características de uno de los mejores browsers del mercado. Desde luego que ahora que se lanzó Internet Explorer 7.0 hay un mejor competidor pero Firefox ha sabido superarse.

Gestor de Descargas Firefox

unijimpe — Thu, 12 Oct 2006 10:36:28 +0000

DownThemAll es un gestos de descargas avanzado para Firefox, este gestor de descargas te permitirá con un click descargar todas las imagenes, videos y/o enlaces que tiene una web, ademas de optimizar la velocidad de descarga puedes gestionar al detalle el avance de las descargas.

Entre las caracteristicas principales se tienen:

Integración completa con Firefox
Guarda paginas completas en un Click
Filtra que formatos no quieres descargar
Opciones para autorenombrar archivos
Incrementa tu velocidad de descarga hasta en 400%
Pausar y continuar las descargas

Este software en freeware, Open Source y libre de Adware, se puede integrar con Mozilla Firefox y con Mozilla Thunderbird para todos los sistemas operativos. Puedes instalarlo directamente aqui.