saltar intro » Trucos

Hachetemelear o como convertir texto en html etiquetado

sergiomas — Sun, 14 Feb 2010 12:21:34 +0000

Esta es mi pequeña utilidad para adelantar procesos de copiado de texto, pegado y adicción de etiquetas html.

Puedo copiar de word, excel, pdf, etc. y tras pasar por Hachetemelear pegar el resultado en la vista código de un html.

Y sobre todo evito que aparezcan los formatos de word, por ejemplo, o la separación de párrafos con BR.

Es una aplicación sencilla y sin grandes pretensiones. Lo interesante sería poder mantener ciertos formatos como la negrita y la cursiva.

Para la siguiente versión.

Un curioso comportamiento en las ventanas de abrir o guardar, en Windows Vista

sergiomas — Wed, 28 May 2008 19:33:36 +0000

photo credit: jauhari

El caso es que cuando en un programa tengo abierta la ventana de diálogo para cargar un documento o también para guardarlo, y antes de hacerlo, accedo a una ventana del explorador, al volver a la ventana de diálogo, esta a actualizado la ruta por la misma que aparecía en el antedicho explorador.

Por poner un ejemplo:
Tengo abierto el explorador mostrando una carpeta llamada ‘fotos’.
Ejecuto Photoshop, y pulso la opción para abrir documento.
se abre la ventana de diálogo para seleccionar una imagen, pero estoy en la carpeta que abre Photoshop por defecto.
Sin cerrar la ventana de diálogo, con alt+tab accedo al explorador.
Vuelvo a Photoshop, también con alt+tab, y …
Tachan¡¡¡ La ventana de diálogo ha actualizado la vista mostrando la carpeta ‘fotos’.

¿Será un bug?

Centrar una web, vertical y horizontalmente, con CSS y sin tablas ni efectos secundarios.

sergiomas — Sat, 24 May 2008 10:46:44 +0000

Para concretar desde el principio, este tip-tutorial describe como centrar un elemento de bloque, un div en este caso, de dimensiones fijas y que puede albergar un sitio web, en medio de la ventana de un navegador, tanto vertical como horizontalmente.

Lo que tiene de especial este artículo con respecto a otros de la misma temática, es que resuelve lo que vengo a llamar “efectos secundarios”, y me refiero al molesto comportamiento del div cuando redimensionas el navegador y parte de la web queda oculta sin que se pueda acceder a ella con las barras de scroll, no por que no estén si no por que no dan de sí.

Desde ahora me referiré al div#contenido como “Web“.

Para los más impacientes aquí está un ejemplo de web centrada vertical y horizontalmente, y a continuación el código xhtml/css:





Centrar una web en el navegador, vertical y horizontalmente, siempre visible y sin usar tablas





    
        CENTRAR UNA WEB
         ...

Ahora vienen las explicaciones.

La manera más fácil de centrar una Web es darle al tag html y body una altura (height) de 100%, añadir una tabla de una sola celda con alineación vertical y horizontal, y colocar dentro un div de dimensiones fijas.

Rápido, sencillo, y alejado de las buenas prácticas. ¿Por qué? Por que no se debe utilizar una tabla para maquetar una web, pues no es su cometido. Las tablas sirven para presentar datos de forma tabular.

Semánticamente, los tags dentro de una tabla disminuyen su valor específico de cara a buscadores, y los lectores de pantalla para discapacitados escupen una cantidad de información deslabazada casi imposible de entender, por poner un par de ejemplos.

Asi que el reto era crear una plantilla de partida que utilizara solo CSS.

El archivo html inicial sería así:





sin título



    
        CENTRAR UNA WEB
         ...

Es muy importante incluir el Doctype adecuado por que de ello depende que los navegadores interpreten correctamente el CSS posterior.

En mi ejemplo he utilizado XHTML Transitional, pero creo que funcionará igualmente el Strict.

La mayoría de soluciones que encontré en Internet se pueden resumir así:

#contenido {
    position:absolute;
    width:700px;
    height:500px;
    top:50%;
    left:50%;
    margin-top:-250px;
    margin-left:-350px;
}

Se da posicionamiento Absolute al div contenedor. Se establecen sus dimensiones. Se posiciona su esquina superior izquierda justo en el centro de la pantalla. Y mediante un margen negativo igual a la mitad de sus dimensiones se rehubica centrado en pantalla.

Y funciona. Pero …

En caso de hacer más pequeña la ventana cliente del navegador que el tamaño de la Web, aparecen los efectos secundarios:

El defecto es más acusado cuanto más disminuye la ventana del navegador.

Y se da tanto vertical como horizontalmente. Esto es así a causa de que el posicionamiento, por ser absoluto se situa independiente de la lista de elementos del código, y aunque tiene el centro en la página, los márgenes negativos pueden situar la web fuera de la vista de la ventana.

La solución es muy simple pero no funciona en Internet Explorer 6 y predecesores, (aunque esto también se resuelve después).

Simplemente hay que darle al bloque contenedor de la Web, en mi caso el propio Body, un ancho y alto mínimos, igual al tamaño del bloque #contenido.

html, body {
    height:100%;
    margin:0;
}
body {
    position:relative;
    min-width:700px;
    min-height:500px;
}

Lo de la posición relativa permite que algún navegador, no recuerdo cual, interprete correctamente dichos ancho y alto mínimos.

Ahora el resultado de redimensionar el browser cambia aparentemente el comportamiento de la Web de una posicion centrada a otra fija desde la parte superior izquierda.

La visualización es correcta en Internet Explorer 7, Firefox, Opera, Safari, y en el extinto Netscape (incluso en la versión 7.2 que usaba un motor para renderizar diferente al de Firefox).

Pero en IE6 y también en IE5.5 (no quise remontarme más allá) no funciona, no hay soporte para ancho y alto mínimos. No interpretan el min-width y el min-height. Y no conseguí que ningún hack css funcionara correctamente.

Esas versiones del browser de Microsoft son importantes, sobre todo la 6, por que actualmente es la que tiene más presencia en Internet.

Lo ideal sería que todo se resolviera solo con CSS, pero su inacabada implementación en algunas versiones de Internet Explorer hacen tarea imposible dicho propósito.

Asi que “Para problemas propietarios soluciones propietarias”.

Gracias a los comentarios condicionales y a unos scripts propiedad de Microsoft, solo interpretados por IE, se logra el milagro.

Las expresiones incluyen un condicional terciario que cambia los valores de los parámetros CSS en función de las proporciones de la ventana cliente del navegador.

No deja de ser un parche, pero funciona y permite validar el XHTML y el CSS de la página.

Si alguien encuentra alguna manera de hacerlo todo con CSS, sin hacks, ni soluciones propietarias, que deje un comentario.

Me encantaría hacer un UPDATE al post y seguir aprendiendo.

Atajo para seleccionar una capa de Photoshop dentro de un grupo

sergiomas — Thu, 01 Feb 2007 10:53:26 +0000

En Photoshop/Windows hay una manera rápida de seleccionar una capa determinada de la paleta Capas simplemente manteniendo pulsada la tecla control y pulsando con el botón izquierdo del ratón sobre el elemento de la imagen que te interese.

Pero si la capa forma parte del contenido de un grupo de capas al ejecutar este atajo de teclado/ratón en vez de seleccionar la capa que te interesa se selecciona la capa que contiene el grupo y claro, eso no es lo que quieres.

Pues bien, existe otro atajo que permite seleccionar exactamente la capa que te interesa, esté en la línea de capas principal o dentro de un grupo, y es mantener pulsadas las teclas de Control y Alt al mismo tiempo que seleccionas con el botón derecho del ratón el objeto que deseas destacar.

(Truco descubierto al azar, probado en Photoshop CS2, en WindowsXP).

Asignar un valor a una variable construida con eval().

sergiomas — Sun, 21 May 2006 09:33:10 +0000

En Actionscript v.1 a veces nos gustaría asignar un valor a una variable de la siguiente manera:

eval(“_root.mivar”+(i-1)) = 100; // da error

Pero esto no funciona, salvo que lo hagamos de otra manera. A saber:

set(“_root.mivar”+(i-1), 100); // ok

o también,

_root["mivar"+(i-1)] = 100; // ok

Para casos del tipo:

eval(“_root.movie”+(i-1)+”._alpha”) = 100; // da error

que tampoco funciona, si se puede utilizar eval() con una pequeña variante:

eval(“_root.movie”+(i-1))._alpha = 100; // ok

Problemas al exportar como imagen

sergiomas — Sat, 29 Apr 2006 04:59:05 +0000

Cuando exportas un trazado a imagen, por ejemplo, al formato eps, Flash establece los límites de la imagen donde haya puntos de trazado.
Si estos definen una curva que se extiende más allá de dichos puntos, Flash recortará la imagen exportada ocultando esas curvas.
La solución pasa por crear un marco exterior que rodee por completo el trazado a exportar.

Redescubriendo un atajo de teclado

sergiomas — Mon, 03 Apr 2006 16:04:45 +0000

En una entrada anterior hablé de un atajo de teclado que consistía en que situando el cursor dentro de la vista de código del IDE de Flash y pulsando la combinación de teclas ‘Control’ + ‘acento’ (´), si estabas dentro de un bloque de paréntesis, corchetes, o llaves, se seleccionaba todo el contenido dentro de ese bloque.

Pues bien, si sigues dándole al atajo de teclado, se va ampliando la selección hacia los bloques ‘padre’ si es que estos existen.

A veces para testear sintaxis de código con scripts anidados o fórmulas complejas viene de perlas.

Abrir el Internet Explorer a pantalla completa

sergiomas — Thu, 24 Nov 2005 09:34:03 +0000

No sabía que se pudiera hacer, pero puede ser interesante para algún tipo de proyecto que necesite abrir un explorador web a pantalla completa y sin mostrar ninguna barra de menú o de estado.

En Windows con el IExplorer, teclear en una línea de comandos, o a través de un archivo ‘.bat’ lo siguiente:

iexplore -k http://www.eldominioquequieras.com

Sustituyendo ‘www.eldominioquequieras.com’ por la página web que quieras.

Visto en: Mixmedia

Compatibilidad hacia atrás para la aceleración personalizada

sergiomas — Sat, 15 Oct 2005 15:34:17 +0000

Antes del Flash8, cuando realizabas una interpolación de movimiento a un movieclip, y querías que tuviera efectos de aceleración o deceleración, tenías que crear fotogramas clave intermedios y aplicarles diferentes valores de aceleración en el correspondiente panel de propiedades.

Si cambiabas la posición final de ese MC, pero querías mantener los efectos de movimiento, primero debías borrar los fotogramas clave intermedios y volver a crearlos de nuevo, pero ahora relativos a la nueva posición final.

Un rollo, vaya.

En Flash8, con la nueva ventana de Aceleración/deceleración personalizada, ya no es necesario crear fotogramas intermedios para obtener resultados mucho más vistosos; pero lo realmente interesante también, es que si editas una película que está optimizada para el Flash Player 6 con esta nueva característica, podrás seguir publicándola para dicho flash player.

Retrocompatibilidad.

Atajo de teclado para editar en contexto

sergiomas — Fri, 14 Oct 2005 14:42:03 +0000

Seguramente hay tantas formas de trabajar como diseñadores, pero también hay muchos trucos o tips que encajan sólo a algunas formas de trabajo.

Cuando encuentro que en mi modus operandi repito alguna acción con bastante frecuencia siempre ando buscando la manera de ser más ahorrativo.

Uno de los atajos que me he creado en Flash, y que no viene en la configuración por defecto es el relativo a ‘editar en contexto’ que está en el menú Edición.
Cada vez que señalo un movieclip y lo quiero editar, pulso Control+Mayúsculas+E y zass, ya estoy dentro.