Archive for category: html

03Oct 2009 0 Comments

Fuentes en mi página web

Categories: CSS, html, Otros - Tags: ,

Primero debemos ver que las fuentes que podemos utilizar en el texto de nuestra página web esta limitado a muy pocas opciones y aún de estas no todas deben utilizarse debido a que no están diseñadas especificamente para web o porque no todo el mundo cuenta con estas.

Las únicas fuentes optimizadas para web son Verdana y Georgia; la primera fue diseñada como reemplazo de Arial(fuente por defecto de Windows) esta fuente cuenta con gran legibilidad y fue diseñada especificamente para funcionar en monitores, la segunda opción es Georgia que es una fuente diseñada para reemplazar a Times New Roman. Comic Sans es una fuente con poca legibilidad que no cumple estándares de diseño por lo que nunca debe ser utilizada.

Arial
  
Verdana
  
Times New Roman
  
Georgia

Podriamos asignar otros tipos de fuente de las cientos que tenemos instaladas en nuestro sistema pero no todos los usuarios las tienen y recordemos que nuestra página debe lucir igual no solo en pc sino también en mac, iphone, celulares hasta en el PS3 :) opciones tan limitadas podrían parecer insuficientes sin embargo si usamos imágenes para reemplazar títulos y combinamos los gráficos adecuados veremos que esta “limitación” no lo es tanto.

¿Cómo asignar tipo, color y tamaño de fuente?

Normalmente esto se hace en la hoja de estilos para ser más precisos en la sección body, con un código como este:

1
2
3
4
5
body {
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px;
    color:#333;
}

Con font-family asignamos no sólo un tipo de letra sino algunas para que la reemplacen en caso esta no este instalada, fon-size me da el tamaño y el último parámetro el color para el cual no conviene usar negro sobre fondo blanco porque tiene mucho contraste mejor es usar un gris oscuro.
Es posible asignar un tipo de fuente distinto para ciertas secciones como menus, titulos, etc aunque se recomienda sólo cambiar el tamaño y no el tipo de fuente por un tema de mantener uniformidad y coherencia.

1
2
3
4
5
h1 {
    font-family:Georgia, Times New Roman, Times, serif;
    font-size:16px;
    color:#333;
}

¿Cómo usar fuentes no instaladas?(Font Face)

Aunque este truco nos permita usar fuentes que el usuario no tenga disponible debemos considerar que en algunos navegadores como IE6 pueden verse muy pixeladas.

1
2
3
4
5
6
@font-face {  
  font-family: 'Century';  
  src: url(century.ttf);  
  src: local('Century'), local('Century'),  
  url(century.ttf) format('truetype');  
}

En este caso se estaría asignando la fuente Century de tipo truetype, la cual debe estar en la misma carpeta de nuestra hoja de estilos, la tercera y cuarta linea sirve para definir que fuente utilizar en caso esta ya esté instalada.

24Sep 2009 0 Comments

javascript redirigir actualizar pasado un tiempo

Categories: html, javascript - Tags: ,

Muchas veces requerimos que una página se redirija a otra automáticamente por ejemplo para mostrar mensajes del tipo “esta página no esta disponible”, “estamos en mantenimiento”, “hemos cambiado a la siguiente direccion, por favor espere unos segundos para ser redirigido”, etc.

Es muy fácil crear este tipo de mensajes, primero debemos hacer que se llame al cargar la página web, para eso usamos un código como este:

1
<body onLoad="redireccionar()">

Y ahora faltaría crear la función que redirija nuestra página web, que sería algo como esto en nuestro encabezado:

1
2
3
4
5
<script language="JavaScript">
  function redireccionar() {
    setTimeout("location.href='http://www.miweb.com'", 5000);
  }
  </script>

El comando setTimeout nos permite que transcurrido un tiempo, en este caso 5000 milisegundos (5 segundos) se produzca la redirección.

Actualización automática de la página

En este caso vamos a usar otro comando dentro del setTimeout

1
setTimeout('document.location.reload()',10000);

En este caso se actualizará automáticamente cada 10 segundos

Regresar a la página anterior

Si quisieramos mostrar un mensaje y que luego se dirija a la página anterior sería

1
setTimeout('history.back()',10000);
17Aug 2009 0 Comments

Personalizar CSS de nuestros formularios

Categories: CSS, html - Tags: , ,

Anteriormente expliqué como dar formato a nuestros formularios usando CSS, encontré una herramienta simple que nos hace la vida más fácil, podemos personalizar el color de fondo, los bordes, tipo y color de letra, etc. Y lo mejor de todo podemos descargar toda la hoja de estilos gratis.

Puedes ver esta herramienta online AQUI

No olvidemos que algunas pseudo clases solo funcionan en Firefox y navegadores modernos como por ejemplo : onfocus

12Aug 2009 2 Comments

Aplicar estilos al separador HR

Categories: CSS, Diseño, html - Tags: ,

HR es una de esas etiquetas que van cayendo en el olvido sin embargo es posible hacer cosas interesantes con esta etiqueta, que en un principio luce muy aburrida pero es posible con un poco CSS darle un poco de vida

HR con colores sólidos

Podría por ejemplo cambiarle el color con este código

1
2
3
4
color: #f8b500;
background-color: #f8b500;
height: 5px;
border:none;

Y obtenemos:

HR punteada

No es necesario que nuestro separador sea sólido, podría ser punteado o con lineas entrecortadas

1
2
3
color: #f8b500;
height: 0px;
border:1px dashed;

Separador con imágenes

No se puede directamente con CSS sobre un HR ya que los bordes siempre aparecen, sin embargo es posible para estos casos usar un div con un fondo de imagen

31Jul 2009 4 Comments

Centrar verticalmente contenido en un div

Categories: CSS, html - Tags: ,

Centrar un contenido en una tabla suele ser muy sencillo basta agregar un valign=”middle” pero intentar hacer eso en un div suele no ser tan sencillo aun esa propiedad en css parece no funcionar, sin embargo eso tiene solución agregando una linea mas al CSS

1
2
3
<div class="image">
    <img src="point.png" alt="square" />&nbsp;  
</div>

En ese caso vamos a centrar la imagen point.png, he agregado ese   porque a veces firefox no centra si no hay algo de texto en este caso un espacio en blanco.

Lo importante aqui es la hoja de estilos con la propiedad line-height que debe tener la misma altura que nuestro DIV y nuestra imagen debe tener el vertical-align:middle

1
2
3
4
5
6
7
8
9
10
.image {
border:thick solid;
height:8em;
width:14em;
border-color:#FF9999;
line-height:8em;
}
.image img{
vertical-align:middle;
}

Puedes ver el ejempo AQUI

Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi