Ir al contenido principal

Entradas

Mostrando entradas de 2012

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 la parte superior y la segunda (mamut.png) a un

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 solid none solid;     border-width: 2px;     c

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 ;     border-radius :  10px 10px 10px 10px ; }    Las tres primeras lineas del código son d

Las bondades del CSS3: aplicar sombras a nuestras cajas

   Otra de las bondades del CSS3 . Ya no es necesario realizar complicadas lineas de código en el CSS e incluir imágenes en formato png para aplicar una sombra a nuestra caja o div . Basta con una línea de código muy sencilla de entender:    box-shadow: -5px 5px 10px black;    Con esta sencilla linea aplicamos a nuestro div o caja una sombra que estará desplazada 5 píxeles a la izquierda, 5 píxeles hacia abajo, con un difuminado de 10 píxeles y de color negro. El primer número indica el desplazamiento horizontal, si es positivo la sombra se desplazará hacia la derecha y si es negativo hacia la izquierda. El segundo número indica el desplazamiento vertical, si es positivo la desplazamos hacia arriba y si es negativo hacia abajo. El tercer número indica el grado de difuminado de la sombra , este debe de ser siempre positivo cero píxeles indicarán que no tiene difuminado. Y por último indicamos el color, este lo podemos expresar también en hexadecimal, black (negro) sería #0000. N

Las bondades del CSS3: transition y transform

   Por supuesto seguimos con la página de ejemplo Las Edades de la Tierra . En esta ocasión voy a comentar cómo animar los enlaces (aunque realmente no es necesario que sean enlaces) sin la necesidad de usar javascript. Con CSS ( CSS3 ) la tarea es relativamente sencilla. En la página de ejemplo podéis ver que tanto en la sección principal (a la izquierda), que abre las explicaciones sobre las diferentes eras y eones, como en la sección de de enlaces, al pasar el puntero del ratón sobre ellos, estos se hacen más grandes, se transforman a una escala mayor y, lo mejor, es que no es necesario usar javascript para realizar el efecto, basta con unas pocas líneas en el CSS. Aviso que en el IE funciona pero regular (no realiza el efecto de transición suave, por lo menos en la versión 9).    Vayamos al grano, el efecto se consigue combinando las propiedades transition y transform , con las cuales podemos realizar animaciones muy buenas. En el caso del ejemplo de la página web Las Edades

Las bondades del CSS3: opacidad del color con rgba

   El CSS3 nos trae cosas muy buenas. Entre ellas está la posibilidad de poder controlar la transparencia u opacidad (como lo queramos llamar) del color de fondo de un elemento de la página. Esto nos evita el tener que colocar un fondo transparente mediante una imagen png, con lo cual reducimos el peso de la página a la hora de cargarla. Además lo soportan todos los navegadores modernos.    Siguiendo con la página Las Edades de la Tierra , en ella podéis ver que el fondo de varios elementos es negro con un grado de transparencia. La forma de conseguirlo es sencilla: con la instrucción rgba (x, x, x, z.z) , donde la x es un número, de 0 a 255 (tres 0 negro, tres 255 blanco), que nos dará el color y la z es un decimal (entre 0 y 1) que nos dará la transparencia (0 totalmente transparente, 1 sin transparencia). Por ejemplo: rgba (0,0,0,0.5) sería el color negro con media opacidad.    El código CSS3 sería el siguiente: background-color: rgba(0, 0, 0, 0.5);    O, también: backgr

Imagen de fondo adaptable a todas las resoluciones

   Continuando con la página Las Edades de la Tierra , en este post voy a explicar cómo incluir las imágenes de fondo y que estas queden fijas y se adapten a cualquier resolución y tamaño de la ventana.    En primer lugar el código HTML5 : <body> <img id="imgback" src="images/fondolatierra.jpg" alt="la tierra"> <header id="cabecera"> <h1> <a title="Las edades de la tierra en millones de años,cenozoico, paleozoico, mesozoico, jurasico, precambrico" href="#"> <img id="imgcabecera" alt="las edades de la tierra" src="images/lasedadesdelatierra.png"></a> </h1> </header>    El HTML es sencillo (y el CSS también lo será). Inmediatamente después de la etiqueta 'body' insertamos la imagen de fondo con un 'id'. Después, dentro de la etiqueta 'header' incluimos la imagen (también con un 'id') que nos servirá de

¿Empezamos a crear páginas web en html5 y css3?

   Pues va siendo hora. El CSS3 ya está muy implementado en la mayoría de los navegadores. En cuanto a la implementación del HTML5 se está trabajando en ello. En algunos sitios he leído que la implementación ya debería estar realizada a fecha de hoy. En otros, que no lo estará hasta el 2014. En todo caso sería bueno ir conociéndolo e ir haciendo alguna "chapuza" con él, ya que, tiene una buena cantidad de nuevas etiquetas y, algunas, son un poco enrevesadas de entender.    Yo estoy trabajando en una (para mi) llamada Las Edades de la Tierra .  En esta página voy a intentar usar el mayor número de las nuevas etiquetas HTML5 y de las nuevas facilidades que nos ofrece CSS3 . Esta sólo se verá bien en los navegadores que están actualizados. Aviso que esta página puede que no se vea correctamente en el IE (Internet Explorer) ya que este es el navegador que más tarde implementa las novedades. También intentaré que se adapte al mayor número de pantallas y resoluciones.    En

Código jQuery para ver foto más grande

  Pues en este post explicaré como hacer para que, al pasar el puntero del mouse por encima de una foto pequeña (o thumbnail), esta se vea más grande en otro sitio.    En el código HTML podríamos tener algo como: <div class="box_imgpeque"> <img src="images/100_6747.JPG" width="160" height="90" alt=""/> </div> <div class="box_imgpeque"> <img src="images/100_6745.JPG" width="160" height="90" alt=""> </div> <div class="box_imgpeque"> <img src="images/100_6710.JPG" width="160" height="90" alt=""> </div> <div class="box_imggrande"></div>    Creo que el HTML está claro. En los divs "box_imgpeque" tendríamos las imágenes en pequeño y, en el div "box_imggrande" irían las imágenes grandes. Por supuesto en el CSS de "box_imggrande&quo

ventana modal con html, css y jQuery

   Intentaré explicar cómo crear, sólo con CSS , HTML y un poco de jQuery , un tipo de esas ventanitas que no nos permiten pinchar fuera de ellas hasta que las cerremos. Con que hechéis un vistazo al post anterior ya está más de la mitad del trabajo hecho. En dicho post ya expliqué cómo crear la ventana (un div oculto), posicionarla y darle forma con css y abrirla y cerrarla con jQuery, pero, ¿cómo evitar que se pinche fuera de ella?. Lo más sencillo que he encontrado para ello es lo siguiente: (la ventana a abrir será el formulario de correo que comenté en el post anterior el cual os aconsejo tenerlo abierto) Colocar el siguiente div en el html de nuestra página: <div id="fondoformulario"></div> cuyo css será el siguiente: #fondoformulario {     position:absolute;     top:0px;     left:0px;     width:100%; /*ocupará todo el ancho de nuestra página*/     height:1860px; /*le damos el alto de nuestra página*/     display:none; /*en principio será oc

Abrir y cerrar formulario de correo en ventana tipo popup con jquery

   Este post está relacionado con el anterior sobre enviar formulario de correo en segundo plano , en este voy a hablar sobre como abrir un div que contiene un formulario de correo, tipo popup o, tal vez mejor, ventana modal . En esta página sobre taller del automóvil tengo un formulario de correo oculto que se muestra al pinchar en un enlace. Intento minimizar el scroll de la página para mostrar la información. Me parece que es mejor mostrar toda la información posible moviendo la barra del scroll lo menos posible. Y, en este caso, me parecía que incluir un formulario visible recargaría demasiado la página. Voy a intentar explicar cómo mostrar y ocultar una ventana, que contiene un formulario de correo, usando jQuery .    Primero, el código CSS: /*damos forma y posición al div formulario que, por defecto, estará oculto*/  #formulario{     display:none;     position:absolute;     top: 50%;     left: 30%;     height:500px;     width:450px;     padding:0px 20px 0px 20px;     bac

Formulario de correo y su envío mediante jQuery y PHP en segundo plano.

   Tanto en esta página de excavaciones y movimientos de tierra , como en esta otra de mecánica de coches , existen sendos formularios para el envío de un correo desde la página web. La única diferencia es que en la segunda, el formulario no está visible (por falta de espacio) y hay que abrirlo mediante el enlace (esto está explicado en este otro post ). Es bueno tener un formulario para el envío de correo ya que facilita las cosas al posible cliente (que puede no tener un cliente de correo instalado, por ejemplo).    En este post voy a tratar de explicar cómo hacer un formulario de correo sencillo y, en segundo plano , tratarlo con jQuery y enviarlo con PHP . Lo normal es que, al enviar directamente el contenido del formulario al archivo PHP que lo procesa y envía, se abra una ventana en blanco. Si lo enviamos con el método que voy a explicar a continuación, no se abrirá dicha ventana.    Lo primero el formulario en HTML: <form id="myForm" action="enviarcorr

Leer variables enviadas mediante los métodos POST y GET combinando PHP, javascript y jQuery

   En este post voy a tratar de explicar como enviar y leer variables con los métodos $_POST y $_GET de PHP . Antes de nada deciros que tiene relación con los posts: problemas que surgen al recargar div contenedor y código PHP y javascript para redireccionar a otra página . Podéis echarle un vistazo si queréis. También está relacionado con la página del taller de mecánica que le he hecho a un amigo.    Bueno, vamos al grano. En un post anterior ya comenté como, mediante el método load() de jQuery , enviábamos una variable a una página y la recogíamos con el método $_POST en PHP. Ahora voy a comentar como enviar una variable con el método $_GET y recogerla usando javascript .  La siguiente línea, perteneciente al código que os comentaba del anterior post , nos puede ayudar: <?php    if (!isset($_POST['primera']))echo "<SCRIPT>location.href='index.html?pag=2';</SCRIPT>"; ?>    Como podéis ver, el anterior código combina PHP y java

Leer un archivo XML con jQuery y javascript y modificar un HTML con su contenido

   Una manera muy interesante y fácil de modificar los textos de tu página web. Si, por ejemplo, tenemos una página donde cambiamos a menudo unas noticias que tenemos en el margen derecho, podríamos tener un código HTML como este:    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Manejar archivo XML</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="leerxml.js"></script> <link rel="stylesheet" href="estilos.css"> </head> <body> <h1>Titulo de la página</h1> <div id="derecha"> <div class="noticias"> <div class="prim

Código php y javascript para redireccionar a otra página.

   Este post es para dar solución a uno de los problemas planteados en " Problemas que pueden surgir al recargar div contenedor ". Así que os aconsejo que le hechéis un vistazo para saber de qué va la cosa.    Esta puede ser una de las soluciones. Lo primero que tenemos que hacer es guardar en formato PHP esas páginas que queremos recargar dentro de nuestro div, ya que usaremos dicho lenguaje para solucionar el problema. Antes del código html tenemos que incluir el siguiente código: <?php if (!isset($_POST['primera'])) echo "<SCRIPT>location.href='index.html';</SCRIPT>"; if (isset($_POST['primera'])){     if ($_POST['primera']!='no') {echo "<SCRIPT>location.href='index.html';</SCRIPT>";} } ?> <y a partir de aquí el código html que queremos mostrar>    Explico un poco el código. La primera linea comprueba si no existe ( !isset ) la variable llamada 'primera

Uso de la función animate de jQuery para la animación de menús

   Con la función ' animate ' de jQuery podemos realizar, de forma sencilla, una animación de, por ejemplo, nuestros menús, con unas pocas lineas de código. En esta página podéis ver el ejemplo talleresguadamia . Para realizar el ejemplo tenéis que descargar, e incluir en el 'head' de vuestra página este plugin jquery_plugin_color que extiende la función 'animate' al color. Esto es así porque el 'animate' original de jQuery sólo nos permite animar aquellas propiedades css numéricas. Como, por ejemplo, el padding, margin, width, etc... Añadiendo este plugin, también el color. El código del ejemplo es el siguiente: function animaenlaces(){     enlace=$('a.but');   //recogemos en la variable qué enlaces queremos animar     $color=enlace.css('color');   //en la variable '$color' guardo el color original            enlace.hover(function() { //ejecutamos la función cuando el puntero esté    encima del enlace             $

Consejos primeros pasos creación página web (2ª parte)

   Sigo aprendiendo pasito a pasito. No tengo mucho tiempo (trabajo 10 horas al día... de momento) pero algo avanzamos. En este post, para los principiantes como yo, claro, os doy unos consejitos sobre el diseño.    Una de las cosas más importantes del diseño de una página web es que sea lo más accesible a la mayoria de las personas, y visible en la mayoría de monitores y navegadores. Tenéis que saber que los navegadores interpretan a su modo el código y que, dependiendo de la resolución de la pantalla, se verá también muy diferente. Yo, por ejemplo, tengo el monitor con una resolución de 1280x1024 pero mucha más gente tiene la resolución en 1024x768. Así que pongamos en nuestros monitores esta última resolución y, si nuestro monitor es cuadrado, vamos a procurar que el contenido de la página ocupe, casi (dejad algo de margen), el ancho de la pantalla. Os doy este consejo porque, si trabajáis el diseño en una resolución alta, aquel que tenga la resolución más baja tendrá que ir hacie

Problemas que pueden surgir al recargar DIV contenedor.

En uno de mis primeros post explicaba lo sencillo que es, a través de jQuery , recargar un DIV contenedor sin necesidad de recargar toda la página. Durante este tiempo he visto que pueden surgir un par de problemas dependiendo del contenido de dicho DIV. Si el contenido que queremos recargar es para mostrar la información que tenemos en un menú principal... bueno me explico mejor con la imagen de la derecha. Como podéis ver esta sería una página principal sencilla que consta de una cabecera, con el menú principal arriba que sería siempre fija. Una zona de enlaces a la derecha, también fija y un pié de página también fijo. El único DIV que se recargaría sería el contenedor del medio el cual mostraría la información que queramos ver, al pinchar en los enlaces del menú principal. Espero haberme explicado bien. Bueno, uno de los problemas que nos podemos encontrar es el siguiente: lo normal sería que en el menú tuviesemos un enlace que nos vuelva a llevar a la página principal (un botón l

Consejos primeros pasos creación página web

  En este post voy a intentar dar algunos consejos para los que penséis en comenzar el diseño de una nueva página web.   Tal vez yo no sea la persona más adecuada en darlos porque hace apenas cuatro dias, como quien dice, que estoy en esto. Además, las dos páginas que he echo: http://www.talleresguadamia.com y http://www.gutierrezsustacha.com , como podéis ver en el pie de página, son modificadas de plantillas gratis bajadas de Internet. Tengo que decir también que no he cobrado por ellas. La primera es para un cuñado y la segunda para la empresa para la que trabajo. Y ninguno de los dos tenía intención de hacer una página, en realidad los convencí diciéndoles que sólo les costaría lo que cuesta pagar el dominio (unos 10 euros al año).   Este podría ser el primer consejo: tener ética. Con esto quiero decir que, hasta que no seáis profesionales, no cobréis y que si sacáis plantillas de Internet dejad claro que es una página modificada y dejad el enlace del sitio de donde lo descarg