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

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):

.
├── index.html
└── assets
    ├── css
    ├── img
    ├── js
    └── sketch

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).

<!doctype html>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <title>Gimmie Dat iCon</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="assets/js/main.js"></script>
</body>
</html>

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:

/*
    General Styles

    Colors
    @highlight: #196E76
    @text: #4A4A4A;
    @text-light: #9A9A9A
    @body-background: #EEEEEE;
*/

*, 
*:before, 
*:after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html {
  box-sizing: border-box;
  background: #EEEEEE;
  text-align: center;
}

body {
    font-size: 1em;
    line-height: 1.5;
    font-family: Lucida Grande, sans-serif;
    max-width: 43.75em; /* 880/16 */
    margin: 0 auto;
    padding: 0;
    color: #4A4A4A;
}

img {
    max-width: 100%;
    height: auto;    
}

a {
    color: inherit;
}

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.

1	<header>
2	<h1><a href="./">Gimmie Dat iCon</a></h1>
3	<p>Retrieve full-sized icon artwork for iOS & Mac apps.</p>
4	</header>

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.

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

/*
    Header Styles
*/
header {
    margin: 1em 0 2em;
    color: #196E76;
}

    header h1 {
        font-family: 'Pacifico', serif;
        font-size: 3em; 
        text-shadow: 0 4px 2px rgba(0, 0, 0, .1);
        margin: 0;
    }

        header h1 a {
            text-decoration: none;
        }

    header p {
        margin-top: -.625em;
        text-indent: 7.75em; /* indent slightly */
        text-shadow: 0 1px 0px rgba(0, 0, 0, .15);
        font-size: .875em; /* 14/16 */
    }

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.

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:

@media screen and (max-width: 600px) {
    header p {
        text-indent: 0;
        margin-top: .5em;
    }
}

¡Allí, ahora tenemos un encabezado adaptable!

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:

<main>
    <!-- input -->
    <form class="submit">
        <input type="url" placeholder="iTunes Link...">
        <button type="submit">Gimmie</button>
    </form>  
    <!-- ./input -->
</main>

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.

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

/*
    Form Input
    Styles for the form input and button
*/
form {
    position: relative;
}

    form input{
        width: 100%;
        display: block;
        font-size: 1em;
        padding: .625em .85em;
        padding-right: 7em;
        line-height: 1.5;
        margin: 0;
        border: 1px solid #bbb;
        box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset, 
                    0 2px 4px rgba(0, 0, 0, .1);
        border-radius: 3px;
    }

        form input:focus {
            border-color: #298cda;
        }

    form button {
        text-decoration: none;
        background: #196E76;
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        line-height: 1.5;
        color: white;
        font-size: 1em;
        border-radius: 0 3px 3px 0;
        border: 0;
        outline: 0;
        text-align: center;
        -webkit-appearance: none;
        margin: 0;
        padding: 0 1em;
        font-family: 'Pacifico', serif;
    }
        form button:hover {
            cursor: pointer;
        }

        form button:disabled {
            opacity: .5;
        }

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.

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í:

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

<main>
    <!-- input -->
    <form class="submit">
        <input type="url" placeholder="iTunes Link...">
        <button type="submit">Gimmie</button>
    </form> 
    <!-- ./input -->
    <!-- output -->
    <div class="wrapper">
        <div class="content">
            <p><strong>Enter a valid iTunes app store link, i.e.</strong> <a href="https://itunes.apple.com/us/app/twitter/id333903271?mt=8">https://itunes.apple.com/us/app/twitter/id333903271?mt=8</a></p>
            <img src="assets/img/icon-placeholder.svg" alt="Icon placeholder" />
        </div>
    </div>
    <!-- ./output -->
</main>

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:

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.

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

/*
    Content Styles
    Main container for content, i.e. the icons, error messages, etc
*/
.wrapper {
    background: #fff;
    border: 1px solid #ccc;
    text-align: center;
    padding: 2em;
    margin: .5em 0 2em;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    border-radius: 3px;
    position: relative;
}

.content {
    max-width: 512px;
    margin: 0 auto;
    position: relative;
    word-wrap: break-word; /* for long urls */
}

    .content * { /* do a simple reset on elements in .content */
        margin: 0;
        padding: 0;
    }

    .content strong {
        font-weight: bold;
        display: block;
    }

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!

¡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í!