Pues yo les dejo mi página web que ha sido fruto de los cursos de HTML y CSS de platzi, no es mucho, pero es trabajo honesto (:
https://midiaenunosminutos.com
Web Developer Fundamentals
¿Qué aprenderás sobre HTML y CSS?
¿Qué es el Frontend?
¿Qué es Backend?
¿Qué es Full Stack?
Páginas Estáticas vs. Dinámicas
HTML
HTML: anatomía de una página web
Index y su estructura básica: head
Index y su estructura básica: body
Reto: crea tu lista de compras del supermercado
Anatomía de una etiqueta de HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
CSS
¿Qué es CSS?
¿Cómo utilizamos CSS?: por etiqueta, selector, class y por ID
Pseudo clases y pseudo elementos
Anatomía de una regla de CSS
Modelo de caja
Herencia
Especificidad en selectores
Demo de especificidad y orden en selectores
Más sobre selectores
Combinadores: Adjacent Siblings (combinators)
Combinadores: General Sibling
Combinadores: Hijo y Descendiente
Medidas
Medidas EM
Medidas REM
Max/Min width
Position
Display
Desafío: Layout 1
Display Flex
Flexbox layouts
Variables
Web fonts
Responsive Design
Responsive design: media queries
Estrategias de responsive: mostly fluid
Implementando mostly fluid
Layout shifter CSS
Column drop
Buenas prácticas y ejemplos de responsive
Imágenes responsive
Accesibilidad
Semántica
Textos
Labels, alt y title
Próximos pasos
Próximos pasos como Web Developer
Bonus: tabla de etiquetas HTML
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 156
Preguntas 38
Pues yo les dejo mi página web que ha sido fruto de los cursos de HTML y CSS de platzi, no es mucho, pero es trabajo honesto (:
https://midiaenunosminutos.com
La verdad este curso me ha funcionado perfecto para un proyecto que vengo pensando desde hace tiempo y ahora ya pude avanzar, a ver qué opinan:
CSS Grid es lo mejor de CSS, sobre todo cuando usas los templates jaja, lo pusieron en otro curso pero es muy recomendable aprenderlo.
Algo importante es que hay que preocuparse por los dispositivos de pantallas grandes, hoy en día hay personas que navegan por la web con sus pantallas ultra HD y monitores enormes, la mejor forma de evitar que la página se rompa en este tipo de pantallas es siempre estableciendo un max-width absoluto al html ^^
yo pude avanzar mi web agradeceria tu opinion https://soyronyvargas.com
Como reto, todos deberían crearse una página como portfolio para que vayamos poniendo en practica todo lo que hemos aprendido y poco a poco irla mejorando a medida que sigamos avanzando. Aquí les dejo mi página, envíen también sus links para dar feedback 🤘🤘🤘
Buenas noches, la página que decidí estudiar para la tarea que nos dejo Diego fue DEV community la cual recomiendo mucho ya que es una comunidad muy linda y es una buena fuente de información. Esta tiene 4 breakpoints y en cada una añade nuevos elementos y acomoda el contenido ya existente tal que se logre un layout balanceado y uniforme. Por ende, llego a la suposición que se trata de un layout shifter. Les paso capturas que tome del layout de la pagina en 3 breakpoints distintos (no se fijen en las notificaciones que tengo pendientes por favor 🤣). Dejenme saber si piensan lo mismo por favor!
PD: No les coloco el link porque no me sube el aporte 😦 dice que es un enlace no seguro aunque es un sitio seguro de acuerdo a mi navegador que es Google Chrome.
Otra herramienta/app que puede ser de gran ayuda para visualizar una página en distintos dispositivos es Responsively
Twitter me parece que es Column Drop
Les dejo una página web que desarrollé exclusivamente con conocimiento de cursos de platzi, ojalá les guste.
https://constelacionesfamiliaresandal.com
Leí un comentario si se puede impedir la descarga de breakpoints innecesarios al detectar el tipo de dispositivo usado.
Por buenas prácticas, no creo que sea recomendable. Aquí problemas reales que ocurrirían:
Desktop la gente a veces no trabaja con las ventanas a pantalla completa, esto puede afectar la experiencia de usuario al trabajar con ventanas pequeñas, le vas a causar que hagan scroll o zoom y va a ser fastidioso.
Mobile No se que tan común sea, pero existe la opción en Chrome mobile visualizar la página como en PC, si tu impiden la descarga de los otros estilos vas a estropear esta función.
Por eso por buenas prácticas colocar los estilos por cascada.
Les dejo este enlace de una web en donde podrán visualizar las vistas de una página en diferentes tipos de dispositivos.
Esta me parece interesante porque usa column drop pero con animaciones, me parece que esto debe hacerse con javascript
https://www.oksocial.co.uk/
Esta otra tambien usa colum drop en tablet y desktop tienen transiciones laterales, me llama mucho la atencion el manejo de las animaciones y el concepto minimalista
https://www.buildinamsterdam.com/
Esta tambien es column drop pero el tiene como header multiples pantallas animadas, tambien manejan conceptos minimalistas, en lo personal me gusta el diseño en general, estaria increible hacer un proyecto personal como este
https://pinkgreen.agency/
Les comparto https://mediaqueri.es/ es una página en la que podemos ver diferentes ejemplos de como manejan los breakpoints para cada dispositivo
¿Qué buenas prácticas debemos de seguir a la hora de trabajar con responsive design?
¿Por qué debemos de tener separados los breakpoints en diferentes archivos?
¿Qué herramienta podemos usar para sacar el promedio del tamaño de las pantallas de los diferentes dispositivos?
¿Aproximadamente cuáles serían las medidas que deberíamos usar para nuestros breakpoints?
Les comparto mi portafolio personal con lo aprendido en el curso hasta el momento, acepto retroalimentación para mejorar cada vez más.
https://dacosta011.github.io
Aqui dejo algunos enlaces interesantes de referencia de paginas profesionales
https://www.awwwards.com/websites/
https://www.thebestdesigns.com/designers/
Notas
Recomendación para que tu archivo cargue más rápido en el navegador:
Separar siempre tus archivos de CSS por break point
mobile.css/style.css
tablet.css
desktop.css
En esta página puedes ver el width en promedio de diferentes dispositivos.
Link: https://www.mydevice.io/
El dispositivo más chico es 320px
Para tablet más chica podría ser 400 px - 600 px
No es ideal que tengas más de 6 break points, de hecho entre 3 o 4 están bien.
Dropbox utiliza el patrón de mostly fluid.
Les comparto esta página con un layout de grid
Lamentablemente y para mala fortuna de nosotros los Frotend’s, hace unos meses salio el samsung galaxy fold. Y su ancho de pantalla de minimo es de 280px
Al revisar YouTube pude ver que tiene mas como column drop o un grid layout. Sin embargo, al revisar el inspector de elementos de Google Chrome parece que no tuviera breakpoints o que no tuviera responsive, ¿alguien tiene idea de por qué pasa eso o que estoy omitiendo? Por acá les dejo una captura de pantalla para que vean a qué refiero.
.
En este enlace explican otros patrones de maquetación, junto con los que hemos visto, espero sea de ayuda.
El diseño web responsive no es sólo una cuestión de apretar y estirar. Se trata de ofrecer un sitio web de innumerables maneras, dependiendo del ancho de la pantalla. Lo que hay que añadir, lo que hay que eliminar, cómo dar prioridad a lo que es más importante, cuáles son las implicaciones para el ranking de búsqueda y cómo se hace todo eso con una sola base de código.
Es una gran tarea, si, por eso te dejamos esta lista de muy buenas prácticas que debes considerar para hacer de este trabajo lo más grato y exitoso posible.
Tus opciones incluyen un simple menú desplegable, donde el menú se desliza hacia abajo y cubre el contenido principal o el método de superposición donde el menú se expande y cubre toda la pantalla.
Menú de desplazamiento horizontal.
Otra manera es dejar el menú visible en pantallas pequeñas pero dejar el contenido del menú fuera del borde de la pantalla donde se encuentra la información. Dejar parte del texto del menú cortado indica que se puede desplazar hacia un lado, así el ejemplo del menú de Google en pantallas móviles al buscar un tema es especifico.
Ubicar botones y links largos, áreas “clickeables”.
En lugar de hacer botones más pequeños en los móvil, hazlos más grandes, por lo que son más fáciles de aprovechar. De hecho, esto no sólo se aplica a las pequeñas pantallas, es bueno para cualquier medio donde se vean los sitios web.
Los botones grandes mejoran la usabilidad. A la vez que tienes botones más grandes, también debes tener enlaces de texto más grandes. Si, por ejemplo, tiene una rejilla de titulares de noticias, con un enlace de texto que dice “Leer más” dentro de cada uno de ellos; en lugar de hacer esto, puedes convertir en link todo el resumen del contenido, así todo pasa a ser clickeable.
Los dispositivos móviles nuevos tienen pantallas de alta resolución, lo que hace que un texto sea más legible y más fácil de leer. Puedes permitirte el lujo de ir un poco más pequeño en las pantallas móviles y aumentar los tamaños de fuente cuando se llega a una pantalla más grande.
Si una línea de texto es demasiado larga, es más difícil de leer porque es difícil seguir la línea a línea. Del mismo modo, si se tienen líneas que son demasiado cortas rompe el ritmo de la lectura ya que los ojos tienen que moverse hacia atrás y hacia adelante con demasiada frecuencia.
La práctica común es mantener las longitudes de línea en alrededor de 60-75 caracteres. Esto se puede lograr mediante el establecimiento de sus áreas de texto para tener un máximo de anchura de aproximadamente 500/700 píxeles de ancho.
Los usuarios de móviles quieren la información de forma rápida, pero esto también funciona bien en cualquier dispositivo. Por ejemplo, en una página de detalles de productos de comercio electrónico es bueno tener el botón “Añadir a la cesta” visible para la mayoría de los usuarios, sin que tengan que desplazarse.
Si en una pantalla de escritorio hay un bloque de contenidos de texto y un bloque de imagen situado uno junto al otro, decide lo que es más relevante y eso se mostrará a primera vista
fuente: https://www.somoscafeina.com/articles/7-buenas-practicas-para-un-diseno-web-responsive
Desde los curso anteriores de Frontend, me puse el reto de hacer un clone de YouTube, lo hice desde Desktop first y he sufrido con esos media querin :c
Dejo el enlace del repositorio (https://github.com/Pieu11/Youtube-clone) y de la página (https://pieu11.github.io/Youtube-clone/) por si quieren verlo
Próximo proyecto ya sé que será desde Mobile First xD
Dejo el enlace de las resoluciones ya que no lo dejó el profesor Degranda. https://www.mydevice.io/
Lo que encontré fue lo siguiente, espero esté bien 😅.
Mostly Fluid: La página de Ripley
Ripley
Layout Shifter: La página de Audio Player
Audio Player
Column Drop: La página de CriptoNoticias
CriptoNoticias
Muy buena clase!
Cada ves queda mas claro toda la teoría y practica que se realizo en este modulo de Responsive 😄
Aqui la recomendación del Gran Diego!
Y aquí la Pagina que recomendó.
La página que analice es: https://stackoverflow.com/
dado que sus componentes se alinean hacia abajo deduzco que se trata de Mostly Fluid.
Sin embargo me llamo la atención una sección donde los elementos no se alinean hacia abajo sino que hacen scroll de izquierda a derecha
buen video excelente por las recomendaciones
Recomendacion: separar archivos css por break point
tengo una pregunta alguien sabe como es que se puede diseñar o crear una pagina web como dropbox o como isieron para que cuando baje cambie
Con este curso eh logrado entender más a profundidad el diseño responsive. Me hace falta mejorar en el breakpoint para tablets, pero ahí voy, cualquier sugerencia es bienvenida.
Encontre una pagina bastante famosa y que es de unos diseñadores…todas las cajas son div. Me sorprendio ver el codigo despues de aprender aqui como se hace una pagina profesionalmente…no todo es lo que parece. Uno se piensa que deben tener a los mas tops desarrollando su sitio pero parece que no.
Generalmente yo uso 3 o 4 breakpoints:
320, 440, aveces 550 y 768, los aprendí en el curso de Diseño para programadores y en la documentación de bootstrap también hay algunos tamaños.
Cordial saludo comunidad
Unos ejemplos pueden ser:
Slds
no es ideal tener mas de 6 breakpoints
MyDevice.io - tamaño de pantalla de dispositivos
Dividir el código ayuda reducir los tiempos de carga de la página. -Dividir los @media
smashingMagazine.com - uso de otro patron (grid o grilla)
Blizzard Entertainment: Mostly fluid
Facebook: Layout shifter
La mayoría ocupa estas estrategias, en especial Mostly fluid.
El exchange de criptomonedas Uphold tiene un diseño web que aplica el Mobile First y usa un patrón de diseño responsive llamado Off Canvas.
Así se ve el exchange en teléfonos
Así se ve en tablets
Así se ven en PC
En el modelo Off Canvas el contenido menos usado se coloca fuera de la pantalla y solo se muestra cuando el tamaño de la pantalla es lo suficientemente grande; en las pantallas más pequeñas se requiere que el usuario se desplace hacia la derecha o izquierda.
Grid es importante saberlo, ya que ayuda a distribuir los elementos de manera equitativa, incluido el control de su separación.
Alguien me puede decir si estoy en lo correcto, segun lo que vi debo empezar a realizar mi pagina desde 320, es decir poner mi pagina con inspección en 320 y una vez termine esa, ya lo que hago son media quieries con los demás tamaños? si seria así?
Hola! Les dejo una web que estoy realizando con la escuela de PLATZI junto con los retos de FREECODECAMP.
.
Me dicen que les parece?
Mati’s portfolio
Me costo un día hacerlo 😁 Gracias! Platzi 💚 Y al profe Diego ✌ #PlatziChallenge
Mobile 📱:
Tablet 📟 (No había emoji de tablet) :
Laptop 💻:
dribble.com - uso de otro patron (grid o grilla)
La verdad que estas clases están muy buenas. Van directo al grano
GitHub.com (almacenamiento de código fuente y control de versiones) - uso de patron layout Shifter
Una de las mejores paginas que he visto que implentanta muy bien el responsive es Tesla, se ve muy bien en mobile y en pc
Aqui un link del resumen de todo este curso https://platzi.com/tutoriales/2008-html-css-2020/7093-resumen-del-curso-definitivo-de-html-y-css/
Ahora toda página web que visito automáticamente me dirijo a inspect y analizo la forma en la que fue escrita. Qué maravilloso el mundo del desarrollo web.
Twitter y LinkedIn creo que trabajan con responsive Column Drop
Muy buenos ejemplos, me gusto esta clase.
Hay algo que no puedo entender aún, supongo que hace parte de otros cursos más adelante, pero porque en las página llega a existir los tres tipos de media query, max, min y maxmin. He pensado que si se empieza desde un modelo de mobile sólo el uso de min sería suficiente y max para desktop, pero no dejo de ver que parece que todas las páginas usan los 3. Me causa curiosidad eso.
Es muy buena esta información para mejorar los tiempos de carga
Creo que la version mobile de youtube tiene un layout shifter pero el contenido principal (los videos) los posiciona como column drop
Página estudiada: Platzi
Mobile
Tablet
Desktop
Esta pagina tiene solo 3 break points.
https://pixologic.com/
😃 Una buena practica es tener el menú de desplazamiento en horizontal.
Dejo esta página que habla sobre los 5 patrones de Responsive Design más usados
Sé que quiza mi pagina esta muy básica.
Pero espero que cuando entren a verla, ya haya tenido muchos cambios.
GermanAndPer
Este es mi portafolio.
Y va dirigido principalmente a ser Data Analyst.
Vamos por mas! compañeros!
🧑🏫👨💻
diego dice que maximo 6 breakpoints y en el quiz que te ponen mas adelante te equivocas te dice que maximo 3 breakpoints. …
Por que es importante el Responsive?
https://www.mydevice.io/#compare-devices
Aquí la página que visitó al principio del video
La pagina de adidas siempre me ha llamado la atencion por las animaciones que hace y su layout en general aqui la dejo.
https://www.adidas.com/us
Ame las clases de patrones de diseño.
lo logre!!
encontre esos patrones!!!
pero no puedo poner captura aqui!! jijijiji
los encontre en la pagina de los videos x,y,z jajajajaja
😗
inicie estudiando sobre desarrollo backend, haciendo este curso me doy cuenta que hubiese sido muy bueno empezar por aca, no para especializarme en el tema, pero para darle un poco de vida a los proyectos y hacerlos mas visual
el ultimo ejemplo tambien se podria hacer con flexbox, para 4 imagenes un flex-basis de 25% para cada item, luego para 3 un 33.3% y asi sucesivamente
MPORTANTE
Existen muchos patrones de diseño responsive, algunos hasta incluyen JS pero los 3 vistos anteriormente son los más usados y reconocidos.
Comparto una entrada de blog de Platzi donde hablan de la diferencia entre Flexbox y CSS Grid.
https://platzi.com/blog/flexbox-vs-css-grid-cual-es-la-diferencia/
Notas de la clase
Estos son los with que considero más usuales en dispositivos:
También les dejo esta tabla que obtuve de esta página con información valiosa sobre Laptops.
https://laptoping.com/laptop-display-specs-explained.html
Espero les sirva, saludos!
Buenas prácticas y ejemplos de responsive
Separa siempre tus archivos de CC por breakpoint
Mobile.css / style.css
Tablet.css
Desktop.css
Datos sobre responsive
https://www.mydevice.io/
Separa tus archivos de css por breakpoint
Escoje los breakpoint que mas te convengan usando mydevice.io
No tener mas de 3 o 4 breakpoints
En el website https://www.mydevice.io/ se usa el patrón Column Drop!
Excelente curso, ahora me encuentro implementando esto en mis proyectos personales. Cada clase es un desafío.
Escoge entre 3 a 4 breakpoints y asegúrate de que el proyecto se vea bien en esos.
Me parece que Platzi esta hecho con el patrón de diseño Mostly Fluid, si no estoy en lo correcto por favor corríjanme jejeje
He realizado el estudio de estos conceptos por medio de una página web muy interesante, se llama coolors y establece paletas de colores que contiene una cierta cantidad de colores que combinan entre sí y que pueden ser utilizadas fácilmente. Utiliza la estrategia Mosttly Fluid
Bueno, por alguna razón muchos comparten sus logros acá; así que yo también lo voy a hacer. Jajaja.
De verdad, este ha sido uno de los mejores cursos que he tomado, de verdad me interesa mucho el mundo del Frontend, así que ya veré a dónde voy.
Home
…
…
Sign In
…
…
Sing Up
https://www.dahuasecurity.com/ es mostly fluid
https://www.blizzard.com/es-mx/ es una combinación de mostly fluid con grid layout
Con estos ejemplos tengo mas claro cada uno de los patrones de maquetación
En resumidas palabras puedo decir que
Mostly fluid no cambiará mucho el estilo con respecto a los tamaños de pantalla, la disposición de los elementos se mandrendrá muy similar
Layout shifter cambiará la disposición de algunos elementos, no tendremos la misma disposición de elementos en los diferentes tipos de pantalla
Column Drop Para mi es parecido a Layout shifter ya que la disposición de los elementos cambia, pero la diferencia que puedo decir es que esta se estará acomodando por columnas
Espero no haber confundido 😅
Grid layput tengo entendido que usa el principio de rejillar para dividir las páginas y de esta manera mostrar el contenido
pagina: https://bitcoinmagazine.com/
UTILIZA: GRID Y LAYOUT SHIFTER
Interesante
Tipos de Breakpoints
Dropbox.com (almacenamiento en la nube) uso de patron mostly-fluid
Otro sitio que, les puede ayudar: https://mediaqueri.es/
No veo a Huawei 😦 en el mydevice
1024px…
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?