Título	Rediseño de CSS Zengarden
Tipo de Proyecto	Proyecto de Taller
Palabras Clave	proyecto 1
Período	2017-2017
Asignatura	Construcción de Diseño Gráfico 4,
Del Curso	Construcción 4º DG 2017,
Carreras	Diseño Gráfico"Diseño Gráfico" is not in the list (Arquitectura, Diseño, Magíster, Otra) of allowed values for the "Carreras Relacionadas" property.
Alumno(s)	Darío Tapia
Profesor	Herbert Spencer
URL	https://dtapiasaavedra.github.io/zen/

Observación

Árbol de Divs de Zen Garden

Se hace el ejercicio de leer el archivo html y determinar las jerarquías de contenidos en un documento aparte para entender la lógica de los elementos que agrupan, las divisiones y la estructura en general de cómo está organizado el archivo. De esta forma, es más fácil visualizar las secciones principales que contienen a su vez los elementos más pequeños; y entender que estas secciones tiene una denominación relacionada con el orden que debiesen tomar en el sitio; por ejemplo: header; footer, main, side-bar; son todas secciones establecidas y reconocidas como elementos comunes que construyen los sitios web.

Primera Versión

Pensamiento de Diseño

Primeros acercamientos

Hola

Propuesta Final 1

Tipografía; layout

Segunda Versión

Sitios de Referencia

Google Fonts

Mapa de Divs

Contenidos Estudiados

Propiedad de Display

Fuente: http://librosweb.es/libro/css_avanzado/capitulo_4/propiedad_display.html  
Fuente: http://www.w3schools.com/cssref/pr_class_display.asp

La propiedad display es una de las propiedades CSS más infrautilizadas. Aunque todos los diseñadores conocen esta propiedad y utilizan sus valores inline, block y none, las posibilidades de display son mucho más avanzadas.

Elementos de Línea
Elementos de Bloque

Por el contrario, ciertas etiquetas se renderizan en el navegador en líneas independientes, no mezcladas con el resto del texto. Ejemplos de estas etiquetas son los encabezados, las citas en bloque (blockquote), por supuesto los párrafos (p), y quizá la más conocida de todas que es la etiqueta div usada normalmente para envolver a otros elementos. A estos elementos se les denomina elementos de bloque.

InLine Block

Así por ejemplo, aunque tengamos una etiqueta span que se renderiza en línea por defecto, si le aplicamos la propiedad display:block; se renderizará como un bloque, es decir, sería exactamente igual que si hubiésemos puesto un div. El tercer valor de la lista anterior es muy interesante ya que permite obtener un comportamiento intermedio entre los otros dos. Los elementos inline-block fluyen con el texto y demás elementos como si fueran elementos en-línea y además respetan el ancho, el alto y los márgenes verticales. Son lo mejor de los dos mundos.

Relación de Elementos:

Block - div: El más común es el p. Otros son: header, footer y section. Inline: Span. Es un elemento dentro de un párrafo. Se usa para Links

Propiedad Flexbox

Para layout en display de distintos tamaños; se declara mediante Display: flexbox. Muchos diseñadores verán que el modelo "caja flexible" es más sencillo de utilizar. Los elementos "hijos" de una "caja flexible" pueden colocarse en cualquier dirección y pueden tener dimensiones flexibles para adapterse al espacio visible. Posicionar los elementos "hijos" es por tanto mucho más sencillo, y los diseños complejos pueden hacerse más fácilmente y con código más limpio, ya que el orden de visualización de los elementos es independiente del orden que estos tengan en el código fuente. Esta independencia afecta intencionadamente únicamente a la representación visual, dejando el orden de locución y navegación a lo que diga el código fuente.

Contenedor flexible (Flex container)

El elemento "padre" que contiene los elementos flexibles. Un contenedor flexible se define usando los valores flex o inline-flex en la propiedad display.

Elemento flexible (Flex item)

Cada hijo de un contenedor flex se convierte en un elemento flexible. Si hay texto directamente incluido en el contenedor flexible, se envuelve automáticamente en un elemento flexible anónimo.

Ejes

Cada diseño de "caja flexible" sigue dos ejes. El eje principal es el eje a lo largo del cual los elementos flexibles se suceden unos a otros. El eje secundario es el eje perpendicular al eje principal.