¡Para diseñar un sitio de verdad! ¡Si solamente quieres ponerlo a prueba!

Reseñas

Breezi - en agosto 25, 2012.

Acerca del constructor de Layouts

En este artículo te explicaremos cómo usar una de las funcionalidades más solicitadas para nuestro creador de sitios: el Constructor de Layouts. Puedes leer la publicación en nuestro blog sobre su lanzamiento aquí.

Con él podrás diseñar tu propio layout y olvidarte de las opciones prediseñadas porque ahora podrás personalizar su estructura a tu estilo. Puedes agregar, eliminar o reorganizar los bloques (antes llamados contenedores). Dentro de los bloques puedes agregar secciones, las cuales pueden tener una o más columnas. En Breezi llamamos a esto el Modelo Cuadrado (“Box Model”).

Columnas, Secciones y Bloques

La siguiente imagen ilustra la jerarquía entre columnas, dentro de secciones, dentro de bloques.

Diagrama de contenedores en el layout

Este diagrama muestra la manera en que están organizados los bloques con secciones y columnas.

Resumen del diagrama del layout

Este diagrama es para enseñar la jerarquía entre bloques, secciones y columnas.

Para agregar un bloque

Por ejemplo, si quieres mover tu app de navegación para que esté justo debajo del encabezado, lo que puedes hacer es agregar un bloque debajo del encabezado y mover la app ahí.

Para agregar un bloque nuevo, localiza los botones azules con un signo de más que están del lado derecho en tu página. Puedes agregar un bloque arriba o abajo del bloque actual. Podrás identificar fácilmente cuál agregará un bloque arriba y cuál debajo porque notarás que están en la parte superior o inferior de la página.

Botones para agregar un bloque

Al hacer clic en esos botones, un bloque se cargará ahí. Ahora podrás colocar tu app de Navigation dentro de este nuevo bloque. Solamente tienes que arrastrar y soltarla en el lugar indicado.

Si decides que quieres regresar tu app a su lugar original, puedes eliminar el bloque al hacer clic en la “X” que aparece en medio, a la derecha. Notarás que el bloque resaltará de color rojo. Al eliminar un bloque, todas las apps y secciones que estén adentro también se borrarán. Debes usarla con precaución.

Botón para eliminar un bloque

Si haces clic en la X, el bloque se eliminará.

El seleccionador de bloques

A la izquierda de tu layout, notarás que, por cada contenedor, tienes un identificador. Puedes editar algunos de ellos, pero no todos. Esta funcionalidad se llama definidor de bloques y puedes aprender más sobre ella aquí. Te ayuda a mantenerte organizado.

Seleccionador/identificador de cada contenedor

En la parte de izquierda de tu página, encontrarás el seleccionador/identificador de cada contenedor.

Agrega una sección nueva

Puedes tener muchas secciones dentro de un bloque. La diferencia entre un bloque y una sección es que el bloque abarca todo el ancho y largo del navegador, mientras que la sección es la parte central. Esto afectará el estilo, especialmente del fondo. Por ejemplo: un bloque tiene un fondo muy ancho.

Digamos que tienes un layout en el que tienes dos secciones dentro de un bloque. La sección de arriba tiene una imagen y la de abajo tiene un texto. Puedes insertar una nueva sección en la que puedes exhibir cuatro productos. Para agregar una sección, localiza el botón blanco con el signo de más en el lado derecho de la sección. Puedes agregar la sección arriba o abajo de la sección actual. Para ello uso sus respectivos botones en la parte de arriba o abajo.

Botones de "Add section"

Divide las columnas

Dentro de las secciones están las columnas. Tienes una columna de manera predeterminada al crear una sección. Ya que quieres agregar cuatro productos, necesitarás tener el mismo número de columnas para que se exhiban como en una tabla. Esto es porque no puedes tener más de una app en una columna. Necesitas crear una columna para cada una. De otra manera, solamente se acomodarán una sobre la otra de forma vertical.

Para agregar una columna deberás dividir la existente en dos. Pasa el cursor sobre la esquina superior izquierda de la columna y notarás un botón con el signo de más. Solamente aparece del lado izquierdo. Si no puedes encontrarla, intenta dejar tu cursor estático en esa esquina por algunos segundos.

Lado izquierdo de la columna

Después de hacer clic en él, la columna se dividirá en dos columnas nuevas. Cada una medirá la mitad que la columna original. Puedes duplicar tus columnas hasta que tengas 4. Será más fácil identificar las columnas (y la sección completa), si agregas apps. De esta manera tu columna no estará vacía y tendrá más altura en lugar de solamente ser una línea vacía. 

Después de dividir tus columnas y agregar unas apps de imagen, tu página se verá como la imagen a continuación.

Sección con imágenes

Notarás que no puedes dividir columnas si miden menos de 200 pixeles de ancho. Esto es porque ninguna columna puede medir menos de 100px.

Fusiona columnas

Si, por alguna razón, necesitas eliminar una columna, puedes hacerlo al fusionar dos columnas. Por ejemplo, si en vez de mostrar 4 productos, solamente quieres exhibir 3.

Para fusionar dos columnas juntas, pasa el cursor sobre el separador de las columnas que quieres fusionar. Notarás un botón con una “X” justo debajo del botón de “Split Columns”. Si pasas tu cursor sobre la “X”, una capa gris aparecerá sobre las columnas que vas a fusionar. Haz clic en el botón y las apps que estén dentro se reacomodarán en una sola columna.

Botón de "Merge Columns"

Es probable que quieras cambiar el tamaño de la columna una vez que las fusionaste. Puedes ajustar el tamaño de cualquier columna al arrastrar el separador a la izquierda o derecha. Aparecerán dos números en la parte superior. Con ellos puedes ver cuántos pixeles abarca dicha columna al cambiar al separador de posición. De esta manera puedes saber exactamente de qué ancho son tus columnas.

Separador entre columnas

Cambia el orden de las secciones o bloques

Puedes cambiar el orden de tus secciones o bloques. En ejemplos pasados, agregamos una sección con 4 columnas y una sección con un texto debajo. Si cambiaste de opinión y quieres que el texto vaya arriba, puedes hacerlo con los botones para reorganizar las secciones. Estos botones están localizados a la derecha de todas las secciones y bloques. Están representados por dos flechas, una apuntando para arriba y la otra para abajo respectivamente. 

Botón de "Reorder Below"

Notarás que no puedes mover una sección más allá de los límites del bloque en que está contenida. Por ejemplo, si esa sección es la última de abajo, no podrás moverla aún más abajo. Lo mismo aplica si es la única sección en ese bloque.

Los botones para reorganizar los bloques, ya que ocupan todo el ancho de la página, se localizan fuera de los límites. Al mover un bloque, se moverán todas las secciones que tenga dentro.

Botones de reorganización

Elimina una sección

Como con los bloques, puedes eliminar una sección que no necesites. Localiza el botón que dice” Remove Section” ubicado entre las flechas de reorganización. Como verás, tiene una “X”. Cuando pasas el cursor sobre él, notarás una capa roja que cubre toda la sección que estás a punto de eliminar. Al hacer clic en el botón, también eliminarás las apps que estén dentro, así que ten cuidado.

Botón de "Remove Section"

No puedes eliminar una sección si es la única en el bloque. Necesitas tener por lo menos una en tu layout. El botón de eliminar sección no funcionará para la última.

¡Y eso es todo para el constructor de layouts! Ahora tienes una herramienta más poderosa que te permitirá diseñar hasta el más mínimo detalle.

Si nos faltó explicar algo o tienes dudas, háznoslo saber en la sección de comentarios.

...

Breezi - Calificación: 4 / 5 - en julio 31, 2012.

Ha llegado un nuevo editor de sitios que nos librará de los códigos de HTML y de otros aspectos técnicos que surgen al querer diseñar una página en Internet.

...

Breezi - Calificación: 4 / 5 - en julio 27, 2012.

Freshout ha lanzado su primer proyecto llamado Breezi, una herramienta que construyeron desde cero para facilitar el proceso de edición de sitios a diseñadores.

...

Breezi - en julio 27, 2012.

Los sitios que te permiten arrastrar y posicionar objetos no son nada nuevo pero Breezi pretende revolucionar este concepto. El creador de sitios, Breezi, está dirigido a diseñadores y gente creativa.

...

Breezi - en julio 27, 2012.

Breezi es un sitio nuevo que se autodenomina como “una herramienta de construcción de páginas web para diseñadores y creativos”. Este servicio ofrece hospedaje y una interfase estilo DTP que te permite publicar tu diseño rápidamente. Sin embargo, algunas veces es similar a otras herramientas que hay en Internet.

...

Breezi - en julio 27, 2012.

Breezi es un creador de sitios nuevo que te permite diseñar sitios profesionales y con estilo, rápidamente.

...

Breezi - en julio 27, 2012.

Con Breezi puedes diseñar, editar y publicar un sitio interactivo en cuestión de minutos

...

Breezi - en julio 27, 2012.

Breezi es un editor completo de sitios HTML5, que te permite controlar cada detalle de tu sitio, diseñarlo como quieras y obtener bellos resultados.

...

Breezi - en julio 27, 2012.

Breezi es un editor WYSIWYG en línea que te permite arrastrar y posicionar los elementos donde desees para que puedas tener un control total sobre el producto final.

...

Breezi - en julio 27, 2012.

Breezi, el creador de sitios, es una herramienta que está enfocada en permitir que el proceso creativo del diseño, fluya naturalmente.

...

Breezi - en julio 27, 2012.

Al usar Breezi, tienes control sobre cada pixel, puedes editar los textos fácilmente, tienes apps de redes sociales, layouts flexibles, control SEO y puedes usar tu propio dominio.

...

Breezi - en julio 19, 2012.

Breezi tiene un enfoque nuevo y diferente de cómo se usan los creadores de sitios

...