Diferencia entre revisiones de «Usuario:ManuelRomero/preferencias/flexlayout»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con «===Conceptos en el diseño web === Adjetivos encontrados en el diseño web #Felxible #Líquido #Porcentual #Adaptable ... ===Resposive Web Design o RWD=== Para lograr estos...»)
 
Línea 15: Línea 15:
 
#Trabajar con el concepto de "mejora progresiva" (Progressive Enhancement) siempre en mente.
 
#Trabajar con el concepto de "mejora progresiva" (Progressive Enhancement) siempre en mente.
 
Iceberg web
 
Iceberg web
 +
 +
===Felxbox===
 +
*https://escss.blogspot.com.es/2012/11/flexbox-nuevo.html<br />
 +
#Felxibilidad Adaptación de los '''''felx items''''' '''(hijos)''' a los '''''flex container''''' (Tamaño, contenido, espacio ...)
 +
#'''''Flex container ''''' : Caja '''contenedora''' de los '''''flex items''''' (hijos)
 +
#Flex items
 +
#Axis o ejes
 +
 +
 +
 +
 +
  
 
https://escss.blogspot.com.es/2014/01/responsive-adaptive-web-design.html
 
https://escss.blogspot.com.es/2014/01/responsive-adaptive-web-design.html

Revisión de 22:30 23 dic 2017

Conceptos en el diseño web

Adjetivos encontrados en el diseño web

  1. Felxible
  2. Líquido
  3. Porcentual
  4. Adaptable

...

Resposive Web Design o RWD

Para lograr estos fines, el RWD propone y aboga por:

  1. El uso de las reglas Css @media queries para adaptar el layout a la ventana o viewport.
  2. La caja flexible o flexbox a la espera de que el CSS Grid Layout sea una opción real.
  3. Usar recursos gráficos (img, video, canvas...) sensibles al medio o responsive images [1] / responsive images [2]. No sólo en tamaños (px) sino en su resolución (2x...) y/o hasta seleccionar la imagen que se sirve (nuevos elementos como picture, atributos srcset... bases de selección, étc [ver 1])
  4. Usa "Javascript discreto" o no invasivo (Unobtrusive JavaScript).
  5. Trabajar con el concepto de "mejora progresiva" (Progressive Enhancement) siempre en mente.

Iceberg web

Felxbox

  1. Felxibilidad Adaptación de los felx items (hijos) a los flex container (Tamaño, contenido, espacio ...)
  2. Flex container  : Caja contenedora de los flex items (hijos)
  3. Flex items
  4. Axis o ejes




https://escss.blogspot.com.es/2014/01/responsive-adaptive-web-design.html



http://www.araudi.net/ |