El tema se compone de dos partes, del diseño y del contenido que genera wordpress, por lo tanto el contenido y el diseño son distintos.

Para que trabajen juntos es necesario colocar el código de wordpress, en sitios específicos dentro del diseño. Por esta razón un tema esta dividido en diferentes archivos.

Si vemos dentro del tema default ó classic veremos que hay varios archivos, estos archivos son necesarios para que un tema funciones correctamente, aunque se puede crear un tema con solo index.php y style.css, pero no es conveniente, el tema seria demasiado inestable y si quisieras instalar algún plugin no seria compatible.

Los archivos principales que componen el tema son.

index.php
footer.php
header.php
sidebar.php
single.php
comments.php
archive.php
search.php
404.php
page.php
functions.php
style.css
screenshot.jpg (es la imagen previa del tema)
/images (la carpeta que contiene todas las imágenes del diseño del tema)

cuando abrimos la pagina principal de nuestro blog en wordpress, por ejemplo http://localhost/wordpress/ (cuando lo tenemos instalado localmente).

Pensaríamos que solo el archivo index.php es el que se muestra.

Pero en realidad lo que se muestra son los archivos index.php, header.php, sidebar.php y footer.php.

index.php es el archivo que contiene o carga a header.php, sidebar.php y footer.php.
En donde header.php seria el archivo que contiene todo el documento de la cabecera, sidebar.php contiene los elementos de la barra lateral y footer.php contiene el pie de pagina e index.php aparte de incluir o carga a estos archivos, también tiene código php para poder mostrar el contenido de wordpress.

Podríamos decir que index.php es el cuerpo y los archivos header.php, sidebar.php y footer.php son los miembros del cuerpo y asi como index.php existen otros archivos que cargan las partes del cuerpo como es el caso de single.php, 404.php, search.php, page.php, archive.php. Dependiendo el caso.

Por ejemplo cuando se accede al blog lo primero que muestra es la pagina principal, y la pagina principal es index.php que carga a los demás archivos que forman las parte del cuerpo, como lo vimos en la imagen.
Cuando se accede a un post o entrada, el archivo que se muestra es single.php que carga a los demás archivos incluyendo a comments.php. Cuando se accede auna pagina se carga el archivo page.php que carga a los demás archivos, lo mismo pasa con los 404.php, archive.php, search.php según en su caso y que veremos a su tiempo.
El archivo functions.php es el archivo que contiene las funciones que podemos usar dentro de nuestro tema, también en este archivo se declara el o los sidebar que usara el tema.

Espesando a crear nuestro tema.

Instalando el tema

1.- Nosotros debemos de crear una carpeta y llamarla con el nombre de nuestro tema simplech (en mi caso) y deben estar los archivos index.html (que después lo vamos a cambiar por index.php), el archivo de style.css y la carpeta de images/ (con todas las imágenes que utiliza el tema), Los archivos index.html y style.css son archivos básicos para el tema y de estos dos archivos crearemos los archivos restantes. Ahora solo copiamos nuestra carpeta y la pegamos dentro del directorio que contiene los temas, /wp_content/themes/simplech seria el directorio de nuestro tema en wordpress.

2.- Renombramos a index.html por index.php.

3.- Editamos el archivo style.css y al principio del documento le añadimos.

/*Theme Name: Simplech
   Theme URI: http://dach-dz.tuxpixel.net/
   Description: Este tema esta creado como una guía educativa paso a paso para enseñar
	a crear su propio tema.
   Version: 1.0
   Author: David Chay
   Author URI: http://dach-dz.tuxpixel.net
   El CSS, XHML y diseño es realizado bajo la licencia Creative Commons

http://creativecommons.org/licenses/by/2.5/mx/

*/

4.- Ahora dentro del área de administración de wordpress, vamos a la pestaña de apariencia/temas y activamos nuestro tema que creamos.

Incluyendo el contenido de WordPress.

Si vemos ahora la pagina principal de nuestro blog veremos que muestra un documento sin diseño y con contenido de html que le añadimos pero no muestra nada del contenido del WordPress.

Vamos a editar el archivo index.php para añadirle todo el contenido de WordPress y el diseño del tema.

Abrimos el archivo y lo primero que vamos a editar es la informacion del documento que se encuentra en la etiqueta <head>.

<head>
	<title>SimpleCH</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="style.css"  type="text/css" />
	<link rel="shortcut icon" href="images/favicon.ico" />
</head>

Dentro de la etiqueta encontramos el titulo de la pagina, el metadato, la codificacion de caracteres, el enlace de nuestro de CSS y el favicon de nuestra pagina.

Ahora lo vamos a editar poniendo toda esta misma información pero desde WordPress por medio de la funcion bloginfo().

bloginfo

Es la función por la cual mandamos a llamar toda la información de nuestro blog, como es la url del sitio en que esta alojado, el titulo y su descripción así como también la definición del documento y de mas datos, mandándolos a llamar por medio de parámetros.

Si quieres conocer mas acerca de esta función y sus parámetros puedes acceder a http://codex.wordpress.org/Template_Tags/bloginfo.

Editando el titulo de la pagina.

La primer etiqueta que vemos es <title></title> dentro de esta etiqueta pusimos simplech pero esto debe cambiar cuando el lector visite o navegue por el blog, aqui pondremos el nombre del blog seguido por el titulo.

<title>?php bloginfo('name');?> <?php wp_title();?></title>

La función bloginfo manda a llamar el nombre que le pusimos a nuestro blog desde /opciones/general dentro de wordpress y wp_title mostrara el nombre de la pagina que se esta visualizando en ese momento, si es un post o un archivo o lo que se este viendo.

Información de la pagina.

Ahora modificamos la meta información de nuestra pagina, con la función bloginfo mandamos a llamar la codificación de caracteres de la pagina, el metadato y añadimos el generador de contenidos con la versión de wordpress.

<meta http-equiv="content-type" content="<?php bloginfo('html_type');?>;charset=<?php bloginfo('charset');?>" />
<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />

Stylesheets y RSS

Aquí añadimos la dirección de nuestra hoja de estilo, la cual nos la proporciona la misma función con el parámetro ‘stylesheets_url’.

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>"  type="text/css" media="screen"/>

A continuación añadimos el RSS, de la misma forma pero ahora con el parámetro ‘rss2_url’.

<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />

Trackbacks

Pingbacks (o vínculos de referencia o LinkBacks como a veces se le llama)
son importantes en la creación de conexiones entre blogs. Pingbacks permite que el autor sepa cuándo otro sitio ha mencionado la URL de cualquier página de su blog.

<link rel="pingback" href="<?php bloginfo('pingback_url');?>" />

Añadiendo la imagen de Favicon.

Para añadir la url donde se encuentra el favicon de nuestro blog debemos de conocer en donde esta alojado el templante del tema, la direccion fisica seria /wp_content/themes/simplech/images/faviicon.ico pero no es comodo usar toda esta dirección así que le volvemos a pedir a la función bloginfo cual es la url del templante con el parámetro ‘template_
directory’.

<link rel="shortcut icon" href="<?php bloginfo('template_directory');?>/images/favicon.ico" />

Dejando espacio para Plugins.

La pieza final de código que vamos a añadir es una parte vital de cualquier tema para WordPress.

<?php wp_head(); ?>

Cuando el tema se procesa. WordPress sustituye esta etiqueta con un código adicional necesario para ejecutar algunos plugins que el usuario instale. Así que si usted instala un plugin que, por ejemplo, necesite ejecutar algunos códigos de Javascript. Al abrir el sitio en un navegador y al comprobar el código fuente y consultamos la etiqueta, veremos que a sido sustituido por un conjunto de secuencias de comandos. Igualmente, algunos plugins necesite agregar código CSS, HTML extra, meta tags o fragmentos de otros códigos. Sin wp_head su tema simplemente no sera compatible con muchos plugins de WordPress.

El código final de <head>.

El código para la etiqueta <head> nos quedaría de la siguiente forma.

<head>
	<title><?php bloginfo('name');?> <?php wp_title();?></title>
	<meta http-equiv="content-type" content="<?php bloginfo('html_type');?>;charset=<?php bloginfo('charset');?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>"  type="text/css" media="screen"/>
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url');?>" />
	<?php wp_head(); ?>
	<link rel="shortcut icon" href="<?php bloginfo('template_directory');?>/images/favicon.ico" />
</head>

Formulario de búsqueda.

El próximo código html que vamos a sustituir es el formulario que se encuentra dentro de la etiqueta <div id=”form-header-search”>

<div id="form-header-search">
	<form action=" " method="post">
		<div>
			<input class="inptxt" type="text" name="s" value="" /><input class="btn" type="submit" value="Buscar" />
		</div>
	</form>
</div>

Como el formulario de búsqueda lo usamos no solamente en la cabecera del diseño sino que también lo podemos agregar en el archivo 404.php o en la barra lateral sidebar.php, entonces nos combine hacer un archivo en donde este el código del formulario de búsqueda así lo podremos agregar en cualquier parte de nuestro tema. Este archivo sera searchform.php
.

creamos el archivo searchform.php y en el archivo ponemos el siguiente código.

<form id="searchform" action="<?php bloginfo('home');?>/" method="get">
	<div>
		<input class="inptxt" type="text" name="s" id="s" value="<?php echo wp_specialchars($s, 1); ?>" /><input class="btn" type="submit" id="search_submit" value="Buscar"  />
	</div>
</form>

En la etiqueta <form> hemos definido dos cosas importantes. La primera es que la forma se publicará sus resultados mediante el método GET. El segundo es que en el atributo action mandamos la consulta a la URL principal del blog. También en el campo de entrada de texto agregamos el id con la letra ‘s’.

Por último en la etiqueta <input> en el atrubuto value tiene un valor de referencia a:

<?php echo wp_specialchars($s, 1); ?>

En PHP echo simplemente significa imprimir el texto siguiente. wp_specialchars esta declaración es una función para quitar algún carácter especial que dentro del campo es pasado.

Ahora simplemente incluimos el formulario a la etiqueta <div id=”form-header-search”&gt..

<div id="form-header-search">
	<?php include(TEMPLATEPATH.'/searchform.php'); ?>
</div>

Menú de navegación.

La próxima etiqueta a modificar es el menú <div id=”menu”> lo que esta dentro de esta etiqueta lo sustituimos por el siguiente código.

<ul>
	<li><a href="<?php bloginfo('url'); ?>" title="Inicio">Inicio</a></li>
	<?php wp_list_pages('title_li='); ?>
</ul>

la primer <li> es simplemente un enlace a nuestra pagina de inicio. Esta url nos la proporciona la función bloginfo() con el parámetro ‘url’.

La segunda le pedimos a WordPress que nos de una lista de las paginas que tenga el blog, esto lo hacemos con la función wp_list_pages y dentro de esta función pasamos un valor con el atributo ‘title_li=’ que le dice a wordpress que queremos el titulo de las paginas envuelto por la etiqueta <li></li>.

Si quieres ver las demás opciones o parámetros que que nos proporciona la funcion wp_list_pages() visita http://codex.wordpress.org/Template_Tags/wp_list_pages.

El Contenido de la pagina.

Lo siguiente es añadirle a nuestra plantilla el código de wordpress que nos proporciona el contenido de la pagina, a este código se le conoce comúnmente como “the loop” o el bucle en español.

El bucle es una parte esencial del tema de WordPress. Muestra el contenido en orden cronológico y permite definir las propiedades personalizadas con diferentes funciones de wordpress envueltos en etiquetas de código XHTML.

Hay diferentes formas de crear el bucle según el diseño que se le de. Si quieres ver algunos ejemplos puedes visitar http://codex.wordpress.org/The_Loop

Lo primero que aremos es eliminar el contenido html que esta en la etiqueta <div id=”contenido”> y lo sustituimos por.

<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
		<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
		<small>El <?php the_time('j'); echo ' de '; the_time(' M ');echo ' del ';the_time('Y');  ?>, en <?php the_category(', '); ?> categoria <?php the_tags(''); ?> por <?php the_author_posts_link(); ?></small>
		<?php the_content(); ?>
		<div class="separador"></div>
	<?php endwhile ?>
	<div id="navi">
		<div style="float:left;"><?php previous_posts_link(); ?></div>
		<div style="float:right;"><?php next_posts_link(); ?></div>
		<div style="clear:both;"></div>
	</div>
	<?php else : ?>
		<h2 class="center">No Encontrado</h2>
			<p class="center">Losiento, Pero lo que estas buscando ya no se encuentra aqui.</p>
			<?php include (TEMPLATEPATH . '/searchform.php'); ?>
<?php endif; ?>

Si sabes un poco de programación no se te ara muy difícil entenderle, la estructura de este código es simple.

Primero empieza con una condicion preguntando si hay post o entradas.

if(have_posts()) :

Si lo hay entonces empieza un ciclo que carga todas las entradas.

while(have_posts()) : the_post();

Dentro del while podemos ver la etiqueta <h2>. Dentro de la etiqueta <h2> esta el enlace a la entrada, la cual proporciona la funcion the_permalink() y para obtener el titulo usamos la funcion the_title().

<h2>
   <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
      <?php the_title(); ?>
   </a>
</h2>

Debajo del titulo esta la meta información del post, en la etiqueta <small>, se encuentra la fecha, categoría y las etiquetas así como su autor.

<small>
   El <?php the_time('j'); echo ' de '; the_time(' M ');echo ' del ';the_time('Y');  ?>, en <?php the_category(', '); ?> categoria <?php the_tags(''); ?> por <?php the_author_posts_link(); ?>
</small>

Por ultimo encontramos la función que carga el contenido del post.

<?php the_content(); ?>

Es se cierra el ciclo con.

<?php endwhile ?>

Ahora encontramos la navegación de las paginas.

<div id="navi">
		<div style="float:left;"><?php previous_posts_link(); ?></div>
		<div style="float:right;"><?php next_posts_link(); ?></div>
		<div style="clear:both;"></div>
	</div>

Después de la navegación encontramos la condición “else” que quiere decir “si no”, si no encuentra ni un post en esta pagina imprime una leyenda diciendo al usuario que no se encontró nada y se agrega el formulario de búsqueda.

<?php else : ?>
		<h2 class="center">No Encontrado</h2>
			<p class="center">Losiento, Pero lo que estas buscando ya no se encuentra aqui.</p>
			<?php include (TEMPLATEPATH . '/searchform.php'); ?>

Y por ultimo cerramos la condición “if”.

<?php endif; ?>

Creando la barra lateral (sidebar)

Ahora ya tenemos las entradas en nuestro blog solo nos resta hacer el contenido del sidebar o barra lateral.

La barra lateral puede contener una variedad de diferentes elementos y son una parte importante de nuestro blog.

La barra lateral la encontramos como <div id=”contenido_sidebar” class=”sidebar_bottom”>. Sustituimos todo lo que contenga por.

<ul>
	<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
		<li id="Ultimos_post" class="widget">
			<h2>Post Recientes</h2>
			<ul>
				<?php wp_get_archives('type=postbypost&limit=5'); ?>
			</ul>
		</li>
		<li id="Archivos" class="widget">
			<h2>Archivos</h2>
			<ul>
				<?php wp_get_archives('type=monthly&limit=5'); ?>
			</ul>
		</li>
		<li id="categorias" class="widget">
			<h2>Categorias</h2>
			<ul>
				<?php wp_list_categories('title_li=&orderby=name'); ?>
			</ul>
		</li>
	<?php endif; ?>
</ul>

Primero creamos una nueva lista no ordenada.

<ul>
</ul>

Una lista no ordenada es la mejor manera de organizar una barra lateral, simplemente hace cada parte de la barra lateral en un elemento de la lista.

Lo primero que encontramos es nuevamente una condición, esta condición comprueba si esta declarada el sidebar, si lo esta carga el contenido que el usuario agrega desde el panel de administración de wordpress en apariencia/widgets, sino carga el código que esta adentro de la condición.

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Dentro de la condición hay varios elementos de la lista, que a su vez contienen listas no ordenadas y dentro de estas listas están las diferentes funciones que cargan los widgets en nuestro caso podemos ver solamente tres.

<li id="Ultimos_post" class="widget">
			<h2>Post Recientes</h2>
			<ul>
				<?php wp_get_archives('type=postbypost&limit=5'); ?>
			</ul>
		</li>
		<li id="Archivos" class="widget">
			<h2>Archivos</h2>
			<ul>
				<?php wp_get_archives('type=monthly&limit=5'); ?>
			</ul>
		</li>
		<li id="categorias" class="widget">
			<h2>Categorias</h2>
			<ul>
				<?php wp_list_categories('title_li=&orderby=name'); ?>
			</ul>
		</li>

El primero es la función o widget wp_get_archives(), esta función carga una lista de los archivos que están en el blog y pasa como parámetro ‘type=postbypost&limit=5′, lo que se le pide a esta funcion es que la lista la muestre articulo por articulo o post por post y que sea una lista de los últimos 5 post.

El segundo es la misma función wp_get_archives(), pero pasa como parámetro ‘type=monthly&limit=5′, lo que se le pide ahora es que la lista sean los meses y que sea una lista de 5 elementos.

Si quieres saver mas de la funcion wp_get_archives consulta http://codex.wordpress.org/Template_Tags/wp_get_archives.

La ultima tenemos a la función o widget wp_list_categories(), esta otra función carga una lista de las categorías y le pasa como valor ‘title_li=&orderby=name’, aqui se le pide que pase el titulo en vuelto con la etiqueta <li> y que este ordenada alfabéticamente por nombre.

Si quieres saver mas de wp_list_categories consulta http://codex.wordpress.org/Template_Tags/wp_list_categories.

Haciendo el archivo functions.php

Para que el usuario pueda agregar sus propios widgets, debe de estar declarado el sidebar dentro de functions.php, este archivo se encarga de almacenar todas las funciones que se usen en el tema. Pero en nuestro caso solo declararemos el sidebar.

1.- Creamos el archivo functions.php dentro de la carpeta de nuestro tema.

2.- Añadimos el siguiente codigo.

<?php
     if ( function_exists('register_sidebar')){
	register_sidebar(array('name' => 'simplech'));
    }
?>

Listo ahora podemos agregar nuestros propios widgets desde aparencia/widgets en wordpress.

Pie de pagina

Por ultimo modificaremos el pie de pagina, que seria dentro de <div id=”footer” class=”margen”>, aquí por lo general se pone el nombre del tema y el diseñador.

<small>
  © 2010, Gestionado por WordPress, El tema es SimpleCH diseñado por <a href="http://dach-dz.tuxpixel.net/">DaCh</a>.
</small>

Y así es como quedaría el archivo index.php hasta este momento.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title><?php bloginfo('name');?> <?php wp_title();?></title>
	<meta http-equiv="content-type" content="<?php bloginfo('html_type');?>;charset=<?php bloginfo('charset');?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url');?>"  type="text/css" media="screen"/>
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url');?>" />
	<?php wp_head(); ?>
	<link rel="shortcut icon" href="<?php bloginfo('template_directory');?>/images/favicon.ico" />
</head>

<body>
	<div id="content-main" >
		<div id="header" class="margen">
			<div id="logo">
				<h1>SinpleCH</h1>
				<small>Diseño creado por David Chay</small>
			</div>
			<div id="form-header-search">
				<?php include(TEMPLATEPATH.'/searchform.php'); ?>
			</div>
		</div>
		<div id="menu" class="margen">
			<ul>
				<li><a href="<?php bloginfo('url'); ?>" title="Inicio">Inicio</a></li>
				<?php wp_list_pages('title_li='); ?>
			</ul>
		</div>
		<div id="content-body" class="margen">
				<div id="contenido">
					<?php if(have_posts()) : while(have_posts()) : the_post(); ?>
							<h2><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
							<small>El <?php the_time('j'); echo ' de '; the_time(' M ');echo ' del ';the_time('Y');  ?>, en <?php the_category(', '); ?> categoria <?php the_tags(''); ?> por <?php the_author_posts_link(); ?></small>
							<?php the_content(); ?>
							<div class="separador"></div>
						<?php endwhile ?>
							<div id="navi">
								<div style="float:left;"><?php previous_posts_link(); ?></div>
								<div style="float:right;"><?php next_posts_link(); ?></div>
								<div style="clear:both;"></div>
							</div>
						<?php else : ?>
							<h2 class="center">No Encontrado</h2>
							<p class="center">Losiento, Pero lo que estas buscando ya no se encuentra aqui.</p>
							<?php include (TEMPLATEPATH . '/searchform.php'); ?>
					<?php endif; ?>
				</div>
				<div id="sidebar">
					<div class="sidebar_top">
						<div id="contenido_sidebar" class="sidebar_bottom">
							<ul>
								<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
								<li id="Ultimos_post" class="widget">
									<h2>Post Recientes</h2>
									<ul>
										<?php wp_get_archives('type=postbypost&limit=5'); ?>
									</ul>
								</li>
								<li id="Archivos" class="widget">
									<h2>Archivos</h2>
									<ul>
										<?php wp_get_archives('type=monthly&limit=5'); ?>
									</ul>
								</li>
								<li id="categorias" class="widget">
									<h2>Categorias</h2>
									<ul>
										<?php wp_list_categories('title_li=&orderby=name'); ?>
									</ul>
								</li>

						<?php endif; ?>
							</ul>
						</div>
					</div>
				</div>
				<div style="clear:both;"></div>
			</div>
	</div>
	<div id="content-footer">
		<div id="footer" class="margen">
			<small>© 2010, Gestionado por WordPress, El tema es SimpleCH diseñado por <a href="http://dach-dz.tuxpixel.net/">DaCh</a>.</small>
		</div>
	</div>
</body>
</html>

Nota:
Tambien se le añade el siguiente codigo a style.css hasta lo ultimo del documento.

/**************Area de contenido**************/
#contenido h2 a{
	color:#000000;
}
#contenido .separador {
	border-top:1px solid #e3e3e3;
	margin-top:40px;
	padding-top:40px;
}
#contenido #navi{
	padding:30px;
}

En la próxima sesión dividiremos el archivo index.php, para crear los archivos header.php, sidebar.php y footer.php.

Visto en el blog de Miguel Chang

Este diseño es para un tema de WordPress en esta sesión veremos únicamente el diseño del tema, el tema se llamara SimpleCH. Empezaremos haciendo nuestro diseño en html, después le pondremos un mejor aspecto con imágenes y también añadiremos nuestra plantilla de css.

Es momento de abrir nuestro editor de html y el primer archivo que crearemos es el index.html

Lo primero que debemos escribir es el DOCTYPE en nuestro caso usaremos el XHTML 1.0 estricto.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Después de esto insertamos el código de XHML indicando su namespace asociado y el metadato para definir la codificación de caracteres del documento.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>SimpleCH</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
</body>
</html>

Una de las cosas me gusta de Geany es que tiene varias plantillas para el documento que deseas usar y en la plantilla de html te inserta todo el modelo del archivo xhtml y por lo tanto,no tengo que estar recordando el DOCTYPE y su namespace.

Otra cosa que debemos de agregar en nuestro archivo index.html es el enlace de nuestra hoja de estilo CSS dentro de la etiqueta <head> </head>

<head>
	<title>SimpleCH</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="style.css"  type="text/css" />
</head>

Nuestro archivo de style.css debería tener una estructura o modelo más o menos así.


/* ****
Comentarios acerca del tema de WordPress como nombre de su creador, versión etc.
*****/
/***** General, todos los documentos que necesitan añadirle algún estilo *****/
body {}
#container {}
#container2 {}
#container3 {}
/***** Tipografía *****/
h1 {}
h2 {}
h3 {}
h4 {}
p {}
a {}
a:hover {}
a:visited {}
/*/**** Header o cabecera *****/
#header {}
/***** Contents los contenedores *****/
#content {}
/***** Las columnas o sidebar *****/
#sidebar-left {}
#sidebarRT {}
/***** Navegación o menú *****/
/***** Formularios *****/
/***** Footer (pie de nuestro documento) *****/
#footer {}
/***** Imágenes *****/
/***** Clases *****/
/*****Y cualquier estilo que queramos agregarle nuestros elementos *****/


Aunque tener nuestro archivo style.css de esta forma no es una ley o algo que tenga que ir como una obligación, sino que, es un modelo que ayuda a otras personas a ubicarse a la hora de hacer alguna modificación en el documento.

Seguimos editando nuestro archivo index.html y empezamos añadir los elementos dentro de la etiqueta <body></body>

<body>
	<div id="content-main" >
		<div id="header" class="margen">
			<div id="logo">
				<h1>SinpleCH</h1>
				<small>Diseño creado por David Chay</small>
			</div>
			<div id="form-header-search">
				<form action=" " method="post">
				<div>
					<input class="inptxt" type="text" name="s" value="" /><input class="btn" type="submit" value="Buscar" />
				</div>
				</form>
			</div>
		</div>
		<div id="menu" class="margen">
			<ul>
				<li><a href="">Inicio</a></li>
				<li><a href="">Portafolio</a></li>
				<li><a href="">Contacto</a></li>
				<li><a href="">Acerca de</a></li>
			</ul>
		</div>
		<div id="content-body" class="margen">
				<div id="contenido">
					<h2>Wordpress, Creación de un tema sesión 1</h2>
					<p>
						WordPress es sistema de gestión de contenidos (CMS) de fuente abierta bajo la licencia de GPL, por lo tanto es libre y al mismo tiempo gratuito, enfocado especialmente a la creación de blog. Esta de sarrollado en PHP y usa MySql como base de datos. Esta en orientado a la estetica, los estandares web y la usabilidad, debido a que es libre cuenta con una enorme comunidad de desarrolladores y diseñadores que se encargan de crear los plugins y temas.
						para su descarga e instalacion puedes visitar http://es.wordpress.org/
						Para el diseño de un tema en WordPress hay tres tipos de código principales XHTML, CSS y PHP. Por lo tanto debemos de tener conocimientos básicos, principalmente de XHTML y CSS.
					</p>

					<h2>The Gimp, Video tutoriales en español</h2>
					<p>
						WordPress a creado una Fundación no lucrativa con el motivo de garantizar el libre acceso, a los proyectos de WordPress. Como parte de esta misión. la Fundación se encargará de la protección de WordPress, WordCamp y marcas relacionadas, mediante una fundación sin fines de lucro puede recibir donativos para propagar temas relacionados a WordPress y el Software Libre. De este modo las puertas están abiertas a programadores para que contribuyan a crear nuevas herramientas, plugins o extensiones.
						Esta fundación se inspiró en algunas organizaciones sin fines de lucro como: Free Software Foundation (FSF), la creadora de la licencia GNU GPL que usa y promueve WordPress; Open Source Applications Foundation (OSAF), la cual creó Chandler (PIM); y la Fundación Mozilla, haciendo que la web y el correo electrónico sea más accesible y basado en estándares abiertos.
						Y los donativos no tardaron en llegar, ya que WordCamp NYC (Nueva York) decidió donar USD$28,000 tras el éxito del evento celebrado en noviembre de 2009.
						El sitio de la fundacion es http://wordpressfoundation.org/
						Fuente | http://www.fayerwayer.com
					</p>

					<h2>Wordpress 2.9.1 listo para su descarga</h2>
					<p>
						Wordpress ha lanzado su version 2.9.1 mas estable, mas segura y mas facil de usar.
						Wordpress es un gestor de contenidos que ha estado evolucionando desde su aparicion gracias a que es GPL y que cuenta con una enorme comunidad de desarrolladores y diseñadores que se encargan de crear los plugins y temas.
						Ya esta disponible su descarga en español desde http://es.wordpress.org/
					</p>
				</div>
				<div id="sidebar">
					<div class="sidebar_top">
						<div class="sidebar_bottom">
							<h2>RSS</h2>
							<ul>
								<li><a href="">RSS FEED</a></li>
								<li><a href="">RSS EMAIL</a></li>
							</ul>
							<h2>Ultimas entradas</h2>
							<ul>
								<li><a href="">Wordpress creacion de un tema</a></li>
								<li><a href="">Fundacion wodrpress </a></li>
								<li><a href="">Gimp creacion de un gif animado </a></li>
								<li><a href="">Python rules</a></li>
							</ul>

						</div>
					</div>
				</div>
				<div style="clear:both;"></div>
			</div>
	</div>
	<div id="content-footer">
		<div id="footer" class="margen">
			<small>Gestionado por WordPress, SimpleCH diseñado por <a href="http://dach-dz.tuxpixel.net/">DaCh</a></small>
		</div>
	</div>
</body>

Puedes encontrarse con términos como sidebar, header, content, wrapper, nav, u otros términos en ingles, estos términos no son palabras claves o reservadas sino nombres con los que se identifican algunos elementos importantes dentro de la estructura del diseño, generalmente a elementos que contienen otros elementos.

Como por ejemplo

<div id=”header”> Común mente se le llama al elemento que contiene el titulo, menú principal u otros elementos que están en la cabecera del diseño.

<div id=”footer”> Se le denomina al contenedor del pie del diseño.

<div id=”sidebar”> Comúnmente es la barra lateral.

<div id=”sidebar-left”> Se le llama a la barra lateral izquierda.

<div id=”sidebar-right”> Se le llama a la barra lateral derecha.

Estos son por mencionar algunos.

Tu puedes asignar el nombre que deseas a tus elementos, ya sea en ingles o español anulando tildes, la letra “ñ” u otros caracteres especiales, solo ten en cuenta que estos elementos son comúnmente llamados con estos términos para que cualquier persona pueda entenderle, de manera más fácil, a la estructura del diseño.

Esta es la visualización del documento index.html

Este es el puro diseño html ahora vamos a darle un poco de color. Para esto hay que definir los colores que usara el tema.

Yo usare la paleta con los colores

#cbe86b #f2e9e1 #1c140d #26ade4

Puedes combinar tus colores favoritos y si no tienes idea de que colores usar puedes acceder a COLOURlovers o Kuler de Adobe,  ahí encontraras cientos de paletas de colores.

Ahora que ya definimos los colores a usar, es tiempo de abrir nuestro editor de imágenes the gimp.

1.- Creamos una imagen nueva de 1024 x 768.

2.- Como segundo paso, creamos un rectángulo en la parte superior con una altura de 120 px y anchura de 1024 px. Y lo rellenamos del color #cbe86b.

3.- En siguiente paso, creamos un rectángulo justo debajo del que acabamos de crear, con una anchura de 1024px y una altura de 35px y lo rellenamos con el color #1c140d.

4.- Ahora agregamos los gradientes, seleccionamos el rectángulo de color #1c140d, el que creamos el paso anterior y escogemos la herramienta de gradiente con 60 de opacidad, de forma lineal, que tenga un degradado de #f2e9e1 a transparente, procura que el gradiente quede a la mitad del rectángulo.

5.- En el próximo paso, creamos un gradiente de bajo del rectángulo de color #1c140d, el mismo que modificamos en el paso anterior. Para esto escogemos la herramienta de selección rectangular y creamos la selección de 1024 x 80, ya hecha la selección, escogemos la herramienta de gradiente con 100 de opacidad, de forma lineal y que tenga un degradado de #f2e9e1 a transparente, procura que abarque toda la selección rectangular.

6.- A continuación, creamos una capa nueva y ponemos guías verticales a 37, 512 y 987.

7.- En el ultimo paso, hacemos una guía horizontal a 250, enseguida escogemos la herramienta de gradiente y creamos un gradiente de forma radial, con opacidad 100 y un degradado de color blanco #ffffff a transparente, justo en la guía vertical de en medio (a 512) y la guía horizontal y luego cambiamos el modo de la capa a claridad nueva.

Y a si nos queda la imagen terminada.

Guardamos el archivo en formato .xcf pero aun no lo cerramos.

Creamos una carpeta que se llame images y es ahí donde guardaremos las imágenes del tema.
Ahora que ya tenemos nuestro fondo hecho, empecemos a editar el archivo style.css.

/********************Aspecto General***********************/
body{
		margin:0px;
		padding:0px;
		background-color:#ffffff;
		font-family: verdana, Arial, Helvetica;
		font-size:13px;
}
#content-main{
		background-image:url(images/bg_body.jpg);
		background-repeat:repeat-x;
	}
#content-footer{
	background:#1C140D;
	color:#F2E9E1;
	padding:20px;
}
.margen{
	width:850px;
	margin:0 auto;
}

La imagen bg_body.jpg es un recorte del fondo que hicimos. De 1px de ancho por 250px alto empezando en la poción de 0,0 esta imagen la guardamos en la carpeta images.

Seguimos editando el archivo style.css y ahora definimos la tipografía a usar.

Sitios que te ayudaran a elegir la tiografia para tu css

En mi caso usare esta familia de fuentes.
Para body
verdana, Arial, Helvetica;

Para h1 y h3
Helvetica, Georgia, Arial;

Para h2
Georgia, times, Helvetica;

El codigo seria

/**********************Tipografia*************************/
h1, h2, h3, h4{
	color:#000000;
	margin:0;
}

h1{
	font-size:36px;
	font-family:Helvetica, Georgia, Arial;
}

h2{
	margin-bottom:10px;
	font-size:30px;
	font-family:Georgia, Times, Helvetica;
}
h3{
	font-size:20px;
	font-family:Helvetica, Georgia, Arial;
	margin-bottom:10px;
}

small{
	font-weight: bold;
	font-size:12px;
	display:block;
}

Ahora editamos los enlaces y la etiqueta p

/******************Enlaces y Parrafos*******************/
a:link, a:visited{
	color:#26ade4;
	text-decoration:none;
	font-weight: bold;
}

a:hover, a:active{
	text-decoration: underline;
}

p{
	margin:0px 0px 20px 0px;
	padding:10px;

}

Es hora de definir la estructura.

/********************Esctructura***********************/

#header{
		height:120px;
		background:url(images/bg_header.jpg) no-repeat;
		background-position:top center;
}

#logo h1, #logo small {
	   margin:0px;
	   display:block;
	   text-indent:-9999px;
	   _text-indent:100px;
}

#logo{
	background:url(images/logo.png) no-repeat;
	_background:none;
	width:470px;
	height:120px;
	float:left;
}
#form-header-search{
	float:left;
	margin:30px 0 0 0;
}
#menu{
		height:35px;
		color:#ffffff;
		text-align:center;
	}
#content-body{
	padding-top:20px;

}

#contenido{
	float:left;
	width:600px;
}

#sidebar{
	background:url(images/bg_sidebar.jpg) repeat-y;
	background-position:center;
	padding:0;
	margin:0;
	color:#f2e9e1;

	width:250px;
	float:left;
	}

La imagen de fondo de header, bg_header.jpg, la recortamos de nuestro fondo. Y la guardamos en la carpeta images.

Ahora, el logo o imagen del titulo en mi caso haré una imagen del nombre del tema.

Para crear esta imagen voy a usar inkscape.

1.- El primer paso es abrir el programa, y escribimos el texto del titulo.

2.- En el siguiente paso, vamos al menú de texto y escogemos la opción de texto y tipografía. Escogemos la tipografía deseada con un tamaño de 100.

3.- En el siguiente paso vamos al menú de objeto y escogemos la opción de relleno y borde, y en la pestaña Relleno le damos un color de 1c140dff y en la pestaña Color de trazo de trazo le damos un color de f2e9e1b7 y en la pestaña de estilo de trazo le damos un ancho de 3px.

4.- A continuación, escribimos el texto de la descripción y vamos al menú de texto y escogemos la opción de texto y tipografía. Escogemos la tipografía deseada con un tamaño de 72.

5.- Por ultimo solo giramos un poco el texto y listo. Y lo importamos en el menú de archivo/importar mapa de bits/titulo.png inkscape solo importa imágenes en png.

Ahora para terminar la imagen logo.png la abrimos con the gimp y la escalamos a 466 x 119.
En el menú Imagen/escalar imagen

Ahora regresamos a style.css y editamos el menú.

/***********************Menu**************************/
#menu ul{
	margin:0px; padding:0px;
	line-height:200%;
}
#menu ul li{
	display:inline;
	margin-left:30px;
}
#menu ul li a{
	text-decoration: none;
	color:#CBE86B;
	padding:5px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight: bold;
	text-transform: uppercase;
}
#menu ul li a:active, #menu ul li a:hover {
	color: #1c140d;
	background:#CBE86B;

}

Después le damos estilo al formulario de búsqueda.

/********************Formulario************************/
.btn{
	font-weight: bold;
	border:5px solid #1c140d;
	background:#1c140d;
	margin:0px;
	color:#f2e9e1;
}
.btn:hover{
	color:#cbe86b;
}
.inptxt{
	border:5px solid #1c140d;
	margin:0px;
}

A continuación a footer

/**********************Footer**************************/

#footer{
	text-align: center;
}

Por ultimo editamos algunas clases extras que necesitamos.

/**********************Otras clases********************/

/*************El sidebar****************/

#sidebar .sidebar_top{
	background:url(images/sidebar_top.jpg) no-repeat;
	background-position:center top;
	display: block;
}
#sidebar .sidebar_bottom{
	background:url(images/sidebar_bottom.jpg) no-repeat;
	background-position:center bottom;
	display: block;
	padding:15px;
	margin:0;
}
#sidebar .sidebar_bottom h2{
	font-size:20px;
	color:#f2e9e1;
}
#sidebar .sidebar_bottom ul{
	margin:10px 0px 30px 15px;
	padding:0px;
}
#sidebar .sidebar_bottom ul li{
	list-style:none;
	margin:0px 0px 8px 0px;
	padding:0px;

}

Para hacer la imagen de fondo del sidebar seguimos los siguientes pasos.

1.- Abrimos otra vez el editor de imágenes y creamos una nueva imagen de 640 x 400 y con la herramienta de selección rectangular hacemos un rectángulo de 250x 300 px.

2.- Enseguida hacemos los bordes redondeados, desde el menú de seleccionar escogemos la opción de rectángulo redondeado con un radio de 15.

3.- Rellenamos el rectángulo con bordes redondeados con un color de #1c140d.

4.- Ahora vamos al menú seleccionar y escogemos la opción de borde y le damos 1px.

5.- Como siguiente paso, seleccionamos un color de #cbe86b y enseguida con la herramienta de pincel coloreamos el borde que hicimos en el paso anterior.

6.- El próximo paso le añadimos un efecto de gradiente en la parte superior de nuestro rectángulo, Seleccionando el color #f2e9e1 escogemos la herramienta de gradiente y le damos un valor de opacidad 60 de forma lineal y degradado de #f2e9e1 a transparente.

7.- Ahora seleccionamos la parte superior de l rectángulo con un ancho de 250px y alto de 59px y en el menú de imagen escogemos la opción recortar a selección y guardamos esa imagen como sidebar_top.jpg.

8.- Ahora deshacemos la imagen hiendo al menú de editar y en la opción deshacer o con las teclas Ctrl + Z y en el rectángulo seleccionamos un pequeño rectángulo de 250px de ancho por 1px de alto, procura que la selección la hagas en el centro del rectángulo, y nos dirigimos al menú imagen y escogemos Recortar a la selección por ultimo nos vamos al menú archivo guardar como y guardamos con el nombre de bg_sidebar.jpg

9.- por ultimo volvemos a deshacerla imagen con la tecla Ctrl + Z, y volvemos a realizar otra selección pero ahora la haremos en la parte posterior del rectángulo, la selección será de 250 x 20 y recortamos a selección y guardamos como sidebar_bottom.jpg

Todas las imágenes que usemos en el tema deben de guardarse en la carpeta images.

Por el momento esto seria el código de style.css pero podemos seguir añadiendo cuando ya estemos creando el tema para WordPress.

El código de style.css hasta este momento seria.

/********************Aspecto General***********************/
body{
		margin:0px;
		padding:0px;
		background-color:#ffffff;
		font-family: verdana, Arial, Helvetica;
		font-size:13px;
}
#content-main{
		background-image:url(images/bg_body.jpg);
		background-repeat:repeat-x;
	}
#content-footer{
	background:#1C140D;
	color:#F2E9E1;
	padding:20px;
}
.margen{
	width:850px;
	margin:0 auto;
}

/**********************Tipografia*************************/
h1, h2, h3, h4{
	color:#000000;
	margin:0;
}

h1{
	font-size:36px;
	font-family:Helvetica, Georgia, Arial;
}

h2{
	margin-bottom:10px;
	font-size:30px;
	font-family:Georgia, Times, Helvetica;
}
h3{
	font-size:20px;
	font-family:Helvetica, Georgia, Arial;
	margin-bottom:10px;
}

small{
	font-weight: bold;
	font-size:12px;
	display:block;
}

/******************Enlaces y Parrafos*******************/
a:link, a:visited{
	color:#26ade4;
	text-decoration:none;
	font-weight: bold;
}

a:hover, a:active{
	text-decoration: underline;
}

p{
	margin:0px 0px 20px 0px;
	padding:10px;

}

/********************Esctructura***********************/

#header{
		height:120px;
		background:url(images/bg_header.jpg) no-repeat;
		background-position:top center;
}

#logo h1, #logo small {
	   margin:0px;
	   display:block;
	   text-indent:-9999px;
}

#logo{
	background:url(images/logo.png) no-repeat;
	width:470px;
	height:120px;
	float:left;
}
#form-header-search{
	float:left;
	margin:30px 0 0 0;
}
#menu{
		height:35px;
		color:#ffffff;
		text-align:center;
	}
#content-body{
	padding-top:20px;

}

#contenido{
	float:left;
	width:600px;
}

#sidebar{
	background:url(images/bg_sidebar.jpg) repeat-y;
	background-position:center;
	padding:0;
	margin:0;
	color:#f2e9e1;
	width:250px;
	float:left;
}

/***********************Menu**************************/
#menu ul{
	margin:0px; padding:0px;
	line-height:200%;
}
#menu ul li{
	display:inline;
	margin-left:30px;
}
#menu ul li a{
	text-decoration: none;
	color:#CBE86B;
	padding:5px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	font-weight: bold;
	text-transform: uppercase;
}
#menu ul li a:active, #menu ul li a:hover {
	color: #1c140d;
	background:#CBE86B;

}
/********************Formulario************************/
.btn{
	font-weight: bold;
	border:5px solid #1c140d;
	background:#1c140d;
	margin:0px;
	color:#f2e9e1;
}
.btn:hover{
	color:#cbe86b;
}
.inptxt{
	border:5px solid #1c140d;
	margin:0px;
}

/**********************Footer**************************/

#footer{
	text-align: center;
}
/**********************Otras clases********************/

/*************El sidebar****************/

#sidebar .sidebar_top{
	background:url(images/sidebar_top.jpg) no-repeat;
	background-position:center top;
	display: block;
}
#sidebar .sidebar_bottom{
	background:url(images/sidebar_bottom.jpg) no-repeat;
	background-position:center bottom;
	display: block;
	padding:15px;
	margin:0;
}
#sidebar .sidebar_bottom h2{
	font-size:20px;
	color:#f2e9e1;
}
#sidebar .sidebar_bottom ul{
	margin:10px 0px 30px 15px;
	padding:0px;
}
#sidebar .sidebar_bottom ul li{
	list-style:none;
	margin:0px 0px 8px 0px;
	padding:0px;

}

Y el diseño finalizado nos quedaría de la siguiente forma.

El diseño se ve bien con todos los navegadores que cumplen los estándares webs el único dolor de cabeza es IE6.

Para el logo hicimos una imagen png la cual no se visualiza bien con IE6 pero podemos hacer un pequeño hack a nuestro css para que no se vea la imagen sino que muestre el titulo con letras. Solo debemos de añadir dos líneas a nuestro código.

#logo h1, #logo small {
	   margin:0px;
	   display:block;
	   text-indent:-9999px;
	   _text-indent:100px;
}

#logo{
	background:url(images/logo.png) no-repeat;
	_background:none;
	width:470px;
	height:120px;
	float:left;
}

Con estas líneas agregadas al archivo style.css el diseño en IE6 se mira de la siguiente forma.

Otra cosa que debemos agregar es el favicon, el mió es.

Lo agregamos en la cabecera del index.html en la etiqueta <head></head>

<head>
	<title>SimpleCH</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="stylesheet" href="style.css"  type="text/css" />
	<link rel="shortcut icon" href="images/favicon.ico" />
</head>

Ahora solo nos queda validar nuestro diseño en http://validator.w3.org/

Esta Web se encargara de validar tu xhtml y te mostrara los errores que tengas en tu diseño.

En mi diseño original tuve que corregir un problema con el formulario y es que me pedía que los elementos input el botón como el texto deberían estar juntos en un div. Para esta sesión usare ya el código validado desde el principio para que no tengas ningún problema.

Espero haberte ayudado en esta sesión a crear tu diseño. Y en la próxima sesión empezaremos a crear el tema de WordPress con este diseño.

cssTypeset

csstypeset es una herramienta web que permite crear el código CSS de un texto.

typeTester

Es un sitio que te ayuda a analizar tamaños, espacios em blanco, sangrías, colores y demás detalles.

csstxt

Es una herramienta web que ilustra las diferentes maneras que puede editar su estilo de tipografia.

Breve introducción

WordPress es sistema de gestión de contenidos (CMS) de fuente abierta bajo la licencia de GPL, por lo tanto es libre y al mismo tiempo gratuito, enfocado especialmente a la creación de blog. Esta desarrollado en PHP y usa MySql como base de datos. Esta en orientado a la estetica, los estandares web y la usabilidad, debido a que es libre, cuenta con una enorme comunidad de desarrolladores y diseñadores que se encargan de crear los plugins y temas.
Para su descarga e instalacion puedes visitar http://es.wordpress.org/

Conocimientos necesarios

Para el diseño de un tema en WordPress hay tres tipos de código principales XHTML, CSS y PHP. Por lo tanto debemos de tener conocimientos básicos, principalmente de XHTML y CSS.

Herramientas a usar

Necesitamos usar un manipulador de imágenes como The Gimp, Photoshop, Inkscape o cualquier otro programa que nos facilite la edición de imágenes para el diseño de nuestro tema.

Otro programa que es necesario es un editor de textos como Dreamweaver, Notepad++, Geany, Compozer, etc.

En mi caso uso Geany para la edicion de html y CSSED para la edicion de css y The Gimp como manipulador de imagenes.

Y principalmente necesitaremos un navegador web que cumpla con los estándares web como Firefox, IE 8, Google Chrome, Safari u Opera.

Te recomiendo firefox ya que cuenta una extensa cantidad de plugin que pueden de ser de gran ayuda a la hora de crear el tema.

Necesidades de nuestro tema

Nuestro tema necesita ser simple, sencillo, único, fácil de usar y que cumpla los estándares web.

Si eres un desarrollador/diseñador web talves esto sea de mucha ayuda, aveces necesitamos tener instalados todos los navegadores en nuestra computadora para provar nuestros diseños o programas, pero es tan tedioso instalar todos los navegadores, cuando tu, como usuario usas solo uno o sobretodo en Internet Explorar ya que windows te permite tener instalado solo una version.

Browser Sandbox es un sitio en donde podemos preinstalar los navegadores mas poulares como firefox, IE 6 7 y 8, opera, google chrome y safari. Sin necesidad de tenerlos todos en tu computadora.

Para usar el navegador que deseas tansolo es de entrar a http://spoon.net/browsers/ darle click en el navegador que queremos y esperar que termine de descargar y despues de su descarga aparecera el navegador en una venta asi como si lo abrieramos desde nuestra computadora.

El unico inconveniente es que solo esta disponible para windows.

Buscando en internet me encontré con el blog @line25blog en el cual presenta una simple solucion con la Wiki de la API de Twitter.

Lo que vamos a desarrollar: un diseño simple que muestre los últimos tweets de un feed en particular. Si bien en esta demostración se utiliza un diseño de página completa, el mismo enfoque puede utilizarse para mostrar hasta 20 tweets en cualquier lugar de tu sitio web.

Empecemos por dar contenido al concepto para tener una buena idea de cómo los cambios se deben mostrar. Aquí hemos utilizado un fondo determinado, expusimos el nombre de usuario @line25blog como un encabezado general, utilizado una pequeña y tierna mascota de Twitter desde Blog.SpoonGraphics para introducir el mensaje y darle estilo a cada Tweet en un contenedor redondo.

El HTML

<div id="twitter">
  <h1><a href="http://twitter.com/line25blog">@line25blog</a></h1>
  <ul id="twitter_update_list"></ul>
</div>
<script src="http://twitter.com/javascripts/blogger.js"type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/line25blog.json?callback=twitterCallback2&count=1"type="text/javascript"></script>

Las dos opciones son para editar, el nombre del usuario para obtener los tweets, y el número de tweets, en el script, que quieres mostrar. Así pues, usted puede mostrar su último tweet, o una lista de mensajes recientes.

Viendo el HTML en un navegador, debe mostrar que todo funciona correctamente. El siguiente codigo es para personalizar el estilo visual con un toque de CSS.

El CSS

body {
	background: #909ca6 url(http://line25.s3.amazonaws.com/wp-content/themes/line25/images/body-bg.png);
}

#twitter {
	width: 500px; margin: 130px auto;
}

	#twitter h1 a {
		display: block; margin: 0 0 15px 0;
		font: 90px Helvetica, Arial, Sans-Serif; color: rgba(255,255,255,0.2);
		text-decoration: none;
	}
		#twitter h1 a:hover { color: rgba(255,255,255,0.3); }

	#twitter ul {
		list-style: none; padding: 0 0 0 140px;
		background: url(bird.png) 0 0 no-repeat;
	}
		#twitter ul li {
			padding: 20px;
			background: rgba(255,255,255,0.1);
			border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;
		}
			#twitter ul li a {
				font: italic 14px/30px Georgia, Times, Serif;
				color: #555b6e;
			}
				#twitter ul li a:hover { color: #1b2f6f; }

		#twitter ul li span {
			font: 22px/30px Helvetica, Arial, Sans-Serif; color: #fff;
		}
			#twitter ul li span a {
				font: 22px/30px Helvetica, Arial, Sans-Serif;
			}

Unas pocas líneas de CSS pronto pueden transformar la apariencia del HTML. Hemos usado RGBA para especificar no sólo los canales rojo, verde y azul, sino también un canal alfa para determinar la opacidad del elemento. Usando esto sobre el título, el estado hover y list-background se pueden añadir una mejora visual muy atractiva.

ver el ejemplo

Fuente: http://www.elwebmaster.com

Post Original: http://line25.com