Diseñando una galería de imágenes con flexbox
ฝัง
- เผยแพร่เมื่อ 25 ส.ค. 2024
- Cumpliendo lo prometido... diseñando una galería sin frameworks.
Ejemplo:www.hibachicate...
Nuestro sitio oficial: jygproyectosweb...
Síguenos en facebook: / jygproyectosweb
Síguenos en Twitter:
/ jygproyectosweb
Ya no se que calificativo ponerte Jean Carlos....simplemente me quito en sombrero. Eres un crack. Haces que lo difícil sea fácil. Sencillamente Gracias.
gracias.. eh practicado con tu ayuda y eh aprendido mucho.. genio! grosoo
Maestro usted tiene mis respetos .. Like .. excelente material educativo
Saludos al Peru, soy de Guatemala y te veo desde USA gracias x los videos. buena honda !!
Excelente el video Jean Carlos eres todo un máster, gracias por compartir tus conocimientos y saludos desde México.
aun no veo el video pero se ve bastante bueno, con esto uno queda bastante claro como diseñar con flex box... te felicito por que explicas bastante claro y eso lo hacen las personas que conocen del tema.... asi que felicitaciones ..... saludos!! :)
cuando explicas se te entiende a la perfección
Quiero decirte que me da mucho gusto ver tu canal porque eres una persona muy sensilla y yo puedo ver que su intención és que todos sepan algo de HTML y CSS. Muchas gracias desde Brasil!!
+jrbhbr Muchas gracias
Gran explicación y muchas gracias por compartir tu muy valiosa aportación con el mundo, un saludo desde México.
ustedes siempre me salvan gracias por sus ttutoriales
que genio man, ole !
gracias excelente como siempre
Excelente, soluciones sencillas a problemas complejos.
Buenisimos tutoriales gracias a ellos le puse un slider y una galería a mi web sigue así gracias por ayudarnos a los que desarrollamos web
Pásanos la dirección de tu web para visitarla y ver qué tal te quedó. Saludos
Gracias por este tutorial ... saludos desde colombia
Eres un genio !! me han ayudado mucho tus tutoriales
gracias por el video tutorial y muchas gracias por tu conocimiento exito al canal
Fantástico Jean! Por cierto, quisiera pedirte un favor. Podrías decirme que medidas utilizaste para las imágenes? :) saludos desde México
Como siempre buen aporte hermano!
excelente vídeo :) gracias por tú tiempo y por compartir
muy bueno jCarlos apareci en el primer comentario de face jajajaj, buenos videos amigo, sin complicaciones y solo html y css que nos acomoda muy bien, sigue enseñando, seria bueno mas videos de PHP para avanzar :D saludos!
muy bueno man! excelentes aportes esta! esta comunidad creo q poco a poco va a dar mucho fruto
+julio montilla Muchas gracias
Excelente video, buena explicación. Gracias por el aporte.
Felicidades!!! Muchas gracias, te lo agradezco mucho
Jeancarlos Molina un gustazo haberte visto en el Ed-Taller el otro día.
El video que acabas de mostrar esta muy bueno y se entiende bastante, es un ejemplo muy bueno de layout. Que bueno que vas abrir una nueva linea dedicada a Redes en mi canal he puesto algunos video sobre eso ya que yo me dedico a eso hace mucho tiempo. Tengo un video de como configurar tu cámara Ip y verla desde Internet, claro que no tengo la facilidad de explicar tan bien como tú pero hago el empeño. Si empiezas hacer de estos videos y te puedo ayudar en lo que sea solo comunicate conmigo y con gusto te ayudo. Un gran Saludo y que te vaya muy bien. Adios.....
+Fabián Sepúlveda (Fascomp) Hola Fabián, de igual manera que gusto poder conversar contigo, claro estamos para apoyarnos. Muchísimas gracias.
excelente aporte !!
Estimado, un excelente año... Como petición para un video que hagas a futuro... y es si puede realizar un "tab-navigation" y un "accordion"...!!! Saludos
Fenómeno!!!! Un aplauso
Me encanto el video, manita arriba, videos asi si que merecen la pena ;)
Hola, una recomendación para la próxima, déjanos el código fuente. Es de mucha utilidad.
Gracias por el vídeo!
+Lord Grande Hola Lord, no suelo dejar el código fuente, porque muchos solo vienen y lo descargan y no miran el vídeo, y lamentablemente no aprenden y mi intención es esa, no que simplemente copien y peguen. Si hay algunos tutoriales donde hay por ahí el código en codepen. Gracias
buenazo bro me salvastes de una eres grande gracias gracias :)
genial. gracias por el vídeo.
muy bien explicado, muchas gracias.
hey super tu tuto genial... genial
sout("good job");
Seco para enseñar, felicitaciones :)
Me gustan muchos tus tutoriales,enserio gracias. podrías hacer un tutorial de como crear un buscador para página web?
Seria genial si enseñaras a realizar un mega menu responsive, muchas gracias por compartir tus conocimientos me ha ayudado mucho para proyectos de la universidad. Saludos desde Colombia (Y)
+Pipe Planet Aquí hay un par:
th-cam.com/video/kEi9nXtuRJ8/w-d-xo.html
th-cam.com/video/FL_odxf4zq4/w-d-xo.html
excelente video
excelente aporte! una consulta, y si tengo una carpeta llena de imágenes la cual ira agregándose mas y mas como puedo hacer ello para no estar haciendo referencia uno a uno? Gracias...que sigan los éxitos!
Muchas gracias.
Gracias de nuevo! tengo una pregunta...
En el video utilizas padding junto con border-box pero sin border para separar las imagenes y la distancia sea siempre la misma, pero en tu trabajo de web original de masterteppanyaki parece que si utilizas border white en cada imagen, ¿esta el border en la propia imagen y usas padding o usas border de css y luego margin?
No se si me explico, pero la cuestion es que parece que tus imagenes ya tienen el border blanco sin css
bien hecho!!
El olimpo te aguarda! no se si el canal aun exista pero me he suscrito. Luego cuento sino me dio un ACV intentando reproducir ese codigo.
muchas gracias me sirvio mucho!!!
Algunas capas no tienen erue
Excelente lo único que creo que faltó fue hacer que las imágenes sean responsivas
Jean Carlos de antemano recibe un cordial saludo; una pregunta fuera de contexto: ¿ese otro canal (Erhan Umut Suar) tambien es tuyo o es pirata, ya que tiene tus mismos videos?
Hola muy buen vídeo, entre a la pagina de donde esta la galeria y me gustaria saber como hacer el efecto que tienes al hacer click en una imagen
de cuanto por cuanto son las imagenes
??
muchísimas gracias jean carlos.....estupendos tus tutoriales, me están sirviendo para iniciarme.... una pregunta, a la hora de validar nuestra pagina web tendríamos algún problema por usar tanto div`s?? he escuchado que puede ser que en el validador te la rechacen... muchas gracias por tu respuesta de antemano. un saludo
No, los divs se siguen usando para divisiones que no tengan ningun valor semántico, pero para lo demás si debes usar header, footer o main, cuando corresponda.
+J&G Proyectos Web
muchas gracias, te felicito por tus tutoriales..... un saludo
hola ¿como es que se auto completan tus códigos o son shortcuts? ¿es un plugin o como lo estableces? saludos y gracias por tus tutoriales :D
Hola amigo. Muy buen tutorial y celebro tu disposición para enseñar lo que sabes. Una pregunta: Cómo hacemos para que cada imagen se abra tipo lightbox?
+Issar Ramon Aguilera Hola puedes usar el plugin con ese nombre se llama así lightbox.js
Es para Joomla? En ese caso lo puedo utilizar en una pagina externa a Joomla?
Ya lo tengo amigo J&G Proyectos Web fijate lo hice en dos de las imagenes que estoy probando radiocumbre.com.ar/galerias/galeria.html
bien
hola excelente vídeo, alguien me dice como se llama la extencion que usa para que cuando pasa el mause por una linea en visual studio se marquen los margenes en el explorador?
hola, te felicito por tener el agrado de ayudar a otras personas , y te pediré otro favor XD ,
como haces que tengan una una linia desde la etiquetas que abren hasta la de cierres ?
ejem;
l
l l
l l l
l l l
l l
l
como haces que esas lineas bajen ?
+Roberto_Garcia1407 en brackets es un plugin se llama indent guides luego de instalarlo vas al menú Ver y lo activas
+J&G Proyectos Web , se que te estoy molestando mucho XD, pero como personalizaste tu brackets esta genial, dimo como pones el resumen de todo los codigos coma lo tienes en el lado derecho y cuando le pones el clik sale el todos los codigos en miniatura
+Roberto_Garcia1407 aqui lo configuramos th-cam.com/video/T_79Z1KPH18/w-d-xo.htmlm40s
Alguien podría decirme las dimensiones exactas de cada imagen?? small , normal y large??
Busco lo mismo
Hubiera sido bueno que pongas las imagenes que usaste en la descripcion, asi se evitan algunos detalles, pero fuera de eso Genial!!
como haces para que se guarde y recargue en el navegador automaticamente??????
Sé que se puede hacer con Sublime Text y Live Reload
buena noche, como hace para que en la vista del navegador se marque el area de trabajo. espero su respuesta gracias
Hola, eso es la vista previa de brackets.
Excelente (Y) :D
hola amigo queria me preguntaba si sabes hacer paginas auto admintrables , o agregar entradas tipo blog (agregarle contenido ala pagina )
Hola, claro, trabajamos desarrollando páginas donde el cliente puede administrar partes de su web o agregar entradas a su blog.
no podrias hacer un tutorial en su canal ? ,he buscado por varios sitios y nada de nada :( quiero aprender ha crear una pagina autoadministrable
alguien tiene el codigo? el link ya no esta vigente :(
Como podria ponerle un boton de "me gusta" o corazon a cada foto??? q no este relacionada con facebook, solamente q aparezca ahi.
Se podria subir esta galeria a wordpress? Si se puede, como?
Hola. Quiero hacer algo similar pero que el usuario pueda subir las imágenes. En tu ejemplo el ancho de las imágenes es el doble del alto. En mi caso el usuario podría llegar a subir imágenes que no tengan esa misma proporción entre el ancho y alto lo cual genera que se deformen las imágenes. Que me recomendas? obligar al usuario a subir imágenes cuyo ancho sea el doble de alto? Que otra opción puedo usar? Muchas gracias.
Puedes especificar a los usuarios que suban la foto a la medida correcta(asi como lo hace facebook u otras páginas para que no se distorsione) y la otra opción sería crear un script que acomode las imágenes pero ya sería más trabajoso
Muchas gracias. Excelentes videos. Abrazo.
pregunta por que en safari me cargan otras fuentes y no se acomoda el flex gracias
Elvis Pineda Usa el prefijo -webkit
mira una pregunta de cuando por cuanto son las imágenes q estoy intentando hacerlo y no me funciona las imágenes me salen del tam;ano completo de la pagina
tengo el mismo problema
solucion:
.small img, .normal img{
display: block;
width: 100%;
height: 100%;}
como se llama esa herramienta que usas para hacer cuadritos ?¿
+yoandy villaman cuales cuadritos?
al principio del vídeo que explicas como están separada cada sección y con el maus haces cuadros rojos (no se si me explico :S) mira el minuto 1:50 al 1:52
+yoandy villaman ah, es un programa de llama zoomit
grande :D Muchas Gracias por cierto felicidades por el canal por que es el único que tiene un montón de vídeos que para el que quiere iniciarse en el mundo de programación web les pueden ayudar así que chapo !! :D
sitio web masterteppanyaki.com/gallery.html no existe más?
+Alexis Chavez El usuario cambió de dominio, olvidé cambiarlo www.hibachicater.com/gallery.html allí está
+J&G Proyectos Web Un millón de gracias!!!
que tamaño tienen el normal large y small en px
+Ricardo Ramos +pmendoza904 Los tamaños son: Normal (500x300) Small (250x150) y large (250x300) pero puede ser cualquier tamaño similar.
+pmendoza904 revisa el video... ahi no dice main "IMAGE", es img
Fantástica detallada explicación. Muchas gracias!