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

   Sé que este post no tiene nada que ver con el tema del blog, pero no me puedo resistir a escribir sobre ello. Es sobre una mala experiencia que tuve la pasada semana intentando instalar una nueva rom a mi teléfono.    El caso es que hace un mes aproximadamente me agencié un LG L3 E400 , un móvil de gama media-baja pero con buenas prestaciones. El problema es que a mi me gusta instalar aplicaciones y tenía que hacer malabarismos para no quedarme sin memoria. Este teléfono, como muchos otros, no te deja instalar aplicaciones en la sd externa y, además, la memoria del sistema para dichas aplicaciones es reducida.    Después de varias semanas mirando por la web algún modo de solventar el problema, me encontré con este foro de HTC mania , en el que te dan instrucciones de cómo instalar la rom de cyanogenmod y varios archivos, los cuales unían o acoplaban la sd interna con la externa. Además lo bueno era que la rom de cyanogenmod está realizada en Android...

   Con un código, en jQuery ,  tan sencillo como el siguiente: <!-- desplegar/ocultar contenido menu --> <script type="text/javascript"> $(document).ready(function () { $('nav').on('click','li',function () { var $submenu=$(this).next('div.submenu'); if ($submenu.is(':hidden')) { $submenu.slideDown('100'); } else { $submenu.slideUp('100'); } }); }); </script> desplegamos y ocultamos el contenido de un div .    Siguiendo como ejemplo la página Las Edades de la Tierra , en la cual, en su parte izquierda, podéis desplegar y ocultar el contenido de las diferentes Eras, voy a tratar de explicar como poner en práctica este ejemplo. Una parte del código HTML 5 podría ser como lo que sigue: <section> <nav> <article class="menu menuuno"> <hgroup> <h2 class="titulo">CENOZOICO</h2> <ul class="menu1...

   Para mi gusto no, ¿porqué?, porque me parece demasiado engorroso. Yo prefiero crear el dibujo en cualquier programa, Gimp por ejemplo que, además, es gratuito y cargarlo en la página. No obstante, para ilustrar el ejemplo de creación de dibujos en un canvas usando javascript , en la página Las Edades de la Tierra , en la sección "Enlaces de interés", abajo del todo tengo un enlace llamado "ver gráfico de escala geológica", si pincháis sobre él se abrirá una ventana, esta ventana es un canvas que contiene un gráfico realizado en javascript. Ahora os comento como se realiza esto.    En primer lugar el código en HTML5 :     <canvas id="migrafico"> Tu navegador no soporta Canvas </canvas>     El HTML es así de sencillo, una sola línea. El texto " Tu navegador no soporta Canvas " sólo aparecerá en el caso de que el navegador no soporte esa función. Tenemos que darle un id para poder dibujar dentro del canvas y, en este caso, tamb...

    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:...

   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...

   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...

   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...