Diseño Web, Registro de dominio y Hospedaje Web

viernes, 25 de septiembre de 2009

33 paquetes de iconos para diseño web



Cuando desarrollamos un nuevo sitio web, llega un momento en el cual losiconos son de gran ayuda. Dan mas vida a ciertos detalles y al diseño en sí, destacando por ejemplo la fecha, las categorías o mostrando enlaces a nuestros perfiles en las redes sociales de la actualidad. Por otro lado, una de las tendencias de este año en el diseño de sitios es la de acompañar las opciones de un menú con estas imágenes, así que es ideal saber donde encontrarlas.

En Appstorm publicaron una recopilación con 33 paquetes de iconos para diseño web, que bien pueden utilizarse para otros proyectos. La lista cuenta con una gran variedad, así que vale la pena visitarla. Se incluyeniconos sociales, de aplicaciones, navegación y algunos relacionados al mundo del blogging.

También puedes leer...

    Mas de 25 paquetes de iconos sociales
    10 paquetes de iconos para diseño web
    25 sitios de iconos gratuitos para diseñadores
    10 paquetes de iconos estilo grunge
    25 paquetes de iconos para diseñadores

Como crear una Web para diferentes resoluciones"


Para poder adaptar una página web y que se pueda ver a diferentes resoluciones tenemos que usar tamaños relativos, ésto se consigue por norma general definiendo un tamaño relativo a la etiqueta body, así la página se ajustará automáticamente al tamaño de la ventana o pantalla del usuario, usando CSS (que es lo más practico) el código sería:

body{width:100%;}

En el caso de usar porcentajes más pequeños, del 80% por ejemplo, tendremos que centrar el body para que no seo vea pegado a un lado, con:

margin:auto

quedaría sí:

body{width:80%; margin:auto;}

Para tamaños relativos hay que usar porcentajes ya que si usamos unidades em el tamaño será fijo. Por otro lado es conveniente determinar un tamaño mínimo con la propiedad min-width, de ésta menera nos aseguramos que la página no sea tan pequeña que sea imposible leerla, el problema es que ésta propiedad no funciona en Internet Explorer:

body{width:80%; margin:auto; min-width:500px;}

martes, 15 de septiembre de 2009

Engaña a los robots buscadores de email.


En nuestras páginas web solemos colocar nuestra dirección de correo electrónico como un método para que nuestros visitantes se pongan en contacto con nosotros. Pero como efecto secundario nos convertimos en víctimas del spam. Y es que existen programas capaces de buscar emails dentro de las páginas web.

La solución

Para evitar ser víctimas de estos robots buscadores de email podemos usar Javascript para disimular nuestra dirección dentro de la página. Basta con hacer uso del método document.write( ) para colocar nuestra dirección en lugar de hacerlo directamente con etiquetas HTML.

Un caso práctico

En este ejemplo suponemos que el email es correo@servidor.com, como ves está formado por dos partes: un nombre (correo) y una dirección de servidor (servidor.com). En el sitio donde quieras que aparezca el enlace a tu correo colocas el siguiente script:

<script language="Javascript">
nombre = "correo";
serv = "servidor.com";
ar = "@"
document.write('<a href="mailto:correo' +nombre+ ar + serv+' ">');
document.write("Escríbeme a "+ nombre + ar + servidor);
document.write("</a>");
</script>

Sólo tienes que colocar tu propio nombre y servidor de correo para que esto te funcione, y procura no abreviar. O sea, no hagas por ejemplo correo = "correo@servidor.com", un robot lo detectaría y no adelantas nada.

¿Como cambiar el contenido de un IFrame de forma dinamica?


Como sabes mediante los IFrames son marcos parecidos a los Frames, pero con la enorme ventaja de poder colocarlos en cualquier parte de tu página !incluso dentro de una tabla! Y lo que es mejor: puedes cambiar su contenido de forma dinámica. La pregunta es evidente ¿Como cambiar lo que se muestra dentro del IFrame?

La solución

Pues la solución es de lo más simple, piensa que un IFrame es una página ¿como cambiar su contenido? pues con la propiedad location. El IFrame muestra la página que asignes a esta propiedad. Así de fácil. En general:

document.frames.nombre.location = url

donde nombre es el id del iframe y url es la página que quieres mostrar en él.

Un caso práctico

Para que veas como funciona esto construye dos páginas, una que se llame hola.htm y otra que se llame adios.htm. La primera contendrá tan solo la frase HOLA MUNDO y la segunda ADIOS MUNDO. Es que nos gusta ser originales. Y ahora viene la aplicación de este truco o miscript: Crea una página con el nombre frames.htm el contenido de este archivo será

<html>

<head>

<title>IFrames dinámicos</title>

<script language="javascript">

function modiframe(destino)

{

document.frames.marco.location=destino

}

</script>

</head>

<body>

<a href="javascript:modiframe('adios.htm')">Cambiar Iframe</a>

<p></p>

<iframe id="marco" width="300" height="400" src="hola.htm">

Este es el IFrame

</iframe>

</body>

</html>

Verás una página con un link que pone Cambiar Iframe y más abajo un marco iFrame con el contenido de la página hola.htm, al pulsar sobre el enlace este contenido cambiará al de la página adios.htm . Más fácil imposible, ¿verdad?