Utilidades On-line | Joaclint

Archive for the ‘ Utilidades On-line ’ Category

Css Layout Generator: plantillas para la web

Una presentación muy habitual para las páginas web es la que está organizada en una plantilla con el siguiente esquema:

Cabecera (Header)
Columna central (Center Column)
Columna derecha (Right Column)
Columna Izquierda (Left Column)
Pie de página (Footer)

Por supuesto en la configuración pueden estar todos o sólo algunos de estos espacios. Css Layout Generator es una herramienta online -y que pertenece al conjunto de utilidades Css Creator– que facilita la preparación de la plantilla en estilo CSS.

Este es el menú inicial de opciones del que disponemos

En función de los parámetros que vayamos escogiendo se habilitarán unos o se bloquearán otros

Una vez configurada la geometría y los colores de fondo de los espacios pulsamos Generate Layout y el programa nos facilitará dos archivos: uno HTML y otro CSS.

Hacemos clic derecho sobre cada uno y escogemos Guardar enlace como…

En diseño web el estilo CSS puede estar incluido dentro del HTML o ser un archivo independiente que será llamado por el HTML mediante href=»ruta hacia el .css». Esta última opción es lo más conveniente puesto que deja independientes el contenido (HTML) y el estilo (CSS), por eso Css Layout Creator nos da los dos archivos por separado. Una vez descargados podemos cambiarle el nombre al archivo CSS pero también tendremos que cambiárselo en la ruta href del código HTML.

Un ejemplo sería el siguiente en el que la previsualización es esta:

Para obtener un diseño como ese he escogido los siguientes parámetros:

2008: 03/15
CATEGORY: Utilidades On-line
1 comentario

Reflection Maker: añade el efecto de reflejo en la imagen

Reflection maker es una utilidad on line que permite crear el efecto de reflejo muy utilizado en la estética Web 2.0 y también muy usado por Vista.

Esta es una adaptación de la interfaz que se va a encontrar:

Ventajas:

Parámetro para definir la longitud del reflejo (ReflectionSize en %)
Permite subir la imagen desde el disco duro o con URL
Permite introducir el color de fondo que afectará a la transparencia (en hexadecimal)

Inconvenientes:

Sólo exporta en JPG por lo que algunas veces el efecto de transparencia puede no resultar correcto ya que no incluye información relativa a la transparencia (por ejemplo sobre fondos degradados)
No permite elegir la distancia entre el original y el reflejo (esto debe solucionarse con pre o postprodución)
La intensidad del reflejo tampoco es editable.

Este es un ejemplo del efecto que puede conseguir

2008: 02/18
CATEGORY: Utilidades On-line
Deja un comentario

Tabs Generator: pestañas simples (sin CSS) para webs

Tabs generator es una aplicación on line para crear pestañas que sirven para organizar una página web. Las pestañas creadas son estáticas sin ningún tipo de CSS.

Ventajas:

Un cuadro de parámetros verdaderamente intuitivo (en la ilustración se presentan los parámetros que usé para la pestaña del ejemplo final)

Posibilidas de generar color plano o gradiente de dos colores en la pestaña.
Las cuatro posiciones posibles para la colocación de la pestaña

Una vez creada la pestaña y previsualizada hacemos la descarga en PNG (esta es la que he creado yo con los parámetros anteriores)

Inconvenientes:

No permite insertar el texto (en el ejemplo del final los textos están añadidos con post-producción en Inkscape)
No exporta la transparencia en el PNG, aunque permite escoger el color de fondo mediante código hexacecimal

Un ejemplo (texto y avatar son portproducción)

2008: 02/17
CATEGORY: Utilidades On-line
Deja un comentario

3D-box maker: cajas de presentación

Hace unos días abrí un nuevo blog con la intención de ir poniendo una serie de utilidades de carácter on-line. Escribí en él unos post pero la idea no me convence. Pienso que es más interesante y cómodo para mí abrir en este blog una nueva categoría sobre este tipo de herramientas tan propias de la web 2.0 La intención no es sólo informar sobre la existencia de estos softwares sino hacer una pequeña práctica de carácter didáctico para enseñar a usarlos (aunque muchas de estas utilidades son sencillísimas) además de hacer un análisis de sus ventajas e inconvenientes.

Espero que esta innovación les sea de utilidad.

Comenzaré por ir mudando hacia aquí lo poco que tenía escrito en aquel otro blog. Primero una herramienta para hacer cajas de presentación con reflejos: 3d-box maker presentada por 3DPackage On Line

Lo primero que nos encontramos es la posibilidad de acceder a nuestro navegador para ir a buscar las imágenes y así crear una de las cuatro posibilidades de las que dispone la aplicación: box 3d, cd box, dvd box y 3d dvd

Una vez marcadas las rutas sólo tenemos que ordenar que se cree la caja. A partir de aquí se nos ofrece la posibilidad de crear un JPG, un PNG o un GIF. Además nos facilita la URL hacia la imagen.

Imágenes para la práctica: Frente, Lateral, Tapa

Inconvenientes:

No deja rotar la caja ni escalarla (sería cuestión de postproducción -lo de escalarla, claro-)
El PNG no tiene transparencia por lo que la caja queda destinada a estar sobre fondo blanco.
No permite determinar la longitud del reflejo.
Incluye marca de agua de la web que hay que eliminar en postproducción.