Usualmente posteo sobre diseño, desarrollo web y afines pero este tema de los art toys me parece interesante, así que publico algunas fotos de la exposición realizada por el grupo Niño Bicéfalo de la ciudad de Arequipa – Perú, como verán hay de todo estilo, algunos tiernitos y otros bastante sangrientos 

Lo ideal es que nuestras redes sociales funcionen junto a nuestra página web y no todo por su cuenta, una buena opción de integración es usar RSS y luego con un parser PHP ya podemos mostrar el muro de nuestra FacebookFan Page en el orden que veamos por conveniente o incluso permitir que la gente vea nuestra fanpage desde cualquier lector RSS.

Hacer esto es algo muy sencillo por ejemplo:

http://www.facebook.com/feeds/page.php?id=313742104162&format=rss20

El número en rojo debemos cambiarlo por el id de nuestra fanpage y listo

No es complicado hacer una plantilla para WordPress, es mucho más facil que Joomla y muy pero muy flexible, primero debemos descargar una plantilla sin estilos en blanco y modificar el nombre

¿Dónde consigo una plantilla en blanco?

Hay muchas pero yo les recomiendo ESTA

¿Cómo defino nombre y autor?

Buscamos style.css y al inicio aparecen los detalles del nombre, autor, pagina web, etc

¿Y ahora qué?

Ahora debemos saber para que sirve cada archivo de una plantilla básica:

• comments.php Aqui va el formulario de comentarios y se muestra la lista de comentarios por cada post
• footer.php Aqui va el pie de página, la informacion de copyright, etc
• functions.php Si queremos agregar menus, espacios para widgets, paginadores, etc este es el archivo clave
• header.php Aqui va todo el encabezado
• index.php Aqui va la primera página (luego les explico como definir la página de inicio)
• page.php Aqui definimos como se verán las páginas (OJO podemos crear plantillas de pagina personalizadas por ejemplo una para el home)
• sidebar.php Aqui se definde el menu de la derecha o izquierda, se define un area para widgets
• single.php Esta es la estructura de un post

Esas son las más básicas pero suelen haber otras más como:

• archive.php Se define la lista de posts antiguos
• archives.php Suele ser un template de pagina para asignarlo a una y usarla como archivo /obviamente va ligado al anterior)

¿Por dónde empezamos a maquetar?

Preocupemonos por maquetar solo 3 cosas el encabezado, el contenedor y el footer (pie de página), no maquetemos aún ningún contenido. Para maquetarlo debemos usar sólo los archivos header.php, footer.php y no nos metemos con single.php, page.php ni ningun otro ya que el inicio y cierre de los div contenedores debe estar en header y footer.

Una vez maquetado veremos que WordPress por defecto nos muestra una lista de post recientes y eso para un sitio web no sirve de mucho debemos crear una plantilla de página que sirva como homepage o página de inicio, para ello duplicamos page.php y le ponemos el nombre de homepage.php (o el nombre que se nos ocurra) y luego al inicio escribimos

Podemos fijar el nombre de template que se nos ocurra siempre que no este repetido, luego en WordPress buscamos page/new page o editamos una página ya creada y le asignamos la plantilla que hemos creado

Para que sea el homepage vamos a settings/reading y fijamos como primera página la que hemos creado

Luego podemos ir defieniendo los menus pero eso lo dejo para una segunda parte

La idea de este post es dar algunas directivas que debemos seguir para maquetar y luego este código sea entendido por la persona que luego tenga que editarlo o incluso por nosotros mismos que luego de unos años vemos el código y no le encontramos ni pies ni cabeza. No olvidemos que si trabajamos como freelancers es importantísimo que nuestro cliente pueda comprender el código para eso hay que cumplir algunos estándares básicos.

Utiliza nombres estandard

Si eres freelancer es posible que trabajes para empresas de otros países e incluso de algunos de habla inglesa por lo que se requiere que todos puedan saber de que sección estás hablando, aunque no existen nombres únicos standard si hay unos muy comunes

• Wrapper: Es el contenedor principal de la página que define el ancho y centra la página
• Header: El encabezado donde suele ir el logo y el menu superior
• Menu: Aunque algunos suelen usar para este el ID navbar
• Main: El div que contiene el cuerpo de la página y que se suele dividir en 2 o 3 columnas
• Sidebar: La columna del costado, en WordPress la que sueele contener los widgets
• ColumnLeft, ColumnRight, ColumnCenter: dependiendo de cuantas columnas tengas puedes suar esos nombres o column1, column2…
• Footer: El pie de página donde suele ir el copyright y la información de contacto

Dividir la hoja de estilos

No es buena idea tener una sola hoja de estilos con 4000 lineas de código, es mejor separarla de acuerdo a las dimensiones del proyecto. Lo más básico sería contar con 2 hojas de estilo:

• reset.css  con las opciones de reseteo muy utiles para compatibilidad con múltiples buscadores, pueden bajar la más popular AQUI
• style.css con las propiedades de todo el sitio

Para un proyecto más grande sin embargo sería bueno contar con otra hojas de estilo como:

• forms.css con las propiedades del formulario
• fonts.css con las definciones de las fuentes
• colorbox.css, sexybox.css, etc hojas de estilo de cada javascript

Organizar la hoja de estilos

Es importante separar las secciones y comentarlas, lo usual es empezar con las etiquetas generales html, body, luego los titulos h1, h2, h3, las clases de los colores .rojo, .azul, etc y luego cada sección del sitio header, menu, sidebar, footer, etc. Quedando algo así nuestro código CSS

Maqueta y ordena los elementos por su ubicación

Esto es más fácil explicar con un ejemplo supongamos que estamos maquetando una lista de productos, tendriamos un div contenedor con un ID y varios divs internos identificados por una clase, quedando algo así:

Dentro de la hoja de estilos también se debe organizar así quedando algo como:

Indica que div estás cerrando

Esto es importantísimo cuando se trabaja con web modulares donde al estar separadas por partes es un poco complicado saber donde acaba cada DIV, por lo que es mejor indicar donde se cierran los principales DIV

Alguna vez escuché que Facebook va a hacer desaparecer las páginas web y otros apocalípticos comentarios. Yo no menosprecio la importancia de las redes y sobre todo de las Facebook fan pages sin embargo ya que dependen de un portal este puede hacer lo que quiera con las fanpages, primero las redujo, luego cambió el diseño y ahora va a desaparecer Static FBML.

Ya no es posible agregarlo a nuevas fanpages, eso en teoría porque desapareció el botón “Add to my page” sin embargo hay algunos hacks para saltarse eso. Personalmente recomiendo usar una nueva aplicación y no andar intentando hacks ya que FBML esta condenado a desaparecer, han surgido varias aplicaciones para reemplazar el viejo FBML por iframes, uno que me parece bastante bueno es Tab Press, elijes la opción “Ir a la aplicación” y luego “Agregar a mi página”.

Ventajas

• Tab Press no te pide acceso a tus datos personales, amigos, fotos, en fin a toda tu vida personal como hacen otras aplicaciones similares
• Permite usar CSS, HTML, javascript
• Fácil de utilizar e instalar

Desventajas

• No soporta más de un solo tab
• No hay soporte FBML y si insertaste youtube o flash vas a tener que migrarlo a HTML