Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Web Apps
Webdesign

Creación de una aplicación Web impulsada por APIs con HTML y CSS

by
Difficulty:IntermediateLength:MediumLanguages:
This post is part of a series called Building a Mini, API-Driven Web App.
Designing an API-Driven Web App in Sketch
Connecting an API-Driven Web App with Javascript

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

Final product image
What You'll Be Creating

Después de haber diseñado algunos simulacros visuales para ayudar a guiarnos en la construcción de nuestra pequeña aplicación para el navegador, ¡vamos a llegar a la parte emocionante y empezar a crear!

Estructura de archivos

Vamos a configurar nuestra estructura de archivos para el proyecto. Se verá algo como esto (con cada activo respectivo viviendo en su carpeta correspondiente):

Ahora tenemos una carpeta para cada uno de nuestros activos, así como el archivo .sketch que creamos anteriormente, el cual contiene nuestros mocks de página.

HTML inicial

Basado en nuestra estructura de archivos, vamos a configurar nuestro documento HTML básico con enlaces a nuestros activos (que vamos a crear en un momento).

Esto es lo que tenemos hasta ahora:

  • Estructura de página HTML básica con encabezado, contenido principal y áreas de pie de página.
  • Enlace a nuestro CSS personalizado (que vamos a crear)
  • Enlace a Pacifico en Google Fonts (como se mencionó anteriormente, esta es la fuente que usaremos para mostrar el nombre de nuestra pequeña aplicación)
  • Enlaces a nuestro javascript personalizado (que vamos a crear), así como la biblioteca jQuery en Google Hosted Libraries CDN

CSS inicial

Debido a que esta pequeña aplicación es relativamente pequeña y simple, voy a favor de usar CSS de vainilla en este proyecto (no preprocesador), pero obviamente puede escribir su CSS en la forma que desee.

Comencemos configurando algunos estilos de página básicos y haciendo referencias de comentarios a los colores que usaremos. En assets/css/styles.css vamos a hacer lo siguiente:

Aquí hemos configurado algunos estilos básicos de páginas que rigen las imágenes, los enlaces y el modelo de cuadro que usaremos. Como usted puede haber notado, estamos usando la etiqueta body como envoltura fijando su max-width. Esto mantendrá todo nuestro contenido centrado en el centro de la página sin extenderse más allá de un cierto ancho.

Observe que también definimos los valores de color que usaremos en los comentarios superiores. Puesto que no estamos utilizando un preprocesador que nos permita establecer variables, éstas resultarán útiles a medida que continuamos escribiendo nuestros estilos.

Encabezado de la aplicación

Vamos a crear el encabezado de nuestra aplicación. Recuerde, en Sketch hemos diseñado esto:

Screenshot of the header component in Sketch

Por lo tanto, vamos a crear el HTML para que coincida con nuestro simulacro. Vamos a poner este contenido en el elemento header que creamos anteriormente.

Ahora tenemos el nombre y la descripción de nuestra aplicación en la parte superior de la página. Pero los estilos son bastante básicos.

Screenshot of HTML header

Vamos a escribir algunos estilos para nuestro encabezado de página que va más en consonancia con nuestro simulacro:

He aquí un breve resumen de lo que hicimos:

  • Color y espaciamiento para el contenedor de encabezado
  • Elnombre de la aplicación header h1 está configurado para utilizar la fuente Pacifico de Google (recuerde, establecemos un enlace a este recurso en nuestro encabezado)
  • La descripción de la aplicación header p está ligeramente compensado para evitar que se ejecute en el descensor del "G" en el nombre de la aplicación.

Ahora tenemos nuestra cabecera que se parece más al diseño:

Screenshot of HTML header after adding styles

Sin embargo, !recuerde que nuestra aplicación va a ser adaptable! Así que si verificamos estos estilos en un ancho más estrecho usando las herramientas de desarrollo de Chrome, notarás que el ajuste de texto para la descripción es un poco funky debido a nuestro text-indent.

Screenshot of header text wrapping

Para aliviar esto, con anchos más estrechos, eliminaremos la sangría de texto y golpearemos el texto de descripción hacia abajo con un margin-top para que la envoltura se vea más natural. Escribamos una consulta de medios para ayudarnos a:

¡Allí, ahora tenemos un encabezado adaptable!

Screenshot of completed header

Entrada de la aplicación

La siguiente etapa es pasar a las áreas de entrada y salida de nuestro simulacro. Recuerde que se parecía a algo así:

Screenshot of the input component in Sketch

Primero, vamos a agregar el campo de entrada al elemento HTML main que creamos anteriormente:

Ahora tenemos un formulario con una entrada y un botón de envío. Buena semántica hasta el momento, pero no está muy mirando cómo lo queremos. Necesitaremos agregar algunos estilos.

Screenshot of app input without styles

Añadamos algunos estilos a nuestros elementos de entrada y de botón de formulario.

Aquí hemos añadido algunos estilos a nuestro formulario de entrada y el botón, así como algunos estados diferentes como :hover, :focus, y :disabled. Esto nos ha dado un estilo de entrada tal y como lo diseñamos en nuestro simulacro.

Screenshot of styled input

Salida de la aplicación

En este punto podemos crear lo que hemos llamado el área de "salida". Aquí es donde renderizaremos dinámicamente el icono devuelto por la API de iTunes. Sin embargo, en la carga inicial de la página, el usuario aún no ha solicitado nada. Así que vamos a utilizar nuestro diseño de estado cero por ahora. Recuerda de nuestros simulacros, se ven así:

Screenshot of the zero state in Sketch

Seguiremos agregando al elemento HTML main en el que hemos estado trabajando:

Tenga en cuenta que hemos añadido la salida HTML justo después de nuestro HTML de entrada. Se compone de un envoltorio, que actúa como el gran cuadro blanco en nuestro diseño, y el contenido, que se centra dentro de eso. Utilizaremos CSS para establecer el elemento .content para que tenga un max-width de 512 píxeles, ya que es el tamaño más grande en el que mostraremos nuestro icono. Por ahora sin embargo, tenemos algo que se parece a esto:

Screenshot of output without styles

Tenga en cuenta que nuestro marcador de posición del icono está ausente. Si volvemos a nuestro documento de Sketch, podemos mostrar fácilmente ese recurso como SVG para su uso en el navegador.

Screenshot of outputing icon placeholder in sketch

Ahora deberíamos tener la imagen apareciendo en el navegador.

Screenshot of output without styles

Vamos a añadir algunos estilos a nuestro cuadro de salida.

La mayoría de los CSS que hemos agregado aquí tiene comentarios en el código para explicarlo. Añadimos estilos a nuestro envoltorio externo, entonces, porque no hicimos un restablecimiento completo de CSS en la página, realizamos un restablecimiento simple en elementos HTML dentro de nuestro área de contenido aplicando .content *

Por último, hemos añadido un estilo para elementos en negrita en nuestro estado cero. ¡Ahora deberíamos tener algo parecido a nuestro simulacro!

Screenshot of output with styles

¡Gran trabajo!

Ahora que tenemos nuestra estructura HTML toda la configuración, junto con los estilos correspondientes, estamos listos para saltar y manejar las interacciones de la página con JavaScript!

En el siguiente (y final) tutorial de esta serie, averiguaremos cómo tomar la entrada del usuario, hacer una solicitud de API y mostrar la salida en el navegador. ¡Te veo allí!

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.