La mejor forma y la más sencilla para poner twitter en nuestro blog es usar uno de los muchos plugins que existen para este cometido. De entre todos yo me he inclinado por este, dado que es fácil de usar y se adapta a lo que necesito.
Una vez instalado basta con arrastrarlo a la sección de widgets si el tema de tu blog dispone de ella, o mediante php con la siguiente función:

1

<?php twitter_messages("nombreUsuario"); ?>

La segunda opción más usada, aunque un poco más liosa es hacerlo mediante javascript, en concreto con la librería tweet. Para un blog no es necesario
meterse en algo tan engorroso, pero si queremos añadirlo a una web propia es la mejor solución.

Por útimo existen otras formas de hacerlo, todas ellas válidas pero bastante más complejas, por ejemplo con php o asp. En esta entrada de Noupe podréis encontrar casi todas las alternativas.

Si decidís probar twitter o añadirlo a vuestro blog, aquí teneis una gran selección de iconos y personajes.

Una buena prática es la de enriquecer las páginas de error 404 de modo que cuando alguien se encuentre con ellas puedan resultarle últiles. Vamos a ver algunos puntos claves que deberían contener en el caso de que se trate de un blog:

• •En primer lugar, la página debería mantener en lo posible la estructura del blog, es decir no perder las barras laterales, cabeceras y footer, para que el usuario pueda seguir con su navegación habitual y no se encuentre en tierra de nadie con con una simple página estática carente de cooncordancia con el resto del blog.
• •En segundo lugar, una parte obligada es una caja de búsqueda, aun si tu blog ya la tiene en la parte superior, ponerla directamente dónde el usuario espera el contenido le incitará a usarla y conseguiremos que no se vaya.
• •En tercer lugar, para los navegantes más vagos o sedientos de contenidos, no sería mala idea añadir las entradas más recientes, los posts populares o incluso un archivo con los ya antiguos.
• •Por último, una de las cosas que también pueden ser útiles es un formulario de contacto, a través del cual puedan comentarte que buscaban cuando llegaron al error, a la gente le encanta participar y un poco de feedback nunca viene mal.

Resumiendo, las páginas “not found” pueden llegar a ser muy útiles a la hora de redirigir la atención de nuestros usuarios, así que debemos de llenarlas de contenido y mantener la navegación acostumbrada.
Os dejo un enlace a Smashing Magazine dónde recopilan algunas muy interesantes y bonitas.

Fuente: Blogussion/blog

• ProFolio 1.05 – Featuring Portfolio Navigation
• Separar por sílabas los textos de un blog en WordPress
• 120 CSS Galleries for Web Design Inspirations
• 15 INCREDIBLY DETAILED CONCEPT ART TUTORIALS
• The 1Kb CSS Grid, Part 1

Ahí os dejo unos enlaces que me parecieron interesantes.

MauricioCastillo.com

Esto se debe principalmente a su flexibilidad y sencillez. En el momento de diseñar para wordpress debemos tener en mente que nuestra única preocupación será el envoltorio,
es decir la apariencia, ya que todo el contenido lo generaremos luego de manera automática.

Wp es a simple vista, o más bien, de la manera que a nosotros nos interesa, un conjunto de
funciones php que intercalaremos en nuestro código html y que se convertirán en texto, imágenes y otros contenidos cuando publiquemos en el blog.
En pseudocódigo sería asi:

1
2
3
4
5

<div id="contenedor">
	<div id="entrada">
		<? funcionPhp() ?>
	</div>
</div>

Ahora que entramos en materia, intentemos coger la idea general de la estructura de wp.
Para ello podemos pensar en una página principal y varias secundarias. La principal estará dividida en varias secciones:

1. Header
2. Index
3. (¿)Barras laterales(?)
4. Footer

La barras laterales son opcionales aunque la mayoría de los sitios las usan; en realidad todos los elementos son opcionales pero esto ya lo veremos más adelante.

Así, tenemos una página vacía a simple vista, pero que se completará como si de un papel roto en varios
trozos se tratara. Cada sección es una página independiente que se llamará mediante una función de worpress.

El resto de páginas(contact, single, about, etc) siguen el mismo funcionamiento reutilizando las secciones
comunes como el header o el footer. La flexibilidad de worpress nos posibilita incluso a añadir nuestras propias páginas o secciones, por ejemplo, una segunda barra lateral o un apartado “adds” para la publicidad.

Una vez entendido el funcionamiento básico, podemos empezar con las pautas de diseño.
Para facilitarnos el trabajo a la hora de comenzar, y ahorrarnos crear los archivos php, funciones
y consolidar la jerarquía de documentos, existen los llamados “blank themes”, temas lisos,
prefabricados, para no empezar desde cero.
Particularmente uso el starkers, que va muy bien, está perfectamente estructurado e incluye distintas hojas de estilo para agrupar los hacks de los navegadores “conflictivos” (lease ie en todas sus variantes).

Por último, una de las cosas que debería hacerte inclinarte por wordpress a la hora de elegir cms, es la abundante comunidad de usuarios que hay por detrás y que está continuamente ayudando a corregir problemas, creando tutoriales y aportando plugins.

Los plugins son pequeños programas que proporcionan funciones exclusivas, como pueden ser la addición de
captchas a los formularios, la integración de twitter o el resaltado de entradas destacadas.

Hasta aquí esta breve introducción acerca de el funcionamiento de wordpress de cara al diseño de temas.
Próximamente crearé la continuación, en la cual ya tocaremos un poco de código.

Aunque el html puede contener tanto los datos como el estilo de las páginas, actualmente se suelen separar dejando el contenido y la estructura estrictamente al html y el aspecto o diseño al css, del cual hablaremos a continuación.

Los css o hojas de estilo en cascada, son el complemento perfecto para dar forma a los html. Debido a que todo el html se estructura por partes definidas según las distintas marcas, es muy sencillo dar un estilo y decir como debe comportarse cada parte usando el css.
Por ejemplo, supongamos una página web que se compone de cabecera, contenido y pie de página. En html la estructuraríamos asi:

1
2
3
4
5
6
7
8

<head>
</head>
 
<body>
	<div id="cabecera">Esto es la cabecera.</div>
	<div id="contenido">Esto es el contenido.</div>
	<div id="pie">Esto es el pie de página.</div>
</body>

Son marcas o etiquetas las palabras contenidas dentro de los símbolos mayor y menor <...>. Como habréis notado las que llevan solo una palabra son las de comienzo de sección y las que tienen una barra al principio
indican que se trata de una etiqueta de cierre de sección.

1

<ComienzoSeccion>...</CierreSeccion>

También os habréis dado cuenta de que hay dos etiquetas escritas en inglés, estas dos son invariables y todo documento html debe tenerlas; dentro del se situará la información de la página y dentro del el contenido que se mostrará, es decir, la página propiamente dicha.

Las secciones que nosotros hemos creado tienen esta estructura:

1

<div id="nombre"></div>.

No son más que divisiones(div) con un identificador(id) que será el atributo que usaremos en el css.

Una hoja de estilo para el html anterior tendría el siguiente aspecto:

1
2
3

#cabecera{top:0; width:100%; height:100px;}
#contenido{width:80%; height:500px;}
#pie{bottom:0; width:100%; height:200px;}

Como dijimos, los atributos que hemos usado eran: cabecera, contenido y pie, que nos los hemos inventado nosotros mismos, y para cambiar sus propiedades en css usaremos esta pauta:

1

#nombre{propiedad1; propiedad2; ...}

En css hay propiedades para hacer casi cualquier cosa, las que he cambiado en el ejemplo de antes afectan a la posición y el tamaño(ancho y alto) de cada sección.

Sin duda su simplicidad es abrumadora, pero los diseñadores web se encuentran a menudo con un problema grave. La última palabrar la tienen los navegadores, pues son ellos los que deciden como interpretar la información que les llega, y dado el extenso mercado, tuvieron que crearse estándares, para que el mismo código sirviera tanto en firefox como en internet explorer, etc. Sin embargo, no todos los navegadores cumplen los estándares, este es el caso de el ie6 y el ie7, que muestran las cosas de diferente manera a como deberían, pero de eso hablaremos otro día.

Aunque la dualidad html/css es sencilla y eficiente, es fácil darse cuenta de que supone un problema a la hora de generar los contenidos, y esto es porque son lenguajes estáticos, que solo pueden modificar sus contenidos de manera directa, es decir, a mano, por un programador, y han de ser actualizados en el servidor cada vez que se realice dicho cambio.

Debido a esta importante limitación, han ido surgiendo otros lenguajes que los complementan y modifican para crear contenidos dinámicos y en tiempo real. Algunos de los más importantes son el .php, el Ruby , el Perl, el Scheme, etc.

Además, dada la necesidad de guardar los increíblemente extensos contenidos de algunas webs de forma organizada, también se han creado las conocidas bases de datos, por poner un ejemplo que está muy de moda, las bases MySql.

Dentro de poco veremos más a fondo casos puntuales de problemas con css en ie6/ie7 y cómo solucionarlos, y profundizaremos en el uso del css con diversos “trucos” y “hacks”.