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
Quiz: Web Developer Fundamentals
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
Quiz: HTML
Etiquetas multimedia
Tipos de imágenes
Optimización de imágenes
Etiqueta img
Etiqueta figure
Etiqueta video
Quiz: Etiquetas multimedia
Formularios
Etiqueta form e input
Calendar
Autocomplete y require
Select
Input type submit vs. Button tag
Quiz: Formularios
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
Quiz: CSS
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
Quiz: Responsive Design
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 118
Preguntas 31
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
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.
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 🤘🤘🤘
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
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.
Les dejo una página web que desarrollé exclusivamente con conocimiento de cursos de platzi, ojalá les guste.
https://constelacionesfamiliaresandal.com
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
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
En este enlace explican otros patrones de maquetación, junto con los que hemos visto, espero sea de ayuda.
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.
.
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.
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
Dejo el enlace de las resoluciones ya que no lo dejó el profesor Degranda. https://www.mydevice.io/
Aqui dejo algunos enlaces interesantes de referencia de paginas profesionales
https://www.awwwards.com/websites/
https://www.thebestdesigns.com/designers/
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
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ó.
Les comparto esta página con un layout de grid
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
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.
Me costo un día hacerlo 😁 Gracias! Platzi 💚 Y al profe Diego ✌ #PlatziChallenge
Mobile 📱:
Tablet 📟 (No había emoji de tablet) :
Laptop 💻:
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.
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
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í?
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
Recomendacion: separar archivos css por break point
buen video excelente por las recomendaciones
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
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.
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
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…
RESUMEN CLASE 49:
BUENAS PRACTICAS Y
EJEMPLOS DE RESPONSIVE
RECOMENDACION:
Separa siempre tus archivos de CSS por break point
mobile.css / style.css
tablet.css
desktop.css
Tambien
Optimizar en 320 Width
Tener de 3 a 4 break point
Información resumida de esta clase
#EstudiantesDePlatzi
Para optimizar la carga de nuestros proyectos es importante tener por separado los archivos CSS según o breakpoints
El tamaño mínimo en el cual podemos iniciar es de 320px y creamos un breakpoint en 600px y otro en 800px, no es bueno tener más de 5 breakpoint
Podemos visitar algunas páginas y aprender de ellas
Ame las clases de patrones de diseño.
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.
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
Frontend: -¿Cuantos breakepoints vamos a utilizar en este proyecto?
Smashing: -Si
YOUTUBE:
CRUNCHYROLL:
Pagina: https://www.mydevice.io/
Estuve analizando la página principal de platzi https://platzi.com/home
Y estoy casi seguro que se trata de un patrón Mostly Fluid, ¿alguno puede confirmar? xd
Me parece que https://planetario.buenosaires.gob.ar/observa-el-cielo es mostly fluid y https://www.tinkercad.com/things tambien es most fluid pero con un poco de grid. No se si estoy en lo correcto pero es lo que mi ojo inexperto está detectando jajaja
Mostly-fluid:
https://discord.com/
Layout Shifter:
https://www.wikipedia.org/
https://twitter.com/
Column Drop:
https://classroom.google.com/
Grid-layout:
https://zoro.to/
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 120%;
}
.container {
display: flex;
flex-wrap: wrap;
}
.c1,
.c2,
.c3,
.c4,
.c5 {
width: 100%;
min-width: 150px;
height: 150px;
}
.c1 {
background-color: #003476;
color:#b4d2f7;
}
.c2 {
background-color: #0062d2;
}
.c3 {
background-color: #b4d2f7;
}
.c4 {
background-color: #d5dfef;
}
.c5 {
background-color: #dfe1e5;
color:crimson;
}
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="./style.css" />
<link
rel="stylesheet"
href="./table.css"
media="screen and (min-width: 600px)"
/>
<link
rel="stylesheet"
href="./desktop.css"
media="screen and (min-width: 800px)"
/>
</head>
GRID layout
https://mydevice.io para revisar dimensiones de dispositivos.
Grid es otro nivel.
Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.