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

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

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

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

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

  Hay un buen puñado de sliders fotográficos, realizados en jquery , para elegir; véase la página de AjaxShake . Pero en este post me voy a centrar en uno: bxslider . En realidad sólo he probado dos, el mencionado, y CodaSlider . El CodaSlider también está bien, pero en la página de Gutierrez Sustacha , lo sustituí por el bxslider solamente porque tenía una función de la que carecía el Coda: la de poder parar la presentación al pasar el mouse por encima. Algo que me interesaba ya que, al lado de las fotos hay bastante letra y, además, enlaces. Así, el visitante puede revisar con tranquilidad el contenido.   Además, según mi criterio, creo que los sliders fotográficos pueden encajar en páginas variadas. Podéis ver esta de mecánica del automóvil y esta otra de excavaciones y movimientos de tierra .   Bueno, vamos al grano. Lo primero,  descargaros de aquí todo lo necesario para empezar a funcionar. Lo segundo, dentro de las etiquetas <head> de tu página, c...

  Ya sé que a dia de hoy se puede realizar un efecto sombra en CSS3 pero, a fecha de este post, internet explorer no lo soporta, así que os diré cómo hice el efecto a las fotos, en css y con un par de imágenes.   Antes de nada quiero comentaros que en esta página: http://www.talleresguadamia.com , el título principal del contenido tiene una sombra realizada en CSS3, los que abráis la página con el explorer no la veréis y el resto depende del navegador. El efecto sombra al que me refiero es el véis en las fotos del contenido. Lo realmente importante el código que sigue: @charset "utf-8"; /* CSS Document */ .dropshadow1{     float:left;     background: url(images/shadowAlpha.png) no-repeat bottom right !important ;     background: url(images/shadow.gif) no-repeat bottom right;     margin: 10px 0 0 10px !important ;     margin: 5px 0 0 5px; }     .dropshadow1 img {   di...

  Dado el título de este blog y que he comenzado con entradas un poco avanzadas, este post lo voy a dedicar a la gente que no tiene ni idea del tema pero que le gustaría saber cómo se construye una página web.   Lo primero que debéis saber es que, para empezar, sólo necesitáis un editor de texto simple como el block de notas.   Lo segundo, para la gente que no tiene ni pajolera idea de que código se usa para diseñar una página web, les recomiendo que, en cualquier página que estén viendo con su navegador, pulsen en ella el botón derecho del ratón y, en el menú que les aparece, elijan "ver código fuente de la página", así se darán una idea de la estructura.   Lo tercero, la estructura principal de una página web es la siguiente:          <html >          <head>              "aquí va el código de head"       ...