Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

Diseñe y Desarrolle un Sitio Web Completo (una Mini Serie de Tuts+, Parte 3)

by
Length:LongLanguages:
This post is part of a series called Iconify: A Complete Website.
Design And Develop A Complete Website (A Tuts+ Mini Series, Pt 2)

Spanish (Español) translation by Jorge Montoya (you can also view the original English article)

Ha pasado un tiempo, pero hoy, durante la fase de codificación de este tutorial masivo, vamos a comenzar la conversión HTML de nuestro tema. Ya hemos diseñado la página en su totalidad en Photoshop, así que ahora veremos la conversión de nuestra página de inicio en una página web HTML válida.

A lo largo de nuestra fase de conversión seguiremos buenas prácticas, usaremos HTML 5 válido (doctype, a pesar de que ninguno de los elementos de la especificación más recientes) y CSS 2.1 para el máximo soporte del navegador.


El Plan de Juego

Utilizaremos este proceso general para convertir nuestro diseño de Photoshop en HTML en tres fases

Fase 1

  • Crear estructura de documento/carpeta/sitio.
  • Definir el tipo de documento.
  • Inspeccionar el diseño principal y descubrir el marcado básico general.
  • Inspeccionar las secciones específicas de la página para obtener una idea de cómo hacer el marcado de la misma.
  • Insertar etiquetas HTML de acuerdo a nuestras ideas de marcado y terminar la codificación HTML.

Fase 2

  • Restablecer los estilos predeterminados de los navegadores.
  • Agregar algunos estilos predeterminados para elementos HTML comunes.
  • Posicionar y diseñar los elementos secuencialmente de arriba hacia abajo y sección por sección.

Fase 3

  • Comprobaremos nuestro diseño en todos los navegadores modernos y compensaremos en caso de IE.
  • Finalmente, agregaremos algunos comportamientos a nuestro tema con algunos complementos y scripts de jQuery personalizados y de terceros.

Nuestro tema es muy simple, por lo que necesitamos cortar muy pocos gráficos de nuestro diseño. Esos gráficos que rebanamos se harán tan necesarios como al acercarnos al HTML y CSS. Por favor, siga el tutorial de principio a fin con atención, ya que voy a discutir cada truco sólo una vez.


Recursos Utilizados Para Este Proyecto

Puede usar sus propios recursos si lo desea, pero aquí está la lista completa de las imágenes e iconos que he usado en el tutorial:


Generalmente, la conversión a HTML consta de tres partes independientes:

  • Contenido (HTML/XHTML)
  • Presentación (CSS) y
  • Comportamiento (JS)

Las tres sub-partes de hoy se definen a continuación. Siéntase libre de saltar hacia adelante y hacia atrás cuando usted es experto en una cierta habilidad esbozada en una sección específica.

  • Parte A - Contenido - Crear marcado y poblar la página Con contenido.
  • Parte B - Presentación - Posicionamiento y diseño de contenido con CSS puro.
  • Parte C - Comportamiento - Definición de interacciones con JavaScript

¡Vamos a convertir nuestro diseño de Photoshop en una página HTML funcional!


Paso A - 1: Creación de la Estructura del Sitio

Crear una estructura de carpetas bien pensada es extremadamente importante para cualquier trabajo de desarrollo web. Teniendo esto en cuenta, primero crearemos nuestra estructura de carpetas. Utilice la imagen A - 1a como guía para crear su estructura de carpetas.

A - 1a
  • En la carpeta de assets, colocaremos todos nuestros recursos: imágenes, videos, flash, etc.
  • En la carpeta de archivos, hay dos subcarpetas denominadas, códigos e imágenes.
  • La carpeta denominada códigos es para archivos css (hoja de estilos) y js (JavaScript).
  • Todas nuestras imágenes utilizadas para crear este tema se colocarán dentro de la carpeta de imágenes.
  • Nuestros archivos HTML estarán directamente dentro de la carpeta ICONIFY.

Paso A - 2: El Primer Documento HTML

Cree un nuevo archivo HTML y llámelo index.html. Abra el archivo en su editor HTML/de Cógigo favorito. Coloque el siguiente contenido dentro de su archivo index.html.

Este es un documento HTML 5 y lo estamos asegurando estableciendo su doctype en HTML. En la sección head, colocamos algunas etiquetas meta como: author, description, keywords, estas etiquetas meta ayudan a los motores de búsqueda a encontrar e indexar fácilmente nuestras páginas web. También estamos declarando el title de nuestra página y favicon.


Paso A - 3: Inspección del Diseño

A - 3a

Inspeccionando el diseño de la página de inicio, encontramos tres secciones horizontales: #header, #content y #footer. Dos (header, footer) de estas tres secciones son estáticas, porque van a ser los mismos a través del sitio. Por lo tanto, dependiendo de esta idea de marcado preliminar del diseño, nuestro marcado HTML será:

Nuestras tres secciones verticales son div#header, div#content, y div#footer. También tenga en cuenta que dentro de cada sección, hay un elemento div.inner, esto es para el efecto de resplandor de cada sección y también colocaremos todos nuestros elementos dentro de estos contenedores div.inner.

En los navegadores, nuestro documento ahora se parece a esta imagen:

HTML Preview

Nota: cada etiqueta de cierre tiene un comentario asociado, que describe el elemento que se está cerrando. Es recomendable siempre comentar partes o secciones importantes en un documento HTML. Seguiremos esta práctica hoy.

Ahora vamos a poblar nuestras tres secciones con contenido HTML, secuencialmente de cabecera a pie de página


Paso A - 4: Poblar el Encabezado

Inspeccione el diseño y localice las partes HTML en la sección de encabezado. Utilice la imagen A - 4a como guía.

A - 4a

Aquí está nuestro diseño de encabezado traducido a marcado HTML:

Vamos a cortar nuestra primera imagen, el logo, así que abra el diseño del índice en Photoshop. Seleccione la herramienta Rebanada de dentro del grupo de Herramientas de Recorte. Ahora utilice las imágenes A - 4b y A - 4c como guía para recortar su logotipo.  A continuación, vaya a Archivo->Guardar para Web y Dispositivos o presione Alt+Mayús+Ctrl+S desde el teclado para llamar al cuadro de diálogo Guardar para Web y Dispositivos. Seleccione PNG-24 y Transparent y guárdelo en nuestra carpeta raíz archivos-> imágenes como se muestra en la imagen A - 4d.

A - 4b
A - 4c
A - 4d

Utilizaremos estas mismas técnicas/pasos para cortar las siguientes imágenes. Solamente las dimensiones serán mencionadas a partir de ahora.

Vamos a llenar la sección #header con contenidos asociados. Copie lo siguiente en su documento:

Nuestro ul.top es un elemento de lista y por lo tanto está compuesto de elementos li. El último hijo de ul.top tiene nuestro formulario de búsqueda. Dentro de div#nav, hay dos hijos inmediatos: div#logo y ul#menu. ul#menu es un elemento de lista y todos sus hijos son elementos de menú. Observe que un elemento de menú tiene una clase li.active y un elemento de menú tiene una clase li.dropdown. Estas simplemente están para indicar elementos de menú activos y desplegables, respectivamente.

Su navegador debería renderizar index.html así

Browser Preview

Paso A - 5: Llene #content

Inspeccione el diseño y localice las partes HTML en la sección content. Utilice la siguiente imagen como guía.

A - 5a

Después de inspeccionar la sección de contenido en el diseño, podemos planificar nuestras sub-secciones HTML dentro de la sección #content como se muestra a continuación.

Ahora vamos a llenar la sección #content con algunos contenidos, secuencialmente, de arriba a abajo. Copie el código siguiente en su documento html.

Dentro de #slider tenemos tres enlaces de imagen, que son nuestras diapositivas. Y un div#cyclePager para el paginador o la navegación deslizante.

Este es un elemento promocional de 4 columnas llamado ul.promo-col-4 y veremos cómo posicionarlas de acuerdo a nuestro diseño en la parte de CSS. Su estructura es bastante simple -- solo coloque los elementos de cada columna dentro de un li de ul.promo-col-4.

Actualmente, nuestra página se muestra en el navegador de esta forma

Browser Preview

Esta sección promocional es la misma que ul.promo-col-4, la única diferencia es que tiene 3 columnas. Y se muestra en los navegadores de la siguiente manera:

Browser Preview

Esta es la caja de testimonios que aparece en la página principal. Dentro del elemento padre div.testimonial, colocamos un elemento blockquote dentro de un elemento div.inner.  Este elemento div.inner es para el trazo más oscuro interior de la caja de testimonios. Usaremos algunas técnicas en la porción de CSS para diseñar la caja de testimonios.

div#recentProjects tiene dos hijos: div.bar para el encabezado y un elemento ul con cuatro descendientes li para los elementos del proyecto reciente. Eche un vistazo a la vista previa del navegador:

Browser Preview

Paso A - 6: Rellenar el Pie de Página

Como de costumbre, inspeccione el diseño y localice las partes HTML en la sección footer. Utilice la imagen A - 6a como guía.

A - 6a

Después de inspeccionar la sección de pie de página en el diseño, podemos planificar nuestras sub-secciones HTML dentro de la sección #footer, como se muestra a continuación.

Copie el siguiente código en su documento html.

Hay dos descendientes inmediatos dentro de div.top : uno para nuestro encantador plugin de twitter llamado div#twitter y otro para nuestros enlaces sociales- ul.social.

El ul.content es una sección de tres columnas y cada elemento li es una columna. Utilizaremos algunos trucos en la parte de CSS para diseñarlos y posicionarlos correctamente.

div.bottom debería explicarse por sí mismo. Y esta es la vista previa del navegador:

Browser Preview

Página Principal Final HTML


Parte B Presentación

Hemos terminado la parte de marcado de este tutorial, vamos a pasar al CSS.

Primero, cree algunos archivos CSS en blanco dentro de su carpeta css. También necesitará descargar y enlazar el archivo prettyPhoto.css y el archivo 960.css del sitio web Nomarginsforerroe y 960, respectivamente. Cree y vincule sus hojas de estilo CSS desde el interior de su cabecera de documento como se muestra a continuación:

En la parte inferior, hemos enlazado dos documentos de hoja de estilo específicamente para los exploradores de IE. Los hemos colocado dentro de un bloque de comentarios condicional que sólo los navegadores de IE entienden.


Paso B - 1: Restablecimiento de Estilos Predeterminados

Es posible que haya notado a estas alturas que, aunque no hemos aplicado ningún estilo CSS a nuestro documento, nuestro contenido no está completamente desarticulado. Estos son los estilos de navegador predeterminados y se aplican a cada página cargada. Para posicionar y diseñar correctamente nuestra página, debemos aplicar algunos estilos básicos para restablecer estos estilos predeterminados, creando así una plantilla en blanco para aplicar nuestros propios estilos y posicionamiento. Vamos a hacer eso desde dentro de nuestro documento reset.css.

Abra el documento reset.css en su editor de texto. A continuación, copie lo siguiente en el documento:

Primero, declaramos que nuestro conjunto de caracteres UTF8 como el mismo que hemos usado para nuestro HTML.

En la sección de restablecimiento, estamos restableciendo estilos de navegadores y posicionamiento predeterminados. También aplicamos nuestros colores y detalles predeterminados para cuerpo y texto al selector body. Ahora, si obtiene una vista previa de su documento en cualquier navegador, notará que nuestro tema está cobrando vida lentamente con nuestros propios colores y algunos estilos que estamos aplicando desde el archivo reset.css.

Browser Preview

Paso B - 2: Elementos de Posición y Diseño

Vamos a utilizar la biblioteca grid960 para facilitar el posicionamiento. Y usaremos el archivo default.css desde ya para diseñar y posicionar nuestro contenido. Asegúrese de que ha conectado adecuadamente el archivo 960.css dentro de su sección head de index.html. No necesitamos tocar el archivo 960.css, solo usaremos algunas clases de la biblioteca 960.css para posicionar fácilmente nuestros contenidos.

Abra el archivo default.css en su editor de texto. Ahora copie y pegue lo siguiente en su archivo default.css.


Paso B - 2a: Tres Secciones Principales

Primero, vamos a posicionar las tres secciones horizontales principales: #header, #content y #footer de nuestro tema. Haremos esto aplicando la clase .container_16 a cada sección como se muestra aquí:

Ahora nuestras tres secciones principales están flotando en el centro de la página. .container_16 es la rejilla 16 de grid960. La anchura total de todas nuestras tres secciones es ahora exactamente 940px. Nuestro diseño, sin embargo, es de 980px de ancho por lo que vamos a aplicar relleno (izquierdo + derecho: 20 + 20) px alrededor de nuestras secciones. También aplicaremos otros estilos a nuestras secciones. Escriba estas reglas dentro de la sección de su archivo 2. Estructura de Tema de su archivo default.css o cópielas y péguelas.

Todas las reglas para estas tres secciones son más o menos las mismas. Para #header, estamos aplicando un color de fondo y el color del borde exterior (obtenga estos valores de color de su diseño con la herramienta cuentagotas). Y los elementos .inner para el resplandor blanco interior. Compruebe su progreso en su navegador para asegurarse de que todo se está diseñando adecuadamente. Aquí la previsualización de navegador de nuestro documento:

Browser Preview

Paso B - 2b: La Sección de Encabezado

Corte y guarde el gráfico de la regla horizontal de divisor del encabezado desde su archivo index.psd. Utilice la siguiente imagen como guía y utilice técnicas de corte de imágenes como se describe en el Paso A - 4. Utilizaremos esta imagen bdr-bg.png en numerosos lugares a lo largo de nuestro tema.

B - 2ba

Aquí nuestra sección de header con el estilo reciente:

Browser Preview

OK, un resumen de los bloques de código o trucos más importantes, secuencialmente desde arriba hacia abajo.

  • #header .top - estamos utilizando este elemento para aplicar la imagen de divisor.
  • #header .top li - esto aplica un color de texto diferente para este bloque. Y su gran line-height ayudará a que nuestro texto permanezca en medio del bloque.
  • #header .top li a - sobreescribir el estilo del elemento de enlace predeterminado y aplicar un estilo único para este bloque.
  • #header .top li: last-child - seleccionar el último hijo de #header .top y elimina su margen para un posicionamiento perfecto.
  • #header .top li: first-child a - reemplazar el estilo del primer descendiente de #header .top.
  • #header .top form - Establece position del formulario a relative para que su label flote apropiadamente.
  • #header .top legend - ocultar elemento legend para no mostrarlo
  • #header .top label - estamos posicionando la etiqueta para que actúe como un valor de campo para que los visitantes puedan definir fácilmente para qué es este campo. De forma predeterminada, lo estamos ocultando, pero lo mostraremos utilizando JS.
  • #header .top input[type = "submit"] - para este botón, divida y guarde nuestro ícono de lupa con la guía mostrada en la imagen B - 2bb.
B - 2bb

Paso B - 2c El menú

Primero copie lo siguiente en su sección menu. Puedes ver lo que ha cambiado por lo que se ha resaltado:

Estamos aplicando los nombres de clase container_16 y clearfix al elemento div#nav para posicionar correctamente nuestro #logo y #menu. Estamos aplicando .grid_5 y .alpha a div#logo para darle un espacio igual a 5 grids y remover sus márgenes izquierdos con la clase .alpha. También estamos aplicando .grid_11 y .omega a ul#menu para darle un espacio igual a 11 columnas y remover sus márgenes derechos con la clase .omega. Por último, nos encargamos de los menús desplegables o multinivel. Diseñaremos y posicionaremos el menú y los menús multinivel con CSS.

Ahora corte y guarde la flecha del elemento del menú desplegable dentro de su carpeta de archivos->imágenes como se muestra en la imagen B - 2ca

B - 2ca

Copie o escriba el código siguiente dentro de la sección menu de su archivo default.css.

¿Qué hemos hecho aquí?

  • #menu - relleno adicional para empujar los elementos del menú a la derecha.
  • #menu li - establecer su position a relative para posicionar correctamente los menús multinivel.
  • #menu>li.dropdown>a - aplicar la flecha del menú multinivel y dar un poco de relleno adicional para que el gráfico de flecha encaje perfectamente dentro del elemento de menú.
  • #menu>li.dropdown.active>a - aplicar un borde fijo al elemento de menú multi-nivel .active.
  • #menu ul - este de hecho es el elemento de menú multi-nivel. Por lo tanto, estamos aplicando algunos estilos a la decoración y la posición de nuestros elementos de menú multinivel.
  • #menu ul li - su background se muestra como el color de background real del menú multinivel.
  • #menu ul li span - darle un tamaño de texto más grande ya que las flechas parecen un poco extrañas con 12px.

Nota: nuestros menús de varios niveles tienen márgenes adicionales a la izquierda. Todo estará bien cuando apliquemos el complemento superfish de menú desplegable jquery un poco más tarde.


Paso B - 2d: El Área de Contenido

Ahora vamos a tratar con el contenido de nuestra sección #content.


El Slider de Imágenes (complemento jQuery.cycle)

Coloque, corte y guarde los radios del deslizador de imagen dentro de su carpeta de archivos->imágenes como se muestra en la imagen B - 2da

B- 2da

Copie lo siguiente en la subsección a.Home de su archivo default.css.

Los estilos son muy simples. El color de fondo de #slider debe ser mostrado como el color de resplandor interno oscuro. Lo lograremos aplicando padding de 1px dentro del elemento #slider. Aplicamos position: relative a nuestro #cyclePager para que flote en el interior del #slider y encima de las diapositivas. a.activeSlide es una clase de la diapositiva activa actual, el plugin jQuery cycle aplicará automáticamente esta clase.


Los Artículos Promocionales a 4 Columnas

Aplique estos nombres de clase a su elemento .promo-col-4 y a sus hijos:

Aquí estamos aplicando un ancho a cada columna igual a la grid 4 y borrando el error de float con la clase clearfix.

Copie o escriba los siguientes estilos después de su código #slider dentro de la sección a.Home.

En este punto su documento debe mostrar en los navegadores como la imagen que se muestra a continuación:

Browser Preview

Los Artículos Promocionales a 3 Columnas

Aplique estos nombres de clase a su elemento .promo-col-3 y a sus hijos:

..y copie esta regla CSS después de sus códigos #promo-col-4 códigos dentro de la sección a.Home.

Tenemos dos bordes en nuestras imágenes: un resplandor interior y un borde más oscuro. Podemos aplicar estos estilos directamente desde Photoshop, pero es mucho más flexible alcanzar el efecto utilizando CSS. Aplicaremos el resplandor interno de Photoshop y aplicaremos una clase de .border a nuestras imágenes para esos dos bordes. Como ejemplo, siga estas pautas sobre cómo corto, aplico los estilos y los guardo.

Las dimensiones de nuestras imágenes .promo-col-3 son 300x140. Comenzaremos por crear un nuevo documento en Photoshop midiendo 298x138px (estamos dejando 1px de alrededor de la imagen para llenar esos 1px con CSS). Ahora coloque su imagen, reduzca su tamaño mediante el uso de transform. Pulse Ctrl+A para seleccionar el lienzo completo, vaya a  Imagen->Recortar. Ahora copie los estilos de capa de cualquiera de nuestras imágenes, ahora aplique ese estilo de capa a esta nueva imagen. Después de hacer todo, debería ver el efecto de resplandor. Ahora guarde la imagen en su carpeta de activos. Aplique las mismas técnicas para nuestras futuras imágenes usando la siguiente imagen como referencia.

Image Glow

Ahora aplique una clase de .border a las imágenes y pegue este código en la sección 1. Elementos Comunes del Tema (generalmente elementos en línea) del archivo default.css.


El Testimonio

Corte y guarde la imagen de testi-arrow.png dentro de su carpeta archivos->imágenes como se muestra en la imagen B - 2db.

B - 2db

Pegue el siguiente código después de los códigos #promo-col-3 dentro de la sección a.Home.

Aquí estamos..

  • #content .testimonial .inner - sobreescribir algunos estilos del elemento .inner.
  • >.testimonial blockquote - fijar el fondo y el color del borde interno de la caja del testimonio.
  • >.testimonial .arrow - vincular la imagen de testi-arrow.png y posicionarla apropiadamente.

Vamos a comprobar de nuevo cómo están las cosas en el navegador:

Browser Preview

El Cuadro de Proyectos Recientes

Aplique estos nombres de clase a los hijos de su elemento #recentProjects:

Copie las siguientes reglas después de los códigos .testimonial dentro de la sección a.Home.

Acabamos de diseñar y posicionar los elementos de nuestra sección #content. En el navegador nuestro elemento #recentProjects debería renderizar perfectamente como se muestra a continuación.

Browser Preview

Paso B - 2e: El área de pie de página

Vamos a atacar el pie de página..


La sección .top del #footer

Aplique estos nombres de clase a su elemento .top y a sus hijos:

Pegue el siguiente código dentro de la subsección d. Footer de su archivo default.css.

Aquí estamos..

  • #footer .top - usar su propiedad de fondo para aplicar nuestro borde.
  • #twitter - aplicar nuestro pájaro de twitter como imagen de fondo. También estamos anulando algunos estilos y ocultándolos (nuestro complemento jQuery de twitter los incluirá en nuestro documento).
  • .social - estamos aplicando borde vertical con este elemento. Para su borde vertical, divida y guarde este gráfico de nuestro archivo index.psd como se muestra en la imagen B - 2ea.
B - 2ea

En este punto nuestro documento debe mostrarse como sigue. Tenga en cuenta que nuestra sección de twitter está vacía, ya que no hemos aplicado ninguna secuencia de comandos a nuestro documento.

Browser Preview

La porción .content del #footer

Aplique estos nombres de clase a su elemento .content y a sus hijos:

Pegue el siguiente código después de las reglas .top dentro de la sección d. Footer.

#footer .content .grid_4 sobreescribe la anchura .grid_4 por defecto y aolica otros estilos.

Para el corte de flecha de #toTop, guarde la flecha de nuestro archivo de Photoshop como se muestra en la imagen B - 2eb.

B - 2eb

Copie el siguiente código dentro de la sección 1. Elementos Comunes del Tema (generalmente elementos en línea) del archivo default.css.

Es posible que haya notado que hemos aplicado una clase de .list a nuestro elemento Categories dentro de la sección .content. Esta .list es una clase común en línea y podemos usarla para mostrar otros elementos de la lista en cualquier otra página. Y nuestro elemento de pie de página final se ve así:

Browser Preview

Toques Finales

Hemos diseñado con éxito nuestra página principal, y nuestro tema funciona bien en todos los navegadores modernos, excepto IE. Para IE, necesitamos algunos CSS especiales ya que no soportan algunas pseudo clases CSS. Vamos a escribir algún código específico de IE para manejar estos problemas.

Si usted previsualiza su documento en este punto en IE8 entonces usted encontrará este renderización defectuosa:

Browser Preview
Browser Preview

Para solucionar estas renderizaciones defectuosas copie o escriba las siguientes reglas dentro de su archivo ie8.css.

Si usted previsualiza su documento en IE7 encontrará algunas renderizaciones defectuosas de navegador más que en IE8 +

Para solucionarlas, copie o escriba las siguientes reglas dentro de su archivo ie7.css.

Nota: estamos apuntando a algunos elementos que aún no existen. Utilizaremos estos selectores/elementos más adelante.


Paso - C Definición de Interacciones con JavaScript

Descargue y vincule estas bibliotecas de JavaScript. JQuery JavaScript Library v1.4.2, jQuery.prettyPhoto v-2.5.6 y jQuery.cycle v-2.80.

Ahora abra su archivo init.js y copie el código fuente de los siguientes complementos:

Todas las bibliotecas anteriores son de terceros. Las estamos combinando en un único archivo para menos solicitudes HTTP. Entre ellas tinyValidator es un mini complemento de validación que yo he desarrollado. Ahora vamos a arrancar/inicializar nuestros scripts. Copie el código siguiente dentro de la sección de Códigos de Inicialización JavaScript del Sitio de su archivo init.js.

Estamos colocando todos nuestros códigos de inicialización de sitio dentro de una función anónima.

  • En el primer bloque estamos eliminando el estado hover de las imágenes con una clase .border.
  • Inicializar complemento jQuery scrollToTop con nuestro elemento #toTop.
  • Asegúrese de que #cycle esté disponible y luego inicialice el complemento cycle.
  • Cambiar la etiqueta del formulario de búsqueda y usar su etiqueta como valor del campo.
  • Inicializando la función de menú desplegable usando los complementos jquery 'superfish.js' y 'supersubs.js'
  • Inicializando el complemento de twitter. Puede mostrar su tweet solo cambiando la variable userName.

Conclusión

¡Uf! Hemos finalizado la parte más importante de nuestra fase de codificación. Usted puede notar que algunas prácticas o técnicas han sido exageradas, pero éstas eran sólo para fines de demostración y algo más. Vamos a trabajar en terminar este tema en la siguiente parte. ¡Muchas Gracias Por Leer!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.