Aprende como diseñar y crear tu propia pagina web de forma profesional con HTML y CSS | Curso de diseño web Capitulo #9 – Añadiendo el Slideshow con SlideJS
En este capitulo #9 del curso de diseño web vamos a agregar un slideshow, ya que en los anteriores capítulos simplemente habíamos dejado el espacio libre, este es el ultimo capitulo del curso, pero no te olvides de comentar y pedir ayuda en caso de que la necesites.
Aquí los cambios que tenemos que hacer al header de nuestro archivo index.html, es importante realizar estos cambios para poder activar nuestro slideshow correctamente.
<!DOCTYPE>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Aqui va a ir la descripcion de tu sitio web">
<meta name="keywords" content="Aqui, palabras, claves">
<link rel="stylesheet" type="text/css" href="css/estilos.css"/>
<title>Curso de Maquetacion Web</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/slides.min.jquery.js"></script>
<script>
$(function(){
$("#slideshow").slides();
});
</script>
</head>
Importante para no tener errores
Entre los errores mas comunes esta el no revisar las rutas de los archivos javascript, si no concuerdan no se va activar el slideshow y te van a aparecer imágenes mal acomodadas. También es importante revisar que en el código dentro de nuestra etiqueta script, la id de nuestro slideshow concuerde con la id del div donde ponemos nuestros slides.
Recursos a utilizar
Editor de Código Notepad++ : http://notepad-plus-plus.org
Editor de Código Sublime Text: http://www.sublimetext.com
960 Grid System: http://960.gs
CSS Gradient Generator: http://www.colorzilla.com/gradient-editor
Normalize (Antes usabamos el Reseter CSS): http://necolas.github.io/normalize.css/3.0.1/normalize.css
Slides.js: http://archive.slidesjs.com/
Web Social Icons: http://www.iconspedia.com/pack/web-social-2021
Google Fonts: http://www.google.com/webfonts
FontSquirrel: http://www.fontsquirrel.com
Lorem Ipsum Generator: http://es.lipsum.com
Ver el demo: https://www.falconmasters.com/demos/curso_webdesign
Descarga la imagen de plantilla: https://www.falconmasters.com/demos/curso_webdesign/plantilla.jpg
muy buenas Carlos Arturo acabo de terminar tu tutorial de diseño web y tengo un par de problemillas a ver si me puedes ayudar, veras el primero es que al cambiar de tamaño la pagina lo botones del menu salen fuera subheader bueno realmente es como si el subheader se volviese mas pequeño y por eso se quedan fuera y el otro es que el slideshow me sale el error de que jquery no esta definido y lo he revisado varias veces pero nada. En la imagen se ve claramente lo que me ocurre con el slideshow, gracias y un saludo.
Buen día Alberto, no he entendido el problema que me mencionas del header, si pudieras enviarme otra imagen con el problema seria genial, por la parte de jquery al parecer no esta detectando que has agregado jquery, revisa que lo tengas bien en la parte de tu header y si no tienes jquery agregado intenta agregando esta linea a tu header:
he conseguido corregir el error muchas gracias ya no me salen errores, el problema es este que te muestro ;), y como veras nose por que me sigue apareciendo la imagen debajo de la otra :S he comprobado y no me salen errores de sintaxis help me!!!.
El problema de tu menú me parece que esta el error en tu código html, revisa bien que el nombre de tu id o clases concuerde con el de tu código CSS, sobre el slideshow, ahora tienes que comprobar que el id de tu slideshow sea #slideshow y en tu código script tambien
Amigo, tus tutoriales son geniales, ¡Felicidades! Me has ayudado mucho. Llegué hasta el capitulo 9 y me salio todo genial, excepto los botones del Slide que no me salen. He revisado las hojas de trabajo para encontrar el problema, pero no lo encuentro. Ah! y también quiero pedirte que me hicieras el favor de mandarme el Footer de las redes sociales, porque no tengo Photoshop, y lo que tengo es Linux y el editor de imágenes GIMP me lo pone incomodo hacerlo. El editor de texto (IDE) que uso es Geany.
Saludos!.
Hola snoppy, pero cual es el problema? no funciona bien el slideshow? o el problema es que solo no muestra los botones?
Para la imagen del footer, la tienes en el post, en el botón verde. Si es eso a lo que te refieres, saludos
Gracias por contestar tan rápido. El problema es que no aparecen los botones, sólo eso, no sé, creo que mi IDE no está conociendo el JavaScrip, el IDE que uso se llama Geany y vi que sí soporta el lenguaje JS. Las imágenes del Slideshow probe quitando la de arriba a ver si las otras estaban ahí, y sí siguen ahí… como debe de ser.
Y del footer, sólo quiero las imágenes 220x60px de las redes sociales. :)
El problema no creo que este en tu editor de código, ya que javascript es un lenguaje interpretado, el problema esta en tu código html y javascript.
Sobre las imágenes del footer, ya no las tengo, pero si que mostré donde descargar los iconos.
http://www.iconspedia.com/pack/web-social-2021/
Gracias por contestar tan rápido. El problema es que no aparecen los botones, sólo eso, no sé, creo que mi IDE no está conociendo el JavaScrip, el IDE que uso se llama Geany y vi que sí soporta el lenguaje JS. Las imágenes del Slideshow probe quitando la de arriba a ver si las otras estaban ahí, y sí siguen ahí… como debe de ser.
Y del footer, sólo quiero las imágenes 220x60px de las redes sociales. :)
Aquí está mi página…
Hola en verdad me gustaron mucho tus tutoriales todo esta muy bien explicado pero tengo un problema :( en la parte del slideshow ya cheque todo el código y esta bien te dejo una foto para que veas que es lo que sucede… cuando actualizo la pagina esto es lo que sucede.
Es esto lo que me aparece me aparece la segunda imagen del slideshow :( AYUDA..
Normalmente si fuera un error de ruta de javascript te mostraría las imágenes por encima de todo, pero al parece el problema que tienes este en tu código css, revisalo bien, sobre todo la parte del overflow hidden y de la altura y ancho.
Oye Falcom Masters o Carlos Arturo muchas gracias, por ti aprendí a escribir hiper textos, como html5 y css y también aprendí a programar javascript en tu canal de youtube y aprendí a hacer muchisimas cosas, GRACIAS, también que te quería comentar aunque no viene al caso pero cambiaste mi vida por completo, si no fuera por ti ahora seria un niño rata que sube vídeos a youtube y juega todo el día xbox pero ahora siempre me la paso escribiendo códigos css y html5, y por último, que editor de código usas? yo SublimeText.
Me alegra mucho que hayas podido aprender y espero que lo sigas haciendo. Utilizo tambien sublime text 2
en css escribe esto:
header img {
display: block;
}
ESTO ES LO QUE APARECE AYUDA … :(
Muy bueno el curso y me gustaria saber como puedo seguir conesto, ya tengo todo armado, Como puedo continuar con lo demas? Gracias
Este curso de diseño básico termina aquí, pero tengo otro curso para crear una plantilla para WordPress, te dejo el link aquí para que le eches un vistazo, pronto mas cursos en mi canal.
https://www.falconmasters.com/cursos/como-crear-un-theme-para-wordpress/
Excelente todo mi pana, te felicito sigue así, siempre reviso tu espacio. Tengo un problema y lo quise dejar de último es la parte del Sidebar «artículo reciente» me sale abajo y he revisado el código demássss. Por favor te lo agradezco, desde Venezuela.
Aquí el problema pueden ser 2 cosas, en los float, o en que no has cerrado la etiqueta de la sección verde.
Buen curso pero tengo un problema no me aparecen los botones del slideshow, no se que podría hacer para solucionarlo
Esta muy bueno el curso, pero tengo un problema con los botones del slideshow y es que no me aparecen, no se que podría estar pasando en este caso
hey amigos que buen espacio de aprender y poner en practica lo aprendido gracias Carlos arturo bendicion!
segunda parte
tercera parte
Q TAL AMIGO MUY BUENO TUS CURSOS, HE SEGUIDO DE CERCA PERO TENGO UN ERROR CON EL HEADER Y EL SLIDESHOW, YA REVISE TODO EL CODIGO Y NO CONSIGO EL ERROR, PUDIERAS ENVIARME EL ARCHIVO CSS Y EL INDEX PARA COMPRARLO CON EL MIO Y VER EL ERROR ADJUNTO IMAGEN PARA QUE ME AYUDES PORFAVOR.
SALUDOS
Hola, me podrías decir qué error tengo que me salen las imágenes así? Gracias.
Hola Carlos Muy bueno el tutoria!!! muchas gracias, me gustaria saber como puedo darle play al slideshow para que corra solo. Gracias. Saludos
Carlos, seguí todos tus pasos 1 a 1, y me sale esto en el slideshow… http://gyazo.com/8819a71473fcd2db7aa8e646bd94fe84
Lo que pasa es que posiblemente no cargo el archivo de js. Lo que tendrias que hacer es revisar que la ruta este bien al igual que tu código.
Saludos.
Hola julio, fijate que tengo un proyecto y es de crear una pagina web, quería incluir un slideshow pero cuando actualizo la pagina me sale esto, no se si sea por el archivo de ruta, aunque ya lo recibe varias veces y no logro encontrar el problema. En la imagen podras ver que sale subrayado con rojo en la parte de function y lo que sigue, me dice que la funcion slides no es una función. Necesito que me ayudes.
Saludos!
Tengo el mismo problema que tu :v Lo solucionaste?
Hola tengo una duda no se si me puedas ayudar es que quiero que mis imágenes del slideshow pasen automáticamente yo ya vi el tutorial que tienes de slideshow pero no quiero que aparezcan numero ni play ni nada así tal cual como aparece aquí en el tutorial con los botones nada mas lo quiero así pero no he logrado que quede automático me podrías ayudar
gracias
hola bro una pregunta……. como agregarle tiempo a las imagenes en el slideshow, es decir que pasen por cada 3 o 5 segundos automaticamente.
Oigan es necesario tener el adobe photoshop que no encuentro de donde descargarlo hay unas versiones de 150mb y otras de 1 gb
Hola… Gracias por compatir el conocimiento… He seguido sus grandes videos y me animan y entusiasman a estudiar y enseñar…
En el video No. 09, me quedó una duda: En el archivo html no veo la clase pagination, en CSS la trabajas…
Pensé que la mencionabas en html
¿Qué función cumple esa clase?
Lo que pasa es que el slider agrega codigo HTML que no vemos directamente en nuestro documento, pero si revisas en el código fuente de tu pagina desde el navegador, veras que hay codigo nuevo.
Hola estoy siguiendo tus cursos te felicito en realidad son muy buenos….podrias decirme luego de los cursos de diseño web desde 0 con que otro curso me aconsejas seguir de los que tienes en tu espacio ya hice los de html y css. gracias
Carlos Arturo. Tengo un error con el slide show he estado revisando el codigo y he notado que en el 5 video cuando se hizo la parte de HTML nunca se definio una clase llamada pagination, ni los ul ni los li, de hecho en el codigo que esta en el quinto tutorial esa parte no aparece, y creo que por esta razon cuando vamos a darle diseno con CSS no aparecen los botones. Tengo el mismo error de Euquerio Ramirez.
Hola carlos el sitio web me quedo de lo mejor pero me gustaria poner el slideshow automatico
Bendiciones Falcon! Oye no explicaste como agregar el codigo HTML para los bullets, lo podrias compartir en el tutorial escrito porfa!!!!!!!!!!!!!!!
Por que yo descargue el demo que subiste y ahi en la seccion de Slideshow del HTML esta el código que no comentaste, yo lo descargue y ya me aparecen los bullets, el problema es que el slideshow se queda estático y no hace ningun tipo de animacion, ya revise las rutas js y todo esta bien, me parece que el problema esta en el HTML.
aydame con esto porfa
quetal amigo muy bueno el tutorial pero ,,,tengo un problema no se si me podrias ayudar en el capitulo 9 no me aparecen los botones del slideshow y es solo ese el problema
muy buen curso pero no me aparescen los botones y de ai todo esta perfecto y gracias por tu ayuda
como lograste que te aparecieran los botones ?
aca estan los codigos si puedes ayudar revisandolos gracias
men soy un principiante y quiero saber sobre el reset cuando intento desgargar no encuentro
Hola Carlos, te quería hacer una pregunta: se pueden poner más de un slideshow en una misma página? Quiero hacer varios debajo de sí mismos. Gracias! Copio los estilos del cada uno de los ‘section id’ pero se me muestran una imagen debajo de la otra sin que me aparezcan los puntos que son para desplazar las imágenes.
Carlos Arturo, despues de haber seguido tus cursos de HTML, CSS y ahora éste de Diseño y Maquetación Web debo decirte que he aprendido mucho y te agradezco por ello. Actualmente sigo en la plataforma UDEMY tu curso de PHP pero primero quise terminar este de maquetación web para bregar con cuestiones un poquito más complicadas.
Mi situación, al igual que la de todos los compañeros que han publicado, tiene que ver con la última parte, la del «slideshow», al parecer no es tan sencilla, yo he seguido uno a uno los pasos, los he repetido, he mirado los códigos del source de la plantilla muestra de FM y he copiado y pegado los CSS de cada sección del curso publicados en estas páginas y nada que logro que el bendito «slideshow» me permita ver las imágenes 1 x 1 y mucho menos ver si los botones publicaron o no. Adjunto una captura de lo que hasta aquí he logrado construir, me gusrtaría me pudieras ayudar con esto pues aún a esta hora sigo bastante frustrado buscando el error. Si necesitas mis códigos (html y css) para echarles un vistaso solo déjame saberlo y te los mando.
Cordialmente,
DFSS:.
PD: Se puede acceder a la página online en la siguiente dirección: http://lanavedelsabor.com/sample/index.html
donde esta la carpeta slide que dices para descargar, no lo encuentro, gracias y si lo abro, sale una pagina de un hombre, y que no hay nada de links. es una pagina vacia.
Hola que tal, la verdad muy buenos tutoriales solo que de acuerdo a las versiones del video ya no concuerda con lo establecido por ejemplo en lo que es el slide, ya es otra version y el codigo no funciona como en el video, lo demas muy bien.
Excelente material, sigue colocando más tutos