View
65
Download
0
Category
Preview:
Citation preview
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
Recommended