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
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.
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”
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.
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.
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.