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

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

by
Length:LongLanguages:
This post is part of a series called Design and Code an Integrated Facebook App.
Design and Code an Integrated Facebook App: Theory
Design and Code an Integrated Facebook App: PHP + jQuery

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

Facebook app folder structure

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

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

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

Facebook app main content

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

webdesigntuts Facebook app blog posts

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

webdesigntuts Facebook app tabbed pages

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


Paso 7: El Filtro de Búsqueda

webdesigntuts Facebook app filter search

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

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

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

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.


Paso 12: Bloques de Construcción

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


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.


Paso 14: Pestañas


Paso 15: Botones

webdesigntuts Facebook app buttons

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.


Paso 16: Componentes adicionales


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