Diseña y publica tus sitios rápidamente

Desglosa y recrea un sitio para una app de Mac en Breezi

Hola de nuevo. El día de hoy te enseñaremos a recrear un sitio para una app de Mac OS.

Versions es una app para Mac OS. Si haces clic en el vínculo, verás que el sitio tiene varias páginas internas. Sin embargo, nosotros nos concentraremos en la página de inicio. is a subversion client for Mac OS, and though its website has a few internal pages, we’ll focus only on the homepage.

"Versions"

Este es el sitio que recrearemos en Breezi

Análisis por bloques

Para empezar, veremos un panorama general de lo que construiremos. Estos son los contenedores y las apps que utilizaremos:

  1. Header: El logo de la compañía y menú de navegación
    1. 2 Columnas: app de Image/app de Navigation
  2. Intro: Logo de la app, texto de introducción y llamado a la acción
    1. 1 Columna: app de Image
    2. 3 Columnas: Text/Image/Image
    3. 3 Columnas: Image/Text/Text
    4. 4 Columnas: Text/Text/Text/Text
  3. Body 1: “Working with Subversion”
    1. 1 Columna: app deImage
    2. 1 Columna: app de Tabs & Accordions
    3. 3 Columns: Text/Text/Text
  4. Body 2: “Awards & Customers”
    1. 1 Columna: app de Image
  5. Body 3: “Partner Ads & Details”
    1. 3 Columnas: Image/Image/Image
    2. 3 Columnas: Text/Text/Text
  6. Body 4: Llamado a la acción
    1. 1 Column: Text/Image/Text
  7. Footer: Derechos de autor
    1. 1 Columna: app de Text

En otros tutoriales, hemos recreado el sitio bloque por bloque; es decir, preparábamos un bloque completamente antes de continuar con el bloque siguiente.

En esta publicación, intentaremos con otro método en el que nos ocuparemos de un área a la vez (primero layout, luego apps, contenido, el estilo, etc.).

Crea el layout

Te recomendamos que empieces este sitio desde cero con una plantilla en blanco.

De acuerdo a el despliegue que hicimos en la sección anterior de este tutorial, necesitaremos 7 bloques para nuestro sitio Breezi. Utiliza el constructor de layouts para crearlos.

Botón de "Add Block"

Agrega más bloques debajo del bloque de Body al hacer clic en el signo de más que dice “Add Block”

Al terminar con los bloques, debemos agregar secciones y dividirlas en columnas según sea necesario.

Botón de "Add Section"

Haz clic en el botón de “Add Section” para agregar una sección nueva

En ocasiones será necesario que manipules las columnas: cambies su ancho, que las dividas o que las combines.

Botón de "Split Column"

Ajusta las columnas según sea necesario

Así es como debe quedar el layout (mientras está vacío):

Un layout terminado y vacío

Establecimos bloques, secciones y columnas de acuerdo al análisis del sitio original

Instala las apps

Una vez que termines el layout, deberás empezar a instalar las apps que necesitarás.

App Store

Instala apps al arrastrarlas hasta tu layouts

Acomoda las apps de acuerdo al análisis que te presentamos anteriormente.

Recuadro de "Drop this!"

Suelta la app en su espacio correspondiente

Por lo pronto, dejaremos las apps con su contenido predeterminado. Más adelante nos ocuparemos de personalizar el contenido de cada una de ellas.

Esta es una vista previa de nuestra página con las apps instaladas

Esta es una vista previa de nuestra página con las apps instaladas

Introduce el contenido

El texto será lo más fácil de manipular porque solamente tenemos que copiar y pegar en los espacios correspondientes.

En cuanto a las imágenes, es posible que sea necesario cortarlas y exportarlas antes de agregarlas a Breezi. Una vez que termines de editarlas, reemplaza las imágenes predeterminadas con su respectiva imagen.

Editor de imágenes

Utiliza el editor de imágenes para reemplazar el contenido de la app de Image

En cuanto al texto, te recomendamos que le asignes etiquetas H a encabezados para que puedas agregarles estilo con el Bulk Style Editor.

Barra de herramientas

Estas son las opciones que tienes para etiquetar tus textos en Breezi

Ahora explicaremos cómo configurar la app de Dropdown Navigation porque necesitaremos agregar ciertos caracteres especiales para que se parezca al sitio original.

Íconos en el sitio original

Incluiremos estos íconos en la navegación como en el sitio original

Ya que no tenemos los mismos íconos que en el sitio original, usaremos estos que son bastante parecidos:

❁ ★ ✉ ☑ ↓

Más adelante agregaremos colores y efectos (sombreado).

Haz clic en la opción de “Edit Content” que está en la barra de herramientas de la app de Navigation para abrir el panel CMS.

"Edit Content" en la barra de herramientas de la app

Editaremos los 3 vínculos predeterminados y agregaremos 2 más para tener un total de 5

Debemos editar los elementos predeterminados y agregar dos más.

Panel CMS de Dropdown Navigation

Haz clic en la pestaña de “New Top Level Link” para añadir vínculos al menú de navegación

Usaremos los íconos del texto para los vínculos. Así se verá el panel:

Vínculos en el panel CMS

Edita los vínculos para que se vean así

Una vez que termines con el contenido, se verá como en la siguiente imagen:

El sitio sin estilos

Así se ve el sitio antes de estilizar el sitio

Estilo y configuración

El último paso: configura las apps (que lo necesita) y estilízalas (con los dots de estilo).

Dot de estilo para el Header

Tenemos que editar el fondo, espaciado, sombreado, etc. de nuestros contenedores y apps

Por ejemplo, aquí editaremos el fondo de la página para mostrar una imagen personalizada.

Bulk Style Editor

Puedes editar las opciones desde el Bulk Style Editor

También tendremos que cambiar el ancho de algunas de las columnas para que las apps queden bien alineadas.

Ajustando el ancho de las columnas

Ajusta el layout y la alineación para que se parezca lo más posible al sitio original

De la misma manera, debemos agregar estilo al texto con su barra de herramientas.

Barra de herramientas

Editaremos la tipografía, color, altura y más del texto

En la app de Tabs and Accordions app, cambiaremos el fondo, eliminaremos las esquinas redondeadas (al poner “Round Corners” en cero) y le agregaremos un degradado.

Dot de estilo

Este es el código del color que debes utilizar para el fondo de las pestañas en la app de Tabs and Accordions

Lo último que editaremos será el nombre de la página, las opciones de SEO y el Favicon. Además, podemos agregar un script para rastrear estadísticas.

Configuración de la página

Aquí es el panel donde debes agregar los datos de la página, palabras claves y una meta descripción

Hemos terminado

¡Eso es todo! Así se verá el sitio al final:

Vista previa del sitio recreado en Breezi

Vista previa del sitio recreado en Breezi

¿Qué te pareció este tutorial? Haznoslo saber en la sección de comentarios.