Códigos jQuery, CSS, HTML para páginas web

Entradas

Adaptar página web al movil con media queries.

Con el uso de media queries de CSS3 podemos adaptar de forma sencilla nuestra página para que esta se vea correctamente en un móvil o en una tablet . Este ejemplo que os comento sólo lo aconsejo para aplicarlo a páginas sencillas. Para páginas más elaboradas es mejor crear CSS específicos y realizar un redireccionamiento al CSS que queramos cargar dependiendo del dispositivo que se esté usando. En este caso, continuando con la página Las Edades de la Tierra , vamos a introducir, dentro del mismo CSS, unas reglas media query, las cuales se ejecutarán, dependiendo del tipo de pantalla con la que estemos visualizando la página. Antes de nada quiero hacer hincapié en que, para hacer una página adaptable, es conveniente que, siempre que sea posible, uséis porcentajes en las medidas. (Ver ' Consejos crear web ' y ' Imagen adaptable todas resoluciones ' ). Bien, para hacer esto, basta con añadir un código como el siguiente al final de nuestro CSS:...

Código jQuery para ver una imagen al pasar el ratón sobre un enlace.

Voy a explicar un código en jQuery , para que, al pasar el puntero del mouse sobre un enlace o, en este caso, sobre un texto cualquiera (sin necesidad de ser un enlace), se nos muestre una imagen cerca del enlace y que esta desaparezca al retirar el puntero del mouse (sin necesidad de hacer click sobre él). Podéis pensar que me estoy repitiendo con un anterior post. Casi que si. Pero la diferencia es que, en este caso, no sabemos donde estará situada la imagen. Es decir que, dependiendo de la situación de la pantalla donde esté el enlace o texto, allí se mostrará la imagen. Vamos al grano. Primero el código en HTML: <span class="enlace" title="hyneria.png">Hyneria</span> Podéis ver que, en este caso, no se trata de un enlace. Le pongo el nombre de 'enlace' a la clase porque en el CSS le doy apariencia de enlace. Aquí lo importante es 'title' el cual contiene el nombre de la imagen que queremos most...

Dos imágenes de fondo con CSS3

Continuando con la página Las Edades de la Tierra , en este post voy a comentar cómo incluir dos imágenes de fondo en una ventana o div. Podéis ver que, en la citada página, en la zona izquierda, cuando desplegamos las explicaciones de las diferentes Eras de la tierra, tenemos como fondo dos imágenes en lugar de una. Esto lo conseguimos con otra de las bondades del CSS3 , la cual nos permite colocar, insertar (o como lo queráis llamar) dos imágenes de fondo en lugar de una. El código CSS , incluyendo un color con opacidad, es como sigue: .menuuno { background: url(images/humano.png) no-repeat fixed 35% 35%, url(images/mamut.png) no-repeat fixed 35% 65%; background-color: rgba(0, 0, 0, 0.6); } Fácil ¿no?, las dos imágenes en una misma línea, sólo separadas por una coma. En este caso no se repiten (no-repeat), son fijas (fixed), están las dos a un 35% a la izquierda de la pantalla, la primera (humano.png) a un 35% de...

Desplegar y ocultar ventana lateral con jQuery

Este post es una especie de continuación del anterior sobre como girar un div y posicionarlo en vertical . Siguiendo con la página Las Edades de la Tierra , en la zona derecha de la pantalla tenemos una ventana oculta , simpre fija, la cual se muestra, se despliega , al pinchar sobre la pestaña vertical llamada "notas". En este post voy a intentar explicar cómo realizamos este efecto con la ayuda de jQuery . Lo primero el HTML: <!DOCTYPE html> <html lang="es-ES"> <head> <meta charset="utf-8" /> <title>Las de la tierra</title> <link rel="stylesheet" href="estilos.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="jquery-1.7.1.min.js"></script>')</script> <!-- Aquí podemos colocar el script en jQuery (descrito más abajo). Aunqu...

Cargar jQuery siempre sin fallos

Hoy quiero escribir este post porque varios me han dicho que no le funcionan los códigos escritos en jQuery. El problema que tenían es que intentaban cargar este framework desde el servidor de Google de la siguiente manera: < script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">< /script > El problema está en que cada cierto tiempo se actualiza la versión, en este caso es la 1.8.3, pero dentro de poco puede ser la 1.8.4, por lo que no encontrará la carpeta y jQuery no se cargará. Para solucionar esto y asegurarnos de que siempre se carga tenemos que tener descargada una versión de jQuery en nuestro ordenador (o en el servidor) y añadimos la siguiente linea: <script >window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</ script > Esta linea comprueba si ya está cargado jQuery, de no ser así añadimos, mediante javascript, una linea que nos carga la versión ...

Las bondades del CSS3: girar, rotar div y texto con transform

Sigo con la página Las Edades de la Tierra y quiero que la veáis para ilustrar el ejemplo. En parte derecha de la pantalla podéis ver una pestaña que está en vertical con el texto "Notas" dentro. Al pincharla se despliega una ventana que está oculta. Bien, en este post voy a explicar cómo girar ese elemento para que nos quede vertical (en el próximo post explicaré como desplegar y ocultar la ventana). La instrucción (en CSS3 ) es la siguiente: transform: rotate(-90deg); . Con esta sencilla linea conseguimos el efecto de girar , rotar tanto el div como el texto que contiene y ponerlo en vertical . Bueno, en realidad no sería una sola linea, de momento para que funcione en la mayoría de los navegadores tenemos que que poner los prefijos -ms-(para el IE9) y -webkit-(para Chrome y Safari). El código CSS nos quedaría algo como: .vertical{ background-color: black; border-radius: 10px 10px 0 0; border-style: solid so...

Las bondades del css3: border-radius, esquinas redondeadas

Ya se que la gran mayoría de vosotros conocéis los nuevos elementos del CSS3 , el cual nos trae funciones que nos simplifican el diseño de la página, sin necesidad de incorporar imágenes, las cuales, además, aumentan su peso y relantizan su carga. Pero, siguiendo con la página de ejemplo Las Edades de la Tierra, en la cual pretendo incorporar la mayoría de los nuevos elementos CSS3 y las etiquetas HTML5, sigo con la explicación. En este caso le toca el turno a border-radius , el cual nos permite redondear las esquinas de una caja o div que tenga un borde alrededor. En este caso voy a plasmar parte del código que he hecho para la caja que tenéis en Las Edades de La Tierra , llamada 'Enlaces de Interés' a la cual e puesto el ID #enlaces. El código CSS es el siguiente: #enlaces { border-color : #00FF99 ; border-style : solid ; border-width : 2px ; bo...