Limitaciones de CSS y el problema de los elementos flotantes

😦

Me siento afortunada de estar aprendiendo Css en este tiempo.

💥 Limitaciones de CSS y el problema de los elementos flotantes

columnas falsas es una técnica que hace una ilusión cuando una columna es más pequeña que otra se la rellena de un background de tipo imagen

• Los primeros diseños de CSS eran una mezcla entre elementos flotantes y posicionados

  • Haciendo que se tengan limitaciones de control
  • Provocando que la información no se vea uniforme

• Existía una frustración por la falta de columnas de altura completa

  • Para solucionarlo se creó una técnica de columnas falsas

• Se empieza hablar de Diseño Responsivo

  • Ethan Marcotte ⇒ Tecnica de diseño responsivo

  @media screen and (max-width: 400px) {
    .figure,
    li#f-mycroft {
      margin-right: 3.317535545023696682%;    /* 21px / 633px */
      width: 48.341232227488151658%;          /* 306px / 633px */
    }  li#f-watson,
    li#f-moriarty {
      margin-right: 0;
    }
  }
  

• Se empieza a trabajar con elementos flotantes

  • El problema está que solo funciona cuando se calcula con precisión el ancho y si el contenido tiene la misma altura
  • La solución fue que se comenzó a trabajar con columnas a través de contenedores para cada una y no con elementos independientes
  • Tambien se comienza a usar display: table que también se pueden utilizar para elementos que no son elementos de tablas

• Existen una gran cantidad de técnicas que son simplemente trucos

  • Por ello CSS se ha visto difícil y frágil porque no había herramientas de diseño

RESUMEN: En el principio usar CSS implicaba usar trucos, comenzando desde las columnas, columnas de tamaño completo, el diseño responsivo, etc. Era de esta manera debido a que no se tenían muchas herramientas

Colocar elementos solía ser frustrante.
Se tenían que usar trucos para lograr la distribución requerida.
Por ejemplo usar backgrounds simulando columnas falsas
Utilizar tablas para acomodar elementos aunque este no era el propósito semántico de display:table
También existía Noodle Incident en donde se podía encontrar plantillas que otros usuarios habían creado para facilitar más el trabajo.
Todo un lío.

Cuando estaba comenzando a aprender CSS me contaban que antes de que existiera Responsive Design los desarrolladores tenian que hacer como 4 veces los estilos, para cuatro tipo de pantallas diferentes…
Literalmente tenían que hacer el mismo trabajo 4 veces, debemos darle gracias a dios que hoy en día existe el Responsive Design 😅😅💚

No cabe duda que a día de hoy la tenemos mas fácil los que estamos comenzando con el desarrollo web.
Todo lo tenemos documentado, muchos cursos, muchos tutoriales y con mejores practicas para hacer las cosas de una manera mas rápida pero mejor.

Muy interesante la historia, pero no debería estar en los primeros cursos de HTML y CSS, ya que este curso es específico de Grid.

Sólo como curiosidad, esta es la página que menciona con plantillas para copiar y pegar el css segun el diseño que quieran.

https://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

Apuntes

• Los primeros diseños de CSS eran una mezcla entre elementos flotantes y posicionados

  • Haciendo que se tengan limitaciones de control
  • Provocando que la información no se vea uniforme

• Existía una frustración por la falta de columnas de altura completa

  • Para solucionarlo se creó una técnica de columnas falsas
  • Dan Cederholm, creo una tecnica de columnas falsas

  background: #ccc url(../images/bg_birch_800.gif)
   repeat-y 50% 0;
  

• Se empieza hablar de Diseño Responsivo

  • Ethan Marcotte ⇒ Tecnica de diseño responsivo

  @media screen and (max-width: 400px) {
    .figure,
    li#f-mycroft {
      margin-right: 3.317535545023696682%;    /* 21px / 633px */
      width: 48.341232227488151658%;          /* 306px / 633px */
    }  li#f-watson,
    li#f-moriarty {
      margin-right: 0;
    }
  }
  

• Se empieza a trabajar con elementos flotantes

  • El problema está que solo funciona cuando se calcula con precisión el ancho y si el contenido tiene la misma altura
  • La solución fue que se comenzó a trabajar con columnas a través de contenedores para cada una y no con elementos independientes
  • Tambien se comienza a usar display: table que también se pueden utilizar para elementos que no son elementos de tablas

• Existen una gran cantidad de técnicas que son simplemente trucos

  • Por ello CSS se ha visto difícil y frágil porque no había herramientas de diseño

MI RESUMEN: En el principio usar CSS implicaba usar trucos, comenzando desde las columnas, columnas de tamaño completo, el diseño responsivo, etc. Era de esta manera debido a que no se tenían muchas herramientas

Como se veia a los desarrolladores hace unos años 😅😅

En lo personal, cuando comencé a estudiar (desde cero) programación, pensé que, “CSS”, sería fácil. La verdad es un complemento perfecto. Además, luego se me complicó más con SASS. Ahora, después de tanta práctica…no lo dejaría aún lado.

Para triunfar en Css Grid , hay que pensar fuera de la caja

En mi experiencia personal, me tocó ver aún programación de este tipo, armar un layout era un reto sobre todo porque el armado de MVC no era tan dinámico en la interacción con backend, eran plantillas de un backend, eran tiempos violentos.

muy explicativa gracias
Estefany Aguilar

3er video y aun no he visto “papayawhip”, me pregunto en que momento será en este curso, jejejej
Pdta: excelente profesora 😃

alguien mas escucho el gata de fondo el segundo 57? jajjajja

Aporte

• Los primeros diseños de CSS eran una mezcla entre elementos flotantes y posicionados.
• Los desarrolladores se sentían frustrados por la falta de columnas de altura completa, es por eso que se crearon las “Columnas falsas”, el encargado de hacer esto fue Dan Cederholm.
• Otro tema muy importante a debatir era como se manejarían las medidas, si serían absolutas o relativas, si se trabajaban con pixeles o el contenido debía adaptarse al tamaño del dispositivo. A este punto es donde llega Ethan Marcotte con una técnica de diseño responsivo.

Qué tiempos tan bellos y dolorosos haha 😅

Yo sufrí esos problemas que menciona la profe hace 10 años, odiaba CSS, hoy es extremadamente simple

Mis apuntes:

• los primeros diseños de CSS era una mezcla de elementos flotantes y posicionados (Si entraba un elemento más grande del que ya tenían,provocaba que se perdiera el control de los elementos y por consecuente no se veía uniforme

• Noodle Incident, Existían recursos en línea para copiar y pegar y documentaciones que trataban de solucionar ciertos problemas

• A pesar de que teníamos varías personas de la comunidad aportando, aún se seguía frustrado por el tema de las columnas. (Dan Cederholm crea una técnica de columnas falsas) usando un background por debajo dando la ilusión de que el contenido bajaba parejo

• Diseño responsivo: medidas absolutas y relativas (Ethan Marcotte) >“debíamos tener un contenido adaptativo”

• el problema de los elementos flotantes: La idea principal de los elementos flotantes es que se puedan ajustar y esparcir al rededor del contenido principal, pero a medida de que el tamaño de la pantalla cambiaba, los elementos se iban desalineando

• Se trabajó en el display:table los valores se pueden ampliar a otros elementos de html diferentes a <tr> y <td> como los <div>, <ul>, etc.

• Existen una gran cantidad de técnicas que son simples TRUCOS y gracias a esto, el diseño de con css parece difícil y frágil pero porque no habían las herramientas de diseño las cuáles hoy nos han facilitado el camino

es como un museo

A veces queremos aprender rápido todo. Pero este curso me esta enseñando la importancia de saber de donde venimos. Y hacia donde vamos!

Fantastic! The evolution in CSS has been because of people with good cheats.

Perdonen la ortografia:(( mi teclado esta en formato ingles.
Los primeros disenos de CSS eran una mezcla entre los elementos flotantes y posicionados. Por lo mismo, en ese entonces salio Noodle Incident (Recursos en linea para copiar y pegar).

Despues crearon una ilusion llamad “Columnas Falsas” por Dan Cederholm. Despues se empezo a medir las medidas relativas y el diseno responsivo o Responsive Desing.

Despues empezamos a trabajar con elementos flotantes, que no habia problema si se calculaba con precicion el ancho y si el contenido tiene la msima altura, si no, esto se empezaria a desalinear, despues se empezo a trabajar con display: table.

Existen una gran cantidad de tecnicas que son simplemente trucos. Gracias a eso, el diseno con CSS parece dificil y fragil. No Habian herramientas de diseno.

Que bacano es poder conocer algo de la historia del codigo y todos los problemas que ha tenido para llegar a como lo escribimos hoy. Hay algun libro (puede ser en inglés) que cuente sobre la historia de la programación, CSS, HTML, etc…?

Excelente!!

Clase para estar agradecidos con CSS3 y sus novedades n.n

desde que empece a estudiar le tenia ganas a este curso, pero estaba enfocado en js, ahora que salio, me vine de una a pillarlo

Iteración es la clave aquí. Cada Vez que se presentaba una dificultad se mejoraba CSS 😃

Interesante como poco a poco han construido CSS 😃

0:59, al gato de teffcode le preocupan las limitaciones de CSS xD

Los mal llamados trucos no eran más que hacks para arreglar problemas de esa época, por qué se les dice así porque estos hacks contenían líneas de código que NO DEBERÍAN ESTAR AHÍ, pero son necesarias para atacar y solucionar un problema en particular, como limpiar los floats con la propiedad clear porque esta era la única manera de hacer que las cards de diferentes alturas debido a su contenido se mostraran correctamente. Y como este hack habían muchísimos para corregir otros problemas ya que para ese entonces CSS no se había estandarizado y cada navegador interpretaba el código a su manera.

Me toco un poco de esa forma de trabajar con diseño de un Layout, anteriormente se ocupaban las tablas para poder estructurar tu diseño

Un recurso bastante bueno de CSS Grid:

Pensando como va fluir todo

Afortunadamente llegué al css3, porque creo que hubiera enloquecido

Si me da algo de miedo CSS, no se, como que nunca me funciona jaja pero para eso estoy aqui, para aprender jsjs

Wow sigo este curso porque me meti a la #Liga creativa el cual desperto el intres de aprender a manipular bien Grid Layaout!

Ethan Marcotte -> Responsive Design 🎇

Tablas - Display: table;

Elementos flotantes

Responsive Desing por Ethan

Técnica de columnas falsas por Dan

Noodle Incident - Una de las primeras soluciones al problema de los elementos flotantes

Aqui un recurso con la breve historia y evolucion de CSS:
https://uniwebsidad.com/libros/css/capitulo-1/breve-historia-de-css

interesante ver la evolución !

I feel that learn CSS at this time is a huge advantage

Limitaciones de CSS y el problema de los elementos flotantes

Los primeros diseños de CSS eran una mezcla entre elementos flotantes y posicionados.

Pero seguían frustrados por la falta de columnas de altura completa.

Dan Cederholm creo la técnica de Columnas Falsas

Ethan Marcotte creo Diseño Responsivo

El problema de los elementos flotantes: Esto funciona bien si se calcula con precisión el ancho y si el contenido tiene la misma altura, sin embargo si el contenido cambia de tamaño se empieza a desalinear.

Entonces se pensó en crear contenedores para las diferentes columnas y se trabajó con display: table;

Al final del día todos estos eran solamente trucos.

Gracias a eso, el diseño con CSS parece difícil y frágil:
No había herramientas de diseño.

Entonces nacieron herramientas que nos han facilitado el camino.

To be continued…

Increible Css, me emociona aprender esto

Excelente curso para estar actualizado.

No olviden, los slides en la sección de recursos. Slides