Maquetar una Web con Bootstrap 4 #1- Diseño y Programación Web
HTML-код
- Опубликовано: 6 фев 2025
- Muy buenas! Mi nombre es Rafel Sansó y este es mi canal de diseño y programación Web. Desde este canal veremos desde trucos de diseño gráfico aplicados a la Web como tutoriales y talleres de programación. Sobre todo me centraré en WordPress, pero si queréis algo específico, dejadme un comentario y veré lo que puedo hacer. Espero que os gusten mis contenidos!
Continuamos con nuestra serie de vídeos que tienen como objetivo crear nuestra propia plantilla WordPress. Hoy nos toca empezar la maquetación. Para ello usaremos el frameWork Bootstrap en su nuevísima versión 4. Hay que tener en cuenta que está en fase alpha y puede que nos cambien partes del código antes de terminar con la serie. Pero nos gustan los retos! Acompañadme en este nuevo vídeo y aprenderéis a maquetar con Bootstrap 4. Disfrutad del vídeo!
Material para el proyecto:
Editor de código Sublime: www.sublimetex...
Bootstrap 4: v4-alpha.getbo...
Font Awesome: fontawesome.io/
Google Fonts: fonts.google.com/
Archivos del tutorial: www.dropbox.co...
Más artículos de diseño y programación Web: www.rafelsanso....
Facebook: / rafelsansodev
Twitter: / rafel_sanso
AskFM: ask.fm/RafelSanso
3universo: www.3universo.c...
No se puede explicar más y mejor en 22 minutos de que va Bootstrap. Te felicito!!
Muchas gracias por tu esfuerzo!!
Dudas sobre maquetación en Bootstrap? Dejadme vuestros comentarios y miraré de ayudaros en todo lo que pueda. Recordad que también hay disponible la red social de ask.fm en donde me podéis hacer preguntas más genéricas sobre diseño y programación Web.
disculpame soy nuevo en el mundo de armado de paginas web, pero cual es la diferencia usando html y css simplemente?
Como agrego el logo ¿cual es la opción?
*wow! creo que eres uno de los mejores maestros que he tenido en mi vida! expilcas de un aforma muy clara y natural. Me suscribo, like!*
De lo mejorcito que he visto. Enhorabuena y muchas gracias por compartilo.
Excelente el tutorial Rafael, muy fácil de comprender, Gracias por tu aporte!!
donde carajos has estado toda mi vida, jajaja muy buen contenido. gracias
xD
x2
@@jefjef418 x2
Estuvo atrapado en la singularidad de Gargantua salvando a la humanidad XD
Sos un capo , gracias Lider
SUPER.... me gusto el estilo y forma de explicar, muchas gracias!
Gracias por tus videos ya puedo por fin usar librerias adecuadamente
Maestro!!! Me suscribo en una!! Gracias por compartir tus conocimientos un abrazo
Excelente saludos!
Muy bien explicado ,me ha servido de ayuda..gracias
Uf genial esta serie de videos! Gracias!!!!
Increíble vídeo ¡Felicitaciones!
Excelente! Gracias por tu vídeo
Gracias bro, me has ayudado muchisimo, me suscribo
Excelente video, mis rotundas felicitaciones.
Excelente video y muy buena explicación
genial, te has ganado el cielo para mi, me subscribo.
Soy programador backend y soy muy muy nulo en todo lo de frontend, no sabes cuanto sufro sin saber maquetar por mi mismo, siempre ando usando código html ajeno, voy a empezar a aprender de tu canal.
A mi me gusta hacerlo sin frameworks, pero muy buen video, te ganaste un sub más
ZOOM es todo lo que pido.
muy bueno el canal,
exitos!!!
Excelente, Gracias por tu contenido :)
Buen tutorial excelente
Sois el puto amo, gracias
TIO TE AMO, ME SALVASTE MI PUTA VIDA AHORA SAN FERMINES REEMPLAZAR A SAN RAFAEL SANSO, CRACK DE CRACKS XD
excelennnnnnte explicas biennn...muchas gracias .sucrito.
yo ya tengo mi dominio en wordpress pero como hago para que todo lo del video quede anclado con mi dominio de wordpress?
excelente tutorial, pero te quiero hacer un aporte, procura que el texto del codigo aparezca mas grande en el video colocale zoom o algo, no se nota bien,
Hola Rafael, perdona mi ignorancia. En el css que diferencia hay entre .menu bar {} y .menu bar a {} ?? Que función cumple la a?
La "a" hace referencia solo a los enlaces, a las etiquetas
hola, buenos días mi pregunta es opinión sobre dreamweaver para maquetar , diseñar porque no usas? espero tu respuesta ya me suscribí muy buen canal.
Ya usé Dreamweaver durante años. La verdad es que se me quedó pequeño y limitado. Es verdad que con las últimas actualizaciones está muy completo, pero prefiero otro tipo de editores. Al trabajar con 2 monitores, puedo ver el resultado final sobre el navegador y no necesito vistas simuladas del resultado.
Sos un masterrr ! gracias. Ahora, un consejo ... la musica amigo, no va, me da verguenza escuchar con parlantes y me oigan, se oye demasiado infantil y como de bricolage
Buen video una consulta cómo hago que se quede estático la barra de menú horizaontal nav y que me siga por más que baje
excelente
buenas noches
con este metodo tu no usas themes en wordpress. es decir creas uno propio. o que es lo que se quiere demostrar, es mejor asi o empezar desde inicio con wordpress. tengo esa duda.
gracias.
El objetivo de esta serie de vídeos es montar una plantilla a medida para WordPress, desde cero. No es que sea mejor o peor. Solo que las plantillas de pago y gratuitas las ha desarrollado un programador. Y quería enseñar a la gente como se puede hacer.
Rafael, como puedo resaltar un color para cada icono de redes sociales (facebook,instagram,twitter, cada uno con su color original) al pasar el mouse en cada una de ellas...? espero contar con tu ayuda de siempre.
Disculpa, ¿Cual es el vídeo donde aguardar las imágenes para web?
Gracias por el video tutorial.
Podrías hacer el texto de código más grande en los siguientes, esta demasiado pequeño.
Me lo han comentado en varios vídeos. En todos los próximos ya he subido el tamalo de letra. Gracias por la recomendación ^^
Ya me ando enloqueciendo con tanta cosa 🤯estudiaré pronto Diseño Gráfico y cómo darán estas cosas y más me la eh pasado viendo videos para empaparme más de información y de lo que se pero vaya mucho rollo 😩
Bueno el vídeo, me gustaría que dejaras las imágenes que usas en la maquetación para descargar
Tienes los archivos en el último que subí sobre maquetación en Bootstrap 4. Lo tienes en la descripción de este vídeo: ruclips.net/video/dE5GMO9q3Pw/видео.html
Gracias
Gracias por la info. Faltaria un pelin de zoom, para que se vea mejor el codigo.
Hola Rafel, ya solucione lo del margen, pero hice el meno con el navbar de bootstrap, y agregándole estilos al menú me encontré con un problema en el logo, no quiero que se me marque en color naranja cuando paso mouse encima de el, pero no logro solucionarlo, aquí te dije el código, si me puedes ayudar te lo agradecería mucho.
ViveloViajes.Club
Inicio
Quiénes Somos?
Reserva Ya
Charlie Tips
Blog
Zona VIP
Clientes Satisfechos
Contáctanos
Previous
Next
/*General*/
body
{
font-family: 'Baumans', cursive;
}
/*header*/
.navbar
{
background-color: #fff;
box-shadow: 0px 8px 12px -12px #000;
}
.navbar a
{
color:#e46a1b;
font-size: 20px;
font-weight: 600;
border-radius: 90px;
}
.navbar a:hover
{
color:#fff;
background-color: #e46a1b;
border-radius: 90px;
}
/*Content*/
/*Footer*/
Eso no es un problema ni de bootstrap ni de CSS en general. Es debido al navegador que usas. Es lo que se llama outline. Y lo llevan todos los navegadores por defecto. Por suerte, se puede corregir por css:
css-tricks.com/removing-the-dotted-outline/
Gracias!!!
Lo logre solucionar agregando style="background-color: #ffffff;" en la clase que define la parte del logo.
nice thumbnail
Hola Rafel felicidades por tu canal y gracias por todo lo que enseñas, estoy haciendo el ejercicio y cuando pongo esta linea de codigo, , la barra social no se me va a la derecha, si quito el "xs", se me va pero no me queda centrado en la barra como a ti ¿a que puede deberse? Gracias de antemano
Buenas Adrian!
Gracias por tu comentario! Si al quitarlo te funciona significa que estás usando una versión diferente de Bootstrap. En la versión 3, aun se alineaba solo con el text-right. Es a partir de Bootstrap 4 que se alinea con text-xs-right.
Saludos!
Lo rehice todo de nuevo, para asegurarme que estoy con la versión 4 y no consigo alinear a la derecha, si le quito xs se alinea pero no es responsive.
Podrias poner los codigos para poder ver donde me equivoco?
Aquí tienes el código de la maqueta completa. Espero que puedas encontrar dónde está el error. Seguro que falta alguna instrucción o clase: goo.gl/wpqxZO
Rafel Sansó - Diseño y programación Web muchas gracias, no sabía si pedírtelo porque con todo el valor que das tengo la sensación qué abuso. muchísimas gracias
Faltaría más! Todo lo que doy en mi canal es de carácter público. Podéis cogerlo, modificarlo, lo que queráis! Lo que busco es poder enseñar y que aprendáis todo lo posible :)
hola,buenas tardes .
amigo tengo una pregunta como hago para poner el menú responsive ?
Buenas! El último vídeo de esta serie te enseña el tema de las columnas de Bootstrap, para la parte responsive goo.gl/1dDMYS
Si utilizas Bootstrap 3 (el vídeo está con Bootstrap 4), tienes la documentación oficial: goo.gl/voMhuL
Espero que te sirva!
Hola Rafel, en el link que me diste hablas de la repartición de columnas y demás, pero solo mencionas que la parte responsiva sera en otro vídeo y estuve buscando y no encontré el vídeo, podrías facilitarme el link del tuto.
Gracias
Buenas! Ese vídeo de las columnas muestra la base para montar el menú, en el sentido de la estructura. Pero si quieres montar un menú que se pliegue en móviles, de forma automática, te paso el link de Bootstrap. Tienen el código y solo tienes que copiarlo. Este elemento lo llaman navbar: getbootstrap.com/components/#navbar
a okey, es que pensé que mostrabas la forma de hacerlo en algún video. gracias por la atencion y felicitaciones por el buen contenido.
Gracias Sheldon :v
¿Dónde esta la continuacion del video?
Es mas que curioso que yo detestando el diseño tenga que ver mas de un tercio de mi carrera en diseño y programacion web :'v sin lugar a duda ya se me esta pasando la fase noob aunque lo mas seguro es que le halla cojido asco al diseño por tener que hacer interfaces por codigo y a ciegas en Java. HTML y CSS son herramientas muy utiles y el resultado es bastante estetico la verdad (no como esa otra mierda jajajaja).
Nota: para los que esten en la misma que yo hace un tiempo, Java ahora se utiliza del lado del servidor mas que de la capa del cliente asi que dificilmente han de tener que diseñar en Java otra vez en el ambiente laboral (aunque depende la empresa claro).
eh no joda, tantos conocimientos y no se te ocurre pensar en quienes ven el vídeo y poner el Zoom adecuado
el carrucel me sale con un borde que me lo separa del menu, ¿Como elimino ese borde?
Debe haber algún margin por ahí. Con el inspector de código del navegador puedes identificarlo y por CSS quitárselo, así ya quedará bien pegado.
Vale reviso hoy en un rato te aviso si lo logro o no.
Btw: excelente tiempo de respuesta, te felicito. Eres el mejor que he encontrado enseñando estos temas.
Te pareces al actor de Interestelar, a Matthew David McConaughey.
Hola... un favor, me podrías decir cómo inserto un video responsivo. Te agradecería mucho. :)
Si es un vídeo de youtube, en la misma página te dan el código para insertar un vídeo en forma de . Luego por CSS solo tienes que decirle que tenga un width de 100% y listo :)
Gracias!!! ya me salió :). Explicas muy bien, que tengas un bonito día.
Corali. Estás en todos los tutoriales que he visto! jajaja Saludos!
Hola quiza me puedan ayudar, tengo varias paginas inex, nosotros, servicios, contacto. Todas deben llamar a la cabezera y footer que estan en otra pagina, lo cual lo llamo con responsive. Todo funciona bien pero me deja un espacio grandaso debajo del , ya probe con padding, margin, etc y nada funciona. el codigo es el siguiente:
La forma correcta de hacer esto sería con PHP, o con otro lenguaje dinámico. Te permitiría tener los archivos separados pero al final lo mete todo en el mismo HTML. Porque meter contenidos en s es una mala práctica. Sobre todo porque lo que hay dentro de un no indexa en los buscadores, algo muy negativo para el SEO.
Ni con el telescopio del Monte Palomar podría ver la letra amigo!!!
Me gusta aprender pero me cuesta encontre esta pagina interesante. Trato de hacer todos los pasos, pero cuando le añades el logo fue mágico no vi como lo hicistes detuve el vídeo y nada no vi como. Que pena que vas muy rápido pero esta muy bueno. Voy a tener que buscar otras explicaciones que me complementen.
eh notado que a tus columnas le aplicas mucho el xs y algunas cosas no funcionan en pantalla normal por si a alguien no le funcionado lo cambio por md para que funcione bien.
Gracias por el comentario! Efectívamente, el XS se aplica para que tenga efecto hasta resoluciones de móviles. Para que el responsive sea diferente en esas resoluciones y solo cambie a partir de tablets, con el MD es perfecto. Todo dependerá siempre del diseño y de lo que queramos conseguir.
Hola, estoy programando con el movil y la verdad es que no se ve una mierda saludos.
como diseñaste en photshop
Eso es. Es mi programa preferido para el diseño Web.
Excelente video bro pero no se ven los códigos, sobre todo si ves el vídeo desde un móvil
cooper eres tu?
danmer ccosco xD
que tal yo nuevamente jaja, tengo una duda, ya realice mi pagina y funciona muy bien el local host, ahora trate de migrar todo a otro computador para seguir trabajando desde alla he vuelto a hacer todo nuevmante con relacion a la instalacion de wamp he montado la plantila he creado la base de datos y me funciona bien, solo que el menu no me aparece en horizontal sino en vertical, no se porque es exactamente el mismo codigo que tengo en el otro pc pero en el nuevo no me funciona, no se si tenga algo que cambiarle a algun codigo, como te comento es solo eso lo que no me ha funcionado lo demas todo se migro correctamente. muchas gracias este es el modelo de mi pagina..
biaxial-reveille.000webhostapp.com/
Buenas! Te está quedando muy bien la página! Sigue así!
Veo que ya solucionaste el problema del menú. Seguramente era porque cuando hiciste la migración no se copiaron los menús, y hay que crearlos de nuevo. Por defecto, WordPress añade todas las páginas cuando no hay un menú creado, y eso hace que no se vea bien.
Me gusta como explicas pero el código del video no se ve nada de lo pequeñito que está...
Fue uno de los primeros errores que cometí en el canal. Pero lo solucioné en los siguientes vídeos :)
Buena explicacion, pero no veo nada del codigo, deberias aumentar el zoom al sublime text. (Y)
Gracias por la sugerencia! Otros ya me lo han dicho y en los siguientes vídeos ya tengo el tamaño de letra mayor :)
este canal aun esta activo?
Yo os sigo leyendo, aunque no se cuando podré subir más vídeos...
Me encantaría ver mas vídeos de tus experiencias y de opinión personal en cuanto al desarrollo web, eres un gran tipo!
no se ve tu codigo
Lo malo es que no es un menu responsive
Se agradeceria un mejor Zoom.
Interesante el contenido pero, me quedaré ciego. lástima!
Me sabe mal. Es un comentario que me ha hecho mucha gente, y que ya he resuelto en los próximos vídeos.
DONDE ESTA LOS DEMAS PARTES
Puedes mirar en mis listas de reproducción, hay un vídeo de maquetación en bootstrap y otro de wordpress :)
Zoom plx
Muy pequeña la letra amigo!!!!
Zoom porfa
Eres bueno en tu asunto pero no explica los pasos correspondiente vas saltando y demasiado rapido muy fast
Buenas Julio! El objetivo de mis vídeos es ir enseñando muchas cosas en poco tiempo. Porque los vídeos que yo he visto suelen tener un carácter muy lento y pausado. Es por eso que siempre añado los archivos del tutorial en la descripción del vídeo, para que podáis repasarlo y seguirlo tranquilamente.
agranda las letras del editor mamertooo!!
Disculpame, pero he dejado de ver el video cuando he comprendido que alguien que afirma que Sublime es gratuito no es de fiar....
El acuerdo de Sublime es:
Sublime Text may be downloaded and evaluated for free, however a license must be purchased for continued use. There is currently no enforced time limit for the evaluation.
No hacerlo no es legal, y los que estamos en este mundo de informatica deberiamos de ser los mas exigentes con esto.
Está muy bien el apunte que haces. Pero para un desarrollador que está empezando no le puedes pedir que empiece a comprar licencias. Al menos hasta encontrar la herramienta que mejor se adapte a sus necesidades. Yo he programado con Dreamweaver, Notepad ++, Sublime, WebStorm... y si no los hubiera probado todos no habría sabido con cuál quedarme. Ilegal sería descargarme estos programas y piratearlos. Pero si tienen una licencia de prueba, eso no es piratería, a mi modo de verlo.
PD: Yo tengo licencia de Sublime en el Mac, si te sirve de consuelo.
Rafel: Es un tema que pensaba dejar cerrado, pero ante la corrección de tu respuesta no lo debo hacer. Me fije que tu Sublime estaba registrado, y quizás por eso salté. Disculpa, estoy cansado de ver la ligereza con que se maneja la piratería, y te toco a ti. Aunque no fuera por etica, deberia ser porque es nuestro trabajo;...en fin. Si, tambien tienes razon en que no es ilegal "probar", pero tu sabes que la gente se pasa "probando" años....y eso si lo es. Y si ademas tienes en cuenta la cantidad de herramientas gratuitas que hay,no es necesario entrar en ilegalidades.
Solo quería aclarar el tema, y agradecerte tu correcta respuesta. Eso es algo que en internet se ve tan poco, que , desgraciadamente, es novedoso.
Gracias por tu respuesta Miguel! Con comentarios como el tuyo podremos educar a los futuros programadores. Entrando en debates de forma muy correcta y educada. Siento si te ofendí diciendo que Sublime es gratuito, ahí tienes tu la razón. Espero que aceptes mis disculpas y puedas seguir viendo mis vídeos sin problemas.
Rafel...Me he suscrito!
:D