Construye un clon de Twitter desde cero: El diseño

() translation by (you can also view the original English article)

Este artículo representa el primero de un nuevo esfuerzo grupal por parte del personal de Nettuts+, que cubre el proceso de diseño y construcción de una aplicación web desde cero, ¡en múltiples idiomas! Utilizaremos un clon ficticio de Twitter, llamado Ribbit, como base para esta serie.

En este tutorial, debemos enfocarnos en la IU. Aprovecharemos el popular preprocesador LESS para que nuestro CSS sea lo más manejable posible.

Introducción

Asegúrate de descargar los recursos para este tutorial, si funciona bien.

Este tutorial se divide en cinco partes principales, que explican cómo diseñar varias páginas de Ribbit. Haré referencia a elementos HTML utilizando selectores de CSS para que sea más fácil de entender. Pero antes de sumergirnos en el diseño, analicemos brevemente la anidación.

Anidando

En CSS, hacer referencia a un elemento anidado puede dar como resultado selectores largos. Por ejemplo:

someId {
  /* ... */
}

someId div.someClass {
  /* ... */
}

someId div.someClass p.someOtherClass {
  /* ... */
}

someId div.someClass p.someOtherClass target {
  /* ... */
}

¡Y puede crecer aún más! Con LESS, puedes anidar un elemento en otro, lo que facilita la lectura:

1	someId {
2	/* ... */
3	div.someClass {
4	/* ... */
5	p.someOtherClass {
6	/* ... */
7	target {
8	/* ... */
9	}
10	}
11	}
12	}

Variables y Mixins

Crea un nuevo archivo y asígnale un nombre, style.less. Al usar cualquier preprocesador de estilo, es una buena idea almacenar colores y tamaños importantes dentro de las variables; puedes ajustar fácilmente sus valores sin buscar el archivo, buscando los valores de propiedad que necesitas cambiar. Utilizaremos un puñado de variables para el color del texto, el color del borde y el ancho del contenido:

1	@text-color: #3F3E3D;
2	@border-color: #D2D2D2;
3	@content-width: 860px;

Ahora, vamos a crear dos mixins. El primero creará la ilusión de texto antialias, y el segundo permitirá los degradados entre navegadores. El primero es bastante simple:

1	.antialiased (@color) {
2	color: @color;
3	text-shadow: @color 0 0 1px;
4	}

El truco consiste en crear una sombra debajo del texto con el mismo color y una extensión de un píxel, haciendo que el navegador muestre una buena sombra alrededor del texto.

Ahora para el gradiente; esto es más complicado que el texto antialias porque cada navegador implementa degradados de manera diferente. Una vez que hayamos compensado los diversos prefijos de proveedor, aquí está el código:

1	.gradient4f (@p1, @c1, @p2, @c2, @p3, @c3, @p4, @c4) {
2	background: @c1;
3	background: -moz-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
4	background: -webkit-gradient(linear, left top, left bottom, color-stop(@p1, @c1), color-stop(@p2, @c2), color-stop(@p3, @c3), color-stop(@p4, @c4));
5	background: -webkit-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
6	background: -o-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
7	background: -ms-linear-gradient(top, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
8	background: linear-gradient(to bottom, @c1 @p1, @c2 @p2, @c3 @p3, @c4 @p4);
9	}

Cada navegador tiene un prefijo: -moz- para Firefox, -webkit- para Chrome, etc. La última línea usa la versión recomendada W3C para degradados. Si un navegador lo admite, anulará las propiedades anteriores porque es la última propiedad background de la declaración en la regla. La función linear-gradient acepta ocho parámetros: cuatro pares de valores de color porcentual. Crea el degradado con cuatro pasos de color.

Estilos globales

A continuación, resaltemos algunos elementos globales, como botones y enlaces. Queremos que todos los elementos usen las fuentes Helvetica o Arial con el color de texto definido anteriormente:

1	* {
2	font-family: sans-serif;
3	color: @text-color;
4	}

Body

El body, o cuerpo es bastante fácil; necesitamos un fondo blanco con un patrón basado en imágenes. No hay márgenes y relleno:

body {
    background: white url(gfx/bg.png);
    margin: 0;
    padding: 0;
}

Inputs

También proporcionaremos un estilo predeterminado para todos los elementos <input/> en la página:

input {
    width: 236px;
    height: 38px;
    border: 1px solid @border-color;
    padding: 0 10px;
    outline: none;
    font-size: 17px;

    &:focus {
        background: #FFFDF2;
    }
}

Configuramos el tamaño y el relleno predeterminados, y usamos la variable @border-color para eliminar el contorno azul molesto cuando el elemento está enfocado. Deberías notar otro poco del dulce LESS: podemos agregar pseudo-clases de CSS (y también clases normales) usando el carácter & (referencia principal), como se muestra aquí:

1	&:focus {
2	background: #FFFDF2;
3	}

Esto hace que la entrada tenga un fondo amarillo claro cuando se enfoca.

Submits

Los botones de tipo Submit, o sea, los de enviar usarán tanto la mezcla previamente definida como border-radius para crear un bonito efecto:

input[type="submit"] {
    height: 36px;
    border: 1px solid #7BC574;
    border-radius: 2px;
    color: white;
    font-size: 12px;
    font-weight: bold;
    padding: 0 20px;
    cursor: pointer;
    .gradient4f(0%, #8CD585, 23%, #82CD7A, 86%, #55AD4C, 100%, #4FA945);
}

Links - Enlaces

Los enlaces deben tener un color diferente al texto normal. También los subrayaremos cuando pasamos el cursor.

a {
    text-decoration: none;
    .antialiased(#58B84E);
    &:hover {
        text-decoration: underline;
    }
}

Plantilla básica

Comenzaremos con la parte del diseño que permanece igual en cada página. Aquí está el código HTML, que explicaré a continuación:

<!DOCTYPE HTML>
<html>
<head>
    <link rel="stylesheet/less" href="style.less">
    <script src="less.js"></script>
</head>
<body>
    <header>
        <div class="wrapper">
            <img src="gfx/logo.png">
            <span>Twitter Clone</span></p>

    </div>
  </header>
  <div id="content">
    <div class="wrapper">

    </div>
  </div>
  <footer>
    <div class="wrapper">
      Ribbit - A Twitter Clone Tutorial<img src="gfx/logo-nettuts.png">
    </div>
  </footer>
</body>
</html>

Comenzamos con una definición de documento normal (el doctype) y un encabezado (head) de documento. Puedes usar la biblioteca less.js e incluir style.less en la etapa de desarrollo (como hice en este código). Más tarde, puedes compilar el archivo LESS en CSS, si no deseas usar less.js. Como probablemente ya hayas notado, el diseño se divide en tres partes: header, #content, y footer Debes guardar este HTML para ver si estás diseñando todo correctamente.

Header

Vamos a abordar el encabezado. Esto contiene el logo de Ribbit y las dos palabras: 'Twitter Clone'. Está envuelto en un wrapper, cuyo ancho está controlado por la variable @content-width. Hay varios contenedores en el diseño, y todos tienen un @content-width con un margen auto:

1	.wrapper {
2	width: @content-width;
3	margin: auto;
4	}

El encabezado en sí tiene 85px de alto y ancho de página:

header {
  background: url(gfx/bg-header.png);
  height: 85px;
  width: 100%;
}

Después del ancho, agrega el estilo de div.wrapper con relleno vertical:

1	div.wrapper {
2	padding: 11px 0;
3	}

El encabezado debería verse así:

header {
    background: url(gfx/bg-header.png);
    height: 85px;
    width: 100%;

    div.wrapper {
        padding: 11px 0;
    }

Las imágenes en el wrapper deben ser 10px más bajas, para poder estar bien centradas:

img {
    position: relative;
    top: 10px;
    margin: 0 15px 0 0;
}

Además, la fuente en los elementos <span/> debe ser mayor que el tamaño predeterminado:

1	span {
2	font-size: 18px;
3	margin: 0 42px 0 0;
4	}

Así es como debe verse nuestro diseño en este punto.

Contenido

No hay mucho que podamos hacer con #content en este momento. Agregaremos un poco de margen en la parte inferior y una altura mínima; el diseño se verá mal si no es lo suficientemente alto:

1	#content {
2	margin-bottom: 15px;
3	min-height: 560px;
4	}

En el interior, el wrapper necesita tener un margen vertical con un margen horizontal automático:

1	div.wrapper {
2	margin: 38px auto;
3	}

Footer

Al igual que el encabezado, el pie de página es el mismo para todas las páginas. Usaremos una imagen de fondo y un tamaño de letra más pequeño. También tendremos clear: both, porque usaremos contenido flotante. Sin clear, el pie de página no se ajustará de acuerdo con el contenido:

footer {
  background: url(gfx/bg-footer.png);
  height: 251px;
  font-size: 14px;
  clear: both;
}

Ahora agreguemos algo de relleno al wrapper, y las imágenes dentro de él deben flotar a la derecha:

div.wrapper {
    padding: 15px;

    img {
        float: right;
    }
}

Aquí está nuestro pie de página:

La página de inicio

Esta página se muestra para los usuarios que no iniciaron sesión en Ribbit. Por lo tanto, deberás presentar el formulario de inicio de sesión en el encabezado y un formulario de registro, con una gran imagen de rana en el contenido. Comencemos con una plantilla básica.

Cajas de inicio de sesión

Agrega este formulario de inicio de sesión al div.wrapper del header, después del elemento <span/>:

1	<form>
2	<input type="text">
3	<input type="password">
4	</form>

Estos inputs ya están diseñados, pero necesitamos agregar los márgenes y hacer que el formulario se muestre en línea mediante la propiedad display y el valor inline. Agrega esto después del span en el div.wrapper del header:

form {
    display: inline;

    input {
        margin: 0 0 0 14px;
    }
}

Formulario de registro

Aquí está el HTML para el formulario de registro:

<img src="gfx/frog.jpg">
<div class="panel right">
    <h1>New to Ribbit?</h1>
    <form>
        <input name="email" type="text">
        <input name="password" type="text">
        <input name="password2" type="password">
        <input type="submit" value="Create Account">
    </form>
</div>

Agrega este HTML dentro de div.wrapper de #content. Queremos que la imagen tenga esquinas redondeadas y que flote hacia la izquierda (agrégala después del margen en div.wrapper de #content):

1	img {
2	border-radius: 6px;
3	float: left;
4	}

Ahora, podemos diseñar el formulario de registro. También será un panel que usaremos más tarde; es por eso que vamos a diseñar el .panel:

div.panel {
    border: 1px solid @border-color;
    background: white;
    margin: 0;
    margin-bottom: 29px;
    border-radius: 6px;
    font-size: 14px;
}

Por ahora, sin embargo, solo diseñamos el panel derecho (right). Es más angosto y se adhiere al lado derecho del panel. Naturalmente, inserta lo siguiente en div.panel:

&.right {
    width: 303px;
    height: 313px;
    float: right;
}

Además, debemos ocuparnos del encabezado y el contenido del panel. Usamos elementos <h1/> para el encabezado y elementos <p/> para el contenido. Ten en cuenta que puedes usar el comodín * dentro de otro elemento:

* {
    margin: 6px 0;
}
form {
    padding: 0 23px;
}
h1 {
    border-bottom: 1px solid @border-color;
    margin: 5px 0;
    font-weight: normal;
    font-size: 18px;
    padding: 13px 23px;
    height: 23px;
}
p {
    padding: 0 24px;
    margin: 18px 0;
}

Así es como debe verse el estilo del div.panel:

div.panel {
    border: 1px solid @border-color;
    background: white;
    margin: 0;
    margin-bottom: 29px;
    border-radius: 6px;
    font-size: 14px;

    &.right {
        width: 303px;
        height: 313px;
        float: right;
    }
    
    * {
    margin: 6px 0;
  }
  h1 {
    border-bottom: 1px solid @border-color;
    margin: 5px 0;
    font-weight: normal;
    font-size: 18px;
    padding: 13px 23px;
    height: 23px;
  }
  p {
    padding: 0 24px;
    margin: 18px 0;
  }
}

Y aquí hay una captura de pantalla de cómo debe verse esta página, hasta ahora (haz clic para ver el tamaño completo):

Página de amigos

La página de amigos debe mostrarse cuando un usuario inicia sesión. Mostrará una lista de los últimos "Ribbits", junto con algunas estadísticas de su cuenta. Una vez más, comienza con la plantilla básica. Esta página, junto con otras páginas, mostrará un botón de cierre de sesión en lugar del formulario de inicio de sesión en el header:

1	<form>
2	<input type="submit" id="btnLogOut" value="Log Out">
3	</form>

Los botones ya han sido diseñados, por lo que solo necesitamos fijarlos en el lado derecho del contenedor y agregar algunos márgenes:

1	#btnLogOut {
2	float: right;
3	margin: 14px 0 0 0;
4	}

Como el selector de esta regla es la identificación de un elemento, puedes colocarlo fuera de cualquier elemento o dentro del div.wrapper del encabezado. Es tu elección, pero recuerda que, si eliges ubicarlo dentro de otro elemento, el CSS compilado tendrá un selector más largo (header div.wrapper #btnLogOut).

Cuadro para "Crear un Ribbit"

Primero, agrega el código de este panel a div.wrapper de #content:

<div id="createRibbit" class="panel right">
    <h1>Create a Ribbit</h1>
    <p>
        <form>
            <textarea name="text" class="ribbitText"></textarea>
            <input type="submit" value="Ribbit!">
        </form>
    </p>
</div>

La clase .right se diseñó antes, pero necesitamos agregar un poco de estilo para el elemento <textarea/>. Le daremos un tamaño y borde apropiados:

textarea.ribbitText {
    width: 249px;
    height: 160px;
    border: 1px solid @border-color;
}

Agrega esto en la definición de estilo del panel derecho.

Informacion del usuario

Ahora, centrémonos en el panel, que contiene la información de la cuenta del usuario. Lo rellenaremos temporalmente con contenido aleatorio para ver el diseño:

<div id="ribbits" class="panel left">
    <h1>Your Ribbit Profile</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username
        <p>
            567 Ribbits<span class="spacing">45 Followers</span><span class="spacing">32 Following</span><br>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

Puede parecer complejo, pero la estructura es bastante simple cuando eliminas el contenido:

<div id="ribbits" class="panel left">
  <h1>Your Ribbit Profile</h1>
  <div class="ribbitWrapper">
    <img class="avatar" src="gfx/user1.png">
    <span class="name"> </span>
    <p>
       <span class="spacing"> </span><span class="spacing"> </span><br>
    </p>
  </div>
</div>

De todos modos, tenemos otro panel; entonces tenemos que darle estilo primero:

1	&.left {
2	width: @content-width - 327;
3	float: left;
4	}

Probablemente sepas dónde colocar este código (fíjate en la facilidad con la que puedes realizar operaciones aritméticas en LESS). Este panel contiene div.ribbitWrapper. Por lo tanto, agrega el siguiente código:

1	div.ribbitWrapper {
2	padding: 15px 0;
3	}

Hay dos elementos <span/> dentro de este elemento, cada uno con un color y tamaño de fuente diferente. Tienen clases de .name y .time:

span {
    &.name {
        font-size: 18px;
        color: #58B84E;
    }

    &.time {
        font-size: 12px;
        color: #CCC;
    }
}

También deberíamos colocar la imagen del avatar cerca del borde izquierdo. Agrega el siguiente código:

1	img.avatar {
2	margin: 0 19px 0 20px;
3	float: left;
4	}

Además, el texto de Ribbit debe ser anti-alias, justificado y movido a la derecha. Este código colocará el texto al lado del avatar, en lugar de debajo de él:

p {
    margin: 5px 50px 0 90px;
    padding: 0;
    text-align: justify;
    line-height: 1.5;
    .antialiased(@text-color);
}

En este párrafo, hay elementos <span/> con líneas verticales, que los separan visualmente. Este efecto se logra mediante el uso de borde, relleno y margen:

span.spacing {
    padding-left: 9px;
    margin-left: 9px;
    height: 10px;
    border-left: 1px solid @border-color;
}

Ribbits de los amigos

Este panel enumera los últimos ribbits de las personas a las que sigue el usuario. Inserta lo siguiente después del panel de información del usuario:

<div class="panel left">
    <h1>Your Ribbit Buddies</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">15m</span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

Hay algunos ribbits de ejemplo para ver cómo se ve. Añadiremos algunos bordes para separarlos visualmente. Agrega este código en div.ribbitWrapper:

1	border-bottom: 1px solid @border-color;
2	&:last-child {
3	border: none;
4	}

Este estilo agrega el borde inferior, al tiempo que elimina el borde del último div.ribbitWrapper; un borde ya existe en el panel.

Así es como debe verse esta página ahora:

Página pública de Ribbits

La página "Ribbits públicos" enumerará los últimos ribbits de perfiles no marcados como privados, para que los usuarios puedan ver los ribbits de aquellos que no tienen en su lista de amigos. Sorprendentemente, no hay nada más que diseñar, pero sí necesitamos agregar un toque de HTML. La única diferencia entre esta y la página anterior es que esta no tiene el panel de información del usuario, pero tendrá otro contenido en el sitio final. Así que siéntete libre de copiar el código de la página de amigos, pero elimina este panel:

<div id="ribbits" class="panel left">
    <h1>Your Ribbit Profile</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username
        <p>
            567 Ribbits<span class="spacing">45 Followers</span><span class="spacing">32 Following</span><br>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

También cambia el encabezado del panel a "Ribbits públicos". Aquí está la vista previa de esta página:

Página de perfiles públicos

En esta página, los usuarios pueden ver una lista de perfiles que no están marcados como privados. También hay un cuadro de búsqueda para buscar otros perfiles. Comenzaremos con la plantilla básica.

Búsqueda del perfil

El cuadro de búsqueda usará el panel .right con un elemento <input/> dentro:

<div class="panel right">
    <h1>Search for profiles</h1>
    <p>
        <form>
            <input name="query" type="text">
            <input type="submit" value="Ribbit!">
        </form>
    </p>
</div>

Lista de perfiles

Aquí hay algunos perfiles de ejemplo para la lista de perfiles, para que puedas ver cómo se ve en el navegador. En una lección futura, por supuesto reemplazaremos esto, en consecuencia.

<div id="ribbits" class="panel left">
    <h1>Public Profiles</h1>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user2.png">
        <span class="name">Kermit</span> @username <span class="time">625 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user1.png">
        <span class="name">Frogger</span> @username <span class="time">329 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
    <div class="ribbitWrapper">
        <img class="avatar" src="gfx/user3.png">
        <span class="name">Hypnotoad</span> @username <span class="time">129 followers <a href="#">follow</a></span>
        <p>
            Cras justo odio, dapibus ac facilisis in, egestas Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. <a href="#">http://net.tutsplus.com/tutorials/php/ ...</a>
        </p>
    </div>
</div>

Esta página debe verse así:

Compilando el CSS

Hacer referencia a un elemento anidado puede generar selectores largos.

Como señalé anteriormente, para la producción, puedes compilar tu LESS a CSS (y te recomiendo que lo hagas por motivos de rendimiento). Hay algunos compiladores en línea disponibles:

Junto con algunos compiladores independientes:

¡Crunch! (que es un editor LESS completo)
WinLess (cuenta con compilación automática cuando modificas el archivo)
SimpLESS (incluye minificación de CSS)

Si alguno de estos compiladores no funciona para ti, busca más; ¡hay bastantes! También puedes usar lessc desde el sitio LESS, pero es mucho más fácil compilar tus archivos LESS con otros compiladores. Por supuesto, no hay nada de malo en utilizar la biblioteca less.js para compilar dinámicamente el diseño; los nuevos navegadores almacenan en caché el CSS resultante.

Conclusión

Como puedes ver, LESS es una herramienta poderosa que lo hace mucho más fácil y rápido que el CSS simple para crear hermosos diseños.

Pero esto es solo el principio. Pero esto es solo el comienzo. ¡Prepárate para implementar el back-end de Ribbit en una plétora de idiomas y plataformas en la próxima serie de tutoriales!...