Diseñe y Codifique una Aplicación Facebook Integrada: HTML + CSS

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

!Bienvenidos de vuelta! En esta parte del tutorial vamos a estar codificando nuestro diseño en HTML e ilustrando algunas de las propiedades de estilo CSS de Facebook que le darán esa sensación nativa. Así que quédese conmigo, hágase una taza de té y ¡feliz codificación!

Introducción

Bienvenido a la parte 2 de nuestro diseño y codificación de una aplicación nativa de Facebook. En el último artículo vimos detrás de bambalinas algunos de los procesos de pensamiento involucrados con la creación de una aplucacipon de Facebook con un aspecto y sensación nativos. Aunque no entramos en gran detalle sobre el diseño real de la misma en Photoshop; discutimos cómo los principios de diseño de Facebook pueden ayudarle a diseñar su aplicación. Para mi ejemplo opté por recrear el blog de webdesigntuts+ como una aplicación de Facebook. Supongo que todos ustedes están lo suficientemente cómodos en Photoshop para tenerlo replicado o adaptado para crear su propio diseño nativo de apariencia.

Lo que Estaremos Creando

Design and Code an Integrated Facebook App

En esta parte del tutorial vamos a estar codificando ese diseño en HTML e ilustrando algunas de las propiedades de estilo CSS de Facebook que le darán esa sensación nativa. Así que quédese conmigo, hágase una taza de té y ¡feliz codificación!

Paso 1: Fallar al Prepararse es Prepararse para Fallar

Siempre es una buena idea comenzar con un poco de planificación de antemano. Algunos de ustedes querrpan diseñar su diseño en Photoshop, mientras que algunos de ustedes que están lo suficientemente confiados querrán saltar directamente desde el esquema al marcado HTML/CSS. Personalmente a mí siempre me gusta crear lo que voy a estar codificando primero en Photoshop, ya que me da una fuerte idea visual de lo que voy a estar codificando. También puede ser útil en el futuro para cuando usted quiera actualizar su aplicación. Puede ser mucho más fácil organizar y conceptualizar cosas en Photoshop de lo que puede ser en su editor de código.

A veces también me gusta imprimir mi esquema y marcar las dimensiones en el mismo con una pluma. Esto también hace la vida más fácil cuando estoy codificando todo. A medida que usted avance, estoy seguro de que va a llegar a sus propios métodos y maneras de hacer las cosas y una parte de ello es encontrar la mejor manera que más le convenga.

Paso 2: Estructura de la Aplicación

La forma en que tengo mi carpeta estructurada es la siguiente (y esto es más o menos mi forma estándar de configurar las cosas para cada proyecto). Puede ahorrarse mucho tiempo simplemente creando esta plantilla de carpetas en blanco en su disco duro y copiándola cada vez que cree un nuevo proyecto

css
js
imágenes
index.html

Paso 3: Marcado HTML


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Design and Code an integrated Facebook App</title>

<link rel="stylesheet" type="text/css" href="https://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/myjava.js" type="text/javascript"></script>


</head>

<body>
</body>
</html>

Configurando nuestros Includes

Para este proyecto he usado el doctype de HTML5, el cual creo que la mayoría de ustedes deberían haber probado ya. Para mi restablecimiento CSS he vinculado el restablecimiento de Yahoo CSS desde su biblioteca YUI. Si usted no está familiarizado con un restablecimiento CSS, en su forma más básica se puede describir como:

una hoja de estilo para reducir las inconsistencias del navegador en cosas como alturas de línea predeterminadas, márgenes y tamaños de fuente de los encabezados, etc.

No voy a entrar en demasiados detalles sobre eso en este tutorial, pero puede encontrar más información referente a esto en la siguiente sección de lectura.

Después del restablecimiento he vinculado mi propio archivo CSS, al cual he llamado 'style.css'. He hecho esto para la última versión include de jQuery y un include a mi propio archivo javascript que he llamado 'myjava.js' (a pesar de que vamos a crear este archivo en la siguiente parte del tutorial). Este archivo nos permitirá hacer nuestra búsqueda de filtros y cambiar el contenido de nuestras pestañas de página

Configurando Nuestra Página


<body>
<div class="wrapper">

  <div class="maincontent">
    
    	<div class="tab_container">
     	</div><!--End Tab Container -->
    
	 </div><!--End Main Content-->
    
    <div class="sidebar">
    </div><!--End Sidebar-->

</div><!--End Wrapper -->


</body>

Mientras creamos la versión html de nuestra aplicación de Facebook me gustaría poner todo en un envoltorio de 760px de ancho. Esto es sólo para asegurar de que me estoy quedando dentro de 760px; el ancho de contenedor que Facebook permite para que su aplicación se posicione Removeré este envoltorio y el CSS correspondiente antes de ponerlo en Facebook.

Una vez que hayamos configurado nuestros 'includes' y 'wrapper', es el momento de pasar a los bloques de construcción principales de nuestra aplicación. En este ejemplo es relativamente simple ya que sólo tenemos los div de 'maincontent' y 'sidebar'. A esto aplicaremos clases del mismo nombre. Usted podría, si quisiera, usar 'id's' en lugar de 'classes', ya que estas instancias div no se repetirán. Sin embargo, algo por lo que siempre he optado (aunque estoy seguro de que algunos estarían en desacuerdo) es utilizar clases en la mayoría de los elementos. Rara vez uso id's. Me parece que al hacer esto simplemente lo mantiene sencillo para mí. Nunca tengo que preguntarme si le he dado a algo un "id" o una "clase". Esto puede llegar a ser especialmente útil especialmente cuando usted empieza a incorporar jQuery dentro de sus aplicaciones. Aunque considere si es factible antes de empezar a codificar que definitivamente no necesitará usar id's en ninguna parte.

También es aconsejable terminar siempre los bloques de marcado con un comentario de cierre que indique qué parte del marcado ha terminado. De esta manera usted sabe donde termina cada sección. Debo admitir que empecé bastante tarde con la adopción de esta técnica y en retrospectiva me podría haber ahorrado muchas horas de tener que tambalearme a través de gran cantidad de código tratando de averiguar dónde comenzaban y terminaban ciertos bloques.

Paso 4: Contenido Principal


	<div class="maincontent">
    
    	<div class="logo"><img src="images/logo.png" width="379" height="60" alt="webdesigntuts+ logo"></div>
        
        <ul class="tabs">
            <li><a href="#tab1">All</a></li>
            <li><a href="#tab2">About</a></li>
            <li><a href="#tab3">Write For Us</a></li>
            <li><a href="#tab4">Other Blogs</a></li>
		</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
    
          <div class="post">
        </div><!--End Blog Post-->
        
        <div class="post">
        </div><!--End Blog Post-->
        
    </div><!--End Tab 1-->
   
    <div id="tab2" class="tab_content">
   </div><!--End Tab 2 -->
    
    <div id="tab3" class="tab_content">
	</div><!--End Tab 3 -->
    
     <div id="tab4" class="tab_content">
	</div><!--End Tab 4 -->

</div><!--End Tab Container -->
    
  </div><!--End Main Content-->
    
    <div class="sidebar">
    </div><!--End Sidebar-->
</div><!--End Wrapper -->

Para esta aplicación no pensé que fuera necesario utilizar un encabezado sólo para albergar el logotipo por lo que he puesto esto en la parte superior del div 'maincontent' en su div propio con una clase llamada 'logo'. Esto es seguido por una lista no ordenada para las pestañas. He dado a las pestañas un nombre de clase de; sí usted lo ha adivinado 'tabs'. Estas actuarán como nuestra barra de menú de pestañas que mostrará las diferentes páginas de nuestra aplicación de blog.

Las páginas de nuestra aplicación de blog están envueltas dentro de un contenedor div, al que le he dado una clase de 'tab_container'. Dentro de este entonces tengo cuatro divs (uno por cada ficha/página). He dado a todos los cuatro de estas una clase llamada 'tab_content', cada uno de estos tiene además su propia clase para su posicionamineto dentro de la página. La primera pestaña tiene una clase extra de 'tab1', la segunda 'tab2', la tercera 'tab3', etc. Estos nombres individuales de clase se utilizarán para ayudarnos a identificar cada pestaña en la siguiente parte del tutorial cuando implementemos jQuery .

Paso 5: Entradas de Blog Individuales


<div class="tab_container">
    <div id="tab1" class="tab_content">
    

    
         <div class="post">
                <h3><a href="#">Designing For, and As, a Color-Blind Person</a></h3>
                <span class="postInfo">by <a href="#">Connor Turnbull</a> on Jul 22nd 2011 with 2 comments</span>
                <p>Color blindness is a mild disability through which the affected experience a decreased ability to distinguish colors from others. This can be a real drawback for anyone in the design field since color theory is an integral feature in successful design, and a lot of decisions are based on the feeling and emotion derived from...</p>
                <a class="more" href="#">Read More</a>
                <span class="line"></span>
                <a href="#">12 Likes 14 Comments Share</a>
                <span class="line"></span>
        </div><!--End Blog Post-->
        
    </div><!--End Tab 1-->

La publicación individual de blog tiene una clase titulada "post" y se encuentra en la div con la clase 'tab1', ya que esta pestaña estará en la página de aterrizaje predeterminada. Esta entonces contiene varias etiquetas ancla y span que permitirán que podamos dar estilo a los elementos tales como la fecha y autor del blog en el azul nativo a la facebook. Una vez que se ha completado este div 'post', simplemente podemos copiarlo y pegarlo para el resto de las publicaciones. No salte por la borda y atasque su código, manténgalo en alrededor de tres o cuatro, ya que esto nos dará una idea de cómo se verá y se sentirá. También he creado un span con la clase 'line' que es simplemente una línea horizontal que usaremos en toda la aplicación.

Paso 6: Otras Pestañas de la Página

Nuestras Pestañas Página adicionales se componen principalmente de etiquetas del h3, de ancla y de párrafo:


    <div id="tab2" class="tab_content">
    
    <h3>About</h3>
    <p>Webdesigntuts+ is a blog made to house and showcase some of the best web design tutorials and articles around. We publish tutorials that not only produce great results and interfaces, but explain the techniques behind them in a friendly, approachable manner.</p>
    <p>Web design is a booming industry with a lot of competition. We hope that reading Webdesigntuts+ will help our readers learn a few tricks, techniques and tips that they might not have seen before and help them maximize their creative potential!</p>
    <p><strong>Webdesigntuts+ is part of the Tuts+ Network</strong></p>
	
    </div><!--End Tab 2 -->

Paso 7: El Filtro de Búsqueda

webdesigntuts Facebook app filter search

1
2	<form action="" method="get">
3	<input name="search" class="search" placeholder="Filter webdesigntuts+ posts">
4	</form>

En la parte superior de la barra lateral tenemos nuestro filtro de búsqueda del sitio - este está compuesto de un formulario simple. Lo haremos operativo en la siguiente parte del tutorial utiliando jQuery. Al formulario le sigueotra línea horizontal y un span y un texto de párrafo para mostrar la cuenta de nuestros 'me gusta'.

Paso 8: Botón de Facebook Me Gusta

1
2	<a class="button left" href="http://webdesign.tutsplus.com/" target="_blank"><span class="buttonimage left"></span>Website</a>
3	<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=253432341349745&xfbml=1"></script><fb:like href="http://apps.facebook.com/fbtuttts"layout="button_count" width="75" show_faces="true" action="like" font="lucida grande"></fb:like>
4	<a class="button right" href="#"><span class="buttonimage left"></span>Logout</a>

Afortunadamente para nosotros, Facebook ha hecho que sea super simple incorporar un botón 'me gusta' en nuestra aplicación. Usted puede generar el código para su propio botón 'me gusta' o cualquiera de sus otros complementos sociales en Facebook Developer Plugins. Una vez que usted haya generado el código, póngalo en su html. Es posible que desee agregar algún CSS para posicionarlo, sin embargo en este caso no es necesario

Paso 9: Encabezados de Pestañas

1
2	<div class="tabHeader">Categories</div>
3
4	<ul>
5	<li><a href="#">Sample Cat 1</a></li>
6	<li><a href="#">Sample Cat 2</a></li>
7	<li><a href="#">Sample Cat 3</a></li>
8	<li><a href="#">Sample Cat 4</a></li>
9	<li><a href="#">Sample cat 5</a></li>
10	</ul>
11
12	<div class="tabHeader">A Little Bit About Us</div>

Si usted ya ha leído la primera parte de este tutorial (si ha llegado tan lejos, supongo que si), entonces me habrá oído hablar de reutilización. Estos encabezados de pestaña definen esto más que cualquier otra parte de nuestro código. Como con Facebook, somos capaces de reutilizar estos encabezados de pestaña e implementarlos con gran facilidad. Son muy útiles si usted desea agregar una sección adicional rápida para el sitio.

Paso 10: El CSS

1
2	Code Block showing tabs headers

Ahora es el momento de pasar a darle estilo a nuestro HTML. Debido al estilo simple de Facebook no hay demasiado CSS. Lo he dividido en partes para que usted pueda echar un vistazo. También es importante señalar en esta etapa que Facebook puede ser molesto cuando se trata de probar y ajustar su CSS, ya que lo almacena en caché, lo que significa que cuando se carga una nueva versión de su hoja de estilo todavía se renderiza a la antigua. Aunque no es perfecto; la solución que utilicé fue añadir '? version=1' al final de la hoja de estilo incluida en el archivo index. Cada vez que usted haga una actualización al código CSS y lo cargue también tiene que actualizar el número de versión en el archivo index.

Paso 11: Configuración

Empezamos con el CSS creando el envoltorio y un par de clases que siempre agrego para poder flotar los elementos a la izquierda o a la derecha.

1
2	/-----------------------------------------------------------------------------------/
3	/* Setup
4	/-----------------------------------------------------------------------------------/
5	.wrapper{
6	width: 760px;
7	height:200px;
8	margin-left:auto;
9	margin-right:auto;
10	padding-top:20px;
11
12
13	}
14	.right{
15	float:right; /* A class I always add to float items right */
16	}
17	.left{
18	float:left; /* To float items left*/
19	}

Paso 12: Bloques de Construcción

Los bloques de construcción de nuestro contenido principal son los siguientes:

1
2	/-----------------------------------------------------------------------------------/
3	/* Setup
4	/-----------------------------------------------------------------------------------/
5	.wrapper{
6	width: 760px;
7	height:200px;
8	margin-left:auto;
9	margin-right:auto;
10	padding-top:20px;
11
12
13	}
14	.right{
15	float:right; /* A class I always add to float items right */
16	}
17	.left{
18	float:left; /* To float items left*/
19	}
20
21	/-----------------------------------------------------------------------------------/
22	/* Building Blocks
23	/-----------------------------------------------------------------------------------/
24
25	/-----------------------------------------------------------------------------------/
26	/* Typography
27	/-----------------------------------------------------------------------------------/
28
29
30	/-----------------------------------------------------------------------------------/
31	/* Tabs
32	/-----------------------------------------------------------------------------------/
33
34	/-----------------------------------------------------------------------------------/
35	/* Buttons
36	/-----------------------------------------------------------------------------------/
37
38	/-----------------------------------------------------------------------------------/
39	/* Extra Components
40	/-----------------------------------------------------------------------------------/

Paso 13: Tipografía

Probablemente una de las partes CSS más importantes de nuestra aplicación de Facebook. Haga esto mal y se echará a perder el efecto nativo de su aplicación. Eche un vistazo a Facebook y elija los tamaños de fuente más apropiados para sus necesidades.


/*-----------------------------------------------------------------------------------*/
/*	Typography
/*-----------------------------------------------------------------------------------*/

a{
cursor: pointer;
color: #3B5998;
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
strong{
font-weight:bold;
}
em{
font-style:italic;
}
h3{
font-size: 16px;
font-weight:bold;
line-height: 1.1em;	
margin-bottom:5px;
}
.postInfo{
display:block; /* Spans are inline element so needs to be changed to block in order for the margin to work */
color:#808080;
margin-top:5px;
margin-bottom:10px;
}
p{
font-size: 12px;
line-height: 1.5em;
margin-bottom:18px;
}
.line{
display:block;
width:100%;
height:1px;
background-color:#ccc;
margin-top:5px;
margin-bottom:5px;
}
.more{
color:#3B5998;
font-weight:bold;

}
.likesCount{
font-size:16px;	
font-weight:bold;
}

Paso 14: Pestañas


/*-----------------------------------------------------------------------------------*/
/*	Tabs
/*-----------------------------------------------------------------------------------*/
ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 19px; /*--Set height of tabs--*/
	border-bottom: 1px solid #E2E2E2;
	border-left: 1px solid #E2E2E2;
	width: 100%;
	margin-bottom:20px;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 18px; /*--Minus 1px from the height of  ul--*/
	line-height: 18px; /*--aligns text within the tab--*/
	border: 1px solid #E2E2E2;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #f2f2f2;
	margin-right:5px;
	min-width:73px;
	text-align:center;
	
}
ul.tabs li:first-child{ /*--Removes the left border from the first child of the list--*/
border-left:none;	
	
}
ul.tabs li a {
	text-decoration: none;
	color: #333333;
	display: block;
	font-size: 11px;

	padding-right:5px;
	padding-left:5px;

	outline: none;
}
ul.tabs li a:hover {
	background: #fff;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; 
	color:#3B5998;
}
ul.tabs li.active a{
	color:#3B5998;	
}

Paso 15: Botones

Otra parte integral de CSS para aplicaciones de Facebook son los botones. Estoy seguro de que querrá utilizar algunos de estos alrededor de sus aplicaciones. Hemos creado estos no usando un botón, sino una etiqueta ancla con una clase span dentro de ella para la imagen.

1
2	/-----------------------------------------------------------------------------------/
3	/* Buttons
4	/-----------------------------------------------------------------------------------/
5	.button{
6	background-color:#ECEEF5;
7	border:1px solid #CAD4E7;
8	text-decoration:none;
9	-webkit-border-radius: 3px;
10	-moz-border-radius: 3px;
11	border-radius: 3px;
12	padding: 2px 3px 2px 2px;
13	margin-right:5px;
14	}
15	.button:hover{
16	border:1px solid #9DACCE;
17	text-decoration:none;
18
19	}
20	.buttonimage{
21	background:url(../images/icon.png);
22	color: #3B5998;
23	display: block;
24	width:12px;
25	height:12px;
26	margin-right:3px;
27	margin-top:1px;
28	margin-bottom:1px;
29	margin-left:2px;
30
31	}

Paso 16: Componentes adicionales

1
2	/-----------------------------------------------------------------------------------/
3	/* Extra Components
4	/-----------------------------------------------------------------------------------/
5	.logo{
6	width:379px;
7	height:60px;
8	margin-left:auto;
9	margin-right:auto;
10	margin-bottom:26px;
11	position: relative;
12	-moz-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
13	-webkit-box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
14	box-shadow: 0 14px 10px -12px rgba(0,0,0,0.7);
15	}
16	.search{
17	padding: 1px 5px 2px 0;
18	margin-bottom:20px;
19	width:240px;
20	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
21	-moz-box-sizing: border-box; /* Firefox, other Gecko */
22	box-sizing: border-box; /* Opera/IE 8+ */
23	}
24	.tabHeader{
25	background-color: #F2F2F2;
26	border-top: solid 1px #E2E2E2;
27	padding: 4px 5px 5px;
28	margin-top:15px;
29	margin-bottom:10px;
30	}
31	.profileimage{
32	float:left;
33	margin-right: 5px;
34	}

Conclusión...

Así que ahí la tenemos, ahora tenemos nuestra aplicación de Facebook codificada en HTML/CSS. Espero que haya disfrutado leyendo esta parte del tutorial y que ahora tenga una gran comprensión de cómo los estilos de Facebook pueden traducirse en CSS. Al mirar y utilizar algunas de las propiedades CSS de Facebook realmente somos capaces de entender cómo sólo unas pocas líneas de código en los lugares correctos pueden dar a nuestra aplicación la apariencia y la sensación nativa, que se acoplará cómodamente dentro de Facebook y se adherirá a los principios de diseño de Facebook .

En la siguiente parte del tutorial aprenderemos cómo implementar esto en Facebook para ser una aplicación de blog nativo. Lo haremos utilizando YQL y Graph API de Facebook. También le mostraré algunas sugerencias y consejos para condimentar su aplicación con un poco de dulce bondad de jQuery. ¡Hasta la siguiente parte, feliz codificación amigos!

Enlaces y Recursos Adicionales

Diseñe y Codifique una Aplicación Facebook Integrada: - Teoría

CSS Reset de Eric Meyer

Plugins sociales de Facebook

Nuestra Aplicación Webdesigntuts+ en Facebook