Archivo de la etiqueta: html

Rotar imágenes con CSS

Queremos mostraros como conseguir un curioso efecto con CSS. Se trata de hacer rotar imágenes, concretamente provocar la rotación de 180 grados de una imagen al situar el cursor sobre ella.

Este efecto que hace unos años nos hubiera costado muchas líneas de código Javascript con las correspondientes librerías, hoy en dia con unas simples líneas de CSS tenemos mas que suficiente.

Para empezar vamos a crear una sencilla página HTML. En dicha página ubicaremos una imagen que será nuestra protagonista.

El código HTML que utilizamos es el siguiente:

<div id="contenedor">
 <div id="contenedor-imagen">
 <img src="imagen.jpg">
 </div>
 </div>

El siguiente paso será posicionar la caja contenedora:

#contenedor{
 width: 280px;
 margin: 0 auto;
 padding-top:150px;
}

A continuación añadimos un pequeño reborde para remarcar la imagen y añadimos el efecto de transición para que la imagen nos rote suavemente (añadimos la compatibilidad para los diferentes navegadores):

#contenedor-imagen img {
 border: 5px solid #eee;
 -webkit-transition: all 0.5s ease-out;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
}

Finalmente añadimos la propiedad “hover“, para que al situarnos encima de la imagen, ésta realice un giro hacia la izquierda de 90 grados:

#contenedor-imagen img:hover {
 -webkit-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 transform: rotate(-90deg);
}

Una vez situamos el cursor sobre la imagen, obtenemos un resultado como el siguiente:

Rotar imágenes con CSS

Os invitamos a experimentar con el código cambiando tanto los grados de rotación como el efecto de transición.

Facebooktwittergoogle_plus

Varias imágenes de fondo con CSS3

CSSSi bien es cierto que para agregar varias imágenes, por ejemplo un fondo y una imagen por encima, debiamos crear una estructura de divs, y posicionar a todos ellos en un contenedor, ahora, y gracias a CSS3, la realización de esta tarea se ha simplificado enormemente.

La “culpa” de esto la tiene la etiqueta background image, que gracias a la nueva especificación de CSS3 nos permite agregar y posicionar varias imágenes en un mismo contenedor. Vemos un ejemplo:

El codigo HTML sera un sencillo div que hace la función de contenedor:

<div id="contenedor">
elementos dentro del div
</div>

Para el CSS indicaremos en background todas las imagenes que necesitemos, separandolas por comas:

#contenedor{
background: url(imagen1.png) bottom right no-repeat,
url(imagen2.png) center no-repeat,
url(imagen3.pngf) center repeat;
width: 300px;
}

Hay que destacar que la primera imagen que se declara, será la mas cercana a nosotros, así que las siguientes imágenes se irán colocando detrás de ella.

Gracias al CSS3 y a la posibilidad de incluir imágenes en formato PNG con fondo transparente, podremos jugar con los distintos elementos gráficos, para crear una composición como esta:

Varias imágenes de fondo con CSS3

la cual está formada por 3 imágenes: las nubes, el cielo degradado y las flores.

Puedes descargar el código completo, pulsando en este enlace.

Facebooktwittergoogle_plus

Creación de un Sprite con CSS

Desde que conocemos Internet, los enlaces han sido parte importante de las páginas ya que nos permiten acceder a todo el contenido de la web “navegando” por sus diferentes páginas. Conocemos los distintos estados de un enlace (activo, visitado,…) y como mediante diseño podemos modificar su aspecto.

Hoy vamos a modificar estos estados mediante CSS y una imagen. Dicha imagen será realmente un Sprite, la cual visualizaremos cierta porción de imagen dependiendo del estado del enlace. La razón para utilizar esta técnica es la sencillez del código requerido y su compatibilidad con la gran mayoria de los navegadores, ya que utilizamos CSS2.

Lo primero será crear la imagen. Vamos a partir del logotipo de nuestra web hermana tecnoblogin.com para crear los cuatro estados del enlace.

sprite-tecnoblogin-estados

Ahora le toca el turno a la programación. En nuestro documento HTML, crearemos un enlace a la hoja de estilos y codificaremos el enlace. A continuación en el fichero CSS indicaremos el código para los cuatro estados del enlace:

Codigo HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Ejemplo de CSS Sprites</title>
<link rel="stylesheet" type="text/css" href="sprite.css" />    
</head>
<body>
    <p>Ejemplo de Sprite con CSS</p>   
    <a id="tb" href="http://www.tecnoblogin.com" target="_blank">Acceder
a tecnoblogin.com</a> 
</body>
</html>

Codigo CSS

      a#tb {
        display:block;
        width:150px;
        height:35px;
        text-indent:-9999px;
        background:url(sprite-tecnoblogin.jpg);
      }

      a#tb:link { background-position: top left; }      
      a#tb:hover { background-position: top right!important; }
      a#tb:active { background-position: bottom left!important; }
      a#tb:visited { background-position: bottom right; }

Pulsa para ver el ejemplo en funcionamiento

Facebooktwittergoogle_plus

Superponiendo divs mediante CSS

Por norma general, todas las etiquetas html ocupan un espacio dentro de la página. Este modelo de cajas se posicionan unas junto a otras o bien unas debajo de otras. Pero si lo que queremos es que unas cajas se superpongan con otras, deberemos “romper” la barrera para que una caja se sitúe por encima de otra. Para ello, deberemos echar mano de las etiquetas CSS position y z-index.

Etiqueta position:

La etiqueta position tiene por defecto el valor static. Para ubicar un <div> generalmente se usa otro div contenedor con valor relative para que se adapte a la página. En su interior ubicaremos nuestro div indicando position absolute y dandole los valores necesarios para posicionarlo dentro del contenedor, tal y como se muestra en el siguiente ejemplo:

<div style="position: relative;">
  <div style="position: absolute; left: 40px; top: 40px;"> CUADRO 1 </div>
</div>

En el caso de querer superponer una caja encima de otra, tan solo tendremos que indicar los valores oportunos a ambos divs:

<div style="position: relative;">
  <div style="position: absolute; left: 40px; top: 40px;"> CUADRO 1 </div>
  <div style="position: absolute; left: 80px; top: 90px;"> CUADRO 2 </div>
</div>

Aunque para el ejemplo hemos añadido mas estilos a las cajas para aumentar su visibilidad, gracias al posicionamiento obtendríamos un resultado como el siguiente:

superponiendo-divsEtiqueta z-index:

Gracias a la incorporación de la etiqueta z-index en nuestro código, podremos alterar el orden natural de las cajas. Z-index modificará el orden, siendo las capas mas visibles para el usuario las que tengan un número mayor, quedando mas ocultas las que tengan un indice menor, tal como vemos en el siguiente ejemplo:

<div style="position: relative;">
  <div style="position: absolute; left: 10px; top: 25px; z-index: 1;"> CUADRO 1 </div>
  <div style="position: absolute; left: 30px; top: 80px; z-index: 3;"> CUADRO 2 </div>
  <div style="position: absolute; left: 50px; top: 120px; z-index: 2;"> CUADRO 3 </div>
</div>superponiendo-divs-2
Facebooktwittergoogle_plus

La velocidad de carga nos ayuda a posicionar mejor nuestra web

En numerosas ocasiones hemos comentado la importancia de las etiquetas para mejorar el posicionamiento de nuestra página, pero otro de los factores que nos influirá, y que muchos desconocen, es la velocidad de carga de la propia página.

Una página optimizada y que cargue rápido, posicionará mejor. Por tanto debemos tener en cuenta el código de la web y también muy importante el alojamiento.

Si estamos desarrollando un sitio web, podemos evaluar la velocidad de carga accediendo a sitios como media4x.com en el cual existe una herramienta de diagnostico llamada site optimizer

Indicando la URL de nuestra web, la aplicación realizará un análisis, mostrando en verde los aspectos correctos, y en rojo los que necesitarían mejorar, que por lo general indicarán optimización del código HTML y CSS, o bien, reducción del tamaño de las imágenes.

En cuanto al aspecto del Hosting, debemos de tener en cuenta que en ocasiones (no siempre), un precio muy económico nos puede repercutir en una pérdida de la calidad del servicio, por lo debemos buscar una relación calidad-precio acorde a nuestras necesidades.

Facebooktwittergoogle_plus

Las Meta Tags Title, Description y Keywords

Si hace unos días os contábamos la importancia que tenia la etiqueta Robots para la indexación correcta de nuestras páginas en los buscadores, las etiquetas que hoy os mostramos también tienen que ver, y mucho, en cuanto a los resultados que muestran los buscadores.

Las Meta Tags Title, Description y Keywords, proporcionan información relativa a la página o al sitio en general, que aunque no se muestran en la web, son utilizadas por los robots de los buscadores para la indexación y clasificación de las páginas. De hecho, numerosos plugins de Blogs y CMSs, agregan contenido en estas etiquetas de forma automática para mejorar el SEO de las páginas.

La etiqueta Title

La etiqueta Title es vital para los buscadores, ya que proporciona el titulo de nuestra web. Es importante que el contenido de esta etiqueta coincida con la etiqueta <title> de la página.

El Title debe ser una frase breve que resuma el contenido de esa página web. Debe incluir las palabras que consideres claves para la página y su extensión no deberá exceder de los 65 o 70 caracteres.

Su estructura es la siguiente:

<META NAME="title" CONTENT="titulo de la página">

La etiqueta Description

En ésta etiqueta, incluiremos una descripción más extensa del contenido de nuestra página. Será la frase que acompañe al titulo en los listados (resultados de las búsquedas) que muestran los buscadores, por lo que su contenido debe ser claro y conciso. Procuraremos no repetir palabras e intentaremos incluir los términos que describen nuestra página y que aparecerán en la etiqueta Keywords.

Se recomienda que su contenido no sobrepase los 120 o 140 caracteres. Su estructura será:

<META NAME="description" CONTENT="descripción de la página">

La etiqueta Keywords

En la etiqueta Keywords insertaremos todas las palabras que consideremos claves para y que se identifiquen con nuestra página. Conviene incluir palabras que efectivamente concuerden con el contenido de la web, ya que aumentar la cantidad de palabras con términos que poco o nada tengan que ver con nuestra web, con el fin de conseguir visitas, pueden provocar el efecto contrario, ya que Google y otros buscadores podrían penalizar nuestra web.

Una cantidad aceptable de palabras seria entre 10 y 20. La sintaxis básica seria:

<META NAME="keywords" CONTENT="palabra1, palabra2, palabra3, ...">
Facebooktwittergoogle_plus

La tabla periodica de las etiquetas HTML5

Gracias a Josh Duck y su magnifico trabajo, tenemos la posibilidad de visualizar todas las etiquetas HTML5 como si de la tabla periódica se tratase.

Si accedemos a la página http://joshduck.com/periodic-table.html encontraremos todos las etiquetas soportadas por el nuevo estandar. Además, si pulsamos sobre cualquiera de ellas, nos aparecerá una breve descripción de la funcionalidad de dicha etiqueta y un enlace a la pagina de W3C, obteniendo en esa página una descripción mucho mas detallada de la etiqueta.

En la zona inferior de la página encontraremos la leyenda de los colores que utiliza la tabla, indicandonos cada color utilizado a que grupo de etiquetas pertenece como por ejemplo el color verde para etiquetas relacionadas con formularios o el color marrón para las etiquetas relacionadas con la creación de tablas.

tabla-periodica-html5

 

Facebooktwittergoogle_plus

Centrar un div horizontal y verticalmente

Centrar un div horizontalmente es relativamente sencillo, pero para hacerlo verticalmente, la cosa se complica. Debemos realizar unos cálculos previos que nos permitan el centrado del div.

Partiremos de un div de 200px de ancho y 150px de alto si escribimos el código html, obtendremos lo siguiente:

A continuación, posicionaremos de forma absoluta el div, asignando un valor del 50% tanto en la propiedad top como en la left. Así la esquina superior izquierda quedará posicionada en el centro de la ventana del navegador.

Finalmente deberemos desplazar con las propiedades marging-top y marging-left la mitad de pixels del tamaño total del div, para que el centro del div coincida con el centro de la página

Finalmente el div quedará posicionado en el centro de la página.

El código final necesario es el siguiente:

<html>
<head>
<title>Div Centrado Vertical y Horizontalmente</title>
<style type="text/css">
div {
	background-color: #ccc;
	position: absolute;
	height: 150px;
	width: 200px;
	left: 50%;
	top: 50%;
	margin-top: -100px;
	margin-left: -150px;
}
</style>
</head><body>
<div>Ejemplo centrado div - todohosting.es</div>
</body>
</html>
Facebooktwittergoogle_plus

Nuevas etiquetas estructurales en HTML5

El diseño de las páginas web ha evolucionado mucho desde sus inicios. Si bien es cierto que hace unos años, las tablas copaban gran parte del protagonismo, hoy su uso es mas bien limitado, dejando paso a otro tipo de etiquetas que permiten un alto de personalización y sobre todo, de posteriores modificaciones, ya que con una simple edición del fichero CSS, cambiaremos el aspecto de todas las páginas. Sigue leyendo

Facebooktwittergoogle_plus

Agrega Twitter a tu web

Twitter dispone de un sencillo widget mediante el cual podemos agregar mensajes de Twitter a nuestra web.

Para acceder a éste widget, deberás entrar en tu cuenta y pulsar sobre el icono de configuración (rueda dentada) y seleccionar la opción Configuración, o simplemente acceder a http://twitter.com/goodies/widget_search 

Nos aparecerá la ventana de Widgets, en la cual deberemos pulsar sobre el botón Crear nuevo.

En ésta nueva ventana, tendrás que indicar el nombre del usuario del que vas a obtener los mensajes. Además, tenemos una serie de unas opciones para de personalización, como son el tamaño y los colores del box. Todos los cambios que realices, aparecerán en la vista previa situada a la derecha.

Twitter widget

Una vez finalizado el proceso de personalización, pulsa sobre el botón Crear Widget. Con ello obtendremos un código HTML, que es el que deberás insertar en tu web.

Si en algún momento necesitaras modificar ti Widget, accede de nuevo a la zona de Widgets de tu cuenta y pulsa sobre el botón Editar. Accederás al panel de configuración, donde podrás modificar de nuevo las opciones que desees.

Facebooktwittergoogle_plus