SlideShare une entreprise Scribd logo
1  sur  39
Télécharger pour lire hors ligne
Siguiendo el flow de tu web
Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
¿De que vamos a hablar?
- ¿A qué nos referimos con flow?
- Reflejando este flow en un diseño
- ¿Cómo llevamos este diseño a la realidad?
- Estilos para seguir un flow natural
- Posiciones, como usarlas sin reventar el site
- Explorando la tercera dimensión
- Cazando errores, tips para no desesperarnos
¿A qué nos referimos con flow?
Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
¿A qué nos referimos con flow?
Cuando hablamos de flow, nos referimos al flujo de la información en la página.
Orientación de la información
Orden según la relevancia
Coge sus bases de elementos clásicos
¿A qué nos referimos con flow?
¿Qué comparten?
¿A qué nos referimos con flow?
Estructura de la información parecida.
Sentido de lectura -> RTL
Determina cómo debemos maquetar y estructurar el html
¿A qué nos referimos con flow?
En los países orientales se utiliza una
composición rtl, ya que leen de
derecha a izquierda.
Reflejando el flow en un diseño
Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
Reflejando el flow en un diseño
Se evalúa la importancia de la información a la hora de distribuirla y se plantea el
orden y la estructura en el que salen los elementos.
Esta parte es muy importante, ya que cuando Google entre, sus arañas van a leer
el contenido tal cual salga en el html y para que esto sea favorable, debe estar
pensado desde diseño.
Se plantea el diseño pensando en los dispositivos y como debe fluir la información
entre unos y otros.
Se utiliza un sistema de columnas como en los periódicos para favorecer el orden.
Reflejando el flow en un diseño
Ejemplo de columnas:
¿Cómo llevamos este diseño a la realidad?
Pensando en los móviles debemos intentar seguir un flow lo más natural posible.
Esto consiste en posicionar los elementos de forma que al ponerse unos encima
de otros al cambiar las resoluciones lo hagan de tal manera que no varíe el orden
percibido desde el html
¿Cómo llevamos este diseño a la realidad?
Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
¿Cómo llevamos este diseño a la realidad?
Revisar el diseño.
Evaluar la mejor estructura de tags html.
Si el diseño llega con alguna incoherencia, comentarlo con los diseñadores,
plantear alternativas.
Revisar siempre y mucho toda la parte relacionada con los dispositivos y las
resoluciones cercanas a los saltos.
¿Cómo llevamos este diseño a la realidad?
A veces la realización de pequeños esquemas,
nos puede servir para detectar cuanto antes las
posibles dificultades.
Estilos para seguir un flow natural
Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
Estilos para seguir un flow natural
Existen varios tipos de estilos
- De forma
- De formato
- De posición
- Animaciones
- De flujo
Estilos para seguir un flow natural
Los estilos de flujo son aquellos que modifican cómo se colocan los elementos y
cómo interpretan lo que tienen alrededor, así como lo que tienen en su interior.
Son en este caso los floats y los displays.
Ningún elemento lleva un float “built-in”, sin embargo, todos tienen un display.
Estilos para seguir un flow natural
Floats
Los elementos en los que añadamos la
propiedad float harán que todo el
contenido siga a través de ellos.
Hay que tener cuidado con los estilos de
forma de la capa padre para evitar errores.
Es uno de los estilos principales para
posicionar.
Estilos para seguir un flow natural
Clear
El elemento que lleva el clear se posiciona
por debajo de un elemento con flota
directamente superior.
Estilos para seguir un flow natural
Display: inline
El elemento se pone en línea con su anterior y siguiente.
No reconoce correctamente los estilos de forma.
Es el estilo que tienen por defecto los <a>, los <span> y los <strong>
Ejemplo:
Estilos para seguir un flow natural
Display: block
El elemento intenta abarcar todo el espacio del contendor
Elementos flotando dentro de un elemento con display: block pueden
generar incoherencias
Es el estilo que tienen por defecto todos los elementos salvo los <span> los
<a> y los <inputs>
Estilos para seguir un flow natural
Display: inline-block
Comportamiento similar al float
Se ve afectado más directamente por los
estilos de alto de línea de los textos, lo cual
puede provocar diferencias de altura.
Permite, por ejemplo darle forma a un
<span> en mitad de un texto si romper el
bloque.
Estilos para seguir un flow natural
Display: table
Emula el comportamiento de una tabla, dándonos los beneficios pero
pudiendo controlar los problemas.
Es el único estilo que admite floats sin problema en su interior y que además
permite ser centrado mediante márgenes.
Puede provocar problemas con elementos con tamaños absolutos en su
interior.
Un display: table siempre debe tener un ancho definido (no tiene porque ser
fijo)
Posiciones, cómo usarlas sin reventar el site
Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
Posiciones, cómo usarlas sin reventar el site
Los estilos “position” son muy poderosos porque pueden ignorar el flow del
sitio y salirse de él.
Es una mala práctica el abuso de este tipo de estilos porque hace la
maquetación más “sencilla”.
Si no se usan correctamente, vuelven el responsive infernal.
Hay 4 position: static, relative, absolute y fixed.
Posiciones, cómo usarlas sin reventar el site
Position: static
Es el estilo de posición que tienen todos los elementos de serie, el elemento
sigue el flujo normal de la página y no se ve afectado por estilos que cambien
las coordenadas.
Los estilos que cambian coordenadas son:
Top, left, right, bottom, y en cierto modo el z-index.
Posiciones, cómo usarlas sin reventar el site
Position: relative
Los elementos con position: relative se ven afectados por los estilos de
coordenadas, pero siguen anclados en su sitio, de tal manera que los
elementos a su alrededor se ven afectados por ellos.
Además, los elementos con esta propiedad sirven de ancla para los elementos
con position: absolute;
Posiciones, cómo usarlas sin reventar el site
Position: absolute
Los elementos con position: absolute se
ven afectados por los estilos de
coordenadas, pero son completamente
independientes a todo lo que los rodea.
Siempre tomarán como referencia de
sus coordenadas el primer elemento
padre a ellos con una position: relative.
Posiciones, cómo usarlas sin reventar el site
Position: fixed
Funciona parecido al position: absolute
salvo que en vez de tomar como
referencia una posición relativa, toma
los bordes de la pantalla.
Es el que se usa para conseguir las
cosas “sticky”
Explorando la tercera dimensión
Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
Explorando la tercera dimensión
z-index
Los elementos que tengan un position distinto a static se ven afectados por
una propiedad llamada “z-index”
El z-index representa un tercer eje ficticio para calcular la altura de los
elementos.
Al z-index de un elemento se le asigna un valor numérico que representa la
altura a la que está, este valor no tiene unidad, es simplemente un índice.
Admite valores negativos para poner elementos “por detrás”
Explorando la tercera dimensión
stacking-order
Si no le indicas z-index a los elementos que lo admiten, estos tienen una
ordenación básica que utilizarán en caso de duda.
Se pondrán por encima en orden de aparición en el html.
En cualquier caso se pondrán por encima de los elementos sin position.
Explorando la tercera dimensión
stacking-order
Explorando la tercera dimensión
stacking-context
Se puede dar el caso de elementos con posiciones absolutas o relativas que a
su vez tengan en su interior otras posiciones relativas o absolutas.
El z-index de cada elemento se tendrá en cuenta en función del z-index del
elemento que creo ese contexto.
Explorando la tercera dimensión
stacking-context
Cazando errores, tips para no desesperarnos
Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
Cazando errores, tips para no desesperarnos
Como norma general, cuando haya errores relativos a cosas que se salen de
su sitio hay que tener varias cosas en cuenta.
- Revisar los elementos alrededor del que está fallando, muchas veces el
fallo viene de fuera.
- Si es una position: absolute o similar, buscar si su referencia está bien
puesta.
- Revisar si hay anchos a fuego que puedan estar sobresaliendo.
- Utilizar el modo 3D de firefox resulta de gran ayuda en este tipo de casos.
- Pregúntale a tu Frontend / Diseñador de confianza, estos estilos son muy
volubles de fastidiarlo todo si no se saben manejar.
¿Preguntas?
Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
¡¡¡Muchas gracias!!!
Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia

Contenu connexe

En vedette

PORGERA OPERATIONS 2016 PRESENTATION
PORGERA OPERATIONS 2016 PRESENTATIONPORGERA OPERATIONS 2016 PRESENTATION
PORGERA OPERATIONS 2016 PRESENTATIONNelson Day Chanei
 
Post Campaign Analysis.
Post Campaign Analysis.Post Campaign Analysis.
Post Campaign Analysis.Bala Gowtham
 
بررسی سوالات پیشرفت تحصیلی طراحی صفحات وب پیشرفته
بررسی سوالات پیشرفت  تحصیلی طراحی صفحات وب پیشرفتهبررسی سوالات پیشرفت  تحصیلی طراحی صفحات وب پیشرفته
بررسی سوالات پیشرفت تحصیلی طراحی صفحات وب پیشرفتهcomputerka
 
Dottie MBS1412
Dottie  MBS1412Dottie  MBS1412
Dottie MBS1412savomir
 
Easy-Up EZ-DSS-39-PCB
Easy-Up EZ-DSS-39-PCBEasy-Up EZ-DSS-39-PCB
Easy-Up EZ-DSS-39-PCBsavomir
 

En vedette (8)

PORGERA OPERATIONS 2016 PRESENTATION
PORGERA OPERATIONS 2016 PRESENTATIONPORGERA OPERATIONS 2016 PRESENTATION
PORGERA OPERATIONS 2016 PRESENTATION
 
Post Campaign Analysis.
Post Campaign Analysis.Post Campaign Analysis.
Post Campaign Analysis.
 
RIP 24Feb2016v4
RIP 24Feb2016v4RIP 24Feb2016v4
RIP 24Feb2016v4
 
بررسی سوالات پیشرفت تحصیلی طراحی صفحات وب پیشرفته
بررسی سوالات پیشرفت  تحصیلی طراحی صفحات وب پیشرفتهبررسی سوالات پیشرفت  تحصیلی طراحی صفحات وب پیشرفته
بررسی سوالات پیشرفت تحصیلی طراحی صفحات وب پیشرفته
 
SANJAY_SINGH
SANJAY_SINGHSANJAY_SINGH
SANJAY_SINGH
 
Dottie MBS1412
Dottie  MBS1412Dottie  MBS1412
Dottie MBS1412
 
Easy-Up EZ-DSS-39-PCB
Easy-Up EZ-DSS-39-PCBEasy-Up EZ-DSS-39-PCB
Easy-Up EZ-DSS-39-PCB
 
Burzy a obchody
Burzy a obchodyBurzy a obchody
Burzy a obchody
 

Similaire à Siguiendo el flow de tu web

Similaire à Siguiendo el flow de tu web (20)

Investigaacion
InvestigaacionInvestigaacion
Investigaacion
 
From java to scala sin morir en el intento 2
From java to scala sin morir en el intento 2From java to scala sin morir en el intento 2
From java to scala sin morir en el intento 2
 
07_Maquetación.pptx
07_Maquetación.pptx07_Maquetación.pptx
07_Maquetación.pptx
 
Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2Curso HTML 5 & jQuery - Leccion 2
Curso HTML 5 & jQuery - Leccion 2
 
Busquedas en Internet
Busquedas en InternetBusquedas en Internet
Busquedas en Internet
 
Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)Hojas de estilo CSS (Cascade Style Sheets)
Hojas de estilo CSS (Cascade Style Sheets)
 
Iday 2018 - Optimización de la autoridad interna
Iday 2018 - Optimización de la autoridad internaIday 2018 - Optimización de la autoridad interna
Iday 2018 - Optimización de la autoridad interna
 
6. CSS - Unidades de medida, Box Modeling, Positions..pdf
6. CSS - Unidades de medida, Box Modeling, Positions..pdf6. CSS - Unidades de medida, Box Modeling, Positions..pdf
6. CSS - Unidades de medida, Box Modeling, Positions..pdf
 
Sistemas de Organización
Sistemas de OrganizaciónSistemas de Organización
Sistemas de Organización
 
Programacion orientada a objetos
Programacion orientada a objetosProgramacion orientada a objetos
Programacion orientada a objetos
 
Sitio web
Sitio webSitio web
Sitio web
 
Proyecto web
Proyecto webProyecto web
Proyecto web
 
Proyecto web
Proyecto webProyecto web
Proyecto web
 
Como crear un diagrama de clases
Como crear un diagrama de clasesComo crear un diagrama de clases
Como crear un diagrama de clases
 
Mi Primera "Pagina web
Mi Primera "Pagina webMi Primera "Pagina web
Mi Primera "Pagina web
 
Programación en base de datos
Programación en base de datosProgramación en base de datos
Programación en base de datos
 
u3
u3u3
u3
 
CSS Técnicas avanzadas
CSS Técnicas avanzadasCSS Técnicas avanzadas
CSS Técnicas avanzadas
 
Tema 3 BúSquedas En Internet
Tema 3 BúSquedas En InternetTema 3 BúSquedas En Internet
Tema 3 BúSquedas En Internet
 
Tutorial XML
Tutorial XMLTutorial XML
Tutorial XML
 

Dernier

Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...ORIETTA POLIFRONI
 
diseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxdiseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxlou lou
 
elementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxelementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxlou lou
 
Simuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosSimuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosErickOv
 
periodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfperiodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfacoellob
 
Catalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevanteCatalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevantesantiagovelez61
 
Espiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfEspiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfjpgaraglia03
 

Dernier (7)

Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
Artículo Iluminación y color para el diseño de espacios interiores por Oriett...
 
diseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptxdiseño módulos, submódulos y supermódulos.pptx
diseño módulos, submódulos y supermódulos.pptx
 
elementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptxelementos del diseño bases conceptuales, visuales, etc.pptx
elementos del diseño bases conceptuales, visuales, etc.pptx
 
Simuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito ElectronicosSimuladores Electronicos Del Circuito Electronicos
Simuladores Electronicos Del Circuito Electronicos
 
periodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdfperiodico para ingles / comunicacion.pdf
periodico para ingles / comunicacion.pdf
 
Catalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevanteCatalogo de diseño contemporáneo relevante
Catalogo de diseño contemporáneo relevante
 
Espiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdfEspiraleros y espirales (3) catálogo.pdf
Espiraleros y espirales (3) catálogo.pdf
 

Siguiendo el flow de tu web

  • 1. Siguiendo el flow de tu web Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
  • 2. ¿De que vamos a hablar? - ¿A qué nos referimos con flow? - Reflejando este flow en un diseño - ¿Cómo llevamos este diseño a la realidad? - Estilos para seguir un flow natural - Posiciones, como usarlas sin reventar el site - Explorando la tercera dimensión - Cazando errores, tips para no desesperarnos
  • 3. ¿A qué nos referimos con flow? Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
  • 4. ¿A qué nos referimos con flow? Cuando hablamos de flow, nos referimos al flujo de la información en la página. Orientación de la información Orden según la relevancia Coge sus bases de elementos clásicos
  • 5. ¿A qué nos referimos con flow? ¿Qué comparten?
  • 6. ¿A qué nos referimos con flow? Estructura de la información parecida. Sentido de lectura -> RTL Determina cómo debemos maquetar y estructurar el html
  • 7. ¿A qué nos referimos con flow? En los países orientales se utiliza una composición rtl, ya que leen de derecha a izquierda.
  • 8. Reflejando el flow en un diseño Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
  • 9. Reflejando el flow en un diseño Se evalúa la importancia de la información a la hora de distribuirla y se plantea el orden y la estructura en el que salen los elementos. Esta parte es muy importante, ya que cuando Google entre, sus arañas van a leer el contenido tal cual salga en el html y para que esto sea favorable, debe estar pensado desde diseño. Se plantea el diseño pensando en los dispositivos y como debe fluir la información entre unos y otros. Se utiliza un sistema de columnas como en los periódicos para favorecer el orden.
  • 10. Reflejando el flow en un diseño Ejemplo de columnas:
  • 11. ¿Cómo llevamos este diseño a la realidad? Pensando en los móviles debemos intentar seguir un flow lo más natural posible. Esto consiste en posicionar los elementos de forma que al ponerse unos encima de otros al cambiar las resoluciones lo hagan de tal manera que no varíe el orden percibido desde el html
  • 12. ¿Cómo llevamos este diseño a la realidad? Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
  • 13. ¿Cómo llevamos este diseño a la realidad? Revisar el diseño. Evaluar la mejor estructura de tags html. Si el diseño llega con alguna incoherencia, comentarlo con los diseñadores, plantear alternativas. Revisar siempre y mucho toda la parte relacionada con los dispositivos y las resoluciones cercanas a los saltos.
  • 14. ¿Cómo llevamos este diseño a la realidad? A veces la realización de pequeños esquemas, nos puede servir para detectar cuanto antes las posibles dificultades.
  • 15. Estilos para seguir un flow natural Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
  • 16. Estilos para seguir un flow natural Existen varios tipos de estilos - De forma - De formato - De posición - Animaciones - De flujo
  • 17. Estilos para seguir un flow natural Los estilos de flujo son aquellos que modifican cómo se colocan los elementos y cómo interpretan lo que tienen alrededor, así como lo que tienen en su interior. Son en este caso los floats y los displays. Ningún elemento lleva un float “built-in”, sin embargo, todos tienen un display.
  • 18. Estilos para seguir un flow natural Floats Los elementos en los que añadamos la propiedad float harán que todo el contenido siga a través de ellos. Hay que tener cuidado con los estilos de forma de la capa padre para evitar errores. Es uno de los estilos principales para posicionar.
  • 19. Estilos para seguir un flow natural Clear El elemento que lleva el clear se posiciona por debajo de un elemento con flota directamente superior.
  • 20. Estilos para seguir un flow natural Display: inline El elemento se pone en línea con su anterior y siguiente. No reconoce correctamente los estilos de forma. Es el estilo que tienen por defecto los <a>, los <span> y los <strong> Ejemplo:
  • 21. Estilos para seguir un flow natural Display: block El elemento intenta abarcar todo el espacio del contendor Elementos flotando dentro de un elemento con display: block pueden generar incoherencias Es el estilo que tienen por defecto todos los elementos salvo los <span> los <a> y los <inputs>
  • 22. Estilos para seguir un flow natural Display: inline-block Comportamiento similar al float Se ve afectado más directamente por los estilos de alto de línea de los textos, lo cual puede provocar diferencias de altura. Permite, por ejemplo darle forma a un <span> en mitad de un texto si romper el bloque.
  • 23. Estilos para seguir un flow natural Display: table Emula el comportamiento de una tabla, dándonos los beneficios pero pudiendo controlar los problemas. Es el único estilo que admite floats sin problema en su interior y que además permite ser centrado mediante márgenes. Puede provocar problemas con elementos con tamaños absolutos en su interior. Un display: table siempre debe tener un ancho definido (no tiene porque ser fijo)
  • 24. Posiciones, cómo usarlas sin reventar el site Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
  • 25. Posiciones, cómo usarlas sin reventar el site Los estilos “position” son muy poderosos porque pueden ignorar el flow del sitio y salirse de él. Es una mala práctica el abuso de este tipo de estilos porque hace la maquetación más “sencilla”. Si no se usan correctamente, vuelven el responsive infernal. Hay 4 position: static, relative, absolute y fixed.
  • 26. Posiciones, cómo usarlas sin reventar el site Position: static Es el estilo de posición que tienen todos los elementos de serie, el elemento sigue el flujo normal de la página y no se ve afectado por estilos que cambien las coordenadas. Los estilos que cambian coordenadas son: Top, left, right, bottom, y en cierto modo el z-index.
  • 27. Posiciones, cómo usarlas sin reventar el site Position: relative Los elementos con position: relative se ven afectados por los estilos de coordenadas, pero siguen anclados en su sitio, de tal manera que los elementos a su alrededor se ven afectados por ellos. Además, los elementos con esta propiedad sirven de ancla para los elementos con position: absolute;
  • 28. Posiciones, cómo usarlas sin reventar el site Position: absolute Los elementos con position: absolute se ven afectados por los estilos de coordenadas, pero son completamente independientes a todo lo que los rodea. Siempre tomarán como referencia de sus coordenadas el primer elemento padre a ellos con una position: relative.
  • 29. Posiciones, cómo usarlas sin reventar el site Position: fixed Funciona parecido al position: absolute salvo que en vez de tomar como referencia una posición relativa, toma los bordes de la pantalla. Es el que se usa para conseguir las cosas “sticky”
  • 30. Explorando la tercera dimensión Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
  • 31. Explorando la tercera dimensión z-index Los elementos que tengan un position distinto a static se ven afectados por una propiedad llamada “z-index” El z-index representa un tercer eje ficticio para calcular la altura de los elementos. Al z-index de un elemento se le asigna un valor numérico que representa la altura a la que está, este valor no tiene unidad, es simplemente un índice. Admite valores negativos para poner elementos “por detrás”
  • 32. Explorando la tercera dimensión stacking-order Si no le indicas z-index a los elementos que lo admiten, estos tienen una ordenación básica que utilizarán en caso de duda. Se pondrán por encima en orden de aparición en el html. En cualquier caso se pondrán por encima de los elementos sin position.
  • 33. Explorando la tercera dimensión stacking-order
  • 34. Explorando la tercera dimensión stacking-context Se puede dar el caso de elementos con posiciones absolutas o relativas que a su vez tengan en su interior otras posiciones relativas o absolutas. El z-index de cada elemento se tendrá en cuenta en función del z-index del elemento que creo ese contexto.
  • 35. Explorando la tercera dimensión stacking-context
  • 36. Cazando errores, tips para no desesperarnos Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
  • 37. Cazando errores, tips para no desesperarnos Como norma general, cuando haya errores relativos a cosas que se salen de su sitio hay que tener varias cosas en cuenta. - Revisar los elementos alrededor del que está fallando, muchas veces el fallo viene de fuera. - Si es una position: absolute o similar, buscar si su referencia está bien puesta. - Revisar si hay anchos a fuego que puedan estar sobresaliendo. - Utilizar el modo 3D de firefox resulta de gran ayuda en este tipo de casos. - Pregúntale a tu Frontend / Diseñador de confianza, estos estilos son muy volubles de fastidiarlo todo si no se saben manejar.
  • 38. ¿Preguntas? Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia
  • 39. ¡¡¡Muchas gracias!!! Jorge Díaz Amigo - Frontend Developer Aspgems @ynarburmecia