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

Entradas

Mostrando entradas de 2013

Redireccionar a otra pagina si nos visitan desde un dispositivo móvil.

En el anterior post he explicado como crear una página para un móvil con la ayuda de jQuery mobile. Pero, ¿cómo mostrar esa página y no la página "normal" en el caso de que nos visiten desde un dispositivo móvil?. A mi me va bien con el siguiente código: <script type="text/javascript"> if ((navigator.userAgent.match(/(iPhone|iPod|BlackBerry|Android.*Mobile|BB10.*Mobile|webOS|Windows CE|IEMobile|Opera Mini|Opera Mobi|HTC|LG-|LGE|SAMSUNG|Samsung|SEC-SGH|Symbian|Nokia|PlayStation|PLAYSTATION|Nintendo DSi)/i)) ) { location.replace("http://www.nombredemidominio.com/Movil/index.html")} </script> Es un script en javascript el cual coloco entre los head de la página principal. Sólo tenemos que sustituir el contenido de "location.replace" con la dirección de nuestra propia página y la carpeta donde tenemos la versión móvil. Lo he probado en varios móviles y funciona. Lo he probado también en mi tablet de 7 pulgadas y no fun

web movil con jQuery mobile

Una de las formas de adaptar una página web al móvil es con el uso del framework de jQuery, el llamado jQuery mobile . En realidad no adaptamos nuestra web al móvil, sino que construimos una página nueva para el móvil. Vamos por partes, primero tenemos que incluir, entre los <head> de la página, la llamada al framework de la siguiente manera: de nuestra página, la llamada al framework, lo cual haremos del siguiente modo: <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile.structure-1.3.0-rc.1.min.css" /> <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script> Con este método accedemos directamente al servidor de jQuery, desde el cual descargamos lo necesario para que el framework funcione correctamente. Con la primera linea descargamos la hoja de estilos,

Cyanogenmod no reconoce sim lg

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 4.0 (el teléfono viene con A

Desplegar y ocultar el contenido de un div con jQuery.

Con un código, en jQuery , tan sencillo como el siguiente:  <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&

HTML5. ¿Gráfico en un canvas usando javascript?

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

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: @media sc

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 mostrar (pod