|

Botones: Distintas formas de enviar un formulario

input-image.gif Existen distintas formas de enviar los datos de un formulario a la aplicación web que se encarga de procesar la información. Todos los métodos son igualmente válidos, y va según los gustos usar unos u otros.

Los formularios dentro de HTML disponen de sus propios elementos para enviar los datos al formulario. El elemento en cuestión es el input, el cual según sea su atributo type, podemos enviar los datos directamente con el elemento submit o podemos reiniciar los valores de los elementos del formulario con el botón reset.

<input type="submit" value="Enviar" />
<input type="submit" value="Reiniciar" />

En los formularios de Sentido Web usamos los elementos input con el type=”imagen”. Este elemento usa una imagen como elemento submit, devolviendo la posición x e y de la imagen donde se ha producido el evento:

<input name="preview" type="image" align="top" value="Revisar" src="http://sentidoweb.com/i/bt/bt-revisar.gif" />
<input name="post" type="image" align="top" value="Publicar" src="http://sentidoweb.com/i/bt/bt-publicar.gif" />

Cuando se usa esta posibilidad, se enviarán dos parámetros al script usando el texto que hayamos usado en el atributo name, se le añade un _x para la coordenada x y un _y para la coordenada y, en el caso de Firefox también manda el parámetro sin sufijo. En el caso anterior, para saber cual de los dos se ha pulsado, se comprueba si hay parámetro preview_x o preview_y para el primer caso y post_x o post_y para el segundo caso.

Siguiendo con el elemento input, podemos usar el botón (type=”button”), pero habrá que añadirle el evento onclick para que haga el submit.

<input type="button" value="Enviar" onclick="document.forms[0].submit()" />

Otra forma distinta es mediante el uso de un enlace, en el href o en el onclick se deberá escribir el código Javascript necesario para el envío del formulario:

<a href="javascript:document.forms[0].submit()">Enviar</a>

Y por último, pero no por ello menos importante ;), mediante la pulsación de la tecla intro en una de las cajas del formulario. Esto lo realizan normalmente los navegadores cuando dentro de un formulario hay alguna forma estándar de hacer el submit, pero en el caso de que no queramos poner botón de submit, tendremos que ejecutar el siguiente código en el evento onkeypress de la caja:

<input name="nombre" onkeypress="if (event.keyCode == 13) document.forms[0].submit()"/>
| | | |

Laboratorio: Recorta imágenes dinámicamente con PHP y HTML

En muchos sitios web de almacenamiento de imágenes se nos permite retocar las imágenes. Hoy vamos a explicar como recortar una imagen directamente desde una página web.
crop.png
Para ello tenemos que crearnos una página web que nos permita seleccionar la zona de la imagen que queremos recortar y de un script PHP que usando la librería GD recortará la imagen y la devolverá en formato PNG.

Read More “Laboratorio: Recorta imágenes dinámicamente con PHP y HTML”

| | |

Ponle copyright a tus imágenes mediante PHP

copyright.png Muchas veces queremos que las personas se descarguen las imágenes que tenemos en nuestras páginas web, pero también queremos que quede bien claro quién es el autor. Para ello podemos editar todas las imágenes que tengamos, o bien que el propio entorno se encargue de poner el copyright por nosotros.

El método es sencillo, modificamos las opciones del Apache para que cuando se acceda a una imagen, lo redireccionemos a un script que se encargará de escribir el texto que queramos.

Read More “Ponle copyright a tus imágenes mediante PHP”

| |

Cómo crear márgenes según un contorno

Margen asimétricoHace unos días comentábamos sobre cómo realizar márgenes redondeados, prometimos al final de la entrada que íbamos a explicar paso a paso el proceso, por si hubiera alguien que le pudiera parecer insuficiente lo que se contaba en el artículo.

Se trata de colocar una imagen como fondo de un párrafo, si es necesario, se retocará para que tenga el fondo transparente o del mismo color que el fondo de la página, luego se crearán elementos html que se colocarán encima de la imagen del fondo, para evitar que se escriba el texto encima.

Read More “Cómo crear márgenes según un contorno”

| |

Protege tus imágenes con Apache

Una de las cosas más molestas con las que te puedes encontrar al mantener un sitio, es ver cómo tus imágenes estan siendo utilizadas en otros sitios que las enlazan directamente a tu servidor, esto es molesto por dos motivos, evidentemente el uso de material gráfico de tu propiedad sin tu consentimiento, y la carga extra que sufre la conexión de tu página.
Para los que usamos Apache existe una fácil solución combinándolo con mod_rewrite, el método se basa en crear un fichero .htaccess que contenga una serie de reglas, que literalmente le indicarán al servidor que las imágenes solo se mostrarán si la petición viene del dominio propio.
Las reglas a añadir son las siguientes. Solo tendrás que sustituir el texto example.com por el nombre de tu dominio:

RewriteEngine On
RewriteBase /
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^https?://(www\.)?example.com/?.*$ [NC]
RewriteRule \.(gif|jpg|jpeg|png|mp3|mpg|avi|mov)$ - [F,NC]

Optimiza tus imágenes con PngOptimizer

Si te preocupan cosas como el ancho de banda, el espacio en el servidor o los tiempos de descarga, **PngOptimizer** te enamorará.
Se trata de un software gratuito —solo Windows— que nos permite reducir el tamaño de las imágenes para su uso en la web. Impresiona por el tamaño de la descarga (solo 163 KB) y su facilidad de uso: para optimizar una imagen basta con arrastrarla desde el explorador de archivos hasta la ventana de la aplicación.
Y por el mismo precio —cero euros—, incluye una versión para línea de comandos que te resultará muy útil en procesos por lotes.
Optimicemos, amiguete: PngOptimizer.

|

Crear botones de suscripción con Photoshop

Puede que alguna vez te hayas preguntado cómo hacer uno de esos “minibotones” que aparecen en algunos sitios indicando la suscripción RSS, pues es tan sencillo como dar tres pasos en photoshop.
Creamos un archivo nuevo de las dimensiones deseadas, yo para el ejemplo uso una imagen de 22 pixels de ancho por 11 de alto.
Elegimos los colores que vamos a usar, en este caso he escogido dos tonos de naranja, #E39207 y #FFAE00
Seleccionando el color más oscuro, trazamos un borde de 1px de ancho por toda la imagen, seguidamente seleccionamos la herramienta de borrado y quitamos 1px de cada esquina dejando una imagen como esta border-rss-01.gif
El siguiente paso será hacer una selección de toda la parte interior del recuadro y realizar un degradado desde el extremo superior de la imagen hasta el extremo inferior gradient-rss-01.gif
Solo nos queda añadir el texto, lo hemos hecho píxel a píxel, y tendremos un atractivo botón para decorar nuestra web. button-rss-01.gif

| |

Recursos para crear bordes redondeados

nifty.pngPara aquellos que quieran usar bordes redondeados y no se vean capaces de hacerlo, pueden usar varias herramientas.

Una de ellas, es Nifty Corners Cube. Sólo se necesita importar un script, importar una hoja de estilos y realizar una llamada Javascript.

Otra opción, quizá más sencilla y que nos gusta especialmente, es el generador de cajas de bordes redondeados de los catalanes de Neurotic Web. Solo tienes que elegir los colores y te genera automáticamente el código CSS y XHTML. Después subes las imágenes a tu servidor cuidando que la ruta del código de las imágenes en la CSS coincida y listo.

Y por último, Spiffy Corners, el más reciente en aparecer. Otro generador que te lo da todo con la novedad de que no incluye javascript ni imágenes para los bordes redondeados.

Para conocer otras opciones, un post a estas alturas ya muy leído pero que quizá no conozcas: CSS Rounded Corners ‘Roundup’.

|

Cómo extraer colores fuera del Photoshop

eyedropper.jpg ¿Cuántos minutos trabajas al día con Photoshop y te has visto en la situación de querer saber un color de otra web y tener que usar el Colorzilla de Firefox o directamente imprimir pantalla, pegarla en Photoshop y usar el eyedropper.?
Pues Photoshop, en cualquier versión, ya trae la opción y es el mismo Eyedropper (el icono del cuentagotas). Tan solo hay que clickarlo y dejarlo pulsado arrastrando el cursor hasta donde queremos obtener el color. Cuando lo tengamos, soltamos el click y aparecerá el color como color de primer plano.
Vía / Genbeta

|

Sanscons, iconos modificables mediante CSS

Una colección interesante de iconos que cambian de color mediante CSS, a parte de la colección, es interesante aprenderse el método y usarlo para tus propios diseños.

Sanscons.png

El método es sencillo, crear una imagen con el contenido en un color blanco (para que sea más sencillo ajustarlo con otros colores) y poner el fondo transparente, así, si se cambia el fondo mediante CSS, cambiará el fondo del icono.

 <img class="icon" src="icono.gif" alt="icon"/>
 .icon {
background-color:#f00;
}

Sanscons

Vía / Intenta