Fundamentos del Responsive Web Design
HTML-код
- Опубликовано: 28 сен 2024
- Inscribete al curso: escuela.digital/
Visítanos en nuestra página web escuela.digital
Síguenos en Facebook: escuela.digital...
Síguenos en Twitter: escuela.digital...
Únete a la comunidad Escuela Digital en Facebook:
escuela.digital...
![State of Play | September 24, 2024 [ENGLISH]](http://i.ytimg.com/vi/fVs0suPHAX8/mqdefault.jpg)
Hemos actualizado la teoría del Responsive Web Design a 2018. Mira el video aqui ruclips.net/video/4I49TGRdVy4/видео.html
Excelente explicación, luego de ver vídeos sobre el tema, este ha sido el mejor.
¡Excelente la claridad con la que explicás! Éste y todos tus videos. Mil gracias.
Este video debería verlo todo aquel que desea conocer la base del Responsive Web Design de forma clara y práctica.
Dudo que haya aun video que explique mejor el tema de responsive web desing y que abarque tanto contenido en y tan bien explicado, excelente video.
Hola maestro, que me ha resuelto algunas dudas, hombre su clase no podría ser más precisa, que le agradezco infinitamente. un saludo!!
Muy bien explicado, conceptos basicos pero necesarios para el Diseño Responsivo, felicidades.
Muy bueno Alvaro. Como todos tus videos. Muchas gracias.
Muchisimas gracias, muy claro el video.
Esperamos más tutoriales, saludos desde Bolivia.
Gracias Alvaro! Tenía un buen rato buscando material claro que me ayudara a terminar de comprender el modelo de cajas, grids y las medidas relativas.
Recomiendo ver el video entero, no tiene desperdicio. Pero para quienes quieran ver temas puntuales:
1. Viewport (3:05)
2. Media queries (8:11)
3. Modelo de caja (15:47)
4. Grids (24:13)
5. Medidas relativas (27:31)
6. Manejo de imágenes (36:17)
7. High Density Pixel (38:21)
Eres un verdadero maestro. Muchisimas gracias por esta brillante explicacion!!!
Te amo
Es sorprendente, me ha sido de mucha utilidad la información, gracias
Excelente explicación! muy profesional tu forma de exponer los temas..
Muy buen vídeo, excelente información, Muchas gracias por tu trabajo. Saludos Natalio desde Argentina
Súper súper tu video! Muy bien explicado!!!
Excelente video! Muy buena explicación. ♥️
Muchas gracias!!! Gran ayuda saludos de uruguay
Explicado en alta plastilina!! excelente vídeo y excelente explicación. Muchas gracias!
Muchas Gracias!
Hola que tal, me parece muy interesante tu video. Tengo una inquietud como se debe trabajar cuando al contenido de las secciones le agregas un boton o un div que tenga el estilo de un botón?. Como trabajar responsive en botones?. podrías mostrar un ejemplo o una guía porfavor. Felicidades buen video y buen profesor.
Muy buen vídeo saludos desde Colombia
Agradecido contigo, excelente explicacion, al punto. :D
pregunta: esta actualizado esto? por que hoy en dia todos los celulares tienen resoluciones grandes, no es que existe una manera de que reconozca si el navegador es mobile?
Muy buena explicación por parte suya Señor, sin duda adoptare ED como mi canal por default! Por cierto una pequeña duda que talvez es muy tonta pero me gustaría saber que sucedería si tengo imagenes de distintos tamaños!?
+Hed el lo explico simplemente lo adaptas a cada @media query con el doble de tamaño del validador para que no se muestre pixeleada
Interesante video amigo, gracias
Increible, amigo!
oye alvaro excelente explicacion pero tengo una duda acerca del modelo de caja, cuando te refieres que si el ancho de mi caja es de 400px y si le agrego un padding, un margin o un border esta crece pero a los lados es porque no especifique la altura de dicha que caja? quiero decir que si agrego una altura de 600 px y la anchura sigue siendo 400px al agregar un margin de 15px mi caja crece a 430px x 630px?
Excelente video.! muchisimas gracias.!!
Gracias por hacerlo tan facil, me suscribo :)
muy buen video, solo una pregunta entonces que tipo de medida relativa tu me re comendarias para hacer una web, muchas gracias , saludos desde colombia
Recomendaría que dejes el código fuente del video.
Muchas gracias , muy buen video.
Gracias!
Haber si haces unos videos de como implementar y usar Foundation
Como se llama lo que usas para que el CSS se actualice automáticamente?
hola muy buen video, muy importante responsive, una duda, en lo que es html 5, cuando pones varios sections, no tendrias que poner un solo section y dentro de ellos poner article.
y no es que hay 3 margin, izq 1%, centro entre las dos cajas 1% y el margin derecho 1%?. saludos
Muy buen video y bien explicado, tienes un Suscriptor más ✌✌
muy buen video
Con este tutorial recién entendí al 100% sobre el tema, muy buena explicación, gracias. esta es tu pagina, las otras no enlazan. ed.team/cursos/html y este la pagina principal ed.team/
Excelente!
Muy buena explicación
Muchas gracias !
hola disculpa como puedo ver en crome como tu ves en fierefox la simulacion del tamaño de dispositivos?
F12 de tu teclado y te lleva a las Herramientas para Desarrolladores y ahí ves todo.
Hola! necesito urgente que alguien me ayude, de aquí a mañana necesito insertar un Menú en un html-css. por favor necesito saber si alguien puede explicarme como hacerlo, el menu no tiene que ser desplegable. POR FAVOR! GRACIAS.
Buenisimo
Gracias !
Basado
Señor se mas joven
No se puede negar que este man, explica con un nivel muy alto, Nota: video de hace 7 años e igual super profresional!
Gracias Álvaro Felipe. Me encantan tu forma de explicar. Siempre aprendo mucho de tus videos.
El max-width: 100% no estuvo bien explicado. "...le estás diciendo que el ancho máximo es del 100%" fabuloso, por supuesto! claro que lo está haciendo! pero no me dice nada. 100% de qué? y por tanto nuevamente a la pregunta "porqué" la foto entra en el section con un max-width: 100%? Gracias.
Excelente vídeo y muy bien explicado. Se agradece la dedicación. Luego voy por al actualización de responsive 2018
muchas gracias x el video, le cuento un poco yo recien entro al mundo de paginas web hace 1 mes recien , y sus videos son super geniales la explicacion a1 a usted le entiendo mucho mejor k ami profe es enserio. eh una preguntita, yo e hecho mis paginas en pixeles todo pero ahora me dicen k tengo k cambiar a responsive, me dijeron k trabaje en porcentajes y em, pero como cambio los pixeles a porcentaje o em ..kisiera una ayudita...MUCHAS GRACIASSSSSSSSSS....:)
Lo raro es que en mis imagenes de Slider cuando son vistas en el iPad 1G se me distorsionan como si tuvieran un zoom muy alto, (en medio de la imagen hay un titulo tipográfico que no se deforma),,, pero en otros dispositivos android, se ve bien la imagen.
hay algun codigo para arreglar eso?
Vida infeliz! Porque hasta ahora veo este video tan bien explicado por el profe Álvaro?......
aquí en 2017, no es necesario usar javascript para cambiar de imagen segun la resolucion... Tampoco Css! existe la tag Picture en html, es bastante bueno si se usa adecuadamente.
Hola Alvaro! Tengo una duda. Para trabajar en el desarrollo de paginas web ¿Estudiaste una carrera técnica o universitaria (que carrera)?
Gracias de antemano por tu respuesta.
Saludos!
Hola ví su video y me gustó mucho. Te pregunto algo para ser un responsive web design, de tiene que saber programar en algún lenguaje de programación??
Excelente. Ya entendí. Muy claro todo...Muchas gracias
Wao un like y exelente video, pero no se si es que soy tonto, pero no entendi muy bien la parte del box-sizing y el em, en el box-sizing:border-box, el padding agarra lo que seria los tamaños de el border para mantenerlo en un mismo tamaño, es decir, se supo que que mescalndo el padding, mas el border, y margin, se le suma el widht, pero, con esta propiedad, el paddin, mantendria o agarraria(por decirlo de una manmera) a el border para mantenerlo a raya??
Y en cuanto a el em, no entendi muy bien :c... Pero muchas gracias por el video
Sr Alvaro Felipe...Desde ya ,le envio mis màs sinceras felicitaciones por el video,muy bien explicado...un placer para los novatos còmo es mi caso,el seguirlo y poder hacer los primeros pinitos en Responsive Web Design..Gracias por compartir sus conocimientos...
Maestro idolo... muchas gracias Dios bendiga tus manos y tu arte...
una duda profe. por q 100 entre 3 y 100 entre 4. disculpe mi ignorancia
Cuál es la unidad de medida CSS mejor utilizado para responsive design?
Álvaro saludo, entonces es mejor trabajar con rem medida relativa y se evita tantos Dolores de cabeza ?
Que tal, en el min 23 tenias un sólo bloque y luego se volvió en dos bloques, como lo hiciste?
Qué pluging utilizas para simular los tamaños de pantalla desde el navegador?
Quiero saber quien me puede enseñar como crear y diseñar pagina web y costo tiene.
Muchas gracias por tus enseñanzas. Me han sido de gran ayuda. Un saludo.
muy bien explicado , me ha sido de mucha utilidad . Me suscribo a tu canal
Para hacer un diseño de libro que se adapte a todos los dispositivos es posible usar responsive.
Quien sabe como se lanza la pagina desde sublime text al navegador
El mejor vídeo que he visto sobre Responsive Design. Excelente canal, explica muy bien en todos sus videos.
como haces para que te salga el tamaño de la pantalla cuando aumentas o reduces???
y como es que hasta ahora apenas lo veo... Excelente!
t4endre que usar las media queries,saludos desdeDallas Texas
Un capo total. Desde Argentina.!!!
como consigo line style para ver los cambios en tiempo real
Hola buenas tardes,
Me parece excelente tu explicación
Ya me suscribí a tu canal, sin embargo,
Resulta que utilizo max OS sierra y Sublime text 2, y no me funciona utilizar LiveStyle.
cuales serían los pasos para usarlo? podrías mostrar un ejemplo de carga, instalación y uso,....gracias por tu atención
usa el 3 y descarga la aplicacion para pc de livestyle
ES EXCELENTE TIENES QUE MIRARLO SI TE TE INTERESA EL RESPONSIVE
Gracias por el video :D Excelente
muchas gracias eres un pro explicando.
Excelente video..!! un consulta..si estoy utilizando un framework como bootstrap o materialize es necesario colocar el meta- viewport ??
+Jc Contreras Meneses si, para asegurar que su sitio se adapte segun el "viewport" del aparato mobil o tablet.
Muy buen video!..me gustaría saber su opinión acerca del framework "Materialize" he escuchado buenos comentarios o cual me podría recomendar para el desarrollo de mis proyectos. Saludos desde Colombia.
Muy buen video y muy bien explicado. Mi enhorabuena por el trabajo.
Muy buen video me gustó . Bien explicado amigo saludos!!
Genial explicación, como siempre
Excelente video, clarisimo todo
MIL GRACIAS APRENDÍ MUCHO
Buen aporte...
como hago para que se reflejen los pixeles en mi ventana mientras reduzco o aumento para poder calcular con cuanto pixeles trabajar, asi como se ve en la del tutorial?
+Andres Sanchez con un complemento para chrome que se llama resize window y que ademas permite cambiar las resoluciones de pantalla
¿Qué extensión o pluging utilizas para simular los tamaños de pantalla desde el navegador?
el google chrome, firefox, opera, todos lo tienen, click derecho en la pagina y seleccionas inspeccionar elemento, o Inspeccionar, y te sale esas opciones de desarrollador. suerte.
Creo que seria mejor tener videos mas cortos y enseñar cosas mas precisas y hacer una serie de videos para asimilar toda esa informacion mas facil, otra cosa ,si por favor podria buscar un mejor lugar para grabar sus videos y que asi se vea mas profesional la verdad se ven de muy mala calidad y si juzgo el curso por la primero impresion veo a un tipo que no sabe nada de lo que va a hablar, realmente de plano ver a un profesor con una camara de poca calidad y de fondo un monton de cosas, me hace pensar que el video no es bueno
Alice Johanna Perez Villanueva De verdad estas consiente de lo que dices... ? creo que los de mejorandola como ya lo dijo un usuario más arriba, te dejan mas dudas que respuestas... pero bueno, estos son unos excelentes videos y soy novato en el tema de diseño web, llevo desde el 97 en aplicaciones c/s para escritorio... y al respecto curse y continuo actualizandome atraves de talleres, conferencias y/o cursos donde al igual que el amigo Alvaro denota existe conocimiento, seguridad, formalidad, dominio y una excelente transmición de lo que se pretende y se menciona en el titulo del videotutorial.
Muy bueno el video!!!..me gustaría que pusieras las herramientas que utilizas y así ayudarías a otros como a mi, jeje...Saludos..
Se que este video es viejísimo pero siempre te he seguido y quisiera que me respondas por favor, a la luz de hoy me confunde la maquetación en estos temas.
1- Qué diferencias hay entre los floats y cuando se usan, no es lo mismo hacerlo con los displays para alinear los elementos¿?
2- Todos los elementos deben tener propiedades obligatorias, tipo height, los máximos y mínimos, cuando saber que usar¿?
3- En el tema de los posicionamientos de las cajas con respecto a otras, cuando es correcto usar margins, y cuando es correcto usar los ejes top, left, right, bottom¿?
¿Donde puedo contactarte - no para abusar de tu buena fe - pero para preguntarte ciertas cosas sobre fundamentos, consejos y otras cosas que aun me dan como miedo al maquetar?
Saludos amigo espero tu respuesta y gracias de antemano.
Más didáctico imposible!!! , Gracias Álvaro Felipe por compartir tus conocimientos...
que opinas de Bootstrap?
excelente explicación, justo lo necesecitaba para mi estudio y trabajo, gracias brother
Excelente Alvaro.
Te sigo-.
Gracias
Excelente facilitador
Excelente video. Me quedan claros los conceptos para poder comenzar un responsive para mi sitio el cual esta bsatante pobre todavia. Gracias por la clase y los tips. Saludos James
Suscrito, muy buen tuto
Edteam, sois los mejores
Hola Alvaro , geniales estas indicaciones sobre los fundamentos para web responsivo. Te agradezco mucho que impartas por este medio tus conocimientos y sobre todo agradezco por brindar tu valioso tiempo para hacerlo, salud2 👌
Gracias por tu vídeo, la vdd me hubiera caído muy bien verlo antes, jejeje, créeme que valió la pena tu esfuerzo al hacer esta explicación, porque para mí fue altamente educativo y aprendí demasiado.